/* Smooo coming-soon page - the same brand world as the full site (Outfit, brand blues + pastel accents, day sky / bedtime night sky,
   Ozzie, Ollie & Ovvie, bubbles). Day 7am-7pm / bedtime 7pm-7am on the visitor's clock (index.html + app.js). */
:root {
  --sky: #6DD0F0; --sky-l: #B6E7F7; --sky-xl: #E4F6FD; --royal: #1E6EDC; --logo: #007AC2;
  --pink: #FF6EB4; --pink-d: #E23EAF; --yellow: #FFD749; --green: #00B487; --purple: #775AFF;
  --bg: #F3FBFF; --card: #FFFFFF; --ink: #0B3A75; --ink-2: #134A8E; --muted: #4D6B92;
  --line: rgba(11, 58, 117, .1); --shadow: 0 18px 40px -20px rgba(11, 58, 117, .35);
  --sky-1: #6DD0F0; --sky-2: #A9E2F6; --sky-3: #E4F6FD; --cloud: #FFFFFF; --cloud-o: .95; --water: #6DD0F0; --water-2: #B6E7F7;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #071433; --card: #102453; --ink: #EAF5FF; --ink-2: #CFE6FF; --muted: #9DB7DC;
  --line: rgba(255, 255, 255, .12); --shadow: 0 18px 40px -20px rgba(0, 0, 0, .7);
  --sky-1: #0A1A44; --sky-2: #12306E; --sky-3: #071433; --cloud: #BFD8FF; --cloud-o: .13; --water: #3E9BD8; --water-2: #7CC6EE;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: "Outfit", system-ui, sans-serif; color: var(--ink); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 45%, var(--sky-3) 100%); background-attachment: fixed; transition: color .5s; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:root[data-theme="dark"] .day-only, :root:not([data-theme="dark"]) .night-only { display: none !important; }

/* ---------- sky ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cloud { position: absolute; background: var(--cloud); opacity: var(--cloud-o); border-radius: 999px; filter: blur(1.5px); animation: drift linear infinite; transition: opacity .6s, background .6s; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 55%; height: 170%; left: 14%; bottom: 20%; } .cloud::after { width: 40%; height: 135%; right: 12%; bottom: 25%; }
.c1 { width: 240px; height: 64px; top: 14%; left: -260px; animation-duration: 70s; }
.c2 { width: 170px; height: 46px; top: 34%; left: -200px; animation-duration: 54s; animation-delay: -30s; }
.c3 { width: 320px; height: 80px; top: 74%; left: -340px; animation-duration: 90s; animation-delay: -55s; }
.c4 { width: 130px; height: 38px; top: 8%; left: -150px; animation-duration: 46s; animation-delay: -12s; }
.c5 { width: 210px; height: 56px; top: 55%; left: -230px; animation-duration: 64s; animation-delay: -40s; }
@keyframes drift { to { transform: translateX(calc(100vw + 400px)); } }
.stars, .sky-moon, .sky-sun { position: absolute; transition: opacity .8s; }
.stars { inset: 0; opacity: 0; background-image:
  radial-gradient(2px 2px at 12% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 28% 8%, #fff, transparent), radial-gradient(2px 2px at 44% 26%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 63% 12%, #fff, transparent), radial-gradient(2.5px 2.5px at 78% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 10%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 8% 62%, #fff, transparent), radial-gradient(2px 2px at 35% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 56% 58%, #fff, transparent),
  radial-gradient(2px 2px at 86% 66%, #fff, transparent), radial-gradient(1.5px 1.5px at 20% 40%, #fff, transparent), radial-gradient(2px 2px at 70% 48%, #fff, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { filter: brightness(.45); } }
.sky-moon { top: 11%; right: 8%; width: 74px; height: 74px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 60px 12px rgba(255, 240, 190, .35); opacity: 0; }
.sky-moon::after { content: ""; position: absolute; width: 62px; height: 62px; border-radius: 50%; top: -8px; left: 22px; background: var(--sky-1); }
.sky-sun { top: 9%; right: 9%; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle, #FFF1A8 0 45%, #FFD749 46% 100%);
  box-shadow: 0 0 0 14px rgba(255, 215, 73, .18), 0 0 80px 20px rgba(255, 215, 73, .35); animation: sunpulse 6s ease-in-out infinite; }
@keyframes sunpulse { 50% { box-shadow: 0 0 0 22px rgba(255, 215, 73, .12), 0 0 90px 26px rgba(255, 215, 73, .3); } }
:root[data-theme="dark"] .stars, :root[data-theme="dark"] .sky-moon { opacity: 1; } :root[data-theme="dark"] .sky-sun { opacity: 0; }

/* bubbles to pop */
.bubbles { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.bub { position: absolute; bottom: -90px; border-radius: 50%; pointer-events: auto; cursor: pointer; border: 0; padding: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.25) 14%, rgba(255,255,255,.08) 45%, rgba(182,231,247,.35) 70%, rgba(255,255,255,.7) 100%);
  box-shadow: inset 0 0 12px rgba(255,255,255,.6), inset -6px -8px 14px rgba(255,110,180,.18), inset 6px 6px 14px rgba(109,208,240,.25); animation: rise linear forwards; }
