From 41dc910623b21e08bc4c9f13c6268a8ec5c51c90 Mon Sep 17 00:00:00 2001
From: Experimenting With Computers
 <1908752+makefunstuff@users.noreply.github.com>
Date: Sun, 20 Sep 2026 19:13:40 +0300
Subject: [PATCH 1/2] Tighten demo block layout: full-shell framed video

---
 site/index.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index ea72d24..679c28d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -100,12 +100,11 @@ <h1>Steer code with rules, not with token maxxing.</h1>
 <!-- ========== DEMO: silent slop-detection triptych ========== -->
 <section id="demo" class="sec sec-demo">
   <div class="shell">
-    <p class="eyebrow"><span class="eyebrow-dot" aria-hidden="true"></span>Demo</p>
-    <div class="win win-lg demo-screen" aria-label="Product demo">
+    <div class="win win-lg demo-screen" aria-label="Demo: OpenCode, Neovim, VS Code">
       <div class="win-chrome">
         <span class="traffic" aria-hidden="true"><i></i><i></i><i></i></span>
-        <span class="win-title">demo · OpenCode → Neovim → VS Code</span>
-        <span class="win-meta">silent · ~32s</span>
+        <span class="win-title">demo</span>
+        <span class="win-meta">OpenCode · Neovim · VS Code</span>
       </div>
       <div class="demo-video">
         <video controls playsinline preload="metadata"

From 75f29955c3a8da033a31b1b848cf2a82e850e287 Mon Sep 17 00:00:00 2001
From: Experimenting With Computers
 <1908752+makefunstuff@users.noreply.github.com>
Date: Sun, 20 Sep 2026 19:13:42 +0300
Subject: [PATCH 2/2] Tighten demo block layout: full-shell framed video

---
 site/styles.css | 39 +++++++++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/site/styles.css b/site/styles.css
index 71d779b..930017e 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -992,25 +992,52 @@ tr.mark strong { color: var(--accent); }
 
 /* ---------- demo video frame ---------- */
 .sec-demo {
-  padding-block: clamp(2.5rem, 6vw, 4rem);
+  padding-block: clamp(1.75rem, 4.5vw, 3rem);
+  background: linear-gradient(180deg, var(--bg-elev), var(--bg));
 }
-.sec-demo .eyebrow { margin-bottom: 1.1rem; }
 .demo-screen {
+  width: 100%;
+  max-width: none;
+  margin-inline: 0;
   overflow: hidden;
+  border-radius: 14px;
   box-shadow: var(--shadow-float);
-  max-width: 56rem;
+  background: var(--machine);
+}
+.demo-screen .win-chrome {
+  padding-inline: 0.95rem;
+}
+.demo-screen .win-title {
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font-size: 0.68rem;
+  color: var(--machine-dim);
+}
+.demo-screen .win-meta {
+  color: var(--machine-ink);
+  opacity: 0.75;
 }
 .demo-video {
-  background: #000;
+  position: relative;
+  background: #050607;
   line-height: 0;
+  isolation: isolate;
 }
 .demo-video video {
   display: block;
   width: 100%;
   height: auto;
+  aspect-ratio: 16 / 9;
+  object-fit: contain;
+  background: #050607;
   vertical-align: top;
-  background: #000;
 }
 @media (max-width: 719px) {
-  .demo-screen .win-meta { display: none; }
+  .sec-demo { padding-block: 1.35rem 1.75rem; }
+  .demo-screen { border-radius: 12px; }
+  .demo-screen .win-meta {
+    max-width: 55%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }