From 18e7a04bf6bd9ee52595c5c460e3a98c57cce2f3 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Tue, 14 Oct 2025 10:53:29 +1300
Subject: [PATCH] feat: add version control system and PWA support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements cache busting and progressive web app features:

**Version Management:**
- version.json manifest with changelog tracking
- Service worker with automatic update checking (hourly)
- Update notification UI with changelog display
- Configurable forced updates after timeout
- Cache control headers for optimal performance

**PWA Features:**
- manifest.json with app shortcuts
- Apple touch icon support
- "Add to Home Screen" functionality
- Offline support via service worker

**Cache Strategy:**
- HTML: 5-minute cache with revalidation
- CSS/JS: 1-year immutable cache
- Images: 1-year immutable cache
- version.json/service-worker.js: no-cache

**Integration:**
- All main pages updated with PWA meta tags
- Version manager loaded on all user-facing pages
- Production deployment successful

Users who previously visited the site will now automatically receive
update notifications when version changes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/docs.html             |  262 ++++---
 public/faq.html              |   14 +
 public/implementer.html      |   43 +-
 public/index.html            |  194 ++---
 public/js/version-manager.js |  311 ++++++++
 public/leader.html           | 1344 ++++++++++++++--------------------
 public/manifest.json         |   47 ++
 public/researcher.html       |  823 ++++++++++++---------
 public/service-worker.js     |  180 +++++
 public/version.json          |   11 +
 src/server.js                |   34 +
 11 files changed, 1888 insertions(+), 1375 deletions(-)
 create mode 100644 public/js/version-manager.js
 create mode 100644 public/manifest.json
 create mode 100644 public/service-worker.js
 create mode 100644 public/version.json

diff --git a/public/docs.html b/public/docs.html
index e99afbec..48994132 100644
--- a/public/docs.html
+++ b/public/docs.html
@@ -5,6 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Framework Documentation | Tractatus AI Safety</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
   <style>
     html { scroll-behavior: smooth; }
@@ -372,6 +383,53 @@
     .toc-indent-1 { padding-left: 12px; }
     .toc-indent-2 { padding-left: 28px; }
     .toc-indent-3 { padding-left: 44px; }
+
+    /* Search Modal */
+    #search-modal {
+      display: none;
+    }
+
+    #search-modal.show {
+      display: flex !important;
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      animation: fadeIn 0.2s ease-out forwards;
+      background: rgba(0, 0, 0, 0.5) !important;
+    }
+
+    #search-modal.show > div {
+      animation: slideUp 0.3s ease-out forwards;
+      opacity: 1 !important;
+    }
+
+    /* Search modal content scrolling */
+    #search-modal-content {
+      max-height: 70vh;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
+    /* Custom scrollbar for search modal */
+    #search-modal-content::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    #search-modal-content::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 4px;
+    }
+
+    #search-modal-content::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    #search-modal-content::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
   </style>
 </head>
 <body class="bg-gray-50">
@@ -385,91 +443,17 @@
   <!-- Page Header -->
   <div class="bg-white border-b border-gray-200">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-      <h1 class="text-3xl font-bold text-gray-900">Framework Documentation</h1>
-      <p class="text-gray-600 mt-2">Technical specifications, guides, and reference materials</p>
-    </div>
-  </div>
-
-  <!-- Search Section -->
-  <div class="bg-gray-50 border-b border-gray-200">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-      <!-- Search Input -->
-      <div class="mb-4">
-        <div class="relative">
-          <input
-            type="text"
-            id="docs-search-input"
-            placeholder="Search documentation..."
-            class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
-            aria-label="Search documentation"
-          />
-          <svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-3xl font-bold text-gray-900">Framework Documentation</h1>
+          <p class="text-gray-600 mt-2">Technical specifications, guides, and reference materials</p>
+        </div>
+        <button type="button" id="open-search-modal-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2" aria-label="Open search">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
           </svg>
-        </div>
-      </div>
-
-      <!-- Filters Row -->
-      <div class="flex flex-wrap items-center gap-3">
-        <!-- Quadrant Filter -->
-        <div class="flex-1 min-w-[200px]">
-          <label for="filter-quadrant" class="sr-only">Filter by Quadrant</label>
-          <select id="filter-quadrant" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
-            <option value="">All Quadrants</option>
-            <option value="STR">Strategic</option>
-            <option value="OPS">Operational</option>
-            <option value="TAC">Tactical</option>
-            <option value="SYS">System</option>
-            <option value="STO">Storage</option>
-          </select>
-        </div>
-
-        <!-- Persistence Filter -->
-        <div class="flex-1 min-w-[200px]">
-          <label for="filter-persistence" class="sr-only">Filter by Persistence</label>
-          <select id="filter-persistence" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
-            <option value="">All Persistence Levels</option>
-            <option value="HIGH">High</option>
-            <option value="MEDIUM">Medium</option>
-            <option value="LOW">Low</option>
-          </select>
-        </div>
-
-        <!-- Audience Filter -->
-        <div class="flex-1 min-w-[200px]">
-          <label for="filter-audience" class="sr-only">Filter by Audience</label>
-          <select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
-            <option value="">All Audiences</option>
-            <option value="researcher">Researcher</option>
-            <option value="implementer">Implementer</option>
-            <option value="leader">Leader</option>
-            <option value="technical">Technical</option>
-            <option value="general">General</option>
-          </select>
-        </div>
-
-        <!-- Clear Filters Button -->
-        <button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
-          Clear Filters
+          <span>Search</span>
         </button>
-
-        <!-- Search Tips Button -->
-        <button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-          </svg>
-        </button>
-      </div>
-
-      <!-- Search Results Summary -->
-      <div id="search-results-summary" class="mt-4 text-sm text-gray-600 hidden">
-        <span id="search-results-count"></span>
-      </div>
-
-      <!-- Search History (Recent Searches) -->
-      <div id="search-history-container" class="mt-3 hidden">
-        <div class="text-xs text-gray-500 mb-2">Recent Searches:</div>
-        <div id="search-history" class="flex flex-wrap gap-2"></div>
       </div>
     </div>
   </div>
@@ -601,7 +585,7 @@
   </div>
 
   <!-- ToC Modal -->
-  <div id="toc-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-center p-4">
+  <div id="toc-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
     <div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
       <!-- Modal Header -->
       <div class="flex items-center justify-between p-6 border-b border-gray-200">
@@ -623,7 +607,7 @@
   </div>
 
   <!-- Search Tips Modal -->
-  <div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-center p-4 hidden">
+  <div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 hidden">
     <div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
       <!-- Modal Header -->
       <div class="flex items-center justify-between p-6 border-b border-gray-200">
@@ -717,6 +701,116 @@
     </div>
   </div>
 
+  <!-- Search Modal -->
+  <div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full max-h-[85vh] flex flex-col">
+      <!-- Modal Header -->
+      <div class="flex items-center justify-between p-6 border-b border-gray-200">
+        <h2 class="text-2xl font-bold text-gray-900">Search Documentation</h2>
+        <button id="search-modal-close-btn"
+                class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition"
+                aria-label="Close search">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Modal Content -->
+      <div id="search-modal-content" class="flex-1 overflow-y-auto p-6">
+        <!-- Search Input -->
+        <div class="mb-4">
+          <div class="relative">
+            <input
+              type="text"
+              id="docs-search-input"
+              placeholder="Search documentation..."
+              class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+              aria-label="Search documentation"
+            />
+            <svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+          </div>
+        </div>
+
+        <!-- Filters Row -->
+        <div class="flex flex-wrap items-center gap-3 mb-4">
+          <!-- Quadrant Filter -->
+          <div class="flex-1 min-w-[200px]">
+            <label for="filter-quadrant" class="sr-only">Filter by Quadrant</label>
+            <select id="filter-quadrant" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+              <option value="">All Quadrants</option>
+              <option value="STR">Strategic</option>
+              <option value="OPS">Operational</option>
+              <option value="TAC">Tactical</option>
+              <option value="SYS">System</option>
+              <option value="STO">Storage</option>
+            </select>
+          </div>
+
+          <!-- Persistence Filter -->
+          <div class="flex-1 min-w-[200px]">
+            <label for="filter-persistence" class="sr-only">Filter by Persistence</label>
+            <select id="filter-persistence" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+              <option value="">All Persistence Levels</option>
+              <option value="HIGH">High</option>
+              <option value="MEDIUM">Medium</option>
+              <option value="LOW">Low</option>
+            </select>
+          </div>
+
+          <!-- Audience Filter -->
+          <div class="flex-1 min-w-[200px]">
+            <label for="filter-audience" class="sr-only">Filter by Audience</label>
+            <select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
+              <option value="">All Audiences</option>
+              <option value="researcher">Researcher</option>
+              <option value="implementer">Implementer</option>
+              <option value="leader">Leader</option>
+              <option value="technical">Technical</option>
+              <option value="general">General</option>
+            </select>
+          </div>
+
+          <!-- Clear Filters Button -->
+          <button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
+            Clear Filters
+          </button>
+
+          <!-- Search Tips Button -->
+          <button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Search Results Summary -->
+        <div id="search-results-summary" class="mb-4 text-sm text-gray-600 hidden">
+          <span id="search-results-count"></span>
+        </div>
+
+        <!-- Search History (Recent Searches) -->
+        <div id="search-history-container" class="mb-4 hidden">
+          <div class="text-xs text-gray-500 mb-2">Recent Searches:</div>
+          <div id="search-history" class="flex flex-wrap gap-2"></div>
+        </div>
+
+        <!-- Search Results in Modal -->
+        <div id="search-results-modal" class="mt-6 hidden">
+          <h3 class="text-lg font-semibold text-gray-900 mb-4">Search Results</h3>
+          <div id="search-results-list-modal" class="space-y-4">
+            <!-- Results will be populated here by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
   <script src="/js/components/document-cards.js?v=0.1.0.1760254958072"></script>
   <script src="/js/docs-app.js?v=0.1.0.1760254958072"></script>
   <script src="/js/docs-search-enhanced.js?v=0.1.0.1760254958072"></script>
diff --git a/public/faq.html b/public/faq.html
index aef38d8e..96bbfc8c 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -6,6 +6,17 @@
   <title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
   <meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
 
   <!-- Syntax highlighting for code blocks -->
@@ -336,6 +347,9 @@
     </div>
   </footer>
 
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
   <script src="/js/faq.js?v=0.1.0.1760254958072"></script>
 
 </body>
diff --git a/public/implementer.html b/public/implementer.html
index c5ea2285..60a99339 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -5,6 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>For Implementers | Tractatus AI Safety Framework</title>
   <meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
   <style>
     /* Accessibility: Skip link */
@@ -33,10 +44,10 @@
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center">
         <h1 class="text-5xl font-bold text-gray-900 mb-6">
-          Production-Ready<br>AI Safety
+          Reference Implementation<br>AI Safety Patterns
         </h1>
         <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
-          Integrate Tractatus framework into your AI systems with practical guides, code examples, and battle-tested patterns for real-world deployment.
+          Integrate Tractatus framework into your AI systems with practical guides, code examples, and patterns demonstrated in 6-month development project.
         </p>
         <div class="flex justify-center space-x-4">
           <a href="#quickstart" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition">
@@ -50,6 +61,19 @@
     </div>
   </div>
 
+  <!-- Development Context Warning -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-lg">
+      <p class="text-sm text-amber-900 font-medium mb-2">Development Context</p>
+      <p class="text-sm text-amber-800 mb-3">
+        Framework developed over six months in single-project context. Code examples below show reference implementation architecture. The npm package <code class="bg-amber-100 px-1 py-0.5 rounded">@tractatus/framework</code> represents planned API design, not published package. Actual implementation requires adapting patterns from this project's source code.
+      </p>
+      <p class="text-sm text-amber-800">
+        This is exploratory research demonstrating feasibility of architectural governance patterns, not production-ready commercial software.
+      </p>
+    </div>
+  </div>
+
   <!-- Deployment Architecture Guide -->
   <div class="bg-gradient-to-r from-blue-600 to-indigo-600 py-12">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -395,6 +419,14 @@
     <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
       <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">Quick Start Guide</h2>
 
+      <!-- npm Package Disclaimer -->
+      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8 rounded-r-lg">
+        <p class="text-sm text-blue-900 font-medium mb-2">⚠️ Note: Reference Implementation</p>
+        <p class="text-sm text-blue-800">
+          The code examples below show conceptual API design. The npm package <code class="bg-blue-100 px-1 py-0.5 rounded">@tractatus/framework</code> is not yet published. To implement these patterns, adapt the governance services from this project's <a href="https://github.com/AgenticGovernance/tractatus-framework" class="underline font-medium hover:text-blue-900">source code</a>.
+        </p>
+      </div>
+
       <div class="space-y-8">
         <!-- Step 1 -->
         <div class="border-l-4 border-blue-600 pl-6">
