below is index.html's, copied whole (script-src and
     style-src rule out a shared stylesheet); when one changes, copy it
     across. The link preview is index.html's image for now: a Trekka card,
     rendered the same way from docs/og-image/og-image.html, would suit this
     page better. -->

<style>
/* Inlined deliberately, like privacy.html and terms.html: one request, no
   stylesheet to 404, no CDN. The one outside call is Cloudflare's visit
   count (owner, 28 September 2026): no cookies, nothing that identifies
   anyone, disclosed in privacy.html section 6, and never on privacy.html or
   terms.html, which still load no script at all. The one font is
   served from this origin, never from Google. */

/* Gabarito, the closest thing in a licensed face to the wordmark's own
   rounded monoline geometry. Headings and figures only; body copy stays on
   the system font, which costs nothing and reads better at 17px. Subset to
   Latin plus the macron, multiplication sign and dashes this site uses, and
   kept variable so 600-850 all come out of one 43 KB file. SIL Open Font
   Licence 1.1 - the full text sits beside it in gabarito-OFL.txt. */
@font-face {
  font-family: "Gabarito";
  src: url("../gabarito-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Built from the app's seed colour, #1B4B5A (lib/main.dart). */
  --bg: #F4F7F7;
  --card: #FFFFFF;          /* the light surface the rarity ramp is tested on */
  --ink: #0F2329;
  --muted: #4A5E64;
  --rule: #D3DEE0;
  --teal: #1B4B5A;
  --link: #1B4B5A;
  --tint: #E6EFF1;
  --focus: #1B4B5A;
  --band: #1B4B5A;
  --band-ink: #F2F6F7;
  --band-muted: #BCD2D8;
  --bar: #5F8894;
  --bar-hi: #1B4B5A;
  --amber: #F28C28;         /* brand moments only: never text, never a grade */
  --shadow: 0 1px 2px rgba(15, 35, 41, .06), 0 10px 28px rgba(15, 35, 41, .08);

  /* The rarity ramp, exactly as lib/src/ui/rarity_badge.dart. Do not adjust:
     test/rarity_contrast_test.dart clears AA against white (light) and
     #121A1B (dark), which is why badges only ever sit on --card. */
  --r-common: #656C79;
  --r-uncommon: #2C7766;
  --r-scarce: #5B4B9E;
  --r-rare: #A7540E;
  --r-unicorn: #9B1B4B;        /* wire name `unicorn`, shown as "Super rare" */
  --r-true-unicorn: #7A5C00;   /* wire name `true_unicorn`, shown as "Unicorn" */

  /* Chrome, plate and tarmac. A number plate stays white in both themes,
     because a real one is reflective white either way — it is the only
     fixed-colour surface on the page. */
  --plate: #F7FAFA;
  --plate-ink: #17414E;
  --plate-bolt: #BAC6CB;
  --chrome-hi: rgba(255, 255, 255, .85);
  --chrome-lo: rgba(15, 35, 41, .10);
  --flute: #C9620C;
  --tarmac: #263134;
  --tarmac-ink: #E9EFF0;
  --paint: rgba(255, 255, 255, .72);   /* road marking white */
  --glint: rgba(242, 140, 40, .30);

  --wrap: 70rem;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --plate-font: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow",
    "Helvetica Neue Condensed", var(--sans);
  --display: "Gabarito", var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A1112;
    --card: #121A1B;        /* = darkSurface in rarity_contrast_test.dart */
    --ink: #E4ECED;
    --muted: #9FB3B7;
    --rule: #243336;
    --link: #7CC3D6;
    --tint: #10262B;
    --focus: #7CC3D6;
    --band: #133A45;
    --band-muted: #B3CBD1;
    --bar: #4F7C88;
    --bar-hi: #7CC3D6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
    --chrome-hi: rgba(255, 255, 255, .07);
    --chrome-lo: rgba(0, 0, 0, .45);
    --tarmac: #18201F;
    --glint: rgba(242, 140, 40, .16);

    --r-common: #888D99;
    --r-uncommon: #339E86;
    --r-scarce: #9085BE;
    --r-rare: #DE6A08;
    --r-unicorn: #E9548C;
    --r-true-unicorn: #E3B341;
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  /* The catch of light off the headlight in the wordmark, thrown across the
     top of the page. Amber is a brand moment only, never text — BRAND.md. */
  background:
    radial-gradient(30rem 24rem at 76% 4rem, var(--glint), transparent 72%),
    radial-gradient(46rem 30rem at 96% -4rem, var(--glint), transparent 74%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

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

.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: 12px; top: -120px; z-index: 30;
  background: var(--card); color: var(--ink); padding: 12px 16px;
  border-radius: 8px; box-shadow: var(--shadow); font-weight: 600;
}
.skip:focus { top: 12px; }

@media (max-width: 700px) {
  :root { --glint: rgba(242, 140, 40, .20); }
}
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  :root { --glint: rgba(242, 140, 40, .11); }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

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

h1, h2, h3 { font-family: var(--display); line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(1.75rem, 4.6vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.num { font-variant-numeric: tabular-nums; }

/* Anything set large and set in figures follows the headings onto Gabarito,
   so the page has one display voice rather than two. */
.hero .kicker, .cta-head, .btn, .vcount strong, .versus-fig strong, .stats dd,
.closing-line, .no-banner .big, .ladder .band,
.diverge blockquote { font-family: var(--display); }

/* ---------- Section marker: the plate, shrunk to a label ----------
   spotto-plate.svg is the brand's sticker: a personalised plate with a double
   teal border and two mounting bolts. The same device labels every section
   here. A New Zealand plate holds six characters, which is why these read
   short and blunt rather than like headings. */

.plate-label {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 7px 12px;
  background: var(--plate); color: var(--plate-ink);
  border: 2.5px solid var(--plate-ink); border-radius: 8px;
  /* The inner keyline of the sticker, drawn as two stacked inset rings. */
  box-shadow: inset 0 0 0 1.5px var(--plate), inset 0 0 0 3px var(--plate-ink),
              0 1px 0 var(--chrome-lo);
  font-family: var(--plate-font);
  font-size: .95rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1;
}
/* The two bolts that hold a plate to the bumper. */
.plate-label::before, .plate-label::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--plate-bolt); flex: none;
}

/* ---------- Chrome ----------
   Cards catch a highlight along the top edge and drop a hard line off the
   bottom, the way a bezel does. It is the difference between a panel and a
   piece of trim, and it is most of what stops these reading as stock cards. */

.chrome {
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
}

.lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 40rem; }
.lede.gap { margin-top: 14px; }
blockquote p { margin: 0; }

section { padding: clamp(44px, 6vw, 72px) 0; }
.section-head { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head h2 { margin-bottom: 14px; }

/* ---------- Header and the five topics ----------
   Five topics a jump away instead of one long scroll (the five-topic draft,
   26 September 2026). Plain links to ids on the page, so script-src 'none'
   stands. On a phone the wordmark row scrolls away and only the topic row
   sticks: that is what the negative top does. From 900px it is one row, and
   all of it sticks, the web button included. */

:root { --brand-row: 60px; --topic-row: 50px; --header-row: 68px; }

.site-header {
  position: sticky; top: calc(-1 * var(--brand-row)); z-index: 20;
  background: rgba(244, 247, 247, .9);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--rule);
}
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(10, 17, 18, .88); background: color-mix(in srgb, var(--bg) 86%, transparent); }
}
.site-header .wrap {
  display: grid; align-items: center; column-gap: 16px;
  grid-template-columns: 1fr auto;
  grid-template-rows: var(--brand-row) var(--topic-row);
  grid-template-areas: "brand cta" "topics topics";
}
.wordmark { grid-area: brand; justify-self: start; display: inline-block; line-height: 0; border-radius: 6px; }
.wordmark img { width: 120px; height: auto; }

