/* CarBluff design system — dark-first, inspection-report brutalism */
:root {
  --bg: #0b0e13;
  --panel: #12161d;
  --panel-2: #171c25;
  --border: #262d38;
  --ink: #edf1f5;
  --ink-2: #9aa5b1;
  --ink-3: #7b8695; /* WCAG AA: 4.9:1 on --panel, 5.2:1 on --bg for small text */
  --accent: #d7ff3e;
  --accent-ink: #0b0e13;
  --accent-glow: rgba(215, 255, 62, 0.14); /* tokenized drop-shadow tint; every palette overrides this */
  --good: #4ade80;
  --good-lt: #86efac; /* 5-tier "Good" light-green (Excellent=good, Good=good-lt, Fair=warn, Poor=serious, Bad=critical) */
  --warn: #fbbf24;
  --serious: #fb923c;
  --critical: #f87171;
  /* Deal-band colors (2026-08-06, Matt's direct instruction): reuse the same
     red-to-green vocabulary as the scam-risk bands (--good/--warn/--serious/
     --critical) instead of the earlier deliberately-distinct blue-to-violet
     palette. The two questions ("is this a scam" vs "is this a good deal")
     stay distinguishable by their section headers (SCAM RISK / DEAL SCORE),
     not by color anymore. --accent bridges "good" (not quite great) since
     the scam axis only has 4 named colors but Tier A has 5 bands. */
  --deal-great: var(--good);
  --deal-good: var(--accent);
  --deal-typical: var(--warn);
  --deal-caution: var(--serious);
  --deal-poor: var(--critical);
  /* 2026-08-12 redesign: the whole site moves onto the result-screen visual
     language — hairline borders (was 2px), softer radii (was 2px), and soft
     tinted depth in place of the neobrutalist zero-blur lime block-shadow. */
  --radius: 8px;
  --bw: 1px;
  --shadow-soft: 0 24px 48px -30px rgba(0, 0, 0, 0.5);
  /* Default typeface (2026-08-12 redesign): Schibsted Grotesk replaces Chakra
     Petch as the free-tier default — clean, modern, and distinctive (an editorial
     news grotesk), deliberately NOT one of the overused AI-default sans faces. The
     subscriber font switcher (js/theme.js) can override --font-head/--font-mono via
     [data-font]; Chakra Petch is kept as a selectable option below. */
  --font-head: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent);
  color: var(--accent-ink); padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: var(--bw) solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 8px 0; }
.logo svg { display: block; }
.logo b { font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; }
.logo b span { color: var(--accent); }
.nav a.link {
  color: var(--ink-2); text-decoration: none; font-family: var(--font-mono);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-left: 22px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a.link:hover, .nav a.link:focus-visible { color: var(--accent); }
@media (max-width: 640px) {
  /* two-row header: logo, then the nav strip — nothing hidden, nothing colliding */
  header { position: static; }
  .nav { height: auto; padding: 12px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .nav nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .nav a.link { margin-left: 0; font-size: 12px; min-height: 40px; }
  .logo b { font-size: 18px; }
}

/* ---------- hero ---------- */
.hero { padding: 30px 0 0; border-bottom: var(--bw) solid var(--border); }
.hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr; padding-bottom: 30px; }
@media (min-width: 1024px) {
  .hero { padding: 64px 0 0; }
  .hero-grid { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; padding-bottom: 48px; }
}
.hero-card {
  border: var(--bw) solid var(--border); background: var(--panel);
  box-shadow: var(--shadow-soft);
  padding: 24px; border-radius: var(--radius); max-width: 380px; display: none;
}
@media (min-width: 1024px) { .hero-card { display: block; justify-self: end; } }
.hero-card-top {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3);
  border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px;
}
.hero-card-score {
  font-family: var(--font-mono); font-size: 64px; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.hero-card-score span { font-size: 22px; color: var(--ink-3); font-weight: 400; }
.hero-card-verdict {
  display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--critical); border: var(--bw) solid var(--critical); padding: 5px 10px; margin-top: 10px;
}
.hero-card-meter { position: relative; display: flex; height: 10px; border: var(--bw) solid var(--border); margin: 18px 0 16px; }
.hc-seg { height: 100%; }
.hc-1 { flex: 4; background: var(--critical); }
.hc-2 { flex: 2; background: var(--serious); opacity: 0.25; }
.hc-3 { flex: 2; background: var(--warn); opacity: 0.25; }
.hc-4 { flex: 2; background: var(--good); opacity: 0.25; }
.hc-pin { position: absolute; left: 23%; top: -7px; width: 2px; height: 24px; background: var(--ink); }
.hero-card-flag {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
  border-top: 1px solid var(--border); padding: 9px 0;
}
.hero-card-flag.dim { color: var(--ink-3); }
/* warning tape — the page's one authored motion moment */
.tape {
  border-top: var(--bw) solid var(--border); background: var(--accent);
  overflow: hidden; white-space: nowrap;
}
.tape-track { display: inline-block; animation: tape-scroll 28s linear infinite; }
.tape span {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; color: var(--accent-ink); padding: 10px 0;
  padding-right: 0.9em; /* keeps the loop seam from colliding */
}
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.kicker {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
/* 2026-08-12 redesign: dropped the "// " eyebrow prefix (an AI-slop tell). The
   breadcrumb already categorizes article pages; the remaining .kicker is a plain
   quiet label. */
.kicker::before { content: ""; }
h1 {
  font-size: clamp(34px, 4.5vw, 42px); line-height: 1.02; letter-spacing: -0.02em;
  text-transform: uppercase; font-weight: 700; max-width: 24ch;
}
h1 em { font-style: normal; color: var(--accent); }
.sub { color: var(--ink-2); max-width: 54ch; margin-top: 16px; font-size: 18px; line-height: 1.5; }
/* hero action row — one primary scan CTA, everything else demoted */
.hero-actions { margin-top: 22px; gap: 16px; align-items: center; }
.hero-cta { min-height: 56px; font-size: 17px; }
@media (max-width: 559px) { .hero-cta { width: 100%; } }
.hero-seelink {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--border);
  padding-bottom: 2px; transition: color 120ms ease, border-color 120ms ease;
}
.hero-seelink:hover, .hero-seelink:focus-visible { color: var(--accent); border-color: var(--accent); }

/* ---------- A/B hero test (cb_ab_hero) ----------
   data-hero is assigned pre-paint in <head>. Control A keeps the current hero (all the default
   styles above are untouched). Variant B swaps to the tighter headline and relocates the LIVE
   #scan-form (moved, not cloned — one instance) into the hero right column, above the fold. */
.hero-h1-b { display: none; }            /* control hides the variant-B headline */
.hero-b-only { display: none; }          /* control hides the variant-B-only sub line */
.hero-scan-slot { display: none; }       /* control hides the (empty) variant-B form slot */
.scan-more-toggle {                        /* variant-B-only affordance; shown by the rule below */
  display: none; align-items: center; min-height: 44px; /* WCAG 2.5.5 target size */
  background: none; border: none; padding: 6px 0; margin: 2px 0 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-2); cursor: pointer; text-align: left;
}
.scan-more-toggle:hover, .scan-more-toggle:focus-visible { color: var(--accent); }

html[data-hero="B"] .hero-h1-a,
html[data-hero="B"] .hero-a-only { display: none; }   /* B drops the control headline, sub, CTA row, decorative card */
html[data-hero="B"] .hero-h1-b { display: block; }
html[data-hero="B"] .hero-b-only { display: block; }  /* B shows its own normal-case sub line */
html[data-hero="B"] .hero-scan-slot { display: block; scroll-margin-top: 80px; } /* clear the sticky header on #scan jumps */

/* B: the analyzer is now empty (form moved into the hero; only #report + ad-slot remain). Hide it
   until a result renders — the result view (body.cb-result-open) re-shows it to host #report. */
html[data-hero="B"] body:not(.cb-result-open) .analyzer { display: none; }

/* B hero layout: short headline left, live scanner right; they stack on mobile (scanner sits right
   under the headline, above the fold). */
html[data-hero="B"] .hero { padding-top: 22px; }
html[data-hero="B"] .hero-grid { gap: 22px; }
@media (min-width: 1024px) {
  html[data-hero="B"] .hero { padding-top: 56px; }
  html[data-hero="B"] .hero-grid { grid-template-columns: 1fr 1.1fr; align-items: start; gap: 40px; }
}

/* The relocated form, restyled to read as a compact hero panel instead of the full below-fold section. */
.hero-scan-slot .panel.in-hero { margin: 0; box-shadow: var(--shadow-soft); }
.hero-scan-slot #scan-form > h2,
.hero-scan-slot #scan-form > .hint { display: none; }        /* the headline already frames the scanner */
.hero-scan-slot .sample-row { border-bottom: none; padding-bottom: 0; margin-bottom: 16px; }
.hero-scan-slot #see-sample-deal,
.hero-scan-slot .sample-row-note { display: none; }          /* keep one one-tap sample affordance in the hero */
/* Default view is link-only: hide the mode tabs behind the "more ways to scan" reveal. */
html[data-hero="B"] .hero-scan-slot .scan-more-toggle { display: inline-flex; }
html[data-hero="B"] .hero-scan-slot .scan-modes { display: none; }
html[data-hero="B"] .hero-scan-slot .scan-modes.revealed { display: flex; }

/* B on a phone: keep the scanner + Analyze button above the fold (375x667) by trimming the hero's
   vertical rhythm — shorter top padding, tighter stack gap, and a leaner form panel. */
@media (max-width: 559px) {
  html[data-hero="B"] .hero { padding-top: 14px; }
  html[data-hero="B"] .hero-grid { gap: 14px; }
  html[data-hero="B"] .hero-scan-slot .panel.in-hero { padding: 20px; }
  html[data-hero="B"] .hero-scan-slot .sample-row { margin-bottom: 12px; }
}

/* ---------- analyzer ---------- */
.analyzer { padding: 22px 0 40px; border-bottom: var(--bw) solid var(--border); }
@media (min-width: 1024px) { .analyzer { padding: 48px 0; } }
/* the scan panel is the page's primary action — make it read as the focal object */
.analyzer > .wrap > .panel {
  box-shadow: var(--shadow-soft);
  scroll-margin-top: 16px;
}
.analyzer > .wrap > .panel > h2 { font-size: 26px; }
.panel {
  background: var(--panel); border: var(--bw) solid var(--border); border-radius: var(--radius);
  padding: 28px;
}
.panel h2, section h2 {
  font-size: 24px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 6px;
}
.panel .hint { color: var(--ink-3); font-size: 14px; margin-bottom: 22px; }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
.field label {
  display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px;
}
.field label .req { color: var(--accent); }
.field-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.field-label-row label { margin-bottom: 0; }
.btn.btn-sm {
  min-height: 36px; padding: 0 14px; font-size: 12px; letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%; background: var(--bg); border: var(--bw) solid var(--border);
  border-radius: var(--radius); color: var(--ink); font-family: var(--font-mono);
  font-size: 15px; padding: 13px 14px; min-height: 48px;
  transition: border-color 150ms ease;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder, .restore-row input::placeholder {
  color: var(--ink-3); opacity: 1;
}
.field .help { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
fieldset.obs { border: var(--bw) solid var(--border); border-radius: var(--radius); padding: 18px; }
fieldset.obs legend {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2); padding: 0 8px;
}
fieldset.obs .obs-note { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; }
.shots { margin-top: 14px; }
.shots-btn { display: inline-flex; }
.shots-hint { color: var(--ink-3); font-size: 13px; margin: 10px 0 0; }
.shots-status { display: block; color: var(--ink-2); font-size: 13px; margin-top: 8px; min-height: 1em; }
.hint-inline { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-size: 0.85em; }
/* Scan-mode switch (progressive disclosure): show ONE input path at a time. */
.scan-modes { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.scan-mode {
  flex: 1 1 30%; min-height: 46px; padding: 0 12px;
  background: var(--bg); color: var(--ink-2);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.scan-mode:hover, .scan-mode:focus-visible { color: var(--ink); border-color: var(--ink-3); }
.scan-mode.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.scan-panel { margin-bottom: 4px; }
.scan-panel[hidden] { display: none; }
#panel-shots .shots-btn { width: 100%; justify-content: center; }
.micro { color: var(--ink-3); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.flag-quote {
  margin: 8px 0 0; padding: 8px 12px; font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-2); background: rgba(127,127,127,0.10);
  border-radius: 4px; word-break: break-word;
}
.check { display: flex; gap: 12px; align-items: center; padding: 11px 4px; cursor: pointer; min-height: 48px; }
.check input { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); cursor: pointer; flex: none; margin-top: 2px; }
.check span { font-size: 15px; color: var(--ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: var(--bw) solid var(--accent);
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-head);
  font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--bg); color: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
/* Share-result confirmation toast (js/main.js showToast) — bottom-center, on-brand. */
.cb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 300; max-width: min(92vw, 420px);
  background: var(--panel); border: var(--bw) solid var(--accent); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 1.4;
  padding: 12px 18px; box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease;
}
.cb-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .cb-toast { transition: opacity 0.18s ease; } }
.quota { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.error-msg { color: var(--critical); font-family: var(--font-head); font-size: 14px; line-height: 1.5; margin-top: 12px; display: none; }

/* ---------- sample scan (quota-safe demo) ---------- */
.sample-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.btn.sample-cta { min-height: 46px; padding: 0 18px; font-size: 14px; }
.sample-row-note { font-family: var(--font-head); font-size: 13px; color: var(--ink-3); line-height: 1.5; flex: 1 1 220px; }
.sample-banner {
  display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; padding: 18px 20px;
  background: var(--panel); border: var(--bw) solid var(--border);
  border-radius: var(--radius);
}
/* The class rule above sets display:flex, which would otherwise beat the UA [hidden]{display:none}
   rule and keep the Sample banner visible on real scans (js/main.js sets sb.hidden = true in
   render()). This makes the hidden attribute win, so the banner shows ONLY for renderSample(). */
.sample-banner[hidden] { display: none !important; }
.sample-banner-main { display: flex; align-items: flex-start; gap: 12px; }
.sample-badge {
  flex: none; font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent); padding: 5px 10px; border-radius: var(--radius);
}
.sample-banner-text { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.btn.sample-nudge { align-self: flex-start; }
@media (min-width: 768px) {
  .sample-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .btn.sample-nudge { flex: none; }
}
/* Sample-only closing CTA (2026-08-17): the bridge from "I watched the demo" to "I'll scan mine".
   Accent-outlined card at the END of the demo result so the next step is unmissable and frictionless
   (its button scrolls to + focuses the real scanner). The [hidden] override beats display:flex so it
   never shows on a real scan (js/main.js toggles .hidden in render/renderSample). */
.sample-footer {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  margin: 30px 0 6px; padding: 32px 24px;
  background: var(--panel); border: var(--bw) solid var(--accent);
  border-radius: var(--radius);
}
.sample-footer[hidden] { display: none !important; }
.sample-footer-eyebrow {
  margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.sample-footer-head { margin: 0; font-size: clamp(20px, 3.4vw, 26px); line-height: 1.2; }
.sample-footer-sub { margin: 0 auto; max-width: 48ch; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.btn.sample-footer-btn { margin-top: 8px; min-height: 54px; padding: 0 34px; }
@media (max-width: 520px) {
  .sample-footer { padding: 26px 18px; }
  .btn.sample-footer-btn { width: 100%; }
}

/* ---------- report ---------- */
#report { display: none; margin-top: 28px; }
.report-head {
  display: grid; gap: 28px; grid-template-columns: 1fr;
  border: var(--bw) solid var(--border); background: var(--panel-2); padding: 28px;
}
@media (min-width: 768px) { .report-head { grid-template-columns: auto 1fr; align-items: center; } }
.score-block { text-align: left; }
.score-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(72px, 12vw, 120px); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em;
}
.score-den { font-size: 0.35em; color: var(--ink-3); font-weight: 400; }
.verdict {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  border: var(--bw) solid currentColor; padding: 8px 14px; border-radius: var(--radius);
}
.verdict svg { flex: none; }
.b-low { color: var(--good); } .b-caution { color: var(--warn); }
.b-high { color: var(--serious); } .b-scam { color: var(--critical); }
.meter { margin-top: 6px; }
.meter-track {
  position: relative; height: 14px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); display: flex; overflow: visible; background: var(--bg);
}
.meter-seg { height: 100%; opacity: 0.28; }
.meter-seg.on { opacity: 1; }
/* Widths are the raw band edges (40/60/80) on the 0-100 score, so the zones line up with the
   raw score and pin. The pin maxes out near the top of the LOW zone (a spotless listing). */
.seg-scam { width: 40%; background: var(--critical); }
.seg-high { width: 20%; background: var(--serious); }
.seg-caution { width: 20%; background: var(--warn); }
.seg-low { width: 20%; background: var(--good); }
.meter-pin {
  position: absolute; top: -12px; width: 2px; height: 34px; background: var(--ink);
  transform: translateX(-1px); transition: left 400ms ease-out;
}
.meter-labels {
  display: flex; justify-content: space-between; font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-3); margin-top: 10px; letter-spacing: 0.08em;
}
/* Temperature-gauge direction cue, shared by the scam meter and the deal gauge so the two read
   the same way: the endpoints are color-coded (danger red on the left, safe/good green on the
   right) and a plain-language "higher = ..." note removes any doubt about which way is better. */
