:root {
  --fg: #1d2330;
  --muted: #5b6475;
  --bg: #ffffff;
  --soft: #f3f5f9;
  --accent: #2f5bd3;
  --line: #d9dee8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
}
body { margin: 0; }
.top, .hero, main, footer { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
.top { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; padding-top: 1rem; }
.top .brand { font-weight: 700; color: var(--fg); text-decoration: none; margin-right: auto; }
.hero { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.kicker { color: var(--accent); font-weight: 600; margin: 0; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0.4rem 0 1rem; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 44rem; }
section { padding: 2rem 0; border-top: 1px solid var(--line); }
main.legal { max-width: 44rem; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.card { background: var(--soft); border-radius: 0.75rem; padding: 0.25rem 1.25rem 1rem; }
.card h3 a { text-decoration: none; }
.small { font-size: 0.9rem; color: var(--muted); }
.note { background: var(--soft); border-left: 4px solid var(--accent); padding: 0.75rem 1rem; border-radius: 0.25rem; }
footer { padding-top: 1rem; padding-bottom: 3rem; border-top: 1px solid var(--line); }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
a { color: var(--accent); }