/* base.css: design tokens, motion kit, shared components and the site shell (header, nav,
   breadcrumbs, footer). Linked on every public page before the page stylesheet and inlined into
   the account and admin shells (their CSP allows inline styles only), so keep it lean.

   SER-593: the first three sections are docs/redesign/css/tokens.css, motion.css and
   components.css (SER-586 handoff). Those files stay as the reference; this file is the one
   shipped copy, so edit here. Deviations from the reference: the component rules are scoped to
   :where(.crl) (see the components section), the header/footer rules are folded into the shell
   section (live class names .site-nav, .site-footer-*), and motion.css's nav underline targets
   .site-nav a. The motion kit stays global (no page uses its class names).
   tools/build-css.mjs rewrites the @font-face URLs to the hashed font files.

   Transitional rule until every page is redesigned (SER-594…601): page bodies keep their old CSS,
   so nothing here may style a bare element (body, h1, a, button…). Every rule is a custom
   property on :root / [data-theme] / .app / .adm, an @font-face or @keyframes, a motion class, a
   component under :where(.crl), or scoped to .site-header / .site-footer / .site-breadcrumbs /
   .site-skip / .acct (the Account menu, SER-631).
   test/page-shell.test.js checks the selectors. The shell rules set their own font, colours and
   spacing because page stylesheets still carry bare header{}, nav a{}, footer{} rules. */

/* ===== tokens */
@font-face { font-family: "Archivo Expanded"; src: url("/static/fonts/archivo-expanded.d37e744ff9.woff2") format("woff2"); font-weight: 500 700; font-stretch: 125%; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/static/fonts/manrope.323c4c2639.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/jetbrains-mono.c9c33463a5.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  /* ---- colour: public site, dark (default) */
  --bg: #0A0A0B;          /* page ground */
  --s1: #121214;          /* cards, inputs, panels */
  --s2: #1A1A1D;          /* hover, selected nav, tracks */
  --line: #2A2A2F;        /* hairlines, card borders */
  --line-strong: #3A3833; /* input borders */
  --tx: #F3EFE6;          /* text, ivory */
  --tx-2: #D9D4CA;        /* lead paragraphs over photos */
  --mu: #ABA69D;          /* secondary text (4.6:1 on --bg) */
  --accent: #C9A96E;      /* champagne gold: one accent per view */
  --accent-ink: #0A0A0B;  /* text on --accent */
  --link: #E9D5A8;        /* inline links */
  --ghost-border: #5A564F;

  /* ---- status (owner/admin pills, flags) */
  --ok-bg: #1E3A2B;   --ok-fg: #9BE3B8;
  --warn-bg: #3D2F14; --warn-fg: #F2C879;
  --bad-bg: #3A1E1B;  --bad-fg: #F49A8C;
  --info-bg: #22283A; --info-fg: #A9C1F5;
  --live: #7FD1A1;    /* live dot */

  /* ---- type */
  --font-display: "Archivo Expanded", "Archivo", Arial, sans-serif; /* always font-stretch:125%; uppercase */
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;           /* admin only */
  --fs-hero: clamp(44px, 7vw, 96px);
  --fs-h1: clamp(40px, 6vw, 76px);
  --fs-h2: 48px;
  --fs-h2-sm: 32px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-lead: 19px;
  --fs-small: 14px;
  --fs-label: 13px;   /* eyebrow: 700, uppercase, letter-spacing .16em, --accent */
  --lh-display: 1.02;
  --lh-body: 1.5;

  /* ---- layout */
  --wrap: 1280px;
  --gutter: 32px;          /* 16px under 600px */
  --section: 112px;        /* home; 72–96px on inner pages */
  --radius: 2px;           /* buttons, inputs; cards are square */
  --radius-pill: 999px;    /* chips, pills */
  --tap: 44px;             /* minimum touch target */

  /* ---- motion */
  --ease-ui: cubic-bezier(.2, .7, .2, 1);
  --ease-line: cubic-bezier(.65, 0, .2, 1);
  --dur-fast: .35s;
  --dur-rise: .9s;
}

/* SER-643: native form controls (select option lists, date pickers, scrollbars) follow the theme. */
:root, [data-theme="dark"] { color-scheme: dark; }

