/* ==========================================================================
   Jitcar — LOTLINE design tokens
   Single source of truth per DESIGN.md §2. No color, font, radius, or
   shadow may appear in any template that is not a token from this file.
   ========================================================================== */

:root {

  /* --- Color · brand ---------------------------------------------------- */
  --asphalt:    #23262B;  /* ink: primary text, dark surfaces, sticker headers, paybar */
  --asphalt-2:  #2E323A;  /* secondary dark surface */
  --stage:      #31353D;  /* photo/vehicle stage background */
  --concrete:   #F1F0EB;  /* page background, the default surface */
  --lane:       #F5C518;  /* primary action + highlight — road-marking scarcity, never decorative fills */
  --guide:      #1D6B45;  /* reserved exclusively for VERIFIED truth */

  /* --- Color · supporting ----------------------------------------------- */
  --guide-bg:   #E3F0E8;  /* fit-chip tint */
  --lane-ink:   #7A5D00;  /* text on pale yellow tints */
  --steel:      #6A6E76;  /* secondary text */
  --hairline:   #DEDEDA;
  --hairline-2: #CFCFC9;

  /* Derived neutrals — tints of asphalt on concrete. Derive, don't invent hues. */
  --fill-quiet:    #E9E9E2;                  /* est-chip / droptag fill (boards) */
  --asphalt-08:    rgba(35, 38, 43, .08);    /* quiet hover fills */
  --overlay-light: rgba(255, 255, 255, .14); /* favorite button on the stage */
  --steel-2:       #B9BCC2;                  /* secondary text on dark surfaces (paybar) */
  --guide-border:  #CBE2D4;                  /* border on guide-bg tinted panels */

  /* --- Color · functional only (not brand) ------------------------------ */
  --error:      #B3261E;  /* form field validation ONLY — never on vehicle cards (§4 gap-closer rule) */

  /* --- Type ------------------------------------------------------------- */
  /* Display + UI + body: Overpass. Data (every number a shopper compares):
     Overpass Mono. Self-hosted woff2 in the production app; no third font, ever. */
  --sans: 'Overpass', 'Overpass Fallback', system-ui, -apple-system, sans-serif;
  --mono: 'Overpass Mono', 'Overpass Mono Fallback', ui-monospace, 'SFMono-Regular', monospace;

  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;      /* mono data emphasis — chips, pay heroes */
  --w-extrabold: 800;
  --w-black: 900;

  /* Modular scale — the only permitted type steps. */
  --fs-2xs:  0.6875rem;  /* 11px — status chips, stock numbers, card footers */
  --fs-xs:   0.75rem;    /* 12px — kickers, card meta, footnotes */
  --fs-sm:   0.8125rem;  /* 13px — labels, filter rows */
  --fs-base: 0.9375rem;  /* 15px — body */
  --fs-md:   1.0625rem;  /* 17px — card titles, leads */
  --fs-lg:   1.25rem;    /* 20px — paybar payment hero */
  --fs-xl:   1.375rem;   /* 22px — card payment hero */
  --fs-2xl:  1.6875rem;  /* 27px — section headlines */
  --fs-3xl:  2rem;       /* 32px — sticker payment hero (~31–34) */
  --fs-4xl:  2.5rem;     /* 40px — display */

  --lh-tight: 1.15;
  --lh-body:  1.5;

  /* --- Shape ------------------------------------------------------------ */
  --radius-control: 6px;   /* status chips, badges, small controls */
  --radius-field:   11px;  /* search fields, segmented controls, filter buttons (boards) */
  --radius-card:    14px;  /* cards, sheets */
  --radius-pill:    999px; /* filter chips, the header budget chip */

  /* --- Elevation — flat paper: hairlines, near-zero shadows -------------- */
  --shadow-sheet: 0 1px 2px rgba(35, 38, 43, .05), 0 12px 34px rgba(35, 38, 43, .10);
  /* the one soft elevation token, for sheets/modals only */

  /* --- Spacing (4px base) ------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- Motion — one orchestrated moment per page max (§9) ---------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-reveal: 320ms; /* the budget-state flip — the page's earned moment */

  /* --- Pattern — the one sanctioned pattern-fill (§2) --------------------
     Dashed lane-line motif for dark hero bands. */
  --lane-dashes: repeating-linear-gradient(
    90deg,
    var(--lane) 0 26px,
    transparent 26px 44px
  );
}

/* ==========================================================================
   Jitcar — LOTLINE base layer
   Type, buttons, forms, chips, badges, vehicle card, odometer digits.
   Consumes tokens.css only — no raw color/font/radius/shadow values here.
   Anatomy & spacing are provisional until verified against the v3 boards
   in design/reference/ (boards are canonical for anatomy and spacing).
   ========================================================================== */

