---
id: seed:archetypes/pricing
title: Pricing section archetypes
source_type: seed_archetype
priority: hot
---

Pricing sections sell on clarity, not cleverness. The visitor is comparing — make comparison fast. Six working archetypes:

---

**Three-card pricing (default).** Three tiers, middle card visually highlighted as the recommended choice. Each card carries the tier name, price + cadence, a one-line audience descriptor, a checkmark feature list, and a CTA.

*Animation & Visual Details:*
- *Entrance*: Cards stagger in from translateY(40px) with fade, 0.12s delay between each; featured card animates slightly later
- *Hover*: Card lifts (translateY(-6px)), shadow deepens, border accent color intensifies; CTA button scales slightly
- *Gradients*: Featured card has a subtle gradient top border; CTA button uses gradient background
- *Radial circles*: Radial glow behind the featured card (accent color at 12% opacity)
- *Scroll trigger*: Each card animates independently on IntersectionObserver at 20% threshold
- *JS interaction*: None for base variant

```html
<section data-amb-section="pricing" class="pricing-section">
  <div class="container">
    <div class="pricing-header">
      <h2 class="pricing-title">{outcome-focused headline}</h2>
      <p class="pricing-subtitle">{anchor on value, not cost}</p>
    </div>
    <div class="pricing-cards">
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Starter</h3>
          <p class="pricing-audience">For small teams getting started</p>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">0</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            5 projects
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            3 team members
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Community support
          </li>
        </ul>
        <a class="pricing-cta" href="#">Start free</a>
      </article>
      <article class="pricing-card pricing-card--featured">
        <div class="pricing-card-glow"></div>
        <div class="pricing-badge">Most popular</div>
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Pro</h3>
          <p class="pricing-audience">For growing teams that need more</p>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">29</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Unlimited projects
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            10 team members
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Priority support
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Advanced analytics
          </li>
        </ul>
        <a class="pricing-cta pricing-cta--primary" href="#">Start free trial</a>
      </article>
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Enterprise</h3>
          <p class="pricing-audience">For large organizations with custom needs</p>
        </div>
        <div class="pricing-amount">
          <span class="pricing-value">Custom</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Everything in Pro
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Unlimited team members
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Dedicated support
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Custom integrations
          </li>
        </ul>
        <a class="pricing-cta" href="#">Contact sales</a>
      </article>
    </div>
  </div>
</section>
```

```css
:root {
  --pricing-enter-duration: 0.5s;
  --pricing-stagger: 0.12s;
}

.pricing-section {
  padding: clamp(64px, 8vw, 100px) 0;
}

.pricing-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

.pricing-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.pricing-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 12px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  padding: 32px;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pricing-card.is-visible {
  animation: pricing-card-enter var(--pricing-enter-duration) ease-out forwards;
}

.pricing-card:nth-child(1).is-visible { animation-delay: 0s; }
.pricing-card:nth-child(2).is-visible { animation-delay: var(--pricing-stagger); }
.pricing-card:nth-child(3).is-visible { animation-delay: calc(var(--pricing-stagger) * 2); }

@keyframes pricing-card-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  border-color: #cbd5e1;
}

.pricing-card--featured {
  border-color: var(--color-accent, #6366f1);
  border-width: 2px;
  transform: translateY(30px) scale(1.02);
  z-index: 1;
}

.pricing-card--featured.is-visible {
  animation: pricing-featured-enter var(--pricing-enter-duration) ease-out forwards;
  animation-delay: calc(var(--pricing-stagger) * 1.5);
}

@keyframes pricing-featured-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
}

.pricing-card--featured:hover {
  transform: translateY(-6px) scale(1.02);
}

.pricing-card-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-card-header {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.pricing-tier {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.pricing-audience {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 4px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 24px;
}

.pricing-currency {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
}

.pricing-value {
  font-size: clamp(2.5rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
  line-height: 1;
}

.pricing-cadence {
  font-size: 1rem;
  color: var(--color-text-muted, #64748b);
  margin-left: 4px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--color-text, #1e293b);
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.pricing-feature:last-child {
  border-bottom: none;
}

.pricing-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-accent, #6366f1);
}

.pricing-cta {
  display: block;
  text-align: center;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  background: #f1f5f9;
  color: var(--color-text, #1e293b);
  transition: background 0.2s ease, transform 0.2s ease;
}

.pricing-cta:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

.pricing-cta--primary {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

.pricing-cta--primary:hover {
  background: linear-gradient(135deg, #5558e3, #6d2fd6);
  box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}

@media (max-width: 900px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
  .pricing-card--featured {
    transform: none;
  }
  .pricing-card--featured.is-visible {
    animation: pricing-card-enter var(--pricing-enter-duration) ease-out forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const cards = document.querySelectorAll('.pricing-card');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.2 });
cards.forEach(card => observer.observe(card));
```

