.faq-landing-page {
  background-color: var(--color-surface-subtle);
}

.faq-landing-page__hero-stage {
  position: relative;
  z-index: 3;
}

.faq-landing-page__intro {
  width: min(100%, var(--layout-canvas-max-width));
  padding-inline: clamp(1.25rem, 5.25vw, 7.75rem);
  margin-inline: auto;
}

.faq-landing-page__intro .longform-content {
  padding-block: 2rem 0;
}

.faq-landing-page__intro .longform-rich-text {
  width: 100%;
  margin-inline: 0;
}

@media (min-width: 900px) {
  .faq-landing-page__intro .longform-content {
    padding-left: calc(18rem + clamp(3.5rem, 7vw, 7rem));
  }
}

@media (min-width: 1200px) {
  .faq-landing-page__intro .longform-content {
    padding-left: calc(22rem + clamp(3.5rem, 7vw, 7rem));
  }
}

.faq-landing-page__intro + .faq-directory-page {
  padding-top: 2rem;
}

.faq-landing-page__search-layer {
  display: none;
}

.faq-landing-page.is-search-enhanced .faq-landing-page__hero.gradient-hero {
  padding-bottom: 9.5rem;
}

.faq-landing-page.is-search-enhanced .faq-landing-page__search-layer {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 3.5rem;
  left: 0;
  display: block;
  width: min(100%, var(--layout-canvas-max-width));
  padding-inline: clamp(1.25rem, 5.25vw, 7.75rem);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .faq-landing-page.is-search-enhanced .faq-landing-page__hero.gradient-hero {
    padding-bottom: 10rem;
  }
}

@media (min-width: 600px) {
  .faq-landing-page.is-search-enhanced .faq-landing-page__search-layer {
    bottom: 4rem;
  }
}

@media (min-width: 1200px) {
  .faq-landing-page.is-search-enhanced .faq-landing-page__hero.gradient-hero {
    padding-bottom: 10.75rem;
  }
}

@media (min-width: 1200px) {
  .faq-landing-page.is-search-enhanced .faq-landing-page__search-layer {
    bottom: 4.75rem;
  }
}