/* --- Fonts — self-hosted variable woff2 (production app; boards load
       Google Fonts intentionally for standalone use). One file per family
       covers all permitted weights (latin subset, OFL — licenses alongside).
       Preload both in every template head — both faces are above the fold
       on every page:
       <link rel="preload" href="/design/fonts/overpass-var.woff2"
             as="font" type="font/woff2" crossorigin>
       <link rel="preload" href="/design/fonts/overpass-mono-var.woff2"
             as="font" type="font/woff2" crossorigin> -------------------- */
@font-face {
  font-family: 'Overpass';
  src: url('fonts/overpass-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass Mono';
  src: url('fonts/overpass-mono-var.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

/* Metric-matched local fallbacks — keeps font-display:swap (DESIGN.md §2)
   while killing swap-shift CLS. Arial's synthetic bolding diverges from
   Overpass as weight climbs, so size-adjust is per weight band (DOM-measured
   2026-07-30: 400→99.8% · 600→102.2% · 700→103.4% · 800→104.7% · 900→108%).
   Liberation Sans/Mono = the Arial/Courier metric twins on Linux (CI). */
@font-face {
  font-family: 'Overpass Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  font-weight: 100 499;
  size-adjust: 100%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  font-weight: 500 649;
  size-adjust: 102.2%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  font-weight: 650 749;
  size-adjust: 103.4%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  font-weight: 750 849;
  size-adjust: 104.7%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass Fallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  font-weight: 850 950;
  size-adjust: 108%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass Mono Fallback';
  src: local('Courier New'), local('Liberation Mono');
  size-adjust: 102.6%;
  ascent-override: 88%; descent-override: 38%; line-gap-override: 0%;
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Document ----------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--asphalt);
  background: var(--concrete);
  -webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus — quality floor §9 */
:focus-visible {
  outline: 2px solid var(--asphalt);
  outline-offset: 2px;
}
.dark :focus-visible,
.on-dark :focus-visible {
  outline-color: var(--lane);
}

img, svg { display: block; max-width: 100%; }

/* Stroke icon default (boards' .ico convention) */
.ico {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

a {
  color: inherit;
  text-decoration-color: var(--lane);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- Type --------------------------------------------------------------- */
/* Sentence case everywhere, including buttons — enforced in copy, not CSS. */
h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--w-black);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-md);  font-weight: var(--w-extrabold); letter-spacing: 0; }

/* Every number a shopper compares is set in mono. */
.mono {
  font-family: var(--mono);
}

.kicker {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--w-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
}

.muted { color: var(--steel); }

/* --- Buttons ------------------------------------------------------------
   Sentence case. Buttons say what happens and keep the same name through
   the flow. Text on lane is always asphalt, never white. ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: var(--w-extrabold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn-primary {
  background: var(--lane);
  color: var(--asphalt);
}
.btn-primary:hover { filter: brightness(.96); }

.btn-secondary {
  background: transparent;
  color: var(--asphalt);
  border-color: var(--hairline-2);
}
.btn-secondary:hover { border-color: var(--asphalt); }

/* Secondary on dark surfaces (paybar, sticker header) */
.on-dark .btn-secondary {
  color: var(--concrete);
  border-color: var(--asphalt-2);
}

.btn-dark {
  background: var(--asphalt);
  color: #fff;
}

.btn-block {
  width: 100%;
  margin-top: 12px;
}

.btn-quiet {
  background: transparent;
  color: var(--asphalt);
  min-height: 40px;
  font-weight: var(--w-semibold);
  text-decoration: underline;
  text-decoration-color: var(--lane);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* Time expectation under a primary button (§3 forms) */
.btn-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--steel);
  text-align: center;
}

/* --- Forms ---------------------------------------------------------------
   Multi-step, one question cluster per screen, big targets. Consent
   checkboxes unticked by default (markup rule). ---------------------------- */
.field { margin-bottom: var(--sp-5); }

.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--w-semibold);
  margin-bottom: var(--sp-2);
}

.input,
select.input,
textarea.input {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-control);
  background: #fff;
  font-family: var(--sans);
  font-size: var(--fs-base);
  color: var(--asphalt);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--asphalt);
}
.input::placeholder { color: var(--steel); }

/* Numeric inputs a shopper compares (down payment, term) are data */
.input-mono { font-family: var(--mono); }

/* Errors say what went wrong and how to fix it — never apologize, never vague.
   --error is functional-only: fields, never vehicle cards. */
.field.is-error .input { border-color: var(--error); }
.field-error {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--error);
}

