/* Import font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  /* Brand tokens */
  --primary: 209 56.6% 20.8%; /* #173653 */
  --accent: 43.3 95.6% 55.9%; /* #FABE23 */
  --bg: 216 33% 97%;
  --card: 0 0% 100%;
  --muted: 215 16% 47%;
  --border: 214 32% 91%;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: hsl(var(--primary));
  background: linear-gradient(120deg, hsl(var(--bg)) 0%, #fff 100%);
  line-height: 1.65;
}

.container{max-width: 960px; margin: 0 auto; padding: 24px}

/* Header */
.header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 0 8px}
.logo{display:flex; align-items:center; gap:10px}
.logo img{height:28px; width:auto}
.back{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid hsl(var(--border));
  color:hsl(var(--primary)); text-decoration:none; background:#fff;
}
.back:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}

/* Hero */
.hero{margin: 28px 0 16px}
.title{
  font-weight:800; font-size: clamp(28px, 4vw, 42px); line-height:1.1; margin: 6px 0 10px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent;
}
.subtitle{color: hsl(var(--muted)); font-size: 16px; margin-top: 4px}
.meta{display:flex; align-items:center; gap:10px; color:hsl(var(--muted)); font-size:13px; margin: 12px 0 6px}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background: hsla(43.3,95.6%,55.9%,.12); color: hsl(var(--primary)); font-weight:600; font-size:12px;
}

/* Cards & content */
.card{
  background: hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius: var(--radius); padding: 22px 22px; box-shadow: 0 8px 24px rgba(23,54,83,.05);
  margin: 14px 0;
}
h2{font-size: 20px; margin:0 0 10px 0}
h3{font-size: 16px; margin:16px 0 6px 0}
p,li{color:hsl(var(--primary)); opacity:.92}
ul{padding-left: 18px; margin: 8px 0}
a{color:hsl(var(--primary)); text-decoration: underline; text-underline-offset:2px}

/* TOC chips */
.toc{display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 16px}
.toc a{
  text-decoration:none; color:hsl(var(--primary));
  border:1px solid hsl(var(--border)); background:#fff; padding:8px 12px; border-radius:10px; font-size:13px;
}
.toc a:hover{background: hsla(43.3,95.6%,55.9%,.08)}

/* Footer */
.footer{
  margin: 28px 0 40px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:hsl(var(--muted)); font-size:13px;
  border-top:1px solid hsl(var(--border)); padding-top:16px;
}
@media (max-width:640px){.footer{flex-direction:column; align-items:flex-start}}