/* ==========================================================================
   Pip's Missing Word — waitlist landing page
   Design system: warm painterly storybook. Cream paper ground, navy ink,
   marigold + orange accents, teal tertiary. Rounded Fredoka display over
   Nunito body. One easing family, one travel distance, staggered reveals.
   Palette sampled from the physical deck: navy #1E2B5C · cream #F7F0DF ·
   marigold #EDA53C · orange #E8672E · teal #2C93A8.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ---------- Brand fonts (self-hosted, OFL) ---------- */
@font-face { font-family:"Fredoka"; src:url("assets/fredoka-semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Fredoka"; src:url("assets/fredoka-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito"; src:url("assets/nunito-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Nunito"; src:url("assets/nunito-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --navy-900:#141b3d;
  --navy-800:#1e2b5c;
  --navy-700:#28376f;
  --navy-600:#3a4c8a;
  --cream-50:#fdfaf1;
  --cream-100:#faf3e2;
  --cream-200:#f5ecd6;
  --cream-300:#ecdfc0;
  --marigold:#eda53c;
  --marigold-deep:#d4872a;
  --orange:#e8672e;
  --orange-deep:#c94f1f;
  --teal:#2c93a8;
  --teal-deep:#1f7185;

  --ink:var(--navy-800);
  --ink-soft:#5a6494;
  --ink-mute:#7c85ac;
  --paper:var(--cream-200);
  --paper-raised:var(--cream-50);
  --line:rgba(30,43,92,0.14);

  --font-display:"Fredoka","Trebuchet MS",ui-rounded,"Segoe UI Rounded",system-ui,sans-serif;
  --font-body:"Nunito","Segoe UI",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --wrap:1200px;
  --pad:clamp(1.25rem,5vw,3.5rem);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:11px;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.33,0,0.2,1);
  --rise:34px;
  --dur:0.7s;

  --sh-1:0 6px 18px -8px rgba(20,27,61,0.30);
  --sh-2:0 20px 44px -22px rgba(20,27,61,0.42);
  --sh-3:0 40px 80px -28px rgba(20,27,61,0.50);
  --sh-card:0 24px 50px -18px rgba(20,27,61,0.55);

  /* festival texture — faint confetti/sparkle motifs, tiled, contrast-safe */
  --confetti-cream:url("assets/confetti-cream.svg");
  --confetti-light:url("assets/confetti-light.svg");
}

/* ---------- Base ---------- */
html { scroll-behavior:smooth; }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* seamless paper grain — tiled, no blend mode, no fixed layer (a fixed
   full-viewport mix-blend layer wedges the compositor on scroll — verified) */
body {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}
main, header, footer { position:relative; z-index:1; }

h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-0.015em; text-wrap:balance; }
p { max-width:64ch; }
strong { font-weight:700; }
em { font-style:normal; color:var(--orange-deep); font-weight:700; }
::selection { background:var(--marigold); color:var(--navy-900); }

.wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); width:100%; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:1rem; top:-4rem; background:var(--navy-800); color:var(--cream-100); padding:.75rem 1.25rem; border-radius:var(--r-sm); z-index:200; transition:top .2s var(--ease); }
.skip-link:focus { top:1rem; }
:focus-visible { outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }

/* ---------- Shared type ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--marigold-deep);
}
.eyebrow--ink { color:var(--teal-deep); }
.eyebrow--gold { color:var(--marigold); }
.eyebrow::before { content:""; width:1.7em; height:2px; background:currentColor; opacity:.7; border-radius:2px; flex:none; }

.section-title { font-size:clamp(2rem,5vw,3.15rem); color:var(--ink); }
.section-title--light { color:var(--cream-50); }
.lede { font-size:clamp(1.12rem,2.3vw,1.4rem); color:var(--ink); font-weight:600; margin-top:1rem; }
.lede--light { color:var(--cream-200); }
.body { font-size:1.05rem; color:var(--ink-soft); margin-top:1rem; }
.body--light { color:rgba(245,236,214,0.82); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  padding:.95rem 1.9rem; border-radius:999px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
  box-shadow:var(--sh-1);
}
.btn-primary { background:linear-gradient(140deg,var(--orange) 0%,var(--marigold-deep) 100%); color:#fff; box-shadow:0 12px 26px -10px rgba(232,103,46,.6); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 20px 40px -12px rgba(232,103,46,.65); filter:brightness(1.04); }
.btn-primary:active { transform:translateY(-1px); }
.btn-block { width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:.7rem var(--pad);
  background:rgba(250,243,226,0);
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
/* fully OPAQUE when stuck — no alpha, so section content never ghosts through */
.site-header.is-stuck {
  background:var(--cream-100);
  box-shadow:0 4px 22px -14px rgba(20,27,61,.6);
  border-bottom:1px solid var(--line);
}
.brand-lockup { display:inline-flex; align-items:center; }
.brand-logo { width:auto; height:clamp(30px,4.2vw,38px); object-fit:contain; }
.header-cta {
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--navy-800); padding:.55rem 1.2rem; border-radius:999px;
  border:2px solid var(--navy-800);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.header-cta:hover { background:var(--navy-800); color:var(--cream-100); transform:translateY(-2px); }
@media (max-width:620px) { .header-cta { padding:.5rem .95rem; font-size:.85rem; } }
@media (max-width:400px) { .header-cta { display:none; } }

/* ==========================================================================
   Reveal system (one motion language)
   ========================================================================== */
/* JS-gated: without JS (or if it errors), all content is visible by default —
   never a blank/dead state. Hidden only when .js is present and enhancing. */
.js [data-animate] { opacity:0; }
.js [data-animate="rise"] { transform:translateY(var(--rise)); }
/* the hero plate reveals transform-only (stays opaque) so the LCP hero image
   paints immediately and is credited as the LCP element, not faded in. */