---

**Two-card pricing.** Free vs Pro. Use when you have a freemium model and no enterprise tier.

*Animation & Visual Details:*
- *Entrance*: Cards slide in from opposite sides (left card from left, right card from right), 0.5s ease-out
- *Hover*: Both cards lift on hover, right (Pro) card has intensified radial glow
- *Gradients*: Pro card has gradient top border (accent colors)
- *Radial circles*: Radial glow behind the Pro card, 15% opacity
- *Scroll trigger*: Both cards animate simultaneously on IntersectionObserver
- *JS interaction*: None

```html
<section data-amb-section="pricing" class="pricing-section pricing-section--two-card">
  <div class="container">
    <div class="pricing-header">
      <h2 class="pricing-title">Simple, transparent pricing</h2>
      <p class="pricing-subtitle">No hidden fees. Upgrade or cancel anytime.</p>
    </div>
    <div class="pricing-two-col">
      <article class="pricing-card pricing-card--free">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Free</h3>
          <p class="pricing-audience">For individuals and hobby projects</p>
        </div>
        <div class="pricing-amount">
          <span class="pricing-value">$0</span>
          <span class="pricing-cadence">forever</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            1 project
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            1 user
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            5GB storage
          </li>
        </ul>
        <a class="pricing-cta" href="#">Get started</a>
      </article>
      <article class="pricing-card pricing-card--pro">
        <div class="pricing-card-glow"></div>
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Pro</h3>
          <p class="pricing-audience">For professionals and small teams</p>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">15</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Unlimited projects
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            5 team members
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            100GB storage
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Priority support
          </li>
        </ul>
        <a class="pricing-cta pricing-cta--primary" href="#">Start free trial</a>
      </article>
    </div>
  </div>
</section>
```

```css
.pricing-section--two-card {
  padding: clamp(64px, 8vw, 100px) 0;
}

.pricing-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card--free {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pricing-card--pro {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.1s;
}

.pricing-section--two-card.is-visible .pricing-card--free,
.pricing-section--two-card.is-visible .pricing-card--pro {
  opacity: 1;
  transform: translateX(0);
}

.pricing-card--pro {
  background: linear-gradient(180deg, rgba(99,102,241,0.03) 0%, transparent 100%);
  border-color: rgba(99,102,241,0.2);
}

.pricing-card--pro:hover {
  border-color: var(--color-accent, #6366f1);
}

@media (max-width: 640px) {
  .pricing-two-col {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card--free,
  .pricing-card--pro {
    opacity: 1;
    transform: none;
  }
}
```

---

**Single-card with feature matrix.** One headline price, full feature table below. Use for service businesses where pricing is signal but feature parity is the actual decision.

*Animation & Visual Details:*
- *Entrance*: Card scales from 0.97 → 1 with fade; table rows stagger in from below
- *Hover*: Rows highlight on hover; tooltip icon triggers a tooltip on hover
- *Gradients*: Single gradient border on the card (left accent)
- *Radial circles*: Radial dot behind the price number
- *Scroll trigger*: Table rows stagger with 0.05s delay each on IntersectionObserver
- *JS interaction*: Tooltip on feature items with hover

```html
<section data-amb-section="pricing" class="pricing-section pricing-section--single">
  <div class="container">
    <div class="pricing-single-wrapper">
      <article class="pricing-card pricing-card--single">
        <div class="pricing-single-header">
          <div class="pricing-single-price">
            <div class="pricing-price-ring"></div>
            <span class="pricing-price-value">$199</span>
            <span class="pricing-price-cadence">/project</span>
          </div>
          <p class="pricing-single-tagline">One fixed price. No surprises.</p>
        </div>
        <div class="pricing-matrix-wrapper">
          <table class="pricing-matrix">
            <thead>
              <tr>
                <th class="pricing-matrix-feature-col">What's included</th>
                <th class="pricing-matrix-included">Included</th>
              </tr>
            </thead>
            <tbody>
              <tr class="pricing-matrix-row">
                <td class="pricing-matrix-feature">
                  Discovery session
                  <span class="pricing-matrix-tooltip" data-tooltip="2-hour video call to understand your needs">?</span>
                </td>
                <td class="pricing-matrix-check">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </td>
              </tr>
              <tr class="pricing-matrix-row">
                <td class="pricing-matrix-feature">Custom design</td>
                <td class="pricing-matrix-check">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </td>
              </tr>
              <tr class="pricing-matrix-row">
                <td class="pricing-matrix-feature">Development</td>
                <td class="pricing-matrix-check">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </td>
              </tr>
              <tr class="pricing-matrix-row">
                <td class="pricing-matrix-feature">3 revision rounds</td>
                <td class="pricing-matrix-check">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </td>
              </tr>
              <tr class="pricing-matrix-row">
                <td class="pricing-matrix-feature">2 weeks delivery</td>
                <td class="pricing-matrix-check">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <a class="pricing-cta pricing-cta--primary" href="#">Start project</a>
      </article>
    </div>
  </div>
</section>
```

