:root{
  --paper:#F2F4F3;
  --surface:#FFFFFF;
  --surface-2:#F8FAF9;
  --ink:#141A19;
  --ink-2:#3D4B48;
  --muted:#66756F;
  --faint:#93A09A;
  --line:#DCE3E0;
  --line-strong:#C3CECA;
  --accent:#15594E;
  --accent-soft:#E4EFEB;
  --accent-ink:#0C3A32;
  --cost:#A8541F;
  --cost-soft:#F7EBE1;
  --credit:#15594E;
  --critical:#9B2C2C;
  --critical-soft:#F8EAEA;
  --shadow:0 1px 2px rgba(20,26,25,.05), 0 8px 24px -12px rgba(20,26,25,.18);
  --radius:10px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1312;
    --surface:#161D1B;
    --surface-2:#1C2523;
    --ink:#E7EDEA;
    --ink-2:#B6C4BF;
    --muted:#8A9A94;
    --faint:#65756F;
    --line:#27322F;
    --line-strong:#38453F;
    --accent:#4FB3A0;
    --accent-soft:#15302B;
    --accent-ink:#8FD6C6;
    --cost:#D98A4E;
    --cost-soft:#2E2115;
    --credit:#4FB3A0;
    --critical:#E08585;
    --critical-soft:#2E1A1A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1312; --surface:#161D1B; --surface-2:#1C2523;
  --ink:#E7EDEA; --ink-2:#B6C4BF; --muted:#8A9A94; --faint:#65756F;
  --line:#27322F; --line-strong:#38453F;
  --accent:#4FB3A0; --accent-soft:#15302B; --accent-ink:#8FD6C6;
  --cost:#D98A4E; --cost-soft:#2E2115; --credit:#4FB3A0;
  --critical:#E08585; --critical-soft:#2E1A1A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px; margin:0 auto; padding-inline:20px; padding-block:0 64px}

/* ---------- masthead ---------- */
.mast{
  border-bottom:1px solid var(--line);
  background:var(--surface);
  margin-inline:-20px; padding-inline:20px;
}
.mast-in{max-width:1140px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px}
.brand{display:flex; flex-direction:column; gap:1px; margin-right:auto}
.brand b{font-size:15px; font-weight:600; letter-spacing:-.01em}
.brand span{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-weight:500}
.stamp{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:7px; white-space:nowrap;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.dot.stale{background:var(--cost)}
.ghost{
  font:500 12px/1 var(--sans); color:var(--muted); background:none;
  border:1px solid var(--line-strong); border-radius:6px; padding:7px 11px; cursor:pointer;
}
.ghost:hover{color:var(--ink); border-color:var(--muted)}

/* ---------- lede ---------- */
.lede{padding-block:34px 26px; max-width:62ch}
.lede h1{
  font:600 clamp(26px,3.6vw,36px)/1.12 var(--serif); margin:0 0 10px;
  letter-spacing:-.015em; text-wrap:balance;
}
.lede p{margin:0; color:var(--ink-2); font-size:15.5px; max-width:58ch}
.samplebar{
  display:flex; gap:10px; align-items:flex-start; margin-top:18px;
  background:var(--cost-soft); border:1px solid color-mix(in srgb, var(--cost) 30%, transparent);
  border-radius:8px; padding:11px 13px; font-size:13px; color:var(--ink-2); max-width:62ch;
}
.samplebar b{color:var(--cost); font-weight:600}

/* ---------- layout ---------- */
.desk{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:22px; align-items:start}
@media (max-width:900px){ .desk{grid-template-columns:minmax(0,1fr)} }

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.panel-h{
  display:flex; align-items:baseline; gap:10px; padding:14px 18px 12px;
  border-bottom:1px solid var(--line);
}
.panel-h h2{font:600 12px/1 var(--sans); text-transform:uppercase; letter-spacing:.1em; margin:0; color:var(--muted)}
.panel-h .hint{font-size:11.5px; color:var(--faint); margin-left:auto; font-family:var(--mono)}
.panel-b{padding:18px}

/* ---------- form ---------- */
.seg{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--surface-2)}
.seg button{
  flex:1; border:0; background:none; padding:9px 6px; cursor:pointer;
  font:500 13px/1.3 var(--sans); color:var(--muted); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0;
}
.seg button:last-child{border-right:0}
.seg button em{font:500 11px/1 var(--mono); font-style:normal; color:var(--faint)}
.seg button[aria-pressed="true"]{background:var(--accent); color:#fff}
.seg button[aria-pressed="true"] em{color:rgba(255,255,255,.82)}
.seg button:disabled{opacity:.42; cursor:not-allowed}

.fields{display:grid; gap:15px; margin-top:17px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
@media (max-width:440px){ .row2{grid-template-columns:1fr} }
label.f{display:flex; flex-direction:column; gap:5px; min-width:0}
label.f > span{font:500 11.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.075em; color:var(--muted)}
.fhint{font:400 11.5px/1.4 var(--sans); color:var(--faint)}
.fhint.err{color:var(--cost)}
#fRefCode{font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
#fRefCode[aria-invalid="true"]{border-color:var(--cost)}
.inp{
  font:500 15px/1 var(--mono); font-variant-numeric:tabular-nums;
  padding:10px 11px; border:1px solid var(--line-strong); border-radius:7px;
  background:var(--surface-2); color:var(--ink); width:100%; min-width:0;
}
select.inp{font-family:var(--sans); font-weight:500; font-size:14px; padding:9px 10px}
.inp:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.money{position:relative}
.money .inp{padding-left:23px}
.money::before{
  content:"$"; position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font:500 14px/1 var(--mono); color:var(--faint); pointer-events:none;
}
/* Same idea as the dollar prefix, on the other side. */
.pct{position:relative}
.pct .inp{padding-right:26px; font-family:var(--mono)}
.pct::after{
  content:"%"; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:500 14px/1 var(--mono); color:var(--faint); pointer-events:none;
}

.chk{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--accent);flex:none}

.derived{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; padding-top:15px;
  border-top:1px dashed var(--line-strong);
}
.derived div{display:flex; flex-direction:column; gap:2px}
.derived dt{font:500 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.derived dd{margin:0; font:500 16px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink)}

/* ---------- quote ---------- */
.results{display:flex; flex-direction:column; gap:14px}
.rcard .panel-h h2{color:var(--accent); font-size:12px; font-weight:600}
.headline{padding:17px 20px 15px; border-bottom:1px solid var(--line)}
.bigrate{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.bigrate b{font:600 clamp(38px,6.2vw,48px)/1 var(--mono); letter-spacing:-.03em}
.bigrate i{font:500 21px/1 var(--mono); font-style:normal; color:var(--muted)}
.apr{margin-top:9px; font:400 13px/1.45 var(--sans); color:var(--muted)}
.apr b{font-family:var(--mono); color:var(--ink-2); font-weight:500}

.paybox{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.paybox > div{padding:15px 20px}
.paybox > div + div{border-left:1px solid var(--line)}
.paybox dt{font:500 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.paybox dd{margin:6px 0 0; font:500 21px/1 var(--mono); font-variant-numeric:tabular-nums}
.paybox small{display:block; margin-top:5px; font-size:11.5px; color:var(--muted); line-height:1.35}

/* benchmark comparison */
.bench{margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pill{
  display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:999px;
  font:500 12px/1.35 var(--sans); border:1px solid transparent;
}
.pill b{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}
.pill.under{background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.pill.over{background:var(--cost-soft); color:var(--cost); border-color:color-mix(in srgb,var(--cost) 32%,transparent)}
.pill.level{background:var(--surface-2); color:var(--muted); border-color:var(--line)}
/* The price of the rate beside it. Deliberately the loudest pill in the row. */
.pill.cost{background:var(--cost-soft); color:var(--cost); font-weight:600;
  border-color:color-mix(in srgb,var(--cost) 46%,transparent)}
.benchsrc{font-size:11px; color:var(--faint)}
.benchsrc a{color:var(--faint); text-decoration:underline; text-underline-offset:2px}
.benchsrc a:hover{color:var(--muted)}
.paybox .bench{margin-top:6px}

/* info popover */
.info{position:relative; display:inline-flex; vertical-align:middle}
.infobtn{
  width:16px; height:16px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--surface-2); color:var(--muted); cursor:pointer; padding:0;
  font:600 10px/1 var(--serif); font-style:italic;
  display:flex; align-items:center; justify-content:center;
}
.infobtn:hover{border-color:var(--accent); color:var(--accent)}
.infopop{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:min(360px, 82vw); background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line-strong); border-radius:9px; padding:11px 13px;
  font:400 12px/1.55 var(--sans); box-shadow:var(--shadow); z-index:20;
  opacity:0; visibility:hidden; pointer-events:none; text-align:left;
}
.info:hover .infopop, .info[data-open] .infopop, .info:focus-within .infopop{
  opacity:1; visibility:visible; pointer-events:auto;
}
@media (max-width:560px){
  .infopop{left:auto; right:-6px; transform:none; width:min(268px, 80vw)}
}
label.f > span em.opt{
  font-style:normal; text-transform:none; letter-spacing:0;
  color:var(--faint); font-weight:400; font-size:11px; margin-left:5px;
}

.ratenote{
  margin:0; padding:11px 20px 14px; font-size:11.5px; line-height:1.5;
  color:var(--muted); border-top:1px solid var(--line);
}

/* what happens next */
.prefrow{display:flex; align-items:center; gap:13px; margin-top:15px; flex-wrap:wrap}
.preflab{font:500 11.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.075em; color:var(--muted)}
.seg.segsm{flex:0 0 auto; width:184px}
.seg.segsm button{padding:8px 10px; font-size:13px}
.chk.consent{align-items:flex-start; margin-top:15px; font-size:12px; line-height:1.5; color:var(--muted)}
.chk.consent input{margin-top:1px}
.done{
  border:1px solid var(--accent); background:var(--accent-soft); border-radius:9px;
  padding:16px 17px; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
}
.privacy{
  margin:11px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted);
  padding-left:11px; border-left:2px solid var(--accent);
}
.applyblock{
  margin-top:18px; padding-top:17px; border-top:1px solid var(--line);
}
.applylead{margin:0 0 12px; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:56ch}
.applybtn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font:600 15px/1 var(--sans); background:var(--accent); color:#fff;
  padding:15px 22px; border-radius:9px; border:1px solid var(--accent);
}
.applybtn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.applybtn .applyarrow{font-size:17px; color:#fff}
.applyfine{margin:9px 0 0; font-size:11.5px; color:var(--faint)}
.done b{font:600 15px/1.3 var(--sans); color:var(--accent-ink)}
.done p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5; max-width:56ch}
#whFrame{display:none}
.nexth{font:600 16px/1.3 var(--sans); margin:0 0 7px; letter-spacing:-.01em}
.nextfine a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.nextfine a:hover{color:var(--accent)}
.next .panel-b{padding:16px 18px 18px}
.nextlead{margin:0 0 14px; font-size:13.5px; color:var(--ink-2); max-width:52ch; line-height:1.5}
.nextbtns{display:flex; gap:9px; flex-wrap:wrap}
.btn2{
  flex:1 1 150px; text-align:center; text-decoration:none; box-sizing:border-box;
  font:600 14px/1 var(--sans); background:var(--accent); color:#fff;
  padding:13px 16px; border-radius:8px; border:1px solid var(--accent);
}
.btn2:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn2 + .btn2{background:none; color:var(--accent); border-color:var(--line-strong)}
.btn2 + .btn2:hover{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent)}
.nextfine{margin:13px 0 0; font-size:11.5px; color:var(--faint); line-height:1.5}


/* compare strip */
.compare{margin-top:18px}
.compare-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px; background:var(--line)}
.cmp{background:var(--surface); padding:13px 14px}
.cmp dt{font:500 10.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.cmp dd{margin:7px 0 0; font:600 19px/1 var(--mono); font-variant-numeric:tabular-nums}
.cmp small{display:block; margin-top:4px; font-size:11.5px; color:var(--muted); font-family:var(--mono)}
.cmp.out dd{color:var(--faint); font-size:14px; font-weight:500}

/* borrower profile, inside the info popover */
.popstat{margin-top:11px; padding-top:10px; border-top:1px solid var(--line)}
.popstat-h{
  font:500 10px/1 var(--sans); text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); margin-bottom:7px;
}
.popstat table{width:100%; border-collapse:collapse; font-size:11.5px}
.popstat td{padding:3px 0; color:var(--muted)}
.popstat td:nth-child(2), .popstat td:nth-child(3){
  text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; padding-left:9px;
}
.popstat td:nth-child(3){color:var(--accent); font-weight:600}
.popstat thead td{color:var(--faint); font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:.06em}
.popsrc{margin-top:8px; font-size:10.5px; color:var(--faint); line-height:1.45}
.popsrc a{color:var(--faint); text-decoration:underline; text-underline-offset:2px}

/* disclosure */
.disc{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.6; color:var(--muted); max-width:88ch;
}
.disc p{margin:0 0 9px}
.disc b{color:var(--ink-2); font-weight:600}

/* ---------- admin ---------- */
.admin{display:none}
body[data-view="admin"] .admin{display:block}
body[data-view="admin"] .client{display:none}
.atabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap}
.atabs button{
  border:0; background:none; padding:11px 14px; cursor:pointer; color:var(--muted);
  font:500 13px/1 var(--sans); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.atabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.apane{display:none} .apane.on{display:block}
.ahelp{font-size:13px; color:var(--muted); max-width:64ch; margin:0 0 14px; line-height:1.55}
textarea.inp{
  font-family:var(--mono); font-size:12.5px; line-height:1.65; min-height:230px;
  resize:vertical; white-space:pre; overflow-wrap:normal; overflow-x:auto;
}
.abar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px}
.btn{
  font:600 13.5px/1 var(--sans); background:var(--accent); color:#fff; border:0;
  padding:11px 17px; border-radius:7px; cursor:pointer;
}
.btn:hover{background:var(--accent-ink)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn.sec{background:none; color:var(--ink-2); border:1px solid var(--line-strong)}
.btn.sec:hover{background:var(--surface-2); color:var(--ink)}
.note{font-size:12.5px; color:var(--muted)}
.note.err{color:var(--critical)}
.note.ok{color:var(--accent)}
.gridtable{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums}
.gridtable th,.gridtable td{border:1px solid var(--line); padding:5px 7px; text-align:right; white-space:nowrap}
.gridtable th{background:var(--surface-2); color:var(--muted); font-weight:500}
.gridtable th:first-child,.gridtable td:first-child{text-align:left}
.scrollx{overflow-x:auto; border-radius:8px}
.stacklist{font-family:var(--mono); font-size:12.5px; columns:200px; column-gap:22px; font-variant-numeric:tabular-nums}
.stacklist div{display:flex; justify-content:space-between; padding:2px 0; break-inside:avoid; color:var(--ink-2)}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }
/* ==========================================================
   Centered layout pass
   ========================================================== */

