/* hero + scene region (S3/S4) — space reserved before the canvas boots (CLS 0); text is real HTML and the LCP */
.hero{position:relative;min-height:calc(100svh - var(--header-h));display:grid;align-content:end;padding:clamp(3rem,8vw,6rem) 0 var(--sp-8);isolation:isolate;overflow:hidden}
.hero-scene{position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 700px at 62% 40%,#141A2B 0%,#0E1220 45%,#07090E 100%)}
.hero-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-scene .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hero-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,14,.84) 0%,rgba(7,9,14,.55) 40%,rgba(7,9,14,.04) 100%),linear-gradient(180deg,rgba(7,9,14,.1) 0%,rgba(7,9,14,0) 40%,rgba(7,9,14,.85) 100%);pointer-events:none}
@media (max-width:900px){.hero-scene::after{background:linear-gradient(180deg,rgba(7,9,14,.58) 0%,rgba(7,9,14,.5) 45%,rgba(7,9,14,.95) 100%)}}
/* small phones (≤ 430 × 720, iPhone SE class): both CTAs stay inside the first viewport */
.hero-copy{position:relative;z-index:1;max-width:58rem;padding-bottom:var(--sp-6)}
.hero h1{font-size:var(--fs-3xl);max-width:16ch;margin-bottom:var(--sp-5)}
.hero-line{font-family:var(--font-display);font-style:italic;font-size:var(--fs-xl);color:var(--gold);margin:0 0 var(--sp-4)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-3)}
.motion-toggle{margin-top:var(--sp-2);visibility:hidden} .motion-toggle.ready{visibility:visible} html.fonts-pending .motion-toggle.ready{visibility:hidden}
.hero .strip{margin-top:var(--sp-4);border-top:1px solid var(--line);border-bottom:0;padding-bottom:0;max-width:33em}
.tag{display:inline-block;font-size:.7em;letter-spacing:.14em;background:var(--gold-soft);color:var(--gold);border-radius:var(--radius-pill);padding:.15em .6em;vertical-align:middle;margin-left:.4em}
.plain{list-style:none;padding:0;margin:0 0 var(--sp-4);display:grid;gap:.35rem;color:var(--muted)} .plain li::before{content:"— ";color:var(--gold)}
.fine-print{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-4)}
.statement-inline{font-family:var(--font-display);font-style:italic;font-size:var(--fs-lg);color:var(--text)}
/* HyperFrames figure — 16:9 reserved; poster first; iframe swaps in with the same box */
.hf-figure{margin:0}
.hf-player{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#05070b}
.hf-player .hf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* the control never moves or resizes (CLS 0): fixed corner, fixed width for both labels; the poster carries a decorative play glyph and is itself clickable */
.hf-figure .hf-play{min-width:7rem;min-height:44px;text-align:center}
.hf-player .hf-poster{cursor:pointer}
.hf-player:not(.playing)::after{content:"";position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(7,9,14,.62) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%23F2F4F8'/></svg>") center/34px no-repeat;border:1px solid rgba(255,255,255,.25);pointer-events:none;z-index:1}
.hf-player.playing .hf-poster{display:none}
.hf-figure figcaption{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center;font-size:var(--fs-sm)}
.closing{text-align:center} .closing h2{max-width:22ch;margin-inline:auto} .closing .cta-row{justify-content:center}
.brand-text{color:var(--text)}

/* small phones — placed last so it wins over the generic hero rules (same specificity) */
@media (max-width:430px) and (max-height:720px){.hero{padding-top:.8rem}.hero .kicker{font-size:.62rem;letter-spacing:.12em;margin-bottom:.35rem}.hero h1{font-size:1.85rem;margin-bottom:.5rem}.hero-line{font-size:1.05rem;margin-bottom:.35rem}.hero-copy>p:not(.kicker):not(.hero-line){font-size:.93rem;line-height:1.42;margin-bottom:.3rem}.cta-row{margin:.6rem 0 .4rem;gap:.45rem}.hero-copy{padding-bottom:var(--sp-3)}.motion-toggle{margin-top:.2rem}}