Live demo — Launchstock · LaunchPage Pro — the real template with its sample brand. Use the switch (bottom-right) to flip launch ⇄ waitlist mode; forms simulate, nothing is sent.
The one-attribute switch, live:
. Tag any element .launch-only or .waitlist-only and these four lines do the rest. Works with JavaScript disabled. */ body[data-mode="waitlist"] .launch-only { display: none !important; } body[data-mode="launch"] .waitlist-only { display: none !important; } /* ---------- 5a. Header / sticky nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: rgba(250, 249, 247, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 200ms ease, box-shadow 200ms ease; } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .site-nav { display: flex; align-items: center; gap: 26px; } .nav-link { color: var(--body-c); font-weight: 550; font-size: 15.5px; } .nav-link:hover { color: var(--ink); text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-md); } .nav-toggle-bar { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 200ms ease, opacity 200ms ease; } body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- 5b. Hero ---------- */ .hero { padding: 84px 0 0; text-align: center; background: radial-gradient(52% 46% at 50% 0%, rgba(5, 150, 105, 0.07), transparent 70%), var(--paper); } .hero h1 { max-width: 760px; margin: 22px auto 0; font-size: clamp(34px, 5.4vw, 58px); } .hero-sub { max-width: 620px; margin: 20px auto 0; font-size: clamp(17px, 2vw, 19.5px); color: var(--muted); } .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; } .hero-note { margin-top: 16px; font-size: 14px; color: var(--muted); } /* Waitlist capture (hero + CTA band) */ .waitlist-form { display: flex; gap: 10px; max-width: 460px; margin: 34px auto 0; } .waitlist-form input[type="email"] { flex: 1; min-width: 0; padding: 13px 20px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); } .waitlist-form input[type="email"]::placeholder { color: var(--muted); } .waitlist-form input[type="email"]:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 0; border-color: var(--accent); } .waitlist-meter { margin-top: 16px; font-size: 14.5px; color: var(--muted); } .waitlist-meter strong { color: var(--accent-deep); font-variant-numeric: tabular-nums; } .form-success { max-width: 460px; margin: 34px auto 0; padding: 14px 22px; border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid rgba(5, 150, 105, 0.25); color: var(--accent-deep); font-weight: 600; font-size: 15.5px; } /* ---------- 5c. Product shot (browser-framed CSS mock) ---------- */ .hero-shot { max-width: 920px; margin: 58px auto 0; padding-inline: 24px; } .browser-frame { background: var(--surface); border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); overflow: hidden; text-align: left; } .frame-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); } .frame-dots { display: flex; gap: 6px; } .frame-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); } .frame-url { flex: 1; max-width: 340px; padding: 5px 14px; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The dashboard drawn in pure HTML/CSS — swap for a real screenshot with one , see README-setup.md */ .mock { padding: 22px 24px 26px; } .mock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .mock-title { font-size: 15px; font-weight: 700; color: var(--ink); } .mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } .mock-stat { padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); } .mock-stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .mock-stat-value { margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .mock-stat-value.is-accent { color: var(--accent); } .mock-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; } .mock-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; } .mock-panel-title { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; } .mock-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; } .mock-row:first-of-type { border-top: none; } .mock-avatar { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--accent-deep); background: var(--accent-soft); } .mock-name { flex: 1; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-mrr { color: var(--muted); font-variant-numeric: tabular-nums; } .health { flex: none; min-width: 44px; text-align: center; padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 750; font-size: 12px; font-variant-numeric: tabular-nums; } .health-ok { background: var(--accent-soft); color: var(--accent-deep); } .health-warn { background: var(--wl-soft); color: var(--wl); } .health-bad { background: #fdeaea; color: var(--bad); } .mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding-top: 6px; } .mock-chart span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), rgba(5, 150, 105, 0.45)); min-height: 12%; } .mock-alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--wl-soft); border: 1px solid rgba(180, 83, 9, 0.18); font-size: 12.5px; color: var(--wl); line-height: 1.45; } /* ---------- 5d. Social-proof strip (changes per mode) ---------- */ .proof { padding: 44px 0; background: var(--surface); border-block: 1px solid var(--line); text-align: center; } .proof-label { font-size: 13px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; } .logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 44px; } .logo-mark { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--line-strong); color: color-mix(in srgb, var(--muted) 62%, var(--line-strong)); white-space: nowrap; } /* Waitlist variant of the strip */ .wl-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; } .avatar-stack { display: flex; } .avatar-stack span { width: 40px; height: 40px; margin-left: -10px; border-radius: 50%; border: 2.5px solid var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #ffffff; background: var(--accent); } .avatar-stack span:first-child { margin-left: 0; } .avatar-stack span:nth-child(2) { background: #0d9488; } .avatar-stack span:nth-child(3) { background: var(--wl); } .avatar-stack span:nth-child(4) { background: #57534e; } .avatar-stack span:nth-child(5) { background: var(--accent-deep); } .wl-proof-copy { text-align: left; max-width: 420px; } .wl-proof-copy strong { display: block; color: var(--ink); font-size: 17px; letter-spacing: -0.01em; } .wl-proof-copy small { color: var(--muted); font-size: 14px; } /* ---------- 5e. How it works ---------- */ .steps { counter-reset: step; } .step-card { position: relative; padding: 30px 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 16px; } .step-card h3 { font-size: 20px; margin-bottom: 10px; } .step-card p { font-size: 15.5px; color: var(--muted); } /* ---------- 5f. Features ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-card { padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); transition: transform 180ms ease, box-shadow 180ms ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); } .feature-card h3 { font-size: 18.5px; margin-bottom: 8px; } .feature-card p { font-size: 15px; color: var(--muted); } /* ---------- 5g. Testimonials ---------- */ .quote-card { display: flex; flex-direction: column; gap: 20px; padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .quote-stars { color: var(--warn); font-size: 15px; letter-spacing: 2px; } .quote-card blockquote { margin: 0; font-size: 16.5px; color: var(--ink); line-height: 1.55; } .quote-who { display: flex; align-items: center; gap: 12px; margin-top: auto; } .quote-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--accent-deep); background: var(--accent-soft); } .quote-name { font-weight: 700; color: var(--ink); font-size: 15px; line-height: 1.3; } .quote-role { font-size: 13.5px; color: var(--muted); } /* ---------- 5h. Pricing (launch mode only) ---------- */ .billing-toggle { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 44px; font-size: 15px; font-weight: 600; color: var(--muted); } .billing-toggle .is-active { color: var(--ink); } .switch { position: relative; width: 52px; height: 30px; padding: 0; border: none; border-radius: var(--radius-pill); background: var(--line-strong); transition: background-color 180ms ease; } .switch[aria-checked="true"] { background: var(--accent-strong); } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-sm); transition: transform 180ms ease; } .switch[aria-checked="true"]::after { transform: translateX(22px); } .save-pill { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: 12.5px; font-weight: 700; } .tier { position: relative; display: flex; flex-direction: column; padding: 30px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .tier-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); } .tier-flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: var(--radius-pill); background: var(--accent-strong); color: #ffffff; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .tier h3 { font-size: 20px; } .tier-desc { margin-top: 6px; font-size: 14.5px; color: var(--muted); } .price { display: flex; align-items: baseline; gap: 3px; margin-top: 20px; color: var(--ink); } .price-currency { font-size: 22px; font-weight: 700; } .price-amount { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .price-period { font-size: 15px; color: var(--muted); font-weight: 550; } .price-note { margin-top: 4px; font-size: 13px; color: var(--muted); min-height: 1.4em; } .tier-features { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 11px; font-size: 15px; } .tier-features li { display: flex; gap: 10px; align-items: flex-start; } .tick { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-strong); } .tier .btn { margin-top: auto; width: 100%; } .pricing-foot { margin-top: 30px; text-align: center; font-size: 14px; color: var(--muted); } /* Waitlist replacement for the pricing section */ .wl-pricing-card { max-width: 560px; margin: 0 auto; padding: 40px 34px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); } .wl-pricing-card h3 { font-size: 24px; margin: 14px 0 10px; } .wl-pricing-card p { color: var(--muted); font-size: 16px; } /* ---------- 5i. FAQ ---------- */ .faq-list { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .faq-q { margin: 0; font-size: inherit; } .faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; background: none; border: none; text-align: left; font-size: 16.5px; font-weight: 650; color: var(--ink); } .faq-chevron { flex: none; color: var(--muted); transition: transform 200ms ease; } .faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); } .faq-a { padding: 0 22px 20px; font-size: 15.5px; color: var(--body-c); } /* ---------- 5j. Final CTA band ---------- */ .cta-band { padding: 92px 0; text-align: center; color: #ffffff; background: radial-gradient(60% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%), linear-gradient(135deg, var(--accent-deep), var(--accent-strong)); } .cta-band h2 { color: #ffffff; font-size: clamp(28px, 4.4vw, 42px); max-width: 640px; margin: 0 auto 16px; } .cta-band p { max-width: 520px; margin: 0 auto; font-size: 18px; color: rgba(255, 255, 255, 0.82); } .cta-band .hero-cta { margin-top: 32px; } .cta-band .waitlist-form input[type="email"] { border-color: transparent; } .cta-band .waitlist-meter { color: rgba(255, 255, 255, 0.78); } .cta-band .waitlist-meter strong { color: #ffffff; } .cta-band .form-success { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } .cta-band .hero-note { color: rgba(255, 255, 255, 0.7); } /* ---------- 5k. Footer ---------- */ .site-footer { padding: 64px 0 40px; background: var(--paper); border-top: 1px solid var(--line); font-size: 14.5px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; } .footer-blurb { max-width: 280px; margin-top: 14px; color: var(--muted); } .footer-col h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-col a { color: var(--body-c); } .footer-col a:hover { color: var(--ink); } .footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; } /* ---------- 6. Reveal-on-scroll ---------- Elements are fully visible without JavaScript. script.js adds .reveal-ready to only when motion is allowed. */ body.reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; } body.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- 7. Responsive ---------- */ @media (max-width: 960px) { .grid-3, .features-grid { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .tier-featured { order: -1; } } @media (max-width: 860px) { .nav-toggle { display: flex; } .site-nav { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform 200ms ease, opacity 200ms ease, visibility 200ms; } body.nav-open .site-nav { transform: none; opacity: 1; visibility: visible; } .nav-link { padding: 12px 4px; font-size: 17px; border-bottom: 1px solid var(--line); } .nav-actions { flex-direction: column; align-items: stretch; margin: 14px 0 0; } .nav-actions .btn { width: 100%; } } @media (max-width: 640px) { .section { padding-block: 64px; } .hero { padding-top: 56px; } .grid-3, .features-grid, .mock-stats { grid-template-columns: 1fr; } .mock-body { grid-template-columns: 1fr; } .mock-side { display: none; } .waitlist-form { flex-direction: column; } .waitlist-form .btn { width: 100%; } .hero-shot { padding-inline: 8px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .footer-legal { flex-direction: column; } .wl-proof { flex-direction: column; } .wl-proof-copy { text-align: center; } }
New — Slack alerts for at-risk accounts Launching early 2027 — waitlist open

Know which customers will churn before they do.

Fernly watches product usage, support tickets and billing signals, then tells your team which accounts need attention this week — while there is still time to save them.

No credit card required · Connected in 20 minutes

1,847 people are already in line — you’d be #1,848. One email at launch, nothing else.

Trusted by customer teams at

Arcline Fieldnote Copperwick Halyard Mossbank Tidewater

1,847 founders and CS leads are already in line. From seed-stage startups to forty-person customer teams.

How it works

From scattered signals to a Monday morning list

Three steps. The third one is the product.

Connect

Plug in Stripe, your product database and your help desk with read-only keys. Twenty minutes, no engineers on standby.

Score

Every account gets a live health score built from usage depth, support sentiment and billing signals — with the “why” attached.

Act

Your Monday digest lists the accounts that need attention this week, ranked by revenue at risk, each with a suggested play.

Features

Everything you need to run retention like a system

Not another dashboard to check — Fernly comes to you with the short list.

Scores that explain themselves

Every health score unpacks into the exact signals that moved it — no black box, no “trust the algorithm”.

Renewal radar

A rolling 90-day view of every renewal, ranked by revenue at risk, so nobody finds out at the renewal call.

Slack & email digests

The Monday digest lands where your team already lives. Urgent drops trigger same-day alerts.

Playbooks, not guesswork

Each risk type maps to a play — check-in call, training session, exec escalation — with templates included.

Segments that stay fresh

Slice by plan, industry, owner or lifecycle stage. Segments update live as accounts move.

Read-only by design

Fernly never writes to your systems. Read-only keys, SOC 2 hosting, data deleted on cancellation.

Customers

Teams that stopped being surprised

★★★★★
“We saved two of our five biggest accounts last quarter because Fernly flagged them six weeks before renewal. It paid for the year in one save.”
Mara Okafor
Head of Customer Success, Copperwick
★★★★★
“The Monday digest replaced a 45-minute pipeline meeting. The team just works the list now — the arguing about who’s at risk is gone.”
Dan Reyes
Co-founder, Fieldnote
★★★★★
“Setup genuinely took an afternoon. Read-only keys meant security signed off the same day — that never happens.”
Priya Lai
VP Operations, Tidewater
Pricing

Priced by accounts, not by seats

Invite the whole team on every plan. Start free, no card required.

Save 20%

Starter

For founders doing customer success on the side.

$ 29 /mo

billed monthly

  • Up to 50 tracked accounts
  • Health scores & weekly digest
  • Stripe + help desk integrations
  • Email support
Start free trial

Scale

For CS orgs running retention across segments.

$ 199 /mo

billed monthly

  • Unlimited tracked accounts
  • Everything in Growth
  • API access & exports
  • SSO & audit log
  • Dedicated onboarding
Talk to us

Prices in USD. Every plan starts with a 14-day free trial — no credit card, cancel with one click.

Founding-member pricing

Pricing goes live on launch day

Everyone on the waitlist locks in founding-member pricing — 30% off every plan, for as long as you stay subscribed.

FAQ

Fair questions, straight answers

From three signal groups: product usage (logins, feature depth, seat activity), support health (ticket volume and sentiment) and billing signals (failed payments, downgrades, invoice disputes). Each score expands to show exactly which signals moved it, and Growth plans can re-weight the groups to match how churn actually happens in your business.

Stripe and Paddle for billing; Intercom, Help Scout and Zendesk for support; Postgres, MySQL and Segment for product usage; Slack for alerts. Connections use read-only credentials and take about twenty minutes end to end.

Fernly is read-only by design — it never writes to your systems. Data is encrypted in transit and at rest, hosted on SOC 2 Type II infrastructure, and deleted within 30 days of cancellation. A DPA is available on every paid plan.

The Starter plan exists exactly for this. If you have more than twenty paying customers, you already have accounts quietly going cold — Fernly is the difference between noticing in week two and noticing at the cancellation email.

You pick a plan or you walk away — we don't take a card up front, so there's nothing to forget to cancel. Your connections and score history are kept for 30 days in case you come back.

Early 2027, onboarding the list in order. Waitlist members get first access, founding-member pricing (30% off for life) and a hand from us with the initial setup. We send one email at launch — no drip sequence, promise.

Yes — the Scale plan supports multiple isolated workspaces under one login, one invoice. About a fifth of our customers are agencies and fractional CS operators running retention for client portfolios.

Stop finding out at the renewal call.

Connect your stack this afternoon and get your first health digest on Monday.

No credit card required · Cancel with one click

Be first in line.

One email when we launch — plus founding-member pricing locked in for life.

You’d be #1,848 of 1,847+ in line.