.js [data-animate="plate"] { opacity:1; transform:translateY(28px) scale(.965); }
.js [data-animate="fan"] { transform:translateY(28px); }
[data-animate].in {
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
@media (prefers-reduced-motion:reduce) {
  [data-animate] { opacity:1 !important; transform:none !important; transition:none !important; }
  /* the 188 fan cards are descendants (not [data-animate]) — settle them too */
  .js [data-animate="fan"] .fan-card {
    opacity:1; transition:none;
    transform:translate(-50%,-50%) rotate(calc(var(--step) * var(--spread))) translateY(calc(var(--step) * var(--step) * 5px));
  }
  html { scroll-behavior:auto; }
}

/* ==========================================================================
   SCENE 1 — Hero
   ========================================================================== */
.hero {
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(6.5rem,12vh,9rem) 0 clamp(3rem,7vh,5rem);
  background:
    var(--confetti-cream) 0 0 / 300px repeat,
    radial-gradient(120% 90% at 82% 8%, rgba(237,165,60,.20), transparent 55%),
    radial-gradient(110% 80% at 10% 100%, rgba(44,147,168,.14), transparent 60%),
    linear-gradient(180deg,var(--cream-100) 0%,var(--cream-200) 100%);
  overflow:hidden;
  isolation:isolate;
}
/* ---- hero top enrichment: festival bunting + drifting paper confetti ---- */
.hero-bunting {
  position:absolute; top:clamp(3.1rem,6vh,4.4rem); left:0; width:100%;
  height:clamp(50px,7vh,84px); z-index:1; pointer-events:none; opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  transform-origin:top center;
  animation:bunting-sway 7s ease-in-out infinite;
}
@keyframes bunting-sway { 0%,100%{ transform:rotate(-.5deg);} 50%{ transform:rotate(.5deg);} }
.hero-confetti { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cf {
  position:absolute; left:var(--l); top:var(--t);
  width:13px; height:13px; background:var(--c); opacity:.68;
  filter:drop-shadow(0 2px 3px rgba(20,27,61,.2));
  animation:cf-drift var(--dur,8s) ease-in-out var(--d,0s) infinite;
}
.cf--dot { border-radius:50%; }
.cf--oval { width:16px; height:9px; border-radius:50%; }
.cf--star { width:16px; height:16px; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
@keyframes cf-drift { 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-14px) rotate(20deg);} }
@media (max-width:700px){ .hero-bunting{ top:clamp(2.7rem,5vh,3.6rem); height:44px; } .cf--dot{ width:11px; height:11px; } .cf--oval{ width:13px; height:8px; } .cf--star{ width:13px; height:13px; } }
@media (prefers-reduced-motion:reduce){ .hero-bunting, .cf{ animation:none; } }

.hero-inner {
  position:relative; z-index:2;   /* content sits above bunting/confetti */
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-kicker {
  margin-top:1.3rem;
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(1rem,2vw,1.2rem); color:var(--ink-soft);
}
.hero-title {
  margin-top:.5rem;
  font-size:clamp(3.4rem,9.4vw,7rem);
  line-height:1.04; letter-spacing:-.02em; color:var(--navy-800);
}
/* each word on its own line with guaranteed clearance so descenders of one
   line never touch the next at any width */
.hero-title-line { display:block; }
.hero-title-line + .hero-title-line { margin-top:.04em; }
.hero-title-accent {
  color:var(--orange);
  position:relative; width:max-content;
  padding-bottom:.22em; /* breathing room so the accent rule isn't cramped */
}
.hero-title-accent::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:.11em;
  background:linear-gradient(90deg,var(--marigold),var(--orange));
  border-radius:999px; opacity:.95;
  transform:scaleX(0); transform-origin:left;
  animation:underline 1s var(--ease) forwards; animation-delay:.9s;
}
@keyframes underline { to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .hero-title-accent::after{ transform:scaleX(1); animation:none; } }
.hero-lede {
  margin-top:1.4rem; max-width:34ch;
  font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--ink-soft); font-weight:600;
}
.hero-lede strong { color:var(--orange-deep); }
.hero-actions { margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.hero-micro { font-size:.9rem; color:var(--ink-mute); font-weight:600; }
.hero-facts {
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem;
  border-top:1px solid var(--line); padding-top:1.3rem;
}
.hero-facts li { font-size:.9rem; color:var(--ink-soft); font-weight:600; }
.hero-facts strong { display:block; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--navy-800); letter-spacing:-.01em; }

/* hero plate — a layered pair of situation moments that gently TRADE front and
   back. Aspect reserves room above the front plate for the back plate's peek.
   transform/opacity only; --e is the trade duration. Default (no-JS /
   reduced-motion) = Ria front, Sid back. */
.hero-plate {
  position:relative; justify-self:center; width:100%; max-width:500px;
  aspect-ratio:1 / 1.04; --e:1.05s;
}
/* each plate: a framed situation image + its caption. Absolutely stacked so
   they overlap; front sits at the container bottom, back eases up + tilts. */
.hp-plate {
  position:absolute; left:2%; right:2%; bottom:0;
  transform-origin:60% 78%;
  transition:transform var(--e) var(--ease), opacity var(--e) var(--ease);
  will-change:transform;
}
/* FRONT (default: Ria) — dominant, crisp, upright-ish */
.hp-plate--ria { z-index:3; transform:rotate(-1.5deg); }
/* BACK (default: Sid) — eased up + tilted, ~45% peeking above the front */
.hp-plate--sid { z-index:2; transform:translate(8%,-56%) rotate(4.5deg) scale(.8); }
/* the trade — plates swap roles */
.hero-plate.show-sid .hp-plate--ria { z-index:2; transform:translate(8%,-56%) rotate(4.5deg) scale(.8); }
.hero-plate.show-sid .hp-plate--sid { z-index:3; transform:rotate(-1.5deg); }

.hero-plate-frame {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--cream-50); padding:14px;
  box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.6);
}
.hero-plate-frame::before {
  content:""; position:absolute; inset:14px; border-radius:calc(var(--r-lg) - 8px);
  box-shadow:inset 0 0 0 3px rgba(30,43,92,.08); z-index:2; pointer-events:none;
}
.hero-plate-img { width:100%; height:auto; border-radius:calc(var(--r-lg) - 8px); aspect-ratio:16/10; object-fit:cover; object-position:38% 30%; transition:opacity var(--e) var(--ease); }
.hp-plate--sid .hero-plate-img { object-position:37% 42%; }
/* recessive back image: washed toward its cream frame (opacity only, so it
   never muddies against the confetti page ground) — clearly subordinate. */
