:root {
  color-scheme: light;
  --navy: #102a35;
  --teal: #1b8b88;
  --teal-dark: #136b69;
  --amber: #f4b63e;
  --cream: #f7f4ec;
  --ink: #18343e;
  --muted: #586c73;
  --line: #d8dedc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header {
  background: linear-gradient(145deg, var(--navy), #175565);
  color: white;
  padding: 24px clamp(20px, 5vw, 64px);
}

nav, main, footer { max-width: 920px; margin: 0 auto; }

nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
nav strong { margin-right: auto; font-size: 1.15rem; }
nav a { color: white; font-weight: 700; text-decoration: none; }
nav a:hover, nav a:focus { text-decoration: underline; }

main { padding: clamp(38px, 8vw, 84px) clamp(20px, 5vw, 64px); }
h1, h2 { line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(2.2rem, 8vw, 4.7rem); margin: 0 0 18px; }
h2 { margin-top: 2.4rem; }
.eyebrow { color: var(--teal-dark); font-size: .85rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lede { font-size: 1.25rem; max-width: 710px; }
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 34px; }
.card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.pill { background: var(--amber); border-radius: 999px; color: var(--navy); display: inline-block; font-weight: 800; padding: 5px 11px; }
a { color: var(--teal-dark); }
code { overflow-wrap: anywhere; }
footer { border-top: 1px solid var(--line); color: var(--muted); padding: 28px clamp(20px, 5vw, 64px) 50px; }
ul { padding-left: 1.25rem; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }