/* The landing page.
 *
 * THIS FILE REPRODUCES A DESIGN; IT DOES NOT PROPOSE ONE.
 *
 * `/` was a React page styled with Tailwind utilities plus inline values from the `T` theme object
 * in `lib/brand.ts`. Making it static HTML for SEO — 14 crawlable words became ~970 — did not
 * license changing how it looks, and the first attempt did: it dropped Public Sans and IBM Plex
 * Mono, turned the filled amber eyebrow into an outlined pill, turned the amber calls-to-action
 * asphalt, and removed every icon. Every value below is measured from the rendered original rather
 * than chosen, and `lib/landing-parity.test.ts` pins the colours to `lib/brand.ts` so the two cannot
 * drift again.
 *
 * WHY THIS IS STANDALONE and does not build on tools.css: that stylesheet is the calculator pages'
 * design — its `.wrap`, `h1` and `h2` rules would fight these, and its token set is a subset that is
 * missing `panel`, `mute`, `onInk` and `onAmber`, which is exactly what went wrong the first time.
 * The tokens here are the full `T` object, so the page has the same vocabulary the React version had.
 *
 * The numbers are Tailwind's, because the original was Tailwind:
 *   text-xs 12/16  text-sm 14/20  text-base 16/24  text-lg 18/28
 *   text-2xl 24/32  text-4xl 36/40  text-5xl 48/1  text-7xl 72/1
 *   rounded 4  rounded-lg 8  rounded-xl 12  rounded-2xl 16
 *   px-5 20  md:px-12 48  py-14 56  p-6 24  p-5 20  p-4 16
 */

/* ── tokens, from lib/brand.ts ───────────────────────────────────────────────────────────────────
   Four of these are CONSTANT across themes and that is deliberate in `brand.ts`: `onInk`, `mute`,
   `amber` and `onAmber` all paint on the emphasis surface, which is dark in both themes. Deriving
   them per-theme would put light-mode secondary text on a dark panel at 2.9:1. */
:root {
  --paper: #f4f6f8;
  --card: #ffffff;
  --ink: #171a1f;
  --sub: #5a6472;
  --line: #e2e6ea;
  --panel: #171a1f; /* T.panel = emphasisSurface */
  --green: #2b7455;
  --warn-bg: #fff7e0;
  --btn: #171a1f;
  --on-btn: #ffffff;
  --amber-ink: #8a6100;

  /* constant in both themes */
  --amber: #ffb400;
  --on-amber: #171a1f; /* dark type on the fill. White here is 1.8:1 and illegible. */
  --on-ink: #ffffff;
  --mute: #9aa3ae;

  /* hardcoded in the original's JSX rather than tokenised: the step card's border on the dark band */
  --step-line: #2a2f36;

  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1216;
    --card: #171a1f;
    --ink: #e8ebee; /* not pure white: #FFFFFF on a dark page haloes on OLED */
    --sub: #9aa3ae;
    --line: #2a3038;
    --panel: #1e232a;
    --green: #5fcf9b;
    --warn-bg: #2a2110;
    --btn: #e8ebee;
    --on-btn: #12161b;
    --amber-ink: #ffb400; /* dark inverts the problem: amber is light against this page */
  }
}

