/* v6 "Every step but one". One dark workshop (v1's armoury) with five materials: the machine (the worker),
   the light (the signal), the tiles (the work), the paper sheets (the record) and Yeller (a person).
   The notebook tabs on the right edge are its dividers. Plan: concepts/06-plan.md. Copy: concepts/06-copy.md. */

@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --stage: #102622;
  --stage-lift: #1b3a34;
  --stage-raise: #16302b;
  --sheet: #fafaf8;
  --sheet-edge: #deddd7;
  --sheet-ink: #102622;
  --sheet-ink-2: #3a544e;
  --signal-rest: rgba(58, 99, 92, 0.45);
  --signal: #f5f5f3;
  --person: #c89b6d;
  --text-dark: #f5f5f3;
  --text-dark-2: #cccbc5;
  --rail: 40px;
  --ease-lock: cubic-bezier(0.16, 1, 0.3, 1);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* every container takes the hero's frame: 1400px wide, at least 32px from the edges, as the hero's copy and its
     assembly (.hero-copy, .build-copy) are placed */
  --maxw: 1400px;
  --gut: 32px;
  --header-h: 72px;
  --focus: var(--focus-dark);
}

html { background: var(--stage); scroll-padding-top: 88px; }
body { background: var(--stage); color: var(--text-dark); font-size: 17px; line-height: 1.6; overflow-x: clip; }
a { color: inherit; }
.mono { font-family: var(--mono); font-feature-settings: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); position: relative; }
.nb { white-space: nowrap; }

/* ---------------- the stage canvas and the leader lines ---------------- */
.stage { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; display: block; opacity: 0; transition: opacity 240ms cubic-bezier(0.33, 1, 0.68, 1); pointer-events: none; }
.stage.is-live { opacity: 1; }
html:not(.stage3d) .stage { display: none; }
.leaders { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; overflow: visible; transition: opacity 200ms; }
.leaders.is-off { opacity: 0; }
.leaders path { fill: none; stroke: rgba(204, 203, 197, 0.55); stroke-width: 0.75; }
.leaders circle { fill: #cccbc5; }
main, .foot { position: relative; z-index: 1; }

/* ---------------- header ---------------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color 160ms ease, border-color 160ms ease, transform 200ms var(--ease-out-quart); }
.bar.is-solid { background: rgba(16, 38, 34, 0.94); border-bottom-color: var(--signal-rest); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* without JavaScript nothing follows the scroll, so the header is solid from the first paint */
html:not(.js) .bar { background: rgba(16, 38, 34, 0.94); border-bottom-color: var(--signal-rest); }
html:not(.js) .menu-btn { display: none !important; }
.bar.is-hidden { transform: translateY(-100%); }
.bar-inner { height: 100%; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; color: var(--alpaca); flex: none; }
.wordmark { height: 20px; width: auto; fill: currentColor; }
.running-head { font-size: 12px; font-weight: 500; letter-spacing: 0.03em; color: var(--greyboy); white-space: nowrap; opacity: 0; transition: opacity 200ms; padding: 0 10px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* the nav never wraps: the running head gives way first, and goes below 1320 px. It keeps 60 px from the logo (its text
   starts 20 + 30 + 10 px after it) and the bar's spare width goes between it and the nav, now the bar spans the hero's
   frame; the longest label, "p. 10 · Your first workflow", fits with room to spare */
.running-head { margin-left: 30px; margin-right: auto; }
.nav, .nav-list, .nav-list a { white-space: nowrap; }
.nav { flex: none; }
@media (max-width: 1320px) { .running-head { display: none; } }
.running-head .rh-sep { padding: 0 0.35em; }
.bar.is-solid .running-head { opacity: 1; }
.rh-page { font-family: var(--mono); font-weight: 500; color: var(--greyboy); }
.nav { display: flex; align-items: center; gap: 24px; }
.nav-list { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-list a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--text-dark-2); transition: color 120ms; }
.nav-list a:hover { color: var(--alpaca); }
.menu-btn { display: none; background: none; border: 1px solid rgba(204, 203, 197, 0.3); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 500; cursor: pointer; }
.book-short { display: none; }
.menu-panel { position: fixed; inset: 56px 0 0 0; background: var(--stage); padding: 32px 20px; display: flex; flex-direction: column; gap: 32px; z-index: 49; }
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.menu-panel a { text-decoration: none; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.menu-mail { font-size: 17px !important; font-weight: 500 !important; color: var(--text-dark-2); margin-top: auto; }

/* ---------------- buttons and links ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; letter-spacing: -0.01em; border: 0; cursor: pointer; transition: background-color 150ms var(--ease-out-expo), transform 80ms ease; }
.btn:active { transform: scale(0.98); }
.btn-alpaca { background: var(--alpaca); color: var(--pine); }
.btn-alpaca:hover { background: #ffffff; }
.btn-bar { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-yeller { background: var(--person); color: var(--pine); }
.btn-yeller:hover { background: #d4ac83; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness 120ms; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------------- type ---------------- */
.display { font-size: 112px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; }
h2 { font-size: 56px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; max-width: 20ch; }
h3 { font-size: 22px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; }
.lead { font-size: 21px; font-weight: 400; line-height: 1.45; max-width: 56ch; color: var(--text-dark-2); }
.marker { font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-dark-2); margin-bottom: 18px; }
.caption { font-size: 13px; color: var(--text-dark-2); }
.quiet { color: var(--text-dark-2); }
.more { margin-top: 28px; }

/* ---------------- the notebook tabs (industry switcher on the right edge) ---------------- */
/* The rail (and its phone strip) is gone; the industry dropdown in "Built for"
   switches the agent. The tabs stay in the page, hidden, as the record of the industry on show. */
.tabs { display: none !important; }
.tabs { position: fixed; right: 0; top: 0; bottom: 0; width: var(--rail); z-index: 40; pointer-events: none; display: none; transition: opacity 200ms, visibility 0s linear 200ms; }
.tabs.is-away { opacity: 0; visibility: hidden; }
.tabs:not(.is-away) { transition: opacity 200ms; }
.stage3d .tabs.is-on, .stills .tabs.is-on { display: block; }
/* the page edge: one paper hairline down the full height; the active tab is joined to it */
.tabs::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--sheet); opacity: 0.28; transition: opacity 240ms; }
.tabs.is-expanded::before { opacity: 0.5; }
.tabs-list { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; }
/* index tabs: each a clipped divider tab that overlaps the one above by 6 px, Greenlike with a Lichen edge */
.tab { --cut: 9px; position: relative; display: flex; align-items: center; justify-content: center; width: 27px; padding: 18px 0; margin-top: -6px; color: var(--greyboy); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; background: var(--lichen); clip-path: polygon(0 0, 100% var(--cut), 100% calc(100% - var(--cut)), 0 100%); transition: width 200ms var(--ease-out-quart), color 160ms; }
.tab:first-child { margin-top: 0; }
.tab::before { content: ""; position: absolute; inset: 1px 1px 1px 0; background: var(--stage-raise); clip-path: polygon(0 0, 100% calc(var(--cut) - 1px), 100% calc(100% - var(--cut) + 1px), 0 100%); transition: background-color 160ms; }
.tab span { position: relative; z-index: 1; writing-mode: vertical-rl; white-space: nowrap; transition: opacity 160ms; }
.tab:hover, .tab:focus-visible { width: 30px; color: var(--alpaca); }
.tab:hover::before, .tab:focus-visible::before { background: var(--stage-lift); }
/* the active tab: wider, paper, part of the page */
.tab[aria-selected="true"] { width: 33px; background: var(--sheet); color: var(--sheet-ink); z-index: 2; }
.tab[aria-selected="true"]::before { background: var(--sheet); inset: 1px 0; }
.tab-dot { position: absolute; z-index: 1; bottom: 12px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--person); opacity: 0; transition: opacity 200ms; }
.tab.is-waiting .tab-dot { opacity: 1; }
/* collapsed: the same stack as 8 px slivers, never one white bar */
.tabs:not(.is-expanded) .tab { width: 8px; --cut: 4px; }
.tabs:not(.is-expanded) .tab[aria-selected="true"] { width: 10px; }
.tabs:not(.is-expanded) .tab span, .tabs:not(.is-expanded) .tab-dot { opacity: 0; }
.tabs:not(.is-expanded):hover .tab, .tabs:not(.is-expanded):focus-within .tab { width: 27px; --cut: 9px; }
.tabs:not(.is-expanded):hover .tab[aria-selected="true"], .tabs:not(.is-expanded):focus-within .tab[aria-selected="true"] { width: 33px; }
.tabs:not(.is-expanded):hover .tab span, .tabs:not(.is-expanded):focus-within .tab span { opacity: 1; }
.tabs-replay { position: absolute; left: 3px; top: calc(50% + 330px); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--lichen); background: var(--stage); color: var(--alpaca); display: grid; place-items: center; cursor: pointer; pointer-events: auto; padding: 0; }
.tabs-replay[hidden] { display: none; }
.tabs-replay svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tabs-hint { position: absolute; right: calc(var(--rail) + 14px); top: auto; bottom: 64px; width: 230px; font-size: 13px; line-height: 1.4; color: var(--greyboy); text-align: right; opacity: 0; transition: opacity 120ms; pointer-events: none; }
.tabs-hint::after { content: ""; position: absolute; right: -14px; top: 9px; width: 10px; height: 1px; background: var(--lichen); }
/* in over 400 ms, out over 120 ms: it leaves before the band's words reach it */
.tabs-hint.is-on { opacity: 1; transition: opacity 400ms; }
.hint-m { display: none; }

