/* Real Lease Cost: round 35, lane H (Nov 1 2026). Loads after r28.css. Tokens only (polish.css :root), no important flag, no inline style.
   Rules in this file: the first screen (H1 to H4, H6), the all-in price pair (H5), the back controls (B1 to B4).
   The shared class names r35-rcpt, r35-rcpt-line, r35-rcpt-total, r35-first, r35-cta, r35-budget, r35-allin are the hooks the motion lane (r35m.css) animates.
   This file adds no animation. */

/* ---- the hero: eyebrow, headline, facts line, the first action, then the receipt ---- */
.r35-hero .hello-h{max-width:20ch}
.r35-hero .hello-trust{margin:var(--sp2) 0 0;font-size:var(--t3);font-weight:600;color:var(--ink)}
.r35-hero .r26-main{min-width:0}

/* ---- H4: the first thing to tap ---- */
.r35-first{margin:var(--sp4) 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3)}
.r35-budget{margin:0}
.r35-bl{display:block;margin:0 0 var(--sp2);font-family:var(--display);font-size:var(--t4);line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.r35-brow{position:relative;display:flex;gap:var(--sp2);align-items:stretch}
.r35-dollar{position:absolute;left:var(--sp4);top:0;bottom:0;display:flex;align-items:center;font-family:var(--display);font-size:var(--t4);font-weight:700;color:var(--muted);pointer-events:none}
.r35-brow input{flex:1 1 8rem;min-width:0;min-height:56px;box-sizing:border-box;padding:0 var(--sp3) 0 calc(var(--sp4) + 16px);font-family:var(--display);font-size:24px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--s1);border:2px solid var(--edge);border-radius:var(--r2)}
.r35-brow input[aria-invalid="true"]{border-color:var(--bad)}
.r35-bgo{flex:0 0 auto;min-height:56px;padding:0 var(--sp4);font-size:var(--t3);white-space:nowrap}
.r35-berr{margin:0;min-height:0;font-size:var(--t2);font-weight:600;color:var(--bad)}
.r35-berr:empty{display:none}
.btn.r35-cta{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;min-height:60px;padding:var(--sp3) var(--sp4);
  font-family:var(--display);font-size:var(--t4);line-height:1.15;text-align:center;text-decoration:none}
/* with scripts off the budget row can do nothing: only the plain link to the cheapest cards remains */
@media (scripting:none){ .r35-budget{display:none} }

