Plans card

<section class="relative z-10">
  <div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pt-20 pr-4 pb-20 pl-4">
    <div class="text-center space-y-4 mb-16">
      <div class="mb-2">
        <span class="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium backdrop-blur font-sans border-black/10 bg-black/5 text-zinc-800">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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-violet-700"><rect width="20" height="14" x="2" y="5" rx="2" class=""></rect><line x1="2" x2="22" y1="10" y2="10" class=""></line></svg>
          Simple, transparent pricing
        </span>
      </div>
      <h2 class="text-4xl sm:text-5xl md:text-6xl tracking-tight font-bricolage font-light text-black">
        Plans that scale with your team
      </h2>
      <p class="max-w-2xl mx-auto text-lg font-sans text-zinc-700">
        Start free, upgrade when you need more. All plans include end-to-end encryption and unlimited message history.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      <!-- Free Plan -->
      <div class="ring-1 rounded-3xl p-8 backdrop-blur ring-black/10 bg-black/5">
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold tracking-tight font-sans text-black">Starter</h3>
            <p class="text-sm mt-1 font-sans text-zinc-600">Perfect for small teams getting started</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight font-bricolage text-black">$0</span>
            <span class="text-sm font-sans text-zinc-600">per month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-3 text-sm font-medium transition-colors font-sans border-black/20 bg-black/5 text-black hover:bg-black/10">
            Get started free
            <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-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Up to 5 team members</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Unlimited messages</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">10GB file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Basic AI recaps</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">End-to-end encryption</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Pro Plan -->
      <div class="relative ring-1 ring-violet-500/50 bg-gradient-to-b from-violet-500/10 to-indigo-500/10 rounded-3xl p-8 backdrop-blur shadow-2xl">
        <div class="absolute -top-3 left-1/2 -translate-x-1/2">
          <span class="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-violet-500 px-3 py-1 text-xs font-medium shadow-lg font-sans to-indigo-400 text-black">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><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" class=""></path></svg>
            Most popular
          </span>
        </div>
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold tracking-tight font-sans text-black">Pro</h3>
            <p class="text-sm mt-1 font-sans text-zinc-600">Everything you need for growing teams</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight font-bricolage text-black">$8</span>
            <span class="text-sm font-sans text-zinc-600">per user/month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 px-4 py-3 text-sm font-medium hover:opacity-90 transition-opacity shadow-lg font-sans to-indigo-400 text-black">
            Start free trial
            <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-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Unlimited team members</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">100GB file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Advanced AI features</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Voice &amp; video calls</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Priority support</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Custom integrations</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Enterprise Plan -->
      <div class="ring-1 rounded-3xl p-8 backdrop-blur ring-black/10 bg-black/5">
        <div class="space-y-6">
          <div class="">
            <h3 class="text-xl font-semibold tracking-tight font-sans text-black">Enterprise</h3>
            <p class="text-sm mt-1 font-sans text-zinc-600">Advanced security and admin controls</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-4xl font-light tracking-tight font-bricolage text-black">$24</span>
            <span class="text-sm font-sans text-zinc-600">per user/month</span>
          </div>
          <button class="w-full inline-flex items-center justify-center gap-2 rounded-lg border px-4 py-3 text-sm font-medium transition-colors font-sans border-black/20 bg-black/5 text-black hover:bg-black/10">
            Contact sales
            <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-4 w-4"><path d="M22 16.92A7 7 0 1 1 16.92 22c.15 0 .29-.01.43-.03L22 24Z" class=""></path><path d="M10.5 7.5a4 4 0 1 1 0 8" class=""></path></svg>
          </button>
          <div class="space-y-3">
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Everything in Pro</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Unlimited file storage</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Advanced admin controls</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">SSO &amp; compliance</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">Dedicated support</span>
            </div>
            <div class="flex items-center gap-2">
              <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-4 w-4 text-emerald-600"><path d="m9 12 2 2 4-4" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
              <span class="text-sm font-sans text-zinc-700">99.9% SLA uptime</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Enterprise CTA -->
    <div class="mt-12 text-center">
      <p class="text-sm font-sans text-zinc-600">Need something custom? <a href="#" class="text-violet-700 hover:text-violet-800">Let's talk about your requirements</a></p>
    </div>
  </div>
</section>