diff --git a/public/css/main.css b/public/css/main.css
index f49d047eb..9b173f253 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -2619,19 +2619,40 @@ code {
 }
 
 
-/* Detection callout — horizontal below cards */
+/* Detection callout — image hero with NEW badge + CTA below.
+   The whole callout is a single anchor so the entire card is clickable. */
 .detection-callout {
+  display: block;
   margin-bottom: var(--spacing-xl);
   border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--color-paper);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.detection-callout:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px -8px var(--color-accent-dim);
+}
+
+.detection-callout-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: var(--color-cream);
+  border-bottom: 1px solid var(--color-mist);
 }
 
 .detection-callout-inner {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--spacing-md);
-  flex-wrap: wrap;
+  padding: var(--spacing-sm) var(--spacing-md);
 }
 
 .detection-badge {
@@ -2664,20 +2685,15 @@ code {
 .detection-cmd {
   flex-shrink: 0;
   font-family: var(--font-body);
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--color-ink);
-  background: oklch(96% 0.005 350);
-  padding: 6px 14px;
-  border-radius: 6px;
   white-space: nowrap;
-  text-decoration: none;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease;
 }
 
-a.detection-cmd:hover {
-  background: var(--color-accent);
-  color: white;
+.detection-callout:hover .detection-cmd {
+  color: var(--color-accent);
 }
 
 /* Antidote footer */
diff --git a/public/css/styles.css b/public/css/styles.css
index 1dabd13ab..fcb3d0bb2 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -4710,16 +4710,34 @@ code {
   font-weight: 600;
 }
 .detection-callout {
+  display: block;
   margin-bottom: var(--spacing-xl);
   border: 1px solid var(--color-mist);
-  border-radius: 8px;
-  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--color-paper);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+.detection-callout:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 32px -8px var(--color-accent-dim);
+}
+.detection-callout-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: var(--color-cream);
+  border-bottom: 1px solid var(--color-mist);
 }
 .detection-callout-inner {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--spacing-md);
-  flex-wrap: wrap;
+  padding: var(--spacing-sm) var(--spacing-md);
 }
 .detection-badge {
   font-family: var(--font-mono);
@@ -4748,19 +4766,14 @@ code {
 .detection-cmd {
   flex-shrink: 0;
   font-family: var(--font-body);
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--color-ink);
-  background: oklch(96% 0.005 350);
-  padding: 6px 14px;
-  border-radius: 6px;
   white-space: nowrap;
-  text-decoration: none;
-  transition: background 0.15s ease, color 0.15s ease;
+  transition: color 0.15s ease;
 }
-a.detection-cmd:hover {
-  background: var(--color-accent);
-  color: white;
+.detection-callout:hover .detection-cmd {
+  color: var(--color-accent);
 }
 .antidote-footer {
   text-align: center;
diff --git a/public/index.html b/public/index.html
index 066c5ba0e..5419cb611 100644
--- a/public/index.html
+++ b/public/index.html
@@ -268,7 +268,7 @@
         <h2 class="section-title">Visual Mode</h2>
       </div>
       <div class="visual-mode-content">
-        <p class="section-lead" data-reveal>See design issues highlighted directly in your browser. When you run <code>/critique</code>, Impeccable injects a diagnostic overlay onto your live page. No screenshots, no guesswork.</p>
+        <p class="section-lead" data-reveal>See design issues highlighted directly on the page. No screenshots, no guesswork — Impeccable&rsquo;s overlay shows you exactly what&rsquo;s wrong and where.</p>
 
         <div class="visual-mode-demo" data-reveal>
           <div class="visual-mode-preview">
@@ -286,15 +286,16 @@
               <p>No LLM needed. Pattern matching catches purple gradients, overused fonts, nested cards, low contrast, and more.</p>
             </div>
             <div class="visual-mode-feature">
-              <span class="visual-mode-feature-label">Any workflow</span>
-              <p>Embedded in <code>/critique</code>, or run standalone via the CLI.</p>
+              <span class="visual-mode-feature-label">Three ways to use it</span>
+              <p>The <strong>Chrome extension</strong> on any site, embedded in <code>/critique</code> during an AI design review, or standalone via <code>npx impeccable live</code>.</p>
             </div>
-            <div class="detection-callout">
+            <a href="https://chromewebstore.google.com/" class="detection-callout" target="_blank" rel="noopener">
+              <img src="assets/extension-detection.png" alt="Impeccable Chrome extension flagging anti-patterns on a live page" class="detection-callout-image" loading="lazy" width="1200" height="652">
               <div class="detection-callout-inner">
                 <span class="detection-badge">New!</span>
-                <code class="detection-cmd">npx impeccable detect src/</code>
+                <span class="detection-cmd">Get the Chrome extension &rarr;</span>
               </div>
-            </div>
+            </a>
           </div>
         </div>
       </div>