[hidden] { display: none !important; }
/* =========================================================
   Redline Motors · inner-2026.css
   Inner pages. Tokens, header, footer and the forms layer come from site-2026.css.
   Everything below is built on those tokens: 4px spacing scale, two radii, no gradients
   (except the mask alphas in .img-fade), 14px minimum text, 44px targets, tabular prices.
   ========================================================= */

/* ---------- shared layout ---------- */
.section { padding-block: var(--section); }
.section-tight { padding-block: var(--s-7) var(--s-8); }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.fine { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); max-width: var(--measure); margin: 0; }
.on-dark .fine { color: var(--night-dim); }
.stack { display: grid; gap: var(--s-4); align-content: start; }
.stack > * { margin: 0; }
.noscript { margin: 0; padding: var(--s-4) var(--margin); background: var(--surface-2); font-size: var(--t-small); }
.pic-note { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: 2px; background: rgba(20, 23, 26, .86); color: #fff; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: .02em; pointer-events: none; z-index: 1; }
.pic-note--right { left: auto; right: var(--s-3); }
.ph { background: var(--red-tint); color: var(--red-ink); padding: 0 var(--s-1); border-radius: 2px; font-weight: 500; }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2); border-radius: 2px; background: var(--ink); color: #fff; font: 500 var(--t-meta)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.badge--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.badge--red { background: var(--red); }
.badge--sold { background: var(--muted); }
.badge--reserved { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.demo-note { margin: 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--red); background: var(--red-tint); color: var(--red-ink); font-size: var(--t-small); line-height: var(--lh-small); font-weight: 500; }

/* two-column compositions: always one column on mobile, distinct ratios on desktop */
.split { display: grid; gap: var(--s-7); }
@media (min-width: 960px) {
  .split { gap: var(--s-9); align-items: start; }
  .split--media { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
  .split--aside { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--top { align-items: start; }
  .aside-sticky { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.h1 { font: 700 clamp(2.25rem, 1.3rem + 3.6vw, 4rem)/1.04 var(--font-display); letter-spacing: -.035em; text-wrap: balance; margin: 0; }
.h2--md { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem); }

/* page head: crumbs, then h1 left and lede right */
.page-head { padding-block: var(--s-4) var(--s-7); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; padding: 0; margin: 0 0 var(--s-3); list-style: none; font: 500 var(--t-meta)/1.4 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/" / ""; margin: 0 var(--s-2); color: var(--control-line); }
.crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { color: var(--muted); text-decoration: none; padding-inline: var(--s-2); margin-inline: calc(var(--s-2) * -1); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.page-head-grid { display: grid; gap: var(--s-4); }
.page-head-grid .lede { margin: 0; }
@media (min-width: 960px) {
  .page-head { padding-block: var(--s-5) var(--s-8); }
  .page-head-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
}

/* photographs: .img-fade does the edge work, frames only set the ratio */
.photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; --fade-x: 14%; --fade-y: 20%; }
.photo picture, .photo img { width: 100%; height: 100%; }
.photo img { object-fit: cover; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 9; --fade-x: 8%; --fade-y: 18%; }
@media (max-width: 959px) { .photo--tall { aspect-ratio: 3 / 2; } }

/* closing call to action: a quiet band, one sentence and two buttons */
.cta-band { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--s-7); }
.cta-row { display: grid; gap: var(--s-5); align-items: center; }
.cta-row p { margin: 0; max-width: 28ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-actions .btn { min-height: 48px; }
@media (min-width: 720px) { .cta-row { grid-template-columns: 1fr auto; gap: var(--s-8); } }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-6); }
.head-row .h2 { margin: var(--s-2) 0 0; }

/* numbered list, drawn like the homepage steps */
.numbered { counter-reset: n; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-1) var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.numbered li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; font: 500 var(--t-small)/1.9 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--red-ink); letter-spacing: .04em; }
.numbered li span { color: var(--ink-soft); max-width: 52ch; }
.steps { counter-reset: s; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 var(--t-meta)/1.9 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--red-ink); letter-spacing: .04em; }

