:root {
  color-scheme: light dark;
  --ink: #0b1628;
  --muted: #52667e;
  --line: #d9e2ed;
  --canvas: #f5f7fb;
  --surface: #ffffff;
  --ocean: #1677b8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

main { max-width: 760px; margin: 0 auto; padding: 36px 20px 56px; }
header, section { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; margin-bottom: 16px; }
h1, h2 { line-height: 1.18; }
h1 { margin: 0 0 8px; font-size: clamp(2rem, 7vw, 3rem); }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
p, li { max-width: 68ch; }
.eyebrow { margin: 0 0 8px; color: var(--ocean); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
nav a, .button { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; color: var(--ink); font-weight: 650; text-decoration: none; }
nav a:hover, .button:hover { border-color: var(--ocean); color: var(--ocean); }
a { color: #005c99; }
footer { color: var(--muted); font-size: .9rem; padding: 4px 2px; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #edf4fb; --muted: #afc0d1; --line: #2b4057; --canvas: #0b1628; --surface: #12233a; --ocean: #55b7f2; }
  a { color: #7ed0ff; }
}