Pros and Cons

<!--
  Each glyph is aria-hidden and paired with a visually-hidden "Pro:" / "Con:"
  prefix, so a screen reader never hears a bare "+" with nothing to anchor it.
  Colour is reinforced by the +/- and ✓/✗ glyphs, never the sole signal.
-->
<section class="w-full">
  <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-gray-100">Should you self-host?</h2>
  <div class="grid gap-4 sm:grid-cols-2">
    <section aria-label="Pros" class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-emerald-700 dark:text-emerald-400">
        <span aria-hidden="true">✓</span>Pros
      </h3>
      <ul class="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">Pro: </span>No per-seat billing</span>
        </li>
      </ul>
    </section>

    <section aria-label="Cons" class="rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
      <h3 class="mb-3 flex items-center gap-2 text-sm font-semibold text-rose-700 dark:text-rose-400">
        <span aria-hidden="true">✗</span>Cons
      </h3>
      <ul class="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-rose-700 dark:text-rose-400" aria-hidden="true">−</span>
          <span><span class="sr-only">Con: </span>You own the upgrades</span>
        </li>
      </ul>
    </section>
  </div>
</section>