/* ═══════════════════════════════════════════════════════════════════════════
   AgentsLabs homepage — "Horizon".

   One WebGPU canvas, four raymarched worlds, four chapters of copy floating
   over them. Used by / (nl-NL) and /en/ (en-NL) only; every other page keeps
   redesign.css. The two never load together.

   Three states, all designed rather than tolerated:
     .is-booting  the boot screen holds the page still (set by inline script,
                  so a visitor without JavaScript never sees it)
     .is-live     WebGPU is rendering
     .is-static   no WebGPU, or the device was lost — a CSS backdrop stands in
                  and every word on the page stays where it was
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #f4f1ee;
  /* Body copy sits over a live image, not over a flat panel, so the dim tone
     is a notch stronger than the design's original 0.56 — measured against the
     brightest of the four scenes ("First Light"), not against black. */
  --dim: rgba(244, 241, 238, 0.74);
  --dimmer: rgba(244, 241, 238, 0.5);
  --hair: rgba(244, 241, 238, 0.14);
  --accent: rgb(255, 122, 47);

  --f-display: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --pad: clamp(20px, 4.4vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  /* Smooth scrolling lives in JS: ScrollTrigger zeroes the page before it
     measures element positions on refresh, and CSS smooth turns that reset into
     an animation — every start/end then comes out off by a full scroll distance
     (resize, scroll back to the top, and the hero block is simply gone). */
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-display);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-booting { overflow: hidden; height: 100vh; }

::selection { background: var(--accent); color: #000; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--fg);
  color: #000;
  padding: 12px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── stage ───────────────────────────────────────────────────────────────── */

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
body.is-live #stage { opacity: 1; }
body.is-static #stage { display: none; }

/* The stand-in backdrop. Not an apology screen: the same four accents, the
   same drift, drawn with gradients instead of a ray marcher. --accent is
   rewritten by the scroll, so this moves through the chapters as well. */
.fx-static {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(76% 58% at 74% 28%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%),
    radial-gradient(58% 48% at 22% 78%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(120% 92% at 50% 0%, #12101c 0%, #05050a 52%, #000 100%);
  transition: background 1.2s linear;
}
body.is-static .fx-static { display: block; }
/* color-mix is recent; without it the layer still has to be dark, not blank. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .fx-static { background: radial-gradient(120% 92% at 50% 0%, #16121f 0%, #05050a 52%, #000 100%); }
}

/* readability scrim: dark on the left where the type lives, plus top/bottom */
.fx-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 26%, rgba(0,0,0,0.46) 46%, rgba(0,0,0,0) 68%),
    linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 26%);
}

/* hairline frame — the whole page reads as an instrument panel */
.fx-frame {
  position: fixed;
  inset: clamp(10px, 1.5vw, 20px);
  z-index: 6;
  pointer-events: none;
  border: 1px solid rgba(244, 241, 238, 0.07);
  mix-blend-mode: screen;
}

/* ── chrome ──────────────────────────────────────────────────────────────────
   The header moved to assets/css/chrome.css on 25 August 2026, when the
   interior pages adopted it. It is the one component that is byte-identical on
   all 406 pages, so neither stylesheet owns it any more; both link it.

   Two hooks this page still provides:
     --accent   rewritten every frame by horizon.js, so the brand mark and the
                CTA follow the chapter you are in. chrome.css reads it through
                var(--accent, var(--acc, …)).
     .chrome-meta   the "available for new projects" line. Homepage only; the
                interior pages spend that width on navigation.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── rail ────────────────────────────────────────────────────────────────── */

.rail {
  position: fixed;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  padding-right: 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rail-item {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--dimmer);
  transition: color 0.5s var(--ease);
}
.rail-item b {
  font-weight: 400;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.rail-item i { font-style: normal; font-variant-numeric: tabular-nums; }
.rail-item:hover, .rail-item:focus-visible { color: var(--dim); }
.rail-item:hover b, .rail-item:focus-visible b { opacity: 0.7; transform: none; }
.rail-item.is-on { color: var(--accent); }
.rail-item.is-on b { opacity: 1; transform: none; }

.rail-line {
  position: absolute;
  right: 0; top: 2px; bottom: 2px;
  width: 1px;
  background: rgba(244, 241, 238, 0.16);
  overflow: hidden;
}
.rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}

/* ── hud ─────────────────────────────────────────────────────────────────── */

