Responsive Pricing Packages Section with CTA

<section class="sm:px-6 lg:px-8 max-w-7xl border-neutral-200 border-t mt-12 mr-auto ml-auto pt-16 pr-4 pl-4">
  <div class="grid grid-cols-1 gap-8">
    <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6">
      <div>
        <p class="text-sm text-neutral-600">Packages</p>
        <h3 class="text-3xl sm:text-4xl md:text-5xl text-neutral-900 mt-2 font-medium tracking-tighter">
          Choose the flow that fits your project
        </h3>
        <p class="sm:text-base text-sm text-neutral-600 mt-4 max-w-[80ch]">
          Clear scopes and sprint-based delivery. Momentum without guesswork.
        </p>
      </div>
      <a href="/contact"
        class="inline-flex items-center gap-2 hover:bg-neutral-800 transition text-sm font-medium text-white bg-neutral-900 ring-neutral-800 ring-1 rounded-xl pt-3 pr-6 pb-3 pl-6">
        Get a tailored quote
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="stroke-width:1.5" viewBox="0 0 24 24" fill="none"
          stroke="currentColor">
          <path d="M7 7h10v10" class=""></path>
          <path d="M7 17 17 7" class=""></path>
        </svg>
      </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
      <div
        class="relative rounded-2xl border border-neutral-200 bg-white p-8 hover:shadow-lg hover:border-neutral-300 transition">
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900">Vibe Sprint</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-100 px-3 py-1 text-xs text-neutral-700">
                <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" data-lucide="fast-forward" class="lucide lucide-fast-forward w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(64, 64, 64);"><path d="M12 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 12 18z" class=""></path><path d="M2 6a2 2 0 0 1 3.414-1.414l6 6a2 2 0 0 1 0 2.828l-6 6A2 2 0 0 1 2 18z" class=""></path></svg>
                Fast
              </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-medium tracking-tighter">$8k</span>
            <span class="text-neutral-600 text-sm">per week</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2">Rapid direction, palette, type, and initial boards.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700">
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Two mood directions + validation
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Palette &amp; type stack
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Light motion cues
          </li>
        </ul>
        <a href="/contact"
          class="inline-flex items-center justify-center gap-2 hover:bg-neutral-200 transition text-sm font-medium text-neutral-900 bg-neutral-100 w-full border-neutral-200 border rounded-xl mt-8 pt-3 pr-4 pb-3 pl-4">
          Start a Vibe Sprint
        </a>
      </div>

      <div
        class="relative rounded-2xl border-2 border-emerald-200 bg-gradient-to-b from-emerald-50 to-white p-8 shadow-lg shadow-emerald-100/50">
        <div
          class="absolute -top-3 left-8 inline-flex items-center rounded-full bg-emerald-600 text-white text-xs font-medium px-3 py-1 ring-2 ring-white">
          Most popular</div>
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900">Identity + Vibe</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-emerald-300 bg-emerald-100 px-3 py-1 text-xs text-emerald-800">
                <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" data-lucide="layers" class="lucide lucide-layers w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(6, 95, 70);"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" class=""></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path></svg>
                Depth
              </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-medium tracking-tighter">$22k</span>
            <span class="text-neutral-600 text-sm">3-week sprint</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2">Complete identity with mood system, guides, and web starters.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700">
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Logo suite, palette, type, and usage
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Motion + sound guidelines
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Component starters + tokens
          </li>
        </ul>
        <a href="/contact"
          class="inline-flex items-center justify-center gap-2 hover:bg-emerald-700 transition text-sm font-medium text-white bg-emerald-600 w-full ring-emerald-600 ring-1 rounded-xl mt-8 pt-3 pr-4 pb-3 pl-4">
          Book Identity + Vibe
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" style="stroke-width:1.5" viewBox="0 0 24 24"
            fill="none" stroke="currentColor">
            <path d="M8 2v4" class=""></path>
            <path d="M16 2v4" class=""></path>
            <rect x="3" y="4" width="18" height="18" rx="2" class=""></rect>
            <path d="M3 10h18" class=""></path>
          </svg>
        </a>
      </div>

      <div
        class="relative rounded-2xl border border-neutral-200 bg-white p-8 hover:shadow-lg hover:border-neutral-300 transition">
        <div class="flex items-center justify-between">
          <h4 class="text-lg font-medium tracking-tight text-neutral-900">Embedded Creative</h4>
          <span class="inline-flex items-center gap-1 rounded-full border border-neutral-200 bg-neutral-100 px-3 py-1 text-xs text-neutral-700">
                <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" data-lucide="play" class="lucide lucide-play w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(64, 64, 64);"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
                Embedded
              </span>
        </div>
        <div class="mt-6">
          <div class="flex items-baseline gap-2">
            <span class="text-4xl sm:text-5xl text-neutral-900 font-medium tracking-tighter">$3.5k</span>
            <span class="text-neutral-600 text-sm">per day</span>
          </div>
          <p class="text-sm text-neutral-600 mt-2">Hands-on execution across art direction, design, and motion.</p>
        </div>
        <ul class="mt-6 space-y-3 text-sm text-neutral-700">
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Roadmaps, standups, async updates
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            Priority iteration
          </li>
          <li class="flex items-start gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600 mt-0.5" style="stroke-width:1.5"
              viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M20 6 9 17l-5-5" class=""></path>
            </svg>
            On-site or remote
          </li>
        </ul>
        <a href="/contact"
          class="inline-flex items-center justify-center gap-2 hover:bg-neutral-200 transition text-sm font-medium text-neutral-900 bg-neutral-100 w-full border-neutral-200 border rounded-xl mt-8 pt-3 pr-4 pb-3 pl-4">
          Discuss Embedded
        </a>
      </div>
    </div>

    <div class="mt-10 grid grid-cols-1 lg:grid-cols-3 gap-8 text-sm">
      <div class="text-neutral-600">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          What’s included
        </div>
        <p class="">Weekly demos, shared boards, and delivery-ready files on every engagement.</p>
      </div>
      <div class="text-neutral-600">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          Flexible scope
        </div>
        <p>Scale up or pause between sprints—built for momentum and clarity.</p>
      </div>
      <div class="text-neutral-600">
        <div
          class="inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-700 mb-3">
          <span class="h-1.5 w-1.5 rounded-full bg-emerald-500"></span>
          Custom vibes
        </div>
        <p>Have a unique brief? I’ll tailor deliverables and cadence to your goals.</p>
      </div>
    </div>
  </div>
</section>