Two-column FAQ

Create a two-column FAQ layout with Tailwind CSS: on the left a sticky heading block with a title, a short intro, and a "Contact support" link; on the right a stacked list of question/answer pairs (static, no accordion). Stack to one column on mobile.

<section class="mx-auto grid max-w-5xl gap-12 px-6 py-16 lg:grid-cols-3">
  <div class="lg:sticky lg:top-24 lg:self-start">
    <h2 class="text-2xl font-semibold text-neutral-900">Questions &amp; answers</h2>
    <p class="mt-2 text-sm text-neutral-500">Everything you need to know before getting started.</p>
    <a href="#" class="mt-4 inline-block text-sm font-medium text-neutral-900 hover:underline">Still stuck? Contact support →</a>
  </div>
  <div class="space-y-8 lg:col-span-2">
    <div>
      <h3 class="text-sm font-medium text-neutral-900">What payment methods do you accept?</h3>
      <p class="mt-2 text-sm text-neutral-500">All major credit cards, and invoicing on annual plans.</p>
    </div>
    <div>
      <h3 class="text-sm font-medium text-neutral-900">Can I change plans later?</h3>
      <p class="mt-2 text-sm text-neutral-500">Upgrade or downgrade anytime; changes are prorated automatically.</p>
    </div>
    <div>
      <h3 class="text-sm font-medium text-neutral-900">Do you offer discounts for nonprofits?</h3>
      <p class="mt-2 text-sm text-neutral-500">Yes — reach out and we'll set you up with a nonprofit rate.</p>
    </div>
  </div>
</section>