Team Plan Pricing Card with CTA Buttons

<article
  class="relative overflow-hidden ring-1 ring-black/5 text-white bg-gray-900 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/046f0e74-64ae-4e71-ae2d-67940e33e9bc_1600w.jpg)] bg-cover rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-sm"
  style="">
  <div class="flex items-center justify-between">
    <div class="text-sm font-medium/relaxed" style="opacity:.95;">Scale Team</div>
    <span class="inline-flex items-center gap-1 text-xs uppercase border border-white/70 rounded px-2 py-1" aria-label="Top pick" style="opacity:.95;">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="crown" class="lucide lucide-crown w-3.5 h-3.5"><path d="M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" class=""></path><path d="M5 21h14" class=""></path></svg>
              Most Popular
            </span>
  </div>

  <div class="mt-3">
    <h2 class="text-2xl sm:text-3xl md:text-2xl font-semibold tracking-tight">Built for teams and agencies</h2>
    <p class="text-sm text-white/85 mt-1">Collaboration, permissions, and performance at scale.</p>
  </div>

  <div class="mt-5 flex items-baseline gap-2">
    <span id="priceBValue" class="text-5xl font-semibold tracking-tight">$79</span>
    <span id="priceBDuration" class="text-sm text-white/90" aria-live="polite">/seat/mo</span>
  </div>

  <div class="mt-4 flex items-center gap-3">
    <button class="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl bg-black text-white shadow-sm hover:bg-gray-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60" aria-label="Start Team plan">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users w-4 h-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
              <span class="font-medium">Start Team</span>
            </button>
    <button class="inline-flex gap-2 ring-1 ring-white/20 hover:bg-white/15 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/60 text-white bg-white/10 rounded-xl pt-3 pr-4 pb-3 pl-4 backdrop-blur-lg items-center" aria-label="Talk to sales">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4 h-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" class=""></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" class=""></path></svg>
              <span class="text-sm font-medium">Talk to sales</span>
            </button>
  </div>

  <div class="mt-5 h-px bg-white/50"></div>

  <ul class="mt-4 space-y-2.5 text-white text-sm">
    <li class="flex items-start gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4.5 h-4.5 mt-0.5">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
      Everything in Solo
    </li>
    <li class="flex items-start gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4.5 h-4.5 mt-0.5">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
      Unlimited projects &amp; shared libraries
    </li>
    <li class="flex items-start gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4.5 h-4.5 mt-0.5">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
      Roles, permissions &amp; version history
    </li>
    <li class="flex items-start gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4.5 h-4.5 mt-0.5">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
      SSO/SAML, audit logs &amp; API access
    </li>
    <li class="flex items-start gap-2.5">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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 w-4.5 h-4.5 mt-0.5">
        <path d="M20 6 9 17l-5-5" class=""></path>
      </svg>
      Priority support &amp; 99.9% SLA
    </li>
  </ul>
</article>