Private Access Form

<form class="mt-8 space-y-5">
  <div>
    <label for="name" class="block text-sm text-slate-300 font-geist">Full name</label>
    <input id="name" name="name" type="text" placeholder="Avery Chen" required="" class="mt-2 w-full rounded-lg bg-white/[0.06] px-3.5 py-2.5 text-slate-100 placeholder:text-slate-500 ring-1 ring-white/10 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 transition-shadow">
  </div>
  <div>
    <label for="email" class="block text-sm text-slate-300 font-geist">Email address</label>
    <input id="email" name="email" type="email" placeholder="avery.chen@example.com" required="" class="mt-2 w-full rounded-lg bg-white/[0.06] px-3.5 py-2.5 text-slate-100 placeholder:text-slate-500 ring-1 ring-white/10 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 transition-shadow">
  </div>
  <div class="relative">
    <label for="purpose" class="block text-sm text-slate-300 font-geist">Primary objective</label>
    <div class="mt-2 relative">
      <select id="purpose" name="purpose" class="appearance-none w-full rounded-lg bg-white/[0.06] px-3.5 py-2.5 pr-10 text-slate-100 placeholder:text-slate-500 ring-1 ring-white/10 focus:outline-none focus:ring-2 focus:ring-emerald-400/60">
        <option value="" disabled="" selected="" class="font-geist">Focus, resilience, growth, research…</option>
        <option class="font-geist">Personal Clarity</option>
        <option class="font-geist">Emotional Regulation</option>
        <option class="font-geist">Cognitive Resilience</option>
        <option class="font-geist">Professional Performance</option>
        <option class="font-geist">Research Collaboration</option>
      </select>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400 stroke-[1.5]">
        <path d="m6 9 6 6 6-6"></path>
      </svg>
    </div>
  </div>
  <div>
    <span class="block text-sm text-slate-300 font-geist">Areas of interest</span>
    <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-3">
      <label class="flex items-center gap-3 rounded-lg bg-white/[0.06] px-3 py-2 ring-1 ring-white/10 hover:bg-white/[0.09] hover:ring-white/20 transition">
        <input type="checkbox" class="h-4 w-4 rounded border-white/20 bg-transparent text-emerald-400 accent-emerald-500 focus:ring-emerald-400/50">
        <span class="text-sm text-slate-300 font-geist">Pattern Mapping</span>
      </label>
      <label class="flex items-center gap-3 rounded-lg bg-white/[0.06] px-3 py-2 ring-1 ring-white/10 hover:bg-white/[0.09] hover:ring-white/20 transition">
        <input type="checkbox" class="h-4 w-4 rounded border-white/20 bg-transparent text-emerald-400 accent-emerald-500 focus:ring-emerald-400/50">
        <span class="text-sm text-slate-300 font-geist">Emotional Regulation</span>
      </label>
      <label class="flex items-center gap-3 rounded-lg bg-white/[0.06] px-3 py-2 ring-1 ring-white/10 hover:bg-white/[0.09] hover:ring-white/20 transition">
        <input type="checkbox" class="h-4 w-4 rounded border-white/20 bg-transparent text-emerald-400 accent-emerald-500 focus:ring-emerald-400/50">
        <span class="text-sm text-slate-300 font-geist">Cognitive Endurance</span>
      </label>
      <label class="flex items-center gap-3 rounded-lg bg-white/[0.06] px-3 py-2 ring-1 ring-white/10 hover:bg-white/[0.09] hover:ring-white/20 transition">
        <input type="checkbox" class="h-4 w-4 rounded border-white/20 bg-transparent text-emerald-400 accent-emerald-500 focus:ring-emerald-400/50">
        <span class="text-sm text-slate-300 font-geist">Behavioral Insights</span>
      </label>
    </div>
  </div>
  <label class="flex items-start gap-3 rounded-lg bg-white/[0.04] px-3 py-3 ring-1 ring-white/10 hover:ring-white/20 transition">
    <input type="checkbox" required="" class="mt-1 h-4 w-4 rounded border-white/20 bg-transparent text-emerald-400 accent-emerald-500 focus:ring-emerald-400/50">
    <span class="text-xs text-slate-400 leading-5 font-geist">I agree to the terms and acknowledge this intake involves a personal cognitive questionnaire.</span>
  </label>
  <button type="submit" class="w-full inline-flex gap-2 shadow-orange-500/20 hover:bg-orange-400 focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-orange-400/70 hover:shadow-orange-500/30 transition font-medium text-white font-geist bg-orange-500 rounded-lg pt-3.5 pr-5 pb-3.5 pl-5 shadow-md items-center justify-center" style="background: linear-gradient(180deg, #f97316 0%, #fb923c 100%);">
    Request Access
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles h-4 w-4 stroke-[1.5]">
      <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path>
      <path d="M20 2v4"></path>
      <path d="M22 4h-4"></path>
      <circle cx="4" cy="20" r="2"></circle>
    </svg>
  </button>
  <p class="text-xs text-slate-500 flex items-center gap-2 font-geist">
    Data is encrypted in transit and at rest. Unsubscribe anytime.
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock h-4 w-4 text-slate-500 stroke-[1.5]">
      <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>
  </p>
</form>