@layer components {
  /* The legal pages: one column of running text at a reading measure. */
  .legal {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block: 40px 96px;

    > * {
      max-inline-size: 68ch;
    }

    h2 {
      font: var(--text-title);
      margin-block-start: 20px;
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: 8px;
      list-style: disc;
      padding-inline-start: 22px;
    }

    @media (max-width: 760px) {
      padding-block: 24px 60px;
    }
  }

  .legal__draft {
    background: var(--color-warm);
    border-radius: 10px;
    font: var(--text-small);
    font-weight: 600;
    padding: 10px 14px;
  }

  .legal__heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .legal__lead {
    color: var(--color-muted);
    font: var(--text-lead);
  }

  .legal__address {
    font: var(--text-title);
  }
}