Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep

- IncludedServicesStep: package inclusions at no cost (dressing, viewing,
  prayers, funeral announcement). Sub-options render inside parent card.
- ExtrasStep: optional paid extras for lead generation (catering, music,
  coffin bearing, newspaper notice). POA support, tally of priced items.
- AddOnOption: children prop (sub-options inside card), priceLabel prop
  (custom text like "Price on application" in brand copper italic)
- Flattened sub-option pattern: inline toggle rows inside parent card
  instead of nested card-in-card ("Russian doll") pattern
- Coffin bearing now uses toggle + bearer type radio (consistent UX)
- Removed old AdditionalServicesStep (replaced by two new pages)

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

docs/memory/component-registry.md

@@ -86,8 +86,10 @@ duplicates) and MUST update it after completing one.
 | CrematoriumStep | done | WizardLayout (centered-form) + Card + Badge + ToggleButtonGroup + Typography + Button + Divider | Wizard step 8 — crematorium. Two variants: Service & Cremation (compact card + witness Yes/No toggle), Cremation Only (compact card + "Cremation Only" badge + "Included in Package" notice). Single pre-selected crematorium, no multi-select. |
 | CemeteryStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Collapse + TextField (select) + Typography + Button + Divider | Wizard step 9 — cemetery. ToggleButtonGroups (Yes/No/Not sure) with progressive disclosure. Own plot → locate dropdown. No plot → preference? → select dropdown. No card grid. |
 | CoffinsStep | done | WizardLayout (grid-sidebar) + Card + Badge + Collapse + Slider + TextField + Pagination + Divider + Link | Wizard step 10 — coffin browsing. Grid-sidebar: filter sidebar (categories with expandable subcategories, dual-knob price slider with editable inputs, sort by) + 3-col card grid. CoffinCard with thumbnail hover preview. Equal-height cards, subtle bg for white-bg product photos. Card click → CoffinDetailsStep (no Continue). 20/page max. Conditional allowance info bubble. |
-| CoffinDetailsStep | done | WizardLayout (centered-form) + Paper + RadioGroup + Divider + Button | Wizard step 11 — coffin customisation. Profile (image + specs) + 3 option sections (handles, lining, nameplate). Branded selected state. |
+| CoffinDetailsStep | done | WizardLayout (detail-toggles) + ImageGallery + Divider + Button | Wizard step 11 — coffin detail. Two-panel: gallery + product details dl (left), name + description + colour swatches + allowance-aware price + CTA (right). Allowance logic: fully covered / partially covered / no allowance. Colour selection does not affect price. |
-| AdditionalServicesStep | done | WizardLayout (centered-form) + Paper + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12 — additional services. Section 1: complimentary. Section 2: paid extras. Multi-level progressive disclosure. |
+| ~~AdditionalServicesStep~~ | removed | — | Replaced by IncludedServicesStep + ExtrasStep. Split for clearer distinction between free inclusions and paid extras. |
+| IncludedServicesStep | done | WizardLayout (centered-form) + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12a — included services. Package inclusions at no additional cost: dressing, viewing (with same-venue sub-option), prayers/vigil, funeral announcement. Sub-options render inside parent card. |
+| ExtrasStep | done | WizardLayout (centered-form) + AddOnOption + Card + Switch + RadioGroup + Collapse + Divider + Button | Wizard step 12b — optional extras. Lead-gen interest capture: catering, music (inline live musician toggle + musician type), coffin bearing (toggle + bearer type), newspaper notice. POA via `priceLabel`. Tally of priced selections. No nested cards. |
 | SummaryStep | done | WizardLayout (centered-form) + Accordion + Paper + IconButton + Divider + Button | Wizard step 13 — plan review. Accordion sections with edit buttons. dl/dt/dd definition lists. Total bar. Share button. |
 | PaymentStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Paper + Collapse + Checkbox + Divider + Button | Wizard step 14 — payment. Plan (full/deposit) + method (card/bank). PayWay iframe slot. Bank transfer details. Terms checkbox. |
 | ConfirmationStep | done | WizardLayout (centered-form) + Button | Wizard step 15 — confirmation. Terminal page. At-need: "submitted" + callback. Pre-planning: "saved" + return-anytime. Muted success icon. |

docs/memory/session-log.md

@@ -26,6 +26,73 @@ Each entry follows this structure:
 
 ## Sessions
 
