/* ============================================================
   WAVLYTICS — design system
   The identity is the logo mark: stacked signal strata, light at
   the surface falling to deep blue, separated by black. On this
   site that mark is a real structure suspended inside a pool
   volume — the logo is simply what it looks like head-on.
   ============================================================ */

:root{
  /* --- depth --- */
  --void:#02070C;
  --abyss:#04101A;
  --deep:#072133;
  --tide:#0B3A57;

  /* --- the strata: the three bands of the mark, surface to depth --- */
  --strata-1:#86C8EB;
  --strata-2:#31A2DD;
  --strata-3:#124C94;
  --strata-4:#0A2E5C;
  /* the highlight above the mark's own range, for lit surfaces */
  --strata-0:#C6E6F7;

  /* --- light --- */
  --caustic:#4FD8E8;
  --lane:#EAF4FA;
  --haze:#8AA6B8;
  /* the micro-labels are 9px uppercase mono on dark glass — this is as
     dim as they can go and still be read at arm's length from a deck */
  --haze-dim:#66818F;
  --ember:#FF8A4C;
  --ember-dim:#8C4423;

  /* --- material --- */
  --glass:linear-gradient(158deg, rgba(24,54,76,.50) 0%, rgba(8,22,34,.40) 62%, rgba(5,14,22,.46) 100%);
  --glass-solid:linear-gradient(158deg, rgba(15,38,55,.86) 0%, rgba(5,16,25,.88) 100%);
  --hair:rgba(140,196,228,.15);
  --hair-hi:rgba(191,228,245,.34);
  --lift:0 1px 0 rgba(255,255,255,.07) inset;
  --drop:0 30px 80px -34px rgba(0,0,0,.92), 0 4px 22px -12px rgba(0,0,0,.7);

  /* --- type --- */
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono","Courier New",monospace;

  /* --- the scale ---
     Eight steps, and every piece of type on the page is one of them.
     --t-micro is the floor: nothing is smaller, because below ~11px an
     uppercase mono label on a dark film stops being readable at arm's
     length on a pool deck, which is where this gets read.
     Tracking falls as size rises, so wide-set labels keep their width. */
  --t-micro:.74rem;                              /* uppercase mono labels, keys */
  --t-label:.82rem;                              /* mono UI: nav, buttons, chips, values */
  --t-dense:.95rem;                              /* copy inside dense panels */
  --t-body:clamp(1.04rem,.95rem + .35vw,1.16rem);/* body copy */
  --t-lead:clamp(1.18rem,1rem + .7vw,1.36rem);   /* lead lines, pull quotes */

  --h-1:clamp(2.4rem,1.5rem + 4.4vw,5rem);       /* the hero, once */
  --h-2:clamp(2.05rem,1.5rem + 2.6vw,3.5rem);    /* every section headline */
  --h-3:clamp(1.5rem,1.2rem + 1.1vw,1.95rem);    /* card and panel titles */

  /* --- rhythm --- */
  --rail-w:190px;
  --pad:clamp(1.4rem,7vw,7rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.62,.06,.24,1);
  --spring:cubic-bezier(.16,1.02,.32,1);

  /* --- veils: scrims that keep type legible over the film --- */
  --v-mid:radial-gradient(56% 38% at 50% 52%, rgba(2,7,12,.66) 0%, rgba(2,7,12,.36) 50%, rgba(2,7,12,0) 78%);
  --v-l:linear-gradient(100deg, rgba(2,7,12,.95) 0%, rgba(2,7,12,.7) 34%, rgba(2,7,12,0) 63%);
  --v-r:linear-gradient(260deg, rgba(2,7,12,.92) 0%, rgba(2,7,12,.6) 28%, rgba(2,7,12,0) 56%);
  --v-b:linear-gradient(to top, rgba(2,7,12,.95) 0%, rgba(2,7,12,.6) 26%, rgba(2,7,12,0) 55%);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--void);color:var(--lane);
  font-family:var(--sans);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden;}
::selection{background:var(--strata-3);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;}
:focus-visible{outline:1px solid var(--caustic);outline-offset:5px;border-radius:2px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:300;background:var(--strata-0);color:var(--void);
  padding:.7rem 1.1rem;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;
  text-transform:uppercase;transition:top .3s var(--ease);
}
.skip:focus{top:1rem;}

/* ============================================================
   the mark
   One <symbol> per band, so every instance is a <use> and the
   preloader can still move the three bands independently.
   The viewBox carries the full artwork, so no peak ever clips.
   ============================================================ */
.mk-defs{position:absolute;width:0;height:0;overflow:hidden;}
.mark{display:block;width:100%;height:auto;overflow:visible;}
.mark use:nth-child(1){fill:var(--strata-1);}
.mark use:nth-child(2){fill:var(--strata-2);}
.mark use:nth-child(3){fill:var(--strata-3);}

/* ============================================================
   preloader
   ============================================================ */
#pre{
  position:fixed;inset:0;z-index:220;background:var(--void);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease),visibility .8s;
}
#pre.done{opacity:0;visibility:hidden;}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:1.9rem;}
/* the mark assembles out of the depth: bottom band first, surface last */
.pre-mark{width:min(50vw,300px);}
.pre-mark use{opacity:0;transform:translateY(16px) scale(.985);transform-origin:50% 50%;}
.pre-mark use:nth-child(3){animation:mkRise 1.1s var(--spring) .10s forwards;}
.pre-mark use:nth-child(2){animation:mkRise 1.1s var(--spring) .26s forwards;}
.pre-mark use:nth-child(1){animation:mkRise 1.2s var(--spring) .42s forwards;}
@keyframes mkRise{to{opacity:1;transform:none;}}
.preWord{display:flex;gap:.62em;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.4em;color:var(--haze);}
.preWord span{opacity:0;transform:translateY(9px);animation:preIn .9s var(--ease) forwards;}
@keyframes preIn{to{opacity:1;transform:none}}
.pre-meter{width:min(46vw,250px);height:1px;background:rgba(140,196,228,.14);overflow:hidden;}
.pre-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--strata-3),var(--caustic));}
.pre-num{
  position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.2rem,4vw,3rem);
  font-family:var(--mono);font-size:clamp(2.4rem,8vw,5rem);font-weight:200;
  color:rgba(140,196,228,.13);font-variant-numeric:tabular-nums;line-height:1;
}

/* the curtain: five columns that lift away once the film is ready */
.curtain{position:fixed;inset:0;z-index:215;display:flex;pointer-events:none;}
.curtain i{flex:1;background:var(--void);transform:translateY(0);}
.curtain.lift i{transition:transform 1.05s var(--ease);transform:translateY(-101%);}
.curtain.gone{display:none;}

/* ============================================================
   fixed stage
   ============================================================ */
.stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--void);}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* slow-drifting colour blooms, under the grain — depth the shader alone can't buy */
.aurora{position:absolute;inset:-12%;z-index:2;opacity:.5;filter:blur(58px);mix-blend-mode:screen;}
.aurora::before,.aurora::after{
  content:"";position:absolute;border-radius:50%;
}
.aurora::before{
  width:56vw;height:56vw;left:-6vw;top:2vh;
  background:radial-gradient(circle at 50% 50%, rgba(28,110,160,.30), rgba(28,110,160,0) 66%);
  animation:drift1 34s var(--ease) infinite alternate;
}
.aurora::after{
  width:48vw;height:48vw;right:-8vw;bottom:-6vh;
  background:radial-gradient(circle at 50% 50%, rgba(79,216,232,.16), rgba(79,216,232,0) 64%);
  animation:drift2 44s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(9vw,-7vh,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-11vw,6vh,0) scale(1.1)}}

