/* =====================================================================
   Newlithic Robotics — site styles

   A dark datasheet: the ground is the charcoal of the rubber mat the
   grippers stand on, the accent is the yellow of the printed jaws, and the
   evidence panels (lens, annotated frame, episode record, schema) sit one
   step darker still. The --paper / --mat token names are kept from the
   light version so nothing else has to change.

   Type: IBM Plex Sans (400, 700) for headings and text, IBM Plex Mono (400)
   for labels and data. Both are self-hosted Latin subsets in assets/fonts
   (about 60 KB together, SIL Open Font License, see assets/fonts/OFL.txt).
   The Fallback faces resize Arial and Courier New to Plex's metrics
   (values from @capsizecss) so text does not jump when the fonts arrive.
   ===================================================================== */

@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("assets/fonts/plex-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"); ascent-override: 101.3184%; descent-override: 27.183%; line-gap-override: 0%; size-adjust: 101.1663%; }
@font-face { font-family: "IBM Plex Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); ascent-override: 102.5167%; descent-override: 27.5045%; line-gap-override: 0%; size-adjust: 99.9837%; }

:root {
  /* ground */
  --paper: #17191B;
  --paper-2: #1E2124;
  --surface: #22262A;
  --ink: #EEEFEB;
  --ink-2: #C4C8C2;
  --muted: #8E938E;
  --line: #2F3438;
  --line-2: #3D4247;

  /* accent: printed jaw yellow */
  --yellow: #FFD21E;
  --yellow-2: #F0C200;
  --yellow-ink: #F2C93A;
  --on-yellow: #151616;

  /* evidence panels: one step darker than the ground */
  --mat: #0E0F11;
  --mat-2: #17191B;
  --mat-line: #2B2F34;
  --mat-muted: #8E938E;
  --mat-text: #EEEFEB;

  /* type scale: every font-size in this file uses one of these eight steps.
     2xs only for labels drawn over photos, video and charts; xs for uppercase mono labels;
     sm for secondary text; base for body; md for ledes and small headings; lg for sub-headings;
     xl for section headings; 2xl for the page headline. lg, xl and 2xl grow with the viewport. */
  --fs-2xs: .6875rem;  /* 11px */
  --fs-xs: .75rem;     /* 12px */
  --fs-sm: .875rem;    /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);    /* 20-24px */
  --fs-xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);  /* 28-40px */
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem);   /* 35-53px */
  --display: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;
  --body: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'Courier New', monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 4vw, 48px);
  --r: 3px;
  --nav-h: 64px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--yellow-2); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  padding: 8px 12px; background: var(--ink); color: var(--paper); border-radius: var(--r);
}
.skip:focus { top: 12px; }

/* ---------- type helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.tick { width: 10px; height: 10px; background: var(--yellow); flex: none; }
h1.eyebrow { font-weight: 400; margin: 0 0 14px; }
/* About page: labels double as section titles, so they run larger there */
.page-about .eyebrow { font-size: var(--fs-md); letter-spacing: .12em; margin-bottom: 18px; }
.page-about .tick { width: 13px; height: 13px; }
/* About page rhythm: label, 16px, optional lede, 28px, content; same bottom padding on every section */
.page-about .section__head { margin-bottom: 28px; }
.page-about .section__head--tight { margin-bottom: 28px; }
.page-about .section__head .lede { margin-top: 16px; }
.page-about .places { margin-top: 0; }
.page-about .about-head { padding-bottom: clamp(56px, 7vw, 88px); }
.page-about .about-head .section__head { margin-bottom: 0; }
.page-about .founder:first-child { padding-top: 24px; }
.page-about .staff__line { min-height: 3.9em; }

h1.display { font-size: var(--fs-2xl); font-weight: 700; }
h2.display { font-size: var(--fs-xl); max-width: 22ch; }
.lede { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; margin-top: 16px; line-height: 1.55; }
.section__head { max-width: 820px; margin-bottom: clamp(28px, 4vw, 44px); }
.section__head--tight { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 20px; border-radius: var(--r);
  font-weight: 700; font-size: var(--fs-base); line-height: 1;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 10px 14px; font-size: var(--fs-sm); }