.hp-plate--sid .hero-plate-img { opacity:.52; }
.hero-plate.show-sid .hp-plate--sid .hero-plate-img { opacity:1; }
.hero-plate.show-sid .hp-plate--ria .hero-plate-img { opacity:.52; }

.hero-plate-cap {
  position:absolute; right:22px; top:22px; z-index:4;
  background:var(--cream-50); color:var(--navy-800);
  font-family:var(--font-display); font-weight:600; font-size:.9rem;
  padding:.4em .9em; border-radius:10px 10px 10px 3px;
  box-shadow:var(--sh-1);
  transition:opacity .5s var(--ease);
}
/* only the front plate's caption shows */
.hp-plate--sid .hero-plate-cap { opacity:0; }
.hero-plate.show-sid .hp-plate--sid .hero-plate-cap { opacity:1; }
.hero-plate.show-sid .hp-plate--ria .hero-plate-cap { opacity:0; }

/* word cards rest on the FRONT plate's lower corners (fixed position, no layout
   shift); their faces swap — describing + action — to match the front image,
   offset slightly in time from the plate trade so it reads as choreography. */
.hp-card {
  position:absolute; z-index:5; width:26%; aspect-ratio:561 / 761;
}
.hp-card-a { bottom:2%; left:-5%; }
.hp-card-b { bottom:8%; right:-6%; }
.hpc-face {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  border-radius:10px; border:3px solid var(--cream-50);
  box-shadow:0 20px 34px -12px rgba(20,27,61,.55);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay:.22s;
}
.hp-card-a .hpc-face { transform:rotate(-11deg); transform-origin:bottom center; }
.hp-card-b .hpc-face { transform:rotate(10deg); transform-origin:bottom center; }
.hpc-sid { opacity:0; }
.hp-card-a .hpc-sid { transform:rotate(-11deg) scale(.86); }
.hp-card-b .hpc-sid { transform:rotate(10deg) scale(.86); }
.hero-plate.show-sid .hpc-ria { opacity:0; }
.hero-plate.show-sid .hp-card-a .hpc-ria { transform:rotate(-11deg) scale(.86); }
.hero-plate.show-sid .hp-card-b .hpc-ria { transform:rotate(10deg) scale(.86); }
.hero-plate.show-sid .hpc-sid { opacity:1; }
.hero-plate.show-sid .hp-card-a .hpc-sid { transform:rotate(-11deg) scale(1); }
.hero-plate.show-sid .hp-card-b .hpc-sid { transform:rotate(10deg) scale(1); }

.hero-plate-badge {
  position:absolute; left:-3%; bottom:57%; z-index:6;
  display:grid; place-content:center; gap:.15em;
  width:96px; height:96px; border-radius:50%;
  background:var(--navy-800); color:var(--cream-100);
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  text-align:center; line-height:1.15;
  box-shadow:var(--sh-2), inset 0 0 0 4px rgba(237,165,60,.9);
  rotate:-8deg;
  font-family:var(--font-display);
}
.hero-plate-badge b { display:block; font-size:.66rem; color:var(--marigold); text-transform:uppercase; letter-spacing:.14em; font-weight:700; margin-bottom:.1em; }
@media (prefers-reduced-motion:reduce){ .hp-plate, .hero-plate-img, .hpc-face, .hero-plate-cap { transition:none; } }
@media (max-width:620px){ .hero-plate-badge{ width:80px; height:80px; font-size:.72rem; } }
/* tuck the corner cards inward on narrow screens so their definition text
   isn't clipped by the viewport edge (they still break the plate frame). */
@media (max-width:560px){ .hp-card{ width:31%; } .hp-card-a{ left:-1%; } .hp-card-b{ right:-1%; } }

.scroll-cue {
  position:absolute; left:50%; bottom:1.4rem; translate:-50% 0; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); font-weight:700;
}
.scroll-cue span { width:22px; height:34px; border:2px solid var(--ink-mute); border-radius:12px; position:relative; opacity:.7; }
.scroll-cue span::after { content:""; position:absolute; left:50%; top:6px; translate:-50% 0; width:3px; height:7px; border-radius:2px; background:var(--orange); animation:cuedrop 1.6s ease-in-out infinite; }
@keyframes cuedrop { 0%,100%{ translate:-50% 0; opacity:1; } 70%{ translate:-50% 10px; opacity:0; } }
@media (max-width:900px){ .scroll-cue{ display:none; } }

/* ==========================================================================
   SCENE 2 — Problem
   ========================================================================== */
.problem { padding-block:clamp(4.5rem,10vw,8rem); background:var(--confetti-cream) 0 0 / 300px repeat, var(--paper); }
.problem-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.quiet-word { color:var(--ink-mute); font-style:italic; }
.flat-words { margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.85rem .7rem; }
/* the flat words as tired, hand-cut paper scraps — muted, low-energy, each cut
   a little differently, deliberately limp beside the vivid vox card. */
.fw {
  --rot:0deg;
  font-family:var(--font-display); font-weight:600; font-size:1rem; line-height:1;
  color:#6b6350;
  background:linear-gradient(158deg,#e8e2d2 0%,#d6cfbd 100%);
  padding:.5em 1.05em .56em;
  box-shadow:0 7px 13px -7px rgba(20,27,61,.30), inset 0 1px 0 rgba(255,255,255,.45);
  transform:rotate(var(--rot));
  will-change:transform;
}
.fw span { display:block; }
/* each scrap cut with its own irregular edge + slight size difference */
.fw:nth-child(1){ border-radius:16px 8px 15px 7px / 9px 15px 8px 16px; }
.fw:nth-child(2){ border-radius:8px 15px 7px 16px / 15px 8px 16px 9px; font-size:.93rem; }
.fw:nth-child(3){ border-radius:14px 9px 16px 8px / 8px 16px 9px 14px; }
.fw:nth-child(4){ border-radius:9px 16px 8px 14px / 16px 9px 15px 8px; font-size:1.05rem; }
.fw:nth-child(5){ border-radius:15px 7px 14px 9px / 7px 15px 8px 15px; font-size:.96rem; }

/* entrance: hidden only while JS enhances (no-JS = visible, settled); the chips
   flop into place with a little overshoot, staggered like dropped scraps. */
.js .flat-words[data-animate] { opacity:1; }
.js .flat-words .fw { opacity:0; transform:translateY(-16px) rotate(calc(var(--rot) * .3)) scale(.9); }
.flat-words.in .fw {
  opacity:1; transform:rotate(var(--rot));
  transition:opacity .45s var(--ease), transform .6s cubic-bezier(.34,1.5,.5,1);
  transition-delay:calc(var(--i,0) * 85ms);
}
/* idle: a barely-there stir, like paper in still air; desynced per chip. Only
   after they've settled in view. */
.flat-words.in .fw span { animation:fw-stir var(--dur,11s) ease-in-out var(--dl,0s) infinite; }
@keyframes fw-stir { 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-1.4px) rotate(.7deg); } }

