<div class="spl-page">
  <main class="spl-content"><p>&#8593; Page content above the footer</p></main>
  <footer class="spl">
    <div class="spl-inner">
      <div class="spl-plans" id="splPlans">
        <button class="spl-plan" data-plan="free">
          <span class="spl-plan-name">Free</span>
          <span class="spl-plan-price">$0</span>
          <span class="spl-plan-cta">Current plan</span>
        </button>
        <button class="spl-plan" data-plan="pro">
          <span class="spl-plan-badge">Most popular</span>
          <span class="spl-plan-name">Pro</span>
          <span class="spl-plan-price">$19<small>/mo</small></span>
          <span class="spl-plan-cta">Upgrade</span>
        </button>
        <button class="spl-plan" data-plan="team">
          <span class="spl-plan-name">Team</span>
          <span class="spl-plan-price">$49<small>/mo</small></span>
          <span class="spl-plan-cta">Upgrade</span>
        </button>
        <button class="spl-plan" data-plan="enterprise">
          <span class="spl-plan-name">Enterprise</span>
          <span class="spl-plan-price">Custom</span>
          <span class="spl-plan-cta">Contact sales</span>
        </button>
      </div>

      <div class="spl-bottom">
        <div class="spl-col">
          <p class="spl-brand">Northline</p>
          <p class="spl-copy">&copy; 2026 Northline Inc.</p>
        </div>
        <ul class="spl-links">
          <li><a href="#">Full pricing</a></li>
          <li><a href="#">Compare plans</a></li>
          <li><a href="#">Docs</a></li>
          <li><a href="#">Privacy</a></li>
        </ul>
      </div>

      <div class="spl-toast" id="splToast" hidden></div>
    </div>
  </footer>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fafaf9}
.spl-page{min-height:100vh;display:flex;flex-direction:column}
.spl-content{flex:1;display:flex;align-items:center;justify-content:center;color:#a8a29e;font-size:13px;padding:50px 20px}

.spl{background:#fff;border-top:1px solid #e2e8f0;position:relative}
.spl-inner{max-width:1040px;margin:0 auto;padding:34px 24px 26px}

.spl-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:26px}
.spl-plan{position:relative;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;padding:16px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.spl-plan:hover{border-color:#6366f1;transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(99,102,241,.35)}
.spl-plan-badge{position:absolute;top:-9px;right:12px;background:#6366f1;color:#fff;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:20px;letter-spacing:.3px}
.spl-plan-name{font-size:12.5px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.spl-plan-price{font-size:19px;font-weight:800;color:#0f172a}
.spl-plan-price small{font-size:11px;font-weight:600;color:#94a3b8}
.spl-plan-cta{margin-top:4px;font-size:11.5px;font-weight:700;color:#4f46e5}
.spl-plan[data-plan="free"] .spl-plan-cta{color:#94a3b8}

.spl-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:20px;border-top:1px solid #f1f5f9}
.spl-brand{color:#0f172a;font-weight:800;font-size:14px;margin-bottom:4px}
.spl-copy{font-size:11.5px;color:#94a3b8}
.spl-links{list-style:none;display:flex;gap:18px;flex-wrap:wrap}
.spl-links a{color:#64748b;text-decoration:none;font-size:12.5px;transition:color .15s}
.spl-links a:hover{color:#0f172a}

.spl-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);background:#0f172a;color:#fff;font-size:12.5px;font-weight:600;padding:11px 18px;border-radius:12px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);z-index:30;opacity:0;transition:opacity .2s,transform .2s}
.spl-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:720px){ .spl-plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .spl-plans{grid-template-columns:1fr} .spl-bottom{flex-direction:column;align-items:flex-start} }

var plans = document.getElementById('splPlans');
var toast = document.getElementById('splToast');
var toastTimer = null;
var currentPlan = 'free';

var labels = {
  free: 'You are already on the Free plan',
  pro: 'Redirecting to checkout for the Pro plan\u2026',
  team: 'Redirecting to checkout for the Team plan\u2026',
  enterprise: 'Opening a message to sales for Enterprise\u2026'
};

function showToast(message) {
  toast.textContent = message;
  toast.hidden = false;
  requestAnimationFrame(function () { toast.classList.add('show'); });
  clearTimeout(toastTimer);
  toastTimer = setTimeout(function () {
    toast.classList.remove('show');
    setTimeout(function () { toast.hidden = true; }, 200);
  }, 2200);
}

function markCurrentPlan() {
  plans.querySelectorAll('.spl-plan').forEach(function (btn) {
    var cta = btn.querySelector('.spl-plan-cta');
    var isCurrent = btn.dataset.plan === currentPlan;
    if (isCurrent) {
      cta.textContent = 'Current plan';
    } else if (btn.dataset.plan === 'enterprise') {
      cta.textContent = 'Contact sales';
    } else {
      cta.textContent = 'Upgrade';
    }
  });
}

plans.addEventListener('click', function (e) {
  var btn = e.target.closest('.spl-plan');
  if (!btn) return;
  var plan = btn.dataset.plan;
  showToast(labels[plan] || 'Opening plan details\u2026');
  if (plan !== 'enterprise') {
    currentPlan = plan;
    markCurrentPlan();
  }
});

markCurrentPlan();