.legal-hero {
  position: relative;
  overflow: hidden;
  padding: 196px var(--gutter) 96px;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  isolation: isolate;
}

.legal-hero-copy {
  position: relative;
  max-width: 780px;
}

.legal-hero-copy > * {
  animation: rise-in 1000ms var(--ease-out) both;
}

.legal-hero-copy > :nth-child(2) {
  animation-delay: 120ms;
}

.legal-hero-copy > :nth-child(3) {
  animation-delay: 240ms;
}

.legal-hero h1 {
  margin: 0;
  font: 300 clamp(44px, 4.6vw, 72px)/1.06 var(--serif);
  letter-spacing: -0.018em;
}

.legal-hero-meta {
  margin: 28px 0 0;
  color: rgb(var(--fg) / 0.6);
  font: 15px/22px var(--sans);
  letter-spacing: 0.01em;
}

.legal {
  --fg: var(--ink);
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 700px);
  justify-content: space-between;
  gap: 64px;
  padding: 96px var(--gutter) 128px;
  background: rgb(var(--paper));
  color: rgb(var(--ink));
}

.legal-toc {
  position: sticky;
  top: 112px;
  align-self: start;
}

.legal-toc h2 {
  margin: 0 0 18px;
  color: rgb(var(--ink) / 0.5);
  font: 12.5px/18px var(--sans-medium);
  letter-spacing: 0.01em;
}

.legal-toc ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc a {
  color: rgb(var(--ink) / 0.62);
  font: 14px/20px var(--sans);
  text-decoration: none;
  transition: color 300ms ease;
}

.legal-toc a:hover {
  color: rgb(var(--ink));
}

.legal-body {
  max-width: 700px;
}

.legal-body .legal-intro {
  margin: 0 0 24px;
  color: rgb(var(--ink));
  font: 22px/1.5 var(--serif);
}

.legal-body section {
  padding-top: 48px;
  scroll-margin-top: 96px;
}

.legal-body h2 {
  margin: 0 0 20px;
  color: rgb(var(--ink));
  font: 300 30px/1.2 var(--serif);
  letter-spacing: -0.01em;
}

.legal-body h3 {
  margin: 28px 0 10px;
  color: rgb(var(--ink));
  font: 15.5px/22px var(--sans-medium);
}

.legal-body p,
.legal-body li {
  color: rgb(var(--ink) / 0.76);
  font: 16px/1.72 var(--sans);
}

.legal-body p {
  margin: 0 0 16px;
}

.legal-body ul {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-left: 20px;
}

.legal-body li::marker {
  color: rgb(var(--accent));
}

.legal-body strong {
  color: rgb(var(--ink));
  font-family: var(--sans-medium);
  font-weight: 400;
}

.legal-body a {
  color: rgb(var(--ink));
  text-decoration: underline;
  text-decoration-color: rgb(var(--ink) / 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 300ms ease;
}

.legal-body a:hover {
  text-decoration-color: rgb(var(--ink));
}

.legal-body .legal-caps {
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.legal-contact {
  margin-top: 8px;
  padding: 28px 32px;
  border: 1px solid rgb(var(--ink) / 0.1);
  border-radius: 4px;
  background: rgb(255 255 255 / 0.55);
}

.legal-contact p {
  margin: 0;
}

.legal-contact p + p {
  margin-top: 4px;
}

@media (max-width: 980px) {
  .legal {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 64px;
  }

  .legal-toc {
    display: none;
  }
}

@media (max-width: 720px) {
  .legal-hero {
    padding: 148px 24px 72px;
  }

  .legal {
    padding: 48px 24px 96px;
  }

  .legal-body .legal-intro {
    font-size: 20px;
  }

  .legal-body h2 {
    font-size: 26px;
  }

  .legal-contact {
    padding: 22px 22px;
  }
}