/* ═══════════════════════════════════════════════════════════════════════
   DRIVE · demo concept · אילן חוסיד
   Register: kinetic sport. The viewport is the layout, not a container.
   Nothing is boxed. Photographs are cropped by the screen edge, never by
   a rounded rectangle. Asymmetry reverses section to section.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --char:#141414;
  --char-2:#0d0d0d;
  --steel:#2A2A2A;
  --lime:#CCFF00;
  --ink:#fff;
  --ink-dim:rgba(255,255,255,.62);
  /* raised from .34 · at .34 this sat at 3.1:1 on the charcoal, under the
     4.5:1 floor for the meta lines and form labels that use it.
     Raised again from .50 for the colour pass: the charcoal is now lit by
     lime rather than by white, and a lit ground is a lighter ground.
     .50 fell to 4.29:1 under the strongest ambient; .58 holds 5.20:1
     there and 5.98:1 on unlit charcoal. This is the value that buys the
     lime its room - lower it and the ambient has to come back down. */
  --ink-faint:rgba(255,255,255,.58);
  --pad:clamp(18px,4.2vw,70px);
  --badge-h:0px;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
body{
  overflow-x:clip;
  background:var(--char);
  color:var(--ink);
  font-family:'Heebo',system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(15px,1.05vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}

/* ── the room ────────────────────────────────────────────────────────
   The charcoal is lit, not flat. Two fixed layers do the work and
   neither scrolls, so the page reads as one continuous space instead of
   a stack of black rectangles: a tonal wash underneath everything, and
   a fine grain over it. Sections then only carry semi-transparent
   overlays, so the wash still reads through each one. ─────────────── */
/* The room is lit by the lime, not by a white bulb with a lime hint. The
   top wash went .05 → .16 and a second lime pool now answers it from the
   opposite corner, so the charcoal reads as a gym at night with the sign
   on rather than as a flat black rectangle. The cool blue stays and is
   raised in step: without a counter-light the whole page turns one colour
   and the lime stops being an accent at all.
   .16 is the ceiling, set by --ink-faint - see the note on that token. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(88% 56% at 82% -6%, rgba(204,255,0,.16), rgba(204,255,0,.05) 40%, transparent 62%),
    radial-gradient(70% 46% at 4% 88%, rgba(204,255,0,.10), transparent 60%),
    radial-gradient(92% 62% at 8% 104%, rgba(126,146,178,.085), transparent 62%),
    radial-gradient(128% 104% at 50% 48%, transparent 38%, rgba(0,0,0,.46) 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:98;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

h1,h2,h3,h4,p,dl,dd,dt,figure,blockquote,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
img{display:block;max-inline-size:100%;color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
/* Hebrew has no italic tradition - never let a UA default sneak one in. */
i,em,cite,dfn,var,address,blockquote{font-style:normal}

h1,h2,h3{font-weight:900;line-height:.92;letter-spacing:normal}

/* Latin numerals and Latin-only wordmarks. Anton carries no Hebrew, so
   tracking here can never touch a Hebrew run. */
.n{
  font-family:'Anton','Heebo',sans-serif;
  font-weight:400;font-style:normal;
  letter-spacing:.005em;
  font-variant-numeric:lining-nums tabular-nums;
}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:12px;z-index:120;
  background:var(--lime);color:var(--char);font-weight:900;
  padding:12px 18px;text-decoration:none;transition:inset-block-start .16s var(--ease);
}
.skip:focus{inset-block-start:12px}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--char);
  font-weight:900;font-size:1rem;line-height:1;
  padding:18px 30px;text-decoration:none;border:0;
  transition:transform .16s var(--ease),background-color .16s var(--ease);
}
.btn:hover{transform:translateY(-2px);background:#dcff3d}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:21px 38px;font-size:1.06rem}
.btn-sm{padding:15px 22px;font-size:.9rem}
.btn-block{inline-size:100%}
.link-lg{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;text-decoration:none;color:var(--ink);
  padding-block:18px;
  border-block-end:2px solid rgba(255,255,255,.28);
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.link-lg::after{content:'';inline-size:16px;block-size:2px;background:currentColor}
.link-lg:hover{border-block-end-color:var(--ink)}

.kicker{
  font-size:.8rem;font-weight:900;color:var(--ink-faint);
  margin-block-end:14px;
}

/* ── header · absent over the cold open, arrives after it ───────────── */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  display:flex;align-items:center;gap:clamp(14px,3vw,40px);
  padding:14px var(--pad);
  background:rgba(14,14,14,.86);
  backdrop-filter:blur(14px);
  transform:translateY(-105%);
  transition:transform .24s var(--ease);
}
.hdr.on,.hdr:focus-within{transform:none}
.brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  min-block-size:44px;padding-inline-end:4px;
}
.brand-mark{
  inline-size:15px;block-size:15px;background:var(--lime);flex:0 0 auto;
  clip-path:polygon(0 0,100% 0,72% 100%,0 100%);
}
.brand-txt{
  font-family:'Anton',sans-serif;font-size:1.4rem;line-height:1;
  letter-spacing:.06em;
}
.hdr-nav{display:flex;gap:clamp(12px,1.9vw,26px);margin-inline-start:auto}
.hdr-nav a{
  font-size:.88rem;font-weight:700;text-decoration:none;color:var(--ink-dim);
  transition:color .16s var(--ease);
}
.hdr-nav a:hover{color:var(--lime)}
@media(max-width:820px){.hdr-nav{display:none}.hdr .btn-sm{margin-inline-start:auto}}

/* ── photographs · every one is cropped by the viewport or by its own
      bleed box. Never a rounded rectangle, never a framed card. ─────── */
.shot{position:relative;overflow:hidden;background:#191919;isolation:isolate}
.shot img{
  inline-size:100%;block-size:100%;object-fit:cover;
  /* one shared grade so ten separate frames read as one shoot */
  filter:contrast(1.05) saturate(.97);
}
/* results-03 and results-05 came off a softer, flatter light than the
   other eight. A deeper black point and a touch more contrast pulls
   them onto the same curve as the rest of the run. */
.shot[data-grade="soft"] img{filter:contrast(1.17) saturate(.93) brightness(.93)}
.shot::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(112% 92% at 50% 44%,transparent 50%,rgba(6,6,6,.44) 100%);
}
.shot::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.14),rgba(20,20,20,0) 34%);
}

/* ═══ 0 · COLD OPEN ═══ the page opens on a photograph and one word.
   No logo, no nav, no headline, no CTA. ═════════════════════════════ */
