/* =============================================================================
   Brizeet — website
   ---------------------------------------------------------------------------
   PALETTE   the app's own tokens (src/theme/tokens.ts). The greys already carry
             a teal bias, so they are used verbatim rather than re-picked. Amber
             (#FFC24B, the mark's centre node) appears in exactly two places:
             the mark itself, and the node beside the route-matching section.

   TYPE      three roles. A serif carries display, because the product is a
             human favour rather than an optimisation. The app's own system sans
             carries body. A monospace carries every label, distance, time and
             amount — this is a product about schedules and manifests, and that
             is the vernacular those things are written in.

   LAYOUT    the page is a route diagram. A hairline runs down the left gutter
             with a node at each section, straight off the mark: hollow rings at
             the two ends, the amber node at the middle. In "How it works" the
             four steps are four stops on that same line — the one place on the
             page where numbering is honest, because it is the one place the
             order carries information.

   SCENES    the --sc-* variables mirror SCENES in components/ui/Illustration.tsx,
             so every drawing inverts with the theme instead of sitting on the
             page as a bright rectangle.
   ========================================================================== */

/* ------------------------------------------------------------------ palette */
:root {
  --teal-900:#062E36; --teal-800:#08414D; --teal-700:#0B7285; --teal-600:#0E8A9F;
  --teal-500:#13A2BA; --teal-200:#9BDCE7; --teal-100:#D3F0F5; --teal-50:#EEFAFC;
  --amber-700:#8A5200; --amber-500:#D98400; --amber-200:#FFD79B; --amber-50:#FFF6E6;
  --amber-mark:#FFC24B;
  --green-700:#136A3A; --green-500:#1E9E58; --green-200:#B7EACC; --green-50:#E9F9F0;
  --grey-900:#0E1416; --grey-800:#1B2427; --grey-700:#2C383C; --grey-600:#4A585D;
  --grey-500:#6B797F; --grey-450:#7C8A8F; --grey-400:#95A2A7; --grey-300:#C4CED2;
  --grey-200:#DFE6E9; --grey-100:#EFF3F4; --grey-50:#F7F9FA; --white:#FFFFFF;

  --font-display: ui-serif, "Iowan Old Style", Charter, "Bitstream Charter",
                  Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
               "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* spacing, from tokens.ts */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:24px;
  --sp-xxl:32px; --sp-xxxl:48px;

  /* motion.ts */
  --d-fast:120ms; --d-base:180ms; --d-slow:260ms; --d-deliberate:420ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --touch: 44px;
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1240px;
  --rail: 168px;
  --sec-gap: 56px;
}

/* --------------------------------------------------------- semantic (light) */
:root {
  color-scheme: light;
  --ground: var(--grey-50);
  --raised: var(--white);
  --sunken: var(--grey-100);
  --rule: var(--grey-200);
  --rule-strong: var(--grey-450);
  --text: var(--grey-900);
  --muted: var(--grey-600);
  --route: var(--teal-700);
  --route-soft: var(--teal-50);
  --route-ink: var(--teal-800);
  --on-route: var(--white);
  --node: var(--amber-mark);
  --good: var(--green-700);
  --good-soft: var(--green-50);
  --warn: var(--amber-700);
  --warn-soft: var(--amber-50);
  --focus: var(--teal-700);

  --sc-blob: var(--teal-50);
  --sc-tint: var(--teal-100);
  --sc-road: var(--grey-200);
  --sc-line: var(--grey-600);
  --sc-body: var(--white);
  --sc-accent: var(--teal-700);
  --sc-on-accent: var(--white);
  --sc-warm: var(--amber-500);
}

