/* ============================================================================
   Car Rental Brain — app stylesheet
   Shares the brand tokens and the visual language of the marketing site
   (site/index.html): dark panel hero, radial brand glow, mono tabular prices,
   gold savings badge, generous type scale. The search card sits ON the dark
   panel — the pattern every serious travel product uses, and the thing that
   stops a form looking like a form.
   ========================================================================= */
:root{
  --ground:#FAF7F3;--surface:#FFFFFF;--surface-2:#F3EDE5;--ink:#1A1410;--muted:#6B5B4E;--line:#E7DDD1;--brand:#C4441C;--brand-strong:#9E3413;--brand-on:#FFFFFF;--gold-ink:#7A5610;
  --panel:#17120F;--panel-2:#231A15;--panel-line:#3B2D24;--panel-ink:#F6EEE7;--panel-muted:#A9968A;--brand-lit:#FF8560;--gold:#F0C55E;--old-lit:#A9968A;
  --good:#4F7A3A;--warn:#A87512;--bad:#8E3218;
  --maxw:1120px;--radius:16px;--radius-sm:11px;
  --shadow-card:0 1px 2px rgba(11,22,24,.04), 0 8px 24px -16px rgba(11,22,24,.28);
  --shadow-lift:0 2px 4px rgba(11,22,24,.05), 0 18px 40px -22px rgba(11,22,24,.45);
  --shadow-panel:0 30px 60px -32px rgba(0,0,0,.65);
  --font-display:"Archivo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#14100D;--surface:#1C1713;--surface-2:#271F19;--ink:#F3EBE4;--muted:#A49385;--line:#342B23;--brand:#FF7A52;--brand-strong:#FFA284;--brand-on:#2A1008;--gold-ink:#F0C55E;--good:#7FB463;
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --ground:#14100D;--surface:#1C1713;--surface-2:#271F19;--ink:#F3EBE4;--muted:#A49385;--line:#342B23;--brand:#FF7A52;--brand-strong:#FFA284;--brand-on:#2A1008;--gold-ink:#F0C55E;--good:#7FB463;
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.main{padding-block:0 56px;min-height:60vh}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);margin:0;text-wrap:balance}
.muted{color:var(--muted)}.small{font-size:.84rem}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin:0 0 12px}
.link{color:var(--brand-strong);text-decoration:none;font-weight:600}.link:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 86%,transparent);
     backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;
       font-size:1.06rem;letter-spacing:-.025em;text-decoration:none}
.nav-links{display:flex;gap:24px;margin-left:10px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.92rem;font-weight:600;
             padding:4px 0;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
/* phone menu: a <details>, so it works without JS; hidden above the breakpoint */
.nav-menu{display:none;position:relative}
.nav-menu summary{list-style:none;display:grid;gap:4px;width:40px;height:40px;place-content:center;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);cursor:pointer}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span{display:block;width:16px;height:2px;border-radius:2px;background:var(--ink)}
.nav-menu[open] summary{border-color:var(--brand)}
.nav-menu-list{position:absolute;right:0;top:48px;min-width:210px;display:grid;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-card);padding:6px;z-index:40}
.nav-menu-list a{padding:11px 12px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem}
.nav-menu-list a:hover{background:var(--surface-2)}
.theme-btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);
           width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
           transition:color .12s,border-color .12s}
.theme-btn:hover{color:var(--brand);border-color:var(--brand)}

/* ---------- the dark stage: hero + search card live on it ---------- */
.stage{background:var(--panel);color:var(--panel-ink);position:relative;
       border-bottom:1px solid var(--panel-line);margin-bottom:28px}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 80% -10%,rgba(255,133,96,.16),transparent 60%),
             radial-gradient(700px 380px at 5% 115%,rgba(240,197,94,.11),transparent 62%)}
.stage-in{position:relative;padding-block:44px 34px}
.stage.compact .stage-in{padding-block:22px 26px}
.hero{max-width:46ch}
.hero .eyebrow{color:var(--brand-lit)}
.hero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--panel-ink)}
.hero h1 em{font-style:normal;color:var(--brand-lit)}
.hero .lead{color:var(--panel-muted);font-size:1.05rem;max-width:52ch;margin:16px 0 0}
.hero .lead b{color:var(--panel-ink);font-weight:700}

/* ---------- search card ---------- */
.search{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
        padding:16px;margin-top:28px;box-shadow:var(--shadow-panel)}
.stage.compact .search{margin-top:0}
.modes{display:flex;gap:4px;background:var(--surface-2);border-radius:12px;padding:4px;margin-bottom:14px}
.mode{flex:1;position:relative}
.mode input{position:absolute;opacity:0;pointer-events:none}
.mode span{display:block;text-align:center;padding:10px 8px;border-radius:9px;font-weight:700;text-transform:none;letter-spacing:-.01em;
           font-size:.92rem;color:var(--muted);cursor:pointer;transition:background .14s,color .14s,box-shadow .14s}
