/* Real Lease Cost, design B "Highlighter" (Oct 30 2026): the layer that wins. Loads LAST, after polish.css and wizard.css.
   Tokens come from polish.css. Same rules as polish.css: no colour literal, no important flag, font sizes read --t1..--t6, no url(), no font-face. */
/* ================= Design B "Highlighter" (Oct 30 2026): the layer that wins. Later rules beat the rounds above. ================= */
html,body{font-family:var(--body);font-size:var(--t2)}
h1,h2,.brand,.rc-car,.dcard-name,.controls-h,.hub-card-n{font-family:var(--display)}
h1{font-size:var(--t5);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h2{font-weight:700;letter-spacing:-.02em}
/* every price is tabular */
b,.dcard-price b,td.total,.rc-sum,.rc-v,.dgap-v,.deal-sum b,.rlci-num b,.cn-v,.rn-v,.cmp-total td,.picks b,.more li b,.hub-card-c,#miles,.chip{font-variant-numeric:tabular-nums}
/* the marker: the real all-in price sits on yellow, ink on top. Yellow marks money and nothing else. */
.dcard-price b,.deal-sum b[data-lead],td.total{position:relative;display:inline-block;isolation:isolate;color:var(--price-ink);
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;text-shadow:none}
.dcard-price b{font-size:var(--t6);padding:2px var(--sp3) 6px}
.dcard-price b::before,.deal-sum b[data-lead]::before,td.total::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--price-bg);border-radius:var(--r2);
  clip-path:inset(0 0 0 0)}
.deal-sum b[data-lead]{font-size:var(--t6);padding:2px var(--sp3) 6px;display:inline-block;margin:0 0 var(--sp2)}
.deal-wrap>.deal-sum b[data-lead]{font-size:var(--t6)}
td.total{font-size:var(--t4);padding:var(--sp1) var(--sp2);border-radius:var(--r2);background:none}
td.total::before{inset:6px 4px;border-radius:var(--r1)}
td.total .sub{color:var(--price-ink);font-family:var(--body)}
/* the swipe: left to right, once, when the card is revealed */
@keyframes mark-swipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.dcard-price b::before,.deal-sum b[data-lead]::before{animation:mark-swipe var(--d-draw) var(--e-draw) backwards}
.mark-wait .dcard-price b::before{animation:none;clip-path:inset(0 100% 0 0)}
.mark-go .dcard-price b::before{animation:mark-swipe var(--d-draw) var(--e-draw) backwards}
/* an unchecked row never wears the yellow: its price sits on the pale red of the warning, ink in the flag colour */
.dcard.unv .dcard-price b,.deal-sum.unv b[data-lead]{color:var(--warn-ink)}
.dcard.unv .dcard-price b::before,.deal-sum.unv b[data-lead]::before{background:var(--warn-bg);box-shadow:inset 0 0 0 2px var(--warn)}
.rc-sum,.receipt.unv .rc-sum{color:var(--ink);text-shadow:none;font-family:var(--display);font-weight:800;
  background:linear-gradient(var(--price-bg),var(--price-bg)) 0 88%/100% 38% no-repeat;padding:0 var(--sp1)}
.receipt.unv .rc-sum{color:var(--warn-ink);background:linear-gradient(var(--warn-bg),var(--warn-bg)) 0 88%/100% 38% no-repeat}
.rn-tot .rn-v,.rlci-num b{color:var(--ink);text-shadow:none}
.picks b,.more li b,.hub-card-c,.cmp-low,.rc-cash .rc-v,.dcard-more .rc-cash .rc-v{color:var(--ink);font-weight:700}
.toggle input,#ceiling{accent-color:var(--link)}
@media (prefers-reduced-motion:reduce){
  .dcard-price b::before,.deal-sum b[data-lead]::before,.mark-go .dcard-price b::before{animation:none}
  .mark-wait .dcard-price b::before{clip-path:inset(0 0 0 0)}
}
@media (scripting:none){ .mark-wait .dcard-price b::before{clip-path:inset(0 0 0 0)} }