/* Light theme (home light variant, emails, printed reports). Opt in with data-theme="light". */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F4EE; --s1: #FFFFFF; --s2: #EFEAE1; --line: #E3DDD2; --line-strong: #D6CFC2;
  --tx: #141414; --tx-2: #3D3A35; --mu: #5F5A51;
  --accent: #8A6B2E;        /* bronze: gold fails contrast on ivory */
  --accent-ink: #F7F4EE; --link: #6B5320; --ghost-border: #BDB5A6;
}

/* Owner panel: same palette, tighter surfaces. */
.app { --line: #26262B; --side: #0E0E10; --fs-body: 15px; }
/* Admin panel: neutral graphite, dense. */
.adm { --bg: #0C0C0E; --s1: #141417; --s2: #1C1C20; --line: #27272C; --tx: #EDEAE3; --mu: #A19D95; --fs-body: 14px; }

/* ===== motion */
@keyframes crlDraw  { from { stroke-dashoffset: var(--len, 700); } to { stroke-dashoffset: 0; } }
@keyframes rise     { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes growx    { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 1. Logo draws itself: header (first load of a session) and 404. Add to the car <path>.
      SER-657: not on phones (≤ 700px): stroke-dashoffset is not a composited property, and the
      draw ran during the mobile LCP window; the logo is simply static there. */
.crl-logo-draw { --len: 700; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: crlDraw 2.2s .2s var(--ease-line) forwards; }
@media (max-width: 700px) { .crl-logo-draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }

/* 2. Hero photo slow zoom: put the photo on its own layer inside an overflow:hidden hero.
      SER-657: the zoom starts only after window load (AUTH_SCRIPT adds .crl-loaded to <html>), so
      it never animates the LCP element during first paint, and never on phones (≤ 700px). */
.hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
@media (min-width: 701px) { .crl-loaded .hero-bg { animation: kenburns 16s ease-out both; } }

/* 3. Headline rise, staggered: H1 → lead → search / CTA. */
.rise { animation: rise var(--dur-rise) var(--ease-ui) both; }
.rise.d1 { animation-delay: .12s; } .rise.d2 { animation-delay: .24s; } .rise.d3 { animation-delay: .36s; } .rise.d4 { animation-delay: .48s; }

/* 4. Live dot next to "Updated monthly", "weekly fleet check", report dates. */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); margin-right: 8px; vertical-align: middle; animation: pulse 2s ease-in-out infinite; }

/* 5. Bars grow: ranking scores, pricing guide, market report, model price ranges.
      Stagger with inline animation-delay (.06–.08s per row). */
.bar-grow, .hbar > span { transform-origin: left; animation: growx 1.4s .3s var(--ease-ui) both; }

/* 6. Brand marquee (home "Rent by brand"). Duplicate the list once inside the track. */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; }
.marquee-track { display: inline-block; white-space: nowrap; font-size: 34px; letter-spacing: .04em; color: var(--tx); animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* 7. Cards lift, photos zoom. */
.lift { transition: transform var(--dur-fast) var(--ease-ui), border-color var(--dur-fast); }
.lift:hover { transform: translateY(-4px); }
.zoom { overflow: hidden; } .zoom img { transition: transform .9s var(--ease-ui); } .zoom:hover img { transform: scale(1.05); }

/* 8. Nav underline grows from the left; current page keeps it. */
.site-header .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-ui); }
.site-header .site-nav a:hover::after, .site-header .site-nav a[aria-current=page]::after { transform: scaleX(1); }

/* 9. Scroll reveal for sections below the fold. No backward fill (SER-598): before entry the block
      keeps its normal visible styles, so crawlers and prerenderers that never scroll see the text. */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* 10. Sticky contact bar (company page, mobile): slides up after the hero. */
.sticky-cta { position: sticky; bottom: 0; transform: translateY(0); transition: transform .3s var(--ease-ui); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .crl-logo-draw { stroke-dashoffset: 0; }
}

/* ===== components */
/* SER-593: every component rule is scoped to :where(.crl), so the old page bodies (whose
   stylesheets reuse .btn, .card, .price, .state-card, .faq, .lbl… and the account/admin shells'
   .btn, .card, .muted, .badge, .pill) keep their look. A redesigned page opts in with
   renderPage({ bodyClass: "crl" }) (or class="crl" on a wrapper) and then uses the board markup
   1:1. :where() adds no specificity, so each rule weighs what it did on the board; the board's
   bare body/a rules became :where(.crl) and :where(.crl) a. Unscoped: [data-theme="light"]
   (opt-in), .foot-col/.foot-title (the shell footer). */