.mode span:hover{color:var(--ink)}
.mode input:checked + span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.mode input:focus-visible + span{outline:2px solid var(--brand);outline-offset:1px}
.mode-hint{margin:0 0 14px;color:var(--muted);font-size:.9rem;line-height:1.5}
/* Most visitors just want a car: the plain search is the form, and the two specialist modes
   are offered underneath it as questions. The mode strip only appears once you are IN one. */
.search[data-active-mode="single"] .modes{display:none}
.search:not([data-active-mode="sequence"]) .mode-seq{display:none}   /* reached from a long hire's results, not chosen up front */
.mode-back{margin:0 0 12px;font-size:.88rem}
.mode-back a{color:var(--muted);text-decoration:none;font-weight:600}
.mode-back a:hover{color:var(--brand)}
.split-card .link{font-weight:700;margin-left:6px}
/* Beating a booking is the thing no one else does, so it cannot look like a settings row.
   It used to be muted text sitting directly above Adjust/Filters/Trip costs - same size,
   same weight, same place - so the eye filed it as a fourth disclosure. Gold, per the brand
   rule that gold carries the savings payoff; coral stays "do the thing you came for". */
.beat-offer{display:flex;align-items:center;gap:14px;margin-top:18px;padding:13px 15px;border-radius:12px;
  background:color-mix(in srgb,var(--gold) 15%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 50%,var(--line))}
.beat-offer p{margin:0;flex:1;font-size:.9rem;line-height:1.45;color:var(--muted)}
.beat-offer p b{color:var(--ink);font-weight:700}
.bo-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--gold);color:#3A2705;font-size:1.05rem;font-weight:700}
.btn-gold{background:var(--gold);color:#3A2705;border-color:transparent;font-size:.9rem;padding:11px 16px;min-height:44px;white-space:nowrap}
.btn-gold:hover{background:color-mix(in srgb,var(--gold) 86%,#000)}
.bk-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:none}
.bk-actions form{margin:0}

.mode-hint b{color:var(--ink)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.row:first-of-type{margin-top:0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 150px}
.field.grow{flex:2 1 220px}
label{font-size:.76rem;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
label .muted{text-transform:none;letter-spacing:0;font-weight:500;font-size:.8rem;opacity:.9}
input,select,button,textarea{font:inherit}
input:not([type=checkbox]):not([type=radio]),select{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink);min-height:48px;transition:border-color .12s,box-shadow .12s}
input:hover:not([type=checkbox]):not([type=radio]),select:hover{border-color:var(--muted)}
input:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
input::placeholder{color:color-mix(in srgb,var(--muted) 72%,transparent)}
.main-row{align-items:flex-end}
.main-row .field{flex:1 1 150px}
.main-row .field.grow{flex:3 1 280px}
.main-row .field.wide{flex:1 1 220px}
.who{gap:14px;align-items:flex-start}.who .field{flex:0 1 auto}
.who .field.go{flex:1 1 220px;max-width:340px;margin-left:auto;padding-top:22px}   /* label-height offset: button sits level with the inputs */
.hint{margin:4px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4;max-width:44ch}
.hint.warn{color:var(--gold-ink);font-weight:600}
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;padding:11px 0;text-transform:none;letter-spacing:0}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{position:relative;flex:none;width:46px;height:27px;border-radius:999px;background:var(--surface-2);
               border:1px solid var(--line);transition:background .16s,border-color .16s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
               background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .16s}
.switch input:checked + .track{background:var(--brand);border-color:var(--brand)}
.switch input:checked + .track::after{transform:translateX(19px)}
.switch input:focus-visible + .track{outline:2px solid var(--brand);outline-offset:2px}
.switch-label{font-size:.95rem;font-weight:600;color:var(--ink)}
.seg{display:inline-flex;gap:4px;background:var(--surface-2);border-radius:11px;padding:4px}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:block;padding:10px 16px;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer;text-transform:none;letter-spacing:0;transition:background .14s,color .14s,box-shadow .14s}
.seg-opt span:hover{color:var(--ink)}
.seg-opt input:checked + span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.seg-opt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:1px}
/* The time column was pinned at 104px at every breakpoint. With box-sizing:border-box
   and 13px of horizontal padding that leaves ~78px of content, and iOS Safari renders the
   native <input type="time"> control wider than desktop Chrome - so on an iPhone the hour
   was silently clipped at the right edge, because form controls default to overflow:clip.
   It does not reproduce in desktop Chrome, where the date column is far wider.
   Reported 2026-09-22. minmax() lets the column grow rather than crop. */