@media (prefers-reduced-motion:reduce){
  .js .flat-words .fw { opacity:1; transform:rotate(var(--rot)); }
  .flat-words.in .fw { transition:none; }
  .flat-words.in .fw span { animation:none; }
}
@media (max-width:560px){ .fw{ font-size:.93rem; } }
.problem-figure { position:relative; justify-self:center; width:100%; max-width:540px; }
.reader-card {
  position:relative; aspect-ratio:16/9;  /* matches the still AND the VOX clip → no crop, no layout shift */
  container-type:inline-size;             /* lets the label type scale with the card, not the viewport */
  border-radius:var(--r-lg); overflow:hidden; background:var(--cream-100);
  box-shadow:var(--sh-3); rotate:1.5deg; border:8px solid var(--cream-50);
}
.reader-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* VOX video slot — transparent until it plays a real frame (see main.js);
   the poster still below is the resting state until it renders. Full colour
   (no filter) so the lone orange card pops. */
.vox-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; background:transparent; opacity:0; transition:opacity .5s var(--ease); }
.vox-video.is-live { opacity:1; }

/* ---- Deterministic paper-printed label layer over the VOX chips ---- */
.vox-labels { position:absolute; inset:0; z-index:3; pointer-events:none; }
.vox-word {
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%) rotate(var(--r)) scale(.86);
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; line-height:1;
  mix-blend-mode:multiply;               /* paper grain shows through the ink */
  opacity:0;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.vox-word.show { transform:translate(-50%,-50%) rotate(var(--r)) scale(1); }
/* muted printed words on the grey chips — dull, uneven grey-brown ink */
.vox-word--flat {
  color:#5c5346;
  font-size:clamp(11px, 5.4cqi, 26px);
  text-shadow:0.4px 0.4px 0 rgba(70,60,48,.3);   /* crisp letterpress, minimal blur */
}
.vox-word--flat.show { opacity:.9; }
/* the one vivid word on the orange card — printed like a real deck word card:
   deep navy Fredoka ink, letterpress-soft, sized to fill the card face and
   centred symmetrically on it (measured against the card via cqi, not the
   viewport). multiply lets the orange paper grain read through the ink. */
.vox-word--vivid {
  /* deck ink is navy blue; multiply over the orange card would crush the blue
     channel to near-black, so this one word prints with a normal blend +
     letterpress emboss to match the real word-card look. */
  mix-blend-mode:normal;
  color:#1c2c5e; letter-spacing:-.015em;
  font-size:clamp(18px, 5.6cqi, 36px); font-weight:700;
  text-shadow:0 1.2px 0 rgba(255,247,235,.42), 0 -0.6px 0 rgba(16,22,50,.30);
}
.vox-word--vivid.show { opacity:1; }
@media (prefers-reduced-motion:reduce){
  .vox-word { transition:none; }
}
/* If a browser composites multiply over <video> inconsistently, this still
   reads as printed ink via the colour + shadow alone. */
@supports not (mix-blend-mode:multiply){ .vox-word{ mix-blend-mode:normal; } }
.speech-bubble {
  position:absolute; right:-4%; bottom:-8%; z-index:3;
  background:var(--cream-50); color:var(--navy-800);
  border-radius:20px 20px 6px 20px;
  padding:1rem 1.5rem; box-shadow:var(--sh-2);
  rotate:-3deg;
}
.speech-bubble p { font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,3vw,1.9rem); margin:0; }
/* “nice” → vivid-word swap: both stacked in one grid cell so the box reserves
   the wider word (no layout shift); they cross-fade + settle on Pip's landing. */