/* surfaces: stepped tones, one hairline, no soft shadows */
.top{background:var(--bg);box-shadow:none;border-bottom:2px solid var(--edge)}
.brand{font-weight:800;letter-spacing:-.03em;text-transform:none}
.receipt,.picks,.controls,.glossary,.legend,section.coverage,.rules,.partners,.newsletter,.tablewrap,table.math,.assume,.assumptions,.ev-charge,.ask,.rail-stats{
  background:var(--s1);box-shadow:var(--shade);border-radius:var(--r3)}
.receipt:hover{background:var(--s1)}
.chip,.mode,.seg span,.btn.ghost,.srclink{border-radius:999px}
.chip{background:var(--s1);border:1px solid var(--line-strong);box-shadow:none;min-height:44px}
.chip.on,.chip.make.on,.mode.active,.seg input:checked + span,a.seg[aria-current] span{background:var(--go-bg);color:var(--go-ink);border-color:var(--go-bg)}
.btn,.btn:not(.ghost){border-radius:var(--r2);font-weight:700;letter-spacing:0}
.btn:not(.ghost){background:var(--go-bg);color:var(--go-ink);border:2px solid var(--edge);box-shadow:none}
.btn:not(.ghost):hover{filter:none;background:var(--go-bg);box-shadow:var(--card-shadow)}
.btn:active{transform:translate(1px,1px)}
@media (prefers-reduced-motion:no-preference){ .btn,.chip{transition:transform var(--d-press) var(--e-arrive),box-shadow var(--d-press) var(--e-arrive)} }
.tag,.dbadge{border-radius:999px}

/* ---- the card ---- */
.dcard,.cards .dcard{background:var(--s1);border:2px solid var(--edge);border-radius:var(--r3);box-shadow:var(--card-shadow);padding:var(--sp4);gap:0;position:relative}
.dcard>*{margin-top:0;margin-bottom:0}
.dcard-img{position:relative;margin:0 0 var(--sp2)}
.dcard-img img,.dcard-art-in{aspect-ratio:16/9;border-radius:var(--r1)}
.dcard-art-in{background:var(--photo);border:0;padding-bottom:0}
.dcard-art-in .wz-sil{color:var(--photo-ink);opacity:1}
.dcard-art-in .dcard-logo{color:var(--photo-ink);opacity:1}
.dcard-art .dcard-art-name{display:none}
.dcard-img figcaption,.dcard-art figcaption{position:absolute;left:var(--sp2);bottom:var(--sp2);right:auto;max-width:calc(100% - 2 * var(--sp2));margin:0;min-height:0;
  background:var(--s1);color:var(--ink);font-size:var(--t1);line-height:1.3;padding:3px var(--sp3);border-radius:var(--r1);box-shadow:0 0 0 1px var(--line)}