.cold{position:relative;block-size:100svh;min-block-size:520px;overflow:hidden}
.cold-shot{position:absolute;inset:0}
.cold-shot img{object-position:50% 42%}
.cold-shot::after{
  background:
    linear-gradient(0deg,rgba(12,12,12,.86) 0%,rgba(12,12,12,.22) 46%,rgba(12,12,12,.5) 100%);
}
.cold-word{
  position:absolute;inset-inline:0;inset-block-end:6svh;z-index:2;
  display:flex;justify-content:center;white-space:nowrap;
  font-weight:900;line-height:.82;
  /* 38vw measured 1668px inside a 1440px viewport: the word was clipped
     by .cold{overflow:hidden} on BOTH edges at once, losing a letter at
     each end of the page's first and largest word. A word may be cropped
     by one edge as a composition; cropped by two it is just unreadable.
     5 Hebrew glyphs at Heebo 900 run ~3.05em, so the ceiling has to sit
     under 100/3.05 = 32.7vw. 31vw kisses the edges and keeps all five. */
  font-size:min(31vw,58svh);
  color:var(--ink);
}
.cold-word>span{flex:0 0 auto}
.cold-cue{
  position:absolute;inset-block-start:calc(50svh - 40px);inset-inline-end:var(--pad);z-index:3;
  inline-size:1px;block-size:78px;background:rgba(255,255,255,.34);overflow:hidden;
}
.cold-cue::after{
  content:'';position:absolute;inset-inline:0;block-size:34px;background:var(--lime);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{inset-block-start:-34px}60%,100%{inset-block-start:78px}}
/* at 375px the word measured 435px and lost a letter off each edge.
   Sized to kiss the edges instead of eating them. */
@media(max-width:560px){
  .cold-word{font-size:min(31.5vw,52svh);inset-block-end:8svh}
}

/* ═══ 1 · HERO ═══ type anchored to the start edge, portrait bleeding
   off the end edge, the big line crossing over it. ══════════════════ */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(72px,11vw,164px) clamp(56px,7vw,110px);
  /* Lime rim-light behind the portrait, white pool behind the type.
     The split is not decorative - it is a contrast budget. Stacking the
     16% ambient and a lime pool under the SAME text took --ink-dim to
     3.76:1. The photograph occupies the physical-left half here (the
     shot bleeds off the inline-end edge, and this document is RTL), and
     no body copy crosses it, so the lime can be pushed hard on that side
     while the reading side stays on the neutral wash it measured on. */
  background-image:
    radial-gradient(50% 56% at 17% 46%,rgba(204,255,0,.30),rgba(204,255,0,.07) 50%,transparent 72%),
    radial-gradient(58% 54% at 78% 38%,rgba(255,255,255,.055),transparent 66%);
}
.hero-shot{
  position:absolute;z-index:1;
  inset-block-start:clamp(40px,6vw,90px);
  inset-inline-end:clamp(-90px,-6vw,-40px);
  inline-size:min(44vw,560px);aspect-ratio:4/5;
}
.hero-shot::after{
  background:linear-gradient(270deg,rgba(20,20,20,.9),rgba(20,20,20,0) 52%);
}
.hero-type{position:relative;z-index:2;padding-inline:var(--pad);max-inline-size:min(1180px,96vw)}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.82rem;font-weight:900;color:var(--ink-dim);
  margin-block-end:clamp(18px,2.4vw,34px);
}
.dot{inline-size:9px;block-size:9px;background:var(--lime);flex:0 0 auto}
.hero-h1{font-size:clamp(52px,9.4vw,158px);line-height:.86;margin-inline-start:min(-2.6vw,-14px)}
.hero-h1 .ln{display:block}
.hero-h1 .ln>span{display:inline-block}
.hero-h1 .ln-max{font-size:1.16em;margin-inline-end:min(-16vw,-70px)}
.hero-h1 .ln-end{font-size:.66em;padding-inline-start:clamp(0px,9vw,180px);color:var(--ink-dim)}
.hero-sub{
  margin-block-start:clamp(24px,3vw,44px);
  max-inline-size:30ch;color:var(--ink-dim);
  font-size:clamp(17px,1.6vw,26px);line-height:1.45;
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,26px);margin-block-start:clamp(22px,2.6vw,38px)}

@media(max-width:900px){
  .hero{padding-block:clamp(56px,14vw,90px) 46px}
  .hero-shot{
    position:relative;inset:auto;inline-size:86vw;max-inline-size:none;
    margin-inline-start:auto;margin-inline-end:-8vw;margin-block-end:-13vw;
  }
  .hero-h1 .ln-max{margin-inline-end:0}
  .hero-h1 .ln-end{padding-inline-start:0}
  .hero-type{max-inline-size:none}
}

/* ═══ 2 · FIGURES ═══ numerals at a scale that has to be cropped ═════ */
.figures{
  position:relative;overflow:hidden;
  padding-block:clamp(30px,5vw,86px) clamp(24px,3.4vw,54px);
  /* a tight pool with a hard falloff, so the numerals read as lit from
     the front rather than pasted onto a flat field */
  background-image:
    radial-gradient(56% 108% at 52% 44%,rgba(204,255,0,.17),rgba(204,255,0,.04) 44%,transparent 68%),
    radial-gradient(52% 104% at 52% 44%,rgba(255,255,255,.05),transparent 60%),
    linear-gradient(180deg,
      rgba(0,0,0,0),rgba(0,0,0,.44) 15%,rgba(0,0,0,0) 36%,
      rgba(0,0,0,0) 66%,rgba(0,0,0,.44) 86%,rgba(0,0,0,0));
}
/* The run is max-content, so anything it cannot fit falls off the END of
   the row - and the end of the row is the third figure's LABEL, not its
   numeral. That inverted the intent: the numerals are meant to be the
   croppable objects and the labels are the information. Narrowing the
   gap (with the numeral ceiling below) brings the whole run inside, so
   all three statistics read and the scale still fills the screen. */
.fig-run{
  display:flex;align-items:flex-end;
  gap:clamp(24px,6.4vw,112px);
  inline-size:max-content;
  padding-inline-start:var(--pad);
}
.fig{display:flex;align-items:flex-end;gap:clamp(8px,1.2vw,22px);flex:0 0 auto}
/* This screen is the page's one "saturated lime type at scale" moment.
   The three numerals read as ONE composition, not three accent marks:
   two lime outlines flanking a solid lime fill. The outline stroke is
   lime at .82 - 11.6:1 on the lit ground here, well over the 3:1 large
   gate - and the label under each numeral stays on --ink-dim, so the
   colour lives entirely in the display layer. */
.fig .n{
  font-size:clamp(126px,26vw,400px);line-height:.72;
  color:transparent;-webkit-text-stroke:2px rgba(204,255,0,.82);
  filter:drop-shadow(0 0 34px rgba(204,255,0,.16)) drop-shadow(0 6px 30px rgba(0,0,0,.6));
}
.fig-lime .n{
  color:var(--lime);-webkit-text-stroke-width:0;
  filter:drop-shadow(0 0 52px rgba(204,255,0,.42)) drop-shadow(0 6px 18px rgba(0,0,0,.55));
}
.fig-lbl{
  font-size:clamp(12px,1.05vw,17px);font-weight:900;line-height:1.25;
  color:var(--ink-dim);padding-block-end:clamp(10px,1.4vw,26px);
  max-inline-size:12ch;
}