+### Session 2026-03-31b — CoffinDetailsStep rewrite + AdditionalServicesStep split
+
+**Agent(s):** Claude Opus 4.6 (1M context)
+
+**Work completed:**
+- **CoffinDetailsStep rewrite** — two-panel detail-toggles layout with gallery + specs (left), name + description + colour swatches + allowance-aware pricing + CTA (right). Colour selection doesn't affect price. Allowance logic: fully covered / partially covered / no allowance.
+- **AdditionalServicesStep split into two pages:**
+  - **IncludedServicesStep (new)** — services included in the package at no cost. Dressing, viewing (with same-venue sub-option inside card), prayers/vigil, funeral announcement.
+  - **ExtrasStep (new)** — optional paid extras for lead generation. Catering, music (flat inline live musician toggle + musician type), coffin bearing (toggle + bearer preference radio), newspaper notice. POA support via `priceLabel`. Tally of priced selections.
+- **AddOnOption molecule enhanced:**
+  - `children` prop — sub-options render inside the card boundary (below divider) when checked, eliminating nested card "Russian doll" pattern
+  - `priceLabel` prop — custom text like "Price on application" in brand copper italic
+- **AdditionalServicesStep removed** — replaced by the two new pages
+- All quality checks passing (TypeScript, ESLint, Prettier)
+- Playwright visual verification of all key scenarios
+
+**Decisions made:**
+- Split AdditionalServicesStep into two pages for clearer UX distinction between free inclusions and paid extras
+- Sub-options render inside parent card (flat hierarchy) instead of nested cards
+- Coffin bearing changed from always-visible radio to toggle + sub-options (consistent with other items)
+- `bearing` field split into `bearing: boolean` + `bearerType` for toggle pattern
+- Extras page is lead-gen: signals interest, not firm commitment. Director follows up.
+- POA items show "Price on application" in brand copper italic
+- Copy refined through brand lens — no transactional language ("toggle on"), warm professional tone
+
+**Open questions:**
+- None
+
+**Next steps:**
+- Continue page feedback: SummaryStep, PaymentStep, ConfirmationStep
+- Retroactive review Phase 3 (organisms) still pending
+- Batch a11y fix (aria-describedby + aria-invalid) deferred
+
+---
+
+### Session 2026-03-31b — CoffinDetailsStep rewrite: product detail layout
+
+**Agent(s):** Claude Opus 4.6 (1M context)
+
+**Work completed:**
+- **CoffinDetailsStep complete rewrite** — transformed to match VenueDetailStep two-panel pattern:
+  - **Left panel:** ImageGallery (hero + thumbnails), product details as semantic `dl` list (bold label above value)
+  - **Right panel (sticky):** coffin name (h1), description, colour swatch picker, price with allowance-aware display, CTA, save-and-exit
+  - **Colour picker:** circular swatches (36px), `aria-pressed`, controlled via `selectedColourId`/`onColourChange`, does not affect price
+  - **Allowance pricing logic:** fully covered (allowance >= price) → "Included in your package allowance — no change to your plan total." / partially covered → shows "$X package allowance applied" + "+$Y to your plan total" in brand colour / no allowance → price only with extra spacing to CTA
+  - **Removed:** info bubble (redundant with allowance impact text), `priceNote` prop, `termsText` prop, old horizontal specs grid, `CoffinAllowance` type
+  - **Added:** `CoffinColour` type, `allowanceAmount` prop, `onAddCoffin` callback (replaces `onContinue`)
+  - **A11y:** fixed heading hierarchy (price as `<p>` not `<h5>`, Product details as `<h2>`) — 0 violations
+- **Stories:** FullyCovered, PartiallyCovered, NoAllowance, NoColours, Minimal, PrePlanning, Loading
+- **Playwright visual verification** of all key scenarios
+- All quality checks passing (TypeScript, ESLint, Prettier)
+
+**Decisions made:**
+- Allowance impact is computed from `allowanceAmount` vs `coffin.price` — no remaining balance tracking (out of scope)
+- Info bubble removed from detail page (redundant) — kept on CoffinsStep browsing page
+- Product details as single-column stacked `dl` (label above value) — more readable than grid
+
+**Open questions:**
+- None
+
+**Next steps:**
+- Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep
+- Retroactive review Phase 3 (organisms) still pending
+- Batch a11y fix (aria-describedby + aria-invalid) deferred
+
+---
+
 ### Session 2026-03-31a — CoffinsStep rewrite: grid-sidebar ecommerce layout
 
 **Agent(s):** Claude Opus 4.6 (1M context)

src/components/molecules/AddOnOption/AddOnOption.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Box from '@mui/material/Box';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { Card } from '../../atoms/Card';
+import { Collapse } from '../../atoms/Collapse';
+import { Divider } from '../../atoms/Divider';
 import { Typography } from '../../atoms/Typography';
 import { Switch } from '../../atoms/Switch';
 import { Link } from '../../atoms/Link';
@@ -16,6 +18,8 @@ export interface AddOnOptionProps {
   description?: string;
   /** Price in dollars — shown below the heading */
   price?: number;
+  /** Custom price label (e.g. "Price on application") — overrides formatted price */
+  priceLabel?: string;
   /** Whether this add-on is currently enabled */
   checked?: boolean;
   /** Called when the toggle changes */
@@ -24,6 +28,8 @@ export interface AddOnOptionProps {
   disabled?: boolean;
   /** Max visible lines for description before "View more" toggle. Omit for no limit. */
   maxDescriptionLines?: number;
+  /** Sub-options rendered inside the card when checked. Appears below a divider. */
+  children?: React.ReactNode;
   /** MUI sx prop for style overrides */
   sx?: SxProps<Theme>;
 }
@@ -59,10 +65,12 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
       name,
       description,
       price,
+      priceLabel,
       checked = false,
       onChange,
       disabled = false,
       maxDescriptionLines,
+      children,
       sx,
     },
     ref,
@@ -141,10 +149,16 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
         </Box>
 
         {/* Price — tucks directly under heading */}
-        {price != null && (
+        {priceLabel ? (
+          <Typography variant="body2" color="primary" sx={{ fontStyle: 'italic' }}>
+            {priceLabel}
+          </Typography>
+        ) : (
+          price != null && (
             <Typography variant="body2" color="primary">
               ${price.toLocaleString('en-AU')}
             </Typography>
+          )
         )}
 
         {/* Description with optional line clamping */}
@@ -182,6 +196,14 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
             )}
           </>
         )}
