diff --git a/public/css/main.css b/public/css/main.css
index b5c70af2b..aac4ef69a 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1399,59 +1399,46 @@ code {
 @import "./workflow.css";
 
 /* ============================================
-   BIAS GRID (Problem Section Enhancement)
+   BIAS TAGS (Compact Problem Section)
    ============================================ */
 
-.bias-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: var(--spacing-md);
-  margin-bottom: var(--spacing-xl);
+.bias-tags {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-lg);
 }
 
-.bias-item {
+.bias-tags-label {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ash);
+}
+
+.bias-tags-list {
   display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-md);
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-xs);
+}
+
+.bias-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 6px 12px;
   background: var(--color-cream);
   border: 1px solid var(--color-mist);
-  border-left: 3px solid var(--color-accent);
+  color: var(--color-charcoal);
   transition: all var(--duration-fast) var(--ease-out);
 }
 
-.bias-item:hover {
+.bias-tag:hover {
   border-color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-.bias-icon {
-  font-size: 1.25rem;
   color: var(--color-accent);
-  font-weight: 300;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.bias-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.bias-content strong {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--color-ink);
-}
-
-.bias-content span {
-  font-size: 0.8125rem;
-  color: var(--color-ash);
 }
 
 /* ============================================
diff --git a/public/index.html b/public/index.html
index fa507f1a9..a8640ac19 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,53 +51,8 @@
       <div class="problem-content">
         <p class="section-lead" data-reveal>Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes—every single time.</p>
 
-        <!-- Bias Examples Grid -->
-        <div class="bias-grid" data-reveal>
-          <div class="bias-item">
-            <span class="bias-icon">Aa</span>
-            <div class="bias-content">
-              <strong>Safe fonts</strong>
-              <span>Defaults to Inter, Roboto, system fonts</span>
-            </div>
-          </div>
-          <div class="bias-item">
-            <span class="bias-icon">◐</span>
-            <div class="bias-content">
-              <strong>Purple gradients</strong>
-              <span>Purple-to-blue on white backgrounds</span>
-            </div>
-          </div>
-          <div class="bias-item">
-            <span class="bias-icon">▢</span>
-            <div class="bias-content">
-              <strong>Cards everywhere</strong>
-              <span>Wraps everything in rounded boxes</span>
-            </div>
-          </div>
-          <div class="bias-item">
-            <span class="bias-icon">◫</span>
-            <div class="bias-content">
-              <strong>Gray on color</strong>
-              <span>Gray text on colored backgrounds</span>
-            </div>
-          </div>
-          <div class="bias-item">
-            <span class="bias-icon">≡</span>
-            <div class="bias-content">
-              <strong>Centered everything</strong>
-              <span>Centers all text and layouts</span>
-            </div>
-          </div>
-          <div class="bias-item">
-            <span class="bias-icon">◌</span>
-            <div class="bias-content">
-              <strong>Decorative shadows</strong>
-              <span>Adds shadows without purpose</span>
-            </div>
-          </div>
-        </div>
-
-        <div class="split-comparison" id="lens-comparison">
+        <!-- Before/After Demo - The Hero -->
+        <div class="split-comparison" id="lens-comparison" data-reveal>
           <div class="split-container">
             <!-- Before: AI Slop -->
             <div class="split-before">
@@ -145,6 +100,19 @@
             </div>
           </div>
         </div>
+
+        <!-- Compact Bias Tags -->
+        <div class="bias-tags" data-reveal>
+          <span class="bias-tags-label">Common AI defaults:</span>
+          <div class="bias-tags-list">
+            <span class="bias-tag">Inter/Roboto fonts</span>
+            <span class="bias-tag">Purple gradients</span>
+            <span class="bias-tag">Cards on cards</span>
+            <span class="bias-tag">Centered everything</span>
+            <span class="bias-tag">Gray text on color</span>
+            <span class="bias-tag">Decorative shadows</span>
+          </div>
+        </div>
       </div>
     </section>