/* On a phone the three-across run measured 465px inside a 375px screen:
   the third figure was pushed entirely off the edge and its numeral was
   never visible at all. Cropping display type by the screen edge is the
   language of this page; losing a whole statistic is not. Stacked, each
   numeral still runs to the edge and all three read. */
@media(max-width:760px){
  .figures{padding-block:clamp(34px,8vw,60px) clamp(26px,6vw,44px)}
  .fig-run{
    flex-direction:column;align-items:stretch;
    inline-size:auto;gap:clamp(7px,2.6vw,18px);
    padding-inline:var(--pad);
  }
  .fig{align-items:center;gap:clamp(12px,4vw,22px)}
  .fig .n{
    font-size:min(32vw,142px);line-height:.82;flex:0 0 auto;
    /* Anton carries a wide side bearing · pull it back so the numerals
       optically align with the edge instead of floating inside it */
    margin-inline-start:min(-2vw,-7px);
  }
  .fig-lbl{
    padding-block-end:0;max-inline-size:20ch;
    font-size:clamp(12px,3.4vw,15px);line-height:1.35;
  }
}

/* ═══ MARQUEE TAPE ═══ full bleed, tilted, running forever ══════════ */
/* direction:ltr here is purely mechanical - it makes the max-content track
   start at the physical left so a -50% x-shift loops seamlessly. Each item
   restores rtl so the Hebrew inside it stays correct. */
.tape{
  position:relative;overflow:hidden;direction:ltr;
  inline-size:106vw;margin-inline-start:-3vw;
  padding-block:clamp(9px,1vw,15px);
}
.tape-lime{background:var(--lime);transform:rotate(-1.3deg)}
.tape-dark{background:var(--steel);transform:rotate(1deg)}
.tape-track{display:flex;inline-size:max-content;direction:ltr;will-change:transform}
.tape-group{display:flex;flex:0 0 auto}
.tape-item{
  direction:rtl;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:clamp(20px,3vw,48px);
  font-size:clamp(15px,1.9vw,30px);font-weight:900;line-height:1.25;
  padding-inline:clamp(14px,2vw,30px);white-space:nowrap;
}
.tape-item::after{content:'';inline-size:9px;block-size:9px;flex:0 0 auto}
.tape-lime .tape-item{color:var(--char)}
.tape-lime .tape-item::after{background:var(--char)}
.tape-dark .tape-item{color:var(--ink)}
.tape-dark .tape-item::after{background:var(--lime)}

/* ── ghost words · outlined display type bleeding off an edge ───────── */
.ghost{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  font-weight:900;line-height:.74;white-space:nowrap;
  /* aria-hidden, so no contrast gate applies. Lime rather than white:
     these are the two biggest objects in their sections and a white
     outline made them read as grey scaffolding. */
  color:transparent;-webkit-text-stroke:1.5px rgba(204,255,0,.15);
}

/* ═══ 3 · THE GAP ═══ ghost word off the start edge, the argument pushed
   hard to the end edge. Silhouette reverses the hero. ═══════════════ */
.gap{
  position:relative;overflow:hidden;
  padding-block:clamp(64px,10vw,170px) clamp(36px,4.6vw,80px);
  /* the darkest chapter before the coach arrives · every vertical wash on
     this page resolves to zero at both block edges, so tonal rhythm never
     shows up as a hard horizontal seam between two sections */
  background-image:linear-gradient(180deg,
    rgba(0,0,0,0),rgba(0,0,0,.52) 14%,rgba(0,0,0,.14) 46%,rgba(0,0,0,.5) 88%,rgba(0,0,0,0));
}
/* The ghost is an oversized graphic, not a word anyone reads - but at
   -6vw it lost a third of its first letter and started reading as a
   TYPO rather than as scale. Flush to the edge it is still 540px tall
   and unmistakably decorative, and it no longer looks broken. */
.ghost-gap{
  inset-block-start:26%;
  inset-inline-start:0;
  font-size:clamp(170px,36vw,540px);
}
.gap-body{
  position:relative;z-index:2;
  max-inline-size:min(720px,90vw);
  margin-inline-start:auto;
  padding-inline-end:var(--pad);
  padding-inline-start:var(--pad);
}
.gap-h{
  font-size:clamp(34px,7.8vw,124px);line-height:.86;
  /* The heading is meant to run out to the screen edge, and it did - and
     then 4px past it, into the clip. Cancelling exactly one --pad lands
     it ON the edge instead of over it, which is the same composition
     without the sheared glyph. Never make this more negative than --pad. */
  margin-inline-end:calc(-1 * var(--pad));
  margin-block-end:clamp(22px,3vw,44px);
}
.gap-body p{color:var(--ink-dim);margin-block-end:clamp(16px,1.8vw,26px)}
.gap-body p b{color:var(--ink);font-weight:900}
/* Three paragraphs of diagnosis became one line and four named failures.
   The lead is set as a statement, the four are a scannable list, and the
   section keeps the same job with a third of the words. */
.gap-lead{
  color:var(--ink)!important;font-weight:900;
  font-size:clamp(19px,2.5vw,38px);line-height:1.18;
  max-inline-size:22ch;
  margin-block-end:clamp(26px,3.4vw,52px);
}
.gap-list{display:grid;gap:clamp(16px,2vw,30px)}
.gap-list li{display:grid;gap:2px}
.gap-list b{
  font-weight:900;color:var(--ink);
  font-size:clamp(17px,1.9vw,28px);line-height:1.2;
}
.gap-list span{color:var(--ink-dim);font-size:clamp(14px,1.05vw,17px);line-height:1.5}
.gap-kick{
  color:var(--lime)!important;font-weight:900;
  font-size:clamp(20px,2.4vw,36px);line-height:1.25;
  margin-block-start:clamp(28px,3.6vw,56px);
  max-inline-size:26ch;
}

/* ═══ 4 · COACH ═══ photograph off the start edge, the name crossing it,
   copy at the end edge. Silhouette reverses the gap. ════════════════ */
