Progress bar layout refinement + step label readability

- StepperBar: stepper centred at 700px max-width, cart hugs right edge
- StepIndicator: bump desktop label fontSize to 0.875rem for readability
- DateTimeStep story: demo progress bar + cart in context

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/templates/WizardLayout/WizardLayout.tsx

@@ -117,11 +117,10 @@ const StepperBar: React.FC<{
         py: 1.5,
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 2,
+        gap: 3,
       }}
     >
-      <Box sx={{ flex: 1 }}>{stepper}</Box>
+      <Box sx={{ flex: 1, maxWidth: 700, mx: 'auto' }}>{stepper}</Box>
       {total && <Box sx={{ flexShrink: 0 }}>{total}</Box>}
     </Box>
   );