- {/* Sky cloud bloom inside the highlighted Business card */}
+ {/* Continuously sweeping gradient ring on the featured card */}
{p.highlight && (
-
-
+
+

+
)}
{p.highlight && (
-
+
Most popular
)}
- {p.name}
- {p.summary}
+ {p.name}
+ {p.summary}
- {p.price}
+ {p.annual}
- / month
+
+ / month · billed yearly
+
{/* sends per day visual chip */}
- {p.sendsPerDay !== Infinity && (
-
-
- {p.sendsPerDay.toLocaleString()} sends / day
-
- )}
- {p.sendsPerDay === Infinity && (
-
-
- 15,000+ sends / day
-
- )}
+
+
+ {p.sendsPerDay === Infinity ? '15,000+' : p.sendsPerDay.toLocaleString()} sends / day
+
@@ -799,10 +827,10 @@ const plans = [
))}
-
+
All plans include warmup, sending, inbox, analytics and CRM.
- See the full comparison
+ See full comparison
@@ -861,6 +889,57 @@ const plans = [
}
.animate-toast-in { animation: toast-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
+ /* ── Continuous (never-ending) animations ───────────────────── */
+
+ /* Activity ribbon marquee — scrolls forever */
+ @keyframes marquee-loop {
+ from { transform: translateX(0); }
+ to { transform: translateX(-50%); }
+ }
+ .marquee-track {
+ animation: marquee-loop 60s linear infinite;
+ width: max-content;
+ }
+ .marquee-mask {
+ mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
+ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
+ overflow: hidden;
+ }
+
+ /* Inbox reply stream — scrolls vertically forever */
+ @keyframes reply-scroll {
+ from { transform: translateY(0); }
+ to { transform: translateY(-50%); }
+ }
+ .reply-track {
+ animation: reply-scroll 50s linear infinite;
+ }
+
+ /* Worker send spark — slides across bar forever */
+ @keyframes send-spark-anim {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(400%); }
+ }
+ .send-spark {
+ animation: send-spark-anim 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+ }
+
+ /* Pricing card sweep — subtle highlight crosses the featured card forever */
+ @keyframes pricing-sweep-anim {
+ 0% { transform: translateX(-120%); opacity: 0; }
+ 45% { opacity: 0.55; }
+ 100% { transform: translateX(120%); opacity: 0; }
+ }
+ .pricing-sweep {
+ background: linear-gradient(115deg,
+ transparent 0%,
+ transparent 40%,
+ rgba(125,211,252,0.45) 50%,
+ transparent 60%,
+ transparent 100%);
+ animation: pricing-sweep-anim 5s ease-in-out infinite;
+ }
+
/* Scroll-in fades — only applied once .js-ready is set on ,
so content stays visible if JS / motion fails to load. */
html.js-ready .fade-in {
@@ -969,18 +1048,22 @@ const plans = [
}, { amount: 0.4 });
});
- // ── Pricing billing toggle (Monthly ↔ Annual) ────────────────────
+ // ── Pricing billing toggle (Monthly ↔ Annual, annual default) ───
const toggle = document.getElementById('billing-toggle');
const thumb = document.getElementById('toggle-thumb');
if (toggle && thumb) {
const btns = toggle.querySelectorAll('button[data-billing]');
- const apply = (mode) => {
- // Slide the thumb behind the active button
+ const apply = (mode, animated = true) => {
const btn = toggle.querySelector(`button[data-billing="${mode}"]`);
if (!btn) return;
const left = btn.offsetLeft;
const width = btn.offsetWidth;
- animate(thumb, { left: `${left}px`, width: `${width}px` }, { duration: 0.35, ease: [0.22, 1, 0.36, 1] });
+ if (animated) {
+ animate(thumb, { left: `${left}px`, width: `${width}px` }, { duration: 0.35, ease: [0.22, 1, 0.36, 1] });
+ } else {
+ thumb.style.left = `${left}px`;
+ thumb.style.width = `${width}px`;
+ }
btns.forEach((b) => {
if (b.getAttribute('data-billing') === mode) {
b.classList.remove('text-foreground/70');
@@ -990,10 +1073,10 @@ const plans = [
b.classList.remove('text-white');
}
});
- // Swap prices on every pricing card
document.querySelectorAll('.price-amount').forEach((el) => {
const next = el.getAttribute(`data-${mode}`) || '';
if (!next) return;
+ if (!animated) { el.textContent = next; return; }
animate(el, { opacity: [1, 0] }, { duration: 0.12 }).then(() => {
el.textContent = next;
animate(el, { opacity: [0, 1] }, { duration: 0.18 });
@@ -1004,6 +1087,8 @@ const plans = [
});
};
btns.forEach((b) => b.addEventListener('click', () => apply(b.getAttribute('data-billing'))));
+ // Default selection — annual, no animation on initial paint
+ requestAnimationFrame(() => apply('annual', false));
}