Success Modal

<!--
  A success confirmation. The check mark scales in once; the animation is
  decoration, so it is dropped under motion-reduce and the glyph still reads.
  The green is a signal, not the message - the title and body carry the meaning
  for anyone who cannot see the colour.
-->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <div class="absolute inset-0 bg-black/50" data-modal-close></div>
  <div
    role="dialog"
    aria-modal="true"
    aria-labelledby="ok-modal-title"
    aria-describedby="ok-modal-desc"
    class="relative max-h-[calc(100dvh-2rem)] w-full max-w-sm overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 text-center shadow-2xl dark:border-gray-800 dark:bg-gray-900"
  >
    <div class="inline-flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300" aria-hidden="true">
      <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false">
        <path d="M20 6 9 17l-5-5" />
      </svg>
    </div>
    <h2 id="ok-modal-title" class="mt-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
      Payment successful
    </h2>
    <p id="ok-modal-desc" class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
      We have emailed your receipt. Your plan is active and ready to use right away.
    </p>
    <div class="mt-6">
      <button
        type="button"
        data-modal-close
        class="w-full rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-emerald-400 dark:focus-visible:ring-offset-gray-900"
      >
        Done
      </button>
    </div>
  </div>
</div>