/* FREQUENTLY ASKED QUESTIONS  (#gfaq)
   Ported verbatim from ppc-decide-lab-q8k/_parts/_source-reference.html
   on 2026-09-08. The ONLY edit is the token bridge: --gold/--font-display/
   --font-body/--header-h now resolve to the page's own --accent/--sans/
   --barh, and --text-muted/--accent-deep are renamed --pk-*, declared in
   bridge.css. Do not copy these rules into the page. */
/* ════════════════════════════════════════════════════
   FREQUENTLY ASKED QUESTIONS  (gfaq-*)
   The source section's UI, rebuilt on this site's tokens.
   Every rule is scoped to #gfaq and every class is gfaq-
   prefixed, so nothing here can reach the pricing section
   and nothing there can reach this.
   ════════════════════════════════════════════════════ */

#gfaq {
  /* white ground — the pricing section above sits on --mist, so the
     boundary between the two reads without needing a divider */
  background: var(--paper);
  padding: clamp(44px, 5vw, 76px) 0 clamp(52px, 5.6vw, 90px);
  scroll-margin-top: var(--barh);
}
#gfaq .gfaq-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The title sits in normal flow; the box below is pulled up under it,
   so the title's own ground cuts a notch out of the box's top border.
   Its background must equal the section ground or the notch fills in. */
#gfaq .gfaq-title {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 0 20px 0 16px;
  background: var(--paper);
  font-size: clamp(19px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: 1.2;
  color: var(--navy);
}
#gfaq .gfaq-box {
  position: relative;
  margin-top: -30px;
  padding: 20px 20px 20px 0;
  border: 10px solid var(--line-b);
  border-left: 0;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* Fixed-height inner scroll, scrollbar hidden — as on the source */
#gfaq .gfaq-scroll {
  height: 400px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#gfaq .gfaq-scroll::-webkit-scrollbar { display: none; }

/* One card per question */
#gfaq .gfaq-item {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
}
#gfaq .gfaq-item:first-child { margin-top: 0; }
#gfaq .gfaq-item:last-child  { margin-bottom: 0; }

#gfaq .gfaq-q {
  position: relative;
  display: flex;
  align-items: stretch;      /* the Q square fills the row height, so it
                                always meets the A square below it */
  width: 100%;
  min-height: 40px;
  padding: 0 40px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.015em;
  line-height: 1.4;
  color: var(--navy);
}
#gfaq .gfaq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Q. and A. badges — square, as on the source; the label itself takes
   this site's mono, which is what it uses for every small marker */
#gfaq .gfaq-qb {
  flex: none;
  min-width: 40px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E7ECF3;
  color: var(--navy);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 700;
  line-height: 1;
}
#gfaq .gfaq-t {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 8px 0;
}

/* ⊕ / ⊖ — the source used a Font Awesome circle glyph */
#gfaq .gfaq-m {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--pk-muted);
}
#gfaq .gfaq-m::before { content: "+"; }
#gfaq .gfaq-item.is-open .gfaq-m { color: var(--accent); }
#gfaq .gfaq-item.is-open .gfaq-m::before { content: "\2212"; }

/* 0fr → 1fr opens to the answer's natural height, so a long answer
   (Q.17 runs to two lists) can never be clipped by a max-height guess */
#gfaq .gfaq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.22,1,0.36,1);
}
#gfaq .gfaq-item.is-open .gfaq-a { grid-template-rows: 1fr; }
#gfaq .gfaq-ai { overflow: hidden; }
#gfaq .gfaq-ai-in {
  display: flex;
  gap: 10px;             /* == .gfaq-qb margin-right, so the answer body
                            starts on the same x as the question text */
  padding-top: 0;        /* no gap: the A square meets the Q square */
}
#gfaq .gfaq-ab {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(26,115,232,0.28);
  color: var(--pk-accent-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
#gfaq .gfaq-body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
#gfaq .gfaq-body p { margin: 0 0 6px; }
#gfaq .gfaq-body p:last-child { margin-bottom: 0; }
#gfaq .gfaq-body b { font-weight: 700; color: var(--navy); }
#gfaq .gfaq-body ul {
  list-style: disc;
  margin: 0 0 6px;
  padding: 0 0 0 24px;
}
#gfaq .gfaq-body ul:last-child { margin-bottom: 0; }
#gfaq .gfaq-body li { margin-bottom: 4px; }
#gfaq .gfaq-body li::marker { color: var(--ink-4); }

@media (max-width: 640px) {
  #gfaq .gfaq-wrap { padding: 0 18px; }
  #gfaq .gfaq-title { padding: 0 12px; font-size: 17px; }  /* short enough that the notch still shows border either side */
  #gfaq .gfaq-box { padding-right: 6px; border-width: 7px; border-left: 0; }
  #gfaq .gfaq-item { padding: 9px; }
  #gfaq .gfaq-q { font-size: 14px; padding-right: 34px; }
  #gfaq .gfaq-qb { min-width: 36px; margin-right: 9px; }
  #gfaq .gfaq-ab { width: 36px; height: 36px; }
  #gfaq .gfaq-ai-in { gap: 9px; }
  #gfaq .gfaq-body { font-size: 13px; }
  #gfaq .gfaq-m { font-size: 18px; right: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  #gfaq .gfaq-a { transition: none; }
}