diff --git a/presentation/prototype/slide07-ontology.html b/presentation/prototype/slide07-ontology.html
index 2bae2744..81287aef 100644
--- a/presentation/prototype/slide07-ontology.html
+++ b/presentation/prototype/slide07-ontology.html
@@ -8,7 +8,7 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<title>PROTOTYPE · Slide 07 "The clinical ontology" — 3 layout variants</title>
+<title>PROTOTYPE · Slide 07 "The clinical ontology" — 4 layout variants</title>
 <link rel="stylesheet" href="/deck/fonts.css">
 <style>
   :root {
@@ -98,6 +98,19 @@
   .vc-why .pt:last-child { border-bottom: none; }
   .vc-why .pt .num { color: var(--bordeaux-deep); }
 
+  /* ================= VARIANT D — ontology left, output panel right ================= */
+  .vd-split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: stretch; flex: 1; min-height: 0; }
+  .vd-points { margin-top: 4px; }
+  .vd-points .pt { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
+  .vd-points .pt:last-child { border-bottom: none; }
+  .vd-out { border: 1px solid var(--bordeaux); background: var(--bordeaux-tint); border-radius: 10px;
+    padding: 16px 18px 10px; display: flex; flex-direction: column; }
+  .vd-out .pt { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(143,18,4,.18); }
+  .vd-out .pt:last-child { border-bottom: none; }
+  .vd-out .pt .num { color: var(--bordeaux-deep); }
+  .vd-out .pt b { color: var(--bordeaux-deep); }
+  .vd-out .pt .d { font: 400 12.5px/1.45 var(--sans); color: var(--ink); }
+
   /* ---- floating switcher (not part of the design) ---- */
   .switcher { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 99;
     display: flex; align-items: center; gap: 10px; background: #1d1a1b; color: #fff;
@@ -111,7 +124,7 @@
 <body>
 <div class="proto-head">
   <b>PROTOTYPE · slide 07 — the clinical ontology</b>
-  <span>Three layout variants · EN primary (bold dark) over IT gloss (secondary) · A = three columns (your idea) · B = editorial bands · C = ontology + "why order matters" panel</span>
+  <span>Four layout variants · EN primary (bold dark) over IT gloss (secondary) · A = three columns (your idea) · B = editorial bands · C = ontology + "why order matters" panel · D = ontology + output panel (right)</span>
 </div>
 
 <div class="frame">
@@ -222,14 +235,45 @@ function variantC() {
     </div>`;
 }
 
+// ---- variant D: ontology left, "the output" right (user request) ----
+const OUTPUT = [
+  { n: '01', b: 'Quantitative data on the records', d: 'every procedure and implant the text analysis reads is written back as structured, quantitative values on the record that describes it' },
+  { n: '02', b: 'Straight into the DWH flow', d: 'these records enter the data-warehouse generation like any other source' },
+  { n: '03', b: 'As if typed at the visit', d: 'the data lands exactly as if clinicians had keyed it in themselves during the visits' },
+];
+function variantD() {
+  return `
+    <div class="vd-split">
+      <div>
+        <div class="vc-tier">
+          <div class="col-h">Tier 1 · arrhythmic<span class="n">11</span></div>
+          <div class="vc-chips">${T1.map(c => pill(c, true)).join('')}</div>
+        </div>
+        <div class="vc-tier">
+          <div class="col-h">Tier 2 · structural<span class="n">5</span></div>
+          <div class="vc-chips">${T2.map(c => pill(c, false)).join('')}</div>
+        </div>
+        <div class="vd-points">${POINTS.map(p => `
+          <div class="pt"><span class="num">${p.n}</span><div><b>${p.b}</b> <span class="d">— ${p.d}</span></div></div>`).join('')}
+        </div>
+      </div>
+      <div class="vd-out">
+        <div class="vc-why-h" style="margin-bottom:8px">The output: text becomes recorded data</div>
+        ${OUTPUT.map(p => `
+          <div class="pt"><span class="num">${p.n}</span><div><b>${p.b}</b><div class="d" style="margin-top:2px">${p.d}</div></div></div>`).join('')}
+      </div>
+    </div>`;
+}
+
 // ---- switcher ----
 const VARIANTS = [
   { key: 'A', name: 'Three columns (5-6 per column)', render: variantA },
   { key: 'B', name: 'Editorial bands, big numerals', render: variantB },
   { key: 'C', name: 'Ontology + why-order panel', render: variantC },
+  { key: 'D', name: 'Ontology + output panel (right)', render: variantD },
 ];
 function current() {
-  const k = (location.search.match(/variant=([ABC])/) || [])[1] || 'A';
+  const k = (location.search.match(/variant=([ABCD])/) || [])[1] || 'A';
   return Math.max(0, VARIANTS.findIndex(v => v.key === k));
 }
 function show(i) {
