Responsive FAQ Accordion Section

<section class="relative w-full">
  <div class="max-w-7xl mr-auto ml-auto pt-14 pr-6 pb-14 pl-6">
    <div class="max-w-2xl">
      <h2 class="text-2xl sm:text-3xl font-semibold tracking-tight">Frequently asked questions</h2>
      <p class="mt-2 text-neutral-300/90">Can’t find what you’re looking for? Reach out to our team.</p>
    </div>

    <div class="mt-8 grid gap-4 md:grid-cols-2">
      <details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
        <summary class="cursor-pointer list-none flex items-center justify-between">
          <span class="text-sm font-medium">How does the free trial work?</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </summary>
        <p class="mt-3 text-sm text-neutral-300">
          Start with full access for 14 days—no credit card required. Upgrade anytime and keep your projects intact.
        </p>
      </details>

      <details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
        <summary class="cursor-pointer list-none flex items-center justify-between">
          <span class="text-sm font-medium">Do you support custom domains?</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </summary>
        <p class="mt-3 text-sm text-neutral-300">
          Yes. Add and verify your domain in minutes. Automatic SSL is included.
        </p>
      </details>

      <details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
        <summary class="cursor-pointer list-none flex items-center justify-between">
          <span class="text-sm font-medium">What payment methods do you accept?</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </summary>
        <p class="mt-3 text-sm text-neutral-300">
          We accept major credit cards and invoices for Enterprise plans.
        </p>
      </details>

      <details class="rounded-2xl bg-white/5 ring-1 ring-white/10 p-5">
        <summary class="cursor-pointer list-none flex items-center justify-between">
          <span class="text-sm font-medium">Is there an on-prem option?</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-400"
            style="stroke-width:1.5;">
            <path d="m6 9 6 6 6-6" class=""></path>
          </svg>
        </summary>
        <p class="mt-3 text-sm text-neutral-300">
          Yes. Contact sales for deployment options tailored to your security requirements.
        </p>
      </details>
    </div>
  </div>
</section>