:root{
  --brand:#ee4d2d;--brand2:#0f146d;--ink:#1a1a1a;--muted:#667;
  --bg:#f6f7fb;--card:#fff;--line:#e6e8ef;--good:#0a7d3c;--bad:#c62828;--accent:#ffce3d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--brand2)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* header + nav */
.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;gap:18px;height:58px;overflow-x:auto}
.logo{font-weight:900;font-size:1.15rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.logo span{color:var(--brand)}
.nav nav{display:flex;gap:16px;white-space:nowrap}
.nav nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600}
.nav nav a:hover,.nav nav a.on{color:var(--brand)}

.hero{background:linear-gradient(100deg,var(--brand),#ff7a3d);color:#fff;padding:30px 0}
.hero h1{margin:0 0 8px;font-size:1.6rem}
.hero p{margin:0;opacity:.95}

main{padding:26px 0 50px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 22px;box-shadow:0 1px 3px rgba(20,30,60,.05)}
.tabs{display:flex;gap:8px;margin-bottom:18px}
.tab{flex:1;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-weight:600;color:var(--muted);text-align:center}
.tab.active{border-color:var(--brand);color:var(--brand);background:#fff5f2}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 5px}
input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:1rem;font-family:inherit}
input:focus{outline:none;border-color:var(--brand)}
.hint{font-size:.72rem;color:var(--muted);margin-top:3px}
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:14px;text-align:center}
.stat .v{font-size:1.5rem;font-weight:800}
.stat .k{font-size:.76rem;color:var(--muted);margin-top:2px}
.v.good{color:var(--good)}.v.bad{color:var(--bad)}
.breakdown{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.row{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
details{margin-top:14px}summary{cursor:pointer;font-weight:600;color:var(--brand2)}
.fees{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.note{font-size:.78rem;color:var(--muted);background:#fffbe9;border:1px solid #f2e6b3;border-radius:9px;padding:10px 12px;margin-top:14px}

.cta{background:linear-gradient(100deg,var(--brand2),#2b34c4);color:#fff;border-radius:14px;padding:24px;text-align:center}
.cta h3{margin:0 0 8px}.cta p{margin:0 0 14px;opacity:.92}
.cta form{display:flex;gap:8px;max-width:460px;margin:0 auto}
.cta input{border:none}
.cta button{background:var(--accent);color:#1a1a1a;border:none;border-radius:9px;padding:0 20px;font-weight:800;cursor:pointer}

h2{font-size:1.25rem;margin:28px 0 10px}
.faq dt{font-weight:700;margin-top:14px}.faq dd{margin:4px 0 0;color:#333}

.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.toolcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none;color:var(--ink)}
.toolcard:hover{border-color:var(--brand);box-shadow:0 2px 8px rgba(238,77,45,.08)}
.toolcard b{display:block;margin-bottom:4px}
.toolcard span{font-size:.85rem;color:var(--muted)}

table.cmp{width:100%;border-collapse:collapse;margin-top:12px;font-size:.92rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left}
table.cmp th{background:var(--bg)}
table.cmp tr td:first-child{font-weight:600}

footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:.85rem}
footer a{color:var(--muted)}

@media(max-width:640px){
  .grid,.results,.fees,.toolgrid{grid-template-columns:1fr 1fr}
  .cta form{flex-direction:column}
}