Responsive Pricing Plans Section with Tailwind Cards

<section class="sm:p-8 bg-zinc-900/50 border-zinc-800 border rounded-3xl mt-10 pt-6 pr-6 pb-6 pl-6">
  <!-- Header -->
  <div class="flex flex-col items-center text-center">
    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-zinc-900 border border-zinc-800 text-zinc-300">
      <svg xmlns="http://www.w3.org/200/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="credit-card" class="lucide lucide-credit-card h-4 w-4"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line></svg>
      <span class="text-xs font-normal font-geist">Pricing</span>
    </div>
    <h2 class="mt-4 text-[40px] sm:text-6xl lg:text-7xl leading-[0.95] font-geist font-medium tracking-tighter text-white">Flexible plans for every team</h2>
    <p class="mt-2 text-sm sm:text-base text-zinc-400 font-geist">Choose a plan that automates your workflows and scales with your business.</p>
  </div>

  <!-- Plans -->
  <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-4">
    <!-- Starter -->
    <article 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">
      <!-- Top meta -->
      <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" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="font-geist">Go‑live in 2 weeks</span>
        </div>
      </div>

      <!-- Core -->
      <div class="mt-5 flex items-start justify-between">
        <div>
          <h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Starter</h3>
          <p class="mt-1 text-sm text-zinc-400 font-geist">For small teams automating a single workflow.</p>
        </div>
        <div class="text-right">
          <p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">$1,999</p>
          <p class="text-xs text-zinc-500 font-geist">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 font-geist">
        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" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right h-4 w-4"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
      </button>

      <!-- Features -->
      <div class="mt-6">
        <p class="text-xs text-zinc-400 font-geist">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" data-lucide="check" class="lucide lucide-check h-3.5 w-3.5 text-green-400"><path d="M20 6 9 17l-5-5"></path></svg>
            </span>
            <span class="text-sm-zinc-300 font-geist">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" data-lucide="check" class="lucide lucide-check 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 font-geist">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" data-lucide="check" class="lucide lucide-check 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 font-geist">1 revision and handover docs</span>
          </li>
        </ul>
      </div>
    </article>

    <!-- Pro (Most popular) -->
    <article class="relative overflow-hidden rounded-2xl border border-zinc-700 bg-gradient-to-b from-zinc-900 to-zinc-950 p-5 sm:p-6 ring-1 ring-indigo-500/30">
      <div class="absolute right-4 top-4">
        
      </div>

      <!-- Top meta -->
      <div class="flex text-xs items-center justify-between">
        <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">02</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/80"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/40"></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" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="font-geist">Go‑live in 4 weeks</span>
        </div>
      </div>

      <!-- Core -->
      <div class="mt-5 flex items-start justify-between">
        <div class="">
          <h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Pro</h3>
          <p class="mt-1 text-sm text-zinc-400 font-geist">For teams scaling automation across departments.</p>
        </div>
        <div class="text-right">
          <p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">$4,999</p>
          <p class="text-xs text-zinc- font-geist">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 font-geist">
        Start Pro
        <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" data-lucide="zap" class="lucide lucide-zap h-4 w-4"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
      </button>

      <!-- Features -->
      <div class="mt-6">
        <p class="text-xs text-zinc-400 font-geistEverything in Starter, plus:&lt;/p&gt; &lt;ul class=" mt-3="" space-y-3"="">
          </p><li class="flex items-start gap-3">
            <span class="mt-0.5 h-5 w-5 rounded-full bg-zinc-900 border border-zinc-700 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" data-lucide="check" class="lucide lucide-check 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 font-geist">5+ workflows, unlimited 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-700 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" data-lucide="check" class="lucide lucide-check 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 font-geist">Advanced analytics and alerts</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-700 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" data-lucide="check" class="lucide lucide-check 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 font-geist">Priority support and quarterly reviews</span>
          </li>
        
      </div>
    </article>

    <!-- Premium -->
    <article 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">
      <!-- Top meta -->
      <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">03</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/80"></span>
            <span class="h-1.5 w-1.5 rounded-full bg-indigo-500/80"></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" data-lucide="clock" class="lucide lucide-clock h-3.5 w-3.5"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
          <span class="font-geist">Go‑live in 6–8 weeks</span>
        </div>
      </div>

      <!-- Core -->
      <div class="mt-5 flex items-start justify-between">
        <div class="">
          <h3 class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Premium</h3>
          <p class="mt-1 text-sm text-zinc-400 font-geist">For organizations with compliance and custom needs.</p>
        </div>
        <div class="text-right">
          <p class="text-2xl sm:text-3xl text-white font-geist font-medium tracking-tight">Custom</p>
          <p class="text-xs text-zinc-500 font-geist">annual agreement</p>
        </div>
      </div>

      <button class="mt-5 inline-flex items-center justify-center gap-2 h-11 w-full rounded-full bg-zinc-100 text-zinc-900 text-sm font-normal hover:bg-white transition font-geist">
        Contact Sales
        <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" data-lucide="messages-square" class="lucide lucide-messages-square h-4 w-4"><path d="M16 10a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 14.286V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path><path d="M20 9a2 2 0 0 1 2 2v10.286a.71.71 0 0 1-1.212.502l-2.202-2.202A2 2 0 0 0 17.172 19H10a2 2 0 0 1-2-2v-1"></path></svg>
      </button>

      <!-- Features -->
      <div class="mt-6">
        <p class="text-xs text-zinc-400 font-geist">Everything in Pro, plus:</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" data-lucide="check" class="lucide lucide-check 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 font-geist">SSO/SAML, audit logs, and DPA</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" data-lucide="check" class="lucide lucide-check 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 font-geist">Dedicated environment &amp; SLA</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" data-lucide="check" class="lucide lucide-check 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 font-geist">Custom models and private connectors</span>
          </li>
        </ul>
      </div>
    </article>
  </div>

  <!-- Footnote -->
  <div class="mt-6 flex flex-col items-center text-center">
    <p class="text-xs text-zinc-500 font-geist">Need a tailored package? <a href="#" class="underline decoration-zinc-700 underline-offset-4 text-zinc-300 hover:text-white font-geist">Talk to our team</a>.</p>
  </div>
</section>