.dt{display:grid;grid-template-columns:1fr minmax(118px,auto);gap:7px}
input[type="time"]{min-width:118px;padding-left:10px;padding-right:8px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip input{position:absolute;opacity:0;pointer-events:none}
/* Scoped to the checkbox chips (leg lengths). As a bare `.chip span` it also styled the count
   inside every LINK chip - 11px padding, a border and muted text, which made the count on
   a selected (coral) chip unreadable (Jimi's screenshot, 2026-09-23). */
.chip input + span{display:inline-block;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
           font-weight:700;font-size:.88rem;text-transform:none;letter-spacing:0;color:var(--muted);cursor:pointer;transition:all .14s}
.chip input + span:hover{border-color:var(--brand);color:var(--brand)}
.chip input:checked + span{background:var(--brand);color:var(--brand-on);border-color:var(--brand)}
.chip input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.checks{gap:10px 20px}
.checks label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink);
              font-weight:500;text-transform:none;letter-spacing:0;cursor:pointer}
.checks input{accent-color:var(--brand);width:17px;height:17px}
.adjust,.filters{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.adjust summary,.filters summary{cursor:pointer;font-size:.9rem;list-style:none;display:flex;
                                 gap:10px;align-items:baseline;flex-wrap:wrap}
.adjust summary::-webkit-details-marker,.filters summary::-webkit-details-marker{display:none}
.adj-label{font-weight:700;color:var(--brand-strong)}
.adj-label::after{content:" ▾";font-size:.78em;opacity:.7}
details[open] .adj-label::after{content:" ▴"}
.adj-summary{color:var(--muted);font-size:.86rem}
.seq-note{margin:12px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);
     font-weight:700;font-size:.94rem;padding:12px 18px;border-radius:var(--radius-sm);text-decoration:none;
     cursor:pointer;border:1px solid transparent;white-space:nowrap;
     transition:transform .12s,filter .12s,box-shadow .12s,border-color .12s,color .12s}
.btn-primary{background:var(--brand);color:var(--brand-on);border-color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--brand) 70%,transparent)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-big{font-size:1.02rem;padding:14px 22px;width:100%;min-height:48px}
.btn.small{padding:7px 12px;font-size:.84rem}
/* mode-scoped fields: hidden only when JS runs (no-JS users see every field) */
.js [data-mode]{display:none}
.js [data-mode].on{display:flex}
.js p[data-mode].on,.js span[data-mode].on{display:inline-block}
.js .hero[data-mode].on{display:block}

/* trust strip, sitting just under the stage */
.trust{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:10px 26px;flex-wrap:wrap;
       color:var(--panel-muted);font-size:.84rem}
.trust b{color:var(--panel-ink);font-weight:700}
.trust li{display:flex;align-items:center;gap:7px}
.trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand-lit);flex:none}

/* ---------- autocomplete ---------- */
.ac{position:relative}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;list-style:none;margin:0;padding:5px;
         color:var(--ink);
         background:var(--surface);border:1px solid var(--line);border-radius:12px;
         box-shadow:var(--shadow-lift);max-height:290px;overflow:auto}
.ac-list li{padding:11px 12px;border-radius:8px;cursor:pointer;font-size:.94rem;transition:background .1s}
.ac-list li:hover,.ac-list li.sel{background:var(--surface-2)}

/* ---------- notices ---------- */
.notice{border-radius:12px;padding:13px 15px;margin-top:16px;border:1px solid var(--line);
        background:var(--surface);font-size:.93rem;box-shadow:var(--shadow-card)}
.notice-ok{border-left:3px solid var(--good)}
.notice-warn{border-left:3px solid var(--warn)}
.notice-error{border-left:3px solid var(--bad)}
.notice-info{border-left:3px solid var(--muted)}
.notice-tip{border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--surface))}   /* a saving on offer: gold, like the payoff */

/* ---------- results ---------- */
.results{margin-top:8px;scroll-margin-top:74px}
.results-head{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.results-head h2{font-size:1.3rem;font-weight:800;letter-spacing:-.02em}
.results-head p{margin:0;font-size:.92rem}

/* the verdict panel — the landing page's "meter", reused for a real answer */
.verdict{background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--panel-ink);
         border:1px solid var(--panel-line);border-radius:18px;padding:22px 24px;margin-top:16px;
         position:relative;overflow:hidden;box-shadow:var(--shadow-panel)}
.verdict::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 300px at 78% -40%,rgba(255,133,96,.17),transparent 62%)}
.verdict > *{position:relative}
.verdict p{color:var(--panel-muted);margin:10px 0 16px;font-size:.93rem;max-width:62ch}
.verdict-main{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.verdict .label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-muted);
                width:100%;margin-bottom:-4px}
.price-new{font-family:var(--font-mono);font-size:2.6rem;font-weight:600;letter-spacing:-.035em;
           font-variant-numeric:tabular-nums;line-height:1.05}
.price-was{font-family:var(--font-mono);font-size:1.15rem;color:var(--old-lit);
           text-decoration:line-through;text-decoration-thickness:2px}
.save{font-weight:800;font-size:.95rem;color:#2A1D05;background:var(--gold);
      padding:6px 13px;border-radius:999px;white-space:nowrap;align-self:center}
