.page-wrapper {
  padding-top: var(--space-32);
  padding-bottom: var(--space-64);
}

.page-hero {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
  background: radial-gradient(circle at top left, rgba(91, 141, 255, 0.22), transparent 60%),
    var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.page-hero__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-16);
}

.page-hero__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.page-content {
  padding-top: var(--space-32);
}

.toc {
  margin-bottom: var(--space-32);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}

.toc__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-16);
}

.toc ol {
  padding-left: var(--space-16);
}

.toc li {
  margin-bottom: var(--space-8);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.toc a {
  text-decoration: none;
}

.legal-text {
  max-width: 920px;
}

.legal-section {
  padding: var(--space-24);
  margin-bottom: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}

.legal-section h2 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-16);
}

.legal-section h3 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-16);
  margin-bottom: var(--space-12);
}

.legal-section p {
  color: var(--color-text-muted);
}

.legal-section ul,
.legal-section ol {
  margin-bottom: var(--space-16);
  padding-left: var(--space-24);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.legal-section li + li {
  margin-top: var(--space-8);
}

.legal-cta {
  margin-top: var(--space-32);
  padding: var(--space-24);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at top left, rgba(91, 141, 255, 0.25), transparent 65%),
    var(--color-bg-soft);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(91, 141, 255, 0.6);
}

.legal-cta h2 {
  margin-bottom: var(--space-12);
}

.legal-cta p {
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .page-wrapper {
    padding-top: var(--space-24);
  }

  .page-hero {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .legal-section {
    padding: var(--space-20);
  }

  .toc {
    padding: var(--space-20);
  }
}