:where(.crl) { margin: 0; background: var(--bg); color: var(--tx); font: var(--fs-body)/var(--lh-body) var(--font-body); }
:where(.crl) a { color: var(--link); }
:where(.crl) a:hover { color: var(--tx); }
:where(.crl) .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
:where(.crl) .muted { color: var(--mu); }

/* ---- type */
:where(.crl) .disp { font-family: var(--font-display); font-stretch: 125%; font-weight: 650; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: -.005em; }
:where(.crl) .eyebrow { font-size: var(--fs-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
:where(.crl) .price { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; }   /* prices and big numbers, tabular */
:where(.crl) .prose { font-size: 18px; line-height: 1.75; color: var(--tx-2); }
:where(.crl) .prose h2 { font-family: var(--font-display); font-stretch: 125%; text-transform: uppercase; font-size: 28px; color: var(--tx); margin: 44px 0 14px; line-height: 1.1; }
:where(.crl) .prose h3 { font-size: 20px; color: var(--tx); margin: 28px 0 8px; }
:where(.crl) .prose blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); font-size: 22px; color: var(--tx); }

/* ---- buttons: one gold primary per view */
:where(.crl) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--radius); font: 700 15px var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
:where(.crl) .btn-gold { background: var(--accent); color: var(--accent-ink); }
:where(.crl) .btn-gold:hover { color: var(--accent-ink); filter: brightness(1.08); }
[data-theme="light"] .btn-gold { background: #141414; color: #F7F4EE; }   /* light: black primary */
:where(.crl) .btn-ghost { border-color: var(--ghost-border); color: var(--tx); background: transparent; }
:where(.crl) .btn-ghost:hover { border-color: var(--tx); color: var(--tx); }

/* ---- chips and pills */
:where(.crl) .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--tx); background: transparent; font: 600 14px var(--font-body); text-decoration: none; }
:where(.crl) .chip:hover { border-color: var(--accent); color: var(--tx); }
:where(.crl) .chip.on { background: var(--tx); color: var(--bg); border-color: var(--tx); }
:where(.crl) .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--accent); color: var(--accent); }
:where(.crl) .pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); }
:where(.crl) .p-ok { background: var(--ok-bg); color: var(--ok-fg); } :where(.crl) .p-warn { background: var(--warn-bg); color: var(--warn-fg); }
:where(.crl) .p-bad { background: var(--bad-bg); color: var(--bad-fg); } :where(.crl) .p-pend { background: var(--info-bg); color: var(--info-fg); }

/* ---- cards */
:where(.crl) .card { background: var(--s1); border: 1px solid var(--line); }
:where(.crl) .car { background: var(--s1); border: 1px solid var(--line); display: flex; flex-direction: column; color: var(--tx); text-decoration: none; }
:where(.crl) .car img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* SER-614: a model's reference photo standing in for a car without its own: small corner label */
:where(.crl) .has-ref { position: relative; }
:where(.crl) .ref-tag { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 2px 7px; font-size: 11px; font-weight: 600; line-height: 1.5; color: #fff; background: rgba(10,10,11,.72); pointer-events: none; }
:where(.crl) .tile { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 150px; padding: 20px; background: var(--s1); border: 1px solid var(--line); text-decoration: none; color: var(--tx); }
:where(.crl) .tile:hover { border-color: var(--accent); color: var(--tx); }
:where(.crl) .tile svg { fill: currentColor; transition: fill var(--dur-fast); } :where(.crl) .tile:hover svg { fill: var(--accent); }
:where(.crl) .state-card, :where(.crl) .city { position: relative; display: block; border: 1px solid var(--line); text-decoration: none; }
:where(.crl) .state-card { aspect-ratio: 4 / 3; } :where(.crl) .city { aspect-ratio: 1 / 1; }
:where(.crl) .state-card img, :where(.crl) .city img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.crl) .state-cap, :where(.crl) .city-cap { position: absolute; inset: auto 0 0 0; padding: 18px 20px; background: linear-gradient(0deg, rgba(10,10,11,.92), rgba(10,10,11,0)); display: flex; flex-direction: column; gap: 2px; }

