Highlighted Difference

<!--
  The winning cell is tinted AND flagged with a ★ glyph plus a visually-hidden
  "(best)" - colour never carries the verdict alone, so it survives forced
  colours and greyscale. Cells stack to one column below 40rem.
-->
<div class="grid w-full gap-3">
  <div>
    <p class="mb-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Uptime SLA</p>
    <div class="grid gap-2 sm:grid-cols-2">
      <div class="rounded-lg border border-gray-200 px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:text-gray-300">
        <span class="mb-0.5 block text-xs font-semibold text-gray-500 dark:text-gray-400">Basic</span>
        <span class="flex items-center gap-1.5">99.9%</span>
      </div>
      <div class="rounded-lg border border-emerald-600 bg-emerald-50 px-3 py-2 text-sm text-emerald-900 dark:border-emerald-500 dark:bg-emerald-950/40 dark:text-emerald-100">
        <span class="mb-0.5 block text-xs font-semibold text-gray-500 dark:text-gray-400">Plus</span>
        <span class="flex items-center gap-1.5">
          <span class="text-emerald-700 dark:text-emerald-400" aria-hidden="true">★</span>99.99%<span class="sr-only"> (best)</span>
        </span>
      </div>
    </div>
  </div>
</div>