diff --git a/public/css/workflow.css b/public/css/workflow.css
index a3d362ec6..390746c7f 100644
--- a/public/css/workflow.css
+++ b/public/css/workflow.css
@@ -1383,6 +1383,16 @@
   align-items: start;
 }
 
+.why-left {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.why-left .section-header {
+  margin-bottom: 0;
+}
+
 .why-tabs {
   list-style: none;
   padding: 0;
@@ -1390,11 +1400,10 @@
   display: flex;
   flex-direction: column;
   gap: 0;
-  border-top: 1px solid var(--color-mist);
 }
 
-.why-tabs li {
-  border-bottom: 1px solid var(--color-mist);
+.why-tabs li + li {
+  border-top: 1px solid var(--color-mist);
 }
 
 .why-tab {
@@ -1440,7 +1449,6 @@
 
 .why-tab.is-active {
   color: var(--color-ink);
-  border-left-color: var(--color-accent);
 }
 
 .why-tab.is-active .why-tab-num {
@@ -1577,13 +1585,22 @@
   transform: scaleY(0);
   pointer-events: none;
   opacity: 0;
-  transition: opacity 180ms var(--ease-out);
+  transition: opacity 220ms var(--ease-out);
 }
 
 .why-tab { position: relative; }
-.why-tab.is-active .why-tab-progress { opacity: 1; }
+
+/* Active tab always shows the accent column. When cycling, the column
+   fills from top to bottom over the cycle window. When not cycling
+   (user paused or clicked), it stays full-height so the active state
+   is unambiguous. */
+.why-tab.is-active .why-tab-progress {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
 .why-tab.is-active.is-cycling .why-tab-progress {
-  animation: whyTabProgress var(--why-cycle-ms, 7000ms) linear forwards;
+  animation: whyTabProgress var(--why-cycle-ms, 7000ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 @keyframes whyTabProgress {
diff --git a/public/index.html b/public/index.html
index 2e1714ea8..fbbafba89 100644
--- a/public/index.html
+++ b/public/index.html
@@ -289,13 +289,14 @@
 
     <!-- 04. WHY IMPECCABLE - Feature loop -->
     <section class="why-section" id="why">
-      <div class="section-header" data-reveal>
-        <span class="section-number">04</span>
-        <h2 class="section-title">Why Impeccable</h2>
-      </div>
       <div class="why-content" data-reveal>
         <div class="why-layout">
-          <ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
+          <div class="why-left">
+            <div class="section-header">
+              <span class="section-number">04</span>
+              <h2 class="section-title">Why Impeccable</h2>
+            </div>
+            <ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
             <li><button role="tab" class="why-tab is-active" data-index="0" aria-selected="true" aria-controls="why-panel-0"><span class="why-tab-num">01</span><span class="why-tab-label">Intentional design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="1" aria-selected="false" aria-controls="why-panel-1"><span class="why-tab-num">02</span><span class="why-tab-label">Brand and product, both</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="2" aria-selected="false" aria-controls="why-panel-2"><span class="why-tab-num">03</span><span class="why-tab-label">Production codebases</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
@@ -303,7 +304,8 @@
             <li><button role="tab" class="why-tab" data-index="4" aria-selected="false" aria-controls="why-panel-4"><span class="why-tab-num">05</span><span class="why-tab-label">DESIGN.md, spec-compliant</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="5" aria-selected="false" aria-controls="why-panel-5"><span class="why-tab-num">06</span><span class="why-tab-label">CI/CD-ready</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
             <li><button role="tab" class="why-tab" data-index="6" aria-selected="false" aria-controls="why-panel-6"><span class="why-tab-num">07</span><span class="why-tab-label">Chrome extension</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
-          </ol>
+            </ol>
+          </div>
 
           <div class="why-panels">
             <article class="why-panel is-active" id="why-panel-0" role="tabpanel" data-index="0">