+
+        {/* Sub-options — rendered inside the card when checked */}
+        {children && (
+          <Collapse in={checked}>
+            <Divider sx={{ my: 1.5 }} />
+            <Box onClick={(e) => e.stopPropagation()}>{children}</Box>
+          </Collapse>
+        )}
       </Card>
     );
   },

src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx

@@ -1,353 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-import type { SxProps, Theme } from '@mui/material/styles';
-import { WizardLayout } from '../../templates/WizardLayout';
-import { AddOnOption } from '../../molecules/AddOnOption';
-import { Collapse } from '../../atoms/Collapse';
-import { Typography } from '../../atoms/Typography';
-import { Button } from '../../atoms/Button';
-import { Divider } from '../../atoms/Divider';
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-/** Form values for the additional services step */
-export interface AdditionalServicesStepValues {
-  // Section 1: Complimentary inclusions
-  dressing: boolean;
-  viewing: boolean;
-  viewingSameVenue: 'yes' | 'no' | null;
-  prayers: boolean;
-  funeralAnnouncement: boolean;
-
-  // Section 2: Paid extras
-  catering: boolean;
-  music: boolean;
-  liveMusician: boolean;
-  musicianType: 'vocalist' | 'cellist' | 'other' | null;
-  bearing: 'family' | 'funeralHouse' | 'both' | null;
-  newspaperNotice: boolean;
-}
-
-/** Props for the AdditionalServicesStep page component */
-export interface AdditionalServicesStepProps {
-  /** Current form values */
-  values: AdditionalServicesStepValues;
-  /** Callback when any field value changes */
-  onChange: (values: AdditionalServicesStepValues) => void;
-  /** Callback when the Continue button is clicked */
-  onContinue: () => void;
-  /** Callback for back navigation */
-  onBack?: () => void;
-  /** Callback for save-and-exit */
-  onSaveAndExit?: () => void;
-  /** Whether the Continue button is in a loading state */
-  loading?: boolean;
-  /** Price for catering (undefined = POA) */
-  cateringPrice?: number;
-  /** Price for newspaper notice (undefined = POA) */
-  newspaperPrice?: number;
-  /** Price for live musician (undefined = POA) */
-  musicianPrice?: number;
-  /** Whether this is a pre-planning flow */
-  isPrePlanning?: boolean;
-  /** Navigation bar */
-  navigation?: React.ReactNode;
-  /** Progress stepper */
-  progressStepper?: React.ReactNode;
-  /** Running total */
-  runningTotal?: React.ReactNode;
-  /** Hide the help bar */
-  hideHelpBar?: boolean;
-  /** MUI sx prop */
-  sx?: SxProps<Theme>;
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-/**
- * Step 12 — Additional Services for the FA arrangement wizard.
- *
- * Merged from baseline steps 14 (optionals) and 15 (extras) per Rec #2.
- * Two sections preserving the semantic distinction:
- * 1. Complimentary inclusions (toggle on/off at no cost)
- * 2. Paid extras (toggle with pricing or POA)
- *
- * Progressive disclosure: sub-options revealed when parent toggle is on.
- * Toggle design is inherently low-pressure — no upsell language.
- *
- * Pure presentation component — props in, callbacks out.
- *
- * Spec: documentation/steps/steps/12_additional_services.yaml
- */
-export const AdditionalServicesStep: React.FC<AdditionalServicesStepProps> = ({
-  values,
-  onChange,
-  onContinue,
-  onBack,
-  onSaveAndExit,
-  loading = false,
-  cateringPrice,
-  newspaperPrice,
-  musicianPrice,
-  isPrePlanning = false,
-  navigation,
-  progressStepper,
-  runningTotal,
-  hideHelpBar,
-  sx,
-}) => {
-  const handleToggle = (field: keyof AdditionalServicesStepValues, checked: boolean) => {
-    const next = { ...values, [field]: checked };
-    // Reset dependent fields when parent toggled off
-    if (field === 'viewing' && !checked) {
-      next.viewingSameVenue = null;
-    }
-    if (field === 'music' && !checked) {
-      next.liveMusician = false;
-      next.musicianType = null;
-    }
-    if (field === 'liveMusician' && !checked) {
-      next.musicianType = null;
-    }
-    onChange(next);
-  };
-
-  const handleFieldChange = <K extends keyof AdditionalServicesStepValues>(
-    field: K,
-    value: AdditionalServicesStepValues[K],
-  ) => {
-    onChange({ ...values, [field]: value });
-  };
-
-  return (
-    <WizardLayout
-      variant="centered-form"
-      navigation={navigation}
-      progressStepper={progressStepper}
-      runningTotal={runningTotal}
-      showBackLink={!!onBack}
-      backLabel="Back"
-      onBack={onBack}
-      hideHelpBar={hideHelpBar}
-      sx={sx}
-    >
-      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
-        Additional services
-      </Typography>
-
-      <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.'}
-      </Typography>
-
-      <Box
-        component="form"
-        noValidate
-        aria-busy={loading}
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          if (!loading) onContinue();
-        }}
-      >
-        {/* ─── Section 1: Complimentary inclusions ─── */}
-        <Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
-          <Typography variant="h5" sx={{ mb: 0.5 }}>
-            Complimentary inclusions
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-            These items are included at no additional cost. You can choose to include or remove
-            them.
-          </Typography>
-
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <AddOnOption
-              name="Dressing and preparation"
-              description="Professional dressing and preparation"
-              checked={values.dressing}
-              onChange={(c) => handleToggle('dressing', c)}
-            />
-
-            <AddOnOption
-              name="Viewing"
-              description="Arrange a viewing for family and friends"
-              checked={values.viewing}
-              onChange={(c) => handleToggle('viewing', c)}
-            />
-
-            <Collapse in={values.viewing}>
-              <Box sx={{ pl: 4, pt: 1 }}>
-                <FormControl component="fieldset" sx={{ display: 'block' }}>
-                  <FormLabel component="legend" sx={{ mb: 1 }}>
-                    Same venue as the service?
-                  </FormLabel>
-                  <RadioGroup
-                    value={values.viewingSameVenue ?? ''}
-                    onChange={(e) =>
-                      handleFieldChange(
-                        'viewingSameVenue',
-                        e.target.value as AdditionalServicesStepValues['viewingSameVenue'],
-                      )
-                    }
-                  >
-                    <FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
-                    <FormControlLabel value="no" control={<Radio />} label="No, different venue" />
-                  </RadioGroup>
-                </FormControl>
-              </Box>
-            </Collapse>
-
-            <AddOnOption
-              name="Prayers or vigil"
-              description="Arrange prayers or vigil before the service"
-              checked={values.prayers}
-              onChange={(c) => handleToggle('prayers', c)}
-            />
-
-            <AddOnOption
-              name="Funeral announcement"
-              description="Complimentary funeral notice"
-              checked={values.funeralAnnouncement}
-              onChange={(c) => handleToggle('funeralAnnouncement', c)}
-            />
-          </Box>
-        </Paper>
-
-        {/* ─── Section 2: Paid extras ─── */}
-        <Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
-          <Typography variant="h5" sx={{ mb: 0.5 }}>
-            Additional extras
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
-            These items are available but may incur additional costs. Prices shown where available.
-          </Typography>
-
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <AddOnOption
-              name="Catering"
-              description="Catering for after the service"
-              price={cateringPrice}
-              checked={values.catering}
-              onChange={(c) => handleToggle('catering', c)}
-            />
-
-            <AddOnOption
-              name="Music"
-              description="Music arrangements for the service"
-              checked={values.music}
-              onChange={(c) => handleToggle('music', c)}
-            />
-
-            <Collapse in={values.music}>
-              <Box sx={{ pl: 4, pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                <AddOnOption
-                  name="Live musician"
-                  description="A live musician to perform during the service"
-                  price={musicianPrice}
-                  checked={values.liveMusician}
-                  onChange={(c) => handleToggle('liveMusician', c)}
-                />
-
-                <Collapse in={values.liveMusician}>
-                  <Box sx={{ pl: 4, pt: 1 }}>
-                    <FormControl component="fieldset" sx={{ display: 'block' }}>
-                      <FormLabel component="legend" sx={{ mb: 1 }}>
-                        Musician type
-                      </FormLabel>
-                      <RadioGroup
-                        value={values.musicianType ?? ''}
-                        onChange={(e) =>
-                          handleFieldChange(
-                            'musicianType',
-                            e.target.value as AdditionalServicesStepValues['musicianType'],
-                          )
-                        }
-                      >
-                        <FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
-                        <FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
-                        <FormControlLabel value="other" control={<Radio />} label="Other" />
-                      </RadioGroup>
-                    </FormControl>
-                  </Box>
-                </Collapse>
-              </Box>
-            </Collapse>
-
-            {/* Coffin bearing */}
-            <Divider />
-            <FormControl component="fieldset" sx={{ display: 'block' }}>
-              <FormLabel component="legend" sx={{ mb: 1 }}>
-                Coffin bearing
-              </FormLabel>
-              <RadioGroup
-                value={values.bearing ?? ''}
-                onChange={(e) =>
-                  handleFieldChange(
-                    'bearing',
-                    e.target.value as AdditionalServicesStepValues['bearing'],
-                  )
-                }
-              >
-                <FormControlLabel value="family" control={<Radio />} label="Family and friends" />
-                <FormControlLabel
-                  value="funeralHouse"
-                  control={<Radio />}
-                  label="Professional bearers"
-                />
-                <FormControlLabel
-                  value="both"
-                  control={<Radio />}
-                  label="Both family and professional"
-                />
-              </RadioGroup>
-            </FormControl>
-
-            <Divider />
-
-            <AddOnOption
-              name="Newspaper notice"
-              description="Paid newspaper death notice"
-              price={newspaperPrice}
-              checked={values.newspaperNotice}
-              onChange={(c) => handleToggle('newspaperNotice', c)}
-            />
-          </Box>
-        </Paper>
-
-        <Divider sx={{ my: 3 }} />
-
-        {/* CTAs */}
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexDirection: { xs: 'column-reverse', sm: 'row' },
-            gap: 2,
-          }}
-        >
-          {onSaveAndExit ? (
-            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
-              Save and continue later
-            </Button>
-          ) : (
-            <Box />
-          )}
-          <Button type="submit" variant="contained" size="large" loading={loading}>
-            Continue
-          </Button>
-        </Box>
-      </Box>
-    </WizardLayout>
-  );
-};
-
-AdditionalServicesStep.displayName = 'AdditionalServicesStep';
-export default AdditionalServicesStep;

