@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--sc-color-bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sc-space-6) var(--sc-space-4);
  font-family: var(--sc-font-sans);
  font-size: var(--sc-text-body);
  line-height: var(--sc-text-body-lh);
  color: var(--sc-color-text);
  background: var(--sc-color-bg);
}
main { width: 100%; max-width: 40rem; }
.logo { display: block; width: min(320px, 80%); height: auto; margin-bottom: var(--sc-space-12); }
h1 {
  margin: 0 0 var(--sc-space-4);
  font-size: var(--sc-text-display);
  line-height: var(--sc-text-display-lh);
  font-weight: var(--sc-text-display-weight);
  letter-spacing: var(--sc-text-display-tracking);
}
.lead {
  margin: 0 0 var(--sc-space-8);
  font-size: var(--sc-text-lead);
  line-height: var(--sc-text-lead-lh);
  color: var(--sc-color-text-muted);
}
.soon {
  display: inline-block;
  margin: 0;
  padding: var(--sc-space-2) var(--sc-space-4);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-full);
  background: var(--sc-color-surface);
  font-weight: var(--sc-text-label-weight);
}
@media (max-width: 30rem) {
  h1 { font-size: var(--sc-text-h1); line-height: var(--sc-text-h1-lh); }
}