809 lines
54 KiB
HTML
809 lines
54 KiB
HTML
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>No-Show Killer — Business Plan</title>
|
|
<style>
|
|
:root{
|
|
--ink:#0B1210; --surface:#111A16; --card:#15211C; --card-2:#18271F;
|
|
--line:rgba(140,180,160,.14); --line-strong:rgba(140,180,160,.28);
|
|
--text:#E9F1EC; --muted:#93A79E; --faint:#6F857B;
|
|
--emerald:#34D399; --emerald-deep:#10B981; --emerald-glow:#6EE7B7;
|
|
--gold:#E7B24C; --gold-soft:#F5D07A;
|
|
--coral:#F0796B;
|
|
--hero-grad: radial-gradient(120% 90% at 80% -10%, rgba(52,211,153,.16), transparent 55%),
|
|
radial-gradient(90% 70% at 5% 0%, rgba(231,178,76,.10), transparent 50%);
|
|
--shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0,0,0,.7);
|
|
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
|
|
--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
|
|
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
|
|
}
|
|
@media (prefers-color-scheme: light){
|
|
:root{
|
|
--ink:#F3F7F3; --surface:#FBFDFB; --card:#FFFFFF; --card-2:#F6FAF7;
|
|
--line:rgba(20,60,40,.10); --line-strong:rgba(20,60,40,.20);
|
|
--text:#0D1613; --muted:#4E625A; --faint:#78897F;
|
|
--emerald:#059669; --emerald-deep:#047857; --emerald-glow:#0EA271;
|
|
--gold:#A9791F; --gold-soft:#B98A2E; --coral:#C8503F;
|
|
--hero-grad: radial-gradient(120% 90% at 80% -10%, rgba(5,150,105,.10), transparent 55%),
|
|
radial-gradient(90% 70% at 5% 0%, rgba(169,121,31,.08), transparent 50%);
|
|
--shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(20,60,40,.35);
|
|
}
|
|
}
|
|
:root[data-theme="dark"]{
|
|
--ink:#0B1210; --surface:#111A16; --card:#15211C; --card-2:#18271F;
|
|
--line:rgba(140,180,160,.14); --line-strong:rgba(140,180,160,.28);
|
|
--text:#E9F1EC; --muted:#93A79E; --faint:#6F857B;
|
|
--emerald:#34D399; --emerald-deep:#10B981; --emerald-glow:#6EE7B7;
|
|
--gold:#E7B24C; --gold-soft:#F5D07A; --coral:#F0796B;
|
|
--hero-grad: radial-gradient(120% 90% at 80% -10%, rgba(52,211,153,.16), transparent 55%),
|
|
radial-gradient(90% 70% at 5% 0%, rgba(231,178,76,.10), transparent 50%);
|
|
--shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 50px -30px rgba(0,0,0,.7);
|
|
}
|
|
:root[data-theme="light"]{
|
|
--ink:#F3F7F3; --surface:#FBFDFB; --card:#FFFFFF; --card-2:#F6FAF7;
|
|
--line:rgba(20,60,40,.10); --line-strong:rgba(20,60,40,.20);
|
|
--text:#0D1613; --muted:#4E625A; --faint:#78897F;
|
|
--emerald:#059669; --emerald-deep:#047857; --emerald-glow:#0EA271;
|
|
--gold:#A9791F; --gold-soft:#B98A2E; --coral:#C8503F;
|
|
--hero-grad: radial-gradient(120% 90% at 80% -10%, rgba(5,150,105,.10), transparent 55%),
|
|
radial-gradient(90% 70% at 5% 0%, rgba(169,121,31,.08), transparent 50%);
|
|
--shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -28px rgba(20,60,40,.35);
|
|
}
|
|
|
|
*{box-sizing:border-box}
|
|
html{scroll-behavior:smooth}
|
|
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }
|
|
body{
|
|
margin:0; background:var(--ink); color:var(--text);
|
|
font-family:var(--sans); font-size:17px; line-height:1.6;
|
|
-webkit-font-smoothing:antialiased; overflow-x:hidden;
|
|
}
|
|
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
|
|
section{padding:88px 0; border-top:1px solid var(--line)}
|
|
h1,h2,h3{font-family:var(--serif); font-weight:600; text-wrap:balance; margin:0}
|
|
p{margin:0}
|
|
a{color:inherit}
|
|
.tnum{font-variant-numeric:tabular-nums}
|
|
|
|
/* eyebrow / labels */
|
|
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald); font-weight:600}
|
|
.eyebrow.gold{color:var(--gold)}
|
|
.kicker{font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
|
|
|
|
/* top ribbon */
|
|
.ribbon{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
|
|
background:color-mix(in srgb, var(--ink) 82%, transparent);
|
|
border-bottom:1px solid var(--line)}
|
|
.ribbon .wrap{display:flex; align-items:center; gap:16px; padding-top:14px; padding-bottom:14px}
|
|
.brand{font-family:var(--serif); font-weight:700; font-size:18px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px}
|
|
.spark{width:11px;height:11px;border-radius:3px;background:var(--emerald);box-shadow:0 0 14px var(--emerald);display:inline-block}
|
|
.ribbon .status{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
|
|
.pill{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
|
|
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald)}
|
|
.pill.live .dot{background:var(--emerald); box-shadow:0 0 8px var(--emerald)}
|
|
.pill.warn{color:var(--gold)} .pill.warn .dot{background:var(--gold)}
|
|
a.pill.pdflink{text-decoration:none; color:var(--emerald); border-color:color-mix(in srgb,var(--emerald) 40%,var(--line-strong)); transition:background .15s}
|
|
a.pill.pdflink:hover{background:color-mix(in srgb,var(--emerald) 12%,transparent)}
|
|
|
|
/* market TAM/SAM/SOM */
|
|
.mkt{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px}
|
|
@media(max-width:720px){ .mkt{grid-template-columns:1fr} }
|
|
.mkt .m{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:var(--shadow)}
|
|
.mkt .m .t{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald)}
|
|
.mkt .m.sam .t{color:var(--gold)} .mkt .m.som .t{color:var(--coral)}
|
|
.mkt .m .v{font-family:var(--serif); font-weight:700; font-size:clamp(30px,4.4vw,40px); letter-spacing:-.02em; margin:10px 0 6px}
|
|
.mkt .m .d{color:var(--muted); font-size:14px; line-height:1.5} .mkt .m .d b{color:var(--text); font-weight:600}
|
|
|
|
/* comparison table */
|
|
.tblwrap{overflow-x:auto; margin-top:30px; border:1px solid var(--line); border-radius:14px; -webkit-overflow-scrolling:touch}
|
|
.tbl{width:100%; border-collapse:collapse; font-size:14px; min-width:660px}
|
|
.tbl th,.tbl td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
|
|
.tbl thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); font-weight:600; background:var(--card-2); line-height:1.35}
|
|
.tbl tbody tr:last-child td{border-bottom:none}
|
|
.tbl td:first-child,.tbl th:first-child{color:var(--text); font-weight:600; min-width:220px}
|
|
.tbl .us{background:color-mix(in srgb,var(--emerald) 9%,transparent)}
|
|
.tbl thead th.us{color:var(--emerald); background:color-mix(in srgb,var(--emerald) 15%,transparent)}
|
|
.tbl .y{color:var(--emerald); font-weight:600} .tbl .n{color:var(--faint)} .tbl .p{color:var(--gold)}
|
|
.illus-note{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em}
|
|
.price-amt{font-family:var(--serif)} .price-amt .per{font-size:15px; color:var(--faint); font-weight:400; font-family:var(--sans)}
|
|
@media(max-width:720px){ .ribbon .status .pill.hideSm{display:none} }
|
|
|
|
/* hero */
|
|
.hero{background:var(--hero-grad); border-top:none; padding-top:76px; padding-bottom:64px; position:relative; overflow:hidden}
|
|
#confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}
|
|
.hero .wrap{position:relative; z-index:2}
|
|
.hero h1{font-size:clamp(38px,6.4vw,74px); line-height:1.02; letter-spacing:-.02em; max-width:16ch}
|
|
.hero .lede{margin-top:24px; font-size:clamp(18px,2.2vw,22px); color:var(--muted); max-width:56ch; line-height:1.5}
|
|
.hero .em{color:var(--emerald)}
|
|
.heroStat{margin-top:44px; display:flex; align-items:flex-end; gap:28px; flex-wrap:wrap}
|
|
.bigmoney{font-family:var(--serif); font-weight:700; font-size:clamp(52px,10vw,104px); line-height:.9; letter-spacing:-.03em;
|
|
background:linear-gradient(180deg,var(--emerald-glow),var(--emerald-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
|
|
.heroStat .cap{font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--faint); max-width:26ch; line-height:1.5; padding-bottom:8px}
|
|
.heroStat .cap b{color:var(--text); font-weight:600}
|
|
|
|
/* generic grid */
|
|
.grid{display:grid; gap:18px}
|
|
.g2{grid-template-columns:repeat(2,1fr)}
|
|
.g3{grid-template-columns:repeat(3,1fr)}
|
|
.g4{grid-template-columns:repeat(4,1fr)}
|
|
@media(max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
|
|
@media(max-width:620px){ .g2,.g3,.g4{grid-template-columns:1fr} }
|
|
|
|
.lead{font-size:clamp(24px,3vw,30px); font-family:var(--serif); line-height:1.28; letter-spacing:-.01em; max-width:24ch}
|
|
.sub{color:var(--muted); max-width:60ch; margin-top:18px}
|
|
|
|
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow)}
|
|
.card h3{font-size:20px; letter-spacing:-.01em}
|
|
.card p{color:var(--muted); margin-top:9px; font-size:15.5px; line-height:1.55}
|
|
.card .tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald); display:block; margin-bottom:12px}
|
|
.card .tag.gold{color:var(--gold)}
|
|
|
|
/* problem stat band */
|
|
.statband{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card)}
|
|
.statband > div{padding:28px 26px; border-right:1px solid var(--line)}
|
|
.statband > div:last-child{border-right:none}
|
|
.statband .n{font-family:var(--serif); font-weight:700; font-size:clamp(34px,5vw,48px); letter-spacing:-.02em; color:var(--text)}
|
|
.statband .n .u{color:var(--gold); font-size:.6em}
|
|
.statband .l{color:var(--muted); font-size:14.5px; margin-top:8px; line-height:1.45}
|
|
@media(max-width:720px){ .statband{grid-template-columns:1fr} .statband>div{border-right:none;border-bottom:1px solid var(--line)} .statband>div:last-child{border-bottom:none} }
|
|
|
|
/* how it works — steps */
|
|
.flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:12px}
|
|
.step{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; position:relative}
|
|
.step .no{font-family:var(--mono); font-size:12px; color:var(--emerald); letter-spacing:.1em}
|
|
.step h4{font-family:var(--serif); font-weight:600; font-size:17px; margin:12px 0 6px}
|
|
.step p{color:var(--muted); font-size:14px; line-height:1.5; margin:0}
|
|
.step .arrow{position:absolute; right:-11px; top:50%; transform:translateY(-50%); color:var(--line-strong); z-index:2; font-size:18px}
|
|
@media(max-width:900px){ .flow{grid-template-columns:repeat(2,1fr)} .step .arrow{display:none} }
|
|
@media(max-width:520px){ .flow{grid-template-columns:1fr} }
|
|
|
|
/* capability groups */
|
|
.capgroup{margin-top:28px}
|
|
.capgroup > .h{display:flex; align-items:baseline; gap:14px; margin-bottom:14px}
|
|
.capgroup > .h .ttl{font-family:var(--serif); font-size:19px; font-weight:600}
|
|
.capgroup > .h .meta{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.05em}
|
|
.caplist{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
|
|
@media(max-width:620px){ .caplist{grid-template-columns:1fr} }
|
|
.cap{border:1px solid var(--line); border-radius:13px; padding:18px 20px; background:var(--card-2); display:flex; gap:14px}
|
|
.cap .mk{width:34px;height:34px;flex:0 0 34px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--emerald) 16%,transparent);color:var(--emerald);font-size:18px}
|
|
.cap.g .mk{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)}
|
|
.cap h4{font-size:16px; margin:0 0 4px; font-family:var(--sans); font-weight:650}
|
|
.cap p{color:var(--muted); font-size:14px; line-height:1.5; margin:0}
|
|
|
|
/* status board */
|
|
.board{display:grid; grid-template-columns:1.3fr 1fr; gap:18px}
|
|
@media(max-width:820px){ .board{grid-template-columns:1fr} }
|
|
.statusrow{display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px dashed var(--line)}
|
|
.statusrow:last-child{border-bottom:none}
|
|
.statusrow .ic{width:22px;height:22px;flex:0 0 22px;border-radius:6px;display:grid;place-items:center;font-size:13px;font-weight:700}
|
|
.ic.ok{background:color-mix(in srgb,var(--emerald) 20%,transparent); color:var(--emerald)}
|
|
.ic.gate{background:color-mix(in srgb,var(--gold) 22%,transparent); color:var(--gold)}
|
|
.statusrow .tx{flex:1}
|
|
.statusrow .tx b{font-weight:650; font-size:15.5px}
|
|
.statusrow .tx span{display:block; color:var(--muted); font-size:13.5px; margin-top:2px}
|
|
.statusrow .tag{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.04em}
|
|
|
|
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
|
|
.metrics > div{background:var(--card); padding:20px}
|
|
.metrics .k{font-family:var(--serif); font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--emerald)}
|
|
.metrics .k.gold{color:var(--gold)}
|
|
.metrics .m{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-top:6px}
|
|
|
|
/* business case */
|
|
.econ{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch}
|
|
@media(max-width:820px){ .econ{grid-template-columns:1fr} }
|
|
.econ .panel{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-strong); border-radius:18px; padding:28px}
|
|
.econ .panel .eq{font-family:var(--mono); color:var(--muted); font-size:14px; line-height:2}
|
|
.econ .panel .eq .hi{color:var(--emerald); font-weight:600}
|
|
.econ .panel .eq .hg{color:var(--gold); font-weight:600}
|
|
.econ .big{font-family:var(--serif); font-weight:700; font-size:clamp(30px,4.4vw,42px); letter-spacing:-.02em; margin-top:14px; line-height:1.1}
|
|
|
|
.tamrow{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px}
|
|
@media(max-width:720px){ .tamrow{grid-template-columns:repeat(2,1fr)} }
|
|
.tam{border:1px dashed var(--line-strong); border-radius:12px; padding:16px}
|
|
.tam .seg{font-weight:650; font-size:15px}
|
|
.tam .why{color:var(--muted); font-size:13px; margin-top:4px}
|
|
|
|
/* the ask / phases */
|
|
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px}
|
|
@media(max-width:820px){ .phases{grid-template-columns:1fr} }
|
|
.phase{border:1px solid var(--line); border-radius:16px; padding:24px; background:var(--card)}
|
|
.phase .when{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--gold); text-transform:uppercase}
|
|
.phase h3{font-size:19px; margin:10px 0 12px}
|
|
.phase ul{margin:0; padding:0; list-style:none}
|
|
.phase li{position:relative; padding-left:22px; color:var(--muted); font-size:14.5px; margin:9px 0; line-height:1.45}
|
|
.phase li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--emerald)}
|
|
.phase.next{border-color:var(--emerald); box-shadow:0 0 0 1px var(--emerald) inset, 0 24px 50px -34px var(--emerald-deep)}
|
|
|
|
.close{background:var(--hero-grad); text-align:center}
|
|
.close h2{font-size:clamp(28px,4.2vw,44px); letter-spacing:-.02em; max-width:20ch; margin:0 auto}
|
|
.close p{color:var(--muted); margin:20px auto 0; max-width:52ch}
|
|
.foot{border-top:1px solid var(--line); padding:34px 0; color:var(--faint); font-family:var(--mono); font-size:12.5px; letter-spacing:.03em}
|
|
.foot .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
|
|
|
|
.callout{margin-top:20px; border-left:3px solid var(--gold); background:color-mix(in srgb,var(--gold) 8%,transparent); padding:14px 18px; border-radius:0 10px 10px 0; color:var(--muted); font-size:14.5px}
|
|
.callout b{color:var(--text)}
|
|
|
|
/* ribbon nav */
|
|
.nav{display:flex; gap:22px; margin:0 auto}
|
|
.nav a{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--muted); text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; transition:color .18s, border-color .18s}
|
|
.nav a:hover{color:var(--text); border-bottom-color:var(--emerald)}
|
|
@media(max-width:860px){ .nav{display:none} }
|
|
|
|
/* illustrative tag on hero number */
|
|
.illus{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line-strong); border-radius:999px; padding:3px 8px; align-self:flex-start; margin-top:6px}
|
|
|
|
/* product preview mock */
|
|
.demo{background:linear-gradient(180deg, color-mix(in srgb,var(--emerald) 6%,var(--surface)), var(--surface))}
|
|
.device{margin-top:32px; border:1px solid var(--line-strong); border-radius:18px; background:var(--card); box-shadow:0 40px 80px -50px rgba(0,0,0,.8), var(--shadow); overflow:hidden}
|
|
.topbar{display:flex; align-items:center; gap:8px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--card-2)}
|
|
.topbar .dots{display:flex; gap:6px}
|
|
.topbar .dots i{width:10px;height:10px;border-radius:50%;display:block;background:var(--line-strong)}
|
|
.topbar .addr{margin-left:10px; font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.02em}
|
|
.topbar .tab{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--emerald); border:1px solid var(--line-strong); border-radius:6px; padding:3px 9px}
|
|
.screen{padding:26px; display:grid; grid-template-columns:1.4fr 1fr; gap:24px}
|
|
@media(max-width:760px){ .screen{grid-template-columns:1fr; padding:20px} }
|
|
.roihead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
|
|
.roihead .big{font-family:var(--serif); font-weight:700; font-size:clamp(40px,7vw,60px); letter-spacing:-.03em; line-height:.95;
|
|
background:linear-gradient(180deg,var(--emerald-glow),var(--emerald-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
|
|
.delta{font-family:var(--mono); font-size:13px; color:var(--emerald); background:color-mix(in srgb,var(--emerald) 15%,transparent); border-radius:999px; padding:4px 10px; font-weight:600}
|
|
.roihead .lbl{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); width:100%; margin-top:8px}
|
|
.chart{display:flex; align-items:flex-end; gap:5px; height:96px; margin-top:22px; padding-top:8px; border-top:1px solid var(--line)}
|
|
.chart .bar{flex:1; background:linear-gradient(180deg,var(--emerald),var(--emerald-deep)); border-radius:4px 4px 2px 2px; min-height:4px; opacity:.9}
|
|
.chart .bar.peak{background:linear-gradient(180deg,var(--gold-soft),var(--gold))}
|
|
.chartcap{font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:8px; letter-spacing:.04em}
|
|
.panelttl{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin-bottom:12px}
|
|
.winfeed{display:flex; flex-direction:column; gap:10px}
|
|
.win{display:flex; align-items:center; gap:11px; font-size:14px}
|
|
.win .em{font-size:15px}
|
|
.win .amt{margin-left:auto; font-family:var(--mono); font-weight:600; color:var(--emerald)}
|
|
.win .desc{color:var(--muted)}
|
|
.radarmini{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
|
|
.rrow{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px}
|
|
.rrow .nm{color:var(--text)} .rrow .tm{color:var(--faint); font-size:12.5px}
|
|
.rchip{margin-left:auto; font-family:var(--mono); font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600}
|
|
.rchip.high{color:var(--coral); background:color-mix(in srgb,var(--coral) 16%,transparent)}
|
|
.rchip.med{color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent)}
|
|
.rchip.low{color:var(--emerald); background:color-mix(in srgb,var(--emerald) 16%,transparent)}
|
|
.demo .cap-note{margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--faint); text-align:center; letter-spacing:.03em}
|
|
|
|
/* scroll reveal */
|
|
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
|
|
.reveal.in{opacity:1; transform:none}
|
|
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none} }
|
|
|
|
/* print / PDF — clean light paper, nothing clipped */
|
|
@media print{
|
|
:root{
|
|
--ink:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#F6FAF7;
|
|
--line:rgba(20,60,40,.16); --line-strong:rgba(20,60,40,.28);
|
|
--text:#0D1613; --muted:#3E524A; --faint:#5A6E64;
|
|
--emerald:#047857; --emerald-deep:#065f46; --emerald-glow:#059669;
|
|
--gold:#9A6B15; --gold-soft:#A9791F; --coral:#B84331;
|
|
--hero-grad:none; --shadow:none;
|
|
}
|
|
*{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
|
|
@page{ size:A4; margin:14mm 14mm }
|
|
html,body{ background:#fff }
|
|
#confetti{ display:none !important }
|
|
.ribbon{ position:static; border-bottom:1px solid var(--line); backdrop-filter:none }
|
|
.ribbon .nav{ display:none }
|
|
.pdflink{ display:none !important }
|
|
.reveal{ opacity:1 !important; transform:none !important }
|
|
section{ padding:18px 0 !important; border-top:1px solid var(--line) }
|
|
.hero{ padding:8px 0 20px !important }
|
|
.hero h1{ font-size:32px }
|
|
.hero .lede{ font-size:16px }
|
|
.bigmoney{ font-size:46px }
|
|
.device{ box-shadow:none }
|
|
.capgroup{ margin-top:18px }
|
|
/* keep only atomic blocks intact across page breaks — not whole sections */
|
|
.card,.step,.cap,.tam,.phase,.statband,.device,.econ .panel,.metrics,.callout,.heroStat,.roihead,.chart,.mkt .m,.tblwrap{
|
|
break-inside:avoid; page-break-inside:avoid }
|
|
h1,h2,h3,.lead,.eyebrow,.panelttl,.kicker{ break-after:avoid }
|
|
.foot{ border-top:1px solid var(--line) }
|
|
}
|
|
</style>
|
|
|
|
<div class="ribbon">
|
|
<div class="wrap">
|
|
<span class="brand"><span class="spark"></span>No-Show Killer</span>
|
|
<nav class="nav">
|
|
<a href="#problem">Problem</a>
|
|
<a href="#product">Product</a>
|
|
<a href="#market">Market</a>
|
|
<a href="#competition">Competition</a>
|
|
<a href="#business">Model</a>
|
|
<a href="#ask">Plan</a>
|
|
</nav>
|
|
<div class="status">
|
|
<span class="pill live"><span class="dot"></span>Live in production</span>
|
|
<a class="pill pdflink" href="https://zoe-pitches.mosaic.site/no-show-killer/No-Show-Killer-Business-Plan.pdf">PDF ↓</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<header class="hero">
|
|
<canvas id="confetti" aria-hidden="true"></canvas>
|
|
<div class="wrap">
|
|
<span class="eyebrow">Business plan · Confidential</span>
|
|
<h1>Every empty chair is money walking out the door.</h1>
|
|
<p class="lede">No-Show Killer puts it back — <span class="em">automatically</span>. The moment a client cancels, it races down the waitlist by text and refills the slot before the owner even notices. No phone calls. No lost revenue.</p>
|
|
<div class="heroStat">
|
|
<div>
|
|
<div class="bigmoney tnum" id="hero-money" data-target="1240">$0</div>
|
|
<span class="illus">Illustrative unit value</span>
|
|
</div>
|
|
<div class="cap">Recovered from a <b>single</b> refilled appointment in a typical service business — the product's core unit of value, delivered on autopilot.</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- PROBLEM -->
|
|
<section id="problem">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">The problem</span>
|
|
<p class="lead" style="margin-top:14px">A no-show isn't a missed appointment. It's inventory that can never be sold again.</p>
|
|
<p class="sub">A salon chair, a dental slot, a training session, a table — all perishable. When someone cancels at the last minute, that hour is gone forever, and the standard fix is an owner frantically calling down a paper waitlist while running the front desk. Most of the time, the chair just stays empty.</p>
|
|
<div class="statband" style="margin-top:34px">
|
|
<div>
|
|
<div class="n">10–15<span class="u">%</span></div>
|
|
<div class="l">of revenue lost to no-shows & late cancellations at a typical appointment-based SMB.</div>
|
|
</div>
|
|
<div>
|
|
<div class="n">$200<span class="u">B+</span></div>
|
|
<div class="l">estimated annual cost of missed appointments across US service industries.</div>
|
|
</div>
|
|
<div>
|
|
<div class="n"><1<span class="u">min</span></div>
|
|
<div class="l">the window that matters — fill fast or the slot is dead. Humans can't move at that speed. Software can.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HOW IT WORKS -->
|
|
<section id="how">
|
|
<div class="wrap">
|
|
<span class="eyebrow">How it works</span>
|
|
<p class="lead" style="margin-top:14px">A cancellation triggers a race. First "YES" wins the chair.</p>
|
|
<p class="sub">The entire recovery loop runs over ordinary SMS — no app for the customer to download, no staff intervention required.</p>
|
|
<div class="flow">
|
|
<div class="step"><div class="no">01</div><h4>Chair opens</h4><p>A client cancels — manually, via a self-serve link, or synced from the calendar. The slot goes live.</p><span class="arrow">→</span></div>
|
|
<div class="step"><div class="no">02</div><h4>Cascade fires</h4><p>Waitlist clients are ranked and texted a real offer in sequence, respecting consent and quiet hours.</p><span class="arrow">→</span></div>
|
|
<div class="step"><div class="no">03</div><h4>First YES books</h4><p>A single "YES" reply claims the slot atomically — no double-books — and confirms the winner instantly.</p><span class="arrow">→</span></div>
|
|
<div class="step"><div class="no">04</div><h4>Revenue recovered</h4><p>The chair is refilled, a reminder is scheduled, and the owner sees the win. Money back in the till.</p></div>
|
|
</div>
|
|
<div class="callout"><b>And it prevents the gap in the first place.</b> Confirmations, reminders, and AI risk-scoring reduce how often a chair opens at all — so recovery is the safety net, not the whole strategy.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRODUCT PREVIEW -->
|
|
<section class="demo" id="preview">
|
|
<div class="wrap">
|
|
<span class="eyebrow">See it</span>
|
|
<p class="lead" style="margin-top:14px">The owner opens the app to one number: dollars they'd have lost.</p>
|
|
<p class="sub">Recovery, prediction, and proof on a single screen — the ROI dashboard, the live wins feed, and the No-Show Radar.</p>
|
|
|
|
<div class="device">
|
|
<div class="topbar">
|
|
<span class="dots"><i></i><i></i><i></i></span>
|
|
<span class="addr">app · overview</span>
|
|
<span class="tab">This month ▾</span>
|
|
</div>
|
|
<div class="screen">
|
|
<div>
|
|
<div class="roihead">
|
|
<div class="big tnum">$3,480</div>
|
|
<span class="delta">↑ 121% vs last month</span>
|
|
<span class="lbl">Revenue recovered · chairs refilled that would have sat empty</span>
|
|
</div>
|
|
<div class="chart" aria-hidden="true">
|
|
<span class="bar" style="height:26%"></span><span class="bar" style="height:38%"></span>
|
|
<span class="bar" style="height:31%"></span><span class="bar" style="height:52%"></span>
|
|
<span class="bar" style="height:44%"></span><span class="bar" style="height:63%"></span>
|
|
<span class="bar" style="height:58%"></span><span class="bar" style="height:71%"></span>
|
|
<span class="bar" style="height:66%"></span><span class="bar" style="height:84%"></span>
|
|
<span class="bar" style="height:79%"></span><span class="bar peak" style="height:100%"></span>
|
|
</div>
|
|
<div class="chartcap">Recovered revenue · last 12 weeks</div>
|
|
</div>
|
|
<div>
|
|
<div class="panelttl">🎉 Recent wins</div>
|
|
<div class="winfeed">
|
|
<div class="win"><span class="em">🎉</span><span class="desc">2:00 PM Cleaning refilled</span><span class="amt">+$220</span></div>
|
|
<div class="win"><span class="em">🎉</span><span class="desc">4:30 PM Cut & color refilled</span><span class="amt">+$185</span></div>
|
|
<div class="win"><span class="em">🎉</span><span class="desc">Tue 10 AM Exam refilled</span><span class="amt">+$140</span></div>
|
|
</div>
|
|
<div class="radarmini">
|
|
<div class="panelttl">📡 No-Show Radar · at risk today</div>
|
|
<div class="rrow"><span class="nm">Rae P.</span><span class="tm">· 3:15 PM</span><span class="rchip high">High · 95</span></div>
|
|
<div class="rrow"><span class="nm">Mia T.</span><span class="tm">· 5:00 PM</span><span class="rchip med">Med · 45</span></div>
|
|
<div class="rrow"><span class="nm">Sam K.</span><span class="tm">· 6:30 PM</span><span class="rchip low">Low · 8</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="cap-note">Representative interface · figures illustrative</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WHAT WE BUILT -->
|
|
<section id="product">
|
|
<div class="wrap">
|
|
<span class="eyebrow">What we've built</span>
|
|
<p class="lead" style="margin-top:14px">A complete, deployed platform — not a prototype.</p>
|
|
<p class="sub">Beyond the core cascade, the product has grown into an autonomous revenue-recovery system that works <em>for</em> the owner and feels genuinely delightful to use.</p>
|
|
|
|
<div class="capgroup">
|
|
<div class="h"><span class="ttl">Prevent & predict</span><span class="meta">stop the no-show before it happens</span></div>
|
|
<div class="caplist">
|
|
<div class="cap"><div class="mk">📡</div><div><h4>No-Show Radar</h4><p>An AI-style heuristic scores every upcoming appointment 0–100 for no-show risk, with self-explaining factors and one-tap nudge.</p></div></div>
|
|
<div class="cap"><div class="mk">✅</div><div><h4>Confirmations & reminders</h4><p>Timezone-aware confirm/reminder cycles, two-way YES/NO parsing, and full STOP/START compliance.</p></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capgroup">
|
|
<div class="h"><span class="ttl">Recover & automate</span><span class="meta">fill the chair with zero effort</span></div>
|
|
<div class="caplist">
|
|
<div class="cap"><div class="mk">⚡</div><div><h4>Waitlist cascade</h4><p>Race-safe, ranked, consent-gated auto-offers that refill a cancelled slot in under a minute.</p></div></div>
|
|
<div class="cap"><div class="mk">🤖</div><div><h4>Auto-pilot</h4><p>Automatically nudges high-risk unconfirmed appointments in the background. The owner does nothing; the system just works.</p></div></div>
|
|
<div class="cap"><div class="mk">🔗</div><div><h4>Self-serve reschedule links</h4><p>Secure, no-login SMS links let clients rebook or release a slot themselves — no phone tag.</p></div></div>
|
|
<div class="cap"><div class="mk">📅</div><div><h4>Google Calendar sync</h4><p>Two-way sync: a cancelled calendar event auto-opens a cascade; a win writes back to the calendar.</p></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capgroup">
|
|
<div class="h"><span class="ttl">Delight & inform</span><span class="meta">the reason owners fall in love with it</span></div>
|
|
<div class="caplist">
|
|
<div class="cap g"><div class="mk">🎉</div><div><h4>The Win Moment</h4><p>Every refilled chair fires confetti, a hero dollar count-up, and an optional "you just recovered $X" text to the owner.</p></div></div>
|
|
<div class="cap g"><div class="mk">🌅</div><div><h4>Morning daily brief</h4><p>A once-a-day SMS: today's bookings, who's at risk, and what auto-pilot handled overnight.</p></div></div>
|
|
<div class="cap g"><div class="mk">📈</div><div><h4>ROI dashboard</h4><p>The home screen leads with dollars recovered — this month, all time, week-over-week trend, 12-week chart.</p></div></div>
|
|
<div class="cap g"><div class="mk">💰</div><div><h4>Weekly ROI report</h4><p>A proactive Sunday-night recap texted to the owner: chairs refilled, no-show rate, dollars saved.</p></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="capgroup">
|
|
<div class="h"><span class="ttl">Foundations</span><span class="meta">the unglamorous work that makes it real</span></div>
|
|
<div class="caplist">
|
|
<div class="cap"><div class="mk">📄</div><div><h4>AI document import</h4><p>Snap a photo of a paper roster or price list — Claude extracts the rows and imports them in seconds.</p></div></div>
|
|
<div class="cap"><div class="mk">📱</div><div><h4>Native iOS app</h4><p>A full-parity SwiftUI client alongside the responsive web dashboard, with live updates.</p></div></div>
|
|
<div class="cap"><div class="mk">🛡️</div><div><h4>Compliance built in</h4><p>TCPA/CASL consent tracking, audit log, right-to-erase, opt-out controls, and A2P-ready messaging.</p></div></div>
|
|
<div class="cap"><div class="mk">🌓</div><div><h4>Apple-grade polish</h4><p>Fully responsive, light/dark themes, and a design system consistent across every screen.</p></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WHY IT WINS -->
|
|
<section id="why">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">Why it wins</span>
|
|
<p class="lead" style="margin-top:14px">Five things most tools in this space don't have — together.</p>
|
|
<div class="grid g3" style="margin-top:30px">
|
|
<div class="card"><span class="tag">01 · Provable ROI</span><h3>Sells itself in one save</h3><p>The product's central metric is dollars recovered. It pays for a month of subscription the first time it refills a single chair.</p></div>
|
|
<div class="card"><span class="tag">02 · Autonomous</span><h3>Works while you work</h3><p>Auto-pilot, cascades, reminders, and briefs run in the background. The owner isn't operating software — the software operates for them.</p></div>
|
|
<div class="card"><span class="tag">03 · Horizontal</span><h3>Not locked to one vertical</h3><p>Salons, spas, dental, physio, gyms, tattoo, restaurants — anyone who sells time in slots. One product, a huge market.</p></div>
|
|
<div class="card"><span class="tag gold">04 · AI-native</span><h3>Intelligence, not just automation</h3><p>Risk scoring, document extraction, and a roadmap to a conversational SMS agent — built on Claude from day one.</p></div>
|
|
<div class="card"><span class="tag gold">05 · Delightful</span><h3>Owners love opening it</h3><p>Confetti, count-ups, and morning briefs turn a back-office utility into something people are happy to see. Retention is a feature.</p></div>
|
|
<div class="card" style="border-color:var(--line-strong); background:var(--card-2)"><span class="tag">The through-line</span><h3>Recovery you can feel</h3><p>Every surface points at the same emotional payoff: an empty chair became money. That clarity is the moat.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MARKET -->
|
|
<section id="market">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">Market</span>
|
|
<p class="lead" style="margin-top:14px">A large, fragmented market that feels this pain every single day.</p>
|
|
<p class="sub">Every business that sells time in bookable slots loses money to no-shows — and almost none of them run software that actively recovers it. That gap is the opportunity.</p>
|
|
<div class="mkt">
|
|
<div class="m">
|
|
<div class="t">TAM · total market</div>
|
|
<div class="v tnum">~1.5M</div>
|
|
<div class="d">Appointment-based SMBs across the US & Canada — salons, clinics, studios, restaurants, and more. At ~$1,200/yr each, a <b>~$1.8B</b> opportunity.</div>
|
|
</div>
|
|
<div class="m sam">
|
|
<div class="t">SAM · serviceable</div>
|
|
<div class="v tnum">~500K</div>
|
|
<div class="d">Beachhead verticals with real waitlists and acute no-show pain: beauty & wellness, dental, physio, and fitness. Roughly <b>~$600M</b>.</div>
|
|
</div>
|
|
<div class="m som">
|
|
<div class="t">SOM · 3-yr reachable</div>
|
|
<div class="v tnum">~3,000</div>
|
|
<div class="d">A focused wedge of locations won one vertical at a time — an illustrative path to <b>~$3.6M ARR</b>.</div>
|
|
</div>
|
|
</div>
|
|
<p class="illus-note">Market sizes are illustrative planning assumptions, not audited figures.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COMPETITION -->
|
|
<section id="competition">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Competitive analysis</span>
|
|
<p class="lead" style="margin-top:14px">Everyone reminds. Almost no one refills.</p>
|
|
<p class="sub">The category is crowded with reminder tools — but a reminder only reduces no-shows. When a chair empties anyway, those tools leave the owner to chase it by hand. No-Show Killer is built to close that gap autonomously, and to prove the dollars it recovers.</p>
|
|
<div class="tblwrap">
|
|
<table class="tbl">
|
|
<thead>
|
|
<tr>
|
|
<th>Capability</th>
|
|
<th>Front desk<br>& paper list</th>
|
|
<th>Generic reminder<br>apps</th>
|
|
<th>Booking / PMS<br>built-ins</th>
|
|
<th class="us">No-Show Killer</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Auto-refills a cancelled slot (cascade)</td><td class="n">✗</td><td class="n">✗</td><td class="p">Rare</td><td class="us y">✓ Core</td></tr>
|
|
<tr><td>Predicts no-show risk (AI scoring)</td><td class="n">✗</td><td class="n">✗</td><td class="n">✗</td><td class="us y">✓</td></tr>
|
|
<tr><td>Two-way SMS, no app for clients</td><td class="p">Manual</td><td class="y">✓</td><td class="p">Varies</td><td class="us y">✓</td></tr>
|
|
<tr><td>Dollars-recovered ROI reporting</td><td class="n">✗</td><td class="n">✗</td><td class="n">✗</td><td class="us y">✓</td></tr>
|
|
<tr><td>Runs autonomously (no staff effort)</td><td class="n">✗</td><td class="p">Partial</td><td class="p">Partial</td><td class="us y">✓</td></tr>
|
|
<tr><td>Works across many verticals</td><td class="y">✓</td><td class="y">✓</td><td class="n">Vertical-locked</td><td class="us y">✓</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="grid g3" style="margin-top:24px">
|
|
<div class="card"><span class="tag">Our moat</span><h3>The recovery loop</h3><p>An autonomous cascade plus predictive scoring is materially harder to build than reminders — and it's the exact part that makes the owner money. Hard to copy, easy to feel.</p></div>
|
|
<div class="card"><span class="tag gold">Positioning</span><h3>ROI, not admin</h3><p>We sell recovered revenue, not another dashboard to babysit. That reframes the purchase from a cost line to a profit lever.</p></div>
|
|
<div class="card"><span class="tag">Wedge</span><h3>Horizontal by design</h3><p>Vertical incumbents are locked to one market. One engine lets us expand across verticals without a rebuild — and undercut point tools on breadth.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- WHERE WE ARE -->
|
|
<section id="status">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Where we are</span>
|
|
<p class="lead" style="margin-top:14px">Built, tested, deployed, and live — one carrier registration from onboarding paying customers.</p>
|
|
<div class="board" style="margin-top:30px">
|
|
<div class="card" style="padding:26px 28px">
|
|
<div class="statusrow"><div class="ic ok">✓</div><div class="tx"><b>Deployed to production</b><span>Running live on managed infrastructure; health-verified and current with the latest build.</span></div><span class="tag">DONE</span></div>
|
|
<div class="statusrow"><div class="ic ok">✓</div><div class="tx"><b>Full feature arc shipped</b><span>Win Moment, Radar, Auto-pilot, Daily Brief, ROI dashboard — all merged and live.</span></div><span class="tag">DONE</span></div>
|
|
<div class="statusrow"><div class="ic ok">✓</div><div class="tx"><b>411 automated tests passing</b><span>Type-clean across web + backend; every recovery path covered.</span></div><span class="tag">DONE</span></div>
|
|
<div class="statusrow"><div class="ic ok">✓</div><div class="tx"><b>All revenue features armed</b><span>Cascade, auto-pilot, briefs, and win-texts enabled in production, ready for real data.</span></div><span class="tag">DONE</span></div>
|
|
<div class="statusrow"><div class="ic gate">!</div><div class="tx"><b>A2P 10DLC carrier registration</b><span>The one gate before texting real customers at scale — a Twilio brand/campaign filing.</span></div><span class="tag">GATE</span></div>
|
|
<div class="statusrow"><div class="ic gate">!</div><div class="tx"><b>Security hardening: secret rotation</b><span>Routine pre-launch credential rotation. Small, well-understood task.</span></div><span class="tag">GATE</span></div>
|
|
</div>
|
|
<div>
|
|
<div class="metrics">
|
|
<div><div class="k tnum">100%</div><div class="m">Feature arc shipped</div></div>
|
|
<div><div class="k gold tnum">411</div><div class="m">Tests green</div></div>
|
|
<div><div class="k tnum">2</div><div class="m">Gates to first customer</div></div>
|
|
<div><div class="k gold tnum">1</div><div class="m">Product, many verticals</div></div>
|
|
</div>
|
|
<div class="callout" style="margin-top:18px"><b>Honest status:</b> the platform is complete and running. What's left before revenue isn't more engineering — it's a carrier paperwork step and lining up first design-partner businesses.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BUSINESS CASE -->
|
|
<section id="business">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">The business case</span>
|
|
<p class="lead" style="margin-top:14px">The unit economics are almost embarrassingly simple.</p>
|
|
<div class="econ" style="margin-top:30px">
|
|
<div class="panel">
|
|
<span class="kicker">For the customer</span>
|
|
<div class="eq" style="margin-top:12px">
|
|
<span class="hi">1</span> chair refilled = <span class="hi">$75–$300+</span> recovered<br>
|
|
<span class="hg">1</span> subscription ≈ <span class="hg">the price of one chair</span><br>
|
|
→ pays for itself the first week it's used
|
|
</div>
|
|
<div class="big">One save covers the month.</div>
|
|
<p class="sub" style="margin-top:12px">After that, every recovered no-show is pure upside. That's the easiest ROI conversation in SMB software.</p>
|
|
</div>
|
|
<div class="panel">
|
|
<span class="kicker">For us</span>
|
|
<div class="eq" style="margin-top:12px">
|
|
Model: <span class="hi">per-location SaaS</span> subscription<br>
|
|
Cost to serve: <span class="hi">low</span> (SMS + hosting, usage-scaled)<br>
|
|
Expansion: <span class="hg">multi-location, tiers, add-ons</span>
|
|
</div>
|
|
<div class="big">Recurring, sticky, expandable.</div>
|
|
<p class="sub" style="margin-top:12px">High retention follows naturally: once a business trusts it to catch cancellations, turning it off means knowingly leaving money on the table.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="kicker" style="display:block; margin-top:36px">Who it's for — one product, many doors</span>
|
|
<div class="tamrow">
|
|
<div class="tam"><div class="seg">Beauty & wellness</div><div class="why">Salons, spas, barbers, nails, med-spas — high cancel rates, high slot value.</div></div>
|
|
<div class="tam"><div class="seg">Health & therapy</div><div class="why">Dental, physio, chiro, counseling — appointment-driven, no-show sensitive.</div></div>
|
|
<div class="tam"><div class="seg">Fitness & coaching</div><div class="why">PT, studios, tutoring — booked sessions, waitlists already exist.</div></div>
|
|
<div class="tam"><div class="seg">Hospitality & services</div><div class="why">Restaurants, pet grooming, auto detailing — perishable, bookable capacity.</div></div>
|
|
</div>
|
|
<p class="sub" style="margin-top:20px">The same engine serves all of them. We start where the pain is sharpest and the sales cycle is shortest, then widen — the product needs no re-build to move between verticals.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRICING & PROJECTIONS -->
|
|
<section id="model">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">Pricing & projections</span>
|
|
<p class="lead" style="margin-top:14px">Simple per-location pricing that a single recovered chair already covers.</p>
|
|
<div class="grid g3" style="margin-top:28px">
|
|
<div class="card"><span class="tag">Starter</span><h3 class="price-amt">$49<span class="per">/mo · location</span></h3><p>Waitlist cascade + confirmations & reminders — everything needed to start recovering chairs from day one.</p></div>
|
|
<div class="card" style="border-color:var(--emerald); box-shadow:0 0 0 1px var(--emerald) inset, var(--shadow)"><span class="tag">Pro · most popular</span><h3 class="price-amt">$99<span class="per">/mo · location</span></h3><p>Adds No-Show Radar, auto-pilot, the ROI dashboard, morning brief, and Google Calendar sync.</p></div>
|
|
<div class="card"><span class="tag gold">Multi-location</span><h3 class="price-amt">Custom</h3><p>Volume pricing, roles, and rollout support for chains and franchise groups.</p></div>
|
|
</div>
|
|
<div class="tblwrap">
|
|
<table class="tbl">
|
|
<thead><tr><th>Illustrative trajectory</th><th>Year 1</th><th>Year 2</th><th class="us">Year 3</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Active locations</td><td class="tnum">150</td><td class="tnum">900</td><td class="us tnum">3,000</td></tr>
|
|
<tr><td>Avg revenue / location / yr</td><td class="tnum">~$1,000</td><td class="tnum">~$1,150</td><td class="us tnum">~$1,200</td></tr>
|
|
<tr><td>ARR</td><td class="tnum">~$150K</td><td class="tnum">~$1.0M</td><td class="us y tnum">~$3.6M</td></tr>
|
|
<tr><td>Cost to serve</td><td>Low</td><td>Low</td><td class="us">Low — usage-scaled SMS + hosting</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="illus-note">Pricing and multi-year figures are illustrative planning assumptions; actuals depend on the design-partner phase.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- RISKS -->
|
|
<section id="risks">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Risks & mitigations</span>
|
|
<p class="lead" style="margin-top:14px">The honest list — and what's already handled.</p>
|
|
<div class="grid g2" style="margin-top:28px">
|
|
<div class="card"><span class="tag gold">Deliverability</span><h3>Carrier filtering (A2P)</h3><p>Unregistered SMS gets filtered at scale. <b style="color:var(--text)">Mitigation:</b> A2P 10DLC brand/campaign + Messaging Service — the code already prefers it; registration is the active pre-launch step.</p></div>
|
|
<div class="card"><span class="tag gold">Adoption</span><h3>Onboarding friction</h3><p>SMBs won't do heavy setup. <b style="color:var(--text)">Mitigation:</b> AI document import, self-serve setup wizard, calendar sync, and hands-on design-partner onboarding.</p></div>
|
|
<div class="card"><span class="tag gold">Competition</span><h3>Incumbents add cascade</h3><p>Reminder tools could copy it. <b style="color:var(--text)">Mitigation:</b> the autonomous recovery loop + ROI framing is a real build lead; move fast on real customer proof.</p></div>
|
|
<div class="card"><span class="tag gold">Unit cost</span><h3>SMS margin</h3><p>Per-message cost eats margin if unmanaged. <b style="color:var(--text)">Mitigation:</b> usage-scaled pricing, daily caps, and consent/quiet-hours gating already shipped.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TEAM -->
|
|
<section id="team">
|
|
<div class="wrap">
|
|
<span class="eyebrow gold">Team & execution</span>
|
|
<p class="lead" style="margin-top:14px">A lean build that has already shipped what most plans only promise.</p>
|
|
<p class="sub">The entire platform — the cascade engine, predictive Radar, auto-pilot, ROI dashboard, a native iOS app, compliance controls, and a deployed production system with 411 passing tests — is already built and live. Execution risk, the thing that sinks most early plans, is largely retired: the question isn't "can it be built?" but "how fast can we put it in front of customers?" The next investment attaches to go-to-market and customer success, not to proving the product works.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- THE ASK -->
|
|
<section id="ask">
|
|
<div class="wrap">
|
|
<span class="eyebrow">The plan from here</span>
|
|
<p class="lead" style="margin-top:14px">Engineering is done. The next moves are go-to-market.</p>
|
|
<div class="phases">
|
|
<div class="phase next">
|
|
<span class="when">Now → 30 days</span>
|
|
<h3>Open the gate</h3>
|
|
<ul>
|
|
<li>Complete A2P 10DLC registration to unlock SMS at scale</li>
|
|
<li>Rotate credentials and finish launch hardening</li>
|
|
<li>Line up 3–5 design-partner businesses in one vertical</li>
|
|
</ul>
|
|
</div>
|
|
<div class="phase">
|
|
<span class="when">30 → 90 days</span>
|
|
<h3>Prove it with real dollars</h3>
|
|
<ul>
|
|
<li>Onboard partners; load real waitlists & calendars</li>
|
|
<li>Measure actual dollars recovered per location</li>
|
|
<li>Turn those numbers into the sales story & case studies</li>
|
|
</ul>
|
|
</div>
|
|
<div class="phase">
|
|
<span class="when">90 days +</span>
|
|
<h3>Scale the machine</h3>
|
|
<ul>
|
|
<li>Introduce pricing tiers & multi-location</li>
|
|
<li>Ship the conversational AI SMS agent</li>
|
|
<li>Expand into the next verticals with the proof in hand</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="callout" style="margin-top:26px"><b>What I need from you:</b> a green light to finish the A2P step and recruit the first handful of design partners. The build risk is behind us — this is now about putting a finished product in front of businesses that are losing money every week without it.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="close">
|
|
<div class="wrap">
|
|
<span class="eyebrow" style="display:block; margin-bottom:16px">The one-line version</span>
|
|
<h2>A finished product that turns empty chairs back into revenue — automatically, and with a smile.</h2>
|
|
<p>It's live, it's tested, and it's one small step from its first paying customer.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="foot">
|
|
<div class="wrap">
|
|
<span>No-Show Killer · Business plan</span>
|
|
<span>Confidential · Prepared for leadership review</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(function(){
|
|
var isPrint = /[?&]print=1/.test(window.location.search);
|
|
var reduce = isPrint || (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
|
|
// Hero count-up
|
|
var el = document.getElementById('hero-money');
|
|
if(el){
|
|
var target = parseInt(el.getAttribute('data-target'),10) || 0;
|
|
if(reduce){ el.textContent = '$' + target.toLocaleString(); }
|
|
else{
|
|
var start = null, dur = 1500;
|
|
var ease = function(t){ return 1 - Math.pow(1-t, 3); };
|
|
var tick = function(ts){
|
|
if(start===null) start = ts;
|
|
var p = Math.min((ts-start)/dur, 1);
|
|
var v = Math.round(ease(p) * target);
|
|
el.textContent = '$' + v.toLocaleString();
|
|
if(p<1) requestAnimationFrame(tick);
|
|
};
|
|
requestAnimationFrame(tick);
|
|
}
|
|
}
|
|
|
|
// One-shot confetti in hero (emerald + gold), reduced-motion aware
|
|
var canvas = document.getElementById('confetti');
|
|
if(canvas && !reduce){
|
|
var ctx = canvas.getContext('2d');
|
|
var host = canvas.parentElement;
|
|
function size(){ canvas.width = host.clientWidth; canvas.height = host.clientHeight; }
|
|
size();
|
|
var colors = ['#34D399','#6EE7B7','#E7B24C','#F5D07A','#10B981'];
|
|
var N = Math.min(120, Math.floor(host.clientWidth/9));
|
|
var parts = [];
|
|
for(var i=0;i<N;i++){
|
|
parts.push({
|
|
x: Math.random()*canvas.width,
|
|
y: -20 - Math.random()*canvas.height*0.6,
|
|
r: 3 + Math.random()*5,
|
|
c: colors[i % colors.length],
|
|
vy: 1.1 + Math.random()*2.2,
|
|
vx: -0.6 + Math.random()*1.2,
|
|
rot: Math.random()*Math.PI,
|
|
vr: -0.1 + Math.random()*0.2,
|
|
life: 1
|
|
});
|
|
}
|
|
var frames = 0, maxFrames = 260;
|
|
function draw(){
|
|
ctx.clearRect(0,0,canvas.width,canvas.height);
|
|
var alive = false;
|
|
for(var i=0;i<parts.length;i++){
|
|
var p = parts[i];
|
|
p.x += p.vx; p.y += p.vy; p.rot += p.vr; p.vy += 0.012;
|
|
if(frames > maxFrames*0.6){ p.life -= 0.02; }
|
|
if(p.y < canvas.height + 20 && p.life > 0){
|
|
alive = true;
|
|
ctx.save();
|
|
ctx.globalAlpha = Math.max(0, p.life);
|
|
ctx.translate(p.x, p.y); ctx.rotate(p.rot);
|
|
ctx.fillStyle = p.c;
|
|
ctx.fillRect(-p.r, -p.r*0.5, p.r*2, p.r);
|
|
ctx.restore();
|
|
}
|
|
}
|
|
frames++;
|
|
if(alive && frames < maxFrames) requestAnimationFrame(draw);
|
|
else ctx.clearRect(0,0,canvas.width,canvas.height);
|
|
}
|
|
// slight delay so it reads as a "win" landing
|
|
setTimeout(function(){ requestAnimationFrame(draw); }, 350);
|
|
window.addEventListener('resize', size);
|
|
}
|
|
|
|
// Tasteful scroll reveal for sections (skipped under reduced motion / no IO)
|
|
if(!reduce && 'IntersectionObserver' in window){
|
|
var targets = document.querySelectorAll('main > section > .wrap');
|
|
var io = new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
|
|
}, {rootMargin:'0px 0px -8% 0px', threshold:0.08});
|
|
targets.forEach(function(t){ t.classList.add('reveal'); io.observe(t); });
|
|
}
|
|
})();
|
|
</script>
|