From 6a53b8fdf704e83f999f80a989188ef3327563bf Mon Sep 17 00:00:00 2001
From: Scott Scoble <scott@scoble.me>
Date: Wed, 29 Apr 2026 16:58:04 -0700
Subject: [PATCH] Fix: correct 'What is Speckl?' positioning from multi-agent
 system to open standard

- Removed inaccurate multi-agent system description and architecture SVG
- Replaced with honest framing: Speckl is an open standard (methodology + language spec)
- Removed Discord CTA button per Scott's request
- Removed stale favicon.svg from landing dir
- General polish: hero layout, mobile breakpoints
---
 landing/index.html | 214 +++++++++++++++------------------------------
 1 file changed, 70 insertions(+), 144 deletions(-)

diff --git a/landing/index.html b/landing/index.html
index bcaf3d3..1c7b9d3 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -4,14 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Speckl — Spec-First Development with Dark Provenance</title>
-  <meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is a specification-first development system for regulated industries.">
+  <meta name="description" content="Write what your system should do. Prove it. Ship with full traceability. Speckl is an open standard for specification-first development with dark provenance.">
   <link rel="icon" href="favicon.svg" type="image/svg+xml">
   <link rel="canonical" href="https://speckl.scoble.me/">
   <meta property="og:title" content="Speckl — Spec-First Development with Dark Provenance">
   <meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://speckl.scoble.me/">
-  <meta property="og:image" content="https://speckl.scoble.me/favicon.svg">
+  <meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
   <style>
     :root {
       --bg: #0a0a0f;
@@ -23,7 +23,6 @@
       --accent-glow: rgba(74, 158, 255, 0.3);
       --border: #2a2a35;
       --code-bg: #0d0d12;
-      --max-width: 960px;
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -36,9 +35,8 @@
       min-height: 100vh;
     }
 
-    /* ===== HERO ===== */
     .hero {
-      padding: 6rem 2rem 5rem;
+      padding: 8rem 1.5rem 6rem;
       text-align: center;
       background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
       position: relative;
@@ -48,48 +46,36 @@
     .hero::before {
       content: '';
       position: absolute;
-      top: 0; left: 50%; width: 800px; height: 800px;
-      transform: translate(-50%, -40%);
-      background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
+      top: -50%; left: -50%; width: 200%; height: 200%;
+      background: radial-gradient(circle at 30% 30%, var(--accent-glow) 0%, transparent 50%),
+                  radial-gradient(circle at 70% 70%, rgba(100,100,255,0.1) 0%, transparent 40%);
       pointer-events: none;
     }
 
-    .hero-content {
-      position: relative;
-      max-width: var(--max-width);
-      margin: 0 auto;
-    }
+    .hero-content { position: relative; max-width: 800px; margin: 0 auto; }
 
     .hero h1 {
-      font-size: clamp(2.5rem, 6vw, 4rem);
+      font-size: clamp(2.5rem, 8vw, 4.5rem);
       font-weight: 700;
       letter-spacing: -0.02em;
       margin-bottom: 1rem;
       background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-      background-clip: text;
     }
 
     .hero-tagline {
-      font-size: clamp(1.05rem, 2.5vw, 1.3rem);
+      font-size: clamp(1.1rem, 3vw, 1.4rem);
       color: var(--text-muted);
-      margin-bottom: 2rem;
+      margin-bottom: 2.5rem;
       font-weight: 300;
-      line-height: 1.7;
     }
 
-    .hero-cta {
-      display: flex;
-      gap: 0.75rem;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
+    .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
 
-    /* ===== BUTTONS ===== */
     .btn {
       display: inline-flex; align-items: center; gap: 0.5rem;
-      padding: 0.75rem 1.5rem; border-radius: 0.5rem;
-      font-size: 0.95rem; font-weight: 500; text-decoration: none;
+      padding: 0.875rem 1.75rem; border-radius: 0.5rem;
+      font-size: 1rem; font-weight: 500; text-decoration: none;
       transition: all 0.2s ease; border: none; cursor: pointer;
     }
 
@@ -99,41 +85,33 @@
     .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
     .btn-secondary:hover { background: var(--border); }
 
-    /* ===== SECTIONS ===== */
-    section {
-      padding: 4rem 2rem;
-      max-width: var(--max-width);
-      margin: 0 auto;
-    }
-
+    section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
     section + section { border-top: 1px solid var(--border); }
 
-    h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--text); }
-    h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent); }
+    h2 { font-size: 1.875rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text); }
+    h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--accent); }
     p { color: var(--text-muted); margin-bottom: 1rem; }
 