.scale-dir {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px;
}
.scale-dir .sd-arrow { color: var(--ink-2); }
.meter-labels span:first-child { color: var(--critical); }
.meter-labels span:last-child { color: var(--good); }
.report-meta { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin-top: 16px; }
.flags { margin-top: 24px; display: grid; gap: 14px; }
.flag {
  border: var(--bw) solid var(--border); background: var(--panel);
  padding: 18px 20px; border-radius: var(--radius);
}
.flag h4 { font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Severity pill: a filled chip tinted in its own risk color (currentColor set by the f-* rules),
   so MINOR/MAJOR/CRITICAL read at a glance without leaving the locked risk scale. */
.flag .sev {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid currentColor; border-radius: var(--radius);
  background: color-mix(in srgb, currentColor 13%, transparent);
}
.flag p { color: var(--ink-2); font-size: 15px; margin-top: 8px; }
.f-critical .sev { color: var(--critical); }
.f-major .sev { color: var(--serious); }
.f-moderate .sev { color: var(--warn); }
.f-minor .sev { color: var(--ink-2); }
.f-info .sev { color: var(--accent); }

/* ---------- deal score (Unlimited-tier, js/deal-engine.js — separate from the scam
   report above) ---------- */
.deal-card {
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 20px; margin-top: 24px;
}
.deal-hold { border-color: var(--critical); }
.deal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.deal-title {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
/* "Live market data" reads as a genuine live feed: good-green text with a pulsing red
   recording dot. The dot's meaning is "live/recording", not risk, so it sits apart from the
   risk-locked severity colors. Token-driven, so it retunes per palette; motion is disabled
   under prefers-reduced-motion. */
.deal-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--good) 45%, var(--border));
  color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent);
  padding: 3px 9px 3px 8px; border-radius: var(--radius);
}
.deal-tag::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--critical);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 60%, transparent);
  animation: cb-rec-pulse 1.8s ease-out infinite;
}
@keyframes cb-rec-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 55%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--critical) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--critical) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .deal-tag::before { animation: none; } }
.deal-score-row { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.deal-score-num { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--ink); }
/* Deal-band color (updated 2026-08-06, Matt's direct instruction): now a genuine red-to-green
   scale reusing the scam-risk axis's own vocabulary, not a separate blue-to-violet family —
   see the --deal-* variable definitions in :root for the full reasoning. Every band now gets
   a color, including the middle one, which previously stayed neutral gray on purpose. */
.deal-band {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border: var(--bw) solid currentColor; padding: 4px 10px; border-radius: var(--radius);
}
.db-great, .db-reasonable { color: var(--deal-great); }
.db-good { color: var(--deal-good); }
.db-typical, .db-wear { color: var(--deal-typical); }
.db-above, .db-highmiles, .db-toocheap { color: var(--deal-caution); }
.db-over, .db-concern { color: var(--deal-poor); }

/* Deal temperature gauge (js/main.js dealGauge) — same anatomy as the scam meter so the two
   scores feel like one instrument: a segmented OVERPRICED->GREAT DEAL track, the score's band
   lit, and a needle at the exact score colored to its band (db-* sets currentColor). */
.deal-gauge { margin-top: 18px; }
.deal-meter-track {
  position: relative; height: 14px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); overflow: visible; background: var(--bg);
}
/* Inner fill holds the colored zones and clips them to the track's rounded corners, so the bar is
   flush + symmetric at both ends. The pin is a sibling of this fill, so it still overflows the track. */
.deal-meter-fill {
  position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: var(--radius);
}
.deal-meter-seg { height: 100%; opacity: 0.26; }
.deal-meter-seg.on { opacity: 1; }
.dg-over { background: var(--deal-poor); }
.dg-above { background: var(--deal-caution); }
.dg-typical { background: var(--deal-typical); }
.dg-good { background: var(--deal-good); }
.dg-great { background: var(--deal-great); }
.deal-meter-pin {
  position: absolute; top: -11px; width: 2px; height: 32px; background: currentColor;
  transform: translateX(-1px); border-radius: 1px;
}
.deal-basis { color: var(--ink-2); font-size: 14px; margin-top: 10px; }
/* Breathing room between the "Compare this asking price…" basis line and the Get the Deal Score
   button that follows it (Matt flagged the pair as crowded). */
.deal-basis + .btn { margin-top: 18px; }
.deal-list { margin-top: 16px; }
.deal-list h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.deal-list ul { list-style: none; display: grid; gap: 6px; }
.deal-list li { color: var(--ink-2); font-size: 14px; padding-left: 14px; position: relative; }
.deal-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--ink-3); }
.deal-note {
  font-family: var(--font-mono); font-size: 13px; color: var(--warn); margin-top: 14px;
  border-left: 2px solid var(--warn); padding-left: 10px;
}
.deal-note-info { color: var(--ink-2); border-left-color: var(--border); }
.deal-empty { color: var(--ink-3); font-size: 14px; font-family: var(--font-mono); margin-top: 10px; }
.deal-teaser {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-top: 12px;
}
.deal-teaser p { color: var(--ink-2); font-size: 14px; margin: 0; flex: 1; min-width: 200px; }
.deal-teaser .btn { flex: none; }

