:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070b12;
  color: #e8eef8;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 15%, rgba(37, 99, 235, .18), transparent 36rem),
    #070b12;
}

.card, .legal {
  width: min(100%, 46rem);
}

.card { text-align: center; }

.mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 2rem;
  display: grid;
  place-items: center;
  border: 1px solid #2a3a55;
  border-radius: 1rem;
  color: #60a5fa;
  font-size: 1.5rem;
  font-weight: 750;
}

.eyebrow {
  margin: 0 0 .85rem;
  color: #7f96b8;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.summary {
  max-width: 34rem;
  margin: 1.4rem auto 2rem;
  color: #aebbd0;
  font-size: 1.08rem;
  line-height: 1.7;
}

nav { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }

a { color: #93c5fd; text-underline-offset: .25rem; }
a:hover { color: #dbeafe; }
a:focus-visible { outline: 2px solid #60a5fa; outline-offset: .3rem; border-radius: .15rem; }

.legal {
  margin: 3rem auto;
  color: #c7d2e3;
  line-height: 1.75;
}

.legal header { margin-bottom: 2.5rem; }
.legal h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.legal h2 { margin-top: 2.25rem; color: #f1f5f9; font-size: 1.25rem; }
.legal p, .legal li { font-size: 1rem; }
.legal .updated { color: #7f96b8; }
.back { display: inline-block; margin-bottom: 2rem; }

@media (max-width: 36rem) {
  body { padding: 1.25rem; place-items: start center; }
  .card { margin-top: 18vh; }
  .legal { margin-top: 1.5rem; }
}