.grain{
  position:absolute;inset:-40px;z-index:3;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grainShift 700ms steps(1) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-9px,5px)}40%{transform:translate(6px,-8px)}
  60%{transform:translate(-4px,-6px)}80%{transform:translate(8px,4px)}100%{transform:translate(0,0)}
}
.scanline{
  position:absolute;inset:0;z-index:4;opacity:.16;mix-blend-mode:soft-light;
  background:repeating-linear-gradient(to bottom,rgba(190,228,245,.055) 0 1px,transparent 1px 3px);
}
/* cinematic bars, driven per-scene */
.bars{position:absolute;inset:0;z-index:5;}
.bars i{position:absolute;left:0;right:0;height:0;background:var(--void);transition:height .9s var(--ease);}
.bars .bar-t{top:0;} .bars .bar-b{bottom:0;}
.stage.cinema .bars i{height:7.2vh;}

.nogl{background:radial-gradient(125% 85% at 50% 12%, #0d3247 0%, #061a2a 44%, #02070c 100%) !important;}

/* ============================================================
   scroll progress
   ============================================================ */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;background:rgba(140,196,228,.08);}
.prog i{
  display:block;height:100%;width:0;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--strata-3) 0%,var(--strata-2) 45%,var(--caustic) 100%);
  box-shadow:0 0 14px rgba(79,216,232,.55);
}

/* ============================================================
   chrome
   ============================================================ */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:90;display:flex;
  align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.35rem clamp(1.1rem,3.4vw,2.6rem);pointer-events:none;
  transition:background .6s var(--ease),backdrop-filter .6s var(--ease),
             border-color .6s var(--ease),transform .6s var(--ease),padding .6s var(--ease);
  border-bottom:1px solid transparent;
}
.chrome>*{pointer-events:auto;}
.chrome.stuck{
  background:linear-gradient(to bottom,rgba(2,7,12,.82),rgba(2,7,12,.44));
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:rgba(140,196,228,.1);
  padding-top:.95rem;padding-bottom:.95rem;
}
.chrome.hide{transform:translateY(-115%);}

.brand{display:flex;align-items:center;gap:.75rem;}
.brand .mark{width:42px;flex:none;transition:transform .5s var(--spring);}
.brand:hover .mark{transform:translateY(-1px) scale(1.05);}
.brand b{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.32em;font-weight:400;padding-left:.4em;}

.topnav{display:flex;gap:clamp(1rem,2.4vw,2.1rem);}
.topnav a{
  position:relative;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.15em;
  text-transform:uppercase;color:var(--haze);padding:.35rem 0;
  transition:color .45s var(--ease);
}
.topnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--caustic);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.topnav a:hover{color:var(--lane);}
.topnav a:hover::after{transform:scaleX(1);transform-origin:0 50%;}

.act{
  position:relative;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.17em;
  text-transform:uppercase;color:var(--haze);
  border:1px solid rgba(140,196,228,.26);padding:.68rem 1.2rem;overflow:hidden;
  border-radius:2px;transition:color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.act span{position:relative;z-index:1;}
.act::before{content:"";position:absolute;inset:0;background:var(--strata-0);transform:translateY(101%);transition:transform .55s var(--ease);}
.act:hover,.act:focus-visible{color:var(--void);border-color:var(--strata-0);box-shadow:0 10px 34px -12px rgba(79,216,232,.5);}
.act:hover::before,.act:focus-visible::before{transform:none;}

.burger{display:none;width:38px;height:38px;position:relative;cursor:pointer;}
.burger i{position:absolute;left:9px;right:9px;height:1px;background:var(--lane);transition:transform .4s var(--ease),opacity .3s;}
.burger i:first-child{top:16px;} .burger i:last-child{top:21px;}
.burger[aria-expanded="true"] i:first-child{transform:translateY(2.5px) rotate(45deg);}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-2.5px) rotate(-45deg);}

.sheet{
  position:fixed;inset:0;z-index:85;background:rgba(2,7,12,.94);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .45s var(--ease);
  /* display:flex overrides the hidden attribute, so the closed sheet would
     otherwise sit invisible over the whole page and swallow every click */
  pointer-events:none;visibility:hidden;
}
.sheet[hidden]{display:none;}
.sheet.open{opacity:1;pointer-events:auto;visibility:visible;}
.sheet nav{display:flex;flex-direction:column;gap:1.4rem;text-align:center;}
.sheet a{font-family:var(--serif);font-size:var(--h-3);color:var(--haze);transition:color .3s;}
.sheet a:hover{color:var(--lane);}
.sheet a.hi{color:var(--caustic);}

/* ============================================================
   movement rail
   ============================================================ */
.rail{
  position:fixed;right:clamp(1rem,2.4vw,2.1rem);top:50%;transform:translateY(-50%);
  z-index:80;display:flex;flex-direction:column;gap:.72rem;
}
.rail a{
  display:flex;align-items:center;justify-content:flex-end;gap:.75rem;
  color:var(--haze-dim);font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;transition:color .5s var(--ease);
}
.rail .lbl{opacity:0;transform:translateX(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap;}
.rail .dash{width:16px;height:1px;background:currentColor;transition:width .5s var(--ease),box-shadow .5s var(--ease);}
.rail a:hover,.rail a:focus-visible{color:var(--haze);}
.rail a:hover .lbl,.rail a:focus-visible .lbl{opacity:1;transform:none;}
.rail a.on{color:var(--strata-1);}
.rail a.on .dash{width:36px;box-shadow:0 0 12px rgba(79,216,232,.7);}
.rail a.on .lbl{opacity:1;transform:none;}

/* ============================================================
   cursor
   ============================================================ */
.cur{
  position:fixed;top:0;left:0;z-index:200;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  display:flex;align-items:center;justify-content:center;
  transition:width .45s var(--spring),height .45s var(--spring),margin .45s var(--spring);
}
.cur-ring{
  position:absolute;inset:0;border:1px solid rgba(191,228,245,.5);border-radius:50%;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--spring);
  mix-blend-mode:screen;
}
.cur-lbl{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--void);opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s var(--spring);
  position:relative;z-index:1;
}
.cur.big{width:66px;height:66px;margin:-33px 0 0 -33px;}
.cur.big .cur-ring{background:rgba(191,228,245,.14);border-color:rgba(191,228,245,.9);}
.cur.lab .cur-ring{background:var(--strata-0);border-color:var(--strata-0);}
.cur.lab .cur-lbl{opacity:1;transform:none;}
.cur-dot{
  position:fixed;top:0;left:0;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:var(--caustic);z-index:201;pointer-events:none;box-shadow:0 0 10px rgba(79,216,232,.9);
}
@media (hover:none),(pointer:coarse){.cur,.cur-dot{display:none;}}

/* ============================================================
   scenes
   ============================================================ */
main{position:relative;z-index:10;}
.scene{position:relative;}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;}
.pin::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--veils,none);}
.veil    {--veils:var(--v-mid);}
.veil-l  {--veils:var(--v-l);}
.veil-lb {--veils:var(--v-l), var(--v-b);}
.veil-lr {--veils:var(--v-l), var(--v-r);}
.veil-lrb{--veils:var(--v-l), var(--v-r), var(--v-b);}

.wrap{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--pad);max-width:1560px;margin:0 auto;
}
.wrap.top{justify-content:flex-start;padding-top:13vh;}
#s6 .display{max-width:17ch;}

/* The working scenes carry a panel as well as copy, so their headline
   steps down a size. The full display scale is reserved for the three
   scenes that are nothing but type: the hero, the capture, the close. */
#s2 .display,#s4 .display,#s5 .display,#s6 .display,#s7 .display{
  font-size:var(--h-2);
}

/* Scenes that park a panel on the right have to keep the copy column
   clear of it. Below 1250px there is no room for both plus the rail,
   so those scenes stack instead (see responsive). */
@media (min-width:1251px){
  #s4 .wrap{padding-right:calc(var(--pad) + var(--rail-w) + 430px + 2.5rem);}
  #s5 .wrap,#s6 .wrap{padding-right:calc(var(--pad) + var(--rail-w) + 440px + 2.5rem);}
  #s7 .wrap{padding-right:calc(var(--pad) + var(--rail-w) + 460px + 2.5rem);}
}

/* reveal offset travels as a custom property so it composes with any
   centering transform the element already carries */
[data-in]{opacity:0;will-change:opacity,transform;transform:translate3d(0,var(--ry,0px),0);}

/* ============================================================
   type
   ============================================================ */
