.mortgage-page { padding-block: clamp(34px, 6vw, 82px) 55px; }
.mortgage-intro { max-width: 850px; padding-bottom: clamp(25px, 5vw, 50px); }
.mortgage-intro h1 { font-size: clamp(2.45rem, 6.9vw, 6rem); line-height: .99; margin-left: -.045em; }
.mortgage-intro > p:not(.eyebrow) { max-width: 690px; font-size: clamp(1rem, 2vw, 1.18rem); color: var(--muted); margin-top: 21px; }
.mortgage-intro-links, .mortgage-tool-selector, .mortgage-view-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.mortgage-intro-links { margin-top: 22px; }
.mortgage-tool-selector { margin-bottom: 12px; }
.mortgage-tool-selector [aria-pressed=true], .mortgage-view-switch [aria-pressed=true] { border-color: #557966; background: #18372e; color: var(--mint); }
.mortgage-workspace { display: grid; grid-template-columns: minmax(275px, .83fr) minmax(0, 1.17fr); gap: 15px; align-items: start; }
.mortgage-inputs h2, .mortgage-result-heading { font-size: clamp(1.3rem, 3vw, 2.15rem); }
#mortgage-fields { display: grid; gap: 13px; margin-block: 20px 11px; }
.mortgage-field { display: grid; gap: 4px; }
.mortgage-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.25rem, .85fr); gap: 9px; align-items: center; }
.mortgage-field-row label { font-size: .83rem; }
.mortgage-field-row input[type=number] { text-align: right; font-variant-numeric: tabular-nums; }
.mortgage-field select { max-width: 100%; }
.mortgage-field input[type=range] { min-height: 23px; padding: 0; accent-color: var(--mint); background: transparent; border: 0; }
.mortgage-field small { color: var(--muted); font-size: .72rem; }
.mortgage-field [aria-invalid=true] { border-color: #f6a594; }
#mortgage-validation { color: #f6a594; font-size: .82rem; margin-bottom: 12px; }
#mortgage-validation:empty, .mortgage-verdict:empty, .mortgage-save-status:empty { display: none; }
.mortgage-results .mortgage-result-value { font-size: clamp(2.35rem, 6.2vw, 4rem); line-height: 1.05; letter-spacing: -.058em; color: var(--mint); font-weight: 720; font-variant-numeric: tabular-nums; }
.mortgage-results .mortgage-verdict { color: var(--ink); margin-top: 11px; font-size: .9rem; }
.mortgage-view-switch { padding-block: 14px 8px; }
.mortgage-view-switch .button { min-height: 34px; }
.mortgage-chart { border: 1px solid var(--line); background: #0d1724; border-radius: 9px; min-height: 180px; padding: 10px; display: grid; align-content: center; }
.mortgage-chart svg { display: block; width: 100%; height: auto; max-height: 305px; }
.mortgage-chart .mortgage-donut { max-height: 212px; }
.mortgage-chart svg text { font: 13px 'Segoe UI', system-ui, sans-serif; fill: #b8c6d7; }
.mortgage-chart .chart-center { font-size: 16px; fill: var(--ink); font-weight: 700; }
.mortgage-chart .chart-grid { stroke: #35465c; }
.mortgage-chart .chart-zero { stroke: #8290a2; }
.mortgage-chart-legend { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 7px 0 0; gap: 5px 12px; font-size: .72rem; color: var(--muted); }
.mortgage-chart-legend li { display: inline-flex; align-items: center; gap: 5px; }
.mortgage-chart-legend svg { width: 10px; height: 10px; flex-shrink: 0; }
.mortgage-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 16px 0 0; }
.mortgage-metrics > div { padding: 7px 0; border-bottom: 1px solid var(--line); }
.mortgage-metrics dt { color: var(--muted); font-size: .75rem; }
.mortgage-metrics dd { color: var(--ink); font-weight: 660; font-size: 1rem; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mortgage-scenarios { margin-block: 18px; }
.mortgage-save-form { display: grid; grid-template-columns: minmax(0, 280px) auto; gap: 8px; align-items: end; justify-content: start; }
.mortgage-saved { margin-top: 12px; }
.mortgage-saved-row { display: flex; gap: 7px; align-items: center; border-top: 1px solid var(--line); padding-block: 7px; flex-wrap: wrap; }
.mortgage-saved-row label { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.mortgage-saved-row input { width: 17px; min-height: 17px; accent-color: var(--mint); }
.mortgage-saved-row small { color: var(--muted); }
.mortgage-save-status { color: var(--mint) !important; }
.mortgage-comparison table { text-align: right; }
.mortgage-comparison th, .mortgage-comparison td { white-space: normal; }
.mortgage-comparison th:not(:first-child), .mortgage-comparison td { min-width: 105px; }
.mortgage-comparison .metric-best { color: var(--mint); background: #142a26; }
.mortgage-comparison .metric-best small { display: block; font-size: .65rem; }
.mortgage-comparison .fine-print { margin-bottom: 10px; }
.mortgage-sources { padding: 18px 0 0; }
.mortgage-sources h2 { font-size: 1.7rem; }
.mortgage-sources p { color: var(--muted); max-width: 740px; margin-top: 10px; }
.mortgage-sources ul { display: flex; flex-wrap: wrap; list-style: none; gap: 9px 20px; margin: 14px 0 0; padding: 0; }
.mortgage-sources a { font-size: .85rem; color: var(--mint); text-decoration: underline; text-underline-offset: 4px; }
@media(max-width: 760px) {
  .mortgage-workspace { grid-template-columns: minmax(0, 1fr); }
  .mortgage-tool-selector .button { flex: 1 1 125px; }
}
@media(max-width: 420px) {
  .mortgage-save-form { grid-template-columns: minmax(0, 1fr); }
  .mortgage-chart { padding: 5px; }
}

.mortgage-specialists { margin-bottom: 1rem; }
.mortgage-specialists h2 { margin: .25rem 0; }
.mortgage-rate-field { grid-template-columns:minmax(0,1fr) auto; }
.mortgage-rate-field .mortgage-field-row { grid-column:1/-1; }
.mortgage-rate-field .mortgage-field-row input { text-align:right; font-variant-numeric:tabular-nums; }
.mortgage-rate-nudges { display:flex; gap:.2rem; }
.rate-nudge { padding:.05rem .42rem; border:1px solid var(--line); border-radius:.3rem; background:#162232; color:var(--ink); font-weight:750; }
#brand-active-tool { color:var(--mint); text-decoration:underline; }
.mortgage-inputs { container-type:inline-size; min-width:0; }
.mortgage-field-row :is(input[type="number"], input[type="text"]) { padding-inline:.6rem; }
.mortgage-donut-track { stroke:var(--line); }
.mortgage-jump.button { display:none; }
@container (max-width:310px) {
  .mortgage-field-row { grid-template-columns:minmax(0,1fr); gap:.15rem; }
  .mortgage-field-row :is(input[type="number"],input[type="text"]) { text-align:left; }
}
@media (max-width:760px) {
  .mortgage-jump.button { display:flex; width:100%; justify-content:space-between; gap:.55rem; margin-bottom:.75rem; }
  .mortgage-jump strong { margin-left:auto; font-variant-numeric:tabular-nums; }
}