.verdict.hold .save{background:transparent;color:var(--panel-muted);border:1px solid var(--panel-line)}

/* offer cards */
.cards{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.offer{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.95fr) auto;
       gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);
       border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-card);
       transition:box-shadow .16s,border-color .16s,transform .16s}
.offer:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.offer.best{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));
            box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent),var(--shadow-card)}
.ribbon{position:absolute;top:-11px;left:16px;background:var(--brand);color:var(--brand-on);font-size:.68rem;
        font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.offer-car{display:flex;gap:14px;align-items:center;min-width:0}
.offer-car img{width:124px;height:74px;object-fit:contain;flex:none}
.offer-car b{font-size:1.02rem;letter-spacing:-.01em}
.specs{color:var(--muted);font-size:.84rem;margin-top:3px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.badge.ok{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}
.badge.warn{color:#8a3b12;background:color-mix(in srgb,var(--warn) 18%,transparent);font-weight:700}
.handoff.warn-line{color:#8a3b12;border-left-color:var(--warn)}
.badge.est{color:var(--gold-ink);background:transparent;border:1px dashed var(--gold-ink);cursor:help;display:inline-flex;align-items:center;gap:5px}
.badge.est .info{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:.62rem;line-height:1}
.offer-sup{display:flex;gap:11px;align-items:center;min-width:0}
.offer-sup img{height:24px;max-width:94px;object-fit:contain}
.offer-sup b{font-size:.94rem}
.rating{display:inline-block;font-weight:800;font-size:.79rem;padding:2px 7px;border-radius:7px;
        color:#fff;margin-left:5px;vertical-align:1px}
.r-good{background:var(--good)}.r-ok{background:var(--warn)}
/* low ratings go neutral, not red - red would fight the coral accent */
.r-low{background:var(--muted)}
.offer-price{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.offer-price .total{font-family:var(--font-mono);font-size:1.62rem;font-weight:700;
                    letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.offer-price .btn{margin-top:10px}
.handoff{margin-top:8px;font-size:.78rem;line-height:1.4;color:var(--gold-ink);text-align:left;
  border-left:2px solid var(--gold);padding-left:9px}
.variants{margin-top:8px;text-align:left}
.variant-row{display:flex;gap:10px;justify-content:space-between;align-items:baseline;padding:4px 0}
.variants summary{cursor:pointer;font-size:.78rem;color:var(--muted);list-style:none}
.variants summary::-webkit-details-marker{display:none}
.variants summary::after{content:" ▾"}
.variants[open] summary::after{content:" ▴"}

.leg-dates{color:var(--brand-strong);font-size:.85rem;font-weight:700;margin-bottom:3px}

.secondary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
/* The excess-cover card is a secondary, commercial suggestion under a decision already
   made. It was framed like a primary panel and read louder than the cars it sits below
   (external review). Quieter frame; the cars keep the visual weight. */
.secondary .html-card{box-shadow:none;background:transparent;border-style:dashed;padding:6px 10px}
.secondary .html-card table{font-size:.94em}

.html-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
           padding:12px 16px;overflow:hidden;box-shadow:var(--shadow-card)}
.html-card:empty{display:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:20px;margin-top:18px;box-shadow:var(--shadow-card)}
.followup .fu{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.followup label{display:block;margin-bottom:7px}
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline input,.inline select{flex:1 1 150px}

/* why-cards on the empty state */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
          padding:18px;box-shadow:var(--shadow-card);transition:border-color .15s,transform .15s}
.why-card:hover{border-color:var(--brand);transform:translateY(-2px)}
.why-card .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
              background:var(--surface-2);color:var(--brand);margin-bottom:12px;font-size:1.05rem;font-weight:700}
.why-card b{font-size:1rem;letter-spacing:-.01em}
.why-card p{color:var(--muted);font-size:.89rem;margin:7px 0 0}

/* pages */
.page-head{padding:26px 0 4px}
.page-head h1{font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;letter-spacing:-.025em}
.page-head .lead{max-width:62ch;margin-top:10px}
.bk-list{list-style:none;margin:12px 0 0;padding:0}
.bk-list li{display:flex;justify-content:space-between;gap:14px;align-items:center;
            padding:12px 0;border-bottom:1px solid var(--line)}
.bk-list li:last-child{border-bottom:none}
.prose{max-width:74ch}
.prose h1,.prose h2,.prose h3{margin:22px 0 9px;letter-spacing:-.02em}
.prose h1{font-size:1.65rem;margin-top:0}.prose h2{font-size:1.2rem}
.prose ul{padding-left:20px}.prose li{margin:5px 0}
.prose code{background:var(--surface-2);padding:2px 6px;border-radius:5px;font-family:var(--font-mono);font-size:.9em}
.action{text-align:center;padding:44px 22px;max-width:56ch;margin-inline:auto}
.action h1{font-size:1.6rem;margin-bottom:10px;letter-spacing:-.02em}
.action p{color:var(--muted);margin-bottom:22px}
.action.ok h1{color:var(--good)}.action.bad h1{color:var(--bad)}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 52px;color:var(--muted);font-size:.85rem;margin-top:36px}
.foot-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.disclosure{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
            padding:15px 17px;margin-top:20px;font-size:.81rem;line-height:1.6}
.disclosure b{color:var(--ink)}

/* loading overlay — mirrors the landing page's "checking every supplier" beat */
.loading{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
         background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(3px)}
.loading-card{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);
              border-radius:18px;padding:22px 26px;box-shadow:var(--shadow-lift);max-width:92vw}
.loading-card b{font-size:1.02rem;letter-spacing:-.01em}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--line);
         border-top-color:var(--brand);animation:spin .85s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .secondary,.followup .fu{grid-template-columns:1fr}
  .why{grid-template-columns:repeat(2,1fr)}
  .offer{grid-template-columns:minmax(0,1fr) auto;gap:14px}
  .offer-sup{grid-column:1/-1;padding-top:10px;border-top:1px dashed var(--line)}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .nav-links{display:none}
  .nav-menu{display:block}
  .nav-in{height:56px}
  .stage-in{padding-block:28px 26px}
  .hero h1{font-size:clamp(1.85rem,8vw,2.3rem)}
  .hero .lead{font-size:.97rem;margin-top:12px}
  .search{padding:14px;margin-top:22px}
  .mode span{font-size:.8rem;padding:10px 3px;letter-spacing:-.01em}
  .main-row .field,.main-row .field.wide{flex:1 1 100%}
  .who{gap:12px}.who .field{flex:1 1 100%}
  .beat-offer{flex-wrap:wrap;gap:11px}
  .beat-offer p{flex:1 1 100%;order:2}
  .beat-offer .btn-gold{order:3;width:100%}
  .who .field.go{max-width:none;margin-left:0;padding-top:4px}
  .offer{grid-template-columns:1fr;gap:10px;padding:14px}
  .offer-car img{width:96px;height:60px}
  .offer-sup{grid-column:auto}
  .offer-price{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;
               column-gap:14px;padding-top:10px;border-top:1px dashed var(--line)}
  .offer-price .total{grid-row:1;grid-column:1;font-size:1.5rem}
  .offer-price .small{grid-column:1}
  .offer-price .btn{grid-row:1/span 3;grid-column:2;margin:0;padding:13px 20px}
  .why{grid-template-columns:1fr}
  .price-new{font-size:2.1rem}
  .save{margin-left:0;font-size:.88rem}
  .results-head h2{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- pickup-point comparison ---------- */
.cmp-table{width:100%;border-collapse:collapse;font-size:.94rem}
.cmp-table th{text-align:left;font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;padding:0 10px 8px;border-bottom:1px solid var(--line)}
.cmp-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table .num{text-align:right;white-space:nowrap}
.cmp-table th.num{text-align:right}
.cmp-table .row-best td{background:color-mix(in srgb,var(--gold) 12%,transparent)}
.cmp-name{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.cmp-name:hover,.cmp-name:focus-visible{color:var(--brand);border-bottom-color:currentColor}
@media (max-width:760px){
  .cmp-table{font-size:.88rem}
  .cmp-table th:nth-child(2),.cmp-table td:nth-child(2){display:none}  /* car count: least useful on a phone */
  /* The "Search here" column pushed the table past the right edge at 390px. The pickup
     name is already a link, so the whole row stays reachable without the extra column. */
  .cmp-table th:nth-child(5),.cmp-table td:nth-child(5){display:none}
  .cmp-table th,.cmp-table td{padding:9px 6px}
}

/* ---------- nearby depots: the "where are you starting from?" bar ---------- */
.near-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:18px}
.near-field{display:flex;flex-direction:column;gap:5px;flex:1 1 260px;min-width:0}
.near-field label{font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em}
.near-field input,.near-field select{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);color:var(--ink);font:inherit;font-size:.94rem}
.near-field input:focus-visible,.near-field select:focus-visible{outline:2px solid var(--brand);
  outline-offset:1px;border-color:var(--brand)}
.near-radius{flex:0 0 130px}
.near-bar .btn{flex:0 0 auto}
@media (max-width:560px){
  .near-bar{gap:10px}
  .near-radius{flex:1 1 120px}
  .near-bar .btn{flex:1 1 100%}
}

/* The deposit-card gate: a question worth interrupting for, because being refused at the
   desk costs the whole trip. Loud, but only where most suppliers would refuse. */
.card-gate{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.card-gate .btn{flex:0 0 auto;margin-left:auto}
@media (max-width:560px){.card-gate .btn{margin-left:0;width:100%;text-align:center}}

/* Above the first price, only a genuine gate earns a panel. Secondary routes are a line. */
.elsewhere,.all-share{margin:10px 0 0}
.all-share{margin-bottom:-4px}

/* ---------- tools index ---------- */
.tool-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tool-list li{padding:18px 20px}
.tool-list h2{margin:0 0 6px;font-size:1.06rem}
.tool-list h2 a{color:var(--brand);text-decoration:none}
.tool-list h2 a:hover,.tool-list h2 a:focus-visible{text-decoration:underline}
.tool-list p{margin:0;font-size:.95rem;line-height:1.55}

/* ---------- filter chips (deposit card) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0 2px}
.chip-label{font-size:.74rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:.86rem;text-decoration:none;line-height:1.3}
.chip:hover,.chip:focus-visible{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.chip-n{font-size:.78rem;opacity:.75;font-variant-numeric:tabular-nums}
.chip.on .chip-n{opacity:.9}

/* Sortable column headings: the control sits where the eye already is. */
.th-sort{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line);
  white-space:nowrap;cursor:pointer}
.th-sort:hover,.th-sort:focus-visible{color:var(--brand);border-bottom-color:currentColor}
.th-sort.on{color:var(--ink);border-bottom-color:transparent;font-weight:800}

/* Depot rows: what differs between the cars being quoted, never what they all share. */
.depot-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.depot-badges .badge{font-size:.72rem}

/* A pick-up row carries the same evidence a result card does: the car, who rents it,
   and how they are rated - so the choice can be made here rather than four clicks in. */
.depot-row{display:flex;gap:11px;align-items:flex-start}
.depot-img{flex:0 0 auto;width:78px;height:46px;object-fit:contain;border-radius:6px;
  background:color-mix(in srgb,var(--ink) 4%,transparent)}
.depot-main{min-width:0}
.depot-rating{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:5px;
  background:color-mix(in srgb,var(--ok,#2f7d4f) 16%,transparent);
  color:var(--ink);font-weight:700;font-size:.72rem;white-space:nowrap}
@media (max-width:560px){
  .depot-img{width:56px;height:34px}
  .depot-row{gap:8px}
}

/* ---------- market reports ---------- */
.grid-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:16px}
.stat{padding:16px 18px}
.stat-n{font-family:var(--font-display,inherit);font-size:2.1rem;font-weight:800;line-height:1.05;color:var(--brand)}
.stat-l{font-weight:700;font-size:.9rem;margin:2px 0 6px}
.stat p{margin:0}
.guide-points{margin:0;padding-left:18px;display:grid;gap:10px}
.guide-points li{line-height:1.55}
.cta-band{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}

/* Methodology: available to anyone who wants it, not in the way of anyone who does not. */
.method{padding:14px 18px}
.method summary{cursor:pointer;font-size:.95rem}
.method p,.method ul{font-size:.9rem;line-height:1.55}
.method ul{margin:8px 0;padding-left:18px;display:grid;gap:6px}

/* A share reads faster as a bar than as a number in a sentence. */
.bar-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.bar-list li{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;gap:10px;align-items:center}
.bar-l{font-size:.9rem}
.bar{height:9px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);position:relative}
.bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:99px;background:var(--brand)}
.bar-n{font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:520px){.bar-list li{grid-template-columns:1fr auto;}.bar{grid-column:1/-1}}

/* Breadcrumbs: small, quiet, and only where there is a real hierarchy to show. */
.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 6px}
.crumbs span{margin:0 2px}
.method-list{margin:0}
.method-list dt{font-weight:700;margin-top:14px;font-size:.96rem}
.method-list dt:first-child{margin-top:0}
.method-list dd{margin:4px 0 0;line-height:1.55;font-size:.94rem}

