@layer ec.pages {
  .ec-legal-page {
    max-width: 56rem;
    padding-block: var(--ec-space-9) var(--ec-space-10);
  }

  .ec-legal-document__inner {
    display: grid;
    gap: var(--ec-space-7);
    padding: clamp(var(--ec-space-5), 5vw, var(--ec-space-9));
  }

  .ec-legal-document__notice-icon {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-warning);
    color: var(--ec-sys-color-on-warning);
    font-weight: var(--ec-font-weight-extrabold);
    line-height: 1;
  }

  .ec-legal-document__header {
    display: grid;
    gap: var(--ec-space-2);
    padding-block-end: var(--ec-space-6);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-legal-document__updated {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-legal-document__content {
    display: grid;
    gap: var(--ec-space-7);
    color: var(--ec-sys-color-on-surface);
  }

  .ec-legal-document__content h2 {
    margin-block-end: var(--ec-space-3);
    font-size: var(--ec-type-title-lg-size);
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-legal-document__content h3 {
    margin-block: var(--ec-space-4) var(--ec-space-2);
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-legal-document__content p,
  .ec-legal-document__content li {
    max-width: 75ch;
    color: var(--ec-sys-color-on-surface);
    font-size: var(--ec-type-body-lg-size);
    line-height: var(--ec-type-body-lg-line);
  }

  .ec-legal-document__content p + p {
    margin-block-start: var(--ec-space-3);
  }

  .ec-legal-document__content ul,
  .ec-legal-document__content ol {
    display: grid;
    gap: var(--ec-space-2);
    margin: 0;
    padding-inline-start: var(--ec-space-6);
  }

  .ec-legal-document__content a {
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-legal-document__section {
    padding-block-start: var(--ec-space-6);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-legal-document__section:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }

  .ec-legal-document__placeholder {
    padding-inline: var(--ec-space-1);
    border-radius: var(--ec-radius-xs);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ec-space-5);
    margin-block-start: var(--ec-space-4);
  }

  .ec-audience-card {
    display: grid;
    align-content: start;
    gap: var(--ec-space-3);
    padding: var(--ec-space-5);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface-subtle);
  }

  .ec-audience-card__eyebrow {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-bold);
    letter-spacing: 0.06em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-audience-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ec-space-3);
    margin-block-start: var(--ec-space-5);
  }

  @media (max-width: 719px) {
    .ec-legal-page {
      padding-block: var(--ec-space-6) var(--ec-space-9);
    }

    .ec-legal-document__inner {
      padding: var(--ec-space-5);
    }

    .ec-audience-grid {
      grid-template-columns: 1fr;
    }

    .ec-audience-actions .ec-button {
      width: 100%;
    }
  }
}