.hud {
  position: fixed;
  left: var(--pad);
  bottom: clamp(22px, 3.2vw, 40px);
  z-index: 8;
  display: grid;
  gap: 3px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.hud-row { display: grid; grid-template-columns: 52px auto; }
.hud-row i { font-style: normal; }
.hud-row b {
  font-weight: 400;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* Frame timings mean nothing when nothing is being rendered. */
body.is-static .hud-row.is-telemetry { display: none; }

/* ── chapters ────────────────────────────────────────────────────────────── */

main { position: relative; z-index: 4; }

.chapter { position: relative; height: 240vh; }
#sc0 { height: 300vh; }

.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-content: center;
  /* Clears the fixed chrome and the HUD: the panel centres inside what is
     left, so a short laptop viewport never slides the hero under the header. */
  padding: clamp(92px, 12vh, 132px) var(--pad) clamp(64px, 9vh, 104px);
  padding-right: clamp(var(--pad), 14vw, 200px);
}

.stage {
  grid-area: 1 / 1;
  max-width: min(52ch, 46vw);
  will-change: transform, opacity;
}

/* ── type ────────────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}
.eyebrow .idx {
  font-style: normal;
  color: var(--accent);
  padding-right: 3px;
  transition: color 0.7s var(--ease);
}

.display {
  /* Height matters as much as width here: the hero has to fit above the fold
     on a 900px laptop, where 6vw of a wide screen would not. */
  font-size: min(clamp(2.4rem, 6vw, 6rem), 10.5vh);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 200;
  margin: 0 0 clamp(26px, 3vw, 46px);
}
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln > span { display: block; }

.title {
  font-size: min(clamp(2rem, 5.4vw, 5.2rem), 12vh);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}

.lead {
  font-size: clamp(14.5px, 1.02vw, 17.5px);
  line-height: 1.66;
  color: var(--dim);
  max-width: 44ch;
  font-weight: 400;
}
.lead.dim { color: var(--dimmer); margin-top: 14px; }
.hero-lead { max-width: 38ch; }

.specs {
  margin-top: clamp(26px, 3.2vw, 46px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
  max-width: 40ch;
}
.specs > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.specs dt { color: var(--dimmer); }
.specs dd { color: var(--fg); opacity: 0.82; }

/* ── links and buttons ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 14px 22px;
  border: 1px solid var(--hair);
  border-radius: 100px;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), gap 0.4s var(--ease);
}
.btn svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.btn:hover, .btn:focus-visible { color: var(--accent); border-color: var(--accent); gap: 18px; }
.btn.is-primary { background: var(--fg); border-color: var(--fg); color: #000; }
.btn.is-primary:hover, .btn.is-primary:focus-visible {
  background: var(--accent); border-color: var(--accent); color: #000;
}

.hero-actions, .outro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 36px);
}
/* The pair of buttons is wider than the 52ch measure the copy is set to; let
   it out rather than stacking two full-width pills in the hero. */
.hero-actions { width: max-content; max-width: min(60vw, 100vw - 2 * var(--pad)); }

.chapter-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-bottom: 4px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--hair);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease), gap 0.4s var(--ease);
}
.chapter-link:hover, .chapter-link:focus-visible {
  color: var(--accent); border-color: var(--accent); gap: 16px;
}
.chapter-link svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* proof links inside chapter 02 */
.proof {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hair);
  max-width: 46ch;
}
.proof li { border-bottom: 1px solid var(--hair); }
.proof a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 11px 0;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.35s var(--ease);
}
.proof a:hover, .proof a:focus-visible { color: var(--accent); }
.proof b { font-weight: 400; color: var(--fg); opacity: 0.85; font-variant-numeric: tabular-nums; }

