Steps 8-15: consistency pass — subheading, spacing, dividers, Link atom

- CrematoriumStep: body1 subheading, mb:5, section dividers between questions
- CemeteryStep, CoffinDetailsStep, AdditionalServicesStep, SummaryStep: mb:5
- CoffinDetailsStep: body1 subheading
- PaymentStep: mb:5, Link atom for terms links (replaces Box component=a)
- ConfirmationStep: Link atom for phone number

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

src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx

@@ -142,7 +142,7 @@ export const AdditionalServicesStep: React.FC<AdditionalServicesStepProps> = ({
         Additional services
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
         {isPrePlanning
           ? "These options can be finalised later. Toggle on the ones you're interested in."
           : 'Choose which services to include in your plan.'}

src/components/pages/CemeteryStep/CemeteryStep.tsx

@@ -150,7 +150,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
         Cemetery
       </Typography>
 
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
         {isPrePlanning
           ? "If you haven't decided on a cemetery yet, the funeral provider can help with this later."
           : 'Choose where the burial will take place.'}

src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx

@@ -92,7 +92,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
         Your selected coffin
       </Typography>
 
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
         {isPrePlanning
           ? 'Here are the details of the coffin you selected. You can change your selection at any time.'
           : 'Review the details of your selected coffin below.'}

src/components/pages/ConfirmationStep/ConfirmationStep.tsx

@@ -5,6 +5,7 @@ import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
+import { Link } from '../../atoms/Link';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -104,17 +105,9 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({
             </Typography>
             <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
               If you need to make changes before then, call us on{' '}
-              <Box
+              <Link href="tel:1300000000" underline="always">
-                component="a"
-                href="tel:1300000000"
-                sx={{
-                  color: 'var(--fa-color-text-brand)',
-                  textDecoration: 'underline',
-                  fontSize: 'inherit',
-                }}
-              >
                 1300 000 000
-              </Box>
+              </Link>
               .
             </Typography>
           </Box>

src/components/pages/CrematoriumStep/CrematoriumStep.tsx

@@ -149,7 +149,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
         Crematorium
       </Typography>
 
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
         {isPrePlanning
           ? 'Review the crematorium details. You can update this later.'
           : 'Confirm the crematorium and let us know about any preferences.'}
@@ -244,6 +244,8 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
           )}
         </Box>
 
+        <Divider sx={{ my: 4 }} />
+
         {/* ─── Witness / attendance question ─── */}
         <FormControl component="fieldset" sx={{ mb: 4, display: 'block' }}>
           <FormLabel component="legend" sx={{ mb: 0.5 }}>
@@ -274,6 +276,8 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
 
         {/* ─── Priority / timing preference (optional, provider-specific) ─── */}
         {priorityOptions.length > 0 && (
+          <>
+            <Divider sx={{ my: 4 }} />
             <TextField
               select
               label="Cremation timing preference"
@@ -289,8 +293,11 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
                 </MenuItem>
               ))}
             </TextField>
+          </>
         )}
 
+        <Divider sx={{ my: 4 }} />
+
         {/* ─── Special instructions ─── */}
         <FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
           <FormLabel component="legend" sx={{ mb: 1 }}>

src/components/pages/PaymentStep/PaymentStep.tsx

@@ -11,6 +11,7 @@ import { Collapse } from '../../atoms/Collapse';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
 import { Divider } from '../../atoms/Divider';
+import { Link } from '../../atoms/Link';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -128,7 +129,7 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
         Payment
       </Typography>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 4 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 5 }}>
         <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
         <Typography variant="body2" color="text.secondary">
           Your payment is processed securely. You won&apos;t be charged more than the total shown.
@@ -287,29 +288,13 @@ export const PaymentStep: React.FC<PaymentStepProps> = ({
           label={
             <Typography variant="body2">
               I agree to the{' '}
-              <Box
+              <Link href="#" underline="always">
-                component="a"
-                href="#"
-                sx={{
-                  color: 'var(--fa-color-text-brand)',
-                  textDecoration: 'underline',
-                  fontSize: 'inherit',
-                }}
-              >
                 service agreement
-              </Box>{' '}
+              </Link>{' '}
               and{' '}
-              <Box
+              <Link href="#" underline="always">
-                component="a"
-                href="#"
-                sx={{
-                  color: 'var(--fa-color-text-brand)',
-                  textDecoration: 'underline',
-                  fontSize: 'inherit',
-                }}
-              >
                 privacy policy
-              </Box>
+              </Link>
             </Typography>
           }
           sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}

src/components/pages/SummaryStep/SummaryStep.tsx

@@ -124,7 +124,7 @@ export const SummaryStep: React.FC<SummaryStepProps> = ({
         Check everything looks right before confirming.
       </Typography>
 
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 5 }}>
         You can edit any section by tapping the edit icon.
       </Typography>