Responsive 3-Tier Pricing Grid with Featured Plan

<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
  <div class="text-center max-w-3xl mx-auto mb-12">
    <h2 class="text-3xl sm:text-4xl font-medium tracking-tight text-neutral-900">Pricing plans —
      <span class="font-normal italic font-instrument-serif">for every team</span></h2>
    <p class="mt-3 text-neutral-600">Transparent pricing for startups to enterprises, with room to scale as you grow.
    </p>
  </div>

  <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
    <!-- Basic -->
    <div
      class="relative rounded-2xl border border-neutral-200 bg-gradient-to-b from-emerald-50/60 to-white p-8 shadow-sm hover:shadow-lg transition-shadow">
      <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-800">Starter</span>
      <div class="mt-6">
        <div class="">
          <div class="text-4xl font-medium tracking-tight text-neutral-900">
            $1250<span class="ml-1 text-neutral-600 text-base italic font-normal">/month</span></div>
          <p class="mt-2 text-sm text-neutral-600">Best for small one‑off projects and quick experiments.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm">
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">2 social media platforms</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Essential SEO</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Monthly report</span>
          </li>
        </ul>
        <a href="#"
          class="mt-8 w-full inline-flex items-center justify-center rounded-full border border-emerald-300 px-6 py-3 text-sm font-medium text-neutral-800 hover:bg-emerald-50 transition">
          Choose Starter
        </a>
      </div>
    </div>

    <!-- Standard (featured) -->
    <div class="relative rounded-2xl border-2 border-emerald-900 bg-emerald-900 p-8 shadow-lg">
      <span class="inline-flex items-center rounded-full bg-emerald-800 px-3 py-1 text-xs font-medium text-emerald-100">Growth</span>
      <div class="mt-6 text-white">
        <div class="">
          <div class="text-4xl font-medium tracking-tight text-white">
            $3200<span class="ml-1 text-emerald-100 text-base italic font-normal">/month</span></div>
          <p class="mt-2 text-sm text-emerald-100">For growing teams with a steady roadmap and increasing scope.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm">
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-300" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-emerald-100">5 social media platforms</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-300" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-emerald-100">SEO + content marketing</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-300" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-emerald-100">PPC management</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-300" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-emerald-100">Weekly reports</span>
          </li>
        </ul>
        <a href="#"
          class="mt-8 w-full inline-flex items-center justify-center rounded-full bg-emerald-100 text-emerald-900 px-6 py-3 text-sm font-medium hover:bg-emerald-200 transition">
          Choose Growth
        </a>
      </div>
    </div>

    <!-- Premium -->
    <div
      class="relative rounded-2xl border border-neutral-200 bg-gradient-to-b from-white to-emerald-50/40 p-8 shadow-sm hover:shadow-lg transition-shadow">
      <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-medium text-emerald-800">Scale</span>
      <div class="mt-6">
        <div class="">
          <div class="text-4xl font-medium tracking-tight text-neutral-900">
            $5900<span class="ml-1 text-neutral-600 text-base italic font-normal">/month</span></div>
          <p class="mt-2 text-sm text-neutral-600">Dedicated, ongoing partnership for complex, multi‑channel programs.
          </p>
        </div>
        <ul class="mt-6 space-y-3 text-sm">
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Full‑service, multi‑channel marketing</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Advanced SEO + content strategy</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 "
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Lifecycle email &amp; CRM</span>
          </li>
          <li class="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-600" fill="none" viewBox="0 0 24 24"
              stroke="currentColor" stroke-width="2">
              <path d="M20 6 9 17l-5-5"></path>
            </svg>
            <span class="text-neutral-700">Dedicated account team</span>
          </li>
        </ul>
        <a href="#"
          class="mt-8 w-full inline-flex items-center justify-center rounded-full border border-emerald-300 px-6 py-3 text-sm font-medium text-neutral-800 hover:bg-emerald-50 transition">
          Choose Scale
        </a>
      </div>
    </div>
  </div>

  <div class="mt-12 text-center">
    <p class="text-sm text-neutral-600">Simple, flexible plans. Cancel anytime.</p>
  </div>
</div>