.cue {
  margin-top: clamp(24px, 3vw, 42px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}
.cue-line {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  animation: sweep 2.4s var(--ease) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ── outro ───────────────────────────────────────────────────────────────── */

.outro {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Same right-hand reserve as .panel: the chapter rail is fixed, and the
     ledger ran straight underneath it. */
  padding: clamp(80px, 11vh, 130px) clamp(var(--pad), 14vw, 200px) 0 var(--pad);
}
.outro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 26%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.outro-inner { position: relative; max-width: 94ch; }
.outro-title { font-size: min(clamp(2.2rem, 6.2vw, 5.6rem), 13vh); }
.outro-lead { max-width: 52ch; }

.ledger {
  margin-top: clamp(30px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--hair);
}
.ledger li {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 15px 18px 17px 0;
  border-bottom: 1px solid var(--hair);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ledger i { font-style: normal; color: var(--dimmer); }
.ledger b { font-weight: 400; color: var(--fg); opacity: 0.85; }
.ledger a { color: inherit; border-bottom: 1px solid transparent; transition: color 0.35s var(--ease), border-color 0.35s var(--ease); }
.ledger a:hover, .ledger a:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ── faq ─────────────────────────────────────────────────────────────────── */

/* The homepage's FAQPage schema needs its answers visible; this is that block,
   set as an instrument panel rather than as a card stack. */
.faq {
  position: relative;
  z-index: 4;
  background: var(--bg);
  padding: clamp(60px, 9vh, 110px) clamp(var(--pad), 14vw, 200px) clamp(50px, 7vh, 90px) var(--pad);
}
.faq-inner { max-width: 78ch; }
.faq .eyebrow { margin-bottom: clamp(24px, 3vw, 38px); }

.qa { border-top: 1px solid var(--hair); }
.qa:last-of-type { border-bottom: 1px solid var(--hair); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: clamp(15px, 1.15vw, 19px);
  color: var(--fg);
  transition: color 0.3s var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "+";
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--accent);
  line-height: 1;
  flex: none;
}
.qa[open] > summary::after { content: "–"; }
.qa > summary:hover { color: var(--accent); }
.qa-body { padding: 0 0 24px; display: grid; gap: 16px; justify-items: start; }
.qa-body .lead { max-width: 62ch; }
.qa-body .chapter-link { margin-top: 0; }

.faq-more { margin-top: clamp(28px, 3.6vw, 44px); }

/* ── site map / footer ───────────────────────────────────────────────────── */

.foot {
  position: relative;
  z-index: 4;
  background: var(--bg);
  padding: clamp(56px, 8vh, 96px) clamp(var(--pad), 14vw, 200px) clamp(28px, 4vw, 44px) var(--pad);
  border-top: 1px solid var(--hair);
}
.foot-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  max-width: 1320px;
  margin: 0 auto;
}
.foot-col h2 {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.foot-col ul { display: grid; gap: 9px; }
.foot-col a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}
.foot-col a:hover, .foot-col a:focus-visible { color: var(--fg); }

.foot-base {
  max-width: 1320px;
  margin: clamp(38px, 5vw, 64px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.foot-base a { color: var(--dim); }
.foot-base a:hover, .foot-base a:focus-visible { color: var(--accent); }

/* ── boot ────────────────────────────────────────────────────────────────── */

.boot {
  position: fixed;
  inset: 0;
  /* Above the shared chrome (200): the boot screen is meant to be a clean
     black field, not a black field with a navigation bar on it. */
  z-index: 300;
  background: #000;
  display: none;
  place-items: center;
}
body.is-booting .boot { display: grid; }
.boot-inner { display: grid; justify-items: center; gap: 22px; }
.boot-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 26px 2px var(--accent);
  animation: breathe 2.2s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.68); opacity: 0.55; }
}
.boot-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}
.boot-bar { width: 168px; height: 1px; background: rgba(244,241,238,0.16); overflow: hidden; }
.boot-fill {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.boot.is-gone { opacity: 0; pointer-events: none; transition: opacity 0.9s var(--ease); }

/* ── analytics consent ───────────────────────────────────────────────────── */

/* assets/js/consent.js builds this panel on every page and is styled in
   redesign.css, which Horizon does not load. Without the rules below the
   cookie choice renders as unstyled browser default on the homepage — the one
   page most first-time visitors see. Same class names, Horizon's palette. */

.consent-panel {
  position: fixed;
  z-index: 500;
  right: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 20px;
  color: var(--dim);
  background: rgba(0, 0, 0, 0.94);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.6);
}
.consent-panel[hidden], .consent-manage[hidden] { display: none !important; }
.consent-panel__content { min-width: 0; }
.consent-panel h2 {
  margin: 0 0 6px;
  color: var(--fg);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.consent-panel p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.consent-panel a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consent-panel__actions { display: flex; flex: none; gap: 10px; }

.consent-button, .consent-manage {
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--hair);
  border-radius: 100px;
  background: transparent;
  color: var(--fg);
  font: 400 10px/1.2 var(--f-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease);
}
.consent-button--primary { background: var(--fg); border-color: var(--fg); color: #000; }
.consent-button--primary:hover { background: var(--accent); border-color: var(--accent); }
.consent-button--secondary:hover, .consent-manage:hover { border-color: var(--accent); color: var(--accent); }

/* Bottom-left belongs to the telemetry readout on this page, so the manage
   button takes the opposite corner rather than sitting on top of it. */
.consent-manage {
  position: fixed;
  z-index: 490;
  right: var(--pad);
  bottom: var(--pad);
  background: rgba(0, 0, 0, 0.92);
}

@media (max-width: 700px) {
  .consent-panel { align-items: stretch; flex-direction: column; gap: 14px; }
  .consent-panel__actions { display: grid; grid-template-columns: 1fr; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .stage { max-width: none; }
  .panel { padding-right: var(--pad); align-content: end; padding-bottom: 16vh; }
  .hero-actions { width: auto; max-width: 100%; }
  .rail { gap: 13px; }
  .rail-item b { display: none; }
  .fx-scrim {
    background:
      linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.55) 100%);
  }
  .stage-hero { align-content: end; }
}

@media (max-width: 640px) {
  .hud { display: none; }
  .chapter { height: 200vh; }
  #sc0 { height: 260vh; }
  .specs > div { grid-template-columns: 1fr; gap: 4px; }
  /* the rail would sit on top of full-bleed copy — keep only the progress line */
  .rail { padding-right: 0; gap: 0; }
  .rail-item { display: none; }
  .rail-line { top: -22vh; bottom: -22vh; }
  .outro { justify-content: flex-start; padding-right: var(--pad); }
  .faq, .foot { padding-right: var(--pad); }
  .hero-actions .btn, .outro-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dot, .boot-mark, .cue-line::after { animation: none; }
  * { scroll-behavior: auto !important; }
}