/* company card on state/city pages: 3-photo strip + body */
:where(.crl) .co { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--s1); border: 1px solid var(--line); }
:where(.crl) .co .strip { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; min-height: 240px; }
:where(.crl) .co .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.crl) .co .strip img:first-child { grid-row: span 2; }
:where(.crl) .row-co { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px 24px; border: 1px solid var(--line); }

/* company logo slot: approved logo (mono PNG/SVG) or name-only fallback */
:where(.crl) .co-logo { display: flex; align-items: center; flex: 0 0 auto; overflow: hidden; }
:where(.crl) .co-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
:where(.crl) .co-word { font: 650 11px/1.25 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .08em; color: var(--tx); }

/* ranking row (home, best companies) */
:where(.crl) .rank-row { display: grid; grid-template-columns: 64px 140px minmax(0, 2fr) minmax(0, 1.2fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--tx); }

/* ---- data */
:where(.crl) .tbl { width: 100%; border-collapse: collapse; }
:where(.crl) .tbl th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mu); padding: 0 12px 10px 0; }
:where(.crl) .tbl td { padding: 14px 12px 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
:where(.crl) .hbar { height: 10px; background: #1E1E22; position: relative; }
:where(.crl) .hbar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
:where(.crl) .pg { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
:where(.crl) .mrow { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); color: var(--tx); text-decoration: none; }
:where(.crl) .mrow:hover { color: var(--accent); }

/* ---- forms */
:where(.crl) .inp { width: 100%; box-sizing: border-box; background: var(--s1); border: 1px solid var(--line-strong); color: var(--tx); font: 500 16px var(--font-body); min-height: 50px; padding: 0 14px; border-radius: var(--radius); }
:where(.crl) .inp:focus, :where(.crl) .sel:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* SER-643: every <select>, with or without .sel, looks like .inp plus a chevron (no native OS pill).
   The chevron is a data: SVG (every shell's CSP has img-src data:), stroke = --mu (#ABA69D dark,
   #5F5A51 light). Shell rules that restyle selects (.adm, .app .main, .acc-main) must set
   background-color, not the background shorthand, or the chevron disappears. */
:where(.crl) select, :where(.crl) .sel {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  background-color: var(--s1); color: var(--tx); border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: 500 16px var(--font-body); min-height: 50px; padding: 0 40px 0 14px; text-overflow: ellipsis; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%23ABA69D' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px;
}
:where(.crl) .sel { width: 100%; }
:where(.crl) select:hover { border-color: var(--mu); }
:where(.crl) select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:where(.crl) select:disabled { opacity: .5; cursor: not-allowed; }
:where(.crl) select option, :where(.crl) select optgroup { background-color: var(--s1); color: var(--tx); }
:where(.crl) .filters select, :where(.crl) select.sm { min-height: 40px; font-size: 15px; }
:where(.crl) input[type=checkbox], :where(.crl) input[type=radio] { accent-color: var(--accent); }
[data-theme="light"] select, [data-theme="light"] .sel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' fill='none' stroke='%235F5A51' stroke-width='1.6'/%3E%3C/svg%3E"); }
:where(.crl) .field label, :where(.crl) .lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
:where(.crl) .faq { border-top: 1px solid var(--line); padding: 16px 0; }
:where(.crl) .faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }

/* ---- make tiles and chips (SER-597, MakeLogos board): single-colour marks, --tx at rest,
   --accent on hover/focus. .make-mark (end of file) draws the mark; .mk-word is the fallback
   name for makes without one. Tiles take .lift for the hover rise. */
:where(.crl) .mk { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--s1); border: 1px solid var(--line); color: var(--tx); text-decoration: none; }
:where(.crl) .mk:hover, :where(.crl) .mk:focus-visible { border-color: var(--accent); color: var(--tx); }
:where(.crl) .mk:focus-visible, :where(.crl) .mchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.crl) .mk-logo { height: 48px; display: flex; align-items: center; color: var(--tx); transition: color var(--dur-fast); }
:where(.crl) .mk:hover .mk-logo, :where(.crl) .mk:focus-visible .mk-logo { color: var(--accent); }
:where(.crl) .mk-name { font: 650 17px/1.2 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; }
:where(.crl) .mk-n { color: var(--mu); font-size: 14px; }
:where(.crl) .mk-word { font: 650 22px/1.1 var(--font-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; overflow-wrap: anywhere; }
:where(.crl) .mchip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--tx); font: 600 14px var(--font-body); text-decoration: none; }
:where(.crl) .mchip:hover { border-color: var(--accent); color: var(--tx); } :where(.crl) .mchip:hover .make-mark { color: var(--accent); }
:where(.crl) .mk-tm { margin: 0; color: var(--mu); font-size: 13px; }

