Pricing Single

<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
  <div class="mx-auto max-w-3xl px-6">
    <div class="overflow-hidden rounded-3xl border border-[var(--ws-pricing-card-border)]">
      <div class="grid md:grid-cols-2">
        <!-- Details -->
        <div class="bg-[var(--ws-pricing-card-bg)] p-8 sm:p-10">
          <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Pro plan</p>
          <h2 class="mt-3 text-2xl font-bold text-[var(--ws-pricing-text)]">Everything you need</h2>
          <p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">One simple plan with all features included. No hidden costs, no feature gates.</p>

          <ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              Unlimited projects
            </li>
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              All pattern families
            </li>
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              CLI & API access
            </li>
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              Priority support
            </li>
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              Custom branding
            </li>
            <li class="flex items-center gap-3">
              <svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
              Team collaboration
            </li>
          </ul>
        </div>

        <!-- Price & CTA -->
        <div class="flex flex-col items-center justify-center bg-[var(--ws-pricing-bg)] p-8 text-center sm:p-10">
          <p class="text-sm text-[var(--ws-pricing-text-muted)]">One price, everything included</p>
          <p class="mt-4">
            <span class="text-5xl font-bold text-[var(--ws-pricing-text)]">$29</span>
            <span class="text-base text-[var(--ws-pricing-text-muted)]">/month</span>
          </p>
          <p class="mt-2 text-sm text-[var(--ws-pricing-text-muted)]">Billed monthly. Cancel anytime.</p>
          <a href="#" class="mt-8 w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Start free trial</a>
          <a href="#" class="mt-3 text-sm font-medium text-[var(--ws-pricing-highlight-bg)] hover:opacity-80">See it in action &rarr;</a>
          <p class="mt-6 text-xs text-[var(--ws-pricing-text-muted)]">14-day free trial. No credit card required.</p>
        </div>
      </div>
    </div>
  </div>
</section>