/* Broker Black inventory grammar: the SRP card and VDP deal-sheet structure
   from the Spark Noir dealer sites, in the v3 design system (styles.css):
   light or dark, rounded surfaces, Fraunces numbers, Inter labels.
   Loaded by /shop and /vehicle after styles.css. */
:root { --sans: var(--body); --title: var(--display); }
/* Flat scrim behind modal sheets (the SRP inquiry modal), light and dark. */
:root { --scrim-flat: rgba(10, 10, 12, .55); }
[data-theme="dark"] { --scrim-flat: rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --scrim-flat: rgba(0, 0, 0, .7); } }

/* ---------- page furniture ---------- */
.sec { padding: 0; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.sec-t h2 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.08; margin: 0; }
.sec-t h2 em { font-style: normal; font-weight: 500; color: var(--fg); }
.kicker { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.f-h { font-family: var(--sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.price-line { color: var(--dim); font-size: 13px; }
.form-done { text-align: center; color: var(--fg); font-family: var(--display); font-weight: 300; font-size: 24px; padding: 30px 0; }
.rule-strip { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r-btn); padding: 12px 16px; color: var(--dim); font-size: 14.5px; line-height: 1.55; }


/* ---------- filters: uppercase pills ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.filters button, .filters select, .filters input {
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--dim); border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none;
  padding: 9px 14px; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
}
.filters select { padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.filters input { cursor: text; color: var(--fg); width: 130px; font-weight: 400; border-radius: var(--r-btn); }
.filters button.on, .filters select.on { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }
.filters select:focus, .filters input:focus, .filters button:focus-visible { border-color: var(--fg); }
.filters select:disabled { opacity: .45; cursor: default; }

/* ---------- SRP cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.srp-grid { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); gap: 14px; margin-bottom: 30px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .25s, transform .25s, box-shadow .25s; position: relative; }
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.card.dropped { border-color: var(--gold); }
.srp-card { display: flex; flex-direction: column; }
.srp-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; }
.tile { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--bg-2); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.card:hover .tile img { transform: scale(1.04); }
.tile .cond { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; background: var(--panel-glass); }
.tile .save-tag { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; background: var(--panel-glass); cursor: pointer; transition: border-color .18s, color .18s; }
.tile .save-tag:hover, .tile .save-tag.on { border-color: var(--gold); color: var(--gold); }
.tile .ph-tile { position: absolute; inset: 0; }
.tile .drop-ribbon { top: auto; bottom: 12px; left: 12px; }
.tile .pc-flag { top: auto; bottom: 12px; left: auto; right: 12px; }
.card-b { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-b-srp { padding: 14px 16px 12px; gap: 6px; }
.srp-title { font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; line-height: 1.2; }
.srp-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.srp-orig { color: var(--dim); text-decoration: line-through; }
.srp-sale { color: var(--fg); font-weight: 500; }
.srp-save { font-family: var(--sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); background: var(--gold-2); padding: 2px 8px; border-radius: 999px; }
.srp-fee { color: var(--dim); font-size: 11px; letter-spacing: .02em; margin-top: -3px; }
.pay-line { display: flex; align-items: baseline; gap: 8px; }
.pay-line .pay { font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg); font-variant-numeric: tabular-nums; }
.card-b-srp .pay-line .pay { font-size: 27px; }
.pay-line .permo { color: var(--dim); font-size: 12.5px; }
.pay-line.ask-dealer .permo { font-size: 14px; color: var(--fg); }
.pay-terms { color: var(--dim); font-size: 11.5px; letter-spacing: .02em; margin-top: -4px; }
.pay-or { color: var(--dim); font-size: 12.5px; line-height: 1; margin: 2px 0; }
.pay-line-promo .pay { font-size: 20px; color: var(--fg); }
.srp-id { color: var(--dim); font-size: 10.5px; letter-spacing: .04em; overflow-wrap: anywhere; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.chips span { font-family: var(--sans); font-weight: 500; font-size: 11.5px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.fin-ast { color: var(--gold); text-decoration: none; margin-left: 2px; font-size: 1.1em; cursor: pointer; }
.srp-actions { padding: 0 16px 16px; margin-top: auto; }
.offer-actions { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.srp-actions .dbtn, .srp-actions .dbtn-outline { padding-block: 12px; }
.srp-empty { color: var(--dim); font-size: 18px; padding: 40px 0; text-align: center; }

/* Concierge drops and price drops keep their motion */
.card.pc-pick { border-color: var(--gold); }

/* jump buttons: stacked above the Concierge pill (#pc-fab, bottom 22px, ~46px tall) */
.srp-jump { position: fixed; right: 18px; bottom: 78px; z-index: 40; display: flex; flex-direction: column; gap: 6px; }
.srp-jump button { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); }
.srp-jump button:hover { border-color: var(--fg); }
/* Phones: the Concierge pill is enough; the jump buttons step out. */
@media (max-width: 640px) { .srp-jump { display: none; } }
/* (previous phone row rule kept below for tablets) */
@media (max-width: 640px) { .srp-jump { right: auto; left: 12px; bottom: 22px; flex-direction: row; } .srp-jump button { padding: 9px 12px; } }

/* ---------- deal profile panel (SRP) ---------- */
.profile-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px 16px; margin: 26px 0 18px; }
.profile-panel .pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.profile-panel .pp-note { color: var(--dim); font-size: 13px; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px 12px; }
.profile-grid label { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; white-space: nowrap; }
.profile-grid input, .profile-grid select { width: 100%; background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 15px; font-weight: 400; padding: 10px 11px; outline: none; }
.profile-grid input:focus, .profile-grid select:focus { border-color: var(--fg); }
@media (min-width: 900px) {
  .profile-panel.sticky { position: sticky; top: 0; z-index: 45; box-shadow: var(--shadow); border-radius: 0 0 var(--r) var(--r); }
}
.range-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.range-bar .rb-note { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--gold); margin-right: 6px; }

