:root {
  --royal-blue: #003DA5;
  --royal-blue-dark: #001E60;
  --red: #C8102E;
  --peerless-white: #F7F8FA;
  --black: #090A0F;
  --ink: #202331;
  --muted: #626B7A;
  --line: #DDE2EA;
  --success: #127A3A;
  --warning: #A86200;
  --danger: #B00020;
  --card: #FFFFFF;
  --shadow: 0 18px 45px rgba(0, 30, 96, 0.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--peerless-white);
  line-height: 1.55;
}
a { color: var(--royal-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--black); color:white; padding:8px; z-index:100; }
.skip-link:focus { left:8px; }
.site-header { background: var(--black); color: white; position: sticky; top: 0; z-index: 50; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.nav { min-height: 72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; color:white; font-size: 1.06rem; }
.brand:hover { text-decoration:none; }
.brand em { font-style:normal; color:#DDE7FF; }
.brand-mark { display:inline-grid; place-items:center; width:46px; height:46px; border:2px solid white; border-radius:14px; background:linear-gradient(135deg, var(--royal-blue), var(--red)); color:white; font-weight:900; letter-spacing:-.06em; }
.nav-menu { display:flex; gap:20px; align-items:center; }
.nav-menu a { color:white; font-weight:700; font-size:.95rem; }
.nav-toggle { display:none; }
.hero { background: radial-gradient(circle at 80% 10%, rgba(200,16,46,.28), transparent 32%), linear-gradient(135deg, var(--royal-blue-dark), var(--royal-blue)); color:white; padding: 86px 0; }
.hero-grid { display:grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items:center; }
.eyebrow { margin:0 0 10px; text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:900; color:var(--red); }
.hero .eyebrow { color:#FFCDD6; }
h1, h2, h3 { line-height:1.1; color:var(--black); margin: 0 0 14px; }
.hero h1 { color:white; font-size: clamp(2.45rem, 5vw, 4.7rem); letter-spacing:-.055em; max-width: 840px; }
.lead { font-size:1.2rem; color:#EAF0FF; max-width:720px; }
.hero-actions, .form-actions, .result-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.btn { border:0; border-radius:14px; padding:12px 17px; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:44px; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); text-decoration:none; }
.btn-primary { background:var(--red); color:white; box-shadow: 0 10px 24px rgba(200,16,46,.28); }
.btn-outline { background:transparent; border:2px solid currentColor; color:inherit; }
.btn-light { background:white; color:var(--royal-blue); border:1px solid var(--line); }
.hero-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); border-radius:28px; padding:30px; box-shadow:var(--shadow); backdrop-filter: blur(10px); }
.card-label { display:block; font-size:.76rem; color:var(--muted); text-transform:uppercase; font-weight:900; letter-spacing:.11em; }
.hero-card .card-label, .hero-card small { color:#EAF0FF; }
.hero-card strong { display:block; color:white; font-size:3.6rem; letter-spacing:-.06em; margin:10px 0; }
.mini-bars { height:92px; display:flex; align-items:end; gap:12px; margin-top:22px; }
.mini-bars span { flex:1; border-radius:10px 10px 0 0; background:linear-gradient(180deg, white, #FFB4C0); }
.ad-band { background:white; border-bottom:1px solid var(--line); }
.ad-box { min-height:90px; display:grid; place-items:center; text-align:center; color:var(--muted); border-left:2px dashed var(--line); border-right:2px dashed var(--line); }
.ad-box span { text-transform:uppercase; letter-spacing:.16em; font-weight:900; color:var(--black); font-size:.72rem; }
.ad-box p { margin:4px 0 0; }
.intro, .content-grid, .faq, .table-section { padding: 70px 0; }
.section-heading { max-width:780px; margin-bottom:30px; }
.section-heading h2, .calc-header h2 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing:-.04em; }
.section-heading.compact { margin-bottom:20px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature-grid article, .affiliate-card, .calculator-card, .results-panel, .table-wrap, details { background:white; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow: 0 12px 28px rgba(0,30,96,.08); }
.feature-grid h3, .affiliate-card h3 { margin-bottom:8px; }
.calculator-section { padding: 70px 0; background:linear-gradient(180deg, #EEF3FF, var(--peerless-white)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.calc-layout { display:grid; grid-template-columns: 1.25fr .75fr; gap:28px; align-items:start; }
.calc-header { margin-bottom:24px; }
fieldset { border:1px solid var(--line); border-radius:20px; margin:0 0 18px; padding:18px; background:#FBFCFF; }
legend { color:var(--royal-blue); font-weight:900; padding:0 8px; }
.field-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
label { display:grid; gap:6px; font-weight:800; color:var(--black); font-size:.94rem; }
.wide-field { grid-column: 1 / -1; }
.field-note { color: var(--muted); font-weight:700; line-height:1.35; }
input, select { width:100%; border:1px solid #B9C2D2; border-radius:12px; padding:12px; font-size:1rem; background:white; color:var(--black); }
select { cursor:pointer; }
input:focus, select:focus { outline:3px solid rgba(0,61,165,.18); border-color:var(--royal-blue); }
.results-panel { position:sticky; top:92px; }
.status-card { padding:20px; border-radius:22px; color:white; background:var(--warning); margin-bottom:18px; }
.status-card.safe { background:var(--success); }
.status-card.risk { background:var(--danger); }
.status-card .card-label, .status-card p { color:white; }
.status-card strong { display:block; font-size:2.2rem; margin:6px 0; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.result-grid div { border:1px solid var(--line); border-radius:18px; padding:14px; background:#FBFCFF; }
.result-grid span { color:var(--muted); font-size:.82rem; display:block; }
.result-grid strong { color:var(--black); font-size:1.35rem; }
.breakdown-card { margin-top:18px; }
.breakdown-list { display:grid; gap:9px; }
.breakdown-row { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.breakdown-row meter { width:100%; grid-column:1 / -1; height:9px; }
.microcopy { min-height:22px; color:var(--royal-blue); font-weight:800; }
.table-wrap { overflow-x:auto; padding:0; }
table { border-collapse:collapse; width:100%; background:white; }
th, td { padding:13px 15px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child, td:first-child { text-align:left; }
th { color:white; background:var(--royal-blue); }
.content-grid { display:grid; grid-template-columns:1fr 360px; gap:28px; }
.affiliate-card { border-top:6px solid var(--red); }
.affiliate-card span { display:inline-block; background:#FDE8EC; color:var(--red); border-radius:999px; padding:6px 10px; font-size:.72rem; font-weight:900; text-transform:uppercase; }
.faq details { margin-bottom:14px; }
summary { font-weight:900; color:var(--royal-blue-dark); cursor:pointer; }
.site-footer { background:var(--black); color:white; padding:38px 0; }
.footer-grid { display:grid; grid-template-columns:1.5fr .5fr .8fr; gap:28px; }
.footer-grid a { display:block; color:white; margin:6px 0; }
.footer-grid h3 { color:white; margin-bottom:8px; }
.footer-brand { margin-bottom:14px; }
.legal-page { padding:60px 0; max-width:850px; }
.legal-page h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.legal-page h2 { margin-top:32px; }
@media (max-width: 900px) {
  .hero-grid, .calc-layout, .content-grid, .footer-grid { grid-template-columns:1fr; }
  .results-panel { position:static; }
  .feature-grid { grid-template-columns:1fr; }
}
@media (max-width: 720px) {
  .nav { flex-wrap:wrap; }
  .nav-toggle { display:inline-flex; margin-left:auto; background:white; color:var(--black); border:0; border-radius:10px; padding:9px 12px; font-weight:900; }
  .nav-menu { display:none; width:100%; flex-direction:column; align-items:flex-start; padding-bottom:16px; }
  .nav-menu.open { display:flex; }
  .field-grid, .result-grid { grid-template-columns:1fr; }
  .hero { padding:56px 0; }
}
@media print {
  .site-header, .ad-band, .hero, .result-actions, .site-footer { display:none; }
  body { background:white; }
  .calc-layout { grid-template-columns:1fr; }
  .calculator-card, .results-panel, .table-wrap { box-shadow:none; }
}