:root { --ink:#172235; --muted:#627086; --brand:#2169e8; --brand-dark:#174da9; --bg:#f6f8fc; --card:#fff; --line:#dce3ee; --good:#07865a; --bad:#c33c4c; --radius:18px; }
* { box-sizing:border-box; } body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); line-height:1.5; }
a { color:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.65rem; background:#fff; }
.site-header { background:#fff; border-bottom:1px solid var(--line); } .header-inner { max-width:1160px; margin:auto; padding:1rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; } .brand { text-decoration:none; font-weight:800; letter-spacing:-.03em; color:var(--brand); } nav ul { padding:0; margin:0; display:flex; gap:.8rem; list-style:none; font-size:.9rem; } nav a { text-decoration:none; color:var(--muted); } nav a[aria-current="page"] { color:var(--ink); font-weight:700; }
main { max-width:1160px; margin:auto; padding:2rem 1rem 4rem; } .hero { padding:2.7rem 0 2rem; max-width:720px; } h1 { font-size:clamp(2rem,8vw,4rem); line-height:1.04; letter-spacing:-.055em; margin:0 0 1rem; } h2 { letter-spacing:-.03em; } .lead { font-size:1.1rem; color:var(--muted); max-width:62ch; }.button { display:inline-block; padding:.8rem 1rem; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; border:0; cursor:pointer; }.button:hover,.button:focus { background:var(--brand-dark); }
.feature-grid,.result-grid { display:grid; gap:1rem; grid-template-columns:1fr; } .card,.result-card,.form-card,details { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem; box-shadow:0 8px 28px rgba(25,44,76,.04); } .card h2,.card h3 { margin-top:0; }.muted { color:var(--muted); }.roadmap { list-style:none; padding:0; margin:0; }.roadmap li { display:flex; justify-content:space-between; padding:.65rem 0; border-bottom:1px solid var(--line); }.roadmap small { color:var(--muted); }
.calculator-layout { display:grid; grid-template-columns:1fr; gap:1rem; }.form-card h2,.results h2 { margin-top:0; }.fields { display:grid; gap:.85rem; }.field { display:grid; gap:.3rem; }.field label { font-size:.9rem; font-weight:650; }.field input,.field select { width:100%; border:1px solid #bbc7d7; border-radius:9px; padding:.7rem; font:inherit; color:var(--ink); background:#fff; }.field input:focus,.field select:focus { outline:3px solid #b8d1ff; border-color:var(--brand); }.field small { color:var(--muted); } fieldset { border:0; padding:0; margin:1.25rem 0 0; } legend { font-weight:800; margin-bottom:.8rem; }.result-card strong { display:block; font-size:1.5rem; letter-spacing:-.04em; }.result-card p { margin:.25rem 0 0; color:var(--muted); font-size:.87rem; }.result-card.primary { background:#ecf5ff; border-color:#bad5ff; }.result-card.primary strong { color:var(--good); font-size:2rem; }.result-card.primary.negative { background:#fff0f1; border-color:#ffc6cc; }.result-card.primary.negative strong { color:var(--bad); }.info-table { width:100%; border-collapse:collapse; font-size:.93rem; }.info-table th,.info-table td { padding:.75rem 0; border-bottom:1px solid var(--line); text-align:left; }.info-table td { text-align:right; font-weight:700; }
.prose { max-width:760px; }.prose p,.prose li { color:#38465a; }.prose li { margin:.5rem 0; } details { margin:.8rem 0; } summary { cursor:pointer; font-weight:700; } details p { color:var(--muted); }.site-footer { padding:2rem 1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }.footer-inner { max-width:1160px; margin:auto; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
@media (min-width:700px) { .feature-grid { grid-template-columns:repeat(3,1fr); }.result-grid { grid-template-columns:repeat(2,1fr); }.fields { grid-template-columns:repeat(2,1fr); }.wide { grid-column:span 2; } nav ul { gap:1.25rem; } }
@media (min-width:980px) { .calculator-layout { grid-template-columns:minmax(400px,.85fr) minmax(420px,1.15fr); align-items:start; }.result-grid { grid-template-columns:repeat(3,1fr); }.results { position:sticky; top:1rem; } }
@media (max-width:699px) { .header-inner { align-items:flex-start; flex-wrap:wrap; }.header-inner nav { width:100%; }.header-inner nav ul { flex-wrap:wrap; gap:.35rem 1rem; }.hero { padding-top:1.5rem; }.roadmap li { gap:.75rem; } }
.form-note { margin:0; font-size:.9rem; }
.form-error { color:#a32737; font-weight:650; margin:.5rem 0 0; }
.form-error:empty { display:none; }
.field [aria-invalid="true"] { border-color:#a32737; background:#fff8f8; }
.result-card { min-width:0; overflow-wrap:anywhere; }
.info-table th,.info-table td { overflow-wrap:anywhere; }
:focus-visible { outline:3px solid #174da9; outline-offset:3px; }