chore(deps): pin dependencies

fix MC test
tootip and graph style fixes
2025-12-07 01:45:50 +01:00 · 2025-12-07 01:43:26 +01:00 · 2025-12-06 22:58:10 +01:00 · 2025-12-06 21:42:00 +01:00 · 2025-12-06 20:58:42 +01:00 · 2025-12-06 20:46:01 +01:00
23 changed files with 2346 additions and 331 deletions
--- a/.cursor/worktrees.json
+++ b/.cursor/worktrees.json
@@ -0,0 +1,3 @@
+{
+  "setup-worktree": ["pnpm install"]
+}
--- a/.gitea/workflows/lint.yml
+++ b/.gitea/workflows/lint.yml
@@ -4,7 +4,7 @@ on:
  pull_request:
  push:
    branches:
-      - "**" # matches every branch
+      - '**' # matches every branch

 jobs:
  lint_and_typecheck:
@@ -22,10 +22,13 @@ jobs:
        uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6
        with:
          node-version: 24
-          cache: "pnpm"
+          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Run lint
        run: pnpm run lint
+
+      - name: Run unit tests
+        run: pnpm test
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-label": "^2.1.4",
    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
    "@radix-ui/react-select": "^2.2.2",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slider": "^1.3.2",
@@ -43,20 +44,20 @@
    "zod": "^4.0.0"
  },
  "devDependencies": {
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "1.57.0",
    "@tailwindcss/postcss": "4.1.17",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
    "@types/node": "24.10.1",
    "@types/react": "19.2.7",
    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "5.1.1",
    "eslint": "9.39.1",
    "eslint-config-next": "16.0.7",
    "eslint-config-prettier": "10.1.8",
-    "jsdom": "^27.2.0",
+    "jsdom": "27.2.0",
    "postcss": "8.5.6",
    "prettier": "3.7.4",
    "prettier-plugin-tailwindcss": "0.7.2",
@@ -64,7 +65,7 @@
    "tw-animate-css": "1.4.0",
    "typescript": "5.9.3",
    "typescript-eslint": "8.48.1",
-    "vitest": "^4.0.13"
+    "vitest": "4.0.13"
  },
  "ct3aMetadata": {
    "initVersion": "7.39.3"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,9 @@ importers:
      '@radix-ui/react-navigation-menu':
        specifier: ^1.2.14
        version: 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      '@radix-ui/react-select':
        specifier: ^2.2.2
        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -50,7 +53,7 @@ importers:
        version: 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      '@t3-oss/env-nextjs':
        specifier: ^0.13.0
-        version: 0.13.8(typescript@5.9.3)(zod@4.1.12)
+        version: 0.13.8(typescript@5.9.3)(zod@4.1.13)
      class-variance-authority:
        specifier: ^0.7.1
        version: 0.7.1
@@ -65,10 +68,10 @@ importers:
        version: 0.556.0(react@19.2.1)
      next:
        specifier: 16.0.7
-        version: 16.0.7(@babel/core@7.28.5)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 16.0.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      next-plausible:
        specifier: ^3.12.4
-        version: 3.12.5(next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 3.12.5(next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      react:
        specifier: 19.2.1
        version: 19.2.1
@@ -86,25 +89,25 @@ importers:
        version: 3.4.0
      zod:
        specifier: ^4.0.0
-        version: 4.1.12
+        version: 4.1.13
    devDependencies:
      '@playwright/test':
-        specifier: ^1.56.1
-        version: 1.56.1
+        specifier: 1.57.0
+        version: 1.57.0
      '@tailwindcss/postcss':
        specifier: 4.1.17
        version: 4.1.17
      '@testing-library/dom':
-        specifier: ^10.4.1
+        specifier: 10.4.1
        version: 10.4.1
      '@testing-library/jest-dom':
-        specifier: ^6.9.1
+        specifier: 6.9.1
        version: 6.9.1
      '@testing-library/react':
-        specifier: ^16.3.0
+        specifier: 16.3.0
        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      '@testing-library/user-event':
-        specifier: ^14.6.1
+        specifier: 14.6.1
        version: 14.6.1(@testing-library/dom@10.4.1)
      '@types/node':
        specifier: 24.10.1
@@ -116,7 +119,7 @@ importers:
        specifier: 19.2.3
        version: 19.2.3(@types/react@19.2.7)
      '@vitejs/plugin-react':
-        specifier: ^5.1.1
+        specifier: 5.1.1
        version: 5.1.1(vite@7.2.4(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2))
      eslint:
        specifier: 9.39.1
@@ -128,7 +131,7 @@ importers:
        specifier: 10.1.8
        version: 10.1.8(eslint@9.39.1(jiti@2.6.1))
      jsdom:
-        specifier: ^27.2.0
+        specifier: 27.2.0
        version: 27.2.0
      postcss:
        specifier: 8.5.6
@@ -152,7 +155,7 @@ importers:
        specifier: 8.48.1
        version: 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
      vitest:
-        specifier: ^4.0.13
+        specifier: 4.0.13
        version: 4.0.13(@types/node@24.10.1)(jiti@2.6.1)(jsdom@27.2.0)(lightningcss@1.30.2)

 packages:
@@ -764,8 +767,8 @@ packages:
    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
    engines: {node: '>=12.4.0'}

-  '@playwright/test@1.56.1':
-    resolution: {integrity: sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==}
+  '@playwright/test@1.57.0':
+    resolution: {integrity: sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==}
    engines: {node: '>=18'}
    hasBin: true

@@ -985,6 +988,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-popper@1.2.8':
    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
    peerDependencies:
@@ -3006,13 +3022,13 @@ packages:
    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
    engines: {node: '>=12'}

-  playwright-core@1.56.1:
-    resolution: {integrity: sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==}
+  playwright-core@1.57.0:
+    resolution: {integrity: sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==}
    engines: {node: '>=18'}
    hasBin: true

-  playwright@1.56.1:
-    resolution: {integrity: sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==}
+  playwright@1.57.0:
+    resolution: {integrity: sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==}
    engines: {node: '>=18'}
    hasBin: true

@@ -3868,8 +3884,8 @@ packages:
    peerDependencies:
      zod: ^3.25.0 || ^4.0.0

-  zod@4.1.12:
-    resolution: {integrity: sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==}
+  zod@4.1.13:
+    resolution: {integrity: sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==}

 snapshots:

@@ -3918,7 +3934,7 @@ snapshots:
      '@babel/types': 7.28.5
      '@jridgewell/remapping': 2.3.5
      convert-source-map: 2.0.0
-      debug: 4.4.0
+      debug: 4.4.3
      gensync: 1.0.0-beta.2
      json5: 2.2.3
      semver: 6.3.1
@@ -4004,7 +4020,7 @@ snapshots:
      '@babel/parser': 7.28.5
      '@babel/template': 7.27.2
      '@babel/types': 7.28.5
-      debug: 4.4.0
+      debug: 4.4.3
    transitivePeerDependencies:
      - supports-color

@@ -4382,9 +4398,9 @@ snapshots:

  '@nolyfill/is-core-module@1.0.39': {}

-  '@playwright/test@1.56.1':
+  '@playwright/test@1.57.0':
    dependencies:
-      playwright: 1.56.1
+      playwright: 1.57.0

  '@radix-ui/number@1.1.1': {}

@@ -4612,6 +4628,29 @@ snapshots:
      '@types/react': 19.2.7
      '@types/react-dom': 19.2.3(@types/react@19.2.7)

+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.1)
+      aria-hidden: 1.2.6
+      react: 19.2.1
+      react-dom: 19.2.1(react@19.2.1)
+      react-remove-scroll: 2.7.1(@types/react@19.2.7)(react@19.2.1)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)':
    dependencies:
      '@floating-ui/react-dom': 2.1.5(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
@@ -4926,17 +4965,17 @@ snapshots:
    dependencies:
      tslib: 2.8.1

-  '@t3-oss/env-core@0.13.8(typescript@5.9.3)(zod@4.1.12)':
+  '@t3-oss/env-core@0.13.8(typescript@5.9.3)(zod@4.1.13)':
    optionalDependencies:
      typescript: 5.9.3
-      zod: 4.1.12
+      zod: 4.1.13

-  '@t3-oss/env-nextjs@0.13.8(typescript@5.9.3)(zod@4.1.12)':
+  '@t3-oss/env-nextjs@0.13.8(typescript@5.9.3)(zod@4.1.13)':
    dependencies:
-      '@t3-oss/env-core': 0.13.8(typescript@5.9.3)(zod@4.1.12)
+      '@t3-oss/env-core': 0.13.8(typescript@5.9.3)(zod@4.1.13)
    optionalDependencies:
      typescript: 5.9.3
-      zod: 4.1.12
+      zod: 4.1.13

  '@tailwindcss/node@4.1.17':
    dependencies:
@@ -6007,8 +6046,8 @@ snapshots:
      '@babel/parser': 7.28.5
      eslint: 9.39.1(jiti@2.6.1)
      hermes-parser: 0.25.1
-      zod: 4.1.12
-      zod-validation-error: 4.0.2(zod@4.1.12)
+      zod: 4.1.13
+      zod-validation-error: 4.0.2(zod@4.1.13)
    transitivePeerDependencies:
      - supports-color

@@ -6102,7 +6141,7 @@ snapshots:

  estree-walker@3.0.3:
    dependencies:
-      '@types/estree': 1.0.7
+      '@types/estree': 1.0.8

  esutils@2.0.3: {}

@@ -6267,14 +6306,14 @@ snapshots:
  http-proxy-agent@7.0.2:
    dependencies:
      agent-base: 7.1.4
-      debug: 4.4.0
+      debug: 4.4.3
    transitivePeerDependencies:
      - supports-color

  https-proxy-agent@7.0.6:
    dependencies:
      agent-base: 7.1.4
-      debug: 4.4.0
+      debug: 4.4.3
    transitivePeerDependencies:
      - supports-color

@@ -6616,13 +6655,13 @@ snapshots:

  natural-compare@1.4.0: {}

-  next-plausible@3.12.5(next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next-plausible@3.12.5(next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
    dependencies:
-      next: 16.0.7(@babel/core@7.28.5)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      next: 16.0.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
      react: 19.2.1
      react-dom: 19.2.1(react@19.2.1)

-  next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.56.1)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next@16.0.7(@babel/core@7.28.5)(@playwright/test@1.57.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
    dependencies:
      '@next/env': 16.0.7
      '@swc/helpers': 0.5.15
@@ -6640,7 +6679,7 @@ snapshots:
      '@next/swc-linux-x64-musl': 16.0.7
      '@next/swc-win32-arm64-msvc': 16.0.7
      '@next/swc-win32-x64-msvc': 16.0.7
-      '@playwright/test': 1.56.1
+      '@playwright/test': 1.57.0
      sharp: 0.34.4
    transitivePeerDependencies:
      - '@babel/core'
@@ -6739,11 +6778,11 @@ snapshots:

  picomatch@4.0.3: {}

-  playwright-core@1.56.1: {}
+  playwright-core@1.57.0: {}

-  playwright@1.56.1:
+  playwright@1.57.0:
    dependencies:
-      playwright-core: 1.56.1
+      playwright-core: 1.57.0
    optionalDependencies:
      fsevents: 2.3.2

@@ -7636,8 +7675,8 @@ snapshots:

  yocto-queue@0.1.0: {}

-  zod-validation-error@4.0.2(zod@4.1.12):
+  zod-validation-error@4.0.2(zod@4.1.13):
    dependencies:
-      zod: 4.1.12
+      zod: 4.1.13

-  zod@4.1.12: {}
+  zod@4.1.13: {}
--- a/src/app/components/FireCalculatorForm.tsx
+++ b/src/app/components/FireCalculatorForm.tsx
@@ -1,19 +1,27 @@
 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';

+import { extractNumericSearchParam } from '@/lib/retire-at';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { ChartContainer, ChartTooltip } from '@/components/ui/chart';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
 import {
  Area,
  AreaChart,
  CartesianGrid,
+  Line,
  XAxis,
  YAxis,
  ReferenceLine,
@@ -21,12 +29,15 @@ import {
 } from 'recharts';
 import { Slider } from '@/components/ui/slider';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-import { Calculator, Info, Percent } from 'lucide-react';
+import type { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
+import { Calculator, Info, Share2, Check } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import BlurThing from './blur-thing';
 import Link from 'next/link';

+import type { FireCalculatorFormValues } from '@/lib/calculator-schema';
+import { fireCalculatorDefaultValues, fireCalculatorFormSchema } from '@/lib/calculator-schema';
+
 // Helper component for info tooltips next to form labels
 function InfoTooltip({ content }: Readonly<{ content: string }>) {
  return (
@@ -41,39 +52,8 @@ function InfoTooltip({ content }: Readonly<{ content: string }>) {
  );
 }

-// Schema for form validation
-const formSchema = z.object({
-  startingCapital: z.coerce.number(),
-  monthlySavings: z.coerce.number().min(0, 'Monthly savings must be a non-negative number'),
-  currentAge: z.coerce
-    .number()
-    .min(1, 'Age must be at least 1')
-    .max(100, 'No point in starting this late'),
-  cagr: z.coerce.number().min(0, 'Growth rate must be a non-negative number'),
-  desiredMonthlyAllowance: z.coerce.number().min(0, 'Monthly allowance must be a non-negative number'),
-  inflationRate: z.coerce.number().min(0, 'Inflation rate must be a non-negative number'),
-  lifeExpectancy: z.coerce
-    .number()
-    .min(40, 'Be a bit more optimistic buddy :(')
-    .max(100, 'You should be more realistic...'),
-  retirementAge: z.coerce
-    .number()
-    .min(18, 'Retirement age must be at least 18')
-    .max(100, 'Retirement age must be at most 100'),
-  coastFireAge: z.coerce
-    .number()
-    .min(18, 'Coast FIRE age must be at least 18')
-    .max(100, 'Coast FIRE age must be at most 100')
-    .optional(),
-  baristaIncome: z.coerce.number().min(0, 'Barista income must be a non-negative number').optional(),
-  simulationMode: z.enum(['deterministic', 'monte-carlo']).default('deterministic'),
-  volatility: z.coerce.number().min(0).default(15),
-  withdrawalStrategy: z.enum(['fixed', 'percentage']).default('fixed'),
-  withdrawalPercentage: z.coerce.number().min(0).max(100).default(4),
-});
-
-// Type for form values
-type FormValues = z.infer<typeof formSchema>;
+const formSchema = fireCalculatorFormSchema;
+type FormValues = FireCalculatorFormValues;

 interface YearlyData {
  age: number;
@@ -91,8 +71,6 @@ interface YearlyData {

 interface CalculationResult {
  fireNumber: number | null;
-  fireNumber4percent: number | null;
-  retirementAge4percent: number | null;
  yearlyData: YearlyData[];
  error?: string;
  successRate?: number; // For Monte Carlo
@@ -114,56 +92,153 @@ const formatNumber = (value: number | null) => {
  }).format(value);
 };

-// Helper function to render tooltip for chart
-const tooltipRenderer = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
-  if (active && payload?.[0]?.payload) {
-    const data = payload[0].payload as YearlyData;
-    return (
-      <div className="bg-background border p-2 shadow-sm">
-        <p className="font-medium">{`Year: ${data.year.toString()} (Age: ${data.age.toString()})`}</p>
-        {data.balanceP50 !== undefined ? (
-          <>
-            <p className="text-orange-500">{`Median Balance: ${formatNumber(data.balanceP50)}`}</p>
-            <p className="text-xs text-orange-300">{`10th %: ${formatNumber(data.balanceP10 ?? 0)}`}</p>
-            <p className="text-xs text-orange-300">{`90th %: ${formatNumber(data.balanceP90 ?? 0)}`}</p>
-          </>
-        ) : (
-          <p className="text-orange-500">{`Balance: ${formatNumber(data.balance)}`}</p>
-        )}
-        <p className="text-red-600">{`Monthly allowance: ${formatNumber(data.monthlyAllowance)}`}</p>
-        <p>{`Phase: ${data.phase === 'accumulation' ? 'Accumulation' : 'Retirement'}`}</p>
-      </div>
-    );
+const formatNumberShort = (value: number) => {
+  if (value >= 1000000) {
+    return `${(value / 1000000).toPrecision(3)}M`;
+  } else if (value >= 1000) {
+    return `${(value / 1000).toPrecision(3)}K`;
+  } else if (value <= -1000000) {
+    return `${(value / 1000000).toPrecision(3)}M`;
+  } else if (value <= -1000) {
+    return `${(value / 1000).toPrecision(3)}K`;
  }
-  return null;
+  return value.toString();
 };

-export default function FireCalculatorForm() {
+// Chart tooltip with the same styling as ChartTooltipContent, but with our custom label info
+const tooltipRenderer = ({ active, payload, label }: TooltipProps<ValueType, NameType>) => {
+  const allowedKeys = new Set(['balance', 'monthlyAllowance']);
+  const filteredPayload: Payload<ValueType, NameType>[] = (payload ?? [])
+    .filter(
+      (item): item is Payload<ValueType, NameType> =>
+        typeof item.dataKey === 'string' && allowedKeys.has(item.dataKey),
+    )
+    .map((item) => ({
+      ...item,
+      value: formatNumberShort(item.value as number),
+    }));
+  const safeLabel = typeof label === 'string' || typeof label === 'number' ? label : undefined;
+
+  return (
+    <ChartTooltipContent
+      active={active}
+      payload={filteredPayload}
+      label={safeLabel}
+      indicator="line"
+      className="min-w-48"
+      labelFormatter={(_, items: Payload<ValueType, NameType>[]) => {
+        const point = items.length > 0 ? (items[0]?.payload as YearlyData | undefined) : undefined;
+        if (!point) {
+          return null;
+        }
+
+        const phaseLabel = point.phase === 'retirement' ? 'Retirement phase' : 'Accumulation phase';
+
+        return (
+          <div className="flex flex-col gap-0.5">
+            <span>{`Year ${String(point.year)} (Age ${String(point.age)})`}</span>
+            <span className="text-muted-foreground">{phaseLabel}</span>
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default function FireCalculatorForm({
+  initialValues,
+  autoCalculate = false,
+}: Readonly<{
+  initialValues?: Partial<FireCalculatorFormValues>;
+  autoCalculate?: boolean;
+}>) {
  const [result, setResult] = useState<CalculationResult | null>(null);
  const irlYear = new Date().getFullYear();
-  const [showing4percent, setShowing4percent] = useState(false);
+  const [copied, setCopied] = useState(false);

  // Initialize form with default values
  const form = useForm<z.input<typeof formSchema>, undefined, FormValues>({
    resolver: zodResolver(formSchema),
-    defaultValues: {
-      startingCapital: 50000,
-      monthlySavings: 1500,
-      currentAge: 25,
-      cagr: 7,
-      desiredMonthlyAllowance: 3000,
-      inflationRate: 2.3,
-      lifeExpectancy: 84,
-      retirementAge: 55,
-      coastFireAge: undefined,
-      baristaIncome: 0,
-      simulationMode: 'deterministic',
-      volatility: 15,
-      withdrawalStrategy: 'fixed',
-      withdrawalPercentage: 4,
-    },
+    defaultValues: initialValues ?? fireCalculatorDefaultValues,
  });

+  // Hydrate from URL search params
+  const searchParams = useSearchParams();
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    if (hasHydrated) return;
+    if (searchParams.size === 0) {
+      setHasHydrated(true);
+      return;
+    }
+
+    const newValues: Partial<FormValues> = {};
+    const getParam = (key: string) => searchParams.get(key) ?? undefined;
+    const getNum = (key: string, bounds: { min?: number; max?: number } = {}) =>
+      extractNumericSearchParam(getParam(key), bounds);
+
+    const startingCapital = getNum('startingCapital', { min: 0 });
+    if (startingCapital !== undefined) newValues.startingCapital = startingCapital;
+
+    const monthlySavings = getNum('monthlySavings', { min: 0, max: 50000 });
+    if (monthlySavings !== undefined) newValues.monthlySavings = monthlySavings;
+
+    const currentAge = getNum('currentAge', { min: 1, max: 100 });
+    if (currentAge !== undefined) newValues.currentAge = currentAge;
+
+    const cagr = getNum('cagr') ?? getNum('growthRate', { min: 0, max: 30 });
+    if (cagr !== undefined) newValues.cagr = cagr;
+
+    const desiredMonthlyAllowance =
+      getNum('monthlySpend', { min: 0, max: 20000 }) ??
+      getNum('monthlyAllowance', { min: 0, max: 20000 });
+    if (desiredMonthlyAllowance !== undefined)
+      newValues.desiredMonthlyAllowance = desiredMonthlyAllowance;
+
+    const inflationRate = getNum('inflationRate', { min: 0, max: 20 });
+    if (inflationRate !== undefined) newValues.inflationRate = inflationRate;
+
+    const lifeExpectancy = getNum('lifeExpectancy', { min: 40, max: 110 });
+    if (lifeExpectancy !== undefined) newValues.lifeExpectancy = lifeExpectancy;
+
+    const retirementAge = getNum('retirementAge', { min: 18, max: 100 });
+    if (retirementAge !== undefined) newValues.retirementAge = retirementAge;
+
+    const coastFireAge = getNum('coastFireAge', { min: 18, max: 100 });
+    if (coastFireAge !== undefined) newValues.coastFireAge = coastFireAge;
+
+    const baristaIncome = getNum('baristaIncome', { min: 0 });
+    if (baristaIncome !== undefined) newValues.baristaIncome = baristaIncome;
+
+    const volatility = getNum('volatility', { min: 0 });
+    if (volatility !== undefined) newValues.volatility = volatility;
+
+    const withdrawalPercentage = getNum('withdrawalPercentage', { min: 0, max: 100 });
+    if (withdrawalPercentage !== undefined) newValues.withdrawalPercentage = withdrawalPercentage;
+
+    const simMode = searchParams.get('simulationMode');
+    if (simMode === 'deterministic' || simMode === 'monte-carlo') {
+      newValues.simulationMode = simMode;
+    }
+
+    const wStrategy = searchParams.get('withdrawalStrategy');
+    if (wStrategy === 'fixed' || wStrategy === 'percentage') {
+      newValues.withdrawalStrategy = wStrategy;
+    }
+
+    if (Object.keys(newValues).length > 0) {
+      // We merge with current values (which are defaults initially)
+      const merged = { ...form.getValues(), ...newValues };
+      form.reset(merged);
+      // Trigger calculation
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      form.handleSubmit(onSubmit)();
+    }
+    setHasHydrated(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchParams, hasHydrated]); // form is stable, but adding it causes no harm, excluding for cleaner hook deps
+
  function onSubmit(values: FormValues) {
    setResult(null); // Reset previous results

@@ -180,7 +255,7 @@ export default function FireCalculatorForm() {
    const simulationMode = values.simulationMode;
    const volatility = values.volatility;

-    const numSimulations = simulationMode === 'monte-carlo' ? 500 : 1;
+    const numSimulations = simulationMode === 'monte-carlo' ? 2000 : 1;
    const simulationResults: number[][] = []; // [yearIndex][simulationIndex] -> balance

    // Prepare simulation runs
@@ -258,9 +333,18 @@ export default function FireCalculatorForm() {
      // Sort to find percentiles
      balancesForYear.sort((a, b) => a - b);

-      const p10 = balancesForYear[Math.floor(numSimulations * 0.1)];
-      const p50 = balancesForYear[Math.floor(numSimulations * 0.5)];
-      const p90 = balancesForYear[Math.floor(numSimulations * 0.9)];
+      const pickPercentile = (fraction: number) => {
+        const clampedIndex = Math.min(
+          balancesForYear.length - 1,
+          Math.max(0, Math.floor((balancesForYear.length - 1) * fraction)),
+        );
+        return balancesForYear[clampedIndex];
+      };
+
+      // For Monte Carlo, we present a narrow middle band (40th-60th) to show typical outcomes
+      const p10 = pickPercentile(0.4);
+      const p50 = pickPercentile(0.5);
+      const p90 = pickPercentile(0.6);

      // Calculate other metrics (using deterministic logic for "untouched" etc for simplicity, or p50)
      // We need to reconstruct the "standard" fields for compatibility with the chart
@@ -307,42 +391,16 @@ export default function FireCalculatorForm() {
    const retirementIndex = yearlyData.findIndex((data) => data.year === retirementYear);
    const retirementData = yearlyData[retirementIndex];

-    const [fireNumber4percent, retirementAge4percent] = (() => {
-      // Re-enable 4% rule for deterministic mode or use p50 for MC
-      // For MC, "untouchedBalance" isn't tracked per run in aggregate, but we can use balanceP50 roughly
-      // or just disable it as it's a different philosophy.
-      // For now, let's calculate it based on the main "balance" field (which is p50 in MC)
-      for (const yearData of yearlyData) {
-        // Note: This is imperfect for MC because 'balance' includes withdrawals in retirement
-        // whereas 4% rule check usually looks at "if I retired now with this balance".
-        // The original code had `untouchedBalance` which grew without withdrawals.
-        // Since we removed `untouchedBalance` calculation in the aggregate loop, let's skip 4% for MC for now.
-
-        if (
-          simulationMode === 'deterministic' &&
-          yearData.untouchedBalance &&
-          yearData.untouchedBalance > (yearData.untouchedMonthlyAllowance * 12) / 0.04
-        ) {
-          return [yearData.untouchedBalance, yearData.age];
-        }
-      }
-      return [null, null];
-    })();
-
    if (retirementIndex === -1) {
      setResult({
        fireNumber: null,
-        fireNumber4percent: null,
-        retirementAge4percent: null,
-        error: 'Could not calculate retirement data',
        yearlyData: yearlyData,
+        error: 'Could not calculate retirement data',
      });
    } else {
      // Set the result
      setResult({
        fireNumber: retirementData.balance,
-        fireNumber4percent: fireNumber4percent,
-        retirementAge4percent: retirementAge4percent,
        yearlyData: yearlyData,
        successRate:
          simulationMode === 'monte-carlo' ? (successCount / numSimulations) * 100 : undefined,
@@ -350,6 +408,83 @@ export default function FireCalculatorForm() {
    }
  }

+  // Use effect for auto-calculation
+  useEffect(() => {
+    if (autoCalculate && !result) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      form.handleSubmit(onSubmit)();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoCalculate]);
+
+  const handleShare = () => {
+    const values = form.getValues() as FireCalculatorFormValues;
+    const params = new URLSearchParams();
+
+    params.set('startingCapital', String(values.startingCapital));
+    params.set('monthlySavings', String(values.monthlySavings));
+    params.set('currentAge', String(values.currentAge));
+    params.set('cagr', String(values.cagr));
+    params.set('monthlySpend', String(values.desiredMonthlyAllowance));
+    params.set('inflationRate', String(values.inflationRate));
+    params.set('lifeExpectancy', String(values.lifeExpectancy));
+    params.set('retirementAge', String(values.retirementAge));
+    params.set('coastFireAge', String(values.coastFireAge));
+    params.set('baristaIncome', String(values.baristaIncome));
+    params.set('simulationMode', values.simulationMode);
+    params.set('volatility', String(values.volatility));
+    params.set('withdrawalStrategy', values.withdrawalStrategy);
+    params.set('withdrawalPercentage', String(values.withdrawalPercentage));
+
+    const url = `${window.location.origin}${window.location.pathname}?${params.toString()}`;
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 4000);
+    });
+  };
+
+  const simulationModeValue = form.watch('simulationMode');
+  const isMonteCarlo = simulationModeValue === 'monte-carlo';
+  const chartData =
+    result?.yearlyData.map((row) => ({
+      ...row,
+      mcRange: (row.balanceP90 ?? 0) - (row.balanceP10 ?? 0),
+    })) ?? [];
+
+  // Ensure we always have a fresh calculation when switching simulation modes (or on first render)
+  useEffect(() => {
+    if (!result) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      form.handleSubmit(onSubmit)();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [simulationModeValue]);
+
+  const projectionChartConfig: ChartConfig = {
+    year: {
+      label: 'Year',
+    },
+    balance: {
+      label: 'Balance',
+      color: 'var(--color-orange-500)',
+    },
+    balanceP10: {
+      label: 'P10 balance',
+      color: 'var(--color-orange-500)',
+    },
+    balanceP90: {
+      label: 'P90 balance',
+      color: 'var(--color-orange-500)',
+    },
+    monthlyAllowance: {
+      label: 'Monthly allowance',
+      color: 'var(--color-secondary)',
+    },
+  };
+
  return (
    <>
      <Card className="border-primary/15 bg-background/90 shadow-primary/10 mb-6 border shadow-lg backdrop-blur">
@@ -667,7 +802,7 @@ export default function FireCalculatorForm() {
                    <FormItem>
                      <FormLabel>
                        Simulation Mode
-                        <InfoTooltip content="Deterministic uses fixed yearly returns. Monte Carlo simulates market randomness with 500 runs to show probability ranges." />
+                        <InfoTooltip content="Monte Carlo simulates market randomness with 2000 runs to show probability ranges. Deterministic uses fixed yearly returns." />
                      </FormLabel>
                      <Select
                        onValueChange={(val) => {
@@ -800,11 +935,13 @@ export default function FireCalculatorForm() {
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="px-2">
-                    <ChartContainer className="aspect-auto h-80 w-full" config={{}}>
-                      <AreaChart
-                        data={result.yearlyData}
-                        margin={{ top: 10, right: 20, left: 20, bottom: 10 }}
-                      >
+                    {isMonteCarlo && (
+                      <p className="text-muted-foreground px-2 text-xs" data-testid="mc-band-legend">
+                        Shaded band shows 40th-60th percentile outcomes across 2000 simulations.
+                      </p>
+                    )}
+                    <ChartContainer className="aspect-auto h-80 w-full" config={projectionChartConfig}>
+                      <AreaChart data={chartData} margin={{ top: 10, right: 20, left: 20, bottom: 10 }}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis
                          dataKey="year"
@@ -818,18 +955,7 @@ export default function FireCalculatorForm() {
                        <YAxis
                          yAxisId={'right'}
                          orientation="right"
-                          tickFormatter={(value: number) => {
-                            if (value >= 1000000) {
-                              return `${(value / 1000000).toPrecision(3)}M`;
-                            } else if (value >= 1000) {
-                              return `${(value / 1000).toPrecision(3)}K`;
-                            } else if (value <= -1000000) {
-                              return `${(value / 1000000).toPrecision(3)}M`;
-                            } else if (value <= -1000) {
-                              return `${(value / 1000).toPrecision(3)}K`;
-                            }
-                            return value.toString();
-                          }}
+                          tickFormatter={formatNumberShort}
                          width={30}
                          stroke="var(--color-orange-500)"
                          tick={{}}
@@ -838,23 +964,20 @@ export default function FireCalculatorForm() {
                        <YAxis
                          yAxisId="left"
                          orientation="left"
-                          tickFormatter={(value: number) => {
-                            if (value >= 1000000) {
-                              return `${(value / 1000000).toPrecision(3)}M`;
-                            } else if (value >= 1000) {
-                              return `${(value / 1000).toPrecision(3)}K`;
-                            }
-                            return value.toString();
-                          }}
+                          tickFormatter={formatNumberShort}
                          width={30}
-                          stroke="var(--color-red-600)"
+                          stroke="var(--color-primary)"
                        />
                        <ChartTooltip content={tooltipRenderer} />
                        <defs>
                          <linearGradient id="fillBalance" x1="0" y1="0" x2="0" y2="1">
-                            <stop offset="5%" stopColor="var(--color-orange-500)" stopOpacity={0.8} />
+                            <stop offset="5%" stopColor="var(--color-orange-500)" stopOpacity={0.5} />
                            <stop offset="95%" stopColor="var(--color-orange-500)" stopOpacity={0.1} />
                          </linearGradient>
+                          <linearGradient id="fillMonteCarloBand" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="0%" stopColor="var(--color-primary)" stopOpacity={0.1} />
+                            <stop offset="100%" stopColor="var(--color-secondary)" stopOpacity={0.3} />
+                          </linearGradient>
                        </defs>
                        <Area
                          type="monotone"
@@ -867,33 +990,61 @@ export default function FireCalculatorForm() {
                          yAxisId={'right'}
                          stackId={'a'}
                        />
-                        {form.getValues('simulationMode') === 'monte-carlo' && (
-                          <>
-                            <Area
-                              type="monotone"
-                              dataKey="balanceP10"
-                              stroke="none"
-                              fill="var(--color-orange-500)"
-                              fillOpacity={0.1}
-                              yAxisId={'right'}
-                              connectNulls
-                            />
-                            <Area
-                              type="monotone"
-                              dataKey="balanceP90"
-                              stroke="none"
-                              fill="var(--color-orange-500)"
-                              fillOpacity={0.1}
-                              yAxisId={'right'}
-                              connectNulls
-                            />
-                          </>
-                        )}
+                        <Area
+                          type="monotone"
+                          dataKey="balanceP10"
+                          stackId="mc-range"
+                          stroke="none"
+                          fill="none"
+                          yAxisId={'right'}
+                          connectNulls
+                          isAnimationActive={false}
+                          className="mc-bound-base"
+                          data-testid="mc-bound-lower"
+                        />
+                        <Area
+                          type="monotone"
+                          dataKey={(data: YearlyData & { mcRange: number }) => data.mcRange}
+                          stackId="mc-range"
+                          stroke="none"
+                          fill="url(#fillMonteCarloBand)"
+                          fillOpacity={0.5}
+                          yAxisId={'right'}
+                          activeDot={false}
+                          connectNulls
+                          isAnimationActive={false}
+                          className="mc-bound-band"
+                          data-testid="mc-bound-band"
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="balanceP10"
+                          stroke="var(--color-orange-500)"
+                          strokeDasharray="6 6"
+                          strokeWidth={0}
+                          dot={false}
+                          activeDot={false}
+                          yAxisId={'right'}
+                          className="mc-bound-line-lower"
+                          data-testid="mc-bound-line-lower"
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey="balanceP90"
+                          stroke="var(--color-orange-500)"
+                          strokeDasharray="6 6"
+                          strokeWidth={0}
+                          dot={false}
+                          activeDot={false}
+                          yAxisId={'right'}
+                          className="mc-bound-line-upper"
+                          data-testid="mc-bound-line-upper"
+                        />
                        <Area
                          type="step"
                          dataKey="monthlyAllowance"
                          name="allowance"
-                          stroke="var(--color-red-600)"
+                          stroke="var(--primary)"
                          fill="none"
                          activeDot={{ r: 6 }}
                          yAxisId="left"
@@ -901,8 +1052,8 @@ export default function FireCalculatorForm() {
                        {result.fireNumber && (
                          <ReferenceLine
                            y={result.fireNumber}
-                            stroke="var(--primary)"
-                            strokeWidth={2}
+                            stroke="var(--secondary)"
+                            strokeWidth={1}
                            strokeDasharray="2 1"
                            label={{
                              value: 'FIRE Number',
@@ -911,65 +1062,38 @@ export default function FireCalculatorForm() {
                            yAxisId={'right'}
                          />
                        )}
-                        {result.fireNumber4percent && showing4percent && (
-                          <ReferenceLine
-                            y={result.fireNumber4percent}
-                            stroke="var(--secondary)"
-                            strokeWidth={1}
-                            strokeDasharray="1 1"
-                            label={{
-                              value: '4%-Rule FIRE Number',
-                              position: 'insideBottomLeft',
-                            }}
-                            yAxisId={'right'}
-                          />
-                        )}
                        <ReferenceLine
                          x={
                            irlYear +
                            (Number(form.getValues('retirementAge')) -
                              Number(form.getValues('currentAge')))
                          }
-                          stroke="var(--primary)"
-                          strokeWidth={2}
+                          stroke="var(--secondary)"
+                          strokeWidth={1}
                          label={{
                            value: 'Retirement',
                            position: 'insideTopRight',
                          }}
                          yAxisId={'left'}
                        />
-                        {result.retirementAge4percent && showing4percent && (
-                          <ReferenceLine
-                            x={
-                              irlYear +
-                              (result.retirementAge4percent - Number(form.getValues('currentAge')))
-                            }
-                            stroke="var(--secondary)"
-                            strokeWidth={1}
-                            label={{
-                              value: '4%-Rule Retirement',
-                              position: 'insideBottomLeft',
-                            }}
-                            yAxisId={'left'}
-                          />
-                        )}
                      </AreaChart>
                    </ChartContainer>
                  </CardContent>
                </Card>
              )}
              {result && (
-                <Button
-                  onClick={() => {
-                    setShowing4percent(!showing4percent);
-                  }}
-                  variant={showing4percent ? 'secondary' : 'default'}
-                  size={'sm'}
-                  className="mt-2 gap-2 self-start"
-                >
-                  <Percent className="h-4 w-4" />
-                  {showing4percent ? 'Hide' : 'Show'} 4%-Rule
-                </Button>
+                <div className="mt-2 flex flex-wrap justify-end gap-2">
+                  <Button
+                    onClick={handleShare}
+                    variant="default"
+                    size={'lg'}
+                    className="w-full gap-2 md:w-auto"
+                    type="button"
+                  >
+                    {copied ? <Check className="h-4 w-4" /> : <Share2 className="h-4 w-4" />}
+                    {copied ? 'Sharable Link Copied!' : 'Share Calculation'}
+                  </Button>
+                </div>
              )}
            </form>
          </Form>
@@ -1009,35 +1133,6 @@ export default function FireCalculatorForm() {
                  </p>
                </CardContent>
              </Card>
-              {showing4percent && (
-                <>
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>4%-Rule FIRE Number</CardTitle>
-                      <CardDescription className="text-xs">
-                        Capital needed for 4% of it to be greater than your yearly allowance
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <p className="text-3xl font-bold">{formatNumber(result.fireNumber4percent)}</p>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>4%-Rule Retirement Duration</CardTitle>
-                      <CardDescription className="text-xs">
-                        Years to enjoy your financial independence if you follow the 4% rule
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <p className="text-3xl font-bold">
-                        {Number(form.getValues('lifeExpectancy')) - (result.retirementAge4percent ?? 0)}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </>
-              )}
            </>
          )}
        </div>
--- a/src/app/components/tests/FireCalculatorForm.test.tsx
+++ b/src/app/components/tests/FireCalculatorForm.test.tsx
@@ -36,6 +36,17 @@ vi.mock('recharts', async () => {
  };
 });

+// Mock next/navigation
+vi.mock('next/navigation', () => ({
+  useSearchParams: () => new URLSearchParams(),
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  usePathname: () => '/',
+}));
+
 describe('FireCalculatorForm', () => {
  it('renders the form with default values', () => {
    render(<FireCalculatorForm />);
@@ -59,15 +70,16 @@ describe('FireCalculatorForm', () => {
    });
  });

-  it('allows changing inputs', () => {
-    // using fireEvent for reliability with number inputs in jsdom
+  it('allows changing inputs', async () => {
    render(<FireCalculatorForm />);

    const savingsInput = screen.getByRole('spinbutton', { name: /Monthly Savings/i });

    fireEvent.change(savingsInput, { target: { value: '2000' } });

-    expect(savingsInput).toHaveValue(2000);
+    await waitFor(() => {
+      expect(savingsInput).toHaveValue(2000);
+    });
  });

  it('validates inputs', async () => {
@@ -101,28 +113,20 @@ describe('FireCalculatorForm', () => {
    expect(await screen.findByRole('spinbutton', { name: /Market Volatility/i })).toBeInTheDocument();
  });

-  it('toggles 4% Rule overlay', async () => {
+  it('shows Monte Carlo percentile bounds on the chart', async () => {
    const user = userEvent.setup();
    render(<FireCalculatorForm />);

-    // Calculate first to show results
-    const calculateButton = screen.getByRole('button', { name: /Calculate/i });
-    await user.click(calculateButton);
+    const modeTrigger = screen.getByRole('combobox', { name: /Simulation Mode/i });
+    await user.click(modeTrigger);

-    // Wait for results
-    await waitFor(() => {
-      expect(screen.getByText('Financial Projection')).toBeInTheDocument();
-    });
+    const monteCarloOption = await screen.findByRole('option', { name: /Monte Carlo/i });
+    await user.click(monteCarloOption);

-    // Find the Show 4%-Rule button
-    const showButton = screen.getByRole('button', { name: /Show 4%-Rule/i });
-    await user.click(showButton);
+    await screen.findByText('Financial Projection');
+    const bandLegend = await screen.findByTestId('mc-band-legend');

-    // Should now see 4%-Rule stats
-    expect(await screen.findByText('4%-Rule FIRE Number')).toBeInTheDocument();
-
-    // Button text should change
-    expect(screen.getByRole('button', { name: /Hide 4%-Rule/i })).toBeInTheDocument();
+    expect(bandLegend).toHaveTextContent('40th-60th percentile');
  });

  it('handles withdrawal strategy selection', async () => {
--- a/src/app/components/charts/FourPercentRuleChart.tsx
+++ b/src/app/components/charts/FourPercentRuleChart.tsx
@@ -92,7 +92,7 @@ export function FourPercentRuleChart() {
              content={
                <ChartTooltipContent
                  labelFormatter={(value) => `Year ${String(value)}`}
-                  indicator="dot"
+                  indicator="line"
                />
              }
            />
--- a/src/app/learn/home-bias-in-investing/page.tsx
+++ b/src/app/learn/home-bias-in-investing/page.tsx
@@ -0,0 +1,341 @@
+import Link from 'next/link';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { Info } from 'lucide-react';
+import { AuthorBio } from '@/app/components/AuthorBio';
+import { FaqSection, type FaqItem } from '@/app/components/FaqSection';
+
+const faqs: FaqItem[] = [
+  {
+    question: 'How much of my portfolio should be domestic?',
+    answer:
+      'A common approach is market-cap weighting globally (roughly 55–60% US, 40–45% international today). Some investors keep 10–30% home tilt for currency needs, but large overweights increase concentration risk.',
+  },
+  {
+    question: 'Does currency hedging remove home bias?',
+    answer:
+      'No. Hedging manages currency volatility but does not reduce country/sector concentration. Home bias is about overweighting domestic equities relative to their global weight.',
+  },
+  {
+    question: 'Are there times when a home tilt makes sense?',
+    answer:
+      'Yes. If you have future liabilities in local currency (housing, tuition) or you want to simplify taxes, a modest tilt can be justified. Keep it intentional and sized.',
+  },
+  {
+    question: 'What about emerging markets?',
+    answer:
+      'Global indexes already include emerging markets (EM). Adding a small EM tilt is optional; avoid excluding EM entirely to prevent regional concentration.',
+  },
+  {
+    question: 'How do I reduce home bias in practice?',
+    answer:
+      'Replace single-country funds with global or All-World ETFs. Set an allocation policy (e.g., 80% global cap-weight, 20% local tilt) and rebalance to it instead of reacting to headlines.',
+  },
+];
+
+export const metadata = {
+  title: 'Home Bias in Investing: Why It Matters and How to Fix It',
+  description:
+    'Home bias concentrates risk in one country. Learn why it happens, how it hurts returns, and simple steps to global diversification.',
+  openGraph: {
+    title: 'Home Bias in Investing: Why It Matters and How to Fix It',
+    description: 'Reduce country concentration, improve diversification, and stay tax aware.',
+    type: 'article',
+    url: 'https://investingfire.com/learn/home-bias-in-investing',
+  },
+};
+
+export default function HomeBiasPage() {
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: 'Home Bias in Investing: Why It Matters and How to Fix It',
+    author: {
+      '@type': 'Organization',
+      name: 'InvestingFIRE Team',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'InvestingFIRE',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://investingfire.com/apple-icon.png',
+      },
+    },
+    datePublished: '2025-01-24',
+    description:
+      'Understand home bias, its risks, and practical steps to diversify globally while respecting local tax rules.',
+  };
+
+  return (
+    <article className="container mx-auto max-w-3xl px-4 py-12">
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+
+      <nav className="text-muted-foreground mb-6 text-sm">
+        <Link href="/" className="hover:text-primary">
+          Home
+        </Link>
+        <span className="mx-2">/</span>
+        <Link href="/learn" className="hover:text-primary">
+          Learn
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="text-foreground">Home Bias</span>
+      </nav>
+
+      <header className="mb-10">
+        <h1 className="mb-6 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          Home Bias: The Hidden Risk in Your Portfolio
+        </h1>
+        <p className="text-muted-foreground text-xl leading-relaxed">
+          Overweighting your home market feels comfortable but concentrates risk. Here’s why it happens
+          and how to diversify without creating tax headaches.
+        </p>
+      </header>
+
+      <div className="max-w-none">
+        <Alert className="mb-8">
+          <Info className="h-4 w-4" />
+          <AlertTitle>Bias Check</AlertTitle>
+          <AlertDescription>
+            If your country is less than 10% of global market cap but more than 50% of your portfolio,
+            you’re taking concentrated country and currency risk.
+          </AlertDescription>
+        </Alert>
+
+        <h2>What is Home Bias?</h2>
+        <p>
+          Home bias is the tendency to hold a far larger share of domestic stocks than their global
+          weight. Investors in the US, UK, Canada, Sweden, India, and Australia all exhibit this behavior
+          despite different market sizes.
+        </p>
+
+        <h2>Why It Happens</h2>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>
+            <strong>Familiarity:</strong> You know the brands and news cycle.
+          </li>
+          <li>
+            <strong>Currency needs:</strong> You expect to spend in your local currency.
+          </li>
+          <li>
+            <strong>Access & regulation:</strong> Some brokers limit foreign listings (PRIIPs/UCITS).
+          </li>
+          <li>
+            <strong>Tax frictions:</strong> Forms, withholding tax, and paperwork discourage global
+            exposure.
+          </li>
+        </ul>
+
+        <h2 className="mt-16">Why It’s Risky</h2>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>
+            Country/sector concentration (e.g., US tech, Canadian financials/energy, Swedish industrials)
+          </li>
+          <li>Currency risk without diversification benefits</li>
+          <li>Policy and regulatory risk (capital controls, tax changes)</li>
+          <li>Missed growth in other regions and sectors</li>
+        </ul>
+
+        <h2 className="mt-16">Fixing Home Bias (Practical Steps)</h2>
+        <ol className="list-decimal space-y-2 pl-5">
+          <li>Measure: compare your country weight to global cap weights (ACWI/FTSE All-World).</li>
+          <li>Adopt a global core: one All-World ETF (VWCE, VT, VWRA, DHHF) or IWDA+EMIM combo.</li>
+          <li>Set a deliberate tilt: e.g., 20% home, 80% global. Rebalance to policy, not headlines.</li>
+          <li>
+            Match currency to liabilities: keep cash for near-term local spending; hedge bonds where
+            available.
+          </li>
+          <li>Use local wrappers to handle tax but hold global funds inside them when allowed.</li>
+        </ol>
+
+        <h2 className="mt-16">Tax & Wrapper Considerations</h2>
+        <p>
+          You can stay globally diversified while using local tax shelters. The key is picking the right
+          share class and domicile:
+        </p>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>
+            US: Avoid PFICs; prefer US-domiciled ETFs in IRAs/401k. Consider foreign tax credits in
+            taxable.
+          </li>
+          <li>
+            UK/EU: UCITS ETFs (PRIIPs compliant). Accumulating classes reduce admin in many systems.
+          </li>
+          <li>Canada: US-domiciled ETFs in RRSP may reduce withholding; TFSA does not.</li>
+          <li>
+            Sweden: ISK/KF simplify reporting; IE-domiciled ETFs help withholding compared to
+            US-domiciled.
+          </li>
+          <li>
+            Australia/NZ: Use Super for tax efficiency; outside, consider broad local + global ETFs.
+          </li>
+        </ul>
+
+        <h2 className="mt-16">Evidence & Further Reading</h2>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>
+            MSCI,&quot;The Home Bias Effect in Global Portfolios&quot; —{' '}
+            <Link
+              href="https://www.msci.com/research-and-insights/quick-take/did-home-bias-help"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              MSCI
+            </Link>
+          </li>
+          <li>
+            Vanguard Research,&quot;Global equity investing: The benefits of diversification&quot; —{' '}
+            <Link
+              href="https://www.vanguardmexico.com/content/dam/intl/americas/documents/mexico/en/global-equity-investing-diversification-sizing.pdf"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Vanguard
+            </Link>
+          </li>
+          <li>
+            Sercu &amp; Vanpee (2012),&quot;The home bias puzzle in equity portfolios&quot; —{' '}
+            <Link
+              href="https://doi.org/10.1093/acprof:oso/9780199754656.003.0015"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Oxford University Press
+            </Link>
+          </li>
+          <li>
+            Fisher, Shah &amp; Titman (2017),&quot;Should you tilt your equity portfolio to smaller
+            countries?&quot; —{' '}
+            <Link
+              href="https://doi.org/10.3905/jpm.2017.44.1.127"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Journal of Portfolio Management
+            </Link>
+          </li>
+          <li>
+            Attig &amp; Sy (2023), &quot;Diversification during hard times&quot; —{' '}
+            <Link
+              href="https://doi.org/10.1080/0015198X.2022.2160620"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Financial Analysts Journal
+            </Link>
+          </li>
+          <li>
+            Blanchett (2021),&quot;Foreign revenue: A new world of risk exposures&quot; —{' '}
+            <Link
+              href="https://doi.org/10.3905/jpm.2021.1.237"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Journal of Portfolio Management
+            </Link>
+          </li>
+          <li>
+            Anarkulova, Cederburg &amp; O’Doherty (2023),&quot;Beyond the status quo: A critical
+            assessment of lifecycle investment advice&quot; —{' '}
+            <Link
+              href="https://doi.org/10.2139/ssrn.4590406"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              SSRN
+            </Link>
+          </li>
+          <li>
+            Goetzmann (2004),&quot;Will history rhyme?&quot; —{' '}
+            <Link
+              href="https://doi.org/10.3905/jpm.2004.442619"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Journal of Portfolio Management
+            </Link>
+          </li>
+          <li>
+            Ritter (2012),&quot;Is economic growth good for investors?&quot; —{' '}
+            <Link
+              href="https://doi.org/10.1111/j.1745-6622.2012.00385.x"
+              className="text-primary hover:underline"
+            >
+              Journal of Applied Corporate Finance
+            </Link>
+          </li>
+          <li>
+            French (2022),&quot;Five things I know about investing&quot; —{' '}
+            <Link
+              href="https://www.dimensional.com/us-en/insights/five-things-i-know-about-investing"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Dimensional
+            </Link>
+          </li>
+          <li>
+            Bryan (2018),&quot;World War 1 and global stock markets&quot; —{' '}
+            <Link
+              href="https://globalfinancialdata.com/world-war-1-and-global-stock-markets"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Global Financial Data
+            </Link>
+          </li>
+          <li>
+            Episode 200: Prof. Eugene Fama (2022) —{' '}
+            <Link
+              href="https://rationalreminder.ca/podcast/200"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Rational Reminder Podcast
+            </Link>
+          </li>
+          <li>
+            Merton (1973),&quot;An intertemporal capital asset pricing model&quot; —{' '}
+            <Link
+              href="https://doi.org/10.2307/1913811"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Econometrica
+            </Link>
+          </li>
+        </ul>
+
+        <div className="my-10 grid gap-4 sm:grid-cols-2">
+          <Link href="/learn/where-to-park-your-money">
+            <Button size="lg" className="w-full text-lg">
+              Build a Global Portfolio →
+            </Button>
+          </Link>
+          <Link href="/learn/safe-withdrawal-rate-4-percent-rule">
+            <Button size="lg" variant="secondary" className="w-full text-lg">
+              Plan Withdrawals →
+            </Button>
+          </Link>
+        </div>
+
+        <FaqSection faqs={faqs} className="my-12" />
+
+        <AuthorBio />
+      </div>
+    </article>
+  );
+}
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import BlurThing from '../components/blur-thing';
+import { RETIRE_AT_AGE_PRESETS } from '@/lib/retire-at';

 export const metadata = {
  title: 'Learn FIRE | Financial Independence Guides & Resources',
@@ -8,6 +9,8 @@ export const metadata = {
    'Master the art of Financial Independence and Early Retirement. Deep dives into safe withdrawal rates, asset allocation, and FIRE strategies.',
 };

+const retireAgeLinks = RETIRE_AT_AGE_PRESETS;
+
 export default function LearnHubPage() {
  return (
    <div className="container mx-auto max-w-4xl px-4 py-12">
@@ -90,6 +93,77 @@ export default function LearnHubPage() {
            </CardContent>
          </Card>
        </Link>
+
+        {/* Article 4 */}
+        <Link href="/learn/where-to-park-your-money" className="transition-transform hover:scale-[1.02]">
+          <Card className="hover:border-primary/50 h-full cursor-pointer border-2">
+            <CardHeader>
+              <div className="mb-2">
+                <span className="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">
+                  Portfolio
+                </span>
+              </div>
+              <CardTitle className="text-2xl">Where to Park Your Money</CardTitle>
+              <CardDescription>
+                Global, low-cost index strategies, tax wrappers, and broker tips for FIRE.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-muted-foreground text-sm">
+                Build a world-allocation portfolio, avoid home bias, and choose the right accounts
+                whether you&apos;re in the US, EU, UK, Canada, Australia, or elsewhere.
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
+
+        {/* Article 5 */}
+        <Link href="/learn/home-bias-in-investing" className="transition-transform hover:scale-[1.02]">
+          <Card className="hover:border-primary/50 h-full cursor-pointer border-2">
+            <CardHeader>
+              <div className="mb-2">
+                <span className="rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800">
+                  Risk
+                </span>
+              </div>
+              <CardTitle className="text-2xl">Home Bias Explained</CardTitle>
+              <CardDescription>Why country concentration hurts—and how to fix it.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p className="text-muted-foreground text-sm">
+                Understand the hidden risks of overweighting your domestic market and learn practical
+                steps to diversify globally without creating tax headaches.
+              </p>
+            </CardContent>
+          </Card>
+        </Link>
+      </div>
+
+      <div className="mt-14 space-y-4">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold">Retire By Age</h2>
+          <p className="text-muted-foreground">
+            See exactly how much you need to retire at different ages, backed by the calculator.
+          </p>
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          {retireAgeLinks.map((age) => (
+            <Link
+              key={age}
+              href={`/learn/retire-at/${age.toString()}`}
+              className="transition-transform hover:scale-[1.02]"
+            >
+              <Card className="hover:border-primary/50 h-full cursor-pointer border-2">
+                <CardHeader>
+                  <CardTitle className="text-xl">Retire at {age}</CardTitle>
+                  <CardDescription className="text-muted-foreground text-xs">
+                    How much to save, what to invest, and what to tweak for age {age}.
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </Link>
+          ))}
+        </div>
      </div>

      <div className="bg-muted mt-16 rounded-xl p-8 text-center">
--- a/src/app/learn/retire-at/[age]/page.tsx
+++ b/src/app/learn/retire-at/[age]/page.tsx
@@ -0,0 +1,279 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { FaqSection, type FaqItem } from '@/app/components/FaqSection';
+import {
+  RETIRE_AT_AGE_PRESETS,
+  buildSpendScenarios,
+  calculateNestEggFromSpend,
+  extractCalculatorValuesFromSearch,
+  parseAgeParam,
+} from '@/lib/retire-at';
+import { BASE_URL } from '@/lib/constants';
+
+export const dynamic = 'force-static';
+export const dynamicParams = false;
+
+interface RetireAtPageProps {
+  params: Promise<{ age: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}
+
+const currencyFormatter = new Intl.NumberFormat('en', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0,
+});
+
+const faqForAge = (age: number): FaqItem[] => {
+  const ageLabel = age.toString();
+  return [
+    {
+      question: `How much do I need to retire at ${ageLabel}?`,
+      answer:
+        'A quick rule is your desired annual spending divided by a safe withdrawal rate. Using 4%, multiply your yearly spend by 25. Spending $60k/year means roughly $1.5M. Use the calculator below to tailor the projection to your own savings, growth, and inflation assumptions.',
+    },
+    {
+      question: `What savings rate should I target to retire at ${ageLabel}?`,
+      answer:
+        'Aim for a 40–60% savings rate if you want to retire in 10–15 years. The exact rate depends on your starting capital, investment returns, and spending goal. Slide the monthly savings input to see how it moves your FIRE number and timeline.',
+    },
+    {
+      question: 'Is the 4% rule safe for this timeline?',
+      answer:
+        'The 4% rule is a starting point, not a guarantee. Consider 3.5–4% for longer retirements or higher inflation periods. The calculator supports both fixed and percentage-based withdrawals so you can stress-test more conservative plans.',
+    },
+    {
+      question: 'What if markets underperform?',
+      answer:
+        'Use a lower CAGR (e.g., 5–6%) and a higher inflation rate (e.g., 3%) in the calculator. Switch to Monte Carlo mode to see success probabilities with volatility. Also build flexibility into spending: trimming costs in bad years greatly improves durability.',
+    },
+  ];
+};
+
+export const generateStaticParams = () =>
+  RETIRE_AT_AGE_PRESETS.map((age) => ({
+    age: age.toString(),
+  }));
+
+export const generateMetadata = async ({ params }: RetireAtPageProps): Promise<Metadata> => {
+  const { age: slugAge } = await params;
+  const age = parseAgeParam(slugAge);
+  const ageLabel = age.toString();
+  const title = `How Much Do You Need to Retire at ${ageLabel}? | InvestingFIRE`;
+  const description = `Instant answer plus calculator: see how much you need saved to retire at ${ageLabel}, modeled with your spending, returns, and inflation assumptions.`;
+  const canonical = `${BASE_URL.replace(/\/$/, '')}/learn/retire-at/${ageLabel}`;
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical,
+    },
+    openGraph: {
+      title,
+      description,
+      url: canonical,
+      type: 'article',
+    },
+  };
+};
+
+export default async function RetireAtPage({ params, searchParams }: RetireAtPageProps) {
+  const { age: slugAge } = await params;
+  const resolvedSearch = (await searchParams) ?? {};
+  const age = parseAgeParam(slugAge);
+  const ageLabel = age.toString();
+  const initialValues = extractCalculatorValuesFromSearch(resolvedSearch, age);
+  const monthlySpend = initialValues.desiredMonthlyAllowance ?? 4000;
+  const withdrawalRate = 0.04;
+  const quickNestEgg = calculateNestEggFromSpend(monthlySpend, withdrawalRate);
+  const scenarios = buildSpendScenarios(monthlySpend, withdrawalRate);
+
+  const canonical = `${BASE_URL.replace(/\/$/, '')}/learn/retire-at/${ageLabel}`;
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: `How Much Do You Need to Retire at ${ageLabel}?`,
+    description:
+      'Detailed guidance plus an interactive calculator showing exactly how much you need saved to retire at your target age.',
+    mainEntityOfPage: canonical,
+    datePublished: '2025-01-25',
+    dateModified: new Date().toISOString().split('T')[0],
+    publisher: {
+      '@type': 'Organization',
+      name: 'InvestingFIRE',
+      logo: {
+        '@type': 'ImageObject',
+        url: `${BASE_URL}apple-icon.png`,
+      },
+    },
+  };
+
+  const queryParams = new URLSearchParams();
+  if (initialValues.currentAge) queryParams.set('currentAge', initialValues.currentAge.toString());
+  queryParams.set('retirementAge', age.toString());
+  queryParams.set('monthlySpend', monthlySpend.toString());
+  if (initialValues.monthlySavings)
+    queryParams.set('monthlySavings', initialValues.monthlySavings.toString());
+  if (initialValues.startingCapital)
+    queryParams.set('startingCapital', initialValues.startingCapital.toString());
+
+  return (
+    <article className="container mx-auto max-w-4xl px-4 py-12">
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+
+      <nav className="text-muted-foreground mb-6 text-sm">
+        <Link href="/" className="hover:text-primary">
+          Home
+        </Link>
+        <span className="mx-2">/</span>
+        <Link href="/learn" className="hover:text-primary">
+          Learn
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="text-foreground">Retire at {age}</span>
+      </nav>
+
+      <header className="mb-10">
+        <h1 className="mb-4 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          How Much Do I Need to Retire at {age}?
+        </h1>
+        <p className="text-muted-foreground text-xl leading-relaxed">
+          Get an instant rule-of-thumb number, then dial in the details with the FIRE calculator loaded
+          for age {age}. Adjust savings, returns, inflation, and withdrawals to stress-test your plan.
+        </p>
+      </header>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Quick Answer</CardTitle>
+            <CardDescription>
+              Based on a {Math.round(withdrawalRate * 100)}% withdrawal rate
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-lg">
+              With a monthly spend of <strong>{currencyFormatter.format(monthlySpend)}</strong>, you need
+              roughly <strong>{currencyFormatter.format(quickNestEgg)}</strong> invested to retire at{' '}
+              {age}.
+            </p>
+            <ul className="text-muted-foreground list-disc space-y-2 pl-5">
+              <li>Uses the classic&quot;Rule of 25&quot; (annual spend ÷ {withdrawalRate * 100}%)</li>
+              <li>Assumes inflation-adjusted withdrawals and a diversified portfolio</li>
+              <li>Refine the projection below with your exact savings, age, and market assumptions</li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>At-a-Glance</CardTitle>
+          </CardHeader>
+          <CardContent className="text-muted-foreground space-y-2 text-sm">
+            <div className="flex items-center justify-between">
+              <span>Target age</span>
+              <span className="text-foreground font-semibold">{age}</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Monthly spend (today)</span>
+              <span className="text-foreground font-semibold">
+                {currencyFormatter.format(monthlySpend)}
+              </span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Withdrawal rate</span>
+              <span className="text-foreground font-semibold">{(withdrawalRate * 100).toFixed(1)}%</span>
+            </div>
+            <div className="flex items-center justify-between">
+              <span>Rule-of-25 nest egg</span>
+              <span className="text-foreground font-semibold">
+                {currencyFormatter.format(quickNestEgg)}
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <section className="mt-12 space-y-6">
+        <div className="flex items-baseline justify-between gap-3">
+          <div>
+            <h2 className="text-2xl font-bold">Spend Scenarios</h2>
+            <p className="text-muted-foreground">
+              Lean, classic, and comfortable budgets with required nest eggs.
+            </p>
+          </div>
+          <Link
+            href="/learn/safe-withdrawal-rate-4-percent-rule"
+            className="text-primary text-sm hover:underline"
+          >
+            Why the {Math.round(withdrawalRate * 100)}% rule?
+          </Link>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          {scenarios.map((scenario) => (
+            <Card key={scenario.key} className="h-full">
+              <CardHeader>
+                <CardTitle>{scenario.label}</CardTitle>
+                <CardDescription>
+                  {currencyFormatter.format(scenario.monthlySpend)} / month
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="text-muted-foreground space-y-2 text-sm">
+                <div className="flex items-center justify-between">
+                  <span>Annual spend</span>
+                  <span className="text-foreground font-semibold">
+                    {currencyFormatter.format(scenario.annualSpend)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Needed to retire</span>
+                  <span className="text-foreground font-semibold">
+                    {currencyFormatter.format(scenario.nestEgg)}
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="mt-14 space-y-6">
+        <div className="bg-primary/5 rounded-xl border p-8 text-center">
+          <h2 className="mb-4 text-3xl font-bold">Ready to Plan Your Details?</h2>
+          <p className="text-muted-foreground mx-auto mb-8 max-w-2xl text-lg">
+            This page gives you a ballpark estimate. Use our full-featured calculator to customize
+            inflation, market returns, simulation modes (Monte Carlo), and more for your specific
+            situation.
+          </p>
+          <Button size="lg" className="h-auto px-8 py-6 text-lg" asChild>
+            <Link href={`/?${queryParams.toString()}`}>Open Full Calculator for Age {age}</Link>
+          </Button>
+        </div>
+      </section>
+
+      <section className="mt-12 grid gap-6 md:grid-cols-2">
+        <Card className="col-span-full">
+          <CardHeader>
+            <CardTitle>Key Levers to Watch</CardTitle>
+            <CardDescription>Improve success odds for age {age}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ul className="text-muted-foreground list-disc space-y-2 pl-5">
+              <li>Boost savings rate in the final 5–10 years before {age}</li>
+              <li>Lower planned spending or add part-time income (Barista/Coast FIRE)</li>
+              <li>Use conservative returns (5–7%) and realistic inflation (2–3%)</li>
+              <li>Consider longer life expectancy (age {age + 30}+)</li>
+            </ul>
+          </CardContent>
+        </Card>
+      </section>
+
+      <FaqSection faqs={faqForAge(age)} className="my-12" />
+    </article>
+  );
+}
--- a/src/app/learn/retire-at/tests/page.test.ts
+++ b/src/app/learn/retire-at/tests/page.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+
+import { RETIRE_AT_AGE_PRESETS } from '@/lib/retire-at';
+import { generateStaticParams } from '../[age]/page';
+
+describe('retire-at generateStaticParams', () => {
+  it('returns all preset ages as strings with no duplicates', () => {
+    const params = generateStaticParams();
+    const ages = params.map((p) => p.age);
+
+    expect(ages).toHaveLength(RETIRE_AT_AGE_PRESETS.length);
+    expect(new Set(ages).size).toBe(ages.length);
+    expect(ages).toEqual(RETIRE_AT_AGE_PRESETS.map((age) => age.toString()));
+  });
+});
+
--- a/src/app/learn/where-to-park-your-money/page.tsx
+++ b/src/app/learn/where-to-park-your-money/page.tsx
@@ -0,0 +1,429 @@
+import Link from 'next/link';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Info } from 'lucide-react';
+import { AuthorBio } from '@/app/components/AuthorBio';
+import { FaqSection, type FaqItem } from '@/app/components/FaqSection';
+
+const faqs: FaqItem[] = [
+  {
+    question: 'Is a single world ETF enough?',
+    answer:
+      'For most long-term investors, a single, low-cost global index fund (like VT in the US or VWCE in the EU) paired with a risk-appropriate bond fund is sufficient. Add regional tilts only if you have a clear, deliberate reason.',
+  },
+  {
+    question: 'Should I choose accumulating or distributing share classes?',
+    answer:
+      'If your tax system does not tax unrealized gains and you want simplicity, accumulating share classes can reduce paperwork. In countries that tax deemed distributions or where you need cash flow, distributing classes may make sense.',
+  },
+  {
+    question: 'How often should I rebalance?',
+    answer:
+      'Set simple guardrails: rebalance when an asset class is 5–10 percentage points away from target, or on a set cadence (e.g., annually). Avoid excessive trading to minimize taxes and fees.',
+  },
+  {
+    question: 'Can I mix local pension schemes with global ETFs?',
+    answer:
+      'Yes—use tax-advantaged accounts first (IRA/401k, ISA/SIPP, RRSP/TFSA, ISK/KF, Superannuation, etc.). Align assets to account type: tax-inefficient assets (bonds/REITs) in tax shelters; tax-efficient broad equity ETFs in taxable.',
+  },
+  {
+    question: 'What if my broker doesn’t offer fractional shares?',
+    answer:
+      'Use ETFs with lower share prices, contribute in larger but less frequent batches, or pick brokers that support fractional investing. Always compare FX costs and custody protections before moving.',
+  },
+];
+
+export const metadata = {
+  title: `Where to Park Your Money for FIRE (${new Date().getFullYear().toString()})`,
+  description:
+    'Build a globally diversified, low-cost index portfolio, avoid home bias, and use the right tax wrappers—wherever you live. A practical guide for FIRE investors.',
+  openGraph: {
+    title: 'Where to Park Your Money for FIRE',
+    description: 'Global index investing playbook: avoid home bias, cut fees, optimize taxes.',
+    type: 'article',
+    url: 'https://investingfire.com/learn/where-to-park-your-money',
+  },
+};
+
+export default function ParkYourMoneyPage() {
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: 'Where to Park Your Money for FIRE',
+    author: {
+      '@type': 'Organization',
+      name: 'InvestingFIRE Team',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'InvestingFIRE',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://investingfire.com/apple-icon.png',
+      },
+    },
+    datePublished: '2025-01-24',
+    description:
+      'A global guide to placing your money for FIRE: low-cost index funds, tax wrappers, and avoiding home bias.',
+  };
+
+  return (
+    <article className="container mx-auto max-w-3xl px-4 py-12">
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+
+      <nav className="text-muted-foreground mb-6 text-sm">
+        <Link href="/" className="hover:text-primary">
+          Home
+        </Link>
+        <span className="mx-2">/</span>
+        <Link href="/learn" className="hover:text-primary">
+          Learn
+        </Link>
+        <span className="mx-2">/</span>
+        <span className="text-foreground">Where to Park Your Money</span>
+      </nav>
+
+      <header className="mb-10">
+        <h1 className="mb-6 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          Where to Park Your Money for FIRE <br />
+          <span className="text-primary">Global, Low-Cost, Tax-Savvy</span>
+        </h1>
+        <p className="text-muted-foreground text-xl leading-relaxed">
+          The right accounts and funds can shave years off your FIRE timeline. This guide shows how to
+          avoid home bias, keep costs low, and use country-specific tax wrappers without overcomplicating
+          your plan.
+        </p>
+      </header>
+
+      <div className="max-w-none">
+        <Alert className="mb-8">
+          <Info className="h-4 w-4" />
+          <AlertTitle>Key Principle</AlertTitle>
+          <AlertDescription>
+            Broad, low-cost diversification beats stock picking. Start with a simple global equity fund,
+            add a bond sleeve matched to your risk tolerance, and automate contributions.
+          </AlertDescription>
+        </Alert>
+
+        <h2>Why Placement Matters</h2>
+        <p>
+          Costs, taxes, and diversification drive long-term returns. Optimizing where you hold assets can
+          add 0.5–1.0% per year—a massive difference over decades.
+        </p>
+
+        <h2 className="mt-16" id="home-bias">
+          Avoiding Home Bias
+        </h2>
+        <p>
+          Home bias is the tendency to overweight your domestic market. This increases concentration risk
+          (currency, regulation, sector tilt). Global market-cap exposure reduces single-country
+          drawdowns and captures growth wherever it occurs.
+        </p>
+        <p className="text-muted-foreground text-sm">
+          Want a deeper dive? Read our{' '}
+          <Link href="/learn/home-bias-in-investing" className="text-primary hover:underline">
+            Home Bias Explained
+          </Link>{' '}
+          guide.
+        </p>
+
+        <h2 className="mt-16">Core Portfolio Recipe (Global First)</h2>
+        <p>Pick one diversified equity base, then pair with a hedged bond fund if you need stability.</p>
+
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-primary">Global Equity (One-Fund)</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc space-y-2 pl-4">
+                <li>US: VT (Vanguard Total World), or VTI + VXUS</li>
+                <li>EU/EEA (PRIIPs): VWCE (FTSE All-World UCITS), or IWDA + EMIM</li>
+                <li>UK: VWRA or VUAG</li>
+                <li>Canada: VEQT or XEQT (all-in-one), or VTI+VEA+VEE if allowed</li>
+                <li>Australia/NZ: DHHF, or VGS + VGE</li>
+                <li>Asia (SG/HK): IE-domiciled ACWI/FTSE All-World equivalents where available</li>
+              </ul>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-green-700">Bonds & Stability</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ul className="list-disc space-y-2 pl-4">
+                <li>US: BNDW (global aggregate) or BND/BNDX mix</li>
+                <li>
+                  EU/EEA/UK: AGGH (global agg hedged), or government bond UCITS hedged to home currency
+                </li>
+                <li>Canada: VAB (aggregate) or ZAG</li>
+                <li>Australia: VAF or GOVT; NZ: NZB hedged options if available</li>
+                <li>Cash bucket: 6–12 months in high-yield savings/term deposits for near-term needs</li>
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+
+        <h2 className="mt-16">Where to Hold (Tax Wrappers by Region)</h2>
+        <div className="mt-8 grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle>US</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                401k/403b, Traditional & Roth IRA, HSA. Avoid PFICs if abroad. Use total-market ETFs.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                IRS basics:{' '}
+                <Link
+                  href="https://www.irs.gov/retirement-plans"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  irs.gov/retirement-plans
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>UK</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                ISA for tax-free growth; SIPP for tax relief. Consider accumulating UCITS ETFs for
+                simplicity.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                HMRC ISA guidance:{' '}
+                <Link
+                  href="https://www.gov.uk/individual-savings-accounts"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  gov.uk/individual-savings-accounts
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Canada</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                RRSP (treaty relief on US ETFs), TFSA (note US withholding not fully relieved), and RESP
+                for kids.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                CRA TFSA rules:{' '}
+                <Link
+                  href="https://www.canada.ca/en/revenue-agency/services/tax/individuals/topics/tax-free-savings-account.html"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  canada.ca/.../tax-free-savings-account
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Sweden</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                ISK for simplified tax and automatic reporting; KF when holding US/IE ETFs for better
+                withholding outcomes.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                Skatteverket ISK info:{' '}
+                <Link
+                  href="https://www.skatteverket.se/privat/skatter/vardepapper/investeringssparkontoisk"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  skatteverket.se/.../isk
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>EU / EEA</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                PRIIPs means UCITS ETFs. Choose accumulating share classes if tax-efficient. Mind local
+                deemed-distribution rules.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                EU PRIIPs overview:{' '}
+                <Link
+                  href="https://finance.ec.europa.eu/consumer-finance-and-payments/retail-financial-services/key-information-documents-packaged-retail-and-insurance-based-investment-products-priips_en"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  finance.ec.europa.eu/.../priips
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Australia / NZ</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                Superannuation for tax advantage. Outside super, consider broad ASX/NZX ETFs plus global
+                UCITS/US-listed where permitted.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                ATO super basics:{' '}
+                <Link
+                  href="https://www.ato.gov.au/individuals/super/"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ato.gov.au/individuals/super
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Singapore / Hong Kong</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                Use reputable brokers with access to IE-domiciled ETFs (reduced withholding vs US). Watch
+                FX and custody fees.
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>India</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-2">
+              <p>
+                Domestic index funds (Nifty 50/500, Sensex) for core. Overseas ETFs via LRS subject to
+                limits and tax on foreign assets.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                RBI LRS details:{' '}
+                <Link
+                  href="https://rbi.org.in/scripts/FAQView.aspx?Id=115"
+                  className="text-primary hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  rbi.org.in/.../FAQView.aspx?Id=115
+                </Link>
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        <h2 className="mt-16">Broker Checklist</h2>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>Regulation and investor protection (SIPC/FSCS/IIROC/etc.)</li>
+          <li>All-in costs: commissions, FX spreads, custody, inactivity, and withdrawal fees</li>
+          <li>Fractional shares and automatic DCA support</li>
+          <li>Access to UCITS/PRIIPs-compliant funds if required</li>
+          <li>Reliable tax documents (1099, T5, annual statements) and easy export</li>
+        </ul>
+
+        <h2 className="mt-16">Execution Playbook</h2>
+        <ol className="list-decimal space-y-2 pl-5">
+          <li>Define your target mix (e.g., 90/10 or 70/30) and write a one-page IPS.</li>
+          <li>Automate monthly contributions; avoid market timing.</li>
+          <li>Rebalance annually or when allocations drift 5–10 points.</li>
+          <li>Keep 6–12 months of expenses in cash to manage withdrawal risk.</li>
+          <li>Review tax changes yearly; wrappers and treaty benefits can shift.</li>
+        </ol>
+
+        <h2 className="mt-16">Further Reading & Evidence</h2>
+        <ul className="mb-6 list-disc space-y-2 pl-5">
+          <li>
+            Vanguard Research,&quot;Global equity investing: The benefits of diversification&quot; —{' '}
+            <Link
+              href="https://corporate.vanguard.com/content/dam/corp/research/pdf/global-equity-investing-benefits-diversification.pdf"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Vanguard
+            </Link>
+          </li>
+          <li>
+            MSCI,&quot;The Home Bias Effect in Global Portfolios&quot; —{' '}
+            <Link
+              href="https://www.msci.com/research-and-insights/quick-take/did-home-bias-help"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              MSCI
+            </Link>
+          </li>
+          <li>
+            SPIVA scorecards (active vs passive) —{' '}
+            <Link
+              href="https://www.spglobal.com/spdji/en/research-insights/spiva/"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              S&P Dow Jones Indices
+            </Link>
+          </li>
+          <li>
+            Bogleheads&quot;Three-Fund Portfolio&quot; —{' '}
+            <Link
+              href="https://www.bogleheads.org/wiki/Three-fund_portfolio"
+              className="text-primary hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Bogleheads Wiki
+            </Link>
+          </li>
+        </ul>
+
+        <div className="my-10 grid gap-4 sm:grid-cols-2">
+          <Link href="/">
+            <Button size="lg" className="w-full text-lg">
+              Run the FIRE Calculator →
+            </Button>
+          </Link>
+          <Link href="/learn/safe-withdrawal-rate-4-percent-rule">
+            <Button size="lg" variant="secondary" className="w-full text-lg">
+              Learn Safe Withdrawals →
+            </Button>
+          </Link>
+        </div>
+
+        <FaqSection faqs={faqs} className="my-12" />
+
+        <AuthorBio />
+      </div>
+    </article>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { Suspense } from 'react';
 import FireCalculatorForm from './components/FireCalculatorForm';
 import BackgroundPattern from './components/BackgroundPattern';
 import { FaqSection, type FaqItem } from './components/FaqSection';
@@ -64,7 +65,9 @@ export default function HomePage() {
          how FIRE works.
        </p>
        <div className="mt-8 w-full max-w-2xl">
-          <FireCalculatorForm />
+          <Suspense fallback={<div>Loading calculator...</div>}>
+            <FireCalculatorForm />
+          </Suspense>
        </div>
      </div>

@@ -106,7 +109,7 @@ export default function HomePage() {
            How This FIRE Calculator Provides Investing Insights
          </h2>
          <p className="mb-4 text-lg leading-relaxed">
-            Our interactive tool goes beyond a simple “25x annual spending” rule. It runs a{' '}
+            Our interactive tool goes beyond a simple&quot;25x annual spending&quot; rule. It runs a{' '}
            <strong>year-by-year simulation</strong> of your portfolio, combining:
          </p>
          <ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
@@ -277,7 +280,7 @@ export default function HomePage() {
                  >
                    Coast FIRE Calculator
                  </a>{' '}
-                  - When you “max out” early contributions but let compounding do the rest.
+                  - When you&quot;max out&quot; early contributions but let compounding do the rest.
                </li>
                <li>
                  <a
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -1,13 +1,7 @@
-import { BASE_URL } from '@/lib/constants';
 import { type MetadataRoute } from 'next';

-export default function sitemap(): MetadataRoute.Sitemap {
-  return [
-    {
-      url: BASE_URL,
-      lastModified: new Date(),
-      changeFrequency: 'yearly',
-      priority: 1,
-    },
-  ];
+import { buildSitemapEntries } from '@/lib/sitemap';
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  return buildSitemapEntries();
 }
--- a/src/components/ui/tests/tooltip.test.tsx
+++ b/src/components/ui/tests/tooltip.test.tsx
@@ -0,0 +1,110 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+
+const setupMatchMedia = (matches: boolean) => {
+  const listeners = new Set<EventListenerOrEventListenerObject>();
+
+  const mockMatchMedia = (query: string): MediaQueryList => ({
+    matches,
+    media: query,
+    onchange: null,
+    addEventListener: (type: string, listener: EventListenerOrEventListenerObject) => {
+      if (type === 'change') {
+        listeners.add(listener);
+      }
+    },
+    removeEventListener: (type: string, listener: EventListenerOrEventListenerObject) => {
+      if (type === 'change') {
+        listeners.delete(listener);
+      }
+    },
+    addListener: () => {
+      /* deprecated */
+    },
+    removeListener: () => {
+      /* deprecated */
+    },
+    dispatchEvent: (event: Event) => {
+      listeners.forEach((listener) => {
+        if (typeof listener === 'function') {
+          listener(event);
+        } else {
+          listener.handleEvent(event);
+        }
+      });
+      return true;
+    },
+  });
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(mockMatchMedia),
+  });
+};
+
+describe('Tooltip hybrid behaviour', () => {
+  beforeEach(() => {
+    class ResizeObserverMock {
+      observe() {
+        /* noop */
+      }
+      unobserve() {
+        /* noop */
+      }
+      disconnect() {
+        /* noop */
+      }
+    }
+
+    Object.defineProperty(window, 'ResizeObserver', {
+      writable: true,
+      value: ResizeObserverMock,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('falls back to popover interaction on touch devices', async () => {
+    setupMatchMedia(true);
+
+    render(
+      <Tooltip>
+        <TooltipTrigger>Trigger</TooltipTrigger>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Trigger' });
+    expect(trigger).toHaveAttribute('data-touch', 'true');
+
+    const user = userEvent.setup();
+    await user.click(trigger);
+
+    expect(
+      await screen.findByText('Tooltip text', { selector: '[data-slot="tooltip-content"]' }),
+    ).toBeVisible();
+  });
+
+  it('keeps tooltip interaction on non-touch devices', async () => {
+    setupMatchMedia(false);
+
+    render(
+      <Tooltip defaultOpen>
+        <TooltipTrigger>Trigger</TooltipTrigger>
+        <TooltipContent>Tooltip text</TooltipContent>
+      </Tooltip>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Trigger' });
+    expect(trigger).toHaveAttribute('data-touch', 'false');
+
+    expect(
+      await screen.findByText('Tooltip text', { selector: '[data-slot="tooltip-content"]' }),
+    ).toBeVisible();
+  });
+});
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({ ...props }: Readonly<React.ComponentProps<typeof PopoverPrimitive.Root>>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,10 +1,55 @@
 'use client';

 import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';

 import { cn } from '@/lib/utils';

+type TooltipProps = Readonly<
+  React.ComponentProps<typeof TooltipPrimitive.Root> & React.ComponentProps<typeof PopoverPrimitive.Root>
+>;
+
+type TooltipTriggerProps = Readonly<
+  React.ComponentProps<typeof TooltipPrimitive.Trigger> &
+    React.ComponentProps<typeof PopoverPrimitive.Trigger>
+>;
+
+type TooltipContentProps = Readonly<
+  React.ComponentProps<typeof TooltipPrimitive.Content> &
+    React.ComponentProps<typeof PopoverPrimitive.Content>
+>;
+
+const TooltipTouchContext = React.createContext<boolean>(false);
+
+function useIsTouchDevice() {
+  const [isTouch, setIsTouch] = React.useState<boolean>(() => {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+    return window.matchMedia('(pointer: coarse)').matches;
+  });
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    const mediaQuery = window.matchMedia('(pointer: coarse)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsTouch(event.matches);
+    };
+
+    setIsTouch(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return isTouch;
+}
+
 function TooltipProvider({
  delayDuration = 0,
  ...props
@@ -14,28 +59,63 @@ function TooltipProvider({
  );
 }

-function Tooltip({ ...props }: Readonly<React.ComponentProps<typeof TooltipPrimitive.Root>>) {
+function Tooltip({ children, ...props }: TooltipProps) {
+  const isTouch = useIsTouchDevice();
+
  return (
    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+      <TooltipTouchContext.Provider value={isTouch}>
+        {isTouch ? (
+          <PopoverPrimitive.Root data-slot="tooltip" data-touch="true" {...props}>
+            {children}
+          </PopoverPrimitive.Root>
+        ) : (
+          <TooltipPrimitive.Root data-slot="tooltip" data-touch="false" {...props}>
+            {children}
+          </TooltipPrimitive.Root>
+        )}
+      </TooltipTouchContext.Provider>
    </TooltipProvider>
  );
 }

-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+function TooltipTrigger({ ...props }: TooltipTriggerProps) {
+  const isTouch = React.useContext(TooltipTouchContext);
+
+  return isTouch ? (
+    <PopoverPrimitive.Trigger data-slot="tooltip-trigger" data-touch="true" {...props} />
+  ) : (
+    <TooltipPrimitive.Trigger data-slot="tooltip-trigger" data-touch="false" {...props} />
+  );
 }

-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+function TooltipContent({ className, sideOffset = 0, children, ...props }: TooltipContentProps) {
+  const isTouch = React.useContext(TooltipTouchContext);
+
+  if (isTouch) {
+    return (
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          data-slot="tooltip-content"
+          data-touch="true"
+          sideOffset={sideOffset}
+          className={cn(
+            'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-popover-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance shadow-md outline-hidden',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    );
+  }
+
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
+        data-touch="false"
        sideOffset={sideOffset}
        className={cn(
          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
--- a/src/lib/tests/retire-at.test.ts
+++ b/src/lib/tests/retire-at.test.ts
@@ -0,0 +1,129 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  RETIRE_AT_AGE_PRESETS,
+  buildSpendScenarios,
+  calculateNestEggFromSpend,
+  deriveDefaultInputs,
+  extractCalculatorValuesFromSearch,
+  parseAgeParam,
+} from '../retire-at';
+
+describe('retire-at helpers', () => {
+  it('calculates a rule-of-25 style nest egg', () => {
+    const result = calculateNestEggFromSpend(4000, 0.04);
+    expect(result).toBe(1200000);
+  });
+
+  it('builds lean/base/comfortable spend scenarios', () => {
+    const scenarios = buildSpendScenarios(4000, 0.04);
+    expect(scenarios).toHaveLength(3);
+
+    const baseline = scenarios.find((scenario) => scenario.key === 'baseline');
+    expect(baseline?.monthlySpend).toBe(4000);
+    expect(baseline?.nestEgg).toBe(1200000);
+  });
+
+  it('parses and clamps age params', () => {
+    expect(parseAgeParam('90')).toBe(80);
+    expect(parseAgeParam('42')).toBe(42);
+    expect(parseAgeParam('not-a-number', 55)).toBe(55);
+  });
+
+  it('derives calculator defaults for a target age', () => {
+    const defaults = deriveDefaultInputs(50);
+    expect(defaults.retirementAge).toBe(50);
+    expect(defaults.currentAge).toBeLessThan(50);
+    expect(defaults.desiredMonthlyAllowance).toBeGreaterThanOrEqual(500);
+  });
+
+  it('exposes preset age list for sitemap/static params', () => {
+    expect(RETIRE_AT_AGE_PRESETS).toContain(50);
+    expect(Array.isArray(RETIRE_AT_AGE_PRESETS)).toBe(true);
+  });
+
+  describe('extractCalculatorValuesFromSearch', () => {
+    it('parses valid numeric params', () => {
+      const searchParams = {
+        currentAge: '30',
+        retirementAge: '55',
+        monthlySpend: '4000',
+        monthlySavings: '1500',
+        startingCapital: '100000',
+      };
+      const values = extractCalculatorValuesFromSearch(searchParams, 55);
+
+      expect(values.currentAge).toBe(30);
+      expect(values.retirementAge).toBe(55);
+      expect(values.desiredMonthlyAllowance).toBe(4000);
+      expect(values.monthlySavings).toBe(1500);
+      expect(values.startingCapital).toBe(100000);
+    });
+
+    it('handles invalid numbers by falling back to defaults', () => {
+      const searchParams = {
+        currentAge: 'not-a-number',
+        monthlySpend: 'invalid',
+      };
+      // targetAge 55 implies some defaults
+      const values = extractCalculatorValuesFromSearch(searchParams, 55);
+
+      // currentAge should default based on logic in deriveDefaultInputs
+      // for 55, defaultCurrentAge is around 40
+      expect(values.currentAge).toBeGreaterThan(18);
+      // desiredMonthlyAllowance has a default logic too
+      expect(values.desiredMonthlyAllowance).toBeDefined();
+    });
+
+    it('clamps values to safe bounds and business logic', () => {
+      const searchParams = {
+        currentAge: '150', // max 100, but further constrained by retirement age
+        monthlySpend: '-500', // min 0
+      };
+      const values = extractCalculatorValuesFromSearch(searchParams, 60);
+
+      // Clamped to retirementAge (60) - 1 = 59 by deriveDefaultInputs
+      expect(values.currentAge).toBe(59);
+      // Clamped to min 500 by deriveDefaultInputs
+      expect(values.desiredMonthlyAllowance).toBe(500);
+    });
+
+    it('supports array params (takes first)', () => {
+      const searchParams = {
+        currentAge: ['30', '40'],
+      };
+      const values = extractCalculatorValuesFromSearch(searchParams, 60);
+      expect(values.currentAge).toBe(30);
+    });
+
+    it('parses simulation mode', () => {
+      expect(
+        extractCalculatorValuesFromSearch({ simulationMode: 'monte-carlo' }, 55).simulationMode,
+      ).toBe('monte-carlo');
+
+      expect(
+        extractCalculatorValuesFromSearch({ simulationMode: 'deterministic' }, 55).simulationMode,
+      ).toBe('deterministic');
+
+      expect(
+        extractCalculatorValuesFromSearch({ simulationMode: 'invalid-mode' }, 55).simulationMode,
+      ).toBeUndefined();
+    });
+    it('parses extra fields (volatility, withdrawal, barista)', () => {
+      const searchParams = {
+        volatility: '20',
+        withdrawalStrategy: 'percentage',
+        withdrawalPercentage: '3.5',
+        coastFireAge: '45',
+        baristaIncome: '1000',
+      };
+      const values = extractCalculatorValuesFromSearch(searchParams, 55);
+
+      expect(values.volatility).toBe(20);
+      expect(values.withdrawalStrategy).toBe('percentage');
+      expect(values.withdrawalPercentage).toBe(3.5);
+      expect(values.coastFireAge).toBe(45);
+      expect(values.baristaIncome).toBe(1000);
+    });
+  });
+});
--- a/src/lib/tests/sitemap.test.ts
+++ b/src/lib/tests/sitemap.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import { buildSitemapEntries } from '../sitemap';
+
+describe('buildSitemapEntries', () => {
+  it('includes known static routes', async () => {
+    const sitemap = await buildSitemapEntries();
+    const urls = sitemap.map((entry) => entry.url);
+
+    expect(urls).toContain('https://investingfire.com/');
+    expect(urls).toContain('https://investingfire.com/learn');
+    expect(urls).toContain('https://investingfire.com/learn/what-is-fire');
+    expect(sitemap.every((entry) => entry.lastModified instanceof Date)).toBe(true);
+  });
+
+  it('omits metadata routes from the sitemap output', async () => {
+    const sitemap = await buildSitemapEntries();
+    const urls = sitemap.map((entry) => entry.url);
+
+    expect(urls.some((url) => url.includes('sitemap'))).toBe(false);
+    expect(urls.some((url) => url.includes('robots'))).toBe(false);
+  });
+});
--- a/src/lib/calculator-schema.ts
+++ b/src/lib/calculator-schema.ts
@@ -0,0 +1,50 @@
+import * as z from 'zod';
+
+export const fireCalculatorFormSchema = z.object({
+  startingCapital: z.coerce.number(),
+  monthlySavings: z.coerce.number().min(0, 'Monthly savings must be a non-negative number'),
+  currentAge: z.coerce
+    .number()
+    .min(1, 'Age must be at least 1')
+    .max(100, 'No point in starting this late'),
+  cagr: z.coerce.number().min(0, 'Growth rate must be a non-negative number'),
+  desiredMonthlyAllowance: z.coerce.number().min(0, 'Monthly allowance must be a non-negative number'),
+  inflationRate: z.coerce.number().min(0, 'Inflation rate must be a non-negative number'),
+  lifeExpectancy: z.coerce
+    .number()
+    .min(40, 'Be a bit more optimistic buddy :(')
+    .max(100, 'You should be more realistic...'),
+  retirementAge: z.coerce
+    .number()
+    .min(20, 'Retirement age must be at least 20')
+    .max(100, 'Retirement age must be at most 100'),
+  coastFireAge: z.coerce
+    .number()
+    .min(20, 'Coast FIRE age must be at least 20')
+    .max(100, 'Coast FIRE age must be at most 100')
+    .optional(),
+  baristaIncome: z.coerce.number().min(0, 'Barista income must be a non-negative number').optional(),
+  simulationMode: z.enum(['deterministic', 'monte-carlo']).default('monte-carlo'),
+  volatility: z.coerce.number().min(0).default(15),
+  withdrawalStrategy: z.enum(['fixed', 'percentage']).default('fixed'),
+  withdrawalPercentage: z.coerce.number().min(0).max(100).default(4),
+});
+
+export type FireCalculatorFormValues = z.infer<typeof fireCalculatorFormSchema>;
+
+export const fireCalculatorDefaultValues: FireCalculatorFormValues = {
+  startingCapital: 50000,
+  monthlySavings: 1500,
+  currentAge: 25,
+  cagr: 7,
+  desiredMonthlyAllowance: 3000,
+  inflationRate: 2.3,
+  lifeExpectancy: 84,
+  retirementAge: 65,
+  coastFireAge: undefined,
+  baristaIncome: 0,
+  simulationMode: 'monte-carlo',
+  volatility: 15,
+  withdrawalStrategy: 'fixed',
+  withdrawalPercentage: 4,
+};
--- a/src/lib/retire-at.ts
+++ b/src/lib/retire-at.ts
@@ -0,0 +1,206 @@
+import type { FireCalculatorFormValues } from '@/lib/calculator-schema';
+
+type NumericParam = string | number | null | undefined;
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+export const numericFromParam = (value: NumericParam) => {
+  if (value === null || value === undefined) return undefined;
+  const parsed = typeof value === 'string' ? Number(value) : value;
+  if (!Number.isFinite(parsed)) return undefined;
+  return parsed;
+};
+
+export const RETIRE_AT_AGE_PRESETS = [35, 40, 45, 50, 55, 60, 65, 70] as const;
+
+export interface SpendScenario {
+  key: 'lean' | 'baseline' | 'comfortable';
+  label: string;
+  monthlySpend: number;
+  annualSpend: number;
+  nestEgg: number;
+  withdrawalRate: number;
+}
+
+export const parseAgeParam = (ageParam: NumericParam, fallback = 50) => {
+  const parsed = numericFromParam(ageParam);
+  if (parsed === undefined) return fallback;
+  return clamp(Math.round(parsed), 30, 80);
+};
+
+export const calculateNestEggFromSpend = (monthlySpend: number, withdrawalRate = 0.04) => {
+  const safeRate = withdrawalRate > 0 ? withdrawalRate : 0.0001;
+  const normalizedSpend = Math.max(0, monthlySpend);
+  return (normalizedSpend * 12) / safeRate;
+};
+
+export const buildSpendScenarios = (
+  baseMonthlySpend: number,
+  withdrawalRate = 0.04,
+): SpendScenario[] => {
+  const normalizedSpend = Math.max(500, baseMonthlySpend);
+  const levels: { key: SpendScenario['key']; label: string; multiplier: number }[] = [
+    { key: 'lean', label: 'Lean FIRE', multiplier: 0.8 },
+    { key: 'baseline', label: 'Classic FIRE', multiplier: 1 },
+    { key: 'comfortable', label: 'Fat FIRE', multiplier: 1.25 },
+  ];
+
+  return levels.map(({ key, label, multiplier }) => {
+    const monthlySpend = Math.round(normalizedSpend * multiplier);
+    const annualSpend = monthlySpend * 12;
+    return {
+      key,
+      label,
+      monthlySpend,
+      annualSpend,
+      withdrawalRate,
+      nestEgg: calculateNestEggFromSpend(monthlySpend, withdrawalRate),
+    };
+  });
+};
+
+export const deriveDefaultInputs = (
+  targetAge: number,
+  opts?: {
+    currentAge?: number;
+    desiredMonthlyAllowance?: number;
+    monthlySavings?: number;
+    startingCapital?: number;
+  },
+): Partial<FireCalculatorFormValues> => {
+  const retirementAge = clamp(Math.round(targetAge), 30, 80);
+
+  // Smarter defaults based on retirement age goal
+  // Early FIRE (30-45): Likely started early, high savings, maybe less capital if very young.
+  // Standard FIRE (45-55): Peak earning years, building capital.
+  // Late FIRE (55+): Closer to traditional age, probably higher capital.
+
+  // Default current age:
+  // If target < 40: assume user is 22-25 (just starting or early career)
+  // If target 40-50: assume user is 30
+  // If target 50+: assume user is 35-40
+  // But generally 10-15 years out is a good "planning" gap for the calculator default.
+  // The user asked for "good assumptions" for a "generic" number.
+  // Let's stick to a gap, but maybe vary savings/capital.
+
+  let defaultCurrentAge = retirementAge - 15;
+  if (retirementAge < 40) defaultCurrentAge = 22; // Very aggressive
+  if (defaultCurrentAge < 20) defaultCurrentAge = 20;
+
+  const currentAge = clamp(
+    Math.round(opts?.currentAge ?? defaultCurrentAge),
+    18,
+    Math.max(18, retirementAge - 1),
+  );
+
+  // Assumptions for "ballpark" numbers:
+  // Savings: increases with age usually.
+  // Capital: increases with age.
+
+  let defaultMonthlySavings = 1000;
+  let defaultStartingCapital = 20000;
+
+  if (currentAge >= 30) {
+    defaultMonthlySavings = 1500;
+    defaultStartingCapital = 50000;
+  }
+  if (currentAge >= 40) {
+    defaultMonthlySavings = 2000;
+    defaultStartingCapital = 100000;
+  }
+  if (currentAge >= 50) {
+    defaultMonthlySavings = 2500;
+    defaultStartingCapital = 250000;
+  }
+
+  // If aggressive early retirement is the goal (short timeline), they probably save more?
+  // Or maybe we just show what it TAKES.
+  // The calculator solves forward from inputs.
+  // We should provide realistic inputs for someone *trying* to retire at `targetAge`.
+
+  const monthlySavings = clamp(Math.round(opts?.monthlySavings ?? defaultMonthlySavings), 0, 50000);
+  const startingCapital = clamp(
+    Math.round(opts?.startingCapital ?? defaultStartingCapital),
+    0,
+    100000000,
+  );
+
+  const desiredMonthlyAllowance = clamp(
+    Math.round(opts?.desiredMonthlyAllowance ?? (retirementAge < 50 ? 4000 : 5000)),
+    500,
+    20000,
+  );
+
+  const lifeExpectancy = clamp(Math.round(retirementAge + 30), retirementAge + 10, 110);
+
+  return {
+    currentAge,
+    retirementAge,
+    desiredMonthlyAllowance,
+    monthlySavings,
+    startingCapital,
+    lifeExpectancy,
+  };
+};
+
+export const extractNumericSearchParam = (
+  value: string | string[] | undefined,
+  bounds?: { min?: number; max?: number },
+) => {
+  const normalized = Array.isArray(value) ? value[0] : value;
+  const parsed = numericFromParam(normalized);
+  if (parsed === undefined) return undefined;
+  if (bounds && (bounds.min !== undefined || bounds.max !== undefined)) {
+    const min = bounds.min ?? Number.MIN_SAFE_INTEGER;
+    const max = bounds.max ?? Number.MAX_SAFE_INTEGER;
+    return clamp(parsed, min, max);
+  }
+  return parsed;
+};
+
+export const extractCalculatorValuesFromSearch = (
+  searchParams: Record<string, string | string[] | undefined>,
+  targetAge: number,
+): Partial<FireCalculatorFormValues> => {
+  const desiredMonthlyAllowance =
+    extractNumericSearchParam(searchParams.monthlySpend ?? searchParams.monthlyAllowance, {
+      min: 0,
+      max: 20000,
+    }) ?? undefined;
+
+  const base = deriveDefaultInputs(targetAge, {
+    currentAge: extractNumericSearchParam(searchParams.currentAge, { min: 1, max: 100 }),
+    desiredMonthlyAllowance,
+    monthlySavings: extractNumericSearchParam(searchParams.monthlySavings, { min: 0, max: 50000 }),
+    startingCapital: extractNumericSearchParam(searchParams.startingCapital, { min: 0 }),
+  });
+
+  return {
+    ...base,
+    retirementAge:
+      extractNumericSearchParam(searchParams.retirementAge, { min: 18, max: 100 }) ?? base.retirementAge,
+    cagr: extractNumericSearchParam(searchParams.cagr ?? searchParams.growthRate, {
+      min: 0,
+      max: 30,
+    }),
+    inflationRate: extractNumericSearchParam(searchParams.inflationRate, { min: 0, max: 20 }),
+    lifeExpectancy:
+      extractNumericSearchParam(searchParams.lifeExpectancy, { min: 40, max: 110 }) ??
+      base.lifeExpectancy,
+    simulationMode:
+      searchParams.simulationMode === 'monte-carlo' || searchParams.simulationMode === 'deterministic'
+        ? searchParams.simulationMode
+        : undefined,
+    withdrawalStrategy:
+      searchParams.withdrawalStrategy === 'percentage' || searchParams.withdrawalStrategy === 'fixed'
+        ? searchParams.withdrawalStrategy
+        : undefined,
+    withdrawalPercentage: extractNumericSearchParam(searchParams.withdrawalPercentage, {
+      min: 0,
+      max: 100,
+    }),
+    volatility: extractNumericSearchParam(searchParams.volatility, { min: 0 }),
+    coastFireAge: extractNumericSearchParam(searchParams.coastFireAge, { min: 18, max: 100 }),
+    baristaIncome: extractNumericSearchParam(searchParams.baristaIncome, { min: 0 }),
+  };
+};
--- a/src/lib/sitemap.ts
+++ b/src/lib/sitemap.ts
@@ -0,0 +1,75 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { type MetadataRoute } from 'next';
+
+import { BASE_URL } from '@/lib/constants';
+
+interface PageRoute {
+  pathname: string;
+  lastModified: Date;
+}
+
+const PAGE_FILE_PATTERN = /^page\.(mdx|tsx?|jsx?)$/;
+const EXCLUDED_DIRECTORIES = new Set(['components', '__tests__', 'api']);
+const APP_DIR = path.join(process.cwd(), 'src', 'app');
+
+const isRouteGroup = (name: string) => name.startsWith('(') && name.endsWith(')');
+const shouldSkipDirectory = (name: string) =>
+  EXCLUDED_DIRECTORIES.has(name) || name.startsWith('_') || name.startsWith('.') || name.includes('[');
+
+async function discoverPages(currentDir: string, segments: string[] = []): Promise<PageRoute[]> {
+  const entries = await fs.readdir(currentDir, { withFileTypes: true });
+  const pages: PageRoute[] = [];
+
+  for (const entry of entries) {
+    const entryPath = path.join(currentDir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (shouldSkipDirectory(entry.name)) {
+        continue;
+      }
+
+      const nextSegments = isRouteGroup(entry.name) ? segments : [...segments, entry.name];
+      const childPages = await discoverPages(entryPath, nextSegments);
+      pages.push(...childPages);
+      continue;
+    }
+
+    if (entry.isFile() && PAGE_FILE_PATTERN.test(entry.name)) {
+      const pathname = segments.length === 0 ? '/' : `/${segments.join('/')}`;
+      const stats = await fs.stat(entryPath);
+
+      pages.push({ pathname, lastModified: stats.mtime });
+    }
+  }
+
+  return pages;
+}
+
+function toAbsoluteUrl(pathname: string): string {
+  const normalized = pathname === '/' ? '' : pathname;
+  return new URL(normalized, BASE_URL).toString();
+}
+
+export async function buildSitemapEntries(): Promise<MetadataRoute.Sitemap> {
+  const pages = await discoverPages(APP_DIR);
+
+  const uniquePages = new Map<string, PageRoute>();
+  for (const page of pages) {
+    const existing = uniquePages.get(page.pathname);
+    if (!existing || existing.lastModified < page.lastModified) {
+      uniquePages.set(page.pathname, page);
+    }
+  }
+
+  const sortedPages = Array.from(uniquePages.values()).sort((a, b) =>
+    a.pathname.localeCompare(b.pathname),
+  );
+
+  return sortedPages.map(({ pathname, lastModified }) => ({
+    url: toAbsoluteUrl(pathname),
+    lastModified,
+    changeFrequency: 'weekly',
+    priority: pathname === '/' ? 1 : 0.8,
+  }));
+}
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -1,2 +1,21 @@
-import "@testing-library/jest-dom";
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';

+// Provide a basic matchMedia mock for jsdom so components using media queries
+// (e.g. pointer detection in Tooltip) do not throw during tests.
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+if (!window.matchMedia) {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // deprecated but still used in some libs
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+}
Author	SHA1	Message	Date
Renovate Bot	a7a2fe39ca	chore(deps): pin dependencies Some checks failed Lint / Lint and Typecheck (pull_request) Successful in 37s Details Lint / Lint and Typecheck (push) Has been cancelled Details	2025-12-07 01:45:50 +01:00
Felix Schulze	3dc79aa425	fix MC test All checks were successful Lint / Lint and Typecheck (push) Successful in 41s Details	2025-12-07 01:43:26 +01:00
Felix Schulze	35bc31fb3d	tootip and graph style fixes Some checks failed Lint / Lint and Typecheck (push) Failing after 45s Details	2025-12-06 22:58:10 +01:00
Felix Schulze	4aa961fc1c	monte-carlo improvements	2025-12-06 21:42:00 +01:00
Felix Schulze	7fcb2c9a0f	minor fix	2025-12-06 20:58:42 +01:00
Felix Schulze	6a13860a80	Improves input test reliability and restores setup mocks Switches input change test to use async wait for reliable value assertion. Restores and enhances test setup with matchMedia mock to support media query-dependent components in jsdom.	2025-12-06 20:46:01 +01:00
Felix Schulze	0a5d691d04	fix tooltips	2025-12-06 20:45:54 +01:00
Felix Schulze	9ec1a4ab79	run unit tests as part of lint job	2025-12-06 20:34:33 +01:00
Felix Schulze	b2c07ba8a3	shadcn popover	2025-12-06 20:27:08 +01:00
Felix Schulze	0030f91bb2	Removes 4% rule overlays and adds URL hydration to form Eliminates all 4%-rule related overlays, buttons, and UI elements from the calculator for a simpler experience. Introduces hydration of calculator inputs from URL search params, enabling sharing of form state via URLs and restoring state on page reload. Updates the form's share button styling and ensures all necessary URL parameters are set for sharing. Also refactors tests to remove 4%-rule tests and adds mocks for next/navigation. Simplifies calculator behavior and improves accessibility for stateful URLs.	2025-12-06 20:25:04 +01:00
Felix Schulze	2b0df3d100	quotes	2025-12-06 20:04:08 +01:00
Felix Schulze	15a32dc467	sharable calc, retire at pages	2025-12-06 20:04:08 +01:00
Renovate Bot	bfac54a194	chore(deps): update dependency @playwright/test to ^1.57.0 All checks were successful renovate/stability-days Updates have met minimum release age requirement Details Lint / Lint and Typecheck (push) Successful in 38s Details	2025-12-06 18:01:26 +00:00
Renovate Bot	9d9c8b0d37	chore(deps): update dependency zod to v4.1.13 All checks were successful renovate/stability-days Updates have met minimum release age requirement Details Lint / Lint and Typecheck (push) Successful in 37s Details	2025-12-06 17:01:10 +00:00
Felix Schulze	dc74f507c3	automatic sitemap All checks were successful Lint / Lint and Typecheck (push) Successful in 35s Details	2025-12-06 16:24:46 +01:00
Felix Schulze	80f0de3b57	Adds global portfolio and home bias educational articles All checks were successful Lint / Lint and Typecheck (push) Successful in 38s Details Introduces two in-depth learning articles: one guiding users on global, low-cost portfolio construction and tax-optimized account selection; another explaining home bias risks and practical diversification steps. Updates the learning hub to highlight both articles for improved user education on investment risk and allocation.	2025-12-06 16:16:07 +01:00
Felix Schulze	9d66598c7e	worktree config	2025-12-06 16:01:18 +01:00