:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#17324f;background:#f3f7fa;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:300px}
button,input,select{font:inherit}
[hidden]{display:none!important}
a{color:#0a5f99}
.wrap{width:min(1220px,calc(100% - 40px));margin-inline:auto}
.site-header{background:white;border-bottom:1px solid #dae4ec}
.header-row{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.045em;color:#12365f;text-decoration:none}
.brand span{color:#07853d}
.library-link{font-size:13px;font-weight:700;text-decoration:none;color:#1c4166}
.hero{background:#102e51;color:white;padding:29px 0 32px}
.eyebrow,.section-tag{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:800}
.eyebrow{color:#aad0e9}
.hero h1{font-size:clamp(30px,3.6vw,43px);line-height:1.1;letter-spacing:-.045em;margin:8px 0}
.hero p{color:#dce8f3;margin:0;line-height:1.5}
.workspace{display:grid;grid-template-columns:minmax(320px,2fr) minmax(0,3fr);gap:22px;align-items:start;margin:26px 0}
.panel,.explainer{background:white;border:1px solid #dbe6ee;border-radius:9px;box-shadow:0 3px 14px rgba(16,45,80,.045)}
.panel{padding:25px}
.section-tag{color:#087e3a}
h2,h3,p{margin-top:0}
h2{font-size:24px;letter-spacing:-.035em;color:#12365f;margin:6px 0 10px}
h3{font-size:17px;color:#12365f;margin-bottom:10px}
.intro,.field-note{font-size:14px;line-height:1.5;color:#5e7388}
.intro{margin-bottom:25px}
.field{display:block;font-size:13px;font-weight:750;margin:19px 0 8px}
.currency-field{display:flex;align-items:center;height:48px;border:1px solid #b8cad9;border-radius:6px;overflow:hidden}
.currency-field span{height:100%;display:grid;place-items:center;width:40px;background:#f3f7fa;border-right:1px solid #dbe5ed;color:#496883}
.currency-field input{border:0;outline:0;width:100%;height:100%;padding:0 13px}
input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #3b90c0;outline-offset:2px}
fieldset{padding:0;border:0;margin:25px 0 0}
legend{font-size:13px;font-weight:750;margin-bottom:10px}
.age-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.age-grid label{font-size:12px;font-weight:700;color:#365674}
.age-grid select,#compare-age{display:block;width:100%;height:46px;margin-top:7px;border:1px solid #b8cad9;border-radius:6px;background:#fff;color:#17324f;padding:0 11px;font-weight:700}
#compare-age{max-width:180px}
.field-note{margin:18px 0 0}
.error{padding:11px 13px;border:1px solid #dfa9a9;background:#fff3f2;color:#8b2c2c;border-radius:6px;margin:16px 0 0;font-size:13px}
.result-head{display:flex;justify-content:space-between;align-items:start;gap:16px;border-bottom:1px solid #dce7ee;padding-bottom:13px}
.result-head h2{margin-bottom:0}
.age-badge{font-size:12px;font-weight:750;color:#0b7340;background:#e8f6ed;padding:7px 9px;border-radius:999px;white-space:nowrap}
.empty{margin:21px 0 4px;border:1px dashed #cddce8;border-radius:8px;background:#f8fbfd;padding:22px;color:#335775}
.empty p{margin:7px 0 0;font-size:14px;color:#627a8d;line-height:1.5}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:19px 0}
.summary-card{border:1px solid #dbe5ec;border-top:3px solid var(--option-color);border-radius:6px;padding:13px;min-width:0}
.summary-card span{font-size:12px;font-weight:750;color:#476681}
.summary-card strong{display:block;color:#12365f;font-size:21px;letter-spacing:-.03em;margin:5px 0}
.summary-card small{font-size:12px;color:#627a8d;line-height:1.5;display:block}
.summary-card b{color:#087a39}
.takeaway{background:#eaf6ee;border-left:4px solid #118d49;padding:13px 15px;border-radius:4px;font-size:14px;line-height:1.5;margin:0 0 23px}
.chart-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.chart-heading h3{margin:0}
.chart-heading span{font-size:12px;color:#73879a}
.chart{width:100%;height:205px;margin:10px 0 3px}
.chart svg{display:block;width:100%;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:12px;color:#52708b;margin-bottom:24px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #e1e9f0;padding-top:20px}
.breakeven-row{padding:9px 0;border-bottom:1px solid #e7edf2;font-size:13px;line-height:1.4}
.breakeven-row strong{display:block;color:#12365f}
.breakeven-row span{color:#61798c}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}
th,td{padding:7px 5px;border-bottom:1px solid #e3ebf1;text-align:right}
th:first-child,td:first-child{text-align:left}
thead{color:#456582;background:#f3f7fa}
.explainer{padding:21px 25px;margin-bottom:26px}
.explainer h2{font-size:20px}
.explainer p{font-size:14px;line-height:1.6;color:#516b81;margin:0 0 10px}
.explainer p:last-child{margin-bottom:0}
footer{background:#102e51;color:#d7e5f0;padding:22px 0;font-size:13px}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.panel{padding:18px}.summary-grid{grid-template-columns:1fr}.summary-card{display:grid;grid-template-columns:1fr auto;align-items:center}.summary-card span{grid-column:1}.summary-card strong{grid-column:2;grid-row:1/3;margin:0}.summary-card small{grid-column:1}.detail-grid{grid-template-columns:1fr}.hero{padding:23px 0}.hero h1{font-size:29px}.result-head{flex-wrap:wrap}.age-grid{gap:7px}.age-grid select{padding:0 5px}}