/* Real Lease Cost: the wizard and the plain deal card (design/wizard/SPEC.md, Oct 30 2026).
   Loads AFTER style.css and polish.css and reads only their tokens: no new colour here. Rhythm 8,
   16, 24. Every tap target is 56px or taller. Three text sizes on a card: the number (t5), the car
   name (t3), everything else (t2). Motion is one short entrance, off under reduced motion. */

/* the frame: one column, one question, centred on a wide screen, edge to edge on a phone */
.wz{margin:var(--sp5) 0 var(--sp7)}
.wz-card{background:var(--s1);border-radius:var(--r3);box-shadow:var(--shade);padding:var(--sp5) var(--sp5) var(--sp5)}
.wz-top{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3);margin:0 0 var(--sp2);min-height:56px}
.wz-step{margin:0;font-size:var(--t2);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.wz-skip{font-size:var(--t2);font-weight:600;color:var(--link);display:inline-flex;align-items:center;min-height:56px;padding:0 var(--sp2);text-decoration:underline;text-underline-offset:3px}
.wz-q{font-family:var(--display);font-size:var(--t5);font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--sp2);color:var(--ink);text-wrap:balance;max-width:20ch}
.wz-q:focus{outline:none}
.wz-q + .wz-tiles,.wz-q + .wz-where{margin-top:var(--sp4)}
.wz-q:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r1)}
.wz-sub{margin:0 0 var(--sp5);font-size:var(--t3);color:var(--muted);max-width:52ch}
.wz-honest{margin:0 0 var(--sp4);font-size:var(--t3);color:var(--ink);background:var(--s2);border-left:3px solid var(--warn);border-radius:var(--r2);padding:var(--sp3) var(--sp4);max-width:60ch}

/* tiles: one shape, two states (resting, chosen). The chosen tile inverts, like the site's chips. */
.wz-tiles{display:grid;gap:var(--sp3);margin:0 0 var(--sp5)}
.wz-kinds{grid-template-columns:repeat(3,minmax(0,1fr))}
.wz-rows{grid-template-columns:1fr 1fr}
.wz-budgets{grid-template-columns:repeat(4,minmax(0,1fr))}
.wz-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp1);text-align:center;
  min-height:72px;padding:var(--sp4) var(--sp3);border-radius:var(--r3);cursor:pointer;font:inherit;color:var(--ink);
  background:var(--s2);border:2px solid transparent;box-shadow:var(--shade)}
