Two-Tier SaaS Pricing Section with Billing Toggle

<section class="flex flex-col lg:px-8 lg:pt-20 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-6xl mr-auto ml-auto pt-20 pr-4 pl-4">
        <div class="sm:px-10 sm:py-10 lg:py-12 bg-gradient-to-br from-blue-500/0 via-blue-500/10 to-blue-500/0 rounded-none pt-8 pr-4 pb-8 pl-4" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); --border-radius-before: 0">
          <div class="grid gap-6 sm:gap-10 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1.1fr)_minmax(0,1.1fr)] items-stretch">
            <!-- Left narrative -->
            <div class="flex flex-col justify-between gap-8">
              <div class="">
                <span class="text-[11px] uppercase font-medium text-sky-300 tracking-[0.2em]" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                  PRICING
                </span>
                <h2 class="mt-4 text-3xl sm:text-4xl lg:text-4xl font-semibold tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                  Powerful pricing for expansion-first teams
                </h2>
                <p class="mt-4 max-w-md text-sm text-slate-300" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                  Start with the plan that matches your current motion, then
                  grow into automation, guided playbooks, and deep forecasting
                  as your team scales with Mira.
                </p>
              </div>

              <!-- Billing toggle (visual only) -->
              <div class="inline-flex items-center gap-3 text-[11px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                <span class="text-slate-400">Monthly</span>
                <button class="relative inline-flex h-6 w-12 items-center rounded-full bg-slate-900/80 border border-slate-700 px-0.5 transition-colors">
                  <span class="absolute left-0.5 h-5 w-5 rounded-full bg-gradient-to-r from-sky-400 to-blue-500 shadow-md shadow-sky-500/50 transition-transform"></span>
                  <span class="sr-only">Toggle billing</span>
                </button>
                <span class="flex items-center gap-1">
                  <span class="text-slate-100">Yearly</span>
                  <span class="rounded-full bg-sky-500/10 px-2 py-0.5 text-[10px] text-sky-300">
                    Save 20%
                  </span>
                </span>
              </div>
            </div>

            <!-- Launch plan -->
            <div class="flex flex-col border-t lg:border-l lg:border-t-0 border-white/5 pt-6 lg:pt-0 lg:pl-8">
              <div class="flex-1 flex flex-col">
                <div class="">
                  <p class="text-lg font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                    Launch
                  </p>
                  <p class="mt-2 text-sm text-slate-400 max-w-xs" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                    Ideal for lean CS and RevOps teams validating a repeatable
                    expansion motion.
                  </p>

                  <div class="mt-6 flex items-baseline gap-2">
                    <span class="text-3xl font-semibold tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      $79
                    </span>
                    <span class="text-[11px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      /month
                    </span>
                  </div>
                </div>

                <div class="mt-6 border-t border-white/5 pt-5">
                  <button class="flex hover:bg-slate-900 transition-all text-sm font-medium text-slate-50 tracking-tight bg-slate-900/85 w-full rounded-sm pt-3 pr-4 pb-3 pl-4 items-center justify-between" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                    <span>Get started with Launch</span>
                    <span class="flex h-7 w-7 items-center justify-center rounded-full border border-white/15 text-slate-100">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
                        <path d="M5 12h14" class=""></path>
                        <path d="m12 5 7 7-7 7" class=""></path>
                      </svg>
                    </span>
                  </button>
                </div>
              </div>

              <ul class="mt-6 space-y-2 text-[12px] text-slate-300" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                <li class="flex items-center gap-2">
                  <span class="flex h-4 w-4 items-center justify-center rounded-full border border-slate-500 text-[10px] text-slate-200">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-2.5 w-2.5">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </span>
                  <span>Up to 500 active clients</span>
                </li>
                <li class="flex items-center gap-2 text-slate-500">
                  <span class="flex h-4 w-4 items-center justify-center rounded-full border border-slate-600 text-[10px] text-slate-400">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-2.5 w-2.5">
                      <path d="M18 6 6 18" class=""></path>
                      <path d="m6 6 12 12" class=""></path>
                    </svg>
                  </span>
                  <span class="">AI Expansion Assistant</span>
                </li>
              </ul>
            </div>

            <!-- Scale plan (highlighted) -->
            <div class="flex flex-col border-t lg:border-l lg:border-t-0 border-white/5 pt-6 lg:pt-0 lg:pl-8">
              <div class="flex-1 flex flex-col">
                <div class="">
                  <div class="flex items-center justify-between gap-2">
                    <p class="text-lg font-medium tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      Scale
                    </p>
                    <span class="inline-flex items-center rounded-full bg-sky-500/15 px-2.5 py-1 text-[10px] font-medium text-sky-200" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      Most popular
                    </span>
                  </div>
                  <p class="mt-2 text-sm text-slate-400 max-w-xs" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                    For revenue teams that need automation, guided playbooks,
                    and forecasting in one workspace.
                  </p>

                  <div class="mt-6 flex items-baseline gap-2">
                    <span class="text-3xl font-semibold tracking-tight text-slate-50" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      $179
                    </span>
                    <span class="text-[11px] text-slate-400" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                      /month
                    </span>
                  </div>
                </div>

                <div class="mt-6 border-t border-white/5 pt-5">
                  <button class="flex hover:bg-white transition-all shadow-black/60 text-sm font-medium text-slate-950 tracking-tight bg-slate-50 w-full rounded-sm pt-3 pr-4 pb-3 pl-4 shadow-lg items-center justify-between" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
                    <span class="">Talk to sales about Scale</span>
                    <span class="flex h-7 w-7 items-center justify-center rounded-full bg-slate-900 text-slate-50">
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
                        <path d="M5 12h14" class=""></path>
                        <path d="m12 5 7 7-7 7" class=""></path>
                      </svg>
                    </span>
                  </button>
                </div>
              </div>

              <ul class="mt-6 space-y-2 text-[12px] text-slate-300" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
                <li class="flex items-center gap-2">
                  <span class="flex h-4 w-4 items-center justify-center rounded-full border border-slate-200 bg-slate-900 text-[10px] text-slate-50">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-2.5 w-2.5">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </span>
                  <span class="">
                    Up to 5,000 active clients and workspaces
                  </span>
                </li>
                <li class="flex items-center gap-2">
                  <span class="flex h-4 w-4 items-center justify-center rounded-full border border-slate-200 bg-slate-900 text-[10px] text-slate-50">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-2.5 w-2.5">
                      <path d="M20 6 9 17l-5-5" class=""></path>
                    </svg>
                  </span>
                  <span class="">
                    AI Expansion Assistant and guided playbooks
                  </span>
                </li>
              </ul>
            </div>
          </div>

          <!-- Bottom meta -->
          <div class="mt-8 flex flex-col gap-3 border-t border-slate-900 pt-4 text-[11px] text-slate-400 sm:flex-row sm:items-center sm:justify-between" style="font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;">
            <p class="">
              No setup fees · SOC2-ready · White-glove onboarding for Scale
              customers.
            </p>
            <div class="flex items-center gap-2">
              <span class="inline-flex h-1.5 w-1.5 rounded-full bg-sky-400"></span>
              <span class="">
                Ask us about custom Enterprise pricing for multi-region data
                residency.
              </span>
            </div>
          </div>
        </div>
      </section>