-    /* ===== FEATURES (2×2 grid) ===== */
     .features {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1.25rem;
-      margin-top: 1.5rem;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 1.5rem;
+      margin-top: 2rem;
     }
 
     .feature-card {
       background: var(--bg-card); border: 1px solid var(--border);
-      border-radius: 0.75rem; padding: 1.25rem;
+      border-radius: 0.75rem; padding: 1.5rem;
       transition: border-color 0.2s ease;
     }
     .feature-card:hover { border-color: var(--accent); }
 
-    /* ===== CODE BLOCK ===== */
     .code-block {
       background: var(--code-bg); border: 1px solid var(--border);
-      border-radius: 0.75rem; padding: 1.25rem; margin: 1.5rem 0;
+      border-radius: 0.75rem; padding: 1.5rem; margin: 1.5rem 0;
       overflow-x: auto;
-      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
-      font-size: 0.85rem; line-height: 1.65;
+      font-family: 'SF Mono', Monaco, monospace;
+      font-size: 0.875rem; line-height: 1.7;
     }
     .code-block pre {
       margin: 0; padding: 0; background: transparent; border: none;
@@ -145,86 +123,70 @@
     .code-block .st { color: #f1fa8c; }
     .code-block .cm { color: #6272a4; }
 
-    /* ===== ARCHITECTURE DIAGRAM ===== */
-    .diagram-container { margin: 1.5rem 0; }
+    .diagram-container { margin: 2rem 0; }
     .diagram-container h3 {
       text-align: center;
-      font-size: 1.1rem;
+      font-size: 1.25rem;
       font-weight: 600;
-      margin-bottom: 0.75rem;
+      margin-bottom: 1rem;
       color: var(--text);
     }
 
-    /* ===== PHILOSOPHY ===== */
     .philosophy-grid {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1.5rem;
-      margin-top: 1.5rem;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 2rem; margin-top: 2rem;
     }
     .philosophy-item { text-align: center; }
     .philosophy-icon {
-      width: 44px; height: 44px; margin: 0 auto 0.75rem;
+      width: 48px; height: 48px; margin: 0 auto 1rem;
       background: var(--bg-elevated); border: 1px solid var(--border);
-      border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
-      font-size: 1.25rem;
+      border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
+      font-size: 1.5rem;
     }
 
-    /* ===== ROADMAP ===== */
     .roadmap {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 0;
-      margin-top: 1.5rem;
+      display: flex; gap: 0; margin-top: 2rem; flex-wrap: wrap;
     }
     .roadmap-phase {
-      padding: 1.25rem;
+      flex: 1; min-width: 200px; padding: 1.5rem;
       background: var(--bg-card); border: 1px solid var(--border);
     }
+    .roadmap-phase:first-child { border-radius: 0.75rem 0 0 0.75rem; }
+    .roadmap-phase:last-child { border-radius: 0 0.75rem 0.75rem 0; }
     .roadmap-phase + .roadmap-phase { border-left: none; }
-    .roadmap-phase:first-child { border-radius: 0.5rem 0 0 0.5rem; }
-    .roadmap-phase:last-child { border-radius: 0 0.5rem 0.5rem 0; }
     .roadmap-phase h4 {
-      color: var(--accent); font-size: 0.8rem; text-transform: uppercase;
-      letter-spacing: 0.05em; margin-bottom: 0.4rem;
+      color: var(--accent); font-size: 0.875rem; text-transform: uppercase;
+      letter-spacing: 0.05em; margin-bottom: 0.5rem;
     }
-    .roadmap-phase p { font-size: 0.85rem; margin: 0; }
+    .roadmap-phase p { font-size: 0.9rem; margin: 0; }
 
-    /* ===== FOOTER ===== */
     footer {
-      text-align: center; padding: 2.5rem 2rem;
+      text-align: center; padding: 3rem 1.5rem;
       border-top: 1px solid var(--border);
-      color: var(--text-muted); font-size: 0.85rem;
+      color: var(--text-muted); font-size: 0.875rem;
     }
     footer a { color: var(--accent); text-decoration: none; }
     footer a:hover { text-decoration: underline; }
 
-    /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
-      .features { grid-template-columns: 1fr; }
-      .philosophy-grid { grid-template-columns: 1fr; }
-      .roadmap { grid-template-columns: 1fr; }
-      .roadmap-phase { border-radius: 0 !important; }
-      .roadmap-phase + .roadmap-phase { border-left: 1px solid var(--border); border-top: none; }
-      .roadmap-phase:first-child { border-radius: 0.5rem 0.5rem 0 0 !important; }
-      .roadmap-phase:last-child { border-radius: 0 0 0.5rem 0.5rem !important; }
+      .roadmap { flex-direction: column; }
+      .roadmap-phase, .roadmap-phase:first-child, .roadmap-phase:last-child {
+        border-radius: 0; border-left: 1px solid var(--border);
+      }
+      .roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
+      .roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
     }
 
-    @media (min-width: 769px) and (max-width: 1024px) {
-      .features { grid-template-columns: repeat(2, 1fr); }
-      .roadmap { grid-template-columns: repeat(2, 1fr); }
-      .roadmap-phase:nth-child(2) { border-radius: 0 0.5rem 0 0; }
-      .roadmap-phase:nth-child(3) { border-radius: 0 0 0 0.5rem; border-top: none; border-left: 1px solid var(--border); }
-    }
-
-    @media (max-width: 480px) {
-      .hero { padding: 4rem 1.25rem 3rem; }
+    @media (max-width: 375px) {
+      .hero { padding: 4rem 1rem 3rem; }
       .hero h1 { font-size: 2rem; }
       .hero-tagline { font-size: 1rem; }
-      .btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
-      section { padding: 3rem 1.25rem; }
-      .code-block { padding: 1rem; font-size: 0.8rem; }
-      h2 { font-size: 1.4rem; }
+      .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
+      section { padding: 3.5rem 1rem; }
+      .code-block { padding: 1rem; }
+      .code-block pre { font-size: 0.8rem; }
+      h2 { font-size: 1.5rem; }
     }
   </style>
 </head>
@@ -237,69 +199,33 @@
     <div class="hero-cta">
       <a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
       <a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
+
     </div>
   </div>
 </header>
 
 <section id="what">
   <h2>What is Speckl?</h2>
-  <p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
-
-  <div class="diagram-container">
-    <h3>System Architecture</h3>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; display: block; margin: 0 auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
-      <defs>
-        <marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
-          <polygon points="0 0, 10 3.5, 0 7"/>
-        </marker>
-      </defs>
-      <!-- Orchestrator -->
-      <rect x="170" y="15" width="260" height="65" rx="8" fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>
-      <text x="300" y="45" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="15" font-weight="bold">Orchestrator</text>
-      <text x="300" y="63" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="11">Accepts Specks, decomposes tasks</text>
-      <!-- Arrow: Orchestrator → Team Lead Verification -->
-      <line x1="220" y1="80" x2="165" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
-      <!-- Arrow: Orchestrator → Team Lead Codegen -->
-      <line x1="380" y1="80" x2="435" y2="145" stroke="#3b82f6" stroke-width="2" marker-end="url(#arr)"/>
-      <!-- Team Lead: Verification -->
-      <rect x="60" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="2"/>
-      <text x="165" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
-      <text x="165" y="197" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="12">Verification</text>
-      <!-- Team Lead: Codegen -->
-      <rect x="330" y="150" width="210" height="60" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="2"/>
-      <text x="435" y="177" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Team Lead</text>
-      <text x="435" y="197" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="12">Codegen</text>
-      <!-- Arrow: Team Lead Verification → Z3 SME -->
-      <line x1="165" y1="210" x2="165" y2="250" stroke="#f59e0b" stroke-width="2" marker-end="url(#arr)"/>
-      <!-- Arrow: Team Lead Codegen → TypeScript SME -->
-      <line x1="435" y1="210" x2="435" y2="250" stroke="#10b981" stroke-width="2" marker-end="url(#arr)"/>
-      <!-- SME: Z3 -->
-      <rect x="60" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#f59e0b" stroke-width="1.5"/>
-      <text x="165" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Z3 SME</text>
-      <text x="165" y="295" text-anchor="middle" fill="#fbbf24" font-family="system-ui, sans-serif" font-size="11">(verify)</text>
-      <!-- SME: TypeScript -->
-      <rect x="330" y="255" width="210" height="50" rx="8" fill="#1e3a5f" stroke="#10b981" stroke-width="1.5"/>
-      <text x="435" y="277" text-anchor="middle" fill="#f8fafc" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">TypeScript SME</text>
-      <text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
-    </svg>
-  </div>
-
+  <p>Speckl is an <strong>open standard</strong> for specification-first development with dark provenance. It defines how to write what a system should do — in a machine-verifiable format — before any code is written. Every behavior traces back to its source of intent.</p>
+  
+  <p>Speckl is not a product or a platform. It is a <strong>methodology and language specification</strong>, published freely under MIT. The SpeckDL language, the Dark Provenance methodology, and the reference implementations define the standard. Products built on it — compilers, verification tools, compliance APIs — will come as the ecosystem grows.</p>
+  
   <div class="features">
     <div class="feature-card">
-      <h3>🎯 Specification-First</h3>
-      <p>Write what your system should do in SpeckDL, a constraint-based specification language. Z3 proves your specs are consistent before any code exists.</p>
+      <h3>📝 SpeckDL Language</h3>
+      <p>A constraint-based specification language that defines <em>what</em> a system does, not <em>how</em>. Specs are small, stable, and machine-verifiable — the audit surface for regulated systems.</p>
     </div>
     <div class="feature-card">
       <h3>🔗 Dark Provenance</h3>
-      <p>Every function, every branch, every side effect links back to its source — a regulation, a design decision, a conversation. Invisible until needed, always complete.</p>
+      <p>A methodology where every behavior traces back to its source — a regulation, a design decision, a conversation. The provenance graph is always present, materialized on demand for audits or debugging.</p>
     </div>
     <div class="feature-card">
-      <h3>🤖 Multi-Agent System</h3>
-      <p>Orchestrator, team leads, and SMEs collaborate on specs. The harness scales automatically under load. No human coordination required.</p>
+      <h3>🧩 Reference Implementations</h3>
+      <p>Minimal reference tools for SpeckDL parsing, Z3 constraint verification, and provenance graph generation. The building blocks for tooling, not a production system.</p>
     </div>
     <div class="feature-card">
-      <h3>🛡️ Regulated by Design</h3>
-      <p>Speckl targets DO-178C, IEC 62304, ISO 26262, FDA 21 CFR 820. Compliance is structural, not bolted-on.</p>
+      <h3>🏗️ Ecosystem-First</h3>
+      <p>The standard is the foundation. Consulting, SaaS tooling, and compliance APIs will build on it — validated through real-world use before they ship.</p>
     </div>
   </div>
 </section>
@@ -327,7 +253,7 @@
 
 <section id="philosophy">
   <h2>Why Specifications?</h2>
-
+  
   <div class="philosophy-grid">
     <div class="philosophy-item">
       <div class="philosophy-icon">📦</div>
@@ -349,7 +275,7 @@
 
 <section id="roadmap">
   <h2>Roadmap</h2>
-
+  
   <div class="roadmap">
     <div class="roadmap-phase">
       <h4>Phase A — Now</h4>
@@ -360,11 +286,11 @@
       <p><strong>Consulting:</strong> Hands-on engagements with regulated-industry teams.</p>
     </div>
     <div class="roadmap-phase">
-      <h4>Phase C — 3–9mo</h4>
+      <h4>Phase C — 3-9mo</h4>
       <p><strong>SaaS:</strong> Spec editor, live Z3 verification, provenance graph browser.</p>
     </div>
     <div class="roadmap-phase">
-      <h4>Phase D — 9–18mo</h4>
+      <h4>Phase D — 9-18mo</h4>
       <p><strong>Compliance API:</strong> Audit reports, traceability matrices.</p>
     </div>
   </div>
@@ -376,4 +302,4 @@
 </footer>
 
 </body>
-</html>
\ No newline at end of file
+</html>