/* Case pages: the home page's calculator layout plus rate buttons, worked numbers and questions. */
:root { --brand: #1f5f46; --brand-ink: #fff; --accent: #e9b949; }
.hero { padding-block: var(--s5) var(--s6); }
.hero .container { grid-template-columns: 1fr; gap: var(--s5); }
.hero-title { max-width: 22ch; font-size: var(--step-3); }
@media (max-width: 759px) { .hero { padding-top: var(--s4); } .hero .promise { margin-bottom: var(--s2); } .inputs { gap: var(--s3); padding: var(--s4); } }
.promise b { font-variant-numeric: tabular-nums; color: var(--brand-text); }
.head-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.presets { display: flex; flex-wrap: wrap; gap: var(--s2); }
.presets button { min-height: 2.75rem; padding: 0.45rem 0.9rem; border-radius: var(--pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 var(--step--1)/1.2 var(--font-body); cursor: pointer; text-align: left; }
.presets button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.split { margin: var(--s3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); font-size: var(--step--1); }
.split li { display: flex; justify-content: space-between; gap: var(--s3); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-top: var(--s2); }
.split b { font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 22%, transparent); overflow: hidden; margin-top: var(--s3); }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); }
.compare-wrap { min-width: 0; }
.h-sm { font-size: var(--step-1); margin-bottom: var(--s3); }
.rtable td { font-variant-numeric: tabular-nums; }
.prose { max-width: var(--narrow); }
.prose > p { margin-top: var(--s3); }
.prose .notice { margin-top: var(--s5); }
.qa { border-top: 1px solid var(--line); padding-block: var(--s4); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { font-size: var(--step-0); margin: 0 0 var(--s2); }
.qa p { margin: 0; color: var(--ink-2); }
.prose h2 + .qa { margin-top: var(--s4); }
.links { margin: var(--s4) 0; padding-left: 1.2em; display: grid; gap: var(--s2); }
.cases { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2) var(--s4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cases a { display: block; padding: var(--s3) 0; border-top: 1px solid var(--line); font-weight: 600; }