/* Round 26 (r3056): the first five seconds. Loads after r23.css. Tokens only (polish.css :root), no important flag.
   Yellow marks PRICES only: the .r26-real marker is the one yellow thing in the hero (the hatched Gap bar is the existing estimate style).
   Blue is the one button. Nothing loops; the marker swipes once (400 ms) and reduced motion shows the finished state. */

/* ---- the phone nav: Deals, How it works, Sources. Updates and Averages are in the footer. ---- */
@media (max-width:639px){ .nav .nav-more{display:none} }

/* ---- the hero ---- */
.r26-hero{margin:var(--sp3) 0 0}
.r26-hero .hello-h{font-size:clamp(26px,7.4vw,var(--t5));line-height:1.04;letter-spacing:-.03em;max-width:18ch;margin:0 0 var(--sp2)}
.r26-hero .hello-p{font-size:var(--t2);line-height:1.4;color:var(--muted);max-width:56ch;margin:var(--sp2) 0 0}
.r26-hero .hello-trust{margin:var(--sp1) 0 0;font-size:var(--t2);line-height:1.35;max-width:none;font-weight:600;font-variant-numeric:tabular-nums;text-wrap:pretty}
.r26-hero .hello-trust b{font-weight:700}
.r26-upd{color:var(--muted);font-weight:500}

/* ---- the gap: two prices, two thin bars, one quiet line ---- */
.r26-gap{margin:0}
.r26-say{margin:0;font-size:var(--t3);line-height:1.25;color:var(--muted);font-weight:500}
.r26-l1,.r26-l2{display:block}
.r26-ad{color:var(--muted);font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.r26-l2{margin-top:var(--sp1);color:var(--ink);font-weight:700}
.r26-real{position:relative;display:inline-block;isolation:isolate;color:var(--price-ink);font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-size:28px;padding:2px var(--sp2) 5px;margin:0 2px;font-variant-numeric:tabular-nums;vertical-align:-3px}
.r26-real::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--price-bg);border-radius:var(--r2);clip-path:inset(0 0 0 0);
  animation:mark-swipe var(--d-draw) var(--e-draw) backwards}
.r26-gap .dgap{margin:var(--sp2) 0 0;gap:4px}
.r26-gap .dgap-row{grid-template-columns:32px minmax(0,1fr)}
.r26-gap .dgap-bar{height:8px}
.r26-gap .dgap-v,.r26-gap .dgap-say{display:none}
.r26-gap .dgap-why{display:none;margin:0;font-size:var(--t1);color:var(--muted)}
.r26-cap{margin:var(--sp1) 0 0;font-size:var(--t1);line-height:1.4;color:var(--muted);max-width:60ch;text-wrap:pretty}
.r26-cap a{font-weight:600}

/* ---- the preview card: wide screens only ---- */
.r26-pv{display:none}

/* ---- wide screens: a 12-column hero, left aligned. Headline and gap in 1 to 7, the preview in 8 to 12. ---- */
@media (min-width:1000px){
  .hello.r26-hero{max-width:none;margin:var(--sp3) 0 var(--sp3);text-align:left}
  .r26-hero.r26-has-pv{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp5);align-items:start}
  .r26-hero .r26-main{grid-column:1 / span 7}
  .r26-hero .hello-h{font-size:50px;max-width:none;margin:0 0 var(--sp3)}
  .r26-hero .hello-h,.r26-hero .hello-p,.r26-hero .hello-trust{margin-left:0;margin-right:0}
  .r26-hero .hello-p{margin-top:var(--sp2);font-size:var(--t2);max-width:66ch}
  .r26-hero .hello-h{margin-bottom:var(--sp2)}
  .r26-gap .dgap{margin-top:var(--sp2)}
  .r26-say{font-size:var(--t4)}
  .r26-ad{font-size:34px}
  .r26-real{font-size:40px;padding:2px var(--sp3) 6px}
  .r26-gap .dgap-bar{height:10px}
  .r26-gap .dgap-why{display:block}
  .r26-pv{display:block;grid-column:8 / span 5;margin-top:0;padding:var(--sp4) var(--sp5);background:var(--s1);border:2px solid var(--edge);border-radius:var(--r3);box-shadow:var(--card-shadow)}
  :where(.r26-pv) p{margin:0}
  .r26-pv-k{font-size:var(--t1);font-weight:600;color:var(--muted)}
  .r26-pv-n{margin-top:var(--sp2);display:flex;align-items:center;gap:var(--sp2);font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;line-height:1.2}
  .r26-pv-n a{color:var(--ink)}
  .r26-pv-logo{width:28px;height:28px;flex:none}
  .r26-pv-t{margin-top:var(--sp2)}
  .r26-chip{display:inline-block;padding:2px var(--sp3);border:1px solid var(--line-strong);border-radius:999px;font-size:var(--t1);font-weight:600;color:var(--ink)}
  .r26-pv-p{margin-top:var(--sp3);display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp3);color:var(--muted);font-size:var(--t2)}
  .r26-pv-p .r26-real{font-size:48px;padding:2px var(--sp3) 6px}
  .r26-pv-a{margin-top:var(--sp2);font-size:var(--t3);color:var(--muted)}
  .r26-pv-ad{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}   /* round 27 (r3063): muted ink, no strike-through, no yellow */
  .r26-pv-g{margin-top:var(--sp2);font-size:var(--t2);color:var(--muted)}
  .r26-pv-c{margin-top:var(--sp2);font-size:var(--t1);color:var(--quiet)}
  .r26-pv-go{margin-top:var(--sp2)}
  .r26-pv-go .btn{display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){ .r26-real::before{animation:none} }