.country-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.country-list li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}

/* Five columns is one too many on a phone: full cover is the least decisive, so it goes. */
@media (max-width:640px){ .sup-table .col-wide{display:none} }
.sup-table td{vertical-align:top}

/* Condition-guide index: cards that carry their headline number, so the page is worth
   reading rather than being a list of links. */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.topic-card{display:block;text-decoration:none;color:inherit;transition:border-color .12s ease}
.topic-card:hover{border-color:var(--brand)}
.topic-card h2{margin:0 0 6px;font-size:1.05rem}
.topic-card .topic-n{font-family:var(--font-display);font-weight:800;font-size:1.8rem;margin:2px 0 2px;color:var(--brand)}
.topic-card p{margin:0 0 8px}

/* Named picks (FORM_AND_CARD_DESIGN_2026-09-23, Stage C). Tokens only, so dark mode
   follows the :root overrides with no rules of its own. Wraps to one per row on a phone. */
.picks{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pick-main{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--ink);text-decoration:none}
a.pick-main:hover .pick-label{color:var(--brand)}
.pick-label{font-weight:700;font-size:.9rem}
.pick-price{font-weight:700;font-size:1.1rem}
.pick-car{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-also{font-size:.76rem;color:var(--good);font-weight:600}

/* Residence + the 30-65 age switch (DiscoverCars' pattern). The age box shows only when the
   switch is off; :has() needs no JS, and where it is unsupported the box simply stays
   visible, which is the safe way to fail. */
.age-wrap .switch{padding:6px 0 2px}
.age-wrap:has(#age_ok:checked) .age-box{display:none}
.age-box{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.age-box input{max-width:120px}


/* Date+time fields overlapped their neighbour between ~761px and ~1100px (Jimi, 2026-09-23):
   a date box (165px) + gap (7px) + time box (118px, deliberately fixed for the iPhone
   clipping bug above) needs 290px, but flex shrank each field to 258px at 1024px, so the
   time box spilled 32px into the next field. The fix gives the fields room rather than
   shrinking the time box: each date field keeps 300px and wraps instead of squeezing. Up to
   1040px the Where box takes its own line, so the two date fields always wrap as a pair,
   never leaving drop-off stranded alone. Phones (<=760px) keep their stacked layout. */
@media (min-width:761px){ .main-row .field.wide{flex:1 1 300px;min-width:300px} }
@media (min-width:761px) and (max-width:1040px){ .main-row .field.grow{flex-basis:100%} }
/* The smallest phones (320px, e.g. the first iPhone SE) had the same spill: a 258px field
   cannot hold a 165px date + 118px time. The time box keeps its iPhone-safe width, so the
   date box shrinks instead, with its padding trimmed so "23/10/2026" still clears the
   calendar icon. Measured clean at 320, 375, 768, 800, 900, 1024, 1060, 1190 and 1280px. */
@media (max-width:400px){
  .dt{grid-template-columns:minmax(0,1fr) 118px}
  .dt input[type=date]{min-width:0;width:100%;padding-left:9px;padding-right:6px}
}

/* Popular filters (2026-09-23). An unavailable option stays visible but inert; "More filters"
   is dashed so it reads as a door to the panel, not another toggle. */
.chip.more{color:var(--brand);font-weight:600;border-color:var(--brand)}
.chip.more .ico{margin-right:5px;flex:none}
/* Open panel = pressed, not filled: solid coral means "filter applied" on every other chip,
   and coral text on it made the label vanish (2026-09-23). */
.chip.more.open{background:var(--surface-2);color:var(--brand);border-color:var(--brand)}

/* Phones: the popular filters are ONE line you swipe, not five wrapped lines pushing the
   first price down (177px measured at 375px, 2026-09-23). "More filters" moves to the front
   so the door to the full panel is never scrolled out of sight, with the 2nd-driver chip
   right after it. The right-edge fade says "there is more". */
@media (max-width:760px){
  .chip-row.quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(to right,#000 90%,transparent);mask-image:linear-gradient(to right,#000 90%,transparent)}
  .chip-row.quick::-webkit-scrollbar{display:none}
  .chip-row.quick .chip{flex:none;white-space:nowrap}
  .chip-row.quick .chip-label{display:none}
  .chip-row.quick .chip.more{order:-1}
}

/* Compact car card on phones (2026-09-23). Was 467px at 375px wide - under two cards a
   screen - because the photo took a column and several facts were said twice. The card
   becomes one grid: photo | name | EXACT price, specs under the name, supplier with Book
   beside it, then the badges and the small print. The wrappers become display:contents so
   their children can be placed. Desktop never sees any of this. */
.m-only{display:none}
@media (max-width:760px){
  .m-only{display:inline}
  .d-only,.m-hide{display:none}
  .offer{grid-template-columns:60px minmax(0,1fr) auto;column-gap:10px;row-gap:5px;padding:16px 12px 12px}
  .offer-car,.offer-car>div,.offer-price{display:contents}
  .offer-car img{grid-row:1/3;grid-column:1;width:60px;height:auto;align-self:start;margin-top:2px}
  .offer .car-name{grid-row:1;grid-column:2;line-height:1.25;min-width:0}
  .offer .car-name b{font-size:.98rem}
  .offer-price .total{grid-row:1;grid-column:3;font-size:1.2rem;text-align:right;white-space:nowrap;align-self:start}
  .offer .specs{grid-row:2;grid-column:2/4;margin-top:0;font-size:.8rem}
  .offer-sup{grid-row:3;grid-column:1/3;padding-top:4px;border-top:0;gap:8px}
  .offer-sup img{height:18px;max-width:60px}
  .offer-sup b{font-size:.88rem}
  .offer-price .btn{grid-row:3;grid-column:3;margin:0;padding:8px 16px;font-size:.9rem;align-self:center}
  .offer .badges{grid-row:4;grid-column:1/-1;margin-top:2px;gap:5px}
  .offer-price .small,.offer-price .handoff,.offer-price .variants{grid-column:1/-1;text-align:left}
  .offer-price .small{font-size:.76rem}
}

/* Cars first on a phone (2026-09-23). The picks become one compact list rather than two
   tall cards, and the report pointer, now below the cars, gets breathing room. */
.report-pointer{margin-top:18px}
@media (max-width:760px){
  .picks{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--surface);margin:12px 0 4px;overflow:hidden}
  .pick{border:0;border-radius:0;padding:8px 12px;gap:1px}
  .pick + .pick{border-top:1px solid var(--line)}
  .pick-price{font-size:1rem}
}


/* Refining in place (2026-09-23): the list dims for the fraction of a second the re-ranked
   results take, so a tap visibly did something. */
#results.refining .cards,#results.refining .picks{opacity:.45;transition:opacity .15s}
.load-more{display:block;width:max-content;margin:16px auto 4px}
.load-more.loading{opacity:.5;pointer-events:none}

/* Size tiles and the buttons behind Filters (2026-09-23). Tiles swipe sideways like the
   chips on a phone; the groups behind Filters wrap, each with its label on its own line on
   a phone. #moreChips:target is the no-JS way in. */
.size-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:12px 0 2px;padding-bottom:2px}
.size-strip::-webkit-scrollbar{display:none}
.size-tile{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:92px;padding:7px 10px 8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);text-decoration:none}
.size-tile img{width:64px;height:38px;object-fit:contain}
.size-tile:hover{border-color:var(--brand)}
.size-tile.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.size-name{font-size:.8rem;font-weight:700}
.size-price{font-size:.78rem;color:var(--muted)}
.chip-groups{margin:10px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
#moreChips:target{display:block}
.chip-group{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.chip-group + .chip-group{margin-top:10px}
.chip-group .chip-label{min-width:170px}
@media (max-width:760px){
  .chip-group .chip-label{flex-basis:100%;min-width:0}
  .size-tile{min-width:84px;padding:6px 8px}
  .size-tile img{width:56px;height:32px}
}

/* "At the desk" (2026-09-23): a quiet line under the badges, labelled so it reads as a
   separate kind of fact - money at the counter, not a feature of the car. */
.desk{margin:7px 0 0;font-size:.8rem;color:var(--ink);line-height:1.45}
.desk-label{display:inline-block;margin-right:6px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--surface-2);border-radius:5px;padding:2px 6px;vertical-align:1px}
@media (max-width:760px){ .offer .desk{grid-column:1/-1;margin-top:2px} }


/* iPhone date/time overlap (Jimi's screenshot, 2026-09-23, Brave on iOS - which is WebKit
   underneath, like every iOS browser). iOS draws <input type=date|time> as native controls
   that size themselves and ignore min-width:0 / width:100% inside the grid, so the date box
   ran into the time box and the time box ran past the card. Chromium does not do this, which
   is why the 320-1280px overlap probe was clean on desktop. Scoped to iOS with the WebKit-only
   -webkit-touch-callout feature query, so desktop and Android are untouched. appearance:none
   makes the controls obey their track; tapping still opens the native picker. The time column
   stays wider than the 118px that fixed the clipped hour on 2026-09-22. */
@supports (-webkit-touch-callout: none) {
  .dt{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .dt input[type=date],.dt input[type=time]{-webkit-appearance:none;appearance:none;display:block;
    min-width:0;width:100%;max-width:100%;box-sizing:border-box;text-align:left}
  .dt input::-webkit-date-and-time-value{text-align:left;margin:0}
}

/* The Brain Pick (2026-09-23): the first card, marked but not shouting - a coral border and
   ribbon, a green saving line only when one is measured, and the reasons behind a disclosure. */
.offer.brain{border:2px solid var(--brand);box-shadow:var(--shadow-lift)}
.brain-ribbon{background:var(--brand)}
.brain-saving{color:var(--good);font-weight:800;font-size:.9rem;margin-top:2px}
.brain-sub{color:var(--muted);font-size:.8rem;margin-top:2px}
.brain-also{color:var(--good);font-size:.78rem;font-weight:600}
.offer .why{grid-column:1/-1;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;font-size:.85rem}
.offer .why summary{cursor:pointer;font-weight:700;color:var(--brand)}
.offer .why ul{margin:6px 0 0;padding-left:18px;line-height:1.45}
.offer .why li{margin:3px 0}
.cards-divider{list-style:none;padding:10px 2px 2px;font-size:.85rem;font-weight:700;color:var(--muted)}
.cards-divider .alt-picks{font-weight:500}
@media (max-width:760px){
  .offer-price .brain-saving,.offer-price .brain-sub,.offer-price .brain-also{grid-column:1/-1;text-align:left}
}


/* Phone: the saving (or "Lowest real total") is the Brain pick's headline, so it sits in
   its own row right under the car and price - not auto-placed after the badges and the desk
   line, where the first release put it (2026-09-23 screenshot). The rows below shift down one. */
@media (max-width:760px){
  .offer.brain .offer-price .brain-saving,.offer.brain .offer-price .brain-sub{grid-row:3;grid-column:1/-1;margin-top:0}
  .offer.brain .offer-sup{grid-row:4}
  .offer.brain .offer-price .btn{grid-row:4}
  .offer.brain .badges{grid-row:5}
}