.wrap{max-width:1340px}

/* masthead sits outside the wrapper, so it spans the whole window */
.mast{margin-inline:0; padding-inline:20px}
.mast-in{
  max-width:1300px; flex-direction:column; align-items:center;
  gap:9px; padding-block:22px 19px; text-align:center;
}
.logo{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--accent)}
.logomark{flex:none; display:block}
.wordmark{font:600 22px/1 var(--sans); letter-spacing:-.022em; color:var(--ink)}
.powered{
  margin:0; font:500 11px/1 var(--sans); text-transform:uppercase;
  letter-spacing:.14em; color:var(--muted);
}

/* hero */
.lede{max-width:none; text-align:center; padding-block:42px 26px}
.lede h1{font-size:clamp(30px,4vw,42px)}
.lede p{max-width:66ch; margin-inline:auto}
.samplebar{max-width:64ch; margin-inline:auto; justify-content:center; text-align:center}

/* The form is wide and short, the answers sit beneath it. Stacking them this
   way uses the full width and leaves no column stranded shorter than its
   neighbour, which is what made the old two-column split look ragged. */
.desk{display:block}
.fields{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:15px}
@media (max-width:1000px){ .fields{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:600px){ .fields{grid-template-columns:1fr} }
.fields .row2{display:contents}
/* The reference code is the last of the fields and simply follows them, so it
   sits beside its neighbours rather than being pushed into a far corner with a
   gap in front of it. The full width checkboxes come after, otherwise they
   break the row and strand it on a line of its own. */
#refCodeWrap{order:99}
.fields .chk{grid-column:1 / -1; order:100}

.results{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin-top:14px; align-items:stretch;
}
.rcard{display:flex; flex-direction:column}
.rcard .ratenote{margin-top:auto}

/* Discount points: the last line on the card, set smaller than the note above
   it. Only the two figures are emphasised, which is what keeps the amount
   findable at this size. This is as small as it goes. */
.pointsnote{
  margin:0; padding:0 20px 14px; font-size:10.5px; line-height:1.55;
  color:var(--muted);
}
.pointsnote b{font-weight:600; color:var(--ink-2)}

/* Sits above both cards. Used when a credit band needs a person rather than a
   different number, so it reads as a route forward and not as a rejection. */
#adviceBox{grid-column:1 / -1; order:-1}
.advice{
  display:flex; flex-direction:column; gap:7px;
  padding:16px 20px 17px; text-align:center;
  background:var(--accent-soft); border-color:var(--accent);
}
.advice b{font:600 14px/1.4 var(--sans); color:var(--accent-ink)}
.advice p{margin:0; font-size:13.5px; line-height:1.55; color:var(--accent-ink); max-width:62ch; align-self:center}
.results:has(#cardB[hidden]) #cardA{grid-column:1 / -1}
@media (max-width:860px){ .results{grid-template-columns:1fr} }

/* panel headers: title centered, hint underneath rather than floated right */
.panel-h{flex-direction:column; align-items:center; gap:5px; padding:15px 18px 13px}
.panel-h .hint{margin-left:0}
.derived{justify-content:center}
.derived div{align-items:center}

/* result cards */
.rcard .headline{text-align:center}
.bigrate{justify-content:center}
.bench{justify-content:center}
.apr{max-width:54ch; margin-inline:auto}
.paybox{text-align:center}
.ratenote{text-align:center; max-width:62ch; margin-inline:auto}
.pointsnote{text-align:center}

.cmp{text-align:center}

/* contact block */
.next .panel-b{text-align:center}
.nextlead{margin-inline:auto}
#leadForm{max-width:580px; margin-inline:auto; text-align:left}
.prefrow{justify-content:center}
#leadForm .abar{justify-content:center}
.privacy{
  border-left:0; padding-left:0; text-align:center;
  max-width:56ch; margin-inline:auto;
  padding-top:12px; border-top:1px solid var(--line);
}
.done{align-items:center; text-align:center; max-width:580px; margin-inline:auto}
.applyblock{text-align:center}
.applylead{margin-inline:auto}
.applyfine{text-align:center}
.nextfine{text-align:center; max-width:66ch; margin-inline:auto}

/* The disclosures are read rather than scanned, and centred legal paragraphs
   are markedly harder to follow. Centre the column, range the text left. */
.disc{margin-inline:auto; max-width:82ch}

/* ==========================================================
   Wordmark and display type
   ========================================================== */
:root{ --display:"Outfit","IBM Plex Sans",system-ui,-apple-system,sans-serif; }

.logo{gap:15px}
.logomark{width:54px; height:54px}
.wordmark{
  font:700 clamp(28px,3.4vw,38px)/1 var(--display);
  letter-spacing:-.038em; color:var(--ink);
}
.wordmark em{font-style:normal; color:var(--accent)}
.powered{font-size:11.5px; letter-spacing:.16em}
.mast-in{gap:11px; padding-block:26px 21px}

.lede h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(32px,4.4vw,50px); letter-spacing:-.035em; line-height:1.04;
}
.nexth{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em}

@media (max-width:520px){
  .logo{gap:11px}
  .logomark{width:42px; height:42px}
}

/* ==========================================================
   Calculate gate: answers stay hidden until asked for
   ========================================================== */
.calcwrap{
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line); text-align:center;
}
.calcbtn{
  font:700 17px/1 var(--display); letter-spacing:-.01em;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:10px; padding:17px 52px; cursor:pointer;
}
.calcbtn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.calcbtn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.calcfine{margin:11px 0 0; font-size:11.5px; color:var(--faint)}

