:root { color-scheme:light; --navy:#14314a; --blue:#326da6; --sky:#dcecf7; --orange:#ffbd59; --paper:#f5f7f8; --white:#fff; --muted:#607181; --line:#b7c4cd; font-family:Aptos,"Trebuchet MS",sans-serif; color:var(--navy); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; font-size:1rem; line-height:1.5; }
a { color:inherit; text-underline-offset:4px; }
button,input,select { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.masthead,main,footer { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.masthead { min-height:82px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.brand { color:var(--navy); text-decoration:none; font-size:1.08rem; font-weight:800; }
.brand span { display:inline-grid; place-items:center; width:31px; height:31px; margin-right:10px; border-radius:50%; background:var(--orange); font-size:1.5rem; }
.intro { padding:54px 0 40px; display:grid; grid-template-columns:1.25fr .75fr; gap:54px; align-items:end; }
.intro div>p { margin:0 0 10px; color:var(--blue); font-weight:750; }
h1 { margin:0; font-size:clamp(3rem,7vw,6.1rem); line-height:.92; letter-spacing:-.065em; }
.intro>p { margin:0 0 7px; color:var(--muted); max-width:38ch; font-size:1.08rem; }
.workspace { display:grid; grid-template-columns:minmax(0,.88fr) minmax(390px,1.12fr); border:1px solid var(--navy); background:var(--white); }
.controls { padding:34px; display:grid; gap:21px; border-right:1px solid var(--line); }
fieldset { border:0; padding:0; margin:0; }
legend,.controls>label { display:grid; gap:7px; font-weight:700; }
.segmented { display:grid; grid-template-columns:1fr 1fr; margin-top:8px; border:1px solid var(--line); }
.segmented label { padding:11px; text-align:center; }
.segmented label+label { border-left:1px solid var(--line); }
input[type=radio] { accent-color:var(--blue); }
.method-list { display:grid; gap:8px; margin-top:8px; }
.method-list label { padding:10px 12px; border:1px solid #d4dce2; }
.method-list input { margin-right:8px; }
input[type=number],select { width:100%; min-height:46px; padding:9px 11px; border:1px solid #8799a7; border-radius:0; background:#fff; color:var(--navy); }
.input-affix { display:grid; grid-template-columns:auto 1fr auto; align-items:center; border:1px solid #8799a7; background:#fff; }
.input-affix input { border:0; }
.input-affix b { padding:0 11px; color:var(--muted); }
.primary { min-height:49px; border:0; background:var(--blue); color:#fff; font-weight:800; cursor:pointer; }
.primary:hover { background:#24567f; }
.error { margin:0; color:#aa2034; }
.results { padding:38px 42px; background:var(--navy); color:#fff; }
.result-label { display:flex; justify-content:space-between; color:#bcd0df; }
.result-label small { padding:4px 8px; background:var(--orange); color:var(--navy); font-weight:800; }
.new-pay { display:flex; align-items:baseline; gap:14px; padding:38px 0 28px; border-bottom:1px solid #5a7387; }
.new-pay strong { font-size:clamp(3.6rem,7vw,6.4rem); letter-spacing:-.065em; line-height:.9; }
.new-pay span { color:#bcd0df; }
.delta { padding:22px 0; display:flex; justify-content:space-between; align-items:center; }
.delta span { color:#bcd0df; }
.delta strong { color:var(--orange); font-size:1.6rem; }
.cadence-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#5a7387; }
.cadence-grid div { padding:19px; display:grid; background:#1d405b; }
.cadence-grid .wide { grid-column:1/-1; grid-template-columns:1fr auto; align-items:center; }
.cadence-grid span,.cadence-grid small { color:#bcd0df; }
.cadence-grid strong { font-size:1.5rem; }
.cadence-grid small { grid-column:1/-1; }
.comparison { margin-top:28px; display:grid; grid-template-columns:auto auto 1fr auto auto; align-items:center; gap:10px; color:#bcd0df; }
.comparison b { color:#fff; }
.comparison i { height:1px; background:#5a7387; }
.results>p { margin:25px 0 0; color:#bcd0df; font-size:.87rem; }
.guide { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; padding:62px 0; }
.guide h2 { margin:0; font-size:1.05rem; }
.guide p { margin:9px 0 0; color:var(--muted); font-size:.92rem; }
.evidence { padding:50px; border:1px solid var(--navy); background:var(--white); }
.evidence-heading { display:grid; grid-template-columns:.72fr 1.28fr; gap:34px; align-items:end; padding-bottom:28px; border-bottom:1px solid var(--line); }
.evidence-heading p { margin:0; color:var(--blue); font-weight:750; }
.evidence-heading h2 { margin:0; font-size:clamp(1.8rem,4vw,3.1rem); line-height:1; letter-spacing:-.035em; }
.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:32px; }
.evidence h3 { margin:0 0 14px; font-size:1rem; }
.evidence article>p { color:var(--muted); }
.formula { padding:17px 19px; border-left:5px solid var(--orange); background:var(--sky); color:var(--navy)!important; font-weight:800; }
.worked-example { margin:0; }
.worked-example div { padding:9px 0; }
.source-note { margin:32px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }
.faq { max-width:820px; margin:0 auto; padding:70px 0 54px; }
.faq h2 { margin:0 0 22px; font-size:1.8rem; }
.faq details { border-top:1px solid var(--line); }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { padding:18px 0; font-weight:800; cursor:pointer; }
.faq details p { margin:-5px 0 20px; color:var(--muted); }
.related-tools { display:grid; grid-template-columns:1.1fr 1fr 1fr; border-top:1px solid var(--navy); }
.related-tools>div,.related-tools>a { padding:27px 24px; }
.related-tools>div { padding-left:0; }
.related-tools>a { display:grid; align-content:center; gap:5px; border-left:1px solid var(--line); text-decoration:none; }
.related-tools>a:hover strong { text-decoration:underline; text-underline-offset:4px; }
.related-tools h2,.related-tools p { margin:0; }
.related-tools p,.related-tools span { color:var(--muted); font-size:.84rem; }
footer { min-height:90px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
[hidden] { display:none!important; }
@media(max-width:760px){ .masthead,main,footer{width:calc(100% - 30px)} .intro{grid-template-columns:1fr;gap:22px;padding-top:38px} .workspace{grid-template-columns:1fr} .controls{border-right:0;border-bottom:1px solid var(--line);padding:24px} .results{padding:30px 24px} .guide,.evidence-heading,.evidence-grid,.related-tools{grid-template-columns:1fr}.guide{gap:28px}.evidence{padding:30px 24px}.evidence-heading{gap:10px}.evidence-grid{gap:24px}.faq{padding-block:56px 44px}.related-tools>div,.related-tools>a{padding:21px 0}.related-tools>a{border-left:0;border-top:1px solid var(--line)} footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px} }
@media(max-width:430px){ .segmented{grid-template-columns:1fr} .segmented label+label{border-left:0;border-top:1px solid var(--line)} .new-pay{display:grid;gap:8px}.cadence-grid{grid-template-columns:1fr}.cadence-grid .wide{grid-column:auto;display:grid}.comparison{grid-template-columns:auto 1fr}.comparison i{display:none} }