@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@500;600;700&display=swap');

/* RealTreads design system. Automotive-retail, not SaaS: warm paper + tire-black
   asphalt bands, a condensed display face for headline character, one brand
   green, an inspection-seal motif and a rubber tread texture. Depth comes from
   solid color blocking, hairline rules, and type, never from glass or glows. */

:root {
  /* Warm neutrals: paper, not cold gray */
  --paper: #f2f0ea;
  --card: #ffffff;
  --panel: #faf8f3;
  --ink: #14171d;
  --ink-soft: #2a2f39;
  --muted: #55606d;
  --faint: #8b939f;
  --border: #e7e2d8;
  --border-strong: #d7d1c5;
  --track: #ebe7df;

  /* Asphalt: dark bands (hero, CTA, footer). Text on asphalt has exactly three
     tiers; before this there were eleven near-identical literals doing the job
     of two tokens, several differing by a single channel step. */
  --asphalt: #0d1015;
  --asphalt-2: #151922;
  --stage: #101216;          /* photo + camera backdrop, deliberately not --asphalt */
  --line-dark: #272d39;      /* hairline on asphalt */
  --line-dark-2: #3a4150;    /* the lighter border on an interactive control */
  --on-dark: #eef0f3;        /* primary text on asphalt */
  --on-dark-soft: #c4cad3;   /* secondary text and body copy on asphalt */
  --on-dark-mute: #99a1af;   /* captions, hints, meta on asphalt */

  /* Brand green (matches the wordmark) */
  --accent: #15803c;
  --accent-down: #0f6531;
  --accent-bright: #23a851;
  --accent-soft: #e8f2ea;
  --accent-line: #c2e0cb;
  --accent-ink: #0c3f21;
  /* --accent is the brand FILL. As text on paper it lands at 4.4:1, just under
     AA, so every text link takes the darker step instead. */
  --link: var(--accent-down);

  /* Functional / grade */
  --green: #15803c;
  --green-soft: #e8f2ea;
  --amber: #97650a;
  --amber-soft: #f6ecd4;
  --amber-line: #e6cf9a;
  --amber-ink: #6f4a06;      /* amber as TEXT on --amber-soft; --amber is 4.3:1 there */
  --red: #c22f45;
  --red-soft: #fbe9ec;

  /* The grade mark is the product's signature, so it gets its own roles rather
     than borrowing the functional tokens: A the brand green, B a lighter green,
     C amber. B used to be hard-coded in three places while A and C aliased
     --accent and --amber, which is exactly how one rung drifts out of step. */
  --grade-a: #15803c;
  --grade-b: #2f9d5b;
  --grade-c: #97650a;
  --grade-ink: #08110b;      /* dark ink for letters sitting on a grade fill */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(13,16,21,0.06);
  --shadow-lift: 0 8px 26px -10px rgba(13,16,21,0.22);
  --shadow-dark: 0 24px 60px -24px rgba(0,0,0,0.6);

  /* Rubber tread texture, painted onto asphalt bands */
  --tread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M0 0h10l-6 27H-2zM18 0h10l-6 27H12zM36 0h10l-6 27H30zM9 27h10L13 54H3zM27 27h10l-6 27H21zM45 27h10l-6 27H39z'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 10px; line-height: 1.14; }
h1 { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: 0; line-height: 1.02; }
h2 { font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: 0; line-height: 1.06; }
h3 { font-size: 16px; font-weight: 680; letter-spacing: -0.01em; }
p { margin: 0 0 10px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.kicker {
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 10px;
  display: inline-flex; align-items: center; gap: 9px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--accent); display: inline-block; }
.kicker.on-dark { color: var(--accent-bright); }
.kicker.on-dark::before { background: var(--accent-bright); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }

/* ---------- Header (dark asphalt, brand-consistent with the landing) ---------- */
.topbar {
  background: var(--asphalt); border-bottom: 1px solid var(--line-dark);
  position: sticky; top: 0; z-index: 40;
}
.topbar-in {
  /* Vertical padding matters on narrow screens: the row wraps, and without
     it the wrapped chips sit flush against the bar's edges. One row still
     centers inside min-height exactly as before. */
  max-width: 1200px; margin: 0 auto; padding: 10px 22px;
  display: flex; align-items: center; gap: 10px; min-height: 62px; flex-wrap: wrap;
}
.topbar .brand { display: flex; align-items: center; margin-right: 16px; }
/* logo-dark.svg carries its own on-dark colours; a CSS invert would turn the
   brand green white along with the ink. */
.topbar .brand img { height: 29px; display: block; }
.topbar nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.topbar nav a {
  color: var(--on-dark-soft); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 7px; white-space: nowrap;
}
.topbar nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,0.09); }
.topbar nav a.on { color: #fff; background: rgba(255,255,255,0.12); }
.topbar .spacer { flex: 1; }
.topbar .nav-cta {
  background: var(--accent); color: #fff !important; font-weight: 680;
}
.topbar .nav-cta:hover { background: var(--accent-down); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 8px; padding: 11px 20px; font: 680 14.5px var(--font);
  cursor: pointer; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 120ms, border-color 120ms, transform 60ms;
}
.btn:hover { background: var(--accent-down); border-color: var(--accent-down); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-ghost { background: var(--card); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--track); border-color: var(--border-strong); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-on-dark { background: #fff; border-color: #fff; color: var(--ink); }
.btn-on-dark:hover { background: #ece9e2; border-color: #ece9e2; }
.btn-outline-dark { background: transparent; border-color: var(--line-dark-2); color: #fff; }
.btn-outline-dark:hover { background: rgba(255,255,255,0.06); border-color: #55606e; }
.btn-danger { background: var(--card); color: var(--red); border: 1px solid var(--border); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 7px; }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn-xl { padding: 16px 30px; font-size: 16px; border-radius: 9px; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.cards { display: grid; gap: 14px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 680;
  letter-spacing: 0.01em; white-space: nowrap;
}
.badge-green { background: var(--green-soft); color: var(--accent-down); }
.badge-amber { background: var(--amber-soft); color: var(--amber-ink); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-ink { background: var(--track); color: var(--muted); }
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------- Grade chip (the brand's signature mark) ---------- */
.g-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.02em;
}
.g-medal {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1;
  color: #fff; background: var(--grade-a); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.g-medal.b { background: var(--grade-b); }
.g-medal.c { background: var(--grade-c); }
.g-medal.lg { width: 44px; height: 44px; font-size: 24px; }
/* NEW is a word, not a letter, so it cannot ride the circular letter medal. */
.g-medal.new {
  width: auto; border-radius: 7px; padding: 0 8px; font-size: 12px;
  letter-spacing: 0.08em; background: var(--ink);
}

/* ---------- Pill tabs (portal + search card) ---------- */
.tabs {
  display: flex; gap: 4px; background: var(--track); border-radius: 9px;
  padding: 4px; overflow-x: auto; max-width: 100%;
}
.tabs button {
  border: 0; background: transparent; color: var(--muted);
  font: 660 13.5px var(--font); padding: 8px 15px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.tabs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Forms ---------- */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 640; margin-bottom: 5px; }
.field input, .field select, .field textarea, .sel {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 11px 12px; font: 400 15px var(--font); color: var(--ink);
  background: var(--card);
}
.field input:focus, .field select:focus, .field textarea:focus, .sel:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-msg { border-radius: 8px; padding: 10px 12px; font-size: 14px; margin: 10px 0; }
.form-msg.err { background: var(--red-soft); color: var(--red); }
.form-msg.ok { background: var(--green-soft); color: var(--green); }
/* Field-level error. A form with six inputs and one sentence at the bottom
   makes the person guess which box it meant, so the message sits under the
   field it is about and the field itself is marked for anyone who navigates by
   colour or by screen reader (aria-invalid + role="alert" in app.js). */
.field-err { color: var(--red); margin-top: 4px; }
input.invalid, select.invalid, textarea.invalid { border-color: var(--red); }
input.invalid:focus, select.invalid:focus { outline-color: var(--red); }

/* Address type-ahead menu. Absolute inside the field wrapper, above everything
   below it, and scrollable so a long list never pushes the form around. */
.ac-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-lift); overflow: hidden auto;
  max-height: 260px; margin-top: 4px;
}
.ac-list button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 12px; cursor: pointer; font: inherit; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.ac-list button:last-child { border-bottom: 0; }
.ac-list button:hover, .ac-list button.on { background: var(--panel); }
.ac-list b { display: block; font-weight: 600; }
.ac-list span { font-size: 12.5px; color: var(--muted); }

/* Upload progress. A photo submission is the one place in the portal where the
   shop waits on us for a minute, so it gets a real bar rather than a spinner:
   "42%" is the difference between waiting and giving up on a page that looks
   dead. The indeterminate state is for the server-side stretch after the bytes
   land, which reports nothing and must not pose as measured progress. */
.form-msg.uploading { background: var(--panel); border: 1px solid var(--border);
                      color: var(--ink); }
.up-head { display: flex; justify-content: space-between; gap: 12px;
           font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.up-head #up-pct { font-family: var(--mono); font-variant-numeric: tabular-nums;
                   color: var(--muted); }
.up-bar { height: 8px; background: var(--border-strong); border-radius: 4px; overflow: hidden; }
.up-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px;
            transition: width 0.2s linear; }
.up-bar.indeterminate i { animation: up-sweep 1.1s ease-in-out infinite; }
@keyframes up-sweep { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .up-bar i { transition: none; }
  .up-bar.indeterminate i { animation: none; opacity: 0.7; }
}

/* ---------- Tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 680; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px 10px; border-bottom: 1px solid var(--border);
}
/* Click-to-sort header. A real <button> inside the <th>, not a click handler on
   the cell: sorting a table is an action, and on a keyboard a bare <th> is not
   reachable at all. It inherits the th's type so the column still looks like a
   column, and the padding moves onto the button so the whole cell is the
   target rather than just the word. */
.tbl th:has(.th-sort) { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: 5px; width: 100%;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 9px 10px; cursor: pointer; text-align: left;
}
.th-sort:hover { color: var(--ink); background: var(--panel); }
.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.th-sort .arrow { font-size: 9px; opacity: 0.45; }
/* The active column keeps its arrow at full strength and darkens, so which
   column is driving the order is readable without comparing three glyphs. */
.tbl th.sorted .th-sort { color: var(--ink); }
.tbl th.sorted .arrow { opacity: 1; color: var(--accent); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl td.nowrap { white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl-scroll { overflow-x: auto; }

/* ---------- Marketplace hero + search ---------- */
.hero { padding: 46px 0 30px; }
.hero .lede { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: start; }
.hero h1 { font-size: clamp(38px, 5.2vw, 56px); font-weight: 800; letter-spacing: -0.005em; line-height: 0.98; margin-bottom: 16px; }
.hero .sub { font-size: 17px; color: var(--muted); max-width: 46ch; }
/* Shop hero on a dark band, matching the landing */
.hero.dark { padding: 52px 0 42px; }
.hero.dark .sub { color: var(--on-dark-soft); }

.search-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 18px;
}
.search-card .tabs { margin-bottom: 14px; }
.search-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.search-card .go { width: 100%; }
.search-card .fine { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
/* Carries its own ink as well as sitting in the .dark reset above: this panel
   is rendered into the storefront hero, and a light panel that states its
   colour cannot be made invisible by whatever band it lands in. */
.fit-result {
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-top: 12px;
  color: var(--ink);
}
.fit-result .sizes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fit-result .sizes button {
  border: 1px solid var(--accent); background: var(--card); color: var(--accent);
  font: 620 13px var(--mono); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.fit-result .sizes button:hover { background: var(--accent); color: #fff; }

.vehicle-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 620;
}
.vehicle-chip button { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 15px; padding: 0; line-height: 1; }

/* ---------- Location bar (nearby-shops filter) ---------- */
.loc-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 22px 0 4px; box-shadow: var(--shadow);
}
.loc-bar.unset { border-color: var(--accent-line); background: var(--accent-soft); }
.loc-bar .pin { color: var(--accent); flex: none; display: flex; }
.loc-bar b { font-weight: 700; }
.loc-bar .lead { font-weight: 640; font-size: 14.5px; }
.loc-bar .txt { font-size: 14px; color: var(--muted); }
.loc-bar .zipwrap { display: flex; gap: 6px; align-items: center; }
.loc-bar input {
  width: 118px; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 11px; font: 500 14px var(--mono); background: var(--card); color: var(--ink);
}
.loc-bar input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.loc-bar select {
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px;
  font: 600 13.5px var(--font); background: var(--card); color: var(--ink); cursor: pointer;
}
.loc-bar .or { color: var(--muted); font-size: 13px; }
.loc-bar .spacer { flex: 1; }
.loc-bar .loc-err { color: var(--red); font-size: 13px; width: 100%; margin: 2px 0 0; }
.tile .dist { font: 640 12px var(--mono); color: var(--accent); margin-top: 3px; }

/* ---------- Marketplace layout ---------- */
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 26px; align-items: start; }
.rail { position: sticky; top: 78px; }
/* Sheet chrome: the rail is a plain sidebar on desktop, so none of this exists
   until the 980px breakpoint turns it into a filter sheet. */
.rail-head, .rail-foot, .filters-btn, .rail-scrim { display: none; }
.filters-btn .fcount {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font: 700 11.5px var(--font); font-variant-numeric: tabular-nums;
}
.facet { border-top: 1px solid var(--border); padding: 14px 0; }
.facet:first-child { border-top: 0; padding-top: 0; }
.facet h4 {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.facet label.opt {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 14px; cursor: pointer; color: var(--ink);
}
.facet label.opt input { accent-color: var(--accent); width: 15px; height: 15px; }
.facet label.opt .n { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.rail .clear-btn { margin-top: 10px; width: 100%; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .count { font-size: 14px; color: var(--muted); }
.toolbar .count b { color: var(--ink); }
.toolbar select { width: auto; padding: 8px 10px; font-size: 13.5px; }
.toolbar input[type="search"] {
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 9px 12px; font: 400 14px var(--font); color: var(--ink); background: var(--card);
}
.toolbar input[type="search"]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.toolbar .spacer { flex: 1; }

/* The Manage expander on a listing card: publish/unpublish and removal live
   behind one control so the card's action row stays readable. A native
   <details> needs no wiring of its own; the tab's delegated click handler
   closes any open menu when the click lands outside it. */
.act-menu { position: relative; display: inline-block; }
.act-menu > summary { list-style: none; user-select: none; }
.act-menu > summary::-webkit-details-marker { display: none; }
.act-menu > summary::after { content: "▾"; font-size: 10px; margin-left: 2px; }
.act-menu[open] > summary { border-color: var(--accent); }
.act-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 170px; padding: 4px; display: grid; gap: 2px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.act-list button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: 500 13.5px var(--font); color: var(--ink); padding: 8px 10px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.act-list button:hover { background: var(--track); }
.act-list button.danger { color: var(--red); }
.act-list button.danger:hover { background: var(--red-soft); }
.act-list.flip { right: auto; left: 0; }

/* Pager under a table. Pages you can go to are quiet outlines and the page you
   are ON is the solid accent chip, because the default .btn is already accent
   filled and a row of identical green buttons says nothing about where you
   are. */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pager .btn { background: var(--card); color: var(--ink); border: 1px solid var(--border-strong); }
.pager .btn:hover:not(:disabled) { background: var(--track); }
.pager .btn[disabled] { opacity: .45; cursor: default; }
.pager .btn.on {
  background: var(--accent); border-color: var(--accent); color: #fff; cursor: default;
}
.pager .btn.on:hover { background: var(--accent); }
.pager .gap { color: var(--muted); padding: 0 2px; }

/* ---------- Listing tiles ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: box-shadow 130ms, transform 130ms, border-color 130ms; }
.tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--border-strong); }
.tile a.body { color: inherit; display: flex; flex-direction: column; flex: 1; }
.tile a.body:hover { text-decoration: none; }
.tile .photo { aspect-ratio: 4 / 3; background: var(--stage); width: 100%; object-fit: cover; display: block; }
.tile .info { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.tile .size-ln { font: 640 13.5px var(--mono); color: var(--ink); letter-spacing: -0.01em; }
.tile .size-ln .sep { color: var(--muted); font-weight: 400; }
.tile .title { font-weight: 660; font-size: 15px; margin-top: 3px; line-height: 1.3; }
.tile .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.tile .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 12px; }
.tile .price { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: 0; }
.tile .per { font-size: 12.5px; color: var(--muted); }
.tile .shop-ln { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Stands in for the tread meter on a new tire, which has no measurement to
   plot. Same vertical rhythm so a mixed grid of tiles stays on one baseline. */
.tile .new-ln { font: 620 12.5px var(--mono); color: var(--ink); margin-top: 9px; }
.tread-meter { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.tread-meter .bar { flex: 1; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; max-width: 130px; }
.tread-meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tread-meter .lbl { font: 620 12.5px var(--mono); color: var(--ink); white-space: nowrap; }
.tread-meter .ref { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* In a table cell the flexible bar has nothing to flex into and collapses to a
   dot, so the compact variant pins its width. */
.tread-meter.compact { margin-top: 0; gap: 7px; }
.tread-meter.compact .bar { flex: none; width: 64px; max-width: none; }

/* ================= LANDING PAGE ================= */

/* Dark band primitive */
.dark { background: var(--asphalt); color: var(--on-dark); position: relative; }
.dark::before {
  content: ""; position: absolute; inset: 0; background-image: var(--tread);
  background-size: 54px 54px; pointer-events: none;
}
.dark > * { position: relative; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p { color: var(--on-dark-mute); }

/* A LIGHT SURFACE INSIDE A DARK BAND RE-ESTABLISHES LIGHT CONTEXT.
   The two rules above are element selectors, so they beat any class-based
   colour on a card nested in a dark section and paint near-white text onto
   white. This shipped twice: the landing finder's heading, and the storefront
   fitment result, where the text measured 1.00:1 against its own panel, i.e.
   invisible. Fix the context once here rather than patching each descendant,
   and add any new light surface to this list. */
.dark :is(.card, .search-card, .modal-card, .fit-result, .tile, .form-msg) {
  color: var(--ink);
}
.dark :is(.card, .search-card, .modal-card, .fit-result, .tile, .form-msg) :is(h1, h2, h3) {
  color: var(--ink);
}
.dark :is(.card, .search-card, .modal-card, .fit-result, .tile, .form-msg) p {
  color: var(--muted);
}
.section { padding: 74px 0; }
.section-sm { padding: 52px 0; }
.center { text-align: center; }

/* Landing top nav (transparent over hero, own markup) */
.lp-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.lp-nav-in {
  max-width: 1200px; margin: 0 auto; padding: 20px 22px;
  display: flex; align-items: center; gap: 18px;
}
/* logo-dark.svg carries its own on-dark colours; a CSS invert would turn the
   brand green white along with the ink. */
.lp-nav .brand img { height: 30px; display: block; }
.lp-nav nav { display: flex; gap: 4px; align-items: center; }
.lp-nav nav a { color: var(--on-dark-soft); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 7px; }
.lp-nav nav a:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
.lp-nav .spacer { flex: 1; }
.lp-nav .signin { color: var(--on-dark-soft); font-weight: 600; font-size: 14px; padding: 8px 10px; white-space: nowrap; }
.lp-nav .signin:hover { color: #fff; text-decoration: none; }

/* Hero: the finder. A tire buyer arrives already knowing their size or their
   car, so the headline shares the stage with a working search instead of
   owning the viewport alone. The gauge moved down to the grade section, next
   to the ladder it draws. */
/* Four-value padding on purpose: .wrap and .lp-hero sit on one element, and
   a "104px 0 76px" shorthand here silently zeroes .wrap's 22px side padding,
   which put the headline on the screen edge below 1244px. */
.lp-hero { padding: 104px 22px 76px; }
.lp-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(350px, 0.94fr);
  gap: 54px; align-items: center;
}
.lp-hero h1 {
  font-family: var(--display); font-weight: 800; color: #fff; text-transform: uppercase;
  font-size: clamp(42px, 5.4vw, 74px); line-height: 0.93; letter-spacing: 0.004em;
  margin: 0; text-wrap: balance;
}
.lp-hero .dek { font-size: 18px; line-height: 1.56; color: var(--on-dark-soft); margin: 18px 0 0; max-width: 42ch; }

/* The stage: a real tire standing beside the three claims made about it,
   so the facts read as captions to a product rather than floating copy.
   The photo is a cutout with alpha; the radial glow keeps its dark rubber
   from dissolving into the asphalt band, and the ellipse is the floor. */
.hero-stage {
  display: grid; grid-template-columns: minmax(200px, 278px) minmax(0, 1fr);
  gap: 34px; align-items: center; margin-top: 30px;
}
.hero-tire {
  grid-column: 1; grid-row: 1; width: 100%; height: auto; position: relative; z-index: 1;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.45));
  animation: tire-roll 0.7s cubic-bezier(0.22, 0.9, 0.32, 1);
}
.hero-stage::before {
  content: ""; grid-column: 1; grid-row: 1; place-self: center;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 62%);
}
/* No fill mode and no delay, same rule as the gauge needle: if animations
   never advance the element must rest on its static (final) styles. */
@keyframes tire-roll {
  from { transform: translateX(-30px) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tire { animation: none; }
}

/* Three facts as a hairline stack: the claims that separate a graded tire
   from a rack tire, without a card or an icon around each one. */
.hero-facts { list-style: none; margin: 26px 0 0; padding: 0; max-width: 48ch; }
.hero-stage .hero-facts { margin: 0; position: relative; z-index: 1; }
.hero-facts li {
  position: relative; padding: 11px 0 11px 26px; font-size: 14.5px; color: var(--on-dark-mute);
  border-top: 1px solid var(--line-dark);
}
.hero-facts li:first-child { border-top: 0; }
.hero-facts li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 13px; height: 2px; background: var(--accent-bright);
}

/* The finder itself: /shop's search card, lifted onto the dark band. */
.finder { padding: 22px; box-shadow: var(--shadow-dark); }
/* The card sits inside a .dark band, which sets a near-white text colour on
   everything it contains; on this white surface that has to be reset. */
.finder-hd {
  font-family: var(--display); font-weight: 700; font-size: 23px;
  letter-spacing: 0.005em; margin-bottom: 13px; color: var(--ink);
}
.finder .fine.err { color: var(--red); }
/* Most buyers reach this page on a phone from a Facebook link, so the finder's
   own controls clear a 44px touch target. The portal's denser tab strips and
   buttons are deliberately left alone. */
.finder .tabs button { min-height: 44px; }
.lp-nav .btn { min-height: 40px; }
.wl-persona { min-height: 44px; }
.v-sizes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.v-size {
  font: 640 13.5px var(--mono); color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 7px; padding: 8px 11px;
}
.v-size:hover { background: var(--accent); border-color: var(--accent); color: #fff; text-decoration: none; }

/* ---------- The tread gauge (landing signature) ----------
   Range 0 to 11/32". Hatched = never listed (reject at/below 2, ungraded
   under 4); solid blocks = the three grades. All hard-stop patterns, no
   fades. The needle carries the sample tire's measured depth. */
.gauge { position: relative; margin: 44px 0 0; }
.gauge-zones {
  display: flex; height: 46px; border-radius: 6px; overflow: hidden;
  border: 1px solid #323947;
  /* one tick per 1/32, drawn over every zone */
  background: var(--asphalt-2);
}
.gauge .gz { flex: var(--span) 0 0; position: relative; display: flex; align-items: center; justify-content: center; }
.gauge .gz + .gz { border-left: 1px solid rgba(13,16,21,0.55); }
.gauge .gz .gl {
  font-family: var(--display); font-weight: 800; font-size: 24px; color: #fff; line-height: 1;
}
.gauge .gz.rj { background: repeating-linear-gradient(135deg, rgba(194,47,69,0.5) 0 5px, rgba(194,47,69,0.12) 5px 10px); }
.gauge .gz.ug { background: repeating-linear-gradient(135deg, rgba(139,147,159,0.38) 0 5px, rgba(139,147,159,0.10) 5px 10px); }
.gauge .gz.c { background: var(--grade-c); }
.gauge .gz.b { background: var(--grade-b); }
.gauge .gz.a { background: var(--accent-bright); }
/* A and B are bright enough to carry dark ink; the amber C block is not. Dark
   ink on it measured 3.47:1, and no ink can rescue it since even pure black on
   this amber tops out at 4.18. White clears 5:1 and matches how C already
   renders on .g-medal and .ladder .lt, so the letter is consistent everywhere. */
.gauge .gz.a .gl, .gauge .gz.b .gl { color: var(--grade-ink); }
.gauge .gz.c .gl { color: #fff; }
.gauge-ticks {
  position: absolute; top: 0; height: 46px; left: 0; right: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,0.30) 0 1px, transparent 1px);
  background-size: calc(100% / 11) 100%; border-radius: 6px;
}
.gauge-nums { position: relative; height: 22px; margin-top: 6px; }
.gauge-nums span {
  position: absolute; left: calc(var(--at) / 11 * 100%); transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; color: var(--on-dark-mute);
}
.gauge-nums .unit { left: auto; right: 0; transform: none; color: var(--on-dark-mute); }
.gauge-needle {
  position: absolute; top: -14px; height: 74px; width: 2px; background: #fff;
  left: calc(var(--at) / 11 * 100%);
  /* From-only keyframe, deliberately with NO delay and NO fill mode: a fill
     would pin the needle at `from` (left 0) in any tab where animations never
     advance (background tabs, embedded panes), and a fill's keyframe beats
     even inline styles. With neither, the needle's natural position is always
     the true 9/32" reading and the sweep is purely additive when it runs. */
  animation: needle-sweep 1.1s cubic-bezier(0.22, 0.9, 0.3, 1);
}
@keyframes needle-sweep { from { left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gauge-needle { animation: none; }
}
.gauge-needle .chip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 7px;
  background: #fff; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
}
.gauge-needle .chip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #fff;
}
.gauge-cap { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; color: var(--on-dark-mute); }

/* ---------- The rack: live listings as measurements ----------
   The storefront owns the photography; here the proof is the numbers, so the
   listings render as an aligned spec table rather than photo tiles. One grid
   template on the row keeps every column true down the stack. */
.rack-sec { padding-top: 44px; }
.rack-hd { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.rack-hd h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin: 0; }
/* --accent on paper lands at 4.4:1; the darker step clears 4.5 for link text. */
.rack-all { margin-left: auto; font-size: 14px; font-weight: 640; white-space: nowrap; color: var(--accent-down); }
.rack {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); overflow: hidden;
}
.rack-row {
  display: grid; align-items: center; gap: 18px;
  /* Every track is fixed except the name, so the columns line up down the
     stack: each row is its own grid, and one `auto` track sized to its own
     content would stagger the numbers row to row. */
  grid-template-columns: 34px minmax(0, 1fr) 92px 88px 148px 132px;
  padding: 15px 18px; border-top: 1px solid var(--border); color: inherit;
}
.rack-row:first-child { border-top: 0; }
a.rack-row:hover { background: var(--panel); text-decoration: none; }
a.rack-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rk-main { min-width: 0; }
.rk-size { display: block; font: 640 14.5px var(--mono); letter-spacing: -0.01em; }
.rk-name {
  display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-spec { font: 500 13.5px var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rk-spec i {
  display: block; font: 680 10.5px var(--font); font-style: normal;
  /* --faint lands at 3.1:1 on the card; these labels are small, so they take
     the stronger muted step. */
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.rk-spec.wide { font-family: var(--font); font-size: 13.5px; }
.rk-price {
  text-align: right; font-family: var(--display); font-weight: 700; font-size: 25px;
  line-height: 1; white-space: nowrap;
}
.rk-price i {
  display: block; font: 400 12px var(--font); font-style: normal;
  color: var(--muted); margin-top: 4px;
}
.rack-empty { padding: 34px 20px; text-align: center; }
.rack-empty p { color: var(--muted); margin: 0 0 14px; }
/* Skeleton rows lay out on their own flex line rather than the data grid, so
   the column rules below never have to account for a placeholder's children. */
.rack-row.skeleton { display: flex; align-items: center; gap: 18px; pointer-events: none; }
.rack .sk { height: 13px; border-radius: 4px; background: var(--track); display: block; flex: 1; }
.rack .sk-m { flex: 0 0 34px; height: 30px; border-radius: 999px; }
.rack .sk-l { flex: 2; height: 30px; }
.rack .sk-r { flex: 0 0 68px; height: 26px; }

/* Tread-block divider between paper sections */
.tread-divider {
  height: 12px; margin: 0 auto; max-width: 1200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='12' viewBox='0 0 42 12'%3E%3Cg fill='%2314171d' fill-opacity='0.14'%3E%3Cpath d='M2 0h12l-4 12H-2zM22 0h12l-4 12H18z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
}

/* Section heading */
.sec-head { max-width: 640px; margin: 0 0 40px; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.005em; }
.sec-head p { font-size: 17px; color: var(--muted); margin-top: 10px; }
.dark .sec-head p { color: var(--on-dark-soft); }

/* ---------- The ladder ----------
   The three grades read as rungs off the gauge above them, not as three
   equal cards: the letter is the anchor, the threshold is set in mono
   because it is a measurement, and the prose explains the rung. */
.ladder { margin: 40px 0 0; display: grid; gap: 0; }
.rung {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 22px;
  padding: 24px 0; border-top: 1px solid var(--line-dark); align-items: start;
}
.rung:first-child { border-top: 0; padding-top: 0; }
.ladder dt { margin: 0; }
.ladder dd { margin: 0; }
.ladder .lt {
  width: 62px; height: 62px; border-radius: 13px; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 36px; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22);
}
.ladder .lt.a { background: var(--grade-a); }
.ladder .lt.b { background: var(--grade-b); }
.ladder .lt.c { background: var(--grade-c); }
.ladder .rg {
  font: 500 13px var(--mono); color: var(--accent-bright);
  letter-spacing: 0.01em; margin-bottom: 7px;
}
.ladder p { color: var(--on-dark-soft); font-size: 15px; margin: 0; max-width: 62ch; }
.grade-note { color: var(--on-dark-mute); font-size: 14px; margin-top: 30px; }
.grade-note a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.step .no {
  width: 34px; height: 34px; border-radius: 8px; background: var(--ink);
  color: #fff; font: 800 16px var(--display); display: flex; align-items: center;
  justify-content: center; margin-bottom: 14px;
}
.step h3 { font-family: var(--display); font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--muted); margin: 0; }

/* ---------- Buying flow ----------
   A sequence, so it is numbered; a rule rather than four boxes, so it does
   not read as another card grid. The last step is where the money and the
   install happen, so it carries the accent. */
.flow { list-style: none; counter-reset: flow; margin: 0; padding: 0; display: grid; gap: 0; }
.flow li {
  counter-increment: flow; position: relative;
  padding: 22px 0 22px 62px; border-top: 1px solid var(--border);
}
.flow li:first-child { border-top: 0; padding-top: 4px; }
.flow li::before {
  content: counter(flow); position: absolute; left: 0; top: 22px;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted);
  font: 800 17px var(--display); display: flex; align-items: center; justify-content: center;
}
.flow li:first-child::before { top: 4px; }
.flow li.last::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.flow h3 { font-family: var(--display); font-weight: 700; font-size: 22px; margin: 0 0 5px; }
.flow p { font-size: 15px; color: var(--muted); margin: 0; max-width: 64ch; }

/* Split (for shops) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .body h2 { color: #fff; }
/* The FOR SHOPS band collapses to its summary line; the pitch only matters
   to someone who runs a shop. */
.shops-toggle > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.shops-toggle > summary::-webkit-details-marker { display: none; }
.shops-toggle > summary h2 { margin: 0; }
.shops-toggle .shops-hint { color: var(--on-dark-mute); font-size: 15px; font-weight: 600; }
.shops-toggle .shops-hint::after { content: " ▾"; font-size: 12px; }
.shops-toggle[open] .shops-hint::after { content: " ▴"; }
.shops-toggle > .split { margin-top: 26px; }

.shop-points { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 14px; }
.shop-points li { display: flex; gap: 13px; align-items: flex-start; color: var(--on-dark-soft); font-size: 15.5px; }
.shop-points li b { color: #fff; font-weight: 680; }
.shop-points .n { width: 28px; height: 28px; border-radius: 8px; flex: none; background: rgba(35,168,81,0.16); color: var(--accent-bright); display: flex; align-items: center; justify-content: center; font: 800 14px var(--display); }
/* What a shop is actually buying, set as a dictionary entry. This replaced a
   mock leads dashboard: it invented three customers and their reservations,
   which is fabricated proof for a product whose whole claim is disclosure. */
.def-card {
  background: #12151b; border: 1px solid var(--line-dark); border-radius: 18px; padding: 28px;
  box-shadow: var(--shadow-dark);
}
.def-lab {
  font-family: var(--display); font-weight: 700; font-size: 30px; color: #fff;
  line-height: 1; margin-bottom: 14px;
}
.def-lab span {
  font: 400 italic 14px var(--font); color: var(--on-dark-mute); margin-left: 9px;
  letter-spacing: 0;
}
.def-body { color: var(--on-dark); font-size: 16.5px; line-height: 1.5; margin: 0 0 18px; }
.def-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-dark); }
.def-list li {
  padding: 12px 0 12px 24px; border-bottom: 1px solid var(--line-dark); position: relative;
  color: var(--on-dark-soft); font-size: 14.5px;
}
.def-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 11px; height: 2px; background: var(--accent-bright);
}
.def-foot { color: var(--on-dark-mute); font-size: 13.5px; margin: 18px 0 0; line-height: 1.55; }

/* Final CTA */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.cta-band p { font-size: 18px; color: var(--on-dark-soft); max-width: 30em; margin: 14px auto 28px; }

/* ---------- Landing bands (legacy, still used by /shop + partners) ---------- */
section.band { padding: 46px 0; border-top: 1px solid var(--border); }
.band-head { max-width: 620px; margin-bottom: 26px; }
.band-head p { color: var(--muted); font-size: 15.5px; }
.band .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.band .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.verify-band {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px;
}
.verify-band .try { display: flex; gap: 10px; min-width: 340px; }
.verify-band .try input { flex: 1; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.stat { padding: 15px 16px; }
.stat .v { font-family: var(--display); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.stat .k { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ---------- Checklist / photos ---------- */
.checkrow {
  display: flex; align-items: flex-start; gap: 13px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; background: var(--card);
}
.field label.checkrow { display: flex; }
.checkrow input[type="checkbox"], .checkrow input[type="radio"] {
  width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none;
}
.checkrow span { font-size: 14px; }

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* A <button>, so the UA's own font, colour and width are reset back to the
   card it has to look like. */
.photo-slot {
  border: 1.5px dashed var(--border-strong); border-radius: 8px; padding: 10px;
  text-align: center; cursor: pointer; background: var(--card);
  display: block; width: 100%; font: inherit; color: inherit;
}
.photo-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-slot img { max-width: 100%; border-radius: 6px; display: block; margin: 0 auto 6px; }
.photo-slot .lbl { display: block; font-size: 13px; font-weight: 620; }
.photo-slot .sub { display: block; font-size: 12px; color: var(--muted); }
.photo-slot.filled { border-style: solid; border-color: var(--accent); }
.photo-slot.warn { border-color: var(--amber); }

/* ---------- Waitlist (public landing CTA) ---------- */
.wl { max-width: 620px; margin: 22px auto 0; }
.wl-personas { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.wl-persona {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px;
  font-weight: 620; color: var(--on-dark-soft); background: transparent;
  border: 1.5px solid var(--line-dark-2);
}
.wl-persona.on { color: #fff; background: var(--accent); border-color: var(--accent); }
.wl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wl-row input {
  flex: 1 1 220px; min-width: 0; padding: 13px 14px; font-size: 15px;
  border-radius: 8px; border: 1.5px solid var(--line-dark-2); background: #16181d; color: #fff;
}
.wl-row input::placeholder { color: #7b8290; }
.wl-row input:focus { outline: none; border-color: var(--accent); }
.wl-row .wl-zip { flex: 0 1 110px; }
.wl-row .btn { flex: 0 0 auto; }
.wl-msg { margin: 10px 0 0; font-size: 14px; min-height: 1.2em; }
.wl-msg.err { color: #ffb4b4; }
.wl-msg.ok { color: var(--accent-bright); font-weight: 620; }
@media (max-width: 560px) { .wl-row .btn, .wl-row .wl-zip { flex: 1 1 100%; } }

/* ---------- Guided capture sheet ---------- */
/* Full-viewport camera sheet. Flat and solid: tire-black stage, one accent,
   no gradients or glow, matching the design system's dark bands. */
.cap-sheet {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  background: var(--stage);
}
.cap-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cap-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cap-review {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--stage);
}
.cap-hint {
  padding: 10px 16px; text-align: center; background: var(--stage);
  border-top: 1px solid var(--line-dark);
}
/* Wraps rather than ellipsizing: this is the framing instruction, and a title
   tooltip is unreachable on the phone where the tech is actually reading it. */
.cap-hint-text {
  display: inline-block; max-width: 100%; font-size: 13px; font-weight: 560;
  color: #e8e6e1; line-height: 1.35;
}
.cap-bar {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--stage);
}
.cap-shutter {
  width: 62px; height: 62px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 4px solid var(--accent); padding: 0;
}
.cap-shutter:active { background: var(--accent-soft); }
.cap-sheet .btn-ghost { color: #e8e6e1; border-color: var(--line-dark-2); background: transparent; }
.cap-sheet .btn-ghost:hover { background: #1a1d22; border-color: #4a4f58; }
.cap-actions { display: flex; align-items: center; gap: 10px; }
/* display rules above must not defeat the hidden attribute */
.cap-sheet [hidden] { display: none !important; }

/* ---------- Modal ---------- */
/* A centered, light-theme dialog: warm paper card over a dark scrim, one
   accent, no glass or glow, matching the rest of the app rather than the
   camera sheet's full-screen tire-black stage above. General purpose (the
   Facebook-text editor is the first caller), so nothing here names what it
   shows. */
.modal-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(13,16,21,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-dark);
  width: 100%; max-width: 560px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
}
/* Wraps rather than clipping: a listing title is shop-written and has no
   length limit, so eliding it here would hide the one thing confirming which
   listing this text belongs to. */
.modal-head h3 { margin: 0; flex: 1; font-size: 16px; }
.modal-close {
  flex: none; background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.modal-close:hover { background: var(--track); color: var(--ink); }
/* flex + min-height:0 is load-bearing: without it a flex child sizes to its
   OWN content instead of the space left inside the card, so tall content
   never reaches this element's overflow-y:auto and the card's own
   overflow:hidden clips it instead, with no scrollbar and no way to reach the
   rest. Caught by the clip auditor, not by eye. */
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-head, .modal-foot { flex: none; }
.modal-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px 18px; border-top: 1px solid var(--border);
}
.fb-text {
  width: 100%; min-height: 260px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 14px;
  font: 400 13.5px var(--mono); line-height: 1.55; color: var(--ink); background: var(--panel);
}
.fb-text:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ---------- PDP ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin: 18px 0 14px; }
.crumbs a { color: var(--muted); }
.pdp { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; align-items: start; }
/* CONTAIN, never cover. Three of the four capture slots crop SQUARE (tread
   1400, wheel 1600, gauge 1200; only sidewall_outer is 4:3), and a square
   image in this 4:3 box under `cover` loses 12.5% of its height off the
   bottom, which is exactly where watermark.py puts the badge: the shop
   downloaded a badged photo and saw an unbadged one on the listing. Seed
   photos are all 800x600, so this only ever showed on real captures.
   It is also the right rule on its own: this image IS the grading evidence,
   and silently cropping evidence to fit a box is not something this page may
   do. Letterboxed onto --stage, which is already the backdrop here. */
.gallery .main {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--stage); border-radius: 12px; border: 1px solid var(--border);
}
.gallery .thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Each thumb is a button so it is reachable and pressable from the keyboard. */
.gallery .thumbs button {
  width: 68px; height: 51px; padding: 0; overflow: hidden; display: block;
  border-radius: 7px; border: 1.5px solid var(--border); cursor: pointer;
  background: none;
}
.gallery .thumbs button.on { border-color: var(--accent); }
.gallery .thumbs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photo download grid, in the portal's Photos modal. CONTAIN for the same
   reason the listing gallery uses it: these are square crops and a cover-fit
   would slice the badge off the bottom, which is the one thing the shop is
   here to check before posting. */
/* Visible to a screen reader, not to the eye. For a control whose purpose is
   obvious by position but has no visible label text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Tappable service chips (portal shop page). Buttons, not divs with handlers:
   this is a list a shop toggles, and every one of them has to be reachable
   from a keyboard like any other control in the portal. */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: inherit; font-size: 13.5px; line-height: 1; cursor: pointer;
  padding: 8px 11px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--border-strong); color: var(--ink-soft);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.on { background: var(--green-soft); border-color: var(--accent); color: var(--accent-down); }

/* ---------- Public shop page ---------- */
.shop-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px;
  align-items: start; padding: 30px 0 6px;
}
.shop-contact { align-self: start; }
.shop-hours { margin: 10px 0 0; }
.shop-hours div { color: var(--muted); white-space: pre-line; margin-top: 2px; }
.shop-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.svc-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px;
}
.svc-list li { padding-left: 20px; position: relative; }
.svc-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
@media (max-width: 860px) {
  .shop-head { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
}

/* Listing row: a table in card clothing. Every track but the name is fixed, so
   the mark, status, price and buttons line up down the list instead of landing
   wherever each title pushes them. */
.ls-row {
  display: grid; align-items: center; gap: 10px 14px;
  grid-template-columns: minmax(0, 1fr) 82px 84px 78px 316px;
}
.ls-main { min-width: 0; }                 /* or a long title refuses to shrink */
.ls-main b { display: block; line-height: 1.3; }
.ls-sub { margin-top: 3px; }
.ls-price { text-align: right; font-weight: 650; white-space: nowrap; }
.ls-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
/* View is always LAST and always on the right edge, whichever buttons render
   next to it, so it does not drift card to card. */
.ls-view { margin-left: 2px; }

@media (max-width: 900px) {
  /* Stacked, because five tracks in a phone's width would make the name column
     a two-character sliver. The name spans the full row and the rest sit under
     it in reading order; the buttons keep their own row so a thumb has room. */
  .ls-row { grid-template-columns: auto auto 1fr; gap: 8px 10px; }
  .ls-main { grid-column: 1 / -1; }
  .ls-price { text-align: left; }
  .ls-acts { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ph-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ph-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block;
  background: var(--stage); border-radius: 8px; border: 1px solid var(--border);
}
.ph-grid figcaption { text-align: center; }
.ph-grid .btn { width: 100%; }
.buybox { position: sticky; top: 80px; }
.buybox .price { font-family: var(--display); font-size: 38px; font-weight: 700; letter-spacing: 0; }
.buybox .per { color: var(--muted); font-size: 13.5px; }
.includes { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.includes li { font-size: 13.5px; color: var(--muted); margin: 5px 0; }
.includes ul { margin: 6px 0 0; padding-left: 18px; }

.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 9px 0; border-bottom: 1px solid var(--border); }
.spec-table td:first-child { color: var(--muted); width: 46%; }
.spec-table td:last-child { font-weight: 620; }
.spec-table tr:last-child td { border-bottom: 0; }

.fit-check { border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; margin: 14px 0; background: var(--panel); }
.fit-check .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.fit-ok { border-color: var(--accent-line); background: var(--accent-soft); }
.fit-no { border-color: var(--amber-line); background: var(--amber-soft); }

/* ---------- Report / record ---------- */
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.report-kv { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; background: var(--card); }
.report-kv .k { font-size: 12px; color: var(--muted); }
.report-kv .v { font-weight: 650; font-variant-numeric: tabular-nums; }
.record-head {
  display: flex; align-items: center; gap: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap;
}
.record-head .seal {
  width: 46px; height: 46px; border-radius: 999px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; flex: none;
}

/* ---------- Footer ---------- */
/* Breathing room before the footer. Without it the last card on a page butts
   straight into the dark band and reads as cut off. */
footer { margin-top: 56px; background: var(--asphalt); color: var(--on-dark-soft); position: relative; }
/* Except after a full-bleed band (the landing and /shop end on one), where a
   gap would show as a stripe of paper between two dark areas. */
section + footer { margin-top: 0; }
.footer-in {
  max-width: 1200px; margin: 0 auto; padding: 52px 22px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px;
}
.footer-in h5 {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--on-dark-mute);
}
.footer-in a { display: block; color: var(--on-dark-soft); font-size: 13.5px; padding: 3px 0; }
.footer-in a:hover { color: #fff; text-decoration: none; }
.footer-in .brand-col img { height: 26px; opacity: 0.95; }
.footer-in .brand-col p { font-size: 13px; color: var(--on-dark-mute); margin-top: 12px; max-width: 26em; }
.footer-base { border-top: 1px solid var(--line-dark); }
.footer-base .in {
  max-width: 1200px; margin: 0 auto; padding: 16px 22px;
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--on-dark-mute);
}
.footer-base .in a { color: var(--on-dark-soft); }
.footer-base .in a:hover { color: #fff; }
.footer-base .spacer { flex: 1; }

/* ---------- Skeletons ---------- */
@keyframes skel { 0% { opacity: 0.55; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
.skel { background: var(--track); border-radius: 8px; animation: skel 1.3s ease-in-out infinite; }

section.block { margin-top: 30px; }
.hero-points { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }

/* ---------- Print ---------- */
@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
  .label-sheet { box-shadow: none !important; border: 0 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero .lede { grid-template-columns: 1fr; gap: 26px; }
  .shop-layout { grid-template-columns: 1fr; }
  /* RESULTS FIRST. Stacked, the rail put ~1,000px of facets above the grid and
     the first tire landed 2,398px down: nearly three screens on a 390x844
     phone, before a shopper arriving from a Facebook link sees one tire. The
     rail becomes a sheet opened from the toolbar instead. */
  .rail {
    position: fixed; inset: 0; z-index: 70; margin: 0;
    background: var(--card); overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 0 18px;
    transform: translateY(100%); visibility: hidden;
    /* visibility is a DISCRETE property: listed with a duration it flips at
       50% progress, which left the panel unfocusable for the first 130ms and
       silently swallowed the focus move into it. Delay it to the end when
       closing, apply it instantly when opening. */
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 260ms;
  }
  .rail.open {
    transform: none; visibility: visible;
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .rail, .rail.open { transition: visibility 0s; }
  }
  .rail-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(13, 16, 21, 0.5); }
  .rail-scrim:not([hidden]) { display: block; }
  .rail-head {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 2; background: var(--card);
    margin: 0 -18px; padding: 12px 18px 10px; border-bottom: 1px solid var(--border);
  }
  .rail-head h2 { flex: 1; margin: 0; font-family: var(--display); font-size: 26px; }
  .rail-close {
    width: 44px; height: 44px; flex: none; border: 0; background: none;
    font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: 8px;
  }
  .rail-close:hover { background: var(--panel); color: var(--ink); }
  /* Sticky rather than fixed: .rail's transform makes it the containing block
     for fixed children, so a fixed footer would jump when the transform is
     removed at the end of the open transition. */
  .rail-foot {
    display: block; position: sticky; bottom: 0; z-index: 2;
    margin: 8px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--border);
  }
  .rail-foot .btn { width: 100%; }
  .rail .facet:first-of-type { border-top: 0; }
  .filters-btn { display: inline-flex; min-height: 40px; }
  /* In the sheet these rows are the primary control and get tapped with a
     thumb, so they take a full 44px target. The desktop rail keeps its denser
     rows, where the pointer is a mouse. */
  .rail .facet label.opt { min-height: 44px; }
  .rail .facet label.opt input { width: 20px; height: 20px; }
  .rail .clear-btn { min-height: 44px; }
  .pdp { grid-template-columns: 1fr; }
  .buybox { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .band .cols-3 { grid-template-columns: 1fr; }
  .band .cols-2 { grid-template-columns: 1fr; }
  .verify-band { grid-template-columns: 1fr; }
  .verify-band .try { min-width: 0; }
  .footer-in { grid-template-columns: 1fr 1fr; }
  /* Phone gauge: the zone letters shrink, the caption below carries the
     hatched-zone meanings, and the spec strip stacks into full-width rows. */
  .gauge .gz .gl { font-size: 18px; }
  .gauge-needle .chip { font-size: 11px; }
  /* At narrow widths the pinned unit label collides with the "10" numeral;
     the caption below already carries the /32" unit. */
  .gauge-nums .unit { display: none; }
  /* Hero stacks: the finder leads on a phone, since the search IS the page. */
  .lp-hero-in { grid-template-columns: 1fr; gap: 34px; }
  .lp-hero-copy { order: 2; }
  .finder { order: 1; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* The rack drops the pickup city first: it is the one column a shopper can
     get from the listing itself. Children are addressed by position, since
     every cell is a span and :nth-of-type would count the wrong things. */
  .rack-row { grid-template-columns: 34px minmax(0, 1fr) 92px 88px 132px; }
  .rack-row > :nth-child(5) { display: none; }
}
@media (max-width: 720px) {
  .lp-nav nav, .lp-nav .signin { display: none; }
  .lp-nav-in { padding: 16px 20px; }
  .lp-hero { padding: 96px 22px 56px; }
  .section { padding: 54px 0; }
  .rung { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 0; }
  .ladder .lt { width: 48px; height: 48px; font-size: 28px; border-radius: 11px; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .search-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .topbar nav a { padding: 6px 8px; }
  /* Archivo Black sets a much wider lockup than the condensed face did, so at
     29px tall the wordmark ran to about half a 375px screen and the header
     started outweighing the page under it. Height, not width: the logo is one
     <img> whose aspect is fixed by its viewBox. */
  .topbar .brand img, .lp-nav .brand img { height: 24px; }
  .footer-in { grid-template-columns: 1fr; }
  .fit-check .row { grid-template-columns: 1fr; }
  /* Rack on a phone: letter, tire and price hold the first line; tread and
     age drop to a second line under the tire rather than truncating. */
  .rack-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "medal main price" "specs specs specs";
    gap: 12px 14px; padding: 15px 16px;
  }
  .rack-row > :nth-child(1) { grid-area: medal; }
  .rack-row > :nth-child(2) { grid-area: main; }
  .rack-row > :nth-child(3) { grid-area: specs; }
  .rack-row > :nth-child(4) { grid-area: specs; justify-self: end; }
  .rack-row > :nth-child(6) { grid-area: price; }
  .rk-price { font-size: 22px; }
  .rk-spec i { display: inline; margin: 0 6px 0 0; }
  .flow li { padding-left: 52px; }
  .flow li::before { width: 32px; height: 32px; font-size: 15px; }
  .rack-hd { flex-wrap: wrap; gap: 8px; }
  /* Phone stage: the tire shrinks to a thumbnail column beside the facts
     rather than stacking, so it never pushes the rack another screen down. */
  .hero-stage { grid-template-columns: minmax(104px, 132px) minmax(0, 1fr); gap: 18px; }
  .hero-facts li { padding-left: 22px; font-size: 13.5px; }
}

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; padding-bottom: 20px; }
.post-card { display: block; color: inherit; }
.post-card:hover { text-decoration: none; box-shadow: var(--shadow-lift); transform: translateY(-1px); transition: box-shadow 120ms, transform 120ms; }
.post-card-section { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.post-card h2 { font-family: var(--display); font-size: 22px; margin: 0 0 8px; }
.post-card p { color: var(--muted); font-size: 14px; }

.post { max-width: 720px; padding-top: 6px; }
.post-head { padding: 8px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.post-head h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.005em; line-height: 1.02; }
.post-dek { font-family: var(--font); font-size: 18px; color: var(--muted); margin: 12px 0 12px; line-height: 1.5; }
.post-byline { margin: 0; }

.takeaways { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 18px 20px; margin: 0 0 26px; }
.takeaways h2 { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin: 6px 0; font-size: 14.5px; }

.prose { font-size: 16.5px; line-height: 1.72; color: var(--ink); }
.prose > h2 { font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: 0; margin: 34px 0 12px; }
.prose > h3 { font-size: 19px; font-weight: 700; margin: 26px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 7px 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 680; }
.prose blockquote { margin: 22px 0; padding: 4px 18px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 18px; font-style: normal; }
.prose blockquote cite { display: block; font-size: 13.5px; color: var(--muted); font-style: normal; margin-top: 8px; }
.prose figure { margin: 22px 0; }
.prose .stat-callout { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin: 22px 0; box-shadow: var(--shadow); }
.prose .stat-callout .big { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.prose .stat-callout .cap { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.prose table.facts { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 22px 0; }
.prose table.facts th { text-align: left; font-size: 12px; font-weight: 660; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 12px; border-bottom: 2px solid var(--border); }
.prose table.facts td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose table.facts tr:last-child td { border-bottom: 0; }
.prose .footnote { color: var(--muted); font-size: 13.5px; }

.faq { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 8px; }
.faq > h2 { font-family: var(--display); font-size: 30px; font-weight: 700; margin: 20px 0 6px; }
.faq .qa { padding: 16px 0; border-bottom: 1px solid var(--border); }
.faq .qa h3 { font-size: 17px; font-weight: 680; margin: 0 0 6px; }
.faq .qa p { margin: 0; color: var(--ink); font-size: 15.5px; line-height: 1.6; }

.post-cta { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin: 34px 0; box-shadow: var(--shadow); }
.post-cta h2 { font-size: 22px; margin: 0 0 8px; }
.post-cta p { color: var(--muted); margin: 0 0 14px; }
.post-cta .btn { margin-right: 8px; }

.sources { margin-top: 30px; }
.sources > h2 { font-size: 20px; font-weight: 700; }
.sources ol { padding-left: 22px; }
.sources li { margin: 6px 0; font-size: 14px; }
.sources a { color: var(--muted); text-decoration: underline; }
.sources a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .prose { font-size: 16px; }
  .post-grid { grid-template-columns: 1fr; }
}

/* ---------- Signup wizard ---------- */
.quiz-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.quiz-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; max-width: 640px; margin: 0 auto; width: 100%; }
.quiz-top .exit { color: var(--muted); font-size: 22px; line-height: 1; text-decoration: none; flex: none; }
.quiz-top .exit:hover { color: var(--muted); text-decoration: none; }
.quiz-track { flex: 1; height: 12px; background: var(--track); border-radius: 999px; overflow: hidden; }
.quiz-track i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 320ms cubic-bezier(.4,0,.2,1); }
.quiz-top .brand img { height: 26px; display: block; }
.quiz-body { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 8px 18px 120px; }
.quiz-inner { width: 100%; max-width: 560px; padding-top: 24px; }
@media (min-width: 700px) { .quiz-body { align-items: center; padding-bottom: 60px; } .quiz-inner { padding-top: 0; } }
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.quiz-step { animation: stepIn 240ms cubic-bezier(.2,.7,.2,1); }
.quiz-q { font-family: var(--display); font-size: clamp(27px, 5vw, 36px); font-weight: 700; letter-spacing: 0; line-height: 1.1; margin: 0 0 8px; }
.quiz-sub { color: var(--muted); font-size: 15.5px; margin: 0 0 22px; }
.choice-grid { display: flex; flex-direction: column; gap: 11px; }
.choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 2px solid var(--border-strong); border-radius: 12px;
  padding: 16px 18px; font: 620 16px var(--font); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 0 var(--border-strong); transition: transform 60ms, border-color 120ms, background 120ms, box-shadow 60ms;
}
.choice:hover { border-color: var(--border-strong); }
.choice:active { transform: translateY(2px); box-shadow: 0 0 0 var(--border-strong); }
.choice .ico { width: 30px; height: 30px; flex: none; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.choice .lbl { flex: 1; }
.choice .tick { width: 22px; height: 22px; flex: none; border-radius: 999px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.choice .tick svg { opacity: 0; }
.choice.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 2px 0 var(--accent-down); }
.choice.on .ico { color: var(--accent); }
.choice.on .tick { border-color: var(--accent); background: var(--accent); }
.choice.on .tick svg { opacity: 1; }
.quiz-fields { display: flex; flex-direction: column; gap: 16px; }
.quiz-fields label { display: block; font-size: 14px; font-weight: 640; margin-bottom: 7px; }
.quiz-fields input, .quiz-fields select {
  width: 100%; border: 2px solid var(--border-strong); border-radius: 12px;
  padding: 14px 15px; font: 400 16.5px var(--font); color: var(--ink); background: var(--card);
}
.quiz-fields input:focus, .quiz-fields select:focus { outline: none; border-color: var(--accent); }
.quiz-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--border); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.quiz-foot-in { max-width: 560px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; }
.quiz-back { background: none; border: 0; color: var(--muted); font: 620 15px var(--font); cursor: pointer; padding: 10px; }
.quiz-back:hover { color: var(--ink); }
.quiz-continue {
  flex: 1; background: var(--accent); color: #fff; border: 0; border-radius: 12px;
  padding: 15px; font: 720 16px var(--font); cursor: pointer; box-shadow: 0 3px 0 var(--accent-down);
  transition: transform 60ms, box-shadow 60ms, opacity 120ms; letter-spacing: 0.01em;
}
.quiz-continue:active { transform: translateY(3px); box-shadow: 0 0 0 var(--accent-down); }
.quiz-continue:disabled { background: var(--track); box-shadow: 0 3px 0 var(--border-strong); color: var(--muted); cursor: default; }
.quiz-err { color: var(--red); font-size: 13.5px; margin: 10px 0 0; min-height: 18px; }
.quiz-center { text-align: center; }
.quiz-hero-mark { width: 76px; height: 76px; margin: 0 auto 20px; }
.quiz-center h1 { font-family: var(--display); font-size: clamp(28px, 6vw, 38px); font-weight: 800; letter-spacing: 0; margin: 0 0 12px; }
.quiz-center p { color: var(--muted); font-size: 16.5px; max-width: 30em; margin: 0 auto 10px; }
.success-check { width: 92px; height: 92px; margin: 0 auto 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; animation: pop 420ms cubic-bezier(.2,1.3,.4,1); }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.next-list { text-align: left; max-width: 340px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 12px; }
.next-list .row { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.next-list .n { width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 13px var(--mono); display: flex; align-items: center; justify-content: center; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 9px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(360deg); opacity: 0.9; } }