@media (min-width:720px){.dcard-img figcaption{min-height:0}}
.dcard-name{font-size:var(--t4);font-weight:650;letter-spacing:-.015em;line-height:1.2;margin:0 0 var(--sp1)}
.dcard-trim{font-size:var(--t2);font-weight:500;color:var(--muted)}
.dcard-price{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp1) var(--sp3);margin:0}
.dcard-price span{font-size:var(--t2);font-weight:500;color:var(--muted)}
.dcard-badges{margin:var(--sp2) 0 0;gap:var(--sp2)}
.dbadge{background:none;padding:0;min-height:0;font-size:var(--t3);font-weight:500;color:var(--ink)}
.dbadge.warn{background:var(--warn-bg);color:var(--warn-ink);font-size:var(--t2);font-weight:700;padding:var(--sp1) var(--sp3);min-height:32px;box-shadow:inset 0 0 0 1px var(--warn)}
.dcard-trust{margin:2px 0 0;font-size:var(--t2);font-weight:600;color:var(--ink);text-wrap:pretty}
.dcard-tier::before,.dcard-trust:not(.dcard-tier)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--sp2);vertical-align:1px;background:var(--line-strong)}
.dcard-trust:not(.dcard-tier){color:var(--warn-ink)}
.dcard-trust:not(.dcard-tier)::before{background:var(--warn)}
.dcard-gloss{margin:2px 0 0;font-size:var(--t1);color:var(--quiet)}
.dcard-basis{margin:var(--sp1) 0 0;font-size:var(--t1);color:var(--quiet)}
.dcard-basis .dcard-chg{font-weight:700;color:var(--link)}
/* the Gap: two bars that start with the same ad segment, then what the ad left out */
.dgap{margin:var(--sp2) 0 0;display:grid;gap:var(--sp2)}
.dgap-row{display:grid;grid-template-columns:32px minmax(0,1fr) 52px;align-items:center;gap:var(--sp2);margin:0}
.dgap-k{font-size:var(--t1);color:var(--quiet);font-weight:500}
.dgap-bar{display:flex;gap:1px;height:14px;background:var(--s2);border-radius:var(--r1);overflow:hidden}
.dgap-v{font-size:var(--t2);font-weight:600;color:var(--muted);text-align:right;white-space:nowrap}
.dgap-real .dgap-v,.dgap-row:nth-child(2) .dgap-v{color:var(--ink)}
.dgap-say{margin:0;font-size:var(--t2);color:var(--muted);font-weight:500;text-wrap:pretty}
.gs{display:block;height:100%;flex:0 1 auto;min-width:0;box-sizing:border-box}
.gs-ad{background:var(--ad)}
.gs-add{background:var(--seg1)}
.gs-est{background:repeating-linear-gradient(135deg,var(--seg3b) 0 8px,var(--seg3) 8px 10px);box-shadow:inset 0 0 0 1px var(--seg3o)}
.gs-cash{background:none;border:2px dashed var(--line-strong);border-radius:2px}
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}
.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}
.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}
.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}
.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}
.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}
.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}
.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}
.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}
.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}
.w100{width:100%}
/* the button, then the disclosure, then the footer */
.dcard-act{margin:var(--sp3) 0 0;padding:0}
.dcard-go{min-height:52px;border-radius:var(--r2);font-size:var(--t3)}
.dcard-why{justify-content:space-between;min-height:44px;padding:0;margin-top:var(--sp1);color:var(--link);text-decoration:none;font-size:var(--t2);font-weight:700}
.dcard-why::after{margin-right:var(--sp1)}
.dcard-more .receipt{background:var(--s2);padding:var(--sp3) var(--sp4);border-radius:var(--r2)}
.dcard-more .receipt:hover{background:var(--s2)}
.dcard-more .dcard-incl,.dcard-more .dcard-ad{font-size:var(--t2);color:var(--muted);margin:0 0 var(--sp2)}
.dcard-more .dcard-ad{color:var(--ink)}
.rc-gloss{margin:0 0 var(--sp2);font-size:var(--t1);color:var(--quiet)}
.dcard-src{font-size:var(--t1);color:var(--quiet)}
.dcard-more .rc-sum{font-size:var(--t4)}
.dcard-foot{margin:0;font-size:var(--t1);color:var(--quiet)}
.dcard-foot .pc-credit{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;min-height:44px;overflow-wrap:anywhere}
.dcard-foot .pc-credit a{display:inline-flex;align-items:center;min-height:44px;padding-block:0;color:var(--quiet);text-decoration:underline;text-underline-offset:2px}
/* compare: a 44px pill in the photo's top-right corner */
.dcard-cmp{position:absolute;top:calc(var(--sp4) + var(--sp2));right:calc(var(--sp4) + var(--sp2));margin:0;z-index:2;text-align:right}
.dcard-cmp .cmp-tick{background:var(--s1);color:var(--ink);font-size:var(--t1);font-weight:600;border:2px solid var(--edge);border-radius:999px;padding:0 var(--sp3) 0 var(--sp2);min-height:44px;gap:var(--sp1)}
.dcard-cmp .cmp-tick input{width:28px;height:28px}   /* the whole pill is the 44px target; the box is 28px */
.dcard-extra .dcard-cmp{top:calc(var(--sp4) + var(--sp2) + 44px)}
/* desk: three cards share rows, so photo, name, price and button line up */
@media (min-width:901px){
  .cards.dcards>.dcard,.wz-cards>.dcard,#top3>.dcard{grid-template-rows:subgrid;grid-row:span 11;padding-top:var(--sp4)}
  .cards.dcards>.dcard>*,.wz-cards>.dcard>*,#top3>.dcard>*{margin-top:0}
  .dcard>.dcard-label{grid-row:1}
  .dcard>.dcard-img{grid-row:2}
  .dcard>.dcard-name{grid-row:3}
  .dcard>.dcard-price{grid-row:4}
  .dcard>.dcard-badges{grid-row:5}
  .dcard>.dcard-trust{grid-row:6}
  .dcard>.dcard-gloss{grid-row:6}
  .dcard>.dcard-basis{grid-row:7}
  .dcard>.dgap{grid-row:8}
  .dcard>.dcard-act{grid-row:9}
  .dcard>.dcard-more{grid-row:10}
  .dcard>.dcard-foot{grid-row:11}
  .dcard>.dcard-cmp{grid-row:auto}
  .cards.dcards>.dcard>.dgap,.wz-cards>.dcard>.dgap,#top3>.dcard>.dgap{margin-top:var(--sp3)}
  .cards.dcards>.dcard>.dcard-act,.wz-cards>.dcard>.dcard-act,#top3>.dcard>.dcard-act{margin-top:var(--sp4)}
  .cards.dcards>.dcard>.dcard-badges,.wz-cards>.dcard>.dcard-badges,#top3>.dcard>.dcard-badges{margin-top:var(--sp3)}
}
.cards .dcard .dbadge,.dcard .dbadge{background:none;border-radius:0}
.cards .dcard .dbadge.warn,.dcard .dbadge.warn{background:var(--warn-bg);border-radius:999px}
.cards .dcard .dcard-more .receipt{background:var(--s2)}

