181 lines
12 KiB
HTML
181 lines
12 KiB
HTML
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Clutch — Executive Summary</title>
|
|
<style>
|
|
:root{
|
|
--ink:#0E1016; --surface:#151A24; --card:#151A24; --card-2:#1B2230;
|
|
--line:#242C3B; --line-strong:#34405A;
|
|
--text:#ECEEF3; --muted:#C4CBD8; --faint:#8A93A6;
|
|
--emerald:#E7B25A; --emerald-deep:#C6913B; --emerald-glow:#F4CD8B;
|
|
--gold:#FF6F5C; --coral:#5FD0A3;
|
|
--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:#F3F5F9; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#E9EEF5;
|
|
--line:#DCE3EC; --line-strong:#C4CEDE;
|
|
--text:#141821; --muted:#3A424F; --faint:#6A7385;
|
|
--emerald:#9C6F1C; --emerald-deep:#805A12; --emerald-glow:#B8862E; --gold:#D8492F; --coral:#1E9C70; }
|
|
}
|
|
:root[data-theme="dark"]{ --ink:#0E1016; --surface:#151A24; --card:#151A24; --card-2:#1B2230;
|
|
--line:#242C3B; --line-strong:#34405A;
|
|
--text:#ECEEF3; --muted:#C4CBD8; --faint:#8A93A6;
|
|
--emerald:#E7B25A; --emerald-deep:#C6913B; --emerald-glow:#F4CD8B; --gold:#FF6F5C; --coral:#5FD0A3; }
|
|
:root[data-theme="light"]{ --ink:#F3F5F9; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#E9EEF5;
|
|
--line:#DCE3EC; --line-strong:#C4CEDE;
|
|
--text:#141821; --muted:#3A424F; --faint:#6A7385;
|
|
--emerald:#9C6F1C; --emerald-deep:#805A12; --emerald-glow:#B8862E; --gold:#D8492F; --coral:#1E9C70; }
|
|
|
|
*{box-sizing:border-box}
|
|
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
|
|
.sheet{max-width:960px; margin:0 auto; padding:40px 34px 46px}
|
|
h1,h2,h3{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance}
|
|
p{margin:0}
|
|
.tnum{font-variant-numeric:tabular-nums}
|
|
a{color:inherit}
|
|
|
|
.head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px}
|
|
.head .brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:700; font-size:19px}
|
|
.spark{width:11px;height:11px;border-radius:3px;background:var(--emerald);box-shadow:0 0 12px var(--emerald)}
|
|
.head .doc{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald); margin-top:3px}
|
|
.head .right{margin-left:auto; display:flex; gap:8px; align-items:center}
|
|
.pill{font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); display:inline-flex; gap:7px; align-items:center; text-decoration:none}
|
|
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald); box-shadow:0 0 7px var(--emerald)}
|
|
a.pill{color:var(--emerald); border-color:color-mix(in srgb,var(--emerald) 40%,var(--line-strong))}
|
|
|
|
.thesis{margin:24px 0 4px; font-family:var(--serif); font-size:clamp(24px,3.6vw,32px); line-height:1.16; letter-spacing:-.015em; max-width:26ch}
|
|
.thesis .em{color:var(--emerald)}
|
|
.deck{color:var(--muted); margin-top:12px; max-width:70ch; font-size:15.5px}
|
|
|
|
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
|
|
@media(max-width:720px){ .grid3{grid-template-columns:1fr} }
|
|
.blk{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:18px 19px}
|
|
.blk .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:9px}
|
|
.blk .lab.g{color:var(--gold)}
|
|
.blk h3{font-size:16.5px; letter-spacing:-.01em; margin-bottom:6px}
|
|
.blk p{color:var(--muted); font-size:13.5px; line-height:1.5}
|
|
|
|
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:16px}
|
|
.stats > div{background:var(--card); padding:15px 16px}
|
|
.stats .k{font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-.02em; color:var(--emerald)}
|
|
.stats .k.g{color:var(--gold)}
|
|
.stats .m{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:5px}
|
|
@media(max-width:720px){ .stats{grid-template-columns:1fr 1fr} }
|
|
|
|
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:16px; margin-top:16px}
|
|
@media(max-width:720px){ .split{grid-template-columns:1fr} }
|
|
.econ{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-strong); border-radius:13px; padding:19px}
|
|
.econ .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
|
|
.econ .eq{font-family:var(--mono); font-size:12.5px; color:var(--muted); line-height:1.9}
|
|
.econ .eq .hi{color:var(--emerald); font-weight:600} .econ .eq .hg{color:var(--gold); font-weight:600}
|
|
.econ .big{font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-top:8px}
|
|
|
|
.status{background:var(--card); border:1px solid var(--line); border-radius:13px; padding:19px}
|
|
.status .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
|
|
.srow{display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px}
|
|
.srow .ic{width:18px;height:18px;flex:0 0 18px;border-radius:5px;display:grid;place-items:center;font-size:11px;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)}
|
|
.srow .g2{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--faint)}
|
|
|
|
.ask{margin-top:18px; background:var(--card-2); border:1px solid var(--line-strong); border-left:3px solid var(--emerald); border-radius:0 12px 12px 0; padding:16px 20px}
|
|
.ask .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); margin-bottom:6px}
|
|
.ask p{font-size:14.5px}
|
|
.ask b{color:var(--text)}
|
|
|
|
.foot{margin-top:22px; border-top:1px solid var(--line); padding-top:14px; font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
|
|
.foot a{color:var(--emerald); text-decoration:none}
|
|
|
|
@media print{
|
|
:root{ --ink:#fff; --surface:#fff; --card:#fff; --card-2:#F5F3EE; --line:rgba(30,26,16,.14); --line-strong:rgba(30,26,16,.26);
|
|
--text:#1A1610; --muted:#4A4438; --faint:#6B6355; --emerald:#8A5E12; --emerald-deep:#6E4A0D; --gold:#B33F26; --coral:#2E7D5B; }
|
|
*{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
|
|
@page{ size:A4; margin:10mm }
|
|
html,body{ background:#fff; font-size:11.5px; line-height:1.48 }
|
|
.sheet{ padding:0; max-width:none }
|
|
.head{ padding-bottom:12px } .head .right .pill.pdflink{ display:none }
|
|
.thesis{ font-size:21px; margin:14px 0 3px }
|
|
.deck{ font-size:12px; margin-top:8px }
|
|
.grid3{ margin-top:12px; gap:10px } .blk{ padding:13px 14px } .blk h3{ font-size:14.5px } .blk p{ font-size:11.5px; line-height:1.42 }
|
|
.stats{ margin-top:10px } .stats > div{ padding:11px 13px } .stats .k{ font-size:22px }
|
|
.split{ margin-top:10px; gap:10px } .econ,.status{ padding:14px } .econ .big{ font-size:19px }
|
|
.srow{ padding:3px 0 } .ask{ margin-top:11px; padding:12px 16px } .ask p{ font-size:12.5px }
|
|
.foot{ margin-top:12px; padding-top:10px }
|
|
.blk,.econ,.status,.ask,.stats{ break-inside:avoid }
|
|
}
|
|
</style>
|
|
|
|
<div class="sheet">
|
|
<div class="head">
|
|
<div>
|
|
<div class="brand"><span class="spark"></span>Clutch</div>
|
|
<div class="doc">Executive Summary</div>
|
|
</div>
|
|
<div class="right">
|
|
<span class="pill"><span class="dot"></span>Live · flagship pre-flight</span>
|
|
<a class="pill pdflink" href="https://zoe-pitches.mosaic.site/clutch/Clutch-Executive-Summary.pdf">PDF ↓</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="thesis">The concierge for the calls you keep meaning to make — <span class="em">handled</span>.</p>
|
|
<p class="deck">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. It’s live in production with eight task types running today; its flagship real-call engine, Holdline, is built, reviewed, deployed behind a flag, and one supervised call from launch.</p>
|
|
|
|
<div class="grid3">
|
|
<div class="blk">
|
|
<div class="lab g">The problem</div>
|
|
<h3>Everyone owes an hour to a phone tree</h3>
|
|
<p>Booking, cancelling, disputing, chasing a quote, waiting on hold — the life-admin tax. None of it is hard, just tedious and synchronous, so it gets put off, and the friction always wins.</p>
|
|
</div>
|
|
<div class="blk">
|
|
<div class="lab">The solution</div>
|
|
<h3>Ask in plain English. It does the rest</h3>
|
|
<p>One inbox, nine task types — Holdline, Sniper, Reservation, Appointment, Bill negotiation, Cancel, Quotes, Waitlist, Errand. Clutch reads the intent, places the calls, and reports back with a receipt.</p>
|
|
</div>
|
|
<div class="blk">
|
|
<div class="lab">Why it wins</div>
|
|
<h3>Broad, cheap, and honest</h3>
|
|
<p>AI-cost economics like the point call-agents, task breadth like a human assistant, and a disclosure-first stance — always announces it’s an AI, never records — where rivals have been burned on trust.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div><div class="k tnum">9</div><div class="m">Task types, one inbox</div></div>
|
|
<div><div class="k tnum">Live</div><div class="m">In production · 8 shipped</div></div>
|
|
<div><div class="k g tnum">$15/mo</div><div class="m">Clutch+ freemium upgrade</div></div>
|
|
<div><div class="k tnum">50+</div><div class="m">Automated tests green</div></div>
|
|
</div>
|
|
|
|
<div class="split">
|
|
<div class="econ">
|
|
<div class="lab">Unit economics</div>
|
|
<div class="eq">
|
|
<span class="hi">Free</span> tier = <span class="hi">the whole product</span>, metered<br>
|
|
<span class="hg">$15/mo</span> Clutch+ = <span class="hg">unlimited tasks + live calls</span><br>
|
|
→ marginal cost per AI call: cents, not dollars
|
|
</div>
|
|
<div class="big">One saved evening covers the month.</div>
|
|
<p style="color:var(--muted); font-size:12.5px; margin-top:7px">Model: freemium consumer subscription, AI-run cost structure vs. a human-staffed alternative. <span style="color:var(--faint)">Figures illustrative.</span></p>
|
|
</div>
|
|
<div class="status">
|
|
<div class="lab">Where we are</div>
|
|
<div class="srow"><span class="ic ok">✓</span> App live · accounts & 8 task types shipped <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic ok">✓</span> 50+ automated tests, full suites green <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic ok">✓</span> Holdline call engine built & reviewed <span class="g2">DONE</span></div>
|
|
<div class="srow"><span class="ic gate">!</span> First supervised real Holdline call <span class="g2">GATE</span></div>
|
|
<div class="srow"><span class="ic gate">!</span> Open Holdline to early-access allow-list <span class="g2">GATE</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ask">
|
|
<div class="lab">The ask</div>
|
|
<p><b>A green light to run the first supervised Holdline call and open it to an early-access allow-list.</b> The build risk is behind us — eight task types are live and tested daily. What’s left is validating the one moment that turns Clutch from a task manager into the concierge it’s built to be, and resourcing the team beyond a solo founder-build.</p>
|
|
</div>
|
|
|
|
<div class="foot">
|
|
<span>Clutch · Executive Summary · Confidential</span>
|
|
<span>Full plan: <a href="https://zoe-pitches.mosaic.site/clutch/">zoe-pitches.mosaic.site/clutch</a></span>
|
|
</div>
|
|
</div>
|