```css
.pricing-section--single {
  padding: clamp(64px, 8vw, 100px) 0;
}

.pricing-single-wrapper {
  display: flex;
  justify-content: center;
}

.pricing-card--single {
  max-width: 560px;
  width: 100%;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  padding: 40px;
  opacity: 0;
  transform: scale(0.97);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card--single.is-visible {
  animation: single-card-enter 0.5s ease-out forwards;
}

@keyframes single-card-enter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pricing-card--single:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
}

.pricing-single-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #f1f5f9;
}

.pricing-single-price {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.pricing-price-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 60px;
  background: radial-gradient(ellipse, rgba(99,102,241,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.pricing-price-value {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--color-text, #1e293b);
}

.pricing-price-cadence {
  font-size: 1.1rem;
  color: var(--color-text-muted, #64748b);
}

.pricing-single-tagline {
  font-size: 1rem;
  color: var(--color-text-muted, #64748b);
  margin-top: 8px;
}

.pricing-matrix-wrapper {
  margin-bottom: 32px;
}

.pricing-matrix {
  width: 100%;
  border-collapse: collapse;
}

.pricing-matrix-row {
  opacity: 0;
  transform: translateY(10px);
  transition: background 0.2s ease;
}

.pricing-matrix-row.is-visible {
  animation: matrix-row-enter 0.3s ease-out forwards;
}

@keyframes matrix-row-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pricing-matrix-row:nth-child(1).is-visible { animation-delay: 0s; }
.pricing-matrix-row:nth-child(2).is-visible { animation-delay: 0.05s; }
.pricing-matrix-row:nth-child(3).is-visible { animation-delay: 0.1s; }
.pricing-matrix-row:nth-child(4).is-visible { animation-delay: 0.15s; }
.pricing-matrix-row:nth-child(5).is-visible { animation-delay: 0.2s; }

.pricing-matrix-row:hover {
  background: rgba(99,102,241,0.03);
}

.pricing-matrix-feature-col,
.pricing-matrix-included {
  padding: 14px 0;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  border-bottom: 1px solid #f1f5f9;
}

.pricing-matrix-feature {
  padding: 14px 0;
  font-size: 0.95rem;
  color: var(--color-text, #1e293b);
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-matrix-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e2e8f0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  cursor: help;
  position: relative;
}

.pricing-matrix-check {
  padding: 14px 0;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
}

.pricing-matrix-check svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card--single {
    opacity: 1;
    transform: none;
  }
  .pricing-matrix-row {
    opacity: 1;
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const pricingCard = document.querySelector('.pricing-card--single');
const rows = document.querySelectorAll('.pricing-matrix-row');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      if (entry.target.classList.contains('pricing-card--single')) {
        rows.forEach(row => observer.observe(row));
      }
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });
observer.observe(pricingCard);

// Tooltip
const tooltipTriggers = document.querySelectorAll('.pricing-matrix-tooltip');
tooltipTriggers.forEach(trigger => {
  const tooltipText = trigger.dataset.tooltip;
  trigger.setAttribute('title', tooltipText);
});
```

---

**Annual/monthly toggle.** Add a segmented control above the cards when annual billing has a meaningful discount. Show the discount as a small badge next to the annual label.

*Animation & Visual Details:*
- *Entrance*: Toggle slides in first (0.3s), then cards stagger in at 0.15s intervals
- *Hover*: Toggle thumb slides smoothly between positions; cards have standard hover
- *Gradients*: Toggle thumb has gradient fill; discount badge uses gradient background
- *Radial circles*: Small radial dot on the toggle thumb
- *Scroll trigger*: Standard card animation on IntersectionObserver
- *JS interaction*: Toggle switch with sliding thumb, price values update with a number-flip animation