.eyebrow{
  display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.28em;text-transform:uppercase;color:var(--strata-2);margin:0 0 1.9rem;
  text-shadow:0 1px 16px rgba(2,7,12,.95);
}
.eyebrow.center{justify-content:center;}
.eyebrow i{font-style:normal;color:var(--haze-dim);}
.eyebrow em{font-style:normal;width:28px;height:1px;background:linear-gradient(90deg,var(--strata-3),transparent);}

/* the badge variant — everywhere else an eyebrow is a quiet index label, but
   the first one on the page is a claim, so it is lit glass and reads at
   arm's length */
.eyebrow.badge{
  display:inline-flex;align-self:center;gap:.75rem;
  margin:0 0 clamp(1.5rem,3vw,2.3rem);padding:.66rem 1.35rem .66rem 1.15rem;
  border:1px solid var(--hair-hi);border-radius:999px;
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  font-size:clamp(.68rem,1.4vw,.86rem);letter-spacing:.3em;color:var(--strata-0);
  box-shadow:var(--lift), 0 20px 46px -28px rgba(2,7,12,.95), 0 0 34px -14px rgba(79,216,232,.34);
}
.eyebrow.badge .dot{
  flex:none;width:6px;height:6px;border-radius:50%;background:var(--caustic);
  align-self:center;animation:beacon 3s var(--ease) infinite;
}
@keyframes beacon{
  0%{box-shadow:0 0 0 0 rgba(79,216,232,.5)}
  70%,100%{box-shadow:0 0 0 9px rgba(79,216,232,0)}
}

.display{
  font-family:var(--serif);font-weight:400;font-size:var(--h-1);
  line-height:1.04;letter-spacing:-.012em;margin:0;max-width:19ch;
  perspective:900px;
  text-shadow:0 2px 26px rgba(2,7,12,.92), 0 0 70px rgba(2,7,12,.72);
}
.display.wide{max-width:25ch;}
.display.center{max-width:19ch;margin-inline:auto;text-align:center;}
.display.center.wide{max-width:26ch;}
.display.huge{font-size:clamp(2.6rem,1.6rem + 5vw,5.6rem);}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em;}
.i{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%;}

.sub{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1rem + 1.5vw,2.05rem);
  line-height:1.2;color:var(--haze);margin:.6em 0 0;
  text-shadow:0 2px 24px rgba(2,7,12,.92);
}
.body{
  font-size:var(--t-body);line-height:1.6;font-weight:300;
  color:var(--haze);max-width:47ch;margin:1.9rem 0 0;
  text-shadow:0 1px 18px rgba(2,7,12,.95), 0 0 40px rgba(2,7,12,.8);
}
.body.center{margin-inline:auto;text-align:center;}
.body.wide{max-width:56ch;}
.body strong{color:var(--lane);font-weight:400;}

/* a line someone actually said, given the weight of a pull quote */
.pull{
  position:relative;margin:1.7rem 0 0;padding-left:1.4rem;max-width:34ch;
  font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1rem + 1.4vw,1.9rem);
  line-height:1.24;color:var(--strata-1);
  text-shadow:0 2px 22px rgba(2,7,12,.92);
}
.pull::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.5em;width:1px;
  background:linear-gradient(180deg,var(--ember),rgba(255,138,76,.1));
}
.pull span{
  display:block;margin-top:.85rem;font-family:var(--mono);font-style:normal;
  font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);
}

/* ============================================================
   01 · hero
   ============================================================ */
#s1 .wrap{align-items:center;text-align:center;}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(96vw,1000px);}
.hero > *{position:relative;z-index:1;}
/* a shallow pool of surface light behind the type — the hero sits in the one
   place the film is brightest, and this keeps the words inside that light
   rather than floating on top of it */
.hero::before{
  content:"";position:absolute;z-index:0;inset:-16% -12% -20%;pointer-events:none;
  background:radial-gradient(54% 48% at 50% 40%,
    rgba(18,76,148,.34) 0%, rgba(11,58,87,.16) 44%, rgba(2,7,12,0) 74%);
}
.hero .display{max-width:none;margin-inline:auto;}
/* the answering half of the headline sits one stratum deeper in the mark's
   own range and carries a caustic bloom, so the two lines read as call and
   response — spoken above the surface, heard below it */
.display .lit{
  color:var(--strata-2);
  text-shadow:0 2px 26px rgba(2,7,12,.92), 0 0 42px rgba(49,162,221,.36), 0 0 96px rgba(79,216,232,.16);
}
/* the hero's sub is upright rather than italic; the size comes from .sub */
.hero .sub{font-style:normal;color:var(--strata-1);margin-top:.56em;line-height:1.24;}
.hero .row{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;justify-content:center;margin-top:2.6rem;}

/* the two promises — left-aligned inside a centred hero, each led by a rule
   that lights at the top and falls away, the same fade the eyebrow uses */
.pillars{
  position:relative;display:grid;list-style:none;text-align:left;
  gap:1.7rem clamp(1.8rem,4vw,3.4rem);grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(2.2rem,4vw,3.1rem) 0 0;padding:clamp(2rem,3.6vw,2.7rem) 0 0;
  max-width:min(92vw,720px);
}
.pillars::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair-hi) 22%,var(--hair-hi) 78%,transparent);
}
.pillars li{position:relative;padding-left:1.3rem;}
.pillars li::before{
  content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:1px;
  background:linear-gradient(180deg,var(--caustic),rgba(79,216,232,.14) 52%,transparent);
}
.pillars h2{
  font-family:var(--sans);font-size:1.16rem;font-weight:500;letter-spacing:-.005em;
  color:var(--lane);margin:0 0 .55rem;
  text-shadow:0 1px 16px rgba(2,7,12,.95);
}
.pillars p{
  font-size:var(--t-dense);line-height:1.6;font-weight:300;color:var(--haze);margin:0;max-width:36ch;
  text-shadow:0 1px 18px rgba(2,7,12,.95), 0 0 40px rgba(2,7,12,.8);
}

.cta{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;
  color:var(--void);padding:1.05rem 2.1rem;overflow:hidden;border-radius:2px;
  background:linear-gradient(120deg,var(--strata-0),#fff 55%,var(--strata-0));
  transition:transform .5s var(--spring),box-shadow .5s var(--ease);
  box-shadow:0 14px 44px -18px rgba(79,216,232,.7);
}
.cta span{position:relative;z-index:1;display:flex;align-items:center;gap:.9rem;}
.cta::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .55s var(--ease);}
.cta::after{
  content:"";position:absolute;top:0;bottom:0;width:38%;left:-50%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);animation:sheen 4.6s var(--ease) infinite;
}
@keyframes sheen{0%,62%{left:-55%}88%,100%{left:118%}}
.cta:hover,.cta:focus-visible{box-shadow:0 22px 60px -18px rgba(79,216,232,.85);}
.cta:hover::before,.cta:focus-visible::before{transform:none;}
.cta i{font-style:normal;transition:transform .5s var(--ease);}
.cta:hover i{transform:translateX(5px);}

.ghost{
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;
  color:var(--haze);transition:color .4s var(--ease);
}
.ghost .play{
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(140,196,228,.3);
  display:grid;place-items:center;transition:border-color .4s,background .4s,transform .5s var(--spring);
}
.ghost .play svg{width:9px;fill:var(--strata-1);transition:fill .4s;}
.ghost:hover{color:var(--lane);}
.ghost:hover .play{border-color:var(--caustic);background:rgba(79,216,232,.12);transform:scale(1.1);}

.ticks{
  display:flex;gap:clamp(1.2rem,3vw,2.8rem);list-style:none;margin:2.9rem 0 0;padding:0;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--haze-dim);
  flex-wrap:wrap;justify-content:center;
}
.ticks li{display:flex;align-items:baseline;gap:.55rem;}
.ticks b{font-size:1.05rem;font-weight:400;color:var(--strata-1);letter-spacing:0;}

/* the hero is a tall stack — on a short viewport it tightens rather than
   running down into the scroll hint */
