body>.site-header{position:sticky;top:0;background:var(--at-surface);z-index:5}

/* Home (Owner, 1 November 2026): a proper hero, then the circuit board inside the factory, then the Agent Development
   Environment tools, then the footer. The window, the board and the tools have their own stylesheets. */
.home-story{position:relative}
.scene{position:relative;width:min(1180px,calc(100% - 96px));margin:0 auto}
.scene h2{font:500 clamp(34px,4vw,52px)/1.08 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:balance;margin:0}
.scene-lead{margin:18px 0 0;max-width:62ch;font-size:20px;line-height:1.5;color:var(--at-text-muted)}

/* The hero: the two lines, left; the Osynk window under them, the width of the page. */
.scene-hero{padding:56px 0 0}
.hero-head{max-width:820px}
.hero-head h1{font:500 clamp(44px,5.4vw,72px)/1.02 var(--at-font-editorial);letter-spacing:var(--at-track-tight);text-wrap:balance;margin:0}
.hero-lead{margin:18px 0 0;font:400 clamp(21px,2.3vw,28px)/1.35 var(--at-font-editorial);text-wrap:balance;color:var(--at-text)}
/* Beside them, on the right: three short claims and the goal, in the lead's voice, set flush with the window's right
   edge. The goal stands on the lead's line, the same size, so the two read together; the headline stays the one bold moment. */
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,372px);column-gap:48px;align-items:end}
.hero-side{text-align:right;font:400 clamp(19px,1.8vw,22px)/1.4 var(--at-font-editorial);color:var(--at-text-muted)}
.hero-side p{margin:0}
.hero-side p+p{margin-top:2px}
.hero-side .hero-goal{margin-top:14px;font-size:clamp(21px,2.3vw,28px);line-height:1.35;color:var(--at-text)}
@media(max-width:1100px){.hero-top{grid-template-columns:minmax(0,1fr) minmax(0,320px);column-gap:40px}}
/* Narrower than that, the claims move under the lead and line up on its left edge. */
@media(max-width:900px){.hero-top{display:block}.hero-side{margin-top:28px;text-align:left}}
.hero-app{margin-top:44px}
/* Until the window's script runs, its place keeps the window's size, so nothing below jumps when it arrives. */
.hero-app:empty{aspect-ratio:1180/738;margin-top:84px;border:1px solid var(--at-line);border-radius:12px;background:var(--at-surface)}

.page-ending{position:relative;z-index:1}.page-ending .site-footer{padding-top:16px;padding-bottom:24px}
.home-story .site-footer{background:var(--at-surface)}

@media(prefers-reduced-motion:reduce){
 .scroll-cue::before,.scroll-cue::after{animation:none}
}