/* ---------------- #top: the hero and the build ---------------- */
.build { position: relative; }
.stage3d .build-track { height: calc((var(--screens, 3.09) + 1) * 100svh); }
.build-sticky { position: relative; min-height: 100svh; }
.stage3d .build-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* the hero block (poster, scrim, words) adds no box of its own, except in stills mode on phones (below) */
.hero { display: contents; }
.poster { position: absolute; inset: 0; z-index: 0; }
.poster img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.poster.is-gone { opacity: 0; transition: opacity 240ms cubic-bezier(0.33, 1, 0.68, 1); }
/* without 3D (reduced motion, no WebGL, no JavaScript) the hero's first viewport shows the poster, the live
   hero's own first frame, with the words over its dark left half */
html:not(.stage3d) .poster { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 100svh; }
html:not(.stage3d) .poster img { object-position: 62% 50%; }
.scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16, 38, 34, 0.7) 0%, rgba(16, 38, 34, 0.35) 34%, rgba(16, 38, 34, 0) 50%); }
html:not(.stage3d) .build .scrim { bottom: auto; height: 100svh; }
html:not(.stage3d) .hero-copy { min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
html:not(.stage3d) .hero-copy > * { max-width: min(560px, 46vw); }

.hero-copy, .build-copy { position: absolute; z-index: 3; left: max(var(--gut), calc((100vw - 1400px) / 2)); width: min(560px, calc(46vw - max(var(--gut), (100vw - 1400px) / 2))); }
/* the build's column ends by 40 per cent of the width */
.build-copy { width: calc(40vw - max(var(--gut), (100vw - 1400px) / 2)); }
/* the hero's words are centred in the stage below the header, as the build's are */
.hero-copy { top: var(--header-h); bottom: 28px; display: grid; gap: 22px; align-content: center; }
.opening { font-size: 18px; color: var(--text-dark-2); max-width: 52ch; }
.credential { padding-top: 20px; border-top: 1px solid rgba(204, 203, 197, 0.2); font-size: 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
/* the scroll cue sits in the hero's own flow under the button row, where the hero's industry picker was
   (the picker stays only on "Built for"), and goes on the first scroll. It fades inside its row, the row carrying the
   entrance, so the two never fight over opacity. */
.cue { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--greyboy); transition: opacity 320ms var(--ease-out-quart), transform 320ms var(--ease-out-quart); }
.cue.is-gone { opacity: 0; transform: translateY(6px); pointer-events: none; }
/* the hero's words come in on load as v5's do (v5-swarm/style.css): the headline word by word
   (rise, 640 ms, ease-out-expo, 40 ms apart), then each block fading up 14 px over 520 ms at +0.3, 0.4, 0.5, 0.6 and
   0.7 s. Reduced motion: no entrance. */
/* Word masks: ONE rule for every line whose words rise out of their own masks ([data-rise]: the hero headline, the
   build's part names, and each part's name and line). v6's display type is tight (0.92 to 0.95) and tracked in
   (-0.04 to -0.045em), so the y, p, g, j and q hang below their word's box and a last glyph's ink (a full stop, a
   comma) runs past its right edge. So:
   - each word's box has room on every side, with negative margins so the lines stay put;
   - it masks only while its rise plays: main.js (watchRise) marks the line is-entered when the last word has landed
     and takes that away when the line rises again; with no rise running (phones' step copy, reduced motion, the proof
     harness's seek) there is no mask at all;
   - a word starts its height plus 0.32em down, so no cap tops show in that room before it moves. */
[data-rise] .w { display: inline-block; padding: 0.1em 0.14em 0.28em 0.1em; margin: -0.1em -0.14em -0.28em -0.1em; vertical-align: top; }
[data-rise] .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise]:not(.is-entered) .w { overflow: hidden; }
  /* the headline on load (640 ms, 40 ms apart); the build's lines each time their part comes up (520 ms, 60 ms apart) */
  .js .hero-copy [data-rise] .w > span { animation: rise 640ms var(--ease-out-expo) both; animation-delay: calc(var(--wi) * 40ms); }
  .js [data-rise].is-in .w > span { animation: rise 520ms var(--ease-out-expo) both; animation-delay: calc(var(--wi, 0) * 60ms); }
  .js .hero-copy [data-enter] { animation: fadeup 520ms var(--ease-out-expo) both; animation-delay: var(--d, 0s); }
}
.seeking [data-rise] .w > span { animation: none !important; }
@keyframes rise { from { transform: translateY(calc(100% + 0.32em)); } to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
.cue i { width: 48px; height: 1px; background: var(--greyboy); display: block; }
/* the industry dropdown: a ghost button with the industry's name and
   an up-down mark on the industry word in "Built for", opening a small macOS-style menu */
.ind-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border: 1px solid rgba(245, 245, 243, 0.18); border-radius: 8px; background: rgba(245, 245, 243, 0.04); color: var(--alpaca); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: inherit; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; }
.ind-btn:hover, .ind-btn[aria-expanded="true"] { background: rgba(245, 245, 243, 0.09); border-color: rgba(245, 245, 243, 0.32); }
.ind-chev { width: 9px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.ind-btn-inline { height: 26px; padding: 0 7px 0 8px; margin: -3px 0 -3px 2px; gap: 6px; border-radius: 6px; font-size: 15px; vertical-align: middle; }
.ind-menu { position: fixed; z-index: 70; min-width: 196px; padding: 5px; box-sizing: border-box; border-radius: 10px; background: rgba(30, 50, 45, 0.84); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border: 1px solid rgba(245, 245, 243, 0.14); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.6); opacity: 0; transform: scale(0.97); transform-origin: top left; transition: opacity 110ms ease-out, transform 110ms ease-out; outline: none; }
.ind-menu.is-open { opacity: 1; transform: none; }
.ind-menu.is-up { transform-origin: bottom left; }
.ind-opt { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px 0 7px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--alpaca); white-space: nowrap; cursor: default; user-select: none; }
.ind-opt.is-hot { background: var(--lichen); }
.ind-tick { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.ind-opt[aria-selected="true"] .ind-tick { visibility: visible; }
html:not(.js) .ind-btn .ind-chev { display: none; }
html:not(.js) .ind-btn { border: 0; padding: 0; background: none; height: auto; margin: 0; cursor: auto; }
.stage3d .hero-copy { opacity: calc(1 - var(--hero-out, 0)); transform: translateY(calc(var(--hero-out, 0) * -24px)); }
.stage3d .hero-copy[data-gone] { visibility: hidden; }

/* one column, vertically centred on the machine */
.build-copy { top: calc(var(--header-h) + 20px); bottom: 28px; display: flex; flex-direction: column; justify-content: center; }
.stage3d .build-copy { opacity: var(--build-in, 0); transform: translateY(calc((1 - var(--build-in, 0)) * 24px)); }
.stage3d .build-copy[data-gone] { visibility: hidden; }
.built-for { font-size: 15px; font-weight: 600; color: var(--alpaca); display: flex; flex-direction: column; gap: 3px; }
.built-for .bp-sep { display: none; }
.built-for .mono { font-size: 13px; font-weight: 450; color: var(--greyboy); }
/* the h2 shows large once, then shrinks into the column's header */
.build-head h2 { font-size: 44px; line-height: 1.04; letter-spacing: -0.03em; max-width: 15ch; }
.build-lead { font-size: 18px; color: var(--greyboy); margin-top: 12px; max-width: 40ch; }
/* one heading at a time. The h2 and its lead hold the slot until the first part is on show; then each
   part's name takes the h2's place, and after Log "Six parts. One agent. One person with the pen." does. Under it sit
   the ladder and the part's line, or the release. The names and the release line also stay in their own blocks,
   visually hidden, for screen readers. */
.head-slot { display: grid; margin-top: 14px; transition: height 420ms var(--ease-out-quart); }
.head-slot > * { grid-area: 1 / 1; align-self: start; }
.seeking .head-slot { transition: none; }
.head-intro { transition: opacity 300ms var(--ease-out-quart), transform 420ms var(--ease-out-quart), visibility 0s; }
.build-copy.is-compact .head-intro { opacity: 0; transform: translateY(-18px); visibility: hidden; transition: opacity 240ms var(--ease-out-quart), transform 420ms var(--ease-out-quart), visibility 0s linear 420ms; }
.head-titles { list-style: none; margin: 0; padding: 0; display: grid; }
.head-titles li { grid-area: 1 / 1; font-size: clamp(46px, 4.4vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; visibility: hidden; }
.head-titles li.is-on { visibility: visible; }
.head-release { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; max-width: 14ch; opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity 300ms, transform 420ms var(--ease-out-quart), visibility 0s linear 300ms; }
.build-copy.is-release .head-release { opacity: 1; transform: none; visibility: visible; transition: opacity 320ms 120ms, transform 520ms var(--ease-out-expo) 120ms, visibility 0s; }
.build-copy.is-release .head-titles li { visibility: hidden; }
.step-name, .release-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the ladder: the six parts, done, current and to come; each rung jumps to its step */
.build-body { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 26px; margin-top: 30px; align-items: start; }
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--signal-rest); }
.ladder a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: rgba(204, 203, 197, 0.68); font-size: 15px; font-weight: 600; text-decoration: none; transition: color 200ms, border-color 200ms; }
.ladder .ln { font-size: 11px; font-weight: 500; letter-spacing: 0; }
.ladder a:hover, .ladder a:focus-visible { color: var(--alpaca); }
.ladder li.is-done a { color: var(--greyboy); }
.ladder li.is-done .ln { color: #7fa89f; }
.ladder li.is-cur a { color: var(--alpaca); border-left-color: var(--alpaca); }
.build-detail { position: relative; min-height: 200px; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.step { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }
.step.is-on { visibility: visible; }
.step-n { font-size: 13px; color: var(--greyboy); position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.step-name { font-size: clamp(46px, 4.4vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; margin-top: -4px; }
.step-line { font-size: 22px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.32; margin-top: 4px; max-width: 22ch; }
.step-gen { font-size: 15px; font-weight: 500; color: var(--greyboy); margin-top: 12px; }
.release { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; opacity: 0; transition: opacity 300ms; }
.release.is-on { visibility: visible; opacity: 1; }
.release-line { font-size: 38px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; max-width: 14ch; }
.release-state { font-size: 17px; color: var(--greyboy); margin-top: 4px; }
.rs-done { display: none; color: var(--alpaca); }
.release.is-released .rs-wait { display: none; }
.release.is-released .rs-done { display: inline; }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; }
.release.is-released #release-btn { background: var(--stage-raise); color: var(--greyboy); pointer-events: none; }
.replay { background: none; border: 0; color: var(--alpaca); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; font-weight: 500; cursor: pointer; padding: 0; }
.stills .replay { display: none; }
.release .caption { margin-top: 14px; }
.build-progress { display: flex; gap: 6px; margin-top: auto; }
.build-progress i { width: 18px; height: 3px; border-radius: 2px; background: var(--signal-rest); transition: background-color 200ms; }
.build-progress i.is-on { background: var(--alpaca); }
/* the labels live in the leaders' fixed layer, in the canvas's own screen space, so a label never parts from its
   leader or its part as the build un-sticks; both fade out together as it does */
.labels { list-style: none; margin: 0; padding: 0; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* v1's quiet readout: a name and a hairline, no box */
.labels li { position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--greyboy); padding: 2px 0; white-space: nowrap; opacity: 0; transition: opacity 200ms, color 200ms; will-change: transform; text-shadow: 0 1px 8px rgba(16, 38, 34, 0.9); }
.labels li.is-on { opacity: 1; }
.labels li.is-dim { opacity: 0.75; }
.labels li.is-lit { opacity: 1; color: var(--alpaca); }

/* the static build panels: reduced motion and no JavaScript */
.statics { display: none; }
html:not(.stage3d) .statics { display: block; }
.static { display: none; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 24px var(--gut) 0; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.static-default { display: grid; }
.statics:has(.static:target) .static-default:not(:target) { display: none; }
.static:target { display: grid; }
.stills .static { display: none; }
.stills .static.is-shown { display: grid; }
.static-img { width: 100%; height: auto; border-radius: 10px; background: var(--stage-raise); aspect-ratio: 4 / 3; object-fit: cover; }
.static-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.static-switch { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; }
.static-switch a { color: var(--alpaca); }
.static-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: ss; display: grid; gap: 12px; font-size: 16px; color: var(--greyboy); }
.static-steps li { counter-increment: ss; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); align-items: baseline; }
.static-steps li::before { content: counter(ss) "."; font-family: var(--mono); font-size: 13px; color: var(--greyboy); }
.static-steps li > * { grid-column: 2; }
.static-steps .ls { grid-column: 2; }
.ss-n { font-weight: 700; color: var(--alpaca); }
.ss-part { display: block; font-size: 12px; color: var(--greyboy); opacity: 0.8; }
.static-rel { margin-top: 16px; font-size: 15px; color: var(--alpaca); }
html:not(.stage3d) .hero-copy, html:not(.stage3d) .build-copy { position: relative; left: auto; right: auto; width: auto; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); top: auto; bottom: auto; }
html:not(.stage3d) .hero-copy { padding-top: calc(var(--header-h) + 64px); padding-bottom: 64px; }
html:not(.stage3d) .cue-row, html:not(.stage3d) .steps, html:not(.stage3d) .ladder, html:not(.stage3d) .labels { display: none; }
html:not(.stage3d) .build-body { display: block; margin-top: 0; order: 2; }
html:not(.stage3d) .build-copy { display: flex; flex-direction: column; }
html:not(.stage3d) .statics { order: 1; }
html:not(.stage3d) .build-detail { min-height: 0; }
html:not(.stage3d) .release { position: relative; bottom: auto; visibility: visible; opacity: 1; padding: 40px var(--gut) 0; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; }
html:not(.js) .release-actions { display: none; }

/* what it is not */
.not-row { position: relative; z-index: 2; padding: 64px 0; background: var(--stage); }
/* the band opens on the hero's old lead: centred, so its shorter second line sits in the middle under
   the first, with the approval in bold Yeller, the human moment's colour; then a quotation in italics, in
   curly quotes. Inter's own italic (OFL), one 11 KB instance each at 500 and 700 for this line. */
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("assets/fonts/InterItalic-500-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+2018-201D, U+2026; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("assets/fonts/InterItalic-700-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+2018-201D, U+2026; }
.not-lead { max-width: 36em; margin: 0 auto 44px; text-align: center; font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.3; letter-spacing: -0.014em; color: var(--alpaca); }
.not-lead p { max-width: none; font-size: inherit; }
.not-lead strong { font-weight: 700; color: var(--person); }
/* the three columns run edge to edge of the content width, each the same width, with the rules
   centred in the gaps and the text filling its column (no measure cap), so the right side is never left empty */
.not-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; }
.not-grid > div { position: relative; text-align: center; }
.not-grid > div + div::before { content: ""; position: absolute; left: -36px; top: 0; bottom: 0; border-left: 1px solid var(--signal-rest); }
.not-grid h3 { font-size: 24px; font-weight: 700; }
/* each column's words centred in their column (justified lines looked gappy) */
.not-grid p { margin-top: 10px; color: var(--greyboy); font-size: 17px; max-width: none; }

