<div class="container py-5 text-center">
  <h1 class="bsprice-title">Simple, transparent pricing</h1>
  <p class="bsprice-sub">Every plan includes unlimited projects and community support.</p>

  <div class="bsprice-toggle-row">
    <span class="bsprice-toggle-label" id="bspriceMonthlyLabel">Monthly</span>
    <div class="form-check form-switch bsprice-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="bspriceToggle">
    </div>
    <span class="bsprice-toggle-label" id="bspriceAnnualLabel">Annual <span class="badge bg-success-subtle text-success-emphasis ms-1">Save 20%</span></span>
  </div>

  <div class="row justify-content-center g-4 mt-2">
    <div class="col-md-6 col-lg-4">
      <div class="card bsprice-card h-100">
        <div class="card-body">
          <h5 class="text-uppercase text-muted small fw-bold mb-3">Starter</h5>
          <div class="bsprice-amount"><span class="bsprice-num" data-monthly="0" data-annual="0">$0</span><span class="bsprice-period">/mo</span></div>
          <p class="text-muted small mb-4">For solo projects just getting started.</p>
          <ul class="list-unstyled bsprice-features text-start">
            <li>✓ 1 project</li>
            <li>✓ Community support</li>
            <li>✓ 1 GB storage</li>
          </ul>
          <button class="btn btn-outline-dark w-100">Get started</button>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card bsprice-card bsprice-featured h-100">
        <span class="badge bg-dark bsprice-pill">Most popular</span>
        <div class="card-body">
          <h5 class="text-uppercase text-white-50 small fw-bold mb-3">Pro</h5>
          <div class="bsprice-amount"><span class="bsprice-num" data-monthly="24" data-annual="19">$24</span><span class="bsprice-period">/mo</span></div>
          <p class="text-white-50 small mb-4">For growing teams that need more room.</p>
          <ul class="list-unstyled bsprice-features text-start">
            <li>✓ Unlimited projects</li>
            <li>✓ Priority support</li>
            <li>✓ 100 GB storage</li>
          </ul>
          <button class="btn btn-light w-100 fw-bold">Get started</button>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-lg-4">
      <div class="card bsprice-card h-100">
        <div class="card-body">
          <h5 class="text-uppercase text-muted small fw-bold mb-3">Team</h5>
          <div class="bsprice-amount"><span class="bsprice-num" data-monthly="79" data-annual="63">$79</span><span class="bsprice-period">/mo</span></div>
          <p class="text-muted small mb-4">For teams that need SSO and audit logs.</p>
          <ul class="list-unstyled bsprice-features text-start">
            <li>✓ Everything in Pro</li>
            <li>✓ SSO &amp; audit log</li>
            <li>✓ 1 TB storage</li>
          </ul>
          <button class="btn btn-outline-dark w-100">Get started</button>
        </div>
      </div>
    </div>
  </div>
</div>

body { background: #fff; }

.bsprice-title { font-weight: 800; letter-spacing: -0.02em; }
.bsprice-sub { color: #6b7280; margin-bottom: 28px; }

.bsprice-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.bsprice-toggle-label { font-size: 14px; font-weight: 600; color: #9ca3af; transition: color .15s; }
.bsprice-toggle-label.bsprice-active { color: #111827; }
.bsprice-switch .form-check-input { width: 2.6em; height: 1.4em; cursor: pointer; }

.bsprice-card {
  border: 1px solid #eceef1;
  border-radius: 14px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bsprice-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(15,23,42,.08); }

.bsprice-featured {
  background: #111827;
  color: #fff;
  border-color: #111827;
}
.bsprice-pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
}

.bsprice-amount { display: flex; align-items: baseline; justify-content: center; gap: 3px; margin-bottom: 6px; }
.bsprice-num { font-size: 40px; font-weight: 800; transition: opacity .12s ease; }
.bsprice-num.bsprice-swap { opacity: 0; }
.bsprice-period { font-size: 13px; color: inherit; opacity: .6; }

.bsprice-features li { padding: 5px 0; font-size: 13.5px; }

const toggle = document.getElementById('bspriceToggle');
const monthlyLabel = document.getElementById('bspriceMonthlyLabel');
const annualLabel = document.getElementById('bspriceAnnualLabel');
const nums = document.querySelectorAll('.bsprice-num');

toggle.addEventListener('change', () => {
  const annual = toggle.checked;
  monthlyLabel.classList.toggle('bsprice-active', !annual);
  annualLabel.classList.toggle('bsprice-active', annual);

  nums.forEach(el => {
    // Fade the number out, swap the digits while invisible, fade back in —
    // avoids the price just snapping to a new value with no transition.
    el.classList.add('bsprice-swap');
    setTimeout(() => {
      const value = annual ? el.dataset.annual : el.dataset.monthly;
      el.textContent = '$' + value;
      el.classList.remove('bsprice-swap');
    }, 120);
  });
});

// Start in the "monthly active" visual state.
monthlyLabel.classList.add('bsprice-active');