feat(site): Why Impeccable section with tabbed feature loop

New section 04 with a vertical tab list on the left and a panel on the
right. Seven items covering the actual differentiators:

1. Intentional design — PRODUCT.md + DESIGN.md + shape as the opposite
   of one-shot-mock tools.
2. Brand and product, both — the register split, called out against
   frontend-design-style single-mode skills.
3. Production codebases — reads your design system, daily-driver.
4. Where you code — IDE-native, no canvas, no handoff.
5. DESIGN.md — Google Stitch spec-compliant, interoperable.
6. CI/CD-ready — CLI + JSON output for PR gates.
7. Chrome extension — 25 checks, one click, any page.

Section numbers bumped: Visual 04→05, Install 05→06, Changelog 06→07,
FAQ 07→08. Sticky nav updated to match.

Arrow-key tab navigation, aria-selected, hidden attr on inactive
panels, subtle fade on switch, respects prefers-reduced-motion.
Vertical layout on desktop, stacked on mobile.

public/css/workflow.css

@@ -1366,3 +1366,210 @@
     transform: translateY(0);
   }
 }
+
+/* ============================================
+   WHY IMPECCABLE — tabbed feature loop
+   ============================================ */
+
+.why-section {
+  padding: var(--spacing-3xl) 0;
+  max-width: var(--width-max);
+  margin: 0 auto;
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}
+
+.why-content .section-lead {
+  max-width: 42ch;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.why-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 360px) 1fr;
+  gap: var(--spacing-2xl);
+  align-items: start;
+}
+
+.why-tabs {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  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-tab {
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  gap: var(--spacing-sm);
+  align-items: baseline;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
+  background: transparent;
+  border: 0;
+  border-left: 2px solid transparent;
+  padding-left: var(--spacing-sm);
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-body);
+  color: var(--color-ash);
+  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
+}
+
+.why-tab-num {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.18em;
+  color: var(--color-ash);
+  transition: color 180ms var(--ease-out);
+}
+
+.why-tab-label {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.why-tab:hover {
+  color: var(--color-ink);
+}
+
+.why-tab:hover .why-tab-num {
+  color: var(--color-charcoal);
+}
+
+.why-tab.is-active {
+  color: var(--color-ink);
+  border-left-color: var(--color-accent);
+}
+
+.why-tab.is-active .why-tab-num {
+  color: var(--color-accent);
+}
+
+.why-tab:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.why-panels {
+  position: relative;
+  min-height: 280px;
+  padding-left: var(--spacing-md);
+}
+
+.why-panel {
+  display: none;
+  max-width: 60ch;
+  animation: whyFadeIn 260ms var(--ease-out);
+}
+
+.why-panel.is-active {
+  display: block;
+}
+
+.why-panel-title {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 400;
+  font-size: clamp(1.75rem, 3vw, 2.5rem);
+  line-height: 1.1;
+  color: var(--color-ink);
+  margin: 0 0 var(--spacing-md);
+  letter-spacing: -0.01em;
+}
+
+.why-panel-body {
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.65;
+  color: var(--color-charcoal);
+  margin: 0 0 var(--spacing-md);
+}
+
+.why-panel-body em {
+  font-style: italic;
+  color: var(--color-ink);
+  font-weight: 500;
+}
+
+.why-panel-body a {
+  color: var(--color-ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-accent);
+}
+
+.why-panel-body a:hover {
+  color: var(--color-accent);
+}
+
+.why-panel-body code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: var(--color-mist);
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: var(--color-ink);
+}
+
+.why-panel-meta {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  color: var(--color-ash);
+  margin: var(--spacing-md) 0 0;
+}
+
+.why-panel-meta code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  color: var(--color-charcoal);
+}
+
+.why-panel-meta a {
+  color: var(--color-ink);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-accent);
+}
+
+.why-panel-meta a:hover { color: var(--color-accent); }
+
+@keyframes whyFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .why-panel { animation: none; }
+}
+
+@media (max-width: 900px) {
+  .why-section {
+    padding-left: var(--spacing-md);
+    padding-right: var(--spacing-md);
+  }
+  .why-layout {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+  }
+  .why-panels {
+    padding-left: 0;
+    min-height: auto;
+  }
+  .why-tab-label {
+    font-size: 1rem;
+  }
+  .why-tab-num {
+    font-size: 0.625rem;
+  }
+}