.btn--primary { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow); }
.btn--primary:hover { background: var(--yellow-2); border-color: var(--yellow-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--ghost-dark { color: var(--mat-text); border-color: var(--mat-line); }
.btn--ghost-dark:hover { border-color: var(--mat-text); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Logo: the tile mark plus NEWLITHIC / ROBOTICS as Arial outlines (brand/newlithic-logo-inline-*.svg),
   so it renders identically on every OS. NEWLITHIC takes currentColor; ROBOTICS is muted. */
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand__logo { display: block; height: 26px; width: auto; }
.brand__logo .brand__sub { fill: var(--muted); }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); transition: color .15s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav__toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
  transition: transform .2s ease, top .2s ease;
}
.nav__toggle span:first-child { top: 15px; }
.nav__toggle span:last-child { top: 23px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }
.nav__mobile { border-top: 1px solid var(--line); padding: 8px var(--pad) 16px; display: grid; }
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.nav__mobile a:last-child { border: 0; }
.nav__mobile-cta { color: var(--yellow); }

/* ---------- cover: full-screen task mosaic behind the headline (home page) ---------- */
body:has(.cover) .nav {
  position: fixed; left: 0; right: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background-color .25s ease, border-color .2s ease;
}
body:has(.cover) .nav.is-scrolled,
body:has(.cover) .nav.is-open {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.cover {
  position: relative; display: flex; align-items: flex-end;
  height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--mat);
}
.cover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 15, 17, .6) 0%, rgba(14, 15, 17, 0) 20%),
    linear-gradient(to top, rgba(14, 15, 17, .7) 0%, rgba(14, 15, 17, 0) 25%);
}

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
}
.hero::before {
  /* graph-paper dots, fading out: the sheet the station sits on */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 85%);
}
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(24px, 3vw, 44px); align-items: center;
}
.hero__grid .hero__top { margin-bottom: 0; }
/* narrow text column beside the video: headline steps down so it wraps in two or three lines */
.hero__grid h1.display { font-size: var(--fs-2xl); }
.hero__grid .stage { min-width: 0; }
/* the caption spans the full width of the video above it */
.stage figcaption { max-width: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__terms { position: relative; margin-top: clamp(40px, 5vw, 64px); }

/* hero: title row, then the clip as a full-width stage, then the facts strip */
.hero__top { display: grid; grid-template-columns: 1fr; gap: 0; margin-bottom: clamp(20px, 3vw, 32px); }
.hero__top .lede { margin-top: 18px; }
.stage__media {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.stage__video { width: 100%; height: 100%; object-fit: contain; }
.stage__hud {
  position: absolute; display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 10px; border-radius: var(--r);
  background: rgba(26, 28, 30, .86); color: var(--mat-text);
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.stage__hud--tl { top: 12px; left: 12px; }
.stage__hud--bl { bottom: 12px; left: 12px; }
.stage__hud--br { bottom: 12px; right: 12px; }
.stage__hud b { font-weight: 700; }
.facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px;
  margin-top: 48px; border-top: 1px solid var(--line-2);
}
.facts__item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts__item dt { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts__item dd { margin-top: 5px; font-weight: 700; font-size: var(--fs-base); }
.facts--row { grid-template-columns: repeat(4, 1fr); margin-top: clamp(28px, 4vw, 44px); }

/* ---------- framed images ---------- */
.frame {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.frame img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.frame--tight img { aspect-ratio: 4 / 5; }
.frame__tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 14px; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(26,28,30,.86); color: var(--mat-text);
}
figcaption { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; line-height: 1.55; max-width: 60ch; }

/* ---------- sections ---------- */
.section { padding: clamp(56px, 7vw, 88px) 0; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--mat); color: var(--mat-text); }
.section--dark .eyebrow { color: var(--mat-muted); }
.section--dark .lede { color: var(--ink-2); }
.section--dark .display { color: #FFFFFF; }
.section--dark figcaption { color: var(--mat-muted); }

/* ---------- compare table ---------- */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.compare__table { min-width: 760px; }
.compare__table th, .compare__table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.compare__table thead th {
  font-family: var(--mono);
  font-weight: 400; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: var(--paper);
}
.compare__table tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.compare__table tbody td { color: var(--ink-2); }
.compare__table tr:last-child th, .compare__table tr:last-child td { border-bottom: 0; }
.compare__table .compare__us { background: rgba(255, 210, 30, .10); color: var(--ink); font-weight: 400; }
.compare__table thead .compare__us { color: var(--ink); box-shadow: inset 0 3px 0 var(--yellow); }

/* ---------- hardware ---------- */
.hardware__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frame--wide { margin-top: 12px; }
.frame--wide img { aspect-ratio: 4 / 3; }
.tenet__media figcaption + .frame--wide { margin-top: 14px; }

.spec-list { margin-top: 32px; border-top: 1px solid var(--line-2); }
.spec-list li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-list__k { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.spec-list__v { font-size: var(--fs-base); color: var(--ink-2); }
.spec-list--tight { margin-top: 28px; }
.spec-list--tight li { padding: 11px 0; }

/* ---------- hardware: four tenets, copy beside media, alternating sides ---------- */
.tenets { display: grid; gap: clamp(36px, 5vw, 64px); }
.tenet { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.tenet--flip .tenet__copy { order: 2; }
.tenet__n { display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow-ink); margin-bottom: 14px; }
.tenet h3 { font-family: var(--display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 14px; text-wrap: balance; }
.tenet p { color: var(--ink-2); font-size: var(--fs-base); }
.tenet p + p { margin-top: 12px; }
.tenet .spec-list { margin-top: 24px; }
.tenet__sublabel { margin-top: 22px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tenet__sublabel + .spec-list { margin-top: 8px; }
.tenet .station { margin-bottom: 0; }
.ledger-wrap { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ledger th, .ledger td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
.ledger thead th { font-family: var(--mono); font-weight: 400; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.ledger tbody th { font-weight: 700; color: var(--ink); width: 34%; }
.ledger tbody td { color: var(--ink-2); }
.ledger tbody tr:last-child { background: rgba(255, 210, 30, .08); }
.ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 0; }
.ledger__note { margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- station photo with callouts ---------- */
.station { margin-bottom: clamp(40px, 6vw, 72px); }
.station__img { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.station__img img { width: 100%; }
.callout { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.callout__dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--on-yellow); flex: none;
  animation: pulse 2.4s ease-out infinite;
}
.callout__label {
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(26,28,30,.9); color: var(--mat-text); padding: 5px 9px; border-radius: var(--r);
}
.callout--left { flex-direction: row-reverse; transform: translate(-100%, -50%); left: calc(var(--x) + 6px); }
.callout--up { flex-direction: column-reverse; gap: 6px; transform: translate(-50%, -100%); top: calc(var(--y) + 6px); }
.callout--down { flex-direction: column; gap: 6px; transform: translate(-50%, 0); top: calc(var(--y) - 6px); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 210, 30, .6); }
  70% { box-shadow: 0 0 0 10px rgba(255, 210, 30, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 210, 30, 0); }
}

/* ---------- annotated frame (Sensing) ---------- */
.annot { position: relative; border-radius: var(--r); overflow: hidden; background: #000; }
.annot img { width: 100%; display: block; }
.annot__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.annot__card { fill: none; stroke: var(--yellow); stroke-width: 1.4; stroke-dasharray: 6 5; opacity: .8; }
.annot__tag rect { fill: rgba(255, 210, 30, .14); stroke: var(--yellow); stroke-width: 2.4; }
.annot__tag path { fill: none; stroke: #fff; stroke-width: 2.2; }
.annot__leader { fill: none; stroke: var(--yellow); stroke-width: 1.6; }
.annot__pt { fill: var(--yellow); }
.annot__label {
  position: absolute; left: var(--x); top: var(--y); transform: translate(0, -50%);
  display: grid; gap: 2px; padding: 7px 10px; border-radius: var(--r);
  background: rgba(26, 28, 30, .92); border: 1px solid rgba(255, 210, 30, .55);
  font-size: var(--fs-2xs); letter-spacing: .06em; white-space: nowrap;
}
.annot__k { color: var(--mat-muted); text-transform: uppercase; }
.annot__v { color: #fff; }

/* ---------- REC indicator (hero HUD) ---------- */
.lens__rec { display: inline-flex; align-items: center; gap: 7px; }
.lens__rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- pipeline flow (a real sequence, hence numbered) ---------- */
.pipeline__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.pipeline__head .section__head { margin-bottom: 0; }
.pipeline__qa img { width: 100%; height: auto; aspect-ratio: 1600 / 766; }
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr) 28px) minmax(0, 1fr); gap: 6px; align-items: stretch; }
.flow__node {
  display: grid; justify-items: start; align-content: start; gap: 10px;
  padding: 16px 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.flow__n { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--yellow-ink); }
.flow__icon { width: 44px; height: 44px; color: var(--ink); }
.flow__icon .acc { stroke: var(--yellow); }
.flow__icon .acc-fill { fill: var(--yellow); }
.flow__icon .ink-fill { fill: currentColor; }
.flow__label { font-weight: 700; font-size: var(--fs-base); line-height: 1.2; }
.flow__sub { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.flow__link { position: relative; }
.flow__link i { position: absolute; left: 0; right: 0; top: 74px; height: 1px; background: var(--line-2); }
.flow__link i::after { content: ""; position: absolute; right: -1px; top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--line-2); }

/* ---------- validation loop: chart + video ---------- */
.validate-head { margin-top: clamp(36px, 5vw, 56px); max-width: 720px; }
.validate-head__title { font-size: var(--fs-lg); }
.validate-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 28px; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 12px; }
.chart__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.chart__title { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; }
.chart__badge { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(255, 210, 30, .45); padding: 3px 7px; border-radius: var(--r); white-space: nowrap; }
.chart[data-illustrative="false"] .chart__badge { display: none; }
.chart__svg { width: 100%; height: auto; display: block; }
.chart__svg .grid line { stroke: var(--line); stroke-width: 1; }
.chart__svg .axis text, .chart__svg .xlab { fill: var(--muted); font-family: var(--mono); font-size: var(--fs-xs); }
.chart__svg .bar path { fill: var(--yellow); }
.chart[data-illustrative="true"] .chart__svg .bar path { fill: rgba(255, 210, 30, .12); stroke: var(--yellow); stroke-width: 1.5; }
.chart__svg .bar .hit { fill: transparent; }
.chart__svg .val { fill: var(--ink); font-family: var(--body); font-size: var(--fs-xs); font-weight: 700; opacity: 0; transition: opacity .15s; }
.chart__svg .bar:hover .val, .chart__svg .bar:focus .val, .chart__svg .bar.is-last .val { opacity: 1; }
.chart__svg .bar:focus { outline: none; }
.chart__table { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
.chart__table summary { cursor: pointer; }
.chart__table table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.chart__table th, .chart__table td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.chart__table td:last-child, .chart__table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chart figcaption { margin-top: 10px; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__more { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.video__link { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; color: var(--ink); padding: 24px; }
.video__link b { font-size: var(--fs-base); }
.video__link span { font-size: var(--fs-sm); color: var(--muted); }
.video__play { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; }
.video__play i { display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid var(--on-yellow); margin-left: 4px; }

/* ---------- dataset ---------- */
.dataset__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.dataset__cta { display: grid; justify-items: start; gap: 12px; margin-top: 28px; }
.dataset__note { font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }
.dataset__repo { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--muted); }
.dataset__repo a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--yellow-2); text-underline-offset: 3px; }
.dataset__spec .spec-list { margin-top: 12px; }
.code { background: var(--mat); color: var(--mat-text); border-radius: var(--r); overflow: hidden; border: 1px solid var(--mat-line); }
.code__head {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--mat-line); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--mat-muted);
}
.code__badge { font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); border: 1px solid rgba(255,210,30,.45); padding: 3px 7px; border-radius: var(--r); }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-size: var(--fs-xs); line-height: 1.65; }
.code .k { color: var(--yellow); }
.code .s { color: #D6F1C2; }
.code .n { color: #B9C8FF; }

/* ---------- operations ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stats--2 { grid-template-columns: repeat(3, 1fr); }
.stats-group + .stats-group { margin-top: clamp(28px, 4vw, 44px); }
.stats-group__label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.stats-group--plan .stat { border-top-style: dashed; border-top-color: var(--muted); }
.stats-group--plan .stat__n { color: var(--ink-2); }
.results { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; margin-top: clamp(20px, 3vw, 32px); padding-top: 16px; border-top: 1px solid var(--line-2); }
.results__item dt { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow-ink); }
.results__item dd { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-base); max-width: 70ch; }
.results__item strong { color: var(--ink); }
.timeline--cadence.timeline--3 { grid-template-columns: repeat(3, 1fr); }
.timeline__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow-2); text-underline-offset: 3px; }
.task-card { border: 1px solid var(--mat-line); border-radius: var(--r); padding: 14px 16px 18px; margin: 0; display: grid; gap: 14px; min-width: 0; }
.task-card legend { padding: 0 6px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.stat__n { display: block; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__pct { font-size: .55em; margin-left: 2px; color: var(--muted); }
.stat__pre { font-size: .55em; margin-right: 6px; color: var(--muted); }
.stat__l { display: block; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); max-width: 22ch; }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: clamp(48px, 6vw, 80px); }
.timeline__item { position: relative; padding-top: 22px; border-top: 1px solid var(--line-2); }
.timeline__item::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--ink); }
.timeline__item:first-child::before { background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,210,30,.35); }
.timeline__date { display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.timeline__item h3 { font-family: var(--display); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; text-wrap: balance; }
.timeline__item p { font-size: var(--fs-sm); color: var(--ink-2); }
.timeline__badge { position: absolute; top: 18px; right: 0; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r); }
.timeline__badge--now { background: var(--yellow); color: var(--on-yellow); }

/* ---------- partnership: a terms sheet, not cards ---------- */
/* same columns as .hero__grid, so the terms line up with the video above */
.partnership__grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.terms { border-top: 1px solid var(--line-2); }
.terms__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.terms__row dt { font-family: var(--display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.01em; }
.terms__row dd { font-size: var(--fs-base); color: var(--ink-2); }
.terms__row--note dt { color: var(--yellow-ink); }
.terms__row--note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--yellow-2); }

/* ---------- delivery cadence (operations) ---------- */
.cadence { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.cadence__head { max-width: 760px; margin-bottom: 24px; }
.cadence__label { margin-bottom: 22px; color: var(--ink); }
.cadence__title { font-size: var(--fs-lg); }
.cadence__lede { color: var(--ink-2); margin-top: 12px; font-size: var(--fs-base); }
.cadence__lede .mono { color: var(--ink); }
.timeline--cadence { grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 0; }
.timeline--cadence h3 { font-size: var(--fs-base); }
.timeline--cadence p { font-size: var(--fs-sm); }

/* ---------- investors ---------- */
.investors__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.investors__copy .lede { margin-top: 0; }

/* ---------- team: a crew list ---------- */
.crew { border-top: 1px solid var(--line-2); }
.crew__row { display: grid; grid-template-columns: 1.1fr 1fr 2.4fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.crew__name { font-size: var(--fs-lg); font-weight: 700; }
.crew__role { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.9; padding-top: 6px; }
.crew__bio { font-size: var(--fs-base); color: var(--ink-2); max-width: 60ch; padding-top: 4px; }

/* ---------- about page ---------- */
.nav__links a.is-current { color: var(--ink); box-shadow: inset 0 -2px 0 var(--yellow); padding-bottom: 2px; }
.about-head { padding-bottom: clamp(24px, 3vw, 40px); }
.about-head h1.display { font-size: var(--fs-2xl); max-width: 18ch; }
.places { border-top: 1px solid var(--line-2); margin-top: 28px; }
.places__row { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.places__name { display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.places__role { display: block; margin-top: 6px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow-ink); }
.places__row dd { color: var(--ink-2); font-size: var(--fs-base); }
.founders { display: grid; gap: 28px; }
.founder { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; padding-top: 24px; border-top: 1px solid var(--line); }
.founder__photo { width: 120px; aspect-ratio: 1; border-radius: var(--r); object-fit: cover; background: var(--surface); border: 1px solid var(--line); }
.founder__photo--initial { display: grid; place-items: center; font-size: var(--fs-xl); color: var(--yellow); }
.founder__name { font-size: var(--fs-lg); }
.founder__role { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 12px; }
.founder__body p:last-of-type { color: var(--ink-2); font-size: var(--fs-base); max-width: 64ch; }
.operators__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* ---------- about page: staff grid ---------- */
.team-photo { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.team-photo img { width: 100%; height: auto; display: block; }
.staff-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.staff__photo { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.staff__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.staff__tag { position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: var(--r); background: rgba(26, 28, 30, .86); color: var(--mat-muted); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; }
.staff__role { font-size: var(--fs-md); margin-top: 12px; }
.staff__meta { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.staff__line { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 8px; }

.facility-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.facility-grid .station { margin-bottom: 0; }
.frame--photo { position: relative; }
.frame--photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- blog ---------- */
.post { max-width: 760px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.post__meta { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.post__tag { color: var(--yellow); border: 1px solid rgba(255, 210, 30, .45); padding: 3px 7px; border-radius: var(--r); }
h2.post__title { max-width: none; font-size: var(--fs-xl); margin-top: 14px; line-height: 1.12; }
.post__lede { font-size: var(--fs-md); color: var(--ink-2); margin-top: 16px; }
.post__body { margin-top: 28px; }
.post__body h3 { font-size: var(--fs-md); font-weight: 700; margin-top: 22px; }
.post__body p { color: var(--ink-2); margin-top: 6px; }
.post__more { margin-top: 28px; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- careers ---------- */
.jobs { display: grid; gap: 16px; max-width: 1000px; }
.job-card { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); transition: border-color .15s; }
.job-card:hover, .job-card[open] { border-color: rgba(255, 210, 30, .55); }
.job-card__summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; }
.job-card__summary::-webkit-details-marker { display: none; }
.job-card__summary:focus-visible { outline: 2px solid var(--yellow-2); outline-offset: 2px; }
.job-card__head { display: grid; gap: 4px; }
.job-card__title { font-size: var(--fs-lg); }
.job-card__teaser { color: var(--ink-2); font-size: var(--fs-base); margin-top: 6px; max-width: 70ch; }
.job-card__toggle { flex: none; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--on-yellow); background: var(--yellow); padding: 8px 12px; border-radius: var(--r); white-space: nowrap; }
.job-card__close, .job-card[open] .job-card__open { display: none; }
.job-card[open] .job-card__close { display: inline; }
.job-card[open] .job-card__toggle { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.job-card__body { padding: 0 24px 26px; border-top: 1px solid var(--line); }
.job-card__body > :first-child { margin-top: 20px; }
@media (max-width: 640px) { .job-card__summary { flex-direction: column; align-items: flex-start; padding: 18px; } .job-card__body { padding: 0 18px 22px; } }
h2.job__title { font-size: var(--fs-xl); max-width: none; }
.job__meta { margin-top: 10px; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.job__tbc { color: var(--yellow); border: 1px solid rgba(255, 210, 30, .45); padding: 2px 7px; border-radius: var(--r); display: inline-block; line-height: 1.5; }
.job__intro { margin-top: 20px; color: var(--ink-2); font-size: var(--fs-md); max-width: 70ch; }
.job__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 12px; }
.job h3 { font-size: var(--fs-md); font-weight: 700; margin-top: 24px; }
.job__list { margin-top: 10px; display: grid; gap: 8px; }
.job__list li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: var(--fs-base); }
.job__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--yellow); }
.job__privacy { margin-top: 24px; color: var(--ink-2); font-size: var(--fs-base); }
.job__apply { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.job__how { color: var(--muted); font-size: var(--fs-sm); max-width: 56ch; }
.job__how a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow-2); text-underline-offset: 3px; }
@media (max-width: 760px) { .job__cols { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__meta > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--mat-line); }
.contact__meta > div:last-child { border-bottom: 1px solid var(--mat-line); }
.contact__meta dt { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--mat-muted); padding-top: 2px; }
.contact__meta dd { font-size: var(--fs-sm); color: #fff; overflow-wrap: anywhere; }

.contact__meta dd a { color: #fff; text-decoration: underline; text-decoration-color: var(--yellow-2); text-underline-offset: 3px; }
.contact-form { display: grid; gap: 16px; margin-top: 28px; max-width: 620px; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form__field { display: grid; gap: 6px; }
.contact-form__field span { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--mat-muted); }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: var(--fs-base); color: #fff; background: var(--mat-2);
  border: 1px solid var(--mat-line); border-radius: var(--r); padding: 11px 12px; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--yellow-2); outline-offset: 1px; border-color: transparent; }
.contact-form [aria-invalid="true"] { border-color: #FF6B5E; }
.contact-form__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-form__status { font-size: var(--fs-sm); color: var(--mat-muted); }
@media (max-width: 640px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form__field span em, .dropzone__title em, .task-card__more summary em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--mat-muted); opacity: .75; margin-left: 4px; }
.contact-form textarea[name="task"] { min-height: 64px; }
/* !important so form input rules (width: 100%, padding) cannot re-expand hidden inputs */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.dropzone__target {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: 18px 14px; cursor: pointer;
  border: 1px dashed var(--mat-line); border-radius: var(--r); background: var(--mat-2); transition: border-color .15s, background .15s;
}
.dropzone__target:hover, .dropzone.is-over .dropzone__target { border-color: var(--yellow-2); }
.dropzone.is-over .dropzone__target { background: rgba(255, 210, 30, .06); }
.dropzone input:focus-visible + .dropzone__target { outline: 2px solid var(--yellow-2); outline-offset: 1px; }
.dropzone__title { font-size: var(--fs-sm); color: var(--mat-text); }
.dropzone__hint { font-size: var(--fs-sm); color: var(--mat-muted); }
.dropzone__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.dropzone__list:empty { display: none; }
.dropzone__file { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--mat-text); padding: 8px 10px; border: 1px solid var(--mat-line); border-radius: var(--r); position: relative; overflow: hidden; }
.dropzone__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dropzone__state { color: var(--mat-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.dropzone__file.is-done .dropzone__state { color: var(--yellow-ink); }
.dropzone__file.is-error .dropzone__state { color: #FF6B5E; }
.dropzone__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--yellow); transition: width .2s; }
.dropzone__remove { background: none; border: 0; color: var(--mat-muted); cursor: pointer; font-size: var(--fs-base); line-height: 1; padding: 2px 4px; }
.dropzone__remove:hover { color: var(--mat-text); }
.task-card__more summary { cursor: pointer; font-size: var(--fs-sm); color: var(--mat-text); list-style: none; display: flex; align-items: center; gap: 8px; }
.task-card__more summary::-webkit-details-marker { display: none; }
.task-card__more summary::before { content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--mat-line); border-radius: var(--r); color: var(--yellow); font-size: var(--fs-sm); }
.task-card__more[open] summary::before { content: '\2212'; }
.task-card__more-fields { display: grid; gap: 14px; margin-top: 14px; }
.contact-form__status.is-error { color: #FF8A7F; }
.btn[disabled] { opacity: .6; cursor: progress; }
.contact-form[hidden], .dropzone[hidden], .contact-form__done[hidden] { display: none; }
.contact-form__done { margin-top: 28px; max-width: 620px; padding: 22px 20px; border: 1px solid var(--mat-line); border-left: 3px solid var(--yellow); border-radius: var(--r); outline: none; }
.contact-form__done-title { font-size: var(--fs-lg); font-weight: 700; color: var(--mat-text); }
.contact-form__done-body { margin: 6px 0 16px; color: var(--mat-muted); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 26px 0; }
.footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--muted); }
.footer a:hover { color: var(--ink); }

/* ---------- reveal: a settle-in on scroll, visible at rest ---------- */
.reveal { transform: translateY(14px); transition: transform .7s cubic-bezier(.2,.7,.2,1) var(--delay, 0s); }
.reveal.in { transform: none; }
html:not(.js) .reveal { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: none; }
  .callout__dot, .lens__rec i { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .feed { grid-template-columns: 1fr 1fr; }
  .feed__still { grid-column: 1 / -1; order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .staff-grid { grid-template-columns: repeat(3, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline--cadence { grid-template-columns: repeat(3, 1fr); }
  .stats--3, .stats--2 { grid-template-columns: repeat(2, 1fr); }
  .crew__row { grid-template-columns: 1fr 1fr; }
  .crew__bio { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .hero__grid, .hero__top, .pipeline__head, .hardware__grid, .dataset__grid, .contact__grid, .partnership__grid, .investors__grid, .tenet, .operators__grid, .places__row, .facility-grid { grid-template-columns: 1fr; }
  /* single column: the code block scrolls sideways instead of widening the page past the screen */
  .dataset__grid > * { min-width: 0; }
  .places__row { gap: 8px; }
  .tenet--flip .tenet__copy { order: 0; }
  .hero__top { align-items: start; }
  .facts--row { grid-template-columns: repeat(2, 1fr); }
  .hardware__visual { order: 2; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__link { display: none; }
  .validate-grid { grid-template-columns: 1fr; }
  .section__head--tight { margin-bottom: 8px; }
  h2.display { max-width: none; }
}
@media (max-width: 640px) {
  .nav__cta .btn { display: none; }
  .facts, .facts--row { grid-template-columns: 1fr; }
  /* phones: show the dewarped left panel of the stage at 4:3 and drop the panel labels */
  .stage__hud--bl, .stage__hud--br { display: none; }
  .stage__hud--tl { gap: 10px; }
  .pair { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .feed { grid-template-columns: 1fr; }
  .feed__live { max-width: 360px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px; }
  .staff-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .timeline, .timeline--cadence, .timeline--cadence.timeline--3 { grid-template-columns: 1fr; gap: 20px; }
  .stats--3, .stats--2 { grid-template-columns: 1fr 1fr; }
  .spec-list li { grid-template-columns: 96px 1fr; }
  .terms__row { grid-template-columns: 1fr; gap: 8px; }
  .founder { grid-template-columns: 88px 1fr; gap: 16px; }
  .founder__photo { width: 88px; }
  .crew__row { grid-template-columns: 1fr; gap: 8px; }
  .callout__label { padding: 4px 6px; }
  .annot__label { padding: 5px 7px; }
  .annot__label--task { left: auto; right: 3%; transform: translate(0, -50%); }
  .contact__meta > div { grid-template-columns: 104px minmax(0, 1fr); }
}