/* ---------------- sections ---------------- */
.section { position: relative; padding: 128px 0; }

/* ---------------- from "Before you start" to the footer: v5, ported whole ----------------
   v5-swarm/style.css, rule for rule, scoped to .v5 so none of it reaches v6's own sections (html.swarm-on is
   html.swarm5-on here, html.rm is html.v5-rm, and .panel is v5's three panels only). The six-parts section is
   left out (the hero has it), and "The usual programme, and ours." is v6's own (.v6-strip, below). */
@font-face { font-family: "Doto"; src: url("assets/v5/fonts/Doto-digits.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+20, U+30-39; }
.v5 { --lift: #1b3a34; --text-3: #979d97; --focus: var(--focus-dark); --margin: 32px; --gutter: 40px; --maxw: 1400px; --bar-h: 64px; --num: "Doto", ui-monospace, "SF Mono", Menlo, monospace; }
/* no ground of its own: the particles (#swarm5, behind the page) show through, as on v5's transparent page */
.v5-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(16, 38, 34, 0.92) 0%, rgba(16, 38, 34, 0.86) 38%, rgba(16, 38, 34, 0) 52%); opacity: 0; transition: opacity 300ms; }
html.swarm5-on .v5-scrim { opacity: 1; }
.v5-overlay { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
html.swarm5-on .v5-overlay { display: block; }
.v5 .label { position: absolute; left: 0; top: 0; will-change: transform, opacity; opacity: 0; }
.v5 { color: var(--alpaca); font-size: 17px; line-height: 1.6; }
.v5 a { color: inherit; }
.v5 .label-week { font-size: 13px; color: var(--text-3); margin-left: -24px; }
/* the start section's six-week rail: the week under each block, quiet until its week
   comes round (done weeks Greyboy, the current one Alpaca), and the three words the loop says, a line below */
.v5 .label-rail { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #6f7a74; white-space: nowrap; transition: color 240ms ease-out; }
.v5 .label-rail > span { display: block; transform: translateX(-50%); }
.v5 .label-rail.is-done { color: var(--greyboy); }
.v5 .label-rail.is-now { color: var(--alpaca); }
.v5 .label-rail-word { font-family: inherit; font-size: 13px; font-weight: 520; letter-spacing: 0; color: var(--alpaca); margin-top: 26px; }
.v5 .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.006em; transition: background-color 120ms ease-out, transform 80ms ease-out; cursor: pointer; }
.v5 .btn-pill { background: var(--alpaca); color: var(--pine); border-radius: 999px; padding: 10px 20px; }
.v5 .btn-pill:hover { background: #ffffff; }
.v5 .btn-pill:active { transform: scale(0.98); }
.v5 .btn-lg { padding: 14px 26px; font-size: 16px; }
.v5 .btn-xl { padding: 18px 32px; font-size: 17px; min-height: 56px; }
.v5 .link { color: var(--alpaca); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--lichen); transition: text-decoration-thickness 120ms ease-out; }
.v5 .link:hover { text-decoration-thickness: 2px; text-decoration-color: var(--yeller); }
.v5 .muted { color: var(--greyboy); }
.v5 h2 { font-size: 44px; font-weight: 680; letter-spacing: -0.028em; line-height: 1.04; }
.v5 h3 { font-size: 22px; font-weight: 620; letter-spacing: -0.014em; line-height: 1.25; }
.v5 .lead { font-size: 21px; font-weight: 420; letter-spacing: -0.008em; line-height: 1.5; color: var(--greyboy); max-width: 56ch; }
.v5 .marker { font-size: 13px; font-weight: 620; letter-spacing: 0.01em; color: var(--greyboy); margin-bottom: 18px; }
.v5 .copy p { max-width: 64ch; }
.v5 { position: relative; z-index: 3; }
/* no 120vh floor, so a short section ends with its words (the
   formations time themselves to each section's heading and last line, v5page.js), and one even gap between sections */
.v5 .sec { position: relative; min-height: 0; max-width: calc(var(--maxw) + 2 * var(--margin)); margin: 0 auto; padding: 18vh var(--margin) 10vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; }
.v5 .copy { grid-column: 1 / span 5; grid-row: 1; position: relative; }
.v5 .copy > * + * { margin-top: 20px; }
.v5 .copy h2 + * { margin-top: 24px; }
.v5 .stage-slot { grid-column: 6 / -1; grid-row: 1 / span 4; position: relative; display: none; }
.v5 .window { display: none; }
html:not(.swarm5-on) .v5 .stage-slot { display: block; }
.v5 .plate { position: sticky; top: 14vh; margin: 0; }
.v5 .plate img { width: 100%; height: auto; display: block; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.v5 .plate figcaption { font-size: 13px; color: var(--text-3); margin-top: 10px; }
html.swarm5-on .v5 .plate { display: none; }
.js .v5 [data-reveal] { opacity: 0; transform: translateY(14px); }
.js .v5 [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 60ms + var(--d, 0s)); }
.v5 .ruled { margin: 28px 0 0; padding: 0; list-style: none; }
.v5 .ruled li { padding: 18px 0; border-top: 1px solid var(--mossy); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.v5 :is(.panel-wide, .panel-queue) { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 26px 28px; --focus: var(--focus-light); }
.v5 :is(.panel-wide, .panel-queue) a { color: var(--ink); }
.v5 .panel-wide { grid-column: 1 / -1; grid-row: 2; margin-top: 64px; }
.v5 .compare-panel h3 { color: var(--ink); margin-bottom: 18px; }
.v5 .compare { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.v5 .compare li { border-top: 1px solid var(--rule); padding-top: 14px; }
.v5 .cmp-axis { font-size: 13px; font-weight: 620; color: var(--ink-2); margin-bottom: 10px; }
.v5 .compare dl { margin: 0; }
.v5 .compare dt { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.v5 .compare dd { margin: 2px 0 12px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.v5 .compare dt.us { color: var(--ink); padding-top: 12px; border-top: 1px solid var(--rule); }
.v5 .compare dd.us { color: var(--ink); font-weight: 520; }
/* the four deliverables are cards, as "Already running"'s are, and the one on the reading line lights
   with its construction in the formation (v5page.js) */
.v5 .deliver { margin-top: 30px; display: grid; gap: 14px; }
.v5 .deliver-row { background: var(--greenlike); border: 1px solid var(--mossy); border-radius: 14px; padding: 18px 20px; transition: border-color 200ms, background-color 200ms; }
.v5 .deliver-row.is-read { border-color: var(--lichen); background: #19362f; }
.v5 .deliver-row p { margin-top: 6px; color: var(--greyboy); }
.v5 .deliver-row .example { font-size: 14px; color: var(--greyboy); border-left: 2px solid var(--lichen); padding-left: 12px; margin-top: 10px; }
.v5 .h2-row { display: flex; align-items: flex-end; gap: 22px; }
.v5 .big-num { font-family: var(--num); font-weight: 700; font-size: 120px; line-height: 0.8; color: var(--greyboy); }
.v5 .cat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 30px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--mossy); font-size: 14px; }
.v5 .cat-list a { color: var(--greyboy); text-decoration: none; }
.v5 .cat-list a:hover { color: var(--alpaca); text-decoration: underline; text-decoration-color: var(--lichen); }
.v5 .tiles { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.v5 .tile { background: var(--greenlike); border: 1px solid var(--mossy); border-radius: 14px; padding: 18px 20px; transition: border-color 200ms, background-color 200ms; }
.v5 .tile.is-read { border-color: var(--lichen); background: #19362f; }
.v5 .tile .dept { font-size: 12px; font-weight: 600; color: var(--greyboy); }
.v5 .tile h3 { margin-top: 4px; font-size: 20px; }
.v5 .tile p { font-size: 15px; color: var(--greyboy); margin-top: 6px; }
.v5 .tile .shape { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--text-3); border-top: 1px solid var(--mossy); padding-top: 10px; margin-top: 12px; }
.v5 .scroll-hint { display: none; font-size: 12px; color: var(--ink-3); margin-bottom: 8px; }
.v5 .table-scroll { overflow-x: auto; }
.v5 table.queue { width: 100%; font-size: 14px; font-weight: 450; }
.v5 table caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--ink-3); padding-top: 12px; }
.v5 table.queue th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 0 12px 8px 0; border-bottom: 1px solid var(--rule); }
.v5 table.queue td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--divider); color: var(--ink); vertical-align: top; }
.v5 table.queue td:first-child { color: var(--ink-2); white-space: nowrap; }
.v5 .st { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.v5 .st-log { background: var(--lichen); }
.v5 .st-wait { background: var(--yeller); }
.v5 .panel-queue { margin-top: 30px; }
.v5 .queue-foot { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.v5 .sq-y, .v5 .sq { display: inline-block; width: 6px; height: 6px; border-radius: 1px; margin-right: 10px; vertical-align: 2px; }
.v5 .sq-y { background: var(--yeller); }
.v5 .sq { background: var(--lichen); }
.v5 .guardrails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin: 40px 0 0; padding: 0; list-style: none; }
.v5 .guardrails li { border-top: 1px solid var(--mossy); padding-top: 12px; }
.v5 .guardrails h3 { font-size: 18px; }
.v5 .guardrails p { font-size: 15px; color: var(--greyboy); margin-top: 4px; }
.v5 .closing { border-top: 1px solid var(--mossy); padding-top: 16px; margin-top: 30px; color: var(--greyboy); }
.v5 .release { margin-left: 10px; background: var(--yeller); color: var(--pine); border: 0; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 650; cursor: pointer; transition: transform 80ms ease-out, background-color 120ms; }
.v5 .release:hover { background: #d4aa7f; }
.v5 .release:active { transform: scale(0.96); }
.v5 .release:focus-visible { outline-color: var(--pine); }
.v5 table.phases { width: 100%; margin-top: 30px; }
.v5 table.phases tr { display: block; padding: 18px 0 20px; border-top: 1px solid var(--mossy); transition: opacity 200ms; }
.v5 table.phases td, .v5 table.phases th { display: block; text-align: left; padding: 0; }
.v5 table.phases .num { font-family: var(--num); font-weight: 700; font-size: 40px; line-height: 1; color: var(--greyboy); }
.v5 table.phases th { font-size: 22px; font-weight: 620; letter-spacing: -0.014em; margin-top: 10px; }
.v5 table.phases td:not(.num) { margin-top: 8px; font-size: 15px; color: var(--greyboy); }
.v5 table.phases .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
/* each phase is a card, and the one on the reading line lights as the running tiles do (v5page.js
   toggles is-read with the station that steps forward on the track) */
.v5 table.phases tbody { display: grid; gap: 14px; }
.v5 table.phases tbody tr { padding: 18px 20px 20px; border: 1px solid var(--mossy); border-radius: 14px; background: var(--greenlike); transition: border-color 200ms, background-color 200ms; }
.v5 table.phases tbody tr.is-read { border-color: var(--lichen); background: #19362f; }
.v5 table.phases tr.is-read .num { color: var(--alpaca); }
.v5 .commercial { margin-top: 26px; color: var(--greyboy); }
.v5 .recog { margin: 28px 0 0; padding: 0; list-style: none; }
.v5 .recog li { padding: 10px 0 10px 22px; position: relative; }
.v5 .recog li::before { content: ""; position: absolute; left: 0; top: 20px; width: 4px; height: 4px; background: var(--lichen); }
/* the section ends on its link */
.v5 #fit-end { margin-top: 24px; }
/* the queue's Release button (v5page.js), v5's own style; v6's .release name belongs to the build's release panel */
.v5 .q-release { margin-left: 10px; background: var(--yeller); color: var(--pine); border: 0; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 650; cursor: pointer; transition: transform 80ms ease-out, background-color 120ms; }
.v5 .q-release:hover { background: #d4aa7f; }
.v5 .q-release:active { transform: scale(0.96); }
.v5 .q-release:focus-visible { outline-color: var(--pine); }
.v5 #fit h3 { margin-top: 40px; }
.v5 .caption { color: var(--text-3); font-size: 14px; }
.v5 .rules { margin: 30px 0 0; padding: 0; list-style: none; }
.v5 .rules li { border-top: 1px solid var(--mossy); padding: 18px 0 22px; }
.v5 .rules p { margin-top: 6px; color: var(--greyboy); }
/* the start section is as tall as its words */
.v5 .sec-start { padding-top: 22vh; padding-bottom: 10vh; }
/* v6 desktop: the section pins and the scroll scrubs the six-week rail (v5page.js, railScrub). The copy
   sticks where it stands at the pin (22vh) beside an empty row as tall as the scrub plus the copy, so it holds for exactly
   the scrub and then scrolls on into the questions. Phones keep the looping rail. */
@media (min-width: 720px) {
  html.swarm5-on .v5 .sec-start::after { content: ""; grid-column: 7 / -1; grid-row: 1; height: var(--rail-row, 0px); }
  html.swarm5-on .v5 .sec-start .copy { position: sticky; top: 22vh; align-self: start; }
}
.v5 .sec-start .copy { grid-column: 1 / span 6; max-width: 720px; }
.v5 .sec-start .lead { color: var(--greyboy); }
.v5 .copy-faq { grid-column: 1 / span 7; }
.v5 .faq { margin-top: 30px; }
.v5 .faq details { border-top: 1px solid var(--mossy); }
.v5 .faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; }
.v5 .faq summary h3 { font-size: 20px; }
.v5 .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--greyboy), var(--greyboy)) center / 12px 1.5px no-repeat, linear-gradient(var(--greyboy), var(--greyboy)) center / 1.5px 12px no-repeat; transition: transform 160ms ease-out; }
.v5 .faq details[open] summary::after { transform: rotate(45deg); }
.v5 .faq details p { margin: 0 0 18px; color: var(--greyboy); max-width: 64ch; }
@media (max-width: 1080px) {
  .v5 { --margin: 32px; --gutter: 24px; }
  .v5 h2 { font-size: 36px; }
  .v5 .copy { grid-column: 1 / span 6; }
  .v5 .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .v5-scrim { display: none !important; }
  /* phones keep the overlay for the rail's labels alone (v5's week labels stay off there); it sits under the copy, so
     the labels show only through the start section's window, with the formation */
  .v5-overlay .label-week { display: none; }
  .v5 .label-rail { font-size: 11px; }
  .v5 .label-rail-word { font-size: 12px; margin-top: 23px; }
  .v5 { --margin: 20px; --gutter: 20px; --bar-h: 56px; }
  .v5 { font-size: 16px; }
  .v5 h2 { font-size: 30px; }
  .v5 h3 { font-size: 19px; }
  .v5 .lead { font-size: 18px; }
  .v5 .sec { display: block; min-height: 0; padding: 0; }
  .v5 .sec > * { position: relative; }
  .v5 .copy { padding: 36px var(--margin) 44px; }
  html.swarm5-on .v5 .copy { background: var(--pine); }
  html.swarm5-on .v5 .window { display: block; height: 56svh; }
  /* v6 mobile split (phones; ?nosplit turns it off; v5page.js): from the problem to the rail one window pins under the menu bar
     (which no longer hides, main.js) down to half the screen, and every section's copy scrolls up under it. While it is pinned the window is solid and the particles' canvas
     sits over the page, clipped to it and fading out over its last 48 px; under its edge the copy dissolves into the
     pine through a 56 px band of fade and blur. The quote band keeps only the quote. */
  html.m-split.swarm5-on .split-run > .split-window { display: block; position: sticky; top: var(--header-h); height: calc(50svh - var(--header-h)); z-index: 2; }
  html.m-split .split-window.is-pinned { background: var(--pine); }
  html.m-split .split-window::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 56px; pointer-events: none; background: linear-gradient(to bottom, var(--pine) 0%, rgba(16, 38, 34, 0.85) 35%, rgba(16, 38, 34, 0) 100%); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
  html.m-split .split-run .sec > .window { display: none; }
  html.m-split .swarm5.is-over { z-index: 2; }
  html.m-split .not-grid { display: none; }
  html.m-split .not-lead { margin-bottom: 0; }
  /* the rail: its copy holds just under the window while the scroll scrubs it (v5page.js, SPLIT_SCRUB) */
  html.m-split .split-run #start::after { content: ""; display: block; height: var(--rail-row, 0px); }
  html.m-split .split-run #start > .copy { position: sticky; top: calc(50svh + 20px); }
  .v5 .stage-slot { padding: calc(var(--bar-h) + 12px) var(--margin) 0; }
  .v5 .plate { position: static; }
  .v5 .panel-wide { margin: 0 var(--margin) 32px; }
  html.swarm5-on .v5 .panel-wide { margin: 0; border-radius: 0; padding: 28px var(--margin); background: var(--paper); }
  .v5 .compare { grid-template-columns: minmax(0, 1fr); }
  .v5 .scroll-hint { display: block; }
  /* the queue fits a 390 screen whole, nothing cut at the card's edge: closer
     columns, and the Release button under its row's state. Narrower phones still scroll it
     sideways, and only they get the hint (v5page.js) */
  .v5 table.queue { font-size: 13px; }
  .v5 table.queue th, .v5 table.queue td { padding-right: 8px; }
  .v5 table.queue th:last-child, .v5 table.queue td:last-child { padding-right: 0; }
  .v5 .q-release { display: block; width: max-content; margin: 6px 0 0; }
  .v5 .scroll-hint.is-moot { display: none; }
  .v5 .h2-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v5 .big-num { font-size: 72px; order: -1; }
  .v5 .guardrails { grid-template-columns: minmax(0, 1fr); }
  .v5 .sec-start .copy { padding-top: 40px; padding-bottom: 64px; }
  html.swarm5-on .v5 .window-sting { display: block; height: 62svh; width: 100%; }
}
@media (max-width: 380px) {
  .v5 h2 { font-size: 27px; }
}
@media (prefers-contrast: more) {
  .v5 { --text-3: #b5bab5; --mossy: #3a635c; }
}
/* a dark panel in the place of v5's paper one, so the particles never show between its cards. It stands well clear
   of the problem's copy and formation above it */
.v5 .v6-strip { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(150px, 22vh, 240px); background: rgba(16, 38, 34, 0.97); border: 1px solid var(--mossy); border-radius: 14px; padding: 26px 28px 28px; }
.v5 .v6-strip .strip-h { margin-top: 0; }
/* v6's "The usual programme, and ours.", not v5's */
.v6-strip .strip-h { font-size: 30px; font-weight: 700; margin-top: 96px; }
.v6-strip .dodont { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v6-strip .dodont > li { display: grid; grid-template-rows: auto 1fr 1fr; gap: 10px; }
.v6-strip .axis { font-size: 13px; font-weight: 600; color: var(--greyboy); padding-top: 12px; border-top: 1px solid var(--signal-rest); }
.v6-strip .panel { position: relative; border-radius: 10px; padding: 14px 16px 16px; font-size: 15px; line-height: 1.45; }
.v6-strip .panel .badge { position: absolute; top: 12px; right: 12px; }
.v6-strip .panel .pict { display: block; width: 100%; height: 76px; margin: 2px 0 8px; }
.v6-strip .panel .pict svg { width: 100%; height: 100%; }
.v6-strip .panel .pict.is-empty { display: none; }
.v6-strip .panel-lab { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.v6-strip .dont { background: #eeede8; color: var(--sheet-ink-2); }
.v6-strip .do { background: var(--sheet); color: var(--sheet-ink); box-shadow: inset 0 0 0 1.5px var(--lichen); }
.v6-strip .badge { display: inline-block; width: 22px; height: 22px; border-radius: 50%; }
.v6-strip .badge-x { background: var(--pine); }
.v6-strip .badge-v { background: var(--lichen); }
.v6-strip .badge-x::before, .v6-strip .badge-x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 10px; height: 2px; background: var(--alpaca); border-radius: 1px; transform: rotate(45deg); }
.v6-strip .badge-x::after { transform: rotate(-45deg); }
.v6-strip .badge-v::before { content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 10px; border: solid var(--alpaca); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.js .v6-strip .build .b { opacity: 0; }
.js .v6-strip .is-in .build .b, .js .v6-strip .build.is-in .b { animation: drawIn 0.25s ease-out both; animation-delay: calc(0.15s + var(--i, 0) * 0.05s); }
.stills .v6-strip .build .b { opacity: 1; animation: none; }
@keyframes drawIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) { .v6-strip .dodont { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .v5 .v6-strip { margin: 40px 0 0; padding: 32px var(--margin) 40px; background: var(--pine); } .v6-strip .strip-h { font-size: 24px; } .v6-strip .dodont { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- sign-off and footer: v5's, exactly ----------------
   v5's sting and footer, rule for rule (v5-swarm/style.css "footer"), with v5's tokens set on .foot. The tile F
   is v5's own runtime (v5swarm/, unchanged) drawing on #swarm5, clipped to the footer, so it is v5's particle
   system, floor grid, camera and timing; stills mode shows v5's F plate instead. */
.foot { --text-3: #979d97; --margin: 32px; --maxw: 1400px; position: relative; z-index: 3; max-width: calc(var(--maxw) + 2 * var(--margin)); margin: 0 auto; padding: 0 var(--margin) 40px; }
/* above the stage (same layer, later in the page), under the page's words */
.swarm5 { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: none; }
.split-window { display: none; } /* the mobile split's window (v5page.js, phones only) */
.swarm5-on .swarm5 { display: block; }
/* less room above the sign-off (92vh to 80vh), the F
   building in it as the last question leaves (v5page.js footerCheck) */
.foot .sting { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding-bottom: 8vh; }
.foot .window { display: none; }
.foot .plate { margin: 0; }
.foot .plate img { width: 100%; height: auto; display: block; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 62%, transparent 100%); }
.foot .plate figcaption { font-size: 13px; color: var(--text-3); margin-top: 10px; }
.swarm5-on .foot .plate { display: none; }
.foot .plate-sting { width: min(720px, 80vw); position: static; margin-bottom: 30px; }
.foot .tagline { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: none; }
.foot .tagline .w { display: inline-block; }
.foot .tagline .y { color: var(--yeller); }
.js .foot .tagline .w { opacity: 0; filter: blur(12px); transform: translateY(0.4em); transition: opacity 1.2s var(--ease-out-expo), filter 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo); transition-delay: calc(var(--wi) * 0.27s); }
.js .foot .sting.is-on .tagline .w { opacity: 1; filter: none; transform: none; }
/* "More from Fettler" is a column of its own rather than extra height */
.foot-cols { display: grid; grid-template-columns: 4fr 2.5fr 2.5fr 2fr; gap: 40px; border-top: 1px solid var(--mossy); padding-top: 56px; }
.foot-col p { margin-top: 14px; font-size: 15px; color: var(--greyboy); max-width: 44ch; }
/* "An AI services company." sits under the wordmark, small, as the copyright line is */
.foot-col p.foot-kind { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.foot-col h2 { font-size: 13px; font-weight: 620; letter-spacing: 0.01em; line-height: 1.3; color: var(--greyboy); margin-top: 22px; }
.foot-col h2:first-child { margin-top: 0; }
.foot-col ul { margin: 10px 0 0; padding: 0; list-style: none; }
.foot-col li a { font-size: 15px; color: var(--alpaca); text-decoration: none; line-height: 1.9; }
.foot-col li a:hover { text-decoration: underline; text-decoration-color: var(--lichen); }
.foot .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--alpaca); text-decoration: none; }
.foot .brand .fmark { height: 30px; width: auto; }
.foot .brand .fmark .dot { fill: var(--yeller); }
.foot .brand .wordmark { height: 22px; width: auto; }
.foot .muted { color: var(--greyboy); }
.foot-bottom { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--mossy); font-size: 13px; color: var(--text-3); max-width: none; }

/* pause motion: a 28 px icon in the header, shown only while something on the stage animates */
.pause-motion { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(204, 203, 197, 0.35); background: transparent; color: var(--greyboy); display: inline-grid; place-items: center; cursor: pointer; padding: 0; opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 0s linear 200ms; }
.pause-motion.is-on, .pause-motion[aria-pressed="true"] { opacity: 1; visibility: visible; transition: opacity 200ms; }
.pause-motion[hidden] { display: none; }
.pause-motion:hover { color: var(--alpaca); border-color: var(--alpaca); }
.pm-icon { width: 8px; height: 10px; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; }
.pause-motion[aria-pressed="true"] .pm-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

/* reveals (only ever hide anything when JS is present) */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.seeking [data-reveal] { transition: none !important; }

/* ---------------- tablet ---------------- */
@media (max-width: 1180px) {
  .display { font-size: 88px; }
  h2 { font-size: 46px; }
  .nav-list { gap: 16px; }
  .nav-list li:nth-child(6), .nav-list li:nth-child(1) { display: none; }
  .step-name { font-size: 60px; }
}
@media (max-width: 1023px) {
  .running-head { display: none; }
}

/* ---------------- phone ---------------- */
@media (max-width: 899px) {
  :root { --gut: 20px; --header-h: 56px; }
  .nav-list { display: none; }
  .menu-btn { display: inline-flex; }
  .book-full { display: none; }
  .book-short { display: inline; }
  .display { font-size: 56px; line-height: 0.95; }
  h2 { font-size: 34px; line-height: 1.06; }
  .lead { font-size: 18px; }
  .section { padding: 80px 0; }
  /* the build: stage on top 56svh, copy below, the tab strip at the bottom */
  .hero-copy, .build-copy { left: var(--gut); right: var(--gut); width: auto; }
  /* the phone hero: the machine takes the top half, the words sit below it */
  .hero-copy { top: 50svh; bottom: auto; gap: 10px; }
  .hero-copy .display { font-size: 44px; }
  .opening { font-size: 14px; line-height: 1.42; }
  .credential { padding-top: 10px; font-size: 13px; }
  .hero-copy .actions { gap: 16px; }
  .cue-row { display: none; }
  .build-copy { top: 56svh; bottom: 64px; }
  /* the build's words carry their own backdrop: they stay legible wherever main.js
     placeBuildCopy sets the box, and as the build un-sticks they slide up over the leaving machine, which never
     shows through them */
  .stage3d .build-copy::before { content: ""; position: absolute; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: -18px; bottom: calc(-64px - env(safe-area-inset-bottom)); z-index: -1; background: linear-gradient(180deg, rgba(16, 38, 34, 0), var(--stage) 18px); pointer-events: none; }
  /* short phones where even the raised box is too short: the general line gives way, then the part number */
  .build-copy.is-tight .step-gen, .build-copy.is-tighter .step-n { display: none; }
  .build-copy.is-tight .head-release { font-size: 22px; }
  .build-copy.is-tight .release-state { margin-top: 6px; }
  .build-copy.is-tight .release-actions { margin-top: 8px; gap: 6px 14px; }
  .build-copy.is-tight .release .caption { margin-top: 8px; }
  .build-head h2 { font-size: 22px; max-width: none; }
  .head-slot { margin-top: 6px; }
  .head-titles li { font-size: 40px; }
  .head-release { font-size: 26px; max-width: none; }
  .build-lead { display: none; }
  .build-copy { justify-content: flex-start; }
  .build-body { display: block; margin-top: 12px; }
  .ladder { display: none; }
  .build-detail { position: relative; min-height: 0; margin-top: 8px; }
  .step-n { position: static; width: auto; height: auto; clip-path: none; }
  .step-line { font-size: 17px; margin-top: 8px; }
  .step-gen { font-size: 13px; margin-top: 6px; }
  .release { bottom: auto; top: 0; }
  .built-for { flex-direction: column; }
  .built-for .bp-sep { display: none; }
  .build-head { transition: opacity 200ms, visibility 0s linear 200ms; }
  .build-copy.is-release .release.is-on { transition-delay: 200ms; }
  .release-line { font-size: 26px; }
  .release-state { font-size: 15px; margin-top: 8px; }
  .release-actions { margin-top: 10px; gap: 12px; }
  .build-progress { display: none; }
  .scrim { background: linear-gradient(180deg, rgba(16, 38, 34, 0) 45%, rgba(16, 38, 34, 0.92) 58%); }
  .tabs { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(48px + env(safe-area-inset-bottom)); }
  .tabs::before { left: 0; right: 0; top: auto; bottom: calc(env(safe-area-inset-bottom)); width: auto; height: 1px; opacity: 0.5; }
  .tabs-list { position: absolute; left: 0; right: 0; top: auto; bottom: env(safe-area-inset-bottom); transform: none; flex-direction: row; gap: 0; padding: 0 28px 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; align-items: flex-end; height: 48px; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
  /* phones: the same dividers, rising from the bottom edge, each overlapping its neighbour by 6 px */
  .tab, .tabs:not(.is-expanded) .tab { width: auto !important; padding: 0 16px !important; height: 30px; margin: 0 0 0 -6px; --cut: 8px; clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 100%, 0 100%); flex: none; scroll-snap-align: start; }
  .tab:first-child { margin-left: 0; }
  .tab::before { inset: 1px 1px 0 1px; clip-path: polygon(calc(var(--cut) - 0.5px) 0, calc(100% - var(--cut) + 0.5px) 0, 100% 100%, 0 100%); }
  .tab span { writing-mode: horizontal-tb; opacity: 1 !important; }
  .tab[aria-selected="true"], .tabs:not(.is-expanded) .tab[aria-selected="true"] { height: 36px; }
  .tab-dot { bottom: auto; top: 6px; left: auto; right: 6px; }
  .tabs-replay, .tabs-hint { display: none; }
  .tabs { transition: transform 240ms var(--ease-out-quart); }
  /* an opaque band behind the dividers: text passing under the strip never shows in the cuts
     between the tabs; its top fades over 12 px */
  .tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom)); z-index: -1; background: linear-gradient(180deg, rgba(16, 38, 34, 0) 0, var(--stage) 12px); pointer-events: none; }
  .tabs.is-strip-hidden { transform: translateY(calc(100% + 16px)); }
  .hint-d { display: none; }
  .hint-m { display: inline; }
  .not-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .not-lead { margin-bottom: 28px; font-size: 21px; }
  .not-grid > div { border-top: 1px solid var(--signal-rest); padding: 20px 0 0; }
  .not-grid > div + div::before { display: none; }
  .not-grid > div, .not-grid p { text-align: left; }
  .static-steps { grid-template-columns: minmax(0, 1fr); }
  /* stills (reduced motion, no WebGL, no JavaScript) on phones: the poster is its own box above the
     words, and takes whatever height they leave, so the machine never sits under the h1 at any phone size; the
     words end above the tab strip. The poster's machine (rows 6 to 47 per cent of the phone poster) is fitted
     whole inside that box, by its height or by the screen's width, whichever is smaller. */
  html:not(.stage3d) .hero { display: flex; flex-direction: column; min-height: 100svh; padding-top: var(--header-h); box-sizing: border-box; }
  html:not(.stage3d) .poster { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: auto; flex: 1 1 0; min-height: 30svh; container-type: size; overflow: hidden; background: var(--stage); }
  html:not(.stage3d) .poster img { position: absolute; left: 50%; width: auto; max-width: none; height: min(216.4cqw, 243.9cqh); top: calc(100cqh - 0.47 * min(216.4cqw, 243.9cqh)); transform: translateX(-50%); object-fit: fill; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  html:not(.stage3d) .poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(180deg, rgba(16, 38, 34, 0), var(--stage)); }
  html:not(.stage3d) .build .scrim { display: none; }
  html:not(.stage3d) .hero-copy { flex: none; min-height: 0; justify-content: flex-start; padding-top: 14px; padding-bottom: 64px; gap: 10px; }
  html:not(.stage3d) .hero-copy > * { max-width: none; }
  /* the step copy arrives whole on phones (no per-word rise), so a line is never seen half-risen */
  .step .w > span { animation: none !important; }
  .step { opacity: 0; transition: opacity 160ms ease-out; }
  .step.is-in { opacity: 1; }
  /* phones: the F at about 42 per cent of the block */
  .static { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nav { gap: 8px; }
}
@media (max-width: 400px) {
  .display { font-size: 48px; }
  .step-name { font-size: 34px; }
}
/* short or narrow phones: the hero's words tighten, so they end above the tab strip and the
   machine keeps a useful window above them (main.js placeHero moves them up when they still do not fit) */
@media (max-width: 899px) and (max-height: 760px), (max-width: 374px) {
  .hero-copy { gap: 8px; }
  .hero-copy .display { font-size: 38px; }
  .opening { font-size: 13px; line-height: 1.38; }
  .credential { padding-top: 8px; font-size: 12px; }
  .hero-copy .actions { gap: 6px 16px; }
  .hero-copy .btn { height: 42px; padding: 0 20px; font-size: 15px; }
}
/* on short or narrow phones the machine keeps about a third of the screen above the words,
   so the credential goes (main.js placeHero drops it anywhere else the words still do not fit, as with a larger text
   size; the lead that went first moved to the "What it is not" band). At 320 px the h1 stays on one
   line. */
@media (max-width: 899px) and (max-height: 700px), (max-width: 374px) {
  .hero-copy .credential { display: none; }
}
.hero-copy.is-tight .credential { display: none; }
@media (max-width: 339px) {
  .hero-copy .display { font-size: 32px; }
}

@media (prefers-contrast: more) {
  :root { --signal-rest: rgba(204, 203, 197, 0.6); }
}
/* v5's footer on phones (v5 breaks at 720 px) */
@media (max-width: 719px) {
  .foot { --margin: 20px; padding: 0 var(--margin) 28px; background: var(--pine); }
  .swarm5-on .foot { background: transparent; }
  .foot .sting { min-height: 0; padding: 0 0 48px; }
  .swarm5-on .foot .window-sting { display: block; height: 62svh; width: 100%; }
  .foot .tagline { font-size: 32px; }
  /* full bleed, so the tiles behind the transparent footer never show in its side margins */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 36px var(--margin) 0; margin: 0 calc(-1 * var(--margin)); background: var(--pine); }
  .foot-col:first-child, .foot-col:last-child { grid-column: 1 / -1; }
}