/* ============================================================
   home.css — the cinematic, scroll-driven homepage.
   Loaded AFTER site.css; it adds the light system and overrides
   the few shared bits (nav, body bg) that need to morph with the
   --light custom property. Everything here is scoped to the home
   page; subpages never load this file.

   THE LIGHT SYSTEM
   --light runs 0 (full dark) -> 1 (full warm light). home.js drives
   it from scroll position. We default it to 1 so that with no JS, or
   with prefers-reduced-motion, the whole page renders fully lit and
   readable, in order, with zero animation.
   --fg is STEPPED (cream below 0.5, ink above) rather than blended,
   so display text never lands on a mid-tone background mid-blend.
   All transition-state text is large display type (AA large = 3:1),
   and both cream and ink clear 3:1 against the mid-tone crossover.
   ============================================================ */

:root{
  --light:1;                       /* 0 = dark, 1 = warm light */
  --dark-base:#0d1c15;             /* deep dark green — "lights out" */
  --green-night:#143026;           /* the dark-green section tone (legacy) */
  --sec-sage:#e6ecde;              /* the section tint — softer/lighter sage so it reads calm, not heavy, and dark text stays high-contrast */
  --amber:#eaa15c;                 /* the hero lamp glow only */
  --amber-soft:#f4c79a;
  --clay-ink:#a8542b;              /* deep terracotta for text on paper (clears AA) */
  --accent:#e7d7a8;                /* soft champagne-gold — the single galaxy accent (NOT orange) */
  --accent-soft:#f3ecd6;
  --ivory:#f6f2e8;                 /* warm white for galaxy text */
  --fg:var(--ink);                 /* stepped foreground (set by JS) */
}

/* the page background is now the morphing galaxy, not a flat cream */
body{background:transparent;cursor:none}

/* ---- THE STAGE: warm light backdrop for the HERO and the lit sections
   below the journey. --light stays 1 there, so this is the warm cream the
   child sits on and the page returns to. It also fills the iOS safe-area. */
html,#stage{background:var(--cream)}
#stage{position:fixed;inset:0;z-index:-6}
@supports (background:color-mix(in oklab,#000,#fff 50%)){
  html,#stage{
    background:
      radial-gradient(120% 90% at 50% 18%,
        color-mix(in oklab, transparent, var(--amber) calc(var(--light)*16%)),
        transparent 60%),
      color-mix(in oklab, var(--dark-base), var(--cream) calc(var(--light)*100%));
  }
}

/* ---- THE GALAXY: a deep-space colour field that changes with every beat.
   home.js sets --bg (the base sky), --neb (a soft nebula tint) and --sunglow
   (a faint warm bloom that only appears at the "lights on" beat). It stays a
   quiet BACKGROUND — low-contrast nebula — so the words dominate. Fades in as
   the journey begins and out before the lit sections. */
#galaxy{position:fixed;inset:0;z-index:-5;pointer-events:none;opacity:var(--gal,0);
  background:
    radial-gradient(58% 50% at var(--sunx,80%) var(--suny,12%), var(--sunglow,transparent), transparent 60%),
    radial-gradient(120% 85% at 24% 88%, var(--neb,transparent), transparent 64%),
    linear-gradient(165deg, color-mix(in oklab, var(--bg,#07091a), #fff 6%), var(--bg,#07091a));
  transition:opacity .25s linear}

/* sun is now folded into the galaxy as a faint glow; no separate element */
#sun{display:none}

/* ---- THE GLOW: a soft lamp behind the hero child only. It fades out while
   the galaxy is on screen (var(--gal,0) = journey presence), so it never
   bleeds a warm orb into the dark deep-space beats. ---- */
#glow{
  position:fixed;left:50%;top:44%;width:84vmax;height:84vmax;z-index:-4;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc((0.10 + var(--light) * 1.0) * var(--pulse,1)));
  opacity:calc((0.16 + var(--light) * 0.64) * var(--pulse,1) * (1 - var(--gal,0)));
  background:radial-gradient(circle at center,
    rgba(255,201,140,.62), rgba(255,175,96,.20) 34%, transparent 64%);
  filter:blur(6px);
  will-change:transform,opacity;
}

