/* =============================================================
   Snap Zap Media — homepage hero

   Lifted from the approved hero.html. The mechanism is signed
   off and is not redesigned here: one pinned frame, headline
   right, road left, a glowing arrow climbing bottom to top,
   five steps lighting in turn, the whole frame releasing
   together to reveal the calls to action.

   Removed on porting, and only this: the duplicated :root token
   block (tokens.css is the single source), and the rules
   tokens.css already owns — h1, .btn, .wrap, .site-head.
   Nothing else changed.

   There is NO inner scroll container. The page scrolls the
   window natively. An inner scroll wrapper was tried and killed.
   ============================================================= */

.hero{ position:relative; height:440vh }
.pin{ position:absolute; top:0; left:0; right:0; height:100svh; will-change:transform }
.stage{ position:relative; width:var(--page); height:100svh; margin-inline:auto }
.stage canvas{ position:absolute; inset:0; width:100%; height:100% }

.hero-copy{ position:absolute; left:0; top:0; width:40% }
.hero-sub{ font-family:var(--display); font-weight:500; font-size:var(--step-2);
  line-height:1.25; letter-spacing:-.015em; color:var(--accent);
  margin:1.1rem 0 0; overflow:hidden }
.hero-body{ margin:1.1rem 0 0; color:var(--ink-muted); font-size:var(--step-1);
  line-height:1.5; overflow:hidden }

.steps{ position:absolute; inset:0; pointer-events:none }
.stop{ position:absolute; left:0; top:0; transform:translateY(-50%) }
.stop-rule{ width:26px; height:1px; background:var(--accent-deep); margin-bottom:.6rem;
  transition:width .3s ease, background-color .3s ease }
.stop.is-active .stop-rule{ width:58px; background:var(--accent) }
.stop-index{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .3rem; font-variant-numeric:tabular-nums }
.stop.is-active .stop-index{ color:var(--accent) }
.stop-label{ font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,.95rem + .8vw,1.6rem); line-height:1.1;
  letter-spacing:-.02em; margin:0; color:var(--ink); text-wrap:balance }
.stop-line{ margin:.4rem 0 0; font-size:clamp(.88rem,.84rem + .25vw,1rem);
  line-height:1.45; color:var(--ink-muted); text-wrap:pretty; max-width:none }

/* The CTA pair closes the roadmap. It sits after stop 5, never
   above stop 1, and it scrolls away with the hero — nothing
   follows the visitor down the page. */
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem 1rem; align-items:center;
  padding-block:clamp(2.25rem,5vw,3.5rem) clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--hairline) }

.rm-list{ display:none }
@media (prefers-reduced-motion:reduce){
  .hero{ height:auto }
  .pin{ position:static; height:auto }
  .stage{ display:none }
  .rm-list{ display:grid; gap:1.8rem; width:var(--page); margin-inline:auto;
    padding-block:2rem }
  /* ★ DEFECT FOUND IN THE APPROVED hero.html, fixed here — reported 2026-09-14.
     That file resets .rm-list .stop but never .hero-copy, so under
     prefers-reduced-motion the headline keeps position:absolute and lands on
     top of the step list, making both unreadable. Reproduced in hero.html
     itself, so it is not a porting error. DESIGN-SYSTEM §6 requires reduced
     motion to be respected "including in the hero". One line, and it touches
     nothing on the motion path. */
  .rm-list .hero-copy{ position:static; width:auto }

  .rm-list .stop{ position:static; transform:none; opacity:1!important; width:auto!important }
  .rm-list .stop-rule{ width:58px; background:var(--accent) }
  .rm-list .stop-index{ color:var(--accent) }
}