Paywall Base

<div class="ws-paywall relative mx-auto max-w-2xl overflow-hidden rounded-2xl border border-[var(--ws-paywall-border)] bg-[var(--ws-paywall-bg)]">
  <!-- Blurred content background -->
  <div class="select-none px-8 pt-8" aria-hidden="true">
    <div class="blur-sm">
      <p class="text-lg font-semibold text-[var(--ws-paywall-text)]">The Future of Design Systems</p>
      <p class="mt-3 text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">Design systems have evolved from simple style guides into comprehensive platforms that enable teams to build consistent, accessible, and scalable digital products. The next generation of design systems will leverage AI to automate pattern composition and maintain quality at scale.</p>
      <p class="mt-3 text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">In this article, we explore the architectural decisions behind modern token-driven systems, the role of structured registries, and how machine-readable metadata transforms how teams discover and adopt components across organizations.</p>
    </div>
  </div>

  <!-- Overlay card -->
  <div class="relative -mt-16 bg-gradient-to-t from-[var(--ws-paywall-bg)] from-60% to-transparent px-8 pb-8 pt-24 text-center">
    <div class="mx-auto max-w-sm">
      <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-paywall-accent)]/10 text-[var(--ws-paywall-accent)]">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
      </div>
      <h2 class="text-xl font-bold text-[var(--ws-paywall-text)]">Premium Content</h2>
      <p class="mt-2 text-sm text-[var(--ws-paywall-text-soft)]">Get unlimited access to all articles, guides, and exclusive resources.</p>
      <p class="mt-3 text-2xl font-bold text-[var(--ws-paywall-text)]">$9.99<span class="text-sm font-normal text-[var(--ws-paywall-text-soft)]">/month</span></p>
      <a href="#" class="mt-4 inline-block w-full rounded-xl bg-[var(--ws-paywall-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-paywall-action-text)] transition hover:opacity-90">Subscribe</a>
      <p class="mt-3 text-sm text-[var(--ws-paywall-text-soft)]">Already a member? <a href="#" class="font-medium text-[var(--ws-paywall-accent)] underline underline-offset-2">Sign in</a></p>
    </div>
  </div>
</div>