/* Shared FAQ cards: a list of bordered cards, one <details> per question with a "+" that turns into "x" when open.
 * Used by Pricing and Solutions (Home keeps its own copy for now). Colours come from theme.css tokens, so it follows the
 * light/dark theme; side padding is --card-pad, the same value every card on the site uses.
 *
 *   <div class="faq">
 *     <details open><summary><h3>Question?</h3><span class="pl" aria-hidden="true">+</span></summary>
 *       <div class="ans"><p>Answer…</p></div></details>
 *     …
 *   </div>
 *
 * The answers stay in the HTML whether open or closed, so crawlers and no-JS visitors read all of them.
 */
.faq{margin:0 auto}
.faq details{border:1px solid var(--border-color);border-radius:11px;background:var(--bg-card);margin-bottom:8px;overflow:hidden}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding:16px var(--card-pad,22px);cursor:pointer;font-size:15px;font-weight:500;color:var(--text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:inherit;color:inherit}
.faq summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:11px}
.faq .pl{flex-shrink:0;width:22px;height:22px;border-radius:99px;border:1px solid var(--border-color);display:grid;place-items:center;color:var(--color-primary);font-size:13px;transition:transform .2s}
.faq details[open] .pl{transform:rotate(45deg)}
.faq .ans{padding:0 var(--card-pad,22px) 18px;max-width:90ch;color:var(--text-muted);font-size:14px;line-height:1.6}   /* 90ch: readable lines on a wide page */
.faq .ans p{margin:0 0 .6em;color:inherit;font-size:inherit;max-width:none}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{display:inline-block;padding:4px 0;color:var(--color-primary);text-decoration:underline;text-underline-offset:3px}
[data-theme="light"] .faq .ans a{color:var(--color-primary-dark)}
@media (prefers-reduced-motion:reduce){.faq .pl{transition:none}}