diff --git a/public/proof.html b/public/proof.html
index dfe883e..b57921c 100644
--- a/public/proof.html
+++ b/public/proof.html
@@ -1,89 +1,121 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Live Proof | CommandLayer</title>
-  <meta name="description" content="Live proof flows for CommandLayer receipts — runtime signs, verifier validates, tampering is rejected, and paid actions produce signed execution receipts." />
-  <link rel="icon" href="/favicon.ico" />
-  <link rel="stylesheet" href="/css/site.css" />
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Live Proof | CommandLayer</title>
+<meta name="description" content="Live proof flows for CommandLayer receipts — runtime signs, verifier validates, tampering is rejected, and paid actions produce signed execution receipts." />
+<link rel="icon" href="/favicon.ico" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="/css/site.css" />
+<style>
+  .brand{gap:0}.brand img{height:68px;width:auto;object-fit:contain}.brand span{display:none}.nav-links a.active{color:var(--text);background:var(--surface)}
+  .hero{padding:84px 0 64px;background:radial-gradient(1200px 360px at 50% -10%,rgba(82,152,255,.15),transparent 70%),#fff;text-align:center}
+  .hero h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.06;letter-spacing:-.04em;margin:0 0 14px}
+  .hero p{max-width:920px;margin:0 auto;color:var(--text-2);font-size:1.06rem;line-height:1.7}
+  .hero-actions{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
+  .section{padding:56px 0}
+  .section-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
+  .card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 22px rgba(99,91,255,.07)}
+  .card h3{margin:0 0 8px;font-size:1.04rem}
+  .card p{margin:0;color:var(--text-2);line-height:1.6}
+  .list{margin:8px 0 0;padding-left:18px;color:var(--text-2);line-height:1.8}
+  .status-block{background:#0E1322;color:#E2E8F0;border:1px solid rgba(30,41,59,.45);border-radius:14px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;line-height:1.8}
+  .status-block strong{color:#fff}
+  .link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
+  footer{border-top:1px solid var(--border);background:#fff}.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px 0}.footer-grid h4{font-size:14px;margin-bottom:10px}.footer-grid a{display:block;color:var(--text-2);margin:8px 0;font-size:14px}
+  @media(max-width:900px){.section-grid,.link-grid{grid-template-columns:1fr}.hero{padding:62px 0 42px}}
+  .nav-links a:hover,.nav-drop:hover>a,.nav-drop:focus-within>a,.nav-drop>a.active{color:var(--text);background:var(--surface)}.nav-drop{position:relative}.nav-drop>a{display:inline-flex;align-items:center;gap:4px}.nav-drop-menu{position:absolute;top:calc(100% - 1px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 34px rgba(15,23,42,.12);padding:8px;display:none;min-width:260px;z-index:200}.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}.nav-drop-menu a{display:block;white-space:nowrap}.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:grid}@media(max-width:900px){.nav-drop{width:100%}.nav-drop-menu{position:static;display:grid;margin-top:2px;min-width:0;box-shadow:none}}
+</style>
 </head>
 <body>
-  <nav class="site-nav">
-    <div class="container">
-      <a href="/">CommandLayer</a>
-      <a href="/protocol.html">Protocol</a>
-      <a href="/capabilities.html">Capabilities</a>
-      <a href="/proof.html" aria-current="page">Live Proof</a>
-      <a href="/receipts.html">Receipts</a>
-      <a href="/verify.html">Verifier</a>
-      <a href="/sdk-records.html">SDK</a>
-    </div>
-  </nav>
+<nav>
+  <div class="container nav-inner">
+    <a href="/" class="brand"><img src="/commandlayer-logo.png" alt="CommandLayer" /><span>CommandLayer</span></a>
+    <ul class="nav-links"><li><a href="/">Home</a></li><li><a href="/protocol.html">Protocol</a></li><li><a href="/capabilities.html">Capabilities</a></li><li><a href="/receipts.html">Receipts</a></li><li><a href="/proof.html" class="active">Live Proof</a></li><li><a href="/sdk-records.html">SDK</a></li><li class="nav-drop"><a href="/docs.html" aria-haspopup="true">Docs ▾</a><div class="nav-drop-menu"><a href="/docs.html">Docs Home</a><a href="/docs/wrap-your-agent.html">Wrap Your Agent</a><a href="/protocol.html">Protocol</a><a href="/capabilities.html">Capabilities</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a><a href="/runtime.html">Runtime</a><a href="/mcp.html">MCP Bridge</a><a href="/schemas.html">Schemas</a><a href="/api.html">API Reference</a><a href="/integrations.html">Integrations</a><a href="/verify.html">Verifier</a><a href="/claim.html">Claim / Namespace Activation</a></div></li><li><a href="/claim.html">Claim</a></li><li><a href="https://github.com/commandlayer" target="_blank" rel="noopener">GitHub</a></li></ul>
+  </div>
+</nav>
 
-  <main class="container" style="padding:48px 0 72px; max-width: 980px;">
-    <header style="margin-bottom:30px;">
-      <h1>Live Proof</h1>
+<main>
+  <section class="hero">
+    <div class="container">
+      <div class="hero-badge"><span class="badge-dot"></span>Live Proof</div>
+      <h1>Live proof for signed CommandLayer receipts</h1>
       <p>The runtime signs. The verifier validates. Tampering is rejected. These demos show CommandLayer receipts moving from action/event to signed proof to independent verification.</p>
-    </header>
+      <div class="hero-actions">
+        <a class="btn btn-primary btn-lg" href="/proof-flow-composer.html">Run Full Proof Flow</a>
+        <a class="btn btn-secondary btn-lg" href="/webhook-auto-verify.html">Try Auto Verify</a>
+        <a class="btn btn-secondary btn-lg" href="/receipts.html">Read Receipts</a>
+      </div>
+    </div>
+  </section>
 
-    <section style="margin-bottom:28px;">
-      <h2>Trust boundary upfront</h2>
+  <section class="section"><div class="container">
+    <div class="card">
+      <h3>Trust boundary upfront</h3>
       <p>The Coinbase webhook step in browser demos is simulated because real Coinbase delivery requires COINBASE_WEBHOOK_SECRET server-side. The x402 paid-action and verifier steps are live network calls. x402 runs in demo_accepted_envelope mode by default; provider_verified mode requires X402_PROVIDER_VERIFICATION_URL. Demo mode is not real settlement.</p>
-    </section>
-
-    <section style="margin-bottom:28px;">
-      <h2>Automatic verification</h2>
-      <p>Generate a receipt, verify it, tamper with it, and watch verification fail.</p>
-      <p><a href="/webhook-auto-verify.html">Automatic Webhook Verification</a></p>
-    </section>
-
-    <section style="margin-bottom:28px;">
-      <h2>Full proof flow</h2>
-      <p>Simulated Coinbase event → live x402 signed endpoint → action execution → live verifier.</p>
-      <p><a href="/proof-flow-composer.html">Full Proof Flow Composer</a></p>
-      <p>Successful runs should show <code>status: VERIFIED</code>, <code>public_key_source: ens_txt</code>, <code>ens_resolved: true</code>, <code>hash_matches: true</code>, and <code>signature_valid: true</code>.</p>
-    </section>
-
-    <section style="margin-bottom:28px;">
-      <h2>What each step proves</h2>
-      <ul>
-        <li><strong>Coinbase:</strong> event authenticity to server via HMAC; public portability begins after CommandLayer signing.</li>
-        <li><strong>x402:</strong> payment rail proves payment acceptance/settlement; CommandLayer proves execution result.</li>
-        <li><strong>Verify:</strong> ENS TXT public key, hash check, Ed25519 signature check.</li>
-      </ul>
-    </section>
-
-    <section style="margin-bottom:28px;">
-      <h2>What this does not replace</h2>
-      <ul>
-        <li>sender authentication for production webhooks</li>
-        <li>replay protection</li>
-        <li>rate limiting</li>
-        <li>real settlement unless provider_verified mode is configured</li>
-        <li>schema validation alone</li>
-      </ul>
-    </section>
+    </div>
+  </div></section>
 
-    <section>
-      <h2>Where to go next</h2>
-      <ul>
-        <li><a href="/receipts.html">Read Receipts</a></li>
-        <li><a href="/verify.html">Try Verifier</a></li>
-        <li><a href="/integrations.html">Explore Integrations</a></li>
-        <li><a href="/protocol.html">Explore Protocol</a></li>
-      </ul>
-    </section>
-  </main>
+  <section class="section" style="background:#f8faff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)"><div class="container">
+    <div class="section-grid">
+      <article class="card">
+        <h3>Automatic verification</h3>
+        <p>Generate a receipt, verify it, tamper with it, and watch verification fail.</p>
+        <p style="margin-top:10px"><a href="/webhook-auto-verify.html">Automatic Webhook Verification → /webhook-auto-verify.html</a></p>
+      </article>
+      <article class="card">
+        <h3>Full proof flow</h3>
+        <p>Simulated Coinbase event → live x402 signed endpoint → action execution → live verifier.</p>
+        <p style="margin-top:10px"><a href="/proof-flow-composer.html">Full Proof Flow Composer → /proof-flow-composer.html</a></p>
+      </article>
+    </div>
+  </div></section>
 
-  <footer>
-    <div class="container" style="padding:24px 0;">
-      <a href="/protocol.html">Protocol</a> ·
-      <a href="/capabilities.html">Capabilities</a> ·
-      <a href="/proof.html">Live Proof</a> ·
-      <a href="/receipts.html">Receipts</a> ·
-      <a href="/verify.html">Verifier</a>
+  <section class="section"><div class="container">
+    <div class="section-grid">
+      <article class="card">
+        <h3>What each step proves</h3>
+        <ul class="list">
+          <li>Coinbase: event authenticity to server via HMAC; public portability begins after CommandLayer signing.</li>
+          <li>x402: payment rail proves payment acceptance or settlement; CommandLayer proves execution result.</li>
+          <li>Verify: ENS TXT public key, canonical hash check, Ed25519 signature check.</li>
+        </ul>
+      </article>
+      <article class="card">
+        <h3>Successful verification fields</h3>
+        <div class="status-block"><strong>status:</strong> VERIFIED
+<strong>public_key_source:</strong> ens_txt
+<strong>ens_resolved:</strong> true
+<strong>hash_matches:</strong> true
+<strong>signature_valid:</strong> true</div>
+      </article>
+      <article class="card">
+        <h3>What this does not replace</h3>
+        <ul class="list">
+          <li>sender authentication for production webhooks</li>
+          <li>replay protection</li>
+          <li>rate limiting</li>
+          <li>real settlement unless provider_verified mode is configured</li>
+          <li>schema validation alone</li>
+        </ul>
+      </article>
+      <article class="card">
+        <h3>Where to go next</h3>
+        <ul class="list">
+          <li><a href="/receipts.html">Receipts → /receipts.html</a></li>
+          <li><a href="/verify.html">Verifier → /verify.html</a></li>
+          <li><a href="/integrations.html">Integrations → /integrations.html</a></li>
+          <li><a href="/protocol.html">Protocol → /protocol.html</a></li>
+          <li><a href="/capabilities.html">Capabilities → /capabilities.html</a></li>
+        </ul>
+      </article>
     </div>
-  </footer>
+  </div></section>
+</main>
+
+<footer><div class="container footer-grid"><div><h4>Product</h4><a href="/protocol.html">Protocol</a><a href="/capabilities.html">Capabilities</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a><a href="/integrations.html">Integrations</a><a href="/sdk-records.html">SDK</a><a href="/claim.html">Claim</a></div><div><h4>Developers</h4><a href="/docs.html">Docs</a><a href="/docs/wrap-your-agent.html">Wrap Your Agent</a><a href="/runtime.html">Runtime</a><a href="/mcp.html">MCP Bridge</a><a href="/schemas.html">Schemas</a><a href="/api.html">API Reference</a><a href="https://github.com/commandlayer" target="_blank" rel="noopener">GitHub</a></div><div><h4>Proof</h4><a href="/verify.html">Verifier</a><a href="/stack-proof-demo.html">Production Proof</a><a href="/receipts.html">Receipts</a><a href="/proof.html">Live Proof</a></div></div></footer>
 </body>
 </html>