/* ---- H3: the receipt ---- */
.r35-rcpt{margin:var(--sp5) 0 0;padding:var(--sp3) var(--sp4) var(--sp3);background:var(--s1);border:2px solid var(--edge);border-radius:var(--r3);box-shadow:var(--card-shadow);max-width:34rem}
.r35-rcpt-lines{list-style:none;margin:0;padding:0}
.r35-rcpt-line{display:flex;align-items:baseline;gap:var(--sp2);padding:6px 0;font-size:var(--t3);line-height:1.25;color:var(--ink)}
.r35-rl{min-width:0}
.r35-rl a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.r35-lead{flex:1 1 12px;min-width:12px;align-self:flex-end;margin-bottom:5px;border-bottom:2px dotted var(--line-strong)}
.r35-rv{flex:none;font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.r35-ad .r35-rl,.r35-ad .r35-rv{color:var(--muted)}
.r35-add .r35-rl,.r35-add .r35-rv{font-weight:500;color:var(--muted)}
.r35-sub{border-top:2px solid var(--line-strong);margin-top:2px;padding-top:8px}
.r35-sub .r35-rl,.r35-sub .r35-rv{font-weight:700}
.r35-rcpt-total{border-top:2px solid var(--edge);margin-top:4px;padding-top:10px}
.r35-rcpt-total .r35-rl{font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em}
.r35-rcpt .r26-real{font-size:26px;margin:0}
.r35-rcpt-note{margin:var(--sp2) 0 0;font-size:var(--t1);line-height:1.35;color:var(--muted)}

/* ---- H5: "Ad $471 -> $575/mo all-in" ---- */
.r35-adfig{font-size:var(--t2);font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.r35-arrow{font-size:var(--t3);color:var(--quiet);line-height:1}
.r35-allin{display:inline-flex;align-items:baseline;gap:var(--sp1);white-space:nowrap}
.r35-mo{font-size:var(--t3);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.r35-est{font-size:var(--t1);font-weight:500;color:var(--muted)}
.dcard-price.r35-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp1) var(--sp2)}
.dcard-price.r35-price>span{flex:none;min-width:0}
.dcard-price.r35-price span.r35-adfig{flex:none;font-size:var(--t2);font-weight:600;color:var(--muted)}
.dcard-price.r35-price span.r35-mo{flex:none;font-size:var(--t3);font-weight:700;color:var(--ink)}
.dcard-price.r35-price span.r35-est{flex:1 1 100%;font-size:var(--t1);font-weight:500;color:var(--muted)}
.dcard.unv .dcard-price.r35-price span.r35-mo{color:var(--warn-ink)}
.deal-sum .r35-allin b[data-lead]{margin:0}
.deal-sum .r35-adfig{margin-right:var(--sp1)}
.deal-sum .r35-arrow{margin-right:var(--sp2)}
.deal-sum .r35-est{font-size:var(--t2)}
.r26-pv-p .r35-adfig{font-size:var(--t3)}
.cmp-total td .r35-allin{display:inline-flex;flex-wrap:wrap;white-space:normal}   /* round 35 release: three columns on a phone are about 90px each; "/mo all-in" wraps under the figure instead of overflowing the card (28e E3) */
.cmp-total td .r35-allin .r35-mo{white-space:nowrap}
.cmp-total td .r35-adfig{display:block;margin-top:2px;font-size:var(--t1)}
.cmp-total td .r35-mo{font-size:var(--t2)}

/* ---- B1: "‹ Back" at the top left of questions 2 to 4, on the row of "Step N of 4" ---- */
.wz-top .wz-back{order:-1;flex:none;display:inline-flex;align-items:center;gap:var(--sp1);min-height:44px;padding:0 var(--sp3) 0 0;text-decoration:none;font-size:var(--t3);font-weight:700;color:var(--link)}
.wz-top .wz-back:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- B3: "‹ Change budget" above the cheapest cards, only after "Show me the cheapest, all-in" ---- */
.r35-chg{display:none;margin:0 0 var(--sp1)}
body.rlc-plain-on .r35-chg{display:block}
.r35-backlink{display:inline-flex;align-items:center;gap:var(--sp1);min-height:44px;font-size:var(--t3);font-weight:700;text-decoration:none;color:var(--link)}
.r35-backlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- B4: the slim sticky top bar on a deal page, phones only ---- */
.r35-topbar{display:none}
@media (max-width:719px){
  .r35-topbar{display:block;position:sticky;top:0;z-index:20;background:var(--s1);border-bottom:2px solid var(--edge)}
  .r35-topback{display:flex;align-items:center;gap:var(--sp1);min-height:44px;padding:0 var(--sp4);font-size:var(--t3);font-weight:700;text-decoration:none;color:var(--link)}
  main.deal-wrap .crumbs{display:none}
}

/* ---- wide screens: the headline and the first action on the left, the receipt (then the preview) on the right ---- */
@media (min-width:1000px){
  .hello.r35-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp5);align-items:start;max-width:none}
  .r35-hero .r26-main{grid-column:1 / span 6;grid-row:1 / span 2}
  .r35-hero .r35-rcpt{grid-column:8 / span 5;grid-row:1;margin:var(--sp2) 0 0;max-width:none}
  .r35-hero .r26-pv{grid-column:8 / span 5;grid-row:2;margin-top:var(--sp5)}
  .r35-hero .hello-h{font-size:50px;max-width:16ch}
  .r35-rcpt-line{font-size:var(--t4)}
  .r35-rcpt-total .r35-rl{font-size:var(--t5)}
  .r35-rcpt .r26-real{font-size:40px;padding:2px var(--sp3) 6px}
  .r35-first{max-width:30rem}
}
@media (max-width:719px){
  .r35-hero .hello-h{font-size:clamp(26px,7.4vw,var(--t5))}
  .r35-rcpt{margin-top:var(--sp4)}
}

/* ---- H8: on a deal page the "Priced for <state>" line sits clear of the "Lease ends" line, and "Not your state? Change" is one line ---- */
main.deal-wrap .deal-basis-row{display:block;margin:var(--sp3) 0 var(--sp3)}
main.deal-wrap .deal-basis-row .deal-basis,main.deal-wrap .deal-basis-row .deal-change{display:inline}
main.deal-wrap .deal-basis-row .deal-change > summary{display:inline-flex;vertical-align:baseline;padding:0 var(--sp1);text-decoration:underline;text-underline-offset:3px}
main.deal-wrap .deal-basis-row .deal-change[open]{display:block}
main.deal-wrap .deal-ends{margin:var(--sp3) 0 0}

/* ---- H7: the money due at signing, one plain line ---- */
.dcard-sign,.deal-sign{margin:var(--sp1) 0 0;font-size:var(--t2);font-weight:600;line-height:1.35;color:var(--ink)}
.deal-sign{font-size:var(--t3);margin:var(--sp2) 0 var(--sp3)}
.dcard-fold-lines{display:grid;gap:var(--sp1);margin:0 0 var(--sp3)}
.dcard-fold-lines:empty{display:none}
.dcard-fold-lines p{margin:0}
.r35-rcpt-line[data-r35="sign"] .r35-rl{flex:0 1 auto}