/* ── base ────────────────────────────────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
img,
svg {
  vertical-align: middle;
}

/* Focus is never removed, only shaped. `focusRing` is #171A1F in light and #FFB400 in dark. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: var(--amber);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 20px;
  top: 12px;
  z-index: 10;
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid var(--ink);
}

/* px-5 md:px-12, max-w-6xl mx-auto */
.shell {
  padding-left: 20px;
  padding-right: 20px;
}
.inner {
  max-width: 1152px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .shell {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* ── nav ─────────────────────────────────────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
/* The mark sits in a panel-coloured tile, as it did. */
.brand-mark {
  background: var(--panel);
  border-radius: 6px;
  padding: 6px;
  display: inline-flex;
}
.brand-word {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  line-height: 1;
}
/* THE MARK ALONE BELOW 375px, AND THE WORDMARK STAYS IN THE ACCESSIBILITY TREE.

   The row needs 327px at 320 and gets 280 — brand 130 + gap 12 + buttons 81 + 8 + 96 — so it wrapped
   to two rows on every phone narrower than 375, which includes 360px Android. That was true before
   the buttons reached 44px and is not something the height change caused; the fix is the 130px
   brand, because the button arithmetic does not reach. Both buttons at ZERO padding still leave only
   16.4px of slack across four sides, so 4px per side is the largest that fits and it fits by 1px.
   Dropping the wordmark frees 98px and the row lands at 229 against 280.

   `.sr-only` RATHER THAN `display: none`, and that is the whole care in this rule: the mark's SVG is
   `aria-hidden="true"`, so this span is the ONLY thing giving the anchor an accessible name. Hide it
   outright and the link home becomes an unlabelled link to a screen reader — a real regression
   traded for a layout nicety. Clipped, it is still announced as "RoadKept". */
@media (max-width: 374px) {
  .brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── the primary links ───────────────────────────────────────────────────────────────────────────
   Two lists of the same five links, one per width, because a closed <details> renders none of its
   children whatever CSS says and a menu that needs JavaScript is the wrong tool on a page whose
   `script-src` is 'self' and whose guide has no script at all. `.nav-links` is the inline row from
   768px; `.nav-menu` is the disclosure below it. `scripts/_lib/site-chrome.mjs` is the markup and
   says why. The header is NOT sticky: scrollcraft pins the acts with `position: sticky`, and a sticky
   header at top:0 would paint over every pinned stage. */
.nav {
  position: relative;
}
.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--amber-ink);
}
.nav .nav-signin {
  display: none;
}
.nav-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker {
  display: none;
}
.nav-menu > ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 70;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.nav-menu > ul a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.nav-menu > ul a:hover {
  background: var(--paper);
}
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
  .nav .nav-signin {
    display: inline-flex;
  }
  .nav-menu {
    display: none;
  }
}

/* ── buttons ─────────────────────────────────────────────────────────────────────────────────────
   Five in the original, three shapes. The AMBER fill is the primary action and carries `--on-amber`
   ink, ~10:1. An earlier rewrite of this page replaced amber with asphalt on the reasoning that
   white on #FFB400 is illegible — true, and the reason `onAmber` is ink rather than white. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
  line-height: 1.25;
}
/* nav scale: text-sm/600, rounded-lg, px-4 py-2.

   `min-height`, NOT MORE PADDING, and the reason is a defect CI found on 2026-08-21: the calculator
   fields carried padding and no height, so their size came from the font's line box and measured
   45px on Windows against 42px on the Linux runner — one platform over the 44px floor and one under.
   These buttons do set `line-height: 1.25` on `.btn`, so the arithmetic here would in fact be
   stable; declaring the requirement is still the better habit, because a rule that states 44 cannot
   drift to 43 when somebody changes the type scale.

   It also removes the need for the border compensation `.btn-sm.btn-outline` used to carry: at
   `min-height` both variants resolve to the same outer height whatever the border does, so that rule
   is gone with this change rather than left behind saying nothing. */
.btn-sm {
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  min-height: 44px;
  padding: 8px 16px;
}
/* in-page scale: text-base/700, rounded-xl, full width.

   12px OF BLOCK PADDING, NOT 10px, and the 44px it produces is the point rather than the padding.
   `src/index.css` applies a 44px floor to `.rk-control` by pointer type, on the reasoning that a
   1180px touchscreen is still a thumb; these anchors are not `.rk-control` and were 40px, so the
   landing page's own calls to action were the one place asking for a thumb and giving it less room
   than the app does. The `.btn-hero` rule that used to sit here set exactly this and nothing else —
   it was how the hero CTA reached 44px while the in-page ones stayed at 40. It is gone because it
   now says what `.btn-lg` says; the hero renders 44px either way. */