@media (max-height:820px){
  .telemetry{top:17vh;}
  .panel-body{padding:.9rem;}
  .metrics{gap:.55rem;}
  .metrics .m-b{margin-top:.35rem;}
  .scrub-read{margin-bottom:1rem;}
  .scrub-said{min-height:2.6em;padding-top:.9rem;margin-top:1.1rem;}
  .note{bottom:clamp(1.2rem,4vh,3rem);}
}
@media (max-height:960px){
  .eyebrow.badge{margin-bottom:1.2rem;}
  .hero .sub{font-size:clamp(1.15rem,.9rem + 1vw,1.6rem);}
  .pillars{margin-top:1.4rem;padding-top:1.3rem;gap:1.05rem clamp(1.8rem,4vw,3.4rem);}
  .hero .row{margin-top:1.5rem;}
}
.hint{
  position:absolute;left:0;right:0;bottom:3.4vh;z-index:3;
  display:flex;justify-content:center;pointer-events:none;
}
.hint-in{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;font-family:var(--mono);
  font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--haze-dim);
}
.hint i{width:1px;height:42px;background:linear-gradient(var(--haze-dim),transparent);animation:drop 2.8s var(--ease) infinite;}
@keyframes drop{0%,100%{transform:translateY(-8px);opacity:.3}50%{transform:translateY(8px);opacity:1}}

/* hero entrance — plays on load, not on scroll */
.e1,.e2,.e3,.e4,.e5,.e6{opacity:0;}
.ready .e1{animation:riseIn 1.1s var(--ease) .10s forwards;}
.ready .e2{animation:riseIn 1.3s var(--ease) .22s forwards;}
.ready .e3{animation:riseIn 1.2s var(--ease) .52s forwards;}
.ready .e4{animation:riseIn 1.1s var(--ease) .72s forwards;}
.ready .e5{animation:riseIn 1.1s var(--ease) .88s forwards;}
.ready .e6{animation:fadeIn 1.4s var(--ease) 1.5s forwards;}
@keyframes riseIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* the headline arrives word by word out of a clipped baseline */
.ready .e2 .i{animation:wordUp 1.15s var(--ease) both;animation-delay:calc(.28s + var(--wi) * .055s);}
@keyframes wordUp{from{opacity:0;transform:translateY(112%) rotateX(-62deg)}to{opacity:1;transform:none}}

/* ============================================================
   02 · the vanishing
   ============================================================ */
.frags{position:absolute;inset:0;z-index:2;pointer-events:none;}
.frag{
  position:absolute;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;
  color:var(--strata-2);white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:0;will-change:opacity,transform,filter;
}
/* scene 02's fragments are spoken lines, not readouts — they get the
   speaking voice of the page rather than its instrument voice */
.frag.said{
  font-family:var(--serif);font-style:italic;font-size:var(--t-body);letter-spacing:0;
  color:var(--strata-1);white-space:normal;
  text-shadow:0 2px 20px rgba(2,7,12,.9);
}
@media (max-width:640px){ .frag{font-size:var(--t-micro);letter-spacing:.08em;} .frag.said{font-size:var(--t-dense);} }
.lossbox{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));bottom:clamp(2rem,10vh,6rem);
  width:min(84vw,320px);
}
.loss-k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);}
.loss-n{
  font-family:var(--mono);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:200;color:var(--haze);
  font-variant-numeric:tabular-nums;line-height:1.1;margin:.5rem 0 .9rem;letter-spacing:-.02em;
}
.loss-bar{height:1px;background:rgba(140,196,228,.14);overflow:hidden;}
.loss-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--haze-dim),var(--haze));}
.loss-f{
  margin-top:.85rem;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--haze-dim);display:flex;justify-content:space-between;gap:1rem;
}
.loss-f b{color:var(--ember);font-weight:400;font-size:var(--t-dense);letter-spacing:0;}

/* the three problem figures live inside the counter rather than beside it —
   one block on the right keeps the left column free for the copy, at any
   viewport height */
.loss-stats{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(140,196,228,.12);
  display:flex;flex-direction:column;gap:1rem;
}
.loss-stats .stat{display:flex;align-items:baseline;gap:.9rem;opacity:1;transform:none;}
.loss-stats .stat .n{font-size:1.5rem;min-width:3.4ch;}
.loss-stats .stat .k{margin-top:0;line-height:1.5;}

/* ============================================================
   03 · the capture
   ============================================================ */
.flash{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(46% 34% at 50% 50%, rgba(191,228,245,.55), rgba(79,216,232,.14) 42%, transparent 72%);
  mix-blend-mode:screen;
}
.chips{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%) translate3d(0,var(--ry,0px),0);
  bottom:13vh;width:min(94vw,760px);
  display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
}
.chip{
  display:flex;align-items:center;gap:.6rem;padding:.6rem 1.05rem;border-radius:100px;
  background:rgba(10,26,40,.5);border:1px solid rgba(140,196,228,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--haze);
  box-shadow:var(--lift);
}
.chip i{width:5px;height:5px;border-radius:50%;background:var(--caustic);box-shadow:0 0 10px var(--caustic);}

/* ============================================================
   material — glass panels
   ============================================================ */
.glass,.panel{
  position:relative;border-radius:16px;background:var(--glass);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:var(--lift),var(--drop);
  overflow:hidden;
}
.glass::before,.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--hair-hi),rgba(140,196,228,.06) 38%,rgba(140,196,228,.03) 70%,var(--hair-hi));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
/* cursor spotlight */
[data-spot]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(79,216,232,.13), transparent 62%);
  transition:opacity .45s var(--ease);
}
[data-spot]:hover::after{opacity:1;}

.panel-head{
  display:flex;align-items:center;gap:.9rem;padding:.85rem 1.15rem;
  border-bottom:1px solid rgba(140,196,228,.1);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);
}
.ph-t{flex:1;}
.ph-hint{
  padding:.22rem .5rem;border:1px solid rgba(140,196,228,.2);border-radius:3px;
  color:var(--haze);font-size:var(--t-micro);
}
.dotrow{display:flex;gap:5px;}
.dotrow i{width:6px;height:6px;border-radius:50%;background:rgba(140,196,228,.22);}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--caustic);box-shadow:0 0 0 0 rgba(79,216,232,.65);animation:pulse 2.2s var(--ease) infinite;}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(79,216,232,0)}100%{box-shadow:0 0 0 0 rgba(79,216,232,0)}}

/* ============================================================
   04 · reading the water
   ============================================================ */
.telemetry{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));top:20vh;
  width:min(86vw,460px);
}
.panel-body{padding:1.15rem;}
.wave{width:100%;height:clamp(64px,10vh,96px);display:block;margin-bottom:1rem;}
.wave-line{stroke:var(--caustic);stroke-width:1.6;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(79,216,232,.6));
  stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);}
.wave.drawn .wave-line{transition:stroke-dashoffset 1.9s var(--ease);stroke-dashoffset:0;}
.wave-area{opacity:0;transition:opacity 1.2s var(--ease) .6s;}
.wave.drawn .wave-area{opacity:1;}
.wave-cursor{stroke:rgba(255,138,76,.85);stroke-width:1;vector-effect:non-scaling-stroke;}

.metrics{display:flex;flex-direction:column;gap:.9rem;}
/* label and delta share the top line, the value gets its own — at a readable
   size the old single-line layout could not hold "Health flags 2 → 2 athletes" */
.metric{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"k d" "v v" "b b";
  align-items:baseline;gap:.3rem .8rem;
  font-family:var(--mono);font-size:var(--t-label);
  opacity:0;transform:translateX(14px);
}
.telemetry.live .metric{transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--d) * .11s + .3s);opacity:1;transform:none;}
.m-k{grid-area:k;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);}
.m-v{grid-area:v;font-size:1.05rem;color:var(--lane);font-variant-numeric:tabular-nums;}
.m-v em{font-style:normal;color:var(--haze-dim);}
.m-v i{font-style:normal;color:var(--strata-2);padding:0 .2em;}
.m-b{grid-area:b;margin-top:.5rem;height:3px;background:rgba(140,196,228,.11);border-radius:3px;overflow:hidden;}
.m-b b{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--strata-3),var(--caustic));}
.telemetry.live .m-b b{transition:width 1.1s var(--ease);transition-delay:calc(var(--d) * .11s + .55s);width:var(--w);}
.m-d{grid-area:d;text-align:right;color:var(--haze-dim);font-size:var(--t-micro);letter-spacing:.04em;}
.m-d.up{color:var(--ember);} .m-d.dn{color:var(--strata-2);}

