{{/* Hero */}}

{{/* Pricing Cards */}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
  {{/* Free Tier */}}
  <div class="pricing-card">
    <p class="font-mono text-label-md text-on-surface-variant uppercase tracking-widest mb-2">Starter</p>
    <div class="mb-6">
      <span class="font-display text-display-sm text-on-surface">$0</span>
      <span class="font-body text-on-surface-variant">/month</span>
    </div>
    <p class="font-body text-body-sm text-on-surface-variant mb-8">Perfect for trying out superhero.pw with a single project.</p>
    <ul class="space-y-3 mb-8">
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">1 media property</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Basic character library</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Script editor</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Episode manager</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-outline flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        <span class="font-body text-sm text-on-surface-variant">Analytics dashboard</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-outline flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        <span class="font-body text-sm text-on-surface-variant">Cloud integrations</span>
      </li>
    </ul>
    <a href="#" class="btn-secondary w-full text-center">Get Started</a>
  </div>

  {{/* Pro Tier */}}
  <div class="pricing-card pricing-card-featured relative">
    <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
      <span class="chip chip-accent px-4 py-1">Popular</span>
    </div>
    <p class="font-mono text-label-md text-accent uppercase tracking-widest mb-2">Pro</p>
    <div class="mb-6">
      <span class="font-display text-display-sm text-on-surface">$12</span>
      <span class="font-body text-on-surface-variant">/month</span>
    </div>
    <p class="font-body text-body-sm text-on-surface-variant mb-8">Everything you need to produce your series at professional pace.</p>
    <ul class="space-y-3 mb-8">
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Unlimited media properties</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Full character library with arcs</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Script editor with Fountain support</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Episode manager & timeline</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Analytics dashboard</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-accent flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Notes & scraps</span>
      </li>
    </ul>
    <a href="#" class="btn-accent w-full text-center">Start Pro Trial</a>
  </div>

  {{/* Team Tier */}}
  <div class="pricing-card">
    <p class="font-mono text-label-md text-on-surface-variant uppercase tracking-widest mb-2">Studio</p>
    <div class="mb-6">
      <span class="font-display text-display-sm text-on-surface">$29</span>
      <span class="font-body text-on-surface-variant">/month</span>
    </div>
    <p class="font-body text-body-sm text-on-surface-variant mb-8">For teams and studios producing multiple series at once.</p>
    <ul class="space-y-3 mb-8">
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Everything in Pro</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Team collaboration & roles</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Google Drive integration</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Adobe Drive integration</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Kickstarter / BackerKit management</span>
      </li>
      <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
        <span class="font-body text-sm text-on-surface">Priority support</span>
      </li>
    </ul>
    <a href="#" class="btn-secondary w-full text-center">Contact Us</a>
  </div>
</div>

{{/* FAQ or Trust section */}}
<div class="mt-20 text-center">
  <p class="font-body text-on-surface-variant">All plans include secure backups. Cancel anytime. Stripe handles billing — your data stays yours.</p>
</div>