.btn-lg {
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  width: 100%;
  padding: 12px 0;
}
.btn-solid {
  background: var(--btn);
  color: var(--on-btn);
}
.btn-amber {
  background: var(--amber);
  color: var(--on-amber);
}
/* THE BORDER IS COMPENSATED PER SIZE, and the reason the earlier attempt failed is worth keeping.
   That attempt reasoned from `box-sizing: border-box` and concluded the border "eats into the box",
   so no compensation was needed — but border-box only redistributes when a height is SPECIFIED.
   These buttons are auto-height, so the 2px top and bottom are added outside the content box every
   time. Measured on the live page before this change: the pricing pair rendered 44px (outline) to
   40px (amber), and the nav pair 37.5px to 33.5px. The over-correction that produced "4px shorter"
   is the other half: 2px comes off EACH side, not 4px off each side.

   It is per size because each size sets its own vertical padding, and taking it out of the shorthand
   would restate that size's horizontal padding here where it would then drift. A third size pairing
   with the outline needs its own line — there is no general rule to inherit. */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn-lg.btn-outline {
  padding-block: 10px;
}

/* ── the sign chip ───────────────────────────────────────────────────────────────────────────────
   A FILLED amber chip with ink type — not an outline. `tracking-widest` is .1em; the original set
   .12em inline, which is what is used here. */
.chip {
  display: inline-block;
  font-family: var(--font-display);
  background: var(--amber);
  color: var(--on-amber);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 12px;
  margin: 0;
}

/* SECTION HEADINGS ARE HEADINGS, NOT CHIPS. Every <h2> on this page was `class="chip"`, so it
   rendered at 13px while the <h3> inside it rendered at 24px and the <h1> at 72px. The hierarchy
   was inverted: four sections had a label where their headline should be, and the largest type in
   each section belonged to its smallest unit. Same family, same weight, same uppercase treatment
   as the h1 and the h3 - this only puts the size in the right order. The chip rule above is
   untouched and still the hero eyebrow. */
.section-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 768px) {
  .section-title {
    font-size: 40px;
  }
}

/* ── hero ────────────────────────────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 64px;
}
@media (min-width: 768px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    padding-top: 64px;
  }
}

/* SENTENCE CASE, since 2026-09-04. The share card, the app and design turn 35 are all sentence
   case; the landing page alone was shouting the same six words in capitals, and read as a louder
   company than the one a driver then signed in to. The founder chose sentence case that day.
   Chips, kickers and labels keep their capitals — those are labels, not sentences.
   THE CLAMP is the tablet band: at exactly 768px the 72px face wrapped "Never fear a / tax bill" to
   four lines with "a" alone on one. 7.5vw reaches 72px at 960px and never breaks the phrase. */
.hero h1 {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 0;
}
@media (min-width: 768px) {
  .hero h1 {
    font-size: clamp(48px, 7.5vw, 72px);
  }
}
.hero h1 .accent {
  color: var(--green);
}
.hero-sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--sub);
  max-width: 448px;
  margin: 20px 0 0;
}
.hero-trust {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── the trust strip ─────────────────────────────────────────────────────────────────────────────
   Three links under the hero, each to the page that proves it. Secondary text, hairline-separated;
   it is evidence, not a call to action, and the amber stays with the calculator's button. */
.trust {
  list-style: none;
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  font-weight: 600;
}
.trust a {
  color: var(--sub);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.trust a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  margin-right: 8px;
}
.trust a:hover {
  color: var(--ink);
}

/* ── the product act ─────────────────────────────────────────────────────────────────────────────
   Three of the product's surfaces, drawn from the same tokens the app uses: a card on paper, a
   hairline, figures in the mono face so digits align, and one lead figure per screen. Flat, as the
   app is — no shadow anywhere in the product, so none here. */
.screens {
  align-items: start;
}
.screen {
  padding: 20px;
}
.screen__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 0 0 8px;
}
.screen__lead {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.screen__lead .fig {
  color: var(--green);
}
.screen__say {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sub);
  margin: 10px 0 0;
}
.screen__rows {
  margin: 14px 0 0;
  padding: 0;
}
.screen__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.screen__rows dt {
  color: var(--sub);
}
.screen__rows dd {
  margin: 0;
  color: var(--ink);
}
.fig {
  font-family: var(--font-mono);
  font-weight: 600;
}
.screen__items {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.screen__items li {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--sub);
}
.screen__items b {
  color: var(--ink);
  font-weight: 600;
}
.screen__refuse {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--amber-ink);
}

