/* FAQ cards, shared by every page that has a FAQ (1 Nov 2026, Max: « do all of them, where needed »).
   Load: <link rel="stylesheet" href="/faq.css?v=20261101d"> (bump the v when this file changes).
   <div class="faq"> + <details name="faq"><summary><span>Q</span></summary><div class="ans"><p>A</p></div></details>
   Dark section: <div class="faq faq-dark">. Light section: class "faq-glow" on the section. Centred heading: "faq-head". */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;text-align:left}
.faq details{background:rgba(255,255,255,.72);border:1px solid rgba(142,162,255,.28);border-radius:16px;box-shadow:0 1px 2px rgba(11,12,18,.04),0 12px 32px -14px rgba(80,98,190,.24);transition:border-color .2s,background-color .2s}
.faq details:hover{border-color:rgba(142,162,255,.55)}
.faq details[open]{background:#fff;border-color:rgba(142,162,255,.55)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;font-family:'Outfit',Arial,Helvetica,sans-serif;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:#0B0C12}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;opacity:.45;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:focus-visible{outline:2px solid #8EA2FF;outline-offset:-2px;border-radius:16px}
.faq .ans{padding:0 26px 24px;animation:faq-in .25s ease}
.faq .ans p{margin:0;font-size:16px;line-height:1.6;font-weight:400;color:rgba(0,0,0,.62);max-width:none}
.faq .ans p+p{margin-top:10px}
.faq .ans a{color:#0B0C12;text-decoration:underline;text-underline-offset:3px}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
.faq.faq-dark details{background:rgba(244,245,250,.035);border-color:rgba(142,162,255,.22);box-shadow:0 14px 34px -18px rgba(142,162,255,.22)}
.faq.faq-dark details:hover{border-color:rgba(142,162,255,.45)}
.faq.faq-dark details[open]{background:rgba(244,245,250,.06);border-color:rgba(142,162,255,.45)}
.faq.faq-dark summary{color:#F4F5FA}
.faq.faq-dark .ans p{color:#d6d9e6}
.faq.faq-dark .ans a{color:#8EA2FF}
.faq-glow{background-image:radial-gradient(60% 45% at 50% 0%,rgba(142,162,255,.16),transparent 70%),radial-gradient(35% 40% at 88% 75%,rgba(142,162,255,.08),transparent 70%)}
.faq-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.faq-head .fs-label,.faq-head .label{justify-content:center;text-align:center}
.faq-head h2{text-wrap:balance}
.faq-glow .faq-head .label{color:#0B0C12}
@media (max-width:600px){.faq summary{padding:18px 20px;font-size:16px;min-height:81px}.faq .ans{padding:0 20px 20px}}
@media (prefers-reduced-motion:reduce){.faq .ans{animation:none}.faq summary::after{transition:none}}