/* ---- round 27 (item 21): the sub-line is one line on a phone ---- */
@media (max-width:719px){ .r26-hero .hello-p,.r26-hero .hello-trust{font-size:var(--t1);line-height:1.3;max-width:none} }

/* ---- step 1 on a phone sits higher (r3056: the first tile row starts as high as the gap block allows). Spacing and size only. ---- */
@media (max-width:719px){
  .wz-card:has(.wz-kinds) .wz-top{min-height:28px}
  .wz-card:has(.wz-kinds) .wz-q{font-size:var(--t4);line-height:1.2;margin-bottom:var(--sp2);max-width:none}
  .wz-card:has(.wz-kinds) .wz-plain{min-height:44px;padding:var(--sp1) var(--sp3);margin-bottom:var(--sp2);flex-wrap:nowrap;gap:0 var(--sp1)}
}

/* ---- wide screens: the step 1 question sits on one line, so the first tile row starts higher (spacing only) ---- */
@media (min-width:1000px){
  .wz-card:has(.wz-kinds) .wz-q{max-width:none;font-size:32px;margin-bottom:var(--sp3)}
  .wz-card:has(.wz-kinds) .wz-top{min-height:32px}
}

/* Round 27: at two or three columns the photo credit sits under its photo, not under the button, so a card
   with a credit and a card without one put their buttons at the same height (tests/test_round21). */
@media (min-width:901px){
  .cards.dcards>.dcard>.dcard-label,.wz-cards>.dcard>.dcard-label,#top3>.dcard>.dcard-label{order:-3}
  .cards.dcards>.dcard>.dcard-img,.wz-cards>.dcard>.dcard-img,#top3>.dcard>.dcard-img{order:-2}
  .cards.dcards>.dcard>.dcard-foot,.wz-cards>.dcard>.dcard-foot,#top3>.dcard>.dcard-foot{order:-1;margin-top:0}
}

/* Round 27 (r3073): the sign-up line for DV360 banner visitors. Shown by r26.js only; one row, the consent line small under it. */
.r26-adnl[hidden]{display:none}
.r26-adnl{margin:var(--sp2) 0 0;max-width:520px}
.r26-nl-row{display:flex;gap:var(--sp2);align-items:stretch}
.r26-nl-row input[type=email]{flex:1 1 auto;min-width:0;min-height:44px;padding:0 var(--sp3);font:inherit;font-size:16px;border:2px solid var(--edge);border-radius:var(--r2);background:var(--s1);color:var(--ink)}
.r26-nl-row .btn{flex:none;min-height:44px;padding:0 var(--sp3);font-size:var(--t2)}
.r26-consent{margin:var(--sp1) 0 0;font-size:12px;line-height:1.35;color:var(--muted)}
.r26-adnl .nlstate{margin:2px 0 0;font-size:var(--t1)}
@media (max-width:480px){ .r26-nl-row{flex-wrap:wrap} .r26-nl-row .btn{flex:1 1 100%} }

/* Round 27 (item 15): the no-mileage page, one block per offer. The line reads "$368 a month stated · 8 months · Yonkers · LeaseTrader". */
ul.nom-list{list-style:none;margin:var(--sp3) 0 0;padding:0}
.nom-list li{margin:0;padding:0 0 var(--sp2);border-top:1px solid var(--line-strong)}
.nom-list li:last-child{border-bottom:1px solid var(--line-strong)}
.nom-car{display:block;font-weight:700;font-size:var(--t3);line-height:20px;padding:12px 0 0;min-height:44px;box-sizing:border-box}
.nom-list .nom-line{margin:0;font-size:var(--t2);line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}