/* Landing v2 · Vizcom-style draft. One object changes state down the page; images argue, copy stays sparse.
   Tokens follow DESIGN.md (Dimension DS): graphite ladder, paper ink, blue only for selection/focus/links/AI,
   green for applied. The hero headline is set above the DS display ceiling on purpose (the draft's one big move). */
:root {
  --g-app:#161618; --g-work:#1d1d1f; --g-panel:#252528; --g-control:#2c2c2e; --g-float:#3a3a3c;
  --paper:#f5f5f7; --ink-inverse:#1c1c1e;
  --c2:rgba(255,255,255,.56); --c3:rgba(255,255,255,.5);
  --h-subtle:rgba(255,255,255,.07); --h:rgba(255,255,255,.1); --h-strong:rgba(255,255,255,.16);
  --blue:#5b7bff; --link:#78b9ff; --sel:rgba(91,123,255,.2); --sel-border:rgba(91,123,255,.55); --focus:rgba(91,123,255,.7);
  --green:#77a987; --green-tint:rgba(119,169,135,.12); --green-border:rgba(119,169,135,.55);
  --yellow:#c3a15a;
  --r5:5px; --r7:7px; --r9:9px; --r12:12px; --r16:16px;
  --shadow-card:0 1px 3px rgba(0,0,0,.4); --shadow-pop:0 12px 36px rgba(0,0,0,.55);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text','Pretendard',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --gutter:48px; --section:128px; --head-gap:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --hex:var(--paper); --cut:var(--g-app);
  color-scheme:dark; scrollbar-color:var(--g-float) var(--g-app);
}
@media (max-width:1100px) { :root { --section:112px; --head-gap:48px; } }
@media (max-width:800px) { :root { --gutter:40px; --section:96px; --head-gap:40px; } }
@media (max-width:600px) { :root { --gutter:32px; --section:72px; --head-gap:32px; } }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--g-app); color:var(--paper); font:400 16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
h1, h2, h3, p, figure, dl, dd, ul, ol { margin:0; }
ul, ol { padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; padding:0; }
img, svg { display:block; max-width:100%; }
[hidden] { display:none !important; }
::selection { background:var(--sel); color:var(--paper); }
input, textarea { caret-color:var(--blue); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r5); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; padding:12px 16px; border-radius:var(--r9); background:var(--paper); color:var(--ink-inverse); font-weight:500; }
.skip-link:focus { top:12px; }
.shell { width:min(1280px, calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.data { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.muted { color:var(--c2); }
.arrow-icon { width:16px; height:16px; flex:none; }

/* Buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:0 20px; border:1px solid transparent; border-radius:var(--r9); background:var(--paper); color:var(--ink-inverse); font:500 14px/1 var(--sans); white-space:nowrap; transition:background .18s, border-color .18s; }
.button:hover { background:#fff; }
.button:active { background:#ececed; }
.button.outline { background:transparent; color:var(--paper); border-color:var(--h-strong); }
.button.outline:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.26); }
.button.small { min-height:36px; padding:0 14px; font-size:13px; gap:10px; }
.button-pair { display:flex; flex-wrap:wrap; gap:12px; }

/* Header: minimal, transparent over the hero, graphite once the page moves. */
.site-header { position:fixed; inset:0 0 auto; z-index:50; transition:background .25s, border-color .25s; border-bottom:1px solid transparent; }
.site-header.is-scrolled { background:rgba(22,22,24,.92); border-bottom-color:var(--h-subtle); backdrop-filter:saturate(1.2) blur(12px); -webkit-backdrop-filter:saturate(1.2) blur(12px); }
.nav-shell { display:flex; align-items:center; gap:32px; height:64px; width:calc(100% - 2 * var(--gutter)); margin-inline:auto; }
.brand svg { width:172px; height:auto; color:var(--paper); }
.site-header nav { display:flex; gap:24px; margin-left:auto; font-size:14px; font-weight:500; color:var(--c2); }
.site-header nav a { padding:8px 0; transition:color .15s; }
.site-header nav a:hover { color:var(--paper); }
@media (max-width:700px) { .site-header nav { display:none; } .nav-shell { justify-content:space-between; } .brand svg { width:150px; } }

/* 1 · Hero (the hero wireframe). The arm inside an open drafting frame with a registered top-right corner (1), the Dimension window
   (2), the copy at the edges where the frame breaks (3): headline top left, the film's stage and its progress bars
   bottom left, the lead and actions bottom right. On wide screens the hero is a pinned run: scrolling pulls the
   camera back, the copy steps aside and the window closes in around the arm, which keeps playing (main.js, section 4). */
.hero { position:relative; isolation:isolate; }
/* --h1: the headline's size, two lines of which the frame's side edges start below */
.hero-pin { --h1:clamp(40px, 4.4vw, 72px); --frame-top:112px; --frame-bottom:56px; position:relative; overflow:clip; height:100vh; height:100svh; min-height:680px; padding:var(--frame-top) var(--gutter) var(--frame-bottom); display:grid; grid-template:auto 1fr auto / minmax(0, 1fr) minmax(0, 1fr); }
.pull .hero { height:250vh; }
.pull .hero-pin { position:sticky; top:0; }
.hero-type { position:relative; z-index:3; grid-column:1 / -1; pointer-events:none; }
/* two sentences, one a line on wide screens: sized so the longer one fits the frame */
.hero h1 { font-size:var(--h1); font-weight:500; line-height:1; letter-spacing:-.04em; max-width:none; text-wrap:balance; }
.hero h1 span { display:block; }
.hero h1 .hl-2 { color:var(--c2); }
.hero-type, .hero-foot, .hero-stage, .hero-frame, .hero-pin > .arm-credit { opacity:var(--co, 1); transform:translateY(var(--cy, 0px)); }
/* the arm draws over the whole pinned screen; .hero-art is only the box it is framed in at the top of the run */
.hero-pin > .arm { position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1s var(--ease); }
.hero-pin > .arm[data-state="live"] { opacity:1; }
.hero-pin > .arm .arm-hud, .hero-pin > .arm .arm-feats { display:none; }
.hero-pin > .arm .arm-legend { right:var(--gutter); top:42%; transform:translateY(-50%); opacity:0; }
.hero-pin > .arm .arm-legend.is-on { opacity:var(--co, 1); }
.hero-pin > .arm .arm-legend i { height:140px; }
/* centred on the screen and nearly its full height, so the arm is the largest thing in the hero */
.hero-art { position:absolute; z-index:1; top:172px; bottom:24px; left:var(--gutter); right:var(--gutter); pointer-events:none; }
/* the frame: top edge from past the headline to a square registered corner, right edge down to above the lead, bottom edge in
   the middle, left edge between the headline and the stage; on wide screens it starts below the headline (end of this block) */
.hero-frame { position:absolute; z-index:2; inset:var(--frame-top) var(--gutter) var(--frame-bottom); pointer-events:none; }
.hero-frame { --corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cg stroke='white' stroke-opacity='.4' fill='none'%3E%3Crect x='3.5' y='3.5' width='6' height='6' fill='%23161618'/%3E%3Cpath d='M.5 6.5h12M6.5.5v12'/%3E%3C/g%3E%3C/svg%3E"); }
.hero-frame i { position:absolute; display:block; background:rgba(255,255,255,.22); }
.f-top { top:0; left:calc(min(40%, 640px) + 32px); right:0; height:1px; }
.f-top::after { content:""; position:absolute; width:13px; height:13px; right:-6px; top:-6px; background:var(--corner) center / contain no-repeat; }
.f-right { right:0; top:0; bottom:calc(var(--foot-h, 112px) + 40px); width:1px; }
.f-bottom { bottom:0; left:calc(min(340px, 28%) + 56px); right:calc(min(360px, 30%) + 56px); height:1px; }
.f-left { left:0; top:calc(2 * var(--h1) + 40px); bottom:calc(var(--stage-h, 168px) + 32px); width:1px; }
.js .hero-frame i { animation:draw 1.1s var(--ease) .3s both; }
.js .f-top, .js .f-bottom { transform-origin:0 50%; }
.js .f-right, .js .f-left { transform-origin:50% 0; }
/* wide screens: the headline runs the full width, so no edge crosses it; the right edge starts level with the left one,
   under the square corner */
@media (min-width:901px) {
  .hero-frame .f-top { display:none; }
  .f-right { top:calc(2 * var(--h1) + 40px); }
  .f-right::after { content:""; position:absolute; width:13px; height:13px; left:-6px; top:-6px; background:var(--corner) center / contain no-repeat; }
}
@keyframes draw { from { opacity:0; } }
/* the gearbox drawing stands in until the arm's first frame, then gives way */
.hero-foot { position:relative; z-index:3; grid-row:3; grid-column:2; align-self:end; justify-self:end; display:grid; gap:16px; width:min(360px, 30vw); }
.hero-lead { font-size:16px; line-height:1.5; color:var(--c2); text-wrap:balance; }
.hero-foot .button-pair { flex-wrap:nowrap; }
.hero-foot .button { flex:1 1 auto; padding-inline:16px; }
.hero-stage { position:relative; z-index:3; grid-row:3; grid-column:1; align-self:end; justify-self:start; display:grid; gap:20px; width:min(340px, 28vw); }
.hero-stage .stage-cap { min-height:7.6em; align-content:end; }
.stage-cap { display:grid; gap:6px; }
.stage-cap b { font-size:clamp(18px, 1.5vw, 22px); font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.stage-cap span { font-size:15px; line-height:1.55; color:var(--c2); }
.hero-stage .arm-steps { position:relative; left:auto; bottom:auto; flex-direction:row-reverse; justify-content:flex-end; gap:12px; width:100%; }
/* the stages as bars: the one playing long and bright, the others short */
.hero-stage .arm-steps ol { flex:1; flex-direction:row; gap:10px; }
.hero-stage .arm-steps ol li { flex:1 1 0; transition:flex-grow .5s var(--ease); }
.hero-stage .arm-steps ol li:has([aria-current="step"]) { flex-grow:4; }
.hero-stage .arm-steps ol button { width:100%; height:20px; }
.hero-stage .arm-steps ol button::after { width:100%; height:4px; transform:none; opacity:.22; transition:opacity .3s; }
.hero-stage .arm-steps ol button:hover::after { opacity:.45; }
.hero-stage .arm-steps ol button[aria-current="step"]::after { opacity:.9; }
.hero-stage .arm-steps ol span { display:none; }
.hero-stage .arm-play { width:24px; height:24px; border:0; }
.hero-stage .arm-play svg { width:12px; height:12px; }
.arm-credit { font-size:12px; color:var(--c3); }
.hero-pin > .arm-credit { position:absolute; z-index:3; left:calc(var(--gutter) + min(340px, 28%) + 56px); bottom:calc(var(--frame-bottom) - 28px); }
.arm-credit a { color:var(--c2); text-decoration:underline; text-underline-offset:3px; }
html:not(.arm-live) .stage-cap, html:not(.arm-live) .hero-stage .arm-steps, html:not(.arm-live) .hero-pin > .arm-credit { visibility:hidden; }
/* the copy steps aside with the pull-back: no pointer on what has faded */
.pull-on .hero-type, .pull-on .hero-foot, .pull-on .hero-stage, .pull-on .hero-pin > .arm-credit { pointer-events:none; }

/* the Dimension window (the UX Flows prototype's Shape screen, in an iframe at its own 1440 × 900): it comes in large
   and settles to fit the pinned screen (--wfit from main.js, --ws, --wo); its viewport is a hole onto the arm */
.hero-window { display:none; }
.pull .hero-window { display:block; position:absolute; z-index:2; left:50%; top:calc(50% + 28px); width:1568px; height:1028px; border:0; background:transparent; color-scheme:dark; opacity:var(--wo, 0); transform:translate(-50%, -50%) scale(calc(var(--wfit, .8) * var(--ws, 1.5))); transform-origin:50% 50%; will-change:transform, opacity; pointer-events:none; }

.js .hero h1 span, .js .hero-foot, .js .hero-stage { animation:rise .9s var(--ease) both; }
.js .hero h1 .hl-2 { animation-delay:.08s; }
.js .hero-foot, .js .hero-stage { animation-delay:.2s; }
/* from 1%, not 0: invisible on the ground, but painted, so the headline counts as the page's first large paint (LCP) */
@keyframes rise { from { opacity:.01; transform:translateY(16px); } }
@keyframes settle { from { opacity:0; transform:translateY(24px) scale(.98); filter:blur(6px); } }
@media (max-width:900px) {
  .hero-pin { height:auto; min-height:0; padding:104px var(--gutter) 56px; grid-template:auto auto auto auto / 1fr; }
  .hero h1 { font-size:min(6vw, 48px); }
  .hero-art { position:relative; inset:auto; grid-row:2; margin:8px calc(-1 * var(--gutter)) 0; aspect-ratio:1 / 1.05; }
  .hero-pin > .arm { inset:auto; top:var(--art-top, 0px); left:0; right:0; height:var(--art-h, 100%); }
  .hero-pin > .arm .arm-legend { top:auto; bottom:16px; transform:none; right:16px; }
  .hero-pin > .arm .arm-legend i { height:90px; }
  .hero-frame { display:none; }
  .hero-stage { grid-row:3; grid-column:1; justify-self:stretch; width:auto; margin-top:8px; }
  .hero-stage .stage-cap { min-height:0; }
  .hero-foot { grid-row:4; grid-column:1; justify-self:stretch; width:auto; max-width:420px; margin-top:40px; }
  .hero-foot .button-pair { flex-wrap:wrap; }
  .hero-foot .button { flex:0 0 auto; }
  .hero-pin > .arm-credit { position:static; grid-row:5; margin-top:24px; }
}

/* section headings: headline left, supporting lead right, bottom-aligned */
.split-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:end; margin-bottom:var(--head-gap); }
.split-heading h2 { font-size:clamp(32px, 3.9vw, 56px); font-weight:500; line-height:1.06; letter-spacing:-.03em; text-wrap:balance; }
.split-heading h2 span { display:block; color:var(--c2); }
.split-heading p { font-size:clamp(17px, 1.35vw, 19px); line-height:1.6; color:var(--c2); max-width:48ch; }
@media (max-width:1100px) { .split-heading { grid-template-columns:1fr; gap:24px; } }

.fine { font-size:13px; color:var(--c3); }
.fine a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }

/* the arm (from lab/arm-stages.html), restyled to the page's type */
.arm { position:absolute; inset:0; }
.arm canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.arm-hud { position:absolute; left:24px; top:20px; display:flex; gap:8px; font-size:13px; color:var(--c2); }
.arm-hud b { font-weight:500; color:var(--paper); }
.arm-feats { position:absolute; left:24px; top:56px; display:grid; gap:4px; font-size:12px; color:var(--c3); opacity:0; transition:opacity .3s; }
.arm-feats li { display:flex; align-items:center; gap:8px; }
.arm-feats li::before { content:""; width:8px; height:8px; border:1px solid var(--c3); border-radius:2px; }
.arm-feats li.is-active { color:var(--paper); }
.arm-feats li.is-active::before { border-color:var(--blue); background:var(--blue); }
.arm-feats li.is-done { color:var(--c2); }
.arm-feats li.is-done::before { border-color:var(--c2); background:var(--c2); }
.arm-legend { position:absolute; right:24px; top:50%; transform:translateY(-50%); display:grid; grid-template-columns:10px auto; gap:6px 10px; font-size:11px; color:var(--c2); opacity:0; transition:opacity .5s; }
.arm-legend b { grid-column:1 / -1; font-weight:500; color:var(--paper); }
.arm-legend small { grid-column:1 / -1; font-size:11px; color:var(--c3); margin-bottom:6px; }
.arm-legend i { grid-row:3 / span 2; width:10px; height:150px; }
.arm-legend .lg-max { align-self:start; } .arm-legend .lg-min { align-self:end; }
.arm-legend.is-on { opacity:1; }
.arm-steps { position:absolute; left:16px; bottom:16px; display:flex; align-items:center; gap:12px; }
.arm-steps ol { display:flex; flex-direction:column; }
.arm-steps ol button { position:relative; display:grid; place-items:center start; width:56px; height:24px; }
.arm-steps ol button::after { content:""; width:44px; height:4px; border-radius:2px; background:var(--paper); opacity:.25; transform:scaleX(.66); transform-origin:0 50%; transition:opacity .18s, transform .3s var(--ease); }
.arm-steps ol button[aria-current="step"]::after { opacity:1; transform:scaleX(1); }
.arm-steps ol span { position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%); font-size:13px; font-weight:500; white-space:nowrap; opacity:0; transition:opacity .4s; }
.arm-steps ol button[aria-current="step"] span { opacity:1; }
.arm-play { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--h-strong); border-radius:var(--r7); color:var(--c2); }
.arm-play:hover { color:var(--paper); }
.arm-play svg { width:16px; height:16px; }
.arm-play[aria-pressed="true"] .i-play, .arm-play[aria-pressed="false"] .i-pause { display:none; }
.arm-loading { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:13px; color:var(--c3); }
.arm[data-state="live"] .arm-loading { display:none; }
.arm:not([data-state="live"]) .arm-steps, .arm:not([data-state="live"]) .arm-hud { visibility:hidden; }
@media (max-width:900px) {
  .arm-legend { right:12px; } .arm-legend i { height:110px; }
}

/* Closing */
.closing { padding:var(--section) 0; background:var(--g-work); }
.closing-inner { display:grid; gap:48px; padding-inline:clamp(12px, 2vw, 24px); }
.closing h2 { font-size:clamp(48px, 6.4vw, 92px); font-weight:500; line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.closing h2 span { display:block; color:var(--c2); }
.closing-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:32px; }
.closing-foot p { max-width:52ch; font-size:clamp(17px, 1.35vw, 19px); color:var(--c2); }

/* Footer */
.footer { padding:64px 0 32px; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer-grid > div:first-child { display:grid; gap:16px; align-content:start; }
.footer p { color:var(--c2); }
.footer-fine { font-size:13px; color:var(--c3) !important; }
.footer nav { display:grid; gap:8px; align-content:start; font-size:14px; color:var(--c2); }
.footer nav a:hover, .footer-mail:hover { color:var(--paper); }
.footer-mail { display:inline-block; margin-top:8px; font-size:14px; color:var(--link); text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:64px; padding-top:24px; border-top:1px solid var(--h-subtle); font-size:13px; color:var(--c3); }
@media (max-width:800px) { .footer-grid { grid-template-columns:1fr; gap:32px; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
}
@media (max-width:600px) {
  .arm-feats, .arm-hud span { display:none; }
}

/* the viewer hint under the hero window: small and faint, the icon rocking as if being turned (main.js places it) */
.arm-hint { position:absolute; left:50%; top:100%; z-index:3; display:flex; align-items:center; gap:6px; margin:0; font-size:11px; line-height:16px; color:var(--paper); opacity:0; transform:translate(-50%, 4px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; white-space:nowrap; }
.arm-hint.is-on { opacity:.42; transform:translate(-50%, 0); }
.arm-hint.is-used { opacity:0; }
.arm-hint svg { flex:none; animation:arm-hint-rock 2.4s ease-in-out infinite; }
@keyframes arm-hint-rock { 0%, 100% { transform:rotate(-14deg); } 50% { transform:rotate(14deg); } }
@media (prefers-reduced-motion:reduce) { .arm-hint svg { animation:none; } }

/* the hero frame as a ruled scale, like the sheet under the page (sections.css): a short tick every 24px, a longer one
   every 120px, inward from each line */
.hero-frame { --tick:rgba(255,255,255,.16); }
.hero-frame .f-top::before, .hero-frame .f-bottom::before, .hero-frame .f-left::before, .hero-frame .f-right::before { content:""; position:absolute; pointer-events:none; }
.hero-frame .f-left::before, .hero-frame .f-right::before { top:0; bottom:0; width:10px;
  background:repeating-linear-gradient(to bottom, var(--tick) 0 1px, transparent 1px 120px) 0 0 / 10px 100% no-repeat, repeating-linear-gradient(to bottom, var(--tick) 0 1px, transparent 1px 24px) 0 0 / 4px 100% no-repeat; }
.hero-frame .f-left::before { left:1px; }
.hero-frame .f-right::before { right:1px; transform:scaleX(-1); }
.hero-frame .f-top::before, .hero-frame .f-bottom::before { left:0; right:0; height:10px;
  background:repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 120px) 0 0 / 100% 10px no-repeat, repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 24px) 0 0 / 100% 4px no-repeat; }
.hero-frame .f-top::before { top:1px; }
.hero-frame .f-bottom::before { bottom:1px; transform:scaleY(-1); }

/* phones: the promise and its action first, then the arm; one full-width action per row, within the thumb's reach;
   the closing headline sized to break on its phrases */
@media (max-width:600px) {
  /* the one column is the screen's width: nothing in it (Safari sizes the stage's box from its ratio) may widen it */
  .hero-pin { padding-top:96px; grid-template-columns:minmax(0, 1fr); }
  .hero h1 { font-size:min(8.6vw, 40px); }
  .hero h1 span { display:inline; }
  .hero-type { grid-row:1; }
  .hero-foot { grid-row:2; max-width:none; margin-top:20px; }
  .hero-lead { font-size:17px; line-height:1.55; }
  .hero-foot .button-pair { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; margin-top:4px; }
  .hero-foot .button { width:100%; }
  .hero-pin > .arm-credit { grid-row:4; margin-top:16px; }
  /* the arm on a framed stage, as on wide screens: the ruled frame (its square corner) on the sheet's rails, half a gutter
     in, the stage's name over the top inside it, its stages along the foot, the arm between them (main.js) */
  .hero-art, .hero-frame, .hero-stage { grid-row:3; grid-column:1; margin:28px calc(var(--gutter) / -2) 0; }
  .hero-art { align-self:start; aspect-ratio:1 / 1.16; }
  .hero-frame { display:block; position:relative; inset:auto; }
  .hero-frame .f-top { left:0; right:0; }
  .hero-frame .f-right { top:0; bottom:0; }
  .hero-frame .f-bottom { left:0; right:0; }
  .hero-frame .f-left { top:0; bottom:0; }
  .hero-stage { z-index:3; align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:20px 20px 16px; pointer-events:none; }
  .hero-stage .stage-cap { max-width:34ch; gap:4px; }
  .hero-stage .stage-cap b { font-size:17px; }
  .hero-stage .stage-cap span { font-size:13px; line-height:1.5; }
  .hero-stage .arm-steps { pointer-events:auto; }
  /* the arm fills the stage, so the stress scale stays out (the caption says what the colours are) */
  .hero-pin > .arm .arm-legend { display:none; }
  .closing h2 { font-size:min(10.6vw, 48px); }
  .closing-foot .button { width:100%; }
}

/* ---- languages: a page per language (English, de/, ko/, ja/, zh/; tools/build-root.mjs), listed at the foot of the footer
   with the current one lit */
.footer-bottom .lang-list { display:flex; flex-wrap:wrap; flex-shrink:0; gap:4px 16px; font-size:13px; }
.lang-list a { color:var(--c3); transition:color .15s; }
.lang-list a:hover, .lang-list a[aria-current] { color:var(--paper); }
/* Korean: Hangul in Pretendard beside Inter's Latin (the ko page loads it), headings tracked and leaded for Hangul,
   lines broken between words */
:root:lang(ko) { --sans:'Inter','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
html:lang(ko) body { word-break:keep-all; }
html:lang(ko) :is(h1, h2, h3) { letter-spacing:-.02em; line-height:1.18; }
/* Japanese and Chinese: the system's face, or Noto (the pages load it), beside Inter's Latin, headings leaded for the
   script, strict line breaking; Japanese breaks between phrases where the browser can */
:root:lang(ja) { --sans:'Inter','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif; }
:root:lang(zh) { --sans:'Inter','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif; }
html:is(:lang(ja), :lang(zh)) body { line-break:strict; }
html:lang(ja) body { word-break:auto-phrase; }
html:is(:lang(ja), :lang(zh)) :is(h1, h2, h3) { letter-spacing:-.01em; line-height:1.2; }
/* on phones the headline keeps its two sentences as its two lines */
@media (max-width:600px) { html:is(:lang(ko), :lang(ja), :lang(zh)) .hero h1 span { display:block; } }