/* The web button, small: the hero's big one is a scroll away. */
.header-cta {
  grid-area: cta;
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--teal); color: #F2F6F7;
  font-family: var(--display); font-weight: 700; font-size: .92rem; text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { background: #163E4B; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .header-cta { background: #7CC3D6; color: #0A1112; }
  .header-cta:hover { background: #9AD2E1; }
}

/* Edge to edge on a phone, so five labels fit across 375px; if a narrower
   screen can't take them, the row scrolls sideways rather than wrapping. */
.topics {
  grid-area: topics; align-self: stretch;
  display: flex; align-items: center;
  margin-inline: calc(-1 * var(--gutter));
  overflow-x: auto; scrollbar-width: none;
}
.topics::-webkit-scrollbar { display: none; }
.topics ul {
  list-style: none; margin: 0; padding: 0 max(6px, calc(var(--gutter) - 12px));
  display: flex; justify-content: space-between; gap: 0;
  width: 100%; min-width: max-content;
}
.topics a {
  display: flex; align-items: center; height: 38px; padding: 0 9px;
  border-radius: 8px; color: var(--muted);
  font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
}
.topics a:hover { color: var(--ink); background: var(--tint); text-decoration: none; }
/* Where you are: the section marker's plate, shrunk once more. */
.topics a[aria-current] {
  background: var(--plate); color: var(--plate-ink);
  box-shadow: inset 0 0 0 2px var(--plate-ink);
}

/* The narrowest phones (360px): a little tighter, so the five still fit. */
@media (max-width: 370px) {
  .topics a { padding: 0 7px; font-size: .94rem; }
}

@media (min-width: 900px) {
  .site-header { top: 0; }
  .site-header .wrap {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: var(--header-row);
    grid-template-areas: "brand topics cta";
  }
  .wordmark img { width: 132px; }
  .topics { margin: 0; overflow: visible; justify-content: center; }
  .topics ul { justify-content: center; gap: 6px; width: auto; min-width: 0; padding: 0; }
  .topics a { padding: 0 14px; }
}

/* At the very top the header is clear, so the headlight's glint runs up
   behind the wordmark as it always has, and it frosts over in the first
   80px of scroll. Scroll-driven, so still CSS; without it the header is
   simply frosted from the start. */
@keyframes header-frost {
  from {
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports (animation-timeline: scroll()) {
  .site-header {
    animation-name: header-frost; animation-duration: auto;
    animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(); animation-range: 0px 80px;
  }
}

/* Landing on a topic puts its first section right under the header. */
.topic { scroll-margin-top: var(--topic-row); }
@media (min-width: 900px) { .topic { scroll-margin-top: var(--header-row); } }

/* ---------- Rarity badge (the app's RarityBadge, in HTML) ---------- */

.badge {
  --c: var(--r-common);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px;
  border: 1.5px solid var(--c);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: .8125rem; font-weight: 700; letter-spacing: .2px; line-height: 1.25;
  white-space: nowrap;
}
.badge svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.badge[data-g="common"]   { --c: var(--r-common); }
.badge[data-g="uncommon"] { --c: var(--r-uncommon); }
.badge[data-g="scarce"]   { --c: var(--r-scarce); }
.badge[data-g="rare"]     { --c: var(--r-rare); }
.badge[data-g="unicorn"]  { --c: var(--r-unicorn); }
/* The sixth grade (14 September 2026). data-g follows the app's wire names,
   not its labels: "unicorn" is the 5-24 band and reads "Super rare";
   "true_unicorn" is under 5 and reads "Unicorn". See catalogue_enums.dart. */
.badge[data-g="true_unicorn"] { --c: var(--r-true-unicorn); }

/* ---------- Vehicle card (built from catalogue data, not a screenshot) ---------- */

.vcard {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
}
.vmeta { margin: 0 0 4px; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vname { margin: 0 0 12px; font-size: 1.15rem; font-weight: 750; line-height: 1.25; letter-spacing: -0.01em; }
.vname .gen { font-weight: 500; color: var(--muted); white-space: nowrap; }
.nw { white-space: nowrap; }
.vcount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; white-space: nowrap; margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.vcount strong {
  font-size: 2.1rem; line-height: 1; font-weight: 800; color: var(--ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.vvs {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: .92rem;
}
.quip { margin: 0 0 10px; font-size: .88rem; font-style: italic; color: var(--muted); }

/* ---------- Buttons and the CTA ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  border-radius: 999px;
  background: var(--teal); color: #F2F6F7;
  font-weight: 700; font-size: 1.02rem; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 6px 18px rgba(27, 75, 90, .28);
}
.btn:hover { background: #163E4B; text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .btn { background: #7CC3D6; color: #0A1112; box-shadow: none; }
  .btn:hover { background: #9AD2E1; }
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The second choice under the main button: the same shape, outlined. */
.btn-secondary { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.btn-secondary:hover { background: rgba(27, 75, 90, .08); }
@media (prefers-color-scheme: dark) {
  .btn-secondary { background: transparent; color: #7CC3D6; box-shadow: inset 0 0 0 2px #7CC3D6; }
  .btn-secondary:hover { background: rgba(124, 195, 214, .12); }
}
.cta-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-buttons .btn { min-width: min(19rem, 100%); }

.cta { margin-top: 28px; }
.cta-head { margin: 0 0 12px; font-size: 1.15rem; font-weight: 750; }
.cta-note { margin: 12px 0 0; font-size: .9rem; color: var(--muted); max-width: 30rem; }
.play { display: inline-block; line-height: 0; border-radius: 8px; }
.play img { width: 200px; height: auto; }

/* ---------- Hero ---------- */

.hero { padding: clamp(24px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.hero .wrap { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1.15fr .85fr; } }

.hero h1 {
  font-size: clamp(2.55rem, 8.4vw, 4.6rem);
  font-weight: 850; letter-spacing: -0.035em; line-height: 1.0;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero .kicker {
  margin: 0 0 18px; max-width: 22ch; text-wrap: balance;
  font-size: clamp(1.35rem, 3.4vw, 1.75rem); font-weight: 750; letter-spacing: -0.02em;
  color: var(--teal);
}
@media (prefers-color-scheme: dark) { .hero .kicker { color: #7CC3D6; } }

.hero-cards { position: relative; max-width: 26rem; justify-self: center; width: 100%; }
.hero-cards .vcard--back { margin-right: 14%; transform: rotate(-2.2deg); }
.hero-cards .vcard--front { margin: -14px 0 0 12%; transform: rotate(1.6deg); z-index: 1; }
.hero-caption { margin: 22px 0 0; text-align: center; font-size: .88rem; color: var(--muted); }

/* ---------- Inversion ---------- */

.grid-cards { display: grid; gap: 16px; }
@media (min-width: 620px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-cards { grid-template-columns: repeat(4, 1fr); } }
/* Dealt out on a table rather than set in a row. The nudges are small enough
   to read as hand-placed and not as a broken grid. */
@media (min-width: 1040px) {
  .deal > :nth-child(1) { transform: translateY(10px) rotate(-.7deg); }
  .deal > :nth-child(2) { transform: translateY(-6px) rotate(.5deg); }
  .deal > :nth-child(3) { transform: translateY(14px) rotate(.8deg); }
  .deal > :nth-child(4) { transform: translateY(-2px) rotate(-.4deg); }
}

.versus {
  margin-top: 28px;
  display: grid; gap: 8px 28px; align-items: center;
  background: var(--tint); border-radius: var(--radius);
  padding: clamp(22px, 4vw, 34px);
  border-left: 5px solid var(--amber);
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
}
@media (min-width: 760px) { .versus { grid-template-columns: auto auto 1fr; } }
.versus-fig { display: flex; align-items: baseline; gap: 10px; }
.versus-fig strong { font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 850; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.versus-fig span { font-size: .95rem; color: var(--muted); line-height: 1.3; }
.versus p { margin: 0; font-size: 1.05rem; }

/* ---------- How it works ---------- */

/* Three steps strung along a centre line rather than parked in three
   identical boxes. The dashes are a New Zealand road marking: 2 m of paint
   to 4 m of gap, near enough. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 34px; counter-reset: step; position: relative;
}
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0 34px; }
  .steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 3px;
    background: repeating-linear-gradient(to right,
      var(--rule) 0 26px, transparent 26px 78px);
  }
}
.steps li { counter-increment: step; position: relative; padding-top: 60px; }
/* The counter sits in an amber lens with a chrome bezel: the last o of the
   wordmark, doing a job. */
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--amber); color: #3A1E02;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 3px var(--teal), inset 0 2px 0 rgba(255, 255, 255, .45);
  font-weight: 850; font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) {
  .steps li::before { border-color: var(--bg); box-shadow: 0 0 0 3px #7CC3D6, inset 0 2px 0 rgba(255, 255, 255, .35); }
}
.steps h3 { margin-bottom: 8px; font-size: 1.3rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- Regional ---------- */

.regional { background: var(--card); border-block: 1px solid var(--rule); }
.regional .wrap { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 940px) { .regional .wrap { grid-template-columns: 1fr 1fr; align-items: start; } }

.diverge { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; margin: 26px 0 20px; box-shadow: var(--shadow); }
.diverge .badges { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 14px; }
.diverge .badge-label { font-size: .82rem; color: var(--muted); margin-right: 2px; }
.diverge blockquote { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.45; }

.more-diverge { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.more-diverge li { padding-left: 16px; border-left: 3px solid var(--rule); color: var(--muted); font-size: .95rem; }
.more-diverge li strong { color: var(--ink); }

.chart { margin: 0; }
.chart figcaption { margin-bottom: 18px; }
.chart figcaption strong { display: block; font-size: 1.05rem; }
.chart figcaption span { display: block; color: var(--muted); font-size: .9rem; }
.bars { width: 100%; border-collapse: collapse; }
.bars th, .bars td { padding: 7px 0; vertical-align: middle; }
.bars th { text-align: left; font-weight: 500; font-size: .92rem; width: 9.5rem; padding-right: 12px; line-height: 1.25; }
.bars td { position: relative; }
.bar-track { position: relative; display: block; height: 14px; margin-right: 3.4rem; }
/* 1x marks the national average: 1/6 of a 0-6x scale. */
.bar-track::after {
  content: ""; position: absolute; top: -6px; bottom: -6px; left: calc(100% / 6);
  border-left: 1.5px dashed var(--muted); opacity: .7;
}
.bar {
  display: block; height: 14px; width: calc(var(--v) / 6 * 100%);
  background: var(--bar); border-radius: 0 4px 4px 0;
}
.hi .bar { background: var(--bar-hi); }
.hi th { font-weight: 750; }
.bar-val { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: .9rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.hi .bar-val { color: var(--ink); font-weight: 750; }
.withheld { margin-top: 18px; font-size: .88rem; color: var(--muted); }

/* ---------- The Assembly Line ---------- */

/* Tarmac, with a seal edge top and bottom. The section is a drive down the
   country, so it may as well look like one. */
.assembly {
  background: var(--tarmac); color: var(--band-ink);
  border-block: 4px solid var(--band);
}
.assembly h2 { font-size: clamp(2rem, 5.6vw, 3.3rem); }
.assembly .lede { color: var(--band-muted); }
.assembly a { color: var(--band-ink); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0 0 clamp(40px, 6vw, 60px); background: rgba(242, 246, 247, .16); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div {
  background: var(--band); padding: 18px 18px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.stats dt { font-size: .85rem; color: var(--band-muted); }
.stats dd { margin: 0 0 2px; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 850; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* A trip down the country, north to south, as plant.dart orders it. */
.route { list-style: none; margin: 0; padding: 0; }
.stop { position: relative; padding: 0 0 36px 34px; }
.stop::before {
  content: ""; position: absolute; left: 8px; top: 12px; bottom: -12px; width: 4px;
  background: repeating-linear-gradient(to bottom,
    var(--paint) 0 18px, transparent 18px 40px);
  opacity: .75;
}
.stop:last-child::before { display: none; }
/* Each stop is a headlight on the road: amber lens, chrome bezel, and the
   catch of light the wordmark has. */
.stop::after {
  content: ""; position: absolute; left: -1px; top: 3px; width: 21px; height: 21px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .85) 0 2.5px, transparent 3px),
    var(--amber);
  box-shadow: 0 0 0 3px var(--tarmac), 0 0 0 5.5px #F2F6F7,
              0 0 16px 3px rgba(242, 140, 40, .5);
}
.stop > h3 { font-size: 1.35rem; margin-bottom: 14px; color: var(--band-ink); }
.stop > h3 span { font-weight: 500; color: var(--band-muted); font-size: 1rem; margin-left: 6px; }

.plants { display: grid; gap: 12px; }
@media (min-width: 700px) { .plants { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .plants { grid-template-columns: repeat(3, 1fr); } }
.plant {
  background: var(--card); color: var(--ink);
  border-radius: 12px; padding: 16px 16px 6px;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 2px 0 rgba(0, 0, 0, .3);
}
.plant h4 { margin: 0; font-size: 1rem; line-height: 1.3; }
.plant .where { margin: 2px 0 10px; font-size: .82rem; color: var(--muted); }
.plant ul { list-style: none; margin: 0; padding: 0; }
.plant li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--rule);
}
.plant .car { font-weight: 650; line-height: 1.3; }
.plant .car small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.plant .left { text-align: right; line-height: 1.2; }
.plant .footnote { grid-column: 1 / -1; margin: 4px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.45; }

.closing-line { margin: 12px 0 0; font-size: clamp(1.25rem, 3vw, 1.6rem); font-weight: 750; letter-spacing: -0.015em; max-width: 36rem; }

/* ---------- The count: one car, however the register spells it ---------- */

.clean { background: var(--card); border-block: 1px solid var(--rule); }
.spelled { display: grid; gap: 22px 36px; align-items: center; }
@media (min-width: 940px) { .spelled { grid-template-columns: minmax(0, 1.35fr) auto minmax(0, .85fr); } }
.spellings { margin: 0; }
.spellings figcaption { margin-bottom: 16px; }
.spellings figcaption strong { display: block; font-size: 1.05rem; }
.spellings figcaption span { display: block; color: var(--muted); font-size: .9rem; }
/* The register's own text, as typed: capitals and all. */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--rule);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .84rem; letter-spacing: .02em; color: var(--ink);
}
.chips b { font-family: var(--display); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.chips .typo { padding: 4px 10px; font-size: .76rem; color: var(--muted); }
.chips .typo b { font-weight: 600; }
.chips .more { background: none; border-style: dashed; font-family: var(--sans); letter-spacing: 0; }
/* The one spelling a plain search finds: the amber edge of the panel
   below, which puts its 1,029 beside the 7,180. A border, never text. */
.chips .searched { border: 2px solid var(--amber); background: var(--card); }
.adds-up { margin: 0; text-align: center; font-family: var(--display); font-weight: 750; font-size: .95rem; color: var(--muted); }
.adds-up span { display: block; font-size: 2.4rem; line-height: 1; color: var(--ink); }
.spelled .vcard { max-width: 22rem; width: 100%; justify-self: center; }
.vgens { margin: 12px 0 0; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.clean .versus { margin-top: clamp(28px, 4vw, 40px); }

/* ---------- Grade ladder ---------- */

.ladder {
  list-style: none; margin: 0; padding: 0; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--rule); background: var(--card);
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
}
.ladder li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 6px 16px; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--rule);
}
.ladder li:first-child { border-top: 0; }
@media (min-width: 760px) { .ladder li { grid-template-columns: 9rem 11rem 1fr; } }
.ladder .band { font-weight: 700; font-variant-numeric: tabular-nums; }
.ladder .eg { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 759px) { .ladder .eg { grid-column: 2; } }
.method { margin-top: 24px; display: grid; gap: 16px; max-width: 48rem; color: var(--muted); }
.method p { margin: 0; }
.method strong { color: var(--ink); }

/* ---------- Points ----------
   The grade ladder's own rows, with the points in the middle column and the
   Corollas where the example car was. The levels are small cards in the
   same chrome; Unicorn, the top, gets the amber edge the searched spelling
   gets above. */

.ladder .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.subhead { margin: clamp(32px, 5vw, 44px) 0 12px; }
.subhead + p { margin: 0 0 4px; max-width: 48rem; color: var(--muted); }
.levels {
  list-style: none; margin: 0; padding: 0; max-width: 40rem;
  display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.levels li {
  padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card); box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
}
.levels strong { display: block; font-weight: 750; }
.levels span { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.levels .top { border: 2px solid var(--amber); }
/* Three to a row at phone width too: "Restricted" and "Enthusiast" must fit
   whole in a third of 375px. */
@media (max-width: 480px) {
  .levels li { padding: 9px 10px; }
  .levels strong { font-size: .9rem; }
  .levels span { font-size: .82rem; }
}
/* Badge names, not register text: the sans face, not the monospace the
   spelling chips above use. */
.badge-chips li { font-family: var(--sans); letter-spacing: .01em; }

/* ---------- Yours, not ours ---------- */

.promises .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .promises .wrap { grid-template-columns: 1.2fr .8fr; align-items: start; } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 620px) { .ticks { grid-template-columns: 1fr 1fr; } }
.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.ticks svg { width: 24px; height: 24px; fill: none; stroke: var(--link); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ticks strong { display: block; }
.ticks span { display: block; color: var(--muted); font-size: .94rem; line-height: 1.5; margin-top: 2px; }
/* A windscreen label, stuck on slightly crooked the way they always are.
   Not a warrant — it doesn't copy any official one — just the shape every
   New Zealand windscreen carries. */
.no-banner {
  position: relative;
  background: var(--plate); color: var(--plate-ink);
  border-radius: 10px; padding: 22px 24px 24px;
  border: 2px solid var(--plate-ink);
  box-shadow: inset 0 0 0 1.5px var(--plate), inset 0 0 0 3px var(--plate-ink),
              0 6px 20px rgba(15, 35, 41, .18);
  transform: rotate(-1.2deg);
}
@media (min-width: 900px) { .no-banner { margin-top: 18px; } }
.no-banner .stamp {
  display: block; margin: 0 0 12px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 2px solid var(--plate-ink);
}
.no-banner a { color: var(--plate-ink); }
.no-banner p:last-child { margin: 0; }
.no-banner .big { font-size: 1.2rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.35; }

/* ---------- Challenges ---------- */

.challenges { background: var(--card); border-block: 1px solid var(--rule); }
.challenges .wrap { display: grid; gap: 32px; }
@media (min-width: 900px) { .challenges .wrap { grid-template-columns: 1fr 1fr; align-items: center; } }
.slate { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.slate li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg);
  box-shadow: inset 0 1px 0 var(--chrome-hi);
}
.slate-head { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.slate .box {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--muted); flex: none;
}
.slate .what { font-weight: 650; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips li {
  padding: 7px 14px; border-radius: 999px;
  background: var(--tint); border: 1.5px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
  font-size: .88rem; font-weight: 650; letter-spacing: .01em;
}

/* ---------- Community ----------
   The one section on a tinted band, because the Community tab is the one
   screen in the app with a look of its own (flat surface, underlined text
   tabs, photo-feed posts). The post below is that tab's FeedPostCard in
   HTML, the way .vcard is the catalogue card: same parts, same order. */

.social { background: var(--tint); border-block: 1px solid var(--rule); }
.social .wrap { display: grid; gap: clamp(40px, 6vw, 64px); }
.social-top { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .social-top { grid-template-columns: 1fr 1fr; } }

.feed-demo { margin: 0; max-width: 25rem; width: 100%; justify-self: center; }

.post {
  margin-right: 7%;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
  transform: rotate(-1.2deg);
  font-size: .92rem; line-height: 1.45;
}
.post p { margin: 0; }
.post-tabs {
  display: flex; justify-content: center; gap: 30px;
  padding: 12px 16px 0; border-bottom: 1px solid var(--rule);
  color: var(--muted); font-size: .9rem;
}
.post-tabs span { padding-bottom: 9px; margin-bottom: -1px; }
.post-tabs .on { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ink); }
.post-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px; align-items: center; padding: 10px 10px 9px 12px;
}
/* The author's initial in a ring of the brand's colours, as _Avatar draws it. */
.avatar {
  display: grid; width: 36px; height: 36px; padding: 2px; border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), var(--flute), var(--teal));
}
.avatar span {
  display: grid; place-items: center; border-radius: 50%;
  background: var(--tint); color: var(--ink); font-weight: 700; font-size: .9rem;
}
.post-who strong, .post-who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-who span { font-size: .8rem; color: var(--muted); }
.post-add { font-size: .85rem; font-weight: 700; color: var(--link); }
.post-more { width: 20px; height: 20px; fill: var(--muted); }
.post > img { display: block; width: 100%; height: auto; background: var(--tint); }
.post-actions { display: flex; gap: 14px; padding: 10px 14px 6px; }
.post-actions svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linejoin: round; }
.post-actions .liked { fill: #ED4956; stroke: #ED4956; }
/* The bottom padding is where the message bubble lands. */
.post-body { display: grid; gap: 5px; padding: 0 14px 52px; }
.post-likes { font-weight: 700; }
.post-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .82rem; color: var(--muted); }
.post-muted { font-size: .85rem; color: var(--muted); }
.post-date { font-size: .68rem; letter-spacing: .08em; color: var(--muted); }

/* A direct message, laid over the corner of the post the way the hero's
   second card is laid over the first. */
.dm {
  position: relative; z-index: 1;
  display: grid; gap: 6px;
  width: min(17rem, 80%); margin: -42px 0 0 auto; padding: 12px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
  transform: rotate(1.6deg);
}
.dm p { margin: 0; padding: 8px 12px; border-radius: 16px; font-size: .88rem; line-height: 1.35; max-width: 88%; }
.dm .them { justify-self: start; background: var(--tint); color: var(--ink); border-bottom-left-radius: 5px; }
.dm .me { justify-self: end; background: var(--teal); color: #F2F6F7; border-bottom-right-radius: 5px; }
@media (prefers-color-scheme: dark) { .dm .me { background: #7CC3D6; color: #0A1112; } }

.feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feats li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 18px;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
}
.feats svg { width: 26px; height: 26px; fill: none; stroke: var(--link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feats h3 { margin-bottom: 6px; font-size: 1.05rem; }
.feats p { margin: 0; color: var(--muted); font-size: .94rem; }
.social-fine { margin: 0; max-width: 52rem; color: var(--muted); font-size: .94rem; }
.social-fine strong { color: var(--ink); }

/* ---------- Closing CTA ---------- */

.closing {
  text-align: center;
  background: var(--tarmac); color: var(--band-ink);
  border-block: 4px solid var(--band);
  background-image: radial-gradient(28rem 16rem at 50% 0%, rgba(242, 140, 40, .22), transparent 72%);
  padding-block: clamp(64px, 9vw, 108px);
}
.closing .wrap { max-width: 44rem; }
.closing h2 { margin-bottom: 12px; }
.closing .lede { margin: 0 auto; color: var(--band-muted); }
.closing .cta-head { color: var(--band-ink); }
.closing .cta { display: flex; flex-direction: column; align-items: center; }
.closing .cta-note { margin-left: auto; margin-right: auto; color: var(--band-muted); }
.closing .cta-note a { color: var(--band-ink); }
/* Teal on tarmac is unreadable, so the button takes its dark-mode colours
   here in both themes. */
.closing .btn { background: #7CC3D6; color: #0A1112; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.closing .btn:hover { background: #9AD2E1; }
.closing .btn-secondary { background: transparent; color: #7CC3D6; box-shadow: inset 0 0 0 2px #7CC3D6; }
.closing .btn-secondary:hover { background: rgba(124, 195, 214, .14); }
.closing .cta-buttons { align-items: center; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); padding: 44px 0 56px; font-size: .92rem; color: var(--muted); }
.site-footer .top { display: grid; gap: 28px; margin-bottom: 32px; }
@media (min-width: 860px) { .site-footer .top { grid-template-columns: auto 1fr 1fr; align-items: start; gap: 48px; } }
.plate-note { max-width: 15rem; }
.plate-note img { width: 180px; height: auto; display: block; margin-bottom: 10px; }
.plate-note p { margin: 0; font-size: .86rem; }
.site-footer h2 { font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer .fine { border-top: 1px solid var(--rule); padding-top: 22px; display: grid; gap: 10px; font-size: .84rem; max-width: 52rem; }
.site-footer .fine p { margin: 0; }

/* ---------- The no-mail-client fallback ----------
   <details> rather than script: the page sends script-src 'none', and a
   disclosure widget is one of the few interactive things HTML gives away
   free. Closed by default, so it costs the people who do have a mail client
   one line of quiet text. */

.alt-signup { margin-top: 14px; }
.alt-signup > summary {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; padding: 6px 2px; min-height: 34px;
  color: var(--muted); font-size: .9rem; font-weight: 600;
  cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-color: var(--rule);
}
.alt-signup > summary::-webkit-details-marker { display: none; }
/* A chevron drawn in borders, so there is no glyph to go missing. */
.alt-signup > summary::before {
  content: ""; flex: none;
  width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
}
.alt-signup[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.alt-signup > summary:hover { color: var(--ink); }

.alt-body {
  margin-top: 10px; padding: 16px 18px 14px;
  max-width: 30rem;
  background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--amber); border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
  font-size: .92rem; color: var(--muted);
}
.alt-body p { margin: 0 0 10px; }
.alt-body p:last-child { margin: 0; }
.alt-form a { font-weight: 700; }

.alt-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0; }
.alt-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  background: var(--tint); border: 1px solid var(--rule); border-radius: 999px;
  font-weight: 650; text-decoration: none; color: var(--link);
  box-shadow: inset 0 1px 0 var(--chrome-hi);
}
.alt-links a:hover { border-color: var(--link); }

.alt-or { line-height: 1.55; }
/* Selectable, and big enough to read off a screen to somebody. */
.alt-addr {
  display: inline-block; color: var(--ink); font-weight: 700;
  user-select: all; -webkit-user-select: all;
  border-bottom: 2px dotted var(--rule);
}

/* On the tarmac at the foot of the page the panel has to carry its own
   colours: --card and --muted are both wrong against it. */
.closing .alt-signup { text-align: left; }
.closing .alt-signup > summary { color: var(--band-muted); margin-inline: auto; }
.closing .alt-signup > summary:hover { color: var(--band-ink); }
.closing .alt-body {
  margin-inline: auto;
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
  border-left-color: var(--amber); color: var(--band-muted);
  box-shadow: none;
}
.closing .alt-links a {
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22);
  color: var(--band-ink);
}
.closing .alt-links a:hover { border-color: var(--band-ink); }
.closing .alt-addr { color: var(--band-ink); border-bottom-color: rgba(255, 255, 255, .3); }

/* ---------- Spotted: the owner's roadside photographs ----------
   Columns rather than a grid, because these are real photographs in whatever
   shape they were taken and a row-aligned grid would either crop them or
   leave holes. The portrait one is allowed to be portrait. */

.spots { column-count: 1; column-gap: 16px; }
@media (min-width: 620px) { .spots { column-count: 2; } }
@media (min-width: 1040px) { .spots { column-count: 3; } }

.spot {
  break-inside: avoid; margin: 0 0 16px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo), var(--shadow);
}
.spot img { display: block; width: 100%; height: auto; background: var(--tint); }
.spot figcaption { padding: 14px 16px 15px; }
.spot .vname { margin: 0 0 8px; font-size: 1.02rem; }
.spot .vcount { margin: 0 0 10px; }
.spot .vcount strong { font-size: 1.5rem; }

/* ---------- Read more ----------
   The detail under a section, folded away rather than cut (the five-topic
   draft). <details>, for the same reason as the no-mail-client fallback: the
   page runs no script. Closed by default; the words stay in the page, so a
   search engine still reads them. */

.readmore { margin-top: 22px; }
.readmore > summary {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 18px 0 16px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--rule); color: var(--link);
  font-weight: 700; font-size: .95rem; cursor: pointer; list-style: none;
  box-shadow: inset 0 1px 0 var(--chrome-hi), 0 1px 0 var(--chrome-lo);
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::before {
  content: ""; flex: none;
  width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
}
.readmore[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.readmore > summary:hover { border-color: var(--link); }
.readmore .subhead:first-of-type { margin-top: 32px; }

/* ---------- Swipe rows ----------
   On a phone a set of cards becomes one row you swipe along, with the next
   card peeking in so there is plainly more. Nothing moves on its own. From
   620px the grids and columns above take over unchanged. The photographs
   are the exception: a swipe row is as tall as its tallest card, and the
   portrait one would leave a hole under the rest, so on a phone they go two
   to a column instead, all six in view, still uncropped. */

@media (max-width: 619px) {
  .swipe {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 12px; column-count: auto;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 18px;
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: start; }

  .spots { column-count: 2; column-gap: 10px; }
  .spots .spot { margin-bottom: 10px; }
  .spots .spot figcaption { padding: 10px 11px 12px; }
  .spots .vname { font-size: .88rem; margin-bottom: 4px; }
  .spots .vcount { font-size: .78rem; gap: 0 5px; margin-bottom: 8px; }
  .spots .vcount strong { font-size: 1.2rem; }
  .spots .badge { font-size: .72rem; padding: 3px 7px 3px 5px; }
  .spots .badge svg { width: 13px; height: 13px; }
}

/* ---------- Grades and points, one ladder ----------
   Grade, band, example, points. On a phone the points drop under the badge,
   so each row stays two lines. */

.ladder--points li {
  grid-template-columns: 8.5rem 1fr;
  grid-template-areas: "g band" "pts eg";
}
.ladder--points li > :first-child { grid-area: g; }
.ladder--points .band { grid-area: band; }
.ladder--points .eg { grid-area: eg; }
.ladder--points .pts { grid-area: pts; line-height: 1.25; }
.ladder--points .pts small {
  display: block; font-weight: 500; font-size: .8rem; color: var(--muted);
}
@media (min-width: 760px) {
  .ladder--points li {
    grid-template-columns: 9rem 11rem 1fr auto;
    grid-template-areas: "g band eg pts";
  }
  .ladder--points .pts { text-align: right; }
}

/* ---------- Built here, the short version ----------
   The stats, the sixteen names, and the way to the rest. */

.assembly h1 {
  font-size: clamp(2.3rem, 7vw, 3.8rem); font-weight: 850;
  letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 14px;
  text-wrap: balance;
}
.assembly-teaser .stats { margin-bottom: 26px; }
.roll { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roll li {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  color: var(--band-ink); font-size: .88rem; font-weight: 600; line-height: 1.3;
}
.teaser-cta { margin: 0; }
/* Teal on tarmac is unreadable, as in the closing block. */
.assembly .btn { background: #7CC3D6; color: #0A1112; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.assembly .btn:hover { background: #9AD2E1; }

/* ---------- Which topic you're in ----------
   The header's link for a topic wears the plate while you're in that topic.
   It is a scroll-driven animation, which is CSS, not script: each topic is a
   view timeline narrowed by the inset to a line 40% of the way down the
   screen, and its link is lit while the topic crosses that line. A browser
   without scroll-driven animations lights nothing, and the links work the
   same. */

@keyframes topic-on {
  from, to {
    background: var(--plate); color: var(--plate-ink);
    box-shadow: inset 0 0 0 2px var(--plate-ink);
  }
}
@supports (animation-timeline: view()) {
  body { timeline-scope: --t-rarity, --t-mates, --t-spotting, --t-built-here, --t-privacy; }
  #rarity { view-timeline-name: --t-rarity; }
  #mates { view-timeline-name: --t-mates; }
  #spotting { view-timeline-name: --t-spotting; }
  #built-here { view-timeline-name: --t-built-here; }
  #privacy { view-timeline-name: --t-privacy; }
  .topic { view-timeline-inset: 40% 59.8%; }
  .topics a {
    animation-name: topic-on; animation-duration: auto;
    animation-timing-function: linear; animation-fill-mode: none;
    animation-range: cover 0% cover 100%;
  }
  .topics a[href$="#rarity"] { animation-timeline: --t-rarity; }
  .topics a[href$="#mates"] { animation-timeline: --t-mates; }
  .topics a[href$="#spotting"] { animation-timeline: --t-spotting; }
  .topics a[href$="#built-here"] { animation-timeline: --t-built-here; }
  .topics a[href$="#privacy"] { animation-timeline: --t-privacy; }
}

@media (forced-colors: active) {
  .badge { border-color: CanvasText; }
  .bar { background: CanvasText; }
}

@media print {
  .hero-cards .vcard, .deal > *, .no-banner, .post, .dm { transform: none; }
  .assembly, .closing {
    background: none; color: inherit; border-block: 1px solid #999;
  }
  .closing .lede, .closing .cta-note, .closing .cta-head { color: inherit; }
  .closing .btn { background: none; color: inherit; box-shadow: none; }
  body { background: #fff; }
  .site-header { position: static; background: none; border: 0; }
  .topics, .header-cta, .readmore > summary { display: none; }
}

/* ---------- Count pages (tools/count_pages.py) ---------- */
.count-page { padding-top: clamp(28px, 6vw, 56px); padding-bottom: 8px; }
.count-page h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; max-width: 44rem; }
.count-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 26px 0 10px; }
.count-figure strong { font-family: var(--display); font-size: clamp(3.4rem, 12vw, 6rem); font-weight: 850;
  line-height: .95; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.count-figure span { color: var(--muted); font-size: 1.1rem; }
.count-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 6px; }
.count-facts .one-in { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.as-at { color: var(--muted); font-size: .92rem; margin-top: 10px; }
.panel { background: var(--card); border-radius: var(--radius); padding: 22px clamp(16px, 3.4vw, 30px);
  margin: 26px 0; }
.panel h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: 4px; }
.panel .sub { color: var(--muted); margin: 0 0 16px; font-size: .96rem; }
.bars { display: block; width: 100%; height: auto; }
.bars rect { fill: var(--bar); }
.bars rect.peak { fill: var(--bar-hi); }
.bars line { stroke: var(--rule); stroke-width: 1; }
.axis { display: flex; justify-content: space-between; color: var(--muted); font-size: .85rem; margin-top: 4px; }
.panel details { margin-top: 14px; }
.panel summary { cursor: pointer; color: var(--link); font-weight: 600; }
table.rows { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.rows th, table.rows td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.rows th { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
table.rows td.n { text-align: right; white-space: nowrap; }
table.rows th.n { text-align: right; }
table.rows .yrs { color: var(--muted); font-size: .9rem; white-space: nowrap; }
table.years td, table.years th { padding: 4px 8px; }
.count-cta { margin: 34px 0 10px; }
.count-cta p { max-width: 40rem; }
.count-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.related { margin: 30px 0 40px; }
.related ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 6px 22px; }
.related li a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; }
.related li .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.hub-make { margin: 30px 0 0; }
.hub-make h2 { font-size: 1.35rem; }
.crumbs { font-size: .92rem; color: var(--muted); margin: 0 0 14px; }
.car-photo { margin: 22px 0 6px; }
.car-photo img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover;
  border-radius: var(--radius); background: var(--card); }
.car-photo figcaption { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.car-photo figcaption a { color: var(--muted); }
.crumbs a { color: var(--muted); }
a.held { margin-left: 4px; text-decoration: none; font-weight: 700; }
.held-note { margin: 12px 0 0; font-size: .88rem; }
.lists { margin: 26px 0 0; }
.lists ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 10px 22px; }
.lists li a { display: block; padding: 12px 16px; background: var(--card); border-radius: var(--radius);
  font-weight: 700; }
.lists li a span { display: block; color: var(--muted); font-weight: 400; font-size: .9rem; margin-top: 2px; }
.hub-make h2 a { color: inherit; }
table.rows td a { font-weight: 600; }
@media (min-width: 860px) { .site-footer .top { grid-template-columns: auto 1fr 1fr 1fr; } }
/* Phones: the four-column tables fit a 375px screen without the page
   scrolling sideways; a panel scrolls on its own before the page would. */
.panel { overflow-x: auto; }
@media (max-width: 560px) {
  .panel { padding-left: 12px; padding-right: 12px; }
  table.rows { font-size: .9rem; }
  table.rows th, table.rows td { padding: 8px 4px; }
  table.rows th { font-size: .7rem; letter-spacing: .03em; }
  table.rows .yrs { white-space: normal; }
  table.rows .badge { font-size: .78rem; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
}
/* Every-car pages: the grade's explanation, the make list on the hub and
   the A to Z index. */
.grade-note p { margin: 10px 0 0; max-width: 46rem; }
.grade-note .badge { vertical-align: middle; }
.makes ul { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.az-letters { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.az-letters a { display: inline-block; min-width: 2.2rem; padding: 7px 8px; text-align: center;
  background: var(--card); border-radius: 10px; font-weight: 700; }
.az-letter { margin: 34px 0 0; font-size: clamp(1.5rem, 4vw, 2rem); }
.az-make { margin: 18px 0 0; }
.az-make h3 { font-size: 1.1rem; margin: 0; }
.az-make h3 a { color: inherit; }