```html
<section data-amb-section="pricing" class="pricing-section">
  <div class="container">
    <div class="pricing-header">
      <h2 class="pricing-title">Pricing that scales with you</h2>
    </div>
    <div class="pricing-toggle-wrapper">
      <div class="pricing-toggle">
        <span class="pricing-toggle-label">Monthly</span>
        <button class="pricing-toggle-switch" role="switch" aria-checked="false" aria-label="Toggle annual billing">
          <span class="pricing-toggle-thumb"></span>
        </button>
        <span class="pricing-toggle-label">Annual</span>
        <span class="pricing-toggle-badge">Save 20%</span>
      </div>
    </div>
    <div class="pricing-cards pricing-cards--toggle">
      <article class="pricing-card" data-monthly="29" data-annual="23">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Starter</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">29</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta" href="#">Get started</a>
      </article>
      <article class="pricing-card pricing-card--featured" data-monthly="79" data-annual="63">
        <div class="pricing-card-glow"></div>
        <div class="pricing-badge">Most popular</div>
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Pro</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">79</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta pricing-cta--primary" href="#">Start free trial</a>
      </article>
      <article class="pricing-card" data-monthly="199" data-annual="159">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Business</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">199</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta" href="#">Contact sales</a>
      </article>
    </div>
  </div>
</section>
```

```css
.pricing-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.pricing-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pricing-toggle-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  transition: color 0.2s ease;
}

.pricing-toggle-label.is-active {
  color: var(--color-text, #1e293b);
}

.pricing-toggle-switch {
  position: relative;
  width: 56px;
  height: 30px;
  background: #e2e8f0;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease;
}

.pricing-toggle-switch[aria-checked="true"] {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
}

.pricing-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-toggle-switch[aria-checked="true"] .pricing-toggle-thumb {
  transform: translateX(26px);
}

.pricing-toggle-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-toggle-thumb {
    transition: none;
  }
}
```

*JS behavior:*
```javascript
const toggleSwitch = document.querySelector('.pricing-toggle-switch');
const valueElements = document.querySelectorAll('.pricing-card .pricing-value');
const labels = document.querySelectorAll('.pricing-toggle-label');
let isAnnual = false;

toggleSwitch.addEventListener('click', () => {
  isAnnual = !isAnnual;
  toggleSwitch.setAttribute('aria-checked', isAnnual);

  labels.forEach((label, i) => {
    label.classList.toggle('is-active', (i === 0 && !isAnnual) || (i === 1 && isAnnual));
  });

  document.querySelectorAll('.pricing-card').forEach((card, i) => {
    const monthly = card.dataset.monthly;
    const annual = card.dataset.annual;
    const targetValue = isAnnual ? annual : monthly;
    const valueEl = card.querySelector('.pricing-value');

    // Number flip animation
    valueEl.style.animation = 'none';
    valueEl.offsetHeight; // reflow
    valueEl.textContent = targetValue;
    valueEl.style.animation = 'price-flip 0.3s ease-out';
  });
});

document.querySelectorAll('.pricing-card').forEach(card => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.2 });
  observer.observe(card);
});
```

```css
@keyframes price-flip {
  0% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
```

---

**Gradient highlight pricing.** Featured card has a radial gradient glow that pulses subtly. Non-featured cards are visually quieter.

*Animation & Visual Details:*
- *Entrance*: Featured card enters first with glow animation (0.4s), other cards follow at 0.1s stagger
- *Hover*: Featured card glow intensifies; non-featured cards get a subtle lift
- *Gradients*: Featured card has multi-stop radial gradient (accent colors at center, fading to transparent)
- *Radial circles*: Large radial ring behind the featured card, animated pulse
- *Scroll trigger*: IntersectionObserver with featured card triggering first
- *JS interaction*: Glow pulse animation triggered on viewport entry

```html
<section data-amb-section="pricing" class="pricing-section pricing-section--glow">
  <div class="container">
    <div class="pricing-cards">
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Starter</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">19</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            5 projects
          </li>
        </ul>
        <a class="pricing-cta" href="#">Get started</a>
      </article>
      <article class="pricing-card pricing-card--featured pricing-card--glow">
        <div class="pricing-glow-ring"></div>
        <div class="pricing-glow-center"></div>
        <div class="pricing-badge">Best value</div>
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Professional</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">49</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Unlimited projects
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Advanced features
          </li>
        </ul>
        <a class="pricing-cta pricing-cta--primary" href="#">Start free trial</a>
      </article>
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Team</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value">99</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <ul class="pricing-features">
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            Everything in Pro
          </li>
          <li class="pricing-feature">
            <svg class="pricing-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
            5 team seats
          </li>
        </ul>
        <a class="pricing-cta" href="#">Contact sales</a>
      </article>
    </div>
  </div>
</section>
```

