Batch 1: ToggleButtonGroup fixes, heading standardisation, spacing normalisation

- ToggleButtonGroup: increase label-to-options spacing (mb 1→2),
  top-align button content (flex-start), fix selected border
  CSS specificity by adding .Mui-selected in grouped selector
- Standardise all split-layout step headings from h4 to display3
  (ProvidersStep, PackagesStep, PreviewStep, VenueStep, CoffinsStep,
  CoffinDetailsStep) — matches D-A decision for brand warmth
- DateTimeStep: normalise section gaps (scheduling fieldset mb 3→4)
- CrematoriumStep: add subheading for consistency, normalise
  witness section spacing (mb 3→4)
- Fix input label clipping in PackagesStep and DateTimeStep
  (add pt: 0.5 to TextField containers for float-label clearance)

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

src/components/atoms/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -114,7 +114,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
               color: 'text.primary',
               fontWeight: 600,
               fontSize: '1rem',
-              mb: 1,
+              mb: 2,
               '&.Mui-focused': { color: 'text.primary' },
               '&.Mui-error': { color: 'text.primary' },
             }}
@@ -142,6 +142,9 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                 borderColor: 'var(--fa-color-neutral-200)',
                 marginLeft: 0,
               },
+              '&.Mui-selected': {
+                borderColor: 'primary.main',
+              },
             },
           }}
           {...groupProps}
@@ -155,7 +158,7 @@ export const ToggleButtonGroup = React.forwardRef<HTMLFieldSetElement, ToggleBut
                 flex: 1,
                 textTransform: 'none',
                 flexDirection: 'column',
-                alignItems: 'center',
+                alignItems: 'flex-start',
                 gap: 0.5,
                 py: option.description ? 2 : 1.5,
                 px: 3,

src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx

@@ -254,7 +254,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
   // ─── Right panel: Option selectors + CTAs ───
   const optionsPanel = (
     <Box>
-      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
         Coffin details
       </Typography>
 

src/components/pages/CoffinsStep/CoffinsStep.tsx

@@ -198,7 +198,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
       }}
     >
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
         Choose a coffin
       </Typography>
 

src/components/pages/CrematoriumStep/CrematoriumStep.tsx

@@ -149,6 +149,12 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         Crematorium
       </Typography>
 
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+        {isPrePlanning
+          ? 'Review the crematorium details. You can update this later.'
+          : 'Confirm the crematorium and let us know about any preferences.'}
+      </Typography>
+
       <Box
         component="form"
         noValidate
@@ -239,7 +245,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         </Box>
 
         {/* ─── Witness / attendance question ─── */}
-        <FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
+        <FormControl component="fieldset" sx={{ mb: 4, display: 'block' }}>
           <FormLabel component="legend" sx={{ mb: 0.5 }}>
             Will anyone be following the hearse to the crematorium?
           </FormLabel>

src/components/pages/DateTimeStep/DateTimeStep.tsx

@@ -197,6 +197,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
                 flexDirection: { xs: 'column', sm: 'row' },
                 gap: 2,
                 mb: 2,
+                pt: 0.5,
               }}
             >
               <TextField
@@ -225,7 +226,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
 
         {/* ─── Section 2: Scheduling ─── */}
         {showScheduling && (
-          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 3 }}>
+          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 4 }}>
             <Typography component="legend" variant="h5" sx={{ mb: 2.5 }}>
               {schedulingHeading}
             </Typography>

src/components/pages/PackagesStep/PackagesStep.tsx

@@ -191,7 +191,7 @@ export const PackagesStep: React.FC<PackagesStepProps> = ({
       </Box>
 
       {/* Heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Choose a funeral package
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
@@ -202,7 +202,7 @@ export const PackagesStep: React.FC<PackagesStepProps> = ({
       </Typography>
 
       {/* Budget filter */}
-      <Box sx={{ mb: 3 }}>
+      <Box sx={{ mb: 3, pt: 0.5 }}>
         <TextField
           select
           size="small"

src/components/pages/PreviewStep/PreviewStep.tsx

@@ -148,7 +148,7 @@ export const PreviewStep: React.FC<PreviewStepProps> = ({
       </Box>
 
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Your selected package
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>

src/components/pages/ProvidersStep/ProvidersStep.tsx

@@ -147,7 +147,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
       }
     >
       {/* Header */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Choose a funeral provider
       </Typography>
       <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>

src/components/pages/VenueStep/VenueStep.tsx

@@ -194,7 +194,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
       }
     >
       {/* Page heading */}
-      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
         Where would you like the service?
       </Typography>