.field-help {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--steel);
}

/* Consent row — plain language, unticked by default */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--asphalt);
  flex: none;
}

/* Soft-pull assurance beside any credit-adjacent step */
.assurance {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--guide);
  font-weight: var(--w-semibold);
}

/* --- Filter / pay chips — pill form (boards: header paychips, filter rows) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.on-dark .chip {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .24);
  color: var(--concrete);
  font-family: var(--mono);
}
.chip.on {
  background: var(--lane);
  border-color: var(--lane);
  color: var(--asphalt);
}

/* --- Status chips (§3) — exactly one per card. Rectangular, control radius. */
.fitchip,
.gapchip,
.estchip,
.droptag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  white-space: nowrap;
}

/* Verified only. Green means verified — using it on an estimate devalues
   the whole system. */
.fitchip {
  background: var(--guide-bg);
  color: var(--guide);
}

/* The gap-closer: sells the fix, never red-flags the car. */
.gapchip {
  background: var(--lane);
  color: var(--asphalt);
}

/* The pre-flip default. */
.estchip {
  background: var(--fill-quiet);
  color: var(--steel);
}

/* May accompany any state: "↓ $500 · 12 days listed" */
.droptag {
  gap: 4px;
  background: var(--fill-quiet);
  color: var(--asphalt);
}

/* --- Badges — the two-badge system (§3) ----------------------------------
   Market badges are estimates and always carry "· est." (copy rule).
   Fit badges are verified budget truth. Green never makes a market claim. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  line-height: 1.4;
}
.badge-market {
  background: var(--concrete);
  color: var(--asphalt);
}
.badge-fit {
  background: var(--guide);
  color: #fff; /* white on guide is fine at chip sizes and up */
}

/* --- Vehicle stage (§3) --------------------------------------------------
   Dark showroom stage, lane-yellow ground line under the wheels. Live feed
   photos ride the same treatment so cards stay lit and consistent. */
.stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 16px;
  background: var(--stage);
  overflow: hidden;
  aspect-ratio: 16 / 10; /* boards use fixed heights (150/158px) on fixed-width
                            frames; ratio ≈ equivalent at fluid card widths */
}
.stage::after {
  /* the ground line */
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--lane);
  opacity: .85;
}
.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.stage .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.fav {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--overlay-light);
  color: #fff;
  cursor: pointer;
}

/* --- Vehicle card — "the sticker" (§3) ------------------------------------
   Stage → title → mono meta → payline → dashed footer. One component,
   two layouts (mobile & 3-up desktop grid). Anatomy per the v3 boards. */
.vcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.vbody { padding: 13px 14px 11px; }

.vbody h4 {
  font-size: var(--fs-base);
  font-weight: var(--w-extrabold);
  letter-spacing: 0;
  line-height: var(--lh-tight);
}

/* Mileage written plainly here ("41,220 mi") — odometer zeros live only in
   odometer-styled components. */
.vmeta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--steel);
}

/* The payline: payment hero + status chip + price sub. The payment is the
   typographic hero; cash price demotes to a small mono secondary. */
.payline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.pay-hero {
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: var(--w-bold);
  letter-spacing: -.01em;
  line-height: 1;
}
.pay-hero.fit { color: var(--guide); }   /* verified fit only */
.pay-sub {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--steel);
}

/* Dashed footer: stock number + barcode motif */
.vfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--hairline-2);
}
.stock {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--steel);
  letter-spacing: .04em;
}
.barcode {
  width: 66px;
  height: 18px;
  opacity: .85;
  background: repeating-linear-gradient(
    90deg,
    var(--asphalt) 0 2px, transparent 2px 4px,
    var(--asphalt) 4px 7px, transparent 7px 9px,
    var(--asphalt) 9px 10px, transparent 10px 13px
  );
}

/* --- Odometer digits (§3) --------------------------------------------------
   Boxed mono digits, lane numerals on asphalt. The two reveal moments:
   pre-qual budget and instant trade value. */
.odo {
  display: inline-flex;
  gap: 3px;
}
.odo span {
  display: grid;
  place-items: center;
  min-width: 1.5em;
  padding: .3em .1em .2em;
  background: var(--asphalt);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--fs-3xl);
  font-weight: var(--w-black);
  line-height: 1;
  color: var(--lane);
}
.odo span.sep {
  background: transparent;
  color: var(--asphalt);
  min-width: auto;
}

/* --- Dark hero band with the lane-dash motif ------------------------------ */
.hero-band {
  background: var(--asphalt);
  color: var(--concrete);
}
.hero-band .lane-line {
  height: 4px;
  background: var(--lane-dashes);
}

