/* lease-findr public landing + pricing (LH-122). Tokens come from app.css (DESIGN.md "Highlighter").
   Everything here is scoped to body.lp and lp-* classes so the explorer's rules never leak in or out.
   Grid: 12 columns, hero copy 5 / example 7 at >= 1024px, stacked below. Example table drops to
   3 columns (leverage, $/mo, car) under 640px with a "Show all columns" toggle. */

body.lp{display:block;height:auto;min-height:100%;overflow:visible;font-size:var(--fs-m);line-height:1.55}
:where(.lp) :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0}
:where(.lp) :where(ul,ol){padding:0;list-style:none}
.lp .num{font-variant-numeric:tabular-nums}
.lp a{color:var(--ink)}
.lp a:hover{text-decoration:none}

.lp-wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.lp-skip{position:absolute;left:8px;top:-60px;z-index:10;padding:8px 12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-ctl)}
.lp-skip:focus{top:8px}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- links and buttons */
.lp-link{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:2px}
.lp-link:hover{background:var(--sel)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink);font-size:var(--fs-s);font-weight:600;white-space:nowrap;text-decoration:none}
.lp-btn:hover{background:var(--hover)}
.lp-btn.primary{background:var(--hl);color:var(--hl-ink);border-color:var(--hl-edge)}
.lp-btn.primary:hover{background:color-mix(in oklch,var(--hl) 88%,var(--ink))}
.lp-btn.sm{height:26px;padding:0 10px;font-size:var(--fs-xs)}
.lp-narrow{display:none}

/* ---------- header */
.lp-top{position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
.lp-top-in{height:var(--headh);display:flex;align-items:center;gap:16px}
.lp .brand{display:inline-flex;align-items:center;font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--ink);text-decoration:none;white-space:nowrap}
.lp .brand .mark{width:14px;height:14px;margin-right:7px;fill:currentColor;flex:none}
.lp-nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:var(--fs-s)}
.lp-nav > a:not(.lp-btn){color:var(--ink2);text-decoration:none;padding:4px 0}
.lp-nav > a:not(.lp-btn):hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- hero */
.lp-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:40px;row-gap:32px;padding-block:56px 24px;align-items:start}
.lp-hero-copy{grid-column:1 / span 5;padding-top:8px}
.lp-ex{grid-column:6 / span 7}
.lp h1{font-size:clamp(28px,3.1vw,40px);line-height:1.1;font-weight:750;letter-spacing:-.02em;text-wrap:balance}
.lp-sub{margin-top:18px;font-size:var(--fs-l);color:var(--ink2);max-width:46ch;text-wrap:pretty}
.lp-cta{display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-top:24px}
.lp-cta .lp-link{font-size:var(--fs-m);display:inline-block;padding-block:3px}
.lp-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:28px;font-size:var(--fs-s);color:var(--mute)}
.lp-facts li{display:flex;align-items:baseline;gap:7px}
.lp-facts li::before{content:"";flex:none;width:5px;height:5px;background:var(--line-strong);border-radius:1px;transform:translateY(-2px)}
/* the price fact: the one number in the hero copy, so it reads first and in ink */
.lp-facts li.price{flex-basis:100%;font-size:var(--fs-m);color:var(--ink2)}
.lp-facts li.price b{color:var(--ink);font-weight:700}
.lp-nat{margin:10px 0 0;max-width:52ch;font-size:var(--fs-s);line-height:1.5;color:var(--ink2)}
.lp-nat b{color:var(--ink);font-weight:700}

/* ---------- example output (the hero art) */
.lp-ex{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);min-width:0}
.lp-ex-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.lp-ex-head p{font-size:var(--fs-s);color:var(--mute)}
.lp-ex-head p b{color:var(--ink);font-weight:650;margin-right:8px}
.lp-tag{font-size:var(--fs-xs);font-weight:600;color:var(--warn-ink);background:color-mix(in oklch,var(--warn) 14%,var(--panel));padding:1px 7px;border-radius:var(--r-ctl);white-space:nowrap}
.lp-ex-scroll{overflow-x:auto}
.lp-ex-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--mute)}
.lp-ex-foot span{max-width:68ch}

