:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #172b40;
  background: #f4f7fb;
  line-height: 1.7;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 40px, 960px); margin-inline: auto; }
.hero { padding: 80px 0 48px; }
.eyebrow { color: #2858a5; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; }
h1 { margin: 20px 0; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.35; letter-spacing: -0.03em; }
.intro, .empty-state p { color: #536175; }
h2 { font-size: 1.25rem; margin: 0 0 16px; }
.empty-state { padding: 32px; border: 1px solid #d7e0eb; border-radius: 20px; background: #fff; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; color: #2858a5; background: #eaf1ff; font-size: 0.8rem; font-weight: 700; }
h3 { margin: 16px 0 8px; font-size: 1.15rem; }
.empty-state p { margin: 0; }
footer { padding: 40px 0 24px; font-size: 0.8rem; color: #536175; }
a { color: #2858a5; }
a:focus-visible { outline: 3px solid #2858a5; outline-offset: 4px; }

@media (max-width: 480px) {
  .hero { padding: 40px 0 32px; }
  .empty-state { padding: 24px; }
  .desktop-break { display: none; }
}