#dust{display:none}

/* ---- STARS: parallax twinkling field, brightest in deep space.
   Three drift layers (translated by home.js for a sense of moving through a
   galaxy). Fade with the galaxy so the lit sections stay clean; also dim as
   the sky brightens (--starf set by JS) so they don't show on light beats. */
#stars{position:fixed;inset:-10% 0;z-index:-3;pointer-events:none;opacity:var(--starf,1);overflow:clip}
#stars .layer{position:absolute;inset:0;will-change:transform}
#stars i{position:absolute;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,247,232,.7);
  animation:twinkle var(--tw,5s) ease-in-out var(--td,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.95;transform:scale(1.18)}}

/* ---- SIDE FILAMENT: a thin line that lights up as you descend ---- */
#filament{position:fixed;right:max(22px,env(safe-area-inset-right));top:20vh;bottom:20vh;
  width:2px;z-index:60;border-radius:2px;background:rgba(132,144,138,.28);pointer-events:none}
#filament .fill{position:absolute;left:0;top:0;width:100%;height:var(--scroll,0%);border-radius:2px;
  background:linear-gradient(var(--amber-soft),var(--amber));box-shadow:0 0 10px rgba(234,161,92,.85)}
#filament .bead{position:absolute;left:50%;top:var(--scroll,0%);width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--amber-soft);box-shadow:0 0 12px 2px rgba(234,161,92,.9)}
@media(max-width:760px){#filament{top:auto;bottom:14px;left:14px;right:14px;height:2px;width:auto}
  #filament .fill{height:100%;width:var(--scroll,0%)}
  #filament .bead{top:50%;left:var(--scroll,0%)}}

/* hide the shared top progress bar; the filament replaces it */
.progress{display:none}

/* ============================================================
   NAV — inverts with the light state instead of going opaque cream
   ============================================================ */
/* No bar at all. The nav is just the logo and the two menu lines floating
   over the page — no background, no shadow, no blur, no notch cover anywhere
   on the landing page. Only the logo and hamburger remain, and they invert
   colour with the light state (dark on the light hero, cream in the dark
   narrative — see the html.dark rules below). */
nav,nav.scrolled{
  background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
nav::before{display:none}
html.dark .navlinks a{color:rgba(243,239,228,.82)}
html.dark .navlinks a:hover{color:#fff}
html.dark .navlinks a::after{background:var(--amber)}
html.dark .nav-login{color:rgba(243,239,228,.9);border-color:rgba(243,239,228,.32)}
html.dark .nav-login:hover{color:#fff;border-color:#fff}
html.dark .nav-cta{background:var(--cream);color:var(--ink)}
html.dark .nav-cta:hover{background:var(--amber);color:var(--ink)}
html.dark .nav-toggle span{background:var(--cream)}
html.dark .brand img{filter:brightness(0) invert(1)}
.brand img{transition:filter .4s ease,height .35s ease}
/* over the dark-green sections the floating nav inverts too (home.js toggles
   .nav-on-dark when a green panel is under the nav) */
html.nav-on-dark .navlinks a{color:rgba(243,239,228,.82)}
html.nav-on-dark .navlinks a:hover{color:#fff}
html.nav-on-dark .navlinks a::after{background:var(--amber)}
html.nav-on-dark .nav-login{color:rgba(243,239,228,.9);border-color:rgba(243,239,228,.32)}
html.nav-on-dark .nav-login:hover{color:#fff;border-color:#fff}
html.nav-on-dark .nav-cta{background:var(--cream);color:var(--ink)}
html.nav-on-dark .nav-toggle span{background:var(--cream)}
html.nav-on-dark .brand img{filter:brightness(0) invert(1)}

/* ============================================================
   FULL-VIEWPORT BEATS (hero, dim, dark, turn, closer)
   ============================================================ */
.beat{min-height:90svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding-block:clamp(110px,16vh,160px) clamp(80px,12vh,120px);
  padding-inline:clamp(20px,6vw,64px);position:relative;
  max-width:1500px;margin:0 auto;color:var(--fg)}
@media(max-width:700px){.beat{padding-block:120px 90px}}
.beat .kicker{color:var(--amber)}
.beat .kicker::before{background:var(--amber)}
html.dark .kicker{color:var(--amber-soft)}
html.dark .kicker::before{background:var(--amber-soft)}

/* ============================================================
   HERO STAGE — a real child, scroll-scrubbed from mouth-closed to
   mouth-open while the sentence flies out of the mouth. The whole
   thing is a tall scroll track with a pinned (sticky) stage; home.js
   reads scroll progress and drives the crossfade + word emission.
   Resting / reduced-motion / no-JS state is the finished frame:
   mouth open, sentence settled, every catch marked.
   ============================================================ */
/* one screen — the sentence autoplays on a timer, so there is no tall scroll
   track. As you scroll past, JS holds the stage where it sits and fades it out
   (so the face dissolves IN PLACE and never rides up into the status-bar strip)
   while the page scrolls normally underneath it — see fade() in home.js. */
.hero-scroll{position:relative;height:100vh;height:100svh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(74px,9vh,108px) 7vw clamp(34px,5vh,64px)}
.stage-wrap{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,1vh,14px);width:100%;max-width:900px;transform:translateY(-3vh)}

/* the two registered frames, stacked and crossfaded by --open. Cut-out
   portraits on transparent ground; the neck dissolves into the page
   (faded into the PNG alpha itself, identically on both frames). */
.child{position:relative;height:clamp(340px,56vh,620px);aspect-ratio:1000/1200;z-index:1}
.child .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.child .ph-open{opacity:var(--open,0)}
@media(max-width:880px){.child{height:clamp(300px,48vh,520px)}}

/* the paragraph he is trying to say — pours out of the mouth and settles
   into a clean block on the landing page */
.emit{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:center;text-align:center;gap:.14em .32em;
  max-width:34ch;margin-top:clamp(2px,0.6vh,12px);
  font-size:clamp(1.15rem,1.9vw,1.72rem);line-height:2.05;font-weight:400;letter-spacing:-.012em;color:var(--ink)}
.emit .w{display:inline-block;will-change:transform,opacity}
/* a detected word stays inline on the baseline (the sentence reads normally);
   the AI annotations are layered around it without disrupting the line. */
.emit .det{position:relative}
/* tight line-height so the word's box hugs its letters — the underline/chip
   below then sit right under the text, not floating in the line's leading */
.emit .word{position:relative;display:inline-block;white-space:nowrap;line-height:1}
/* the stutter shown as a faint ECHO of the real letters — your eye reads the
   word, but sees the repetition/prolongation ghosted in front of it */
.emit .echo{color:var(--sage-deep);opacity:.6;font-weight:700;letter-spacing:-.01em}
.emit .pro .echo{letter-spacing:.04em}               /* a held sound stretches a touch */
/* a block = a detected silent pause, drawn as three settling dots */
.emit .pause{display:inline-flex;align-items:center;gap:.16em;vertical-align:middle;padding:0 .12em}
.emit .pause i{width:.16em;height:.16em;border-radius:50%;background:var(--sage-deep);opacity:.55;
  animation:blkdot 1.4s ease-in-out infinite}
.emit .pause i:nth-child(2){animation-delay:.18s} .emit .pause i:nth-child(3){animation-delay:.36s}
@keyframes blkdot{0%,100%{opacity:.28;transform:translateY(0)}50%{opacity:.85;transform:translateY(-.14em)}}
/* underline removed — kept in the DOM (JS animates it) but not shown */
.emit .catch{display:none}
/* the label-chip naming what Qull caught — a solid sage pill tucked right
   under the word; a pulsing dot signals a live detection. Filled (not just
   outlined) so the catch reads clearly. */
.emit .tag{position:absolute;left:50%;top:calc(100% + .14em);transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
  font-size:.32em;letter-spacing:.09em;text-transform:uppercase;font-weight:700;line-height:1;
  color:#fff;background:var(--sage-deep);border-radius:999px;
  padding:.46em .7em;box-shadow:0 8px 20px -10px rgba(28,43,39,.55)}
.emit .tag::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:tagpulse 1.5s ease-out infinite}
@keyframes tagpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 .55em rgba(255,255,255,0)}}

/* reduced motion / no JS: collapse the scroll track, show the finished frame */
@media (prefers-reduced-motion:reduce){
  .hero-scroll{height:auto}
  .hero-pin{position:static;height:auto;min-height:100svh}
  .child{--open:1}
}

/* ---- POSITIONING beat (the clarity-first statement, still lit) ---- */
.positioning h1{font-family:'Figtree',sans-serif;font-weight:400;letter-spacing:-.022em;line-height:1.04;
  font-size:clamp(2.4rem,5.6vw,5rem);max-width:18ch}
.positioning h1 b{font-weight:700}
.positioning .hero-sub{margin-top:30px;max-width:50ch;font-size:clamp(1.05rem,1.5vw,1.28rem);
  color:var(--ink-soft);line-height:1.6}
.positioning .hero-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.positioning .first-line{margin-top:30px;font-size:.95rem;letter-spacing:.01em;color:var(--muted)}

/* ============================================================
   THE GALAXY JOURNEY — every narrative screen shares ONE type style so
   the read feels calm and natural; only the background colour and the
   sun change as you travel. Text is cream throughout (deep space), and
   each line gently rises + fades as it enters (the .r reveal).
   ============================================================ */
/* CENTERING MODEL — bulletproof and font-independent. The beat already
   centers its child (align-items:center). Each .r is a full-width centered
   grid track; the max-width lives on the HEADLINE itself in `ch` (consistent
   font context), so it can never drift the way the old `.r{width:…ch}` did. */
.galaxy{justify-content:center;align-items:center;text-align:center;color:var(--gtext,var(--ivory))}
.galaxy .r{inline-size:100%;display:grid;justify-items:center;row-gap:0}
.galaxy .gline{font-family:'Figtree',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:0.98;
  font-size:clamp(2.4rem,7vw,4.4rem);max-inline-size:15ch;margin-inline:auto;text-align:center;text-wrap:balance;
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.galaxy .gline{text-shadow:0 2px 34px rgba(0,0,0,.4)}
html:not(.dark) .galaxy .gline{text-shadow:none}
.galaxy .gline.huge{font-size:clamp(5rem,26vw,12rem);max-inline-size:none;letter-spacing:-.05em;line-height:.95}
/* the 167 grid beat: a slightly smaller heading so heading + grid + key all
   fit one screen; still perfectly centred by the grid model above */
.galaxy .gline.sm{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.1;max-inline-size:15ch}

/* gentle whole-line reveal: rises + fades in once, no per-word jitter */
.galaxy .r .gline{opacity:0;transform:translateY(.55em)}
.galaxy .r.shown .gline{opacity:1;transform:none}

/* the cycling word crossfades in place over a hidden copy of the WIDEST word,
   which reserves the line width — so swapping a short word for a long one never
   makes the line jiggle. The live word is centred over that reserved box. The
   word + trailing period are one nowrap unit so the period never drops a line. */
.galaxy .cyc{position:relative;display:inline-block;white-space:nowrap;vertical-align:baseline}
.galaxy .cyc .vh{display:inline-block;visibility:hidden;white-space:nowrap;height:auto;overflow:visible}
.galaxy .cyc .cycler{position:absolute;left:0;right:0;top:0;text-align:center;color:inherit;font-weight:800}
.galaxy .cyc.dot .cycler::after{content:"."}
.galaxy .nw{white-space:nowrap}
.galaxy .cycler.swap{animation:cyword .42s cubic-bezier(.16,1,.3,1)}
@keyframes cyword{0%{opacity:0;transform:translateY(.26em);filter:blur(4px)}
  100%{opacity:1;transform:none;filter:blur(0)}}
.galaxy .vh{display:inline-block;height:0;overflow:hidden;visibility:hidden;white-space:nowrap}

/* EMPHASIS — no underlines. The key word brightens to white and a soft halo
   blooms then settles, a beat after the line arrives. Elegant, decoration-free. */
.galaxy .hl{font-weight:800;white-space:nowrap;color:inherit}
.galaxy .r.shown .hl{animation:hlbloom 1.5s .55s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hlbloom{
  0%{color:inherit;text-shadow:0 0 0 rgba(255,255,255,0)}
  40%{color:#fff;text-shadow:0 0 22px rgba(255,255,255,.85),0 0 6px rgba(255,255,255,.6)}
  100%{color:#fff;text-shadow:0 0 10px rgba(247,242,232,.45)}}
/* on the bright (light-text) beats, a halo reads poorly — clean weight+ink only */
html:not(.dark) .galaxy .hl{color:var(--ink)}
html:not(.dark) .galaxy .r.shown .hl{animation:none;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .galaxy .r.shown .hl{animation:none;color:#fff}
  html:not(.dark) .galaxy .r.shown .hl{color:var(--ink)}}

/* ---- THE 167 HOURS: the one data visual. The single champagne-gold accent
   lives here (the live count + the one measured hour). ---- */
.galaxy .big167{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;
  display:inline-block;min-inline-size:2.4ch;text-align:center}
.galaxy .r.shown .big167{animation:countpop 2.2s ease-out both}
@keyframes countpop{0%,86%{text-shadow:0 0 0 rgba(231,215,168,0)}
  92%{text-shadow:0 0 20px rgba(231,215,168,.85)}100%{text-shadow:0 0 8px rgba(231,215,168,.35)}}
.weekgrid{display:grid;grid-template-columns:repeat(24,1fr);gap:clamp(2px,.7vw,8px);
  inline-size:min(86vw,640px);block-size:auto;margin:clamp(.8em,2.4vh,1.6em) auto .7em}
.weekgrid i{aspect-ratio:1;border-radius:50%;background:rgba(246,242,232,.13);
  transition:background .5s ease,box-shadow .5s ease;transition-delay:var(--dd,0s)}
.galaxy .r.shown .weekgrid i.flash{background:rgba(190,205,255,.4)}
.weekgrid i.on{background:var(--accent)!important;box-shadow:0 0 10px 2px rgba(231,215,168,.8)}
.galaxy .r.shown .weekgrid:not(.full) i.on{animation:hourpulse 2.8s ease-in-out 1.6s infinite}
@keyframes hourpulse{0%,100%{box-shadow:0 0 8px 1px rgba(231,215,168,.5)}50%{box-shadow:0 0 16px 5px rgba(231,215,168,.9)}}

/* THE 168 PAYOFF — every hour lights up. Dots start dark and cascade to gold
   (staggered by --dd) once the grid gets .lit, then gently breathe. */
.weekgrid.full i.on{background:rgba(246,242,232,.13)!important;box-shadow:none}
.weekgrid.full.lit i.on{background:var(--accent)!important;box-shadow:0 0 8px 1px rgba(231,215,168,.7);
  animation:fillbreathe 3.4s ease-in-out var(--dd,0s) infinite}
@keyframes fillbreathe{0%,100%{box-shadow:0 0 7px 1px rgba(231,215,168,.45)}50%{box-shadow:0 0 13px 3px rgba(231,215,168,.8)}}
.galaxy .gridkey{display:flex;justify-content:center;align-items:center;gap:1.6em;margin-top:.4em;
  font-size:clamp(.58rem,1.3vw,.7rem);letter-spacing:.14em;text-transform:uppercase;opacity:.62;white-space:nowrap}
.galaxy .gridkey i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.6em;vertical-align:middle}
.galaxy .gridkey .k-on{background:var(--accent)} .galaxy .gridkey .k-off{background:rgba(246,242,232,.26)}

/* the closing CTA beat: line + button, still in deep space */
.cta-beat .gline{margin-bottom:1.1em}
.cta-beat .cycler{color:var(--accent)}   /* the fast-cycling impediment word in champagne-gold */
.gx-cta{font-size:15px;padding:18px 34px}
.galaxy .gx-cta{background:var(--cream);color:var(--ink);border-color:transparent;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.6)}
.galaxy .gx-cta:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px)}
html:not(.dark) .galaxy .gx-cta{background:var(--ink);color:var(--cream)}
html:not(.dark) .galaxy .gx-cta:hover{background:var(--clay-ink);color:var(--cream)}

/* ============================================================
   LIT SECTIONS (everything after the turn) — always full light.
   Colors are hard-coded ink/paper here so AA never depends on --fg.
   ============================================================ */
.lit{position:relative;color:var(--ink);
  padding:clamp(62px,8vh,100px) 7vw;max-width:1500px;margin:0 auto}
@media(max-width:700px){.lit{padding:clamp(52px,7vh,80px) 6vw}}
.lit .kicker{color:var(--clay)}
.lit h2{font-family:'Figtree',sans-serif;font-weight:600;letter-spacing:-.025em;line-height:1.03;
  font-size:clamp(2.1rem,5.2vw,4.4rem);max-width:18ch}
.lit .lead{margin-top:24px;max-width:62ch;color:var(--ink-soft);font-size:1.12rem;line-height:1.66}

/* HOW IT WORKS — reuse the step rhythm, light */
.lit .steps-list{margin-top:56px}
.step-row .n{color:var(--clay)}
.lit .closing{margin-top:46px;font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:500;letter-spacing:-.02em;
  color:var(--ink);max-width:30ch;line-height:1.2}

/* THE MODEL — two-panel proof, light */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:54px}
@media(max-width:820px){.proof-grid{grid-template-columns:1fr}}
.pbox{padding:34px 30px;border-radius:18px;border:1px solid var(--line);background:var(--paper);transition:.4s}
.pbox .pt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.pbox.them{background:rgba(28,43,39,.03)}
.pbox.them .pt{color:var(--muted)}
.pbox.us{border-color:var(--sage);background:rgba(127,166,140,.10)}
.pbox.us .pt{color:var(--sage-deep)}
.pbox h3{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.pbox p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6}
.pbox.us:hover{transform:translateY(-5px);box-shadow:0 28px 60px -42px rgba(28,43,39,.5)}

/* WHAT QULL HEARS — four quiet labels */
.hears-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
@media(max-width:820px){.hears-grid{grid-template-columns:1fr 1fr}}
.harea{padding:30px 26px;border-radius:16px;border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;gap:10px;transition:.4s}
.harea:hover{border-color:var(--sage-soft);transform:translateY(-4px)}
.harea .hh{font-family:'Figtree',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-.02em}
.harea .hd{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600}

/* PROGRESS — session-by-session tracking that rolls into trends */
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:54px}
@media(max-width:980px){.track-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.track-grid{grid-template-columns:1fr}}
.tcard{padding:28px 24px;border-radius:16px;border:1px solid var(--line);background:var(--paper);
  display:flex;flex-direction:column;gap:8px;transition:.4s}
.tcard:hover{border-color:var(--sage-soft);transform:translateY(-4px);box-shadow:0 26px 56px -44px rgba(28,43,39,.5)}
.tcard .td{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:600}
.tcard .th{font-family:'Figtree',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.02em}
.tcard p{color:var(--ink-soft);font-size:.97rem;line-height:1.58}

/* cinematic accent: as each lit heading reveals, a warm lamp blooms behind
   it and an amber underline sweeps in — the lights keep turning on as you go */
.lit h2{position:relative}
.lit h2.in::after{content:"";position:absolute;left:0;bottom:-.34em;height:3px;width:2.2em;border-radius:3px;
  background:linear-gradient(90deg,var(--amber),transparent);transform-origin:left;
  animation:litsweep 1.1s .3s cubic-bezier(.16,1,.3,1) both}
.lit h2.in::before{content:"";position:absolute;left:-12%;top:-70%;width:120%;height:240%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 58% at 26% 50%, rgba(234,161,92,.20), transparent 70%);
  animation:litbloom 1.5s .1s ease both}
@keyframes litsweep{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.95}}
@keyframes litbloom{0%{opacity:0;transform:scale(.6)}55%{opacity:1}100%{opacity:.62;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .lit h2.in::after{animation:none;opacity:.95}
  .lit h2.in::before{animation:none;opacity:.5}
}

/* PRIVACY — light treatment (overrides the shared dark .privacy block) */
.lit.t-privacy{background:transparent;color:var(--ink)}
.priv-list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px}
@media(max-width:820px){.priv-list{grid-template-columns:1fr}}
.pcard{padding:30px 26px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:.4s}
.pcard:hover{border-color:var(--sage-soft);transform:translateY(-4px)}
.pcard .pi{color:var(--sage-deep);margin-bottom:14px}
.pcard h3{font-size:1.18rem;font-weight:600;margin-bottom:9px;letter-spacing:-.01em}
.pcard p{color:var(--ink-soft);font-size:.98rem;line-height:1.58}

/* CAREERS — reuse .roles from site.css; just spacing */
.lit .roles{margin-top:50px}

/* ---- CLOSING CTA — brightest beat ---- */
.closer-beat{text-align:center;align-items:center}
.closer-beat .inner{max-width:900px}
.closer-beat h2{font-family:'Figtree',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:1.0;
  font-size:clamp(2.6rem,8vw,6rem)}
.closer-beat .body{margin:26px auto 0;max-width:46ch;color:var(--ink-soft);font-size:1.15rem;line-height:1.6}
.closer-beat .hero-cta{margin-top:40px;display:flex;justify-content:center}

/* ============================================================
   SECTION TONES — each lit section is fully light OR fully dark green,
   baked statically (no scroll math, no global flips, so nothing glitches).
   A .dark-sec paints a full-bleed green panel whose top/bottom edges fade
   into the page, so the colour eases in as you scroll, and it flips the
   foreground vars to light. Cards/text key off those vars + currentColor
   so they read on either tone.
   ============================================================ */
:root{--sx-fg:var(--ink);--sx-soft:var(--ink-soft);--sx-muted:var(--muted);
  --sx-line:var(--line);--sx-accent:var(--clay)}
/* the alternating sections are now a GENTLE sage-tinted cream, not deep green,
   and keep dark text (no light flip) — so adjacent sections differ by only a
   whisper and there is no hard contrast seam. Accent stays the brand sage. */