body.pre-calc .results,
body.pre-calc #compareWrap{display:none}

/* The primary action on the page. Sized so it cannot be walked past. */
.calcwrap{margin-top:24px; padding-top:24px; padding-bottom:6px}
.calcbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:13px;
  font:700 clamp(19px,2.1vw,23px)/1 var(--display); letter-spacing:-.015em;
  padding:24px 72px; border-radius:14px; min-width:min(380px, 100%);
  box-shadow:0 2px 4px rgba(21,89,78,.16), 0 14px 30px -10px rgba(21,89,78,.48);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.calcbtn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 9px rgba(21,89,78,.2), 0 20px 38px -12px rgba(21,89,78,.55);
}
.calcbtn:active{transform:translateY(0)}
.calcbtn .arw{font-size:.85em; opacity:.85}
.calcfine{margin-top:14px; font-size:12px}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .calcbtn{
    box-shadow:0 2px 4px rgba(0,0,0,.45), 0 16px 32px -12px rgba(79,179,160,.38);
  }
  :root:not([data-theme="light"]) .calcbtn:hover{
    box-shadow:0 4px 9px rgba(0,0,0,.5), 0 22px 40px -14px rgba(79,179,160,.46);
  }
}
@media (max-width:540px){ .calcbtn{width:100%; padding:22px 24px} }
@media (prefers-reduced-motion:reduce){
  .calcbtn{transition:none}
  .calcbtn:hover{transform:none}
}