From 0566a60dfa56f10d06819160cb45b706ddcc3f20 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Tue, 7 Apr 2026 00:59:31 -0700
Subject: [PATCH] Fix anti-patterns flagged by Impeccable on the homepage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero demo card no longer uses <h3> for its title, fixing the
  h1 → h3 skip in the document outline. The "after" card now uses
  <p class="impeccable-title"> matching the structure of the
  corresponding "before" slop-card (which already used a <div>).
- Constrains .changelog-items and .faq-answer to max-width: 70ch so
  long bullet points and FAQ paragraphs don't exceed comfortable
  reading length (was hitting ~135 chars/line).
- Bumps the destructive-action warning text in the /clarify command
  demo from #a16207 to #854d0e on #fef3c7, lifting the contrast from
  4.4:1 (just below WCAG AA) to ~6.4:1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 public/css/styles.css               | 2 ++
 public/css/workflow.css             | 2 ++
 public/index.html                   | 2 +-
 public/js/demos/commands/clarify.js | 2 +-
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index a4d28459a..70e3cf62b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1042,6 +1042,7 @@
   padding-left: var(--spacing-md);
   color: var(--color-charcoal);
   line-height: 1.7;
+  max-width: 70ch;
 }
 .changelog-items li {
   margin-bottom: var(--spacing-xs);
@@ -1135,6 +1136,7 @@
   padding: 0 0 var(--spacing-md);
   color: var(--color-charcoal);
   line-height: 1.7;
+  max-width: 70ch;
   animation: faqFadeIn 0.3s var(--ease-out);
 }
 .faq-answer p {
diff --git a/public/css/workflow.css b/public/css/workflow.css
index 23ba1082e..1016e3de7 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -1116,6 +1116,7 @@
   padding-left: var(--spacing-md);
   color: var(--color-charcoal);
   line-height: 1.7;
+  max-width: 70ch;
 }
 
 .changelog-items li {
@@ -1233,6 +1234,7 @@
   padding: 0 0 var(--spacing-md);
   color: var(--color-charcoal);
   line-height: 1.7;
+  max-width: 70ch;
   animation: faqFadeIn 0.3s var(--ease-out);
 }
 
diff --git a/public/index.html b/public/index.html
index 2b6ca4075..9d64f72cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -133,7 +133,7 @@
               <span class="split-badge split-badge--after">After</span>
               <div class="impeccable-card">
                 <p class="impeccable-eyebrow">Introducing</p>
-                <h3 class="impeccable-title">Thoughtful Design</h3>
+                <p class="impeccable-title">Thoughtful Design</p>
                 <p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
                 <button class="impeccable-button">Explore</button>
               </div>
diff --git a/public/js/demos/commands/clarify.js b/public/js/demos/commands/clarify.js
index f56bbacfa..e29e416c5 100644
--- a/public/js/demos/commands/clarify.js
+++ b/public/js/demos/commands/clarify.js
@@ -28,7 +28,7 @@ export default {
       </div>
       <div style="padding: 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px;">
         <div style="font-size: 0.8125rem; font-weight: 600; color: #92400e; margin-bottom: 4px;">Delete this project?</div>
-        <div style="font-size: 0.75rem; color: #a16207; line-height: 1.5;">This will permanently delete 23 files. You can't undo this.</div>
+        <div style="font-size: 0.75rem; color: #854d0e; line-height: 1.5;">This will permanently delete 23 files. You can't undo this.</div>
       </div>
       <button style="padding: 10px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 500;">Save and Continue →</button>
     </div>