/* ============================================================
   FAQ — interactive: dark hero (particles) + search + filter chips
   + animated accordion. Depends on oxycell-global + oxycell-fx vars.
   ============================================================ */

/* FAQ hero uses the canonical .ox-pagehero layout (left-aligned to the rail,
   matching Financing / All-Chambers / Journal). Only the particle canvas and
   the left-aligned search field remain FAQ-specific. */
.faq-hero canvas[data-ox-particles] { z-index: 0; opacity: .8; }
.faq-search { position: relative; max-width: 520px; margin: clamp(28px, 3.5vw, 40px) 0 0; }
.faq-search svg { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: rgba(209,230,255,0.6); pointer-events: none; }
.faq-search input { width: 100%; box-sizing: border-box; padding: 18px 22px 18px 56px; border-radius: 999px;
  border: 1px solid rgba(143,193,231,0.32); background: rgba(255,255,255,0.06); color: #fff;
  font-family: var(--ox-sans); font-size: 16px; backdrop-filter: blur(6px); transition: border-color .25s ease, background .25s ease; }
.faq-search input::placeholder { color: rgba(209,230,255,0.5); }
.faq-search input:focus { outline: none; border-color: rgba(143,193,231,0.7); background: rgba(255,255,255,0.1); }

.faq-body { background: var(--ox-paper); }
.faq-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(36px, 5vw, 60px); }
.faq-chip { padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(19,28,40,0.16); background: #fff;
  font-family: var(--ox-sans); font-size: 14px; color: var(--ox-ink-muted); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.faq-chip:hover { transform: translateY(-1px); border-color: rgba(19,28,40,0.4); }
.faq-chip.is-active { background: var(--ox-ink); color: #fff; border-color: var(--ox-ink); }

.faq-list { max-width: 880px; margin: 0 auto; }
.faq-group { margin-bottom: clamp(36px, 4.5vw, 56px); }
.faq-group.is-hidden { display: none; }
.faq-group__label { font-family: var(--ox-sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ox-ink-muted); margin: 0 0 16px; }
body.faq-filtered .faq-group__label { display: none; }   /* hide section labels while filtering by a single category */

.faq-item { border-bottom: 1px solid rgba(19,28,40,0.12); }
.faq-item.is-hidden { display: none; }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ox-serif); font-weight: 400; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.3; color: var(--ox-ink); }
.faq-item__q span:first-child { transition: color .25s ease; }
.faq-item__q:hover span:first-child { color: rgb(176,30,36); }
.faq-item__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(19,28,40,0.2);
  display: flex; align-items: center; justify-content: center; color: var(--ox-ink); transition: transform .35s cubic-bezier(.22,.61,.36,1), background .25s ease, color .25s ease; }
.faq-item__icon svg { width: 17px; height: 17px; }
.faq-item__q[aria-expanded="true"] .faq-item__icon { transform: rotate(135deg); background: var(--ox-ink); color: #fff; border-color: var(--ox-ink); }
.faq-item__a { overflow: hidden; height: 0; transition: height .38s cubic-bezier(.22,.61,.36,1); }
.faq-item__a-inner { padding: 0 4px 26px; }
.faq-item__a p { margin: 0; max-width: 680px; font-family: var(--ox-sans); font-weight: 300; font-size: clamp(15px, 1.25vw, 17px); line-height: 1.7; color: var(--ox-ink-muted); }
.faq-item__a a { color: rgb(176,30,36); text-decoration: none; border-bottom: 1px solid rgba(176,30,36,0.3); }
.faq-item__a a:hover { border-color: rgb(176,30,36); }

.faq-empty { text-align: center; font-family: var(--ox-sans); font-weight: 300; color: var(--ox-ink-muted); padding: 30px 0; }
.faq-empty a { color: rgb(176,30,36); text-decoration: none; }
.faq-disclaimer { max-width: 880px; margin: clamp(40px,5vw,64px) auto 0; font-family: var(--ox-sans); font-weight: 300;
  font-size: 12px; line-height: 1.6; color: rgba(19,28,40,0.45); text-align: center; }

.faq-closing { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-item__a { transition: none; }
  .faq-item__icon { transition: none; }
}