Auth Split Brand

<section class="ws-auth-split-brand flex min-h-screen" style="--ws-auth-bg: var(--ws-color-surface); --ws-auth-text: var(--ws-color-text); --ws-auth-text-soft: var(--ws-color-text-muted); --ws-auth-border: var(--ws-color-border); --ws-auth-accent: var(--ws-color-primary);">
  <div class="hidden flex-1 bg-slate-950 p-12 text-white lg:flex lg:flex-col lg:justify-between"> <!-- ws-ok -->
    <div>
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-white/60">Orbit Workspace</p>
      <h1 class="mt-6 max-w-md text-4xl font-semibold leading-tight">A stronger brand split when the product story matters during sign-up.</h1>
    </div>
    <div class="max-w-lg space-y-4">
      <div class="rounded-2xl border border-white/10 bg-white/5 p-5">
        <p class="text-sm text-white/80">“Setup took less than a day and the approval flow finally stopped being messy.”</p>
        <p class="mt-3 text-sm font-medium">Lina Bauer, Operations Lead</p>
      </div>
      <div class="grid grid-cols-3 gap-4 text-sm">
        <div>
          <p class="text-2xl font-semibold">18</p>
          <p class="text-white/60">workspaces</p>
        </div>
        <div>
          <p class="text-2xl font-semibold">94%</p>
          <p class="text-white/60">activation</p>
        </div>
        <div>
          <p class="text-2xl font-semibold">7d</p>
          <p class="text-white/60">to launch</p>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-1 items-center justify-center bg-[var(--ws-auth-bg)] px-6 py-12">
    <div class="w-full max-w-md">
      <p class="text-lg font-semibold text-[var(--ws-auth-text)]">Create your workspace</p>
      <p class="mt-2 text-sm text-[var(--ws-auth-text-soft)]">Use the right side for product proof and brand context, not just decoration.</p>
      <form class="mt-8 space-y-5">
        <div>
          <label for="brand-work-email" class="block text-sm font-medium text-[var(--ws-auth-text)]">Work email</label>
          <input id="brand-work-email" type="email" placeholder="maya@company.com" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
        </div>
        <div>
          <label for="brand-password" class="block text-sm font-medium text-[var(--ws-auth-text)]">Password</label>
          <input id="brand-password" type="password" placeholder="8+ characters" class="mt-1.5 w-full rounded-xl border border-[var(--ws-auth-border)] px-3 py-2.5 text-sm text-[var(--ws-auth-text)] focus:border-[var(--ws-auth-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-auth-accent)]/15" />
        </div>
        <button type="submit" class="w-full rounded-xl bg-[var(--ws-auth-accent)] px-4 py-2.5 text-sm font-semibold text-white">Start free trial</button>
      </form>
      <p class="mt-6 text-sm text-[var(--ws-auth-text-soft)]">Already using Orbit? <a href="#" class="font-semibold text-[var(--ws-auth-accent)]">Sign in</a></p>
    </div>
  </div>
</section>