.dark-sec{--sx-fg:var(--ink);--sx-soft:#36433d;--sx-muted:#5b675f;
  --sx-line:rgba(28,43,39,.14);--sx-accent:var(--sage-deep)}

/* Two section tones only: cream (the page) and sage (.dark-sec). Each sage
   panel is BOUNDED to its own section, solid sage through the body, and the
   cream<->sage blend happens ONLY in a short band at the top and bottom edges
   (the seam) — so there is never a colour line or block mid-section. */
.dark-sec::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:-2;pointer-events:none;
  /* the panel is solid sage in the body and fades to TRANSPARENT at each edge
     (not to cream) — so it dissolves into the real page background above/below,
     whatever its exact tone, leaving no seam line to mismatch. */
  background:linear-gradient(180deg,
    transparent 0,
    color-mix(in oklab,var(--sec-sage),transparent 60%) 120px,
    var(--sec-sage) 300px,
    var(--sec-sage) calc(100% - 300px),
    color-mix(in oklab,var(--sec-sage),transparent 60%) calc(100% - 120px),
    transparent 100%)}

/* text follows the tone */
.lit{color:var(--sx-fg)}
.lit .kicker{color:var(--sx-accent)} .lit .kicker::before{background:var(--sx-accent)}
.lit .lead{color:var(--sx-soft)}
.lit .step-row{border-color:var(--sx-line)} .lit .step-row .n{color:var(--sx-accent)}

