/* Vizible Zone: the site's design system, one stylesheet for every page.
   One visual language with the company's printed slides: dark plates (asphalt, the scenes) alternate with white
   text bands; the zone (mustard) is the one accent: rings, marks, chips and the primary button, never text on
   white. Sections, in cascade order: type, tokens, base, grid, buttons and links, header, dark bands, heroes,
   still scenes and their labels, simulation plates, sections, status marks, capability rows, ruled lists,
   the home page (dangers, steps, worlds, foundations, milestones, proof, closing), record, quote, video,
   request a pilot, footer, reduced motion. */

/* ---------- Type: Overpass, self-hosted (SIL OFL 1.1, see fonts/OFL.txt) ---------- */
@font-face { font-family: Overpass; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/overpass-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Overpass; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/overpass-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Overpass; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/overpass-latin-800-normal.woff2) format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --paper: #FFFFFF;
  --surface: #F6F6F4;
  --ink: #000000;
  --muted: #4D4D4D;          /* 8.5:1 on paper, 8.0:1 on surface */
  --line: #E3E3E0;
  --asphalt: #1B2024;        /* the ground of every scene */
  --night: #14181B;          /* dark bands: header, heroes, steps, foundations, closing */
  --pitch: #0E1114;          /* the footer */
  --lane: #E9ECEE;
  --on-dark: rgba(233, 236, 238, .96);        /* 14.5:1 on night */
  --on-dark-muted: rgba(233, 236, 238, .76);  /* 9.3:1 on night */
  --rule-dark: rgba(233, 236, 238, .22);
  --zone: #FFC400;           /* marks, rings, chips, the primary button; on dark it may be text (11.6:1) */
  --zone-soft: rgba(255, 196, 0, .16);
  --zone-hi: #FFD23D;                         /* hover of mustard surfaces */
  --zone-glow: rgba(255, 196, 0, .14);        /* the soft outer ring of lenses, buttons, focus */
  --hair-dark: rgba(233, 236, 238, .14);      /* hairlines on dark bands */
  --ease-zone: cubic-bezier(.3, .55, .25, 1); /* the one easing curve: a wave travelling out, soft at the end */
  --t-zone: 1.4s;                             /* a zone opening */
  --t-ui: .18s;                               /* hover and focus */

  --font: Overpass, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The classic typographic scale: 14 16 18 21 24 36 48 60 72 96. Interface labels use 15 px. */
  --t14: .875rem;  --t15: .9375rem; --t16: 1rem;    --t18: 1.125rem; --t21: 1.3125rem;
  --t24: 1.5rem;   --t30: 1.875rem; --t36: 2.25rem;  --t48: 3rem;    --t60: 3.75rem;  --t72: 4.5rem;  --t96: 6rem;

  /* Space: an 8 px unit. */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --max: 1200px;             /* the text grid */
  --plate-max: 1920px;       /* the simulation plates */
  --gutter: 16px;
  --section: 56px;
  --head: 64px;              /* header height */
}
@media (min-width: 768px) { :root { --gutter: 24px; --section: 80px; --head: 72px; } }
@media (min-width: 1280px) { :root { --section: 120px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body {
  /* night under the sticky header's glass at the top of the page, paper below */
  margin: 0; background: linear-gradient(var(--night) 0 var(--head), var(--paper) 0) no-repeat, var(--paper); color: var(--ink);
  font: 400 var(--t18)/1.55 var(--font);
  font-kerning: normal; font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p, li, dt, dd, figcaption { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
ul[role="list"], .bare { list-style: none; padding: 0; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
::selection { background: var(--zone); color: var(--ink); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; left: var(--gutter); top: 8px; z-index: 30; transform: translateY(-200%);
  padding: 12px 16px; background: var(--zone); color: var(--ink); font: 800 var(--t15)/1 var(--font); text-decoration: none;
}
.skip:focus { transform: none; }

/* ---------- Grid ---------- */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; }

/* ---------- Buttons and links ----------
   One primary action everywhere: "Request a pilot", black on mustard, like the chips in the scenes. */
.button {  /* the primary button takes the chip's shape: it is the one message addressed to the visitor */
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 2px 26px 0;
  border-radius: 8px; background: var(--zone); color: var(--ink); border: 0;
  font: 800 var(--t16)/1 var(--font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--t-ui) ease-out, box-shadow var(--t-ui) ease-out;
}
.button:hover, .button:focus-visible { background: var(--zone-hi); box-shadow: 0 0 0 6px var(--zone-glow); }
.button-small { min-height: 44px; padding: 2px 20px 0; border-radius: 7px; font-size: var(--t15); }
.button-ghost { background: transparent; color: #fff; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(233, 236, 238, .55); }
.button-ghost:hover, .button-ghost:focus-visible { background: transparent; box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 6px rgba(233, 236, 238, .08); }
.button-ink { background: var(--ink); color: var(--paper); }
.button-ink:hover { background: #2A2A2A; }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; font-size: var(--t16); text-decoration-color: var(--zone); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.text-link:hover { text-decoration-thickness: 3px; }

/* ---------- Header: dark, so the mustard logo reads ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20; color: #fff;
  background: rgba(20, 24, 27, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-dark); view-transition-name: site-header;
}
.menu-open .site-header { background: var(--night); }
.header-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--head); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--zone); }
.brand img { width: 46px; height: 46px; }
.brand span { font-weight: 800; font-size: var(--t18); letter-spacing: -.01em; line-height: 1; padding-top: 2px; }
.nav { display: none; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav a { position: relative; display: flex; align-items: center; min-height: 44px; min-width: 44px; font: 600 var(--t15)/1 var(--font); color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; }
.nav a[aria-current="page"] { color: #fff; }
.nav a:focus-visible { outline-offset: 2px; }
.nav a[aria-current="page"]::after { /* the current page carries a zone mark, like a road marking */
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--zone);
}
.nav .nav-contact, .nav .nav-cta { display: none; }
.header-row > .button { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 16px 0;
  border: 1px solid rgba(233, 236, 238, .4); border-radius: 22px; background: transparent; color: #fff;
  font: 600 var(--t15)/1 var(--font); cursor: pointer;
}
.menu-toggle:hover { border-color: #fff; }
.menu-toggle svg { width: 16px; height: 16px; margin-top: -2px; }
.menu-toggle .close { display: none; }
.menu-open .menu-toggle .open { display: none; }
.menu-open .menu-toggle .close { display: block; }

/* The menu, below 1280 px: a dark disclosure panel under the header, with the one action at its foot. It fills the
   window below the header and never more: on a short screen (a phone held sideways) it scrolls inside itself, while
   the page behind it stays locked. */
@media (max-width: 1279.98px) {
  .menu-open .nav {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100vh - var(--head)); height: calc(100dvh - var(--head));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--night); border-top: 1px solid var(--rule-dark);
    padding: var(--s3) var(--gutter) var(--s6);
  }
  .menu-open .nav ul { flex-direction: column; max-width: var(--max); margin-inline: auto; }
  .menu-open .nav .nav-worlds a { min-height: 54px; font-size: var(--t24); font-weight: 800; letter-spacing: -.01em; color: #fff; }
  .menu-open .nav .nav-more { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule-dark); }
  .menu-open .nav .nav-more a { min-height: 48px; font-size: var(--t18); }
  .menu-open .nav .nav-contact { display: block; }
  .menu-open .nav .nav-cta { display: block; margin-top: var(--s3); }
  .menu-open .nav .nav-cta a { display: inline-flex; min-height: 52px; padding: 2px 28px 0; font: 800 var(--t16)/1 var(--font); color: var(--ink); }
  .menu-open .nav a[aria-current="page"]::after { right: auto; width: 40px; bottom: 4px; }
  .menu-open { overflow: hidden; }
}
@media (min-width: 768px) {
  .header-row > .button { display: inline-flex; }
}
@media (min-width: 1280px) {
  .menu-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 40px; }
  .nav ul { gap: 24px; }
  .header-row { gap: 32px; }
}

/* ---------- Dark bands ---------- */
.dark { background: var(--night); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark .lead { color: #fff; }
.dark .note, .dark .muted { color: var(--on-dark-muted); }
.band { padding-block: var(--section); }
.display { font-weight: 800; font-size: var(--t36); line-height: 1.0; letter-spacing: -.03em; }
@media (min-width: 768px) { .display { font-size: 3.5rem; } }
@media (min-width: 1280px) { .display { font-size: var(--t72); } }
.band-lead { font-size: var(--t21); line-height: 1.4; max-width: 34em; margin-top: var(--s3); }

/* ---------- Heroes ----------
   Every page opens on a dark plate. Home: the composite scene. World pages: the title, then the live scene.
   Text pages: the title over a quiet road. No status words here (SPEC 14). */
.hero { position: relative; background: var(--night); color: var(--on-dark); padding-block: var(--s5) var(--s5); overflow: hidden; }
.hero h1 { color: #fff; font-weight: 800; font-size: var(--t36); line-height: 1.04; letter-spacing: -.025em; max-width: 19ch; }
.hero-support { font-size: var(--t18); line-height: 1.45; max-width: 34em; margin-top: var(--s3); color: var(--on-dark); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.hero .text-link { color: #fff; }
.hero .wrap { position: relative; z-index: 3; }
@media (min-width: 768px) {
  .hero { padding-block: var(--s6) var(--s5); }
  .hero h1 { font-size: var(--t48); }
  .hero-support { font-size: var(--t21); }
}
@media (min-width: 1024px) {
  .hero-segment .grid { align-items: end; }
  .hero-segment h1 { grid-column: 1 / span 7; }
  .hero-segment .hero-support { grid-column: 8 / span 5; margin-top: 0; padding-bottom: 6px; }
  .hero-segment .hero-actions { grid-column: 8 / span 5; margin-top: var(--s3); }
}
@media (min-width: 1280px) {
  .hero-segment { padding-block: 48px 32px; }
  .hero h1 { font-size: var(--t72); line-height: 1.02; letter-spacing: -.03em; }
}
/* Text pages: a road runs down the right edge of the hero */
.hero-text { padding-bottom: var(--s6); }
.hero-text .hero-road { position: absolute; inset: 0 0 0 auto; width: min(34%, 420px); z-index: 1; display: none; }
.hero-text .hero-road::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night), rgba(20, 24, 27, 0) 55%); }
@media (min-width: 1024px) {
  .hero-text .hero-road { display: block; }
  .hero-text.hero-segment h1 { grid-column: 1 / span 8; }
  .hero-text.hero-segment .hero-support, .hero-text.hero-segment .hero-actions { grid-column: 1 / span 7; margin-top: var(--s3); padding: 0; }
}
.mail { font-size: var(--t18); }

/* The home hero: the line on the left, the composite scene on the right (under it on narrow screens). */
.hero-home { padding: 0; display: flex; flex-direction: column; min-height: calc(100svh - var(--head)); }
.hero-home .hero-copy { position: relative; z-index: 3; padding-block: var(--s4) var(--s2); }
.hero-home h1 { font-size: clamp(3.25rem, 15vw, 4.75rem); line-height: .94; letter-spacing: -.04em; max-width: none; }
.hero-home h1 .dot { color: var(--zone); }            /* the Today dot, and the phone: hero only, never on white */
.hero-home .hero-support { max-width: 25em; font-size: var(--t16); line-height: 1.4; margin-top: var(--s2); }
.hero-home .hero-support span { display: block; }       /* four short lines, like the carousel cover */
.hero-home .hero-actions { margin-top: var(--s3); }
.hero-art { position: relative; flex: 1 0 auto; height: auto; min-height: 340px; }
@media (max-width: 767.98px) { /* on phones the ghost button is a text link under the button, so the scene starts higher */
  .hero-home .hero-actions { gap: 0 var(--s3); }
  .hero-home .button-ghost { min-height: 44px; padding: 0; box-shadow: none; text-decoration: underline; text-decoration-color: var(--zone); text-decoration-thickness: 2px; text-underline-offset: .3em; }
}
.hero-art > .still { position: absolute; inset: 0; background: var(--night); }
.hero-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 5; background: linear-gradient(180deg, var(--night), rgba(20, 24, 27, 0)); pointer-events: none; }
.hero-art > .illus { left: var(--gutter); bottom: 12px; }
@media (min-width: 768px) {
  .hero-home { min-height: 0; }
  .hero-home .hero-copy { padding-block: var(--s5) var(--s3); }
  .hero-home h1 { font-size: var(--t96); }
  .hero-home .hero-support { font-size: var(--t21); line-height: 1.4; max-width: 26em; margin-top: var(--s3); }
  .hero-art { flex: none; height: 620px; }
}
@media (min-width: 1180px) {
  .hero-home { display: block; height: clamp(640px, calc(100svh - var(--head)), 900px); }
  .hero-art { position: absolute; inset: 0 0 0 36%; height: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%); mask-image: linear-gradient(90deg, transparent, #000 13%); }
  .hero-art::before { display: none; }
  .hero-home .hero-copy { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-block: var(--s5); }
  .hero-home .hero-copy > * { max-width: 46%; }
  .hero-home h1 { font-size: clamp(6rem, 7vw, 7.5rem); max-width: none; }
  .hero-home h1 > span { display: block; }
  .hero-home .hero-support { max-width: min(46%, 23em); margin-top: var(--s4); }
  .hero-home .hero-actions { margin-top: var(--s5); }
  .hero-art > .illus { left: auto; right: 24px; bottom: 18px; }
}

/* ---------- Zone on: every two-state picture opens as a zone from a phone (the site's one motion) ----------
   Without script, or with reduced motion, the zone is open. The clip and the ring read the same --zr, so they
   stay exactly together; a browser without @property simply shows the open state. */
@property --zr { syntax: '<length>'; inherits: true; initial-value: 0px; }
.zone { overflow: hidden; --zx: 50%; --zy: 50%; --zmax: 2400px; --zr: var(--zmax); }
.zone > .z-off, .zone > .z-on { position: absolute; inset: 0; }
.zone > .z-on { clip-path: circle(var(--zr) at var(--zx) var(--zy)); }
.zone::after {  /* the ring that leads the opening */
  content: ""; position: absolute; z-index: 3; left: var(--zx); top: var(--zy);
  width: calc(var(--zr) * 2); height: calc(var(--zr) * 2); translate: -50% -50%;
  border-radius: 50%; border: 2px solid var(--zone);
  box-shadow: 0 0 0 10px var(--zone-glow), inset 0 0 0 10px rgba(255, 196, 0, .06);
  opacity: 0; pointer-events: none;
}
.hero-art.zone { --zt: 1.8s; }
@media (prefers-reduced-motion: no-preference) {
  .js .zone { --zr: 0px; }
  .js .zone.armed { transition: --zr var(--zt, var(--t-zone)) var(--ease-zone) var(--zd, 0s); } /* armed by vz.js once closed */
  .js .zone.is-on { --zr: var(--zmax); }
  .js .zone.is-on::after { animation: vz-ring var(--zt, var(--t-zone)) linear var(--zd, 0s) both; }
}
@keyframes vz-ring { 0% { opacity: 0; } 6%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* Scenes that breathe: a ring grows from a phone, a message travels from the person to whoever is told.
   Only transform and opacity move. Each mark plays once when its picture comes into view and is over within
   5 seconds (WCAG 2.2.2: nothing moves on beside the text, so no pause control is needed); it plays again when
   the picture comes back into view. poster.js caps the delays: a pulse starts by 1.2 s, a message by 2.4 s. */
.pulse { position: absolute; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border-radius: 50%; border: 1.5px solid var(--zone); opacity: 0; }
.run { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--zone); box-shadow: 0 0 10px 2px rgba(255, 196, 0, .6); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-seen .pulse { animation: vz-pulse 3.6s cubic-bezier(.2, .6, .3, 1) var(--delay) 1 both; }
  .is-seen .run { animation: vz-run 2.4s cubic-bezier(.45, 0, .55, 1) var(--delay) 1 both; }
}
@keyframes vz-pulse { 0% { transform: scale(.12); opacity: 0; } 8% { opacity: .85; } 100% { transform: scale(1); opacity: 0; } }
@keyframes vz-run { 0% { transform: translate(0, 0); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* ---------- Still scenes and their labels (the grammar of the slides) ---------- */
.still { position: relative; overflow: hidden; background: var(--asphalt); --u: 1; }
.still > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.chip { position: absolute; white-space: nowrap; z-index: 2; }
.chip span { display: block; position: relative; background: var(--zone); color: #000; font-weight: 800; font-size: calc(20px * var(--u)); line-height: 1; padding: .42em .58em .32em; border-radius: .26em; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.chip span::after { content: ""; position: absolute; width: .5em; height: .5em; background: var(--zone); transform: rotate(45deg); }
.chip.up { transform: translate(-50%, calc(-100% - var(--gap))); } .chip.up span::after { left: calc(50% - .25em); bottom: -.22em; }
.chip.down { transform: translate(-50%, var(--gap)); } .chip.down span::after { left: calc(50% - .25em); top: -.22em; }
.chip.left { transform: translate(calc(-100% - var(--gap)), -50%); } .chip.left span::after { right: -.22em; top: calc(50% - .25em); }
.chip.right { transform: translate(var(--gap), -50%); } .chip.right span::after { left: -.22em; top: calc(50% - .25em); }
.chip.nudged span::after { display: none; }
.plate { position: absolute; white-space: nowrap; display: flex; align-items: center; gap: .4em; background: rgba(10, 13, 16, .84); color: var(--on-dark); font-weight: 600; font-size: calc(18px * var(--u)); line-height: 1; padding: .5em .6em .36em; border-radius: .26em; }
.plate.center { transform: translate(-50%, -50%); } .plate.left { transform: translate(0, -50%); } .plate.right { transform: translate(-100%, -50%); }
.plate .m { width: .72em; height: .72em; border-width: 2px; margin-top: -.12em; }
.illus { position: absolute; z-index: 4; font-size: var(--t14); line-height: 1; color: rgba(233, 236, 238, .74); letter-spacing: .01em; pointer-events: none; text-shadow: 0 1px 6px rgba(10, 13, 16, .9); }
.still > .illus { right: 14px; bottom: 12px; }
@media (max-width: 767.98px) { .hero-art .lens .chip { display: none; } } /* the street lens's chip does not fit a phone's lens */
.lens { border-radius: 50%; box-shadow: 0 0 0 3px var(--zone), 0 0 0 12px rgba(255, 196, 0, .14), 0 18px 40px rgba(0, 0, 0, .5); }

/* ---------- Status marks: filled = Today, ring = In development, dashed ring = Vision ---------- */
.m { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--zone); }
.m.today { background: var(--zone); }
.m.vision { border-style: dashed; }
.status, .st {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font: 800 var(--t16)/1.2 var(--font); color: inherit;
}
.status::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--zone); margin-top: -3px;
}
.status[data-status="today"]::before { background: var(--zone); }
.status[data-status="vision"]::before { border-style: dashed; }
.st .m { margin-top: -3px; }
/* Inline status (SPEC 11): an In development or Vision capability inside the story says so inline, with the same mark. */
.content > p > .status:first-child { display: inline; font-size: inherit; line-height: inherit; }
.content > p > .status:first-child::before { display: inline-block; vertical-align: -1px; margin: 0 9px 0 0; }

/* Rows: a status, then what it is (the slides' rows) */
.rows { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); row-gap: 12px; align-items: baseline; margin-top: var(--s3); }
.rows .st { min-width: 0; }
.rows p { line-height: 1.4; }
@media (max-width: 480px) { .rows { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .rows p { margin-bottom: 8px; } .rows .st { margin-top: 2px; } }

/* The key to the three labels */
.key { display: grid; gap: var(--s2) var(--s3); padding: 0; list-style: none; }
.key li { display: grid; gap: 6px; align-content: start; justify-items: start; }
.key p { color: var(--muted); font-size: var(--t16); line-height: 1.5; }
@media (min-width: 768px) { .key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Simulation plates: a dark band, full bleed ---------- */
.plate-band { background: var(--night); }
.sim { width: min(100%, var(--plate-max)); margin-inline: auto; background: var(--night); }
.sim iframe {
  width: 100%; border: 0; background: var(--night);
  /* first guess before the scene reports its height: the stage plus caption and controls */
  height: min(calc(min(100vw, var(--plate-max)) * .5625 + 190px), 100svh);
}
.sim-placeholder {
  position: relative; aspect-ratio: 16 / 9; background: var(--asphalt); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: var(--s3) max(var(--gutter), calc((100% - var(--max)) / 2));
}
.sim-placeholder p { font-weight: 600; font-size: var(--t21); line-height: 1.3; }
.sim-placeholder p + p { font-weight: 400; font-size: var(--t16); color: var(--on-dark-muted); }
@media (max-width: 640px) {
  .sim iframe { height: calc(100vw * 1.25 + 300px); }
  .sim-placeholder { aspect-ratio: 4 / 5; }
}

/* ---------- Sections (world and text pages): a side head and its content, on the same first baseline ---------- */
.section { padding-block: var(--section) 0; }
.section-last { padding-bottom: var(--section); }
.section > .grid { row-gap: var(--s2); align-items: baseline; }
.side { font-size: var(--t18); font-weight: 800; line-height: 1.3; letter-spacing: -.005em; }
.side::before { content: ""; display: inline-block; width: 6px; height: 18px; border-radius: 1.5px; background: var(--zone); margin-right: 10px; vertical-align: -2px; }
.content > * + * { margin-top: var(--s2); }
.content > p:not(.lead) { max-width: 40em; }
.content > p + .text-link { margin-top: 0; }
.content > .text-link + p { margin-top: var(--s3); }
.lead { font-size: var(--t24); font-weight: 800; line-height: 1.16; letter-spacing: -.018em; max-width: 24em; text-wrap: balance; }
.content > .lead + p { margin-top: var(--s2); }
.note { color: var(--muted); }
@media (min-width: 768px) {
  .section .side { grid-column: 1 / span 3; }
  .section .content { grid-column: 4 / span 8; }
  .section .content.wide { grid-column: 4 / span 9; }
}
@media (min-width: 1024px) {
  .lead { font-size: var(--t36); line-height: 1.1; letter-spacing: -.022em; max-width: 19em; }
  .content > .lead + p { margin-top: var(--s3); }
}
/* A section set as a dark band (What you get) */
.section.dark { margin-top: var(--section); padding-block: var(--section); }
.section.dark + .section { padding-top: var(--section); }

/* ---------- "Who is told: ... Nobody else." ---------- */
.told {
  display: flex; align-items: flex-start; gap: 14px; margin-top: var(--s4) !important;
  font-size: var(--t21); font-weight: 800; line-height: 1.3; letter-spacing: -.01em;
}
.told svg { flex: none; width: 36px; height: 36px; margin-top: -5px; }

/* ---------- Capability rows: a list read like a table, not a grid of cards ---------- */
.caps { list-style: none; padding: 0; margin-top: var(--s5) !important; border-bottom: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); row-gap: 4px; padding-block: 18px 20px; border-top: 1px solid var(--line); }
.cap-name { font-weight: 800; line-height: 1.4; letter-spacing: -.005em; }
.cap-text { grid-column: 1 / -1; color: var(--muted); max-width: 40em; }
.cap .status { grid-column: 2; grid-row: 1; align-self: baseline; }
.cap-text a { padding-block: 12px; }
@media (min-width: 1024px) {
  .cap { grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 1.7fr); align-items: baseline; }
  .cap-text { grid-column: 2; }
  .cap .status { grid-column: 3; grid-row: 1; justify-self: start; }
}
.after-caps { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); margin-top: var(--s2) !important; }
.after-caps p { color: var(--muted); }
.cap .cap-when {
  grid-column: 2; grid-row: 1; align-self: baseline; white-space: nowrap;
  font: 800 var(--t15)/1.2 var(--font); font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 1024px) { .cap .cap-when { grid-column: 3; justify-self: start; } }
.content > p + .caps { margin-top: var(--s4) !important; }

/* ---------- Show me: one control and one plate on every capability row ----------
   The pill is the kit's own control (44 px, 22 px radius, mustard when on); it switches at once, with no transition
   (motion lives only inside simulations). The plate is a dark scene plate under the row: edge to edge on a phone. */
:is(.cap, .fnd) .show {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px;
  margin-top: 10px; padding: 0 18px 0 14px; border: 1px solid var(--ink); border-radius: 22px; background: var(--paper);
  color: var(--ink); font: 600 var(--t15)/1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:is(.cap, .fnd) .show svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
:is(.cap, .fnd) .show .show-off, :is(.cap, .fnd) .show[aria-expanded="true"] .show-on { display: none; }
:is(.cap, .fnd) .show[aria-expanded="true"] .show-off { display: inline; }
:is(.cap, .fnd) .show[aria-expanded="true"] { background: var(--zone); border-color: var(--zone); font-weight: 800; }
.dark :is(.cap, .fnd) .show { background: transparent; border-color: #fff; color: #fff; }
.dark :is(.cap, .fnd) .show[aria-expanded="true"] { background: var(--zone); border-color: var(--zone); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  :is(.cap, .fnd) .show:hover { background: var(--surface); }
  .dark :is(.cap, .fnd) .show:hover { background: var(--hair-dark); }
  :is(.cap, .fnd) .show[aria-expanded="true"]:hover { background: var(--zone); }
}
@media (forced-colors: active) { :is(.cap, .fnd) .show[aria-expanded="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; } }
.cap .demo { grid-column: 1 / -1; margin-top: var(--s2); background: var(--asphalt); border-radius: 4px; overflow: hidden; }
.cap .demo iframe { display: block; width: 100%; height: 520px; border: 0; } /* the estimate until the frame measures itself */
@media (min-width: 1024px) {
  /* a fixed last column: Show me and Hide differ in width, and a row's columns must not move when it opens */
  .caps.has-demos .cap { grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 1.7fr) 8.5rem; }
  .caps.has-demos .cap .show { grid-column: 4; grid-row: 1; margin-top: 0; align-self: center; justify-self: end; }
}
@media (max-width: 640px) {
  /* edge to edge: back over the row's padding and status rule (16 + 3 px) and the page gutter on both sides */
  .cap .demo { margin-left: calc(-19px - var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
  .cap .demo iframe { height: 560px; }
}

/* The home page's six foundations: the same pill under each tile's text, and one plate under their grid (plan 2.6). */
.fnd .show { margin-top: var(--s2); }
.fnd-demo { margin-top: var(--s5); background: var(--asphalt); border-radius: 4px; overflow: hidden; }
.fnd-demo iframe { display: block; width: 100%; height: 520px; border: 0; }
@media (max-width: 640px) { .fnd-demo { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; } .fnd-demo iframe { height: 560px; } }

/* ---------- Ruled list: short statements, one per hairline row ---------- */
.rules { list-style: none; padding: 0; border-bottom: 1px solid var(--line); }
.content > .rules { margin-top: var(--s4); }
.rules li { padding-block: 14px 16px; border-top: 1px solid var(--line); max-width: none; }
.rules li > span { display: block; max-width: 40em; }
.rules .r-name { font-weight: 800; line-height: 1.4; }
.rules .r-text { color: var(--muted); }
@media (min-width: 1024px) {
  .rules-named li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 1.7fr); column-gap: var(--s3); align-items: baseline; padding-block: 18px 20px; }
  .rules-named .r-text { grid-column: 2 / -1; }
}

/* ---------- Team (Company): a round photo in the zone's ring, the name, the role and one experience line ----------
   On a phone each person is a ruled row, photo beside the words; from 700 px a two-by-two grid, photo above. */
.team { list-style: none; padding: 0; display: grid; border-bottom: 1px solid var(--line); }
.member { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: var(--s2); align-items: start; align-content: start; padding-block: 20px 22px; border-top: 1px solid var(--line); }
.member-photo {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--surface);
  box-shadow: 0 0 0 2px var(--zone), 0 0 0 7px var(--zone-glow);
}
.member-name { font-size: var(--t18); font-weight: 800; line-height: 1.3; letter-spacing: -.005em; }
.member-role { font: 800 var(--t15)/1.3 var(--font); color: var(--muted); margin-top: 2px; }
.member-text { margin-top: var(--s1); color: var(--muted); font-size: var(--t16); line-height: 1.5; max-width: 40em; }
#team > .grid { align-items: start; } /* the first thing in the content is a photo, which has no text baseline */
@media (min-width: 700px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); border-bottom: 0; }
  .member { grid-template-columns: minmax(0, 1fr); padding-block: var(--s3) 0; border-top: 1px solid var(--line); }
  .member-photo { width: 120px; height: 120px; }
  .member-copy { margin-top: var(--s3); }
  .member-name { font-size: var(--t21); }
}

/* Questions an evaluator asks */
.qa { margin-top: var(--s5) !important; }
.qa h3 { font-size: var(--t18); font-weight: 800; line-height: 1.3; }
.qa dl { margin-top: var(--s2); }
.qa dt { font-weight: 800; margin-top: var(--s2); }
.qa dd { color: var(--muted); max-width: 40em; }

/* ---------- Home: the danger nobody sees in time ---------- */
.dangers { display: grid; gap: 8px; margin-top: var(--s4); }
.danger { position: relative; height: 220px; }
.danger .zone, .danger .still { position: absolute; inset: 0; }
@media (min-width: 768px) { .danger:nth-child(2) .zone { --zd: .25s; } .danger:nth-child(3) .zone { --zd: .5s; } }
.danger::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(8, 11, 13, .86), rgba(8, 11, 13, .2) 52%, rgba(8, 11, 13, 0) 70%); pointer-events: none; }
.danger p { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 16px; color: #fff; font-weight: 800; font-size: var(--t21); line-height: 1.12; letter-spacing: -.015em; max-width: 14em; }
.danger .illus { right: 12px; top: 12px; }
.after-dangers { font-size: var(--t21); line-height: 1.4; margin-top: var(--s4); max-width: 30em; }
@media (min-width: 768px) {
  .dangers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .danger { height: auto; aspect-ratio: 4 / 3; }
  .danger p { left: 18px; right: 16px; bottom: 16px; font-size: var(--t18); }
}
@media (min-width: 1024px) {
  .danger p { left: 24px; bottom: 22px; font-size: var(--t24); }
  .after-dangers { font-size: var(--t24); }
}

/* ---------- Home: the four steps, on a dark band ---------- */
.idea { position: relative; padding: 0; overflow: hidden; }
.idea-art { position: relative; height: 290px; }
.idea-art .still { position: absolute; inset: 0; }
.idea-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(0deg, var(--night), rgba(20, 24, 27, 0)); z-index: 3; pointer-events: none; }
.idea-art .illus { right: var(--gutter); top: 14px; }
.idea-copy { padding-block: var(--s4) var(--section); }
.step-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s4); }
.step-list h3 { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--t21); line-height: 1; letter-spacing: -.02em; }
.step-list h3 small { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding-top: 2px; margin-top: -3px; border-radius: 50%; background: var(--zone); color: #000; font-size: var(--t15); font-weight: 800; }
.step-list p { margin-top: 8px; line-height: 1.35; color: var(--on-dark); }
.step-list .st { margin-top: 10px; color: #fff; }
.gloss { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-dark); display: grid; gap: var(--s2); }
.gloss p { max-width: 36em; color: var(--on-dark); }
.gloss p b { color: #fff; font-weight: 800; }
@media (max-width: 420px) { .step-list { gap: var(--s3) var(--s2); } .step-list h3 { font-size: var(--t18); gap: 8px; } .step-list p { font-size: var(--t16); } }
@media (max-width: 340px) { .step-list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) {
  .idea { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .idea-art { height: auto; min-height: 560px; }
  .idea-art::after { left: auto; top: 0; height: auto; width: 56px; background: linear-gradient(270deg, var(--night), rgba(20, 24, 27, 0)); }
  .idea-art .illus { right: auto; left: 24px; top: auto; bottom: 18px; }
  .idea-copy { padding: var(--section) max(var(--gutter), calc((100vw - var(--max)) / 2)) var(--section) var(--s5); }
  .step-list h3 { font-size: var(--t24); }
  .step-list h3 small { width: 32px; height: 32px; font-size: var(--t16); }
}

/* ---------- Home: one street, live (slide 4) ---------- */
.street { padding-top: var(--section); }
.street-copy { padding-bottom: var(--s5); }
.street-copy .lead { max-width: 34em; color: var(--on-dark); margin-top: var(--s3); font-weight: 400; font-size: var(--t21); line-height: 1.4; letter-spacing: 0; }
.street-still { aspect-ratio: 4 / 5; }
.street-live { display: none; }
@media (min-width: 768px) { .street-live { display: block; } .street-still { display: none; } .street-copy .lead { font-size: var(--t24); } }

/* ---------- Home: the worlds. Phones and tablets: a deck to swipe, like the carousel itself. Desktop: one stage
   stays in place while the four worlds scroll past it, and each picture opens as a zone. ---------- */
.worlds { margin-top: var(--s4); }
.stage { display: none; }
.world-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.world-list::-webkit-scrollbar { display: none; }
.world-list:focus-visible { outline-offset: -2px; }
.world { flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; }
.world-art { position: relative; aspect-ratio: 4 / 3; display: flex; text-decoration: none; }
.world-art .still { flex: 1 1 0; height: 100%; min-width: 0; }
.world-art .still + .still { margin-left: 4px; }
.world-name, .stage-name { position: absolute; z-index: 4; left: 20px; top: 18px; display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-weight: 800; font-size: var(--t21); letter-spacing: -.015em; line-height: 1; text-shadow: 0 1px 10px rgba(10, 13, 16, .9); }
.world-name i, .stage-name i { width: 7px; height: 22px; border-radius: 1.5px; background: var(--zone); margin-top: -4px; }
.world-art .illus { right: 12px; bottom: 10px; }
.world-art:hover .world-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.world h3 { font-weight: 800; font-size: var(--t24); line-height: 1.08; letter-spacing: -.02em; margin-top: var(--s3); max-width: 20em; }
.world .rows { margin-top: var(--s2); row-gap: 8px; column-gap: var(--s2); }
.world .rows .st { font-size: var(--t15); }
@media (max-width: 480px) { .world .rows { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; column-gap: 12px; } .world .rows p { margin-bottom: 0; } .world .rows .st { margin-top: 0; } }
.world .rows p { font-size: var(--t16); }
.world h3 a { text-decoration: none; }
.world h3 a:hover { text-decoration: underline; text-decoration-color: var(--zone); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.world .see-live { margin-top: auto; padding-top: var(--s2); align-self: flex-start; }
.world-note { margin-top: var(--s2); color: var(--muted); font-size: var(--t16); line-height: 1.45; max-width: 34em; }
.deck-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--s3); }
.deck-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); transition: background var(--t-ui) ease-out; }
.deck-dots i.on { background: var(--ink); }
.quiet-line { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); }
.quiet-line a { color: var(--ink); font-weight: 600; }
@media (min-width: 600px) { .world { flex-basis: 64%; } .world-art { aspect-ratio: 16 / 10; } }
@media (min-width: 768px) { .world h3 { font-size: var(--t30); } }
@media (min-width: 1024px) {
  .worlds { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s6); margin-top: var(--s5); }
  .stage { display: block; position: sticky; top: 12vh; height: 76vh; max-height: 720px; overflow: hidden; background: var(--asphalt); }
  .stage > .zone { position: absolute; inset: 0; visibility: hidden; }
  .stage > .zone.is-on { visibility: visible; z-index: 2; }
  .stage > .zone.was-on { visibility: visible; z-index: 1; }
  .js .stage > .zone.was-on { --zr: var(--zmax); transition: none; }   /* the previous picture stays underneath */
  .stage .duo { display: flex; gap: 4px; }
  .stage .duo > .still { flex: 1 1 0; height: 100%; min-width: 0; }
  .stage .illus { right: 14px; bottom: 12px; }
  .stage-name { z-index: 5; left: 24px; top: 22px; font-size: var(--t24); }
  .stage-rail { position: absolute; z-index: 5; left: 24px; bottom: 18px; display: flex; gap: 10px; margin: 0; }  /* where the reader is among the four */
  .stage-rail i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--zone); transition: background var(--t-ui) ease-out; }
  .stage-rail i.on { background: var(--zone); }
  .world-list { display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .world { min-height: 76vh; justify-content: center; padding-block: var(--s5); }
  .world .world-art { display: none; }
  .world h3 { font-size: var(--t36); margin-top: 0; }
  .world .rows .st { font-size: var(--t16); }
  .world .rows p { font-size: var(--t18); }
  .world .see-live { margin-top: var(--s2); }
  .deck-dots { display: none; }
}

