From d56a9fc7468e5409668d68fb2b9d207797d1db7b Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Sun, 11 Jan 2026 15:15:47 -0800
Subject: [PATCH] Refine What's Included box in hero section

- Match box width to paragraph above (45ch)
- Include frontend-design skill name specifically
- Add sample commands: /polish, /audit, /simplify, /bolder
- Clean two-line layout that wraps naturally

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 public/css/main.css | 60 +++++++++++++++++++++++++--------------------
 public/index.html   | 15 +++++++-----
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index 959e0fa1e..56643e7a2 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -487,48 +487,54 @@ code {
   margin: 0;
 }
 
-/* Hero Features - What's Included (inline) */
-.hero-features {
+/* Hero Included Box - Subtle "What's included" */
+.hero-included-box {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  border: 1px solid var(--color-mist);
+  background: transparent;
+  max-width: 45ch;
+}
+
+.hero-included-title {
+  font-family: var(--font-body);
+  font-size: 0.5625rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-ash);
+}
+
+.hero-included-items {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-xs) var(--spacing-sm);
-  font-size: 0.8125rem;
-  color: var(--color-ash);
-  margin-top: var(--spacing-xs);
-}
-
-.hero-feature {
-  display: inline-flex;
-  align-items: center;
   gap: 6px;
+  font-size: 0.8125rem;
+  color: var(--color-charcoal);
+  line-height: 1.5;
 }
 
-.hero-feature-label {
-  font-family: var(--font-body);
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-paper);
-  background: var(--color-ink);
-  padding: 2px 6px;
-  border-radius: 2px;
+.hero-included-items em {
+  font-style: normal;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
 }
 
-.hero-feature-divider {
+.hero-included-sep {
   color: var(--color-mist);
-  font-weight: 300;
 }
 
-@media (max-width: 600px) {
-  .hero-features {
+@media (max-width: 500px) {
+  .hero-included-items {
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--spacing-xs);
+    gap: 4px;
   }
 
-  .hero-feature-divider {
+  .hero-included-sep {
     display: none;
   }
 }
diff --git a/public/index.html b/public/index.html
index db56c1e83..091ede891 100644
--- a/public/index.html
+++ b/public/index.html
@@ -69,6 +69,15 @@
 
         <p class="hero-hook-text">Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.</p>
 
+        <div class="hero-included-box">
+          <span class="hero-included-title">What's included</span>
+          <div class="hero-included-items">
+            <span>Enhanced <em>frontend-design</em> skill + anti-patterns</span>
+            <span class="hero-included-sep">·</span>
+            <span>17 commands: /polish, /audit, /simplify, /bolder...</span>
+          </div>
+        </div>
+
         <div class="hero-cta-group">
           <a href="#downloads" class="hero-cta-combined">Get Started</a>
           <div class="hero-logos-inline">
@@ -81,12 +90,6 @@
             </div>
           </div>
         </div>
-
-        <div class="hero-features">
-          <span class="hero-feature"><span class="hero-feature-label">Skill</span> Enhanced frontend-design + anti-patterns</span>
-          <span class="hero-feature-divider">·</span>
-          <span class="hero-feature"><span class="hero-feature-label">Commands</span> /polish, /audit, /simplify + 14 more</span>
-        </div>
       </div>
 
       <!-- Right: Before/After Demo -->