/* ---- content pages (SER-598: rankings, reports, pricing guides, news, guides, static pages;
   render/content.js). Page head, sections, stats strip, labelled bar charts, cite box, article
   long-read, related cards, owner band. Page-only rules stay in the page stylesheet. */
:where(.crl) .pg-head { padding-top: 20px; }
:where(.crl) .pg-head .eyebrow { margin: 0 0 14px; }
:where(.crl) .pg-title { margin: 0; font-size: var(--fs-h1); overflow-wrap: break-word; }
:where(.crl) .pg-lead { margin: 18px 0 0; max-width: 760px; font-size: 18px; color: var(--tx-2); }
:where(.crl) .pg-meta { margin: 14px 0 0; font-size: 14px; }
:where(.crl) .pg-sec { padding-top: 72px; }
:where(.crl) .pg-end { padding-bottom: 112px; }
:where(.crl) .pg-h2 { margin: 0 0 20px; font-size: var(--fs-h2-sm); overflow-wrap: break-word; }
:where(.crl) .pg-h3 { margin: 0 0 14px; font-size: 24px; }
:where(.crl) .pg-sub { margin: -8px 0 24px; max-width: 760px; color: var(--mu); }
:where(.crl) .cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 48px 56px; }
:where(.crl) .stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0 24px; margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:where(.crl) .stats-strip .stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 24px 0; }
:where(.crl) .stats-strip dd { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
:where(.crl) .stats-strip .stat-accent { color: var(--accent); }
:where(.crl) .bars { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
:where(.crl) .bar-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) minmax(64px, auto); gap: 16px; align-items: center; }
:where(.crl) .bar-label { overflow-wrap: anywhere; } :where(.crl) .bar-label a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--tx); }
:where(.crl) .bar-val { text-align: right; white-space: nowrap; }
:where(.crl) .tbl-wrap { overflow-x: auto; }
:where(.crl) .tbl caption { caption-side: top; text-align: left; padding: 0 0 12px; color: var(--mu); font-size: 14px; }
:where(.crl) .tbl a { color: var(--tx); }
:where(.crl) .tbl th[scope="row"] { padding: 14px 12px 14px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tx); }
:where(.crl) .tbl .num { text-align: right; white-space: nowrap; }
:where(.crl) .callout { margin: 28px 0 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); font-size: 20px; line-height: 1.5; color: var(--tx); max-width: 900px; }
:where(.crl) .callout p { margin: 0; }
:where(.crl) .cite-text { margin: 0; padding: 18px; font: 14px/1.6 var(--font-mono); overflow-wrap: anywhere; }
:where(.crl) .cite-copy { margin-top: 12px; }
:where(.crl) .faq-list { max-width: 900px; border-bottom: 1px solid var(--line); }
:where(.crl) .faq summary { display: flex; align-items: center; min-height: var(--tap); }
:where(.crl) .faq-a { color: var(--tx-2); padding-top: 8px; max-width: 760px; }
:where(.crl) .faq-a p { margin: 0 0 10px; }
:where(.crl) .prose p, :where(.crl) .prose ul, :where(.crl) .prose ol { margin: 0 0 18px; }
:where(.crl) .prose li { margin: 0 0 6px; }
:where(.crl) .prose a { color: var(--link); }
:where(.crl) .prose strong { color: var(--tx); }
:where(.crl) .prose img { max-width: 100%; height: auto; }
:where(.crl) .prose .tbl { margin: 24px 0; font-size: 15px; }
:where(.crl) .art-head { max-width: 920px; }
:where(.crl) .art-hero { padding-top: 36px; max-width: 1180px; }
:where(.crl) .art-hero img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; background: var(--s2); }
:where(.crl) .art-body { padding-top: 40px; max-width: 808px; }
:where(.crl) .rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px; }
:where(.crl) .rel-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; color: var(--tx); text-decoration: none; }
:where(.crl) .rel-card:hover { border-color: var(--accent); color: var(--tx); }
:where(.crl) .rel-card strong { font-size: 18px; line-height: 1.35; }
:where(.crl) .rel-tag { align-self: flex-start; border: 1px solid var(--line); color: var(--mu); }
:where(.crl) .owner-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 32px; border: 1px solid var(--accent); }
:where(.crl) .owner-band p { margin: 6px 0 0; }
:where(.crl) .owner-band .owner-band-title { margin: 0; font-size: 22px; font-weight: 800; }
:where(.crl) .pg-sec a:focus-visible, :where(.crl) .pg-head a:focus-visible, :where(.crl) .pg-sec button:focus-visible, :where(.crl) .pg-sec summary:focus-visible, :where(.crl) .pg-sec input:focus-visible, :where(.crl) .pg-sec select:focus-visible, :where(.crl) .pg-sec textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* status notices (layout.js noticePageHTML: 410, 503): no page stylesheet, so the rules live here */
:where(.crl) .notice-body { padding-top: 80px; padding-bottom: 120px; max-width: 760px; }
:where(.crl) .notice-body .eyebrow { margin: 0 0 16px; }
:where(.crl) .notice-body h1 { margin: 0 0 20px; font: 650 clamp(32px, 5vw, 56px)/var(--lh-display) var(--font-display); font-stretch: 125%; text-transform: uppercase; overflow-wrap: break-word; }
:where(.crl) .notice-body p { margin: 0 0 14px; font-size: 18px; color: var(--mu); }
:where(.crl) .notice-body a { display: inline-block; padding: 10px 0; }
@media (max-width: 600px) {
  :where(.crl) .bar-row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) minmax(52px, auto); gap: 10px; font-size: 14px; }
  :where(.crl) .pg-sec { padding-top: 56px; }
  :where(.crl) .pg-h2 { font-size: 26px; }
  :where(.crl) .prose { font-size: 17px; }
  :where(.crl) .prose h2 { font-size: 22px; }
  :where(.crl) .owner-band { padding: 24px; }
  :where(.crl) .callout { font-size: 18px; }
}

