/* ==========================================================================
   AVAVA Motors — Car Dealer marketing homepage
   Design tokens and component styles per design_handoff_car_dealer/README.md

   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   01. Fonts .................. @font-face for the AVAVA wordmark
   02. Tokens ................. colours, type, spacing, shadows, accent
   02b. Dark theme ............ corrections that a naive inversion gets wrong
   03. Base ................... reset, typography defaults, focus, skip link
   04. Shared primitives ...... .section, .mono, .pill, .btn, .sec-head, .ph
   05. Header / navigation .... sticky bar, dropdown, flyout, mobile toggle
   06. Hero ................... configurator card, stage, rails, body picker
   06b. Hero v2 ............... search form variant (index2.html)
   07. Why AVAVA .............. value cards, icon badges, stat strip
   08. Featured listings ...... bento grid, tiles, overlays
   09. How it works ........... numbered step cards
   10. Finance calculator ..... dark panel, range sliders
   11. Trade-in ............... estimate panel, form, gauge, value drivers
   12. Testimonials ........... rating block, marquee, review cards
   13. Locations .............. map, pins, flagship card, city strip
   14. CTA .................... test-drive panel, pulse badge, chips
   15. Our brands ............. outlined logo row
   16. Footer ................. statement, columns, wordmark, city ticker
   17. Responsive ............. 1600 / 1360 / 1180 / 860 breakpoints
   18. Motion preferences ..... prefers-reduced-motion
   19. Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'BBH Bartle';
  src: url('../assets/fonts/BBHBartle-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  /* Surfaces ---------------------------------------------------------- */
  --page: #F1EEE7;          /* body and every section background */
  --surface: #FBFAF5;       /* cards, panels, dropdowns, inputs, rail buttons */
  --surface-2: #EDE9E0;     /* image beds, thumbnail placeholders */
  --surface-emph: #171512;  /* emphasis bands: finance, CTA, footer, dark cards */
  --surface-zebra: #F6F4EE; /* alternating rows inside a --surface table */
  --row-alt: #F4F1EA;       /* a picked row in the compact listing table */
  --map-bed: #E8E3D9;       /* the map canvas behind the pins */
  --surface-sel: #F4F1EA;   /* the chosen option in a pill group */
  --warn: #C96A3A;          /* the one "look at this" colour — never flips */

  /* Ink ---------------------------------------------------------------- */
  --ink: #171512;           /* primary text, icon strokes, control fills */
  --ink-2: #6E6A5F;         /* secondary text, field labels, chevrons */
  --ink-3: #6F6C62;         /* body copy under headings */
  --ink-4: #5F5C53;         /* link hover */
  --on-emph: #F1EEE7;       /* text inside emphasis bands — same in both themes */
  --on-accent: #171512;     /* text/icons on the accent — the accent never flips */
  --ink-placeholder: #676358;

  /* Accent — identical in both themes ---------------------------------- */
  --accent: #C96A3A;
  --accent-rgb: 201, 106, 58;
  --accent-hover: #d87c4b;

  /* Hairlines and shadows ---------------------------------------------- */
  --hairline-rgb: 23, 21, 18;
  --shadow-rgb: 23, 21, 18;
  --shadow-plus: 0;

  color-scheme: light;
}

[data-theme="dark"] {
  /* One step deeper than the light theme's ink, so the emphasis bands
     (#1E1B16) still read as raised surfaces above the page. */
  --page: #12100E;
  --surface: #1B1814;
  --surface-2: #232019;
  --surface-emph: #1E1B16;
  --surface-zebra: #201D18;
  --row-alt: #26221B;
  --map-bed: #211D16;
  --surface-sel: #26221B;
  --warn: #C96A3A;

  /* Greys step up in lightness rather than mirroring — a mathematical
     inversion of #8C887D lands muddy on a near-black page. */
  --ink: #F1EEE7;
  --ink-2: #9E9889;
  --ink-3: #A5A093;
  --ink-4: #B3AEA1;
  --on-emph: #F1EEE7;
  --on-accent: #171512;
  --ink-placeholder: #8b8677;

  --hairline-rgb: 241, 238, 231;
  --shadow-rgb: 0, 0, 0;     /* never inverted — a light shadow reads as a halo */
  --shadow-plus: .25;

  color-scheme: dark;
}

:root {
  /* Legacy aliases — components below still read these names. */
  --bg-page: var(--page);
  --bg-surface: var(--surface);
  --bg-tile: var(--surface-2);
  --bg-dark: var(--ink);
  --bg-dark-2: var(--surface-2);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-3);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-2);
  --text-placeholder: var(--ink-placeholder);
  --text-on-dark: var(--on-emph);

  --line-06: rgba(var(--hairline-rgb), .06);
  --line-09: rgba(var(--hairline-rgb), .09);
  --line-10: rgba(var(--hairline-rgb), .10);
  --line-12: rgba(var(--hairline-rgb), .12);
  --line-14: rgba(var(--hairline-rgb), .14);
  --line-16: rgba(var(--hairline-rgb), .16);
  --line-18: rgba(var(--hairline-rgb), .18);

  /* Dividers inside emphasis bands stay light-on-dark in both themes. */
  --dline-14: rgba(241, 238, 231, .14);
  --dline-16: rgba(241, 238, 231, .16);
  --dline-18: rgba(241, 238, 231, .18);
  --dline-20: rgba(241, 238, 231, .20);
  --dline-28: rgba(241, 238, 231, .28);
  --dlink: rgba(241, 238, 231, .66);

  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'BBH Bartle', 'Archivo', sans-serif;

  --pad-x: 56px;

  --shadow-card: 0 22px 44px -24px rgba(var(--shadow-rgb), calc(.34 + var(--shadow-plus)));
  --shadow-card-dark: 0 22px 44px -24px rgba(var(--shadow-rgb), calc(.50 + var(--shadow-plus)));
  --shadow-float: 0 20px 40px -18px rgba(var(--shadow-rgb), calc(.50 + var(--shadow-plus)));
  --shadow-rail: 0 4px 14px -6px rgba(var(--shadow-rgb), calc(.30 + var(--shadow-plus)));
  --shadow-menu: 0 24px 48px -20px rgba(var(--shadow-rgb), calc(.32 + var(--shadow-plus)));

  /* hero decorative watermark vertical nudge */
  --perf-y: -55px;
}

/* --------------------------------------------------------------------------
   2b. Dark-theme corrections
   The emphasis bands are no longer far darker than the page, so the four
   biggest carry an accent hairline to keep the hierarchy readable.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .card--dark,
[data-theme="dark"] .finance__card,
[data-theme="dark"] .cta__card,
[data-theme="dark"] .review--dark {
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* "Transparent pricing" is the one inverted card in Why AVAVA. It stands out
   by being the opposite of the page: black on cream in light, cream on black
   in dark. Scoped with :not(.step) so the How-It-Works card is untouched. */
[data-theme="dark"] .card--dark:not(.step) {
  background: var(--on-emph);
  border-color: var(--on-emph);
  color: var(--page);
}
[data-theme="dark"] .card--dark:not(.step) .card__text {
  color: var(--page);
  opacity: .74;
}
/* Diamond takes the accent, its glyph the card fill. */
[data-theme="dark"] .card--dark:not(.step) .badge--diamond {
  background: var(--accent);
}
[data-theme="dark"] .card--dark:not(.step) .badge--diamond svg {
  stroke: var(--on-accent);
}
[data-theme="dark"] .card--dark:not(.step) .badge--diamond svg circle {
  fill: var(--on-accent);
}

/* Step 1 of How It Works plays the same role as the pricing card: it is the
   one inverted tile in its row, so in dark it flips to cream too. */
[data-theme="dark"] .card--dark.step {
  background: var(--on-emph);
  border-color: var(--on-emph);
  color: var(--page);
}
[data-theme="dark"] .card--dark.step .step__text {
  color: var(--page);
  opacity: .74;
}
/* Ghost numeral needs a darker tint now that the tile is light. */
[data-theme="dark"] .card--dark.step .step__ghost {
  color: rgba(var(--accent-rgb), .22);
}
/* Badge keeps the accent; its glyph takes the tile fill. */
[data-theme="dark"] .card--dark.step .step__badge {
  background: var(--accent);
  color: var(--on-accent);
}

/* Placeholder hatch follows the surface instead of staying cream. */
[data-theme="dark"] .ph {
  background: repeating-linear-gradient(45deg,
    #201d17, #201d17 9px, #26221b 9px, #26221b 18px);
}
[data-theme="dark"] .av {
  background: repeating-linear-gradient(45deg,
    #262219, #262219 6px, #2e2a20 6px, #2e2a20 12px);
}
[data-theme="dark"] .trade__estimate {
  background: radial-gradient(120% 100% at 50% 30%, #211d18, #17140f);
}
/* Slider thumb ring picks up the band it sits on. */
[data-theme="dark"] input[type=range].fin::-webkit-slider-thumb,
[data-theme="dark"] input[type=range].fin::-moz-range-thumb {
  border-color: var(--surface-emph);
}
[data-theme="dark"] .bigwm { -webkit-text-stroke-color: rgba(241, 238, 231, .16); }

/* The condition gauge is the one card in Trade-in that flips polarity in dark,
   the same way "Transparent pricing" does in Why AVAVA — it keeps a single
   high-contrast element in the block. Applies wherever Trade-in renders: both
   homepages and the loan calculator. The conic track darkens to suit the now
   light surface it sits on. */
[data-theme="dark"] .gauge-panel {
  background: var(--on-emph);
  color: var(--ink-inverse, #171512);
}
[data-theme="dark"] .gauge-panel__title,
[data-theme="dark"] .gauge-panel__scale { color: #171512; }
[data-theme="dark"] .gauge__inner { background: var(--on-emph); }
[data-theme="dark"] .gauge__value,
[data-theme="dark"] .gauge__label { color: #171512; }
[data-theme="dark"] .gauge {
  background: conic-gradient(var(--accent) 0deg 270deg, rgba(23, 21, 18, .18) 270deg 360deg);
}

/* Themed surfaces cross-fade so switching doesn't flash. */
body,
.header,
.card,
.hero__card,
.picker,
.searchpanel,
.finance__card,
.cta__card,
.footer,
.tin,
.hsel select,
.dropdown,
.flyout {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .header, .card, .hero__card, .picker, .searchpanel,
  .finance__card, .cta__card, .footer, .tin, .hsel select,
  .dropdown, .flyout { transition: none; }
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto keeps images in proportion. Without it the width/height
   attributes in the markup act as CSS at zero specificity, so a rule that
   sets only the width leaves the attribute height in place and squashes
   the picture. Components that need a fixed box override this. */
img,
svg { display: block; max-width: 100%; height: auto; }

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--ink-4); }

button { font-family: inherit; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.dark :focus-visible,
.footer :focus-visible,
.finance__card :focus-visible,
.cta__card :focus-visible,
.shopfit :focus-visible { outline-color: var(--accent); }

/* A component's own display value beats the UA's [hidden] rule, so grids and
   flex rows stay visible when JS hides them. Settle it once, here. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--page);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; color: var(--text-on-dark); }

/* --------------------------------------------------------------------------
   4. Shared primitives
   -------------------------------------------------------------------------- */
.section {
  width: 100%;
  padding: 40px var(--pad-x) 104px;
}
.section--tight { padding-top: 0; }
.section--flush { padding-left: 0; padding-right: 0; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Outlined pill label -------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--line-16);
  border-radius: 999px;
}
.pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.pill--on-dark { border-color: var(--dline-20); }
.pill--spaced { margin-bottom: 22px; }

/* Black pill button ---------------------------------------------------- */
/* One pill for every text button on the page. The header's "+ Add Listing" is
   the reference: 53px tall, 22px of padding on each side. Variants below may
   change colour, weight, width or the gap — but not the height and not the
   horizontal padding, or the row of buttons stops lining up. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 53px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--page);
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.btn:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  flex: none;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--accent .btn__arrow { background: var(--surface-emph); color: var(--accent); }

/* Section header ------------------------------------------------------- */
.sec-head { margin-bottom: 34px; }
.sec-head--center { text-align: center; margin-bottom: 44px; }
.sec-head .pill { margin-bottom: 22px; }

.sec-title {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .98;
}
.sec-sub {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 560px;
}
.sec-head--center .sec-sub { margin-left: auto; margin-right: auto; }

.split-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

/* Image placeholder (assets pending from client) ----------------------- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Light-theme hatch; [data-theme="dark"] overrides it in section 2b. */
  background:
    repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: var(--text-placeholder);
  text-align: center;
  padding: 12px;
}
.ph__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
}
.ph--fill { position: absolute; inset: 0; }

/* A real photograph in a slot the hatch would otherwise fill. `display:
   contents` takes the <picture> out of layout so the <img> sits exactly
   where the .ph sat — same box, same rules, nothing else to adjust. */
.shot { display: contents; }
.shot > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ --fill positions the image against its own box, so that box must be
   positioned. Several slots got `position: relative` from the .ph class they
   no longer carry; without this the image escaped to the viewport and drew
   itself 1440px wide inside a 300px card. Defensive on purpose — a slot that
   forgets can no longer take the page with it. */
.shot--fill > img { position: absolute; inset: 0; }
/* A dealer logo is a single SVG at every size, so it needs no <picture>
   and no variant folder — it just fills the circle it is given. */
.shotsvg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--pad-x);
  background: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 20;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-primary);
  white-space: nowrap;
  flex: 0 0 auto;
}
.logo:hover { color: var(--text-primary); }
.logo__mark { font-family: var(--font-display); font-weight: 400; }
/* Supplied wordmark. Inlined rather than <img> so its paths can take
   currentColor — the file ships black, which would vanish on the dark page.
   Height drives it; the viewBox keeps the 333:48 ratio. */
.logo__svg {
  height: 45px;
  width: auto;
  display: block;
  color: var(--text-primary);
}

.nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.nav__link[aria-current="page"] { font-weight: 600; color: var(--accent); }
.nav__link svg { transition: transform .2s ease; }

.navitem { position: relative; }
.navitem:hover > .nav__link,
.navitem.is-open > .nav__link { color: var(--accent); }
.navitem:hover > .nav__link svg,
.navitem.is-open > .nav__link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 14px;
  min-width: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--line-10);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 40;
}
/* Transparent bridge across the 14px gap so the cursor keeps the parent
   hovered on its way from the trigger down into the panel. Without it the
   dead space between them dismisses the panel mid-move. */
.dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.navitem:hover > .dropdown,
.navitem:focus-within > .dropdown,
.navitem.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  position: relative;
  transition: background .15s ease, color .15s ease;
}
/* A group row is a .hassub wrapper holding the button, so the separator has
   to know about both shapes or the hairline disappears around every group. */
.drow + .drow,
.drow + .hassub,
.hassub + .drow,
.hassub + .hassub { border-top: 1px solid rgba(var(--hairline-rgb), .08); }
.drow:hover { color: var(--accent); }
.drow svg { opacity: .5; flex: none; }
/* The active home variant, marked instead of the retired CURRENT badge. */
.drow[aria-current="page"] { color: var(--accent); }
/* Login and Signup open a modal rather than navigating, so they are buttons —
   strip the UA chrome so they read as ordinary rows. The hairline between
   rows still comes from `.drow + .drow`, which outranks this. */
button.drow {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
/* The row that opens a flyout is a real <button>, and the flyout is its
   sibling rather than its child: interactive content inside something with
   role="button" is invalid, and a control cannot contain what it opens.
   Being a button, it is also focusable without an injected tabindex — so
   the group stays reachable by keyboard even with scripting off. */
.hassub { position: relative; }
.hassub__btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }

.flyout {
  position: absolute;
  top: -11px;
  left: calc(100% + 12px);
  min-width: 230px;
  background: var(--bg-surface);
  border: 1px solid var(--line-10);
  border-radius: 18px;
  padding: 10px;
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 41;
}
/* Bridge across the 12px horizontal gap to the flyout, same idea as the
   panel bridge — lets a diagonal cursor path reach it without dismissal. */
.flyout::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}
.hassub:hover > .flyout,
.hassub:focus-within > .flyout,
.hassub.is-open > .flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.hassub:hover > .hassub__btn,
.hassub.is-open > .hassub__btn { background: rgba(var(--hairline-rgb), .06); }
.hassub:hover > .hassub__btn > svg,
.hassub.is-open > .hassub__btn > svg { opacity: .9; }

/* Per-menu panel widths (ADDENDUM-top-nav § Contents). */
.dropdown--explore { min-width: 250px; }
.flyout--explore { min-width: 220px; }
.dropdown--blog { min-width: 210px; }
.dropdown--shop { min-width: 230px; }
.dropdown--pages { min-width: 240px; }

/* The last item's panel would run off the right edge, so it opens leftward —
   and if it has flyouts, they open leftward too, or the second level lands
   240px past the viewport.

   Keyed to the POSITION, not to which menu happens to sit there. Pages used
   to carry `right:-16px` by name, which was correct only for as long as
   Pages was last; swapping two items would have quietly clipped a panel.
   Everything below reads the same on every page in the package. */
.nav > .navitem:last-child > .dropdown { left: auto; right: -16px; }
.nav > .navitem:last-child .flyout {
  left: auto;
  right: calc(100% + 12px);
  transform: translateX(-8px);
}
/* The bridge across the gap moves to the other side with it. */
.nav > .navitem:last-child .flyout::before { left: auto; right: -12px; }
/* And the chevron points where the flyout actually opens. */
.nav > .navitem:last-child .hassub__btn > svg { transform: rotate(180deg); }
/* Higher specificity than the rule above, so the open state still lands. */
.nav > .navitem:last-child .hassub:hover > .flyout,
.nav > .navitem:last-child .hassub:focus-within > .flyout,
.nav > .navitem:last-child .hassub.is-open > .flyout { transform: translateX(0); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 50%;
  transition: background .18s ease;
}
.iconbtn:hover { background: var(--line-06); }

/* Height, padding and arrow now come from .btn — this is the button they were
   all measured against. Only the fixed width and the wider gap are its own. */
.btn--cta {
  gap: 16px;
  width: 200px;
}

.navtoggle { display: none; }

/* --------------------------------------------------------------------------
   6. Hero — vehicle configurator
   -------------------------------------------------------------------------- */
.hero { padding: 4px var(--pad-x) 72px; }

.hero__card {
  position: relative;
  border: 1.5px solid var(--bg-dark);
  border-radius: 30px;
  padding: 44px 48px 40px;
  overflow: hidden;
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  z-index: 3;
}
.hero__title {
  font-size: 74px;
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.03em;
}
.hero__subtitle {
  margin-top: 14px;
  font-size: 18px;
  font-style: italic;
  color: var(--text-muted);
}
.hero__top .pill { margin-top: 18px; border-color: var(--line-18); }
.hero__price {
  font-size: 56px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
}
.hero__prices { text-align: right; }
.hero__monthly {
  margin-top: 12px;
  font-size: 18px;
  color: var(--text-muted);
}
.hero__monthly strong { color: var(--text-primary); font-weight: 600; }

.stage {
  position: relative;
  margin: 8px 0 30px;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin-top: -60px;
  transform: translateY(var(--perf-y));
}
.stage__watermark span {
  /* 197px is the design value at ~1920px+; scales down so the word stays
     inside the outlined card on narrower screens instead of being clipped. */
  font-size: min(197px, 10vw);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .9;
  white-space: nowrap;
  text-align: center;
  /* Follows the theme — a hardcoded dark stroke vanished on the dark page. */
  color: rgba(var(--hairline-rgb), .09);
  -webkit-text-stroke: 1.5px rgba(var(--hairline-rgb), .10);
}
/* The stroke needs a touch more presence against the deeper background. */
[data-theme="dark"] .stage__watermark span {
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: rgba(var(--hairline-rgb), .14);
}
@supports (-webkit-text-stroke: 1px black) {
  .stage__watermark span { color: transparent; }
}

.stage__carwrap {
  position: relative;
  width: 74%;
  max-width: 960px;
  aspect-ratio: 16 / 8;
  z-index: 2;
}
.stage__car {
  position: absolute;
  left: 50%;
  top: 140px;
  transform: translateX(-50%);
  width: 1311px;
  max-width: 136%;
  /* Height follows the width so the box never outgrows the car and leaves
     dead space above it once max-width kicks in on narrower screens. */
  height: auto;
}

.rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 4;
}
.rail--left { left: 0; }
.rail--right { right: 0; }

.rail__btn {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--bg-surface);
  box-shadow: var(--shadow-rail);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.rail__btn:hover { transform: scale(1.06); }
/* Social links share the rail button look; anchors need the colour pinned. */
a.rail__btn { color: var(--text-primary); text-decoration: none; }
a.rail__btn:hover { color: var(--on-accent); background: var(--accent); }
.rail__btn--text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

/* Theme switch — one glyph shows at a time; the active theme takes the accent. */
.rail__btn--theme .icon-moon { display: none; }
[data-theme="dark"] .rail__btn--theme .icon-sun { display: none; }
[data-theme="dark"] .rail__btn--theme .icon-moon { display: block; }
[data-theme="dark"] .rail__btn--theme {
  background: var(--accent);
  color: var(--on-accent);
}

/* Engine-sound buttons -------------------------------------------------- */
/* Brief press feedback so a muted visitor still sees the button respond. */
@keyframes railPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .45); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
.rail__btn.is-playing {
  background: var(--accent);
  color: var(--bg-dark);
  animation: railPulse .7s ease-out;
}
/* Engine running: the key button stays lit and ticks over gently. */
@keyframes railIdle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .30); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .06); }
}
.rail__btn.is-running {
  background: var(--accent);
  color: var(--bg-dark);
  animation: railIdle 1.1s ease-in-out infinite;
}

/* Body-style picker ---------------------------------------------------- */
.picker {
  background: var(--bg-surface);
  border-radius: 20px;
  padding: 26px 30px 28px;
  position: relative;
  z-index: 3;
}
.picker__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 20px;
}
.picker__title { font-size: 18px; font-weight: 700; }
.picker__sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.picker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.body-style {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 10px 20px;
  border-radius: 16px;
  border: 1px solid var(--line-12);
  background: var(--bg-page);
  cursor: pointer;
  overflow: hidden;
  transition: all .18s ease;
}
.body-style:hover { border-color: var(--bg-dark); transform: translateY(-3px); }
.body-style[aria-pressed="true"] {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}
.body-style[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 24px; right: 24px; bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--accent);
}
.body-style__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
}
/* Per-theme artwork: each card may carry a light and a dark shot, and only
   the one matching the active theme is rendered. Cards with a single image
   simply have no .thumb--dark and stay as-is. */
.thumb--dark { display: none; }
[data-theme="dark"] .body-style__thumb .thumb--light { display: none; }
[data-theme="dark"] .body-style__thumb .thumb--dark { display: block; }

/* Real photo in the slot. `contain` shows the shot exactly as supplied —
   whatever margin the photographer left around the car is preserved,
   nothing is cropped. */
.body-style__thumb picture { display: contents; }
.body-style__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.body-style__text { display: block; text-align: center; }
.body-style__name { display: block; font-size: 14px; font-weight: 700; }
.body-style__count {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--text-faint);
  margin-top: 3px;
}

.hero__float {
  display: flex;
  justify-content: center;
  margin-top: -30px;
  position: relative;
  z-index: 5;
}
.btn--float {
  gap: 18px;
  font-size: 17px;
  box-shadow: var(--shadow-float);
}

/* --------------------------------------------------------------------------
   6b. Hero variant v2 — search form (index2.html)
   Same slot as the body-style picker, but outlined instead of filled so the
   card's cream shows through.
   -------------------------------------------------------------------------- */
.searchpanel {
  position: relative;
  z-index: 3;
  background: transparent;
  border: 0.8px solid var(--bg-dark);
  border-radius: 20px;
  padding: 38px 34px 40px;
}
.searchpanel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 30px;
}
.searchpanel__title { font-size: 18px; font-weight: 700; }
.searchpanel__sub { font-size: 13px; color: var(--text-muted); margin-top: 5px; }

.statustabs { display: flex; gap: 8px; }
.statustab {
  padding: 9px 18px;
  border: 1px solid var(--line-16);
  background: transparent;
  color: var(--text-primary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.statustab:hover { border-color: var(--bg-dark); }
.statustab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
  border-color: var(--bg-dark);
  font-weight: 700;
}

.searchform {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}
.hslbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.hsel { position: relative; }
.hsel select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 15px 42px 15px 16px;
  border: 1px solid var(--line-18);
  border-radius: 12px;
  background: var(--bg-page);
  font: 500 15px var(--font-sans);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
}
.hsel select:focus { border-color: var(--bg-dark); }
.hsel .chev {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-muted);
}
.hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 50px;
  padding: 0 75px;
  background: var(--ink);
  color: var(--page);
  border: none;
  border-radius: 999px;
  font: 700 15px var(--font-sans);
  cursor: pointer;
  transition: all .2s ease;
}
.hbtn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

/* The search form is shorter than the tile grid — a taller stage margin
   keeps both hero cards ending at the same height. */
.page-v2 .stage { margin: 8px 0 99px; }

@media (max-width: 1180px) {
  .searchform { grid-template-columns: 1fr 1fr; }
  .hbtn { grid-column: span 2; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .searchpanel { padding: 24px 18px 26px; }
  .searchpanel__head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .searchform { grid-template-columns: 1fr; }
  .hbtn { grid-column: auto; }
  .page-v2 .stage { margin: 8px 0 24px; }
}

/* Home dropdown — wider than Listings, labels stay on one line. */
.dropdown--home { min-width: 330px; }
.dropdown--home .drow__label { white-space: nowrap; }

/* --------------------------------------------------------------------------
   7. Why AVAVA
   -------------------------------------------------------------------------- */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--line-10);
  border-radius: 22px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.card--dark {
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-color: transparent;
}
.card--dark:hover { box-shadow: var(--shadow-card-dark); }

.card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.card__text {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.card--dark .card__text { color: inherit; opacity: .72; }

/* Four deliberately different badge shapes */
.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-bottom: 26px;
}
.badge--circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--accent);
}
.badge--diamond {
  width: 46px; height: 46px;
  background: var(--accent);
  transform: rotate(45deg);
  margin-bottom: 29px;
}
.badge--diamond svg { transform: rotate(-45deg); }
.badge--ring {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  /* Outline-only badge — the glyph inherits this, so it follows the theme. */
  color: var(--ink);
}
.badge--square {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--ink);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
  border: 1px solid var(--line-12);
  border-radius: 20px;
  overflow: hidden;
}
.stats__cell {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 30px 34px;
}
.stats__cell + .stats__cell { border-left: 1px solid var(--line-12); }
.stats__value {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.stats__value em { font-style: normal; color: var(--accent); }
.stats__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------------------
   8. Featured listings — bento
   -------------------------------------------------------------------------- */
.section--listings { padding-top: 56px; }
.split-head--listings { margin-bottom: 34px; }
.listings__intro { max-width: 640px; }

.listings__title {
  font-size: 66px;
  line-height: .94;
  font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.listings__sub {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 460px;
}
.listings__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 22px;
}
.ministats {
  display: flex;
  align-items: baseline;
  gap: 26px;
}
.ministat { text-align: right; }
.ministat__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.ministat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-top: 3px;
}
.ministats__rule { width: 1px; height: 34px; background: var(--line-14); }

.bento {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 290px 290px;
  gap: 20px;
}
.bento__row {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tile {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-tile);
  display: block;
}
.tile--feature { grid-row: span 2; }

/* The six grid cards are <button>s — they pick what the feature tile shows,
   they don't navigate. Strip the UA button chrome so they render as tiles. */
.tile--pick {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Ring drawn inside so it follows the clipped corners and never shifts layout. */
.tile--pick[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 2px solid var(--accent);
  border-radius: inherit;
  pointer-events: none;
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(23, 21, 18, .66), transparent 55%);
}
.tile--feature .tile__scrim {
  background: linear-gradient(0deg, rgba(23, 21, 18, .72), transparent 52%);
}

.tile__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  padding: 5px 11px;
  background: rgba(241, 238, 231, .9);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--on-accent);
  pointer-events: none;
}
.tile__badge--accent {
  left: auto;
  right: 14px;
  background: var(--accent);
  font-weight: 700;
  letter-spacing: .08em;
}
.tile--feature .tile__badge {
  top: 20px; left: 20px;
  padding: 7px 13px;
  background: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.tile__body {
  position: absolute;
  left: 18px; bottom: 16px;
  z-index: 3;
  color: var(--text-on-dark);
  pointer-events: none;
}
.tile__name { display: block; font-size: 18px; font-weight: 700; }
.tile__meta { display: block; font-size: 13px; opacity: .88; margin-top: 2px; }

.tile--feature .tile__body { left: 26px; bottom: 24px; }
.tile__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  opacity: .82;
  margin-bottom: 6px;
}
.tile__headline {
  display: block;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: .95;
}
.tile__price {
  display: block;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* --------------------------------------------------------------------------
   9. How it works
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 0; }

.step {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 34px 30px;
}
.step__ghost {
  position: absolute;
  top: -20px; right: 10px;
  font-size: 140px;
  font-weight: 800;
  line-height: 1;
  color: var(--line-06);
  pointer-events: none;
}
.card--dark .step__ghost { color: rgba(var(--accent-rgb), .16); }

.step__badge {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  flex: none;
}
.card--dark .step__badge { background: var(--accent); color: var(--bg-dark); }

.step__title {
  margin: 24px 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.step__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.card--dark .step__text { color: inherit; opacity: .72; }

/* --------------------------------------------------------------------------
   10. Finance calculator
   -------------------------------------------------------------------------- */
.finance__card {
  width: 100%;
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-radius: 26px;
  padding: 52px 48px;
}
.finance__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 40px;
}
.finance__head .pill { margin-bottom: 20px; }
/* The payment must stay visibly larger than the heading (design: 80 vs 56).
   Both scale together so the ratio survives every breakpoint. */
.finance__title {
  font-size: clamp(34px, 3.5vw, 56px);
  font-weight: 800;
  letter-spacing: -.03em;
}

.finance__result { text-align: right; }
.finance__payment {
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
/* Only the "/mo" suffix shrinks — not the amount itself. */
.finance__mo { font-size: clamp(18px, 1.6vw, 26px); opacity: .6; }
.finance__terms { font-size: 15px; opacity: .6; margin-top: 8px; }

.finance__sliders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--dline-16);
}
.slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.slider__label { font-size: 14px; opacity: .7; }
.slider__value { font-size: 17px; font-weight: 700; }
.slider__range {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  opacity: .5;   /* .4 in the handoff scored 3.47:1 — .5 clears AA at 4.74:1 */
  margin-top: 10px;
}

input[type=range].fin {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(241, 238, 231, .22);
  outline: none;
  cursor: pointer;
  margin: 0;
}
input[type=range].fin::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-page);
  cursor: pointer;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4);
}
input[type=range].fin::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-page);
  cursor: pointer;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4);
}
input[type=range].fin:focus-visible { outline-offset: 6px; }

/* --------------------------------------------------------------------------
   11. Trade-in
   -------------------------------------------------------------------------- */
.trade__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
}
.trade__estimate {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #f7f5f0, #e6e1d7);
  min-height: 460px;
  padding: 38px;
}
.trade__estimate-head { position: relative; z-index: 2; }
.trade__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.trade__range {
  font-size: 66px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 10px 0 4px;
}
.trade__range .dash { opacity: .35; }
.trade__vehicle { font-size: 15px; color: var(--text-secondary); }
.trade__car {
  position: absolute;
  left: 2%; bottom: 6%;
  width: 96%;
  z-index: 1;
  opacity: .96;
}
.trade__accept {
  position: absolute;
  left: 38px; bottom: 30px;
  z-index: 3;
  gap: 14px;
  font-weight: 700;
}

.trade__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.trade__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tlbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 9px;
}
.tin {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-18);
  border-radius: 12px;
  background: var(--bg-surface);
  font: 500 15px var(--font-sans);
  color: var(--text-primary);
  outline: none;
}
.tin:focus { border-color: var(--bg-dark); }

.gauge-panel {
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-radius: 20px;
  padding: 26px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.gauge {
  position: relative;
  width: 104px; height: 104px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0deg 270deg, rgba(241, 238, 231, .18) 270deg 360deg);
}
.gauge__inner {
  position: absolute;
  inset: 12px;
  background: var(--surface-emph);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gauge__value { font-size: 22px; font-weight: 800; }
.gauge__label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  opacity: .6;
}
.gauge-panel__body { flex: 1; min-width: 0; }
.gauge-panel__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.gauge-panel__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  opacity: .5;
  margin-top: 8px;
}
#cond { width: 100%; accent-color: var(--accent); cursor: pointer; }

.drivers {
  background: var(--bg-surface);
  border: 1px solid var(--line-10);
  border-radius: 20px;
  padding: 24px;
}
.drivers__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.driver + .driver { margin-top: 14px; }
.driver__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 6px;
}
.driver__head b { font-weight: 700; }
.driver__track {
  height: 6px;
  border-radius: 999px;
  background: var(--line-10);
  overflow: hidden;
}
.driver__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width .25s ease;
}
.driver__fill--accent { background: var(--accent); }
.driver__fill--demand { width: 86%; }

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.section__inner { padding: 0 var(--pad-x); }
.testimonials__title { margin-bottom: 16px; }

.stars { color: var(--accent); font-size: 26px; letter-spacing: 3px; }
.reviews-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-muted);
  margin-top: 10px;
}

.tmarquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@keyframes tmarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tmarquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: tmarquee 40s linear infinite;
}
.tmarquee-mask:hover .tmarquee-track,
.tmarquee-mask:focus-within .tmarquee-track { animation-play-state: paused; }

/* Column layout + margin-top:auto on the author row pins every avatar to
   the same baseline, whether the quote runs to two lines or three. */
.review {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 340px;
  background: var(--bg-surface);
  border: 1px solid var(--line-10);
  border-radius: 18px;
  padding: 24px;
}
.review--dark {
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-color: transparent;
}
.review__stars {
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.review__quote { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.review__author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review__name { font-size: 13px; font-weight: 700; }
.review__car { display: block; font-size: 11.5px; color: var(--text-muted); }
.review--dark .review__car { color: inherit; opacity: .6; }
.av {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--bg-tile);
}
/* <picture> would otherwise sit in the flex row as an inline box. */
.review__author picture { display: contents; }

/* --------------------------------------------------------------------------
   13. Locations
   -------------------------------------------------------------------------- */
.showrooms__title { margin-bottom: 30px; }

.map {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  height: 480px;
  background: var(--bg-tile);
  margin-bottom: 20px;
}
/* Leaflet canvas. The filter pulls OSM's blue-green tiles towards the
   warm cream palette; adjust the sepia/saturate pair to retune. */
.map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: var(--bg-tile);
  filter: grayscale(.55) sepia(.35) saturate(.75) brightness(1.04) contrast(.95);
}
.map__canvas .leaflet-container { background: var(--surface-2); font-family: var(--font-sans); }

/* OSM tiles are drawn light; dim them so the map sits in the dark page. */
[data-theme="dark"] .map__canvas {
  filter: grayscale(.6) sepia(.25) saturate(.7) brightness(.62) contrast(1.05);
}
[data-theme="dark"] .map__canvas .leaflet-control-attribution {
  background: rgba(27, 24, 20, .82);
}

/* Controls and attribution restyled to match the page. */
.map__canvas .leaflet-control-zoom a {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: none;
  font-weight: 600;
}
.map__canvas .leaflet-control-zoom a:hover { background: var(--page); }
.map__canvas .leaflet-control-attribution {
  background: rgba(251, 250, 245, .82);
  font-size: 10px;
  color: var(--text-muted);
}
.map__canvas .leaflet-control-attribution a { color: var(--text-secondary); }
.map__canvas .leaflet-popup-content-wrapper {
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.map__canvas .leaflet-popup-content { margin: 12px 16px; font-size: 13px; line-height: 1.5; }
.map__canvas .leaflet-popup-tip { background: var(--bg-surface); }

/* Marker wrapper is just a positioning box — the dot is .lpin. */
.lpin-wrap { background: none; border: none; }
/* Leaflet positions the wrapper, so the dot itself sits in normal flow —
   but the active pin keeps its rotation, which forms the teardrop. */
.lpin-wrap .lpin { position: relative; transform: none; }
.lpin-wrap .lpin--active { transform: rotate(-45deg); }
.lpin {
  display: block;
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-dark);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4);
  z-index: 2;
}
/* Selected showroom: a teardrop pin pointing down at the coordinate.
   Kept to 22px and floated a few pixels clear of the point so it doesn't
   bury the city name that the map tiles draw right next to it. */
.lpin--active {
  width: 22px; height: 22px;
  background: var(--accent);
  border: 3px solid var(--bg-dark);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 5px 10px -4px rgba(0, 0, 0, .45);
}
.lpin--active::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--ink);
}

.flagship {
  position: absolute;
  left: 36px; bottom: 36px;
  width: 340px;
  z-index: 500;   /* above Leaflet panes */
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-radius: 18px;
  padding: 28px;
}
.flagship__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent);
}
.flagship__city {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 8px 0;
}
.flagship__line { font-size: 14px; opacity: .72; }
.flagship__line:last-of-type { margin-bottom: 22px; }
.btn--sm {
  font-size: 14px;
  font-weight: 700;
}

.cities {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.city {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--line-12);
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: all .18s ease;
}
.city:hover { border-color: var(--bg-dark); }
/* Selected city — mirrors the active pin on the map. */
.city[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--page);
}
/* Hours follow the inverted fill — a fixed light value disappeared on the
   cream button the control turns into in the dark theme. */
.city[aria-pressed="true"] .city__hours {
  color: var(--page);
  opacity: .7;
}
.city__name { display: block; font-size: 15px; font-weight: 700; }
.city__hours {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 5px;
}

/* --------------------------------------------------------------------------
   14. CTA — book a test drive
   -------------------------------------------------------------------------- */
.cta__card {
  width: 100%;
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-radius: 26px;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
.cta__car {
  position: absolute;
  /* Nudged out from the handoff's -6% to clear the one-line headline. */
  right: -10%; bottom: 2%;
  width: 58%;
  z-index: 1;
  opacity: .9;
}
.cta__body {
  position: relative;
  z-index: 2;
  max-width: 660px;
}
.cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 999px;
  margin-bottom: 26px;
  color: var(--accent);
}
@keyframes ctapulse {
  0%   { box-shadow: 0 0 0 0    rgba(var(--accent-rgb), .5); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0    rgba(var(--accent-rgb), 0); }
}
.ctapulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: ctapulse 1.8s ease-out infinite;
}
.cta__title {
  /* Sized to hold "Drive it before you decide" on one line without running
     into the car, which starts around 48% of the panel width. */
  font-size: clamp(34px, 3.55vw, 68px);
  line-height: .94;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 20px;
  white-space: nowrap;
}
.cta__text {
  font-size: 18px;
  line-height: 1.55;
  opacity: .72;
  max-width: 460px;
  margin-bottom: 30px;
}
.cta__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.chip {
  padding: 12px 22px;
  border: 1px solid var(--dline-28);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.chip:hover { border-color: var(--text-on-dark); }
/* The pressed pill is cream on the band's near-black. --bg-page/--bg-dark
   would have said the same thing in the light theme, but they invert, and
   the band does not — in dark theme the pill turned black on black. The
   emphasis pair is the one that holds still, as on .office__btn:hover. */
.chip[aria-pressed="true"] {
  background: var(--on-emph);
  color: var(--surface-emph);
  border-color: var(--on-emph);
  font-weight: 700;
}
.cta__row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.btn--book {
  gap: 14px;
  font-size: 16px;
  font-weight: 700;
}
.booked { display: flex; align-items: center; gap: 12px; }
.avatars { display: flex; }
.avatars img {
  width: 34px; height: 34px;
  flex: none;                 /* keep the circles from being squeezed */
  border-radius: 50%;
  /* Ring in the same cream as the text beside it: against the dark panel a
     dark border vanished and the overlap read as one blurry blob. */
  border: 1px solid var(--text-on-dark);
  object-fit: cover;
  background: var(--bg-dark-2);
}
.avatars picture { display: contents; }
.avatars picture + picture img { margin-left: -12px; }
.booked__text { font-size: 13px; opacity: .7; }

/* --------------------------------------------------------------------------
   15. Our brands
   -------------------------------------------------------------------------- */
.brands__card {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--bg-dark);
  border-radius: 30px;
  padding: 56px 48px;
  text-align: center;
}
.brands__title {
  margin-top: 22px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 48px;
}
.brands__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}
.brands__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 10px;
}
/* The wordmark sits over the hatch, so it takes the full ink colour rather
   than .ph's muted placeholder grey — otherwise it reads as another label.
   The size has to flex: six nowrap wordmarks in one row overflowed between
   ~1200 and 1360px, where .ph's own 12px padding left the tile narrower than
   the text. Hence the clamp and the tighter padding below. */
.brands__logo {
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-primary);
  white-space: nowrap;
}
.brands__item.ph { padding-left: 6px; padding-right: 6px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--surface-emph);
  color: var(--text-on-dark);
  overflow: hidden;
}
.footer__inner { padding: 64px var(--pad-x) 0; }

.footer__statement {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--dline-14);
}
.footer__statement .pill { margin-bottom: 22px; }
.footer__title {
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.btn--talk {
  gap: 14px;
  width: 219px;
  font-size: 16px;
  font-weight: 700;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 44px 0 32px;
}
.footer__brand { max-width: 300px; }
.footer__logo {
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}
/* The footer is an emphasis band that keeps its dark fill in both themes, so
   currentColor here resolves to the cream --text-on-dark either way. */
.logo__svg--footer { height: 40px; color: inherit; }
.footer__blurb {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(241, 238, 231, .55);
}
.fh {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(241, 238, 231, .4);
  margin: 0 0 20px;
}
.fl {
  display: block;
  font-size: 16px;
  color: var(--dlink);
  margin-bottom: 12px;
}
.fl:hover { color: var(--text-on-dark); }

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}
.footer__legal-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: rgba(241, 238, 231, .5);
}
.footer__legal-links .fl { display: inline; margin: 0; font-size: 14px; }
.socials { display: flex; gap: 12px; }
.soc {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dline-20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark);
  transition: all .2s ease;
}
.soc:hover {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
}

.footer__wordmark { text-align: center; }
.bigwm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(90px, 17vw, 240px);
  letter-spacing: -.04em;
  line-height: .74;
  color: rgba(241, 238, 231, .14);
  transition: all .4s ease;
  cursor: default;
  display: inline-block;
}
@supports (-webkit-text-stroke: 1px black) {
  .bigwm {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(241, 238, 231, .14);
  }
}
.bigwm:hover {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

.ticker {
  border-top: 1px solid var(--dline-14);
  padding: 16px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@keyframes fmarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fmarquee {
  display: flex;
  gap: 36px;
  width: max-content;
  animation: fmarquee 32s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: rgba(241, 238, 231, .5);
}

/* --------------------------------------------------------------------------
   16b. About Us route — header toggle, breadcrumbs, About AVAVA, Our Team
   Only this route uses these. Everything else on the page is a homepage
   component reused as-is (Why AVAVA, Testimonials, Showrooms, Our Brands).
   -------------------------------------------------------------------------- */

/* Header theme toggle — hero-less routes carry the switch here. Accent
   outline in both themes; the glyph swaps sun/moon by data-theme. */
.themebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.themebtn:hover { background: var(--accent); color: var(--on-accent); }
.themebtn .icon-moon { display: none; }
[data-theme="dark"] .themebtn .icon-sun { display: none; }
[data-theme="dark"] .themebtn .icon-moon { display: block; }

/* Divider — inset to the page gutter, not full-bleed; the header has no
   border of its own. */
.page-rule { padding: 0 var(--pad-x); }
.page-rule span { display: block; height: 1px; background: rgba(var(--hairline-rgb), .12); }

/* Breadcrumbs */
.crumbs { padding: 18px var(--pad-x) 0; }
.crumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); }
.crumbs li[aria-current="page"] { color: var(--ink); }
.crumbs__sep { color: var(--ink-2); opacity: .6; }

/* --- About AVAVA -------------------------------------------------------- */
.about-intro {
  position: relative;
  overflow: hidden;
  padding: 64px var(--pad-x) 92px;
}
.about-intro__ghost {
  position: absolute;
  /* The handoff said right:16px, which pushed the wordmark 40px past the
     content edge. Aligned to the page gutter instead, like everything else. */
  right: var(--pad-x); top: -4px;
  /* letter-spacing is subtracted after the LAST glyph too, so the box ends
     ~.05em short of the ink and the final A overhung the gutter. The padding
     pushes the ink back inside; in em so it holds at the smaller sizes. */
  padding-right: calc(.05em + 1px);
  font-family: var(--font-display);
  font-size: 220px;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(var(--hairline-rgb), .07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.about-intro > *:not(.about-intro__ghost) { position: relative; z-index: 1; }

.about-intro__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.about-stats { display: flex; margin: 0; }
.about-stats__cell {
  position: relative;
  display: flex;
  flex-direction: column-reverse;   /* number reads on top, label below */
  padding: 0 22px;
}
.about-stats__cell + .about-stats__cell::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 36px;
  background: rgba(var(--hairline-rgb), .18);
}
.about-stats__num { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.about-stats__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 6px 0 0;
}

.about-intro__headline {
  max-width: 1120px;
  margin: 36px 0 0;
  font-size: clamp(40px, 6.6vw, 86px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.035em;
  text-wrap: pretty;
  color: var(--ink);
}
/* Contact and Loan run wider than About: their addendum specifies 1500px and
   balance, and at About's 1120px the Contact headline broke to three lines
   with "a form" stranded alone. About keeps 1120px — its own spec. */
.about-intro__headline--wide {
  max-width: 1500px;
  text-wrap: balance;
}

/* Three treatments in one sentence — the point of the section. */
.tw-outline { color: transparent; -webkit-text-stroke: 1.6px var(--ink); }
.tw-accent { color: var(--accent); -webkit-text-stroke: 1.2px var(--ink); }
/* A hard light stroke around the accent word is too loud on the dark page. */
[data-theme="dark"] .tw-accent { -webkit-text-stroke-color: rgba(241, 238, 231, .55); }

.about-intro__body {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 56px;
  align-items: start;
  margin-top: 44px;
}
.about-intro__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
.about-intro__cta { white-space: nowrap; align-self: center; }

/* Timeline rail.
   No padding-top here: the dots are absolutely positioned inside the grid
   items, so any top padding on .timeline pushes them down while the rail
   stays put — the dots ended up hanging ~20px below the line. Spacing lives
   in margin-top instead, which moves rail and dots together. */
.timeline { position: relative; margin-top: 58px; }
.timeline__rail {
  position: absolute;
  left: 0; right: 0; top: 6px;
  height: 1.5px;
  background: rgba(var(--hairline-rgb), .16);
}
.timeline__progress {
  position: absolute;
  left: 0; top: 0;
  width: 25%;
  height: 1.5px;
  background: var(--accent);
}
.timeline__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.timeline__item { position: relative; padding-top: 34px; }
.timeline__dot {
  position: absolute;
  top: 0; left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: 0 0 0 1.5px rgba(var(--hairline-rgb), .3);
}
/* The active dot's page-coloured border cuts the rail so it sits on it. */
.timeline__item--active .timeline__dot {
  background: var(--accent);
  border: 2.5px solid var(--page);
  box-shadow: 0 0 0 1.5px var(--ink);
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-2);
  margin: 0;
}
.timeline__title { font-size: 19px; font-weight: 700; margin: 10px 0 0; }
.timeline__copy {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 8px 0 0;
  max-width: 250px;
}

/* --- Our Team ----------------------------------------------------------- */
.team { padding: 40px var(--pad-x) 104px; }
.team__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 44px;
}
.team__intro { flex: 1 1 520px; }
.team__title {
  margin: 22px 0 0;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}
/* Sits under the heading, not beside it — the two read as one block. */
.team__sub {
  max-width: 600px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
}
.team__cta { white-space: nowrap; }

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.teamcard {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.teamcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.teamcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface-2);
}
/* Three of the four portraits are taller than the 4:5 slot, so cover crops
   them top and bottom. Biased upward — centred cropping took the top of the
   head off while leaving empty space below the shoulders. */
.teamcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
.teamcard__badge {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  /* Translucent scrim over the photo. Both scrim and label flip with the
     theme together (see ADDENDUM-dark § team badge), so var(--ink) stays
     legible in both — dark ink on the light scrim, cream on the dark one. */
  background: rgba(251, 250, 245, .92);
  color: var(--ink);
}
[data-theme="dark"] .teamcard__badge { background: rgba(18, 16, 14, .78); }
.teamcard__body { padding: 24px; }
.teamcard__name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.teamcard__role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 7px 0 0;
}
.teamcard__bio { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 14px 0 0; }

/* About Us — responsive */
@media (max-width: 1180px) {
  .about-intro__ghost { font-size: 150px; }
  .about-intro__body { grid-template-columns: 1fr 1fr; }
  .about-intro__cta { grid-column: 1 / -1; justify-self: start; }
  .timeline__grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .team__title { white-space: normal; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .about-intro { padding: 48px var(--pad-x) 64px; }
  .about-intro__ghost { font-size: 96px; right: 8px; }
  .about-intro__top { flex-direction: column; }
  .about-intro__body { grid-template-columns: 1fr; gap: 22px; }
  .timeline__grid { grid-template-columns: 1fr; }
  .team { padding: 32px var(--pad-x) 72px; }
  .team__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16c. Contact route — channels, form, head office, mini FAQ
   -------------------------------------------------------------------------- */
.chgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.chcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  padding: 32px 30px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.chcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  margin-bottom: 22px;
}
.chcard__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.chcard__value { font-size: 19px; font-weight: 700; margin: 12px 0 0; }
.chcard__sub { font-size: 13.5px; color: var(--ink-2); margin: 7px 0 0; }
.chcard__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.chcard__link:hover { color: var(--accent); }
.chcard__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  flex: none;
}

/* Form + head office ----------------------------------------------------- */
.cform { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: stretch; }
.cform__card {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  padding: 44px 46px 46px;
}
.cform__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 30px;
}
.cform__title { font-size: 38px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.cform__sub { font-size: 15px; color: var(--ink-3); margin: 10px 0 0; }
.cform__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}
.cform__topics { border: 0; padding: 0; margin: 0 0 24px; }
.cform__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* .chip was built for the CTA band, which is dark — there the active pill is
   cream on near-black. On this light card that same cream fill just reads as
   grey, so the polarity flips: ink fill, page-coloured label. Using the
   tokens rather than #171512 keeps it inverting correctly in dark theme,
   the same way .btn does. */
.cform__chips .chip {
  border-color: rgba(var(--hairline-rgb), .22);
  color: var(--ink);
}
.cform__chips .chip:hover { border-color: rgba(var(--hairline-rgb), .5); }
.cform__chips .chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
  border-color: var(--ink);
}
.cform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: flex; flex-direction: column; }
.cform__field--wide { grid-column: 1 / -1; }
.cform__textarea { min-height: 130px; resize: vertical; }
.cform__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
}
.cform__optin {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  cursor: pointer;
}
.cform__optin input { margin-top: 2px; accent-color: var(--accent); flex: none; }

.cform__side { display: flex; flex-direction: column; gap: 28px; }
/* Emphasis container — keeps its dark fill in dark theme (rule 3), so the
   text inside stays light in both. */
.office {
  background: var(--surface-emph);
  color: var(--text-on-dark);
  border-radius: 26px;
  padding: 38px 36px;
}
.office__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.office__city { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 0; }
.office__addr { font-size: 14px; line-height: 1.6; opacity: .72; margin: 10px 0 0; }
.office__hours { margin: 26px 0 0; }
.office__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(241, 238, 231, .14);
  font-size: 14px;
}
.office__row dt { opacity: .72; }
.office__row dd { margin: 0; font-weight: 600; }
.office__accent { color: var(--accent); }
.office__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  margin-top: 26px;
  padding: 0 26px;
  border: 1px solid rgba(241, 238, 231, .35);
  border-radius: 999px;
  color: var(--text-on-dark);
  font-size: 14px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.office__btn:hover { background: var(--on-emph); color: var(--surface-emph); }
.office__map {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 230px;
  border-radius: 26px;
  background: var(--surface-2);
}

/* Mini FAQ --------------------------------------------------------------- */
.faq__row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 44px;
  padding: 26px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
}
.faq__q { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.faq__a { font-size: 15px; line-height: 1.62; color: var(--ink-3); margin: 0; }

/* --------------------------------------------------------------------------
   16n. Listings marketplace — shared card, filters, six grids, maps, detail
   -------------------------------------------------------------------------- */
/* Listings v1 — search panel and the three-up grid ------------------------
   The other listing variants keep the .lst card below; v1 draws its own
   .vcard so the two can differ without either page moving. */
.lsearch {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  padding: 26px 30px 28px;
  margin-bottom: 30px;
}
.lsearch__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
.lsearch__title { font-size: 18px; font-weight: 700; letter-spacing: -.018em; margin: 0; }
.lsearch__sub { font-size: 13.5px; color: var(--ink-2); margin: 5px 0 0; }
.lsearch__conds { display: flex; flex-wrap: wrap; gap: 8px; }
.lsearch__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.lsearch__field { display: flex; flex-direction: column; }
.lsearch__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 52px;
  padding: 0 26px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease;
}
.lsearch__reset:hover { border-color: var(--ink); }
.lsearch__sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
}
.lsearch__sliderhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.lsearch__sliderhead .hslbl { margin-bottom: 0; }
.lsearch__value { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
/* The range track was authored for the dark Finance band; on this cream
   card it needs the dark-on-light value instead. */
.lsearch input[type=range].fin { margin-top: 14px; background: rgba(var(--hairline-rgb), .18); }
.lsearch__scale { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 10px; color: var(--ink-4); }

.lst__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .14);
}
.lst__count { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.lst__sort { width: 230px; }

.lempty {
  padding: 70px 24px;
  text-align: center;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 24px;
}
.lempty__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lempty__copy { font-size: 15px; color: var(--ink-2); margin: 12px 0 24px; }

.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.vcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.vcard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); }

/* Rule 2 — these sit on a photograph, so they keep their polarity in both
   themes. NEW is the only one that takes the accent. */
.vcard__cond, .vcard__pts, .vcard__photos {
  position: absolute;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vcard__cond { top: 14px; left: 14px; }
.vcard__cond--new { background: var(--accent); color: #171512; }
.vcard__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.vcard__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.vcard__pts {
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  font-weight: 600;
}
.vcard__photos { left: 14px; bottom: 14px; background: rgba(18, 16, 14, .78); color: #F1EEE7; font-weight: 600; }

.vcard__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.vcard__meta { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vcard__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.24; margin: 9px 0 0; }
.vcard__title a { color: var(--ink); }
.vcard:hover .vcard__title a { color: var(--accent); }

.vcard__specs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 18px 0 0;
  border: 1px solid rgba(var(--hairline-rgb), .09);
  border-radius: 14px;
  overflow: hidden;
}
.vcard__spec { padding: 11px 12px; }
.vcard__spec + .vcard__spec { border-left: 1px solid rgba(var(--hairline-rgb), .09); }
.vcard__speclabel { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vcard__specval { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; }

.vcard__dealer { display: flex; align-items: center; gap: 11px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.vcard__logo { width: 30px; height: 30px; flex: none; border-radius: 8px; overflow: hidden; }
.vcard__dealerbody { flex: 1; min-width: 0; }
.vcard__dealername { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.vcard__dealermeta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vcard__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--hairline-rgb), .3); }
.vcard__avava {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 20px; }
.vcard__was { display: block; font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.vcard__price { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.026em; }
.vcard__mo { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.vcard__acts { display: flex; gap: 8px; }
.vcard__save, .vcard__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
}
.vcard__save { border: 1px solid rgba(var(--hairline-rgb), .2); background: transparent; color: var(--ink); }
.vcard__save:hover { border-color: var(--ink); }
/* Saved is a control state, so it inverts with the theme. */
.vcard__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.vcard__save[aria-pressed="true"] svg { fill: currentColor; }
.vcard__go { border: 1px solid var(--ink); color: var(--ink); }
.vcard__go:hover { background: var(--ink); color: var(--page); }

/* Listings v2 — filter sidebar, rows and cards ---------------------------- */
.lst2 { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: start; }
.lst2__side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.lst2__main { min-width: 0; }
.lst2 .blogside { padding: 26px; }
.blogside__head--gap { margin-bottom: 16px; }
.lside__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lside__head .blogside__head { margin: 0; }
.lside__reset {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.lside__reset:hover { color: var(--ink); }
.lside__fields { display: flex; flex-direction: column; gap: 14px; }
.lside__rule { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.lst2 .lsearch__sliderhead + input[type=range].fin { margin-top: 16px; }
.lst2 input[type=range].fin { background: rgba(var(--hairline-rgb), .18); }
.lst2 .lsearch__scale { margin-top: 9px; }
.lside__save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
}
.lside__save:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Checkbox groups. Transmission is OR within itself, features are AND —
   the counts beside them answer "what will this cost me" before ticking. */
.lchks { display: flex; flex-direction: column; }
.lchks--scroll { max-height: 250px; overflow-y: auto; }
.lchk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}
.lchk__label { display: flex; align-items: center; gap: 12px; }
.lchk input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }
.lchk:has(input:checked) { font-weight: 700; color: var(--ink); }
.lchk__n { flex: none; font-size: 10px; color: var(--ink-4); }

/* Row view --------------------------------------------------------------- */
.vlist { display: flex; flex-direction: column; gap: 20px; }
.vrow {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 230px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.vrow:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.vrow__media { position: relative; display: block; min-height: 236px; background: var(--surface-2); }
.vrow__body { display: flex; flex-direction: column; padding: 24px 28px; }
.vrow__meta { display: flex; align-items: center; gap: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vrow__title { font-size: 26px; font-weight: 700; letter-spacing: -.024em; line-height: 1.18; margin: 10px 0 0; }
.vrow__title a { color: var(--ink); }
.vrow:hover .vrow__title a { color: var(--accent); }
.vrow__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.vchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(var(--hairline-rgb), .14);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.vchip--report {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vrow__blurb { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 16px 0 0; }
.vrow__dealer { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 20px; }
.vrow__logo { width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden; }
.vrow__dealerbody { flex: 1; min-width: 0; }
.vrow__dealername { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.vrow__dealermeta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

/* The price rail sits on the page colour so it reads as a separate panel. */
.vrow__rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 26px;
  background: var(--page);
  border-left: 1px solid rgba(var(--hairline-rgb), .1);
}
.vrow__was { display: block; font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.vrow__price { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.028em; line-height: 1.1; }
.vrow__mo { display: block; margin-top: 5px; font-size: 13px; color: var(--ink-2); }
.vrow__note {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.vrow__acts { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.vrow__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-size: 14px;
  font-weight: 600;
}
.vrow__view:hover { background: color-mix(in srgb, var(--ink) 88%, var(--page)); color: var(--page); }
.vrow__actrow { display: flex; gap: 9px; }
.vrow__save {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.vrow__save:hover { border-color: var(--ink); }
.vrow__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.vrow__save[aria-pressed="true"] svg { fill: currentColor; }
.vrow__cmp {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.vrow__cmp:hover { border-color: var(--ink); color: var(--ink); }

/* Card view -------------------------------------------------------------- */
.lst2[data-view="card"] .vlist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.vmini {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.vmini:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.vmini__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); }
.vmini__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px; }
.vmini__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vmini__meta { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vmini__title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 8px 0 0; }
.vmini__title a { color: var(--ink); }
.vmini:hover .vmini__title a { color: var(--accent); }
.vmini__prices { flex: none; text-align: right; margin: 0; }
.vmini__was { display: block; font-size: 12px; color: var(--ink-4); text-decoration: line-through; }
.vmini__price { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.024em; }
.vmini__mo { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.vmini__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 20px; }
.vmini__chips .vchip { padding: 6px 12px; font-size: 12px; }
/* Equal 20px above and below the rule, per the acceptance checklist. */
.vmini__foot { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.vmini__logo { width: 30px; height: 30px; flex: none; border-radius: 8px; overflow: hidden; }
.vmini__dealer { flex: 1; min-width: 0; }
.vmini__dealername { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.vmini__dealermeta { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vmini__save, .vmini__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: all .2s ease;
}
.vmini__save { border: 1px solid rgba(var(--hairline-rgb), .2); background: transparent; color: var(--ink); }
.vmini__save:hover { border-color: var(--ink); }
.vmini__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.vmini__save[aria-pressed="true"] svg { fill: currentColor; }
.vmini__go { border: 1px solid var(--ink); color: var(--ink); }
.vmini__go:hover { background: var(--ink); color: var(--page); }

/* Vehicle detail — shared components for the listing-single variants -------
   The `det` prefix is deliberately variant-free: v1 leads with a title band
   and a 16:9 frame, v2 with a 620px hero, but the rail, the stat strip, the
   tabs, the buy column, the location block, the reviews, the thread and the
   similar cards are the same components on both. Only the lead-in differs. */
.det__band { padding: 52px var(--pad-x) 34px; position: relative; overflow: hidden; }
.det__bandin { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; z-index: 1; }
.det__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.det__report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.det__title { font-size: 62px; font-weight: 800; letter-spacing: -.034em; line-height: 1.02; margin: 18px 0 0; }
.det__facts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.det__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--hairline-rgb), .3); }

.det__actions { display: flex; align-items: center; gap: 12px; }
.det__save {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13.5px var(--font-sans);
  cursor: pointer;
  transition: all .18s ease;
}
.det__save:hover { border-color: var(--text-primary); }
.det__save[aria-pressed="true"] { background: var(--bg-dark); border-color: var(--bg-dark); color: var(--bg-page); }
.det__save[aria-pressed="true"] .det__saveicon { color: var(--accent); }
.det__save[aria-pressed="true"] .det__saveicon svg { fill: currentColor; }
.det__saveicon { display: inline-flex; }
.det__compare {
  display: inline-flex;
  align-items: center;
  padding: 13px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
}
.det__compare:hover { border-color: var(--text-primary); color: var(--text-primary); }
.det__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.det__share:hover { border-color: var(--text-primary); }

/* The one section that cannot be symmetric: its top space comes from the
   title band above it, which is part of the same block and has no rule
   between them. The bottom matches the sections that follow. */
.det__body { padding: 8px var(--pad-x) 56px; }
.det__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.det__main { min-width: 0; }

/* Gallery. Arrows and badges sit on the photo, so they keep light values in
   both themes. */
.detgal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: var(--bg-tile); }
.detgal__shot {
  position: absolute;
  left: 18px; bottom: 18px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .72);
  color: #F1EEE7;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.detgal__counter {
  position: absolute;
  right: 18px; bottom: 18px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.detgal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  transition: background .18s ease;
}
.detgal__arrow:hover { background: #FBFAF5; }
.detgal__arrow--prev { left: 18px; }
.detgal__arrow--next { right: 18px; }
.detgal__rail { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.detgal__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1.5px solid rgba(var(--hairline-rgb), .14);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-tile);
  cursor: pointer;
}
.detgal__thumb[aria-current="true"] { border-color: var(--text-primary); }

.detstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.detstats__cell { padding: 18px 20px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 18px; }
.detstats__label { font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.detstats__val { margin: 6px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.022em; }

.dettabs__list { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 0; padding-bottom: 22px; border-bottom: 1px solid rgba(var(--hairline-rgb), .10); }
.dettab {
  padding: 11px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 500 13.5px var(--font-sans);
  cursor: pointer;
  transition: all .18s ease;
}
.dettab:hover { border-color: var(--text-primary); }
.dettab[aria-selected="true"] { background: var(--bg-dark); border-color: var(--bg-dark); color: var(--bg-page); font-weight: 700; }
.detpanel { padding-top: 30px; }
.detpanel:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 6px; }
.detpanel__h2 { font-size: 26px; font-weight: 800; letter-spacing: -.026em; margin: 0; }
/* Deliberately not width-capped — the copy fills the column. */
.detpanel__p { font-size: 16px; line-height: 1.72; color: var(--text-secondary); margin: 18px 0 0; }
.detpanel__h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 38px 0 0; }

.detopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 12px 0 0; padding: 0; list-style: none; }
.detopts__row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 15px; }
.detopts__tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text-primary);
}

.detspec { margin-top: 20px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 20px; overflow: hidden; }
.detspec__list { margin: 0; }
.detspec__row { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); padding: 15px 24px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detspec__row:first-child { border-top: 0; }
.detspec__row:nth-child(odd) { background: var(--surface-zebra); }
.detspec__row dt { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.detspec__row dd { margin: 0; font-size: 15px; font-weight: 600; }

.detcheck__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.detcheck__by { font-size: 14px; color: var(--text-secondary); margin: 8px 0 0; }
.detcheck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.detcheck__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 18px; }
.detcheck__area { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.detcheck__note { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.detcheck__st { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.detcheck__dot { width: 6px; height: 6px; border-radius: 50%; }
.detcheck__st--pass { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.detcheck__st--pass .detcheck__dot { background: var(--accent); }
/* The two noted points are the honest part of the page — they keep the warn
   colour in both themes rather than quietly blending in. */
.detcheck__st--noted { background: rgba(201, 106, 58, .16); }
.detcheck__st--noted .detcheck__dot { background: var(--warn); }

.dethist { margin: 24px 0 0; padding: 0; list-style: none; }
.dethist__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 16px; }
.dethist__rail { position: relative; display: block; width: 34px; }
.dethist__rail::before { content: ""; position: absolute; left: 16px; top: 6px; bottom: -6px; width: 1px; background: rgba(var(--hairline-rgb), .16); }
.dethist__row--last .dethist__rail::before { background: transparent; }
.dethist__dot {
  position: absolute;
  left: 10px; top: 5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: 0 0 0 4px rgba(var(--hairline-rgb), .10);
}
.dethist__row--now .dethist__dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); }
.dethist__title { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; }
.dethist__note { margin: 6px 0 26px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.dethist__when { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* Sticky buy column ------------------------------------------------------- */
.detside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 20px; }

.detprice { padding: 32px 30px; border-radius: 26px; background: var(--surface-emph); color: var(--on-emph); }
.detprice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detprice__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .66; }
.detprice__drop { margin: 0; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.detprice__fig { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; font-size: 42px; font-weight: 800; letter-spacing: -.034em; }
.detprice__was { font-size: 17px; font-weight: 600; letter-spacing: -.02em; opacity: .52; text-decoration: line-through; }
.detprice__mo { margin: 10px 0 0; font-size: 13.5px; opacity: .72; }
.detprice__calc { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--dline-16); }
.detprice__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; }
.detprice__row:first-child { margin-top: 0; }
.detprice__rowlabel { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .66; }
.detprice__rowval { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
/* ⚠️ These sliders live on the emphasis card, so their track is the inverse
   of the page: light on the dark card, dark on the cream one. */
.detprice input[type=range].fin { margin-top: 10px; background: rgba(241, 238, 231, .22); }
[data-theme="dark"] .detprice input[type=range].fin { background: rgba(23, 21, 18, .18); }
/* Centred, not spread — and the arrow circle stays ink with an accent glyph
   even in dark, where the card itself has turned cream and the shared
   --surface-emph would otherwise make the circle disappear into it. */
.detprice__cta { width: 100%; justify-content: center; gap: 13px; margin-top: 26px; }
.detprice__cta .btn__arrow { background: #171512; color: var(--accent); }
.detprice__offer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 15px 22px;
  border: 1px solid var(--dline-28);
  border-radius: 999px;
  color: var(--on-emph);
  font-size: 14px;
  font-weight: 600;
}
.detprice__offer:hover { background: var(--on-emph); border-color: var(--on-emph); color: var(--surface-emph); }
.detprice__note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .62; }

.detcard { padding: 26px 28px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 26px; background: var(--bg-surface); }
.detcard__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.detseller { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.detseller__logo { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--bg-tile); }
.detseller__name { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.detseller__own { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.detseller__meta { margin: 6px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.detlinks { margin: 20px 0 0; padding: 0; list-style: none; }
.detlinks__a { display: block; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.detlinks__a:hover { color: var(--accent); }

.detgtee { margin: 0; padding: 0; list-style: none; }
.detgtee__row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; font-size: 14px; line-height: 1.5; }
.detgtee__cta { width: 100%; justify-content: space-between; margin-top: 18px; }

/* Location, comments and similar listings --------------------------------- */
.detsec__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.detsec__h2 { margin: 10px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }

/* Every hairline-delimited section on this page runs 56px above and 56px
   below its content — same gap on both sides, same gap section to section. */
.detloc { padding: 56px var(--pad-x) 56px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detloc__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; margin-top: 26px; align-items: start; }
.detloc__map { display: block; height: 340px; border-radius: 26px; overflow: hidden; }
.detloc__addr { margin: 0; font-size: 16px; line-height: 1.7; }
.detloc__hours { margin: 22px 0 0; }
.detloc__hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detloc__hrow dt { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.detloc__hrow dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.detloc__link { display: inline-block; margin-top: 20px; font-size: 14.5px; font-weight: 600; }

.detqa { padding: 56px var(--pad-x) 56px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detqa__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.detqa__stat { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.detav { flex: none; display: block; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-tile); }

.detform { margin-top: 28px; padding: 28px 30px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); }
.detform__top { display: flex; align-items: flex-start; gap: 16px; }
.detform__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.detform__sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.detform__text { margin-top: 20px; resize: vertical; }
.detform__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.detform__field { display: block; }
.detform__lbl { display: block; margin-bottom: 7px; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.detform__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.detform__check { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; cursor: pointer; }
.detform__post:disabled { opacity: .45; cursor: not-allowed; }

.detthread { margin: 30px 0 0; padding: 0; list-style: none; }
.detmsg { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
/* A reply is a reply — the indent says so before the chip does. */
.detmsg--seller { padding-left: 58px; }
.detmsg:last-child { padding-bottom: 0; }
.detmsg__who { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.detmsg__seller { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.detmsg__when { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.detmsg__text { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.detmsg__acts { display: flex; align-items: center; gap: 18px; margin: 14px 0 0; }
.detmsg__like, .detmsg__reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12.5px var(--font-sans);
  cursor: pointer;
}
.detmsg__like:hover, .detmsg__reply:hover { color: var(--text-primary); }
.detmsg__like[aria-pressed="true"] { color: var(--text-primary); }
.detmsg__like[aria-pressed="true"] svg { fill: var(--accent); stroke: var(--accent); }

.detmore { padding: 56px var(--pad-x) 56px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detmore__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.detmore__all { font-size: 14px; font-weight: 600; }
.detmore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.detmcard { display: flex; flex-direction: column; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; overflow: hidden; background: var(--bg-surface); transition: transform .2s ease, box-shadow .2s ease; }
.detmcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.detmcard__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-tile); overflow: hidden; }
.detmcard__cond { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .11em; }
.detmcard__cond--used { background: rgba(23, 21, 18, .72); color: #F1EEE7; }
.detmcard__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.detmcard__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px; }
.detmcard__meta { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.detmcard__title { margin: 8px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.022em; }
.detmcard__title a { color: inherit; }
.detmcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detmcard__price { font-size: 19px; font-weight: 800; letter-spacing: -.022em; }
.detmcard__city { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* The price card is the one container on the page that flips: dark on the
   cream page, cream on the dark one. Restating the names its children read
   is what makes the hairlines, the muted label and the outlined button turn
   over with it — the fill alone would leave light-on-light text. */
[data-theme="dark"] .detprice {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-14: rgba(23, 21, 18, .14);
  --dline-16: rgba(23, 21, 18, .16);
  --dline-20: rgba(23, 21, 18, .20);
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}

/* The gallery furniture and the thumbnails lie on photos, so they do not
   follow the theme. */
[data-theme="dark"] .detgal .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1180px) {
  .det__grid { grid-template-columns: 1fr; }
  /* Under the gallery it has nothing left to stick to. */
  .detside { position: static; }
  .det__title { font-size: 48px; }
}
@media (max-width: 900px) {
  .detloc__grid { grid-template-columns: 1fr; }
  .detcheck { grid-template-columns: 1fr; }
  .detopts { grid-template-columns: 1fr; }
  .detmore__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .det__title { font-size: 34px; }
  .detstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detgal__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detspec__row { grid-template-columns: 1fr; gap: 4px; }
  .detform__pair { grid-template-columns: 1fr; }
  .detmsg--seller { padding-left: 24px; }
  .dethist__row { grid-template-columns: 34px minmax(0, 1fr); }
  .dethist__when { grid-column: 2; margin: 0 0 20px; }
  .dethist__note { margin-bottom: 8px; }
}

/* Vehicle detail v2 — the hero replaces the title band --------------------- */
.det__body--hero { padding-top: 28px; }

.dethero { position: relative; height: 620px; border-radius: 26px; overflow: hidden; background: var(--bg-tile); }
/* The scrim and everything on it never invert: this is a photograph, and
   light text on a dark gradient reads the same in both themes. */
.dethero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(23, 21, 18, .84) 0%, rgba(23, 21, 18, .26) 44%, rgba(23, 21, 18, .06) 100%);
}
.dethero__chips { position: absolute; left: 24px; top: 24px; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.dethero__pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  color: #171512;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dethero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dethero__report {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dethero__tools { position: absolute; right: 24px; top: 24px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.dethero__save {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  color: #171512;
  font: 600 13px var(--font-sans);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.dethero__save[aria-pressed="true"] { background: #171512; color: #F1EEE7; }
.dethero__save[aria-pressed="true"] .dethero__saveicon { color: var(--accent); }
.dethero__save[aria-pressed="true"] .dethero__saveicon svg { fill: currentColor; }
.dethero__saveicon { display: inline-flex; }
.dethero__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .94);
  color: #171512;
  cursor: pointer;
  transition: background .18s ease;
}
.dethero__circle:hover { background: #FBFAF5; color: #171512; }

.dethero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .55);
}
.dethero__arrow:hover { background: #FBFAF5; }
.dethero__arrow--prev { left: 24px; }
.dethero__arrow--next { right: 24px; }

/* Clear of the bottom overlay on purpose — at 620px the two would otherwise
   sit on the same line. */
.dethero__counter {
  position: absolute;
  right: 24px; bottom: 150px;
  z-index: 3;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .72);
  color: #F1EEE7;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.dethero__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 34px 36px 32px;
  color: #F1EEE7;
}
.dethero__eyebrow { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .78; }
.dethero__title { margin: 12px 0 0; font-size: 56px; font-weight: 800; letter-spacing: -.034em; line-height: 1.02; }
.dethero__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.dethero__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(241, 238, 231, .5); }
.dethero__price { flex: none; margin: 0; text-align: right; }
.dethero__was { display: block; font-size: 15px; font-weight: 600; opacity: .6; text-decoration: line-through; }
.dethero__fig { display: block; margin-top: 4px; font-size: 44px; font-weight: 800; letter-spacing: -.036em; }
.dethero__mo { display: block; margin-top: 6px; font-size: 13px; opacity: .72; }

/* The hero is a photograph in both themes, so its placeholder hatch stays
   light like the gallery frame on variant 1. */
[data-theme="dark"] .dethero .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

/* Reviews — kept on this variant, dropped on variant 1 ---------------------- */
/* Symmetric top and bottom, like the location block above it. */
.detrev { padding: 56px var(--pad-x) 56px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detrev__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.detrev__sortwrap { width: 230px; }
/* Stretched, not top-aligned: side by side, two cards of different heights
   read as a mistake. The summary spreads its own contents to fill. */
.detrev__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px; margin-top: 28px; align-items: stretch; }
.detrev__sum, .detrev__form { padding: 28px 30px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); }
.detrev__sum { display: flex; flex-direction: column; }
.detrev__avg { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 52px; font-weight: 800; letter-spacing: -.034em; }
.detrev__avgof { font-size: 16px; font-weight: 600; color: var(--text-muted); }
.detrev__stars { display: flex; gap: 3px; margin: 10px 0 0; }
.detrev__star { font-size: 17px; color: rgba(var(--hairline-rgb), .2); line-height: 1; }
.detrev__star--on { color: var(--accent); }
.detrev__star--half { background: linear-gradient(90deg, var(--accent) 50%, rgba(var(--hairline-rgb), .2) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.detrev__stars--sm .detrev__star { font-size: 13px; }
.detrev__count { margin: 12px 0 0; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* The bars take the leftover height and spread through it, so matching the
   form's height does not leave a hole in the middle of the card. */
.detrev__bars { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detrev__bar { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0; }
.detrev__bar dt { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); }
.detrev__bar dd { display: flex; align-items: center; gap: 10px; margin: 0; }
.detrev__track { flex: 1; height: 6px; border-radius: 999px; background: rgba(var(--hairline-rgb), .12); overflow: hidden; }
.detrev__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.detrev__pct { flex: none; width: 32px; text-align: right; font-size: 9.5px; font-weight: 600; color: var(--text-muted); }

.detrev__formtitle { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.detrev__formsub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.detrev__rate { margin: 20px 0 0; padding: 0; border: 0; }
.detrev__lbl { display: block; margin-bottom: 8px; padding: 0; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.detrev__picker { display: inline-flex; gap: 6px; }
.detrev__pick {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(var(--hairline-rgb), .22);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color .14s ease;
}
.detrev__pick[aria-pressed="true"] { color: var(--accent); }
.detrev__body { display: block; margin-top: 14px; }
.detrev__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.hsel .detrev__chev { top: auto; bottom: 17px; transform: none; }
.detrev__post { margin-top: 18px; }
.detrev__post:disabled { opacity: .45; cursor: not-allowed; }

/* Matches the section's own top padding, so the space under the two cards
   reads the same as the space above the header. */
.detrev__list { margin: 56px 0 0; padding: 0; list-style: none; }
.detrev__item { padding: 26px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
/* The last row has no closing hairline, so its own bottom padding would be
   added to the section's and the list would look bottom-heavy: 26 above the
   first name, 82 below the last. The section's 56px closes the list. */
.detrev__item:last-child { padding-bottom: 0; }
.detrev__itemhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.detrev__who { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.detrev__ok { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.detrev__when { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.detrev__title { margin: 14px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.detrev__text { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.detrev__acts { display: flex; align-items: center; gap: 18px; margin: 14px 0 0; }

@media (max-width: 1180px) {
  .dethero { height: 500px; }
  .dethero__title { font-size: 42px; }
  .dethero__fig { font-size: 34px; }
}
@media (max-width: 900px) {
  .detrev__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dethero { height: auto; min-height: 420px; }
  /* Stacked, the price no longer has a right edge to sit against. */
  .dethero__overlay { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px 24px; }
  .dethero__price { text-align: left; }
  .dethero__title { font-size: 30px; }
  .dethero__fig { font-size: 28px; }
  .dethero__counter { bottom: auto; top: 84px; }
  .dethero__tools { gap: 8px; }
  .dethero__save { padding: 10px 14px; font-size: 12px; }
  .detrev__pair { grid-template-columns: 1fr; }
}

/* Vehicle detail v3 — the dossier -----------------------------------------
   Opens with the audit verdict, keeps the rail on the left, and puts every
   chapter on the page instead of behind a tab. */
.dos__band { padding: 44px var(--pad-x) 30px; position: relative; overflow: hidden; }
.dos__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0; position: relative; z-index: 1; }
.dos__ref { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.dos__title { position: relative; z-index: 1; margin: 20px 0 0; font-size: 58px; font-weight: 800; letter-spacing: -.034em; line-height: 1.03; }

.dosaudit {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 30px 0 0;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 20px;
  overflow: hidden;
}
.dosaudit__cell { padding: 20px 22px; border-left: 1px solid rgba(var(--hairline-rgb), .12); }
.dosaudit__cell:first-child { border-left: 0; }
/* The verdict the rest of the page has to back up — the only lit cell. */
.dosaudit__cell--hi { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.dosaudit__label { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dosaudit__val { margin: 8px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.028em; }
.dosaudit__note { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }

.dos__body { padding: 34px var(--pad-x) 56px; }
/* Rail left, content right — the inverse of v1 and v2. */
.dos__grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: start; }
.dosrail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.dos__main { min-width: 0; }

.detprice--rail { padding: 28px 26px; border-radius: 24px; }
.detprice--rail .detprice__fig { font-size: 36px; }
.detprice--rail .detprice__was { font-size: 15px; }
.dosrail__acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dosrail__save {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 16px;
  border: 1px solid var(--dline-28);
  border-radius: 999px;
  background: transparent;
  color: var(--on-emph);
  font: 600 13px var(--font-sans);
  cursor: pointer;
  transition: all .18s ease;
}
.dosrail__save:hover { border-color: var(--on-emph); }
.dosrail__save[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dosrail__save[aria-pressed="true"] .dosrail__saveicon svg { fill: currentColor; }
.dosrail__saveicon { display: inline-flex; }
.dosrail__circle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--dline-28);
  border-radius: 50%;
  color: var(--on-emph);
}
.dosrail__circle:hover { border-color: var(--on-emph); color: var(--on-emph); }

.detindex { padding: 22px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); }
.detindex__label { margin: 0 0 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
/* Numbered on the dossier, plain on the twin-rail page — the number is a
   modifier, not a second component. */
.detindex__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .10);
  color: var(--text-primary);
}
.detindex__row:hover .detindex__t { color: var(--accent); }
.detindex__n { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ink-4); }
.detindex__t { font-size: 14.5px; font-weight: 600; transition: color .16s ease; }
.detindex--num .detindex__row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.detindex__hint { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

.dosrail__seller { padding: 22px 24px; border-radius: 24px; }
.dosseller { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.dosseller__logo { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tile); }
.dosseller__name { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.018em; }
.dosseller__cta { width: 100%; justify-content: space-between; margin-top: 18px; }

/* Gallery: one big photo and eight tiles, closed before the chapters. */
.dosgal { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 14px; height: 700px; margin-bottom: 34px; }
.dosgal__hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--bg-tile); }
.dosgal__shot {
  position: absolute;
  left: 16px; bottom: 16px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .72);
  color: #F1EEE7;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dosgal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}
.dosgal__arrow:hover { background: #FBFAF5; }
.dosgal__arrow--prev { left: 16px; }
.dosgal__arrow--next { right: 16px; }
.dosgal__tiles { display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.dosgal__tile {
  position: relative;
  padding: 0;
  border: 1.5px solid rgba(var(--hairline-rgb), .14);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-tile);
  cursor: pointer;
}
.dosgal__tile[aria-current="true"] { border-color: var(--text-primary); }
/* The remainder is computed from the shot array, never written by hand. */
.dosgal__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 16, 14, .62);
  color: #F1EEE7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Chapters ---------------------------------------------------------------- */
/* The long read asks for the heavier rule between sections — with nothing
   else separating them it has to be visible. */
.doschap { margin-top: 52px; padding-top: 34px; border-top: 1px solid rgba(var(--hairline-rgb), .14); scroll-margin-top: 118px; }
/* The first section needs no rule: the stat strip above it already separates. */
.doschap--open { margin-top: 34px; padding-top: 0; border-top: 0; }
.doschap--first { margin-top: 0; padding-top: 0; border-top: 0; }
.doschap__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 4px; }
.doschap__n { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); }
.doschap__n--now { color: var(--accent); }
.doschap__h2 { font-size: 30px; font-weight: 800; letter-spacing: -.027em; }
.doschap__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.dosspec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 22px 0 0; }
.dosspec__row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.dosspec__row dt { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dosspec__row dd { margin: 0; font-size: 14.5px; font-weight: 700; text-align: right; }

/* ⚠️ NOTED must not read as a softer PASS. An accent-derived fill collapses
   into the PASS chip the moment the accent is terracotta, and then the claim
   of "two cosmetic points" has nothing legible to point at. v3 and v4 both
   ask for the outlined treatment; v1 and v2 keep the tinted one. */
.detcheck--outlined .detcheck__st--noted {
  background: transparent;
  border: 1.5px solid var(--warn);
  color: var(--warn);
}
.detcheck--outlined .detcheck__st--noted .detcheck__dot { background: var(--warn); }

/* The stretching map block — shared by the dossier and the spec-panel
   variants. No height of its own: it grows to whatever the cards beside it
   need, which is the whole point. */
.detmap { padding: 56px var(--pad-x) 56px; border-top: 1px solid rgba(var(--hairline-rgb), .10); scroll-margin-top: 118px; }
.detmap__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: stretch; margin-top: 26px; }
.detmap__map {
  position: relative;
  height: 100%;
  min-height: 430px;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  overflow: hidden;
  background: var(--bg-tile);
}
.detmap__chip {
  position: absolute;
  left: 18px; top: 18px;
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  color: #171512;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.detmap__pin {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #171512;
  color: var(--accent);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6);
}
.detmap__side { display: flex; flex-direction: column; gap: 18px; }
.detmap__addr { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; }
.detmap__hours { margin: 18px 0 0; }
.detmap__hrow { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.detmap__hrow dt { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.detmap__hrow dd { margin: 0; font-size: 14.5px; font-weight: 600; }
.detmap__appt { color: var(--accent); }
.detmap__deliv { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.detmap__cta { width: 100%; justify-content: space-between; margin-top: 18px; }

/* Photo furniture keeps its polarity — it sits on images. */
[data-theme="dark"] .dosgal .ph,
[data-theme="dark"] .detmap__map .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1280px) {
  .dos__grid { grid-template-columns: 1fr; }
  /* Above the gallery it has nothing left to stick to. */
  .dosrail { position: static; }
  .dosgal { height: 520px; }
  .detmap__grid { grid-template-columns: 1fr; }
  .detmap__map { min-height: 340px; }
}
@media (max-width: 900px) {
  .dosaudit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dosaudit__cell { border-top: 1px solid rgba(var(--hairline-rgb), .12); }
  .dosaudit__cell:nth-child(-n+2) { border-top: 0; }
  .dosaudit__cell:nth-child(odd) { border-left: 0; }
  .dos__title { font-size: 40px; }
  .dosspec { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dosaudit { grid-template-columns: 1fr; }
  .dosaudit__cell { border-left: 0; }
  .dosaudit__cell:first-child { border-top: 0; }
  .dos__title { font-size: 30px; }
  /* One column, and the tiles become a row you scroll. */
  .dosgal { display: block; height: auto; }
  .dosgal__hero { aspect-ratio: 4 / 3; }
  .dosgal__tiles { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
  .dosgal__tile { flex: none; width: 108px; aspect-ratio: 4 / 3; }
  .doschap__h2 { font-size: 24px; }
}

/* Buyer account -------------------------------------------------------------
   The signed-in buyer's own account: contact details, address, what they are
   shopping for, and what is open right now. Not /dealer/profile — that is a
   business with a team, hours and payouts.

   ⚠️ The rail navigates, the chips switch panels. An earlier build had the
   rail doing both: it moved its own highlight without changing the panel,
   and the identically-styled card meant navigation on one page and tabs on
   another. Five rail rows are links; the four panels have their own chip row
   in the content column.

   ⚠️ Every destructive or warning control is --warn, never the accent — the
   missing-phone hint, per-session sign out, sign out everywhere, delete
   account. Accent means "good, do this". Accent fills keep dark ink in both
   themes (--on-accent): rail badges, switch knobs, tick circles. */
.acc__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.acc__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.acc__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.acc__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.acc__body { padding: 8px var(--pad-x) 96px; }
.acc__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 34px; align-items: start; }
.acc__main { min-width: 0; }
.acc__rail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }

/* Identity card ---------------------------------------------------------- */
.accid { padding: 26px 24px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); text-align: center; }
.accid__av { position: relative; width: 92px; height: 92px; margin: 0 auto; }
.accid__ph { display: block; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; }
.accid__cam { position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--ink); color: var(--accent); cursor: pointer; }
.accid__name { margin: 16px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.018em; }
.accid__mail { margin: 5px 0 0; font-size: 13.5px; color: var(--text-muted); }
.accid__meta { margin: 10px 0 0; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
/* Lifetime figures, and they stay lifetime — never summed into "open". */
.accid__counts { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
/* dt comes first in the markup because a <dl> requires it; the figure
   still reads above its label. */
.accid__count { display: flex; flex-direction: column-reverse; }
.accid__count + .accid__count { border-left: 1px solid rgba(var(--hairline-rgb), .12); }
.accid__num { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.accid__lbl { margin: 3px 0 0; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }

/* Rail navigation — links, not tabs -------------------------------------- */
.accnav { padding: 20px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.accnav__list { margin: 0; padding: 0; list-style: none; }
.accnav__row { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 13px; color: var(--text-secondary); font-size: 14.5px; font-weight: 500; transition: all .16s ease; }
.accnav__row:hover { background: rgba(var(--hairline-rgb), .05); color: var(--text-primary); }
.accnav__row.is-active { background: var(--ink); color: var(--page); font-weight: 700; }
.accnav__row.is-active:hover { background: var(--ink); color: var(--page); }
.accnav__row svg { flex: none; }
.accnav__label { flex: 1; }
.accnav__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }

/* Next up — emphasis card, cream on the dark page. */
.accnext { padding: 26px 24px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .accnext {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-24: rgba(23, 21, 18, .24);
  background: #F1EEE7;
  color: #171512;
}
.accnext__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.accnext__row { display: flex; align-items: center; gap: 13px; margin: 16px 0 0; }
.accnext__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: var(--on-accent); }
.accnext__what { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.accnext__when { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .66; }
.accnext__acts { display: flex; gap: 9px; margin: 18px 0 0; }
.accnext__go { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13px var(--font-sans); }
.accnext__go:hover { color: var(--on-accent); }
.accnext__alt { flex: none; padding: 12px 16px; border: 1px solid var(--dline-24); border-radius: 999px; background: transparent; color: var(--on-emph); font: 600 13px var(--font-sans); cursor: pointer; }

/* Panel chips ------------------------------------------------------------ */
.acc__chips { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid rgba(var(--hairline-rgb), .14); }
.accchip { padding: 10px 19px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 13.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.accchip:hover { border-color: rgba(var(--hairline-rgb), .45); }
.accchip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }

.acccard { padding: 34px 36px 36px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 26px; background: var(--bg-surface); }
.acccard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.acccard__h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; }
.acccard__lead { margin: 10px 0 0; max-width: 520px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.acccard__acts { display: flex; gap: 10px; margin: 0; }
.acccancel { padding: 14px 22px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 14px var(--font-sans); cursor: pointer; }
.acccancel:hover { border-color: var(--ink); }
.accsave { display: inline-flex; align-items: center; gap: 12px; padding: 14px 14px 14px 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 14px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.accsave__dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
/* Nothing to save is a real state, and the button says so. */
.accsave:disabled { background: rgba(var(--hairline-rgb), .12); color: var(--text-muted); cursor: default; }
.accsave:disabled .accsave__dot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }

.accfields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.accfields--addr { grid-template-columns: 2fr 1fr; }
.accfields__wide { grid-column: span 2; }
.acclbl { display: block; margin-bottom: 9px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
/* A missing phone number is the buyer's own loss, so it is a warning. */
.acchint { display: block; margin-top: 8px; font-size: 12.5px; color: var(--warn); }
.accblock { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accblock__label { margin: 0 0 18px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.accblock__label--tight { margin-bottom: 9px; }
.accbilling { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.accbilling input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.accabout { width: 100%; box-sizing: border-box; padding: 15px 17px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 14px; background: var(--field); font: 500 15px var(--font-sans); color: var(--text-primary); outline: none; resize: vertical; min-height: 96px; }
.accabout:focus { border-color: var(--ink); }

/* Preferences ------------------------------------------------------------ */
.acccard--prefs { padding: 34px 36px 30px; }
.acccard--notif { padding: 34px 36px 26px; margin-top: 20px; }
.acccard--prefs .acccard__lead { max-width: 560px; }
.accpref__group--first { margin-top: 24px; }
.accslider__top .acclbl { margin-bottom: 0; }
.acccard--notif .acccard__h2 { margin-bottom: 6px; }
.acccard--sec .accsec__row:first-of-type { margin-top: 26px; }
.acccard--act .acccard__head { margin-bottom: 8px; }
.accpref__label { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.accpref__group { margin-bottom: 22px; }
.accpref__group--last { margin-bottom: 24px; }
.accpref__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.accprefchip { padding: 10px 18px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 13.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.accprefchip:hover { border-color: rgba(var(--hairline-rgb), .45); }
.accprefchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
.accsliders { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 24px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accslider__top { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.accslider__val { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.accslider input { margin-top: 14px; }

.accnotif { margin: 0; padding: 0; list-style: none; }
.accnotif__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); cursor: pointer; }
.accnotif__what { min-width: 0; }
.accnotif__title { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.accnotif__note { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.accsw { flex: none; position: relative; width: 46px; height: 27px; margin-top: 2px; border: 0; border-radius: 999px; background: rgba(var(--hairline-rgb), .16); padding: 0; cursor: pointer; transition: background .18s ease; }
.accsw[aria-checked="true"] { background: var(--accent); }
.accsw__knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--bg-surface); transition: transform .18s ease; }
.accsw[aria-checked="true"] .accsw__knob { background: var(--on-accent); transform: translateX(19px); }

/* Security --------------------------------------------------------------- */
.acccard--sec { padding: 34px 36px 30px; }
.accsec__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accsec__title { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.accsec__note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--text-secondary); }
.accsec__top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0; }
.accchipsm { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.accbtn { padding: 13px 22px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; }
.accbtn:hover { border-color: var(--ink); }
.acc2fa { display: inline-flex; align-items: center; gap: 11px; padding: 13px 13px 13px 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 13.5px var(--font-sans); cursor: pointer; }
.acc2fa__dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.accsess { margin: 0; padding: 0; list-style: none; }
.accsess__head { padding: 20px 0 4px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accsess__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.accsess__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accsess__who { display: flex; align-items: center; gap: 13px; }
.accsess__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); }
.accsess__device { display: block; font-size: 14.5px; font-weight: 600; }
.accsess__when { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* Signing a device out is destructive: outlined warn, never a filled accent. */
.accout { padding: 9px 16px; border: 1px solid var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font: 600 12.5px var(--font-sans); cursor: pointer; }
.accdanger { margin-top: 20px; padding-top: 24px; border-top: 1px solid rgba(var(--hairline-rgb), .14); }
.accdanger__label { margin: 0 0 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.accdanger__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.accdanger__note { margin: 0; max-width: 460px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.accdanger__acts { display: flex; gap: 10px; }
.accdanger__btn { padding: 13px 20px; border: 1px solid var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font: 600 13.5px var(--font-sans); cursor: pointer; }

/* Activity — the buyer's inbox for the whole marketplace ------------------ */
.acccard--act { padding: 30px 32px 32px; }
.accact { margin: 8px 0 0; padding: 0; list-style: none; }
.accact__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.accact__ph { display: block; width: 76px; height: 56px; border-radius: 12px; overflow: hidden; }
.accact__body { min-width: 0; }
.accact__top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0; }
.acckind { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
/* A booking and an enquiry are waiting on the buyer, so they are lit. */
.acckind--live { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.accact__title { font-size: 16.5px; font-weight: 700; letter-spacing: -.016em; }
.accact__note { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.accact__side { display: flex; align-items: center; gap: 14px; }
.accact__stat { text-align: right; }
.accact__status { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.accact__status--live { color: var(--text-primary); }
.accact__when { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.accact__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--ink); border-radius: 50%; color: var(--text-primary); transition: all .2s ease; }
.accact__go:hover { background: var(--ink); color: var(--page); }
.accact__foot { border-top: 1px solid rgba(var(--hairline-rgb), .10); }

@media (max-width: 1200px) {
  .acc__grid { grid-template-columns: 1fr; }
  /* Stacked, the rail is a header for the panel rather than a sticky column. */
  .acc__rail { position: static; }
  .acc__title { font-size: 40px; }
}
@media (max-width: 860px) {
  .accfields, .accfields--addr, .accsliders { grid-template-columns: 1fr; }
  .accfields__wide { grid-column: auto; }
  .acccard, .acccard--prefs, .acccard--sec, .acccard--notif, .acccard--act { padding: 26px 22px 26px; }
}
@media (max-width: 720px) {
  .acc__title { font-size: 30px; }
  /* The thumbnail goes; the status and the link stay. */
  .accact__row { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; }
  .accact__ph { display: none; }
  .acccard__acts { width: 100%; }
  .acccard__acts button { flex: 1; justify-content: center; }
}

/* Saved cars — the buyer's watch list ---------------------------------------
   The page answers "what changed since I saved these", so the change line on
   every card, not the photo, is the thing that has to read first.

   It shares the account page's identity card and rail (.accid, .accnav) and
   the dealer screens' toolbar (.dealbar, .dealtab) — same shape, same
   metrics as this route's reference. Only the body grid is its own: 290px
   against the account page's 320px.

   ⚠️ Two things never flip with the theme. The RESERVED / SOLD badge sits on
   a photo scrim, so it stays light on dark in both — the dark reference
   swaps its ink with everything else and buries it. And a loss is --warn,
   which is the same terracotta in both themes.

   ⚠️ Never grid the card as 210px minmax(0,1fr) 210px: at this width the
   middle column computes to 23px and the title wraps down three lines. The
   content column carries a real flex basis (1 1 320px) instead. */
.sc__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.sc__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.sc__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.sc__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.sc__body { padding: 8px var(--pad-x) 96px; }
.sc__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; min-width: 0; }
.sc__rail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.sc__main { min-width: 0; }

/* Price watch — emphasis card, cream on the dark page -------------------- */
.scwatch { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .scwatch {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  background: #F1EEE7;
  color: #171512;
}
.scwatch__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.scwatch__sum { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.028em; color: var(--accent); }
.scwatch__note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }
.scwatch__bar { height: 6px; margin: 16px 0 0; border-radius: 999px; background: var(--dline-18); overflow: hidden; }
/* The track flips with the card; the fill stays the accent in both themes. */
[data-theme="dark"] .scwatch__bar { background: rgba(23, 21, 18, .14); }
.scwatch__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.scwatch__count { margin: 12px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* Change strip ----------------------------------------------------------- */
.scnews { padding: 24px 26px; margin-bottom: 22px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 24px; background: var(--bg-surface); }
.scnews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.scnews__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.scnews__seen { padding: 0; border: 0; background: transparent; font: 600 12.5px var(--font-sans); color: var(--text-muted); cursor: pointer; }
.scnews__seen:hover { color: var(--text-primary); }
.scnews__list { margin: 0; padding: 0; list-style: none; }
.scnews__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); color: var(--text-primary); }
.scnews__row:hover .scnews__text { color: var(--ink-4); }
/* An accent tint, not an accent fill: the glyph follows the ink either way. */
.scnews__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.scnews__ico--gone { background: rgba(201, 106, 58, .16); color: var(--warn); }
.scnews__body { min-width: 0; }
.scnews__text { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.scnews__car { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.scnews__when { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* Toolbar — the shared .dealbar; only the select is wider here. */
.scsort { width: 200px; }

/* The list --------------------------------------------------------------- */
.sclist { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.scrow { display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 22px; background: var(--bg-surface); overflow: hidden; }
.scrow--drop { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Still there, plainly gone. */
.scrow--gone { opacity: .62; }
.scrow__shot { flex: 0 0 210px; position: relative; display: block; min-height: 158px; background: var(--surface-2); }
.scrow__ph { position: absolute; inset: 0; }
/* On a photo scrim, so it keeps light ink in both themes. */
.scrow__tag { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(18, 16, 14, .78); color: #F1EEE7; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.scrow__body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; padding: 20px 0; }
.scrow__meta { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.scrow__title { margin: 8px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.22; }
.scrow__title a { color: var(--text-primary); }
.scrow__title a:hover { color: var(--ink-4); }
.scrow__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.scrow__chip { padding: 5px 11px; border: 1px solid rgba(var(--hairline-rgb), .14); border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.scrow__foot { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 14px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.scrow__dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.scrow__price { flex: 0 1 210px; min-width: 190px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px 20px 0; text-align: right; }
.scrow__was { margin: 0; font-size: 12.5px; color: var(--text-muted); text-decoration: line-through; }
.scrow__now { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }
/* The change line is the page. A drop reads as ink, a loss as the warning
   colour, and no news is muted — never the accent, which means "good". */
.scrow__change { margin: 5px 0 0; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.scrow__change--drop { color: var(--text-primary); }
.scrow__change--gone { color: var(--warn); }
.scrow__acts { display: flex; justify-content: flex-end; align-items: center; gap: 9px; margin: 16px 0 0; }
.scrow__act { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .18s ease; }
.scrow__act:hover { border-color: var(--ink); color: var(--text-primary); }
.scrow__act--cmp { color: var(--text-primary); }
.scrow__cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.scrow__cta:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }
/* A car someone else took is not an action to push, so its CTA is outlined. */
.scrow__cta--quiet { background: transparent; border-color: rgba(var(--hairline-rgb), .2); color: var(--text-primary); }
.scrow__cta--quiet:hover { background: transparent; border-color: var(--ink); color: var(--text-primary); }

.scempty { padding: 70px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; text-align: center; }
.scempty__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.scempty__note { margin: 11px auto 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.scempty__act { margin: 22px 0 0; }

/* Saved searches --------------------------------------------------------- */
.scq { margin-top: 26px; padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.scq__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.scq__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.scq__h2 { margin: 11px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.scq__new { display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; color: var(--text-primary); font-size: 13.5px; font-weight: 600; transition: all .18s ease; }
.scq__new:hover { border-color: var(--ink); color: var(--text-primary); }
.scq__newdot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.scq__list { margin: 0; padding: 0; list-style: none; }
/* Wrapped, not gridded: the label needs a basis or it collapses like the
   card row did. The arrow is pushed right by margin, not by a column. */
.scq__row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.scq__what { flex: 1 1 260px; min-width: 0; }
.scq__name { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.scq__terms { margin: 4px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.scq__state { flex: 0 0 auto; }
.scq__fresh { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.scq__quiet { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.scq__alerts { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.scq__go { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 50%; color: var(--text-primary); transition: all .2s ease; }
.scq__go:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }
.scq__note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* A real checkbox under a drawn track: keyboard, label and form semantics
   come free. The knob on the accent track keeps dark ink in both themes. */
.scsw__in { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.scsw { position: relative; flex: none; display: inline-block; width: 42px; height: 24px; border-radius: 999px; background: rgba(var(--hairline-rgb), .16); transition: background .18s ease; }
.scsw__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--page); transition: transform .18s ease; }
[data-theme="dark"] .scsw__knob { background: var(--surface); }
.scsw__in:checked + .scsw { background: var(--accent); }
.scsw__in:checked + .scsw .scsw__knob { background: var(--on-accent); transform: translateX(18px); }
.scsw__in:focus-visible + .scsw { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1200px) {
  .sc__grid { grid-template-columns: 1fr; }
  /* Stacked, the rail is a header for the list rather than a sticky column. */
  .sc__rail { position: static; }
  .sc__title { font-size: 40px; }
}
@media (max-width: 860px) {
  .sc__body { padding-bottom: 72px; }
  .scnews { padding: 20px 20px; }
  .scq { padding: 22px 20px 24px; }
  /* The price column stops being a column and sits under the details, but
     the photo stays a photo — a full-width hero here defeats a watch list. */
  .scrow__price { flex: 1 1 100%; padding: 0 20px 20px; text-align: left; }
  .scrow__acts { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .sc__title { font-size: 30px; }
  .scrow__shot { flex: 1 1 100%; min-height: 190px; }
  .scrow__body { padding: 0 20px; }
  .scrow__foot { flex-wrap: wrap; }
  .scempty { padding: 48px 20px; }
}

/* Bookings — the buyer's appointment diary -----------------------------------
   A list of dates says nothing. What the buyer needs is what to do about
   each one, so the date block, the status line and the CTA carry the work
   and the photo is the smallest column on the row.

   Shares the identity card and rail (.accid, .accnav) with the account and
   saved-cars pages, the toolbar (.dealbar, .dealtab) with the dealer
   screens, and the body grid with saved-cars — 290px, same route family.

   ⚠️ --warn is the "act or lose it" colour and it is the whole page: the
   pending row's border and date block, the missed status, Cancel, and the
   strip's border. The accent means confirmed and fine. Swapping them turns
   an expiring slot into a congratulation.

   ⚠️ The date block's fill IS the status, so it is the one place where a
   tint and a solid mean different things: solid --ink is confirmed, a warn
   tint is pending, a flat hairline is past.

   ⚠️ Never a fixed/minmax(0,1fr)/fixed grid here — that is what collapsed
   the content column to 23px on saved-cars and orders. The body column
   carries a real flex basis (1 1 300px). */
.bk__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.bk__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.bk__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.bk__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.bk__body { padding: 8px var(--pad-x) 96px; }
.bk__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; min-width: 0; }
.bk__rail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.bk__main { min-width: 0; }

/* Next up — emphasis card, cream on the dark page ------------------------ */
.bknext { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .bknext {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  background: #F1EEE7;
  color: #171512;
}
.bknext__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.bknext__car { margin: 12px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.024em; line-height: 1.15; }
.bknext__line { margin: 8px 0 0; font-size: 14px; opacity: .75; }
.bknext__facts { display: flex; flex-direction: column; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--dline-16); }
.bknext__fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.bknext__fact dt { opacity: .62; }
.bknext__fact dd { margin: 0; font-weight: 600; text-align: right; }
.bknext__act { margin: 16px 0 0; }
/* An accent fill, so its ink is --on-accent in both themes. */
.bknext__go { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 13px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13.5px var(--font-sans); }
.bknext__go:hover { background: var(--accent-hover); color: var(--on-accent); }
.bknext__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #171512; color: var(--accent); }

/* Action strip — only when something is waiting -------------------------- */
.bkact { padding: 24px 26px; margin-bottom: 22px; border: 1.5px solid var(--warn); border-radius: 24px; background: var(--bg-surface); }
.bkact__label { margin: 0 0 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.bkact__list { margin: 0; padding: 0; list-style: none; }
.bkact__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.bkact__text { flex: 1 1 320px; min-width: 0; font-size: 15px; line-height: 1.5; }
.bkact__cta { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.bkact__cta:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }
/* Explaining a no-show is not a thing to push, so it is outlined in warn. */
.bkact__cta--warn { background: transparent; border-color: var(--warn); color: var(--warn); }
.bkact__cta--warn:hover { background: transparent; color: var(--warn); border-color: var(--warn); }

/* Toolbar — the shared .dealbar, with a filled pill instead of a select. */
.bkbook { display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; transition: all .18s ease; }
.bkbook:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }
.bkbook__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

/* The rows ---------------------------------------------------------------- */
.bklist { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bkrow { display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 22px; background: var(--bg-surface); overflow: hidden; }
.bkrow--soon { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bkrow--wait { border-color: var(--warn); }
/* Been and gone, and it looks it — still legible, plainly behind you. */
.bkrow--past { opacity: .66; }

/* The fill states the status. */
.bkdate { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 22px 0; background: rgba(var(--hairline-rgb), .06); color: var(--text-muted); }
.bkdate--soon { background: var(--ink); color: var(--page); }
.bkdate--wait { background: rgba(201, 106, 58, .16); color: var(--warn); }
.bkdate__mon { margin: 0; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.bkdate__day { margin: 4px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.bkdate__time { margin: 5px 0 0; font-size: 9px; font-weight: 700; letter-spacing: .1em; }

.bkrow__shot { flex: 0 0 170px; position: relative; display: block; min-height: 150px; background: var(--surface-2); }
.bkrow__ph { position: absolute; inset: 0; }
.bkrow__body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; padding: 20px 0; }
.bkrow__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.bkkind { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* A handover is the one kind that is good news, so it takes the accent tint
   — a tint, not a fill, so its ink follows --ink in both themes. */
.bkkind--good { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.bkstatus { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bkstatus--soon { color: var(--text-primary); }
.bkstatus--warn { color: var(--warn); }
.bkrow__title { margin: 9px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.24; }
.bkrow__title a { color: var(--text-primary); }
.bkrow__title a:hover { color: var(--ink-4); }
.bkrow__note { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.bkrow__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: auto 0 0; padding-top: 14px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bkrow__dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.bkrow__side { flex: 0 1 190px; min-width: 180px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 20px 22px 20px 0; text-align: right; }
/* Both are spans inside a span, and a span is inline until it says
   otherwise — without this the caption runs on as "$164,900ASKING PRICE". */
.bkrow__price { display: block; margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.024em; }
.bkrow__pricenote { display: block; margin: 4px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bkrow__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin: 16px 0 0; }
/* Giving up a slot is destructive, so it is outlined warn — never filled,
   and never the accent. */
.bkcancel { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border: 1px solid var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font: 600 12.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.bkcancel:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.bkcta { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.bkcta:hover { border-color: var(--ink); color: var(--text-primary); }
/* Confirming is the one thing the page actually wants, so only it is filled. */
.bkcta--go { background: var(--ink); border-color: var(--ink); color: var(--page); }
.bkcta--go:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

.bkempty { padding: 70px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; text-align: center; }
.bkempty__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.bkempty__note { margin: 11px auto 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.bkempty__act { margin: 22px 0 0; }

/* Before you drive — advice, not data ------------------------------------- */
.bktips { margin-top: 26px; padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.bktips__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.bktips__h2 { margin: 11px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.bktips__grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 0 40px; margin: 16px 0 0; padding: 0; list-style: none; }
.bktip { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.bktip__tick { flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.bktip__body { min-width: 0; }
.bktip__title { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.bktip__note { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.bktips__note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 1200px) {
  .bk__grid { grid-template-columns: 1fr; }
  /* Stacked, the rail is a header for the diary rather than a sticky column. */
  .bk__rail { position: static; }
  .bk__title { font-size: 40px; }
}
@media (max-width: 940px) {
  /* The price column drops under the details; the date block and the photo
     stay side by side, because the date is the point of the row. */
  .bkrow__side { flex: 1 1 100%; align-items: flex-start; padding: 0 20px 20px; text-align: left; }
  .bkrow__acts { justify-content: flex-start; }
  .bktips__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .bk__body { padding-bottom: 72px; }
  .bkact { padding: 20px; }
  .bktips { padding: 22px 20px 24px; }
}
@media (max-width: 640px) {
  .bk__title { font-size: 30px; }
  .bkdate { flex: 0 0 84px; }
  .bkrow__shot { flex: 1 1 140px; min-height: 130px; }
  .bkrow__body { flex-basis: 100%; padding: 0 20px; }
  .bkempty { padding: 48px 20px; }
}

/* Buyer orders — parts, accessories and fitting ------------------------------
   ⚠️ Not the dealer's pipeline. That is .or* / .ortable, a different route
   for a different audience; nothing here is shared with it beyond the
   toolbar every screen in the package uses.

   The card is two bands rather than a row: a header carrying the reference,
   the status and the money, and a body listing what is actually in the box.
   That is why this page has no photo column — the parts are the rows.

   ⚠️ --warn marks "act or lose it" and nothing else: the blocked order's
   chip, its card border and the action strip. The accent means in progress
   and fine.

   ⚠️ Both bands wrap rather than grid. A fixed/minmax(0,1fr)/fixed grid is
   what collapsed the content column to 23px on saved-cars and orders. */
.bo__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.bo__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.bo__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.bo__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.bo__body { padding: 8px var(--pad-x) 96px; }
.bo__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; min-width: 0; }
.bo__rail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.bo__main { min-width: 0; }

/* Arriving next — emphasis card, cream on the dark page ------------------ */
.bonext { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .bonext {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  background: #F1EEE7;
  color: #171512;
}
.bonext__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.bonext__what { margin: 12px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.024em; line-height: 1.15; }
.bonext__line { margin: 8px 0 0; font-size: 14px; opacity: .75; }
.bonext__facts { display: flex; flex-direction: column; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--dline-16); }
.bonext__fact { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.bonext__fact dt { opacity: .62; }
.bonext__fact dd { margin: 0; font-weight: 600; text-align: right; }
.bonext__act { margin: 16px 0 0; }
/* An accent fill, so its ink is --on-accent in both themes. */
.bonext__go { display: inline-flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 13px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13.5px var(--font-sans); }
.bonext__go:hover { background: var(--accent-hover); color: var(--on-accent); }
.bonext__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #171512; color: var(--accent); }

/* Action strip ------------------------------------------------------------ */
.boact { padding: 24px 26px; margin-bottom: 22px; border: 1.5px solid var(--warn); border-radius: 24px; background: var(--bg-surface); }
.boact__label { margin: 0 0 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.boact__list { margin: 0; padding: 0; list-style: none; }
.boact__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.boact__text { flex: 1 1 320px; min-width: 0; font-size: 15px; line-height: 1.5; }
.boact__cta { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.boact__cta:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

/* Toolbar — the shared .dealbar, with a filled pill instead of a select. */
.boshop { display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; transition: all .18s ease; }
.boshop:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }
.boshop__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

/* The order cards --------------------------------------------------------- */
.bolist { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bocard { border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 22px; background: var(--bg-surface); overflow: hidden; }
.bocard--open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.bocard--wait { border-color: var(--warn); }
/* Closed and it looks it — still legible, plainly behind you. */
.bocard--closed { opacity: .72; }

.bohead { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 18px 22px; background: rgba(var(--hairline-rgb), .03); }
.bocard--open .bohead, .bocard--wait .bohead { background: var(--page); }
.bohead__ref { flex: 0 0 auto; margin: 0; }
.boref { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.boplaced { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* An accent TINT, so its ink follows --ink in both themes; the blocked one
   is an outline in warn, never a fill. */
.bochip { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.bochip--wait { background: transparent; border-color: var(--warn); color: var(--warn); }
.bochip--closed { background: transparent; border-color: rgba(var(--hairline-rgb), .16); color: var(--text-muted); }
.boeta { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--text-secondary); }
.bohead__money { flex: 0 0 auto; margin: 0; text-align: right; }
.bototal { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.024em; }
.bopay { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.bobody { padding: 6px 22px 18px; }
.bolines { margin: 0; padding: 0; list-style: none; }
.boline { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.boline__ph { flex: 0 0 76px; height: 56px; border-radius: 12px; overflow: hidden; }
/* A line that is a service or a discount keeps the column but shows no
   box — an empty hatch there reads as a missing photograph. */
.boline__ph--none { background: none; }
.boline__what { flex: 1 1 280px; min-width: 0; }
.boline__name { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.boline__meta { display: block; margin-top: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.boline__price { flex: 0 0 auto; font-size: 14.5px; font-weight: 700; }
/* A discount is money coming back, so it is not shouted in the warn colour
   and it is not celebrated in the accent — it is just a quieter line. */
.boline--credit .boline__name, .boline--credit .boline__price { color: var(--text-secondary); }

.bofoot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.bofoot__meta { flex: 1 1 300px; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bofoot__dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.bofoot__acts { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 9px; margin: 0; }
.bobtn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 15px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.bobtn:hover { border-color: var(--ink); color: var(--text-primary); }
/* Only the blocked order gets a filled button — it is the one thing on this
   page the buyer must actually do. */
.bobtn--go { background: var(--ink); border-color: var(--ink); color: var(--page); }
.bobtn--go:hover { color: var(--page); background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

.boempty { padding: 70px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; text-align: center; }
.boempty__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.boempty__note { margin: 11px auto 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.boempty__act { margin: 22px 0 0; }

/* Returns and fitting — policy, not data --------------------------------- */
.botips { margin-top: 26px; padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.botips__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.botips__h2 { margin: 11px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.botips__grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 0 40px; margin: 16px 0 0; padding: 0; list-style: none; }
.botip { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.botip__tick { flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.botip__body { min-width: 0; }
.botip__title { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.botip__note { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.botips__note { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 1200px) {
  .bo__grid { grid-template-columns: 1fr; }
  /* Stacked, the rail is a header for the list rather than a sticky column. */
  .bo__rail { position: static; }
  .bo__title { font-size: 40px; }
}
@media (max-width: 940px) {
  .botips__grid { grid-template-columns: 1fr; }
  /* The money leaves the header row rather than squeezing the ETA out. */
  .bohead__money { flex: 1 1 100%; text-align: left; }
  .bofoot__acts { flex: 1 1 100%; }
}
@media (max-width: 860px) {
  .bo__body { padding-bottom: 72px; }
  .boact { padding: 20px; }
  .bohead, .bobody { padding-left: 18px; padding-right: 18px; }
  .botips { padding: 22px 20px 24px; }
}
@media (max-width: 640px) {
  .bo__title { font-size: 30px; }
  .boline__ph { display: none; }
  .boempty { padding: 48px 20px; }
}

/* Messages — the buyer's inbox ----------------------------------------------
   ⚠️ Speech direction is not a surface. The buyer's own bubbles are
   --ink-filled in BOTH themes and sit right; the dealer's sit left on
   --page with a hairline. Running them through the usual ink-and-paper
   swap turns a conversation into a colour scheme, and the two sides stop
   being distinguishable at a glance.

   ⚠️ The two panes are flex-wrapped, never a grid. A minmax(0,…)
   two-column grid crushed the thread pane to 90px and clipped its buttons;
   a hard minmax(520px,1fr) pushed it off-screen instead. The list carries a
   max-width and the thread a real 520px basis.

   ⚠️ The list rows are flex:none. Without it they share out the column's
   height instead of keeping their own, and the column stops scrolling.

   Shares the identity card and rail (.accid, .accnav) with the other four
   buyer pages and the toolbar (.dealbar, .dealtab, .dealsearch) with the
   dealer screens. */
.ms__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.ms__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ms__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.ms__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ms__body { padding: 8px var(--pad-x) 96px; }
.ms__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: start; min-width: 0; }
.ms__rail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.ms__main { min-width: 0; }
/* The reference field is 230px, not the 240px the dealer screens use. */
.mssearch { width: 230px; }

/* How dealers answer you — emphasis card, cream on the dark page --------- */
.msreply { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .msreply {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  background: #F1EEE7;
  color: #171512;
}
.msreply__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.msreply__sum { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.028em; color: var(--accent); }
.msreply__note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }
.msreply__bar { height: 6px; margin: 16px 0 0; border-radius: 999px; background: var(--dline-18); overflow: hidden; }
/* The track flips with the card; the fill stays the accent in both themes. */
[data-theme="dark"] .msreply__bar { background: rgba(23, 21, 18, .14); }
.msreply__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.msreply__count { margin: 12px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* The two panes ----------------------------------------------------------- */
.msinbox { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.mspane { flex: 1 1 300px; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
.mslist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.msthread { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* A conversation in the list ---------------------------------------------- */
.msrow { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; width: 100%; padding: 16px 18px; border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 18px; background: var(--bg-surface); color: var(--text-primary); text-align: left; cursor: pointer; transition: all .18s ease; }
.msrow:hover { border-color: rgba(var(--hairline-rgb), .3); }
.msrow--unread { border-color: rgba(var(--hairline-rgb), .18); }
.msrow[aria-current="true"] { background: var(--row-alt); border-color: var(--ink); }
.msrow__av { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; }
/* The round mask goes on the inner element so the dot is not clipped into
   a crescent — the same trap as the unread dot on the dealer inbox. */
.msrow__avph { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.msrow__dot { position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); }
.msrow__body { min-width: 0; }
.msrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.msrow__name { font-size: 15px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msrow--unread .msrow__name { font-weight: 700; }
.msrow__when { flex: none; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.msrow--unread .msrow__when { color: var(--text-primary); }
.msrow__car { display: block; margin: 4px 0 0; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two lines of preview, then the ellipsis — a third line turns the list
   into the thread. */
/* The unprefixed `line-clamp` is left out on purpose: the W3C CSS profile
   still rejects it, and ThemeForest wants a clean validator more than it
   wants a property every engine only implements behind -webkit-. */
.msrow__prev { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); overflow: hidden; }
.msrow__flag { display: inline-flex; align-items: center; margin-top: 9px; padding: 4px 10px; border: 1px solid var(--warn); border-radius: 999px; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }

.msempty { flex: none; padding: 44px 20px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 20px; text-align: center; }
.msempty__title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.msempty__note { margin: 10px 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.msempty__btn { padding: 12px 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 600 13px var(--font-sans); cursor: pointer; }

/* The thread --------------------------------------------------------------- */
.mscard { border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); overflow: hidden; }
.mshead { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(var(--hairline-rgb), .10); }
.mshead__av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.mshead__who { flex: 1 1 200px; min-width: 0; }
.mshead__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.018em; }
/* An accent tint, not a fill, so its ink follows --ink in both themes. */
.mschip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.mshead__meta { margin: 5px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mshead__call { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 50%; color: var(--text-primary); transition: all .2s ease; }
.mshead__call:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }

.mscar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px 24px; background: var(--page); }
.mscar__ph { flex: 0 0 96px; height: 66px; border-radius: 12px; overflow: hidden; }
.mscar__what { flex: 1 1 200px; min-width: 0; }
.mscar__name { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.mscar__meta { margin: 4px 0 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mscar__go { flex: none; display: inline-flex; align-items: center; padding: 11px 17px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; color: var(--text-primary); font-size: 13px; font-weight: 600; white-space: nowrap; transition: all .18s ease; }
.mscar__go:hover { border-color: var(--ink); color: var(--text-primary); }

.msfeed { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px; list-style: none; max-height: 400px; overflow-y: auto; }
.msmsg { display: flex; flex-direction: column; align-items: flex-start; }
.msmsg--me { align-items: flex-end; }
.msbubble { max-width: 78%; padding: 14px 17px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 18px 18px 18px 6px; background: var(--page); color: var(--text-primary); font-size: 14.5px; line-height: 1.6; }
/* The buyer's own side is ink-filled in BOTH themes — a direction, not a
   surface — and the corner it loses is the other one. */
.msmsg--me .msbubble { border-color: transparent; border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--page); }
.msstamp { margin-top: 6px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.mscompose { padding: 18px 24px 22px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.msquick { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.msqbtn { padding: 8px 14px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 12.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.msqbtn:hover { border-color: var(--ink); }
.msdraft { width: 100%; box-sizing: border-box; min-height: 84px; padding: 14px 16px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 14px; background: var(--page); font: 500 14.5px var(--font-sans); color: var(--text-primary); outline: none; resize: vertical; }
.msdraft:focus { border-color: var(--ink); }
.mscompose__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.mscompose__hint { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.mssend { display: inline-flex; align-items: center; gap: 12px; padding: 13px 13px 13px 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 14px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.mssend__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
/* Nothing to send is a real state, and the button says so. */
.mssend:disabled { background: rgba(var(--hairline-rgb), .14); color: var(--text-muted); cursor: default; }
.mssend:disabled .mssend__dot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }

.mssafe { padding: 22px 24px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.mssafe__label { margin: 0 0 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.mssafe__list { margin: 0; padding: 0; list-style: none; }
.mssafe__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.mssafe__tick { flex: none; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

@media (max-width: 1200px) {
  .ms__grid { grid-template-columns: 1fr; }
  /* Stacked, the rail is a header for the inbox rather than a sticky column. */
  .ms__rail { position: static; }
  .ms__title { font-size: 40px; }
}
@media (max-width: 940px) {
  /* Stacked panes: the list stops being a scroller of its own, because a
     scroll box inside a scrolling page hides half the inbox. */
  .mspane { flex: 1 1 100%; max-width: none; max-height: none; overflow-y: visible; padding-right: 0; }
  .msthread { flex: 1 1 100%; }
  .msbubble { max-width: 88%; }
}
@media (max-width: 860px) {
  .ms__body { padding-bottom: 72px; }
  .mshead, .mscar, .msfeed, .mscompose { padding-left: 18px; padding-right: 18px; }
  .mssafe { padding: 20px 18px; }
}
@media (max-width: 640px) {
  .ms__title { font-size: 30px; }
  .mscar__ph { display: none; }
  .msbubble { max-width: 100%; }
}

/* Profile and account ------------------------------------------------------
   The dealer's own record. It shares the dashboard's rail and body grid —
   same account, same places to go — and fills the right column with the
   cards that make up the dealership's identity. */
.prof__head { padding: 44px var(--pad-x) 28px; position: relative; overflow: hidden; }
.prof__headrow { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.prof__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: 1.04; }
.prof__lead { margin: 12px 0 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.profstats { display: flex; align-items: baseline; gap: 26px; margin: 0; }
/* Source order is dt then dd, because that is what a <dl> requires; the
   figure still reads above its label. */
.profstats__cell { display: flex; flex-direction: column-reverse; text-align: right; }
.profstats__cell + .profstats__cell { padding-left: 26px; border-left: 1px solid rgba(var(--hairline-rgb), .14); }
.profstats__num { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.028em; }
.profstats__lbl { margin: 5px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }

/* Identity card: the cover, the avatar that sits across its edge, and the
   four figures a buyer judges a dealer by. */
.profhero { border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 26px; overflow: hidden; background: var(--bg-surface); }
.profhero__cover { position: relative; height: 170px; background: var(--bg-tile); }
.profhero__cover-btn {
  position: absolute;
  right: 16px; top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  color: #171512;
  font: 600 12.5px var(--font-sans);
  cursor: pointer;
}
.profhero__cover-btn:hover { background: #FBFAF5; }
.profhero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 0 30px 28px; }
.profhero__who { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 20px; margin-top: -44px; }
.profhero__av { flex: none; display: block; width: 110px; height: 110px; border: 4px solid var(--bg-surface); border-radius: 28px; overflow: hidden; background: var(--bg-tile); }
.profhero__names { padding-bottom: 4px; }
.profhero__nameline { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.profhero__name { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.028em; }
.profhero__verified { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.profhero__meta { margin: 9px 0 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.profhero__acts { display: flex; align-items: center; gap: 11px; margin: 0; padding-bottom: 4px; }
.profhero__public { display: inline-flex; align-items: center; padding: 13px 22px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.profhero__public:hover { border-color: var(--text-primary); color: var(--text-primary); }
.profhero__save { white-space: nowrap; }
.profhero__save:disabled { opacity: .45; cursor: not-allowed; }
.profhero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.profhero__cell { padding: 20px 30px; border-right: 1px solid rgba(var(--hairline-rgb), .1); }
.profhero__cell:last-child { border-right: 0; }
.profhero__lbl { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.profhero__val { display: flex; align-items: center; gap: 12px; margin: 7px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.024em; }
.profhero__track { flex: 1; height: 5px; border-radius: 999px; background: rgba(var(--hairline-rgb), .12); overflow: hidden; }
.profhero__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

.prof__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.prof__pair--team { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.prof__stack { display: flex; flex-direction: column; gap: 20px; }

.profcard { padding: 28px 30px; border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 24px; background: var(--bg-surface); }
.profcard__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.profcard__h3 { margin: 11px 0 20px; font-size: 21px; font-weight: 800; letter-spacing: -.022em; }
.profcard__h3--tight { margin-bottom: 0; }
.profcard__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.profcard__row--end { align-items: flex-end; }
.profcard__chip { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.proffields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proffields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.proffield { display: block; position: relative; }
.proffield--wide { grid-column: span 2; }
/* The shared chevron centres on a bare select; here a label sits above it,
   so the arrow is pinned to the field instead. */
.hsel .proffield__chev { top: auto; bottom: 17px; transform: none; }

.profbio { margin-top: 18px; min-height: 96px; resize: vertical; line-height: 1.6; }
.profbio__count { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

.profteam { margin: 16px 0 0; padding: 0; list-style: none; }
.profteam__invite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-sans);
  cursor: pointer;
}
.profteam__invite:hover { border-color: var(--text-primary); }
.profteam__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.profteam__row:first-child { border-top: 0; }
.profteam__av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-tile); }
.profteam__body { min-width: 0; }
.profteam__name { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.016em; }
.profteam__role { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.profteam__mail { margin: 3px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.profteam__chip { flex: none; padding: 5px 11px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.profteam__chip--admin { border-color: transparent; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-primary); }

.profsec__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.profsec__row:first-of-type { border-top: 0; }
.profsec__k { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 600; }
.profsec__on { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.profsec__d { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.profsec__btn {
  flex: none;
  padding: 10px 18px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-sans);
  cursor: pointer;
}
.profsec__btn:hover { border-color: var(--text-primary); }
.profsec__devices { padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.profsec__dev { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 0 0; font-size: 13.5px; color: var(--text-secondary); }
.profsec__tag { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.profsec__ago { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.profsec__out {
  width: 100%;
  margin-top: 8px;
  padding: 12px 18px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13.5px var(--font-sans);
  cursor: pointer;
}
.profsec__out:hover { border-color: var(--text-primary); }

.profsw { margin: 0; padding: 0; list-style: none; }
.profsw__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.profsw__row:first-child { border-top: 0; }
.profsw__k { margin: 0; font-size: 15px; font-weight: 600; }
.profsw__d { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }


.profbill { padding: 28px 30px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .profbill {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-20: rgba(23, 21, 18, .2);
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}
.profbill__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.profbill__label { opacity: .72; }
.profbill__renew { opacity: .5; }
.profbill__fig { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.profbill__per { font-size: 14px; font-weight: 500; letter-spacing: 0; opacity: .6; }
.profbill__plan { margin: 7px 0 0; font-size: 14px; opacity: .72; }
.profbill__card { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--dline-20); }
.profbill__brand { padding: 5px 10px; border: 1px solid var(--dline-28); border-radius: 6px; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.profbill__num { flex: 1; font-size: 14px; }
.profbill__update {
  padding: 9px 16px;
  border: 1px solid var(--dline-28);
  border-radius: 999px;
  background: transparent;
  color: var(--on-emph);
  font: 600 12.5px var(--font-sans);
  cursor: pointer;
}
.profbill__update:hover { border-color: var(--on-emph); }
.profbill__cta { width: 100%; justify-content: center; gap: 13px; margin-top: 18px; }
.profbill__cta .btn__arrow { background: #171512; color: var(--accent); }

/* ⚠️ Danger controls take --warn and stay outlined. In this template the
   accent happens to be terracotta too, so fill is what separates them: the
   accent is always filled, the danger control never is. */
.profdanger__note { margin: 9px 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.profdanger__btn {
  padding: 12px 20px;
  border: 1px solid rgba(201, 106, 58, .5);
  border-radius: 999px;
  background: transparent;
  color: var(--warn);
  font: 600 13.5px var(--font-sans);
  cursor: pointer;
}
.profdanger__btn:hover { border-color: var(--warn); }

/* The cover and the portrait are photographs, so their hatch stays light. */
[data-theme="dark"] .profhero__cover .ph,
[data-theme="dark"] .profhero__av.ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1200px) {
  .prof__pair, .prof__pair--team, .prof__pair--notify { grid-template-columns: 1fr; }
  .prof__title { font-size: 40px; }
  .profhero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profhero__cell:nth-child(2) { border-right: 0; }
  .profhero__cell:nth-child(n+3) { border-top: 1px solid rgba(var(--hairline-rgb), .1); }
}
@media (max-width: 720px) {
  .proffields, .proffields--three { grid-template-columns: 1fr; }
  .proffield--wide { grid-column: auto; }
  .profcard, .profbill { padding: 24px 22px; }
  .prof__title { font-size: 30px; }
  .profhero__stats { grid-template-columns: 1fr; }
  .profhero__cell { border-right: 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
  .profhero__cell:first-child { border-top: 0; }
  .profhero__row { padding: 0 20px 22px; }
  .profhero__acts { width: 100%; }
  .profstats { width: 100%; }
}

/* Add a listing ------------------------------------------------------------
   Three columns: the dealer rail, the form, and a preview that is built from
   the same fields the form writes. */
.al__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.al__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.al__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.al__lead { margin: 14px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.al__stats { display: flex; align-items: baseline; gap: 30px; margin: 30px 0 0; }
/* dt before dd in the source, as a <dl> requires; the figure reads first. */
.al__stat { display: flex; flex-direction: column-reverse; text-align: right; }
.al__stat + .al__stat { padding-left: 30px; border-left: 1px solid rgba(var(--hairline-rgb), .16); }
.al__statnum { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.al__statlbl { margin: 5px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.al__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.al__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.alside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }

.alsec { padding: 28px 30px 30px; border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 24px; background: var(--bg-surface); scroll-margin-top: 118px; }
.alsec__head { display: flex; align-items: baseline; gap: 15px; margin: 0; }
.alsec__n { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); }
.alsec__h2 { font-size: 24px; font-weight: 800; letter-spacing: -.024em; }
.alsec__lead { margin: 10px 0 24px 39px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

.alvin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
.alvin__in { text-transform: uppercase; letter-spacing: .06em; }
.alvin__btn { height: 52px; white-space: nowrap; }
.alnote {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 0 0;
  padding: 13px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 13.5px;
  line-height: 1.5;
}
.alnote__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

.alfields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.alfields--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alfield { display: block; position: relative; }
/* The base rule is `.hsel .chev` — two classes. A single-class override
   never won it, which is why the arrow floated above the middle of every
   labelled select. Match the specificity and clear the centring transform,
   because the anchor is the bottom now, not the middle. */
.hsel .alfield__chev { top: auto; bottom: 17px; transform: none; }
.alother { margin-top: 14px; }

.alblock { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.alblock__label { margin: 0 0 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.alchips { display: flex; flex-wrap: wrap; gap: 9px; }

.aldecl { margin: 24px 0 0; padding: 0; list-style: none; }
.aldecl__row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); cursor: pointer; }
.aldecl li:first-child .aldecl__row { border-top: 0; }
.aldecl__in { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); }
.aldecl__body { min-width: 0; }
.aldecl__k { display: block; font-size: 15px; font-weight: 600; }
.aldecl__d { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.aldecl__flag { font-size: 8.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
/* Required means required: terracotta, not a decorative grey. */
.aldecl__flag--req { color: var(--warn); }

.alfaults { margin-top: 10px; resize: vertical; min-height: 90px; line-height: 1.6; }
.alwarn { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--warn); }
.alwarn__ico { flex: none; display: inline-flex; }

.alshots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.alshot { position: relative; aspect-ratio: 4 / 3; border: 1px dashed rgba(var(--hairline-rgb), .14); border-radius: 14px; overflow: hidden; background: var(--bg-tile); }
.alshot--req { border-style: solid; border-color: rgba(var(--hairline-rgb), .18); }
.alshot--cover { border-style: solid; border-color: var(--accent); }
.alshot__tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(18, 16, 14, .72); color: #F1EEE7; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.alshot__tag--cover { background: var(--accent); color: var(--on-accent); }
.alshots__foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.alshots__note { margin: 0; max-width: 540px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.alshots__cta { white-space: nowrap; }

.almarket { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 22px; padding: 20px 22px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 18px; background: var(--bg-page); }
.almarket__label { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.almarket__note { margin: 8px 0 0; max-width: 520px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.almarket__right { margin: 0; text-align: right; }
.almarket__verdict { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-4); }
.almarket__verdict.is-good { color: var(--accent); }
.almarket__verdict.is-ok { color: var(--text-primary); }
/* Above market is a warning, so it takes the warn colour, not the accent. */
.almarket__verdict.is-warn { color: var(--warn); }
.almarket__count { display: block; margin-top: 5px; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

.alsw { margin: 22px 0 0; padding: 0; list-style: none; }
.alsw__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.alsw__row:first-child { border-top: 0; }
.alsw__k { margin: 0; font-size: 15px; font-weight: 600; }
.alsw__d { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

.aldesc { resize: vertical; min-height: 150px; line-height: 1.65; }
.aldesc__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.aldesc__count { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.aldesc__count.is-ok { color: var(--text-primary); }
.aldesc__draft {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 600 13px var(--font-sans);
  cursor: pointer;
}
.aldesc__draft:hover { border-color: var(--text-primary); }

.alprev { padding: 24px 24px 26px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .alprev {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-20: rgba(23, 21, 18, .2);
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}
.alprev__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.alprev__label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.alprev__ready { padding: 5px 11px; border-radius: 999px; background: var(--dline-20); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.alprev__ready.is-ready { background: var(--accent); color: var(--on-accent); }
/* The condition chip is a sibling of the photo, so the card is what it
   anchors to. */
.alprev__card { position: relative; margin-top: 16px; border-radius: 18px; overflow: hidden; background: var(--bg-surface); color: var(--text-primary); }
.alprev__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-tile); }
.alprev__cond { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(23, 21, 18, .72); color: #F1EEE7; font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.alprev__body { padding: 16px 18px 18px; }
.alprev__meta { margin: 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.alprev__title { margin: 7px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.alprev__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.alprev__price { font-size: 17px; font-weight: 800; letter-spacing: -.022em; }
.alprev__city { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.alprev__acts { display: flex; flex-direction: column; gap: 9px; margin: 18px 0 0; }
.alprev__pub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 14.5px var(--font-sans);
  cursor: pointer;
}
.alprev__pub .btn__arrow { background: #171512; color: var(--accent); }
/* Disabled is the honest state until the checklist is satisfied. */
.alprev__pub:disabled { background: var(--dline-20); color: var(--ink-4); cursor: default; }
.alprev__pub:disabled .btn__arrow { background: var(--dline-20); color: var(--ink-4); }
.alprev__draft {
  padding: 14px 22px;
  border: 1px solid var(--dline-28);
  border-radius: 999px;
  background: transparent;
  color: var(--on-emph);
  font: 600 14px var(--font-sans);
  cursor: pointer;
}
.alprev__draft:hover { border-color: var(--on-emph); }
.alprev__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; opacity: .62; }

.alchecks { padding: 22px 24px; border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 24px; background: var(--bg-surface); }
.alchecks__label { margin: 0 0 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.alchecks__list { margin: 0; padding: 0; list-style: none; }
.alcheck { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 13.5px; color: var(--text-muted); }
.alcheck.is-ok { color: var(--text-primary); }
.alcheck__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(var(--hairline-rgb), .1); color: transparent; }
.alcheck.is-ok .alcheck__box { background: var(--accent); color: var(--on-accent); }

[data-theme="dark"] .alshot .ph,
[data-theme="dark"] .alprev__media.ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1400px) {
  /* The preview drops under the form; the dealer rail keeps its place. */
  .al__grid { grid-template-columns: 290px minmax(0, 1fr); }
  .alside { position: static; grid-column: 2; }
}
@media (max-width: 1080px) {
  .al__grid { grid-template-columns: 1fr; }
  .alside { grid-column: 1; }
  .dashrail { position: static; }
  .alfields--three { grid-template-columns: 1fr 1fr; }
  .al__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .alfields, .alfields--three { grid-template-columns: 1fr; }
  .alvin { grid-template-columns: 1fr; }
  .alshots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alsec { padding: 22px 20px 24px; }
  .alsec__lead { margin-left: 0; }
  .al__title { font-size: 30px; }
  .al__stats { flex-wrap: wrap; gap: 18px; margin-top: 22px; }
  .al__stat + .al__stat { padding-left: 18px; }
}

/* Dealer inventory ----------------------------------------------------------
   The screen a dealer leaves open all day. It shares the dashboard's rail and
   body grid; the difference is that everything here is a table row. */
.ml__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.ml__headrow { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.ml__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: 1.04; }
.ml__lead { margin: 12px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ml__add { white-space: nowrap; }
.ml__kpinote { display: block; margin-top: 5px; font-size: 12.5px; color: var(--text-muted); }

.mlbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mlbar__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mltab { display: inline-flex; align-items: center; gap: 9px; }
.mltab__n { font-size: 9.5px; font-weight: 700; opacity: .62; }
.mlbar__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mlsearch { position: relative; display: block; width: 260px; }
.mlsearch__in { padding-right: 42px; }
.mlsearch__ico { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.mlsort { width: 220px; }

.mlbulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-radius: 16px;
  background: var(--surface-emph);
  color: var(--on-emph);
}
[data-theme="dark"] .mlbulk {
  --on-emph: #171512;
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}
.mlbulk__left, .mlbulk__acts { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.mlbulk__count { font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.mlbulk__clear, .mlbulk__btn {
  padding: 9px 15px;
  border: 1px solid var(--dline-28);
  border-radius: 999px;
  background: transparent;
  color: var(--on-emph);
  font: 600 12.5px var(--font-sans);
  cursor: pointer;
}
.mlbulk__clear:hover, .mlbulk__btn:hover { border-color: var(--on-emph); }

.mltable { border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; overflow: hidden; background: var(--bg-surface); }
/* Header and body share one grid definition, or the columns drift apart. */
.mlrow { display: grid; grid-template-columns: 34px 76px minmax(0, 1fr) 116px 84px 64px 104px 118px 44px; align-items: center; gap: 16px; padding: 14px 22px; }
.mltable__head { padding: 14px 22px; background: var(--bg-page); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.mlrow--body { border-top: 1px solid rgba(var(--hairline-rgb), .1); transition: background .16s ease; }
.mlrow--body:hover { background: var(--surface-zebra); }
.mlrow--body.is-picked { background: var(--row-alt); }
.mlrow__r { text-align: right; justify-self: end; }

.mlpick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(var(--hairline-rgb), .26);
  border-radius: 7px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.mlpick[aria-pressed="true"] { background: var(--bg-dark); border-color: var(--bg-dark); color: var(--accent); }

.mlthumb { display: block; width: 76px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--bg-tile); }
.mlcell { min-width: 0; }
.mlcell__model { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.018em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlcell__model:hover { color: var(--accent); }
.mlcell__meta { margin: 4px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
/* Derived from the record, never authored — see flagOf() in main.js. */
.mlflag { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.mlflag__dot { flex: none; width: 5px; height: 5px; border-radius: 50%; }
.mlflag--warn { background: rgba(201, 106, 58, .1); border: 1px solid rgba(201, 106, 58, .4); color: var(--warn); }
.mlflag--warn .mlflag__dot { background: var(--warn); }
.mlflag--good { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text-primary); }
.mlflag--good .mlflag__dot { background: var(--accent); }

.mlprice { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.mlwas { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); text-decoration: line-through; }
.mlnum { font-size: 14.5px; font-weight: 600; }
/* A live listing with no enquiries is a problem, not a neutral zero. */
.mlnum.is-warn { color: var(--warn); }

.mldays { display: block; font-size: 14px; font-weight: 700; }
.mldays.is-stale { color: var(--warn); }
.mldays__track { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: rgba(var(--hairline-rgb), .1); overflow: hidden; }
.mldays__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.mldays__fill.is-stale { background: var(--warn); }

/* ⚠️ Status colours are semantic. Accent means healthy, so RESERVED takes
   warn and DRAFT stays a neutral outline — never the accent. */
.mlstatus { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .11em; }
.mlstatus__dot { width: 6px; height: 6px; border-radius: 50%; }
.mlstatus--live { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text-primary); }
.mlstatus--live .mlstatus__dot { background: var(--accent); }
.mlstatus--draft { border: 1px solid rgba(var(--hairline-rgb), .2); color: var(--text-secondary); }
.mlstatus--draft .mlstatus__dot { background: var(--ink-4); }
.mlstatus--reserved { border: 1px solid var(--warn); color: var(--warn); }
.mlstatus--reserved .mlstatus__dot { background: var(--warn); }
.mlstatus--sold { border: 1px solid rgba(var(--hairline-rgb), .16); color: var(--ink-4); }
.mlstatus--sold .mlstatus__dot { background: var(--ink-4); }

.mlmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid rgba(var(--hairline-rgb), .14);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.mlmore:hover { border-color: var(--text-primary); color: var(--text-primary); }

.mlempty { padding: 60px 22px; text-align: center; }
.mlpager { margin-top: 0; }

[data-theme="dark"] .mlthumb.ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1200px) {
  .ml__title { font-size: 40px; }
  /* Views, enquiries and the age bar are the first to go; the decision
     columns — price and status — stay. */
  .mlrow { grid-template-columns: 34px 76px minmax(0, 1fr) 116px 118px 44px; }
  .mlrow > :nth-child(5), .mlrow > :nth-child(6), .mlrow > :nth-child(7) { display: none; }
}
@media (max-width: 760px) {
  .ml__title { font-size: 30px; }
  .mlbar__tools { width: 100%; }
  .mlsearch, .mlsort { width: 100%; }
  .mlrow { grid-template-columns: 34px minmax(0, 1fr) 118px; gap: 12px; padding: 14px 16px; }
  .mlrow > :nth-child(2), .mlrow > :nth-child(4), .mlrow > :nth-child(9) { display: none; }
}

/* Dealer dashboard ---------------------------------------------------------
   The only page in the project with an app rail and charts.

   ⚠️ Chart marks are data, not surfaces. They are declared here per theme
   rather than reusing --ink / --surface, because running a line colour
   through the ink/paper swap silently turns "the enquiries series" into
   "whatever the text colour happens to be". */
:root, [data-theme="light"] {
  --chart-area: color-mix(in srgb, var(--accent) 22%, transparent);
  --chart-views: var(--accent);
  --chart-enq: #171512;
  --chart-grid: rgba(23, 21, 18, .09);
  --chart-base: rgba(23, 21, 18, .18);
  --mark-mid: color-mix(in srgb, var(--accent) 55%, #171512);
  --mark-ink: #171512;
  --mark-donut2: color-mix(in srgb, var(--accent) 70%, #171512);
  --mark-donut3: color-mix(in srgb, var(--accent) 45%, #171512);
  --mark-donut4: color-mix(in srgb, var(--accent) 25%, #171512);
}
[data-theme="dark"] {
  --chart-enq: #F1EEE7;
  --chart-grid: rgba(241, 238, 231, .1);
  --chart-base: rgba(241, 238, 231, .2);
  --mark-mid: color-mix(in srgb, var(--accent) 55%, #F1EEE7);
  --mark-ink: #F1EEE7;
  --mark-donut2: color-mix(in srgb, var(--accent) 70%, #F1EEE7);
  --mark-donut3: color-mix(in srgb, var(--accent) 45%, #F1EEE7);
  --mark-donut4: color-mix(in srgb, var(--accent) 25%, #F1EEE7);
}

.dash__head { padding: 44px var(--pad-x) 28px; position: relative; overflow: hidden; }
.dash__headrow { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.dash__title { margin: 18px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: 1.04; }
.dash__lead { margin: 12px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.dash__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash__rangewrap { width: 190px; }
.dash__add { white-space: nowrap; }

.dash__body { padding: 8px var(--pad-x) 96px; }
.dash__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 34px; align-items: start; }
.dashrail { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.dash__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.dashnav { padding: 22px 20px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); }
.dashnav__head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid rgba(var(--hairline-rgb), .10); }
.dashnav__logo { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tile); }
.dashnav__dealer { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.018em; }
.dashnav__plan { margin: 4px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dashnav__list { margin: 14px 0 0; padding: 0; list-style: none; }
.dashnav__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: 13px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
.dashnav__row:hover { background: rgba(var(--hairline-rgb), .05); color: var(--text-primary); }
.dashnav__row.is-active { background: var(--bg-dark); color: var(--bg-page); font-weight: 700; }
.dashnav__row.is-active:hover { background: var(--bg-dark); color: var(--bg-page); }
.dashnav__badge {
  margin-left: auto;
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
}

/* Quota is the number that decides whether a dealer upgrades, so it lives in
   the rail rather than in billing. */
.dashplan { padding: 24px 24px 26px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .dashplan {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}
.dashplan__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .72; }
.dashplan__count { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--accent); opacity: 1; }
.dashplan__bar { height: 6px; margin: 14px 0 0; border-radius: 999px; background: var(--dline-28); overflow: hidden; }
.dashplan__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dashplan__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }
.dashplan__cta { width: 100%; justify-content: center; gap: 13px; margin-top: 18px; }
.dashplan__cta .btn__arrow { background: #171512; color: var(--accent); }

.dashkpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; }
.dashkpi__card { padding: 24px 26px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; background: var(--bg-surface); }
.dashkpi__label { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
/* Value and delta live in one <dd>: inside a <dl> wrapper div only dt and dd
   are allowed, and a <p> there is a parse error. */
.dashkpi__dd { margin: 0; }
.dashkpi__val { display: block; margin-top: 10px; font-size: 36px; font-weight: 800; letter-spacing: -.032em; }
.dashkpi__delta { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.dashkpi__dir { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; }
.dashkpi__dir--up { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
/* A backlog is not an achievement — it gets the warn treatment. */
.dashkpi__dir--down { background: rgba(201, 106, 58, .16); color: var(--warn); }

.dashcard { padding: 28px 30px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); }
.dashcard__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dashcard__label { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dashcard__h2 { margin: 8px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.024em; }
.dashcard__more { font-size: 13px; font-weight: 600; white-space: nowrap; }

.dashchart__tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dashchart__legend { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dashchart__key { display: inline-flex; align-items: center; gap: 7px; }
.dashchart__sw { width: 11px; height: 11px; border-radius: 3px; }
.dashchart__sw--views { background: var(--chart-views); }
.dashchart__sw--enq { background: var(--chart-enq); }
.dashchart__seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(var(--hairline-rgb), .14); border-radius: 999px; }
.dashchart__segbtn {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: 600 11.5px var(--font-mono);
  letter-spacing: .06em;
  cursor: pointer;
}
.dashchart__segbtn[aria-pressed="true"] { background: var(--bg-dark); color: var(--bg-page); }
.dashchart__svg { display: block; width: 100%; height: 220px; margin-top: 22px; overflow: visible; }
.dashchart__area { fill: var(--chart-area); stroke: none; }
.dashchart__views { fill: none; stroke: var(--chart-views); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dashchart__enq { fill: none; stroke: var(--chart-enq); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: round; }
.dashchart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.dashchart__grid--base { stroke: var(--chart-base); }
.dashchart__axis { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.dash__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dash__pair--funnel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.dashfun { margin: 20px 0 0; padding: 0; list-style: none; }
.dashfun__row { padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.dashfun__row:first-child { border-top: 0; padding-top: 4px; }
.dashfun__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }
.dashfun__k { font-size: 14px; font-weight: 600; }
.dashfun__v { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.dashfun__bar { height: 6px; margin: 10px 0 0; border-radius: 999px; background: rgba(var(--hairline-rgb), .1); overflow: hidden; }
.dashfun__fill { display: block; height: 100%; border-radius: 999px; }
.dashfun__fill--first { background: var(--accent); }
.dashfun__fill--mid { background: var(--mark-mid); }
.dashfun__fill--last { background: var(--mark-ink); }
/* A number is only useful against a benchmark. */
.dashfun__note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

.dashmix { display: flex; align-items: center; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.dashmix__donut {
  position: relative;
  flex: none;
  width: 132px; height: 132px;
  margin: 0;
  border-radius: 50%;
  /* 12 / 8 / 7 / 4 / 3 of 34 */
  background: conic-gradient(
    var(--accent) 0 35.3%,
    var(--mark-donut2) 35.3% 58.8%,
    var(--mark-donut3) 58.8% 79.4%,
    var(--mark-donut4) 79.4% 91.2%,
    var(--mark-ink) 91.2% 100%);
}
/* The hole has to be the card's own surface, not the page's. */
.dashmix__hole {
  position: absolute;
  inset: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-surface);
}
.dashmix__holeval { font-size: 24px; font-weight: 800; letter-spacing: -.028em; }
.dashmix__holelbl { font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dashmix__legend { flex: 1; min-width: 180px; margin: 0; padding: 0; list-style: none; }
.dashmix__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.dashmix__row:first-child { border-top: 0; }
.dashmix__sw { flex: none; width: 11px; height: 11px; border-radius: 3px; }
.dashmix__sw--1 { background: var(--accent); }
.dashmix__sw--2 { background: var(--mark-donut2); }
.dashmix__sw--3 { background: var(--mark-donut3); }
.dashmix__sw--4 { background: var(--mark-donut4); }
.dashmix__sw--5 { background: var(--mark-ink); }
.dashmix__k { flex: 1; font-size: 14px; font-weight: 600; }
.dashmix__v { font-size: 12px; font-weight: 700; color: var(--text-muted); }

.dashtop { margin: 18px 0 0; padding: 0; list-style: none; }
.dashtop__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px 78px 84px; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.dashtop__row:first-child { border-top: 0; }
.dashtop__ph { display: block; width: 64px; height: 46px; border-radius: 10px; overflow: hidden; }
.dashtop__body { min-width: 0; }
.dashtop__model { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashtop__meta { margin: 4px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.dashtop__n { margin: 0; }
.dashtop__num { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.018em; }
.dashtop__cap { display: block; margin-top: 2px; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dashtop__st { margin: 0; text-align: right; }
.dashtop__chip { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 8.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.dashtop__chip--live { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.dashtop__chip--draft { border: 1px solid rgba(var(--hairline-rgb), .18); color: var(--text-muted); }

.dashinq { margin: 18px 0 0; padding: 0; list-style: none; }
.dashinq__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.dashinq__row:first-child { border-top: 0; }
.dashinq__av { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-tile); }
.dashinq__body { min-width: 0; }
.dashinq__who { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.016em; }
.dashinq__new { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-size: 8px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.dashinq__car { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dashinq__msg { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.dashinq__when { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 1200px) {
  .dash__grid { grid-template-columns: 1fr; }
  .dashrail { position: static; }
  .dashkpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__pair, .dash__pair--funnel { grid-template-columns: 1fr; }
  .dash__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .dashkpi { grid-template-columns: 1fr; }
  .dash__title { font-size: 30px; }
  .dashcard { padding: 22px 20px 20px; }
  /* Views and enquiries keep their columns; the thumbnail is what goes. */
  .dashtop__row { grid-template-columns: minmax(0, 1fr) 70px 62px; }
  .dashtop__ph, .dashtop__st { display: none; }
  .dashchart__tools { width: 100%; justify-content: space-between; }
}

/* Dealer enquiries ---------------------------------------------------------
   The inbox. It shares the dashboard's rail, body grid and toolbar with the
   other dealer screens; everything below is the two-pane conversation view.

   The response-time card in the rail is deliberately the existing .dashplan
   component: same emphasis card, same inversion in the dark theme. */
.eq__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.eq__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.eq__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.eq__lead { margin: 14px 0 0; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

/* ⚠️ Both minimums carry weight. With minmax(0, …) on either side the thread
   pane collapses to a sliver on a laptop and clips its own buttons under
   overflow: hidden. Below 1200px the panes stack instead of being crushed. */
.eq__panes { display: grid; grid-template-columns: minmax(300px, 380px) minmax(520px, 1fr); gap: 20px; align-items: start; }

.eqlist { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
.eqlist__rows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.eqlist__empty { padding: 48px 22px; text-align: center; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; }
/* Rows keep their height while the column scrolls — without this they are
   squashed to fit and the preview text disappears. */
.eqrow {
  flex: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1.5px solid rgba(var(--hairline-rgb), .10);
  border-radius: 18px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.eqrow:hover { border-color: rgba(var(--hairline-rgb), .3); }
.eqrow.is-unread { border-color: rgba(var(--hairline-rgb), .18); }
.eqrow.is-open { background: var(--row-alt); border-color: var(--ink); }
.eqrow__av { position: relative; width: 44px; height: 44px; }
/* The round mask lives on the inner element, not the wrapper: with
   overflow: hidden on the wrapper the unread dot is clipped by the circle
   and survives as a sliver that reads like a rendering artefact. */
.eqrow__avph { display: flex; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.eqrow__dot { position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); }
.eqrow.is-open .eqrow__dot { border-color: var(--row-alt); }
.eqrow__body { min-width: 0; }
.eqrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.eqrow__name { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqrow.is-unread .eqrow__name { font-weight: 700; }
.eqrow__when { flex: none; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.eqrow.is-unread .eqrow__when { color: var(--text-primary); }
.eqrow__car { margin: 5px 0 0; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eqrow__prev { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eqrow__chips { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; flex-wrap: wrap; }

.eqchip { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
/* Accent marks a good state — an offer on the table. */
.eqchip--offer { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.eqchip--kind { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); font-size: 8px; }
/* ⚠️ Overdue is terracotta, never the accent: it is a warning, not a win. */
.eqchip--wait { border-color: var(--warn); color: var(--warn); }

.eqmain { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.eqthread { border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); overflow: hidden; }
.eqth__head { display: flex; align-items: center; gap: 15px; padding: 22px 26px; border-bottom: 1px solid rgba(var(--hairline-rgb), .10); }
.eqth__av { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.eqth__who { flex: 1; min-width: 0; }
.eqth__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.018em; }
.eqth__meta { margin: 5px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.eqth__acts { display: flex; gap: 9px; margin: 0; }
.eqicon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; transition: all .18s ease; }
.eqicon:hover { border-color: var(--ink); color: var(--text-primary); }
/* Flagged is a control, so it fills with ink and inverts with the theme. */
.eqflag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.eqflag[aria-pressed="true"] svg { fill: var(--accent); }

.eqcar { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 26px; background: var(--bg-page); border-bottom: 1px solid rgba(var(--hairline-rgb), .10); }
.eqcar__ph { width: 96px; height: 66px; border-radius: 12px; overflow: hidden; }
.eqcar__body { min-width: 0; }
.eqcar__name { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.016em; }
.eqcar__meta { margin: 5px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.eqcar__open { display: inline-flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color .18s ease; }
.eqcar__open:hover { border-color: var(--ink); color: var(--text-primary); }
.eqcar__open .btn__arrow { width: 24px; height: 24px; }

.eqmsgs { display: flex; flex-direction: column; gap: 16px; padding: 26px; max-height: 420px; overflow-y: auto; }
.eqmsg { display: flex; }
.eqmsg--in { justify-content: flex-start; }
.eqmsg--out { justify-content: flex-end; }
.eqmsg__bubble { max-width: 76%; padding: 16px 19px; border-radius: 18px 18px 18px 6px; border: 1px solid rgba(var(--hairline-rgb), .12); background: var(--bg-page); }
/* An outgoing bubble is a direction of speech, not a surface: it keeps the
   ink fill in both themes and only the ink token itself flips. */
.eqmsg--out .eqmsg__bubble { border-radius: 18px 18px 6px 18px; border-color: transparent; background: var(--ink); color: var(--page); }
.eqmsg__text { margin: 0; font-size: 15px; line-height: 1.62; }
.eqmsg__stamp { margin: 9px 0 0; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }

.eqcomp { padding: 20px 26px 24px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.eqcomp__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.eqcanned { padding: 8px 14px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 12.5px var(--font-sans); cursor: pointer; transition: border-color .18s ease; }
.eqcanned:hover { border-color: var(--ink); }
.eqcomp__box { width: 100%; box-sizing: border-box; padding: 15px 17px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 14px; background: var(--bg-page); font: 500 15px var(--font-sans); color: var(--text-primary); outline: none; min-height: 92px; resize: vertical; }
.eqcomp__box:focus { border-color: var(--ink); }
.eqcomp__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.eqcomp__check { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; }
.eqcomp__check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
/* A send button that is always live teaches the dealer that pressing it
   means nothing; it stays inert until there is something to send. */
.eqcomp__send { display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 15px 15px 15px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 14.5px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.eqcomp__senddot { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.eqcomp__send:disabled { background: rgba(var(--hairline-rgb), .14); color: var(--text-muted); cursor: default; }
.eqcomp__send:disabled .eqcomp__senddot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }
.eqcomp__send:disabled:hover { background: rgba(var(--hairline-rgb), .14); }
/* The response-time card in the rail is the shared .dealrev. */

.eq__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eqbuyer { padding: 22px 24px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; background: var(--bg-surface); }
.eqbuyer__label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.eqbuyer__list { margin: 12px 0 0; }
.eqbuyer__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; }
.eqbuyer__row dt { color: var(--text-secondary); }
.eqbuyer__row dd { margin: 0; font-weight: 600; text-align: right; }

/* Emphasis card: dark on the cream page, cream on the dark one. */
.eqnext { padding: 22px 24px; border-radius: 22px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .eqnext {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-20: rgba(23, 21, 18, .24);
  background: #F1EEE7;
  color: #171512;
}
.eqnext__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.eqnext__title { margin: 12px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.022em; line-height: 1.15; }
.eqnext__copy { margin: 9px 0 16px; font-size: 13.5px; line-height: 1.55; opacity: .72; }
.eqnext__slots { display: flex; gap: 8px; flex-wrap: wrap; }
.eqslot { padding: 9px 14px; border: 1px solid var(--dline-20); border-radius: 999px; background: transparent; color: inherit; font: 500 12.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.eqslot:hover { border-color: var(--accent); }
.eqslot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

@media (max-width: 1200px) {
  .eq__panes { grid-template-columns: 1fr; }
  /* Stacked, a list that scrolls inside itself hides half the inbox. */
  .eqlist { max-height: none; overflow: visible; }
  .eq__title { font-size: 40px; }
}
@media (max-width: 860px) {
  .eq__cards { grid-template-columns: 1fr; }
  .eqcar { grid-template-columns: 96px minmax(0, 1fr); }
  .eqcar__open { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 720px) {
  .eq__title { font-size: 30px; }
      .eqth__head, .eqcar, .eqcomp, .eqmsgs { padding-left: 18px; padding-right: 18px; }
  .eqmsg__bubble { max-width: 88%; }
}

/* Dealer orders ------------------------------------------------------------
   The deal pipeline. Transcribed from orders.dc.html value for value; only
   three things depart from it, all of them project-wide rules:
   hard-coded colours become tokens so one file serves both themes, the
   muted greys come from --ink-2 rather than #a09c90 (the handoff's greys
   measure 2.2–3.5:1 and ThemeForest wants 4.5:1), and the accent is the
   terracotta the owner picked.

   ⚠️ Anything FILLED with the accent keeps dark ink in BOTH themes — the
   timeline ticks, the paperwork ticks, the next-action arrow. That is what
   --on-accent is for; running them through --ink puts a cream glyph on a
   light fill and it disappears. */
.or__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.or__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.or__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.or__lead { margin: 14px 0 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.dealstats { display: flex; align-items: baseline; gap: 30px; margin: 30px 0 0; }
/* dt before dd is required inside a <dl>; the visual order is CSS's job. */
.dealstat { position: relative; display: flex; flex-direction: column-reverse; text-align: right; }
.dealstat + .dealstat { padding-left: 30px; }
/* The divider is a fixed 36px rule sitting on the figure's baseline, not a
   border down the whole cell: the cell is two lines tall and a full-height
   border reads as a table. */
.dealstat + .dealstat::before {
  content: "";
  position: absolute;
  left: 0;
  top: -12px;
  width: 1px;
  height: 36px;
  background: rgba(var(--hairline-rgb), .16);
}
.dealstatnum { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.dealstatlbl { margin: 5px 0 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

/* The page sets its own vertical rhythm — 26 / 22 / 26 — so the flex gap of
   the shared dashboard column would double up. */
.or__main { display: block; }

/* auto-fit, so the row wraps instead of crushing four cards. */
.dealkpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 0 0 26px; }
.dealkpi__card { padding: 22px 24px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 22px; background: var(--bg-surface); }
.dealkpi__label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.dealkpi__dd { margin: 0; }
.dealkpi__val { display: block; margin-top: 10px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.dealkpi__delta { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13px; color: var(--text-secondary); }
.dealkpi__dir { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; }
.dealkpi__dir--up { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--text-primary); }
/* A backlog is not an achievement. */
.dealkpi__dir--down { background: rgba(201, 106, 58, .16); color: var(--warn); }

.dealbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(var(--hairline-rgb), .14); }
.dealbar__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.dealtab { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 13px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.dealtab:hover { border-color: rgba(var(--hairline-rgb), .45); }
.dealtab__n { font-family: var(--font-mono); font-size: 9.5px; opacity: .62; }
/* The active tab is a control, so it inverts with the theme. */
.dealtab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
.dealbar__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dealsearch { position: relative; display: block; width: 240px; }
.eq__bar .dealsearch { width: 230px; }
.dealsearch__in { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 38px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: var(--bg-surface); font: 500 13.5px var(--font-sans); color: var(--text-primary); outline: none; }
.dealsearch__in:focus { border-color: var(--ink); }
.dealsearch__ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.dealsort { width: 180px; }
.eq__bar .dealsort { width: 170px; }

.ortable { border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); overflow: hidden; margin-bottom: 26px; }
/* The scroller is load-bearing: eight columns need 1040px and the action
   column is clipped by the card without it. */
.ortable__scroll { overflow-x: auto; }
.ortable__inner { min-width: 1040px; }
.ortable__rows { margin: 0; padding: 0; list-style: none; }
.ortable__empty { padding: 52px 24px; text-align: center; border-top: 1px solid rgba(var(--hairline-rgb), .09); }
.ortable__emptyh { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ortable__emptyp { margin: 10px 0 18px; font-size: 14px; color: var(--text-muted); }
.ortable__emptybtn { padding: 12px 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 600 13.5px var(--font-sans); cursor: pointer; }
.orrow {
  display: grid;
  grid-template-columns: 118px 76px minmax(0, 1.15fr) minmax(0, 1fr) 126px 150px 118px 44px;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 14px 24px;
}
.ortable__head { padding: 15px 24px; background: var(--bg-page); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.orrow__r { text-align: right; }
/* The row is a button, so it has to say its own colour out loud: left to the
   UA default the cells render pure white on the dark theme. */
.orrow--body {
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .09);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: background .16s ease;
}
.orrow--body:hover { background: var(--surface-zebra); }
.orrow--body.is-open { background: var(--row-alt); }
.orcell__ref { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.orcell__ph { display: block; width: 76px; height: 52px; border-radius: 11px; overflow: hidden; }
.orcell { min-width: 0; }
.orcell__car { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orcell__sub { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orcell__buyer { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orcell__total { text-align: right; font-size: 15.5px; font-weight: 800; letter-spacing: -.022em; }
.orcell__go { display: flex; justify-content: flex-end; }
.orgo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--hairline-rgb), .2); color: var(--text-primary); }
.orrow--body.is-open .orgo { border-color: var(--ink); }

.orchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* Settled money is the good state and takes the accent tint; anything still
   owed is --warn. Never the other way round. */
.orchip--paid { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.orchip--due { border-color: var(--warn); color: var(--warn); }
.orchip--stage { padding: 7px 14px; font-size: 9px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.orchip--done { background: transparent; border-color: rgba(var(--hairline-rgb), .2); color: var(--text-primary); }

.orstage__name { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.orstage__name.is-done { color: var(--text-muted); }
.orstage__track { display: block; height: 4px; margin-top: 7px; border-radius: 999px; background: rgba(var(--hairline-rgb), .1); overflow: hidden; }
.orstage__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.orstage__fill.is-done { background: rgba(var(--hairline-rgb), .3); }

/* Flex, not a two-column grid: at ~924px a fixed grid pushed the side column
   off the screen instead of letting it wrap under. */
.or__detail { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ordeal { flex: 1 1 520px; min-width: 0; padding: 28px 30px 30px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.or__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ordeal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--hairline-rgb), .12); }
.ordeal__ref { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ordeal__car { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.026em; }
.ordeal__meta { margin: 8px 0 0; font-size: 14.5px; color: var(--text-secondary); }

.ortime { display: flex; flex-direction: column; margin: 24px 0 0; padding: 0; list-style: none; }
.ortime__step { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 18px; align-items: start; }
/* The rail is drawn under each marker rather than as one line behind the
   column: a step can grow to any height and the line still meets the next. */
.ortime__mark { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.ortime__dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 2px; border: 1.5px solid rgba(var(--hairline-rgb), .22); border-radius: 50%; color: transparent; }
.ortime__dot.is-done { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ortime__dot.is-next { border-color: var(--ink); }
.ortime__rail { flex: 1; width: 1.5px; min-height: 26px; background: rgba(var(--hairline-rgb), .16); }
.ortime__rail.is-done { background: var(--accent); }
.ortime__body { padding-bottom: 22px; }
/* Both are spans inside a grid cell: the cell is blockified, its children are
   not, and inline they read as one run-on sentence. */
.ortime__title { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; color: var(--text-muted); }
.ortime__title.is-lit { color: var(--text-primary); }
.ortime__note { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.ortime__when { padding-top: 6px; text-align: right; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ortime__when.is-lit { color: var(--text-primary); }

.ordocs { margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.ordocs__label { margin: 0 0 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ordocs__list { margin: 0; padding: 0; list-style: none; }
.ordocs__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.ordocs__who { display: flex; align-items: center; gap: 13px; min-width: 0; }
.ordocs__tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--hairline-rgb), .1); color: transparent; }
.ordocs__tick.is-ok { background: var(--accent); color: var(--on-accent); }
.ordocs__name { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.ordocs__name.is-ok { color: var(--text-primary); }
.ordocs__status { flex: none; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }
.ordocs__status.is-ok { color: var(--text-muted); }

/* Emphasis cards: dark on the cream page, cream on the dark one. */
.dealrev, .orsettle { border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .dealrev,
[data-theme="dark"] .orsettle {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  --dline-18: rgba(23, 21, 18, .18);
  --dline-28: rgba(23, 21, 18, .28);
  background: #F1EEE7;
  color: #171512;
}
.dealrev { padding: 24px 22px; }
.dealrev__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.dealrev__sum { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--accent); opacity: 1; }
.dealrev__bar { height: 6px; margin: 14px 0 0; border-radius: 999px; background: var(--dline-18); overflow: hidden; }
.dealrev__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dealrev__note { margin: 13px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }

.orsettle { padding: 26px 24px; }
.orsettle__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.orsettle__list { margin: 16px 0 0; }
.orsettle__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 14.5px; }
.orsettle__row + .orsettle__row { border-top: 1px solid var(--dline-16); }
.orsettle__row dt { opacity: .66; }
.orsettle__row dd { margin: 0; font-weight: 600; text-align: right; }
.orsettle__trade { color: var(--accent); }
.orsettle__total { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 14px 0 0; padding-top: 18px; border-top: 1px solid var(--dline-28); }
.orsettle__totallbl { font-size: 15px; font-weight: 700; }
.orsettle__totalval { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.orsettle__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .6; }

.ornext, .orhand { padding: 24px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.ornext__label, .orhand__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ornext__title { margin: 12px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ornext__copy { margin: 9px 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.ornext__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 14px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.ornext__dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
/* Delivered is the end of the road: the button says so and stops working. */
.ornext__btn:disabled { background: rgba(var(--hairline-rgb), .12); color: var(--text-muted); cursor: default; }
.ornext__btn:disabled .ornext__dot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }
.ornext__links { display: flex; gap: 9px; margin: 10px 0 0; }
.ornext__links a { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13px; font-weight: 600; }
.ornext__links a:hover { border-color: var(--ink); color: var(--text-primary); }
.orhand__list { margin: 12px 0 0; }
.orhand__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; }
.orhand__row dt { color: var(--text-secondary); }
.orhand__row dd { margin: 0; font-weight: 600; text-align: right; }
/* A handover with no date is the thing to fix, so it is a warning. */
.orhand__row dd.is-tbc { color: var(--warn); }

@media (max-width: 1200px) {
  .or__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .or__title { font-size: 30px; }
  .dealstats { flex-wrap: wrap; gap: 18px; }
  .dealstat + .dealstat { padding-left: 18px; }
  .dealbar__tools { width: 100%; }
  .dealsearch, .dealsort { width: 100%; }
  .ordeal { padding: 22px 20px 24px; }
  .ortime__step { grid-template-columns: 34px minmax(0, 1fr); }
  /* The stamp drops under the step rather than squeezing the title. */
  .ortime__when { grid-column: 2; text-align: left; padding-top: 0; margin: -14px 0 18px; }
}

/* Dealer analytics ---------------------------------------------------------
   The performance view. Transcribed from analytics.dc.html value for value;
   colours become tokens so one file serves both themes, the muted greys come
   from --ink-2 (the handoff's greys measure 2.2–3.5:1, ThemeForest wants
   4.5:1) and the accent is the terracotta the owner picked.

   ⚠️ Chart marks are data, not surfaces. The strokes, gridlines, funnel and
   hour bars use the --chart-* / --mark-* tokens declared with the dashboard:
   running them through the ordinary ink/paper swap turns "the views series"
   into "whatever the text colour happens to be".

   ⚠️ Anything FILLED with the accent keeps dark ink in both themes
   (--on-accent). A tint is not a fill: tinted circles take the theme ink. */
.ana__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.ana__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ana__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.ana__lead { margin: 14px 0 0; max-width: 660px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.ana__tools { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.anaseg { display: inline-flex; padding: 4px; border: 1px solid rgba(var(--hairline-rgb), .14); border-radius: 999px; background: var(--bg-surface); }
.anaseg__btn { padding: 9px 17px; border: 0; border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 12.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.anaseg__btn[aria-pressed="true"] { background: var(--ink); color: var(--page); font-weight: 700; }
.ana__export { display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ana__export:hover { border-color: var(--ink); color: var(--text-primary); }
.ana__exportdot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }

/* The page sets its own rhythm, so the shared dashboard column gap is off. */
.ana__main { display: block; }
.ana__main .dealkpi { margin-bottom: 22px; }

.anacard { padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.anacard__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.anacard__h2 { margin: 12px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }

/* Traffic chart ---------------------------------------------------------- */
.anachart { padding: 28px 30px 24px; margin-bottom: 20px; }
.anachart__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.anachart__h2 { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.026em; }
.anachart__legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; }
.anachart__key { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-secondary); }
.anachart__sw { width: 11px; height: 11px; border-radius: 3px; }
.anachart__sw--views { background: var(--chart-views); }
.anachart__sw--enq { background: var(--chart-enq); }
.anachart__plot { position: relative; height: 230px; }
/* preserveAspectRatio="none" scales x and y differently, so the strokes need
   non-scaling-stroke or they come out thicker one way than the other. */
.anachart__svg { display: block; width: 100%; height: 230px; overflow: visible; }
.anachart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.anachart__grid--base { stroke: var(--chart-base); }
.anachart__area { fill: var(--chart-area); stroke: none; }
.anachart__views { fill: none; stroke: var(--chart-views); stroke-width: 2.5; stroke-linejoin: round; }
.anachart__enq { fill: none; stroke: var(--chart-enq); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.anachart__axis { display: flex; justify-content: space-between; margin: 14px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }

/* Funnel + sources ------------------------------------------------------- */
/* stretch, plus a column in each card, so the two end level however long the
   left one grows. */
.ana__pair { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.anafun { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; }
.anasrc { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.anafun__h2, .anasrc__h2 { margin: 12px 0 20px; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }
.anafun__list, .anasrc__list { margin: 0; padding: 0; list-style: none; }
.anafun__row { padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.anafun__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }
.anafun__k { font-size: 15px; font-weight: 600; }
.anafun__vals { display: flex; align-items: baseline; gap: 10px; }
.anafun__v { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.anafun__pct { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
/* A <span> in a block stays inline: height and width do nothing to it and
   the bar disappears. Everything that draws a shape says display first. */
.anafun__bar { display: block; height: 6px; margin: 9px 0 0; border-radius: 999px; background: rgba(var(--hairline-rgb), .09); overflow: hidden; }
.anafun__fill { display: block; height: 100%; border-radius: 999px; background: var(--mark-mid); }
.anafun__fill--first { background: var(--accent); }
.anafun__fill--last { background: var(--mark-ink); }
.anafun__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

.anasrc__row { display: grid; grid-template-columns: minmax(0, 1fr) 56px 62px; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.anasrc__cell { min-width: 0; }
.anasrc__label { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anasrc__bar { display: block; height: 5px; margin: 8px 0 0; border-radius: 999px; background: rgba(var(--hairline-rgb), .09); overflow: hidden; }
.anasrc__fill { display: block; height: 100%; border-radius: 999px; background: var(--mark-mid); }
/* The reference steps the mix down the list; mixing into --ink keeps it
   right on both papers. */
.anasrc__fill--1 { background: var(--accent); }
.anasrc__fill--2 { background: color-mix(in srgb, var(--accent) 66%, var(--ink)); }
.anasrc__fill--3 { background: color-mix(in srgb, var(--accent) 52%, var(--ink)); }
.anasrc__fill--4 { background: color-mix(in srgb, var(--accent) 38%, var(--ink)); }
.anasrc__fill--5 { background: color-mix(in srgb, var(--accent) 30%, var(--ink)); }
.anasrc__share { text-align: right; font-size: 14px; font-weight: 700; }
.anasrc__delta { text-align: right; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; }
.anasrc__delta--up { color: var(--text-primary); }
/* A share that is shrinking is the thing to look at, so it is a warning. */
.anasrc__delta--down { color: var(--warn); }
.anasrc__delta--flat { color: var(--text-muted); }
/* Pinned to the bottom so the two cards close on the same line. */
.anasrc__note { margin: auto 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* Per-listing table ------------------------------------------------------ */
.anatable { border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); overflow: hidden; margin-bottom: 20px; }
.anatable__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 28px 20px; }
.anatable__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.anatab { padding: 9px 16px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 12.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.anatab:hover { border-color: rgba(var(--hairline-rgb), .45); }
.anatab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
/* Seven columns do not fit a laptop; without the scroller the verdict column
   is clipped by the card. */
.anatable__scroll { overflow-x: auto; }
.anatable__inner { min-width: 980px; }
.anatable__rows { margin: 0; padding: 0; list-style: none; }
.anarow { display: grid; grid-template-columns: 76px minmax(0, 1.2fr) 96px 96px 96px 110px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 28px; }
.anatable__cols { padding: 14px 28px; background: var(--bg-page); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
/* Rows say their own colour out loud: left to the UA default the cells fall
   back to white on the dark theme. */
.anarow--body { border-top: 1px solid rgba(var(--hairline-rgb), .09); color: var(--text-primary); }
.anarow__r { text-align: right; }
.anacell__ph { display: block; width: 76px; height: 52px; border-radius: 11px; overflow: hidden; }
.anacell { min-width: 0; }
.anacell__car { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.016em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anacell__meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anacell__n { text-align: right; font-size: 14.5px; font-weight: 600; }
.anacell__conv { text-align: right; font-size: 14.5px; font-weight: 800; }
.anacell__conv.is-weak { color: var(--warn); }
.anatag { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.anatag--good { border-color: transparent; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.anatag--bad { border-color: var(--warn); color: var(--warn); }

/* Actions + benchmarks --------------------------------------------------- */
.ana__foot { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
/* Emphasis card: dark on the cream page, cream on the dark one. */
.anafix { flex: 1 1 420px; min-width: 0; padding: 28px 30px 30px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .anafix {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  background: #F1EEE7;
  color: #171512;
}
.anafix__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.anafix__h2 { margin: 12px 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }
.anafix__sub { margin: 0 0 8px; font-size: 14px; line-height: 1.6; opacity: .7; }
.anafix__list { margin: 0; padding: 0; list-style: none; }
.anafix__row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--dline-16); }
.anafix__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--hairline-rgb), .12); color: var(--on-emph); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
/* The first badge is an accent fill, so it keeps dark ink in both themes. */
.anafix__num--first { background: var(--accent); color: var(--on-accent); }
.anafix__body { min-width: 0; }
.anafix__title { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.016em; }
.anafix__note { display: block; margin: 7px 0 0; font-size: 14px; line-height: 1.6; opacity: .72; }
.anafix__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--on-emph); }
.anafix__cta:hover { color: var(--on-emph); }
.anafix__ctadot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }

.ana__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.anabench__h3, .anahours__h3 { margin: 12px 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }
.anahours__h3 { margin-bottom: 16px; }
.anabench__list { margin: 0; padding: 0; list-style: none; }
.anabench__row { padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.anabench__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.anabench__k { font-size: 14px; color: var(--text-secondary); }
.anabench__vals { display: flex; align-items: baseline; gap: 9px; }
.anabench__you { font-size: 15px; font-weight: 700; }
.anabench__avg { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.anabench__track { display: block; position: relative; height: 5px; margin-top: 9px; border-radius: 999px; background: rgba(var(--hairline-rgb), .09); }
.anabench__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
/* Behind the median is a warning, never the accent. */
.anabench__fill.is-behind { background: var(--warn); }
.anabench__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--mark-ink); }
.anabench__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* ⚠️ The bars are direct children of the fixed-height track. Wrapped in an
   auto-height column their percentage heights resolve against nothing and
   the chart renders empty. */
.anahours__track { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin: 4px 0 0; padding: 0; list-style: none; }
.anahour { flex: 1; min-width: 0; border-radius: 5px 5px 0 0; background: rgba(var(--hairline-rgb), .16); }
.anahour--mid { background: var(--mark-mid); }
.anahour--hi { background: var(--accent); }
.anahours__axis { display: flex; justify-content: space-between; margin: 10px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; color: var(--text-muted); }
.anahours__note { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

@media (max-width: 1200px) {
  .ana__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .ana__title { font-size: 30px; }
  .ana__tools { width: 100%; }
  .anaseg { width: 100%; justify-content: space-between; }
  .anachart { padding: 22px 20px 20px; }
  .anacard { padding: 22px 20px 24px; }
  .anafix { padding: 22px 20px 24px; }
}

/* Dealer reviews ----------------------------------------------------------
   The public reviews and the tools to answer them. Transcribed from
   reviews.dc.html value for value; colours become tokens so one file serves
   both themes, muted greys come from --ink-2 (the handoff's greys measure
   2.2–3.5:1, ThemeForest wants 4.5:1) and the accent is the owner's terracotta.

   ⚠️ Star fills, distribution bars and category bars are data, not surfaces:
   empty stars and bar tracks take --hairline-rgb so they lighten with the
   page instead of being inverted into something wrong.

   ⚠️ Anything that draws a shape declares `display` — a <span> in a block
   stays inline, and height and width do nothing to it. */
.rev__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.rev__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rev__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.rev__lead { margin: 14px 0 0; max-width: 660px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.rev__main { display: block; }

/* Summary trio ----------------------------------------------------------- */
/* stretch, plus a column in every card, so all three end level. And no card
   pins its last element with margin:auto alone — the free space collects
   into one dead gap; the rows spread instead. */
.rev__cards { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-bottom: 22px; }
.revcard { min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.revcard__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.revcard__h3 { margin: 12px 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }
.revcard--overall { flex: 1 1 300px; }
.revcard--cats { flex: 1 1 300px; }

.revavg { display: flex; align-items: flex-end; gap: 16px; margin-top: 14px; }
.revavg__num { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: .9; }
.revavg__side { padding-bottom: 6px; }
.revstars { display: flex; gap: 3px; }
.revstar { display: block; }
.revstar--on { color: var(--accent); }
/* The empty star is a track, so it follows the page rather than inverting. */
.revstar--off { color: rgba(var(--hairline-rgb), .18); }
.revavg__count { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

.revdist { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; margin: 20px 0 0; padding: 0; list-style: none; }
.revdist__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 5px 0; }
.revdist__star { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); }
.revdist__bar { display: block; height: 6px; border-radius: 999px; background: rgba(var(--hairline-rgb), .09); overflow: hidden; }
.revdist__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.revdist__fill--mid { background: var(--mark-mid); }
/* One and two stars are the thing to act on, never a win. */
.revdist__fill--low { background: var(--warn); }
.revdist__n { text-align: right; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.revcard__note { margin: 0; padding-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

.revcats { margin: 0; padding: 0; list-style: none; }
.revcats__row { padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.revcats__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.revcats__k { font-size: 14.5px; font-weight: 600; }
.revcats__vals { display: flex; align-items: baseline; gap: 9px; }
.revcats__score { font-size: 15px; font-weight: 800; }
.revcats__delta { font-family: var(--font-mono); font-size: 9px; }
.revcats__delta--up { color: var(--text-primary); }
.revcats__delta--down { color: var(--warn); }
.revcats__delta--flat { color: var(--text-muted); }
.revcats__bar { display: block; height: 5px; margin-top: 8px; border-radius: 999px; background: rgba(var(--hairline-rgb), .09); overflow: hidden; }
.revcats__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.revcats__fill--mid { background: var(--mark-mid); }
.revcats__fill--low { background: var(--warn); }
.revcard--cats .revcard__note { margin: auto 0 0; padding-top: 16px; }

/* Emphasis card: dark on the cream page, cream on the dark one. */
.revworth { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; padding: 26px 26px 28px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .revworth {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  background: #F1EEE7;
  color: #171512;
}
.revworth__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.revworth__h3 { margin: 12px 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; line-height: 1.15; }
.revworth__note { margin: 10px 0 0; font-size: 14px; line-height: 1.6; opacity: .72; }
/* Four real rows, so the card fills with information rather than whitespace. */
.revworth__list { margin: auto 0 0; padding: 16px 0 0; list-style: none; }
.revworth__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--dline-16); font-size: 14px; }
.revworth__k { opacity: .66; }
.revworth__v { font-weight: 700; }
.revworth__v--warn { color: var(--warn); }

/* Review list ------------------------------------------------------------ */
.rev__empty { padding: 60px 24px; text-align: center; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; }
.rev__emptyh { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.rev__emptyp { margin: 10px 0 20px; font-size: 14.5px; color: var(--text-muted); }
.rev__emptybtn { padding: 13px 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 600 14px var(--font-sans); cursor: pointer; }

.rev__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.revitem { padding: 26px 28px 24px; border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
/* An unanswered complaint is visible while scrolling, not only on arrival. */
.revitem.is-waiting { border-color: var(--warn); }
.revitem__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.revitem__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.revitem__av { flex: none; display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.revitem__id { min-width: 0; }
.revitem__nameline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.revitem__name { font-size: 16.5px; font-weight: 700; letter-spacing: -.016em; }
.revchip { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.revchip--wait { padding: 5px 11px; font-size: 8.5px; background: transparent; border-color: var(--warn); color: var(--warn); }
.revitem__meta { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.revitem__rating { display: flex; align-items: center; gap: 14px; }
.revitem__text { margin: 16px 0 0; font-size: 15.5px; line-height: 1.68; color: var(--text-secondary); }

/* The dealer's answer is inset on the page colour, a step down from the
   card it sits in. */
.revreply { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--bg-page); }
[data-theme="dark"] .revreply { background: var(--surface-2); }
.revreply__av { display: block; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; }
.revreply__body { min-width: 0; }
.revreply__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.revreply__who { font-size: 14px; font-weight: 700; }
.revreply__when { font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.revreply__text { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }

.revprompt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); flex-wrap: wrap; }
.revprompt__copy { font-size: 13.5px; color: var(--text-muted); }
.revprompt__btn { display: inline-flex; align-items: center; gap: 11px; padding: 11px 11px 11px 20px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.revprompt__btn:hover { background: rgba(var(--hairline-rgb), .05); }
.revprompt__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }

.revform { margin-top: 18px; }
.revform__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.revcanned { padding: 8px 14px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 12.5px var(--font-sans); cursor: pointer; transition: border-color .18s ease; }
.revcanned:hover { border-color: var(--ink); }
.revform__box { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 14px; background: var(--bg-page); font: 500 14.5px var(--font-sans); color: var(--text-primary); outline: none; resize: vertical; min-height: 86px; }
.revform__box:focus { border-color: var(--ink); }
.revform__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.revform__note { font-size: 13px; color: var(--text-muted); }
.revform__acts { display: flex; gap: 9px; }
.revform__cancel { padding: 12px 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; }
.revform__cancel:hover { border-color: var(--ink); }
.revform__send { display: inline-flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 13.5px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.revform__senddot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
/* A reply of four words is not a reply; the button waits for one. */
.revform__send:disabled { background: rgba(var(--hairline-rgb), .14); color: var(--text-muted); cursor: default; }
.revform__send:disabled .revform__senddot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }

/* Pagination ------------------------------------------------------------- */
.revpager { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(var(--hairline-rgb), .14); }
.revpager__range { margin: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.revpager__pages { display: flex; align-items: center; gap: 8px; }
.revpager__arrow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(var(--hairline-rgb), .3); border-radius: 50%; background: transparent; color: var(--text-primary); cursor: pointer; transition: all .2s ease; }
.revpager__arrow:hover:not(:disabled) { border-color: var(--ink); }
.revpager__arrow:disabled { border-color: rgba(var(--hairline-rgb), .12); color: var(--ink-2); cursor: default; }
.revpager__n { min-width: 42px; height: 42px; padding: 0 14px; border: 1px solid rgba(var(--hairline-rgb), .18); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 14.5px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.revpager__n:hover { border-color: var(--ink); }
.revpager__n[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }

@media (max-width: 1200px) {
  .rev__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .rev__title { font-size: 30px; }
  .revcard, .revworth { padding: 22px 20px 24px; }
  .revitem { padding: 22px 20px 20px; }
  .revitem__rating { width: 100%; justify-content: space-between; }
  .revpager { justify-content: center; }
}

/* Dealer payouts ----------------------------------------------------------
   The money: what has been paid, what is clearing, and exactly what was
   deducted. Transcribed from payouts.dc.html value for value; colours become
   tokens so one file serves both themes, muted greys come from --ink-2 (the
   handoff's greys measure 2.2–3.5:1, ThemeForest wants 4.5:1) and the accent
   is the owner's terracotta.

   The page exists to prove the marketplace's own claim — 0% commission on the
   sale price — so every deduction is named and the commission line is printed
   reading "None". Do not quietly drop that row.

   ⚠️ Anything FILLED with the accent keeps dark ink in both themes
   (--on-accent): the rail badge, the arrow circles, the chips. Deductions and
   unsettled states are --warn, never the accent. */
.pay__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.pay__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.pay__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.pay__lead { margin: 14px 0 0; max-width: 660px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.pay__main { display: block; }
.pay__bar .dealsort { width: 170px; }
.pay__export { display: inline-flex; align-items: center; gap: 11px; padding: 11px 11px 11px 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pay__export:hover { border-color: var(--ink); color: var(--text-primary); }
.pay__exportdot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }

/* Rail card -------------------------------------------------------------- */
/* Emphasis card: dark on the cream page, cream on the dark one. */
.paynext { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .paynext,
[data-theme="dark"] .payclear {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  background: #F1EEE7;
  color: #171512;
}
.paynext__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.paynext__date { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--accent); opacity: 1; }
.paynext__sum { display: block; margin-top: 12px; font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.paynext__note { margin: 13px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }

/* Summary trio ----------------------------------------------------------- */
.pay__cards { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; margin-bottom: 22px; }
.paycard { min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 28px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.paycard__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.paycard__h3 { margin: 12px 0 16px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }
.paycard--account { flex: 1 1 300px; }
.paycard--fees { flex: 1 1 260px; }

.payclear { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; padding: 28px 30px 30px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
.payclear__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }
.payclear__label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.payclear__chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); }
.payclear__sum { display: block; margin-top: 14px; font-size: 46px; font-weight: 800; letter-spacing: -.036em; line-height: 1; }
.payclear__note { margin: 8px 0 0; font-size: 14px; opacity: .72; }
.payclear__list { margin: auto 0 0; padding: 22px 0 0; list-style: none; }
.payclear__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--dline-16); font-size: 14.5px; }
.payclear__k { opacity: .66; }
.payclear__v { font-weight: 600; }
/* The whole argument of the marketplace, printed as a line item. */
.payclear__v--none { color: var(--accent); }

.paybank { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 16px; }
.paybank__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--text-primary); }
.paybank__body { flex: 1; min-width: 0; }
.paybank__name { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.paybank__iban { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; color: var(--text-muted); }
.paybank__chip { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.payrows { margin: 16px 0 0; padding: 0; list-style: none; }
.payrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; }
.payrow__k { color: var(--text-secondary); }
.payrow__v { font-weight: 600; }
.paycard__acts { display: flex; gap: 9px; margin: auto 0 0; padding-top: 18px; }
.paycard__acts a { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.paycard__acts a:hover { border-color: var(--ink); color: var(--text-primary); }
.paycard__intro { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.paycard__note { margin: auto 0 0; padding-top: 16px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* Payouts table ---------------------------------------------------------- */
.paytable { border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 24px; background: var(--bg-surface); overflow: hidden; margin-bottom: 22px; }
/* Seven columns do not fit a laptop; without the scroller the arrow is
   clipped by the card. */
.paytable__scroll { overflow-x: auto; }
.paytable__inner { min-width: 940px; }
.paytable__rows { margin: 0; padding: 0; list-style: none; }
.paytable__empty { padding: 52px 26px; text-align: center; border-top: 1px solid rgba(var(--hairline-rgb), .09); }
.paytable__emptyh { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.paytable__emptyp { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.payline { display: grid; grid-template-columns: 128px 118px minmax(0, 1fr) 120px 120px 130px 44px; gap: 16px; align-items: center; width: 100%; padding: 15px 26px; }
.paytable__cols { background: var(--bg-page); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.payline__r { text-align: right; }
/* The row is a button, so it says its own colour out loud: left to the UA
   default the cells render pure white on the dark theme. */
.payline--body {
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .09);
  background: var(--bg-surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  transition: background .16s ease;
}
.payline--body:hover { background: var(--surface-zebra); }
.payline--body.is-open { background: var(--row-alt); }
.paycell__ref { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; }
.paycell__date { font-size: 14px; font-weight: 600; }
.paycell { min-width: 0; }
.paycell__covers { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paycell__meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paycell__num { text-align: right; font-size: 14.5px; font-weight: 600; }
/* Money leaving the payout is always the warn colour. */
.paycell__fees { color: var(--warn); }
.paycell__net { text-align: right; }
.paycell__netval { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.022em; }
.paycell__status { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.paycell__status--due { color: var(--warn); }
.paycell__go { display: flex; justify-content: flex-end; }
.paygo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(var(--hairline-rgb), .2); color: var(--text-primary); }
.payline--body.is-open .paygo { border-color: var(--ink); }

/* Breakdown -------------------------------------------------------------- */
.paybreak { padding: 28px 30px 30px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 24px; background: var(--bg-surface); }
.paybreak__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid rgba(var(--hairline-rgb), .12); }
.paybreak__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.paybreak__h2 { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.026em; }
.paybreak__meta { display: flex; align-items: center; gap: 11px; margin: 10px 0 0; flex-wrap: wrap; }
.paybreak__chip { display: inline-flex; align-items: center; padding: 5px 11px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.paybreak__chip--paid { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); }
.paybreak__chip--due { border-color: var(--warn); color: var(--warn); }
.paybreak__when { font-size: 14.5px; color: var(--text-secondary); }
.paybreak__acts { display: flex; gap: 9px; }
.paybreak__pdf { display: inline-flex; align-items: center; padding: 11px 18px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.paybreak__pdf:hover { border-color: var(--ink); color: var(--text-primary); }
.paybreak__go { display: inline-flex; align-items: center; gap: 11px; padding: 11px 11px 11px 20px; border-radius: 999px; background: var(--ink); color: var(--page); font-size: 13.5px; font-weight: 600; }
.paybreak__go:hover { color: var(--page); }
.paybreak__godot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.paybreak__scroll { overflow-x: auto; margin-top: 20px; }
.paybreak__inner { min-width: 720px; }
.paybreak__list { margin: 0; padding: 0; list-style: none; }
.paygrid { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px 130px; gap: 16px; }
.paybreak__cols { padding: 12px 0; border-bottom: 1px solid rgba(var(--hairline-rgb), .12); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.paybreak__row { align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(var(--hairline-rgb), .09); }
.payitem { min-width: 0; }
.payitem__label { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payitem__meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.paybreak__num { text-align: right; font-size: 14.5px; font-weight: 600; }
.paybreak__fee { color: var(--warn); }
.paybreak__fee--none { color: var(--text-muted); }
.paybreak__net { text-align: right; font-size: 15px; font-weight: 800; }
.paybreak__total { align-items: baseline; padding: 18px 0 0; }
.paybreak__totallbl { font-size: 15px; font-weight: 700; }
.paybreak__totalgross { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--text-muted); }
.paybreak__totalfees { text-align: right; font-size: 14.5px; font-weight: 600; color: var(--warn); }
.paybreak__totalnet { text-align: right; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }

@media (max-width: 1200px) {
  .pay__title { font-size: 40px; }
}
@media (max-width: 720px) {
  .pay__title { font-size: 30px; }
  .paycard, .payclear { padding: 22px 20px 24px; }
  .paybreak { padding: 22px 20px 24px; }
  .paybreak__acts { width: 100%; }
  .paybreak__acts a { flex: 1; justify-content: center; }
}

/* Dealer settings ---------------------------------------------------------
   The dealer's control panel for the marketplace's own services: which they
   buy, where their stock syncs, who is told, who has access, what they pay.

   ⚠️ It is NOT a business-details form. Opening hours, address, VAT and
   listing defaults were built here once and removed — hours belong to the
   public profile, listing defaults to the Add Listing form. Do not bring
   them back.

   Transcribed from settings.dc.html value for value; colours become tokens,
   muted greys come from --ink-2 for contrast, accent is the owner's
   terracotta. Accent fills keep dark ink in both themes (--on-accent):
   switch knobs, service tiles, chips, arrow circles. */
.set__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.set__headrow { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.set__title { margin: 22px 0 0; font-size: 52px; font-weight: 800; letter-spacing: -.032em; line-height: .98; }
.set__lead { margin: 14px 0 0; max-width: 660px; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.set__acts { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; flex-wrap: wrap; }
.set__discard { padding: 14px 22px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 14px var(--font-sans); cursor: pointer; }
.set__discard:hover { border-color: var(--ink); }
.set__save { display: inline-flex; align-items: center; gap: 13px; padding: 14px 14px 14px 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--page); font: 700 14.5px var(--font-sans); cursor: pointer; transition: all .2s ease; }
.set__savedot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
/* Nothing to save is a real state, and the button says so instead of
   pretending it can do something. */
.set__save:disabled { background: rgba(var(--hairline-rgb), .12); color: var(--text-muted); cursor: default; }
.set__save:disabled .set__savedot { background: rgba(var(--hairline-rgb), .1); color: var(--text-muted); }
.set__main { display: block; }

/* Rail health card — emphasis card, cream on the dark page. */
.sethealth { padding: 24px 22px; border-radius: 24px; background: var(--surface-emph); color: var(--on-emph); }
[data-theme="dark"] .sethealth,
[data-theme="dark"] .setsvchead,
[data-theme="dark"] .setplan {
  --on-emph: #171512;
  --surface-emph: #F1EEE7;
  --dline-16: rgba(23, 21, 18, .16);
  --dline-18: rgba(23, 21, 18, .18);
  --dline-24: rgba(23, 21, 18, .24);
  background: #F1EEE7;
  color: #171512;
}
.sethealth__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.sethealth__pct { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--accent); opacity: 1; }
.sethealth__bar { display: block; height: 6px; margin: 14px 0 0; border-radius: 999px; background: var(--dline-18); overflow: hidden; }
.sethealth__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.sethealth__note { margin: 13px 0 0; font-size: 13px; line-height: 1.55; opacity: .72; }

/* Tabs ------------------------------------------------------------------- */
.set__tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(var(--hairline-rgb), .14); }
.settab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid rgba(var(--hairline-rgb), .16); border-radius: 999px; background: transparent; color: var(--text-primary); font: 500 13.5px var(--font-sans); cursor: pointer; transition: all .18s ease; }
.settab:hover { border-color: rgba(var(--hairline-rgb), .45); }
.settab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
/* A tab carrying something unfinished says so rather than hiding it. */
.settab__flag { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

.setpanel { display: block; }
.setcard { padding: 32px 34px 34px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 26px; background: var(--bg-surface); }
.setcard__h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }
.setcard__lead { margin: 10px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.setcard__note { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* Services --------------------------------------------------------------- */
.setsvchead { padding: 28px 32px 30px; margin-bottom: 20px; border-radius: 26px; background: var(--surface-emph); color: var(--on-emph); }
.setsvchead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.setsvchead__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.setsvchead__h2 { margin: 12px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -.026em; }
.setsvchead__note { margin: 10px 0 0; max-width: 600px; font-size: 14.5px; line-height: 1.6; opacity: .72; }
.setsvchead__sum { text-align: right; }
.setsvchead__num { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.032em; line-height: 1; }
/* ⚠️ This label says what the figure measures. It once read "added to your
   monthly bill" while the sentence under it said services never bill as a
   standing charge — and the number moved with the switch, not with usage. */
.setsvchead__cap { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .6; }

.setgroup { margin-bottom: 22px; }
.setgroup__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.setgroup__label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.setgroup__rule { flex: 1; height: 1px; background: rgba(var(--hairline-rgb), .12); }
.setgroup__count { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setgroup__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.setsvc { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px 52px; gap: 18px; align-items: center; padding: 20px 22px; border: 1.5px solid rgba(var(--hairline-rgb), .10); border-radius: 20px; background: var(--bg-surface); }
.setsvc.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.setsvc__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(var(--hairline-rgb), .07); color: var(--text-muted); }
/* An accent fill always carries dark content, in both themes. */
.setsvc.is-on .setsvc__ico { background: var(--accent); color: var(--on-accent); }
.setsvc__body { min-width: 0; }
.setsvc__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.setsvc__name { font-size: 16px; font-weight: 700; letter-spacing: -.016em; }
.settag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.settag--quiet { background: transparent; border: 1px solid rgba(var(--hairline-rgb), .2); color: var(--text-muted); }
.setsvc__note { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.setsvc__usage { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setsvc__price { text-align: right; }
.setsvc__amount { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; }
.setsvc__unit { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setsvc__act { display: flex; justify-content: flex-end; }

/* One switch for the whole page. */
.setsw { position: relative; width: 46px; height: 27px; border: 0; border-radius: 999px; background: rgba(var(--hairline-rgb), .16); cursor: pointer; padding: 0; transition: background .18s ease; }
.setsw[aria-checked="true"] { background: var(--accent); }
.setsw__knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--page); transition: transform .18s ease; }
.setsw[aria-checked="true"] .setsw__knob { background: var(--on-accent); transform: translateX(19px); }
/* The marketplace channel cannot be switched off — it is the site itself. */
.setsw:disabled { cursor: default; }

/* Integrations ----------------------------------------------------------- */
.setchan { margin: 0; padding: 0; list-style: none; }
.setchan__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 130px 52px; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.setchan__logo { display: block; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; }
.setchan__body { min-width: 0; }
.setchan__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.setchan__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.016em; }
.setchan__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.setchan__state { text-align: right; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setchan__state--off { color: var(--warn); }
.setchan__act { display: flex; justify-content: flex-end; }
.setfields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.setfields__wide { grid-column: span 2; }
.setfields__pair { display: flex; gap: 10px; }
.setfields__pair .tin { flex: 1; }
.setroll { flex: none; padding: 0 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 12px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; }
.setroll:hover { border-color: var(--ink); }

/* Notifications ---------------------------------------------------------- */
.setnotif { margin: 0; padding: 0; list-style: none; }
.setnotif__grid { display: grid; grid-template-columns: minmax(0, 1fr) 74px 74px 74px; gap: 16px; align-items: center; }
.setnotif__cols { padding: 18px 0 12px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.setnotif__row { padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.setnotif__what { min-width: 0; }
.setnotif__label { display: block; font-size: 15px; font-weight: 600; }
.setnotif__note { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.setnotif__cell { display: flex; justify-content: center; }
.setcheck { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1.5px solid rgba(var(--hairline-rgb), .22); border-radius: 8px; background: transparent; color: transparent; cursor: pointer; transition: all .16s ease; }
.setcheck[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.setquiet { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(var(--hairline-rgb), .10); flex-wrap: wrap; }
.setquiet__title { display: block; font-size: 15.5px; font-weight: 700; }
.setquiet__note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.setquiet__picks { display: flex; align-items: center; gap: 10px; }
.setquiet__picks .hsel { width: 110px; }
.setquiet__to { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* Team ------------------------------------------------------------------- */
.setteam__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.setinvite { display: inline-flex; align-items: center; gap: 11px; padding: 12px 12px 12px 20px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; }
.setinvite:hover { background: rgba(var(--hairline-rgb), .05); }
.setinvite__dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.setteam { margin: 0; padding: 0; list-style: none; }
.setteam__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 190px 120px; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.setteam__av { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.setteam__who { min-width: 0; }
.setteam__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.setteam__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.settag--pending { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
/* Same look, its own name: the 2FA chip is not a pending invite. */
.settag--req { background: transparent; border: 1px solid var(--warn); color: var(--warn); }
.setteam__email { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setteam__act { text-align: right; }
.setact { padding: 9px 16px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 12.5px var(--font-sans); cursor: pointer; }
/* Removing someone is destructive, so it is warn — never the accent. */
.setact--danger { border-color: var(--warn); color: var(--warn); }
.setact--self { border-color: rgba(var(--hairline-rgb), .14); color: var(--text-muted); cursor: default; }

/* Plan & billing --------------------------------------------------------- */
.set__pair { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.setplan { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; padding: 30px 32px 32px; border-radius: 26px; background: var(--surface-emph); color: var(--on-emph); }
.setplan__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; }
.setplan__label { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.setplan__chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent); }
.setplan__name { display: block; margin-top: 14px; font-size: 34px; font-weight: 800; letter-spacing: -.032em; line-height: 1; }
.setplan__price { display: block; margin-top: 8px; font-size: 15px; opacity: .72; }
.setplan__slots { margin: 22px 0 0; }
.setplan__slotrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.setplan__slotlbl { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; opacity: .6; }
.setplan__slotval { font-size: 15px; font-weight: 700; }
.setplan__used { color: var(--accent); }
.setplan__bar { display: block; height: 6px; margin: 12px 0 0; border-radius: 999px; background: var(--dline-18); overflow: hidden; }
.setplan__fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.setplan__foot { margin: auto 0 0; padding-top: 22px; }
.setplan__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--dline-16); font-size: 14.5px; }
.setplan__k { opacity: .66; }
.setplan__v { font-weight: 700; }
.setplan__v--none { color: var(--accent); }
.setplan__acts { display: flex; gap: 10px; margin-top: 16px; }
.setplan__change { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 700 13.5px var(--font-sans); }
.setplan__change:hover { color: var(--on-accent); }
.setplan__inv { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border: 1px solid var(--dline-24); border-radius: 999px; color: var(--on-emph); font-size: 13.5px; font-weight: 600; }
.setplan__inv:hover { color: var(--on-emph); }

.setbill { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; padding: 28px 30px 30px; border: 1px solid rgba(var(--hairline-rgb), .10); border-radius: 26px; background: var(--bg-surface); }
.setbill__label { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.setbill__h3 { margin: 12px 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.022em; }
.setcardrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 16px; }
.setcardrow__ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--text-primary); }
.setcardrow__body { flex: 1; min-width: 0; }
.setcardrow__name { display: block; font-size: 15px; font-weight: 700; }
.setcardrow__meta { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setcardrow__act { flex: none; padding: 9px 15px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 12.5px var(--font-sans); cursor: pointer; }
.setbill__rows { margin: 16px 0 0; padding: 0; list-style: none; }
.setbill__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); font-size: 14px; }
.setbill__k { color: var(--text-secondary); }
.setbill__v { font-weight: 600; }
.setbill__note { margin: auto 0 0; padding-top: 18px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

/* Security --------------------------------------------------------------- */
.setsec__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); flex-wrap: wrap; }
.setsec__title { display: block; font-size: 15.5px; font-weight: 700; }
.setsec__note { display: block; margin-top: 5px; font-size: 13.5px; color: var(--text-secondary); }
.setsec__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.setbtn { padding: 11px 20px; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-sans); cursor: pointer; }
.setbtn:hover { border-color: var(--ink); }
.setbtn--solid { border: 0; background: var(--ink); color: var(--page); }
.setsessions { margin: 0; padding: 0; list-style: none; }
.setsess__head { padding: 20px 0 6px; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.setsess__label { margin: 0 0 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.setsess__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.setsess__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); color: var(--text-primary); }
.setsess__body { min-width: 0; }
.setsess__device { display: block; font-size: 14.5px; font-weight: 600; }
.setsess__where { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.setsess__out { padding: 8px 15px; border: 1px solid var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font: 600 12.5px var(--font-sans); cursor: pointer; }
.setdanger { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.setdanger__label { margin: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); }
.setdanger__note { margin: 12px 0 16px; max-width: 680px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.setdanger__acts { display: flex; gap: 10px; flex-wrap: wrap; }
/* Destructive is outlined warn, never a filled accent. */
.setdanger__btn { padding: 12px 20px; border: 1px solid var(--warn); border-radius: 999px; background: transparent; color: var(--warn); font: 600 13.5px var(--font-sans); cursor: pointer; }

@media (max-width: 1200px) {
  .set__title { font-size: 40px; }
}
@media (max-width: 860px) {
  .setsvc { grid-template-columns: 44px minmax(0, 1fr) 52px; }
  /* The price drops under the description rather than squeezing both. */
  .setsvc__price { grid-column: 2; text-align: left; margin-top: -6px; }
  .setfields { grid-template-columns: 1fr; }
  .setfields__wide { grid-column: auto; }
  .setteam__row { grid-template-columns: 44px minmax(0, 1fr); }
  .setteam__role, .setteam__act { grid-column: 2; text-align: left; }
}
@media (max-width: 720px) {
  .set__title { font-size: 30px; }
  .setcard, .setsvchead, .setplan, .setbill { padding: 22px 20px 24px; }
  .setnotif__grid { grid-template-columns: minmax(0, 1fr) 48px 48px 48px; gap: 10px; }
}

/* Vehicle detail v6 — the long read ----------------------------------------
   Nothing is hidden behind a control: every section is on the page, split by
   rules, with the left rail acting as the table of contents. */
/* Both rails run 380px. The reference draws the left one at 340px, but the
   sixteen-row spec card sits tight at that width — widened on request, and
   matching the buy rail makes the pair read as deliberate. */
.lr__grid { display: grid; grid-template-columns: 380px minmax(0, 1fr) 380px; gap: 34px; align-items: start; }
.lrrail, .lrside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
#v6-gallery, #v6-about, #v6-spec, #v6-checks, #v6-history, #v6-where, #v6-ask { scroll-margin-top: 118px; }
.detseller__logo--sm { width: 44px; height: 44px; border-radius: 12px; }
/* The gallery's rail sits on the right here; the photo keeps source order.
   Doubled class on purpose — the v4 base rule lives further down the file
   and would otherwise win on source order alone. */
.spvgal.spvgal--right { grid-template-columns: minmax(0, 1fr) 150px; min-height: 700px; }
.spvgal--right .spvgal__photo { min-height: 700px; }
/* The location block runs in the page flow rather than closing a column
   grid, so it carries its own header and a shorter map. */
.detmap--flow .detmap__map { min-height: 340px; }

@media (max-width: 1400px) {
  /* Contents drops under the read; the buy rail stays in view. */
  .lr__grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .lrrail { position: static; grid-column: 1; grid-row: 2; }
  .lr__grid .det__main { grid-column: 1; grid-row: 1; }
  .lrside { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .lr__grid { grid-template-columns: 1fr; }
  .lrrail, .lrside { position: static; }
  .lr__grid .det__main, .lrrail, .lrside { grid-column: 1; grid-row: auto; }
  .spvgal--right { min-height: 0; }
  .spvgal--right .spvgal__photo { min-height: 380px; }
}

/* Vehicle detail v5 — twin rails ------------------------------------------
   Left is reference (where am I, what is it, who sells it), right is action
   (what it costs, how to buy). Nothing appears in both. */
.tw__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.twrail, .twside { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.twglance .spvglance__row dd { font-size: 13.5px; }
.twseller__logo { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-tile); }
.twseller__name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.018em; }

/* Both anchor targets sit under the sticky header, so they carry the same
   offset the dossier's chapters do. */
#v5-gallery, #v5-about, #v5-where, #v5-ask { scroll-margin-top: 118px; }

@media (max-width: 1400px) {
  /* Two columns: the reference cards drop under the content, the buy rail
     keeps its place — it is the one a buyer needs in view. */
  .tw__grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .twrail { position: static; grid-column: 1; grid-row: 2; }
  .det__main { grid-column: 1; grid-row: 1; }
  .twside { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 900px) {
  .tw__grid { grid-template-columns: 1fr; }
  .twrail, .twside { position: static; }
  .det__main { grid-row: auto; }
  .twrail { grid-row: auto; }
  .twside { grid-column: 1; grid-row: auto; }
}

/* Vehicle detail v4 — spec panel -------------------------------------------
   Title left, price right, a vertical thumbnail rail, and the whole
   specification lifted into the sidebar so no number needs a tab. */
.spv__head { padding: 44px var(--pad-x) 26px; position: relative; overflow: hidden; }
.spv__headrow { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.spv__left { min-width: 0; }
.spv__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.spv__title { margin: 18px 0 0; font-size: 58px; font-weight: 800; letter-spacing: -.034em; line-height: 1.03; }
.spv__line { margin: 12px 0 0; font-size: 17px; color: var(--text-secondary); }
.spv__price { flex: none; margin: 0; text-align: right; }
.spv__was { display: block; font-size: 15px; font-weight: 600; color: var(--text-muted); text-decoration: line-through; }
.spv__fig { display: block; margin-top: 4px; font-size: 46px; font-weight: 800; letter-spacing: -.036em; }
.spv__mo { display: block; margin-top: 6px; font-size: 13.5px; color: var(--text-secondary); }

.spvgal { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 14px; min-height: 780px; }
/* ⚠️ No aspect-ratio on the tiles: they take `height:100%` so each fills its
   1fr row. With a ratio they shrink inside the row and the rail ends short
   of the photo. */
.spvgal__rail { display: grid; grid-template-rows: repeat(6, 1fr); gap: 12px; }
.spvgal__tile {
  position: relative;
  height: 100%;
  padding: 0;
  border: 1.5px solid rgba(var(--hairline-rgb), .14);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-tile);
  cursor: pointer;
}
.spvgal__tile[aria-current="true"] { border-color: var(--text-primary); }
.spvgal__photo { position: relative; height: 100%; min-height: 780px; border-radius: 26px; overflow: hidden; background: var(--bg-tile); }
.spvgal__shot {
  position: absolute;
  left: 18px; bottom: 18px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .72);
  color: #F1EEE7;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.spvgal__counter {
  position: absolute;
  right: 18px; bottom: 18px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.spvgal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
}
.spvgal__arrow:hover { background: #FBFAF5; }
.spvgal__arrow--prev { left: 18px; }
.spvgal__arrow--next { right: 18px; }

/* This variant's signature: every spec row on screen at all times, so a
   buyer never opens a tab to check a number. */
.spvglance { padding: 26px 28px; }
.spvglance__list { margin: 14px 0 0; }
.spvglance__row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-top: 1px solid rgba(var(--hairline-rgb), .10); }
.spvglance__row dt { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.spvglance__row dd { margin: 0; font-size: 14.5px; font-weight: 700; text-align: right; }

[data-theme="dark"] .spvgal .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1180px) {
  .spv__title { font-size: 44px; }
  .spv__fig { font-size: 36px; }
  .spvgal { min-height: 0; }
  .spvgal__photo { min-height: 520px; }
}
@media (max-width: 900px) {
  /* Under the photo the rail becomes a strip you scroll — six 1fr rows in a
     column would be taller than the photo it belongs to. */
  .spvgal { display: flex; flex-direction: column-reverse; gap: 12px; }
  .spvgal__rail { display: flex; grid-template-rows: none; overflow-x: auto; }
  .spvgal__tile { flex: none; width: 116px; height: 84px; }
  .spvgal__photo { min-height: 380px; }
}
@media (max-width: 640px) {
  .spv__headrow { align-items: flex-start; }
  .spv__price { text-align: left; }
  .spv__title { font-size: 32px; }
  .spv__fig { font-size: 30px; }
}

/* Listings map v3 — map band above a normal grid ---------------------------
   The band answers "where", the grid answers "what". Nothing scrolls inside
   anything else, so the cards keep their full width. */
.lmap3__intro { padding-bottom: 56px; }

.lmap3__band {
  position: relative;
  height: 440px;
  margin-bottom: 24px;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  overflow: hidden;
  background: var(--map-bed);
}
.lmap3__pins { position: absolute; inset: 0; z-index: 10; }

/* Thirteen pins share one 440px band, so they run a size smaller than the
   other map variants. On the map they keep light values in both themes. */
.lmap3__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.lmap3__pin__bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1.5px solid rgba(23, 21, 18, .2);
  border-radius: 999px;
  background: #FBFAF5;
  color: #171512;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .18s ease;
}
.lmap3__pin__n {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  text-align: center;
  font-size: 8.5px;
  font-weight: 700;
}
.lmap3__pin__stem { width: 2px; height: 11px; background: #171512; }
.lmap3__pin__dot { width: 8px; height: 8px; border-radius: 50%; background: #171512; }
.lmap3__pin[aria-pressed="true"] .lmap3__pin__bubble { background: #171512; border-color: #171512; color: #F1EEE7; }
.lmap3__pin[aria-pressed="true"] .lmap3__pin__n { background: var(--accent); color: var(--on-accent); }
.lmap3__pin--empty .lmap3__pin__bubble { background: rgba(251, 250, 245, .72); color: #5F5C53; }
.lmap3__pin--empty .lmap3__pin__n { background: rgba(23, 21, 18, .08); }
.lmap3__pin--empty .lmap3__pin__stem, .lmap3__pin--empty .lmap3__pin__dot { background: rgba(23, 21, 18, .28); }
/* The shared engine marks the hovered card's pin with .is-hot. */
.lmap3__pin.is-hot { z-index: 5; }
.lmap3__pin.is-hot .lmap3__pin__bubble {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent), 0 8px 18px -10px rgba(0, 0, 0, .5);
}

.lmap3__livechip {
  position: absolute;
  left: 18px; top: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  color: #171512;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lmap3__livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.lmap3__zoom { position: absolute; top: 18px; right: 18px; z-index: 20; display: flex; gap: 8px; }
.lmap3__zbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(23, 21, 18, .12);
  border-radius: 12px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  color: #171512;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  transition: background .2s ease;
}
.lmap3__zbtn:hover { background: #FBFAF5; }

/* For people who would rather click a name than aim at a pin — same filter
   as the pins, so the two always agree. */
.lmap3__cities {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .10);
}
.lmap3__citylabel { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.lmap3__citytrack { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 2px; }
.lcity3 {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font: 500 12.5px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: all .18s ease;
}
.lcity3:hover { border-color: var(--text-primary); }
.lcity3[aria-pressed="true"] { background: var(--bg-dark); border-color: var(--bg-dark); color: var(--bg-page); font-weight: 700; }
.lcity3__n { font-family: var(--font-mono); font-size: 9px; opacity: .62; }
.lcity3--zero { color: var(--ink-4); }

.lmap3__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0 26px;
}
.lmap3__right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lmap3__price { display: flex; align-items: center; gap: 12px; }
.lmap3__value { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--text-muted); }
/* The base track colour is the one for a dark surface; this slider sits on
   the page, so it has to follow the page's hairline instead. */
.lmap3__price input[type=range].fin { width: 150px; background: rgba(var(--hairline-rgb), .18); }
.lmap3__count { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }

.lmap3__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

.g3card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(var(--hairline-rgb), .12);
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-surface);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.g3card:hover,
.g3card.is-hot { transform: translateY(-5px); border-color: var(--text-primary); box-shadow: var(--shadow-card); }
.g3card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-tile); overflow: hidden; }
.g3card__cond {
  position: absolute;
  left: 12px; top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .11em;
}
.g3card__cond--new { background: var(--accent); color: var(--on-accent); }
.g3card__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.g3card__cond--used { background: rgba(23, 21, 18, .72); color: #F1EEE7; }
/* The grid is city-driven, so every card states its city on the photo. It
   sits on an image, which means it keeps its polarity in dark. */
.g3card__city {
  position: absolute;
  left: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(23, 21, 18, .72);
  color: #F1EEE7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.g3card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px; }
.g3card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.g3card__meta { margin: 0; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.g3card__title { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; }
.g3card__title a { color: inherit; }
.g3card__prices { flex: none; text-align: right; }
.g3card__was { display: block; font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.g3card__price { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.022em; }
.g3card__mo { display: block; margin-top: 2px; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.g3card__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; padding: 0; list-style: none; }
.g3card__chip { padding: 5px 11px; border: 1px solid rgba(var(--hairline-rgb), .14); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.g3card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--hairline-rgb), .10);
}
.g3card__logo { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--bg-tile); }
.g3card__dealer { min-width: 0; flex: 1; }
.g3card__dname { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g3card__dist { display: block; margin-top: 2px; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.g3card__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 50%;
  color: var(--text-primary);
}
.g3card__go:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* The placeholder hatch and the badges live on the photo, so they keep the
   light polarity the rest of the page loses in dark. */
[data-theme="dark"] .lmap3__band .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

@media (max-width: 1180px) {
  .lmap3__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .lmap3__band { height: 320px; }
  .lmap3__grid { grid-template-columns: 1fr; }
  .lmap3__filters { align-items: flex-start; flex-direction: column; }
  .lmap3__right { width: 100%; justify-content: space-between; }
}

/* Listings map v2 — full-bleed map with a floating panel ------------------- */
.lmap2 { position: relative; }
.lmap2__canvas {
  position: relative;
  height: calc(100vh - 130px);
  min-height: 660px;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 28px;
  overflow: hidden;
  background: var(--map-bed);
}
.lmap2__bed { z-index: 0; }
.lmap2__pins { position: absolute; inset: 0; z-index: 10; }

/* Almost every control on this page sits on the map, and things on a map
   keep their polarity. Redeclaring the tokens here makes the whole subtree
   render in light values whatever the page theme is — one rule instead of a
   dark override on every child. */
.lmap2__panel,
.lmap2__selected,
.lmap2__zbtn {
  --page: #F1EEE7;
  --surface: #FBFAF5;
  --surface-2: #EDE9E0;
  --surface-sel: #F4F1EA;
  --row-alt: #F4F1EA;
  --ink: #171512;
  --ink-2: #6E6A5F;
  --ink-3: #6F6C62;
  --ink-4: #5F5C53;
  --ink-placeholder: #676358;
  --hairline-rgb: 23, 21, 18;
  /* The legacy aliases resolve on :root, so overriding the tokens above is
     not enough — every name a child component actually reads has to be
     restated here or the selects and chips stay dark on the light panel. */
  --bg-page: #F1EEE7;
  --bg-surface: #FBFAF5;
  --bg-tile: #EDE9E0;
  --bg-dark: #171512;
  --bg-dark-2: #EDE9E0;
  --text-primary: #171512;
  --text-secondary: #6F6C62;
  --text-muted: #6E6A5F;
  --text-faint: #6E6A5F;
  --text-placeholder: #676358;
  --line-06: rgba(23, 21, 18, .06);
  --line-09: rgba(23, 21, 18, .09);
  --line-10: rgba(23, 21, 18, .10);
  --line-12: rgba(23, 21, 18, .12);
  --line-14: rgba(23, 21, 18, .14);
  --line-16: rgba(23, 21, 18, .16);
  --line-18: rgba(23, 21, 18, .18);
  color: #171512;
}

/* Pins — bigger than variant 1, because here they are the primary control
   and they sit in the foreground. Light on the map in both themes. */
.lmap2__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.lmap2__pin__bubble {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1.5px solid rgba(23, 21, 18, .2);
  border-radius: 999px;
  background: #FBFAF5;
  color: #171512;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .18s ease;
}
.lmap2__pin__n {
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}
.lmap2__pin__stem { width: 2px; height: 13px; background: #171512; }
.lmap2__pin__dot { width: 10px; height: 10px; border-radius: 50%; background: #171512; }
.lmap2__pin[aria-pressed="true"] .lmap2__pin__bubble { background: #171512; border-color: #171512; color: #F1EEE7; }
.lmap2__pin[aria-pressed="true"] .lmap2__pin__n { background: var(--accent); color: #171512; }
.lmap2__pin--empty .lmap2__pin__bubble { background: rgba(251, 250, 245, .72); color: #6f6c62; }
.lmap2__pin--empty .lmap2__pin__n { background: rgba(23, 21, 18, .08); }
.lmap2__pin--empty .lmap2__pin__stem, .lmap2__pin--empty .lmap2__pin__dot { background: rgba(23, 21, 18, .28); }
.lmap2__pin--live { z-index: 5; }
.lmap2__pin--live .lmap2__pin__bubble { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent), 0 8px 20px -10px rgba(0, 0, 0, .5); }

/* The dark-theme hatch is keyed off an ancestor attribute, so redeclaring
   tokens cannot reach it — the thumbnails need their light hatch back by
   name. The map bed itself does follow the theme. */
[data-theme="dark"] .lmap2__panel .ph,
[data-theme="dark"] .lmap2__selected .ph {
  background: repeating-linear-gradient(45deg, #e2ddd2, #e2ddd2 9px, #ece8de 9px, #ece8de 18px);
  color: #676358;
}

/* Bottom right: the selected-car card took the top corner, and the two
   were sitting on top of each other. */
.lmap2__zoom { position: absolute; bottom: 46px; right: 22px; z-index: 20; display: flex; flex-direction: column; gap: 9px; }
.lmap2__zbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(23, 21, 18, .12);
  border-radius: 13px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5);
  transition: background .2s ease;
}
.lmap2__zbtn:hover { background: #FBFAF5; }

.lmap2__panel {
  position: absolute;
  left: 22px; top: 22px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100% - 44px);
  max-height: calc(100% - 44px);
  background: rgba(251, 250, 245, .97);
  border-radius: 24px;
  backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .55);
}
.lmap2__head { padding: 22px 24px 18px; border-bottom: 1px solid rgba(23, 21, 18, .1); }
.lmap2__headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lmap2__live { display: inline-flex; align-items: center; gap: 9px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #171512; margin: 0; }
.lmap2__livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lmap2__cityclear {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 13px;
  border: 0;
  border-radius: 999px;
  background: #171512;
  color: #F1EEE7;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.lmap2__x { font-size: 14px; line-height: 1; opacity: .7; }
.lmap2__cityclear:hover .lmap2__x { opacity: 1; }
.lmap2__conds { margin-top: 16px; }
.lmap2__selects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.lmap2__price { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.lmap2__value { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: #8C887D; }
.lmap2__price input[type=range].fin { flex: 1; background: rgba(23, 21, 18, .18); }

.lmap2__results { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.lmap2__empty { padding: 40px 8px; text-align: center; }
.lmap2__emptytitle { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.lmap2__emptycopy { font-size: 13.5px; line-height: 1.55; color: #8C887D; margin: 8px 0 18px; }

.lmap2card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid rgba(23, 21, 18, .1);
  border-radius: 16px;
  background: #F4F1EA;
  cursor: pointer;
  transition: all .18s ease;
}
.lmap2card:last-child { margin-bottom: 0; }
.lmap2card:hover,
.lmap2card.is-live { background: #EDE9E0; border: 1.5px solid #171512; }
.lmap2card__media { position: relative; display: block; height: 74px; border-radius: 11px; overflow: hidden; background: #EDE9E0; }
.lmap2card__body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lmap2card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lmap2card__meta { font-size: 8px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #A09C90; margin: 0; }
.lmap2card__title { font-size: 15px; font-weight: 700; letter-spacing: -.018em; line-height: 1.2; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmap2card__price { flex: none; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.lmap2card__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #A09C90; }
.lmap2card__dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(23, 21, 18, .18); }

/* Opposite corner from the panel on purpose: opening a car must never cover
   the filters. */
.lmap2__selected {
  position: absolute;
  /* Top, not bottom: the card belongs to a pin, and pinned to the foot of a
     full-bleed map it covered the southern half of them. */
  right: 22px; top: 22px; bottom: auto;
  z-index: 26;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  width: 420px;
  max-width: calc(100% - 44px);
  padding: 16px;
  border-radius: 22px;
  background: rgba(251, 250, 245, .97);
  backdrop-filter: blur(8px);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .55);
}
.lmap2sel__media { display: block; height: 104px; border-radius: 14px; overflow: hidden; background: #EDE9E0; }
.lmap2sel__body { min-width: 0; display: flex; flex-direction: column; }
.lmap2sel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lmap2sel__meta { font-size: 8.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #8C887D; margin: 0; }
.lmap2sel__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 5px 0 0; }
.lmap2sel__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid rgba(23, 21, 18, .2);
  border-radius: 50%;
  background: transparent;
  color: #171512;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.lmap2sel__close:hover { border-color: #171512; }
.lmap2sel__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.lmap2sel__price { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.022em; }
.lmap2sel__facts { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8C887D; }
.lmap2sel__view {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 18px;
  border-radius: 999px;
  background: #171512;
  color: #F1EEE7;
  font-size: 13px;
  font-weight: 600;
}
.lmap2sel__view:hover { color: #F1EEE7; }

@media (max-width: 980px) {
  /* Below this the panel would cover the map it is filtering, so the two
     stack instead. */
  .lmap2__canvas { height: auto; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; }
  .lmap2__bed { position: relative; inset: auto; height: 340px; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; }
  .lmap2__pins { inset: 0 0 auto; height: 340px; }
  .lmap2__zoom { top: 14px; right: 14px; }
  .lmap2__panel { position: static; width: auto; max-width: none; max-height: none; margin-top: 16px; box-shadow: none; border: 1px solid rgba(23, 21, 18, .12); }
  .lmap2__results { max-height: 520px; }
  .lmap2__selected { position: static; width: auto; max-width: none; margin-top: 16px; box-shadow: none; border: 1px solid rgba(23, 21, 18, .12); }
}
@media (max-width: 560px) {
  .lmap2__selected { grid-template-columns: 1fr; }
  .lmap2sel__media { height: 140px; }
}

/* Listings map v1 — split view -------------------------------------------- */
.lmapbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .14);
}
.lmapbar__right { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.lmapbar__sel { width: 170px; }
.lmapbar__price { display: flex; align-items: center; gap: 12px; }
.lmapbar__value { font-size: 12px; font-weight: 700; white-space: nowrap; }
.lmapbar__price input[type=range].fin { width: 150px; background: rgba(var(--hairline-rgb), .18); }

[data-variant="map1"] .lmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 26px; align-items: start; }
[data-variant="map1"] .lmap__list { display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 6px; }
[data-variant="map1"] .lmap__results { display: flex; flex-direction: column; gap: 14px; }
[data-variant="map1"] .lmap__empty { padding: 50px 22px; }

.lmapcard {
  /* flex:none or the cards squash to fit the column instead of scrolling. */
  flex: none;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all .18s ease;
}
.lmapcard:hover,
.lmapcard.is-live { background: var(--row-alt); border: 1.5px solid var(--ink); }
.lmapcard__media { position: relative; display: block; min-height: 126px; background: var(--surface-2); }
.lmapcard__cond {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lmapcard__cond--new { background: var(--accent); color: #171512; }
.lmapcard__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.lmapcard__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.lmapcard__body { display: flex; flex-direction: column; padding: 16px 18px 16px 0; }
.lmapcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lmapcard__meta { font-size: 8.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.lmapcard__title { font-size: 17.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 6px 0 0; }
.lmapcard__prices { flex: none; text-align: right; margin: 0; }
.lmapcard__price { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.022em; }
.lmapcard__mo { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-2); }
.lmapcard__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lmapcard__foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 14px; }
.lmapcard__city { font-size: 12.5px; font-weight: 600; }
.lmapcard__km { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lmapcard__go {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.lmapcard__go:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }

/* Card view — the same list, stacked two-up. The switcher only changes the
   shape; the live/selected treatment is identical. */
[data-variant="map1"][data-view="card"] .lmap__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.lmapmini {
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid rgba(var(--hairline-rgb), .1);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all .18s ease;
}
.lmapmini:hover,
.lmapmini.is-live { background: var(--row-alt); border-color: var(--ink); }
.lmapmini__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); }
.lmapmini__body { display: flex; flex-direction: column; flex: 1; padding: 15px 16px; }
.lmapmini__meta { font-size: 8px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.lmapmini__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.018em; line-height: 1.22; margin: 6px 0 0; }
.lmapmini__specs { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lmapmini__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; }
.lmapmini__prices { margin: 0; }
.lmapmini__price { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.022em; }
.lmapmini__city { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lmapmini__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.lmapmini__go:hover { background: var(--ink); color: var(--page); }

[data-variant="map1"] .lmap__mapwrap { position: sticky; top: 118px; }
[data-variant="map1"] .lmap__canvas {
  position: relative;
  height: calc(100vh - 150px);
  min-height: 560px;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  overflow: hidden;
  background: var(--map-bed);
}
[data-variant="map1"] .lmap__bed { z-index: 0; }
[data-variant="map1"] .lmap__pins { position: absolute; inset: 0; }

/* Everything that sits on the map keeps a light surface with dark ink in
   both themes — the same rule as scrims on a photograph. */
.lmap__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.lmap__bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1.5px solid rgba(23, 21, 18, .2);
  border-radius: 999px;
  background: #FBFAF5;
  color: #171512;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .18s ease;
}
.lmap__n {
  min-width: 19px;
  padding: 2px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}
.lmap__stem { width: 2px; height: 12px; background: #171512; }
.lmap__dot { width: 9px; height: 9px; border-radius: 50%; background: #171512; }
.lmap__pin[aria-pressed="true"] .lmap__bubble { background: #171512; border-color: #171512; color: #F1EEE7; }
.lmap__pin[aria-pressed="true"] .lmap__n { background: var(--accent); color: #171512; }
.lmap__pin--empty .lmap__bubble { background: rgba(251, 250, 245, .72); color: #6f6c62; }
.lmap__pin--empty .lmap__n { background: rgba(23, 21, 18, .08); }
.lmap__pin--empty .lmap__stem, .lmap__pin--empty .lmap__dot { background: rgba(23, 21, 18, .28); }
/* Live = the card you are pointing at. The ring answers "where is this car"
   without a click. */
.lmap__pin--live { z-index: 5; }
.lmap__pin--live .lmap__bubble { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 34%, transparent), 0 6px 16px -8px rgba(0, 0, 0, .45); }

.lmap__tl { position: absolute; top: 20px; left: 20px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lmap__live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  color: #171512;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin: 0;
}
.lmap__livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lmap__cityclear {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #171512;
  color: #F1EEE7;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.lmap__x { font-size: 15px; line-height: 1; opacity: .7; }
.lmap__cityclear:hover .lmap__x { opacity: 1; }

.lmap__zoom { position: absolute; top: 20px; right: 20px; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.lmap__zbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(23, 21, 18, .12);
  border-radius: 12px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  color: #171512;
  cursor: pointer;
  transition: background .2s ease;
}
.lmap__zbtn:hover { background: #FBFAF5; }

[data-variant="map1"] .lmap__selected {
  position: absolute;
  /* Sits at the top: the pins it belongs to are spread over the whole canvas,
     and a card pinned to the bottom covered the southern half of them.
     `bottom` has to be cleared — the base rule sets it, and top+bottom
     together stretched the card down the entire map. */
  left: 20px; right: 20px; top: 20px; bottom: auto;
  /* The older map block pins a 300px card; this one spans the canvas, so
     the width has to be reset explicitly. */
  width: auto;
  z-index: 7;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(251, 250, 245, .94);
  backdrop-filter: blur(4px);
  color: #171512;
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .5);
}
.lmapsel__media { display: block; height: 88px; border-radius: 14px; overflow: hidden; background: #EDE9E0; }
.lmapsel__meta { font-size: 8.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #8c887d; margin: 0; }
.lmapsel__title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; color: #171512; }
.lmapsel__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 7px 0 0; }
.lmapsel__price { font-size: 18px; font-weight: 800; letter-spacing: -.022em; }
.lmapsel__facts { font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8c887d; }
.lmapsel__acts { display: flex; align-items: center; gap: 10px; }
.lmapsel__view {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 11px 11px 20px;
  border-radius: 999px;
  background: #171512;
  color: #F1EEE7;
  font-size: 13.5px;
  font-weight: 600;
}
.lmapsel__view:hover { color: #F1EEE7; }
.lmapsel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(23, 21, 18, .2);
  border-radius: 50%;
  background: transparent;
  color: #171512;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.lmapsel__close:hover { border-color: #171512; }

@media (max-width: 1180px) {
  [data-variant="map1"] .lmap { grid-template-columns: 1fr; }
  [data-variant="map1"] .lmap__list { max-height: none; overflow: visible; padding-right: 0; }
  [data-variant="map1"] .lmap__mapwrap { position: static; }
  [data-variant="map1"] .lmap__canvas { height: 520px; min-height: 0; }
}
@media (max-width: 860px) {
  [data-variant="map1"][data-view="card"] .lmap__results { grid-template-columns: 1fr; }
  /* Selects share one row, the slider gets its own — squeezed into a single
     line the make/body values were clipped to "All". */
  .lmapbar__right { width: 100%; }
  .lmapbar__sel { flex: 1 1 45%; width: auto; }
  .lmapbar__price { flex: 1 1 100%; }
  .lmapbar__price input[type=range].fin { flex: 1; width: auto; }
  /* The row stays a row on a narrow screen — stacking it turned a compact
     result into a full-height card, which is the opposite of the point. */
  .lmapcard { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .lmapcard__media { min-height: 104px; }
  .lmapcard__body { padding: 14px 14px 14px 0; }
  .lmapcard__title { font-size: 16px; }
  .lmapcard__price { font-size: 15.5px; }
  .lmapcard__go { display: none; }
  [data-variant="map1"] .lmap__selected { grid-template-columns: 1fr; }
  .lmapsel__media { height: 120px; }
}

/* Listings v6 — arrivals feed --------------------------------------------- */
.lfeedlive {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.lfeedlive__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.lfeed { display: flex; flex-direction: column; }
.lday { padding-bottom: 34px; }
.lday__head { display: flex; align-items: center; gap: 16px; padding: 0 0 18px; }
.lday__chip {
  padding: 8px 16px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* Today keeps accent fill and dark ink in both themes — it is a status,
   not a control. */
.lday__chip--today {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.lday__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lday__count { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.lday__rule { flex: 1; height: 1px; background: rgba(var(--hairline-rgb), .14); }
.lday__rows { display: flex; flex-direction: column; gap: 16px; }

.lrow {
  display: grid;
  grid-template-columns: 26px 240px minmax(0, 1fr) 200px;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lrow:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
/* Today's arrivals carry an accent edge so the newest visibly stand out. */
.lrow--fresh { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lrow__pip {
  justify-self: center;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(var(--hairline-rgb), .12);
}
.lrow--fresh .lrow__pip { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.lrow__media { position: relative; display: block; height: 150px; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.lrow__cond {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lrow__cond--new { background: var(--accent); color: #171512; }
.lrow__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.lrow__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }

.lrow__body { min-width: 0; }
.lrow__top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.lrow__when { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.lrow__flag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #171512;
}
.lrow__flag--new { background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Terracotta in both themes — a price drop is the one thing on this page
   that has to catch the eye. */
.lrow__flag--drop { background: rgba(201, 106, 58, .16); }
[data-theme="dark"] .lrow__flag--drop { color: var(--ink); }
.lrow__title { font-size: 22px; font-weight: 700; letter-spacing: -.022em; line-height: 1.2; margin: 10px 0 0; }
.lrow__title a { color: var(--ink); }
.lrow:hover .lrow__title a { color: var(--accent); }
.lrow__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 8px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lrow__seller { display: flex; align-items: center; gap: 11px; margin: 14px 0 0; }
.lrow__logo { width: 26px; height: 26px; flex: none; border-radius: 7px; overflow: hidden; }
.lrow__dealer { font-size: 13px; font-weight: 600; }
.lrow__city { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.lrow__views { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 8.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }

.lrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.lrow__was { display: block; font-size: 12.5px; color: var(--ink-4); text-decoration: line-through; }
.lrow__price { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.026em; }
.lrow__mo { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.lrow__acts { display: flex; align-items: center; gap: 9px; }
.lrow__save {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
}
.lrow__save:hover { border-color: var(--ink); }
.lrow__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.lrow__save[aria-pressed="true"] svg { fill: currentColor; }
.lrow__view {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 11px 11px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-size: 13.5px;
  font-weight: 600;
}
.lrow__view:hover { background: color-mix(in srgb, var(--ink) 88%, var(--page)); color: var(--page); }

@media (max-width: 1280px) {
  .lrow { grid-template-columns: 26px 200px minmax(0, 1fr); row-gap: 16px; }
  .lrow__side { grid-column: 3; align-items: flex-start; flex-direction: row; justify-content: space-between; align-items: flex-end; width: 100%; }
}
@media (max-width: 860px) {
  .lrow { grid-template-columns: 1fr; padding: 16px; }
  .lrow__pip { display: none; }
  .lrow__media { height: 0; padding-bottom: 56%; }
  .lrow__side { grid-column: 1; flex-wrap: wrap; gap: 14px; }
  .lrow__title { font-size: 19px; }
}

/* Listings v5 — grouped by dealer ----------------------------------------- */
.vdealers { display: flex; flex-direction: column; gap: 26px; }
.vgroup {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  overflow: hidden;
}
.vgroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 28px;
  background: var(--page);
  border-bottom: 1px solid rgba(var(--hairline-rgb), .1);
}
.vgroup__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vgroup__logo { width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden; }
.vgroup__names { min-width: 0; }
.vgroup__title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.vgroup__name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.vgroup__name:hover { color: var(--accent); }
.vgroup__ours {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vgroup__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vgroup__meta { margin: 7px 0 0; font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vgroup__figs { display: flex; align-items: center; gap: 22px; }
.vgroup__fig { text-align: right; }
.vgroup__figval { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.024em; line-height: 1; }
.vgroup__figlabel { display: block; margin-top: 5px; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vgroup__figrule { width: 1px; height: 32px; background: rgba(var(--hairline-rgb), .16); }
.vgroup__contact {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 11px 11px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s ease;
}
.vgroup__contact:hover { border-color: var(--ink); color: var(--ink); }
.vgroup__cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 24px 28px 28px; }

/* The inner cards sit on the page colour so they read as items inside the
   dealer's shell rather than as cards on the page. */
.vsm {
  /* The save button is absolute inside this card — without a positioned
     ancestor it escapes to the page. */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--page);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vsm:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.vsm__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface-2); }
.vsm__cond {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vsm__cond--new { background: var(--accent); color: #171512; }
.vsm__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.vsm__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.vsm__save {
  position: absolute;
  top: 11px; right: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(23, 21, 18, .12);
  border-radius: 50%;
  background: rgba(251, 250, 245, .82);
  backdrop-filter: blur(4px);
  color: #171512;
  cursor: pointer;
  transition: all .2s ease;
}
.vsm__save:hover { background: rgba(251, 250, 245, .96); }
.vsm__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.vsm__save[aria-pressed="true"] svg { fill: currentColor; }
.vsm__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px; }
.vsm__meta { font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vsm__title { font-size: 18.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 7px 0 0; }
.vsm__title a { color: var(--ink); }
.vsm:hover .vsm__title a { color: var(--accent); }
.vsm__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.vsm__chips .vchip { padding: 5px 11px; font-size: 11.5px; }
.vsm__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.vsm__was { display: block; font-size: 11.5px; color: var(--ink-4); text-decoration: line-through; }
.vsm__price { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.024em; }
.vsm__mo { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }
.vsm__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.vsm__go:hover { background: var(--ink); border-color: var(--ink); color: var(--page); }

.vgroup__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--page);
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.vgroup__all:hover { color: var(--accent); }
.vgroup__allarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
}

@media (max-width: 1180px) {
  .vgroup__cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vgroup__head { padding: 20px; }
  .vgroup__cars { grid-template-columns: 1fr; padding: 20px; }
  .vgroup__figs { width: 100%; justify-content: flex-start; }
  .vgroup__contact { width: 100%; justify-content: center; }
}

/* Listings v4 — showcase: one hero, then two-up cards ---------------------- */
.vshow { display: flex; flex-direction: column; }
.vshow__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: stretch; }

.vhero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 28px;
}
.vhero__media { position: relative; display: block; min-height: 480px; background: var(--surface-2); }
/* Rule 2 — the badge sits on a photograph and keeps accent fill with dark
   text in both themes. */
.vhero__flag {
  position: absolute;
  top: 20px; left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: #171512;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vhero__flagdot { width: 7px; height: 7px; border-radius: 50%; background: #171512; }
.vhero__shots {
  position: absolute;
  left: 20px; bottom: 20px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(18, 16, 14, .78);
  color: #F1EEE7;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vhero__body { display: flex; flex-direction: column; padding: 40px 42px 38px; }
.vhero__meta { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vhero__title { font-size: 40px; font-weight: 800; letter-spacing: -.032em; line-height: 1.04; margin: 14px 0 0; }
.vhero__title a { color: var(--ink); }
.vhero__title a:hover { color: var(--accent); }
.vhero__blurb { font-size: 15.5px; line-height: 1.65; color: var(--ink-3); margin: 16px 0 0; }
.vhero__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px 0 0;
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 16px;
  overflow: hidden;
}
.vhero__spec { padding: 14px 16px; }
.vhero__spec:nth-child(odd) { border-right: 1px solid rgba(var(--hairline-rgb), .1); }
.vhero__spec:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--hairline-rgb), .1); }
.vhero__speclabel { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vhero__specval { display: block; margin-top: 5px; font-size: 16px; font-weight: 700; }
.vhero__dealer { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.vhero__logo { width: 36px; height: 36px; flex: none; border-radius: 9px; overflow: hidden; }
.vhero__dealerbody { flex: 1; min-width: 0; }
.vhero__dealername { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.vhero__dealermeta { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vhero__foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: auto; padding-top: 26px; }
.vhero__was { display: block; font-size: 14px; color: var(--ink-4); text-decoration: line-through; }
.vhero__price { display: block; font-size: 38px; font-weight: 800; letter-spacing: -.032em; line-height: 1.05; }
.vhero__mo { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }

.vbig {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.vbig:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.vbig__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.vbig__cond {
  position: absolute;
  top: 16px; left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vbig__cond--new { background: var(--accent); color: #171512; }
.vbig__cond--certified { background: rgba(251, 250, 245, .92); color: #171512; }
.vbig__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }
/* The save button lives on the photo, so it starts as a light scrim; saved
   it becomes a filled control and inverts with the theme. */
.vbig__save {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(23, 21, 18, .12);
  border-radius: 50%;
  background: rgba(251, 250, 245, .82);
  backdrop-filter: blur(4px);
  color: #171512;
  cursor: pointer;
  transition: all .2s ease;
}
.vbig__save:hover { background: rgba(251, 250, 245, .96); }
.vbig__save[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }
.vbig__save[aria-pressed="true"] svg { fill: currentColor; }
.vbig__strip {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}
.vbig__shots {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(18, 16, 14, .78);
  color: #F1EEE7;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vbig__pts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vbig__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px; }
.vbig__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vbig__meta { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.vbig__title { font-size: 26px; font-weight: 700; letter-spacing: -.024em; line-height: 1.16; margin: 9px 0 0; }
.vbig__title a { color: var(--ink); }
.vbig:hover .vbig__title a { color: var(--accent); }
.vbig__prices { flex: none; text-align: right; margin: 0; }
.vbig__was { display: block; font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.vbig__price { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.026em; }
.vbig__mo { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.vbig__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.vbig__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
.vbig__logo { width: 34px; height: 34px; flex: none; border-radius: 9px; overflow: hidden; }
.vbig__dealer { flex: 1; min-width: 0; }
.vbig__dealername { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.vbig__dealermeta { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vbig__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.vbig__go:hover { background: var(--ink); color: var(--page); }

@media (max-width: 1180px) {
  .vhero { grid-template-columns: 1fr; }
  .vhero__media { min-height: 0; aspect-ratio: 16 / 9; }
  .vhero__body { padding: 30px 26px 28px; }
  .vhero__title { font-size: 32px; }
  .vhero__price { font-size: 30px; }
}
@media (max-width: 860px) {
  .vshow__grid { grid-template-columns: 1fr; gap: 20px; }
  .vbig__body { padding: 22px 20px; }
  .vbig__head { flex-direction: column; gap: 10px; }
  .vbig__prices { text-align: left; }
  .vbig__title { font-size: 22px; }
}

/* Listings v3 — compact table and the compare tray ------------------------ */
.vtable {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  overflow: hidden;
}
/* Head and body rows share one definition — that is what keeps the columns
   in line. Change it here and both move together. */
.vtable__head,
.vtrow {
  display: grid;
  grid-template-columns: 44px 92px minmax(0, 1fr) 130px 110px 120px 150px 96px;
  gap: 16px;
  align-items: center;
}
.vtable__head { padding: 16px 24px; background: var(--page); }
.vtable__h { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.vtable__h--right { text-align: right; }

.vtrow { padding: 14px 24px; border-top: 1px solid rgba(var(--hairline-rgb), .09); transition: background .16s ease; }
.vtrow--picked { background: var(--row-alt); }

.vtick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(var(--hairline-rgb), .28);
  border-radius: 6px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  transition: all .18s ease;
}
.vtick:hover { border-color: var(--ink); }
/* A control, so the filled state inverts with the theme. */
.vtick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--accent); }

.vtrow__photo { display: block; width: 92px; height: 62px; border-radius: 11px; overflow: hidden; background: var(--surface-2); }
.vtrow__vehicle { min-width: 0; }
.vtrow__model { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; color: var(--ink); }
.vtrow__model:hover { color: var(--accent); }
.vtrow__specs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 5px 0 0; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vtrow__cell { font-size: 15px; font-weight: 600; }
.vtrow__cond {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.vtrow__cond--new { border-color: transparent; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.vtrow__dealer { min-width: 0; }
.vtrow__dealername { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtrow__dealermeta { display: block; margin-top: 3px; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.vtrow__prices { text-align: right; }
.vtrow__was { display: block; font-size: 11.5px; color: var(--ink-4); text-decoration: line-through; }
.vtrow__price { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.022em; }
.vtrow__mo { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-2); }

/* Compare tray — an emphasis band that follows you down the table. In dark
   it keeps an accent hairline so it lifts off the deeper page. */
.vtray {
  position: sticky;
  bottom: 24px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  padding: 20px 26px;
  background: var(--surface-emph);
  color: var(--on-emph);
  border: 1px solid transparent;
  border-radius: 22px;
  box-shadow: var(--shadow-card-dark);
}
[data-theme="dark"] .vtray { border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.vtray__left { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.vtray__label { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.vtray__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.vtray__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 14px;
  border-radius: 999px;
  background: rgba(241, 238, 231, .08);
  font-size: 13.5px;
  font-weight: 600;
}
[data-theme="dark"] .vtray__chip { background: rgba(241, 238, 231, .1); }
.vtray__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(241, 238, 231, .14);
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.vtray__x:hover { background: var(--accent); color: #171512; }
.vtray__acts { display: flex; align-items: center; gap: 12px; }
.vtray__clear {
  padding: 12px 20px;
  border: 1px solid rgba(241, 238, 231, .24);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease;
}
.vtray__clear:hover { border-color: var(--on-emph); }
.vtray__go {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 13px 13px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 700;
}
.vtray__go:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn__arrow--dark { width: 30px; height: 30px; background: #171512; color: var(--accent); }

@media (max-width: 1400px) {
  /* Photo and fuel go first — the row still reads without them. */
  .vtable__head, .vtrow { grid-template-columns: 44px minmax(0, 1fr) 120px 120px 140px 96px; }
  .vtable__head > :nth-child(2), .vtrow > .vtrow__photo,
  .vtable__head > :nth-child(5), .vtrow > .vtrow__fuel { display: none; }
}
@media (max-width: 980px) {
  .vtable__head { display: none; }
  .vtrow { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 10px; padding: 18px 20px; }
  .vtrow > .vtrow__mileage, .vtrow > .vtrow__condcell, .vtrow > .vtrow__dealer { grid-column: 2 / -1; }
  .vtrow__prices { grid-column: 3; grid-row: 1; }
}

@media (max-width: 1500px) {
  .lst2[data-view="card"] .vlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .lst2 { grid-template-columns: 1fr; }
  .lst2__side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lst2[data-view="card"] .vlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The three-part row cannot hold a 340px photo and a 230px rail as well. */
  .vrow { grid-template-columns: 260px minmax(0, 1fr); }
  .vrow__rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
  .vrow__acts { flex-direction: row; align-items: center; margin-top: 0; }
}
@media (max-width: 860px) {
  .lst2__side { grid-template-columns: 1fr; }
  .lst2[data-view="card"] .vlist { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: 1fr; }
  .vrow__media { min-height: 0; aspect-ratio: 16 / 10; }
  .vrow__body { padding: 22px 20px; }
  .vrow__title { font-size: 22px; }
}

@media (max-width: 1400px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .lsearch__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lsearch__reset { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .lsearch { padding: 22px 20px 24px; }
  .lsearch__row { grid-template-columns: 1fr; }
  .lsearch__sliders { grid-template-columns: 1fr; gap: 22px; }
  .vgrid { grid-template-columns: 1fr; }
  .lst__sort { width: 100%; }
}

.lst__lead { max-width: 720px; margin-top: 20px; }

.lfilt { background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 22px; padding: 22px 24px 24px; }
.lfilt--top { margin-bottom: 22px; }
.lfilt--side { position: sticky; top: 120px; }
.lfilt--map { border: 0; background: none; padding: 0 0 16px; }
.lfilt__row { margin-bottom: 16px; }
.lfilt__group { display: flex; flex-wrap: wrap; gap: 8px; }
.lfilt__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lfilt--side .lfilt__grid, .lfilt--map .lfilt__grid { grid-template-columns: 1fr; }
.lfilt__block { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(var(--hairline-rgb), .1); }
/* Slider on a cream card needs the dark-on-light track, not the dark-band one. */
.lfilt input[type=range].fin { background: rgba(var(--hairline-rgb), .18); }
.lchk { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; color: var(--ink-3); cursor: pointer; }
.lchk input { accent-color: var(--accent); }
.lchk__n { margin-left: auto; font-size: 10px; color: var(--ink-2); }

.lst__bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.lst__two { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: start; }
.lst__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

/* Shared card furniture — every variant reuses this. */
.lst {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lst:hover, .lst.is-hot { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.lst__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.lst__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Condition badges sit on the photo, so USED and CERTIFIED keep their
   polarity in dark; NEW is accent and never flips anyway. */
.lst__cond {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lst__cond--new { background: var(--accent); color: var(--on-accent); }
.lst__cond--used { background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.lst__cond--cert { background: rgba(251, 250, 245, .92); color: #171512; }
.lst__pts {
  position: absolute;
  bottom: 12px; left: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(18, 16, 14, .7);
  color: #F1EEE7;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lst__save {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  cursor: pointer;
}
.lst__save[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.lst__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.lst__meta { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.lst__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin: 8px 0 0; }
.lst__desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 0; }
.lst__price { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 0; }
.lst__was { font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: line-through; margin-left: 9px; }
.lst__mo { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 0; }
.lst__dealer { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 14px; }
.lst__logo { width: 30px; height: 30px; flex: none; border-radius: 50%; }
.lst__dealername { display: block; font-size: 13px; font-weight: 700; }
.lst__dealermeta { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.lst__avava {
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* v2 rows */
[data-variant="v2"][data-view="row"] .lst__grid { grid-template-columns: 1fr; }
[data-variant="v2"][data-view="row"] .lst { flex-direction: row; }
[data-variant="v2"][data-view="row"] .lst__media { width: 300px; flex: none; aspect-ratio: 4 / 3; }
[data-variant="v2"][data-view="card"] .lst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-variant="v2"] .lst__desc { display: none; }
[data-variant="v2"][data-view="row"] .lst__desc { display: block; }

/* v3 table */
[data-variant="v3"] .lst__grid { grid-template-columns: 1fr; gap: 0; }
[data-variant="v3"] .lst {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  border: 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 0;
  padding: 12px 8px;
  background: transparent;
}
[data-variant="v3"] .lst:hover { transform: none; box-shadow: none; background: rgba(var(--hairline-rgb), .03); }
[data-variant="v3"] .lst__media { width: 110px; flex: none; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
[data-variant="v3"] .lst__pts, [data-variant="v3"] .lst__save { display: none; }
[data-variant="v3"] .lst__body { flex-direction: row; align-items: center; gap: 20px; padding: 0; }
[data-variant="v3"] .lst__dealer { margin: 0; padding: 0; }
.lst__tick { flex: none; accent-color: var(--accent); }
.ltray {
  position: sticky;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 16px 20px;
  background: var(--surface-emph);
  color: var(--on-emph);
  border-radius: 18px;
  box-shadow: var(--shadow-card-dark);
}
.ltray__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0; }
.ltray__chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.ltray__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(241, 238, 231, .3);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* v4 showcase — page 1 takes five so the hero does not steal a card. */
[data-variant="v4"] .lst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-variant="v4"] .lst--hero { grid-column: 1 / -1; flex-direction: row; }
[data-variant="v4"] .lst--hero .lst__media { width: 52%; flex: none; aspect-ratio: 16 / 10; }
[data-variant="v4"] .lst--hero .lst__body { justify-content: center; padding: 30px 32px; }
[data-variant="v4"] .lst--hero .lst__title { font-size: 28px; }
[data-variant="v4"] .lst--hero .lst__price { font-size: 30px; }

/* v5 dealer groups */
.dealerblk { margin-bottom: 30px; }
.dealerblk__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .12);
}
.dealerblk__logo { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.dealerblk__name { font-size: 19px; font-weight: 700; margin: 0; }
.dealerblk__meta { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 0; }
.dealerblk__from { margin-left: auto; text-align: right; }
.dealerblk__fromnum { font-size: 19px; font-weight: 800; margin: 0; }
.dealerblk__cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dealerblk__all { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; text-decoration: underline; }
.lst__grid--dealers { grid-template-columns: 1fr; gap: 0; }

/* v6 feed */
.lst__grid--feed { grid-template-columns: 1fr; gap: 0; }
.feedday { margin-bottom: 26px; }
.feedday__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.feedday__items { display: grid; gap: 14px; }
.feeditem { position: relative; padding-left: 28px; }
.feeditem::before {
  content: "";
  position: absolute;
  left: 4px; top: 22px; bottom: -14px;
  width: 1px;
  background: rgba(var(--hairline-rgb), .14);
}
.feeditem:last-child::before { display: none; }
.feeditem__dot { position: absolute; left: 0; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.lfeed__flag {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lfeed__live { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }

/* Maps ------------------------------------------------------------------- */
.lmap { position: relative; border-radius: 22px; overflow: hidden; }
.lmap__canvas { position: relative; background: var(--surface-2); min-height: 420px; }
.lmap--split { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 0; border: 1px solid rgba(var(--hairline-rgb), .12); }
.lmap--split .lmap__panel { padding: 22px; max-height: 760px; overflow-y: auto; }
/* Result cards must not compress — they scroll. */
.lmap__results { display: grid; gap: 14px; }
.lmap__results .lst { flex: none; }
.lmap--split .lmap__canvas { position: sticky; top: 0; min-height: 760px; }
.lmap--full { min-height: 720px; }
.lmap--full .lmap__canvas { position: absolute; inset: 0; }
.lmap__float {
  position: relative;
  width: 400px;
  max-height: 660px;
  overflow-y: auto;
  margin: 24px;
  padding: 22px;
  /* Overlays sit on a map, so they keep a light surface with dark ink in
     both themes — same rule as photo scrims. */
  background: rgba(251, 250, 245, .95);
  color: #171512;
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}
.lmap--band .lmap__canvas { min-height: 300px; }
.lmap__pins { position: absolute; inset: 0; }
.lpinbtn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(23, 21, 18, .16);
  border-radius: 999px;
  background: rgba(251, 250, 245, .95);
  color: #171512;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: box-shadow .18s ease, opacity .18s ease;
}
.lpinbtn__n { font-family: var(--font-mono); font-size: 10px; opacity: .6; }
.lpinbtn.is-empty { opacity: .35; }
.lpinbtn[aria-pressed="true"], .lpinbtn.is-hot { box-shadow: 0 0 0 3px var(--accent); z-index: 3; }
.lmap__selected {
  position: absolute;
  left: 24px; bottom: 24px;
  width: 300px;
  background: rgba(251, 250, 245, .95);
  color: #171512;
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.lcity__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
.lcity {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lcity[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
.lcity__n { font-size: 10px; opacity: .6; }

/* Detail ----------------------------------------------------------------- */
.lsd--sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.lsd__side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.lsd__head { margin-bottom: 22px; }
.lsd__badges { display: flex; gap: 8px; margin: 0 0 12px; }
.lsd__badges .lst__cond, .lsd__badges .lst__pts { position: static; }
.lsd__title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.lsd__meta { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 9px 0 0; }
.lsd__price { font-size: 30px; font-weight: 800; letter-spacing: -.025em; margin: 12px 0 0; }
.lsd__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.lsd__topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.lsd__band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0; }
.lsd--single { max-width: 940px; }

.lsd__fin, .lsd__dealer, .lsd__loc, .lsd__glance {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 20px;
  padding: 22px 22px 24px;
}
.lsd__finfig { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 0; }
.lsd__finper { font-size: 14px; font-weight: 500; opacity: .6; letter-spacing: 0; }
.lsd__finsub { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 16px; }
.lsd__slider { margin-top: 14px; }
.lsd__slider .tlbl { display: flex; justify-content: space-between; gap: 12px; }
.lsd__fin input[type=range].fin { background: rgba(var(--hairline-rgb), .18); margin-top: 8px; }
.lsd__finlink { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 600; }
.lsd__dealername { font-size: 19px; font-weight: 700; margin: 10px 0 0; }
.lsd__dealermeta { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 5px 0 0; }
.lsd__contact { width: 100%; margin-top: 16px; }
.lsd__call { display: flex; justify-content: center; width: 100%; margin-top: 10px; border-color: rgba(var(--hairline-rgb), .22); color: var(--ink); }
.lsd__call:hover { background: var(--ink); color: var(--page); }
.lsd__map { position: relative; height: 200px; border-radius: 14px; overflow: hidden; margin-top: 12px; background: var(--surface-2); }
.lsd__addr { font-size: 14px; margin: 12px 0 0; }
.lsd__hours { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 5px 0 0; }
.lsd__hist { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.lsd__histrow { display: flex; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); font-size: 15px; }
.lsd__histwhen { flex: none; width: 130px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lsd__rating { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
.lsd__ratingnum { font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.lsd__ratingsub { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.lsd__revform { display: grid; gap: 12px; max-width: 620px; }
.lsd__qanote { font-size: 12.5px; color: var(--ink-2); margin: 0; }

.lsdhero { position: relative; height: 620px; border-radius: 24px; overflow: hidden; margin-bottom: 30px; }
.lsdhero__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23, 21, 18, .82), transparent 62%); }
.lsdhero__body { position: absolute; left: 36px; right: 36px; bottom: 34px; color: #F1EEE7; }
.lsdhero__title { font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 12px 0 0; }
.lsdhero__price { font-size: 34px; font-weight: 800; margin: 10px 0 0; }
.lsdhero__save {
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid rgba(241, 238, 231, .4);
  border-radius: 999px;
  background: transparent;
  color: #F1EEE7;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lsdhero__save[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

@media (max-width: 1180px) {
  .lfilt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lst__grid, .dealerblk__cars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lst__two { grid-template-columns: 1fr; }
  .lfilt--side { position: static; }
  .lmap--split { grid-template-columns: 1fr; }
  .lmap--split .lmap__canvas { position: relative; min-height: 380px; }
  .lmap__float { width: auto; }
  .lsd--sidebar { grid-template-columns: 1fr; }
  .lsd__side { position: static; }
  .lsd__band { grid-template-columns: 1fr; }
  [data-variant="v4"] .lst--hero { flex-direction: column; }
  [data-variant="v4"] .lst--hero .lst__media { width: 100%; }
  .lsdhero { height: 420px; }
  .lsdhero__title { font-size: 32px; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lfilt__grid { grid-template-columns: 1fr; }
  .lst__grid, .dealerblk__cars,
  [data-variant="v2"][data-view="card"] .lst__grid,
  [data-variant="v4"] .lst__grid { grid-template-columns: 1fr; }
  [data-variant="v2"][data-view="row"] .lst { flex-direction: column; }
  [data-variant="v2"][data-view="row"] .lst__media { width: 100%; }
  [data-variant="v3"] .lst, [data-variant="v3"] .lst__body { flex-direction: column; align-items: flex-start; }
  .lsd__rail { grid-template-columns: repeat(3, 1fr); }
  .lsd__title { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   16m. Blog — list with two view modes, article, comments
   -------------------------------------------------------------------------- */
.about-intro--blog { padding-bottom: 44px; }
.pdpsec--blog { padding: 8px var(--pad-x) 96px; }
.blog__headline { font-size: 86px; font-weight: 800; line-height: .9; letter-spacing: -.035em; text-wrap: balance; margin: 36px 0 0; }
.blog__intro { display: grid; grid-template-columns: 1fr 1fr auto; gap: 56px; align-items: start; margin-top: 42px; }
.blog__introp { font-size: 16px; line-height: 1.65; color: var(--ink-3); margin: 0; }
.blog__introcta { white-space: nowrap; }

.blog { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.blog__left, .blog__right { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }
.blog__main { min-width: 0; }

/* Sidebar cards ---------------------------------------------------------- */
.blogside {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  padding: 24px;
}
.blogside__head { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 6px; }
.blogside__copy { font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 12px 0 16px; }
.blogside__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 18px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s ease;
}
.blogside__btn:hover { border-color: var(--ink); color: var(--ink); }
.btn__arrow--xs { width: 26px; height: 26px; }

.blog__cats { display: flex; flex-direction: column; }
.blogcat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
  transition: color .16s ease;
}
.blogcat:hover { color: var(--ink); }
.blogcat[aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.blogcat__n { font-size: 10px; color: var(--ink-4); }
.blogcat[aria-pressed="true"] .blogcat__n { color: var(--ink); }

.blog__search { position: relative; margin-top: 8px; }
.blog__searchicon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-2); }
.blog__searchin {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 12px;
  background: var(--page);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.blog__searchin::placeholder { color: var(--ink-placeholder); }

.blog__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.blogtag {
  padding: 7px 13px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .16s ease;
}
.blogtag:hover { border-color: var(--ink); }
.blogtag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }

.blog__archive { display: flex; flex-direction: column; }
.blogarch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 14px;
  color: var(--ink);
}
.blogarch:hover { color: var(--accent); }
.blogarch__n { font-size: 10px; color: var(--ink-4); }

/* Toolbar ---------------------------------------------------------------- */
.blog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .14);
}
.blog__count { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.blog__tools { display: flex; align-items: center; gap: 14px; }
.blog__views { display: inline-flex; padding: 4px; border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 999px; background: var(--surface); }
.blog__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .18s ease;
}
.blog__view[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.blog__sort { width: 200px; }

/* Articles --------------------------------------------------------------- */
.blog__list { display: flex; flex-direction: column; gap: 24px; }
.post {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.post__media { position: relative; display: block; min-height: 230px; background: var(--surface-2); }
/* Rule 2 — the badge sits on a photograph, so it keeps its polarity. */
.post__cat {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(18, 16, 14, .78);
  color: #F1EEE7;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.post__body { display: flex; flex-direction: column; padding: 26px 28px 26px 0; }
.post__meta { display: flex; align-items: center; gap: 12px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.post__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--hairline-rgb), .3); }
.post__title { font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.022em; margin: 12px 0 0; }
.post__title a { color: var(--ink); }
.post:hover .post__title a { color: var(--accent); }
.post__excerpt { font-size: 15px; line-height: 1.62; color: var(--ink-3); margin: 12px 0 0; }
.post__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; }
.post__author { display: flex; align-items: center; gap: 11px; margin: 0; }
.post__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; }
.post__name { display: block; font-size: 13.5px; font-weight: 600; }
.post__role { display: block; margin-top: 2px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.post__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: all .2s ease;
}
.post__go:hover { background: var(--ink); color: var(--page); }

/* Card view — one set of markup, a different shape. */
.blog[data-view="grid"] .blog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.blog[data-view="grid"] .post { display: flex; flex-direction: column; }
.blog[data-view="grid"] .post__media { min-height: 0; aspect-ratio: 16 / 9; }
.blog[data-view="grid"] .post__cat { top: 16px; left: 16px; }
.blog[data-view="grid"] .post__body { flex: 1; padding: 26px 28px; }
.blog[data-view="grid"] .post__title { font-size: 27px; line-height: 1.16; letter-spacing: -.024em; }
.blog[data-view="grid"] .post__excerpt { font-size: 15.5px; margin-top: 13px; }
.blog[data-view="grid"] .post__foot { padding-top: 22px; }

.blog__empty {
  padding: 70px 24px;
  text-align: center;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 24px;
}
.blog__emptytitle { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.blog__emptycopy { font-size: 15px; color: var(--ink-2); margin: 12px 0 24px; }

/* Ad slots — a frame and a size, nothing else. Drop a real unit inside. */
.adslot {
  border: 1px dashed rgba(var(--hairline-rgb), .24);
  border-radius: 20px;
  padding: 14px;
  background: var(--surface);
}
.adslot__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.adslot__label { font-size: 8.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.adslot__size { font-size: 8.5px; font-weight: 600; letter-spacing: .11em; color: var(--ink-4); }
.adslot__box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 10px, var(--page) 10px, var(--page) 20px);
}
.adslot__box--mpu { height: 250px; }
.adslot__box--sky { height: 420px; }
.adslot__note { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); line-height: 1.7; }

/* Rule 3 — the newsletter block is a container: dark on the light page,
   cream in dark, with its input and button following it. */
.blognews { background: var(--surface-emph); color: var(--on-emph); border-radius: 24px; padding: 26px 24px; }
[data-theme="dark"] .blognews { background: var(--on-emph); color: #171512; }
.blognews__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.blognews__title { font-size: 21px; font-weight: 800; letter-spacing: -.022em; line-height: 1.12; margin: 13px 0 0; }
.blognews__copy { font-size: 13.5px; line-height: 1.6; opacity: .7; margin: 10px 0 16px; }
.blog__news { display: grid; gap: 10px; }
.blognews__in {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(241, 238, 231, .22);
  border-radius: 11px;
  background: rgba(241, 238, 231, .06);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
}
.blognews__in::placeholder { color: currentColor; opacity: .5; }
[data-theme="dark"] .blognews__in { border-color: rgba(23, 21, 18, .22); background: rgba(23, 21, 18, .06); }
.blognews__btn {
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.blognews__btn:hover { background: var(--accent-hover); }

.mostread__list { display: flex; flex-direction: column; }
.mostread { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); color: var(--ink); }
.mostread__n { flex: none; font-size: 14px; font-weight: 800; line-height: 1.2; color: transparent; -webkit-text-stroke: 1px rgba(var(--hairline-rgb), .34); }
.mostread__t { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.mostread__m { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.mostread:hover { color: var(--ink); }
.mostread:hover .mostread__t { color: var(--accent); }

@media (max-width: 1400px) {
  .blog { grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 26px; }
  .post { grid-template-columns: 240px minmax(0, 1fr); }
  .blog__headline { font-size: 68px; }
}
@media (max-width: 1180px) {
  /* The ad rail goes under the articles before the filters do — it is the
     column a reader needs least. */
  .blog { grid-template-columns: 260px minmax(0, 1fr); }
  .blog__right { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .blog__headline { font-size: 52px; }
  .blog__intro { grid-template-columns: 1fr 1fr; }
  .blog__introcta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 980px) {
  .blog { grid-template-columns: 1fr; }
  .blog__left { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog[data-view="grid"] .blog__list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .blog__headline { font-size: 38px; }
  .blog__intro { grid-template-columns: 1fr; gap: 20px; }
  .blog__left, .blog__right { grid-template-columns: 1fr; }
  /* The horizontal card cannot hold a 240px photo beside the copy. */
  .post { display: flex; flex-direction: column; }
  .post__media { min-height: 0; aspect-ratio: 16 / 9; }
  .post__body { padding: 24px 22px; }
  .post__title { font-size: 22px; }
}

/* Article ---------------------------------------------------------------- */
.about-intro--art { padding-bottom: 40px; }
/* The handoff caps this at 1180px, which broke the headline over two lines
   on a wide screen. Uncapped it sits on one line down to about 1400px and
   wraps naturally below that. */
.art__title { font-size: 68px; font-weight: 800; line-height: .94; letter-spacing: -.034em; text-wrap: balance; margin: 34px 0 0; }
.art__byline { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 28px; }
.art__portrait { width: 46px; height: 46px; flex: none; border-radius: 50%; }
.art__who { display: flex; flex-direction: column; margin-right: 0; }
.art__byline > .art__portrait + .art__who { margin-left: -9px; }
.art__bylinename { font-size: 15.5px; font-weight: 700; }
.art__role { margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.art__bylinerule { width: 1px; height: 34px; background: rgba(var(--hairline-rgb), .16); }
.art__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.art__tag {
  padding: 6px 13px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.art__tag:hover { border-color: var(--ink); color: var(--ink); }

.art { display: block; }
.art__hero { margin: 0; }
.art__hero .ph { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; }
/* The hatch WAS the box here, so a real photograph has to carry it. */
.art__hero .shot > img { aspect-ratio: 16 / 9; border-radius: 26px; }
.art__cap { margin-top: 14px; font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
/* The handoff caps the body at 820px, which on a wide screen leaves the
   centre column half empty next to a full-width lead image. The copy runs
   the width of the column instead; below ~820px nothing changes. */
.art__lead { font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--ink); margin: 34px 0 0; }
.art__p { font-size: 17px; line-height: 1.75; color: var(--ink-3); margin: 16px 0 0; }
.art__lead + .art__p { margin-top: 20px; }
.art__h2 { font-size: 32px; font-weight: 800; letter-spacing: -.028em; margin: 44px 0 0; }
.art__h2 + .art__p { margin-top: 16px; }

/* Rule 3 — the pull-quote is a container: dark here, cream in dark. */
.art__quote { background: var(--surface-emph); color: var(--on-emph); border-radius: 26px; padding: 34px 36px; margin: 34px 0 0; }
[data-theme="dark"] .art__quote { background: var(--on-emph); color: #171512; }
.art__quotelabel { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.art__quotetext { font-size: 22px; line-height: 1.45; font-weight: 600; margin: 16px 0 0; }

.art__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0 0; }
.art__pairimg { display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; }
.art__pair .art__cap { grid-column: 1 / -1; margin-top: -2px; }

.artlist { list-style: none; margin: 20px 0 0; padding: 0; border-bottom: 1px solid rgba(var(--hairline-rgb), .12); }
.artlist__row { display: flex; gap: 16px; padding: 15px 0; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.artlist__n { flex: none; margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); }
/* The first entry is the one she would read first — it gets the accent. */
.artlist__row:first-child .artlist__n { color: var(--accent); }
.artlist__t { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.artlist__c { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.6; color: var(--ink-3); }

.art__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: 40px 0 0;
  padding: 26px 30px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.art__ctatext { font-size: 16.5px; line-height: 1.5; color: var(--ink-3); max-width: 520px; margin: 0; }
.art__ctatext strong { color: var(--ink); font-weight: 700; }
.art__ctabtn { flex: none; }

.art__share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--hairline-rgb), .14);
}
.art__sharelabel { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.art__sharelinks { display: flex; gap: 10px; margin: 0; }
.art__sharebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease;
}
.art__sharebtn:hover { border-color: var(--ink); color: var(--ink); }

.art__author {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 32px;
  padding: 30px 32px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
}
.art__authorav { width: 64px; height: 64px; flex: none; border-radius: 50%; }
.art__authorlabel { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 0; }
.art__authorname { font-size: 19px; font-weight: 700; letter-spacing: -.018em; margin: 8px 0 0; }
.art__authorbio { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 8px 0 0; }

/* Comments --------------------------------------------------------------- */
.cmts { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(var(--hairline-rgb), .14); }
.cmts__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 26px; }
.cmts__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.cmts__title { font-size: 30px; font-weight: 800; letter-spacing: -.026em; margin: 12px 0 0; }
.cmts__sort { width: 190px; }

.cmts__form {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 24px;
  padding: 30px 32px 32px;
  margin-bottom: 28px;
}
.cmts__formhead { display: flex; align-items: flex-start; gap: 16px; }
.cmts__formtitle { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.cmts__formcopy { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 6px 0 0; }
.cmts__area {
  width: 100%;
  min-height: 96px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 14px;
  background: var(--page);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  resize: vertical;
}
.cmts__area::placeholder { color: var(--ink-placeholder); }
.cmts__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.cmts__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.cmts__keep { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-3); cursor: pointer; }
.cmts__keep input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
/* Shut until there is something to send — greyed, and it says why by being
   plainly inert rather than failing on click. */
.cmts__post:disabled { background: rgba(var(--hairline-rgb), .14); color: var(--ink-2); cursor: default; }
.cmts__post:disabled .btn__arrow { background: rgba(var(--hairline-rgb), .1); color: var(--ink-4); }

.cmts__thread { display: flex; flex-direction: column; border-bottom: 1px solid rgba(var(--hairline-rgb), .14); }
.comment { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid rgba(var(--hairline-rgb), .14); }
/* A reply from the workshop sits under the question it answers. */
.comment--staff { margin-left: 60px; }
.comment__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.comment__name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.comment__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.comment__chipdot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.comment__when { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.comment__text { font-size: 15.5px; line-height: 1.68; color: var(--ink-3); margin: 10px 0 0; }
.comment__actions { display: flex; align-items: center; gap: 18px; margin: 12px 0 0; }
.comment__like, .comment__reply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.comment__like:hover, .comment__reply:hover { color: var(--ink); }
.comment__like[aria-pressed="true"] { color: var(--accent); }
.comment__like[aria-pressed="true"] svg { fill: currentColor; }
.cmts__more { display: flex; justify-content: center; margin-top: 26px; }

.art__next { margin-top: 40px; }
.art__nextlabel { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 20px; }
.art__nextgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.art__nextcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 22px;
  overflow: hidden;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.art__nextcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); color: var(--ink); }
.art__nextmedia { display: block; aspect-ratio: 16 / 9; }
.art__nextbody { display: block; padding: 20px 22px 22px; }
.art__nextmeta { display: block; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); }
.art__nexttitle { display: block; margin-top: 9px; font-size: 18px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }

@media (max-width: 1180px) {
  .art__title { font-size: 48px; }
}
@media (max-width: 860px) {
  .art__title { font-size: 34px; }
  .art__h2 { font-size: 26px; }
  .art__quote { padding: 26px 24px; }
  .art__quotetext { font-size: 19px; }
  .art__pair, .art__nextgrid, .cmts__fields { grid-template-columns: 1fr; }
  .art__author { flex-direction: column; gap: 16px; padding: 26px 22px; }
  .cmts__form { padding: 24px 22px 26px; }
  .comment--staff { margin-left: 20px; }
  .art__cta { padding: 22px 20px; }
}

/* --------------------------------------------------------------------------
   16l. Shop funnel — product, cart, checkout, confirmation
   -------------------------------------------------------------------------- */
/* Intro band without a headline — used where the h1 lives further down. */
.about-intro--slim { padding-bottom: 34px; }
/* The product page gives the band its full skirt back: the buy grid opens
   24px below it, per shop-single.dc.html. */
.about-intro--pdp { padding-bottom: 56px; }
.pdpsec--buy { padding: 24px var(--pad-x) 56px; }
.pdpsec--tabs { padding: 8px var(--pad-x) 48px; }

/* Gallery gets the larger share; the buy column is not a card in this
   design — it sits directly on the page. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: start; }

/* Media — 4:3 main shot with the thumbnails standing beside it, not under it.

   The handoff pins the rail at 108px, which only lands level with the photo
   at the ~2280px viewport the design was captured on; at any narrower width
   six squares overshoot the photo. The rail is therefore derived instead of
   fixed: six squares plus five 14px gaps must equal three quarters of what
   is left of the gallery, and solving that for the rail width gives one
   ninth of the gallery less 12px. It holds at every width. */
.pgal { display: grid; grid-template-columns: minmax(0, 1fr) calc(11.111% - 12px); gap: 14px; align-items: start; }
.pgal__main {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-2);
}
.pgal__rail { display: flex; flex-direction: column; gap: 14px; }
.pgal__thumb {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid rgba(var(--hairline-rgb), .14);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  transition: border-color .18s ease;
}
.pgal__thumb[aria-pressed="true"] { border-color: var(--ink); }
/* The tiles run under both the photo and the rail, so the media column has
   one flush right edge instead of two. */
.pgal .pdp__tiles { grid-column: 1 / -1; margin-top: 8px; }

/* Rule 2 — the flags and the shot label sit on a photograph, so they keep
   their polarity in both themes. Do not tie them to --ink. */
.pdp__cat, .pdp__oem {
  position: absolute;
  top: 18px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pdp__cat { left: 18px; background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.pdp__oem { right: 18px; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.pdp__shotlabel {
  position: absolute;
  left: 18px; bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(251, 250, 245, .92);
  color: #171512;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Buy column ------------------------------------------------------------- */
/* Flex column so the reassurance block can take up the slack: when the
   gallery is the taller of the two, the promises drop to the floor and both
   columns finish on the same line. */
.pdp__buy { display: flex; flex-direction: column; padding-top: 2px; }
.pdp__eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.pdp__name { font-size: 46px; font-weight: 800; line-height: 1.02; letter-spacing: -.032em; margin: 14px 0 0; }

.pdp__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.stars { display: inline-flex; align-items: center; gap: 7px; }
.stars--sm { gap: 3px; }
.stars__s { color: var(--accent); }
.stars__s--off { color: rgba(var(--hairline-rgb), .18); }
.pdp__ratenum { font-size: 14px; font-weight: 600; }
.pdp__ratecount { font-size: 14px; color: var(--ink-2); }
.pdp__ratesep { width: 1px; height: 16px; background: rgba(var(--hairline-rgb), .16); }
.pdp__stock { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.pdp__stockdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* The handoff caps this at 600px, which leaves a ragged column on a wide
   screen — the copy runs the full width of the buy column instead. */
.pdp__intro { font-size: 16.5px; line-height: 1.68; color: var(--ink-3); margin: 22px 0 0; }

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 30px 0 0;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.035em;
}
/* The per-unit line only earns its space once there is more than one. */
.pdp__each { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.pdp__vat { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; }

.pdp__opts { border: 0; padding: 0; margin: 26px 0 0; }
.pdp__optlabel {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 11px;
  padding: 0;
}
.pdp__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp__swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.pdp__swatch[aria-pressed="true"] { background: var(--surface-sel); border-color: var(--ink); font-weight: 700; }
.pdp__dot { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1px solid rgba(var(--hairline-rgb), .2); }
/* Groups that are not colours drop the swatch and even up the padding. */
.pdp__swatch--plain { padding: 10px 16px; }

.pdp__buyrow { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.pdp__qtyblock { flex: none; }

.qty { display: inline-flex; align-items: center; border: 1px solid rgba(var(--hairline-rgb), .2); border-radius: 999px; }
.qty__btn {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
/* Dim rather than vanish at the ends of the range — the control keeps its
   shape so the row does not shift. */
.qty__btn:disabled { color: var(--ink-4); opacity: .55; cursor: default; }
.qty__val { min-width: 30px; text-align: center; font-size: 15px; font-weight: 700; }
/* The product page runs the larger stepper from the design. */
.qty--lg { gap: 4px; padding: 5px; border-color: rgba(var(--hairline-rgb), .18); background: var(--surface); }
.qty--lg .qty__btn { width: 40px; height: 40px; font-size: 20px; }
.qty--lg .qty__val { min-width: 40px; font-size: 17px; font-variant-numeric: tabular-nums; }

.pdp__add {
  flex: 1;
  min-width: 240px;
  height: 52px;
  gap: 14px;
  padding: 0 18px 0 30px;
  font-size: 15.5px;
  font-weight: 700;
}
.pdp__add .btn__arrow { width: 34px; height: 34px; }
/* Added state: the accent takes the fill and the arrow circle goes dark, so
   the button still reads as a control rather than as a badge. */
.pdp__add[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.pdp__add[aria-pressed="true"]:hover { background: var(--accent-hover); color: var(--on-accent); }
.pdp__add[aria-pressed="true"] .btn__arrow { background: var(--ink); color: var(--accent); }

.pdp__save {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
}
.pdp__save:hover { border-color: var(--ink); }
.pdp__save[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.pdp__save[aria-pressed="true"] svg { fill: currentColor; }

.pdp__fitting {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 14px;
  line-height: 1.5;
}
.pdp__fittingicon { flex: none; display: inline-flex; color: var(--ink); }
.pdp__fittingsub { color: var(--ink-3); }

.tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.pdp__promises { list-style: none; margin: auto 0 0; padding-top: 24px; padding-left: 0; padding-right: 0; display: flex; flex-direction: column; }
.pdp__promise {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Detail — tabs beside a sticky sidebar ---------------------------------- */
.pdp__lower { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.pdp__doc { min-width: 0; }

.tabs__bar { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid rgba(var(--hairline-rgb), .12); }
.tabs__btn {
  padding: 13px 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tabs__btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__panel { padding-top: 26px; }

/* Pill tabs — the product page fills the active tab rather than underlining
   it, and the bar keeps a rule under the whole row. */
.tabs--pills .tabs__bar { gap: 10px; padding-bottom: 24px; border-bottom: 1px solid rgba(var(--hairline-rgb), .14); }
.tabs--pills .tabs__btn {
  padding: 11px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  transition: all .18s ease;
}
.tabs--pills .tabs__btn:hover { border-color: var(--ink); }
.tabs--pills .tabs__btn[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
  font-weight: 700;
}
.tabs--pills .tabs__panel { padding-top: 30px; }

.pdp__h2 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.pdp__h2--flush { margin-bottom: 20px; }
.pdp__h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 32px 0 0; }
.pdp__p { font-size: 16px; line-height: 1.7; color: var(--ink-3); margin: 14px 0 0; }
.pdp__h2 + .pdp__p { margin-top: 16px; }
.pdp__p--lead { max-width: 700px; margin-bottom: 24px; }

.pdp__box { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.pdp__boxrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Specification — one bordered block, zebra rows inside it. */
.spectbl { margin: 0; border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 20px; overflow: hidden; }
.spectbl__row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 24px;
  padding: 15px 24px;
  background: var(--surface);
  border-top: 1px solid rgba(var(--hairline-rgb), .09);
}
.spectbl__row:nth-child(even) { background: var(--surface-zebra); }
.spectbl__row:first-child { border-top: 0; }
.spectbl__k { align-self: center; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.spectbl__v { margin: 0; font-size: 15px; font-weight: 600; }

.pdp__fitlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pdp__fitrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 16px;
  background: var(--surface);
}
.pdp__fitcar { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.pdp__fityears { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.pdp__fitchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pdp__fitdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pdp__vin { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pdp__vin:hover { color: var(--ink); }
.pdp__vin:hover .btn__arrow { background: var(--accent-hover); }

.pdp__revhead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 22px; }
.pdp__revscore { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pdp__revnum { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.pdp__revfrom { font-size: 14px; color: var(--ink-2); }
.pdp__review { padding: 22px 0; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.pdp__revmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.pdp__revname { font-size: 15.5px; font-weight: 700; }
.pdp__revcar { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.pdp__revchip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pdp__revtext { font-size: 15.5px; line-height: 1.65; color: var(--ink-3); max-width: 760px; margin: 12px 0 0; }
.pdp__revrule { margin: 0; border-top: 1px solid rgba(var(--hairline-rgb), .12); }

.pdp__side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }

/* Rule 3 — the delivery card is a container, so it keeps a dark fill in the
   light theme and inverts to cream in dark. Its hairlines flip with it. */
.pdeliv { background: var(--surface-emph); color: var(--on-emph); border-radius: 26px; padding: 30px 28px; }
[data-theme="dark"] .pdeliv { background: var(--on-emph); color: #171512; }
.pdeliv__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.pdeliv__head { font-size: 23px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 14px 0 0; }
.pdeliv__rows { margin: 20px 0 0; }
.pdeliv__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(241, 238, 231, .16);
  font-size: 14px;
}
[data-theme="dark"] .pdeliv__row { border-top-color: rgba(23, 21, 18, .16); }
.pdeliv__row dt { opacity: .62; }
.pdeliv__row dd { margin: 0; font-weight: 600; }

.pdpcard { background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 26px; padding: 28px 26px; }
.pdpcard__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.pdpcard__copy { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 12px 0 18px; }
.pdpcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: all .2s ease;
}
.pdpcard__btn:hover { border-color: var(--ink); color: var(--ink); }
.btn__arrow--sm { width: 28px; height: 28px; }

.pdprel__list { display: flex; flex-direction: column; margin-top: 14px; }
.pdprel { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(var(--hairline-rgb), .1); color: var(--ink); }
.pdprel__media { width: 60px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; }
.pdprel__body { flex: 1; min-width: 0; }
.pdprel__name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pdprel__price { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 700; }
.pdprel__arrow { flex: none; display: inline-flex; opacity: .45; }
.pdprel:hover { color: var(--ink); }
.pdprel:hover .pdprel__name { color: var(--accent); }
.pdprel:hover .pdprel__arrow { opacity: .8; }

/* Kept for the listing detail pages, which share the gallery bed, the
   thumbnails and the four spec tiles. */
.pdp__main { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--surface-2); position: relative; }
/* position + a box to fill: the placeholder inside is .ph--fill, which is
   absolute, so without these it escapes the button and covers the page. */
.pdp__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(var(--hairline-rgb), .14);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.pdp__thumb[aria-pressed="true"] { border-color: var(--accent); }
.pdp__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.pdp__tile { background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .12); border-radius: 16px; padding: 16px; }
.pdp__tilelabel { font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.pdp__tileval { font-size: 15px; font-weight: 700; margin: 7px 0 0; }
.pdp__specs { margin: 0; }
.pdp__specrow { display: flex; justify-content: space-between; gap: 20px; padding: 13px 14px; font-size: 15px; }
.pdp__specrow:nth-child(odd) { background: rgba(var(--hairline-rgb), .035); }
.pdp__specrow dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pdp__specrow dd { margin: 0; font-weight: 600; text-align: right; }
.pdp__revstars { color: var(--accent); font-size: 13px; margin: 10px 0 0; }

@media (max-width: 1180px) {
  .pdp { grid-template-columns: 1fr; gap: 40px; }
  .pdp__lower { grid-template-columns: 1fr; gap: 40px; }
  .pdp__side { position: static; }
  .pdp__name { font-size: 38px; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* Below this the rail cannot hold a readable square, so it lies down
     under the main shot. */
  .pgal { grid-template-columns: 1fr; }
  .pgal__rail { flex-direction: row; }
  .pgal__thumb { flex: 1; }
  .pdp__box, .pdp__fitlist { grid-template-columns: 1fr; }
  .spectbl__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; }
  .pdp__name { font-size: 32px; }
  .pdp__price { font-size: 36px; }
  .pdp__add { min-width: 0; }
}

/* Cart ------------------------------------------------------------------- */
.about-intro--cart { padding-bottom: 40px; }
.pdpsec--cart { padding: 8px var(--pad-x) 96px; }
.cart__title { font-size: 56px; font-weight: 800; line-height: .98; letter-spacing: -.032em; margin: 34px 0 0; }

.cart { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.cart__main { min-width: 0; }

/* One card holds the header row and every line, so the column rules line up
   without a table. */
.cart__card {
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  overflow: hidden;
  background: var(--surface);
}
.cart__head,
.cartline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px 44px;
  gap: 20px;
}
.cart__head { padding: 18px 26px; background: var(--page); }
.cart__headcell { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cart__headcell--right { text-align: right; }

.cartline {
  align-items: center;
  padding: 22px 26px;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
}
.cartline__product { display: flex; align-items: center; gap: 18px; min-width: 0; }
.cartline__media { width: 92px; height: 70px; flex: none; border-radius: 14px; overflow: hidden; }
.cartline__body { min-width: 0; }
.cartline__name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.018em; line-height: 1.3; color: var(--ink); }
.cartline__name:hover { color: var(--accent); }
.cartline__meta { font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); margin: 7px 0 0; }
.cartline__stock { margin: 8px 0 0; font-size: 13px; }
.cartline__each { font-size: 12.5px; color: var(--ink-4); margin: 7px 0 0; }
.cartline__sum { text-align: right; }
.cartline__total { font-size: 20px; font-weight: 800; letter-spacing: -.022em; margin: 0; }
.cartline__saved { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 4px 0 0; }
.cartline__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--hairline-rgb), .16);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s ease;
}
.cartline__remove:hover { border-color: var(--ink); color: var(--ink); }

.cart__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
}
.cart__continue { display: inline-flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cart__continue:hover { color: var(--ink); }
.cart__continueicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  transition: border-color .2s ease;
}
.cart__continue:hover .cart__continueicon { border-color: var(--ink); }
.cart__clear {
  padding: 11px 20px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.cart__clear:hover { border-color: var(--ink); color: var(--ink); }

.cart__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.cart__box { background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 22px; padding: 26px; }
.cart__boxhead { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.cart__fitting { display: flex; align-items: flex-start; gap: 13px; margin-top: 16px; cursor: pointer; }
.cart__fitting input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.cart__fittingtitle { display: block; font-size: 15.5px; font-weight: 700; }
.cart__fittingsub { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

.cart__promo { display: flex; gap: 10px; margin-top: 16px; }
.cart__promoin {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 12px;
  background: var(--page);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.cart__promoin::placeholder { color: var(--ink-placeholder); }
.cart__promobtn {
  flex: none;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--page);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cart__promobtn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--page)); }
.cart__promomsg { font-size: 13px; color: var(--ink-4); margin: 11px 0 0; }
.cart__promomsg--good { color: var(--ink); }
/* The one message that has to be noticed — terracotta in both themes. */
.cart__promomsg--bad { color: var(--warn); }

.cart__side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }

/* Rule 3 — the summary is a container, so it keeps a dark fill in the light
   theme and inverts to cream in dark. Its hairlines flip with it. */
.csum { background: var(--surface-emph); color: var(--on-emph); border-radius: 26px; padding: 34px 32px; }
[data-theme="dark"] .csum { background: var(--on-emph); color: #171512; }
.csum__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.csum__rows { margin: 22px 0 0; }
.csum__row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; font-size: 15px; }
.csum__row + .csum__row { border-top: 1px solid rgba(241, 238, 231, .16); }
[data-theme="dark"] .csum__row + .csum__row { border-top-color: rgba(23, 21, 18, .16); }
.csum__row dt { opacity: .66; }
.csum__row dd { margin: 0; font-weight: 600; }
.csum__row--discount dd { color: var(--accent); }
.csum__row--free dd { color: var(--accent); }
.csum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(241, 238, 231, .28);
}
[data-theme="dark"] .csum__total { border-top-color: rgba(23, 21, 18, .28); }
.csum__totallabel { font-size: 16px; font-weight: 700; }
.csum__totalval { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.csum__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
  padding: 17px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15.5px;
  font-weight: 700;
}
.csum__cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.csum__ctaarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: #171512;
  color: var(--accent);
}
[data-theme="dark"] .csum__ctaarrow { background: var(--on-emph); }
.csum__note { font-size: 12.5px; line-height: 1.6; opacity: .58; margin: 16px 0 0; }

/* Three ticked reassurances under a summary — cart and checkout share it. */
.tickcard { background: var(--surface); border: 1px solid rgba(var(--hairline-rgb), .1); border-radius: 26px; padding: 26px; }
.tickcard__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; margin: 0; font-size: 14.5px; line-height: 1.5; }
.tickcard__row + .tickcard__row { border-top: 1px solid rgba(var(--hairline-rgb), .1); }

/* Empty state — replaces the whole two-column body. */
.cart__empty {
  padding: 80px 24px;
  text-align: center;
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
}
.cart__emptyicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-bottom: 22px;
  border: 1.5px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  color: var(--ink);
}
.cart__emptytitle { font-size: 28px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.cart__emptycopy { max-width: 420px; margin: 12px auto 26px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 1180px) {
  .cart { grid-template-columns: 1fr; }
  .cart__side { position: static; }
  .cart__title { font-size: 44px; }
}
@media (max-width: 860px) {
  /* The four-column line collapses: product on top, then quantity and total
     side by side with the bin pinned to the right. */
  .cart__head { display: none; }
  .cartline { grid-template-columns: minmax(0, 1fr) auto 44px; row-gap: 18px; }
  .cartline__product { grid-column: 1 / -1; }
  .cartline__sum { text-align: right; }
  .cart__extras { grid-template-columns: 1fr; }
  .cart__title { font-size: 34px; }
}
@media (max-width: 520px) {
  .cartline__media { width: 68px; height: 54px; }
  .cartline { padding: 20px 18px; }
  .cart__head { padding: 16px 18px; }
}

/* Kept for the checkout summary, which shares these four. */
.cart__rows { margin: 20px 0 0; }
.cart__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; }
.cart__row dt { color: var(--ink-2); }
.cart__row dd { margin: 0; font-weight: 600; }
.cart__grand {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--hairline-rgb), .14);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.cart__vat { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 7px 0 0; }

/* Checkout --------------------------------------------------------------- */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.checkout__main { min-width: 0; }

/* Step rail — also the navigation: every step is reachable in both
   directions, and the connector fills once a step is behind you. */
.crail {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .14);
}
.crail__step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 26px 0 0;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.crail__badge {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(var(--hairline-rgb), .24);
  border-radius: 50%;
  color: var(--ink-4);
  font-size: 13px;
  font-weight: 700;
  transition: all .2s ease;
}
/* Badges are controls, so the filled state inverts to cream in dark. */
.crail__step[aria-selected="true"] .crail__badge,
.crail__step--done .crail__badge { background: var(--ink); border-color: var(--ink); color: var(--page); }
.crail__tick { display: none; }
.crail__step--done .crail__tick { display: block; color: var(--accent); }
[data-theme="dark"] .crail__step--done .crail__tick { color: var(--page); }
.crail__step--done .crail__num { display: none; }
.crail__no { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .12em; color: var(--ink-4); }
.crail__label { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; letter-spacing: -.015em; color: var(--ink-4); }
.crail__step[aria-selected="true"] .crail__no { color: var(--ink-2); }
.crail__step[aria-selected="true"] .crail__label { font-weight: 700; color: var(--ink); }
.crail__step--done .crail__label { color: var(--ink); }
.crail__line { flex: 1; min-width: 24px; height: 1.5px; margin-right: 26px; background: rgba(var(--hairline-rgb), .16); }
.crail__line--done { background: var(--ink); }

/* Panels ----------------------------------------------------------------- */
.ckpanel {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  padding: 38px 40px 40px;
}
.ckpanel__title { font-size: 28px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.ckpanel__lead { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 11px 0 26px; }
.ckgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ckgrid__wide { grid-column: span 2; }
.ckpanel__note { margin-top: 24px; }
.ckpanel__textarea { min-height: 74px; resize: vertical; }

.ckcheck { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14.5px; cursor: pointer; }
.ckcheck input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }
.ckcheck--terms { align-items: flex-start; margin-top: 24px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.ckcheck--terms input { margin-top: 1px; }
.ckcheck--terms a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ckfoot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.ckfoot--end { justify-content: flex-end; }
.ckback {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease;
}
.ckback:hover { border-color: var(--ink); }

/* The pay button is gated by the consent box: not just greyed but out of
   the tab order too, so it cannot be reached before the box is ticked. */
.ckpay[aria-disabled="true"] {
  background: rgba(var(--hairline-rgb), .16);
  color: var(--ink-2);
  pointer-events: none;
}
.ckpay[aria-disabled="true"] .btn__arrow { background: rgba(var(--hairline-rgb), .1); color: var(--ink-4); }

/* Option cards — delivery and payment share the pattern. */
.optlist { display: flex; flex-direction: column; gap: 12px; }
.optcard {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 1.5px solid rgba(var(--hairline-rgb), .14);
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .18s ease;
}
.optcard:hover { border-color: rgba(var(--hairline-rgb), .3); }
.optcard[aria-checked="true"] { border-color: var(--ink); background: var(--surface-sel); }
.optcard__radio {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(var(--hairline-rgb), .28);
  border-radius: 50%;
  transition: all .18s ease;
}
.optcard[aria-checked="true"] .optcard__radio { border-color: var(--ink); background: var(--ink); }
.optcard__radio::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
}
/* The dot sits on the filled ring, so it takes the page colour in dark
   rather than the accent — same reasoning as the step tick. */
.optcard[aria-checked="true"] .optcard__radio::after { background: var(--accent); }
[data-theme="dark"] .optcard[aria-checked="true"] .optcard__radio::after { background: var(--page); }
.optcard__body { flex: 1; min-width: 0; }
.optcard__name { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.optcard__desc { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.optcard__price { flex: none; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.optcard__price--free { color: var(--accent); }

.ck-collect { margin-top: 18px; }
.ckcard { margin-top: 22px; padding-top: 24px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }

/* Summary — same emphasis card as the cart, with the order lines on top. */
.cksum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.cksum__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.cksum__edit { font-size: 13px; font-weight: 600; color: inherit; opacity: .7; }
.cksum__edit:hover { color: inherit; opacity: 1; }
.cksum__lines { display: flex; flex-direction: column; margin-top: 20px; }
.cksum__line { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(241, 238, 231, .16); }
[data-theme="dark"] .cksum__line { border-top-color: rgba(23, 21, 18, .16); }
.cksum__thumb { width: 52px; height: 40px; flex: none; border-radius: 9px; overflow: hidden; }
.cksum__body { flex: 1; min-width: 0; }
.cksum__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.cksum__qty { display: block; margin-top: 3px; font-size: 12.5px; opacity: .6; }
.cksum__val { flex: none; font-size: 14px; font-weight: 700; }
.cksum__rows { display: flex; flex-direction: column; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid rgba(241, 238, 231, .28); }
[data-theme="dark"] .cksum__rows { border-top-color: rgba(23, 21, 18, .28); }
.cksum__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 14.5px; }
.cksum__row dt { opacity: .66; }
.cksum__row dd { margin: 0; font-weight: 600; }
.cksum__row--discount dd { color: var(--accent); }
.cksum__row--free dd { color: var(--accent); }
.cksum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 14px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(241, 238, 231, .28);
}
[data-theme="dark"] .cksum__total { border-top-color: rgba(23, 21, 18, .28); }
.cksum__totallabel { font-size: 16px; font-weight: 700; }
.cksum__totalval { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }

@media (max-width: 1180px) {
  .checkout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ckpanel { padding: 28px 22px 30px; }
  .ckgrid { grid-template-columns: 1fr; }
  .ckgrid__wide { grid-column: auto; }
  /* The rail wraps rather than squeezing three labels into one line. */
  .crail { flex-wrap: wrap; gap: 16px 0; }
  .crail__line { display: none; }
  .crail__step { padding-right: 20px; }
  .optcard { flex-wrap: wrap; }
  .ckfoot .btn, .ckback { flex: 1; justify-content: center; }
}

/* Confirmation ----------------------------------------------------------- */
/* Two size overrides the blog sidebar leans on — kept when this section was
   rebuilt, they belong to .office__city / .office__addr there. */
.oc__city { font-size: 20px; margin-top: 10px; }
.oc__addr { font-size: 14px; }

.about-intro--oc { padding-bottom: 48px; }

.oc__statement { display: flex; align-items: flex-start; gap: 26px; margin-top: 38px; }
.oc__tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.oc__title { font-size: 64px; font-weight: 800; line-height: .94; letter-spacing: -.034em; text-wrap: balance; margin: 0; }
.oc__lead { font-size: 17px; line-height: 1.62; color: var(--ink-3); max-width: 640px; margin: 20px 0 0; }
.oc__lead strong { color: var(--ink); font-weight: 600; }

.oc__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ocbtn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 26px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .2s ease;
}
.ocbtn:hover { border-color: var(--ink); color: var(--ink); }

.oc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; align-items: start; }
.oc__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Tracker — the rail is drawn under each marker rather than behind the row,
   so a stage can grow to any height without the line breaking. */
.octrack {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  padding: 36px 38px 34px;
}
.octrack__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.octrack__title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.octrack__live { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.octrack__list { list-style: none; margin: 0; padding: 0; }
.octrack__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.octrack__mark { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.octrack__dot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1.5px solid rgba(var(--hairline-rgb), .22);
  border-radius: 50%;
  color: var(--ink-4);
}
.octrack__pip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.octrack__rail { flex: 1; width: 1.5px; min-height: 28px; background: rgba(var(--hairline-rgb), .16); }
/* Done markers are controls: filled in light, cream with a dark tick in dark. */
.octrack__row--done .octrack__dot { background: var(--ink); border-color: var(--ink); color: var(--accent); }
[data-theme="dark"] .octrack__row--done .octrack__dot { color: var(--page); }
.octrack__row--done .octrack__rail { background: var(--ink); }
.octrack__row--active .octrack__dot { border-color: var(--ink); color: var(--ink); }
.octrack__body { padding-bottom: 22px; }
.octrack__stage { font-size: 17.5px; font-weight: 700; letter-spacing: -.018em; color: var(--ink-2); margin: 0; }
.octrack__row--done .octrack__stage,
.octrack__row--active .octrack__stage { color: var(--ink); }
.octrack__desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); max-width: 520px; margin: 7px 0 0; }
.octrack__when { font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-4); text-align: right; white-space: nowrap; padding-top: 9px; margin: 0; }
.octrack__row--done .octrack__when { color: var(--ink); }

.oc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.occard {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  padding: 30px 32px;
}
.occard__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.occard__name { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; margin: 16px 0 0; }
.occard__addr { font-size: 14.5px; line-height: 1.7; color: var(--ink-3); margin: 8px 0 0; }
.occard__copy { font-size: 14.5px; line-height: 1.6; color: var(--ink-3); margin: 12px 0 18px; }
.occard__when {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  font-size: 14px;
  color: var(--ink-3);
}
.occard__when strong { color: var(--ink); font-weight: 600; }

.oclinks { display: flex; flex-direction: column; }
.oclink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.oclink svg { flex: none; opacity: .5; transition: opacity .2s ease; }
.oclink:hover { color: var(--ink); }
.oclink:hover svg { opacity: 1; }

/* Upsell ----------------------------------------------------------------- */
.ocup {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 26px;
  padding: 32px 34px;
}
.ocup__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 6px; }
.ocup__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.ocup__title { font-size: 22px; font-weight: 800; letter-spacing: -.022em; margin: 12px 0 0; }
.ocup__all { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.ocup__all svg { opacity: .5; }
.ocup__all:hover { color: var(--ink); }
.ocup__all:hover svg { opacity: 1; }
.ocup__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.ocup__card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--hairline-rgb), .1);
  border-radius: 18px;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ocup__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); color: var(--ink); }
.ocup__media { display: block; aspect-ratio: 16 / 10; }
.ocup__body { display: block; padding: 16px 18px 18px; }
.ocup__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ocup__price { display: block; margin-top: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }

/* The paid chip and the card footnote sit inside the inverting order card,
   so they take their colour from it. */
.ocpaid {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ocpaid__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.oc__paidnote { font-size: 12.5px; opacity: .58; margin: 14px 0 0; }

@media (max-width: 1180px) {
  .oc { grid-template-columns: 1fr; }
  .oc__title { font-size: 48px; }
}
@media (max-width: 980px) {
  .oc__pair { grid-template-columns: 1fr; }
  .ocup__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .oc__statement { flex-direction: column; gap: 20px; }
  .oc__tick { width: 58px; height: 58px; }
  .oc__title { font-size: 36px; }
  .octrack { padding: 28px 22px 24px; }
  .occard, .ocup { padding: 26px 22px; }
  .ocup__grid { grid-template-columns: 1fr; }
  /* The date column would squeeze the copy to nothing — it moves under it. */
  .octrack__row { grid-template-columns: 34px minmax(0, 1fr); }
  .octrack__when { grid-column: 2; text-align: left; padding: 0 0 22px; }
  .octrack__body { padding-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   16k. Shop — catalogue, filters, product cards, pagination
   -------------------------------------------------------------------------- */
.shop { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; }
/* Sticky rail. With four cards it can outgrow a short laptop viewport, and a
   stuck element taller than the screen puts its own bottom out of reach — the
   cap gives the rail its own scroll instead. On tall screens it never triggers. */
.shop__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.shop__filter {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 20px;
  padding: 22px 22px 24px;
}
.shop__filterhead {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.shop__filter .cform__field + .cform__field { margin-top: 12px; }
.shop__hint { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin: 14px 0 0; }
.shop__pricelabel { font-size: 15px; font-weight: 700; margin: 12px 0 0; }
.shop__check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink-3);
  cursor: pointer;
}
.shop__check input { accent-color: var(--accent); }
/* The range track was authored for the dark Finance band; on this cream card
   it needs the dark-on-light value instead. Tie it to the surface, not the page. */
.shop__filter input[type=range].fin { background: rgba(var(--hairline-rgb), .18); }

/* Fitting promo — the one dark card closing the filter rail. It is a
   container, not a control, so it inverts to cream in dark like the other
   emphasis cards; the accent arrow stays accent in both. */
.shopfit {
  background: var(--surface-emph);
  color: var(--on-emph);
  border-radius: 20px;
  padding: 26px 22px 24px;
}
[data-theme="dark"] .shopfit { background: var(--on-emph); color: #171512; }
.shopfit__eyebrow {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0;
}
.shopfit__head { font-size: 21px; font-weight: 800; letter-spacing: -.022em; line-height: 1.1; margin: 13px 0 0; }
.shopfit__copy { font-size: 13.5px; line-height: 1.6; opacity: .72; margin: 11px 0 0; }
.shopfit__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}
.shopfit__link:hover { color: inherit; }
.shopfit__link .btn__arrow { width: 28px; height: 28px; transition: transform .2s ease; }
.shopfit__link:hover .btn__arrow { transform: translateX(3px); }

.shop__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .12);
}
.shop__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.shop__tools { display: flex; align-items: center; gap: 16px; }
.shop__count { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}
[data-per-row="4"] .shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.shopcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.shopcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.shopcard__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
/* The card's photo and title are the way into the product page — the card
   itself cannot be one link, because the Add button lives inside it. */
.shopcard__media { display: block; }
.shopcard__name a { color: var(--text-primary); }
.shopcard__name a:hover { color: var(--ink-4); }
.shopcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Both sit on the photo, so they keep their polarity in dark. */
.shopcard__cat,
.shopcard__flag {
  position: absolute;
  top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.shopcard__cat { left: 12px; background: rgba(18, 16, 14, .78); color: #F1EEE7; }
.shopcard__flag { right: 12px; }
.shopcard__flag--oem { background: rgba(251, 250, 245, .92); color: #171512; }
.shopcard__flag--sale { background: var(--accent); color: var(--on-accent); }
.shopcard__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 18px; }
.shopcard__name { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.shopcard__fits { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 8px 0 0; }
.shopcard__stock { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); margin: 10px 0 0; }
.shopcard__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.shopcard__stock--ok .shopcard__dot { background: #4c9a5a; }
.shopcard__stock--low .shopcard__dot { background: var(--accent); }
.shopcard__stock--order .shopcard__dot { background: var(--ink-2); }
.shopcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.shopcard__price { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.shopcard__was { font-size: 13px; font-weight: 500; color: var(--ink-2); text-decoration: line-through; margin-left: 8px; }
.shopcard__add {
  padding: 9px 16px;
  border: 1px solid rgba(var(--hairline-rgb), .24);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.shopcard__add:hover { border-color: var(--ink); }
.shopcard__add[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }

.shop__empty { padding: 40px 0; font-size: 16px; color: var(--ink-3); }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
}
.pager__range { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.pager__pages { display: flex; gap: 8px; }
.pager__btn {
  /* Flex-centred so an icon child sits in the middle of the circle rather
     than on the text baseline. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same 42px circle as the arrows either side of them. */
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.pager__btn[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--page); font-weight: 700; }
.pager__btn:disabled { opacity: .32; cursor: default; }
.pager__btn--arrow { width: 42px; min-width: 42px; height: 42px; padding: 0; border-radius: 50%; }

@media (max-width: 1180px) {
  .shop { grid-template-columns: 1fr; }
  .shop__side { position: static; max-height: none; overflow: visible; }
  .shop__grid,
  [data-per-row="4"] .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shop__grid,
  [data-per-row="4"] .shop__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16i. Service route — nine cards, booking block
   -------------------------------------------------------------------------- */
.svc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.svc {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.svc__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sits on a photo scrim, so it keeps the dark fill and light text in both
   themes rather than inverting. */
.svc__badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(18, 16, 14, .78);
  color: #F1EEE7;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.svc__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.svc__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.svc__desc { font-size: 14.5px; line-height: 1.58; color: var(--ink-3); margin: 10px 0 0; }
.svc__spec {
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 14px 0 0;
}
/* Pinned to the bottom so price and duration line up across a row. */
.svc__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}
.svc__price { font-size: 22px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.svc__dur { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 5px 0 0; }
.svc__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid rgba(var(--hairline-rgb), .24);
  border-radius: 50%;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.svc__go:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.svcbook {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}
.svcbook__side { display: flex; flex-direction: column; gap: 24px; }

/* Emphasis card — inverts to cream in dark, hairlines and muted numerals
   flipping with it; the accent 01 stays accent in both. */
.svcrun {
  background: var(--surface-emph);
  color: var(--on-emph);
  border-radius: 26px;
  padding: 32px 30px;
}
[data-theme="dark"] .svcrun { background: var(--on-emph); color: #171512; }
.svcrun__head { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 12px 0 22px; }
.svcrun__row {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(241, 238, 231, .16);
}
[data-theme="dark"] .svcrun__row { border-top-color: rgba(23, 21, 18, .16); }
.svcrun__num { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .1em; opacity: .5; }
.svcrun__row--first .svcrun__num { color: var(--accent); opacity: 1; }
.svcrun__title { display: block; font-size: 15px; font-weight: 700; }
.svcrun__copy { display: block; font-size: 13.5px; line-height: 1.55; opacity: .72; margin-top: 5px; }

.svcknow {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  padding: 28px 28px 26px;
}
.svcknow__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.svcknow__row { display: flex; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }

@media (max-width: 1180px) {
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svcbook { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .svc__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16j. Terms route — numbered sections, sticky index
   -------------------------------------------------------------------------- */
.trm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
}
.trm__row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 44px;
  padding: 34px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  /* Anchors have to clear the sticky header. */
  scroll-margin-top: 120px;
}
.trm__num { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); margin: 0; }
.trm__title { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 10px 0 0; }
/* Flagged rather than buried: these four genuinely restrict expectations. */
.trm__flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trm__flagdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* Body copy fills its column — deliberately not width-capped. */
.trm__p { font-size: 16px; line-height: 1.72; color: var(--ink-3); margin: 0 0 14px; }
.trm__p:last-child { margin-bottom: 0; }
.trm__close {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.trm__aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 22px; }
.toc__list { display: block; margin-top: 12px; }
.toc__row {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 14px;
  color: var(--ink-2);
}
.toc__row:hover { color: var(--ink); }
.toc__num { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .1em; opacity: .7; }
.toc__title { flex: 1; }

@media (max-width: 1180px) {
  .trm__grid { grid-template-columns: 1fr; gap: 34px; }
  .trm__aside { position: static; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .trm__row { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; }
  .trm__title { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   16h. Pricing route — billing toggle, plan cards, comparison table
   -------------------------------------------------------------------------- */
.prc__billing {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 34px;
}
.prc__seg {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .14);
  border-radius: 999px;
}
.prc__segbtn {
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.prc__segbtn[aria-pressed="true"] { background: var(--ink); color: var(--page); font-weight: 700; }
.prc__save {
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* stretch, not start — otherwise the three cards end ragged. */
.prc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.prc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 24px;
  padding: 34px 30px 30px;
}
/* The one high-contrast card in the row: dark on the light page, and it
   inverts to cream in dark so the emphasis survives the theme flip. */
.prc__card--featured {
  background: var(--surface-emph);
  color: var(--on-emph);
  border-color: transparent;
  padding-top: 44px;
  box-shadow: var(--shadow-card-dark);
}
[data-theme="dark"] .prc__card--featured { background: var(--on-emph); color: #171512; }
.prc__flag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #171512;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.prc__tier { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.prc__name { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 0; }
/* Fixed height so the prices line up across all three cards. */
.prc__blurb { min-height: 44px; font-size: 14px; line-height: 1.5; opacity: .72; margin: 10px 0 0; }
.prc__price { font-size: 52px; font-weight: 800; letter-spacing: -.035em; margin: 16px 0 0; line-height: 1; }
.prc__per { font-size: 15px; font-weight: 500; opacity: .6; letter-spacing: 0; }
.prc__note { font-size: 12.5px; opacity: .62; margin: 10px 0 22px; }
.prc__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: 1px solid rgba(var(--hairline-rgb), .24);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.prc__cta:hover { background: var(--ink); color: var(--page); }
/* On the featured card the button sits on the emphasis fill, so it takes the
   opposite polarity — and flips again with the card in dark. */
.prc__cta--solid {
  background: var(--on-emph);
  border-color: transparent;
  color: #171512;
}
.prc__cta--solid:hover { background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .prc__cta--solid { background: #171512; color: var(--on-emph); }
[data-theme="dark"] .prc__cta--solid:hover { background: var(--accent); color: var(--on-accent); }
.prc__inc {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--hairline-rgb), .12);
}
.prc__card--featured .prc__inc { border-top-color: rgba(241, 238, 231, .16); }
[data-theme="dark"] .prc__card--featured .prc__inc { border-top-color: rgba(23, 21, 18, .16); }
.prc__feats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.prc__feat { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.45; }
.prc__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.prc__group {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding: 26px 30px;
  border: 1px solid rgba(var(--hairline-rgb), .14);
  border-radius: 26px;
}
.prc__groupicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.prc__groupbody { flex: 1 1 320px; }
.prc__grouptitle { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.prc__groupcopy { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); margin: 7px 0 0; }
.prc__groupbtn {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border: 1px solid rgba(var(--hairline-rgb), .28);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.prc__groupbtn:hover { background: var(--ink); color: var(--page); }

/* Comparison table — same construction as /compare. */
.prct__scroll { min-width: 0; }
.prct__row {
  display: grid;
  grid-template-columns: minmax(220px, 300px) repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 15px 20px;
  align-items: center;
}
.prct__row--head { padding-bottom: 18px; }
.prct__head { font-size: 16px; font-weight: 700; }
.prct__head--featured { color: var(--accent); }
.prct__body {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  overflow: hidden;
}
.prct__body .prct__row + .prct__row { border-top: 1px solid rgba(var(--hairline-rgb), .09); }
.prct__body .prct__row:nth-child(even) { background: rgba(var(--hairline-rgb), .03); }
.prct__labeltext { display: block; font-size: 15px; font-weight: 600; }
.prct__note { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.prct__val { font-size: 15px; font-weight: 600; }
.prct__cell--no { color: var(--ink-2); opacity: .55; }

@media (max-width: 1100px) {
  .prct { overflow-x: auto; }
  .prct__scroll { min-width: 860px; }
  .prct__row { grid-template-columns: 220px repeat(3, minmax(150px, 1fr)); }
  .prct__label { position: sticky; left: 0; z-index: 2; background: var(--surface); }
  .prct__row--head .prct__label { background: var(--page); }
}
@media (max-width: 1180px) {
  .prc__grid { grid-template-columns: 1fr; }
  .prc__card--featured { padding-top: 44px; }
}

/* --------------------------------------------------------------------------
   16g. Auth overlays — sign in / sign up
   -------------------------------------------------------------------------- */
.auth {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow-y: auto;
}
.auth[hidden] { display: none; }
/* The scrim is a shade, not a surface — it never inverts. Only the dialog's
   shadow deepens in dark. */
.auth__scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 21, 18, .6);
  backdrop-filter: blur(3px);
}
.auth__dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  /* Sections carry the ink token; these dialogs mount outside every section,
     so without this headings fall back to #000 / #fff instead of the palette. */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 26px;
  padding: 44px 46px 40px;
  box-shadow: 0 40px 90px -30px rgba(23, 21, 18, .45);
}
[data-theme="dark"] .auth__dialog { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
.auth__dialog--wide { max-width: 560px; }

.auth__close {
  position: absolute;
  top: 22px; right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.auth__close:hover { background: var(--ink); color: var(--surface); }

.auth__title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.auth__sub { font-size: 15px; color: var(--ink-3); margin: 12px 0 26px; }
.auth__switch {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  cursor: pointer;
}
.auth__switch:hover { color: var(--accent); }

.auth__social { display: grid; gap: 10px; }
.auth__soc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 50px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 12px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s ease;
}
.auth__soc:hover { border-color: rgba(var(--hairline-rgb), .45); }

.auth__div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.auth__div::before,
.auth__div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--hairline-rgb), .14);
}

.auth__form { display: grid; gap: 16px; }
.auth__field { display: flex; flex-direction: column; }
.auth__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth__forgot {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.auth__forgot:hover { color: var(--accent); }

.auth__pass { position: relative; display: flex; }
.auth__pass .tin { width: 100%; padding-right: 46px; }
.auth__eye {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.auth__eye:hover { color: var(--ink); }
.auth__eye .auth__eyeoff { display: none; }
.auth__eye[aria-pressed="true"] .auth__eyeon { display: none; }
.auth__eye[aria-pressed="true"] .auth__eyeoff { display: block; }

.auth__meter { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.auth__bars { display: flex; gap: 5px; flex: 1; }
.auth__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--hairline-rgb), .16);
  transition: background .2s ease;
}
.auth__bar.is-on { background: var(--accent); }
.auth__score {
  flex: 0 0 56px;
  text-align: right;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.auth__keep {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
  cursor: pointer;
}
.auth__keep input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.auth__keep a { color: var(--ink); text-decoration: underline; }
.auth__submit { width: 100%; margin-top: 4px; }
.auth__legal { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); text-align: center; margin: 22px 0 0; }
.auth__legal a { color: var(--ink); text-decoration: underline; }

@media (max-width: 560px) {
  .auth { padding: 18px; align-items: flex-start; }
  .auth__dialog { padding: 34px 22px 28px; }
  .auth__title { font-size: 27px; }
  .auth__pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   16e. Compare route — slots, spec table, verdict
   All three blocks share one track definition so their columns line up.
   -------------------------------------------------------------------------- */
.cmp__scroll { min-width: 0; }
.cmp__grid,
.cmp__row {
  display: grid;
  grid-template-columns: minmax(200px, 240px) repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.cmp__lead { align-self: end; }
.cmp__leadlabel {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.cmp__leadhelp { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 10px 0 0; }

.cmp__slot {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  padding: 16px 16px 18px;
}
.cmp__media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: 16px;
}
.cmp__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim over a photo: dark fill keeps light text in both themes. */
.cmp__badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(251, 250, 245, .92);
  color: var(--ink);
}
[data-theme="dark"] .cmp__badge { background: rgba(18, 16, 14, .78); }
.cmp__make {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.cmp__model { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; }
.cmp__price { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 10px 0 0; }
.cmp__monthly { font-size: 13px; color: var(--ink-2); margin: 4px 0 14px; }
.cmp__select { width: 100%; }

.cmp__table {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  margin: 26px 0;
  overflow: hidden;
}
.cmp__row { padding: 16px 20px; align-items: center; }
.cmp__row + .cmp__row { border-top: 1px solid rgba(var(--hairline-rgb), .09); }
.cmp__row:nth-child(even) { background: rgba(var(--hairline-rgb), .03); }
.cmp__labeltext {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cmp__note { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.cmp__cell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp__figure { font-size: 19px; font-weight: 600; }
.cmp__figure span { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 3px; }
.cmp__cell--best .cmp__figure { font-weight: 800; }
.cmp__cell--na { color: var(--ink-2); font-size: 19px; }
.cmp__best {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cmp__bestdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.cmp__verdict {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.cmp__cta { display: flex; }
.cmp__cta .btn { width: 100%; }
.cmp__btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 53px;
  padding: 0 22px;
  border: 1px solid rgba(var(--hairline-rgb), .28);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  transition: background .2s ease, color .2s ease;
}
.cmp__btn-ghost:hover { background: var(--ink); color: var(--page); }

/* A comparison that stacks stops being a comparison — scroll it instead,
   with the label column pinned so you never lose which row you are reading. */
@media (max-width: 1100px) {
  .cmp { overflow-x: auto; }
  .cmp__scroll { min-width: 900px; }
  .cmp__grid, .cmp__row { grid-template-columns: 180px repeat(3, minmax(180px, 1fr)); }
  .cmp__lead, .cmp__label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--page);
  }
  .cmp__row .cmp__label { background: var(--surface); }
}

/* --------------------------------------------------------------------------
   16f. FAQ route — filter bar, accordion, sidebar
   -------------------------------------------------------------------------- */
.faqbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(var(--hairline-rgb), .12);
}
.faqbar__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.fpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(var(--hairline-rgb), .22);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.fpill:hover { border-color: rgba(var(--hairline-rgb), .5); }
.fpill__n { font-family: var(--font-mono); font-size: 10px; opacity: .6; }
/* Active pill is a control, so it inverts with the theme like .btn does. */
.fpill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
  border-color: var(--ink);
  font-weight: 700;
}
/* Fixed 340px so its right edge lines up with the sidebar below — do not flex. */
.faqbar__search { position: relative; flex: 0 0 340px; display: flex; }
.faqbar__icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}
.faqbar__input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.faqbar__input::placeholder { color: var(--ink-placeholder); }
.faqbar__input:focus { border-color: var(--ink); outline: none; }

.faqp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: start;
  margin-top: 34px;
}

/* Bounded top and bottom by hairlines. */
.facc__item { border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.facc__item:last-of-type { border-bottom: 1px solid rgba(var(--hairline-rgb), .12); }
.facc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.facc__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.facc__idx { flex: none; width: 31px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.facc__btn[aria-expanded="true"] .facc__idx { color: var(--accent); }
.facc__q { flex: 1; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.facc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid rgba(var(--hairline-rgb), .22);
  border-radius: 50%;
  color: var(--ink);
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
/* The + becomes a × and fills with accent; the glyph stays dark in both
   themes because the accent never flips. */
.facc__btn[aria-expanded="true"] .facc__icon {
  transform: rotate(45deg);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* Indented past the index column so the copy aligns with the question. */
.facc__panel { padding: 0 0 26px 47px; }
.facc__a { max-width: 760px; font-size: 16px; line-height: 1.68; color: var(--ink-3); margin: 0; }
.facc__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 18px 0 0; }
.facc__chip {
  padding: 5px 12px;
  border: 1px solid rgba(var(--hairline-rgb), .2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.facc__link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.facc__link:hover { color: var(--accent); }
.facc__linkarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.facc__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 44px 0; }
.facc__emptytitle { font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.facc__emptyhelp { max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--ink-3); }

.faqside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 22px; }
/* Emphasis card: dark in light theme, and it inverts to cream in dark — the
   same deliberate exception as "Transparent pricing". Hairlines flip with it. */
.faqside__emph {
  background: var(--surface-emph);
  color: var(--on-emph);
  border-radius: 22px;
  padding: 30px 28px;
}
[data-theme="dark"] .faqside__emph { background: var(--on-emph); color: #171512; }
.faqside__eyebrow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 0; }
.faqside__title { font-size: 26px; font-weight: 800; letter-spacing: -.025em; margin: 12px 0 0; }
.faqside__copy { font-size: 14px; line-height: 1.6; opacity: .78; margin: 12px 0 0; }
.faqside__rows { margin: 22px 0 0; }
.faqside__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(241, 238, 231, .16);
  font-size: 14px;
}
[data-theme="dark"] .faqside__row { border-top-color: rgba(23, 21, 18, .16); }
.faqside__row dt { opacity: .7; }
.faqside__row dd { margin: 0; font-weight: 600; }
.faqside__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 700;
}
.faqside__btn:hover { background: var(--accent-hover); color: var(--on-accent); }
.faqside__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--accent);
}
.faqside__card {
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 22px;
  padding: 26px 26px 10px;
}
.faqside__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid rgba(var(--hairline-rgb), .1);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.faqside__card .faqside__link:first-of-type { margin-top: 14px; }
.faqside__link span { opacity: .35; transition: opacity .2s ease, transform .2s ease; }
.faqside__link:hover { color: var(--accent); }
.faqside__link:hover span { opacity: 1; transform: translateX(3px); }

@media (max-width: 1180px) {
  .faqp__grid { grid-template-columns: 1fr; gap: 34px; }
  .faqside { position: static; }
  .faqbar__search { flex: 1 1 260px; }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .facc__q { font-size: 18px; }
  .facc__panel { padding-left: 0; }
  .faqbar { gap: 18px; }
}

/* --------------------------------------------------------------------------
   16d. Error 404
   -------------------------------------------------------------------------- */
.err { position: relative; overflow: hidden; padding: 64px var(--pad-x) 104px; }
.err > *:not(.about-intro__ghost) { position: relative; z-index: 1; }
/* Load-bearing: this is what clears the 220px wordmark band above. Do not
   remove it, and do not shrink the wordmark instead. */
.err__grid {
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: 48px;
  align-items: center;
  padding-top: 96px;
}
.err__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: clamp(96px, 15vw, 220px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
}
.err__num .tw-outline { -webkit-text-stroke-width: 2.5px; }
.err__num .tw-accent { -webkit-text-stroke-width: 2px; }
.err__title {
  max-width: 700px;
  margin: 34px 0 0;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.err__copy { max-width: 560px; margin: 18px 0 0; font-size: 17px; line-height: 1.62; color: var(--ink-3); }
.err__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.err__ghostbtn {
  display: inline-flex;
  align-items: center;
  height: 53px;
  padding: 0 24px;
  border: 1px solid rgba(var(--hairline-rgb), .28);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: background .2s ease, color .2s ease;
}
.err__ghostbtn:hover { background: var(--ink); color: var(--page); }

.err__search { display: flex; gap: 10px; max-width: 660px; margin-top: 30px; }
.err__searchwrap { position: relative; flex: 1; display: flex; }
.err__searchicon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-2);
  pointer-events: none;
}
.err__input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 44px;
  border: 1px solid rgba(var(--hairline-rgb), .18);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.err__input::placeholder { color: var(--ink-placeholder); }
.err__input:focus { border-color: var(--ink); outline: none; }
.err__searchbtn {
  flex: none;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: var(--page);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.err__searchbtn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--page)); }

/* The car is wide enough to reach under the copy, so the text column is
   lifted above it — the car reads as a backdrop, not an overlay. */
.err__left { position: relative; z-index: 2; }
.err__right {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.err__watermark {
  position: absolute;
  /* "DEAD END" renders ~5.07× its font-size wide and is centred on the car,
     which sits right of the page centre — so the right edge is what runs out
     of room first. 13.5vw keeps it inside at every width (261px was the limit
     at 1920, where a flat 290px overhung by 71px); the 290px cap stops it
     growing further on ultrawide screens. */
  font-size: min(290px, 13.5vw);
  font-weight: 800;
  letter-spacing: -.04em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--hairline-rgb), .1);
  /* Anchored to the column's right edge, which is the page gutter — the word
     now ends on the same vertical line as the stats and the + Add Listing
     pill instead of overhanging it. Centring it on the car put the final D
     past that line at every width. */
  left: auto;
  right: 0;
  transform: translateY(-120px);
  pointer-events: none;
  user-select: none;
}
/* Taken out of flow entirely. As an in-flow flex item a 1200px car became the
   column's min-content width, the grid handed it the space, and the left
   column collapsed from ~614px to 385px — which silently capped every
   max-width on the copy. Absolute keeps the car a pure visual layer. */
.err__right picture {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1200px, 88vw);
}
.err__car {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: auto;
  /* Order matters: scaleX first would flip the axis and send the -150px the
     other way, pushing the car off the right edge instead of bleeding left. */
  transform: translate(-150px, 70px) scaleX(-1);
}

.err__links { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(var(--hairline-rgb), .12); }
.err__linkslabel { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 22px; }
.err__linksgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lcard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid rgba(var(--hairline-rgb), .12);
  border-radius: 18px;
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); color: var(--ink); }
.lcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  flex: none;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.lcard__body { flex: 1; min-width: 0; }
.lcard__title { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.lcard__sub { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 4px; }
.lcard__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

/* Contact + 404 — responsive */
@media (max-width: 1180px) {
  .chgrid { grid-template-columns: 1fr; }
  .cform { grid-template-columns: 1fr; }
  .err__grid { grid-template-columns: 1fr; padding-top: 72px; }
  .err__right { min-height: 300px; order: -1; }
  .err__car { transform: scaleX(-1); }
  .err__watermark { transform: translateY(-70px); }
  .err__linksgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cform__card { padding: 32px 24px 34px; }
  .cform__head { flex-direction: column; }
  .cform__grid { grid-template-columns: 1fr; }
  .cform__title { font-size: 30px; }
  .faq__row { grid-template-columns: 1fr; gap: 12px; }
  .err { padding: 48px var(--pad-x) 72px; }
  .err__search { flex-direction: column; }
  .err__searchbtn { height: 48px; }
  .err__linksgrid { grid-template-columns: 1fr; }
  .office { padding: 30px 24px; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   The prototype is desktop-only (~1920px). Collapses follow the README's
   "Not yet designed" recommendations.
   -------------------------------------------------------------------------- */
@media (max-width: 1600px) {
  .hero__title { font-size: 64px; }
  .cta__title { font-size: 62px; }
  .footer__title { font-size: 44px; }
}

@media (max-width: 1360px) {
  :root { --pad-x: 40px; }
  .nav { gap: 22px; }
  .sec-title, .section--listings { padding-top: 56px; }
.split-head--listings { margin-bottom: 34px; }
.listings__intro { max-width: 640px; }

.listings__title { font-size: 50px; }
  .trade__range { font-size: 52px; }
  .brands__row { gap: 24px; }
}

/* 1181–1300px: the burger only appears at 1180, so the desktop header is
   still on — but the wordmark, six menus and the action cluster together
   demand 1270px, and every page scrolled sideways across this whole band.
   Tighten the gaps and the wordmark rather than dropping a laptop to the
   mobile menu. */
@media (min-width: 1181px) and (max-width: 1300px) {
  .header { gap: 20px; }
  .nav { gap: 16px; }
  .header__actions { gap: 14px; }
  .logo__svg { height: 40px; }
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .navtoggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* .header is a flex row and the wordmark is 218px wide. Without this the
       button shrinks below its own width on narrow phones — at 375px it
       collapsed to 14px and the icon inside rendered 0x0. */
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 1px solid var(--line-16);
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    margin-left: auto;
  }
  .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: var(--pad-x);
    right: var(--pad-x);
    margin: 0;
    padding: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--line-10);
    border-radius: 18px;
    box-shadow: var(--shadow-menu);
  }
  .nav.is-open .navitem { width: 100%; }
  .nav.is-open .nav__link { padding: 12px 10px; width: 100%; }
  /* No hover on touch: the six panels and their flyouts all render open,
     stacked and indented, so every demo page is reachable by scrolling. */
  .nav.is-open .dropdown,
  .nav.is-open .flyout {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0 0 0 12px;
    min-width: 0;
  }
  .nav.is-open .dropdown::before,
  .nav.is-open .flyout::before { display: none; }
  /* The flyout nests one level deeper than its parent row. */
  .nav.is-open .flyout { padding-left: 22px; }
  .nav.is-open .hassub { display: block; }
  .nav.is-open .hassub__btn > svg { display: none; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__cell:nth-child(odd) { border-left: none; }
  .stats__cell:nth-child(n+3) { border-top: 1px solid var(--line-12); }

  /* Six wordmarks stop fitting one row here. Grid rather than wrapped flex:
     the tiles hold nowrap text, so min-width:auto kept them from shrinking and
     a calc() basis landed on exactly 100% — the last tile dropped to its own
     line. Grid tracks divide the row without that rounding trap. */
  .brands__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tile--feature { grid-column: span 2; grid-row: auto; height: 380px; }
  /* A .tile has no intrinsic height — everything inside it is absolutely
     positioned. Once .bento switched to auto rows the row box collapsed and
     all six cards rendered 0px tall, i.e. the block vanished between 861 and
     1180px. The row has to state its own track height. */
  .bento__row { grid-column: span 2; grid-auto-rows: 240px; }

  .picker__grid { grid-template-columns: repeat(4, 1fr); }
  .finance__sliders { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .trade__grid { grid-template-columns: 1fr; }
  .cities { grid-template-columns: repeat(4, 1fr); }
  .cta__car { width: 74%; opacity: .35; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__title { white-space: normal; font-size: 38px; }
  .section--listings { padding-top: 56px; }
.split-head--listings { margin-bottom: 34px; }
.listings__intro { max-width: 640px; }

.listings__title { white-space: normal; }
}

@media (max-width: 980px) {
  .pgal .pdp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --pad-x: 22px; }
  .section { padding-bottom: 72px; }
  .header { gap: 16px; }
  .header__actions .btn--cta { display: none; }

  .hero { padding-bottom: 56px; }
  .hero__card { padding: 28px 22px 26px; border-radius: 24px; }
  .hero__top { flex-direction: column; gap: 18px; }
  .hero__prices { text-align: left; }
  .hero__title { font-size: 44px; }
  .hero__price { font-size: 38px; }
  /* The stage stacks: car first, then both icon rails as one wrapped row. */
  .stage {
    flex-direction: column;
    min-height: 0;
    gap: 14px;
    margin: 16px 0 24px;
  }
  /* Car sits in normal flow here, so the wrapper takes its exact height —
     a fixed aspect-ratio left a gap under the car on tablets. */
  .stage__carwrap { width: 100%; aspect-ratio: auto; }
  .stage__car {
    position: static;
    transform: none;
    width: 100%;
    height: auto;      /* keeps the car in proportion — 100% stretched it */
    max-width: 100%;
  }
  .stage__watermark span { font-size: 8.6vw; }
  .rail {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .rail__btn { width: 44px; height: 44px; }
  .picker { padding: 20px 16px 22px; }
  .picker__head { flex-direction: column; align-items: flex-start; }
  .picker__grid { grid-template-columns: repeat(2, 1fr); }
  /* Seven cells leave a lone card in the last row on a 2-column grid —
     drop the last one so the block ends flush at 3 × 2. "All body styles"
     above the grid still reaches the full list. */
  .picker__grid .body-style:last-child { display: none; }
  .btn--float { font-size: 15px; }

  .sec-title, .listings__title,
  .cta__title, .brands__title { font-size: 34px; }
  .footer__title { font-size: 28px; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats__cell { border-left: none !important; }
  .stats__cell + .stats__cell { border-top: 1px solid var(--line-12); }

  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  /* The rows must dissolve, not stack inside themselves. grid-auto-rows binds
     to .bento's direct children, so a .bento__row kept as a box held all three
     of its tiles inside one 240px cell — 67px each, badge overlapping the car
     name. display:contents promotes the tiles to grid items in their own right,
     one 240px row apiece. */
  .bento__row { display: contents; }
  .tile--feature { grid-column: auto; height: 300px; }
  .tile__headline { font-size: 30px; }

  .split-head { flex-direction: column; align-items: flex-start; }
  .listings__aside { align-items: flex-start; }

  .finance__card { padding: 32px 22px; border-radius: 22px; }
  .finance__sliders { grid-template-columns: 1fr; }
  .finance__result { text-align: left; }

  /* Stack the estimate panel: copy, then car, then button. Overlapping the
     car behind the text only works when the panel is wide. */
  .trade__estimate {
    padding: 24px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .trade__estimate picture { display: contents; }
  .trade__estimate-head { order: 1; }
  .trade__car {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    opacity: 1;
  }
  .trade__accept {
    position: static;
    order: 3;
    align-self: flex-start;
  }
  .trade__range { font-size: clamp(26px, 7.6vw, 34px); }
  .gauge-panel { flex-direction: column; align-items: flex-start; }
  .gauge-panel__body { width: 100%; }

  .showrooms__title { margin-bottom: 30px; }

.map { height: 400px; }
  .flagship { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px; }
  .cities { grid-template-columns: repeat(2, 1fr); }

  /* Same treatment as the trade-in panel: copy first, car underneath. */
  .cta__card {
    padding: 32px 22px;
    display: flex;
    flex-direction: column;
  }
  .cta__card picture { display: contents; }
  .cta__body { order: 1; }
  .cta__car {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 24px;
    opacity: 1;
  }
  .brands__card { padding: 32px 20px; }
  .brands__row { grid-template-columns: repeat(2, 1fr); }
  /* Two 134px tracks plus the gap came to exactly the row width; a smaller
     wordmark leaves the pair real breathing room. */
  .brands__logo { font-size: 13px; }
  .footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .btn--talk { width: auto; }
}

/* --------------------------------------------------------------------------
   17a. Phones — the header row stops fitting
   At 25px the wordmark alone is 218px; with the menu button and the two icon
   buttons the row needs ~390px of a 331px content box. The button no longer
   shrinks (see .navtoggle above), so the wordmark gives way instead.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The wordmark is 6.9× as wide as it is tall, so its height is what has to
     give — at 45px it needs 312px and the row only has ~346px for logo,
     burger and the two icon buttons together. */
  .logo__svg { height: 34px; }
}
@media (max-width: 560px) {
  .header { gap: 12px; }
  .logo { gap: 10px; }
  .logo__svg { height: 26px; }
  .header__actions { gap: 14px; }
}
@media (max-width: 400px) {
  .logo__svg { height: 23px; }
}

/* --------------------------------------------------------------------------
   17b. Short viewports — fit the hero on 1080p-class screens
   The handoff was drawn for tall displays: at 1920×1080 the hero ran 197px
   past the fold. Trimmed by height, not width, so wide-but-short screens
   (1920×1080, 1680×1050, laptops) show the whole configurator.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) and (max-height: 1150px) {
  .hero { padding-bottom: 56px; }
  .hero__card { padding: 28px 44px 24px; }

  .hero__title { font-size: 58px; }
  .hero__subtitle { margin-top: 10px; font-size: 17px; }
  .hero__top .pill { margin-top: 12px; }
  .hero__price { font-size: 44px; }
  .hero__monthly { margin-top: 8px; font-size: 16px; }

  .stage { min-height: 0; margin: 0 0 14px; }
  /* Lift only the search box itself — the hero card keeps its height,
     so nothing below it shifts. */
  .page-v2 .searchpanel { position: relative; top: -20px; }
  /* The stage's height comes from this box's aspect-ratio, not min-height. */
  .stage__carwrap { width: 62%; max-width: 740px; }
  .stage__car { width: 1050px; top: 102px; }   /* sits low, just above the picker */
  .stage__watermark span { font-size: min(150px, 8.2vw); }
  .stage__watermark { margin-top: -40px; }
  .rail__btn { width: 44px; height: 44px; }
  .rail { gap: 12px; }

  .picker { padding: 18px 24px 20px; }
  .picker__head { margin-bottom: 14px; }
  .picker__grid { gap: 12px; }
  .body-style { padding: 10px 8px 14px; gap: 8px; }

  .btn--float { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   18. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tmarquee-track,
  .fmarquee,
  .ctapulse { animation: none !important; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .rail, .hero__float, .ticker { display: none; }
  body { background: #fff; }
}

/* The detail pages' showroom map is a live Leaflet canvas now, not a
   drawn placeholder — it needs a height and the same rounded bed the
   other maps use. */
.detloc__map, .detmap__map { position: relative; overflow: hidden; background: var(--map-bed); }
.detloc__map { min-height: 340px; border-radius: 24px; }
.detloc__map .leaflet-container, .detmap__map .leaflet-container { height: 100%; background: var(--map-bed); }

/* Our dealers — a mark beside the name, in the same outlined pill the
   marque row used. The logo is an SVG, so it stays sharp at any size. */
.brands__mark { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.brands__item { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Avatar and logo boxes that used to be empty now hold an image, so they
   have to clip it. They never carried the .ph class, which is why the
   placeholder audit did not see them. */
.detav, .detseller__logo, .dosseller__logo, .twseller__logo,
.dashnav__logo, .dashinq__av, .profteam__av { overflow: hidden; }
.detav > .shot > img, .detseller__logo > .shotsvg, .dosseller__logo > .shotsvg,
.twseller__logo > .shotsvg, .dashnav__logo > .shotsvg,
.dashinq__av > .shot > img, .profteam__av > .shot > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* listing-map-v1: the drawn bed became a live Leaflet canvas. The pins are
   markers now, so they position themselves and must not keep the absolute
   left/top the percentage version used. */
.lmap__bed { position: absolute; inset: 0; background: var(--map-bed); }
.lmap__bed .leaflet-container { height: 100%; background: var(--map-bed); }
.lmap__marker { width: 0; height: 0; overflow: visible; }
.lmap__marker .lmap__pin { position: absolute; left: 0; top: 0; }
/* The overlay that used to hold them keeps its place in the DOM but must
   not sit over the map and swallow drags. */
.lmap__pins { pointer-events: none; }

/* The selected car's thumbnail on the map card. */
.lmapsel__media, .lmap2sel__media { overflow: hidden; border-radius: 12px; }
.lmapsel__media > .shot > img, .lmap2sel__media > .shot > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* listing-map-v2: the drawn bed became a live Leaflet canvas, and the pins
   are markers that position themselves. */
.lmap2__bed { position: absolute; inset: 0; z-index: 0; background: var(--map-bed); }
.lmap2__bed .leaflet-container { height: 100%; background: var(--map-bed); }
.lmap2__marker { width: 0; height: 0; overflow: visible; }
.lmap2__marker .lmap2__pin { position: absolute; left: 0; top: 0; }
/* The old overlay keeps its place but must not swallow drags. */
.lmap2__pins { pointer-events: none; }
/* Everything drawn ON the map stays light in both themes — the panel,
   the zoom buttons and the attribution alike. */
.lmap2__bed .leaflet-control-attribution { background: rgba(251, 250, 245, .85); color: #6f6c62; }
.lmap2__bed .leaflet-control-attribution a { color: #171512; }

/* listing-map-v3: the band is a live Leaflet canvas; its pins are markers. */
.lmap3__bed { position: absolute; inset: 0; z-index: 0; background: var(--map-bed); }
.lmap3__bed .leaflet-container { height: 100%; background: var(--map-bed); }
.lmap3__marker { width: 0; height: 0; overflow: visible; }
.lmap3__marker .lmap3__pin { position: absolute; left: 0; top: 0; }
.lmap3__pins { pointer-events: none; }

/* Integration channel marks fill their tile like any other logo. */
.setchan__logo { overflow: hidden; }
.setchan__logo > .shotsvg { width: 100%; height: 100%; object-fit: cover; }

/* Avatars whose rounding lived on the .ph they no longer carry. The box
   keeps its border-radius, but a real <img> inside spills past it and
   shows square corners unless the box clips. */
.post__avatar, .art__portrait, .art__authorav,
.comment__avatar { overflow: hidden; }