Responsive Pricing Card with Upsell Toggle

<div class="ring-1 ring-white/10 sm:p-6 bg-white/5 rounded-3xl mt-8 px-4 py-4">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 items-stretch">
          <!-- Upsell -->
          <div class="md:col-span-4">
            <div class="h-full rounded-2xl bg-black/30 ring-1 ring-white/10 p-5 flex flex-col justify-between">
              <div>
                <p class="text-base font-medium tracking-tight font-geist">Need growth acceleration?</p>
                <p class="mt-2 text-sm text-white/70 font-geist">Add strategic marketing and SEO optimization.</p>
              </div>
              <div class="mt-8 flex items-center justify-between">
                <div class="text-sm font-geist">
                  <span class="text-white/90">+ $1,850</span>
                </div>
                <button type="button" role="switch" aria-checked="false" data-upsell-switch="" class="inline-flex h-6 w-11 items-center rounded-full bg-white/10 ring-1 ring-white/10 transition-colors duration-200">
                  <span data-upsell-knob="" class="h-4 w-4 translate-x-0 rounded-full bg-white transition-transform duration-200"></span>
                  <span class="sr-only">Toggle Growth Package add-on</span>
                </button>
              </div>
            </div>
          </div>

          <!-- Price -->
          <div class="md:col-span-4">
            <div class="h-full rounded-2xl bg-black/30 ring-1 ring-white/10 p-5 flex flex-col">
              <div class="flex-1">
                <div class="flex items-end gap-2">
                  <div class="text-5xl sm:text-6xl lg:text-7xl font-semibold tracking-tighter tabular-nums font-geist" data-amount="">$3,200</div>
                  <div class="pb-2 text-white/60 text-base font-geist" data-period="">/project</div>
                </div>
              </div>
              <div class="mt-8 pt-4 border-t border-white/10 text-xs text-white/70 flex items-center justify-between font-geist">
                <span data-delivery-key="">Timeline</span>
                <span data-delivery-val="">4–6 weeks</span>
              </div>
            </div>
          </div>

          <!-- Features + CTA -->
          <div class="md:col-span-4">
            <div class="h-full rounded-2xl bg-black/30 ring-1 ring-white/10 p-5 flex flex-col">
              <ul class="space-y-3">
                <li class="flex items-start gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-5 h-5 text-white/80"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                  <span class="text-sm font-geist">Complete visual brand system</span>
                </li>
                <li class="flex items-start gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-5 h-5 text-white/80"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                  <span class="text-sm font-geist">Custom website or digital product</span>
                </li>
                <li class="flex items-start gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-5 h-5 text-white/80"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                  <span class="text-sm font-geist">Launch support and guidelines</span>
                </li>
              </ul>

              <div class="mt-auto">
                <a href="#contact" class="mt-6 w-full inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium tracking-tight text-gray-900 bg-white hover:bg-white/90 transition-colors border border-white/10">
                  <span class="font-geist">Start conversation</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>