:root{--navy:#0b1f3a;--navy2:#132d52;--green:#1f7a4d;--gold:#c9a227;--ink:#1b2430;--muted:#5b6675;--bg:#f6f7f9;--line:#e3e6eb}
*{box-sizing:border-box}body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--green)}.wrap{max-width:1040px;margin:0 auto;padding:0 18px}main{padding:24px 18px 48px}
h1,h2,h3{color:var(--navy);line-height:1.25}h1{font-size:1.9rem}h2{margin-top:2rem}
.top{background:var(--navy);position:sticky;top:0;z-index:5}.bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center;color:#fff;text-decoration:none;font-weight:700}.brand img{border-radius:50%}
.menu summary{color:var(--gold);cursor:pointer;list-style:none;font-weight:600;padding:8px}.menu nav{display:flex;flex-direction:column;padding:8px 0}
.menu nav a{color:#fff;text-decoration:none;padding:8px}.menu nav a:hover{color:var(--gold)}
@media(min-width:760px){.menu summary{display:none}.menu nav{flex-direction:row;padding:0}.menu:not([open]) nav{display:flex}}
.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:14px;padding:32px 22px;margin-top:8px}.hero h1{color:#fff;font-size:2rem}
.btn{display:inline-block;background:var(--green);color:#fff;text-decoration:none;padding:11px 18px;border-radius:8px;font-weight:600;margin:4px 6px 4px 0}
.btn.gold{background:var(--gold);color:var(--navy)}.btn.ghost{background:transparent;border:2px solid #fff}.btn.small{padding:6px 12px;font-size:.9rem}.btn.disabled{background:#9aa3ae;cursor:not-allowed}
.grid2,.grid3{display:grid;gap:16px}@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;color:inherit;text-decoration:none;display:block}.card.feature{border-top:4px solid var(--gold)}a.card:hover{border-color:var(--green)}
.ticks{list-style:none;padding:0}.ticks li{padding-left:28px;position:relative;margin:6px 0}.ticks li:before{content:"✓";color:var(--green);font-weight:700;position:absolute;left:4px}
.notice{background:#fff8e1;border-left:5px solid var(--gold);padding:14px 16px;border-radius:8px;margin:18px 0}
.tag{display:inline-block;background:var(--navy);color:var(--gold);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}
.tools{list-style:none;padding:0}.tool{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 0}.tool p{margin:4px 0 8px;color:var(--muted)}
.article{max-width:720px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.lede{font-size:1.1rem;color:var(--muted)}.steps li{margin:10px 0}
table{border-collapse:collapse;width:100%;font-size:.92rem;display:block;overflow-x:auto}th,td{border:1px solid var(--line);padding:8px;text-align:left}th{background:var(--navy);color:#fff}
.cta{background:var(--navy);color:#fff;border-radius:10px;padding:16px;margin-top:20px}.small{font-size:.88rem;color:var(--muted)}.big{font-size:1.25rem;font-weight:600;word-break:break-all}
.foot{background:var(--navy);color:#cfd6e0;font-size:.88rem;padding:24px 0}.foot a{color:var(--gold)}
/* calculators */
.calc{display:grid;gap:18px}@media(min-width:900px){.calc{grid-template-columns:1.05fr .95fr;align-items:start}.calc .outputs{position:sticky;top:76px}}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}.panel h2{margin-top:0;font-size:1.2rem}.panel h3{font-size:1rem;margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}@media(max-width:480px){.fields{grid-template-columns:1fr}}
.field label{display:block;font-size:.88rem;font-weight:600;color:var(--navy);margin-bottom:3px}
.field input,.field select,.mix input{width:100%;padding:9px 10px;border:1px solid #c9ced6;border-radius:8px;font:inherit;background:#fff}.field input:focus,.mix input:focus{outline:2px solid var(--green);border-color:var(--green)}
.tip{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:var(--navy);color:#fff;font-size:.7rem;font-weight:700;cursor:help;position:relative;margin-left:4px;vertical-align:1px}
.tip:hover:after,.tip:focus:after{content:attr(data-tip);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);width:240px;max-width:70vw;background:var(--navy);color:#fff;font-weight:400;font-size:.82rem;line-height:1.4;padding:8px 10px;border-radius:8px;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}.result .k{font-size:.8rem;color:var(--muted);font-weight:600}.result .v{font-size:1.2rem;font-weight:700;color:var(--navy)}
.big-result{grid-column:1/-1;border-width:2px}.big-result .v{font-size:2rem}.big-result.ok{background:#e8f5ee;border-color:var(--green)}.big-result.ok .v{color:var(--green)}.big-result.warn{background:#fff6dc;border-color:#d9a400}.big-result.warn .v{color:#8a6500}.big-result.bad{background:#fdecec;border-color:#c0392b}.big-result.bad .v{color:#c0392b}
.verdict{font-weight:700;font-size:.92rem}.neg{color:#c0392b!important}.num{text-align:right;white-space:nowrap}
.result.wide{grid-column:1/-1}.breakdown{font-size:.9rem}.breakdown td{padding:5px 8px}
.mix{display:table;width:100%}.mix td{padding:5px}.mix th{font-size:.85rem}.btn.ghost-dark{background:#fff;color:var(--navy);border:1px solid var(--line);margin:0}.btn.ghost-dark:hover{border-color:#c0392b;color:#c0392b}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:600}.toggle{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 10px}.toggle label{font-weight:600;font-size:.92rem}
#proforma{display:table;font-size:.88rem}#proforma tr.strong td{font-weight:700;background:#f1f4f8}.dscr-ok{color:var(--green);font-weight:700}.dscr-warn{color:#8a6500;font-weight:700}.dscr-bad{color:#c0392b;font-weight:700}
.calc-cards .card h3{margin-top:0}.lender-link{margin-top:12px;font-size:.92rem}
[hidden]{display:none!important}.mix th:first-child{width:38%}.mix th:nth-child(2){width:14%}.mix th:nth-child(5){width:44px}#add-row{color:#fff}
/* fix: .small utility was greying out small buttons */
.btn.small{color:#fff}.btn.small.gold{color:var(--navy)}.btn.small.ghost-dark{color:var(--navy)}
.mix .u-type{min-width:120px}.mix .u-count{min-width:58px}.mix .u-rent{min-width:84px}