.lp-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-s)}
.lp-tbl th,.lp-tbl td{padding:0 8px;height:37px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
.lp-tbl thead th{height:32px;font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.lp-tbl .r{text-align:right}
.lp-tbl th:first-child,.lp-tbl td:first-child{padding-left:14px}
.lp-tbl th:last-child,.lp-tbl td:last-child{padding-right:14px}
.lp-tbl tbody tr:last-child > *{border-bottom:0}
.lp-tbl td.num,.lp-tbl td .num{color:var(--ink2);font-weight:500}
.lp-tbl td.good,.lp-tbl .good{color:var(--good-ink)}
.lp-tbl td.bad,.lp-tbl .bad{color:var(--bad-ink)}
.lp-tbl td.lp-pay{color:var(--ink);font-weight:700;font-size:var(--fs-m)}
.lp-tbl .car{color:var(--ink);font-weight:500;white-space:normal;min-width:160px;padding-block:5px}
.car-sub{display:block;font-size:var(--fs-xs);font-weight:400;color:var(--mute);line-height:1.35}
.car-sub .nx{display:none}
.car-sub .bad{color:var(--bad-ink)}
.lp-chip{display:inline-block;margin-left:7px;padding:0 6px;font-size:var(--fs-xs);font-weight:600;line-height:18px;color:var(--ink2);border:1px solid var(--line-strong);border-radius:var(--r-ctl);vertical-align:1px}

/* leverage: bar + number + word. The highlighter marks the top band only. */
.lv{display:inline-flex;align-items:center;gap:7px}
.lv-bar{width:28px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.lv-bar i{display:block;height:100%;background:var(--line-strong)}
.lv.mid .lv-bar i{background:var(--ink2)}
.lv.hi .lv-bar i{background:var(--hl);box-shadow:inset 0 0 0 1px var(--hl-edge)}
.lv b{min-width:24px;text-align:center;font-weight:700;font-size:var(--fs-m);color:var(--ink);border-radius:2px}
.lv.hi b{background:var(--hl);color:var(--hl-ink);padding:0 3px}
.lv-t{width:30px;text-align:left;font-size:var(--fs-xs);color:var(--mute)}

/* selected row + its open "show the math" panel read as one block */
.lp-tbl tr.sel td{background:var(--sel);border-top:1px solid var(--line-strong);border-bottom-color:var(--line)}
.lp-tbl tr.math td{background:var(--panel);border-bottom:1px solid var(--line-strong);height:auto;padding:14px 14px 16px;white-space:normal}
.lp-tbl tr.sel td:first-child,.lp-tbl tr.math td:first-child{box-shadow:inset 1px 0 0 var(--line-strong)}
.lp-tbl tr.sel td:last-child,.lp-tbl tr.math td:last-child{box-shadow:inset -1px 0 0 var(--line-strong)}

.lp-math{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.lp-math h3{display:flex;align-items:baseline;gap:6px;font-size:var(--fs-s);font-weight:650;color:var(--ink2);padding-bottom:6px;border-bottom:1px solid var(--line)}
.lp-math h3 .big{margin-left:auto;font-size:var(--fs-3xl);line-height:1;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.lp-math h3 .of{font-size:var(--fs-s);font-weight:500;color:var(--mute)}
.lp-parts{margin-top:6px}
.lp-parts div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:var(--fs-s)}
.lp-parts dt{color:var(--ink2)}
.lp-parts dd{color:var(--ink);font-weight:600;white-space:nowrap;text-align:right}
.lp-parts dd span{color:var(--mute);font-weight:500}
.lp-parts dd.good{color:var(--good-ink)}
/* payment ledger: each "=" row is the sum of the rows above it */
.lp-ledger div.sum{border-top:1px solid var(--line);margin-top:2px;padding-top:4px}
.lp-ledger div.sum dt{color:var(--ink);font-weight:650}
.lp-ledger div.sum dd{font-weight:700}
.lp-parts dd .lp-as,.lp-as{display:inline-block;margin-left:5px;padding:0 5px;font-size:var(--fs-xs);font-weight:600;line-height:17px;color:var(--warn-ink);background:color-mix(in oklch,var(--warn) 14%,var(--panel));border-radius:var(--r-ctl)}

/* ---------- sections */
.lp-sec{padding-block:64px 8px}
.lp h2{font-size:var(--fs-2xl);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.lp-sec > h2{margin-bottom:22px}
.lp-sec-lede{max-width:70ch;margin-bottom:24px}
.lp-sec-lede p{margin-top:10px;color:var(--ink2)}
.lp-h3{font-size:var(--fs-l);font-weight:650;margin:40px 0 12px}

.lp-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;max-width:1000px}
.lp-defs > div{padding:12px 0;border-top:1px solid var(--line)}
.lp-defs > div.wide{grid-column:1 / -1}
.lp-defs dt{display:flex;justify-content:space-between;gap:12px;font-weight:650;color:var(--ink)}
.lp-defs dt span{font-weight:500;font-size:var(--fs-s);color:var(--mute)}
.lp-defs dd{margin-top:3px;color:var(--ink2);max-width:62ch}
.lp-defs em{font-style:normal;font-weight:650;color:var(--warn-ink)}

/* ---------- pricing */
.lp-pricing{padding-top:72px}
.lp-pricing h2{font-size:var(--fs-3xl)}
.lp-model{font-size:var(--fs-l)}
.lp-price-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;align-items:start}
.lp-price-main{grid-column:1 / span 7;min-width:0}
.lp-packs{grid-column:8 / span 5}
.lp-ptbl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel)}
.lp-ptbl caption{text-align:left;font-size:var(--fs-s);font-weight:650;color:var(--ink2);padding:0 0 8px}
.lp-ptbl tbody th{font-weight:500;color:var(--ink);white-space:normal;height:44px;text-transform:none;letter-spacing:0;font-size:var(--fs-m)}
.lp-ptbl td.hero{font-size:var(--fs-xl);font-weight:700;color:var(--ink)}
.lp-ptbl td{font-size:var(--fs-m)}
.p-sub{display:none}
.lp-rule{margin-top:12px;font-size:var(--fs-s);color:var(--mute);max-width:70ch;display:grid;gap:8px}
.lp-rule b{color:var(--ink);font-weight:650}
.lp-rule-ex{color:var(--ink2)}

.lp-packs h3{font-size:var(--fs-l);font-weight:650;margin-bottom:6px}
.lp-pack-list li{display:flex;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.lp-pack-list b{min-width:52px;font-size:var(--fs-2xl);font-weight:700;color:var(--ink)}
.lp-pack-list span{color:var(--ink2)}
.lp-grant{margin-top:14px;color:var(--ink2)}
.lp-grant b{color:var(--ink);font-weight:700}
.lp-typ{margin-top:4px;font-size:var(--fs-s);color:var(--mute)}
.lp-beta{margin:4px 0 6px;padding:8px 10px;border-radius:var(--r-ctl);font-size:var(--fs-s);color:var(--warn-ink);background:color-mix(in oklch,var(--warn) 14%,var(--panel))}
.lp-beta[hidden]{display:none}
.lp-draft{font-size:var(--fs-s);font-weight:600;color:var(--warn-ink);white-space:nowrap}

.lp-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;max-width:1000px}
.lp-rules li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--line);color:var(--ink2)}
.lp-rules li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:4px;border-left:2px solid var(--good-ink);border-bottom:2px solid var(--good-ink);transform:rotate(-45deg)}
/* a draft rule is not a promise yet: an amber dash, not a check */
.lp-rules li.draft::before{top:20px;width:9px;height:0;border-left:0;border-bottom:2px solid var(--warn-ink);transform:none}

