From f67b138d956e03511453c1a8b2d96a3699301139 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sun, 17 Aug 2025 17:25:04 +0100
Subject: [PATCH] refactor: replace Wizard with CoopBuilder in navigation,
 enhance budget store structure, and streamline template components for
 improved user experience

---
 app.vue                                       |  90 +-
 assets/css/main.css                           | 362 ++++---
 components/BudgetCategorySelector.vue         |  67 ++
 components/CoopBuilderSubnav.vue              |  56 ++
 components/ExportOptions.vue                  |  10 +-
 components/WizardRevenueStep.vue              | 247 ++---
 components/WizardReviewStep.vue               |  46 +-
 components/WizardSubnav.vue                   |  57 +-
 composables/useFixtures.ts                    |  10 +-
 composables/useOfferSuggestor.ts              | 256 +++++
 data/offerTemplates.ts                        | 178 ++++
 data/skillsProblems.ts                        | 157 ++++
 pages/budget.vue                              | 652 ++++++-------
 pages/coach/skills-to-offers.vue              | 684 ++++++++++++++
 pages/coop-builder.vue                        | 468 ++++++++++
 pages/coop-planner.vue                        |   6 +-
 pages/scenarios.vue                           |   4 +-
 .../conflict-resolution-framework.vue         | 565 ++++++-----
 pages/templates/decision-framework.vue        | 883 ++++++++++--------
 pages/templates/index.vue                     |  92 +-
 pages/templates/membership-agreement.vue      | 332 +++----
 pages/templates/tech-charter.vue              | 434 ++++-----
 pages/wizard.vue                              | 372 --------
 pages/wizards.vue                             | 100 +-
 sample/skillsToOffersSamples.ts               |  40 +
 stores/budget.ts                              | 542 ++++++++++-
 stores/{wizard.ts => coop-builder.ts}         |   4 +-
 stores/plan.ts                                |  22 +
 stores/streams.ts                             |  27 +
 tailwind.config.ts                            |  15 +-
 tests/coach-integration.spec.ts               | 431 +++++++++
 types/coaching.ts                             |  29 +
 utils/offerToStream.ts                        | 183 ++++
 33 files changed, 4970 insertions(+), 2451 deletions(-)
 create mode 100644 components/BudgetCategorySelector.vue
 create mode 100644 components/CoopBuilderSubnav.vue
 create mode 100644 composables/useOfferSuggestor.ts
 create mode 100644 data/offerTemplates.ts
 create mode 100644 data/skillsProblems.ts
 create mode 100644 pages/coach/skills-to-offers.vue
 create mode 100644 pages/coop-builder.vue
 delete mode 100644 pages/wizard.vue
 create mode 100644 sample/skillsToOffersSamples.ts
 rename stores/{wizard.ts => coop-builder.ts} (86%)
 create mode 100644 stores/plan.ts
 create mode 100644 tests/coach-integration.spec.ts
 create mode 100644 types/coaching.ts
 create mode 100644 utils/offerToStream.ts

diff --git a/app.vue b/app.vue
index e4394a3..6aade1c 100644
--- a/app.vue
+++ b/app.vue
@@ -9,12 +9,11 @@
               <div class="relative flex items-center justify-center">
                 <NuxtLink
                   to="/"
-                  class="flex items-center gap-2 hover:opacity-80 transition-opacity">
-                  <UIcon
-                    name="i-heroicons-rocket-launch"
-                    class="text-primary-500" />
+                  class="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                >
                   <h1
-                    class="font-semibold text-black dark:text-white text-center">
+                    class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold"
+                  >
                     Urgent Tools
                   </h1>
                 </NuxtLink>
@@ -25,49 +24,41 @@
               <nav
                 class="mt-4 flex items-center justify-center gap-1"
                 role="navigation"
-                aria-label="Main navigation">
+                aria-label="Main navigation"
+              >
                 <NuxtLink
                   to="/coop-planner"
                   class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                   :class="{
-                    'bg-neutral-100 dark:bg-neutral-800': isCoopSection,
-                  }">
-                  Co-Op in 6 Months
+                    'bg-neutral-100 dark:bg-neutral-800': isCoopBuilderSection,
+                  }"
+                >
+                  Co-Op Builder
                 </NuxtLink>
+                <!-- Coach feature - hidden for now -->
+                <!-- <NuxtLink
+                  to="/coach/skills-to-offers"
+                  class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
+                  :class="{
+                    'bg-neutral-100 dark:bg-neutral-800': $route.path.startsWith('/coach'),
+                  }"
+                >
+                  Coach
+                </NuxtLink> -->
                 <NuxtLink
                   to="/wizards"
                   class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                   :class="{
-                    'bg-neutral-100 dark:bg-neutral-800':
-                      $route.path === '/wizards',
-                  }">
+                    'bg-neutral-100 dark:bg-neutral-800': $route.path === '/wizards',
+                  }"
+                >
                   Wizards
                 </NuxtLink>
-                <UButton
-                  color="gray"
-                  variant="ghost"
-                  disabled
-                  class="px-3 py-2 text-sm text-black dark:text-white rounded-md opacity-60 cursor-not-allowed">
-                  Downloads
-                </UButton>
-              </nav>
-              <nav
-                v-if="isCoopSection"
-                class="mt-2 flex items-center justify-center gap-1"
-                role="navigation"
-                aria-label="Co-Op in 6 Months sub navigation">
-                <NuxtLink
-                  v-for="item in coopMenu[0]"
-                  :key="item.to"
-                  :to="item.to"
-                  class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-                  :class="{
-                    'bg-neutral-100 dark:bg-neutral-800':
-                      route.path === item.to,
-                  }">
-                  {{ item.label }}
-                </NuxtLink>
               </nav>
+              <div class="py-8">
+                <CoopBuilderSubnav v-if="isCoopBuilderSection" />
+                <WizardSubnav v-if="isWizardSection" />
+              </div>
             </header>
             <NuxtPage />
           </UContainer>
@@ -82,17 +73,20 @@
 </template>
 
 <script setup lang="ts">
-const coopMenu = [
-  [
-    { label: "Dashboard", to: "/" },
-    { label: "Revenue Mix", to: "/mix" },
-    { label: "Budget", to: "/budget" },
-    { label: "Scenarios", to: "/scenarios" },
-    { label: "Cash", to: "/cash" },
-    { label: "Glossary", to: "/glossary" },
-  ],
-];
-
 const route = useRoute();
-const isCoopSection = computed(() => route.path === "/coop-planner");
+const isCoopBuilderSection = computed(
+  () =>
+    route.path === "/coop-planner" ||
+    route.path === "/coop-builder" ||
+    route.path === "/" ||
+    route.path === "/mix" ||
+    route.path === "/budget" ||
+    route.path === "/scenarios" ||
+    route.path === "/cash" ||
+    route.path === "/glossary"
+);
+
+const isWizardSection = computed(
+  () => route.path === "/wizards" || route.path.startsWith("/templates/")
+);
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 0575114..546c443 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,29 +1,25 @@
 
-
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-/* Ubuntu font import */
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
-
-[data-theme="dark"] {
-  html { @apply bg-white text-neutral-900; }
-  html.dark { @apply bg-neutral-950 text-neutral-100; }
+@theme {
+  --font-body: "Ubuntu", "Inter", sans-serif; 
+  --font-mono: "Ubuntu Mono", monospace;
 }
 
-/* Disable all animations, transitions, and smooth scrolling app-wide */
 html,
 body {
-  scroll-behavior: auto !important;
+  @apply font-body bg-white text-neutral-900 dark:bg-neutral-950 dark:text-neutral-100;
 }
 
-*,
-*::before,
-*::after {
-  animation: none !important;
-  transition: none !important;
+/* All headers use Inter font */
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+
+
 /* =========================
    TEMPLATE DOCUMENT LAYOUT
    ========================= */
@@ -47,7 +43,7 @@ body {
    ========================= */
 
 .section-card {
-  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
+  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8 relative;
 }
 
 .section-card::before {
@@ -57,27 +53,24 @@ body {
   left: 4px;
   right: -4px;
   bottom: -4px;
-  background: black;
+  @apply bg-black dark:bg-white;
   background-image: radial-gradient(white 1px, transparent 1px);
   background-size: 2px 2px;
   z-index: -1;
 }
 
+html.dark .section-card::before {
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
 .section-title {
-  font-size: 1.75rem;
-  font-weight: 800;
-  color: inherit;
-  margin: 0 0 1rem 0;
+  @apply text-3xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4;
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 }
 
 .subsection-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #374151;
-  margin: 0 0 0.75rem 0;
-  text-decoration: none;
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 0.25rem;
+  @apply text-xl font-semibold text-neutral-700 dark:text-neutral-300 mb-3 no-underline border-b border-neutral-200 dark:border-neutral-700 pb-1;
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 }
 
 /* =========================
@@ -121,55 +114,36 @@ body {
 }
 
 .form-group-large .large-field {
-  @apply block w-full mt-2 text-lg rounded-md border-none transition-colors duration-150 ease-in-out;
+  @apply block w-full mt-2 text-lg rounded-md border-none transition-colors duration-150 ease-in-out bg-neutral-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100;
 }
 
 .form-group-large .large-field:focus {
-  background: #f3f4f6;
+  @apply bg-neutral-100 dark:bg-neutral-700 outline-2 outline-blue-500 -outline-offset-2;
   box-shadow: none;
-  outline: 2px solid #3b82f6;
-  outline-offset: -2px;
 }
 
 .inline-field {
-  display: inline-block;
-  margin: 0 0.25rem;
-  min-width: 120px;
-  border: none;
-  background: #f9fafb;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
+  @apply inline-block mx-1 min-w-[120px] border-none bg-neutral-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-2 py-1 rounded;
 }
 
 .inline-field:focus {
-  background: #f3f4f6;
-  outline: 1px solid #3b82f6;
-  outline-offset: -1px;
+  @apply bg-neutral-100 dark:bg-neutral-700 outline-1 outline-blue-500 -outline-offset-1;
 }
 
 .number-field {
-  min-width: 80px !important;
-  text-align: center;
+  @apply min-w-[80px] text-center;
 }
 
 .wide-field {
-  min-width: 250px !important;
+  @apply min-w-[250px];
 }
 
 .form-group-block .block-field {
-  display: block;
-  width: 100%;
-  margin-top: 0.25rem;
-  border: none;
-  background: #f9fafb;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
+  @apply block w-full mt-1 border-none bg-neutral-50 dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 p-2 rounded;
 }
 
 .form-group-block .block-field:focus {
-  background: #f3f4f6;
-  outline: 1px solid #3b82f6;
-  outline-offset: -1px;
+  @apply bg-neutral-100 dark:bg-neutral-700 outline-1 outline-blue-500 -outline-offset-1;
 }
 
 /* =========================
@@ -263,16 +237,75 @@ body {
    ========================= */
 
 .dither-shadow {
-  background: black;
+  @apply bg-black dark:bg-white;
   background-image: radial-gradient(white 1px, transparent 1px);
   background-size: 2px 2px;
 }
 
 html.dark .dither-shadow {
-  background: white;
   background-image: radial-gradient(black 1px, transparent 1px);
 }
 
+/* =========================
+   SELECTED ITEM PATTERN
+   ========================= */
+
+/* Pattern for selected items with dithered shadow and patterned background */
+.item-selected {
+  @apply relative bg-white dark:bg-neutral-950;
+}
+
+.item-selected::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent 0px,
+    transparent 1px,
+    black 1px,
+    black 2px
+  );
+  opacity: 0.1;
+  pointer-events: none;
+  z-index: 0;
+}
+
+html.dark .item-selected::after {
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent 0px,
+    transparent 1px,
+    white 1px,
+    white 2px
+  );
+}
+
+.item-selected > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Text background for better readability on selected items */
+.item-label-bg {
+  @apply bg-white/85 dark:bg-neutral-950/85 rounded;
+}
+
+.item-label-bg.selected {
+  @apply bg-white/95 dark:bg-neutral-950/95;
+}
+
+.item-text-bg {
+  @apply bg-white/90 dark:bg-neutral-950/90;
+}
+
+.item-text-bg.selected {
+  @apply bg-white/95 dark:bg-neutral-950/95;
+}
+
 /* =========================
    BUTTON STYLING
    ========================= */
@@ -330,123 +363,71 @@ html.dark .export-btn.primary:hover {
   @apply bg-white text-black;
 }
 
-/* General buttons with bitmap styling */
-button:not(.export-btn) {
-  background: white !important;
-  border: 1px solid black !important;
-  color: black !important;
-  font-family: "Ubuntu Mono", monospace !important;
-  text-transform: uppercase !important;
-  font-weight: bold !important;
-  letter-spacing: 0.5px !important;
-  cursor: pointer !important;
+/* Bitmap button base styling - more targeted approach */
+.bitmap-style {
+  @apply bg-white dark:bg-neutral-950 border border-black dark:border-white text-black dark:text-white font-mono uppercase font-bold tracking-wide cursor-pointer;
 }
 
-button:not(.export-btn):hover {
-  background: black !important;
-  color: white !important;
-  transform: translateY(-1px) translateX(-1px) !important;
+.bitmap-style:hover {
+  @apply bg-black dark:bg-white text-white dark:text-black;
+  transform: translateY(-1px) translateX(-1px);
 }
 
-/* Dark mode buttons */
-html.dark button:not(.export-btn) {
-  background: #0a0a0a !important;
-  border: 1px solid white !important;
-  color: white !important;
+/* Bitmap button styling for template cards */
+.bitmap-button {
+  @apply font-mono uppercase font-bold tracking-wider relative;
 }
 
-html.dark button:not(.export-btn):hover {
-  background: white !important;
-  color: black !important;
+.bitmap-button:hover {
+  transform: translateY(-1px) translateX(-1px);
+  transition: transform 0.1s ease;
+}
+
+.bitmap-button:hover::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  right: -1px;
+  bottom: -1px;
+  @apply border border-black dark:border-white bg-white dark:bg-neutral-950;
+  z-index: -1;
+}
+
+/* Constraint button selected styling */
+.constraint-selected {
+  @apply bg-black dark:bg-white text-white dark:text-black;
+}
+
+.constraint-selected:hover {
+  @apply bg-black dark:bg-white text-white dark:text-black;
 }
 
 /* =========================
    BITMAP AESTHETIC OVERRIDES
    ========================= */
 
-/* Remove all rounded corners */
-* {
-  border-radius: 0 !important;
-  font-family: "Ubuntu", monospace !important;
+
+/* Bitmap form field styling - applied selectively */
+.bitmap-input {
+  @apply border border-black dark:border-white bg-white dark:bg-neutral-950 text-black dark:text-white font-mono;
 }
 
-/* Form fields with bitmap styling */
-input,
-textarea,
-select {
-  border: 1px solid black !important;
-  background: white !important;
-  color: black !important;
-  font-family: "Ubuntu Mono", monospace !important;
+.bitmap-input:focus {
+  @apply outline-2 outline-black dark:outline-white -outline-offset-2 bg-white dark:bg-neutral-950;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid black !important;
-  outline-offset: -2px !important;
-  background: white !important;
+/* Checkbox and radio button styling for bitmap theme */
+.bitmap-checkbox {
+  @apply border-2 border-black dark:border-white bg-white dark:bg-neutral-950;
 }
 
-/* Dark mode form fields */
-html.dark input,
-html.dark textarea,
-html.dark select {
-  border: 1px solid white !important;
-  background: #0a0a0a !important;
-  color: white !important;
+.bitmap-checkbox:checked {
+  @apply bg-black dark:bg-white text-white dark:text-black;
 }
 
-html.dark input:focus,
-html.dark textarea:focus,
-html.dark select:focus {
-  outline: 2px solid white !important;
-  background: #0a0a0a !important;
-}
 
-/* Checkbox and radio button styling */
-input[type="checkbox"],
-input[type="radio"] {
-  border: 2px solid black !important;
-  background: white !important;
-}
 
-input[type="checkbox"]:checked,
-input[type="radio"]:checked {
-  background: black !important;
-  color: white !important;
-}
-
-html.dark input[type="checkbox"],
-html.dark input[type="radio"] {
-  border: 2px solid white !important;
-  background: #0a0a0a !important;
-}
-
-html.dark input[type="checkbox"]:checked,
-html.dark input[type="radio"]:checked {
-  background: white !important;
-  color: black !important;
-}
-
-/* Document titles */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Ubuntu", monospace !important;
-  color: inherit !important;
-}
-
-/* All text */
-p,
-span,
-div {
-  color: inherit !important;
-  font-family: "Ubuntu", monospace !important;
-}
 
 /* =========================
    HIDE ELEMENTS FROM PRINT
@@ -523,6 +504,85 @@ div {
   }
 }
 
+/* =========================
+   VALIDATION STYLES
+   ========================= */
+
+.validation-error {
+  @apply text-red-500 dark:text-red-400 text-sm font-medium mt-2 flex items-center gap-1;
+}
+
+/* =========================
+   TEMPLATE CARD STYLES
+   ========================= */
+
+.template-card {
+  @apply relative font-mono;
+}
+
+.help-section {
+  @apply relative;
+}
+
+.coming-soon {
+  @apply opacity-70;
+}
+
+.dither-tag {
+  @apply relative bg-white dark:bg-neutral-950;
+}
+
+.dither-tag::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent 0px,
+    transparent 1px,
+    black 1px,
+    black 2px
+  );
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+html.dark .dither-tag::before {
+  background-image: repeating-linear-gradient(
+    45deg,
+    transparent 0px,
+    transparent 1px,
+    white 1px,
+    white 2px
+  );
+}
+
+.disabled-button {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+/* =========================
+   ANIMATIONS
+   ========================= */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.5s ease-out;
+}
+
 /* =========================
    MOBILE RESPONSIVENESS
    ========================= */
diff --git a/components/BudgetCategorySelector.vue b/components/BudgetCategorySelector.vue
new file mode 100644
index 0000000..e1a68be
--- /dev/null
+++ b/components/BudgetCategorySelector.vue
@@ -0,0 +1,67 @@
+<template>
+  <select 
+    v-model="selectedCategory"
+    @change="handleSelection(selectedCategory)"
+    class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+  >
+    <option v-for="option in options" :key="option" :value="option">
+      {{ option }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: string;
+  type: 'revenue' | 'expenses';
+  mainCategory?: string;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select subcategory'
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const budgetStore = useBudgetStore();
+
+const selectedCategory = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const options = computed(() => {
+  if (props.type === 'revenue' && props.mainCategory) {
+    // Show subcategories for the revenue main category
+    return budgetStore.revenueSubcategories[props.mainCategory] || [];
+  } else if (props.type === 'expenses' && props.mainCategory) {
+    // For expenses, we don't have predefined subcategories, so show common ones or empty
+    const expenseSubcategories = {
+      'Salaries & Benefits': ['Base wages and benefits', 'Health insurance', 'Retirement contributions', 'Payroll taxes'],
+      'Development Costs': ['Software tools', 'Development kits', 'Contractor fees', 'Testing costs'],
+      'Equipment & Technology': ['Hardware', 'Software licenses', 'Cloud services', 'IT support'],
+      'Marketing & Outreach': ['Advertising', 'Content creation', 'Event costs', 'PR services'],
+      'Office & Operations': ['Rent', 'Utilities', 'Insurance', 'Office supplies'],
+      'Legal & Professional': ['Legal fees', 'Accounting', 'Consulting', 'Professional services'],
+      'Other Expenses': ['Miscellaneous', 'Travel', 'Training', 'Other']
+    };
+    return expenseSubcategories[props.mainCategory] || ['Miscellaneous'];
+  } else {
+    // Fallback to main categories if no mainCategory provided
+    return props.type === 'revenue' 
+      ? budgetStore.revenueCategories 
+      : budgetStore.expenseCategories;
+  }
+});
+
+function handleSelection(value: string) {
+  // If it's a new category (not in existing list), add it
+  if (value && !options.value.includes(value)) {
+    budgetStore.addCustomCategory(props.type, value);
+  }
+  emit('update:modelValue', value);
+}
+</script>
\ No newline at end of file
diff --git a/components/CoopBuilderSubnav.vue b/components/CoopBuilderSubnav.vue
new file mode 100644
index 0000000..c6c0d69
--- /dev/null
+++ b/components/CoopBuilderSubnav.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="mb-12">
+    <div class="w-full mx-auto">
+      <nav
+        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
+      >
+        <NuxtLink
+          v-for="item in coopBuilderItems"
+          :key="item.id"
+          :to="item.path"
+          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
+          :class="
+            isActive(item.path)
+              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
+              : ''
+          "
+        >
+          {{ item.name }}
+        </NuxtLink>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const coopBuilderItems = [
+  {
+    id: "coop-builder",
+    name: "Setup Wizard",
+    path: "/coop-builder",
+  },
+  {
+    id: "budget",
+    name: "Budget",
+    path: "/budget",
+  },
+];
+
+function isActive(path: string): boolean {
+  return route.path === path;
+}
+</script>
+
+<style scoped>
+/* Ensure horizontal scroll on mobile */
+nav {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+nav::-webkit-scrollbar {
+  display: none; /* WebKit */
+}
+</style>
\ No newline at end of file
diff --git a/components/ExportOptions.vue b/components/ExportOptions.vue
index b4860e9..abd25a6 100644
--- a/components/ExportOptions.vue
+++ b/components/ExportOptions.vue
@@ -2,9 +2,8 @@
   <div class="export-options" :class="containerClass">
     <div class="export-content">
       <div class="export-section">
-        <h3 class="export-title">Export Options:</h3>
         <div class="export-buttons">
-          <button
+          <UButton
             @click="copyToClipboard"
             class="export-btn"
             :disabled="isProcessing"
@@ -13,9 +12,9 @@
             <UIcon name="i-heroicons-clipboard" />
             <span>Copy as Text</span>
             <UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
-          </button>
+          </UButton>
 
-          <button
+          <UButton
             @click="downloadAsMarkdown"
             class="export-btn"
             :disabled="isProcessing"
@@ -28,7 +27,7 @@
               name="i-heroicons-check"
               class="success-icon"
             />
-          </button>
+          </UButton>
         </div>
       </div>
     </div>
@@ -582,6 +581,7 @@ const downloadFile = (content: string, filename: string, type: string) => {
 }
 
 .export-buttons {
+  @apply font-mono;
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
diff --git a/components/WizardRevenueStep.vue b/components/WizardRevenueStep.vue
index 8dd4f2c..d645993 100644
--- a/components/WizardRevenueStep.vue
+++ b/components/WizardRevenueStep.vue
@@ -1,132 +1,137 @@
 <template>
   <div class="max-w-4xl mx-auto space-y-6">
-    <!-- Section Header with Export Controls -->
-    <div class="flex items-center justify-between mb-8">
-      <div>
-        <h3 class="text-2xl font-black text-black mb-2">
-          Where will your money come from?
-        </h3>
-        <p class="text-neutral-600">
-          Add sources like client work, grants, product sales, or donations.
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <UButton
-          variant="outline"
-          color="gray"
-          size="sm"
-          @click="exportStreams">
-          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
-          Export
-        </UButton>
-        <UButton
-          v-if="streams.length > 0"
-          @click="addRevenueStream"
-          size="sm"
-          variant="solid"
-          color="success"
-          :ui="{
-            base: 'cursor-pointer hover:scale-105 transition-transform',
-            leadingIcon: 'hover:rotate-90 transition-transform',
-          }">
-          <UIcon name="i-heroicons-plus" class="mr-1" />
-          Add stream
-        </UButton>
-      </div>
+    <!-- Section Header -->
+    <div class="mb-8">
+      <h3 class="text-2xl font-black text-black mb-2">
+        Where will your money come from?
+      </h3>
+      <p class="text-neutral-600">
+        Add sources like client work, grants, product sales, or donations.
+      </p>
     </div>
 
-    <div class="space-y-3">
-      <div
-        v-if="streams.length === 0"
-        class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
-        <h4 class="font-medium text-neutral-900 mb-2">
-          No revenue streams yet
-        </h4>
-        <p class="text-sm text-neutral-500 mb-4">
-          Get started by adding your first revenue source.
-        </p>
-        <UButton
-          @click="addRevenueStream"
-          size="lg"
-          variant="solid"
-          color="primary">
-          <UIcon name="i-heroicons-plus" class="mr-2" />
-          Add your first revenue stream
-        </UButton>
-      </div>
+    <!-- Removed Tab Navigation - showing streams directly -->
+        <div class="space-y-6">
+          <!-- Export Controls -->
+          <div class="flex justify-end">
+            <UButton
+              variant="outline"
+              color="gray"
+              size="sm"
+              @click="exportStreams">
+              <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
+              Export
+            </UButton>
+          </div>
 
-      <div
-        v-for="stream in streams"
-        :key="stream.id"
-        class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <UFormField label="Category" required>
-            <USelect
-              v-model="stream.category"
-              :items="categoryOptions"
-              size="xl"
-              class="text-xl font-bold w-full"
-              @update:model-value="saveStream(stream)" />
-          </UFormField>
+          <div class="space-y-3">
+            <div
+              v-if="streams.length === 0"
+              class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
+              <h4 class="font-medium text-neutral-900 mb-2">
+                No revenue streams yet
+              </h4>
+              <p class="text-sm text-neutral-500 mb-4">
+                Get started by adding your first revenue source.
+              </p>
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="primary">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add your first revenue stream
+              </UButton>
+            </div>
 
-          <UFormField label="Revenue source name" required>
-            <USelectMenu
-              v-model="stream.name"
-              :items="nameOptionsByCategory[stream.category] || []"
-              placeholder="Select or type a source name"
-              creatable
-              searchable
-              size="xl"
-              class="text-xl font-bold w-full"
-              @update:model-value="saveStream(stream)" />
-          </UFormField>
+            <div
+              v-for="stream in streams"
+              :key="stream.id"
+              class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <UFormField label="Category" required>
+                  <USelect
+                    v-model="stream.category"
+                    :items="categoryOptions"
+                    size="xl"
+                    class="text-xl font-bold w-full"
+                    @update:model-value="saveStream(stream)" />
+                </UFormField>
 
-          <UFormField label="Monthly amount" required>
-            <UInput
-              v-model="stream.targetMonthlyAmount"
-              type="text"
-              placeholder="5000"
-              size="xl"
-              class="text-xl font-black w-full"
-              @update:model-value="validateAndSaveAmount($event, stream)"
-              @blur="saveStream(stream)">
-              <template #leading>
-                <span class="text-neutral-500 text-xl">$</span>
-              </template>
-            </UInput>
-          </UFormField>
+                <UFormField label="Revenue source name" required>
+                  <USelectMenu
+                    v-model="stream.name"
+                    :items="nameOptionsByCategory[stream.category] || []"
+                    placeholder="Select or type a source name"
+                    creatable
+                    searchable
+                    size="xl"
+                    class="text-xl font-bold w-full"
+                    @update:model-value="saveStream(stream)" />
+                </UFormField>
+
+                <UFormField label="Monthly amount" required>
+                  <UInput
+                    v-model="stream.targetMonthlyAmount"
+                    type="text"
+                    placeholder="5000"
+                    size="xl"
+                    class="text-xl font-black w-full"
+                    @update:model-value="validateAndSaveAmount($event, stream)"
+                    @blur="saveStream(stream)">
+                    <template #leading>
+                      <span class="text-neutral-500 text-xl">$</span>
+                    </template>
+                  </UInput>
+                </UFormField>
+              </div>
+
+              <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
+                <UButton
+                  size="xs"
+                  variant="solid"
+                  color="error"
+                  @click="removeStream(stream.id)"
+                  :ui="{
+                    base: 'cursor-pointer hover:opacity-90 transition-opacity',
+                  }">
+                  <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+                </UButton>
+              </div>
+            </div>
+
+            <!-- Add Stream Button (when items exist) -->
+            <div v-if="streams.length > 0" class="flex justify-center">
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="success"
+                :ui="{
+                  base: 'cursor-pointer hover:scale-105 transition-transform',
+                  leadingIcon: 'hover:rotate-90 transition-transform',
+                }">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add another stream
+              </UButton>
+            </div>
+
+            <div v-if="streams.length > 0" class="flex items-center gap-3 justify-end">
+              <UButton
+                @click="addRevenueStream"
+                size="sm"
+                variant="solid"
+                color="success"
+                :ui="{
+                  base: 'cursor-pointer hover:scale-105 transition-transform',
+                  leadingIcon: 'hover:rotate-90 transition-transform',
+                }">
+                <UIcon name="i-heroicons-plus" class="mr-1" />
+                Add stream
+              </UButton>
+            </div>
+          </div>
         </div>
-
-        <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
-          <UButton
-            size="xs"
-            variant="solid"
-            color="error"
-            @click="removeStream(stream.id)"
-            :ui="{
-              base: 'cursor-pointer hover:opacity-90 transition-opacity',
-            }">
-            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
-          </UButton>
-        </div>
-      </div>
-
-      <!-- Add Stream Button (when items exist) -->
-      <div v-if="streams.length > 0" class="flex justify-center">
-        <UButton
-          @click="addRevenueStream"
-          size="lg"
-          variant="solid"
-          color="success"
-          :ui="{
-            base: 'cursor-pointer hover:scale-105 transition-transform',
-            leadingIcon: 'hover:rotate-90 transition-transform',
-          }">
-          <UIcon name="i-heroicons-plus" class="mr-2" />
-          Add another stream
-        </UButton>
-      </div>
-    </div>
   </div>
 </template>
 
diff --git a/components/WizardReviewStep.vue b/components/WizardReviewStep.vue
index 2f8014d..758657e 100644
--- a/components/WizardReviewStep.vue
+++ b/components/WizardReviewStep.vue
@@ -1,20 +1,12 @@
 <template>
   <div class="max-w-4xl mx-auto space-y-6">
-    <!-- Section Header with Export Controls -->
-    <div class="flex items-center justify-between mb-8">
-      <div>
-        <h3 class="text-2xl font-black text-black mb-2">Review & Complete</h3>
-        <p class="text-neutral-600">
-          Review your setup and complete the wizard to start using your co-op
-          tool.
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <UButton variant="outline" color="gray" size="sm" @click="exportSetup">
-          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
-          Export All
-        </UButton>
-      </div>
+    <!-- Section Header -->
+    <div class="mb-8">
+      <h3 class="text-2xl font-black text-black dark:text-white mb-2">Review & Complete</h3>
+      <p class="text-neutral-600 dark:text-neutral-400">
+        Review your setup and complete the wizard to start using your co-op
+        tool.
+      </p>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -371,28 +363,4 @@ function completeSetup() {
   }
 }
 
-function exportSetup() {
-  // Create export data
-  const setupData = {
-    members: members.value,
-    policies: policies.value,
-    overheadCosts: overheadCosts.value,
-    streams: streams.value,
-    exportedAt: new Date().toISOString(),
-    version: "1.0",
-  };
-
-  // Download as JSON
-  const blob = new Blob([JSON.stringify(setupData, null, 2)], {
-    type: "application/json",
-  });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `coop-setup-${new Date().toISOString().split("T")[0]}.json`;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
 </script>
diff --git a/components/WizardSubnav.vue b/components/WizardSubnav.vue
index 0b6068e..5d2716f 100644
--- a/components/WizardSubnav.vue
+++ b/components/WizardSubnav.vue
@@ -1,52 +1,22 @@
 <template>
-  <div
-    class="border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900">
-    <div class="max-w-4xl mx-auto px-4 py-3">
-      <nav class="flex items-center space-x-1 overflow-x-auto">
-        <!-- Main Setup Wizard -->
-        <NuxtLink
-          to="/wizard"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
-          :class="
-            isActive('/wizard')
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon name="i-heroicons-cog-6-tooth" class="w-4 h-4 mr-2" />
-          Setup Wizard
-        </NuxtLink>
-
-        <!-- Divider -->
-        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
-
-        <!-- Template Wizards -->
+  <div class="mb-12">
+    <div class="w-full mx-auto">
+      <nav
+        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
+      >
         <NuxtLink
           v-for="wizard in templateWizards"
           :key="wizard.id"
           :to="wizard.path"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
+          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
           :class="
             isActive(wizard.path)
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon :name="wizard.icon" class="w-4 h-4 mr-2" />
+              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
+              : ''
+          "
+        >
           {{ wizard.name }}
         </NuxtLink>
-
-        <!-- All Wizards Link -->
-        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
-        <NuxtLink
-          to="/wizards"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
-          :class="
-            isActive('/wizards')
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon name="i-heroicons-squares-plus" class="w-4 h-4 mr-2" />
-          All Wizards
-        </NuxtLink>
       </nav>
     </div>
   </div>
@@ -55,30 +25,25 @@
 <script setup lang="ts">
 const route = useRoute();
 
-// Template wizards data - matches the wizards.vue page
 const templateWizards = [
   {
     id: "membership-agreement",
     name: "Membership Agreement",
-    icon: "i-heroicons-user-group",
     path: "/templates/membership-agreement",
   },
   {
     id: "conflict-resolution-framework",
     name: "Conflict Resolution",
-    icon: "i-heroicons-scale",
     path: "/templates/conflict-resolution-framework",
   },
   {
     id: "tech-charter",
     name: "Tech Charter",
-    icon: "i-heroicons-cog-6-tooth",
     path: "/templates/tech-charter",
   },
   {
     id: "decision-framework",
-    name: "Decision Helper",
-    icon: "i-heroicons-light-bulb",
+    name: "Decision Framework",
     path: "/templates/decision-framework",
   },
 ];
diff --git a/composables/useFixtures.ts b/composables/useFixtures.ts
index 8c1eb99..9460c2e 100644
--- a/composables/useFixtures.ts
+++ b/composables/useFixtures.ts
@@ -58,7 +58,7 @@ export const useFixtures = () => {
           category: 'Services',
           subcategory: 'Development',
           targetPct: 65,
-          targetMonthlyAmount: 0,
+          targetMonthlyAmount: 13000,
           certainty: 'Committed',
           payoutDelayDays: 30,
           terms: 'Net 30',
@@ -73,7 +73,7 @@ export const useFixtures = () => {
           category: 'Product',
           subcategory: 'Digital Tools',
           targetPct: 20,
-          targetMonthlyAmount: 0,
+          targetMonthlyAmount: 4000,
           certainty: 'Probable',
           payoutDelayDays: 14,
           terms: 'Platform payout',
@@ -88,7 +88,7 @@ export const useFixtures = () => {
           category: 'Grant',
           subcategory: 'Government',
           targetPct: 10,
-          targetMonthlyAmount: 0,
+          targetMonthlyAmount: 2000,
           certainty: 'Committed',
           payoutDelayDays: 45,
           terms: 'Quarterly disbursement',
@@ -103,7 +103,7 @@ export const useFixtures = () => {
           category: 'Donation',
           subcategory: 'Individual',
           targetPct: 3,
-          targetMonthlyAmount: 0,
+          targetMonthlyAmount: 600,
           certainty: 'Aspirational',
           payoutDelayDays: 3,
           terms: 'Immediate',
@@ -118,7 +118,7 @@ export const useFixtures = () => {
           category: 'Other',
           subcategory: 'Professional Services',
           targetPct: 2,
-          targetMonthlyAmount: 0,
+          targetMonthlyAmount: 400,
           certainty: 'Probable',
           payoutDelayDays: 21,
           terms: 'Net 21',
diff --git a/composables/useOfferSuggestor.ts b/composables/useOfferSuggestor.ts
new file mode 100644
index 0000000..445d74e
--- /dev/null
+++ b/composables/useOfferSuggestor.ts
@@ -0,0 +1,256 @@
+import type { Member, SkillTag, ProblemTag, Offer } from "~/types/coaching";
+import { offerTemplates, matchTemplateToInput, getTemplateHours } from '~/data/offerTemplates';
+
+interface SuggestOffersInput {
+  members: Member[];
+  selectedSkillsByMember: Record<string, string[]>;
+  selectedProblems: string[];
+}
+
+interface Catalogs {
+  skills: SkillTag[];
+  problems: ProblemTag[];
+}
+
+export interface OfferTemplate {
+  id: string;
+  name: string;
+  type: 'workshop' | 'clinic' | 'sprint' | 'retainer';
+  skillRequirements: string[];
+  problemTargets: string[];
+  scope: string[];
+  defaultDays: number;
+  defaultHours?: Record<string, number>;
+  whyThisTemplate: string[];
+  riskTemplate: string;
+}
+
+export function useOfferSuggestor() {
+
+  // Payout delay defaults by offer type
+  const payoutDelays = {
+    workshop: 14,
+    clinic: 30,
+    sprint: 45,
+    retainer: 30
+  };
+
+  function suggestOffers(input: SuggestOffersInput, catalogs: Catalogs): Offer[] {
+    const { members, selectedSkillsByMember, selectedProblems } = input;
+    
+    // Get all selected skills across all members
+    const allSelectedSkills = new Set<string>();
+    Object.values(selectedSkillsByMember).forEach(skills => {
+      skills.forEach(skill => allSelectedSkills.add(skill));
+    });
+
+    const selectedSkillsArray = Array.from(allSelectedSkills);
+    const offers: Offer[] = [];
+
+    // Try to match templates
+    const matchingTemplates = findMatchingTemplates(selectedSkillsArray, selectedProblems);
+    
+    // Generate offers from matching templates (max 2)
+    for (const template of matchingTemplates.slice(0, 2)) {
+      const offer = generateOfferFromTemplate(template, input);
+      if (offer) {
+        offers.push(offer);
+      }
+    }
+
+    // If we have fewer than 2 offers, add default "1-Week Dev Sprint"
+    if (offers.length < 2) {
+      const devSprintOffer = generateDevSprintOffer(input);
+      if (devSprintOffer) {
+        offers.push(devSprintOffer);
+      }
+    }
+    
+    // If no template matches at all, ensure we always have at least the dev sprint
+    if (offers.length === 0) {
+      const devSprintOffer = generateDevSprintOffer(input);
+      if (devSprintOffer) {
+        offers.push(devSprintOffer);
+      }
+    }
+
+    // Limit to 3 offers max
+    return offers.slice(0, 3);
+  }
+
+  function findMatchingTemplates(selectedSkills: string[], selectedProblems: string[]): OfferTemplate[] {
+    // Use the lightweight matching rules from the data file
+    return matchTemplateToInput(selectedSkills, selectedProblems);
+  }
+
+  function generateOfferFromTemplate(template: OfferTemplate, input: SuggestOffersInput): Offer | null {
+    const { members, selectedSkillsByMember } = input;
+    
+    // Create skill-to-member mapping
+    const skillToMemberMap = new Map<string, Member[]>();
+    members.forEach(member => {
+      const memberSkills = selectedSkillsByMember[member.id] || [];
+      memberSkills.forEach(skill => {
+        if (!skillToMemberMap.has(skill)) {
+          skillToMemberMap.set(skill, []);
+        }
+        skillToMemberMap.get(skill)!.push(member);
+      });
+    });
+
+    // Generate hours allocation based on template's defaultHours
+    const hoursByMember: Array<{ memberId: string; hours: number }> = [];
+    
+    if (template.defaultHours) {
+      // Use specific hour allocations from template
+      Object.entries(template.defaultHours).forEach(([skill, hours]) => {
+        const availableMembers = skillToMemberMap.get(skill) || [];
+        if (availableMembers.length > 0) {
+          // Assign to member with highest availability for this skill
+          const bestMember = availableMembers.sort((a, b) => b.availableHrs - a.availableHrs)[0];
+          
+          // Check if this member already has hours assigned
+          const existingAllocation = hoursByMember.find(h => h.memberId === bestMember.id);
+          if (existingAllocation) {
+            existingAllocation.hours += hours;
+          } else {
+            hoursByMember.push({ memberId: bestMember.id, hours });
+          }
+        }
+      });
+    } else {
+      // Fallback to old method if no defaultHours specified
+      const relevantMembers = members.filter(member => {
+        const memberSkills = selectedSkillsByMember[member.id] || [];
+        return template.skillRequirements.some(skill => memberSkills.includes(skill));
+      });
+      
+      if (relevantMembers.length === 0) return null;
+      
+      const totalHours = template.defaultDays * 8; // 8 hours per day
+      hoursByMember.push(...distributeHours(relevantMembers, totalHours));
+    }
+
+    if (hoursByMember.length === 0) return null;
+
+    // Calculate pricing
+    const pricing = calculatePricing(hoursByMember, members);
+
+    return {
+      id: `${template.id}-${Date.now()}`,
+      name: `${template.name} (${template.defaultDays} ${template.defaultDays === 1 ? 'day' : 'days'})`,
+      scope: template.scope,
+      hoursByMember,
+      price: {
+        baseline: pricing.baseline,
+        stretch: pricing.stretch,
+        calcNote: pricing.calcNote
+      },
+      payoutDelayDays: payoutDelays[template.type],
+      whyThis: template.whyThisTemplate,
+      riskNotes: [template.riskTemplate]
+    };
+  }
+
+  function generateDevSprintOffer(input: SuggestOffersInput): Offer | null {
+    const { members, selectedSkillsByMember } = input;
+    
+    // Find members with highest availability (if no skills selected, use all members)
+    const membersWithSkills = members
+      .filter(member => (selectedSkillsByMember[member.id] || []).length > 0);
+    
+    const availableMembers = membersWithSkills.length > 0 
+      ? membersWithSkills.sort((a, b) => b.availableHrs - a.availableHrs)
+      : members.sort((a, b) => b.availableHrs - a.availableHrs);
+
+    if (availableMembers.length === 0) return null;
+
+    // Use top 2-3 highest availability members
+    const selectedMembers = availableMembers.slice(0, Math.min(3, availableMembers.length));
+    
+    // 1 week = 40 hours, distributed among selected members
+    const hoursByMember = distributeHours(selectedMembers, 40);
+    const pricing = calculatePricing(hoursByMember, members);
+
+    // Get selected skill names for why this
+    const allSelectedSkills = new Set<string>();
+    Object.values(selectedSkillsByMember).forEach(skills => {
+      skills.forEach(skill => allSelectedSkills.add(skill));
+    });
+
+    return {
+      id: `dev-sprint-${Date.now()}`,
+      name: 'Development Sprint (1 week)',
+      scope: [
+        'Implement specific features or fixes',
+        'Code review and quality assurance',
+        'Documentation and handoff'
+      ],
+      hoursByMember,
+      price: {
+        baseline: pricing.baseline,
+        stretch: pricing.stretch,
+        calcNote: pricing.calcNote
+      },
+      payoutDelayDays: payoutDelays.sprint,
+      whyThis: [
+        `Leverages your ${Array.from(allSelectedSkills).slice(0, 2).join(' and ')} skills`,
+        'Time-boxed sprint reduces risk',
+        'Fits within your available capacity'
+      ],
+      riskNotes: ['Scope creep is common in open-ended development work']
+    };
+  }
+
+  function distributeHours(members: Member[], totalHours: number): Array<{ memberId: string; hours: number }> {
+    if (members.length === 0) return [];
+
+    // Simple distribution based on availability
+    const totalAvailability = members.reduce((sum, m) => sum + m.availableHrs, 0);
+    
+    return members.map(member => {
+      const proportion = member.availableHrs / totalAvailability;
+      const allocatedHours = Math.round(totalHours * proportion);
+      
+      return {
+        memberId: member.id,
+        hours: Math.min(allocatedHours, member.availableHrs)
+      };
+    });
+  }
+
+  function calculatePricing(
+    hoursByMember: Array<{ memberId: string; hours: number }>, 
+    members: Member[]
+  ): { baseline: number; stretch: number; calcNote: string } {
+    
+    // Create member lookup
+    const memberMap = new Map(members.map(m => [m.id, m]));
+    
+    // Calculate cost-plus pricing
+    let totalCost = 0;
+    let totalHours = 0;
+    
+    for (const allocation of hoursByMember) {
+      const member = memberMap.get(allocation.memberId);
+      if (member) {
+        // memberHours * hourly * 1.25 (markup)
+        totalCost += allocation.hours * member.hourly * 1.25;
+        totalHours += allocation.hours;
+      }
+    }
+    
+    // Apply 1.10 multiplier to total
+    const baseline = Math.round(totalCost * 1.10);
+    const stretch = Math.round(baseline * 1.2);
+    
+    const avgRate = totalHours > 0 ? Math.round(totalCost / totalHours) : 0;
+    const calcNote = `${totalHours} hours at ~$${avgRate}/hr blended rate with markup`;
+    
+    return { baseline, stretch, calcNote };
+  }
+
+  return {
+    suggestOffers
+  };
+}
\ No newline at end of file
diff --git a/data/offerTemplates.ts b/data/offerTemplates.ts
new file mode 100644
index 0000000..09d4e8a
--- /dev/null
+++ b/data/offerTemplates.ts
@@ -0,0 +1,178 @@
+import type { OfferTemplate } from '~/composables/useOfferSuggestor';
+
+export const offerTemplates: OfferTemplate[] = [
+  {
+    id: 'pitch-polish',
+    name: 'Pitch Polish',
+    type: 'clinic',
+    skillRequirements: ['writing', 'design'],
+    problemTargets: ['unclear-pitch', 'grant-budget-help'],
+    scope: [
+      'Comprehensive deck review and analysis',
+      'Rewrite key sections for clarity and impact',
+      '90-minute live presentation coaching session',
+      'Final edit pass with visual polish'
+    ],
+    defaultDays: 2,
+    defaultHours: {
+      writing: 6,
+      design: 6,
+      pm: 2
+    },
+    whyThisTemplate: [
+      'Combines writing expertise with design polish',
+      'Time-boxed format keeps scope manageable',
+      'Live coaching session builds confidence',
+      'Immediate impact on funding success'
+    ],
+    riskTemplate: 'Client may resist feedback on core concept or messaging'
+  },
+  {
+    id: 'brand-store-page-sprint',
+    name: 'Brand/Store Page Sprint',
+    type: 'sprint',
+    skillRequirements: ['design', 'dev'],
+    problemTargets: ['need-landing-store-page', 'marketing-assets'],
+    scope: [
+      'Develop clear messaging and brand voice',
+      'Design and build one-page marketing site',
+      'Create store page assets and layout',
+      'Implement responsive design and basic SEO'
+    ],
+    defaultDays: 7,
+    defaultHours: {
+      design: 12,
+      writing: 6,
+      dev: 10,
+      pm: 4
+    },
+    whyThisTemplate: [
+      'Full-stack approach from concept to deployment',
+      'Combines brand strategy with technical execution',
+      'Creates immediate market presence',
+      'Scalable foundation for future marketing'
+    ],
+    riskTemplate: 'Scope creep around additional pages or complex integrations'
+  },
+  {
+    id: 'dev-sprint',
+    name: 'Dev Sprint',
+    type: 'sprint', 
+    skillRequirements: ['dev'],
+    problemTargets: ['vertical-slice', 'tech-debt'],
+    scope: [
+      'Backlog triage and feature prioritization',
+      'Implement 1-2 focused features or fixes',
+      'Create demo build for stakeholder review',
+      'Document changes and deployment process'
+    ],
+    defaultDays: 7,
+    defaultHours: {
+      dev: 24,
+      qa: 4,
+      pm: 4
+    },
+    whyThisTemplate: [
+      'Focused development with clear deliverables',
+      'Includes quality assurance and project management',
+      'Demo build provides immediate feedback opportunity',
+      'Manageable scope reduces technical risk'
+    ],
+    riskTemplate: 'Technical complexity may exceed initial estimates'
+  },
+  {
+    id: 'maintenance-retainer',
+    name: 'Maintenance Retainer',
+    type: 'retainer',
+    skillRequirements: ['dev', 'pm'],
+    problemTargets: ['launch-checklist'],
+    scope: [
+      'Handle small fixes and bug reports',
+      'Apply security and dependency updates',
+      'Provide technical support and guidance',
+      'Monthly progress reports and recommendations'
+    ],
+    defaultDays: 30, // Monthly
+    defaultHours: {
+      dev: 6,
+      pm: 2
+    },
+    whyThisTemplate: [
+      'Predictable monthly income stream',
+      'Builds long-term client relationships',
+      'Low-risk work with defined boundaries',
+      'Efficient use of development skills'
+    ],
+    riskTemplate: 'Client expectations may exceed allocated hours'
+  }
+];
+
+/**
+ * Lightweight matching rules for offer templates
+ */
+export function matchTemplateToInput(
+  selectedSkills: string[], 
+  selectedProblems: string[]
+): OfferTemplate[] {
+  const matches: OfferTemplate[] = [];
+  
+  // Pitch Polish: Writing + Design + pitch/funding problems
+  if (selectedSkills.includes('writing') && selectedSkills.includes('design')) {
+    if (selectedProblems.includes('unclear-pitch') || selectedProblems.includes('grant-budget-help')) {
+      matches.push(offerTemplates[0]); // Pitch Polish
+    }
+  }
+  
+  // Brand/Store Page: Design + Dev + website/marketing problems
+  if (selectedSkills.includes('design') && selectedSkills.includes('dev')) {
+    if (selectedProblems.includes('need-landing-store-page') || selectedProblems.includes('marketing-assets')) {
+      matches.push(offerTemplates[1]); // Brand/Store Page Sprint
+    }
+  }
+  
+  // Dev Sprint: Dev + development-related problems
+  if (selectedSkills.includes('dev')) {
+    if (selectedProblems.includes('vertical-slice') || selectedProblems.includes('tech-debt')) {
+      matches.push(offerTemplates[2]); // Dev Sprint
+    }
+  }
+  
+  // Maintenance Retainer: Dev + PM + launch/maintenance problems
+  if (selectedSkills.includes('dev') && selectedSkills.includes('pm')) {
+    if (selectedProblems.includes('launch-checklist') || matches.length === 0) { // Also use as fallback
+      matches.push(offerTemplates[3]); // Maintenance Retainer
+    }
+  }
+  
+  return matches;
+}
+
+/**
+ * Get default hour allocation for a template based on available members
+ */
+export function getTemplateHours(
+  template: OfferTemplate,
+  availableSkills: string[]
+): Array<{ skill: string; hours: number }> {
+  const allocations: Array<{ skill: string; hours: number }> = [];
+  
+  // Convert template hours to skill-based allocations
+  if (template.defaultHours) {
+    Object.entries(template.defaultHours).forEach(([skill, hours]) => {
+      if (availableSkills.includes(skill)) {
+        allocations.push({ skill, hours });
+      }
+    });
+  }
+  
+  return allocations;
+}
+
+/**
+ * Calculate total hours for a template
+ */
+export function getTemplateTotalHours(template: OfferTemplate): number {
+  if (!template.defaultHours) return template.defaultDays * 8; // Fallback: 8 hours per day
+  
+  return Object.values(template.defaultHours).reduce((sum, hours) => sum + hours, 0);
+}
\ No newline at end of file
diff --git a/data/skillsProblems.ts b/data/skillsProblems.ts
new file mode 100644
index 0000000..bd440f2
--- /dev/null
+++ b/data/skillsProblems.ts
@@ -0,0 +1,157 @@
+import type { SkillTag, ProblemTag } from "~/types/coaching";
+
+/**
+ * Standardized skills catalog for co-op offer generation
+ */
+export const skillsCatalog: SkillTag[] = [
+  { id: "design", label: "Design" },
+  { id: "writing", label: "Writing" },
+  { id: "dev", label: "Dev" },
+  { id: "pm", label: "PM" },
+  { id: "qa", label: "QA" },
+  { id: "teaching", label: "Teaching" },
+  { id: "community", label: "Community" },
+  { id: "marketing", label: "Marketing" },
+  { id: "audio", label: "Audio" },
+  { id: "art", label: "Art" },
+  { id: "facilitation", label: "Facilitation" },
+  { id: "ops", label: "Ops" }
+];
+
+/**
+ * Core problems that co-ops commonly solve, with realistic client examples
+ */
+export const problemsCatalog: ProblemTag[] = [
+  {
+    id: "unclear-pitch",
+    label: "Unclear pitch",
+    examples: [
+      "Our deck isn't landing with investors",
+      "Publishers don't get our concept",
+      "Feedback says the vision is confusing"
+    ]
+  },
+  {
+    id: "need-landing-store-page",
+    label: "Need landing/store page",
+    examples: [
+      "We have no website presence",
+      "Need Steam page copy and layout",
+      "Want a simple marketing landing page"
+    ]
+  },
+  {
+    id: "vertical-slice",
+    label: "Vertical slice",
+    examples: [
+      "Need a demo for potential funders",
+      "Want to test core mechanics with users",
+      "Prototype for investor meetings"
+    ]
+  },
+  {
+    id: "community-plan",
+    label: "Community plan",
+    examples: [
+      "Our Discord server is inactive",
+      "We have no social media posting plan",
+      "Need a community building strategy"
+    ]
+  },
+  {
+    id: "marketing-assets",
+    label: "Marketing assets",
+    examples: [
+      "Need trailer stills and screenshots",
+      "Press kit is completely missing",
+      "Want social media content templates"
+    ]
+  },
+  {
+    id: "grant-budget-help",
+    label: "Grant budget help",
+    examples: [
+      "Need a budget narrative for arts council",
+      "Don't know how to price development time",
+      "Grant application requires detailed financials"
+    ]
+  },
+  {
+    id: "launch-checklist",
+    label: "Launch checklist",
+    examples: [
+      "Need final QA pass before release",
+      "Store assets aren't ready",
+      "Want a pre-launch timeline and tasks"
+    ]
+  },
+  {
+    id: "tech-debt",
+    label: "Tech debt",
+    examples: [
+      "Build process is broken and slow",
+      "Tooling needs major updates",
+      "Performance issues need addressing"
+    ]
+  }
+];
+
+/**
+ * Skills grouped by common combinations for template matching
+ */
+export const skillCombinations = {
+  creative: ['design', 'art', 'writing'],
+  technical: ['dev', 'qa', 'ops'],
+  business: ['pm', 'marketing', 'facilitation'],
+  community: ['community', 'teaching', 'marketing'],
+  production: ['pm', 'qa', 'ops']
+};
+
+/**
+ * Problems grouped by solution type
+ */
+export const problemCategories = {
+  communication: ['unclear-pitch', 'grant-budget-help'],
+  marketing: ['need-landing-store-page', 'marketing-assets', 'community-plan'],
+  development: ['vertical-slice', 'tech-debt'],
+  operations: ['launch-checklist']
+};
+
+/**
+ * Helper function to get skills by category
+ */
+export function getSkillsByCategory(category: keyof typeof skillCombinations): SkillTag[] {
+  const skillIds = skillCombinations[category];
+  return skillsCatalog.filter(skill => skillIds.includes(skill.id));
+}
+
+/**
+ * Helper function to get problems by category
+ */
+export function getProblemsByCategory(category: keyof typeof problemCategories): ProblemTag[] {
+  const problemIds = problemCategories[category];
+  return problemsCatalog.filter(problem => problemIds.includes(problem.id));
+}
+
+/**
+ * Check if a skill combination is commonly used together
+ */
+export function areSkillsComplementary(skills: string[]): boolean {
+  // Check if skills fall within the same or complementary categories
+  const categories = Object.entries(skillCombinations);
+  
+  for (const [category, categorySkills] of categories) {
+    const overlap = skills.filter(skill => categorySkills.includes(skill));
+    if (overlap.length >= 2) {
+      return true; // Found 2+ skills in same category
+    }
+  }
+  
+  // Check cross-category combinations that work well together
+  const hasCreative = skills.some(s => skillCombinations.creative.includes(s));
+  const hasTechnical = skills.some(s => skillCombinations.technical.includes(s));
+  const hasBusiness = skills.some(s => skillCombinations.business.includes(s));
+  
+  // Creative + Technical, Technical + Business, etc. are good combinations
+  return (hasCreative && hasTechnical) || (hasTechnical && hasBusiness) || (hasCreative && hasBusiness);
+}
\ No newline at end of file
diff --git a/pages/budget.vue b/pages/budget.vue
index d552082..29e3856 100644
--- a/pages/budget.vue
+++ b/pages/budget.vue
@@ -1,368 +1,320 @@
 <template>
   <section class="py-8 space-y-6">
     <div class="flex items-center justify-between">
-      <h2 class="text-2xl font-semibold">Operating Plan</h2>
-      <USelect
-        v-model="selectedMonth"
-        :options="months"
-        placeholder="Select month" />
+      <h2 class="text-2xl font-semibold">Budget Worksheet</h2>
+      <div class="flex items-center gap-4">
+        <UButton @click="forceReinitialize" variant="outline" size="sm" color="orange">Force Re-init</UButton>
+        <UButton @click="resetWorksheet" variant="outline" size="sm">Reset All</UButton>
+        <UButton @click="exportBudget" variant="outline" size="sm">Export</UButton>
+      </div>
     </div>
 
-    <!-- Cash Waterfall Summary -->
+    <!-- Budget Worksheet Table -->
     <UCard>
-      <template #header>
-        <h3 class="text-lg font-medium">
-          Cash Waterfall - {{ selectedMonth }}
-        </h3>
-      </template>
-      <div
-        class="flex items-center justify-between py-4 border-b border-neutral-200">
-        <div class="flex items-center gap-8">
-          <div class="text-center">
-            <div class="text-2xl font-bold text-blue-600">
-              €{{ budgetMetrics.grossRevenue.toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">Gross Revenue</div>
-          </div>
-          <UIcon name="i-heroicons-arrow-right" class="text-neutral-400" />
-          <div class="text-center">
-            <div class="text-2xl font-bold text-red-600">
-              -€{{ budgetMetrics.totalFees.toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">Fees</div>
-          </div>
-          <UIcon name="i-heroicons-arrow-right" class="text-neutral-400" />
-          <div class="text-center">
-            <div class="text-2xl font-bold text-green-600">
-              €{{ budgetMetrics.netRevenue.toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">Net Revenue</div>
-          </div>
-          <UIcon name="i-heroicons-arrow-right" class="text-neutral-400" />
-          <div class="text-center">
-            <div class="text-2xl font-bold text-blue-600">
-              €{{ Math.round(budgetMetrics.savingsAmount).toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">To Savings</div>
-          </div>
-          <UIcon name="i-heroicons-arrow-right" class="text-neutral-400" />
-          <div class="text-center">
-            <div class="text-2xl font-bold text-purple-600">
-              €{{ Math.round(budgetMetrics.totalPayroll).toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">Payroll</div>
-          </div>
-          <UIcon name="i-heroicons-arrow-right" class="text-neutral-400" />
-          <div class="text-center">
-            <div class="text-2xl font-bold text-orange-600">
-              €{{ budgetMetrics.totalOverhead.toLocaleString() }}
-            </div>
-            <div class="text-xs text-neutral-600">Overhead</div>
-          </div>
-        </div>
-      </div>
-      <div class="pt-4">
-        <div class="flex items-center justify-between">
-          <span class="text-lg font-medium">Available for Operations</span>
-          <span class="text-2xl font-bold text-green-600"
-            >€{{
-              Math.round(budgetMetrics.availableForOps).toLocaleString()
-            }}</span
-          >
-        </div>
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse border border-gray-300 text-sm">
+          <thead>
+            <tr class="bg-gray-50">
+              <th class="border border-gray-300 px-3 py-2 text-left min-w-40 sticky left-0 bg-gray-50 z-10">Category</th>
+              <!-- Monthly columns -->
+              <th v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-2 py-2 text-center min-w-20">{{ month.label }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Revenue Section -->
+            <tr class="bg-blue-50 font-medium">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-blue-50 z-10">
+                <div class="flex items-center justify-between">
+                  <span>Revenue</span>
+                  <UButton @click="addRevenueLine" size="xs" variant="soft">+</UButton>
+                </div>
+              </td>
+              <td class="border border-gray-300 px-2 py-2" :colspan="monthlyHeaders.length"></td>
+            </tr>
+            
+            <!-- Revenue by Category -->
+            <template v-for="(category, categoryName) in budgetStore.groupedRevenue" :key="`revenue-${categoryName}`">
+              <tr v-if="category.length > 0" class="bg-blue-100 font-medium">
+                <td class="border border-gray-300 px-4 py-1 sticky left-0 bg-blue-100 z-10 text-sm text-blue-700">
+                  {{ categoryName }} ({{ category.length }} items)
+                </td>
+                <td class="border border-gray-300 px-2 py-1" :colspan="monthlyHeaders.length"></td>
+              </tr>
+              <tr v-for="item in category" :key="item.id">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-white z-10">
+                <div class="space-y-2">
+                  <div class="flex items-center justify-between">
+                    <input 
+                      v-model="item.name" 
+                      @blur="saveWorksheet"
+                      class="bg-transparent border-none outline-none w-full font-medium"
+                      :class="{ 'italic text-gray-500': item.name === 'New Revenue Item' }"
+                    />
+                    <UButton @click="removeItem('revenue', item.id)" size="xs" variant="ghost" color="error">×</UButton>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <BudgetCategorySelector 
+                      v-model="item.subcategory"
+                      type="revenue"
+                      :main-category="item.mainCategory"
+                      placeholder="Subcategory"
+                      @update:model-value="saveWorksheet"
+                    />
+                  </div>
+                </div>
+              </td>
+              <!-- Monthly columns -->
+              <td v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-1 py-1">
+                <input 
+                  type="number" 
+                  :value="item.monthlyValues?.[month.key] || 0"
+                  @input="updateMonthlyValue('revenue', item.id, month.key, $event.target.value)"
+                  class="w-full text-right border-none outline-none bg-transparent"
+                  placeholder="0"
+                />
+              </td>
+            </tr>
+            </template>
+            
+            <!-- Total Revenue Row -->
+            <tr class="bg-blue-100 font-bold">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-blue-100 z-10">Total Revenue</td>
+              <td v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-2 py-2 text-right">
+                {{ formatCurrency(budgetStore.monthlyTotals[month.key]?.revenue || 0) }}
+              </td>
+            </tr>
+
+            <!-- Expenses Section -->
+            <tr class="bg-red-50 font-medium">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-red-50 z-10">
+                <div class="flex items-center justify-between">
+                  <span>Expenses</span>
+                  <UButton @click="addExpenseLine" size="xs" variant="soft">+</UButton>
+                </div>
+              </td>
+              <td class="border border-gray-300 px-2 py-2" :colspan="monthlyHeaders.length"></td>
+            </tr>
+            
+            <!-- Expenses by Category -->
+            <template v-for="(category, categoryName) in budgetStore.groupedExpenses" :key="`expense-${categoryName}`">
+              <tr v-if="category.length > 0" class="bg-red-100 font-medium">
+                <td class="border border-gray-300 px-4 py-1 sticky left-0 bg-red-100 z-10 text-sm text-red-700">
+                  {{ categoryName }}
+                </td>
+                <td class="border border-gray-300 px-2 py-1" :colspan="monthlyHeaders.length"></td>
+              </tr>
+              <tr v-for="item in category" :key="item.id">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-white z-10">
+                <div class="space-y-2">
+                  <div class="flex items-center justify-between">
+                    <input 
+                      v-model="item.name" 
+                      @blur="saveWorksheet"
+                      class="bg-transparent border-none outline-none w-full font-medium"
+                      :class="{ 'italic text-gray-500': item.name === 'New Expense Item' }"
+                    />
+                    <UButton @click="removeItem('expenses', item.id)" size="xs" variant="ghost" color="error">×</UButton>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <BudgetCategorySelector 
+                      v-model="item.subcategory"
+                      type="expenses"
+                      :main-category="item.mainCategory"
+                      placeholder="Subcategory"
+                      @update:model-value="saveWorksheet"
+                    />
+                  </div>
+                </div>
+              </td>
+              <!-- Monthly columns -->
+              <td v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-1 py-1">
+                <input 
+                  type="number" 
+                  :value="item.monthlyValues?.[month.key] || 0"
+                  @input="updateMonthlyValue('expenses', item.id, month.key, $event.target.value)"
+                  class="w-full text-right border-none outline-none bg-transparent"
+                  placeholder="0"
+                />
+              </td>
+            </tr>
+            </template>
+            
+            <!-- Total Expenses Row -->
+            <tr class="bg-red-100 font-bold">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-red-100 z-10">Total Expenses</td>
+              <td v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-2 py-2 text-right">
+                {{ formatCurrency(budgetStore.monthlyTotals[month.key]?.expenses || 0) }}
+              </td>
+            </tr>
+
+            <!-- Net Income Row -->
+            <tr class="bg-green-100 font-bold text-lg">
+              <td class="border border-gray-300 px-3 py-2 sticky left-0 bg-green-100 z-10">Net Income</td>
+              <td v-for="month in monthlyHeaders" :key="month.key" class="border border-gray-300 px-2 py-2 text-right" 
+                  :class="getNetIncomeClass(budgetStore.monthlyTotals[month.key]?.net || 0)">
+                {{ formatCurrency(budgetStore.monthlyTotals[month.key]?.net || 0) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </UCard>
-
-    <!-- Monthly Revenue Table -->
-    <UCard>
-      <template #header>
-        <h3 class="text-lg font-medium">Revenue by Stream</h3>
-      </template>
-      <UTable :rows="revenueStreams" :columns="revenueColumns">
-        <template #name-data="{ row }">
-          <div class="flex items-center gap-2">
-            <span class="font-medium">{{ row.name }}</span>
-            <RestrictionChip :restriction="row.restrictions" size="xs" />
-          </div>
-        </template>
-
-        <template #target-data="{ row }">
-          <span class="font-medium">€{{ row.target.toLocaleString() }}</span>
-        </template>
-
-        <template #committed-data="{ row }">
-          <span class="font-medium text-green-600"
-            >€{{ row.committed.toLocaleString() }}</span
-          >
-        </template>
-
-        <template #actual-data="{ row }">
-          <span
-            class="font-medium"
-            :class="
-              row.actual >= row.committed ? 'text-green-600' : 'text-orange-600'
-            ">
-            €{{ row.actual.toLocaleString() }}
-          </span>
-        </template>
-
-        <template #variance-data="{ row }">
-          <span :class="row.variance >= 0 ? 'text-green-600' : 'text-red-600'">
-            {{ row.variance >= 0 ? "+" : "" }}€{{
-              row.variance.toLocaleString()
-            }}
-          </span>
-        </template>
-      </UTable>
-    </UCard>
-
-    <!-- Costs Breakdown -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-medium">Costs</h3>
-        </template>
-        <div class="space-y-4">
-          <div>
-            <h4 class="font-medium text-sm mb-2">Payroll</h4>
-            <div class="space-y-2">
-              <div class="flex justify-between text-sm">
-                <span class="text-neutral-600"
-                  >Wages ({{ budgetMetrics.totalHours }}h @ €{{
-                    budgetMetrics.hourlyWage
-                  }})</span
-                >
-                <span class="font-medium"
-                  >€{{
-                    Math.round(budgetMetrics.grossWages).toLocaleString()
-                  }}</span
-                >
-              </div>
-              <div class="flex justify-between text-sm">
-                <span class="text-neutral-600"
-                  >On-costs ({{ budgetMetrics.oncostPct }}%)</span
-                >
-                <span class="font-medium"
-                  >€{{
-                    Math.round(budgetMetrics.oncosts).toLocaleString()
-                  }}</span
-                >
-              </div>
-              <div
-                class="flex justify-between text-sm font-medium border-t pt-2">
-                <span>Total Payroll</span>
-                <span
-                  >€{{
-                    Math.round(budgetMetrics.totalPayroll).toLocaleString()
-                  }}</span
-                >
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h4 class="font-medium text-sm mb-2">Overhead</h4>
-            <div class="space-y-2">
-              <div
-                v-if="budgetStore.overheadCosts.length === 0"
-                class="text-sm text-neutral-500 italic">
-                No overhead costs added yet
-              </div>
-              <div
-                v-for="cost in budgetStore.overheadCosts"
-                :key="cost.id"
-                class="flex justify-between text-sm">
-                <span class="text-neutral-600">{{ cost.name }}</span>
-                <span class="font-medium"
-                  >€{{ (cost.amount || 0).toLocaleString() }}</span
-                >
-              </div>
-              <div
-                class="flex justify-between text-sm font-medium border-t pt-2">
-                <span>Total Overhead</span>
-                <span>€{{ budgetMetrics.totalOverhead.toLocaleString() }}</span>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <h4 class="font-medium text-sm mb-2">Production</h4>
-            <div class="space-y-2">
-              <div class="flex justify-between text-sm">
-                <span class="text-neutral-600">Dev kits</span>
-                <span class="font-medium">€500</span>
-              </div>
-              <div
-                class="flex justify-between text-sm font-medium border-t pt-2">
-                <span>Total Production</span>
-                <span>€500</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </UCard>
-
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-medium">Net Impact on Savings</h3>
-        </template>
-        <div class="space-y-4">
-          <div class="space-y-3">
-            <div class="flex justify-between text-sm">
-              <span class="text-neutral-600">Net Revenue</span>
-              <span class="font-medium text-green-600"
-                >€{{ budgetMetrics.netRevenue.toLocaleString() }}</span
-              >
-            </div>
-            <div class="flex justify-between text-sm">
-              <span class="text-neutral-600">Total Costs</span>
-              <span class="font-medium text-red-600"
-                >-€{{
-                  Math.round(budgetMetrics.totalCosts).toLocaleString()
-                }}</span
-              >
-            </div>
-            <div class="flex justify-between text-lg font-bold border-t pt-3">
-              <span>Net</span>
-              <span
-                :class="
-                  budgetMetrics.monthlyNet >= 0
-                    ? 'text-green-600'
-                    : 'text-red-600'
-                "
-                >{{ budgetMetrics.monthlyNet >= 0 ? "+" : "" }}€{{
-                  Math.round(budgetMetrics.monthlyNet).toLocaleString()
-                }}</span
-              >
-            </div>
-          </div>
-
-          <div class="bg-neutral-50 rounded-lg p-4">
-            <h4 class="font-medium text-sm mb-3">Allocation</h4>
-            <div class="space-y-2">
-              <div class="flex justify-between text-sm">
-                <span class="text-neutral-600">To Savings</span>
-                <span class="font-medium"
-                  >€{{
-                    Math.round(budgetMetrics.savingsAmount).toLocaleString()
-                  }}</span
-                >
-              </div>
-              <div class="flex justify-between text-sm">
-                <span class="text-neutral-600">Available</span>
-                <span class="font-medium"
-                  >€{{
-                    Math.round(
-                      budgetMetrics.availableAfterSavings
-                    ).toLocaleString()
-                  }}</span
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="text-xs text-neutral-600 space-y-1">
-            <p>
-              <RestrictionChip restriction="Restricted" size="xs" /> funds can
-              only be used for approved purposes.
-            </p>
-            <p>
-              <RestrictionChip restriction="General" size="xs" /> funds have no
-              restrictions.
-            </p>
-          </div>
-        </div>
-      </UCard>
-    </div>
   </section>
 </template>
 
 <script setup lang="ts">
-// Use real store data
-const membersStore = useMembersStore();
-const policiesStore = usePoliciesStore();
-const streamsStore = useStreamsStore();
+// Import components explicitly
+import BudgetCategorySelector from '~/components/BudgetCategorySelector.vue';
+
+// Use budget worksheet store
 const budgetStore = useBudgetStore();
-const cashStore = useCashStore();
 
-const selectedMonth = ref("2024-01");
-const months = ref([
-  { label: "January 2024", value: "2024-01" },
-  { label: "February 2024", value: "2024-02" },
-  { label: "March 2024", value: "2024-03" },
-]);
-
-// Calculate budget values from real data
-const budgetMetrics = computed(() => {
-  const totalHours = membersStore.capacityTotals.targetHours || 0;
-  const hourlyWage = policiesStore.equalHourlyWage || 0;
-  const oncostPct = policiesStore.payrollOncostPct || 0;
-
-  const grossWages = totalHours * hourlyWage;
-  const oncosts = grossWages * (oncostPct / 100);
-  const totalPayroll = grossWages + oncosts;
-
-  const totalOverhead = budgetStore.overheadCosts.reduce(
-    (sum, cost) => sum + (cost.amount || 0),
-    0
-  );
-  const grossRevenue = streamsStore.totalMonthlyAmount || 0;
-
-  // Calculate fees from streams with platform fees
-  const totalFees = streamsStore.streams.reduce((sum, stream) => {
-    const revenue = stream.targetMonthlyAmount || 0;
-    const platformFee = (stream.platformFeePct || 0) / 100;
-    const revShareFee = (stream.revenueSharePct || 0) / 100;
-    return sum + revenue * platformFee + revenue * revShareFee;
-  }, 0);
-
-  const netRevenue = grossRevenue - totalFees;
-  const totalCosts = totalPayroll + totalOverhead;
-  const monthlyNet = netRevenue - totalCosts;
-  const savingsAmount = Math.max(0, monthlyNet * 0.3); // Save 30% of positive net if possible
-  const availableAfterSavings = Math.max(0, monthlyNet - savingsAmount);
-  const availableForOps = Math.max(
-    0,
-    netRevenue - totalPayroll - totalOverhead - savingsAmount
-  );
-
-  return {
-    grossRevenue,
-    totalFees,
-    netRevenue,
-    totalCosts,
-    monthlyNet,
-    savingsAmount,
-    availableAfterSavings,
-    totalPayroll,
-    grossWages,
-    oncosts,
-    totalOverhead,
-    availableForOps,
-    totalHours,
-    hourlyWage,
-    oncostPct,
-  };
+// Generate monthly headers for the next 12 months
+const monthlyHeaders = computed(() => {
+  const headers = [];
+  const today = new Date();
+  
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+    const monthName = date.toLocaleString('default', { month: 'short' });
+    const year = date.getFullYear();
+    
+    headers.push({
+      key: `${year}-${String(date.getMonth() + 1).padStart(2, '0')}`,
+      label: `${monthName} ${year}`
+    });
+  }
+  
+  return headers;
 });
 
-// Convert streams to budget table format
-const revenueStreams = computed(() =>
-  streamsStore.streams.map((stream) => ({
-    id: stream.id,
-    name: stream.name,
-    target: stream.targetMonthlyAmount || 0,
-    committed: Math.round((stream.targetMonthlyAmount || 0) * 0.8), // 80% committed assumption
-    actual: Math.round((stream.targetMonthlyAmount || 0) * 0.9), // 90% actual assumption
-    variance: Math.round((stream.targetMonthlyAmount || 0) * 0.1), // 10% positive variance
-    restrictions: stream.restrictions || "General",
-  }))
-);
+// Initialize from wizard data on first load
+onMounted(async () => {
+  console.log('Budget page mounted, initializing...');
+  if (!budgetStore.isInitialized) {
+    await budgetStore.initializeFromWizardData();
+  }
+  console.log('Budget worksheet:', budgetStore.budgetWorksheet);
+  console.log('Grouped revenue:', budgetStore.groupedRevenue);
+  console.log('Grouped expenses:', budgetStore.groupedExpenses);
+});
 
-const revenueColumns = [
-  { id: "name", key: "name", label: "Stream" },
-  { id: "target", key: "target", label: "Target" },
-  { id: "committed", key: "committed", label: "Committed" },
-  { id: "actual", key: "actual", label: "Actual" },
-  { id: "variance", key: "variance", label: "Variance" },
-];
+// Budget worksheet functions
+function updateValue(category: string, itemId: string, year: string, scenario: string, value: string) {
+  budgetStore.updateBudgetValue(category, itemId, year, scenario, value);
+}
+
+function updateMonthlyValue(category: string, itemId: string, monthKey: string, value: string) {
+  budgetStore.updateMonthlyValue(category, itemId, monthKey, value);
+}
+
+function addRevenueLine() {
+  console.log('Adding revenue line...');
+  budgetStore.addBudgetItem('revenue', 'New Revenue Item');
+}
+
+function addExpenseLine() {
+  console.log('Adding expense line...');
+  budgetStore.addBudgetItem('expenses', 'New Expense Item');
+}
+
+function removeItem(category: string, itemId: string) {
+  budgetStore.removeBudgetItem(category, itemId);
+}
+
+function saveWorksheet() {
+  // Auto-save is handled by the store persistence
+  console.log('Worksheet saved');
+}
+
+function resetWorksheet() {
+  if (confirm('Are you sure you want to reset all budget data? This cannot be undone.')) {
+    budgetStore.resetBudgetWorksheet();
+    // Force re-initialization
+    budgetStore.isInitialized = false;
+    budgetStore.initializeFromWizardData();
+  }
+}
+
+async function forceReinitialize() {
+  console.log('Force re-initializing budget...');
+  // Clear all persistent data
+  localStorage.removeItem('urgent-tools-budget');
+  localStorage.removeItem('urgent-tools-streams');
+  localStorage.removeItem('urgent-tools-members');
+  localStorage.removeItem('urgent-tools-policies');
+  
+  // Reset the store state completely
+  budgetStore.isInitialized = false;
+  budgetStore.budgetWorksheet.revenue = [];
+  budgetStore.budgetWorksheet.expenses = [];
+  
+  // Reset categories to defaults
+  budgetStore.revenueCategories = [
+    'Games & Products',
+    'Services & Contracts', 
+    'Grants & Funding',
+    'Community Support',
+    'Partnerships',
+    'Investment Income',
+    'In-Kind Contributions'
+  ];
+  
+  budgetStore.expenseCategories = [
+    'Salaries & Benefits',
+    'Development Costs',
+    'Equipment & Technology', 
+    'Marketing & Outreach',
+    'Office & Operations',
+    'Legal & Professional',
+    'Other Expenses'
+  ];
+  
+  // Force re-initialization
+  await budgetStore.initializeFromWizardData();
+  
+  console.log('Re-initialization complete');
+}
+
+function exportBudget() {
+  const data = {
+    worksheet: budgetStore.budgetWorksheet,
+    totals: budgetStore.budgetTotals,
+    exportedAt: new Date().toISOString()
+  };
+  
+  const blob = new Blob([JSON.stringify(data, null, 2)], {
+    type: 'application/json'
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `budget-worksheet-${new Date().toISOString().split('T')[0]}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+// Helper functions
+function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(amount || 0);
+}
+
+function getNetIncomeClass(amount: number): string {
+  if (amount > 0) return 'text-green-600';
+  if (amount < 0) return 'text-red-600';
+  return 'text-gray-600';
+}
+
+// SEO
+useSeoMeta({
+  title: "Budget Worksheet - Plan Your Co-op's Financial Future",
+  description: "Interactive budget planning tool with multiple scenarios and multi-year projections for worker cooperatives.",
+});
 </script>
diff --git a/pages/coach/skills-to-offers.vue b/pages/coach/skills-to-offers.vue
new file mode 100644
index 0000000..d50f9b7
--- /dev/null
+++ b/pages/coach/skills-to-offers.vue
@@ -0,0 +1,684 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 pb-24">
+    <div class="max-w-4xl mx-auto p-6">
+      <!-- Header -->
+      <div class="mb-8">
+        <div class="flex items-start justify-between">
+          <div>
+            <h1 class="text-3xl font-black text-black mb-2">
+              Turn skills into fair, sellable offers
+            </h1>
+            <p class="text-neutral-600">
+              Tell us what you're good at and who you help. We'll suggest offers that match your co-op's shared capacity.
+            </p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button
+              @click="skipCoach"
+              class="px-4 py-2 text-sm bg-neutral-50 border-2 border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-100 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+              :aria-label="'Skip coach and go to streams tab'"
+            >
+              Skip coach → Streams
+            </button>
+            <button
+              @click="loadSampleData"
+              class="px-4 py-2 text-sm bg-blue-50 border-2 border-blue-200 rounded-lg text-blue-700 hover:bg-blue-100 hover:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+              :aria-label="'Load sample data to see example offers'"
+            >
+              <div class="flex items-center gap-2">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                Load sample data
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Section A: Name your strengths -->
+      <section class="mb-8" aria-labelledby="strengths-heading">
+        <div class="flex items-center gap-2 mb-4">
+          <h2 id="strengths-heading" class="text-xl font-bold text-black">
+            A) Name your strengths
+          </h2>
+          <div class="relative group">
+            <button 
+              class="w-4 h-4 text-neutral-400 hover:text-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-full"
+              aria-label="Why limit to 3 skills per member?"
+            >
+              <svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-black text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+              Focus keeps offers shippable
+              <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+            </div>
+          </div>
+        </div>
+        <p class="text-neutral-600 mb-6">
+          Pick what you can reliably do as a team. We'll keep it simple.
+        </p>
+        
+        <div class="space-y-6">
+          <div 
+            v-for="member in members" 
+            :key="member.id"
+            class="p-6 bg-white border-2 border-neutral-200 rounded-xl shadow-sm"
+          >
+            <div class="flex items-center justify-between mb-4">
+              <div>
+                <h3 class="font-bold text-black">{{ member.name }}</h3>
+                <p v-if="member.role" class="text-sm text-neutral-600">{{ member.role }}</p>
+              </div>
+              <div class="text-sm text-neutral-500">
+                {{ getSelectedSkillsCount(member.id) }}/3 skills selected
+              </div>
+            </div>
+            
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-for="skill in availableSkills"
+                :key="skill.id"
+                @click="toggleSkill(member.id, skill.id)"
+                :disabled="!canSelectSkill(member.id, skill.id)"
+                :class="[
+                  'px-3 py-1.5 text-sm rounded-full border-2 transition-all duration-200',
+                  'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                  isSkillSelected(member.id, skill.id)
+                    ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700'
+                    : canSelectSkill(member.id, skill.id)
+                    ? 'bg-white text-neutral-700 border-neutral-300 hover:border-blue-400 hover:text-blue-600'
+                    : 'bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed'
+                ]"
+                :aria-pressed="isSkillSelected(member.id, skill.id)"
+                :aria-label="`${isSkillSelected(member.id, skill.id) ? 'Remove' : 'Add'} ${skill.label} skill for ${member.name}`"
+              >
+                {{ skill.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section B: Who do you help? -->
+      <section class="mb-8" aria-labelledby="problems-heading">
+        <div class="flex items-center gap-2 mb-4">
+          <h2 id="problems-heading" class="text-xl font-bold text-black">
+            B) Who do you help?
+          </h2>
+          <div class="relative group">
+            <button 
+              class="w-4 h-4 text-neutral-400 hover:text-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-full"
+              aria-label="Why limit to 2 problem types?"
+            >
+              <svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-black text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+              Focus keeps offers shippable
+              <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+            </div>
+          </div>
+        </div>
+        <p class="text-neutral-600 mb-6">
+          Choose the problems you can solve this month. We'll suggest time-boxed offers.
+        </p>
+        
+        <div class="flex flex-wrap gap-3">
+          <div 
+            v-for="problem in availableProblems" 
+            :key="problem.id"
+            class="relative"
+          >
+            <button
+              @click="toggleProblem(problem.id)"
+              :disabled="!canSelectProblem(problem.id)"
+              :class="[
+                'px-4 py-2 text-sm rounded-lg border-2 transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                isProblemSelected(problem.id)
+                  ? 'bg-green-600 text-white border-green-600 hover:bg-green-700'
+                  : canSelectProblem(problem.id)
+                  ? 'bg-white text-neutral-700 border-neutral-300 hover:border-green-400 hover:text-green-600'
+                  : 'bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed'
+              ]"
+              :aria-pressed="isProblemSelected(problem.id)"
+              :aria-label="`${isProblemSelected(problem.id) ? 'Remove' : 'Add'} ${problem.label} problem type`"
+            >
+              {{ problem.label }}
+            </button>
+            
+            <!-- Examples popover trigger -->
+            <button
+              @click="toggleExamples(problem.id)"
+              @keydown.escape="hideExamples"
+              class="ml-1 text-xs text-neutral-500 hover:text-neutral-700 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
+              :aria-label="`See examples for ${problem.label}`"
+              :aria-expanded="showExamples === problem.id"
+            >
+              see examples
+            </button>
+            
+            <!-- Examples popover -->
+            <div
+              v-if="showExamples === problem.id"
+              class="absolute z-10 mt-2 p-3 bg-white border-2 border-neutral-200 rounded-lg shadow-lg min-w-64 max-w-sm"
+              role="tooltip"
+              :aria-label="`Examples for ${problem.label}`"
+            >
+              <div class="text-sm">
+                <p class="font-medium text-black mb-2">Examples:</p>
+                <ul class="space-y-1 text-neutral-700">
+                  <li v-for="example in problem.examples" :key="example" class="flex items-start">
+                    <span class="text-neutral-400 mr-2">•</span>
+                    <span>{{ example }}</span>
+                  </li>
+                </ul>
+              </div>
+              <button
+                @click="hideExamples"
+                class="mt-2 text-xs text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
+                aria-label="Close examples"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <div class="mt-4 text-sm text-neutral-500">
+          {{ selectedProblems.length }}/2 problem types selected
+        </div>
+      </section>
+
+      <!-- Section C: Suggested offers -->
+      <section class="mb-8" aria-labelledby="offers-heading">
+        <h2 id="offers-heading" class="text-xl font-bold text-black mb-4">
+          C) Suggested offers
+        </h2>
+        
+        <!-- Loading state -->
+        <div 
+          v-if="loading"
+          class="text-center py-12 bg-white border-2 border-dashed border-blue-200 rounded-xl"
+        >
+          <div class="max-w-md mx-auto">
+            <div class="w-16 h-16 mx-auto mb-4 bg-blue-50 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            <h3 class="font-medium text-blue-900 mb-2">Generating offers...</h3>
+            <p class="text-blue-700">
+              Creating personalized revenue suggestions based on your selections.
+            </p>
+          </div>
+        </div>
+
+        <!-- Empty state -->
+        <div 
+          v-else-if="suggestedOffers.length === 0"
+          class="text-center py-12 bg-white border-2 border-dashed border-neutral-300 rounded-xl"
+        >
+          <div class="max-w-md mx-auto">
+            <div class="w-16 h-16 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+              </svg>
+            </div>
+            <h3 class="font-medium text-neutral-900 mb-2">No offers yet</h3>
+            <p class="text-neutral-600 mb-4">
+              Pick a few skills and a problem—we'll suggest something you can sell this month.
+            </p>
+            <p class="text-sm text-neutral-500">
+              We need at least one shared skill and one problem type to suggest offers.
+            </p>
+          </div>
+        </div>
+        
+        <!-- Offer cards -->
+        <div v-else class="grid gap-6 md:grid-cols-2">
+          <div
+            v-for="offer in suggestedOffers"
+            :key="offer.id"
+            class="p-6 bg-white border-2 border-neutral-200 rounded-xl shadow-sm hover:shadow-md transition-shadow"
+            role="article"
+            :aria-label="`Offer: ${offer.name}`"
+          >
+            <h3 class="font-bold text-black mb-3">{{ offer.name }}</h3>
+            
+            <!-- Offer chips -->
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-green-50 text-green-700 border border-green-200 rounded-full">
+                Covers ~{{ calculateMonthlyCoverage(offer) }}% of monthly needs at baseline
+              </span>
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 rounded-full">
+                Typical payout: {{ getPayoutDaysRange(offer) }}
+              </span>
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-purple-50 text-purple-700 border border-purple-200 rounded-full">
+                Why this
+              </span>
+            </div>
+            
+            <!-- Scope -->
+            <div class="mb-4">
+              <p class="text-sm font-medium text-neutral-700 mb-2">Scope:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="item in offer.scope" 
+                  :key="item"
+                  class="text-sm text-neutral-600 flex items-start"
+                >
+                  <span class="text-neutral-400 mr-2">•</span>
+                  <span>{{ item }}</span>
+                </li>
+              </ul>
+            </div>
+            
+            <!-- Price range -->
+            <div class="mb-4 p-3 bg-neutral-50 rounded-lg">
+              <div class="flex justify-between items-center mb-1">
+                <span class="text-sm font-medium text-neutral-700">Baseline:</span>
+                <span class="font-bold text-black">${{ offer.price.baseline.toLocaleString() }}</span>
+              </div>
+              <div class="flex justify-between items-center mb-2">
+                <span class="text-sm font-medium text-neutral-700">Stretch:</span>
+                <span class="font-bold text-green-600">${{ offer.price.stretch.toLocaleString() }}</span>
+              </div>
+              <p class="text-xs text-neutral-500">{{ offer.price.calcNote }}</p>
+            </div>
+            
+            <!-- Payout delay -->
+            <div class="mb-4 flex items-center justify-between text-sm">
+              <span class="text-neutral-600">Payment timing:</span>
+              <span class="font-medium text-black">{{ offer.payoutDelayDays }} days</span>
+            </div>
+            
+            <!-- Why this works -->
+            <div class="mb-4">
+              <p class="text-sm font-medium text-neutral-700 mb-2">Why this works for your co-op:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="reason in offer.whyThis" 
+                  :key="reason"
+                  class="text-sm text-neutral-600 flex items-start"
+                >
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span>{{ updateLanguageToCoopTerms(reason) }}</span>
+                </li>
+              </ul>
+            </div>
+            
+            <!-- Risk notes (if any) -->
+            <div v-if="offer.riskNotes.length > 0" class="border-t border-neutral-200 pt-3">
+              <p class="text-sm font-medium text-amber-700 mb-2">Consider:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="risk in offer.riskNotes" 
+                  :key="risk"
+                  class="text-sm text-amber-600 flex items-start"
+                >
+                  <span class="text-amber-500 mr-2">⚠</span>
+                  <span>{{ risk }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- Sticky Footer -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-neutral-200 shadow-lg">
+      <div class="max-w-4xl mx-auto p-4">
+        <div class="flex items-center justify-between">
+          <button
+            @click="goBack"
+            class="px-4 py-2 text-neutral-700 hover:text-black focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-lg transition-colors"
+            aria-label="Go back to previous page"
+          >
+            ← Back
+          </button>
+          
+          <div class="flex items-center gap-3">
+            <button
+              @click="regenerateOffers"
+              :disabled="!canRegenerate"
+              :class="[
+                'px-4 py-2 rounded-lg border-2 transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                canRegenerate
+                  ? 'border-neutral-300 text-neutral-700 hover:border-blue-400 hover:text-blue-600'
+                  : 'border-neutral-200 text-neutral-400 cursor-not-allowed'
+              ]"
+              :aria-label="canRegenerate ? 'Regenerate offers with current selections' : 'Cannot regenerate - select skills and problems first'"
+            >
+              🔄 Regenerate
+            </button>
+            
+            <button
+              @click="useOffers"
+              :disabled="suggestedOffers.length === 0"
+              :class="[
+                'px-6 py-2 rounded-lg font-medium transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                suggestedOffers.length > 0
+                  ? 'bg-blue-600 text-white hover:bg-blue-700'
+                  : 'bg-neutral-200 text-neutral-400 cursor-not-allowed'
+              ]"
+              :aria-label="suggestedOffers.length > 0 ? 'Add these offers to cover co-op needs' : 'No offers to use - generate offers first'"
+            >
+              Add to plan
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Member, SkillTag, ProblemTag, Offer } from "~/types/coaching";
+import { useDebounceFn } from "@vueuse/core";
+import { 
+  membersSample, 
+  skillsCatalogSample, 
+  problemsCatalogSample, 
+  sampleSelections 
+} from "~/sample/skillsToOffersSamples";
+
+// Store integration
+const planStore = usePlanStore();
+
+// Initialize with default data
+const members = ref<Member[]>([
+  { id: "1", name: "Alex Chen", role: "Game Designer", hourly: 75, availableHrs: 30 },
+  { id: "2", name: "Jordan Smith", role: "Developer", hourly: 80, availableHrs: 35 },
+  { id: "3", name: "Sam Rodriguez", role: "Artist", hourly: 70, availableHrs: 25 }
+]);
+
+const availableSkills = ref<SkillTag[]>([
+  { id: "unity", label: "Unity Development" },
+  { id: "art", label: "2D/3D Art" },
+  { id: "design", label: "Game Design" },
+  { id: "audio", label: "Audio Design" },
+  { id: "writing", label: "Narrative Writing" },
+  { id: "marketing", label: "Marketing" },
+  { id: "business", label: "Business Strategy" },
+  { id: "web", label: "Web Development" },
+  { id: "mobile", label: "Mobile Development" },
+  { id: "consulting", label: "Technical Consulting" }
+]);
+
+const availableProblems = ref<ProblemTag[]>([
+  { 
+    id: "indie-games", 
+    label: "Indie game development", 
+    examples: [
+      "Small studios needing extra development capacity",
+      "Solo developers wanting art/audio support",
+      "Teams needing game design consultation"
+    ]
+  },
+  { 
+    id: "corporate-training", 
+    label: "Corporate training games", 
+    examples: [
+      "Companies wanting engaging employee training",
+      "HR departments needing onboarding tools",
+      "Safety training for industrial workers"
+    ]
+  },
+  { 
+    id: "educational", 
+    label: "Educational technology", 
+    examples: [
+      "Schools needing interactive learning tools",
+      "Universities wanting research simulations",
+      "Non-profits creating awareness campaigns"
+    ]
+  },
+  { 
+    id: "prototypes", 
+    label: "Rapid prototyping", 
+    examples: [
+      "Startups validating game concepts",
+      "Publishers testing market fit",
+      "Researchers creating proof-of-concepts"
+    ]
+  }
+]);
+
+// Set members in store on component mount
+onMounted(() => {
+  planStore.setMembers(members.value);
+});
+
+// Reactive state
+const selectedSkills = ref<Record<string, string[]>>({});
+const selectedProblems = ref<string[]>([]);
+const showExamples = ref<string | null>(null);
+const offers = ref<Offer[] | null>(null);
+const loading = ref(false);
+
+// Use offer suggestor composable
+const { suggestOffers } = useOfferSuggestor();
+
+// Catalogs for the suggestor
+const catalogs = computed(() => ({
+  skills: availableSkills.value,
+  problems: availableProblems.value
+}));
+
+// Computed for suggested offers (for backward compatibility)
+const suggestedOffers = computed(() => offers.value || []);
+
+// Helper functions for offer chips
+function calculateMonthlyCoverage(offer: Offer): number {
+  // Estimate monthly burn (simplified calculation)
+  const totalMemberHours = members.value.reduce((sum, m) => sum + m.availableHrs, 0);
+  const avgHourlyRate = members.value.reduce((sum, m) => sum + m.hourly, 0) / members.value.length;
+  const estimatedMonthlyBurn = totalMemberHours * avgHourlyRate * 1.25; // Add on-costs
+  
+  return Math.round((offer.price.baseline / estimatedMonthlyBurn) * 100);
+}
+
+function getPayoutDaysRange(offer: Offer): string {
+  const days = offer.payoutDelayDays;
+  if (days <= 15) return "0–15 days";
+  if (days <= 30) return "15–30 days";
+  if (days <= 45) return "30–45 days";
+  return `${days} days`;
+}
+
+function updateLanguageToCoopTerms(text: string): string {
+  return text
+    .replace(/maximize|maximiz/gi, 'cover needs with')
+    .replace(/optimize|optimiz/gi, 'improve')
+    .replace(/competitive advantage/gi, 'shared capacity')
+    .replace(/market position/gi, 'community standing')
+    .replace(/profit/gi, 'surplus')
+    .replace(/revenue growth/gi, 'sustainable income')
+    .replace(/scale/gi, 'grow together')
+    .replace(/efficiency gains/gi, 'reduce risk')
+    .replace(/leverages/gi, 'uses')
+    .replace(/expertise/gi, 'shared skills')
+    .replace(/builds reputation/gi, 'builds trust in community')
+    .replace(/high-impact/gi, 'meaningful')
+    .replace(/productivity/gi, 'shared capacity');
+}
+
+// Sample data loading
+function loadSampleData() {
+  // Replace data with samples
+  members.value = [...membersSample];
+  availableSkills.value = [...skillsCatalogSample];
+  availableProblems.value = [...problemsCatalogSample];
+  
+  // Set pre-selected skills and problems
+  selectedSkills.value = { ...sampleSelections.selectedSkillsByMember };
+  selectedProblems.value = [...sampleSelections.selectedProblems];
+  
+  // Update store with new members
+  planStore.setMembers(members.value);
+  
+  // Trigger offer generation immediately
+  nextTick(() => {
+    debouncedGenerateOffers();
+  });
+}
+
+// Debounced offer generation
+const debouncedGenerateOffers = useDebounceFn(async () => {
+  const hasSkills = Object.values(selectedSkills.value).some(skills => skills.length > 0);
+  const hasProblems = selectedProblems.value.length > 0;
+  
+  if (!hasSkills || !hasProblems) {
+    offers.value = null;
+    return;
+  }
+  
+  loading.value = true;
+  
+  try {
+    const input = {
+      members: members.value,
+      selectedSkillsByMember: selectedSkills.value,
+      selectedProblems: selectedProblems.value
+    };
+    
+    const suggestedOffers = suggestOffers(input, catalogs.value);
+    offers.value = suggestedOffers;
+  } catch (error) {
+    console.error('Failed to generate offers:', error);
+    offers.value = null;
+  } finally {
+    loading.value = false;
+  }
+}, 300);
+
+// Skill management
+function toggleSkill(memberId: string, skillId: string) {
+  if (!selectedSkills.value[memberId]) {
+    selectedSkills.value[memberId] = [];
+  }
+  
+  const memberSkills = selectedSkills.value[memberId];
+  const index = memberSkills.indexOf(skillId);
+  
+  if (index >= 0) {
+    memberSkills.splice(index, 1);
+  } else {
+    memberSkills.push(skillId);
+  }
+  
+  debouncedGenerateOffers();
+}
+
+function isSkillSelected(memberId: string, skillId: string): boolean {
+  return selectedSkills.value[memberId]?.includes(skillId) || false;
+}
+
+function canSelectSkill(memberId: string, skillId: string): boolean {
+  if (isSkillSelected(memberId, skillId)) return true;
+  return getSelectedSkillsCount(memberId) < 3;
+}
+
+function getSelectedSkillsCount(memberId: string): number {
+  return selectedSkills.value[memberId]?.length || 0;
+}
+
+// Problem management
+function toggleProblem(problemId: string) {
+  const index = selectedProblems.value.indexOf(problemId);
+  if (index >= 0) {
+    selectedProblems.value.splice(index, 1);
+  } else {
+    selectedProblems.value.push(problemId);
+  }
+  debouncedGenerateOffers();
+}
+
+function isProblemSelected(problemId: string): boolean {
+  return selectedProblems.value.includes(problemId);
+}
+
+function canSelectProblem(problemId: string): boolean {
+  if (isProblemSelected(problemId)) return true;
+  return selectedProblems.value.length < 2;
+}
+
+// Examples popover
+function toggleExamples(problemId: string) {
+  showExamples.value = showExamples.value === problemId ? null : problemId;
+}
+
+function hideExamples() {
+  showExamples.value = null;
+}
+
+
+// Footer actions
+const canRegenerate = computed(() => {
+  const hasSkills = Object.values(selectedSkills.value).some(skills => skills.length > 0);
+  const hasProblems = selectedProblems.value.length > 0;
+  return hasSkills && hasProblems;
+});
+
+function goBack() {
+  // Navigate back - would typically use router
+  window.history.back();
+}
+
+function regenerateOffers() {
+  if (canRegenerate.value) {
+    // Re-call suggestOffers with same inputs
+    debouncedGenerateOffers();
+  }
+}
+
+function useOffers() {
+  if (offers.value && offers.value.length > 0) {
+    // Add offers to plan store as streams
+    planStore.addStreamsFromOffers(offers.value);
+    
+    // Navigate back to wizard with success message
+    const router = useRouter();
+    
+    // Show success notification
+    console.log(`Added ${offers.value.length} offers as revenue streams to your plan.`);
+    
+    // Navigate to wizard revenue step - adjust path as needed for your routing
+    router.push('/wizards'); // This would need to be the correct wizard path
+    
+    // Note: The Streams tab activation would be handled by the wizard component
+    // when it detects new streams in the store
+  }
+}
+
+function skipCoach() {
+  // Navigate directly to wizard streams without adding offers
+  const router = useRouter();
+  router.push('/wizards'); // Navigate to wizard - streams tab would be activated there
+}
+
+// Close examples on click outside
+onMounted(() => {
+  const handleClickOutside = (event: Event) => {
+    const target = event.target as HTMLElement;
+    if (!target.closest('[role="tooltip"]') && !target.closest('button[aria-expanded]')) {
+      showExamples.value = null;
+    }
+  };
+  
+  document.addEventListener('click', handleClickOutside);
+  
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+});
+</script>
\ No newline at end of file
diff --git a/pages/coop-builder.vue b/pages/coop-builder.vue
new file mode 100644
index 0000000..98975a4
--- /dev/null
+++ b/pages/coop-builder.vue
@@ -0,0 +1,468 @@
+<template>
+  <div>
+    <!-- No WizardSubnav for co-op setup tool -->
+
+    <section class="py-8 max-w-4xl mx-auto font-mono">
+      <!-- Header -->
+      <div class="mb-10 text-center">
+        <h1
+          class="text-3xl font-black text-black dark:text-white mb-4 leading-tight uppercase tracking-wide border-t-2 border-b-2 border-black dark:border-white py-4"
+        >
+          Co-op Builder
+        </h1>
+      </div>
+
+      <!-- Completed State -->
+      <div v-if="isCompleted" class="text-center py-12 relative">
+        <!-- Dithered shadow background -->
+        <div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+        <div
+          class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8"
+        >
+          <div
+            class="w-16 h-16 bg-black dark:bg-white border-2 border-black dark:border-white flex items-center justify-center mx-auto mb-4"
+          >
+            <UIcon name="i-heroicons-check" class="w-8 h-8 text-white dark:text-black" />
+          </div>
+          <h2
+            class="text-2xl font-bold text-black dark:text-white mb-2 uppercase tracking-wide"
+          >
+            You're all set!
+          </h2>
+          <p class="text-neutral-600 dark:text-neutral-400 mb-6">
+            Your co-op is configured and ready to go.
+          </p>
+
+          <div class="flex justify-center gap-4">
+            <button class="export-btn" @click="restartWizard" :disabled="isResetting">
+              Start Over
+            </button>
+            <button class="export-btn primary" @click="navigateTo('/budget')">
+              Go to Dashboard
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Vertical Steps Layout -->
+      <div v-else class="space-y-4">
+        <!-- Step 1: Members -->
+        <div class="relative">
+          <!-- Dithered shadow for selected state -->
+          <div
+            v-if="focusedStep === 1"
+            class="absolute top-2 left-2 w-full h-full dither-shadow"
+          ></div>
+
+          <div
+            :class="[
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
+              focusedStep === 1 ? 'item-selected' : '',
+            ]"
+          >
+            <div
+              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              @click="setFocusedStep(1)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div
+                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
+                    :class="
+                      membersStore.isValid
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
+                    "
+                  >
+                    <UIcon
+                      v-if="membersStore.isValid"
+                      name="i-heroicons-check"
+                      class="w-4 h-4"
+                    />
+                    <span v-else>1</span>
+                  </div>
+                  <div>
+                    <h3
+                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide"
+                    >
+                      Add your team
+                    </h3>
+                  </div>
+                </div>
+                <UIcon
+                  name="i-heroicons-chevron-down"
+                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
+                  :class="{ 'rotate-180': focusedStep === 1 }"
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="focusedStep === 1"
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white"
+            >
+              <WizardMembersStep @save-status="handleSaveStatus" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 2: Wage -->
+        <div class="relative">
+          <!-- Dithered shadow for selected state -->
+          <div
+            v-if="focusedStep === 2"
+            class="absolute top-2 left-2 w-full h-full dither-shadow"
+          ></div>
+
+          <div
+            :class="[
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
+              focusedStep === 2 ? 'item-selected' : '',
+            ]"
+          >
+            <div
+              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              @click="setFocusedStep(2)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div
+                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
+                    :class="
+                      policiesStore.isValid
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
+                    "
+                  >
+                    <UIcon
+                      v-if="policiesStore.isValid"
+                      name="i-heroicons-check"
+                      class="w-4 h-4"
+                    />
+                    <span v-else>2</span>
+                  </div>
+                  <div>
+                    <h3
+                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide"
+                    >
+                      Set your wage
+                    </h3>
+                  </div>
+                </div>
+                <UIcon
+                  name="i-heroicons-chevron-down"
+                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
+                  :class="{ 'rotate-180': focusedStep === 2 }"
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="focusedStep === 2"
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white"
+            >
+              <WizardPoliciesStep @save-status="handleSaveStatus" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3: Costs -->
+        <div class="relative">
+          <!-- Dithered shadow for selected state -->
+          <div
+            v-if="focusedStep === 3"
+            class="absolute top-2 left-2 w-full h-full dither-shadow"
+          ></div>
+
+          <div
+            :class="[
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
+              focusedStep === 3 ? 'item-selected' : '',
+            ]"
+          >
+            <div
+              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              @click="setFocusedStep(3)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div
+                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2 bg-black dark:bg-white text-white dark:text-black border-black dark:border-white"
+                  >
+                    <UIcon name="i-heroicons-check" class="w-4 h-4" />
+                  </div>
+                  <div>
+                    <h3
+                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide"
+                    >
+                      Monthly costs
+                    </h3>
+                  </div>
+                </div>
+                <UIcon
+                  name="i-heroicons-chevron-down"
+                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
+                  :class="{ 'rotate-180': focusedStep === 3 }"
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="focusedStep === 3"
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white"
+            >
+              <WizardCostsStep @save-status="handleSaveStatus" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 4: Revenue -->
+        <div class="relative">
+          <!-- Dithered shadow for selected state -->
+          <div
+            v-if="focusedStep === 4"
+            class="absolute top-2 left-2 w-full h-full dither-shadow"
+          ></div>
+
+          <div
+            :class="[
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
+              focusedStep === 4 ? 'item-selected' : '',
+            ]"
+          >
+            <div
+              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              @click="setFocusedStep(4)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div
+                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
+                    :class="
+                      streamsStore.hasValidStreams
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
+                    "
+                  >
+                    <UIcon
+                      v-if="streamsStore.hasValidStreams"
+                      name="i-heroicons-check"
+                      class="w-4 h-4"
+                    />
+                    <span v-else>4</span>
+                  </div>
+                  <div>
+                    <h3
+                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide"
+                    >
+                      Revenue streams
+                    </h3>
+                  </div>
+                </div>
+                <UIcon
+                  name="i-heroicons-chevron-down"
+                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
+                  :class="{ 'rotate-180': focusedStep === 4 }"
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="focusedStep === 4"
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white"
+            >
+              <WizardRevenueStep @save-status="handleSaveStatus" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 5: Review -->
+        <div class="relative">
+          <!-- Dithered shadow for selected state -->
+          <div
+            v-if="focusedStep === 5"
+            class="absolute top-2 left-2 w-full h-full dither-shadow"
+          ></div>
+
+          <div
+            :class="[
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
+              focusedStep === 5 ? 'item-selected' : '',
+            ]"
+          >
+            <div
+              class="p-8 cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+              @click="setFocusedStep(5)"
+            >
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div
+                    class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
+                    :class="
+                      canComplete
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
+                    "
+                  >
+                    <UIcon v-if="canComplete" name="i-heroicons-check" class="w-4 h-4" />
+                    <span v-else>5</span>
+                  </div>
+                  <div>
+                    <h3
+                      class="text-2xl font-black text-black dark:text-white uppercase tracking-wide"
+                    >
+                      Review & finish
+                    </h3>
+                  </div>
+                </div>
+                <UIcon
+                  name="i-heroicons-chevron-down"
+                  class="w-6 h-6 text-black dark:text-white transition-transform font-bold"
+                  :class="{ 'rotate-180': focusedStep === 5 }"
+                />
+              </div>
+            </div>
+
+            <div
+              v-if="focusedStep === 5"
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white"
+            >
+              <WizardReviewStep @complete="completeWizard" @reset="resetWizard" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Progress Actions -->
+        <div class="flex justify-between items-center pt-8">
+          <button class="export-btn" @click="resetWizard" :disabled="isResetting">
+            Start Over
+          </button>
+
+          <div class="flex items-center gap-4">
+            <!-- Save status -->
+            <div
+              class="flex items-center gap-2 text-sm font-mono uppercase tracking-wide"
+            >
+              <UIcon
+                v-if="saveStatus === 'saving'"
+                name="i-heroicons-arrow-path"
+                class="w-4 h-4 animate-spin text-neutral-500 dark:text-neutral-400"
+              />
+              <UIcon
+                v-if="saveStatus === 'saved'"
+                name="i-heroicons-check-circle"
+                class="w-4 h-4 text-black dark:text-white"
+              />
+              <span
+                v-if="saveStatus === 'saving'"
+                class="text-neutral-500 dark:text-neutral-400"
+                >Saving...</span
+              >
+              <span v-if="saveStatus === 'saved'" class="text-black dark:text-white"
+                >Saved</span
+              >
+            </div>
+
+            <button v-if="canComplete" class="export-btn primary" @click="completeWizard">
+              Complete Setup
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Stores
+const membersStore = useMembersStore();
+const policiesStore = usePoliciesStore();
+const streamsStore = useStreamsStore();
+const budgetStore = useBudgetStore();
+const coopBuilderStore = useCoopBuilderStore();
+
+// UI state
+const focusedStep = ref(1);
+const saveStatus = ref("");
+const isResetting = ref(false);
+const isCompleted = ref(false);
+
+// Computed validation
+const canComplete = computed(
+  () => membersStore.isValid && policiesStore.isValid && streamsStore.hasValidStreams
+);
+
+// Save status handler
+function handleSaveStatus(status: "saving" | "saved" | "error") {
+  saveStatus.value = status;
+  if (status === "saved") {
+    // Clear status after delay
+    setTimeout(() => {
+      if (saveStatus.value === "saved") {
+        saveStatus.value = "";
+      }
+    }, 2000);
+  }
+}
+
+// Step management
+function setFocusedStep(step: number) {
+  // Toggle if clicking on already focused step
+  if (focusedStep.value === step) {
+    focusedStep.value = 0; // Close the section
+  } else {
+    focusedStep.value = step; // Open the section
+  }
+}
+
+function completeWizard() {
+  // Mark setup as complete and show restart button for testing
+  isCompleted.value = true;
+}
+
+async function resetWizard() {
+  isResetting.value = true;
+
+  // Reset all stores
+  membersStore.resetMembers();
+  policiesStore.resetPolicies();
+  streamsStore.resetStreams();
+  budgetStore.resetBudgetOverhead();
+
+  // Reset coop builder state
+  coopBuilderStore.reset();
+  saveStatus.value = "";
+
+  // Small delay for UX
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  isResetting.value = false;
+}
+
+async function restartWizard() {
+  isResetting.value = true;
+
+  // Reset completion state
+  isCompleted.value = false;
+  focusedStep.value = 1;
+
+  // Reset all stores and coop builder state
+  membersStore.resetMembers();
+  policiesStore.resetPolicies();
+  streamsStore.resetStreams();
+  budgetStore.resetBudgetOverhead();
+  coopBuilderStore.reset();
+  saveStatus.value = "";
+
+  // Small delay for UX
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  isResetting.value = false;
+}
+
+// SEO
+useSeoMeta({
+  title: "Co-op Builder - Build Your Financial Foundation",
+  description:
+    "Build your co-op's financial foundation: set up members, policies, costs, and revenue streams.",
+});
+</script>
diff --git a/pages/coop-planner.vue b/pages/coop-planner.vue
index 0fe9eaf..b74822e 100644
--- a/pages/coop-planner.vue
+++ b/pages/coop-planner.vue
@@ -1,8 +1,8 @@
 <template>
-  <WizardPage />
+  <CoopBuilderPage />
 </template>
 
 <script setup lang="ts">
-// Reuse the existing wizard content by importing it as a component
-import WizardPage from "~/pages/wizard.vue";
+// Reuse the existing coop builder content by importing it as a component
+import CoopBuilderPage from "~/pages/coop-builder.vue";
 </script>
diff --git a/pages/scenarios.vue b/pages/scenarios.vue
index 6e5ad9b..8ff5c01 100644
--- a/pages/scenarios.vue
+++ b/pages/scenarios.vue
@@ -344,7 +344,7 @@ const streamsStore = useStreamsStore();
 const budgetStore = useBudgetStore();
 const cashStore = useCashStore();
 const sessionStore = useSessionStore();
-const wizardStore = useWizardStore();
+const coopBuilderStore = useCoopBuilderStore();
 
 const isResetting = ref(false);
 
@@ -556,7 +556,7 @@ async function restartWizard() {
   sessionStore.resetSession();
 
   // Reset wizard state
-  wizardStore.reset();
+  coopBuilderStore.reset();
 
   // Small delay for UX
   await new Promise((resolve) => setTimeout(resolve, 300));
diff --git a/pages/templates/conflict-resolution-framework.vue b/pages/templates/conflict-resolution-framework.vue
index 450dc98..a6bff90 100644
--- a/pages/templates/conflict-resolution-framework.vue
+++ b/pages/templates/conflict-resolution-framework.vue
@@ -1,19 +1,14 @@
 <template>
   <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
     <!-- Export Options - Top -->
 
     <ExportOptions
       :export-data="exportData"
       filename="conflict-resolution-framework"
-      title="Conflict Resolution Framework"
-    />
+      title="Conflict Resolution" />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
-    >
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -21,9 +16,8 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase m-0 py-4 border-t-2 border-b-2 text-black dark:text-white border-black dark:border-white"
-              :data-org-name="formData.orgName || 'Organization'"
-            >
-              CONFLICT RESOLUTION FRAMEWORK
+              :data-org-name="formData.orgName || 'Organization'">
+              CONFLICT RESOLUTION
             </h1>
           </div>
 
@@ -39,8 +33,7 @@
                   size="xl"
                   class="w-full"
                   :error="validationErrors.orgName"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
               <div class="flex flex-row gap-4 space-x-4">
                 <UFormField label="Organization Type" class="form-group-large">
@@ -51,11 +44,12 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.orgType"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
-                <UFormField label="Number of Members/Staff" class="form-group-large">
+                <UFormField
+                  label="Number of Members/Staff"
+                  class="form-group-large">
                   <UInput
                     v-model="formData.memberCount"
                     type="number"
@@ -63,8 +57,7 @@
                     placeholder="e.g., 5"
                     size="xl"
                     :error="validationErrors.memberCount"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
             </div>
@@ -81,44 +74,51 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.values">
               <UFormField
                 label="Select Core Values (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="values-grid">
                   <div
                     v-for="(value, index) in coreValues"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="value.checked"
-                      :id="`core-value-${index}`"
-                      :label="value.label"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="value.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        value.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="value.checked"
+                        :id="`core-value-${index}`"
+                        :label="value.label"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
               </UFormField>
 
               <UFormField
                 label="Additional Values or Principles"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.customValues"
                   :rows="3"
                   placeholder="Add any additional values specific to your organization..."
                   size="xl"
                   class="w-full"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
@@ -134,14 +134,25 @@
               <div
                 v-for="(conflict, index) in conflictTypes"
                 :key="index"
-                class="checkbox-item"
-              >
-                <UCheckbox
-                  v-model="conflict.checked"
-                  :id="`conflict-type-${index}`"
-                  :label="conflict.label"
-                  @change="autoSave"
-                />
+                class="relative">
+                <!-- Dithered shadow for selected items -->
+                <div
+                  v-if="conflict.checked"
+                  class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                <div
+                  :class="[
+                    'checkbox-item p-3 border border-black dark:border-white transition-all',
+                    conflict.checked
+                      ? 'item-selected bg-white dark:bg-neutral-950'
+                      : 'bg-transparent',
+                  ]">
+                  <UCheckbox
+                    v-model="conflict.checked"
+                    :id="`conflict-type-${index}`"
+                    :label="conflict.label"
+                    @change="autoSave" />
+                </div>
               </div>
             </div>
             <div v-if="validationErrors.conflictTypes" class="validation-error">
@@ -154,14 +165,14 @@
             <h2 class="section-title">4. Primary Resolution Approach</h2>
 
             <div class="space-y-6">
-              <UFormField label="Choose your primary conflict resolution philosophy:">
+              <UFormField
+                label="Choose your primary conflict resolution philosophy:">
                 <URadioGroup
                   v-model="formData.approach"
                   :items="approachOptions"
                   variant="card"
                   size="lg"
-                  class="mt-2"
-                />
+                  class="mt-2" />
                 <div v-if="validationErrors.approach" class="validation-error">
                   {{ validationErrors.approach }}
                 </div>
@@ -173,8 +184,7 @@
                   id="anonymous-reporting"
                   label="Allow anonymous reporting"
                   help="Members can report issues without revealing their identity"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -186,36 +196,49 @@
             <div class="space-y-6">
               <UFormField
                 label="Who can receive initial conflict reports? (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group space-y-2 mt-4">
                   <div
                     v-for="(receiver, index) in reportReceivers"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="receiver.checked"
-                      :id="`report-receiver-${index}`"
-                      :label="receiver.label"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="receiver.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        receiver.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="receiver.checked"
+                        :id="`report-receiver-${index}`"
+                        :label="receiver.label"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
-                <div v-if="validationErrors.reportReceivers" class="validation-error">
+                <div
+                  v-if="validationErrors.reportReceivers"
+                  class="validation-error">
                   {{ validationErrors.reportReceivers }}
                 </div>
               </UFormField>
 
-              <UFormField label="Mediator/Facilitator Structure" class="form-group-large">
+              <UFormField
+                label="Mediator/Facilitator Structure"
+                class="form-group-large">
                 <USelect
                   v-model="formData.mediatorType"
                   :items="mediatorTypeOptions"
                   placeholder="Select mediator structure..."
                   size="xl"
                   :error="validationErrors.mediatorType"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField class="form-group-large">
@@ -224,8 +247,7 @@
                   id="support-people"
                   label="Allow support people in mediation sessions"
                   help="Parties can bring a trusted person for emotional support"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -236,7 +258,9 @@
 
             <div class="space-y-6">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormField label="Initial Response Time" class="form-group-large">
+                <UFormField
+                  label="Initial Response Time"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.initialResponse"
                     :items="responseTimeOptions"
@@ -244,11 +268,12 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.initialResponse"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
-                <UFormField label="Target Resolution Time" class="form-group-large">
+                <UFormField
+                  label="Target Resolution Time"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.resolutionTarget"
                     :items="resolutionTimeOptions"
@@ -256,30 +281,41 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.resolutionTarget"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
               <UFormField
                 label="Process Steps (select applicable steps)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group mt-4 space-y-3">
                   <div
                     v-for="(step, index) in processSteps"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="step.checked"
-                      :id="`process-step-${index}`"
-                      :label="`${index + 1}. ${step.label}`"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="step.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        step.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="step.checked"
+                        :id="`process-step-${index}`"
+                        :label="`${index + 1}. ${step.label}`"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
-                <div v-if="validationErrors.processSteps" class="validation-error">
+                <div
+                  v-if="validationErrors.processSteps"
+                  class="validation-error">
                   {{ validationErrors.processSteps }}
                 </div>
               </UFormField>
@@ -288,7 +324,8 @@
 
           <!-- Section 7: Documentation & Privacy -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">7. Documentation & Privacy</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -297,8 +334,7 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -310,30 +346,31 @@
                   placeholder="Select documentation level..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Confidentiality Level" class="form-group-large">
+              <UFormField
+                label="Confidentiality Level"
+                class="form-group-large">
                 <USelect
                   v-model="formData.confidentiality"
                   :items="confidentialityOptions"
                   placeholder="Select confidentiality level..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Record Retention Period" class="form-group-large">
+              <UFormField
+                label="Record Retention Period"
+                class="form-group-large">
                 <USelect
                   v-model="formData.retention"
                   :items="retentionOptions"
                   placeholder="Select retention period..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -345,44 +382,55 @@
             <div class="space-y-6">
               <UFormField
                 label="Available Actions (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group mt-4 space-y-3">
                   <div
                     v-for="(action, index) in availableActions"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="action.checked"
-                      :id="`available-action-${index}`"
-                      :label="action.label"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="action.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        action.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="action.checked"
+                        :id="`available-action-${index}`"
+                        :label="action.label"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
-                <div v-if="validationErrors.availableActions" class="validation-error">
+                <div
+                  v-if="validationErrors.availableActions"
+                  class="validation-error">
                   {{ validationErrors.availableActions }}
                 </div>
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.appealProcess"
                   id="appeal-process"
                   label="Include appeals process"
                   help="Parties can request review of decisions"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 9: Special Circumstances -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">9. Special Circumstances</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -391,8 +439,7 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -401,14 +448,25 @@
                 <div
                   v-for="(circumstance, index) in specialCircumstances"
                   :key="index"
-                  class="checkbox-item"
-                >
-                  <UCheckbox
-                    v-model="circumstance.checked"
-                    :id="`special-circumstance-${index}`"
-                    :label="circumstance.label"
-                    @change="autoSave"
-                  />
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="circumstance.checked"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                  <div
+                    :class="[
+                      'checkbox-item p-3 border border-black dark:border-white transition-all',
+                      circumstance.checked
+                        ? 'item-selected bg-white dark:bg-neutral-950'
+                        : 'bg-transparent',
+                    ]">
+                    <UCheckbox
+                      v-model="circumstance.checked"
+                      :id="`special-circumstance-${index}`"
+                      :label="circumstance.label"
+                      @change="autoSave" />
+                  </div>
                 </div>
               </div>
             </div>
@@ -419,19 +477,22 @@
             <h2 class="section-title">10. Implementation Details</h2>
 
             <div class="space-y-6">
-              <UFormField label="Training Requirements" class="form-group-large">
+              <UFormField
+                label="Training Requirements"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.training"
                   :rows="3"
                   class="w-full"
                   placeholder="Describe any training needed for members, facilitators, or committee members..."
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
               <div class="flex flex-row space-x-4">
-                <UFormField label="Policy Review Schedule" class="form-group-large">
+                <UFormField
+                  label="Policy Review Schedule"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.reviewSchedule"
                     :items="reviewScheduleOptions"
@@ -439,13 +500,11 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.reviewSchedule"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
                 <UFormField
                   label="How can this policy be amended?"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.amendments"
                     :items="amendmentOptions"
@@ -453,8 +512,7 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.amendments"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
@@ -466,8 +524,7 @@
                       type="date"
                       size="xl"
                       class="w-full mb-0"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </UFormField>
 
                   <UFormField label="Next Review Date">
@@ -476,8 +533,7 @@
                       type="date"
                       size="xl"
                       class="w-full mb-0"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </UFormField>
                 </div>
               </div>
@@ -486,7 +542,8 @@
 
           <!-- Section 11: Reflection Process -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">11. Reflection Process</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -495,39 +552,41 @@
                   label="Include detailed reflection guidance"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.reflection">
-              <UFormField label="Reflection Period Timeframe" class="form-group-large">
+              <UFormField
+                label="Reflection Period Timeframe"
+                class="form-group-large">
                 <USelect
                   v-model="formData.reflectionPeriod"
                   :items="reflectionPeriodOptions"
                   placeholder="Select reflection timeframe..."
                   size="xl"
                   class="w-full md:w-1/2 mt-2"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Additional Reflection Prompts" class="form-group-large">
+              <UFormField
+                label="Additional Reflection Prompts"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.customReflectionPrompts"
                   :rows="4"
                   placeholder="Add any organization-specific reflection questions or prompts..."
                   size="xl"
                   class="w-full mt-2"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 12: Direct Resolution Guidelines -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">12. Direct Resolution Guidelines</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -536,99 +595,103 @@
                   label="Include detailed conversation guidance"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.directResolution">
               <UFormField
                 label="Communication Channels (select preferred escalation order)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group space-y-3 mt-4">
                   <div
                     v-for="(channel, index) in communicationChannels"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="channel.checked"
-                      :id="`comm-channel-${index}`"
-                      :label="channel.label"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="channel.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        channel.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="channel.checked"
+                        :id="`comm-channel-${index}`"
+                        :label="channel.label"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.requireDirectAttempt"
                   id="require-direct-attempt"
                   label="Require direct resolution attempt before escalation"
                   help="Parties must try to resolve directly before filing complaints"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.documentDirectResolution"
                   id="document-direct-resolution"
                   label="Require written record of direct resolution attempts"
                   help="Parties should document outcomes of direct conversations"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 13: Responsible Contact People -->
           <div class="section-card">
-            <h2 class="section-title">13. Responsible Contact People Structure</h2>
+            <h2 class="section-title">
+              13. Responsible Contact People Structure
+            </h2>
 
             <div class="space-y-6">
-              <UFormField label="Internal Advisor Designation" class="form-group-large">
+              <UFormField
+                label="Internal Advisor Designation"
+                class="form-group-large">
                 <USelect
                   v-model="formData.internalAdvisorType"
                   :items="internalAdvisorOptions"
                   placeholder="Select internal advisor structure..."
                   class="w-full md:w-1/2"
                   size="xl"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField
                 label="Staff Liaison for Conflict Resolution Committee"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <UInput
                   v-model="formData.staffLiaison"
                   placeholder="Title/role of designated staff liaison"
                   size="xl"
                   class="w-full md:w-1/2"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
               <UFormField
                 label="Board Chair Role in Conflict Resolution"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <USelect
                   v-model="formData.boardChairRole"
                   :items="boardChairRoleOptions"
                   placeholder="Select board chair involvement..."
                   size="xl"
                   class="w-full md:w-1/2"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -638,19 +701,32 @@
             <h2 class="section-title">14. Formal Complaint Requirements</h2>
 
             <div class="space-y-6">
-              <UFormField label="Required Complaint Elements" class="form-group-large">
+              <UFormField
+                label="Required Complaint Elements"
+                class="form-group-large">
                 <div class="checkbox-group space-y-3 mt-4">
                   <div
                     v-for="(element, index) in formalComplaintElements"
                     :key="index"
-                    class="checkbox-item"
-                  >
-                    <UCheckbox
-                      v-model="element.checked"
-                      :id="`complaint-element-${index}`"
-                      :label="element.label"
-                      @change="autoSave"
-                    />
+                    class="relative">
+                    <!-- Dithered shadow for selected items -->
+                    <div
+                      v-if="element.checked"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                    <div
+                      :class="[
+                        'checkbox-item p-3 border border-black dark:border-white transition-all',
+                        element.checked
+                          ? 'item-selected bg-white dark:bg-neutral-950'
+                          : 'bg-transparent',
+                      ]">
+                      <UCheckbox
+                        v-model="element.checked"
+                        :id="`complaint-element-${index}`"
+                        :label="element.label"
+                        @change="autoSave" />
+                    </div>
                   </div>
                 </div>
               </UFormField>
@@ -658,30 +734,26 @@
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <UFormField
                   label="Formal Complaint Acknowledgment Time"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.formalAcknowledgmentTime"
                     :items="acknowledgmentTimeOptions"
                     placeholder="Select acknowledgment timeframe..."
                     class="w-full"
                     size="xl"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
                 <UFormField
                   label="Formal Review Completion Time"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.formalReviewTime"
                     :items="reviewTimeOptions"
                     placeholder="Select review timeframe..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
@@ -691,8 +763,7 @@
                   id="require-external-advice"
                   label="Require external legal advice for complex complaints"
                   help="Seek external expertise for multi-party or staff/director complaints"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -708,36 +779,31 @@
                   id="minutes-of-settlement"
                   label="Require 'Minutes of Settlement' for resolved complaints"
                   help="Agreements must be documented in writing and signed by both parties"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <div class="flex flex-row space-x-4">
                 <UFormField
                   label="Settlement Confidentiality Level"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.settlementConfidentiality"
                     :items="confidentialityOptions"
                     placeholder="Select confidentiality level..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
                 <UFormField
                   label="Conflict Resolution File Retention"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.conflictFileRetention"
                     :items="retentionOptions"
                     placeholder="Select retention period..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
             </div>
@@ -745,7 +811,8 @@
 
           <!-- Section 16: External Resources -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">16. External Resources & Redress</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -754,8 +821,7 @@
                   label="Include external resource information"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -766,30 +832,31 @@
                   id="include-human-rights"
                   label="Include Human Rights Commission information"
                   help="Reference external discrimination complaint options"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Additional External Resources" class="form-group-large">
+              <UFormField
+                label="Additional External Resources"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.additionalResources"
                   :rows="3"
                   class="w-full"
                   placeholder="List any other external resources, legal aid contacts, or specialized support services..."
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
-              <UFormField label="Acknowledgment/Attribution" class="form-group-large">
+              <UFormField
+                label="Acknowledgment/Attribution"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.acknowledgments"
                   :rows="2"
                   placeholder="Credit any sources used in developing this policy..."
                   class="w-full"
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
@@ -797,23 +864,20 @@
           <!-- Document Preview Section -->
           <div class="no-print" v-if="showPreview">
             <div
-              class="border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 p-5 rounded-lg shadow-sm"
-            >
+              class="border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 p-5 rounded-lg shadow-sm">
               <div class="flex flex-row justify-between items-center mb-4">
                 <h2 class="section-title m-0">📄 Policy Document Preview</h2>
                 <UButton
                   size="sm"
                   variant="ghost"
                   @click="showPreview = false"
-                  title="Hide preview"
-                >
+                  title="Hide preview">
                   ✕
                 </UButton>
               </div>
               <div
                 class="policy-preview prose prose-neutral dark:prose-invert max-w-none px-6 py-5 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-900 rounded-md max-h-[600px] overflow-y-auto text-left"
-                v-html="markdownToHtml(generatePolicyDocument())"
-              ></div>
+                v-html="markdownToHtml(generatePolicyDocument())"></div>
             </div>
           </div>
         </div>
@@ -821,11 +885,10 @@
     </div>
 
     <!-- Export Options - Bottom -->
-      <ExportOptions
-        :export-data="exportData"
-        filename="conflict-resolution-framework"
-        title="Conflict Resolution Framework"
-      />
+    <ExportOptions
+      :export-data="exportData"
+      filename="conflict-resolution-framework"
+      title="Conflict Resolution Framework" />
   </div>
 </template>
 
@@ -903,7 +966,13 @@ const responseTimeOptions = [
   "Within 2 weeks",
 ];
 
-const resolutionTimeOptions = ["1 week", "2 weeks", "30 days", "60 days", "90 days"];
+const resolutionTimeOptions = [
+  "1 week",
+  "2 weeks",
+  "30 days",
+  "60 days",
+  "90 days",
+];
 
 const docLevelOptions = [
   "Minimal - outcomes only",
@@ -964,7 +1033,13 @@ const acknowledgmentTimeOptions = [
   "Within 2 weeks",
 ];
 
-const reviewTimeOptions = ["2 weeks", "1 month", "6 weeks", "2 months", "3 months"];
+const reviewTimeOptions = [
+  "2 weeks",
+  "1 month",
+  "6 weeks",
+  "2 months",
+  "3 months",
+];
 
 const sectionsEnabled = ref({
   values: true,
@@ -1138,14 +1213,18 @@ const validateForm = () => {
   }
 
   // Required checkbox groups (must have at least one checked)
-  const checkedConflictTypes = conflictTypes.value.filter((item) => item.checked);
+  const checkedConflictTypes = conflictTypes.value.filter(
+    (item) => item.checked
+  );
   if (checkedConflictTypes.length === 0) {
     errors.conflictTypes = "Please select at least one type of conflict";
   }
 
   // Note: Guiding Principles & Values section is optional - no validation needed
 
-  const checkedReportReceivers = reportReceivers.value.filter((item) => item.checked);
+  const checkedReportReceivers = reportReceivers.value.filter(
+    (item) => item.checked
+  );
   if (checkedReportReceivers.length === 0) {
     errors.reportReceivers = "Please select at least one report receiver";
   }
@@ -1155,7 +1234,9 @@ const validateForm = () => {
     errors.processSteps = "Please select at least one process step";
   }
 
-  const checkedAvailableActions = availableActions.value.filter((item) => item.checked);
+  const checkedAvailableActions = availableActions.value.filter(
+    (item) => item.checked
+  );
   if (checkedAvailableActions.length === 0) {
     errors.availableActions = "Please select at least one available action";
   }
@@ -1203,8 +1284,9 @@ const completionPercentage = computed(() => {
     ...specialCircumstances.value,
   ];
 
-  const filledInputs = allInputs.filter((val) => val && val.toString().trim() !== "")
-    .length;
+  const filledInputs = allInputs.filter(
+    (val) => val && val.toString().trim() !== ""
+  ).length;
   const checkedBoxes = checkboxInputs.filter((item) => item.checked).length;
 
   const totalFields = allInputs.length + checkboxInputs.length;
@@ -1228,10 +1310,12 @@ const loadSavedData = () => {
 
         // Load checkbox arrays
         if (parsedData.coreValues) coreValues.value = parsedData.coreValues;
-        if (parsedData.conflictTypes) conflictTypes.value = parsedData.conflictTypes;
+        if (parsedData.conflictTypes)
+          conflictTypes.value = parsedData.conflictTypes;
         if (parsedData.reportReceivers)
           reportReceivers.value = parsedData.reportReceivers;
-        if (parsedData.processSteps) processSteps.value = parsedData.processSteps;
+        if (parsedData.processSteps)
+          processSteps.value = parsedData.processSteps;
         if (parsedData.availableActions)
           availableActions.value = parsedData.availableActions;
         if (parsedData.specialCircumstances)
@@ -1498,18 +1582,9 @@ const exportData = computed(() => ({
   transform: translateX(24px);
 }
 
-/* Validation error styling */
-.validation-error {
-  color: #ef4444;
-  font-size: 0.875rem;
-  font-weight: 500;
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
+/* Moved validation-error to main.css for consistency */
 
-/* Preview styling */
+/* Preview styling - template-specific */
 .preview-controls {
   text-align: center;
   margin: 2rem 0;
@@ -1619,8 +1694,8 @@ html.dark .policy-preview blockquote {
 }
 
 .policy-preview code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace !important;
   background: #f3f4f6;
   padding: 0.1rem 0.35rem;
 }
diff --git a/pages/templates/decision-framework.vue b/pages/templates/decision-framework.vue
index ac16d47..fe1c08f 100644
--- a/pages/templates/decision-framework.vue
+++ b/pages/templates/decision-framework.vue
@@ -1,365 +1,475 @@
 <template>
   <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
     <!-- Export Options at Top -->
     <ExportOptions
       :export-data="exportData"
       filename="decision-framework"
-      title="Decision Framework Helper"
-    />
+      title="Decision Framework Helper" />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
-      style="font-family: 'Ubuntu', monospace"
-    >
-      <!-- Spacer for consistency -->
-      <div class="py-4"></div>
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+      <!-- Document Container -->
+      <div class="document-page">
+        <div class="template-content">
+          <!-- Document Header -->
+          <div class="text-center mb-8">
+            <h1
+              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100">
+              Decision Framework
+            </h1>
+          </div>
 
-      <div class="max-w-4xl mx-auto relative px-4">
-        <div
-          class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container"
-        >
-          <!-- Header -->
-          <div
-            class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section"
-          >
-            <!-- Dithered shadow background -->
-            <div
-              class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"
-            ></div>
-
-            <div
-              class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border-2 border-neutral-100 dark:border-neutral-900"
-            >
-              <h1
-                class="text-3xl font-bold mb-2 uppercase"
-                style="font-family: 'Ubuntu', monospace"
-              >
-                Decision Framework Helper
-              </h1>
-              <p class="text-lg" style="font-family: 'Ubuntu', monospace">
-                Find the right way to decide together
-              </p>
-
-              <!-- Progress Bar -->
-              <div v-if="!showResult" class="mt-8">
-                <div class="flex justify-between items-center mb-2">
-                  <span class="text-sm" style="font-family: 'Ubuntu Mono', monospace"
-                    >Step {{ currentStep }} of {{ totalSteps }}</span
+          <!-- All Steps Visible -->
+          <div v-if="!showResult">
+            <!-- Step 1: Urgency -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">1. How urgent is this decision?</h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.urgency"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
                   >
-                  <span class="text-sm" style="font-family: 'Ubuntu Mono', monospace"
-                    >{{ Math.round((currentStep / totalSteps) * 100) }}%</span
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
                   >
                 </div>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <div
-                  class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900"
-                >
+                  v-for="option in urgencyOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
                   <div
-                    class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
-                    :style="{
-                      width: (currentStep / totalSteps) * 100 + '%',
+                    v-if="state.urgency === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                  <UCard
+                    :class="[
+                      'cursor-pointer transition-all',
+                      state.urgency === option.value
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer ',
+                    ]"
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
                     }"
-                  ></div>
+                    @click="selectOption('urgency', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- Content -->
-          <div class="px-8 py-12">
-            <!-- Step Content -->
-            <div v-if="!showResult" class="min-h-[400px]">
-              <!-- Question 1: Urgency -->
-              <div v-if="currentStep === 1">
-                <div
-                  class="font-semibold text-black dark:text-white mb-6 text-2xl"
-                  style="font-family: 'Ubuntu', monospace"
-                >
-                  How urgent is this decision?
-                </div>
-                <div
-                  class="bg-white dark:bg-neutral-950 p-8 border-2 border-neutral-900 dark:border-neutral-100 relative"
-                >
-                  <!-- Dithered shadow background -->
-                  <div class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
-
-                  <div class="relative">
-                    <div class="flex justify-between mb-6 text-sm">
-                      <span
-                        class="text-black dark:text-white font-bold"
-                        style="font-family: 'Ubuntu Mono', monospace"
-                        >WE HAVE PLENTY OF TIME</span
-                      >
-                      <span
-                        class="text-black dark:text-white font-bold"
-                        style="font-family: 'Ubuntu Mono', monospace"
-                        >NEEDED YESTERDAY</span
-                      >
-                    </div>
-                    <div class="relative">
-                      <input
-                        type="range"
-                        v-model="state.urgency"
-                        min="1"
-                        max="5"
-                        step="1"
-                        class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider"
-                      />
-                      <div
-                        class="flex justify-between mt-4 text-sm text-black dark:text-white"
-                        style="font-family: 'Ubuntu Mono', monospace"
-                      >
-                        <span>1</span>
-                        <span>2</span>
-                        <span>3</span>
-                        <span>4</span>
-                        <span>5</span>
-                      </div>
-                    </div>
-                  </div>
+            <!-- Step 2: Reversibility -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">2. Can we change our minds later?</h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.reversible"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
+                  >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
                 </div>
               </div>
-
-              <!-- Question 2: Reversibility -->
-              <div v-if="currentStep === 2">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                 <div
-                  class="font-semibold text-black mb-6 text-2xl"
-                  style="font-family: 'Ubuntu', monospace"
-                >
-                  Can we change our minds later?
-                </div>
-                <div class="grid gap-4">
+                  v-for="option in reversibilityOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.reversible === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
                   <UCard
-                    v-for="option in reversibilityOptions"
-                    :key="option.value"
                     :class="[
-                      'cursor-pointer transition-all duration-200 border-2',
+                      'cursor-pointer transition-all',
                       state.reversible === option.value
-                        ? 'border-violet-700 bg-violet-700 text-white'
-                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                     ]"
-                    @click="selectOption('reversible', option.value)"
-                  >
-                    <div class="font-semibold mb-1">{{ option.title }}</div>
-                    <div class="text-sm opacity-85">
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
+                    }"
+                    @click="selectOption('reversible', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                       {{ option.description }}
                     </div>
                   </UCard>
                 </div>
               </div>
+            </div>
 
-              <!-- Question 3: Expertise -->
-              <div v-if="currentStep === 3">
-                <div class="font-semibold text-neutral-900 mb-6 text-2xl">
-                  Who has the most relevant expertise?
+            <!-- Step 3: Expertise -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">
+                  3. Who has the most relevant expertise?
+                </h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.expertise"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
+                  >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
                 </div>
-                <div class="grid gap-4">
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  v-for="option in expertiseOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.expertise === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
                   <UCard
-                    v-for="option in expertiseOptions"
-                    :key="option.value"
                     :class="[
-                      'cursor-pointer transition-all duration-200 border-2',
+                      'cursor-pointer transition-all',
                       state.expertise === option.value
-                        ? 'border-violet-700 bg-violet-700 text-white'
-                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                     ]"
-                    @click="selectOption('expertise', option.value)"
-                  >
-                    <div class="font-semibold mb-1">{{ option.title }}</div>
-                    <div class="text-sm opacity-85">
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
+                    }"
+                    @click="selectOption('expertise', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                       {{ option.description }}
                     </div>
                   </UCard>
                 </div>
               </div>
+            </div>
 
-              <!-- Question 4: Impact -->
-              <div v-if="currentStep === 4">
-                <div class="font-semibold text-neutral-900 mb-6 text-2xl">
-                  Who will this impact?
+            <!-- Step 4: Impact -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">4. Who will this impact?</h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.impact"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
+                  >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
                 </div>
-                <div class="grid gap-4">
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  v-for="option in impactOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.impact === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
                   <UCard
-                    v-for="option in impactOptions"
-                    :key="option.value"
                     :class="[
-                      'cursor-pointer transition-all duration-200 border-2',
+                      'cursor-pointer transition-all',
                       state.impact === option.value
-                        ? 'border-violet-700 bg-violet-700 text-white'
-                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                     ]"
-                    @click="selectOption('impact', option.value)"
-                  >
-                    <div class="font-semibold mb-1">{{ option.title }}</div>
-                    <div class="text-sm opacity-85">
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
+                    }"
+                    @click="selectOption('impact', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                       {{ option.description }}
                     </div>
                   </UCard>
                 </div>
               </div>
+            </div>
 
-              <!-- Question 5: Options clarity -->
-              <div v-if="currentStep === 5">
-                <div class="font-semibold text-neutral-900 mb-6 text-2xl">
-                  How well-defined are the options?
+            <!-- Step 5: Options clarity -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">
+                  5. How well-defined are the options?
+                </h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.options"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
+                  >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
                 </div>
-                <div class="grid gap-4">
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  v-for="option in optionsOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.options === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
                   <UCard
-                    v-for="option in optionsOptions"
-                    :key="option.value"
                     :class="[
-                      'cursor-pointer transition-all duration-200 border-2',
+                      'cursor-pointer transition-all',
                       state.options === option.value
-                        ? 'border-violet-700 bg-violet-700 text-white'
-                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                     ]"
-                    @click="selectOption('options', option.value)"
-                  >
-                    <div class="font-semibold mb-1">{{ option.title }}</div>
-                    <div class="text-sm opacity-85">
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
+                    }"
+                    @click="selectOption('options', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                       {{ option.description }}
                     </div>
                   </UCard>
                 </div>
               </div>
+            </div>
 
-              <!-- Question 6: Investment -->
-              <div v-if="currentStep === 6">
-                <div class="font-semibold text-neutral-900 mb-6 text-2xl">
-                  How invested is everyone?
+            <!-- Step 6: Investment -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">6. How invested is everyone?</h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.investment"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
+                  >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
                 </div>
-                <div class="grid gap-4">
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div
+                  v-for="option in investmentOptions"
+                  :key="option.value"
+                  class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.investment === option.value"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
                   <UCard
-                    v-for="option in investmentOptions"
-                    :key="option.value"
                     :class="[
-                      'cursor-pointer transition-all duration-200 border-2',
+                      'cursor-pointer transition-all',
                       state.investment === option.value
-                        ? 'border-violet-700 bg-violet-700 text-white'
-                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                        ? 'item-selected border border-neutral-900 dark:border-neutral-100 bg-white dark:bg-neutral-950'
+                        : 'border border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black cursor-pointer',
                     ]"
-                    @click="selectOption('investment', option.value)"
-                  >
-                    <div class="font-semibold mb-1">{{ option.title }}</div>
-                    <div class="text-sm opacity-85">
+                    :ui="{
+                      body: { padding: 'p-4' },
+                      ring: '',
+                      shadow: '',
+                      divide: '',
+                    }"
+                    @click="selectOption('investment', option.value)">
+                    <div class="text-xl font-bold mb-1">
+                      {{ option.title }}
+                    </div>
+                    <div class="text-sm text-neutral-600 dark:text-neutral-400">
                       {{ option.description }}
                     </div>
                   </UCard>
                 </div>
               </div>
+            </div>
 
-              <!-- Question 7: Team size -->
-              <div v-if="currentStep === 7">
-                <div class="font-semibold text-neutral-900 mb-6 text-2xl">
-                  How many people need to participate?
-                </div>
-                <div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
-                  <button
-                    v-for="size in teamSizes"
-                    :key="size"
-                    :class="[
-                      'px-4 py-3 font-semibold text-sm rounded-md border-2 transition-all duration-200',
-                      state.teamSize === size
-                        ? 'bg-violet-700 text-white border-violet-700'
-                        : 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                    ]"
-                    @click="selectOption('teamSize', size)"
+            <!-- Step 7: Team size -->
+            <div class="section-card">
+              <div class="flex justify-between items-center mb-4">
+                <h2 class="section-title">
+                  7. How many people need to participate?
+                </h2>
+                <div class="flex items-center gap-2">
+                  <span
+                    v-if="state.teamSize"
+                    class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 font-bold border border-green-300 dark:border-green-700"
+                    >✓ COMPLETE</span
                   >
+                  <span
+                    v-else
+                    class="px-3 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600"
+                    >PENDING</span
+                  >
+                </div>
+              </div>
+              <div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
+                <div v-for="size in teamSizes" :key="size" class="relative">
+                  <!-- Dithered shadow for selected items -->
+                  <div
+                    v-if="state.teamSize === size"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                  <button
+                    :class="[
+                      'px-4 py-3 font-semibold text-sm border w-full transition-all',
+                      state.teamSize === size
+                        ? 'item-selected bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 border-neutral-900 dark:border-neutral-100'
+                        : 'bg-white dark:bg-neutral-950 text-neutral-700 dark:text-neutral-300 border-neutral-700 dark:border-neutral-700 hover:border-black dark:hover:border-white cursor-pointer',
+                    ]"
+                    @click="selectOption('teamSize', size)">
                     {{ size }}
                   </button>
                 </div>
               </div>
-
-              <!-- Navigation -->
-              <div
-                class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200"
-              >
-                <button
-                  v-if="currentStep > 1"
-                  @click="previousStep"
-                  class="px-6 py-3 text-violet-700 border-2 border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200"
-                >
-                  ← Previous
-                </button>
-                <div v-else></div>
-
-                <button
-                  v-if="canProceed && currentStep < totalSteps"
-                  @click="nextStep"
-                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200"
-                >
-                  Next →
-                </button>
-                <button
-                  v-else-if="canProceed && currentStep === totalSteps"
-                  @click="showRecommendation"
-                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200"
-                >
-                  Get Recommendation
-                </button>
-              </div>
             </div>
 
-            <!-- Results -->
-            <div
-              v-if="showResult"
-              data-results
-              class="border-t-2 border-neutral-200 pt-12"
-            >
-              <UCard class="bg-neutral-50">
-                <div class="mb-8">
-                  <h2 class="text-2xl font-semibold text-violet-700 mb-2">
-                    {{ result.method }}
-                  </h2>
-                  <p class="text-lg text-neutral-600">{{ result.tagline }}</p>
+            <!-- Get Recommendation Button -->
+            <div class="section-card text-center">
+              <UButton
+                v-if="allStepsCompleted"
+                @click="showRecommendation"
+                size="xl"
+                color="primary"
+                class="px-8 py-4 text-lg">
+                Get Your Decision Framework Recommendation
+              </UButton>
+              <div v-else class="text-neutral-600 dark:text-neutral-400">
+                <p class="mb-4">
+                  Complete all steps above to get your personalized
+                  recommendation.
+                </p>
+                <p class="text-sm">
+                  {{ completedSteps }} of {{ totalSteps }} steps completed
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Results -->
+          <div v-if="showResult" data-results>
+            <div class="section-card">
+              <h2 class="section-title text-center mb-8">
+                Your Recommended Framework
+              </h2>
+
+              <div
+                class="text-center mb-8 p-6 bg-neutral-100 dark:bg-neutral-900 border-2 border-neutral-900 dark:border-neutral-100">
+                <h3
+                  class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 mb-2">
+                  {{ result.method }}
+                </h3>
+                <p class="text-lg text-neutral-600 dark:text-neutral-400">
+                  {{ result.tagline }}
+                </p>
+              </div>
+
+              <div class="space-y-8">
+                <div class="section-card">
+                  <h3
+                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
+                    Why this framework?
+                  </h3>
+                  <p
+                    class="text-neutral-700 dark:text-neutral-300 leading-relaxed">
+                    {{ result.reasoning }}
+                  </p>
                 </div>
 
-                <UCard class="bg-white mb-8">
-                  <div class="space-y-8">
-                    <div>
-                      <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
-                        Why this framework?
-                      </h3>
-                      <p class="text-neutral-700 leading-relaxed">
-                        {{ result.reasoning }}
-                      </p>
-                    </div>
+                <div class="section-card">
+                  <h3
+                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
+                    How to implement:
+                  </h3>
+                  <ul class="space-y-3">
+                    <li
+                      v-for="step in result.steps"
+                      :key="step"
+                      class="flex items-start">
+                      <span
+                        class="text-neutral-900 dark:text-neutral-100 font-bold mr-3 mt-1"
+                        >→</span
+                      >
+                      <span class="text-neutral-700 dark:text-neutral-300">{{
+                        step
+                      }}</span>
+                    </li>
+                  </ul>
+                </div>
 
-                    <div>
-                      <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
-                        How to implement:
-                      </h3>
-                      <ul class="space-y-3">
-                        <li
-                          v-for="step in result.steps"
-                          :key="step"
-                          class="flex items-start"
-                        >
-                          <span class="text-violet-700 font-bold mr-3 mt-1">→</span>
-                          <span class="text-neutral-700">{{ step }}</span>
-                        </li>
-                      </ul>
-                    </div>
-
-                    <div v-if="result.tips">
-                      <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
-                        Pro tips:
-                      </h3>
-                      <ul class="space-y-3">
-                        <li
-                          v-for="tip in result.tips"
-                          :key="tip"
-                          class="flex items-start"
-                        >
-                          <span class="text-violet-700 font-bold mr-3 mt-1">→</span>
-                          <span class="text-neutral-700">{{ tip }}</span>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                </UCard>
+                <div v-if="result.tips" class="section-card">
+                  <h3
+                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
+                    Pro tips:
+                  </h3>
+                  <ul class="space-y-3">
+                    <li
+                      v-for="tip in result.tips"
+                      :key="tip"
+                      class="flex items-start">
+                      <span
+                        class="text-neutral-900 dark:text-neutral-100 font-bold mr-3 mt-1"
+                        >→</span
+                      >
+                      <span class="text-neutral-700 dark:text-neutral-300">{{
+                        tip
+                      }}</span>
+                    </li>
+                  </ul>
+                </div>
 
                 <UAlert
                   v-if="result.warning"
@@ -367,8 +477,7 @@
                   variant="soft"
                   :title="'Watch out for:'"
                   :description="result.warning"
-                  class="mb-6"
-                />
+                  class="mb-6" />
 
                 <UAlert
                   v-if="result.success"
@@ -376,34 +485,39 @@
                   variant="soft"
                   :title="'Success looks like:'"
                   :description="result.success"
-                  class="mb-6"
-                />
+                  class="mb-6" />
 
-                <UCard v-if="result.alternatives" class="bg-neutral-50">
-                  <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
+                <div v-if="result.alternatives" class="section-card">
+                  <h3
+                    class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-4">
                     Also consider:
                   </h3>
                   <div class="space-y-3">
-                    <UCard
+                    <div
                       v-for="alt in result.alternatives"
                       :key="alt.method"
-                      class="bg-white"
-                    >
+                      class="p-4 border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-950">
                       <span class="font-semibold">{{ alt.method }}:</span>
                       {{ alt.when }}
-                    </UCard>
+                    </div>
                   </div>
-                </UCard>
-
-                <div class="flex gap-4 mt-8">
-                  <UButton @click="resetForm" color="violet">
-                    Try Another Decision
-                  </UButton>
-                  <UButton @click="printResult" variant="outline" color="violet">
-                    Print Recommendation
-                  </UButton>
                 </div>
-              </UCard>
+
+                <div class="section-card text-center">
+                  <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <UButton @click="resetForm" size="lg" color="primary">
+                      Try Another Decision
+                    </UButton>
+                    <UButton
+                      @click="printResult"
+                      size="lg"
+                      variant="outline"
+                      color="primary">
+                      Print Recommendation
+                    </UButton>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -411,11 +525,10 @@
     </div>
 
     <!-- Export Options at Bottom -->
-      <ExportOptions
-        :export-data="exportData"
-        filename="decision-framework"
-        title="Decision Framework Helper"
-      />
+    <ExportOptions
+      :export-data="exportData"
+      filename="decision-framework"
+      title="Decision Framework Helper" />
   </div>
 </template>
 
@@ -423,7 +536,7 @@
 import ExportOptions from "~/components/ExportOptions.vue";
 
 const state = reactive({
-  urgency: 3,
+  urgency: null,
   reversible: null,
   expertise: null,
   impact: null,
@@ -432,9 +545,36 @@ const state = reactive({
   teamSize: null,
 });
 
-const currentStep = ref(1);
 const totalSteps = 7;
 
+const urgencyOptions = [
+  {
+    value: 1,
+    title: "No rush",
+    description: "We have plenty of time to think this through",
+  },
+  {
+    value: 2,
+    title: "Some time pressure",
+    description: "We should decide soon but not immediately",
+  },
+  {
+    value: 3,
+    title: "Moderate urgency",
+    description: "We need to decide within days or weeks",
+  },
+  {
+    value: 4,
+    title: "High urgency",
+    description: "We need to decide very soon",
+  },
+  {
+    value: 5,
+    title: "Crisis mode",
+    description: "This decision is needed yesterday",
+  },
+];
+
 const reversibilityOptions = [
   {
     value: "high",
@@ -534,43 +674,26 @@ const result = computed(() => {
   return determineFramework();
 });
 
-const canProceed = computed(() => {
-  switch (currentStep.value) {
-    case 1:
-      return true; // urgency always has a value
-    case 2:
-      return state.reversible !== null;
-    case 3:
-      return state.expertise !== null;
-    case 4:
-      return state.impact !== null;
-    case 5:
-      return state.options !== null;
-    case 6:
-      return state.investment !== null;
-    case 7:
-      return state.teamSize !== null;
-    default:
-      return false;
-  }
+const completedSteps = computed(() => {
+  let completed = 0;
+  if (state.urgency) completed++;
+  if (state.reversible) completed++;
+  if (state.expertise) completed++;
+  if (state.impact) completed++;
+  if (state.options) completed++;
+  if (state.investment) completed++;
+  if (state.teamSize) completed++;
+  return completed;
+});
+
+const allStepsCompleted = computed(() => {
+  return completedSteps.value === totalSteps;
 });
 
 function selectOption(category, value) {
   state[category] = value;
 }
 
-function nextStep() {
-  if (currentStep.value < totalSteps) {
-    currentStep.value++;
-  }
-}
-
-function previousStep() {
-  if (currentStep.value > 1) {
-    currentStep.value--;
-  }
-}
-
 function showRecommendation() {
   showResult.value = true;
   nextTick(() => {
@@ -599,7 +722,8 @@ function determineFramework() {
         "Execute without delay",
         "Debrief when crisis passes",
       ],
-      warning: "Only use in true emergencies. Follow up with team discussion afterward.",
+      warning:
+        "Only use in true emergencies. Follow up with team discussion afterward.",
       success:
         "Crisis averted through quick action. Team understands why autocratic mode was necessary.",
     };
@@ -635,7 +759,11 @@ function determineFramework() {
   }
 
   // AVOIDANT - non-urgent + undefined + low investment
-  if (state.urgency <= 2 && state.options === "undefined" && state.investment === "low") {
+  if (
+    state.urgency <= 2 &&
+    state.options === "undefined" &&
+    state.investment === "low"
+  ) {
     return {
       method: "Strategic Delay",
       tagline: "Wait for clarity to emerge",
@@ -648,8 +776,10 @@ function determineFramework() {
         "Revisit when conditions change",
         "Document why you're waiting",
       ],
-      warning: "Don't let avoidance become paralysis. Set a deadline for revisiting.",
-      success: "By waiting, better options emerged or the decision became unnecessary.",
+      warning:
+        "Don't let avoidance become paralysis. Set a deadline for revisiting.",
+      success:
+        "By waiting, better options emerged or the decision became unnecessary.",
       alternatives: [
         {
           method: "Time-boxed exploration",
@@ -760,7 +890,8 @@ function determineFramework() {
         "Document all input received",
         "Explain how input influenced the decision",
       ],
-      success: "Decision informed by diverse perspectives with clear accountability.",
+      success:
+        "Decision informed by diverse perspectives with clear accountability.",
     };
   }
 
@@ -822,7 +953,10 @@ function determineFramework() {
   }
 
   // DEMOCRATIC VOTE - larger group, time pressure
-  if ((state.teamSize === "6-8" || state.teamSize === "9+") && state.urgency >= 4) {
+  if (
+    (state.teamSize === "6-8" || state.teamSize === "9+") &&
+    state.urgency >= 4
+  ) {
     return {
       method: "Democratic Vote",
       tagline: "Majority decides, move forward together",
@@ -842,7 +976,8 @@ function determineFramework() {
       ],
       warning:
         "Don't vote on everything! Reserve it for when other methods are too slow.",
-      success: "Clear decision made efficiently with everyone having equal say.",
+      success:
+        "Clear decision made efficiently with everyone having equal say.",
     };
   }
 
@@ -920,14 +1055,13 @@ function determineFramework() {
 }
 
 function resetForm() {
-  state.urgency = 3;
+  state.urgency = null;
   state.reversible = null;
   state.expertise = null;
   state.impact = null;
   state.options = null;
   state.investment = null;
   state.teamSize = null;
-  currentStep.value = 1;
   showResult.value = false;
 
   window.scrollTo({ top: 0, behavior: "smooth" });
@@ -941,7 +1075,6 @@ function printResult() {
 const exportData = computed(() => ({
   formData: {
     state: state,
-    currentStep: currentStep.value,
     showResult: showResult.value,
     result: result.value,
   },
@@ -958,7 +1091,8 @@ const exportData = computed(() => ({
   metadata: {
     completedAt: showResult.value ? new Date().toISOString() : null,
     totalSteps: totalSteps,
-    progressPercentage: Math.round((currentStep.value / totalSteps) * 100),
+    completedSteps: completedSteps.value,
+    progressPercentage: Math.round((completedSteps.value / totalSteps) * 100),
   },
   exportedAt: new Date().toISOString(),
   section: "decision-framework",
@@ -966,26 +1100,19 @@ const exportData = computed(() => ({
   description: "Interactive wizard to find the right way to decide together",
 }));
 
-// Keyboard navigation
+// Keyboard shortcuts
 onMounted(() => {
   const handleKeydown = (event) => {
     if (showResult.value) return;
 
-    if (
-      event.key === "ArrowRight" &&
-      canProceed.value &&
-      currentStep.value < totalSteps
-    ) {
-      nextStep();
-    } else if (event.key === "ArrowLeft" && currentStep.value > 1) {
-      previousStep();
-    } else if (
-      event.key === "Enter" &&
-      canProceed.value &&
-      currentStep.value === totalSteps
-    ) {
+    // Enter to get recommendation when all steps completed
+    if (event.key === "Enter" && allStepsCompleted.value) {
       showRecommendation();
     }
+    // Escape to reset form
+    else if (event.key === "Escape") {
+      resetForm();
+    }
   };
 
   document.addEventListener("keydown", handleKeydown);
@@ -1006,41 +1133,3 @@ useHead({
   ],
 });
 </script>
-
-<style scoped>
-/* Dark mode utility overrides for better contrast */
-html.dark :deep(.text-neutral-900),
-html.dark :deep(.text-neutral-800),
-html.dark :deep(.text-neutral-700),
-html.dark :deep(.text-neutral-600),
-html.dark :deep(.text-neutral-500) {
-  color: #e5e7eb !important;
-}
-
-html.dark :deep(.bg-neutral-50),
-html.dark :deep(.bg-neutral-100),
-html.dark :deep(.bg-neutral-200) {
-  background-color: #0a0a0a !important;
-}
-
-html.dark :deep(.border-neutral-200),
-html.dark :deep(.border-neutral-300) {
-  border-color: #374151 !important;
-}
-
-/* Header progress bar frame inversion */
-html.dark :deep(.header-section .w-full.h-2) {
-  background-color: #0a0a0a !important;
-  border-color: #000 !important;
-}
-
-/* Buttons in results area */
-html.dark :deep(.u-card),
-html.dark :deep(.bg-white) {
-  background-color: #0a0a0a !important;
-}
-
-html.dark :deep(.bg-neutral-50) {
-  background-color: #0f172a !important;
-}
-</style>
diff --git a/pages/templates/index.vue b/pages/templates/index.vue
index f81b93b..f10b8d4 100644
--- a/pages/templates/index.vue
+++ b/pages/templates/index.vue
@@ -222,29 +222,7 @@ useHead({
 </script>
 
 <style scoped>
-/* Ubuntu font import */
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
-
-/* Removed full-screen dither pattern to avoid gray haze in dark mode */
-
-/* Exact shadow style from value-flow inspiration */
-.dither-shadow {
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .dither-shadow {
-    background: white;
-    background-image: radial-gradient(black 1px, transparent 1px);
-  }
-}
-
-:global(.dark) .dither-shadow {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
+/* Template index specific styles - no longer duplicated in main.css */
 
 .dither-shadow-disabled {
   background: black;
@@ -265,74 +243,6 @@ useHead({
   background-image: radial-gradient(black 1px, transparent 1px);
 }
 
-/* Rely on Tailwind bg utilities on container */
-
-.template-card {
-  @apply relative;
-  font-family: "Ubuntu", monospace;
-}
-
-.help-section {
-  @apply relative;
-}
-
-.coming-soon {
-  opacity: 0.7;
-}
-
-.dither-tag {
-  position: relative;
-  background: white;
-}
-.dither-tag::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent 0px,
-    transparent 1px,
-    black 1px,
-    black 2px
-  );
-  opacity: 0.1;
-  pointer-events: none;
-}
-
-/* Button styling - pure bitmap, no colors */
-.bitmap-button {
-  font-family: "Ubuntu Mono", monospace !important;
-  text-transform: uppercase;
-  font-weight: bold;
-  letter-spacing: 0.5px;
-  position: relative;
-}
-
-.bitmap-button:hover {
-  transform: translateY(-1px) translateX(-1px);
-  transition: transform 0.1s ease;
-}
-
-.bitmap-button:hover::after {
-  content: "";
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  right: -1px;
-  bottom: -1px;
-  border: 1px solid black;
-  background: white;
-  z-index: -1;
-}
-
-.disabled-button {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 /* Remove any inherited rounded corners */
 .template-card > *,
 .help-section > *,
diff --git a/pages/templates/membership-agreement.vue b/pages/templates/membership-agreement.vue
index 1f13cb6..3ceb333 100644
--- a/pages/templates/membership-agreement.vue
+++ b/pages/templates/membership-agreement.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
     <!-- Export Options - Top -->
     <ExportOptions
       :export-data="exportData"
       filename="membership-agreement"
-      title="Membership Agreement"
-    />
+      title="Membership Agreement" />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
-    >
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -20,8 +15,9 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
-              :data-coop-name="formData.cooperativeName || 'Worker Cooperative'"
-            >
+              :data-coop-name="
+                formData.cooperativeName || 'Worker Cooperative'
+              ">
               MEMBERSHIP AGREEMENT
             </h1>
           </div>
@@ -29,8 +25,7 @@
           <!-- Section 1: Who We Are -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               1. Who We Are
             </h2>
 
@@ -42,8 +37,7 @@
                   size="xl"
                   class="w-full"
                   @input="debouncedAutoSave"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField label="Date Established" class="form-group-large">
@@ -52,8 +46,7 @@
                   type="date"
                   size="xl"
                   class="large-field"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField label="Our Purpose" class="form-group-large">
@@ -64,8 +57,7 @@
                   size="xl"
                   class="large-field"
                   @input="debouncedAutoSave"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField label="Our Core Values" class="form-group-large">
@@ -76,8 +68,7 @@
                   size="xl"
                   class="large-field"
                   @input="debouncedAutoSave"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <div class="form-group-large">
@@ -91,8 +82,7 @@
                     size="sm"
                     color="primary"
                     variant="outline"
-                    icon="i-heroicons-plus"
-                  >
+                    icon="i-heroicons-plus">
                     Add Member
                   </UButton>
                 </div>
@@ -101,10 +91,10 @@
                   <div
                     v-for="(member, index) in formData.members"
                     :key="index"
-                    class="border border-neutral-600 rounded-lg p-4"
-                  >
+                    class="border border-neutral-600 rounded-lg p-4">
                     <div class="flex items-start justify-between mb-3">
-                      <h4 class="font-medium text-neutral-900 dark:text-neutral-100">
+                      <h4
+                        class="font-medium text-neutral-900 dark:text-neutral-100">
                         Member {{ index + 1 }}
                       </h4>
                       <UButton
@@ -113,8 +103,7 @@
                         size="sm"
                         color="red"
                         variant="ghost"
-                        icon="i-heroicons-trash"
-                      >
+                        icon="i-heroicons-trash">
                       </UButton>
                     </div>
 
@@ -126,8 +115,7 @@
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave"
-                        />
+                          @change="autoSave" />
                       </UFormField>
 
                       <UFormField label="Email" class="form-group-large">
@@ -138,8 +126,7 @@
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave"
-                        />
+                          @change="autoSave" />
                       </UFormField>
 
                       <UFormField label="Join Date" class="form-group-large">
@@ -148,22 +135,19 @@
                           type="date"
                           size="xl"
                           class="large-field"
-                          @change="autoSave"
-                        />
+                          @change="autoSave" />
                       </UFormField>
 
                       <UFormField
                         label="Current Role (Optional)"
-                        class="form-group-large"
-                      >
+                        class="form-group-large">
                         <UInput
                           v-model="member.role"
                           placeholder="e.g., Coordinator, Developer, etc."
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave"
-                        />
+                          @change="autoSave" />
                       </UFormField>
                     </div>
                   </div>
@@ -175,16 +159,14 @@
           <!-- Section 2: Membership -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               2. Membership
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Who Can Be a Member
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -193,8 +175,8 @@
                 <ul class="content-list my-2 pl-6 list-disc">
                   <li>Shares our values and purpose</li>
                   <li>
-                    Contributes labour to the cooperative (by doing actual work, not just
-                    investing money)
+                    Contributes labour to the cooperative (by doing actual work,
+                    not just investing money)
                   </li>
                   <li>Commits to collective decision-making</li>
                   <li>Participates in governance responsibilities</li>
@@ -203,14 +185,14 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Becoming a Member
                 </h3>
 
                 <p class="content-paragraph">
-                  New members join through a consent process, which means existing members
-                  must agree that adding this person won't harm the cooperative.
+                  New members join through a consent process, which means
+                  existing members must agree that adding this person won't harm
+                  the cooperative.
                 </p>
 
                 <ol class="content-list numbered my-2 pl-6 list-decimal">
@@ -221,8 +203,7 @@
                       type="number"
                       placeholder="3"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     months working together
                   </li>
                   <li>Values alignment conversation</li>
@@ -233,8 +214,7 @@
                       type="number"
                       placeholder="1000"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     (can be paid over time or waived based on need)
                   </li>
                 </ol>
@@ -242,20 +222,19 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Leaving the Cooperative
                 </h3>
 
-                <p class="content-paragraph flex items-baseline gap-2 flex-wrap">
+                <p
+                  class="content-paragraph flex items-baseline gap-2 flex-wrap">
                   Members can leave anytime with
                   <UInput
                     v-model="formData.noticeDays"
                     type="number"
                     placeholder="30"
                     class="inline-field number-field"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                   days notice. The cooperative will:
                 </p>
 
@@ -267,8 +246,7 @@
                       type="number"
                       placeholder="30"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     days
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -278,11 +256,12 @@
                       type="number"
                       placeholder="90"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     days
                   </li>
-                  <li>Maintain respectful ongoing relationships when possible</li>
+                  <li>
+                    Maintain respectful ongoing relationships when possible
+                  </li>
                 </ul>
               </div>
             </div>
@@ -291,80 +270,71 @@
           <!-- Section 3: How We Make Decisions -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               3. How We Make Decisions
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Consent-Based Decisions
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  We use consent, not consensus. This means we move forward when no one
-                  has a principled objection that would harm the cooperative. An objection
-                  must explain how the proposal would contradict our values or threaten
-                  our sustainability.
+                  We use consent, not consensus. This means we move forward when
+                  no one has a principled objection that would harm the
+                  cooperative. An objection must explain how the proposal would
+                  contradict our values or threaten our sustainability.
                 </p>
               </div>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                  >
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                     Day-to-Day Decisions
                   </h3>
                   <p
-                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
-                  >
+                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
                     Decisions under $<UInput
                       v-model="formData.dayToDayLimit"
                       type="number"
                       placeholder="100"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
-                    can be made by any member. Just tell others what you did at the next
-                    meeting.
+                      @change="autoSave" />
+                    can be made by any member. Just tell others what you did at
+                    the next meeting.
                   </p>
                 </div>
 
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                  >
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                     Regular Decisions
                   </h3>
                   <p
-                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
-                  >
+                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
                     Decisions between $<UInput
                       v-model="formData.regularDecisionMin"
                       type="number"
                       placeholder="100"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     and $<UInput
                       v-model="formData.regularDecisionMax"
                       type="number"
                       placeholder="1000"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
-                    need consent from members present at a meeting (minimum 2 members).
+                      @change="autoSave" />
+                    need consent from members present at a meeting (minimum 2
+                    members).
                   </p>
                 </div>
               </div>
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Major Decisions
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -379,8 +349,7 @@
                       type="number"
                       placeholder="5000"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </li>
                   <li>Fundamental changes to our purpose or structure</li>
                   <li>Dissolution of the cooperative</li>
@@ -389,8 +358,7 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Meeting Structure
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
@@ -400,8 +368,7 @@
                       v-model="formData.meetingFrequency"
                       placeholder="weekly"
                       class="inline-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
                     Emergency meetings need
@@ -410,12 +377,13 @@
                       type="number"
                       placeholder="24"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     hours notice
                   </li>
                   <li>We rotate who facilitates meetings</li>
-                  <li>Decisions and reasoning get documented in shared notes</li>
+                  <li>
+                    Decisions and reasoning get documented in shared notes
+                  </li>
                 </ul>
               </div>
             </div>
@@ -424,28 +392,25 @@
           <!-- Section 4: Money and Labour -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               4. Money and Labour
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Equal Ownership
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  Each member owns an equal share of the cooperative, regardless of hours
-                  worked or tenure.
+                  Each member owns an equal share of the cooperative, regardless
+                  of hours worked or tenure.
                 </p>
               </div>
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Paying Ourselves
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
@@ -455,8 +420,7 @@
                       type="number"
                       placeholder="25"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />/hour for all members
+                      @change="autoSave" />/hour for all members
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
                     Or: Equal monthly draw of $<UInput
@@ -464,8 +428,7 @@
                       type="number"
                       placeholder="2000"
                       class="inline-field number-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     per member
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -475,8 +438,7 @@
                       :items="dayOptions"
                       placeholder="15"
                       class="inline-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                     of each month
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -485,8 +447,7 @@
                       v-model="formData.surplusFrequency"
                       placeholder="quarter"
                       class="inline-field"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </li>
                 </ul>
               </div>
@@ -494,8 +455,7 @@
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                  >
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                     Work Expectations
                   </h3>
                   <ul class="content-list my-2 pl-6 list-disc">
@@ -506,29 +466,31 @@
                         type="number"
                         placeholder="40"
                         class="inline-field number-field"
-                        @change="autoSave"
-                      />
+                        @change="autoSave" />
                       (flexible based on capacity)
                     </li>
                     <li>We explicitly reject crunch culture</li>
                     <li>Members communicate their capacity openly</li>
                     <li>
-                      We adjust workload collectively when someone needs reduced hours
+                      We adjust workload collectively when someone needs reduced
+                      hours
                     </li>
                   </ul>
                 </div>
 
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                  >
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                     Financial Transparency
                   </h3>
                   <ul class="content-list my-2 pl-6 list-disc">
-                    <li>All members can access all financial records anytime</li>
+                    <li>
+                      All members can access all financial records anytime
+                    </li>
                     <li>Monthly financial check-ins at meetings</li>
                     <li>
-                      Quarterly reviews of our runway (how many months we can operate)
+                      Quarterly reviews of our runway (how many months we can
+                      operate)
                     </li>
                   </ul>
                 </div>
@@ -539,34 +501,31 @@
           <!-- Section 5: Roles and Responsibilities -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               5. Roles and Responsibilities
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Rotating Roles
                 </h3>
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
-                >
+                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
                   We rotate operational roles every
                   <UInput
                     v-model="formData.roleRotationMonths"
                     type="number"
                     placeholder="6"
                     class="inline-field number-field"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                   months. Current roles include:
                 </p>
                 <ul class="content-list">
                   <li>
-                    Financial coordinator (handles bookkeeping, not financial decisions)
+                    Financial coordinator (handles bookkeeping, not financial
+                    decisions)
                   </li>
                   <li>Meeting facilitator</li>
                   <li>External communications</li>
@@ -576,8 +535,7 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Shared Responsibilities
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -595,16 +553,14 @@
           <!-- Section 6: Conflict and Care -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               6. Conflict and Care
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   When Conflict Happens
                 </h3>
                 <ol class="content-list numbered my-2 pl-6 list-decimal">
@@ -617,15 +573,16 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
-                >
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Care Commitments
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
                   <li>We check in about capacity and wellbeing regularly</li>
                   <li>We honour diverse access needs</li>
                   <li>We maintain flexibility for life circumstances</li>
-                  <li>We contribute to mutual aid when members face hardship</li>
+                  <li>
+                    We contribute to mutual aid when members face hardship
+                  </li>
                 </ul>
               </div>
             </div>
@@ -634,31 +591,27 @@
           <!-- Section 7: Changing This Agreement -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               7. Changing This Agreement
             </h2>
 
             <p
-              class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
-            >
+              class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
               This is a living document. We review it every
               <UInput
                 v-model="formData.reviewFrequency"
                 placeholder="year"
                 class="inline-field"
-                @change="autoSave"
-              />
-              and update it through our consent process. Small clarifications can happen
-              anytime; structural changes need full member consent.
+                @change="autoSave" />
+              and update it through our consent process. Small clarifications
+              can happen anytime; structural changes need full member consent.
             </p>
           </div>
 
           <!-- Section 8: If We Need to Close -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               8. If We Need to Close
             </h2>
 
@@ -675,8 +628,7 @@
                   <UInput
                     v-model="formData.assetDonationTarget"
                     placeholder="Enter organization name"
-                    class="inline-field wide-field"
-                  />
+                    class="inline-field wide-field" />
                 </li>
               </ol>
             </div>
@@ -685,8 +637,7 @@
           <!-- Section 9: Legal Bits -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               9. Legal Bits
             </h2>
 
@@ -697,8 +648,7 @@
                     v-model="formData.legalStructure"
                     size="xl"
                     class="w-full"
-                    placeholder="Cooperative corporation, LLC, partnership, etc."
-                  />
+                    placeholder="Cooperative corporation, LLC, partnership, etc." />
                 </UFormField>
 
                 <UFormField label="Registered in" class="form-group-inline">
@@ -707,8 +657,7 @@
                     placeholder="State/Province"
                     size="xl"
                     class="inline-field w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
                 <div class="fiscal-year-group">
@@ -720,25 +669,23 @@
                         placeholder="Month"
                         size="xl"
                         class="w-60"
-                        @change="autoSave"
-                      />
+                        @change="autoSave" />
                       <USelect
                         v-model="formData.fiscalYearEndDay"
                         :items="dayOptions"
                         placeholder="Day"
                         size="xl"
                         class="w-40"
-                        @change="autoSave"
-                      />
+                        @change="autoSave" />
                     </div>
                   </UFormField>
                 </div>
               </div>
 
               <p class="content-paragraph mb-3 leading-relaxed text-left">
-                This agreement works alongside but doesn't replace our legal incorporation
-                documents. Where they conflict, we follow the law but work to align our
-                legal structure with our values.
+                This agreement works alongside but doesn't replace our legal
+                incorporation documents. Where they conflict, we follow the law
+                but work to align our legal structure with our values.
               </p>
             </div>
           </div>
@@ -746,46 +693,39 @@
           <!-- Section 10: Agreement Review -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
-            >
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
               10. Agreement Review
             </h2>
 
             <div class="space-y-4">
               <p class="content-paragraph mb-3 leading-relaxed text-left">
-                By using this agreement, we commit to these principles and to showing up
-                for each other.
+                By using this agreement, we commit to these principles and to
+                showing up for each other.
               </p>
 
               <div
-                class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300"
-              >
+                class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300">
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
-                >
+                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
                   This agreement was last updated on
                   <UInput
                     v-model="formData.lastUpdated"
                     type="date"
                     class="inline-field"
-                    @change="autoSave"
-                  />. We commit to reviewing it on
+                    @change="autoSave" />. We commit to reviewing it on
                   <UInput
                     v-model="formData.nextReview"
                     type="date"
                     class="inline-field"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                   or sooner if circumstances require.
                 </p>
               </div>
 
               <div
-                class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950"
-              >
+                class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950">
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic"
-                >
+                  class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic">
                   [Space for member signatures when printed]
                 </p>
               </div>
@@ -799,8 +739,7 @@
     <ExportOptions
       :export-data="exportData"
       filename="membership-agreement"
-      title="Membership Agreement"
-    />
+      title="Membership Agreement" />
   </div>
 </template>
 
@@ -898,7 +837,10 @@ onMounted(() => {
 
 // Auto-save individual field changes immediately
 const autoSave = () => {
-  localStorage.setItem("membership-agreement-data", JSON.stringify(formData.value));
+  localStorage.setItem(
+    "membership-agreement-data",
+    JSON.stringify(formData.value)
+  );
   console.log("Manual auto-save triggered:", formData.value);
 };
 
@@ -950,8 +892,12 @@ const handlePrint = () => {
     `;
 
     // Add signature lines for each member
-    const membersWithNames = formData.value.members?.filter((m) => m.name) || [];
-    const numSignatures = Math.max(2, Math.min(8, membersWithNames.length || 4));
+    const membersWithNames =
+      formData.value.members?.filter((m) => m.name) || [];
+    const numSignatures = Math.max(
+      2,
+      Math.min(8, membersWithNames.length || 4)
+    );
 
     for (let i = 0; i < numSignatures; i++) {
       const memberName = membersWithNames[i]?.name || "";
@@ -981,7 +927,8 @@ const handlePrint = () => {
       value = formData.value.cooperativeName;
     else if (input.closest('[label="Date Established"]'))
       value = formData.value.dateEstablished;
-    else if (input.closest('[label="Our Purpose"]')) value = formData.value.purpose;
+    else if (input.closest('[label="Our Purpose"]'))
+      value = formData.value.purpose;
     else if (input.closest('[label="Our Core Values"]'))
       value = formData.value.coreValues;
     else if (input.closest('[label="Legal Structure"]'))
@@ -998,13 +945,16 @@ const handlePrint = () => {
     // Handle member fields
     else if (input.closest(".border-neutral-200")) {
       const memberCard = input.closest(".border-neutral-200");
-      const memberIndex = Array.from(memberCard.parentNode.children).indexOf(memberCard);
+      const memberIndex = Array.from(memberCard.parentNode.children).indexOf(
+        memberCard
+      );
       const member = formData.value.members?.[memberIndex];
       if (member) {
         if (input.closest('[label="Full Name"]')) value = member.name;
         else if (input.closest('[label="Email"]')) value = member.email;
         else if (input.closest('[label="Join Date"]')) value = member.joinDate;
-        else if (input.closest('[label="Current Role (Optional)"]')) value = member.role;
+        else if (input.closest('[label="Current Role (Optional)"]'))
+          value = member.role;
       }
     }
     // Fallback to input.value
@@ -1143,11 +1093,13 @@ const exportData = computed(() => ({
 
 .template-content.font-ubuntu,
 .template-content.font-ubuntu * {
-  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif !important;
 }
 
 .template-content.font-inter,
 .template-content.font-inter * {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    sans-serif !important;
 }
 </style>
diff --git a/pages/templates/tech-charter.vue b/pages/templates/tech-charter.vue
index e9ba808..9f0544b 100644
--- a/pages/templates/tech-charter.vue
+++ b/pages/templates/tech-charter.vue
@@ -1,26 +1,20 @@
 <template>
   <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
     <!-- Export Options - Top -->
     <ExportOptions
       :export-data="exportData"
       filename="tech-charter"
-      title="Technology Charter"
-    />
+      title="Technology Charter" />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
-    >
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
           <!-- Document Header -->
           <div class="text-center mb-8">
             <h1
-              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
-            >
+              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100">
               Tech Charter
             </h1>
           </div>
@@ -30,9 +24,12 @@
             <!-- Purpose Section -->
             <div class="section-card">
               <div>
-                <h2 class="text-2xl font-bold text-neutral-800 mb-4">Charter Purpose</h2>
+                <h2 class="text-2xl font-bold text-neutral-800 mb-4">
+                  Charter Purpose
+                </h2>
                 <p class="text-neutral-600 mb-4">
-                  Describe what this charter will guide and why it matters to your group.
+                  Describe what this charter will guide and why it matters to
+                  your group.
                 </p>
               </div>
 
@@ -40,8 +37,7 @@
                 <textarea
                   v-model="charterPurpose"
                   class="w-full min-h-32 p-4 border-2 border-neutral-300 bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 focus:border-black dark:focus:border-white transition-colors resize-y"
-                  rows="4"
-                />
+                  rows="4" />
               </div>
             </div>
 
@@ -52,37 +48,39 @@
                   Define Your Principles & Importance
                 </h2>
                 <p class="text-neutral-600 mb-6">
-                  Select principles and set their importance. Zero means excluded, 5 means
-                  critical.
+                  Select principles and set their importance. Zero means
+                  excluded, 5 means critical.
                 </p>
               </div>
 
               <div class="grid md:grid-cols-1 gap-4">
-                <div v-for="principle in principles" :key="principle.id" class="relative">
+                <div
+                  v-for="principle in principles"
+                  :key="principle.id"
+                  class="relative">
                   <!-- Dithered shadow for selected cards -->
                   <div
                     v-if="principleWeights[principle.id] > 0"
-                    class="absolute top-2 left-2 w-full h-full dither-shadow"
-                  ></div>
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
 
                   <div
                     :class="[
                       'relative transition-all',
                       principleWeights[principle.id] > 0
-                        ? 'principle-selected border-2 border-black dark:border-white bg-white dark:bg-neutral-950'
+                        ? 'item-selected border-2 border-black dark:border-white bg-white dark:bg-neutral-950'
                         : 'border border-black dark:border-white bg-transparent',
-                    ]"
-                  >
+                    ]">
                     <div class="p-6">
                       <div class="flex items-start gap-6">
                         <!-- Principle info -->
                         <div class="flex-1">
                           <div
                             :class="[
-                              'principle-text-bg mb-3',
-                              principleWeights[principle.id] > 0 ? 'selected' : '',
-                            ]"
-                          >
+                              'item-text-bg mb-3',
+                              principleWeights[principle.id] > 0
+                                ? 'selected'
+                                : '',
+                            ]">
                             <h3 class="font-bold text-lg mb-2">
                               {{ principle.name }}
                             </h3>
@@ -92,8 +90,7 @@
                                   ? 'text-neutral-700'
                                   : 'text-neutral-600'
                               "
-                              class="text-sm"
-                            >
+                              class="text-sm">
                               {{ principle.description }}
                             </p>
                           </div>
@@ -102,8 +99,7 @@
                         <!-- Importance selector -->
                         <div class="flex flex-col items-center gap-2">
                           <label
-                            class="text-xs font-bold text-neutral-500 uppercase tracking-wider"
-                          >
+                            class="text-xs font-bold text-neutral-500 uppercase tracking-wider">
                             Importance
                           </label>
 
@@ -119,8 +115,7 @@
                                   ? 'bg-black text-white border-black dark:bg-white dark:text-black dark:border-white'
                                   : 'bg-white border-neutral-300 hover:border-neutral-500 dark:bg-neutral-950',
                               ]"
-                              :title="`Set importance to ${level}`"
-                            >
+                              :title="`Set importance to ${level}`">
                               {{ level }}
                             </button>
                           </div>
@@ -131,7 +126,11 @@
                               {{ principleWeights[principle.id] || 0 }}
                             </div>
                             <div class="text-xs text-neutral-500">
-                              {{ getWeightLabel(principleWeights[principle.id] || 0) }}
+                              {{
+                                getWeightLabel(
+                                  principleWeights[principle.id] || 0
+                                )
+                              }}
                             </div>
                           </div>
                         </div>
@@ -140,20 +139,19 @@
                       <!-- Non-negotiable toggle (only shows for weights > 0) -->
                       <div
                         v-if="principleWeights[principle.id] > 0"
-                        class="mt-4 pt-4 border-t border-neutral-200"
-                      >
+                        class="mt-4 pt-4 border-t border-neutral-200">
                         <label
                           :class="[
-                            'flex items-center gap-3 cursor-pointer principle-label-bg px-2 py-1',
-                            nonNegotiables.includes(principle.id) ? 'selected' : '',
-                          ]"
-                        >
+                            'flex items-center gap-3 cursor-pointer item-label-bg px-2 py-1',
+                            nonNegotiables.includes(principle.id)
+                              ? 'selected'
+                              : '',
+                          ]">
                           <input
                             type="checkbox"
                             :checked="nonNegotiables.includes(principle.id)"
                             @change="toggleNonNegotiable(principle.id)"
-                            class="w-4 h-4"
-                          />
+                            class="w-4 h-4" />
                           <span class="text-sm font-medium text-red-600">
                             Make this non-negotiable
                           </span>
@@ -163,9 +161,9 @@
                       <!-- Show rubric description when selected -->
                       <div
                         v-if="principleWeights[principle.id] > 0"
-                        class="mt-4 p-3 principle-label-bg selected border border-neutral-200"
-                      >
-                        <div class="text-xs font-bold uppercase text-neutral-500 mb-1">
+                        class="mt-4 p-3 item-label-bg selected border border-neutral-200">
+                        <div
+                          class="text-xs font-bold uppercase text-neutral-500 mb-1">
                           Evaluation Criteria:
                         </div>
                         <div class="text-sm">
@@ -183,8 +181,7 @@
               <div>
                 <h2
                   class="text-2xl font-bold text-neutral-800 mb-2"
-                  id="constraints-heading"
-                >
+                  id="constraints-heading">
                   Technical Constraints
                 </h2>
               </div>
@@ -195,18 +192,15 @@
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="auth-heading"
-                  >
+                    aria-labelledby="auth-heading">
                     <div
                       v-for="option in authOptions"
                       :key="option.value"
-                      class="relative"
-                    >
+                      class="relative">
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.sso === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"
-                      ></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                       <button
                         @click="constraints.sso = option.value"
                         :aria-pressed="constraints.sso === option.value"
@@ -217,8 +211,7 @@
                           constraints.sso === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]"
-                      >
+                        ]">
                         {{ option.label }}
                       </button>
                     </div>
@@ -230,18 +223,15 @@
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="hosting-heading"
-                  >
+                    aria-labelledby="hosting-heading">
                     <div
                       v-for="option in hostingOptions"
                       :key="option.value"
-                      class="relative"
-                    >
+                      class="relative">
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.hosting === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"
-                      ></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                       <button
                         @click="constraints.hosting = option.value"
                         :aria-pressed="constraints.hosting === option.value"
@@ -252,8 +242,7 @@
                           constraints.hosting === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]"
-                      >
+                        ]">
                         {{ option.label }}
                       </button>
                     </div>
@@ -261,29 +250,32 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">Required Integrations</legend>
-                  <p class="text-sm text-neutral-600 mb-4">Select all that apply</p>
+                  <legend class="font-semibold text-lg">
+                    Required Integrations
+                  </legend>
+                  <p class="text-sm text-neutral-600 mb-4">
+                    Select all that apply
+                  </p>
                   <div class="flex flex-wrap gap-3 constraint-buttons">
                     <div
                       v-for="integration in integrationOptions"
                       :key="integration"
-                      class="relative"
-                    >
+                      class="relative">
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.integrations.includes(integration)"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"
-                      ></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                       <button
                         @click="toggleIntegration(integration)"
-                        :aria-pressed="constraints.integrations.includes(integration)"
+                        :aria-pressed="
+                          constraints.integrations.includes(integration)
+                        "
                         :class="[
                           'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
                           constraints.integrations.includes(integration)
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]"
-                      >
+                        ]">
                         {{ integration }}
                       </button>
                     </div>
@@ -291,22 +283,21 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">Support Expectations</legend>
+                  <legend class="font-semibold text-lg">
+                    Support Expectations
+                  </legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="support-heading"
-                  >
+                    aria-labelledby="support-heading">
                     <div
                       v-for="option in supportOptions"
                       :key="option.value"
-                      class="relative"
-                    >
+                      class="relative">
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.support === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"
-                      ></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                       <button
                         @click="constraints.support = option.value"
                         :aria-pressed="constraints.support === option.value"
@@ -317,8 +308,7 @@
                           constraints.support === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]"
-                      >
+                        ]">
                         {{ option.label }}
                       </button>
                     </div>
@@ -326,22 +316,21 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">Migration Timeline</legend>
+                  <legend class="font-semibold text-lg">
+                    Migration Timeline
+                  </legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="timeline-heading"
-                  >
+                    aria-labelledby="timeline-heading">
                     <div
                       v-for="option in timelineOptions"
                       :key="option.value"
-                      class="relative"
-                    >
+                      class="relative">
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.timeline === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"
-                      ></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
                       <button
                         @click="constraints.timeline = option.value"
                         :aria-pressed="constraints.timeline === option.value"
@@ -352,8 +341,7 @@
                           constraints.timeline === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]"
-                      >
+                        ]">
                         {{ option.label }}
                       </button>
                     </div>
@@ -367,8 +355,7 @@
               <button
                 @click="resetForm"
                 class="export-btn"
-                title="Clear all form data and start over"
-              >
+                title="Clear all form data and start over">
                 <UIcon name="i-heroicons-arrow-path" />
                 Reset Form
               </button>
@@ -381,17 +368,19 @@
           v-if="charterGenerated"
           class="relative animate-fadeIn"
           role="main"
-          aria-label="Generated Technology Charter"
-        >
+          aria-label="Generated Technology Charter">
           <!-- Dithered shadow -->
-          <div class="absolute top-4 left-4 right-0 bottom-0 dither-shadow"></div>
+          <div
+            class="absolute top-4 left-4 right-0 bottom-0 dither-shadow"></div>
 
           <!-- Charter container -->
           <div
-            class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8"
-          >
-            <div class="text-center mb-8 pb-6 border-b-2 border-black dark:border-white">
-              <h2 class="text-3xl font-bold text-neutral-800" id="charter-title">
+            class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8">
+            <div
+              class="text-center mb-8 pb-6 border-b-2 border-black dark:border-white">
+              <h2
+                class="text-3xl font-bold text-neutral-800"
+                id="charter-title">
                 Technology Charter
               </h2>
               <p class="text-neutral-600 mt-2">
@@ -407,8 +396,7 @@
               <div class="mt-4">
                 <button
                   @click="scrollToTop"
-                  class="text-sm text-neutral-600 hover:text-neutral-800 underline focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded"
-                >
+                  class="text-sm text-neutral-600 hover:text-neutral-800 underline focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded">
                   Back to form
                 </button>
               </div>
@@ -418,10 +406,10 @@
               <section class="mb-8">
                 <h3 class="text-xl font-bold text-neutral-800 mb-3">Purpose</h3>
                 <p class="text-neutral-700 leading-relaxed">
-                  This charter guides our cooperative's technology decisions based on our
-                  shared values and operational needs. It ensures we choose tools that
-                  support our mission while respecting our principles of autonomy,
-                  sustainability, and mutual aid.
+                  This charter guides our cooperative's technology decisions
+                  based on our shared values and operational needs. It ensures
+                  we choose tools that support our mission while respecting our
+                  principles of autonomy, sustainability, and mutual aid.
                 </p>
               </section>
 
@@ -429,21 +417,25 @@
                 class="mb-8"
                 v-if="
                   Object.keys(principleWeights).filter(
-                    (p) => principleWeights[p] > 0 && !nonNegotiables.includes(p)
+                    (p) =>
+                      principleWeights[p] > 0 && !nonNegotiables.includes(p)
                   ).length > 0
-                "
-              >
-                <h3 class="text-xl font-bold text-neutral-800 mb-3">Core Principles</h3>
+                ">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Core Principles
+                </h3>
                 <ul class="space-y-2">
                   <li
                     v-for="principleId in Object.keys(principleWeights).filter(
-                      (p) => principleWeights[p] > 0 && !nonNegotiables.includes(p)
+                      (p) =>
+                        principleWeights[p] > 0 && !nonNegotiables.includes(p)
                     )"
                     :key="principleId"
-                    class="flex items-start"
-                  >
+                    class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span>{{ principles.find((p) => p.id === principleId)?.name }}</span>
+                    <span>{{
+                      principles.find((p) => p.id === principleId)?.name
+                    }}</span>
                   </li>
                 </ul>
               </section>
@@ -453,16 +445,18 @@
                   Non-Negotiable Requirements
                 </h3>
                 <p class="text-red-600 font-semibold mb-3">
-                  Any vendor failing these requirements is automatically disqualified.
+                  Any vendor failing these requirements is automatically
+                  disqualified.
                 </p>
                 <ul class="space-y-2">
                   <li
                     v-for="principleId in nonNegotiables"
                     :key="principleId"
-                    class="flex items-start text-red-600 font-semibold"
-                  >
+                    class="flex items-start text-red-600 font-semibold">
                     <span class="mr-2">→</span>
-                    <span>{{ principles.find((p) => p.id === principleId)?.name }}</span>
+                    <span>{{
+                      principles.find((p) => p.id === principleId)?.name
+                    }}</span>
                   </li>
                 </ul>
               </section>
@@ -477,7 +471,8 @@
                     <span
                       >Authentication:
                       {{
-                        authOptions.find((o) => o.value === constraints.sso)?.label
+                        authOptions.find((o) => o.value === constraints.sso)
+                          ?.label
                       }}</span
                     >
                   </li>
@@ -486,11 +481,15 @@
                     <span
                       >Hosting:
                       {{
-                        hostingOptions.find((o) => o.value === constraints.hosting)?.label
+                        hostingOptions.find(
+                          (o) => o.value === constraints.hosting
+                        )?.label
                       }}</span
                     >
                   </li>
-                  <li v-if="constraints.integrations.length > 0" class="flex items-start">
+                  <li
+                    v-if="constraints.integrations.length > 0"
+                    class="flex items-start">
                     <span class="text-purple-600 mr-2">→</span>
                     <span
                       >Required Integrations:
@@ -502,7 +501,9 @@
                     <span
                       >Support Level:
                       {{
-                        supportOptions.find((o) => o.value === constraints.support)?.label
+                        supportOptions.find(
+                          (o) => o.value === constraints.support
+                        )?.label
                       }}</span
                     >
                   </li>
@@ -511,8 +512,9 @@
                     <span
                       >Migration Timeline:
                       {{
-                        timelineOptions.find((o) => o.value === constraints.timeline)
-                          ?.label
+                        timelineOptions.find(
+                          (o) => o.value === constraints.timeline
+                        )?.label
                       }}</span
                     >
                   </li>
@@ -520,27 +522,27 @@
               </section>
 
               <section class="mb-8">
-                <h3 class="text-xl font-bold text-neutral-800 mb-3">Evaluation Rubric</h3>
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Evaluation Rubric
+                </h3>
                 <p class="text-neutral-700 mb-4">
-                  Score each vendor option using these weighted criteria (0-5 scale):
+                  Score each vendor option using these weighted criteria (0-5
+                  scale):
                 </p>
                 <div class="overflow-x-auto">
                   <table class="w-full border-collapse">
                     <thead>
                       <tr class="bg-neutral-100">
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left">
                           Criterion
                         </th>
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left">
                           Description
                         </th>
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center">
                           Weight
                         </th>
                       </tr>
@@ -549,21 +551,17 @@
                       <tr
                         v-for="weight in sortedWeights"
                         :key="weight.id"
-                        class="hover:bg-neutral-50"
-                      >
+                        class="hover:bg-neutral-50">
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 font-semibold"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 font-semibold">
                           {{ weight.name }}
                         </td>
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-sm text-neutral-600"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-sm text-neutral-600">
                           {{ weight.rubricDescription }}
                         </td>
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600"
-                        >
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600">
                           {{ principleWeights[weight.id] }}
                         </td>
                       </tr>
@@ -580,8 +578,8 @@
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
                     <span
-                      >Any vendor failing a non-negotiable requirement is automatically
-                      eliminated</span
+                      >Any vendor failing a non-negotiable requirement is
+                      automatically eliminated</span
                     >
                   </li>
                   <li class="flex items-start">
@@ -594,8 +592,8 @@
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
                     <span
-                      >When scores are within 10%, choose based on alignment with
-                      cooperative values</span
+                      >When scores are within 10%, choose based on alignment
+                      with cooperative values</span
                     >
                   </li>
                   <li class="flex items-start">
@@ -638,11 +636,16 @@
                   </li>
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span>Document any exceptions with clear justification</span>
+                    <span
+                      >Document any exceptions with clear justification</span
+                    >
                   </li>
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span>Share learnings with other cooperatives in our network</span>
+                    <span
+                      >Share learnings with other cooperatives in our
+                      network</span
+                    >
                   </li>
                 </ul>
               </section>
@@ -656,8 +659,7 @@
     <ExportOptions
       :export-data="exportData"
       filename="tech-charter"
-      title="Technology Charter"
-    />
+      title="Technology Charter" />
   </div>
 </template>
 
@@ -705,13 +707,15 @@ const principles = [
     id: "portability",
     name: "Data Freedom",
     description: "Easy export, no vendor lock-in, migration-friendly",
-    rubricDescription: "Export capabilities, proprietary formats, switching costs",
+    rubricDescription:
+      "Export capabilities, proprietary formats, switching costs",
     defaultWeight: 4,
   },
   {
     id: "opensource",
     name: "Open Source & Community",
-    description: "FOSS preference, transparent development, community governance",
+    description:
+      "FOSS preference, transparent development, community governance",
     rubricDescription: "License type, community involvement, code transparency",
     defaultWeight: 3,
   },
@@ -719,7 +723,8 @@ const principles = [
     id: "sustainability",
     name: "Sustainable Operations",
     description: "Predictable costs, green hosting, efficient resource use",
-    rubricDescription: "Total cost of ownership, carbon footprint, resource efficiency",
+    rubricDescription:
+      "Total cost of ownership, carbon footprint, resource efficiency",
     defaultWeight: 3,
   },
   {
@@ -732,8 +737,10 @@ const principles = [
   {
     id: "usability",
     name: "User Experience",
-    description: "Intuitive interface, minimal learning curve, daily efficiency",
-    rubricDescription: "Onboarding time, user satisfaction, workflow integration",
+    description:
+      "Intuitive interface, minimal learning curve, daily efficiency",
+    rubricDescription:
+      "Onboarding time, user satisfaction, workflow integration",
     defaultWeight: 3,
   },
 ];
@@ -769,7 +776,9 @@ const timelineOptions = [
 const sortedWeights = computed(() => {
   return principles
     .filter((p) => principleWeights.value[p.id] > 0)
-    .sort((a, b) => principleWeights.value[b.id] - principleWeights.value[a.id]);
+    .sort(
+      (a, b) => principleWeights.value[b.id] - principleWeights.value[a.id]
+    );
 });
 
 const canGenerateCharter = computed(() => {
@@ -862,7 +871,9 @@ const resetForm = () => {
 };
 
 const scrollToTop = () => {
-  document.querySelector(".template-wrapper").scrollIntoView({ behavior: "smooth" });
+  document
+    .querySelector(".template-wrapper")
+    .scrollIntoView({ behavior: "smooth" });
 };
 
 // Load saved data
@@ -905,9 +916,13 @@ onMounted(() => {
 });
 
 // Auto-save when data changes
-watch([charterPurpose, principleWeights, nonNegotiables, constraints], autoSave, {
-  deep: true,
-});
+watch(
+  [charterPurpose, principleWeights, nonNegotiables, constraints],
+  autoSave,
+  {
+    deep: true,
+  }
+);
 </script>
 
 <style scoped>
@@ -919,115 +934,6 @@ watch([charterPurpose, principleWeights, nonNegotiables, constraints], autoSave,
   @apply mb-8 relative;
 }
 
-/* Principle card selected styling - using dithered shadow and background */
-.principle-selected {
-  position: relative;
-  background: white;
-}
-
-.principle-selected::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent 0px,
-    transparent 1px,
-    black 1px,
-    black 2px
-  );
-  opacity: 0.1;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.principle-selected > * {
-  position: relative;
-  z-index: 1;
-}
-
-/* Dark mode */
-html.dark .principle-selected {
-  background: #0a0a0a;
-}
-
-html.dark .principle-selected::after {
-  background-image: repeating-linear-gradient(
-    45deg,
-    transparent 0px,
-    transparent 1px,
-    white 1px,
-    white 2px
-  );
-}
-
-/* Text background for better readability */
-.principle-label-bg {
-  background: rgba(255, 255, 255, 0.85);
-  border-radius: 4px;
-}
-
-.principle-label-bg.selected {
-  background: rgba(255, 255, 255, 0.95);
-}
-
-/* Dark mode text backgrounds */
-html.dark .principle-text-bg {
-  background: rgba(10, 10, 10, 0.9);
-}
-
-html.dark .principle-text-bg.selected {
-  background: rgba(10, 10, 10, 0.95);
-}
-
-html.dark .principle-label-bg {
-  background: rgba(10, 10, 10, 0.85);
-}
-
-html.dark .principle-label-bg.selected {
-  background: rgba(10, 10, 10, 0.95);
-}
-
-/* Constraint button selected styling - black background */
-button.constraint-selected {
-  background: black !important;
-  color: white !important;
-}
-
-button.constraint-selected:hover {
-  background: black !important;
-  color: white !important;
-}
-
-/* Dark mode */
-html.dark button.constraint-selected {
-  background: white !important;
-  color: black !important;
-}
-
-html.dark button.constraint-selected:hover {
-  background: white !important;
-  color: black !important;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.animate-fadeIn {
-  animation: fadeIn 0.5s ease-out;
-}
-
 .content-title {
   font-size: 2.5rem;
   font-weight: 700;
diff --git a/pages/wizard.vue b/pages/wizard.vue
deleted file mode 100644
index 46f2bf7..0000000
--- a/pages/wizard.vue
+++ /dev/null
@@ -1,372 +0,0 @@
-<template>
-  <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
-    <section class="py-8 max-w-4xl mx-auto">
-      <!-- Header -->
-      <div class="mb-10">
-        <h1 class="text-5xl font-black text-black mb-4 leading-tight">
-          Set up your co-op
-        </h1>
-        <p class="text-xl text-neutral-700 font-medium">
-          Get your worker-owned co-op configured in a few simple steps. Jump to
-          any step or work through them in order.
-        </p>
-      </div>
-
-      <!-- Completed State -->
-      <div v-if="isCompleted" class="text-center py-12">
-        <div
-          class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-          <UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
-        </div>
-        <h2 class="text-2xl font-bold text-black mb-2">You're all set!</h2>
-        <p class="text-neutral-600 mb-6">
-          Your co-op is configured and ready to go.
-        </p>
-
-        <div class="flex justify-center gap-4">
-          <UButton
-            variant="outline"
-            color="gray"
-            @click="restartWizard"
-            :disabled="isResetting">
-            Start Over
-          </UButton>
-          <UButton
-            @click="navigateTo('/scenarios')"
-            size="lg"
-            variant="solid"
-            color="black">
-            Go to Dashboard
-          </UButton>
-        </div>
-      </div>
-
-      <!-- Vertical Steps Layout -->
-      <div v-else class="space-y-4">
-        <!-- Step 1: Members -->
-        <div
-          class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
-          <div
-            class="p-8 cursor-pointer hover:bg-yellow-50 transition-colors"
-            :class="{ 'bg-yellow-100': focusedStep === 1 }"
-            @click="setFocusedStep(1)">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                  :class="
-                    membersStore.isValid
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-white text-black border-2 border-black'
-                  ">
-                  <UIcon
-                    v-if="membersStore.isValid"
-                    name="i-heroicons-check"
-                    class="w-4 h-4" />
-                  <span v-else>1</span>
-                </div>
-                <div>
-                  <h3 class="text-2xl font-black text-black">Add your team</h3>
-                </div>
-              </div>
-              <UIcon
-                name="i-heroicons-chevron-down"
-                class="w-6 h-6 text-black transition-transform font-bold"
-                :class="{ 'rotate-180': focusedStep === 1 }" />
-            </div>
-          </div>
-
-          <div v-if="focusedStep === 1" class="p-8 bg-yellow-25">
-            <WizardMembersStep @save-status="handleSaveStatus" />
-          </div>
-        </div>
-
-        <!-- Step 2: Wage -->
-        <div
-          class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
-          <div
-            class="p-8 cursor-pointer hover:bg-green-50 transition-colors"
-            :class="{ 'bg-green-100': focusedStep === 2 }"
-            @click="setFocusedStep(2)">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                  :class="
-                    policiesStore.isValid
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-white text-black border-2 border-black'
-                  ">
-                  <UIcon
-                    v-if="policiesStore.isValid"
-                    name="i-heroicons-check"
-                    class="w-4 h-4" />
-                  <span v-else>2</span>
-                </div>
-                <div>
-                  <h3 class="text-2xl font-black text-black">Set your wage</h3>
-                </div>
-              </div>
-              <UIcon
-                name="i-heroicons-chevron-down"
-                class="w-6 h-6 text-black transition-transform font-bold"
-                :class="{ 'rotate-180': focusedStep === 2 }" />
-            </div>
-          </div>
-
-          <div v-if="focusedStep === 2" class="p-8 bg-green-25">
-            <WizardPoliciesStep @save-status="handleSaveStatus" />
-          </div>
-        </div>
-
-        <!-- Step 3: Costs -->
-        <div
-          class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
-          <div
-            class="p-8 cursor-pointer hover:bg-blue-50 transition-colors"
-            :class="{ 'bg-blue-100': focusedStep === 3 }"
-            @click="setFocusedStep(3)">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full bg-green-100 text-green-700 flex items-center justify-center text-sm font-bold">
-                  <UIcon name="i-heroicons-check" class="w-4 h-4" />
-                </div>
-                <div>
-                  <h3 class="text-2xl font-black text-black">Monthly costs</h3>
-                </div>
-              </div>
-              <UIcon
-                name="i-heroicons-chevron-down"
-                class="w-6 h-6 text-black transition-transform font-bold"
-                :class="{ 'rotate-180': focusedStep === 3 }" />
-            </div>
-          </div>
-
-          <div v-if="focusedStep === 3" class="p-8 bg-blue-25">
-            <WizardCostsStep @save-status="handleSaveStatus" />
-          </div>
-        </div>
-
-        <!-- Step 4: Revenue -->
-        <div
-          class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
-          <div
-            class="p-8 cursor-pointer hover:bg-purple-50 transition-colors"
-            :class="{ 'bg-purple-100': focusedStep === 4 }"
-            @click="setFocusedStep(4)">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                  :class="
-                    streamsStore.hasValidStreams
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-white text-black border-2 border-black'
-                  ">
-                  <UIcon
-                    v-if="streamsStore.hasValidStreams"
-                    name="i-heroicons-check"
-                    class="w-4 h-4" />
-                  <span v-else>4</span>
-                </div>
-                <div>
-                  <h3 class="text-2xl font-black text-black">
-                    Revenue streams
-                  </h3>
-                </div>
-              </div>
-              <UIcon
-                name="i-heroicons-chevron-down"
-                class="w-6 h-6 text-black transition-transform font-bold"
-                :class="{ 'rotate-180': focusedStep === 4 }" />
-            </div>
-          </div>
-
-          <div v-if="focusedStep === 4" class="p-8 bg-purple-25">
-            <WizardRevenueStep @save-status="handleSaveStatus" />
-          </div>
-        </div>
-
-        <!-- Step 5: Review -->
-        <div
-          class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
-          <div
-            class="p-8 cursor-pointer hover:bg-orange-50 transition-colors"
-            :class="{ 'bg-orange-100': focusedStep === 5 }"
-            @click="setFocusedStep(5)">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-3">
-                <div
-                  class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                  :class="
-                    canComplete
-                      ? 'bg-green-100 text-green-700'
-                      : 'bg-white text-black border-2 border-black'
-                  ">
-                  <UIcon
-                    v-if="canComplete"
-                    name="i-heroicons-check"
-                    class="w-4 h-4" />
-                  <span v-else>5</span>
-                </div>
-                <div>
-                  <h3 class="text-2xl font-black text-black">
-                    Review & finish
-                  </h3>
-                </div>
-              </div>
-              <UIcon
-                name="i-heroicons-chevron-down"
-                class="w-6 h-6 text-black transition-transform font-bold"
-                :class="{ 'rotate-180': focusedStep === 5 }" />
-            </div>
-          </div>
-
-          <div v-if="focusedStep === 5" class="p-8 bg-orange-25">
-            <WizardReviewStep @complete="completeWizard" @reset="resetWizard" />
-          </div>
-        </div>
-
-        <!-- Progress Actions -->
-        <div class="flex justify-between items-center pt-8">
-          <UButton
-            variant="outline"
-            color="red"
-            @click="resetWizard"
-            :disabled="isResetting">
-            Start Over
-          </UButton>
-
-          <div class="flex items-center gap-4">
-            <!-- Save status -->
-            <div class="flex items-center gap-2 text-sm">
-              <UIcon
-                v-if="saveStatus === 'saving'"
-                name="i-heroicons-arrow-path"
-                class="w-4 h-4 animate-spin text-neutral-500" />
-              <UIcon
-                v-if="saveStatus === 'saved'"
-                name="i-heroicons-check-circle"
-                class="w-4 h-4 text-green-500" />
-              <span v-if="saveStatus === 'saving'" class="text-neutral-500"
-                >Saving...</span
-              >
-              <span v-if="saveStatus === 'saved'" class="text-green-600"
-                >Saved</span
-              >
-            </div>
-
-            <UButton
-              v-if="canComplete"
-              @click="completeWizard"
-              size="lg"
-              variant="solid"
-              color="black">
-              Complete Setup
-            </UButton>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-// Stores
-const membersStore = useMembersStore();
-const policiesStore = usePoliciesStore();
-const streamsStore = useStreamsStore();
-const budgetStore = useBudgetStore();
-const wizardStore = useWizardStore();
-
-// UI state
-const focusedStep = ref(1);
-const saveStatus = ref("");
-const isResetting = ref(false);
-const isCompleted = ref(false);
-
-// Computed validation
-const canComplete = computed(
-  () =>
-    membersStore.isValid &&
-    policiesStore.isValid &&
-    streamsStore.hasValidStreams
-);
-
-// Save status handler
-function handleSaveStatus(status: "saving" | "saved" | "error") {
-  saveStatus.value = status;
-  if (status === "saved") {
-    // Clear status after delay
-    setTimeout(() => {
-      if (saveStatus.value === "saved") {
-        saveStatus.value = "";
-      }
-    }, 2000);
-  }
-}
-
-// Step management
-function setFocusedStep(step: number) {
-  // Toggle if clicking on already focused step
-  if (focusedStep.value === step) {
-    focusedStep.value = 0; // Close the section
-  } else {
-    focusedStep.value = step; // Open the section
-  }
-}
-
-function completeWizard() {
-  // Mark setup as complete and show restart button for testing
-  isCompleted.value = true;
-}
-
-async function resetWizard() {
-  isResetting.value = true;
-
-  // Reset all stores
-  membersStore.resetMembers();
-  policiesStore.resetPolicies();
-  streamsStore.resetStreams();
-  budgetStore.resetBudgetOverhead();
-
-  // Reset wizard state
-  wizardStore.reset();
-  saveStatus.value = "";
-
-  // Small delay for UX
-  await new Promise((resolve) => setTimeout(resolve, 300));
-  isResetting.value = false;
-}
-
-async function restartWizard() {
-  isResetting.value = true;
-
-  // Reset completion state
-  isCompleted.value = false;
-  focusedStep.value = 1;
-
-  // Reset all stores and wizard state
-  membersStore.resetMembers();
-  policiesStore.resetPolicies();
-  streamsStore.resetStreams();
-  budgetStore.resetBudgetOverhead();
-  wizardStore.reset();
-  saveStatus.value = "";
-
-  // Small delay for UX
-  await new Promise((resolve) => setTimeout(resolve, 300));
-  isResetting.value = false;
-}
-
-// SEO
-useSeoMeta({
-  title: "Setup Wizard - Configure Your Co-op",
-  description:
-    "Set up your co-op members, policies, costs, and revenue streams.",
-});
-</script>
diff --git a/pages/wizards.vue b/pages/wizards.vue
index cefeb3f..55cda9f 100644
--- a/pages/wizards.vue
+++ b/pages/wizards.vue
@@ -1,11 +1,7 @@
 <template>
   <div>
-    <!-- Wizard Subnav -->
-    <WizardSubnav />
-
     <div
       class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
-      style="font-family: 'Ubuntu', 'Ubuntu Mono', monospace"
     >
       <div class="max-w-6xl mx-auto px-4 relative">
         <div class="mb-8">
@@ -72,69 +68,6 @@
             </div>
           </div>
         </div>
-
-        <div class="mt-12 help-section">
-          <div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
-          <div
-            class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
-          >
-            <h2
-              class="text-xl font-semibold text-neutral-900 dark:text-white mb-3"
-              style="font-family: 'Ubuntu', monospace"
-            >
-              How Wizards Work
-            </h2>
-            <div class="grid md:grid-cols-2 gap-6 text-neutral-900 dark:text-neutral-100">
-              <div>
-                <h3
-                  class="font-medium mb-2 text-neutral-900 dark:text-white"
-                  style="font-family: 'Ubuntu Mono', monospace"
-                >
-                  FILL OUT FORMS
-                </h3>
-                <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  Wizards include form fields for all necessary information. Data
-                  auto-saves as you type.
-                </p>
-              </div>
-              <div>
-                <h3
-                  class="font-medium mb-2 text-neutral-900 dark:text-white"
-                  style="font-family: 'Ubuntu Mono', monospace"
-                >
-                  LOCAL STORAGE
-                </h3>
-                <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  All data saves in your browser only. Nothing is sent to external
-                  servers.
-                </p>
-              </div>
-              <div>
-                <h3
-                  class="font-medium mb-2 text-neutral-900 dark:text-white"
-                  style="font-family: 'Ubuntu Mono', monospace"
-                >
-                  EXPORT OPTIONS
-                </h3>
-                <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  Download as PDF, plain text, Markdown.
-                </p>
-              </div>
-              <div>
-                <h3
-                  class="font-medium mb-2 text-neutral-900 dark:text-white"
-                  style="font-family: 'Ubuntu Mono', monospace"
-                >
-                  RESUME ANYTIME
-                </h3>
-                <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  Come back later and your progress will be saved. Clear browser data to
-                  start fresh.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -158,7 +91,7 @@ const templates = [
   },
   {
     id: "conflict-resolution-framework",
-    name: "Conflict Resolution Framework",
+    name: "Conflict Resolution",
     description:
       "A customizable framework for handling conflicts with restorative justice principles, clear processes, and organizational values alignment.",
     icon: "i-heroicons-scale",
@@ -310,35 +243,4 @@ useHead({
   background: white;
   z-index: -1;
 }
-
-.disabled-button {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.template-card > *,
-.help-section > *,
-button,
-.px-4,
-div[class*="border"] {
-  border-radius: 0 !important;
-}
-
-* {
-  border-radius: 0 !important;
-  font-family: "Ubuntu", monospace;
-}
-
-html.dark :deep(.text-neutral-700),
-html.dark :deep(.text-neutral-500),
-html.dark :deep(.bg-neutral-50),
-html.dark :deep(.bg-neutral-100) {
-  color: white !important;
-  background-color: #0a0a0a !important;
-}
-
-:deep(.border-neutral-200),
-:deep(.border-neutral-300) {
-  border-color: black !important;
-}
 </style>
diff --git a/sample/skillsToOffersSamples.ts b/sample/skillsToOffersSamples.ts
new file mode 100644
index 0000000..7cb8da2
--- /dev/null
+++ b/sample/skillsToOffersSamples.ts
@@ -0,0 +1,40 @@
+import type { Member, SkillTag, ProblemTag } from "~/types/coaching";
+import { skillsCatalog, problemsCatalog } from "~/data/skillsProblems";
+
+export const membersSample: Member[] = [
+  {
+    id: "sample-1",
+    name: "Maya Chen",
+    role: "Design Lead",
+    hourly: 32,
+    availableHrs: 40
+  },
+  {
+    id: "sample-2", 
+    name: "Alex Rivera",
+    role: "Developer",
+    hourly: 45,
+    availableHrs: 30
+  },
+  {
+    id: "sample-3",
+    name: "Jordan Blake",
+    role: "Content Writer", 
+    hourly: 28,
+    availableHrs: 20
+  }
+];
+
+export const skillsCatalogSample: SkillTag[] = skillsCatalog;
+
+export const problemsCatalogSample: ProblemTag[] = problemsCatalog;
+
+// Pre-selected sample data for quick demos
+export const sampleSelections = {
+  selectedSkillsByMember: {
+    "sample-1": ["design", "facilitation"], // Maya: Design + Facilitation
+    "sample-2": ["dev", "pm"],              // Alex: Dev + PM  
+    "sample-3": ["writing", "marketing"]    // Jordan: Writing + Marketing
+  },
+  selectedProblems: ["unclear-pitch", "need-landing-store-page"]
+};
\ No newline at end of file
diff --git a/stores/budget.ts b/stores/budget.ts
index 1ef6714..eb5f511 100644
--- a/stores/budget.ts
+++ b/stores/budget.ts
@@ -4,24 +4,143 @@ export const useBudgetStore = defineStore(
   "budget",
   () => {
     // Schema version for persistence
-    const schemaVersion = "1.0";
+    const schemaVersion = "2.0";
 
-    // Monthly budget lines by period (YYYY-MM)
+    // Canonical categories from WizardRevenueStep - matches the wizard exactly
+    const revenueCategories = ref([
+      'Games & Products',
+      'Services & Contracts', 
+      'Grants & Funding',
+      'Community Support',
+      'Partnerships',
+      'Investment Income',
+      'In-Kind Contributions'
+    ]);
+
+    // Revenue subcategories by main category (for reference and grouping)
+    const revenueSubcategories = ref({
+      'Games & Products': ['Direct sales', 'Platform revenue share', 'DLC/expansions', 'Merchandise'],
+      'Services & Contracts': ['Contract development', 'Consulting', 'Workshops/teaching', 'Technical services'],
+      'Grants & Funding': ['Government funding', 'Arts council grants', 'Foundation support', 'Research grants'],
+      'Community Support': ['Patreon/subscriptions', 'Crowdfunding', 'Donations', 'Mutual aid received'],
+      'Partnerships': ['Corporate partnerships', 'Academic partnerships', 'Sponsorships'],
+      'Investment Income': ['Impact investment', 'Venture capital', 'Loans'],
+      'In-Kind Contributions': ['Office space', 'Equipment/hardware', 'Software licenses', 'Professional services', 'Marketing/PR services', 'Legal services']
+    });
+
+    const expenseCategories = ref([
+      'Salaries & Benefits',
+      'Development Costs',
+      'Equipment & Technology', 
+      'Marketing & Outreach',
+      'Office & Operations',
+      'Legal & Professional',
+      'Other Expenses'
+    ]);
+
+    // NEW: Budget worksheet structure (starts empty, populated from wizard data)
+    const budgetWorksheet = ref({
+      revenue: [],
+      expenses: []
+    });
+
+    // Track if worksheet has been initialized from wizard data
+    const isInitialized = ref(false);
+
+    // LEGACY: Keep for backward compatibility
     const budgetLines = ref({});
-
-    // Overhead costs (recurring monthly)
     const overheadCosts = ref([]);
-
-    // Production costs (variable monthly)
     const productionCosts = ref([]);
 
-    // Current selected period - use current month/year
+    // Computed grouped data for category headers
+    const groupedRevenue = computed(() => {
+      const groups = {};
+      revenueCategories.value.forEach(category => {
+        groups[category] = budgetWorksheet.value.revenue.filter(item => item.mainCategory === category);
+      });
+      return groups;
+    });
+
+    const groupedExpenses = computed(() => {
+      const groups = {};
+      expenseCategories.value.forEach(category => {
+        groups[category] = budgetWorksheet.value.expenses.filter(item => item.mainCategory === category);
+      });
+      return groups;
+    });
+
+    // Computed totals for budget worksheet (legacy - keep for backward compatibility)
+    const budgetTotals = computed(() => {
+      const years = ['year1', 'year2', 'year3'];
+      const scenarios = ['best', 'worst', 'mostLikely'];
+      const totals = {};
+
+      years.forEach(year => {
+        totals[year] = {};
+        scenarios.forEach(scenario => {
+          // Calculate revenue total
+          const revenueTotal = budgetWorksheet.value.revenue.reduce((sum, item) => {
+            return sum + (item.values?.[year]?.[scenario] || 0);
+          }, 0);
+
+          // Calculate expenses total
+          const expensesTotal = budgetWorksheet.value.expenses.reduce((sum, item) => {
+            return sum + (item.values?.[year]?.[scenario] || 0);
+          }, 0);
+
+          // Calculate net income
+          const netIncome = revenueTotal - expensesTotal;
+
+          totals[year][scenario] = {
+            revenue: revenueTotal,
+            expenses: expensesTotal,
+            net: netIncome
+          };
+        });
+      });
+
+      return totals;
+    });
+
+    // Monthly totals computation
+    const monthlyTotals = computed(() => {
+      const totals = {};
+      
+      // Generate month keys for next 12 months
+      const today = new Date();
+      for (let i = 0; i < 12; i++) {
+        const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+        const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+        
+        // Calculate revenue total for this month
+        const revenueTotal = budgetWorksheet.value.revenue.reduce((sum, item) => {
+          return sum + (item.monthlyValues?.[monthKey] || 0);
+        }, 0);
+
+        // Calculate expenses total for this month
+        const expensesTotal = budgetWorksheet.value.expenses.reduce((sum, item) => {
+          return sum + (item.monthlyValues?.[monthKey] || 0);
+        }, 0);
+
+        // Calculate net income
+        const netIncome = revenueTotal - expensesTotal;
+
+        totals[monthKey] = {
+          revenue: revenueTotal,
+          expenses: expensesTotal,
+          net: netIncome
+        };
+      }
+      
+      return totals;
+    });
+
+    // LEGACY: Keep for backward compatibility
     const currentDate = new Date();
     const currentYear = currentDate.getFullYear();
     const currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
     const currentPeriod = ref(`${currentYear}-${currentMonth}`);
 
-    // Computed current budget
     const currentBudget = computed(() => {
       return (
         budgetLines.value[currentPeriod.value] || {
@@ -100,13 +219,418 @@ export const useBudgetStore = defineStore(
       currentPeriod.value = period;
     }
 
+    // Initialize worksheet from wizard data
+    async function initializeFromWizardData() {
+      if (isInitialized.value && budgetWorksheet.value.revenue.length > 0) {
+        console.log('Already initialized with data, skipping...');
+        return;
+      }
+
+      console.log('Initializing budget from wizard data...');
+
+      // Import stores dynamically to avoid circular deps
+      const { useStreamsStore } = await import('./streams');
+      const { useMembersStore } = await import('./members');
+      const { usePoliciesStore } = await import('./policies');
+      
+      const streamsStore = useStreamsStore();
+      const membersStore = useMembersStore();
+      const policiesStore = usePoliciesStore();
+
+      console.log('Streams:', streamsStore.streams.length, 'streams');
+      console.log('Members capacity:', membersStore.capacityTotals);
+      console.log('Policies wage:', policiesStore.equalHourlyWage);
+
+      // Clear existing data
+      budgetWorksheet.value.revenue = [];
+      budgetWorksheet.value.expenses = [];
+
+      // Add revenue streams from wizard
+      if (streamsStore.streams.length === 0) {
+        console.log('No wizard streams found, adding sample data');
+        // Initialize with minimal demo if no wizard data exists
+        await streamsStore.initializeWithFixtures();
+      }
+      
+      streamsStore.streams.forEach(stream => {
+        const monthlyAmount = stream.targetMonthlyAmount || 0;
+        console.log('Adding stream:', stream.name, 'category:', stream.category, 'subcategory:', stream.subcategory, 'amount:', monthlyAmount);
+        console.log('Full stream object:', stream);
+        
+        // Simple category mapping - just map the key categories we know exist
+        let mappedCategory = 'Games & Products'; // Default
+        const categoryLower = (stream.category || '').toLowerCase();
+        if (categoryLower === 'games' || categoryLower === 'product') mappedCategory = 'Games & Products';
+        else if (categoryLower === 'services' || categoryLower === 'service') mappedCategory = 'Services & Contracts';
+        else if (categoryLower === 'grants' || categoryLower === 'grant') mappedCategory = 'Grants & Funding';
+        else if (categoryLower === 'community') mappedCategory = 'Community Support';
+        else if (categoryLower === 'partnerships' || categoryLower === 'partnership') mappedCategory = 'Partnerships';
+        else if (categoryLower === 'investment') mappedCategory = 'Investment Income';
+        
+        console.log('Mapped category from', stream.category, 'to', mappedCategory);
+        
+        // Create monthly values - split the annual target evenly across 12 months
+        const monthlyValues = {};
+        const today = new Date();
+        for (let i = 0; i < 12; i++) {
+          const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+          const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+          monthlyValues[monthKey] = monthlyAmount;
+        }
+        console.log('Created monthly values for', stream.name, ':', monthlyValues);
+        
+        budgetWorksheet.value.revenue.push({
+          id: `revenue-${stream.id}`,
+          name: stream.name,
+          mainCategory: mappedCategory,
+          subcategory: stream.subcategory || 'Direct sales', // Use actual subcategory from stream
+          source: 'wizard',
+          monthlyValues,
+          values: {
+            year1: { best: monthlyAmount * 12, worst: monthlyAmount * 6, mostLikely: monthlyAmount * 10 },
+            year2: { best: monthlyAmount * 15, worst: monthlyAmount * 8, mostLikely: monthlyAmount * 12 },
+            year3: { best: monthlyAmount * 18, worst: monthlyAmount * 10, mostLikely: monthlyAmount * 15 }
+          }
+        });
+      });
+
+      // Add payroll from wizard data
+      const totalHours = membersStore.capacityTotals.targetHours || 0;
+      const hourlyWage = policiesStore.equalHourlyWage || 0;
+      const oncostPct = policiesStore.payrollOncostPct || 0;
+      if (totalHours > 0 && hourlyWage > 0) {
+        const monthlyPayroll = totalHours * hourlyWage * (1 + oncostPct / 100);
+        
+        // Create monthly values for payroll
+        const monthlyValues = {};
+        const today = new Date();
+        for (let i = 0; i < 12; i++) {
+          const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+          const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+          monthlyValues[monthKey] = monthlyPayroll;
+        }
+        
+        budgetWorksheet.value.expenses.push({
+          id: 'expense-payroll',
+          name: 'Payroll',
+          mainCategory: 'Salaries & Benefits',
+          subcategory: 'Base wages and benefits',
+          source: 'wizard',
+          monthlyValues,
+          values: {
+            year1: { best: monthlyPayroll * 12, worst: monthlyPayroll * 8, mostLikely: monthlyPayroll * 12 },
+            year2: { best: monthlyPayroll * 14, worst: monthlyPayroll * 10, mostLikely: monthlyPayroll * 13 },
+            year3: { best: monthlyPayroll * 16, worst: monthlyPayroll * 12, mostLikely: monthlyPayroll * 15 }
+          }
+        });
+      }
+
+      // Add overhead costs from wizard
+      overheadCosts.value.forEach(cost => {
+        if (cost.amount > 0) {
+          const annualAmount = cost.amount * 12;
+          // Map overhead cost categories to expense categories
+          let expenseCategory = 'Other Expenses'; // Default
+          if (cost.category === 'Operations') expenseCategory = 'Office & Operations';
+          else if (cost.category === 'Technology') expenseCategory = 'Equipment & Technology';
+          else if (cost.category === 'Legal') expenseCategory = 'Legal & Professional';
+          else if (cost.category === 'Marketing') expenseCategory = 'Marketing & Outreach';
+          
+          // Create monthly values for overhead costs
+          const monthlyValues = {};
+          const today = new Date();
+          for (let i = 0; i < 12; i++) {
+            const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+            const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+            monthlyValues[monthKey] = cost.amount;
+          }
+          
+          budgetWorksheet.value.expenses.push({
+            id: `expense-${cost.id}`,
+            name: cost.name,
+            mainCategory: expenseCategory,
+            subcategory: cost.name, // Use the cost name as subcategory
+            source: 'wizard',
+            monthlyValues,
+            values: {
+              year1: { best: annualAmount, worst: annualAmount * 0.8, mostLikely: annualAmount },
+              year2: { best: annualAmount * 1.1, worst: annualAmount * 0.9, mostLikely: annualAmount * 1.05 },
+              year3: { best: annualAmount * 1.2, worst: annualAmount, mostLikely: annualAmount * 1.1 }
+            }
+          });
+        }
+      });
+
+      // Add production costs from wizard
+      productionCosts.value.forEach(cost => {
+        if (cost.amount > 0) {
+          const annualAmount = cost.amount * 12;
+          // Create monthly values for production costs
+          const monthlyValues = {};
+          const today = new Date();
+          for (let i = 0; i < 12; i++) {
+            const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+            const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+            monthlyValues[monthKey] = cost.amount;
+          }
+          
+          budgetWorksheet.value.expenses.push({
+            id: `expense-${cost.id}`,
+            name: cost.name,
+            mainCategory: 'Development Costs',
+            subcategory: cost.name, // Use the cost name as subcategory
+            source: 'wizard',
+            monthlyValues,
+            values: {
+              year1: { best: annualAmount, worst: annualAmount * 0.7, mostLikely: annualAmount * 0.9 },
+              year2: { best: annualAmount * 1.2, worst: annualAmount * 0.8, mostLikely: annualAmount },
+              year3: { best: annualAmount * 1.3, worst: annualAmount * 0.9, mostLikely: annualAmount * 1.1 }
+            }
+          });
+        }
+      });
+
+      // If still no data after initialization, add a sample row
+      if (budgetWorksheet.value.revenue.length === 0) {
+        console.log('Adding sample revenue line');
+        // Create monthly values for sample revenue
+        const monthlyValues = {};
+        const today = new Date();
+        for (let i = 0; i < 12; i++) {
+          const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+          const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+          monthlyValues[monthKey] = 667; // ~8000/12
+        }
+        
+        budgetWorksheet.value.revenue.push({
+          id: 'revenue-sample',
+          name: 'Sample Revenue',
+          mainCategory: 'Games & Products',
+          subcategory: 'Direct sales',
+          source: 'user',
+          monthlyValues,
+          values: {
+            year1: { best: 10000, worst: 5000, mostLikely: 8000 },
+            year2: { best: 12000, worst: 6000, mostLikely: 10000 },
+            year3: { best: 15000, worst: 8000, mostLikely: 12000 }
+          }
+        });
+      }
+
+      if (budgetWorksheet.value.expenses.length === 0) {
+        console.log('Adding sample expense line');
+        // Create monthly values for sample expense
+        const monthlyValues = {};
+        const today = new Date();
+        for (let i = 0; i < 12; i++) {
+          const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+          const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+          monthlyValues[monthKey] = 67; // ~800/12
+        }
+        
+        budgetWorksheet.value.expenses.push({
+          id: 'expense-sample',
+          name: 'Sample Expense',
+          mainCategory: 'Other Expenses',
+          subcategory: 'Miscellaneous',
+          source: 'user',
+          monthlyValues,
+          values: {
+            year1: { best: 1000, worst: 500, mostLikely: 800 },
+            year2: { best: 1200, worst: 600, mostLikely: 1000 },
+            year3: { best: 1500, worst: 800, mostLikely: 1200 }
+          }
+        });
+      }
+
+      // Debug: Log all revenue items and their categories
+      console.log('Final revenue items:');
+      budgetWorksheet.value.revenue.forEach(item => {
+        console.log(`- ${item.name}: ${item.mainCategory} > ${item.subcategory} (${item.values.year1.mostLikely})`);
+      });
+      
+      console.log('Final expense items:');
+      budgetWorksheet.value.expenses.forEach(item => {
+        console.log(`- ${item.name}: ${item.mainCategory} > ${item.subcategory} (${item.values.year1.mostLikely})`);
+      });
+
+      // Ensure all items have monthlyValues and new structure - migrate existing items
+      [...budgetWorksheet.value.revenue, ...budgetWorksheet.value.expenses].forEach(item => {
+        // Migrate to new structure if needed
+        if (item.category && !item.mainCategory) {
+          console.log('Migrating item structure for:', item.name);
+          item.mainCategory = item.category; // Old category becomes mainCategory
+          
+          // Set appropriate subcategory based on the main category and item name
+          if (item.category === 'Games & Products') {
+            const gameSubcategories = ['Direct sales', 'Platform revenue share', 'DLC/expansions', 'Merchandise'];
+            item.subcategory = gameSubcategories.includes(item.name) ? item.name : 'Direct sales';
+          } else if (item.category === 'Services & Contracts') {
+            const serviceSubcategories = ['Contract development', 'Consulting', 'Workshops/teaching', 'Technical services'];
+            item.subcategory = serviceSubcategories.includes(item.name) ? item.name : 'Contract development';
+          } else if (item.category === 'Investment Income') {
+            const investmentSubcategories = ['Impact investment', 'Venture capital', 'Loans'];
+            item.subcategory = investmentSubcategories.includes(item.name) ? item.name : 'Impact investment';
+          } else if (item.category === 'Salaries & Benefits') {
+            item.subcategory = 'Base wages and benefits';
+          } else if (item.category === 'Office & Operations') {
+            // Map specific office tools to appropriate subcategories
+            if (item.name.toLowerCase().includes('rent') || item.name.toLowerCase().includes('office')) {
+              item.subcategory = 'Rent';
+            } else if (item.name.toLowerCase().includes('util')) {
+              item.subcategory = 'Utilities';
+            } else if (item.name.toLowerCase().includes('insurance')) {
+              item.subcategory = 'Insurance';
+            } else {
+              item.subcategory = 'Office supplies';
+            }
+          } else {
+            // For other categories, use appropriate default
+            item.subcategory = 'Miscellaneous';
+          }
+          
+          delete item.category; // Remove old property
+        }
+        
+        if (!item.monthlyValues) {
+          console.log('Migrating item to monthly values:', item.name);
+          item.monthlyValues = {};
+          const today = new Date();
+          for (let i = 0; i < 12; i++) {
+            const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+            const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+            // Try to use most likely value divided by 12, or default to 0
+            const yearlyValue = item.values?.year1?.mostLikely || 0;
+            item.monthlyValues[monthKey] = Math.round(yearlyValue / 12);
+          }
+          console.log('Added monthly values to', item.name, ':', item.monthlyValues);
+        }
+      });
+
+      console.log('Initialization complete. Revenue items:', budgetWorksheet.value.revenue.length, 'Expense items:', budgetWorksheet.value.expenses.length);
+
+      isInitialized.value = true;
+    }
+
+    // NEW: Budget worksheet functions
+    function updateBudgetValue(category, itemId, year, scenario, value) {
+      const items = budgetWorksheet.value[category];
+      const item = items.find(i => i.id === itemId);
+      if (item) {
+        item.values[year][scenario] = Number(value) || 0;
+      }
+    }
+
+    function updateMonthlyValue(category, itemId, monthKey, value) {
+      const items = budgetWorksheet.value[category];
+      const item = items.find(i => i.id === itemId);
+      if (item) {
+        if (!item.monthlyValues) {
+          item.monthlyValues = {};
+        }
+        item.monthlyValues[monthKey] = Number(value) || 0;
+      }
+    }
+
+    function addBudgetItem(category, name, selectedCategory = '') {
+      const id = `${category}-${Date.now()}`;
+      
+      // Create empty monthly values for next 12 months
+      const monthlyValues = {};
+      const today = new Date();
+      for (let i = 0; i < 12; i++) {
+        const date = new Date(today.getFullYear(), today.getMonth() + i, 1);
+        const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+        monthlyValues[monthKey] = 0;
+      }
+      
+      const newItem = {
+        id,
+        name,
+        mainCategory: selectedCategory || (category === 'revenue' ? 'Games & Products' : 'Other Expenses'),
+        subcategory: '', // Will be set by user via dropdown
+        source: 'user',
+        monthlyValues,
+        values: {
+          year1: { best: 0, worst: 0, mostLikely: 0 },
+          year2: { best: 0, worst: 0, mostLikely: 0 },
+          year3: { best: 0, worst: 0, mostLikely: 0 }
+        }
+      };
+      budgetWorksheet.value[category].push(newItem);
+      return id;
+    }
+
+    function removeBudgetItem(category, itemId) {
+      const items = budgetWorksheet.value[category];
+      const index = items.findIndex(i => i.id === itemId);
+      if (index > -1) {
+        items.splice(index, 1);
+      }
+    }
+
+    function renameBudgetItem(category, itemId, newName) {
+      const items = budgetWorksheet.value[category];
+      const item = items.find(i => i.id === itemId);
+      if (item) {
+        item.name = newName;
+      }
+    }
+
+    function updateBudgetCategory(category, itemId, newCategory) {
+      const items = budgetWorksheet.value[category];
+      const item = items.find(i => i.id === itemId);
+      if (item) {
+        item.category = newCategory;
+      }
+    }
+
+    function addCustomCategory(type, categoryName) {
+      if (type === 'revenue' && !revenueCategories.value.includes(categoryName)) {
+        revenueCategories.value.push(categoryName);
+      } else if (type === 'expenses' && !expenseCategories.value.includes(categoryName)) {
+        expenseCategories.value.push(categoryName);
+      }
+    }
+
     // Reset function
     function resetBudgetOverhead() {
       overheadCosts.value = [];
       productionCosts.value = [];
     }
 
+    function resetBudgetWorksheet() {
+      // Reset all values to 0 but keep the structure
+      [...budgetWorksheet.value.revenue, ...budgetWorksheet.value.expenses].forEach(item => {
+        Object.keys(item.values).forEach(year => {
+          Object.keys(item.values[year]).forEach(scenario => {
+            item.values[year][scenario] = 0;
+          });
+        });
+      });
+    }
+
     return {
+      // NEW: Budget worksheet
+      budgetWorksheet,
+      budgetTotals,
+      monthlyTotals,
+      revenueCategories,
+      expenseCategories,
+      revenueSubcategories,
+      groupedRevenue,
+      groupedExpenses,
+      isInitialized,
+      initializeFromWizardData,
+      updateBudgetValue,
+      updateMonthlyValue,
+      addBudgetItem,
+      removeBudgetItem,
+      renameBudgetItem,
+      updateBudgetCategory,
+      addCustomCategory,
+      resetBudgetWorksheet,
+      // LEGACY: Keep for backward compatibility
       budgetLines,
       overheadCosts,
       productionCosts,
@@ -128,7 +652,7 @@ export const useBudgetStore = defineStore(
   {
     persist: {
       key: "urgent-tools-budget",
-      paths: ["overheadCosts", "productionCosts", "currentPeriod"],
+      paths: ["budgetWorksheet", "revenueCategories", "expenseCategories", "isInitialized", "overheadCosts", "productionCosts", "currentPeriod"],
     },
   }
 );
diff --git a/stores/wizard.ts b/stores/coop-builder.ts
similarity index 86%
rename from stores/wizard.ts
rename to stores/coop-builder.ts
index 5a6616e..104fd88 100644
--- a/stores/wizard.ts
+++ b/stores/coop-builder.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 
-export const useWizardStore = defineStore(
-  "wizard",
+export const useCoopBuilderStore = defineStore(
+  "coop-builder",
   () => {
     const currentStep = ref(1);
 
diff --git a/stores/plan.ts b/stores/plan.ts
new file mode 100644
index 0000000..0f7addb
--- /dev/null
+++ b/stores/plan.ts
@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import type { Member, Offer } from '~/types/coaching';
+import type { StreamRow } from '~/utils/offerToStream';
+import { offersToStreams } from '~/utils/offerToStream';
+
+export const usePlanStore = defineStore('plan', {
+  state: () => ({
+    members: [] as Member[],
+    streams: [] as StreamRow[]
+  }),
+  
+  actions: {
+    setMembers(m: Member[]) {
+      this.members = m;
+    },
+    
+    addStreamsFromOffers(o: Offer[]) {
+      const newStreams = offersToStreams(o, this.members);
+      this.streams.push(...newStreams);
+    }
+  }
+});
\ No newline at end of file
diff --git a/stores/streams.ts b/stores/streams.ts
index 9f50205..e5e18f4 100644
--- a/stores/streams.ts
+++ b/stores/streams.ts
@@ -87,6 +87,31 @@ export const useStreamsStore = defineStore(
       }
     }
 
+    // Initialize with fixture data if empty
+    async function initializeWithFixtures() {
+      if (streams.value.length === 0) {
+        const { useFixtures } = await import('~/composables/useFixtures');
+        const fixtures = useFixtures();
+        const { revenueStreams } = await fixtures.loadStreams();
+        
+        revenueStreams.forEach(stream => {
+          upsertStream(stream);
+        });
+      }
+    }
+
+    // Load realistic demo data (for better user experience)
+    async function loadDemoData() {
+      resetStreams();
+      const { useFixtures } = await import('~/composables/useFixtures');
+      const fixtures = useFixtures();
+      const { revenueStreams } = await fixtures.loadStreams();
+      
+      revenueStreams.forEach(stream => {
+        upsertStream(stream);
+      });
+    }
+
     // Reset function
     function resetStreams() {
       streams.value = [];
@@ -102,6 +127,8 @@ export const useStreamsStore = defineStore(
       // Wizard actions
       upsertStream,
       resetStreams,
+      initializeWithFixtures,
+      loadDemoData,
       // Legacy actions
       addStream,
       updateStream,
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d12159a..b1aeef9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,14 +1,5 @@
-import type { Config } from 'tailwindcss'
+import type { Config } from "tailwindcss";
 
 export default {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        neutral: {
-          950: '#0a0a0a'
-        }
-      }
-    }
-  }
-} satisfies Config
\ No newline at end of file
+  darkMode: "class",
+} satisfies Config;
diff --git a/tests/coach-integration.spec.ts b/tests/coach-integration.spec.ts
new file mode 100644
index 0000000..f01b96a
--- /dev/null
+++ b/tests/coach-integration.spec.ts
@@ -0,0 +1,431 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
+
+// Import components and utilities
+import CoachSkillsToOffers from '~/pages/coach/skills-to-offers.vue';
+import WizardRevenueStep from '~/components/WizardRevenueStep.vue';
+import { useOfferSuggestor } from '~/composables/useOfferSuggestor';
+import { usePlanStore } from '~/stores/plan';
+import { offerToStream, offersToStreams } from '~/utils/offerToStream';
+import { 
+  membersSample, 
+  skillsCatalogSample, 
+  problemsCatalogSample, 
+  sampleSelections 
+} from '~/sample/skillsToOffersSamples';
+
+// Mock router
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn()
+  })
+}));
+
+// Mock stores
+const mockStreamsStore = {
+  streams: [],
+  upsertStream: vi.fn(),
+  removeStream: vi.fn()
+};
+
+vi.mock('~/stores/streams', () => ({
+  useStreamsStore: () => mockStreamsStore
+}));
+
+describe('Coach Integration Tests', () => {
+  let pinia: any;
+  let planStore: any;
+
+  beforeEach(() => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+    planStore = usePlanStore();
+    
+    // Reset stores
+    planStore.members = [];
+    planStore.streams = [];
+    mockStreamsStore.streams = [];
+    
+    // Clear mocks
+    vi.clearAllMocks();
+  });
+
+  describe('Offer Generation with Sample Data', () => {
+    it('generates "Pitch Polish (2 days)" offer for Design+Writing and "Unclear pitch"', () => {
+      const { suggestOffers } = useOfferSuggestor();
+      
+      // Setup input with sample data
+      const input = {
+        members: membersSample,
+        selectedSkillsByMember: {
+          [membersSample[0].id]: ['design'], // Maya: Design
+          [membersSample[2].id]: ['writing'] // Jordan: Writing
+        },
+        selectedProblems: ['unclear-pitch']
+      };
+      
+      const catalogs = {
+        skills: skillsCatalogSample,
+        problems: problemsCatalogSample
+      };
+      
+      // Generate offers
+      const offers = suggestOffers(input, catalogs);
+      
+      // Should generate at least one offer
+      expect(offers.length).toBeGreaterThan(0);
+      
+      // Should include Pitch Polish offer
+      const pitchPolishOffer = offers.find(offer => 
+        offer.name.includes('Pitch Polish') && offer.name.includes('2 days')
+      );
+      
+      expect(pitchPolishOffer).toBeDefined();
+      expect(pitchPolishOffer?.name).toBe('Pitch Polish (2 days)');
+    });
+
+    it('calculates baseline price using correct formula: sum(hours*hourly*1.25) * 1.10', () => {
+      const { suggestOffers } = useOfferSuggestor();
+      
+      const input = {
+        members: membersSample,
+        selectedSkillsByMember: {
+          [membersSample[0].id]: ['design'], // Maya: 32€/h
+          [membersSample[2].id]: ['writing'] // Jordan: 28€/h
+        },
+        selectedProblems: ['unclear-pitch']
+      };
+      
+      const catalogs = {
+        skills: skillsCatalogSample,
+        problems: problemsCatalogSample
+      };
+      
+      const offers = suggestOffers(input, catalogs);
+      const pitchPolishOffer = offers.find(offer => 
+        offer.name.includes('Pitch Polish')
+      );
+      
+      expect(pitchPolishOffer).toBeDefined();
+      
+      // Calculate expected price manually
+      // Pitch Polish is 2 days = 16 hours total (8 hours per day)
+      // Assume hours are distributed between Maya and Jordan
+      let expectedCost = 0;
+      
+      for (const allocation of pitchPolishOffer!.hoursByMember) {
+        const member = membersSample.find(m => m.id === allocation.memberId);
+        if (member) {
+          expectedCost += allocation.hours * member.hourly * 1.25;
+        }
+      }
+      
+      const expectedBaseline = Math.round(expectedCost * 1.10);
+      
+      // Allow for ±1 rounding difference
+      expect(pitchPolishOffer!.price.baseline).toBeCloseTo(expectedBaseline, 0);
+      expect(Math.abs(pitchPolishOffer!.price.baseline - expectedBaseline)).toBeLessThanOrEqual(1);
+    });
+
+    it('generates offers that include required whyThis and riskNotes', () => {
+      const { suggestOffers } = useOfferSuggestor();
+      
+      const input = {
+        members: membersSample,
+        selectedSkillsByMember: sampleSelections.selectedSkillsByMember,
+        selectedProblems: sampleSelections.selectedProblems
+      };
+      
+      const catalogs = {
+        skills: skillsCatalogSample,
+        problems: problemsCatalogSample
+      };
+      
+      const offers = suggestOffers(input, catalogs);
+      
+      expect(offers.length).toBeGreaterThan(0);
+      
+      offers.forEach(offer => {
+        expect(offer.whyThis).toBeDefined();
+        expect(offer.whyThis.length).toBeGreaterThan(0);
+        expect(offer.riskNotes).toBeDefined();
+        expect(offer.riskNotes.length).toBeGreaterThan(0);
+        expect(offer.price.calcNote).toBeDefined();
+        expect(offer.price.calcNote.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('Coach Page Integration', () => {
+    it('loads sample data and generates offers automatically', async () => {
+      const wrapper = mount(CoachSkillsToOffers, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      // Trigger sample data loading
+      await wrapper.vm.loadSampleData();
+      await nextTick();
+
+      // Wait for debounced offer generation
+      await new Promise(resolve => setTimeout(resolve, 350));
+      
+      // Should have loaded sample members
+      expect(wrapper.vm.members).toEqual(membersSample);
+      
+      // Should have pre-selected skills and problems
+      expect(wrapper.vm.selectedSkills).toEqual(sampleSelections.selectedSkillsByMember);
+      expect(wrapper.vm.selectedProblems).toEqual(sampleSelections.selectedProblems);
+      
+      // Should have generated offers
+      expect(wrapper.vm.offers).toBeDefined();
+      expect(wrapper.vm.offers?.length).toBeGreaterThan(0);
+    });
+
+    it('handles "Use these" action correctly', async () => {
+      const wrapper = mount(CoachSkillsToOffers, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      // Load sample data and generate offers
+      await wrapper.vm.loadSampleData();
+      await nextTick();
+      await new Promise(resolve => setTimeout(resolve, 350));
+
+      // Ensure we have offers
+      expect(wrapper.vm.offers?.length).toBeGreaterThan(0);
+      
+      const initialOffers = wrapper.vm.offers!;
+      
+      // Trigger "Use these" action
+      await wrapper.vm.useOffers();
+      
+      // Should have added streams to plan store
+      expect(planStore.streams.length).toBe(initialOffers.length);
+      
+      // Verify streams are properly converted
+      planStore.streams.forEach((stream: any, index: number) => {
+        const originalOffer = initialOffers[index];
+        expect(stream.id).toBe(`offer-${originalOffer.id}`);
+        expect(stream.name).toBe(originalOffer.name);
+        expect(stream.unitPrice).toBe(originalOffer.price.baseline);
+        expect(stream.payoutDelayDays).toBe(originalOffer.payoutDelayDays);
+        expect(stream.feePercent).toBe(3);
+        expect(stream.notes).toBe(originalOffer.whyThis.join('. '));
+      });
+    });
+  });
+
+  describe('Stream Conversion and Validation', () => {
+    it('converts offers to streams with correct structure', () => {
+      const mockOffer = {
+        id: 'test-offer',
+        name: 'Test Offer (5 days)',
+        scope: ['Test scope item'],
+        hoursByMember: [
+          { memberId: membersSample[0].id, hours: 20 },
+          { memberId: membersSample[1].id, hours: 15 }
+        ],
+        price: { baseline: 2000, stretch: 2400, calcNote: 'Test calculation' },
+        payoutDelayDays: 30,
+        whyThis: ['Test reason 1', 'Test reason 2'],
+        riskNotes: ['Test risk']
+      };
+
+      const stream = offerToStream(mockOffer, membersSample);
+
+      expect(stream.id).toBe('offer-test-offer');
+      expect(stream.name).toBe('Test Offer (5 days)');
+      expect(stream.unitPrice).toBe(2000);
+      expect(stream.payoutDelayDays).toBe(30);
+      expect(stream.feePercent).toBe(3);
+      expect(stream.notes).toBe('Test reason 1. Test reason 2');
+      expect(stream.restrictions).toBe('General');
+      expect(stream.certainty).toBe('Probable');
+    });
+
+    it('handles batch conversion correctly', () => {
+      const offers = [
+        {
+          id: 'offer1',
+          name: 'Workshop Offer',
+          scope: [],
+          hoursByMember: [{ memberId: membersSample[0].id, hours: 8 }],
+          price: { baseline: 800, stretch: 960, calcNote: 'Workshop calc' },
+          payoutDelayDays: 14,
+          whyThis: ['Quick workshop'],
+          riskNotes: ['Time constraint']
+        },
+        {
+          id: 'offer2', 
+          name: 'Sprint Offer',
+          scope: [],
+          hoursByMember: [{ memberId: membersSample[1].id, hours: 40 }],
+          price: { baseline: 2000, stretch: 2400, calcNote: 'Sprint calc' },
+          payoutDelayDays: 45,
+          whyThis: ['Full development'],
+          riskNotes: ['Scope creep']
+        }
+      ];
+
+      const streams = offersToStreams(offers, membersSample);
+
+      expect(streams.length).toBe(2);
+      expect(streams[0].name).toBe('Workshop Offer');
+      expect(streams[1].name).toBe('Sprint Offer');
+      expect(streams[0].unitsPerMonth).toBe(1); // Workshop
+      expect(streams[1].unitsPerMonth).toBe(0); // Sprint
+    });
+  });
+
+  describe('Wizard Integration', () => {
+    it('displays coach streams with proper highlighting', () => {
+      // Add coach streams to plan store
+      planStore.streams = [
+        {
+          id: 'offer-test',
+          name: 'Test Coach Offer',
+          unitPrice: 1500,
+          unitsPerMonth: 0, // Needs setup
+          payoutDelayDays: 30,
+          feePercent: 3,
+          notes: 'AI-suggested offer',
+          targetMonthlyAmount: 0,
+          category: 'services'
+        }
+      ];
+
+      const wrapper = mount(WizardRevenueStep, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      // Should show coach stream with special styling
+      const coachStreamElements = wrapper.findAll('[data-testid="coach-stream"]');
+      expect(coachStreamElements.length).toBeGreaterThan(0);
+      
+      // Should show hint about setting units
+      expect(wrapper.text()).toContain('Setting just 1 unit per offer');
+    });
+
+    it('allows proceeding to Review when unitsPerMonth is set to 1', () => {
+      // Setup coach stream with units set
+      planStore.streams = [
+        {
+          id: 'offer-test',
+          name: 'Test Coach Offer',
+          unitPrice: 1500,
+          unitsPerMonth: 1,
+          payoutDelayDays: 30,
+          feePercent: 3,
+          targetMonthlyAmount: 1500,
+          category: 'services'
+        }
+      ];
+
+      const wrapper = mount(WizardRevenueStep, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      // Should not show setup hint when units are configured
+      expect(wrapper.text()).not.toContain('Setting just 1 unit per offer');
+      
+      // Should have proper monthly amount calculated
+      const stream = planStore.streams[0];
+      expect(stream.targetMonthlyAmount).toBe(1500); // 1500 * 1
+    });
+
+    it('calculates summary metrics correctly', () => {
+      planStore.streams = [
+        {
+          id: 'offer-1',
+          targetMonthlyAmount: 3000,
+          payoutDelayDays: 30
+        },
+        {
+          id: 'offer-2', 
+          targetMonthlyAmount: 2000,
+          payoutDelayDays: 45
+        }
+      ];
+
+      const wrapper = mount(WizardRevenueStep, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      // Top source should be 60% (3000 out of 5000 total)
+      expect(wrapper.vm.getTopSourcePercentage()).toBe(60);
+      
+      // Weighted payout should be 36 days ((3000*30 + 2000*45) / 5000)
+      expect(wrapper.vm.getWeightedPayoutDelay()).toBe(36);
+    });
+  });
+
+  describe('Error Handling and Edge Cases', () => {
+    it('handles empty selections gracefully', () => {
+      const { suggestOffers } = useOfferSuggestor();
+      
+      const input = {
+        members: membersSample,
+        selectedSkillsByMember: {},
+        selectedProblems: []
+      };
+      
+      const catalogs = {
+        skills: skillsCatalogSample,
+        problems: problemsCatalogSample
+      };
+      
+      const offers = suggestOffers(input, catalogs);
+      
+      // Should return empty array for invalid input
+      expect(offers).toEqual([]);
+    });
+
+    it('handles missing members gracefully', () => {
+      const mockOffer = {
+        id: 'test',
+        name: 'Test',
+        scope: [],
+        hoursByMember: [{ memberId: 'nonexistent', hours: 10 }],
+        price: { baseline: 1000, stretch: 1200, calcNote: 'Test' },
+        payoutDelayDays: 30,
+        whyThis: ['Test'],
+        riskNotes: ['Test']
+      };
+
+      expect(() => {
+        offerToStream(mockOffer, membersSample);
+      }).toThrow('Member not found: nonexistent');
+    });
+
+    it('handles zero amounts in calculations', () => {
+      planStore.streams = [
+        {
+          id: 'test-1',
+          targetMonthlyAmount: 0,
+          payoutDelayDays: 30
+        }
+      ];
+
+      const wrapper = mount(WizardRevenueStep, {
+        global: {
+          plugins: [pinia]
+        }
+      });
+
+      expect(wrapper.vm.getTopSourcePercentage()).toBe(0);
+      expect(wrapper.vm.getWeightedPayoutDelay()).toBe(0);
+    });
+  });
+});
\ No newline at end of file
diff --git a/types/coaching.ts b/types/coaching.ts
new file mode 100644
index 0000000..5f1fbde
--- /dev/null
+++ b/types/coaching.ts
@@ -0,0 +1,29 @@
+export type Member = {
+  id: string;
+  name: string;
+  role?: string;
+  hourly: number;
+  availableHrs: number;
+};
+
+export type SkillTag = {
+  id: string;
+  label: string;
+};
+
+export type ProblemTag = {
+  id: string;
+  label: string;
+  examples: string[];
+};
+
+export type Offer = {
+  id: string;
+  name: string;
+  scope: string[];
+  hoursByMember: Array<{ memberId: string; hours: number }>;
+  price: { baseline: number; stretch: number; calcNote: string };
+  payoutDelayDays: number;
+  whyThis: string[];
+  riskNotes: string[];
+};
\ No newline at end of file
diff --git a/utils/offerToStream.ts b/utils/offerToStream.ts
new file mode 100644
index 0000000..1e48e25
--- /dev/null
+++ b/utils/offerToStream.ts
@@ -0,0 +1,183 @@
+import type { Member, Offer } from "~/types/coaching";
+
+interface StreamRow {
+  id: string;
+  name: string;
+  category: string;
+  subcategory: string;
+  targetPct: number;
+  targetMonthlyAmount: number;
+  certainty: "Committed" | "Probable" | "Aspirational";
+  payoutDelayDays: number;
+  terms: string;
+  revenueSharePct: number;
+  platformFeePct: number;
+  restrictions: "Restricted" | "General";
+  seasonalityWeights: number[];
+  effortHoursPerMonth: number;
+  // Extended fields for offer-derived streams
+  unitPrice?: number;
+  unitsPerMonth?: number;
+  feePercent?: number;
+  notes?: string;
+  costBreakdown?: {
+    totalHours: number;
+    totalCost: number;
+    memberCosts: Array<{
+      memberId: string;
+      memberName: string;
+      hours: number;
+      hourlyRate: number;
+      baseCost: number;
+      onCostAmount: number;
+      totalCost: number;
+    }>;
+  };
+}
+
+interface OfferToStreamOptions {
+  onCostPercent?: number; // Default 25% on-cost
+  category?: string; // Default category for offer-derived streams
+}
+
+export function offerToStream(
+  offer: Offer, 
+  members: Member[], 
+  options: OfferToStreamOptions = {}
+): StreamRow {
+  const { onCostPercent = 25, category = "services" } = options;
+  
+  // Create member lookup map
+  const memberMap = new Map(members.map(m => [m.id, m]));
+  
+  // Determine units per month based on offer type
+  const unitsPerMonth = getUnitsPerMonth(offer);
+  
+  // Calculate cost breakdown
+  const costBreakdown = calculateCostBreakdown(offer, memberMap, onCostPercent);
+  
+  // Generate terms string
+  const terms = offer.payoutDelayDays <= 15 ? "Net 15" : 
+                offer.payoutDelayDays <= 30 ? "Net 30" : 
+                offer.payoutDelayDays <= 45 ? "Net 45" : 
+                `Net ${offer.payoutDelayDays}`;
+  
+  // Calculate monthly amount
+  const targetMonthlyAmount = unitsPerMonth > 0 ? offer.price.baseline * unitsPerMonth : 0;
+  
+  return {
+    id: `offer-${offer.id}`,
+    name: offer.name,
+    category,
+    subcategory: inferSubcategory(offer.name),
+    targetPct: 0, // Will be calculated later when all streams are known
+    targetMonthlyAmount,
+    certainty: "Probable" as const, // Offers are more than aspirational but not fully committed
+    payoutDelayDays: offer.payoutDelayDays,
+    terms,
+    revenueSharePct: 0,
+    platformFeePct: 0,
+    restrictions: "General" as const,
+    seasonalityWeights: new Array(12).fill(1),
+    effortHoursPerMonth: calculateEffortHours(offer),
+    // Extended fields
+    unitPrice: offer.price.baseline,
+    unitsPerMonth,
+    feePercent: 3, // Default 3% processing/platform fee
+    notes: offer.whyThis.join(". "),
+    costBreakdown
+  };
+}
+
+export function offersToStreams(
+  offers: Offer[], 
+  members: Member[], 
+  options: OfferToStreamOptions = {}
+): StreamRow[] {
+  return offers.map(offer => offerToStream(offer, members, options));
+}
+
+// Helper functions
+
+function getUnitsPerMonth(offer: Offer): number {
+  const offerName = offer.name.toLowerCase();
+  
+  // Clinics and workshops are typically one-time deliverables per month
+  if (offerName.includes("clinic") || offerName.includes("workshop")) {
+    return 1;
+  }
+  
+  // Check for specific patterns that indicate recurring work
+  if (offerName.includes("retainer") || offerName.includes("ongoing")) {
+    return 1;
+  }
+  
+  // Sprints and other project-based work default to 0 (custom/project basis)
+  return 0;
+}
+
+function inferSubcategory(offerName: string): string {
+  const name = offerName.toLowerCase();
+  
+  if (name.includes("training") || name.includes("workshop")) {
+    return "Workshops/teaching";
+  }
+  if (name.includes("consulting") || name.includes("review") || name.includes("clinic")) {
+    return "Consulting";
+  }
+  if (name.includes("development") || name.includes("sprint") || name.includes("prototype")) {
+    return "Contract development";
+  }
+  if (name.includes("narrative") || name.includes("writing")) {
+    return "Technical services";
+  }
+  if (name.includes("art") || name.includes("pipeline")) {
+    return "Technical services";
+  }
+  
+  return "Contract development"; // Default fallback
+}
+
+function calculateEffortHours(offer: Offer): number {
+  // Sum up total hours across all members
+  return offer.hoursByMember.reduce((total, allocation) => total + allocation.hours, 0);
+}
+
+function calculateCostBreakdown(
+  offer: Offer, 
+  memberMap: Map<string, Member>, 
+  onCostPercent: number
+): StreamRow["costBreakdown"] {
+  const memberCosts = offer.hoursByMember.map(allocation => {
+    const member = memberMap.get(allocation.memberId);
+    if (!member) {
+      throw new Error(`Member not found: ${allocation.memberId}`);
+    }
+    
+    const baseCost = allocation.hours * member.hourly;
+    const onCostAmount = baseCost * (onCostPercent / 100);
+    const totalCost = baseCost + onCostAmount;
+    
+    return {
+      memberId: member.id,
+      memberName: member.name,
+      hours: allocation.hours,
+      hourlyRate: member.hourly,
+      baseCost,
+      onCostAmount,
+      totalCost
+    };
+  });
+  
+  const totalHours = memberCosts.reduce((sum, mc) => sum + mc.hours, 0);
+  const totalCost = memberCosts.reduce((sum, mc) => sum + mc.totalCost, 0);
+  
+  return {
+    totalHours,
+    totalCost,
+    memberCosts
+  };
+}
+
+// Type export for use in other files
+export type { StreamRow };
\ No newline at end of file