/* ---------------------------------------------------------- semantic (dark) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--grey-900);
  --raised: var(--grey-800);
  --sunken: #141C1F;
  --rule: var(--grey-700);
  --rule-strong: var(--grey-500);
  --text: var(--grey-50);
  --muted: var(--grey-300);
  --route: var(--teal-500);
  --route-soft: #0C3B44;
  --route-ink: var(--teal-200);
  --on-route: var(--grey-900);
  --node: var(--amber-mark);
  --good: #4ED18A;
  --good-soft: #0F2E1E;
  --warn: #F2B44C;
  --warn-soft: #33240A;
  --focus: var(--teal-200);

  --sc-blob: #0C3B44;
  --sc-tint: #125A68;
  --sc-road: var(--grey-700);
  --sc-line: var(--grey-300);
  --sc-body: var(--grey-800);
  --sc-accent: var(--teal-500);
  --sc-on-accent: var(--grey-900);
  --sc-warm: #F2B44C;
}

/* The page opens light whatever the OS asks for; dark is reached only by the
   toggle, which sets `data-theme` and remembers it. */

/* -------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 0.35vw + 14.6px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

a { color: inherit; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip-link {
  position: absolute; left: var(--sp-lg); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--touch);
  background: var(--text); color: var(--ground);
  padding: 0 var(--sp-lg);
  font: 600 14px/1 var(--font-sans); text-decoration: none;
}
.skip-link:focus { top: var(--sp-md); }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------- typography */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}
h1 {
  font-size: clamp(38px, 6.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(27px, 3.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.022em;
}
h1 em, h2 em { font-style: italic; color: var(--route); }

h3 {
  font-family: var(--font-sans);
  font-size: clamp(16.5px, 1.1vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

.lede {
  font-size: clamp(16.5px, 1vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}

/* Every label, tag, figure and timing on the page is set in the mono. */
.kicker, .sec-label, .hero-facts, .colophon-legal,
.site-nav a, .board-route-when, .job-off, .job-tag, .stop-n,
.priorities legend, .readout dt, .swatch + *, .footnote {
  font-family: var(--font-mono);
}

.kicker, .sec-label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.footnote {
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  font-size: 12.5px; line-height: 1.55; letter-spacing: 0.01em;
  color: var(--muted);
  max-width: 62ch;
}
.footnote .icon { width: 15px; height: 15px; margin-top: 2px; opacity: .8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--touch); padding: 0 24px;
  background: var(--text); color: var(--ground);
  font: 600 15px/1 var(--font-sans);
  text-decoration: none; border: 1px solid var(--text); border-radius: 3px;
  transition: background-color var(--d-base) var(--ease), color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.btn:hover { background: var(--route); border-color: var(--route); color: var(--on-route); }
.btn .icon { width: 18px; height: 18px; }

/* The second choice in a pair — same size and weight, less ink. Both are real
   options here: one visitor needs a pickup, the other one drives. */
.btn-ghost { background: none; color: var(--text); border-color: var(--rule-strong); }
.btn-ghost:hover { background: none; color: var(--route); border-color: var(--route); }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--touch);
  font: 600 15px/1 var(--font-sans);
  color: var(--route);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.textlink .icon { width: 17px; height: 17px; transition: transform var(--d-base) var(--ease); }
.textlink:hover { border-bottom-color: currentColor; }
.textlink:hover .icon { transform: translateX(3px); }

/* ----------------------------------------------------------------- masthead */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: var(--measure); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--sp-lg);
  min-height: 62px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--touch);
  margin-right: auto;
  text-decoration: none;
}
.mark { width: 26px; height: 26px; color: var(--route); }
.brand-name {
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-md); }
.site-nav ul { display: flex; align-items: center; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 11px;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color var(--d-base) var(--ease);
}
.site-nav a:hover { color: var(--text); }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch);
  border: 1px solid var(--rule); border-radius: 3px;
  background: none; color: var(--muted); cursor: pointer;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--rule-strong); }
.theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

