Minimal Email-only Sign-up

<!--
  One field, no password: a magic-link / passwordless start. The row goes
  vertical below sm because a 90px email box beside a button is not a form.
-->
<form class="mx-auto w-full max-w-sm text-center" action="#" method="post">
  <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Get started free</h1>
  <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Enter your email - we'll send a magic link.</p>

  <label for="sme-email" class="sr-only">Email address</label>
  <div class="mt-5 flex flex-col gap-2 sm:flex-row">
    <input id="sme-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com"
      class="min-w-0 flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" />
    <button type="submit"
      class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
      Sign up
    </button>
  </div>
  <p class="mt-3 text-xs text-gray-500 dark:text-gray-400">No password required. Unsubscribe any time.</p>
</form>