Add SummaryStep, PaymentStep, ConfirmationStep (wizard steps 13-15)

SummaryStep (step 13):
- Accordion sections with edit IconButtons linking back to each step
- dl/dt/dd definition list for label-value pairs
- Total bar with prominent price display (aria-live)
- Share plan icon button, deposit display
- Pre-planning: "Save your plan" CTA; at-need: "Confirm" CTA

PaymentStep (step 14):
- Payment plan (full/deposit) shown before method (amount before how)
- ToggleButtonGroup for plan + method selection
- Card: PayWay iframe slot with placeholder; Bank: account details display
- Terms checkbox with service agreement + privacy links
- Security reassurance (lock icon, no-surprise copy)

ConfirmationStep (step 15):
- Terminal page — no back button, no progress indicator
- At-need: "submitted" + callback timeframe + arranger contact
- Pre-planning: "saved" + return-anytime + family-ready copy
- Muted success icon (not celebratory), next-steps link buttons
- VenueCard selected prop also staged (from step 7 work)

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

src/components/pages/ConfirmationStep/ConfirmationStep.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmationStep } from './ConfirmationStep';
+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' },
+    ]}
+  />
+);
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof ConfirmationStep> = {
+  title: 'Pages/ConfirmationStep',
+  component: ConfirmationStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationStep>;
+
+// ─── At-need (default) ──────────────────────────────────────────────────────
+
+/** At-need confirmation — arranger will call */
+export const Default: Story = {
+  render: () => (
+    <ConfirmationStep
+      email="jane.smith@example.com"
+      phone="0412 345 678"
+      callbackTimeframe="within 2 hours"
+      onViewPlan={() => alert('View plan')}
+      nextSteps={[
+        { label: 'Start detailed arrangement', onClick: () => alert('Arrangement') },
+        { label: 'Go to dashboard', onClick: () => alert('Dashboard') },
+      ]}
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning confirmation — plan saved, return anytime */
+export const PrePlanning: Story = {
+  render: () => (
+    <ConfirmationStep
+      isPrePlanning
+      email="jane.smith@example.com"
+      onViewPlan={() => alert('View plan')}
+      nextSteps={[{ label: 'Go to dashboard', onClick: () => alert('Dashboard') }]}
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Minimal ────────────────────────────────────────────────────────────────
+
+/** Minimal — no next steps, no view plan */
+export const Minimal: Story = {
+  render: () => <ConfirmationStep email="jane.smith@example.com" navigation={nav} />,
+};