/* ==========================================================================
   Jitcar — SRP template layer (/car/search)
   Header, filter rail, toolbar, count line, grid, soft-pull invitation,
   pagination. Anatomy per design/reference/ v3 boards (D2 desktop,
   frames 02/03 mobile), values mapped to tokens.
   One component, two layouts: same card markup desktop and mobile.
   ========================================================================== */

/* --- Site header --------------------------------------------------------- */
.site-head {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 14px 28px;
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}
.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-lg);
  font-weight: var(--w-black);
  color: var(--asphalt);
  text-decoration: none;
}
.logo b {
  width: 17px;
  height: 4.5px;
  border-radius: 3px;
  background: var(--lane);
}
.site-nav {
  display: flex;
  gap: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
}
.site-nav a { color: var(--asphalt); text-decoration: none; }
.site-nav a.on {
  border-bottom: 2.5px solid var(--lane);
  padding-bottom: 2px;
}
.site-nav a em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  background: var(--asphalt);
  color: var(--lane);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: 2px;
}
.site-head .grow { flex: 1; }

/* The header budget chip — guide green, persists site-wide after the soft
   pull. Server renders it hidden (estimate state); the budget-state body
   class reveals it. Green = verified only. */
.hbudget {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--guide);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
}
.hbudget .ico { width: 14px; height: 14px; }
.budget-state .hbudget { display: inline-flex; }

/* --- SRP layout ---------------------------------------------------------- */
.srp {
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 18px;
  padding: 18px 28px 34px;
  align-items: start;
  max-width: 1260px;
  margin: 0 auto;
}
.srp-main { min-width: 0; }

/* --- Filter rail — leads with payment (§7) ------------------------------- */
.drail {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 15px 15px 17px;
}
.drail h5 {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 14px 0 8px;
}
.drail h5:first-child { margin-top: 0; }

/* Cash price / Monthly payment — defaults to Monthly payment */
.seg {
  display: flex;
  background: var(--concrete);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-field);
  padding: 3px;
}
.seg > * {
  flex: 1;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  padding: 7px 2px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--steel);
  cursor: pointer;
}
.seg .on {
  background: var(--asphalt);
  color: #fff;
}

/* Range slider visuals (enhancement layer draws thumbs over real inputs) */
.range {
  position: relative;
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  margin: 10px 8px 6px;
}
.range i {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--lane);
  border-radius: 2px;
}
.range s {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2.2px solid var(--asphalt);
  transform: translate(-50%, -50%);
}
.range-lab {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--steel);
  margin: 10px 2px 6px;
}

/* Make rows with live counts (truth rule 2: sourced live or removed) */
.checkrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: var(--fs-sm);
}
.checkrow input[type="checkbox"] {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  accent-color: var(--asphalt);
  flex: none;
}
.checkrow label { flex: 1; }
.checkrow .count {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--steel);
}

.drail .btn { width: 100%; margin-top: 12px; }

/* --- Toolbar: search restatement + sort ---------------------------------- */
.srp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.msearch {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-field);
  padding: 10px 13px;
  font-size: var(--fs-sm);
  color: var(--steel);
}
.msearch .ico { width: 15px; height: 15px; }
.sortchip {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-field);
  padding: 10px 13px;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  background: #fff;
  white-space: nowrap;
}
.sortchip .ico { width: 14px; height: 14px; }

/* Mobile filters trigger (offcanvas) */
.tbtn {
  display: none;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-field);
  padding: 9px 12px;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  background: #fff;
}
.tbtn .ico { width: 15px; height: 15px; }
.tbtn i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  background: var(--asphalt);
  color: var(--lane);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}

/* --- Count line — says what mode the shopper is in ----------------------- */
.countline {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--steel);
  letter-spacing: .04em;
  margin: 0 2px 12px;
  text-transform: uppercase;
}

/* --- Results grid — 3-up at full width (§7) ------------------------------ */
.srp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Whole card clickable via stretched title link; fav stays above (z2) */
.vcard .cover { color: inherit; text-decoration: none; }
.vcard .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Soft-pull invitation — lane-topped card in the results list (§4) ----- */
.convert {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.convert > i {
  display: block;
  height: 4px;
  background: var(--lane);
}
.convert > div {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 12px 14px;
}
.convert b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--w-extrabold);
}
.convert span {
  font-size: var(--fs-xs);
  color: var(--steel);
}
.convert .ico {
  width: 22px;
  height: 22px;
  color: var(--lane-ink);
  flex: none;
}
.convert .btn {
  min-height: 0;
  padding: 9px 14px;
  font-size: var(--fs-xs);
}
/* Once the shopper is in budget state the invitation has done its job */
.budget-state .convert { display: none; }