/* tables: hours */
.htable { width: 100%; border-collapse: collapse; }
.htable th { text-align: left; font-weight: 400; color: var(--muted); }
.htable th, .htable td { padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.htable td { text-align: right; font: 500 var(--t-body)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.addr { font: 500 var(--t-h3)/1.35 var(--font-display); font-style: normal; letter-spacing: -.01em; }
.hours-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.hours-box .status { color: var(--ink); }
.hours-box .dot { background: var(--muted); }
.hours-box .status[data-open="true"] .dot { background: var(--success); }
@media (min-width: 960px) { .hours-box { padding: var(--s-6); } }
.f-hours li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; max-width: 288px; white-space: nowrap; }

/* ---------- prose: legal + guide articles ---------- */
.prose { max-width: 66ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.15 var(--font-display); letter-spacing: -.025em; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p, .prose li { font-size: var(--t-body); line-height: 1.7; color: var(--ink-soft); }
.prose a:not(.btn) { color: var(--red-ink); }
.prose--article p.intro { font: 500 clamp(1.25rem, 1.05rem + .8vw, 1.625rem)/1.45 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.prose--article h2:first-of-type { margin-top: var(--s-8); }
.prose-sm p { max-width: 52ch; }
.ph-list { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.article-cta { padding-top: var(--s-4); }
.toc ol { padding: 0; margin: var(--s-3) 0 0; list-style: none; border-top: 1px solid var(--ink); }
.toc a { display: flex; align-items: center; min-height: 48px; padding: var(--s-1) 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; color: var(--ink-soft); }
.toc a:hover { color: var(--red-ink); }
.toc a:focus-visible { outline-offset: -2px; }
@media (max-width: 959px) { .toc { margin-bottom: var(--s-2); } }
.next-guide { display: grid; gap: var(--s-3); max-width: 720px; text-decoration: none; }
.next-guide strong { margin-top: calc(var(--s-1) * -1); transition: color var(--dur) var(--ease); }
.next-guide:hover strong { color: var(--red-ink); }
.read { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 600; color: var(--red-ink); }
.read svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
a:hover > .read svg { transform: translateX(4px); }

/* ---------- accordion (faq, warranty) ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 64px; padding: var(--s-3) 0; cursor: pointer; list-style: none; font: 600 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.25 var(--font-display); letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 24px; height: 24px; background: currentColor; color: var(--red); -webkit-mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat, linear-gradient(#000 0 0) center / 2px 14px no-repeat; mask: linear-gradient(#000 0 0) center / 14px 2px no-repeat, linear-gradient(#000 0 0) center / 2px 14px no-repeat; transition: rotate var(--dur) var(--ease); }
.faq details[open] summary::after { rotate: 90deg; -webkit-mask-size: 14px 2px, 0 0; mask-size: 14px 2px, 0 0; }
.faq summary:hover { color: var(--red-ink); }
.faq details > p { margin: 0 0 var(--s-5); max-width: 60ch; color: var(--ink-soft); font-size: var(--t-body); line-height: 1.65; }
.faq details > p a { color: var(--red-ink); }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 240ms var(--ease), content-visibility 240ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
}

/* ---------- warranty ---------- */
.levels { width: 100%; border-collapse: collapse; }
.levels thead th { text-align: left; font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--ink); }
.levels tbody th, .levels td { text-align: left; padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.levels tbody th { font-weight: 400; }
.lv-name { display: block; font: 700 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -.025em; }
.lv-big { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
@media (max-width: 719px) {
  .levels thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .levels, .levels tbody, .levels tr, .levels th, .levels td { display: block; }
  .levels tr { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
  .levels tbody th, .levels td { padding: var(--s-1) 0; border: 0; }
  .levels td { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-3); }
  .levels td::before { content: attr(data-label); color: var(--muted); font: 500 var(--t-meta)/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
  .levels tbody th { padding-bottom: var(--s-3); }
}

/* ---------- reviews ---------- */
.quote { margin: 0; display: grid; gap: var(--s-4); align-content: start; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; }
.quote .tag { display: inline-flex; width: fit-content; align-items: center; min-height: 28px; padding: 0 var(--s-2); border: 1px solid var(--control-line); border-radius: 2px; color: var(--ink); }
.quote blockquote p { font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.3 var(--font-display); letter-spacing: -.02em; text-wrap: pretty; }
.quote--lead { padding-bottom: var(--s-7); border-bottom: 1px solid var(--ink); }
.quote--lead blockquote p { font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.12; letter-spacing: -.03em; max-width: 24ch; }
.quote-pair { display: grid; gap: var(--s-7); padding-top: var(--s-7); }
.reviews-note { margin-top: var(--s-7); }
@media (min-width: 840px) {
  .quote-pair { grid-template-columns: 1fr 1fr; gap: 0; }
  .quote-pair .quote { padding-right: var(--s-8); }
  .quote-pair .quote + .quote { padding: 0 0 0 var(--s-8); border-left: 1px solid var(--line); }
}

/* ---------- about + 404 ---------- */
.about-hero .photo { width: 100%; aspect-ratio: 21 / 9; }
@media (max-width: 767px) { .about-hero .photo { aspect-ratio: 3 / 2; } }
.nf-grid { align-items: center; }
.nf .h1 { font-size: clamp(2.75rem, 1.35rem + 5.2vw, 4.75rem); }
.quick { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: var(--s-3) 0 0; list-style: none; }
.quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--control-line); border-radius: 999px; font-size: var(--t-small); font-weight: 500; text-decoration: none; }
.quick a:hover { border-color: var(--ink); background: var(--surface); }

/* ---------- guides index ---------- */
.guide-index { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.guide-index a { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); align-items: start; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.gi-n { grid-row: span 2; font: 700 clamp(2.5rem, 1.8rem + 3vw, 4.5rem)/.95 var(--font-display); letter-spacing: -.05em; color: var(--control-line); transition: color var(--dur) var(--ease); }
.gi-body { display: grid; gap: var(--s-2); align-content: start; }
.gi-body .h3 { transition: color var(--dur) var(--ease); }
.gi-sum { color: var(--ink-soft); max-width: 48ch; }
.guide-index .read { grid-column: 2; margin-top: var(--s-1); }
.guide-index a:hover .gi-n { color: var(--red); }
.guide-index a:hover .h3 { color: var(--red-ink); }
.guide-index .is-lead .h3 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: -.03em; line-height: 1.08; }
@media (min-width: 840px) {
  .guide-index a { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); padding: var(--s-7) 0; }
  .gi-n { grid-row: auto; }
  .guide-index .read { grid-column: 3; margin: 0; }
}

/* ---------- contact ---------- */
.contact-info { gap: var(--s-6); }
.contact-lines { font: 500 var(--t-h3)/1.5 var(--font-display); letter-spacing: -.01em; }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.map-ph { position: relative; display: grid; place-items: end start; min-height: 168px; padding: var(--s-3); border-radius: var(--r-media); background: var(--surface-2); border: 1px dashed var(--control-line); overflow: hidden; }
.map-pin { position: absolute; left: 50%; top: 42%; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; background: var(--red); rotate: -45deg; translate: -50% -50%; }
.map-pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }

/* ---------- forms: panels, groups, messages ---------- */
.form-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; box-shadow: 0 1px 2px rgba(20, 23, 26, .04), 0 24px 48px -32px rgba(20, 23, 26, .24); }
.form-panel form, .form-panel .form-body { display: grid; gap: var(--s-5); }
.form-head { display: grid; gap: var(--s-3); }
.form-head h2, .form-head h3 { margin: 0; }
.form-panel .btn { min-height: 52px; width: 100%; }
@media (min-width: 640px) { .form-panel { padding: var(--s-7); } .form-panel .btn { width: auto; justify-self: start; min-width: 240px; } }
.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.fgroup-title { display: flex; align-items: baseline; gap: var(--s-3); margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.fgroup-title:first-child { padding-top: 0; border-top: 0; }
.fgroup-title .meta { color: var(--red-ink); }
fieldset.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
fieldset.fieldset > legend { padding: 0; margin-bottom: var(--s-3); font: 600 var(--t-small)/1.3 var(--font-text); color: var(--form-label); }
.form-error { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--red-tint); border: 1px solid var(--red); color: var(--red-ink); font-weight: 500; font-size: var(--t-small); }
.form-error[hidden], .success[hidden] { display: none; }
.success { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-media); background: #eaf5ee; border: 1px solid #9fcdb2; color: #10311f; }
.success h2, .success h3 { margin: 0; }
.success p { margin: 0; }
.form-panel > .success { padding: var(--s-5); }
.field-error { margin-top: 0; }
.field textarea { min-height: 9rem; }
.field-note { font-size: var(--t-small); color: var(--muted); margin: 0; }


/* =========================================================
   Car listing (used cars, saved, similar): one component, three densities
   ========================================================= */
.flag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2); border-radius: 2px; background: var(--ink); color: #fff; font: 500 var(--t-meta)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; }
.flag--red { background: var(--red); }
.flag--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.flag--muted { background: var(--muted); }
.price-big { font: 700 clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.was { color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.save-btn { gap: var(--s-2); }
.save-btn svg { width: 18px; height: 18px; transition: none; }
.save-btn:hover svg { transform: none; }
.save-btn[aria-pressed="true"] { background: var(--red-tint); border-color: var(--red); color: var(--red-ink); }
.save-btn[aria-pressed="true"] svg path { fill: currentColor; }
.cmp-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); padding: 0; margin: 0; list-style: none; font: 500 var(--t-small)/1.5 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.cars { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.car { position: relative; container: car / inline-size; border-bottom: 1px solid var(--line); padding-block: var(--s-5); }
.car-in { display: grid; gap: var(--s-4); grid-template-areas: "media" "main" "buy"; }
.car-media { grid-area: media; position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; --fade-x: 14%; --fade-y: 22%; }
.car-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.car:hover .car-media img { transform: scale(1.03); }
.car-flags { position: absolute; left: var(--s-3); top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-1); z-index: 1; }
.car-main { grid-area: main; display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.car-title { margin: 0; font: 600 clamp(1.375rem, 1.15rem + .8vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.car-title a { text-decoration: none; }
.car-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.car-title a:focus-visible { outline: none; }
.car-title a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.car-variant { margin: 0; color: var(--muted); font-size: var(--t-small); }
.car-main .facts { margin-top: var(--s-2); }
.car-buy { grid-area: buy; display: grid; gap: var(--s-2); align-content: start; }
.car-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.car-price .price-big { font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem); }
.car-fin { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.car-fin strong { font-weight: 600; color: var(--ink); }
.car-fin small { display: block; font-size: var(--t-meta); color: var(--muted); }
.car-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.car-actions .btn { position: relative; z-index: 1; min-height: 44px; padding: 0 var(--s-4); }
.car[data-status="sold"] .price-big { color: var(--muted); }
.car[data-status="sold"] .car-media img { filter: grayscale(.7); opacity: .8; }

@container car (min-width: 520px) {
  .car-in { grid-template-columns: minmax(180px, 5fr) 7fr; grid-template-areas: "media main" "media buy"; column-gap: var(--s-5); align-items: start; }
}
@container car (min-width: 760px) {
  .car-in { grid-template-columns: minmax(240px, 4fr) minmax(0, 4fr) minmax(190px, 3fr); grid-template-areas: "media main buy"; column-gap: var(--s-6); }
  .car-buy { padding-left: var(--s-5); border-left: 1px solid var(--line); height: 100%; align-content: start; }
  .car-actions { flex-direction: column; align-items: stretch; margin-top: var(--s-4); }
  .car-actions .btn { width: 100%; }
}
/* compact density: homepage row style */
.cars--compact .car { padding-block: var(--s-4); }
.cars--compact .car-in { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "media main" "buy buy"; gap: var(--s-2) var(--s-4); align-items: center; }
.cars--compact .car-media { aspect-ratio: 3 / 2; }
.cars--compact .car-flags { display: none; }
.cars--compact .car-title { font-size: 1.125rem; }
.cars--compact .car-main .facts { margin-top: 0; }
.cars--compact .car-buy { grid-template-columns: 1fr auto; align-items: center; }
.cars--compact .car-price .price-big { font-size: 1.375rem; }
.cars--compact .car-fin, .cars--compact .cmp-btn { display: none; }
.cars--compact .car-actions { margin: 0; }
@container car (min-width: 520px) {
  .cars--compact .car-in { grid-template-columns: 140px minmax(0, 1fr) auto; grid-template-areas: "media main buy"; align-items: center; }
  .cars--compact .car-buy { display: flex; align-items: center; gap: var(--s-5); padding: 0; border: 0; height: auto; }
  .cars--compact .car-actions { flex-direction: row; }
  .cars--compact .car-actions .btn { width: auto; }
}
@container car (min-width: 760px) {
  .cars--compact .car-in { grid-template-columns: 180px minmax(0, 1fr) auto; }
}

/* ---------- used cars ---------- */
.used { display: grid; gap: var(--s-6); padding-bottom: var(--section); }
.used-side { display: none; }
@media (min-width: 960px) {
  .used { grid-template-columns: 296px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .used-side { display: block; position: sticky; top: calc(var(--header-h) + var(--s-4)); max-height: calc(100svh - var(--header-h) - var(--s-6)); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--s-3); margin-right: calc(var(--s-3) * -1); scrollbar-width: thin; }
}
@media (min-width: 1200px) { .used { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-9); } }

.filters { display: grid; align-content: start; }
.f-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); min-height: 56px; }
.f-head h2 { margin: 0; font: 700 1.375rem/1 var(--font-display); letter-spacing: -.02em; }
.f-close { display: none; }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); border: 0; background: none; font-weight: 600; font-size: var(--t-small); color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; border-radius: var(--r-control); }
.linkbtn:hover { color: var(--ink); }
.linkbtn[hidden] { display: none; }
.fg { display: grid; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); border-top: 0; margin: 0; min-width: 0; }
.fg > legend, .fg > summary { padding: 0; font: 600 var(--t-small)/1.3 var(--font-text); color: var(--ink); }
fieldset.fg { padding-inline: 0; border-inline: 0; border-top: 0; }
fieldset.fg > legend { float: left; width: 100%; margin-bottom: var(--s-3); }
fieldset.fg > legend + * { clear: both; }
details.fg { gap: 0; padding-block: 0; }
details.fg > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; list-style: none; }
details.fg > summary::-webkit-details-marker { display: none; }
details.fg > summary::after { content: ""; width: 20px; height: 20px; background: var(--ink); -webkit-mask: linear-gradient(#000 0 0) center / 12px 2px no-repeat, linear-gradient(#000 0 0) center / 2px 12px no-repeat; mask: linear-gradient(#000 0 0) center / 12px 2px no-repeat, linear-gradient(#000 0 0) center / 2px 12px no-repeat; transition: rotate var(--dur) var(--ease); }
details.fg[open] > summary::after { -webkit-mask-size: 12px 2px, 0 0; mask-size: 12px 2px, 0 0; }
details.fg > .fg-body { padding-bottom: var(--s-4); display: grid; gap: 0; }
.fg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.fg .check, .fg .switch { justify-content: flex-start; padding-right: 0; }
.fg .check > span:not(.n), .fg .switch > span:not(.n) { flex: 1; min-width: 0; }
.n { margin-left: auto; font: 500 var(--t-meta)/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.fg .check.is-zero:not(:has(:checked)), .fg .switch.is-zero:not(:has(:checked)) { color: var(--muted); }
.sw-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: var(--s-2); box-shadow: inset 0 0 0 1px rgba(20, 23, 26, .35); vertical-align: -2px; }
.f-save { padding-top: var(--s-4); display: grid; gap: var(--s-2); }
.f-save .btn { width: 100%; }
.f-apply { display: none; }
.f-live { min-height: 1.5em; }

/* mobile: the same form moves into a native dialog drawer */
.sheet { margin: 0; inset: 0 auto 0 0; width: min(440px, 100%); height: 100%; max-height: none; border: 0; padding: 0; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-overlay); overscroll-behavior: contain; }
.sheet::backdrop { background: rgba(20, 23, 26, .5); overflow: hidden; overscroll-behavior: contain; }
.sheet[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .sheet { transition: translate 260ms var(--ease), display 260ms allow-discrete, overlay 260ms allow-discrete; translate: -100% 0; }
  .sheet[open] { translate: 0 0; }
  @starting-style { .sheet[open] { translate: -100% 0; } }
}
.sheet .filters { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
.sheet .f-head { padding: 0 var(--margin); min-height: var(--header-h); border-bottom-color: var(--line); }
.sheet .f-close { display: inline-flex; }
.sheet .f-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--margin); }
.sheet .f-apply { display: block; padding: var(--s-4) var(--margin) var(--s-5); border-top: 1px solid var(--line); background: var(--bg); }
.sheet .f-apply .btn { width: 100%; min-height: 52px; }