.nav-toggle {
  display: none;
  width: var(--touch); height: var(--touch);
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 3px;
  background: none; color: var(--text); cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-sm) var(--gutter) var(--sp-lg);
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a {
    min-height: var(--touch); padding: 0;
    font-size: 13px; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--rule);
  }
  .theme-toggle {
    width: auto; justify-content: flex-start; gap: var(--sp-md);
    padding: 0 var(--sp-md); margin-top: var(--sp-md);
  }
  .theme-toggle-label {
    position: static; width: auto; height: auto; clip: auto;
    font: 500 11.5px/1 var(--font-mono);
    letter-spacing: 0.1em; text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------- hero */
.hero {
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero-inner {
  max-width: var(--measure); margin-inline: auto;
  padding: clamp(48px, 7vw, 92px) var(--gutter) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-copy > * + * { margin-top: var(--sp-xl); }
.hero-copy .kicker { display: flex; align-items: center; gap: 12px; }
.hero-copy .kicker::before {
  content: ""; width: 34px; height: 1px; background: var(--route); flex: none;
}
.hero h1 { margin-top: var(--sp-lg); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg) var(--sp-xxl); }

.hero-facts {
  max-width: var(--measure); margin-inline: auto;
  padding: 0 var(--gutter) clamp(28px, 4vw, 44px);
  display: flex; flex-wrap: wrap; row-gap: 10px;
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.hero-facts li { display: flex; align-items: center; }
/* The rule lives inside the item and carries its own symmetric space, so a
   wrapped row never leaves a separator stranded at the start of a line. */
.hero-facts li:not(:last-child)::after {
  content: ""; width: 1px; height: 11px; background: var(--rule-strong);
  margin-inline: 20px; opacity: .65;
}

.hero-art-wrap { position: relative; }
.hero-art { width: 100%; height: auto; }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art-wrap { order: -1; width: 100%; max-width: 460px; }
  .lede { max-width: none; }
}

/* ================================================================== the rail
   One hairline down the page, a node at each section. Below 1000px the label
   column has nowhere to go, so the diagram collapses to a plain stacked label
   rather than being squeezed into a gutter that no longer exists.
   ========================================================================= */
.sec { position: relative; }
.sec-wrap {
  position: relative;
  max-width: var(--measure); margin-inline: auto;
  padding: clamp(56px, 7.5vw, 108px) var(--gutter);
}
.sec-grid { display: grid; gap: var(--sp-lg); }
.sec-label { display: flex; align-items: center; gap: 10px; }
.sec-label::before {
  content: ""; width: 18px; height: 1px; background: var(--rule-strong); flex: none;
}
.node { display: none; }

@media (min-width: 1000px) {
  .sec-wrap::before {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--gutter) + var(--rail));
    width: 1px; background: var(--rule);
  }
  .sec-grid {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--sec-gap); row-gap: 0;
  }
  .sec-label {
    position: relative; display: block;
    padding-right: var(--sp-xl); padding-top: 5px;
  }
  .sec-label::before { display: none; }

  .node {
    display: block; position: absolute;
    right: -4px; top: 11px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--route);
    box-shadow: 0 0 0 4px var(--ground);
  }
  /* The mark, scaled to the page: hollow rings at the two ends of the route,
     the amber node at its middle. */
  .node-origin, .node-dest {
    width: 13px; height: 13px; right: -7px; top: 8px;
    background: var(--ground);
    border: 2px solid var(--route);
    box-shadow: 0 0 0 3px var(--ground);
  }
  .node-thesis {
    width: 13px; height: 13px; right: -7px; top: 8px;
    background: var(--node);
    box-shadow: 0 0 0 3px var(--ground);
  }
}

/* ------------------------------------------------------------ typical asks
   A slim band under the hero: six icons, six words. It answers "what is this
   for?" faster than a paragraph could, so it is given no paragraph. */
.sec-strip .sec-wrap { padding-block: clamp(30px, 4vw, 48px); }
.things {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--sp-lg) var(--sp-xl);
}
.things li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.things .icon { width: 21px; height: 21px; color: var(--route); }

/* ----------------------------------------------------------- why it exists */
.sec-body > * + * { margin-top: var(--sp-xl); }
.sec-body > h2 + .lede { margin-top: var(--sp-lg); }

.reasons { margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--rule); }
.reasons li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: var(--sp-lg);
  padding: var(--sp-xl) 0;
  border-bottom: 1px solid var(--rule);
}
.reasons .icon { width: 22px; height: 22px; color: var(--route); grid-row: 1 / span 2; margin-top: 1px; }
.reasons h3 { grid-column: 2; }
.reasons p { grid-column: 2; margin-top: 5px; color: var(--muted); max-width: 58ch; }

