UI Components Easy

Pricing — Tiers + Contact-sales enterprise card

A four-card SaaS pricing layout for the fictional brand Northwind with three priced tiers (Starter, Pro, Scale) and a distinct dark Enterprise card that shows Custom instead of a number. The Enterprise CTA opens an inline contact-sales lead form capturing name, work email, and company size, with live validation and an animated success state. A monthly/yearly billing switch flips prices, and a most-popular badge marks the Pro plan.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --brand: #5b5bf0;
  --brand-d: #4646d6;
  --brand-700: #3a3ab8;
  --brand-50: #eef0ff;
  --accent: #00b4a6;
  --accent-soft: #d8f5f2;
  --ink: #101322;
  --ink-2: #3a4060;
  --muted: #6c7393;
  --bg: #f6f7fb;
  --white: #ffffff;
  --surface: #ffffff;
  --line: rgba(16, 19, 34, 0.1);
  --line-2: rgba(16, 19, 34, 0.16);
  --ok: #2f9e6f;
  --warn: #d98a2b;
  --danger: #d4503e;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --sh-1: 0 1px 2px rgba(16, 19, 34, 0.08);
  --sh-2: 0 8px 24px rgba(16, 19, 34, 0.08);
  --sh-lift: 0 18px 44px rgba(16, 19, 34, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) 20px 72px;
}

/* ---------- Masthead ---------- */
.masthead {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
  margin-bottom: 22px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand);
}

.brand-name {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.masthead-title {
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.masthead-sub {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 auto 26px;
  max-width: 520px;
}

/* ---------- Billing toggle ---------- */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--sh-1);
}

.billing-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s ease;
}

.billing-label.is-active {
  color: var(--ink);
}

.save-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: var(--line-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease;
}

.switch[aria-checked="true"] {
  background: var(--brand);
}

.switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.switch[aria-checked="true"] .switch-knob {
  transform: translateX(20px);
}

/* ---------- Tiers ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}

.tier {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  box-shadow: var(--sh-1);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--line-2);
}

.tier-popular {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), var(--sh-2);
}

.tier-popular:hover {
  box-shadow: 0 0 0 1px var(--brand), var(--sh-lift);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(91, 91, 240, 0.4);
}

.tier-enterprise {
  background: linear-gradient(165deg, #161a2e 0%, #1f2440 100%);
  border-color: transparent;
  color: #e7e9f5;
}

.tier-enterprise:hover {
  box-shadow: var(--sh-lift);
  border-color: transparent;
}

.enterprise-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b8bff;
  background: rgba(91, 91, 240, 0.18);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.tier-head {
  margin-bottom: 16px;
}

.tier-name {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.tier-tagline {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
  min-height: 38px;
}

.tier-enterprise .tier-tagline {
  color: #a9adcf;
}

/* ---------- Price ---------- */
.price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 4px;
  min-height: 44px;
}

.currency {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink-2);
  align-self: flex-start;
  margin-top: 4px;
}

.tier-enterprise .currency {
  color: #c4c8e6;
}

.amount {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.amount.flip {
  animation: flipPrice 0.4s ease;
}

@keyframes flipPrice {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-8px); opacity: 0; }
  55% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.period {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}

.price-custom .custom-word {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.price-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 18px;
  min-height: 20px;
}

.tier-enterprise .price-note {
  color: #a9adcf;
}

/* ---------- CTA buttons ---------- */
.cta {
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  border-radius: var(--r-md);
  padding: 12px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  width: 100%;
  margin-bottom: 20px;
}

.cta:active {
  transform: scale(0.98);
}

.cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-50), 0 0 0 5px var(--brand);
}

.cta-primary {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(91, 91, 240, 0.32);
}

.cta-primary:hover {
  background: var(--brand-d);
  box-shadow: 0 10px 22px rgba(91, 91, 240, 0.42);
}

.cta-ghost {
  background: var(--white);
  color: var(--brand-700);
  border-color: var(--line-2);
}

.cta-ghost:hover {
  background: var(--brand-50);
  border-color: var(--brand);
}

.cta-dark {
  background: var(--white);
  color: var(--ink);
}

.cta-dark:hover {
  background: #eef0ff;
}

.tier-enterprise .cta-dark:focus-visible {
  box-shadow: 0 0 0 3px rgba(91, 91, 240, 0.4), 0 0 0 5px #8b8bff;
}

.cta-block {
  width: 100%;
  margin-bottom: 8px;
}

/* ---------- Features ---------- */
.features {
  list-style: none;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.tier-enterprise .features {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--ink-2);
}

