:root{
  --ink:#1E293B;
  --ink-soft:#4B5A6B;
  --muted:#6B7A8C;
  --blue:#2B5C8A;
  --blue-dark:#1F4568;
  --paper:#FFFFFF;
  --panel:#F4F7FA;
  --border:#E1E6EC;
  --good:#1F7A4C;
  --warn:#B45309;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', system-ui, sans-serif;
  line-height:1.65;
}
h1,h2,h3{font-family:'Merriweather', Georgia, serif;}
img{max-width:100%;}
a{color:var(--blue);}
a:hover{color:var(--blue-dark);}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

/* Header / nav */
header.site{border-bottom:1px solid var(--border);background:var(--panel);}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;max-width:900px;flex-wrap:wrap;gap:10px 0;
}
.site-name{font-family:'Merriweather',serif;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-0.01em;text-decoration:none;}
.site-name span{color:var(--blue);}
header.site nav{display:flex;flex-wrap:wrap;gap:4px 20px;}
header.site nav a{font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;}
header.site nav a:hover{color:var(--blue);}

/* Hero */
.hero{padding:52px 0 8px;}
.eyebrow{text-transform:uppercase;letter-spacing:0.08em;font-size:12.5px;font-weight:700;color:var(--blue);margin:0 0 14px;}
h1{font-size:clamp(27px,4vw,38px);line-height:1.22;margin:0 0 20px;color:var(--ink);}
.lede{font-size:18.5px;color:var(--ink-soft);margin:0 0 8px;border-left:4px solid var(--blue);padding-left:18px;}
.lede strong{color:var(--ink);}
.byline{font-size:13.5px;color:var(--muted);margin:0 0 4px;}

/* Table of contents */
.toc{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin:28px 0 8px;}
.toc p{margin:0 0 10px;font-weight:700;font-size:14px;color:var(--ink);text-transform:uppercase;letter-spacing:0.04em;}
.toc ol{margin:0;padding-left:20px;}
.toc li{font-size:15px;margin-bottom:6px;}

/* Article body */
main{padding-bottom:24px;}
.article p{font-size:17px;color:#2A3542;margin:0 0 20px;}
.article ul, .article ol{margin:0 0 20px;padding-left:22px;}
.article li{font-size:17px;color:#2A3542;margin-bottom:10px;}
.article li strong{color:var(--ink);}
h2{font-size:23px;color:var(--ink);margin:44px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--border);}
h3{font-size:19px;color:var(--ink);margin:28px 0 12px;}

/* Callout */
.callout{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:6px;padding:16px 20px;margin:0 0 24px;font-size:16px;color:var(--ink-soft);}
.callout strong{color:var(--ink);}
.callout.warn{border-left-color:var(--warn);}
.callout.good{border-left-color:var(--good);}

/* Tables */
table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15.5px;border:1px solid var(--border);}
thead th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px;font-weight:600;}
tbody td{padding:12px 14px;border-top:1px solid var(--border);color:#2A3542;vertical-align:top;}
tbody tr:nth-child(odd){background:var(--panel);}

/* Numbered steps */
.steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:step;}
.steps li{position:relative;padding:0 0 26px 52px;font-size:17px;color:#2A3542;}
.steps li:last-child{padding-bottom:0;}
.steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:999px;
  background:var(--blue);color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Merriweather',serif;
}
.steps li strong{display:block;color:var(--ink);font-size:18px;margin-bottom:4px;}

/* Checklist */
.checklist{list-style:none;margin:0 0 24px;padding:0;}
.checklist li{position:relative;padding:2px 0 14px 34px;font-size:17px;color:#2A3542;}
.checklist li::before{
  content:"";position:absolute;left:0;top:4px;
  width:20px;height:20px;border-radius:5px;border:2px solid var(--blue);
}
.checklist li::after{
  content:"";position:absolute;left:6px;top:8px;
  width:8px;height:12px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
}

/* Compare cards */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 28px;}
.compare-card{border:1px solid var(--border);border-radius:8px;padding:22px;background:var(--panel);}
.compare-card h3{margin-top:0;font-size:18px;}
.compare-card ul{padding-left:18px;margin:0;}
.compare-card li{font-size:15px;margin-bottom:8px;}
@media (max-width:640px){.compare-grid{grid-template-columns:1fr;}}

/* CTA box */
.cta-box{margin:48px 0 8px;padding:32px 28px;background:var(--blue-dark);border-radius:10px;color:#fff;text-align:center;}
.cta-box h3{font-family:'Merriweather',serif;font-size:22px;margin:0 0 10px;color:#fff;}
.cta-box p{color:#CDE0F0;font-size:15.5px;margin:0 0 20px;}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;background:#fff;color:var(--blue-dark);font-weight:700;font-size:15px;border-radius:6px;text-decoration:none;}
.cta-btn:hover{background:#EAF2FA;color:var(--blue-dark);}

/* Related reading */
.related{margin:44px 0 8px;padding:24px 0 0;border-top:1px solid var(--border);}
.related p.label{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin:0 0 14px;}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.related-card{display:block;border:1px solid var(--border);border-radius:8px;padding:16px 18px;text-decoration:none;background:var(--paper);}
.related-card:hover{border-color:var(--blue);}
.related-card .k{font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;color:var(--blue);font-weight:700;display:block;margin-bottom:6px;}
.related-card .t{font-size:15px;color:var(--ink);font-weight:600;}
@media (max-width:640px){.related-grid{grid-template-columns:1fr;}}

.disclaimer{font-size:14px;color:var(--muted);font-style:italic;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--border);}

/* Footer */
footer.site{margin-top:64px;border-top:1px solid var(--border);background:var(--panel);padding:32px 0 40px;}
footer.site .wrap{max-width:900px;}
footer.site p{font-size:13.5px;color:var(--muted);margin:0 0 8px;}
footer.site nav a{font-size:13px;color:var(--muted);margin-right:16px;text-decoration:none;}
footer.site nav a:hover{color:var(--blue);}

@media (max-width:600px){
  .hero{padding-top:32px;}
  header.site .wrap{padding:14px 20px;}
}