/*
 * FAQ page -- continuous document-flow layout (same base pattern as
 * contact.css/about.css: reuses the site's nav/hotline/footer and
 * style.css's own .faq-list/.faq-item components directly). Only the
 * scaffolding and the topic-jump component unique to this page live here.
 */
html, body.fpv-body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav { position: fixed; }
.fpv-main { display: block; }

.fpv-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.fpv-header { max-width: 42rem; margin: 0 auto; text-align: center; }

.fpv-section { padding: 4rem 0; position: relative; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--pc-ease), transform 0.8s var(--pc-ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* --- Hero -- text over the shared bg-fixed wave background, no photo. --- */
.fpv-hero {
  position: relative; min-height: 52vh; min-height: 52svh;
  display: flex; align-items: center; justify-content: center;
  padding: 9rem 1.5rem 3rem; text-align: center;
}
.fpv-hero__content { position: relative; z-index: 2; max-width: 40rem; }
.fpv-hero__content .copy { margin-left: auto; margin-right: auto; }

/* --- Topic jump nav -- pill links to each FAQ section below. --- */
.faq-toc {
  margin-top: 2.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  max-width: 54rem; margin-left: auto; margin-right: auto;
}
.faq-toc a {
  display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--pc-ink); text-decoration: none;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px); transition: background-color 0.25s ease, color 0.25s ease;
}
.faq-toc a:hover { background: var(--pc-baby-blue-deep); color: #fff; }

/* --- Topic sections -- alternating faint panel background so topic after
   topic still reads as distinct groups while scrolling. Alternation is a
   modifier class (not :nth-child) since sibling position among <main>'s
   children includes the hero/TOC/final-CTA sections too. --- */
.faq-topic { scroll-margin-top: 6rem; }
.faq-topic--alt {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.35) 4rem,
    rgba(255, 255, 255, 0.35) calc(100% - 4rem),
    rgba(255, 255, 255, 0) 100%
  );
}
.faq-topic .fpv-header { margin-bottom: 0; }