diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css
index c13970cf5..d0a300314 100644
--- a/public/css/sub-pages.css
+++ b/public/css/sub-pages.css
@@ -1107,6 +1107,8 @@ main#main {
   letter-spacing: 0.14em;
   color: var(--color-ash);
   margin-bottom: var(--spacing-sm);
+  /* Eyebrow now lives inside .split-comparison (which has 32px
+     padding), so it aligns with the visible card edge automatically. */
 }
 
 /* ============================================
diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js
index fa1f724f9..5ef53f6a9 100644
--- a/scripts/build-sub-pages.js
+++ b/scripts/build-sub-pages.js
@@ -39,8 +39,8 @@ function renderSkillDemo(skill) {
   const { before, after, caption } = skill.demo;
   return `
 <section class="skill-demo" aria-label="Before and after demo">
-  <p class="skill-demo-eyebrow">Drag or hover to compare</p>
   <div class="split-comparison" data-demo="skill-${skill.id}">
+    <p class="skill-demo-eyebrow">Drag or hover to compare</p>
     <div class="split-container">
       <div class="split-before">
         <div class="split-content">${before}</div>