Grouped capability checklist

Create a dense feature index with Tailwind CSS: four grouped columns, each with a small uppercase group label and a list of short capability items marked with a subtle check glyph. Above the columns place a heading, a one-line intro, and a link to full documentation. Keep the type small, the rows tight, and collapse to two columns on md and one on mobile — the goal is to communicate breadth at a glance.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
    <div>
      <h2 class="text-3xl font-semibold text-neutral-900">Everything in the box</h2>
      <p class="mt-2 text-neutral-500">No add-on pricing for the things you would expect to be included.</p>
    </div>
    <a href="#" class="text-sm font-medium text-neutral-900 hover:underline">Full documentation →</a>
  </div>
  <div class="mt-10 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Collaboration</h3>
      <ul class="mt-3 space-y-2 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Threaded comments</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Live cursors</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Guest access</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Suggestion mode</li>
      </ul>
    </div>
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Security</h3>
      <ul class="mt-3 space-y-2 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> SAML single sign-on</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Audit log export</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Data residency</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Session controls</li>
      </ul>
    </div>
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Developer</h3>
      <ul class="mt-3 space-y-2 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> REST &amp; GraphQL APIs</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Signed webhooks</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> CLI and SDKs</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Sandbox workspaces</li>
      </ul>
    </div>
    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Operations</h3>
      <ul class="mt-3 space-y-2 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Usage dashboards</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Scheduled exports</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Retention policies</li>
        <li class="flex gap-2"><span class="text-neutral-300"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Status webhooks</li>
      </ul>
    </div>
  </div>
</section>