@layer components {
  .ec-legal {
    display: flex;
    max-inline-size: 51rem;
    flex-direction: column;
    gap: var(--ec-space-16);
    margin-inline: auto;
    padding: var(--ec-section-py) var(--ec-section-px-sm);
    color: var(--ec-text-secondary);
    font-size: var(--ec-size-md);
    line-height: var(--ec-leading-relaxed);
    overflow-wrap: anywhere;
  }

  .ec-legal__title {
    color: var(--ec-text-primary);
    font-size: var(--ec-size-h3);
    font-weight: var(--ec-weight-extrabold);
    line-height: var(--ec-leading-title);
  }

  .ec-legal h2 {
    margin-block-start: var(--ec-space-24);
    color: var(--ec-text-primary);
    font-size: var(--ec-size-card-title);
    font-weight: var(--ec-weight-bold);
    line-height: var(--ec-leading-title);
  }

  .ec-legal ul {
    padding-inline-start: var(--ec-space-24);
    list-style: disc;
  }

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