.note{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));bottom:clamp(2rem,7vh,5rem);
  width:min(86vw,460px);padding-left:1.25rem;border-left:1px solid rgba(63,169,224,.45);
}
.note-h{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--strata-2);margin-bottom:.8rem;
}
.spark{
  width:11px;height:11px;flex:none;
  background:conic-gradient(from 0deg,var(--caustic),transparent 62%,var(--caustic));
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 44%);mask:radial-gradient(circle,transparent 42%,#000 44%);
  animation:spin 3.4s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}
.type{
  margin:0;font-size:var(--t-body);line-height:1.6;font-weight:300;color:var(--lane);
  text-shadow:0 1px 16px rgba(2,7,12,.92);min-height:5.5em;
}
.type::after{
  content:"";display:inline-block;width:.5em;height:1.05em;vertical-align:-.16em;margin-left:.12em;
  background:var(--caustic);opacity:0;animation:caret 1s steps(1) infinite;
}
.type.typing::after{opacity:1;}
@keyframes caret{50%{opacity:0}}

/* ============================================================
   cards
   ============================================================ */
.deck{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));bottom:clamp(2rem,7vh,5rem);
  width:min(88vw,440px);display:flex;flex-direction:column;gap:1.25rem;
}
.card{opacity:0;will-change:opacity,transform;transform:translate3d(0,var(--ry,0px),0);}
.card .ch{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--strata-2);margin-bottom:.7rem;}
.card p{margin:0;font-size:var(--t-body);line-height:1.6;font-weight:300;color:var(--haze);text-shadow:0 1px 16px rgba(2,7,12,.92);}
.card p b{font-weight:400;color:var(--lane);}
.card.ember{border-left:1px solid var(--ember);padding-left:1.3rem;}
.card.ember .ch{color:var(--ember);}
.card.ember p{color:var(--lane);}
.card.ember p em{font-style:normal;color:var(--ember);}

/* ============================================================
   05 · scrubber
   ============================================================ */
.scrub{
  position:absolute;z-index:4;left:var(--pad);bottom:clamp(2rem,9vh,6rem);width:min(86vw,470px);
}
.scrub-body{padding:1.15rem;}
.scrub-read{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1.3rem;}
.sr{display:flex;flex-direction:column;gap:.4rem;}
.sr-k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--haze-dim);}
.sr-v{font-family:var(--mono);font-size:1.14rem;font-weight:300;color:var(--strata-1);font-variant-numeric:tabular-nums;}
.sr-v.state{font-size:var(--t-label);letter-spacing:.06em;color:var(--haze);}
.sr-v.state.warn{color:var(--ember);}

.scrub-track{position:relative;height:64px;cursor:ew-resize;touch-action:none;}
.st-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:5px;}
.st-bars i{
  flex:1;border-radius:2px 2px 0 0;background:rgba(140,196,228,.13);
  transition:background .35s var(--ease),height .5s var(--ease),box-shadow .35s var(--ease);
}
.st-bars i.past{background:linear-gradient(to top,rgba(26,99,174,.55),rgba(63,169,224,.9));}
.st-bars i.hot{
  background:linear-gradient(to top,rgba(140,68,35,.6),var(--ember));
  box-shadow:0 0 14px rgba(255,138,76,.45);
}
.st-fill{position:absolute;left:0;bottom:-1px;height:1px;background:var(--caustic);box-shadow:0 0 10px var(--caustic);width:0;}
/* the line the coach actually said at this point in the session */
.scrub-said{
  margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(140,196,228,.1);
  font-family:var(--serif);font-style:italic;font-size:var(--t-lead);line-height:1.35;
  color:var(--strata-1);min-height:3.2em;
}
.scrub-said.warn{color:var(--ember);}
.st-knob{
  position:absolute;bottom:-5px;left:0;width:11px;height:11px;margin-left:-5px;border-radius:50%;
  background:var(--lane);box-shadow:0 0 0 4px rgba(79,216,232,.2),0 0 16px rgba(79,216,232,.8);
  pointer-events:none;
}

/* ============================================================
   06 · lane board
   ============================================================ */
.board{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));top:50%;
  transform:translateY(-50%) translate3d(0,var(--ry,0px),0);
  width:min(86vw,440px);
}
.rows{padding:.5rem 0;}
.lrow{
  position:relative;display:grid;grid-template-columns:2.2em 1fr auto 10px;align-items:center;gap:.8rem;
  padding:.62rem 1.15rem;font-family:var(--mono);font-size:var(--t-label);
  cursor:default;transition:background .35s var(--ease);
}
.lrow::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--caustic);
  transform:scaleY(0);transition:transform .4s var(--ease);
}
.lrow.on{background:rgba(79,216,232,.055);}
.lrow.on::before{transform:scaleY(1);}
.lrow.flag.on::before{background:var(--ember);}
.ln{color:var(--haze-dim);letter-spacing:.1em;}
.who{color:var(--haze);font-family:var(--sans);font-size:var(--t-dense);font-weight:300;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx{color:var(--haze);text-align:right;white-space:nowrap;}
.tx b{color:var(--strata-1);font-weight:400;}
.lrow.flag .tx b{color:var(--ember);}
.sig{width:6px;height:6px;border-radius:50%;justify-self:end;}
.s-ok{background:rgba(140,196,228,.3);}
.s-mid{background:var(--strata-2);box-shadow:0 0 8px rgba(63,169,224,.7);}
.s-hi{background:var(--ember);box-shadow:0 0 10px rgba(255,138,76,.9);animation:pulseE 1.9s var(--ease) infinite;}
@keyframes pulseE{50%{opacity:.4}}
.board-foot{
  padding:.85rem 1.15rem;border-top:1px solid rgba(140,196,228,.1);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;color:var(--haze-dim);
  min-height:2.9em;display:flex;align-items:center;
}

/* ============================================================
   07 · the long current
   ============================================================ */
.season{
  position:absolute;z-index:3;right:calc(var(--pad) + var(--rail-w));top:24vh;
  width:min(88vw,460px);
}
.season svg{width:100%;height:min(24vh,180px);display:block;overflow:visible;}
.season .grid line{stroke:rgba(140,196,228,.09);stroke-width:1;}
.season .s-line{fill:none;stroke:var(--strata-2);stroke-width:1.8;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(63,169,224,.55));
  stroke-dasharray:var(--l1,3000);stroke-dashoffset:var(--l1,3000);transition:stroke-dashoffset 2.2s var(--ease);}
.season .s-line2{fill:none;stroke:rgba(140,196,228,.34);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity 1s var(--ease) 1s;}
.season .s-area{fill:url(#sg);opacity:0;transition:opacity 1.3s var(--ease) .7s;}
.season .s-peak{fill:var(--ember);opacity:0;transition:opacity .6s var(--ease) 2s;
  filter:drop-shadow(0 0 8px rgba(255,138,76,.9));}
.season.drawn .s-line{stroke-dashoffset:0;}
.season.drawn .s-line2,.season.drawn .s-area,.season.drawn .s-peak{opacity:1;}
.season-key{
  display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin-top:.9rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);
}
.season-key span{display:flex;align-items:center;gap:.45rem;}
.season-key i{width:12px;height:2px;border-radius:2px;background:var(--strata-2);}
.season-key .k2{background:rgba(140,196,228,.5);}
.season-key .k3{background:var(--ember);width:6px;height:6px;border-radius:50%;}
.season-x{
  display:flex;justify-content:space-between;margin-top:.85rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim);
}

