FAQ Accordion Section

<div class="mt-16">
  <div class="flex items-end justify-between">
    <div>
      <span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium text-slate-600 font-sans">FAQ</span>
      <h2 class="mt-3 text-3xl sm:text-4xl font-semibold tracking-tight text-slate-900 font-sans">Answers to common
        questions</h2>
      <p class="mt-2 text-sm text-slate-600 font-sans">Can't find what you're looking for? Reach us anytime.</p>
    </div>
    <button class="hidden sm:inline-flex items-center gap-2 rounded-full border border-slate-200/80 bg-white px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-50 font-sans">Contact Support<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" class="h-4 w-4"><circle cx="12" cy="12" r="10"></circle><path d="m4.93 4.93 4.24 4.24"></path><path d="m14.83 9.17 4.24-4.24"></path><path d="m14.83 14.83 4.24 4.24"></path><path d="m9.17 14.83-4.24 4.24"></path><circle cx="12" cy="12" r="4"></circle></svg></button>
  </div>
  <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">How does billing 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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">Plans are flat monthly rates. If you exceed included usage,
        you'll be billed at metered overage rates at the end of the cycle.</p>
    </details>
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">Can I cancel anytime?</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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">Yes. You can upgrade, downgrade, or cancel at any time from your
        dashboard—no lock‑in.</p>
    </details>
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">Do you support multiple models?</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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">Yes. Route across leading foundation models and fine‑tunes. You
        can set policies per project or environment.</p>
    </details>
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">Is my data private?</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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">We never train on customer data. Enterprise plans offer regional
        isolation, data residency, and on‑prem options.</p>
    </details>
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">How do rate limits 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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">Each plan includes generous default limits. Contact us to
        increase limits based on your workload and traffic profile.</p>
    </details>
    <details class="group rounded-2xl ring-1 ring-slate-200/70 bg-white p-4">
      <summary class="flex cursor-pointer list-none items-center justify-between gap-4">
        <span class="text-sm font-medium text-slate-900 font-sans">Do you offer SLAs?</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"
          class="h-4 w-4 text-slate-500 transition-transform group-open:rotate-180">
          <path d="m6 9 6 6 6-6"></path>
        </svg></summary>
      <p class="mt-3 text-sm text-slate-600 font-sans">Yes. Enterprise plans include uptime SLAs, support SLAs, and
        incident response commitments.</p>
    </details>
  </div>
</div>