/* ---- H18: the "?" on a big price and its one sentence ---- */
.r35-why{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:var(--sp1);padding:0;border:2px solid var(--edge);border-radius:999px;
  background:var(--s1);color:var(--ink);font:700 var(--t2)/1 var(--display);cursor:pointer;vertical-align:middle}
.r35-why:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.r35-why::after{content:"";position:absolute;inset:-9px}      /* a 46px tap area around the 28px mark */
.r35-why{position:relative}
.r35-why-body{flex:1 1 100%;display:block;margin:var(--sp1) 0 0;padding:var(--sp2) var(--sp3);border-radius:var(--r2);background:var(--s2);color:var(--ink);font-size:var(--t2);font-weight:500;line-height:1.4}
.r35-why-body[hidden]{display:none}
.r35-rcpt-total{flex-wrap:wrap}
@media (scripting:none){ .r35-why{display:none} }
.dcard-price.r35-price>span.r35-why-body{flex:1 1 100%}
.dcard-price.r35-price>.r35-why{align-self:center}

/* ---- H17: a small icon on each receipt line ---- */
.rc-ic{flex:none;width:18px;height:18px;margin-right:var(--sp2);vertical-align:-3px;color:var(--muted)}
.r35-rl .rc-ic{width:20px;height:20px;margin-right:6px;vertical-align:-4px}
.r35-rl .rc-ic + .rc-ic{margin-left:-2px}
.rc-l .rc-ic{display:inline-block}

/* ---- H16 (r3130 #3): one thing per screen. The results open on the one cheapest car, big, then "See 2 more" ---- */
.dcard[hidden],.wz-cards>.dcard[hidden]{display:none}
#top3.r35-one>.dcard:not(:first-child){display:none}
#top3.r35-one,.wz-cards.r35-one{grid-template-columns:minmax(0,40rem)}
.r35-one>.dcard:first-child .dcard-price .r35-mo{font-size:var(--t4)}
.r35-one>.dcard:first-child .dcard-price .r35-adfig{font-size:var(--t3)}
.r35-one>.dcard:first-child .dcard-name{font-size:var(--t5)}
.r35-more1{margin:var(--sp3) 0 var(--sp4)}
.r35-more1 .btn{width:100%;max-width:40rem;min-height:56px;font-size:var(--t4);font-family:var(--display)}
.r35-more1[hidden]{display:none}
@media (scripting:none){ .r35-more1{display:none} }
@media (max-width:480px){ .results > .r35-more1{order:2} }

/* ---- H19 (r3136, r3151): the local notes. Classes theme-la, theme-sd, theme-sf, theme-ca and theme-<state> sit on <html>; the colours are tokens in r35m.css ---- */
.r35-local{margin:var(--sp3) 0 0;padding:var(--sp3) var(--sp4);border-left:4px solid var(--accent2);background:var(--s1);border-radius:var(--r2)}
.r35-local[hidden]{display:none}
/* Round 35 release: a tagged ad link (html[data-r35-city], set by r31h.js at the h1) shows the pre-printed block from the first layout, so nothing is pushed. */
.r35-local-h [data-c]{display:none}
html[data-r35-city=la] .r35-local-h [data-c=la],html[data-r35-city=sd] .r35-local-h [data-c=sd],html[data-r35-city=sf] .r35-local-h [data-c=sf],html[data-r35-city=ca] .r35-local-h [data-c=ca]{display:inline}
html[data-r35-city] .r35-local[hidden][data-pre]{display:block!important}
.r35-local-h{margin:0 0 var(--sp1);font-family:var(--display);font-size:var(--t4);font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.r35-local-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp1);font-size:var(--t2);line-height:1.4;color:var(--ink)}

/* ---- H18 on the deal page receipt, H15: the "?" on each line, and the one key "about = our guess" ---- */
.receipt.big .rc-line,.receipt.big .rc-adv,.receipt.big .rc-total{flex-wrap:wrap}
.receipt.big .rc-line>.r35-why,.receipt.big .rc-adv>.r35-why,.receipt.big .rc-total>.r35-why{align-self:center;margin-left:var(--sp1)}
.receipt.big .r35-why-body{flex:1 1 100%;margin-top:var(--sp1)}
.r35-key{margin:var(--sp2) 0 0;font-size:var(--t1);line-height:1.35;font-weight:600;color:var(--muted)}
.receipt .r35-key{padding:var(--sp1) 0 0}
@media (max-width:480px){ .wz-card:has(> .wz-cards) > .wz-more1{order:1} }