.tier-enterprise .features li {
  color: #d4d7ee;
}

.ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  margin-top: 1px;
}

.ico.ok {
  background: rgba(47, 158, 111, 0.14);
  color: var(--ok);
}

.ico.off {
  background: rgba(16, 19, 34, 0.06);
  color: var(--muted);
}

.ico.shield {
  background: rgba(91, 91, 240, 0.22);
  color: #a6a6ff;
}

/* ---------- Reassurance line ---------- */
.reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 36px auto 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

.reassure svg {
  color: var(--accent);
  flex: none;
}

/* ---------- Overlay + modal ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 19, 34, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  animation: fadeIn 0.2s ease forwards;
}

.overlay[hidden] {
  display: none;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lift);
  padding: 30px 28px 26px;
  animation: popIn 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--ink);
}

.modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-50), 0 0 0 5px var(--brand);
}

.enterprise-badge--modal {
  color: var(--brand);
  background: var(--brand-50);
  margin-bottom: 14px;
}

.modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.modal-sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 22px;
}

/* ---------- Form ---------- */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder {
  color: #aab0cc;
}

.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}

.field input.invalid,
.field select.invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(212, 80, 62, 0.12);
}

.select-wrap {
  position: relative;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
}

.select-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.err {
  display: block;
  min-height: 16px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--danger);
  margin-top: 5px;
}

.modal-fineprint {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  margin: 8px 0 0;
}

/* ---------- Success state ---------- */
.modal-success {
  text-align: center;
  padding: 6px 0;
}

.modal-success[hidden] {
  display: none;
}

.success-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  animation: popIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 200;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 11px 16px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lift);
  animation: toastIn 0.25s ease;
}

.toast.out {
  animation: toastOut 0.3s ease forwards;
}

.toast .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