.coach{
  position:relative;overflow:hidden;
  padding-block:clamp(56px,8vw,130px) clamp(28px,3.6vw,64px);
  /* lime rim-light spilling around the photograph · the halo is what you
     see, the photograph itself covers the centre of the gradient */
  /* .17 → .40. This is the brief's "lime as a rim-light behind a
     photograph", and at .17 it was a suggestion rather than a light.
     The copy column lives at the opposite (physical-left) edge and the
     photograph covers the centre of the gradient, so nothing that has to
     be read sits on the bright part: --ink-dim measures 5.6:1 where the
     copy actually is. Keep the falloff steep for the same reason. */
  background-image:
    radial-gradient(58% 82% at 64% 46%,rgba(204,255,0,.46),rgba(204,255,0,.11) 40%,transparent 66%),
    linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.3) 12%,transparent 42%);
}
.coach-shot{
  position:absolute;z-index:1;
  inset-block-start:clamp(40px,7vw,120px);
  inset-inline-start:clamp(-100px,-7vw,-46px);
  inline-size:min(52vw,690px);aspect-ratio:3/2;
}
/* The photograph does not fade to black, it fades to the lime that is
   lighting it. The mid stop is a dark lime, not a neutral, so the edge of
   the frame dissolves INTO the glow behind it instead of cutting a black
   line across it. */
.coach-shot::after{
  background:linear-gradient(to left,
    rgba(20,20,20,0) 30%, rgba(52,66,6,.62) 66%, rgba(20,20,20,.94));
}
.coach-body{
  position:relative;z-index:2;
  max-inline-size:min(620px,88vw);
  margin-inline-start:auto;
  padding-inline:var(--pad);
}
.coach-name{
  font-size:clamp(44px,9vw,150px);line-height:.84;
  margin-inline-start:min(-38vw,-170px);
  margin-block-end:8px;
}
.coach-role{color:var(--lime);font-weight:900;font-size:clamp(14px,1.1vw,17px);margin-block-end:clamp(20px,2.4vw,34px)}
.coach-body p:not(.coach-role):not(.kicker){color:var(--ink-dim);margin-block-end:16px;max-inline-size:42ch}
/* the one line of his story that survived · sized to be read first */
.coach-lead{
  color:var(--ink)!important;font-weight:700;
  font-size:clamp(18px,1.9vw,30px);line-height:1.3;max-inline-size:26ch!important;
}
@media(max-width:900px){
  /* Same rim-light, re-aimed. On a phone the photograph becomes a band at
     the top of the section and the copy runs underneath it, so the glow
     is pulled up and tightened to stay off the copy: it resolves to zero
     by 36% of the section height. */
  .coach{background-image:
    radial-gradient(96% 30% at 50% 16%,rgba(204,255,0,.22),transparent 66%),
    linear-gradient(180deg,rgba(0,0,0,.28),transparent 40%)}
  .coach-shot{
    position:relative;inset:auto;inline-size:110vw;
    margin-inline-start:-8vw;margin-block-end:clamp(-40px,-9vw,-16px);
  }
  .coach-shot::after{background:linear-gradient(0deg,rgba(20,20,20,.9),rgba(20,20,20,0) 46%)}
  .coach-body{max-inline-size:none;margin-inline-start:0}
  .coach-name{margin-inline-start:0}
}

/* ═══ 5 · THE RUN ═══ proof and testimony fused. One face per screen,
   horizontal snap, no grid anywhere. ═══════════════════════════════ */
