Normalize organisms, PaymentStep feedback, cross-page spacing fix

- Organism normalize pass: fix FuneralFinderV3 transition timing
  (200ms → 150ms ease-in-out), add autodocs tag to V3 stories
- Navigation: fix logo a11y — div with role="link" → proper <a> tag
- ToggleButtonGroup: add align (start/center) and direction (row/column)
  props, bump description text from text.secondary to text.primary
- PaymentStep: divider under subheading, lock icon alignment, centre-
  aligned payment options, vertical payment method stack, checkbox align
- SummaryStep: save button → text variant (matches other pages), centred
- All wizard pages: heading mb: 1 → mb: 2 for better breathing room
- Style Dictionary: auto-generate tokens.d.ts, fix TS unused imports
- tokens.d.ts: generated type declarations for 398 token exports

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

src/components/pages/CemeteryStep/CemeteryStep.tsx

@@ -130,7 +130,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Cemetery
       </Typography>
 

src/components/pages/CoffinsStep/CoffinsStep.tsx

@@ -419,7 +419,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
       {/* ─── Sidebar (left panel) ─── */}
 
       {/* Heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Choose a coffin
       </Typography>
 

src/components/pages/CrematoriumStep/CrematoriumStep.tsx

@@ -124,7 +124,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Crematorium
       </Typography>
 

src/components/pages/DateTimeStep/DateTimeStep.tsx

@@ -161,7 +161,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         A few important details
       </Typography>
 

src/components/pages/ExtrasStep/ExtrasStep.tsx

@@ -145,7 +145,7 @@ export const ExtrasStep: React.FC<ExtrasStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Optional extras
       </Typography>
 

src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx

@@ -109,7 +109,7 @@ export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Included services
       </Typography>
 

src/components/pages/IntroStep/IntroStep.tsx

@@ -99,7 +99,7 @@ export const IntroStep: React.FC<IntroStepProps> = ({
   return (
     <WizardLayout variant="centered-form" navigation={navigation} hideHelpBar={hideHelpBar} sx={sx}>
       {/* Page heading — receives focus on entry for screen readers */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Let&apos;s get started
       </Typography>
 

src/components/pages/PaymentStep/PaymentStep.tsx

@@ -125,17 +125,19 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Payment
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 5 }}>
-        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+      <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, mb: 2 }}>
+        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary', mt: '3px' }} />
         <Typography variant="body2" color="text.secondary">
           Your payment is processed securely. You won&apos;t be charged more than the total shown.
         </Typography>
       </Box>
 
+      <Divider sx={{ mb: 4 }} />
+
       {/* ─── Amount display ─── */}
       <Paper
         elevation={2}
@@ -188,6 +190,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
             onChange={(v) => onChange({ ...values, paymentPlan: v as PaymentPlan })}
             error={!!errors?.paymentPlan}
             helperText={errors?.paymentPlan}
+            align="center"
             required
             fullWidth
           />
@@ -205,6 +208,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
             onChange={(v) => onChange({ ...values, paymentMethod: v as PaymentMethod })}
             error={!!errors?.paymentMethod}
             helperText={errors?.paymentMethod}
+            direction="column"
             required
             fullWidth
           />
@@ -297,7 +301,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
               </Link>
             </Typography>
           }
-          sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}
+          sx={{ mb: 1, alignItems: 'center' }}
         />
         {errors?.termsAccepted && (
           <Typography

src/components/pages/SummaryStep/SummaryStep.tsx

@@ -304,7 +304,7 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
       sx={sx}
     >
       {/* Header */}
-      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 1 }}>
+      <Typography variant="display3" component="h1" tabIndex={-1} sx={{ mb: 2 }}>
         Review your plan
       </Typography>
 
@@ -709,16 +709,11 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
       </Button>
 
       {onSaveAndExit && (
-        <Button
-          variant="outlined"
-          color="secondary"
-          size="large"
-          fullWidth
-          onClick={onSaveAndExit}
-          sx={{ mt: 1.5 }}
-        >
-          Save and continue later
-        </Button>
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1.5 }}>
+          <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+            Save and continue later
+          </Button>
+        </Box>
       )}
 
       {/* Share dialog */}

src/components/pages/VenueServicesStep/VenueServicesStep.tsx

@@ -129,7 +129,7 @@ export const VenueServicesStep: React.FC<VenueServicesStepProps> = ({
       sx={sx}
     >
       {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
         Funeral Service
       </Typography>