/* ==================================================================
   FAQs — dark ink accordion, numbered hairline rows.
   Mirrors the Why FBF ledger language.
   ================================================================== */

.faq {
  position: relative; overflow: hidden;
  background: var(--surface-page, #f6f3ec);
  padding: 104px 80px 108px; color: var(--ink-900, #0d0f0f); font-family: var(--font-sans);
}
.faq-inner {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 430px 1fr; gap: 88px; align-items: start;
}
.faq-left { padding-top: 19px; }

.faq-eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-800, #23282a); font-weight: 500;
}
.faq-title {
  margin: 18px 0 0; font-size: 46px; font-weight: 900; line-height: 1.06;
  letter-spacing: -0.025em; color: var(--ink-900, #0d0f0f); text-wrap: balance;
}
.faq-title mark {
  background: var(--gradient-signature, linear-gradient(90deg, #ff43a4, #ffa63e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.faq-lead {
  margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; font-weight: 500;
  color: var(--text-secondary, #4c5252); text-wrap: pretty;
}
.faq-ctas { margin-top: 32px; }

/* Accordion ----------------------------------------------------------- */
.faq-list { list-style: none; margin: 6px 0 0; padding: 0; }
.faq-row { border-top: 1px solid var(--border-default, #e2ddd0); }
.faq-list .faq-row:last-child { border-bottom: 1px solid var(--border-default, #e2ddd0); }

.faq-q {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: baseline;
  width: 100%; padding: 19px 8px;
  color: var(--ink-900, #0d0f0f); font-family: var(--font-sans);
}
.faq-q i {
  font-style: normal; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; color: var(--green-600, #16a97a);
}
.faq-q b, .faq-q .faq-q-text {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.35; margin: 0;
}

/* Hover accordion reveal (matches Why Five by Five) ------------------- */
.faq-reveal {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  transition: grid-template-rows 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.faq-row:hover .faq-reveal,
.faq-row:focus-within .faq-reveal { grid-template-rows: 1fr; }
.faq-reveal span {
  display: block; min-height: 0; margin: 0; max-width: 560px;
  font-size: 14.5px; line-height: 1.55; font-weight: 500;
  color: var(--text-secondary, #4c5252); text-wrap: pretty;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 220ms var(--ease-out, ease) 60ms,
              transform 260ms var(--ease-out, ease) 60ms,
              padding-top 280ms var(--ease-out, cubic-bezier(0.2,0,0,1));
}
.faq-row:hover .faq-reveal span,
.faq-row:focus-within .faq-reveal span {
  opacity: 1; transform: translateY(0); padding-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-reveal, .faq-reveal span { transition: none; }
}