.wz-tile:hover{border-color:var(--line-strong);background:var(--s3)}
.wz-tile:active{background:var(--s3)}
.wz-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wz-tile.on,.wz-tile[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.wz-tile.on .wz-tile-s,.wz-tile[aria-pressed=true] .wz-tile-s{color:var(--bg);opacity:.8}
.wz-tile-w{font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.wz-tile-s{font-size:var(--t2);color:var(--muted);line-height:1.35;text-wrap:balance}
.wz-kind{min-height:168px;padding-top:var(--sp4);justify-content:flex-start}
.wz-row{align-items:flex-start;justify-content:center;text-align:left;gap:var(--sp1);padding:var(--sp4) var(--sp5)}
.wz-budget{min-height:96px}
.wz-budget .wz-tile-w{font-size:var(--t5);font-variant-numeric:tabular-nums}

/* silhouettes: the body drawings in site/assets/body/, used as masks so they follow the text colour */
.wz-sil{display:block;width:120px;height:60px;position:relative;background:currentColor;
  -webkit-mask:var(--sil) center/contain no-repeat;mask:var(--sil) center/contain no-repeat}
.wz-sil-big{width:132px;height:66px;margin:0 0 var(--sp2);color:var(--muted)}
.wz-tile.on .wz-sil-big,.wz-tile[aria-pressed=true] .wz-sil-big{color:var(--bg)}
.wz-sil-ev{position:absolute;inset:0;background:var(--money);-webkit-mask:url(/assets/body/ev-mark.svg) center/contain no-repeat;mask:url(/assets/body/ev-mark.svg) center/contain no-repeat}
.wz-tile.on .wz-sil-ev,.wz-tile[aria-pressed=true] .wz-sil-ev{background:var(--bg)}
/* the six kind tiles (round 6): one filled drawing each, a different shape each (tile-*.svg), so
   a child tells them apart at a glance. Masks, so they take the text colour in both schemes. */
.wz-art{display:block;width:128px;height:68px;margin:0 0 var(--sp2);background:currentColor;color:var(--ink);opacity:.82;
  -webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.wz-tile.on .wz-art,.wz-tile[aria-pressed=true] .wz-art{color:var(--bg);opacity:1}
.wz-art[data-art=small]{--art:url(/assets/body/tile-small.svg)}
.wz-art[data-art=suv]{--art:url(/assets/body/tile-suv.svg)}
.wz-art[data-art=truck]{--art:url(/assets/body/tile-truck.svg)}
.wz-art[data-art=ev]{--art:url(/assets/body/tile-ev.svg)}
.wz-art[data-art=lux]{--art:url(/assets/body/tile-lux.svg)}
.wz-art[data-art=any]{--art:url(/assets/body/tile-any.svg)}
.wz-sil[data-sil=sedan]{--sil:url(/assets/body/sedan.svg)}
.wz-sil[data-sil=hatchback]{--sil:url(/assets/body/hatchback.svg)}
.wz-sil[data-sil=suv]{--sil:url(/assets/body/suv.svg)}
.wz-sil[data-sil=crossover]{--sil:url(/assets/body/crossover.svg)}
.wz-sil[data-sil=pickup]{--sil:url(/assets/body/pickup.svg)}
.wz-sil[data-sil=minivan]{--sil:url(/assets/body/minivan.svg)}
.wz-sil[data-sil=coupe]{--sil:url(/assets/body/coupe.svg)}
.wz-sil[data-sil=convertible]{--sil:url(/assets/body/convertible.svg)}
.wz-sil[data-sil=wagon]{--sil:url(/assets/body/wagon.svg)}

/* type my number, and the state chooser: big fields, the unit beside, a note that speaks */
.wz-type{margin:0 0 var(--sp5)}
.wz-type label{display:block;font-size:var(--t3);font-weight:600;margin:0 0 var(--sp2)}
.wz-type-row{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap}
.wz-type input{font-family:var(--display);font-size:var(--t5);font-weight:700;letter-spacing:-.02em;min-height:64px;width:100%;max-width:280px;
  background:var(--s2);color:var(--ink);border:2px solid var(--line-strong);border-radius:var(--r2);padding:var(--sp2) var(--sp4);font-variant-numeric:tabular-nums}
.wz-unit{font-size:var(--t3);color:var(--muted)}
.wz-note{margin:var(--sp2) 0 0;min-height:1.4em;font-size:var(--t2);color:var(--warn)}
.wz-where{display:grid;gap:var(--sp3);margin:0 0 var(--sp5)}
.wz-select{font:inherit;font-size:var(--t4);font-weight:600;min-height:64px;width:100%;background:var(--s2);color:var(--ink);
  border:2px solid var(--line-strong);border-radius:var(--r2);padding:var(--sp2) var(--sp4)}
.wz-select[aria-invalid=true]{border-color:var(--bad)}
.wz-nostate{min-height:64px}

/* back and next: the one primary button sits right, Back is a ghost on the left */
.wz-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--sp3)}
.wz-nav .btn{min-height:56px;padding:var(--sp3) var(--sp6);font-size:var(--t3)}
.wz-after{display:flex;flex-wrap:wrap;gap:var(--sp3) var(--sp5);align-items:center;margin:var(--sp5) 0 0}
.wz-after .btn{min-height:56px;font-size:var(--t3)}
.wz-all{display:inline-flex;align-items:center;min-height:56px;font-size:var(--t3);font-weight:600}
.wz-after .linkbtn{min-height:56px;font-size:var(--t3)}

/* one entrance a screen: a short rise. Off under reduced motion (style.css kills all motion there). */
@media (prefers-reduced-motion: no-preference){
  .wz-in{animation:wz-rise .22s cubic-bezier(.2,.7,.2,1) both}
  @keyframes wz-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---- the plain deal card (SPEC.md "Card"): applies to the wizard answer, and the builder can
   put the same markup on the home top 3 and the shortcut pages. Spacing 8 / 16 / 24. ---------- */
.wz-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp4)}
.dcard{background:var(--s2);border-radius:var(--r3);padding:var(--sp4);display:flex;flex-direction:column;gap:var(--sp2);min-width:0;box-shadow:var(--shade)}
.dcard-img{margin:0 0 var(--sp2)}
.dcard-img img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r2);background:var(--s3)}
.dcard-img figcaption{margin:var(--sp1) 0 0;font-size:var(--t2);color:var(--muted);line-height:1.35}
.dcard-img figcaption a{color:var(--muted);text-decoration:underline}
.dcard-art-in{display:flex;align-items:center;justify-content:center;gap:var(--sp4);aspect-ratio:2/1;background:var(--s3);border-radius:var(--r2);color:var(--muted)}
.dcard-art-in .dcard-logo{width:48px;height:48px;max-width:none;max-height:none;margin:0;color:var(--ink);opacity:.9}
.dcard-art-in .wz-sil{width:132px;height:66px;color:var(--line-strong)}
.dcard-badges{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp2)}
.dbadge{display:inline-flex;align-items:center;font-size:var(--t2);font-weight:600;color:var(--muted);background:var(--s1);border-radius:999px;padding:var(--sp1) var(--sp3);min-height:32px}
.dbadge.warn{color:var(--warn);background:var(--s1)}
.dcard-name{font-family:var(--display);font-size:var(--t3);font-weight:650;letter-spacing:-.01em;line-height:1.3;margin:0;color:var(--ink);text-wrap:balance}
.dcard-name a{color:var(--ink)}
.dcard-trim{font-size:var(--t2);font-weight:500;color:var(--muted);margin-left:var(--sp1)}
.dcard-price{margin:0;display:flex;align-items:baseline;gap:var(--sp2);flex-wrap:wrap}
.dcard-price b{font-family:var(--display);font-size:var(--t6);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--money);text-shadow:var(--glow);font-variant-numeric:tabular-nums}
.dcard.unv .dcard-price b{color:var(--warn);text-shadow:none}
.dcard-price span{font-size:var(--t3);font-weight:600;color:var(--ink)}
.dcard-incl{margin:0;font-size:var(--t2);color:var(--muted)}
.dcard-ad{margin:0;font-size:var(--t2);color:var(--ink);font-variant-numeric:tabular-nums}
.dcard-act{margin:auto 0 0;padding-top:var(--sp2);display:flex}
.dcard-go{min-height:56px;padding:var(--sp3) var(--sp5);font-size:var(--t3);display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;text-decoration:none}
.dcard-go:hover{text-decoration:none}
.dcard-why{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--sp2);color:var(--link);font-size:var(--t2);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;list-style:none}
.dcard-why::-webkit-details-marker{display:none}
.dcard-why::after{content:"";width:8px;height:8px;margin-left:var(--sp2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dcard-more[open] .dcard-why::after{transform:translateY(2px) rotate(-135deg)}
.dcard-more{margin:0}
.dcard-more .receipt{background:var(--s1);box-shadow:none;cursor:default;padding:var(--sp3) var(--sp4);margin:0}
.dcard-more .receipt:hover{background:var(--s1)}
.dcard-more .rc-line,.dcard-more .rc-adv{font-size:var(--t2)}
.dcard-more .rc-sum{font-size:var(--t5)}
.dcard-more .rc-pen,.dcard-more .rc-pen .rc-v{color:var(--warn)}
.dcard-more .rc-cash .rc-v{color:var(--money-sm)}
.dcard-src{margin:var(--sp2) 0 0;font-size:var(--t2);color:var(--muted)}

@media (max-width:900px){
  .wz-cards{grid-template-columns:1fr}
  .wz-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wz-budgets{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .wz{margin:var(--sp4) 0 var(--sp5)}
  .wz-card{padding:var(--sp4) var(--sp4) var(--sp4);border-radius:var(--r3)}
  .wz-q{font-size:var(--t5)}
  .wz-sub{margin-bottom:var(--sp4);font-size:var(--t2)}
  .wz-rows{grid-template-columns:1fr}
  .wz-kind{min-height:140px;padding:var(--sp3) var(--sp2)}
  .wz-sil-big{width:104px;height:52px}
  .wz-budget{min-height:80px}
  .wz-tile-w{font-size:var(--t3)}
  .wz-budget .wz-tile-w{font-size:var(--t4)}
  .wz-row{padding:var(--sp3) var(--sp4);min-height:72px}
  .wz-nav .btn,.wz-after .btn{flex:1 1 auto}
  .dcard{padding:var(--sp4)}
  .dcard-price b{font-size:var(--t6)}
}

/* ---- round 6: the wizard on the home page, and the one card everywhere ---------------------- */
/* the opening: a short question and one line, then the wizard; generous room around both */
.hello{margin:var(--sp6) 0 0}
.hello-h{font-family:var(--display);font-size:var(--t5);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin:0 0 var(--sp3);max-width:24ch;text-wrap:balance}
.hello-p{margin:0;font-size:var(--t3);color:var(--muted);max-width:56ch;text-wrap:pretty}
.wz{scroll-margin-top:var(--sp4)}
.wz .noscript-note{margin:0;padding:var(--sp4);background:var(--s1);border-radius:var(--r3);font-size:var(--t3)}
/* after an answer the answer is the cards; the home top 3 would repeat them */
.wz-done .results{display:none}
/* the browse section follows the wizard with clear air, and says it is the other way in */
.first{scroll-margin-top:var(--sp4)}
.first .first-h{font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0 0 var(--sp2);color:var(--ink)}
/* deal cards outside the wizard sit on the page, so they take the panel colour, and their
   badges and receipt take the tint, so they still read as chips and a slip */
.cards .dcard{background:var(--s1)}
.cards .dcard .dbadge,.cards .dcard .dcard-more .receipt{background:var(--s2)}
.cards.dcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp4);align-items:stretch}
.cards-h{font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:var(--sp6) 0 var(--sp4)}
.hub-cards{margin:0 0 var(--sp5)}
.more .cards-h{font-size:var(--t3);margin:var(--sp5) 0 var(--sp3)}
.results .cards{margin:0 0 var(--sp4)}
/* the plain notes under the table, one per line */
.hint{list-style:none;padding:0;margin:var(--sp3) 0 0;display:grid;gap:var(--sp2);font-size:var(--t2);color:var(--muted);max-width:72ch}
/* the small print: closed by default, one summary line each */
.small-print{margin:var(--sp7) 0 var(--sp5)}
.small-print > h2{font-family:var(--display);font-size:var(--t4);font-weight:700;color:var(--ink);margin:0 0 var(--sp2)}
.small-print details.glossary,.small-print details.legend,.small-print details.coverage{margin:var(--sp3) 0 0;padding:0;border:0;background:var(--s1);border-radius:var(--r3);box-shadow:var(--shade)}
.small-print details > summary{display:flex;align-items:center;min-height:56px;padding:0 var(--sp4);font-weight:600;font-size:var(--t3);cursor:pointer}
.small-print details > :not(summary){margin-left:var(--sp4);margin-right:var(--sp4)}
.small-print details[open]{padding-bottom:var(--sp4)}
.small-print .tablewrap,.small-print table.cov{max-width:calc(100% - 2 * var(--sp4))}
@media (max-width:900px){
  .cards.dcards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hello{margin:var(--sp5) 0 0;padding:0}
  .hello-h{font-size:var(--t5)}
  .hello-p{font-size:var(--t2)}
  .wz-art{width:104px;height:56px}
}
/* no script: the printed step 1 cannot answer a tap, so it hides and the note shows instead */
@media (scripting: none){ .wz .wz-card{display:none} }
/* shortcut and make chips reach the 44px touch floor (round 6 walk: 40px) */
.chip{min-height:44px;display:inline-flex;align-items:center}

/* ---- round 7 (Oct 30 2026, r2959, seats A4 and B4). Tokens only. -------------------------- */
/* the first screen: the count of what we read sits under the question, one quiet line */
.hello-trust{margin:0 0 var(--sp2);font-size:var(--t2);font-weight:600;color:var(--ink);max-width:56ch;text-wrap:balance}
/* a heading focused by script shows no ring; a keyboard user still gets one (:focus-visible) */
.wz-q:focus:not(:focus-visible){outline:0}
/* the answer heading is compact, so the first price sits inside a phone's first screen */
.wz-q-ans{font-size:var(--t4);max-width:none;margin-bottom:var(--sp1)}
.wz-q-ans + .wz-sub{margin-bottom:var(--sp3)}
.wz{scroll-margin-top:0}
/* type my number: the field is as wide as the card */
.wz-type input{max-width:none}
.wz-type-row{flex-wrap:nowrap}
.wz-type-row input{flex:1 1 auto;min-width:0}
.wz-type input::placeholder{color:var(--muted);font-weight:500}
/* one cue under the first answer card; on a wide screen it sits under the row of cards */
.wz-cue{margin:0;font-size:var(--t2);color:var(--muted);text-wrap:pretty}
@media (min-width:901px){ .wz-cue{order:9;grid-column:1 / -1} }
/* the take-over word, glossed on the card */
.dcard-gloss{margin:0;font-size:var(--t2);color:var(--muted);line-height:1.35}
/* the home page after the wizard: the 3 cheapest, then "See every deal" */
.see-all{margin:0 0 var(--sp5)}
.see-every{min-height:56px;font-size:var(--t3);padding:var(--sp3) var(--sp6)}
/* everything else lives behind one summary, so the home page stays short on a phone */
details.every{margin:0 0 var(--sp6);background:var(--s1);border-radius:var(--r3);box-shadow:var(--shade)}
details.every > summary{display:flex;flex-direction:column;justify-content:center;gap:var(--sp1);min-height:72px;
  padding:var(--sp3) var(--sp5);cursor:pointer;list-style:none;border-radius:var(--r3)}
details.every > summary::-webkit-details-marker{display:none}
.every-w{font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;color:var(--ink);display:flex;align-items:center;gap:var(--sp2)}
.every-w::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
details.every[open] .every-w::after{transform:translateY(2px) rotate(-135deg)}
.every-n{font-size:var(--t2);color:var(--muted)}
details.every > summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
details.every[open]{padding:0 var(--sp5) var(--sp5)}
details.every[open] > summary{margin:0 calc(-1 * var(--sp5))}
details.every > .first{margin-top:var(--sp3)}
@media (max-width:720px){
  details.every[open]{padding:0 var(--sp3) var(--sp4)}
  details.every[open] > summary{margin:0 calc(-1 * var(--sp3))}
  details.every > summary{padding:var(--sp3) var(--sp4)}
}
/* wide screens: the question and the wizard sit in the middle, no empty right half */
@media (min-width:1000px){
  .hello{max-width:860px;margin-left:auto;margin-right:auto;text-align:center}
  .hello-h,.hello-p,.hello-trust{margin-left:auto;margin-right:auto}
  .hello-h{font-size:var(--t6)}
  .wz{max-width:860px;margin-left:auto;margin-right:auto}
  .wz-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* a photo credit link is a 44px target on touch */
@media (pointer:coarse){
  .dcard-img figcaption a,.carimg figcaption a{padding-block:14px}
}
/* the over-budget note on the answer is one short block, so card 1 still starts high */
.wz-q-ans ~ .wz-honest{font-size:var(--t2);padding:var(--sp2) var(--sp3);margin-bottom:var(--sp3)}
/* the deal page: the lead names its basis; the quiet line under it offers the way back */
.deal-basis{margin:calc(-1 * var(--sp2)) 0 var(--sp3)}
.deal-basis a{font-weight:600}
.math-basis{margin:0 0 var(--sp2)}
/* Data status: jump links at the top */
.jump{display:flex;flex-wrap:wrap;gap:0 var(--sp3);margin:var(--sp3) 0 var(--sp4)}
.jump a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}