/* ---------- what it is not, faq */
.lp-not-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;max-width:1100px}
.lp-not-list li{padding:10px 0;border-top:1px solid var(--line);color:var(--ink2)}
.lp-not-list b{color:var(--ink);font-weight:650}

.lp-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 48px;max-width:1100px}
.lp-faq > div{padding:14px 0;border-top:1px solid var(--line)}
.lp-faq h3{font-size:var(--fs-m);font-weight:650}
.lp-faq p{margin-top:4px;color:var(--ink2);max-width:62ch}
/* unfilled policy: same dashed amber chip as account.css .todo and legal .ph */
.lp-ph{font-family:var(--mono);font-size:var(--fs-s);color:var(--warn-ink);background:color-mix(in oklch,var(--warn) 14%,var(--panel));border:1px dashed var(--warn);padding:0 4px;border-radius:var(--r-ctl);white-space:normal;overflow-wrap:anywhere}

.lp-faq-sec{padding-bottom:64px}

.lp-foot{border-top:1px solid var(--line);background:var(--panel);font-size:var(--fs-s);color:var(--mute)}
.lp-foot-in{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 40px;padding-block:24px 32px}
.lp-foot-op{display:grid;gap:6px;flex:1 1 320px}
.lp-foot-nav{display:flex;gap:18px}
.lp-foot-nav a{display:inline-block;padding-block:4px;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lp-foot-meta{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.lp-theme{height:26px;padding:0 9px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--panel);color:var(--ink2);font-size:var(--fs-xs)}
.lp-theme:hover{background:var(--hover)}

#pricing:focus,#score:focus{outline:none}
#pricing,#score{scroll-margin-top:calc(var(--headh) + 8px)}

/* ---------- responsive */
@media (max-width:1023px){
  .lp-hero,.lp-price-grid{grid-template-columns:minmax(0,1fr)}
  .lp-hero{padding-block:32px 8px}
  .lp-hero-copy,.lp-ex{grid-column:1 / -1}
  .lp h1{max-width:20ch}
  .lp-price-main,.lp-packs{grid-column:1 / -1}
  .lp-packs{max-width:560px}
}
@media (max-width:759px){
  .lp-btn{height:40px}
  .lp-btn.sm{height:32px}
  .lp-theme{height:32px}
  .lp-nav{gap:14px}
  .lp-wide{display:none}
  .lp-narrow{display:inline}
  .lp-defs,.lp-rules,.lp-faq,.lp-not-list{grid-template-columns:minmax(0,1fr)}
  .lp-sec{padding-top:48px}
  .lp-pricing{padding-top:56px}
}
@media (max-width:639px){
  /* compact example: leverage, $/mo, car (with a details line) */
  .lp-ex:not(.all) .lp-tbl .x{display:none}
  .lp-ex:not(.all) .car-sub .nx{display:inline}
  .lp-ex:not(.all) .lp-tbl .car{min-width:0;padding-block:6px}
  .lp-ex:not(.all) .lp-tbl td{height:auto;padding-block:7px}
  .lp-ex:not(.all) .lp-tbl thead th{height:30px}
  .lp-tbl th,.lp-tbl td{padding-inline:7px}
  .lp-tbl th:first-child,.lp-tbl td:first-child{padding-left:10px}
  .lp-tbl th:last-child,.lp-tbl td:last-child{padding-right:10px}
  .lv{gap:5px} .lv-bar{display:none} .lv-t{width:auto}
  .lp-math{grid-template-columns:minmax(0,1fr)}
  .lp-ex.all .lp-math{position:sticky;left:10px;width:calc(100vw - 2 * clamp(16px,4vw,40px) - 40px)}
  .lp-tbl tr.math td{padding:12px 10px 14px}
  .lp-parts dt{min-width:0}
  .lp-parts div{flex-wrap:wrap;gap:0 10px}
  .lp-ptbl .px{display:none}
  .p-sub{display:block;font-size:var(--fs-xs);color:var(--mute)}
  .lp-ptbl tbody th{font-size:var(--fs-s);padding-block:7px}
  .lp-ptbl thead th{white-space:normal;line-height:1.25}
  .lp-ptbl td.hero{font-size:var(--fs-l)}
  .lp-ex-head{padding:9px 10px}
  .lp-ex-foot{padding:10px}
}
@media (max-width:379px){
  .lp .brand{font-size:15px}
  .lp-nav{gap:10px;font-size:var(--fs-xs)}
  .lp-nav .lp-btn{padding:0 10px}
}
@media (prefers-reduced-motion:no-preference){
  .lp-btn,.lp-link,.lp-theme{transition:background-color .15s cubic-bezier(.25,1,.5,1)}
}