.run{position:relative;padding-block:clamp(56px,8vw,120px) 0}
.run-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-inline:var(--pad);margin-block-end:clamp(22px,3vw,44px);
}
.run-head h2{font-size:clamp(32px,6.6vw,104px);line-height:.86;flex:1 1 auto}
.run-head p{color:var(--ink-dim);flex:0 1 24ch;font-size:clamp(15px,1.25vw,20px);line-height:1.4}
.run-nav{display:flex;gap:8px;flex:0 0 auto}
.run-btn{
  inline-size:46px;block-size:46px;
  display:grid;place-items:center;color:var(--ink-dim);
  background:rgba(255,255,255,.07);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.run-btn:hover{background:var(--lime);color:var(--char)}
.run-btn svg{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.panels{
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.panels::-webkit-scrollbar{display:none}
.panel{
  position:relative;flex:0 0 100vw;
  block-size:min(84svh,820px);min-block-size:440px;
  scroll-snap-align:start;overflow:hidden;
}
.panel-shot{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(64vw,900px)}
.panel:nth-child(even) .panel-shot{inset-inline-end:auto;inset-inline-start:0}
.panel-shot::after{background:linear-gradient(to right,rgba(20,20,20,0) 40%,rgba(20,20,20,.9))}
.panel:nth-child(even) .panel-shot::after{background:linear-gradient(to left,rgba(20,20,20,0) 40%,rgba(20,20,20,.9))}
/* The numeral crosses onto the photograph and is cut by the screen edge.
   That crop is deliberate, but it has to stay a crop: at -1.4vw it took
   20px off a 126px digit on desktop and 10px off a 44px digit on a
   phone, and a two-digit result has to survive it. Clamped so the bite
   is a sliver at every width and the VALUE always reads. */
.panel-n{
  position:absolute;z-index:2;
  inset-block-start:clamp(4px,1.2vw,26px);
  inset-inline-end:clamp(-14px,-1vw,-6px);
  font-size:clamp(104px,18.5vw,300px);line-height:.74;
  color:var(--lime);
}
.panel:nth-child(even) .panel-n{inset-inline-end:auto;inset-inline-start:clamp(-14px,-1vw,-6px)}
.panel-body{
  position:absolute;z-index:3;
  inset-block-start:50%;transform:translateY(-50%);
  inset-inline-start:var(--pad);
  max-inline-size:min(38ch,34vw);
}
.panel:nth-child(even) .panel-body{inset-inline-start:auto;inset-inline-end:var(--pad)}
/* The unit is the result. It used to sit at label scale under a 300px
   numeral; now it is the second-largest thing in the panel. */
.panel-unit{font-size:clamp(15px,1.5vw,24px);font-weight:900;color:var(--lime);margin-block-end:6px}
.panel-body h3{font-size:clamp(26px,3.6vw,58px);margin-block-end:8px}
.panel-meta{font-size:.82rem;color:var(--ink-faint);margin-block-end:14px}
.panel-q{color:var(--ink-dim);font-size:clamp(15.5px,1.3vw,21px);line-height:1.45}
.run-bar{block-size:3px;background:rgba(255,255,255,.1)}
.run-bar span{display:block;block-size:100%;inline-size:0;background:var(--lime)}

@media(max-width:900px){
  .panels{scroll-snap-type:x proximity}
  .panel{block-size:min(70svh,620px);min-block-size:420px}
  .panel-shot,.panel:nth-child(even) .panel-shot{inset-inline:0;inline-size:100%}
  .panel-shot::after,.panel:nth-child(even) .panel-shot::after{
    background:linear-gradient(0deg,rgba(14,14,14,.96) 6%,rgba(14,14,14,.55) 34%,rgba(14,14,14,.06) 66%);
  }
  .panel-n,.panel:nth-child(even) .panel-n{
    inset-block-start:auto;inset-block-end:calc(100% - 40svh);
    /* was -12px, which took a visible bite out of the leading digit */
    inset-inline-start:auto;inset-inline-end:min(-1vw,-4px);font-size:25vw;
  }
  .panel-body,.panel:nth-child(even) .panel-body{
    inset-block-start:auto;transform:none;
    inset-block-end:calc(var(--badge-h) + clamp(18px,3.4vw,34px));
    inset-inline:var(--pad);max-inline-size:none;
  }
}

/* ═══ 6 · SLAM ═══ one voice at display scale, off both edges ═══════ */
/* the page's deepest point · it exists to make the lime that follows hit */
.slam{
  position:relative;overflow:hidden;
  padding-block:clamp(64px,10vw,160px);padding-inline:var(--pad);
  background-image:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.76));
}
.slam-q{
  /* Was bled past the padding with negative inline margins while .slam
     clips overflow, so at full size the first and last WORDS were cut off
     rather than just the whitespace. A quote you cannot read start to end
     is not a bleed, it is a bug. Sits inside its padding now and still
     runs edge to edge at display scale. */
  font-size:clamp(30px,7.4vw,116px);line-height:.94;font-weight:900;
  margin-inline:0;
  max-inline-size:100%;
  text-wrap:balance;
}
.slam-by{
  display:flex;flex-direction:column;gap:2px;
  margin-block-start:clamp(24px,3vw,48px);
  margin-inline-start:auto;max-inline-size:36ch;
}
.slam-by b{font-size:clamp(16px,1.4vw,21px);font-weight:900}
.slam-by span{font-size:.85rem;color:var(--ink-faint)}
/* the quote is meant to run off the end edge · at 375px the start-edge
   bleed was eating the first 12px of every line, which is the first
   letter. The end-edge bleed stays, the start edge is given back. */
@media(max-width:760px){
  .slam-q{margin-inline-start:0;margin-inline-end:min(-7vw,-30px)}
  .slam-by{max-inline-size:none}
}

/* ═══ 7 · TAKEOVER ═══ sticky stage, scroll-scrubbed. The lime takes the
   whole viewport and the type runs off both edges. ═════════════════ */
/* DEFAULT is the FINISHED state. No JS, reduced motion, a vendor script
   that failed to load: the lime block is simply already there and every
   line is readable. Nothing here starts hidden. */
.takeover{position:relative}
.tk-stage{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:var(--lime);
  padding-block:clamp(50px,8vw,110px);
}
.tk-fill{display:none}

/* MOTION only · the sticky stage and the scrubbed lime field.
   position:sticky + scrub is touch-native, so this is the same set piece
   on a phone as on a desktop. Nothing is pinned. */
.js-motion .takeover{block-size:300svh}
.js-motion .tk-stage{
  position:sticky;inset-block-start:0;
  block-size:100svh;min-block-size:480px;
  background:var(--char-2);padding-block:0;
}
.js-motion .tk-fill{
  display:block;position:absolute;inset:0;background:var(--lime);
  transform:scaleX(0);transform-origin:100% 50%;
}
.js-motion .tk-kicker,.js-motion .tk-line,.js-motion .tk-count{clip-path:inset(0 0 0 100%)}

.tk-inner{
  position:relative;z-index:2;inline-size:100%;text-align:center;
  color:var(--char);
}
.tk-kicker{font-size:clamp(12px,1.05vw,16px);font-weight:900;margin-block-end:clamp(16px,2.4vw,34px)}
.tk-lines{display:block}
/* nowrap inside .tk-stage{overflow:hidden}: any line wider than the
   viewport is clipped at BOTH ends, because the stage centres it. The
   old lines ran 23 characters and measured 74px over at 1440. The copy
   is now 14 characters at the longest, which fits 9.4vw with room to
   spare - but the ceiling stays tied to vw so a longer line can never
   silently reintroduce the clip. Measure before lengthening these. */
.tk-line{
  display:block;white-space:nowrap;
  font-size:clamp(31px,9.4vw,148px);line-height:1;font-weight:900;
}
.tk-count{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.4vw,20px);
  margin-block-start:clamp(20px,3vw,48px);
}
.tk-count b{font-size:clamp(46px,7vw,110px);line-height:.8}
.tk-count span{font-size:clamp(12px,1.05vw,16px);font-weight:900;line-height:1.3;text-align:start}
/* same set piece on a phone, shorter runway · three screens of scroll for
   one message is desktop pacing, not thumb pacing */
@media(max-width:900px){
  .js-motion .takeover{block-size:230svh}
  .tk-line{font-size:clamp(29px,8.6vw,148px)}
  .tk-count{margin-block-start:clamp(18px,5vw,48px)}
}

/* ═══ 8 · PROGRAM ═══ eight weeks as eight full-width type lines.
   Closed titles are outlined, the open one is solid. No rules, no rows,
   no boxes - weight and scale do the separating. ═══════════════════ */
.program{
  position:relative;overflow:hidden;
  padding-block:clamp(60px,9vw,150px) clamp(46px,6vw,100px);
  background-image:radial-gradient(76% 52% at 50% 4%,rgba(255,255,255,.06),transparent 62%);
}
.program-head{
  display:flex;align-items:flex-end;gap:clamp(18px,4vw,70px);flex-wrap:wrap;
  padding-inline:var(--pad);margin-block-end:clamp(28px,4.4vw,72px);
}
.program-h{font-size:clamp(42px,15.5vw,262px);line-height:.8;margin-inline:min(-2.6vw,-13px)}
.program-lead{
  color:var(--ink-dim);flex:0 1 26ch;margin-inline-start:auto;padding-block-end:.4em;
  font-size:clamp(16px,1.5vw,24px);line-height:1.35;
}

