Three-Column Comparison

<!--
  Three plan columns that collapse to two then one. An excluded feature keeps its
  row - an aria-hidden ✗ plus a visually-hidden "Not included:" - so the lists
  stay row-aligned across columns instead of silently dropping absent rows.
-->
<div class="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <section aria-label="Free" class="flex flex-col rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center justify-between gap-2">
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Free</h3>
    </div>
    <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">$0</p>
    <ul class="mt-4 grid gap-2">
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
        <span><span class="sr-only">Included: </span>1 workspace</span>
      </li>
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-gray-400 dark:text-gray-600" aria-hidden="true">✗</span>
        <span class="text-gray-400 line-through dark:text-gray-600"><span class="sr-only">Not included: </span>Audit log</span>
      </li>
    </ul>
  </section>

  <section aria-label="Team" class="flex flex-col rounded-xl border border-blue-600 bg-white p-5 ring-1 ring-blue-600 dark:border-blue-400 dark:bg-gray-900 dark:ring-blue-400">
    <div class="flex items-center justify-between gap-2">
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Team</h3>
      <span class="rounded-full bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white dark:bg-blue-500">Popular</span>
    </div>
    <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">$29</p>
    <ul class="mt-4 grid gap-2">
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
        <span><span class="sr-only">Included: </span>Audit log</span>
      </li>
    </ul>
  </section>

  <section aria-label="Enterprise" class="flex flex-col rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center justify-between gap-2">
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Enterprise</h3>
    </div>
    <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">Custom</p>
    <ul class="mt-4 grid gap-2">
      <li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
        <span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
        <span><span class="sr-only">Included: </span>SSO & SAML</span>
      </li>
    </ul>
  </section>
</div>