.legal-page__main {
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--color_beidge), 0.16), transparent 28rem),
    var(--bg);
}

.legal-content {
  width: min(860px, calc(100% - 32px));
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.5rem);
  color: var(--sage);
}

.legal-content h1,
.legal-content h2 {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 400;
  text-wrap: balance;
}

.legal-content h1 {
  max-width: 19ch;
  padding-bottom: 1.4rem;
  margin: 0 0 2.5rem;
  color: var(--sage);
  border-bottom: 1px solid rgba(var(--color_cyan), 0.28);
  font-size: clamp(2.25rem, 6vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.legal-content h2 {
  margin: 2.7rem 0 0.85rem;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.35;
}

.legal-content p,
.legal-content ul {
  margin: 0.85rem 0 0;
}

.legal-content p,
.legal-content li {
  font-size: clamp(0.98rem, 1.6vw, 1.05rem);
  line-height: 1.85;
}

.legal-content ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.4rem;
}

.legal-content li::marker {
  color: rgb(var(--color_beidge));
}

.legal-content strong {
  color: var(--muted);
  font-weight: 500;
}

.legal-content a {
  color: var(--muted);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: rgba(var(--color_cyan), 0.45);
  text-underline-offset: 0.22em;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.legal-content a:hover,
.legal-content a:focus-visible {
  color: rgb(var(--color_beidge));
  text-decoration-color: currentColor;
}

@media (max-width: 720px) {
  .legal-content {
    width: min(100% - 32px, 860px);
  }

  .legal-content h1 {
    margin-bottom: 2rem;
  }

  .legal-content h2 {
    margin-top: 2.25rem;
  }
}