@layer components{.legal-hero {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%);
  }

  .legal-grid {
    display: grid;
    gap: 1rem;

    @media (min-width: 54rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .legal-stack {
    display: grid;
    gap: 1rem;
  }

  .legal-card {
    display: grid;
    gap: .4rem;
  }

  .legal-card address {
    font-style: normal;
    line-height: 1.5;
  }

  .contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .35rem;

    & span {
      display: inline-block;
      min-width: 4.5rem;
      color: var(--muted);
      font-size: var(--step--1);
    }
  }

  .legal-note {
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  }
}