src/components/pages/AdditionalServicesStep/index.ts

@@ -1,5 +0,0 @@
-export { AdditionalServicesStep, default } from './AdditionalServicesStep';
-export type {
-  AdditionalServicesStepProps,
-  AdditionalServicesStepValues,
-} from './AdditionalServicesStep';

src/components/pages/ExtrasStep/ExtrasStep.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { AdditionalServicesStep } from './AdditionalServicesStep';
+import { ExtrasStep } from './ExtrasStep';
-import type { AdditionalServicesStepValues } from './AdditionalServicesStep';
+import type { ExtrasStepValues } from './ExtrasStep';
 import { Navigation } from '../../organisms/Navigation';
 import Box from '@mui/material/Box';
 
@@ -34,25 +34,21 @@ const nav = (
   />
 );
 
-const defaultValues: AdditionalServicesStepValues = {
+const defaultValues: ExtrasStepValues = {
-  dressing: false,
-  viewing: false,
-  viewingSameVenue: null,
-  prayers: false,
-  funeralAnnouncement: true,
   catering: false,
   music: false,
   liveMusician: false,
   musicianType: null,
-  bearing: null,
+  bearing: false,
+  bearerType: null,
   newspaperNotice: false,
 };
 
 // ─── Meta ────────────────────────────────────────────────────────────────────
 
-const meta: Meta<typeof AdditionalServicesStep> = {
+const meta: Meta<typeof ExtrasStep> = {
-  title: 'Pages/AdditionalServicesStep',
+  title: 'Pages/ExtrasStep',
-  component: AdditionalServicesStep,
+  component: ExtrasStep,
   tags: ['autodocs'],
   parameters: {
     layout: 'fullscreen',
@@ -60,21 +56,41 @@ const meta: Meta<typeof AdditionalServicesStep> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AdditionalServicesStep>;
+type Story = StoryObj<typeof ExtrasStep>;
 
-// ─── Interactive (default) ──────────────────────────────────────────────────
+// ─── Default (no prices — lead gen mode) ────────────────────────────────────
 
-/** Full interactive flow with both sections */
+/** Default state — no fixed prices, interest capture only */
 export const Default: Story = {
   render: () => {
-    const [values, setValues] = useState<AdditionalServicesStepValues>({ ...defaultValues });
+    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
     return (
-      <AdditionalServicesStep
+      <ExtrasStep
         values={values}
         onChange={setValues}
         onContinue={() => alert(JSON.stringify(values, null, 2))}
         onBack={() => alert('Back')}
         onSaveAndExit={() => alert('Save')}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── With prices ────────────────────────────────────────────────────────────
+
+/** Some extras have known prices */
+export const WithPrices: Story = {
+  render: () => {
+    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
+    return (
+      <ExtrasStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert(JSON.stringify(values, null, 2))}
+        onBack={() => alert('Back')}
+        onSaveAndExit={() => alert('Save')}
+        cateringPrice={850}
         newspaperPrice={250}
         musicianPrice={450}
         navigation={nav}
@@ -83,26 +99,22 @@ export const Default: Story = {
   },
 };
 
-// ─── Many options enabled ───────────────────────────────────────────────────
+// ─── All enabled ────────────────────────────────────────────────────────────
 
-/** Multiple services toggled on with sub-options visible */
+/** All extras toggled on with sub-options visible */
-export const ManyOptionsEnabled: Story = {
+export const AllEnabled: Story = {
   render: () => {
-    const [values, setValues] = useState<AdditionalServicesStepValues>({
+    const [values, setValues] = useState<ExtrasStepValues>({
-      dressing: true,
-      viewing: true,
-      viewingSameVenue: 'yes',
-      prayers: false,
-      funeralAnnouncement: true,
       catering: true,
       music: true,
       liveMusician: true,
       musicianType: 'vocalist',
-      bearing: 'both',
+      bearing: true,
+      bearerType: 'both',
       newspaperNotice: true,
     });
     return (
-      <AdditionalServicesStep
+      <ExtrasStep
         values={values}
         onChange={setValues}
         onContinue={() => alert('Continue')}
@@ -118,12 +130,12 @@ export const ManyOptionsEnabled: Story = {
 
 // ─── Pre-planning ───────────────────────────────────────────────────────────
 
-/** Pre-planning variant */
+/** Pre-planning variant with softer copy */
 export const PrePlanning: Story = {
   render: () => {
-    const [values, setValues] = useState<AdditionalServicesStepValues>({ ...defaultValues });
+    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
     return (
-      <AdditionalServicesStep
+      <ExtrasStep
         values={values}
         onChange={setValues}
         onContinue={() => alert('Continue')}
@@ -134,24 +146,3 @@ export const PrePlanning: Story = {
     );
   },
 };
-
-// ─── Minimal (provider shows few options) ───────────────────────────────────
-
-/** Announcement only — minimal provider offerings */
-export const Minimal: Story = {
-  render: () => {
-    const [values, setValues] = useState<AdditionalServicesStepValues>({
-      ...defaultValues,
-      funeralAnnouncement: true,
-    });
-    return (
-      <AdditionalServicesStep
-        values={values}
-        onChange={setValues}
-        onContinue={() => alert('Continue')}
-        onBack={() => alert('Back')}
-        navigation={nav}
-      />
-    );
-  },
-};

src/components/pages/ExtrasStep/ExtrasStep.tsx

@@ -0,0 +1,343 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { AddOnOption } from '../../molecules/AddOnOption';
+import { Collapse } from '../../atoms/Collapse';
+import { Switch } from '../../atoms/Switch';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Form values for the extras step */
+export interface ExtrasStepValues {
+  catering: boolean;
+  music: boolean;
+  liveMusician: boolean;
+  musicianType: 'vocalist' | 'cellist' | 'other' | null;
+  bearing: boolean;
+  bearerType: 'family' | 'funeralHouse' | 'both' | null;
+  newspaperNotice: boolean;
+}
+
+/** Props for the ExtrasStep page component */
+export interface ExtrasStepProps {
+  /** Current form values */
+  values: ExtrasStepValues;
+  /** Callback when any field value changes */
+  onChange: (values: ExtrasStepValues) => void;
+  /** Callback when the Continue button is clicked */
+  onContinue: () => void;
+  /** Callback for back navigation */
+  onBack?: () => void;
+  /** Callback for save-and-exit */
+  onSaveAndExit?: () => void;
+  /** Whether the Continue button is in a loading state */
+  loading?: boolean;
+  /** Price for catering (omit for POA) */
+  cateringPrice?: number;
+  /** Price for newspaper notice (omit for POA) */
+  newspaperPrice?: number;
+  /** Price for live musician (omit for POA) */
+  musicianPrice?: number;
+  /** Whether this is a pre-planning flow */
+  isPrePlanning?: boolean;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Progress stepper */
+  progressStepper?: React.ReactNode;
+  /** Running total */
+  runningTotal?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 12b — Optional Extras for the FA arrangement wizard.
+ *
+ * Shows optional services that may have additional costs. Users select
+ * anything they're interested in — their funeral director will follow
+ * up with details and confirm pricing.
+ *
+ * This is a lead-generation step: selecting an extra signals interest,
+ * not a firm commitment. Items show prices where available, otherwise
+ * "Price on application".
+ *
+ * Sub-options (e.g. musician type, bearer type) render as flat form
+ * fields inside the parent card — no nested cards.
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/12_additional_services.yaml (Section 2)
+ */
+export const ExtrasStep: React.FC<ExtrasStepProps> = ({
+  values,
+  onChange,
+  onContinue,
+  onBack,
+  onSaveAndExit,
+  loading = false,
+  cateringPrice,
+  newspaperPrice,
+  musicianPrice,
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  runningTotal,
+  hideHelpBar,
+  sx,
+}) => {
+  const liveMusicianSwitchId = React.useId();
+
+  const handleToggle = (field: keyof ExtrasStepValues, checked: boolean) => {
+    const next = { ...values, [field]: checked };
+    if (field === 'music' && !checked) {
+      next.liveMusician = false;
+      next.musicianType = null;
+    }
+    if (field === 'liveMusician' && !checked) {
+      next.musicianType = null;
+    }
+    if (field === 'bearing' && !checked) {
+      next.bearerType = null;
+    }
+    onChange(next);
+  };
+
+  const handleFieldChange = <K extends keyof ExtrasStepValues>(
+    field: K,
+    value: ExtrasStepValues[K],
+  ) => {
+    onChange({ ...values, [field]: value });
+  };
+
+  // Compute tally of selected priced extras
+  const tallyItems: { name: string; price: number }[] = [];
+  if (values.catering && cateringPrice != null)
+    tallyItems.push({ name: 'Catering', price: cateringPrice });
+  if (values.liveMusician && musicianPrice != null)
+    tallyItems.push({ name: 'Live musician', price: musicianPrice });
+  if (values.newspaperNotice && newspaperPrice != null)
+    tallyItems.push({ name: 'Newspaper notice', price: newspaperPrice });
+  const totalAdditional = tallyItems.reduce((sum, item) => sum + item.price, 0);
+
+  return (
+    <WizardLayout
+      variant="centered-form"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+    >
+      {/* Page heading */}
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Optional extras
+      </Typography>
+
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+        {isPrePlanning
+          ? "These services are available if you'd like to personalise the arrangement. Select any you're interested in — details can be discussed when you're ready."
+          : "You may wish to personalise the arrangement with any of these services. Where pricing isn't shown, your funeral director will be happy to discuss options and provide a quote."}
+      </Typography>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Box
+        component="form"
+        noValidate
+        aria-busy={loading}
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          if (!loading) onContinue();
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
+          <AddOnOption
+            name="Catering"
+            description="Catering for after the service. Your director can arrange options to suit your needs and budget."
+            price={cateringPrice}
+            priceLabel={cateringPrice == null ? 'Price on application' : undefined}
+            checked={values.catering}
+            onChange={(c) => handleToggle('catering', c)}
+          />
+
+          {/* Music — flat sub-options inside the card */}
+          <AddOnOption
+            name="Music"
+            description="Music arrangements for the service, including song selection and audio setup."
+            checked={values.music}
+            onChange={(c) => handleToggle('music', c)}
+          >
+            {/* Inline toggle row for live musician */}
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 2,
+                mb: 0.5,
+              }}
+            >
+              <Typography
+                variant="label"
+                component="span"
+                id={liveMusicianSwitchId}
+                sx={{ flex: 1, minWidth: 0 }}
+              >
+                Live musician
+              </Typography>
+
+              {musicianPrice != null ? (
+                <Typography variant="body2" color="primary" sx={{ flexShrink: 0 }}>
+                  ${musicianPrice.toLocaleString('en-AU')}
+                </Typography>
+              ) : (
+                <Typography
+                  variant="body2"
+                  color="primary"
+                  sx={{ flexShrink: 0, fontStyle: 'italic' }}
+                >
+                  POA
+                </Typography>
+              )}
+
+              <Switch
+                checked={values.liveMusician}
+                onChange={(_e, v) => handleToggle('liveMusician', v)}
+                onClick={(e) => e.stopPropagation()}
+                inputProps={{ 'aria-labelledby': liveMusicianSwitchId }}
+                sx={{ flexShrink: 0 }}
+              />
+            </Box>
+
+            {/* Musician type — revealed when live musician is on */}
+            <Collapse in={values.liveMusician}>
+              <FormControl component="fieldset" sx={{ display: 'block', mt: 1 }}>
+                <FormLabel component="legend" sx={{ mb: 1 }}>
+                  Musician type
+                </FormLabel>
+                <RadioGroup
+                  value={values.musicianType ?? ''}
+                  onChange={(e) =>
+                    handleFieldChange(
+                      'musicianType',
+                      e.target.value as ExtrasStepValues['musicianType'],
+                    )
+                  }
+                >
+                  <FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
+                  <FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
+                  <FormControlLabel value="other" control={<Radio />} label="Other" />
+                </RadioGroup>
+              </FormControl>
+            </Collapse>
+          </AddOnOption>
+
+          {/* Coffin bearing — toggle with radio sub-options */}
+          <AddOnOption
+            name="Coffin bearing"
+            description="Choose who will carry the coffin during the service. Professional bearers can be arranged through your funeral director."
+            checked={values.bearing}
+            onChange={(c) => handleToggle('bearing', c)}
+          >
+            <FormControl component="fieldset" sx={{ display: 'block' }}>
+              <FormLabel component="legend" sx={{ mb: 1 }}>
+                Bearer preference
+              </FormLabel>
+              <RadioGroup
+                value={values.bearerType ?? ''}
+                onChange={(e) =>
+                  handleFieldChange('bearerType', e.target.value as ExtrasStepValues['bearerType'])
+                }
+              >
+                <FormControlLabel value="family" control={<Radio />} label="Family and friends" />
+                <FormControlLabel
+                  value="funeralHouse"
+                  control={<Radio />}
+                  label="Professional bearers"
+                />
+                <FormControlLabel
+                  value="both"
+                  control={<Radio />}
+                  label="Both family and professional"
+                />
+              </RadioGroup>
+            </FormControl>
+          </AddOnOption>
+
+          <AddOnOption
+            name="Newspaper notice"
+            description="A paid newspaper death notice. Your director will help with wording and placement."
+            price={newspaperPrice}
+            priceLabel={newspaperPrice == null ? 'Price on application' : undefined}
+            checked={values.newspaperNotice}
+            onChange={(c) => handleToggle('newspaperNotice', c)}
+          />
+        </Box>
+
+        {/* ─── Tally ─── */}
+        {tallyItems.length > 0 && (
+          <>
+            <Divider sx={{ my: 3 }} />
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              <Typography variant="h6">Extras total</Typography>
+              <Typography variant="h6" color="primary">
+                ${totalAdditional.toLocaleString('en-AU')}
+              </Typography>
+            </Box>
+          </>
+        )}
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* CTAs */}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexDirection: { xs: 'column-reverse', sm: 'row' },
+            gap: 2,
+          }}
+        >
+          {onSaveAndExit ? (
+            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+              Save and continue later
+            </Button>
+          ) : (
+            <Box />
+          )}
+          <Button type="submit" variant="contained" size="large" loading={loading}>
+            Continue
+          </Button>
+        </Box>
+      </Box>
+    </WizardLayout>
+  );
+};
+
+ExtrasStep.displayName = 'ExtrasStep';
+export default ExtrasStep;

src/components/pages/ExtrasStep/index.ts

@@ -0,0 +1,2 @@
+export { ExtrasStep, default } from './ExtrasStep';
+export type { ExtrasStepProps, ExtrasStepValues } from './ExtrasStep';

src/components/pages/IncludedServicesStep/IncludedServicesStep.stories.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { IncludedServicesStep } from './IncludedServicesStep';
+import type { IncludedServicesStepValues } from './IncludedServicesStep';
+import { Navigation } from '../../organisms/Navigation';
+import Box from '@mui/material/Box';
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const FALogo = () => (
+  <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <Box
+      component="img"
+      src="/brandlogo/logo-full.svg"
+      alt="Funeral Arranger"
+      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
+    />
+    <Box
+      component="img"
+      src="/brandlogo/logo-short.svg"
+      alt="Funeral Arranger"
+      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
+    />
+  </Box>
+);
+
+const nav = (
+  <Navigation
+    logo={<FALogo />}
+    items={[
+      { label: 'FAQ', href: '/faq' },
+      { label: 'Contact Us', href: '/contact' },
+    ]}
+  />
+);
+
+const defaultValues: IncludedServicesStepValues = {
+  dressing: false,
+  viewing: false,
+  viewingSameVenue: null,
+  prayers: false,
+  funeralAnnouncement: true,
+};
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof IncludedServicesStep> = {
+  title: 'Pages/IncludedServicesStep',
+  component: IncludedServicesStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof IncludedServicesStep>;
+
+// ─── Default ────────────────────────────────────────────────────────────────
+
+/** Default state — funeral announcement on by default */
+export const Default: Story = {
+  render: () => {
+    const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
+    return (
+      <IncludedServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert(JSON.stringify(values, null, 2))}
+        onBack={() => alert('Back')}
+        onSaveAndExit={() => alert('Save')}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── All enabled ────────────────────────────────────────────────────────────
+
+/** All inclusions toggled on with viewing sub-option visible */
+export const AllEnabled: Story = {
+  render: () => {
+    const [values, setValues] = useState<IncludedServicesStepValues>({
+      dressing: true,
+      viewing: true,
+      viewingSameVenue: 'yes',
+      prayers: true,
+      funeralAnnouncement: true,
+    });
+    return (
+      <IncludedServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning variant with softer copy */
+export const PrePlanning: Story = {
+  render: () => {
+    const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
+    return (
+      <IncludedServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        isPrePlanning
+        navigation={nav}
+      />
+    );
+  },
+};

src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import Radio from '@mui/material/Radio';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { AddOnOption } from '../../molecules/AddOnOption';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Form values for the included services step */
+export interface IncludedServicesStepValues {
+  dressing: boolean;
+  viewing: boolean;
+  viewingSameVenue: 'yes' | 'no' | null;
+  prayers: boolean;
+  funeralAnnouncement: boolean;
+}
+
+/** Props for the IncludedServicesStep page component */
+export interface IncludedServicesStepProps {
+  /** Current form values */
+  values: IncludedServicesStepValues;
+  /** Callback when any field value changes */
+  onChange: (values: IncludedServicesStepValues) => void;
+  /** Callback when the Continue button is clicked */
+  onContinue: () => void;
+  /** Callback for back navigation */
+  onBack?: () => void;
+  /** Callback for save-and-exit */
+  onSaveAndExit?: () => void;
+  /** Whether the Continue button is in a loading state */
+  loading?: boolean;
+  /** Whether this is a pre-planning flow */
+  isPrePlanning?: boolean;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Progress stepper */
+  progressStepper?: React.ReactNode;
+  /** Running total */
+  runningTotal?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 12a — Included Services for the FA arrangement wizard.
+ *
+ * Shows services that come with the selected package at no additional
+ * cost. Users confirm which inclusions they'd like — toggling off
+ * removes them, toggling on adds them back.
+ *
+ * Sub-options (e.g. viewing venue) render inside the parent card
+ * when toggled on, keeping the visual grouping clear.
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/12_additional_services.yaml (Section 1)
+ */
+export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
+  values,
+  onChange,
+  onContinue,
+  onBack,
+  onSaveAndExit,
+  loading = false,
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  runningTotal,
+  hideHelpBar,
+  sx,
+}) => {
+  const handleToggle = (field: keyof IncludedServicesStepValues, checked: boolean) => {
+    const next = { ...values, [field]: checked };
+    if (field === 'viewing' && !checked) {
+      next.viewingSameVenue = null;
+    }
+    onChange(next);
+  };
+
+  const handleFieldChange = <K extends keyof IncludedServicesStepValues>(
+    field: K,
+    value: IncludedServicesStepValues[K],
+  ) => {
+    onChange({ ...values, [field]: value });
+  };
+
+  return (
+    <WizardLayout
+      variant="centered-form"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+    >
+      {/* Page heading */}
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Included services
+      </Typography>
+
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
+        {isPrePlanning
+          ? "These services are included with your package. Let us know which you're considering — you can always adjust later."
+          : "The following services come with your selected package at no additional cost. Simply let us know which you'd like to include."}
+      </Typography>
+
+      <Divider sx={{ mb: 4 }} />
+
+      <Box
+        component="form"
+        noValidate
+        aria-busy={loading}
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          if (!loading) onContinue();
+        }}
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
+          <AddOnOption
+            name="Dressing and preparation"
+            description="Professional dressing and preparation of your loved one before the service."
+            checked={values.dressing}
+            onChange={(c) => handleToggle('dressing', c)}
+          />
+
+          <AddOnOption
+            name="Viewing"
+            description="Arrange a private viewing for family and close friends before the service."
+            checked={values.viewing}
+            onChange={(c) => handleToggle('viewing', c)}
+          >
+            <FormControl component="fieldset" sx={{ display: 'block' }}>
+              <FormLabel component="legend" sx={{ mb: 1 }}>
+                Same venue as the service?
+              </FormLabel>
+              <RadioGroup
+                value={values.viewingSameVenue ?? ''}
+                onChange={(e) =>
+                  handleFieldChange(
+                    'viewingSameVenue',
+                    e.target.value as IncludedServicesStepValues['viewingSameVenue'],
+                  )
+                }
+              >
+                <FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
+                <FormControlLabel value="no" control={<Radio />} label="No, different venue" />
+              </RadioGroup>
+            </FormControl>
+          </AddOnOption>
+
+          <AddOnOption
+            name="Prayers or vigil"
+            description="Arrange prayers or a vigil to be held before the service."
+            checked={values.prayers}
+            onChange={(c) => handleToggle('prayers', c)}
+          />
+
+          <AddOnOption
+            name="Funeral announcement"
+            description="A complimentary funeral notice prepared and shared by the funeral home."
+            checked={values.funeralAnnouncement}
+            onChange={(c) => handleToggle('funeralAnnouncement', c)}
+          />
+        </Box>
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* CTAs */}
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexDirection: { xs: 'column-reverse', sm: 'row' },
+            gap: 2,
+          }}
+        >
+          {onSaveAndExit ? (
+            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
+              Save and continue later
+            </Button>
+          ) : (
+            <Box />
+          )}
+          <Button type="submit" variant="contained" size="large" loading={loading}>
+            Continue
+          </Button>
+        </Box>
+      </Box>
+    </WizardLayout>
+  );
+};
+
+IncludedServicesStep.displayName = 'IncludedServicesStep';
+export default IncludedServicesStep;

src/components/pages/IncludedServicesStep/index.ts

@@ -0,0 +1,2 @@
+export { IncludedServicesStep, default } from './IncludedServicesStep';
+export type { IncludedServicesStepProps, IncludedServicesStepValues } from './IncludedServicesStep';