/* cards adapt to the tone via currentColor */
.pbox,.harea,.pcard,.tcard{background:color-mix(in oklab,transparent,currentColor 5%);
  border-color:color-mix(in oklab,transparent,currentColor 15%)}
.pbox.them{background:color-mix(in oklab,transparent,currentColor 4%)}
.pbox.them .pt{color:var(--sx-muted)} .pbox p{color:var(--sx-soft)}
.pbox.us{border-color:var(--sage);background:color-mix(in oklab,transparent,var(--sage) 16%)}
.harea .hh{color:var(--sx-fg)} .harea .hd{color:var(--sx-accent)} .harea .hi{color:var(--sx-soft)}
.pcard h3{color:var(--sx-fg)} .pcard p{color:var(--sx-soft)}
.tcard .td{color:var(--sx-accent)} .tcard .th{color:var(--sx-fg)} .tcard .ti{color:var(--sx-soft)}
.lit .role{border-color:var(--sx-line)} .lit .role .rt{color:var(--sx-fg)} .lit .role .rm{color:var(--sx-muted)}

/* GAMIFYING SPEECH THERAPY — playful feature cards */
.play-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(34px,5vh,56px);max-width:1100px}
@media(max-width:640px){.play-grid{grid-template-columns:1fr}}
.play-card{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,32px);
  background:color-mix(in oklab,var(--paper),transparent 28%);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s}
