/* ---- H1 · hero: the claim, then the film beside it (WEBSITE-V3 E1, E2) ---- */
.hero{padding:clamp(28px,3.4vw,44px) 0 clamp(52px,6vw,88px)}
.hero .h1 .ln{display:block}
/* Optical alignment (apple-design, typography). At display sizes a stem's
   side bearing (E, F, H: .085 em in Archivo at 800 and 125%, measured with
   fontTools) sets a headline visibly inside the column its copy starts on:
   9 px on the hero at 1440. The first line opens on Alt's A, whose bearing
   is near nothing, so only the second, on F's stem, hangs; an h2 hangs its
   first line only. Y and W (.01 em) need nothing. */
.hero .h1 .ln+.ln{margin-left:-.075em}
/* Alt, in italics (E1, the user's words). Archivo has no italic, so the
   slant is drawn by the browser, at the headline's own weight and ink, with
   a hair more room after it for the overhang. */
.hero .h1 em{font-style:italic;margin-right:.04em}

/* The film (hero.js): the keys on the left, above the lede and the
   buttons; the window on the right. On a phone the keys come first, the
   sheet under them, so a key and the change it makes share one screen. */
.herosplit{position:relative;display:grid;grid-template-columns:minmax(0,clamp(280px,24vw,330px)) minmax(0,1fr);grid-template-areas:"keys sheet" "copy sheet";grid-template-rows:auto 1fr;column-gap:clamp(32px,4.4vw,72px);row-gap:26px;margin-top:clamp(28px,3vw,44px);align-items:start}
.herocopy{grid-area:copy;display:flex;flex-direction:column;gap:24px}
.herocopy .line{font-size:clamp(18px,1.36vw,20px)}
.herocopy .ctas{margin-top:4px;flex-direction:column;align-items:flex-start;gap:18px}
/* "the left ⌥" stays on one line, the keycap never alone at a line's start */
.herocopy .line .nowrap{white-space:nowrap}

/* the keys: the site's keycap, typed on the film's clock (web/kit,
   AxiomKit.keys); the loop's cross-fade lays a copy of the keys and the
   dots over them, inside this box */
.hkeyswrap{grid-area:keys;position:relative}
.hkeys{margin:0;padding-top:4px;color:var(--ink)}
.hkeys .xk-hk{font-size:60px;gap:.1em;height:.82em}
.hkeys .xk-kname{min-height:1.2em;white-space:nowrap;font:700 clamp(17px,1.45vw,21px)/1.2 var(--display);font-stretch:108%;letter-spacing:-.01em;color:var(--ink)}
/* a dot a step: done in ink, the one being typed in key blue */
.hdots{display:flex;gap:7px;margin-top:10px}
.hdots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.hdots i.done{background:var(--dim)}
.hdots i.now{background:var(--key)}

/* the window: Excel's own, framed by the camera; its proportions are fixed
   here so nothing moves once the page has laid out (hero.js, framing) */
.hsheet{grid-area:sheet;aspect-ratio:83/34;border-radius:var(--r-win);box-shadow:var(--shadow-stage),0 0 0 1px var(--edge-win);background:#F5F5F5}
/* the viewport rounds the window and draws its edge, so the window's own does not */
.hsheet>.xk-win{border-radius:0;box-shadow:none}

@media (max-width:1279px){
  .herosplit{grid-template-columns:minmax(0,1fr);grid-template-areas:"keys" "sheet" "copy";grid-template-rows:auto;row-gap:28px}
  .herocopy .ctas{flex-direction:row;align-items:center}
}
/* narrower than the window's title can be framed whole at 10 px: the
   stage takes some of the gutter, then frames the P&L alone */
@media (max-width:900px){.hsheet{margin-inline:calc(var(--gutter) * -.6)}}
@media (max-width:826px){.hsheet{aspect-ratio:60/34}}
@media (max-width:620px){.hsheet{aspect-ratio:31/32}.hkeys .xk-hk{font-size:46px}}
/* a phone (g-hero-phone, the user, 2026-10-18: "a bit more wide ... same
   zoom as" /tracer's): the window drawn smaller and whole, at 0.8 or a
   little more, to column G at 390 and F at 360 (hero.js). The stage is as
   tall as the P&L and two rows under it at that scale, 326 points at 390
   as before, rather than a square of empty rows. Its width is set, or
   the ratio turns the min-height into a width past the screen's edge. */
@media (max-width:600px){.hsheet{width:calc(100% + var(--gutter) * 1.2);aspect-ratio:3/2;min-height:272px}}
/* a phone: the shared scale's 44 px floor broke "Finally" from "on Mac."
   at 390, so the headline steps under it just enough to keep each of its
   two lines whole (43.9 px at 430, 39.8 at 390) */
@media (max-width:430px){.hero .h1{font-size:10.2vw}}