/* --- Mobile budget banner (frame 03) — revealed with the flip ------------ */
.budget-banner {
  display: none;
  align-items: center;
  gap: 9px;
  margin: 12px 14px 0;
  background: var(--guide);
  border-radius: var(--radius-field);
  padding: 11px 13px;
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  color: #fff;
}
.budget-banner .ico { width: 16px; height: 16px; flex: none; }
.budget-banner .grow { flex: 1; line-height: 1.3; }
.budget-banner small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: var(--w-semibold);
  color: var(--guide-bg);
}
.budget-banner a {
  font-weight: var(--w-bold);
  color: var(--guide-bg);
  text-decoration: none;
}

/* --- Pagination — self-canonical, crawlable prev/next (SEO.md §2) --------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.pager a, .pager .cur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--asphalt);
  text-decoration: none;
}
.pager .cur {
  background: var(--asphalt);
  border-color: var(--asphalt);
  color: #fff;
}

/* --- Site footer — small, honest link set (SEO.md §2) --------------------- */
.site-foot {
  background: var(--asphalt);
  color: var(--concrete);
  margin-top: var(--sp-10);
}
.site-foot .lane-line { height: 4px; background: var(--lane-dashes); }
.site-foot-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: var(--sp-8) 28px var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-6);
}
.site-foot h6 {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--sp-2);
}
.site-foot ul { list-style: none; }
.site-foot li { padding: 3px 0; }
.site-foot a {
  color: var(--concrete);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.site-foot .legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--asphalt-2);
  padding-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--steel);
}

/* --- Responsive — one component, two layouts; floor is 360px (§9) --------- */
@media (max-width: 1000px) {
  .srp { grid-template-columns: 1fr; padding: 12px 14px 34px; }
  .drail { display: none; } /* offcanvas enhancement re-mounts it */
  .tbtn { display: flex; }
  .srp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .site-head { padding: 12px 14px; gap: var(--sp-4); }
  .site-nav { display: none; } /* menu button enhancement */
  .budget-state .budget-banner { display: flex; margin: 12px 0 0; }
}
@media (max-width: 680px) {
  .srp-grid { grid-template-columns: 1fr; }
  .sortchip { display: none; } /* sort moves into the filters sheet */
}

/* ==========================================================================
   Jitcar — budget state (estimate mode)
   The flip mechanics per DESIGN.md §4, in the §4 fallback dress: no lender
   panel exists yet, so NOTHING here wears guide green — fit/headroom/gap
   figures are estimates and say so. When a soft-pull provider lands, the
   same slots/classes switch to the verified green treatment.
   ========================================================================== */

/* --- Header budget chip — estimate variant (asphalt, NOT guide green) ----- */
.hbudget.est {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--asphalt);
  color: var(--concrete);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  cursor: pointer;
}
.budget-state .hbudget.est { display: inline-flex; }
.hbudget.est .clear {
  color: var(--steel-2);
  font-weight: var(--w-regular);
}

/* --- Card chips in estimate-budget mode ----------------------------------- */
/* fits: asphalt-bold — deliberately NOT the green fitchip */
.fitchip-est {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  background: var(--fill-quiet);
  color: var(--asphalt);
  white-space: nowrap;
}
/* the gap-closer sells the fix — lane is action, not verified truth */
.gapchip-est {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: var(--w-bold);
  background: var(--lane);
  color: var(--asphalt);
  white-space: nowrap;
}
.budget-state .vcard.fit .fitchip-est,
.budget-state .vcard.gap .gapchip-est { display: inline-flex; }
.budget-state .vcard.fit .estchip,
.budget-state .vcard.gap .estchip { display: none; }

/* The one orchestrated moment (§9): a quiet settle on the payline. */
@media (prefers-reduced-motion: no-preference) {
  .vcard .payline { transition: opacity var(--dur-reveal) var(--ease); }
  .budget-flipping .vcard .payline { opacity: .35; }
}

/* --- Budget setter (replaces the soft-pull invite until a lender exists) --- */
.budget-setter form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.budget-setter .field { margin: 0; flex: 1; min-width: 120px; }
.budget-setter output {
  font-family: var(--mono);
  font-weight: var(--w-bold);
  font-size: var(--fs-base);
  display: block;
  margin-bottom: 2px;
}
.budget-setter input[type="range"] {
  width: 100%;
  accent-color: var(--asphalt);
}

/* --- VDP sticker in estimate-budget mode ---------------------------------- */
.budget-state .sticker-top .est-note { color: var(--lane); }