<div class="pricing-card">
  <div class="pricing-badge">Most Popular</div>
  <div class="pricing-header">
    <h3>Pro</h3>
    <div class="pricing-price">
      <span class="price-amount">$29</span>
      <span class="price-period">/ month</span>
    </div>
    <p class="pricing-desc">Everything you need to ship faster.</p>
  </div>
  <ul class="pricing-features">
    <li>✓ Unlimited projects</li>
    <li>✓ Priority support</li>
    <li>✓ Custom domain</li>
    <li>✓ Advanced analytics</li>
    <li class="muted">✗ White-label</li>
  </ul>
  <button class="btn btn-primary" style="width:100%">Get started</button>
  <p class="pricing-note">No credit card required</p>
</div>

<style>
.pricing-card {
  border: 1px solid var(--accent); border-radius: 1rem;
  padding: 1.75rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 1.25rem;
  position: relative;
}
.pricing-badge {
  position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.875rem; border-radius: 9999px; white-space: nowrap;
}
.pricing-header { display: flex; flex-direction: column; gap: 0.375rem; }
.pricing-header h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; }
.price-amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }
.price-period { font-size: 0.875rem; color: var(--muted); }
.pricing-desc { font-size: 0.875rem; color: var(--muted); margin: 0; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; }
.pricing-features .muted { color: var(--muted); }
.pricing-note { text-align: center; font-size: 0.75rem; color: var(--muted); margin: 0; }
</style>