Pricing Card

<div class="relative overflow-hidden rounded-2xl border border-zinc-800 bg-gradient-to-b from-zinc-900/80 to-zinc-950 p-5 sm:p-6">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
  </style>
  <div class="flex items-center justify-between text-xs">
    <div class="inline-flex items-center gap-2 text-zinc-400">
      <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-zinc-950 ring-1 ring-zinc-800 text-zinc-300">01</span>
      <div class="flex items-center gap-1">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/40"></span>
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/20"></span>
      </div>
    </div>
    <div class="inline-flex items-center gap-1 text-zinc-400">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
        <path d="M12 6v6l4 2"></path>
        <circle cx="12" cy="12" r="10"></circle>
      </svg>
      <span style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">Go‑live in 2 weeks</span>
    </div>
  </div>
  <div class="mt-5 flex items-start justify-between">
    <div>
      <h3 class="text-2xl sm:text-3xl text-white font-medium tracking-tight" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">Starter</h3>
      <p class="mt-1 text-sm text-zinc-400" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">For small teams automating a single workflow.</p>
    </div>
    <div class="text-right">
      <p class="text-2xl sm:text-3xl text-white font-medium tracking-tight" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">$1,999</p>
      <p class="text-xs text-zinc-500" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">per project</p>
    </div>
  </div>
  <button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-white text-zinc-900 text-sm font-normal hover:bg-zinc-100 transition" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">
    Get Started
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
      <path d="M7 7h10v10"></path>
      <path d="M7 17 17 7"></path>
    </svg>
  </button>
  <div class="mt-6">
    <p class="text-xs text-zinc-400" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">Essential tools to get started:</p>
    <ul class="mt-3 space-y-3">
      <li class="flex items-start gap-3">
        <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900 border border-zinc-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-green-400">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="text-sm text-zinc-300" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">1 automated workflow, up to 3 integrations</span>
      </li>
      <li class="flex items-start gap-3">
        <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900 border border-zinc-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-green-400">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="text-sm text-zinc-300" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">Email support and guided setup</span>
      </li>
      <li class="flex items-start gap-3">
        <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900 border border-zinc-800 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-green-400">
            <path d="M20 6 9 17l-5-5"></path>
          </svg>
        </span>
        <span class="text-sm text-zinc-300" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">1 revision and handover docs</span>
      </li>
    </ul>
  </div>
</div>