Responsive Pricing Table with Highlighted Plan

<section class="z-10 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll sm:px-6 lg:px-8 lg:mt-40 lg:mb-40 max-w-7xl mt-40 mr-auto mb-40 ml-auto pt-16 pr-4 pb-20 pl-4 relative" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(8)">
      <div class="relative overflow-hidden rounded-3xl bg-slate-900/60 ring-1 ring-white/10 p-6 sm:p-10 backdrop-blur">
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-8">
          <div class="">
            <span class="inline-flex items-center gap-2 rounded-full border border-lime-400/30 bg-lime-500/15 px-3 py-1.5 text-xs font-medium text-lime-300 mb-3">
              Pricing
            </span>
            <h2 class="text-3xl sm:text-4xl md:text-5xl text-white mt-2 tracking-tight font-semibold">
              Simple plans for every team
            </h2>
          </div>
          <p class="sm:text-base text-sm text-slate-300 max-w-[42ch]">
            Start free. Scale when ready. Cancel anytime.
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-6">
          <!-- Free -->
          <div class="rounded-2xl border border-white/10 bg-slate-900/40 p-6 hover:bg-slate-900/60 transition-colors">
            <h3 class="text-xl text-white tracking-tight font-semibold">
              Free
            </h3>
            <p class="text-sm text-slate-400 mt-1">For individuals</p>
            <div class="mt-4 flex items-baseline gap-1">
              <span class="text-4xl text-white tracking-tight font-semibold">
                $0
              </span>
              <span class="text-sm text-slate-400">/month</span>
            </div>
            <ul class="mt-6 space-y-3 text-sm text-slate-300">
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Basic AI features
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Up to 100 emails/day
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-slate-600">
                  <path d="M18 6 6 18" class=""></path>
                  <path d="m6 6 12 12" class=""></path>
                </svg>
                Smart prioritization
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-slate-600">
                  <path d="M18 6 6 18" class=""></path>
                  <path d="m6 6 12 12" class=""></path>
                </svg>
                Advanced automation
              </li>
            </ul>
            <a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-full bg-white/10 hover:bg-white/15 text-white h-11 ring-1 ring-white/10 text-sm font-medium transition-colors">
              Get started
            </a>
          </div>

          <!-- Pro -->
          <div class="bg-black/80 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative" style="position: relative; border: none;">
            <div class="absolute left-0 top-0 w-full h-full rounded-2xl pointer-events-none" style="left: -2px; top: -2px; border-radius: 1rem; background: linear-gradient(45deg, rgba(163, 230, 53, 0.35), rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0.05), rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0.35)); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: steam 20s linear infinite;"></div>
            <div class="absolute left-0 top-0 w-full h-full rounded-2xl pointer-events-none" style="left: -2px; top: -2px; border-radius: 1rem; background: linear-gradient(45deg, rgba(163, 230, 53, 0.35), rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0.05), rgba(163, 230, 53, 0.3), rgba(163, 230, 53, 0.35)); background-size: 400%; width: calc(100% + 4px); height: calc(100% + 4px); z-index: -1; animation: steam 20s linear infinite; filter: blur(30px); opacity: 0.3;"></div>

            <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-10">
              <span class="inline-flex items-center gap-1 text-xs font-medium text-lime-300 bg-lime-500/15 border-lime-400/30 border rounded-full pt-1 pr-3 pb-1 pl-3 backdrop-blur-md">
                <span class="h-1.5 w-1.5 rounded-full bg-lime-400"></span>
                Most popular
              </span>
            </div>

            <div class="relative z-10">
              <div class="flex items-center justify-between">
                <h3 class="text-xl text-white tracking-tight font-semibold">
                  Pro
                </h3>
              </div>
              <p class="text-sm text-slate-400 mt-1">For professionals</p>
              <div class="flex gap-1 mt-4 gap-x-1 gap-y-1 items-baseline">
                <span class="text-4xl text-white tracking-tight font-semibold">
                  $19
                </span>
                <span class="text-sm text-slate-400">/month</span>
              </div>
              <ul class="mt-6 space-y-3 text-sm text-slate-300">
                <li class="flex gap-x-2 gap-y-2 items-center">
                  <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" class="w-4 h-4 text-lime-400">
                    <path d="M20 6 9 17l-5-5" class=""></path>
                  </svg>
                  Unlimited AI processing
                </li>
                <li class="flex gap-2 gap-x-2 gap-y-2 items-center">
                  <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" class="w-4 h-4 text-lime-400">
                    <path d="M20 6 9 17l-5-5" class=""></path>
                  </svg>
                  Smart prioritization
                </li>
                <li class="flex items-center gap-2">
                  <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" class="w-4 h-4 text-lime-400">
                    <path d="M20 6 9 17l-5-5" class=""></path>
                  </svg>
                  Advanced automation
                </li>
                <li class="flex items-center gap-2">
                  <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" class="w-4 h-4 text-lime-400">
                    <path d="M20 6 9 17l-5-5" class=""></path>
                  </svg>
                  Priority support
                </li>
              </ul>
              <a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-full bg-lime-600 hover:bg-lime-500 text-white h-11 ring-1 ring-lime-400/30 text-sm font-semibold transition-colors shadow-lg shadow-lime-900/25">
                Start Pro trial
              </a>
            </div>

            <style>
              @keyframes steam {
                0% {
                  background-position: 0 0;
                }

                50% {
                  background-position: 400% 0;
                }

                100% {
                  background-position: 0 0;
                }
              }
            </style>
          </div>

          <!-- Team -->
          <div class="rounded-2xl border border-white/10 bg-slate-900/40 p-6 hover:bg-slate-900/60 transition-colors">
            <h3 class="text-xl text-white tracking-tight font-semibold">
              Team
            </h3>
            <p class="text-sm text-slate-400 mt-1">For organizations</p>
            <div class="mt-4 flex items-baseline gap-1">
              <span class="text-4xl text-white tracking-tight font-semibold">
                $49
              </span>
              <span class="text-sm text-slate-400">/month</span>
            </div>
            <ul class="mt-6 space-y-3 text-sm text-slate-300">
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Everything in Pro
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Team collaboration
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Shared workflows
              </li>
              <li class="flex items-center gap-2">
                <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" class="w-4 h-4 text-lime-400">
                  <path d="M20 6 9 17l-5-5" class=""></path>
                </svg>
                Admin controls
              </li>
            </ul>
            <a href="#" class="mt-6 inline-flex w-full items-center justify-center rounded-full bg-white/10 hover:bg-white/15 text-white h-11 ring-1 ring-white/10 text-sm font-medium transition-colors">
              Contact sales
            </a>
          </div>
        </div>
      </div>
    </section>