.pull {
  margin-top: clamp(32px, 4vw, 48px);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.25; letter-spacing: -0.015em;
  max-width: 22ch;
}
.pull em { font-style: italic; color: var(--route); }

/* --------------------------------------------------------------- the stops */
.stops li { position: relative; padding-bottom: clamp(28px, 3.2vw, 44px); }
.stops li:last-child { padding-bottom: 0; }
.stop-n {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; letter-spacing: 0.14em;
  color: var(--route); margin-bottom: 7px;
}
.stop-n .icon { width: 18px; height: 18px; }
.stop-t { margin-top: 6px; color: var(--muted); max-width: 54ch; }
.stop-t em { font-style: normal; font-weight: 600; color: var(--route); }

/* -------------------------------------------------- the sample request card
   Showing what you post beats describing it, so this is the page's second and
   last boxed surface. It is boxed for the same reason the handover code is:
   it is a card in the app too. */
.req-card {
  padding: var(--sp-xl);
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  max-width: 400px;
}
.req-cap {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.req-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.req-head .icon { width: 20px; height: 20px; color: var(--route); }
.req-rows { margin-top: var(--sp-lg); border-top: 1px solid var(--rule); }
.req-rows li {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.req-rows .icon { width: 17px; height: 17px; color: var(--muted); }
.req-k {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  width: 34px; flex: none;
}
.req-rows b { margin-left: auto; font-weight: 600; text-align: right; }
.req-foot {
  display: flex; align-items: center; gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--good);
}
.req-foot .icon { width: 16px; height: 16px; }

@media (min-width: 1000px) {
  .node-stop {
    display: block; position: absolute;
    left: calc(-1 * var(--sec-gap) - 6px); top: 3px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--ground);
    border: 2px solid var(--route);
    box-shadow: 0 0 0 3px var(--ground);
  }
}

/* ---------------------------------------------------------- route matching */
.how-split, .corridor-split, .privacy, .drivers {
  display: grid; gap: clamp(32px, 4vw, 56px);
  margin-top: clamp(36px, 4vw, 56px);
}
@media (min-width: 900px) {
  .how-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); align-items: start; }
  .corridor-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
  .privacy { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
  .drivers { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
}
@media (min-width: 1000px) {
  .sec-wide .how-split,
  .sec-wide .corridor-split,
  .sec-wide .privacy,
  .sec-wide .drivers {
    margin-left: calc(var(--rail) + var(--sec-gap));
  }
  .sec-wide .footnote-wide { margin-left: calc(var(--rail) + var(--sec-gap)); }
}

.corridor-figure svg, .privacy-figure svg, .driver-figure svg { width: 100%; height: auto; }
.corridor-figure figcaption, .privacy-figure figcaption {
  margin-top: var(--sp-md);
  display: flex; flex-wrap: wrap; gap: var(--sp-lg);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.corridor-figure figcaption span { display: inline-flex; align-items: center; gap: 7px; }
.swatch {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-road); display: inline-block;
}
.swatch-on { background: var(--sc-accent); }

.board-route {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--text);
}
.board-route-line {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; letter-spacing: -0.01em;
}
.board-route-when {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.board-title {
  margin-top: var(--sp-xl);
  font-family: var(--font-mono); font-weight: 500;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}

.jobs { margin-top: var(--sp-md); }
.jobs li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-md); row-gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.jobs .icon { width: 18px; height: 18px; color: var(--muted); grid-row: 1 / span 2; }
.job-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; }
.job-where { grid-column: 2; font-size: 13px; color: var(--muted); }
.job-off {
  grid-column: 3; grid-row: 1;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  justify-self: end;
}
.job-tag {
  grid-column: 3; grid-row: 2;
  justify-self: end;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--route);
}
.jobs .is-far { opacity: .55; }
.jobs .is-far .job-tag { color: var(--muted); }

/* ------------------------------------------------------------------ timing */
.timing { margin-top: clamp(32px, 4vw, 48px); }
.priorities legend {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-md);
}
.priority-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.pri { display: contents; }
.pri input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pri label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 var(--sp-lg);
  border: 1px solid var(--rule-strong); border-radius: 3px;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  transition: background-color var(--d-base) var(--ease),
              color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.pri label:hover { border-color: var(--text); }