.bubble-swap { display:inline-grid; justify-items:start; }
.bubble-swap > span { grid-area:1 / 1; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.bw-flat { color:var(--ink-mute); }
.bw-vivid { color:var(--orange-deep); opacity:0; transform:translateY(5px) scale(.94); }
.speech-bubble.swapped .bw-flat { opacity:0; transform:translateY(-4px); }
.speech-bubble.swapped .bw-vivid { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .bubble-swap > span { transition:none; } }
@media (max-width:620px){ .speech-bubble{ right:2%; padding:.7rem 1.1rem; } }

/* ==========================================================================
   SCENE 3 — Evidence (dark navy story panel)
   ========================================================================== */
.evidence {
  background:
    var(--confetti-light) 0 0 / 300px repeat,
    radial-gradient(120% 60% at 15% 0%, rgba(44,147,168,.16), transparent 55%),
    radial-gradient(120% 70% at 90% 100%, rgba(237,165,60,.14), transparent 55%),
    linear-gradient(180deg,var(--navy-800) 0%,var(--navy-900) 100%);
  color:var(--cream-100);
  padding-block:clamp(4.5rem,10vw,8rem);
  position:relative;
}
.evidence::before, .evidence::after {
  content:""; position:absolute; left:0; right:0; height:40px; z-index:2; pointer-events:none;
  background-repeat:repeat-x; background-size:120px 40px;
}
.evidence::before {
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 0 L120 0 L120 16 Q105 30 90 16 T60 16 T30 16 T0 16 Z' fill='%23f5ecd6'/%3E%3C/svg%3E");
}
.evidence::after {
  bottom:-1px; transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Cpath d='M0 0 L120 0 L120 16 Q105 30 90 16 T60 16 T30 16 T0 16 Z' fill='%23f5ecd6'/%3E%3C/svg%3E");
}
/* asymmetric intro: big headline anchored left, supporting lead offset lower-right */
.evidence-intro {
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end; margin-bottom:clamp(3rem,7vw,5rem);
}
.evidence-intro .eyebrow { color:var(--marigold); }
.evidence-intro-head .section-title { font-size:clamp(2.1rem,4.6vw,3.4rem); margin-top:.6rem; }
.evidence-intro-lead { max-width:34ch; padding-bottom:.4rem; }
@media (max-width:820px){
  .evidence-intro { grid-template-columns:1fr; gap:1.1rem; align-items:start; }
  .evidence-intro-head .section-title br { display:none; }
}

.stat-row { padding-block:clamp(2rem,5vw,3.5rem); }
.stat-row--alt { background:rgba(255,255,255,.03); border-block:1px solid rgba(247,240,223,.08); }
.stat-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,5vw,3.5rem); align-items:center; }
.stat-grid--reverse .stat-copy { order:2; }
.stat-grid--reverse .card-fan { order:1; }
.stat-copy { min-width:0; }
.stat-number {
  font-family:var(--font-display); font-weight:700; line-height:.85;
  font-size:clamp(4.5rem,15vw,8.5rem); letter-spacing:-.03em;
  background:linear-gradient(150deg,var(--marigold) 5%,var(--orange) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-number--star { background:linear-gradient(150deg,#ffd97a 0%,var(--marigold) 100%); -webkit-background-clip:text; background-clip:text; }
.stat-label { font-family:var(--font-display); font-weight:600; font-size:clamp(1.15rem,3vw,1.6rem); color:var(--cream-100); margin-top:.2rem; }
.stat-copy .body--light { max-width:44ch; }

/* 80 — story cards own the whole blue canvas. Full uncropped 16:9 frames fly
   in from every edge, fade up as they travel, and settle into a generous
   composed spread across the upper canvas; the stat text reveals only once
   they've settled. --ap (0→1) is set by the scroll mapper in main.js; default
   1 (reduced-motion / no-JS = fully settled + text visible). overflow:hidden
   clips the flight to the section, so cards enter from the edges yet never
   spill onto neighbouring content. transform/opacity only. */
.stat-row--story { padding-block:clamp(2.5rem,5vw,4rem); }
.story-stage {
  position:relative; overflow:hidden;
  height:clamp(560px,82vh,780px);
  --ap:1;
}
.story-spread { position:absolute; inset:0; }
.sf-card {
  position:absolute; left:var(--rx); top:var(--ry); margin:0;
  width:clamp(210px,26vw,326px);
  will-change:transform, opacity;
  /* staggered arrival: each card settles a little after the previous one */
  --ci:clamp(0, calc((var(--ap) - var(--i) * 0.05) / 0.55), 1);
  transform:
    translate(-50%,-50%)
    translate(calc(var(--fx) * (1 - var(--ci))), calc(var(--fy) * (1 - var(--ci))))
    rotate(calc(var(--spin) * (1 - var(--ci)) + var(--rr) * var(--ci)))
    scale(calc(0.82 + 0.18 * var(--ci)));
  opacity:clamp(0, calc(var(--ci) * 1.9), 1);
}
.sf-card--desk { width:clamp(168px,19vw,236px); }
.sf-card img {
  display:block; width:100%; height:auto; aspect-ratio:16 / 9; /* native ratio → zero crop */
  border-radius:12px; border:5px solid var(--cream-50);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.55);
}
/* stat text — the payoff. Gated late on --ap so it only appears once the
   cards have settled; sits in the cleared lower band, never under a card. */
.stat-copy--story {
  position:absolute; left:50%; bottom:2%; translate:-50% 0;
  width:min(680px,92%); text-align:center; z-index:11;
  --tp:clamp(0, calc((var(--ap) - 0.9) / 0.1), 1);
  opacity:var(--tp);
  transform:translateY(calc((1 - var(--tp)) * 16px));
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.story-stat-head {
  display:flex; align-items:baseline; justify-content:center; gap:.5em 1rem;
  flex-wrap:wrap; max-width:none; margin-inline:auto;
}
.stat-copy--story .stat-number { font-size:clamp(3.4rem,8vw,5.6rem); line-height:.9; }
.stat-copy--story .stat-label { margin-top:0; text-align:left; }
.stat-copy--story .body--light { margin-inline:auto; margin-top:.9rem; max-width:52ch; }
@media (max-width:700px){
  .story-stage { height:clamp(460px,88vh,640px); }
  .sf-card { width:clamp(176px,50vw,236px); }
  .sf-card--desk { display:none; }
}
@media (prefers-reduced-motion:reduce){
  .sf-card{ will-change:auto; }
  .stat-copy--story{ transition:none; }
}

/* 188 — card fan (rebuilt: fixed sizing, no 0x0 collapse) */
.card-fan {
  position:relative; height:clamp(280px,42vw,440px);
  display:flex; align-items:center; justify-content:center;
}
/* soft warm halo so the cream card faces read clearly on the navy ground */
.card-fan::before {
  content:""; position:absolute; left:50%; top:52%; translate:-50% -50%;
  width:80%; height:80%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(237,165,60,.28), transparent 72%);
  filter:blur(12px); z-index:0;
}
.fan-card {
  position:absolute; top:50%; left:50%;
  width:clamp(120px,15vw,180px); height:auto; max-width:none;
  border-radius:12px; box-shadow:var(--sh-card);
  transform-origin:bottom center;
  --spread:11deg; --step:calc(var(--n) - 2.5);
  transform:translate(-50%,-50%) rotate(calc(var(--step) * var(--spread))) translateY(calc(var(--step) * var(--step) * 5px));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.js [data-animate="fan"] .fan-card { opacity:0; transform:translate(-50%,20%) rotate(0) translateY(40px) scale(.9); }
[data-animate="fan"].in .fan-card {
  opacity:1;
  transform:translate(-50%,-50%) rotate(calc(var(--step) * var(--spread))) translateY(calc(var(--step) * var(--step) * 5px));
  transition:opacity .5s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--n) * 90ms);
}
.card-fan:hover .fan-card { transform:translate(-50%,-50%) rotate(calc(var(--step) * var(--spread) * 1.35)) translateX(calc(var(--step) * 14px)) translateY(calc(var(--step) * var(--step) * 4px)); }
@media (hover:none){ .card-fan:hover .fan-card{ transform:translate(-50%,-50%) rotate(calc(var(--step) * var(--spread))) translateY(calc(var(--step) * var(--step) * 5px)); } }

/* 46 — star showcase */
.star-showcase { position:relative; justify-self:center; display:grid; place-items:center; padding:1rem; }
.star-card {
  position:relative; z-index:2;
  width:clamp(200px,26vw,290px); height:auto;
  border-radius:14px; rotate:-4deg;
  box-shadow:0 0 0 5px rgba(237,165,60,.35), var(--sh-card);
}
.star-glow {
  position:absolute; inset:-8%; z-index:1; border-radius:50%;
  background:radial-gradient(circle,rgba(237,165,60,.4),transparent 65%);
  filter:blur(14px);
  animation:pulse 4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .star-glow{ animation:none; } }
.chip-list { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.55rem; }
.chip-list li {
  font-size:.9rem; font-weight:700; color:var(--cream-100);
  background:rgba(237,165,60,.14); border:1px solid rgba(237,165,60,.4);
  border-radius:999px; padding:.4em .95em;
}
.chip-list li::before { content:"✦ "; color:var(--marigold); }
.chip-more { background:transparent !important; border-style:dashed !important; opacity:.85; }
.chip-more::before { content:"" !important; }

/* meet-the-trio — the character loop wired into the stats grid. Mirrors the
   Scene 5 .cred-media / .cred-video pattern (16:9 box, poster still with the
   muted loop layered over it), framed to read as one of the section's cards on
   the navy ground. Copy sits in the other .stat-grid column. */
.meet-portrait { position:relative; justify-self:center; width:100%; max-width:520px; margin:0; }
/* eyebrow reads on the navy ground the same way the intro eyebrow does */
.stat-copy .eyebrow { color:var(--marigold); }
.meet-media {
  position:relative; aspect-ratio:16 / 9;
  border-radius:12px; overflow:hidden;
  background:var(--cream-100);
  border:5px solid var(--cream-50);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.55);
}
.meet-media picture { display:block; width:100%; height:100%; }
.meet-media .meet-poster { width:100%; height:100%; object-fit:cover; }
/* the loop rides above the poster and only becomes visible once it's actually
   playing (.is-live), matching the .cred-video / .vox-video pattern */
.meet-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:2; background:transparent; opacity:0;
  transition:opacity .5s var(--ease);
}
.meet-video.is-live { opacity:1; }
@media (prefers-reduced-motion:reduce){ .meet-video { transition:none; } }
.meet-portrait figcaption {
  text-align:center; padding:.9rem 1rem 0; color:rgba(245,236,214,.82);
  font-weight:600; font-size:.92rem; max-width:38ch; margin-inline:auto;
}

