/* ============================================================================
   PAGES — surfaces that belong to one screen: hero, catalog, lot, calculator,
   VIN, track, compare, partners, guides, shipping map, account.
   ========================================================================= */

/* ---- home hero ---------------------------------------------------------- */
.hero{position:relative;overflow:hidden;color:#eaf2fb;padding:var(--sec-y-lg) 0;
      background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 55%,#12406e 100%)}
/* The lane stripes are the site's signature device — a nod to auction lane markings,
   drawn in CSS so it costs no request and scales to any viewport. */
.hero::before{content:"";position:absolute;inset:0;background:var(--lane);pointer-events:none}
/* the lane edge: one angled red rule closing the dark band — the motif's decisive stroke */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
             background:var(--lane-edge);pointer-events:none}
.hero>*{position:relative}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-9);align-items:center}
.hero h1{color:#fff}
.hero .lede{color:var(--on-dark)}
.hero .eyebrow{color:#ff8f8f}
.hero-search{display:flex;gap:var(--s-2);margin:var(--s-6) 0 var(--s-3);max-width:540px}
.hero-search input{flex:1;padding:14px 16px;border:0;border-radius:11px;font-size:var(--t-base);
                   font-family:inherit;min-width:0}
.hero-actions{display:flex;gap:var(--s-3);margin:var(--s-3) 0 var(--s-7);flex-wrap:wrap}
.hero-actions .btn-ghost{border-color:#fff;color:#fff}
.hero-actions .btn-ghost:hover{background:#fff;color:var(--navy)}
.hero-stats{display:flex;gap:var(--s-8);flex-wrap:wrap}
.hero-stats b{display:block;font-size:1.7rem;color:#fff;font-variant-numeric:tabular-nums;
              letter-spacing:var(--track-display)}
.hero-stats span{font-size:var(--t-sm);color:#9fbadb}

/* Live-inventory showcase: the hero image *is* the product. Real lots, refreshed
   every render — it proves the catalog is live in a way stock photography cannot. */
.hero-showcase{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;
               gap:var(--s-3);align-content:center}
.hs-tile{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
         background:#0d2c4c;border:1px solid rgba(255,255,255,.16);
         box-shadow:0 18px 40px rgba(3,14,28,.42);color:#fff;
         transition:transform var(--dur) var(--ease)}
.hs-tile:hover{text-decoration:none;transform:translateY(-3px)}
.hs-tile.hs-lead{grid-row:span 2}
.hs-tile img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;
             background:#0d2c4c}
.hs-tile.hs-lead img{aspect-ratio:3/4}
.hs-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s-6) var(--s-3) var(--s-3);
        background:linear-gradient(to top,rgba(4,15,28,.92),rgba(4,15,28,0));
        font-size:var(--t-sm);line-height:1.3}
.hs-cap b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-cap span{color:#9fbadb;font-size:var(--t-xs)}
.hs-live{position:absolute;top:var(--s-3);left:var(--s-3);display:inline-flex;align-items:center;
         gap:6px;background:rgba(4,15,28,.72);backdrop-filter:blur(4px);border-radius:var(--r-pill);
         padding:4px 10px;font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;
         text-transform:uppercase}
@media(max-width:900px){
  .hero-showcase{grid-template-columns:1fr 1fr;margin-top:var(--s-7)}
  .hs-tile.hs-lead{grid-row:span 1}
  .hs-tile.hs-lead img{aspect-ratio:4/3}
  .hs-tile:nth-child(3){display:none}
}
@media(max-width:520px){
  .hero{padding:var(--s-8) 0 var(--s-9)}
  .hero-actions{gap:var(--s-3)}
  .hero-actions .btn{flex:1 1 100%}
  .hero-stats{gap:var(--s-5)}
}

/* trust strip under the hero */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-inner{display:flex;gap:var(--s-8);flex-wrap:wrap;justify-content:space-between;
             padding:var(--s-5) var(--s-5)}
.trust-item{display:flex;align-items:center;gap:var(--s-3);color:var(--navy);font-weight:600;
            font-size:.94rem}
.trust-item .i{color:var(--red);width:1.3em;height:1.3em}

/* ---- home sections ------------------------------------------------------ */
.steps{padding:var(--sec-y) 0}
.samples,.sold{padding:var(--sec-y) 0}
.samples.alt{background:var(--paper-2)}
.delivery{position:relative;overflow:hidden;padding:var(--sec-y) 0;color:#fff;
          background:linear-gradient(160deg,var(--navy-3),var(--navy))}
.delivery::before{content:"";position:absolute;inset:0;background:var(--lane);pointer-events:none}
.delivery::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
                 background:var(--lane-edge);pointer-events:none}
.delivery>*{position:relative}
.delivery-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s-8);align-items:start}
.delivery h2{color:#fff;font-size:1.9rem;margin:0 0 .3em}
.delivery .lede{color:var(--on-dark)}
.delivery-ticks li{color:#dbe7f5}
.browse-makes{padding:var(--s-2) 0 var(--sec-y)}
.browse-makes .chips{margin-top:var(--s-1)}
.explain{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-5)}
.explain li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
            border-radius:var(--r-sm);padding:var(--s-5) var(--s-6)}
.explain h3{margin:0 0 .3em;color:var(--navy)}

/* ---- lead block --------------------------------------------------------- */
.lead-block{position:relative;overflow:hidden;padding:var(--sec-y) 0;color:#fff;
            background:linear-gradient(160deg,var(--navy-3),var(--navy))}
.lead-block::before{content:"";position:absolute;inset:0;background:var(--lane);pointer-events:none}
.lead-block::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;
                   background:var(--lane-edge);pointer-events:none}
