Restructure Visual Mode right column as editorial blocks, add extension thumbnail

The Visual Mode section had three competing cards in the right column
(25 deterministic checks, Three ways to use it, Get the Chrome extension)
all wrapped in bordered/backgrounded containers. The live detection
overlay iframe on the left is the visual anchor for the section — the
right column should be quieter editorial blocks, not three cards
fighting for attention.

Layout changes
- Strip card chrome from .visual-mode-feature: no padding, background,
  or border-radius. Just an eyebrow label + paragraph in editorial flow.
- Strip card chrome from .detection-callout: no padding, background,
  border, border-radius, or hover-transform theatrics.
- Bump .visual-mode-details gap from spacing-md to spacing-xl so the
  three blocks breathe with editorial space instead of feeling stacked.
- Bump body text from 0.8125rem to 0.9375rem for readability without
  the card padding.

Extension callout
- Add extension-detection.png — a tight 600×508 crop of the Chrome
  extension's DevTools panel showing detected anti-patterns ("AI color
  palette", "Overused font", "Quality issues", "Low contrast text").
  Reads at thumbnail size and clearly shows the extension UI in action.
- Whole callout is a single anchor (entire row clickable).
- 88×88 image thumbnail on the left with a subtle border that shifts
  to accent on hover.
- NEW eyebrow stacked above the "Get the Chrome extension →" CTA, both
  left-aligned next to the thumbnail.

The result: the iframe carries the visual weight, the right column
becomes a quiet editorial sidebar, and the extension CTA gets just
enough visual punch (the thumbnail) without competing with the demo.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/css/styles.css

@@ -3676,32 +3676,32 @@ code {
 .visual-mode-details {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: var(--spacing-xl);
+  padding: var(--spacing-md) 0;
 }
 .visual-mode-feature {
-  padding: var(--spacing-md);
-  background: white;
-  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
 }
 .visual-mode-feature-label {
   display: block;
   font-family: var(--font-mono);
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--color-accent);
-  margin-bottom: var(--spacing-xs);
 }
 .visual-mode-feature p {
-  font-size: 0.8125rem;
+  font-size: 0.9375rem;
   line-height: 1.55;
   color: var(--color-charcoal);
   margin: 0;
 }
 .visual-mode-feature code {
   font-family: var(--font-mono);
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--color-ink);
 }
 .solution-section {
@@ -4710,34 +4710,33 @@ code {
   font-weight: 600;
 }
 .detection-callout {
-  display: block;
-  margin-bottom: var(--spacing-xl);
-  border: 1px solid var(--color-mist);
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--color-paper);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
   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);
+  width: 88px;
+  height: 88px;
+  flex-shrink: 0;
+  object-fit: cover;
+  object-position: top left;
+  border: 1px solid var(--color-mist);
+  border-radius: 6px;
+  transition: border-color 0.2s ease;
+}
+.detection-callout:hover .detection-callout-image {
+  border-color: var(--color-accent);
 }
 .detection-callout-inner {
+  flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-md);
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
 }
 .detection-badge {
   font-family: var(--font-mono);