/* ---- the wordmark: a blue tile, three thin lines, one yellow bar; lowercase Bricolage 800 ---- */
.mark{width:36px;height:36px;flex:none}
.mk-tile{fill:var(--go-bg)}
.mk-line{fill:var(--go-ink)}
.mk-bar{fill:var(--price-bg)}
.brand{display:inline-flex;align-items:center;gap:var(--sp2);color:var(--ink);font-size:var(--t4);font-weight:800;letter-spacing:-.03em;text-transform:lowercase}
.brand sup.tm{font-size:var(--t1);color:var(--muted);font-weight:500;margin-left:2px}

/* ---- the wizard and the first screen ---- */
@media (min-width:721px){ :root{ --t5:46px; } }
.wz .wz-card,.wz-card{background:var(--s1);border:2px solid var(--edge);border-radius:var(--r3);box-shadow:var(--card-shadow)}
.first h1{max-width:20ch}
.wz-q{font-family:var(--display);font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.wz-sub,.wz-gloss{font-size:var(--t2);color:var(--muted)}
.wz-foot{margin:var(--sp5) 0 0;display:grid;gap:var(--sp3)}
.wz-foot .wz-gloss{margin:0;font-size:var(--t1);color:var(--quiet)}
.wz-kind,.wz-tile{background:var(--s2);border:1px solid var(--line-strong);border-radius:var(--r2)}
.wz-note,.wz-step,.sub{color:var(--quiet)}
.hero-sub,.first-promise,.promise-more{color:var(--muted)}
.ask #miles,.wz-pub input,.wz-ins input{--t5:34px}
/* the browse list and the deal page */
thead th{background:var(--s2);color:var(--muted)}
tbody tr:hover{background:var(--s2)}
td.car a{font-family:var(--display);font-weight:650;color:var(--ink)}
td.car a,.hub-card-n{font-size:var(--t3)}
.deal-sum{color:var(--muted);font-size:var(--t2)}
.deal-sum b{font-size:var(--t4)}
.foot{border-top:2px solid var(--edge);background:var(--bg)}
.foot,.foot p,.foot .sub{color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* phone: the answer's price comes first; the lines about other deals follow the cards */
@media (max-width:480px){
  .wz-card:has(> .wz-cards){display:flex;flex-direction:column}
  .wz-card:has(> .wz-cards) > *{order:0}
  .wz-card:has(> .wz-cards) > .wz-cards{order:1}
  .wz-card:has(> .wz-cards) > .cheaper-unv,.wz-card:has(> .wz-cards) > .wz-hint{order:2;margin-top:var(--sp4)}
  .wz-card:has(> .wz-cards) > .wz-foot{order:3}
  .wz-card:has(> .wz-cards) > .wz-after{order:4}
  .wz-card:has(> .wz-cards) > .wz-fuel{order:0}
  .wz-card:has(> .wz-cards) .wz-cards{margin-top:var(--sp3)}
  .dcard-img img,.dcard-art-in{aspect-ratio:16/8}
}
/* desk: the price steps down with the card's width */
@media (min-width:721px){
  .dcard{--t6:48px}
  .wz-cards,.cards.dcards,#top3{align-items:stretch}
}
@media (min-width:901px){
  .wz-cards:has(> .dcard-extra){grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.dcards:has(> .dcard-extra),#top3:has(> .dcard-extra){--t6:40px}
}

@media (min-width:721px) and (max-width:900px){
  .wz-cards,.cards.dcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcard-img img,.dcard-art-in{aspect-ratio:16/9}
}
.mchip{background:var(--s1);color:var(--ink);border:1px solid var(--line-strong);font-size:var(--t2)}
.mchip[aria-pressed=true]{background:var(--go-bg);color:var(--go-ink);border-color:var(--go-bg)}
.deal-sum b[data-lead]{display:block;width:fit-content}
.deal-sum{max-width:56ch}
/* the phone list row: the marker sits on the price itself, never on the whole row */
table.mode-simple td.total,table.list td.total{position:relative;width:fit-content;padding:var(--sp1) var(--sp3);justify-self:end}
@media (max-width:480px){ table.mode-simple td.total,table.list td.total{justify-self:start} }
table.mode-simple td.total::before,table.list td.total::before{inset:0}

/* ---- PRD 4a: the lane chip, one line per lane, the take-over commitment ---- */
.dbadge.lane{display:inline-flex;align-items:center;gap:var(--sp1);background:var(--s2);color:var(--ink);font-size:var(--t2);font-weight:700;padding:2px var(--sp3) 2px var(--sp2);min-height:28px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.cards .dcard .dbadge.lane,.dcard .dbadge.lane{background:var(--s2);color:var(--ink);font-size:var(--t2);font-weight:700;padding:2px var(--sp3) 2px var(--sp2);min-height:28px;border-radius:999px}
.dcard .dbadge.lane-take{border-radius:var(--r1)}
.lane-g{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dcard-lane-line{margin:var(--sp1) 0 0;font-size:var(--t2);color:var(--ink);text-wrap:pretty}
.dcard-commit{margin:var(--sp1) 0 0;font-size:var(--t2);color:var(--muted);font-variant-numeric:tabular-nums;text-wrap:pretty}
.commit-n{font-weight:700;color:var(--ink)}
.wz-count{margin:0 0 var(--sp3);font-size:var(--t2);font-weight:600;color:var(--ink)}
.wz-incl{margin:0;font-size:var(--t1);color:var(--quiet)}
.lchips{margin-top:0}
.takeover-means{background:var(--s1);border-radius:var(--r3);box-shadow:var(--shade);padding:var(--sp4);margin:var(--sp4) 0}
.takeover-means h2{font-size:var(--t4);margin:0 0 var(--sp2)}
.takeover-means p,.takeover-means li{font-size:var(--t2);color:var(--muted);max-width:60ch}
.takeover-means .must{color:var(--ink);font-weight:700}
.takeover-means ul{margin:var(--sp2) 0 0;padding-left:var(--sp5)}
@media (max-width:480px){ .dcard-lane-line{font-size:var(--t2)} }
/* the photo's box is reserved by the figure itself, so a late image never moves the card (CLS) */
.dcard-img:not(.dcard-art){aspect-ratio:16/9;overflow:hidden;border-radius:var(--r1)}
.dcard-img:not(.dcard-art) img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media (max-width:480px){ .dcard-img:not(.dcard-art){aspect-ratio:16/8} }

/* ---- motion (design/motion MOTION-SPEC): transform and opacity only, nothing loops near a price ---- */
@media (prefers-reduced-motion:no-preference){
  @keyframes chg-in{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
  @keyframes chg-tint{from{background-color:var(--warn-bg)}to{background-color:transparent}}
  .dcard-price b.chg{animation:chg-in var(--d-move) var(--e-arrive)}
  /* the answer reveal: the cards rise 20px, staggered 140, 230, 290 ms (settling, not marching) */
  @keyframes card-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .wz-cards>.dcard{animation:card-rise var(--d-move) var(--e-arrive) both}
  .wz-cards>.dcard:nth-child(1){animation-delay:140ms}
  .wz-cards>.dcard:nth-child(2){animation-delay:230ms}
  .wz-cards>.dcard:nth-child(n+3){animation-delay:290ms}
  .btn:active,.chip:active,.mchip:active,.wz-tile:active,.wz-kind:active{transform:scale(.96);transition-duration:var(--d-press)}
}
.no-swipe .dcard-price b::before{animation:none}
@media (prefers-reduced-motion:reduce){ .wz-cards>.dcard,.dcard-price b.chg{animation:none} }
/* the wizard's progress: four segments, filled as you go (autoslash showed the place; here it is one bar, not dots) */
.wz-prog{display:flex;gap:var(--sp1);flex:1 1 80px;max-width:160px;margin:0 var(--sp3)}
.wz-prog i{display:block;flex:1;height:6px;border-radius:999px;background:var(--s3)}
.wz-prog i.on{background:var(--go-bg)}
@media (prefers-reduced-motion:no-preference){ .wz-prog i{transition:background-color var(--d-move) var(--e-arrive)} }
/* the hub's miles and state block appears when the script runs; a placeholder of its height holds the place (CLS 0) */
.hub-ctl-ph{display:none}
@media (scripting:enabled){
  .hub-ctl-ph{display:block;min-height:168px;margin:var(--sp3) 0 var(--sp4)}
  @media (min-width:481px){ .hub-ctl-ph{min-height:204px} }
}
small{font-size:var(--t1)}
.dcard-foot .pc-credit a{min-width:44px;justify-content:center}
/* an unchecked row never wears the yellow in the list either */
tr.unv td.total{color:var(--warn-ink)}
tr.unv td.total::before{background:var(--warn-bg);box-shadow:inset 0 0 0 2px var(--warn)}
tr.unv td.total .sub{color:var(--warn-ink)}
.wz-step{white-space:nowrap}
@media (max-width:480px){ .wz-prog{max-width:64px;margin:0 var(--sp2)} .wz-top .wz-skip{font-size:var(--t1)} }

/* ---- round 18 (Oct 30 2026): several kinds, the plain-list button, the phone nav ---- */
/* "Just show me the cheapest": a clear secondary button above the tiles. 2px edge, ink on paper, never yellow or blue fill. */
.wz-plain{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0 0 var(--sp3);padding:var(--sp2) var(--sp5);
  border:2px solid var(--edge);border-radius:var(--r2);background:var(--s1);color:var(--ink);font-size:var(--t3);font-weight:700;text-decoration:none;box-shadow:none}
.wz-plain:hover{background:var(--s2)}
.wz-plain:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wz-pickhint{margin:0 0 var(--sp3);font-size:var(--t2);color:var(--muted)}
/* the kinds are toggles: a ticked tile shows a tick in its corner as well as the inverted colours (works in greyscale) */
.wz-kind{position:relative}
.wz-kind[aria-pressed=true]::after{content:"";position:absolute;top:var(--sp2);right:var(--sp3);width:.5em;height:.9em;box-sizing:border-box;
  border-right:3px solid var(--bg);border-bottom:3px solid var(--bg);transform:rotate(45deg)}
.wz-nav .wz-picked{font-size:var(--t2);font-weight:600;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.wz-nav .wz-next{margin-left:auto}
/* seven tiles: "Any car" takes the last row on its own so no tile sits alone on a short row */
.wz-kinds .wz-kind:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:901px){ .wz-kinds .wz-kind:last-child:nth-child(odd){grid-column:auto} .wz-kinds .wz-kind:last-child:nth-child(3n+1){grid-column:1/-1} }
/* ---- round 19 ---- */
/* item b: a phone card's price and its words share a row (the price steps down to 48px inside a narrow card), so a card is shorter */
@media (max-width:480px){
  .dcard-price{--t6:48px;flex-wrap:nowrap;align-items:center}
  .dcard-price span{flex:1 1 0;min-width:0;line-height:1.25}
}
/* item 2: the quiet end-of-lease line and the insurance link */
.dcard-endrate{margin:var(--sp2) 0 0;font-size:var(--t1);color:var(--quiet);text-wrap:pretty}
.dcard-ins-link{color:var(--link);font-weight:700}
/* item e: a long table in a details that starts closed; the summary is a 44px tap */
.more-d{margin:var(--sp3) 0 var(--sp5)}
.more-d>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;color:var(--link);font-weight:700;font-size:var(--t3)}
/* item 3: the ranked table is far below the first screen; the browser skips its layout and paint until it is near, so a re-rank of its 50 rows is not a long task */
.main-col>.tablewrap[data-scroll]{content-visibility:auto;contain-intrinsic-size:auto 6000px}
/* round 19: when the offer or the lease ends. Quiet (rank 4); within 7 days it takes the warning colour, never yellow */
.dcard-ends,.deal-ends{margin:var(--sp1) 0 0;font-size:var(--t2);font-weight:500;color:var(--muted)}
.dcard-ends.urgent,.deal-ends.urgent{color:var(--warn-ink);font-weight:700}

/* Round 20 (seats A16/B16, item 1): at three columns every card block is a normal-flow block. The shared-row
   subgrid put the lane sentence, the dates and the photo credit in the same cell as the photo and the Compare
   pill. A card is now a column; Compare sits inside the photo box and nowhere else. */
@media (min-width:901px){
  .cards.dcards>.dcard,.wz-cards>.dcard,#top3>.dcard{display:flex;flex-direction:column;grid-template-rows:none;grid-row:auto;padding-top:var(--sp4)}
  .cards.dcards>.dcard>*,.wz-cards>.dcard>*,#top3>.dcard>*{grid-row:auto;margin-top:var(--sp2)}
  .cards.dcards>.dcard>.dcard-img,.wz-cards>.dcard>.dcard-img,#top3>.dcard>.dcard-img{margin-top:0}
  .cards.dcards>.dcard>.dcard-act,.wz-cards>.dcard>.dcard-act,#top3>.dcard>.dcard-act{margin-top:auto;padding-top:var(--sp4)}
  .cards.dcards>.dcard>.dgap,.wz-cards>.dcard>.dgap,#top3>.dcard>.dgap{margin-top:var(--sp3)}
  .dcard>.dcard-cmp{position:absolute;margin:0;top:calc(var(--sp4) + var(--sp1));right:calc(var(--sp4) + var(--sp1))}
  .dcard-extra>.dcard-cmp{top:calc(var(--sp4) + var(--sp1) + 44px)}
}

/* Round 20 (seats A16/B16, item 2): at a desk the home H1 is capped so the first row of kind tiles shows at 1440x900. */
@media (min-width:901px){
  .hello{margin-top:var(--sp4)}
  .hello .hello-h{--t5:clamp(32px,3.4vw,48px);font-size:var(--t5);max-width:none;margin:0 auto var(--sp2)}
  .hello .hello-trust{margin-bottom:var(--sp1)}
}

/* Round 20 (item 3): the inline Change link is a 44px-high target; the negative margin keeps the sentence's line height. */
.dcard-basis .dcard-chg{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;padding:0 var(--sp1)}

/* Round 20 (item 4): each receipt line's source, small, inside the line */
.rc-src{display:block;margin:2px 0 0;font-size:var(--t1);font-weight:400;color:var(--quiet);line-height:1.4;max-width:60ch;text-wrap:pretty}
.rc-src a{color:var(--link);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Round 20 (item 8): the one note under the Compare table */
.cmp-foot{margin:var(--sp2) 0 0;font-size:var(--t1);color:var(--muted);max-width:60ch;text-wrap:pretty}

/* Round 20 (item 9): the closed "How long would this take by hand?" line has no dead space around it. */
.wz-foot .work-line,.wz-work{margin-bottom:0}
.wz-foot .work-hand{margin:0 0 var(--sp2)}
.wz-foot .work-hand summary{min-height:44px;padding:0}
.wz-foot .work-hand[open] summary{min-height:36px}
.wz-foot .work-hand p,.wz-foot .work-hand ul{margin:var(--sp1) 0}

/* Round 20 (item 10): the charging question has its own small heading and a divider before the miles tiles */
.wz-sect-h{margin:0 0 var(--sp2);font-family:var(--display);font-size:var(--t3);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.wz-sect-div{border:0;border-top:2px solid var(--line-strong);margin:var(--sp4) 0 var(--sp3)}

/* Round 20 (item 11): "Seen in one place only" is a quiet chip in the warning tone: a thin line and a dot, no fill (not yellow, not blue). */
.dcard-single,.dcard-tier.dcard-single{display:inline-flex;align-items:center;align-self:flex-start;padding:2px var(--sp3) 2px var(--sp2);border-radius:999px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn-ink);font-size:var(--t1);font-weight:600;min-height:28px}
.dcard-single::before,.dcard-tier.dcard-single::before{background:var(--warn)}
.tag.single{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:transparent}

/* Round 20 (item 12): the one sentence that counts the sources */
.src-count{font-size:var(--t3);margin:var(--sp3) 0}

/* phone nav (round 18): "Price index" ran off the right edge at 390 and sat under the fade. The links are tighter so all five fit
   from 360px up. On a narrower phone the row scrolls, the last link ends inside a clear gutter at the end of the scroll, and
   the fade at the edge shows there is more. Every link stays 44px tall. */
@media (max-width:480px){
  .nav{padding:0 var(--sp4) 0 var(--sp2);
    -webkit-mask-image:linear-gradient(90deg,var(--s1) calc(100% - var(--sp4)),transparent);
    mask-image:linear-gradient(90deg,var(--s1) calc(100% - var(--sp4)),transparent)}
  .navlink{padding:0 var(--sp1)}
}
/* the nav word is longer in round 19 ("Average cost"): below 380px the links give back a few pixels so all five still fit at 360 */
@media (max-width:380px){ .nav{padding:0 var(--sp3) 0 var(--sp1)} .navlink{padding:0 2px;min-width:44px;justify-content:center} }
/* step 1 on a phone: the picked line and Next stay at the foot of the screen while the tiles scroll, so Next is never below the fold */
@media (max-width:900px){
  .wz-card > .wz-nav:has(.wz-next){position:sticky;bottom:0;z-index:2;background:var(--s1);padding:var(--sp2) 0;border-top:2px solid var(--edge)}
}