Split Benefits Sign-up

<!--
  Split shell: form + benefits panel. The panel is aria-hidden decoration on
  mobile? No - it carries real content, so it stacks BELOW the form in source
  order and reflows to a single column below md. The form is what the visitor
  came for, so it leads the DOM.
-->
<div class="mx-auto grid w-full max-w-4xl overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm md:grid-cols-2 dark:border-gray-800 dark:bg-gray-950">
  <form class="order-1 p-6 sm:p-8" action="#" method="post">
    <h1 class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100">Create your account</h1>
    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Free forever for solo projects.</p>

    <div class="mt-6 space-y-4">
      <div>
        <label for="ssb-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Work email</label>
        <input id="ssb-email" name="email" type="email" autocomplete="email" required placeholder="you@company.com"
          class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 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" />
      </div>
      <div>
        <label for="ssb-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
        <input id="ssb-password" name="password" type="password" autocomplete="new-password" required placeholder="At least 8 characters"
          class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 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" />
      </div>
    </div>

    <button type="submit"
      class="mt-6 inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 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">
      Create account
    </button>
  </form>

  <aside class="order-2 border-t border-gray-200 bg-gray-50 p-6 sm:p-8 md:border-l md:border-t-0 dark:border-gray-800 dark:bg-gray-900">
    <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Everything you need to ship</h2>
    <ul class="mt-4 space-y-3 text-sm text-gray-600 dark:text-gray-400">
      <li class="flex gap-2.5">
        <svg viewBox="0 0 20 20" fill="currentColor" class="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.29 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" /></svg>
        Unlimited projects and members
      </li>
      <li class="flex gap-2.5">
        <svg viewBox="0 0 20 20" fill="currentColor" class="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.29 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" /></svg>
        SOC 2 Type II and SSO ready
      </li>
      <li class="flex gap-2.5">
        <svg viewBox="0 0 20 20" fill="currentColor" class="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.3 3.29 6.8-6.8a1 1 0 0 1 1.4 0Z" clip-rule="evenodd" /></svg>
        Cancel any time, no lock-in
      </li>
    </ul>
  </aside>
</div>