Add Clutch business plan at /clutch/
This commit is contained in:
parent
a189196eef
commit
bbec761ef4
Binary file not shown.
|
|
@ -0,0 +1,594 @@
|
|||
<!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}
|
||||
|
||||
: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{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>
|
||||
|
||||
<!-- ============ PROBLEM ============ -->
|
||||
<section>
|
||||
<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>
|
||||
<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>
|
||||
<div class="head-row">
|
||||
<div>
|
||||
<p class="eyebrow">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>
|
||||
|
||||
<!-- ============ BUSINESS MODEL ============ -->
|
||||
<section>
|
||||
<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>
|
||||
|
||||
<!-- ============ ROADMAP ============ -->
|
||||
<section>
|
||||
<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>
|
||||
Loading…
Reference in New Issue