.pri input:checked + label {
  background: var(--text); color: var(--ground); border-color: var(--text);
  font-weight: 600;
}
.pri input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
.pri input:disabled + label { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.closed-note {
  margin-top: var(--sp-md);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--warn); max-width: 60ch;
}

.readout {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--text);
  display: grid; gap: var(--sp-xl);
}
@media (min-width: 640px) { .readout { grid-template-columns: 1fr 1fr; } }
.readout dt {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.readout dd {
  font-family: var(--font-mono);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.readout .readout-sub {
  font-size: 12px; letter-spacing: 0.04em; font-weight: 400;
  color: var(--muted); margin-top: 6px;
}
.timing .footnote { margin-top: var(--sp-xl); }

/* ----------------------------------------------------------------- privacy */
.tabs { display: flex; gap: var(--sp-xl); border-bottom: 1px solid var(--rule); }
.tab { display: contents; }
.tab input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tab label {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--touch); padding-bottom: 2px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.tab label .icon { width: 16px; height: 16px; }
.tab label:hover { color: var(--text); }
.tab input:checked + label { color: var(--text); font-weight: 600; border-bottom-color: var(--route); }
.tab input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }

.ticks { margin-top: var(--sp-lg); }
.ticks li {
  display: flex; align-items: center; gap: var(--sp-md);
  padding: 11px 0; font-size: 15px;
  border-bottom: 1px solid var(--rule);
}
.ticks .icon { width: 17px; height: 17px; stroke-width: 2.25; }
.ticks .yes .icon { color: var(--good); }
.ticks .no .icon { color: var(--rule-strong); }
.ticks .no { color: var(--muted); }
.privacy-controls .footnote { margin-top: var(--sp-xl); }

.privacy-figure figcaption { justify-content: center; letter-spacing: 0.06em; }
.layer { transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); transform-origin: 220px 150px; }
.layer-after { opacity: 0; transform: scale(0.6); }
[data-state="after"] .layer-before,
[data-widget="privacy"]:has(#rev-after:checked) .layer-before { opacity: 0; transform: scale(1.25); }
[data-state="after"] .layer-after,
[data-widget="privacy"]:has(#rev-after:checked) .layer-after { opacity: 1; transform: scale(1); }
/* Written twice on purpose: `data-state` is JS, `:has()` keeps the control
   honest with JavaScript off. A tab that moves and changes nothing is worse
   than no tab. */
[data-widget="privacy"]:has(#rev-after:checked) [data-panel="before"],
[data-widget="privacy"]:has(#rev-before:checked) [data-panel="after"] { display: none; }
[data-caption="after"],
[data-widget="privacy"]:has(#rev-after:checked) [data-caption="before"] { display: none; }
[data-widget="privacy"]:has(#rev-after:checked) [data-caption="after"] { display: inline; }

/* ------------------------------------------------- proof (the change of key)
   The band is always the opposite of the page it sits in: deep teal on the
   light theme, paper on the dark one. A dark band on a dark page would be no
   change of key at all. */
.sec-ink {
  --ground: var(--teal-900);
  --rule: #1A4C58;
  --rule-strong: #4E7F8B;
  --text: var(--grey-50);
  --muted: var(--grey-300);
  --route: var(--teal-500);
  --good: #4ED18A;
  --focus: var(--teal-200);
  background: var(--teal-900);
  color: var(--grey-50);
}
:root[data-theme="dark"] .sec-ink {
  --ground: var(--grey-50);
  --rule: var(--grey-200);
  --rule-strong: var(--grey-450);
  --text: var(--grey-900);
  --muted: var(--grey-600);
  --route: var(--teal-700);
  --good: var(--green-700);
  --focus: var(--teal-700);
  background: var(--grey-50);
  color: var(--grey-900);
}
.proof { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 860px) { .proof { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.proof > div > * + * { margin-top: var(--sp-lg); }

.pin-demo { display: grid; justify-items: center; gap: var(--sp-xl); }
.pin-boxes { display: flex; gap: var(--sp-md); }
.pin-box {
  width: clamp(54px, 12vw, 66px); height: clamp(66px, 14vw, 80px);
  display: grid; place-items: center;
  border: 1px solid var(--route);
  font-family: var(--font-mono);
  font-size: clamp(26px, 4.4vw, 32px); font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pin-box b { font-weight: 500; }
.pin-verdict {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--good);
}
.pin-verdict .icon { width: 16px; height: 16px; stroke-width: 2.5; }

/* ----------------------------------------------------------------- drivers */
.perks { display: grid; gap: 0; }
@media (min-width: 620px) { .perks { grid-template-columns: 1fr 1fr; column-gap: var(--sp-xxl); } }
.perks li { padding: var(--sp-xl) 0; border-top: 1px solid var(--rule); }
.perks .icon { width: 22px; height: 22px; color: var(--route); margin-bottom: var(--sp-md); }
.perks p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.footnote-wide { margin-top: clamp(28px, 3vw, 40px); }

/* A driver's first question is "what does this actually pay?", so it is
   answered with two numbers rather than a sentence. */
.earnings { margin-top: var(--sp-lg); border-top: 1px solid var(--text); }
.earnings li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--sp-md); row-gap: 2px;
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--rule);
}
.earnings .e-when {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.earnings .e-amt {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.earnings .e-n { grid-column: 1; font-size: 13px; color: var(--muted); }
.driver-aside .footnote { margin-top: var(--sp-md); }

/* --------------------------------------------------------------------- faq */
.faq { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg);
  min-height: 60px; padding: var(--sp-md) 0;
  font-size: clamp(16px, 1.1vw, 18px); font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus that loses its upright on open, so the marker says "collapse" rather
   than just spinning. Two background layers, because two pseudo-elements would
   be two flex items and `space-between` would push them apart. */
.faq summary::after {
  content: ""; flex: none;
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 13px no-repeat;
  transition: background-size var(--d-base) var(--ease);
}
.faq details[open] summary::after { background-size: 13px 1px, 1px 0; }
.faq summary:hover { color: var(--route); }
.faq p { padding-bottom: var(--sp-xl); color: var(--muted); max-width: 64ch; }
.faq em { font-style: italic; color: var(--route); }

/* --------------------------------------------------------------------- end */
.sec-end .lede { margin-top: var(--sp-lg); }
.sec-end .hero-actions { margin-top: var(--sp-xl); }

/* ---------------------------------------------------------------- colophon */
.colophon { border-top: 1px solid var(--rule); }
.colophon-inner {
  max-width: var(--measure); margin-inline: auto;
  padding: var(--sp-xxl) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-lg) var(--sp-xl);
}
.footer-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.footer-brand .mark { width: 20px; height: 20px; }
.colophon nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--sp-xl); }
.colophon a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.colophon a:hover { color: var(--text); }
.colophon-legal { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

/* ═══════════════════════════════════════════════════ legal & support pages
   Privacy, terms, deleting an account, and support. Same masthead, same
   colophon, same rail — but the rail carries a table of contents instead of a
   one-word label, because these are the only pages someone arrives at looking
   for one particular paragraph.

   Nothing here is boxed. A policy that sets its promises in a tinted panel is
   deciding for the reader which of them matter; hairlines and space separate
   the sections and leave them all weighing the same.
   ========================================================================= */
.legal-wrap {
  position: relative;
  max-width: var(--measure); margin-inline: auto;
  padding-inline: var(--gutter);
}

.legal-head { border-bottom: 1px solid var(--rule); }
.legal-head .legal-wrap { padding-block: clamp(40px, 6vw, 84px) clamp(28px, 4vw, 48px); }
.legal-head h1 {
  margin-top: var(--sp-lg);
  font-size: clamp(34px, 5.2vw, 58px);
}
.legal-head .kicker { display: flex; align-items: center; gap: 12px; }
.legal-head .kicker::before {
  content: ""; width: 34px; height: 1px; background: var(--route); flex: none;
}
.legal-head .lede { margin-top: var(--sp-xl); }

/* Dates in the mono, like every other fact on the site. Two of them: when it
   changed, and when it started applying — which are not always the same day. */
.legal-meta {
  margin-top: var(--sp-xl);
  display: flex; flex-wrap: wrap; row-gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.legal-meta li { display: flex; align-items: center; }
.legal-meta li:not(:last-child)::after {
  content: ""; width: 1px; height: 11px; background: var(--rule-strong);
  margin-inline: 18px; opacity: .65;
}

.legal-body .legal-wrap { padding-block: clamp(36px, 5vw, 64px) clamp(52px, 7vw, 96px); }
.legal-split { display: grid; gap: clamp(28px, 4vw, 48px); }

/* ------------------------------------------------------------- contents */
.legal-toc-title {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
/* Wrapped chips while it sits above the text, a stacked index once it has a
   column of its own. Fourteen full-width rows at the top of a phone screen is
   a page you have to scroll past to start reading. */
.legal-toc ul { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.legal-toc a {
  display: inline-flex; align-items: center;
  min-height: var(--touch); padding: 0 var(--sp-md);
  border: 1px solid var(--rule); border-radius: 3px;
  font-size: 13px; color: var(--muted); text-decoration: none;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.legal-toc a:hover { color: var(--text); border-color: var(--rule-strong); }

@media (min-width: 1000px) {
  .legal-split {
    grid-template-columns: var(--rail-legal) minmax(0, 1fr);
    column-gap: var(--sec-gap);
    align-items: start;
  }
  .legal-body .legal-wrap::before {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--gutter) + var(--rail-legal));
    width: 1px; background: var(--rule);
  }
  .legal-toc {
    position: sticky; top: 78px;
    max-height: calc(100vh - 100px); overflow-y: auto;
    padding-right: var(--sp-xl);
  }
  .legal-toc ul { flex-direction: column; align-items: stretch; gap: 0; }
  .legal-toc a {
    padding: 0; border: 0; border-bottom: 1px solid var(--rule);
    border-radius: 0; line-height: 1.35;
  }
  .legal-toc li:last-child a { border-bottom: 0; }
}

/* ---------------------------------------------------------------- prose */
.legal-prose { max-width: 68ch; }
.legal-prose > section + section {
  margin-top: clamp(36px, 4.5vw, 56px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--rule);
}
.legal-prose h2 {
  font-size: clamp(23px, 2.4vw, 30px);
  /* Anchored from the contents, so the masthead must not land on top of it. */
  scroll-margin-top: 84px;
}
.legal-prose h3 { margin-top: var(--sp-xl); }
.legal-prose > section > * + * { margin-top: var(--sp-lg); }
.legal-prose p { color: var(--muted); }
.legal-prose h2 + p, .legal-prose h3 + p { margin-top: var(--sp-md); }
.legal-prose strong { color: var(--text); font-weight: 600; }

.legal-prose a {
  color: var(--route);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-prose a:hover { text-decoration-thickness: 2px; }

/* The node from the rail, shrunk to a bullet. */
.legal-prose ul li, .legal-prose ol li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
}
.legal-prose ul li + li, .legal-prose ol li + li { margin-top: var(--sp-sm); }
.legal-prose ul li::before {
  content: ""; position: absolute; left: 5px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--route);
}
.legal-prose ol { counter-reset: legal-step; }
.legal-prose ol li { counter-increment: legal-step; padding-left: 30px; }
.legal-prose ol li::before {
  content: counter(legal-step) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.9;
  color: var(--route);
}

/* Term on the left, plain-English answer on the right. This carries every list
   on these pages that would otherwise want to be a table — a table is the one
   layout a phone cannot narrow. */
.legal-defs { border-top: 1px solid var(--text); }
.legal-defs > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.legal-defs dt { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.legal-defs dd { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
@media (min-width: 720px) {
  .legal-defs > div {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    column-gap: var(--sp-xl);
    align-items: baseline;
  }
  .legal-defs dd { margin-top: 0; }
}

/* The short version, up top. Same rules as the readout on the home page: a
   heavy line above, hairlines between. */
.legal-summary {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--text);
}
.legal-summary-title {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.legal-summary ul { margin-top: var(--sp-lg); }
.legal-summary li {
  display: flex; align-items: flex-start; gap: var(--sp-md);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.legal-summary .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--route); }

/* What deleting an account does, in order. The numbers are the content here,
   so they are set like the stops on the home page rather than as list markers. */
.legal-steps { margin-top: var(--sp-xl); border-top: 1px solid var(--rule); }
.legal-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: var(--sp-md);
  padding: var(--sp-lg) 0;
  border-bottom: 1px solid var(--rule);
}
.legal-steps .step-n {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--route);
  padding-top: 2px;
}
.legal-steps p { margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.legal-contact { margin-top: var(--sp-xl); display: flex; flex-wrap: wrap; gap: var(--sp-md); }
.legal-prose .footnote { margin-top: var(--sp-xl); }

/* ══════════════════════════════════════════════════════════════════ motion
   One orchestrated sequence in the hero, and one reveal per element on scroll.
   Nothing loops: an ambient animation that never resolves is noise, and four
   of them at once is the thing that makes a page feel machine-made.
   Every element below rests in its *finished* state, so a page where the
   observer never runs is a page that is merely still.
   ========================================================================= */

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-deliberate) var(--ease-out),
              transform var(--d-deliberate) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
html:not(.js) .reveal { opacity: 1; transform: none; }

/* hero: road draws, van sets off, each pin lands as it is reached */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drawIn { from { stroke-dashoffset: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes vanRun { from { offset-distance: 6%; } }

.hero-copy > .kicker { animation: rise 520ms var(--ease-out) 40ms both; }
.hero-copy > h1      { animation: rise 620ms var(--ease-out) 120ms both; }
.hero-copy > .lede   { animation: rise 620ms var(--ease-out) 220ms both; }
.hero-copy > .hero-actions { animation: rise 620ms var(--ease-out) 300ms both; }
.hero-facts { animation: fade 700ms var(--ease-out) 700ms both; }

.road { stroke-dasharray: 1; animation: drawIn 900ms var(--ease-out) 150ms both; }
.road-dash { animation: fade 400ms linear 1000ms both; }
.pin-a { animation: drop 420ms var(--ease-out) 900ms both; }
.pin-b { animation: drop 420ms var(--ease-out) 2600ms both; }
/*
 * The van rides the road itself: the same two cubics, lifted 14 units so the
 * wheels sit on the stroke. It used to hop between eight sampled points, which
 * stutters — a timing function is re-applied between *every* pair of keyframes,
 * so each waypoint was a full stop. One property over one curve eases once.
 * It sets off and pulls up a little inside each end; centred on the very first
 * point, half the van hangs off the canvas. `offset-anchor: auto` reads
 * `transform-origin`, and 0 0 is what the van is drawn around.
 */
.hero-van {
  offset-path: path("M22 118C62 118 58 72 96 70s44-40 82-40");
  offset-rotate: 0deg;
  offset-distance: 77.5%;
  transform-box: view-box;
  transform-origin: 0 0;
}
.hero-art .hero-van { animation: vanRun 1500ms cubic-bezier(.45,0,.25,1) 1150ms both; }

/* Nothing to follow without motion paths, and the van's own origin sits half
   off the canvas — park it at journey's end instead. */
@supports not (offset-path: path("M0 0")) {
  .hero-van { transform: translate(140.3px, 46.3px); }
  .hero-art .hero-van { animation: none; }
}

/* corridor pins and the handover code play once, when they are reached */
.corridor-figure.is-playing .pin { animation: drop 420ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 150ms); }
.sec-ink.is-playing .pin-box { animation: fade 300ms linear both; animation-delay: calc(var(--i) * 150ms + 200ms); }
.sec-ink.is-playing .pin-box b { animation: drop 320ms var(--ease-out) both; animation-delay: calc(var(--i) * 150ms + 220ms); }
.sec-ink.is-playing .pin-verdict { animation: rise 420ms var(--ease-out) 900ms both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------- print */
@media print {
  .masthead, .nav-toggle, .theme-toggle, .skip-link, .hero-actions { display: none; }
  body { background: #fff; color: #000; }
  .sec-wrap { padding-block: 24px; }
  .sec-wrap::before { display: none; }
}