Details / Summary — Native Accordion

<details>
    <summary>What\'s your refund policy?</summary>
    <p>You can cancel anytime. The Free plan stays available forever, so
       there\'s no risk in trying us out.</p>
</details>

<details open>           <!-- starts expanded -->
    <summary>Do you offer a discount for annual billing?</summary>
    <p>Yes — save ~20% by paying annually.</p>
</details>

<!-- FAQ section — group multiple <details> -->
<section class="faq">
    <h2>Frequently asked questions</h2>
    <details>
        <summary>How do I delete my account?</summary>
        <p>Settings → Danger Zone → Delete account.</p>
    </details>
    <details>
        <summary>Can I export my data?</summary>
        <p>Yes, JSON export in Settings → Data.</p>
    </details>
</section>

<style>
details { border-bottom: 1px solid #e5e7eb; padding: 12px 0; }
summary { font-weight: 600; cursor: pointer; list-style: none; padding-right: 24px; position: relative; }
summary::after { content: "+"; position: absolute; right: 0; transition: transform 0.2s; }
details[open] summary::after { transform: rotate(45deg); }
</style>