Versus Comparison

<!--
  Two labelled <section>s side by side with a decorative "VS" badge between
  them. The badge is aria-hidden and hides once the panels stack, so a stacked
  screen never shows a floating "VS" over the first card.
-->
<section class="relative w-full">
  <div class="grid gap-4 sm:grid-cols-2">
    <section aria-label="Notion" class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Notion</h3>
      <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Docs-first workspace</p>
      <ul class="mt-3 grid gap-2">
        <li class="grid grid-cols-[0.75rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
          <span class="mt-1.5 h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
          <span>Flexible pages</span>
        </li>
      </ul>
    </section>

    <section aria-label="ADYSRE" class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">ADYSRE</h3>
      <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">Operations platform</p>
      <ul class="mt-3 grid gap-2">
        <li class="grid grid-cols-[0.75rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
          <span class="mt-1.5 h-1.5 w-1.5 rounded-full bg-blue-600 dark:bg-blue-400" aria-hidden="true"></span>
          <span>Role-based access</span>
        </li>
      </ul>
    </section>
  </div>

  <span class="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 rounded-full border border-gray-200 bg-white px-3 py-1.5 text-sm font-bold text-gray-900 shadow-sm sm:block dark:border-gray-800 dark:bg-gray-950 dark:text-gray-100" aria-hidden="true">VS</span>
</section>