:root {
  --ink:#0f172a;
  --body:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --bg:#f8fafc;
  --card:#ffffff;
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --brand-soft:#eff6ff;
  --green:#16a34a;
  --green-soft:#f0fdf4;
  --amber:#b45309;
  --amber-soft:#fffbeb;
  --red:#b91c1c;
  --red-soft:#fef2f2;
  --radius:14px;
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.04);
  --shadow-lg:0 2px 6px rgba(15,23,42,.08), 0 12px 32px rgba(15,23,42,.08);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--body); margin:0; padding:0 0 48px;
  line-height:1.65; font-size:16px;
}
.wrap { max-width:760px; margin:0 auto; padding:0 20px; }
.nav {
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:0 20px;
}
.nav-inner { max-width:760px; margin:0 auto; display:flex; align-items:center; gap:18px; height:52px; }
.brand { font-weight:800; font-size:16px; color:var(--ink); text-decoration:none; letter-spacing:-.01em; margin-right:auto; }
.brand .dot { color:var(--brand); }
.nav a.link { color:var(--body); text-decoration:none; font-size:14px; font-weight:500; }
.nav a.link:hover { color:var(--brand); }
.nav a.cta-sm {
  font-size:13px; font-weight:600; color:#fff; background:var(--brand);
  padding:7px 14px; border-radius:9px; text-decoration:none;
}
.nav a.cta-sm:hover { background:var(--brand-dark); }

.hero {
  background:linear-gradient(180deg,#eff6ff 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  padding:48px 0 40px;
}
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; }
.hero h1 { font-size:34px; line-height:1.18; letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; }
.hero p.sub { font-size:17px; color:var(--muted); margin:0 0 20px; }
.trust { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--body); }
.trust span { display:inline-flex; align-items:center; gap:6px; }
.check { color:var(--green); font-weight:800; }

h1 { font-size:28px; margin:0 0 10px; line-height:1.25; letter-spacing:-.02em; color:var(--ink); }
h2 { font-size:20px; margin:32px 0 10px; letter-spacing:-.01em; color:var(--ink); }
h2:first-of-type { margin-top:0; }
p { margin:10px 0; }
a { color:var(--brand); }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
}
.card + .card { margin-top:16px; }
.card h2 { margin-top:0; }

.muted { color:var(--muted); font-size:13.5px; }
.warn {
  margin-top:18px; padding:12px 14px; border-radius:10px;
  background:var(--amber-soft); border:1px solid #fde68a;
  font-size:12.5px; color:var(--amber);
}

.cta {
  display:inline-block; margin-top:18px; padding:12px 22px;
  background:var(--brand); color:#fff; border-radius:10px;
  text-decoration:none; font-weight:600; font-size:15px;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
.cta:hover { background:var(--brand-dark); transform:translateY(-1px); }

.pill { display:inline-block; font-size:11px; padding:3px 10px; border-radius:999px; font-weight:600; }
.pill-v { background:var(--green-soft); color:var(--green); }
.pill-p { background:var(--amber-soft); color:var(--amber); }
.pill-d { background:var(--red-soft); color:var(--red); }

table { border-collapse:separate; border-spacing:0; width:100%; font-size:14px; margin:14px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th, td { border-bottom:1px solid var(--line); padding:11px 14px; text-align:left; }
th { background:#f1f5f9; color:var(--ink); font-weight:650; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:0; }
tbody tr:nth-child(even) { background:#fafbfd; }
td b { color:var(--ink); }

.faq { border-left:3px solid var(--brand-soft); padding:2px 0 2px 18px; }
.faq p { margin:14px 0; }
.faq p strong { color:var(--ink); }

.sources { font-size:13.5px; }
.sources ul { padding-left:18px; }
.sources li { margin:6px 0; }
.sources a { word-break:break-all; }

.keybox {
  background:var(--brand-soft); border:1px solid #dbeafe; border-radius:12px;
  padding:16px 18px; font-size:15px;
}
.keybox strong { color:var(--ink); }

.result { display:none; margin-top:20px; }
.result.show { display:block; }
.fee { font-size:32px; font-weight:800; color:var(--brand); margin:6px 0; letter-spacing:-.02em; }
.row { font-size:14px; margin:5px 0; }
.row .muted { font-size:13px; }

label { display:block; font-size:13px; font-weight:650; margin:14px 0 6px; color:var(--ink); }
select, input {
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
select:focus, input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
button {
  margin-top:20px; width:100%; padding:13px; background:var(--brand); color:#fff;
  border:0; border-radius:10px; font-size:15px; font-weight:650; cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}
button:hover { background:var(--brand-dark); }

.foot { margin-top:36px; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.foot a { color:var(--muted); text-decoration:underline; }

@media (max-width:640px) {
  .hero { padding:32px 0 28px; }
  .hero .wrap { grid-template-columns:1fr; gap:24px; }
  .hero h1 { font-size:27px; }
  .nav-inner { gap:12px; }
  .nav a.link { font-size:13px; }
  .wrap { padding:0 16px; }
}