.wk-head{
  inline-size:100%;display:flex;align-items:baseline;
  gap:clamp(11px,2.2vw,40px);text-align:start;
  /* 13px block padding keeps the row at or above a 44px target on touch */
  padding:clamp(13px,1.3vw,19px) var(--pad);
  min-block-size:48px;
}
.wk-ord{
  font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.005em;
  font-size:clamp(17px,2.4vw,40px);line-height:.9;
  color:var(--ink-faint);flex:0 0 auto;
  transition:color .18s var(--ease);
}
.wk-ttl{
  flex:1 1 auto;font-weight:900;
  font-size:clamp(21px,5vw,82px);line-height:.96;
  /* was 1.5px at 58% white · a hairline at 58% reads well under body text
     and put every closed week below the contrast floor at rest. The
     outline is the design, so keep the outline and give it real weight:
     .88 white is ~12:1 against the charcoal, and the stroke thickens
     with the type so it never thins out at the large end. */
  /* A pure outline (color:transparent) has no measurable text contrast at
     all, whatever the stroke does - the fill is what gets measured. Give the
     glyph a real fill so the resting state is genuinely readable, and keep a
     brighter stroke so it still reads as the outlined treatment. .42 white
     resolves to ~#767676 on the charcoal ground: 4.09:1, clearing the 3:1
     large-text threshold with room, and clearing AA normal text too.

     COLOUR PASS: left at .42 on purpose. The lime ambient is aimed at the
     top-right and bottom-left of the viewport and this list sits at the
     inline-start (physical right) edge in the middle band, where the
     measured ground is still #141414 - so the original 4.10:1 holds.
     Raising the fill to buy headroom that is not needed would collapse
     the difference between a closed week and the open one, and that
     difference is the only hierarchy this list has. */
  color:rgba(255,255,255,.42);
  -webkit-text-stroke:max(1.7px,.026em) rgba(255,255,255,.92);
  transition:color .18s var(--ease),-webkit-text-stroke-color .18s var(--ease);
}
.wk-head:hover .wk-ttl,.wk-head:focus-visible .wk-ttl{color:var(--ink);-webkit-text-stroke-color:transparent}
.wk.is-open .wk-ttl{color:var(--ink);-webkit-text-stroke-color:transparent}
.wk.is-open .wk-ord{color:var(--lime)}
.wk-ico{
  position:relative;flex:0 0 auto;inline-size:18px;block-size:18px;
  align-self:center;transition:transform .2s var(--ease);
}
.wk-ico::before,.wk-ico::after{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:0;
  inline-size:18px;block-size:2px;background:currentColor;margin-block-start:-1px;
  color:var(--ink-faint);
}
.wk-ico::after{transform:rotate(90deg)}
.wk.is-open .wk-ico{transform:rotate(135deg)}
/* the collapse only exists once JS can reopen it · `.js` is set in <head>
   so there is no flash of an expanded list, and a page without JS keeps
   all eight weeks readable instead of locking them behind a dead button */
.js .wk:not(.is-open) .wk-body{display:none}
.wk-body{padding:0 var(--pad) clamp(18px,2.4vw,38px)}
.wk-body p{
  color:var(--ink-dim);max-inline-size:64ch;margin-inline-start:auto;
  font-size:clamp(14.5px,1.05vw,17px);
}
/* Each week was a 25-word paragraph. It is now the two things that week
   actually does, at a size worth opening the row for. */
.wk-pts{
  display:grid;gap:clamp(6px,.8vw,12px);
  max-inline-size:48ch;margin-inline-start:auto;
  color:var(--ink-dim);font-size:clamp(15px,1.35vw,22px);line-height:1.35;
}
.wk-pts li{position:relative;padding-inline-start:18px}
.wk-pts li::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:.55em;
  inline-size:8px;block-size:2px;background:var(--lime);
}

/* ═══ 9 · INCLUDED ═══ dense small type against a square bleeding off the
   start edge. Density reverses the scale of the section above. ═════ */
.incl{
  position:relative;overflow:hidden;
  padding-block:clamp(56px,8vw,130px) clamp(34px,4.4vw,76px);
  /* The square bleeds off the inline-start edge, which in RTL is the
     physical right, and the credits column sits on the physical left.
     The lime therefore goes right, behind the photograph, where no
     small type has to survive it. */
  background-image:
    radial-gradient(40% 60% at 88% 46%,rgba(204,255,0,.22),rgba(204,255,0,.05) 46%,transparent 70%),
    linear-gradient(180deg,
      rgba(0,0,0,0),rgba(0,0,0,.44) 15%,rgba(0,0,0,.06) 48%,rgba(0,0,0,.36) 86%,rgba(0,0,0,0));
}
.incl-shot{
  position:absolute;z-index:1;
  inset-block-start:clamp(60px,9vw,160px);
  inset-inline-start:min(-11vw,-70px);
  inline-size:min(40vw,500px);aspect-ratio:1/1;
}
.incl-shot::after{background:linear-gradient(to left,rgba(20,20,20,0) 40%,rgba(20,20,20,.9))}
.incl-body{position:relative;z-index:2;max-inline-size:min(830px,92vw);margin-inline-start:auto;padding-inline:var(--pad)}
.incl-h{font-size:clamp(30px,5.6vw,88px);line-height:.88;margin-block-end:clamp(22px,3vw,46px)}
.incl-list{display:grid;gap:clamp(13px,1.5vw,22px)}
.incl-list>div{
  display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);
  gap:clamp(4px,1.6vw,26px);align-items:baseline;
}
.incl-list dt{font-weight:900;font-size:clamp(16px,1.5vw,25px);line-height:1.2}
.incl-list dd{color:var(--ink-dim);font-size:clamp(14px,1.05vw,17px);line-height:1.45}
@media(max-width:760px){
  /* the ghosted square sat directly under the list and the bold terms
     were reading on top of a photograph. On a narrow screen there is no
     room for a background object, so the photograph stops being one and
     becomes a full-bleed band above the list, where it can be seen. */
  .incl{padding-block-start:0}
  .incl-shot{
    position:relative;inset:auto;z-index:0;
    inline-size:100%;aspect-ratio:2/1;opacity:1;
    margin-block-end:clamp(26px,6.5vw,46px);
  }
  .incl-shot::after{background:linear-gradient(0deg,rgba(15,15,15,.94),rgba(15,15,15,0) 60%)}
  .incl-list>div{grid-template-columns:1fr;gap:2px}
}

