/* ============================================================
   fleetfax — site styles
   Design tokens at top, then reset, base, components, sections.
   ============================================================ */

/* ─── Design tokens ─────────────────────────────────────── */
:root {
  /* Color — neutrals */
  --bg:            #ffffff;
  --bg-alt:        #f8f8f7;   /* v4: unified near-white (was #fafafa) — matches the app canvas --soft */
  --text:          #0a0a0a;
  --text-2:        #525252;
  --text-3:        #6b6f75;  /* was #a3a3a3 (2.52:1) then #757a80 (4.33:1 white / 4.07:1 --bg-alt, both failed AA); now 5.05:1 on white, 4.76:1 on --bg-alt */
  --border:        #e5e5e5;
  --border-strong: #d4d4d4;

  /* Color — brand (sampled from the logo) */
  --brand:         #c8102e;
  --brand-hover:   #a30d24;
  --brand-active:  #82081c;
  --brand-tint:    #fdf2f4;
  --brand-border:  #f6c4cb;

  /* Brand gradient — matches the logo mark */
  --brand-gradient:        linear-gradient(135deg, #e6202b 0%, #c8102e 55%, #8e0c20 100%);
  --brand-gradient-hover:  linear-gradient(135deg, #c8102e 0%, #a30d24 55%, #6b0a17 100%);
  --brand-gradient-active: linear-gradient(135deg, #a30d24 0%, #82081c 55%, #4a0712 100%);

  /* Status (used sparingly) */
  --success:       #16a34a;   /* fills/dots only — 3.30:1 on white, fails AA as text */
  --success-text:  #147a39;   /* text-safe green: 5.42:1 on white, 4.85:1 on the mint #e7f6ec status pill */

  /* Type */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;

  /* Spacing (4px base) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Layout */
  --container-max:     1200px;
  --container-padding: 2rem;

  /* Radius */
  --radius-sm: 0.5rem;
  --radius:    0.75rem;
  --radius-lg: 1rem;

  /* Transitions */
  --t: 150ms ease;

  /* Z-index — nav sits ABOVE the hero search pill (z 60, lifted for its suggest
     dropdown) so the pill scrolls UNDER the sticky header instead of painting
     over it. The pill's dropdown opens below the header, so it's never covered. */
  --z-nav:      70;
  --z-feedback: 60;
}

/* ─── Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ─── Base ─────────────────────────────────────────────── */
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

::selection { background: var(--brand); color: white; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  /* No border-radius here: outlines follow each element's own radius in every
     supported browser, and forcing radius-sm visibly SQUARED pill inputs and
     pill buttons while focused (founder repro on the pricing waitlist input,
     2026-07-17). Elements keep their own shape under keyboard focus. */
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  background: var(--text);
  color: white;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  z-index: 100;
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Layout primitives ───────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Doc/glossary breadcrumb alignment (founder 2026-07-17). The generated
   content pages (web-drafts/gen/build.mjs DOC_CSS) render the breadcrumb as
   `.doc-crumbs container` — full 1200px container — while the article body
   `.doc` is an 800px centered column. At wide viewports the crumb started
   ~167px left of the article (crumb at the nav edge, article inset). The
   breadcrumb belongs to the content, so cap it to the SAME measure as `.doc`
   (800px + both container gutters) so it centers onto the article column at
   every width. Shared here (57 pages) rather than regenerating; must sit after
   `.container` to win the equal-specificity max-width cascade. */
.doc-crumbs.container { max-width: calc(800px + 2 * var(--container-padding)); }

.section { padding: var(--s-24) 0; }
.section-alt { background: var(--bg-alt); }

/* /feedback page — default + uninstall-survey form */
.fb-form { margin-top: var(--s-6); }
.fb-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin: var(--s-5) 0 var(--s-2);
}
.fb-label-hint {
  font-weight: 400;
  color: var(--text-3);
  margin-left: var(--s-1);
}
.fb-textarea, .fb-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  line-height: 1.5;
}
.fb-textarea { min-height: 160px; resize: vertical; }
.fb-textarea:focus, .fb-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.fb-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-5) var(--s-4);
  margin-top: var(--s-5);
}
.fb-fieldset .fb-label { margin-top: 0; }
.fb-radio {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  cursor: pointer;
  font-size: var(--text-base);
}
.fb-radio input { accent-color: var(--brand); }
.fb-submit { margin-top: var(--s-6); }
.fb-status {
  margin-top: var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-2);
  min-height: 1.5em;
}
.fb-status.error   { color: var(--brand); }
.fb-status.success { color: var(--success-text); }

/* Post-Montgomery stakes block — sober, sparse, no flash. */
/* .section-stakes padding is set further down (paired with the hero
   carve-out) so the post-Montgomery eyebrow lands at the fold. */
.stakes-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.stakes-eyebrow {
  color: var(--brand);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.stakes-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: var(--s-8);
  text-wrap: balance;
}
.stakes-quote {
  border-left: 3px solid var(--brand);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  margin: 0 0 var(--s-6);
}
.stakes-quote p {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: var(--s-3);
  font-style: italic;
}
.stakes-quote cite {
  display: block;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
}
.stakes-quote cite a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stakes-quote cite a:hover { color: var(--brand); }
.stakes-body {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: var(--s-12);
}
.stakes-stat {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-2) 0 0;
}
.stakes-stat-figure {
  /* Decorative ghost numeral — the headline now carries the full "94% of…"
     sentence, so the big figure is a backdrop, not the subject. Hidden on
     phones, where it used to stack above the fragment and read broken. */
  font-size: 5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-3);
  opacity: 0.45;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .stakes-stat-figure { display: none; }
}
.stakes-stat-pct {
  font-size: 2.5rem;
  margin-left: 0.1em;
  color: var(--text-2);
  font-weight: 500;
}
.stakes-stat-headline {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-2);
  line-height: 1.4;
}
.stakes-stat-sub {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}
/* Inline citation on the 94% stat headline. Subtle underline so it reads
   as a source link without breaking the headline's typographic weight. */
.stakes-stat-cite {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-3);
  transition: text-decoration-color 0.15s, color 0.15s;
}
.stakes-stat-cite:hover {
  color: var(--brand);
  text-decoration-color: var(--brand);
}

/* Prose pages (about, privacy) — single-column readable column.
   Width matches the search-bar / report-content column on the homepage. */
.prose {
  max-width: 800px;
  margin: 0 auto;
  /* Vertical only (longhand) — the old `padding: X 0 Y` shorthand zeroed the
     horizontal padding, which overrode the sibling `.container` gutters (every
     prose page is `class="container prose"`). On desktop the 800px max-width
     centered the column so nobody noticed; on a phone (<800px) the text ran
     edge-to-edge with no margins. Now `.container`'s left/right padding stands. */
  padding-top: var(--s-16);
  padding-bottom: var(--s-24);
}
/* Intent/landing hero: hold the intro to a readable measure (was full-container
   width = a wall). Headline + prose share the same left edge + measure. */
.intent-hero { max-width: 768px; }
/* Standalone eyebrow (glossary uses .prose-eyebrow outside a .prose page, where
   it rendered as plain text). Prose pages keep their gray `.prose .prose-eyebrow`
   via the more specific selector. */
.prose-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--s-4);
}
.prose h1 {
  font-family: var(--font-sans);   /* design system: headlines are Inter; mono reserved for wordmark + data */
  font-size: var(--text-3xl);
  font-weight: 600;   /* design system caps headlines at 600 (big, not heavy). 700 also faux-bolds — Inter is loaded 400;500;600 only. */
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.prose .prose-eyebrow {
  color: var(--text-3);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-12);
}
.prose h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin: var(--s-12) 0 var(--s-3);
  letter-spacing: -0.01em;
}
.prose h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: var(--s-6) 0 var(--s-2);
}
.prose p,
.prose li {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
}
.prose p { margin-bottom: var(--s-4); }
.prose ul {
  /* Override the global `ol, ul { list-style: none }` reset so bullets
     render in body-copy lists (e.g. the data-points list on /about). */
  list-style: disc;
  padding-left: var(--s-5);
  margin-bottom: var(--s-4);
}
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--brand-hover); }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; }

/* ─── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: var(--s-3) var(--s-5);
  border-radius: 9999px;   /* design system: buttons are full pills */
  transition: background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}

/* Flat solid brand red — the gradient + bevel treatment read as dated
   (founder, 2026-07-02). Wordmark gradient is untouched (brand hard rule). */
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover  { background: #a30d24; }
.btn-primary:active { background: #8e0c20; box-shadow: none; }

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { border-color: var(--text); }

/* Outline variant — quieter than primary. Available for secondary actions. */
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline:active { background: var(--brand-tint); }

/* Chrome-style install CTA — wide rounded-rect with multi-color Chrome
   icon left, label center-left, chevron right. Matches the standard CWS
   install-button convention used by other extensions. */
.btn-chrome {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  /* Unified to the fleetfax crimson (founder call 2026-06-25): every primary CTA
     — run-a-report AND install — wears the brand red. (Previously the base was
     Chrome blue #6395F2 for install buttons, with .final-cta-run overriding to
     red only on the homepage; that left /about's "Run a free report" blue, which
     read as unintentional.) .final-cta-run now re-applies the same red and is a
     harmless no-op. */
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn-chrome:hover {
  background: #a30d24;
}
.btn-chrome:active {
  background: #8e0c20;
  box-shadow: none;
}
.btn-chrome-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}
.btn-chrome-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.95;
}
.btn-chrome-lg {
  font-size: var(--text-lg);
  padding: var(--s-3) var(--s-6);
  border-radius: 9999px;
}
.btn-chrome-lg .btn-chrome-icon    { width: 22px; height: 22px; }
.btn-chrome-lg .btn-chrome-chevron { width: 16px; height: 16px; }

/* Embedded Google Map under the address in the carrier report */
.cr-address-map {
  margin-top: var(--s-5);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.cr-address-map iframe {
  width: 100%;
  height: 260px;
  border: 0;
  display: block;
}

/* Frosted-glass pill — matches the floating feedback button. Used in the
   nav for the install CTA so it doesn't compete with the in-hero Search
   button's saturated red. The favicon to its left provides identity. */
.btn-frosted {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
  white-space: nowrap;
}
.btn-frosted:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(200, 16, 46, 0.35);
  color: var(--brand);
  box-shadow:
    0 6px 22px rgba(200, 16, 46, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.btn-frosted img,
.btn-frosted svg {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.btn-lg {
  font-size: var(--text-lg);
  padding: var(--s-4) var(--s-6);
}

.btn-icon { width: 1.125em; height: 1.125em; flex-shrink: 0; }

/* ─── Nav ─────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(250, 250, 250, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.nav-brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.nav-brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--brand);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* v4 unified nav: the wordmark now renders on every surface (incl. home — the
   mockup pairs the small nav wordmark with the hero wordmark). The search pill
   now lives on EVERY page including the homepage, but on the homepage the hero
   owns search — so the pill is hidden while the hero is in view and REVEALS once
   the hero scrolls out (nav.js IntersectionObserver toggles .nav-search-shown;
   no scroll-listener jank). Kept in layout (visibility, not display) so the
   Log in / Start free cluster never shifts when it appears (spec 2026-07-05). */
body.home .nav-search {
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--t), visibility var(--t);
}
body.home.nav-search-shown .nav-search {
  visibility: visible; opacity: 1; pointer-events: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  transition: color var(--t);
}
.nav-link:hover { color: var(--text); }

/* ─── v4 unified nav system (canonical block synced by scripts/sync-nav.mjs) ── */
.nav-inner { justify-content: flex-start; gap: var(--s-5); }
.nav-menu { display: flex; align-items: center; gap: var(--s-1); }
.nav-menu > .nav-link, .nav-group-btn { font-size: var(--text-sm); }
.nav-right { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

/* Product group — CSS hover/focus menu on desktop; nav.js adds click/keyboard */
.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-weight: 500; color: var(--text-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
}
.nav-group-btn:hover { color: var(--text); }
/* Caret glyphs removed (founder 2026-07-09); the hover pill below is the
   "this is interactive" cue for every top-level item. */

/* Top-level hover affordance: a faded grey pill behind the label on hover and
   keyboard focus — same neutral language as the search pill, NO red (red stays
   scarce: the Apply pill is the header's one red element). The trigger keeps
   its pill while its panel is open so the open menu reads as anchored to it.
   rgba over a token grey because the nav is translucent and sits over both
   light and dark bands — an opaque near-white pill would flash on dark heroes. */
.nav-menu > .nav-link, .nav-menu .nav-group-btn {
  transition: background-color 120ms ease, color 120ms ease;
  border-radius: 999px;   /* FULL pill, matching the site's pill language (founder 7/9) */
}
.nav-menu > .nav-link:hover, .nav-menu > .nav-link:focus-visible,
.nav-menu .nav-group-btn:hover, .nav-menu .nav-group-btn:focus-visible,
.nav-group.nav-group-open > .nav-group-btn {
  background: rgba(10, 10, 10, 0.05); color: var(--text);
}
.nav-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 208px;
  display: flex; flex-direction: column; padding: var(--s-2);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(10,10,10,.10); opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: opacity var(--t), transform var(--t), visibility var(--t);
  z-index: var(--z-nav);
}
/* Hover bridge: the panel floats 6px below the trigger; a transparent strip over
   that gap keeps the pointer inside the group's hover region on a diagonal path,
   so a fast pointer move can't fall through the gap and collapse the menu
   (spec §4.2). */
.nav-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
/* Second bridge, on the GROUP itself (founder bug 2026-07-09): the panel's
   ::before only hit-tests while the panel is visible — during the 150ms
   open-intent the panel is visibility:hidden and the 6px gap is a dead zone, so
   a downward cursor left the group and the leave handler killed the panel it
   was heading into. This strip always hit-tests (it belongs to the trigger's
   group, never hidden), sits inside the header chrome directly under the
   trigger, and makes trigger→panel one contiguous hover region at every moment.
   nav.js's 250ms close-grace covers the diagonal paths this can't. */
.nav-group::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
}
/* Single source of truth for OPEN state: .nav-group-open, toggled by nav.js for
   EVERY affordance — mouse (150ms hover-intent), keyboard/focus, click, touch.
   Pure CSS :hover was removed (2026-07-09) so the hover-intent delay is real and
   ONE code path governs all three menus (Product mega + Research/Resources
   previews); a CSS :hover would open instantly and defeat the delay. :focus-within
   is intentionally NOT a show-trigger — it desynced aria from visibility and
   trapped Escape (spec §4.1); nav.js drives the focus path through this class. */
.nav-group.nav-group-open .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  font-size: var(--text-sm); color: var(--text-2); padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.nav-dropdown a:hover { color: var(--text); background: var(--bg-alt); }

/* Product panel (founder-approved header-linear-v2, 2026-07-05). Reuses
   .nav-dropdown's absolute position + hover/open show-logic; overrides the box
   into the VET / SOURCE+MONITOR two-zone layout. Text-only (no icons, no
   "What's new"). .nav-mega-scoped selectors beat the base `.nav-dropdown a`. */
.nav-dropdown.nav-mega {
  display: block; width: 780px; max-width: calc(100vw - 32px); min-width: 0;
  padding: 0; overflow: hidden;
}
.nav-mega-grid { display: grid; grid-template-columns: minmax(0, 520px) 1fr; }
.nav-mega-vet { padding: 18px 16px 16px; border-right: 1px solid var(--border); }
.nav-mega-right { display: flex; flex-direction: column; }
.nav-mega-src { padding: 18px 18px 16px; border-bottom: 1px solid var(--border); }
.nav-mega-mon { padding: 18px 18px; }
/* zone headers are links to the job pages */
.nav-mega a.nav-mega-head {
  display: inline-flex; align-items: center; gap: 4px; width: auto;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  padding: 0 8px; margin-bottom: 10px; white-space: nowrap; background: none;
}
.nav-mega a.nav-mega-head:hover { color: var(--text-2); background: none; }
.nav-mega .nav-mega-arr { opacity: 0; display: inline-flex; transition: opacity var(--t); }
.nav-mega a.nav-mega-head:hover .nav-mega-arr { opacity: 1; }
.nav-mega .nav-mega-arr svg { width: 9px; height: 9px; }
/* VET: 8 items in two sub-columns of four, filled column-major */
.nav-mega-vitems {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; column-gap: 6px;
}
.nav-mega a.nav-mega-item {
  display: block; padding: 8px; border-radius: 8px; color: inherit; background: none; white-space: normal;
}
.nav-mega a.nav-mega-item:hover { background: var(--bg-alt); color: inherit; }
.nav-mega .nav-mega-t { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; }
.nav-mega .nav-mega-d { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.25; }
.nav-mega-foot {
  background: var(--bg-alt); border-top: 1px solid var(--border);
  padding: 12px 20px; display: flex; align-items: center; justify-content: flex-end;
}
.nav-mega a.nav-mega-foot-link { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 0; background: none; white-space: nowrap; }
.nav-mega a.nav-mega-foot-link:hover { color: var(--text); background: none; }
/* Product-panel foot: the Chrome-extension strip (chrome glyph + title + tagline).
   Same 12px strip height as the plain foot link — the icon is sized to the line.
   Left-justified (founder 7/15): margin-right:auto pins it to the start of the
   flex-end .nav-mega-foot (shared with the Research foot, which stays right);
   4px left padding lines its text up with the Vet column content (16px column
   padding + 8px item padding = 24px, vs the foot's 20px). */
.nav-mega a.nav-mega-foot-ext { display: inline-flex; align-items: center; gap: 10px; padding: 0 0 0 4px; margin-right: auto; background: none; white-space: nowrap; }
.nav-mega .nav-mega-foot-ic { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-2); transition: color var(--t); }
.nav-mega .nav-mega-foot-t { font-size: 13px; font-weight: 600; color: var(--text); transition: color var(--t); }
.nav-mega a.nav-mega-foot-ext .nav-mega-foot-d { font-size: 12.5px; color: var(--text-2); margin-top: 0; }
.nav-mega a.nav-mega-foot-ext:hover { background: none; }
.nav-mega a.nav-mega-foot-ext:hover .nav-mega-foot-t,
.nav-mega a.nav-mega-foot-ext:hover .nav-mega-foot-ic { color: var(--brand); }
/* PRO chip — near-black full-pill (design system: Pro = near-black). Shared by
   the desktop panel and the mobile drawer. */
.nav-pro {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: #16181d; border-radius: 9999px; padding: 2px 7px;
  line-height: 1; flex-shrink: 0;
}
@media (max-width: 1120px) { .nav-dropdown.nav-mega { display: none; } }

/* Research + Resources hover-preview panels (2026-07-09). Same surface as the
   Product panel — they reuse .nav-dropdown (position, border, shadow) and the
   .nav-group-open show-logic — with lighter, text-only content. The triggers are
   real <a> links (a click navigates to /research or /resources; the panel is a
   hover/focus preview), so on touch they behave as plain links with no hover trap.
   .nav-menu is display:none <=1120px, so these never render on mobile. */
.nav-dropdown.nav-panel { display: block; padding: 0; min-width: 0; overflow: hidden; }
.nav-dropdown.nav-rpanel { width: 380px; }
.nav-dropdown.nav-respanel { width: 288px; }
.nav-panel .nav-panel-list { padding: 8px; display: flex; flex-direction: column; }
.nav-panel a.nav-panel-item {
  display: block; padding: 9px 10px; border-radius: 8px; color: inherit;
  background: none; white-space: normal;
}
.nav-panel a.nav-panel-item:hover { background: var(--bg-alt); color: inherit; }
.nav-panel .nav-panel-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.nav-panel .nav-panel-d { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }
.nav-panel .nav-panel-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-3); margin-top: 5px; }
/* Resources: grouped plain links under mono eyebrows (no red — the Apply pill is
   the header's only red element). */
.nav-respanel .nav-panel-list { padding: 12px 8px; gap: 1px; }
.nav-panel .nav-panel-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  padding: 0 10px; margin: 8px 0 4px;
}
.nav-panel .nav-panel-eyebrow:first-child { margin-top: 0; }
/* The Research panel's Live-data eyebrow is brand red (founder 7/15) — the red
   mono eyebrow register the pages already use. Color only; the drawer's grey
   "Live data" eyebrow and the Resources "Guides" eyebrow are unchanged. */
.nav-panel .nav-panel-eyebrow-live { color: var(--brand); }
.nav-respanel a.nav-reslink {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--text-2);
  padding: 7px 10px; border-radius: 8px; white-space: nowrap;
}
.nav-respanel a.nav-reslink:hover { color: var(--text); background: var(--bg-alt); }

/* Search affordance. The nav is translucent (blurred) and sits over BOTH light
   and dark sections (e.g. the research hero / dark stats band). A transparent
   pill left its grey text/icon unreadable when dark content bled through
   (founder 2026-07-08), so the pill carries its own SOLID surface — its interior
   stays a light control on any backdrop — with darker text for contrast. */
.nav-search {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 38px; padding: 0 var(--s-3); border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--text-2); font-size: var(--text-sm);
  background: var(--bg);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.nav-search:hover { border-color: var(--text-3); color: var(--text); background: var(--bg); }
.nav-search kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; line-height: 1.4;
}
.nav-signin { white-space: nowrap; }
/* "Start free" CTA: a solid brand pill (btn-primary is intentionally flat solid
   --brand, not the mockup's gradient — founder 2026-07-02 flat-CTA decision
   overrides the comp artifact), prominent padding, weight 600. */
.nav-cta { white-space: nowrap; padding: 10px 22px; font-size: 14.5px; font-weight: 600; }

/* Mobile hamburger + drawer (hidden on desktop) */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 9px; border: none; background: none; cursor: pointer;
}
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; }
.nav-drawer {
  display: flex; flex-direction: column; gap: 0;
  padding: var(--s-4) var(--container-padding) var(--s-6);
  border-top: 1px solid var(--border); background: var(--bg);
}
.nav-drawer[hidden] { display: none; }
/* Drawer items — grouped under Vet / Source / Monitor eyebrows, then Pricing /
   Resources below a hairline. Clean list (no per-row dividers), matching the
   approved comp; chips align inline with the label. */
.nav-drawer > a {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--text); padding: 9px 0;
}
.nav-drawer-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
  margin: 18px 0 8px;
}
.nav-drawer-divider { height: 1px; background: var(--border); margin: 18px 0; }
/* Drawer "Search a carrier" — opens the same command palette as the nav pill
   (spec §3: today's drawer had no search). Full-width tappable row. */
.nav-drawer-search {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--text-2);
  padding: 12px 14px; margin-bottom: 6px; cursor: pointer;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px;
}
.nav-drawer-search svg { color: var(--text-3); flex-shrink: 0; }
.nav-drawer-cta { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.nav-drawer-cta .btn { width: 100%; justify-content: center; height: 44px; }

/* ─── Hero ────────────────────────────────────────────── */
.hero {
  /* Viewport-relative height: nav (64px) + peek (150px) carved out so the
     post-Montgomery eyebrow AND headline sit above the fold, with the
     body paragraph cut off. Content vertically centered with symmetric
     padding — looks balanced top-to-bottom rather than anchored to the
     top with empty space below. */
  /* Fill most of the viewport and CENTER the cluster, so the space above and
     below the content is balanced (no lopsided void). The shortfall lets the
     next section ("What a SAFER lookup can't show you") peek above the fold. */
  min-height: calc(100vh - 64px - 150px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;          /* anchors the aurora backdrop + dot matrix */
  isolation: isolate;          /* contain the aurora's z-index to the hero */
  padding: var(--s-10) 0 var(--s-12);
  text-align: center;
}
/* Aurora: soft red gradients drifting slowly behind the dot matrix — an ambient
   wash, not a spotlight. SUPER subtle by intent (founder 2026-07-03): low alpha
   + heavy blur + multiply blend, so it reads as a faint warming of the canvas,
   with the neutral dot matrix riding on top. Honors reduced-motion. */
.hero-aurora { position: absolute; inset: -12% 0 auto; height: 78%; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(72px); opacity: .55; mix-blend-mode: multiply; will-change: transform;
}
.hero-aurora i:nth-child(1) { width: 46vw; height: 32vw; left: 10%; top: -4%;  background: radial-gradient(circle at 40% 40%, rgba(230,32,43,.17), transparent 66%); animation: ff-aurora1 23s ease-in-out infinite; }
.hero-aurora i:nth-child(2) { width: 40vw; height: 38vw; right: 4%;  top: -12%; background: radial-gradient(circle at 55% 45%, rgba(200,16,46,.15), transparent 64%); animation: ff-aurora2 29s ease-in-out infinite; }
.hero-aurora i:nth-child(3) { width: 38vw; height: 28vw; left: 33%; top: 16%;  background: radial-gradient(circle at 50% 50%, rgba(142,12,32,.11), transparent 66%); animation: ff-aurora3 35s ease-in-out infinite; }
@keyframes ff-aurora1 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(5%,3%)     scale(1.12)} }
@keyframes ff-aurora2 { 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-4%,3.5%)  scale(.94)} }
@keyframes ff-aurora3 { 0%,100%{transform:translate(0,0) scale(1)}    50%{transform:translate(2.5%,-3.5%) scale(1.15)} }
@media (prefers-reduced-motion: reduce) { .hero-aurora i { animation: none; } }
/* Faint neutral dot matrix sitting just behind the fleetfax wordmark — a
   small, very subtle patch that fades out around the logo. Anchored to the
   wordmark itself so it stays put on any viewport. No colour, no animation. */
.hero-brand { position: relative; isolation: isolate; }

/* Dot-matrix field, centred on the wordmark and wide enough for the spotlight
   to roam. Each layer shares the cursor vars --sx/--sy (set by hero-dots.js). */
.hero-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 96vw);
  height: 440px;
  z-index: -1;
  pointer-events: none;
}
.hero-dots > span {
  position: absolute;
  inset: 0;
}
/* Soft fade that keeps every layer densest at the wordmark and dissolved at
   the field's edges. Reused as the second (clipping) mask layer below. */
.hd-base, .hd-spot, .hd-core {
  background-size: 23px 23px;
}
/* (1) Resting dots: faint, neutral, fading out from the wordmark. */
.hd-base {
  background-image: radial-gradient(circle, rgba(20, 22, 28, 0.10) 1.1px, transparent 1.7px);
  -webkit-mask: radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 70%);
  mask: radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 70%);
}
/* (2) Spotlight trail: three echo layers of brighter+larger dots (a subtle
   magnify). Each echo lags a beat further behind the cursor and is fainter, so
   the dots fade out behind the pointer like a comet tail rather than snapping
   off. hero-dots.js drives --sx1/2/3 (lead → tail). Clipped to the field. */
.hd-spot {
  opacity: 0;
  transition: opacity 0.8s ease-out;
  background-image: radial-gradient(circle, rgba(20, 22, 28, 0.15) 1.3px, transparent 1.9px);
}
.hd-trail1 {
  -webkit-mask:
    radial-gradient(132px at var(--sx1, -400px) var(--sy1, -400px), #000 0%, #000 14%, rgba(0,0,0,0.45) 46%, transparent 78%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(132px at var(--sx1, -400px) var(--sy1, -400px), #000 0%, #000 14%, rgba(0,0,0,0.45) 46%, transparent 78%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  mask-composite: intersect;
}
.hd-trail2 {
  -webkit-mask:
    radial-gradient(126px at var(--sx2, -400px) var(--sy2, -400px), #000 0%, rgba(0,0,0,0.5) 46%, transparent 80%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(126px at var(--sx2, -400px) var(--sy2, -400px), #000 0%, rgba(0,0,0,0.5) 46%, transparent 80%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  mask-composite: intersect;
}
.hd-trail3 {
  -webkit-mask:
    radial-gradient(120px at var(--sx3, -400px) var(--sy3, -400px), #000 0%, rgba(0,0,0,0.5) 48%, transparent 82%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(120px at var(--sx3, -400px) var(--sy3, -400px), #000 0%, rgba(0,0,0,0.5) 48%, transparent 82%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  mask-composite: intersect;
}
.hd-trail4 {
  -webkit-mask:
    radial-gradient(116px at var(--sx4, -400px) var(--sy4, -400px), #000 0%, rgba(0,0,0,0.5) 50%, transparent 84%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(116px at var(--sx4, -400px) var(--sy4, -400px), #000 0%, rgba(0,0,0,0.5) 50%, transparent 84%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  mask-composite: intersect;
}
/* (3) Red core: a whisper of fleetfax-red on the dots at the leading edge of
   the pool (follows --sx1), fading to neutral within a few dots. */
.hd-core {
  opacity: 0;
  transition: opacity 0.8s ease-out;
  background-image: radial-gradient(circle, rgba(200, 16, 46, 0.22) 1.3px, transparent 1.9px);
  -webkit-mask:
    radial-gradient(60px at var(--sx1, -400px) var(--sy1, -400px), #000 0%, rgba(0,0,0,0.5) 44%, transparent 78%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(60px at var(--sx1, -400px) var(--sy1, -400px), #000 0%, rgba(0,0,0,0.5) 44%, transparent 78%),
    radial-gradient(ellipse 48% 54% at 50% 50%, #000 16%, transparent 72%);
  mask-composite: intersect;
}
/* Leading echo brightest, tail echoes progressively fainter → fading trail. */
.hero-brand.is-lit .hd-trail1 { opacity: 0.72; }
.hero-brand.is-lit .hd-trail2 { opacity: 0.48; }
.hero-brand.is-lit .hd-trail3 { opacity: 0.30; }
.hero-brand.is-lit .hd-trail4 { opacity: 0.15; }
.hero-brand.is-lit .hd-core { opacity: 0.85; }

.hero-mark {
  margin: 0 auto var(--s-6);
  width: 96px;
  height: 96px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  margin-bottom: var(--s-5);
}

.hero-title {
  font-family: var(--font-sans);   /* Inter — the regular sans, not the mono wordmark face */
  font-size: 3.25rem;         /* 52px */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 900px;
  margin: 0 auto var(--s-5);
}

.hero-sub {
  font-size: var(--text-xl);
  color: var(--text-2);
  max-width: 640px;
  margin: 0 auto var(--s-12);
  line-height: 1.4;
}

/* Search-first hero (founder 2026-06-29): no marketing headline — the fleetfax
   wordmark IS the hero (Google-style), with the search bar directly under it.
   The whole lockup + tagline is the H1 (reads "fleetfax Carrier Intelligence"
   to crawlers; the mark is decorative). A smaller line sits under the bar. */
.hero-brand {
  margin: 0 0 var(--s-8);
  font-weight: 400;          /* reset the h1 bold; the wordmark sets its own weight */
  letter-spacing: normal;
  line-height: 1;
}
.hero-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.hero-lockup-mark svg { display: block; width: 52px; height: 52px; }
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  font-size: 3.4rem;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand);       /* fallback if background-clip unsupported */
}
.hero-tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--s-4);
}
.hero-underline {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 760px;
  margin: var(--s-6) auto 0;
}
/* Inline "Show me an example" — sits right after the lead sentence, reusing
   the feeling-lucky behavior (random vetted carrier). Reads as a text link,
   not a button. */
.hero-example-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  white-space: nowrap;
}
.hero-example-link svg { transition: transform var(--t); }
.hero-example-link:hover { text-decoration: underline; }
.hero-example-link:hover svg { transform: translateX(3px); }

/* Capability chips — the four report sections, each a working anchor into the
   showcase below (#cap-*). Labels mirror the showcase eyebrows exactly. */
.hero-cap {
  font-size: 0.9rem;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.hero-cap:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.hero-cap:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--bg);
}
/* Land the showcase row below the sticky nav, not under it. */
#cap-safety, #cap-fleet, #cap-map, #cap-connections { scroll-margin-top: 90px; }