@keyframes rise { 25% { transform: translate(18px, -28vh); } 50% { transform: translate(-14px, -56vh); } 75% { transform: translate(16px, -84vh); } 100% { transform: translate(0, -118vh); } }
.bub.pop { animation: pop .32s ease-out forwards !important; }
@keyframes pop { 40% { transform: var(--at) scale(1.35); opacity: .8; } 100% { transform: var(--at) scale(1.7); opacity: 0; } }
.pop-word { position: fixed; z-index: 6; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 2px 8px rgba(11,58,117,.45); pointer-events: none; animation: popword .8s ease-out forwards; }
@keyframes popword { to { transform: translateY(-40px) scale(1.2); opacity: 0; } }
.confetti { position: fixed; z-index: 7; pointer-events: none; font-size: 22px; animation: fall 2.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--dx), 70vh) rotate(var(--r)); opacity: 0; } }

/* ---------- top ---------- */
.top { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 18px 20px; }
.top-logo { height: 36px; width: auto; }
:root[data-theme="dark"] .top-logo, :root[data-theme="dark"] .logo-big img { filter: brightness(1.7) saturate(.85) drop-shadow(0 0 26px rgba(109, 208, 240, .45)); }
.theme { position: relative; width: 62px; height: 32px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; background: linear-gradient(135deg, #8EE0FF, #FFE59A); padding: 0; transition: background .4s; }
.theme-ic { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; line-height: 1; } .theme-ic.sun { left: 8px; } .theme-ic.moon { right: 8px; }
.theme-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .45s cubic-bezier(.6,-.3,.3,1.4); }
.theme[aria-checked="true"] { background: linear-gradient(135deg, #0B1A45, #3A2F8A); } .theme[aria-checked="true"] .theme-knob { transform: translateX(30px); background: #E9EEFF; }

/* ---------- hero ---------- */
main { position: relative; z-index: 3; }
.hero { max-width: 1240px; margin: 0 auto; padding: 10px 20px 70px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px; align-items: center; min-height: calc(100vh - 80px); }
.copy { pointer-events: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 8px 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 62%, transparent); color: var(--ink-2); backdrop-filter: blur(8px); animation: up .8s .1s both; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 var(--pink); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.logo-big { margin: 22px 0 6px; animation: up .9s .2s both; }
.logo-big img { width: min(460px, 86%); height: auto; transform-origin: 50% 90%; animation: squish 5s ease-in-out 1.2s infinite; filter: drop-shadow(0 16px 24px rgba(0, 90, 160, .25)); }
@keyframes squish { 0%, 70%, 100% { transform: none; } 76% { transform: scale(1.04, .95); } 82% { transform: scale(.97, 1.04) translateY(-8px); } 90% { transform: scale(1.01, .99); } }
.tag { font-size: clamp(30px, 4.4vw, 54px); font-weight: 900; letter-spacing: -.025em; line-height: 1.05; animation: up .9s .35s both; }
.soft { color: var(--pink-d); display: inline-flex; } .soft i { font-style: normal; display: inline-block; animation: wob 2.6s ease-in-out infinite; } .soft i:last-child { animation-delay: .4s; }
@keyframes wob { 50% { transform: translateY(-.12em) rotate(-6deg); } }
:root[data-theme="dark"] .soft { color: var(--pink); }
.soon { color: var(--royal); white-space: nowrap; display: inline-block; }
:root[data-theme="dark"] .soon { color: var(--sky); }
.soon b { display: inline-block; font-weight: 900; animation: hop 2.8s ease-in-out infinite; }
.soon b:nth-child(1) { animation-delay: 0s } .soon b:nth-child(2) { animation-delay: .08s } .soon b:nth-child(3) { animation-delay: .16s } .soon b:nth-child(4) { animation-delay: .24s }
.soon b:nth-child(5) { animation-delay: .32s } .soon b:nth-child(6) { animation-delay: .4s } .soon b:nth-child(7) { animation-delay: .56s } .soon b:nth-child(8) { animation-delay: .64s }
.soon b:nth-child(9) { animation-delay: .72s } .soon b:nth-child(10) { animation-delay: .8s }
@keyframes hop { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-.18em); } 80% { transform: translateY(.03em) scale(1.05, .95); } }
.lead { margin-top: 16px; font-size: 19px; max-width: 36ch; color: var(--ink-2); animation: up .9s .5s both; }
@keyframes up { from { opacity: 0; transform: translateY(26px); } }

/* the bath filling up */
.fill { margin-top: 26px; display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 22px; max-width: 470px;
  background: color-mix(in srgb, var(--card) 70%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); border: 1px solid var(--line); animation: up .9s .6s both; }
.tub { width: 92px; flex: none; }
.tub svg { width: 100%; height: auto; overflow: visible; }
.tub-line { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tap { fill: none; stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.drip { fill: var(--water); animation: drip 1.2s ease-in infinite; }
@keyframes drip { 0% { transform: translateY(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
.water { fill: var(--water); }
.ripple { fill: var(--water-2); opacity: .9; animation: ripple 2.4s linear infinite; }
@keyframes ripple { to { transform: translateX(30px); } }
.foam circle { fill: #fff; } :root[data-theme="dark"] .foam circle { fill: #DCEBFF; }
.foam { animation: foam 3s ease-in-out infinite; }
@keyframes foam { 50% { transform: translateY(-1.5px); } }
.duck { animation: duck 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes duck { 25% { transform: translate(3px, -1.5px) rotate(-6deg); } 50% { transform: translate(6px, 0) rotate(0); } 75% { transform: translate(3px, -1px) rotate(6deg); } }
.fill-txt { flex: 1; min-width: 0; }
.fill-head { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dots i { font-style: normal; display: inline-block; animation: dot 1.4s infinite; } .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.fill-msg { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; color: var(--ink-2); transition: opacity .3s; }
.pct { font-weight: 800; color: var(--royal); font-variant-numeric: tabular-nums; } :root[data-theme="dark"] .pct { color: var(--sky); }
.bar { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--sky) 22%, transparent); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--sky), var(--royal), var(--pink)); background-size: 200% 100%;
  animation: flow 3s linear infinite; transition: width 1.2s ease; }
@keyframes flow { to { background-position: -200% 0; } }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; animation: up .9s .7s both; }
.btn { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 24px; border-radius: 999px;
  background: var(--royal); color: #fff; box-shadow: 0 14px 26px -12px var(--royal); transition: transform .2s, gap .2s; }
.btn:hover { transform: translateY(-2px); gap: 14px; } .btn:active { transform: scale(.97); }
.btn.ghost { background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--royal) 35%, transparent); }

/* Ozzie's dream bubble + Ollie & Ovvie */
.stage { position: relative; aspect-ratio: 1; max-width: 540px; width: 100%; justify-self: center; animation: up 1s .3s both; }
.dream { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 45%, #7DD7F3 0%, var(--sky) 62%, #5CC4EA 100%);
  box-shadow: 0 30px 80px -30px rgba(0, 100, 170, .55), inset 0 -20px 50px rgba(30, 110, 220, .18), 0 0 0 14px rgba(255,255,255,.28); animation: breathe 6s ease-in-out infinite; }
:root[data-theme="dark"] .dream { background: radial-gradient(circle at 50% 40%, #2C6FB4 0%, #1B4C8F 60%, #12306E 100%); box-shadow: 0 0 80px 10px rgba(109, 208, 240, .32), 0 0 0 14px rgba(109, 208, 240, .12); }
@keyframes breathe { 50% { transform: scale(1.02); } }
.shine { position: absolute; top: 9%; left: 16%; width: 26%; height: 13%; border-radius: 50%; background: rgba(255,255,255,.55); filter: blur(6px); transform: rotate(-25deg); z-index: 2; }
.ozzie { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.ozzie img { position: absolute; left: 4%; top: 4%; width: 92%; height: auto; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); }
.ozzie img.sleepy { left: 8%; top: 20%; width: 84%; animation: snore 4s ease-in-out infinite; -webkit-mask-image: none; mask-image: none; opacity: .95; }
@keyframes snore { 50% { transform: scale(1.03, .98) translateY(4px); } }
.zzz { position: absolute; top: 22%; left: 62%; z-index: 3; font-weight: 900; color: #fff; pointer-events: none; }
.zzz i { position: absolute; font-style: normal; opacity: 0; animation: zz 3.6s ease-out infinite; text-shadow: 0 0 12px rgba(255,255,255,.6); }
.zzz i:nth-child(1) { font-size: 18px; } .zzz i:nth-child(2) { font-size: 26px; animation-delay: 1.2s; } .zzz i:nth-child(3) { font-size: 36px; animation-delay: 2.4s; }
@keyframes zz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(40px, -70px) rotate(14deg); opacity: 0; } }
.buddy { position: absolute; border: 0; padding: 0; background: var(--sky); border-radius: 50%; cursor: pointer; overflow: hidden;
  box-shadow: 0 16px 30px -12px rgba(0, 90, 160, .55), 0 0 0 6px rgba(255,255,255,.4); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.buddy:hover { transform: scale(1.08) rotate(-4deg); }
.buddy img { width: 100%; height: 100%; object-fit: cover; }
.b-ollie { width: 28%; aspect-ratio: 1; left: -2%; top: 8%; animation: orbitA 7s ease-in-out infinite; }
.b-ovvie { width: 22%; aspect-ratio: 1; right: 0; bottom: 14%; animation: orbitB 6s ease-in-out infinite; }
@keyframes orbitA { 50% { translate: 8px -14px; } } @keyframes orbitB { 50% { translate: -10px 12px; } }
:root[data-theme="dark"] .buddy { box-shadow: 0 0 34px -4px rgba(109, 208, 240, .6), 0 0 0 6px rgba(109, 208, 240, .18); }
.say { position: absolute; top: 2%; right: 2%; z-index: 4; background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 18px 18px 4px 18px;
  box-shadow: var(--shadow); max-width: 70%; }
.say.again { animation: bounceIn .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bounceIn { from { transform: scale(.6); opacity: 0; } }

/* claims ribbon */
.ribbon { position: relative; z-index: 3; background: var(--royal); color: #fff; padding: 14px 0; transform: rotate(-1.6deg); margin: 0 -20px; overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(11, 58, 117, .5); }
:root[data-theme="dark"] .ribbon { background: linear-gradient(90deg, #1E6EDC, #775AFF); }
.ribbon-track { display: flex; gap: 22px; width: max-content; animation: marquee 40s linear infinite; align-items: center; font-weight: 700; font-size: 18px; white-space: nowrap; }
.ribbon-track i { font-style: normal; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* sneak peek */
.peek { max-width: 1100px; margin: 0 auto; padding: 90px 20px 70px; text-align: center; }
.peek h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.peek h2 em { font-style: normal; color: var(--royal); } :root[data-theme="dark"] .peek h2 em { color: var(--sky); }
.peek .sub { margin: 10px auto 34px; color: var(--muted); max-width: 46ch; }
.peek .sub b { color: var(--ink-2); }
.hint-touch { display: none; } @media (hover: none) { .hint-touch { display: inline; } .hint-mouse { display: none; } }
.peek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); border-radius: 28px; padding: 16px 16px 20px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.card:hover { transform: translateY(-6px) rotate(-1deg); }
.card:nth-child(2):hover { transform: translateY(-6px) rotate(1deg); }
.glass { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 487 / 556; background: color-mix(in srgb, var(--c) 30%, var(--card)); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.glass img { width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(1.2); transform: scale(1.1); transition: filter .6s ease, transform .6s ease; pointer-events: none; }
.steam { position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; font-weight: 900; color: #fff; text-shadow: 0 6px 24px rgba(11,58,117,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)); transition: opacity .5s; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: scale(1.06) rotate(4deg); } }
.glass:hover img, .glass.open img { filter: blur(0) saturate(1); transform: none; }
.glass:hover .steam, .glass.open .steam { opacity: 0; }
.card h3 { margin-top: 14px; font-size: 22px; font-weight: 800; }
.card p { color: var(--muted); font-weight: 600; }
.card h3::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 8px; vertical-align: 2px; }

/* pop counter + toast + footer */
.pop-chip { position: fixed; left: 16px; bottom: 16px; z-index: 8; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; padding: 9px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); color: var(--ink-2); }
.pop-chip.bump { animation: bounceIn .4s cubic-bezier(.3,1.6,.5,1); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; z-index: 9; background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 14px;
  font-weight: 700; transition: transform .3s, opacity .3s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.foot { position: relative; z-index: 3; text-align: center; padding: 26px 20px 80px; color: var(--muted); font-weight: 600; font-size: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 0; gap: 10px; }
  .stage { order: -1; max-width: 360px; }
  .copy { display: flex; flex-direction: column; align-items: center; }
  .logo-big img { margin: 0 auto; }
  .lead { margin-left: auto; margin-right: auto; }
  .fill { text-align: left; width: 100%; }
  .cta { justify-content: center; }
  .peek-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding: 14px 16px; } .top-logo { height: 30px; }
  .stage { max-width: 300px; }
  .say { font-size: 13.5px; padding: 8px 12px; }
  .lead { font-size: 17px; }
  .tub { width: 74px; }
  .peek { padding: 70px 16px 50px; }
  .peek-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
  .ribbon-track { font-size: 16px; }
  .sky-sun, .sky-moon { transform: scale(.7); top: 9%; right: 3%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }