/* fx-faq · animated accordion. Pair with fx-faq.js. */
.fx-faq {
  --o: var(--fx-o, #ff6a00); --ink: var(--fx-ink, #ff6a00); --txt: var(--fx-text, #f7f4f0); --mut: var(--fx-muted, #bcb5ae);
  --ln: var(--fx-line, rgba(255,255,255,.085)); --ln2: var(--fx-line-2, rgba(255,255,255,.16));
  display: grid; gap: 10px; color: var(--txt); font-family: var(--fx-font, inherit);
}
.fx-faq details {
  position: relative; border-radius: 20px; background: rgba(255,255,255,.03); border: 1px solid var(--ln);
  transition: background 320ms var(--fx-ease-out, ease), border-color 200ms, box-shadow 320ms;
}
.fx-faq details:hover { border-color: var(--ln2); }
.fx-faq details[open]:not(.is-closing) { background: rgba(255,255,255,.05); border-color: rgba(255,106,0,.35); box-shadow: 0 24px 50px -36px rgba(255,106,0,.5); }
.fx-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px;
  min-block-size: 60px; padding: 16px 20px; font-weight: 600; font-size: 1.02rem; line-height: 1.45; border-radius: 20px;
}
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary:focus-visible { outline: 2px solid var(--o); outline-offset: 2px; }
.fx-faq__ic {
  position: relative; flex: none; margin-inline-start: auto; inline-size: 34px; block-size: 34px; border-radius: 50%;
  border: 1px solid var(--ln2); transition: transform 460ms var(--fx-spring, cubic-bezier(.34,1.56,.64,1)), background 300ms, border-color 300ms;
}
.fx-faq__ic::before, .fx-faq__ic::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 12px; block-size: 2px; margin: -1px 0 0 -6px; border-radius: 2px;
  background: currentColor; transition: transform 460ms var(--fx-spring, cubic-bezier(.34,1.56,.64,1));
}
.fx-faq__ic::after { transform: rotate(90deg); }
.fx-faq summary:hover .fx-faq__ic { border-color: var(--o); }
.fx-faq details[open]:not(.is-closing) .fx-faq__ic { transform: rotate(180deg); background: var(--o); border-color: var(--o); color: #0a0a0a; }
.fx-faq details[open]:not(.is-closing) .fx-faq__ic::after { transform: rotate(180deg); }
.fx-faq__a { overflow: hidden; }
.fx-faq__a > :first-child { margin-block-start: 0; }
.fx-faq__a > * { padding-inline: 20px; padding-inline-end: 70px; color: var(--mut); line-height: 1.75; }
.fx-faq__a > :last-child { padding-block-end: 20px; margin-block-end: 0; }
.fx-faq__a a { color: var(--ink); }
@media (max-width: 560px) { .fx-faq__a > * { padding-inline-end: 20px; } }
@media (prefers-color-scheme: light) {
  .fx-faq { --ink: #b84a00; --txt: #14110e; --mut: #5f5a55; --ln: rgba(0,0,0,.08); --ln2: rgba(0,0,0,.14); }
  .fx-faq details { background: rgba(255,255,255,.7); }
  .fx-faq details[open]:not(.is-closing) { background: #fff; border-color: rgba(184,74,0,.35); box-shadow: 0 20px 40px -30px rgba(60,30,0,.3); }
}
@media (prefers-reduced-motion: reduce) { .fx-faq *, .fx-faq *::before, .fx-faq *::after { transition: none !important; } }