@@ -679,9 +711,9 @@ if (pressure.level === 'CRITICAL') {
   <!-- CTA Section -->
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-12 text-center text-white">
-      <h2 class="text-3xl font-bold mb-4">Ready to Implement?</h2>
+      <h2 class="text-3xl font-bold mb-4">Exploring Implementation?</h2>
       <p class="text-xl mb-8 opacity-90">
-        Join organizations building safer AI systems with architectural guarantees.
+        Explore architectural patterns for AI safety demonstrated in single-project validation.
       </p>
       <div class="flex justify-center space-x-4">
         <a href="/docs.html" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
@@ -735,5 +767,8 @@ if (pressure.level === 'CRITICAL') {
     </div>
   </footer>
 
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
 </body>
 </html>
diff --git a/public/index.html b/public/index.html
index 153f940d..8921f3f6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
   <meta name="description" content="World's first production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, guarantees.">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
   <style>
@@ -40,8 +51,8 @@
           Tractatus AI Safety Framework
         </h1>
         <p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-4xl mx-auto">
-          Architectural constraints that ensure AI systems preserve human agency—<br>
-          regardless of capability level
+          Structural constraints that require AI systems to preserve human agency<br>
+          for values decisions—tested on Claude Code
         </p>
         <div class="flex flex-col sm:flex-row gap-4 justify-center">
           <a href="/architecture.html" class="inline-block bg-white text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
@@ -50,6 +61,9 @@
           <a href="/docs.html" class="inline-block bg-blue-800 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-900 transition">
             Read Documentation
           </a>
+          <a href="/faq.html" class="inline-block bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition">
+            FAQ
+          </a>
         </div>
       </div>
     </div>
@@ -97,7 +111,7 @@
         </div>
         <div class="p-6">
           <p class="text-gray-700 mb-6">
-            Explore the theoretical foundations, formal guarantees, and scholarly context of the Tractatus framework.
+            Explore the theoretical foundations, architectural constraints, and scholarly context of the Tractatus framework.
           </p>
           <ul class="space-y-3 mb-6 text-sm">
             <li class="flex items-start">
@@ -140,7 +154,7 @@
         </div>
         <div class="p-6">
           <p class="text-gray-700 mb-6">
-            Get hands-on with implementation guides, API documentation, and production-ready code examples.
+            Get hands-on with implementation guides, API documentation, and reference code examples.
           </p>
           <ul class="space-y-3 mb-6 text-sm">
             <li class="flex items-start">
@@ -295,154 +309,49 @@
     </div>
   </section>
 
-  <!-- Experience the Framework Section -->
-  <section class="bg-gray-50 py-20" aria-labelledby="experience-framework">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <!-- Section Header -->
+  <!-- Real-World Validation Section -->
+  <section class="bg-gray-50 py-16" aria-labelledby="validation">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-12">
-        <h2 id="experience-framework" class="text-4xl font-bold text-gray-900 mb-4">Experience the Framework</h2>
-        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
-          Explore real-world incidents showing how governance structures AI behavior—from preventing technical failures to catching fabrications
+        <h2 id="validation" class="text-3xl font-bold text-gray-900 mb-4">Real-World Validation</h2>
+        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+          Framework validated in 6-month deployment across ~500 sessions with Claude Code
         </p>
       </div>
 
-      <!-- Incident Cards Grid -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
-
-        <!-- 27027 Incident - Technical -->
-        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
-          <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
-            <div class="flex items-center justify-between">
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100">
-                Technical Failure
-              </span>
-              <span class="text-blue-100 text-sm">Original Incident</span>
-            </div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">The 27027 Incident</h3>
-            <p class="text-gray-700 mb-4">
-              How pattern recognition bias causes AI to override explicit human instructions—and why this problem gets worse as models improve.
-            </p>
-            <div class="mb-6">
-              <div class="flex items-start mb-2">
-                <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Appeal:</strong> Researchers, technical teams</span>
-              </div>
-              <div class="flex items-start">
-                <svg aria-hidden="true" class="w-5 h-5 text-blue-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Shows:</strong> Cross-reference validation preventing instruction override</span>
-              </div>
-            </div>
-            <a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold">
-              View 27027 Demo
-            </a>
+      <!-- Single Featured Demo - 27027 Incident -->
+      <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden max-w-3xl mx-auto mb-8">
+        <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
+          <div class="flex items-center justify-between">
+            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-800 text-blue-100">
+              Pattern Bias Incident
+            </span>
+            <span class="text-blue-100 text-sm">Interactive Demo</span>
           </div>
         </div>
-
-        <!-- Fabrication Incident - Values -->
-        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
-          <div class="bg-gradient-to-r from-amber-500 to-orange-600 px-6 py-4">
-            <div class="flex items-center justify-between">
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-800 text-amber-100">
-                Values Failure
-              </span>
-              <span class="text-amber-100 text-sm">Reactive Governance</span>
-            </div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">AI Fabrication Incident</h3>
-            <p class="text-gray-700 mb-4">
-              Claude fabricated $3.77M in statistics and false production claims. Framework detected it, documented root causes, and created permanent safeguards.
+        <div class="p-8">
+          <h3 class="text-2xl font-bold text-gray-900 mb-3">The 27027 Incident</h3>
+          <p class="text-gray-700 mb-6">
+            Real production incident where Claude Code defaulted to port 27017 (training pattern) despite explicit user instruction to use port 27027. CrossReferenceValidator detected the conflict and blocked execution—demonstrating how pattern recognition can override instructions under context pressure.
+          </p>
+          <div class="bg-amber-50 border-l-4 border-amber-500 p-4 rounded-r-lg mb-6">
+            <p class="text-sm text-amber-900">
+              <strong>Why this matters:</strong> This failure mode gets worse as models improve—stronger pattern recognition means stronger override tendency. Architectural constraints remain necessary regardless of capability level.
             </p>
-            <div class="mb-6">
-              <div class="flex items-start mb-2">
-                <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Appeal:</strong> Leaders, advocates, implementers</span>
-              </div>
-              <div class="flex items-start">
-                <svg aria-hidden="true" class="w-5 h-5 text-amber-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Shows:</strong> Structured response turning failures into permanent learning</span>
-              </div>
-            </div>
-            <a href="/docs/case-studies/framework-in-action-oct-2025.md" class="block w-full text-center bg-amber-700 text-white py-3 rounded-lg hover:bg-amber-800 transition font-semibold">
-              Read Case Study
-            </a>
           </div>
+          <a href="/demos/27027-demo.html" class="block w-full text-center bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-semibold">
+            View Interactive Demo
+          </a>
         </div>
-
-        <!-- Security Audit - Proactive -->
-        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
-          <div class="bg-gradient-to-r from-green-500 to-emerald-600 px-6 py-4">
-            <div class="flex items-center justify-between">
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-800 text-green-100">
-                Security Prevention
-              </span>
-              <span class="text-green-100 text-sm">Proactive Governance</span>
-            </div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">Pre-Publication Security Audit</h3>
-            <p class="text-gray-700 mb-4">
-              Framework prevented publication of sensitive information (internal paths, database names, infrastructure details) before it reached GitHub.
-            </p>
-            <div class="mb-6">
-              <div class="flex items-start mb-2">
-                <svg aria-hidden="true" class="w-5 h-5 text-green-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Appeal:</strong> Security teams, implementers, compliance</span>
-              </div>
-              <div class="flex items-start">
-                <svg aria-hidden="true" class="w-5 h-5 text-green-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Shows:</strong> Proactive prevention through structured review</span>
-              </div>
-            </div>
-            <a href="/docs/case-studies/pre-publication-audit-oct-2025.md" class="block w-full text-center bg-green-700 text-white py-3 rounded-lg hover:bg-green-800 transition font-semibold">
-              View Security Audit
-            </a>
-          </div>
-        </div>
-
-        <!-- Interactive Demo - Hands-on -->
-        <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden hover-lift">
-          <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
-            <div class="flex items-center justify-between">
-              <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-purple-800 text-purple-100">
-                Interactive Demo
-              </span>
-              <span class="text-purple-100 text-sm">Hands-On Experience</span>
-            </div>
-          </div>
-          <div class="p-6">
-            <h3 class="text-2xl font-bold text-gray-900 mb-3">Live Framework Demonstration</h3>
-            <p class="text-gray-700 mb-4">
-              Try the six core components yourself: classify instructions, test boundary enforcement, monitor context pressure, validate cross-references, and explore values deliberation.
-            </p>
-            <div class="mb-6">
-              <div class="flex items-start mb-2">
-                <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Appeal:</strong> All audiences—learn by doing</span>
-              </div>
-              <div class="flex items-start">
-                <svg aria-hidden="true" class="w-5 h-5 text-purple-600 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                <span class="text-sm text-gray-600"><strong>Shows:</strong> All six framework components in action</span>
-              </div>
-            </div>
-            <a href="/demos/tractatus-demo.html" class="block w-full text-center bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition font-semibold">
-              Try Interactive Demo
-            </a>
-          </div>
-        </div>
-
       </div>
 
-      <!-- Additional Resources CTA -->
-      <div class="text-center bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">Want to dive deeper?</h3>
-        <p class="text-gray-700 mb-6 max-w-2xl mx-auto">
-          Explore complete case studies, research topics, and implementation guides in our documentation
+      <!-- Additional Resources Link -->
+      <div class="text-center">
+        <p class="text-gray-600 mb-4">
+          Additional case studies and research findings documented in technical papers
         </p>
-        <a href="/docs.html" class="inline-block bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition">
-          Browse All Documentation
+        <a href="/docs.html?category=case-studies" class="inline-block text-blue-600 hover:text-blue-700 font-medium">
+          Browse Case Studies →
         </a>
       </div>
 
@@ -458,7 +367,7 @@
         <div>
           <h3 class="text-white font-semibold mb-4">Tractatus Framework</h3>
           <p class="text-sm">
-            World's first production implementation of architectural AI safety constraints for human agency preservation.
+            Reference implementation of architectural AI safety constraints—structural governance validated in single-project deployment.
           </p>
         </div>
         <div>
@@ -502,5 +411,8 @@
     </div>
   </footer>
 
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
 </body>
 </html>
diff --git a/public/js/version-manager.js b/public/js/version-manager.js
new file mode 100644
index 00000000..9bf2d6f3
--- /dev/null
+++ b/public/js/version-manager.js
@@ -0,0 +1,311 @@
+/**
+ * Tractatus Version Manager
+ * - Registers service worker
+ * - Checks for updates every hour
+ * - Shows update notifications
+ * - Manages PWA install prompts
+ */
+
+class VersionManager {
+  constructor() {
+    this.serviceWorker = null;
+    this.deferredInstallPrompt = null;
+    this.updateCheckInterval = null;
+    this.currentVersion = null;
+
+    this.init();
+  }
+
+  async init() {
+    // Only run in browsers that support service workers
+    if (!('serviceWorker' in navigator)) {
+      console.log('[VersionManager] Service workers not supported');
+      return;
+    }
+
+    try {
+      // Register service worker
+      await this.registerServiceWorker();
+
+      // Check for updates immediately
+      await this.checkForUpdates();
+
+      // Check for updates every hour
+      this.updateCheckInterval = setInterval(() => {
+        this.checkForUpdates();
+      }, 3600000); // 1 hour
+
+      // Listen for PWA install prompt
+      this.setupInstallPrompt();
+
+      // Listen for service worker messages
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        if (event.data.type === 'UPDATE_AVAILABLE') {
+          this.showUpdateNotification(event.data);
+        }
+      });
+
+    } catch (error) {
+      console.error('[VersionManager] Initialization failed:', error);
+    }
+  }
+
+  async registerServiceWorker() {
+    try {
+      const registration = await navigator.serviceWorker.register('/service-worker.js');
+      this.serviceWorker = registration;
+      console.log('[VersionManager] Service worker registered');
+
+      // Check for updates when service worker updates
+      registration.addEventListener('updatefound', () => {
+        const newWorker = registration.installing;
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            // New service worker available
+            this.showUpdateNotification({
+              updateAvailable: true,
+              currentVersion: this.currentVersion,
+              serverVersion: 'latest'
+            });
+          }
+        });
+      });
+
+    } catch (error) {
+      console.error('[VersionManager] Service worker registration failed:', error);
+    }
+  }
+
+  async checkForUpdates() {
+    try {
+      const response = await fetch('/version.json', { cache: 'no-store' });
+      const versionInfo = await response.json();
+
+      // Get current version from localStorage or default
+      const storedVersion = localStorage.getItem('tractatus_version') || '0.0.0';
+      this.currentVersion = storedVersion;
+
+      if (storedVersion !== versionInfo.version) {
+        console.log('[VersionManager] Update available:', versionInfo.version);
+        this.showUpdateNotification({
+          updateAvailable: true,
+          currentVersion: storedVersion,
+          serverVersion: versionInfo.version,
+          changelog: versionInfo.changelog,
+          forceUpdate: versionInfo.forceUpdate
+        });
+      }
+
+    } catch (error) {
+      console.error('[VersionManager] Version check failed:', error);
+    }
+  }
+
+  showUpdateNotification(versionInfo) {
+    // Don't show if notification already visible
+    if (document.getElementById('tractatus-update-notification')) {
+      return;
+    }
+
+    const notification = document.createElement('div');
+    notification.id = 'tractatus-update-notification';
+    notification.className = 'fixed bottom-0 left-0 right-0 bg-blue-600 text-white px-4 py-3 shadow-lg z-50 transform transition-transform duration-300 translate-y-full';
+    notification.innerHTML = `
+      <div class="max-w-7xl mx-auto flex items-center justify-between flex-wrap gap-4">
+        <div class="flex items-start flex-1">
+          <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <div>
+            <p class="font-semibold">Update Available</p>
+            <p class="text-sm text-blue-100">
+              A new version of Tractatus Framework is available
+              ${versionInfo.serverVersion ? `(v${versionInfo.serverVersion})` : ''}
+            </p>
+            ${versionInfo.changelog ? `
+              <details class="mt-2 text-sm">
+                <summary class="cursor-pointer text-blue-100 hover:text-white">What's new?</summary>
+                <ul class="mt-2 ml-4 list-disc text-blue-100">
+                  ${versionInfo.changelog.map(item => `<li>${item}</li>`).join('')}
+                </ul>
+              </details>
+            ` : ''}
+          </div>
+        </div>
+        <div class="flex gap-3">
+          ${versionInfo.forceUpdate ? `
+            <button onclick="window.versionManager.applyUpdate()" class="bg-white text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition">
+              Update Now
+            </button>
+          ` : `
+            <button onclick="window.versionManager.dismissUpdate()" class="text-white hover:text-blue-100 transition px-3">
+              Later
+            </button>
+            <button onclick="window.versionManager.applyUpdate()" class="bg-white text-blue-600 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition">
+              Reload
+            </button>
+          `}
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(notification);
+
+    // Animate in
+    setTimeout(() => {
+      notification.classList.remove('translate-y-full');
+    }, 100);
+
+    // Auto-reload for forced updates after 10 seconds
+    if (versionInfo.forceUpdate) {
+      setTimeout(() => {
+        this.applyUpdate();
+      }, 10000);
+    }
+  }
+
+  applyUpdate() {
+    // Store new version
+    fetch('/version.json', { cache: 'no-store' })
+      .then(response => response.json())
+      .then(versionInfo => {
+        localStorage.setItem('tractatus_version', versionInfo.version);
+
+        // Tell service worker to skip waiting
+        if (this.serviceWorker) {
+          this.serviceWorker.waiting?.postMessage({ type: 'SKIP_WAITING' });
+        }
+
+        // Reload page
+        window.location.reload();
+      });
+  }
+
+  dismissUpdate() {
+    const notification = document.getElementById('tractatus-update-notification');
+    if (notification) {
+      notification.classList.add('translate-y-full');
+      setTimeout(() => {
+        notification.remove();
+      }, 300);
+    }
+  }
+
+  setupInstallPrompt() {
+    // Listen for beforeinstallprompt event
+    window.addEventListener('beforeinstallprompt', (e) => {
+      // Prevent Chrome 67 and earlier from automatically showing the prompt
+      e.preventDefault();
+
+      // Stash the event so it can be triggered later
+      this.deferredInstallPrompt = e;
+
+      // Check if user has dismissed install prompt before
+      const dismissed = sessionStorage.getItem('install_prompt_dismissed');
+      if (!dismissed) {
+        // Show install prompt after 30 seconds
+        setTimeout(() => {
+          this.showInstallPrompt();
+        }, 30000);
+      }
+    });
+
+    // Detect if app was installed
+    window.addEventListener('appinstalled', () => {
+      console.log('[VersionManager] PWA installed');
+      this.deferredInstallPrompt = null;
+
+      // Hide install prompt if visible
+      const prompt = document.getElementById('tractatus-install-prompt');
+      if (prompt) {
+        prompt.remove();
+      }
+    });
+  }
+
+  showInstallPrompt() {
+    if (!this.deferredInstallPrompt) {
+      return;
+    }
+
+    // Don't show if already installed or on iOS Safari (handles differently)
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      return;
+    }
+
+    const prompt = document.createElement('div');
+    prompt.id = 'tractatus-install-prompt';
+    prompt.className = 'fixed bottom-0 left-0 right-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-4 py-3 shadow-lg z-50 transform transition-transform duration-300 translate-y-full';
+    prompt.innerHTML = `
+      <div class="max-w-7xl mx-auto flex items-center justify-between flex-wrap gap-4">
+        <div class="flex items-start flex-1">
+          <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+          </svg>
+          <div>
+            <p class="font-semibold">Install Tractatus App</p>
+            <p class="text-sm text-purple-100">
+              Add to your home screen for quick access and offline support
+            </p>
+          </div>
+        </div>
+        <div class="flex gap-3">
+          <button onclick="window.versionManager.dismissInstallPrompt()" class="text-white hover:text-purple-100 transition px-3">
+            Not Now
+          </button>
+          <button onclick="window.versionManager.installApp()" class="bg-white text-purple-600 px-6 py-2 rounded-lg font-semibold hover:bg-purple-50 transition">
+            Install
+          </button>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(prompt);
+
+    // Animate in
+    setTimeout(() => {
+      prompt.classList.remove('translate-y-full');
+    }, 100);
+  }
+
+  async installApp() {
+    if (!this.deferredInstallPrompt) {
+      return;
+    }
+
+    // Show the install prompt
+    this.deferredInstallPrompt.prompt();
+
+    // Wait for the user to respond to the prompt
+    const { outcome } = await this.deferredInstallPrompt.userChoice;
+    console.log(`[VersionManager] User response: ${outcome}`);
+
+    // Clear the deferredInstallPrompt
+    this.deferredInstallPrompt = null;
+
+    // Hide the prompt
+    this.dismissInstallPrompt();
+  }
+
+  dismissInstallPrompt() {
+    const prompt = document.getElementById('tractatus-install-prompt');
+    if (prompt) {
+      prompt.classList.add('translate-y-full');
+      setTimeout(() => {
+        prompt.remove();
+      }, 300);
+    }
+
+    // Remember dismissal for this session
+    sessionStorage.setItem('install_prompt_dismissed', 'true');
+  }
+}
+
+// Initialize version manager on page load
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    window.versionManager = new VersionManager();
+  });
+} else {
+  window.versionManager = new VersionManager();
+}
diff --git a/public/leader.html b/public/leader.html
index 5d5c2446..9ce5098e 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -3,852 +3,608 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>For AI Leaders | Tractatus AI Safety Framework</title>
-  <meta name="description" content="Strategic AI governance for executives and research directors. Structural approach to AI safety, compliance, and risk mitigation.">
+  <title>For Decision-Makers | Tractatus AI Safety Framework</title>
+  <meta name="description" content="Structural AI governance for organisations deploying LLM systems at scale. Research framework addressing architectural gaps in AI safety.">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
   <style>
