diff --git a/qa/audit_geo.mjs b/qa/audit_geo.mjs
new file mode 100644
index 0000000..12a1751
--- /dev/null
+++ b/qa/audit_geo.mjs
@@ -0,0 +1,16 @@
+import { chromium } from "playwright";
+const args = ["--host-resolver-rules=MAP canvas.flow-master.ai 65.21.71.186", "--ignore-certificate-errors"];
+const b = await chromium.launch({ headless: true, args });
+const p = await (await b.newContext({ viewport: { width: 1440, height: 900 } })).newPage();
+await p.goto("https://canvas.flow-master.ai/", { waitUntil: "networkidle" });
+await p.waitForTimeout(800);
+await p.locator(".persona-chip", { hasText: /Mariana/ }).click();
+await p.locator(".dev-login-btn").click();
+await p.waitForTimeout(2500);
+await p.locator(".hub-chip", { hasText: /Attendance Map/ }).click();
+await p.waitForTimeout(3000);
+const tile = await p.locator(".leaflet-tile").count();
+const markers = await p.locator(".leaflet-marker-icon").count();
+const stats = await p.locator(".geo-stat").allTextContents();
+console.log(`tiles loaded: ${tile}, markers: ${markers}, stats: ${stats.join(" | ")}`);
+await b.close();
diff --git a/src/App.tsx b/src/App.tsx
index 342a37e..486619c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import Chat from "./scenes/Chat";
 import Agent from "./scenes/Agent";
 import Hub from "./scenes/Hub";
 import GeoAttendance from "./scenes/GeoAttendance";
+import Explainer from "./scenes/Explainer";
 import CommandBar from "./components/CommandBar";
 import Toaster from "./components/Toaster";
 import Console from "./components/Console";
