1019 lines
60 KiB
HTML
1019 lines
60 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="FocusFlow — a live academic operating system for neurodivergent students. Business plan.">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Ctext%20y='.9em'%20font-size='90'%3E%F0%9F%94%92%3C/text%3E%3C/svg%3E">
|
||
<title>FocusFlow — Business Plan</title>
|
||
<style>
|
||
:root {
|
||
--bg: #F6F7FB;
|
||
--surface: #FFFFFF;
|
||
--surface-2: #EEF0F8;
|
||
--ink: #14161D;
|
||
--muted: #565C6C;
|
||
--faint: #858B9C;
|
||
--line: #E2E4EE;
|
||
--line-strong: #CDD1E0;
|
||
--brand: #4B3FD1;
|
||
--brand-soft: #ECEAFB;
|
||
--brand-strong: #372BB0;
|
||
--accent: #E8920C;
|
||
--accent-soft: #FCEFD5;
|
||
--good: #1C9464;
|
||
--good-soft: #DDF1E8;
|
||
--warn: #C77A11;
|
||
--warn-soft: #FBEBCF;
|
||
--slate: #6A7080;
|
||
--slate-soft: #E7E9F0;
|
||
--shadow: 0 1px 2px rgba(20,22,29,.04), 0 8px 28px rgba(20,22,29,.06);
|
||
--shadow-lg: 0 2px 6px rgba(20,22,29,.06), 0 24px 60px rgba(30,25,90,.12);
|
||
--radius: 16px;
|
||
--maxw: 1120px;
|
||
--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||
--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #0B0D14;
|
||
--surface: #13161F;
|
||
--surface-2: #1A1E29;
|
||
--ink: #EEF0F7;
|
||
--muted: #9BA1B4;
|
||
--faint: #6E7488;
|
||
--line: #242938;
|
||
--line-strong: #333A4C;
|
||
--brand: #8F84F6;
|
||
--brand-soft: #1E2138;
|
||
--brand-strong: #ABA2F9;
|
||
--accent: #F4B24C;
|
||
--accent-soft: #2C2415;
|
||
--good: #37C08A;
|
||
--good-soft: #14261F;
|
||
--warn: #E0A63E;
|
||
--warn-soft: #2A2211;
|
||
--slate: #9198AC;
|
||
--slate-soft: #20242F;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
|
||
--shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);
|
||
}
|
||
}
|
||
:root[data-theme="light"] {
|
||
--bg: #F6F7FB; --surface: #FFFFFF; --surface-2: #EEF0F8; --ink: #14161D;
|
||
--muted: #565C6C; --faint: #858B9C; --line: #E2E4EE; --line-strong: #CDD1E0;
|
||
--brand: #4B3FD1; --brand-soft: #ECEAFB; --brand-strong: #372BB0;
|
||
--accent: #E8920C; --accent-soft: #FCEFD5; --good: #1C9464; --good-soft: #DDF1E8;
|
||
--warn: #C77A11; --warn-soft: #FBEBCF; --slate: #6A7080; --slate-soft: #E7E9F0;
|
||
--shadow: 0 1px 2px rgba(20,22,29,.04), 0 8px 28px rgba(20,22,29,.06);
|
||
--shadow-lg: 0 2px 6px rgba(20,22,29,.06), 0 24px 60px rgba(30,25,90,.12);
|
||
}
|
||
:root[data-theme="dark"] {
|
||
--bg: #0B0D14; --surface: #13161F; --surface-2: #1A1E29; --ink: #EEF0F7;
|
||
--muted: #9BA1B4; --faint: #6E7488; --line: #242938; --line-strong: #333A4C;
|
||
--brand: #8F84F6; --brand-soft: #1E2138; --brand-strong: #ABA2F9;
|
||
--accent: #F4B24C; --accent-soft: #2C2415; --good: #37C08A; --good-soft: #14261F;
|
||
--warn: #E0A63E; --warn-soft: #2A2211; --slate: #9198AC; --slate-soft: #20242F;
|
||
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
|
||
--shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 30px 70px rgba(0,0,0,.5);
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0; background: var(--bg); color: var(--ink);
|
||
font-family: var(--sans); font-size: 17px; line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
|
||
overflow-x: hidden;
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
||
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
|
||
section { padding: 76px 0; border-top: 1px solid var(--line); scroll-margin-top: 68px; }
|
||
section:first-of-type { border-top: none; }
|
||
|
||
/* ---------- sticky nav + reading progress ---------- */
|
||
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
|
||
background: linear-gradient(90deg, var(--brand), var(--accent)); }
|
||
.topnav { position: sticky; top: 0; z-index: 50;
|
||
background: color-mix(in srgb, var(--bg) 80%, transparent);
|
||
backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px);
|
||
border-bottom: 1px solid var(--line); }
|
||
.topnav .in { max-width: var(--maxw); margin: 0 auto; padding: 11px 24px; display: flex; align-items: center; gap: 16px; }
|
||
.topnav .nb { display: flex; align-items: center; gap: 9px; font-weight: 720; font-size: 15px; letter-spacing: -0.01em; }
|
||
.topnav .nb .m { width: 22px; height: 22px; border-radius: 6px; flex: none;
|
||
background: linear-gradient(150deg, var(--brand), var(--brand-strong)); color: #fff;
|
||
display: grid; place-items: center; font-size: 12px; font-weight: 800; }
|
||
.topnav nav { margin-left: auto; display: flex; gap: 2px; }
|
||
.topnav nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--muted);
|
||
text-decoration: none; padding: 6px 10px; border-radius: 7px; white-space: nowrap; transition: background .15s, color .15s; }
|
||
.topnav nav a:hover { color: var(--ink); background: var(--surface-2); }
|
||
.topnav .cta { font-family: var(--sans); font-size: 13px; font-weight: 620; color: #fff;
|
||
background: var(--brand); padding: 7px 13px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
|
||
.topnav .cta:hover { background: var(--brand-strong); }
|
||
@media (max-width: 860px) { .topnav nav { display: none; } .topnav .nb { margin-right: auto; } }
|
||
|
||
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
|
||
h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 720; }
|
||
h3 { font-size: 20px; font-weight: 680; letter-spacing: -0.01em; }
|
||
p { margin: 0; }
|
||
a { color: var(--brand-strong); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 3px; }
|
||
|
||
.eyebrow {
|
||
font-family: var(--mono); font-size: 12px; font-weight: 600;
|
||
letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand);
|
||
}
|
||
.lede { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 62ch; }
|
||
.kicker { color: var(--faint); font-size: 15px; }
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero {
|
||
position: relative; overflow: hidden;
|
||
padding: 84px 0 70px; border-top: none;
|
||
}
|
||
.hero::before {
|
||
content: ""; position: absolute; inset: -40% 30% auto -10%; height: 620px;
|
||
background: radial-gradient(52% 60% at 30% 30%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%);
|
||
filter: blur(10px); pointer-events: none; z-index: 0;
|
||
}
|
||
.hero::after {
|
||
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||
background-size: 46px 46px;
|
||
-webkit-mask-image: radial-gradient(70% 60% at 72% 20%, #000, transparent 75%);
|
||
mask-image: radial-gradient(70% 60% at 72% 20%, #000, transparent 75%);
|
||
opacity: .5;
|
||
}
|
||
.hero .wrap { position: relative; z-index: 1; }
|
||
.brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
|
||
.mark {
|
||
width: 34px; height: 34px; border-radius: 9px; flex: none;
|
||
background: linear-gradient(150deg, var(--brand), var(--brand-strong));
|
||
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px;
|
||
box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
|
||
}
|
||
.brandname { font-weight: 720; letter-spacing: -0.01em; font-size: 18px; }
|
||
.brandname span { color: var(--faint); font-weight: 500; }
|
||
.hero h1 {
|
||
font-size: clamp(44px, 8.5vw, 88px); font-weight: 760; letter-spacing: -0.045em;
|
||
margin: 8px 0 0;
|
||
}
|
||
.hero h1 .accentword {
|
||
background: linear-gradient(100deg, var(--brand), var(--accent) 130%);
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
}
|
||
.hero .thesis { margin-top: 26px; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.45; max-width: 42ch; color: var(--ink); font-weight: 450; }
|
||
.hero .thesis b { font-weight: 680; }
|
||
.herometa { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; align-items: center; }
|
||
.badge {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
|
||
padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
|
||
background: var(--surface); color: var(--muted);
|
||
}
|
||
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
|
||
.badge.live { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--line-strong)); }
|
||
|
||
/* fade-up */
|
||
.fu { opacity: 0; transform: translateY(14px); animation: fu .7s cubic-bezier(.2,.7,.2,1) forwards; }
|
||
.fu.d1{animation-delay:.05s}.fu.d2{animation-delay:.13s}.fu.d3{animation-delay:.22s}.fu.d4{animation-delay:.32s}.fu.d5{animation-delay:.42s}
|
||
@keyframes fu { to { opacity: 1; transform: none; } }
|
||
@media (prefers-reduced-motion: reduce) { .fu { animation: none; opacity: 1; transform: none; } }
|
||
|
||
/* ---------- metric strip ---------- */
|
||
.metrics {
|
||
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
|
||
margin-top: 48px; border: 1px solid var(--line); border-radius: var(--radius);
|
||
background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
|
||
}
|
||
.metric { padding: 22px 20px; border-left: 1px solid var(--line); }
|
||
.metric:first-child { border-left: none; }
|
||
.metric .n { font-size: 30px; font-weight: 740; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
|
||
.metric .n .u { color: var(--accent); }
|
||
.metric .l { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 5px; line-height: 1.35; }
|
||
|
||
/* ---------- generic grid ---------- */
|
||
.grid { display: grid; gap: 18px; }
|
||
.g2 { grid-template-columns: repeat(2, 1fr); }
|
||
.g3 { grid-template-columns: repeat(3, 1fr); }
|
||
.card {
|
||
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
|
||
padding: 24px; box-shadow: var(--shadow);
|
||
}
|
||
.card h3 { margin-bottom: 8px; }
|
||
.card p { color: var(--muted); font-size: 15.5px; }
|
||
.card .ic { font-size: 22px; margin-bottom: 12px; display: block; }
|
||
.tag {
|
||
display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
|
||
letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
|
||
background: var(--brand-soft); color: var(--brand-strong); margin-right: 6px; margin-top: 10px;
|
||
}
|
||
.sechead { max-width: 60ch; margin-bottom: 40px; }
|
||
.sechead h2 { margin: 12px 0 14px; }
|
||
|
||
/* problem stat row */
|
||
.statband { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 8px; }
|
||
.statband .card { padding: 26px 24px; }
|
||
.statband .big { font-size: 42px; font-weight: 760; letter-spacing: -0.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
|
||
.statband .cap { color: var(--muted); font-size: 15px; margin-top: 6px; }
|
||
|
||
/* why-list */
|
||
.why { display: grid; gap: 14px; }
|
||
.whyrow {
|
||
display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start;
|
||
padding: 22px 24px; background: var(--surface); border: 1px solid var(--line);
|
||
border-radius: var(--radius); box-shadow: var(--shadow);
|
||
}
|
||
.whyrow .num { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--accent);
|
||
border: 1.5px solid var(--accent); border-radius: 9px; width: 40px; height: 40px; display: grid; place-items: center; }
|
||
.whyrow h3 { margin-bottom: 5px; }
|
||
.whyrow p { color: var(--muted); font-size: 15.5px; }
|
||
|
||
/* status dashboard table */
|
||
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
|
||
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
|
||
thead th {
|
||
text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
|
||
text-transform: uppercase; color: var(--faint); font-weight: 600;
|
||
padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2);
|
||
}
|
||
tbody td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
td.feat { font-weight: 600; white-space: nowrap; }
|
||
td.note { color: var(--muted); font-size: 14px; }
|
||
.pill {
|
||
display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
|
||
font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
|
||
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
|
||
}
|
||
.pill .d { width: 7px; height: 7px; border-radius: 50%; }
|
||
.pill.live { background: var(--good-soft); color: var(--good); }
|
||
.pill.live .d { background: var(--good); }
|
||
.pill.test { background: var(--accent-soft); color: var(--warn); }
|
||
.pill.test .d { background: var(--warn); }
|
||
.pill.dark { background: var(--slate-soft); color: var(--slate); }
|
||
.pill.dark .d { background: var(--slate); }
|
||
|
||
/* revenue */
|
||
.rev { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
|
||
.rev .card { display: flex; flex-direction: column; }
|
||
.rev .price { font-size: 30px; font-weight: 740; letter-spacing: -0.02em; margin: 4px 0 2px; }
|
||
.rev .price small { font-size: 15px; color: var(--faint); font-weight: 500; }
|
||
.rev .stat { margin-top: auto; padding-top: 16px; }
|
||
.revpill { display:inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing:.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; }
|
||
.revpill.now { background: var(--good-soft); color: var(--good); }
|
||
.revpill.built { background: var(--accent-soft); color: var(--warn); }
|
||
.revpill.next { background: var(--slate-soft); color: var(--slate); }
|
||
|
||
/* callout */
|
||
.callout {
|
||
border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
|
||
background: linear-gradient(180deg, var(--brand-soft), transparent);
|
||
border-radius: var(--radius); padding: 30px 28px;
|
||
}
|
||
.callout h3 { color: var(--brand-strong); }
|
||
.callout p { color: var(--muted); margin-top: 8px; max-width: 68ch; }
|
||
|
||
/* ask / next moves */
|
||
.moves { display: grid; gap: 14px; margin-top: 8px; }
|
||
.move { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
|
||
padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
|
||
.move .rk { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
|
||
.move.p1 .rk { background: var(--brand); color: #fff; }
|
||
.move.p2 .rk { background: var(--accent-soft); color: var(--warn); }
|
||
.move.p3 .rk { background: var(--slate-soft); color: var(--slate); }
|
||
.move h3 { font-size: 17px; margin-bottom: 3px; }
|
||
.move p { color: var(--muted); font-size: 14.5px; }
|
||
.move .eff { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: right; white-space: nowrap; }
|
||
|
||
/* gaps */
|
||
.gaps { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
|
||
.gap { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 18px 20px;
|
||
border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 12px; background: var(--surface); }
|
||
.gap .g { color: var(--warn); font-weight: 700; }
|
||
.gap b { font-weight: 650; }
|
||
.gap p { color: var(--muted); font-size: 14.5px; margin-top: 3px; }
|
||
|
||
footer { border-top: 1px solid var(--line); padding: 44px 0 60px; color: var(--faint); font-size: 14px; }
|
||
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
|
||
.foot-mono { font-family: var(--mono); font-size: 12.5px; }
|
||
|
||
.stackline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
|
||
.chip { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--surface-2);
|
||
border: 1px solid var(--line); padding: 5px 10px; border-radius: 7px; }
|
||
|
||
@media (max-width: 860px) {
|
||
.metrics { grid-template-columns: repeat(2, 1fr); }
|
||
.metric:nth-child(odd) { border-left: none; }
|
||
.metric { border-top: 1px solid var(--line); }
|
||
.metric:nth-child(1), .metric:nth-child(2) { border-top: none; }
|
||
.g2, .g3, .rev, .statband, .gaps { grid-template-columns: 1fr; }
|
||
.move { grid-template-columns: auto 1fr; }
|
||
.move .eff { grid-column: 2; text-align: left; }
|
||
}
|
||
@media (max-width: 520px) {
|
||
.metrics { grid-template-columns: 1fr; }
|
||
.metric { border-left: none; border-top: 1px solid var(--line); }
|
||
.metric:first-child { border-top: none; }
|
||
}
|
||
|
||
/* ---------- executive summary ---------- */
|
||
.exec { border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
|
||
border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
|
||
.exec .top { padding: 30px 30px 26px; background: linear-gradient(180deg, var(--brand-soft), transparent); }
|
||
.exec .top p { font-size: 17px; color: var(--ink); max-width: 74ch; }
|
||
.exec .top p + p { margin-top: 12px; color: var(--muted); }
|
||
.exec .rows { display: grid; grid-template-columns: repeat(2, 1fr); }
|
||
.exec .kv { display: grid; grid-template-columns: 128px 1fr; gap: 16px; padding: 16px 30px;
|
||
border-top: 1px solid var(--line); align-items: baseline; }
|
||
.exec .kv:nth-child(odd) { border-right: 1px solid var(--line); }
|
||
.exec .kv .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
|
||
.exec .kv .v { font-size: 15px; color: var(--ink); }
|
||
.exec .kv .v b { font-weight: 650; }
|
||
|
||
/* ---------- competitive matrix ---------- */
|
||
table td.c, table th.c { text-align: center; white-space: nowrap; }
|
||
th.me, td.me { background: var(--brand-soft); }
|
||
th.me { color: var(--brand-strong) !important; }
|
||
.mk { font-weight: 800; font-size: 15px; font-family: var(--mono); }
|
||
.mk.y { color: var(--good); }
|
||
.mk.p { color: var(--warn); }
|
||
.mk.n { color: var(--faint); font-weight: 500; }
|
||
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
|
||
.legend span b { font-family: var(--mono); }
|
||
|
||
/* ---------- go-to-market funnel ---------- */
|
||
.funnel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
|
||
.fstage { border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px;
|
||
background: var(--surface); padding: 14px 18px; box-shadow: var(--shadow); }
|
||
.fstage .s { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
|
||
.fstage h3 { font-size: 16px; margin: 3px 0 2px; }
|
||
.fstage p { color: var(--muted); font-size: 14.5px; }
|
||
.fstage:nth-child(1) { width: 100%; }
|
||
.fstage:nth-child(2) { width: 92%; }
|
||
.fstage:nth-child(3) { width: 84%; }
|
||
.fstage:nth-child(4) { width: 76%; }
|
||
@media (max-width: 700px) { .fstage { width: 100% !important; } }
|
||
|
||
/* ---------- milestone timeline ---------- */
|
||
.timeline { display: grid; gap: 0; }
|
||
.tl { display: grid; grid-template-columns: 120px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
|
||
.tl:first-child { border-top: none; }
|
||
.tl .when { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--brand); letter-spacing: .02em; padding-top: 2px; }
|
||
.tl .what h3 { font-size: 16px; margin-bottom: 3px; }
|
||
.tl .what p { color: var(--muted); font-size: 14.5px; }
|
||
.tl .now { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
|
||
text-transform: uppercase; color: var(--good); background: var(--good-soft); padding: 2px 7px; border-radius: 5px; margin-left: 8px; vertical-align: middle; }
|
||
@media (max-width: 640px) { .tl { grid-template-columns: 1fr; gap: 4px; } }
|
||
|
||
/* ---------- print / PDF ---------- */
|
||
@media print {
|
||
.exec .rows { grid-template-columns: 1fr; }
|
||
.exec .kv:nth-child(odd) { border-right: none; }
|
||
:root, :root[data-theme="dark"] {
|
||
--bg: #fff; --surface: #fff; --surface-2: #f4f5fa; --ink: #14161d;
|
||
--muted: #3d4250; --faint: #6a7080; --line: #dfe2ec; --line-strong: #c9cddb;
|
||
--brand: #3a2fb0; --brand-soft: #eeecfb; --brand-strong: #2c2288;
|
||
--accent: #a9690a; --accent-soft: #f8eed6; --good: #157a53; --good-soft: #e0f1e9;
|
||
--warn: #9a5f0d; --warn-soft: #f7ebd3; --slate: #565c6c; --slate-soft: #eaecf2;
|
||
--shadow: none; --shadow-lg: none;
|
||
}
|
||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
|
||
.progress, .topnav { display: none !important; }
|
||
.hero::before, .hero::after { display: none !important; }
|
||
.fu { animation: none !important; opacity: 1 !important; transform: none !important; }
|
||
body { font-size: 11.5pt; background: #fff; }
|
||
section { padding: 20px 0; }
|
||
.hero { padding: 8px 0 16px; }
|
||
.hero h1 { font-size: 40pt; }
|
||
.card, .whyrow, .move, .gap, .callout, .rev .card, .statband .card, .metric, tr, thead {
|
||
break-inside: avoid; page-break-inside: avoid;
|
||
}
|
||
h2, h3 { page-break-after: avoid; }
|
||
.metrics, .tablewrap, .card { box-shadow: none; }
|
||
@page { margin: 13mm; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div class="progress" id="progress" aria-hidden="true"></div>
|
||
<div class="topnav">
|
||
<div class="in">
|
||
<span class="nb"><span class="m">F</span>FocusFlow</span>
|
||
<nav aria-label="Sections">
|
||
<a href="#summary">Summary</a>
|
||
<a href="#product">Product</a>
|
||
<a href="#market">Market</a>
|
||
<a href="#competition">Competition</a>
|
||
<a href="#model">Financials</a>
|
||
<a href="#status">Traction</a>
|
||
<a href="#ask">The ask</a>
|
||
</nav>
|
||
<a class="cta" href="https://focusflow-lock-in.ca" target="_blank" rel="noopener">Visit the app ↗</a>
|
||
</div>
|
||
</div>
|
||
|
||
<header class="hero">
|
||
<div class="wrap">
|
||
<div class="brandrow fu d1">
|
||
<div class="mark">F</div>
|
||
<div class="brandname">FocusFlow <span>· focusflow-lock-in.ca</span></div>
|
||
</div>
|
||
<div class="eyebrow fu d1">Business Plan · Confidential · August 2026</div>
|
||
<h1 class="fu d2">Study tools assume<br>focus. Ours <span class="accentword">builds it.</span></h1>
|
||
<p class="thesis fu d3">FocusFlow is an <b>academic operating system for neurodivergent students</b> — an AI study coach, an executive-function toolkit, and a safe tutor marketplace, in one app. It's not a prototype. It's <b>live in production</b> today.</p>
|
||
<div class="herometa fu d4">
|
||
<span class="badge live"><span class="dot"></span>Live in production</span>
|
||
<span class="badge">4 user roles</span>
|
||
<span class="badge">Freemium · revenue built-in</span>
|
||
<span class="badge">Solo-built in ~2.5 months</span>
|
||
</div>
|
||
|
||
<div class="metrics fu d5">
|
||
<div class="metric"><div class="n">49</div><div class="l">Data models<br>in production</div></div>
|
||
<div class="metric"><div class="n">51</div><div class="l">Product<br>screens</div></div>
|
||
<div class="metric"><div class="n">600<span class="u">+</span></div><div class="l">Automated tests<br>CI on real DB</div></div>
|
||
<div class="metric"><div class="n">~27<span class="u">k</span></div><div class="l">Lines of<br>app code</div></div>
|
||
<div class="metric"><div class="n">3</div><div class="l">Sided market<br>student·parent·tutor</div></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- EXECUTIVE SUMMARY -->
|
||
<section id="summary">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">01 · Executive summary</div>
|
||
<h2>The one-page version.</h2>
|
||
</div>
|
||
<div class="exec">
|
||
<div class="top">
|
||
<p><b>FocusFlow is an academic operating system for neurodivergent students</b> — the roughly 1 in 5 learners whom mainstream study tools, built for the already-organized, quietly leave behind. It combines an AI study coach that teaches instead of cheating, a full executive-function toolkit, grades and wellbeing tracking, and a safe, verified tutor marketplace in a single app.</p>
|
||
<p>It is not a concept or a prototype. It is <b>live in production</b> today at focusflow-lock-in.ca — 49 data models, 51 screens, and 600+ automated tests, built solo to production grade in about ten weeks. The revenue engine (a $5/mo tutor subscription and a premium-tier seam) is already coded and proven end-to-end against live Stripe. The expensive, risky part — building it — is done.</p>
|
||
</div>
|
||
<div class="rows">
|
||
<div class="kv"><div class="k">What</div><div class="v">All-in-one AI coach + executive-function toolkit + safe tutor marketplace for neurodivergent students.</div></div>
|
||
<div class="kv"><div class="k">Who</div><div class="v">Neurodivergent students (middle-school → college) and their parents; then schools & learning-support programs.</div></div>
|
||
<div class="kv"><div class="k">Market</div><div class="v"><b>$100B+</b> global tutoring/supplemental-ed TAM; a <b>~$1.3B</b> North-American neurodivergent-family SAM <em>(illustrative)</em>.</div></div>
|
||
<div class="kv"><div class="k">Model</div><div class="v">Free core to grow the base; earn on a $5/mo tutor subscription, a premium family tier, and B2B school licensing.</div></div>
|
||
<div class="kv"><div class="k">Edge</div><div class="v">Neuro-first by architecture, a teach-don't-cheat AI, near-zero cost to run, and it owns the whole student — so it's sticky.</div></div>
|
||
<div class="kv"><div class="k">The ask</div><div class="v">Green-light a small student pilot this term, then flip the marketplace live. Low cost; produces the evidence to scale.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PROBLEM -->
|
||
<section id="problem">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">02 · The opportunity</div>
|
||
<h2>Mainstream study tools are built for students who are already organized.</h2>
|
||
<p class="lede">Notion, Quizlet and generic tutoring all assume the hard part is content. For a neurodivergent student, the hard part is <b>starting, staying on track, and self-regulating under pressure</b> — the executive-function layer no other tool owns.</p>
|
||
</div>
|
||
<div class="statband">
|
||
<div class="card">
|
||
<div class="big">~1 in 5</div>
|
||
<div class="cap">learners is neurodivergent — ADHD, autism, dyslexia, dysgraphia, executive-function and anxiety profiles. A large, underserved, growing market.</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="big">Fragmented</div>
|
||
<div class="cap">Today they duct-tape a planner, a flashcard app, a tutor, a calendar and a wellbeing app. Nothing talks to anything. Every seam is a place to fall off.</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="big">Bolt-on</div>
|
||
<div class="cap">"Accessibility" in existing tools is a settings afterthought. FocusFlow is built accessibility-first, with coaching that adapts to <em>how</em> a brain works.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHAT IT IS -->
|
||
<section id="product">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">03 · The product</div>
|
||
<h2>Nine things in one app — and they share a brain.</h2>
|
||
<p class="lede">Every module writes to the same student model, so the coach knows what's due, what's stressful, and what a student is weak on — and gets proactive before a test. This is the full surface, all shipped.</p>
|
||
</div>
|
||
<div class="grid g3">
|
||
<div class="card">
|
||
<span class="ic">🧭</span>
|
||
<h3>AI study coach</h3>
|
||
<p>A Socratic tutor that adapts to the student's mode (ADHD, autism, exec-function, exam-prep) and <b>refuses to hand over answers</b> — it teaches, it doesn't cheat. Safe for parents and schools.</p>
|
||
<span class="tag">3-provider engine</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🎯</span>
|
||
<h3>Executive-function toolkit</h3>
|
||
<p>Command Centre "mission control," AI task-breakdown into tiny steps, one-tap quick-capture brain dump, Pomodoro focus mode, a Calm/overwhelm flow, and a pre-exam "lockdown" mode.</p>
|
||
<span class="tag">Command Centre</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">📚</span>
|
||
<h3>Complete study system</h3>
|
||
<p>Flashcard decks with spaced repetition, auto-generated quizzes & practice exams, printable guides, an <b>Explain-it-back</b> (Feynman) mode, and an OCR homework scanner.</p>
|
||
<span class="tag">SRS + Feynman</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">📊</span>
|
||
<h3>Grades & GPA</h3>
|
||
<p>School → term → course → weighted categories, live GPA on an editable scale, and a "what do I need on the final?" calculator that solves the target for you.</p>
|
||
<span class="tag">Live GPA</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">♿</span>
|
||
<h3>Accessibility engine</h3>
|
||
<p>Dyslexia-friendly typeface, text scaling, read-aloud TTS, voice dictation, reduced-motion, high-contrast and simplified layouts — applied app-wide from an onboarding neuro-profile.</p>
|
||
<span class="tag">First-class, not bolt-on</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🤝</span>
|
||
<h3>Tutor marketplace</h3>
|
||
<p>Two-sided marketplace with ID-verified tutors, transparent ranking, a full booking lifecycle, reviews, referrals, and moderation — <b>parent-mediated & safety-gated for under-18s</b>.</p>
|
||
<span class="tag">Payments built-in</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">💛</span>
|
||
<h3>Life tracker</h3>
|
||
<p>Because school isn't the whole student: mood check-ins, a wellness log, to-dos, and a private budget (income & expenses). Feeds the coach — heavy stress dials back the workload.</p>
|
||
<span class="tag">Whole-student</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🔗</span>
|
||
<h3>"Sign in with FocusFlow"</h3>
|
||
<p>A Connect SDK any external study app can drop in. It streams a student's weak topics back in, so the coach nudges practice on exactly what they're struggling with — before the test.</p>
|
||
<span class="tag">Platform play</span>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🔔</span>
|
||
<h3>Proactive outreach</h3>
|
||
<p>Installable PWA with web push and email. Adaptive nudges fire at each student's <b>personal best focus hour</b>, and swap to urgent copy inside a pre-exam lockdown window.</p>
|
||
<span class="tag">Meets them where they are</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MARKET -->
|
||
<section id="market">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">04 · Market analysis</div>
|
||
<h2>A large, underserved market — with tailwinds.</h2>
|
||
<p class="lede">Private tutoring and supplemental learning is already a very large global market, and three trends are pushing directly toward what FocusFlow does.</p>
|
||
</div>
|
||
|
||
<div class="statband">
|
||
<div class="card">
|
||
<div class="tag" style="margin-top:0;">TAM</div>
|
||
<div class="big" style="margin-top:8px;">$100B+</div>
|
||
<div class="cap">Global private tutoring & supplemental education — one of the largest, most durable consumer-education categories, growing mid-single-digits a year.</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="tag" style="margin-top:0;">SAM</div>
|
||
<div class="big" style="margin-top:8px;">~$1.3B</div>
|
||
<div class="cap">North-American neurodivergent students & families: ~11M students × a blended ~$120/yr of study-support value they already spend on tools + tutoring.</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="tag" style="margin-top:0;">SOM · 3-yr</div>
|
||
<div class="big" style="margin-top:8px;">~$1–3M</div>
|
||
<div class="cap">A realistic beachhead: pilot regions, a handful of learning-support orgs, and early direct-to-family — a low-single-digit-million ARR mix of subscriptions + marketplace.</div>
|
||
</div>
|
||
</div>
|
||
<div class="legend"><span><b class="mk n">○</b> Market figures are <b>illustrative</b> — sized for shape and order-of-magnitude, not presented as a forecast.</span></div>
|
||
|
||
<div class="grid g3" style="margin-top:22px;">
|
||
<div class="card">
|
||
<span class="ic">📈</span>
|
||
<h3>Diagnosis is rising</h3>
|
||
<p>ADHD, autism and other neurodivergent diagnoses continue to climb, and awareness is de-stigmatizing them. More families are actively seeking tools built for <em>how their child actually learns</em>.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🤖</span>
|
||
<h3>AI tutoring has arrived</h3>
|
||
<p>Families now expect an AI tutor — but generic chatbots hand over answers and worry parents and schools. The opening is a <em>trusted</em>, guardrailed AI, not another answer engine.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🏫</span>
|
||
<h3>Learning-loss spend</h3>
|
||
<p>Post-pandemic learning loss and record tutoring spend mean parents and schools have budget in motion — and are looking for something more effective than a human hour at a time.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMPETITION -->
|
||
<section id="competition">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">05 · Competitive landscape</div>
|
||
<h2>Everyone owns a slice. No one owns the student.</h2>
|
||
<p class="lede">The space is crowded — but fragmented. Flashcard apps, AI tutors, ADHD planners and tutoring marketplaces each solve one piece for a general audience. FocusFlow is the only one combining them, built neurodiversity-first.</p>
|
||
</div>
|
||
|
||
<div class="tablewrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Capability</th>
|
||
<th class="c me">FocusFlow</th>
|
||
<th class="c">Quizlet</th>
|
||
<th class="c">Khanmigo</th>
|
||
<th class="c">ADHD apps*</th>
|
||
<th class="c">Tutor sites†</th>
|
||
<th class="c">ChatGPT</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="feat">Neurodiversity-first design</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
<tr><td class="feat">Executive-function tools</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
<tr><td class="feat">AI coach that teaches, won't hand over answers</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
<tr><td class="feat">Full study system (SRS, quizzes, Feynman)</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk p">◐</span></td></tr>
|
||
<tr><td class="feat">Grades / GPA + whole-life tracking</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
<tr><td class="feat">Integrated tutor marketplace, safe for minors</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
<tr><td class="feat">Free core / near-zero cost to run</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk y">●</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk p">◐</span></td></tr>
|
||
<tr><td class="feat">Proactive, personalized outreach</td><td class="c me"><span class="mk y">●</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk p">◐</span></td><td class="c"><span class="mk n">○</span></td><td class="c"><span class="mk n">○</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="legend">
|
||
<span><b class="mk y">●</b> Full</span>
|
||
<span><b class="mk p">◐</b> Partial</span>
|
||
<span><b class="mk n">○</b> None / not the focus</span>
|
||
<span>*Goblin Tools, Tiimo, Inflow †Wyzant, Preply, Care.com</span>
|
||
</div>
|
||
|
||
<div class="grid g2" style="margin-top:24px;">
|
||
<div class="card">
|
||
<h3>Against the answer engines</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">Chegg, Photomath and raw ChatGPT win on speed but lose the room the moment a parent or teacher realizes they hand over answers. FocusFlow's Socratic, guardrailed coach is the version schools and families will actually endorse.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Against the point tools</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">Quizlet owns flashcards; Tiimo and Goblin Tools own ADHD planning; Wyzant owns tutor-matching. Each is one tab in a student's fragmented stack. FocusFlow is the stack — and the switching cost is the student's whole history living in one place.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHY IT WINS -->
|
||
<section id="wedge">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">06 · Why we win</div>
|
||
<h2>Why this wins — and why it's defensible.</h2>
|
||
</div>
|
||
<div class="why">
|
||
<div class="whyrow">
|
||
<div class="num">1</div>
|
||
<div>
|
||
<h3>Accessibility-first is the moat, not a feature</h3>
|
||
<p>Retrofitting real neuro-adaptive coaching onto a general study app is a rebuild, not a setting. FocusFlow's data model, coaching modes and UI were designed for this from line one — the incumbents can't fast-follow it cheaply.</p>
|
||
</div>
|
||
</div>
|
||
<div class="whyrow">
|
||
<div class="num">2</div>
|
||
<div>
|
||
<h3>The AI coach teaches instead of cheating</h3>
|
||
<p>It's Socratic by design and redirects answer-seeking. That's the exact property parents and schools require before they'll trust — and pay for — an AI in their child's education. It's a trust asset competitors giving away answers can't claim.</p>
|
||
</div>
|
||
</div>
|
||
<div class="whyrow">
|
||
<div class="num">3</div>
|
||
<div>
|
||
<h3>Near-zero cost to run, by architecture</h3>
|
||
<p>The default AI engine runs <b>locally and free</b> — no API bill, works offline. Paid providers are optional upgrades. Every premium capability (payments, video, alerting) is a dark "seam" flipped on by a single environment variable. Gross margin is structurally high from day one.</p>
|
||
</div>
|
||
</div>
|
||
<div class="whyrow">
|
||
<div class="num">4</div>
|
||
<div>
|
||
<h3>It owns the whole student, so it's sticky</h3>
|
||
<p>Grades, wellbeing, tutoring and daily planning in one place means switching cost compounds. A student's history, streaks, and weak-area signals live here — leaving means starting over.</p>
|
||
</div>
|
||
</div>
|
||
<div class="whyrow">
|
||
<div class="num">5</div>
|
||
<div>
|
||
<h3>The revenue engine is already built</h3>
|
||
<p>This isn't "we'll monetize later." A two-sided marketplace with real payments and a $5/mo tutor subscription is coded, tested, and already proven end-to-end against live Stripe — waiting on a go-live decision, not a build.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- GO TO MARKET -->
|
||
<section id="gtm">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">07 · Go-to-market</div>
|
||
<h2>Land free with the community that advocates hardest.</h2>
|
||
<p class="lede">Neurodivergent families are a tight, vocal, referral-driven community. We give the student experience away, earn trust, and convert on the marketplace and premium tiers — then open the B2B channel once the pilots prove it.</p>
|
||
</div>
|
||
|
||
<div class="grid g3">
|
||
<div class="card">
|
||
<span class="ic">👪</span>
|
||
<h3>Direct to families</h3>
|
||
<p>Reach parents and students where they already gather — ADHD/autism parent communities, learning-support counselors, and creators on TikTok & YouTube. Word of mouth is the channel in this community.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🏫</span>
|
||
<h3>School & org pilots</h3>
|
||
<p>Free pilots with learning-support programs, tutoring centers and resource classrooms. Land as a tool teachers recommend; expand to per-seat licensing.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🎓</span>
|
||
<h3>Two-sided tutor supply</h3>
|
||
<p>Recruit verified tutors (including existing FocusFlow tutors and peers) with a free listing to seed the marketplace, then convert to the $5/mo subscription as bookings flow.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin:30px 0 4px;">The funnel</h3>
|
||
<div class="funnel">
|
||
<div class="fstage"><div class="s">Acquire</div><h3>Free student app</h3><p>Zero-friction signup; the whole coaching + study + grades experience is free, forever.</p></div>
|
||
<div class="fstage"><div class="s">Engage</div><h3>Daily habit & stickiness</h3><p>Streaks, proactive nudges, and the student's whole history compound switching cost.</p></div>
|
||
<div class="fstage"><div class="s">Monetize</div><h3>Marketplace + premium family tier</h3><p>Book a verified tutor; upgrade to advanced coaching & family accounts.</p></div>
|
||
<div class="fstage"><div class="s">Expand</div><h3>School & district licensing</h3><p>Pilots become paid seats; admin, class dashboards and moderation are already built.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHERE WE ARE -->
|
||
<section id="status">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">08 · Traction & status</div>
|
||
<h2>Production-grade today — with room to switch on.</h2>
|
||
<p class="lede">This reads like a funded team's Series-Seed codebase, built solo in about ten weeks. It's deployed, tested, and monitored. Several revenue and premium features are fully built and sitting <b>one credential away</b> from live.</p>
|
||
</div>
|
||
|
||
<h3 style="margin-bottom:16px;">Feature status</h3>
|
||
<div class="tablewrap">
|
||
<table>
|
||
<thead>
|
||
<tr><th>Capability</th><th>Status</th><th>What it takes to switch on</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td class="feat">Core app (coach, study, grades, life)</td><td><span class="pill live"><span class="d"></span>Live</span></td><td class="note">Running in production on the free local AI engine.</td></tr>
|
||
<tr><td class="feat">Accessibility engine</td><td><span class="pill live"><span class="d"></span>Live</span></td><td class="note">Shipped and applied app-wide.</td></tr>
|
||
<tr><td class="feat">Email + web-push notifications</td><td><span class="pill live"><span class="d"></span>Live</span></td><td class="note">Sending in production.</td></tr>
|
||
<tr><td class="feat">Premium AI (Gemini / Claude)</td><td><span class="pill live"><span class="d"></span>Live</span></td><td class="note">Wired; premium responses enabled via API key.</td></tr>
|
||
<tr><td class="feat">Tutor marketplace + payments</td><td><span class="pill test"><span class="d"></span>Test mode</span></td><td class="note">Proven end-to-end against live Stripe in <b>test mode</b>. Go-live = swap to live keys + onboard first tutors.</td></tr>
|
||
<tr><td class="feat">Live video tutoring (LiveKit)</td><td><span class="pill dark"><span class="d"></span>Built · dark</span></td><td class="note">Fully coded; needs LiveKit credentials (3 env vars).</td></tr>
|
||
<tr><td class="feat">Error alerting webhook</td><td><span class="pill dark"><span class="d"></span>Built · dark</span></td><td class="note">Sentry live; team alerts need one Slack/Discord URL.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="grid g2" style="margin-top:22px;">
|
||
<div class="card">
|
||
<h3>Engineering maturity</h3>
|
||
<p style="margin-top:10px;">Not a weekend hack — this is disciplined, testable, deployable software.</p>
|
||
<div class="stackline">
|
||
<span class="chip">600+ tests</span>
|
||
<span class="chip">CI on real Postgres</span>
|
||
<span class="chip">PR-gated</span>
|
||
<span class="chip">33 tracked migrations</span>
|
||
<span class="chip">Sentry monitoring</span>
|
||
<span class="chip">371 commits</span>
|
||
<span class="chip">IDOR / auth tested</span>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Modern, boring-in-a-good-way stack</h3>
|
||
<p style="margin-top:10px;">Current, mainstream, hireable-for technology — nothing exotic to maintain.</p>
|
||
<div class="stackline">
|
||
<span class="chip">Next.js 15</span>
|
||
<span class="chip">React 19</span>
|
||
<span class="chip">TypeScript</span>
|
||
<span class="chip">Postgres + Prisma</span>
|
||
<span class="chip">Tailwind v4</span>
|
||
<span class="chip">Stripe</span>
|
||
<span class="chip">LiveKit</span>
|
||
<span class="chip">Vercel</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BUSINESS MODEL -->
|
||
<section id="model">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">09 · Business model & financials</div>
|
||
<h2>Free to land. Multiple ways to earn.</h2>
|
||
<p class="lede">The whole student experience is free — that's the growth engine. Revenue rides on the marketplace and premium tiers, and the plumbing for both is already in the codebase.</p>
|
||
</div>
|
||
<div class="rev">
|
||
<div class="card">
|
||
<span class="revpill now">Built · proven</span>
|
||
<div class="price">$5<small>/mo</small></div>
|
||
<h3>Tutor listing subscription</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">Verified tutors pay to appear in discovery. Coded, tested, and validated against live Stripe. Supply-side recurring revenue that scales with the tutor base.</p>
|
||
<div class="stat"><span class="chip">Stripe subscriptions + billing portal</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<span class="revpill built">Seam built</span>
|
||
<div class="price">Premium<small> tier</small></div>
|
||
<h3>Student / family plan</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">A feature-gating billing seam already exists — every feature currently sits in the free tier. Flip advanced coaching, unlimited premium-AI, or family accounts into a paid plan with no rebuild.</p>
|
||
<div class="stat"><span class="chip">Entitlement gate ready</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<span class="revpill next">Roadmap</span>
|
||
<div class="price">B2B<small> / schools</small></div>
|
||
<h3>Institutional licensing</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">Multi-role support (admin, teacher, class dashboards, moderation, audit logs) is already in place — the foundation for selling seats to schools, districts, and learning-support programs.</p>
|
||
<div class="stat"><span class="chip">Admin + classes shipped</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin-top:18px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;">
|
||
<h3>What the subscription line alone looks like</h3>
|
||
<span class="chip">Arithmetic · not a forecast</span>
|
||
</div>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;max-width:70ch;">Just $5/mo × paying tutors — <em>before</em> any premium student tier, marketplace take-rate, or B2B seats. It shows the shape of the recurring line once supply is on the platform.</p>
|
||
<div class="tablewrap" style="margin-top:16px;">
|
||
<table style="font-variant-numeric:tabular-nums;">
|
||
<thead><tr><th>Paying tutors</th><th>Monthly recurring</th><th>Annual recurring</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="feat">100</td><td>$500</td><td>$6,000</td></tr>
|
||
<tr><td class="feat">500</td><td>$2,500</td><td>$30,000</td></tr>
|
||
<tr><td class="feat">1,000</td><td>$5,000</td><td>$60,000</td></tr>
|
||
<tr><td class="feat">5,000</td><td>$25,000</td><td>$300,000</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout" style="margin-top:18px;">
|
||
<h3>The margin story</h3>
|
||
<p>Because the default AI runs locally and free, and every paid dependency is optional, the cost to serve a free user is essentially hosting. Revenue features add cost only when they're already earning. That's a rare position: <b>we can grow the free base aggressively without growing the bill.</b></p>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top:18px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;">
|
||
<h3>Illustrative 3-year scenario</h3>
|
||
<span class="chip">Illustrative · not a forecast</span>
|
||
</div>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;max-width:72ch;">One plausible path once a pilot proves demand — blending the tutor subscription, a premium family tier (~$8/mo), and early school seats. Directional, to show the shape of the ramp.</p>
|
||
<div class="tablewrap" style="margin-top:16px;">
|
||
<table style="font-variant-numeric:tabular-nums;">
|
||
<thead><tr><th>End of year</th><th class="c">Free students</th><th class="c">Paying tutors</th><th class="c">Premium families</th><th class="c">School seats</th><th class="c">ARR</th></tr></thead>
|
||
<tbody>
|
||
<tr><td class="feat">Year 1</td><td class="c">5,000</td><td class="c">150</td><td class="c">400</td><td class="c">—</td><td class="c">~$50K</td></tr>
|
||
<tr><td class="feat">Year 2</td><td class="c">40,000</td><td class="c">800</td><td class="c">3,500</td><td class="c">1,500</td><td class="c">~$550K</td></tr>
|
||
<tr><td class="feat">Year 3</td><td class="c">150,000</td><td class="c">3,000</td><td class="c">14,000</td><td class="c">10,000</td><td class="c">~$2.4M</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid g2" style="margin-top:18px;">
|
||
<div class="card">
|
||
<h3>Cost structure</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">Near-zero variable COGS: the free tier runs on the local AI engine + hosting. The real spend is <b>team</b> and <b>customer acquisition</b> — both discretionary and pacing-controllable. Premium-AI and Stripe fees are incurred only on already-paying users.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Unit economics that favor patience</h3>
|
||
<p style="color:var(--muted);font-size:15px;margin-top:8px;">A free user costs cents to serve, so a long free runway is cheap. Marketplace revenue is recurring and supply-driven; premium is high-margin software. Low burn means the runway to prove retention is measured in a modest budget, not a raise.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TEAM -->
|
||
<section id="team">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">10 · Team & execution</div>
|
||
<h2>Proven execution — ready to add leverage.</h2>
|
||
<p class="lede">The strongest evidence in this plan is the plan itself: a live, tested, production-grade platform of this scope, built solo in about ten weeks. That's the execution risk, already retired.</p>
|
||
</div>
|
||
<div class="grid g3">
|
||
<div class="card">
|
||
<span class="ic">🛠️</span>
|
||
<h3>Founder — product & engineering</h3>
|
||
<p>Designed and shipped the entire platform end-to-end: 49-model data layer, AI coaching seam, marketplace with payments, and the accessibility engine — with CI, tests and monitoring throughout.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">➕</span>
|
||
<h3>First hires</h3>
|
||
<p>A second engineer to retire the single-builder risk and a community/GTM lead to run pilots and the neurodivergent-family channel. The clean, documented codebase makes onboarding fast.</p>
|
||
</div>
|
||
<div class="card">
|
||
<span class="ic">🤝</span>
|
||
<h3>Advisors we'll want</h3>
|
||
<p>A special-education or learning-support practitioner and a student-data-privacy advisor — to sharpen the product for schools and get compliance right before B2B.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHAT IT TAKES -->
|
||
<section id="gaps">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">11 · Risks & mitigations</div>
|
||
<h2>The honest risks — and how each is handled.</h2>
|
||
<p class="lede">The product risk is largely retired; what remains is go-to-market and operational, normal for this stage. Named plainly, with the mitigation for each.</p>
|
||
</div>
|
||
<div class="gaps">
|
||
<div class="gap"><div class="g">↳</div><div><b>No live users / unproven retention</b><p><b>Mitigation:</b> run a small pilot this term. Near-zero cost, and it produces the usage & retention evidence every later decision needs.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Monetization not yet turned on</b><p><b>Mitigation:</b> the revenue path is built and proven against live Stripe (test mode). Go-live is config + business verification, not a build. Low burn buys the runway.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Incumbents add features</b><p><b>Mitigation:</b> Quizlet/Khan can copy a feature, not a neuro-first architecture + an integrated safe marketplace + the student's whole history. The moat is integration and switching cost.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Child safety on the marketplace</b><p><b>Mitigation:</b> already engineered — Stripe Identity verification, parent-mediated booking for under-18s, in-person safety acknowledgements, and moderation with auto-hide.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>AI trust / hallucination</b><p><b>Mitigation:</b> Socratic guardrails that refuse to hand over answers, plus a deterministic local engine as the always-on fallback — a bad AI response can never stall a feature.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Student-data regulation (COPPA/FERPA)</b><p><b>Mitigation:</b> role-based access, audit logs and a privacy-first data model are in place; a privacy advisor and formal compliance review precede any school rollout.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Single-builder bus factor</b><p><b>Mitigation:</b> first hire is a second engineer; the clean, tested, documented codebase (600+ tests, CI) makes onboarding fast.</p></div></div>
|
||
<div class="gap"><div class="g">↳</div><div><b>Infra on a free tier</b><p><b>Mitigation:</b> currently Vercel Hobby (crons worked around via GitHub Actions). A modest infra upgrade unlocks real-traffic headroom on demand.</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- THE ASK -->
|
||
<section id="ask">
|
||
<div class="wrap">
|
||
<div class="sechead">
|
||
<div class="eyebrow">12 · Roadmap & the ask</div>
|
||
<h2>Three moves, in priority order.</h2>
|
||
<p class="lede">The product is done enough to test with real students <em>this term</em>. My recommendation is to prove demand before spending on scale.</p>
|
||
</div>
|
||
|
||
<h3 style="margin-bottom:8px;">Milestones</h3>
|
||
<div class="timeline">
|
||
<div class="tl"><div class="when">Now</div><div class="what"><h3>Live in production <span class="now">Done</span></h3><p>Full platform shipped; marketplace proven end-to-end in Stripe test mode.</p></div></div>
|
||
<div class="tl"><div class="when">Next ~1 mo</div><div class="what"><h3>Student pilot</h3><p>15–30 real students; premium AI on; measure usage, retention and testimonials.</p></div></div>
|
||
<div class="tl"><div class="when">~Quarter 2</div><div class="what"><h3>Marketplace live</h3><p>Swap Stripe to live, onboard first verified tutors, switch on LiveKit video. First revenue.</p></div></div>
|
||
<div class="tl"><div class="when">~Quarter 3</div><div class="what"><h3>Premium tier + first school</h3><p>Flip on the family plan; convert a pilot org to paid seats.</p></div></div>
|
||
<div class="tl"><div class="when">Year 2</div><div class="what"><h3>Scale the channel</h3><p>Second engineer + GTM lead; grow D2C and B2B on proven retention.</p></div></div>
|
||
</div>
|
||
|
||
<h3 style="margin:34px 0 8px;">The ask</h3>
|
||
<div class="moves">
|
||
<div class="move p1">
|
||
<span class="rk">Do first</span>
|
||
<div>
|
||
<h3>Run a small pilot with real students</h3>
|
||
<p>Recruit 15–30 students (a class, a tutoring group, a support program). Turn on premium AI, watch usage and retention, and gather testimonials. Near-zero cost; produces the evidence every later decision needs.</p>
|
||
</div>
|
||
<div class="eff">~2 weeks<br>to stand up</div>
|
||
</div>
|
||
<div class="move p2">
|
||
<span class="rk">Then</span>
|
||
<div>
|
||
<h3>Flip the marketplace live</h3>
|
||
<p>Swap Stripe to live mode, onboard a first handful of verified tutors, and switch on LiveKit video. Turns a built feature into an actual revenue line. Blocked only on a go/no-go and business verification.</p>
|
||
</div>
|
||
<div class="eff">Days of<br>config</div>
|
||
</div>
|
||
<div class="move p3">
|
||
<span class="rk">To scale</span>
|
||
<div>
|
||
<h3>Back it: a small team + infra budget</h3>
|
||
<p>With pilot evidence in hand, invest in a second engineer, a modest hosting/infra tier, and a focused go-to-market motion (schools & learning-support orgs). Retire the bus factor; open the B2B channel.</p>
|
||
</div>
|
||
<div class="eff">Post-pilot<br>decision</div>
|
||
</div>
|
||
</div>
|
||
<div class="callout" style="margin-top:26px;">
|
||
<h3>Bottom line</h3>
|
||
<p>We have a live, production-grade, accessibility-first learning platform with a built-in revenue engine — created for a fraction of what it would normally cost. The expensive, risky part (building it) is done. What's left is the fun part: <b>putting it in front of students and turning the revenue on.</b></p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer>
|
||
<div class="wrap">
|
||
<div class="foot-mono">FocusFlow — focusflow-lock-in.ca · Live in production</div>
|
||
<div class="foot-mono">Confidential business plan · Prepared August 2026</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
var bar = document.getElementById('progress');
|
||
if (!bar) return;
|
||
var ticking = false;
|
||
function update() {
|
||
var el = document.scrollingElement || document.documentElement;
|
||
var max = el.scrollHeight - el.clientHeight;
|
||
var p = max > 0 ? el.scrollTop / max : 0;
|
||
bar.style.width = (Math.max(0, Math.min(1, p)) * 100).toFixed(2) + '%';
|
||
ticking = false;
|
||
}
|
||
function onScroll() { if (!ticking) { ticking = true; requestAnimationFrame(update); } }
|
||
document.addEventListener('scroll', onScroll, { passive: true });
|
||
window.addEventListener('resize', update);
|
||
update();
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|