/* ─── Homepage hero: carrier-domicile map (feat/hero-port) ───────────────────
   The signed-off hero — a lazily-loaded canvas dot field of the real US active-
   carrier population by domicile (web/js/hero-map.js + web/data/hero-domicile.json),
   behind an eyebrow → H1 → subhead → the EXISTING two-mode search → intelligence
   pills → trust line. Scoped to body.home so the shared .hero-title / .hero-sub
   tokens (also used by onboarding.html) don't regress other pages. The canvases are
   sized to the map extent by JS and sit behind .hero-c (z-index), aria-hidden, no CLS. */
.hero-map {
  position: absolute; top: 0; left: 0; width: 100%;
  display: block; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.hero-c { position: relative; z-index: 2; }

body.home .hero {
  min-height: auto;
  display: block;
  padding-top: 120px;
  text-align: center;
  /* NB: no overflow:hidden here — it would clip the vet search's absolutely-
     positioned name typeahead + search-type menu, which extend below the hero
     box in this content-height layout. The map needs no CSS clip: the canvas is
     width:100% of the width-capped hero (no horizontal overflow) and the bottom
     dissolve is baked into per-dot alpha (envAt), not a clip. */
}
/* reveal band: a stretch of pure map (southern US) between the subhead and the
   tabs — the flashlight-demo zone. Zeroed when the hero collapses to results. */
body.home .search-modes { margin-top: 130px; }

.hero-map-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: #767676; text-align: center;
  font-variant-numeric: tabular-nums;
  /* live-data badge (H): faint grey pill + a pulsing green status dot before the
     number. inline-block so the pill hugs the text and centers via the hero's
     text-align:center. Mono typography preserved. */
  display: inline-block;
  margin: 0 0 20px;
  padding: 4px 13px 4px 11px;
  background: rgba(20,22,26,0.045);
  border-radius: 999px;
}
.hero-map-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #1faa4f;               /* status green — a data-liveness semantic, not brand */
  vertical-align: middle;
  position: relative; top: -1px;
  animation: ff-eyebrow-pulse 2s ease-in-out infinite;   /* static under reduced motion (global rule) */
}
@keyframes ff-eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,170,79,0.5); }
  70%      { box-shadow: 0 0 0 4px rgba(31,170,79,0); }
}
.hero-map-eyebrow b { color: var(--text-2); font-weight: 600; }
/* On map-hover the eyebrow becomes the live cursor readout (hero-map.js toggles
   .is-count). The pill chrome stays in both modes and SHRINKS/GROWS to its
   content (founder 7/9); the inner span does a quick fade so text never pops. */
.hero-map-eyebrow { white-space: nowrap; box-sizing: border-box; }
.hero-eyebrow-in { transition: opacity .12s ease; }

body.home .hero-title {
  font-family: var(--font-sans);
  font-size: 56px; line-height: 1.08; letter-spacing: -0.032em; font-weight: 700;
  color: var(--text); max-width: 920px; margin: 0 auto;
  /* Phones wrap each sentence onto two lines; greedy wrapping stranded
     "carrier." / "record." after mid-phrase breaks (founder, iPhone 15 Pro Max
     2026-07-17). balance re-breaks at even lengths within each <br> segment;
     desktop is untouched (its segments fit on one line each). */
  text-wrap: balance;
}
body.home .hero-sub {
  font-size: 18.5px; line-height: 1.55; color: var(--text-2);
  max-width: 640px; margin: 24px auto 0;
}

/* fixed instrument readout, top-right of the map area (interactive only) */
.hero-mapcount {
  position: absolute; z-index: 2; pointer-events: none;
  top: 16px; right: 40px; text-align: right;
  font-size: 12.5px; font-weight: 500; color: #767676;
  white-space: nowrap; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .16s;
  text-shadow: 0 1px 2px #fff, 0 0 4px #fff, 0 0 8px #fff;
}
.hero-mapcount b { color: var(--text-2); font-weight: 600; }

@media (max-width: 900px) {
  body.home .hero { padding-top: 64px; }
  body.home .hero-title { font-size: 44px; }
  body.home .search-modes { margin-top: 96px; }
}
/* Fold invariant, round 3 (founder 2026-07-15): below the hero's trust band,
   ONLY the next section's headline sits in the fold — the "Why lookups fail"
   eyebrow + h2 fully visible as the LAST things above the fold, zero
   body-paragraph pixels — at every normal desktop viewport height. Rounds 1-2
   tuned fixed gaps inside a max-height:900 query, which left a dead zone at
   901-1100px-tall windows (and compressed under browser zoom, which shrinks
   CSS-px height on physically tall windows). Redo: viewport-DRIVEN sizing.
   The hero's two flexible gaps (top padding + the map reveal band) plus the
   proof band's breathing room scale off one free-space variable so the hero
   region bottom lands at 100svh − 178px (178px = the wound section's natural
   top padding 96 + eyebrow 18 + gap 12 + h2 44 + ~8px fold buffer). Where the
   viewport is too short for that (the free var clamps to 0) the hero floors
   at its comfortable minimum (~680px) and the wound section's top padding
   takes over the tracking (clamped 40..96px) so the headline still clears the
   fold down to ~795px-tall viewports; shorter than that scrolls, never
   crushes. Shares are calibrated so a 1080-tall viewport reproduces the
   approved tall composition (pt≈120, reveal≈130). Desktop only (>900px wide);
   phones keep natural flow. .source-examples tracks .hero-try so the
   Vet/Source toggle keeps the trust band at one fixed y. All selectors stay
   at (0,2,1) specificity and above this file's source-stage / has-results /
   carrier-page-mode overrides so those modes still win. Browsers without svh
   drop these calc() declarations and fall back to the fixed values above. */
@media (min-width: 901px) {
  /* Cap 280 (was 480), founder 2026-07-15 round 3 — the MAP-ANCHOR fix. The map
     canvas is width-driven (mapW ≤ 1000, so mapH ≤ ~607px) and pinned to the hero
     top; it CANNOT grow taller without stretching the US field out of shape. So the
     coupling that keeps the headline on the map at every aspect is to stop the text
     stack sinking past the map's fixed vertical footprint: the free space that top
     padding rides tops out at 280px, which lands the nav→chip clean-map band at
     exactly 240px (= 44 + 280·0.70) — fd1526e's stated target — and holds it there
     for all taller/zoomed-out viewports instead of overshooting to 381px (the
     "detached wall" bug: at svh ≥ 1339 the text sank to chip-y 446 while the dense
     dot body stayed at 252–450, towering above the headline). Below svh 1139 the
     clamp is unchanged, so the founder-approved 900/1080/1137 compositions (band
     74/200/240, trust band 722/902/959) reproduce byte-for-byte. Beyond 1139 the
     whole hero cluster freezes at the approved 1137 shape and the wound section
     simply flows higher into the extra room (no forced stretch, no lopsided void). */
  body.home { --ff-hero-free: clamp(0px, calc(100svh - 859px), 280px); }
  /* Share split (founder 2026-07-15, round 2 — "not visible enough; make it
     decisive"): top padding takes 0.70 of the free space (was 0.46, orig
     0.36); the reveal band drops to 0.12 and the proof-band gap to 0.10. The
     shares still sum to 1.00 with the fixed parts unchanged, so the hero
     bottom (and the title-only-in-fold invariant it carries) lands at exactly
     the same y — the free space is redistributed INSIDE the hero. Measured
     nav→chip clean-map band: ~200px at 1080svh, ~240px at 1137svh (was
     147/173) — an unmistakable map field above the topmost text pixel. At the
     859svh floor the free var is 0: nothing moves, chip clear of the nav. */
  /* Share re-split (founder 2026-07-17: "lower the hero slightly, tighten the gap
     between the trust bar and WHY LOOKUPS FAIL"). Top padding takes MORE of the free
     space (0.70 → 0.80) so the whole cluster sits lower, and the below-search gaps
     take LESS (search-modes 0.12 → 0.10, proof-band margin 0.10 → 0.06) so the trust
     band packs up under the search instead of drifting toward the fold. Shares now sum
     to 1.02 (was 1.00): at capped free (280) the hero region bottom lands ~6px lower —
     a deliberate, bounded "slightly lower" that never approaches the fold. The
     trust-band → WHY gap tightens mainly via the wound top-padding cap below. */
  body.home .hero { padding-top: calc(44px + var(--ff-hero-free) * 0.80); }
  body.home .search-modes { margin-top: calc(52px + var(--ff-hero-free) * 0.10); }
  body.home .hero-proofband {
    margin-top: calc(20px + var(--ff-hero-free) * 0.06);
    padding: calc(12px + var(--ff-hero-free) * 0.03) 0;
  }
  body.home .hero-try, body.home .source-examples { margin-top: calc(8px + var(--ff-hero-free) * 0.02); }
  /* Below the floor-exit height (svh < 859) the hero can't shrink further, so
     the wound section's top padding tracks the fold instead: full cap when
     the hero regime is active, then svh − 763px (763 = floored hero bottom
     681 + 82, keeping the h2 ~8px above the fold), floored at 40px.
     Cap 60 → 91 (founder 2026-07-17, round-3 fold ruling: "at the fold we only
     need to see Fraud learned to pass the lookup" — the trust band, the WHY
     LOOKUPS FAIL eyebrow and the h2 visible, ZERO lede pixels above the fold).
     The eyebrow+h2 stack and the lede below it are 16px apart, so the fold must
     land in that gap. At the 60 cap one lede line peeked at 1440/1920/2000;
     +31px pushes the lede top just below the fold while the h2 bottom stays
     ~4-13px above it, at all three (padding = cap when svh ≥ 823). Measured
     margins (Playwright, isolated harness): 1440 lede −5 / h2 +11, 1920 lede
     −12 / h2 +4, 2000 lede −3 / h2 +13. Cap stays < 137 so 1440 still takes the
     cap (not svh−763). The floor (40px) and svh − 763 tracking are unchanged,
     so 1280×800 stays at the 40px floor — h2 clear, lede already below fold —
     and does not move. */
  body.home .wound { padding-top: clamp(40px, calc(100svh - 763px), 91px); }
}
@media (max-width: 640px) {
  body.home .hero { padding-top: 48px; }
  body.home .hero-title { font-size: 32px; line-height: 1.12; }
  body.home .hero-sub { font-size: 16px; margin-top: 18px; }
  body.home .search-modes { margin-top: 44px; }
  .hero-map-eyebrow { font-size: 8.5px; letter-spacing: 0; margin-bottom: 14px; }
}

.search-form { max-width: 800px; margin: 0 auto; width: 100%; }

.search-input-wrap {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid transparent;
  /* Full pill — the SAME shape as the carrier-page header search (v3 app.jsx),
     so the two read as one search component and the cross-document View
     Transition morph (hero → header) stays a clean reposition/resize with no
     shape change mid-flight. */
  border-radius: 999px;
  padding: var(--s-2);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.07);
  transition: box-shadow var(--t);
  text-align: left;
  /* Named so the browser morphs this bar into the carrier-page header search
     across the hard navigation (see @view-transition below). */
  view-transition-name: ff-search;
  /* view-transition-name makes this pill a stacking context, so the suggest
     dropdown's z-index only counts INSIDE it. Later hero content that also
     forms a stacking context (the Denim badge favicon's mix-blend-mode)
     would otherwise paint over the open dropdown — lift the whole pill. */
  z-index: 60;
}

/* Name/DBA typeahead dropdown beneath the hero search — mirrors the v3 header
   search suggestion list. Positioned relative to the pill; hidden until main.js
   populates it from /suggest. The pill becomes the positioning context. */
.search-input-wrap { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  margin: 0;
  padding: var(--s-1);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--s-3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  max-height: 360px;
  overflow-y: auto;
  text-align: left;
}
.search-suggest[hidden] { display: none; }
/* Phones: reserve room below the last match so it can always scroll clear of
   the floating feedback FAB inside the dropdown's own overflow area. */
@media (max-width: 768px) {
  .search-suggest { padding-bottom: 64px; }
}
.search-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--s-2);
  cursor: pointer;
}
.search-suggest-item:hover,
.search-suggest-item.is-active { background: var(--bg-alt); }
.search-suggest-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.search-suggest-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-name .search-suggest-inactive { font-weight: 500; color: var(--text-3); }
.search-suggest-dba {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; }
.search-suggest-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  color: var(--text-2);
}
.search-suggest-loc { font-size: var(--text-xs, 0.75rem); color: var(--text-3); }
.search-suggest-empty { padding: var(--s-3); font-size: var(--text-sm); color: var(--text-3); }

/* Brand mark on the left of the search input (Google-style adornment) */
.search-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--s-3);
  padding-right: var(--s-1);
  flex-shrink: 0;
}
.search-mark svg { width: 28px; height: 28px; display: block; }

/* Input row — holds logo + type-dropdown + separator + text input */
.search-input-row {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* DOT / MC custom dropdown */
.search-type-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.search-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  padding: 6px var(--s-1) 6px var(--s-2);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.search-type-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 3px;
}
.search-type-chevron {
  width: 13px;
  height: 13px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform var(--t);
}
.search-type-btn[aria-expanded="true"] .search-type-chevron {
  transform: rotate(180deg);
}
.search-type-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  list-style: none;
  min-width: 72px;
  display: none;
  z-index: 200;
  padding: var(--s-1) 0;
  overflow: hidden;
}
.search-type-menu.is-open { display: block; }
.search-type-option {
  padding: var(--s-2) var(--s-4);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.search-type-option:hover { background: var(--bg-alt); }
.search-type-option.is-selected { color: var(--brand); }
/* Thin divider between the dropdown and the text input */
.search-sep {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  flex-shrink: 0;
  margin: 0 var(--s-3);
}

.search-input-wrap:focus-within {
  /* Keyboard focus cue: the native outline is stripped on the inner input and
     submit, so this ring is the only indication. A distinct 2px near-black ring
     (vs the resting 1px hairline) reads as focus without the over-loud red halo
     earlier versions used. */
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.10),
    0 0 0 2px var(--text);
}

.search-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: none;
  outline: none;
}
.search-input::placeholder {
  font-family: var(--font-sans);
  color: var(--text-3);
}
/* Suppress the global :focus-visible outline on the search input — the
   wrapper's focus-within border + shadow already provides the focus cue,
   so two stacked red rings look noisy. */
.search-input:focus,
.search-input:focus-visible { outline: none; }

.search-submit {
  view-transition-name: ff-search-cta;   /* pairs with .source-submit for the mode-toggle morph */
  background: var(--brand);   /* search is the hero's primary action — both modes' submit read red (matches the Source "Find carriers" btn-primary) */
  color: #fff;
  font-weight: 500;
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;       /* pill, to sit flush inside the rounded wrap */
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: background var(--t);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(130,8,28,0.28);
}
.search-submit:hover  { background: var(--brand-hover); }
.search-submit:active { background: var(--brand-active); }
/* Suppress the global :focus-visible brand-color outline on the search
   submit — the button is already painted in brand red against a white
   wrap, so an outer red ring reads as a stuck error/active state. The
   wrapper's focus-within elevation gives the user the focus cue. */
.search-submit:focus,
.search-submit:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(130,8,28,0.25),
    0 0 0 2px rgba(255, 255, 255, 0.9);
}

.hero-secondary-cta {
  margin-top: var(--s-6);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.hero-secondary-cta a {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color var(--t);
}
.hero-secondary-cta a:hover { border-color: var(--brand); }

/* Inline brand wordmark — use anywhere the word "fleetfax" appears in body copy */
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--brand);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-12) auto 0;
  padding: var(--s-3) var(--s-5);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.hero-proof-users { font-weight: 500; color: var(--text); }
.hero-proof-sep   { color: var(--text-3); }
.hero-proof-press a:not(.denim-badge) {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  transition: border-color var(--t);
}
.hero-proof-press a:not(.denim-badge):hover { border-color: var(--brand); }

/* Secondary install CTA, now between the search bar and the social proof
   pill. `align-self: center` keeps it sized to its content inside the
   column-flex hero instead of stretching to full container width. */
.hero-install-btn {
  margin-top: var(--s-12);
  align-self: center;
}

/* Sample-lookup chips beneath the hero search. Single click runs a lookup
   so cold visitors who don't have a USDOT to type can experience the product
   immediately. The sample chip is Road Scholar Transportation (USDOT 1338719)
   — a real, established mid-size carrier (~131 trucks, Northeast lanes, full
   insurance, clean verdict) chosen so the operating-area map reads as obvious
   regional lanes rather than a national smear. "I'm feeling lucky" picks a
   random member of FEELING_LUCKY_POOL in /js/main.js — a hand-vetted set of
   active, insured carriers with rich inspection/lane data and no hard blocks,
   so the random pick is always a presentable example, never a do-not-book or
   data-thin carrier. */
.search-samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.search-samples-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-right: var(--s-1);
}
.search-sample-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--s-1) var(--s-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.search-sample-chip:hover {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand);
}
.search-sample-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.search-sample-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.search-sample-chip:hover .search-sample-tag { color: var(--brand); }
/* "I'm feeling lucky" — same chip, with a shuffle glyph and a slightly muted
   resting state so the named sample reads as the primary affordance. */
.search-lucky-chip { color: var(--text-3); }
.search-lucky-icon { width: 0.85em; height: 0.85em; flex-shrink: 0; opacity: 0.8; }

/* Post-Montgomery section padding.
   - Top (s-12 = 48px): paired with the hero's 150px carve-out so the
     eyebrow + headline land at the fold and the body paragraph stays
     hidden.
   - Bottom (s-12 = 48px): tightens the seam with the gray flags
     section that follows. The base `.section` rule has 96px both
     sides, which combined with the next section's 96px top padding
     produced a 192px gray-on-white dead zone after the 94% block. */
.section-stakes { padding-top: var(--s-12); padding-bottom: var(--s-12); }

/* Match the top padding of the section immediately after the stakes
   block so the white→gray seam reads as one balanced transition
   instead of "white padding + gray empty zone + content." */
.section-stakes + .section { padding-top: var(--s-12); }

/* Press-mention link — inline favicon + bold name, NO pill (the parent
   trust strip is already a pill — don't nest pills). */
.denim-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  text-decoration: none;
  margin-left: var(--s-1);
  vertical-align: middle;
  transition: color var(--t);
}
.denim-badge img {
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
  /* Favicon ships with a white background — `multiply` makes the white
     pixels disappear into the (light grey) trust pill while keeping the
     dark logo glyph visible. */
  mix-blend-mode: multiply;
}
.denim-badge strong {
  font-weight: 600;
  color: var(--text);
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  transition: color var(--t);
}
.denim-badge:hover strong { color: var(--brand); }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
  margin: var(--s-8) auto 0;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-sm);
  transition: color var(--t);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue-icon {
  width: 16px;
  height: 16px;
  animation: scroll-cue-bounce 2s ease-in-out infinite;
}
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ─── Section heading ──────────────────────────────────── */
.section-head {
  margin: 0 auto var(--s-16);
  max-width: 720px;
  text-align: center;
}
.section-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  /* Avoid single-word orphans on the last line of multi-line titles. */
  text-wrap: balance;
}
.section-sub {
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: 1.5;
  /* Same orphan-avoidance for body copy. `pretty` is the right token for
     paragraphs — it only adjusts the last line, doesn't rebalance whole
     blocks the way `balance` does. */
  text-wrap: pretty;
}
/* Adjacent section-subs (e.g. the audit-trail section's two-paragraph
   body) need air between them — default `<p>` has no top margin here. */
.section-sub + .section-sub { margin-top: var(--s-4); }

/* Prose-heavy section header: left-aligned, slightly wider column.
   Used by sections that carry multi-paragraph body copy (audit trail,
   why-free) where centered text reads worse. Header+visual sections
   (flags, built-into) stay centered via the default .section-head. */
.section-head--prose {
  text-align: left;
  max-width: 760px;
}
.section-head--prose .section-title { text-wrap: pretty; }

/* Example flags shown in the marketing flags-showcase section.
   Reuses the .cr-flag styling from the carrier-report so the marketing
   page visually matches what the actual product output looks like. */
.example-flags {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto;
}

/* Analysis preview rows — sit beneath the flag cards and pair each
   product visualization (crash trend, common violations, inspection
   volume) with editorial commentary explaining what the chart catches.
   Chart layouts, colors, and labels mirror the actual extension panel
   output so the marketing page reads as a real product preview. */
.analysis-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  max-width: 720px;
  margin: var(--s-12) auto 0;
}
.analysis-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.analysis-row--reverse .analysis-row-chart { order: 2; }
.analysis-row--reverse .analysis-row-prose { order: 1; }
@media (max-width: 720px) {
  .analysis-rows { gap: var(--s-8); }
  .analysis-row,
  .analysis-row--reverse {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .analysis-row--reverse .analysis-row-chart,
  .analysis-row--reverse .analysis-row-prose { order: initial; }
}
.analysis-row-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s-3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.analysis-row-body {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}
.analysis-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.analysis-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.analysis-card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.analysis-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 0.6875rem;
  color: var(--text-2);
}
.analysis-legend .analysis-chip + .analysis-chip { margin-left: var(--s-2); }
.analysis-chip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 2px;
}
.analysis-legend-note {
  font-size: 0.6875rem;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.analysis-trend-pct {
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-2);
}
.analysis-trend-pct--bad { color: #dc2626; }
.analysis-card-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-2);
  font-family: var(--font-mono);
}
.analysis-card-foot--split {
  display: flex;
  justify-content: space-between;
}
.analysis-card-foot--bad { color: #dc2626; font-weight: 600; }

/* Crash trend (marketing version) — 12-bar bi-monthly histogram, mirrors
   the in-product chart (extension panel.js + PDF + carrier profile). Each
   bar = 2 months; severity-stacked from baseline up; dashed divider marks
   the 12/12 split. Below the chart, the explicit Last-12 / Prior-12
   summary lines carry the absolute counts. */
.crash-hist {
  display: block;
  width: 100%;
  height: 88px;
}
.crash-hist-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.crash-hist-row .crash-hist { flex: 1; }
.crash-hist-ylabels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.6875rem;
  color: var(--text-3);
  font-family: var(--font-mono);
  min-width: 18px;
}
.crash-hist-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-3);
  font-family: var(--font-mono);
  padding: var(--s-1) 0 var(--s-3);
}
.crash-hist-summary {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: var(--s-2);
}
.crash-hist-summary-label {
  font-weight: 600;
  color: var(--text);
}