/* ---- header / footer: see the shell section at the end of this file (live markup: .site-nav, .foot-col) */
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot-col a { color: var(--tx); text-decoration: none; } .foot-col a:hover { color: var(--accent); }
.foot-title { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }

@media (max-width: 860px) {
  :where(.crl) .co { grid-template-columns: 1fr; }
  :where(.crl) .rank-row { grid-template-columns: 44px minmax(0, 1fr) auto; } :where(.crl) .rank-row .co-logo, :where(.crl) .rank-row .hide-sm { display: none; }
  :where(.crl) .row-co { grid-template-columns: 32px minmax(0, 1fr) auto; }
}
@media (max-width: 600px) { :root { --gutter: 16px; --section: 72px; --fs-h2: 34px; } }

/* ===== site shell (SER-556 markup, SER-593 look: boards/Main.html header and footer) */
.site-header, .site-footer, .site-breadcrumbs { font-family: var(--font-body); line-height: var(--lh-body); text-align: left; box-sizing: border-box; }
.site-header *, .site-footer *, .site-breadcrumbs *, .acct * { box-sizing: border-box; }
.site-container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.site-header a:focus-visible, .site-footer a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------- skip link */
.site-skip { position: absolute; left: 8px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--accent); color: var(--accent-ink); font: 700 14px var(--font-body); text-decoration: none; }
.site-skip:focus { top: 0; outline: 2px solid var(--tx); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */
.site-header { display: block; position: relative; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--tx); }
.site-header-inner { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-height: 80px; }
.site-header .site-logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: var(--tap); margin: 0; padding: 0; color: var(--tx); text-decoration: none; }
.site-header .site-logo svg { display: block; width: auto; height: 24px; max-width: 100%; overflow: visible; }
/* The car path is 476 units long: the draw (motion kit) starts at once instead of idling on 700. */
.site-header .crl-logo-car { --len: 480; }
.site-header .site-nav { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; background: none; border: 0; position: static; }
.site-header .site-nav a { display: inline-block; position: relative; margin: 0; padding: 6px 0; border: 0; border-radius: 0; background: none; color: var(--tx); font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.site-header .site-nav a:hover { color: var(--tx); background: none; }
.site-header .site-nav a[aria-current="page"] { color: var(--accent); }
/* Auth slot (SER-557): min-width reserves room for the signed-in control, so the header script that
   swaps "Sign in" on cached pages causes no layout shift. The cached "Sign in" is a ghost button
   (.btn-ghost look). Signed in (class auth-in), the slot holds the Account menu (SER-631, below). */
.site-header .auth-slot { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 8rem; margin: 0; padding: 0; }
.site-header .auth-slot > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); margin: 0; padding: 0 18px; border: 1px solid var(--ghost-border); border-radius: var(--radius); background: transparent; color: var(--tx); font: 700 14px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.site-header .auth-slot > a:hover { border-color: var(--tx); color: var(--tx); background: transparent; }