-    .gradient-text {
-      background: linear-gradient(120deg, #d97706 0%, #f59e0b 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
     .hover-lift { transition: all 0.3s ease; }
-    .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }
-
-    /* Skip link & focus */
+    .hover-lift:hover { transform: translateY(-2px); }
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
-    a:focus, button:focus {
-      outline: 3px solid #f59e0b;
-      outline-offset: 2px;
+    a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
+
+    /* Accordion styles */
+    .accordion-button {
+      cursor: pointer;
+      user-select: none;
+    }
+    .accordion-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease-out;
+    }
+    .accordion-content.active {
+      max-height: 2000px;
+      transition: max-height 0.5s ease-in;
+    }
+    .accordion-icon {
+      transition: transform 0.3s ease;
+    }
+    .accordion-icon.active {
+      transform: rotate(180deg);
     }
-    a:focus:not(:focus-visible) { outline: none; }
-    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
   </style>
 </head>
 <body class="bg-white">
 
-  <!-- Skip Link for Keyboard Navigation -->
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
-  <!-- Navigation -->
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
-  <!-- Hero Section -->
-  <div class="bg-gradient-to-br from-gray-50 to-amber-50 pt-20 pb-24">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center max-w-4xl mx-auto">
-        <div class="inline-flex items-center bg-amber-100 text-amber-800 px-4 py-2 rounded-full text-sm font-semibold mb-6">
-          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
-          </svg>
-          Research Framework for AI Safety Governance
-        </div>
-
-        <h1 class="text-5xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight">
-          Structural AI Safety<br>for <span class="gradient-text">Strategic Leaders</span>
-        </h1>
-
-        <p class="text-xl text-gray-600 mb-8 leading-relaxed">
-          A governance framework designed to help organizations navigate AI risks,<br class="hidden md:inline">
-          compliance requirements, and safety challenges through architectural controls.
-        </p>
-
-        <div class="flex justify-center gap-4 mb-12">
-          <a href="#readiness-assessment" class="bg-amber-700 text-white px-8 py-4 rounded-lg font-semibold hover:bg-amber-800 transition shadow-lg inline-flex items-center">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
-            </svg>
-            Assess Your Organization
-          </a>
-          <a href="/docs.html" class="bg-white text-gray-800 px-8 py-4 rounded-lg font-semibold border-2 border-gray-300 hover:border-amber-600 hover:text-amber-800 transition">
-            Read Documentation
-          </a>
-        </div>
+  <!-- Header -->
+  <div class="bg-gray-50 border-b border-gray-200 py-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6">
+        Research Framework • Early Development
       </div>
-    </div>
-  </div>
-
-  <!-- Strategic Challenges Section -->
-  <div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-    <div class="text-center mb-16">
-      <h2 class="text-4xl font-bold text-gray-900 mb-4">Strategic Challenges Tractatus Addresses</h2>
-      <p class="text-gray-600 text-lg max-w-2xl mx-auto">
-        Organizations deploying AI systems face regulatory, technical, and reputational risks.<br>Tractatus offers a structural approach to mitigation.
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">
+        Tractatus: Architectural Governance for LLM Systems
+      </h1>
+      <p class="text-lg text-gray-600 leading-relaxed">
+        A governance framework addressing structural gaps in AI safety through external architectural controls. Designed for organisations deploying large language models at scale where conventional oversight mechanisms prove insufficient.
       </p>
     </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-      <!-- Regulatory Compliance -->
-      <div class="bg-white rounded-2xl border-2 border-gray-200 p-8 hover-lift">
-        <div class="w-16 h-16 bg-red-100 rounded-xl flex items-center justify-center mb-6">
-          <svg class="w-8 h-8 text-red-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
-          </svg>
-        </div>
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">Regulatory Compliance</h3>
-        <div class="bg-red-50 rounded-lg p-4 mb-4">
-          <div class="text-3xl font-bold text-red-700">€35M</div>
-          <div class="text-sm text-red-700">EU AI Act Maximum Fine</div>
-        </div>
-        <ul class="space-y-3 text-gray-700">
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-red-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Designed to align with EU AI Act requirements</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-red-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Architectural controls for risk management</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-red-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Auditable decision-making processes</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Technical Risk Mitigation -->
-      <div class="bg-white rounded-2xl border-2 border-amber-500 p-8 hover-lift relative">
-        <div class="absolute top-0 right-0 bg-amber-500 text-white px-3 py-1 rounded-bl-lg rounded-tr-xl text-xs font-bold">
-          CORE VALUE
-        </div>
-        <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center mb-6">
-          <svg class="w-8 h-8 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-          </svg>
-        </div>
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">Technical Risk Mitigation</h3>
-        <div class="bg-green-50 rounded-lg p-4 mb-4">
-          <div class="text-3xl font-bold text-green-700">6 Services</div>
-          <div class="text-sm text-green-700">Governance Components</div>
-        </div>
-        <ul class="space-y-3 text-gray-700">
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-green-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>BoundaryEnforcer for values alignment</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-green-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>CrossReferenceValidator for consistency</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-green-700 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>ContextPressureMonitor for session management</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Strategic Positioning -->
-      <div class="bg-white rounded-2xl border-2 border-gray-200 p-8 hover-lift">
-        <div class="w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
-          <svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-          </svg>
-        </div>
-        <h3 class="text-2xl font-bold text-gray-900 mb-4">Early-Stage Research</h3>
-        <div class="bg-blue-50 rounded-lg p-4 mb-4">
-          <div class="text-3xl font-bold text-blue-700">Open</div>
-          <div class="text-sm text-blue-600">Research Framework</div>
-        </div>
-        <ul class="space-y-3 text-gray-700">
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Development framework for AI governance</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Proof-of-concept for LLM safety patterns</span>
-          </li>
-          <li class="flex items-start">
-            <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-            <span>Foundation for future governance systems</span>
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 
-  <!-- Strategic Readiness Assessment -->
-  <div id="readiness-assessment" class="bg-white py-20 border-t border-gray-200">
-    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-12">
-        <h2 class="text-4xl font-bold text-gray-900 mb-4">AI Governance Readiness Assessment</h2>
-        <p class="text-gray-600 text-lg max-w-3xl mx-auto">
-          Before implementing governance frameworks, organizations need honest answers to difficult questions.<br>
-          This assessment helps identify gaps, risks, and organizational readiness challenges.
+  <!-- Main Content -->
+  <div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+
+    <!-- Problem Statement -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">The Governance Gap</h2>
+      <div class="prose prose-gray max-w-none">
+        <p class="text-gray-700 mb-4">
+          Current AI governance approaches—policy documents, training programmes, ethical guidelines—rely on voluntary compliance. LLM systems can bypass these controls simply by not invoking them. When an AI agent needs to check a policy, it must choose to do so. When it should escalate a decision to human oversight, it must recognise that obligation.
+        </p>
+        <p class="text-gray-700 mb-4">
+          This creates a structural problem: governance exists only insofar as the AI acknowledges it. For organisations subject to EU AI Act Article 14 (human oversight requirements) or deploying AI in high-stakes domains, this voluntary model is inadequate.
+        </p>
+        <p class="text-gray-700">
+          Tractatus explores whether governance can be made architecturally external—difficult to bypass not through better prompts, but through system design that places control points outside the AI's discretion.
         </p>
       </div>
+    </section>
 
-      <!-- Assessment Categories -->
-      <div class="space-y-12">
+    <!-- Technical Approach (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Architectural Approach</h2>
 
-        <!-- Category 1: Current AI Usage -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Current AI Tool Inventory</h3>
-              <p class="text-gray-600 mb-6">Do you have clear visibility into what AI systems are already in use?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-3 font-bold">□</span>
-                  <span>Have you catalogued all AI tools currently used across departments (ChatGPT, Claude, Copilot, internal LLMs, etc.)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-3 font-bold">□</span>
-                  <span>Do you know which employees are using AI tools for customer-facing communications, code generation, or decision support?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-3 font-bold">□</span>
-                  <span>Can you identify which AI interactions involve proprietary data, customer information, or confidential business intelligence?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-3 font-bold">□</span>
-                  <span>Do you have visibility into shadow AI usage (employees using personal accounts for work tasks)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-3 font-bold">□</span>
-                  <span>Have you documented which third-party vendors are using AI in services they provide to you?</span>
-                </li>
-              </ul>
-            </div>
-          </div>
+      <!-- Three-Layer Architecture Card -->
+      <div class="border border-gray-300 rounded-lg mb-4">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('arch-layers')">
+          <h3 class="font-semibold text-gray-900">Three-Layer Architecture</h3>
+          <svg id="arch-layers-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
         </div>
-
-        <!-- Category 2: Planned Deployment -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-              </svg>
+        <div id="arch-layers-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-3 text-sm text-gray-700">
+            <div class="flex gap-3">
+              <span class="font-mono text-gray-500">1.</span>
+              <div>
+                <strong>Agent Runtime Layer</strong> — Any LLM system (Claude Code, Copilot, custom agents, LangChain, CrewAI). The AI system being governed.
+              </div>
             </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Strategic AI Deployment Plans</h3>
-              <p class="text-gray-600 mb-6">What are you planning to build, and have you assessed the governance implications?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-purple-600 mr-3 font-bold">□</span>
-                  <span>Have you prioritized AI initiatives by risk level (customer-facing vs. internal, high-stakes vs. low-stakes)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-purple-600 mr-3 font-bold">□</span>
-                  <span>For each planned AI system, have you identified who is accountable when it makes a mistake or causes harm?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-purple-600 mr-3 font-bold">□</span>
-                  <span>Do you have criteria for determining which decisions should remain human-controlled vs. AI-assisted vs. fully automated?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-purple-600 mr-3 font-bold">□</span>
-                  <span>Have you evaluated whether your planned AI deployments fall under EU AI Act "high-risk" categories?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-purple-600 mr-3 font-bold">□</span>
-                  <span>Can you articulate what "safe failure" looks like for each planned AI system?</span>
-                </li>
-              </ul>
+            <div class="flex gap-3">
+              <span class="font-mono text-gray-500">2.</span>
+              <div>
+                <strong>Governance Layer</strong> — Six autonomous services that intercept, validate, and document AI operations. External to the AI runtime.
+              </div>
             </div>
-          </div>
-        </div>
-
-        <!-- Category 3: Workflow Integration -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Workflow & Process Integration</h3>
-              <p class="text-gray-600 mb-6">How will AI fit into existing processes, and what breaks when it fails?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Have you mapped out which human roles will shift from "doer" to "reviewer/validator" of AI output?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Do you have processes to detect when employees are blindly accepting AI recommendations without validation?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Can your organization sustain critical operations if AI systems become unavailable for hours or days?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Have you considered the handoff points between AI-generated work and human-controlled processes (e.g., draft→review→approval)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Do you know which workflows will require sequential AI operations, and how errors compound across multiple AI steps?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-green-700 mr-3 font-bold">□</span>
-                  <span>Have you assessed whether introducing AI will create new bottlenecks (e.g., senior staff spending all day reviewing AI output)?</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <!-- Category 4: Governance & Accountability -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-red-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Decision Authority & Boundaries</h3>
-              <p class="text-gray-600 mb-6">Who decides what AI can and cannot do, and how are those boundaries enforced?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-red-700 mr-3 font-bold">□</span>
-                  <span>Have you defined which types of decisions AI systems are prohibited from making (even with human oversight)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-red-700 mr-3 font-bold">□</span>
-                  <span>Do you have a governance board or designated owner responsible for AI safety and compliance decisions?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-red-700 mr-3 font-bold">□</span>
-                  <span>Can you enforce AI usage policies technically (not just via policy documents employees may ignore)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-red-700 mr-3 font-bold">□</span>
-                  <span>Have you established clear escalation paths when AI systems encounter edge cases or ambiguous situations?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-red-700 mr-3 font-bold">□</span>
-                  <span>Do you have audit mechanisms to detect policy violations or unauthorized AI usage patterns?</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <!-- Category 5: Risk & Incident Response -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Incident Preparedness</h3>
-              <p class="text-gray-600 mb-6">What happens when AI systems fail, hallucinate, or cause harm?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-amber-700 mr-3 font-bold">□</span>
-                  <span>Do you have incident response procedures specifically for AI failures (separate from general IT incidents)?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-amber-700 mr-3 font-bold">□</span>
-                  <span>Can you trace AI-generated content or decisions back to specific prompts, model versions, and responsible parties?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-amber-700 mr-3 font-bold">□</span>
-                  <span>Have you war-gamed scenarios where AI provides plausible-sounding but incorrect information that leads to business harm?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-amber-700 mr-3 font-bold">□</span>
-                  <span>Do you have kill switches or rollback procedures to disable AI systems that are behaving unpredictably?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-amber-700 mr-3 font-bold">□</span>
-                  <span>Have you assessed your liability exposure if AI systems discriminate, leak data, or violate regulations?</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <!-- Category 6: Organizational Culture -->
-        <div class="bg-gray-50 rounded-xl p-8">
-          <div class="flex items-start gap-4 mb-6">
-            <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-2xl font-bold text-gray-900 mb-4">Human & Cultural Readiness</h3>
-              <p class="text-gray-600 mb-6">Is your organization culturally prepared for the messy reality of AI governance?</p>
-              <ul class="space-y-3 text-gray-700">
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Have you addressed employee fears about job displacement or skill obsolescence honestly?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Do your teams have the skills to critically evaluate AI output, or do they lack domain expertise to spot errors?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Are employees empowered to challenge or override AI recommendations without career risk?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Have you created incentives that reward thoughtful AI use over speed or cost savings alone?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Does your organization have realistic expectations about AI limitations, or is there pressure to treat it as infallible?</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-indigo-600 mr-3 font-bold">□</span>
-                  <span>Have you allocated time and resources for governance work, or is it expected "on top of" existing responsibilities?</span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-      </div>
-
-      <!-- Assessment Conclusion -->
-      <div class="mt-12 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl p-8 border-l-4 border-amber-500">
-        <h3 class="text-xl font-bold text-gray-900 mb-4">What Your Answers Reveal</h3>
-        <div class="space-y-4 text-gray-700">
-          <p>
-            <strong>If you checked most boxes:</strong> You're ahead of most organizations but likely uncovering how complex AI governance truly is. The hard work is implementation and cultural change.
-          </p>
-          <p>
-            <strong>If you checked some boxes:</strong> You have awareness but significant gaps. These gaps represent risk, but also clarity about where to focus governance efforts.
-          </p>
-          <p>
-            <strong>If you checked few boxes:</strong> You're in good company—most organizations are here. The challenge is building governance capability while AI deployment accelerates around you.
-          </p>
-          <p class="text-sm text-gray-600 italic pt-4 border-t border-amber-200">
-            Note: This assessment is designed to provoke strategic thinking, not to sell you a solution. Effective AI governance requires organizational commitment, not just technology purchases. Tractatus is a research framework exploring architectural approaches to some of these challenges—it is not a comprehensive answer to all the questions above.
-          </p>
-        </div>
-      </div>
-
-    </div>
-  </div>
-
-  <!-- Framework Overview -->
-  <div id="framework-overview" class="bg-gradient-to-br from-gray-50 to-white py-20">
-    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-12">
-        <h2 class="text-4xl font-bold text-gray-900 mb-4">How Tractatus Works</h2>
-        <p class="text-gray-600 text-lg">
-          Six integrated components work together to provide structural AI governance
-        </p>
-      </div>
-
-      <div class="space-y-8">
-        <!-- Component 1 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">BoundaryEnforcer</h3>
-              <p class="text-gray-600">Prevents AI systems from making values decisions without human approval. Ensures critical decisions remain under human control.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Component 2 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">InstructionPersistenceClassifier</h3>
-              <p class="text-gray-600">Maintains organizational directives across AI interactions. Helps reduce instruction drift and inconsistency over time.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Component 3 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">CrossReferenceValidator</h3>
-              <p class="text-gray-600">Validates AI decisions against established policies. Designed to detect potential conflicts before they occur.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Component 4 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">ContextPressureMonitor</h3>
-              <p class="text-gray-600">Tracks AI session complexity and token usage. Helps prevent context degradation and maintains decision quality.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Component 5 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">MetacognitiveVerifier</h3>
-              <p class="text-gray-600">Validates reasoning quality for complex operations. Designed to improve decision coherence and reduce errors.</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Component 6 -->
-        <div class="bg-white rounded-xl border border-gray-200 p-6 hover-lift">
-          <div class="flex items-start gap-4">
-            <div class="flex-shrink-0 w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">PluralisticDeliberationOrchestrator</h3>
-              <p class="text-gray-600">Facilitates multi-stakeholder deliberation when values conflicts occur. Ensures non-hierarchical engagement and documents moral remainder.</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Executive Stakeholder Impact -->
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
-    <div class="text-center mb-12">
-      <h2 class="text-4xl font-bold text-gray-900 mb-4">Stakeholder Considerations</h2>
-      <p class="text-gray-600 text-lg">How different leadership roles may evaluate Tractatus</p>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      <!-- CEO -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">CEO / Founder</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-purple-600 mr-2">•</span>
-            <span>Structural approach to AI risk management</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-purple-600 mr-2">•</span>
-            <span>Potential competitive differentiation through governance</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-purple-600 mr-2">•</span>
-            <span>Framework for responsible AI deployment</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- CFO -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-green-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">CFO</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-green-700 mr-2">•</span>
-            <span>Designed to help reduce regulatory fine risk (€35M max)</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-green-700 mr-2">•</span>
-            <span>May reduce AI project failure costs (42% industry avg)</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-green-700 mr-2">•</span>
-            <span>Research-stage framework (ROI not yet established)</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- CTO -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">CTO / Engineering</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-blue-600 mr-2">•</span>
-            <span>Architectural patterns for LLM safety controls</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-blue-600 mr-2">•</span>
-            <span>Reference implementation for governance agents</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-blue-600 mr-2">•</span>
-            <span>Adaptable to organizational tech stacks</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- CISO -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-red-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">CISO / Security</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-red-700 mr-2">•</span>
-            <span>Controls for AI decision boundaries</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-red-700 mr-2">•</span>
-            <span>Audit trails for AI actions</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-red-700 mr-2">•</span>
-            <span>Risk mitigation through architectural controls</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Legal / Compliance -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">Legal / Compliance</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-amber-700 mr-2">•</span>
-            <span>Designed for EU AI Act alignment</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-amber-700 mr-2">•</span>
-            <span>Auditable decision-making framework</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-amber-700 mr-2">•</span>
-            <span>Documented governance processes</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Product / AI -->
-      <div class="bg-white rounded-xl border border-gray-200 p-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
-            <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
-            </svg>
-          </div>
-          <h3 class="text-lg font-bold text-gray-900">Product / AI Teams</h3>
-        </div>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="text-indigo-600 mr-2">•</span>
-            <span>Framework for safer AI feature deployment</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-indigo-600 mr-2">•</span>
-            <span>Designed to reduce failure modes</span>
-          </li>
-          <li class="flex items-start">
-            <span class="text-indigo-600 mr-2">•</span>
-            <span>Patterns for responsible AI innovation</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <!-- Resources & Documentation -->
-  <div class="bg-gray-50 py-20">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-12">
-        <h2 class="text-4xl font-bold text-gray-900 mb-4">Explore the Framework</h2>
-        <p class="text-gray-600 text-lg">Technical documentation and implementation resources</p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <a href="/docs.html" class="bg-white rounded-xl border-2 border-gray-200 p-8 hover-lift block">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">Framework Documentation</h3>
-              <p class="text-gray-600">Complete technical specifications, architecture guides, and implementation patterns</p>
-            </div>
-          </div>
-        </a>
-
-        <a href="/implementer.html" class="bg-white rounded-xl border-2 border-gray-200 p-8 hover-lift block">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">Implementation Guide</h3>
-              <p class="text-gray-600">Step-by-step integration guide for developers and technical teams</p>
-            </div>
-          </div>
-        </a>
-
-        <a href="/researcher.html" class="bg-white rounded-xl border-2 border-gray-200 p-8 hover-lift block">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">Research & Case Studies</h3>
-              <p class="text-gray-600">Academic foundations, failure mode analysis, and governance research</p>
-            </div>
-          </div>
-        </a>
-
-        <a href="/about.html" class="bg-white rounded-xl border-2 border-gray-200 p-8 hover-lift block">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-6 h-6 text-amber-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">About Tractatus</h3>
-              <p class="text-gray-600">Core values, principles, and the philosophy behind the framework</p>
-            </div>
-          </div>
-        </a>
-
-        <a href="/downloads/ai-governance-business-case-template.pdf" target="_blank" class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl border-2 border-amber-300 p-8 hover-lift block">
-          <div class="flex items-start gap-4">
-            <div class="w-12 h-12 bg-amber-500 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-              </svg>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-bold text-gray-900 mb-2">Business Case Template</h3>
-              <p class="text-gray-700 font-medium">Structured assessment template for evaluating AI governance needs with your organization's data</p>
-              <div class="mt-3 inline-flex items-center text-sm font-semibold text-amber-700">
-                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
-                </svg>
-                Download PDF Template
+            <div class="flex gap-3">
+              <span class="font-mono text-gray-500">3.</span>
+              <div>
+                <strong>Persistent Storage Layer</strong> — Immutable audit logs, governance rules, instruction history. Cannot be altered by AI prompts.
               </div>
             </div>
           </div>
-        </a>
+        </div>
       </div>
-    </div>
-  </div>
 
-  <!-- CTA Section -->
-  <div class="bg-gradient-to-br from-amber-700 to-orange-600 py-16">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-      <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
-        Questions About Your Organization?
-      </h2>
-      <p class="text-xl text-amber-50 mb-8">
-        Start with honest assessment of where you are, not aspirational visions of where you want to be
-      </p>
-      <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <a href="#readiness-assessment" class="bg-white text-amber-700 px-8 py-4 rounded-lg font-semibold hover:bg-amber-50 transition shadow-lg inline-flex items-center justify-center">
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
+      <!-- Six Governance Services Card -->
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('services')">
+          <h3 class="font-semibold text-gray-900">Six Governance Services</h3>
+          <svg id="services-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
           </svg>
-          Review Assessment Questions
+        </div>
+        <div id="services-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-3 text-sm">
+            <div class="border-l-2 border-amber-500 pl-4">
+              <div class="font-semibold text-gray-900">BoundaryEnforcer</div>
+              <div class="text-gray-600">Blocks AI from making values decisions without human approval. Enforces decision boundaries through architectural controls.</div>
+            </div>
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900">InstructionPersistenceClassifier</div>
+              <div class="text-gray-600">Prevents pattern bias from overriding explicit instructions. Stores organisational directives external to AI context.</div>
+            </div>
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900">CrossReferenceValidator</div>
+              <div class="text-gray-600">Validates AI actions against stored policies before execution. Detects conflicts with established rules.</div>
+            </div>
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900">ContextPressureMonitor</div>
+              <div class="text-gray-600">Tracks session complexity, token usage, conversation length. Detects degradation in decision quality.</div>
+            </div>
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900">MetacognitiveVerifier</div>
+              <div class="text-gray-600">Validates reasoning quality before complex operations. Self-checks alignment, coherence, alternatives.</div>
+            </div>
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900">PluralisticDeliberationOrchestrator</div>
+              <div class="text-gray-600">Facilitates multi-stakeholder deliberation for values conflicts. Non-hierarchical engagement with documented dissent.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Governance Capabilities Demonstrations -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Governance Capabilities</h2>
+      <p class="text-sm text-gray-600 mb-6">
+        Three interactive demonstrations showing governance infrastructure in operation. These show mechanisms, not fictional scenarios.
+      </p>
+
+      <!-- Demo 1: Audit Trail & Compliance Evidence -->
+      <div class="border border-gray-300 rounded-lg mb-4">
+        <div class="accordion-button bg-gradient-to-r from-blue-50 to-indigo-50 p-5 flex justify-between items-center" onclick="toggleAccordion('demo-audit')">
+          <div>
+            <h3 class="font-semibold text-gray-900">Audit Trail & Compliance Evidence Generation</h3>
+            <p class="text-sm text-gray-600 mt-1">Immutable logging, evidence extraction, regulatory reporting</p>
+          </div>
+          <svg id="demo-audit-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="demo-audit-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200">
+            <div class="bg-white rounded border border-gray-200 p-4 mb-4">
+              <h4 class="text-sm font-semibold text-gray-900 mb-3">Sample Audit Log Structure</h4>
+              <pre class="text-xs font-mono bg-gray-50 p-3 rounded overflow-x-auto text-gray-700"><code>{
+  "timestamp": "2025-10-13T14:23:17.482Z",
+  "session_id": "sess_2025-10-13-001",
+  "event_type": "BOUNDARY_CHECK",
+  "service": "BoundaryEnforcer",
+  "decision": "BLOCKED",
+  "reason": "Values decision requires human approval",
+  "context": {
+    "domain": "cost_vs_safety_tradeoff",
+    "ai_recommendation": "[redacted]",
+    "governance_rule": "TRA-OPS-0003"
+  },
+  "human_escalation": {
+    "required": true,
+    "notified": ["senior_engineer@org.com"],
+    "status": "pending_approval"
+  },
+  "compliance_tags": ["EU_AI_ACT_Article14", "human_oversight"]
+}</code></pre>
+            </div>
+
+            <div class="space-y-3 text-sm text-gray-700">
+              <div class="bg-blue-50 border-l-4 border-blue-500 p-3">
+                <strong class="text-blue-900">Immutability:</strong> <span class="text-blue-800">Audit logs stored in append-only database. AI cannot modify or delete entries.</span>
+              </div>
+              <div class="bg-green-50 border-l-4 border-green-500 p-3">
+                <strong class="text-green-900">Compliance Evidence:</strong> <span class="text-green-800">Automatic tagging with regulatory requirements (EU AI Act Article 14, GDPR Article 22, etc.)</span>
+              </div>
+              <div class="bg-amber-50 border-l-4 border-amber-500 p-3">
+                <strong class="text-amber-900">Export Capabilities:</strong> <span class="text-amber-800">Generate compliance reports for regulators showing human oversight enforcement</span>
+              </div>
+            </div>
+
+            <div class="mt-4 pt-4 border-t border-gray-200">
+              <p class="text-xs text-gray-600">
+                When regulator asks "How do you prove effective human oversight at scale?", this audit trail provides structural evidence independent of AI cooperation.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Demo 2: Continuous Improvement Cycle -->
+      <div class="border border-gray-300 rounded-lg mb-4">
+        <div class="accordion-button bg-gradient-to-r from-green-50 to-emerald-50 p-5 flex justify-between items-center" onclick="toggleAccordion('demo-learning')">
+          <div>
+            <h3 class="font-semibold text-gray-900">Continuous Improvement: Incident → Rule Creation</h3>
+            <p class="text-sm text-gray-600 mt-1">Learning from failures, automated rule generation, validation</p>
+          </div>
+          <svg id="demo-learning-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="demo-learning-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200">
+            <div class="space-y-4">
+              <!-- Flow diagram -->
+              <div class="bg-gray-50 border border-gray-200 rounded p-4">
+                <h4 class="text-sm font-semibold text-gray-900 mb-4">Incident Learning Flow</h4>
+                <div class="space-y-3">
+                  <div class="flex items-center gap-3">
+                    <div class="bg-red-100 text-red-700 px-3 py-2 rounded text-xs font-medium w-40">1. Incident Detected</div>
+                    <div class="text-xs text-gray-600">CrossReferenceValidator flags policy violation</div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <div class="bg-amber-100 text-amber-700 px-3 py-2 rounded text-xs font-medium w-40">2. Root Cause Analysis</div>
+                    <div class="text-xs text-gray-600">Automated analysis of instruction history, context state</div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <div class="bg-blue-100 text-blue-700 px-3 py-2 rounded text-xs font-medium w-40">3. Rule Generation</div>
+                    <div class="text-xs text-gray-600">Proposed governance rule to prevent recurrence</div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <div class="bg-purple-100 text-purple-700 px-3 py-2 rounded text-xs font-medium w-40">4. Human Validation</div>
+                    <div class="text-xs text-gray-600">Governance board reviews and approves new rule</div>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <div class="bg-green-100 text-green-700 px-3 py-2 rounded text-xs font-medium w-40">5. Deployment</div>
+                    <div class="text-xs text-gray-600">Rule added to persistent storage, active immediately</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Example rule -->
+              <div class="bg-white border border-gray-200 rounded p-4">
+                <h4 class="text-sm font-semibold text-gray-900 mb-2">Example Generated Rule</h4>
+                <pre class="text-xs font-mono bg-gray-50 p-3 rounded overflow-x-auto text-gray-700"><code>{
+  "rule_id": "TRA-OPS-0042",
+  "created": "2025-10-13T15:45:00Z",
+  "trigger": "incident_27027_pattern_bias",
+  "description": "Prevent AI from defaulting to pattern recognition when explicit numeric values specified",
+  "enforcement": {
+    "service": "InstructionPersistenceClassifier",
+    "action": "STORE_AND_VALIDATE",
+    "priority": "HIGH"
+  },
+  "validation_required": true,
+  "approved_by": "governance_board",
+  "status": "active"
+}</code></pre>
+              </div>
+
+              <div class="text-xs text-gray-600 pt-3 border-t border-gray-200">
+                <strong>Organisational Learning:</strong> When one team encounters governance failure, entire organisation benefits from automatically generated preventive rules. Scales governance knowledge without manual documentation.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Demo 3: PluralisticDeliberationOrchestrator -->
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gradient-to-r from-purple-50 to-pink-50 p-5 flex justify-between items-center" onclick="toggleAccordion('demo-deliberation')">
+          <div>
+            <h3 class="font-semibold text-gray-900">Pluralistic Deliberation: Values Conflict Resolution</h3>
+            <p class="text-sm text-gray-600 mt-1">Multi-stakeholder engagement, non-hierarchical process, moral remainder documentation</p>
+          </div>
+          <svg id="demo-deliberation-icon" class="accordion-icon w-5 h-5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="demo-deliberation-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200">
+            <div class="space-y-4">
+              <!-- Abstract conflict scenario -->
+              <div class="bg-amber-50 border-l-4 border-amber-500 p-4 text-sm">
+                <strong class="text-amber-900">Conflict Detection:</strong>
+                <p class="text-amber-800 mt-1">AI system identifies competing values in decision context (e.g., efficiency vs. transparency, cost vs. risk mitigation, innovation vs. regulatory compliance). BoundaryEnforcer blocks autonomous decision, escalates to PluralisticDeliberationOrchestrator.</p>
+              </div>
+
+              <!-- Stakeholder identification -->
+              <div class="bg-white border border-gray-200 rounded p-4">
+                <h4 class="text-sm font-semibold text-gray-900 mb-3">Stakeholder Identification Process</h4>
+                <div class="space-y-2 text-xs text-gray-700">
+                  <div class="flex gap-2">
+                    <span class="text-purple-600">1.</span>
+                    <div><strong>Automatic Detection:</strong> System identifies which values frameworks are in tension (utilitarian, deontological, virtue ethics, contractarian, etc.)</div>
+                  </div>
+                  <div class="flex gap-2">
+                    <span class="text-purple-600">2.</span>
+                    <div><strong>Stakeholder Mapping:</strong> Identifies parties with legitimate interest in decision (affected parties, domain experts, governance authorities, community representatives)</div>
+                  </div>
+                  <div class="flex gap-2">
+                    <span class="text-purple-600">3.</span>
+                    <div><strong>Human Approval:</strong> Governance board reviews stakeholder list, adds/removes as appropriate (TRA-OPS-0002)</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Deliberation process -->
+              <div class="bg-white border border-gray-200 rounded p-4">
+                <h4 class="text-sm font-semibold text-gray-900 mb-3">Non-Hierarchical Deliberation</h4>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
+                  <div class="bg-blue-50 p-3 rounded">
+                    <div class="font-semibold text-blue-900 mb-1">Equal Voice</div>
+                    <div class="text-blue-800">All stakeholders present perspectives without hierarchical weighting. Technical experts don't automatically override community concerns.</div>
+                  </div>
+                  <div class="bg-green-50 p-3 rounded">
+                    <div class="font-semibold text-green-900 mb-1">Documented Dissent</div>
+                    <div class="text-green-800">Minority positions recorded in full. Dissenting stakeholders can document why consensus fails their values framework.</div>
+                  </div>
+                  <div class="bg-purple-50 p-3 rounded">
+                    <div class="font-semibold text-purple-900 mb-1">Moral Remainder</div>
+                    <div class="text-purple-800">System documents unavoidable value trade-offs. Even "correct" decision creates documented harm to other legitimate values.</div>
+                  </div>
+                  <div class="bg-amber-50 p-3 rounded">
+                    <div class="font-semibold text-amber-900 mb-1">Precedent (Not Binding)</div>
+                    <div class="text-amber-800">Decision becomes informative precedent for similar conflicts. But context differences mean precedents guide, not dictate.</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Output structure -->
+              <div class="bg-gray-50 border border-gray-200 rounded p-4">
+                <h4 class="text-sm font-semibold text-gray-900 mb-2">Deliberation Record Structure</h4>
+                <pre class="text-xs font-mono bg-white p-3 rounded overflow-x-auto text-gray-700"><code>{
+  "deliberation_id": "delib_2025-10-13-003",
+  "conflict_type": "efficiency_vs_transparency",
+  "stakeholders": [
+    {"role": "technical_lead", "position": "favour_efficiency"},
+    {"role": "compliance_officer", "position": "favour_transparency"},
+    {"role": "customer_representative", "position": "favour_transparency"},
+    {"role": "operations_manager", "position": "favour_efficiency"}
+  ],
+  "decision": "favour_transparency_with_mitigation",
+  "rationale": "[documented reasoning]",
+  "dissent": {
+    "stakeholders": ["technical_lead", "operations_manager"],
+    "reasoning": "[efficiency concerns documented in full]"
+  },
+  "moral_remainder": {
+    "acknowledged_harms": "Reduced operational efficiency, increased resource costs",
+    "mitigation_measures": "Phased transparency implementation, efficiency monitoring"
+  },
+  "precedent_status": "informative_not_binding"
+}</code></pre>
+              </div>
+
+              <div class="text-xs text-gray-600 pt-3 border-t border-gray-200">
+                <strong>Key Principle:</strong> When legitimate values conflict, no algorithm can determine the "correct" answer. Tractatus ensures decisions are made through inclusive deliberation with full documentation of trade-offs, rather than AI imposing single values framework or decision-maker dismissing stakeholder concerns.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Development Status (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Development Status</h2>
+
+      <div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
+        <p class="text-sm text-amber-900 font-medium mb-2">Early-Stage Research Framework</p>
+        <p class="text-sm text-amber-800">
+          Tractatus is a proof-of-concept developed over six months in a single project context (this website). It demonstrates architectural patterns for AI governance but has not undergone independent validation, red-team testing, or multi-organisation deployment.
+        </p>
+      </div>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('validation')">
+          <h3 class="font-semibold text-gray-900">Validated vs. Not Validated</h3>
+          <svg id="validation-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="validation-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
+            <div>
+              <strong class="text-gray-900">Validated:</strong> Framework successfully governs Claude Code in development workflows. User reports order-of-magnitude improvement in productivity for non-technical operators building production systems.
+            </div>
+            <div>
+              <strong class="text-gray-900">Not Validated:</strong> Performance at enterprise scale, integration complexity with existing systems, effectiveness against adversarial prompts, cross-platform consistency.
+            </div>
+            <div>
+              <strong class="text-gray-900">Known Limitation:</strong> Framework can be bypassed if AI simply chooses not to use governance tools. Voluntary invocation remains a structural weakness requiring external enforcement mechanisms.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- EU AI Act (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">EU AI Act Considerations</h2>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('euaiact')">
+          <h3 class="font-semibold text-gray-900">Regulation 2024/1689, Article 14: Human Oversight</h3>
+          <svg id="euaiact-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="euaiact-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
+            <p class="mb-4">
+              The EU AI Act (Regulation 2024/1689) establishes human oversight requirements for high-risk AI systems (Article 14). Organisations must ensure AI systems are "effectively overseen by natural persons" with authority to interrupt or disregard AI outputs.
+            </p>
+            <p class="mb-4">
+              Tractatus addresses this through architectural controls that:
+            </p>
+            <ul class="list-disc pl-6 space-y-2 mb-4">
+              <li>Generate immutable audit trails documenting AI decision-making processes</li>
+              <li>Enforce human approval requirements for values-based decisions</li>
+              <li>Provide evidence of oversight mechanisms independent of AI cooperation</li>
+              <li>Document compliance with transparency and record-keeping obligations</li>
+            </ul>
+            <p class="mb-4">
+              <strong>This does not constitute legal compliance advice.</strong> Organisations should evaluate whether these architectural patterns align with their specific regulatory obligations in consultation with legal counsel.
+            </p>
+            <p class="text-gray-600 text-xs">
+              Maximum penalties under EU AI Act: €35 million or 7% of global annual turnover (whichever is higher) for prohibited AI practices; €15 million or 3% for other violations.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Research Foundations (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Research Foundations</h2>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('research')">
+          <h3 class="font-semibold text-gray-900">Organisational Theory & Philosophical Basis</h3>
+          <svg id="research-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="research-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 text-sm text-gray-700 space-y-3">
+            <p>
+              Tractatus draws on 40+ years of organisational theory research: time-based organisation (Bluedorn, Ancona), knowledge orchestration (Crossan), post-bureaucratic authority (Laloux), structural inertia (Hannan & Freeman).
+            </p>
+            <p>
+              Core premise: When knowledge becomes ubiquitous through AI, authority must derive from appropriate time horizon and domain expertise rather than hierarchical position. Governance systems must orchestrate decision-making across strategic, operational, and tactical timescales.
+            </p>
+            <p>
+              <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+                View complete organisational theory foundations (PDF)
+                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+                </svg>
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Scope & Limitations (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Scope & Limitations</h2>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('scope')">
+          <h3 class="font-semibold text-gray-900">What This Is Not • What It Offers</h3>
+          <svg id="scope-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="scope-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
+            <div>
+              <strong class="text-gray-900">Tractatus is not:</strong>
+              <ul class="list-disc pl-6 mt-2 space-y-1 text-gray-600">
+                <li>A comprehensive AI safety solution</li>
+                <li>Independently validated or security-audited</li>
+                <li>Tested against adversarial attacks</li>
+                <li>Proven effective across multiple organisations</li>
+                <li>A substitute for legal compliance review</li>
+                <li>A commercial product (research framework, Apache 2.0 licence)</li>
+              </ul>
+            </div>
+            <div>
+              <strong class="text-gray-900">What it offers:</strong>
+              <ul class="list-disc pl-6 mt-2 space-y-1 text-gray-600">
+                <li>Architectural patterns for external governance controls</li>
+                <li>Reference implementation demonstrating feasibility</li>
+                <li>Foundation for organisational pilots and validation studies</li>
+                <li>Evidence that structural approaches to AI safety merit investigation</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Call to Action -->
+    <section class="border-t border-gray-200 pt-12">
+      <h2 class="text-xl font-bold text-gray-900 mb-4">Further Information</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <a href="/docs.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
+          <div class="font-semibold text-gray-900 mb-1">Technical Documentation</div>
+          <div class="text-sm text-gray-600">Complete architecture specifications, implementation patterns, API reference</div>
         </a>
-        <a href="/about.html" class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-amber-800 transition">
-          Our Approach & Values
+        <a href="/architecture.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
+          <div class="font-semibold text-gray-900 mb-1">System Architecture</div>
+          <div class="text-sm text-gray-600">Runtime-agnostic governance layer design and integration approach</div>
+        </a>
+        <a href="/researcher.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
+          <div class="font-semibold text-gray-900 mb-1">Research & Case Studies</div>
+          <div class="text-sm text-gray-600">Academic foundations, failure mode analysis, governance research</div>
+        </a>
+        <a href="/implementer.html" class="block border border-gray-300 rounded-lg p-5 hover-lift hover:border-amber-500">
+          <div class="font-semibold text-gray-900 mb-1">Implementation Guide</div>
+          <div class="text-sm text-gray-600">Integration patterns, deployment considerations, code examples</div>
         </a>
       </div>
-    </div>
+
+      <div class="mt-8 pt-8 border-t border-gray-200">
+        <p class="text-sm text-gray-600">
+          <strong class="text-gray-900">Contact:</strong> For pilot partnerships, validation studies, or technical consultation, contact via <a href="/about.html" class="text-amber-700 hover:text-amber-800">project information page</a>.
+        </p>
+      </div>
+    </section>
+
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-300 py-12">
+  <footer class="bg-gray-900 text-gray-400 py-12 mt-16">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-sm">
         <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm text-gray-400">
-            Research framework for AI safety governance and LLM risk mitigation
+          <h3 class="text-gray-200 font-semibold mb-3">Tractatus Framework</h3>
+          <p class="text-gray-500">
+            Research framework for structural AI governance. Apache 2.0 licence.
           </p>
         </div>
         <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-amber-400 transition">Documentation</a></li>
-            <li><a href="/implementer.html" class="hover:text-amber-400 transition">Implementation</a></li>
-            <li><a href="/researcher.html" class="hover:text-amber-400 transition">Research</a></li>
-            <li><a href="/about.html" class="hover:text-amber-400 transition">About</a></li>
+          <h3 class="text-gray-200 font-semibold mb-3">Documentation</h3>
+          <ul class="space-y-2">
+            <li><a href="/docs.html" class="hover:text-amber-400">Technical Specifications</a></li>
+            <li><a href="/implementer.html" class="hover:text-amber-400">Implementation</a></li>
+            <li><a href="/researcher.html" class="hover:text-amber-400">Research</a></li>
+            <li><a href="/about.html" class="hover:text-amber-400">About</a></li>
           </ul>
         </div>
         <div>
-          <h3 class="text-white font-bold mb-4">Framework Status</h3>
-          <p class="text-sm text-gray-400">
-            Development/Research Stage<br>
-            Open for evaluation and feedback
+          <h3 class="text-gray-200 font-semibold mb-3">Status</h3>
+          <p class="text-gray-500">
+            Early development, research validation phase. Open for organisational pilots and independent evaluation.
           </p>
         </div>
       </div>
-      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm text-gray-500">
-        <p>Tractatus AI Safety Framework - Research Project</p>
+      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-600">
+        <p>Tractatus AI Safety Framework — Research Project</p>
       </div>
     </div>
   </footer>
 
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
+  <script>
+    function toggleAccordion(id) {
+      const content = document.getElementById(id + '-content');
+      const icon = document.getElementById(id + '-icon');
+
+      content.classList.toggle('active');
+      icon.classList.toggle('active');
+    }
+  </script>
+
 </body>
 </html>
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 00000000..1bc8688f
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,47 @@
+{
+  "name": "Tractatus AI Safety Framework",
+  "short_name": "Tractatus",
+  "description": "Structural constraints for AI systems that preserve human agency through architectural governance",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#3b82f6",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/images/tractatus-icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ],
+  "categories": ["education", "productivity", "utilities"],
+  "shortcuts": [
+    {
+      "name": "Documentation",
+      "short_name": "Docs",
+      "description": "Browse framework documentation",
+      "url": "/docs.html",
+      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+    },
+    {
+      "name": "FAQ",
+      "short_name": "FAQ",
+      "description": "Frequently asked questions",
+      "url": "/faq.html",
+      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+    },
+    {
+      "name": "27027 Demo",
+      "short_name": "Demo",
+      "description": "Interactive pattern bias demonstration",
+      "url": "/demos/27027-demo.html",
+      "icons": [{ "src": "/images/tractatus-icon.svg", "sizes": "any" }]
+    }
+  ]
+}
diff --git a/public/researcher.html b/public/researcher.html
index 06b2786c..5038b173 100644
--- a/public/researcher.html
+++ b/public/researcher.html
@@ -4,390 +4,509 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>For Researchers | Tractatus AI Safety Framework</title>
-  <meta name="description" content="Tractatus framework research: architectural constraints, theoretical foundations, and empirical validation of AI safety through structural guarantees.">
+  <meta name="description" content="Research foundations, empirical observations, and theoretical basis for architectural approaches to AI governance. Early-stage framework exploring structural constraints on LLM systems.">
+
+  <!-- PWA Manifest -->
+  <link rel="manifest" href="/manifest.json">
+
+  <!-- PWA Meta Tags -->
+  <meta name="theme-color" content="#3b82f6">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <meta name="apple-mobile-web-app-title" content="Tractatus">
+  <link rel="apple-touch-icon" href="/images/tractatus-icon.svg">
+
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254958072">
   <style>
-    /* Accessibility: Skip link */
-    .skip-link { position: absolute; left: -9999px; top: 0; }
-    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; border: 2px solid #3b82f6; }
+    .skip-link { position: absolute; left: -9999px; }
+    .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
+    a:focus, button:focus { outline: 2px solid #d97706; outline-offset: 2px; }
 
-    /* Accessibility: Focus indicators (WCAG 2.4.7) */
-    a:focus, button:focus, input:focus, select:focus, textarea:focus {
-      outline: 3px solid #3b82f6;
-      outline-offset: 2px;
+    /* Accordion styles */
+    .accordion-button { cursor: pointer; user-select: none; }
+    .accordion-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease-out;
     }
-    a:focus:not(:focus-visible) { outline: none; }
-    a:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
+    .accordion-content.active {
+      max-height: 3000px;
+      transition: max-height 0.5s ease-in;
+    }
+    .accordion-icon { transition: transform 0.3s ease; }
+    .accordion-icon.active { transform: rotate(180deg); }
   </style>
 </head>
-<body class="bg-gray-50">
+<body class="bg-white">
 
-  <!-- Skip Link for Keyboard Navigation -->
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
-  <!-- Navigation (injected by navbar.js) -->
   <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
 
-  <!-- Hero Section -->
-  <div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center">
-        <h1 class="text-5xl font-bold text-gray-900 mb-6">
-          AI Safety Through<br>Architectural Constraints
-        </h1>
-        <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
-          Exploring the theoretical foundations and empirical validation of structural AI safety—preserving human agency through formal guarantees, not aspirational goals.
-        </p>
-        <div class="flex justify-center space-x-4">
-          <a href="/docs.html" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition">
-            Browse Documentation
-          </a>
-          <a href="#case-studies" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-semibold border-2 border-purple-600 hover:bg-purple-50 transition">
-            View Case Studies
-          </a>
-        </div>
+  <!-- Header -->
+  <div class="bg-gray-50 border-b border-gray-200 py-16">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="inline-flex items-center bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm font-medium mb-6">
+        Research Framework • Empirical Observations
       </div>
-    </div>
-  </div>
-
-  <!-- Research Focus Areas -->
-  <div id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Research Focus Areas</h2>
-
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-      <!-- Theoretical Foundations -->
-      <div class="bg-white rounded-lg shadow-lg p-8">
-        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-          <svg aria-hidden="true" class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-          </svg>
-        </div>
-        <h3 class="text-xl font-bold text-gray-900 mb-3">Theoretical Foundations</h3>
-        <p class="text-gray-600 mb-4">
-          Formal specification of the Tractatus boundary: where systematization ends and human judgment begins. Rooted in Wittgenstein's linguistic philosophy.
-        </p>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>Boundary delineation principles</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>Values irreducibility proofs</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>Agency preservation guarantees</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Architectural Analysis -->
-      <div class="bg-white rounded-lg shadow-lg p-8">
-        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-          <svg aria-hidden="true" class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
-          </svg>
-        </div>
-        <h3 class="text-xl font-bold text-gray-900 mb-3">Architectural Analysis</h3>
-        <p class="text-gray-600 mb-4">
-          Six-component framework architecture: classification, validation, boundary enforcement, pressure monitoring, metacognitive verification, pluralistic deliberation.
-        </p>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>InstructionPersistenceClassifier</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>CrossReferenceValidator</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>BoundaryEnforcer</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>ContextPressureMonitor</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>MetacognitiveVerifier</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>PluralisticDeliberationOrchestrator</span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- Empirical Validation -->
-      <div class="bg-white rounded-lg shadow-lg p-8">
-        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-          <svg aria-hidden="true" class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
-          </svg>
-        </div>
-        <h3 class="text-xl font-bold text-gray-900 mb-3">Empirical Validation</h3>
-        <p class="text-gray-600 mb-4">
-          Real-world failure case analysis and prevention validation. Documented incidents where traditional AI safety approaches failed.
-        </p>
-        <ul class="space-y-2 text-sm text-gray-600">
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>The 27027 Incident (pattern recognition bias override)</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>Privacy creep detection</span>
-          </li>
-          <li class="flex items-start">
-            <span class="mr-2">•</span>
-            <span>Silent degradation prevention</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <!-- Interactive Demonstrations -->
-  <div class="bg-white py-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Interactive Demonstrations</h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <a href="/demos/classification-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
-          <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">Classification Demo</h3>
-          <p class="text-gray-600 mb-4">
-            Explore how the InstructionPersistenceClassifier categorizes instructions across five quadrants with persistence levels.
-          </p>
-          <div class="text-purple-600 font-medium">Try the demo →</div>
-        </a>
-
-        <a href="/demos/27027-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
-          <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">27027 Incident Analysis</h3>
-          <p class="text-gray-600 mb-4">
-            Step through a real failure case where AI contradicted explicit instructions, and see how Tractatus prevents it.
-          </p>
-          <div class="text-purple-600 font-medium">View timeline →</div>
-        </a>
-
-        <a href="/demos/boundary-demo.html" class="block bg-gray-50 rounded-lg p-6 hover:shadow-lg transition group">
-          <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-purple-600">Boundary Simulator</h3>
-          <p class="text-gray-600 mb-4">
-            Test decisions against the Tractatus boundary to see which can be automated and which require human judgment.
-          </p>
-          <div class="text-purple-600 font-medium">Run scenarios →</div>
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <!-- Case Studies -->
-  <div id="case-studies" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Documented Failure Cases</h2>
-
-    <div class="space-y-6">
-      <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-red-500">
-        <div class="flex items-start justify-between">
-          <div>
-            <h3 class="text-xl font-bold text-gray-900 mb-2">The 27027 Incident</h3>
-            <p class="text-gray-600 mb-3">
-              User instructed "Check port 27027" but AI immediately used 27017 instead—pattern recognition bias overrode explicit instruction. Not forgetting; immediate autocorrection by training patterns. <strong>Prevented by InstructionPersistenceClassifier + CrossReferenceValidator.</strong>
-            </p>
-            <div class="flex space-x-4 text-sm">
-              <span class="text-gray-500">Failure Type: Pattern Recognition Bias</span>
-              <span class="text-gray-500">Prevention: Explicit instruction storage + validation</span>
-            </div>
-          </div>
-          <a href="/demos/27027-demo.html" class="text-purple-600 hover:text-purple-700 font-medium">Interactive demo →</a>
-        </div>
-      </div>
-
-      <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-orange-500">
-        <div class="flex items-start justify-between">
-          <div>
-            <h3 class="text-xl font-bold text-gray-900 mb-2">Privacy Creep Detection</h3>
-            <p class="text-gray-600 mb-3">
-              AI suggested analytics that violated privacy-first principle. Gradual values drift over 40-message conversation. <strong>Prevented by BoundaryEnforcer.</strong>
-            </p>
-            <div class="flex space-x-4 text-sm">
-              <span class="text-gray-500">Failure Type: Values Drift</span>
-              <span class="text-gray-500">Prevention: STRATEGIC boundary check</span>
-            </div>
-          </div>
-          <a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center gap-1">
-            See case studies doc
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-            </svg>
-          </a>
-        </div>
-      </div>
-
-      <div class="bg-white rounded-lg shadow-md p-6 border-l-4 border-yellow-500">
-        <div class="flex items-start justify-between">
-          <div>
-            <h3 class="text-xl font-bold text-gray-900 mb-2">Silent Quality Degradation</h3>
-            <p class="text-gray-600 mb-3">
-              Context pressure at 82% caused AI to skip error handling silently. No warning to user. <strong>Prevented by ContextPressureMonitor.</strong>
-            </p>
-            <div class="flex space-x-4 text-sm">
-              <span class="text-gray-500">Failure Type: Silent Degradation</span>
-              <span class="text-gray-500">Prevention: CRITICAL pressure detection</span>
-            </div>
-          </div>
-          <a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:text-purple-700 font-medium inline-flex items-center gap-1">
-            See case studies doc
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Research Resources -->
-  <div class="bg-purple-50 py-16">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h2 class="text-3xl font-bold text-gray-900 mb-12 text-center">Research Resources</h2>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-        <div class="bg-white rounded-lg p-6">
-          <h3 class="text-xl font-bold text-gray-900 mb-4">Research Documentation</h3>
-          <ul class="space-y-3">
-            <li class="flex items-center justify-between">
-              <a href="https://github.com/tractatus-framework/tractatus/blob/main/docs/BENCHMARK-SUITE-RESULTS.md"
-                 target="_blank"
-                 rel="noopener noreferrer"
-                 class="text-purple-600 hover:text-purple-700 font-medium">
-                → Benchmark Suite Results (610 Tests)
-              </a>
-              <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">NEW</span>
-            </li>
-            <li class="flex items-center justify-between">
-              <a href="https://github.com/tractatus-framework/tractatus/blob/main/docs/GOVERNANCE-RULE-LIBRARY.md"
-                 target="_blank"
-                 rel="noopener noreferrer"
-                 class="text-purple-600 hover:text-purple-700 font-medium">
-                → Governance Rule Library (10 Examples)
-              </a>
-              <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full font-medium">NEW</span>
-            </li>
-            <li class="flex items-center justify-between">
-              <a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
-                → Research Foundations & Scholarly Context
-              </a>
-              <a href="/downloads/research-foundations-scholarly-review-and-context.pdf"
-                 target="_blank"
-                 rel="noopener noreferrer"
-                 class="text-purple-600 hover:text-purple-700 ml-2"
-                 title="Download PDF">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
-              </a>
-            </li>
-            <li class="flex items-center justify-between">
-              <a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
-                → Case Studies: Real-World Failures
-              </a>
-              <a href="/downloads/case-studies-real-world-llm-failure-modes.pdf"
-                 target="_blank"
-                 rel="noopener noreferrer"
-                 class="text-purple-600 hover:text-purple-700 ml-2"
-                 title="Download PDF">
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-                </svg>
-              </a>
-            </li>
-            <li>
-              <a href="/docs.html" class="text-purple-600 hover:text-purple-700 font-medium">
-                → Framework Overview & Core Concepts
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div class="bg-white rounded-lg p-6">
-          <h3 class="text-xl font-bold text-gray-900 mb-4">Contribute to Research</h3>
-          <p class="text-gray-600 mb-4">
-            This framework is open for academic collaboration and empirical validation studies.
-          </p>
-          <ul class="space-y-2 text-sm text-gray-600 mb-4">
-            <li>• Submit failure cases for analysis</li>
-            <li>• Propose theoretical extensions</li>
-            <li>• Validate architectural constraints</li>
-            <li>• Explore boundary formalization</li>
-          </ul>
-          <a href="/case-submission.html" class="inline-block bg-purple-600 text-white px-4 py-2 rounded text-sm font-semibold hover:bg-purple-700 transition">
-            Submit Case Study →
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- CTA Section -->
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-    <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl p-12 text-center text-white">
-      <h2 class="text-3xl font-bold mb-4">Join the Research Community</h2>
-      <p class="text-xl mb-8 opacity-90">
-        Help advance AI safety through empirical validation and theoretical exploration.
+      <h1 class="text-4xl font-bold text-gray-900 mb-4">
+        Research Foundations & Empirical Observations
+      </h1>
+      <p class="text-lg text-gray-600 leading-relaxed">
+        Tractatus explores architectural approaches to AI governance through empirical observation of failure modes and application of organisational theory. This page documents research foundations, observed patterns, and theoretical basis for the framework.
       </p>
-      <div class="flex justify-center space-x-4">
-        <a href="/docs.html" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
-          Read Documentation
+    </div>
+  </div>
+
+  <!-- Main Content -->
+  <div id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+
+    <!-- Research Context -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Research Context & Scope</h2>
+
+      <div class="bg-amber-50 border border-amber-200 rounded-lg p-6 mb-6">
+        <p class="text-sm text-amber-900 font-medium mb-2">Development Context</p>
+        <p class="text-sm text-amber-800">
+          Tractatus was developed over six months (April–October 2025) in single-project context (this website). Observations derive from direct engagement with Claude Code (Anthropic's Sonnet 4.5 model) across approximately 500 development sessions. This is exploratory research, not controlled study.
+        </p>
+      </div>
+
+      <div class="prose prose-sm max-w-none text-gray-700 space-y-3">
+        <p>
+          The framework emerged from practical necessity rather than theoretical speculation. During development, we observed recurring patterns where AI systems would override explicit instructions, drift from established values constraints, or silently degrade quality under context pressure. Traditional governance approaches (policy documents, ethical guidelines, prompt engineering) proved insufficient to prevent these failures.
+        </p>
+        <p>
+          This led to research question: <strong>Can governance be made architecturally external to AI systems</strong> rather than relying on voluntary AI compliance? Tractatus represents one exploration of that question, grounded in organisational theory and validated through empirical observation of what actually prevented failures in practice.
+        </p>
+      </div>
+    </section>
+
+    <!-- Theoretical Foundations (Accordion) -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Theoretical Foundations</h2>
+
+      <!-- Organisational Theory -->
+      <div class="border border-gray-300 rounded-lg mb-4">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('org-theory')">
+          <h3 class="font-semibold text-gray-900">Organisational Theory Basis</h3>
+          <svg id="org-theory-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="org-theory-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
+            <p class="mb-4">
+              Tractatus draws on four decades of organisational research addressing authority structures during knowledge democratisation:
+            </p>
+
+            <p class="mb-3"><strong>Time-Based Organisation (Bluedorn, Ancona):</strong></p>
+            <p class="mb-4 pl-4">
+              Decisions operate across strategic (years), operational (months), and tactical (hours-days) timescales. AI systems operating at tactical speed should not override strategic decisions made at appropriate temporal scale. The InstructionPersistenceClassifier explicitly models temporal horizon (STRATEGIC, OPERATIONAL, TACTICAL) to enforce decision authority alignment.
+            </p>
+
+            <p class="mb-3"><strong>Knowledge Orchestration (Crossan et al.):</strong></p>
+            <p class="mb-4 pl-4">
+              When knowledge becomes ubiquitous through AI, organisational authority shifts from information control to knowledge coordination. Governance systems must orchestrate decision-making across distributed expertise rather than centralise control. The PluralisticDeliberationOrchestrator implements non-hierarchical coordination for values conflicts.
+            </p>
+
+            <p class="mb-3"><strong>Post-Bureaucratic Authority (Laloux, Hamel):</strong></p>
+            <p class="mb-4 pl-4">
+              Traditional hierarchical authority assumes information asymmetry. As AI democratises expertise, legitimate authority must derive from appropriate time horizon and stakeholder representation, not positional power. Framework architecture separates technical capability (what AI can do) from decision authority (what AI should do).
+            </p>
+
+            <p class="mb-3"><strong>Structural Inertia (Hannan & Freeman):</strong></p>
+            <p class="mb-4 pl-4">
+              Governance embedded in culture or process erodes over time as systems evolve. Architectural constraints create structural inertia that resists organisational drift. Making governance external to AI runtime creates "accountability infrastructure" that survives individual session variations.
+            </p>
+
+            <p class="text-sm text-gray-600 border-t border-gray-200 pt-3 mt-4">
+              <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium">
+                View complete organisational theory foundations (PDF) →
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Values Pluralism -->
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('values')">
+          <h3 class="font-semibold text-gray-900">Values Pluralism & Moral Philosophy</h3>
+          <svg id="values-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="values-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 prose prose-sm max-w-none text-gray-700">
+            <p class="mb-4">
+              The PluralisticDeliberationOrchestrator addresses fundamental problem in AI safety: <strong>many "safety" questions are actually values conflicts</strong> where multiple legitimate perspectives exist.
+            </p>
+
+            <p class="mb-4">
+              When efficiency conflicts with transparency, or innovation with risk mitigation, no algorithm can determine the "correct" answer. These are values trade-offs requiring human deliberation across stakeholder perspectives. AI systems that attempt to resolve such conflicts autonomously impose single values framework—often utilitarian efficiency maximisation encoded in training data.
+            </p>
+
+            <p class="mb-4">
+              Framework draws on moral pluralism literature (Isaiah Berlin, Bernard Williams, Martha Nussbaum) arguing legitimate values can conflict without one being objectively superior. Rather than algorithmic resolution, framework facilitates:
+            </p>
+
+            <ul class="list-disc pl-6 mb-4 space-y-2">
+              <li><strong>Stakeholder identification:</strong> Who has legitimate interest in this decision?</li>
+              <li><strong>Non-hierarchical deliberation:</strong> Equal voice without automatic expert override</li>
+              <li><strong>Documented dissent:</strong> Minority positions recorded in full</li>
+              <li><strong>Moral remainder:</strong> Acknowledgment that even optimal decisions create unavoidable harm to other legitimate values</li>
+            </ul>
+
+            <p class="mb-4">
+              This approach recognises that <strong>governance isn't solving values conflicts—it's ensuring they're addressed through appropriate deliberative process</strong> rather than AI imposing resolution.
+            </p>
+
+            <p class="text-sm text-gray-600 border-t border-gray-200 pt-3 mt-4">
+              <a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium">
+                View pluralistic values deliberation plan (PDF, DRAFT status) →
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Empirical Observations -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Empirical Observations: Documented Failure Modes</h2>
+
+      <p class="text-sm text-gray-600 mb-6">
+        Three failure patterns observed repeatedly during framework development. These are not hypothetical scenarios—they are documented incidents that occurred during this project's development.
+      </p>
+
+      <!-- Failure Mode 1: Pattern Bias -->
+      <div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
+        <div class="flex items-start gap-3 mb-3">
+          <div class="flex-shrink-0 w-8 h-8 bg-red-100 rounded flex items-center justify-center">
+            <span class="text-red-700 font-bold text-sm">1</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="text-lg font-bold text-gray-900 mb-2">Pattern Recognition Bias Override (The 27027 Incident)</h3>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Observed behaviour:</strong> User specified "Check MongoDB on port 27027" but AI immediately used default port 27017 instead. This occurred within same message—not forgetting over time, but immediate autocorrection by training data patterns.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Root cause:</strong> Training data contains thousands of examples of MongoDB on port 27017 (default). When AI encounters "MongoDB" + port specification, pattern recognition weight overrides explicit instruction. Similar to autocorrect changing correctly-spelled proper nouns to common words.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Why traditional approaches failed:</strong> Prompt engineering ("please follow instructions exactly") ineffective because AI genuinely believes it IS following instructions—pattern recognition operates below conversational reasoning layer.
+            </p>
+            <p class="text-sm text-gray-700">
+              <strong>Framework intervention:</strong> InstructionPersistenceClassifier stores explicit instructions in external persistence layer. CrossReferenceValidator checks AI actions against stored instructions before execution. When AI proposes port 27017, validator detects conflict with stored "27027" instruction and blocks execution.
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
+          <span class="text-gray-500">Prevented by: InstructionPersistenceClassifier + CrossReferenceValidator</span>
+          <a href="/demos/27027-demo.html" class="text-amber-700 hover:text-amber-800 font-medium">View interactive timeline →</a>
+        </div>
+      </div>
+
+      <!-- Failure Mode 2: Values Drift -->
+      <div class="bg-white border border-gray-300 rounded-lg p-6 mb-4">
+        <div class="flex items-start gap-3 mb-3">
+          <div class="flex-shrink-0 w-8 h-8 bg-orange-100 rounded flex items-center justify-center">
+            <span class="text-orange-700 font-bold text-sm">2</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="text-lg font-bold text-gray-900 mb-2">Gradual Values Drift Under Context Pressure</h3>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Observed behaviour:</strong> Project established "privacy-first" as strategic value. After 40-message conversation about analytics features, AI suggested tracking implementation that violated privacy constraint. User caught it; AI acknowledged violation but had drifted from principle through incremental feature additions.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Root cause:</strong> Strategic values (established early in project) conflict with tactical optimisations (implemented later under time pressure). As conversation lengthens, tactical thinking dominates. AI didn't actively reject privacy principle—it simply stopped checking whether new features aligned.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Why traditional approaches failed:</strong> Values stated in system prompt become less salient as conversation progresses. Context compaction can drop early strategic decisions. Prompt reminders ("remember privacy-first") treat symptom not cause.
+            </p>
+            <p class="text-sm text-gray-700">
+              <strong>Framework intervention:</strong> BoundaryEnforcer maintains strategic values as persistent constraints external to conversation context. Before implementing analytics feature, enforcer checks against stored "privacy-first" constraint. Detects conflict, blocks autonomous implementation, escalates for human deliberation on whether privacy principle should be reconsidered or analytics approach modified.
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
+          <span class="text-gray-500">Prevented by: BoundaryEnforcer (STRATEGIC constraint checking)</span>
+        </div>
+      </div>
+
+      <!-- Failure Mode 3: Silent Degradation -->
+      <div class="bg-white border border-gray-300 rounded-lg p-6">
+        <div class="flex items-start gap-3 mb-3">
+          <div class="flex-shrink-0 w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
+            <span class="text-yellow-700 font-bold text-sm">3</span>
+          </div>
+          <div class="flex-1">
+            <h3 class="text-lg font-bold text-gray-900 mb-2">Silent Quality Degradation at High Context Pressure</h3>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Observed behaviour:</strong> During complex multi-file operation at 85% context capacity, AI silently omitted error handling in generated code. No indication to user that corners were being cut. User discovered missing validation only during code review.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Root cause:</strong> As context fills, AI faces implicit trade-off: complete requested functionality OR maintain quality standards. Training incentivises completing user requests over acknowledging limitations. Silence about degradation is path of least resistance.
+            </p>
+            <p class="text-sm text-gray-700 mb-3">
+              <strong>Why traditional approaches failed:</strong> AI doesn't recognise it's degrading—from its perspective, it's successfully completing task under constraints. Asking "did you cut corners?" produces confident denial because AI genuinely believes its output meets standards.
+            </p>
+            <p class="text-sm text-gray-700">
+              <strong>Framework intervention:</strong> ContextPressureMonitor tracks multiple factors (token usage, conversation length, task complexity). When pressure exceeds thresholds (>75% tokens, >40 messages, high complexity), monitor forces explicit pressure acknowledgment and recommends context refresh. Makes degradation risk visible rather than silent.
+            </p>
+          </div>
+        </div>
+        <div class="flex items-center justify-end gap-3 text-sm pt-3 border-t border-gray-200">
+          <span class="text-gray-500">Prevented by: ContextPressureMonitor (multi-factor session tracking)</span>
+        </div>
+      </div>
+
+      <div class="mt-6 text-sm text-gray-600 bg-gray-50 border border-gray-200 rounded p-4">
+        <strong>Research Note:</strong> These patterns emerged from direct observation, not hypothesis testing. We don't claim they're universal to all LLM systems or deployment contexts. They represent empirical basis for framework design decisions—problems we actually encountered and architectural interventions that actually worked in this specific context.
+      </div>
+    </section>
+
+    <!-- Architectural Components -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Six-Component Architecture</h2>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('architecture')">
+          <h3 class="font-semibold text-gray-900">Framework Services & Functions</h3>
+          <svg id="architecture-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="architecture-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-4 text-sm">
+
+            <div class="border-l-2 border-amber-500 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">1. BoundaryEnforcer</div>
+              <div class="text-gray-600 mb-2">Blocks AI from making values decisions without human approval. Maintains strategic constraints as persistent rules checked before action execution.</div>
+              <div class="text-xs text-gray-500">Addresses: Values drift, autonomous decision-making on contested trade-offs</div>
+            </div>
+
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">2. InstructionPersistenceClassifier</div>
+              <div class="text-gray-600 mb-2">Stores explicit instructions external to AI context with persistence levels (HIGH/MEDIUM/LOW) and temporal scope (STRATEGIC/OPERATIONAL/TACTICAL). Prevents pattern bias override.</div>
+              <div class="text-xs text-gray-500">Addresses: Pattern recognition bias (27027-style failures)</div>
+            </div>
+
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">3. CrossReferenceValidator</div>
+              <div class="text-gray-600 mb-2">Validates AI proposed actions against stored instructions and governance rules before execution. Detects conflicts and blocks inconsistent operations.</div>
+              <div class="text-xs text-gray-500">Addresses: Instruction override, policy violation detection</div>
+            </div>
+
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">4. ContextPressureMonitor</div>
+              <div class="text-gray-600 mb-2">Multi-factor tracking of session health: token usage, conversation length, task complexity, error frequency. Makes degradation risk explicit when thresholds exceeded.</div>
+              <div class="text-xs text-gray-500">Addresses: Silent quality degradation, context-pressure failures</div>
+            </div>
+
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">5. MetacognitiveVerifier</div>
+              <div class="text-gray-600 mb-2">Self-checks reasoning quality before complex operations (>3 files, >5 steps, architecture changes). Validates alignment, coherence, considers alternatives.</div>
+              <div class="text-xs text-gray-500">Addresses: Reasoning shortcuts under complexity, insufficient alternative consideration</div>
+            </div>
+
+            <div class="border-l-2 border-gray-300 pl-4">
+              <div class="font-semibold text-gray-900 mb-1">6. PluralisticDeliberationOrchestrator</div>
+              <div class="text-gray-600 mb-2">Facilitates multi-stakeholder deliberation when values conflicts detected. Non-hierarchical engagement, documented dissent, moral remainder acknowledgment.</div>
+              <div class="text-xs text-gray-500">Addresses: Values conflicts, stakeholder exclusion, algorithmic resolution of contested trade-offs</div>
+            </div>
+
+            <div class="text-xs text-gray-600 bg-gray-50 p-3 rounded mt-4">
+              <strong>Architectural principle:</strong> Services operate external to AI runtime with autonomous triggering. AI doesn't decide "should I check governance rules?"—architecture enforces checking by default. This addresses voluntary compliance problem inherent in prompt-based governance.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Interactive Demonstrations -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Interactive Demonstrations</h2>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <a href="/demos/classification-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
+          <h3 class="font-semibold text-gray-900 mb-2">Instruction Classification</h3>
+          <p class="text-sm text-gray-600">Explore how instructions are classified across quadrants with persistence levels and temporal scope.</p>
         </a>
-        <a href="/implementer.html" class="bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition border-2 border-white">
-          Implementation Guide →
+
+        <a href="/demos/27027-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
+          <h3 class="font-semibold text-gray-900 mb-2">27027 Incident Timeline</h3>
+          <p class="text-sm text-gray-600">Step through pattern recognition bias failure and architectural intervention that prevented it.</p>
+        </a>
+
+        <a href="/demos/boundary-demo.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 hover:shadow-md transition">
+          <h3 class="font-semibold text-gray-900 mb-2">Boundary Evaluation</h3>
+          <p class="text-sm text-gray-600">Test decisions against boundary enforcement to see which require human judgment vs. AI autonomy.</p>
         </a>
       </div>
-    </div>
+    </section>
+
+    <!-- Research Resources -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Research Documentation</h2>
+
+      <div class="space-y-3 text-sm">
+        <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
+          <span class="font-medium text-gray-900">Organisational Theory Foundations</span>
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+        </a>
+
+        <a href="/downloads/pluralistic-values-deliberation-plan-v2-DRAFT.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
+          <div>
+            <span class="font-medium text-gray-900">Pluralistic Values Deliberation Plan</span>
+            <span class="ml-2 text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">DRAFT</span>
+          </div>
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+        </a>
+
+        <a href="/downloads/case-studies-real-world-llm-failure-modes.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
+          <span class="font-medium text-gray-900">Case Studies: Real-World LLM Failure Modes</span>
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+        </a>
+
+        <a href="/downloads/framework-governance-in-action-pre-publication-security-audit.pdf" target="_blank" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
+          <span class="font-medium text-gray-900">Framework in Action: Pre-Publication Security Audit</span>
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+        </a>
+
+        <a href="/docs.html?category=technical-reference" class="flex items-center justify-between p-4 border border-gray-300 rounded hover:border-amber-500 hover:bg-gray-50 transition">
+          <span class="font-medium text-gray-900">Complete Technical Documentation</span>
+          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
+          </svg>
+        </a>
+      </div>
+    </section>
+
+    <!-- Limitations & Future Research -->
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-gray-900 mb-6">Limitations & Future Research Directions</h2>
+
+      <div class="border border-gray-300 rounded-lg">
+        <div class="accordion-button bg-gray-50 p-5 flex justify-between items-center" onclick="toggleAccordion('limitations')">
+          <h3 class="font-semibold text-gray-900">Known Limitations & Research Gaps</h3>
+          <svg id="limitations-icon" class="accordion-icon w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+          </svg>
+        </div>
+        <div id="limitations-content" class="accordion-content">
+          <div class="p-5 border-t border-gray-200 space-y-4 text-sm text-gray-700">
+
+            <div>
+              <strong class="text-gray-900">1. Single-Context Validation</strong>
+              <p class="mt-1">Framework validated only in single-project, single-user context (this website development). No multi-organisation deployment, cross-platform testing, or controlled experimental validation.</p>
+            </div>
+
+            <div>
+              <strong class="text-gray-900">2. Voluntary Invocation Limitation</strong>
+              <p class="mt-1">Most critical limitation: Framework can be bypassed if AI simply chooses not to use governance tools. We've addressed this through architectural patterns making governance checks automatic rather than voluntary, but full external enforcement requires runtime-level integration not universally available in current LLM platforms.</p>
+            </div>
+
+            <div>
+              <strong class="text-gray-900">3. No Adversarial Testing</strong>
+              <p class="mt-1">Framework has not undergone red-team evaluation, jailbreak testing, or adversarial prompt assessment. All observations come from normal development workflow, not deliberate bypass attempts.</p>
+            </div>
+
+            <div>
+              <strong class="text-gray-900">4. Platform Specificity</strong>
+              <p class="mt-1">Observations and interventions validated with Claude Code (Anthropic Sonnet 4.5) only. Generalisability to other LLM systems (Copilot, GPT-4, custom agents) remains unvalidated hypothesis.</p>
+            </div>
+
+            <div>
+              <strong class="text-gray-900">5. Scale Uncertainty</strong>
+              <p class="mt-1">Performance characteristics at enterprise scale (thousands of concurrent users, millions of governance events) completely unknown. Current implementation optimised for single-user context.</p>
+            </div>
+
+            <div class="border-t border-gray-200 pt-4 mt-4">
+              <strong class="text-gray-900">Future Research Needs:</strong>
+              <ul class="list-disc pl-5 mt-2 space-y-1">
+                <li>Controlled experimental validation with quantitative metrics</li>
+                <li>Multi-organisation pilot studies across different domains</li>
+                <li>Independent security audit and adversarial testing</li>
+                <li>Cross-platform consistency evaluation (Copilot, GPT-4, open models)</li>
+                <li>Formal verification of boundary enforcement properties</li>
+                <li>Longitudinal study of framework effectiveness over extended deployment</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Additional Resources -->
+    <section class="border-t border-gray-200 pt-12">
+      <h2 class="text-xl font-bold text-gray-900 mb-4">Additional Resources</h2>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <a href="/leader.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
+          <div class="font-semibold text-gray-900 mb-1">For Decision-Makers</div>
+          <div class="text-sm text-gray-600">Strategic perspective on governance challenges and architectural approaches</div>
+        </a>
+        <a href="/implementer.html" class="block border border-gray-300 rounded-lg p-5 hover:border-amber-500 transition">
+          <div class="font-semibold text-gray-900 mb-1">Implementation Guide</div>
+          <div class="text-sm text-gray-600">Technical integration patterns and deployment considerations</div>
+        </a>
+      </div>
+    </section>
+
   </div>
 
   <!-- Footer -->
-  <footer class="bg-gray-900 text-gray-400 py-12">
+  <footer class="bg-gray-900 text-gray-400 py-12 mt-16">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-sm">
         <div>
-          <h3 class="text-white font-bold mb-4">Tractatus Framework</h3>
-          <p class="text-sm">
-            Preserving human agency through architectural constraints, not aspirational goals.
+          <h3 class="text-gray-200 font-semibold mb-3">Tractatus Framework</h3>
+          <p class="text-gray-500">
+            Research framework exploring architectural approaches to AI governance. Apache 2.0 licence.
           </p>
         </div>
         <div>
-          <h3 class="text-white font-bold mb-4">Audience Paths</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/researcher.html" class="hover:text-white">Researchers</a></li>
-            <li><a href="/implementer.html" class="hover:text-white">Implementers</a></li>
-            <li><a href="/leader.html" class="hover:text-white">Leaders</a></li>
+          <h3 class="text-gray-200 font-semibold mb-3">Documentation</h3>
+          <ul class="space-y-2">
+            <li><a href="/docs.html" class="hover:text-amber-400">Technical Specifications</a></li>
+            <li><a href="/implementer.html" class="hover:text-amber-400">Implementation</a></li>
+            <li><a href="/leader.html" class="hover:text-amber-400">For Leaders</a></li>
+            <li><a href="/about.html" class="hover:text-amber-400">About</a></li>
           </ul>
         </div>
         <div>
-          <h3 class="text-white font-bold mb-4">Resources</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/docs.html" class="hover:text-white">Documentation</a></li>
-            <li><a href="/demos/classification-demo.html" class="hover:text-white">Interactive Demos</a></li>
-            <li><a href="/" class="hover:text-white">Home</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 class="text-white font-bold mb-4">Community</h3>
-          <ul class="space-y-2 text-sm">
-            <li><a href="/media-inquiry.html" class="hover:text-white">Media Inquiries</a></li>
-            <li><a href="/case-submission.html" class="hover:text-white">Submit Case Study</a></li>
-          </ul>
+          <h3 class="text-gray-200 font-semibold mb-3">Research Status</h3>
+          <p class="text-gray-500">
+            Early-stage exploratory research. Observations from single-project context. Independent validation needed.
+          </p>
         </div>
       </div>
-      <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm space-y-2">
-        <p class="text-gray-300">Safety Through Structure, Not Aspiration | Built with <a href="https://claude.ai/claude-code" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Claude Code</a></p>
-        <p>© 2025 Tractatus AI Safety Framework. Licensed under <a href="https://www.apache.org/licenses/LICENSE-2.0" class="text-blue-400 hover:text-blue-300 transition" target="_blank" rel="noopener">Apache License 2.0</a>.</p>
+      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-600">
+        <p>Tractatus AI Safety Framework — Research Project</p>
       </div>
     </div>
   </footer>
 
+  <!-- Version Management & PWA -->
+  <script src="/js/version-manager.js"></script>
+
+  <script>
+    function toggleAccordion(id) {
+      const content = document.getElementById(id + '-content');
+      const icon = document.getElementById(id + '-icon');
+      content.classList.toggle('active');
+      icon.classList.toggle('active');
+    }
+  </script>
+
 </body>
 </html>
diff --git a/public/service-worker.js b/public/service-worker.js
new file mode 100644
index 00000000..c7573e80
--- /dev/null
+++ b/public/service-worker.js
@@ -0,0 +1,180 @@
+/**
+ * Tractatus Service Worker
+ * - Version management and update notifications
+ * - Cache management for offline support
+ * - PWA functionality
+ */
+
+const CACHE_VERSION = '1.0.0';
+const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
+const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds
+
+// Assets to cache immediately on install
+const CRITICAL_ASSETS = [
+  '/',
+  '/index.html',
+  '/css/tailwind.css',
+  '/js/components/navbar.js',
+  '/images/tractatus-icon.svg',
+  '/favicon.svg'
+];
+
+// Install event - cache critical assets
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      console.log('[Service Worker] Caching critical assets');
+      return cache.addAll(CRITICAL_ASSETS);
+    }).then(() => {
+      // Force activation of new service worker
+      return self.skipWaiting();
+    })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => {
+            console.log('[Service Worker] Deleting old cache:', name);
+            return caches.delete(name);
+          })
+      );
+    }).then(() => {
+      // Take control of all clients immediately
+      return self.clients.claim();
+    })
+  );
+});
+
+// Fetch event - network-first strategy with cache fallback
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip chrome-extension and other non-http requests
+  if (!url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // HTML files: Network-first (always check for updates)
+  if (request.destination === 'document' || url.pathname.endsWith('.html')) {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          // Clone response to cache and return
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(request, responseClone);
+          });
+          return response;
+        })
+        .catch(() => {
+          // If network fails, try cache
+          return caches.match(request);
+        })
+    );
+    return;
+  }
+
+  // Static assets (CSS, JS, images): Cache-first
+  if (
+    request.destination === 'style' ||
+    request.destination === 'script' ||
+    request.destination === 'image' ||
+    request.destination === 'font'
+  ) {
+    event.respondWith(
+      caches.match(request).then((cachedResponse) => {
+        if (cachedResponse) {
+          return cachedResponse;
+        }
+        return fetch(request).then((response) => {
+          // Clone response to cache
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(request, responseClone);
+          });
+          return response;
+        });
+      })
+    );
+    return;
+  }
+
+  // API calls and other requests: Network-first
+  event.respondWith(
+    fetch(request)
+      .then((response) => {
+        return response;
+      })
+      .catch(() => {
+        return caches.match(request);
+      })
+  );
+});
+
+// Message event - handle version checks from clients
+self.addEventListener('message', (event) => {
+  if (event.data.type === 'CHECK_VERSION') {
+    checkVersion().then((versionInfo) => {
+      event.ports[0].postMessage({
+        type: 'VERSION_INFO',
+        ...versionInfo
+      });
+    });
+  }
+
+  if (event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+// Check for version updates
+async function checkVersion() {
+  try {
+    const response = await fetch('/version.json', { cache: 'no-store' });
+    const serverVersion = await response.json();
+
+    return {
+      currentVersion: CACHE_VERSION,
+      serverVersion: serverVersion.version,
+      updateAvailable: CACHE_VERSION !== serverVersion.version,
+      forceUpdate: serverVersion.forceUpdate,
+      changelog: serverVersion.changelog
+    };
+  } catch (error) {
+    console.error('[Service Worker] Version check failed:', error);
+    return {
+      currentVersion: CACHE_VERSION,
+      serverVersion: null,
+      updateAvailable: false,
+      error: true
+    };
+  }
+}
+
+// Periodic background sync for version checks (if supported)
+self.addEventListener('periodicsync', (event) => {
+  if (event.tag === 'version-check') {
+    event.waitUntil(
+      checkVersion().then((versionInfo) => {
+        if (versionInfo.updateAvailable) {
+          // Notify all clients about update
+          self.clients.matchAll().then((clients) => {
+            clients.forEach((client) => {
+              client.postMessage({
+                type: 'UPDATE_AVAILABLE',
+                ...versionInfo
+              });
+            });
+          });
+        }
+      })
+    );
+  }
+});
diff --git a/public/version.json b/public/version.json
new file mode 100644
index 00000000..a8ea6907
--- /dev/null
+++ b/public/version.json
@@ -0,0 +1,11 @@
+{
+  "version": "1.0.0",
+  "buildDate": "2025-10-14T10:30:00Z",
+  "changelog": [
+    "Landing page accuracy improvements",
+    "FAQ enhanced for Leader audience",
+    "Removed overstated claims"
+  ],
+  "forceUpdate": false,
+  "minVersion": "1.0.0"
+}
diff --git a/src/server.js b/src/server.js
index b9d34c48..acd8ad45 100644
--- a/src/server.js
+++ b/src/server.js
@@ -60,6 +60,40 @@ const limiter = rateLimit({
 });
 app.use('/api/', limiter);
 
+// Cache control middleware for static assets
+app.use((req, res, next) => {
+  const path = req.path;
+
+  // Version manifest and service worker: No cache (always fetch fresh)
+  if (path === '/version.json' || path === '/service-worker.js') {
+    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+  }
+  // HTML files: Short cache, always revalidate
+  else if (path.endsWith('.html') || path === '/') {
+    res.setHeader('Cache-Control', 'public, max-age=300, must-revalidate'); // 5 minutes
+  }
+  // CSS and JS files: Longer cache (we use version parameters)
+  else if (path.endsWith('.css') || path.endsWith('.js')) {
+    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); // 1 year
+  }
+  // Images and fonts: Long cache
+  else if (path.match(/\.(jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot)$/)) {
+    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable'); // 1 year
+  }
+  // PWA manifest: Medium cache
+  else if (path === '/manifest.json') {
+    res.setHeader('Cache-Control', 'public, max-age=86400'); // 1 day
+  }
+  // Everything else: Short cache
+  else {
+    res.setHeader('Cache-Control', 'public, max-age=3600'); // 1 hour
+  }
+
+  next();
+});
+
 // Static files
 app.use(express.static('public'));