.page-legal {
  padding-top: 24vh;
  padding-bottom: var(--sp-section);
}

.page-legal__inner {
  max-width: 760px;
}

.page-legal h1 {
  font-size: var(--fs-800);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-4);
}

.page-legal__updated {
  font-size: var(--fs-200);
  color: var(--c-muted);
  margin-bottom: var(--sp-7);
}

.page-legal h2 {
  font-size: var(--fs-600);
  letter-spacing: var(--ls-display);
  margin-block: var(--sp-7) var(--sp-3);
}

.page-legal h3 {
  font-size: var(--fs-500);
  margin-block: var(--sp-5) var(--sp-2);
}

.page-legal p, .page-legal li {
  color: var(--c-text-2);
  font-size: var(--fs-300);
  line-height: var(--lh-loose);
}

.page-legal p + p { margin-top: var(--sp-3); }

.page-legal ul, .page-legal ol {
  padding-left: var(--sp-5);
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}

.page-legal a { color: var(--c-accent); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .page-legal a:hover { color: var(--c-accent-2); } }

.page-404 {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-section);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(115,0,139,0.22) 0%, transparent 60%),
    var(--c-field);
}

.page-404__inner { max-width: 720px; padding-inline: var(--container-pad); }

.page-404 h1 {
  font-size: var(--fs-850);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin-bottom: var(--sp-4);
}
.page-404 h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  color: var(--c-accent);
}

.page-404 p {
  margin: 0 auto var(--sp-7);
  max-width: 38ch;
  font-size: var(--fs-500);
  color: var(--c-text-2);
}