/* Common violations — text rows with right-aligned counts */
.violations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.violations-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.violations-desc {
  color: var(--text);
  min-width: 0;
  line-height: 1.4;
}
.violations-count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  font-weight: 500;
}
.violations-count--warn { color: #b45309; }
.violations-count--bad  { color: #dc2626; }

/* Inspection histogram — 12 monthly bars with mid-window divider */
.insp-histogram {
  width: 100%;
  height: 48px;
  display: block;
}

/* ─── Browser mockup (shared with /onboarding) ──────────────────────────
   Vector recreation of a Chrome window showing a load-board page with the
   fleetfax side panel open and the right-click context menu visible. Used on
   the home page "Built into the page you're already on" section and on
   /onboarding Frame 2. Source of truth lives here; onboarding.html no longer
   duplicates these rules. The .ob-hw- prefix is preserved for git-history
   traceability against the original onboarding implementation. */

.ob-hw-browser-wrap { overflow-x: auto; width: 100%; }

.ob-hw-browser {
  width: 960px;
  background: #fff;
  border-radius: 12px;
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  position: relative;
}
.ob-hw-b-titlebar {
  background: #e8e8e8;
  border-radius: 12px 12px 0 0;
  padding: 10px 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ob-hw-traffic { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.ob-hw-tl { width: 12px; height: 12px; border-radius: 50%; }
.ob-hw-tl-r { background: #ff5f57; }
.ob-hw-tl-y { background: #febc2e; }
.ob-hw-tl-g { background: #28c840; }
.ob-hw-b-tabs { display: flex; align-items: flex-end; margin-left: 8px; flex: 1; }
.ob-hw-b-tab {
  background: #fff;
  border: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  border-radius: 8px 8px 0 0;
  padding: 7px 16px 8px;
  font-size: 12px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  position: relative;
  bottom: -1px;
}
.ob-hw-b-tab-fav { width: 14px; height: 14px; flex-shrink: 0; border-radius: 2px; overflow: hidden; }
.ob-hw-b-tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.ob-hw-b-tab-x { margin-left: 6px; color: #999; font-size: 11px; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.ob-hw-b-toolbar {
  background: #f2f2f2;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
  flex-shrink: 0;
}
.ob-hw-b-nav { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #555; font-size: 15px; flex-shrink: 0; }
.ob-hw-b-nav.ob-hw-dim { opacity: 0.4; }
.ob-hw-b-addr {
  flex: 1;
  background: #fff;
  border: 1.5px solid #bbb;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #333;
}
.ob-hw-b-addr-lock { font-size: 11px; color: #1a7f4b; flex-shrink: 0; }
.ob-hw-b-addr-url { flex: 1; color: #1a1a1a; font-size: 13px; }
.ob-hw-b-ext-row { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 2px; }
.ob-hw-b-btn { width: 30px; height: 30px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.ob-hw-b-btn:hover { background: #e0e0e0; }
.ob-hw-b-menu { color: #555; font-size: 5px; letter-spacing: 1px; font-weight: 900; }
.ob-hw-b-body { background: #fff; border-radius: 0 0 12px 12px; overflow: hidden; position: relative; flex: 1; }

.ob-hw-ff-mark { display: block; flex-shrink: 0; }

.ob-hw-sel { background: #bad7fe; border-radius: 2px; padding: 0 2px; }

/* Context menu */
.ob-hw-ctx {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2);
  width: 232px;
  overflow: hidden;
  z-index: 40;
  font-size: 13px;
  color: #202124;
  pointer-events: none;
}
.ob-hw-ctx-item { padding: 7px 16px; line-height: 1.3; }
.ob-hw-ctx-item.ob-hw-dim { color: #999; font-size: 12px; }
.ob-hw-ctx-item.ob-hw-ff {
  background: #e8f0fe;
  color: #1a73e8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.ob-hw-ctx-div { height: 1px; background: #eee; margin: 4px 0; }

@keyframes ob-hw-panel-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* FleetFax side panel */
.ob-hw-ff-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  z-index: 5;
  border-radius: 0 0 11px 0;
  animation: ob-hw-panel-in 350ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
.ob-hw-ff-panel-hdr {
  background: #0d1117;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ob-hw-ff-panel-title { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 0.06em; font-family: 'SF Mono','Menlo',monospace; }
.ob-hw-ff-panel-hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ob-hw-ff-panel-icon-btn { color: rgba(255,255,255,0.4); cursor: pointer; display: flex; align-items: center; }
.ob-hw-ff-panel-icon-btn:hover { color: rgba(255,255,255,0.8); }
.ob-hw-ff-panel-search {
  background: #0d1117;
  padding: 8px 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ob-hw-ff-panel-input {
  flex: 1;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ob-hw-ff-panel-input-val { font-size: 13px; color: #e5e7eb; font-family: 'SF Mono','Menlo',monospace; flex: 1; }
.ob-hw-ff-panel-input-arrow { color: #1a6ef5; flex-shrink: 0; }
.ob-hw-ff-panel-nav-btn { font-size: 11.5px; color: rgba(255,255,255,0.5); cursor: pointer; white-space: nowrap; }
.ob-hw-ff-panel-nav-btn:hover { color: rgba(255,255,255,0.8); }
.ob-hw-ff-result-card {
  background: #0d1117;
  padding: 12px 14px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ob-hw-ff-carrier-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 5px; letter-spacing: 0.01em; }
.ob-hw-ff-carrier-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ob-hw-ff-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: #16a34a; color: #fff; padding: 2px 7px; border-radius: 4px; }
.ob-hw-ff-active-dur { font-size: 12px; color: rgba(255,255,255,0.7); }
.ob-hw-ff-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 9px; }
.ob-hw-ff-metric { background: #1a1f2e; border: 1px solid rgba(255,255,255,0.07); border-radius: 5px; padding: 7px 8px; }
.ob-hw-ff-metric-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 4px; }
.ob-hw-ff-metric-val { font-size: 12px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.ob-hw-ff-metric-sub { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.3; }
.ob-hw-ff-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ob-hw-ff-dot-green { background: #22c55e; }
.ob-hw-ff-dot-amber { background: #f59e0b; }
.ob-hw-ff-dot-red   { background: #ef4444; }
.ob-hw-ff-inspected { font-size: 11px; color: rgba(255,255,255,0.35); display: flex; align-items: center; gap: 6px; padding: 2px 0 6px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 2px; }
.ob-hw-ff-ids { display: flex; align-items: center; gap: 5px; font-size: 11px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 7px; flex-wrap: wrap; }
.ob-hw-ff-id-lbl { color: rgba(255,255,255,0.3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.ob-hw-ff-id-val { color: #1a6ef5; font-family: 'SF Mono','Menlo',monospace; font-size: 11px; cursor: pointer; }
.ob-hw-ff-id-copy { color: rgba(255,255,255,0.2); cursor: pointer; }
.ob-hw-ff-id-op { color: rgba(255,255,255,0.5); font-size: 11px; }
.ob-hw-ff-id-sep { color: rgba(255,255,255,0.15); padding: 0 2px; }

/* Load board background */
.ob-hw-lb-page { flex: 1; background: #fafafa; display: flex; flex-direction: column; overflow: hidden; }
.ob-hw-lb-pg-head {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  border-top: 3px solid #1a4a8a;
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.ob-hw-lb-pg-logo { width: 22px; height: 22px; background: #1a4a8a; border-radius: 4px; flex-shrink: 0; }
.ob-hw-lb-pg-brand { font-size: 12.5px; font-weight: 700; color: #1a4a8a; }
.ob-hw-lb-pg-nav { display: flex; gap: 14px; margin-left: 12px; }
.ob-hw-lb-pg-nav-item { font-size: 11px; color: #6b7280; }
.ob-hw-lb-pg-nav-item.ob-hw-act { color: #1a4a8a; font-weight: 600; border-bottom: 2px solid #e89f3a; padding-bottom: 1px; }
.ob-hw-lb-pg-body { flex: 1; overflow: hidden; }
.ob-hw-lb-tbl-head {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1.4fr 1.3fr;
  gap: 10px;
  padding: 8px 18px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}
.ob-hw-lb-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1.4fr 1.3fr;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 12px;
  align-items: center;
  background: #fff;
}
.ob-hw-lb-row.ob-hw-highlight { background: #fffbeb; }
.ob-hw-lb-route { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.ob-hw-lb-arr { color: #9ca3af; font-size: 10px; }
.ob-hw-lb-price { font-weight: 700; }
.ob-hw-lb-carrier-cell { font-size: 11.5px; font-weight: 500; color: #374151; }
.ob-hw-lb-id-cell { font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 11px; color: #374151; }
.ob-hw-lb-id-cell .ob-hw-lbl { color: #9ca3af; margin-right: 2px; }
.ob-hw-lb-id-stack { display: flex; flex-direction: column; gap: 2px; }

/* Home page wrapper — scales the 960px onboarding mockup to ~720px so it
   matches the rhythm of .analysis-rows and .example-flags. CSS `zoom`
   scales both visual output and layout box, so the hardcoded context-menu
   coordinates and the load-board grid don't need to be re-tuned. The flex
   centering counteracts .ob-hw-browser-wrap's full-width default. */
.rclick-shot {
  display: flex;
  justify-content: center;
  zoom: 0.75;
}
/* Shadow tuned for the home page's light background — an ambient
   (zero-offset) blur layer wraps all four sides of the frame, plus a
   smaller downward layer for natural gravity. Onboarding's original
   heavy bottom-biased shadow is designed for the dark #0b1120 demo
   backdrop and stays intact there. */
.rclick-shot .ob-hw-browser {
  border: 1px solid var(--border);
}

/* ─── Scenario deck (Load board · Gmail · Slack) ─────────────────────
   Three-card stack showing fleetfax in each host context. Front card is
   fully visible; back two peek upward + right to read as a deck. Prev/Next
   buttons + position dots cycle the stack. Each card reuses the
   .ob-hw-browser frame + .ob-hw-ff-panel side panel — only the host scene
   inside the body changes per card. */
.scn-deck {
  margin-top: var(--s-12);
  /* Contain the back cards' horizontal peek (+28/56px) to the deck's own width
     so it can never push the page past the viewport on narrow screens. Where
     there's room (desktop) the peek is well inside the deck and stays visible;
     vertical peek is unaffected (clip is horizontal-only). */
  overflow-x: clip;
}
.scn-deck-stage {
  position: relative;
  width: 720px;            /* .rclick-shot's zoomed width — 960 * 0.75 */
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  overflow: visible;       /* back cards peek above the stage frame */
}
.scn-card {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: transform 420ms cubic-bezier(0.22, 0.95, 0.4, 1),
              opacity   420ms cubic-bezier(0.22, 0.95, 0.4, 1);
  will-change: transform, opacity;
}
.scn-card[data-pos="0"] { transform: translate3d(0, 0, 0)            scale(1);     opacity: 1;    z-index: 3; pointer-events: auto; }
.scn-card[data-pos="1"] { transform: translate3d(28px, -18px, 0)     scale(0.965); opacity: 0.55; z-index: 2; pointer-events: none; }
.scn-card[data-pos="2"] { transform: translate3d(56px, -36px, 0)     scale(0.93);  opacity: 0.32; z-index: 1; pointer-events: none; }

/* Browser frame shadows tuned for the light home-page background. The
   .ob-hw-browser default shadow (heavy dark drop + faint white inner
   ring) is designed for the dark onboarding backdrop; on white it
   renders as a wide rectangular dark halo that reads as a sharp-edged
   fill behind the rounded card. Override here for deck context only. */
.scn-card .ob-hw-browser {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 46px -10px rgba(15, 23, 42, 0.22);
}
.scn-card[data-pos="0"] .ob-hw-browser {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 28px 64px -14px rgba(15, 23, 42, 0.28);
}

.scn-deck-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}
.scn-nav {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.18);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.scn-nav svg { width: 18px; height: 18px; }
.scn-nav:hover {
  border-color: var(--border-strong);
  transform: scale(1.06);
  box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.25);
}
.scn-nav:active { transform: scale(0.98); }
.scn-nav:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Numbered + labeled tabs (replaces plain dots) */
.scn-dots {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: center;
}
.scn-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.scn-dot:hover { color: var(--text); border-color: var(--border-strong); }
.scn-dot.is-active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.scn-dot-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.scn-dot.is-active .scn-dot-num {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}
@media (max-width: 480px) {
  .scn-dot-lbl { display: none; }
  .scn-dot { padding: var(--s-2); }
}

/* Mobile: collapse the stack into a single card; arrows still cycle. */
@media (max-width: 720px) {
  .scn-deck-stage {
    width: 100%;
    height: auto;
    min-height: 380px;
  }
  .scn-card[data-pos="1"], .scn-card[data-pos="2"] {
    opacity: 0;
    pointer-events: none;
  }
}
/* On narrow phones the zoom:0.75 browser mockup (960px laid-out) is far wider
   than the viewport. Earlier this scaled to 0.5 (=480px), which still overran a
   360–430px phone's ~328–398px content box and CLIPPED the right-hand fleetfax
   panel off the card — the demo's whole point. Grade the zoom down by width so
   the entire mockup (load board + right-click menu + fleetfax panel) stays
   visible and centered, never clipped. Target: 960·zoom ≤ (viewport − 32px
   gutters) at every common phone width. */
@media (max-width: 520px) {
  .rclick-shot { zoom: 0.5; }
}
@media (max-width: 430px) {
  .rclick-shot { zoom: 0.37; } /* 355px — fits 412/414/428/430 content boxes */
}
@media (max-width: 392px) {
  .rclick-shot { zoom: 0.34; } /* 326px — fits down to 360px (content box ≈328px) */
}
@media (max-width: 345px) {
  .rclick-shot { zoom: 0.3; } /* 288px — covers 320px (old iPhone SE/5) */
}
/* Mobile: the extension page's load-board scene is a desktop-browser mockup
   demonstrating a right-click — a desktop-only interaction that can't read well
   shrunk onto a phone (and the extension can't even install on a mobile
   browser). Hide it on mobile; the heading + blurb carry the section and the
   install CTA follows. Scoped to .scn-deck--single so the multi-scene decks on
   other pages keep their (now-fitted) mockups. Founder call 2026-06-25. */
@media (max-width: 720px) {
  .scn-deck--single { display: none; }
}

/* ── Skeleton placeholders (Gmail/Slack scene loose-content stubs) ── */
.scn-card .scn-skel,
.scn-card .scn-skel-circle {
  background: #e5e7eb;
  display: inline-block;
  flex-shrink: 0;
}
.scn-card .scn-skel        { border-radius: 4px; }
.scn-card .scn-skel-circle { border-radius: 50%; }

/* ── Gmail scene (data-scn="gmail") ──────────────────────────────── */
.scn-card .scn-gm {
  flex: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.scn-card .scn-gm-list {
  border-right: 1px solid #e5e7eb;
  background: #fff;
  overflow: hidden;
}
.scn-card .scn-gm-item {
  padding: 9px 12px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  gap: 8px;
  align-items: center;
}
.scn-card .scn-gm-item.is-selected { background: #ebf3fe; }
.scn-card .scn-gm-item.unread .scn-gm-from { font-weight: 600; color: #111827; }
.scn-card .scn-gm-meta { flex: 1; min-width: 0; }
.scn-card .scn-gm-from { font-size: 11px; color: #111827; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-card .scn-gm-subject { font-size: 10.5px; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-card .scn-gm-preview { font-size: 10px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-card .scn-gm-time { font-size: 9.5px; color: #6b7280; white-space: nowrap; }

.scn-card .scn-gm-thread {
  padding: 18px 22px;
  background: #fff;
  overflow: hidden;
}
.scn-card .scn-gm-thread h2 {
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 14px;
  color: #111827;
  letter-spacing: -0.01em;
}
.scn-card .scn-gm-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 14px;
}
.scn-card .scn-gm-sender-name { font-size: 12px; font-weight: 600; color: #111827; }
.scn-card .scn-gm-sender-email { font-size: 10.5px; color: #6b7280; }
.scn-card .scn-gm-body { font-size: 11.5px; line-height: 1.55; color: #202124; }
.scn-card .scn-gm-body p { margin: 0 0 10px; }
.scn-card .scn-gm-sig {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.6;
}
.scn-card .scn-gm-sig .scn-name { color: #111827; font-weight: 600; font-size: 11.5px; }
.scn-card .scn-gm-sig .scn-company { color: #111827; font-weight: 500; }
.scn-card .scn-gm-sig .scn-ids {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: #111827;
}

/* ── Slack scene (data-scn="slack") ──────────────────────────────── */
.scn-card .scn-sl {
  flex: 1;
  display: grid;
  grid-template-columns: 180px 1fr;
  background: #ffffff;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
}
.scn-card .scn-sl-channels {
  background: #f8f8f8;
  border-right: 1px solid #e5e7eb;
  padding: 12px 0;
  overflow: hidden;
}
.scn-card .scn-sl-section {
  padding: 5px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6b7280;
  margin-top: 6px;
  font-weight: 600;
}
.scn-card .scn-sl-channel {
  padding: 4px 14px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}
.scn-card .scn-sl-channel.is-active { background: #1264a3; color: #fff; font-weight: 600; }
.scn-card .scn-sl-channel .scn-hash { opacity: 0.7; }

.scn-card .scn-sl-thread { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.scn-card .scn-sl-thread-header {
  padding: 10px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  flex-shrink: 0;
}
.scn-card .scn-sl-thread-header .scn-hash { color: #6b7280; font-weight: 500; }
.scn-card .scn-sl-msgs { flex: 1; padding: 12px 20px; overflow: hidden; }
.scn-card .scn-sl-msg { display: flex; gap: 10px; padding: 5px 0; }
.scn-card .scn-sl-msg-body { flex: 1; min-width: 0; }
.scn-card .scn-sl-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.scn-card .scn-sl-msg-name { font-weight: 700; font-size: 12px; color: #111827; }
.scn-card .scn-sl-msg-time { font-size: 10px; color: #6b7280; }
.scn-card .scn-sl-msg-text { font-size: 11.5px; color: #1d1c1d; line-height: 1.45; }
.scn-card .scn-sl-mention {
  color: #1264a3;
  background: #e8f5fa;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}
.scn-card .scn-sl-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: #f1f1f1;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  border: 1px solid #e5e7eb;
}
.scn-card .scn-sl-day-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  font-size: 11px;
  color: #6b7280;
}
.scn-card .scn-sl-day-divider::before,
.scn-card .scn-sl-day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.scn-card .scn-sl-composer {
  border-top: 1px solid #e5e7eb;
  padding: 10px 20px;
  background: #fff;
  flex-shrink: 0;
}
.scn-card .scn-sl-composer-box {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: #9ca3af;
}

/* ─── Share + PDF mockup ─────────────────────────────────
   Mirrors the affordance of the carrier-report header (file icon + meta +
   action row). Centered fixed-width card so the visual reads as a discrete
   artifact, not a page-wide UI band. */
.share-mockup {
  max-width: 480px;
  margin: 0 auto;
}
.share-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  padding: var(--s-5);
}
.share-card-doc {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-4);
}
.share-card-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.share-card-doc-icon svg { width: 22px; height: 22px; }
.share-card-doc-meta { flex: 1; min-width: 0; }
.share-card-doc-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-card-doc-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
}
.share-card-actions {
  display: flex;
  gap: var(--s-3);
}
.share-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}
.share-action-primary {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.share-action-primary:hover { background: #a30d24; }
.share-action svg { flex-shrink: 0; }

/* ─── PDF page deck (audit-trail section) ───────────────
   Five faux "paper" cards stacked in a single stage. The active page
   sits centered front; pages at offset ±1, ±2 fan out behind to either
   side, communicating the multi-page document. Navigation via arrow
   buttons (left/right), numbered tabs (1–5), keyboard arrows, or
   clicking any visible back-page. JS lives at the bottom of body.

   Numbers and chart shapes mirror a real export so the visual reads
   as the actual artifact; identifying fields are redacted with
   .pdf-redact blocks. Aspect ratio matches US Letter (8.5×11). */
.pdf-deck {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  outline: none;
}
.pdf-deck-stage {
  position: relative;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Clip the fanned back-pages to the deck at ALL widths (was mobile-only), so
     the ±154px ghost pages never bleed past the deck / off-screen on narrower
     desktops. overflow-clip-margin keeps the active page's drop shadow visible.
     The prev/next arrows live on .pdf-deck (outside the stage) so they're free. */
  overflow-x: clip;
  overflow-clip-margin: 32px;
}
@media (max-width: 768px) {
  /* The fanned background pages translate ±154px and overflow a phone viewport
     (pushing document width past the screen → horizontal scroll). Clip the stage
     horizontally; the active page is centered and stays fully visible, and the
     nav arrows live on .pdf-deck (outside the stage) so they're untouched. */
  .pdf-deck-stage { height: 520px; overflow-x: clip; }
}

.pdf-page {
  position: absolute;
  width: 460px;
  max-width: 92%;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 18px 46px -10px rgba(15, 23, 42, 0.22);
  font-family: var(--font-sans);
  color: #0a0a0a;
  /* US-Letter-ish: 8.5×11 ≈ 0.773 */
  aspect-ratio: 0.773;
  overflow: hidden;
  transition:
    transform 480ms cubic-bezier(.2,.7,.2,1),
    opacity   320ms ease,
    box-shadow 320ms ease;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@media (max-width: 768px) {
  .pdf-page { width: 360px; }
}

/* Stacking offsets — JS sets data-offset on each page based on its
   distance from the active index. Forward offsets fan right; negative
   offsets mirror to the left. */
.pdf-page[data-offset="0"] {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  z-index: 10;
  cursor: default;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 28px 64px -14px rgba(15, 23, 42, 0.28);
}
.pdf-page[data-offset="1"]  { transform: translate( 38px, 12px) rotate( 1.8deg) scale(0.97); opacity: 0.62; z-index: 9; cursor: pointer; }
.pdf-page[data-offset="2"]  { transform: translate( 66px, 22px) rotate( 3.0deg) scale(0.94); opacity: 0.34; z-index: 8; cursor: pointer; }
.pdf-page[data-offset="3"]  { transform: translate( 90px, 30px) rotate( 4.0deg) scale(0.91); opacity: 0.16; z-index: 7; cursor: pointer; }
.pdf-page[data-offset="4"]  { transform: translate(110px, 38px) rotate( 4.8deg) scale(0.88); opacity: 0.08; z-index: 6; cursor: pointer; }
.pdf-page[data-offset="-1"] { transform: translate(-38px, 12px) rotate(-1.8deg) scale(0.97); opacity: 0.62; z-index: 9; cursor: pointer; }
.pdf-page[data-offset="-2"] { transform: translate(-66px, 22px) rotate(-3.0deg) scale(0.94); opacity: 0.34; z-index: 8; cursor: pointer; }
.pdf-page[data-offset="-3"] { transform: translate(-90px, 30px) rotate(-4.0deg) scale(0.91); opacity: 0.16; z-index: 7; cursor: pointer; }
.pdf-page[data-offset="-4"] { transform: translate(-110px, 38px) rotate(-4.8deg) scale(0.88); opacity: 0.08; z-index: 6; cursor: pointer; }

/* Faint hover lift on adjacent back pages */
.pdf-page[data-offset="1"]:hover,
.pdf-page[data-offset="-1"]:hover { opacity: 0.85; }
.pdf-page[data-offset="2"]:hover,
.pdf-page[data-offset="-2"]:hover { opacity: 0.55; }

/* Prev/next buttons — floating, circular */
.pdf-deck-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t), background var(--t);
}
.pdf-deck-nav:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.30); }
.pdf-deck-nav:active { transform: translateY(-50%) scale(0.98); }
.pdf-deck-nav:disabled { opacity: 0.30; cursor: not-allowed; box-shadow: none; }
.pdf-deck-nav:disabled:hover { transform: translateY(-50%); }
.pdf-deck-nav--prev { left: -12px; }
.pdf-deck-nav--next { right: -12px; }
@media (max-width: 768px) {
  .pdf-deck-nav--prev { left: 4px; }
  .pdf-deck-nav--next { right: 4px; }
}

/* Numbered tabs */
.pdf-deck-tabs {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  flex-wrap: wrap;
}
.pdf-deck-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pdf-deck-tab:hover { color: var(--text); border-color: var(--border-strong); }
.pdf-deck-tab[aria-selected="true"] {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.pdf-deck-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.pdf-deck-tab[aria-selected="true"] .pdf-deck-tab-num {
  background: #fff;
  color: var(--text);
  border-color: #fff;
}
@media (max-width: 480px) {
  .pdf-deck-tab-lbl { display: none; }
  .pdf-deck-tab { padding: var(--s-2); }
}
.pdf-page-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 18px 10px;
}

/* Header strip — logo block + report-generated stamp */
.pdf-page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.pdf-page-brand {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdf-page-mark { width: 22px; height: 22px; flex: 0 0 22px; }
.pdf-page-brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.pdf-page-brand-sub {
  font-size: 11px;
  color: #525252;
  margin-left: 2px;
  font-weight: 500;
}
.pdf-page-stamp {
  text-align: right;
  font-size: 8px;
  line-height: 1.35;
  color: #525252;
}
.pdf-stamp-lbl {
  display: block;
  color: #757a80;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pdf-page-top--mini {
  font-size: 9px;
  color: #525252;
}
.pdf-mini-brand {
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 700;
}
.pdf-mini-id { color: #525252; }

.pdf-rule {
  border: 0;
  border-top: 1px solid #d4d4d4;
  margin: 10px 0 8px;
}
.pdf-rule--thin { margin: 6px 0; border-top-color: #e5e5e5; }

/* Cover-block name + subtitle */
.pdf-cover-name { margin-bottom: 10px; }
.pdf-cover-h1 {
  display: flex;
  align-items: center;
  height: 22px;
  margin-bottom: 4px;
}
.pdf-cover-meta {
  font-size: 9px;
  color: #525252;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pdf-cover-live {
  font-size: 8.5px;
  color: #757a80;
  margin-top: 2px;
}
.pdf-link { color: var(--brand); }

/* Status chips — 4 across */
.pdf-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 8px 0 10px;
}
.pdf-chip {
  padding: 5px 6px;
  border: 1px solid #d1fae5;
  background: #f0fdf4;
  border-radius: 3px;
  min-width: 0;
}
.pdf-chip-lbl {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 1px;
}
.pdf-chip-val {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  line-height: 1.1;
}
.pdf-chip-sub {
  font-size: 6px;
  color: #6b7280;
  line-height: 1.25;
  margin-top: 2px;
  /* clamp to two lines — chip widths get narrow at small viewports */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sections (RISK FLAGS, AUTHORITY, CONTACT, INSPECTIONS, etc.) */
.pdf-section { margin-bottom: 6px; }
.pdf-section-title {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.pdf-section-count { color: #525252; font-weight: 600; }

/* Risk flag row */
.pdf-flag {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0 4px 6px;
  border-left: 2px solid #f59e0b;
  margin-bottom: 3px;
}
.pdf-flag-tag {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b45309;
  background: #fef3c7;
  padding: 1px 4px;
  border-radius: 2px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.pdf-flag-body { min-width: 0; }
.pdf-flag-title {
  font-size: 8.5px;
  font-weight: 600;
  color: #0a0a0a;
  line-height: 1.25;
}
.pdf-flag-sub {
  font-size: 7px;
  color: #525252;
  line-height: 1.25;
  margin-top: 1px;
}

/* Key/value table (Authority & Status, Contact) */
.pdf-kv {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  font-size: 8px;
  line-height: 1.4;
}
.pdf-kv dt { color: #525252; font-weight: 600; }
.pdf-kv dd { color: #0a0a0a; }
.pdf-kv--tight {
  grid-template-columns: 56px 1fr;
  font-size: 7.5px;
  row-gap: 1px;
  column-gap: 6px;
}

/* Insurance 2×2 grid on page 2 */
.pdf-ins-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.pdf-ins-block { min-width: 0; }
.pdf-ins-block-lbl {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 2px;
}

/* Metric tiles row (page 2) */
.pdf-tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pdf-tile {
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  padding: 4px 4px 3px;
  background: #fafafa;
}
.pdf-tile-num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  line-height: 1.0;
}
.pdf-tile-lbl {
  font-size: 6.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-top: 2px;
}

/* Chart heads — title + small legend/sub on right */
.pdf-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3px;
}
.pdf-chart-title {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  text-transform: uppercase;
}
.pdf-chart-sub {
  font-size: 6.5px;
  color: #6b7280;
}
.pdf-chart-legend {
  font-size: 6.5px;
  color: #525252;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdf-legend-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  margin-right: 2px;
  vertical-align: -1px;
}

/* Bar chart row — y-axis labels + svg */
.pdf-bar-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.pdf-bar-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 6px;
  color: #757a80;
  text-align: right;
  width: 16px;
  padding: 1px 0;
}
.pdf-bar-chart {
  flex: 1;
  width: 100%;
  height: 44px;
}
.pdf-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  color: #757a80;
  margin-top: 2px;
  padding-left: 20px;
}

.pdf-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 7px;
  color: #525252;
  margin-top: 4px;
}
.pdf-chart-foot--col {
  flex-direction: column;
  gap: 1px;
}
.pdf-chart-foot strong { color: #0a0a0a; font-weight: 600; }

/* Compact safety-rate table */
.pdf-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}
.pdf-rate-table thead th {
  text-align: left;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-bottom: 1px solid #d4d4d4;
  padding: 2px 0;
}
.pdf-rate-table thead th:nth-child(2),
.pdf-rate-table thead th:nth-child(3) { text-align: right; }
.pdf-rate-table tbody td {
  padding: 2px 0;
  border-bottom: 1px solid #f1f1f1;
}
.pdf-rate-table tbody td:nth-child(2),
.pdf-rate-table tbody td:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pdf-rate-table tbody tr:last-child td { border-bottom: 0; }

.pdf-green { color: #15803d; font-weight: 600; }
.pdf-amber { color: #b45309; font-weight: 600; }
.pdf-red   { color: #b91c1c; font-weight: 600; }

/* Page footer */
.pdf-page-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #e5e5e5;
  font-size: 6.5px;
  color: #757a80;
}
.pdf-page-foot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  font-size: 9px;
}
.pdf-page-foot-meta { flex: 1; }
.pdf-page-foot-qr {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Redaction block — used for any PII (name, DOT/MC, address, contact) */
.pdf-redact {
  display: inline-block;
  height: 0.85em;
  background: linear-gradient(180deg, #c4c4c4 0%, #b0b0b0 100%);
  border-radius: 1.5px;
  vertical-align: -1px;
  position: relative;
}
/* Subtle scan-line texture to make the redaction read as "covered" not "loading" */
.pdf-redact::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.06) 0 2px,
    transparent 2px 4px
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Safety rating row (page 2) */
.pdf-rating-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
}
.pdf-rating-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #15803d;
  display: inline-block;
}
.pdf-rating-meta { color: #525252; }
.pdf-rating-sub {
  font-size: 7px;
  color: #6b7280;
  margin-top: 2px;
}

/* Source-attribution note under the safety-rate table */
.pdf-source-note {
  font-size: 6.5px;
  color: #757a80;
  font-style: italic;
  margin-top: 3px;
  line-height: 1.35;
}

/* Violation breakdown / common violations tables (page 3) */
.pdf-vb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.5px;
  table-layout: fixed;
}
.pdf-vb-table thead th {
  text-align: left;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-bottom: 1px solid #d4d4d4;
  padding: 2px 0;
}
.pdf-vb-table tbody td {
  padding: 2px 4px 2px 0;
  border-bottom: 1px solid #f1f1f1;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-vb-table tbody td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 110px;
}
.pdf-vb-table tbody td:nth-child(3) {
  color: #6b7280;
  width: 145px;
  text-align: right;
}
.pdf-vb-table--narrow tbody td:nth-child(2) { width: 80px; }
.pdf-vb-table tbody tr:last-child td { border-bottom: 0; }
.pdf-clean-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  color: #525252;
  margin-top: 4px;
}
.pdf-clean-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #15803d;
  display: inline-block;
}

/* Fleet ownership table (page 4) */
.pdf-fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8px;
}
.pdf-fleet-table thead th {
  text-align: right;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-bottom: 1px solid #d4d4d4;
  padding: 2px 0;
}
.pdf-fleet-table thead th:first-child { text-align: left; }
.pdf-fleet-table tbody td {
  padding: 2px 0;
  border-bottom: 1px solid #f1f1f1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pdf-fleet-table tbody td:first-child {
  text-align: left;
  color: #525252;
  font-weight: 600;
}
.pdf-fleet-table tbody tr:last-child td { border-bottom: 0; }

/* Authority history (date / event grid) */
.pdf-hist {
  display: grid;
  grid-template-columns: 70px 1fr;
  column-gap: 8px;
  row-gap: 1px;
  font-size: 7.5px;
  line-height: 1.35;
}
.pdf-hist dt {
  color: #525252;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.pdf-hist dd { color: #0a0a0a; }

/* Insurance history table (page 5) */
.pdf-ih-meta {
  font-size: 6.5px;
  color: #757a80;
  font-style: italic;
  margin-bottom: 3px;
}
.pdf-ih-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 7px;
  table-layout: fixed;
}
.pdf-ih-table thead th {
  text-align: left;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6b7280;
  border-bottom: 1px solid #d4d4d4;
  padding: 2px 4px 2px 0;
}
.pdf-ih-table tbody td {
  padding: 2px 4px 2px 0;
  border-bottom: 1px solid #f1f1f1;
}
.pdf-ih-table tbody tr:last-child td { border-bottom: 0; }
.pdf-ih-table thead th:last-child,
.pdf-ih-table tbody td:last-child { text-align: right; }
.pdf-ih-more {
  font-size: 6.5px;
  color: #757a80;
  font-style: italic;
  margin-top: 3px;
}

/* Disclaimer paragraphs (page 5) */
.pdf-disclaimer {
  font-size: 7px;
  color: #525252;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* ─── Feature cards (3-column) ─────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.feature-card {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.feature-card-icon {
  width: 28px;
  height: 28px;
  color: var(--brand);
  margin-bottom: var(--s-5);
}

.feature-card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}

.feature-card-body {
  color: var(--text-2);
  line-height: 1.55;
}

/* ─── Walkthrough (alternating rows) ───────────────────── */
.walkthrough-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  margin-bottom: var(--s-24);
}
.walkthrough-row:last-child { margin-bottom: 0; }
.walkthrough-row.reverse > .walkthrough-text { order: 2; }

.walkthrough-text-eyebrow {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-3);
}
.walkthrough-text-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-4);
}
.walkthrough-text-body {
  color: var(--text-2);
  line-height: 1.6;
}
.walkthrough-text-body p + p { margin-top: var(--s-3); }

.walkthrough-screenshot {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

/* ─── Promise block ────────────────────────────────────── */
.promise {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.promise-eyebrow {
  /* Doubles as the section's heading now that the .promise-title H2 has
     been dropped. Bigger + bolder than a standard eyebrow so it carries
     the section on its own. */
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 var(--s-6);
}
.promise-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: var(--s-6);
}
.promise-body {
  font-size: var(--text-lg);
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.promise-body p + p { margin-top: var(--s-4); }

/* Prose-heavy why-free: left-aligned + darker body color so it reads at
   the same visual weight as the post-Montgomery stakes-body, instead of
   feeling lighter/smaller via the muted gray default. */
.promise--prose {
  text-align: left;
}
.promise--prose .promise-body { color: var(--text); }

/* ─── Final CTA ────────────────────────────────────────── */
.final-cta {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  /* No border-bottom: this band is always the last section before the footer,
     and the footer's own border-top closes it. A bottom border here stacked
     exactly onto the footer's top border — the "double line" (founder 2026-07-03,
     found via a full-width stacked-border scan). */
}
.final-cta-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  /* Balanced gap to the search bar below. */
  margin-bottom: var(--s-8);
}
/* Lightweight footer search pill (a second, minimal search bar — NOT the hero
   ff-search). Wired in main.js to the same parse + navigate flow. */
.mini-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--s-2);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.mini-search-mark { display: flex; flex: none; padding-left: var(--s-2); }
.mini-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  color: var(--text);
  padding: var(--s-2) 0;
  outline: none;
}
.mini-search-input::placeholder { color: var(--muted); }
.mini-search-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: var(--s-2) var(--s-5);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background var(--t);
}
.mini-search-btn:hover { background: #a30d24; }
.final-cta-sub {
  font-size: var(--text-lg);
  color: var(--text-2);
  /* Even rhythm: equal space above and below the button (matches title→sub). */
  margin-bottom: var(--s-6);
}
.final-cta-fine {
  font-size: var(--text-sm);
  color: var(--text);
  margin-top: var(--s-6);
}
/* Secondary CTA below the install button on /about — gives readers who
   aren't ready to install a path back into the search flow. */
.final-cta-secondary {
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--s-3);
}
.final-cta-secondary a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.final-cta-secondary a:hover { text-decoration: underline; }

/* ─── Footer ───────────────────────────────────────────── */
/* Footer — one canonical, columned footer across every page (design system). */
.footer {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--text-sm);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-10);
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.footer-brand-mark { width: 22px; height: 22px; flex-shrink: 0; }
.footer-brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-tagline { font-size: 13.5px; color: var(--text-2); margin: 12px 0 0; max-width: 260px; line-height: 1.55; }
/* The copyright rides the brand column's dead space (the link columns set the
   footer's height anyway) -- the old full-width .footer-bottom row + divider
   cost ~80px for one short line (founder 2026-07-09: "ginormous"). */
.footer-copy { font-size: 12.5px; color: var(--text-3); margin: 14px 0 0; }
.footer-cols { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 132px; }
.footer-col-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.footer-col a { color: var(--text-2); font-size: 14px; transition: color var(--t); text-decoration: none; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3);
}
/* Keep every column's last item clear of the bottom divider even though the
   Learn column runs one row longer (FAQ) — founder flagged FAQ sitting too close. */
.footer-col { padding-bottom: 6px; }
@media (max-width: 640px) {
  .footer-top { flex-direction: column; gap: var(--s-6); }
  .footer-cols { gap: var(--s-8); }
  /* Tap targets: footer links are 21px tall — thumb-sized them to a >=40px hit
     area with vertical padding (block box fills the column, so the whole row
     taps), text size unchanged. gap collapses to 0 since the padding now carries
     the inter-link spacing (grows from 10px to ~20px between text baselines). */
  .footer-col { gap: 0; }
  .footer-col a { display: block; padding: 10px 0; }
}
/* legacy single-row footer-inner/links kept as a no-op alias so any unconverted
   markup still lays out; the columned markup above is canonical. */
.footer-inner { display: block; }
.footer-links { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.footer-links a { color: var(--text-2); transition: color var(--t); }
.footer-links a:hover { color: var(--text); }

/* ─── Nav search command palette ───────────────────────────────
   Opened by the nav search pill or the "/" key (js/nav.js). Makes the pill's
   "/" hint truthful and gives a real ⌘K-style search box instead of a link to
   home (founder 2026-07-03). */
.ffck-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(16, 17, 20, 0.14);
  opacity: 0; transition: opacity 0.12s ease;
}
.ffck-backdrop.is-open { opacity: 1; }
/* Centered under the nav, dropping from the top (js/nav.js sets top/left/width). */
.ffck-modal {
  position: fixed; width: 560px; max-width: calc(100vw - 24px);
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 48px -14px rgba(10, 10, 12, 0.40);
  /* overflow visible so the type-selector menu can drop past the (short) empty
     state without being clipped; children round-corner via their own radii. */
  overflow: visible; transform-origin: top center;
  transform: translateY(-6px) scale(0.985); opacity: 0;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
.ffck-backdrop.is-open .ffck-modal { transform: translateY(0) scale(1); opacity: 1; }
.ffck-inputrow { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
/* Subtle NEUTRAL focus cue — the old red :focus-visible glow looked bad
   (founder 2026-07-08). The input itself gets no outline; the row's hairline
   just firms up when focused. */
.ffck-inputrow:focus-within { border-bottom-color: var(--border-strong); }
.ffck-inputrow svg { color: var(--text-3); flex: 0 0 auto; }
.ffck-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.ffck-input:focus, .ffck-input:focus-visible { outline: none; box-shadow: none; }
.ffck-input::placeholder { color: var(--text-3); }

/* Type selector inside the palette — same auto/DOT/MC/name/phone/email choices
   as the hero search, driven by the shared brain (js/search-core.js). */
.ffck-type { position: relative; flex: 0 0 auto; }
.ffck-type-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 27px; padding: 0 6px 0 9px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--bg-alt); cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--text-2); line-height: 1;
  transition: border-color var(--t), color var(--t);
}
.ffck-type-btn:hover { border-color: var(--border-strong); color: var(--text); }
.ffck-type-label.is-neutral { color: var(--muted); }
.ffck-type-chev { width: 13px; height: 13px; color: var(--text-3); transition: transform 0.12s ease; }
.ffck-type-btn[aria-expanded="true"] .ffck-type-chev { transform: rotate(180deg); }
.ffck-type-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 10;
  min-width: 138px; margin: 0; padding: 5px; list-style: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(10, 10, 12, 0.32);
}
.ffck-type-menu[hidden] { display: none; }
.ffck-type-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.ffck-type-opt:hover { background: var(--bg-alt); color: var(--text); }
.ffck-type-opt.is-selected { color: var(--text); font-weight: 600; }
.ffck-type-opt.is-selected::after { content: "✓"; font-size: 11px; color: var(--brand); }
.ffck-sep { width: 1px; height: 20px; background: var(--border); flex: 0 0 auto; }
.ffck-esc { font: 500 11px var(--font-mono); color: var(--text-3); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.ffck-results { max-height: 46vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
.ffck-item { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.ffck-item.is-active, .ffck-item:hover { background: var(--bg-alt); }
.ffck-name { font-weight: 600; font-size: 14.5px; color: var(--text); }
.ffck-dba { font-size: 12.5px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.ffck-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; font-family: var(--font-mono); flex: 0 0 auto; }
.ffck-hintrow { padding: 15px 16px; margin: 0; list-style: none; color: var(--text-3); font-size: 13px; }
.ffck-hint { padding: 9px 16px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-3); display: flex; gap: 16px; }
.ffck-hint kbd { font: 500 10.5px var(--font-mono); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-2); margin-right: 4px; }
@media (max-width: 640px) { .ffck-backdrop { padding: 8vh 12px 12px; } }

/* ─── Feedback button (floating, frosted glass) ───────── */
.feedback-button {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: var(--z-feedback);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  padding: var(--s-3) var(--s-5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), opacity var(--t), transform var(--t);
}
/* Phones: the pill floats over body text, so shrink it to icon-only; the
   carrier app additionally toggles .fb-hide while the reader scrolls down. */
@media (max-width: 640px) {
  .feedback-button span { display: none; }
  .feedback-button { padding: var(--s-3); }
  .feedback-button.fb-hide { opacity: 0; transform: translateY(10px); pointer-events: none; }
}
/* Phones ≤480px: a fixed bottom-right FAB inevitably covers content there (the
   FAQ chevrons, pricing card copy, the about $0 stat all collide with it), and
   shrinking it only moves the collision. Drop the launcher entirely below 480px;
   desktop and tablet keep it. */
@media (max-width: 480px) {
  .feedback-button { display: none; }
  .feedback-panel { display: none !important; }
}
/* Phones: the FAB (fixed bottom-right) overlaps tappable rows in the vet
   suggestion dropdown and the source-results teaser. While either is OPEN, fade
   the FAB out (it restores on close). main.js owns the button's own open/scroll
   behavior — this is a pure-CSS state reaction via :has(), so desktop and the
   existing .fb-hide scroll toggle are untouched. Reuses the button's opacity +
   transform transition. */
@media (max-width: 768px) {
  body:has(.search-suggest:not([hidden])) .feedback-button,
  body:has(.source-teaser.is-open) .feedback-button {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
  }
}
.feedback-button:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(200, 16, 46, 0.35);
  color: var(--brand);
  box-shadow:
    0 6px 22px rgba(200, 16, 46, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.feedback-button svg { color: var(--brand); }

.feedback-panel {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  z-index: var(--z-feedback);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  width: 360px;
  max-width: calc(100vw - 2 * var(--s-6));
  padding: var(--s-5);
  display: none;
}
.feedback-panel.open { display: block; }

.feedback-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
}
/* Brand lockup in the panel header — mirrors the nav wordmark so the panel
   reads as fleetfax, not a generic widget. */
.feedback-brand { display: inline-flex; align-items: center; gap: var(--s-2); }
.feedback-brand-mark { width: 24px; height: 24px; flex-shrink: 0; }
.feedback-brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--brand);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.feedback-brand-beta {
  margin-left: -0.15rem;
  align-self: center;
  transform: translateY(2px);    /* bottom-align: rest the pill on the wordmark baseline (matches the nav badge) */
  font-family: var(--font-mono);
  font-size: 0.5625rem;          /* 9px */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
}
.feedback-close {
  color: var(--text-3);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.feedback-close:hover { color: var(--text); }

.feedback-form { display: flex; flex-direction: column; gap: var(--s-3); }
.feedback-textarea,
.feedback-email {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--t);
}
.feedback-textarea {
  min-height: 120px;
  max-height: 240px;
  resize: vertical;
  line-height: 1.5;
}
.feedback-textarea:focus,
.feedback-email:focus { border-color: var(--brand); }

.feedback-submit { align-self: stretch; width: 100%; }

.feedback-status {
  font-size: var(--text-sm);
  color: var(--text-2);
  min-height: 1.25em;
}
.feedback-status.error   { color: var(--brand); }
.feedback-status.success { color: var(--success-text); }
/* When empty, don't reserve a row — otherwise the leftover gap below the chips
   makes the panel's bottom padding read larger than the top. */
.feedback-status:empty { display: none; }

/* ─── Beta v1: type chips ───────────────────────────────── */
.feedback-prompt {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  color: var(--text);
}
/* Even 2×2 grid — four equal pills read as one clear choice set, no awkward
   3-then-1 wrap. */
.feedback-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.feedback-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.feedback-chip-emoji { font-size: 1.05em; line-height: 1; }
.feedback-chip:hover { border-color: var(--brand-border); background: var(--brand-tint); }
.feedback-chip.active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--brand);
}
.feedback-detail { display: flex; flex-direction: column; gap: var(--s-3); }
/* The class display rule outranks the UA [hidden] rule — restore it so the
   detail block stays collapsed until a chip is picked. */
.feedback-detail[hidden] { display: none; }

/* ─── Beta v1: nav badge ────────────────────────────────── */
.nav-brand-group { display: flex; align-items: center; gap: var(--s-3); }
.nav-beta-badge {
  margin-left: -0.4rem;           /* tuck close to the wordmark */
  align-self: center;
  transform: translateY(2px);     /* bottom-align: rest the pill on the wordmark baseline */
  font-family: var(--font-mono);
  font-size: 0.5625rem;           /* 9px */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
}
/* Label version (non-homepage pages): clicks fall through to the home link. */
span.nav-beta-badge { pointer-events: none; }
/* Button version (homepage): clicking it (re)opens the welcome card. */
button.nav-beta-badge {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--t), border-color var(--t);
}
button.nav-beta-badge:hover { color: var(--brand); border-color: var(--brand-border); }
button.nav-beta-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* One-time hint: pulse the badge after the user first dismisses the card, so
   they learn the card lives here now. (main.js adds/removes .pulse.) */
@keyframes ff-badge-pulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(200, 16, 46, 0); }
  45%      { box-shadow: 0 3px 16px rgba(200, 16, 46, 0.30); }
}
button.nav-beta-badge.pulse {
  /* Soft diffuse glow — like the Feedback button's hover shadow, a touch more.
     No ring, no color swap; just a gentle bloom that breathes twice. */
  animation: ff-badge-pulse 1.3s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  button.nav-beta-badge.pulse { animation: none; }
}

/* ─── Carrier report (inline lookup result) ─────────────── */

.carrier-report {
  padding: var(--s-12) 0 var(--s-24);
  background: var(--bg);
  border-top: 1px solid var(--border);
  /* Offset the sticky nav (64px) + breathing room when scrollIntoView lands here */
  scroll-margin-top: 80px;
}

/* Match the search bar's max-width so the report visually
   "lives inside" the search column instead of sprawling. */
[data-cr-content] {
  max-width: 800px;
  margin: 0 auto;
}

/* Loading / empty / error states */
.cr-state {
  text-align: center;
  padding: var(--s-16) 0;
}
/* Round spinner — still used by the v3 app's per-section FeatureLoading
   (web/v3/components/ui.jsx, safety.jsx, tabs.jsx). main.js's own carrier
   loading now uses the .cr-skel skeleton below, but this class must stay. */
.cr-loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: cr-spin 0.8s linear infinite;
  margin-bottom: var(--s-4);
}
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ─── Loading skeleton ───────────────────────────────────
   Shaped like the v3 report (web/v3): hero card (name + id chips, freshness +
   share, verdict banner, three info zones) → tab strip → the Overview's
   two-column card grid — so the wait previews the destination instead of a
   spinner in a void. Shimmer freezes static under prefers-reduced-motion
   (global rule). The same markup exists in THREE places: the boot frame in
   web/v3/index.html (the carrier page's first paint), stateLoading in
   web/js/main.js, and this stylesheet's class set — keep them in sync. */
/* Optimistic header: spinning fleetfax logo + the known identifier as REAL text
   (not a skeleton bar), so the wait is personalized from frame one. role=status
   (set in markup) announces the id + sub-line; placeholders + source list are
   aria-hidden. */
.cr-load-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.cr-load-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-load-id {
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cr-load-sub { font-size: var(--text-sm); color: var(--text-3); }

/* The loading indicator is the spinning fleetfax mark (solid brand circle +
   white check), not a generic ring — on-brand, and the check makes the spin
   read clearly. ~1.1s/rev linear: steady and calm, Apple-indicator pacing. */
.cr-skel-logo {
  width: 26px;
  height: 26px;
  flex: none;
  animation: cr-spin 1.1s linear infinite;
}
.cr-skel-logo svg { display: block; width: 100%; height: 100%; }

/* Source checklist — v3 only (on the homepage a sequenced list would visibly
   restart across the hard navigation to /carrier). Shows the genuine SCOPE of
   what fleetfax pulls; items reveal in sequence (paced), then "Assembling
   report…" pulses until the real data swaps in. It never claims all-done before
   completion — the swap is the true completion gate. */
.cr-load-sources {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}
.cr-load-source {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  color: var(--text-3);
  opacity: 0;
  animation: cr-src-reveal 0.4s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.22s);
}
.cr-src-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #fff;
  animation: cr-src-fill 0.3s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.22s + 0.16s);
}
.cr-src-dot svg {
  width: 9px;
  height: 9px;
  opacity: 0;
  animation: cr-src-check 0.2s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.22s + 0.22s);
}
@keyframes cr-src-reveal { to { opacity: 1; } }
@keyframes cr-src-fill { to { background: var(--brand); border-color: var(--brand); } }
@keyframes cr-src-check { to { opacity: 1; } }
.cr-load-assemble {
  opacity: 0;
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--s-5);
  animation: cr-src-reveal 0.4s ease 1.3s forwards, cr-pulse 1.5s ease-in-out 1.7s infinite;
}
@keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Skeleton placeholders are solid light-red. A SINGLE diagonal sheen (the
   ::after on .cr-skel) sweeps across the whole panel top-left→bottom-right as
   one wave: invisible over the white gaps, a highlight over the red shapes. One
   moving element, so the wave is genuinely unified — not 15 cells pulsing in
   lockstep. Freezes static under prefers-reduced-motion (global rule). */
/* #ff-ssr is the no-JS / crawler carrier summary the Worker injects below the
   loading skeleton (web/v3/index.html). It must stay in the raw HTML and visible
   to crawlers, but JS visitors should NOT see it during the app.js load window —
   otherwise the skeleton renders with the raw SSR text stacked beneath it (the
   broken look on slow connections / poor-connectivity regions). boot.js adds
   html.js pre-paint, so this hides it only once JS is confirmed live; no-JS
   visitors keep it (and the <noscript> rule in index.html hides the skeleton for
   them so it stands alone). React removes the whole #ff-boot on hydration. */
html.js #ff-ssr { display: none; }

.cr-skel { display: flex; align-items: flex-start; gap: var(--s-5); position: relative; overflow: hidden; }
.cr-skel-bar,
.cr-skel-btn,
.cr-skel-chip,
.cr-skel-tab,
.cr-skel-badge {
  /* Neutral gray, not brand red: a full screen of red-tinted blocks reads
     "something is wrong" on a risk product before any data arrives. The
     red fleetfax mark in the boot header carries the brand alone. */
  background-color: #e9eaee;
  border-radius: var(--radius-sm);
}
.cr-skel::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translate3d(-60%, -60%, 0);
  animation: cr-wave 1.8s linear infinite;
  pointer-events: none;
}
@keyframes cr-wave {
  0%   { transform: translate3d(-60%, -60%, 0); }
  100% { transform: translate3d(60%, 60%, 0); }
}
/* Hero card — mirrors CarrierHero (web/v3/components/hero.jsx): name + id chips
   left, freshness + Share right, verdict banner, then the three info zones
   (contact / authority / insurance) under the divider. */
.cr-skel-hero {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
}
.cr-skel-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.cr-skel-name { width: 34%; min-width: 180px; height: 30px; }
.cr-skel-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); flex: none; }
.cr-skel-fresh { width: 150px; height: 11px; }
.cr-skel-btn { width: 92px; height: 30px; border-radius: 999px; }
.cr-skel-ids { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.cr-skel-chip { width: 96px; height: 15px; }
.cr-skel-chip.wide { width: 150px; height: 24px; border-radius: 999px; }
.cr-skel-verdict {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: var(--s-5);
}
.cr-skel-badge { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.cr-skel-vtext { flex: 1; }
.cr-skel-vlabel { width: 38%; height: 18px; margin-bottom: var(--s-2); }
.cr-skel-vsub { width: 62%; height: 13px; }
.cr-skel-zones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.cr-skel-zone .cr-skel-bar { height: 12px; margin-bottom: var(--s-3); }
.cr-skel-zone .cr-skel-bar:last-child { margin-bottom: 0; }
.cr-skel-zone .cr-skel-bar.title { width: 42%; height: 11px; margin-bottom: var(--s-4); }
.cr-skel-zone .cr-skel-bar.short { width: 60%; }
/* Sticky tab strip stand-in (.ftabs on the real page) */
.cr-skel-tabs {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.cr-skel-tab { height: 21px; }
.cr-skel-tab:nth-child(1) { width: 104px; }
.cr-skel-tab:nth-child(2) { width: 88px; }
.cr-skel-tab:nth-child(3) { width: 168px; }
.cr-skel-tab:nth-child(4) { width: 80px; }
.cr-skel-tab:nth-child(5) { width: 132px; }
/* Overview's 2-column card grid */
.cr-skel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.cr-skel-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
}
/* The overview leads with the full-width Authority & insurance card */
.cr-skel-card.wide { grid-column: 1 / -1; }
.cr-skel-card .cr-skel-bar { height: 13px; margin-bottom: var(--s-3); }
.cr-skel-card .cr-skel-bar:last-child { margin-bottom: 0; }
.cr-skel-card .cr-skel-title { width: 30%; height: 18px; margin-bottom: var(--s-4); }
.cr-skel-card .cr-skel-bar.short { width: 55%; }
/* Variant-B shape (app.jsx heroV "b"): main report column + persistent rail. */
.cr-skel-main { flex: 1 1 auto; min-width: 0; }
.cr-skel-rail { flex: 0 0 296px; display: flex; flex-direction: column; gap: var(--s-5); }
.cr-skel-stack { display: flex; flex-direction: column; gap: var(--s-5); }
/* Hero vitals row (authority/insurance/power/drivers/inspections/crashes). */
.cr-skel-vitals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.cr-skel-vital { display: flex; flex-direction: column; gap: var(--s-2); }
.cr-skel-vital .cr-skel-bar { height: 11px; width: 80%; }
.cr-skel-vital .cr-skel-bar:first-child { height: 18px; width: 52%; margin-bottom: var(--s-1); }
@media (max-width: 880px) {
  /* stretch (not the base flex-start): once the skeleton stacks to a column,
     flex-start cross-alignment leaves the main column content-sized (~600px) and
     clipped — stretch pins it to the viewport. */
  .cr-skel { flex-direction: column; align-items: stretch; }
  .cr-skel-rail { display: none; }
  /* minmax(0,1fr), NOT 1fr: a bare 1fr floors at the vital cells' content width,
     so the 6-vital grid forced .cr-skel-main to ~600px and the skeleton rendered
     at DESKTOP width with its right edge clipped off on a phone (founder
     2026-06-23). minmax(0,…) lets the tracks shrink to the viewport. */
  .cr-skel-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-skel-grid { grid-template-columns: 1fr; }
  .cr-skel-zones { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}
/* phones: match the real mobile report — 2-col vitals (not 3), hero row stacks. */
@media (max-width: 640px) {
  .cr-skel-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-skel-row { flex-wrap: wrap; gap: var(--s-3); }
  .cr-skel-actions { flex-direction: row; align-items: center; }
}

/* While the skeleton is up, hide the marketing chrome so the load doesn't sit
   between a half search bar and an Add-to-Chrome pitch. Cleared the instant a
   terminal report/error renders (showReport toggles body.cr-loading), so the
   post-result conversion CTA returns exactly as before. */
body.cr-loading .final-cta,
body.cr-loading .footer { display: none; }

/* Reveal the rendered content. Animation (not transition): nodes are replaced
   via innerHTML, so a transition has no from-state to fire against. Light
   stagger across the first sections so the report assembles rather than snaps. */
@keyframes cr-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cr-fade-opacity { from { opacity: 0; } to { opacity: 1; } }
[data-cr-content] > * { animation: cr-fade-in 0.24s ease-out both; }
[data-cr-content] > *:nth-child(2) { animation-delay: 0.05s; }
[data-cr-content] > *:nth-child(3) { animation-delay: 0.10s; }
[data-cr-content] > *:nth-child(4) { animation-delay: 0.15s; }
[data-cr-content] > *:nth-child(n+5) { animation-delay: 0.18s; }
/* v3 resolved content: opacity-only fade on the hero + body (siblings of the
   sticky tab strip — a transform on an ancestor would break position:sticky). */
.cr-reveal-a { animation: cr-fade-opacity 0.3s ease both; }
.cr-reveal-b { animation: cr-fade-opacity 0.3s ease 0.09s both; }

/* Search button stays visibly active during the ~250ms gate before the loader
   paints, so a cold-cache click never reads as "did that register?" */
.search-submit.is-searching {
  background: var(--brand-active);
  cursor: progress;
  animation: cr-pulse 1s ease-in-out infinite;
}

/* ─── Cross-document View Transitions ────────────────────
   Opt BOTH documents in (this file is loaded by the homepage AND the v3 carrier
   shell). Same-origin navigations (incl. the homepage→/carrier location.assign)
   then animate: the search bar — named ff-search on both pages — morphs from the
   hero into the carrier-page header, and the rest crossfades, which also
   replaces the white page-reload flash. Unsupported browsers (Safari/Firefox)
   ignore this and navigate instantly — graceful, no JS branch needed. */
@view-transition { navigation: auto; }

/* prefers-reduced-motion is NOT covered by the global `*` rule for these: the
   ::view-transition-* tree hangs off :root, not off element ::before/::after.
   Opt it out explicitly so reduced-motion users get an instant cut. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* On phones the hero search pill (full-width) and the header pill (compact) have
   wildly different geometry, so the morph tweens through a squished, broken-
   looking frame (founder 2026-06-22). Cut the animation on mobile — the page
   just swaps, no weird morph — same mechanism as reduced-motion. Desktop keeps
   the morph. */
@media (max-width: 640px) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.cr-state-text { color: var(--text-2); font-size: var(--text-base); }
.cr-state-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-3);
}
.cr-state-body {
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}
.cr-state-body p + p { margin-top: var(--s-3); }

/* Header */
.cr-header {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}
.cr-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
.cr-header-actions {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
  align-items: flex-start;
}
.cr-share-btn {
  flex-shrink: 0;
  margin-top: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.cr-share-btn:hover { color: var(--brand); border-color: var(--brand); }
.cr-share-btn.is-copied { color: var(--success-text); border-color: var(--success-text); }
.cr-share-btn[disabled] { opacity: 0.6; cursor: wait; }
.cr-name {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0;
  color: var(--text);
}
.cr-dba {
  color: var(--text-2);
  font-size: var(--text-base);
  margin-bottom: var(--s-4);
}
.cr-ids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  font-size: var(--text-sm);
}
.cr-id-label {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  font-weight: 500;
  margin-right: var(--s-2);
}
.cr-id-value {
  color: var(--text);
  font-family: var(--font-mono);
}
.cr-entity-badge {
  display: inline-block;
  margin-left: var(--s-3);
  padding: 3px var(--s-3);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  vertical-align: middle;
}
.cr-entity-badge.carrier { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.cr-entity-badge.broker  { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.cr-entity-badge.dual    { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cr-entity-badge.oos     { background: var(--brand-tint); border-color: var(--brand-border); color: var(--brand); }

/* Trust strip — 4-up grid of color-coded cards. Each card is the most
   visually dominant element after the carrier name; the tinted background
   tells the broker at a glance which dimensions need attention. */
.cr-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: var(--s-12);
}
.cr-trust-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cr-trust-item.good { background: #f0fdf4; border-color: #bbf7d0; }
.cr-trust-item.warn { background: #fffbeb; border-color: #fde68a; }
.cr-trust-item.bad  { background: var(--brand-tint); border-color: var(--brand-border); }
.cr-trust-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cr-trust-item.good .cr-trust-label { color: #15803d; }
.cr-trust-item.warn .cr-trust-label { color: #b45309; }
.cr-trust-item.bad  .cr-trust-label { color: var(--brand); }
.cr-trust-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.cr-trust-value.good { color: #15803d; }
.cr-trust-value.warn { color: #b45309; }
.cr-trust-value.bad  { color: var(--brand); }
.cr-trust-sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.4;
  overflow-wrap: break-word;
}
/* Inline info icon with CSS-driven tooltip. The native title= attribute has
   long delay + inconsistent behavior. data-tooltip drives the visible
   tooltip; aria-label drives screen-reader output. */
.cr-info-icon {
  position: relative;
  display: inline-block;
  color: var(--text-3);
  cursor: help;
  margin-left: 2px;
  padding: 0 2px;
  font-style: normal;
  font-size: 0.9em;
  vertical-align: baseline;
}
.cr-info-icon:focus { outline: none; }
.cr-info-icon[data-tooltip]:hover::after,
.cr-info-icon[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.96);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Report sections */
.cr-section { margin-bottom: var(--s-12); }
.cr-section:last-child { margin-bottom: 0; }
.cr-section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-5);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--text);
}
.cr-section-count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-3);
}

/* Flags */
.cr-flags-list { display: flex; flex-direction: column; gap: var(--s-3); }
.cr-flag {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
}
.cr-flag.critical { border-color: var(--brand-border); background: var(--brand-tint); }
.cr-flag.caution  { border-color: #fde68a; background: #fffbeb; }
.cr-flag.verified { border-color: #bbf7d0; background: #f0fdf4; }
.cr-flag-icon { width: 20px; height: 20px; flex-shrink: 0; }
.cr-flag.critical .cr-flag-icon { color: var(--brand); }
.cr-flag.caution  .cr-flag-icon { color: #b45309; }
.cr-flag.verified .cr-flag-icon { color: #15803d; }
.cr-flag-text { flex: 1; }
.cr-flag-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-1);
  line-height: 1.3;
}
.cr-flag-sub { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; }

/* ── Verdict-led hero (ported from the v3 redesign) ─────────────────────────
   Go/no-go "fleetfax read" above the report. Level colors reuse the cr-flag
   palette: clear=green, review=amber, stop=brand-red. */
.cr-verdict {
  margin: 0 0 var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
}
.cr-verdict.clear  { background: #f0fdf4; border-color: #bbf7d0; }
.cr-verdict.review { background: #fffbeb; border-color: #fde68a; }
.cr-verdict.stop   { background: var(--brand-tint); border-color: var(--brand-border); }
.cr-verdict-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.cr-verdict-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; color: #fff; flex-shrink: 0;
}
.cr-verdict.clear  .cr-verdict-badge { background: #22c55e; }
.cr-verdict.review .cr-verdict-badge { background: #ef9f27; }
.cr-verdict.stop   .cr-verdict-badge { background: var(--brand); }
.cr-verdict-label { font-size: var(--text-lg, 17px); font-weight: 700; letter-spacing: -0.01em; }
.cr-verdict.clear  .cr-verdict-label { color: #0f7a37; }
.cr-verdict.review .cr-verdict-label { color: #8a5e00; }  /* the single caution amber (--amber in fleetfax.css); literal here — marketing pages don't load the v3 :root token */
.cr-verdict.stop   .cr-verdict-label { color: var(--brand); }
.cr-verdict-sub { font-size: var(--text-sm); color: var(--text-2); }
.cr-verdict-tag {
  margin-left: auto; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.cr-verdict-body {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-top: var(--s-3);
}
.cr-verdict-items, .cr-verdict-passed { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cr-verdict-item {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: var(--text-sm); color: var(--text); font-weight: 500;
}
.cr-verdict.stop   .cr-verdict-item svg { color: var(--brand); }
.cr-verdict.review .cr-verdict-item svg,
.cr-verdict.clear  .cr-verdict-item svg { color: #ef9f27; }
.cr-verdict-pass { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-3); }
.cr-verdict-pass svg { color: #22c55e; flex-shrink: 0; }

/* Data-freshness line + refresh control (in the report header) */
.cr-freshness { display: flex; align-items: center; gap: 6px; margin-top: var(--s-3); font-size: 12px; color: var(--text-3); }
.cr-freshness svg { color: var(--brand); flex-shrink: 0; }
.cr-freshness-refresh { color: var(--brand); cursor: pointer; font-weight: 500; }
.cr-freshness-refresh:hover { text-decoration: underline; }
.cr-freshness-refresh.is-busy { color: var(--text-3); cursor: default; text-decoration: none; }

.cr-no-flags {
  padding: var(--s-5);
  text-align: center;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  color: #15803d;
  font-weight: 500;
}

/* Connections (Thread B graph flags — broker-facing network) */
.cr-conn-banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.cr-conn-banner svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.cr-conn-banner.warn  { background: var(--brand-tint); border-color: var(--brand-border); }
.cr-conn-banner.warn svg { color: var(--brand); }
.cr-conn-banner.info  { background: var(--bg-alt); }
.cr-conn-banner.info svg { color: var(--text-2); }
.cr-conn-banner.clean { background: #f0fdf4; border-color: #bbf7d0; }
.cr-conn-banner.clean svg { color: #15803d; }
.cr-conn-headline { font-weight: 600; color: var(--text); line-height: 1.4; }
.cr-conn-action { font-size: var(--text-sm); color: var(--text-2); margin-top: 2px; }

.cr-conn-graph {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto var(--s-6);
}
.cr-conn-svg-name { font-family: var(--font-sans); font-size: 12px; font-weight: 600; fill: var(--text); }
.cr-conn-svg-sub  { font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }

.cr-conn-list { display: flex; flex-direction: column; gap: var(--s-3); }
.cr-conn-card {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--bg);
}
.cr-conn-card.critical { border-left-color: var(--brand); background: var(--brand-tint); }
.cr-conn-card.caution  { border-left-color: #ef9f27; background: #fffbeb; }
.cr-conn-card.info     { border-left-color: var(--border-strong); }
.cr-conn-card.affiliate { border-left-color: var(--border-strong); background: var(--bg-alt); opacity: 0.92; }
.cr-conn-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.cr-conn-name { font-weight: 600; color: var(--text); text-decoration: none; }
.cr-conn-name:hover { color: var(--brand); }
.cr-conn-dot { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-3); font-weight: 400; }
.cr-conn-status {
  font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em;
}
.cr-conn-status.bad  { color: #b91c1c; background: #fef2f2; }
.cr-conn-status.warn { color: #b45309; background: #fffbeb; }
.cr-conn-status.ok   { color: #15803d; background: #f0fdf4; }
.cr-conn-tag {
  display: inline-block; margin-top: var(--s-2); font-size: var(--text-xs);
  color: var(--text-2); background: var(--border); padding: 1px 8px; border-radius: 999px;
}
.cr-conn-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.cr-conn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); color: var(--text-2);
  background: var(--bg-alt); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 999px;
}
.cr-conn-chip-i { width: 13px; height: 13px; }
.cr-conn-metric { font-size: var(--text-sm); color: var(--text); margin-bottom: var(--s-2); }
.cr-conn-metric-big { font-weight: 700; font-size: var(--text-lg); }
.cr-conn-evidence { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; }
.cr-conn-why { font-size: var(--text-sm); color: var(--text); line-height: 1.5; margin-top: var(--s-2); }
.cr-conn-why span {
  font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); margin-right: 4px;
}
.cr-conn-foot { font-size: var(--text-xs); color: var(--text-3); line-height: 1.5; margin-top: var(--s-4); }
.cr-conn-explore {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--bg-alt); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-2);
}
.cr-conn-pro {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: white; background: var(--brand); padding: 2px 8px; border-radius: 4px;
}
.cr-conn-explore a { color: var(--brand); font-weight: 600; text-decoration: none; margin-left: auto; }
.cr-conn-explore a:hover { text-decoration: underline; }

/* Definition lists (contact, addresses, fleet, etc.) */
.cr-dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-3) var(--s-5);
  font-size: var(--text-sm);
}
.cr-dl dt {
  color: var(--text-3);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  align-self: baseline;
}
.cr-dl dd { color: var(--text); }
.cr-dl dd.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.cr-dl dd.empty { color: var(--text-3); font-style: italic; }
.cr-dl dd a { color: var(--text); border-bottom: 1px solid var(--border-strong); }
.cr-dl dd a:hover { border-color: var(--brand); }

/* Install CTA inline in report */
.cr-install-cta {
  margin: var(--s-8) 0;
  padding: var(--s-8);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.cr-install-cta-title { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--s-2); }
.cr-install-cta-body { color: var(--text-2); margin-bottom: var(--s-5); font-size: var(--text-base); }

/* Timeline (authority history) */
.cr-timeline {
  display: grid;
  grid-template-columns: 140px 1fr;
  row-gap: var(--s-3);
  column-gap: var(--s-6);
  font-size: var(--text-base);
}
.cr-timeline-date {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-2);
  padding-top: 2px;
}
.cr-timeline-event {
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cr-source-badge {
  display: inline-block;
  padding: 1px var(--s-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* dd color classes (used in DLs for status values like OOS rate / crash rate) */
.cr-dl dd.good { color: #15803d; font-weight: 500; }
.cr-dl dd.warn { color: #b45309; font-weight: 500; }
.cr-dl dd.bad  { color: var(--brand); font-weight: 500; }

/* Stat cards (Drivers / CDL / Power Units, crash counts) — mirrors the
   extension's renderFleetContent stat-cards layout. */
.cr-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.cr-stat-card {
  padding: var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
}
.cr-stat-value {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.cr-stat-value.good { color: #15803d; }
.cr-stat-value.warn { color: #b45309; }
.cr-stat-value.bad  { color: var(--brand); }
.cr-stat-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Tables (Fleet owned/leased breakdown) */
.cr-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-5);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.cr-table th,
.cr-table td {
  padding: var(--s-3) var(--s-4);
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.cr-table th:first-child,
.cr-table td:first-child {
  text-align: left;
}
.cr-table th {
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-sans);
}
.cr-table td:first-child {
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
}
.cr-table tbody tr:last-child td { border-bottom: none; }

/* Status dot prefix (matches extension's colored ●). Generic — works in
   the trust strip, in dl rows, anywhere a coloured status pill is needed. */
.with-dot::before {
  content: '● ';
  font-size: 0.85em;
  margin-right: 2px;
}

/* Generic status pill — reuses good/warn/bad color classes. */
.cr-status { font-weight: 600; }
.cr-status.good { color: #15803d; }
.cr-status.warn { color: #b45309; }
.cr-status.bad  { color: var(--brand); }

/* "Clean on:" positive indicator below flags */
.cr-clean-on {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  color: #15803d;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-top: var(--s-3);
}
.cr-clean-on svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Insurance subsection sub-labels */
.cr-ins-sublabel {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 500;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cr-ins-sublabel:first-child { margin-top: 0; }
.cr-ins-warning {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: #92400e;
  margin-bottom: var(--s-4);
}
.cr-ins-warning svg { flex-shrink: 0; }
.cr-cargo-no-policy {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
  padding: var(--s-2) 0 var(--s-2);
}
/* Insurance churn — repeat-cancellation notice. Tier-tinted to match the */
/* good/warn/bad palette used elsewhere in the carrier report. */
.cr-ins-churn {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
}
.cr-ins-churn.warn { background: #fffbeb; border-color: #fde68a; }
.cr-ins-churn.warn strong { color: #b45309; }
.cr-ins-churn.bad  { background: var(--brand-tint); border-color: var(--brand-border); }
.cr-ins-churn.bad strong { color: var(--brand); }
.cr-ins-churn strong { font-weight: 600; color: var(--text); }
.cr-ins-churn span { color: var(--text-2); }

/* Safety rating compact card */
.cr-safety-rating {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.cr-safety-rating-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 500;
  margin-right: var(--s-2);
}
.cr-safety-rating-value { font-weight: 600; color: var(--text); }
.cr-safety-rating-value.good { color: #15803d; }
.cr-safety-rating-value.warn { color: #b45309; }
.cr-safety-rating-value.bad  { color: var(--brand); }
.cr-safety-rating-note {
  color: var(--text-3);
  font-style: italic;
  font-size: var(--text-xs);
}
.cr-policy-age {
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-left: var(--s-1);
}

/* 12-month inspection activity chart */
.cr-trend-block {
  padding: var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-4);
}
.cr-trend-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.cr-trend-pct { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); }
.cr-trend-svg { display: block; width: 100%; height: 48px; margin-bottom: var(--s-2); }
.cr-trend-footer {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* Combined safety-rate table (Vehicle OOS / Driver OOS / Crashes per 100) */
.cr-rate-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.cr-rate-table th,
.cr-rate-table td {
  padding: var(--s-3) var(--s-4);
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.cr-rate-table th:first-child,
.cr-rate-table td:first-child { text-align: left; }
.cr-rate-table th {
  color: var(--text-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border-strong);
}
.cr-rate-table tbody tr:last-child td { border-bottom: none; }
.cr-rate-table .good { color: #15803d; font-weight: 500; }
.cr-rate-table .warn { color: #b45309; font-weight: 500; }
.cr-rate-table .bad  { color: var(--brand); font-weight: 500; }
.cr-rate-natl { color: var(--text-3); }

/* Top violation codes — the per-section drill-down under the BASIC rollup.
   Compact 3-column: code, plain-English section description, count with
   OOS annotation. Same severity color tokens as the rate table. */
/* Common-violations list collapsed behind the per-BASIC breakdown — the breakdown
   is the headline; the specific 12mo lines open on demand. */
.cr-vio-disclosure { margin-top: var(--s-3); border-top: 1px solid var(--border-weak); }
.cr-vio-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  padding: var(--s-3) 2px var(--s-2); font-size: var(--text-sm); font-weight: 600; color: var(--text);
}
.cr-vio-toggle::-webkit-details-marker { display: none; }
.cr-vio-toggle-n { font-weight: 400; color: var(--text-3); font-size: var(--text-xs); }
.cr-vio-chevron { color: var(--text-3); transition: transform .15s ease; flex: 0 0 auto; }
.cr-vio-disclosure[open] .cr-vio-chevron { transform: rotate(90deg); }
.cr-vio-disclosure .cr-vio-table { margin-top: 0; }

.cr-vio-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-3);
  font-size: var(--text-sm);
}
.cr-vio-table th,
.cr-vio-table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-weak);
}
.cr-vio-table th {
  font-weight: 500;
  color: var(--text-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cr-vio-table tbody tr:last-child td { border-bottom: none; }
.cr-vio-code  { font-family: var(--font-mono); color: var(--text); width: 110px; }
.cr-vio-desc  { color: var(--text-2); }
.cr-vio-count { text-align: right; width: 110px; font-variant-numeric: tabular-nums; }
.cr-vio-count.warn { color: #b45309; font-weight: 500; }
.cr-vio-count.bad  { color: var(--brand); font-weight: 500; }

.cr-vio-highsignal {
  margin-top: var(--s-3);
  padding: var(--s-3);
  background: #fffbeb;
  border-left: 3px solid #b45309;
  font-size: var(--text-sm);
}
.cr-vio-highsignal ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }

/* Insurance History section — historical filings table. */
.cr-ins-history-summary {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--s-3);
}
.cr-ins-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cr-ins-history-table th,
.cr-ins-history-table td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border-weak);
}
.cr-ins-history-table th {
  font-weight: 500;
  color: var(--text-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cr-ins-history-table tbody tr:last-child td { border-bottom: none; }
.cr-ins-history-table .warn { color: #b45309; font-weight: 500; }
.cr-ins-history-table .good { color: #15803d; font-weight: 600; }
.cr-ins-more { color: var(--text-3); font-style: italic; font-size: var(--text-xs); margin-top: var(--s-2); }

/* Fleet classification — single line at the top of the Fleet section. */
.cr-fleet-class {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
  font-size: var(--text-sm);
}
.cr-fleet-class-label {
  font-weight: 500;
  color: var(--text-3);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cr-fleet-class-value { font-weight: 600; }
.cr-fleet-class-value.good { color: #15803d; }
.cr-fleet-class-value.warn { color: #b45309; }
.cr-fleet-class-detail { color: var(--text-2); }

/* Per-BASIC violation breakdown — severity-sorted rows with a magnitude bar.
   Replaces the older two-column table layout. Each row shows the BASIC
   category + plain-language subtitle, a bar whose width is proportional to
   total violations (with a darker OOS overlay), and the count + OOS rate on
   the right. Zero-count categories collapse to a "Clean:" tail line. Mirror
   of the side-panel renderer in panel.css. */
.cr-basic-table {
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}
.cr-basic-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.cr-basic-row {
  display: grid;
  /* Three-column layout: chevron | category | count. Areas column dropped
     2026-05-25 — same info surfaces in the per-category drilldown via
     actual cited section descriptions. */
  grid-template-columns: 18px minmax(0, 1fr) minmax(160px, auto);
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
}
.cr-basic-disclosure + .cr-basic-disclosure {
  border-top: 1px solid var(--border);
}
.cr-basic-disclosure[data-no-detail] .cr-basic-summary {
  cursor: default;
}
.cr-basic-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cr-basic-summary::-webkit-details-marker { display: none; }
.cr-basic-summary:hover {
  background: rgba(0, 0, 0, 0.02);
}
.cr-basic-disclosure[data-no-detail] .cr-basic-summary:hover {
  background: transparent;
}
.cr-basic-chevron {
  color: var(--text-2);
  transition: transform 150ms ease-in-out;
  flex-shrink: 0;
  align-self: center;
}
.cr-basic-summary:hover .cr-basic-chevron {
  color: var(--brand);
}
.cr-basic-disclosure[open] .cr-basic-chevron {
  transform: rotate(90deg);
}
.cr-basic-chevron-empty {
  display: inline-block;
  width: 14px;
  height: 14px;
}
.cr-basic-col-header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.cr-basic-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.cr-basic-sub {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
  font-weight: 400;
}
.cr-basic-count {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
}
.cr-basic-count.bad  { color: var(--brand); }
.cr-basic-count.warn { color: #854F0B; }

/* Per-BASIC drilldown — shown when a category row is expanded */
.cr-basic-detail {
  background: #fafbfc;
  border-top: 1px solid var(--border);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 26px);
}
.cr-basic-detail-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.cr-basic-detail-row {
  display: grid;
  /* Three-column drilldown: description | date | OOS badge. Code column
     dropped 2026-05-25 — raw FMCSA codes (e.g. "39141B10MC") aren't
     useful to brokers; the plain-English description is what matters. */
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: var(--s-4);
  padding: 6px 0;
  font-size: var(--text-sm);
}
.cr-basic-detail-row + .cr-basic-detail-row {
  border-top: 1px dashed var(--border);
}
.cr-basic-detail-desc {
  color: var(--text-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cr-basic-detail-date {
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.cr-basic-detail-oos {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  background: #fde2e2;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.cr-basic-clean {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* Carrier-page mode — applied to <body> when on /carrier/<usdot>/<slug>
   URLs. Hides the homepage marketing sections (post-Montgomery stakes,
   how-it-works, ambient overlay, audit-trail, why-free) and the hero
   marketing chrome (title, sub, proof, Add-to-Chrome button), leaving:
   search bar → carrier report → final CTA. The final-CTA title is
   swapped via JS to "Vet carriers like this from anywhere." for context. */
body.carrier-page-mode .hero-title,
body.carrier-page-mode .hero-sub,
body.carrier-page-mode .hero-brand,
body.carrier-page-mode .hero-underline,
body.carrier-page-mode .hero-caps,
body.carrier-page-mode .hero-proof,
body.carrier-page-mode .hero-proof2,
body.carrier-page-mode .hero-map-eyebrow,
body.carrier-page-mode .hero-map,
body.carrier-page-mode .hero-mapcount,
body.carrier-page-mode .hero-install-btn {
  display: none;
}
body.carrier-page-mode .hero {
  padding-top: var(--s-6);
  padding-bottom: var(--s-4);
}
body.carrier-page-mode .search-modes { margin-top: 0; }
/* Hide every main > section.section element (catches stakes, how-it-works,
   built-into-page, audit-trail, why-free). The hero is .hero (not .section),
   the carrier report is .carrier-report (not .section), and the final-CTA
   is .final-cta (not .section), so those stay visible. */
body.carrier-page-mode main > section.section {
  display: none;
}

/* Inspection Timeline + Crash Trend subsection helpers — mirror the
   extension's section labels and the PDF's INSPECTION TIMELINE /
   CRASH TREND headers. Per the surface-parity rule in the FLEETFAX_EXT
   CLAUDE.md, the three carrier surfaces (extension panel / PDF / website
   inline render) must look essentially the same. */
.cr-subsection-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
}
.cr-last-inspected {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: 2px 0 var(--s-2);
}
.cr-last-inspected strong { color: var(--text-1); }
.cr-last-inspected .good { color: #3B6D11; font-weight: 500; }
.cr-last-inspected .warn { color: #854F0B; font-weight: 500; }
.cr-text-muted-italic { color: var(--text-3); font-style: italic; }

/* Crash Trend (24mo · per 2mo) — 12-bar histogram, each bar = 2 months.
   Severity-stacked from baseline up (fatal/injury/tow). Dashed divider
   between bars 5 and 6 marks the 12/12 split. Below the chart, the
   explicit Last-12 / Prior-12 summary block carries the absolute counts
   and trend direction. Mirrors the extension and PDF surfaces. */
.cr-crash-hist-svg {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: var(--s-1);
}
.cr-chart-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.cr-chart-row .cr-trend-svg,
.cr-chart-row .cr-crash-hist-svg { flex: 1; margin-top: 0; }
.cr-chart-ylabels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-size: 0.6875rem;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  min-width: 18px;
}
.cr-crash-hist-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  padding: var(--s-1) 0 var(--s-2);
}
.cr-crash-hist-summary-row {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: 2px 0;
  line-height: 1.5;
}
.cr-crash-hist-summary-label {
  font-weight: 600;
  color: var(--text);
}
.cr-crash-hist-summary-detail {
  color: var(--text-2);
}

.cr-crash-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
}
.cr-crash-trend-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
}
.cr-crash-trend-chip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-left: 10px;
  margin-right: 3px;
  vertical-align: middle;
}
.cr-crash-trend-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--s-2) 0 var(--s-3);
}
.cr-crash-trend-delta.bad  { color: var(--brand); }
.cr-crash-trend-delta.good { color: #3B6D11; }
.cr-crash-trend-delta:not(.bad):not(.good) { color: var(--text-3); }

/* "Data unavailable" notices — surfaced when a fetch for a specific Socrata */
/* dataset failed. We render the panel explicitly so the broker can't mistake */
/* a Socrata 429 for "carrier has no violations" / "no crashes". */
.cr-data-unavailable {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  margin: var(--s-3) 0;
  background: #fffbeb;
  border: 1px dashed #fde68a;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: #92400e;
}
.cr-data-unavailable strong {
  color: #b45309;
  font-weight: 600;
}

/* Ambiguity heads-up (MC same digits resolves to a different USDOT) */
.cr-ambiguity-note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  color: #92400e;
  font-size: var(--text-sm);
  margin-bottom: var(--s-6);
}
/* Cross-fallback note: shown when a bare-number search resolved the other type
   (MC default missed → showed USDOT, or vice-versa). Informational, not a warning. */
.cr-fallback-note {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-sm);
  color: var(--text-2, #475569);
  font-size: var(--text-sm);
  margin-bottom: var(--s-6);
}
.cr-ambiguity-note svg { flex-shrink: 0; }
.cr-ambiguity-note a {
  color: var(--brand);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  margin-left: var(--s-1);
}

/* Email disambiguation list — one email maps to N carriers */
.cr-email-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.cr-email-result {
  display: block;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  text-decoration: none;
  transition: border-color var(--t), background var(--t);
}
.cr-email-result:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.cr-email-result-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-1);
}
.cr-email-result-meta {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-family: var(--font-mono);
}
.cr-email-more {
  font-size: var(--text-sm);
  color: var(--text-3);
  font-style: italic;
  margin-bottom: var(--s-6);
}

/* Crash detail line at end of safety section */
.cr-crash-line {
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: var(--s-2) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cr-crash-line.clean::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15803d;
  flex-shrink: 0;
}

/* Authority history expand-collapse */
.cr-timeline-more { margin-top: var(--s-4); }
.cr-timeline-more summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  color: var(--brand);
  font-weight: 500;
  font-size: var(--text-sm);
  display: inline-block;
  border-radius: var(--radius-sm);
  transition: background var(--t);
}
.cr-timeline-more summary:hover { background: var(--brand-tint); }
.cr-timeline-more summary::-webkit-details-marker { display: none; }
.cr-timeline-more[open] summary { display: none; }
.cr-timeline-more[open] .cr-timeline { margin-top: var(--s-3); }

/* ─── Pre-load state for share links (/carrier/<dot>/<slug>) ─── */
/* Inline script in <head> adds .preload-carrier to <html> when the URL matches
   a carrier deep-link. Mirrors body.has-results so the hero never paints,
   then main.js takes over (adds body.has-results) once the lookup runs. */
html.preload-carrier .hero {
  min-height: auto;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
html.preload-carrier .hero-mark,
html.preload-carrier .hero-title,
html.preload-carrier .hero-sub,
html.preload-carrier .hero-brand,
html.preload-carrier .hero-underline,
html.preload-carrier .hero-proof,
html.preload-carrier .hero-proof2,
html.preload-carrier .hero-caps,
html.preload-carrier .hero-map-eyebrow,
html.preload-carrier .hero-map,
html.preload-carrier .hero-mapcount,
html.preload-carrier .scroll-cue {
  display: none;
}
html.preload-carrier .search-modes { margin-top: 0; }
html.preload-carrier .carrier-report {
  border-top: none;
}

/* ─── Hero compress state (when carrier-report is visible) ─── */
/* When results appear, the hero collapses to just the search bar with a clean
   bottom border that marks the transition into the results below. Not sticky
   — it scrolls away with the rest of the page so the results aren't crowded.
   Breaks out of the .container width-cap so the bottom border spans the full
   viewport (= the bar above the report content visually IS the header bottom).
   The search form inside keeps its own 800px max-width centering. */
body.has-results .hero {
  min-height: auto;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--border);
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Drop the carrier-report's own border-top so there's just ONE divider line
   (the hero's border-bottom) between the header area and the results. */
body.has-results .carrier-report {
  border-top: none;
}
body.has-results .hero-mark,
body.has-results .hero-title,
body.has-results .hero-sub,
body.has-results .hero-brand,
body.has-results .hero-underline,
body.has-results .hero-proof,
body.has-results .hero-proof2,
body.has-results .hero-caps,
body.has-results .hero-map-eyebrow,
body.has-results .hero-map,
body.has-results .hero-mapcount,
body.has-results .scroll-cue {
  display: none;
}
body.has-results .search-modes { margin-top: 0; }

/* ─── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-cue-icon { animation: none; }
}

/* ─── Graceful degradation below desktop (1280px target) ─ */
@media (max-width: 1024px) {
  :root { --container-padding: 1.5rem; }
  .hero-title { font-size: var(--text-3xl); }
  .feature-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .walkthrough-row { grid-template-columns: 1fr; gap: var(--s-6); }
  .walkthrough-row.reverse > .walkthrough-text { order: 0; }
}

/* v4 nav collapse (founder 2026-07-04: the header scales, then folds to a
   hamburger at tablet width like Zapier — was 720px, too late so the links
   cramped between ~720 and ~1000). Menu links + search pill + Log in fold into
   the drawer; the wordmark, a persistent Start free, and the hamburger stay. */
@media (max-width: 1120px) {
  .nav-links .nav-link:not(.btn) { display: none; }
  .nav-menu, .nav-search, .nav-signin { display: none; }
  .nav-burger { display: flex; }
  .nav-inner { gap: var(--s-3); }
}
@media (max-width: 720px) {
  :root { --container-padding: 1rem; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-sub { font-size: var(--text-base); }
  .nav-cta { padding: var(--s-2) var(--s-3); }
  .search-samples { gap: var(--s-2); }
  .search-sample-chip { font-size: var(--text-xs, 0.75rem); padding: var(--s-1) var(--s-2); }
}
/* Phone (<=480px): the nav CTA pill (now "Join waitlist") is long enough to
   push .nav-right past the viewport (a ~30px page-wide horizontal scroll at
   390px). It's redundant on a phone (the drawer, .nav-drawer-cta, carries the
   same CTA as a full-width button), so collapse it into the drawer here, leaving
   just the brand and the burger. No NAV_HTML change (sync-nav stays a no-op). */
@media (max-width: 480px) {
  .nav-cta { display: none; }
}

/* Phone homepage hero (founder 2026-06-22): the .hero padding shorthand zeroed
   the container's horizontal padding, and on a phone the 800px search-form
   max-width doesn't constrain — so the pills ran edge-to-edge, the Search
   button went full-bleed ("way too wide"), and the placeholder was cramped.
   Restore side gutters, give the button a normal centered size, and free up
   placeholder room by dropping the in-pill brand mark. Desktop is untouched
   (these only apply <=640px). */
@media (max-width: 640px) {
  .hero { padding-left: var(--container-padding); padding-right: var(--container-padding); }
  /* keep the SINGLE-ROW pill (Auto | input | button), same as the carrier-page
     header — not a stacked full-width button (too wide) and not a centered button
     floating in a tall pill (dead space). The in-pill brand mark is dropped to
     give the input room; the submit is icon-only here so the input keeps width. */
  .search-mark { display: none; }
  .search-input-row { flex: 1 1 auto; min-width: 0; }
  .search-submit { flex: 0 0 auto; padding: var(--s-3); gap: 0; }
  .search-submit > span { display: none; }
  .search-submit > svg { width: 19px; height: 19px; }
  /* Two clean rows (founder 2026-06-23): the trust statement as ONE block, then
     "Featured in …" as a second, visually-separated row. The old layout orphaned
     "trust fleetfax" on its own middle line. text-wrap:balance evens the trust
     sentence so it never breaks awkwardly; a hairline + muted treatment makes the
     press line read as the distinct second row. */
  .hero-proof {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    border-radius: 14px;
    padding: var(--s-4);
    margin-top: var(--s-8);
    text-align: center;
    line-height: 1.45;
  }
  .hero-proof-users { text-wrap: balance; }
  .hero-proof-press {
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
    color: var(--text-3);
  }
  .hero-proof-sep { display: none; }
}

/* Mobile install-CTA swap. Chrome extensions are desktop-only, so the
   Add-to-Chrome button on a phone is a dead end. Below 720px we hide the
   real install button and show a "Send me the install link" button instead
   that copies a contextualized payload to clipboard (mailto fallback in
   main.js), letting the mobile visitor send the link to themselves. */
.btn-chrome-mobile { display: none; }
@media (max-width: 720px) {
  .btn-chrome-desktop { display: none !important; }
  .btn-chrome-mobile  { display: inline-flex; }
}
.btn-chrome-mobile.is-copied .btn-chrome-chevron { display: none; }

/* ── FMCSA status banner ──────────────────────────────────────────────────── */
.fmcsa-status-banner {
  background: #fefce8;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
}
.fmcsa-status-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.fmcsa-status-banner-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dd9e0f;   /* degraded amber — matches the /status degraded dot */
}
.fmcsa-status-banner-link {
  color: #92400e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.fmcsa-status-banner-link:hover { text-decoration: none; }

/* ─── Beta v1: welcome card (contained, two-column, animated) ───── */
.beta-banner {
  /* Smooth open/close via the grid-rows 0fr↔1fr technique: animates to the
     card's exact height with no fixed cap, so it works at any width / surface.
     The card's margins live inside the clip, so they collapse with it (no
     leftover gap when closed). Default = collapsed + invisible (no `hidden`
     attribute needed); main.js adds .is-open to reveal. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  padding: 0 var(--container-padding);
  color: var(--text);
  line-height: 1.55;
  transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 240ms ease,
              visibility 0s linear 360ms;
}
.beta-banner.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 240ms ease,
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .beta-banner,
  .beta-banner.is-open { transition: opacity 1ms linear, visibility 1ms linear; }
}
.beta-banner-clip { overflow: hidden; min-height: 0; }
.beta-card {
  position: relative;
  max-width: 980px;                     /* narrower than the page — a contained announcement, not full-bleed */
  margin: var(--s-6) auto var(--s-8);   /* gaps inside the clip animate with it; bottom clears the shadow */
  background: var(--brand-tint);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 18px rgba(0, 0, 0, 0.05);
}
.beta-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* equal columns: header + body fill the same width, so they align */
  gap: var(--s-8);
  align-items: start;
}
.beta-card-news {
  border-left: 1px solid var(--brand-border);
  padding-left: var(--s-8);
}
.beta-news-label {
  margin: 0 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.beta-banner-headline {
  margin: 0 0 var(--s-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
}
.beta-pill {
  /* Eyebrow above the headline. */
  display: inline-block;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  padding: 0.2rem 0.45rem;
}
.beta-banner-text { margin: 0; color: var(--text-2); font-size: var(--text-sm); line-height: 1.6; }
.beta-banner-sign { margin: var(--s-4) 0 0; color: var(--text-3); font-style: italic; font-size: var(--text-sm); }
.beta-whatsnew {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.beta-whatsnew li { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; }
.beta-whatsnew li strong { color: var(--text); font-weight: 600; }
.beta-banner-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-3);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
}
.beta-banner-close:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }
@media (max-width: 760px) {
  .beta-card { padding: var(--s-5); }
  .beta-card-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .beta-card-news {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--brand-border);
    padding-top: var(--s-5);
  }
  .beta-banner-text { max-width: none; }
}
/* On a phone the full banner (intro + 5-item What's-new list) stacked ~800px
   tall and buried the search below the fold (founder 2026-06-22). Compact it to
   the pill + headline + dismiss so the search is the first thing; the details
   stay on desktop. */
@media (max-width: 640px) {
  .beta-banner-text,
  .beta-banner-sign,
  .beta-card-news { display: none; }
  .beta-card { padding: var(--s-4) var(--s-5); }
  .beta-banner-headline { font-size: var(--text-base); margin: 0; }
  .beta-card-intro { display: flex; flex-direction: column; gap: var(--s-2); }
}
/* legal/prose pages + footer: let long links (the support@ email, URLs) break
   and the footer links wrap, instead of forcing the page wider than the phone
   (terms overflowed to 453px on the footer email). */
@media (max-width: 640px) {
  .prose, .prose a { overflow-wrap: anywhere; }
  /* Footer links are the only persistent nav on the static pages (the top nav
     hides on mobile). At 14px text they were ~21px tall — too small to tap
     reliably. Give each a 44px touch target and a row-gap so wrapped rows don't
     collide. Desktop (>640px) keeps the compact inline row. */
  .footer-links { flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
  .footer-links a {
    overflow-wrap: anywhere;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Peer Comparison (Thread A) ─────────────────────────────────────────────── */
.cr-peer { display: flex; flex-direction: column; gap: 1rem; }
.cr-peer-summary { font-size: 0.9375rem; font-weight: 600; color: #374151; line-height: 1.45; }
.cr-peer-clean { font-size: 0.8125rem; color: #6b7280; line-height: 1.45; }
.cr-peer-check { color: #15803d; font-weight: 700; }
.cr-peer-badge {
  font-size: 0.6875rem; font-weight: 600; vertical-align: middle; margin-left: 0.5rem;
  padding: 0.1rem 0.45rem; border-radius: 0.625rem; background: #eef2ff; color: #4338ca;
}
.cr-peer-rowhead { display: flex; align-items: baseline; gap: 0.4rem; }
.cr-peer-label { font-weight: 600; font-size: 0.875rem; color: #374151; flex: 1; }
.cr-peer-verdict { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 0.7rem; white-space: nowrap; }
.cr-peer-pct { font-weight: 600; font-size: 0.7rem; color: #9ca3af; white-space: nowrap; }
.cr-peer-trend { font-size: 0.75rem; white-space: nowrap; }
.cr-peer-caption { font-size: 0.8125rem; color: #6b7280; margin: 0.15rem 0 0.4rem; line-height: 1.35; }
.cr-peer-track { position: relative; height: 7px; background: #eef0f3; border-radius: 4px; }
.cr-peer-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; opacity: 0.38; }
.cr-peer-marker {
  position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid #9ca3af; transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cr-peer-group { font-size: 0.75rem; color: #9ca3af; margin-top: 0.4rem; }
.cr-peer-disclosure {
  font-size: 0.6875rem; color: #9ca3af; line-height: 1.5;
  margin-top: 0.25rem; padding-top: 0.6rem; border-top: 1px solid #f0f0f2;
}
.cr-peer-disclosure a { color: #6366f1; text-decoration: none; }
.cr-peer-disclosure a:hover { text-decoration: underline; }

/* ─── Map of Operation (v3.5) — website-only interactive county map ────────── */
.cr-geo .cr-geo-sub { font-size: var(--text-sm); color: var(--text-2); line-height: 1.5; margin-bottom: var(--s-3); }
.cr-geo-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: .01em;
  padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: .4rem;
}
.cr-geo-cert-high { background: var(--brand-tint); color: var(--brand); }
.cr-geo-cert-med  { background: #fdf2f4; color: #a30d24; }
.cr-geo-cert-low  { background: #f1f5f9; color: #64748b; }
.cr-geo-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--s-3); }
.cr-geo-stats b { color: var(--text-1); font-weight: 700; }
/* toolbar of segmented controls */
/* window controls (24/12/6/90d) sit BELOW the map, centered */
.cr-geo-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--s-5); }
.cr-geo-seg { display: inline-flex; background: #f1f3f6; border: 1px solid #e6e9ee; border-radius: 9px; padding: 2px; }
.cr-geo-seg button {
  font-size: 0.75rem; font-weight: 600; color: var(--text-2); background: transparent;
  border: 0; border-radius: 7px; padding: 4px 11px; cursor: pointer; line-height: 1.4;
}
.cr-geo-seg button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
/* ANY empty segment collapses — the layer toggle (Both/Inspections/Crashes)
   only gets buttons when a carrier has both layers, and its empty shell
   rendered as a stray grey sliver next to the window pills (founder
   2026-07-16). Covers .cr-geo-win too. */
.cr-geo-seg:empty { display: none; }
/* The map sits borderless on the page — its "ocean" fill matches the site
   background (drawBase in features.js), so the US landmass floats. No card. */
.cr-geo-canvaswrap { position: relative; max-width: 720px; margin: 0 auto; }
.cr-geo-canvaswrap canvas { width: 100%; display: block; }
/* hover tooltip — county-aggregate location readout */
.cr-geo-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(17,19,24,.92); color: #fff; font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.cr-geo-tip b { font-weight: 700; }
.cr-geo-tip[hidden] { display: none; }

/* Two-column layout: the map on the left, a plain-English "how to read it"
   aside on the right. Collapses to a single column on narrow viewports. */
.cr-geo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.cr-geo-mapcol { min-width: 0; }
/* inside the grid the map fills its column instead of capping + centering */
.cr-geo-grid .cr-geo-canvaswrap { max-width: none; margin: 0; }
/* right column: reading guide stacked above the vertical lane-checker */
.cr-geo-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cr-geo-howto { font-size: var(--text-sm); color: var(--text-2); line-height: 1.55; }
.cr-geo-howto-head { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--s-3); }
.cr-geo-howto-title {
  font-size: 0.6875rem; font-weight: 700; color: var(--text); text-transform: uppercase;
  letter-spacing: .06em; margin: 0;
}
.cr-geo-howto-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.cr-geo-howto-list b { color: var(--text); font-weight: 700; }
@media (max-width: 860px) { .cr-geo-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
/* No lane-checker: the reading guide now lives in the persistent bar (rail or
   mobile dock) at every width, so the 300px side column would be empty wherever
   the grid is two-up (>860px). Collapse to a single full-width map there. */
@media (min-width: 861px) {
  .cr-geo-grid.cr-geo-nolf { grid-template-columns: 1fr; }
  .cr-geo-grid.cr-geo-nolf .cr-geo-side { display: none; }
}

/* Observed corridors + fleet-split, side by side. Each card grows to fill, so a
   lone card spans full width and the two share the row evenly; they wrap to a
   stack on narrow viewports. */
.cr-lane-pair { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cr-lane-pair > section { flex: 1 1 360px; min-width: 0; }
.cr-geo-heatpill {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  font-size: 0.6875rem; font-weight: 600; color: var(--text-2); cursor: pointer;
  background: rgba(255,255,255,.92); border: 1px solid #e2e5ea; border-radius: 999px;
  padding: 4px 12px; box-shadow: 0 1px 3px rgba(16,24,40,.1); backdrop-filter: blur(2px);
}
.cr-geo-heatpill:hover { border-color: #d4d8df; }
.cr-geo-heatpill.on { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 1px 4px rgba(200,16,46,.35); }
.cr-geo-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .7rem; align-items: center; font-size: 0.6875rem; color: var(--text-3); margin-top: var(--s-4); }
.cr-geo-legtitle { font-weight: 600; color: var(--text-2); }
.cr-geo-leg-mid { color: var(--text-3); }
.cr-geo-leg-bar { display: inline-block; width: 46px; height: 9px; border-radius: 6px; }
.cr-geo-leg-rec { background: linear-gradient(90deg, #c8102e, #d98a93, #c3c8d0); }
.cr-geo-leg-heat { background: linear-gradient(90deg, #fce4e9, #e67887, #cd1e37, #960a20); }
.cr-geo-sz { display: inline-block; border-radius: 50%; background: var(--brand); border: 1px solid #fff; }
.cr-geo-sz1 { width: 6px;  height: 6px; opacity: .45; }
.cr-geo-sz2 { width: 11px; height: 11px; opacity: .72; }
.cr-geo-sz3 { width: 16px; height: 16px; }
.cr-geo-leg-hq { display: inline-flex; align-items: center; gap: .3rem; margin-left: .25rem; }
.cr-geo-hqswatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #0a0a0a; }
.cr-geo-sparkwrap { margin-top: var(--s-5); text-align: center; }
.cr-geo-sparkwrap canvas { width: 100%; max-width: 560px; display: inline-block; }

/* ─── Equipment tab (v3.5) — observed + declared ──────────────────────────── */
.eq-conf {
  font-size: var(--text-xs); color: var(--text-3); font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
/* Average fleet age — one compact strip (power units | trailers) instead of two
   tall cards, so the row earns its height. */
/* subtle colour-coding so power units vs trailers read as distinct at a glance */
.eq-age-power .eq-age-glyph { color: #5b6b8c; }   /* muted slate-blue */
.eq-age-trailer .eq-age-glyph { color: #5f8c79; } /* muted teal-green */

.eq-age-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px;
  padding: 13px 18px; margin-bottom: var(--s-4);
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.eq-age-item { display: flex; align-items: center; gap: 13px; min-width: 210px; }
.eq-age-glyph { color: var(--text-3); flex: 0 0 auto; line-height: 0; }
.eq-age-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-age-strip .eq-age-head { font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.eq-age-line { display: flex; align-items: baseline; gap: 7px; }
.eq-age-strip .eq-age-num { font-size: var(--text-lg); font-weight: 700; color: var(--text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.eq-age-strip .eq-age-sub { font-size: var(--text-xs); color: var(--text-3); }
.eq-age-strip .eq-pct { margin-top: 3px; }
.eq-age-vr { width: 1px; align-self: stretch; background: var(--border); margin: 3px 0; }

/* Average fleet age, with peer percentile band (legacy card grid — retained) */
.eq-age-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.eq-age-card {
  padding: var(--s-5); background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius-sm); display: flex; align-items: center; gap: var(--s-4);
}
.eq-age-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eq-age-icon { flex-shrink: 0; color: var(--text-3); opacity: .35; line-height: 0; }
.eq-age-head { font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.eq-age-num { font-size: var(--text-2xl); font-weight: 700; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.eq-age-sub { font-size: var(--text-xs); color: var(--text-3); }
.eq-pct { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; }
.eq-pct.top10 { background: #dcfce7; color: #15803d; }
.eq-pct.top25 { background: #eafbef; color: #16a34a; }
.eq-pct.upper { background: #eef2ff; color: #4338ca; }
.eq-pct.lower { background: #fef3e2; color: #b45309; }
.eq-pct-sub { font-weight: 500; opacity: .75; }

/* Observed-vs-reported fraud/legitimacy callout */
.eq-ovr {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  background: var(--bg-alt); border: 1px solid var(--border); margin-bottom: var(--s-4);
}
.eq-ovr.warn { background: #fff7ed; border-color: #fed7aa; }
.eq-ovr-big { font-size: var(--text-lg); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.eq-ovr-lbl { font-size: var(--text-sm); color: var(--text-2); }
.eq-ovr-tag { margin-left: auto; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.eq-ovr-tag.ok   { background: #dcfce7; color: #15803d; }
.eq-ovr-tag.warn { background: #ffedd5; color: #9a3412; }

/* Body-type breakdown — clickable filter chips */
.eq-types { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.eq-types-hint { font-size: var(--text-xs); color: var(--text-3); margin-right: 2px; }
.eq-type {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--text-sm); font-family: inherit; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.eq-type:hover { border-color: var(--border-strong); background: var(--bg); }
.eq-type:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.eq-type.active { background: #1f2937; border-color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.eq-type.active .eq-type-n, .eq-type.active .eq-type-l { color: #fff; }
.eq-type-n { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.eq-type-l { color: var(--text-2); }
.eq-type.uncat { opacity: .6; }
.eq-type-clear {
  background: none; border: none; cursor: pointer; font: inherit; font-size: var(--text-xs);
  color: var(--text-3); padding: 5px 8px; border-radius: 999px;
}
.eq-type-clear:hover { color: var(--text); background: var(--bg-alt); }

/* Declared row */
.eq-declared { margin-bottom: var(--s-3); font-size: var(--text-sm); color: var(--text-2); }
.eq-chip { display: inline-block; padding: 2px 9px; margin: 2px 3px 2px 0; border-radius: 999px;
  background: #eef2ff; color: #3730a3; font-size: var(--text-xs); font-weight: 600; }
.eq-note { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--s-3); }
.eq-note.warn { color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: var(--radius-sm); padding: var(--s-2) var(--s-3); }

/* Fleet signals row (renewal / new equipment) */
.eq-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: var(--s-4); font-size: var(--text-sm); }
.eq-sig { font-weight: 600; color: var(--text); }
.eq-sig.good { color: #15803d; }
.eq-sig.warn { color: #b45309; }
.eq-sig-sub { color: var(--text-3); font-size: var(--text-xs); }
.eq-sig-dot { color: var(--border-strong); margin: 0 4px; }

/* Unit table niceties */
.eq-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-alt) 50%, transparent); }
.eq-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.eq-tag.power { background: #e2e8f0; color: #334155; }
.eq-tag.van   { background: #e0f2fe; color: #075985; }
.eq-tag.flat  { background: #fef3c7; color: #92400e; }
.eq-tag.tank  { background: #ede9fe; color: #5b21b6; }
.eq-tag.dump  { background: #fee2e2; color: #991b1b; }
.eq-tag.auto  { background: #dcfce7; color: #166534; }
.eq-tag.misc  { background: #f1f5f9; color: #475569; }
.eq-class { display: inline-block; padding: 1px 7px; border-radius: 5px; background: #1f2937; color: #fff;
  font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.eq-plate { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.74rem; white-space: nowrap; }
.eq-table th, .eq-table td { padding: var(--s-2) var(--s-3); }   /* tighter — 10 columns */
.eq-vin { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.74rem; white-space: nowrap; }
.eq-check { color: #16a34a; font-weight: 700; }
.eq-legend { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--s-2); line-height: 1.5; }
.eq-viewall { margin-top: var(--s-3); font-size: var(--text-sm); }
.eq-viewall button { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 14px; font: inherit; font-size: var(--text-sm); color: var(--text-2); cursor: pointer; }
.eq-viewall button:hover { background: var(--bg-alt); }

/* Collapsed unit table — hide overflow rows; the show-all toggle lifts .eq-collapsed.
   Driven by a class (not the hidden attr) so it composes with the type-filter. */
.eq-collapsed tbody tr[data-eq-extra] { display: none; }

/* Fleet spec mix (trailer lengths + power-unit weight class) */
.eq-specmix { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: var(--s-3);
  font-size: var(--text-sm); color: var(--text-2); }
.eq-spec-k { color: var(--text-3); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .03em; margin-right: 4px; }
.eq-spec-n { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Declared hazmat capability chip — amber, distinct from the indigo cargo chips */
.eq-chip-haz { background: #fef3c7; color: #92400e; }


/* ============================================================
   Homepage overhaul v2 (2026-06-11, docs/homepage-overhaul-plan.md)
   — less-is-more: search-first hero, compact what-you-get grid,
   numbers strip, take-it-with-you, ratified final CTA.
   ============================================================ */

/* ─── Hero: "I'm feeling lucky" is the live demo — give it weight ── */
.search-lucky-chip {
  color: var(--text);
  background: #fff;
  border-color: var(--brand-border);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.search-lucky-chip .search-lucky-icon { color: var(--brand); opacity: 1; }
.search-lucky-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ─── What's in the report ──────────────────────────────── */
/* Three real product crops (verdict band / safety table / operating map),
   each paired with its two blurbs. Verdict leads full-width; the two
   portrait crops sit side by side beneath it. */
.wg-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* both tokens must exist in :root — an undefined var() invalidates the whole
     gap shorthand and collapses every gap to 0 (the overlapped-section bug) */
  gap: var(--s-12) var(--s-8);
  max-width: 1040px;
  margin: 0 auto;
}
.wg-feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  min-width: 0;
}
.wg-feature-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--s-12);
}
.wg-feature-wide .wg-shot { flex: 1 1 58%; }
.wg-feature-wide .wg-feature-blurbs { flex: 1 1 42%; }
.wg-shot {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(11, 12, 14, 0.07);
}
/* The two side-by-side crops get a COMMON aspect ratio so their cards always
   line up regardless of each capture's exact pixel dimensions; contain (not
   cover) so nothing gets cropped — the letterbox is white on white. */
.wg-feature:not(.wg-feature-wide) .wg-shot {
  aspect-ratio: 6 / 5;
  object-fit: contain;
  background: var(--bg);
}
.wg-feature-blurbs {
  display: grid;
  gap: var(--s-6);
  align-content: start;
}
@media (max-width: 760px) {
  .wg-features { grid-template-columns: 1fr; gap: var(--s-8); }
  .wg-feature-wide { flex-direction: column; align-items: stretch; gap: var(--s-6); }
}
.wg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8) var(--s-12);
  max-width: 1040px;
  margin: 0 auto;
}
.wg-item {
  border-top: 2px solid var(--brand);
  padding-top: var(--s-3);
}
.wg-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.wg-desc {
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  text-wrap: pretty;
  /* Reserve two lines so the second blurb in each column starts at the same
     height (keeps "Observed fleet" aligned with "Authority & insurance"). */
  min-height: calc(var(--text-sm) * 1.55 * 2);
}
.wg-creed {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--s-12);
}

/* ─── Home feature showcase + extension carousel CSS removed round 2
   (2026-07-05): the "What a SAFER lookup can't show you" section was
   dissolved into the wireframe's beats and the carousel was replaced by a
   static composed scene (see the round-2 block at the end of this file). ─── */

/* ─── Numbers strip ─────────────────────────────────────── */
.num-strip {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-16) 0;
}
/* Lead line: the big aggregate, then the breakdown grid. */
.num-headline {
  text-align: center;
  margin-bottom: var(--s-12);
}
.num-headline-big {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.num-headline-rest {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--text-lg);
  color: var(--text-2);
}
.num-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-8);
  text-align: center;
}
.num-val {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.num-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: var(--s-2);
}
.num-caption {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-top: var(--s-8);
  text-wrap: pretty;
}

/* ─── Take it with you ──────────────────────────────────── */
.tw-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-2);
}
.tw-block-head {
  max-width: 720px;
  margin: 0 auto var(--s-8);
  text-align: center;
}
.pdf-deck + .tw-block-head { margin-top: var(--s-16); }
/* The install CTA (Add to Chrome) is its own beat between the extension subsection
   above and the PDF subsection below — give the following block-head real space so
   the "THE PDF" eyebrow doesn't crowd the button. */
.tw-install + .tw-block-head { margin-top: var(--s-12); }
.tw-block-title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
}
.tw-blurb {
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.tw-install {
  display: flex;
  justify-content: center;
  /* Buffer between the scene-deck mockup above and the PDF block below so the
     two mockups don't crowd each other (and the dark panel gets breathing room
     as it passes the sticky header). */
  margin-top: var(--s-16);
}

/* ─── Final CTA run button ──────────────────────────────── */
/* btn-chrome supplies the pill shape/sizing but is deliberately Chrome-blue
   (it's the install-button brand). The final CTA is a SEARCH action, so it
   wears the fleetfax red. */
.final-cta-run {
  cursor: pointer;
  background: var(--brand);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.final-cta-run:hover {
  background: #a30d24;
}
.final-cta-run:active { background: #8e0c20; box-shadow: none; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 880px) {
  .wg-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    max-width: 480px;
  }
  .num-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8) var(--s-4);
  }
  .num-headline-big { font-size: var(--text-3xl); }
}

/* With the beta what's-new banner open, the hero's viewport-relative
   min-height (sized for a bannerless page) would stack a full extra
   viewport of dead space under the banner. Collapse it to content size
   while the banner is showing. */
.beta-banner.is-open ~ main .hero {
  min-height: 0;
  padding: var(--s-16) 0 var(--s-12);
}

/* ─── FAQ design B: minimal hairline accordion ─────────────
   Uniform style for the three SEO-page accordion wrappers (.acc / .doc-faq /
   .intent-faq). html-prefixed so it overrides each page's inline <style>
   (which loads after main.css): no boxed cards, no left-crescent, no red
   triangle — just hairline rows with a quiet +/- on the right and a red
   question when open. */
html .acc, html .doc-faq, html .intent-faq { display: flex; flex-direction: column; gap: 0; }
html .acc details, html .doc-faq details, html .intent-faq details {
  border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; padding: 0; box-shadow: none;
}
html .acc details[open], html .doc-faq details[open], html .intent-faq details[open] {
  box-shadow: none; padding-bottom: var(--s-4);
}
html .acc summary, html .doc-faq summary, html .intent-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0; font-weight: 600; font-size: var(--text-base);
  cursor: pointer; list-style: none; letter-spacing: -0.01em; color: var(--text);
}
html .acc summary::-webkit-details-marker, html .doc-faq summary::-webkit-details-marker, html .intent-faq summary::-webkit-details-marker { display: none; }
html .acc summary::before, html .doc-faq summary::before, html .intent-faq summary::before { display: none; content: none; }
html .acc summary::after, html .doc-faq summary::after, html .intent-faq summary::after {
  content: "+"; font-size: 1.4rem; font-weight: 300; color: var(--text-3);
  line-height: 1; flex: none; transition: color 0.2s ease;
}
html .acc details[open] summary, html .doc-faq details[open] summary, html .intent-faq details[open] summary { color: var(--brand); }
html .acc details[open] summary::after, html .doc-faq details[open] summary::after, html .intent-faq details[open] summary::after { content: "\2212"; color: var(--brand); }
html .acc details p, html .doc-faq details p, html .intent-faq details p {
  font-size: var(--text-base); color: var(--text-2); line-height: 1.65; margin: 0 0 var(--s-3); animation: none;
}
html .acc details p:last-child, html .doc-faq details p:last-child, html .intent-faq details p:last-child { margin-bottom: 0; }
html .acc details ul, html .doc-faq details ul, html .intent-faq details ul { margin: var(--s-3) 0 0 var(--s-5); }
html .acc details li, html .doc-faq details li, html .intent-faq details li { font-size: var(--text-base); color: var(--text-2); line-height: 1.65; margin-bottom: var(--s-1); }

/* ─── Homepage account on-ramp (v4 funnel) ─────────────────────────────── */
.acct-ramp {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-16) 0;
}
.acct-ramp-eyebrow {
  font-family: var(--font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  margin-bottom: var(--s-4);
}
.acct-ramp-title {
  font-family: var(--font-sans); font-size: var(--text-3xl); line-height: 1.05;
  letter-spacing: -.028em; font-weight: 600; color: var(--text); margin: 0;
}
.acct-ramp-lede { font-size: var(--text-lg); color: var(--text-2); margin: var(--s-3) 0 0; max-width: 560px; }
/* (The 01/02/03 numbered columns were replaced round 2 by compact .acct-rows —
   see the round-2 block at the end of this file.) */
.acct-ramp-cta { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-8); flex-wrap: wrap; }
.acct-ramp-note { font-size: var(--text-sm); color: var(--text-3); font-family: var(--font-mono); }
.acct-ramp-more { font-weight: 500; color: var(--text); font-size: var(--text-base); }
.acct-ramp-more:hover { color: var(--brand); }
.acct-ramp-founding { flex-basis: 100%; margin: var(--s-2) 0 0; font-size: var(--text-sm); color: var(--text-3); }
.acct-ramp-founding a { color: var(--text); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border); }
.acct-ramp-founding a:hover { color: var(--brand); border-color: var(--brand); }
/* Product proof (2026-07-08): the section's right column carries a real render
   of the Pro review queue — the .ext-grid framed-shot treatment, image right,
   collapsing at the same 900px breakpoint as the sibling section grids. */
.acct-ramp-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-16); align-items: center; }
.acct-ramp-main { min-width: 0; }
.acct-shot { margin: 0; min-width: 0; }
.acct-shot img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(10,10,10,0.12); background: #fff; }
.acct-shot-foot { margin: var(--s-4) 0 0; font-size: var(--text-xs); color: var(--text-3); }
@media (max-width: 900px) {
  .acct-ramp-grid { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Carrier sourcing (v4 Pro) — homepage mode two + /find-carriers results view.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Homepage: two-mode tabs above the hero search ────────────────────────── */
.search-modes {
  position: relative;        /* positioning context for the sliding thumb */
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 auto var(--s-4);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 9999px;
}
/* Sliding thumb: the raised white pill. main.js sizes + translates it to the
   active tab; it carries the lift the active tab used to draw itself, so the pill
   visibly SLIDES between modes instead of hard-cutting. transform-only transition
   (no reflow). Sits under the labels (z-index) so text stays crisp. */
.search-modes-thumb {
  view-transition-name: ff-mode-thumb;  /* the mode-swap VT tweens the slide */
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 9999px;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  transform: translateX(0);
  z-index: 0;
  pointer-events: none;
}
.search-modes-thumb.is-anim {
  /* Light-switch feel (founder 7/14): fast and decisive with a slight overshoot
     that settles — not a linear glide. */
  transition: transform 230ms cubic-bezier(0.3, 1.35, 0.45, 1), width 230ms cubic-bezier(0.3, 1.35, 0.45, 1);
}
.search-mode-tab {
  position: relative;        /* above the thumb */
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;          /* inactive reads lighter; active bolds to 700 */
  color: var(--text-3);      /* inactive label dims */
  padding: var(--s-2) var(--s-5);
  border-radius: 9999px;
  cursor: pointer;
  transition: color var(--t), font-weight var(--t);
  white-space: nowrap;
}
.search-mode-tab:hover { color: var(--text-2); }
/* Active state, made unmistakable: the sliding white thumb carries the lift; the
   label bolds and darkens, and a small brand-red status dot marks the live mode.
   Red stays scarce — a single 5px dot. */
.search-mode-tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 700;
}
.search-mode-tab[aria-selected="true"]::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: middle;
  position: relative; top: -1px;
}
@media (prefers-reduced-motion: reduce) {
  .search-modes-thumb.is-anim { transition: none; }   /* instant swap, no slide */
}

/* The source-mode composed form reuses the hero pill footprint. Hidden until the
   Source tab is active; the vet-mode form is the untouched default. */
.source-form { display: none; }
.source-form.is-active { display: block; }
.search-form.is-hidden { display: none; }

.source-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-2);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9999px;
  padding: 6px 6px 6px var(--s-5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.source-row:focus-within { border-color: var(--text-3); }
.source-seg { display: flex; align-items: center; gap: var(--s-2); }
.source-seg + .source-seg { border-left: 1px solid var(--border); padding-left: var(--s-4); }
.source-seg-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.source-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
  outline: none;
}
.source-input::placeholder { color: var(--text-3); }
.source-select {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.source-submit {
  view-transition-name: ff-search-cta;   /* pairs with .search-submit for the mode-toggle morph */
  flex: 0 0 auto;
  /* .btn forces line-height:1 (icon 18px drives -> 42px tall); the vet Search
     button inherits 24px line-height and lands at 48px. Match it so both mode
     pills carry the same-proportioned CTA and the toggle doesn't resize it. */
  line-height: 1.5;
}
.source-hint {
  margin: var(--s-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  text-align: center;
}

@media (max-width: 720px) {
  .source-row {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    gap: var(--s-3);
  }
  .source-seg { justify-content: space-between; }
  .source-seg + .source-seg { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: var(--s-3); }
  .source-submit { width: 100%; padding: var(--s-3); }
}

/* ── /find-carriers results view ──────────────────────────────────────────── */
.fc-page { padding: var(--s-12) 0 var(--s-24); min-height: 60vh; }

.fc-compose { max-width: 900px; margin: 0 auto var(--s-8); }
.fc-h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.fc-sub { margin: var(--s-2) 0 var(--s-5); color: var(--text-2); font-size: var(--text-base); }

.fc-form {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.fc-field { display: flex; flex-direction: column; gap: 6px; }
.fc-field-origin { flex: 1 1 260px; }
.fc-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-input, .fc-select {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  outline: none;
  height: 46px;
  box-sizing: border-box;
}
.fc-input:focus, .fc-select:focus { border-color: var(--text); }
.fc-select { cursor: pointer; }
.fc-submit { height: 46px; }

@media (max-width: 640px) {
  .fc-form { flex-direction: column; align-items: stretch; }
  .fc-field, .fc-field-origin { flex: 0 0 auto; width: 100%; }
  .fc-submit { width: 100%; }
}

/* Results header + framing (server string, verbatim) */
.fc-head { max-width: 900px; margin: 0 auto var(--s-5); }
.fc-framing {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.fc-framing-note { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--text-sm); }

/* Three-number summary */
.fc-summary { max-width: 900px; margin: 0 auto var(--s-5); }
.fc-sum-lead { margin: 0; font-size: var(--text-base); color: var(--text); }
.fc-sum-lead b { font-weight: 600; }
.fc-sum-unknown {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}

/* Sort control (Distance | Activity) — segmented, quiet; only rendered when the
   response carries activity data. */
.fc-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-4);
  margin-right: var(--s-4);
}
.fc-sort-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-3); margin-right: 2px; }
.fc-sort-opt {
  padding: 4px 12px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.fc-sort-opt:hover { color: var(--text); }
.fc-sort-opt.is-on {
  color: var(--text);
  font-weight: 600;
  border-color: var(--border-strong);
  background: var(--bg-alt);
}

/* Include-unknown toggle */
.fc-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
}
.fc-toggle:hover { color: var(--text); }
.fc-toggle-track {
  width: 36px; height: 20px;
  border-radius: 9999px;
  background: var(--border-strong);
  position: relative;
  transition: background var(--t);
  flex: 0 0 auto;
}
.fc-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform var(--t);
}
.fc-toggle[aria-pressed="true"] .fc-toggle-track { background: var(--brand); }
.fc-toggle[aria-pressed="true"] .fc-toggle-thumb { transform: translateX(16px); }

/* Carrier rows */
.fc-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border); }
.fc-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: background var(--t);
}
a.fc-row:hover { background: var(--bg-alt); }
.fc-dist {
  flex: 0 0 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.fc-dist b { font-size: var(--text-lg); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.fc-dist small { font-size: var(--text-xs); color: var(--text-3); }
.fc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fc-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-idline { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fc-chip {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 2px 9px;
}
.fc-chip-unknown { color: var(--text-3); font-style: normal; }
/* Activity (activity_v2) chip — a factual read, not a rating; kept quiet and
   neutral (weight/tone, no loud fill). The active tier gets a touch more ink. */
.fc-actchip {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.fc-actchip-active { color: var(--text); border-color: var(--border-strong); }
.fc-actchip-none { color: var(--text-3); }
.fc-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--brand);
}
a.fc-row:hover .fc-open { color: var(--brand-hover); }

@media (max-width: 640px) {
  .fc-row { gap: var(--s-3); align-items: flex-start; }
  .fc-dist { flex-basis: 58px; }
  .fc-open span, .fc-open { font-size: var(--text-xs); }
  .fc-open svg { display: none; }
}

/* Empty-with-counts + errors */
.fc-empty, .fc-error, .fc-blank { max-width: 900px; margin: var(--s-5) auto 0; }
.fc-empty-lead, .fc-error-lead { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0; }
.fc-empty-sub, .fc-error-sub { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--text-base); }
.fc-blank p { color: var(--text-2); }
.fc-error .fc-pill { margin-top: var(--s-4); }

/* not_enabled (404, SOURCING_MODE off) — neutral, quiet: no card box, no brand
   red, no alarm styling. Reads as "not available yet", never as an error. */
.fc-not-enabled { max-width: 640px; margin: var(--s-8) auto 0; text-align: center; }
.fc-ne-lead { font-size: var(--text-lg); font-weight: 600; color: var(--text); margin: 0; }
.fc-ne-sub { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--text-base); }
.fc-not-enabled .fc-upsell-recap { margin-top: var(--s-5); }
.fc-ne-links { margin: var(--s-5) 0 0; font-size: var(--text-sm); color: var(--text-3); }
.fc-ne-links a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.fc-ne-links a:hover { color: var(--text); }

/* 402 upsell */
.fc-upsell {
  max-width: 640px;
  margin: var(--s-5) auto 0;
  text-align: center;
  padding: var(--s-8) var(--s-6);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.fc-upsell-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
}
.fc-upsell-title { font-size: var(--text-xl); font-weight: 600; margin: var(--s-3) 0 0; letter-spacing: -0.01em; }
.fc-upsell-body { margin: var(--s-3) auto 0; max-width: 480px; color: var(--text-2); font-size: var(--text-base); }
.fc-upsell-recap {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--s-5) auto 0;
  padding: var(--s-3) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fc-upsell-recap-h { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.fc-upsell-recap-q { font-size: var(--text-base); font-weight: 500; color: var(--text); }
.fc-upsell-cta { display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); flex-wrap: wrap; }

/* Loading skeleton + warming note */
.fc-loading { max-width: 900px; margin: 0 auto; }
.fc-summary-skel { height: 22px; width: 60%; border-radius: 6px; background: var(--bg-alt); margin: 0 auto var(--s-5) 0; }
.fc-note-warming { display: flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--text-sm); margin: 0 0 var(--s-4); }
.fc-row-skel { pointer-events: none; }
.fc-skel { display: block; height: 14px; border-radius: 6px; background: var(--bg-alt); }
.fc-skel-dist { flex: 0 0 60px; }
.fc-skel-name { flex: 1 1 auto; }
.fc-skel-meta { flex: 0 0 90px; }
.fc-loading .fc-skel, .fc-summary-skel { animation: fc-pulse 1.3s ease-in-out infinite; }
@keyframes fc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.fc-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--brand);
  display: inline-block; animation: fc-spin 0.7s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fc-loading .fc-skel, .fc-summary-skel, .fc-spin { animation: none; }
}

/* ============================================================
   Homepage rethink (2026-07-05) — pain-led narrative sections.
   Hero additions, wound split, unrated 94%, intel tabs,
   provenance, Montgomery band, comparison table, audience, FAQ.
   ============================================================ */

/* ─── Hero: random-carrier + trust line ─── */
/* Same top offset as .source-examples so the row below the pill sits at the
   identical y in both modes and the Vet/Source toggle never shifts layout. */
.hero-try { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
/* Vet-only affordance: hidden while Source mode is active (main.js toggles). */
.hero-try.is-hidden { display: none; }
.hero-lucky {
  /* Chip spec mirrors .source-ex (size, weight, dashed border, hover) so the
     vet-mode sample chip and the source-mode example chips read as one system. */
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--text-xs); color: var(--text-3); font-family: inherit;
  background: transparent; border: 1px dashed var(--border-strong); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; transition: color .15s, border-color .15s;
}
.hero-lucky:hover { color: var(--brand); border-color: var(--brand); }

/* Widow control on display headings: balance redistributes lines so a heading
   never strands a single word (founder 7/14, sitewide polish). No layout change
   where headings already fit one line. */
h2, .section-title, .final-cta-title { text-wrap: balance; }
.hero-trustline { font-size: var(--text-xs); color: var(--text-3); margin: 0; }

/* ─── §1 The wound ─── */
.wound-eyebrow, .unrated-eyebrow, .prov-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3);
}
.wound-title { font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s-4); }
.wound-lede { font-size: var(--text-lg); color: var(--text-2); max-width: 46rem; }
.wound-lede strong { color: var(--text); }
.wound-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; margin-top: var(--s-12); }
.wound-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.wound-card-head {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase;
  padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); color: var(--text-3); background: var(--bg-alt);
}
.wound-card--record .wound-card-head { background: var(--text); color: #fff; border-bottom-color: var(--text); }
.wound-card--record { box-shadow: 0 18px 50px rgba(10,10,10,0.10); border-color: var(--border-strong); }
.wound-card ul { list-style: none; margin: 0; padding: var(--s-2) var(--s-6) var(--s-4); }
.wound-card li { font-size: var(--text-sm); color: var(--text-2); padding: 0.6rem 0 0.6rem 1.4rem; position: relative; border-bottom: 1px dashed var(--border); }
.wound-card ul li:last-child { border-bottom: none; }
.wound-card--lookup li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 600; }
.wound-card--record li::before {
  /* Geometric diamond (rotated square), not a shrunken "◆" glyph — glyph metrics
     drift by font and the old hand-tuned top:0.95em sat visibly above the text's
     optical center. Centered on the first line by calc: top padding (0.6rem)
     + half the line box (line-height 1.5 -> 0.75em) - half the rotated square's
     ~8.5px bounding box. */
  content: ""; position: absolute; left: 1px;
  width: 6px; height: 6px; background: var(--brand);
  transform: rotate(45deg);
  top: calc(0.6rem + 0.75em - 3px);
}
.wound-group {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand); margin: var(--s-4) var(--s-6) 0; padding-top: var(--s-2);
}
.wound-col-record { display: flex; flex-direction: column; }
.wound-cap { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--s-3); line-height: 1.5; max-width: 32rem; }
.wound-cta { margin-top: var(--s-12); text-align: center; }

/* ─── §2 Unrated 94% ─── */
.unrated-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-16); align-items: center; }
.unrated-title { font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s-4); }
.unrated-body { font-size: var(--text-base); color: var(--text-2); margin-bottom: var(--s-4); max-width: 34rem; }
.unrated-body strong { color: var(--text); }
.unrated-cite { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.unrated-cite:hover { color: var(--brand); }
.unrated-more a { font-weight: 600; color: var(--text); text-decoration: none; }
.unrated-more a:hover { color: var(--brand); }
.unrated-figure { margin: 0; position: relative; }
.unrated-figure img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(10,10,10,0.10); }
.unrated-94 {
  position: absolute; top: -1.4rem; left: -1.2rem; z-index: 2;
  background: var(--text); color: #fff; border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5); box-shadow: 0 14px 40px rgba(10,10,10,0.25);
  font-family: var(--font-mono); font-weight: 700; font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 0.15em; max-width: 15rem; flex-wrap: wrap;
}
.unrated-94 span { font-size: 1.2rem; color: var(--brand-border); }
.unrated-94 em { font-style: normal; font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); color: rgba(255,255,255,0.75); line-height: 1.4; display: block; width: 100%; margin-top: 0.5rem; }

/* ─── §3 Intel chapters (unstacked from tabs, 2026-07-14) ─── */
.intel .section-head { margin-bottom: var(--s-10); }
/* Chapter rhythm: the headers moved into the text columns (2026-07-15), so the
   gap between chapters carries the separation the full-width headers used to
   provide. One shared flex gap = identical between every pair. */
.intel-chapters { display: flex; flex-direction: column; gap: 112px; }
.intel-chapter { position: relative; }
.intel-chapter-head { display: flex; align-items: flex-start; gap: var(--s-5); margin-bottom: var(--s-6); }
.intel-ch-num { flex: none; font-family: var(--font-mono); font-weight: 700; font-size: 3.4rem; line-height: 0.85; letter-spacing: -0.04em; color: var(--brand); opacity: 0.15; }
.intel-ch-heading { padding-top: 0.4rem; }
.intel-ch-kicker { margin: 0 0 var(--s-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.intel-ch-title { margin: 0; font-size: var(--text-xl); letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.intel-chapter-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-12); align-items: center; }
.intel-chapter--reverse .intel-chapter-body { grid-template-columns: 1.1fr 1fr; }
.intel-chapter--reverse .intel-panel-text { order: 2; }
.intel-chapter--reverse .intel-panel-media { order: 1; }
.intel-panel-text p { font-size: var(--text-base); color: var(--text-2); max-width: 32rem; }
.intel-panel-text p + p { margin-top: var(--s-3); }
.intel-motus-link { color: var(--brand); font-weight: 600; text-decoration: none; }
.intel-motus-link:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.intel-panel-media img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 16px 44px rgba(10,10,10,0.10); background: #fff; }

/* ─── Unify tab: sources → report converge diagram (round 3, 2026-07-05).
   Ten federal-dataset chips flow through converging SVG lines into a report
   frame whose silhouette leads with the verdict. Replaces the round-2
   verdict-banner artifact (removed, founder call). ─── */
.uc { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; }
.uc-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 30rem; }
.uc-chip { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.uc-flow { width: 100%; max-width: 22rem; }
.uc-flow svg { width: 100%; height: 56px; display: block; }
.uc-line { fill: none; stroke: var(--brand-border); stroke-width: 1; }
.uc-node { fill: var(--brand); }
.uc-report { width: 100%; max-width: 22rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 16px 44px rgba(10,10,10,0.10); padding: var(--s-4) var(--s-5) var(--s-5); }
.uc-report-head { display: flex; align-items: center; gap: 8px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.uc-report-mark .brand-word { font-size: 0.8rem; }
.uc-report-bar { display: block; height: 8px; border-radius: 999px; background: var(--border-strong); }
.uc-report-bar--name { flex: 1; max-width: 8rem; opacity: 0.65; }
.uc-report-dots { margin-left: auto; display: flex; gap: 5px; }
.uc-report-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--success); opacity: 0.7; }
.uc-report-verdict { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); padding: 9px 11px; border-radius: 10px; background: var(--brand-tint); border: 1px solid var(--brand-border); }
.uc-report-vdot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.uc-report-vlabel { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-active); white-space: nowrap; }
.uc-report-vbar { flex: 1; height: 7px; border-radius: 999px; background: var(--brand-border); opacity: 0.85; }
.uc-report-lines { display: flex; flex-direction: column; gap: 9px; margin-top: var(--s-4); }
.uc-report-lines .uc-report-bar { width: 100%; height: 7px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; }
.uc-report-lines .uc-report-bar--short { max-width: 60%; }
/* Converge draw-in + continuous flow pulse (2026-07-14 unstack): the panel is
   always visible now, so home-sections.js arms (.is-armed) then triggers on
   scroll-into-view (.is-inview). Default state = fully drawn (no-JS safe);
   armed hides the lines so the draw reads; reduced motion never arms (below). */
.uc-line { stroke-dasharray: 90; stroke-dashoffset: 0; }
.uc.is-armed .uc-line { stroke-dashoffset: 90; }
.uc.is-armed .uc-node { opacity: 0; }
.uc.is-inview .uc-line { animation: uc-draw 2500ms cubic-bezier(0.32,0.72,0,1) both; }
.uc.is-inview .uc-line:nth-child(1) { animation-delay: 0ms; }
.uc.is-inview .uc-line:nth-child(2) { animation-delay: 60ms; }
.uc.is-inview .uc-line:nth-child(3) { animation-delay: 120ms; }
.uc.is-inview .uc-line:nth-child(4) { animation-delay: 180ms; }
.uc.is-inview .uc-line:nth-child(5) { animation-delay: 240ms; }
.uc.is-inview .uc-line:nth-child(6) { animation-delay: 300ms; }
.uc.is-inview .uc-line:nth-child(7) { animation-delay: 360ms; }
.uc.is-inview .uc-line:nth-child(8) { animation-delay: 420ms; }
.uc.is-inview .uc-line:nth-child(9) { animation-delay: 480ms; }
.uc.is-inview .uc-line:nth-child(10) { animation-delay: 540ms; }
.uc-node { transform-origin: center; }
.uc.is-inview .uc-node { animation: uc-pop 460ms ease 900ms both; }
/* Flow pulse: a short brand-red segment travels each line into the node on a
   slow infinite loop, starting after the draw settles. Subtle by design. */
.uc-pulse-line { fill: none; stroke: var(--brand); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 6 400; stroke-dashoffset: 120; opacity: 0; }
.uc.is-inview .uc-pulse-line { animation: uc-travel 2600ms linear infinite; }
.uc.is-inview .uc-pulse-line:nth-child(1) { animation-delay: 2700ms; }
.uc.is-inview .uc-pulse-line:nth-child(2) { animation-delay: 2900ms; }
.uc.is-inview .uc-pulse-line:nth-child(3) { animation-delay: 3100ms; }
.uc.is-inview .uc-pulse-line:nth-child(4) { animation-delay: 3300ms; }
.uc.is-inview .uc-pulse-line:nth-child(5) { animation-delay: 3500ms; }
.uc.is-inview .uc-pulse-line:nth-child(6) { animation-delay: 3700ms; }
.uc.is-inview .uc-pulse-line:nth-child(7) { animation-delay: 3900ms; }
.uc.is-inview .uc-pulse-line:nth-child(8) { animation-delay: 4100ms; }
.uc.is-inview .uc-pulse-line:nth-child(9) { animation-delay: 4300ms; }
.uc.is-inview .uc-pulse-line:nth-child(10) { animation-delay: 4500ms; }
@keyframes uc-draw { to { stroke-dashoffset: 0; } }
@keyframes uc-pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes uc-travel { 0% { opacity: 0; stroke-dashoffset: 120; } 14% { opacity: 0.6; } 86% { opacity: 0.6; } 100% { opacity: 0; stroke-dashoffset: -70; } }
@media (prefers-reduced-motion: reduce) {
  .uc-line { animation: none; stroke-dashoffset: 0; }
  .uc-node { animation: none; opacity: 1; transform: none; }
  .uc-pulse-line { animation: none; opacity: 0; }
}

/* ─── Narrative sharpen (2026-07-05): red accent, record-card links, derive
   list, inline connections card, monitor+source split artifact ─── */
.ff-red { color: var(--brand); }

.wound-card--record li a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brand-border); text-underline-offset: 2px; }
.wound-card--record li a:hover { color: var(--brand); text-decoration-color: var(--brand); }

.intel-derive-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 30rem; }
.intel-derive-list li { position: relative; padding: 0.5rem 0 0.5rem 1.3rem; font-size: var(--text-sm); color: var(--text-2); border-bottom: 1px dashed var(--border); }
.intel-derive-list li:last-child { border-bottom: none; }
.intel-derive-list li::before {
  /* Geometric diamond centered on the first text line by calc — matches the
     wound-card marker fix. top: li top padding (0.5rem) + half the line box
     (0.75em) - half the rotated square (~3px). Old top:0.6em ignored the
     padding and floated high. */
  content: ""; position: absolute; left: 1px;
  width: 6px; height: 6px; background: var(--brand);
  transform: rotate(45deg);
  top: calc(0.5rem + 0.75em - 3px);
}
.intel-derive-list a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brand-border); text-underline-offset: 2px; }
.intel-derive-list a:hover { color: var(--brand); }

/* Inline connections card (replaces the mockup PNG; fictional names, unissued DOTs) */
.conx-card { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 16px 44px rgba(10,10,10,0.10); overflow: hidden; }
.conx-card-head { padding: var(--s-5) var(--s-6) var(--s-4); border-bottom: 1px solid var(--border); }
.conx-card-title { display: block; font-weight: 700; font-size: var(--text-lg); color: var(--text); letter-spacing: -0.01em; }
.conx-card-sub { display: block; margin-top: 0.2rem; font-size: var(--text-xs); color: var(--text-3); }
.conx-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-6); border-bottom: 1px solid var(--border); }
.conx-avatar { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 0.6rem; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); color: #fff; background: var(--text); }
.conx-avatar--flag { background: var(--brand); }
.conx-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.22rem; }
.conx-name { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.conx-dot { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--text-3); }
.conx-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.conx-tag { font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bg-alt); color: var(--text-2); border: 1px solid var(--border); }
.conx-tag--flag { background: var(--brand-tint); color: var(--brand-active); border-color: var(--brand-border); }
.conx-status { flex: none; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; }
.conx-status--revoked { background: var(--brand-tint); color: var(--brand-active); }
.conx-status--active { background: #e7f6ec; color: var(--success-text); }
.conx-foot { padding: var(--s-4) var(--s-6); font-size: var(--text-xs); color: var(--text-3); margin: 0; }

/* Monitor + Source split artifact (intel tab 03) */
.ms-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); width: 100%; }
.ms-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); box-shadow: 0 12px 36px rgba(10,10,10,0.08); padding: var(--s-5); display: flex; flex-direction: column; }
.ms-card-head { margin-bottom: var(--s-3); }
.ms-card-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.ms-card-title { display: block; margin-top: 0.15rem; font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.ms-book { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--s-4); }
.ms-book-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.ms-book-row--alert { border-color: var(--brand-border); background: var(--brand-tint); }
.ms-book-name { font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.ms-chip { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.ms-chip--ok { background: var(--bg); color: var(--text-3); border: 1px solid var(--border); }
.ms-chip--caution { background: #fff; color: var(--brand-active); border: 1px solid var(--brand-border); }
.ms-feed { display: flex; flex-direction: column; margin-top: auto; }
.ms-feed-row { display: flex; gap: var(--s-3); align-items: baseline; padding: 0.35rem 0; border-top: 1px dashed var(--border); font-size: var(--text-xs); }
.ms-feed-row:first-child { border-top: none; }
.ms-feed-date { flex: none; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); width: 2.6rem; }
.ms-feed-text { color: var(--text-2); }
.ms-radius { display: grid; place-items: center; padding: var(--s-2) 0; }
.ms-radius svg { width: 100%; max-width: 188px; height: auto; }
.ms-ring { fill: rgba(200,16,46,0.05); stroke: var(--brand); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ms-ring-inner { fill: none; stroke: var(--border-strong); stroke-width: 0.8; }
.ms-dot { fill: var(--text-2); }
.ms-origin-halo { fill: rgba(200,16,46,0.18); }
.ms-origin { fill: var(--brand); }
.ms-source-stat { margin: var(--s-2) 0 0; font-size: var(--text-xs); color: var(--text-2); text-align: center; }
.ms-source-stat strong { display: block; font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

/* Card blurb + deeper-link footer, per Monitor / Source card (4c) */
.ms-card-note { margin: var(--s-4) 0 0; font-size: var(--text-xs); color: var(--text-2); line-height: 1.5; }
/* Turnstile mount points ship empty on every public form (the widget renders
   into them only when FORM_TURNSTILE_MODE is on). Empty, they must contribute
   ZERO layout: the inline flex-basis:100% on some mounts was crushing the
   email input in non-wrapping flex forms (/monitor, 7/14). :empty stops
   matching the moment the widget renders, so the flag-on layout is unchanged. */
[data-ff-turnstile]:empty { display: none; }

/* Brand law: "fleetfax" never renders uppercase, even inside uppercased labels
   (founder 7/15). Wrap the brand word in .ff-lc within any text-transform:
   uppercase context. */
.ff-lc { text-transform: lowercase; }

/* Pinned to the card's bottom edge (margin-top:auto in the flex column) so
   the two cards' links align regardless of content height; brand red so the
   deeper path is unmissable (founder 7/14). */
.ms-card-link { display: inline-block; margin-top: auto; padding-top: var(--s-3); font-size: var(--text-xs); font-weight: 600; color: var(--brand); text-decoration: none; }
.ms-card-link:hover { text-decoration: underline; }

/* ─── Source card: natural-language lane query → ranked shortlist (4f, from the
   founder-approved mockup). Flat, no gradients, no colored left borders. ─── */
.src-query { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--s-4); padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt); }
.src-query svg { flex: none; width: 13px; height: 13px; color: var(--text-3); }
.src-query span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-2); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-list { display: flex; flex-direction: column; gap: 0.3rem; }
.src-row { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.55rem; align-items: start; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.src-row--top { background: var(--bg); border-color: var(--border-strong); }
.src-rank { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--text-3); line-height: 1.35; padding-top: 0.05rem; }
.src-row--top .src-rank { color: var(--text); font-weight: 700; }
.src-name { margin-bottom: 0.32rem; font-size: var(--text-xs); font-weight: 500; color: var(--text); line-height: 1.3; }
.src-row--top .src-name { font-weight: 700; }
.src-evi { display: flex; flex-wrap: wrap; gap: 0.28rem; }
.src-ev-chip { font-size: 0.58rem; font-weight: 500; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.16rem 0.5rem; white-space: nowrap; line-height: 1.4; }
.src-caption { margin: var(--s-3) 0 0; font-size: 0.66rem; color: var(--text-3); line-height: 1.45; }

/* ─── Provenance ─── */
.prov-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-16); align-items: center; }
.prov-title { font-size: var(--text-2xl); letter-spacing: -0.02em; margin-bottom: var(--s-4); }
.prov-body { color: var(--text-2); max-width: 34rem; }
/* (The static prov-chip card was replaced round 2 by the interactive
   .provflag caution pill — see the round-2 block at the end of this file.) */

/* ─── Montgomery band ─── */
.mont {
  /* same quiet brand-red corner flare as the /source and pricing dark bands
     (founder 2026-07-09: shared treatment marks the dark bands as one family) */
  background:
    radial-gradient(900px 520px at 88% 112%, rgba(200, 16, 46, 0.30), transparent 62%),
    radial-gradient(700px 420px at -6% -18%, rgba(122, 12, 28, 0.20), transparent 60%),
    #0e0e10;
  color: #fff; padding: var(--s-24) 0;
}
.mont-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-16); align-items: center; }
.mont-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a92; margin-bottom: var(--s-3); }
.mont-title { font-size: var(--text-3xl); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s-4); color: #fff; }
.mont-body { color: #b9b9c0; font-size: var(--text-base); max-width: 36rem; }
.mont-body strong { color: #fff; }
.mont-body em { color: #d9d9de; }
.mont-ctas { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-8); flex-wrap: wrap; }
.mont-link { color: #d9d9de; font-weight: 500; text-decoration: none; border-bottom: 1px solid #3a3a40; padding-bottom: 1px; }
.mont-link:hover { color: #fff; border-bottom-color: #fff; }
.mont-facts { display: flex; flex-direction: column; gap: var(--s-4); }
.mont-fact { display: flex; align-items: baseline; gap: var(--s-5); border-bottom: 1px solid #232327; padding-bottom: var(--s-4); }
.mont-fact:last-child { border-bottom: none; padding-bottom: 0; }
.mont-fact-n { font-family: var(--font-mono); font-weight: 700; font-size: var(--text-2xl); color: #fff; min-width: 7.5rem; flex: none; white-space: nowrap; letter-spacing: -0.02em; }
.mont-fact-l { color: #8a8a92; font-size: var(--text-sm); }
.mont-sources { margin-top: var(--s-12); font-size: var(--text-xs); color: #8a8a90; letter-spacing: 0.01em; }

/* ─── Comparison table ─── */
.cmp .section-sub { max-width: 44rem; }
.cmp-scroll { overflow-x: auto; }
/* Phones: the table is min-width 720px so it always scrolls sideways here — a
   right-edge fade hints that without an affordance the cut column reads as an
   accident. The mask sits in the scroller's own box, pinned to the visible right
   edge regardless of scroll position. */
@media (max-width: 640px) {
  .cmp-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
}
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 720px; }
.cmp-table th {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3); text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 2px solid var(--text);
  font-weight: 600; vertical-align: bottom;
}
.cmp-table th .brand-word { font-size: var(--text-base); text-transform: none; letter-spacing: -0.04em; }
.cmp-table td { padding: var(--s-4); border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.cmp-table td.cmp-rowlabel { color: var(--text); font-weight: 600; font-family: var(--font-sans); }
.cmp-table .cmp-us { background: var(--brand-tint); color: var(--text); font-weight: 600; }
.cmp-table th.cmp-us { border-bottom-color: var(--brand); }
.cmp-links { margin-top: var(--s-6); font-size: var(--text-sm); color: var(--text-3); }
.cmp-links a { color: var(--text-2); font-weight: 500; }
.cmp-links a:hover { color: var(--brand); }

/* ─── Home FAQ ─── (accordion styles live in the round-2 block below) */
.homefaq-more { margin-top: var(--s-6); }
.homefaq-more a { font-weight: 600; color: var(--text); text-decoration: none; }
.homefaq-more a:hover { color: var(--brand); }

/* ─── Final CTA additions ─── */
.final-cta-sub { color: var(--text-2); margin: calc(-1 * var(--s-4)) 0 var(--s-6); }
.final-cta-ext { margin-top: var(--s-6); font-size: var(--text-sm); color: var(--text-3); }
.final-cta-ext a { color: var(--text-2); font-weight: 600; }
.final-cta-ext a:hover { color: var(--brand); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .wound-split, .unrated-grid, .intel-chapter-body, .prov-grid, .mont-grid { grid-template-columns: 1fr; }
  .intel-chapter--reverse .intel-chapter-body { grid-template-columns: 1fr; }
  .intel-chapter--reverse .intel-panel-text, .intel-chapter--reverse .intel-panel-media { order: 0; }
  .unrated-grid, .prov-grid, .mont-grid { gap: var(--s-8); }
  .intel-chapters { gap: 72px; }
  .unrated-94 { position: static; margin-bottom: var(--s-4); display: inline-flex; }
}
@media (max-width: 560px) {
  .wound-title, .unrated-title, .mont-title { font-size: var(--text-2xl); }
  .ms-split { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage hero + search sharpening (feat/home-hero-sharpen, 2026-07-05)
   Owns: eyebrow count crossfade, hero-copy scrim, NL source composer, sample
   dice roll, six real intelligence links, proof strip, CTA focus pulse, H1 red.
   Appended block — see brief-hero-sharpen.md. Light surface only (body.home).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Task 8 — "carrier intelligence" in solid brand red (gradient stays reserved
   for the wordmark). */
/* nowrap: Chromium declines to balance the h1's second <br> segment, which
   stranded "record." on its own phone line; keeping the emphasized phrase
   whole forces the break to "fleetfax reads / the whole record." */
.hero-title-em { color: var(--brand); white-space: nowrap; }

/* Eyebrow count mode: same pill; number stays standard text color (founder 7/9
   round 2: not red). */
.hero-map-eyebrow.is-count b { color: var(--text-2); }

/* Task 2 (F, 2026-07-09) — readability scrim as a radial MASK sized to the copy
   box, not a hardcoded rectangle. The old .hero-c::before plateaued (0.81 -> 0.78
   over the first 32%), which read as a white "block" the founder flagged. This
   one hangs off .hero-copy (eyebrow + H1 + subhead), so its position and size
   TRACK the text box across every breakpoint. Falloff is strictly monotonic:
   a near-opaque core hugging the copy so the near-black text pops, feathered
   smoothly to fully transparent with no flat zone and no hard edge. The map's
   dots (and the red-cloud idle roll) stay visible past the feather; the center
   stays calm and readable. Sits above the canvas, below the text (z-index:-1). */
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -46px -9%;
  background: radial-gradient(ellipse 58% 74% at 50% 50%,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.92) 26%,
    rgba(255,255,255,0.66) 46%,
    rgba(255,255,255,0.32) 63%,
    rgba(255,255,255,0.10) 79%,
    rgba(255,255,255,0) 92%);
  z-index: -1; pointer-events: none;
}
@media (max-width: 640px) {
  /* Cap the negative inset to 0 horizontally so the scrim can never drive
     horizontal scroll on a narrow viewport. */
  .hero-copy::before { inset: -30px 0; }
}
/* When the hero collapses to a result/carrier view the copy is display:none and
   the map is hidden, so the scrim has nothing to sit over — drop it entirely. */
body.has-results .hero-copy::before,
body.carrier-page-mode .hero-copy::before,
html.preload-carrier .hero-copy::before { display: none; }

/* Task 3 — natural-language-first Source composer. One prompt input + example
   prompts. Replaces the old origin/within/equipment row. Round 3: the parsed
   echo chips were removed (button-heavy/confusing per founder); the composer now
   uses the SAME neutral border + focus treatment as the vet-mode search pill (no
   red border/ring — the founder flagged the old red focus-visible outline). */
/* Mode-toggle morph hygiene (founder 7/14: CTA flashed + wobbled vertically).
   Two View Transition DEFAULTS cause it: snapshots cross-fade with
   mix-blend-mode plus-lighter (two red buttons blended additively = a bright
   flash) and both snapshots stretch to the tweening group box (differing
   widths at equal height = vertical wobble). Blend normally and keep each
   snapshot at its natural aspect; the group then animates width only. */
::view-transition-image-pair(ff-search),
::view-transition-image-pair(ff-search-cta) { isolation: auto; }
::view-transition-old(ff-search),
::view-transition-new(ff-search),
::view-transition-old(ff-search-cta),
::view-transition-new(ff-search-cta) {
  mix-blend-mode: normal;
  height: 100%;
  width: auto;
}
/* The CTA is anchored to the pill's right edge in both modes, so its size
   change must read as growth to the LEFT into the open input space: pin both
   snapshots to the group's right edge (they default to the left, which made
   the wide label slide against the growth direction). */
::view-transition-old(ff-search-cta),
::view-transition-new(ff-search-cta) {
  left: auto;
  right: 0;
}
/* Extension wipe, not a cross-fade of two full pills: clip the natural-width
   snapshots to the tweening box (pill radius kept), so the wider label is
   progressively REVEALED leftward from the fixed right edge as the box grows.
   The outgoing snapshot fades fast so the reveal owns the motion. */
::view-transition-image-pair(ff-search-cta) {
  overflow: hidden;
  border-radius: 999px;
}
::view-transition-old(ff-search-cta) {
  animation-duration: 90ms;
}
/* Same decisive switch-like timing as the tab thumb. */
::view-transition-group(ff-search),
::view-transition-group(ff-search-cta) {
  animation-duration: 230ms;
  animation-timing-function: cubic-bezier(0.3, 0.9, 0.35, 1);
}
/* The mode-tab thumb rides the view transition (its own group tweens the
   slide with the switch curve); its CSS transition is suppressed for the
   duration so it doesn't replay the move after the overlay lifts. */
::view-transition-group(ff-mode-thumb) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.3, 1.25, 0.45, 1);
}
html.vt-mode-swap .search-modes-thumb { transition: none; }
/* Named groups paint in the transition's top layer, which lifted the (white)
   thumb ABOVE the tab labels mid-slide. Naming the labels too puts them in the
   same layer, and their later DOM order paints them back on top: the thumb
   slides UNDER the text, as it does live. */
#mode-tab-vet { view-transition-name: ff-mode-tab-vet; }
#mode-tab-source { view-transition-name: ff-mode-tab-source; }

.source-nl-row {
  /* Shares the vet pill's view-transition-name: only one of the two pills is
     rendered at a time, so the mode toggle's startViewTransition morphs one
     into the other (and the hero->header cross-document morph keeps working
     from either mode). */
  view-transition-name: ff-search;
  display: flex; align-items: center; gap: var(--s-2);
  background: var(--bg); border: 1px solid transparent;
  /* Vertical/right padding matches .search-input-wrap (--s-2) so the pill is
     byte-identical in height to the vet pill and the mode toggle never shifts
     layout; only the left inset differs (the pin mark wants more breathing room
     than the vet mark's own padded box). */
  border-radius: 9999px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.07);
  transition: box-shadow var(--t);
  max-width: 800px; margin: 0 auto;
}
.source-nl-row:focus-within {
  /* mirrors .search-input-wrap:focus-within — distinct 2px near-black keyboard
     focus ring (the inner input's native outline is stripped below) */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 0 0 2px var(--text);
}
.source-nl-mark { display: inline-flex; align-items: center; color: var(--text-3); flex: 0 0 auto; }
.source-nl-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font-family: inherit; font-size: var(--text-base); color: var(--text);
  /* --s-3 vertical, same as .search-input, so both mode pills resolve to the
     identical outer height and toggling never shifts layout. */
  outline: none; padding: var(--s-3) 0;
}
/* Suppress the global input:focus-visible brand outline (main.css :102) — the
   row's focus-within elevation is the focus cue, same as the vet input. */
.source-nl-input:focus,
.source-nl-input:focus-visible { outline: none; }
.source-nl-input::placeholder { color: var(--text-3); }
/* /source demo composer: .fc-form is a flex container, so the single
   .source-nl-row child shrink-wraps and truncates its placeholder. Let the
   NL variant lay out as a block so the pill fills to its 800px cap. */
.fc-form-nl { display: block; }
.fc-form-nl .source-nl-row { width: 100%; }
.source-examples {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  margin: var(--s-4) auto 0; max-width: 800px;
}
.source-ex {
  font-size: var(--text-xs); color: var(--text-3);
  background: transparent; border: 1px dashed var(--border-strong); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; font-family: inherit;
  transition: color .15s, border-color .15s;
}
.source-ex:hover { color: var(--brand); border-color: var(--brand); }
.source-ex:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Suggestion-row height parity (founder 2026-07-15): toggling Vet <-> Source
   must not move the trust band, so the under-search row keeps ONE height in
   both modes at every width. At narrow widths the three lane pills used to
   wrap to 2-3 rows (source mode 52-96px taller than vet); instead they hold
   ONE row and scroll horizontally — full pill text, no wrapping, no mid-row
   clipping, standard mobile chip-row. The first/last auto margins center the
   row while it fits and resolve to 0 once it overflows (so the row scrolls
   from the true left edge; a centered overflow row would clip unreachably). */
@media (max-width: 900px) {
  .source-examples {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
  }
  .source-examples::-webkit-scrollbar { display: none; }
  .source-ex { white-space: nowrap; flex: 0 0 auto; }
  .source-ex:first-child { margin-left: auto; }
  .source-ex:last-child { margin-right: auto; }
}

/* Phones: raise secondary controls to a comfortable ≥36px hit target without
   changing type size — vertical hit area only (padding / min-height + centering),
   visual weight unchanged. Covers the example chips (home + /source), the search-
   type "Auto" toggle, the "Try a sample carrier" button, and the extension page's
   secondary CTA link under Add-to-Chrome. */
@media (max-width: 768px) {
  .source-ex { min-height: 36px; display: inline-flex; align-items: center; }
  .search-type-btn { min-height: 36px; }
  .hero-lucky { min-height: 36px; }
  .final-cta-secondary a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-1);
  }
}

/* Phones (≤640): the primary hero search controls clear the full 40px thumb
   target (the 36px above is the secondary-control floor), and the source example
   row — a nowrap horizontal scroller that clips its 2nd chip mid-word — gets a
   right-edge fade so the cut edge reads as "more, scroll right", not "broken".
   The mask paints in the scroller's own box, so the fade stays pinned to the
   visible right edge as the row scrolls (all three chips overflow at this width).
   Hit-area/affordance only — type size and desktop layout are untouched. */
@media (max-width: 640px) {
  .search-mode-tab { padding-top: 10px; padding-bottom: 10px; }   /* 37px → ~41px */
  .search-type-btn { min-height: 40px; }
  .source-examples {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}

/* Task 5 — sample-carrier dice roll (~560ms). A small arc/tumble (translate +
   two-axis-feeling rotation via skew + scale) with a settle. The pips fade out
   by the midpoint so the JS pip swap (a real random 1-6 face) is invisible, then
   the landed face snaps in as the die settles. No loops. */
@keyframes ffDiceRoll {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1); }
  25%  { transform: translateY(-6px) rotate(140deg) scale(1.16) skewX(6deg); }
  50%  { transform: translateY(-7px) rotate(248deg) scale(1.12) skewX(-5deg); }
  75%  { transform: translateY(-2px) rotate(338deg) scale(1.05) skewX(2deg); }
  100% { transform: translateY(0)    rotate(360deg) scale(1); }
}
@keyframes ffDicePips { 0% { opacity: 1; } 40%, 100% { opacity: 0; } }
.hero-dice { transform-origin: 50% 50%; }
.hero-dice.is-rolling { animation: ffDiceRoll .56s cubic-bezier(.34,.02,.24,1); }
.hero-dice.is-rolling .hero-dice-pip { animation: ffDicePips .56s ease; }

/* Task 6 — proof strip: owned facts given quiet structure. A bounded band with
   hairline top+bottom rules; three evenly-aligned columns split by neutral
   hairline dividers (round 4: bare floating text read as unstructured). Flat
   cool neutrals, no cards, no accent borders. Round 4b: the "The proof" eyebrow
   was removed (founder: unclear label); vertical padding rebalanced so the
   divided facts sit centered in the band rather than decapitated. */
.hero-proofband {
  margin: var(--s-12) auto 0; max-width: 1040px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--s-6) 0;
}
/* The trust fact is still the longest of the three, so the first column carries
   a little extra weight (1.3 : 1 : 1) and the strip drops a marginal 1px (13px)
   so all three hold ONE line down to 1024px without cramping cells 2 and 3. */
.hero-proofstrip {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center;
  margin: 0 auto;
  font-size: 13px; color: var(--text-2);
}
/* Each cell stretches (equal-height hairline dividers) and centers ONE inner
   text wrapper — a bare flex cell fragments mixed text/<strong> content into
   separate flex items ("Trusted by" stacked as a two-line sliver at 1440). */
.hero-proof-item {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-4); min-height: 2.6em; text-align: center;
}
.hero-proof-text { display: inline-block; line-height: 1.5; }
.hero-proof-item + .hero-proof-item { border-left: 1px solid var(--border); }
.hero-proof-item strong { color: var(--text); font-weight: 600; }
@media (max-width: 560px) {
  .hero-proofstrip { grid-template-columns: 1fr; }
  .hero-proof-item { padding: var(--s-3) var(--s-4); min-height: 0; }
  .hero-proof-item + .hero-proof-item { border-left: 0; border-top: 1px solid var(--border); }
}

/* Task 7 — brief focus-ring pulse when a mid-page Vet CTA lands the search bar. */
@keyframes ffFocusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
  22%  { box-shadow: 0 0 0 4px rgba(200,16,46,0.22); }
  100% { box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
.search-input-wrap.vet-focus-pulse { animation: ffFocusPulse 1s ease; }

/* Reduced-motion: disable every new animation (JS also guards). */
@media (prefers-reduced-motion: reduce) {
  .hero-dice.is-rolling,
  .hero-dice.is-rolling .hero-dice-pip,
  .search-input-wrap.vet-focus-pulse { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage round 2 — wireframe-arc restructure (feat/home-arc-round2,
   2026-07-05). Owns: verdict-banner artifact (unify tab), peer-percentile
   mini + derive media stack, interactive provenance flag, Montgomery stat
   links, account-ramp rows, extension in-context scene, FAQ accordion,
   dark final-CTA bookend. Light surface only (body.home).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Derive tab: media stack + single peer-percentile row (deliberately NOT
   the full BASIC table — that visual lives once, in the unrated section) */
.derive-media { display: flex; flex-direction: column; gap: var(--s-4); }
.pp-mini { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 36px rgba(10,10,10,0.08); padding: var(--s-4) var(--s-5); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.pp-name { font-weight: 600; font-size: var(--text-sm); color: var(--text); }
.pp-read { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: #8a5e00; white-space: nowrap; }
.pp-bar { height: 8px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); margin-top: 8px; overflow: hidden; }
.pp-fill { display: block; height: 100%; background: linear-gradient(90deg, #d98a99, var(--brand)); border-radius: 999px; }
.pp-cap { margin: 8px 0 0; font-size: var(--text-xs); color: var(--text-3); }

/* ── Provenance: the report's caution pill, live. Shape/color/iconography
   mirror the v3 .ff-flag chip (amber sev dot #8a5e00, rotating chevron,
   11px radius). Expand = grid-rows animation, reduced-motion aware. */
.provflag { border: 1px solid var(--border); border-radius: 11px; background: #fff; overflow: hidden; box-shadow: 0 16px 44px rgba(10,10,10,0.08); transition: border-color 0.15s, box-shadow 0.2s; }
.provflag:hover { border-color: #d8d4cc; }
.provflag-head { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 12px 14px; font: inherit; }
.provflag-head:hover { background: rgba(0,0,0,0.015); }
.provflag-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 9px; }
.provflag-sev { width: 8px; height: 8px; border-radius: 50%; background: #8a5e00; flex: none; }
.provflag-title { min-width: 0; flex: 1; font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--text); }
.provflag-chev { flex: none; color: #8a5e00; transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.provflag.is-open .provflag-chev { transform: rotate(90deg); }
.provflag.is-open .provflag-head { border-bottom: 1px solid var(--border); }
.provflag-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s; }
.provflag.is-open .provflag-body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.provflag-bodyinner { overflow: hidden; min-height: 0; }
.provflag-explain { padding: 12px 14px 0; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.provflag-src { padding: 10px 14px 14px; margin: 0; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
.prov-hint { margin: var(--s-3) 0 0; font-size: var(--text-xs); color: var(--text-3); }

/* ── Montgomery: stat tiles are now source links; cites inside the dark body */
a.mont-fact { color: inherit; text-decoration: none; }
a.mont-fact .mont-fact-l { transition: color 0.15s; }
a.mont-fact:hover .mont-fact-l { color: #c9c9cf; }
a.mont-fact:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.mont-cite { color: #d9d9de; text-decoration: underline; text-decoration-color: #4a4a52; text-underline-offset: 3px; }
.mont-cite:hover { color: #fff; text-decoration-color: #fff; }

/* ── Account ramp: compact capability rows (replaces the 01/02/03 columns) */
.acct-rows { list-style: none; margin: var(--s-6) 0 0; padding: 0; max-width: 720px; border-top: 1px solid var(--border); }
.acct-row { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-6); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.acct-row-k { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); }
.acct-row-v { font-size: var(--text-base); color: var(--text-2); }
@media (max-width: 560px) {
  .acct-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Extension: side panel in context (no blush box, no carousel) */
.ext-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--s-16); align-items: start; }
.ext-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.ext-text .section-title { margin-bottom: var(--s-3); }
.ext-lede { font-size: var(--text-lg); color: var(--text-2); max-width: 26rem; }
.ext-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; max-width: 26rem; }
.ext-list li { position: relative; padding: 0.5rem 0 0.5rem 1.3rem; font-size: var(--text-sm); color: var(--text-2); border-bottom: 1px dashed var(--border); }
.ext-list li:last-child { border-bottom: none; }
.ext-list li::before { content: "◆"; position: absolute; left: 0; top: 0.6em; color: var(--brand); font-size: 0.65em; }
.ext-cta { margin-top: var(--s-6); }
/* Round 3: real side-panel screenshot, simply framed (no browser chrome — the
   shot is a bare panel). Soft shadow, portrait, capped so it doesn't dominate. */
.ext-shot { margin: 0; display: flex; flex-direction: column; align-items: center; }
.ext-shot img { width: 100%; max-width: 360px; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: 0 24px 60px rgba(10,10,10,0.14); background: #fff; }
.ext-foot { margin: var(--s-4) 0 0; font-size: var(--text-xs); color: var(--text-3); text-align: center; }
@media (max-width: 900px) {
  .ext-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .ext-shot img { max-width: 320px; }
}

/* ── Home FAQ accordion (collapsed by default; grid-rows expand) */
.homefaq-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.homefaq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border); }
.homefaq-item { border-bottom: 1px solid var(--border); }
.homefaq-h { margin: 0; }
.homefaq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.homefaq-q:hover { color: var(--brand); }
.homefaq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.homefaq-chev { flex: none; color: var(--text-3); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.homefaq-item.is-open .homefaq-chev { transform: rotate(180deg); color: var(--brand); }
.homefaq-item.is-open .homefaq-q { color: var(--brand); }
.homefaq-a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.28s; }
.homefaq-item.is-open .homefaq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
.homefaq-a-inner { overflow: hidden; min-height: 0; }
.homefaq-a-inner p { font-size: var(--text-sm); color: var(--text-2); line-height: 1.65; margin: 0; padding: 0 var(--s-8) var(--s-5) 0; }
.homefaq .homefaq-more { text-align: center; }

/* ── Final CTA: dark bookend of the hero, with a faint static echo of the
   domicile-dot texture (pure CSS, no canvas). Scoped to body.home — other
   pages keep the light .final-cta. */
body.home .final-cta { position: relative; overflow: hidden; background: #0e0e10; border-top: none; padding: var(--s-24) var(--s-6); }
body.home .final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1.4px),
    radial-gradient(rgba(200,16,46,0.28) 1px, transparent 1.4px);
  background-size: 26px 26px, 62px 62px;
  background-position: 0 0, 17px 23px;
  pointer-events: none;
}
body.home .final-cta-inner { position: relative; }
body.home .final-cta-title { color: #fff; }
body.home .final-cta-sub { color: #b9b9c0; }
.final-cta-row { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; }
body.home .final-cta .mini-search { margin: 0; flex: 1 1 420px; max-width: 560px; }
body.home .final-cta-ext { color: #8a8a92; }
body.home .final-cta-ext a { color: #d9d9de; }
body.home .final-cta-ext a:hover { color: #fff; }
@media (max-width: 560px) {
  body.home .final-cta { padding: var(--s-16) var(--s-5); }
  body.home .final-cta .mini-search { flex-basis: 100%; }
}

/* ── Round-2 responsive + reduced motion */
@media (prefers-reduced-motion: reduce) {
  .provflag-chev, .provflag-body, .homefaq-chev, .homefaq-a { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage hero round 3 (feat/home-hero-round3) — appended block.
   Owns: inline sourcing teaser panel (task 3) + mobile Source/Vet composer fix
   (task 4). Kept at the file end so it never collides with the below-hero agent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Task 4 — mobile Source composer: the NL input + button must not fight for a
   single row (founder screenshot: input collapsed to a sliver). <640px the input
   is full-width on its own row, the Find carriers button full-width below it, and
   the dotted example chips wrap beneath (they already do). Vet mode is unaffected
   (it has its own stack treatment). ── */
@media (max-width: 640px) {
  .source-nl-row {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: var(--s-2) var(--s-3);
    gap: var(--s-2);
  }
  .source-nl-mark { align-self: center; }
  .source-nl-input { flex: 1 1 auto; width: auto; padding: 8px 0; }
  .source-submit { flex: 1 1 100%; width: 100%; justify-content: center; padding: var(--s-3); }
}

/* ── Task 3 — inline sourcing teaser panel ──
   Smooth height expand via grid-template-rows 0fr→1fr (reduced-motion: instant).
   The [hidden] rule (higher specificity) keeps the fully-closed state display:none. */
.source-teaser {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s ease;
  max-width: 900px;
  margin: var(--s-6) auto 0;
}
.source-teaser[hidden] { display: none; }
.source-teaser.is-open { grid-template-rows: 1fr; }
.source-teaser-grid {
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s-5);
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
  padding: var(--s-5);
}
.source-teaser-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.source-teaser-close:hover { color: var(--text); background: var(--bg-alt); }
.source-teaser-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.source-teaser-mapwrap {
  position: relative;
  align-self: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.source-teaser-map { display: block; width: 100%; height: auto; }

.source-teaser-panel { display: flex; flex-direction: column; min-width: 0; }
.source-teaser-eyebrow {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
/* Lane headline — only for lane-shaped queries; echoes the composed lane in the
   canonical observed-operating framing. */
.source-teaser-lane {
  margin: 0 0 var(--s-2);
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: 600;
}
.source-teaser-count {
  margin: 0 0 var(--s-3);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.source-teaser-count strong { color: var(--text); font-weight: 600; }

/* Frosted, illegible result rows: obviously-generic placeholder shapes under a
   blur (never legible or fake carrier names — no carrier is named on the home
   page). The lock caption is a sibling OVERLAY (below), not a child, so the
   parent blur never touches it. */
/* WO-08: the real preview rows (2-3 carriers in range) — sit ABOVE the locked
   shimmer, unblurred, each a link to the free /carrier report. Descriptive rows,
   never ranked. Verdict chip mirrors the /me-side .ff-src-verdict look. */
.source-teaser-preview { display: flex; flex-direction: column; margin: var(--s-2) 0 0; }
.stz-real {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.stz-real:last-child { border-bottom: 0; }
.stz-real:hover .stz-real-name { text-decoration: underline; }
.stz-real:hover .stz-real-open { color: var(--brand); }
.stz-real-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stz-real-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stz-real-meta { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stz-verdict {
  flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 9px; border-radius: 6px; border: 1px solid transparent;
}
.stz-verdict-stop  { color: #B0152A; background: #FCEDEE; border-color: #F3C9CE; }
.stz-verdict-clear { color: #475569; background: #F1F4F8; border-color: #D8DEE6; }
.stz-real-open { flex: 0 0 auto; font-size: var(--text-xs); font-weight: 600; color: var(--text-3); }

.source-teaser-rowswrap { position: relative; }
/* Progressive dissolve: the list doesn't hard-cut from crisp to blurred. The
   last named row is already easing into the gradient (below), then the locked bed
   ramps its blur row-by-row and fades out — one continuous descent into the lock. */
.source-teaser-rows {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-2) 0;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,0.06) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 20%, rgba(0,0,0,0.06) 100%);
}
.source-teaser-rows .stz-row { filter: blur(1px); -webkit-filter: blur(1px); }
.source-teaser-rows .stz-row:nth-of-type(2) { filter: blur(2.2px); -webkit-filter: blur(2.2px); }
.source-teaser-rows .stz-row:nth-of-type(3) { filter: blur(3.6px); -webkit-filter: blur(3.6px); }
.source-teaser-rows .stz-row:nth-of-type(4) { filter: blur(5.2px); -webkit-filter: blur(5.2px); }
.source-teaser-rows .stz-row:nth-of-type(5) { filter: blur(6.8px); -webkit-filter: blur(6.8px); }
/* The last named row is still a live link, but its lower edge softens into the
   locked bed so there's no hard boundary (founder: "gradient of the third one"). */
.source-teaser-preview .stz-real:last-child {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.5) 100%);
  mask-image: linear-gradient(to bottom, #000 45%, rgba(0,0,0,0.5) 100%);
}
.stz-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}
.stz-row:last-of-type { border-bottom: 0; }
.stz-dist { flex: 0 0 auto; width: 42px; height: 22px; border-radius: 6px; background: var(--bg-alt); }
.stz-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stz-name { height: 11px; width: 62%; border-radius: 4px; background: var(--border-strong); }
.stz-meta { height: 8px; width: 88%; border-radius: 4px; background: var(--bg-alt); }
.stz-open { flex: 0 0 auto; width: 58px; height: 12px; border-radius: 4px; background: var(--bg-alt); }
/* Lock caption: a callout centered OVER the frosted rows (labels the locked
   content), not pinned to their bottom edge — a bottom-pinned pill collided
   with the CTA row and read as misplaced. Centering it on the blur keeps it
   clearly part of the locked list, well clear of the buttons below. */
.source-teaser-lock {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  filter: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
/* Degrade note (hang fix 2026-07-09): when the preview probe fails, times out,
   or comes back bare, the frosted bed reads as an endless loading shimmer.
   JS swaps it for this one resolved sentence (sourcing-teaser.js degrade()). */
.source-teaser-degrade {
  margin: 0;
  padding: var(--s-5) var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-2);
}
/* Input-validation states (2026-07-09): a typo gets a plain fix-it message near
   the search (homepage) or in the results column (/find-carriers), never a Pro
   upsell. The origin field gets a quiet invalid ring when it is the failing end. */
.source-validate {
  margin: var(--s-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}
/* Gate-probe pending state (founder hit 2026-07-09): the FIRST anonymous
   submit runs the server gate before anything opens, so a slow probe used to
   show NOTHING for its full timeout — the click looked dead. JS puts
   .is-probing + aria-busy on the form while the gate is in flight
   (js/home-sections.js setProbing). Deliberately subtle: the submit button
   dims (and stops taking duplicate clicks), the row shows a progress cursor.
   No spinner, no red — the staged status line below narrates the wait. */
.source-form.is-probing .source-submit { opacity: 0.55; pointer-events: none; }
.source-form.is-probing .source-row { cursor: progress; }
/* Staged status line (fix/sourcing-radius-perf): one quiet sentence narrating
   the in-flight search through its real phases — "Locating Seattle, WA" →
   "Scanning carriers within 100 mi" → "Ranking matches" (sourcing-teaser.js
   runStatusLine). Three surfaces share the base class: under the homepage
   search bar (.source-status), above the teaser panel rows, and in the
   /find-carriers loading block (.fc-status). Founder 2026-07-16: the original
   understated version (xs, muted) was easy to miss on a long search — the line
   is now the panel's visibly active state: sentence-size ink text with a
   pulsing progress dot. Still no red (red stays scarce) and no layout motion;
   the trailing ellipsis keeps pulsing so a long stage reads as alive. */
.stz-status {
  margin: var(--s-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.stz-status::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 6%;
  animation: stz-status-dot 1.2s ease-in-out infinite;
}
.stz-status::after { content: '…'; animation: stz-status-ellipsis 1.6s steps(1) infinite; }
.stz-status-in { animation: stz-status-fade 0.3s ease-out both; }
@keyframes stz-status-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes stz-status-ellipsis { 0% { opacity: 0.25; } 50% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes stz-status-dot { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }
.fc-status { margin: 0 0 var(--s-3); }
@media (prefers-reduced-motion: reduce) {
  .stz-status::before { animation: none; }
  .stz-status::after { animation: none; }
  .stz-status-in { animation: none; }
}
.fc-input-invalid,
input.fc-input-invalid:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
/* CTA row: a clean left-aligned footer, separated from the frosted rows by a
   rule so it never looks fused to the shimmer above it. */
.source-teaser-cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.source-teaser-cta .btn { flex: 0 0 auto; }
.source-teaser-fine { margin: var(--s-3) 0 0; font-size: var(--text-xs); color: var(--text-3); }

/* ── Streaming result reveal (founder round 7/6 r2) ──────────────────────────
   The list streams in as ONE sequence — named rows one-by-one, then the locked
   bed quickly after. Rows are armed hidden on open (JS `.stz-armed`) and released
   with per-row delays (JS-set) when the probe returns, so the sequence is
   data-synced and prod's no-real-rows path still cascades the bed (never blank). */
@keyframes stz-stream-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.source-teaser-rows.stz-armed .stz-row { opacity: 0; }           /* held until released */
.stz-stream { opacity: 0; animation: stz-stream-in 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .source-teaser { transition: none; }
  .stz-stream, .source-teaser-rows.stz-armed .stz-row { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
  .source-teaser { margin-top: var(--s-4); }
  .source-teaser-grid { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4); }
  .source-teaser-mapwrap { display: none; }   /* mobile: rows + CTA stack only */
  .source-teaser-cta .btn { flex: 1 1 100%; justify-content: center; }
  /* Clearance so the last preview row + CTA cluster scroll above the floating
     FAB. Primary fix is the :has() fade above; this is the fallback for engines
     without :has() support. */
  .source-teaser-grid { padding-bottom: 64px; }
}

/* ── Interactive found-carrier dots on the teaser map ────────────────────────
   The 2-3 real preview carriers plot as BRIGHT-RED dots (the intended, scarce red
   moment); the locked remainder is a SYNTHETIC, decorative grey scatter (dimmer,
   smaller, no glow — reads clearly as locked). The hover/focus card is position:
   fixed so it overlays the screen and is never clipped by the map's overflow. */
.stz-dot-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stz-dot { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.stz-dot-red {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--brand, #C8102E); border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(200, 16, 46, 0.35), 0 0 10px 2px rgba(200, 16, 46, 0.5);
  cursor: pointer; display: block; text-decoration: none;
}
.stz-dot-red::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(200, 16, 46, 0.55);
  animation: stz-dot-pulse 2.4s ease-out infinite;
}
@keyframes stz-dot-pulse {
  0% { transform: scale(0.55); opacity: 0.9; }
  70% { opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}
.stz-dot-red:focus-visible { outline: 3px solid rgba(200, 16, 46, 0.45); outline-offset: 3px; }
/* Locked / synthetic "other carriers" dots (item 4): HOLLOW rings — a thin soft-red
   stroke around a translucent-white core — so the top-3 preview dots (solid red +
   halo, above) stay the clear focus while the locked remainder reads as present-but-
   not-yet-yours. Alpha (not ring width) is the knob if the field reads noisy. */
.stz-dot-grey {
  width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.55); border: 1.5px solid rgba(200, 16, 46, 0.44);
  cursor: pointer;
}
.stz-dot-grey:hover { border-color: rgba(200, 16, 46, 0.8); background: rgba(255, 255, 255, 0.78); }
.stz-dot-enter { animation: stz-dot-in 0.4s ease both; }
@keyframes stz-dot-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.stz-dot-caption {
  position: absolute; right: 6px; bottom: 6px;
  display: inline-flex; align-items: center;
  font: 600 11px/1.2 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-2, #374151);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border, #e5e7eb);
  border-radius: 7px; padding: 3px 8px;
  pointer-events: none;
}
/* Hollow-ring glyph keys the line to the locked scatter it describes (item 4). */
.stz-dot-caption::before {
  content: ""; display: inline-block; box-sizing: border-box;
  width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(200, 16, 46, 0.44);
}
.stz-dotcard {
  position: fixed; z-index: 9999; max-width: 240px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg, #fff); border: 1px solid var(--border, #e5e7eb);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
  font-size: 13px; color: var(--text, #111); line-height: 1.35;
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.stz-dotcard[hidden] { display: none; }
.stz-dotcard.is-visible { opacity: 1; transform: none; }
.stz-dotcard.is-below { transform: translateY(-4px); }
.stz-dotcard.is-below.is-visible { transform: none; }
/* Invisible hover bridge across the 10px dot→card gap (hover-grace fix): the
   pointer path dot → card never leaves a hoverable surface, so the card's
   pointerenter cancels the grace hide. Card sits ABOVE the dot by default (gap
   below it); is-below flips the card under the dot (gap above). */
.stz-dotcard::after {
  content: ""; position: absolute; left: -6px; right: -6px;
  top: 100%; height: 14px;
}
.stz-dotcard.is-below::after { top: auto; bottom: 100%; }
.stz-dotcard-name { font-weight: 600; }
.stz-dotcard-dom { font-size: 12px; color: var(--text-3, #6b7280); }
/* Facts line (item 3): fleet size · authority age, when present. */
.stz-dotcard-facts { font-size: 12px; color: var(--text-3, #6b7280); }
.stz-dotcard-chip { align-self: flex-start; margin-top: 2px; }
.stz-dotcard-open { margin-top: 4px; font-weight: 600; font-size: 12px; color: var(--brand, #C8102E); text-decoration: none; }
.stz-dotcard-open:hover { text-decoration: underline; }
.stz-dotcard-mini { max-width: 210px; }
.stz-dotcard-pro { font-weight: 600; font-size: 12px; color: var(--text-2, #374151); }
@keyframes stz-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(200, 16, 46, 0); }
}
.stz-cta-pulse { animation: stz-cta-pulse 0.9s ease-out 2; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) {
  .stz-dot-red::after, .stz-dot.is-static::after { animation: none; display: none; }
  .stz-dot-enter { animation: none; }
  .stz-dotcard { transition: none; }
  .stz-cta-pulse { animation: none; }
}

/* ── Hero takeover (desktop source results ON the big hero map) ───────────────
   Founder ask 2026-07-09: a desktop source search must render on the big hero
   dot map, not in a small duplicate mini-map below the bar. The hero COPY fades
   (opacity only — stays in flow so layout/__ffMapLayout never shift), the hero
   map enters results mode, and the shared renderer draws the lane route / radius
   ring + red preview dots + grey scatter on a TRANSPARENT overlay aligned to the
   map box, with a compact floating results card. See web/js/home-sections.js
   (heroTk) + web/js/sourcing-teaser.js (noField). Desktop-only; the panel remains
   the experience for <1024 / coarse pointer / reduced-motion / degrade. */
.hero-copy { transition: opacity .34s ease; }
.hero-copy::before { transition: opacity .34s ease; }
body.hero-takeover .hero-copy { opacity: 0; pointer-events: none; }
body.hero-takeover .hero-copy::before { opacity: 0; }

/* Overlay: transparent canvas + dot layer, positioned (inline styles from JS) to
   the exact map box. pointer-events:none so the search bar UNDER it stays live;
   only .stz-dot / the hover card opt back in. Sits above the faded copy. */
.hero-tk-overlay {
  position: absolute; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .3s ease .06s;
}
.hero-tk-overlay.is-on { opacity: 1; }
.hero-tk-map { display: block; width: 100%; height: 100%; pointer-events: none; }

/* Floating results card — compact, light, elegant; the map is the show. Reuses
   the .source-teaser-* panel internals (count / preview rows / lock / CTAs render
   into it unchanged). Anchored by its CENTER (translateY(-50%)) at a computed
   centerY so it stays vertically centered in the clear band as the async preview
   rows grow it, and never covers the still-live search bar below. */
.hero-tk-card {
  position: absolute; z-index: 5; text-align: left;   /* .hero centers text; the card must not inherit it */
  width: clamp(286px, 25vw, 336px); max-width: calc(100% - 32px);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-tk-card { padding-bottom: var(--s-3); }
.hero-tk-card.is-on { opacity: 1; transform: none; }
/* Hidden by the ✕ (founder correction 2026-07-09): fade + slight lift out, fully
   inert — the docked chip takes over as the restore affordance; the takeover
   (dots, route, legend) stays live underneath. */
.hero-tk-card.is-collapsed { opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; }
/* When closed the card fades to opacity:0 but stays in the DOM (built once) —
   opacity alone does NOT stop pointer events, so an invisible card would swallow
   clicks over the restored hero. Make it fully inert unless active. */
.hero-tk-card:not(.is-on) { pointer-events: none; }
.hero-tk-card .source-teaser-panel { display: flex; flex-direction: column; min-width: 0; }
.hero-tk-card .source-teaser-eyebrow { margin-bottom: var(--s-1); }
.hero-tk-card .source-teaser-lane { font-size: var(--text-sm); margin-bottom: 2px; line-height: 1.3; }
.hero-tk-card .source-teaser-count { margin-bottom: var(--s-1); }
.hero-tk-card .source-teaser-preview { margin-top: var(--s-1); }
.hero-tk-card .source-teaser-preview .stz-real:last-child { -webkit-mask-image: none; mask-image: none; }
/* Narrow card: the wide verdict chip would crush the carrier name onto one line.
   Wrap the row — name + domicile take the full first line; the chip and the
   "View report" link flow onto a second line. Compact so 3 rows + CTAs fit the
   band above the search bar. */
.hero-tk-card .stz-real { flex-wrap: wrap; gap: 3px var(--s-2); padding: var(--s-2) 0; }
.hero-tk-card .stz-real-lines { flex: 1 1 100%; gap: 1px; }
.hero-tk-card .stz-verdict { flex: 0 0 auto; }
.hero-tk-card .stz-real-open { flex: 1 1 auto; text-align: right; }
/* Lock line: a plain, quiet note (no frosted bed under it here) — flows normally. */
.hero-tk-card .source-teaser-rowswrap { position: static; }
.hero-tk-card .source-teaser-lock {
  position: static; transform: none; left: auto; top: auto;
  display: block; width: auto; margin: var(--s-2) 0 0;
  padding: 0; background: transparent; box-shadow: none;
  text-align: left; white-space: normal; color: var(--text-3);
}
.hero-tk-card .source-teaser-cta { gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); }
.hero-tk-card .source-teaser-cta .btn { flex: 1 1 100%; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
/* Single card control: the ✕ only. Founder correction 2026-07-09: it HIDES the
   card to the docked chip (map stays explorable) rather than ending the takeover. */
.hero-tk-close { top: 8px; right: 8px; }

/* ── Docked chip: the ✕'s hide target — leaves the whole map explorable (dots
   stay live) while keeping the preview one obvious click away. ── */
.hero-tk-chip {
  position: absolute; z-index: 6;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 7px 12px;
  font-family: inherit; font-size: var(--text-sm); line-height: 1;
  color: var(--text); text-align: left; white-space: nowrap;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s cubic-bezier(0.22, 0.61, 0.36, 1), border-color var(--t), box-shadow var(--t);
}
.hero-tk-chip.is-on { opacity: 1; transform: none; pointer-events: auto; }
.hero-tk-chip:hover { border-color: var(--text-3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); }
.hero-tk-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hero-tk-chip-count { font-weight: 600; }
.hero-tk-chip-cue {
  display: inline-flex; align-items: center; gap: 5px;
  padding-left: var(--s-2); border-left: 1px solid var(--border);
  font-weight: 600; font-size: var(--text-xs); color: var(--brand);
}

/* ── Safe-zone caption legend (top-left of the map): via-corridor label + the
   grey-dot overflow line, relocated off the canvas so they read legibly and never
   collide with the live search cluster below (item 5). ── */
.hero-tk-legend {
  position: absolute; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; max-width: 44%;
}
.hero-tk-via, .hero-tk-overflow {
  display: inline-flex; align-items: center; align-self: flex-start; margin: 0;
  font: 600 12.5px/1.25 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.92); border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 9px;
}
.hero-tk-via[hidden], .hero-tk-overflow[hidden] { display: none; }
/* Hollow-ring glyph keys the overflow line to the locked scatter it describes (item 4). */
.hero-tk-overflow::before {
  content: ""; display: inline-block; flex: 0 0 auto; box-sizing: border-box;
  width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: transparent; border: 1.5px solid rgba(200, 16, 46, 0.44);
}

/* Phones (founder 2026-07-15): the stage map is narrow, so the top-right docked
   chip and the top-left via label used to collide on one row — the count chip
   clipped the via label mid-word. positionChip/positionLegend stack them as two
   left-aligned rows here; this makes the via label own its full-width row (a long
   highway list truncates to one line) and gives the chip a >=40px tap target. */
@media (max-width: 640px) {
  .hero-tk-legend { max-width: none; }
  .hero-tk-via {
    display: block; align-self: stretch; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hero-tk-chip { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-copy::before, .hero-tk-overlay, .hero-tk-card, .hero-tk-chip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SOURCE STAGE (founder 2026-07-15) — in Source mode the hero inverts from
   "text over map backdrop" into a tool view: mode toggle → composer → lane
   pills → the map as a block-level STAGE filling the remaining fold, fully
   unobstructed. (The compact "Who actually runs your lane." title was removed
   by founder call 2026-07-15 — the freed height flows into the stage; the
   toggle docks directly under the nav.) Everything here is scoped to
   body.source-stage (toggled by main.js setMode), so Vet mode is
   pixel-untouched. hero-map.js repositions the #hero-map canvas to the
   .hero-stage box and re-derives its projection (see the stage branch in
   build()); main.js sets the stage height.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-stage { display: none; }
body.source-stage .hero-copy { display: none; }          /* headline + subhead + carriers chip */
body.source-stage .hero-proofband { display: none; }     /* trust band hides — the stage owns the fold */
body.source-stage .hero-try { display: none; }           /* vet-only anyway; belt + braces */
/* Compact vertical spend: the toggle docks near the nav, the composer directly
   beneath (the toggle's own --s-4 bottom margin), the pills under that — the
   stage takes everything left above the fold. Higher specificity than every
   body.home .hero / .search-modes rule (incl. the short-viewport query), so
   this wins in source mode at every height. */
/* Raise the cluster (founder 2026-07-15): 44px hero padding + the toggle's
   24px margin left ~68-100px of dead space under the nav. 20px + 24px docks
   the toggle ~44px under the nav (the vet chip's floor-viewport clearance);
   every reclaimed pixel flows into the stage (sizeHeroStage reads the stage's
   new, higher top). */
body.home.source-stage .hero { padding-top: 20px; padding-bottom: var(--s-6); }
body.home.source-stage .search-modes { margin-top: var(--s-6); }
body.source-stage .hero-stage { display: block; position: relative; margin-top: var(--s-4); }
@media (max-width: 900px) {
  body.home.source-stage .hero { padding-top: 16px; }
  body.home.source-stage .search-modes { margin-top: var(--s-4); }
}

/* Corridor auto-fit: hero-map.js animates the projection retarget by tweening
   a transform on the canvas (~300ms), then rebuilds crisp at the target and
   clears it. transform-origin 0 0 matches the translate/scale math; no visual
   effect outside a fit. Reduced motion never adds .is-fitting (instant). */
#hero-map { transform-origin: 0 0; }
#hero-map.is-fitting {
  transition: opacity .5s ease, transform .3s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Mode-swap choreography: stable view-transition-names, scoped to the swap
   (html.vt-mode-swap lives only for the transition's duration) so the
   cross-document ff-search morph and the carrier-page VT are untouched.
   The vet headline carries its name alone (the source-stage title was removed
   2026-07-15): entering Source mode the new state has no ff-hero-headline
   element, so the headline snapshot gets the default EXIT fade — clean morph
   out, nothing to morph into; the way back fades it in. The composer already
   shares ff-search with the vet pill (declared on .source-nl-row); the
   toggle's tabs + thumb carry their own names above. */
html.vt-mode-swap .hero-title { view-transition-name: ff-hero-headline; }
html.vt-mode-swap .search-modes { view-transition-name: ff-mode-modes; }
html.vt-mode-swap #hero-map { view-transition-name: ff-hero-map; }