@layer components {
  .legal-back {
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--color-ink);
  }

  .legal-back:hover {
    color: var(--color-gold);
  }

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

  .legal-doc {
    max-width: 40rem;
  }

  .legal-doc h1 {
    font-size: var(--step-2);
    max-width: 16ch;
  }

  .legal-updated {
    margin: 0.7rem 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .legal-doc h2 {
    margin-top: var(--space-5);
    font-size: var(--step-0);
  }

  .legal-doc p,
  .legal-doc li {
    color: var(--color-muted);
  }

  .legal-doc ul {
    margin: 0.6rem 0;
    padding-inline-start: 1.15rem;
    display: grid;
    gap: 0.35rem;
  }

  .legal-doc a {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }
}