Move demo caption inside .split-comparison, tighten its style

Caption was sitting with a ~56px gap below the labels (32px container
padding-bottom + 24px caption margin-top). Move the <p> inside
.split-comparison so the padding wraps the caption too, not separates
it from the labels. Drop caption margin-top from 24px to 12px and tone
the color down from charcoal to ash + 0.8125rem to match the rest of
the supporting-text rhythm on these pages.

scripts/build-sub-pages.js

@@ -54,8 +54,8 @@ function renderSkillDemo(skill) {
       <span class="split-label-item" data-point="before">Before</span>
       <span class="split-label-item" data-point="after">After</span>
     </div>
+    ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
   </div>
-  ${caption ? `<p class="skill-demo-caption">${escapeHtml(caption)}</p>` : ''}
 </section>`;
 }