/* Privacy Policy page styles */
.privacy-policy-page {
  background-color: var(--color-cream);
  padding-block: var(--space-8) var(--space-9);
}

.privacy-section {
  padding-block: var(--space-7);
}

.privacy-section--card {
  background-color: var(--color-off-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-medium);
  margin-inline: auto;
  max-width: 45rem;
  padding: var(--space-6);
}

.privacy-section--sage {
  background-color: var(--color-off-white);
  border-inline-start: 0.25rem solid var(--color-sage);
  padding-inline-start: var(--space-6);
}

.privacy-intro__container,
.privacy-collect__container,
.privacy-use__container,
.privacy-disclosure__container,
.privacy-cookies__container,
.privacy-security__container,
.privacy-rights__container,
.privacy-children__container,
.privacy-changes__container,
.privacy-contact__container {
  max-width: 45rem;
  margin-inline: auto;
  width: 100%;
}

.privacy-intro__container {
  text-align: left;
}

.privacy-intro__container h1 {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line-height);
  margin-block-end: var(--space-4);
  position: relative;
  padding-block-end: var(--space-3);
}

.privacy-intro__container h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.25rem;
  background-color: var(--color-teal);
  border-radius: var(--radius-pill);
  margin-block-start: var(--space-3);
}

.privacy-intro__lead {
  font-size: var(--text-body-large-size);
  line-height: var(--text-body-large-line-height);
  margin-block-end: var(--space-5);
  max-width: 40rem;
}

.privacy-intro__list,
.privacy-intro__commitment {
  margin-block-end: var(--space-5);
  max-width: 40rem;
}

.privacy-intro__date {
  margin-block-end: var(--space-5);
}

.privacy-intro__date-badge {
  display: inline-block;
  background-color: var(--color-teal);
  color: var(--color-off-white);
  font-size: var(--text-caption-size);
  font-weight: 600;
  line-height: var(--text-caption-line-height);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
}

.privacy-collect__container h2,
.privacy-use__container h2,
.privacy-disclosure__container h2,
.privacy-cookies__container h2,
.privacy-security__container h2,
.privacy-rights__container h2,
.privacy-children__container h2,
.privacy-changes__container h2,
.privacy-contact__container h2 {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  margin-block-end: var(--space-5);
  position: relative;
  padding-block-end: var(--space-3);
}

.privacy-collect__container h2::after,
.privacy-use__container h2::after,
.privacy-disclosure__container h2::after,
.privacy-cookies__container h2::after,
.privacy-security__container h2::after,
.privacy-rights__container h2::after,
.privacy-children__container h2::after,
.privacy-changes__container h2::after,
.privacy-contact__container h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 0.25rem;
  background-color: var(--color-golden);
  border-radius: var(--radius-pill);
  margin-block-start: var(--space-3);
}

.privacy-collect__container h3,
.privacy-use__container h3,
.privacy-disclosure__container h3,
.privacy-cookies__container h3,
.privacy-security__container h3,
.privacy-rights__container h3,
.privacy-children__container h3,
.privacy-changes__container h3,
.privacy-contact__container h3 {
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  margin-block-end: var(--space-3);
}

.privacy-collect__list,
.privacy-collect__choice,
.privacy-use__list,
.privacy-disclosure__list,
.privacy-disclosure__legal,
.privacy-cookies__list,
.privacy-cookies__analytics,
.privacy-security__list,
.privacy-security__retention,
.privacy-rights__list,
.privacy-rights__exercise,
.privacy-children__list,
.privacy-changes__list {
  margin-block-end: var(--space-5);
  max-width: 40rem;
}

.privacy-collect__note,
.privacy-use__note,
.privacy-changes__date {
  font-size: var(--text-caption-size);
  font-weight: 500;
  line-height: var(--text-caption-line-height);
  color: var(--color-navy-light);
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-cream);
  border-radius: var(--radius-small);
  border-inline-start: 0.25rem solid var(--color-teal);
  max-width: 40rem;
}

.privacy-use__callout {
  background-color: var(--color-cream);
  border: 1px solid var(--color-border-golden);
  border-radius: var(--radius-medium);
  padding: var(--space-5);
  margin-block-start: var(--space-5);
  max-width: 40rem;
}

.privacy-use__callout h3 {
  margin-block-end: var(--space-3);
}

.privacy-use__callout-list {
  margin-block-end: var(--space-4);
}

.privacy-use__callout-note {
  font-size: var(--text-caption-size);
  font-weight: 500;
  line-height: var(--text-caption-line-height);
  color: var(--color-coral-dark);
  margin-block-start: var(--space-3);
}

.privacy-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.privacy-contact__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.privacy-contact__list a {
  color: var(--color-teal);
  font-weight: 600;
}

@media (max-width: 47.9375rem) {
  .privacy-policy-page {
    padding-block: var(--space-6) var(--space-8);
  }

  .privacy-section {
    padding-block: var(--space-6);
  }

  .privacy-section--card {
    padding: var(--space-5);
    border-radius: var(--radius-small);
  }

  .privacy-section--sage {
    padding-inline-start: var(--space-4);
  }

  .privacy-intro__container h1 {
    font-size: 2rem;
    line-height: 1.15;
  }

  .privacy-intro__lead,
  .privacy-collect__list,
  .privacy-collect__choice,
  .privacy-use__list,
  .privacy-disclosure__list,
  .privacy-disclosure__legal,
  .privacy-cookies__list,
  .privacy-cookies__analytics,
  .privacy-security__list,
  .privacy-security__retention,
  .privacy-rights__list,
  .privacy-rights__exercise,
  .privacy-children__list,
  .privacy-changes__list {
    max-width: 100%;
  }

  .privacy-use__callout {
    padding: var(--space-4);
  }
}