.results { min-width: 0; }
.r-bar { display: grid; gap: var(--s-4); padding-bottom: var(--s-4); }
.r-count { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.r-count .num { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.r-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.r-tools { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.r-tools .field { gap: var(--s-1); }
.r-tools .field > label { font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.r-view { --seg-n: 2; min-width: 168px; }
.filter-launch { display: inline-flex; }
@media (min-width: 960px) { .filter-launch { display: none; } }
@media (min-width: 640px) { .r-tools { display: flex; justify-content: flex-start; gap: var(--s-5); } .r-tools .field { min-width: 240px; } .r-tools .r-view-wrap { margin-left: auto; } }
.r-view-wrap { display: grid; gap: var(--s-1); }
.r-view-wrap > .lbl { font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 0 var(--s-4); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); font-size: var(--t-small); font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip svg { width: 14px; height: 14px; color: var(--muted); }
.chip--clear { border-color: transparent; background: none; color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; padding: 0 var(--s-3); }
.empty { padding: var(--s-8) 0; border-top: 1px solid var(--ink); display: grid; gap: var(--s-3); max-width: 52ch; }
.empty h2 { margin: 0; font: 700 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.empty p { margin: 0; color: var(--ink-soft); }
.empty .btn { justify-self: start; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-top: var(--s-6); }
.pager button { min-width: 44px; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--control-line); border-radius: var(--r-control); background: var(--surface); font: 500 var(--t-small)/1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.pager button:hover:not(:disabled) { border-color: var(--ink); }
.pager button[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager button:disabled { color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); cursor: not-allowed; }
.pager .pg-gap { flex: 1; }
.skel { display: grid; gap: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.skel i { display: block; height: 180px; background: var(--surface-2); border-radius: var(--r-media); }
.notice { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-media); border: 1px solid var(--line-strong); background: var(--surface); display: grid; gap: var(--s-2); }
.notice h2 { margin: 0; font: 700 var(--t-h3)/1.2 var(--font-display); }
.notice p { margin: 0; }

/* ---------- saved ---------- */
.saved-grid { display: grid; gap: var(--s-8); padding-bottom: var(--section); }
.saved-searches h2, .saved-cars h2 { margin: 0 0 var(--s-4); }
.ss-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.ss-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--line); min-height: 64px; padding: var(--s-2) 0; }
.ss-list a { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ss-list a:hover { text-decoration: underline; }
.ss-list .meta { display: block; text-transform: none; letter-spacing: 0; font-size: var(--t-meta); font-weight: 400; }
.ss-empty { padding: var(--s-5) 0; border-top: 1px solid var(--ink); margin: 0; color: var(--ink-soft); }
@media (min-width: 1100px) { .saved-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-9); align-items: start; } .saved-searches { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }

/* ---------- compare ---------- */
.cmp-add { display: grid; gap: var(--s-3); align-items: end; margin-bottom: var(--s-6); max-width: 640px; }
.cmp-add .btn { min-height: var(--field-h); }
@media (min-width: 560px) { .cmp-add { grid-template-columns: minmax(0, 1fr) auto; } }
.cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid var(--ink); margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.cmp th, .cmp td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.cmp thead th { padding-block: var(--s-5); vertical-align: bottom; border-bottom-color: var(--ink); }
.cmp tbody th { font: 500 var(--t-meta)/1.5 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; width: 11rem; }
.cmp .corner, .cmp tbody th { position: sticky; left: 0; background: var(--bg); z-index: 1; }
.cmp td, .cmp thead th:not(.corner) { padding-left: var(--s-3); }
.cmp td.is-diff { background: var(--red-tint); font-weight: 600; }
.cmp-car { display: grid; gap: var(--s-2); min-width: 190px; }
.cmp-car .photo { aspect-ratio: 3 / 2; --fade-x: 14%; --fade-y: 20%; }
.cmp-car a { font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -.02em; text-decoration: none; display: flex; align-items: center; min-height: 44px; }
.cmp-car a:hover { text-decoration: underline; }
.cmp-car .btn { justify-self: start; }
.cmp-legend { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; }
.cmp-legend i { width: 28px; height: 16px; border-radius: 2px; background: var(--red-tint); box-shadow: inset 0 0 0 1px var(--red); flex: none; }
.pager + .fine { margin-top: var(--s-5); }


/* =========================================================
   Car detail
   ========================================================= */
.veh { display: grid; gap: var(--s-6); grid-template-areas: "head" "gallery" "buy" "detail"; padding-bottom: var(--section); }
.veh-head { grid-area: head; display: grid; gap: var(--s-3); }
.veh-head .h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); }
.veh-head .lede { margin: 0; }
.veh-flags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.veh-gallery { grid-area: gallery; display: grid; gap: var(--s-3); min-width: 0; }
.gal-main { position: relative; aspect-ratio: 3 / 2; overflow: hidden; --fade-x: 10%; --fade-y: 18%; }
.gal-main .slide { position: absolute; inset: 0; }
.gal-main .slide[hidden] { display: none; }
.gal-main picture, .gal-main img { width: 100%; height: 100%; }
.gal-main img { object-fit: cover; }
.gal-more { display: grid; place-content: center; gap: var(--s-2); text-align: center; background: var(--surface-2); border-radius: var(--r-media); padding: var(--s-5); }
.gal-more p { margin: 0; font: 600 var(--t-h3)/1.2 var(--font-display); }
.gal-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.thumb { position: relative; width: 88px; min-height: 60px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-control); background: var(--surface); overflow: hidden; cursor: pointer; display: block; }
.thumb picture, .thumb img { display: block; width: 100%; height: 100%; }
.thumb img { object-fit: cover; aspect-ratio: 3 / 2; }
.thumb figure { margin: 0; }
.thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.thumb:hover { border-color: var(--ink); }
.thumb--text { display: grid; place-items: center; font: 500 var(--t-meta)/1.2 var(--font-mono); padding: var(--s-1); text-align: center; color: var(--ink-soft); }
.gal-nav .btn { margin-left: auto; }