.play-card:hover{transform:translateY(-4px);border-color:var(--sage-soft);box-shadow:0 28px 54px -36px rgba(28,43,39,.5)}
.play-card .pi{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:15px;
  background:color-mix(in oklab,transparent,var(--sage-deep) 12%);color:var(--sage-deep);margin-bottom:18px}
.play-card .pi svg{width:25px;height:25px}
.play-card h3{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(1.18rem,2.6vw,1.4rem);
  letter-spacing:-.01em;color:var(--ink);margin-bottom:9px}
.play-card p{color:var(--ink-soft);font-size:1rem;line-height:1.62}

/* PROGRESS — the climbing chart, now an emphasized panel that draws on reveal */
.chart{margin:38px 0 8px;max-width:780px;
  background:color-mix(in oklab,var(--paper),transparent 18%);
  border:1px solid var(--sx-line);border-radius:24px;
  padding:clamp(18px,3vw,30px);
  box-shadow:0 24px 60px -38px rgba(28,43,39,.45)}
.chart-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chart-cap{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sx-muted);font-weight:700}
.chart-val{font-family:'Figtree',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,7vw,3rem);color:var(--sx-fg);line-height:1;display:flex;align-items:center;gap:10px}
.chart-val em{font-size:.4em;font-weight:700;font-style:normal;color:var(--sage-deep);
  background:color-mix(in oklab,transparent,var(--sage-deep) 14%);padding:4px 10px;border-radius:30px}