/* ── cards ───────────────────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}

/* ── the hero calculator ─────────────────────────────────────────────────────────────────────── */

.minicalc {
  box-shadow: 0 24px 60px rgba(23, 26, 31, 0.18);
}
@media (prefers-color-scheme: dark) {
  .minicalc {
    box-shadow: none;
  }
}
.minicalc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.minicalc-head span {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.minicalc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.minicalc label {
  display: block;
}
.minicalc label span {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sub);
}
/* `min-height` RATHER THAN MORE PADDING, because the 44px is the requirement and the padding is an
   implementation of it: 18px type inside 8px of padding and a 1px border measured 41px, and the
   arithmetic that lands on 44 changes the moment the font size does. `box-sizing: border-box` is set
   globally at the top of this file, so 44 here is the outer height. */
.minicalc input {
  margin-top: 4px;
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 18px;
  font-family: var(--font-mono);
}

/* The answer sits on the emphasis surface in BOTH themes, which is why its caption, figure and note
   are the constant tokens rather than the per-theme ones. */
.minicalc-out {
  margin-top: 20px;
  border-radius: 12px;
  background: var(--panel);
  padding: 16px;
}
.minicalc-out .cap {
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
}
.minicalc-out .fig {
  font-family: var(--font-mono);
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  color: var(--on-ink);
  margin-top: 4px;
}
.minicalc-out .note {
  font-size: 12px;
  line-height: 16px;
  color: var(--mute);
  margin-top: 8px;
}
.minicalc .btn {
  margin-top: 20px;
}
.disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
  margin: 12px 0 0;
}

/* ── sections ────────────────────────────────────────────────────────────────────────────────── */

.section {
  padding-top: 56px;
  padding-bottom: 56px;
}
.grid-2,
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
.grid-3 {
  gap: 24px;
}
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin: 12px 0 0;
}
.feature p {
  font-size: 14px;
  line-height: 1.625;
  color: var(--sub);
  margin: 8px 0 0;
}

/* FOUR IDENTICAL CARDS WERE THE WHOLE PROBLEM. Same surface, same green icon, same shape, four
   times, on a page that carries no photography at all - so the section a driver is meant to read
   was the flattest thing on it and nothing in it was ranked above anything else.
   Two of the four cards are ABOUT a number: the mid-year rate split and the size of the deduction
   taxonomy. Those numbers were set as body prose between em-dashes. Setting them as figures is
   where the variation comes from, so it is earned by the content rather than painted on: two cells
   read as data, two read as prose, and the difference means something.
   No new colour and no new font. `--paper` inset inside `--card` is the same recess `.lock`
   already uses, and IBM Plex Mono is already loaded for the hero's set-aside figure - it is the
   face this page uses when a number is the message. Radius steps 16 outer to 12 inner, as the
   card and `.lock` already do. */
.stats {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
}
.stat {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.stat-cap {
  font-size: 12px;
  line-height: 16px;
  color: var(--sub);
}
.stat-fig {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  color: var(--ink);
  margin: 2px 0 0;
}

/* ── how it works: the emphasis band ─────────────────────────────────────────────────────────── */

.band {
  background: var(--panel);
  padding-top: 56px;
  padding-bottom: 56px;
}
.step {
  border: 1px solid var(--step-line);
  border-radius: 16px;
  padding: 24px;
}
.step .n {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--amber);
}
.step h3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 8px 0 0;
}
.step p {
  font-size: 14px;
  line-height: 20px;
  color: var(--mute);
  margin: 8px 0 0;
}

/* ── pricing ─────────────────────────────────────────────────────────────────────────────────── */

.plans {
  max-width: 768px;
}
/* THE CTA WAS FLUSH AGAINST THE LAST BULLET, AND THE TWO CTAs DID NOT LINE UP. The list carries no
   bottom margin, so "Start free" sat 0px under "5 receipt scans a month"; and because Free has three
   bullets to Pro's four, the grid's equal-height cards left 96px of dead space under Free's button
   while Pro's sat 26px off the floor. Column flex with `margin-top: auto` on the button solves both:
   the 20px is a floor rather than a fixed gap, and the leftover height is absorbed above the CTA so
   both buttons land on the same line. */
