Enterprise quote request panel

Design an enterprise pricing panel with Tailwind CSS built as a two-column card on a dark background. The left column, on a neutral-950 surface, carries a small "Enterprise" label, a large headline reading "Priced around your estate, not your seat count", a short paragraph, a list of four inclusions with check glyphs in a lighter grey, and at the bottom a bordered mini-card holding an account executive avatar, name, role and a line saying replies usually land within one business day. The right column is a white form with a heading, two-up fields for work email and company, a full-width select for company size, a select for the main driver — compliance, scale, migration or something else — a textarea for context, a dark submit button reading "Request pricing", and a footnote that no sales sequence is triggered. Keep labels small and medium weight, inputs rounded-xl with clear focus rings, and stack the columns below the lg breakpoint.

<section class="px-6 py-16">
  <div class="mx-auto grid max-w-5xl overflow-hidden rounded-2xl border border-neutral-800 lg:grid-cols-2">
    <div class="bg-neutral-950 p-9 text-white">
      <p class="text-xs font-medium uppercase tracking-widest text-neutral-500">Enterprise</p>
      <h2 class="mt-4 text-3xl font-semibold leading-tight tracking-tight">Priced around your estate, not your seat count</h2>
      <p class="mt-4 text-sm leading-relaxed text-neutral-400">Tell us how many environments, regions and auditors are involved and we will send a fixed annual figure — no per-seat arithmetic.</p>

      <ul class="mt-8 space-y-3 text-sm text-neutral-300">
        <li class="flex items-center gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Unlimited seats and workspaces</li>
        <li class="flex items-center gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> SAML, SCIM and audit export</li>
        <li class="flex items-center gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Data residency in EU, US or AU</li>
        <li class="flex items-center gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> 99.95% uptime SLA with credits</li>
      </ul>

      <div class="mt-10 flex items-center gap-3 rounded-xl border border-neutral-800 bg-neutral-900 p-4">
        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-neutral-700 text-sm font-medium">MO</span>
        <div class="text-sm">
          <p class="font-medium">Mira Osei</p>
          <p class="text-xs text-neutral-400">Enterprise accounts · replies within 1 business day</p>
        </div>
      </div>
    </div>

    <form class="bg-white p-9">
      <h3 class="text-lg font-semibold text-neutral-900">Request pricing</h3>
      <p class="mt-1 text-sm text-neutral-500">Five fields. We will come back with a number, not a brochure.</p>

      <div class="mt-6 grid gap-4 sm:grid-cols-2">
        <div>
          <label class="mb-1.5 block text-xs font-medium text-neutral-700">Work email</label>
          <input type="email" placeholder="[email protected]" class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
        </div>
        <div>
          <label class="mb-1.5 block text-xs font-medium text-neutral-700">Company</label>
          <input type="text" placeholder="Northwind" class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
        </div>
      </div>

      <div class="mt-4">
        <label class="mb-1.5 block text-xs font-medium text-neutral-700">Company size</label>
        <select class="w-full rounded-xl border border-neutral-200 bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10">
          <option>200 – 500 people</option>
          <option>500 – 2,000 people</option>
          <option>2,000 – 10,000 people</option>
          <option>More than 10,000</option>
        </select>
      </div>

      <div class="mt-4">
        <label class="mb-1.5 block text-xs font-medium text-neutral-700">What is driving this?</label>
        <select class="w-full rounded-xl border border-neutral-200 bg-white px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10">
          <option>Compliance or procurement review</option>
          <option>Scaling past our current plan</option>
          <option>Migrating from another vendor</option>
          <option>Something else</option>
        </select>
      </div>

      <div class="mt-4">
        <label class="mb-1.5 block text-xs font-medium text-neutral-700">Anything we should know?</label>
        <textarea rows="3" placeholder="Environments, regions, deadlines…" class="w-full resize-none rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none transition focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10"></textarea>
      </div>

      <button class="mt-6 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Request pricing</button>
      <p class="mt-3 text-center text-xs text-neutral-400">One reply from a person. No drip sequence, no dialler.</p>
    </form>
  </div>
</section>