Pricing + FAQ

<!-- The FAQ uses native <details>/<summary>: zero JavaScript, keyboard-operable
     for free, and the chevron rotates via group-open. The price panel and the
     FAQ stack to one column below lg. -->
<section class="mx-auto w-full max-w-4xl px-4" aria-labelledby="faq-combined-heading">
  <h2 class="sr-only" id="faq-combined-heading">Pricing and frequently asked questions</h2>
  <div class="grid gap-6 lg:grid-cols-2 lg:items-start">
    <article class="rounded-2xl border-2 border-blue-600 bg-white p-6 dark:border-blue-500 dark:bg-gray-900">
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Pro</h3>
      <p class="mt-3 flex items-baseline gap-1"><span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">$16</span><span class="text-sm text-gray-600 dark:text-gray-400">/month</span></p>
      <ul class="my-5 grid gap-2.5">
        <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Unlimited projects</li>
        <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>All integrations</li>
        <li class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-300"><svg class="mt-0.5 h-4 w-4 flex-none text-blue-600 dark:text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Priority support</li>
      </ul>
      <a href="#" class="block rounded-lg bg-blue-600 px-4 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Start free trial</a>
    </article>
    <div>
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Frequently asked</h3>
      <ul class="mt-3 grid gap-2">
        <li>
          <details class="group rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-2 text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-100">Is there a free trial?<svg class="h-4 w-4 flex-none text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none dark:text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" /></svg></summary>
            <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Yes. 14 days, no card required. Cancel any time before it ends and you are not charged.</p>
          </details>
        </li>
        <li>
          <details class="group rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-2 text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-100">Can I change plans later?<svg class="h-4 w-4 flex-none text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none dark:text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" /></svg></summary>
            <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Upgrade or downgrade whenever you like. Changes are prorated to the day.</p>
          </details>
        </li>
        <li>
          <details class="group rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-2 text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-100">Do you offer refunds?<svg class="h-4 w-4 flex-none text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none dark:text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z" /></svg></summary>
            <p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">We refund annual plans in full within 30 days of purchase, no questions asked.</p>
          </details>
        </li>
      </ul>
    </div>
  </div>
</section>