.lead-block>*{position:relative}
.lead-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-9);align-items:center}
.lead-copy h2{font-size:1.9rem;margin:0 0 .4em;color:#fff}
.lead-copy p{color:var(--on-dark)}
.lead-form{background:#fff;border-radius:var(--radius);padding:var(--s-6);display:grid;
           gap:var(--s-3)}
.lead-form .row{display:grid;gap:var(--s-3)}
.lead-form .row.two{grid-template-columns:1fr 1fr}
.thanks{padding:var(--s-11) 0}
.thanks-mark{width:72px;height:72px;border-radius:50%;background:var(--ok);color:#fff;
             display:grid;place-items:center;margin:0 auto var(--s-5)}
.thanks-mark .i{width:34px;height:34px}

/* ---- calculator --------------------------------------------------------- */
.calc{padding:var(--sec-y) 0}
.calc-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-7);align-items:start}
.calc-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
           padding:var(--s-6);display:grid;gap:var(--s-4);box-shadow:var(--shadow)}
/* explicit display:grid/flex beats the [hidden] attribute's UA display:none — restore it */
.calc-form[hidden],.calc-result[hidden]{display:none}
.calc-form label{display:grid;gap:6px;font-weight:600;font-size:.92rem;color:var(--navy)}
.calc-result{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
             padding:var(--s-6);box-shadow:var(--shadow)}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;
            border-bottom:2px solid var(--line);padding-bottom:var(--s-3);margin-bottom:var(--s-3)}
.calc-total b{font-size:2rem;color:var(--red);font-variant-numeric:tabular-nums}
.calc-modes{grid-column:1/-1;display:flex;gap:var(--s-2);background:var(--paper-2);
            border-radius:var(--r-md);padding:5px}
.calc-mode{flex:1;border:0;background:transparent;padding:10px 14px;border-radius:9px;
           font-weight:700;font-size:.95rem;color:var(--muted);cursor:pointer;font-family:inherit}
.calc-mode.on{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.scheme-banner{display:inline-block;background:#efe7ff;border:1px solid #d5c4f2;color:#5b3d9e;
               border-radius:var(--r-sm);padding:var(--s-2) var(--s-4);margin-top:var(--s-3);
               font-size:.95rem}
.budget-wrap{display:flex;align-items:stretch}
.budget-wrap input{flex:1;border-top-right-radius:0;border-bottom-right-radius:0}
.cur-badge{display:flex;align-items:center;padding:0 12px;background:var(--paper-2);
           border:1px solid var(--line);border-left:0;border-top-right-radius:9px;
           border-bottom-right-radius:9px;font-weight:800;color:var(--navy);font-size:.9rem;
           min-width:52px;justify-content:center}
.maxbid-total b{color:var(--ok)}
.budget-banner{grid-column:1/-1;background:#eafaf0;border:1px solid #b7e4c7;color:var(--navy);
               border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);font-weight:600;
               margin-bottom:var(--s-4)}
.budget-banner a{color:var(--navy);text-decoration:underline}
.landed-box{background:#eef6f0;border:1px solid #cfe6d8;border-radius:var(--r-md);
            padding:var(--s-4);margin:var(--s-4) 0}