/* totals — left-anchored composed band (not a centered pill) */
.totals-block { margin-top:clamp(2.5rem,6vw,4rem); }
.totals-box {
  display:flex; align-items:center; gap:clamp(1rem,3vw,1.8rem);
  background:linear-gradient(120deg, rgba(237,165,60,.10), rgba(255,255,255,.04));
  border:1px solid rgba(247,240,223,.18);
  border-radius:var(--r-lg); padding:clamp(1.3rem,3vw,1.8rem) clamp(1.4rem,4vw,2.6rem);
}
.totals-box img { width:clamp(64px,10vw,104px); height:auto; flex:none; }
.totals-line { font-family:var(--font-display); font-size:clamp(1.15rem,2.6vw,1.65rem); color:var(--cream-200); font-weight:600; text-align:left; margin:0; max-width:none; line-height:1.3; }
.totals-line b { color:var(--marigold); }
.totals-line span { opacity:.5; margin-inline:.15em; }
.totals-line .totals-eq { color:var(--orange); opacity:1; font-weight:700; }
.totals-line strong { color:var(--cream-50); }
.totals-note { margin:.6rem 0 0; color:rgba(245,236,214,.72); font-weight:600; max-width:52ch; font-size:.98rem; }
@media (max-width:560px){ .totals-box{ flex-direction:column; text-align:center; } .totals-line{ text-align:center; } }

/* ==========================================================================
   SCENE 4 — How it plays
   ========================================================================== */
.play { padding-block:clamp(4.5rem,10vw,8rem); background:var(--confetti-cream) 0 0 / 300px repeat, var(--cream-100); }
.play-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.play-steps { margin-top:1.8rem; display:grid; gap:1rem; }
.play-steps li {
  display:flex; align-items:flex-start; gap:.9rem;
  font-size:1.08rem; color:var(--ink); font-weight:600;
}
.step-num {
  flex:none; width:2rem; height:2rem; border-radius:50%;
  background:var(--navy-800); color:var(--cream-100);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1rem;
}

.play-film { justify-self:center; width:100%; max-width:440px; }
.film-stage {
  position:relative; width:min(380px,88vw); margin-inline:auto;
  aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,var(--cream-300),var(--cream-100));
  box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.6);
  perspective:1200px; /* for the situation card's flip-in */
}
/* dormant B-slot video — transparent unless a real approved clip ever plays
   (z-2, above the loop). Kept wired to its filename contract in main.js. */
.film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; background:transparent; opacity:0; transition:opacity .5s var(--ease); }
.film-video.is-live { opacity:1; }
/* self-playing gameplay loop (animated WebP): the live, poster-safe visual.
   Autonomous — no scroll dependency, no JS. Fills the stage. */
.play-loop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.film-cap { margin-top:1.1rem; text-align:center; font-size:.9rem; color:var(--ink-soft); font-weight:600; }

/* ==========================================================================
   SCENE 5 — Credibility
   ========================================================================== */
.cred {
  padding-block:clamp(4.5rem,10vw,8rem);
  background:
    var(--confetti-cream) 0 0 / 300px repeat,
    radial-gradient(90% 70% at 100% 0%, rgba(237,165,60,.16), transparent 55%),
    linear-gradient(180deg,var(--cream-100),var(--cream-200));
}
.cred-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cred-portrait {
  position:relative; justify-self:center; width:100%; max-width:440px;
  background:
    radial-gradient(circle at 50% 38%, rgba(237,165,60,.26), rgba(237,165,60,0) 60%),
    linear-gradient(180deg,var(--cream-50),var(--cream-200));
  border-radius:var(--r-lg); padding:1rem 1rem .4rem; box-shadow:var(--sh-2);
  border:1px solid rgba(255,255,255,.6);
}
.cred-portrait img { width:100%; height:auto; }
/* meet-the-trio media: 16:9 frame holding the poster still with the muted loop
   layered over it. aspect-ratio reserves the box so the poster and the video
   share identical dimensions — no reflow between the fallback and the clip. */
