build-vs-buy-cedar.html42.5 KBView on GitHub <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cedar — Build vs. Buy</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
<style>
/* ─── CEDAR THEME TOKENS ──────────────────────────────────────
Mirrors the product's light "paper" palette (apps/mail globals.css):
warm cream canvas, white cards, ink text, emerald accent. */
:root {
--cedar-base: #fffcf6; /* app canvas */
--cedar-raised: #ffffff; /* cards, panels */
--cedar-sunken: #f4efe6; /* wells, hovers */
--cedar-border: #eae3d8; /* hairlines */
--cedar-ink: #1a1612; /* foreground */
--cedar-muted: #7b6f61; /* secondary text */
--cedar-faint: #9a8f80; /* tertiary text */
--emerald: #10b981; /* accent — fills, dots, glows */
--emerald-deep: #0a7a52; /* accent — text on light */
--emerald-bright: #1de9a0; /* accent — orb highlights */
--amber-deep: #b4621c; /* "the catch" — warm contrast */
}
/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
font-family: 'Geist', sans-serif;
background: var(--cedar-base);
color: var(--cedar-ink);
}
/* ─── BACKGROUND ORBS ──────────────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(130px); opacity: 0.10; animation: orbFloat 18s ease-in-out infinite; }
.orb-1 { width: 700px; height: 700px; background: radial-gradient(circle, var(--emerald), transparent); top: -200px; left: -200px; animation-delay: 0s; }
.orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--emerald-bright), transparent); top: 40%; right: -150px; animation-delay: -6s; }
.orb-3 { width: 600px; height: 600px; background: radial-gradient(circle, var(--emerald), transparent); bottom: -200px; left: 30%; animation-delay: -12s; }
@keyframes orbFloat {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -60px) scale(1.05); }
66% { transform: translate(-30px, 40px) scale(0.97); }
}
/* ─── GRID OVERLAY ─────────────────────────────────────────── */
.grid-overlay {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(26,22,18,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,22,18,0.035) 1px, transparent 1px);
background-size: 60px 60px;
}
/* ─── FIXED HEADER ─────────────────────────────────────────── */
header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 18px 48px;
background: rgba(255, 252, 246, 0.72);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(16, 185, 129, 0.16);
}
.logo { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: var(--cedar-ink); }
.logo-icon {
width: 32px; height: 32px; background: var(--emerald); border-radius: 8px;
display: flex; align-items: center; justify-content: center; font-size: 16px;
box-shadow: 0 2px 10px rgba(16,185,129,0.3);
}
.header-badge {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: var(--emerald-deep);
font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px;
}
/* ─── SIDEBAR NAV ───────────────────────────────────────────── */
.sidebar-nav { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(26,22,18,0.18); border: 1px solid rgba(26,22,18,0.08); cursor: pointer; transition: all 0.3s ease; }
.nav-dot.active { background: var(--emerald); box-shadow: 0 0 10px rgba(16,185,129,0.6); transform: scale(1.4); }
.nav-dot:hover { background: rgba(16,185,129,0.5); }
/* ─── SLIDE DECK ───────────────────────────────────────────── */
.deck { position: relative; height: 100vh; width: 100%; overflow: hidden; }
.slide {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: 104px 80px 84px;
opacity: 0; visibility: hidden;
transform: translateX(36px) scale(0.99);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.slide.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.section-number { position: absolute; top: 92px; left: 80px; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--emerald-deep); text-transform: uppercase; }
.section-title {
font-size: clamp(28px, 3.4vw, 46px);
font-weight: 800; letter-spacing: -1.5px; text-align: center;
background: linear-gradient(135deg, var(--cedar-ink) 55%, var(--emerald));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 12px; line-height: 1.14;
}
.section-subtitle {
font-size: clamp(14px, 1.5vw, 16.5px); color: var(--cedar-muted); text-align: center;
font-weight: 400; max-width: 760px; line-height: 1.6; margin-bottom: 40px;
}
.section-subtitle strong { color: var(--emerald-deep); font-weight: 600; }
/* ─── PER-SLIDE REVEAL ─────────────────────────────────────── */
.reveal { opacity: 0; }
.slide.active .reveal { animation: revealUp 0.55s ease both; }
.reveal.d1 { animation-delay: 0.10s; }
.reveal.d2 { animation-delay: 0.22s; }
.reveal.d3 { animation-delay: 0.34s; }
.reveal.d4 { animation-delay: 0.46s; }
.reveal.d5 { animation-delay: 0.58s; }
@keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* ─── SHARED: DEPTH-CARD GRID ──────────────────────────────── */
.depth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 1080px; }
.depth-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; }
.depth-card {
background: var(--cedar-raised); border: 1px solid var(--cedar-border);
border-radius: 14px; padding: 18px 18px 16px;
box-shadow: 0 2px 10px rgba(26,22,18,0.05);
transition: all 0.3s; position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 8px;
}
.depth-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at top left, rgba(16,185,129,0.06), transparent 70%);
opacity: 0; transition: opacity 0.3s;
}
.depth-card:hover::before { opacity: 1; }
.depth-card:hover { border-color: rgba(16,185,129,0.32); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(26,22,18,0.09); }
.dc-head { display: flex; align-items: center; gap: 10px; }
.dc-icon { font-size: 20px; line-height: 1; }
.dc-title { font-size: 15px; font-weight: 800; letter-spacing: -0.3px; color: var(--cedar-ink); }
.dc-line { font-size: 12.5px; color: var(--cedar-muted); line-height: 1.55; }
.dc-hard {
font-size: 11.5px; line-height: 1.5; color: var(--amber-deep);
border-left: 2px solid rgba(180,98,28,0.4); padding-left: 9px; margin-top: 2px;
}
.dc-hard b { font-weight: 700; }
/* ─── FOOTER CALLOUT BAND ──────────────────────────────────── */
.footer-callout {
margin-top: 22px; width: 100%; max-width: 1080px;
background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.04));
border: 1px solid rgba(16,185,129,0.22); border-radius: 12px;
padding: 14px 22px; font-size: 13px; color: #3a322b; line-height: 1.55; text-align: center;
}
.footer-callout strong { color: var(--emerald-deep); font-weight: 700; }
/* ══ SLIDE 01 — THESIS / THE GAP ══════════════════════════════ */
.thesis-layout { display: flex; align-items: stretch; justify-content: center; gap: 44px; width: 100%; max-width: 1060px; }
.gap-col { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; }
.gap-cap { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cedar-faint); margin-bottom: 12px; }
.gap-bar { width: 230px; border-radius: 16px; overflow: hidden; border: 1px solid var(--cedar-border); box-shadow: 0 6px 22px rgba(26,22,18,0.08); }
.gap-seg { display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; }
.gap-demo { background: var(--cedar-raised); height: 84px; border-bottom: 2px dashed rgba(16,185,129,0.5); }
.gap-prod { background: linear-gradient(160deg, rgba(16,185,129,0.16), rgba(10,122,82,0.10)); height: 286px; }
.gap-pct { font-size: 26px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.gap-demo .gap-pct { color: var(--cedar-muted); }
.gap-prod .gap-pct { color: var(--emerald-deep); }
.gap-label { font-size: 12px; font-weight: 600; margin-top: 5px; color: var(--cedar-ink); }
.gap-sub { font-size: 11px; color: var(--cedar-faint); margin-top: 3px; line-height: 1.45; }
.thesis-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.thesis-lead { font-size: 16px; color: #4a4036; line-height: 1.7; }
.thesis-lead b { color: var(--cedar-ink); font-weight: 700; }
.question-box {
background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(16,185,129,0.05));
border: 1px solid rgba(16,185,129,0.28); border-left: 4px solid var(--emerald);
border-radius: 12px; padding: 18px 22px;
}
.question-box .qb-cap { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--emerald-deep); margin-bottom: 7px; }
.question-box .qb-text { font-size: 15px; font-weight: 600; color: #2a241e; line-height: 1.55; }
.question-box .qb-text em { color: var(--emerald-deep); font-style: normal; }
/* ══ SLIDE 02 — QUALITY BAND (the >90% bar) ══════════════════ */
.quality-band {
display: flex; align-items: center; gap: 26px; width: 100%; max-width: 1080px;
background: var(--cedar-raised); border: 1px solid rgba(16,185,129,0.22);
border-radius: 16px; padding: 18px 26px; margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(26,22,18,0.05);
}
.qb-stat { flex: 0 0 auto; text-align: center; }
.qb-num { font-size: 46px; font-weight: 900; letter-spacing: -2px; line-height: 1; color: var(--emerald-deep); }
.qb-num small { font-size: 22px; font-weight: 800; }
.qb-numlabel { font-size: 11px; color: var(--cedar-faint); margin-top: 4px; letter-spacing: 0.3px; }
.qb-track-wrap { flex: 1; }
.qb-track { height: 16px; border-radius: 999px; background: var(--cedar-sunken); position: relative; overflow: hidden; border: 1px solid var(--cedar-border); }
.qb-fill-demo { position: absolute; left: 0; top: 0; bottom: 0; width: 70%; background: rgba(26,22,18,0.18); }
.qb-fill-prod { position: absolute; left: 0; top: 0; bottom: 0; width: 92%; background: linear-gradient(90deg, var(--emerald), var(--emerald-bright)); box-shadow: 0 0 14px rgba(16,185,129,0.4); }
.qb-marker { position: absolute; top: -4px; bottom: -4px; left: 92%; width: 2px; background: var(--emerald-deep); }
.qb-legend { display: flex; gap: 22px; margin-top: 10px; font-size: 11.5px; color: var(--cedar-muted); }
.qb-legend span { display: flex; align-items: center; gap: 7px; }
.qb-chip { width: 11px; height: 11px; border-radius: 3px; }
/* ══ SLIDE 03 — KNOWLEDGE GRAPH ══════════════════════════════ */
.kg-wrap { position: relative; width: 520px; height: 200px; margin-bottom: 6px; }
.kg-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kg-edge { stroke: rgba(16,185,129,0.3); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.kg-center {
position: absolute; left: 260px; top: 100px; transform: translate(-50%, -50%); z-index: 5;
width: 78px; height: 78px; border-radius: 50%;
background: radial-gradient(circle at 36% 34%, var(--emerald-bright), var(--emerald-deep));
box-shadow: 0 0 34px rgba(16,185,129,0.45), 0 0 64px rgba(16,185,129,0.16);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff;
}
.kg-center::before { content:''; position:absolute; inset:-9px; border-radius:50%; border:1px dashed rgba(16,185,129,0.45); animation: spin 11s linear infinite; }
.kg-center .kgc-emoji { font-size: 22px; }
.kg-center .kgc-label { font-size: 8.5px; font-weight: 800; letter-spacing: 1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.kg-node {
position: absolute; z-index: 6; transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
background: var(--cedar-raised); border: 1px solid var(--cedar-border);
box-shadow: 0 2px 8px rgba(26,22,18,0.06);
font-size: 11.5px; font-weight: 600; color: var(--cedar-ink); white-space: nowrap;
}
/* ══ SLIDE 05 — APP MOCK ═════════════════════════════════════ */
.app-layout { display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%; max-width: 1080px; }
.app-window {
flex: 0 0 480px; background: var(--cedar-raised);
border: 1px solid var(--cedar-border); border-radius: 14px; overflow: hidden;
box-shadow: 0 18px 44px rgba(26,22,18,0.12);
}
.app-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--cedar-sunken); border-bottom: 1px solid var(--cedar-border); }
.app-dot { width: 11px; height: 11px; border-radius: 50%; }
.app-bar-title { margin-left: 10px; font-size: 11.5px; color: var(--cedar-faint); font-weight: 600; }
.app-body { display: flex; min-height: 256px; }
.app-side { flex: 0 0 116px; border-right: 1px solid var(--cedar-border); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; background: rgba(244,239,230,0.5); }
.app-navitem { font-size: 11px; font-weight: 600; color: var(--cedar-muted); padding: 6px 9px; border-radius: 7px; }
.app-navitem.on { background: rgba(16,185,129,0.12); color: var(--emerald-deep); }
.app-main { flex: 1; padding: 16px; }
.app-deal { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.app-avatar { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#10b981,#0a7a52); color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.app-deal-name { font-size: 13px; font-weight: 700; color: var(--cedar-ink); }
.app-deal-sub { font-size: 10.5px; color: var(--cedar-faint); }
.app-draft { background: var(--cedar-base); border: 1px solid rgba(16,185,129,0.25); border-radius: 10px; padding: 12px; }
.app-draft-tag { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--emerald-deep); margin-bottom: 7px; }
.app-draft-row { font-size: 11px; color: var(--cedar-muted); margin-bottom: 3px; }
.app-draft-row b { color: var(--cedar-ink); font-weight: 600; }
.app-draft-body { font-size: 11px; color: #5a5046; line-height: 1.55; margin: 8px 0 11px; }
.app-actions { display: flex; gap: 8px; }
.app-btn { font-size: 11px; font-weight: 700; padding: 6px 14px; border-radius: 7px; }
.app-btn.primary { background: var(--emerald); color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.app-btn.ghost { background: var(--cedar-raised); border: 1px solid var(--cedar-border); color: var(--cedar-muted); }
.app-feats { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
/* ══ SLIDE 06 — TIME-VALUE ═══════════════════════════════════ */
.est-layout { display: flex; align-items: stretch; justify-content: center; gap: 36px; width: 100%; max-width: 1040px; }
.est-list { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.est-row {
display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 11px;
background: var(--cedar-raised); border: 1px solid var(--cedar-border); box-shadow: 0 1px 4px rgba(26,22,18,0.04);
}
.est-name { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--cedar-ink); }
.est-chip { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.est-chip.demo { background: var(--cedar-sunken); color: var(--cedar-muted); border: 1px solid var(--cedar-border); }
.est-chip.prod { background: rgba(16,185,129,0.1); color: var(--emerald-deep); border: 1px solid rgba(16,185,129,0.28); }
.est-arrow { color: var(--emerald); font-weight: 700; }
.est-side { flex: 0 0 300px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.est-total { text-align: center; background: var(--cedar-raised); border: 1px solid rgba(16,185,129,0.25); border-radius: 16px; padding: 24px; box-shadow: 0 6px 22px rgba(26,22,18,0.07); }
.est-total-num { font-size: 40px; font-weight: 900; letter-spacing: -1.5px; line-height: 1.05; background: linear-gradient(135deg, var(--cedar-ink), var(--emerald-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.est-total-label { font-size: 12.5px; color: var(--cedar-muted); margin-top: 8px; line-height: 1.5; }
.est-total-foot { font-size: 11px; color: var(--cedar-faint); margin-top: 8px; }
/* ─── DECK CONTROLS ────────────────────────────────────────── */
.deck-controls {
position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100;
display: flex; align-items: center; gap: 14px;
background: rgba(255, 252, 246, 0.82); backdrop-filter: blur(20px);
border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 999px; padding: 7px 10px;
box-shadow: 0 4px 20px rgba(26,22,18,0.08);
}
.ctrl-btn {
width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cedar-border);
background: var(--cedar-raised); color: var(--emerald-deep); font-size: 18px; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.ctrl-btn:hover:not(:disabled) { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.4); }
.ctrl-btn:disabled { opacity: 0.35; cursor: default; }
.ctrl-counter { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; color: var(--cedar-muted); letter-spacing: 1px; min-width: 56px; text-align: center; }
.ctrl-counter strong { color: var(--emerald-deep); font-weight: 600; }
.ctrl-hint { position: fixed; bottom: 26px; right: 32px; z-index: 100; font-size: 11px; color: var(--cedar-faint); letter-spacing: 0.5px; display: flex; align-items: center; gap: 6px; }
.ctrl-hint kbd { font-family: 'Geist Mono', monospace; font-size: 11px; background: var(--cedar-raised); border: 1px solid var(--cedar-border); border-radius: 5px; padding: 1px 6px; color: var(--cedar-muted); }
</style>
</head>
<body>
<!-- Background layers -->
<div class="bg-orbs">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<div class="grid-overlay"></div>
<!-- Fixed header -->
<header>
<div class="logo">
<div class="logo-icon">🌿</div>
Cedar
</div>
<div class="header-badge">Build vs. Buy</div>
</header>
<!-- Sidebar nav dots -->
<nav class="sidebar-nav" id="sidebarNav">
<div class="nav-dot active" data-index="0"></div>
<div class="nav-dot" data-index="1"></div>
<div class="nav-dot" data-index="2"></div>
<div class="nav-dot" data-index="3"></div>
<div class="nav-dot" data-index="4"></div>
<div class="nav-dot" data-index="5"></div>
</nav>
<div class="deck" id="deck">
<!-- ══════════════════════════════════════════════
01 — THE GAP
══════════════════════════════════════════════ -->
<section class="slide active" id="s1">
<span class="section-number">01 · The Thesis</span>
<h2 class="section-title reveal d1">The Demo Is a Weekend.<br/>The Pipeline Is the Product.</h2>
<p class="section-subtitle reveal d2">You can stand up "AI that drafts my email" in days. Everything that makes it <strong>trustworthy at scale</strong> is the other 95% — and it only creates value when the pieces interlock.</p>
<div class="thesis-layout">
<div class="gap-col reveal d2">
<div class="gap-cap">Engineering effort</div>
<div class="gap-bar">
<div class="gap-seg gap-demo">
<div class="gap-pct">~5%</div>
<div class="gap-label">Weekend demo</div>
<div class="gap-sub">One inbox · happy path · human watching</div>
</div>
<div class="gap-seg gap-prod">
<div class="gap-pct">~95%</div>
<div class="gap-label">Production pipeline</div>
<div class="gap-sub">Thousands of mailboxes · every edge case · nobody watching</div>
</div>
</div>
</div>
<div class="thesis-text">
<p class="thesis-lead reveal d3">Cedar isn't one feature — it's <b>four interlocking systems</b>: a drafting engine reps actually trust, the structured data substrate beneath it, the agent harness that acts on it, and the app it all lives in. Any one is a multi-quarter build. None is useful alone.</p>
<div class="question-box reveal d4">
<div class="qb-cap">The real question</div>
<div class="qb-text">Not "can we build this?" — clearly you can. It's: do we spend <em>12–18 engineer-months</em> reaching parity on undifferentiated infrastructure, when that time could ship the AI use cases that are <em>actually ours to win?</em></div>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════
02 — THE DRAFTING SYSTEM
══════════════════════════════════════════════ -->
<section class="slide" id="s2">
<span class="section-number">02 · Pillar I</span>
<h2 class="section-title reveal d1">Drafting Reps Actually Send</h2>
<p class="section-subtitle reveal d2">Generating an email is a weekend. Getting it <strong>sent without edits, every time</strong> — across every kind of message a rep writes — is the product.</p>
<div class="quality-band reveal d2">
<div class="qb-stat">
<div class="qb-num">>90<small>%</small></div>
<div class="qb-numlabel">acceptance, or reps stop trusting it</div>
</div>
<div class="qb-track-wrap">
<div class="qb-track">
<div class="qb-fill-prod"></div>
<div class="qb-fill-demo"></div>
<div class="qb-marker"></div>
</div>
<div class="qb-legend">
<span><span class="qb-chip" style="background:rgba(26,22,18,0.18);"></span>Where a demo lands (~70%)</span>
<span><span class="qb-chip" style="background:var(--emerald);"></span>Where it has to be (>90%)</span>
<span style="color:var(--amber-deep);">The last 20–30% is most of the work</span>
</div>
</div>
</div>
<div class="depth-grid reveal d3">
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">📥</span><span class="dc-title">Index every situation</span></div>
<div class="dc-line">Outreach, follow-up, objection, post-meeting, reactivation, intro, FYI — each needs a different move.</div>
<div class="dc-hard">A classifier over <b>11+ message types</b> — and a demo only ever shows one of them.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🧩</span><span class="dc-title">Combine with deal context</span></div>
<div class="dc-line">Pull the right history, the open thread, and structured deal fields into every draft.</div>
<div class="dc-hard">Generic without RAG over the deal's <b>full timeline</b>; wrong without the right retrieval.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🔁</span><span class="dc-title">Self-learning loops</span></div>
<div class="dc-line">Every edit, send, and reply becomes a signal that sharpens the next draft and the rep's voice.</div>
<div class="dc-hard">Without the loop, quality <b>plateaus</b> — and you can't prove it improved.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🎯</span><span class="dc-title">Clear the >90% bar</span></div>
<div class="dc-line">Below it, reps quietly stop using it. Above it, it becomes a habit.</div>
<div class="dc-hard">Needs an <b>eval harness</b> and taxonomy coverage — the unglamorous engine of trust.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🖥️</span><span class="dc-title">UI / UX of review</span></div>
<div class="dc-line">A fast approve / edit surface inline where the rep already works.</div>
<div class="dc-hard">A draft nobody can review in <b>five seconds</b> is a draft nobody sends.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">💬</span><span class="dc-title">Steer it from Slack</span></div>
<div class="dc-line">Adjust tone, add context, re-draft — in the channel reps live in, not a separate app.</div>
<div class="dc-hard">Conversational control means <b>state, threading, and auth</b> across another surface.</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════
03 — THE DATA SYSTEM
══════════════════════════════════════════════ -->
<section class="slide" id="s3">
<span class="section-number">03 · Pillar II</span>
<h2 class="section-title reveal d1">The Data Substrate</h2>
<p class="section-subtitle reveal d2">The drafting is only as good as the <strong>structured, searchable memory</strong> beneath it — a system that assembles itself out of a messy stream of events.</p>
<div class="kg-wrap reveal d2">
<svg class="kg-svg" viewBox="0 0 520 200" preserveAspectRatio="xMidYMid meet">
<line class="kg-edge" x1="260" y1="100" x2="78" y2="48"/>
<line class="kg-edge" x1="260" y1="100" x2="78" y2="152"/>
<line class="kg-edge" x1="260" y1="100" x2="442" y2="48"/>
<line class="kg-edge" x1="260" y1="100" x2="442" y2="152"/>
<line class="kg-edge" x1="78" y1="48" x2="78" y2="152" opacity="0.5"/>
<line class="kg-edge" x1="442" y1="48" x2="442" y2="152" opacity="0.5"/>
</svg>
<div class="kg-center"><span class="kgc-emoji">🤝</span><span class="kgc-label">DEAL</span></div>
<div class="kg-node" style="left:78px; top:48px;"><span>👤</span> Person</div>
<div class="kg-node" style="left:78px; top:152px;"><span>🏢</span> Company</div>
<div class="kg-node" style="left:442px; top:48px;"><span>✉️</span> Emails</div>
<div class="kg-node" style="left:442px; top:152px;"><span>🎙️</span> Meetings</div>
</div>
<div class="depth-grid reveal d3">
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🗂️</span><span class="dc-title">Event sorting pipeline</span></div>
<div class="dc-line">Every email, meeting, message, and CRM update routed to the right deal — automatically.</div>
<div class="dc-hard">Mis-routing here <b>poisons</b> everything downstream.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🔍</span><span class="dc-title">RAG & embeddings</span></div>
<div class="dc-line">Semantic search across a year of history, with citations back to the source event.</div>
<div class="dc-hard">Naïve chunking <b>fails open</b> — silently degraded recall you won't see in a demo.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🏷️</span><span class="dc-title">Structured taxonomy extraction</span></div>
<div class="dc-line">Clean fields — objections, budget, next steps — pulled from free-form transcripts.</div>
<div class="dc-hard">Useless without <b>confidence thresholds</b> and a consistent vocabulary.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🕸️</span><span class="dc-title">Self-building knowledge graph</span></div>
<div class="dc-line">People ↔ companies ↔ deals that assemble themselves from the incoming stream.</div>
<div class="dc-hard">Dedup, aliasing, and merges are an <b>ongoing</b> data-quality job, not a one-time load.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🧱</span><span class="dc-title">The data structure</span></div>
<div class="dc-line">Polymorphic events + a multi-tenant schema with org / user governance baked in.</div>
<div class="dc-hard">Retrofitting tenancy onto a prototype is the <b>most expensive refactor</b> there is.</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════
04 — THE AGENT HARNESS
══════════════════════════════════════════════ -->
<section class="slide" id="s4">
<span class="section-number">04 · Pillar III</span>
<h2 class="section-title reveal d1">The Agent Harness</h2>
<p class="section-subtitle reveal d2">An LLM with a few tools is a demo. A <strong>governed, observable, multi-tenant runtime</strong> that acts on real pipelines is infrastructure.</p>
<div class="depth-grid reveal d3" style="max-width:980px;">
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🪝</span><span class="dc-title">Webhooks</span></div>
<div class="dc-line">A public ingress so external systems can trigger agents — token-authed, encrypted secrets, queued.</div>
<div class="dc-hard">Public + async + acting on data means <b>auth, idempotency, and abuse</b> are day-one problems.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🛰️</span><span class="dc-title">Enrichment</span></div>
<div class="dc-line">Four providers (Apollo · Crustdata · Wiza · Exa) behind one interface with fallback.</div>
<div class="dc-hard">Each is a contract, rate limit, billing line, and a schema that <b>drifts</b> — forever.</div>
</div>
<div class="depth-card">
<div class="dc-head"><span class="dc-icon">🔎</span><span class="dc-title">Search</span></div>
<div class="dc-line">Vector + structured tools the agent composes to reason over the whole book of business.</div>
<div class="dc-hard">The agent is only as smart as the tools that <b>fetch the right data</b> at the right time.</div>
</div>
</div>
<div class="footer-callout reveal d4">
And the unglamorous half that makes it safe: <strong>~70 governed tools</strong>, OpenTelemetry on every LLM & tool call, <strong>replayable executions</strong> for debugging, and per-org permissioning on every action.
</div>
</section>
<!-- ══════════════════════════════════════════════
05 — THE APP
══════════════════════════════════════════════ -->
<section class="slide" id="s5">
<span class="section-number">05 · Pillar IV</span>
<h2 class="section-title reveal d1">The App</h2>
<p class="section-subtitle reveal d2">The surface reps live in all day — where every system above has to feel like <strong>one fast, coherent product</strong>.</p>
<div class="app-layout">
<!-- App mock -->
<div class="app-window reveal d2">
<div class="app-bar">
<span class="app-dot" style="background:#f4a8a8;"></span>
<span class="app-dot" style="background:#f4d6a8;"></span>
<span class="app-dot" style="background:#a8e6c9;"></span>
<span class="app-bar-title">Cedar — Acme Corp</span>
</div>
<div class="app-body">
<div class="app-side">
<div class="app-navitem on">📥 Inbox</div>
<div class="app-navitem">🤝 Deals</div>
<div class="app-navitem">📊 Pipeline</div>
<div class="app-navitem">📋 Playbook</div>
</div>
<div class="app-main">
<div class="app-deal">
<div class="app-avatar">AC</div>
<div>
<div class="app-deal-name">Acme Corp</div>
<div class="app-deal-sub">Negotiation · $48K · Peter Johann</div>
</div>
</div>
<div class="app-draft">
<div class="app-draft-tag">✦ Cedar drafted a follow-up</div>
<div class="app-draft-row"><b>To:</b> <email></div>
<div class="app-draft-row"><b>Re:</b> Data-layer docs + RevOps</div>
<div class="app-draft-body">"Hi Peter — sharing the transparency docs we discussed, plus a quick ROI breakdown. Happy to join a working session with RevOps next week…"</div>
<div class="app-actions">
<span class="app-btn primary">Approve & send</span>
<span class="app-btn ghost">Edit</span>
</div>
</div>
</div>
</div>
</div>
<!-- Feature rows -->
<div class="app-feats">
<div class="depth-card reveal d3">
<div class="dc-head"><span class="dc-icon">⚡</span><span class="dc-title">Fast, AI-native client</span></div>
<div class="dc-line">An email client that doesn't feel slow — the bar reps measure you against is Superhuman, not a CRM.</div>
</div>
<div class="depth-card reveal d4">
<div class="dc-head"><span class="dc-icon">🧵</span><span class="dc-title">Inline approve / edit</span></div>
<div class="dc-line">The review surface that decides whether any of the AI above actually gets used.</div>
</div>
<div class="depth-card reveal d5">
<div class="dc-head"><span class="dc-icon">🔌</span><span class="dc-title">Where reps already are</span></div>
<div class="dc-line">Slack & iMessage control, calendar, notifications — rendered from the same data substrate.</div>
</div>
</div>
</div>
<div class="footer-callout reveal d5">
Plus the permanent <strong>integration tax</strong>: OAuth lifecycle for Google & Microsoft, rendering hostile 30-year-old HTML email, and chasing breaking changes across <strong>~9 vendor APIs</strong> — work that never ends and earns zero credit.
</div>
</section>
<!-- ══════════════════════════════════════════════
06 — THE TIME-VALUE
══════════════════════════════════════════════ -->
<section class="slide" id="s6">
<span class="section-number">06 · The Bottom Line</span>
<h2 class="section-title reveal d1">Parity Is the Starting Line</h2>
<p class="section-subtitle reveal d2">Rough, defensible estimate for a strong team building from zero. The demo column is real — and it's a trap.</p>
<div class="est-layout">
<div class="est-list reveal d3">
<div class="est-row">
<span class="est-name">Drafting engine</span>
<span class="est-chip demo">demo: ~3 wks</span><span class="est-arrow">→</span><span class="est-chip prod">prod: 3–4 mo</span>
</div>
<div class="est-row">
<span class="est-name">Data substrate</span>
<span class="est-chip demo">demo: ~2 wks</span><span class="est-arrow">→</span><span class="est-chip prod">prod: 3–5 mo</span>
</div>
<div class="est-row">
<span class="est-name">Agent harness + enrichment</span>
<span class="est-chip demo">demo: ~3 wks</span><span class="est-arrow">→</span><span class="est-chip prod">prod: 3–4 mo</span>
</div>
<div class="est-row">
<span class="est-name">App + integration tax</span>
<span class="est-chip demo">demo: hidden</span><span class="est-arrow">→</span><span class="est-chip prod">prod: 3–5 mo</span>
</div>
<div class="est-row">
<span class="est-name">Observability & evals</span>
<span class="est-chip demo">demo: "later"</span><span class="est-arrow">→</span><span class="est-chip prod">prod: 1.5–2 mo</span>
</div>
</div>
<div class="est-side">
<div class="est-total reveal d4">
<div class="est-total-num">12–18<br/>eng-months</div>
<div class="est-total-label">to reach parity — <b>then</b> a standing team to maintain it as Cedar keeps moving.</div>
<div class="est-total-foot">Every month here is a month not spent on your differentiated AI.</div>
</div>
<div class="question-box reveal d5">
<div class="qb-cap">The move</div>
<div class="qb-text"><em>Buy the pipeline. Build on top of it.</em> Webhooks, playbooks, and the tool surface exist so your engineers add the logic that's <em>yours</em> — without rebuilding the undifferentiated foundation first.</div>
</div>
</div>
</div>
</section>
</div>
<!-- Deck controls -->
<div class="deck-controls">
<button class="ctrl-btn" id="prevBtn" aria-label="Previous step">‹</button>
<span class="ctrl-counter"><strong id="stepNum">01</strong> / <span id="totalNum">06</span></span>
<button class="ctrl-btn" id="nextBtn" aria-label="Next step">›</button>
</div>
<div class="ctrl-hint"><kbd>←</kbd><kbd>→</kbd> to navigate</div>
<!-- ─── JS: keyboard / click step navigation ──────────────── -->
<script>
const slides = Array.from(document.querySelectorAll('.slide'));
const dots = Array.from(document.querySelectorAll('.nav-dot'));
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const stepNum = document.getElementById('stepNum');
document.getElementById('totalNum').textContent = String(slides.length).padStart(2, '0');
let current = 0;
function render() {
slides.forEach((s, i) => s.classList.toggle('active', i === current));
dots.forEach((d, i) => d.classList.toggle('active', i === current));
stepNum.textContent = String(current + 1).padStart(2, '0');
prevBtn.disabled = current === 0;
nextBtn.disabled = current === slides.length - 1;
}
function go(index) {
const next = Math.max(0, Math.min(slides.length - 1, index));
if (next === current) return;
current = next;
render();
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { e.preventDefault(); go(current + 1); }
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(current - 1); }
else if (e.key === 'Home') { e.preventDefault(); go(0); }
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
});
prevBtn.addEventListener('click', () => go(current - 1));
nextBtn.addEventListener('click', () => go(current + 1));
dots.forEach((d) => d.addEventListener('click', () => go(Number(d.dataset.index))));
render();
</script>
</body>
</html>