.chart-svg{width:100%;height:clamp(160px,30vw,250px);display:block;color:var(--sx-fg);overflow:visible;margin-top:10px}
.chart-svg circle{transform-box:fill-box;transform-origin:center}
.chart .dots circle{fill:var(--sage-deep)}
.chart .dot-now{fill:var(--amber)}
/* resting (pre-reveal) hidden state — then animate in when the figure gets .in */
.chart .area{opacity:0}
.chart .trend{stroke-dasharray:1;stroke-dashoffset:1}
.chart .dots circle,.chart .dot-now,.chart .now-ring{opacity:0}
.chart.in .trend{animation:cDraw 1.5s .15s cubic-bezier(.45,0,.2,1) forwards}
.chart.in .area{animation:cArea 1s .55s ease forwards}
.chart.in .dots circle{animation:cPop .42s ease forwards}
.chart.in .dots circle:nth-child(1){animation-delay:.30s}
.chart.in .dots circle:nth-child(2){animation-delay:.44s}
.chart.in .dots circle:nth-child(3){animation-delay:.58s}
.chart.in .dots circle:nth-child(4){animation-delay:.72s}
.chart.in .dots circle:nth-child(5){animation-delay:.86s}
.chart.in .dots circle:nth-child(6){animation-delay:1.0s}
.chart.in .dot-now{animation:cPop .5s 1.2s ease forwards}
.chart.in .now-ring{animation:cRing 2.2s 1.5s ease-out infinite}
@keyframes cDraw{to{stroke-dashoffset:0}}
@keyframes cArea{to{opacity:1}}
@keyframes cPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes cRing{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
.chart figcaption{display:flex;justify-content:space-between;margin-top:14px;
  font-size:.82rem;letter-spacing:.03em;color:var(--sx-muted)}
@media (prefers-reduced-motion:reduce){
  .chart .area,.chart .dots circle,.chart .dot-now{opacity:1}
  .chart .trend{stroke-dashoffset:0}.chart .now-ring{display:none}}
.tcard .ti{display:block;margin-bottom:4px}
.tcard .ti svg{width:24px;height:24px}
.harea .hi{display:block;margin-bottom:4px}
.harea .hi svg{width:26px;height:26px}

/* ============================================================
   REDUCED MOTION — fully lit, no animation, content in order
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  #glow{transition:none}
  #dust{display:none}
  #stars i{animation:none;opacity:.32}
  .beat{min-height:auto;padding:clamp(80px,10vh,120px) 7vw}
}