/* ---------- recall check (NHTSA, universal add-on, js/main.js renderRecalls) ---------- */
.recalls-card {
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 20px; margin-top: 24px;
}
.recalls-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.recalls-title {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
/* "NHTSA · free" carries the one accent to read as an available, free data source (an indicator,
   not a risk color), lifting it off the flat gray it used to be. */
.recalls-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 8px; border-radius: var(--radius);
}
.recalls-intro { color: var(--ink-2); font-size: 14px; margin-top: 12px; }
.recalls-loading { color: var(--ink-3); font-family: var(--font-mono); font-size: 14px; margin-top: 12px; }
.recall-clean {
  border: var(--bw) solid var(--good); color: var(--good); padding: 16px 18px; margin-top: 14px;
  font-family: var(--font-mono); font-size: 14px; border-radius: var(--radius);
}
.recall-item {
  border: var(--bw) solid var(--serious); background: var(--panel-2);
  padding: 16px 18px; border-radius: var(--radius); margin-top: 14px;
}
.recall-comp { font-size: 16px; text-transform: uppercase; color: var(--ink); }
.recall-danger {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--critical); border: 1px solid var(--critical); border-radius: var(--radius);
  padding: 6px 10px; margin-top: 10px;
}
.recall-line { color: var(--ink-2); font-size: 14px; margin-top: 8px; }
.recall-line b { color: var(--ink); }
.recall-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.recall-ask { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.recall-ask-q { color: var(--ink); font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.recall-copy { min-height: 40px; padding: 0 16px; }
.recall-verify { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; margin-top: 16px; }
.recall-verify a, .recall-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.recall-link { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 14px; }
.recall-vin-form { margin-top: 14px; }
.recall-vin-row { display: flex; gap: 10px; flex-wrap: wrap; }
.recall-vin-input {
  flex: 1 1 220px; min-height: 48px; padding: 0 14px; background: var(--bg);
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.recall-vin-input:focus { outline: none; border-color: var(--accent); }
.recall-vin-row .btn { flex: none; min-height: 48px; }
.recall-vin-msg { color: var(--warn); font-family: var(--font-mono); font-size: 13px; margin-top: 10px; }
.recall-again { margin-top: 12px; }

/* ---------- Buyer's Caution (js/buy-quality.js) --------------------------------------
   A SEPARATE axis from the scam trust score, so it deliberately does NOT borrow the risk
   color language (green/amber/orange/red mean scam-risk and only scam-risk - the Risk-Color
   Lock in DESIGN.md). This card reads as an instrument note: neutral panel surface, mono
   labels, and the single signal-lime accent used only as the section indicator. Severity is
   carried by the MAJOR/MODERATE/MINOR mono tag and border weight, never a rival risk hue. */
.bq-card {
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 20px; margin-top: 24px;
}
.bq-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bq-title {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2);
}
.bq-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 3px 8px; border-radius: var(--radius);
}
.bq-body { margin-top: 14px; }
.bq-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px;
}
/* Level intensity via neutral border weight; the highest level gets a small lime indicator
   dot (the instrument's one accent), never a one-sided colored bar or a risk hue. */
.bq-chip.bq-high { border-color: var(--ink-3); }
.bq-chip.bq-high::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.bq-chip.bq-moderate { border-color: color-mix(in srgb, var(--ink-3) 60%, var(--border)); }
.bq-chip.bq-low, .bq-chip.bq-none { color: var(--ink-2); }
.bq-intro { color: var(--ink-3); font-size: 13px; line-height: 1.55; margin-top: 12px; max-width: 62ch; }
.bq-clean { color: var(--ink-2); font-size: 14px; margin-top: 12px; }
.bq-flags { margin-top: 16px; display: grid; gap: 12px; }
.bq-flag {
  border: var(--bw) solid var(--border); background: var(--panel-2);
  padding: 14px 16px; border-radius: var(--radius);
}
.bq-flag.bq-f-major { border-color: color-mix(in srgb, var(--ink-3) 55%, var(--border)); }
.bq-flag-h { font-size: 15px; color: var(--ink); line-height: 1.35; }
.bq-sev {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--ink-3);
}
.bq-f-major .bq-sev { color: var(--ink); border-color: var(--ink-3); }
.bq-f-moderate .bq-sev { color: var(--ink-2); }
.bq-flag-p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: 8px; }
.bq-cta { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin-top: 16px; }
.bq-complaints { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.bq-complaints-h {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
.bq-comp-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bq-comp-list li {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  border: 1px solid var(--border); background: var(--bg); border-radius: var(--radius); padding: 4px 10px;
}
.bq-comp-sev { color: var(--ink); font-size: 14px; margin-top: 12px; }
.bq-comp-note { color: var(--ink-3); font-size: 12px; line-height: 1.5; margin-top: 10px; }

/* ---------- scam-trend feed (js/scam-trends.js, data in scam-trends.json) ---------- */
.trends-stamp { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin: -16px 0 24px; }
.trend-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { #scam-trends-home .trend-grid { grid-template-columns: repeat(3, 1fr); } }
.trend {
  border: var(--bw) solid var(--border); background: var(--panel);
  padding: 22px; border-radius: var(--radius);
}
.trend-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.trend-cat {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--border); padding: 3px 8px; border-radius: var(--radius);
}
.trend-sev {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 3px 8px; border-radius: var(--radius);
}
.trend-sev.sev-high { color: var(--critical); }
.trend-sev.sev-medium { color: var(--warn); }
.trend-sev.sev-low { color: var(--ink-2); }
.trend-title { font-size: 18px; text-transform: uppercase; margin-bottom: 12px; line-height: 1.3; }
.trend-tactic, .trend-avoid { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.trend-tactic b, .trend-avoid b { color: var(--ink); }
.trend-avoid b { color: var(--accent); }
.trend-plat { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 14px; }
.trend-empty { color: var(--ink-3); font-family: var(--font-mono); font-size: 14px; }
.trends-more { margin-top: 26px; }
/* Standalone page shows one column of full-width cards for readability. */
#scam-trends-all .trend-grid { max-width: 760px; }

/* ---------- article / guide pages ---------- */
.article-wrap { max-width: 760px; }
.breadcrumb { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink-2); }
.src-list a[target="_blank"]::after { content: " \2197"; font-size: 0.85em; }
.article-wrap h1 { font-size: clamp(30px, 5.5vw, 48px); margin-bottom: 10px; }
.byline { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.article-wrap .lead { color: var(--ink-2); font-size: 17px; margin-bottom: 28px; }
.guide-hero {
  border: var(--bw) solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); margin: 0 0 32px;
}
.guide-hero img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  filter: grayscale(0.5) brightness(0.48) contrast(1.25) saturate(1.05);
}

/* "Annotated listing" mockup — a real product artifact (what CarBluff actually flags)
   in place of generic dark-filtered stock photography. POC on one guide page this round;
   see dev/changes_2026-08-01-round4.md for rollout status on the other 3 guides. */
.evidence-mock {
  border: var(--bw) solid var(--border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft); margin: 0 0 32px;
  aspect-ratio: 16 / 9; background: var(--panel); padding: 28px; display: flex; align-items: center;
}
.ev-listing { font-family: var(--font-mono); font-size: 14px; line-height: 1.9; width: 100%; }
.ev-line { color: var(--ink-2); }
.ev-price { color: var(--ink); font-size: 20px; font-weight: 700; }
.ev-flagged {
  color: var(--ink); background: rgba(248, 113, 113, 0.08); padding: 6px 10px;
  border-left: 2px solid var(--critical); display: block; margin-top: 6px;
}
.ev-flag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 10px; }
.ev-flag.critical { color: var(--critical); }
@media (max-width: 640px) {
  .evidence-mock { aspect-ratio: auto; padding: 20px; }
  .ev-listing { font-size: 13px; line-height: 1.7; }
}
.article-wrap h2 { font-size: 22px; text-transform: uppercase; margin: 36px 0 12px; }
.article-wrap p { color: var(--ink-2); font-size: 16px; margin-bottom: 14px; }
.article-wrap a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cta-band {
  border: var(--bw) solid var(--accent); border-radius: var(--radius); background: var(--panel);
  padding: 20px; margin: 30px 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.cta-band p { flex: 1; min-width: 220px; margin: 0; color: var(--ink); }
.article-wrap a.btn { color: var(--accent-ink); text-decoration: none; }
.article-wrap a.btn:hover, .article-wrap a.btn:focus-visible { color: var(--accent); }
.article-wrap a.btn.ghost { color: var(--ink); }
.article-wrap a.btn.ghost:hover, .article-wrap a.btn.ghost:focus-visible { color: var(--accent); }
.steps-ol { margin: 0 0 14px 22px; color: var(--ink-2); display: grid; gap: 8px; font-size: 16px; }
.src-list { list-style: none; display: grid; gap: 8px; margin-bottom: 20px; }
.src-list li { color: var(--ink-2); font-size: 15px; }

/* ---------- your buying companion (toolkit) ---------- */
.locked h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 14px; }
.locked-list { list-style: none; display: grid; gap: 10px; margin-bottom: 8px; }
.locked-list li { color: var(--ink-2); font-size: 15px; }
.tk-section { margin-top: 40px; }
.tk-section:first-child { margin-top: 0; }
.tk-title { font-size: 20px; margin-bottom: 4px; }

