@layer components {

  /* ─── Page base ───────────────────────────── */

  /* Hide the layout footer (© faktura.to) — the legal pages carry their own */
  body.legal-body > footer {
    display: none;
  }

  /* The full-bleed footer's ::before overhang mustn't cause horizontal scroll */
  html:has(body.legal-body),
  body.legal-body {
    overflow-x: clip;
  }

  /* ─── Prose ───────────────────────────────── */

  .legal {
    color: var(--color-ink);
    font-size: 1rem;
    line-height: 1.7;
    padding-block: 2.5rem 3.5rem;

    @media (width >= 768px) {
      padding-block: 3.5rem 5rem;
    }
  }

  .legal__container {
    margin-inline: auto;
    max-inline-size: 760px;
  }

  .legal :is(h1, h2, h3) {
    color: var(--color-ink);
    scroll-margin-block-start: calc(var(--nav-height) + 1rem);
    text-wrap: balance;
  }

  .legal h1 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    margin-block: 0 0.5rem;

    @media (width >= 480px) {
      font-size: 2.25rem;
    }

    @media (width >= 768px) {
      font-size: 2.75rem;
    }
  }

  .legal h2 {
    border-block-start: 1px solid var(--color-border-subtle);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin-block: 2.75rem 1rem;
    padding-block-start: 2rem;

    @media (width >= 768px) {
      font-size: 1.625rem;
    }
  }

  .legal h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-block: 2rem 0.75rem;
  }

  .legal p {
    margin-block: 0 1.25rem;
  }

  /* The opening "Last updated …" line */
  .legal h1 + p {
    color: var(--color-ink-muted);
    font-size: 0.9375rem;
    margin-block-end: 2rem;
  }

  .legal :is(ul, ol) {
    margin-block: 0 1.25rem;
    padding-inline-start: 1.5rem;
  }

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

  .legal li::marker {
    color: var(--color-brand);
  }

  /* Nested lists */
  .legal :is(ul, ol) :is(ul, ol) {
    margin-block: 0.5rem 0;
  }

  .legal a {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .legal a:hover {
    text-decoration: none;
  }

  .legal strong {
    font-weight: 700;
  }

  .legal em {
    font-style: italic;
  }

  .legal hr {
    border: 0;
    border-block-start: 1px solid var(--color-border-subtle);
    margin-block: 2.5rem;
  }

  /* The attribution below the closing rule */
  .legal hr + p {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  /* ─── Tables ──────────────────────────────── */

  .legal__table-wrap {
    margin-block: 0 1.5rem;
    overflow-x: auto;
  }

  .legal table {
    border-collapse: collapse;
    font-size: 0.9375rem;
    inline-size: 100%;
    min-inline-size: 34rem;
  }

  .legal :is(th, td) {
    border: 1px solid var(--color-border-subtle);
    padding: 0.625rem 0.875rem;
    text-align: start;
    vertical-align: top;
  }

  .legal thead th {
    background: var(--color-surface-tint);
    color: var(--color-ink);
    font-weight: 600;
  }

  .legal tbody tr:nth-child(even) {
    background: var(--color-surface-tint);
  }
}