/* ---------- VDP ---------- */
.vdp-hero { padding: 44px 0 10px; }
.vdp-title { font-family: var(--display); font-weight: 300; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
.vdp-title em { font-style: normal; font-weight: 500; color: var(--fg); }
.vdp-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.vdp-meta { color: var(--dim); font-family: var(--sans); font-weight: 500; font-size: 13.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.vdp-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-left: auto; }
.sticker-link { display: inline-flex; align-items: center; justify-content: center; height: 42px; min-width: 176px; padding: 0 18px; box-sizing: border-box; white-space: nowrap; background: none; cursor: pointer; font-family: var(--sans); font-weight: 500; color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); font-size: 13.5px; text-decoration: none; transition: border-color .18s, color .18s; }
.sticker-link:hover, .sticker-link.on { border-color: var(--fg); }
.sticker-link.on { color: var(--gold); border-color: var(--gold); }
@media (max-width: 760px) { .vdp-meta-row { align-items: flex-start; } .vdp-actions { margin-left: 0; width: 100%; justify-content: flex-start; } .sticker-link { min-width: 0; flex: 1 1 0; } }

/* gallery rail */
.gal { margin: 26px 0 0; }
.gal-rail-wrap { position: relative; }
.gal-rail { --gal-h: clamp(340px, 48vh, 520px); display: flex; gap: 12px; height: var(--gal-h); padding-inline: 0; scroll-padding-inline: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; cursor: grab; }
.gal-rail::-webkit-scrollbar { display: none; }
.gal-rail-single { justify-content: center; overflow: hidden; padding-inline: 0; }
.gal-frame { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 4/3; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-snap-align: start; cursor: zoom-in; background: var(--bg-2); opacity: .72; transition: opacity 220ms ease; }
.gal-frame.on { opacity: 1; }
.gal-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-frame.gal-single { aspect-ratio: 16/9; cursor: default; opacity: 1; }
.gal-frame .ph-tile { position: absolute; inset: 0; }
.gal-arrow { position: absolute; top: 0; bottom: 0; width: 72px; border: 0; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 220ms ease; z-index: 2; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
.gal-arrow svg { transition: transform 220ms ease; }
.gal-prev:hover svg { transform: translateX(-3px); } .gal-next:hover svg { transform: translateX(3px); }
.gal-rail-wrap:hover .gal-arrow, .gal-rail-wrap:focus-within .gal-arrow, .gal-arrow.lb { opacity: 1; }
.gal-prev { left: 0; background: linear-gradient(90deg, rgba(8, 9, 11, .45), transparent); }
.gal-next { right: 0; background: linear-gradient(270deg, rgba(8, 9, 11, .45), transparent); }
.gal-count { position: absolute; left: 22px; bottom: 16px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); z-index: 2; }
.gal-count.static { position: static; display: inline-block; margin: 0 0 6px 2px; }
.gal-expand { position: absolute; right: 22px; bottom: 16px; display: flex; color: rgba(255, 255, 255, .85); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .8)); z-index: 2; pointer-events: none; }
.gal-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.gal-strip::-webkit-scrollbar { display: none; }
.gal-thumb { flex: 0 0 auto; width: 104px; aspect-ratio: 16/10; padding: 0; border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: #0b0d10; cursor: pointer; scroll-snap-align: center; opacity: .55; transition: opacity 160ms ease, border-color 160ms ease; position: relative; }
.gal-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-thumb.on { opacity: 1; border-color: #fff; }
.gal-thumb:hover { opacity: .9; }
.gal-lb { position: fixed; inset: 0; z-index: 300; background: rgba(6, 7, 9, .97); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px 16px 14px; }
.gal-lb.open { display: flex; }
.gal-lb-frame { position: relative; width: min(1500px, 96vw); flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gal-lb-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; cursor: zoom-in; transition: transform .25s ease; }
.gal-lb-frame img.zoomed { cursor: zoom-out; }
.gal-arrow.lb { width: 96px; opacity: .85; }
.gal-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity 180ms ease, transform 220ms ease; z-index: 3; }
.gal-close:hover { opacity: 1; transform: rotate(90deg); }
.gal-lb-bar { width: min(1500px, 96vw); margin-top: 8px; }
@media (max-width: 640px) { .gal-rail { --gal-h: clamp(220px, 38vh, 320px); gap: 8px; } .gal-arrow { display: none; } .gal-thumb { width: 84px; } }
/* Temporary-feed photos carry the source dealer's frame: the 16/10 tile's
   cover-fit already trims it; the 4/3 gallery frames crop it explicitly. */
.wl-crop .gal-frame img, .wl-crop .gal-thumb img { clip-path: inset(10% 0 8% 0); transform: scale(1.22) translateY(-1.2%); }
.wl-crop .gal-lb-frame img { clip-path: inset(10% 0 8% 0); }

/* deal sheet */
.vdp-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; margin-top: 44px; }
@media (max-width: 960px) { .vdp-cols { grid-template-columns: 1fr; } }
.deal { margin-top: 10px; }
.deal-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.deal-row span { color: var(--dim); }
.deal-row b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-total { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 4px; }
.deal-total .t-label { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.deal-total .t-num { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 44px); font-variant-numeric: tabular-nums; line-height: 1; }
.protagonist { text-align: center; padding: 56px 0 20px; }
.protagonist .p-label { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.protagonist .p-num { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); margin-top: 10px; }
.protagonist .p-num small { font-size: .3em; color: var(--dim); font-weight: 300; letter-spacing: 0; font-family: var(--display); }
.protagonist .p-terms { color: var(--dim); font-size: 13.5px; margin-top: 10px; }
.leadform { max-width: 480px; margin: 30px auto 0; display: grid; gap: 10px; }
.leadform input { background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 15px; padding: 14px; outline: none; }
.leadform input:focus { border-color: var(--fg); }
.leadform .dbtn { width: 100%; }
.rail { position: sticky; top: 84px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow); }
@media (max-width: 960px) { .rail { position: static; } }
.rail .r-pay { font-family: var(--display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.rail .r-pay span { font-family: var(--display); font-weight: 300; font-size: 16px; color: var(--dim); }
.rail .r-sub { color: var(--dim); font-size: 13px; margin: 6px 0 16px; line-height: 1.5; }
.rail .r-fine { color: var(--dim); font-size: 11.5px; margin: -8px 0 16px; line-height: 1.5; }
.rail label.f-h { display: block; margin-top: 12px; }
.rail input[type=range] { width: 100%; accent-color: var(--acc); margin: 4px 0 0; }
.rail .filters { margin: 6px 0 0; }
.rail .filters button { padding: 7px 12px; font-size: 12.5px; }
.rail .mode { margin: 0 0 14px; }
.rail .mode button { flex: 1 1 0; text-align: center; }
.rail .where { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: 6px; }
.rail .where select { background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-size: 13.5px; font-weight: 400; padding: 8px 10px; outline: none; width: 100%; }
.rail-tools { margin-top: 18px; display: grid; gap: 10px; }
.tool-btn { display: block; width: 100%; text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--fg); font-family: var(--sans); font-weight: 500; font-size: 14px; padding: 13px 16px; cursor: pointer; transition: border-color .18s; }
.tool-btn:hover, .tool-btn.open { border-color: var(--fg); }
.tool-pane { border: 1px solid var(--line); border-radius: 0 0 var(--r-btn) var(--r-btn); border-top: 0; padding: 14px; margin-top: -10px; background: var(--panel); }
.tool-pane .leadform { margin: 0; max-width: none; }
.tool-fine { color: var(--dim); font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.tool-range { font-family: var(--display); font-weight: 300; font-size: 30px; margin-bottom: 4px; color: var(--fg); }
.prod-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.prod-row:last-of-type { border-bottom: 0; }
.prod-row input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--acc); }
.prod-name { font-size: 14px; font-weight: 400; }
.prod-name em { display: block; font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.prod-price { font-family: var(--sans); font-weight: 500; font-size: 13.5px; color: var(--fg); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prod-price em { display: block; font-style: normal; font-weight: 400; color: var(--dim); font-size: 12px; }
.f-nap { color: var(--dim); font-size: 14px; }
.f-nap a { color: var(--fg); }

/* everything about this car */
.hl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 30px; }
.hl { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-btn); font-size: 13.5px; line-height: 1.25; min-height: 52px; }
.hl::before { content: ''; flex: 0 0 auto; width: 10px; height: 1px; background: var(--gold); }
.spec-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; }
.spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.spec-row span { color: var(--dim); }
.spec-row b { font-weight: 400; text-align: right; }
.feat-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 36px; align-items: start; }
.feat-group { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 14px; margin: 0; break-inside: avoid; }
.fg-name { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: -0.01em; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.feat-group ul { margin: 0; padding: 0; list-style: none; }
.feat-group li { color: var(--dim); font-size: 14.5px; line-height: 1.7; padding-left: 16px; position: relative; break-inside: avoid; overflow-wrap: anywhere; }
.feat-group li::before { content: ''; position: absolute; left: 0; top: .75em; width: 6px; height: 1px; background: var(--dim); }
.feat-cols .fg-long { grid-column: span 2; }
.feat-cols .fg-long ul { columns: 2; column-gap: 28px; }
.feat-cols .fg-wide { grid-column: 1 / -1; }
.feat-cols .fg-wide ul { columns: 3; column-gap: 28px; }
@media (max-width: 860px) { .feat-cols { grid-template-columns: 1fr 1fr; } .feat-cols .fg-wide ul { columns: 2; } }
@media (max-width: 760px) { .spec-cols { grid-template-columns: 1fr; } .hl-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
@media (max-width: 560px) { .feat-cols { grid-template-columns: 1fr; } .feat-cols .fg-long, .feat-cols .fg-wide { grid-column: auto; } .feat-cols .fg-long ul, .feat-cols .fg-wide ul { columns: 1; } }
.recall-ok { border: 1px solid var(--line); border-radius: var(--r-btn); border-left: 3px solid var(--good); padding: 12px 16px; color: var(--dim); font-size: 14.5px; }
.recall-ok b { color: var(--good); font-weight: 500; }
.recall-warn { border: 1px solid var(--line); border-radius: var(--r-btn); border-left: 3px solid var(--gold); padding: 12px 16px; color: var(--dim); font-size: 14.5px; margin-bottom: 8px; }
.recall-warn b { color: var(--gold); font-weight: 500; }
.recall-list details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.recall-list summary { cursor: pointer; font-family: var(--sans); font-weight: 400; font-size: 14.5px; }
.recall-list p { color: var(--dim); font-size: 14px; line-height: 1.6; margin-top: 6px; }

/* deal contract v2 */
/* The optional down payment reads its default in place ("10% of price") in both themes. */
.profile-grid input::placeholder { color: var(--dim); opacity: 1; }
/* Ten fields share the row in lease mode at 1440, so the SRP down field trims its side padding and the placeholder its size to stay whole. Scoped to the SRP panel: the VDP's #dp-down is a range slider. */
.profile-grid #dp-down { padding-inline: 9px; }
.profile-grid #dp-down::placeholder { font-size: 14px; letter-spacing: -0.01em; }