.cred-media {
  position:relative; aspect-ratio:16 / 9;
  border-radius:var(--r-md); overflow:hidden;
  background:var(--cream-100);
  box-shadow:inset 0 0 0 1px rgba(30,43,92,.06);
}
.cred-media picture { display:block; width:100%; height:100%; }
.cred-portrait .cred-media .cred-poster { width:100%; height:100%; object-fit:cover; }
/* the loop rides above the poster and only becomes visible once it's actually
   playing (.is-live), matching the .vox-video / .film-video pattern */
.cred-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:2; background:transparent; opacity:0;
  transition:opacity .5s var(--ease);
}
.cred-video.is-live { opacity:1; }
@media (prefers-reduced-motion:reduce){ .cred-video { transition:none; } }
.cred-portrait figcaption {
  text-align:center; padding:.4rem 1rem 1rem; color:var(--ink-soft);
  font-weight:600; font-size:.92rem; max-width:34ch; margin-inline:auto;
}
.cred-portrait-kicker {
  display:block; font-family:var(--font-body); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--marigold-deep); margin-bottom:.3rem;
}
.cred-copy { min-width:0; }
.cred-quote {
  margin-top:1.6rem; padding:1.2rem 1.5rem;
  background:var(--cream-50); border-left:5px solid var(--orange); border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:var(--sh-1);
}
.cred-quote p { font-family:var(--font-display); font-weight:600; font-size:clamp(1.2rem,2.6vw,1.55rem); color:var(--navy-800); margin:0; }
.trust-badges { margin-top:1.8rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.trust-badges li {
  display:flex; align-items:flex-start; gap:.85rem;
  background:var(--cream-50); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1rem 1.15rem; box-shadow:var(--sh-1);
}
.badge-ic {
  flex:none; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(44,147,168,.12); color:var(--teal-deep);
}
.badge-ic--gold { background:rgba(237,165,60,.16); color:var(--marigold-deep); }
.badge-ic svg { width:23px; height:23px; }
.badge-tx { display:block; }
.trust-badges b { display:block; font-family:var(--font-display); color:var(--teal-deep); font-size:1.02rem; }
.badge-ic--gold ~ .badge-tx b { color:var(--marigold-deep); }
.trust-badges .badge-tx > span { display:block; margin-top:.2rem; font-size:.86rem; color:var(--ink-soft); font-weight:600; }
@media (max-width:560px){ .trust-badges{ grid-template-columns:1fr; } }

/* ==========================================================================
   SCENE 6 — CTA / Waitlist
   ========================================================================== */
.cta {
  position:relative; isolation:isolate;
  padding-block:clamp(4rem,8vw,6rem) clamp(3rem,6vw,4.5rem);
  background:linear-gradient(180deg,var(--navy-800),var(--navy-900));
  color:var(--cream-100);
}
.cta::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("assets/cta.webp") center 32% / cover no-repeat;
  opacity:.62;
}
@media (max-width:800px){ .cta::before{ background-image:url("assets/cta-800.webp"); } }
.cta-overlay {
  position:absolute; inset:0; z-index:-1;
  background:
    var(--confetti-light) 0 0 / 300px repeat,
    radial-gradient(90% 70% at 22% 42%, rgba(20,27,61,.35), transparent 60%),
    linear-gradient(180deg,rgba(20,27,61,.66) 0%,rgba(20,27,61,.82) 55%,var(--navy-900) 100%);
}
.cta-inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.cta-head { max-width:44ch; }
.cta-head .lede--light { margin-top:1.1rem; }

.waitlist-card {
  background:var(--cream-50); color:var(--navy-900);
  border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.4rem);
  box-shadow:var(--sh-3); border:1px solid rgba(255,255,255,.6);
}
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field { margin-bottom:1.15rem; }
.field label, .fieldset legend {
  display:block; font-weight:700; font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:.45rem; color:var(--navy-700);
}
/* longer, conversational legend — sentence case, not shouty caps */
.fieldset legend.legend--soft {
  text-transform:none; letter-spacing:0; font-size:.98rem; line-height:1.35;
  font-family:var(--font-display); font-weight:600; color:var(--navy-800); max-width:42ch;
}
.req { color:var(--orange); }
.field input {
  width:100%; padding:.8rem 1rem; border-radius:var(--r-sm);
  border:1.5px solid rgba(30,43,92,.2); background:#fff; font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder { color:rgba(30,43,92,.35); }
.field input:hover { border-color:rgba(30,43,92,.4); }
.field input:focus-visible { border-color:var(--orange); box-shadow:0 0 0 3px rgba(232,103,46,.16); outline:none; }
.field-error { display:none; margin-top:.4rem; color:var(--orange-deep); font-size:.84rem; font-weight:700; }
.field.has-error input { border-color:var(--orange-deep); }
.field.has-error .field-error { display:block; }

.fieldset { border:none; padding:0; margin:0 0 1.15rem; }
.pill-group { display:flex; flex-wrap:wrap; gap:.55rem; }
.radio-list { display:grid; gap:.5rem; }
.pill-option input, .radio-option input { position:absolute; opacity:0; width:1px; height:1px; }
.pill-option { position:relative; }
.pill-option span {
  display:inline-flex; padding:.55em 1.05em; border-radius:999px;
  border:1.5px solid rgba(30,43,92,.24); font-weight:700; font-size:.9rem;
  transition:background .2s, border-color .2s, color .2s;
}
.pill-option input:checked + span { background:var(--navy-800); border-color:var(--navy-800); color:var(--cream-100); }
.pill-option input:focus-visible + span { outline:3px solid var(--orange); outline-offset:2px; }

.radio-option {
  display:flex; align-items:center; gap:.7em; padding:.65em 1em;
  border-radius:var(--r-sm); border:1.5px solid rgba(30,43,92,.18); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.radio-option .dot { width:18px; height:18px; border-radius:50%; border:2px solid rgba(30,43,92,.35); flex:none; position:relative; }
.radio-option input:checked ~ .dot { border-color:var(--orange); }
.radio-option input:checked ~ .dot::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--orange); }
.radio-option input:focus-visible ~ .dot { outline:3px solid var(--orange); outline-offset:2px; }
.radio-option:has(input:checked) { border-color:var(--orange); background:rgba(232,103,46,.06); }
.label-text { font-size:.96rem; font-weight:700; }