.stats{position:absolute;z-index:3;left:var(--pad);bottom:clamp(2rem,8vh,5.5rem);display:flex;gap:clamp(1.6rem,4.2vw,4rem);flex-wrap:wrap;}
.stat{opacity:0;will-change:opacity,transform;transform:translate3d(0,var(--ry,0px),0);}
.stat .n{
  font-family:var(--mono);font-size:clamp(1.7rem,3.7vw,2.9rem);font-weight:200;
  font-variant-numeric:tabular-nums;color:var(--strata-1);line-height:1;display:block;letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(2,7,12,.9),0 0 34px rgba(79,216,232,.25);
}
.stat .k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);margin-top:.75rem;display:block;}

/* ============================================================
   08 · the method — horizontal
   ============================================================ */
.hscene .pin{display:flex;flex-direction:column;justify-content:center;}
.h-head{position:absolute;top:12vh;left:var(--pad);right:var(--pad);z-index:3;max-width:1560px;margin:0 auto;}
.h-title{
  font-family:var(--serif);font-weight:400;font-size:var(--h-2);
  line-height:1.06;margin:0;max-width:16ch;letter-spacing:-.01em;
  text-shadow:0 2px 26px rgba(2,7,12,.92);
}
.htrack{
  display:flex;gap:clamp(1rem,2.2vw,2rem);padding:0 var(--pad);
  will-change:transform;margin-top:9vh;
}
.hpanel{
  flex:0 0 min(78vw,400px);padding:2rem 1.9rem 2.1rem;border-radius:18px;
  background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(140,196,228,.13);box-shadow:var(--lift),var(--drop);
  display:flex;flex-direction:column;min-height:min(52vh,420px);
}
.hpanel .hnum{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.22em;color:var(--haze-dim);
  padding-bottom:1.4rem;
}
.hpanel h3{
  font-family:var(--serif);font-weight:400;font-size:var(--h-3);
  margin:0 0 .7rem;letter-spacing:-.01em;
}
.hpanel p{margin:0 0 1.5rem;font-size:var(--t-body);line-height:1.6;font-weight:300;color:var(--haze);}
.hpanel ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:.62rem;}
.hpanel li{
  position:relative;padding-left:1.15rem;font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--haze);line-height:1.5;
}
.hpanel li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:4px;border-radius:50%;background:var(--strata-3);}
.hpanel.accent{border-color:rgba(255,138,76,.28);}
.hpanel.accent .hnum,.hpanel.accent li::before{color:var(--ember);}
.hpanel.accent li::before{background:var(--ember);}

.hbar{position:absolute;left:var(--pad);right:var(--pad);bottom:9vh;height:1px;background:rgba(140,196,228,.12);z-index:3;}
.hbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--strata-3),var(--caustic));box-shadow:0 0 10px rgba(79,216,232,.5);}

/* ============================================================
   flow sections (normal document rhythm)
   ============================================================ */
.scene.flow{padding:clamp(6rem,14vh,11rem) 0;}
.scene.flow.tight{padding:clamp(4rem,9vh,7rem) 0;}
.scene.flow::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(2,7,12,0),rgba(2,7,12,.86) 16%,rgba(2,7,12,.9) 84%,rgba(2,7,12,0));
}
.inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 var(--pad);}
.inner.narrow{max-width:860px;}
.sec-head{margin-bottom:clamp(2.4rem,5vh,4rem);}
.sec-head .display{font-size:var(--h-2);max-width:20ch;}

[data-reveal]{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}

/* ============================================================
   09 · the console
   ============================================================ */
.tabs{position:relative;display:inline-flex;gap:.25rem;padding:.3rem;margin-bottom:1.8rem;
  border:1px solid rgba(140,196,228,.14);border-radius:100px;background:rgba(8,22,34,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.tab{
  position:relative;z-index:1;padding:.55rem 1.25rem;border-radius:100px;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--haze-dim);transition:color .4s var(--ease);
}
.tab.on{color:var(--void);}
.tab-ink{
  position:absolute;top:.3rem;bottom:.3rem;left:.3rem;width:0;border-radius:100px;
  background:linear-gradient(120deg,var(--strata-0),#fff);
  transition:left .55s var(--spring),width .55s var(--spring);
}

.console{position:relative;perspective:1600px;}
.console-glow{
  position:absolute;inset:6% 10% -8%;border-radius:50%;filter:blur(70px);z-index:0;
  background:radial-gradient(closest-side,rgba(63,169,224,.28),transparent);
}
.console-frame{
  position:relative;z-index:1;border-radius:18px;overflow:hidden;
  background:var(--glass-solid);
  border:1px solid rgba(140,196,228,.16);
  box-shadow:var(--lift),0 60px 130px -50px rgba(0,0,0,.95),0 0 0 1px rgba(140,196,228,.05);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease);
}
.c-top{
  display:flex;align-items:center;gap:1rem;padding:.85rem 1.2rem;
  border-bottom:1px solid rgba(140,196,228,.1);background:rgba(6,18,28,.6);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;color:var(--haze-dim);
}
.c-title{flex:1;text-transform:uppercase;letter-spacing:.2em;}
.c-live{display:flex;align-items:center;gap:.45rem;color:var(--caustic);text-transform:uppercase;letter-spacing:.24em;}
.c-live i{width:5px;height:5px;border-radius:50%;background:var(--caustic);animation:pulseE 1.8s var(--ease) infinite;}

.c-grid{display:grid;grid-template-columns:172px 1fr 190px;min-height:400px;}
.c-side{padding:1.15rem;border-right:1px solid rgba(140,196,228,.08);}
.cs-k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);margin-bottom:.8rem;}
.c-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem;}
.c-side li{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.42rem .55rem;border-radius:6px;font-family:var(--mono);font-size:var(--t-label);color:var(--haze);
  transition:background .3s,color .3s;cursor:default;
}
.c-side li em{font-style:normal;color:var(--haze-dim);font-size:var(--t-micro);}
.c-side li:hover{background:rgba(140,196,228,.06);}
.c-side li.on{background:rgba(79,216,232,.1);color:var(--lane);}
.c-side li.alert{color:var(--ember);}
.c-side li.alert em{color:var(--ember);}
.c-side li .dotmini{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;}

.c-main{padding:1.15rem;display:flex;flex-direction:column;gap:1.1rem;min-width:0;}
.c-chart{position:relative;}
.c-chart svg{width:100%;height:170px;display:block;overflow:visible;}
.c-grid-l line{stroke:rgba(140,196,228,.07);}
.c-area{fill:url(#cg);opacity:0;transition:opacity 1.1s var(--ease) .5s;}
.c-line{fill:none;stroke:var(--caustic);stroke-width:1.6;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(79,216,232,.5));
  stroke-dasharray:var(--cl,2600);stroke-dashoffset:var(--cl,2600);transition:stroke-dashoffset 2s var(--ease);}
.console.drawn .c-line{stroke-dashoffset:0;}
.console.drawn .c-area{opacity:1;}
.c-flags circle{fill:var(--ember);opacity:0;transition:opacity .5s var(--ease);}
.console.drawn .c-flags circle{opacity:1;}
.c-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.7rem;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--haze-dim);}
.c-legend span{display:flex;align-items:center;gap:.45rem;}
.c-legend i{width:12px;height:2px;border-radius:2px;}
.c-legend .k1{background:var(--caustic);} .c-legend .k2{background:var(--strata-2);} .c-legend .k3{background:var(--ember);}

