/* ═══════════════════════════════════════════════════════════════════════
   THE FIRST SCREEN, SCRUBBED BY SCROLL — see hero-film.js for the story.

   Named hf-* so nothing here can be confused with money-film's mf-*, which
   owns #four-pillars further down the page. Two films, two vocabularies,
   no shared selector.

   WITHOUT THE SCRIPT THIS IS A PLAIN STACKED READ. .hf-on is added by
   hero-film.js only once it owns the clock, exactly as money-film.css does
   with .mo-film-on — so a blocked script, an old browser or reduce-motion
   all land on legible copy rather than on an empty sticky box.
   ═══════════════════════════════════════════════════════════════════════ */

#marketing-view .hf-track{position:relative}
.hf-on #marketing-view .hf-track{min-height:400vh}

#marketing-view .hf-stage{padding:34px 0 10px}
.hf-on #marketing-view .hf-stage{position:sticky;top:0;height:100vh;
  height:100dvh;display:flex;align-items:center;overflow:hidden}

#marketing-view .hf-grid{display:grid;gap:24px;grid-template-columns:1fr;
  width:100%;align-items:center}
@media(min-width:900px){
  #marketing-view .hf-grid{grid-template-columns:1.02fr .98fr;gap:46px}
}

/* ── the copy. Acts CUT: two half-lit lines are two illegible lines. ── */
#marketing-view .hf-acts{position:relative}
.hf-on #marketing-view .hf-acts{min-height:270px}
@media(min-width:900px){.hf-on #marketing-view .hf-acts{min-height:290px}}
#marketing-view .hf-act{margin:0 0 46px}
.hf-on #marketing-view .hf-act{position:absolute;inset:0;margin:0;opacity:0;
  transform:translateY(12px);pointer-events:none;
  transition:opacity .26s ease,transform .26s ease}
.hf-on #marketing-view .hf-act[data-live="1"]{opacity:1;transform:none;
  pointer-events:auto}

#marketing-view .hf-kick{font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:800;color:var(--refresh-green);
  margin:0 0 12px}
#marketing-view .hf-act h2{font-size:clamp(27px,5vw,50px);line-height:1.05;
  font-weight:800;letter-spacing:-.025em;color:var(--refresh-ink);margin:0 0 12px}
#marketing-view .hf-act h2 em{font-style:normal;color:var(--refresh-green)}
#marketing-view .hf-act p{font-size:clamp(14.5px,1.8vw,17px);line-height:1.6;
  color:var(--refresh-muted);margin:0;max-width:45ch}

/* The way out, on the very first act, for somebody who came for a number
   and does not want four screens of film first. */
#marketing-view .hf-skip{display:inline-flex;gap:8px;align-items:center;
  margin-top:18px;font-size:14px;font-weight:700;color:var(--refresh-green);
  text-decoration:none}
#marketing-view .hf-skip:hover{text-decoration:underline;text-underline-offset:3px}

/* ── the scrub rail ─────────────────────────────────────────────────── */
#marketing-view .hf-rail{display:flex;gap:7px;margin:24px 0 0;align-items:center}
.hf-on #marketing-view .hf-rail{display:flex}
#marketing-view .hf-rail{display:none}
#marketing-view .hf-rail i{display:block;height:3px;flex:1;border-radius:999px;
  background:var(--refresh-line);position:relative;overflow:hidden}
#marketing-view .hf-rail i::after{content:'';position:absolute;inset:0;
  transform-origin:0 50%;transform:scaleX(var(--hf-f,0));
  background:var(--refresh-green)}
#marketing-view .hf-rail span{font:800 10px/1 ui-monospace,Menlo,monospace;
  color:var(--refresh-muted);letter-spacing:.1em}

/* ── the scene ──────────────────────────────────────────────────────── */
#marketing-view .hf-scene{position:relative;width:100%;max-width:470px;
  margin:0 auto;aspect-ratio:1/1;max-height:54vh}
#marketing-view .hf-scene svg{width:100%;height:100%;display:block}
#marketing-view .hf-amt{font:800 clamp(20px,4.2vw,34px)/1 'Inter',system-ui,sans-serif;
  fill:var(--refresh-ink);font-variant-numeric:tabular-nums}
#marketing-view .hf-cap{font:700 10.5px/1 ui-monospace,Menlo,monospace;
  fill:var(--refresh-muted);letter-spacing:.06em}
#marketing-view .hf-gapn{font:800 clamp(15px,2.6vw,24px)/1 'Inter',sans-serif;
  fill:var(--refresh-green);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .hf-on #marketing-view .hf-track{min-height:0}
  .hf-on #marketing-view .hf-stage{position:relative;height:auto;display:block}
  .hf-on #marketing-view .hf-act{position:relative;opacity:1;transform:none;
    margin:0 0 46px;pointer-events:auto;transition:none}
  .hf-on #marketing-view .hf-acts{min-height:0}
  #marketing-view .hf-rail{display:none !important}
}