:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  color: #1c1b20;
  background: #fffbff;
}

* { box-sizing: border-box; }

body { margin: 0; }

main, footer {
  width: min(100% - 2rem, 44rem);
  margin-inline: auto;
}

main { padding: 4rem 0 3rem; }

footer {
  padding: 1.5rem 0 3rem;
  color: #625b71;
  font-size: .9rem;
}

h1 { font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.04; margin: .4rem 0 1.5rem; }
h2 { margin-top: 2.5rem; font-size: 1.3rem; }
p { font-size: 1.05rem; line-height: 1.65; }
a { color: #6750a4; }

.eyebrow {
  color: #6750a4;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}

.lead { font-size: 1.25rem; max-width: 38rem; }
.button { display: inline-block; margin-top: 1rem; padding: .85rem 1.1rem; border-radius: 999px; background: #6750a4; color: white; text-decoration: none; font-weight: 700; }
.back { text-decoration: none; font-weight: 700; }

@media (prefers-color-scheme: dark) {
  :root { color: #e6e0e9; background: #141218; }
  footer { color: #cac4d0; }
  a { color: #d0bcff; }
  .eyebrow { color: #d0bcff; }
  .button { background: #d0bcff; color: #381e72; }
}