Pricing Base

<section id="pricing" class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Pricing</p>
      <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Simple plans that scale with your team</h2>
      <p class="mt-4 text-pretty text-base text-[var(--ws-pricing-text-soft)]">Start free, upgrade when your workflow grows. All plans include the core design system registry.</p>
    </div>

    <div class="mt-12 grid gap-6 md:grid-cols-3">
      <article class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Starter</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For individual builders</p>
        <p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$0<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo</span></p>
        <ul class="mt-5 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
          <li>Core snippets</li>
          <li>Pattern JSON export</li>
          <li>Community support</li>
        </ul>
      </article>

      <article class="rounded-2xl border-2 border-[var(--ws-pricing-highlight-bg)] bg-[var(--ws-pricing-card-bg)] p-6 shadow-md">
        <p class="inline-flex rounded-full bg-[var(--ws-pricing-highlight-bg)] px-2.5 py-1 text-xs font-semibold text-[var(--ws-pricing-highlight-text)]">Most popular</p>
        <h3 class="mt-3 text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For growing product teams</p>
        <p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">$29<span class="text-sm font-medium text-[var(--ws-pricing-text-muted)]">/mo</span></p>
        <ul class="mt-5 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
          <li>Everything in Starter</li>
          <li>Pattern families</li>
          <li>Priority support</li>
        </ul>
      </article>

      <article class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For organizations</p>
        <p class="mt-5 text-3xl font-bold text-[var(--ws-pricing-text)]">Custom</p>
        <ul class="mt-5 space-y-2 text-sm text-[var(--ws-pricing-text-soft)]">
          <li>Governance workflows</li>
          <li>Private registry sync</li>
          <li>Dedicated onboarding</li>
        </ul>
      </article>
    </div>
  </div>
</section>