* { box-sizing: border-box; }
:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
}
body { margin: 0; line-height: 1.6; }
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1.25rem max(5%, calc((100% - 1100px) / 2));
  background: white;
}
.brand { font-weight: 750; text-decoration: none; color: inherit; }
nav { display: flex; gap: 1.25rem; }
nav a { color: inherit; text-decoration: none; }
.hero {
  padding: 7rem 1.5rem; text-align: center;
  background: linear-gradient(135deg, #e0eaff, #f5e8ff);
}
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.1; }
.hero > p:not(.eyebrow) { max-width: 620px; margin: 1rem auto 2rem; }
.eyebrow { letter-spacing: .2em; font-weight: 700; }
.cta, button {
  display: inline-block; border: 0; border-radius: 999px;
  padding: .8rem 1.3rem; background: #253fba; color: white;
  text-decoration: none; cursor: pointer; font: inherit;
}
.content { max-width: 850px; margin: auto; padding: 3rem 1.5rem; }
footer { text-align: center; padding: 2rem; background: white; }
@media (max-width: 520px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .hero { padding: 4rem 1.25rem; }
}