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 -->