/* ============================================================
   PRIVACY POLICY
============================================================ */


/* ============================================================
   PAGE HERO
============================================================ */

.privacy-page-hero {
  position: relative;
  padding: 9rem 0 5rem;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(255, 255, 255, 0.58),
      transparent 25%
    ),
    linear-gradient(
      140deg,
      #edf3f1 0%,
      #d0dfe0 46%,
      #86a5aa 100%
    );
}

.privacy-page-hero::before {
  position: absolute;
  top: -12rem;
  right: -10rem;

  width: 30rem;
  height: 30rem;

  border: 0.0625rem solid rgba(31, 52, 57, 0.12);
  border-radius: 50%;

  box-shadow:
    0 0 0 3rem rgba(255, 255, 255, 0.05),
    0 0 0 6rem rgba(255, 255, 255, 0.04);

  content: "";
  pointer-events: none;
}

.privacy-page-hero-inner {
  position: relative;
  z-index: 1;

  max-width: 48rem;

  text-align: center;
}

.privacy-page-hero h1 {
  margin-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: clamp(3.75rem, 14vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.privacy-page-hero-inner > p:not(.eyebrow) {
  max-width: 35rem;
  margin: 0 auto;

  font-size: 0.9375rem;
}

.privacy-updated {
  display: inline-block;
  margin-top: 1.25rem;

  color: var(--color-gray);

  font-size: 0.6875rem;
  font-weight: 600;
}


/* Page hero: tablet */

@media (min-width: 48rem) {
  .privacy-page-hero {
    padding: 11rem 0 6rem;
  }

  .privacy-page-hero h1 {
    font-size: 5.75rem;
  }

  .privacy-page-hero-inner > p:not(.eyebrow) {
    font-size: 1rem;
  }
}


/* Page hero: desktop */

@media (min-width: 64rem) {
  .privacy-page-hero {
    padding: 11rem 0 6.5rem;
  }

  .privacy-page-hero h1 {
    font-size: 6.5rem;
  }
}


/* ============================================================
   POLICY LAYOUT
============================================================ */

.privacy-content {
  background-color: var(--color-background);
}

.privacy-layout {
  display: grid;
  gap: 3rem;
}

.privacy-navigation {
  padding: 1.5rem;

  border-left: 0.1875rem solid var(--color-primary);

  background-color: var(--color-background-alt);
}

.privacy-navigation h2 {
  margin-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: 1.5rem;
}

.privacy-navigation nav {
  display: grid;
  gap: 0.25rem;
}

.privacy-navigation a {
  display: block;
  padding: 0.4rem 0;

  color: var(--color-black);

  font-size: 0.6875rem;

  transition:
    color var(--transition),
    transform var(--transition);
}

.privacy-navigation a:hover {
  color: var(--color-primary);

  transform: translateX(0.2rem);
}


/* Policy layout: tablet */

@media (min-width: 48rem) {
  .privacy-layout {
    grid-template-columns: 0.7fr 2fr;
    gap: 4rem;
    align-items: start;
  }

  .privacy-navigation {
    position: sticky;
    top: 8rem;
  }
}


/* Policy layout: desktop */

@media (min-width: 64rem) {
  .privacy-layout {
    max-width: 76rem;
    grid-template-columns: 0.6fr 2fr;
    gap: 6rem;
  }
}


/* ============================================================
   POLICY ARTICLE
============================================================ */

.privacy-article {
  min-width: 0;
}

.privacy-article section {
  padding-bottom: 3rem;
  scroll-margin-top: 7rem;
}

.privacy-article section + section {
  padding-top: 3rem;

  border-top: 0.0625rem solid var(--color-border);
}

.privacy-section-number {
  margin-bottom: 0.5rem;

  color: var(--color-primary);

  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.privacy-article h2 {
  margin-bottom: 1rem;

  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1;
}

.privacy-article p {
  margin-bottom: 0.875rem;

  color: var(--color-gray);

  font-size: 0.8125rem;
}

.privacy-article ul {
  display: grid;
  margin: 1rem 0 1.25rem;
  gap: 0.625rem;
}

.privacy-article li {
  position: relative;

  padding-left: 1.5rem;

  color: var(--color-gray);

  font-size: 0.8125rem;
}

.privacy-article li::before {
  position: absolute;
  top: 0.7em;
  left: 0;

  width: 0.4rem;
  height: 0.4rem;

  border-radius: 50%;

  background-color: var(--color-primary);

  content: "";
  transform: translateY(-50%);
}


/* Policy article: tablet */

@media (min-width: 48rem) {
  .privacy-article section {
    scroll-margin-top: 8rem;
  }

  .privacy-article h2 {
    font-size: 2.5rem;
  }

  .privacy-article p,
  .privacy-article li {
    font-size: 0.875rem;
  }
}


/* Policy article: desktop */

@media (min-width: 64rem) {
  .privacy-article h2 {
    font-size: 2.75rem;
  }

  .privacy-article p,
  .privacy-article li {
    font-size: 0.9375rem;
  }
}


/* ============================================================
   PRIVACY CONTACT INFORMATION
============================================================ */

.privacy-contact-information {
  display: flex;
  margin-top: 1.5rem;
  padding: 1.5rem;
  flex-direction: column;
  gap: 0.3rem;

  border-left: 0.1875rem solid var(--color-primary);

  background-color: var(--color-background-alt);

  font-style: normal;
}

.privacy-contact-information strong {
  margin-bottom: 0.25rem;

  font-family: var(--font-heading);
  font-size: 1.25rem;
}

.privacy-contact-information span,
.privacy-contact-information a {
  color: var(--color-black);

  font-size: 0.8125rem;
}

.privacy-contact-information a {
  width: fit-content;

  transition: color var(--transition);
}

.privacy-contact-information a:hover {
  color: var(--color-primary);
}


/* Privacy contact: tablet */

@media (min-width: 48rem) {
  .privacy-contact-information {
    padding: 2rem;
  }

  .privacy-contact-information strong {
    font-size: 1.5rem;
  }
}


/* Privacy contact: desktop */

@media (min-width: 64rem) {
  .privacy-contact-information span,
  .privacy-contact-information a {
    font-size: 0.875rem;
  }
}


/* ============================================================
   CONTACT CTA
============================================================ */

.privacy-cta {
  padding: 4rem 0;

  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(255, 255, 255, 0.55),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #dce9e8 0%,
      #bdd3d5 100%
    );
}

.privacy-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;

  text-align: center;
}

.privacy-cta h2 {
  margin-bottom: 0.75rem;

  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  line-height: 1;
}

.privacy-cta-inner > div > p:not(.eyebrow) {
  max-width: 36rem;
  margin: 0 auto;

  font-size: 0.8125rem;
}


/* Contact CTA: tablet */

@media (min-width: 48rem) {
  .privacy-cta {
    padding: 4.5rem 0;
  }

  .privacy-cta h2 {
    font-size: 3.5rem;
  }

  .privacy-cta-inner > div > p:not(.eyebrow) {
    font-size: 0.875rem;
  }
}


/* Contact CTA: desktop */

@media (min-width: 64rem) {
  .privacy-cta-inner {
    flex-direction: row;
    justify-content: space-between;

    text-align: left;
  }

  .privacy-cta-inner > div > p:not(.eyebrow) {
    margin: 0;
  }
}