FAQ Accordion

<section class="ws-faq bg-[var(--ws-faq-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6">
    <div class="mb-12 text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-faq-text)] sm:text-4xl">Frequently asked questions</h2>
      <p class="mx-auto mt-4 max-w-xl text-lg text-[var(--ws-faq-text-soft)]">Everything you need to know to get started.</p>
    </div>

    <div class="divide-y divide-[var(--ws-faq-border)] border-y border-[var(--ws-faq-border)]">
      <!-- Open by default to show expanded state -->
      <details class="group" open>
        <summary class="flex cursor-pointer items-center justify-between gap-4 py-5 text-left font-semibold text-[var(--ws-faq-text)] transition-colors hover:text-[var(--ws-color-primary)]">
          What is included in the free plan?
          <svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
        </summary>
        <p class="pb-5 leading-relaxed text-[var(--ws-faq-text-soft)]">The free plan includes access to all core features, up to 3 projects, and community support. No credit card required to get started.</p>
      </details>

      <details class="group">
        <summary class="flex cursor-pointer items-center justify-between gap-4 py-5 text-left font-semibold text-[var(--ws-faq-text)] transition-colors hover:text-[var(--ws-color-primary)]">
          How do I upgrade my account?
          <svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
        </summary>
        <p class="pb-5 leading-relaxed text-[var(--ws-faq-text-soft)]">Navigate to your account settings and select the plan that fits your needs. Upgrades take effect immediately and you'll only be charged the prorated difference.</p>
      </details>

      <details class="group">
        <summary class="flex cursor-pointer items-center justify-between gap-4 py-5 text-left font-semibold text-[var(--ws-faq-text)] transition-colors hover:text-[var(--ws-color-primary)]">
          Can I cancel my subscription at any time?
          <svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
        </summary>
        <p class="pb-5 leading-relaxed text-[var(--ws-faq-text-soft)]">Yes, you can cancel anytime from your account settings. Your access continues until the end of the current billing period. No cancellation fees apply.</p>
      </details>

      <details class="group">
        <summary class="flex cursor-pointer items-center justify-between gap-4 py-5 text-left font-semibold text-[var(--ws-faq-text)] transition-colors hover:text-[var(--ws-color-primary)]">
          Is my data secure?
          <svg class="h-5 w-5 shrink-0 text-[var(--ws-faq-icon)] transition-transform duration-200 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
        </summary>
        <p class="pb-5 leading-relaxed text-[var(--ws-faq-text-soft)]">All data is encrypted at rest and in transit using AES-256 and TLS 1.3. We conduct regular third-party security audits.</p>
      </details>
    </div>
  </div>
</section>