.veh-detail { grid-area: detail; display: grid; gap: var(--s-8); min-width: 0; }
.keyfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--ink); }
.keyfacts > div { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); display: grid; gap: var(--s-1); }
.keyfacts > div:nth-last-child(-n+1) { border-bottom: 0; }
.keyfacts dt { font: 500 var(--t-meta)/1.3 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.keyfacts dd { margin: 0; font: 700 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .keyfacts { grid-template-columns: repeat(5, minmax(0, 1fr)); } .keyfacts > div { border-bottom: 0; padding-right: var(--s-4); } .keyfacts > div + div { padding-left: var(--s-4); border-left: 1px solid var(--line); } }
.vsec { display: grid; gap: var(--s-4); align-content: start; }
.vsec > h2 { margin: 0; font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.vsec > p { margin: 0; max-width: 62ch; color: var(--ink-soft); }
.spec { display: grid; margin: 0; border-top: 1px solid var(--ink); }
.spec > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); min-height: 52px; align-items: baseline; }
.spec dt { color: var(--muted); font-size: var(--t-small); }
.spec dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .spec { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.ticks { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.ticks li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); min-height: 52px; }
.ticks svg { width: 16px; height: 16px; color: var(--success); flex: none; }
@media (min-width: 720px) { .ticks { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } }
.sample-box { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px dashed var(--control-line); border-radius: var(--r-media); }
.sample-box p { margin: 0; }
.sample-box .num { font-weight: 600; }