.form-footer { margin-top:1.5rem; display:grid; gap:.85rem; }
.form-privacy { font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.disabled-note {
  display:inline-flex; align-items:center; gap:.5em; justify-self:start;
  background:rgba(237,165,60,.16); border:1px solid rgba(237,165,60,.5); color:var(--marigold-deep);
  padding:.5em 1em; border-radius:999px; font-size:.85rem; font-weight:700;
}
.disabled-note::before { content:"⏳"; }
.form-status:empty { display:none; }
.form-status { font-size:.9rem; font-weight:700; color:var(--orange-deep); }

.success-panel { text-align:center; padding:1.5rem 0; animation:successIn var(--dur) var(--ease) both; }
.success-panel img { width:150px; height:150px; margin:0 auto .75rem; filter:drop-shadow(0 10px 20px rgba(20,43,92,.25)); animation:pop .7s var(--ease) both; animation-delay:.1s; }
.success-panel h3 { font-size:1.6rem; margin-bottom:.5rem; color:var(--navy-800); }
.success-panel p { margin-inline:auto; color:var(--ink-soft); max-width:36ch; font-weight:600; }
@keyframes successIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
@keyframes pop { 0%{ opacity:0; transform:scale(.6) rotate(-8deg);} 60%{ opacity:1; transform:scale(1.06) rotate(2deg);} 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .success-panel, .success-panel img{ animation:none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background:var(--confetti-light) 0 0 / 300px repeat, var(--navy-900); color:rgba(245,236,214,.75); padding-block:clamp(2.5rem,6vw,4rem); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:start; padding-bottom:2rem; border-bottom:1px solid rgba(247,240,223,.12); }
.footer-brandmark { display:inline-block; margin-bottom:1rem; }
.footer-brandmark img { width:clamp(140px,18vw,185px); height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.footer-tag b { color:var(--cream-100); }
.footer-tag { font-size:.95rem; max-width:44ch; font-weight:600; }
.footer-links { display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
@media (min-width:700px){ .footer-links{ align-items:flex-end; } }
.footer-links a { font-weight:700; color:var(--marigold); font-size:.95rem; transition:color .2s; }
.footer-links a:hover { color:var(--cream-100); }
.footer-legal { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.55rem 1.5rem; margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid rgba(247,240,223,.1); font-size:.82rem; color:rgba(245,236,214,.5); }
.footer-contact { color:rgba(245,236,214,.72); font-weight:700; white-space:nowrap; transition:color .2s var(--ease); }
.footer-contact:hover { color:var(--marigold); }
.footer-copyright { margin:0; max-width:none; }
.footer-legal-links { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.footer-legal-links a { color:rgba(245,236,214,.72); font-weight:700; transition:color .2s var(--ease); }
.footer-legal-links a:hover { color:var(--marigold); }
.footer-legal-links span { opacity:.4; }
.footer-fine-row { padding-top:1rem; }
.footer-fine { font-size:.78rem; color:rgba(245,236,214,.42); max-width:none; }

/* ---- Collapsible Privacy & Terms notices (no-JS safe <details>) ---- */
.footer-legal-notices { display:grid; gap:.7rem; padding-top:1.75rem; }
.legal-details {
  border:1px solid rgba(247,240,223,.14);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
}
.legal-details > summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.6em;
  padding:.85rem 1.15rem;
  font-family:var(--font-display); font-weight:600; font-size:.98rem;
  color:var(--cream-100);
  border-radius:var(--r-md);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.legal-details > summary::-webkit-details-marker { display:none; }
.legal-details > summary::after {
  content:""; margin-left:auto; flex:none;
  width:.5em; height:.5em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); opacity:.55;
  transition:transform .25s var(--ease);
}
.legal-details[open] > summary::after { transform:rotate(-135deg); }
.legal-details > summary:hover { background:rgba(255,255,255,.035); color:#fff; }
.legal-details > summary:focus-visible { outline:3px solid var(--marigold); outline-offset:-3px; }
.legal-prose {
  padding:.35rem 1.2rem 1.2rem;
  font-size:.82rem; line-height:1.65; color:rgba(245,236,214,.6);
  max-width:82ch;
}
.legal-prose p { margin-top:.7rem; max-width:none; }
.legal-prose p:first-child { margin-top:0; }
.legal-prose strong, .legal-prose b { color:rgba(245,236,214,.86); font-weight:700; }
.legal-prose .legal-updated { color:var(--marigold); font-weight:700; font-family:var(--font-display); letter-spacing:.01em; }
.legal-prose a { color:var(--marigold); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.legal-prose a:hover { color:var(--cream-50); }

/* consent microcopy link (on the light waitlist card) */
.form-privacy a { color:var(--orange-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.form-privacy a:hover { color:var(--orange); }

@media (prefers-reduced-motion:reduce){
  .legal-details > summary::after { transition:none; }
}

/* ==========================================================================
   Responsive — stack, protect against collision at every width
   ========================================================================== */
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:2rem; text-align:left; }
  /* name-first on mobile: product name must be on the opening screen */
  .hero-plate { order:2; max-width:460px; margin-top:.5rem; }
  .hero { padding-top:clamp(5rem,10vh,7rem); }
  .problem-grid, .play-grid, .cred-grid, .cta-inner { grid-template-columns:1fr; }
  .stat-grid, .stat-grid--reverse { grid-template-columns:1fr; }
  .stat-grid--reverse .stat-copy { order:0; }
  .stat-grid--reverse .card-fan { order:0; }
  .cred-portrait { order:-1; max-width:400px; }
  .cta-head { max-width:none; text-align:center; margin-inline:auto; }
  .cta-head .eyebrow { justify-content:center; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { align-items:flex-start; }
}
@media (max-width:560px) {
  .hero-title { font-size:clamp(3rem,16vw,4.5rem); }
  .hero-facts { gap:1rem 1.5rem; }
  .card-fan { height:340px; }
  .fan-card { width:130px; }
  .flat-words li { font-size:.85rem; }
}