/* A quiet, fixed masthead and consistent purpose-first navigation. */
.hero{background:#fff;color:var(--text);border-radius:0;margin:0 -14px 20px;padding:24px 22px;border-bottom:1px solid var(--line)}
.hero .brand{color:var(--navy);opacity:1;font-size:13px}
.hero h1{font-size:clamp(20px,3vw,25px);font-weight:700;margin:4px 0 6px;letter-spacing:.02em}
.hero p{color:var(--muted);font-size:14px}
.tool-switch{padding:0;border:0;box-shadow:none;background:transparent;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin:10px 0 20px}
.tool-switch button{min-width:0;text-align:left;border:1px solid var(--line);background:#fff;color:var(--text);padding:14px 16px;border-radius:10px;font-weight:600;box-shadow:none;line-height:1.55}
.tool-switch button.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:none}
.tool-switch strong{display:block;font-size:16px;font-weight:700}
.tool-switch small{font-size:13px;font-weight:400;margin-top:4px}
.nav-number{display:block;font-size:12px;letter-spacing:.1em;margin-bottom:3px}
#modePaymentBtn{grid-column:1/-1}
.payment-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.payment-fields>.field:last-child{grid-column:1/-1}
.payment-fields label{display:block;font-weight:700;margin-bottom:6px}
#payLoanRange{width:100%;padding:0;margin:14px 0 0;accent-color:var(--navy);min-height:28px}
.payment-terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.payment-terms button{border:1px solid var(--line);background:#fff;border-radius:6px;min-height:44px;padding:6px 10px;color:var(--text)}
.payment-terms button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
#paymentResultHeading{font-size:16px;font-weight:600}
.payment-amount{font-size:clamp(30px,6vw,46px);font-weight:750;color:var(--red);margin:6px 0 10px;font-variant-numeric:tabular-nums}
.payment-totals{display:flex;gap:32px;border-block:1px solid var(--line);padding:16px 0;margin:20px 0}
.payment-totals dt{font-size:13px;color:var(--muted)}
.payment-totals dd{margin:3px 0 0;font-size:19px;font-weight:650;font-variant-numeric:tabular-nums}
#paymentResultCard [hidden],#paymentInputCard [hidden]{display:none!important}
button:focus-visible,input:focus-visible{outline:3px solid #c29136;outline-offset:3px}
@media(max-width:520px){.hero{padding:20px 16px}.tool-switch{gap:8px}.tool-switch button{padding:12px 10px}.tool-switch strong{font-size:14px}.tool-switch small{font-size:12px}.payment-fields{grid-template-columns:1fr;gap:4px}.payment-totals{gap:20px}.payment-totals dd{font-size:17px}#paymentResultCard .actions{display:grid;grid-template-columns:1fr}#paymentInputCard .help{font-size:13px}}