.landed-box h3{margin:0 0 var(--s-3);font-size:1.02rem;color:var(--navy)}
.landed-form{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.landed-form select{padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
                    font-family:inherit}
.landed-out{margin-top:var(--s-3)}
.landed-total{font-size:1.5rem;font-weight:800;color:var(--ok)}
.landed-total span{font-size:.9rem;color:var(--muted);font-weight:600}
.landed-rows{font-size:var(--t-sm);color:var(--navy);margin:var(--s-1) 0}
.landed-local,.calc-local{font-size:.9rem;color:var(--accent);font-weight:700;white-space:nowrap}
/* A rate we could not refresh: still shown, but it must not read as today's number. */
.calc-local-stale{color:var(--muted,#6b7280);font-weight:600;white-space:normal}
.landed-loc{margin:2px 0}
.landed-example{display:flex;gap:var(--s-3);align-items:flex-start;background:#eafaf0;
                border:1px solid #b7e4c7;border-radius:var(--r-md);padding:var(--s-4) var(--s-5);
                margin:var(--s-5) 0}
.landed-example .le-icon{color:var(--ok)}
.landed-example p{margin:0;color:var(--navy);line-height:var(--lh-body);font-size:1.02rem}
.landed-example a{font-weight:700;white-space:nowrap}

/* ---- catalog ------------------------------------------------------------ */
.catalog{padding:var(--s-6) 0 var(--sec-y)}
.catalog-inner{display:block}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
         padding:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:end;
         box-shadow:var(--shadow);margin-bottom:var(--s-6);scroll-margin-top:80px}
.filters label,.filters .pair-label{display:grid;gap:5px;font-weight:600;font-size:var(--t-xs);
                                    color:var(--muted);text-transform:uppercase;
                                    letter-spacing:.03em}
.filters .pair{display:grid;gap:5px}
.filters .two{display:flex;gap:6px}
.filters .two label{flex:1}
.filters input,.filters select{padding:9px 10px;border:1px solid var(--line);
                               border-radius:var(--r-sm);font-size:.92rem;font-family:inherit;
                               color:var(--ink);background:#fff}
.filters input[name=q]{min-width:220px}
.filters .two input{width:78px}
.filters>label{flex:0 0 auto}
.filters .fbtn{align-self:end}
/* Summary row replaces the whole panel once you scroll past it — 175px of sticky chrome
   (header + filter card) ate a third of a laptop screen. */
.filter-summary{position:sticky;top:var(--head-h);z-index:10;display:none;align-items:center;
                gap:var(--s-3);flex-wrap:wrap;background:rgba(255,255,255,.96);
                backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--r-pill);
                padding:var(--s-2) var(--s-4);margin-bottom:var(--s-4);box-shadow:var(--shadow-sm);
                font-size:.9rem;color:var(--navy)}
.filter-summary.on{display:flex}
.filter-summary b{font-weight:700}
.filters-toggle{display:none;width:100%;margin-bottom:var(--s-3)}
.quick-lists{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.results-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
             gap:var(--s-3);margin-bottom:var(--s-4);color:var(--muted);font-size:.9rem}
.results-bar b{color:var(--navy)}
.per-page a{display:inline-block;padding:2px 9px;border-radius:6px;margin-left:2px;
            color:var(--navy);font-weight:700}
.per-page a.on{background:var(--navy);color:#fff}
.pager{display:flex;gap:var(--s-4);align-items:center;justify-content:center;margin-top:var(--s-7)}
.pager-info{color:var(--muted);font-weight:600}
.vin-banner{display:flex;align-items:center;gap:var(--s-3);background:#eaf3ff;
            border:1px solid #b9d7ff;color:var(--navy);border-radius:var(--r-sm);
            padding:var(--s-3) var(--s-4);font-weight:600;margin-bottom:var(--s-4)}
.vin-banner:hover{text-decoration:none;background:#dcecff}
@media(max-width:900px){
  .filters{position:static;display:none}
  .filters.open{display:flex}
  .filters-toggle{display:block}
  .filters input[name=q]{min-width:100%}
  .filters label{flex:1 1 42%}
  .filter-summary{display:none!important}
}

/* ---- lot detail --------------------------------------------------------- */
.lot-detail{padding:var(--s-7) 0 var(--sec-y)}
.back{display:inline-block;margin-bottom:var(--s-4);color:var(--muted);font-weight:600}
.lot-top{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:start}
/* The info column runs thousands of px past the gallery; pinning it keeps the car in view
   instead of leaving half the page blank while you read the specs. */
@media(min-width:901px){.lot-top>.gallery{position:sticky;top:84px}}
.gallery .gal-main{position:relative;background:#dbe3ec;border-radius:var(--radius);
                   overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;
                   justify-content:center;color:#8aa0b4;cursor:zoom-in}
.gallery .gal-main img{width:100%;height:100%;object-fit:cover}
.gal-count{position:absolute;right:10px;bottom:10px;background:rgba(10,37,64,.82);color:#fff;
           font-size:var(--t-xs);font-weight:700;padding:5px 10px;border-radius:var(--r-pill);
           display:inline-flex;align-items:center;gap:5px}
/* A fixed 6-up grid left a ragged second row; auto-fill keeps every thumb the same size
   and the overflow count tells you there are more. */
.gal-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;
            margin-top:var(--s-2)}
.gthumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.62;
        border:2px solid transparent;transition:opacity var(--dur) var(--ease)}
.gthumb.on,.gthumb:hover{opacity:1;border-color:var(--red)}
.lot-info h1{font-size:1.7rem;margin:.2em 0}
.lot-cta-m{display:none}
.lot-src{margin:var(--s-2) 0 0;font-size:var(--t-sm)}
.lot-src a{color:var(--muted)}
.bidbox{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;background:var(--navy);
        color:#fff;border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin:var(--s-4) 0}
.bid-label{display:block;font-size:var(--t-xs);color:#9fbadb;text-transform:uppercase;
           letter-spacing:var(--track-caps)}
.bid-val{font-size:1.7rem;color:#fff;font-variant-numeric:tabular-nums}
.buynow{margin-left:var(--s-3);color:#5ad19a;font-weight:700}
.bidbox .btn-ghost{border-color:#fff;color:#fff}
.bidbox .minbid{margin-left:var(--s-3);font-size:var(--t-sm);color:#9fbadb;font-weight:600}
.bid-note{font-size:var(--t-sm);color:#9fbadb}
/* lot-page tabs: specs / history / decode moved out of the endless right column */
.lot-tabs{display:flex;gap:var(--s-1);border-bottom:2px solid var(--line);margin:var(--s-7) 0 0;
          overflow-x:auto}
.lot-tab{flex:0 0 auto;border:0;background:none;font-family:inherit;font-size:.98rem;
         font-weight:700;color:var(--muted);padding:var(--s-3) var(--s-4);cursor:pointer;
         border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.lot-tab.on{color:var(--navy);border-bottom-color:var(--red)}
.lot-panel{padding-top:var(--s-5)}
.lot-panel[hidden]{display:none}
.lot-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start}
@media(max-width:760px){.lot-cols{grid-template-columns:1fr}}
.hist{margin-top:var(--s-7);background:#fff;border:1px solid var(--line);
      border-radius:var(--radius);padding:var(--s-5) var(--s-6)}
.hist h2{font-size:var(--t-xl);margin:0 0 var(--s-3)}
.soldrow{display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap;padding:var(--s-3) 0;
         border-bottom:1px solid #eef2f6}
.soldrow b{color:var(--red);font-size:1.15rem}
.spec-title{margin:var(--s-6) 0 var(--s-2);color:var(--navy);font-size:1.05rem}
.bid-extras td{color:var(--navy);font-weight:600}
.reserve-badge{margin:var(--s-2) 0 0;padding:var(--s-2) var(--s-3);border-radius:9px;
               font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:var(--s-2)}
.reserve-badge.ok{background:#e9f7f0;color:var(--ok);border:1px solid #cfe6d8}
.reserve-badge.warn{background:#fff5e9;color:#a86413;border:1px solid #f0dcc0}
.mktval{margin:var(--s-2) 0 0;font-size:.95rem;color:var(--navy)}
.mktval b{font-size:1.15rem;color:var(--ok)}
.countdown{margin:var(--s-2) 0 0;font-size:.95rem;color:var(--navy);background:#f5f7fa;
           border:1px solid var(--line);border-radius:9px;padding:var(--s-2) var(--s-3);
           display:flex;align-items:center;gap:var(--s-2)}
.countdown b{color:var(--accent);font-variant-numeric:tabular-nums}
.countdown.cd-soon{background:#fff5e9;border-color:#f0dcc0}
.countdown.cd-soon b{color:#a86413}
.countdown.cd-live{background:#fdeeee;border-color:#f2cccc;color:var(--red);font-weight:700}
.sellerbox{background:#faf7ef;border:1px solid #ece2c9;border-radius:var(--r-md);
           padding:var(--s-4);margin:var(--s-4) 0}
.sellerbox h3,.detailbox h3,.livebox h3{margin:0 0 var(--s-3);font-size:1.02rem;color:var(--navy);
                                        display:flex;align-items:center;gap:var(--s-2)}
.sellerbox h3 small,.detailbox h3 small{font-weight:600}
.detailbox{background:#f5f7fa;border:1px solid var(--line);border-radius:var(--r-md);
           padding:var(--s-4);margin:var(--s-4) 0}
.detailbox .detail-note td{color:#a12;font-weight:600}
/* live-auction state (recorded from the running lane) — tone-coded so the outcome reads at a glance */
.livebox{border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-4) 0;border:1px solid #e3e7ee;
         background:#f7f9fc}
.livebox .spec{margin:0}
.livebox.live-live{background:#fff5f5;border-color:#f3c9c9}
.livebox.live-sold{background:#f2f9f3;border-color:#cfe6d4}
.livebox.live-approval{background:#fdf8ec;border-color:#eddfba}
.livebox.live-buynow{background:#f3f7ff;border-color:#cddcf5}
.import-check{display:flex;gap:var(--s-3);align-items:flex-start;border-radius:var(--r-sm);
              padding:11px 14px;margin:var(--s-3) 0;border:1px solid}
.import-check .ic-icon{flex:none;margin-top:.1em}
.import-check .ic-body{font-size:.95rem;color:var(--navy)}
.import-check .ic-note{font-size:var(--t-sm);margin-top:2px}
.import-check.ic-green{background:#eafaf0;border-color:#b7e4c7}
.import-check.ic-amber{background:#fff4e0;border-color:#f2d9a8}
.import-check.ic-red{background:#fde8e8;border-color:#f2c0c0}
.dmg-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
         padding:var(--s-4);margin:var(--s-4) 0;box-shadow:var(--shadow-sm)}
.dmg-box h3{margin:0 0 var(--s-3);font-size:1.02rem;color:var(--navy);display:flex;
            align-items:center;gap:var(--s-2)}
.dmg-wrap{display:flex;gap:var(--s-4);align-items:center}
.dmg-wrap.dmg-nozones{gap:0}
.dmg-car{width:96px;height:auto;flex:none}
.dmg-car .dmg-body{fill:#eef1f5;stroke:#cfd6de;stroke-width:2}
.dmg-car .dmg-glass{fill:#dbe3ec}
.dmg-car .dmg-hit{fill:var(--red);fill-opacity:.62}
.dmg-legend{font-size:.9rem;color:var(--navy);display:grid;gap:5px}
.dmg-legend .dmg-k{display:inline-block;min-width:78px;color:var(--muted);font-size:var(--t-xs);
                   text-transform:uppercase;letter-spacing:.03em;font-weight:700}
.dmg-airbag-hit{color:var(--red);font-weight:700}
#galMain.spinning{cursor:grab;touch-action:none;user-select:none}
#galMain.spinning:active{cursor:grabbing}
.pricectx{background:#eff5fb;border:1px solid #d3e4f5;border-radius:var(--r-md);
          padding:var(--s-4);margin:var(--s-4) 0}
.pricectx h3{margin:0 0 var(--s-3);font-size:1.02rem;color:var(--navy);display:flex;
             align-items:center;gap:var(--s-2)}
.pricectx h3 small{font-weight:600}
.pricectx-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-2);
              padding-bottom:9px;border-bottom:3px solid;
              border-image:linear-gradient(90deg,var(--ok),var(--accent),var(--red)) 1;
              font-weight:700}
.pricectx-bar .pc-lo{color:var(--ok)}
.pricectx-bar .pc-mid{color:var(--accent);font-size:1.15rem}
.pricectx-bar .pc-hi{color:var(--red)}
.pricectx-this{margin:var(--s-3) 0 var(--s-1);font-size:.9rem;color:var(--navy)}
.pricectx-this .pc-below{color:var(--ok);font-weight:700}
.pricectx-this .pc-above{color:var(--red);font-weight:700}
.deal-badge{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3);
            padding:9px 12px;border-radius:9px;border:1px solid}
.deal-badge b{font-size:1.15rem}
.deal-tag{font-weight:700;font-size:.9rem}
.deal-why{color:var(--muted);font-size:.8rem}
.deal-badge.deal-deal{background:#e7f7ee;border-color:#bfe6cf}
.deal-badge.deal-deal .deal-tag{color:#0f7a4d}
.deal-badge.deal-below{background:#eef7f0;border-color:#cfe6d8}
.deal-badge.deal-below .deal-tag{color:var(--ok)}
.deal-badge.deal-mid{background:#f5f7fa;border-color:var(--line)}
.deal-badge.deal-mid .deal-tag{color:var(--muted)}
.deal-badge.deal-above{background:#fdeeee;border-color:#f2cccc}
.deal-badge.deal-above .deal-tag{color:var(--red)}
.deal-deal-txt,.deal-below-txt{color:var(--ok);font-weight:700}
.deal-mid-txt{color:var(--muted);font-weight:700}
.deal-above-txt{color:var(--red);font-weight:700}
.safety-grid{display:flex;flex-wrap:wrap;gap:7px;margin:var(--s-1) 0}
.safety-item{background:#eef7f1;border:1px solid #cfe6d8;color:#12603f;border-radius:16px;
             padding:5px 11px;font-size:var(--t-sm);font-weight:600;display:inline-flex;
             align-items:center;gap:5px}
.safety-item small{font-weight:500}

/* photo lightbox — replaces swapping the main image src with no way back */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(4,12,22,.94);display:grid;
          place-items:center;padding:var(--s-6)}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r-sm)}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.12);color:#fff;
                            border:0;width:46px;height:46px;border-radius:50%;cursor:pointer;
                            display:grid;place-items:center}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.24)}
.lb-close{top:var(--s-5);right:var(--s-5)}
.lb-prev{left:var(--s-5);top:50%;transform:translateY(-50%)}
.lb-next{right:var(--s-5);top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:var(--s-5);left:50%;transform:translateX(-50%);color:#9fbadb;
          font-size:var(--t-sm);font-weight:600}

/* ---- VIN + report ------------------------------------------------------- */
.vin-report{padding:var(--s-7) 0 var(--sec-y)}
.vin-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
          gap:var(--s-3);border-bottom:2px solid var(--line);padding-bottom:var(--s-3)}
.vin-head h2{margin:0}
.vin-code{background:var(--navy);color:#fff;padding:5px 12px;border-radius:var(--r-sm);
          letter-spacing:.05em;font-weight:600;font-family:var(--font-num)}
.vin-sec{margin:var(--s-6) 0 var(--s-3);color:var(--navy)}
.vin-intro{padding:var(--sec-y) 0 var(--s-2)}
.vin-intro .step-grid{margin-bottom:var(--s-4)}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3)}
.spec-grid .spec{display:flex;flex-direction:column;gap:2px;background:#fff;
                 border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;margin:0}
.spec-grid .spec span{font-size:.7rem;color:var(--muted);text-transform:uppercase;
                      letter-spacing:.03em}
.spec-grid .spec b{color:var(--navy)}
.sold-chart{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
            padding:var(--s-4);box-shadow:var(--shadow-sm);margin-bottom:var(--s-4)}
.sold-chart svg{width:100%;height:190px;display:block;overflow:visible}
.sold-chart .sc-dot{fill:var(--accent);fill-opacity:.6}
.sold-chart .sc-median{stroke:var(--ok);stroke-width:1.5;stroke-dasharray:5 4}
.sc-axes{display:flex;justify-content:space-between;color:var(--muted);font-size:var(--t-sm);
         font-weight:600;margin-top:var(--s-2)}
.sold-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s-3)}
.sold-item{display:flex;gap:var(--s-3);background:#fff;border:1px solid var(--line);
           border-radius:var(--r-sm);padding:var(--s-2);box-shadow:var(--shadow-sm)}
.sold-item img{width:76px;height:57px;object-fit:cover;border-radius:6px;flex:none}
.sold-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sold-item-body b{color:var(--ok);font-size:1.05rem}
.sold-item-body span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- track -------------------------------------------------------------- */
.track-form{display:flex;gap:var(--s-3);max-width:520px;margin-top:var(--s-4)}
.track-form input{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
                  font-size:var(--t-base);font-family:inherit;text-transform:uppercase;
                  font-family:var(--font-num)}
.track-body{padding:var(--sec-y) 0}
.track-preview{margin-bottom:var(--s-7)}
.track-note{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
            padding:var(--s-6);box-shadow:var(--shadow-sm);max-width:70ch}
.track-note p{margin:0 0 .6em}
.track-note p:last-child{margin-bottom:0}
.track-empty{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
             padding:var(--s-6);box-shadow:var(--shadow);text-align:center;max-width:680px;
             margin:var(--s-3) auto}
.track-empty code{background:#f1f4f8;padding:2px 7px;border-radius:6px;font-family:var(--font-num)}
.track-empty .landing-cta{justify-content:center}
.ship-head{margin-bottom:var(--s-4)}
.ship-head h2{margin:0 0 6px}
.ship-badge{display:inline-block;padding:4px 12px;border-radius:16px;font-weight:700;
            font-size:var(--t-sm);background:#eef5fb;color:var(--accent);border:1px solid #d3e4f5}
.ship-badge.ship-delivered{background:#e9f7f0;color:var(--ok);border-color:#cfe6d8}
.ship-meta{margin-top:var(--s-3);max-width:460px}

/* ---- shipping map -------------------------------------------------------- */
.ship-map-wrap{padding-bottom:var(--sec-y)}
.ship-controls{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:flex-end;
               margin-bottom:var(--s-4)}
.ship-controls label{display:grid;gap:5px;font-weight:600;font-size:.9rem;color:var(--navy)}
.ship-controls select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;
                      font-size:.95rem;font-family:inherit;min-width:220px}
.ship-map{height:460px;border-radius:var(--radius);border:1px solid var(--line);
          box-shadow:var(--shadow);z-index:0}
.ship-price{margin-top:var(--s-4);background:#fff;border:1px solid var(--line);
            border-radius:var(--r-md);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow)}
.ship-price-big{font-size:2rem;font-weight:800;color:var(--red);margin:2px 0}
.ship-price-big span{font-size:var(--t-base);color:var(--muted);font-weight:600}
.track-map{height:280px;border-radius:var(--r-md);border:1px solid var(--line);z-index:0}
.car-pin{line-height:1;text-align:center;color:var(--red);
         filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* ---- compare ------------------------------------------------------------ */
.compare-wrap{padding:var(--s-5) 0 var(--sec-y)}
.compare-scroll{overflow-x:auto}
.compare-table{border-collapse:collapse;min-width:100%;font-size:.92rem}
.compare-table th{text-align:left;color:var(--muted);font-size:var(--t-xs);text-transform:uppercase;
                  letter-spacing:.03em;font-weight:700;padding:var(--s-2) var(--s-3);
                  white-space:nowrap;position:sticky;left:0;background:#fff;z-index:1}
.compare-table td{padding:var(--s-2) var(--s-3);border-left:1px solid var(--line);
                  vertical-align:top;min-width:170px;color:var(--navy)}
.compare-table tr{border-bottom:1px solid var(--line)}
.cmp-photos td{position:relative}
.cmp-photos img{width:100%;max-width:220px;height:130px;object-fit:cover;border-radius:var(--r-sm)}
.cmp-noimg{height:130px;display:grid;place-items:center;background:#eef1f5;
           border-radius:var(--r-sm);color:var(--muted)}
.cmp-remove{position:absolute;top:4px;right:4px;background:rgba(10,37,64,.7);color:#fff;border:0;
            border-radius:50%;width:26px;height:26px;cursor:pointer;display:grid;place-items:center}
.cmp-price{font-size:1.1rem;color:var(--ok)}

/* ---- partners ------------------------------------------------------------ */
.ph-kicker{display:inline-block;background:#eef5fb;color:var(--accent);font-weight:700;
           font-size:.8rem;padding:5px 12px;border-radius:16px;letter-spacing:.03em;
           text-transform:uppercase;margin-bottom:var(--s-3)}
.partners-grid{padding:var(--s-6) 0 var(--s-3)}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4);
        margin-top:var(--s-4)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);
       box-shadow:var(--shadow)}
.pcard .i{color:var(--red);margin-bottom:var(--s-2)}
.pcard b{display:block;font-size:1.05rem;color:var(--navy);margin-bottom:6px}
.pcard p{color:var(--muted);line-height:1.55;margin:0;font-size:.92rem}

/* ---- landing / guides / faq ---------------------------------------------- */
.landing-copy{padding:var(--s-4) 0 var(--sec-y);max-width:760px}
.landing-copy p{color:var(--navy);line-height:var(--lh-body);margin:0 0 var(--s-3)}
.faq-wrap{max-width:800px;padding:var(--s-4) 0 var(--sec-y)}
.faq-cta{text-align:center;margin-top:var(--s-6)}
.faq-cta .landing-cta{justify-content:center}
/* live filter for long term lists */
.term-search{display:flex;align-items:center;gap:var(--s-2);background:#fff;
             border:1px solid var(--line);border-radius:var(--r-pill);padding:var(--s-2) var(--s-4);
             max-width:420px;margin:0 0 var(--s-5)}
.term-search input{flex:1;border:0;outline:none;font-family:inherit;font-size:.95rem;
                   background:transparent;min-width:0}
.term-search .i{color:var(--muted);flex:none}
.term-empty{color:var(--muted);padding:var(--s-4) 0}
.guides-grid-wrap{padding:var(--s-6) 0 var(--sec-y)}
.guides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s-4)}
.guide-card{display:flex;flex-direction:column;gap:var(--s-1);background:#fff;
            border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);
            box-shadow:var(--shadow);color:var(--navy);
            transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.guide-card:hover{text-decoration:none;border-color:var(--navy);transform:translateY(-2px)}
.guide-flag{font-size:2rem;line-height:1}
.guide-name{font-weight:800;font-size:1.05rem}
.guide-go{color:var(--accent);font-weight:700;font-size:var(--t-sm)}
.guide-body{padding:var(--s-2) 0 var(--sec-y)}
.guide-cols{display:grid;grid-template-columns:1.7fr .9fr;gap:var(--s-7);align-items:start}
.guide-cost td:last-child{text-align:left}
.guide-titles{display:grid;gap:var(--s-2);margin:var(--s-1) 0}
.guide-title-row{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
                 border-radius:var(--r-sm);padding:10px 13px;background:#fff}
.guide-title-row .gt-badge{flex:none;margin-top:.1em}
.guide-title-row.tc-green{background:#eafaf0;border-color:#b7e4c7}
.guide-title-row.tc-amber{background:#fff4e0;border-color:#f2d9a8}
.guide-title-row.tc-red{background:#fde8e8;border-color:#f2c0c0}
.guide-docs{margin:var(--s-1) 0;padding-left:var(--s-5);line-height:1.9}
.guide-side-link{display:block;padding:6px 0;font-weight:600;color:var(--navy)}
@media(max-width:760px){.guide-cols{grid-template-columns:1fr}}

/* ---- account / auth ------------------------------------------------------ */
.auth{padding:var(--s-7) 0 var(--sec-y)}
.auth-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
           padding:var(--s-6);display:grid;gap:var(--s-4);box-shadow:var(--shadow);max-width:440px}
.auth-form label{display:grid;gap:6px;font-weight:600;color:var(--navy)}
.auth-note{margin-top:var(--s-3);min-height:1.2em;font-weight:600}
.auth-note.ok{color:var(--ok)}
.auth-note.err{color:var(--red)}
.acct-sec{padding:var(--s-6) 0}
.notif-list,.saved-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-2)}
.notif,.saved-list li{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
                      padding:var(--s-3) var(--s-4);display:flex;justify-content:space-between;
                      align-items:center;gap:var(--s-3);flex-wrap:wrap}
.notif.unread{border-left:4px solid var(--red)}
.notif a{color:var(--navy)}
.notif a b{display:block}
.notif a span{font-size:var(--t-sm);color:var(--muted)}
.notif time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.saved-list li a{font-weight:700;color:var(--navy)}
.notif-badge{display:inline-block;background:var(--red);color:#fff;font-size:.68rem;
             font-weight:800;border-radius:var(--r-pill);padding:1px 7px;margin-left:6px;
             vertical-align:top}

/* ---- error pages --------------------------------------------------------- */
.errpage{display:grid;place-items:center;text-align:center;padding:var(--s-11) var(--s-5)}
.errcode{font-size:clamp(4rem,14vw,9rem);font-weight:800;line-height:.9;color:var(--navy);
         letter-spacing:var(--track-display);opacity:.13;margin:0}
.errpage h1{margin:-.35em 0 var(--s-3)}
.errpage p{color:var(--muted);max-width:52ch;margin:0 auto var(--s-6)}

/* ============================================================================
   RESPONSIVE — last in the cascade on purpose.
   These override component defaults (.lot-grid, .step-grid, the two-column page grids), so
   they must be parsed after them. While they lived in layout.css the later files won and
   phones rendered four-column grids that scrolled sideways.
   ========================================================================= */
/* ---- shell breakpoints -------------------------------------------------- */
@media(max-width:900px){
  .hero-inner,.calc-inner,.lead-inner,.catalog-inner,.delivery-inner{grid-template-columns:1fr}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .lot-grid{grid-template-columns:repeat(2,1fr)}
  /* minmax(0,…): the scrolling thumb strip must not widen the column past the screen */
  .lot-top{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  /* One swipeable strip: a 30-photo grid pushed the title and price a screen down. */
  .gal-thumbs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:58px;
              overflow-x:auto;scrollbar-width:none}
  .lot-cta-m{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
  .lot-cta-m .btn{flex:1 1 auto;text-align:center}
}
@media(max-width:520px){
  .lot-grid,.step-grid,.lead-form .row.two{grid-template-columns:1fr}
  .brand{font-size:1.12rem}
  .dest-picker{margin-right:var(--s-1);padding-left:var(--s-2)}
  .dest-picker select{max-width:104px}
}

/* ── Condition score ─────────────────────────────────────────────────────────
   The band tints the border only. Colouring the number itself made a 44/100 read
   as an error state rather than a measurement. */
.cond-box{border:1px solid var(--line,#e5e7eb);border-left-width:4px;border-radius:10px;padding:14px 16px;margin:16px 0}
.cond-excellent{border-left-color:#16a34a}
.cond-good{border-left-color:#65a30d}
.cond-fair{border-left-color:#d97706}
.cond-poor{border-left-color:#dc2626}
.cond-box h3{margin:0 0 8px;font-size:1rem}
.cond-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.cond-score{font-size:2rem;font-weight:800;line-height:1}
.cond-of{font-size:.9rem;font-weight:600;color:var(--muted,#6b7280)}
.cond-band{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#6b7280)}
.cond-factors{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.cond-factors li{display:flex;gap:8px;align-items:baseline;font-size:.92rem}
.cond-delta{flex:0 0 3ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.cond-minus .cond-delta{color:#dc2626}
.cond-plus .cond-delta{color:#16a34a}
.cond-none{color:var(--muted,#6b7280)}
.cond-note{margin:10px 0 0;font-size:.8rem;color:var(--muted,#6b7280);line-height:1.45}
.cond-thin{margin:10px 0 0;font-size:.85rem;color:var(--muted,#6b7280);background:var(--surface-2,#f9fafb);border-radius:6px;padding:7px 9px;line-height:1.45}

/* ---- showcase (app/site_mode.py) -------------------------------------- */
.preview-bar{background:#8f520e;color:#fff;font-size:var(--t-sm);line-height:1.4}
.preview-bar .wrap{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;
                   justify-content:space-between;padding-top:8px;padding-bottom:8px}
.preview-bar a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap}
.lead-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);
                    color:var(--ink);line-height:1.45}
.lead-form .consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
.lead-form .consent a{color:var(--navy);text-decoration:underline}
.cx-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.foot-legal-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0}
.foot-legal-links a{color:inherit;text-decoration:underline}
.legal-doc{padding:var(--s-9) 0}
.legal-doc .wrap{max-width:46rem}
.legal-doc h1{margin-top:0}
.legal-doc h2{margin-top:var(--s-7);font-size:1.25rem}
.legal-doc .legal-meta{color:var(--muted);font-size:var(--t-sm)}
.legal-doc .draft-note{border-left:4px solid var(--amber);padding:var(--s-3) var(--s-4);
                       background:#fff8ec;margin:var(--s-4) 0}
.foot-legal p{margin:0 0 6px}
/* axe 2026-10-20: links inside running text must not rely on colour alone */
main p a:not(.btn),main li a:not(.btn),main .muted a:not(.btn),.lede a{text-decoration:underline;text-underline-offset:2px}
.page-head .lede a{color:#fff}
.site-foot .brand-us{color:#ff7a7a}
.foot-legal a{color:#cfe0f5;text-decoration:underline}
/* legal fragments (lynbro-legal-kit): wide tables scroll inside themselves on a phone */
.lb-legal table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.lb-legal th,.lb-legal td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}