/* ---------- Home: six foundations ---------- */
.fnds { list-style: none; padding: 0; display: grid; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.fnd { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.fnd svg { width: 48px; height: 48px; }
.fnd h3 { font-weight: 800; font-size: var(--t21); line-height: 1.1; letter-spacing: -.015em; padding-top: 3px; }
.fnd p { margin-top: 4px; line-height: 1.38; color: var(--on-dark); font-size: var(--t16); }
.fnd a { color: #fff; }
.fnd-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-dark); display: grid; gap: var(--s2); }
.fnd-foot .rows { margin-top: 0; }
.fnd-foot .text-link { color: #fff; justify-self: start; }
@media (min-width: 700px) { .fnds { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); margin-top: var(--s5); } .fnd { grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; } .fnd svg { width: 64px; height: 64px; } .fnd h3 { padding-top: 6px; } .fnd p { font-size: var(--t18); margin-top: 6px; } }
@media (min-width: 1100px) {
  .fnds { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
  .fnd-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ---------- Milestones along the road (Company) ---------- */
.road-band { position: relative; }
.road-band .road { position: absolute; left: 0; top: 0; bottom: 0; width: 96px; }
.road-band .road .illus { left: 10px; top: 12px; right: auto; bottom: auto; }
.road-copy { padding-block: var(--section); padding-left: calc(96px + var(--s3)); padding-right: var(--gutter); }
.miles { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: var(--s3); }
.miles li { position: relative; }
.miles li::before { /* the stop on the road */
  content: ""; position: absolute; left: calc(-48px - var(--s3) - 17px); top: -2px; width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid var(--zone); background: radial-gradient(circle, var(--zone) 0 5px, rgba(255, 196, 0, .16) 5.5px);
}
.miles li::after { content: ""; position: absolute; left: calc(-48px - var(--s3) + 20px); width: calc(48px + var(--s3) - 30px); top: 14px; border-top: 2.5px dotted var(--zone); }
.road-band.has-car .miles li:last-child::before { visibility: hidden; }
.road-band.has-car .miles li:last-child::after { margin-left: 34px; width: calc(48px + var(--s3) - 64px); }
.miles h3 { font-weight: 800; font-size: var(--t30); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.miles p { margin-top: 6px; max-width: 26em; line-height: 1.4; }
@media (min-width: 768px) {
  .road-band .road { width: 200px; }
  .road-copy { padding-left: calc(200px + var(--s6)); }
  .miles li::before { left: calc(-100px - var(--s6) - 22px); width: 44px; height: 44px; top: -8px; background: radial-gradient(circle, var(--zone) 0 6px, rgba(255, 196, 0, .16) 6.5px); }
  .miles li::after { left: calc(-100px - var(--s6) + 26px); width: calc(100px + var(--s6) - 44px); top: 13px; }
  .road-band.has-car .miles li:last-child::after { margin-left: 44px; width: calc(100px + var(--s6) - 88px); }
}
@media (min-width: 1180px) {
  .road-band { --m: calc((100vw - min(var(--max), 100vw - 2 * var(--gutter))) / 2); }
  .road-band .road { width: calc(var(--m) + 190px); }
  .road-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s6); align-items: start;
    width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; padding-left: 270px; padding-right: 0; }
  .miles li::before { left: calc(-175px - var(--m) / 2 - 22px); }
  .miles li::after { left: calc(-175px - var(--m) / 2 + 26px); width: calc(175px + var(--m) / 2 - 44px); }
  .road-band.has-car .miles li:last-child::after { margin-left: 60px; width: calc(175px + var(--m) / 2 - 104px); }
}

/* ---------- Home: what stands behind it, a slim white band (no road, no years: the record is on Company) ---------- */
.proof-band { padding-block: var(--s6); }
.proof h2 { font-weight: 800; font-size: var(--t24); letter-spacing: -.015em; line-height: 1.1; }
.proof ul { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: var(--s3) var(--s4); }
.proof li { padding-top: 12px; border-top: 2px solid var(--ink); }
.proof b { display: block; font-weight: 800; font-size: var(--t18); line-height: 1.25; letter-spacing: -.01em; }
.proof span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--t16); line-height: 1.45; }
.proof li a { padding-block: 10px; }
.proof > .text-link { margin-top: var(--s2); }
@media (min-width: 600px) { .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .proof-band { padding-block: var(--s7); } .proof ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Company: the record runs down the road, one column */
@media (min-width: 1180px) { .road-record .road-copy { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing: which world is yours? ---------- */
.closing { position: relative; overflow: hidden; }
.lenses { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) 20px; margin-top: var(--s5); }
.lenses a { display: grid; justify-items: center; gap: 18px; text-decoration: none; color: #fff; font-weight: 800; font-size: var(--t15); letter-spacing: -.01em; line-height: 1.1; text-align: center; }
.lenses .lens { display: block; width: min(100%, 136px); aspect-ratio: 1; transition: box-shadow .18s; }
@media (max-width: 767.98px) { .lenses .lens { box-shadow: 0 0 0 2px var(--zone), 0 0 0 7px rgba(255, 196, 0, .14); } }
.lenses a:hover .lens, .lenses a:focus-visible .lens { box-shadow: 0 0 0 4px var(--zone), 0 0 0 18px rgba(255, 196, 0, .22), 0 18px 40px rgba(0, 0, 0, .5); }
.lenses a:focus-visible { outline: 0; }
.lenses a:focus-visible span:last-child { outline: 2px solid #fff; outline-offset: 4px; }
.lenses a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--zone); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.pilot-ask { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-dark); display: grid; gap: var(--s4); }
.pilot-ask h2 { font-weight: 800; font-size: var(--t36); line-height: 1.04; letter-spacing: -.025em; }
.pilot-ask p { font-size: var(--t21); line-height: 1.4; max-width: 28em; margin-top: var(--s2); }
.pilot-ask .hero-actions { margin-top: 0; }
.invest { margin-top: var(--s3) !important; font-weight: 800; color: #fff; }
.invest a { text-decoration-color: var(--zone); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.dark .mail, .site-footer .mail { color: var(--zone); font-weight: 800; font-size: var(--t21); }
@media (min-width: 768px) {
  .lenses { gap: var(--s4); }
  .lenses .lens { width: min(100%, 184px); }
  .lenses a { font-size: var(--t21); gap: 30px; }
  .pilot-ask h2 { font-size: var(--t48); }
}
@media (min-width: 1024px) {
  .pilot-ask { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s6); align-items: end; }
  .lenses { gap: var(--s2); }
  .lenses .lens { width: min(100%, 200px); }
}

/* ---------- Record of what has been done ---------- */
.record { list-style: none; padding: 0; }
.record li { display: grid; row-gap: 2px; padding-block: 10px; }
.record .yr { font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .record li { grid-template-columns: 5.5em minmax(0, 1fr); column-gap: var(--s3); row-gap: 0; }
}

/* ---------- A quoted line at the size of a lead (Company) ---------- */
.quote blockquote { margin: 0; }
.quote blockquote p {
  max-width: 22em; font-size: var(--t24); font-weight: 800; line-height: 1.16; letter-spacing: -.018em;
  text-indent: -.42em; text-wrap: pretty;
}
.quote figcaption { margin-top: var(--s2); color: var(--muted); font-size: var(--t16); }
@media (min-width: 1024px) {
  .quote blockquote p { max-width: 20em; font-size: var(--t36); line-height: 1.1; letter-spacing: -.022em; }
  .quote figcaption { margin-top: var(--s3); }
}
.content > .quote + p { margin-top: var(--s4); }

/* ---------- Video facade: nothing loads from YouTube until it is asked for ---------- */
.video { margin-top: var(--s4) !important; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--asphalt); overflow: hidden; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); }
.video-facade:focus-visible { outline-offset: 3px; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 2px 20px 0 16px; border-radius: 23px; background: var(--zone);
  font: 800 var(--t15)/1 var(--font); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.video-play svg { width: 15px; height: 15px; margin-top: -2px; }
.video-play .len { font-weight: 600; }
.video-facade:hover .video-play { background: #FFD23D; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: var(--s2); color: var(--muted); max-width: 40em; }

/* ---------- Request a pilot: the dark band that closes every page ---------- */
.pilot { margin-top: var(--section); padding-block: var(--section); background: var(--night); color: var(--on-dark); }
.pilot .side, .pilot .lead { color: #fff; }
.pilot .content > .hero-actions { margin-top: var(--s4); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--s5) var(--s4); background: var(--pitch); color: var(--on-dark); font-size: var(--t16); }
.site-footer .grid { row-gap: var(--s3); }
.foot-id { display: grid; gap: var(--s2); align-content: start; justify-items: start; }
.foot-id p { color: var(--on-dark-muted); max-width: 22em; }
.foot-id .invest { margin-top: 0 !important; color: #fff; max-width: 18em; line-height: 1.35; }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--gutter); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--on-dark); }
.foot-nav a:hover { text-decoration: underline; color: #fff; }
.legal { color: var(--on-dark-muted); font-size: var(--t14); }
@media (min-width: 768px) {
  .foot-id { grid-column: 1 / span 5; }
  .foot-nav { grid-column: 7 / span 6; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Page change: the new page opens as a zone (Chrome, Safari; elsewhere navigation is plain) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vz-page .7s var(--ease-zone) both; }
  ::view-transition-group(site-header) { animation: none; }
}
@keyframes vz-page { from { clip-path: circle(0 at 50% 38%); } to { clip-path: circle(150vmax at 50% 38%); } }

/* ---------- World pages: the home page's four steps again, the hint, and how much is Today ---------- */
.side-step::before { display: none; }
.side small {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding-top: 2px; margin: -3px 6px 0 0;
  border-radius: 50%; background: var(--zone); color: #000; font-size: var(--t15); font-weight: 800; line-height: 1; vertical-align: middle;
}
.side small + small { margin-left: -2px; }
.sim-hint { padding-top: var(--s2); text-align: right; font-size: var(--t15); line-height: 1.3; color: var(--on-dark-muted); }
.caps .cap { padding-left: 16px; border-left: 3px solid transparent; }
.caps .cap:has(.status[data-status="today"]) { border-left: 3px solid var(--zone); }
.caps .cap:has(.status[data-status="dev"]) { border-left: 3px double var(--zone); }
.caps .cap:has(.status[data-status="vision"]) { border-left: 3px dashed var(--zone); }

/* ---------- Home: the lane rule, the road marking from the scenes, used twice on dark ---------- */
.lane-rule { height: 3px; margin-top: var(--s5); background: repeating-linear-gradient(90deg, rgba(233, 236, 238, .5) 0 56px, transparent 56px 128px); }
.lane-rule + .fnd-foot, .lane-rule + .pilot-ask { margin-top: var(--s4); padding-top: 0; border-top: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A second scene further down a page */
.plate-band-gap { margin-top: var(--s5); }
.hero .invest { display: block; }

/* Trust: the label legend starts below the first screen (no status words on a first screen). */
.hero-full { min-height: calc(100svh - var(--head)); display: flex; flex-direction: column; justify-content: center; }