@@ -165,6 +166,7 @@ export default function App() {
         {scene === "hub-hr" && <Hub hub="hr" />}
         {scene === "hub-it" && <Hub hub="it" />}
         {scene === "geo-attendance" && <GeoAttendance />}
+        {scene === "explainer" && <Explainer />}
         {scene === "settings" && <Settings />}
       </div>
 
diff --git a/src/index.css b/src/index.css
index dd9b2d1..3ad0ef9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1980,3 +1980,17 @@ select.studio-input { background: var(--bp-paper); }
 @media (max-width: 700px) {
   .geo-map-wrap { height: 380px; }
 }
+
+.explainer-scene { padding: 32px 24px; max-width: 1200px; margin: 0 auto; background: var(--bp-paper); min-height: calc(100vh - 60px); }
+.explainer-head { margin-bottom: 32px; max-width: 800px; }
+.explainer-intro { font-size: 14px; color: var(--bp-muted); line-height: 1.6; margin-top: 8px; }
+.explainer-jump-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.explainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
+.explainer-card { padding: 18px; background: var(--bp-paper); border: 1px solid var(--bp-navy); display: flex; flex-direction: column; gap: 8px; }
+.explainer-card-num { font-family: var(--bp-mono); font-size: 11px; color: var(--bp-muted); }
+.explainer-card-eyebrow { font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bp-amber); text-transform: uppercase; }
+.explainer-card-title { font-size: 16px; font-weight: 700; color: var(--bp-navy); margin: 0; }
+.explainer-card-body { font-size: 12px; line-height: 1.55; color: var(--bp-navy); white-space: pre-wrap; margin: 0; }
+.explainer-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--bp-navy) 25%, transparent); }
+.explainer-foot-label { font-family: var(--bp-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--bp-muted); }
+.explainer-foot p { font-size: 11px; color: var(--bp-muted); margin-top: 4px; }
diff --git a/src/scenes/Explainer.tsx b/src/scenes/Explainer.tsx
new file mode 100644
index 0000000..06b23f6
--- /dev/null
+++ b/src/scenes/Explainer.tsx
@@ -0,0 +1,89 @@
+import { useApp } from "../state/store";
+import { Branch, Layers, Pulse, Bot } from "../components/icons";
+
+const SECTIONS = [
+  {
+    title: "What is FlowMaster?",
+    eyebrow: "PHILOSOPHY",
+    body:
+      "FlowMaster treats business processes the same way engineers treat software: write it once as code, version-control every change, deploy it like an app, execute it at runtime, and never delete anything. We call this Business-as-Code. A process is no longer a Visio diagram that gathers dust — it's a running program your whole company can read, change, and ship.",
+  },
+  {
+    title: "Why this matters for your team",
+    eyebrow: "THE BUSINESS CASE",
+    body:
+      "Because the process is code, you get the things software has had for thirty years: audit trails, rollbacks, A/B testing, code review, fast iteration. A store manager can request a new laptop, the request flows through approval, procurement, and 3-way match — and every step is the same composable element. Nobody has to rebuild the same form five times.",
+  },
+  {
+    title: "Five element types",
+    eyebrow: "EA2 ARCHITECTURE",
+    body:
+      "Every process is composed of five element types. Each answers one question.\n\n• Flow — what happens, and in what order\n• Data — what information is collected and produced\n• View — how a person sees and interacts with a step\n• Rule — what decisions are made automatically\n• Version — what changed, when, and who signed off\n\nEach element is one document in the database. The relationships between them — \"this Flow uses that Data\", \"this View shows these Rules\" — are edges in a graph. The graph IS the data model.",
+  },
+  {
+    title: "Process lifecycle",
+    eyebrow: "FROM PEN TO PROD",
+    body:
+      "Every process travels the same four stops:\n\n1. DEFINE — author it in the Process Creation Wizard (drag, drop, describe, upload a doc, ask Pi)\n2. VERSION — freeze a release, get sign-off, immortalise the diff\n3. DEPLOY — roll it out to the tenant\n4. EXECUTE — the Execution Engine runs every instance, step-by-step, persisting state to EA2 at every write\n\nAuthoring tools and the runtime are separate concerns by design. They never bleed into each other.",
+  },
+  {
+    title: "What's a 'hub'?",
+    eyebrow: "HOW WORK IS GROUPED",
+    body:
+      "A hub is a curated view onto your work for a specific function — Procurement, People, IT, Finance, and so on. Each hub shows the published processes that matter to that function, plus a queue of work items waiting on it. The Procurement Hub is for the people who buy things; the People Hub is for HR; the IT Hub is for service desk and access requests.",
+  },
+  {
+    title: "What's a 'work item'?",
+    eyebrow: "RUNTIME UNIT",
+    body:
+      "When a process gets executed for a real subject — \"Store 204 needs a laptop\" — that running instance becomes a work item. It has a transaction_id, an active step, a current human or agent assignee, and an audit trail of every decision so far. Work items live in queues, and people pull from queues like a Trello board with a brain.",
+  },
+  {
+    title: "Where does the data live?",
+    eyebrow: "ONE GRAPH, ONE TRUTH",
+    body:
+      "Everything is stored in EA2, the FlowMaster graph database, organised into five document collections (flow, data, view, rule, version) and four edge collections (instantiates, defines, relates, governs). When the Wizard creates a step, when an agent applies a decision, when an SAP record gets transformed into a native shape — all of it lands in the same graph. There is exactly one source of truth.",
+  },
+  {
+    title: "Why an agent (Pi)?",
+    eyebrow: "AN INTERFACE FOR EVERYONE",
+    body:
+      "Most people don't want to learn nineteen tabs. Pi is a co-pilot you can talk to: navigate the cockpit, start a process, message your team, list what's published, build a new flow. It's the same API the UI uses — Pi just speaks human. If a regional store manager asks 'start a laptop request for store 204', Pi finds the right published flow and starts it.",
+  },
+] as const;
+
+export default function Explainer() {
+  const setScene = useApp((s) => s.setScene);
+  return (
+    <div className="explainer-scene">
+      <header className="explainer-head">
+        <div className="mc-hero-eyebrow"><Layers size={12} /> The FlowMaster Explainer</div>
+        <h2 className="mc-hero-title">Business-as-Code, in plain English</h2>
+        <p className="explainer-intro">
+          Eight pages, eight minutes — everything a new operator needs to understand before they touch the cockpit. Distilled from the FlowMaster Element Architecture (v2.1) and the EA2 contracts.
+        </p>
+        <div className="explainer-jump-row">
+          <button className="hub-chip" onClick={() => setScene("agent")}><Bot size={11} /> Ask Pi instead</button>
+          <button className="hub-chip" onClick={() => setScene("studio")}><Branch size={11} /> Open the Wizard</button>
+          <button className="hub-chip" onClick={() => setScene("mission")}><Pulse size={11} /> Go to Mission Control</button>
+        </div>
+      </header>
+
+      <div className="explainer-grid">
+        {SECTIONS.map((s, i) => (
+          <article key={s.title} className="explainer-card">
+            <div className="explainer-card-num">{String(i + 1).padStart(2, "0")}</div>
+            <div className="explainer-card-eyebrow">{s.eyebrow}</div>
+            <h3 className="explainer-card-title">{s.title}</h3>
+            <p className="explainer-card-body">{s.body}</p>
+          </article>
+        ))}
+      </div>
+
+      <footer className="explainer-foot">
+        <div className="explainer-foot-label">SOURCE OF TRUTH</div>
+        <p>FlowMaster Element Architecture v2.1 · EA2 contracts (apply-batch, edges/defines, work-items) · seeded into Hindsight 2026-05-21.</p>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/scenes/Landing.tsx b/src/scenes/Landing.tsx
index 3b0f320..ed2fc09 100644
--- a/src/scenes/Landing.tsx
+++ b/src/scenes/Landing.tsx
@@ -82,6 +82,7 @@ export default function Landing() {
             <button className="hub-chip" onClick={() => setScene("geo-attendance")}>Attendance Map</button>
             <button className="hub-chip" onClick={() => setScene("agent")}>Talk to Pi</button>
             <button className="hub-chip" onClick={() => setScene("chat")}>Team Chat</button>
+            <button className="hub-chip" onClick={() => setScene("explainer")}>What is FlowMaster?</button>
           </div>
 
           <div className="hero-stats">