.buy { grid-area: buy; display: grid; gap: var(--s-5); align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); box-shadow: 0 1px 2px rgba(20, 23, 26, .04), 0 24px 48px -32px rgba(20, 23, 26, .28); min-width: 0; }
.buy > * { margin: 0; }
.buy-price { display: grid; gap: var(--s-2); }
.buy-price .price-big { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem); }
.buy-price .was { font-size: var(--t-small); }
.buy-split { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.mf-monthly { font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--red-ink); }
.mf-monthly small { font: 400 var(--t-small)/1.2 var(--font-text); letter-spacing: 0; color: var(--muted); margin-left: var(--s-2); }
.buy .seg { --field-h: 44px; }
.buy-actions { display: grid; gap: var(--s-3); }
.buy-actions .btn { width: 100%; min-height: 52px; }
.buy-actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.buy-actions .row2 .btn { min-height: 48px; padding-inline: var(--s-3); }
.buy-notes { display: grid; gap: var(--s-2); padding: var(--s-4) 0 0; margin: 0; list-style: none; border-top: 1px solid var(--line); font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); }
.buy-notes li { padding-left: var(--s-4); position: relative; }
.buy-notes li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--control-line); }
.buy .status-line { display: flex; align-items: center; gap: var(--s-2); }
.buy-sold { padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--r-control); font-weight: 600; }