```css
.pricing-section--glow {
  padding: clamp(64px, 8vw, 100px) 0;
}

.pricing-card--glow {
  position: relative;
  border-color: var(--color-accent, #6366f1);
  overflow: hidden;
}

.pricing-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.pricing-glow-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at top, rgba(99,102,241,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.pricing-card--glow.is-visible .pricing-glow-ring {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-glow-ring {
    animation: none;
  }
}
```

---

**Animated price reveal.** Numbers count up from 0 to target on scroll-into-view. Cards stagger in first, then prices animate.

*Animation & Visual Details:*
- *Entrance*: Cards fade in with stagger; after cards are visible, price numbers count up from 0
- *Hover*: Card lifts, price number scales slightly
- *Gradients*: Price number uses gradient text
- *Radial circles*: Radial dot behind the currency symbol
- *Scroll trigger*: Two-stage — cards enter first (20% threshold), then prices animate when fully visible (50% threshold)
- *JS interaction*: Full count-up animation from 0 to final price value with easeOutQuart

```html
<section data-amb-section="pricing" class="pricing-section pricing-section--animate">
  <div class="container">
    <div class="pricing-header">
      <h2 class="pricing-title">Pricing</h2>
    </div>
    <div class="pricing-cards">
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Starter</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value" data-count-target="0">$0</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta" href="#">Get started</a>
      </article>
      <article class="pricing-card pricing-card--featured">
        <div class="pricing-badge">Popular</div>
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Pro</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-currency">$</span>
          <span class="pricing-value" data-count-target="49" data-prefix="$">$0</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta pricing-cta--primary" href="#">Start trial</a>
      </article>
      <article class="pricing-card">
        <div class="pricing-card-header">
          <h3 class="pricing-tier">Enterprise</h3>
        </div>
        <div class="pricing-amount">
          <span class="pricing-value" data-count-target="199" data-prefix="$">$0</span>
          <span class="pricing-cadence">/mo</span>
        </div>
        <a class="pricing-cta" href="#">Contact sales</a>
      </article>
    </div>
  </div>
</section>
```

```css
.pricing-section--animate .pricing-value {
  background: linear-gradient(135deg, #1e293b, #334155);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: transform 0.2s ease;
}

.pricing-card--featured .pricing-value {
  background: linear-gradient(135deg, #6366f1, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card:hover .pricing-value {
  transform: scale(1.02);
}
```

*JS behavior:*
```javascript
function easeOutQuart(t) {
  return 1 - Math.pow(1 - t, 4);
}

function animatePrice(element, target, prefix, duration) {
  const start = performance.now();
  const isDecimal = target % 1 !== 0;

  function update(currentTime) {
    const elapsed = currentTime - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = easeOutQuart(progress);
    const current = eased * target;

    element.textContent = prefix + (isDecimal ? current.toFixed(0) : Math.floor(current));
    element.dataset.count = current;

    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
      element.textContent = prefix + (isDecimal ? target.toFixed(0) : target);
      element.dataset.count = target;
    }
  }

  requestAnimationFrame(update);
}

const priceValues = document.querySelectorAll('.pricing-value[data-count-target]');
const priceObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !entry.target.dataset.animated) {
      const el = entry.target;
      const target = parseFloat(el.dataset.countTarget);
      const prefix = el.dataset.prefix || '$';
      el.dataset.animated = 'true';
      setTimeout(() => animatePrice(el, target, prefix, 1200), 400);
      priceObserver.unobserve(el);
    }
  });
}, { threshold: 0.5 });

priceValues.forEach(el => priceObserver.observe(el));
```

---

Copy rules: lead the feature list with the BIGGEST differentiator, not the cheapest. Use "Everything in Starter, plus:" on higher tiers to imply progression. Never use placeholder prices like "$99/mo" without a unit (per user, per month, per seat).

Layout rules: the featured tier should be visually distinct (border accent, slight scale-up, or "Most popular" badge) — pick one, not all three.

CSS custom property summary:
```css
:root {
  --pricing-enter-duration: 0.5s;
  --pricing-stagger: 0.12s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```