/* FAQ: 3D fold answers, turning "?" tiles, drifting question marks (pairs with faq-fx.js; founder 2026-10-09). */
.page-header.sfx-scene-host { padding-bottom: 30px; }
.fqx-list { perspective: 1400px; }
.fqx-list .faq-item summary { gap: 14px; }
.fqx-tile { position: relative; flex: none; width: 30px; height: 30px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.fqx-tile i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 1rem; backface-visibility: hidden;
  color: #fff; background: linear-gradient(135deg, #1f7bff, #8b5cf6); box-shadow: 0 6px 16px -6px rgba(56, 182, 255, .7); }
.fqx-tile i + i { transform: rotateY(180deg); background: linear-gradient(135deg, #10b981, #38b6ff); }
.fqx-tile .sfx-ic { width: 16px; height: 16px; }
.fqx-list .faq-item[open] .fqx-tile { transform: rotateY(180deg); }
.fqx-list .faq-item summary:hover .fqx-tile { transform: rotateY(-25deg) rotateX(15deg); }
.fqx-list .faq-item[open] summary:hover .fqx-tile { transform: rotateY(155deg) rotateX(15deg); }
/* summary is a flex row with the question text as a bare text node: keep the text next to the tile */
.fqx-list .faq-item summary { justify-content: flex-start; }
.fqx-list .faq-item summary .chev { margin-left: auto; }

/* The answer swings down like a page. */
html.sfx-on .fqx-list .faq-item[open] .faq-body { transform-origin: 50% 0; animation: fqx-fold .6s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes fqx-fold { from { transform: perspective(800px) rotateX(-88deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.fqx-list .faq-item { transition: border-color .3s, box-shadow .35s, transform .5s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.fqx-list .faq-item[open] { border-color: rgba(120, 160, 255, .5); box-shadow: 0 0 0 1px rgba(56, 182, 255, .18), 0 24px 50px -28px rgba(56, 182, 255, .6); }
.fqx-list .faq-item:not([open]):hover { transform: translateY(-2px); }

/* Questions rise in with a slight flip. */
html.sfx-on .fqx-list > .faq-item.reveal { transform-origin: 50% 0; transform: rotateX(-30deg) translateY(20px);
  transition: transform .8s cubic-bezier(.2, .9, .3, 1.1) calc(var(--fqx-i, 0) * 70ms), opacity .6s ease calc(var(--fqx-i, 0) * 70ms), border-color .3s, box-shadow .35s; }
html.sfx-on .fqx-list > .faq-item.reveal.is-visible { transform: none; }
html.sfx-on .fqx-list > .faq-item.reveal.is-visible:not([open]):hover { transform: translateY(-2px); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html .fqx-list > .faq-item.reveal, html .fqx-list .faq-item[open] .faq-body { transform: none !important; animation: none !important; }
  .fqx-tile { transition: none; }
}