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/pages/DateTimeStep/DateTimeStep.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { DateTimeStep } from './DateTimeStep';
 import type { DateTimeStepValues, DateTimeStepErrors } from './DateTimeStep';
 import { Navigation } from '../../organisms/Navigation';
+import { StepIndicator } from '../../molecules/StepIndicator';
+import { CartButton } from '../../molecules/CartButton';
 import Box from '@mui/material/Box';
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -34,6 +36,26 @@ const nav = (
   />
 );
 
+const stepper = (
+  <StepIndicator
+    steps={[
+      { label: 'Details' },
+      { label: 'Venues' },
+      { label: 'Coffins' },
+      { label: 'Extras' },
+      { label: 'Review' },
+    ]}
+    currentStep={0}
+  />
+);
+
+const cart = (
+  <CartButton
+    total={4950}
+    items={[{ section: 'Funeral Provider', name: 'H. Parsons — Essential Package', price: 4950 }]}
+  />
+);
+
 const defaultValues: DateTimeStepValues = {
   firstName: '',
   surname: '',
@@ -90,6 +112,8 @@ export const Default: Story = {
         errors={errors}
         isAtNeed
         navigation={nav}
+        progressStepper={stepper}
+        runningTotal={cart}
       />
     );
   },