@layer components {
  .legal-hero {
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) 1rem;
  }

  .legal-hero__updated {
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
  }

  .legal-body {
    max-width: 68ch;
    display: grid;
    gap: 1.1rem;
  }

  .legal-body h2 {
    font-size: 1.4rem;
    margin-top: 1rem;
  }

  .legal-body p {
    color: var(--c-ink-soft);
  }

  .legal-body ul {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.25rem;
    list-style: disc;
    color: var(--c-ink-soft);
  }

  .legal-body strong {
    color: var(--c-ink);
  }
}