:root{
  --bg:#fafafa; --fg:#1a1a1a; --muted:#6a6a6a; --accent:#1b4b73;
  --accent-dark:#133654; --border:#e5e5e5; --card:#ffffff;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--max); margin:0 auto; padding:0 1.5rem}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ─── Header ─── */
.site-header{border-bottom:1px solid var(--border); background:#fff}
.site-header .container{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.5rem}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--fg); font-size:1.05rem}
.brand:hover{text-decoration:none}
nav{display:flex; gap:1.5rem}
nav a{color:var(--fg); font-weight:500}

/* ─── Hero / sections ─── */
.hero{padding:3.5rem 0 2rem}
.hero h1{font-size:2.3rem; line-height:1.15; margin:0 0 1rem; letter-spacing:-.01em}
.lede{font-size:1.15rem; color:var(--muted); max-width:720px; margin:0 0 1.5rem}

.btn{
  display:inline-block; padding:.65rem 1.1rem; border-radius:4px;
  background:var(--accent); color:#fff; font-weight:500; margin-right:.5rem;
}
.btn:hover{background:var(--accent-dark); text-decoration:none}
.btn-ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.btn-ghost:hover{background:var(--accent); color:#fff}

/* ─── Features grid ─── */
.features{padding:3rem 0; border-top:1px solid var(--border)}
.features h2{font-size:1.6rem; margin:0 0 1.5rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem}
.grid article{
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:1.5rem;
}
.grid h3{margin:0 0 .5rem; font-size:1.15rem}
.grid p{margin:0; color:var(--muted)}

/* ─── Highlighted band ─── */
.band{background:#1b4b73; color:#fff; margin:3rem 0 0; padding:3rem 0}
.band-inner{max-width:var(--max); margin:0 auto; padding:0 1.5rem}
.band h2{margin-top:0}
.band a{color:#fff; text-decoration:underline}

/* ─── Prose pages ─── */
.prose{padding:1rem 0 3rem; max-width:720px}
.prose h2{margin-top:2.5rem; font-size:1.45rem}
.prose h3{margin-top:1.5rem; font-size:1.15rem}
.prose p, .prose li{color:#333}
.prose ul, .prose ol{padding-left:1.2rem}
.prose li{margin:.3rem 0}
.prose .case{border:1px solid var(--border); border-radius:6px; padding:1.3rem; margin-bottom:1.5rem; background:var(--card)}
.prose .case h2{margin-top:0}
.prose table{border-collapse:collapse; width:100%; margin:1rem 0}
.prose th, .prose td{text-align:left; padding:.5rem .8rem; border-bottom:1px solid var(--border)}
.prose th{background:#f3f3f3}

/* ─── Footer ─── */
.site-footer{background:#1a1a1a; color:#ccc; padding:3rem 0 1rem; margin-top:3rem}
.site-footer .container{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:2rem}
.site-footer h4{color:#fff; margin:0 0 .8rem; font-size:1rem}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin:.3rem 0}
.site-footer a{color:#ccc}
.site-footer .copy{grid-column:1/-1; border-top:1px solid #333; padding-top:1rem; margin-top:1rem; font-size:.9rem; color:#999; text-align:center}

@media (max-width:700px){
  nav{gap:1rem; font-size:.95rem}
  .hero h1{font-size:1.8rem}
}