@media (min-width: 1024px) {
  .veh { grid-template-columns: minmax(0, 1fr) 388px; grid-template-areas: "head buy" "gallery buy" "detail buy"; column-gap: var(--s-8); row-gap: var(--s-6); }
  .buy { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; padding: var(--s-6); }
  .buybar { display: none !important; }
}
@media (min-width: 1280px) { .veh { grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--s-9); } }
/* mobile buy bar */
.buybar { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--margin) calc(var(--s-3) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line-strong); }
.buybar .bb-price { display: grid; line-height: 1.15; }
.buybar .bb-price strong { font: 700 1.375rem/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.buybar .bb-price span { font-size: var(--t-meta); color: var(--muted); }
.buybar .btn { min-height: 48px; padding-inline: var(--s-3); }
.has-buybar .site-footer { padding-bottom: calc(var(--s-6) + 88px); }
@media (min-width: 1024px) { .has-buybar .site-footer { padding-bottom: var(--s-6); } }
@media (max-width: 380px) { .buybar { grid-template-columns: 1fr 1fr; } .buybar .bb-price { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: baseline; } }

/* ---------- native dialogs (reserve, lightbox) ---------- */
dialog.modal { padding: 0; border: 0; border-radius: var(--r-media); background: var(--surface); color: var(--ink); width: min(520px, calc(100% - 24px)); max-height: calc(100svh - 24px); box-shadow: var(--shadow-overlay); overscroll-behavior: contain; }
dialog.modal::backdrop { background: rgba(20, 23, 26, .6); overflow: hidden; overscroll-behavior: contain; }
dialog.modal[open] { display: grid; }
.modal-in { padding: var(--s-5); display: grid; gap: var(--s-4); overflow-y: auto; overscroll-behavior: contain; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.modal-head h2 { margin: 0; font: 700 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.modal-in form { display: grid; gap: var(--s-4); }
.modal-in .btn[type="submit"] { width: 100%; min-height: 52px; }
dialog.lightbox { width: min(1200px, calc(100% - 24px)); background: var(--night); }
dialog.lightbox .modal-in { padding: var(--s-3); }
dialog.lightbox .lb-img { position: relative; margin: 0; background: var(--bg); border-radius: var(--r-control); overflow: hidden; }
dialog.lightbox img { width: 100%; max-height: calc(100svh - 120px); object-fit: contain; }
dialog.lightbox .btn { justify-self: end; }
@media (prefers-reduced-motion: no-preference) {
  dialog.modal { transition: opacity 200ms var(--ease), translate 200ms var(--ease), display 200ms allow-discrete, overlay 200ms allow-discrete; opacity: 0; translate: 0 16px; }
  dialog.modal[open] { opacity: 1; translate: 0 0; }
  @starting-style { dialog.modal[open] { opacity: 0; translate: 0 16px; } }
}

/* =========================================================
   Finance calculator: light input panel, dark result panel
   ========================================================= */
.fin { display: grid; gap: var(--s-5); padding-bottom: var(--s-8); }
.fin-in { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.fin-in h2 { margin: 0; }
.fin-in .fgroup-title { padding-top: 0; border: 0; }
.fin-out { background: var(--night); color: #fff; border-radius: var(--r-media); padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.fin-out > * { margin: 0; }
.fin-monthly { font: 700 clamp(3.25rem, 2rem + 5.5vw, 6rem)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: #fff; overflow-wrap: anywhere; }
.fin-monthly-sub { color: var(--night-dim); font-size: var(--t-small); }
.fin-facts { margin: 0; display: grid; }
.fin-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--night-line); font-variant-numeric: tabular-nums; }
.fin-facts dt { color: var(--night-dim); font-size: var(--t-small); }
.fin-facts dd { margin: 0; font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -.02em; }
.fin-facts .em dd { font-size: 1.5rem; }
.fin-out .btn { width: 100%; min-height: 52px; }
.calc-row { align-items: baseline; }
@media (min-width: 960px) {
  .fin { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; padding-bottom: var(--s-6); }
  .fin-in { padding: var(--s-7); }
  .fin-out { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: var(--s-7); }
}
.fin-peek { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--margin) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--night); color: #fff; translate: 0 100%; transition: translate 240ms var(--ease); }
.fin-peek.is-on { translate: 0 0; }
.fin-peek strong { font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fin-peek span { font-size: var(--t-meta); color: var(--night-dim); display: block; }
.fin-peek a { color: #fff; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 960px) { .fin-peek { display: none; } }
.rep { margin: 0; border-top: 1px solid var(--ink); }
.rep > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; min-height: 52px; align-items: baseline; }
.rep dt { color: var(--muted); }
.rep dd { margin: 0; font: 500 var(--t-body)/1.3 var(--font-mono); text-align: right; }
.rep .em dd { font-weight: 700; }

/* ---------- finance enquiry: step rail + form ---------- */
.enq { display: grid; gap: var(--s-5); padding-bottom: var(--section); }
.enq-rail { display: grid; gap: var(--s-5); align-content: start; }
.rail-steps { display: none; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: r; }
.rail-steps li { counter-increment: r; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: var(--s-3); min-height: 64px; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 var(--t-body)/1.2 var(--font-display); }
.rail-steps li::before { content: counter(r, decimal-leading-zero); font: 500 var(--t-meta)/1 var(--font-mono); color: var(--muted); }
.rail-steps li[aria-current="step"] { color: var(--ink); }
.rail-steps li[aria-current="step"]::before { color: var(--red-ink); }
.rail-steps li.is-done { color: var(--ink-soft); }
.rail-steps li.is-done::before { content: ""; width: 20px; height: 20px; background: var(--success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.500 3.200 3L13 4.500' fill='none' stroke='%23000' stroke-width='1.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.500 3.200 3L13 4.500' fill='none' stroke='%23000' stroke-width='1.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.enq-progress { display: grid; gap: var(--s-2); }
.enq-progress p { margin: 0; font: 500 var(--t-small)/1.3 var(--font-mono); color: var(--ink-soft); }
.enq-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); padding: 0; margin: 0; list-style: none; }
.enq-bars li { height: 6px; border-radius: 3px; background: var(--line-strong); }
.enq-bars li.on { background: var(--red); }
.enq-sum { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.enq-sum[hidden] { display: none; }
.enq-sum .photo { aspect-ratio: 3 / 2; }
.enq-sum h3 { margin: 0; font: 600 1.125rem/1.2 var(--font-display); letter-spacing: -.02em; }
.enq-sum p { margin: var(--s-1) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.enq-main h2 { margin: 0; font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -.03em; }
.enq-main h2:focus { outline: none; }
.enq-main .lead { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.enq-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }
.enq-actions .btn { width: auto; min-width: 160px; }
.form-panel .enq-actions .btn { width: auto; }
.recap { margin: 0; border-top: 1px solid var(--ink); }
.recap > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.recap dt { color: var(--muted); }
.recap dd { margin: 0; font-weight: 600; text-align: right; }
.next-list { padding-left: var(--s-5); display: grid; gap: var(--s-2); margin: 0; }
@media (min-width: 960px) {
  .enq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); align-items: start; }
  .enq-rail { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .rail-steps { display: block; }
  .enq-progress { display: none; }
  .enq-sum { grid-template-columns: 1fr; border-block: 0; border-top: 1px solid var(--ink); }
  .enq-sum .photo { aspect-ratio: 3 / 2; }
}

/* ---------- part exchange + test drive ---------- */
.px { display: grid; gap: var(--s-7); padding-bottom: var(--section); }
.px-aside { display: grid; gap: var(--s-5); align-content: start; }
.px-aside .photo { aspect-ratio: 3 / 2; }
.px-aside .h3 { margin: 0; }
.px-aside p { margin: 0; color: var(--ink-soft); }
.px-list { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--ink); }
.px-list li { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.px-list svg { width: 16px; height: 16px; margin-top: .4em; color: var(--success); flex: none; }
@media (min-width: 960px) {
  .px { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-9); align-items: start; }
  .px-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .px--drive { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .px--drive .px-aside { order: 2; }
}
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.slots label { position: relative; display: block; }
.slots input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.slots span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--control-line); border-radius: var(--r-control); background: var(--surface); font: 500 var(--t-small)/1 var(--font-mono); font-variant-numeric: tabular-nums; transition: background-color var(--dur) var(--ease); }
.slots input:hover:not(:disabled) + span { border-color: var(--ink); }
.slots input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.slots input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.slots input:disabled + span { color: var(--muted); background: var(--surface-2); border-color: var(--line-strong); text-decoration: line-through; cursor: not-allowed; }
.slots-empty { grid-column: 1 / -1; margin: 0; padding: var(--s-4); border: 1px dashed var(--control-line); border-radius: var(--r-control); color: var(--muted); font-size: var(--t-small); }
@media (min-width: 640px) { .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.td-car { display: grid; gap: var(--s-3); }
.td-car .photo { aspect-ratio: 3 / 2; }
.td-car h3 { margin: 0; font: 600 var(--t-h3)/1.2 var(--font-display); letter-spacing: -.02em; }
.td-car .price { font: 700 1.75rem/1.1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 0; }
.td-visit { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.td-visit > * { margin: 0; }
.td-visit .status { color: var(--ink); }
.td-visit .dot { background: var(--muted); }
.td-visit .status[data-open="true"] .dot { background: var(--success); }
.form-panel .field input[type="date"] { min-width: 0; }

.list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); padding-bottom: var(--s-4); margin-bottom: var(--s-2); border-bottom: 1px solid var(--ink); }
.list-head h2 { margin: 0; }
.list-head p { margin: 0; color: var(--muted); font-size: var(--t-small); }
.list-head p:focus { outline: none; }
.list-head .link-arrow { margin-left: auto; }
.saved-cars .empty, #compare-app .empty { border-top: 0; padding-top: var(--s-6); }
.stack > *, .split > *, .saved-grid > * { min-width: 0; }
#compare-app { min-width: 0; max-width: 100%; }
.saved-cars .cars { border-top: 0; }