878 lines
51 KiB
HTML
878 lines
51 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>*{box-sizing:border-box}body{margin:0}img{max-width:100%}</style></head><body><title>Clutch — Business Plan & Product Brief</title>
|
||
<style>
|
||
:root{
|
||
/* ---- Night-valet palette (dark = default authored ground) ---- */
|
||
--ground:#0E1016; --surface:#151A24; --surface-2:#1B2230;
|
||
--ink:#ECEEF3; --ink-soft:#C4CBD8; --ink-dim:#8A93A6;
|
||
--line:#242C3B; --line-soft:#1C2331;
|
||
--gold:#E7B25A; --gold-deep:#C6913B; --gold-wash:rgba(231,178,90,.10);
|
||
--coral:#FF6F5C; --coral-wash:rgba(255,111,92,.12);
|
||
--green:#5FD0A3; --green-wash:rgba(95,208,163,.12);
|
||
--shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.7);
|
||
|
||
--serif:ui-serif,"New York",Georgia,"Times New Roman",serif;
|
||
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
|
||
--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
|
||
|
||
--maxw:1080px;
|
||
--step--1:clamp(.78rem,.76rem + .1vw,.84rem);
|
||
--step-0:clamp(1rem,.97rem + .16vw,1.09rem);
|
||
--step-1:clamp(1.2rem,1.12rem + .4vw,1.45rem);
|
||
--step-2:clamp(1.5rem,1.34rem + .8vw,2rem);
|
||
--step-3:clamp(2rem,1.6rem + 2vw,3.1rem);
|
||
--step-4:clamp(2.7rem,2rem + 3.4vw,4.6rem);
|
||
}
|
||
/* Light theme follows the OS preference; the [data-theme] blocks below let the
|
||
viewer's in-page toggle override it in either direction. */
|
||
@media (prefers-color-scheme:light){
|
||
:root{
|
||
--ground:#F3F5F9; --surface:#FFFFFF; --surface-2:#E9EEF5;
|
||
--ink:#141821; --ink-soft:#3A424F; --ink-dim:#6A7385;
|
||
--line:#DCE3EC; --line-soft:#E7ECF3;
|
||
--gold:#9C6F1C; --gold-deep:#805A12; --gold-wash:rgba(156,111,28,.09);
|
||
--coral:#D8492F; --coral-wash:rgba(216,73,47,.10);
|
||
--green:#1E9C70; --green-wash:rgba(30,156,112,.10);
|
||
--shadow:0 1px 2px rgba(20,30,60,.05), 0 22px 44px -30px rgba(30,45,80,.35);
|
||
}
|
||
}
|
||
:root[data-theme="dark"]{
|
||
--ground:#0E1016; --surface:#151A24; --surface-2:#1B2230;
|
||
--ink:#ECEEF3; --ink-soft:#C4CBD8; --ink-dim:#8A93A6;
|
||
--line:#242C3B; --line-soft:#1C2331;
|
||
--gold:#E7B25A; --gold-deep:#C6913B; --gold-wash:rgba(231,178,90,.10);
|
||
--coral:#FF6F5C; --coral-wash:rgba(255,111,92,.12);
|
||
--green:#5FD0A3; --green-wash:rgba(95,208,163,.12);
|
||
--shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.7);
|
||
}
|
||
:root[data-theme="light"]{
|
||
--ground:#F3F5F9; --surface:#FFFFFF; --surface-2:#E9EEF5;
|
||
--ink:#141821; --ink-soft:#3A424F; --ink-dim:#6A7385;
|
||
--line:#DCE3EC; --line-soft:#E7ECF3;
|
||
--gold:#9C6F1C; --gold-deep:#805A12; --gold-wash:rgba(156,111,28,.09);
|
||
--coral:#D8492F; --coral-wash:rgba(216,73,47,.10);
|
||
--green:#1E9C70; --green-wash:rgba(30,156,112,.10);
|
||
--shadow:0 1px 2px rgba(20,30,60,.05), 0 22px 44px -30px rgba(30,45,80,.35);
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
body{
|
||
margin:0;background:var(--ground);color:var(--ink);
|
||
font-family:var(--sans);font-size:var(--step-0);line-height:1.62;
|
||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||
background-image:radial-gradient(1200px 600px at 78% -8%,var(--gold-wash),transparent 60%);
|
||
}
|
||
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
|
||
section{padding:clamp(52px,8vw,104px) 0;border-top:1px solid var(--line-soft)}
|
||
section:first-of-type{border-top:0}
|
||
|
||
h1,h2,h3{font-family:var(--serif);font-weight:600;text-wrap:balance;letter-spacing:-.015em;margin:0}
|
||
h1{font-size:var(--step-4);line-height:1.02;letter-spacing:-.03em}
|
||
h2{font-size:var(--step-3);line-height:1.06;margin:0 0 .5em}
|
||
h3{font-size:var(--step-1);line-height:1.2}
|
||
p{margin:0 0 1em;max-width:64ch;color:var(--ink-soft)}
|
||
a{color:var(--gold-deep);text-underline-offset:3px;text-decoration-thickness:1px}
|
||
strong{color:var(--ink);font-weight:600}
|
||
q{quotes:"\201C" "\201D";font-style:italic;color:var(--ink)}
|
||
q.dim{color:var(--ink-soft)}
|
||
|
||
.eyebrow{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.18em;
|
||
text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.1em;display:flex;
|
||
align-items:center;gap:.7em}
|
||
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-deep);opacity:.7}
|
||
.eyebrow.coral{color:var(--coral)}
|
||
.eyebrow.coral::before{background:var(--coral)}
|
||
.lede{font-family:var(--serif);font-size:var(--step-1);line-height:1.42;color:var(--ink-soft);max-width:34ch}
|
||
.dim{color:var(--ink-dim)}
|
||
.kicker{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em;color:var(--ink-dim)}
|
||
|
||
/* ---------- Masthead ---------- */
|
||
.topbar{display:flex;align-items:center;justify-content:space-between;
|
||
padding:22px 0 0;font-family:var(--mono);font-size:var(--step--1);color:var(--ink-dim)}
|
||
.brand{display:flex;align-items:center;gap:.6em;font-family:var(--serif);
|
||
font-size:1.15rem;letter-spacing:-.01em;color:var(--ink);font-weight:600}
|
||
.brand .mk{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
|
||
border:1.5px solid var(--gold);color:var(--gold);font-size:.7rem;font-family:var(--mono);
|
||
box-shadow:0 0 0 4px var(--gold-wash)}
|
||
.live-tag{display:inline-flex;align-items:center;gap:.5em;color:var(--ink-soft)}
|
||
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-wash)}
|
||
|
||
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,60px);
|
||
align-items:center;padding-top:clamp(30px,6vw,64px)}
|
||
.hero .thesis h1{margin-bottom:.32em}
|
||
.hero-sub{font-size:var(--step-1);color:var(--ink-soft);line-height:1.4;max-width:30ch;
|
||
font-family:var(--serif);font-weight:400}
|
||
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
|
||
.chip{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.02em;
|
||
padding:6px 11px;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft);
|
||
background:var(--surface)}
|
||
.chip b{color:var(--gold);font-weight:600}
|
||
|
||
/* ---------- Live-call card (the one orchestrated moment) ---------- */
|
||
.callcard{background:linear-gradient(180deg,var(--surface),var(--surface-2));
|
||
border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);
|
||
position:relative;overflow:hidden}
|
||
.callcard::before{content:"";position:absolute;inset:0;
|
||
background:radial-gradient(420px 200px at 90% 0,var(--coral-wash),transparent 70%);pointer-events:none}
|
||
.cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
|
||
.cc-who{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:.98rem}
|
||
.cc-who span{display:block;font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);
|
||
font-weight:400;letter-spacing:.02em;margin-top:2px}
|
||
.cc-live{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);
|
||
font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
|
||
.cc-live i{width:8px;height:8px;border-radius:50%;background:var(--coral);
|
||
box-shadow:0 0 0 0 var(--coral);animation:pulse 1.8s ease-out infinite}
|
||
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--coral-wash)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
|
||
|
||
.cc-stage{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;
|
||
display:flex;flex-direction:column;gap:9px;margin:6px 0 16px}
|
||
.cc-step{display:flex;align-items:center;gap:10px;color:var(--ink-dim);
|
||
transition:color .4s ease,opacity .4s ease;opacity:.5}
|
||
.cc-step .mk{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;
|
||
display:grid;place-items:center;font-size:.6rem;flex:none}
|
||
.cc-step.done{color:var(--ink-soft);opacity:1}
|
||
.cc-step.done .mk{background:var(--green);border-color:var(--green);color:var(--ground)}
|
||
.cc-step.active{color:var(--coral);opacity:1}
|
||
.cc-step.active .mk{border-color:var(--coral)}
|
||
|
||
.cc-wave{display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:2px}
|
||
.cc-wave i{width:3px;background:var(--gold);border-radius:2px;opacity:.85;
|
||
animation:eq 1.1s ease-in-out infinite}
|
||
@keyframes eq{0%,100%{height:20%}50%{height:100%}}
|
||
.cc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;
|
||
padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);
|
||
font-size:.72rem;color:var(--ink-dim)}
|
||
.won{color:var(--green)}
|
||
|
||
/* ---------- Generic layout helpers ---------- */
|
||
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px)}
|
||
.head-row{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,48px);align-items:end;margin-bottom:44px}
|
||
.head-row p{margin:0}
|
||
|
||
/* Problem stats */
|
||
.statline{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
|
||
border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:8px}
|
||
.statline div{background:var(--surface);padding:22px 20px}
|
||
.statline .n{font-family:var(--serif);font-size:var(--step-2);color:var(--gold);line-height:1;
|
||
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
|
||
.statline .l{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-dim);
|
||
margin-top:9px;letter-spacing:.02em;line-height:1.4}
|
||
|
||
/* Task ledger */
|
||
.ledger{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
|
||
.lrow{display:grid;grid-template-columns:172px 1fr;gap:22px;padding:18px 22px;
|
||
border-top:1px solid var(--line-soft);align-items:baseline}
|
||
.lrow:first-child{border-top:0}
|
||
.lrow .t{font-family:var(--serif);font-size:1.1rem;color:var(--ink);display:flex;
|
||
flex-direction:column;align-items:flex-start;gap:.28em}
|
||
.lrow .t em{font-family:var(--mono);font-size:.62rem;font-style:normal;letter-spacing:.09em;
|
||
text-transform:uppercase;color:var(--gold-deep);opacity:.85;line-height:1}
|
||
.lrow .d{color:var(--ink-soft);font-size:.97rem;margin:0}
|
||
.lrow .d q{color:var(--ink);font-style:italic;quotes:"“" "”"}
|
||
.lrow.flag{background:linear-gradient(90deg,var(--coral-wash),transparent 60%)}
|
||
.lrow.flag .t em{color:var(--coral)}
|
||
|
||
/* Holdline sequence */
|
||
.seq{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:10px}
|
||
.seq .s{border:1px solid var(--line);border-radius:14px;padding:18px 16px;background:var(--surface);position:relative}
|
||
.seq .s .no{font-family:var(--mono);font-size:.7rem;color:var(--coral);letter-spacing:.1em}
|
||
.seq .s h4{margin:12px 0 6px;font-family:var(--sans);font-size:.98rem;font-weight:600;color:var(--ink)}
|
||
.seq .s p{margin:0;font-size:.86rem;color:var(--ink-dim);max-width:none}
|
||
.safebar{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
|
||
.safebar span{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft);
|
||
border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:inline-flex;gap:.55em;align-items:center}
|
||
.safebar span::before{content:"✓";color:var(--green);font-weight:700}
|
||
|
||
/* Status ledger (where we are) */
|
||
.status{display:grid;grid-template-columns:1fr 1fr;gap:14px}
|
||
.scard{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px}
|
||
.scard .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
|
||
.scard .h b{font-family:var(--sans);font-weight:600;font-size:1rem}
|
||
.badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
|
||
padding:4px 9px;border-radius:100px}
|
||
.badge.ship{background:var(--green-wash);color:var(--green)}
|
||
.badge.flight{background:var(--gold-wash);color:var(--gold-deep)}
|
||
.scard p{margin:0;font-size:.9rem;color:var(--ink-dim);max-width:none}
|
||
|
||
/* Pricing */
|
||
.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
|
||
.plan{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--surface);display:flex;flex-direction:column}
|
||
.plan.pro{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-wash),transparent 70%),var(--surface)}
|
||
.plan .pname{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
|
||
.plan.pro .pname{color:var(--gold-deep)}
|
||
.plan .price{font-family:var(--serif);font-size:var(--step-3);letter-spacing:-.02em;margin:10px 0 2px;line-height:1}
|
||
.plan .price small{font-family:var(--mono);font-size:.9rem;color:var(--ink-dim);letter-spacing:0}
|
||
.plan ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px}
|
||
.plan li{position:relative;padding-left:24px;font-size:.94rem;color:var(--ink-soft)}
|
||
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--gold-deep)}
|
||
.plan.pro li::before{background:var(--gold)}
|
||
|
||
.econ{border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
|
||
padding:24px 26px;margin-top:18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
|
||
.econ .b .n{font-family:var(--serif);font-size:var(--step-2);color:var(--ink);line-height:1;letter-spacing:-.02em}
|
||
.econ .b .n .u{color:var(--gold);}
|
||
.econ .b .l{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-dim);margin-top:8px;line-height:1.45}
|
||
|
||
/* Roadmap */
|
||
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
|
||
.phase{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px}
|
||
.phase .p{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px}
|
||
.phase h4{margin:0 0 10px;font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink)}
|
||
.phase ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:.92rem}
|
||
.phase li{margin:0 0 6px}
|
||
.phase.now{border-color:var(--gold)}
|
||
|
||
/* Close */
|
||
.close{text-align:left}
|
||
.close h2{max-width:16ch}
|
||
.cta{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.9rem;
|
||
letter-spacing:.02em;padding:14px 22px;border-radius:100px;border:1px solid var(--gold);
|
||
color:var(--gold-deep);background:var(--gold-wash);margin-top:14px;text-decoration:none}
|
||
.cta:hover{background:var(--gold);color:var(--ground)}
|
||
footer{padding:40px 0 60px;color:var(--ink-dim);font-family:var(--mono);font-size:var(--step--1);
|
||
border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
|
||
|
||
.foot-note{font-family:var(--mono);font-size:.72rem;color:var(--ink-dim);margin-top:18px;max-width:70ch;line-height:1.5}
|
||
|
||
/* ---- Executive summary + contents ---- */
|
||
.summary{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
|
||
.summary .lede2{font-family:var(--serif);font-size:var(--step-1);line-height:1.42;color:var(--ink);max-width:62ch;margin:0 0 .9em;font-weight:500}
|
||
.atglance{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
|
||
border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:22px}
|
||
.atglance div{background:var(--surface-2);padding:18px 20px}
|
||
.atglance .n{font-family:var(--serif);font-size:var(--step-1);color:var(--gold);line-height:1.05;letter-spacing:-.02em}
|
||
.atglance .l{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-dim);margin-top:7px;line-height:1.4}
|
||
.contents{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
|
||
.contents a{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft);text-decoration:none;
|
||
border:1px solid var(--line);border-radius:100px;padding:6px 12px}
|
||
.contents a:hover{border-color:var(--gold);color:var(--gold-deep)}
|
||
|
||
/* ---- Market tiers ---- */
|
||
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
|
||
.tier{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px}
|
||
.tier .cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
|
||
.tier .big{font-family:var(--serif);font-size:var(--step-2);letter-spacing:-.02em;margin:12px 0 2px;line-height:1;color:var(--ink)}
|
||
.tier .who{font-size:.9rem;color:var(--ink-soft);margin:8px 0 0;max-width:none}
|
||
.tier.som{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-wash),transparent 70%),var(--surface)}
|
||
.tier.som .big{color:var(--gold)}
|
||
|
||
/* ---- Competitive matrix ---- */
|
||
.matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;margin-top:8px}
|
||
table.matrix{border-collapse:collapse;width:100%;min-width:760px}
|
||
table.matrix th,table.matrix td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
|
||
table.matrix tr:last-child td,table.matrix tr:last-child th{border-bottom:0}
|
||
table.matrix thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
|
||
color:var(--ink-dim);font-weight:400;background:var(--surface-2)}
|
||
table.matrix tbody th{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:1.02rem;white-space:nowrap}
|
||
table.matrix tbody th small{display:block;font-family:var(--mono);font-weight:400;font-size:.68rem;
|
||
color:var(--ink-dim);margin-top:4px;white-space:normal;letter-spacing:.02em}
|
||
table.matrix tr.us{background:var(--gold-wash)}
|
||
table.matrix tr.us th{color:var(--gold-deep)}
|
||
td.cell{font-family:var(--sans);font-size:.86rem;color:var(--ink-soft);line-height:1.4}
|
||
.mk-y{color:var(--green);font-weight:700;margin-right:.35em}
|
||
.mk-p{color:var(--gold-deep);font-weight:700;margin-right:.35em}
|
||
.mk-n{color:var(--ink-dim);font-weight:700;margin-right:.35em}
|
||
|
||
/* ---- Risk grid ---- */
|
||
.risks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
|
||
.risk{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:20px 22px}
|
||
.risk .r{font-family:var(--sans);font-weight:600;color:var(--ink);font-size:.98rem;margin:0 0 7px;
|
||
display:flex;gap:.5em;align-items:baseline}
|
||
.risk .r::before{content:"▲";color:var(--coral);font-size:.68em;transform:translateY(-1px)}
|
||
.risk p{margin:0;font-size:.9rem;color:var(--ink-dim);max-width:none}
|
||
.risk .m{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-soft);color:var(--ink-soft)}
|
||
.risk .m::before{content:"Mitigation — ";font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;
|
||
text-transform:uppercase;color:var(--green)}
|
||
|
||
/* ---- Financial table ---- */
|
||
.fin-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;margin-top:8px}
|
||
table.fin{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
|
||
table.fin th,table.fin td{padding:13px 20px;text-align:right;border-bottom:1px solid var(--line-soft);font-size:.94rem}
|
||
table.fin tr:last-child td{border-bottom:0}
|
||
table.fin th:first-child,table.fin td:first-child{text-align:left}
|
||
table.fin thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);font-weight:400}
|
||
table.fin tbody td:first-child{font-family:var(--sans);color:var(--ink-soft)}
|
||
table.fin tbody td{font-family:var(--mono);color:var(--ink)}
|
||
table.fin tr.hl td{color:var(--gold);font-weight:600}
|
||
table.fin tr.hl td:first-child{color:var(--gold-deep)}
|
||
|
||
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
|
||
|
||
@media (max-width:860px){
|
||
.hero{grid-template-columns:1fr}
|
||
.two,.status,.plans{grid-template-columns:1fr}
|
||
.head-row{grid-template-columns:1fr}
|
||
.statline,.econ,.road,.atglance,.tiers,.risks{grid-template-columns:1fr}
|
||
.seq{grid-template-columns:1fr 1fr}
|
||
.lrow{grid-template-columns:1fr;gap:6px}
|
||
}
|
||
@media (prefers-reduced-motion:reduce){
|
||
.cc-live i,.cc-wave i{animation:none}
|
||
}
|
||
|
||
/* ---- Save-as-PDF control (footer) ---- */
|
||
.foot-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
|
||
.pdfbtn{font-family:var(--mono);font-size:var(--step--1);letter-spacing:.04em;
|
||
color:var(--gold-deep);background:var(--gold-wash);border:1px solid var(--gold);
|
||
border-radius:100px;padding:9px 16px;cursor:pointer;text-decoration:none;
|
||
display:inline-flex;align-items:center;gap:.4em;transition:background .15s ease,color .15s ease}
|
||
.pdfbtn:hover{background:var(--gold);color:var(--ground)}
|
||
|
||
/* ---- Print / PDF export ---- */
|
||
@media print{
|
||
html,body{background:#0E1016}
|
||
body{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:none;
|
||
font-size:10.5pt;line-height:1.5}
|
||
.wrap{max-width:none;padding:0 12mm}
|
||
section{padding:16pt 0}
|
||
.hero{padding-top:6pt}
|
||
.callcard,.scard,.plan,.phase,.lrow,.statline,.econ,.seq .s,.two,.head-row{break-inside:avoid}
|
||
h1,h2,h3,h4,.eyebrow{break-after:avoid}
|
||
.cc-live i,.cc-wave i{animation:none}
|
||
.cta,.pdfbtn,.topbar .live-tag{display:none}
|
||
a[href]::after{content:""} /* don't append raw URLs */
|
||
}
|
||
</style>
|
||
|
||
<div class="wrap">
|
||
|
||
<div class="topbar">
|
||
<div class="brand"><span class="mk">C</span> Clutch</div>
|
||
<div class="live-tag"><span class="dot"></span> Live · clutch.mosaic.site</div>
|
||
</div>
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section class="hero" style="border-top:0">
|
||
<div class="thesis">
|
||
<p class="eyebrow">Product brief & business plan</p>
|
||
<h1>The concierge for everything you keep meaning to do.</h1>
|
||
<p class="hero-sub">Clutch is an AI concierge that makes the calls, waits on the hold, and runs the errands you dread — from one plain-English request.</p>
|
||
<div class="hero-meta">
|
||
<span class="chip"><b>9</b> task types, one inbox</span>
|
||
<span class="chip">Real AI phone calls</span>
|
||
<span class="chip"><b>Live</b> & in pre-flight</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live-call card: the flagship moment -->
|
||
<div class="callcard" id="callcard" aria-label="Live Holdline call, illustrative">
|
||
<div class="cc-head">
|
||
<div class="cc-who">Delta Air Lines — Support<span id="cc-num">calling on your behalf</span></div>
|
||
<div class="cc-live"><i></i> Live</div>
|
||
</div>
|
||
<div class="cc-stage" id="cc-stage">
|
||
<div class="cc-step" data-k="0"><span class="mk">1</span> Dialing the support line…</div>
|
||
<div class="cc-step" data-k="1"><span class="mk">2</span> Navigating the phone menu</div>
|
||
<div class="cc-step" data-k="2"><span class="mk">3</span> On hold — holding your place</div>
|
||
<div class="cc-step" data-k="3"><span class="mk">4</span> Human detected · disclosing it’s AI</div>
|
||
<div class="cc-step" data-k="4"><span class="mk">5</span> Bridging you in — your phone rings</div>
|
||
</div>
|
||
<div class="cc-wave" id="cc-wave" aria-hidden="true"></div>
|
||
<div class="cc-foot"><span id="cc-timer">00:00 on hold</span> <span class="won" id="cc-result"> </span></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ EXECUTIVE SUMMARY ============ -->
|
||
<section id="summary">
|
||
<p class="eyebrow">Executive summary</p>
|
||
<div class="summary">
|
||
<p class="lede2">Clutch is a consumer AI concierge that completes the phone calls and life-admin tasks people avoid — booking, cancelling, negotiating, and above all waiting on hold — from a single plain-English request.</p>
|
||
<p>The product is <strong>live in production</strong> with eight task types; its flagship real-call engine is built, reviewed, and one supervised call from launch. The market for “AI that makes calls for you” arrived in 2026 — and that is the opportunity, not the threat. A wave of single-purpose call agents has proven consumers want this; none of them tie the calls to the full sweep of life-admin, package the work as <strong>outcomes</strong> rather than a phone tool, or lead with <strong>trust</strong>. Clutch competes on breadth, concierge-grade outcomes, and a disclosure-first stance, monetized as a simple $15/month upgrade over a free tier.</p>
|
||
<div class="atglance">
|
||
<div><div class="n">9</div><div class="l">task types, one inbox</div></div>
|
||
<div><div class="n">Live</div><div class="l">in production · 8 types shipped</div></div>
|
||
<div><div class="n">$15/mo</div><div class="l">Clutch+ freemium upgrade</div></div>
|
||
<div><div class="n">Cents</div><div class="l">marginal cost per AI call</div></div>
|
||
</div>
|
||
<nav class="contents" aria-label="Contents">
|
||
<a href="#problem">Problem</a><a href="#product">Product</a><a href="#status">Traction</a>
|
||
<a href="#market">Market</a><a href="#competition">Competition</a><a href="#model">Business model</a>
|
||
<a href="#gtm">Go-to-market</a><a href="#financials">Financials</a><a href="#team">Team</a>
|
||
<a href="#risks">Risks</a><a href="#roadmap">Roadmap</a>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PROBLEM ============ -->
|
||
<section id="problem">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">The problem</p>
|
||
<h2>Everyone owes an hour to a phone tree.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Booking, cancelling, disputing, waiting on hold, chasing a quote, getting a sooner appointment — the <strong>life-admin tax</strong>. It’s not hard. It’s just tedious, synchronous, and stuck behind hold music. So we all put it off, pay the late fee, keep the plan we meant to cancel, and take the appointment three weeks out.</p>
|
||
</div>
|
||
</div>
|
||
<div class="statline">
|
||
<div><div class="n">Days/yr</div><div class="l">a typical adult loses to hold music, phone menus, and follow-up calls</div></div>
|
||
<div><div class="n">$100s</div><div class="l">left on the table each year in un-negotiated bills and forgotten cancellations</div></div>
|
||
<div><div class="n">1 tab</div><div class="l">is all it takes to avoid the task entirely — the friction always wins</div></div>
|
||
</div>
|
||
<p class="foot-note">Figures above are illustrative framing of a universal, well-documented friction — not audited market data.</p>
|
||
</section>
|
||
|
||
<!-- ============ WHAT IT IS ============ -->
|
||
<section id="product">
|
||
<div class="two">
|
||
<div>
|
||
<p class="eyebrow">What Clutch is</p>
|
||
<h2>You ask in plain English. Clutch does the rest.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Type <q class=”dim”>get me an earlier dentist appointment</q> or <q class=”dim”>sit on hold with the airline and put me through to a human.</q> Clutch reads the intent, picks the right kind of task, fills in the details it can, and goes to work — placing the calls, navigating the menus, negotiating, or watching for an opening.</p>
|
||
<p>You get a live view of what’s happening, an itemized receipt when it’s done, and a decision only when one’s actually yours to make. It’s the difference between <strong>a to-do list and a concierge desk.</strong></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ TASK CATALOG ============ -->
|
||
<section>
|
||
<p class="eyebrow">The catalog · nine ways to hand it off</p>
|
||
<div class="ledger">
|
||
<div class="lrow flag">
|
||
<div class="t">Holdline <em>flagship · live call</em></div>
|
||
<p class="d">Clutch dials a support line, works through the menu, waits on hold, and rings you the moment a real person picks up. <q>Wait on hold with Comcast and get me a human.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Sniper <em>watch & grab</em></div>
|
||
<p class="d">Continuously watches for an earlier slot — appointment, reservation, opening — and grabs it the instant it appears. <q>Find me a sooner opening.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Reservation <em>book</em></div>
|
||
<p class="d">Books the table — and will call the restaurant to cancel it later if plans change. <q>Table for four Friday at 7.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Appointment <em>schedule</em></div>
|
||
<p class="d">Books doctor, dentist, DMV, salon, or vet visits around your availability. <q>Schedule a checkup with Dr. Lee.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Bill negotiation <em>save</em></div>
|
||
<p class="d">Calls the provider and works the bill down, then reports what it saved. <q>Lower my internet bill.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Cancel <em>close it out</em></div>
|
||
<p class="d">Ends the subscription or service you keep forgetting to kill. <q>Cancel my gym membership.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Quotes <em>compare</em></div>
|
||
<p class="d">Gathers and compares prices so you don’t make five calls yourself. <q>Get me quotes on movers.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Waitlist <em>stand by</em></div>
|
||
<p class="d">Gets you on the list and watches for your name to come up. <q>Get on the standby list.</q></p>
|
||
</div>
|
||
<div class="lrow">
|
||
<div class="t">Errand <em>anything else</em></div>
|
||
<p class="d">Anything that doesn’t fit a lane — described in your own words. <q>Whatever you need.</q></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FLAGSHIP: HOLDLINE ============ -->
|
||
<section>
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow coral">The flagship</p>
|
||
<h2>Holdline: a real AI phone call, end to end.</h2>
|
||
</div>
|
||
<div>
|
||
<p>This is the part that isn’t a demo. Holdline places a <strong>genuine outbound phone call</strong>, hears the line in real time, talks its way through the menu, and waits — so you don’t sit there with the phone to your ear. It’s built on the same voice + reasoning stack the biggest AI labs ship, wired into a purpose-built state machine.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="seq">
|
||
<div class="s"><div class="no">01</div><h4>Dial</h4><p>Places a real outbound call to the number you name.</p></div>
|
||
<div class="s"><div class="no">02</div><h4>Navigate</h4><p>Listens to the IVR and speaks or presses its way to a human.</p></div>
|
||
<div class="s"><div class="no">03</div><h4>Hold</h4><p>Waits out the hold music — for as long as it takes.</p></div>
|
||
<div class="s"><div class="no">04</div><h4>Detect & disclose</h4><p>Recognizes a real person, and says up front that it’s an AI.</p></div>
|
||
<div class="s"><div class="no">05</div><h4>Bridge</h4><p>Rings your phone and connects you the instant the human’s there.</p></div>
|
||
</div>
|
||
|
||
<div class="safebar" aria-label="Safety and trust guarantees">
|
||
<span>Always discloses it’s an AI</span>
|
||
<span>Never records the call</span>
|
||
<span>Hard time cap per call</span>
|
||
<span>Number allow-list</span>
|
||
<span>Ships dark behind a flag until proven</span>
|
||
</div>
|
||
<p class="foot-note">Under the hood: Twilio ConversationRelay for the live voice leg, Claude (Opus) for menu navigation and human detection, and a purpose-built, fully unit-tested call state machine with a human-detection guard so hold announcements can’t trigger a false handoff.</p>
|
||
</section>
|
||
|
||
<!-- ============ WHERE WE ARE ============ -->
|
||
<section id="status">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Traction · where it stands today</p>
|
||
<h2>Not a prototype. A shipped product in final pre-flight.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Clutch is <strong>live in production</strong> with a full account system and eight task types running today. The live-call engine is <strong>built, reviewed, deployed, and dark</strong> — one real-world validation pass away from switching on. This is a side project that has quietly become a real product.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="status">
|
||
<div class="scard">
|
||
<div class="h"><b>The app</b><span class="badge ship">Live</span></div>
|
||
<p>Deployed at clutch.mosaic.site on managed Postgres + object storage. Accounts, login, password reset, memory that pre-fills your next request, itemized receipts, and shareable recaps — all in production.</p>
|
||
</div>
|
||
<div class="scard">
|
||
<div class="h"><b>Eight task types</b><span class="badge ship">Live</span></div>
|
||
<p>Reservation, Appointment, Bill, Cancel, Quotes, Waitlist, Sniper, and Errand run today, each with guardrails against split-brain state, cross-user access, and stranded jobs.</p>
|
||
</div>
|
||
<div class="scard">
|
||
<div class="h"><b>Holdline live-call engine</b><span class="badge flight">Pre-flight</span></div>
|
||
<p>Real Twilio + Claude call path, built and code-reviewed, deployed behind a feature flag. Ingress for the live voice socket is confirmed in production. One supervised real call away from launch.</p>
|
||
</div>
|
||
<div class="scard">
|
||
<div class="h"><b>Engineering rigor</b><span class="badge ship">Green</span></div>
|
||
<p>50+ automated tests — unit and full end-to-end integration suites — passing, with a self-cleaning harness that leaves production untouched. Built test-first, task by task, each reviewed before merge.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ MARKET ANALYSIS ============ -->
|
||
<section id="market">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Market analysis</p>
|
||
<h2>A universal chore. A newly-proven category.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Every phone-owning adult is a potential user — the tasks Clutch handles are ones nearly everyone faces. The reachable market is the slice who will pay to never do them again: busy households, professionals, and anyone for whom time beats the phone. The tiers below are an illustrative top-down model with assumptions stated — framing for scale, not audited research.</p>
|
||
</div>
|
||
</div>
|
||
<div class="tiers">
|
||
<div class="tier"><div class="cap">TAM · everyone with the chore</div><div class="big">~130M</div><p class="who">U.S. adults who regularly deal with bills, bookings, cancellations, and hold queues.</p></div>
|
||
<div class="tier"><div class="cap">SAM · will delegate to software</div><div class="big">~25M</div><p class="who">Digitally-comfortable adults open to an app placing calls for them — the behavior 2026’s call-agents have now validated.</p></div>
|
||
<div class="tier som"><div class="cap">SOM · a credible early wedge</div><div class="big">~250K</div><p class="who">~1% of SAM in the first phase. At $15/mo, that is already a meaningful, self-funding base.</p></div>
|
||
</div>
|
||
<p class="foot-note">Illustrative model — TAM ≈ U.S. adult population; SAM ≈ share comfortable delegating calls to software; SOM ≈ an early-penetration wedge. Conversion and pricing are proposed, not observed. Intended to frame opportunity size, not forecast revenue.</p>
|
||
</section>
|
||
|
||
<!-- ============ COMPETITIVE ANALYSIS ============ -->
|
||
<section id="competition">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Competitive analysis</p>
|
||
<h2>The category is real. No one owns the whole job.</h2>
|
||
</div>
|
||
<div>
|
||
<p>“AI that waits on hold” went mainstream in 2026 — proof of demand, and proof we’re not alone. But today’s players are point tools: a call agent, <em>or</em> a bill-fighter, <em>or</em> a booking bot. Clutch’s bet is that people want one place that does the whole sweep, reports the outcome, and is honest about being an AI.</p>
|
||
</div>
|
||
</div>
|
||
<div class="matrix-wrap">
|
||
<table class="matrix">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Player</th>
|
||
<th scope="col">Real end-to-end calls</th>
|
||
<th scope="col">Breadth of tasks</th>
|
||
<th scope="col">Cost structure</th>
|
||
<th scope="col">Trust & transparency</th>
|
||
<th scope="col">Consumer price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="us">
|
||
<th scope="row">Clutch<small>AI concierge · 9 task types</small></th>
|
||
<td class="cell"><span class="mk-y">●</span>Dials, navigates, holds, bridges</td>
|
||
<td class="cell"><span class="mk-y">●</span>Broad — calls + bookings + negotiation + more</td>
|
||
<td class="cell"><span class="mk-y">●</span>AI — cents per task</td>
|
||
<td class="cell"><span class="mk-y">●</span>Discloses AI, never records, receipts</td>
|
||
<td class="cell">Free / $15 mo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">AI call agents<small>GetHuman, Assindo, Simple AI, HeyRobyn</small></th>
|
||
<td class="cell"><span class="mk-y">●</span>Yes — the category we share</td>
|
||
<td class="cell"><span class="mk-p">◐</span>Narrow — calling only</td>
|
||
<td class="cell"><span class="mk-y">●</span>AI — low</td>
|
||
<td class="cell"><span class="mk-p">◐</span>Varies by app</td>
|
||
<td class="cell">Free–$/mo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">AI consumer-rights<small>DoNotPay</small></th>
|
||
<td class="cell"><span class="mk-p">◐</span>Mostly chat / form-based</td>
|
||
<td class="cell"><span class="mk-p">◐</span>Disputes, bills, cancellations</td>
|
||
<td class="cell"><span class="mk-y">●</span>AI — low</td>
|
||
<td class="cell"><span class="mk-n">○</span>FTC settlement (2025) over AI claims; low trust scores</td>
|
||
<td class="cell">~$36 / 2 mo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Human assistants<small>Fancy Hands, EAs, task services</small></th>
|
||
<td class="cell"><span class="mk-y">●</span>Yes — a person calls</td>
|
||
<td class="cell"><span class="mk-y">●</span>Broad — anything</td>
|
||
<td class="cell"><span class="mk-n">○</span>Human — $/task, doesn’t scale</td>
|
||
<td class="cell"><span class="mk-y">●</span>High — it’s a person</td>
|
||
<td class="cell">$$–$$$ / mo</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Do it yourself<small>the status quo</small></th>
|
||
<td class="cell"><span class="mk-y">●</span>You, on hold</td>
|
||
<td class="cell"><span class="mk-y">●</span>Anything — if you find the time</td>
|
||
<td class="cell"><span class="mk-n">○</span>Your hours</td>
|
||
<td class="cell">—</td>
|
||
<td class="cell">“Free”</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="two" style="margin-top:26px">
|
||
<div>
|
||
<h3>Where Clutch wins</h3>
|
||
<p>The only option that is broad <em>and</em> cheap <em>and</em> honest: AI-cost economics like the call-agents, task breadth like a human assistant, and a disclosure-first stance that is the deliberate opposite of the category’s trust problems. Outcomes — receipts, a “won,” a decision only when it’s yours — turn a phone tool into a concierge.</p>
|
||
</div>
|
||
<div>
|
||
<h3>Where we’re exposed</h3>
|
||
<p>Hold-waiting is no longer novel, and some rivals are free or funded. Breadth is our edge but not yet a moat; the defensibility we’re building is task-completion data — IVR trees, negotiation patterns — and a trusted consumer brand. We plan <em>against</em> incumbents adding breadth, not around the hope that they won’t.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ BUSINESS MODEL ============ -->
|
||
<section id="model">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">The business</p>
|
||
<h2>Free to fall in love with. Paid to rely on.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Adoption comes from letting anyone hand off a task for free. Revenue comes from the people for whom that becomes a habit — the ones who want the calls made, the bills fought, and the hold-waiting done without thinking about it.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="plans">
|
||
<div class="plan">
|
||
<div class="pname">Clutch — Free</div>
|
||
<div class="price">$0</div>
|
||
<ul>
|
||
<li>Plain-English intake, all task types</li>
|
||
<li>A few live tasks a month</li>
|
||
<li>Live status, receipts, and history</li>
|
||
<li>The whole product — just metered</li>
|
||
</ul>
|
||
</div>
|
||
<div class="plan pro">
|
||
<div class="pname">Clutch+</div>
|
||
<div class="price">$15<small> / month</small></div>
|
||
<ul>
|
||
<li>Unlimited tasks, including Holdline live calls</li>
|
||
<li>Priority handling & longer hold caps</li>
|
||
<li>Sniper always-on watching</li>
|
||
<li>The concierge you stop thinking about</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="econ" aria-label="Illustrative unit economics">
|
||
<div class="b"><div class="n">~<span class="u">$15</span></div><div class="l">monthly price anchors to a single saved evening on hold</div></div>
|
||
<div class="b"><div class="n">Cents</div><div class="l">marginal cost per live call — voice + AI minutes, not human labor</div></div>
|
||
<div class="b"><div class="n">1:many</div><div class="l">one Clutch handles calls no human assistant could staff at this price</div></div>
|
||
</div>
|
||
<p class="foot-note">Pricing shown is the proposed launch model and is adjustable. Unit-economics notes are illustrative of the structural advantage of an AI-run concierge versus a human one — not a financial forecast.</p>
|
||
</section>
|
||
|
||
<!-- ============ GO-TO-MARKET ============ -->
|
||
<section id="gtm">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Go-to-market</p>
|
||
<h2>Lead with the pain everyone feels.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Acquisition starts where the hurt is sharpest and the demo most visceral — waiting on hold — then widens into the full concierge once trust is earned. The best marketing is a result worth screenshotting.</p>
|
||
</div>
|
||
</div>
|
||
<div class="road">
|
||
<div class="phase now">
|
||
<p class="p">Wedge</p>
|
||
<h4>“Never wait on hold again”</h4>
|
||
<ul>
|
||
<li>Free hold-waiting as the front door</li>
|
||
<li>Shareable “Clutch held 47 min for me” recaps</li>
|
||
<li>SEO on every “[company] customer service / wait time” search</li>
|
||
</ul>
|
||
</div>
|
||
<div class="phase">
|
||
<p class="p">Expand</p>
|
||
<h4>One task becomes many</h4>
|
||
<ul>
|
||
<li>Post-call nudge: “want Clutch to lower this bill too?”</li>
|
||
<li>Memory pre-fills the next request → habit</li>
|
||
<li>Repeat free users convert to Clutch+</li>
|
||
</ul>
|
||
</div>
|
||
<div class="phase">
|
||
<p class="p">Compound</p>
|
||
<h4>Word of mouth & trust</h4>
|
||
<ul>
|
||
<li>Referrals — the results are inherently shareable</li>
|
||
<li>Disclosure-first brand as a wedge vs. distrusted rivals</li>
|
||
<li>Partnerships where hold time is a known tax</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FINANCIAL OUTLOOK ============ -->
|
||
<section id="financials">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Financial outlook</p>
|
||
<h2>Cents to serve. A habit to monetize.</h2>
|
||
</div>
|
||
<div>
|
||
<p>The structure is favorable: each AI call costs cents in voice and model minutes, while the value it replaces — an evening on hold, a human assistant — is worth orders of magnitude more. The three-year sketch below shows shape and operating leverage on the proposed $15/mo price and stated assumptions. It is an illustration, not a forecast or a commitment.</p>
|
||
</div>
|
||
</div>
|
||
<div class="fin-wrap">
|
||
<table class="fin">
|
||
<thead><tr><th scope="col">Illustrative model</th><th scope="col">Year 1</th><th scope="col">Year 2</th><th scope="col">Year 3</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Free users (cumulative)</td><td>25,000</td><td>150,000</td><td>500,000</td></tr>
|
||
<tr><td>Paid conversion</td><td>4%</td><td>5%</td><td>6%</td></tr>
|
||
<tr><td>Clutch+ subscribers</td><td>1,000</td><td>7,500</td><td>30,000</td></tr>
|
||
<tr class="hl"><td>Annual recurring revenue</td><td>~$180K</td><td>~$1.35M</td><td>~$5.4M</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="foot-note">Illustrative only — ARR = subscribers × $15 × 12. User growth, conversion, and price are assumptions chosen to show operating leverage, not projections of actual results. Marginal cost per completed call is expected in the single-digit-cents range, well under the subscription’s per-task value.</p>
|
||
</section>
|
||
|
||
<!-- ============ TEAM & OPERATIONS ============ -->
|
||
<section id="team">
|
||
<div class="head-row">
|
||
<div>
|
||
<p class="eyebrow">Team & operations</p>
|
||
<h2>Founder-built, and further than it looks.</h2>
|
||
</div>
|
||
<div>
|
||
<p>Clutch was designed and built end-to-end by its founder — the full product, the account system, and a real telephony + AI call stack with a fully-tested state machine and safety guardrails. What a solo build has already shipped is the strongest signal here; what it needs next is deliberate resourcing.</p>
|
||
</div>
|
||
</div>
|
||
<div class="status">
|
||
<div class="scard">
|
||
<div class="h"><b>Today</b><span class="badge ship">Shipped</span></div>
|
||
<p>Solo founder-operator. Live product, eight task types, real-call engine in pre-flight, 50+ automated tests, self-cleaning infrastructure. Runs on managed cloud (Postgres, storage, containers) — low fixed overhead.</p>
|
||
</div>
|
||
<div class="scard">
|
||
<div class="h"><b>To scale</b><span class="badge flight">Next</span></div>
|
||
<p>Reliability & on-call coverage for live calls, a growth/GTM partner, and support as volume grows. The engineering foundation is built to widen the allow-list — not to be rebuilt.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ RISKS ============ -->
|
||
<section id="risks">
|
||
<p class="eyebrow">Risks & mitigations</p>
|
||
<div class="risks">
|
||
<div class="risk"><p class="r">Funded or free competitors</p><p>AI call-agents already exist; some are free or well-backed.</p><p class="m">Compete on breadth + outcomes + trust, not “can do calls”; build the task-completion data advantage early.</p></div>
|
||
<div class="risk"><p class="r">Trust & regulation of AI calls</p><p>AI placing calls raises disclosure, consent, and recording-law questions — and rivals have been burned.</p><p class="m">Disclosure-first by design: always announces it’s an AI, never records, hard caps. Trust as a feature, not an afterthought.</p></div>
|
||
<div class="risk"><p class="r">Real-world call reliability</p><p>IVRs, accents, and edge cases are messy, and the live engine is pre-flight.</p><p class="m">Ships dark behind a flag + tight allow-list; a supervised first call, then widen deliberately — human-detection guard already in place.</p></div>
|
||
<div class="risk"><p class="r">Unit economics at scale</p><p>Voice + AI minutes are cheap but not zero; heavy free use could add up.</p><p class="m">Free tier is metered; the expensive live-call tasks sit behind Clutch+, so cost scales with paid usage.</p></div>
|
||
<div class="risk"><p class="r">Single-founder concentration</p><p>Key-person risk on a solo build.</p><p class="m">Documented, tested, handoff-ready codebase; resourcing the team is the explicit next step.</p></div>
|
||
<div class="risk"><p class="r">Platform dependency</p><p>Relies on third-party telephony and model providers.</p><p class="m">Provider-agnostic call and AI seams; the state machine and product logic are ours and portable.</p></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ROADMAP ============ -->
|
||
<section id="roadmap">
|
||
<p class="eyebrow">Where it goes next</p>
|
||
<div class="road">
|
||
<div class="phase now">
|
||
<p class="p">Now — pre-flight</p>
|
||
<h4>Switch on the calls</h4>
|
||
<ul>
|
||
<li>First supervised real Holdline call</li>
|
||
<li>Turn on request-signature checks</li>
|
||
<li>Open Holdline to early users, tight allow-list</li>
|
||
</ul>
|
||
</div>
|
||
<div class="phase">
|
||
<p class="p">Next — the wedge</p>
|
||
<h4>Make hold-waiting the hook</h4>
|
||
<ul>
|
||
<li>“Never wait on hold again” as the front door</li>
|
||
<li>Convert free hold-waiters into Clutch+</li>
|
||
<li>Bill negotiation as the second live-call win</li>
|
||
</ul>
|
||
</div>
|
||
<div class="phase">
|
||
<p class="p">Then — the vision</p>
|
||
<h4>Anything that needs a phone</h4>
|
||
<ul>
|
||
<li>One concierge for every call you’d rather not make</li>
|
||
<li>Proactive: it notices the task before you do</li>
|
||
<li>The default place you hand off life-admin</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ CLOSE ============ -->
|
||
<section class="close">
|
||
<p class="eyebrow">The short version</p>
|
||
<h2>It’s built. It works. It’s ready to make the call.</h2>
|
||
<p>Clutch takes the most universally hated part of adult life — the phone calls and the waiting — and quietly does it for you. The product is live, the hard engineering is done, and the flagship is one real call from launch. What’s left isn’t whether it works. It’s how far it goes.</p>
|
||
<a class="cta" href="https://clutch.mosaic.site" target="_blank" rel="noopener">Try it → clutch.mosaic.site</a>
|
||
</section>
|
||
|
||
<footer>
|
||
<span>Clutch · Product brief & business plan</span>
|
||
<span class="foot-actions">
|
||
<a class="pdfbtn" href="https://zoe-pitches.mosaic.site/clutch/Clutch-Business-Plan.pdf">Download PDF ↓</a>
|
||
<button class="pdfbtn" id="pdfbtn" type="button">Save as PDF ↧</button>
|
||
</span>
|
||
<span>Product live at clutch.mosaic.site</span>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
var steps=[].slice.call(document.querySelectorAll('.cc-step'));
|
||
var wave=document.getElementById('cc-wave');
|
||
var timer=document.getElementById('cc-timer');
|
||
var result=document.getElementById('cc-result');
|
||
var num=document.getElementById('cc-num');
|
||
if(wave){for(var i=0;i<28;i++){var b=document.createElement('i');b.style.animationDelay=(i*0.06)+'s';b.style.height=(20+Math.abs(Math.sin(i))*70)+'%';wave.appendChild(b);}}
|
||
|
||
var labels=['calling on your behalf','pressing 2 for support','holding your place','“Hi, I’m an automated assistant…”','your phone is ringing'];
|
||
var HOLD_BASE=458; // seed the on-hold clock so it reads like a real long wait, then ticks up
|
||
function mmss(s){return String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0');}
|
||
|
||
// Wire the footer "Save as PDF" control to the browser's print-to-PDF.
|
||
var pb=document.getElementById('pdfbtn');
|
||
if(pb)pb.addEventListener('click',function(){window.print();});
|
||
|
||
var staticMode=(window.matchMedia&&window.matchMedia('(prefers-reduced-motion:reduce)').matches)
|
||
|| document.documentElement.hasAttribute('data-static');
|
||
if(staticMode){
|
||
steps.forEach(function(s){s.classList.add('done');});
|
||
if(num)num.textContent='connected';
|
||
if(timer)timer.textContent=mmss(HOLD_BASE+3)+' — connected';
|
||
if(result)result.textContent='✓ Connected';
|
||
if(wave)wave.style.opacity='.4';
|
||
return;
|
||
}
|
||
|
||
var k=0, held=0;
|
||
function paint(){
|
||
steps.forEach(function(s){
|
||
var idx=+s.getAttribute('data-k');
|
||
s.classList.remove('active','done');
|
||
if(idx<k)s.classList.add('done'); else if(idx===k)s.classList.add('active');
|
||
});
|
||
if(num)num.textContent=labels[k]||'';
|
||
if(timer){
|
||
timer.textContent = k<2 ? '00:00 · dialing'
|
||
: k>=4 ? mmss(HOLD_BASE+held)+' — connected'
|
||
: mmss(HOLD_BASE+held)+' on hold';
|
||
}
|
||
if(result)result.innerHTML = k>=4 ? '✓ Connected' : ' ';
|
||
if(wave)wave.style.opacity=(k===2||k===3)?'1':'.28';
|
||
}
|
||
paint();
|
||
setInterval(function(){ k=(k+1)%steps.length; if(k===0)held=0; paint(); }, 2400);
|
||
setInterval(function(){ if(k>=2&&k<4){ held++; paint(); } }, 1000);
|
||
})();
|
||
</script>
|
||
</body></html> |