Merge branch 'fix/pricing-header-layout'

src/views/product/price.vue

@@ -15,7 +15,11 @@
       />
 
       <section class="price-workbench">
-        <div class="workbench-head workbench-head--actions-only">
+        <div class="workbench-head">
+          <div>
+            <p class="section-eyebrow">PRODUCT PRICING</p>
+            <h2>{{ currentStepTitle }}</h2>
+          </div>
           <TrainingTaskToolbar class="pricing-toolbar" :task-key="TASK_KEY" :on-export="exportPriceOutcome" />
         </div>
 
@@ -39,12 +43,6 @@
         </nav>
 
         <section class="step-card">
-        <header class="step-title-row">
-          <div>
-            <p class="section-eyebrow">STEP {{ String(currentStep).padStart(2, "0") }}</p>
-            <h3>{{ currentStepTitle }}</h3>
-          </div>
-        </header>
 
         <template v-if="currentStep === 1">
           <p class="intro-copy">{{ labels.formulaTip }}</p>
@@ -1585,10 +1583,28 @@ onMounted(async () => {
     background: rgba(0, 25, 42, 0.64);
   }
 
-  .workbench-head--actions-only {
+  .workbench-head {
     display: flex;
-    justify-content: flex-end;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 18px;
     margin-bottom: 18px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid rgba(99, 217, 255, 0.27);
+  }
+
+  .section-eyebrow {
+    margin: 0;
+    color: #71dfff;
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.12em;
+  }
+
+  .workbench-head h2 {
+    margin: 5px 0 0;
+    color: #fff;
+    font-size: 24px;
   }
 
   .workbench-actions {