/* Paddock / After hours. Built from the racing brief; base styles own utilities. */
:root {
  --ui:'Plus Jakarta Sans',system-ui,sans-serif; --serif:var(--ui); --mono:var(--ui);
  --bg:#f1f3f2; --surface:#fff; --surface-2:#f3f5f4; --surface-3:#e4ebe8;
  --border:#d7dfdc; --border-soft:#e5eae7; --text:#31413f; --text-strong:#142c2c;
  --muted:#556a67; --muted-dim:#586b67; --accent:#086753; --accent-hi:#075848;
  --on-accent:#fff; --accent-soft:#e4f2eb; --brand:#1E3A8A;
  --hero-art:url('assets/drive-day.png'); --hero-position:center 60%; --hero-wash:linear-gradient(90deg,#f4f3e9 0%,#f4f3e9ed 25%,#f4f3e933 57%,transparent 73%);
  --topbar-bg:#f1f3f2f5; --road:#34433f; --gold:#997325; --gold-soft:#fbf4df;
  --shadow:0 15px 45px #183c3010; --bg-art:none;
}
:root[data-drive='night'] {
  color-scheme:dark; --bg:#0a1017; --surface:#121c24; --surface-2:#18242e; --surface-3:#243442;
  --border:#2c3a44; --border-soft:#22313b; --text:#cfdee0; --text-strong:#f3faf9;
  --muted:#a6b9bc; --muted-dim:#8ba2a8; --accent:#bcf477; --accent-hi:#d0ffa0;
  --on-accent:#162410; --accent-soft:#24352a; --brand:#aac2fb;
  --hero-art:url('assets/drive-night.png'); --hero-position:center 45%; --hero-wash:linear-gradient(90deg,#081019f2 0%,#081019d9 26%,#08101925 62%,transparent 85%);
  --topbar-bg:#0a1017f5; --road:#253941; --gold:#edc975; --gold-soft:#302b21;
  --shadow:0 15px 45px #0003; --good:#a8e895; --warn:#edc975;
}
html { scroll-padding-top:130px; scroll-behavior:smooth; }
body { font-family:var(--ui); font-size:14px; background:var(--bg); }
body { isolation:isolate; }
body::before { display:block; inset:-24px; z-index:-2; background:linear-gradient(#e5edd32b,#11342645),url('assets/footer-journey.jpg') center/cover no-repeat; filter:blur(12px) saturate(.85); }
body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg,#f4efda30,#d3e5d61a 45%,#153e4033); }
.app-frame { width:calc(100% - 48px); max-width:1376px; margin:24px auto 40px; border:1px solid #ffffffa8; border-radius:24px; background:#f1f3f2f5; box-shadow:0 24px 80px #0b292b38,0 2px 8px #0b292b14; }
.app-frame > .topbar { background:transparent; border-radius:24px 24px 0 0; }
:root[data-drive='night'] body::before { background:linear-gradient(#07101744,#07101799),url('assets/drive-night.png') 65% center/cover no-repeat; filter:blur(12px) saturate(.85); }
:root[data-drive='night'] body::after { background:linear-gradient(150deg,#0e32482b,#07101744 55%,#31482326); }
:root[data-drive='night'] .app-frame { background:#0a1017f5; border-color:#6e929c45; box-shadow:0 28px 100px #0008,0 0 40px #84c1c00a; }
@media (max-width:600px) {
  .app-frame { width:calc(100% - 16px); margin:8px auto 16px; border-radius:18px; }
  .app-frame > .topbar { border-radius:18px 18px 0 0; }
  body::before { filter:blur(8px); }
}
button,input,select,textarea { font-family:var(--ui); }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
.topbar { max-height:none; height:auto; position:relative; margin:0 auto; padding:0 max(24px,calc((100% - 1280px)/2)); background:var(--bg); border:0; backdrop-filter:none; overflow:visible; }
.brand { min-height:86px; padding:18px 190px 18px 0; align-items:center; gap:10px; }
.brand .mark { width:42px; height:42px; }
.brand .brand-txt { display:block; }
.brand-home { display:inline-flex; align-items:baseline; gap:5px; font-size:24px; font-weight:800; letter-spacing:-1px; line-height:1.3; white-space:nowrap; text-decoration:none; color:var(--text-strong); }
.brand-home .brand-domain { color:var(--accent); font-size:.68em; letter-spacing:-.3px; }
.brand p { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }
.brand-actions { top:23px; right:max(24px,calc((100% - 1280px)/2)); gap:10px; }
.brand-actions button { height:38px; min-width:38px; border-color:var(--border); border-radius:9px; background:var(--surface); }
.langbtn { padding:0 12px; font-size:12px; }
.drive-hero { height:375px; overflow:hidden; position:relative; border-radius:18px 18px 0 0; background-image:var(--hero-wash),var(--hero-art); background-size:cover; background-position:center,var(--hero-position); }
.hero-copy { position:relative; z-index:1; padding:32px 38px; width:56%; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent-hi); margin:0; }
.live-dot { width:6px; height:6px; background:currentColor; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent); }
#hero-title { margin:17px 0 14px; color:var(--text-strong); font-size:clamp(36px,3.7vw,54px); line-height:1.09; font-weight:800; letter-spacing:-2.3px; }
#hero-title em { color:var(--accent); font-style:normal; }
.hero-description { max-width:350px; margin:0; font-size:13px; line-height:1.7; color:var(--text); }
.hero-link { display:inline-flex; gap:20px; align-items:center; margin-top:15px; color:var(--text-strong); font-weight:700; font-size:12px; text-underline-offset:5px; }
.hero-link span:last-child { font-size:20px; }
.hero-stats { display:flex; gap:25px; margin-top:22px; }
.hero-stats > span { display:flex; gap:5px; align-items:baseline; }
.hero-stats b { font-size:15px; font-weight:800; color:var(--text-strong); }
.hero-stats small { color:var(--muted); font-size:10px; }
.scene-label { position:absolute; right:25px; top:24px; color:#fff; background:#101e25ad; border:1px solid #ffffff38; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:9px 12px; border-radius:4px; }
.scene-credit { position:absolute; right:20px; bottom:12px; color:#fff; background:#08101999; padding:3px 7px; font-size:9px; border-radius:3px; }
.night-label { display:none; }
:root[data-drive='night'] .day-label { display:none; }
:root[data-drive='night'] .night-label { display:inline; }
.crit { background:var(--surface); border:1px solid var(--border); border-radius:0 0 18px 18px; padding:24px 28px 20px; box-shadow:var(--shadow); }
.criteria-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.criteria-heading h2 { font-size:21px; font-weight:800; color:var(--text-strong); letter-spacing:-.7px; margin:6px 0 0; }
.criteria-note { color:var(--muted); font-size:11px; }
.criteria-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.75fr); gap:32px; }
.budget-panel { border-right:1px solid var(--border-soft); padding-right:30px; min-width:0; }
.field-head { align-items:center; min-height:24px; }
.field label,.pref-label { font-size:11px; font-weight:700; text-transform:none; letter-spacing:0; color:var(--text); }
.budget-input input { height:62px; font-size:36px; font-weight:800; padding-left:0; border:0; background:none; letter-spacing:-1.5px; border-radius:0; }
.budget-input input:hover,.budget-input input:focus { background:none; border:0; }
.budget-input .unit { font-size:12px; right:2px; }
#budget-hint { font-size:11px; color:var(--muted); }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; padding-bottom:14px; }
.controls .field:has(#usecase) { grid-column:1/-1; grid-row:1; }
.usecase { display:flex; border:0; background:var(--surface-2); padding:4px; gap:4px; border-radius:9px; max-width:none; }
.usecase button { flex:1; min-height:36px; font-size:12px; border-radius:6px; font-weight:700; }
.usecase button[aria-pressed='true'] { background:var(--accent); color:var(--on-accent); }
.uc-hint { display:none!important; }
.field input:not(#budget),.field select { min-height:42px; font-size:12px; border-radius:7px; }
.field select { background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px; }
.prefs { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.pref-row { display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; align-items:start; }
.pref-label { padding-top:8px; }
.chips { gap:6px; }
.chip { font-size:11px; min-height:31px; padding:6px 10px; border-radius:6px; background:var(--surface); }
.chip-n { font-size:9px; margin-left:5px; color:var(--muted); }
.chip.on .chip-n { color:inherit; opacity:.75; }
.pref-clear { grid-column:2; justify-self:start; }
.range-wrap { margin-top:24px; padding-bottom:0; }
.road { height:32px; position:relative; border-radius:5px; background:var(--road); border-top:2px solid #9baea255; border-bottom:2px solid #9baea255; }
.road-lines { pointer-events:none; position:absolute; left:8px; right:8px; height:2px; top:13px; background:repeating-linear-gradient(90deg,#ebf7ed6b 0 13px,transparent 13px 26px); }
.road-progress { position:absolute; left:0; top:0; bottom:0; width:var(--budget-pos,23%); background:color-mix(in srgb,var(--accent) 40%,transparent); border-radius:3px; }
.road-car { position:absolute; width:84px; height:28px; top:-2px; left:calc(42px + (100% - 84px)*var(--budget-fraction,.227)); transform:translateX(-50%); color:var(--accent); filter:drop-shadow(0 2px 3px #0008); pointer-events:none; }
:root:not([data-drive='night']) .road-car { color:#f7cf6c; }
.road-car img { display:block; width:100%; height:100%; object-fit:contain; }
.road-finish { position:absolute; right:8px; top:0; bottom:0; width:9px; background:repeating-conic-gradient(#fff9 0% 25%,#17251d 0% 50%) 0 0/8px 8px; }
#budgetRange { position:absolute; inset:-10px 0; width:100%; height:50px; background:transparent; border:0; margin:0; z-index:2; cursor:grab; }
#budgetRange:active { cursor:grabbing; }
#budgetRange::-webkit-slider-thumb { width:84px; height:44px; appearance:none; background:transparent; border:0; box-shadow:none; }
#budgetRange::-moz-range-thumb { width:84px; height:44px; background:transparent; border:0; }
#budgetRange:focus-visible { outline-offset:4px; border-radius:5px; }
.range-marks { margin:12px 0 0; height:32px; }
.range-marks .rm { font-size:9px; color:var(--muted); }
.range-marks .rm:nth-child(even) { display:block; }
.range-marks .rm:nth-child(2), .range-marks .rm:last-child { top:15px; display:block; }
#verdict:focus { outline:none; }
.budget-caption { font-size:11px; line-height:1.7; color:var(--muted); margin:14px 0 14px; }
.budget-shortcuts { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.budget-shortcuts button { padding:7px 12px; font-size:11px; border:1px solid var(--border); border-radius:5px; background:var(--surface-2); }
.budget-shortcuts button:hover { border-color:var(--accent); }
.budget-shortcuts span { color:var(--muted); font-size:10px; }
.criteria-bottom { display:flex; align-items:start; justify-content:space-between; gap:24px; border-top:1px solid var(--border-soft); padding-top:18px; margin-top:24px; }
.driving-options { min-width:0; flex:1; max-width:480px; }
.driving-options summary { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:18px; cursor:pointer; padding:12px 0; }
.driving-options summary::-webkit-details-marker { display:none; }
.assumptions { padding:16px; margin-top:5px; }
.asm-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.asm-head { display:none; }
.asm-field .field-head { min-height:35px; }
.asm-field input { width:100%; }
.pref-action { margin:0; padding:0; display:flex; align-items:center; gap:20px; }
.search-hint { font-size:11px; max-width:230px; }
.btn-search { min-height:47px; padding:12px 25px; gap:28px; border-radius:7px; font-size:13px; font-weight:800; white-space:nowrap; }
.btn-search svg { width:20px; }
.crit-toggle { background:var(--surface); margin:12px 0 0; padding:12px 18px; border:1px solid var(--border); border-radius:9px; width:100%; font-size:11px; min-height:42px; }
.topbar[data-open='true'] .crit-toggle { display:none; }
.topbar[data-open='false'] { position:sticky; top:0; z-index:40; padding-bottom:12px; background:var(--topbar-bg); backdrop-filter:blur(15px); border-bottom:1px solid var(--border); }
.topbar[data-open='false'] .drive-hero { display:none; }
.topbar[data-open='false'] .brand { min-height:65px; padding-block:10px; }
.topbar[data-open='false'] .brand-actions { top:13px; }
.topbar[data-open='false'] .crit-toggle { margin:0; }
main { max-width:1328px; padding:28px 24px 70px; }
.tabs { margin:0 0 25px; }
.tab { font-size:12px; padding:14px 18px; }
.prestate { background:transparent; border:0; padding:10px 0 22px; gap:18px; }
.prestate strong { font-size:17px; letter-spacing:-.4px; }
.prestate p { font-size:12px; max-width:85ch; }
.section-head h2,.verdict-head h2 { font-size:27px; font-weight:800; letter-spacing:-1px; }
.verdict { background:transparent; border:0; padding:0; }
.verdict-head { display:block; padding:0 0 20px; }
.verdict-head h2 { margin-top:8px; }
.verdict-head .sub { font-size:12px; margin-top:8px; }
.podium { grid-template-columns:1fr 1.14fr 1fr; align-items:end; gap:18px; padding-top:20px; }
.pod { border-radius:12px; box-shadow:var(--shadow); position:relative; }
.pod[data-rank='1'] { order:2; border:2px solid var(--gold); }
.pod[data-rank='2'] { order:1; margin-bottom:0; }
.pod[data-rank='3'] { order:3; }
.pod-crown { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; font-weight:800; background:var(--surface-2); color:var(--muted); }
.pod-crown b { font-size:22px; letter-spacing:-1px; font-style:italic; }
.pod[data-rank='1'] .pod-crown { background:var(--gold-soft); color:var(--gold); padding-block:15px; }
.pod figure { aspect-ratio:16/9; max-height:230px; overflow:hidden; }
.pod figure img { transition:transform .5s var(--ease); }
.pod:hover figure img { transform:scale(1.035); }
.pod-body { padding:20px; gap:12px; }
.pod-name { font-size:21px; line-height:1.2; letter-spacing:-.6px; }
.pod-name span { margin-top:6px; font-size:11px; }
.pod-price { font-size:26px; font-weight:800; letter-spacing:-1px; }
.pod-price-note { font-size:10px; color:var(--muted); margin-top:-8px; }
.pod-specs { gap:5px; }
.pod-specs li { font-size:11px; }
.pod-ratings { border-block:1px solid var(--border-soft); padding:12px 0 8px; }
.rating-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; font-size:12px; font-weight:600; }
.rating-row > span:first-child { min-width:0; }
.rating-value { display:flex; align-items:center; gap:8px; flex:none; }
.rating-value svg { width:91px; height:18px; overflow:visible; }
.stars-empty { fill:var(--surface-3); stroke:var(--muted-dim); stroke-width:.7; }
.stars-fill { fill:var(--gold); }
.rating-value b { min-width:36px; color:var(--text-strong); font-size:12px; font-variant-numeric:tabular-nums; }
.rating-value small { font-size:9px; font-weight:500; color:var(--muted); padding-left:2px; }
.rating-note { margin-top:8px; font-size:10px; line-height:1.65; color:var(--muted); }
.rating-note summary { cursor:pointer; width:fit-content; padding:3px 0; text-underline-offset:3px; }
.rating-note summary:hover { color:var(--text-strong); }
.rating-note p { margin:8px 0 2px; }
.pod-facts { gap:10px; }
.pod-facts .k { text-transform:none; font-size:10px; letter-spacing:0; }
.pod-facts .v { font-weight:700; font-size:13px; }
.pod .btn-ghost { min-height:40px; border-radius:6px; font-size:11px; font-weight:700; }
.pod[data-rank='1'] .btn-ghost { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.price-proof { font-size:10px; line-height:1.5; color:var(--muted); display:flex; align-items:center; gap:6px; }
.price-proof::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--warn); flex:none; }
.verdict-why { font-size:12px; padding:20px 24px; border:1px solid var(--border); border-left:3px solid var(--accent); }
.toolbar { padding:16px; border-radius:12px; }
.filters { max-height:155px; overflow:auto; }
.row { border-radius:10px; }
.row h3,.card h3 { font-weight:800; letter-spacing:-.5px; }
.panel { border-radius:12px; }
.buying-guide { padding:32px 0 12px; }
.guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:25px; }
.guide-grid article { padding-top:16px; border-top:1px solid var(--border); }
.guide-grid article > span { color:var(--accent-hi); font-size:10px; font-weight:800; letter-spacing:1px; }
.guide-grid h3 { font-size:15px; margin:12px 0 8px; color:var(--text-strong); }
.guide-grid p { font-size:12px; color:var(--muted); line-height:1.8; }
.foot { font-size:11px; }
.chat-toggle { border-radius:9px; font-size:12px; font-weight:800; padding:14px 18px; box-shadow:0 6px 24px #0002; }
.chat-panel { border-radius:14px; box-shadow:var(--shadow); }
.drawer h2 { font-weight:800; letter-spacing:-1px; }
.research-note { font-size:12px; line-height:1.7; color:var(--muted); }
.research-note a { color:var(--accent-hi); }
body[data-tab='glossary'] .drive-hero { display:none; }
@media (max-width:1000px) {
  .criteria-grid { grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:22px; }
  .budget-panel { padding-right:22px; }
  .pref-row { grid-template-columns:65px minmax(0,1fr); }
  .hero-copy { width:65%; }
  .hero-stats { gap:14px; }
  .podium { gap:12px; }
  .pod-body { padding:14px; }
  .pod-name { font-size:18px; }
}
@media (max-width:760px) {
  .topbar { padding:0 16px; }
  .brand { min-height:74px; padding:16px 152px 16px 0; }
  .brand .mark { display:none; }
  .brand-home { font-size:17px; }
  .brand p { font-size:8px; letter-spacing:1px; max-width:22ch; }
  .brand-actions { top:19px; right:16px; gap:6px; }
  .brand-actions button { min-width:32px; height:34px; }
  .langbtn { font-size:10px; padding:0 8px; }
  .drive-hero { height:410px; background-position:center,62% center; border-radius:14px 14px 0 0; --hero-wash:linear-gradient(180deg,#f4f3e9f5 0%,#f4f3e9e6 39%,#f4f3e98c 64%,#f4f3e94d 100%); }
  :root[data-drive='night'] .drive-hero { --hero-wash:linear-gradient(180deg,#081019ed 0%,#081019d9 44%,#08101966 75%,#08101944 100%); }
  .hero-copy { width:100%; padding:26px; }
  #hero-title { font-size:39px; max-width:310px; letter-spacing:-1.8px; }
  .hero-description { font-size:12px; max-width:250px; }
  .hero-stats { margin-top:20px; flex-wrap:wrap; max-width:280px; gap:12px 20px; }
  .hero-stats > span:last-child { flex-basis:100%; }
  .scene-label { top:auto; bottom:32px; right:14px; font-size:8px; }
  .scene-credit { right:12px; font-size:8px; bottom:10px; }
  .crit { padding:22px 20px; }
  .criteria-heading { align-items:start; margin-bottom:20px; }
  .criteria-heading h2 { font-size:19px; }
  .criteria-note { display:none; }
  .criteria-grid { grid-template-columns:1fr; gap:22px; }
  .budget-panel { border-right:0; padding:0 0 20px; border-bottom:1px solid var(--border); }
  .range-wrap { margin-top:20px; }
  .budget-caption { margin-top:12px; }
  .controls { grid-template-columns:1fr 1fr!important; }
  .controls .field:has(#region),.controls .field:has(#preset) { grid-column:auto!important; }
  .controls .field:has(#usecase) { grid-column:1/-1!important; }
  .field select { font-size:11px; padding-left:9px; }
  .pref-row { grid-template-columns:1fr; gap:6px; }
  .pref-label { padding:0; }
  .prefs { gap:16px; }
  .chip { min-height:36px; font-size:11px; padding:7px 10px; }
  .criteria-bottom { flex-direction:column; gap:10px; margin-top:20px; }
  .driving-options { width:100%; max-width:none; }
  .driving-options summary { justify-content:space-between; }
  .pref-action { width:100%; flex-direction:column-reverse; gap:10px; }
  .btn-search { width:100%; justify-content:space-between; }
  .search-hint { max-width:none; text-align:center; }
  .topbar[data-open='false'] { padding-bottom:10px; }
  .ct-summary { font-size:10px; line-height:1.6; }
  .crit-toggle { padding:10px 12px; gap:12px; }
  main { padding:22px 16px 90px; }
  .tabs { gap:0; }
  .tab { font-size:11px; padding:12px; }
  .section-head h2,.verdict-head h2 { font-size:23px; }
  .podium { grid-template-columns:1fr; padding-top:0; gap:18px; }
  .pod[data-rank='1'] { order:0; }
  .pod[data-rank='2'] { order:1; }
  .pod[data-rank='3'] { order:2; }
  .pod-body { padding:20px; }
  .pod-name { font-size:23px; }
  .pod figure { max-height:240px; }
  .pod-facts { grid-template-columns:1fr 1fr; }
  .pod .btn-ghost { min-height:44px; }
  .guide-grid { grid-template-columns:1fr; gap:10px; }
  .guide-grid article { padding:18px 0 10px; }
  .two-col { grid-template-columns:1fr; }
}
/* Follow the visible viewport in portrait and compact landscape windows. */
@media (max-width:760px), (max-width:1024px) and (max-height:500px) {
  .chat { right:14px; bottom:14px; }
  .chat-toggle { padding:12px 14px; font-size:11px; }
  .chat[data-open="true"] {
    left:0; right:0; top:var(--chat-viewport-top,0px); bottom:auto;
    height:var(--chat-viewport-height,100dvh); pointer-events:none;
  }
  .chat-panel {
    left:8px; right:8px; bottom:max(8px,env(safe-area-inset-bottom)); width:auto;
    height:min(720px,calc(100% - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))));
    max-height:none;
  }
  .chat-head, .chat-input { padding:10px 12px; }
  .chat-head { gap:8px; }
  .chat-head strong { font-size:14px; }
  .chat-head-actions { gap:6px; }
  .chat-head .switch { font-size:12px; min-height:44px; }
  #chat-close, .chat-input button { width:44px; height:44px; }
  .chat-input textarea { font-size:16px; }
  .chat-log { padding:12px; }
  .chat-log .msg { font-size:14px; }
  .chat-suggest { flex-wrap:nowrap; overflow-x:auto; padding:8px 12px; }
  .chat-suggest button { flex:none; min-height:36px; }
  .chat-foot { font-size:11px; padding:0 12px 10px; }
  .chat-foot:empty { display:none; }
  .chat[data-compact="true"] .chat-suggest,
  .chat[data-compact="true"] .pip-context,
  .chat[data-compact="true"] .chat-foot { display:none; }
  .chat[data-compact="true"] textarea { max-height:80px; }
}
@media (max-width:390px) {
  .drive-hero .scene-label { display:none; }
  .brand-home { font-size:14px; }
  .brand { padding-right:138px; }
  .brand-actions { gap:4px; }
  .brand-actions button { min-width:29px; }
  #hero-title { font-size:34px; }
  .hero-copy { padding:24px 20px; }
  .crit { padding:20px 16px; }
  .controls { grid-template-columns:1fr!important; }
  .asm-fields { grid-template-columns:1fr; }
  .asm-field .field-head { min-height:24px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* Keep the result heading clear of the collapsed controls. */
#verdict, #results { scroll-margin-top:145px; }
.chat-toggle { color:var(--on-accent); }
.chat-toggle svg { stroke:currentColor; }
@media (max-width:760px) {
  .tabs { position:static; }
  .chat-toggle { max-width:230px; }
  #verdict, #results { scroll-margin-top:138px; }
}

/* A compact co-driver control keeps the primary Search action unobstructed. */
.chat-toggle { padding:13px 15px; gap:8px; }
.chat-toggle::after { content:'AI'; font-size:12px; letter-spacing:.6px; }
.chat-toggle > span[data-i18n] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.chat-toggle .dot { position:absolute; right:5px; top:5px; margin:0; width:5px; height:5px; }

.verdict::before { display:none; }
.verdict-head h2 { text-transform:none; color:var(--text-strong); }

@media (max-width:760px) {
  #compare-table { table-layout:fixed; min-width:0; width:calc(110px + 160px * var(--compare-columns,2)); }
  #compare-table th, #compare-table td { width:160px; min-width:0; padding:10px; font-size:11px; white-space:normal; overflow-wrap:anywhere; }
  #compare-table th:first-child { width:110px; }
  #compare-modal .modal-body { padding:8px; }
}

/* Research stays accessible without taking over the car-finding page. */
body[data-tab='about'] #crit,
body[data-tab='about'] .crit-toggle,
body[data-tab='about'] .drive-hero,
body[data-tab='about'] #comparetray { display:none; }
body[data-tab='about'] .topbar { padding-bottom:12px; }
#tab-about:focus { outline:none; }
.about-heading { margin:36px 0 28px; max-width:760px; }
.about-heading .eyebrow { display:block; margin-bottom:12px; }
.about-heading h2 { font-size:clamp(28px,4vw,42px); letter-spacing:-1.2px; }
.about-heading p { max-width:65ch; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.about-card { padding:28px; border:1px solid var(--border); border-radius:12px; background:var(--surface); margin:0 0 20px; min-width:0; }
.about-card h3 { font-size:18px; color:var(--text-strong); margin:0 0 16px; }
.about-card p,.about-card li { font-size:13px; line-height:1.8; color:var(--muted); }
.about-card p { margin:0 0 12px; }
.about-card a,.site-footer a { color:var(--accent); text-underline-offset:3px; }
.about-caveats { padding-left:18px; margin:0; }
.about-caveats li + li { margin-top:12px; }
.method-ratings summary { cursor:pointer; color:var(--accent); font-size:12px; font-weight:700; margin:16px 0 12px; }
.about-page .buying-guide { padding:12px 0 32px; }
.research-index { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
.research-index article { min-width:0; border-top:1px solid var(--border); padding-top:16px; }
.research-index h4 { font-size:14px; color:var(--text-strong); margin-bottom:6px; }
.research-index ul { padding-left:16px; }
.source-search { display:grid; gap:8px; max-width:480px; margin:20px 0 12px; font-size:12px; font-weight:700; }
.source-search input { width:100%; border:1px solid var(--border); border-radius:9px; padding:12px 14px; background:var(--surface-2); color:var(--text-strong); font:inherit; }
.research-index details { min-width:0; border-top:1px solid var(--border); padding-top:14px; }
.research-index summary { cursor:pointer; color:var(--text-strong); font-size:14px; font-weight:700; line-height:1.7; }
.research-index summary small { display:block; font-size:11px; font-weight:400; color:var(--muted); }
.research-index details > p { margin-top:12px; }
.research-index li { margin:12px 0; overflow-wrap:anywhere; }
.research-index li small { display:block; color:var(--muted); line-height:1.7; }
.research-index .source-assumptions { border-left:2px solid var(--accent); padding-left:12px; font-size:11px; }
.credits-disclosure { border-top:1px solid var(--border); margin-top:20px; padding-top:18px; }
.credits-disclosure summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--text-strong); }
#credits { columns:2; column-gap:36px; padding-left:18px; margin-top:20px; }
#credits li { break-inside:avoid; margin-bottom:14px; overflow-wrap:anywhere; }
.site-footer { position:relative; isolation:isolate; display:flex; align-items:end; min-height:380px; overflow:hidden; margin-top:36px; border-radius:16px; color:#edf5f0; background:#183d34; }
.footer-landscape { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.site-footer::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,transparent 35%,#091e1740 65%,#091e17d9 100%); }
.footer-info { display:flex; align-items:start; gap:24px; width:100%; padding:52px 28px 26px; background:linear-gradient(180deg,transparent,#091e17bf 55%); }
.site-footer .footer-brand,.site-footer a { color:#f5fff7; }
.site-footer .scene-credit { top:14px; right:16px; bottom:auto; }
:root[data-drive='night'] .footer-landscape { filter:brightness(.62) saturate(.78); }
:root[data-drive='night'] .site-footer::before { background:linear-gradient(180deg,#0a101733,transparent 35%,#0a1017d9 100%); }
.footer-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text-strong); font-size:22px; font-weight:800; letter-spacing:-.7px; white-space:nowrap; }
.footer-brand img { width:36px; height:36px; }
.footer-brand .brand-domain { color:#bcf477; font-size:.72em; }
.site-footer p { flex:1; max-width:70ch; margin:0; font-size:11px; line-height:1.7; }
.site-footer a { font-size:11px; flex-shrink:0; }

/* A centred, native modal: focus stays inside it and the page is not blurred. */
.car-detail { padding:0; margin:auto; inset:0; width:min(1080px,calc(100vw - 64px)); max-width:none; height:min(920px,90dvh); max-height:calc(100dvh - 48px); border:1px solid var(--border); border-radius:16px; background:var(--bg); color:var(--text); overflow:hidden; box-shadow:0 28px 100px #0006; }
.car-detail[open] { display:flex; flex-direction:column; }
.car-detail::backdrop { background:var(--scrim); backdrop-filter:none; }
.detail-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; }
.detail-bar > div { min-width:0; }
.detail-bar span { display:block; text-transform:uppercase; letter-spacing:1.1px; font-size:9px; color:var(--muted); }
.detail-bar strong { display:block; font-size:14px; margin-top:2px; }
.detail-close { flex-shrink:0; width:44px; height:44px; }
#drawer-body { overflow-y:auto; overscroll-behavior:contain; flex:1; min-height:0; padding-bottom:12px; }
#drawer .dr-hero { display:grid; grid-template-columns:1.4fr 1fr; aspect-ratio:auto; min-height:280px; background:var(--surface-2); }
#drawer .dr-hero img { height:300px; object-fit:contain; }
#drawer .dr-hero::after { display:none; }
#drawer .dr-hero-txt { position:static; padding:28px; align-self:center; }
#drawer .dr-hero-txt h2 { font-size:36px; font-weight:800; letter-spacing:-1px; margin:8px 0 16px; }
#drawer .dr-chips .pt-tag { background:var(--surface); }
#drawer .dr-chips .badge { background:var(--surface); color:var(--text); border-color:var(--border); }
#drawer .dr-chips .badge.over { color:var(--accent-hi); }
#drawer .dr-keyfigs { margin-top:20px; padding:20px 28px; }
#drawer .dr-keyfigs .v { font-size:22px; }
#drawer .dr-sec { padding:28px 28px 0; }
#drawer .dr-sec h3 { font-size:12px; color:var(--text-strong); }
#drawer .dr-specs { column-gap:40px; }
#drawer .dr-tagline { padding:20px 28px 0; }
#drawer .dr-actions { padding:28px; }
@media (max-width:760px) {
  .about-grid,.research-index { grid-template-columns:1fr; gap:0; }
  .about-heading { margin-top:24px; }
  .about-card { padding:20px; }
  .research-index article + article { margin-top:20px; }
  #credits { columns:1; }
  .site-footer { min-height:380px; }
  .footer-info { flex-direction:column; gap:12px; padding:48px 22px 24px; }
  .footer-landscape { object-position:49% center; }
  .tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tab { min-width:0; justify-content:center; padding:10px 5px; font-size:11px; }
  .tab svg { display:none; }
  .car-detail { width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
  .detail-bar { padding:10px 16px; }
  #drawer .dr-hero { display:block; min-height:0; }
  #drawer .dr-hero img { height:220px; }
  #drawer .dr-hero-txt { padding:20px; }
  #drawer .dr-hero-txt h2 { font-size:28px; margin:6px 0 12px; }
  #drawer .dr-keyfigs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:16px 20px; }
  #drawer .dr-keyfigs .v { font-size:19px; }
  #drawer .dr-sec { padding:24px 20px 0; }
  #drawer .dr-tagline { padding:16px 20px 0; }
  #drawer .dr-actions { padding:20px; }
}

.search-progress { width:min(500px,calc(100vw - 32px)); margin:auto; padding:36px; border:1px solid var(--border); border-radius:18px; background:var(--surface); color:var(--text); text-align:center; box-shadow:0 24px 100px #0006; }
.search-progress::backdrop { background:var(--scrim); backdrop-filter:blur(7px); }
.search-progress h2 { margin:15px 0 12px; font-size:27px; line-height:1.25; letter-spacing:-.7px; color:var(--text-strong); }
.search-progress p { font-size:13px; line-height:1.7; color:var(--muted); }
.scan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--accent); }
.scan-window { height:144px; overflow:hidden; position:relative; margin-top:8px; border-block:1px solid var(--border-soft); background:var(--surface-2); mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent); }
.scan-reel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; padding:18px 10px; text-align:left; }
.scan-reel span { display:flex; align-items:center; min-width:0; height:36px; font-size:11px; font-weight:600; line-height:1.25; color:var(--text-strong); }
.search-progress[open] .scan-reel { animation:catalogue-scan 5s linear forwards; }
.search-progress .scan-note { margin:10px 0 0; font-size:10px; }
@keyframes catalogue-scan { from { transform:translateY(0); } to { transform:translateY(var(--scan-distance,0px)); } }
.loading-road { margin:32px 0 24px; height:44px; position:relative; border-radius:7px; background:var(--road); overflow:hidden; }
.loading-lane { position:absolute; inset:21px 0 auto; height:2px; background:repeating-linear-gradient(90deg,#e9f4ec80 0 15px,transparent 15px 30px); }
.loading-fill { position:absolute; inset:0; background:color-mix(in srgb,var(--accent) 30%,transparent); transform-origin:left; }
.loading-car { position:absolute; top:4px; width:108px; height:36px; z-index:1; filter:drop-shadow(0 3px 2px #0006); }
.loading-car img { display:block; width:100%; height:100%; object-fit:contain; }
.loading-finish { position:absolute; inset:0 8px 0 auto; width:10px; background:repeating-conic-gradient(#fff9 0% 25%,#17251d 0% 50%) 0 0/10px 10px; }
.search-progress[open] .loading-car { animation:shortlist-drive 5s linear forwards; }
.search-progress[open] .loading-fill { animation:shortlist-fill 5s linear forwards; }
@keyframes shortlist-drive { from { left:0; } to { left:calc(100% - 108px); } }
@keyframes shortlist-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:520px) { .search-progress { padding:28px 22px; } .search-progress h2 { font-size:23px; } }
@media (prefers-reduced-motion:reduce) {
  .search-progress[open] .loading-car,.search-progress[open] .loading-fill,.search-progress[open] .scan-reel { animation:none!important; }
  .loading-car { left:calc(50% - 54px); } .loading-fill { opacity:.35; }
}
#family-taste-field { grid-column:1/-1; }
#family-taste { width:100%; }

/* The wider catalogue uses compact reference cards, separate from the podium. */
body[data-tab='catalogue'] #crit,
body[data-tab='catalogue'] .crit-toggle,
body[data-tab='catalogue'] .drive-hero,
body[data-tab='catalogue'] #comparetray { display:none; }
.home-freshness { display:flex; flex-wrap:wrap; gap:5px 16px; margin:0 0 20px; color:var(--muted); font-size:11px; line-height:1.6; }
.home-freshness a { color:var(--accent); text-underline-offset:3px; }
.catalogue-toolbar { display:grid; grid-template-columns:2fr repeat(4,minmax(0,1fr)); gap:16px; padding:20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.catalogue-toolbar label { display:flex; flex-direction:column; gap:8px; min-width:0; }
.catalogue-toolbar label > span { color:var(--text); font-size:12px; font-weight:700; }
.catalogue-toolbar input,.catalogue-toolbar select { width:100%; min-width:0; height:44px; padding:0 10px; border:1px solid var(--border); border-radius:6px; color:var(--text); background:var(--surface-2); font-size:13px; }
.catalogue-summary { display:flex; justify-content:space-between; gap:12px; align-items:center; margin:20px 0 6px; font-size:12px; color:var(--text); }
.catalogue-price-note { max-width:90ch; color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 24px; }
.catalogue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.catalogue-card { min-width:0; padding:22px; border:1px solid var(--border); border-radius:12px; background:var(--surface); display:flex; flex-direction:column; }
.catalogue-car-title { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:70px; }
.catalogue-car-title > div { min-width:0; }
.catalogue-car-title .eyebrow { font-size:10px; letter-spacing:1px; }
.catalogue-car-title h3 { font-size:23px; line-height:1.2; color:var(--text-strong); margin:6px 0 0; letter-spacing:-.6px; overflow-wrap:anywhere; }
.catalogue-car-title img { width:96px; height:64px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.catalogue-marque { display:grid; place-items:center; width:64px; height:64px; flex-shrink:0; border:1px solid var(--border); border-radius:50%; font-size:19px; font-weight:800; color:var(--muted); letter-spacing:-1px; }
.catalogue-spec { color:var(--muted); font-size:12px; line-height:1.9; margin:14px 0 20px; }
.catalogue-price { color:var(--text-strong); font-size:22px; font-weight:800; margin:auto 0 20px; }
.catalogue-price small { display:block; color:var(--muted); font-size:10px; line-height:1.6; font-weight:400; margin-top:5px; }
.catalogue-card .pod-ratings { margin-bottom:8px; border-bottom:0; }
.catalogue-card .rating-row { font-size:11px; }
.catalogue-card .rating-value svg { width:76px; height:17px; }
.rating-pending { color:var(--muted); font-size:10px; font-weight:500; }
.catalogue-card-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; border-top:1px solid var(--border); padding-top:16px; }
.catalogue-status { font-size:10px; color:var(--muted); }
.catalogue-status.scored { color:var(--accent-hi); }
.catalogue-card-foot button { font-size:12px; font-weight:700; min-height:32px; }
#catalogue-more { display:block; margin:28px auto 0; }
.catalogue-empty { color:var(--muted); grid-column:1/-1; padding:32px 0; }
.catalogue-detail-head { padding:30px 28px; background:var(--surface-2); }
.catalogue-detail-head h2 { font-size:40px; line-height:1.1; margin:12px 0 20px; color:var(--text-strong); }
.catalogue-detail-head > p { font-size:14px; line-height:1.8; max-width:70ch; }
.catalogue-detail-price { font-size:28px; font-weight:800; margin-top:24px; }
.catalogue-detail-price span { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:6px; }
.catalogue-facts { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:18px 0; }
.catalogue-facts dt { font-size:11px; color:var(--muted); margin-bottom:6px; }
.catalogue-facts dd { margin:0; font-size:14px; line-height:1.6; }
.catalogue-sources { padding-left:18px; margin:16px 0; }
.catalogue-sources li { margin:10px 0; line-height:1.6; }
.catalogue-sources a { color:var(--accent); font-size:13px; overflow-wrap:anywhere; }
@media(max-width:1000px) {
  .catalogue-toolbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .catalogue-search { grid-column:1/-1; }
  .catalogue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .tabs { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .catalogue-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; }
  .catalogue-grid { grid-template-columns:1fr; }
  .catalogue-card { padding:20px; }
  .catalogue-detail-head { padding:26px 20px; }
  .catalogue-facts { grid-template-columns:1fr; gap:18px; }
  .home-freshness { font-size:10px; }
}

#tco { max-height:560px; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin; }

@media (max-width:760px) { .hero-stats > span { background:color-mix(in srgb,var(--surface) 88%,transparent); padding:3px 7px; border-radius:5px; } .hero-stats > span:last-child { flex-basis:auto; } }

/* A dedicated comparison garage, using the same selected cars as the shortlist. */
body[data-tab='comparison'] #crit,
body[data-tab='comparison'] .crit-toggle,
body[data-tab='comparison'] .drive-hero,
body[data-tab='comparison'] #comparetray { display:none; }
body[data-tab='comparison'] .topbar { padding-bottom:12px; }
.comparison-page:focus { outline:none; }
.comparison-badge { min-width:19px; padding:2px 5px; border-radius:5px; background:var(--accent-soft); color:var(--accent-hi); font-size:10px; font-weight:800; }
.comparison-picker { position:relative; max-width:620px; margin:25px 0 16px; }
.comparison-picker > label { display:block; margin-bottom:9px; font-size:12px; font-weight:700; }
.comparison-picker .searchbox { width:100%; min-width:0; }
.comparison-picker input { min-width:0; }
.comparison-picker input:disabled { opacity:.6; cursor:not-allowed; }
.comparison-options { position:absolute; top:76px; left:0; right:0; max-height:340px; overflow:auto; z-index:12; padding:6px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.comparison-options button { width:100%; display:flex; align-items:center; gap:12px; padding:10px; border:0; border-radius:7px; background:none; color:var(--text); text-align:left; cursor:pointer; }
.comparison-options button:hover, .comparison-options [aria-selected='true'] { background:var(--accent-soft); }
.comparison-options img { width:64px; height:42px; object-fit:cover; border-radius:5px; flex:none; }
.comparison-options button > span:not(.comparison-plus) { flex:1; min-width:0; }
.comparison-options b { display:block; font-size:13px; color:var(--text-strong); }
.comparison-options small { display:block; font-size:10px; color:var(--muted); margin-top:5px; line-height:1.5; }
.comparison-plus { font-size:22px; color:var(--accent-hi); }
.comparison-note { font-size:11px; line-height:1.7; color:var(--muted); margin:10px 0; }
.comparison-selection-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:20px 0 12px; }
.comparison-selection-head p { font-size:12px; color:var(--accent-hi); font-weight:700; margin:0; }
.comparison-cars { display:grid; grid-template-columns:repeat(var(--comparison-cards,2),minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.comparison-car, .comparison-slot { position:relative; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.comparison-car > .icon-btn { position:absolute; top:10px; right:10px; background:var(--surface-2); }
.comparison-car > img { width:100%; height:100px; object-fit:contain; margin-bottom:12px; }
.comparison-car h3 { font-size:17px; color:var(--text-strong); margin:0 0 6px; }
.comparison-car p { font-size:11px; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.comparison-car .comparison-proof { margin:10px 0 0; font-size:9px; }
.comparison-slot { min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border-style:dashed; background:var(--surface-2); color:var(--accent-hi); cursor:pointer; text-align:center; }
.comparison-slot > span { font-size:32px; font-weight:300; }
.comparison-slot b { font-size:14px; }
.comparison-slot small { font-size:11px; color:var(--muted); line-height:1.7; max-width:25ch; }
.comparison-slot:hover { border-color:var(--accent); background:var(--accent-soft); }
.comparison-table-wrap { max-height:72dvh; overflow:auto; overscroll-behavior:contain; }
.comparison-page #compare-table { table-layout:fixed; width:100%; min-width:calc(160px + 220px * var(--compare-columns,2)); }
.comparison-page #compare-table th, .comparison-page #compare-table td { white-space:normal; overflow-wrap:anywhere; }
.comparison-page #compare-table th:first-child { width:160px; }
.comparison-page #compare-table thead th { vertical-align:top; }
.comparison-page #compare-table tbody tr.grouphead th { position:static; }
@media (max-width:760px) {
  .tabs { display:flex; overflow-x:auto; scrollbar-width:thin; }
  .tab { flex:none; padding:12px; white-space:nowrap; }
  .comparison-cars { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .comparison-car, .comparison-slot { padding:12px; }
  .comparison-car > img { height:75px; }
  .comparison-car h3 { font-size:14px; }
  .comparison-page #compare-table { min-width:calc(110px + 160px * var(--compare-columns,2)); }
  .comparison-page #compare-table th:first-child { width:110px; }
}

/* Separate the vehicle's list price from the estimated amount to put it on road. */
.price-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.price-pair > div { min-width:0; }
.price-pair dt { font-size:10px; font-weight:500; line-height:1.5; color:var(--muted); }
.price-pair dd { margin:4px 0 0; font-size:22px; line-height:1.3; font-weight:800; color:var(--text-strong); white-space:nowrap; }
.price-pair .price-onroad dd { color:var(--accent-hi); }
.row-price .price-pair { grid-template-columns:1fr; gap:5px; }
.row-price .price-pair dt { font-size:9px; }
.row-price .price-pair dd { font-size:14px; margin:0; }
.card-price { display:block; }
.card-price .t { max-width:none; text-align:left; margin-bottom:12px; }
.comparison-car .price-pair { grid-template-columns:1fr; gap:10px; }
.comparison-car .price-pair dd { font-size:20px; }
.dr-prices { margin:20px 28px 0; }
.dr-prices > p { font-size:12px; color:var(--muted); margin:0 0 10px; }
#drawer .dr-keyfigs { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) {
  .price-pair dd { font-size:20px; }
  .comparison-car .price-pair dd { font-size:18px; }
  .dr-prices { margin:20px 20px 0; }
  #drawer .dr-keyfigs .v { font-size:16px; }
  .row-price .price-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .row-price .price-pair dt { font-size:11px; }
  .row-price .price-pair dd { font-size:17px; margin-top:3px; }
  .detail-bar { padding-top:max(10px,env(safe-area-inset-top)); }
  #drawer-body { padding-bottom:max(20px,env(safe-area-inset-bottom)); }
  #drawer .dr-specs > div { padding:10px 0; line-height:1.6; font-size:13px; }
  #drawer .dr-specs dd { font:inherit; }
  /* Each trim keeps its full name above a labelled price grid on phones. */
  .dr-table, .dr-table tbody { display:block; }
  .dr-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .dr-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:12px; border-bottom:1px solid var(--border); }
  .dr-table tr:last-child { border-bottom:0; }
  .dr-table tbody th { grid-column:1/-1; padding:0; border:0; font-weight:700; line-height:1.6; }
  .dr-table tbody td { padding:0; border:0; text-align:left; white-space:normal; font-size:14px; }
  .dr-table td::before { content:attr(data-label); display:block; font:500 11px/1.5 var(--ui); color:var(--muted); margin-bottom:3px; }
  .dr-table .tag { display:block; width:fit-content; margin:4px 0 0; border-color:var(--border); border-radius:5px; }
  .dr-table tr.is-pick { background:var(--accent-soft); }
  .dr-table tr.is-pick th, .dr-table tr.is-pick td { background:transparent; }
}

/* A 16px editing size avoids Safari zooming the page when a field is focused. */
@media (max-width:900px) {
  .settings .drawer-close { width:44px; height:44px; top:10px; right:10px; }
  input:not([type=checkbox]):not([type=range]), textarea, select { font-size:16px!important; }
}

/* Keep the mobile budget prominent without enlarging its unit or nearby controls. */
@media (max-width: 760px) {
  .app-frame .budget-input input { font-size: 32px!important; line-height: 1.2; height: 68px; min-height: 68px; padding-right: 78px; }
}
.feedback-form { display:grid; gap:16px; max-width:760px; }
.feedback-form label { display:grid; gap:8px; font-weight:600; }
.feedback-form input, .feedback-form textarea { width:100%; box-sizing:border-box; min-width:0; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:16px; }
.feedback-form textarea { resize:vertical; }
.feedback-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.feedback-actions button { min-height:44px; padding:10px 20px; }
.feedback-form > p { margin:0; }
.feedback-posts { display:grid; gap:16px; margin:24px 0; }
.feedback-post h3 { margin:0 0 4px; overflow-wrap:anywhere; }
.feedback-post time { color:var(--muted); font-size:13px; }
.feedback-post p { white-space:pre-wrap; overflow-wrap:anywhere; }
body[data-tab='feedback'] :is(#crit,.crit-toggle,.drive-hero,#comparetray) { display:none; }
body[data-tab='feedback'] .topbar { padding-bottom:12px; }