FAQ card grid with support tile

Create an FAQ presented as a card grid with Tailwind CSS: a heading and intro, then a responsive grid of question cards where each card has a small numbered badge, a bold question, and a two or three line answer. Make the final grid cell a contrasting dark support tile with a short prompt, an avatar pair, and a light CTA button for contacting the team. Keep card heights even with flex and give the dark tile the same corner radius.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="mx-auto mb-10 max-w-xl text-center">
    <h2 class="text-3xl font-semibold text-neutral-900">Before you ask</h2>
    <p class="mt-2 text-neutral-500">The four questions that come up in almost every trial.</p>
  </div>
  <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    <div class="rounded-2xl border border-neutral-200 bg-white p-6">
      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">01</span>
      <h3 class="mt-4 font-semibold text-neutral-900">Do you have a migration path?</h3>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">We import from the four largest competitors, including custom fields and attachments. Most migrations finish in under an hour.</p>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-6">
      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">02</span>
      <h3 class="mt-4 font-semibold text-neutral-900">Where is my data stored?</h3>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Choose a region at workspace creation: US, EU, or AU. Data never leaves the region you pick, including backups.</p>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-6">
      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">03</span>
      <h3 class="mt-4 font-semibold text-neutral-900">What happens after the trial?</h3>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Nothing is deleted. Your workspace drops to the free tier and everything stays readable until you upgrade.</p>
    </div>
    <div class="rounded-2xl border border-neutral-200 bg-white p-6">
      <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-neutral-100 text-xs font-semibold text-neutral-500">04</span>
      <h3 class="mt-4 font-semibold text-neutral-900">Is there an on-premise option?</h3>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Self-hosting is available on Enterprise with a Helm chart and quarterly release channel.</p>
    </div>
    <div class="flex flex-col justify-between rounded-2xl bg-neutral-900 p-6 md:col-span-2 lg:col-span-1">
      <div>
        <h3 class="font-semibold text-white">Still unanswered?</h3>
        <p class="mt-2 text-sm leading-relaxed text-neutral-400">Ask a solutions engineer directly — no forms, no queue, no discovery call.</p>
      </div>
      <div class="mt-6 flex items-center justify-between">
        <div class="flex -space-x-2">
          <span class="h-8 w-8 rounded-full bg-neutral-700 ring-2 ring-neutral-900"></span>
          <span class="h-8 w-8 rounded-full bg-neutral-600 ring-2 ring-neutral-900"></span>
        </div>
        <a href="#" class="rounded-xl bg-white px-4 py-2 text-sm font-medium text-neutral-900 hover:bg-neutral-100">Ask us</a>
      </div>
    </div>
  </div>
</section>