@layer components {

  .legal-page {
    display: block;
  }

  .legal-content {
    max-inline-size: 720px;
    margin-inline: auto;
    padding-inline: var(--main-padding);
    padding-block: 3rem 4rem;
    line-height: 1.7;
  }

  .legal-content h1 {
    font-size: 2rem;
    margin-block-end: 0.5rem;
  }

  .legal-content h2 {
    font-size: 1.25rem;
    margin-block-start: 2.5rem;
    margin-block-end: 0.75rem;
    padding-block-end: 0.25rem;
    border-block-end: 1px solid oklch(var(--lch-separator));
  }

  .legal-content h3 {
    font-size: 1.05rem;
    margin-block-start: 1.5rem;
    margin-block-end: 0.5rem;
  }

  .legal-content p,
  .legal-content ul,
  .legal-content ol {
    margin-block-end: 1rem;
    color: oklch(var(--lch-secondary));
  }

  .legal-content ul {
    padding-inline-start: 1.5rem;
  }

  .legal-content li {
    margin-block-end: 0.35rem;
  }

  .legal-content a {
    color: oklch(var(--lch-link));
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .legal-content code {
    background: oklch(var(--lch-panel));
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  .legal-updated {
    color: oklch(var(--lch-tertiary));
    font-size: 0.875rem;
    margin-block-end: 2rem;
  }

  .legal-table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block: 1rem;
    font-size: 0.9rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.625rem 0.75rem;
    text-align: start;
    border-block-end: 1px solid oklch(var(--lch-separator));
  }

  .legal-table th {
    font-weight: 600;
    background: oklch(var(--lch-panel));
  }

  .legal-footer {
    text-align: center;
    padding-block: 2rem;
    border-block-start: 1px solid oklch(var(--lch-separator));
    font-size: 0.875rem;
    color: oklch(var(--lch-tertiary));
  }

  .legal-footer__links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-block-end: 0.75rem;
  }

  .legal-footer__links a {
    color: oklch(var(--lch-secondary));
    text-decoration: none;
  }

  .legal-footer__links a:hover {
    text-decoration: underline;
  }

}