:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --card:#f9fafb;
  --link:#0b5fff;
  --linkHover:#0848bf;
  --max:960px;
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:var(--link);text-decoration:none;}
a:hover{color:var(--linkHover);text-decoration:underline;}

.header{border-bottom:1px solid var(--border);background:#fff;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px;}

.brand{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:18px 0 8px 0;
}
.site-title{font-size:18px;font-weight:600;}
.tagline{margin:0;color:var(--muted);font-size:13px;}

.nav{display:flex;gap:10px;flex-wrap:wrap;padding:10px 0 16px 0;}
.nav a{
  padding:8px 10px;border:1px solid var(--border);border-radius:999px;
  font-size:14px;background:#fff;
}
.nav a[aria-current="page"]{background:var(--card);border-color:#d1d5db;}

.main{padding:22px 0 34px 0;}

.hero{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
}
.hero h2{margin:0 0 10px 0;font-size:26px;line-height:1.25;}
.hero p{margin:8px 0;}

.content h2{margin:18px 0 8px 0;font-size:22px;}
.content h3{margin:14px 0 6px 0;font-size:18px;}
.content p{margin:10px 0;}
.content ul{margin:10px 0 10px 20px;}
.content li{margin:6px 0;}

.callout{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin:16px 0;
}

.footer{
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  padding:16px 0 28px 0;
}
.small{font-size:13px;color:var(--muted);}