@keyframes toastIn {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes toastOut {
  to { transform: translateY(16px); opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .page {
    padding: 28px 14px 56px;
  }
  .tiers {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tier-popular {
    order: -1;
  }
  .tier-tagline {
    min-height: 0;
  }
  .billing-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
  .masthead-sub {
    font-size: 0.98rem;
  }
  .modal {
    padding: 26px 20px 22px;
  }
  .reassure {
    align-items: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

(function () {
  "use strict";

  /* ---------- Toast helper ---------- */
  var toastStack = document.getElementById("toastStack");
  function toast(msg) {
    if (!toastStack) return;
    var el = document.createElement("div");
    el.className = "toast";
    el.innerHTML = '<span class="dot"></span><span></span>';
    el.lastChild.textContent = msg;
    toastStack.appendChild(el);
    setTimeout(function () {
      el.classList.add("out");
      el.addEventListener("animationend", function () {
        el.remove();
      });
    }, 2600);
  }

  /* ---------- Billing toggle (Monthly / Yearly) ---------- */
  var billingSwitch = document.getElementById("billingSwitch");
  var lblMonthly = document.getElementById("lblMonthly");
  var lblYearly = document.getElementById("lblYearly");
  var amounts = Array.prototype.slice.call(document.querySelectorAll(".amount"));
  var notes = Array.prototype.slice.call(document.querySelectorAll(".price-note[data-monthly]"));

  function setBilling(yearly) {
    billingSwitch.setAttribute("aria-checked", yearly ? "true" : "false");
    lblMonthly.classList.toggle("is-active", !yearly);
    lblYearly.classList.toggle("is-active", yearly);

    var key = yearly ? "yearly" : "monthly";

    amounts.forEach(function (el) {
      var next = el.getAttribute("data-" + key);
      if (next === null || next === el.textContent) return;
      el.classList.remove("flip");
      // force reflow so the animation can replay
      void el.offsetWidth;
      el.classList.add("flip");
      // swap the value mid-flip
      setTimeout(function () {
        el.textContent = next;
      }, 180);
    });

    notes.forEach(function (el) {
      var n = el.getAttribute("data-" + key);
      if (n !== null) el.textContent = n;
    });
  }

  billingSwitch.addEventListener("click", function () {
    var yearly = billingSwitch.getAttribute("aria-checked") !== "true";
    setBilling(yearly);
  });
  // start in monthly
  setBilling(false);

  /* ---------- Non-enterprise CTAs → toast ---------- */
  document.querySelectorAll(".cta[data-plan]").forEach(function (btn) {
    if (btn.id === "contactSalesBtn") return;
    btn.addEventListener("click", function () {
      var plan = btn.getAttribute("data-plan");
      if (plan === "Starter") {
        toast("Starter account created — welcome aboard!");
      } else {
        toast("Starting your " + plan + " trial…");
      }
    });
  });

  /* ---------- Contact-sales modal ---------- */
  var overlay = document.getElementById("overlay");
  var modal = document.getElementById("modal");
  var openBtn = document.getElementById("contactSalesBtn");
  var closeBtn = document.getElementById("modalClose");
  var form = document.getElementById("leadForm");
  var modalForm = document.getElementById("modalForm");
  var modalSuccess = document.getElementById("modalSuccess");
  var successDone = document.getElementById("successDone");
  var successMsg = document.getElementById("successMsg");
  var lastFocused = null;

  function openModal() {
    lastFocused = document.activeElement;
    // reset to form view each open
    modalSuccess.hidden = true;
    modalForm.hidden = false;
    form.reset();
    clearErrors();
    overlay.hidden = false;
    document.body.style.overflow = "hidden";
    var first = document.getElementById("leadName");
    if (first) setTimeout(function () { first.focus(); }, 40);
  }

  function closeModal() {
    overlay.hidden = true;
    document.body.style.overflow = "";
    if (lastFocused && typeof lastFocused.focus === "function") lastFocused.focus();
  }

  openBtn.addEventListener("click", openModal);
  closeBtn.addEventListener("click", closeModal);

  // overlay click (outside the modal) closes
  overlay.addEventListener("mousedown", function (e) {
    if (e.target === overlay) closeModal();
  });

  // Esc closes
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape" && !overlay.hidden) closeModal();
  });

  // simple focus trap inside the modal
  overlay.addEventListener("keydown", function (e) {
    if (e.key !== "Tab") return;
    var focusables = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    var list = Array.prototype.filter.call(focusables, function (el) {
      return !el.hidden && el.offsetParent !== null;
    });
    if (!list.length) return;
    var first = list[0];
    var last = list[list.length - 1];
    if (e.shiftKey && document.activeElement === first) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && document.activeElement === last) {
      e.preventDefault();
      first.focus();
    }
  });

  /* ---------- Validation ---------- */
  var nameEl = document.getElementById("leadName");
  var emailEl = document.getElementById("leadEmail");
  var sizeEl = document.getElementById("leadSize");
  var errName = document.getElementById("errName");
  var errEmail = document.getElementById("errEmail");
  var errSize = document.getElementById("errSize");
  var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  function setError(input, errEl, msg) {
    input.classList.add("invalid");
    input.setAttribute("aria-invalid", "true");
    errEl.textContent = msg;
  }
  function clearError(input, errEl) {
    input.classList.remove("invalid");
    input.removeAttribute("aria-invalid");
    errEl.textContent = "";
  }
  function clearErrors() {
    clearError(nameEl, errName);
    clearError(emailEl, errEmail);
    clearError(sizeEl, errSize);
  }

  // live-clear errors as the user fixes fields
  nameEl.addEventListener("input", function () {
    if (nameEl.value.trim()) clearError(nameEl, errName);
  });
  emailEl.addEventListener("input", function () {
    if (EMAIL_RE.test(emailEl.value.trim())) clearError(emailEl, errEmail);
  });
  sizeEl.addEventListener("change", function () {
    if (sizeEl.value) clearError(sizeEl, errSize);
  });

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var ok = true;
    var firstBad = null;

    if (!nameEl.value.trim()) {
      setError(nameEl, errName, "Please enter your name.");
      firstBad = firstBad || nameEl;
      ok = false;
    } else {
      clearError(nameEl, errName);
    }

    var email = emailEl.value.trim();
    if (!email) {
      setError(emailEl, errEmail, "Work email is required.");
      firstBad = firstBad || emailEl;
      ok = false;
    } else if (!EMAIL_RE.test(email)) {
      setError(emailEl, errEmail, "Enter a valid email address.");
      firstBad = firstBad || emailEl;
      ok = false;
    } else {
      clearError(emailEl, errEmail);
    }

    if (!sizeEl.value) {
      setError(sizeEl, errSize, "Select a company size.");
      firstBad = firstBad || sizeEl;
      ok = false;
    } else {
      clearError(sizeEl, errSize);
    }

    if (!ok) {
      if (firstBad) firstBad.focus();
      toast("Please fix the highlighted fields.");
      return;
    }

    // success
    var firstName = nameEl.value.trim().split(/\s+/)[0];
    successMsg.textContent =
      "Thanks, " + firstName + "! A Northwind specialist will email you within one business day.";
    modalForm.hidden = true;
    modalSuccess.hidden = false;
    toast("Request sent — we'll be in touch soon.");
    if (successDone) setTimeout(function () { successDone.focus(); }, 40);
  });

  successDone.addEventListener("click", closeModal);
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Northwind — Pricing</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="page">
    <header class="masthead">
      <div class="brand">
        <span class="brand-mark" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none">
            <path d="M4 14.5 12 4l8 10.5-8 5.5-8-5.5Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
            <path d="M12 4v16" stroke="currentColor" stroke-width="1.8"/>
          </svg>
        </span>
        <span class="brand-name">Northwind</span>
      </div>
      <h1 class="masthead-title">Pricing that scales with your team</h1>
      <p class="masthead-sub">Start free, grow into Pro, and talk to us when you need enterprise-grade controls. No hidden fees.</p>

      <div class="billing-toggle" role="group" aria-label="Billing period">
        <span class="billing-label" id="lblMonthly">Monthly</span>
        <button class="switch" id="billingSwitch" type="button" role="switch" aria-checked="false" aria-labelledby="lblMonthly lblYearly">
          <span class="switch-knob" aria-hidden="true"></span>
        </button>
        <span class="billing-label" id="lblYearly">Yearly <span class="save-pill">Save 20%</span></span>
      </div>
    </header>

    <section class="tiers" aria-label="Pricing plans">
      <!-- Starter -->
      <article class="tier">
        <header class="tier-head">
          <h2 class="tier-name">Starter</h2>
          <p class="tier-tagline">For individuals shipping their first project.</p>
        </header>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="0" data-yearly="0">0</span>
          <span class="period">/mo</span>
        </div>
        <p class="price-note" data-monthly="Free forever" data-yearly="Free forever">Free forever</p>
        <button class="cta cta-ghost" type="button" data-plan="Starter">Get started</button>
        <ul class="features">
          <li><span class="ico ok" aria-hidden="true">✓</span> 1 project</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Up to 3 seats</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> 5 GB storage</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Community support</li>
          <li><span class="ico off" aria-hidden="true">✕</span> Audit logs</li>
        </ul>
      </article>

      <!-- Pro (Most popular) -->
      <article class="tier tier-popular">
        <span class="popular-badge">Most popular</span>
        <header class="tier-head">
          <h2 class="tier-name">Pro</h2>
          <p class="tier-tagline">For growing teams that need more power.</p>
        </header>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="24" data-yearly="19">24</span>
          <span class="period">/mo</span>
        </div>
        <p class="price-note" data-monthly="per seat, billed monthly" data-yearly="per seat, billed yearly">per seat, billed monthly</p>
        <button class="cta cta-primary" type="button" data-plan="Pro">Start 14-day trial</button>
        <ul class="features">
          <li><span class="ico ok" aria-hidden="true">✓</span> Unlimited projects</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Up to 25 seats</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> 250 GB storage</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Priority email support</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Audit logs &amp; roles</li>
        </ul>
      </article>

      <!-- Scale -->
      <article class="tier">
        <header class="tier-head">
          <h2 class="tier-name">Scale</h2>
          <p class="tier-tagline">For larger orgs with advanced needs.</p>
        </header>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount" data-monthly="59" data-yearly="47">59</span>
          <span class="period">/mo</span>
        </div>
        <p class="price-note" data-monthly="per seat, billed monthly" data-yearly="per seat, billed yearly">per seat, billed monthly</p>
        <button class="cta cta-ghost" type="button" data-plan="Scale">Start 14-day trial</button>
        <ul class="features">
          <li><span class="ico ok" aria-hidden="true">✓</span> Everything in Pro</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Up to 100 seats</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> 2 TB storage</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Advanced analytics</li>
          <li><span class="ico ok" aria-hidden="true">✓</span> Usage-based add-ons</li>
        </ul>
      </article>

      <!-- Enterprise (no price) -->
      <article class="tier tier-enterprise">
        <span class="enterprise-badge" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none">
            <path d="M12 3 4 6v5c0 5 3.4 8.3 8 10 4.6-1.7 8-5 8-10V6l-8-3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
          </svg>
          Enterprise
        </span>
        <header class="tier-head">
          <h2 class="tier-name">Enterprise</h2>
          <p class="tier-tagline">For organizations with security, compliance, and scale requirements.</p>
        </header>
        <div class="price price-custom">
          <span class="custom-word">Custom</span>
        </div>
        <p class="price-note">Volume pricing &amp; annual contracts</p>
        <button class="cta cta-dark" type="button" id="contactSalesBtn" data-plan="Enterprise">Contact sales</button>
        <ul class="features features-enterprise">
          <li><span class="ico shield" aria-hidden="true">✓</span> Everything in Scale</li>
          <li><span class="ico shield" aria-hidden="true">✓</span> SSO &amp; SCIM provisioning</li>
          <li><span class="ico shield" aria-hidden="true">✓</span> 99.95% uptime SLA</li>
          <li><span class="ico shield" aria-hidden="true">✓</span> Dedicated support manager</li>
          <li><span class="ico shield" aria-hidden="true">✓</span> Custom data residency</li>
        </ul>
      </article>
    </section>

    <p class="reassure">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
        <path d="M12 3 4 6v5c0 5 3.4 8.3 8 10 4.6-1.7 8-5 8-10V6l-8-3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
        <path d="m9 11.5 2 2 4-4.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      All plans include SSL, daily backups, and a 30-day money-back guarantee.
    </p>
  </main>

  <!-- Contact sales overlay -->
  <div class="overlay" id="overlay" hidden>
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDesc" id="modal">
      <button class="modal-close" type="button" id="modalClose" aria-label="Close contact form">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" aria-hidden="true">
          <path d="m6 6 12 12M18 6 6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
      </button>

      <div class="modal-body" id="modalForm">
        <span class="enterprise-badge enterprise-badge--modal" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none">
            <path d="M12 3 4 6v5c0 5 3.4 8.3 8 10 4.6-1.7 8-5 8-10V6l-8-3Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
          </svg>
          Enterprise
        </span>
        <h2 class="modal-title" id="modalTitle">Talk to sales</h2>
        <p class="modal-sub" id="modalDesc">Tell us a bit about your team and we'll reach out within one business day.</p>

        <form id="leadForm" novalidate>
          <div class="field">
            <label for="leadName">Full name</label>
            <input type="text" id="leadName" name="name" autocomplete="name" placeholder="Jordan Ellis" aria-describedby="errName" />
            <span class="err" id="errName" aria-live="polite"></span>
          </div>

          <div class="field">
            <label for="leadEmail">Work email</label>
            <input type="email" id="leadEmail" name="email" autocomplete="email" placeholder="jordan@acme.co" aria-describedby="errEmail" />
            <span class="err" id="errEmail" aria-live="polite"></span>
          </div>

          <div class="field">
            <label for="leadSize">Company size</label>
            <div class="select-wrap">
              <select id="leadSize" name="size" aria-describedby="errSize">
                <option value="" selected disabled>Select team size…</option>
                <option value="1-50">1–50 employees</option>
                <option value="51-200">51–200 employees</option>
                <option value="201-1000">201–1,000 employees</option>
                <option value="1000+">1,000+ employees</option>
              </select>
              <svg class="select-caret" viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
                <path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <span class="err" id="errSize" aria-live="polite"></span>
          </div>

          <button class="cta cta-primary cta-block" type="submit">Request a call</button>
          <p class="modal-fineprint">We respect your inbox. No spam, ever.</p>
        </form>
      </div>

      <div class="modal-success" id="modalSuccess" hidden>
        <span class="success-check" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="30" height="30" fill="none">
            <path d="m5 12.5 4.5 4.5L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
        <h2 class="modal-title">You're all set</h2>
        <p class="modal-sub" id="successMsg">Thanks! A Northwind specialist will email you shortly.</p>
        <button class="cta cta-ghost cta-block" type="button" id="successDone">Done</button>
      </div>
    </div>
  </div>

  <div class="toast-stack" id="toastStack" aria-live="polite" aria-atomic="true"></div>

  <script src="script.js"></script>
</body>
</html>

Tiers + Contact-sales enterprise card

A pricing section for the fictional SaaS brand Northwind. Three priced tiers — Starter (free), Pro (highlighted as Most popular), and Scale — sit beside a visually distinct dark Enterprise card. Instead of a number, the Enterprise card reads Custom and lists enterprise-only features: SSO & SCIM, a 99.95% uptime SLA, a dedicated support manager, and custom data residency.

A monthly/yearly billing switch flips every priced tier’s amount with a short animation and updates the per-seat billing note (yearly saves 20%). The Enterprise Contact sales button opens an accessible modal (role="dialog", aria-modal) with an inline lead form — full name, work email, and a company-size select. The form validates on submit, focuses the first invalid field, clears errors live as you type, and on success swaps to an animated confirmation panel with a personalized message.

The overlay closes on Esc, on outside click, and via the close button; focus is trapped inside the dialog and returned to the trigger on close. Non-enterprise CTAs fire a small toast. Everything is vanilla JS, uses inline SVG icons only, and reflows to a single column down to ~360px with the popular plan pulled to the top on mobile.