/* step-by-step journey: a friendly numbered accordion, not an interrogation checklist */
.journey-stage {
  border: var(--bw) solid var(--border); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 12px; overflow: hidden;
}
.journey-stage[open] { border-color: var(--accent); }
.journey-stage summary {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  cursor: pointer; list-style: none; font-weight: 700; font-size: 17px;
}
.journey-stage summary::-webkit-details-marker { display: none; }
.journey-stage summary::after {
  content: "+"; margin-left: auto; color: var(--accent); font-family: var(--font-mono); font-size: 20px;
}
.journey-stage[open] summary::after { content: "–"; }
.js-num {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius); background: var(--accent);
  color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.journey-inner { padding: 4px 18px 22px 62px; }
.journey-blurb { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.journey-steps { list-style: none; display: grid; gap: 16px; }
.journey-steps li { position: relative; padding-left: 22px; }
.journey-steps li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--accent);
}
.journey-steps b { display: block; font-size: 15px; margin-bottom: 3px; }
.journey-steps p { color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.journey-steps a { color: var(--accent); font-size: 13px; font-family: var(--font-mono); text-decoration: none; display: inline-block; margin-top: 4px; }
.journey-steps a:hover { text-decoration: underline; }
.journey-msg-head {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin: 24px 0 12px;
}
.msg-card {
  border: var(--bw) solid var(--border); background: var(--panel-2); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px;
}
.msg-card b { display: block; font-size: 15px; margin-bottom: 6px; }
.msg-why { color: var(--ink-3); font-size: 13px; font-style: italic; line-height: 1.5; margin-bottom: 10px; }
.msg-body {
  color: var(--ink); font-size: 14px; line-height: 1.6; background: var(--bg);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; white-space: pre-line;
}
.msg-copy { min-height: 44px; padding: 0 16px; font-size: 13px; }

/* glossary: quiet, scannable definition list */
.gloss-item { border-bottom: 1px solid var(--border); padding: 2px 0; }
.gloss-item:last-child { border-bottom: none; }
.gloss-item summary {
  cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.gloss-item summary::-webkit-details-marker { display: none; }
.gloss-item summary::after { content: "+"; color: var(--accent); font-family: var(--font-mono); flex: none; }
.gloss-item[open] summary::after { content: "–"; }
.gloss-item p { color: var(--ink-2); font-size: 14px; line-height: 1.6; padding: 0 16px 14px; }
.hist-item {
  display: flex; align-items: center; gap: 14px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.hist-score { font-family: var(--font-mono); font-weight: 700; font-size: 20px; min-width: 3ch; }
.hist-meta { flex: 1; min-width: 160px; }
.hist-meta .hist-band { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; display: block; }
.hist-meta .hist-when { color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.hist-item .btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
.hist-empty { color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; padding: 8px 0 16px; }
/* shown only when printing the walkthrough */
.print-only { display: none; }

@media print {
  /* Redesign the walkthrough + glossary as a clean paper document: white page, black ink,
     real margins, everything expanded, no screen chrome, no accordion markers, and no stage
     or term split across a page break. Triggered by body.print-kit (the Print button). */
  @page { margin: 16mm 14mm; }

  /* Hide the whole site, then keep only the two printable Toolkit sections + the paper header. */
  body.print-kit header, body.print-kit footer, body.print-kit .hero, body.print-kit #scan,
  body.print-kit #how, body.print-kit #deal-score, body.print-kit #pricing, body.print-kit #faq,
  body.print-kit .ad-slot, body.print-kit .modal, body.print-kit .toast,
  body.print-kit #toolkit > .wrap > h2, body.print-kit #toolkit > .wrap > .lead,
  body.print-kit #tk-locked, body.print-kit .tk-section:not(.printable),
  body.print-kit #journey-print, body.print-kit .actions, body.print-kit .msg-copy {
    display: none !important;
  }

  body.print-kit, body.print-kit * { color: #000 !important; background: #fff !important; box-shadow: none !important; }
  body.print-kit .print-head { display: block; padding: 0 0 10px; margin: 0 0 16px; border-bottom: 1.5pt solid #000; }
  body.print-kit .print-mark { display: flex; align-items: center; gap: 8px; }
  body.print-kit .print-mark svg { width: 24px; height: 24px; }
  body.print-kit .print-mark b { font-family: var(--font-head); font-size: 19pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #000 !important; }
  body.print-kit .print-mark b span { color: var(--accent) !important; }
  body.print-kit .print-sub { display: block; font-family: var(--font-head); font-size: 11pt; color: #333 !important; margin-top: 6px; }
  body.print-kit .tk-section { margin: 0 0 6px; }
  body.print-kit .tk-title { font-size: 15pt; margin: 18px 0 2px; page-break-after: avoid; }
  body.print-kit .hint { font-size: 9.5pt; color: #555 !important; margin-bottom: 8px; }

  /* Expand + de-box every accordion; drop the +/- markers on paper. */
  body.print-kit details { display: block !important; border: none !important; border-radius: 0 !important; margin: 0; }
  body.print-kit summary { padding: 0 !important; }
  body.print-kit summary::after, body.print-kit summary::marker,
  body.print-kit summary::-webkit-details-marker { content: "" !important; display: none !important; }

  /* Journey stages */
  body.print-kit .journey-stage { page-break-inside: avoid; margin-bottom: 12px; border-bottom: 0.75pt solid #ccc !important; padding-bottom: 8px; }
  body.print-kit .journey-stage summary { font-size: 13pt; font-weight: 700; gap: 8px; padding: 2px 0 !important; }
  body.print-kit .js-num { border: 1pt solid #000 !important; width: 20px; height: 20px; font-size: 10pt; }
  body.print-kit .journey-inner { padding: 4px 0 6px 28px; }
  body.print-kit .journey-steps li::before { border-color: #000 !important; }
  body.print-kit .journey-steps a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; }
  body.print-kit .msg-card { border: 0.75pt solid #bbb !important; page-break-inside: avoid; padding: 8px 10px; }

  /* Glossary as a clean definition list */
  body.print-kit .gloss-item { page-break-inside: avoid; border-bottom: 0.75pt solid #ccc !important; padding: 3px 0; }
  body.print-kit .gloss-item summary { font-size: 12pt; font-weight: 700; padding: 3px 0 !important; }
  body.print-kit .gloss-item p { padding: 0 0 6px !important; font-size: 10.5pt; }
}

/* ---------- ads (hidden until an ad client is configured; never shown to subscribers) ---------- */
.ad-slot { display: none; }
.ad-slot.on {
  display: block; margin-top: 32px; border: var(--bw) solid var(--border);
  border-radius: var(--radius); padding: 14px; min-height: 110px; background: var(--panel);
}
.ad-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.ad-slot .ad-tag { display: block; margin-bottom: 8px; }
.clean {
  border: var(--bw) solid var(--good); color: var(--good); padding: 18px 20px;
  font-family: var(--font-mono); font-size: 14px; border-radius: var(--radius);
}
.kit { margin-top: 28px; }
.kit h3 { text-transform: uppercase; font-size: 18px; margin-bottom: 12px; }
.kit ul { list-style: none; display: grid; gap: 10px; }
.kit li {
  border: var(--bw) solid var(--border); padding: 14px 16px; border-radius: var(--radius);
  font-size: 15px; color: var(--ink-2);
}
.kit a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Save-to-Garage control on the result screen (2026-08-13) */
.result-garage { margin-top: 26px; }
.r-garage-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.r-garage-save:disabled { opacity: 0.75; cursor: default; }
.r-garage-open { color: var(--accent); font-family: var(--font-mono); font-size: 13px; text-decoration: none; }
.r-garage-open:hover { text-decoration: underline; }
.r-garage-msg { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin-top: 10px; min-height: 1em; }

.disclaimer { color: var(--ink-3); font-size: 13px; margin-top: 22px; font-family: var(--font-mono); }

/* ---------- info sections ---------- */
section.block { padding: 64px 0; border-bottom: var(--bw) solid var(--border); }
section.block .lead { color: var(--ink-2); max-width: 60ch; margin: 10px 0 34px; }
section.block .lead a, .panel .hint a, footer a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
section.block .lead a:hover, footer a:hover { color: var(--ink); }
.steps { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border: var(--bw) solid var(--border); background: var(--panel); padding: 24px; border-radius: var(--radius); }
.step-count {
  font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.step-count b { color: var(--accent); font-size: 22px; letter-spacing: -0.02em; margin-right: 4px; }
.step h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15px; }

/* "How it works" — one inspection line-item sheet, not three feature cards (#how only; .steps/.step above stays a card grid for guides.html's 4-item picker) */
.checklist { padding: 0; }
.checklist-row {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  padding: 24px 28px; border-bottom: 1px solid var(--border);
}
.checklist-row:last-child { border-bottom: none; }
.checklist-count {
  font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: var(--accent);
  letter-spacing: -0.02em; line-height: 1;
}
.checklist-row h3 { font-size: 18px; text-transform: uppercase; margin-bottom: 6px; }
.checklist-row p { color: var(--ink-2); font-size: 15px; }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  border: var(--bw) solid var(--border); background: var(--panel); padding: 28px;
  border-radius: var(--radius); display: flex; flex-direction: column;
  transition: border-color 150ms ease;
}
.plan:hover { border-color: var(--ink-3); }
.plan.featured:hover { border-color: var(--accent); }
.plan.featured { border-color: var(--accent); }
#pricing-plans[hidden], #current-plan-panel[hidden] { display: none; }
.plan.active { border-color: var(--good); }
.plan .tag {
  display: inline-flex; align-items: center; margin: 10px 0 -6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; border: var(--bw) solid currentColor;
  padding: 4px 10px; border-radius: var(--radius);
}
.plan .tag.rec { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.plan .tag.active { color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.plan h3 { font-size: 15px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
/* Deal Score "coming soon" teaser (homepage #deal-score) */
.dealsoon .kicker { color: var(--accent); }
/* Status pill for genuinely-upcoming features (replaces the // eyebrow kicker). */
.soon-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--good) 45%, var(--border)); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--good);
}
.soon-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--good); flex: none;
}
.plan.featured { box-shadow: var(--shadow-soft); }
.dealsoon-list { list-style: none; margin: 22px 0 20px; max-width: 62ch; }
.dealsoon-list li { border-top: var(--bw) solid var(--border); padding: 14px 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.dealsoon-list li:first-child { border-top: none; }
.ds-k { display: block; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.dealsoon-foot { color: var(--ink-3); font-size: 14px; }
.dealsoon-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
/* results deal-card coming-soon CTA line */
.deal-soon-cta { color: var(--ink-3); font-size: 13px; margin-top: 8px; }

.price { font-size: 44px; font-weight: 700; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
.price small { font-size: 16px; color: var(--ink-3); font-weight: 400; }
.plan ul { list-style: none; margin: 18px 0 24px; flex: 1; }
.plan li { color: var(--ink-2); font-size: 15px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.plan .btn { width: 100%; }

/* ---------- FAQ / footer ---------- */
details { border: var(--bw) solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: var(--panel); }
details summary {
  cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 16px; list-style: none;
}
details summary::after { content: "+"; float: right; color: var(--accent); font-family: var(--font-mono); }
details[open] summary::after { content: "–"; }
#faq details div { padding: 0 20px 18px; color: var(--ink-2); font-size: 15px; }
.adv { margin-top: 18px; }
.adv .inner { padding: 18px; display: grid; gap: 18px; }
.fallback-note { color: var(--warn); font-size: 14px; line-height: 1.5; margin: 0 0 12px; font-family: var(--font-head); }
.fallback-note[hidden] { display: none; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
footer { padding: 40px 0 60px; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
footer a { color: var(--ink-2); display: inline-block; padding: 12px 0; }

/* ---------- paywall modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4, 6, 9, 0.72); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: var(--bw) solid var(--accent); border-radius: var(--radius);
  max-width: 520px; width: 100%; padding: 32px; position: relative;
}
.modal h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 8px; }
.modal p { color: var(--ink-2); margin-bottom: 20px; }
.modal .close {
  position: absolute; top: 10px; right: 10px; background: none; border: none;
  color: var(--ink-2); font-size: 26px; cursor: pointer; width: 44px; height: 44px;
}
.modal .close:hover { color: var(--accent); }
.modal .actions { margin-top: 0; }
.restore { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.restore-label { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.restore-row { display: flex; gap: 10px; flex-wrap: wrap; }
.restore-row input {
  flex: 1; min-width: 200px; background: var(--bg); border: var(--bw) solid var(--border);
  border-radius: var(--radius); color: var(--ink); font-family: var(--font-mono);
  font-size: 15px; padding: 12px 14px; min-height: 48px;
}
.restore-row input:focus { outline: none; border-color: var(--accent); }
.restore-msg { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin-top: 10px; min-height: 1.2em; }
.linklike {
  background: none; border: none; color: var(--ink-2); font-family: var(--font-mono);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; min-height: 44px;
}
.linklike:hover, .linklike:focus-visible { color: var(--accent); }
.linklike.danger { color: var(--ink-3); text-decoration-color: color-mix(in srgb, var(--critical) 45%, transparent); }
.linklike.danger:hover, .linklike.danger:focus-visible { color: var(--critical); }

/* ============================================================
   THEME ENGINE (2026-08-10) — live color + font switching, gated
   to the Unlimited plan (js/theme.js). Color palette and font pairing
   are chosen INDEPENDENTLY: data-color and data-font on <html>.

   --accent-glow tokenizes the drop-shadow tint (was a baked-in
   rgba(215,255,62,.14) lime). Severity tokens (--good/--warn/--serious/
   --critical) are re-tuned per palette so red always means danger and
   every band stays legible on that palette's background (dark vs light).
   Signal / Assurance / Vault come straight from the approved
   theme-mockups-2026-08-10 render sources.
   ============================================================ */

/* Inline SVG accents (header logo, report/lock icons, article art) baked in
   the lime hex — retarget them to --accent so they follow the active palette.
   Attribute selectors outrank the SVG presentation attribute, no !important. */
[stroke="#d7ff3e"] { stroke: var(--accent); }
[fill="#d7ff3e"] { fill: var(--accent); }

/* ---------- color palettes ---------- */
/* default = base :root (Signal Lime). */
:root[data-color="signal"] {
  --bg: #0a0e17; --panel: #111826; --panel-2: #16202f; --border: #28344a;
  --ink: #eaf0f7; --ink-2: #9aa8bf; --ink-3: #7c8ba6;
  --accent: #35c8f0; --accent-ink: #04141c; --accent-glow: rgba(53, 200, 240, 0.14);
  --good: #43d07f; --good-lt: #8ee6a5; --warn: #f2c14e; --serious: #f4915a; --critical: #f26d6d;
}
:root[data-color="vault"] {
  --bg: #0e0f12; --panel: #16181d; --panel-2: #1b1e24; --border: #2a2e37;
  --ink: #f0eee9; --ink-2: #a7a39b; --ink-3: #7a766e;
  --accent: #d8c7a0; --accent-ink: #17140d; --accent-glow: rgba(216, 199, 160, 0.14);
  --good: #7fb98a; --good-lt: #a6cfa9; --warn: #d9b25e; --serious: #d68a5a; --critical: #d9695f;
}
/* Assurance is the one LIGHT palette; severity shades are darkened for a light bg. */
:root[data-color="assurance"] {
  --bg: #f5f6f2; --panel: #ffffff; --panel-2: #fbfcf9; --border: #dfe3da;
  --ink: #1a231d; --ink-2: #4d5a51; --ink-3: #69756c;
  --accent: #1f5c41; --accent-ink: #ffffff; --accent-glow: rgba(31, 92, 65, 0.16);
  --good: #2e7d52; --good-lt: #2f7d52; --warn: #b3801f; --serious: #c2632a; --critical: #b23a2e;
}
/* Three more LIGHT palettes (2026-08-11) so light mode isn't a single option. Same full
   light treatment as Assurance: light bg/panels, dark ink, darkened severity shades, and a
   mid-dark saturated accent that stays WCAG-legible both as text on the light bg and behind
   white --accent-ink on filled CTAs. */
:root[data-color="paper"] {
  --bg: #f6f4ee; --panel: #ffffff; --panel-2: #fbf9f3; --border: #e5e0d5;
  --ink: #1a1712; --ink-2: #59544a; --ink-3: #7a746a;
  --accent: #c2410c; --accent-ink: #ffffff; --accent-glow: rgba(194, 65, 12, 0.16);
  --good: #2e7d52; --good-lt: #2f7d52; --warn: #a06a12; --serious: #c2632a; --critical: #b23a2e;
}
:root[data-color="daylight"] {
  --bg: #f3f5f8; --panel: #ffffff; --panel-2: #fafbfd; --border: #dde3ea;
  --ink: #0f1520; --ink-2: #4a5568; --ink-3: #6b7688;
  --accent: #1d4ed8; --accent-ink: #ffffff; --accent-glow: rgba(29, 78, 216, 0.16);
  --good: #2e7d52; --good-lt: #2f7d52; --warn: #a06a12; --serious: #c2632a; --critical: #b23a2e;
}
:root[data-color="rose"] {
  --bg: #f6f3f4; --panel: #ffffff; --panel-2: #fbf8f9; --border: #e7dfe1;
  --ink: #1a1417; --ink-2: #5a4f54; --ink-3: #786d72;
  --accent: #be123c; --accent-ink: #ffffff; --accent-glow: rgba(190, 18, 60, 0.16);
  --good: #2e7d52; --good-lt: #2f7d52; --warn: #a06a12; --serious: #c2632a; --critical: #b23a2e;
}
/* Off-the-wall dark palettes: keep the base dark chassis + severity set (already
   tuned for this background) and only swap the accent, so red/amber/green stay
   put. Exception: Amber retunes warn/serious to keep them distinct from an amber
   accent. */
:root[data-color="blue"] {
  --accent: #4ea3ff; --accent-ink: #04101f; --accent-glow: rgba(78, 163, 255, 0.14);
}
:root[data-color="purple"] {
  --accent: #a98bff; --accent-ink: #160f2b; --accent-glow: rgba(169, 139, 255, 0.14);
}
:root[data-color="pink"] {
  --accent: #e879c9; --accent-ink: #2a0d22; --accent-glow: rgba(232, 121, 201, 0.14);
}
:root[data-color="orange"] {
  --accent: #f0a91e; --accent-ink: #241802; --accent-glow: rgba(240, 169, 30, 0.14);
  --warn: #facc15; --serious: #fb7a3c; --critical: #f75555;
}

/* ---------- font pairings (independent of color) ---------- */
/* schibsted = base :root (Schibsted Grotesk + Space Mono), the new free-tier default. */
:root[data-font="schibsted"] { --font-head: "Schibsted Grotesk", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; }
:root[data-font="hanken"]    { --font-head: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; }
:root[data-font="chakra"]    { --font-head: "Chakra Petch", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; }
:root[data-font="bricolage"] { --font-head: "Bricolage Grotesque", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; }
:root[data-font="syne"]      { --font-head: "Syne", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- switcher control ---------- */
.theme-switch { position: relative; display: inline-flex; margin-left: 22px; }
@media (max-width: 640px) { .theme-switch { margin-left: 0; } }
.theme-trigger {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  background: transparent; border: var(--bw) solid var(--border); border-radius: var(--radius);
  color: var(--ink-2); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: border-color 150ms ease, color 150ms ease;
}
.theme-trigger:hover, .theme-trigger:focus-visible { border-color: var(--accent); color: var(--accent); }
/* Log-in nav CTA: styled like the theme button (outlined pill) but in accent so it reads
   as the obvious "get into your account" action, not a plain text link. */
.nav a.link.nav-cta {
  border: var(--bw) solid var(--accent); border-radius: var(--radius);
  padding: 0 16px; min-height: 40px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav a.link.nav-cta:hover, .nav a.link.nav-cta:focus-visible { background: var(--accent); color: var(--bg); }
@media (max-width: 640px) { .nav a.link.nav-cta { margin-left: 0; } }
.theme-trigger svg { flex: none; }
.theme-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 288px;
  background: var(--panel); border: var(--bw) solid var(--accent); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-soft); display: none;
}
.theme-pop.open { display: block; }
/* Mobile: the trigger sits at the left edge, so a right-anchored pop overflows off-screen.
   Anchor it left and cap its width to the viewport so it always stays visible. */
@media (max-width: 640px) {
  .theme-pop { left: 0; right: auto; width: min(288px, calc(100vw - 40px)); }
}
.theme-pop .grp { margin-bottom: 20px; }
.theme-pop .grp:last-child { margin-bottom: 0; }
.theme-pop h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.swatch {
  position: relative; height: 34px; border-radius: var(--radius); border: var(--bw) solid var(--border);
  cursor: pointer; padding: 0; font-size: 0;
}
.swatch:hover { border-color: var(--ink-3); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.swatch[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 3px; border: 2px solid var(--bg); border-radius: 1px;
}
.font-opts { display: grid; gap: 8px; }
.font-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 9px 12px; background: var(--bg); border: var(--bw) solid var(--border);
  border-radius: var(--radius); cursor: pointer; color: var(--ink); width: 100%;
}
.font-opt:hover { border-color: var(--ink-3); }
.font-opt[aria-pressed="true"] { border-color: var(--accent); }
.font-opt b { font-size: 15px; font-weight: 700; line-height: 1.1; }
.font-opt small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
.theme-upsell { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
.theme-upsell a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.theme-upsell .u-lead { display: block; color: var(--ink); font-weight: 700; margin-bottom: 6px; }

/* ============================================================
   NAV DROPDOWN — "Learn" menu (2026-08-12 IA refresh, js/nav.js)
   Groups the guide/methodology/checklist pages under one header
   instead of a long flat nav row.
   ============================================================ */
.menu { position: relative; display: inline-flex; margin-left: 22px; }
.nav .menu-trigger {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-2); font-family: var(--font-mono);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
}
.nav .menu-trigger:hover, .nav .menu-trigger:focus-visible,
.menu.open .menu-trigger { color: var(--accent); }
.menu-caret { transition: transform 160ms ease; }
.menu.open .menu-caret { transform: rotate(180deg); }
.menu-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: 280px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.menu:hover .menu-pop, .menu:focus-within .menu-pop, .menu.open .menu-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.menu-item {
  display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none;
  transition: background-color 130ms ease;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--panel-2); }
.menu-item-t { display: block; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.menu-item-d { display: block; color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; margin-top: 2px; }
.menu-item:hover .menu-item-t, .menu-item:focus-visible .menu-item-t { color: var(--accent); }
@media (max-width: 640px) {
  .menu { margin-left: 0; }
  .menu-pop {
    position: static; width: 100%; box-shadow: none; margin: 4px 0 6px; padding: 4px;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .menu.open .menu-pop { display: block; }
}

/* ============================================================
   DEDICATED RESULT SCREEN — "The Verdict Sheet" (2026-08-12 redesign)
   A focused, calmer verdict view that takes over the page after a scan.
   Its own visual language (hairline borders + soft depth + one signal
   accent + tabular numerics), scoped under .cb-result so it never
   retunes the marketing page. All engine/deal/recall IDs are unchanged.
   ============================================================ */

/* --- view takeover: recede the marketing + form, promote the report --- */
body:not(.cb-result-open) #report { display: none !important; }
body.cb-result-open #report { display: block !important; }
body.cb-result-open header,
body.cb-result-open .hero,
body.cb-result-open #scan-form,
body.cb-result-open .analyzer .ad-slot,
body.cb-result-open main > section.block,
body.cb-result-open .cb-ph,
body.cb-result-open .cb-ph-badge,
body.cb-result-open footer { display: none !important; }
body.cb-result-open .analyzer { padding: 0; border-bottom: none; }
body.cb-result-open #report { margin-top: 0; }

.cb-result {
  --r-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.55);
  --r-track: var(--border);
  padding: 20px 0 64px;
}
.cb-result h2 { font-size: 22px; text-transform: none; letter-spacing: -0.01em; font-weight: 600; }

/* --- result bar: back / wordmark / share --- */
.result-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.result-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px 0 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink-2); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.03em;
  cursor: pointer; transition: border-color 140ms ease, color 140ms ease;
}
.result-back:hover, .result-back:focus-visible { border-color: var(--accent); color: var(--accent); }
.result-brand { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.result-brand b { font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }
.result-brand b span { color: var(--accent); }
@media (min-width: 760px) { .result-brand { display: inline-flex; } }
.result-bar-share { display: flex; align-items: center; gap: 8px; }
.rb-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; font-family: var(--font-head); font-weight: 600; font-size: 13px;
  letter-spacing: 0.01em; cursor: pointer; transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}
.rb-btn:hover, .rb-btn:focus-visible { background: transparent; color: var(--accent); }
.rb-btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--border); padding: 0 14px; }
.rb-btn.ghost:hover, .rb-btn.ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.result-sharemsg { display: block; text-align: right; min-height: 1.1em; margin: 2px 0 0; }

/* --- verdict hero: gauge (left) + meaning/meter (right) --- */
.result-hero {
  display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center;
  padding: 34px; margin-top: 16px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--r-shadow);
}
@media (min-width: 860px) { .result-hero { grid-template-columns: auto 1fr; gap: 44px; padding: 40px 44px; } }
.rh-gauge { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gauge {
  position: relative; width: 200px; height: 200px; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--score, 0) * 1%), var(--r-track) 0);
  display: grid; place-items: center;
}
.gauge::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--panel); }
.gauge-face { position: relative; z-index: 1; text-align: center; }
.cb-result .gauge .score-num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
.cb-result .gauge .score-den { font-size: 0.32em; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.gauge-cap {
  display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.cb-result .verdict { font-size: 13px; }
.rh-read { min-width: 0; }
.rh-summary {
  color: var(--ink); font-size: 19px; line-height: 1.5; margin: 0 0 24px;
  max-width: 56ch; letter-spacing: -0.005em;
}
@media (min-width: 860px) { .rh-summary { font-size: 20px; } }
.cb-result .meter { margin-top: 0; }
.cb-result .report-meta { margin-top: 18px; }

/* --- "Why this score" section + flags --- */
.result-section { margin-top: 40px; }
.result-section-head { margin-bottom: 20px; }
.result-section-sub { color: var(--ink-2); font-size: 15px; margin-top: 6px; max-width: 62ch; }
.cb-result .flags { gap: 12px; }
.cb-result .flag {
  border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px;
  background: var(--panel);
}
.cb-result .flag.f-critical { background: color-mix(in srgb, var(--critical) 7%, var(--panel)); border-color: color-mix(in srgb, var(--critical) 26%, var(--border)); }
.cb-result .flag.f-major { background: color-mix(in srgb, var(--serious) 6%, var(--panel)); border-color: color-mix(in srgb, var(--serious) 22%, var(--border)); }
.cb-result .flag h4 { font-size: 17px; font-weight: 600; }
.cb-result .flag .sev { border-radius: 999px; padding: 3px 10px; font-size: 10px; }
.cb-result .flag-quote {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-2);
}
.cb-result .clean { border-radius: 12px; }

/* --- deal + recall cards read as calmer within the sheet --- */
.cb-result .deal-card, .cb-result .recalls-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 24px; margin-top: 20px;
}
.cb-result .deal-card { background: color-mix(in srgb, var(--panel) 88%, var(--bg)); }
.cb-result #r-deal .deal-empty, .cb-result #r-deal .deal-soon-cta { max-width: 68ch; }
.cb-result .recall-item { border-radius: 12px; }
.cb-result .recall-clean { border-radius: 12px; }

/* --- kit + disclaimer spacing within the sheet --- */
.cb-result .kit { margin-top: 40px; }
.cb-result .kit li { border: 1px solid var(--border); border-radius: 12px; }
.cb-result .disclaimer { margin-top: 26px; }

@media (max-width: 560px) {
  .result-bar { gap: 8px; flex-wrap: wrap; }
  .result-back { padding: 0 12px 0 8px; font-size: 12px; white-space: nowrap; }
  .rb-word { display: none; }
  .result-bar-share { margin-left: auto; }
  .rb-btn { padding: 0 12px; }
  .result-hero { padding: 26px 22px; }
  .gauge { width: 172px; height: 172px; }
  .cb-result .gauge .score-num { font-size: 48px; }
  .rh-summary { font-size: 17px; }
}