Smooth FAQ Accordion

Build an FAQ accordion with native <details>/<summary>: thin dividers, bold questions, a '+' icon that rotates 45° to an '×' when open, and the answer height animating open smoothly (use the ::details-content / interpolate-size approach with a JS fallback). Only one item open at a time. Include FAQPage JSON-LD for SEO.

<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:#fff;color:#111;padding:28px 40px;height:100vh}h2{margin-bottom:14px}details{border-bottom:1px solid #eee;padding:14px 0}summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}
summary::after{content:'+';transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}details p{color:#666;font-size:14px;margin-top:8px}</style>
<h2>Questions</h2><details open><summary>Can I use these sections commercially?</summary><p>Yes. Every section is original and free to use in your own or client projects.</p></details>
<details><summary>Which tools do they work with?</summary><p>Claude Code, Cursor, v0, Lovable, Bolt, or plain HTML.</p></details><details><summary>Do I need an account?</summary><p>Sign in with Google to save sections to your library.</p></details>