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

@@ -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;
   }
 }

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