/* ═══ 10 · WHO ═══ manifesto lines alternating edges. Zigzag. ═══════ */
.who{
  position:relative;padding-block:clamp(56px,8vw,130px);padding-inline:var(--pad);
  /* The manifesto lines zigzag across the full width, so there is no
     text-free corner to hide a strong wash in. This one is deliberately
     low: it tints the section lime without lifting the ground enough to
     touch --ink-dim, which measures 6.5:1 on it. */
  background-image:
    radial-gradient(66% 66% at 50% 50%,rgba(204,255,0,.11),transparent 68%),
    radial-gradient(48% 48% at 50% 50%,rgba(255,255,255,.035),transparent 70%);
}
.who-run{display:grid;gap:clamp(22px,3.2vw,50px);margin-block-start:clamp(16px,2.4vw,34px)}
.who-line{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(13px,1.7vw,26px);row-gap:6px;
  align-items:center;max-inline-size:min(780px,94vw);
}
.who-end{margin-inline-start:auto}
.who-ico{
  grid-row:span 2;align-self:start;flex:0 0 auto;
  inline-size:clamp(26px,2.6vw,40px);block-size:clamp(26px,2.6vw,40px);
  color:rgba(255,255,255,.45);margin-block-start:.1em;
}
.who-ico svg{
  inline-size:100%;block-size:100%;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.who-line:nth-child(3) .who-ico{color:var(--lime)}
.who-txt{font-size:clamp(20px,3.3vw,50px);line-height:1.02;font-weight:900}
.who-sub{grid-column:2;color:var(--ink-dim);font-size:clamp(14.5px,1.15vw,19px);line-height:1.45}
.who-not{
  margin-block-start:clamp(30px,4vw,64px);color:var(--ink-faint);
  max-inline-size:70ch;font-size:clamp(13.5px,1vw,16px);
}

/* ═══ 11 · ENROLLMENT ═══ display type off the start edge, an underline
   form at the end edge. Nothing here is a card. ═══════════════════ */
.join{
  position:relative;overflow:hidden;
  padding-block:clamp(60px,9vw,150px);padding-inline:var(--pad);
  /* The section is much taller than its two columns, so the lower third is
     empty ground. That is where the lime goes - it rises under the submit
     button and the closing lines instead of sitting behind the form. */
  background-image:
    radial-gradient(74% 46% at 50% 104%,rgba(204,255,0,.26),rgba(204,255,0,.06) 44%,transparent 70%),
    linear-gradient(180deg,
      rgba(0,0,0,0),rgba(0,0,0,.46) 13%,rgba(0,0,0,.16) 44%,rgba(0,0,0,.5) 90%,rgba(0,0,0,0));
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);
  gap:clamp(28px,5vw,96px);align-items:start;
}
.join-h{font-size:clamp(38px,7.8vw,128px);line-height:.84;margin-inline-start:min(-4.2vw,-22px);margin-block-end:clamp(18px,2.4vw,34px)}
.join-say p{color:var(--ink-dim);max-inline-size:30ch;font-size:clamp(16px,1.4vw,23px);line-height:1.45}
.join-steps{counter-reset:s;display:grid;gap:11px;margin-block:clamp(20px,2.6vw,38px)}
/* not a flex row · flex turned the text node either side of the <bdi>
   numeral into separate flex items and opened a 12px gap inside the
   sentence. Absolute counter, normal inline text. */
.join-steps li{position:relative;padding-inline-start:27px;font-weight:500}
.join-steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;inset-inline-start:0;inset-block-start:0;
  font-family:'Anton',sans-serif;font-size:1rem;color:var(--ink-faint);
}
.join-cap{display:flex;align-items:baseline;gap:14px;max-inline-size:40ch}
.join-cap b{font-size:clamp(30px,3.4vw,52px);line-height:.85;color:var(--lime);flex:0 0 auto}
.join-cap span{color:var(--ink-dim);font-size:clamp(13.5px,1vw,16px)}

.field{display:flex;flex-direction:column;gap:5px;margin-block-end:clamp(16px,1.8vw,24px);border:0;padding:0;min-inline-size:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px)}
.field label,.field legend{font-size:.78rem;font-weight:900;color:var(--ink-faint);padding:0}
.opt{font-weight:400;opacity:.75}
.field input,.field select,.field textarea{
  inline-size:100%;font:inherit;color:var(--ink);
  /* never below 16px · iOS zooms the whole page on focus under that */
  font-size:max(16px,1rem);
  background:transparent;border:0;
  border-block-end:2px solid rgba(255,255,255,.2);
  padding:13px 2px;border-radius:0;min-block-size:46px;
  transition:border-color .16s var(--ease);
}
.field textarea{min-block-size:76px}
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 2px center;background-size:17px;
  padding-inline-end:26px;
}
.field textarea{resize:vertical;min-block-size:70px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.26)}
.field input:focus,.field select:focus,.field textarea:focus{border-block-end-color:var(--lime);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.field-radio{margin-block-end:clamp(18px,2vw,26px)}
.radios{display:flex;flex-wrap:wrap;gap:2px 14px;margin-block-start:4px}
.radios label{
  display:inline-flex;align-items:center;gap:9px;font-weight:500;cursor:pointer;
  min-block-size:44px;padding-inline-end:6px;
}
.radios input{accent-color:var(--lime);inline-size:20px;block-size:20px;margin:0;flex:0 0 auto}
.form-note{margin-block-start:14px;font-size:.78rem;color:var(--ink-faint);line-height:1.5}
.join-form .btn{margin-block-start:8px}

@media(max-width:900px){
  .join{grid-template-columns:1fr;gap:clamp(30px,6vw,50px)}
  .field-row{grid-template-columns:1fr}
  /* the start-edge bleed was cutting 4px off the first letter here · at
     this size there is no room to hang display type off the reading edge */
  .join-h{margin-inline-start:0}
}

/* ═══ 12 · FAQ ═══ narrow measure at the start edge, ghost word off the
   end edge. Small type, reversing the program's scale. ═════════════ */
.faq{
  position:relative;overflow:hidden;padding-block:clamp(56px,8vw,130px);
  /* The answers column runs from the inline-start (physical right) edge
     inward and never reaches 30% physical; the ghost word owns the left.
     So the pool that lights the ghost can be lime and can be strong. */
  background-image:radial-gradient(46% 54% at 18% 44%,rgba(204,255,0,.20),rgba(204,255,0,.04) 48%,transparent 70%);
}
/* same correction as .ghost-gap · flush, not bled */
.ghost-faq{
  inset-block-start:clamp(120px,16vw,260px);
  inset-inline-end:0;
  font-size:clamp(110px,21vw,320px);
}
.faq-body{position:relative;z-index:2;max-inline-size:min(700px,92vw);padding-inline:var(--pad)}
.faq-h{font-size:clamp(30px,5.4vw,84px);line-height:.88;margin-block-end:clamp(20px,2.8vw,42px)}
.qs{display:grid;gap:clamp(6px,.8vw,12px)}
.qa-head{
  inline-size:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;text-align:start;padding-block:clamp(13px,1.2vw,16px);
  min-block-size:48px;
  font-weight:700;font-size:clamp(15.5px,1.35vw,20px);line-height:1.4;
  color:var(--ink-dim);transition:color .16s var(--ease);
}
.qa-head:hover,.qa-head[aria-expanded="true"]{color:var(--ink)}
.qa-ico{
  position:relative;flex:0 0 auto;inline-size:15px;block-size:15px;margin-block-start:.35em;
  transition:transform .2s var(--ease);
}
.qa-ico::before,.qa-ico::after{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:0;
  inline-size:15px;block-size:2px;background:currentColor;margin-block-start:-1px;
}
.qa-ico::after{transform:rotate(90deg)}
.qa-head[aria-expanded="true"] .qa-ico{transform:rotate(135deg);color:var(--lime)}
.js .qa:not(.is-open) .qa-body{display:none}
.qa-body{padding-block-end:clamp(14px,1.6vw,22px)}
.qa-body p{color:var(--ink-dim);max-inline-size:46ch;font-size:clamp(15.5px,1.2vw,19px);line-height:1.5}
.faq-cta{margin-block-start:clamp(24px,3vw,44px);color:var(--ink-dim);line-height:2}
.faq-cta a{
  color:var(--lime);font-weight:900;text-underline-offset:5px;
  display:inline-block;padding-block:9px;
}

/* ═══ FOOTER ═══ the wordmark cropped by the bottom of the page ═════ */
.ftr{
  position:relative;overflow:hidden;
  padding-block:clamp(46px,7vw,100px) calc(var(--badge-h) + 8px);
  padding-inline:var(--pad);
  background-image:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.34) 22%,rgba(0,0,0,.84));
}
.ftr-cols{display:grid;gap:clamp(14px,1.8vw,24px);max-inline-size:min(900px,94vw)}
.ftr-line{font-weight:900;font-size:clamp(15px,1.3vw,20px)}
.ftr-nav{display:flex;flex-wrap:wrap;gap:0 18px;margin-inline-start:-2px}
.ftr-nav a{
  font-size:.85rem;color:var(--ink-dim);text-decoration:none;
  display:inline-flex;align-items:center;min-block-size:44px;padding-inline:2px;
  transition:color .16s var(--ease);
}
.ftr-nav a:hover{color:var(--lime)}
.ftr-disc{color:var(--ink-faint);font-size:.8rem;line-height:1.6;max-inline-size:74ch}
.ftr-mini{color:var(--ink-faint);font-size:.76rem}
.ftr-word{
  display:block;font-family:'Anton',sans-serif;white-space:nowrap;
  font-size:min(52vw,780px);line-height:.7;letter-spacing:.01em;
  /* aria-hidden decoration · the page signs off in its own colour */
  color:transparent;-webkit-text-stroke:1.7px rgba(204,255,0,.30);
  margin-block-start:clamp(18px,3vw,48px);
  margin-inline:min(-3.5vw,-18px);
  transform:translateY(.2em);
}

