:root{
  --ink:#0b1f3a;
  --ink-2:#11335c;
  --ink-soft:#3b4d6a;
  --muted:#6b7a90;
  --line:#e4ebf3;
  --bg:#f5f8fc;
  --white:#ffffff;
  --primary:#0a4c8c;
  --primary-dark:#073461;
  --accent:#19b89a;
  --accent-dark:#0f8f78;
  --warn:#c95a16;
  --shadow-sm: 0 1px 2px rgba(11,31,58,.06), 0 1px 1px rgba(11,31,58,.04);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
h1,h2,h3{font-family:'Fraunces','Inter',serif; color:var(--ink); letter-spacing:-0.01em; line-height:1.2; margin:0 0 .6em}
h1{font-size:clamp(2rem,3.6vw,2.8rem); font-weight:700; margin-top:.3em}
h2{font-size:1.35rem; font-weight:600; margin-top:2.2em; padding-top:.4em}
h3{font-size:1.05rem; font-weight:600; font-family:'Inter',sans-serif; margin-top:1.5em}
p{margin:0 0 1em; color:var(--ink-soft)}
ul{margin:0 0 1.2em 1.2em; padding:0; color:var(--ink-soft)}
li{margin:.25em 0}
a{color:var(--primary); text-decoration:underline; text-decoration-color:rgba(10,76,140,.35); text-underline-offset:2px}
a:hover{color:var(--primary-dark); text-decoration-color:var(--primary-dark)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--bg); padding:1px 6px; border-radius:5px}
strong{color:var(--ink)}

.wrap{max-width:820px; margin:0 auto; padding:0 24px}

/* NAV (slim version of the main page nav) */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{max-width:1180px}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none}
.logo:hover{color:var(--ink)}
.logo-mark{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  display:grid;place-items:center; color:#fff;
  box-shadow:var(--shadow-sm);
}
.logo small{display:block; font-weight:500; font-size:.72rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.nav-links{display:flex; gap:24px; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--ink-soft); font-weight:500; font-size:.95rem; text-decoration:none}
.nav-links a:hover{color:var(--primary)}
.nav-links a.btn, .nav-links a.btn:hover{color:#fff}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary); color:#fff;
  padding:.65rem 1.05rem; border-radius:10px; font-weight:600;
  font-size:.92rem; border:1px solid var(--primary);
  transition:background .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--primary-dark); border-color:var(--primary-dark)}

/* CONTENT */
.legal{padding:60px 0 80px}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--primary);
  padding:.4rem .75rem; border-radius:999px;
  background:rgba(10,76,140,.08);
  margin-bottom:14px;
}
.lead{font-size:1.05rem; color:var(--ink-soft); margin-bottom:2em}
.todo-banner{
  background:#fff8ed; border:1px solid #f1d8a6; color:#6d4d12;
  border-radius:12px; padding:14px 18px; margin-bottom:32px;
  font-size:.92rem; line-height:1.55;
}
.todo-banner code{background:#fff1d4; color:#6d4d12}
.back-home{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:.95rem}

/* FOOTER */
footer{background:#08182f; color:#aebdd2; padding:28px 0; margin-top:60px}
footer .wrap{max-width:1180px}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.9rem; color:#7d8da3; align-items:center}
.foot-links{display:flex; gap:20px}
footer a{color:#aebdd2; text-decoration:none}
footer a:hover{color:#fff}

/* RESPONSIVE */
@media (max-width: 640px){
  .nav-links{display:none}
  .legal{padding:40px 0 60px}
  h2{font-size:1.2rem}
}