/* Archivo if the visitor happens to have it; otherwise the platform's
     grotesk. No webfont download and no CDN — see the note above. A site
     that blocks on a font it fetched from someone else is also just
     slower. */
  :root {
    --sans: "Archivo", "Archivo Variable", ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --page: min(68rem, calc(100% - 2.5rem));
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--wf-paper); color: var(--wf-ink);
    font-family: var(--sans); font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    position: relative; /* the map layer below is positioned against this */
  }
  h1, h2, h3 { line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  /* A link inside running text needs to look like one. Underline rather
     than colour, because the only colour that would read as "link" here
     is the amber, and the amber is spoken for — it means the live thing,
     and a page where four inline links are amber is a page where the
     amber has stopped meaning anything. */
  /* The footer keeps its own quieter treatment further down this file. */
  main p a:not(.cta), .check a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  main p a:not(.cta):hover, .check a:hover { text-decoration-color: currentColor; }
  .wrap { width: var(--page); margin-inline: auto; }

  /* ── The map behind the hero ──────────────────────────────────────
     A street graph with one route being driven across it. It is the
     product's own grammar at city scale — and the mark's, literally:
     ink field, muted track, one shorter amber range inside it.

     It is drawn rather than shipped as an image because a screenshot of
     a real map would be a third party's tiles, on a page whose whole
     claim is that it fetches nothing from anybody. The network is
     generated in the browser and is different on every load.

     Everything amber on this page is the same one live thing. The van
     is it. Stops go green as it passes them, because green here means a
     delivery settled, not "an accent I liked". */
  .mapbg {
    position: absolute; inset: 0 0 auto; height: min(112vh, 980px);
    z-index: 0; pointer-events: none; overflow: hidden;
    /* Fade out downward, and pull it off the left column where the
       headline sits. Contrast on the words wins over contrast on the
       decoration, every time. */
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0 42%, rgb(0 0 0 / 0.55) 74%, transparent 100%),
      linear-gradient(to right, rgb(0 0 0 / 0.28) 0, #000 62%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 0 42%, rgb(0 0 0 / 0.55) 74%, transparent 100%),
      linear-gradient(to right, rgb(0 0 0 / 0.28) 0, #000 62%);
    mask-composite: intersect;
  }
  .mapbg canvas { display: block; width: 100%; height: 100%; }
  main, footer { position: relative; z-index: 1; }

  /* ── Header ───────────────────────────────────────────────────── */
  header {
    position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--wf-paper) 88%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--wf-rule, #e5e1d8);
  }
  .bar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; }
  .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 650;
    letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.86rem; text-decoration: none; }
  .brand img { width: 26px; height: 26px; border-radius: 6px; display: block; }
  .bar nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
  /* :not(.cta) is load-bearing, not tidiness. `.bar nav a` outweighs
     `.cta` on specificity, so without it the button in the header took
     the muted link colour — ink-soft on ink, 2.2:1 — while the identical
     button in the hero sat at 17:1. A filled button whose label is the
     colour of the fill is the kind of bug that only shows up in one of
     the two places the component is used. */
  .bar nav a { font-size: 0.92rem; text-decoration: none; }
  .bar nav a:not(.cta) { color: var(--wf-ink-soft); }
  .bar nav a:not(.cta):hover { color: var(--wf-ink); }
  /* The page you are already on should not look like somewhere to go. */
  .bar nav a[aria-current="page"] { color: var(--wf-ink); font-weight: 600; }
  .cta {
    display: inline-block; background: var(--wf-ink); color: var(--wf-paper);
    text-decoration: none; font-weight: 600; padding: 0.6rem 1.1rem; border-radius: 999px;
    font-size: 0.94rem;
  }
  .cta--ghost { background: transparent; color: var(--wf-ink); border: 1px solid var(--wf-ink); }
  @media (max-width: 46rem) { .bar nav a:not(.cta) { display: none; } }

  /* ── Hero ─────────────────────────────────────────────────────── */
  .hero { padding: 5.5rem 0 3.5rem; }
  .hero h1 { font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 680; max-width: 30ch; }
  .hero .lede { margin-top: 1.4rem; font-size: clamp(1.05rem, 2.2vw, 1.32rem);
    color: var(--wf-ink-soft); max-width: 54ch; }
  .hero .actions { margin-top: 2.2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
  .amber { color: var(--wf-amber-deep, #9a5b00); }

  /* The one enormous arrival time, quoted from the product itself. */
  .phone {
    margin-top: 3.5rem; display: grid; gap: 1rem; grid-template-columns: 1fr;
    max-width: 26rem;
  }
  .card {
    background: var(--wf-paper-raised); border: 1px solid var(--wf-rule, #e5e1d8);
    border-radius: 1.1rem; padding: 1.3rem 1.4rem; box-shadow: 0 12px 34px rgb(0 0 0 / 0.07);
  }
  .eyebrow {
    font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--wf-ink-soft); font-weight: 650; margin-bottom: 0.5rem;
  }
  .clock { font-size: clamp(3.4rem, 11vw, 4.6rem); font-weight: 700; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; }
  .sub { color: var(--wf-ink-soft); font-size: 0.95rem; margin-top: 0.35rem; }
  .chip {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem;
    background: color-mix(in srgb, var(--wf-amber, #ffc940) 26%, transparent);
    color: var(--wf-amber-deep, #9a5b00); border-radius: 999px;
    padding: 0.3rem 0.7rem; font-size: 0.82rem; font-weight: 600;
  }
  /* currentColor so the dot is whichever amber the chip already resolved
     to — the deep one on paper, the bright one on ink. The pulse is the
     one looping thing allowed in the system, because a liveness
     indicator that has stopped moving is saying something. */
  .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
    animation: wf-live 2.8s ease-out infinite; }
  @keyframes wf-live {
    0%       { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

  /* ── Sections ─────────────────────────────────────────────────── */
  section { padding: 4.2rem 0; border-top: 1px solid var(--wf-rule, #e5e1d8); }
  .kicker { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--wf-ink-soft); font-weight: 650; }
  section h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 0.7rem; max-width: 34ch; }
  section .intro { margin-top: 1rem; color: var(--wf-ink-soft); max-width: 58ch; font-size: 1.05rem; }

  .grid { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
  .tile { background: var(--wf-paper-raised); border: 1px solid var(--wf-rule, #e5e1d8);
    border-radius: 1rem; padding: 1.3rem; }
  .tile h3 { font-size: 1.08rem; font-weight: 650; }
  .tile p { margin-top: 0.5rem; color: var(--wf-ink-soft); font-size: 0.96rem; }
  .tile .who { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--wf-amber-deep, #9a5b00); font-weight: 700; margin-bottom: 0.55rem; }

  /* The claim table — the part that is actually differentiating. */
  table { width: 100%; border-collapse: collapse; margin-top: 2.2rem; font-size: 0.96rem; }
  th, td { text-align: left; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--wf-rule, #e5e1d8);
    vertical-align: top; }
  th { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wf-ink-soft); }
  td:first-child { font-weight: 600; width: 38%; }
  td .no { color: var(--wf-clay, #ae4a3c); font-weight: 650; }
  td .yes { color: var(--wf-settled, #2e7d5b); font-weight: 650; }

  .steps { counter-reset: s; }
  .step { display: flex; gap: 1.1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--wf-rule, #e5e1d8); }
  .step:last-child { border-bottom: 0; }
  .step::before {
    counter-increment: s; content: counter(s); flex: none;
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--wf-ink); color: var(--wf-paper); font-size: 0.9rem; font-weight: 700;
  }
  .step h3 { font-size: 1.05rem; }
  .step p { margin-top: 0.3rem; color: var(--wf-ink-soft); font-size: 0.96rem; }

  code { font-family: var(--mono); font-size: 0.88em;
    background: var(--wf-paper-sunk); padding: 0.12em 0.4em; border-radius: 0.3rem; }

  .quote { font-size: clamp(1.2rem, 2.6vw, 1.6rem); max-width: 44ch; line-height: 1.35;
    font-weight: 500; }
  .quote--wide { max-width: 52ch; }

  footer { padding: 3rem 0 4rem; border-top: 1px solid var(--wf-rule, #e5e1d8);
    color: var(--wf-ink-soft); font-size: 0.9rem; }
  /* Grid rather than space-between flex. With three columns the flex
     version looked fine; the fourth had nowhere to go and dropped to its
     own row under the wordmark, leaving a hole where the third had been.
     auto-fit degrades 4 → 2 → 1 without ever stranding one. */
  footer .cols {
    display: grid; gap: 2.2rem 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  footer a { text-decoration: none; }
  footer a:hover { text-decoration: underline; }

  /* Night. Designed rather than inverted — a driver's windscreen at 21:00
     is the real case, and #fff on black is a headlight.

     Almost nothing is needed here, because tokens.css already flips every
     colour this page uses: --wf-ink is the text colour in both themes,
     --wf-paper the ground, --wf-amber-deep whichever amber is legible on
     the current ground. Restating them was worse than redundant — this
     block used to set `background: var(--wf-ink)`, which in dark mode is
     the near-white the text is drawn in, so the page came up light with
     invisible copy on it. A theme override that re-inverts an already
     inverted token is a bug the light theme can never show you. */
  @media (prefers-color-scheme: dark) {
    /* A drop shadow needs light above it to be cast from. */
    .card { box-shadow: none; }
  }