/* ============================================================
   FAQ — page-only warm/premium theme
   Same pattern as .pricing-main / .why-main / .home-main: shared
   design tokens are re-declared inside a page-only wrapper class,
   so the existing accordion (already dividers + transparent bg +
   plus/minus indicator + native <details>) re-themes automatically.
   .faq-main only exists on this page, so nothing here reaches any
   other page.
   ============================================================ */

.faq-main {
  --ink:     #171717;
  --body:    #686866;
  --muted:   #686866;
  --muted-2: #686866;
  --line:    #D8D6CF;
  --line-2:  #D8D6CF;
  --accent:  #203D68;

  --wr-bone:     #F5F2EA;
  --wr-grey:     #ECEBE7;
  --wr-offwhite: #FCFBF7;
  --wr-dark:     #111211;

  /* spacing rhythm — desktop ~64-80px between bands, mobile ~48-56px */
  --wr-gap:  clamp(64px, 7vw, 80px);
  --wr-edge: clamp(72px, 8vw, 96px);
}
@media (max-width: 620px) {
  .faq-main { --wr-gap: 48px; --wr-edge: 56px; }
}

/* ---------- Bands ---------- */
.faq-band { padding-block: var(--wr-gap); }
.faq-band--bone     { background: var(--wr-bone); }
.faq-band--offwhite { background: var(--wr-offwhite); }
.faq-band--first    { padding-top: var(--wr-edge); }

.faq-main .eyebrow { color: var(--accent); }
.faq-main .section-sub { color: var(--body); }

/* ---------- Accordion accents ---------- */
.faq-item { --fc: var(--accent); }
.faq-policy { background: var(--wr-grey); }

/* ---------- Support CTA ---------- */
.faq-support.faq-support { background: var(--wr-dark); padding-block: clamp(56px, 7vw, 80px); }
.faq-support .container { max-width: 620px; text-align: center; }
.faq-support h2 { color: var(--wr-offwhite); }
.faq-support p { color: var(--on-dark-muted); }
.faq-support .btn--yellow { background: var(--wr-offwhite); color: var(--wr-dark); }
.faq-support .btn--yellow:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .faq-main .faq-q .plus::after,
  .faq-main .faq-ic { transition: none; }
}