/* ctechnology.io — prototype v0
 * Rules: ctechnology-io/docs/DESIGN.md. No gradients, no shadows, no scroll
 * animation. Hairlines instead of cards. Blue means "you can act here".
 */

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Semibold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f6f7f9;
  --white: #ffffff;
  --ink: #01092b;
  --slate: #708094;
  --blue: #004bff;
  --blue-deep: #1732b9;
  --blue-tint: #e1ebff;
  --signal: #20d3ca;

  --line: rgb(1 9 43 / 0.12);
  --line-strong: rgb(1 9 43 / 0.28);
  --line-ink: rgb(255 255 255 / 0.14);

  --display: "Clash Display", "Trebuchet MS", sans-serif;
  --text: "Onest", system-ui, sans-serif;

  --wrap: 1320px;
  --edge: 40px;
  --gutter: 24px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--text);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.wrap {
  max-width: calc(var(--wrap) + 2 * var(--edge));
  margin: 0 auto;
  padding: 0 var(--edge);
}

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

/* ── Type ─────────────────────────────────────────────── */

.label {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.label--muted { color: var(--slate); }
.label--live { display: inline-flex; align-items: center; gap: 8px; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
}

.display {
  font: 600 clamp(44px, 6vw, 84px)/0.98 var(--display);
  letter-spacing: -0.02em;
}
.display__accent { display: block; color: var(--blue); }
@media (min-width: 961px) { .display .l { display: block; } }

h2 {
  font: 600 clamp(32px, 3.8vw, 52px)/1.02 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  color: rgb(1 9 43 / 0.78);
}

/* ── Nav ──────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgb(246 247 249 / 0.96);
  border-bottom: 1px solid var(--line);
}
.nav__row {
  display: flex; align-items: center; gap: 40px;
  height: 68px;
}
.nav__logo img { width: 150px; height: auto; }
.nav__links { display: flex; gap: 4px; margin-right: auto; font-size: 15px; align-items: center; }
.nav__links > a { text-decoration: none; }

/* menus: plain HTML, no motion, hairlines like everything else */
.menu { position: relative; }
.menu__trigger, .menu__direct {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-block; padding: 10px 12px;
  font: 400 15px/1 var(--text); color: var(--ink);
  text-decoration: none;
}
.menu__trigger:hover, .menu__direct:hover { color: var(--blue); }
.menu__trigger[aria-expanded="true"] { color: var(--blue); }
/* No visual marker for the current section: the header has to look the same on
   every page. aria-current stays in the markup for screen readers. */
.menu__trigger:focus-visible, .nav__burger:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.menu__panel {
  position: absolute; top: calc(100% + 13px); left: 0; z-index: 20;
  width: 380px; padding: 8px 0;
  background: var(--white);
  border: 1px solid var(--line-strong);
}
.menu__panel[hidden] { display: none; }
/* Bridge the gap between the trigger and the panel, so moving the pointer down
   never leaves the menu and closes it. */
.menu__panel::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.menu__panel li + li { border-top: 1px solid var(--line); }
.menu__panel a, .menu__soon {
  display: block; padding: 12px 18px; text-decoration: none;
}
.menu__panel a:hover { background: var(--blue-tint); }
.menu__name { display: block; font: 500 16px/1.3 var(--display); }
.menu__desc { display: block; margin-top: 2px; font-size: 13px; color: var(--slate); }
.menu__soon { color: var(--slate); cursor: default; }
.menu__soon .menu__name { color: var(--slate); }
.menu__flag {
  margin-left: 8px; padding: 2px 6px;
  border: 1px solid var(--line-strong);
  font: 500 10px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
  vertical-align: 2px;
}
.nav__links > .menu__soon { padding: 10px 12px; }

.nav__burger { all: unset; display: none; cursor: pointer; font: 500 15px/1 var(--text); color: var(--blue); }
.nav__mobile { border-top: 1px solid var(--line); background: var(--white); padding: 8px 0 24px; }
.nav__mobile[hidden] { display: none; }
.nav__mobile .label { padding: 18px 0 6px; }
.nav__mobile ul { border-top: 1px solid var(--line); }
.nav__mobile li + li { border-top: 1px solid var(--line); }
.nav__mobile a, .nav__mobile .menu__soon { padding: 12px 0; display: block; text-decoration: none; }

.nav__cta {
  font: 500 15px/1 var(--text);
  text-decoration: none;
  color: var(--white);
  background: var(--blue);
  padding: 12px 18px;
  border-radius: 999px;
}
.nav__cta:hover { background: var(--blue-deep); }
/* For existing customers, as on the old site: a plain text link, not a button. */
.nav__login {
  margin-right: -16px; padding: 10px 0;
  font: 400 15px/1 var(--text); color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__login:hover { color: var(--blue); }

/* ── Hero ─────────────────────────────────────────────── */

.hero { padding: 72px 0 0; }
.hero__meta {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.hero__row {
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  align-items: end;
  margin-top: 48px;
}
.hero__action { grid-column: 3; }
.hero__micro { margin-top: 12px; font-size: 14px; color: var(--slate); }
.hero__micro a { color: var(--blue); text-decoration: none; margin-left: 6px; }
.hero__micro a:hover { text-decoration: underline; }

.facts {
  display: flex; flex-wrap: wrap;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}
.facts li {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 24px 14px 0; margin-right: 24px;
  border-right: 1px solid var(--line);
}
.facts li:last-child { border-right: 0; }

/* The one pill: brand signature from the current site */
.pill {
  display: flex; align-items: center;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px;
  max-width: 480px;
}
.pill:focus-within { border-color: var(--blue); }
.pill input[type="email"] {
  flex: 1; min-width: 0; width: 100%;
  border: 0; outline: 0; background: transparent;
  font: 400 16px var(--text); color: var(--ink);
  padding: 12px 8px 12px 20px;
}
.pill button {
  border: 0; cursor: pointer;
  background: var(--blue); color: var(--white);
  font: 500 15px/1 var(--text);
  padding: 15px 22px; border-radius: 999px;
  white-space: nowrap;
}
.pill button:hover { background: var(--blue-deep); }
.pill--small input[type="email"] { padding: 10px 6px 10px 16px; font-size: 15px; }
.pill--small button { padding: 12px 16px; font-size: 14px; }

/* js/forms.js: HubSpot's form sits right after ours and does the submitting.
   It stays rendered, only clipped, because reCAPTCHA will not run in a
   display: none form, and a challenge then opens next to the form we see. */
.hs-host {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
form[aria-busy="true"] button { opacity: 0.6; cursor: progress; }
/* .pill, .form and .brief set display, which would beat the hidden attribute. */
form[hidden], .brief[hidden], .optin[hidden] { display: none; }
/* js/forms.js: the unticked opt-in under every form. */
.optin, .form label.optin {
  display: flex; gap: 8px; align-items: flex-start; max-width: 480px;
  font: 400 13px/1.45 var(--text); letter-spacing: 0; text-transform: none;
  color: var(--slate); cursor: pointer;
}
.optin input { flex: none; margin: 2px 0 0; accent-color: var(--blue); }
.pill + .optin { margin-top: 10px; }
.band--ink .optin { color: rgb(255 255 255 / 0.6); }
/* After sending, the form gives its place to one line of confirmation. */
.sent {
  max-width: 480px; min-height: 56px;
  display: flex; align-items: center; gap: 12px;
  font: 400 16px/1.4 var(--text); color: var(--ink);
  outline: 0;
}
.sent::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
}
.band--ink .sent { color: var(--white); }
.band--ink .sent::before { background: var(--signal); }
.form-error { max-width: 480px; margin-top: 10px; font-size: 14px; color: #c4231b; }
.form-error a { color: inherit; }
.band--ink .form-error { color: #ff9a8f; }

/* ── Triangle (homepage only) ─────────────────────────────
   OEM, partner, owner: the aftersales triangle every manufacturer knows, the
   real screens at its corners and one vehicle inside. One service case runs
   round it, step by step (js/triangle.js). DESIGN.md rule 6 as amended
   2026-09-29: motion only where it shows a real sequence.
   Since 2026-10-14 (concepts/triangle.md): each side is one ink hairline,
   plugged into a fixed port on a screen's edge and leaving it at a right
   angle; the side the case is on lights up in --signal. Every popup speaks
   the UI it lands in: a push notification on the phone, a toast in the
   Partner Hub. Flat, no shadow, no glow. The step line is --blue because the
   steps are buttons. Geometry in design points on a 1320 x 740 stage, the
   grid at 1440. */

.tri {
  /* slate on paper is 3.8:1; the triangle's small text needs 4.5 */
  --tri-muted: rgb(1 9 43 / 0.62);
  margin-top: 96px; display: grid; gap: 28px;
}
.tri .label--muted { color: var(--tri-muted); }
.tri__stage { position: relative; aspect-ratio: 1320 / 740; }
.tri__stage > * { position: absolute; }
.tri__canvas { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

.tri__who { display: grid; gap: 4px; }
.tri__who b { font: 600 34px/1 var(--display); letter-spacing: -0.01em; }
.tri__sub { font-size: 14px; line-height: 1.35; color: var(--tri-muted); }
/* the two top names sit on their screen's top edge, whatever the width */
.tri__who--oem     { left: 0;                       bottom: calc(100% - 64 / 740 * 100% + 12px); width: calc(440 / 1320 * 100%); }
.tri__who--owner   { left: calc(1090 / 1320 * 100%); bottom: calc(100% - 64 / 740 * 100% + 12px); width: calc(230 / 1320 * 100%); }
.tri__who--partner { left: 0;                       top: calc(470 / 740 * 100%); width: calc(290 / 1320 * 100%); }

.tri__screen, .tri__phone { z-index: 1; }
/* each corner opens its product page: the name, the screen and the phone */
a.tri__who { text-decoration: none; }
a.tri__who:hover b, a.tri__who:focus-visible b { color: var(--blue); }
.tri__link { display: contents; }
.tri__link > .tri__phone { position: absolute; }
a.tri__screen, .tri__link .tri__phone { cursor: pointer; transition: opacity 0.22s, border-color 0.22s; }
a.tri__screen:hover { border-color: var(--blue); }
.tri__screen img { width: 100%; }
.tri__screen img, .tri__phone { transition: opacity 0.22s; }
.tri__screen--oem     { left: 0;                      top: calc(64 / 740 * 100%);  width: calc(440 / 1320 * 100%); }
.tri__screen--partner { left: calc(330 / 1320 * 100%); top: calc(470 / 740 * 100%); width: calc(420 / 1320 * 100%); }
.tri__phone           { left: calc(1090 / 1320 * 100%); top: calc(64 / 740 * 100%); width: calc(230 / 1320 * 100%); }

/* each side carries its name, set on the line at its midpoint (js): the line
   stops either side of the word. The steps below say what happens on it. */
.tri__edge {
  z-index: 1; left: 0; top: 0; width: max-content;
  padding: 2px 10px; background: var(--paper);
  color: var(--tri-muted); transition: color 0.3s;
}
.tri__edge.is-on { color: var(--ink); }

/* the middle: the vehicle of this round, one real customer per type, cut out
   like a product shot. js places it in the largest free spot inside the
   triangle, clear of the lines, the screens and the names. */
.tri__car { left: calc(555 / 1320 * 100%); top: calc(272 / 740 * 100%); width: calc(200 / 1320 * 100%); display: grid; justify-items: center; gap: 10px; text-align: center; }
.tri__car .label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tri__veh { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.tri__veh img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.35s, transform 0.35s;
}
.tri__veh img.is-on { opacity: 1; transform: none; transition-delay: 0.15s; }
.tri__car.is-tight .label { display: none; }
.tri__veh { justify-self: center; }

/* the vehicle types: under the vehicle when the triangle has room (js), else
   right under the triangle. Click one, or let the rounds go through them. */

.tri__types { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tri > .tri__types { margin-top: -8px; }
.tri__types button {
  all: unset; cursor: pointer;
  font-size: 14px; line-height: 1.3; color: var(--tri-muted);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.tri__types button:hover { color: var(--blue); }
.tri__types button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tri__types button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.tri__demo { margin-left: auto; }
/* under the vehicle: one centred row, a little smaller */
.tri__car .tri__types { flex-wrap: nowrap; width: max-content; gap: 14px; margin: 2px 0 0; white-space: nowrap; }
.tri__car .tri__types button { font-size: 13px; }
.tri__car .tri__types.is-wrap { flex-wrap: wrap; justify-content: center; max-width: 16em; row-gap: 4px; }

/* The popups. One card language: a muted label row, one bold line, at most
   one line of text, all on one line each. Flat, one border, no shadow. Each
   speaks the UI it lands in, so it reads as that product, not as a sticker
   on it. js docks them to their screen; on a phone they share one slot. */
.tri__chip {
  z-index: 3; display: grid;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tri__chip.is-on { opacity: 1; transform: none; }
.tri__chip > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* On the phone: a push notification the way iOS draws it, in the system font,
   with the app's own icon and name. 8 pt in from the screen's sides and 56 pt
   down, under the Dynamic Island; it ends in the gap under the vehicle's name,
   so no line of the app shows half (js). It drops in from above. */
.tri__note {
  transform: translateY(-8px);
  align-content: center;
  padding: 0 12px;
  background: #fff; border: 1px solid rgb(0 0 0 / 0.1); border-radius: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color: #000; -webkit-font-smoothing: antialiased;
}
.tri__note-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: 10.5px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgb(60 60 67 / 0.8);
}
.tri__note-head span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.tri__note-head time { margin-left: auto; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tri__appicon { flex: none; width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.16); }
.tri__appicon img { width: 74%; height: 74%; object-fit: contain; }
.tri__appicon[data-icon="livewire"] { background: #000; box-shadow: none; }
.tri__appicon[data-icon="livewire"] img { filter: invert(1); width: 70%; }
.tri__appicon[data-icon="frauscher"] { box-shadow: none; }
.tri__appicon[data-icon="frauscher"] img { width: 100%; height: 100%; }
.tri__note b { font-weight: 600; font-size: 13px; line-height: 17px; letter-spacing: -0.005em; }
.tri__note p:last-child { font-size: 12.5px; line-height: 17px; letter-spacing: -0.005em; }

/* On the Partner Hub: a toast in the web app's own tokens (Inter, 6 px
   radius, its border and text colours), docked to the screen's bottom right
   corner where the app shows them. It rises in from below. */
.tri__toast {
  transform: translateY(8px);
  padding: 9px 13px 10px;
  background: #fff; border: 1px solid #cfd6e1; border-radius: 6px;
  font-family: "Inter", system-ui, sans-serif; color: #101425;
}
.tri__toast-head {
  display: flex; gap: 12px; margin-bottom: 2px;
  font-size: 10.5px; font-weight: 600; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgb(16 20 37 / 0.6);
}
.tri__toast-head time { margin-left: auto; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.tri__toast b { font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.006em; }
.tri__toast p:last-child { font-size: 13px; line-height: 18px; color: rgb(16 20 37 / 0.68); }
/* the same toast in the OEM Suite, in its dark tokens (Midnight card, its border) */
.tri__toast--dark { background: #0b1230; border-color: #232c4d; color: #f2f5f9; }
.tri__toast--dark .tri__toast-head { color: rgb(242 245 249 / 0.6); }
.tri__toast--dark p:last-child { color: rgb(242 245 249 / 0.72); }

/* the steps: four buttons on a hairline, a line that moves to the one playing */
.tri__steps {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
  border-top: 1px solid var(--line);
}
.tri__steps::before {
  content: ""; position: absolute; top: -1px; height: 2px;
  left: calc(var(--at, 0) * (100% + var(--gutter)) / 4);
  width: calc((100% - 3 * var(--gutter)) / 4);
  background: var(--blue);
  transition: left 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.tri__steps button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; gap: 4px; padding: 16px 0 4px;
}
.tri__steps b { font: 500 18px/1.25 var(--display); color: var(--tri-muted); transition: color 0.3s; }
.tri__steps span { font-size: 14px; line-height: 1.4; color: var(--tri-muted); }
.tri__steps [aria-current="step"] b { color: var(--ink); }
.tri__steps button:hover b { color: var(--blue); }
.tri__steps button:focus-visible, .tri__play:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.tri__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
.tri__play {
  all: unset; cursor: pointer;
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue);
}
.tri__play:hover { text-decoration: underline; }

@media (max-width: 1180px) and (min-width: 961px) {
  .tri__who b { font-size: 28px; }
  .tri__sub { font-size: 12.5px; }
  .tri__car { gap: 6px; }
  .tri__car .label { font-size: 10.5px; }
  .tri__edge { font-size: 10.5px; padding: 1px 8px; }
  .tri__note { padding: 0 7px; border-radius: 11px; }
  .tri__note-head { font-size: 9px; line-height: 13px; gap: 5px; margin-bottom: 2px; }
  .tri__appicon { width: 13px; height: 13px; border-radius: 3px; }
  .tri__note b { font-size: 10.5px; line-height: 13px; }
  .tri__note p:last-child { font-size: 10px; line-height: 13px; }
  .tri__toast { padding: 7px 10px 8px; }
  .tri__toast-head { font-size: 9.5px; line-height: 14px; }
  .tri__toast b { font-size: 12.5px; line-height: 17px; }
  .tri__toast p:last-child { font-size: 11.5px; line-height: 16px; }
}

/* mobile: no screens, the names are the corners, one popup slot under the drawing */
@media (max-width: 960px) {
  .tri { margin-top: 48px; gap: 20px; }
  .tri__stage { aspect-ratio: auto; height: 470px; }
  .tri__screen, .tri__phone, .tri__edge, .tri__sub { display: none; }
  .tri__who { width: auto; background: var(--paper); padding: 2px 6px 2px 0; }
  .tri__who b { font-size: 24px; }
  .tri__who--oem { top: 0; bottom: auto; }
  .tri__who--owner { left: auto; right: 0; top: 150px; bottom: auto; text-align: right; padding: 2px 0 2px 6px; }
  .tri__who--partner { top: 290px; }
  .tri__car { left: 32%; top: 128px; width: 30%; }
  .tri__car .label { display: none; }
  .tri__demo { margin-left: 0; }
  .tri__chip { left: 0; bottom: 0; width: 100%; }
  .tri__note { padding: 11px 14px 12px; border-radius: 18px; height: auto; }
  .tri__note-head { font-size: 11px; }
  .tri__appicon { width: 18px; height: 18px; border-radius: 4.5px; }
  .tri__note b { font-size: 14px; line-height: 19px; }
  .tri__note p:last-child { font-size: 13.5px; line-height: 19px; }
  .tri__toast { padding: 11px 14px 12px; }
  .tri__steps { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  .tri__steps::before { display: none; }
  .tri__steps button { padding: 12px 0 12px 14px; border-left: 2px solid var(--line); }
  .tri__steps [aria-current="step"] { border-left-color: var(--blue); }
  .tri__steps b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .tri__chip, .tri__steps::before, .tri__edge, .tri__veh img, .tri__screen img, .tri__phone { transition: none; }
  .tri__play { display: none; }
}


.screen {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.screen--pending {
  aspect-ratio: 1520 / 644;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 40px;
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--slate);
}
.screen--pending p:last-child { max-width: 42ch; }

.screen--phone {
  background: transparent; border: 0; border-radius: 0;
  justify-self: center; max-width: 290px;
}
/* phone screenshots come straight out of the app, so the frame is ours: one
   hairline and the phone's own corner radius, never a photographed device */
.screen--phone img, .shot .screen--phone img, .phone img { border: 0; border-radius: 0; }

.tree a { color: var(--blue); text-decoration: none; }
.tree a:hover { text-decoration: underline; }
.grants { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.grants div { border-top: 1px solid var(--line); padding-top: 10px; }
.grants dt {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  margin-bottom: 4px;
}
.grants dd { font-size: 15px; line-height: 1.45; }

.panel__end {
  margin-top: 12px; padding-top: 20px;
  border-top: 1px solid var(--ink);
  display: grid; gap: 12px;
}
.panel__end p { font: 500 18px/1.35 var(--display); }

/* ── Proof ────────────────────────────────────────────── */

.proof { padding: 96px 0 72px; } /* the numbers need ground under them where white follows */
.numbers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}
.numbers div { padding: 16px 24px 8px 0; border-right: 1px solid var(--line); }
.numbers div + div { padding-left: 24px; }
.numbers div:last-child { border-right: 0; }
.numbers dt {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.numbers dd {
  margin-top: 28px;
  font: 500 clamp(40px, 4.4vw, 60px)/1 var(--display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.numbers dd span {
  font: 500 18px var(--text); letter-spacing: 0;
  margin-left: 6px; color: var(--slate);
}

.logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 32px 28px;
  margin-top: 56px; padding: 32px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logos img { width: auto; filter: grayscale(1); opacity: 0.7; mix-blend-mode: multiply; }

/* ── Bands ────────────────────────────────────────────── */

.band { padding: 128px 0; }
.band--white { background: var(--white); }

/* The band head: a hairline and the band's name in plain words. Decided
 * 2026-09-28: no running numbers and no capitals here any more. "01 · LABEL"
 * above every band had become one of the most recognisable tells of generated
 * pages (research in docs/concepts/build-2026-09-28.md). Capitals stay where
 * they carry data: screen labels, table heads, units. The numbers remain in
 * the HTML, so bringing them back is one line. */
.section-label {
  display: flex; gap: 16px;
  font: 500 15px/1.4 var(--text); color: var(--slate);
  padding-bottom: 12px; margin-bottom: 44px;
  border-bottom: 1px solid var(--ink);
}
.section-label span { display: none; }

.split {
  display: grid; grid-template-columns: 6fr 1fr 5fr;
  align-items: end;
}
.split .lead { grid-column: 3; }

/* 01 — the model, as a table because it is one */
.tree {
  width: 100%; margin-top: 64px;
  border-collapse: collapse;
  font-size: 15px;
}
.tree th, .tree td {
  text-align: left; vertical-align: top;
  padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--line);
}
.tree thead th {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  padding-top: 0;
}
.tree tbody th { font: 500 19px/1.25 var(--display); width: 26%; }
.tree td:nth-child(3) { width: 16%; }
.tree td:nth-child(4) { width: 18%; color: var(--slate); }
.tree__root th, .tree__root td { border-bottom: 0; }
.tree__root th { font-size: 26px; }
.tree__via td {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue);
  padding: 4px 0 14px 0;
  border-bottom: 1px solid var(--ink);
}
.tree__via td::before { content: "↓  "; }

/* 02 — the story, as a timeline because it is one */
.story {
  display: grid; grid-template-columns: 5fr 1fr 6fr;
}
.story__head { display: grid; align-content: start; gap: 40px; }
.code {
  font: 500 17px/1.45 var(--text);
  padding: 16px 0 0; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.code .label { display: block; color: var(--slate); margin-bottom: 6px; }

.timeline { grid-column: 3; }
.timeline li {
  display: grid; grid-template-columns: 104px 1fr;
  column-gap: var(--gutter);
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline time {
  grid-row: span 2;
  font: 500 32px/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.timeline .label { color: var(--blue); margin-bottom: 6px; }
.timeline p:not(.label) { font-size: 17px; max-width: 44ch; }

/* 03 — dark band */
.band--ink { background: var(--ink); color: var(--white); }
.band--ink .lead { color: rgb(255 255 255 / 0.74); }
.band--ink .section-label { border-color: var(--line-ink); color: rgb(255 255 255 / 0.6); }
.band--ink .label--muted { color: rgb(255 255 255 / 0.5); }

.ai { display: grid; grid-template-columns: 6fr 1fr 5fr; }
.ai > div { display: grid; gap: 32px; align-content: start; }
.ai h2 { max-width: 13ch; }
.points { counter-reset: p; display: grid; }
.points li {
  counter-increment: p;
  position: relative;
  padding: 16px 0 16px 36px; border-top: 1px solid var(--line-ink);
  font-size: 16px; color: rgb(255 255 255 / 0.74);
}
.points li::before {
  content: counter(p, decimal-leading-zero);
  position: absolute; left: 0; top: 16px;
  font: 500 11.5px/2 var(--text); letter-spacing: 0.08em; color: var(--signal);
}
.points strong { color: var(--white); font-weight: 500; }
.label--roadmap { color: rgb(255 255 255 / 0.5); }

.transcript {
  grid-column: 3; align-self: start;
  border-top: 1px solid var(--line-ink);
  padding-top: 14px;
  display: grid; gap: 28px;
}
.turn { display: grid; gap: 8px; }
.turn .label { color: rgb(255 255 255 / 0.5); }
.turn p:not(.label) { font-size: 18px; line-height: 1.5; }
.turn:first-of-type p:not(.label) { font: 500 24px/1.3 var(--display); }
.call {
  display: flex; gap: 12px; align-items: baseline;
  padding-top: 14px; border-top: 1px solid var(--line-ink);
  font-size: 14px; color: rgb(255 255 255 / 0.74);
}
.call .label { color: var(--signal); }
.call code { font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(255 255 255 / 0.8); }
.band--ink .more--ink { color: var(--signal); }

/* 04 — the date is the design */
.act { display: grid; grid-template-columns: 5fr 1fr 6fr; }
.act > div { grid-column: 3; display: grid; gap: 24px; align-content: start; }
.act__date {
  font: 600 clamp(56px, 8vw, 128px)/0.9 var(--display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.act__date .label { display: block; color: var(--slate); letter-spacing: 0.08em; margin-bottom: 20px; }
.fine { font-size: 13px; color: var(--slate); }
.more { color: var(--blue); text-decoration: none; font-weight: 500; white-space: nowrap; }
.more:hover { text-decoration: underline; }


/* Partner Hub 02 — the work: one row per job, the partners who open it on the
 * left. Band 01 names the five partners, this one says what they do, and the
 * partner names in the left column tie the two bands together. Rows and not
 * cards, because a job carries a paragraph and three specifics, which is more
 * than a card holds and exactly what the page was missing. */
.jobs { margin-top: 56px; border-top: 1px solid var(--ink); }
.jobs > li {
  display: grid; grid-template-columns: 4fr 8fr; gap: var(--gutter);
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--line);
}
.jobs h3 { font: 500 24px/1.2 var(--display); letter-spacing: -0.01em; }
.jobs h3 .menu__flag { vertical-align: 4px; }
.jobs__who { margin-top: 10px; }
.jobs > li > div > p { font-size: 16px; max-width: 60ch; }
.jobs__list { margin-top: 14px; display: grid; gap: 5px; }
.jobs__list li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.45; color: rgb(1 9 43 / 0.72);
}
.jobs__list li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 9px; height: 1px; background: var(--line-strong);
}
.jobs .fine { margin-top: 14px; }

/* 04 — the vehicle register: one plate per type, every plate the same size.
 * The band's job is to say "agnostic", so the form says it: nothing here is
 * bigger than anything else. Proof lives in the caption, not in the crop, and
 * the grid runs on into an empty row for the types nobody has connected yet.
 * Every photograph is the same photograph with a different vehicle in it, see
 * exports/product-shots/photography/hero_photo.py (IND_SHARED). */
.register {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px var(--gutter);
  margin-top: 64px;
}
.register figure { display: grid; gap: 12px; align-content: start; }
.register img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.register figcaption {
  display: grid; gap: 3px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.register__name { font: 500 20px/1.2 var(--display); letter-spacing: -0.01em; }
.register__name a { color: var(--blue); text-decoration: none; }
.register__name a:hover { text-decoration: underline; }
.register__sub { color: var(--slate); font-size: 14px; line-height: 1.35; }

/* The open slot. Same hairline, same column width, no picture: the register
 * has a row left over. */
.register__open {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: baseline;
  margin-top: 56px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.register__open .label { padding-top: 5px; }
.register__openline { grid-column: span 2; font: 500 20px/1.3 var(--display); }
.register__opennote { color: var(--slate); font-size: 14px; line-height: 1.5; }

/* 06 — the comparison: our column is the dark one */
.compare {
  width: 100%; margin-top: 64px;
  border-collapse: collapse;
  font-size: 15px;
}
.compare th, .compare td {
  text-align: left; vertical-align: top;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  padding-top: 20px;
}
.compare tbody th { font: 500 17px/1.3 var(--display); padding-left: 0; width: 25%; }
.compare td { color: rgb(1 9 43 / 0.7); width: 25%; }
.compare .compare__us { background: var(--ink); color: var(--white); border-bottom-color: var(--line-ink); }
.compare thead .compare__us { color: var(--signal); }
.compare tbody td.compare__us { font-weight: 500; }

/* 07 — the split of duties */
.duty {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter);
  margin-top: 64px;
}
.duty__who {
  font: 600 28px/1.1 var(--display);
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.duty__who--us { color: var(--blue); border-color: var(--blue); }
.duty li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }

.duty + .fine { margin-top: 20px; }
.certs { margin-top: 72px; display: grid; gap: 16px; }
.certs ul { display: flex; flex-wrap: wrap; gap: 12px; }
.certs li {
  display: grid; gap: 2px;
  padding: 14px 18px; min-width: 190px;
  border: 1px solid var(--line-strong);
  font: 500 16px/1.2 var(--display);
}
.certs li span { font: 400 13px/1.3 var(--text); color: var(--slate); }
.certs li a { color: var(--blue); text-decoration: none; }
.certs li a:hover { text-decoration: underline; }
.certs__slot { border-style: dashed !important; color: var(--slate); }
.certs--page { margin-top: 48px; }
.certs--page li { min-width: 230px; padding: 18px 20px; }
.values--wide { grid-template-columns: repeat(3, 1fr); }
.todo { color: var(--blue); }

/* 08 — FAQ */
.faq { display: grid; grid-template-columns: 5fr 1fr 6fr; }
.faq__list { grid-column: 3; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 24px;
  padding: 18px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 22px/1 var(--text); color: var(--blue); }
.faq details[open] summary::after { content: "–"; }
.faq h3 { font: 500 19px/1.3 var(--display); }
.faq summary:hover h3 { color: var(--blue); }
.faq details p { padding: 0 48px 22px 0; color: rgb(1 9 43 / 0.78); max-width: 62ch; }
.faq details a { color: var(--blue); text-decoration: none; font-weight: 500; }


/* ── Depth pages (site-structure.md § 4) ──────────────── */

.pagehead { padding: 72px 0 96px; }
.pagehead .label { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pagehead .label a { color: var(--blue); text-decoration: none; }
.display--page { font-size: clamp(38px, 4.6vw, 68px); max-width: 17ch; margin: 40px 0 32px; }
.lead--answer { font-size: clamp(18px, 1.5vw, 22px); max-width: 62ch; }

/* An empty, labelled screenshot slot — never a mocked-up screen */
.slot {
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  color: var(--slate);
  position: relative;
  aspect-ratio: 16 / 10;
}
.slot::after {
  content: attr(data-size);
  position: absolute; right: 16px; bottom: 12px;
  font: 500 11.5px/1 var(--text); letter-spacing: 0.08em; color: var(--slate);
}
.slot--phone { aspect-ratio: 628 / 1300; max-width: 300px; padding: 24px; }
.slot p:not(.label) { font-size: 14px; }

.shot { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: center; }
.shot--wide { grid-template-columns: 7fr 1fr 4fr; align-items: end; }
.shot .screen { width: 100%; }
.shot .screen img { width: 100%; height: auto; }
.screen--wide { margin-top: 40px; }
.screen--wide + .label { margin-top: 10px; }
.shot .slot { justify-self: center; }
.shot__meta { grid-column: 3; display: grid; gap: 14px; }
.shot__meta p:not(.label) { max-width: 52ch; }
.shot--row { display: flex; gap: var(--gutter); margin-top: 56px; }
.shot--row .slot { flex: 1 1 0; max-width: 260px; }

.ticks { display: grid; gap: 0; margin-top: 8px; }
.ticks li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }

/* numbered steps — a row, not cards */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--ink); }
.steps li { padding: 20px 24px 0 0; }
.steps li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.steps .label { color: var(--blue); }
.steps h3 { font: 500 20px/1.2 var(--display); margin: 14px 0 8px; }
.steps p { font-size: 15px; color: rgb(1 9 43 / 0.72); }
.steps li p:last-child { padding-bottom: 20px; }
.steps + .fine { margin-top: 20px; }

.tree--ids code { font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue-deep); }
.tree--ids + .fine { margin-top: 14px; }

/* the feature register */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gutter); margin-top: 56px; }
.feat--four { grid-template-columns: repeat(4, 1fr); }
.feat + .fine { margin-top: 24px; }
.feat > div { padding: 20px 0; border-top: 1px solid var(--line); }
.feat h3 { font: 500 19px/1.25 var(--display); margin-bottom: 6px; }
.feat p { font-size: 15px; color: rgb(1 9 43 / 0.72); max-width: 38ch; }

/* what is counted */
.counted { display: grid; gap: 20px; margin-top: 48px; }
.counted dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gutter); }
.counted div { padding: 16px 0; border-top: 1px solid var(--line); }
.counted dt { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.counted dd { font: 500 20px/1.3 var(--display); }
.counted .fine, .counted + .fine { max-width: 88ch; }

/* gaps */
.gaps { display: grid; gap: 28px; margin-top: 48px; }
.gaps ul { display: grid; border-top: 1px solid var(--ink); }
.gaps li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: rgb(1 9 43 / 0.72); max-width: 88ch; }
.gaps strong { color: var(--ink); font-weight: 500; }
.gaps__no { font-size: 17px; max-width: 72ch; }
.gaps__no .label { display: block; color: var(--slate); margin-bottom: 6px; }

/* where next */
.next { display: grid; gap: 14px; align-content: start; }
.next ul { display: grid; }
.next li { border-top: 1px solid var(--line-ink); }
.next a { display: block; padding: 16px 0; color: var(--white); text-decoration: none; font: 500 20px/1.3 var(--display); }
.next a:hover { color: var(--signal); }


/* Industry pages */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--gutter); margin-top: 56px; border-top: 1px solid var(--ink); }
.values div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.values dt { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.values dd { font: 500 22px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.values__flag { color: var(--blue); }
.values + .fine { margin-top: 20px; }

.proofrow { display: grid; grid-template-columns: 6fr 1fr 5fr; margin-top: 56px; align-items: start; }
.proofrow > div { grid-column: 3; display: grid; gap: 32px; }
.proofrow figure { display: grid; gap: 10px; }
.proofrow figcaption { padding-top: 8px; border-top: 1px solid var(--line); }
.proofrow .tree { margin-top: 0; }
.proofrow .tree tbody th { width: 40%; font-size: 17px; }
.proofrow .tree code { white-space: nowrap; }
.proofrow--phone { grid-template-columns: 4fr 1fr 7fr; }
.proofrow--phone figcaption { max-width: 280px; }
.proofrow__phone img { max-width: 280px; }
.proofrow__text { font-size: 18px; line-height: 1.5; max-width: 46ch; }
.quote.quote--small p { font: 500 26px/1.15 var(--display); letter-spacing: -0.01em; }
.quote--small footer { margin-top: 12px; }
.logos--small { margin: 0; padding: 24px 0 0; border-bottom: 0; gap: 20px 28px; justify-content: flex-start; }


/* v2: the trimmed homepage */
.numbers--three { grid-template-columns: repeat(3, 1fr); }
.quote--strip { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote--strip p { font: 500 clamp(24px, 2.4vw, 34px)/1.15 var(--display); letter-spacing: -0.01em; max-width: 24ch; }
.quote--strip footer { margin-top: 10px; color: var(--slate); }
.logos + .quote--strip { border-top: 0; padding-top: 0; }
.proof__more { margin-top: 18px; }
.steps--three { grid-template-columns: repeat(3, 1fr); }
.steps--three .label { color: var(--slate); }
.ai--short { grid-template-columns: 6fr 1fr 5fr; align-items: start; }
.ai--short .transcript { grid-column: 3; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--gutter); margin-top: 48px; border-top: 1px solid var(--ink); }
.cols li { border-bottom: 1px solid var(--line); }
.cols a { display: block; padding: 18px 20px 18px 0; text-decoration: none; }
.cols a:hover .menu__name { color: var(--blue); }
.close__lead { display: grid; gap: 16px; align-content: end; }
.close__lead .lead { color: rgb(255 255 255 / 0.7); }

/* Close */
.close { padding: 128px 0 112px; }
.close .wrap { display: grid; grid-template-columns: 6fr 1fr 5fr; align-items: end; }
.quote p {
  font: 500 clamp(36px, 4.6vw, 64px)/1.02 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.band--ink .quote footer { margin-top: 24px; color: rgb(255 255 255 / 0.6); }
.quote--strip footer, .quote--small footer { color: var(--slate); }
.close__action { grid-column: 3; display: grid; gap: 20px; }
.close__action h2 { font-size: 32px; }
.pill--dark { border-color: transparent; }
.close__alt a, .close__fork a { color: var(--white); text-decoration: none; font-weight: 500; }
.close__alt a:hover, .close__fork a:hover { text-decoration: underline; }
.close__fork {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line-ink);
  font-size: 14px; color: rgb(255 255 255 / 0.6);
}

/* The footer is a directory, not a second hero: every page by section, the
 * company pages the header leaves out, the legal line. Written by
 * tools/nav.py, so it is the same on every page. */
.foot { padding: 72px 0 28px; border-top: 1px solid var(--line); font-size: 14px; color: var(--slate); background: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 3fr repeat(5, 2fr); gap: 32px var(--gutter); }
.foot__id { display: grid; gap: 14px; align-content: start; }
.foot__id img { width: 132px; }
.foot__id p { max-width: 24ch; color: var(--ink); }
.foot__col .label { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.foot__col li { padding: 4px 0; }
.foot__col a { color: var(--ink); text-decoration: none; }
.foot__col a:hover { color: var(--blue); }
.foot__soon { color: var(--slate); }
.foot__row {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px;
}
.foot__legal { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.foot__legal a { color: var(--slate); text-decoration: none; }
.foot__legal a:hover { color: var(--blue); }

/* ── Mobile ───────────────────────────────────────────── */

/* Blog — the archive, as a dated record rather than a card wall.
   The whole argument of this section is that the dates are real and go back
   years, so the date is the first thing in every row and it is tabular. */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--line); }
.posts li:last-child { border-bottom: 1px solid var(--line); }
.posts a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  column-gap: 24px;
  padding: 14px 0;
  text-decoration: none;
  color: inherit;
}
.posts a:hover .post__title { color: var(--blue); }
.post__date {
  font: 500 11.5px/1.9 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post__title { font-size: 17px; font-weight: 500; }
.post__sub {
  grid-column: 2;
  font-size: 14px; color: var(--slate);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* blog.html: every post, under the year it was written in */
.archive { display: grid; gap: 96px; }
.archive__year { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.archive__year h2 { font: 600 clamp(40px, 5vw, 72px)/0.9 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.archive__year .label { margin-top: 12px; }
.archive__year .posts { grid-column: 3; }

/* index.html: since when on the left, the newest posts beside it. No counts. */
.record { display: grid; grid-template-columns: 5fr 1fr 6fr; align-items: start; }
.record__head .lead { margin-top: 24px; }
.record__latest { grid-column: 3; }
.record__latest .label { padding-bottom: 14px; }
.record__latest .more { display: inline-block; margin-top: 20px; }


/* pricing.html: the bill, shaped like one. Three lines, an amount column on
   the right, hairlines between them. Two of the three amounts are words, and
   that is the point of the page. */
.bill { margin-top: 56px; border-top: 1px solid var(--ink); }
.bill > div {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr);
  gap: var(--gutter); align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.bill h3 { font: 500 22px/1.2 var(--display); }
.bill p { font-size: 15px; color: var(--slate); max-width: 46ch; }
.bill p.bill__fig {
  font: 500 22px/1.2 var(--display); color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.bill + .fine { margin-top: 20px; }
.tree + .label--muted { margin-top: 48px; }

/* pricing.html 02: the two ways as a comparison, names across the top. Its
   own table because .tree and .compare carry mobile labels that belong to
   other pages. */
.plans { width: 100%; margin-top: 56px; border-collapse: collapse; font-size: 15px; }
.plans th, .plans td {
  text-align: left; vertical-align: top;
  padding: 16px 24px 16px 0; border-bottom: 1px solid var(--line);
}
.plans thead th { border-bottom: 1px solid var(--ink); padding-top: 0; }
.plans thead th + th { font: 500 26px/1.1 var(--display); }
.plans tbody th {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); width: 25%;
}
.plans td { font-variant-numeric: tabular-nums; }
.plans .plans__fig td { font: 500 22px/1.2 var(--display); }
.plans + .fine { margin-top: 20px; }

/* the two ways to buy, and the licence bill on the dark band */
.band--ink .bill { border-top-color: var(--line-ink); }
.band--ink .bill > div { border-bottom-color: var(--line-ink); }
.band--ink .bill p { color: rgb(255 255 255 / 0.66); }
.band--ink .bill p.bill__fig { color: var(--white); }
.band--ink .gaps ul { border-top-color: var(--line-ink); }
.band--ink .gaps li { color: rgb(255 255 255 / 0.7); border-bottom-color: var(--line-ink); }
.band--ink .gaps strong { color: var(--white); }
.band--ink .fine { color: rgb(255 255 255 / 0.5); }

/* pricing.html 01: two ways, unequal on purpose. Enterprise is the wide ink
   block, out of the box the narrow hairline column beside it, so the page
   says which one is the main road before a word is read. Not a card: flat
   ink, no radius, no shadow, and only one of the two is filled. */
.ways {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px;
  align-items: start;
}
.ways > div { display: grid; gap: 12px; }
.ways__main { background: var(--ink); color: var(--white); padding: 40px 44px 36px; }
.ways__side { border-top: 1px solid var(--ink); padding-top: 22px; }
.ways__name { font: 600 40px/1.05 var(--display); letter-spacing: -0.015em; }
.ways__side .ways__name { font-size: 30px; }
.ways__for { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.ways__main .ways__for { color: var(--signal); }
.ways__lead { font-size: 17px; max-width: 44ch; color: rgb(1 9 43 / 0.78); }
.ways__main .ways__lead { font-size: 19px; color: rgb(255 255 255 / 0.8); }
.ways ul { margin-top: 8px; }
.ways li { padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: rgb(1 9 43 / 0.78); }
.ways__main li { border-top-color: var(--line-ink); color: rgb(255 255 255 / 0.86); font-size: 16px; }
.ways__price {
  margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line);
  font: 500 28px/1.1 var(--display); font-variant-numeric: tabular-nums;
}
.ways__main .ways__price { border-top-color: var(--line-ink); font-size: 34px; }
.ways__price span { font: 400 15px var(--text); color: var(--slate); margin-left: 4px; }
.ways__main .ways__price span { color: rgb(255 255 255 / 0.6); }
.ways__main .more { color: var(--signal); }
.ways + .fine { margin-top: 28px; }
.values--five { grid-template-columns: repeat(5, 1fr); }
.values--five dd { font-size: 30px; }
.split + .label { margin-top: 32px; }

/* contact.html: the form on the left, the direct lines on the right. Fields
   are hairlines like everything else, the label is the data-label voice. */
.talk { display: grid; grid-template-columns: 7fr 1fr 4fr; align-items: start; }
.form { display: grid; gap: 22px; border-top: 1px solid var(--ink); padding-top: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.form label {
  display: grid; gap: 6px;
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.form__opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.form input, .form select, .form textarea {
  font: 400 17px/1.4 var(--text); color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; padding: 8px 0 10px; outline: 0;
  text-transform: none; letter-spacing: 0;
}
.form textarea { resize: vertical; border: 1px solid var(--line-strong); padding: 12px 14px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--blue); }
.form__send { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.form__send button {
  border: 0; cursor: pointer; background: var(--blue); color: var(--white);
  font: 500 15px/1 var(--text); padding: 15px 28px; border-radius: 999px;
}
.form__send button:hover { background: var(--blue-deep); }
/* After sending, the answer takes the form's place under the same hairline. */
.form + .sent {
  display: block; max-width: none; min-height: 0;
  border-top: 1px solid var(--ink); padding-top: 18px;
  font: 400 24px/1.35 var(--text);
}
.form + .sent::before { display: none; }
.talk__side { grid-column: 3; }
.brief { margin-top: 48px; border-top: 1px solid var(--ink); padding-top: 16px; display: grid; gap: 12px; }
.brief__label { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.brief .sent { min-height: 48px; font-size: 15px; }
.direct { border-top: 1px solid var(--ink); }
.direct div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.direct dt { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
.direct dd { font-size: 16px; }
.direct a { color: var(--blue); text-decoration: none; font-weight: 500; }
.direct a:hover { text-decoration: underline; }

/* about.html: dates that are month and year need a wider column than the
   clock times the timeline was drawn for. */
.timeline--dates li { grid-template-columns: 132px 1fr; }
.timeline--dates time { font-size: 24px; line-height: 1.15; }
.timeline--dates .more { font-size: 15px; white-space: nowrap; }

/* A single documentary photograph with its caption, full width. */
.band--tight { padding: 72px 0; }
.photo { display: grid; gap: 12px; }
.photo img { width: 100%; }
.photo figcaption { padding-top: 10px; border-top: 1px solid var(--line); }

/* about.html: leadership and board side by side */
.people { display: grid; grid-template-columns: 7fr 5fr; gap: 48px var(--gutter); margin-top: 56px; align-items: start; }
.people .tree { margin-top: 0; }
/* about.html 01: the record as a time ruler. One column per year on a single
   axis, the milestones stacked bottom-up above it, so a busy year stands
   taller than a quiet one. The last year carries the signal dot: it is still
   being written. Hairlines only, no cards. */
.years { margin-top: 64px; }
.years > ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 var(--gutter); align-items: end; }
.years > ol > li { display: grid; grid-template-rows: 1fr auto auto; height: 100%; }
.years ul { display: flex; flex-direction: column; justify-content: flex-end; gap: 0; }
.years ul li { padding: 12px 0 14px; border-top: 1px solid var(--line); }
.years__m { display: block; font: 500 11px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 4px; }
.years__n { font: 500 18px/1.2 var(--display); letter-spacing: -0.005em; }
.years__n a { color: var(--ink); text-decoration: none; }
.years__n a:hover { color: var(--blue); }
.years__t { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--slate); }
.years__y {
  position: relative; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--ink);
  font: 500 clamp(28px, 3vw, 44px)/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.years__y::before {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink);
}
.years__now .years__y::before { background: var(--signal); box-shadow: 0 0 0 4px rgb(32 211 202 / 0.18); }
.years > ol > li + li .years__y { margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); }
.years > ol > li + li .years__y::before { left: var(--gutter); }
.years__v { margin-top: 10px; min-height: 2.7em; font-size: 13px; line-height: 1.35; color: var(--slate); } /* two lines for every year, so the axis stays level */
.years__v b { color: var(--ink); font-weight: 600; }
/* A number that marks the pace, not a company: set in the accent, never a link. */
.years__key .years__n { color: var(--blue); }
.years__photo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gutter); margin-top: 64px; align-items: end; }
.years__photo img { width: 100%; height: auto; }
@media (max-width: 1180px) and (min-width: 961px) {
  .years__n { font-size: 16px; }
  .years__t { font-size: 12.5px; }
}
.years__photo figcaption { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.people__note { margin-top: 16px; max-width: 60ch; font-size: 15px; color: var(--ink); }
.people .tree tbody th { width: 55%; }
.people .tree a { color: var(--ink); }
.people .tree a:hover { color: var(--blue); text-decoration: none; }

/* customers.html: the register of manufacturers, and their published words */
.logos--page { margin-top: 48px; }
.tree--register tbody th { width: 24%; }
.tree--register td:nth-child(2) { width: 18%; color: var(--ink); }
.tree--register td:nth-child(3) { width: 11%; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tree--register td:nth-child(4) { width: auto; color: rgb(1 9 43 / 0.78); }
.tree .more, .tree a { white-space: nowrap; }
.said { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gutter); }
.said li { padding: 4px 0 32px; }
.said li:nth-child(n + 3) { padding-top: 28px; border-top: 1px solid var(--line); }
.said li:nth-child(odd) { padding-right: 40px; }
.said p { font: 500 clamp(22px, 2.2vw, 30px)/1.18 var(--display); letter-spacing: -0.01em; max-width: 26ch; text-wrap: balance; }
.said footer { margin-top: 14px; color: var(--slate); }

/* Platform pages: one product screen at full width, its caption under it. */
.screen--lead { width: 100%; }
.screen--lead img { width: 100%; }
.shot__cap { margin-top: 12px; }
.shot__line { margin-top: 20px; max-width: 72ch; font-size: 17px; }

/* access.html */
.tree--roles tbody th { width: 26%; }
.tree--roles td:nth-child(2) { width: 30%; }
.tree--roles td:nth-child(3) { width: auto; color: rgb(1 9 43 / 0.78); }
.duty code, .values code, .code code {
  font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue-deep);
  letter-spacing: 0; text-transform: none;
}
.values--schemes dt { text-transform: none; letter-spacing: 0; }
.values--schemes dd { font-size: 18px; }

/* vehicle-data.html: the record, shown as data. Not a product screen, so no
   app chrome: a hairline panel, the model name, the platform's own field names. */
.record-shot { display: grid; grid-template-columns: 6fr 1fr 5fr; align-items: center; }
.record-shot .shot__meta { grid-column: 3; }
.payload { border: 1px solid var(--line-strong); background: var(--white); }
.payload__head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.payload pre { margin: 0; padding: 18px; overflow-x: auto; }
.payload code { font: 400 14px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); overflow-wrap: normal; }
.payload .k { color: var(--blue-deep); }
.payload .s { color: var(--slate); }
.counted dd code { font: 400 14px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue-deep); }

/* ai.html: a question and its answer, side by side, as data */
.query { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: start; }
.result { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.result th, .result td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.result thead th { font: 400 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue-deep); }
.result tbody th { font-weight: 500; }
.result td { white-space: nowrap; }
.result tr:last-child th, .result tr:last-child td { border-bottom: 0; }
.tree--vocab tbody th { width: 18%; }
.tree--events tbody th { width: 38%; font-size: 17px; }
.tree--events td:nth-child(2) { width: 26%; color: var(--ink); }
.tree--events td:nth-child(3) { width: auto; color: rgb(1 9 43 / 0.72); }
.tree--vocab td code { display: inline-block; margin: 0 14px 6px 0; }
.bill--codes > div { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
.band--ink .bill__fig code { color: var(--signal); font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.band--ink .duty code, .band--ink .gaps code { color: var(--signal); }
.duty strong { font-weight: 500; }

/* index.html 02: one ticket, three real screens at one height. The phone
   stays a phone and the desktop screens stay desktop screens, so the row reads
   as the same case moving from the driver to the dealer to the workshop. */
.case { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 4.9fr) minmax(0, 4.9fr); gap: 0 var(--gutter); margin-top: 64px; border-top: 1px solid var(--ink); }
.case > li { padding-top: 24px; }
.case > li + li { border-left: 1px solid var(--line); padding-left: var(--gutter); }
.case__shot { height: 300px; margin-bottom: 20px; display: flex; align-items: flex-start; }
.case__shot img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left top; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.case__shot--phone img { border: 0; border-radius: 0; background: transparent; }
.case .label { color: var(--slate); }
.case h3 { font: 500 20px/1.2 var(--display); margin: 10px 0 6px; }
.case p { font-size: 15px; color: rgb(1 9 43 / 0.72); max-width: 40ch; }
.case__cap { margin-top: 24px; }
/* index.html, the service case: the steps numbered, an arrow at each hand-over */
.case--story { counter-reset: case; }
.case--story > li { counter-increment: case; position: relative; }
.case--story .label::before { content: "0" counter(case) " · "; color: var(--blue); }
.case--story > li + li::before { content: "→"; position: absolute; top: -13px; left: -13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-strong); font: 500 13px/1 var(--text); color: var(--ink); }
@media (max-width: 960px) { .case--story > li + li::before { content: "↓"; left: 0; } }

/* The phone, drawn: one ink body, one hairline, no gradient, no shadow
   (DESIGN.md rules 3 and 5). Used around the live app; the rendered phone
   images carry the same frame baked in. */
/* The live phone: the same iPhone 16 Pro as the rendered ones (app-mockups/render.py),
   drawn at 1 CSS px per point and scaled as a whole, so the app inside keeps its own
   402 x 874 layout and taps land where they look. */
.device { --k: 0.8; position: relative; width: calc(438px * var(--k)); height: calc(904px * var(--k)); flex: none; }
.device__body { position: absolute; left: 0; top: 0; width: 438px; height: 904px; transform: scale(var(--k)); transform-origin: 0 0; }
.device__btn { position: absolute; width: 4px; border-radius: 1.5px; background: #2b2e34; }
.device__frame { position: absolute; left: 3px; top: 0; width: 432px; height: 904px; border-radius: 77px; padding: 4px; background: #2b2e34; box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.12); }
.device__bezel { width: 100%; height: 100%; border-radius: 73px; background: #050505; padding: 11px; }
.device__screen { width: 402px; height: 874px; border-radius: 62px; overflow: hidden; background: #000; }
.device__screen iframe { display: block; width: 402px; height: 874px; border: 0; }
.try { display: grid; justify-items: center; gap: 14px; }
.brands { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.brands button {
  all: unset; box-sizing: border-box; cursor: pointer;
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  font: 500 14px/32px var(--text); color: var(--ink);
}
.brands button:hover { border-color: var(--blue); color: var(--blue); }
.brands button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.brands button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* A highlight: the one thing a band is about, pulled out of its screen at a
   size that can be read. White, one hairline, no shadow. */
.hl { position: relative; }
.hl__card {
  position: absolute; z-index: 2; width: 270px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 13px 15px; display: grid; gap: 3px;
}
.hl__card .label { color: var(--slate); display: flex; justify-content: space-between; gap: 12px; }
.hl__card b { font: 600 15px/1.3 var(--text); }
.hl__card p { font-size: 13.5px; line-height: 1.4; color: rgb(1 9 43 / 0.75); }
.hl__card .hl__row { display: flex; gap: 8px; margin-top: 8px; }
.hl__card .hl__row span { flex: 1; height: 30px; border-radius: 15px; display: grid; place-items: center; font: 600 13px/1 var(--text); border: 1px solid var(--line-strong); }
.hl__card .hl__row span:first-child { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hl--screen .hl__card { right: 28px; top: -22px; }
/* a screen whose top right carries content (partner-hub: the position note):
   the card sits higher, over the top bar only */
.hl--lift .hl__card { top: -96px; }

/* oem-suite.html lead: one vehicle, three views, overlapping. Hairlines, no shadow. */
.compose { position: relative; height: 730px; }
.compose > * { position: absolute; }
.compose__back { left: 0; top: 0; width: 66%; }
.compose__front { left: 24%; top: 31%; width: 58%; }
.compose__phone { right: 0; top: 24px; width: 290px; }
.compose__phone img { width: 100%; }
.compose .screen img { width: 100%; }
.compose__cap { position: static; margin-top: 18px; }

/* driver-app.html: the support flow, three phones in a row */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 64px; }
.flow figure { display: grid; gap: 12px; justify-items: center; }
.flow img { width: 100%; max-width: 330px; }
.flow figcaption { display: grid; gap: 2px; text-align: center; }
.flow figcaption b { font: 500 17px/1.25 var(--display); }
.flow figcaption span { font-size: 14px; color: var(--slate); }
.flow .hl__card { left: auto; right: 0; top: 15%; width: 200px; }

/* driver-app.html: two phones in the lead shot, one white-labelled, one ours */
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.phones figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.phones img { width: 100%; max-width: 340px; height: auto; }
.phones figcaption { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); text-align: center; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 56px; }
.trio figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.trio img { width: 100%; max-width: 330px; height: auto; }
.trio figcaption { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.trio + .label--muted { margin-top: 28px; }
.trio--four { grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
.trio--four img { max-width: 300px; }
.trio--four + .fine { margin-top: 28px; }

/* No code on the site (Julian, 2026-09-28). The question on ai.html is a
   sentence, not a request body; answer tables head their columns in words,
   like every other table; a note under any table keeps the old spacing. */
.payload__ask { padding: 18px 18px 24px; max-width: 30ch; font: 500 22px/1.3 var(--display); letter-spacing: -0.01em; }
.result thead th { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.tree + .fine { margin-top: 14px; }

@media (max-width: 1180px) and (min-width: 961px) {
  .register { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .register__open { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .register__openline { grid-column: span 2; }
}

@media (max-width: 960px) {
  .device { --k: 0.74; }
  :root { --edge: 20px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-block; }
  .nav__row { justify-content: space-between; gap: 12px; }
  .nav__cta { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .nav__login { display: none; }
  .nav__logo img { width: 124px; }
  .nav__row { height: 60px; }

  .hero { padding-top: 40px; }
  .hero__meta { flex-direction: column; gap: 6px; margin-bottom: 28px; }
  .hero__row, .split, .story, .ai, .act, .close .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__action, .split .lead, .timeline, .transcript, .act > div, .close__action { grid-column: 1; }
  .hero__row { margin-top: 28px; }
  .facts { margin-top: 40px; }
  .facts li { padding-right: 14px; margin-right: 14px; font-size: 10.5px; }

  .screen--phone { max-width: 220px; }
  .grants { grid-template-columns: 1fr; gap: 12px; }

  .proof { padding-top: 64px; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers--three { grid-template-columns: 1fr; }
  .steps--three, .cols { grid-template-columns: 1fr; }
  .ai--short { grid-template-columns: minmax(0, 1fr); }
  .ai--short .transcript { grid-column: 1; }
  .numbers div, .numbers div + div { padding: 14px 12px 20px 0; }
  .numbers div:nth-child(2n) { border-right: 0; padding-left: 12px; }
  .numbers div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .numbers dd { margin-top: 16px; }
  /* blog.html: three numbers in one column, so no column rule and no indent */
  .numbers.numbers--three div { padding: 14px 0 20px; border-right: 0; }
  .numbers.numbers--three div + div { border-top: 1px solid var(--line); }
  .logos { justify-content: flex-start; gap: 24px 32px; }
  .logos img { zoom: 0.8; }

  .band { padding: 80px 0; }
  .section-label { margin-bottom: 28px; }

  .tree, .tree tbody, .tree tr, .tree th, .tree td { display: block; width: auto !important; }
  .tree thead { display: none; }
  .tree tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .tree th, .tree td { padding: 2px 0; border: 0; }
  .tree--gets td:nth-child(3)::before { content: "Gets: "; color: var(--slate); }
  .tree__via { border-bottom: 1px solid var(--ink) !important; }
  .tree__via td { border: 0; }

  .timeline li { grid-template-columns: 72px 1fr; }
  .timeline time { font-size: 24px; }

  .jobs > li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jobs h3 { font-size: 20px; }
  .register { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .register__name { font-size: 17px; }
  .register__sub { font-size: 13px; }
  .register__open { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 36px; }
  .register__openline { grid-column: 1; font-size: 17px; }

  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto !important; }
  .compare thead { display: none; }
  .compare tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .compare th, .compare td { padding: 3px 0; border: 0; }
  .compare tbody th { margin-bottom: 8px; }
  .compare td:nth-of-type(1)::before { content: "Build it yourself · "; color: var(--slate); }
  .compare td:nth-of-type(2)::before { content: "Generic telematics · "; color: var(--slate); }
  .compare td.compare__us { margin-top: 8px; padding: 10px 12px; }
  .compare td.compare__us::before { content: "c.technology · "; color: var(--signal); }

  .duty { grid-template-columns: 1fr; gap: 40px; }
  .people { grid-template-columns: minmax(0, 1fr); }
  .years > ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .years > ol > li { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; }
  .years > ol > li .years__y, .years > ol > li + li .years__y { grid-row: 1; grid-column: 1; margin: 0; padding: 14px 0 0 16px; border-top: 0; border-left: 1px solid var(--ink); font-size: 24px; }
  .years > ol > li .years__y::before, .years > ol > li + li .years__y::before { top: 20px; left: -5px; }
  .years ul { grid-column: 2; grid-row: 1 / span 2; }
  .years__v { grid-row: 2; grid-column: 1; margin: 0; padding: 6px 0 14px 16px; border-left: 1px solid var(--ink); font-size: 12px; min-height: 0; }
  .years ul li:first-child { border-top: 1px solid var(--ink); }
  .years__photo { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }

  .hl__card, .flow .hl__card, .hl--screen .hl__card { position: static; width: auto; margin-top: 14px; }
  .compose { height: auto; display: grid; gap: 20px; }
  .compose > * { position: static; width: 100% !important; }
  .compose__phone { max-width: 320px; justify-self: center; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .record-shot { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .query { grid-template-columns: minmax(0, 1fr); }
  .case { grid-template-columns: minmax(0, 1fr); }
  .case > li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 28px; }
  .case__shot { height: auto; max-height: 420px; }
  .case__shot img { height: auto; max-height: 420px; }
  .result th, .result td { padding: 9px 10px; }
  .record-shot .shot__meta { grid-column: 1; }
  .payload code { font-size: 12.5px; }
  .said { grid-template-columns: 1fr; }
  .said li:nth-child(odd) { padding-right: 0; }
  .said li + li { padding-top: 28px; border-top: 1px solid var(--line); }
  .tree--register td:nth-child(3)::before { content: "Since "; color: var(--slate); }
  .timeline--dates li { grid-template-columns: 1fr; }
  .timeline--dates time { grid-row: auto; margin-bottom: 6px; font-size: 20px; }
  .band--tight { padding: 48px 0; }
  .talk, .form__row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .talk { gap: 56px; }
  .talk__side { grid-column: 1; }
  .ways { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ways__main { padding: 28px 22px 26px; }
  .ways__name { font-size: 32px; }
  .values--five { grid-template-columns: 1fr 1fr; }
  .phones { grid-template-columns: 1fr 1fr; }
  .trio { grid-template-columns: 1fr; justify-items: center; }
  .trio--four { grid-template-columns: 1fr 1fr; }
  .plans, .plans tbody, .plans tr, .plans th, .plans td { display: block; width: auto !important; }
  .plans thead { display: none; }
  .plans tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .plans th, .plans td { padding: 2px 0; border: 0; }
  .plans tbody th { margin-bottom: 6px; }
  .plans td:nth-of-type(1)::before { content: "Enterprise · "; color: var(--slate); }
  .plans td:nth-of-type(2)::before { content: "Out of the box · "; color: var(--slate); }
  .plans .plans__fig td { font-size: 18px; }
  .plans td::before { font: 400 15px var(--text); }
  .bill > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bill p.bill__fig { text-align: left; }
  .bill p { max-width: none; }
  .certs li { min-width: 0; flex: 1 1 140px; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq__list { grid-column: 1; }
  .faq details p { padding-right: 0; }

  .pagehead { padding: 40px 0 56px; }
  .display--page { margin: 24px 0 20px; }
  .shot, .shot--row { grid-template-columns: minmax(0, 1fr); display: grid; gap: 28px; }
  .shot__meta { grid-column: 1; }
  .shot--row .slot { max-width: 100%; }
  .steps, .feat, .counted dl { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values--schemes { grid-template-columns: minmax(0, 1fr); }
  code { overflow-wrap: anywhere; }
  .proofrow { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proofrow > div { grid-column: 1; }
  .steps li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .steps li { padding-right: 0; padding-bottom: 20px; }
  .close { padding: 80px 0; }
  .foot { padding-top: 48px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__id { grid-column: 1 / -1; }
  .foot__row { flex-direction: column; margin-top: 40px; }

  .archive { gap: 56px; }
  .archive__year, .record { grid-template-columns: 1fr; }
  .archive__year .posts, .record__latest { grid-column: 1; margin-top: 24px; }
  .posts a { grid-template-columns: 1fr; row-gap: 2px; }
  .post__sub { white-space: normal; }
}

/* ── One element per page, only on that page ─────────────────────────── */

/* access.html: four views of one record */
/* access.html 03: one record, four roles.
 *
 * The same card four times, the same rows in the same order, so the only thing
 * that changes from card to card is what is missing. A field a role does not
 * receive is hatched, the way a drawing marks what is cut away: a flat SVG
 * tile, no gradient, and no word repeated in its place. Rows line up across
 * the cards through subgrid, also on the phone, where the four become two by
 * two. Tokens only from site.css; scoped to .sees so nothing leaks. */

.sees {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 64px;
}

/* strip, head and six rows: eight rows the four cards share */
.sees__card {
  grid-row: span 8;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  background: var(--white);
  border: 1px solid var(--line-strong);
}

.sees__strip {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

.sees__head {
  display: grid; align-content: start; gap: 2px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--ink);
}
.sees__who { font: 500 24px/1.15 var(--display); letter-spacing: -0.01em; }
.sees__org { font-size: 15px; line-height: 1.4; color: rgb(1 9 43 / 0.72); }
.sees__role { margin-top: 10px; color: var(--slate); }

.sees dl {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
}
.sees dl > div { padding: 13px 18px 14px; border-bottom: 1px solid var(--line); }
.sees dl > div:last-child { border-bottom: 0; }
.sees dt {
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 4px;
}
.sees dd {
  font: 500 15px/1.45 var(--text);
  font-variant-numeric: tabular-nums;
}

/* The hidden field: a hatched bar as long as the value it stands in for, on
 * the value's own line so the rows keep their height. */
.sees__off { display: flex; align-items: center; min-height: 1.45em; }
.sees__off::before {
  content: "";
  display: block; height: 14px;
  width: min(var(--w, 10em), 100%);
  background-color: rgb(1 9 43 / 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1l2-2M0 6l6-6M5 7l2-2' stroke='%2301092b' stroke-opacity='0.6' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 6px 6px;
}
.sees__off--where { --w: 9.87em; }
.sees__off--trips { --w: 8.75em; }

.sees + .shot__cap { margin-top: 16px; }

@media (max-width: 960px) {
  .sees { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; margin-top: 40px; }
  .sees__card:nth-child(n + 3) { margin-top: 12px; }
  .sees__strip { padding: 10px 12px; }
  .sees__strip span:first-child { display: none; }
  .sees__head { padding: 14px 12px 14px; }
  .sees__who { font-size: 19px; }
  .sees__org { font-size: 14px; }
  .sees__role { margin-top: 8px; font-size: 10.5px; }
  .sees dl > div { padding: 10px 12px 11px; }
  .sees dt { font-size: 10.5px; margin-bottom: 3px; }
  .sees dd { font-size: 14px; line-height: 1.4; }
  .sees__off { min-height: 1.4em; }
  .sees__off::before { height: 12px; }
}

/* compliance.html: the dates on a ruler */
/* compliance.html 01: the dates, on a ruler.
 *
 * Three dates are a position in time, so they are drawn as one: a ruler from
 * 1 January 2024 to the end of 2028, a tick per month and a longer one per
 * year, every mark at the day it falls on (--at, the day offset over 1,827
 * days). The time already passed is inked, what is ahead is a hairline, and
 * the change sits at today. Labels hang off leader lines of three lengths, a
 * step lower each, so no label crosses a later mark at any width. On the phone
 * the same ruler stands upright. Real text in HTML, only the ticks are SVG.
 * Tokens only from site.css; scoped to .ruler so nothing leaks. */

.ruler {
  --step: 112px;
  --axis: calc(3 * var(--step));
  position: relative;
  height: calc(var(--axis) + 72px);
  margin: 72px 0 0;
}

/* the three dates */
.ruler__dates li {
  position: absolute;
  left: calc(var(--at) * 100%);
  top: calc(var(--lv) * var(--step));
  height: calc(var(--axis) - var(--lv) * var(--step));
  width: max-content; max-width: 300px;
  padding-left: 14px;
  border-left: 1px solid var(--ink);
}
.ruler__dates li::after {
  content: ""; position: absolute;
  left: -4px; bottom: -4px;
  width: 7px; height: 7px;
  background: var(--ink);
}
.ruler__dates .label { color: var(--slate); margin-top: -3px; }
.ruler__day {
  margin-top: 6px;
  font: 500 26px/1.1 var(--display);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ruler__what {
  margin-top: 6px; max-width: 30ch;
  font-size: 15px; line-height: 1.45;
  color: rgb(1 9 43 / 0.72);
  text-wrap: pretty;
}

/* the axis: inked up to today, a hairline after */
.ruler__axis {
  position: absolute; left: 0; right: 0;
  top: var(--axis); height: 14px;
}
.ruler__axis::before, .ruler__axis::after { content: ""; position: absolute; }
.ruler__axis::before { left: 0; top: -1px; height: 2px; width: calc(var(--now) * 100%); background: var(--ink); }
.ruler__axis::after { left: calc(var(--now) * 100%); right: 0; top: 0; height: 1px; background: var(--line-strong); }

.ruler__ticks { position: absolute; left: 0; top: 0; overflow: visible; }
.ruler__ticks--across { width: 100%; height: 14px; }
.ruler__ticks--down { display: none; }
.ruler__ticks path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.ruler__past { stroke: var(--ink); }
.ruler__ahead { stroke: var(--line-strong); }

.ruler__years li {
  position: absolute;
  left: calc(var(--at) * 100%);
  top: calc(var(--axis) + 20px);
  padding-left: 5px;
  font: 500 13px/1 var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

/* today: a hairline down from the axis to its label */
.ruler__today {
  position: absolute;
  left: calc(var(--now) * 100%);
  top: var(--axis);
  padding: 44px 0 0 10px;
  border-left: 1px solid var(--line-strong);
  white-space: nowrap;
  color: var(--ink);
}
.ruler__today::before {
  content: ""; display: inline-block; vertical-align: 1px;
  width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--signal);
}
.ruler__today time { color: var(--slate); }

.ruler + .fine { margin-top: 32px; max-width: 88ch; }

/* The staircase holds down to about 600 px of ruler, because only the last
 * label has to fit to its right. So tablets keep it lying down, a little
 * smaller, and only the phone stands it upright. */
@media (max-width: 960px) {
  .ruler { --step: 104px; margin-top: 48px; }
  .ruler__day { font-size: 22px; }
  .ruler__what { font-size: 14px; }
}

/* Upright on the phone: years on the left, the dates to the right of the
 * axis at their own height, today on the left where the ink ends. */
@media (max-width: 640px) {
  .ruler {
    --len: 660px;
    --x: 96px;
    height: calc(var(--len) + 16px);
  }
  .ruler__dates li {
    left: calc(var(--x) + 22px); right: 0;
    top: calc(var(--at) * var(--len) - 8px);
    height: auto; width: auto; max-width: none;
    padding-left: 0; border-left: 0;
  }
  .ruler__dates li::before {
    content: ""; position: absolute;
    left: -22px; top: 8px; width: 16px; height: 1px;
    background: var(--ink);
  }
  .ruler__dates li::after { left: -26px; top: 5px; bottom: auto; }
  .ruler__dates .label { margin-top: 0; }
  .ruler__day { margin-top: 4px; font-size: 21px; }
  .ruler__what { margin-top: 4px; max-width: 32ch; }

  .ruler__axis { left: calc(var(--x) - 14px); right: auto; top: 0; width: 14px; height: var(--len); }
  .ruler__axis::before { left: 13px; top: 0; width: 2px; height: calc(var(--now) * 100%); }
  .ruler__axis::after { left: 14px; right: auto; top: calc(var(--now) * 100%); bottom: 0; width: 1px; height: auto; }
  .ruler__ticks--across { display: none; }
  .ruler__ticks--down { display: block; width: 14px; height: 100%; }

  .ruler__years li { left: 0; top: calc(var(--at) * var(--len) + 3px); padding-left: 0; }

  .ruler__today {
    left: 0; top: calc(var(--now) * var(--len));
    transform: translateY(-50%);
    padding: 0; border-left: 0;
    display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 3px;
  }
  .ruler__today::before { grid-row: 1; margin-right: 6px; }
  .ruler__sep { display: none; }
  .ruler__today time { grid-column: 1 / -1; }
  .ruler + .fine { margin-top: 24px; }
}

/* e-bikes.html: the fleet, by charge */
/* e-bikes.html only. Linked from that page, after site.css.
 *
 * 03 · The fleet, by charge. The band says a fleet runs your bikes in its own
 * access, so it shows what that access looks like: one bar per bike, its
 * charge, and the fleet's own alert level across all of them. A
 * chart and not a screen, because the point is one number per bike and the
 * few under the line, which a screen would bury in a table. Flat bars, the
 * page's hairlines, no colour but ink: the bikes under the line are the only
 * solid ones, so they are found without a legend.
 */

.eb-fleet {
  --axis: 56px;      /* the scale on the left */
  --aside: 112px;    /* room on the right for the line's name */
  --h: 248px;        /* 0 to 100 % */
  --bar: 8px;
  margin-top: 64px;
}

.eb-fleet__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
}
.eb-fleet__head .label:first-child { color: var(--slate); }
.eb-fleet__key {
  display: inline-block; width: 20px; margin-right: 10px;
  border-top: 1px solid var(--ink); vertical-align: 0.3em;
}

/* The plot is exactly 0 to 100 % tall; value labels sit above it, bike
   numbers below it, both outside the scale. */
.eb-fleet__plot {
  position: relative;
  height: var(--h);
  margin: 52px 0 44px;
}

/* Two lines only: the baseline and the fleet's level. Every bar carries its
   value, so a scale in between would be a second way to say the same. */
.eb-fleet__base,
.eb-fleet__level {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--y, 0) * 1%);
  transform: translateY(50%);
  font: 500 11.5px/1 var(--text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.eb-fleet__base::after,
.eb-fleet__level::after {
  content: ""; position: absolute; left: var(--axis); right: 0; top: 50%;
  border-top: 1px solid var(--ink);
}
.eb-fleet__base { color: var(--slate); }
.eb-fleet__base::after { border-top-color: var(--line-strong); }
.eb-fleet__level { font-weight: 600; }
.eb-fleet__level span:last-child {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 5px;
  font: 500 11.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
}

.eb-fleet__bars {
  position: absolute; z-index: 1;
  left: var(--axis); right: var(--aside); top: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(18, minmax(0, 1fr));
}
.eb-fleet__bars li { position: relative; }
.eb-fleet__bars li::before {
  content: ""; position: absolute; bottom: 0; left: 50%;
  width: var(--bar); margin-left: calc(var(--bar) / -2);
  height: calc(var(--v) * 1%);
  background: var(--line-strong);
}
.eb-fleet__v,
.eb-fleet__n {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 500 12px/1 var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  white-space: nowrap;
}
/* the value sits on the paper, so a line running behind it breaks cleanly */
.eb-fleet__v { bottom: calc(var(--v) * 1% + 6px); padding: 2px 3px; background: var(--paper); }
.eb-fleet__n { top: calc(100% + 14px); }

.eb-fleet__bars .is-low::before { background: var(--ink); }
.eb-fleet__bars .is-low .eb-fleet__v,
.eb-fleet__bars .is-low .eb-fleet__n { color: var(--ink); font-weight: 600; }

.eb-fleet__axis {
  position: absolute; left: 0; top: calc(100% + 14px);
  font: 500 11.5px/1 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}

.eb-fleet figcaption { padding-top: 12px; border-top: 1px solid var(--line); }

.eb-fleet__rule { margin-top: 20px; max-width: 60ch; font-size: 17px; }
.eb-fleet__rule + .duty { margin-top: 72px; }

@media (max-width: 960px) {
  .eb-fleet { --axis: 36px; --aside: 0px; --h: 184px; --bar: 5px; margin-top: 44px; }
  .eb-fleet__plot { margin: 40px 0 40px; }
  .eb-fleet__base, .eb-fleet__level { font-size: 10.5px; letter-spacing: 0; }
  .eb-fleet__level span:last-child { display: none; }
  .eb-fleet__v, .eb-fleet__n { font-size: 10.5px; letter-spacing: -0.02em; }
  .eb-fleet__v { bottom: calc(var(--v) * 1% + 4px); padding: 2px 1px; }
  .eb-fleet__n { top: calc(100% + 12px); }
  .eb-fleet__axis { display: none; }
  .eb-fleet__rule { font-size: 16px; }
  .eb-fleet__rule + .duty { margin-top: 56px; }
}

/* two-wheelers.html: the night, traced */
/* two-wheelers.html only. Linked from that page, after site.css.
 *
 * 03 · The night, traced. The band's claim is "tracked from the first metre",
 * so it draws the metres: the bike's trace through a street plan, from where
 * it was parked to where it stopped, with the moments the platform records on
 * the way. It takes the place of the alert block beside the timeline and
 * shares its first times (02:14, 02:16), so the drawing is the first quarter
 * hour and the timeline is the rest of the night. Hairline streets, not a map
 * image; one ink line for the trace; labels in the page's data voice.
 */

.tw-night__fig { display: grid; gap: 12px; }

.tw-night__plot {
  position: relative;
  aspect-ratio: 550 / 440;
  background: var(--white);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.tw-night__map { display: block; width: 100%; height: 100%; }
.tw-night__map * { vector-effect: non-scaling-stroke; }

.tw-night__streets line { stroke: var(--line); stroke-width: 1; }
.tw-night__fence { fill: none; stroke: var(--slate); stroke-width: 1; }
.tw-night__path {
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.tw-night__dots circle { fill: var(--ink); }
.tw-night__ticks circle,
.tw-night__cross { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.tw-night__start { fill: var(--ink); }
.tw-night__end { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.tw-night__end-dot { fill: var(--ink); }
.tw-night__scale { fill: none; stroke: var(--ink); stroke-width: 1; }

/* Labels are HTML over the drawing, placed in its own coordinates (--x, --y
   as a share of the plot), so they keep their size when the drawing scales. */
.tw-night__at {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  padding: 2px 5px;
  background: var(--white);
  font: 500 11px/1.3 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.tw-night__at b {
  display: block;
  font: 600 13px/1.2 var(--text);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.tw-night__at--below { transform: translate(-50%, 9px); text-align: center; }
.tw-night__at--above { transform: translate(-50%, calc(-100% - 9px)); text-align: center; }
.tw-night__at--left  { transform: translate(calc(-100% - 11px), -50%); text-align: right; }
.tw-night__at--right { transform: translate(11px, -50%); }
.tw-night__at--below-right { transform: translate(9px, 8px); }
/* the polygon's name sits outside it, on no background, so its edge stays whole */
.tw-night__at--note  { transform: translate(-4px, calc(-100% - 7px)); padding: 0 4px; background: none; color: var(--slate); }
.tw-night__at--scale {
  transform: translate(-50%, calc(-100% - 6px));
  padding: 0 2px; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.tw-night__unit { text-transform: none; letter-spacing: 0.02em; }

.tw-night + .fine { margin-top: 32px; }

@media (max-width: 960px) {
  .tw-night__fig { max-width: 560px; }
  .tw-night__at { font-size: 10px; padding: 1px 3px; }
  .tw-night__at b { font-size: 12px; }

}

/* services.html: the partner's calendar */
/* services.html only. Linked from that page, after site.css.
 *
 * 02 · The partner's calendar. The page says days and daily capacity are set
 * by whoever runs the service; this shows those settings the way the partner
 * lives with them: one month, only the operating days open, each with how
 * much of its capacity is taken, one day full, and the owner's day from the
 * lead shot marked. It takes the place of the settings block beside the
 * timeline, so the timeline stays the owner's story and the calendar is the
 * dealer's side of it. A calendar because the setting is a set of dates.
 */

.sv-cal { display: grid; gap: 0; }

.sv-cal__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px;
  padding: 12px 0 14px;
  border-top: 1px solid var(--ink);
}
.sv-cal__head span:first-child { color: var(--slate); }

.sv-cal__wk,
.sv-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sv-cal__wk li {
  padding: 0 0 8px 9px;
  font: 500 11px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}

/* Only the month's own days carry lines, so the outline is the shape of
   October: every day draws its right and bottom hairline, and a top or left
   one where no day sits above or beside it (classes t and l). Every cell has
   all four borders, most of them transparent, so no day sits a pixel off. */
.sv-cal__grid li {
  display: grid; grid-template-rows: auto 1fr auto auto; row-gap: 6px;
  min-height: 72px;
  padding: 8px 9px 9px;
  background: var(--paper);
  border: 1px solid transparent;
  border-right-color: var(--line);
  border-bottom-color: var(--line);
}
.sv-cal__grid .t { border-top-color: var(--line); }
.sv-cal__grid .l { border-left-color: var(--line); }
.sv-cal__grid .sv-cal__pad { background: none; border-color: transparent; }
.sv-cal__d {
  font: 500 14px/1 var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}

.sv-cal__grid .is-open { background: var(--white); }
.sv-cal .is-open .sv-cal__d { color: var(--ink); }
.sv-cal__bar {
  grid-row: 3;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px;
  height: 4px;
}
.sv-cal__bar i { background: var(--line); }
.sv-cal__bar .on { background: var(--ink); }
.sv-cal__n {
  grid-row: 4;
  font: 500 11px/1 var(--text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  white-space: nowrap;
}
.sv-cal .is-full .sv-cal__n { color: var(--ink); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* the owner's day: the one inverted cell */
.sv-cal__grid .is-mine { background: var(--ink); }
.sv-cal .is-mine .sv-cal__d,
.sv-cal .is-mine .sv-cal__n { color: var(--white); }
.sv-cal .is-mine .sv-cal__bar i { background: rgb(255 255 255 / 0.22); }
.sv-cal .is-mine .sv-cal__bar .on { background: var(--white); }

.sv-cal__key {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 14px;
  font-size: 13px; color: rgb(1 9 43 / 0.72);
}
.sv-cal__key li { display: flex; align-items: center; gap: 8px; }
.sv-cal__k { width: 12px; height: 12px; border: 1px solid var(--line-strong); background: var(--white); }
.sv-cal__k--mine { background: var(--ink); border-color: var(--ink); }
.sv-cal__k--full { width: 22px; height: 4px; border: 0; background: var(--ink); }

.sv-cal figcaption {
  display: grid; gap: 6px;
  margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--slate);
  max-width: 52ch;
}

@media (max-width: 960px) {
  .sv-cal__wk li { padding-left: 5px; font-size: 10px; letter-spacing: 0.04em; }
  .sv-cal__grid li { min-height: 58px; padding: 6px 5px 7px; row-gap: 5px; }
  .sv-cal__d { font-size: 13px; }
  .sv-cal__bar { gap: 1px; height: 3px; }
  .sv-cal__n { font-size: 10px; letter-spacing: 0; }
  .sv-cal .is-full .sv-cal__n { letter-spacing: 0.02em; }
  /* "5 of 8" becomes "5/8" where a day is 50 px wide */
  .sv-cal__of { font-size: 0; }
  .sv-cal__of::after { content: "/"; font-size: 10px; }
  .sv-cal__key { gap: 8px 16px; }
}

/* water.html: the shore, drawn */
/* water.html 02: the shore, drawn.
 * A plan of one harbour and its shore, like a chart in a pilot book: the land
 * in paper, the water white, the shore zones as hairlines 150 m apart, one
 * trip out and back, and every event the platform raises placed where it
 * happens. The band says "the platform knows where the shore is", so it shows
 * the shore. Flat line work in ink, no colour but the site's own.
 * Only this page links this file; every rule sits under .shore. */

.shore { margin-top: 56px; }
.shore > img { display: block; width: 100%; height: auto; }
.shore__svg { display: block; width: 100%; height: auto; }
.shore__svg--tall { display: none; }

.shore .sh-land { fill: var(--paper); }
.shore .sh-coast { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.shore .sh-lift { fill: none; stroke: var(--ink); stroke-width: 1; }
.shore .sh-pont { fill: var(--ink); }
.shore .sh-boat { fill: var(--white); stroke: var(--line-strong); stroke-width: 1; }
.shore .sh-boat--ours { fill: var(--ink); stroke: var(--ink); }
.shore .sh-zone { fill: none; stroke: var(--ink); stroke-width: 1; }
.shore .sh-zone--outer { stroke: var(--line-strong); }
.shore .sh-ring { fill: none; stroke: var(--slate); stroke-width: 1; }
.shore .sh-dim { fill: none; stroke: var(--slate); stroke-width: 1; }
.shore .sh-trip { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.shore .sh-arrow { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.shore .sh-lead { fill: none; stroke: var(--ink); stroke-width: 1; }
.shore .sh-frame { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.shore .sh-ev { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }

.shore text { font-family: var(--text); font-variant-numeric: tabular-nums; }
.shore .sh-t { font-size: 15.5px; font-weight: 500; fill: var(--ink); }
.shore .sh-n { font-size: 13.5px; font-weight: 400; fill: var(--slate); }
.shore .sh-u { font-size: 12.5px; font-weight: 500; fill: var(--slate); }
.shore .sh-num { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.shore .sh-p { font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }

/* the key: read out by screen readers everywhere, shown where the drawing
   is too small to carry its own labels */
.shore__key {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.shore .shot__cap { margin-top: 20px; }

/* Below 1200 px the wide plan would shrink its labels under 11 px, so a tall
   plan takes over: the same harbour and trip drawn for a narrow column, a
   number at each event, and the key beside it or under it. */
@media (max-width: 1199px) {
  .shore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; align-items: start; }
  .shore__plan { max-width: 420px; }
  .shore__svg--wide { display: none; }
  .shore__svg--tall { display: block; }
  .shore__key {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    counter-reset: ev; border-top: 1px solid var(--ink);
  }
  .shore__key li {
    counter-increment: ev;
    display: grid; grid-template-columns: 32px minmax(0, 1fr);
    padding: 11px 0 12px; border-bottom: 1px solid var(--line);
  }
  .shore__key li::before {
    content: counter(ev); grid-row: span 2;
    font: 600 13px/1.5 var(--text); font-variant-numeric: tabular-nums;
  }
  .shore__key b { font-weight: 500; font-size: 16px; line-height: 1.35; }
  .shore__key span { font-size: 14px; line-height: 1.4; color: var(--slate); }
  .shore .shot__cap { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 700px) {
  .shore { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
  .shore__plan { max-width: none; }
  .shore .shot__cap { margin-top: 0; }
}

/* caravans.html: two sources, one vehicle */
/* caravans.html 01: two sources, one vehicle.
 * One motorhome in side view, drawn to scale like a sheet in a coachbuilder's
 * manual. The band's point is that the base vehicle and the living area are
 * two data sources on one record, so the drawing splits along that line: the
 * living area is the white body, the base vehicle (cab, chassis, wheels) is
 * line only, and each value sits where it is on the van. It replaces the
 * two-column list that said the same thing in words.
 * Only this page links this file; every rule sits under .rig. */

.rig { margin-top: 64px; }

/* the two heads, split where the cab ends (x 464 of 1320) */
.rig__heads { display: grid; grid-template-columns: 35.15% minmax(0, 1fr); margin-bottom: 8px; }
.rig__heads .rig__who--base { margin-right: var(--gutter); }
.rig__who {
  font: 600 24px/1.1 var(--display); letter-spacing: -0.01em;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.rig__who span { display: block; margin-top: 6px; font: 400 14px/1.4 var(--text); letter-spacing: 0; color: var(--slate); }

.rig__svg { display: block; width: 100%; height: auto; }
.rig__svg * { vector-effect: non-scaling-stroke; }
.rig__plan { display: none; position: relative; }

.rig .rg-ground { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.rig .rg-living { fill: var(--white); stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.rig .rg-base { fill: var(--paper); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.rig .rg-skin { stroke-width: 1.25; }
.rig .rg-detail { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-linejoin: round; }
.rig .rg-part { fill: var(--white); stroke: var(--ink); stroke-width: 1; }
.rig .rg-lead { fill: none; stroke: var(--ink); stroke-width: 1; }
.rig .rg-end { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }

.rig text { font-family: var(--text); font-variant-numeric: tabular-nums; }
.rig .rg-t { font-size: 15.5px; font-weight: 500; fill: var(--ink); }
.rig .rg-n { font-size: 13.5px; font-weight: 400; fill: var(--slate); }

/* the numbered key: read out by screen readers everywhere, shown where the
   drawing is too small to carry its own labels */
.rig__key {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.rig .shot__cap { margin-top: 20px; }
.rig + .fine { margin-top: 10px; }

/* Below 1200 px the labels would shrink under 11 px: the drawing keeps its
   line work, each part gets a number, and the two lists sit under it. */
@media (max-width: 1199px) {
  .rig__heads, .rig__svg--wide { display: none; }
  .rig__plan { display: block; max-width: 860px; }
  .rig__n {
    position: absolute; transform: translate(-50%, -50%);
    font: 600 12.5px/1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink);
  }
  .rig__key {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gutter); margin-top: 32px;
  }
  .rig__key ol { margin-top: 4px; }
  .rig__key li {
    display: grid; grid-template-columns: 32px minmax(0, 1fr);
    padding: 11px 0 12px; border-bottom: 1px solid var(--line);
  }
  .rig__key li::before {
    content: attr(value); grid-row: span 2;
    font: 600 13px/1.5 var(--text); font-variant-numeric: tabular-nums;
  }
  .rig__key b { font-weight: 500; font-size: 16px; line-height: 1.35; }
  .rig__key li span { font-size: 14px; line-height: 1.4; color: var(--slate); }
}
@media (max-width: 700px) {
  .rig { margin-top: 40px; }
  .rig__key { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rig__who { font-size: 22px; }
}

/* ── Legal pages: imprint, privacy, terms ─────────────────
   The texts are the old site's, as published, so the lint skips them
   (data-lint="skip"). One reading measure, a plain hierarchy, hairlines. */
.pagehead--legal { padding-bottom: 56px; }
.pagehead--legal .display--page { margin-bottom: 0; }
.legal { max-width: 72ch; font-size: 17px; line-height: 1.65; }
.legal > * + * { margin-top: 16px; }
.legal h2 {
  margin-top: 56px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font: 500 clamp(21px, 1.8vw, 24px)/1.3 var(--display);
  letter-spacing: -0.005em;
}
.legal > h2:first-child { margin-top: 0; }
.legal > h2 + * { margin-top: 12px; }
.legal > .legal__part {
  margin-top: 112px; padding-top: 28px;
  border-top-color: var(--ink);
  font: 600 clamp(30px, 3vw, 40px)/1.1 var(--display);
  letter-spacing: -0.015em;
}
.legal > .legal__part + * { margin-top: 24px; }
.legal p, .legal li, .legal td { color: rgb(1 9 43 / 0.78); }
.legal strong { font-weight: 500; color: var(--ink); }
.legal a { color: var(--blue); text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal a strong { color: inherit; }
.legal ul { padding-left: 1.2em; list-style: disc; }
.legal ul.legal__clauses { padding-left: 0; list-style: none; }
.legal li + li { margin-top: 8px; }
.legal li::marker { color: var(--slate); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal > table { margin-top: 24px; }
.legal th {
  padding: 0 16px 10px 0; text-align: left; vertical-align: bottom;
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate); border-bottom: 1px solid var(--ink);
}
.legal td { padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal td:first-child { width: 34%; font-weight: 500; color: var(--ink); }
.legal th:last-child, .legal td:last-child { padding-right: 0; }

/* 404: the page head and nothing else. */
.pagehead--missing { padding-bottom: 160px; }
.pagehead--missing .lead a { white-space: normal; }

@media (max-width: 640px) {
  .legal { font-size: 16px; }
  .legal > h2 { margin-top: 44px; }
  .legal > .legal__part { margin-top: 80px; }
  /* Tables become one block per row, each cell under its column head. */
  .legal thead { display: none; }
  .legal table, .legal tbody, .legal tr, .legal td, .legal td:first-child { display: block; width: auto; }
  .legal tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal tbody tr:first-child { border-top: 1px solid var(--ink); }
  .legal td { padding: 0; border: 0; }
  .legal td + td { margin-top: 8px; }
  .legal td + td::before {
    content: attr(data-th); display: block; margin-bottom: 2px;
    font: 500 11px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
  }
}

/* ── Blog posts: blog/<slug>.html, written by tools/blog.py ─────────────
   The frame is ours: the label, the title, the published line, previous and
   next. The text in .article is the old site's, as published, Webflow markup
   removed (data-lint="skip"). One reading measure for the main image and the
   text, left aligned, air on the right: 36em, six of the twelve columns,
   about 70 characters a line. (68ch would be some 90 in Onest, whose zero is
   wide.) */
.pagehead--post { padding-bottom: 64px; }
.display--post {
  font-size: clamp(34px, 4vw, 58px); line-height: 1.02;
  max-width: 24ch; margin: 40px 0 24px;
  text-wrap: balance;
}
.post__lead { max-width: 56ch; }
.post__meta {
  display: flex; flex-wrap: wrap; gap: 14px 56px;
  margin-top: 48px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.post__meta dt {
  margin-bottom: 4px;
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate);
}
.post__meta dd { font-size: 15px; font-variant-numeric: tabular-nums; }
.post__meta dd span { margin-left: 8px; color: var(--slate); }

.band--post { padding: 72px 0 120px; }
.post__main, .article { max-width: 36em; font-size: 18px; }
.post__main { margin-bottom: 56px; }
.post__main img { width: 100%; }

.article { line-height: 1.65; color: rgb(1 9 43 / 0.84); overflow-wrap: break-word; }
.article > * + * { margin-top: 20px; }
.article h2, .article h3, .article h4 { color: var(--ink); text-wrap: balance; }
.article h2 { margin-top: 56px; font: 500 clamp(24px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -0.01em; }
.article h3 { margin-top: 40px; font: 500 21px/1.3 var(--display); }
.article h4 { margin-bottom: 0; margin-top: 32px; font: 600 18px/1.4 var(--text); }
.article > :is(h2, h3, h4) + * { margin-top: 12px; }
.article > :first-child { margin-top: 0; }
.article strong { font-weight: 600; color: var(--ink); }
.article a { color: var(--blue); text-underline-offset: 2px; overflow-wrap: anywhere; }
.article a:hover { color: var(--blue-deep); }
.article a strong { color: inherit; }
.article ul, .article ol { padding-left: 1.3em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li + li { margin-top: 8px; }
.article li::marker { color: var(--slate); }
/* Webflow set every quote bold and italic; the rule and the size say it. */
.article blockquote {
  margin-top: 32px; padding: 2px 0 2px 24px;
  border-left: 2px solid var(--ink);
  font-size: 20px; line-height: 1.5; color: var(--ink);
}
.article blockquote strong, .article blockquote em { font-weight: inherit; font-style: normal; }
.article blockquote + * { margin-top: 32px; }
/* Pictures at most the measure wide and a screen tall, never blown up. */
.article figure { margin-top: 40px; }
.article figure + * { margin-top: 40px; }
.article figure img { width: auto; max-width: 100%; height: auto; max-height: 80vh; }
.article figcaption {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.5; color: var(--slate);
}
.article code { font: 400 0.86em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
/* Code keeps its lines; a long one scrolls inside the box, not the page. */
.article pre {
  padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line);
  white-space: pre; overflow-x: auto;
}
.article pre code { font-size: 0.82em; }

/* Previous and next: two titles on an ink rule, the archive where one is missing. */
.prevnext { padding: 72px 0 88px; }
.prevnext .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.prevnext a {
  display: grid; gap: 12px; align-content: start;
  padding-top: 16px; border-top: 1px solid var(--ink);
  text-decoration: none;
}
.prevnext__title { font: 500 clamp(20px, 1.8vw, 26px)/1.25 var(--display); max-width: 30ch; text-wrap: balance; }
.prevnext a:hover .prevnext__title { color: var(--blue); }

@media (max-width: 960px) {
  .pagehead--post { padding-bottom: 40px; }
  .display--post { margin: 24px 0 16px; }
  .post__meta { margin-top: 32px; gap: 12px 36px; }
  .band--post { padding: 40px 0 72px; }
  .post__main { margin-bottom: 36px; }
  .post__main, .article { font-size: 17px; }
  .article h2 { margin-top: 44px; }
  .article blockquote { padding-left: 18px; font-size: 18px; }
  .prevnext { padding: 48px 0 56px; }
  .prevnext .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ── The product, embedded (feedback-2026-10-19.md) ─────────────────────
 * The web app prototype and the driver app in frames, js/embeds.js. The
 * frames are transparent, so the band's ground shows through. Motion here is
 * small and always answers something: a frame fades in when it has loaded, a
 * row answers the pointer. Nothing moves on scroll, and reduced motion keeps
 * all of it still. */
.embed { position: relative; aspect-ratio: 15 / 8; }
.embed--square { aspect-ratio: 1 / 1; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.embed.is-loaded iframe { opacity: 1; transform: none; }
.embed__cap { margin-top: 10px; }

/* the live app: a browser window around web.html, a shield until the first click */
.live { position: relative; display: grid; gap: 14px; }
.live__window { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--white); }
.live__window--dark { background: #0b1230; border-color: rgb(1 9 43 / 0.5); }
.live__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.live__window--dark .live__bar { border-color: rgb(255 255 255 / 0.08); }
.live__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(1 9 43 / 0.14); }
.live__window--dark .live__bar i { background: rgb(255 255 255 / 0.16); }
.live__bar span { margin: 0 auto; padding: 3px 14px; border-radius: 999px; font: 500 11.5px/1.4 var(--text); color: var(--slate); background: rgb(1 9 43 / 0.05); }
.live__window--dark .live__bar span { color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.06); }
.live__frame { position: relative; aspect-ratio: 16 / 10; }
.live__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s ease; }
.live.is-loaded .live__frame iframe { opacity: 1; }
.live__shield {
  all: unset; position: absolute; inset: 0; z-index: 2; cursor: pointer;
  display: grid; place-items: end center; padding-bottom: 28px;
}
.live__shield span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font: 500 14px/1 var(--text);
  transform: translateY(0); transition: transform .25s ease, background .25s ease;
}
.live__shield span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.live__shield:hover span, .live__shield:focus-visible span { background: var(--blue); transform: translateY(-3px); }
.live__go { display: flex; flex-wrap: wrap; gap: 8px; }
.live__go button {
  all: unset; box-sizing: border-box; cursor: pointer;
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  font: 500 14px/32px var(--text); color: var(--ink);
  transition: border-color .2s, color .2s, background .2s;
}
.live__go button:hover { border-color: var(--blue); color: var(--blue); }
.live__go button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.live__go button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.band--ink .live__go button { border-color: var(--line-ink); color: var(--white); }
.band--ink .live__go button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* Feature rows: a screen and its sentence, alternating sides. The shape the
 * brief asks for in place of label + headline + four columns. */
.rows { display: grid; gap: 112px; margin-top: 72px; }
.row { display: grid; grid-template-columns: 7fr 1fr 4fr; align-items: center; }
.row > .row__media { grid-column: 1; }
.row > .row__text { grid-column: 3; display: grid; gap: 16px; align-content: center; }
.row--flip { grid-template-columns: 4fr 1fr 7fr; }
.row--flip > .row__media { grid-column: 3; grid-row: 1; }
.row--flip > .row__text { grid-column: 1; grid-row: 1; }
.row h3 { font: 600 clamp(26px, 2.4vw, 34px)/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.row__text > p:not(.label) { font-size: 17px; line-height: 1.55; color: rgb(1 9 43 / 0.78); max-width: 46ch; }
.band--ink .row__text > p:not(.label) { color: rgb(255 255 255 / 0.74); }
.row__list { display: grid; border-top: 1px solid var(--line); }
.row__list li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.row__list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 10px; height: 1px; background: var(--blue); transition: width .2s; }
.row__list li:hover::before { width: 14px; }
.band--ink .row__list, .band--ink .row__list li { border-color: var(--line-ink); }
.band--ink .row__list li::before { background: var(--signal); }

/* Live and next, said the same way everywhere. */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 10.5px/1.5 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); white-space: nowrap; vertical-align: 3px; }
.tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.tag--next { border-style: dashed; }
.band--ink .tag { border-color: var(--line-ink); color: rgb(255 255 255 / 0.7); }

/* Arrows that answer the pointer. */
.more, .next a, .cols a .menu__name { transition: color .2s; }
a.more::after, .go::after { content: ""; }
.nudge { display: inline-block; transition: transform .2s ease; }
a:hover > .nudge, a:focus-visible > .nudge { transform: translateX(4px); }

/* index.html: the question is how. Three ways on one months axis. */
/* Why us: four gains on hairlines, ahead of the comparison */
.gains { list-style: none; padding: 0; margin: 64px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.gains li { padding-top: 20px; border-top: 1px solid var(--ink); }
.gains h3 { font: 500 20px/1.2 var(--display); }
.gains p { margin-top: 8px; font-size: 15px; color: var(--slate); max-width: 32ch; }
@media (max-width: 900px) { .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 560px) { .gains { grid-template-columns: minmax(0, 1fr); } }
.paths__head { margin-top: 88px; color: var(--slate); }
.paths { margin-top: 72px; border-top: 1px solid var(--ink); }
.paths__head + .paths { margin-top: 12px; border-top-color: var(--line-strong); }
.paths__axis, .paths__row { display: grid; grid-template-columns: 3fr 9fr; gap: var(--gutter); }
.paths__axis { padding: 12px 0; border-bottom: 1px solid var(--line); }
.paths__ticks { position: relative; height: 16px; }
.paths__ticks span { position: absolute; transform: translateX(-50%); font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); font-variant-numeric: tabular-nums; }
.paths__ticks span:first-child { transform: none; }
.paths__ticks span:last-child { transform: translateX(-100%); }
.paths__row { padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
.paths__row h3 { font: 500 20px/1.2 var(--display); }
.paths__row h3 + p { margin-top: 4px; font-size: 14px; color: var(--slate); max-width: 30ch; }
.paths__track { position: relative; height: 44px; }
.paths__bar {
  position: absolute; top: 0; height: 44px; left: 0; width: var(--w);
  display: flex; align-items: center; padding: 0 14px;
  font: 500 14px/1.2 var(--text); color: var(--ink);
  background: rgb(1 9 43 / 0.06); border-left: 2px solid var(--line-strong);
  transform-origin: left; transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.paths__bar--range { background: repeating-linear-gradient(90deg, rgb(1 9 43 / 0.06) 0 6px, transparent 6px 10px); }
.paths__bar--us { background: var(--ink); color: var(--white); border-left-color: var(--signal); }
.paths__note { position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--w) + 14px); font-size: 14px; color: var(--slate); white-space: nowrap; }
.paths__row--us h3 { color: var(--blue); }
.paths__sum { display: grid; grid-template-columns: 3fr 9fr; gap: var(--gutter); padding-top: 28px; }
.paths__sum p { grid-column: 2; font: 500 clamp(24px, 2.4vw, 34px)/1.15 var(--display); letter-spacing: -0.01em; max-width: 28ch; }
.paths__sum p b { font-weight: 600; color: var(--blue); }

/* index.html, oem-suite.html: the foundation and what you build on it */
.stack { display: grid; grid-template-columns: 5fr 1fr 6fr; margin-top: 72px; align-items: start; }
.stack__layers { grid-column: 3; display: grid; gap: 10px; }
.layer { padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: 4px; transition: border-color .2s, transform .2s; }
.layer:hover { border-color: var(--blue); transform: translateX(4px); }
.layer .label { color: var(--slate); }
.layer p:not(.label) { margin-top: 6px; font: 500 18px/1.35 var(--display); }
.layer ul { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 12px; }
.layer li { padding: 3px 10px; border-radius: 999px; background: rgb(1 9 43 / 0.05); font-size: 13.5px; }
.layer--yours { border-style: dashed; }
.layer--yours li { background: transparent; border: 1px dashed var(--line-strong); }
.layer--api { border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; padding: 10px 0; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.layer--api:hover { transform: none; }
.layer--api p:not(.label) { margin: 0; font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.layer--ours { background: var(--ink); color: var(--white); border-color: var(--ink); }
.layer--ours .label { color: rgb(255 255 255 / 0.55); }
.layer--ours li { background: rgb(255 255 255 / 0.1); }
.stack__text { display: grid; gap: 20px; align-content: start; }
.stack__text p:not(.label) { font-size: 17px; color: rgb(1 9 43 / 0.78); max-width: 44ch; }

/* index.html: day one, an index on the left and one scene on the right */
.dayone { display: grid; grid-template-columns: 4fr 8fr; gap: 0 48px; margin-top: 64px; align-items: start; }
.dayone__list { border-top: 1px solid var(--ink); }
.dayone__item {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px;
  grid-template-rows: auto 0fr;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: padding .2s ease, grid-template-rows .35s ease;
}
.dayone__item .label { grid-row: span 2; color: var(--slate); padding-top: 4px; }
.dayone__item b { font: 500 19px/1.25 var(--display); transition: color .2s; }
/* the description opens by its grid row, not max-height: one row grows as fast
   as the other shrinks, so the list (whose height js/embeds.js holds) never
   pushes the page while hovering through it */
.dayone__item span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--slate); min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s ease; }
.dayone__item[aria-selected="true"] { padding-left: 6px; grid-template-rows: auto 1fr; }
.dayone__item[aria-selected="true"] b { color: var(--blue); }
.dayone__item[aria-selected="true"] span:last-child { opacity: 1; }
.dayone__item[aria-selected="true"] .label { color: var(--blue); }
.dayone__item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dayone__stage { position: sticky; top: 100px; display: grid; }
.dayone__pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; display: grid; gap: 12px; }
.dayone__pane.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.dayone__pane .phonebox { display: grid; place-items: center; aspect-ratio: 15 / 8; }
.dayone__foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* a launch, on a ruler of weeks */
.launch { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.launch li { position: relative; padding: 22px 24px 0 0; }
.launch li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.launch li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.launch li + li::before { left: -7px; }
.launch li:last-child::before { background: var(--signal); border-color: var(--signal); }
.band--white .launch li::before { background: var(--white); }
.launch time { font: 500 clamp(28px, 2.6vw, 38px)/1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.launch .label { display: block; margin: 12px 0 6px; color: var(--blue); }
.launch p:not(.label) { font-size: 15px; color: rgb(1 9 43 / 0.75); max-width: 30ch; }
.launch + .fine { margin-top: 24px; max-width: 80ch; }

/* building blocks: the doors that stay open */
.blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--gutter); margin-top: 56px; border-top: 1px solid var(--ink); }
.blocks > div { padding: 22px 24px 24px 0; border-bottom: 1px solid var(--line); transition: background .2s; }
.blocks > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
.blocks h3 { font: 500 21px/1.25 var(--display); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.blocks p { margin-top: 8px; font-size: 15.5px; color: rgb(1 9 43 / 0.75); max-width: 52ch; }
.blocks a { color: var(--blue); text-decoration: none; font-weight: 500; }
.blocks a:hover { text-decoration: underline; }
.blocks--ink { border-color: var(--line-ink); }
.band--ink .blocks > div { border-color: var(--line-ink); }
.band--ink .blocks p { color: rgb(255 255 255 / 0.72); }
.band--ink .blocks a { color: var(--signal); }

/* a teaser that points elsewhere: a hairline box, one paragraph, one link */
.teaser { margin-top: 48px; display: grid; grid-template-columns: 3fr 9fr; gap: var(--gutter); padding: 24px 0; border-top: 1px solid var(--blue); border-bottom: 1px solid var(--line); }
.teaser .label { color: var(--blue); }
.teaser p:not(.label) { font-size: 18px; line-height: 1.5; max-width: 64ch; }
.band--ink .teaser { border-bottom-color: var(--line-ink); border-top-color: var(--signal); }
.band--ink .teaser .label { color: var(--signal); }

/* one sentence that a page stands on, big */
.claim { font: 500 clamp(28px, 3vw, 44px)/1.12 var(--display); letter-spacing: -0.015em; max-width: 26ch; text-wrap: balance; }
.claim b { font-weight: 600; color: var(--blue); }
.band--ink .claim b { color: var(--signal); }

/* the partner types, one scene each */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px var(--gutter); margin-top: 64px; }
.kind { display: grid; gap: 14px; align-content: start; }
.kind h3 { font: 500 24px/1.2 var(--display); }
.kind p:not(.label) { font-size: 16px; color: rgb(1 9 43 / 0.75); max-width: 52ch; }
.kind .embed { border-bottom: 1px solid var(--line); }

/* a day as a sequence of screens */
.day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 64px; counter-reset: d; }
.day li { display: grid; gap: 10px; align-content: start; }
.day time { font: 500 13px/1 var(--text); letter-spacing: 0.08em; color: var(--blue); font-variant-numeric: tabular-nums; padding-top: 12px; border-top: 2px solid var(--ink); }
.day h3 { font: 500 19px/1.25 var(--display); }
.day p { font-size: 14.5px; color: rgb(1 9 43 / 0.75); }
.day .embed { transition: transform .3s ease; }
.day li:hover .embed { transform: translateY(-4px); }

/* the driver app page: groups of features beside one live phone */
.groups { display: grid; grid-template-columns: 5fr 1fr 6fr; margin-top: 64px; align-items: start; }
.groups__phone { position: sticky; top: 96px; display: grid; justify-items: center; gap: 14px; }
.brands--sm { justify-content: center; gap: 6px; margin: 0; max-width: 340px; }
.brands--sm button { height: 28px; padding: 0 11px; font-size: 12.5px; line-height: 26px; transition: background .2s, color .2s, border-color .2s; }
.group__go button[hidden] { display: none; }
.groups__list { grid-column: 3; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.group { padding: 26px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.group h3 { font: 500 24px/1.2 var(--display); }
.group > p { font-size: 16px; color: rgb(1 9 43 / 0.75); max-width: 54ch; }
.group dl { display: grid; gap: 0; }
.group dl div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.group dt { font-weight: 500; }
.group dd { color: rgb(1 9 43 / 0.75); }
.group__go { display: flex; flex-wrap: wrap; gap: 8px; }
.group__go button { all: unset; cursor: pointer; font: 500 13.5px/1 var(--text); color: var(--blue); padding: 6px 0; }
.group__go button::after { content: " →"; display: inline-block; transition: transform .2s; }
.group__go button:hover::after { transform: translateX(3px); }
.group__go button[aria-pressed="true"] { color: var(--ink); }

/* the compliance table on /trust */
.comply { width: 100%; margin-top: 56px; border-collapse: collapse; font-size: 15px; }
.comply th, .comply td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); }
.comply thead th { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--ink); }
.comply tbody th { font: 500 17px/1.3 var(--display); width: 18%; }
.comply td { color: rgb(1 9 43 / 0.78); }
.comply td:nth-child(2) { width: 24%; }
.comply tbody tr { transition: background .2s; }
.comply tbody tr:hover { background: rgb(0 75 255 / 0.03); }

@media (max-width: 960px) {
  .rows { gap: 72px; margin-top: 48px; }
  .row, .row--flip { grid-template-columns: 1fr; gap: 24px; }
  .row > .row__media, .row--flip > .row__media, .row > .row__text, .row--flip > .row__text { grid-column: 1; grid-row: auto; }
  .paths__axis, .paths__row, .paths__sum { grid-template-columns: 1fr; gap: 10px; }
  .paths__axis > :first-child { display: none; }
  .paths__sum p { grid-column: 1; }
  .paths__note { position: static; transform: none; display: block; margin-top: 52px; white-space: normal; }
  .paths__track { height: auto; min-height: 44px; }
  .stack, .groups { grid-template-columns: 1fr; gap: 32px; }
  .stack__layers, .groups__list { grid-column: 1; }
  .groups__phone { position: static; }
  .dayone { grid-template-columns: 1fr; gap: 24px; }
  .dayone__stage { position: static; order: -1; }
  .launch, .day { grid-template-columns: 1fr 1fr; gap: 32px var(--gutter); }
  .launch li + li { border-left: 0; padding-left: 0; }
  .launch li + li::before { left: 0; }
  .blocks, .kinds { grid-template-columns: 1fr; }
  .blocks > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .teaser { grid-template-columns: 1fr; }
  .group dl div { grid-template-columns: 1fr; gap: 2px; }
  .comply thead { display: none; }
  .comply, .comply tbody, .comply tr, .comply th, .comply td { display: block; width: auto !important; }
  .comply tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .comply th, .comply td { border: 0; padding: 3px 0; }
  .comply td::before { content: attr(data-th) ": "; font-weight: 500; color: var(--ink); }
}
@media (max-width: 640px) {
  .launch, .day { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .embed iframe, .live__frame iframe, .dayone__pane, .paths__bar, .layer, .day .embed, .nudge, .live__shield span { transition: none !important; transform: none !important; }
}
.register--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .register--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a fact inside a big number keeps the number's type */
.numbers dd span[data-fact] { font: inherit; letter-spacing: inherit; margin: 0; color: inherit; }
/* the bars flow, so a short bar still fits its label and the note follows it */
.paths__track { display: flex; align-items: center; gap: 14px; height: auto; min-height: 44px; }
.paths__bar { position: static; flex: none; min-width: max-content; white-space: nowrap; }
.paths__bar--range { flex: 1 1 auto; min-width: 0; white-space: normal; }
.paths__note { position: static; transform: none; white-space: normal; }
@media (max-width: 960px) { .paths__note { margin-top: 0; } }
.paths__ticks span { white-space: nowrap; }
.embed { border-radius: 10px; overflow: hidden; }
.embed--flat { border-radius: 0; overflow: visible; }
.register figure { overflow: hidden; }
.register img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.register figure:hover img { transform: scale(1.025); }
.blocks > div:hover h3 { color: var(--blue); }
.band--ink .blocks > div:hover h3 { color: var(--signal); }
.blocks h3 { transition: color .2s; }
.row .embed { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.row:hover .embed { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .register img, .row .embed { transition: none; transform: none !important; } }

/* partner-hub.html: the same hub in three brands' colours, fanned out */
.brandstack { position: relative; aspect-ratio: 4 / 3; }
.brandstack .embed { position: absolute; width: 62%; border: 1px solid var(--line); background: var(--white); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.brandstack .embed:nth-child(1) { left: 0; top: 0; }
.brandstack .embed:nth-child(2) { left: 19%; top: 9%; }
.brandstack .embed:nth-child(3) { left: 38%; top: 18%; }
.brandstack:hover .embed:nth-child(1) { transform: translate(-10px, -8px); }
.brandstack:hover .embed:nth-child(3) { transform: translate(10px, 8px); }
.timeline--flush { grid-column: auto; margin-top: 8px; }
.group h2 { font-size: clamp(28px, 2.8vw, 40px); }
.row__text h2 { font-size: clamp(28px, 2.8vw, 40px); }
@media (prefers-reduced-motion: reduce) { .brandstack .embed { transition: none; transform: none !important; } }
.embed--flat { overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.embed--flat img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.day + .label { margin-top: 28px; }
.kinds + .fine { margin-top: 40px; }
.group__go { margin-top: 4px; }
.group__go::before { content: "On the phone:"; font: 500 11.5px/30px var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-right: 4px; }
.group__go button { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; line-height: 28px; transition: border-color .2s, color .2s, background .2s; }
.group__go button::after { content: ""; }
.group__go button:hover { border-color: var(--blue); }
.group__go button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ab__prose { gap: 18px; }
.ab__prose p:not(.claim) { font-size: 17px; line-height: 1.6; color: rgb(1 9 43 / 0.78); max-width: 60ch; }
.ab__prose .more { white-space: normal; }
.teaser__line { margin-top: 32px; font-size: 18px; }
.dayone > *, .groups > *, .stack > *, .row > * { min-width: 0; }
@media (max-width: 960px) { .dayone { grid-template-columns: minmax(0, 1fr); } .dayone__item span:last-child { white-space: normal; } }
.dayone__stage { grid-template-columns: minmax(0, 1fr); }
.dayone__pane .phonebox { aspect-ratio: auto; }
@media (max-width: 960px) {
  .dayone__pane:not(.is-on) { display: none; }
  .paths__ticks span:nth-child(2), .paths__ticks span:nth-child(3) { display: none; }
  .paths__axis > :first-child { display: none; }
  .paths__axis { display: block; }
}
.live__go--vtype { margin-top: -4px; }
.live__go--vtype button { height: 30px; font-size: 13px; line-height: 28px; color: var(--slate); }
@media (max-width: 640px) {
  .facts { display: grid; grid-template-columns: 1fr 1fr; }
  .facts li { margin: 0; padding: 12px 12px 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* the lead band under a page head: the product right under the answer, no seam */
.band--lead { padding: 0 0 112px; }
.kinds--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gutter); }
.kinds--three .kind h3 { font-size: 21px; }
.kinds--three .kind p:not(.label) { font-size: 15px; }
.kinds--three .embed { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.kinds--three .kind:hover .embed { transform: translateY(-4px); }
.live__go--vtype { align-items: center; }
.live__go--vtype .label { margin-right: 6px; }
.live__go--vtype button { color: var(--ink); }
@media (max-width: 960px) {
  .kinds--three { grid-template-columns: 1fr; }
  .band--lead { padding-bottom: 72px; }
  .live__frame { aspect-ratio: 3 / 4; }
  .tri__car .tri__types { flex-wrap: wrap; width: auto; max-width: 100%; justify-content: center; white-space: normal; }
}
.trust__wip { margin-top: 20px; max-width: 70ch; padding-left: 12px; border-left: 2px solid var(--blue); }
/* the triangle, the product, starts within the first screen on a laptop */
@media (min-width: 961px) {
  .hero { padding-top: 48px; }
  .hero__meta { margin-bottom: 28px; }
  .hero__row { margin-top: 32px; }
  .hero .facts { margin-top: 36px; }
}

/* ── Platform (index.html, feedback-2026-10-20.md § 1.4) ───
   One platform, one product per corner of the c.technology triangle. Three
   tabs, each with a small triangle marking its corner; under them each panel
   has its own shape: the manufacturer's features in groups, the partner
   roles in a row, the driver's one app on a phone. */
.corners {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 56px; border-top: 1px solid var(--ink);
}
.corners button {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 2px 14px;
  padding: 22px 24px 22px 0;
  transition: background .2s ease;
}
.corners button + button { padding-left: 24px; }
.corners button::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}
.corners button[aria-selected="true"]::before { transform: none; }
.corners button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.corners__tri { grid-row: span 3; align-self: start; width: 44px; height: 40px; margin-top: 2px; overflow: visible; }
.corners__tri path { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.corners__tri circle { fill: var(--white); stroke: var(--line-strong); stroke-width: 1; transition: fill .25s, stroke .25s; }
#tab-oem .corners__tri [data-c="oem"], #tab-partner .corners__tri [data-c="partner"], #tab-driver .corners__tri [data-c="driver"] { fill: var(--slate); stroke: var(--slate); }
#tab-oem[aria-selected="true"] [data-c="oem"], #tab-partner[aria-selected="true"] [data-c="partner"], #tab-driver[aria-selected="true"] [data-c="driver"] { fill: var(--blue); stroke: var(--blue); }
.corners__who { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.corners__product { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--display); letter-spacing: -0.01em; transition: color .2s; }
.corners__what { font-size: 14px; line-height: 1.4; color: var(--slate); }
.corners button:hover .corners__product, .corners button[aria-selected="true"] .corners__product { color: var(--blue); }
.corners button[aria-selected="true"] .corners__who { color: var(--ink); }

.corner { padding-top: 8px; }
.corner[hidden] { display: none; }
.corner .dayone { margin-top: 32px; }
.corner .dayone__list { border-top: 0; }
/* the manufacturer's features, grouped by what they are for */
.dayone__group { padding: 22px 0 8px; color: var(--ink); border-bottom: 1px solid var(--line); }
.dayone__list > .dayone__group:first-child { padding-top: 0; }

/* the partners: four roles in a row, one hub */
.partners { display: grid; gap: 28px; margin-top: 32px; }
.partners__roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.partners__roles button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px;
  padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.partners__roles button:hover { border-color: var(--line-strong); }
.partners__roles button[aria-selected="true"] { border-color: var(--blue); background: var(--blue-tint); }
.partners__roles button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.partners__mark {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); font: 500 13px/1 var(--display); color: var(--slate);
  transition: background .2s, color .2s, border-color .2s;
}
.partners__roles button[aria-selected="true"] .partners__mark { background: var(--blue); border-color: var(--blue); color: var(--white); }
.partners__roles b { font: 500 18px/1.2 var(--display); }
.partners__roles span:last-child { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.4; color: var(--slate); }
.partners__stage { display: grid; grid-template-columns: minmax(0, 1fr); }
.partners__pane { grid-template-columns: 8fr 4fr; gap: 0 48px; align-items: center; }
.partners__meta { display: grid; gap: 18px; align-content: center; }
.partners__meta .grants { grid-template-columns: 1fr; gap: 16px; }
.corner__foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--slate); }

/* the driver: one app, on a phone, with what it does beside it */
.driver { display: grid; grid-template-columns: 5fr 7fr; gap: 0 48px; align-items: center; margin-top: 40px; }
.driver__phone { display: grid; justify-items: center; gap: 14px; }
.driver__text { display: grid; gap: 22px; max-width: 520px; }
.driver__text h3 { font: 500 clamp(24px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -0.01em; }
.driver__text .grants { grid-template-columns: 1fr 1fr; }


@media (max-width: 960px) {
  .corners { grid-template-columns: 1fr; margin-top: 36px; }
  .corners button, .corners button + button { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .corners button::before { top: auto; bottom: -1px; }
  .corners__what { display: none; }
  .corners__tri { grid-row: span 2; width: 36px; height: 33px; }
  .partners__roles { grid-template-columns: 1fr 1fr; }
  .partners__roles span:last-child { display: none; }
  .partners__pane { grid-template-columns: 1fr; gap: 20px; }
  .driver { grid-template-columns: 1fr; gap: 32px; }
  .driver__text .grants { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .corners button::before, .partners__roles button { transition: none; }
}

/* oem-suite.html, "Nothing here locks you in" (feedback-2026-10-20.md § 3.3):
   one large line drawing per block, faint, floating behind the text. Decoration
   only: the text says it all without it. */
.blocks--motif > div { position: relative; overflow: hidden; }
.blocks--motif > div > :not(.blocks__motif) { position: relative; }
.blocks__motif {
  position: absolute; right: 8px; top: 50%; width: 132px; height: 132px; margin-top: -66px;
  fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.16; pointer-events: none;
  animation: motif-float 9s ease-in-out infinite alternate;
  transition: opacity .3s ease;
}
.blocks--motif > div:nth-child(2) .blocks__motif { animation-delay: -3s; }
.blocks--motif > div:nth-child(3) .blocks__motif { animation-delay: -6s; }
.blocks--motif > div:nth-child(4) .blocks__motif { animation-delay: -1.5s; }
.blocks--motif > div:hover .blocks__motif { opacity: 0.3; }
.blocks--motif p { max-width: 44ch; }
@keyframes motif-float { from { transform: translate(0, -6px) rotate(-3deg); } to { transform: translate(-6px, 6px) rotate(3deg); } }
@media (max-width: 960px) { .blocks__motif { width: 96px; height: 96px; margin-top: -48px; opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .blocks__motif { animation: none; } }

/* partner-hub.html, support (feedback-2026-10-20.md § 4.1): each step is a
   state of the request, drawn as the status badge the Partner Hub shows
   (the web app's tag colours), in a column wide enough for it. */
.timeline__head {
  display: grid; grid-template-columns: 150px 1fr; column-gap: var(--gutter);
  margin-top: 20px; padding-bottom: 8px;
  font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate);
}
.timeline--status { margin-top: 0; position: relative; }
.timeline--status li { grid-template-columns: 150px 1fr; position: relative; }
/* the request's path: one hairline from badge to badge */
.timeline--status li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 58px; bottom: -22px; width: 1px; background: var(--line-strong); }
.tstate {
  grid-row: span 2; align-self: start; justify-self: start; position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  font: 600 14px/1.2 "Inter", var(--text); letter-spacing: 0;
  background: var(--tone-bg); color: var(--tone);
  box-shadow: 0 0 0 4px var(--paper);
}
.tstate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tstate--open { --tone: #c4320a; --tone-bg: #fdeee8; }
.tstate--answered { --tone: #004bff; --tone-bg: #e1ebff; }
.tstate--booked { --tone: #1d4ed8; --tone-bg: #e8eefc; }
.tstate--closed { --tone: #15803d; --tone-bg: #e5f6ea; }
@media (max-width: 960px) {
  .timeline__head, .timeline--status li { grid-template-columns: 120px 1fr; }
}
@media (max-width: 520px) {
  .timeline__head { display: none; }
  .timeline--status li { grid-template-columns: 1fr; row-gap: 10px; }
  .timeline--status li::after { display: none; }
  .tstate { grid-row: auto; }
}

/* index.html, build or buy (feedback-2026-10-20.md § 7): the c.technology bar
   opened up. A lens widens from the bar to the whole track, and under it the
   three months, step by step, on the same ruler. One section, one story. */
.paths__row--us { border-bottom: 0; padding-bottom: 0; }
.paths__zoom { display: grid; grid-template-columns: 3fr 9fr; gap: var(--gutter); padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.paths__zoomtext { align-self: start; display: grid; gap: 6px; padding-top: 64px; }
.paths__zoomtext .label { color: var(--blue); }
.paths__zoomtext p:not(.label) { font-size: 14px; color: var(--slate); max-width: 30ch; }
.paths__lens {
  height: 44px;
  background: linear-gradient(to bottom, rgb(32 211 202 / 0.22), rgb(32 211 202 / 0.04));
  clip-path: polygon(0 0, 8.33% 0, 100% 100%, 0 100%);
}
.paths__zoomtrack .launch { margin-top: 0; }
.paths__zoomtrack .launch p:not(.label) { font-size: 14.5px; }
.paths + .quote--strip { margin-top: 48px; }
@media (max-width: 960px) {
  .paths__zoom { grid-template-columns: 1fr; gap: 20px; }
  .paths__zoomtext { padding-top: 0; }
  .paths__lens { display: none; }
  .paths__zoomtrack .launch { margin-top: 8px; }
}

/* index.html, industries: the whole plate is the link, picture included */
.register--links figure { position: relative; }
.register--links .register__name a::after { content: ""; position: absolute; inset: 0; }
.register--links img { transition: transform .4s cubic-bezier(.2, .7, .2, 1), filter .3s ease; }
.register--links figure:has(a:hover) img, .register--links figure:has(a:focus-visible) img { transform: translateY(-4px); filter: saturate(1.1); }
.register--links figure:has(a:hover) .nudge { transform: translateX(4px); }
.register--links a:focus-visible { outline: none; }
.register--links figure:has(a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .register--links img { transition: none; transform: none !important; } }

/* partner-hub.html, support: one rule under the heading block, not two */
#ticket .groups__list { border-top: 0; }
#ticket .group { border-bottom: 0; padding-top: 0; padding-bottom: 8px; }

/* ── Fabric (index.html, the c.technology fabric) ─────────
   From docs/concepts/fabric-section.html, mapped to the site's tokens:
   --blue is the accent, the signal teal marks what partners pay for, Onest
   and Clash Display for the type. --fx-bg is the band's white: the weave's
   over/under gaps are drawn in it. */
.fabric { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; margin-top: 56px; align-items: center; }
.fabric > * { min-width: 0; }
.fabric {
  --fx-bg: var(--white);
  --fx-surface: var(--white);
  --fx-ink: var(--ink);
  --fx-ink-2: rgb(1 9 43 / 0.78);
  --fx-muted: var(--slate);
  --fx-line: rgb(1 9 43 / 0.16);
  --fx-accent: var(--blue);
  --fx-accent-text: var(--blue);
  --fx-accent-2: #7ea2ff;
  --fx-accent-soft: var(--blue-tint);
  --fx-paid: var(--signal);
  --fx-cloud-1: var(--white);
  --fx-cloud-2: #eef3ff;
}
.fx { margin: 0; }
/* drawn at its own scale (viewBox 480 wide): scaled up, its 1 px hairlines
   land between pixels and the whole figure reads soft */
.fx svg { display: block; width: 100%; height: auto; max-width: 480px; margin: 0 auto; overflow: visible; font-family: var(--text); }

/* The fabric as a plain diagram (2026-10-21 draft): three columns on the
   page's grid. What you build left, partners right, the fabric a framed,
   finely woven layer around your vehicles. Each line runs into the frame
   through a square permission check; metered lines run teal. */
.fmap { margin: 0; }
.fmap__map { --fmap-gap: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--fmap-gap); }
.fmap__head { grid-row: 1; margin-bottom: 12px; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.fmap__head--yours { grid-column: 1; color: var(--blue); }
.fmap__head--partners { grid-column: 3; }
.fmap__col { grid-row: 2; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fmap__col--yours { grid-column: 1; }
.fmap__col--partners { grid-column: 3; }
.fmap__node { position: relative; display: flex; align-items: center; gap: 10px; padding: 22px 16px; border: 1px solid var(--fx-line); border-radius: 10px; background: var(--white); font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.fmap__ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fmap__node .fmap__ico { color: var(--fx-ink-2); }
.fmap__col--yours .fmap__ico { color: var(--blue); }
.fmap__coin { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-left: auto; border-radius: 50%; background: var(--fx-paid); font: normal 700 10.5px/1 var(--text); color: var(--ink); }
/* the line from a node into the fabric, dots moving toward the partner */
.fmap__node::after { content: ""; position: absolute; top: 50%; width: var(--fmap-gap); height: 4px; margin-top: -2px;
  background: radial-gradient(circle, rgb(0 75 255 / .55) 1.3px, transparent 1.8px) 0 50% / 8px 4px repeat-x; animation: fmap-flow 1.2s linear infinite; }
.fmap__col--yours .fmap__node::after { left: 100%; animation-direction: reverse; }
.fmap__col--partners .fmap__node::after { right: 100%; }
.fmap__node--paid::after { background-image: radial-gradient(circle, var(--fx-paid) 1.3px, transparent 1.8px); }
@keyframes fmap-flow { to { background-position: 8px 50%; } }
/* the permission check where the line meets the fabric */
.fmap__gate { position: absolute; z-index: 1; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 1.4px solid var(--blue); border-radius: 3px; background: var(--white); }
.fmap__gate::before { content: ""; position: absolute; left: 3.5px; top: 1.5px; width: 3.5px; height: 6.5px; border: solid var(--blue); border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); }
.fmap__col--yours .fmap__gate { left: calc(100% + var(--fmap-gap) - 7px); }
.fmap__col--partners .fmap__gate { right: calc(100% + var(--fmap-gap) - 7px); }
/* the fabric: a frame with a fine weave, your vehicles in the middle */
.fmap__core { grid-row: 2; grid-column: 2; position: relative; display: grid; align-content: center; padding: 44px 20px 20px; border: 1px solid rgb(0 75 255 / .35); border-radius: 14px;
  background-color: var(--white);
  background-image: linear-gradient(rgb(0 75 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(0 75 255 / .04) 1px, transparent 1px);
  background-size: 9px 9px; }
.fmap__name { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.fmap__platform { display: grid; justify-items: center; gap: 4px; padding: 34px 14px 30px; border: 1px solid var(--fx-line); border-radius: 10px; background: var(--white); text-align: center; }
.fmap__platform > .fmap__ico { width: 18px; height: 18px; margin-bottom: 4px; color: var(--blue); }
.fmap__platform b { font: 500 20px/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); }
.fmap__platform > span { font-size: 12.5px; color: var(--slate); }
.fmap__types { display: flex; gap: 10px; margin-top: 10px; color: var(--ink); }
/* other manufacturers, hanging off the same fabric */
.fmap__others { grid-row: 3; grid-column: 2; position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.fmap__others::before { content: ""; position: absolute; top: -22px; left: 50%; height: 22px; border-left: 1px dashed var(--fx-line); }
.fmap__ghost { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--white); color: var(--slate); opacity: .8; }
.fmap__ghost .fmap__ico { width: 16px; height: 16px; }
.fmap__cap { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--slate); }
@media (max-width: 640px) {
  .fmap__map { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .fmap__map > * { grid-column: 1 !important; grid-row: auto !important; }
  .fmap__head--yours { order: 1; } .fmap__col--yours { order: 2; } .fmap__core { order: 3; }
  .fmap__head--partners { order: 4; margin-top: 24px; } .fmap__col--partners { order: 5; } .fmap__others { order: 6; }
  .fmap__node { padding: 14px 16px; }
  .fmap__col { grid-template-rows: none; gap: 8px; }
  .fmap__core { margin-top: 24px; }
  .fmap__node::after, .fmap__gate { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fmap__node::after { animation: none; } }

.fx-ico { fill: none; stroke: var(--fx-muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fx-ico--accent { stroke: var(--fx-accent); stroke-width: 2; }
.fx-ico--ink { stroke: var(--fx-ink); }
.fx-ico--ghost { stroke: var(--fx-muted); stroke-width: 2; }

.fx-rail { stroke: var(--fx-line); stroke-width: 1.4; fill: none; }
.fx-flow, .fx-pay { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 11; }
.fx-flow { stroke: var(--fx-accent); animation: fx-out 1.8s linear infinite; }
.fx-pay  { stroke: var(--fx-paid);   animation: fx-in 2.4s linear infinite; }
@keyframes fx-out { to { stroke-dashoffset: -11.1; } }
@keyframes fx-in  { to { stroke-dashoffset:  11.1; } }

/* the weave stands still: turning, its strands never sit on the pixel grid */
.fx-band { fill: none; stroke: var(--fx-accent-soft); stroke-width: 24; }
.fx-warp { stroke: var(--fx-accent); stroke-opacity: .16; stroke-width: 1; }
.fx-strand { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.fx-strand--a { stroke: var(--fx-accent); }
.fx-strand--b { stroke: var(--fx-accent-2); }
.fx-gap { fill: none; stroke: var(--fx-accent-soft); stroke-width: 6; }

.fx-fabric { fill: var(--fx-accent-text); font-size: 13px; font-weight: 500; letter-spacing: .06em; }

.fx-gate circle { fill: var(--fx-surface); stroke: var(--fx-accent); stroke-width: 1.4; }
.fx-gate path { fill: none; stroke: var(--fx-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-gate { animation: fx-gate 3.3s ease-in-out infinite; }
@keyframes fx-gate { 0%, 70%, 100% { opacity: .75; } 80% { opacity: 1; } }

.fx-glow { transform-box: fill-box; transform-origin: center; animation: fx-breathe 5s ease-in-out infinite; }
@keyframes fx-breathe { 0%, 100% { opacity: .6; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.fx-cloud { stroke: var(--fx-accent); stroke-width: 1.6; }
.fx-title { fill: var(--fx-ink); font: 500 18px var(--display); letter-spacing: -.01em; }
.fx-sub { fill: var(--fx-muted); font-size: 11px; }

.fx-node circle { stroke-width: 1.4; }
.fx-node--partner circle { fill: var(--fx-surface); stroke: var(--fx-line); }
.fx-node--partner .fx-ico { stroke: var(--fx-ink-2); }
.fx-node--yours circle { fill: var(--fx-accent-soft); stroke: var(--fx-accent); }
.fx-node--yours .fx-ico { stroke: var(--fx-accent); }
.fx-label { fill: var(--fx-ink); font-size: 13px; font-weight: 500; }
.fx-coin circle { fill: var(--fx-paid); stroke: var(--fx-bg); stroke-width: 2; }
.fx-coin text { fill: var(--ink); font-size: 10.5px; font-weight: 700; }

.fx-others { opacity: .7; }
.fx-thread { fill: none; stroke: var(--fx-accent); stroke-opacity: .35; stroke-width: 1.2; stroke-dasharray: 2 3; }
.fx-ghost { fill: var(--fx-surface); stroke: var(--fx-line); stroke-width: 1.2; }
.fx-cap { fill: var(--fx-muted); font-size: 10.5px; }

.fx-legend { list-style: none; padding: 0; margin: 20px auto 0; max-width: 560px;
             display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
             font-size: 13px; color: var(--fx-muted); }
.fx-legend li { display: flex; align-items: center; gap: 8px; }
/* The line swatches are the map's own lines: same dots, same flow. */
.fx-sw { width: 24px; height: 4px; background: radial-gradient(circle, var(--fx-accent) 1.5px, transparent 2px) 0 50% / 8px 4px repeat-x;
         animation: fmap-flow 1.2s linear infinite; }
.fx-sw--paid { background-image: radial-gradient(circle, var(--fx-paid) 1.5px, transparent 2px); }
.fx-sw--gate { width: 11px; height: 11px; border: 1.4px solid var(--fx-accent); border-radius: 3px; background: var(--fx-surface); animation: none; }

.fx-act { max-width: 560px; margin: 18px auto 0; padding: 12px 16px; border-radius: 12px;
          border: 1px solid var(--fx-line); background: var(--fx-surface);
          font-size: 13.5px; line-height: 1.5; color: var(--fx-ink-2); display: flex; gap: 12px; align-items: flex-start; }
.fx-act b { color: var(--fx-ink); font-weight: 600; }
.fx-act__tag { flex: none; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--fx-accent-text);
               border: 1px solid var(--fx-accent); border-radius: 6px; padding: 2px 6px; margin-top: 1px; }
.fx-act a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.fx-act a:hover { text-decoration: underline; }

@media (max-width: 480px) { .fx-act { flex-direction: column; gap: 8px; } }

@media (prefers-reduced-motion: reduce) {
  .fx-flow, .fx-pay, .fx-gate, .fx-glow, .fx-sw { animation: none; }
}
@media (max-width: 960px) { .fabric { grid-template-columns: 1fr; gap: 40px; } }

/* services.html (feedback-2026-10-20.md § 10): the services as cards with the
   web app's service store pictures, three live and the next one coming; the
   booking as steps with badges, like the Partner Hub's support. */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: 56px; }
.svc__card { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); }
.svc__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.svc__body { padding: 18px 20px 0; display: grid; gap: 6px; align-content: start; }
.svc__body h3 { font: 500 20px/1.2 var(--display); }
.svc__body p { font-size: 15px; line-height: 1.45; color: rgb(1 9 43 / 0.75); }
.svc__foot { padding: 16px 20px 18px; }
.svc__card--soon { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.svc__card--soon img { filter: grayscale(1); opacity: 0.55; }
.svc__card--soon h3 { color: var(--slate); }
.story .steps-wrap { grid-column: 3; }
@media (max-width: 1100px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .story .steps-wrap { grid-column: 1; } }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }
.svc + .fine { margin-top: 20px; }

/* vehicle-data.html: the receivers, as cards that all feed one record.
   Live cards are solid with a packet running down their connector; coming
   cards are dashed. Under 1181px the cards wrap, so the connectors go and
   the record bar simply follows. */
.intake { margin-top: 64px; }
.intake__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.intake__card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.intake__card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgb(0 75 255 / 0.45); }
.intake__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px;
  border-radius: 11px; background: var(--blue-tint); color: var(--blue);
}
.intake__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intake__state { display: inline-flex; align-items: center; gap: 8px; color: var(--slate); }
.intake__card h3 { font: 500 21px/1.2 var(--display); letter-spacing: -0.01em; }
.intake__card p:not(.label) { font-size: 14.5px; line-height: 1.45; color: rgb(1 9 43 / 0.74); }
.intake__card .intake__how { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--slate); }

.intake__card--soon { background: transparent; border: 1px dashed var(--line-strong); }
.intake__card--soon:hover { box-shadow: none; }
.intake__card--soon .intake__icon { background: transparent; border: 1px dashed var(--line-strong); color: var(--slate); }
.intake__card--soon .intake__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--slate); box-sizing: border-box; }

/* the connector from each card down to the record */
.intake__card::after {
  content: ""; position: absolute; left: 50%; top: 100%; height: 40px;
  border-left: 1px solid var(--line-strong);
}
.intake__card--soon::after { border-left-style: dashed; }
.intake__pkt {
  position: absolute; left: calc(50% - 3px); top: 100%;
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  opacity: 0; animation: intake-drop 2.4s cubic-bezier(.5, 0, .5, 1) var(--d) infinite;
}
@keyframes intake-drop {
  0% { transform: translateY(0); opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

.intake__rail {
  margin-top: 40px; padding: 26px 32px;
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 8px 28px;
  border-radius: 14px; background: var(--ink); color: var(--white);
}
.intake__rail .label { color: var(--signal); }
.intake__record { font: 500 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -0.01em; }
.intake__sub { justify-self: end; text-align: right; font-size: 14.5px; color: rgb(255 255 255 / 0.66); max-width: 40ch; }
.intake + .fine { margin-top: 24px; }

@media (max-width: 1180px) {
  /* three live across, the two coming under them, both rows full width */
  .intake__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .intake__card--live { grid-column: span 2; }
  .intake__card--soon { grid-column: span 3; }
  .intake__card::after, .intake__pkt { display: none; }
  .intake__rail { margin-top: 16px; grid-template-columns: 1fr; }
  .intake__sub { justify-self: start; text-align: left; }
}
@media (max-width: 760px) {
  .intake__cards { grid-template-columns: minmax(0, 1fr); }
  .intake__card--live, .intake__card--soon { grid-column: auto; }
  .intake__rail { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .intake__pkt { display: none; }
  .intake__card { transition: none; }
  .intake__card:hover { transform: none; }
}

/* vehicle-data.html: what we read, bus by bus. A tab per bus, its fields as
   chips grouped as the documentation groups them. Panes share one grid cell,
   so the block keeps the height of the longest and nothing below moves. */
.buses {
  margin-top: 56px; padding: 36px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
}
.buses__head { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: end; }
.buses__head h3 { margin-top: 8px; font: 500 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -0.01em; }
.buses__head > p { font-size: 15.5px; line-height: 1.5; color: rgb(1 9 43 / 0.74); }
.buses__head .more { white-space: normal; }

.buses__tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.buses__tabs button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.buses__tabs button:hover { border-color: var(--blue); }
.buses__tabs b { font: 500 18px/1.2 var(--display); }
.buses__tabs span { font-size: 13px; line-height: 1.35; color: var(--slate); transition: color .2s ease; }
.buses__tabs em { margin-top: auto; padding-top: 8px; font: 500 11px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; color: var(--blue); }
.buses__tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.buses__tabs button[aria-selected="true"] span { color: rgb(255 255 255 / 0.66); }
.buses__tabs button[aria-selected="true"] em { color: var(--signal); }
.buses__tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.buses__stage { display: grid; margin-top: 24px; }
.buses__pane { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.buses__pane.is-on { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.buses__groups { display: flex; gap: 24px 28px; }
/* each group as wide as its share of the fields (--n, set in the markup) */
.buses__groups > div { flex: var(--n) 1 150px; min-width: 0; }
.buses__groups .label { color: var(--slate); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.buses__groups ul { display: flex; flex-wrap: wrap; gap: 6px; }
.buses__groups li {
  padding: 5px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.3;
}
.buses__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--slate);
}
.buses__pending { max-width: 52ch; font: 400 clamp(18px, 1.6vw, 22px)/1.4 var(--text); color: rgb(1 9 43 / 0.8); margin-bottom: 14px; }

@media (max-width: 1180px) {
  .buses__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .buses__groups { flex-wrap: wrap; }
  .buses__groups > div { flex-basis: 40%; }
}
@media (max-width: 760px) {
  .buses { padding: 22px; }
  .buses__head { grid-template-columns: minmax(0, 1fr); }
  .buses__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buses__groups { flex-direction: column; }
  /* on a phone the empty panes do not hold the full list's height */
  .buses__pane:not(.is-on) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .buses__pane, .buses__tabs button { transition: none; } }


/* vehicle-data.html: the record, a shared base and what is added on top
   (from vehicle-data-base.html). The bus chips link into .buses. */
.vbase { margin-top:64px; }

/* shared base */
.vbase__core { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:center; padding:36px; border-radius:14px; background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.vbase__core::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--blue),var(--signal)); }
.vbase__intro .label { color:var(--signal); }
.vbase__intro h3 { font:500 clamp(26px,2.4vw,34px)/1.08 var(--display); letter-spacing:-.01em; margin:10px 0 12px; }
.vbase__intro p { font-size:14.5px; line-height:1.5; color:rgb(255 255 255 / .7); max-width:36ch; }
.vbase__fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.vbase__field { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:rgb(255 255 255 / .06); border:1px solid var(--line-ink); transition:background .2s, border-color .2s; }
.vbase__field:hover { background:rgb(255 255 255 / .1); border-color:rgb(255 255 255 / .28); }
.vbase__field span:last-child { display:flex; flex-direction:column; gap:2px; min-width:0; }
.vbase__field b { font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgb(255 255 255 / .58); }
.vbase__field em { font-style:normal; font-size:15px; font-weight:500; line-height:1.25; color:var(--white); }
.vbase__field--meta { grid-column:1 / -1; background:transparent; border-style:dashed; padding:10px 14px; }
.vbase__field--meta .vbase__ico { background:rgb(32 211 202 / .16); color:var(--signal); }
.vbase__field--meta em { color:rgb(255 255 255 / .78); font-weight:400; font-size:14px; }
.vbase__field--meta span:last-child { flex-direction:row; align-items:baseline; gap:12px; flex-wrap:wrap; }
.vbase__ico { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:9px; background:rgb(0 75 255 / .28); color:#8fb0ff; }
.vbase__ico svg, .vbase__aico svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* branch: one stem from the base, splitting into three */
.vbase__branch { position:relative; height:56px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.vbase__branch::before { content:""; position:absolute; left:calc(100% / 6); right:calc(100% / 6); top:24px; border-top:1px dashed var(--line-strong); }
.vbase__branch span { position:relative; }
.vbase__branch span::before { content:""; position:absolute; left:50%; top:24px; bottom:0; border-left:1px dashed var(--line-strong); }
.vbase__branch span:nth-child(2)::after { content:""; position:absolute; left:50%; top:0; height:24px; border-left:1px dashed var(--line-strong); }
.vbase__plus { position:absolute; left:50%; top:24px; transform:translate(-50%,-50%); display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--white); border:1px solid var(--blue); color:var(--blue); font:500 16px/1 var(--text); z-index:1; }
.vbase__branch i { position:absolute; left:calc(50% - 3px); top:0; width:7px; height:7px; border-radius:50%; background:var(--signal); opacity:0; animation:vbase-drop 2.6s cubic-bezier(.5,0,.5,1) var(--d,0s) infinite; }

/* additions */
.vbase__adds { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.vbase__add { display:flex; flex-direction:column; gap:10px; padding:22px 22px 20px; border-radius:14px; background:var(--white); border:1px dashed rgb(0 75 255 / .45); transition:border-color .2s, transform .2s, box-shadow .2s; }
.vbase__add:hover { border-style:solid; border-color:var(--blue); transform:translateY(-3px); box-shadow:rgb(0 75 255 / .45) 0 14px 30px -18px; }
.vbase__atop { display:flex; align-items:center; justify-content:space-between; }
.vbase__aico { display:grid; place-items:center; width:44px; height:44px; border-radius:11px; background:var(--blue-tint); color:var(--blue); }
.vbase__aico svg { width:23px; height:23px; }
.vbase__atop .label { color:var(--slate); }
.vbase__add h3 { font:500 21px/1.2 var(--display); letter-spacing:-.01em; margin-top:6px; }
.vbase__add > p { font-size:14.5px; line-height:1.45; color:rgb(1 9 43 / .74); }
.vbase__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.vbase__chips li { display:inline-flex; align-items:baseline; gap:6px; padding:5px 11px; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-size:12.5px; font-weight:500; white-space:nowrap; }
.vbase__chips small { font-size:11px; font-weight:400; color:var(--slate); }

@keyframes vbase-drop { 0% { opacity:0; transform:translateY(0); } 15% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; transform:translateY(48px); } }

@media (max-width:1180px) {
  .vbase__core { grid-template-columns:minmax(0,1fr); gap:28px; }
  .vbase__intro p { max-width:56ch; }
}
@media (max-width:760px) {
  .vbase { margin-top:40px; }
  .vbase__core { padding:24px 20px; }
  .vbase__fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .vbase__field { padding:11px; gap:10px; }
  .vbase__field em { font-size:13.5px; } .vbase__field:nth-child(9) { grid-column:1 / -1; } .vbase__field b { font-size:10.5px; }
  .vbase__ico { width:30px; height:30px; }
  .vbase__branch { grid-template-columns:minmax(0,1fr); height:44px; }
  .vbase__branch::before, .vbase__branch span:not(:nth-child(2)) { display:none; }
  .vbase__branch span:nth-child(2)::before { display:none; }
  .vbase__branch span:nth-child(2)::after { height:100%; }
  .vbase__plus { top:50%; }
  .vbase__adds { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .vbase__branch i { display:none; }
  .vbase__add, .vbase__field { transition:none; } .vbase__add:hover { transform:none; }
}
.vbase__rules { display: grid; gap: 6px; margin-top: 16px; font-size: 13.5px; color: rgb(255 255 255 / .78); }
.vbase__rules li { display: flex; gap: 8px; }
.vbase__rules li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--signal); }
.vbase__intro .vbase__demo { margin-top: 20px; color: rgb(255 255 255 / .5); }
.vbase__demo .todo { color: var(--signal); }
.vbase__chips a { display: inline-flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.vbase__chips li:has(a) { transition: border-color .2s, color .2s; }
.vbase__chips li:has(a):hover { border-color: var(--blue); color: var(--blue); }

/* vehicle-data.html: master data, before and after. The files a manufacturer
   keeps today on the left, the database on the right; hovering a row lifts
   the file it came from, and the other way round (:has, one rule per key). */
.master { display: grid; grid-template-columns: minmax(0, 4fr) 156px minmax(0, 7fr); align-items: stretch; margin-top: 64px; }
.master__today { display: flex; flex-direction: column; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 18px; background: var(--paper); }
.master__pile { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-evenly; gap: 14px; margin-top: 18px; }
/* a loose stack: compact rows, offset left and right */
.master__pile .master__file { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.master__pile .master__file:nth-child(odd) { margin-right: 36px; }
.master__pile .master__file:nth-child(even) { margin-left: 36px; }
.master__pile .master__ext { grid-row: span 2; align-self: center; margin-bottom: 0; }
.master__file {
  display: flex; flex-direction: column; gap: 4px; padding: 14px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 14px -10px rgb(1 9 43 / .35);
  transform: rotate(var(--r)); transition: transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.master__file b { font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.master__file small { font-size: 12px; color: var(--slate); }
.master__ext { align-self: flex-start; margin-bottom: 6px; padding: 2px 7px; border-radius: 5px; font: 600 10.5px/1.4 var(--text); letter-spacing: .06em; }
.master__ext--pdf { background: rgb(214 52 58 / .1); color: #b4262c; }
.master__ext--xlsx { background: rgb(22 140 74 / .1); color: #157a43; }
.master__ext--csv { background: var(--blue-tint); color: var(--blue-deep); }

.master__arrow { position: relative; display: grid; place-items: center; }
.master__arrow::before { content: ""; position: absolute; left: 14px; right: 18px; top: 50%; border-top: 1px dashed var(--line-strong); }
.master__arrow::after { content: ""; position: absolute; right: 14px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid var(--blue); border-right: 0; }
.master__arrow span { position: relative; max-width: 116px; padding: 6px 0; background: var(--white); font: 500 11.5px/1.35 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); text-align: center; }

.master__db { border: 1px solid var(--line); border-radius: 18px; background: var(--white); overflow: hidden; box-shadow: 0 24px 48px -36px rgb(1 9 43 / .45); }
.master__dbhead { display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px; background: var(--ink); color: var(--white); }
.master__dbhead .label:first-child { color: var(--signal); }
.master__dbhead .label--muted { color: rgb(255 255 255 / .55); }
.master__row {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 22px; border-top: 1px solid var(--line); transition: background .2s ease;
}
.master__dbhead + .master__rows .master__row:first-child { border-top: 0; }
.master__row b { font: 500 17px/1.2 var(--display); }
.master__row div p { margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: rgb(1 9 43 / .7); }
.master__shape { display: flex; flex-wrap: wrap; gap: 4px; }
.master__shape span { padding: 3px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.master__from { font-size: 12px; line-height: 1.35; color: var(--slate); }
.master__from em { font-style: normal; color: var(--ink); overflow-wrap: anywhere; }
.master__row[data-k="own"] { border-top-style: dashed; }
.master__row[data-k="own"] b, .master__row[data-k="own"] .master__from em { color: var(--blue); }
.master__row[data-k="own"] .master__shape span { border-style: dashed; background: transparent; }

.master__row:hover { background: rgb(225 235 255 / .5); }
.master:has([data-k="range"]:hover) [data-k="range"],
.master:has([data-k="parts"]:hover) [data-k="parts"],
.master:has([data-k="vehicles"]:hover) [data-k="vehicles"],
.master:has([data-k="codes"]:hover) [data-k="codes"],
.master:has([data-k="plans"]:hover) [data-k="plans"],
.master:has([data-k="partners"]:hover) [data-k="partners"] { background: rgb(225 235 255 / .5); }
.master:has([data-k="range"]:hover) .master__file[data-k="range"],
.master:has([data-k="parts"]:hover) .master__file[data-k="parts"],
.master:has([data-k="vehicles"]:hover) .master__file[data-k="vehicles"],
.master:has([data-k="codes"]:hover) .master__file[data-k="codes"],
.master:has([data-k="plans"]:hover) .master__file[data-k="plans"],
.master:has([data-k="partners"]:hover) .master__file[data-k="partners"] {
  background: var(--white); border-color: var(--blue); transform: rotate(0) translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px -18px rgb(0 75 255 / .55);
}

.master__promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.master__promise li { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--ink); }
.master__promise b { font: 500 19px/1.25 var(--display); }
.master__promise span { font-size: 14.5px; line-height: 1.5; color: rgb(1 9 43 / .74); }
.master__promise + .fine { margin-top: 32px; }

@media (max-width: 1180px) {
  .master { grid-template-columns: minmax(0, 1fr); }
  .master__pile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .master__pile .master__file:nth-child(n) { margin: 0; }
  .master__arrow { height: 88px; }
  .master__arrow::before { left: 50%; right: auto; top: 10px; bottom: 16px; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .master__arrow::after { right: auto; left: calc(50% - 5px); top: auto; bottom: 10px; border: 5px solid transparent; border-top: 7px solid var(--blue); border-bottom: 0; }
  .master__arrow span { max-width: none; padding: 4px 10px; }
}
@media (max-width: 760px) {
  .master__today { padding: 18px; }
  .master__pile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .master__pile .master__file { display: flex; align-items: stretch; }
  .master__pile .master__ext { align-self: flex-start; margin-bottom: 6px; }
  .master__row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 18px; }
  .master__dbhead { padding: 14px 18px; flex-direction: column; gap: 2px; }
  .master__promise { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .master__file { transition: none; } }

/* vehicle-data.html: the APIs, the receivers figure in reverse. The record
   on top, connectors going down into the ways out, packets running down. */
.intake--out .intake__rail { margin-top: 0; margin-bottom: 40px; }
.intake--out .intake__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.intake--out .intake__card::after { top: auto; bottom: 100%; }
.intake--out .intake__pkt { top: -40px; }
.intake__code {
  margin-top: auto; padding: 10px 12px; border-radius: 8px;
  background: var(--ink); color: rgb(255 255 255 / .82);
  font: 400 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.intake__code span { color: var(--signal); font-weight: 600; margin-right: 4px; }
.intake__blink { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--signal); vertical-align: 1px; animation: intake-blink 1.6s ease-in-out infinite; }
@keyframes intake-blink { 50% { opacity: .2; } }
.intake__keys { margin-top: 24px; }

.further {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center;
  margin-top: 40px; padding: 28px 32px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--line);
}
.further .label { color: var(--blue); margin-bottom: 8px; }
.further p:not(.label) { font-size: 15.5px; line-height: 1.5; color: rgb(1 9 43 / .78); max-width: 70ch; }
.further__links { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.further__go, .further__ref {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-radius: 999px;
  font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s;
}
.further__go { background: var(--blue); color: var(--white); }
.further__go:hover { background: var(--blue-deep); }
.further__ref { border: 1px solid var(--line-strong); color: var(--ink); }
.further__ref:hover { border-color: var(--blue); color: var(--blue); }

/* vehicle-data.html: a firmware rollout, state by state, left to right, in
   the support flow's pills (.tstate). One line runs through the pills. */
.rollout { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.6fr 1.2fr; gap: 24px; margin-top: 64px; }
/* one segment per step, from its pill to the next, so the line ends at Applied */
.rollout__step:not(:last-child)::before { content: ""; position: absolute; left: 0; right: -9px; top: 14px; border-top: 1px solid var(--line-strong); }
.rollout__step { position: relative; display: flex; flex-direction: column; gap: 8px; }
.rollout__step .tstate { box-shadow: 0 0 0 6px var(--white); margin-bottom: 14px; z-index: 1; }
.rollout__step:not(:last-child)::after {
  /* the head starts where the line stops (both translucent, so no overlap), its
     tip 8px short of the next pill; both centred on the pill (28.8px) */
  content: ""; position: absolute; right: -16px; top: 9.5px;
  border: 5px solid transparent; border-left: 7px solid var(--line-strong); border-right: 0;
}
.rollout__step .label { color: var(--blue); }
.rollout__step h3 { font: 500 21px/1.2 var(--display); }
.rollout__step > p:not(.label) { font-size: 15px; line-height: 1.5; color: rgb(1 9 43 / .72); }
.tstate--draft { --tone: #4a5568; --tone-bg: #eef0f4; }

.rollout__paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.rollout__paths > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.rollout__paths > div + div { border-style: dashed; }
.rollout__paths b { font: 500 15.5px/1.25 var(--display); }
.rollout__paths p { font-size: 13.5px; line-height: 1.45; color: rgb(1 9 43 / .72); }
.rollout__paths small { margin-top: auto; padding-top: 8px; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

.rollout__meter { margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--ink); color: var(--white); }
.rollout__meter p { font-size: 13.5px; }
.rollout__meter p b { font-weight: 500; }
.rollout__meter > span { display: block; height: 6px; margin: 10px 0 8px; border-radius: 3px; background: rgb(255 255 255 / .12); overflow: hidden; }
.rollout__meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--signal)); }
.rollout__meter .rollout__count { font-size: 12px; color: rgb(255 255 255 / .6); }
.rollout__meter .todo { color: var(--signal); }
.rollout + .fine { margin-top: 32px; }

@media (max-width: 1180px) {
  .intake--out .intake__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake--out .intake__card { grid-column: auto; }
  .intake--out .intake__rail { margin-bottom: 16px; }
  .further { grid-template-columns: minmax(0, 1fr); }
  .further__links { flex-direction: row; flex-wrap: wrap; }
  .rollout { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .rollout__step::before, .rollout__step::after { display: none; }
  .rollout__step--fork { grid-column: 1 / -1; grid-row: 2; }
  .rollout__step:last-child { grid-row: 3; grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 760px) {
  .intake--out .intake__cards { grid-template-columns: minmax(0, 1fr); }
  .further { padding: 22px; }
  .rollout { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .rollout__step--fork, .rollout__step:last-child { grid-row: auto; }
  .rollout__paths { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .intake__blink { animation: none; } }

/* access.html 01: three gates, a request runs through them left to right */
.gates { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 64px; }
.gates__in, .gates__out {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 999px; font-size: 14.5px; background: var(--white); border: 1px solid var(--line);
}
.gates__in .label { color: var(--blue); }
.gates__out { justify-self: end; background: var(--ink); color: var(--white); border-color: var(--ink); }
.gates__out .label { color: var(--signal); }
.gates__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 36px 0; }
/* the request's path: from the request, through every gate, out to the answer */
.gates__list::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--blue); z-index: 0; }
.gate {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 20px 40px -32px rgb(1 9 43 / .45);
}
.gate__tag { display: inline-flex; align-items: center; gap: 10px; font: 500 11.5px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.gate__tag span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: var(--white); font: 600 13px/1 var(--text); letter-spacing: 0; }
.gate h3 { font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--display); letter-spacing: -.01em; }
.gate p:not([class]) { font-size: 15px; line-height: 1.5; color: rgb(1 9 43 / .72); }
.gate__no {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong);
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #b4262c;
}
.gate__no::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%); }

/* access.html 02: roles by who may hold them, the owner in the middle */
.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); column-gap: 28px; align-items: center; margin-top: 64px; }
.roles__side { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.roles__side--org { border-style: dashed; background: transparent; }
.roles__side ul { display: grid; gap: 8px; margin-top: 14px; }
.roles__side li { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.roles__side li b { font: 500 17px/1.25 var(--display); }
.roles__side li span { font-size: 14px; line-height: 1.45; color: rgb(1 9 43 / .7); }
.roles__owner {
  position: relative; z-index: 1; margin: 0 -1px; padding: 32px 28px; border-radius: 20px; text-align: center;
  background: var(--ink); color: var(--white); box-shadow: 0 30px 60px -36px rgb(0 75 255 / .6);
}
/* the owner reaches both sides */
.roles__owner::before, .roles__owner::after { content: ""; position: absolute; top: 50%; width: 28px; border-top: 2px solid var(--blue); }
.roles__owner::before { right: 100%; } .roles__owner::after { left: 100%; }
.roles__owner .label { color: var(--signal); }
.roles__owner h3 { margin: 10px 0 8px; font: 500 clamp(30px, 3vw, 40px)/1.05 var(--display); letter-spacing: -.015em; }
.roles__owner p:not(.label) { font-size: 15px; line-height: 1.5; color: rgb(255 255 255 / .74); }
.roles__lock { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--slate); }
.roles__lock::before { content: ""; width: 9px; height: 7px; margin-top: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 -4px 0 -1px transparent; outline: 1.5px solid currentColor; outline-offset: -1.5px; }
.roles__owner .roles__lock { margin-top: 14px; color: rgb(255 255 255 / .55); }
.roles__side li .roles__lock { position: absolute; top: 12px; right: 14px; }

.vwin { margin-top: 56px; padding: 32px; border-radius: 18px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 24px 48px -40px rgb(1 9 43 / .4); }
.vwin__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: end; }
.vwin__head h3 { font: 500 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.01em; }
.vwin__head p { font-size: 15.5px; line-height: 1.5; color: rgb(1 9 43 / .74); }
.vwin__axis, .vwin__rows li { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 20px; align-items: center; }
.vwin__axis { position: relative; display: block; height: 20px; margin: 32px 240px 0 220px; font: 500 11px/1.4 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.vwin__axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.vwin__axis span:first-child { transform: none; } .vwin__axis span:nth-last-child(2) { transform: translateX(-100%); }
.vwin__axis .vwin__today { color: var(--blue); }
.vwin__rows { position: relative; display: grid; }
.vwin__rows li { padding: 14px 0; border-top: 1px solid var(--line); }
.vwin__who { display: grid; gap: 2px; }
.vwin__who b { font: 500 16px/1.25 var(--display); }
.vwin__who span { font-size: 13px; color: var(--slate); }
.vwin__track { position: relative; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 10px); }
.vwin__track::after { content: ""; position: absolute; left: var(--today); top: -16px; bottom: -16px; border-left: 1.5px solid var(--blue); }
.vwin__track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: var(--blue); }
.vwin__track i.open { border-radius: 6px 0 0 6px; background: linear-gradient(90deg, var(--blue) 85%, rgb(0 75 255 / 0)); }
.vwin__row--ended .vwin__track i { background: var(--line-strong); }
.vwin__row--scheduled .vwin__track i { background: transparent; border: 1.5px dashed #c2410c; }
.vwin__when { font-size: 13.5px; line-height: 1.4; color: rgb(1 9 43 / .74); }
.vwin__st { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font: 600 11.5px/1.4 var(--text); background: #e5f6ea; color: #15803d; }
.vwin__row--ended .vwin__st { background: #eef0f4; color: #4a5568; }
.vwin__row--scheduled .vwin__st { background: #fdeee8; color: #c2410c; }
.vwin .shot__cap { margin-top: 16px; }
.roles__fine { margin-top: 24px; }

/* access.html 03: the history window. Two radios, :has() dims what the
   chosen grant does not reach (data-new / data-prev on every item). */
.sees__off--service { --w: 9.5em; }
.hw { margin-top: 72px; padding: 32px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.hw__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; }
.hw__head .label { grid-column: 1 / -1; color: var(--blue); }
.hw__head h3 { font: 500 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.01em; }
.hw__head > p:last-child { font-size: 15.5px; line-height: 1.5; color: rgb(1 9 43 / .74); }
.hw__pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hw__pick input { position: absolute; opacity: 0; pointer-events: none; }
.hw__pick label { display: grid; gap: 2px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-strong); cursor: pointer; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.hw__pick label small { font-size: 12.5px; font-weight: 400; color: var(--slate); }
.hw__pick label:hover { border-color: var(--blue); }
.hw__pick input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hw__pick input:checked + label small { color: rgb(255 255 255 / .6); }
.hw__pick input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

.hw__chart { position: relative; margin-top: 24px; }
.hw__lane { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.hw__lane p { display: grid; gap: 2px; }
.hw__lane b { font: 500 16px/1.25 var(--display); }
.hw__lane span { font-size: 13px; line-height: 1.4; color: var(--slate); }
.hw__track { position: relative; height: 28px; }
.hw__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
/* the window: shaded on the chosen side of the sale */
.hw__track::after { content: ""; position: absolute; top: -10px; bottom: -10px; background: rgb(0 75 255 / .06); border: 1px solid rgb(0 75 255 / .25); border-width: 0 1px; transition: left .35s ease, right .35s ease; left: var(--sale); right: 0; }
.hw:has(#hw-prev:checked) .hw__track::after { left: 0; right: calc(100% - var(--sale)); }
.hw__dot, .hw__trip, .hw__svc { position: absolute; top: 50%; z-index: 1; transition: opacity .3s ease, background .3s ease, border-color .3s ease; }
.hw__dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--blue); }
.hw__trip { height: 10px; margin-top: -5px; border-radius: 5px; background: var(--blue); }
.hw__svc { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: var(--signal); transform: rotate(45deg); }
.hw:has(#hw-new:checked) [data-new="off"], .hw:has(#hw-prev:checked) [data-prev="off"] { opacity: .22; background: var(--slate); }
.hw__axis { position: relative; height: 22px; margin-left: 264px; border-top: 1px solid var(--line); padding-top: 6px; font: 500 11px/1.4 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.hw__axis span { position: absolute; top: 8px; white-space: nowrap; }
.hw__axis .hw__sale { transform: translateX(-50%); color: var(--ink); }
.hw__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 80ch; }

@media (max-width: 1180px) {
  .gates__list { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .gates__list::after { left: 28px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px solid var(--blue); }
  .gates__out { justify-self: start; }
  .roles { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .roles__owner { order: -1; }
  .roles__owner::before, .roles__owner::after { display: none; }
  .vwin__head, .hw__head { grid-template-columns: minmax(0, 1fr); }
  .vwin__axis { margin-left: 0; margin-right: 0; }
  .vwin__rows li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vwin__track { order: 2; }
  .hw__lane { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hw__axis { margin-left: 0; }
}
@media (max-width: 760px) {
  .vwin, .hw { padding: 22px; }
  .gate { padding: 20px; }
  .vwin__axis span:not(.vwin__today):not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hw__track::after, .hw__dot, .hw__trip, .hw__svc { transition: none; } }
/* the request drops into the first gate, the answer comes out of the last */
.gates__in, .gates__out { position: relative; }
.gates__in::after, .gates__out::before { content: ""; position: absolute; height: 36px; border-left: 2px solid var(--blue); }
.gates__in::after { left: 40px; top: 100%; }
.gates__out::before { right: 40px; bottom: 100%; }
@media (max-width: 1180px) { .gates__in::after { left: 27px; } .gates__out::before { left: 27px; right: auto; height: 24px; } .gates__list { padding: 24px 0; } }

/* access.html 04: one grant, in the rollout's pill flow, each step with what
   it does to the data */
.rollout--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grant__mini { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 8px; }
.grant__mini p { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.grant__mini p span { color: var(--slate); }
.grant__mini b { font-weight: 500; }
.grant__by { font-size: 12.5px !important; color: var(--slate); }
.grant__off { width: 72px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--slate) 0 1.5px, transparent 1.5px 5px); opacity: .7; }
.grant__mini--cut { border-color: rgb(196 50 10 / .3); background: #fdf4f0; }
.grant__mini--cut b { color: #c4320a; }
.grant__mini--log p { justify-content: flex-start; font-size: 12.5px; color: var(--ink); }
.grant__mini--log p span { flex: none; width: 34px; font-variant-numeric: tabular-nums; }
.grant__api { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 40px; padding: 18px 24px; border-radius: 14px; background: var(--ink); color: rgb(255 255 255 / .86); font-size: 15px; }
.grant__api .label { color: var(--signal); }
@media (max-width: 1180px) {
  .rollout--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rollout--even .rollout__step { grid-row: auto !important; grid-column: auto !important; max-width: none !important; }
}
@media (max-width: 760px) { .rollout--even { grid-template-columns: minmax(0, 1fr); } }
.hw__err { position: absolute; top: 50%; z-index: 1; width: 0; height: 0; margin: -8px 0 0 -8px; border: 8px solid transparent; border-bottom: 14px solid #c4320a; border-top: 0; transition: opacity .3s ease; }
.hw:has(#hw-new:checked) .hw__err[data-new="off"], .hw:has(#hw-prev:checked) .hw__err[data-prev="off"] { opacity: .22; background: none; border-bottom-color: var(--slate); }
/* service and errors: the window's start does not apply, the whole past is in it */
.hw__lane--book .hw__track::after { left: 0; }

/* access.html 05: sharing, the dialog as the picture. Pick who gets it on the
   left; :has() lights up the vehicles and people it reaches on the right. */
.share { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; margin-top: 64px; align-items: start; }
.share__pick { display: grid; gap: 8px; }
.share__pick .label { margin-top: 12px; }
.share__pick .label:first-child { margin-top: 0; }
.share__pick input { position: absolute; opacity: 0; pointer-events: none; }
.share__pick label { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.share__pick label b { display: flex; align-items: center; gap: 8px; font: 500 16.5px/1.25 var(--display); }
.share__pick label b em { font: 600 10.5px/1.4 var(--text); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--signal); color: var(--ink); }
.share__pick label small { font-size: 13px; color: var(--slate); }
.share__pick label:hover { border-color: var(--blue); }
.share__pick input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.share__pick input:checked + label small { color: rgb(255 255 255 / .62); }
.share__pick input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

.share__stage { display: grid; gap: 12px; padding: 28px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 24px 48px -40px rgb(1 9 43 / .45); }
.share__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.share__item .label { color: var(--blue); }
.share__item b { font: 500 21px/1.2 var(--display); }
.share__item span:last-child { font-size: 14px; color: var(--slate); }
.share__stage > .label { margin-top: 8px; }
.share__vehs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.share__veh { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.share__veh b { font: 500 15.5px/1.25 var(--display); }
.share__veh span { font-size: 12.5px; color: var(--slate); }
.share__veh em { justify-self: start; margin-top: 6px; padding: 1px 8px; border-radius: 999px; font: 500 11.5px/1.5 var(--text); font-style: normal; background: var(--white); border: 1px solid var(--line); color: var(--slate); }
.share__ppl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.share__who { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.share__who span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); font: 600 12px/1 var(--text); }
.share__who b { font-size: 13px; font-weight: 500; line-height: 1.25; }
.share__who small { font-size: 11.5px; line-height: 1.3; color: var(--slate); }
.share__veh, .share__who { opacity: .35; transition: opacity .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; }
.share__res { display: none; margin-top: 8px; padding: 14px 16px; border-radius: 12px; background: var(--ink); color: rgb(255 255 255 / .88); font-size: 15px; line-height: 1.5; }
.share__item--p { display: none; }
.share:has(#sh-me:checked) .share__item--o, .share:has(#sh-all:checked) .share__item--o { display: none; }
.share:has(#sh-me:checked) .share__item--p, .share:has(#sh-all:checked) .share__item--p { display: flex; }
.share__fine { margin-top: 24px; max-width: 80ch; }
.share:has(#sh-org:checked) [data-k~="org"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-org:checked) [data-res="org"] { display: block; }
.share:has(#sh-range:checked) [data-k~="range"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-range:checked) [data-res="range"] { display: block; }
.share:has(#sh-group:checked) [data-k~="group"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-group:checked) [data-res="group"] { display: block; }
.share:has(#sh-vehicles:checked) [data-k~="vehicles"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-vehicles:checked) [data-res="vehicles"] { display: block; }
.share:has(#sh-people:checked) [data-k~="people"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-people:checked) [data-res="people"] { display: block; }
.share:has(#sh-me:checked) [data-k~="me"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-me:checked) [data-res="me"] { display: block; }
.share:has(#sh-all:checked) [data-k~="all"] { opacity: 1; border-color: var(--blue); background: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgb(0 75 255 / .55); }
.share:has(#sh-all:checked) [data-res="all"] { display: block; }
@media (max-width: 1180px) { .share { grid-template-columns: minmax(0, 1fr); } .share__pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share__pick .label { grid-column: 1 / -1; } }
@media (max-width: 760px) { .share__pick { grid-template-columns: minmax(0, 1fr); } .share__stage { padding: 18px; } .share__vehs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .share__ppl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .share__veh, .share__who { transition: none; } }

/* apis.html 01: the API in three groups (what it does, who may call it,
   for AI), then the point of it, one prompt away */
.apigroup { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 48px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ink); }
.split + .apigroup { margin-top: 64px; }
.apigroup__head .label { color: var(--blue); margin-bottom: 8px; }
.apigroup__head h3 { font: 500 clamp(22px, 2vw, 27px)/1.15 var(--display); letter-spacing: -.01em; }
.apigroup__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.apigroup__items > div { padding: 0 0 24px; }
.apigroup__items > div:nth-child(n+3) { padding-top: 24px; border-top: 1px solid var(--line); }
.apigroup__items h4 { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font: 500 20px/1.25 var(--display); }
.apigroup__items p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: rgb(1 9 43 / .75); max-width: 56ch; }
.apigroup__items a { color: var(--blue); text-decoration: none; font-weight: 500; }
.apigroup__items a:hover { text-decoration: underline; }

.oneprompt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 56px; margin-top: 56px; padding: 40px; border-radius: 20px; background: var(--ink); color: var(--white); }
.oneprompt__text .label { color: var(--signal); }
.oneprompt__text h3 { margin: 10px 0 14px; font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.015em; }
.oneprompt__text > p:not(.label):not(.oneprompt__next) { font-size: 16.5px; line-height: 1.55; color: rgb(255 255 255 / .76); }
.oneprompt__next { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-ink); font-size: 14.5px; color: rgb(255 255 255 / .7); }
.oneprompt__next .tag { color: rgb(255 255 255 / .7); border-color: rgb(255 255 255 / .35); }
.oneprompt .transcript { grid-column: auto; }
@media (max-width: 1180px) { .apigroup, .oneprompt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .apigroup__items { grid-template-columns: minmax(0, 1fr); } .apigroup__items > div:nth-child(n+2) { padding-top: 24px; border-top: 1px solid var(--line); } .oneprompt { padding: 24px; } }

/* apis.html 02: the fabric. One vehicle in the middle, ringed by the three
   checks; every party around it says who allowed it. */
.fab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 64px 0 0; }
.fab__side { display: grid; gap: 14px; }
.fab__party { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.fab__party b { font: 500 17px/1.25 var(--display); }
.fab__party span { font-size: 14px; line-height: 1.45; color: rgb(1 9 43 / .72); }
.fab__party em { justify-self: start; margin-top: 6px; padding: 2px 9px; border-radius: 999px; font: 500 11px/1.5 var(--text); font-style: normal; letter-spacing: .06em; text-transform: uppercase; background: var(--blue-tint); color: var(--blue-deep); }
.fab__party--you { border-color: var(--blue); }
.fab__party--you em { background: var(--blue); color: var(--white); }
.fab__party--owner em { background: #e5f6ea; color: #15803d; }
/* each party's line into the vehicle */
.fab__party::after { content: ""; position: absolute; top: 50%; width: 48px; border-top: 1.5px dashed var(--line-strong); }
.fab__side--l .fab__party::after { left: 100%; }
.fab__side--r .fab__party::after { right: 100%; }
.fab__hub { position: relative; display: grid; justify-items: center; gap: 16px; padding: 28px 20px; border-radius: 50%; aspect-ratio: 1; align-content: center; text-align: center; background: radial-gradient(circle, rgb(0 75 255 / .08) 0 60%, transparent 61%), var(--white); border: 1px solid var(--line); box-shadow: 0 0 0 14px rgb(0 75 255 / .04), 0 0 0 15px rgb(0 75 255 / .12); z-index: 1; }
.fab__core { display: grid; gap: 4px; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: var(--white); }
.fab__core .label { color: var(--signal); }
.fab__name { font: 500 18px/1.2 var(--display); }
.fab__checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; counter-reset: c; }
.fab__checks li { counter-increment: c; padding: 3px 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--blue); font: 500 12px/1.5 var(--text); color: var(--blue); }
.fab__checks li::before { content: counter(c) " "; font-weight: 600; }
.fab__note { max-width: 18ch; font-size: 12.5px; line-height: 1.4; color: var(--slate); }

.fab__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.fab__points > div { padding-top: 18px; border-top: 1px solid var(--ink); }
.fab__points h3 { font: 500 21px/1.25 var(--display); }
.fab__points p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: rgb(1 9 43 / .76); }
.fab__points .more { white-space: normal; }

@media (max-width: 1180px) {
  .fab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .fab__hub { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(320px, 100%); }
  .fab__party::after { display: none; }
  .fab__points { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) { .fab { grid-template-columns: minmax(0, 1fr); } }

/* apis.html 03: today and next, then the three checks with the price on
   entitlement, still to come */
.fleets { margin-top: 64px; }
.ai > .fleets__body { gap: 0; }
.fleets__when { color: var(--signal); margin: 0 0 10px; }
.fleets__when + .points { margin-bottom: 32px; }
.fleets__when + .points li:last-child { border-bottom: 1px solid var(--line-ink); }
.fleets__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fleets__checks li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-ink); background: rgb(255 255 255 / .04); }
.fleets__checks b { font: 500 15px/1.25 var(--display); color: var(--white); }
.fleets__checks span { font-size: 13px; line-height: 1.4; color: rgb(255 255 255 / .66); }
.fleets__checks li.is-next { border-style: dashed; border-color: var(--signal); }
.fleets__checks li.is-next b { color: var(--signal); }
.fleets__act { margin-top: 20px; font-size: 14px; line-height: 1.5; color: rgb(255 255 255 / .62); }
@media (max-width: 760px) { .fleets__checks { grid-template-columns: minmax(0, 1fr); } }

/* the fabric: the top and bottom lines reach the curve of the circle; any
   extra runs behind it */
.fab__side .fab__party:first-child::after, .fab__side .fab__party:last-child::after { width: 128px; }

/* apis.html 04: a light pass on the stack. Rounded like the rest, examples
   in "Yours", the parts as switches with three on. */
.stack__layers .layer { border-radius: 14px; }
.stack__layers .layer--api { border-radius: 0; }
.layer--yours { background: var(--white); }
.layer--yours ul { margin-top: 12px; }
.layer__switches li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 6px; background: rgb(255 255 255 / .06) !important; color: rgb(255 255 255 / .6); }
.layer__switches li::before { content: ""; width: 22px; height: 12px; border-radius: 6px; background: rgb(255 255 255 / .18) radial-gradient(circle at 6px 6px, rgb(255 255 255 / .7) 0 4px, transparent 4.5px); }
.layer__switches li.is-on { color: var(--white); background: rgb(32 211 202 / .14) !important; }
.layer__switches li.is-on::before { background: var(--signal) radial-gradient(circle at 16px 6px, var(--white) 0 4px, transparent 4.5px); }

/* apis.html 05: what stays yours, the data and the brand */
.keep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.keep__main { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.keep__main > .label { color: var(--blue); }
.keep__main h3 { font: 500 clamp(22px, 2.1vw, 28px)/1.15 var(--display); letter-spacing: -.01em; }
.keep__main > p:not(.label) { font-size: 15.5px; line-height: 1.55; color: rgb(1 9 43 / .76); }
.keep__split { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; margin-top: 4px; }
.keep__split > div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; }
.keep__split b { font: 500 15px/1.25 var(--display); }
.keep__split span { font-size: 13px; line-height: 1.4; }
.keep__you { background: var(--ink); color: var(--white); }
.keep__you span { color: rgb(255 255 255 / .7); }
.keep__owner { background: #e5f6ea; color: #14532d; border: 1px solid rgb(21 128 61 / .25); }
.keep__law { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px !important; }
.keep__main--brand { background: var(--ink); color: var(--white); border-color: var(--ink); }
.keep__main--brand > .label { color: var(--signal); }
.keep__main--brand > p:not(.label) { color: rgb(255 255 255 / .76); }
.keep__voice { display: grid; gap: 8px; margin-top: auto; }
.keep__voice li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line-ink); }
.keep__voice b { font: 500 15px/1.3 var(--display); }
.keep__voice span { font-size: 14px; color: rgb(255 255 255 / .7); }
.keep + .fine { margin-top: 24px; }
@media (max-width: 1180px) { .keep { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .keep__main { padding: 22px; } .keep__split { grid-template-columns: minmax(0, 1fr); } .keep__voice li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ai.html: one question and its answer, as an exchange */
.aiq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 48px; align-items: start; }
.aiq__ask { display: grid; gap: 14px; }
.aiq__ask .label { color: var(--slate); }
.aiq__bubble { position: relative; padding: 22px 24px; border-radius: 20px 20px 20px 6px; background: var(--blue); color: var(--white); font: 500 clamp(20px, 1.8vw, 24px)/1.3 var(--display); letter-spacing: -.005em; box-shadow: 0 24px 48px -32px rgb(0 75 255 / .7); }
.aiq__took { display: flex; flex-wrap: wrap; gap: 8px; }
.aiq__took li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; color: rgb(1 9 43 / .7); }
.aiq__answer { margin: 0; padding: 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -44px rgb(1 9 43 / .55); }
.aiq__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--slate); }
.aiq__head .label { color: var(--blue); }
.aiq__table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.aiq__table th, .aiq__table td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--line); }
.aiq__table thead th { font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.aiq__table tbody th { font-weight: 500; }
.aiq__table td:nth-child(3), .aiq__table td:nth-child(4) { position: relative; width: 30%; }
.aiq__bar { display: block; height: 4px; width: var(--w); margin-bottom: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--signal)); }
.aiq__bar--err { background: #c4320a; opacity: .75; }
.aiq__table tbody tr:nth-child(3) td:last-child { color: #c4320a; font-weight: 600; }
.aiq__read { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fdf4f0; font-size: 14.5px; color: var(--ink); }
.aiq__read .label { color: #c4320a; }

/* ai.html 01: live and next, each with what it is worth */
.ailive { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; margin-top: 64px; }
.ailive__when { color: var(--blue); margin-bottom: 14px; }
.ailive__when--next { color: var(--slate); }
.ailive__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ailive__grid--next { grid-template-columns: minmax(0, 1fr); }
.ailive__card { display: grid; gap: 6px; align-content: start; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.ailive__card--next { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.ailive__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ailive__top b { font: 500 13px/1.3 var(--text); letter-spacing: .02em; color: var(--slate); }
.ailive__val { font: 500 18px/1.25 var(--display); color: var(--ink); }
.ailive__card > p:last-child { font-size: 14px; line-height: 1.45; color: rgb(1 9 43 / .7); }

/* ai.html 02: the vocabulary as a question builder */
.aivoc { display: grid; grid-template-columns: minmax(0, 5fr) auto minmax(0, 2fr) auto minmax(0, 3fr); gap: 16px; align-items: start; margin-top: 64px; }
.aivoc__col { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.aivoc__col .label { color: var(--slate); margin-bottom: 12px; }
.aivoc__col ul { display: flex; flex-wrap: wrap; gap: 6px; }
.aivoc__col li { padding: 5px 11px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 13.5px; }
.aivoc__col li.is-on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.aivoc__x { align-self: center; font: 500 28px/1 var(--display); color: var(--slate); }
.aivoc__sentence { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-top: 20px; padding: 16px 20px; border-radius: 14px; background: var(--ink); color: var(--white); font: 500 clamp(18px, 1.6vw, 22px)/1.3 var(--display); }
.aivoc__sentence .label { color: var(--signal); }
.aivoc__sentence em { font: 400 14.5px/1.4 var(--text); font-style: normal; color: rgb(255 255 255 / .65); }
.aivoc__sentence + .fine { margin-top: 16px; }

/* ai.html 03: why an agent can be trusted with it */
.aiperm { margin-top: 48px; padding: 28px 32px; border-radius: 18px; border: 1px solid var(--signal); background: rgb(32 211 202 / .06); display: grid; gap: 10px; }
.aiperm .label { color: var(--signal); }
.aiperm__claim { font: 500 clamp(20px, 2vw, 26px)/1.25 var(--display); color: var(--white); max-width: 46ch; }
.aiperm__why { font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / .74); max-width: 70ch; }

@media (max-width: 1180px) {
  .aiq, .ailive { grid-template-columns: minmax(0, 1fr); }
  .aivoc { grid-template-columns: minmax(0, 1fr); }
  .aivoc__x { justify-self: center; }
}
@media (max-width: 760px) {
  .ailive__grid { grid-template-columns: minmax(0, 1fr); }
  .aiq__answer { padding: 16px; }
  .aiq__table { font-size: 13px; }
  .aiq__table td:nth-child(3), .aiq__table td:nth-child(4) { width: auto; }
  .aiperm { padding: 22px; }
}
.aiq__table td { white-space: nowrap; }

/* trust.html: a pass in the style of the other platform pages */
/* Who runs what: one row per topic, "We run" one dark column down the right */
.runs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr); margin-top: 64px; }
.runs__row { display: contents; }
.runs__row > span { padding: 18px 28px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.runs__topic { padding-left: 0 !important; font: 500 15px/1.45 var(--display) !important; color: var(--slate); }
.runs__we { background: var(--ink); color: rgb(255 255 255 / .88); border-top-color: var(--line-ink) !important; }
.runs__none { color: var(--line-strong); }
.runs__we.runs__none { color: rgb(255 255 255 / .3); }
.runs__none::before { content: ""; display: block; width: 16px; height: 1px; margin-top: .75em; background: currentColor; }
.runs__head > span { padding-top: 28px; padding-bottom: 14px; border-top: 0; font: 500 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.runs__head > span:first-child { visibility: hidden; }
.runs__head > span:last-child { background: var(--ink); color: var(--signal); border-radius: 18px 18px 0 0; }
.runs__row:last-child > span { border-bottom: 1px solid var(--line); }
.runs__row:last-child > span:last-child { border-bottom: 0; border-radius: 0 0 18px 18px; padding-bottom: 28px; }
.trust__gates { margin-top: 64px; padding: 0; }
.trust__gates + .fine { margin-top: 20px; }

.places { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 48px; }
.places > div { position: relative; display: grid; gap: 4px; padding: 20px 22px 20px 52px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.places b { font: 500 22px/1.2 var(--display); }
.places span:last-child { font-size: 14px; color: var(--slate); }
.places__pin { position: absolute; left: 22px; top: 26px; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue); }
.places__main { background: var(--ink) !important; color: var(--white); border-color: var(--ink) !important; }
.places__main b { font-size: 28px; }
.places__main span:last-child { color: rgb(255 255 255 / .7); }
.places__main .places__pin { background: var(--signal); box-shadow: 0 0 0 6px rgb(32 211 202 / .2); }
.places__side--hq .places__pin { background: var(--slate); }

.never { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.never li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.never li::before { content: "We never"; justify-self: start; padding: 2px 10px; border-radius: 999px; font: 600 11px/1.6 var(--text); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--signal); }
.never b { font: 500 19px/1.25 var(--display); }
.never span { font-size: 14.5px; line-height: 1.5; color: rgb(1 9 43 / .72); }

.build__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.build__notes p { font-size: 15.5px; line-height: 1.55; color: rgb(1 9 43 / .76); }
.build__notes b { color: var(--ink); font-weight: 500; }
#build .rollout__step .tstate { box-shadow: 0 0 0 6px var(--white); }

.seccard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: 36px 40px; border-radius: 20px; background: var(--ink); color: var(--white); }
.seccard .label { color: var(--signal); }
.seccard h2 { margin: 10px 0 12px; font-size: clamp(28px, 3vw, 40px); }
.seccard p:not(.label) { font-size: 16px; line-height: 1.55; color: rgb(255 255 255 / .74); max-width: 60ch; }
.seccard .more { color: var(--signal); }
.seccard__mail { display: inline-flex; padding: 16px 24px; border-radius: 999px; background: var(--signal); color: var(--ink); font: 600 17px/1 var(--text); text-decoration: none; white-space: nowrap; transition: transform .2s; }
.seccard__mail:hover { transform: translateY(-2px); }

@media (max-width: 1180px) {
  .places, .build__notes, .seccard { grid-template-columns: minmax(0, 1fr); }
  .runs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .runs__topic { grid-column: 1 / -1; padding: 20px 0 6px !important; }
  .runs__head > span:first-child { display: none; }
  .runs { column-gap: 8px; }
  .runs__row > span:not(.runs__topic) { border: 0 !important; padding: 14px 16px 16px; font-size: 16px; }
  .runs__you { padding-left: 0 !important; }
  .runs__we { border-radius: 12px; }
  .runs__head > span { padding: 0 0 4px !important; font-size: 12px !important; }
  .runs__head > span:last-child { background: none; color: var(--blue); padding-left: 16px !important; }
  .runs__row:last-child > span:last-child { padding-bottom: 16px; border-radius: 12px; }
  .never { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seccard__mail { justify-self: start; }
}
@media (max-width: 760px) { .never { grid-template-columns: minmax(0, 1fr); } .seccard { padding: 22px; } .seccard__mail { white-space: normal; } }

/* trust.html 06: the lifecycle, from roadmap to production */
.sdlc__claim { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; margin-top: 56px; padding: 22px 28px; border-radius: 16px; background: var(--ink); color: var(--white); font: 500 clamp(20px, 2vw, 26px)/1.3 var(--display); letter-spacing: -.01em; }
.sdlc__claim .label { color: var(--signal); }
/* One track from roadmap to production (2026-10-21): seven numbered steps on
   one hairline, each tagged with who does it. AI blue, people and AI half
   and half, automated a dashed outline; the three checkpoints are gates. The same
   line-and-step language as .watch__flow below. */
.sdlc { counter-reset: st; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 56px; }
.sdlc__step { counter-increment: st; position: relative; display: grid; gap: 6px; align-content: start; padding-right: 18px; }
.sdlc__step::before { content: counter(st); position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--white); border: 1px solid var(--line-strong); font: 600 12px/1 var(--text); color: var(--ink); }
.sdlc__step::after { content: ""; position: absolute; top: 14px; left: 0; right: 0; border-top: 1px solid var(--line-strong); }
.sdlc__step:last-child::after { display: none; }
.sdlc__who { font: 500 11px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.sdlc__step b { font: 500 16px/1.3 var(--display); }
.sdlc__step span { font-size: 13.5px; line-height: 1.45; color: rgb(1 9 43 / .72); }
.sdlc__step--ai::before { background: var(--blue); border-color: var(--blue); color: var(--white); }
.sdlc__step--ai::after { border-color: var(--blue); }
.sdlc__step--ai .sdlc__who { color: var(--blue); }
.sdlc__step--both::before { background: linear-gradient(90deg, var(--ink) 50%, var(--blue) 50%); border-color: var(--ink); color: var(--white); }
.sdlc__step--both .sdlc__who { color: var(--ink); }
/* a checkpoint is a gate across the track, not a step on it: no number, a
   bar the change has to pass */
.sdlc__step--check { counter-increment: none; }
.sdlc__step--check::before { content: ""; width: 10px; height: 46px; margin: -9px 0 1px 9px; border-radius: 3px; background: var(--ink); border: 0; box-shadow: 0 0 0 4px var(--white); }
.sdlc__step--check .sdlc__who { color: var(--ink); }
.sdlc__step--auto::before { border-style: dashed; }
.sdlc + .watch { margin-top: 56px; }
@media (max-width: 1180px) {
  .sdlc { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .sdlc__step { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 0 0 22px; }
  .sdlc__step::before { grid-row: span 3; margin: 0; }
  .sdlc__step::after { top: 0; bottom: 0; left: 14px; right: auto; border-top: 0; border-left: 1px solid var(--line-strong); }
  .sdlc__step--ai::after { border-color: var(--blue); }
  .sdlc__step--check::before { width: 36px; height: 10px; margin: 9px 0 0 -4px; }
}

/* trust.html 06: after it ships, monitoring and the alert flow */
.watch { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; margin-top: 20px; padding: 28px 32px; border-radius: 16px; background: var(--ink); color: var(--white); }
.watch__head .label { color: var(--signal); }
.watch__head h3 { margin: 8px 0 10px; font: 500 clamp(22px, 2.1vw, 28px)/1.15 var(--display); letter-spacing: -.01em; }
.watch__head > p:not(.label) { font-size: 15px; line-height: 1.55; color: rgb(255 255 255 / .74); }
.watch__envs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.watch__envs li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-ink); font-size: 12.5px; color: rgb(255 255 255 / .8); }
.watch__envs li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: intake-blink 2s ease-in-out infinite; }
.watch__envs li:nth-child(2)::before { animation-delay: .4s; } .watch__envs li:nth-child(3)::before { animation-delay: .8s; }
.watch__flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.watch__flow li { position: relative; display: grid; gap: 10px; align-content: start; }
.watch__flow li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% - 4px); right: -8px; top: 14px; border-top: 1px solid var(--line-ink); }
.watch__flow .tstate { justify-self: start; box-shadow: none; }
.watch__flow p { font-size: 13.5px; line-height: 1.45; color: rgb(255 255 255 / .74); }
@media (max-width: 1180px) { .watch { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .watch { padding: 22px; } .watch__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } .watch__flow li::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .watch__envs li::before { animation: none; } }

/* compliance.html, now regulation and compliance */
.da__box { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-top: 32px; padding: 18px 24px; border-radius: 14px; background: var(--ink); color: rgb(255 255 255 / .88); font-size: 16px; line-height: 1.5; }
.da__box .label { color: var(--signal); }
.da__box + .fine { margin-top: 16px; }
.ccards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.ccards li { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
.ccards__top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ccards__top b { font: 500 19px/1.2 var(--display); }
.ccards__st { flex: none; padding: 2px 9px; border-radius: 999px; font: 600 11px/1.5 var(--text); letter-spacing: .04em; background: #eef0f4; color: #4a5568; }
.ccards__st--prep { background: #fdeee8; color: #c2410c; }
.ccards__st--on { background: #e5f6ea; color: #15803d; }
.ccards__what { font-size: 13.5px; line-height: 1.45; color: var(--slate); }
.ccards li > p:last-child { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: rgb(1 9 43 / .78); }
.ccards + .fine { margin-top: 20px; }
@media (max-width: 1180px) { .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ccards { grid-template-columns: minmax(0, 1fr); } }
.ccards li p { font-family: var(--text); }
.trust__reg { margin-top: 32px; }

/* compliance.html: the EU Data Act (01 to 03) in one box, its heading on top */
.dabox { max-width: calc(var(--wrap) + 2 * var(--edge)); margin: 72px auto; border-radius: 28px; overflow: hidden; background: #f1f5ff; border: 1px solid rgb(0 75 255 / .14); box-shadow: 0 40px 80px -60px rgb(0 75 255 / .5); }
.da-intro { padding: 40px 0; background: var(--ink); color: var(--white); }
.da-intro .label { color: var(--signal); }
.da-intro__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; margin-top: 10px; }
.da-intro h2 { font-size: clamp(30px, 3.2vw, 44px); white-space: nowrap; }
.da-intro__row > p { font-size: 16px; line-height: 1.5; color: rgb(255 255 255 / .74); max-width: 52ch; }
.da-intro__jump { display: flex; flex-wrap: wrap; gap: 8px; }
.da-intro__jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-ink); color: var(--white); text-decoration: none; font-size: 14px; white-space: nowrap; transition: border-color .2s, background .2s; }
.da-intro__jump a:hover { border-color: var(--signal); background: rgb(32 211 202 / .1); }
.da-part { background: transparent; padding: 88px 0; scroll-margin-top: 80px; }
.da-part + .da-part { border-top: 1px solid rgb(0 75 255 / .12); }
.da-part .section-label { border-color: rgb(0 75 255 / .4); color: var(--blue); }
@media (max-width: 1180px) { .da-intro__row { grid-template-columns: minmax(0, 1fr); } .da-intro h2 { white-space: normal; } .da-part { padding: 64px 0; } }
@media (max-width: 760px) { .dabox { margin: 40px 12px; border-radius: 20px; } .dabox .wrap { padding: 0 18px; } }
.certs--page li { border-radius: 12px; }

/* vehicle-data.html 06: hardware, the partners as logo cards with example devices */
.hwp { display: grid; gap: 16px; margin-top: 56px; }
.hwp > .label { color: var(--slate); }
.hwp__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hwp__list > li { display: grid; grid-template-rows: 64px auto; align-content: start; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.hwp__list img { align-self: center; width: auto; height: auto; max-width: 78%; max-height: 34px; }
.hwp__dev { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.hwp__dev li { padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font: 500 13px/1.3 var(--text); color: var(--ink); }
.hwp__more { padding: 16px 20px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 15px; line-height: 1.5; color: rgb(1 9 43 / .74); }
.hwp__more b { color: var(--ink); font-weight: 600; }
.hwp__more .more { white-space: nowrap; }
@media (max-width: 960px) { .hwp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hwp__list { grid-template-columns: minmax(0, 1fr); } }
/* bosch.html: the one page with people in its pictures.
 * Hero: a photograph the width of the screen, and a paper card that sits on
 * its lower left and runs out below it. Chain: four photographs stepping down
 * like links, with a rail above that says who carries the vehicle. Every
 * other page is a screen and a table; this one sells a chain of hands, so it
 * is the one place where the picture leads. Flat colour only, no gradient. */
.bo-hero { position: relative; padding-bottom: 96px; }
.bo-hero__img {
  width: 100%; height: clamp(420px, 62vh, 680px);
  object-fit: cover; object-position: 60% 40%;
}
.bo-hero__wrap { position: relative; margin-top: clamp(-190px, -13vw, -120px); }
.bo-hero__card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 36px 44px 44px;
  display: grid; grid-template-columns: 6fr 1fr 5fr; align-items: end;
}
.bo-hero__card .bo-lockup { grid-column: 1 / -1; }
.bo-lockup { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.bo-lockup img { width: auto; height: 22px; }
.bo-lockup span { font: 500 18px/1 var(--text); color: var(--slate); }
.bo-hero__card .display--page { font-size: clamp(34px, 3.6vw, 54px); max-width: 15ch; margin: 28px 0 0; }
.bo-hero__card .lead--answer { grid-column: 3; font-size: clamp(16px, 1.25vw, 18px); }

.bo-chain-band { padding-top: 96px; }
.bo-rail {
  display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter);
  margin-top: 72px;
}
.bo-rail p { padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.bo-rail p span { font: 600 18px/1.2 var(--display); text-transform: none; letter-spacing: -0.01em; }
.bo-rail__a { border-top: 3px solid var(--ink); }
.bo-rail__b { border-top: 3px solid var(--blue); }
.bo-rail__b span { color: var(--blue); }

.bo-chain {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
  margin-top: 28px; align-items: start;
}
.bo-chain li { display: grid; gap: 10px; align-content: start; }
.bo-chain li:nth-child(2) { margin-top: 36px; }
.bo-chain li:nth-child(3) { margin-top: 72px; }
.bo-chain li:nth-child(4) { margin-top: 108px; }
.bo-chain figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--line); }
.bo-chain img { width: 100%; height: 100%; object-fit: cover; }
.bo-chain h3 { font: 500 22px/1.2 var(--display); margin-top: 8px; text-wrap: balance; }
.bo-chain p { font-size: 16px; color: rgb(1 9 43 / 0.78); max-width: 34ch; }
.bo-chain__you { margin-top: 64px; padding-top: 12px; border-top: 1px solid var(--line-strong); text-align: right; }

.bo-apps {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 72px var(--gutter);
  margin-top: 64px; align-items: start;
}
.bo-apps figure { display: grid; gap: 16px; align-content: start; }
.bo-apps figcaption { display: grid; gap: 8px; }
.bo-apps figcaption p:not(.label) { font-size: 16px; color: rgb(1 9 43 / 0.74); max-width: 44ch; }
.bo-apps .screen--phone { border: 0; max-width: 280px; justify-self: start; }
.bo-apps__oem { grid-column: 1 / span 8; }
.bo-apps__app { grid-column: 10 / span 3; grid-row: 1; align-self: end; }
/* the dealer screen sits to the right, its caption to the left: a zigzag */
.bo-apps__hub { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: end; }
.bo-apps__hub .screen { grid-column: 5 / -1; grid-row: 1; }
.bo-apps__hub figcaption { grid-column: 1 / span 4; grid-row: 1; align-self: end; }

.bo-sell { margin-top: 56px; }
.bo-flag {
  font: 500 11.5px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 8px; border: 1px solid var(--line-strong); color: var(--slate);
}
.bo-flag--live { border-color: var(--signal); color: var(--ink); }
.bo-passport {
  display: grid; grid-template-columns: 5fr 1fr 6fr; margin-top: 56px;
  padding-top: 16px; border-top: 1px solid var(--ink);
}
.bo-passport p:last-child { grid-column: 3; max-width: 58ch; }

.bo-proof { display: grid; grid-template-columns: 7fr 1fr 4fr; align-items: end; }
.bo-proof__photo { display: grid; gap: 12px; }
.bo-proof__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bo-proof__text { grid-column: 3; display: grid; gap: 20px; align-content: end; }
.bo-proof__text h2 { font-size: clamp(30px, 3vw, 44px); }
.bo-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--gutter); margin-top: 8px; }
.bo-nums div { border-top: 1px solid var(--ink); padding-top: 10px; }
.bo-nums dt { font: 500 11.5px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.bo-nums dd { font: 500 clamp(30px, 3vw, 44px)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.bo-proof + .logos { margin-top: 72px; }

/* bosch.html, the IRUM case: the joint solution on a real customer. A head
   with the machine cut out, a strip naming who does what, then the three
   apps on that machine. The page's second ink band. */
.bo-case__head { display: grid; grid-template-columns: 6fr 6fr; gap: var(--gutter); align-items: center; }
.bo-case__text { display: grid; gap: 24px; align-content: start; }
.bo-case__text h2 { font-size: clamp(34px, 3.4vw, 52px); max-width: 16ch; }
.bo-case__text .lead { max-width: 46ch; }
.bo-case__kicker { display: flex; align-items: center; gap: 14px; font-size: 16px; color: rgb(255 255 255 / 0.62); }
.bo-case__kicker img { height: 44px; width: auto; }
.bo-case__veh img { width: 100%; height: auto; }
.bo-case .bo-flag--live { color: var(--white); }
.bo-case__who { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line-ink); }
.bo-case__who li { display: grid; gap: 6px; align-content: start; padding: 18px 24px 0 0; }
.bo-case__who li + li { padding-left: 24px; border-left: 1px solid var(--line-ink); }
.bo-case__who span { font: 500 12px/1.4 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.bo-case__who b { font: 500 22px/1.2 var(--display); }
.bo-case__who p { font-size: 15px; color: rgb(255 255 255 / 0.7); max-width: 36ch; }
.bo-case__apps { display: grid; grid-template-columns: 5fr 5fr 2fr; gap: var(--gutter); margin-top: 72px; align-items: start; }
.bo-case__apps figure { display: grid; gap: 14px; align-content: start; }
.bo-case__apps figcaption { display: grid; gap: 6px; }
.bo-case__apps figcaption b { font: 500 20px/1.2 var(--display); }
.bo-case__apps figcaption p:not(.label) { font-size: 15px; color: rgb(255 255 255 / 0.72); max-width: 40ch; }
.bo-case__apps .screen { border-color: var(--line-ink); }
.bo-case__apps .screen--phone { border: 0; max-width: 260px; }

@media (max-width: 1199px) {
  .bo-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); }
  .bo-chain li:nth-child(n) { margin-top: 0; }
  .bo-chain li:nth-child(even) { margin-top: 48px; }
  .bo-rail { display: none; }
  .bo-apps { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .bo-apps__oem, .bo-apps__hub, .bo-apps__app { grid-column: 1; grid-row: auto; }
  .bo-apps__hub { grid-template-columns: minmax(0, 1fr); }
  .bo-apps__hub .screen, .bo-apps__hub figcaption { grid-column: 1; grid-row: auto; }
  .bo-apps__hub .screen { order: -1; }
  .bo-proof { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bo-proof__text { grid-column: 1; }
  .bo-passport { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bo-passport p:last-child { grid-column: 1; }
  .bo-case__head { grid-template-columns: minmax(0, 1fr); }
  .bo-case__veh { max-width: 560px; }
  .bo-case__apps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px var(--gutter); }
  .bo-case__phone { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bo-hero { padding-bottom: 56px; }
  .bo-hero__wrap { margin-top: -72px; }
  .bo-hero__card { padding: 24px 22px 28px; }
  .bo-chain-band { padding-top: 64px; }
  .bo-chain { grid-template-columns: minmax(0, 1fr); }
  .bo-chain li:nth-child(n) { margin-top: 0; }
  .bo-chain__you { text-align: left; margin-top: 40px; }
  .bo-apps { margin-top: 40px; gap: 40px; }
  .bo-sell { display: block; overflow-x: auto; }
  .bo-case__who { grid-template-columns: minmax(0, 1fr); }
  .bo-case__who li, .bo-case__who li + li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line-ink); }
  .bo-case__apps { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .bo-case__phone { grid-column: 1; }
  .bo-case__apps .screen--phone { max-width: 280px; }
}

/* bosch.html: the two partners in their own colours, not the grey of the strip */
.bo-logos { justify-content: flex-start; gap: 56px; }
.bo-logos img { filter: none; opacity: 1; mix-blend-mode: normal; }