.c-stream{display:flex;flex-direction:column;gap:.55rem;max-height:190px;overflow:hidden;
  -webkit-mask:linear-gradient(to bottom,#000 74%,transparent);mask:linear-gradient(to bottom,#000 74%,transparent);}
.c-msg{
  display:grid;grid-template-columns:3.6em 1fr;gap:.8rem;align-items:baseline;
  padding:.55rem .7rem;border-radius:8px;background:rgba(140,196,228,.045);
  font-size:var(--t-dense);font-weight:300;line-height:1.55;color:var(--haze);
  animation:msgIn .7s var(--ease) both;
}
.c-msg time{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.07em;color:var(--haze-dim);}
.c-msg b{color:var(--lane);font-weight:400;}
.c-msg.alert{background:rgba(255,138,76,.08);}
.c-msg.alert b{color:var(--ember);}
@keyframes msgIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.c-rail{padding:1.15rem;border-left:1px solid rgba(140,196,228,.08);display:flex;flex-direction:column;gap:1.2rem;}
.cr-item{display:flex;flex-direction:column;gap:.42rem;}
.cr-k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--haze-dim);}
.cr-v{font-family:var(--mono);font-size:1.42rem;font-weight:200;color:var(--strata-1);letter-spacing:-.02em;}
.cr-v em{font-style:normal;color:var(--haze-dim);}
.cr-item.flagged .cr-v{color:var(--ember);}
.cr-spark{margin-top:auto;display:flex;flex-direction:column;gap:.5rem;}
.cr-spark svg{width:100%;height:44px;}
.cr-spark .sp{fill:none;stroke:var(--strata-2);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.8;}

/* ============================================================
   10 · automatic tracking
   ============================================================ */
/* six things the platform keeps without being asked. Numbered like the
   movements, because that is what they are — a list, not a feature wall */
.autos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.auto{position:relative;padding:1.9rem 1.7rem 1.7rem;}
.auto .a-k{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;color:var(--strata-2);
  display:block;margin-bottom:1.5rem;
}
.auto h3{
  font-family:var(--serif);font-weight:400;font-size:var(--h-3);letter-spacing:-.01em;
  margin:0 0 .7rem;color:var(--lane);
}
.auto p{margin:0;font-size:var(--t-body);line-height:1.6;font-weight:300;color:var(--haze);}
.auto::after{
  content:"";position:absolute;left:1.7rem;top:0;width:26px;height:1px;
  background:linear-gradient(90deg,var(--caustic),transparent);opacity:.7;
}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.quote{padding:1.9rem 1.7rem 1.6rem;display:flex;flex-direction:column;margin:0;}
.quote blockquote{
  margin:0 0 1.6rem;font-family:var(--serif);font-size:var(--t-lead);
  line-height:1.42;color:var(--lane);
}
.quote blockquote::before{
  content:"\201C";color:var(--strata-3);float:left;
  font-size:2.4em;line-height:.78;margin:.04em .1em 0 -.06em;
}
.quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.28rem;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;}
.quote figcaption b{font-weight:400;color:var(--strata-2);}
.quote figcaption span{color:var(--haze-dim);}

.marquee{
  margin-top:clamp(2.5rem,6vh,4.5rem);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mq{display:flex;gap:3.4rem;width:max-content;animation:mqRun 42s linear infinite;}
.mq span{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--haze-dim);white-space:nowrap;display:flex;align-items:center;gap:3.4rem;
}
.mq span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--strata-3);}
@keyframes mqRun{to{transform:translateX(-50%)}}

/* ============================================================
   11 · access
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start;}
.tier{padding:2rem 1.8rem 1.9rem;display:flex;flex-direction:column;}
.tier h3{font-family:var(--serif);font-weight:400;font-size:var(--h-3);margin:0 0 .3rem;letter-spacing:-.01em;}
.t-sub{margin:0 0 1.5rem;font-size:var(--t-dense);font-weight:300;color:var(--haze);}
.t-price{padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid rgba(140,196,228,.1);}
.t-price span{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--strata-2);}
.tier ul{list-style:none;margin:0 0 1.9rem;padding:0;display:flex;flex-direction:column;gap:.8rem;}
.tier li{position:relative;padding-left:1.5rem;font-size:var(--t-dense);font-weight:300;line-height:1.55;color:var(--haze);}
.tier li::before{
  content:"";position:absolute;left:0;top:.42em;width:8px;height:5px;
  border-left:1px solid var(--caustic);border-bottom:1px solid var(--caustic);transform:rotate(-45deg);
}
.t-cta{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.2rem;border:1px solid rgba(140,196,228,.2);border-radius:3px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--haze);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.t-cta i{font-style:normal;transition:transform .4s var(--ease);}
.t-cta:hover{color:var(--lane);border-color:var(--caustic);background:rgba(79,216,232,.08);}
.t-cta:hover i{transform:translateX(4px);}
.t-cta.hi{background:linear-gradient(120deg,var(--strata-0),#fff);color:var(--void);border-color:transparent;}
.t-cta.hi:hover{box-shadow:0 16px 44px -18px rgba(79,216,232,.8);}
.tier.feature{border-color:transparent;}
.tier.feature::before{
  background:linear-gradient(150deg,rgba(79,216,232,.55),rgba(140,196,228,.08) 40%,rgba(79,216,232,.35));
}
.t-badge{
  position:absolute;top:1.15rem;right:1.15rem;padding:.3rem .65rem;border-radius:100px;
  background:rgba(79,216,232,.14);color:var(--caustic);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
}

/* ============================================================
   12 · questions
   ============================================================ */
.faq{border-top:1px solid rgba(140,196,228,.1);}
.fq{border-bottom:1px solid rgba(140,196,228,.1);}
.fq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.5rem 0;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:clamp(1.08rem,1.9vw,1.42rem);color:var(--haze);
  transition:color .4s var(--ease);
}
.fq-q:hover,.fq.open .fq-q{color:var(--lane);}
.fq-q i{
  position:relative;flex:none;width:13px;height:13px;
}
.fq-q i::before,.fq-q i::after{
  content:"";position:absolute;background:var(--strata-2);transition:transform .45s var(--ease),background .4s;
}
.fq-q i::before{left:0;right:0;top:6px;height:1px;}
.fq-q i::after{top:0;bottom:0;left:6px;width:1px;}
.fq.open .fq-q i::after{transform:scaleY(0);}
.fq.open .fq-q i::before{background:var(--caustic);}
/* visibility flips in at the start of the open and out at the end of the
   close, which keeps collapsed answers out of the accessibility tree */
.fq-a{height:0;overflow:hidden;visibility:hidden;transition:height .55s var(--ease),visibility .55s;}
.fq.open .fq-a{visibility:visible;}
.fq-a p{
  margin:0 0 1.6rem;max-width:62ch;font-size:var(--t-body);line-height:1.6;font-weight:300;color:var(--haze);
}

/* ============================================================
   13 · surface + footer
   ============================================================ */
.final{display:flex;flex-direction:column;align-items:center;width:100%;}
#s13 .wrap{align-items:center;justify-content:center;}

.signup{position:relative;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.6rem;width:min(94vw,540px);}
.signup input{
  flex:1 1 250px;min-width:0;padding:1.05rem 1.2rem;border-radius:3px;
  background:rgba(8,22,34,.6);border:1px solid rgba(140,196,228,.2);color:var(--lane);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-family:var(--mono);font-size:1rem;letter-spacing:.04em;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.signup input::placeholder{color:var(--haze-dim);}
.signup input:focus{outline:none;border-color:var(--caustic);background:rgba(10,30,46,.7);}
.signup button{
  position:relative;overflow:hidden;padding:1.05rem 1.9rem;border-radius:3px;cursor:pointer;
  background:linear-gradient(120deg,var(--strata-0),#fff 55%,var(--strata-0));color:var(--void);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;
  box-shadow:0 14px 44px -18px rgba(79,216,232,.7);
  transition:transform .5s var(--spring),box-shadow .5s var(--ease);
}
.signup button span{display:flex;align-items:center;gap:.8rem;}
.signup button i{font-style:normal;transition:transform .45s var(--ease);}
.signup button:hover i{transform:translateX(4px);}
.signup-msg{
  flex:1 0 100%;margin:.4rem 0 0;min-height:1.2em;text-align:center;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--caustic);
  opacity:0;transition:opacity .4s var(--ease);
}
.signup-msg.show{opacity:1;}
.signup-msg.err{color:var(--ember);}

.foot{
  position:relative;z-index:10;padding:0 var(--pad) 1.6rem;
  background:linear-gradient(to top,rgba(2,7,12,.99) 55%,rgba(2,7,12,.72));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.foot-top{
  display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:space-between;
  padding:2.4rem 0 2rem;border-bottom:1px solid rgba(140,196,228,.09);
  max-width:1320px;margin:0 auto;
}
.foot-brand{display:flex;flex-direction:column;gap:1rem;}
.foot-brand .mark{width:64px;}
.foot-brand p{margin:0;font-size:var(--t-dense);line-height:1.6;font-weight:300;color:var(--haze);}
.foot-cols{display:flex;gap:clamp(2rem,5vw,4.5rem);}
.foot-cols div{display:flex;flex-direction:column;gap:.62rem;}
.foot-cols h4{
  margin:0 0 .3rem;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--haze-dim);font-weight:400;
}
.foot-cols a{font-size:var(--t-dense);font-weight:300;color:var(--haze);transition:color .3s;}
.foot-cols a:hover{color:var(--lane);}
.foot-bot{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.2rem 0 0;max-width:1320px;margin:0 auto;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--haze-dim);
}
.foot-mid{color:var(--strata-3);}