.plan {
  display: flex;
  flex-direction: column;
}
.plan > .btn {
  margin-top: auto;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plan h3 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.plan .price {
  font-family: var(--font-mono);
  font-size: 30px;
  line-height: 36px;
  color: var(--ink);
  margin-top: 4px;
}
.plan .price .per {
  font-size: 16px;
  color: var(--sub);
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--sub);
}
.plan li {
  position: relative;
  padding-left: 16px;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.plan li + li {
  margin-top: 8px;
}
.plan-pro {
  border: 2px solid var(--amber);
}

.lock {
  max-width: 768px;
  margin-top: 24px;
  border-radius: 12px;
  background: var(--warn-bg);
  border: 1px solid var(--amber);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.lock strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.lock p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub);
  margin: 4px 0 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────────────────────────────
   `<details>` rather than the original's React accordion, and this is the ONE deliberate departure
   in this file. The React version kept each answer out of the DOM until its heading was clicked, so
   nine ready-made answers were invisible to crawlers and to anyone with JavaScript off — while the
   page shipped FAQPage schema describing them. The visual result is the same: same card, same row
   padding, same bold question, same chevron. */
.faq {
  max-width: 768px;
  margin-top: 24px;
}
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.faq details + details {
  margin-top: 8px;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary svg {
  flex-shrink: 0;
  color: var(--sub);
}
.faq details[open] summary svg {
  transform: rotate(180deg);
}
.faq details > p {
  margin: 0;
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 1.625;
  color: var(--sub);
}

/* ── footer ──────────────────────────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-top: 40px;
  padding-bottom: 40px;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--sub);
  margin-bottom: 12px;
}
.site-footer a {
  color: var(--sub);
  text-decoration: underline;
  position: relative;
}
/* THE ONE THING HERE THAT IS NOT A REPRODUCTION. These links render 18px tall in the original,
   which is under WCAG 2.2 SC 2.5.8's 24px minimum target size (Level AA) — a pre-existing property
   rather than something the static rewrite introduced, confirmed by measuring the saved page.
   Extending the hit area with a pseudo-element rather than padding fixes it while changing the
   layout by exactly nothing: the box a thumb can hit becomes 26px, the box a reader sees does not
   move. axe does not flag target size, so this would not have been caught by the suite. */
.site-footer a::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
}
.site-footer .legal {
  font-size: 12px;
  line-height: 1.6;
  color: var(--sub);
  max-width: 42rem;
  margin: 0 0 8px;
}

/* Guard 10: durations stay on the app's scale, and money never transitions. The chevron is the only
   moving part, and it is not a figure. */
@media (prefers-reduced-motion: no-preference) {
  .faq summary svg {
    transition: transform 150ms ease;
  }
  .btn {
    transition: opacity 150ms ease;
  }
  .btn:hover {
    opacity: 0.9;
  }
}

/* ── the signups-paused banner ───────────────────────────────────────────────────────────────────
   Inserted by `src/landing/signup-pause.ts` only when the control plane says signups are off, so it
   is absent from the served document and costs nothing on the ordinary path.

   `--warn-bg` and `--amber-ink` rather than a new pair: both are already defined for BOTH themes in
   the token block above, which is what stops this reading as light type on a light ground when a
   visitor's system is dark. The banner is a standing condition, not an error, so it takes the amber
   surface the page already uses for one and not a red it does not have. */
#signup-pause {
  background: var(--warn-bg);
  color: var(--amber-ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.75rem 1.25rem;
  text-align: center;
  text-wrap: balance;
}

/* THE SENTENCE A PRICING CARD ENDS IN WHILE THERE IS NOTHING TO BUY. `signup-pause.ts` puts it where
   the card's button was, so it takes the button's place in the layout rather than leaving a gap under
   the list. Secondary text on purpose: it is a fact about the plan, not a call to do anything. */
.plan-note {
  margin: 20px 0 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--sub);
}