/* ═══ demo badge · required chrome ══════════════════════════════════ */
.demo-badge{
  position:fixed;z-index:95;
  inset-block-end:14px;inset-inline-start:14px;
  background:#141414;color:#fff;
  font-size:.74rem;font-weight:700;line-height:1;
  padding:10px 14px;text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.22);
  transition:transform .16s var(--ease);
}
.demo-badge b{color:var(--lime)}
.demo-badge:hover{transform:translateY(-2px)}

/* On a phone a floating chip has nowhere to float: it sat on top of the
   panel quotes and the footer. Shrinking it only makes a smaller thing
   overlap. So on touch it stops pretending to be a floating object and
   becomes what it actually is - persistent chrome. It docks to the
   bottom edge, and every block that would otherwise sit under it
   reserves `--badge-h`, so it overlaps nothing. */
@media(max-width:760px){
  :root{--badge-h:calc(42px + env(safe-area-inset-bottom,0px))}
  .demo-badge{
    inset-block-end:0;inset-inline:0;
    display:flex;align-items:center;justify-content:center;gap:.35em;
    block-size:var(--badge-h);
    padding:0 14px env(safe-area-inset-bottom,0px);
    font-size:.72rem;
    background:rgba(12,12,12,.9);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:none;
    border-block-start:1px solid rgba(255,255,255,.14);
  }
  .demo-badge:hover,.demo-badge:active{transform:none}
}

/* ═══ modal · the form never transmits ═════════════════════════════ */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-bd{position:absolute;inset:0;background:rgba(8,8,8,.86);backdrop-filter:blur(4px)}
.modal-box{
  position:relative;inline-size:min(500px,100%);
  background:var(--char);box-shadow:0 0 0 1px rgba(255,255,255,.14);
  padding:clamp(24px,3vw,38px);
}
.modal-box h2{font-size:clamp(24px,2.6vw,36px);margin-block-end:14px}
.modal-box p{color:var(--ink-dim);margin-block-end:12px;font-size:.95rem}
.modal-box a{color:var(--lime);font-weight:900}
.modal-box .btn{margin-block-start:10px}

/* ═══ reveal ═══ ═══════════════════════════════════════════════════
   EVERY hidden start state on this page lives under `.js-motion`, and
   nowhere else. That class is set before first paint and revoked the
   moment the motion layer cannot run - no JS, reduced motion, a vendor
   script that 404'd, a throw inside main.js. So the failure mode is
   "no animation", never "invisible content".
   Do not author `opacity:0`, `clip-path:inset(…)` or a hiding transform
   outside this block without the same prefix. ════════════════════ */
.js-motion .rv{opacity:0;transform:translateY(15px)}
.js-motion .rv.in{opacity:1;transform:none;transition:opacity .28s var(--ease),transform .3s var(--ease)}
.js-motion .cold-word>span{opacity:0}

/* touch-only · the result panels arrive as the rail brings them in.
   `pv` is applied by main.js only inside the mobile matchMedia context,
   so a desktop document never carries the hidden state at all. */
.js-motion .panel.pv .panel-body,
.js-motion .panel.pv .panel-n{
  opacity:0;transform:translateY(18px);
  transition:opacity .42s var(--ease-out),transform .5s var(--ease-out);
}
.js-motion .panel.pv .panel-n{transform:translateY(26px)}
.js-motion .panel.pv-in .panel-body,
.js-motion .panel.pv-in .panel-n{opacity:1;transform:none}
.js-motion .panel.pv-in .panel-body{transition-delay:.06s}

/* ═══ reduced motion ═══ strip every axis-based move ═══════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  /* belt and braces · `.js-motion` is already revoked before paint, but
     if anything ever re-adds it these still resolve to the finished state */
  .js-motion .rv,.js-motion .rv.in{opacity:1;transform:none}
  .js-motion .cold-word>span{opacity:1;transform:none}
  .js-motion .tk-kicker,.js-motion .tk-line,.js-motion .tk-count{clip-path:none}
  .js-motion .panel .panel-body,.js-motion .panel .panel-n{opacity:1;transform:none}
  .tape-lime,.tape-dark{transform:none;inline-size:100%;margin-inline-start:0}
  .cold-cue{display:none}
  .js-motion .takeover{block-size:auto}
  .js-motion .tk-stage{
    position:relative;block-size:auto;min-block-size:0;
    padding-block:clamp(50px,8vw,110px);background:var(--lime);
  }
  .js-motion .tk-fill{display:none}
  .panels{scroll-snap-type:none}
}

@media print{.hdr,.demo-badge,.tape,.cold-cue,.run-nav{display:none}}

/* The footer wordmark is a graphic, not a label, but it was clipped on the
   inline edge as well as the block edge - so it read as a broken word rather
   than a deliberate crop. Cropped by the page bottom only now. */
.ftr-word{
  max-inline-size:100%;
  overflow:hidden;
  font-size:clamp(64px,34vw,340px);
}