/* ============================================================
   responsive
   ============================================================ */
/* below either of these there is no room for both the hero stack and the
   scroll cue, and on a phone the cue is the more expendable of the two */
@media (max-height:680px),(max-width:640px){
  .hint{display:none;}
}
@media (max-width:1180px){
  .c-grid{grid-template-columns:150px 1fr;}
  .c-rail{display:none;}
}
@media (max-width:1020px){
  .quotes,.tiers{grid-template-columns:1fr;}
  .autos{grid-template-columns:repeat(2,1fr);}
  .tier{max-width:520px;}
}
@media (max-width:680px){
  .autos{grid-template-columns:1fr;}
}
/* Not enough width for copy + panel + rail: the pinned scenes go to one
   column — copy up top, a single surface anchored to the bottom. */
@media (max-width:1250px){
  #s2 .wrap,#s4 .wrap,#s5 .wrap,#s6 .wrap{
    justify-content:flex-start;padding-top:13vh;
  }
  .deck,.telemetry,.note,.board,.lossbox,.scrub{
    left:var(--pad);right:calc(var(--pad) + var(--rail-w));width:auto;
    top:auto;bottom:clamp(1.4rem,5vh,3rem);
    transform:translate3d(0,var(--ry,0px),0);
  }
  /* one surface per scene, so nothing has to share the bottom edge.
     Every pinned scene keeps exactly one, or the film reads as an empty
     background for the length of a whole scroll. */
  #s4 .note,#s5 .deck{display:none;}
  #s7 .season{left:var(--pad);right:calc(var(--pad) + var(--rail-w));width:auto;
              top:auto;bottom:clamp(1.4rem,5vh,3rem);}
  #s7 .stats{bottom:calc(24vh + 7rem);}
  /* the counter panel is full-width here, so its figures run across it */
  .loss-stats{flex-direction:row;flex-wrap:wrap;gap:1rem clamp(1.4rem,4vw,3rem);margin-top:1.2rem;padding-top:1.1rem;}
  .loss-stats .stat{flex-direction:column;align-items:flex-start;gap:.3rem;max-width:22ch;}
  .loss-stats .stat .n{font-size:1.3rem;}
  .telemetry .wave{height:64px;}
  .telemetry .metrics{gap:.8rem;}
  /* the panel spans the full column here, so a metric fits on one line again */
  .metric{grid-template-columns:9.5em 1fr 7em;grid-template-areas:"k v d" "b b b";align-items:center;gap:.45rem .9rem;}
  .metric .m-b{margin-top:.15rem;}
  .lrow{padding:.5rem 1.15rem;}
}

@media (max-width:900px){
  :root{--rail-w:0px;}
  .rail,.topnav{display:none;}
  .burger{display:block;}
  .act{display:none;}
  .stats{right:var(--pad);}
  .c-grid{grid-template-columns:1fr;}
  .c-side{display:none;}
  .foot-top{flex-direction:column;}
}
@media (max-width:640px){
  .chrome{padding:1rem 1.1rem;}
  /* the scale is fluid, so nothing here restates a size — these are the
     spacing and layout changes the narrow column actually needs */
  .body{margin-top:1.35rem;}
  .eyebrow{margin-bottom:1.25rem;letter-spacing:.2em;}
  .hero .row{margin-top:1.9rem;}
  .eyebrow.badge{padding:.55rem 1.05rem .55rem .9rem;gap:.6rem;letter-spacing:.2em;}
  .pillars{grid-template-columns:1fr;gap:1.4rem;margin-top:2rem;padding-top:1.7rem;}
  .pillars p{max-width:none;}
  .ticks{margin-top:1.9rem;gap:1rem;}
  .stats{gap:1.4rem;}
  .card p{font-size:var(--t-dense);}
  .chips{bottom:10vh;gap:.5rem;}
  .chip{padding:.5rem .8rem;letter-spacing:.1em;}
  .scrub-read{grid-template-columns:repeat(2,1fr);}
  /* too narrow for a label and a value on one line — back to the stack */
  .metric{grid-template-columns:1fr auto;grid-template-areas:"k d" "v v" "b b";align-items:baseline;gap:.28rem .8rem;}
  .metric .m-b{margin-top:.45rem;}
  /* the name is the point of this board now, so the readout goes instead */
  .lrow{grid-template-columns:2em 1fr 10px;font-size:var(--t-micro);padding:.5rem .8rem;}
  .tx{display:none;}
  .scrub-said{min-height:2.8em;}
  /* a phone screen has to hold copy and a panel in one column, so the pinned
     scenes start higher than they do on a desktop */
  .wrap.top,#s2 .wrap,#s4 .wrap,#s5 .wrap,#s6 .wrap{padding-top:10vh;}
  .pull{margin-top:1.2rem;}
  .loss-n{margin:.35rem 0 .6rem;}
  .loss-f{margin-top:.6rem;}
  .loss-stats{margin-top:.9rem;padding-top:.9rem;gap:.75rem 1.4rem;}
  .loss-stats .stat .n{font-size:1.2rem;}
  .hpanel{flex-basis:82vw;padding:1.6rem 1.4rem;min-height:auto;}
  .h-head{top:9vh;}
  .htrack{margin-top:14vh;}
  .foot-cols{flex-wrap:wrap;gap:1.6rem 2.4rem;}
}

/* Height, not width, is what runs out in the pinned scenes: the copy starts
   higher and the bottom panels give back what the larger type took. Declared
   after the width queries so it wins on a short, narrow screen. */
@media (max-height:820px){
  .wrap.top,#s2 .wrap,#s4 .wrap,#s5 .wrap,#s6 .wrap,#s7 .wrap{padding-top:8.5vh;}
  .body{margin-top:1.3rem;}
  .pull{margin-top:1.2rem;}
  .loss-n{margin:.35rem 0 .6rem;}
  .loss-stats{margin-top:1rem;padding-top:.95rem;gap:.7rem 1.4rem;}
  .board .rows{padding:.2rem 0;}
  .lrow{padding-top:.42rem;padding-bottom:.42rem;}
}

/* ============================================================
   reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hint i,.grain,.mq,.cta::after,.spark,.pulse,.s-hi,.c-live i,
  .eyebrow.badge .dot,.aurora::before,.aurora::after{animation:none !important;}
  .preWord span{animation:none;opacity:1;transform:none;}
  .cur,.cur-dot{display:none;}
  .e1,.e2,.e3,.e4,.e5,.e6{opacity:1;animation:none !important;}
  .ready .e2 .i{animation:none !important;opacity:1;transform:none;}
  [data-reveal]{opacity:1;transform:none;}
  .curtain{display:none;}

  /* charts arrive drawn rather than drawing themselves */
  .wave-line,.s-line,.c-line{stroke-dasharray:none !important;stroke-dashoffset:0 !important;}
  .wave-area,.s-area,.s-line2,.s-peak,.c-area,.c-flags circle,.metric{opacity:1 !important;}
  .metric{transform:none !important;}
  .m-b b{width:var(--w) !important;}
  .c-msg{animation:none !important;}
  .wave-line,.s-line,.c-line,.wave-area,.s-area,.s-line2,.s-peak,
  .c-area,.c-flags circle,.metric,.m-b b,.tab-ink{transition:none !important;}
}