@layer screens {
  /* Legal documents: readable single-column prose. */
  .legal {
    max-width: var(--container-md);
    margin-inline: auto;
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-16);
    color: var(--text);
  }

  .legal h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-2);
  }

  .legal__updated {
    color: var(--text-subtle);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-8);
  }

  .legal h2 {
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-10);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: var(--border-width) solid var(--border);
  }

  .legal h3 {
    font-size: var(--font-size-lg);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-2);
  }

  .legal p,
  .legal li {
    line-height: 1.7;
    color: var(--text-muted);
  }

  .legal p {
    margin-bottom: var(--spacing-4);
  }

  .legal ul {
    margin: 0 0 var(--spacing-4);
    padding-inline-start: var(--spacing-6);
    list-style: disc;
  }

  .legal li {
    margin-bottom: var(--spacing-2);
  }

  .legal a {
    color: var(--text);
    text-decoration: underline;
  }

  /* Site-wide footer with legal links. */
  .site-footer {
    border-top: var(--border-width) solid var(--border);
    padding: var(--spacing-6) var(--spacing-4);
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
  }

  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5);
  }

  /* Every entry is an <a class="site-footer__link"> — same box model, so the row
     stays aligned. The active page is marked with aria-current instead of being
     rendered as bare text. */
  .site-footer__link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
  }

  .site-footer__link:hover {
    color: var(--text);
  }

  .site-footer__link[aria-current="page"] {
    color: var(--text);
    font-weight: var(--font-weight-bold);
  }

  .site-footer__copy {
    color: var(--text-subtle);
    font-size: var(--font-size-sm);
  }

  /* Keep the footer clear of the fixed mobile bottom nav. */
  @media (max-width: 768px) {
    .site-footer {
      margin-bottom: calc(var(--tap-min) + var(--spacing-8));
    }
  }
}