/* =============================================================
   Zoomi · faq.css — FAQ page layout on top of the .faq primitive
   defined in home-v2.css. Adds the page hero, group rhythm, and
   the closing CTA. Token-driven only.
   ============================================================= */

.faq-hero {
  padding: var(--s-3xl) var(--page-gutter) var(--s-2xl);
  text-align: center;
}
.faq-hero__eyebrow { margin-bottom: var(--s-md); }
.faq-hero__h1 {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  margin: 0 auto var(--s-md);
  color: var(--zoomi-ink);
  max-width: 22ch;
}
.faq-hero__sub {
  font-size: var(--t-body-lg);
  color: var(--zoomi-body);
  margin: 0 auto;
  max-width: 56ch;
}

.faq-page__wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--page-gutter) var(--s-4xl);
}

.faq-page__group {
  padding-top: var(--s-3xl);
}
.faq-page__group--sep {
  border-top: 1px solid var(--zoomi-hair);
  margin-top: var(--s-3xl);
}
.faq-page__head {
  margin-bottom: var(--s-xl);
  text-align: left;
}
.faq-page__head .eyebrow {
  display: inline-block;
  margin-bottom: var(--s-xs);
}
.faq-page__h2 {
  font-family: var(--font-heading);
  font-size: var(--t-headline-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
  margin: 0;
}

/* The .faq + .faq__item primitives come from home-v2.css. We add a tiny
   answer-wrap class so the open content has comfortable rhythm. */
.faq__answer p {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}
.faq__answer a {
  color: var(--zoomi-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =============================================================
   FAQ closing CTA — ink panel echoing .final-cta but flatter.
   ============================================================= */
.faq-page__cta {
  background: var(--zoomi-ink);
  color: var(--zoomi-cta-text);
  padding: var(--s-4xl) var(--page-gutter);
  text-align: center;
}
.faq-page__cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.faq-page__cta .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}
.faq-page__cta-h {
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  color: var(--zoomi-cta-text);
  margin: var(--s-md) 0 var(--s-md);
}
.faq-page__cta-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-body-lg);
  margin: 0 0 var(--s-xl);
}
.faq-page__cta-actions {
  display: flex;
  gap: var(--s-md);
  justify-content: center;
  flex-wrap: wrap;
}
.faq-page__cta .zoomi-btn--ghost {
  background: rgba(255, 255, 255, 0.10);
  color: var(--zoomi-cta-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.faq-page__cta .zoomi-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 720px) {
  .faq-page__cta-h { font-size: var(--t-headline-lg); }
}
@media (max-width: 520px) {
  .faq-hero__h1 { font-size: var(--t-headline-lg); }
  .faq-page__h2 { font-size: var(--t-headline-md); }
}