/* ---------------------------------------------------------------- account menu (SER-631)
   render/layout.js accountMenuHTML: a details element .acct (no script: the account/owner/admin CSP
   has none), in the header slot, or at the bottom of the owner sidebar (.acct-side, opens in flow).
   It does not close on an outside click. Old page stylesheets carry bare a{}, p{}, button{} rules,
   so every rule sets its own font, colour and spacing. */
.acct { display: block; position: relative; margin: 0; padding: 0; color: var(--tx); font: 600 14px/1.4 var(--font-body); text-align: left; }
.acct .acct-btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); margin: 0; padding: 0 16px 0 6px; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--tx); font: 700 14px/1.2 var(--font-body); white-space: nowrap; cursor: pointer; }
.acct .acct-btn::-webkit-details-marker { display: none; }
.acct .acct-btn::marker { content: ""; }
.acct .acct-btn:hover, .acct[open] > .acct-btn { border-color: var(--ghost-border); background: var(--s2); }
.acct .acct-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct .acct-av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--accent); border-radius: 50%; background: var(--s2); color: var(--accent); font: 800 14px/1 var(--font-body); }
.acct .acct-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: flex; flex-direction: column; width: 320px; max-width: calc(100vw - 32px); margin: 0; padding: 8px; background: var(--s1); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.acct .acct-menu a, .acct .acct-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: var(--tap); margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--tx); font: 600 14px/1.3 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.acct .acct-menu a:hover, .acct .acct-menu button:hover { background: var(--s2); color: var(--tx); }
.acct .acct-menu a:focus-visible, .acct .acct-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acct .acct-who { margin: 0 0 6px; padding: 6px 12px 12px; border-bottom: 1px solid var(--line); color: var(--mu); font: 500 13px/1.45 var(--font-body); overflow-wrap: anywhere; }
.acct .acct-who:empty { display: none; }
.acct .acct-menu .acct-h { color: var(--mu); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.acct .acct-cos { display: flex; flex-direction: column; margin: 0 0 6px; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.acct .acct-menu .acct-co { font-weight: 700; overflow-wrap: anywhere; }
.acct .acct-tier { flex: 0 0 auto; padding: 2px 8px; border: 1px solid var(--ghost-border); border-radius: var(--radius-pill); color: var(--mu); font: 800 11px/1.3 var(--font-body); }
.acct .acct-menu form { display: block; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line); }
.acct.acct-side .acct-btn { display: flex; width: 100%; border-radius: var(--radius); }
.acct.acct-side .acct-menu { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; }

/* Mobile menu: a visually hidden checkbox toggles the nav panel, no JavaScript. */
/* Above the mobile breakpoint the checkbox is display:none, so keyboard users get no invisible focus stop. */
.site-header .site-menu-toggle { display: none; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.site-header .site-menu-button { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: 0 0 0 auto; padding: 0; border: 1px solid var(--ghost-border); cursor: pointer; color: var(--tx); }
.site-header .site-menu-button span, .site-header .site-menu-button span::before, .site-header .site-menu-button span::after { display: block; width: 18px; height: 1.6px; background: var(--tx); position: relative; content: ''; }
.site-header .site-menu-button span::before { position: absolute; top: -6px; left: 0; }
.site-header .site-menu-button span::after { position: absolute; top: 6px; left: 0; }
.site-header .site-menu-toggle:focus-visible + .site-menu-button { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Desktop widths where the 24 px lockup and seven links do not fit on one row. */
@media (max-width: 1240px) and (min-width: 1081px) {
  .site-header .site-logo svg { height: 19px; }
  .site-header .site-nav { column-gap: 20px; }
}

/* Mobile menu below 1081px (the lockup is 447 px wide at 24 px). The bar holds the logo and the
   menu button (boards/Mobile.html); the open panel holds the nav and then the auth slot. */
@media (max-width: 1080px) {
  .site-header .site-header-inner { min-height: 64px; column-gap: 12px; }
  .site-header .site-logo { flex: 1 1 0; }
  .site-header .site-logo svg { width: 100%; height: auto; max-width: 447px; }
  .site-header .site-menu-toggle { display: block; }
  .site-header .site-menu-button { display: flex; order: 2; }
  .site-header .site-nav { order: 3; display: none; flex: 1 1 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 6px 0 4px; border-top: 1px solid var(--line); }
  .site-header .site-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0; font-size: 16px; }
  .site-header .site-nav a::after { bottom: 8px; }
  .site-header .auth-slot { order: 4; display: none; flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; min-width: 0; padding: 4px 0 16px; }
  .site-header .site-menu-toggle:checked ~ .site-nav { display: flex; }
  .site-header .site-menu-toggle:checked ~ .auth-slot { display: flex; }
  /* SER-631: signed in, the Account menu stays in the bar as the avatar circle, next to the menu button. */
  .site-header .auth-slot.auth-in { order: 1; display: flex; flex: 0 0 auto; padding: 0; }
  .site-header .acct .acct-btn { padding: 0 5px; }
  .site-header .acct .acct-lbl { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* SER-631: on phones the open Account menu spans the header's width, right under it. */
@media (max-width: 860px) {
  .site-header .acct { position: static; }
  .site-header .acct .acct-menu { top: 100%; left: 0; right: 0; width: auto; max-width: none; }
}

/* ---------------------------------------------------------------- breadcrumbs */
/* On the page background (old pages are light), so the colours stay neutral until the redesign. */
.site-breadcrumbs { background: transparent; padding: 12px 0; font-size: 14px; color: #888; }
.site-breadcrumbs a { color: inherit; text-decoration: underline; }
.site-breadcrumbs .sep { margin: 0 6px; }

/* ---------------------------------------------------------------- footer */
.site-footer { display: block; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line); background: var(--bg); color: var(--tx); font-size: 14px; }
.site-footer p { margin: 0; color: inherit; font-size: inherit; line-height: 1.6; opacity: 1; }
.site-footer a { margin: 0; opacity: 1; }
/* page-specific footer content (related links, data notes) above the shared columns */
.site-footer .site-footer-page { padding: 32px 0; border-bottom: 1px solid var(--line); color: var(--mu); text-align: center; }
.site-footer .site-footer-page a { color: var(--link); text-decoration: none; }
.site-footer .site-footer-page a:hover { color: var(--tx); text-decoration: underline; }
.site-footer .site-footer-page p + p { margin-top: 8px; }
.site-footer-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 64px 0 40px; }
.site-footer .site-footer-brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer .site-footer-brand a { display: inline-flex; align-self: flex-start; max-width: 100%; }
.site-footer .site-footer-brand img { display: block; width: auto; height: 22px; max-width: 100%; }
.site-footer .site-footer-brand p { color: var(--mu); max-width: 340px; }
.site-footer .foot-col a { padding: 2px 0; }
.site-footer-bottom { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 18px 0 32px; border-top: 1px solid var(--line); color: var(--mu); font-size: 13px; }
@media (max-width: 980px) {
  .site-footer-cols { grid-template-columns: 1fr; padding-top: 48px; }
  .site-footer .site-footer-brand img { height: auto; width: 100%; max-width: 410px; }
}

/* Car-make marks (SER-597, render/make-logo.js): single-colour SVG masked over currentColor, so the mark
   takes the text colour at rest and the accent on hover/selected (HANDOFF rule 4). Size comes inline. */
.make-mark { display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }