From d7e52293e44c4be85a9865c074f0559485cc32e8 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 16 Aug 2025 13:17:36 +0100
Subject: [PATCH] refactor: enhance UI components and navigation structure,
 implement export functionality for wizard steps, and update routing for
 improved user experience

---
 app.vue                                       |  138 +-
 assets/css/main.css                           |   17 +
 components/WizardCostsStep.vue                |   44 +-
 components/WizardMembersStep.vue              |   46 +-
 components/WizardPoliciesStep.vue             |   54 +-
 components/WizardRevenueStep.vue              |   44 +-
 components/WizardReviewStep.vue               |   26 +-
 components/WizardSubnav.vue                   |  101 +
 middleware/setup.global.ts                    |   11 +-
 nuxt.config.ts                                |   14 +-
 pages/coop-planner.vue                        |    8 +
 pages/scenarios.vue                           |    4 +-
 .../conflict-resolution-framework.vue         | 2081 ++++++++---------
 pages/templates/decision-framework.vue        |  691 +++---
 pages/templates/membership-agreement.vue      | 1394 ++++++-----
 pages/templates/tech-charter.vue              | 1595 +++++++------
 pages/wizard.vue                              |  513 ++--
 pages/wizards.vue                             |  339 +++
 18 files changed, 3802 insertions(+), 3318 deletions(-)
 create mode 100644 components/WizardSubnav.vue
 create mode 100644 pages/coop-planner.vue
 create mode 100644 pages/wizards.vue

diff --git a/app.vue b/app.vue
index 6b166ad..e4394a3 100644
--- a/app.vue
+++ b/app.vue
@@ -3,80 +3,96 @@
     <div class="min-h-screen bg-white dark:bg-neutral-950">
       <UToaster />
       <NuxtLayout>
-      <template v-if="$route.meta.layout !== 'template'">
-        <UContainer class="bg-transparent">
-          <header class="py-4 flex items-center justify-between">
-            <div class="flex items-center gap-4">
-              <NuxtLink to="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
-                <UIcon name="i-heroicons-rocket-launch" class="text-primary-500" />
-                <h1 class="font-semibold text-black dark:text-white">Urgent Tools</h1>
-              </NuxtLink>
-              <nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Main navigation">
-                <NuxtLink 
-                  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 === '/' }"
-                >
-                  Dashboard
+        <template v-if="$route.meta.layout !== 'template'">
+          <UContainer class="bg-transparent">
+            <header class="py-6">
+              <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" />
+                  <h1
+                    class="font-semibold text-black dark:text-white text-center">
+                    Urgent Tools
+                  </h1>
                 </NuxtLink>
-                <NuxtLink 
-                  to="/mix" 
+                <div class="absolute right-0">
+                  <ColorModeToggle />
+                </div>
+              </div>
+              <nav
+                class="mt-4 flex items-center justify-center gap-1"
+                role="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': $route.path === '/mix' }"
-                >
-                  Revenue Mix
+                  :class="{
+                    'bg-neutral-100 dark:bg-neutral-800': isCoopSection,
+                  }">
+                  Co-Op in 6 Months
                 </NuxtLink>
-                <NuxtLink 
-                  to="/budget" 
+                <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 === '/budget' }"
-                >
-                  Budget
+                  :class="{
+                    'bg-neutral-100 dark:bg-neutral-800':
+                      $route.path === '/wizards',
+                  }">
+                  Wizards
                 </NuxtLink>
-                <NuxtLink 
-                  to="/scenarios" 
+                <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 === '/scenarios' }"
-                >
-                  Scenarios
-                </NuxtLink>
-                <NuxtLink 
-                  to="/cash" 
-                  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 === '/cash' }"
-                >
-                  Cash
-                </NuxtLink>
-                <NuxtLink 
-                  to="/glossary" 
-                  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 === '/glossary' }"
-                >
-                  Glossary
-                </NuxtLink>
-                <NuxtLink 
-                  to="/templates" 
-                  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('/templates') }"
-                >
-                  Templates
+                  :class="{
+                    'bg-neutral-100 dark:bg-neutral-800':
+                      route.path === item.to,
+                  }">
+                  {{ item.label }}
                 </NuxtLink>
               </nav>
-            </div>
-            <ColorModeToggle />
-          </header>
+            </header>
+            <NuxtPage />
+          </UContainer>
+        </template>
+        <template v-else>
           <NuxtPage />
-        </UContainer>
-      </template>
-      <template v-else>
-        <NuxtPage />
-      </template>
-    </NuxtLayout>
+        </template>
+      </NuxtLayout>
       <NuxtRouteAnnouncer />
     </div>
   </UApp>
 </template>
 
 <script setup lang="ts">
-// noop
+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");
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
index 7fe536d..5f4debd 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -7,4 +7,21 @@
   html { @apply bg-white text-neutral-900; }
   html.dark { @apply bg-neutral-950 text-neutral-100; }
   
+}
+
+/* Disable all animations, transitions, and smooth scrolling app-wide */
+html,
+body {
+  scroll-behavior: auto !important;
+}
+
+*,
+*::before,
+*::after {
+  animation: none !important;
+  transition: none !important;
+}
+
+.document-page {
+  @apply max-w-4xl mx-auto bg-white relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
 }
\ No newline at end of file
diff --git a/components/WizardCostsStep.vue b/components/WizardCostsStep.vue
index 4814f97..797a332 100644
--- a/components/WizardCostsStep.vue
+++ b/components/WizardCostsStep.vue
@@ -1,9 +1,21 @@
 <template>
-  <div class="space-y-6">
-    <div>
-      <h3 class="text-2xl font-black text-black mb-4">
-        Where does your money go?
-      </h3>
+  <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 does your money go?
+        </h3>
+        <p class="text-neutral-600">
+          Add costs like rent, tools, insurance, or other recurring expenses.
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <UButton variant="outline" color="gray" size="sm" @click="exportCosts">
+          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
+          Export
+        </UButton>
+      </div>
     </div>
 
     <!-- Overhead Costs -->
@@ -31,7 +43,7 @@
         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 overhead costs yet</h4>
         <p class="text-sm text-neutral-500 mb-4">
-          Add costs like rent, tools, insurance, or other recurring expenses.
+          Get started by adding your first overhead cost.
         </p>
         <UButton
           @click="addOverheadCost"
@@ -202,4 +214,24 @@ function addOverheadCost() {
 function removeCost(id: string) {
   budgetStore.removeOverheadLine(id);
 }
+
+function exportCosts() {
+  const exportData = {
+    overheadCosts: overheadCosts.value,
+    exportedAt: new Date().toISOString(),
+    section: "costs",
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `coop-costs-${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/WizardMembersStep.vue b/components/WizardMembersStep.vue
index 8ac8104..28171c3 100644
--- a/components/WizardMembersStep.vue
+++ b/components/WizardMembersStep.vue
@@ -1,8 +1,23 @@
 <template>
-  <div class="space-y-4">
-    <div>
-      <div class="flex items-center justify-between mb-6">
-        <h3 class="text-2xl font-black text-black">Who's on your team?</h3>
+  <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">Who's on your team?</h3>
+        <p class="text-neutral-600">
+          Add everyone who'll be working in the co-op, even if they're not ready
+          to be paid yet.
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <UButton
+          variant="outline"
+          color="gray"
+          size="sm"
+          @click="exportMembers">
+          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
+          Export
+        </UButton>
         <UButton
           v-if="members.length > 0"
           @click="addMember"
@@ -26,8 +41,7 @@
         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 team members yet</h4>
         <p class="text-sm text-neutral-500 mb-4">
-          Add everyone who'll be working in the co-op, even if they're not ready
-          to be paid yet.
+          Get started by adding your first team member.
         </p>
         <UButton @click="addMember" size="lg" variant="solid" color="primary">
           <UIcon name="i-heroicons-plus" class="mr-2" />
@@ -218,4 +232,24 @@ function addMember() {
 function removeMember(id: string) {
   membersStore.removeMember(id);
 }
+
+function exportMembers() {
+  const exportData = {
+    members: members.value,
+    exportedAt: new Date().toISOString(),
+    section: "members",
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `coop-members-${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/WizardPoliciesStep.vue b/components/WizardPoliciesStep.vue
index 0aa3e4b..ca609f6 100644
--- a/components/WizardPoliciesStep.vue
+++ b/components/WizardPoliciesStep.vue
@@ -1,9 +1,25 @@
 <template>
-  <div class="space-y-4">
-    <div>
-      <h3 class="text-2xl font-black text-black mb-6">
-        What's your equal hourly wage?
-      </h3>
+  <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">
+          What's your equal hourly wage?
+        </h3>
+        <p class="text-neutral-600">
+          Set the hourly rate that all co-op members will earn for their work.
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <UButton
+          variant="outline"
+          color="gray"
+          size="sm"
+          @click="exportPolicies">
+          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
+          Export
+        </UButton>
+      </div>
     </div>
 
     <div class="max-w-md">
@@ -101,4 +117,32 @@ onMounted(() => {
     setDefaults();
   }
 });
+
+function exportPolicies() {
+  const exportData = {
+    policies: {
+      equalHourlyWage: policiesStore.equalHourlyWage,
+      payrollOncostPct: policiesStore.payrollOncostPct,
+      savingsTargetMonths: policiesStore.savingsTargetMonths,
+      minCashCushionAmount: policiesStore.minCashCushionAmount,
+      deferredCapHoursPerQtr: policiesStore.deferredCapHoursPerQtr,
+      deferredSunsetMonths: policiesStore.deferredSunsetMonths,
+      volunteerScope: policiesStore.volunteerScope,
+    },
+    exportedAt: new Date().toISOString(),
+    section: "policies",
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `coop-policies-${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/WizardRevenueStep.vue b/components/WizardRevenueStep.vue
index 2e2f672..8dd4f2c 100644
--- a/components/WizardRevenueStep.vue
+++ b/components/WizardRevenueStep.vue
@@ -1,10 +1,24 @@
 <template>
-  <div class="space-y-4">
-    <div>
-      <div class="flex items-center justify-between mb-6">
-        <h3 class="text-2xl font-black text-black">
+  <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"
@@ -29,7 +43,7 @@
           No revenue streams yet
         </h4>
         <p class="text-sm text-neutral-500 mb-4">
-          Add sources like client work, grants, product sales, or donations.
+          Get started by adding your first revenue source.
         </p>
         <UButton
           @click="addRevenueStream"
@@ -247,4 +261,24 @@ function addRevenueStream() {
 function removeStream(id: string) {
   streamsStore.removeStream(id);
 }
+
+function exportStreams() {
+  const exportData = {
+    streams: streams.value,
+    exportedAt: new Date().toISOString(),
+    section: "revenue",
+  };
+
+  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `coop-revenue-${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/WizardReviewStep.vue b/components/WizardReviewStep.vue
index de57237..2f8014d 100644
--- a/components/WizardReviewStep.vue
+++ b/components/WizardReviewStep.vue
@@ -1,11 +1,20 @@
 <template>
-  <div class="space-y-6">
-    <div>
-      <h3 class="text-lg font-medium mb-4">Review & Complete</h3>
-      <p class="text-neutral-600 mb-6">
-        Review your setup and complete the wizard to start using your co-op
-        tool.
-      </p>
+  <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>
     </div>
 
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
@@ -284,9 +293,6 @@
       </UButton>
 
       <div class="flex gap-3">
-        <UButton variant="outline" color="gray" @click="exportSetup">
-          Export Setup
-        </UButton>
         <UButton
           @click="completeSetup"
           :disabled="!canComplete"
diff --git a/components/WizardSubnav.vue b/components/WizardSubnav.vue
new file mode 100644
index 0000000..0b6068e
--- /dev/null
+++ b/components/WizardSubnav.vue
@@ -0,0 +1,101 @@
+<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 -->
+        <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="
+            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" />
+          {{ 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>
+</template>
+
+<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",
+    path: "/templates/decision-framework",
+  },
+];
+
+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>
diff --git a/middleware/setup.global.ts b/middleware/setup.global.ts
index deee5ec..07a57a9 100644
--- a/middleware/setup.global.ts
+++ b/middleware/setup.global.ts
@@ -1,6 +1,11 @@
 export default defineNuxtRouteMiddleware((to) => {
-  // Skip middleware for wizard, templates, and API routes
-  if (to.path === "/wizard" || to.path.startsWith("/templates") || to.path.startsWith("/api/")) {
+  // Skip middleware for coop-planner, wizards, templates, and API routes
+  if (
+    to.path === "/coop-planner" ||
+    to.path === "/wizards" ||
+    to.path.startsWith("/templates") ||
+    to.path.startsWith("/api/")
+  ) {
     return;
   }
 
@@ -15,6 +20,6 @@ export default defineNuxtRouteMiddleware((to) => {
     streamsStore.hasValidStreams;
 
   if (!setupComplete) {
-    return navigateTo("/wizard");
+    return navigateTo("/coop-planner");
   }
 });
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a1657eb..3363539 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -25,11 +25,17 @@ export default defineNuxtConfig({
 
   modules: ["@pinia/nuxt", "@nuxtjs/color-mode", "@nuxt/ui"],
 
+  // Redirect old Templates landing to Wizards (keep detail routes working)
+  routeRules: {
+    "/templates": { redirect: { to: "/wizards", statusCode: 301 } },
+    "/wizard": { redirect: { to: "/coop-planner", statusCode: 301 } },
+  },
+
   colorMode: {
-    preference: 'system',
-    fallback: 'light',
-    classSuffix: '',
-    dataValue: 'dark'
+    preference: "system",
+    fallback: "light",
+    classSuffix: "",
+    dataValue: "dark",
   },
 
   // Google Fonts
diff --git a/pages/coop-planner.vue b/pages/coop-planner.vue
new file mode 100644
index 0000000..0fe9eaf
--- /dev/null
+++ b/pages/coop-planner.vue
@@ -0,0 +1,8 @@
+<template>
+  <WizardPage />
+</template>
+
+<script setup lang="ts">
+// Reuse the existing wizard content by importing it as a component
+import WizardPage from "~/pages/wizard.vue";
+</script>
diff --git a/pages/scenarios.vue b/pages/scenarios.vue
index 3eab8b5..6e5ad9b 100644
--- a/pages/scenarios.vue
+++ b/pages/scenarios.vue
@@ -562,8 +562,8 @@ async function restartWizard() {
   await new Promise((resolve) => setTimeout(resolve, 300));
   isResetting.value = false;
 
-  // Navigate to wizard
-  await navigateTo("/wizard");
+  // Navigate to coop planner
+  await navigateTo("/coop-planner");
 }
 
 onMounted(() => {
diff --git a/pages/templates/conflict-resolution-framework.vue b/pages/templates/conflict-resolution-framework.vue
index 5cc690e..b2dec2f 100644
--- a/pages/templates/conflict-resolution-framework.vue
+++ b/pages/templates/conflict-resolution-framework.vue
@@ -1,967 +1,887 @@
 <template>
-  <div
-    class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
-    <!-- Export Controls -->
-    <div class="export-controls no-print no-pdf">
-      <div class="export-content">
-        <div class="export-section">
-          <h3 class="export-title">Export Policy Document:</h3>
-          <div class="export-buttons">
-            <button
-              @click="validateForm"
-              class="export-btn validation"
-              title="Check form completion">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path d="M9 11l3 3 8-8" />
-                <path
-                  d="M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c1.4 0 2.7.3 3.9.8" />
-              </svg>
-              CHECK
-            </button>
-            <button
-              @click="exportMarkdown"
-              class="export-btn primary"
-              title="Download Policy as Markdown">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="12" y1="18" x2="12" y2="12" />
-                <path d="m9 15 3-3 3 3" />
-              </svg>
-              MARKDOWN
-            </button>
-            <button
-              @click="exportPDF"
-              class="export-btn"
-              title="Download Policy as PDF">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10,9 9,9 8,9" />
-              </svg>
-              PDF
-            </button>
-            <button
-              @click="handlePrint"
-              class="export-btn"
-              title="Print Policy Document">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <polyline points="6,9 6,2 18,2 18,9" />
-                <path
-                  d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2 2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
-                <rect x="6" y="14" width="12" height="8" />
-              </svg>
-              PRINT
-            </button>
+  <div>
+    <!-- Wizard Subnav -->
+    <WizardSubnav />
+
+    <div
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
+    >
+      <!-- Export Controls -->
+      <div class="max-w-4xl mx-auto no-print no-pdf mb-8 py-4">
+        <div class="flex justify-end">
+          <div class="flex items-center gap-4">
+            <UButton variant="outline" color="gray" size="lg" @click="exportMarkdown">
+              <UIcon name="i-heroicons-arrow-down-tray" class="mr-2" />
+              Markdown
+            </UButton>
+            <UButton variant="outline" color="gray" size="lg" @click="copyPlainText">
+              <UIcon name="i-heroicons-clipboard" class="mr-2" />
+              Copy Text
+            </UButton>
+            <span
+              v-if="copySuccess"
+              class="text-green-600 dark:text-green-400 text-sm font-medium"
+            >
+              Copied
+            </span>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Document Container -->
-    <div
-      class="max-w-4xl mx-auto bg-white dark:bg-neutral-950 relative p-8 border-2 border-neutral-900 dark:border-neutral-100">
-      <div class="template-content">
-        <!-- Document Header -->
-        <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 border-neutral-900 dark:border-neutral-100 text-neutral-900 dark:text-neutral-100"
-            :data-org-name="formData.orgName || 'Organization'">
-            CONFLICT RESOLUTION FRAMEWORK
-          </h1>
-        </div>
-
-        <!-- Quick Start Section -->
-        <div
-          class="no-print no-pdf bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8">
-          <h3 class="m-0 mb-2 text-[1.2rem] text-neutral-800">
-            Quick Start - Choose a Template
-          </h3>
-          <p class="text-neutral-700">
-            Select a preset to auto-fill common configurations:
-          </p>
-          <div class="flex gap-2 flex-wrap mt-4">
-            <button
-              :class="
-                selectedPreset === 'small-coop'
-                  ? 'bg-blue-600 text-white border-blue-600'
-                  : 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white border-blue-600'
-              "
-              class="px-4 py-2 border-2 rounded-md text-sm transition-all"
-              @click="loadPreset('small-coop')">
-              Small Co-op (2-8 members)
-            </button>
-            <button
-              :class="
-                selectedPreset === 'community-org'
-                  ? 'bg-blue-600 text-white border-blue-600'
-                  : 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white border-blue-600'
-              "
-              class="px-4 py-2 border-2 rounded-md text-sm transition-all"
-              @click="loadPreset('community-org')">
-              Community Organization
-            </button>
-            <button
-              :class="
-                selectedPreset === 'nonprofit'
-                  ? 'bg-blue-600 text-white border-blue-600'
-                  : 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white border-blue-600'
-              "
-              class="px-4 py-2 border-2 rounded-md text-sm transition-all"
-              @click="loadPreset('nonprofit')">
-              Nonprofit Organization
-            </button>
-            <button
-              :class="
-                selectedPreset === 'activist'
-                  ? 'bg-blue-600 text-white border-blue-600'
-                  : 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white border-blue-600'
-              "
-              class="px-4 py-2 border-2 rounded-md text-sm transition-all"
-              @click="loadPreset('activist')">
-              Activist Collective
-            </button>
-            <button
-              :class="
-                selectedPreset === 'custom'
-                  ? 'bg-blue-600 text-white border-blue-600'
-                  : 'bg-white text-blue-600 hover:bg-blue-600 hover:text-white border-blue-600'
-              "
-              class="px-4 py-2 border-2 rounded-md text-sm transition-all"
-              @click="loadPreset('custom')">
-              Custom Framework
-            </button>
+      <!-- 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 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
+            </h1>
           </div>
-        </div>
 
-        <!-- Section 1: Organization Information -->
-        <div class="section-card">
-          <h2 class="section-title">1. Organization Information</h2>
+          <!-- Section 1: Organization Information -->
+          <div class="section-card">
+            <h2 class="section-title">1. Organization Information</h2>
 
-          <div class="space-y-6">
-            <UFormField label="Organization Name" class="form-group-large">
-              <UInput
-                v-model="formData.orgName"
-                placeholder="Enter your organization name"
-                size="xl"
-                class="w-full"
-                :error="validationErrors.orgName"
-                @input="debouncedAutoSave" />
-            </UFormField>
-            <div class="flex flex-row gap-4 space-x-4">
-              <UFormField label="Organization Type" class="form-group-large">
-                <USelect
-                  v-model="formData.orgType"
-                  :items="orgTypeOptions"
-                  placeholder="Select organization type..."
-                  size="xl"
-                  class="w-full"
-                  :error="validationErrors.orgType"
-                  @change="autoSave" />
-              </UFormField>
-
-              <UFormField
-                label="Number of Members/Staff"
-                class="form-group-large">
+            <div class="space-y-6">
+              <UFormField label="Organization Name" class="form-group-large">
                 <UInput
-                  v-model="formData.memberCount"
-                  type="number"
-                  min="2"
-                  placeholder="e.g., 5"
-                  size="xl"
-                  :error="validationErrors.memberCount"
-                  @change="autoSave" />
-              </UFormField>
-            </div>
-          </div>
-        </div>
-
-        <!-- Section 2: Core Values -->
-        <div class="section-card">
-          <div class="flex flex-row justify-between items-center">
-            <h2 class="section-title">2. Guiding Principles & Values</h2>
-            <div class="flex flex-row gap-2 items-center no-print no-pdf">
-              <USwitch
-                v-model="sectionsEnabled.values"
-                size="sm"
-                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">
-              <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" />
-                </div>
-              </div>
-            </UFormField>
-
-            <UFormField
-              label="Additional Values or Principles"
-              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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 3: Conflict Types -->
-        <div class="section-card">
-          <h2 class="section-title">3. Types of Conflicts Covered</h2>
-          <p class="mb-4">
-            Select which types of conflicts this framework will address:
-          </p>
-
-          <div class="checkbox-group space-y-3">
-            <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" />
-            </div>
-          </div>
-          <div v-if="validationErrors.conflictTypes" class="validation-error">
-            {{ validationErrors.conflictTypes }}
-          </div>
-        </div>
-
-        <!-- Section 4: Resolution Approach -->
-        <div class="section-card">
-          <h2 class="section-title">4. Primary Resolution Approach</h2>
-
-          <div class="space-y-6">
-            <UFormField
-              label="Choose your primary conflict resolution philosophy:">
-              <URadioGroup
-                v-model="formData.approach"
-                :items="approachOptions"
-                variant="card"
-                size="lg"
-                class="mt-2" />
-              <div v-if="validationErrors.approach" class="validation-error">
-                {{ validationErrors.approach }}
-              </div>
-            </UFormField>
-
-            <UFormField class="form-group-large">
-              <UCheckbox
-                v-model="formData.anonymousReporting"
-                id="anonymous-reporting"
-                label="Allow anonymous reporting"
-                help="Members can report issues without revealing their identity"
-                @change="autoSave" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 5: Roles & Responsibilities -->
-        <div class="section-card">
-          <h2 class="section-title">5. Roles & Responsibilities</h2>
-
-          <div class="space-y-6">
-            <UFormField
-              label="Who can receive initial conflict reports? (check all that apply)"
-              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" />
-                </div>
-              </div>
-              <div
-                v-if="validationErrors.reportReceivers"
-                class="validation-error">
-                {{ validationErrors.reportReceivers }}
-              </div>
-            </UFormField>
-
-            <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" />
-            </UFormField>
-
-            <UFormField class="form-group-large">
-              <UCheckbox
-                v-model="formData.supportPeople"
-                id="support-people"
-                label="Allow support people in mediation sessions"
-                help="Parties can bring a trusted person for emotional support"
-                @change="autoSave" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 6: Timeline & Process -->
-        <div class="section-card">
-          <h2 class="section-title">6. Timeline & Process Steps</h2>
-
-          <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">
-                <USelect
-                  v-model="formData.initialResponse"
-                  :items="responseTimeOptions"
-                  placeholder="Select response time..."
+                  v-model="formData.orgName"
+                  placeholder="Enter your organization name"
                   size="xl"
                   class="w-full"
-                  :error="validationErrors.initialResponse"
-                  @change="autoSave" />
+                  :error="validationErrors.orgName"
+                  @input="debouncedAutoSave"
+                />
+              </UFormField>
+              <div class="flex flex-row gap-4 space-x-4">
+                <UFormField label="Organization Type" class="form-group-large">
+                  <USelect
+                    v-model="formData.orgType"
+                    :items="orgTypeOptions"
+                    placeholder="Select organization type..."
+                    size="xl"
+                    class="w-full"
+                    :error="validationErrors.orgType"
+                    @change="autoSave"
+                  />
+                </UFormField>
+
+                <UFormField label="Number of Members/Staff" class="form-group-large">
+                  <UInput
+                    v-model="formData.memberCount"
+                    type="number"
+                    min="2"
+                    placeholder="e.g., 5"
+                    size="xl"
+                    :error="validationErrors.memberCount"
+                    @change="autoSave"
+                  />
+                </UFormField>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 2: Core Values -->
+          <div class="section-card">
+            <div class="flex flex-row justify-between items-center">
+              <h2 class="section-title">2. Guiding Principles & Values</h2>
+              <div class="flex flex-row gap-2 items-center no-print no-pdf">
+                <USwitch
+                  v-model="sectionsEnabled.values"
+                  size="sm"
+                  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"
+              >
+                <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"
+                    />
+                  </div>
+                </div>
               </UFormField>
 
               <UFormField
-                label="Target Resolution Time"
-                class="form-group-large">
-                <USelect
-                  v-model="formData.resolutionTarget"
-                  :items="resolutionTimeOptions"
-                  placeholder="Select target time..."
+                label="Additional Values or Principles"
+                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"
-                  :error="validationErrors.resolutionTarget"
-                  @change="autoSave" />
+                  @input="debouncedAutoSave"
+                />
               </UFormField>
             </div>
-
-            <UFormField
-              label="Process Steps (select applicable steps)"
-              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" />
-                </div>
-              </div>
-              <div
-                v-if="validationErrors.processSteps"
-                class="validation-error">
-                {{ validationErrors.processSteps }}
-              </div>
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 7: Documentation & Privacy -->
-        <div class="section-card">
-          <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
-                v-model="sectionsEnabled.documentation"
-                size="sm"
-                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.documentation">
-            <UFormField label="Documentation Level" class="form-group-large">
-              <USelect
-                v-model="formData.docLevel"
-                :items="docLevelOptions"
-                placeholder="Select documentation level..."
-                size="xl"
-                class="w-full"
-                @change="autoSave" />
-            </UFormField>
+          <!-- Section 3: Conflict Types -->
+          <div class="section-card">
+            <h2 class="section-title">3. Types of Conflicts Covered</h2>
+            <p class="mb-4">
+              Select which types of conflicts this framework will address:
+            </p>
 
-            <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" />
-            </UFormField>
-
-            <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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 8: Consequences & Actions -->
-        <div class="section-card">
-          <h2 class="section-title">8. Consequences & Remedial Actions</h2>
-
-          <div class="space-y-6">
-            <UFormField
-              label="Available Actions (check all that apply)"
-              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" />
-                </div>
-              </div>
-              <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">
-              <UCheckbox
-                v-model="formData.appealProcess"
-                id="appeal-process"
-                label="Include appeals process"
-                help="Parties can request review of decisions"
-                @change="autoSave" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 9: Special Circumstances -->
-        <div class="section-card">
-          <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
-                v-model="sectionsEnabled.special"
-                size="sm"
-                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.special">
             <div class="checkbox-group space-y-3">
               <div
-                v-for="(circumstance, index) in specialCircumstances"
+                v-for="(conflict, index) in conflictTypes"
                 :key="index"
-                class="checkbox-item">
+                class="checkbox-item"
+              >
                 <UCheckbox
-                  v-model="circumstance.checked"
-                  :id="`special-circumstance-${index}`"
-                  :label="circumstance.label"
-                  @change="autoSave" />
+                  v-model="conflict.checked"
+                  :id="`conflict-type-${index}`"
+                  :label="conflict.label"
+                  @change="autoSave"
+                />
               </div>
             </div>
+            <div v-if="validationErrors.conflictTypes" class="validation-error">
+              {{ validationErrors.conflictTypes }}
+            </div>
           </div>
-        </div>
 
-        <!-- Section 10: Implementation -->
-        <div class="section-card">
-          <h2 class="section-title">10. Implementation Details</h2>
+          <!-- Section 4: Resolution Approach -->
+          <div class="section-card">
+            <h2 class="section-title">4. Primary Resolution Approach</h2>
 
-          <div class="space-y-6">
-            <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" />
-            </UFormField>
-
-            <div class="flex flex-row space-x-4">
-              <UFormField
-                label="Policy Review Schedule"
-                class="form-group-large">
-                <USelect
-                  v-model="formData.reviewSchedule"
-                  :items="reviewScheduleOptions"
-                  placeholder="Select review schedule..."
-                  size="xl"
-                  class="w-full"
-                  :error="validationErrors.reviewSchedule"
-                  @change="autoSave" />
+            <div class="space-y-6">
+              <UFormField label="Choose your primary conflict resolution philosophy:">
+                <URadioGroup
+                  v-model="formData.approach"
+                  :items="approachOptions"
+                  variant="card"
+                  size="lg"
+                  class="mt-2"
+                />
+                <div v-if="validationErrors.approach" class="validation-error">
+                  {{ validationErrors.approach }}
+                </div>
               </UFormField>
-              <UFormField
-                label="How can this policy be amended?"
-                class="form-group-large">
-                <USelect
-                  v-model="formData.amendments"
-                  :items="amendmentOptions"
-                  placeholder="Select amendment process..."
-                  size="xl"
-                  class="w-full"
-                  :error="validationErrors.amendments"
-                  @change="autoSave" />
+
+              <UFormField class="form-group-large">
+                <UCheckbox
+                  v-model="formData.anonymousReporting"
+                  id="anonymous-reporting"
+                  label="Allow anonymous reporting"
+                  help="Members can report issues without revealing their identity"
+                  @change="autoSave"
+                />
               </UFormField>
             </div>
+          </div>
 
-            <div class="p-6 bg-neutral-50 dark:bg-neutral-900 rounded-lg">
+          <!-- Section 5: Roles & Responsibilities -->
+          <div class="section-card">
+            <h2 class="section-title">5. Roles & Responsibilities</h2>
+
+            <div class="space-y-6">
+              <UFormField
+                label="Who can receive initial conflict reports? (check all that apply)"
+                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"
+                    />
+                  </div>
+                </div>
+                <div v-if="validationErrors.reportReceivers" class="validation-error">
+                  {{ validationErrors.reportReceivers }}
+                </div>
+              </UFormField>
+
+              <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"
+                />
+              </UFormField>
+
+              <UFormField class="form-group-large">
+                <UCheckbox
+                  v-model="formData.supportPeople"
+                  id="support-people"
+                  label="Allow support people in mediation sessions"
+                  help="Parties can bring a trusted person for emotional support"
+                  @change="autoSave"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Section 6: Timeline & Process -->
+          <div class="section-card">
+            <h2 class="section-title">6. Timeline & Process Steps</h2>
+
+            <div class="space-y-6">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormField label="Framework Created Date">
-                  <UInput
-                    v-model="formData.createdDate"
-                    type="date"
+                <UFormField label="Initial Response Time" class="form-group-large">
+                  <USelect
+                    v-model="formData.initialResponse"
+                    :items="responseTimeOptions"
+                    placeholder="Select response time..."
                     size="xl"
-                    class="w-full mb-0"
-                    @change="autoSave" />
+                    class="w-full"
+                    :error="validationErrors.initialResponse"
+                    @change="autoSave"
+                  />
                 </UFormField>
 
-                <UFormField label="Next Review Date">
-                  <UInput
-                    v-model="formData.reviewDate"
-                    type="date"
+                <UFormField label="Target Resolution Time" class="form-group-large">
+                  <USelect
+                    v-model="formData.resolutionTarget"
+                    :items="resolutionTimeOptions"
+                    placeholder="Select target time..."
                     size="xl"
-                    class="w-full mb-0"
-                    @change="autoSave" />
+                    class="w-full"
+                    :error="validationErrors.resolutionTarget"
+                    @change="autoSave"
+                  />
                 </UFormField>
               </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Section 11: Reflection Process -->
-        <div class="section-card">
-          <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
-                v-model="sectionsEnabled.reflection"
-                size="sm"
-                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">
-              <USelect
-                v-model="formData.reflectionPeriod"
-                :items="reflectionPeriodOptions"
-                placeholder="Select reflection timeframe..."
-                size="xl"
-                class="w-full md:w-1/2 mt-2"
-                @change="autoSave" />
-            </UFormField>
-
-            <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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 12: Direct Resolution Guidelines -->
-        <div class="section-card">
-          <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
-                v-model="sectionsEnabled.directResolution"
-                size="sm"
-                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">
-              <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" />
-                </div>
-              </div>
-            </UFormField>
-
-            <UFormField
-              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" />
-            </UFormField>
-
-            <UFormField
-              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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 13: Responsible Contact People -->
-        <div class="section-card">
-          <h2 class="section-title">
-            13. Responsible Contact People Structure
-          </h2>
-
-          <div class="space-y-6">
-            <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" />
-            </UFormField>
-
-            <UFormField
-              label="Staff Liaison for Conflict Resolution Committee"
-              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" />
-            </UFormField>
-
-            <UFormField
-              label="Board Chair Role in Conflict Resolution"
-              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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- Section 14: Formal Complaint Process -->
-        <div class="section-card">
-          <h2 class="section-title">14. Formal Complaint Requirements</h2>
-
-          <div class="space-y-6">
-            <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" />
-                </div>
-              </div>
-            </UFormField>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <UFormField
-                label="Formal Complaint Acknowledgment Time"
-                class="form-group-large">
-                <USelect
-                  v-model="formData.formalAcknowledgmentTime"
-                  :items="acknowledgmentTimeOptions"
-                  placeholder="Select acknowledgment timeframe..."
-                  class="w-full"
-                  size="xl"
-                  @change="autoSave" />
-              </UFormField>
 
               <UFormField
-                label="Formal Review Completion Time"
-                class="form-group-large">
-                <USelect
-                  v-model="formData.formalReviewTime"
-                  :items="reviewTimeOptions"
-                  placeholder="Select review timeframe..."
-                  size="xl"
-                  class="w-full"
-                  @change="autoSave" />
+                label="Process Steps (select applicable steps)"
+                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"
+                    />
+                  </div>
+                </div>
+                <div v-if="validationErrors.processSteps" class="validation-error">
+                  {{ validationErrors.processSteps }}
+                </div>
               </UFormField>
             </div>
-
-            <UFormField class="form-group-large">
-              <UCheckbox
-                v-model="formData.requireExternalAdvice"
-                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" />
-            </UFormField>
           </div>
-        </div>
 
-        <!-- Section 15: Settlement & Documentation -->
-        <div class="section-card">
-          <h2 class="section-title">15. Settlement & Documentation</h2>
+          <!-- Section 7: Documentation & Privacy -->
+          <div class="section-card">
+            <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
+                  v-model="sectionsEnabled.documentation"
+                  size="sm"
+                  label="Include this section"
+                  :ui="{
+                    label: 'text-xs text-neutral-700 dark:text-neutral-300',
+                  }"
+                />
+              </div>
+            </div>
 
-          <div class="space-y-6">
-            <UFormField class="form-group-large">
-              <UCheckbox
-                v-model="formData.requireMinutesOfSettlement"
-                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" />
-            </UFormField>
-
-            <div class="flex flex-row space-x-4">
-              <UFormField
-                label="Settlement Confidentiality Level"
-                class="form-group-large">
+            <div class="space-y-6" v-show="sectionsEnabled.documentation">
+              <UFormField label="Documentation Level" class="form-group-large">
                 <USelect
-                  v-model="formData.settlementConfidentiality"
+                  v-model="formData.docLevel"
+                  :items="docLevelOptions"
+                  placeholder="Select documentation level..."
+                  size="xl"
+                  class="w-full"
+                  @change="autoSave"
+                />
+              </UFormField>
+
+              <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="Conflict Resolution File Retention"
-                class="form-group-large">
+
+              <UFormField label="Record Retention Period" class="form-group-large">
                 <USelect
-                  v-model="formData.conflictFileRetention"
+                  v-model="formData.retention"
                   :items="retentionOptions"
                   placeholder="Select retention period..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave" />
+                  @change="autoSave"
+                />
               </UFormField>
             </div>
           </div>
-        </div>
 
-        <!-- Section 16: External Resources -->
-        <div class="section-card">
-          <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
-                v-model="sectionsEnabled.externalResources"
-                size="sm"
-                label="Include external resource information"
-                :ui="{
-                  label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                }" />
+          <!-- Section 8: Consequences & Actions -->
+          <div class="section-card">
+            <h2 class="section-title">8. Consequences & Remedial Actions</h2>
+
+            <div class="space-y-6">
+              <UFormField
+                label="Available Actions (check all that apply)"
+                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"
+                    />
+                  </div>
+                </div>
+                <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"
+              >
+                <UCheckbox
+                  v-model="formData.appealProcess"
+                  id="appeal-process"
+                  label="Include appeals process"
+                  help="Parties can request review of decisions"
+                  @change="autoSave"
+                />
+              </UFormField>
             </div>
           </div>
 
-          <div class="space-y-6" v-show="sectionsEnabled.externalResources">
-            <UFormField class="form-group-large">
-              <UCheckbox
-                v-model="formData.includeHumanRights"
-                id="include-human-rights"
-                label="Include Human Rights Commission information"
-                help="Reference external discrimination complaint options"
-                @change="autoSave" />
-            </UFormField>
-
-            <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" />
-            </UFormField>
-
-            <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" />
-            </UFormField>
-          </div>
-        </div>
-
-        <!-- 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">
-            <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">
-                ✕
-              </UButton>
+          <!-- Section 9: Special Circumstances -->
+          <div class="section-card">
+            <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
+                  v-model="sectionsEnabled.special"
+                  size="sm"
+                  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.special">
+              <div class="checkbox-group space-y-3">
+                <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"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 10: Implementation -->
+          <div class="section-card">
+            <h2 class="section-title">10. Implementation Details</h2>
+
+            <div class="space-y-6">
+              <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"
+                />
+              </UFormField>
+
+              <div class="flex flex-row space-x-4">
+                <UFormField label="Policy Review Schedule" class="form-group-large">
+                  <USelect
+                    v-model="formData.reviewSchedule"
+                    :items="reviewScheduleOptions"
+                    placeholder="Select review schedule..."
+                    size="xl"
+                    class="w-full"
+                    :error="validationErrors.reviewSchedule"
+                    @change="autoSave"
+                  />
+                </UFormField>
+                <UFormField
+                  label="How can this policy be amended?"
+                  class="form-group-large"
+                >
+                  <USelect
+                    v-model="formData.amendments"
+                    :items="amendmentOptions"
+                    placeholder="Select amendment process..."
+                    size="xl"
+                    class="w-full"
+                    :error="validationErrors.amendments"
+                    @change="autoSave"
+                  />
+                </UFormField>
+              </div>
+
+              <div class="p-6 bg-neutral-50 dark:bg-neutral-900 rounded-lg">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <UFormField label="Framework Created Date">
+                    <UInput
+                      v-model="formData.createdDate"
+                      type="date"
+                      size="xl"
+                      class="w-full mb-0"
+                      @change="autoSave"
+                    />
+                  </UFormField>
+
+                  <UFormField label="Next Review Date">
+                    <UInput
+                      v-model="formData.reviewDate"
+                      type="date"
+                      size="xl"
+                      class="w-full mb-0"
+                      @change="autoSave"
+                    />
+                  </UFormField>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 11: Reflection Process -->
+          <div class="section-card">
+            <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
+                  v-model="sectionsEnabled.reflection"
+                  size="sm"
+                  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">
+                <USelect
+                  v-model="formData.reflectionPeriod"
+                  :items="reflectionPeriodOptions"
+                  placeholder="Select reflection timeframe..."
+                  size="xl"
+                  class="w-full md:w-1/2 mt-2"
+                  @change="autoSave"
+                />
+              </UFormField>
+
+              <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"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Section 12: Direct Resolution Guidelines -->
+          <div class="section-card">
+            <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
+                  v-model="sectionsEnabled.directResolution"
+                  size="sm"
+                  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"
+              >
+                <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"
+                    />
+                  </div>
+                </div>
+              </UFormField>
+
+              <UFormField
+                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"
+                />
+              </UFormField>
+
+              <UFormField
+                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"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Section 13: Responsible Contact People -->
+          <div class="section-card">
+            <h2 class="section-title">13. Responsible Contact People Structure</h2>
+
+            <div class="space-y-6">
+              <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"
+                />
+              </UFormField>
+
+              <UFormField
+                label="Staff Liaison for Conflict Resolution Committee"
+                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"
+                />
+              </UFormField>
+
+              <UFormField
+                label="Board Chair Role in Conflict Resolution"
+                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"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Section 14: Formal Complaint Process -->
+          <div class="section-card">
+            <h2 class="section-title">14. Formal Complaint Requirements</h2>
+
+            <div class="space-y-6">
+              <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"
+                    />
+                  </div>
+                </div>
+              </UFormField>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <UFormField
+                  label="Formal Complaint Acknowledgment Time"
+                  class="form-group-large"
+                >
+                  <USelect
+                    v-model="formData.formalAcknowledgmentTime"
+                    :items="acknowledgmentTimeOptions"
+                    placeholder="Select acknowledgment timeframe..."
+                    class="w-full"
+                    size="xl"
+                    @change="autoSave"
+                  />
+                </UFormField>
+
+                <UFormField
+                  label="Formal Review Completion Time"
+                  class="form-group-large"
+                >
+                  <USelect
+                    v-model="formData.formalReviewTime"
+                    :items="reviewTimeOptions"
+                    placeholder="Select review timeframe..."
+                    size="xl"
+                    class="w-full"
+                    @change="autoSave"
+                  />
+                </UFormField>
+              </div>
+
+              <UFormField class="form-group-large">
+                <UCheckbox
+                  v-model="formData.requireExternalAdvice"
+                  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"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Section 15: Settlement & Documentation -->
+          <div class="section-card">
+            <h2 class="section-title">15. Settlement & Documentation</h2>
+
+            <div class="space-y-6">
+              <UFormField class="form-group-large">
+                <UCheckbox
+                  v-model="formData.requireMinutesOfSettlement"
+                  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"
+                />
+              </UFormField>
+
+              <div class="flex flex-row space-x-4">
+                <UFormField
+                  label="Settlement Confidentiality Level"
+                  class="form-group-large"
+                >
+                  <USelect
+                    v-model="formData.settlementConfidentiality"
+                    :items="confidentialityOptions"
+                    placeholder="Select confidentiality level..."
+                    size="xl"
+                    class="w-full"
+                    @change="autoSave"
+                  />
+                </UFormField>
+                <UFormField
+                  label="Conflict Resolution File Retention"
+                  class="form-group-large"
+                >
+                  <USelect
+                    v-model="formData.conflictFileRetention"
+                    :items="retentionOptions"
+                    placeholder="Select retention period..."
+                    size="xl"
+                    class="w-full"
+                    @change="autoSave"
+                  />
+                </UFormField>
+              </div>
+            </div>
+          </div>
+
+          <!-- Section 16: External Resources -->
+          <div class="section-card">
+            <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
+                  v-model="sectionsEnabled.externalResources"
+                  size="sm"
+                  label="Include external resource information"
+                  :ui="{
+                    label: 'text-xs text-neutral-700 dark:text-neutral-300',
+                  }"
+                />
+              </div>
+            </div>
+
+            <div class="space-y-6" v-show="sectionsEnabled.externalResources">
+              <UFormField class="form-group-large">
+                <UCheckbox
+                  v-model="formData.includeHumanRights"
+                  id="include-human-rights"
+                  label="Include Human Rights Commission information"
+                  help="Reference external discrimination complaint options"
+                  @change="autoSave"
+                />
+              </UFormField>
+
+              <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"
+                />
+              </UFormField>
+
+              <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"
+                />
+              </UFormField>
+            </div>
+          </div>
+
+          <!-- Document Preview Section -->
+          <div class="no-print" v-if="showPreview">
             <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-800 rounded-md max-h-[600px] overflow-y-auto text-left"
-              v-html="markdownToHtml(generatePolicyDocument())"></div>
+              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"
+                >
+                  ✕
+                </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-800 rounded-md max-h-[600px] overflow-y-auto text-left"
+                v-html="markdownToHtml(generatePolicyDocument())"
+              ></div>
+            </div>
           </div>
-        </div>
 
-        <!-- Export Controls at Bottom -->
-        <div class="bottom-export-controls no-print">
-          <div class="export-buttons-bottom">
-            <UButton
-              size="lg"
-              variant="solid"
-              @click="showPreview = !showPreview"
-              :title="
-                showPreview ? 'Hide preview' : 'Show policy document preview'
-              ">
-              {{ showPreview ? "👁️ Hide Preview" : "👁️ Show Preview" }}
-            </UButton>
-            <UButton
-              size="lg"
-              color="primary"
-              variant="solid"
-              @click="exportMarkdown"
-              title="Download Policy as Markdown">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="12" y1="18" x2="12" y2="12" />
-                <path d="m9 15 3-3 3 3" />
-              </svg>
-              Download Policy (Markdown)
-            </UButton>
+          <!-- Export Controls at Bottom -->
+          <div class="bottom-export-controls no-print">
+            <div class="flex flex-wrap gap-4 items-center justify-center">
+              <UButton
+                size="lg"
+                variant="solid"
+                @click="showPreview = !showPreview"
+                :title="showPreview ? 'Hide preview' : 'Show policy document preview'"
+              >
+                {{ showPreview ? "👁️ Hide Preview" : "👁️ Show Preview" }}
+              </UButton>
+              <UButton
+                size="lg"
+                color="primary"
+                variant="solid"
+                @click="exportMarkdown"
+                title="Download Policy as Markdown"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14,2 14,8 20,8" />
+                  <line x1="12" y1="18" x2="12" y2="12" />
+                  <path d="m9 15 3-3 3 3" />
+                </svg>
+                Download Policy (Markdown)
+              </UButton>
+              <UButton
+                size="lg"
+                variant="solid"
+                @click="copyPlainText"
+                title="Copy Policy as Text"
+              >
+                Copy Text
+              </UButton>
+              <span
+                v-if="copySuccess"
+                class="text-green-600 dark:text-green-400 text-xs font-medium"
+              >
+                Copied
+              </span>
+            </div>
           </div>
         </div>
       </div>
@@ -990,8 +910,8 @@ useHead({
 // Import PDF export composable
 const { exportToPDF } = usePdfExportBasic();
 
-const selectedPreset = ref("");
 const showPreview = ref(false);
+const copySuccess = ref(false);
 
 // Options for dropdowns (using simple string arrays like the working membership template)
 const orgTypeOptions = [
@@ -1043,13 +963,7 @@ 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",
@@ -1110,13 +1024,7 @@ 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,
@@ -1290,18 +1198,14 @@ 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";
   }
@@ -1311,9 +1215,7 @@ 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";
   }
@@ -1361,9 +1263,8 @@ 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;
@@ -1387,12 +1288,10 @@ 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)
@@ -1530,57 +1429,6 @@ const toggleSection = (sectionName) => {
   autoSave();
 };
 
-// Preset loading
-const loadPreset = (preset) => {
-  selectedPreset.value = preset;
-
-  switch (preset) {
-    case "small-coop":
-      formData.value.orgType = "Worker Cooperative";
-      formData.value.memberCount = "5";
-      formData.value.approach = "restorative";
-      formData.value.initialResponse = "Within 48 hours";
-      formData.value.resolutionTarget = "2 weeks";
-      formData.value.docLevel = "Standard - key points and decisions";
-      coreValues.value.forEach((val, index) => {
-        val.checked = [0, 1, 3, 5].includes(index); // Mutual Care, Transparency, Consent-Based, Restorative Justice
-      });
-      break;
-
-    case "community-org":
-      formData.value.orgType = "Nonprofit";
-      formData.value.memberCount = "15";
-      formData.value.approach = "mediation";
-      formData.value.initialResponse = "Within 72 hours";
-      formData.value.resolutionTarget = "30 days";
-      formData.value.docLevel = "Comprehensive - detailed records";
-      break;
-
-    case "nonprofit":
-      formData.value.orgType = "Nonprofit";
-      formData.value.memberCount = "25";
-      formData.value.approach = "progressive";
-      formData.value.initialResponse = "Within 1 week";
-      formData.value.resolutionTarget = "60 days";
-      formData.value.docLevel = "Comprehensive - detailed records";
-      coreValues.value.forEach((val, index) => {
-        val.checked = [0, 1, 2, 7].includes(index); // Mutual Care, Transparency, Accountability, Accessibility
-      });
-      break;
-
-    case "activist":
-      formData.value.orgType = "Collective";
-      formData.value.approach = "restorative";
-      coreValues.value.forEach((val, index) => {
-        val.checked = [4, 5, 6].includes(index); // Anti-Oppression, Restorative Justice, Collective Liberation
-      });
-      specialCircumstances.value[3].checked = true; // trauma-informed
-      break;
-  }
-
-  autoSave();
-};
-
 // Export functions
 const exportPDF = async () => {
   if (process.server || typeof window === "undefined") {
@@ -1622,6 +1470,95 @@ const exportMarkdown = () => {
   downloadFile(content, filename, "text/markdown");
 };
 
+const copyPlainText = async () => {
+  const content = generatePlainTextContent();
+  try {
+    await copyToClipboard(content);
+    copySuccess.value = true;
+    setTimeout(() => (copySuccess.value = false), 1500);
+  } catch (error) {
+    console.error("Copy to clipboard failed:", error);
+  }
+};
+
+const generatePlainTextContent = () => {
+  let text = generatePolicyDocument();
+
+  // Normalize line endings
+  text = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+
+  // Convert links: [label](url) -> label (url)
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1 ($2)");
+
+  // Remove inline code backticks
+  text = text.replace(/`([^`]+)`/g, "$1");
+
+  // Remove emphasis markers while keeping content
+  text = text
+    .replace(/\*\*\*([^*]+)\*\*\*/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/___([^_]+)___/g, "$1")
+    .replace(/__([^_]+)__/g, "$1")
+    .replace(/_([^_]+)_/g, "$1");
+
+  // Headings: turn "# Heading" into "Heading" with a blank line after
+  text = text.replace(/^#{1,6}\s*(.+)\s*$/gm, (_m, heading) => `${heading}\n\n`);
+
+  // Horizontal rules -> ensure blank line
+  text = text.replace(/^---\s*$/gm, "\n\n");
+
+  // Tables: strip separator rows and space-separate columns
+  text = text
+    .split("\n")
+    .map((line) => {
+      const trimmed = line.trim();
+      if (/^\|.*\|$/.test(trimmed)) {
+        const cells = trimmed
+          .slice(1, -1)
+          .split("|")
+          .map((c) => c.trim());
+        if (cells.every((c) => /^-+$/.test(c))) return ""; // separator row
+        return cells.join("  |  ");
+      }
+      return line;
+    })
+    .join("\n");
+
+  // Ensure blank line before major section keywords if stuck to previous line
+  text = text.replace(/([^\n])\n(\S)/g, (_m, a, b) => `${a}\n${b}`);
+
+  // Collapse 3+ blank lines to exactly two
+  text = text.replace(/\n{3,}/g, "\n\n");
+
+  // Trim trailing spaces on each line
+  text = text.replace(/[ \t]+$/gm, "");
+
+  return text.trim() + "\n";
+};
+
+const copyToClipboard = async (text) => {
+  if (process.server || typeof window === "undefined") {
+    throw new Error("Clipboard not available on server");
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  const successful = document.execCommand("copy");
+  document.body.removeChild(textarea);
+  if (!successful) {
+    throw new Error("execCommand copy failed");
+  }
+};
+
 const generatePolicyDocument = () => {
   const orgName = formData.value.orgName || "[Organization Name]";
   const valuesText = generateValuesSection();
@@ -1804,11 +1741,9 @@ const getConflictPolicyReference = (conflictType) => {
 
 const getConflictNotes = (conflictType) => {
   const notes = {
-    "Harassment or discrimination":
-      "May also pursue through Human Rights Tribunal",
+    "Harassment or discrimination": "May also pursue through Human Rights Tribunal",
     "Work performance issues": "Directly through HR procedures",
-    "Conflicts of interest":
-      "Addressed alongside the organization's specific policy",
+    "Conflicts of interest": "Addressed alongside the organization's specific policy",
     "External organization disputes":
       "Resolved per agreement's dispute resolution clause",
   };
@@ -1859,9 +1794,7 @@ const generateDefinitionsSection = () => {
   if (selectedReceivers.length > 0) {
     definitions += `- **Responsible contact people (RCP)** are those who are accountable for assisting in conflict resolution and addressing formal complaints. In our organization, this includes: ${selectedReceivers
       .map((r) => r.label.toLowerCase())
-      .join(
-        ", "
-      )}. They do not act as advocates for any party in the conflict.\n`;
+      .join(", ")}. They do not act as advocates for any party in the conflict.\n`;
   }
 
   if (formData.value.supportPeople) {
@@ -1914,9 +1847,7 @@ const generateProceduresSection = () => {
     procedures += generateSettlementSection();
   }
 
-  const selectedCircumstances = specialCircumstances.value.filter(
-    (v) => v.checked
-  );
+  const selectedCircumstances = specialCircumstances.value.filter((v) => v.checked);
   if (sectionsEnabled.value.special && selectedCircumstances.length > 0) {
     procedures += "### Special Circumstances\n\n";
     selectedCircumstances.forEach((circumstance) => {
@@ -1941,8 +1872,7 @@ const generateReflectionSection = () => {
 
   section +=
     "1. Set aside some time to think through what happened. What was the other person's behaviour? How did it affect you? *Distinguish other people's **actions** from your **feelings** about them.*\n";
-  section +=
-    "2. Consider what uncertainties or misunderstandings may have occurred.\n";
+  section += "2. Consider what uncertainties or misunderstandings may have occurred.\n";
   section +=
     "3. Distinguish disagreement from personal hostility. Disagreement and dissent are part of healthy discussion. Hostility is not.\n";
   section +=
@@ -2018,9 +1948,7 @@ const generateAssistedResolutionSection = () => {
   const responseTime =
     formData.value.initialResponse?.toLowerCase() || "a reasonable timeframe";
   section += `When someone makes an informal complaint, the responsible contact person (RCP) will ask if they have tried to resolve the issue themselves and will talk to the Internal Advisor if necessary. Within ${
-    responseTime.startsWith("within")
-      ? responseTime.substring(6).trim()
-      : responseTime
+    responseTime.startsWith("within") ? responseTime.substring(6).trim() : responseTime
   } of the complaint being made, the person in charge will work to settle the matter through the informal complaint resolution process.\n\n`;
 
   section += "#### Procedure\n\n";
@@ -2043,9 +1971,7 @@ const generateFormalComplaintsSection = () => {
     formData.value.formalReviewTime?.toLowerCase() || "a reasonable timeframe"
   } or to the satisfaction of the complainant, they may file a *formal complaint* in writing.\n\n`;
 
-  const selectedElements = formalComplaintElements.value.filter(
-    (e) => e.checked
-  );
+  const selectedElements = formalComplaintElements.value.filter((e) => e.checked);
   if (selectedElements.length > 0) {
     section += "The written complaint must include:\n\n";
     selectedElements.forEach((element, index) => {
@@ -2062,8 +1988,7 @@ const generateFormalComplaintsSection = () => {
 
   section += generateResponsibleContactTable("formal");
 
-  const ackTime =
-    formData.value.formalAcknowledgmentTime?.toLowerCase() || "one week";
+  const ackTime = formData.value.formalAcknowledgmentTime?.toLowerCase() || "one week";
   section += `The RCP will acknowledge receipt of the complaint within ${
     ackTime.startsWith("within") ? ackTime.substring(6).trim() : ackTime
   } and forward it to the Internal Advisor (if not self). The Internal Advisor will then proceed to:\n\n`;
@@ -2072,8 +1997,7 @@ const generateFormalComplaintsSection = () => {
     "1. Review the complaint to ensure all information is included and that enough information is present to assess the situation and respond.\n";
   section +=
     "2. Assess and make note of organizational by-laws, policies and codes that might have been violated.\n";
-  section +=
-    "3. If needed, seek advice from external sources of expertise.\n\n";
+  section += "3. If needed, seek advice from external sources of expertise.\n\n";
 
   if (formData.value.requireExternalAdvice) {
     section +=
@@ -2095,8 +2019,7 @@ const generateResponsibleContactTable = (type = "informal") => {
 
   // Staff row
   const staffLiaison =
-    formData.value.staffLiaison ||
-    "staff liaison on the Conflict Resolution Committee";
+    formData.value.staffLiaison || "staff liaison on the Conflict Resolution Committee";
   table += `| **Staff** | Immediate supervisor | ${
     isCooperative ? "One or both Co-EDs" : "Executive Director"
   } | If supervisor is ED and the Respondent, contact ${staffLiaison} |\n`;
@@ -2122,9 +2045,7 @@ const generateResponsibleContactTable = (type = "informal") => {
   } | Internal Advisor | - |\n`;
 
   // Member/Public row
-  const memberType = isCooperative
-    ? "Member of the organization"
-    : "Community member";
+  const memberType = isCooperative ? "Member of the organization" : "Community member";
   table += `| **${memberType}, or member of the public** | Designated staff | ${
     isCooperative ? "ED" : "Executive Director"
   } | If the Respondent is the ED, then contact the Internal Advisor |\n\n`;
@@ -2229,11 +2150,7 @@ onMounted(() => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: radial-gradient(
-      circle at 25% 25%,
-      black 1px,
-      transparent 1px
-    ),
+  background-image: radial-gradient(circle at 25% 25%, black 1px, transparent 1px),
     radial-gradient(circle at 75% 75%, black 1px, transparent 1px);
   background-size: 8px 8px, 8px 8px;
   background-position: 0 0, 4px 4px;
@@ -2534,12 +2451,6 @@ onMounted(() => {
   justify-content: center;
 }
 
-.export-btn.large {
-  padding: 1rem 2rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-
 .export-btn.large svg {
   width: 20px;
   height: 20px;
@@ -2631,8 +2542,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;
 }
@@ -2687,97 +2598,9 @@ html.dark .policy-preview code {
 }
 
 /* Export controls */
-.export-controls {
-  max-width: 8.5in;
-  margin: 0 auto 1.5rem;
-  background: white;
-  border: 1px solid black;
-  padding: 1rem;
-  position: relative;
-}
-.export-controls::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  right: -2px;
-  bottom: -2px;
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  z-index: -1;
-}
-
-.export-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.export-section {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-  flex: 1;
-}
-
-.export-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.export-title {
-  font-weight: 600;
-  color: #374151;
-  margin: 0 1rem 0 0;
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
 
 .export-btn {
-  background: #f9fafb;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  color: #374151;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.export-btn:hover {
-  background: #f3f4f6;
-  border-color: #9ca3af;
-}
-
-.export-btn.primary {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: white;
-}
-
-.export-btn.primary:hover {
-  background: #2563eb;
-  border-color: #2563eb;
-}
-
-.export-btn.validation {
-  background: #10b981;
-  border-color: #10b981;
-  color: white;
-}
-
-.export-btn.validation:hover {
-  background: #059669;
-  border-color: #059669;
+  /* retained for bitmap overrides below; core layout now via Tailwind */
 }
 
 /* Hide elements from print */
@@ -2877,60 +2700,20 @@ html.dark select:focus {
   background: #0a0a0a !important;
 }
 
-/* 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;
-}
-
-button:not(.export-btn):hover {
-  background: black !important;
-  color: white !important;
-  transform: translateY(-1px) translateX(-1px) !important;
-}
-
-/* Dark mode buttons */
-html.dark button:not(.export-btn) {
-  background: #0a0a0a !important;
-  border: 1px solid white !important;
-  color: white !important;
-}
-
-html.dark button:not(.export-btn):hover {
-  background: white !important;
-  color: black !important;
-}
-
-/* Export buttons specifically */
 .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;
+  @apply bg-white border border-black text-black font-mono uppercase font-normal tracking-wide;
 }
 
 .export-btn:hover {
-  background: black !important;
-  color: white !important;
-  transform: translateY(-1px) translateX(-1px) !important;
+  @apply bg-black text-white -translate-x-px -translate-y-px;
 }
 
 .export-btn.primary {
-  background: black !important;
-  color: white !important;
+  @apply bg-black text-white;
 }
 
 .export-btn.primary:hover {
-  background: black !important;
-  transform: translateY(-1px) translateX(-1px) !important;
+  @apply bg-black -translate-x-px -translate-y-px;
 }
 
 /* Remove any card styling roundness */
diff --git a/pages/templates/decision-framework.vue b/pages/templates/decision-framework.vue
index 5fca46c..ffc757f 100644
--- a/pages/templates/decision-framework.vue
+++ b/pages/templates/decision-framework.vue
@@ -1,366 +1,387 @@
 <template>
-  <div
-    class="min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8 px-4"
-    style="font-family: 'Ubuntu', monospace">
-    <div class="max-w-4xl mx-auto relative">
-      <div
-        class="bg-white dark:bg-neutral-950 border border-black dark:border-white decision-framework-container">
-        <!-- Header -->
+  <div>
+    <!-- Wizard Subnav -->
+    <WizardSubnav />
+
+    <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>
+
+      <div class="max-w-4xl mx-auto relative px-4">
         <div
-          class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
-          <!-- Dithered shadow background -->
+          class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container">
+          <!-- Header -->
           <div
-            class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-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 border-white dark:border-black">
-            <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>
+            <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
-                >
-                <span
-                  class="text-sm"
-                  style="font-family: 'Ubuntu Mono', monospace"
-                  >{{ Math.round((currentStep / totalSteps) * 100) }}%</span
-                >
-              </div>
-              <div
-                class="w-full bg-white dark:bg-black h-2 border border-white dark:border-black">
+              <!-- 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
+                  >
+                  <span
+                    class="text-sm"
+                    style="font-family: 'Ubuntu Mono', monospace"
+                    >{{ Math.round((currentStep / totalSteps) * 100) }}%</span
+                  >
+                </div>
                 <div
-                  class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
-                  :style="{
-                    width: (currentStep / totalSteps) * 100 + '%',
-                  }"></div>
+                  class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900">
+                  <div
+                    class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
+                    :style="{
+                      width: (currentStep / totalSteps) * 100 + '%',
+                    }"></div>
+                </div>
               </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 border-black dark:border-white relative">
-                <!-- Dithered shadow background -->
+          <!-- 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="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></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 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>
                 </div>
               </div>
-            </div>
 
-            <!-- Question 2: Reversibility -->
-            <div v-if="currentStep === 2">
+              <!-- Question 2: Reversibility -->
+              <div v-if="currentStep === 2">
+                <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">
+                  <UCard
+                    v-for="option in reversibilityOptions"
+                    :key="option.value"
+                    :class="[
+                      'cursor-pointer transition-all duration-200 border-2',
+                      state.reversible === option.value
+                        ? 'border-violet-700 bg-violet-700 text-white'
+                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                    ]"
+                    @click="selectOption('reversible', option.value)">
+                    <div class="font-semibold mb-1">{{ option.title }}</div>
+                    <div class="text-sm opacity-85">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
+                </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?
+                </div>
+                <div class="grid gap-4">
+                  <UCard
+                    v-for="option in expertiseOptions"
+                    :key="option.value"
+                    :class="[
+                      'cursor-pointer transition-all duration-200 border-2',
+                      state.expertise === option.value
+                        ? 'border-violet-700 bg-violet-700 text-white'
+                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                    ]"
+                    @click="selectOption('expertise', option.value)">
+                    <div class="font-semibold mb-1">{{ option.title }}</div>
+                    <div class="text-sm opacity-85">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
+                </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?
+                </div>
+                <div class="grid gap-4">
+                  <UCard
+                    v-for="option in impactOptions"
+                    :key="option.value"
+                    :class="[
+                      'cursor-pointer transition-all duration-200 border-2',
+                      state.impact === option.value
+                        ? 'border-violet-700 bg-violet-700 text-white'
+                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                    ]"
+                    @click="selectOption('impact', option.value)">
+                    <div class="font-semibold mb-1">{{ option.title }}</div>
+                    <div class="text-sm opacity-85">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
+                </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?
+                </div>
+                <div class="grid gap-4">
+                  <UCard
+                    v-for="option in optionsOptions"
+                    :key="option.value"
+                    :class="[
+                      'cursor-pointer transition-all duration-200 border-2',
+                      state.options === option.value
+                        ? 'border-violet-700 bg-violet-700 text-white'
+                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                    ]"
+                    @click="selectOption('options', option.value)">
+                    <div class="font-semibold mb-1">{{ option.title }}</div>
+                    <div class="text-sm opacity-85">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
+                </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?
+                </div>
+                <div class="grid gap-4">
+                  <UCard
+                    v-for="option in investmentOptions"
+                    :key="option.value"
+                    :class="[
+                      'cursor-pointer transition-all duration-200 border-2',
+                      state.investment === option.value
+                        ? 'border-violet-700 bg-violet-700 text-white'
+                        : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
+                    ]"
+                    @click="selectOption('investment', option.value)">
+                    <div class="font-semibold mb-1">{{ option.title }}</div>
+                    <div class="text-sm opacity-85">
+                      {{ option.description }}
+                    </div>
+                  </UCard>
+                </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)">
+                    {{ size }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- Navigation -->
               <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">
-                <UCard
-                  v-for="option in reversibilityOptions"
-                  :key="option.value"
-                  :class="[
-                    'cursor-pointer transition-all duration-200 border-2',
-                    state.reversible === option.value
-                      ? 'border-violet-700 bg-violet-700 text-white'
-                      : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                  ]"
-                  @click="selectOption('reversible', option.value)">
-                  <div class="font-semibold mb-1">{{ option.title }}</div>
-                  <div class="text-sm opacity-85">{{ option.description }}</div>
-                </UCard>
-              </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?
-              </div>
-              <div class="grid gap-4">
-                <UCard
-                  v-for="option in expertiseOptions"
-                  :key="option.value"
-                  :class="[
-                    'cursor-pointer transition-all duration-200 border-2',
-                    state.expertise === option.value
-                      ? 'border-violet-700 bg-violet-700 text-white'
-                      : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                  ]"
-                  @click="selectOption('expertise', option.value)">
-                  <div class="font-semibold mb-1">{{ option.title }}</div>
-                  <div class="text-sm opacity-85">{{ option.description }}</div>
-                </UCard>
-              </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?
-              </div>
-              <div class="grid gap-4">
-                <UCard
-                  v-for="option in impactOptions"
-                  :key="option.value"
-                  :class="[
-                    'cursor-pointer transition-all duration-200 border-2',
-                    state.impact === option.value
-                      ? 'border-violet-700 bg-violet-700 text-white'
-                      : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                  ]"
-                  @click="selectOption('impact', option.value)">
-                  <div class="font-semibold mb-1">{{ option.title }}</div>
-                  <div class="text-sm opacity-85">{{ option.description }}</div>
-                </UCard>
-              </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?
-              </div>
-              <div class="grid gap-4">
-                <UCard
-                  v-for="option in optionsOptions"
-                  :key="option.value"
-                  :class="[
-                    'cursor-pointer transition-all duration-200 border-2',
-                    state.options === option.value
-                      ? 'border-violet-700 bg-violet-700 text-white'
-                      : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                  ]"
-                  @click="selectOption('options', option.value)">
-                  <div class="font-semibold mb-1">{{ option.title }}</div>
-                  <div class="text-sm opacity-85">{{ option.description }}</div>
-                </UCard>
-              </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?
-              </div>
-              <div class="grid gap-4">
-                <UCard
-                  v-for="option in investmentOptions"
-                  :key="option.value"
-                  :class="[
-                    'cursor-pointer transition-all duration-200 border-2',
-                    state.investment === option.value
-                      ? 'border-violet-700 bg-violet-700 text-white'
-                      : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
-                  ]"
-                  @click="selectOption('investment', option.value)">
-                  <div class="font-semibold mb-1">{{ option.title }}</div>
-                  <div class="text-sm opacity-85">{{ option.description }}</div>
-                </UCard>
-              </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">
+                class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200">
                 <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)">
-                  {{ size }}
+                  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>
 
-            <!-- Navigation -->
+            <!-- Results -->
             <div
-              class="flex justify-between items-center mt-12 pt-8 border-t border-neutral-200">
-              <button
-                v-if="currentStep > 1"
-                @click="previousStep"
-                class="px-6 py-3 text-violet-700 border border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
-                ← Previous
-              </button>
-              <div v-else></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>
+                </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>
+                <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>
+                      <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>
+
+                <UAlert
+                  v-if="result.warning"
+                  color="red"
+                  variant="soft"
+                  :title="'Watch out for:'"
+                  :description="result.warning"
+                  class="mb-6" />
+
+                <UAlert
+                  v-if="result.success"
+                  color="emerald"
+                  variant="soft"
+                  :title="'Success looks like:'"
+                  :description="result.success"
+                  class="mb-6" />
+
+                <UCard v-if="result.alternatives" class="bg-neutral-50">
+                  <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
+                    Also consider:
+                  </h3>
+                  <div class="space-y-3">
+                    <UCard
+                      v-for="alt in result.alternatives"
+                      :key="alt.method"
+                      class="bg-white">
+                      <span class="font-semibold">{{ alt.method }}:</span>
+                      {{ alt.when }}
+                    </UCard>
+                  </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>
           </div>
-
-          <!-- Results -->
-          <div
-            v-if="showResult"
-            data-results
-            class="border-t 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>
-              </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>
-                    <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>
-
-              <UAlert
-                v-if="result.warning"
-                color="red"
-                variant="soft"
-                :title="'Watch out for:'"
-                :description="result.warning"
-                class="mb-6" />
-
-              <UAlert
-                v-if="result.success"
-                color="emerald"
-                variant="soft"
-                :title="'Success looks like:'"
-                :description="result.success"
-                class="mb-6" />
-
-              <UCard v-if="result.alternatives" class="bg-neutral-50">
-                <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
-                  Also consider:
-                </h3>
-                <div class="space-y-3">
-                  <UCard
-                    v-for="alt in result.alternatives"
-                    :key="alt.method"
-                    class="bg-white">
-                    <span class="font-semibold">{{ alt.method }}:</span>
-                    {{ alt.when }}
-                  </UCard>
-                </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>
         </div>
       </div>
     </div>
diff --git a/pages/templates/membership-agreement.vue b/pages/templates/membership-agreement.vue
index e8b35a7..9a7b23c 100644
--- a/pages/templates/membership-agreement.vue
+++ b/pages/templates/membership-agreement.vue
@@ -1,816 +1,771 @@
 <template>
-  <div
-    class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
-    <!-- Export Controls -->
-    <div class="export-controls no-print no-pdf">
-      <div class="export-content">
-        <div class="export-section">
-          <h3 class="export-title">Export to:</h3>
-          <div class="export-buttons">
-            <button
-              @click="exportPDF"
-              class="export-btn primary"
-              title="Download PDF">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10,9 9,9 8,9" />
-              </svg>
+  <div>
+    <!-- Wizard Subnav -->
+    <WizardSubnav />
+
+    <div
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+      <!-- Export Controls -->
+      <div class="max-w-4xl mx-auto no-print no-pdf mb-8 py-4">
+        <div class="flex justify-end">
+          <div class="flex items-center gap-4">
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              @click="exportPDF">
+              <UIcon name="i-heroicons-document-arrow-down" class="mr-2" />
               PDF
-            </button>
-            <button
-              @click="handlePrint"
-              class="export-btn"
-              title="Print Document">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <polyline points="6,9 6,2 18,2 18,9" />
-                <path
-                  d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
-                <rect x="6" y="14" width="12" height="8" />
-              </svg>
-              PRINT
-            </button>
-            <button
-              @click="exportText"
-              class="export-btn"
-              title="Download Text">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <line x1="12" y1="9" x2="8" y2="9" />
-              </svg>
-              TXT
-            </button>
-            <button
-              @click="exportMarkdown"
-              class="export-btn"
-              title="Download Markdown">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="12" y1="18" x2="12" y2="12" />
-                <path d="m9 15 3-3 3 3" />
-              </svg>
-              MD
-            </button>
+            </UButton>
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              @click="handlePrint">
+              <UIcon name="i-heroicons-printer" class="mr-2" />
+              Print
+            </UButton>
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              @click="exportText">
+              <UIcon name="i-heroicons-document-text" class="mr-2" />
+              Text
+            </UButton>
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              @click="exportMarkdown">
+              <UIcon name="i-heroicons-arrow-down-tray" class="mr-2" />
+              Markdown
+            </UButton>
           </div>
         </div>
       </div>
-    </div>
 
-    <!-- Document Container -->
-    <div
-      class="document-page max-w-[8.5in] min-h-[11in] mx-auto bg-white relative p-[0.5in]">
-      <div class="template-content">
-        <!-- Document Title -->
-        <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'">
-            MEMBERSHIP AGREEMENT
-          </h1>
-        </div>
+      <!-- Document Container -->
+      <div class="document-page">
+        <div class="template-content">
+          <!-- Document Title -->
+          <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'
+              ">
+              MEMBERSHIP AGREEMENT
+            </h1>
+          </div>
 
-        <!-- Section 1: Who We Are -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            1. Who We Are
-          </h2>
+          <!-- 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">
+              1. Who We Are
+            </h2>
 
-          <div class="space-y-8">
-            <UFormField label="Cooperative Name" class="form-group-large">
-              <UInput
-                v-model="formData.cooperativeName"
-                placeholder="Enter cooperative name"
-                size="xl"
-                class="w-full"
-                @input="debouncedAutoSave"
-                @change="autoSave" />
-            </UFormField>
+            <div class="space-y-8">
+              <UFormField label="Cooperative Name" class="form-group-large">
+                <UInput
+                  v-model="formData.cooperativeName"
+                  placeholder="Enter cooperative name"
+                  size="xl"
+                  class="w-full"
+                  @input="debouncedAutoSave"
+                  @change="autoSave" />
+              </UFormField>
 
-            <UFormField label="Date Established" class="form-group-large">
-              <UInput
-                v-model="formData.dateEstablished"
-                type="date"
-                size="xl"
-                class="large-field"
-                @change="autoSave" />
-            </UFormField>
+              <UFormField label="Date Established" class="form-group-large">
+                <UInput
+                  v-model="formData.dateEstablished"
+                  type="date"
+                  size="xl"
+                  class="large-field"
+                  @change="autoSave" />
+              </UFormField>
 
-            <UFormField label="Our Purpose" class="form-group-large">
-              <UTextarea
-                v-model="formData.purpose"
-                :rows="3"
-                placeholder="Write 1-2 sentences about what your cooperative does and why it exists"
-                size="xl"
-                class="large-field"
-                @input="debouncedAutoSave"
-                @change="autoSave" />
-            </UFormField>
+              <UFormField label="Our Purpose" class="form-group-large">
+                <UTextarea
+                  v-model="formData.purpose"
+                  :rows="3"
+                  placeholder="Write 1-2 sentences about what your cooperative does and why it exists"
+                  size="xl"
+                  class="large-field"
+                  @input="debouncedAutoSave"
+                  @change="autoSave" />
+              </UFormField>
 
-            <UFormField label="Our Core Values" class="form-group-large">
-              <UTextarea
-                v-model="formData.coreValues"
-                :rows="4"
-                placeholder="List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation"
-                size="xl"
-                class="large-field"
-                @input="debouncedAutoSave"
-                @change="autoSave" />
-            </UFormField>
+              <UFormField label="Our Core Values" class="form-group-large">
+                <UTextarea
+                  v-model="formData.coreValues"
+                  :rows="4"
+                  placeholder="List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation"
+                  size="xl"
+                  class="large-field"
+                  @input="debouncedAutoSave"
+                  @change="autoSave" />
+              </UFormField>
 
-            <div class="form-group-large">
-              <div class="flex items-center justify-between mb-4">
-                <label
-                  class="text-lg font-semibold text-neutral-900 dark:text-neutral-100"
-                  >Current Members</label
-                >
-                <UButton
-                  @click="addMember"
-                  size="sm"
-                  color="primary"
-                  variant="outline"
-                  icon="i-heroicons-plus">
-                  Add Member
-                </UButton>
-              </div>
+              <div class="form-group-large">
+                <div class="flex items-center justify-between mb-4">
+                  <label
+                    class="text-lg font-semibold text-neutral-900 dark:text-neutral-100"
+                    >Current Members</label
+                  >
+                  <UButton
+                    @click="addMember"
+                    size="sm"
+                    color="primary"
+                    variant="outline"
+                    icon="i-heroicons-plus">
+                    Add Member
+                  </UButton>
+                </div>
 
-              <div class="space-y-4">
-                <div
-                  v-for="(member, index) in formData.members"
-                  :key="index"
-                  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">
-                      Member {{ index + 1 }}
-                    </h4>
-                    <UButton
-                      v-if="formData.members.length > 1"
-                      @click="removeMember(index)"
-                      size="sm"
-                      color="red"
-                      variant="ghost"
-                      icon="i-heroicons-trash">
-                    </UButton>
-                  </div>
+                <div class="space-y-4">
+                  <div
+                    v-for="(member, index) in formData.members"
+                    :key="index"
+                    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">
+                        Member {{ index + 1 }}
+                      </h4>
+                      <UButton
+                        v-if="formData.members.length > 1"
+                        @click="removeMember(index)"
+                        size="sm"
+                        color="red"
+                        variant="ghost"
+                        icon="i-heroicons-trash">
+                      </UButton>
+                    </div>
 
-                  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <UFormField label="Full Name" class="form-group-large">
-                      <UInput
-                        v-model="member.name"
-                        placeholder="Enter full name"
-                        size="xl"
-                        class="large-field"
-                        @input="debouncedAutoSave"
-                        @change="autoSave" />
-                    </UFormField>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <UFormField label="Full Name" class="form-group-large">
+                        <UInput
+                          v-model="member.name"
+                          placeholder="Enter full name"
+                          size="xl"
+                          class="large-field"
+                          @input="debouncedAutoSave"
+                          @change="autoSave" />
+                      </UFormField>
 
-                    <UFormField label="Email" class="form-group-large">
-                      <UInput
-                        v-model="member.email"
-                        type="email"
-                        placeholder="Enter email address"
-                        size="xl"
-                        class="large-field"
-                        @input="debouncedAutoSave"
-                        @change="autoSave" />
-                    </UFormField>
+                      <UFormField label="Email" class="form-group-large">
+                        <UInput
+                          v-model="member.email"
+                          type="email"
+                          placeholder="Enter email address"
+                          size="xl"
+                          class="large-field"
+                          @input="debouncedAutoSave"
+                          @change="autoSave" />
+                      </UFormField>
 
-                    <UFormField label="Join Date" class="form-group-large">
-                      <UInput
-                        v-model="member.joinDate"
-                        type="date"
-                        size="xl"
-                        class="large-field"
-                        @change="autoSave" />
-                    </UFormField>
+                      <UFormField label="Join Date" class="form-group-large">
+                        <UInput
+                          v-model="member.joinDate"
+                          type="date"
+                          size="xl"
+                          class="large-field"
+                          @change="autoSave" />
+                      </UFormField>
 
-                    <UFormField
-                      label="Current Role (Optional)"
-                      class="form-group-large">
-                      <UInput
-                        v-model="member.role"
-                        placeholder="e.g., Coordinator, Developer, etc."
-                        size="xl"
-                        class="large-field"
-                        @input="debouncedAutoSave"
-                        @change="autoSave" />
-                    </UFormField>
+                      <UFormField
+                        label="Current Role (Optional)"
+                        class="form-group-large">
+                        <UInput
+                          v-model="member.role"
+                          placeholder="e.g., Coordinator, Developer, etc."
+                          size="xl"
+                          class="large-field"
+                          @input="debouncedAutoSave"
+                          @change="autoSave" />
+                      </UFormField>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <!-- Section 2: Membership -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            2. Membership
-          </h2>
+          <!-- Section 2: Membership -->
+          <div class="section-card">
+            <h2
+              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">
-                Who Can Be a Member
-              </h3>
-              <p class="content-paragraph mb-3 leading-relaxed text-left">
-                Any person who:
-              </p>
-              <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)
-                </li>
-                <li>Commits to collective decision-making</li>
-                <li>Participates in governance responsibilities</li>
-              </ul>
-            </div>
+            <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">
+                  Who Can Be a Member
+                </h3>
+                <p class="content-paragraph mb-3 leading-relaxed text-left">
+                  Any person who:
+                </p>
+                <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)
+                  </li>
+                  <li>Commits to collective decision-making</li>
+                  <li>Participates in governance responsibilities</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">
-                Becoming a Member
-              </h3>
+              <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">
+                  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.
-              </p>
+                <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.
+                </p>
 
-              <ol class="content-list numbered my-2 pl-6 list-decimal">
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Trial period of
+                <ol class="content-list numbered my-2 pl-6 list-decimal">
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Trial period of
+                    <UInput
+                      v-model="formData.trialPeriodMonths"
+                      type="number"
+                      placeholder="3"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                    months working together
+                  </li>
+                  <li>Values alignment conversation</li>
+                  <li>Consent decision by current members</li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Optional - Equal buy-in contribution of $<UInput
+                      v-model="formData.buyInAmount"
+                      type="number"
+                      placeholder="1000"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                    (can be paid over time or waived based on need)
+                  </li>
+                </ol>
+              </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">
+                  Leaving the Cooperative
+                </h3>
+
+                <p
+                  class="content-paragraph flex items-baseline gap-2 flex-wrap">
+                  Members can leave anytime with
                   <UInput
-                    v-model="formData.trialPeriodMonths"
-                    type="number"
-                    placeholder="3"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                  months working together
-                </li>
-                <li>Values alignment conversation</li>
-                <li>Consent decision by current members</li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Optional - Equal buy-in contribution of $<UInput
-                    v-model="formData.buyInAmount"
-                    type="number"
-                    placeholder="1000"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                  (can be paid over time or waived based on need)
-                </li>
-              </ol>
-            </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">
-                Leaving the Cooperative
-              </h3>
-
-              <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" />
-                days notice. The cooperative will:
-              </p>
-
-              <ul class="content-list my-2 pl-6 list-disc">
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Pay out their share of any surplus within
-                  <UInput
-                    v-model="formData.surplusPayoutDays"
+                    v-model="formData.noticeDays"
                     type="number"
                     placeholder="30"
                     class="inline-field number-field"
                     @change="autoSave" />
-                  days
-                </li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Return their buy-in contribution within
-                  <UInput
-                    v-model="formData.buyInReturnDays"
-                    type="number"
-                    placeholder="90"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                  days
-                </li>
-                <li>Maintain respectful ongoing relationships when possible</li>
-              </ul>
+                  days notice. The cooperative will:
+                </p>
+
+                <ul class="content-list my-2 pl-6 list-disc">
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Pay out their share of any surplus within
+                    <UInput
+                      v-model="formData.surplusPayoutDays"
+                      type="number"
+                      placeholder="30"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                    days
+                  </li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Return their buy-in contribution within
+                    <UInput
+                      v-model="formData.buyInReturnDays"
+                      type="number"
+                      placeholder="90"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                    days
+                  </li>
+                  <li>
+                    Maintain respectful ongoing relationships when possible
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- Section 3: How We Make Decisions -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            3. How We Make Decisions
-          </h2>
+          <!-- 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">
+              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">
-                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.
-              </p>
-            </div>
-
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <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">
-                  Day-to-Day Decisions
+                  Consent-Based Decisions
                 </h3>
-                <p
-                  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.
+                <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.
                 </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">
+                    Day-to-Day Decisions
+                  </h3>
+                  <p
+                    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.
+                  </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">
+                    Regular Decisions
+                  </h3>
+                  <p
+                    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" />
+                    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).
+                  </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">
-                  Regular Decisions
+                  Major Decisions
                 </h3>
-                <p
-                  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" />
-                  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).
+                <p class="content-paragraph mb-3 leading-relaxed text-left">
+                  These require consent from all members:
                 </p>
+                <ul class="content-list my-2 pl-6 list-disc">
+                  <li>Adding or removing members</li>
+                  <li>Changing this agreement</li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Taking on debt over $<UInput
+                      v-model="formData.majorDebtThreshold"
+                      type="number"
+                      placeholder="5000"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                  </li>
+                  <li>Fundamental changes to our purpose or structure</li>
+                  <li>Dissolution of the cooperative</li>
+                </ul>
               </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">
-                Major Decisions
-              </h3>
-              <p class="content-paragraph mb-3 leading-relaxed text-left">
-                These require consent from all members:
-              </p>
-              <ul class="content-list my-2 pl-6 list-disc">
-                <li>Adding or removing members</li>
-                <li>Changing this agreement</li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Taking on debt over $<UInput
-                    v-model="formData.majorDebtThreshold"
-                    type="number"
-                    placeholder="5000"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                </li>
-                <li>Fundamental changes to our purpose or structure</li>
-                <li>Dissolution of the cooperative</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">
-                Meeting Structure
-              </h3>
-              <ul class="content-list my-2 pl-6 list-disc">
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Regular meetings happen
-                  <UInput
-                    v-model="formData.meetingFrequency"
-                    placeholder="weekly"
-                    class="inline-field"
-                    @change="autoSave" />
-                </li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Emergency meetings need
-                  <UInput
-                    v-model="formData.emergencyNoticeHours"
-                    type="number"
-                    placeholder="24"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                  hours notice
-                </li>
-                <li>We rotate who facilitates meetings</li>
-                <li>Decisions and reasoning get documented in shared notes</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-
-        <!-- Section 4: Money and Labour -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            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">
-                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.
-              </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">
-                Paying Ourselves
-              </h3>
-              <ul class="content-list my-2 pl-6 list-disc">
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Base rate: $<UInput
-                    v-model="formData.baseRate"
-                    type="number"
-                    placeholder="25"
-                    class="inline-field number-field"
-                    @change="autoSave" />/hour for all members
-                </li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Or: Equal monthly draw of $<UInput
-                    v-model="formData.monthlyDraw"
-                    type="number"
-                    placeholder="2000"
-                    class="inline-field number-field"
-                    @change="autoSave" />
-                  per member
-                </li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Paid on the
-                  <USelect
-                    v-model="formData.paymentDay"
-                    :items="dayOptions"
-                    placeholder="15"
-                    class="inline-field"
-                    @change="autoSave" />
-                  of each month
-                </li>
-                <li class="flex items-baseline gap-2 flex-wrap">
-                  Surplus (profit) distributed equally every
-                  <UInput
-                    v-model="formData.surplusFrequency"
-                    placeholder="quarter"
-                    class="inline-field"
-                    @change="autoSave" />
-                </li>
-              </ul>
-            </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">
-                  Work Expectations
+                  Meeting Structure
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
                   <li class="flex items-baseline gap-2 flex-wrap">
-                    Target hours per week:
+                    Regular meetings happen
                     <UInput
-                      v-model="formData.targetHours"
+                      v-model="formData.meetingFrequency"
+                      placeholder="weekly"
+                      class="inline-field"
+                      @change="autoSave" />
+                  </li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Emergency meetings need
+                    <UInput
+                      v-model="formData.emergencyNoticeHours"
                       type="number"
-                      placeholder="40"
+                      placeholder="24"
                       class="inline-field number-field"
                       @change="autoSave" />
-                    (flexible based on capacity)
+                    hours notice
                   </li>
-                  <li>We explicitly reject crunch culture</li>
-                  <li>Members communicate their capacity openly</li>
+                  <li>We rotate who facilitates meetings</li>
                   <li>
-                    We adjust workload collectively when someone needs reduced
-                    hours
+                    Decisions and reasoning get documented in shared notes
                   </li>
                 </ul>
               </div>
+            </div>
+          </div>
+
+          <!-- 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">
+              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">
+                  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.
+                </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">
+                  Paying Ourselves
+                </h3>
+                <ul class="content-list my-2 pl-6 list-disc">
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Base rate: $<UInput
+                      v-model="formData.baseRate"
+                      type="number"
+                      placeholder="25"
+                      class="inline-field number-field"
+                      @change="autoSave" />/hour for all members
+                  </li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Or: Equal monthly draw of $<UInput
+                      v-model="formData.monthlyDraw"
+                      type="number"
+                      placeholder="2000"
+                      class="inline-field number-field"
+                      @change="autoSave" />
+                    per member
+                  </li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Paid on the
+                    <USelect
+                      v-model="formData.paymentDay"
+                      :items="dayOptions"
+                      placeholder="15"
+                      class="inline-field"
+                      @change="autoSave" />
+                    of each month
+                  </li>
+                  <li class="flex items-baseline gap-2 flex-wrap">
+                    Surplus (profit) distributed equally every
+                    <UInput
+                      v-model="formData.surplusFrequency"
+                      placeholder="quarter"
+                      class="inline-field"
+                      @change="autoSave" />
+                  </li>
+                </ul>
+              </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">
+                    Work Expectations
+                  </h3>
+                  <ul class="content-list my-2 pl-6 list-disc">
+                    <li class="flex items-baseline gap-2 flex-wrap">
+                      Target hours per week:
+                      <UInput
+                        v-model="formData.targetHours"
+                        type="number"
+                        placeholder="40"
+                        class="inline-field number-field"
+                        @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
+                    </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">
+                    Financial Transparency
+                  </h3>
+                  <ul class="content-list my-2 pl-6 list-disc">
+                    <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)
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 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">
+              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">
+                  Rotating Roles
+                </h3>
+                <p
+                  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" />
+                  months. Current roles include:
+                </p>
+                <ul class="content-list">
+                  <li>
+                    Financial coordinator (handles bookkeeping, not financial
+                    decisions)
+                  </li>
+                  <li>Meeting facilitator</li>
+                  <li>External communications</li>
+                  <li>Others</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">
-                  Financial Transparency
+                  Shared Responsibilities
+                </h3>
+                <p class="content-paragraph mb-3 leading-relaxed text-left">
+                  All members participate in:
+                </p>
+                <ul class="content-list my-2 pl-6 list-disc">
+                  <li>Governance and decision-making</li>
+                  <li>Strategic planning</li>
+                  <li>Mutual support and care</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- 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">
+              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">
+                  When Conflict Happens
+                </h3>
+                <ol class="content-list numbered my-2 pl-6 list-decimal">
+                  <li>Direct conversation between parties (if comfortable)</li>
+                  <li>Mediation with another member</li>
+                  <li>Full group discussion with structured process</li>
+                  <li>External mediation if needed</li>
+                </ol>
+              </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">
+                  Care Commitments
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
-                  <li>All members can access all financial records anytime</li>
-                  <li>Monthly financial check-ins at meetings</li>
+                  <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>
-                    Quarterly reviews of our runway (how many months we can
-                    operate)
+                    We contribute to mutual aid when members face hardship
                   </li>
                 </ul>
               </div>
             </div>
           </div>
-        </div>
 
-        <!-- Section 5: Roles and Responsibilities -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            5. Roles and Responsibilities
-          </h2>
+          <!-- 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">
+              7. Changing This Agreement
+            </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">
-                Rotating Roles
-              </h3>
-              <p
-                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" />
-                months. Current roles include:
-              </p>
-              <ul class="content-list">
-                <li>
-                  Financial coordinator (handles bookkeeping, not financial
-                  decisions)
-                </li>
-                <li>Meeting facilitator</li>
-                <li>External communications</li>
-                <li>Others</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">
-                Shared Responsibilities
-              </h3>
-              <p class="content-paragraph mb-3 leading-relaxed text-left">
-                All members participate in:
-              </p>
-              <ul class="content-list my-2 pl-6 list-disc">
-                <li>Governance and decision-making</li>
-                <li>Strategic planning</li>
-                <li>Mutual support and care</li>
-              </ul>
-            </div>
+            <p
+              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.
+            </p>
           </div>
-        </div>
 
-        <!-- Section 6: Conflict and Care -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            6. Conflict and Care
-          </h2>
+          <!-- 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">
+              8. If We Need to Close
+            </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">
-                When Conflict Happens
-              </h3>
+            <div class="space-y-4">
+              <p class="content-paragraph mb-3 leading-relaxed text-left">
+                If the cooperative dissolves:
+              </p>
               <ol class="content-list numbered my-2 pl-6 list-decimal">
-                <li>Direct conversation between parties (if comfortable)</li>
-                <li>Mediation with another member</li>
-                <li>Full group discussion with structured process</li>
-                <li>External mediation if needed</li>
+                <li>Pay all debts and obligations</li>
+                <li>Return member contributions</li>
+                <li>Distribute remaining assets equally among members</li>
+                <li class="flex items-baseline gap-2 flex-wrap">
+                  Or donate remaining assets to
+                  <UInput
+                    v-model="formData.assetDonationTarget"
+                    placeholder="Enter organization name"
+                    class="inline-field wide-field" />
+                </li>
               </ol>
             </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">
-                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>
-              </ul>
-            </div>
           </div>
-        </div>
 
-        <!-- Section 7: Changing This Agreement -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            7. Changing This Agreement
-          </h2>
+          <!-- 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">
+              9. Legal Bits
+            </h2>
 
-          <p
-            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.
-          </p>
-        </div>
-
-        <!-- Section 8: If We Need to Close -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            8. If We Need to Close
-          </h2>
-
-          <div class="space-y-4">
-            <p class="content-paragraph mb-3 leading-relaxed text-left">
-              If the cooperative dissolves:
-            </p>
-            <ol class="content-list numbered my-2 pl-6 list-decimal">
-              <li>Pay all debts and obligations</li>
-              <li>Return member contributions</li>
-              <li>Distribute remaining assets equally among members</li>
-              <li class="flex items-baseline gap-2 flex-wrap">
-                Or donate remaining assets to
-                <UInput
-                  v-model="formData.assetDonationTarget"
-                  placeholder="Enter organization name"
-                  class="inline-field wide-field" />
-              </li>
-            </ol>
-          </div>
-        </div>
-
-        <!-- Section 9: Legal Bits -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            9. Legal Bits
-          </h2>
-
-          <div class="space-y-4">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <UFormField label="Legal Structure" class="form-group-block">
-                <UInput
-                  v-model="formData.legalStructure"
-                  size="xl"
-                  class="w-full"
-                  placeholder="Cooperative corporation, LLC, partnership, etc." />
-              </UFormField>
-
-              <UFormField label="Registered in" class="form-group-inline">
-                <UInput
-                  v-model="formData.registeredLocation"
-                  placeholder="State/Province"
-                  size="xl"
-                  class="inline-field w-full"
-                  @change="autoSave" />
-              </UFormField>
-
-              <div class="fiscal-year-group">
-                <UFormField label="Fiscal Year-End" class="form-group-inline">
-                  <div class="flex gap-2 items-center">
-                    <USelect
-                      v-model="formData.fiscalYearEndMonth"
-                      :items="monthOptions"
-                      placeholder="Month"
-                      size="xl"
-                      class="w-60"
-                      @change="autoSave" />
-                    <USelect
-                      v-model="formData.fiscalYearEndDay"
-                      :items="dayOptions"
-                      placeholder="Day"
-                      size="xl"
-                      class="w-40"
-                      @change="autoSave" />
-                  </div>
+            <div class="space-y-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <UFormField label="Legal Structure" class="form-group-block">
+                  <UInput
+                    v-model="formData.legalStructure"
+                    size="xl"
+                    class="w-full"
+                    placeholder="Cooperative corporation, LLC, partnership, etc." />
                 </UFormField>
+
+                <UFormField label="Registered in" class="form-group-inline">
+                  <UInput
+                    v-model="formData.registeredLocation"
+                    placeholder="State/Province"
+                    size="xl"
+                    class="inline-field w-full"
+                    @change="autoSave" />
+                </UFormField>
+
+                <div class="fiscal-year-group">
+                  <UFormField label="Fiscal Year-End" class="form-group-inline">
+                    <div class="flex gap-2 items-center">
+                      <USelect
+                        v-model="formData.fiscalYearEndMonth"
+                        :items="monthOptions"
+                        placeholder="Month"
+                        size="xl"
+                        class="w-60"
+                        @change="autoSave" />
+                      <USelect
+                        v-model="formData.fiscalYearEndDay"
+                        :items="dayOptions"
+                        placeholder="Day"
+                        size="xl"
+                        class="w-40"
+                        @change="autoSave" />
+                    </div>
+                  </UFormField>
+                </div>
               </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.
-            </p>
+              <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.
+              </p>
+            </div>
           </div>
-        </div>
 
-        <!-- Section 10: Agreement Review -->
-        <div class="section-card mb-6 p-0">
-          <h2
-            class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
-            10. Agreement Review
-          </h2>
+          <!-- 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">
+              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.
-            </p>
-
-            <div
-              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">
-                This agreement was last updated on
-                <UInput
-                  v-model="formData.lastUpdated"
-                  type="date"
-                  class="inline-field"
-                  @change="autoSave" />. We commit to reviewing it on
-                <UInput
-                  v-model="formData.nextReview"
-                  type="date"
-                  class="inline-field"
-                  @change="autoSave" />
-                or sooner if circumstances require.
+            <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.
               </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">
-              <p
-                class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic">
-                [Space for member signatures when printed]
-              </p>
+              <div
+                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">
+                  This agreement was last updated on
+                  <UInput
+                    v-model="formData.lastUpdated"
+                    type="date"
+                    class="inline-field"
+                    @change="autoSave" />. We commit to reviewing it on
+                  <UInput
+                    v-model="formData.nextReview"
+                    type="date"
+                    class="inline-field"
+                    @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">
+                <p
+                  class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic">
+                  [Space for member signatures when printed]
+                </p>
+              </div>
             </div>
           </div>
         </div>
@@ -1662,6 +1617,11 @@ const downloadFile = (content, filename, mimeType) => {
   color: #1f2937;
 }
 
+/* Section styling */
+.section-card {
+  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
+}
+
 .section-card:last-child::after {
   display: none;
 }
diff --git a/pages/templates/tech-charter.vue b/pages/templates/tech-charter.vue
index c76a160..3bc0e3d 100644
--- a/pages/templates/tech-charter.vue
+++ b/pages/templates/tech-charter.vue
@@ -1,189 +1,72 @@
 <template>
-  <div
-    class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
-    <!-- Export Controls -->
-    <div v-if="charterGenerated" class="export-controls no-print no-pdf">
-      <div class="export-content">
-        <div class="export-section">
-          <h3 class="export-title">Export to:</h3>
-          <div class="export-buttons">
-            <button
-              @click="exportPDF"
-              class="export-btn primary"
-              title="Download PDF">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10,9 9,9 8,9" />
-              </svg>
-              PDF
-            </button>
-            <button
-              @click="handlePrint"
-              class="export-btn"
-              title="Print Document">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <polyline points="6,9 6,2 18,2 18,9" />
-                <path
-                  d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
-                <rect x="6" y="14" width="12" height="8" />
-              </svg>
-              PRINT
-            </button>
-            <button
-              @click="exportText"
-              class="export-btn"
-              title="Download Text">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <line x1="12" y1="9" x2="8" y2="9" />
-              </svg>
-              TXT
-            </button>
-            <button
-              @click="exportMarkdown"
-              class="export-btn"
-              title="Download Markdown">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <path
-                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14,2 14,8 20,8" />
-                <line x1="12" y1="18" x2="12" y2="12" />
-                <path d="m9 15 3-3 3 3" />
-              </svg>
-              MD
-            </button>
+  <div>
+    <!-- Wizard Subnav -->
+    <WizardSubnav />
+
+    <div
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+      <!-- Export Controls -->
+      <div class="max-w-4xl mx-auto no-print no-pdf mb-8 py-4">
+        <div class="flex justify-end">
+          <div v-if="charterGenerated" class="flex items-center gap-4">
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              :disabled="!charterGenerated || !canGenerateCharter"
+              :class="[
+                !charterGenerated || !canGenerateCharter
+                  ? 'opacity-50 cursor-not-allowed'
+                  : '',
+              ]"
+              @click="copyPlainText">
+              <UIcon name="i-heroicons-clipboard" class="mr-2" />
+              Copy Text
+            </UButton>
+            <span
+              v-if="copySuccess"
+              class="text-green-600 dark:text-green-400 text-sm font-medium">
+              Copied
+            </span>
+            <UButton
+              variant="outline"
+              color="gray"
+              size="lg"
+              :disabled="!charterGenerated || !canGenerateCharter"
+              :class="[
+                !charterGenerated || !canGenerateCharter
+                  ? 'opacity-50 cursor-not-allowed'
+                  : '',
+              ]"
+              @click="exportMarkdown">
+              <UIcon name="i-heroicons-arrow-down-tray" class="mr-2" />
+              Markdown
+            </UButton>
           </div>
         </div>
       </div>
-    </div>
 
-    <div class="document-page">
-      <div class="max-w-5xl mx-auto">
-        <!-- Header -->
-        <div class="bg-white rounded-t-lg shadow-xl overflow-hidden">
-          <div class="bg-blue-600 text-white p-8 md:p-12 text-center">
+      <!-- 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 mb-3 content-title text-neutral-50 dark:text-neutral-100">
-              Co-op Tech Charter Builder
+              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>
-            <p class="text-lg opacity-95">
-              Build technology decisions on cooperative values, not corporate
-              defaults
-            </p>
-          </div>
-
-          <!-- Progress Bar -->
-          <div
-            class="flex bg-neutral-50 px-8 py-4 border-b"
-            role="tablist"
-            aria-label="Charter builder steps">
-            <button
-              v-for="(step, idx) in steps"
-              :key="idx"
-              @click="currentStep = idx"
-              :aria-selected="currentStep === idx"
-              :aria-label="`Step ${idx + 1}: ${step.label}`"
-              :tabindex="currentStep === idx ? 0 : -1"
-              role="tab"
-              class="flex-1 text-center relative cursor-pointer group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-inset">
-              <div class="flex flex-col items-center">
-                <div
-                  :class="[
-                    'w-10 h-10 rounded-full flex items-center justify-center font-bold transition-all',
-                    currentStep === idx
-                      ? 'bg-blue-600 text-white scale-110'
-                      : currentStep > idx
-                      ? 'bg-green-500 text-white'
-                      : 'bg-neutral-300 text-neutral-600',
-                  ]">
-                  {{ idx + 1 }}
-                </div>
-                <span
-                  :class="[
-                    'mt-2 text-sm',
-                    currentStep === idx
-                      ? 'text-blue-600 font-semibold'
-                      : 'text-neutral-600',
-                  ]">
-                  {{ step.label }}
-                </span>
-              </div>
-            </button>
           </div>
 
           <!-- Content -->
-          <div class="p-8">
-            <!-- Step 1: Principles -->
-            <div
-              v-show="currentStep === 0"
-              class="space-y-6"
-              role="tabpanel"
-              :aria-labelledby="`step-${currentStep}-tab`">
+          <div class="">
+            <!-- Principles Section -->
+            <div class="section-card">
               <div>
                 <h2
-                  class="text-2xl font-bold text-neutral-800 mb-2"
+                  class="text-2xl font-bold text-neutral-800 mb-4"
                   id="principles-heading">
                   Define Your Principles
                 </h2>
-                <p class="text-neutral-600 mb-4">
-                  Select the values that guide your technology choices.
-                </p>
-                <div
-                  class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                  <h3 class="font-semibold text-blue-900 mb-2">How to use:</h3>
-                  <ul class="text-sm text-blue-800 space-y-1">
-                    <li>• Click once to select a principle</li>
-                    <li>
-                      • Click again to mark as "NON-NEGOTIABLE" (vendors must
-                      meet this requirement)
-                    </li>
-                    <li>• Click a third time to deselect</li>
-                  </ul>
-                </div>
               </div>
 
               <fieldset class="space-y-4">
@@ -191,186 +74,272 @@
                   Select your technology principles
                 </legend>
                 <div class="grid md:grid-cols-2 gap-4 principle-grid">
-                  <button
+                  <div
                     v-for="principle in principles"
                     :key="principle.id"
-                    @click="togglePrinciple(principle.id)"
-                    @keydown.enter="togglePrinciple(principle.id)"
-                    @keydown.space.prevent="togglePrinciple(principle.id)"
-                    :aria-pressed="selectedPrinciples.includes(principle.id)"
-                    :aria-describedby="`principle-${principle.id}-desc`"
-                    :class="[
-                      'p-6 rounded-lg border-2 transition-all text-left focus:outline-none focus:ring-2 focus:ring-blue-500',
-                      selectedPrinciples.includes(principle.id)
-                        ? 'bg-blue-600 text-white border-transparent shadow-md'
-                        : 'border-neutral-200 hover:border-blue-400 hover:shadow-md',
-                    ]">
-                    <div class="flex items-start justify-between gap-3">
-                      <div>
-                        <h3 class="font-semibold text-lg mb-2">
-                          <span>{{ principle.name }}</span>
-                        </h3>
-                        <p
-                          :id="`principle-${principle.id}-desc`"
-                          :class="
-                            selectedPrinciples.includes(principle.id)
-                              ? 'opacity-90'
-                              : 'text-neutral-600'
-                          "
-                          class="text-sm">
-                          {{ principle.description }}
-                        </p>
+                    class="space-y-2 relative">
+                    <!-- Dithered shadow for selected cards -->
+                    <div
+                      v-if="selectedPrinciples.includes(principle.id)"
+                      class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                    <div
+                      @click="togglePrincipleSelection(principle.id)"
+                      :class="[
+                        'relative p-4 border-1 transition-all cursor-pointer',
+                        selectedPrinciples.includes(principle.id)
+                          ? 'principle-selected border-black dark:border-white bg-white dark:bg-neutral-950'
+                          : 'border-neutral-200 hover:border-neutral-950  bg-white dark:bg-neutral-950',
+                      ]">
+                      <div class="flex items-start justify-between gap-3">
+                        <div class="flex-1">
+                          <div
+                            :class="[
+                              'principle-text-bg p-3 mb-3',
+                              selectedPrinciples.includes(principle.id)
+                                ? 'selected'
+                                : '',
+                            ]">
+                            <h3 class="font-semibold text-lg mb-2">
+                              {{ principle.name }}
+                            </h3>
+                            <p
+                              :class="
+                                selectedPrinciples.includes(principle.id)
+                                  ? 'text-neutral-700'
+                                  : 'text-neutral-600'
+                              "
+                              class="text-sm">
+                              {{ principle.description }}
+                            </p>
+                          </div>
+                          <div class="flex gap-2">
+                            <label
+                              :class="[
+                                'flex items-center gap-2 cursor-pointer principle-label-bg px-2 py-1',
+                                selectedPrinciples.includes(principle.id)
+                                  ? 'selected'
+                                  : '',
+                              ]"
+                              @click.stop>
+                              <input
+                                type="checkbox"
+                                :checked="
+                                  selectedPrinciples.includes(principle.id)
+                                "
+                                @change="togglePrincipleSelection(principle.id)"
+                                @click.stop
+                                class="w-4 h-4" />
+                              <span class="text-sm font-medium"
+                                >Include this principle</span
+                              >
+                            </label>
+                          </div>
+                          <div
+                            v-if="selectedPrinciples.includes(principle.id)"
+                            class="mt-2 flex">
+                            <label
+                              class="flex items-center gap-2 cursor-pointer principle-label-bg px-2 py-1 selected"
+                              @click.stop>
+                              <input
+                                type="checkbox"
+                                :checked="nonNegotiables.includes(principle.id)"
+                                @change="toggleNonNegotiable(principle.id)"
+                                @click.stop
+                                class="w-4 h-4" />
+                              <span class="text-sm font-medium text-red-600"
+                                >Make this non-negotiable</span
+                              >
+                            </label>
+                          </div>
+                        </div>
                       </div>
-                      <span
-                        v-if="nonNegotiables.includes(principle.id)"
-                        class="bg-red-500 text-white text-xs px-2 py-1 rounded-full font-semibold whitespace-nowrap"
-                        aria-label="Non-negotiable requirement">
-                        NON-NEGOTIABLE
-                      </span>
                     </div>
-                  </button>
+                  </div>
                 </div>
               </fieldset>
             </div>
 
-            <!-- Step 2: Constraints -->
-            <div
-              v-show="currentStep === 1"
-              class="space-y-6"
-              role="tabpanel"
-              :aria-labelledby="`step-${currentStep}-tab`">
+            <!-- Constraints Section -->
+            <div class="section-card">
               <div>
                 <h2
                   class="text-2xl font-bold text-neutral-800 mb-2"
                   id="constraints-heading">
                   Technical Constraints
                 </h2>
-                <p class="text-neutral-600">
-                  Define your technical requirements and operational
-                  constraints.
-                </p>
               </div>
 
               <div class="space-y-6">
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg mb-4">
-                    Authentication
-                  </legend>
+                  <legend class="font-semibold text-lg">Authentication</legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
                     aria-labelledby="auth-heading">
-                    <button
+                    <div
                       v-for="option in authOptions"
                       :key="option.value"
-                      @click="constraints.sso = option.value"
-                      :aria-pressed="constraints.sso === option.value"
-                      role="radio"
-                      :aria-checked="constraints.sso === option.value"
-                      :class="[
-                        'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
-                        constraints.sso === option.value
-                          ? 'bg-blue-600 text-white border-blue-600'
-                          : 'border-neutral-300 hover:border-blue-400',
-                      ]">
-                      {{ option.label }}
-                    </button>
+                      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>
+                      <button
+                        @click="constraints.sso = option.value"
+                        :aria-pressed="constraints.sso === option.value"
+                        role="radio"
+                        :aria-checked="constraints.sso === option.value"
+                        :class="[
+                          'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
+                          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>
                   </div>
                 </fieldset>
 
-                <div class="bg-neutral-50 p-6 rounded-lg">
-                  <h3 class="font-semibold text-lg mb-4">Hosting Model</h3>
-                  <div class="flex flex-wrap gap-3 constraint-buttons">
-                    <button
+                <fieldset class="bg-neutral-50 p-6 rounded-lg">
+                  <legend class="font-semibold text-lg mb-4">
+                    Hosting Model
+                  </legend>
+                  <div
+                    class="flex flex-wrap gap-3 constraint-buttons"
+                    role="radiogroup"
+                    aria-labelledby="hosting-heading">
+                    <div
                       v-for="option in hostingOptions"
                       :key="option.value"
-                      @click="constraints.hosting = option.value"
-                      :class="[
-                        'px-5 py-2 rounded-md border-2 transition-all',
-                        constraints.hosting === option.value
-                          ? 'bg-blue-600 text-white border-blue-600'
-                          : 'border-neutral-300 hover:border-blue-400',
-                      ]">
-                      {{ option.label }}
-                    </button>
+                      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>
+                      <button
+                        @click="constraints.hosting = option.value"
+                        :aria-pressed="constraints.hosting === option.value"
+                        role="radio"
+                        :aria-checked="constraints.hosting === option.value"
+                        :class="[
+                          'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
+                          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>
                   </div>
-                </div>
+                </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg mb-2">
+                  <legend class="font-semibold text-lg">
                     Required Integrations
                   </legend>
                   <p class="text-sm text-neutral-600 mb-4">
-                    Select all that apply (multiple selections allowed)
+                    Select all that apply
                   </p>
                   <div class="flex flex-wrap gap-3 constraint-buttons">
-                    <button
+                    <div
                       v-for="integration in integrationOptions"
                       :key="integration"
-                      @click="toggleIntegration(integration)"
-                      :aria-pressed="
-                        constraints.integrations.includes(integration)
-                      "
-                      :class="[
-                        'px-5 py-2 rounded-md border-2 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500',
-                        constraints.integrations.includes(integration)
-                          ? 'bg-blue-600 text-white border-blue-600'
-                          : 'border-neutral-300 hover:border-blue-400',
-                      ]">
-                      {{ integration }}
-                    </button>
+                      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>
+                      <button
+                        @click="toggleIntegration(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>
                   </div>
                 </fieldset>
 
-                <div class="bg-neutral-50 p-6 rounded-lg">
-                  <h3 class="font-semibold text-lg mb-4">
+                <fieldset class="bg-neutral-50 p-6 rounded-lg">
+                  <legend class="font-semibold text-lg">
                     Support Expectations
-                  </h3>
-                  <div class="flex flex-wrap gap-3 constraint-buttons">
-                    <button
+                  </legend>
+                  <div
+                    class="flex flex-wrap gap-3 constraint-buttons"
+                    role="radiogroup"
+                    aria-labelledby="support-heading">
+                    <div
                       v-for="option in supportOptions"
                       :key="option.value"
-                      @click="constraints.support = option.value"
-                      :class="[
-                        'px-5 py-2 rounded-md border-2 transition-all',
-                        constraints.support === option.value
-                          ? 'bg-blue-600 text-white border-blue-600'
-                          : 'border-neutral-300 hover:border-blue-400',
-                      ]">
-                      {{ option.label }}
-                    </button>
+                      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>
+                      <button
+                        @click="constraints.support = option.value"
+                        :aria-pressed="constraints.support === option.value"
+                        role="radio"
+                        :aria-checked="constraints.support === option.value"
+                        :class="[
+                          'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
+                          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>
                   </div>
-                </div>
+                </fieldset>
 
-                <div class="bg-neutral-50 p-6 rounded-lg">
-                  <h3 class="font-semibold text-lg mb-4">Migration Timeline</h3>
-                  <div class="flex flex-wrap gap-3 constraint-buttons">
-                    <button
+                <fieldset class="bg-neutral-50 p-6 rounded-lg">
+                  <legend class="font-semibold text-lg">
+                    Migration Timeline
+                  </legend>
+                  <div
+                    class="flex flex-wrap gap-3 constraint-buttons"
+                    role="radiogroup"
+                    aria-labelledby="timeline-heading">
+                    <div
                       v-for="option in timelineOptions"
                       :key="option.value"
-                      @click="constraints.timeline = option.value"
-                      :class="[
-                        'px-5 py-2 rounded-md border-2 transition-all',
-                        constraints.timeline === option.value
-                          ? 'bg-blue-600 text-white border-blue-600'
-                          : 'border-neutral-300 hover:border-blue-400',
-                      ]">
-                      {{ option.label }}
-                    </button>
+                      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>
+                      <button
+                        @click="constraints.timeline = option.value"
+                        :aria-pressed="constraints.timeline === option.value"
+                        role="radio"
+                        :aria-checked="constraints.timeline === option.value"
+                        :class="[
+                          'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
+                          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>
                   </div>
-                </div>
+                </fieldset>
               </div>
             </div>
 
-            <!-- Step 3: Weights -->
-            <div
-              v-show="currentStep === 2"
-              class="space-y-6"
-              role="tabpanel"
-              :aria-labelledby="`step-${currentStep}-tab`">
+            <!-- Weights Section -->
+            <div class="section-card">
               <div>
                 <h2
-                  class="text-2xl font-bold text-neutral-800 mb-2"
+                  class="text-2xl font-bold text-neutral-800"
                   id="weights-heading">
                   Set Evaluation Weights
                 </h2>
@@ -379,8 +348,8 @@
                   critical).
                 </p>
                 <div
-                  class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                  <p class="text-sm text-blue-800">
+                  class="bg-neutral-50 border border-neutral-200 rounded-lg p-4 mb-6">
+                  <p class="text-sm text-neutral-800">
                     Use the sliders or click the number values to set weights.
                     Higher weights mean the criterion is more important in your
                     vendor evaluation.
@@ -416,7 +385,7 @@
                           v-model.number="weights[weight.id]"
                           :aria-label="`${weight.name} importance weight`"
                           :aria-describedby="`weight-${weight.id}-desc`"
-                          class="w-32 focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                          class="w-32 focus:outline-none focus:ring-2 focus:ring-neutral-500" />
                         <span class="text-sm text-neutral-500 w-4">5</span>
                       </div>
                       <div class="flex flex-col items-center">
@@ -426,7 +395,7 @@
                           max="5"
                           v-model.number="weights[weight.id]"
                           :aria-label="`${weight.name} weight value`"
-                          class="w-16 text-center text-xl font-bold text-blue-600 bg-white border border-neutral-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" />
+                          class="w-16 text-center text-xl font-bold text-neutral-600 bg-white border border-neutral-300 rounded focus:outline-none focus:ring-2 focus:ring-neutral-500" />
                         <span class="text-xs text-neutral-400 mt-1"
                           >Weight</span
                         >
@@ -447,70 +416,63 @@
               </div>
             </div>
 
-            <!-- Navigation -->
-            <div class="flex justify-between items-center mt-8 pt-8 border-t">
-              <button
-                v-if="currentStep > 0"
-                @click="previousStep"
-                class="px-6 py-3 bg-neutral-200 text-neutral-700 rounded-lg hover:bg-neutral-300 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500"
-                :aria-label="`Go back to step ${currentStep}: ${
-                  steps[currentStep - 1]?.label
-                }`">
-                ← Back
-              </button>
-              <div v-else>
-                <button
-                  @click="resetForm"
-                  class="px-4 py-2 text-neutral-500 text-sm hover:text-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded"
-                  title="Clear all form data and start over">
-                  Reset Form
-                </button>
-              </div>
+            <!-- Generate Button -->
+            <div class="relative mb-8">
+              <!-- Dithered shadow -->
+              <div
+                class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
 
-              <div class="flex items-center gap-4">
-                <div class="text-sm text-neutral-500">
-                  Step {{ currentStep + 1 }} of {{ steps.length }}
+              <!-- Generate container -->
+              <div
+                class="relative bg-black dark:bg-white text-white dark:text-black border-2 border-black dark:border-white p-6">
+                <!-- Terminal header -->
+                <div
+                  class="flex justify-between items-center mb-4 text-xs font-mono border-b border-white dark:border-black pb-2">
+                  <span class="text-green-400 dark:text-green-600"
+                    >CHARTER GENERATION:</span
+                  >
+                  <span>READY</span>
                 </div>
-                <button
-                  v-if="currentStep < 2"
-                  @click="nextStep"
-                  :disabled="!canProceed"
-                  :class="[
-                    'px-6 py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500',
-                    canProceed
-                      ? 'bg-blue-600 text-white hover:bg-blue-700'
-                      : 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
-                  ]"
-                  :aria-label="`Proceed to step ${currentStep + 2}: ${
-                    steps[currentStep + 1]?.label
-                  }`">
-                  Next →
-                </button>
-                <button
-                  v-else
-                  @click="generateCharter"
-                  :disabled="!canGenerateCharter"
-                  :class="[
-                    'px-8 py-3 rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-green-500',
-                    canGenerateCharter
-                      ? 'bg-green-600 text-white hover:bg-green-700'
-                      : 'bg-neutral-300 text-neutral-500 cursor-not-allowed',
-                  ]"
-                  aria-describedby="generate-charter-help">
-                  Generate Charter
-                </button>
-              </div>
-            </div>
 
-            <div
-              v-if="currentStep === 2"
-              id="generate-charter-help"
-              class="text-sm text-neutral-500 text-right mt-2">
-              {{
-                canGenerateCharter
-                  ? "Ready to generate your charter"
-                  : "Select at least one principle to generate charter"
-              }}
+                <div class="flex justify-between items-center">
+                  <!-- Reset button -->
+                  <div>
+                    <button
+                      @click="resetForm"
+                      class="px-4 py-2 text-white dark:text-black text-sm font-mono hover:text-neutral-300 dark:hover:text-neutral-700 transition-colors focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-black"
+                      title="Clear all form data and start over">
+                      [RESET]
+                    </button>
+                  </div>
+
+                  <!-- Generate button -->
+                  <div class="flex items-center gap-4">
+                    <button
+                      @click="generateCharter"
+                      :disabled="!canGenerateCharter"
+                      :class="[
+                        'px-6 py-2 border-2 font-mono text-sm transition-all focus:outline-none focus:ring-2 focus:ring-green-400',
+                        canGenerateCharter
+                          ? 'bg-green-400 dark:bg-green-600 text-black border-green-400 dark:border-green-600 hover:bg-green-500 dark:hover:bg-green-700'
+                          : 'bg-neutral-600 text-neutral-400 border-neutral-600 cursor-not-allowed opacity-50',
+                      ]"
+                      aria-describedby="generate-charter-help">
+                      GENERATE CHARTER ►
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Help text -->
+                <div
+                  id="generate-charter-help"
+                  class="text-xs font-mono text-right mt-4 pt-2 border-t border-white dark:border-black opacity-75">
+                  {{
+                    canGenerateCharter
+                      ? "> READY TO GENERATE CHARTER"
+                      : "> SELECT AT LEAST ONE PRINCIPLE"
+                  }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -518,293 +480,323 @@
         <!-- Generated Charter Output -->
         <div
           v-if="charterGenerated"
-          class="mt-8 bg-white rounded-lg shadow-xl p-8 animate-fadeIn"
+          class="relative mb-8 animate-fadeIn"
           role="main"
           aria-label="Generated Technology Charter">
-          <div class="text-center mb-8 pb-6 border-b-2 border-neutral-200">
-            <h2 class="text-3xl font-bold text-neutral-800" id="charter-title">
-              Technology Charter
-            </h2>
-            <p class="text-neutral-600 mt-2">
-              Generated
-              {{
-                new Date().toLocaleDateString("en-US", {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                })
-              }}
-            </p>
-            <div class="mt-4">
-              <button
-                @click="scrollToTop"
-                class="text-sm text-blue-600 hover:text-blue-800 underline focus:outline-none focus:ring-2 focus:ring-blue-500 rounded">
-                Back to form
-              </button>
+          <!-- Dithered shadow -->
+          <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">
+                Technology Charter
+              </h2>
+              <p class="text-neutral-600 mt-2">
+                Generated
+                {{
+                  new Date().toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                  })
+                }}
+              </p>
+              <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">
+                  Back to form
+                </button>
+              </div>
             </div>
-          </div>
 
-          <div class="prose max-w-none">
-            <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.
-              </p>
-            </section>
+            <div class="prose max-w-none">
+              <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.
+                </p>
+              </section>
 
-            <section
-              class="mb-8"
-              v-if="
-                selectedPrinciples.filter((p) => !nonNegotiables.includes(p))
-                  .length > 0
-              ">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Core Principles
-              </h3>
-              <ul class="space-y-2">
-                <li
-                  v-for="principleId in selectedPrinciples.filter(
-                    (p) => !nonNegotiables.includes(p)
-                  )"
-                  :key="principleId"
-                  class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span>{{
-                    principles.find((p) => p.id === principleId)?.name
-                  }}</span>
-                </li>
-              </ul>
-            </section>
+              <section
+                class="mb-8"
+                v-if="
+                  selectedPrinciples.filter((p) => !nonNegotiables.includes(p))
+                    .length > 0
+                ">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Core Principles
+                </h3>
+                <ul class="space-y-2">
+                  <li
+                    v-for="principleId in selectedPrinciples.filter(
+                      (p) => !nonNegotiables.includes(p)
+                    )"
+                    :key="principleId"
+                    class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span>{{
+                      principles.find((p) => p.id === principleId)?.name
+                    }}</span>
+                  </li>
+                </ul>
+              </section>
 
-            <section class="mb-8" v-if="nonNegotiables.length > 0">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Non-Negotiable Requirements
-              </h3>
-              <p class="text-red-600 font-semibold mb-3">
-                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">
-                  <span class="mr-2">→</span>
-                  <span>{{
-                    principles.find((p) => p.id === principleId)?.name
-                  }}</span>
-                </li>
-              </ul>
-            </section>
+              <section class="mb-8" v-if="nonNegotiables.length > 0">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Non-Negotiable Requirements
+                </h3>
+                <p class="text-red-600 font-semibold mb-3">
+                  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">
+                    <span class="mr-2">→</span>
+                    <span>{{
+                      principles.find((p) => p.id === principleId)?.name
+                    }}</span>
+                  </li>
+                </ul>
+              </section>
 
-            <section class="mb-8">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Technical Constraints
-              </h3>
-              <ul class="space-y-2">
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Authentication:
-                    {{
-                      authOptions.find((o) => o.value === constraints.sso)
-                        ?.label
-                    }}</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Hosting:
-                    {{
-                      hostingOptions.find(
-                        (o) => o.value === constraints.hosting
-                      )?.label
-                    }}</span
-                  >
-                </li>
-                <li
-                  v-if="constraints.integrations.length > 0"
-                  class="flex items-start">
-                  <span class="text-purple-600 mr-2">→</span>
-                  <span
-                    >Required Integrations:
-                    {{ constraints.integrations.join(", ") }}</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Support Level:
-                    {{
-                      supportOptions.find(
-                        (o) => o.value === constraints.support
-                      )?.label
-                    }}</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Migration Timeline:
-                    {{
-                      timelineOptions.find(
-                        (o) => o.value === constraints.timeline
-                      )?.label
-                    }}</span
-                  >
-                </li>
-              </ul>
-            </section>
+              <section class="mb-8">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Technical Constraints
+                </h3>
+                <ul class="space-y-2">
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Authentication:
+                      {{
+                        authOptions.find((o) => o.value === constraints.sso)
+                          ?.label
+                      }}</span
+                    >
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Hosting:
+                      {{
+                        hostingOptions.find(
+                          (o) => o.value === constraints.hosting
+                        )?.label
+                      }}</span
+                    >
+                  </li>
+                  <li
+                    v-if="constraints.integrations.length > 0"
+                    class="flex items-start">
+                    <span class="text-purple-600 mr-2">→</span>
+                    <span
+                      >Required Integrations:
+                      {{ constraints.integrations.join(", ") }}</span
+                    >
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Support Level:
+                      {{
+                        supportOptions.find(
+                          (o) => o.value === constraints.support
+                        )?.label
+                      }}</span
+                    >
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Migration Timeline:
+                      {{
+                        timelineOptions.find(
+                          (o) => o.value === constraints.timeline
+                        )?.label
+                      }}</span
+                    >
+                  </li>
+                </ul>
+              </section>
 
-            <section class="mb-8">
-              <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):
-              </p>
-              <div class="overflow-x-auto">
-                <table class="w-full border-collapse">
-                  <thead>
-                    <tr class="bg-neutral-100">
-                      <th class="border p-3 text-left">Criterion</th>
-                      <th class="border p-3 text-left">Description</th>
-                      <th class="border p-3 text-center">Weight</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr
-                      v-for="weight in sortedWeights"
-                      :key="weight.id"
-                      class="hover:bg-neutral-50">
-                      <td class="border p-3 font-semibold">
-                        {{ weight.name }}
-                      </td>
-                      <td class="border p-3 text-sm text-neutral-600">
-                        {{ weight.rubricDescription }}
-                      </td>
-                      <td
-                        class="border p-3 text-center font-bold text-blue-600">
-                        {{ weights[weight.id] }}
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </section>
-
-            <section class="mb-8">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Decision Heuristics
-              </h3>
-              <ul class="space-y-2">
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Any vendor failing a non-negotiable requirement is
-                    automatically eliminated</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Prefer open standards and clear data export over feature
-                    abundance</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >When scores are within 10%, choose based on alignment with
-                    cooperative values</span
-                  >
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Document all decisions in the Vendor Decision Log for
-                    transparency</span
-                  >
-                </li>
-              </ul>
-            </section>
-
-            <section class="mb-8">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Procurement Process
-              </h3>
-              <ol class="space-y-2 list-decimal list-inside">
-                <li>Identify need through collective discussion</li>
-                <li>Research 3-5 potential vendors/solutions</li>
-                <li>Eliminate any failing non-negotiables</li>
-                <li>Score remaining options using rubric</li>
-                <li>Trial top 2 options if possible</li>
-                <li>Make collective decision with documented rationale</li>
-                <li>Create migration/exit plan before commitment</li>
-              </ol>
-            </section>
-
-            <section class="mb-8">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Review & Accountability
-              </h3>
-              <ul class="space-y-2">
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span>Review this charter annually at minimum</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span>Audit existing tools against charter quarterly</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span>Document any exceptions with clear justification</span>
-                </li>
-                <li class="flex items-start">
-                  <span class="text-blue-600 mr-2">→</span>
-                  <span
-                    >Share learnings with other cooperatives in our
-                    network</span
-                  >
-                </li>
-              </ul>
-            </section>
-
-            <section class="mt-12 pt-8 border-t-2 border-neutral-200">
-              <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                Vendor Decision Log Template
-              </h3>
-              <div class="bg-neutral-50 p-6 rounded-lg font-mono text-sm">
-                <div class="space-y-1">
-                  <p>
-                    <strong>Tool Category:</strong> [e.g., Project Management]
-                  </p>
-                  <p>
-                    <strong>Date:</strong> {{ new Date().toLocaleDateString() }}
-                  </p>
-                  <p><strong>Participants:</strong> [Names]</p>
-                  <p><strong>Options Evaluated:</strong> [List vendors]</p>
-                  <p>
-                    <strong>Eliminated (Non-Negotiables):</strong> [Vendor -
-                    Reason]
-                  </p>
-                  <p><strong>Scores:</strong></p>
-                  <p class="ml-4">• Option A: [Total weighted score]</p>
-                  <p class="ml-4">• Option B: [Total weighted score]</p>
-                  <p><strong>Decision:</strong> [Selected vendor]</p>
-                  <p><strong>Rationale:</strong> [2-3 sentences]</p>
-                  <p><strong>Safeguards/Mitigations:</strong> [If any risks]</p>
-                  <p><strong>Exit Strategy:</strong> [How we'd migrate away]</p>
-                  <p><strong>Review Date:</strong> [One year from today]</p>
+              <section class="mb-8">
+                <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):
+                </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">
+                          Criterion
+                        </th>
+                        <th
+                          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">
+                          Weight
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="weight in sortedWeights"
+                        :key="weight.id"
+                        class="hover:bg-neutral-50">
+                        <td
+                          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">
+                          {{ weight.rubricDescription }}
+                        </td>
+                        <td
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600">
+                          {{ weights[weight.id] }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
                 </div>
-              </div>
-            </section>
+              </section>
+
+              <section class="mb-8">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Decision Heuristics
+                </h3>
+                <ul class="space-y-2">
+                  <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
+                    >
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Prefer open standards and clear data export over feature
+                      abundance</span
+                    >
+                  </li>
+                  <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
+                    >
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span
+                      >Document all decisions in the Vendor Decision Log for
+                      transparency</span
+                    >
+                  </li>
+                </ul>
+              </section>
+
+              <section class="mb-8">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Procurement Process
+                </h3>
+                <ol class="space-y-2 list-decimal list-inside">
+                  <li>Identify need through collective discussion</li>
+                  <li>Research 3-5 potential vendors/solutions</li>
+                  <li>Eliminate any failing non-negotiables</li>
+                  <li>Score remaining options using rubric</li>
+                  <li>Trial top 2 options if possible</li>
+                  <li>Make collective decision with documented rationale</li>
+                  <li>Create migration/exit plan before commitment</li>
+                </ol>
+              </section>
+
+              <section class="mb-8">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Review & Accountability
+                </h3>
+                <ul class="space-y-2">
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span>Review this charter annually at minimum</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</span>
+                    <span>Audit existing tools against charter quarterly</span>
+                  </li>
+                  <li class="flex items-start">
+                    <span class="text-neutral-600 mr-2">→</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
+                    >
+                  </li>
+                </ul>
+              </section>
+
+              <section
+                class="mt-12 pt-8 border-t-2 border-neutral-900 dark:border-neutral-100">
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">
+                  Vendor Decision Log Template
+                </h3>
+                <div class="bg-neutral-50 p-6 rounded-lg font-mono text-sm">
+                  <div class="space-y-1">
+                    <p>
+                      <strong>Tool Category:</strong> [e.g., Project Management]
+                    </p>
+                    <p>
+                      <strong>Date:</strong>
+                      {{ new Date().toLocaleDateString() }}
+                    </p>
+                    <p><strong>Participants:</strong> [Names]</p>
+                    <p><strong>Options Evaluated:</strong> [List vendors]</p>
+                    <p>
+                      <strong>Eliminated (Non-Negotiables):</strong> [Vendor -
+                      Reason]
+                    </p>
+                    <p><strong>Scores:</strong></p>
+                    <p class="ml-4">• Option A: [Total weighted score]</p>
+                    <p class="ml-4">• Option B: [Total weighted score]</p>
+                    <p><strong>Decision:</strong> [Selected vendor]</p>
+                    <p><strong>Rationale:</strong> [2-3 sentences]</p>
+                    <p>
+                      <strong>Safeguards/Mitigations:</strong> [If any risks]
+                    </p>
+                    <p>
+                      <strong>Exit Strategy:</strong> [How we'd migrate away]
+                    </p>
+                    <p><strong>Review Date:</strong> [One year from today]</p>
+                  </div>
+                </div>
+              </section>
+            </div>
           </div>
         </div>
       </div>
@@ -819,14 +811,11 @@ definePageMeta({
   layout: false,
 });
 
-// Import PDF export composable
-const { exportToPDF } = usePdfExportBasic();
-
 // State
-const currentStep = ref(0);
 const charterGenerated = ref(false);
 const selectedPrinciples = ref([]);
 const nonNegotiables = ref([]);
+const copySuccess = ref(false);
 
 const constraints = ref({
   sso: "optional",
@@ -849,11 +838,6 @@ const weights = ref({
 });
 
 // Data
-const steps = [
-  { label: "Principles" },
-  { label: "Constraints" },
-  { label: "Weights" },
-];
 
 const principles = [
   {
@@ -1015,38 +999,32 @@ const sortedWeights = computed(() => {
     .sort((a, b) => weights.value[b.id] - weights.value[a.id]);
 });
 
-const canProceed = computed(() => {
-  if (currentStep.value === 0) {
-    // Step 1: At least one principle should be selected
-    return selectedPrinciples.value.length > 0;
-  }
-  if (currentStep.value === 1) {
-    // Step 2: All constraint sections are optional, always can proceed
-    return true;
-  }
-  return true;
-});
-
 const canGenerateCharter = computed(() => {
   // Must have at least one principle selected to generate charter
   return selectedPrinciples.value.length > 0;
 });
 
 // Methods
-const togglePrinciple = (principleId) => {
+const togglePrincipleSelection = (principleId) => {
   const idx = selectedPrinciples.value.indexOf(principleId);
-  const nonNegIdx = nonNegotiables.value.indexOf(principleId);
-
   if (idx === -1) {
-    // Not selected - select it
     selectedPrinciples.value.push(principleId);
-  } else if (nonNegIdx === -1) {
-    // Selected but not non-negotiable - make it non-negotiable
+  } else {
+    selectedPrinciples.value.splice(idx, 1);
+    // Also remove from non-negotiables if it was there
+    const nonNegIdx = nonNegotiables.value.indexOf(principleId);
+    if (nonNegIdx !== -1) {
+      nonNegotiables.value.splice(nonNegIdx, 1);
+    }
+  }
+};
+
+const toggleNonNegotiable = (principleId) => {
+  const idx = nonNegotiables.value.indexOf(principleId);
+  if (idx === -1) {
     nonNegotiables.value.push(principleId);
   } else {
-    // Non-negotiable - deselect entirely
-    selectedPrinciples.value.splice(idx, 1);
-    nonNegotiables.value.splice(nonNegIdx, 1);
+    nonNegotiables.value.splice(idx, 1);
   }
 };
 
@@ -1059,18 +1037,6 @@ const toggleIntegration = (integration) => {
   }
 };
 
-const nextStep = () => {
-  if (currentStep.value < 2 && canProceed.value) {
-    currentStep.value++;
-  }
-};
-
-const previousStep = () => {
-  if (currentStep.value > 0) {
-    currentStep.value--;
-  }
-};
-
 const resetForm = () => {
   if (confirm("Are you sure you want to clear all form data and start over?")) {
     selectedPrinciples.value = [];
@@ -1093,7 +1059,6 @@ const resetForm = () => {
       localization: 2,
       usability: 3,
     };
-    currentStep.value = 0;
     charterGenerated.value = false;
     localStorage.removeItem("tech-charter-data");
   }
@@ -1146,25 +1111,6 @@ const autoSave = () => {
 };
 
 // Export functions
-const exportPDF = async () => {
-  if (process.server || typeof window === "undefined") {
-    console.warn("PDF export attempted on server side");
-    return;
-  }
-
-  try {
-    const filename = "tech_charter.pdf";
-    await exportToPDF(".document-page", filename);
-  } catch (error) {
-    console.error("PDF export failed:", error);
-    alert("PDF generation failed. Falling back to print dialog.");
-    window.print();
-  }
-};
-
-const handlePrint = () => {
-  window.print();
-};
 
 const exportText = () => {
   const content = extractTextContent();
@@ -1176,6 +1122,40 @@ const exportMarkdown = () => {
   downloadFile(content, "tech_charter.md", "text/markdown");
 };
 
+const copyToClipboard = async (text) => {
+  if (process.server || typeof window === "undefined") {
+    throw new Error("Clipboard not available on server");
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  const successful = document.execCommand("copy");
+  document.body.removeChild(textarea);
+  if (!successful) {
+    throw new Error("execCommand copy failed");
+  }
+};
+
+const copyPlainText = async () => {
+  const content = extractTextContent();
+  try {
+    await copyToClipboard(content);
+    copySuccess.value = true;
+    setTimeout(() => (copySuccess.value = false), 1500);
+  } catch (error) {
+    console.error("Copy failed:", error);
+    alert("Copy failed. Please try again or use the download option.");
+  }
+};
+
 const extractTextContent = () => {
   const today = new Date().toLocaleDateString("en-US", {
     year: "numeric",
@@ -1336,13 +1316,159 @@ watch([selectedPrinciples, nonNegotiables, constraints, weights], autoSave, {
 <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");
+@reference "tailwindcss";
 
 /* rely on Tailwind bg utilities applied on wrapper */
 .template-wrapper {
   min-height: 100vh;
-  padding: 2rem 1rem;
+  padding: 2rem;
   position: relative;
 }
+
+/* Section styling */
+.section-card {
+  @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;
+}
+
+.section-card::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: -4px;
+  bottom: -4px;
+  background: black;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 2px 2px;
+  z-index: -1;
+}
+/* Dithered shadow effects */
+.dither-shadow {
+  background: black;
+  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);
+}
+
+.dither-shadow-header {
+  background: black;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 2px 2px;
+  opacity: 0.8;
+}
+
+html.dark .dither-shadow-header {
+  background: white;
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
+.progress-dither {
+  background-image: radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 0, 0, 0.1) 1px,
+    transparent 1px
+  );
+  background-size: 4px 4px;
+}
 .template-wrapper::before {
   content: "";
   position: fixed;
@@ -1375,9 +1501,7 @@ html.dark .template-wrapper::before {
 }
 
 .document-page {
-  max-width: 8.5in;
   min-height: 11in;
-  margin: 0 auto;
   background: white;
   position: relative;
 }
@@ -1418,7 +1542,6 @@ html.dark .document-page::after {
 }
 
 .export-controls {
-  max-width: 8.5in;
   margin: 0 auto 1.5rem;
   background: white;
   border: 1px solid black;
@@ -1591,6 +1714,7 @@ button:not(.export-btn) {
   text-transform: uppercase !important;
   font-weight: bold !important;
   letter-spacing: 0.5px !important;
+  cursor: pointer !important;
 }
 
 button:not(.export-btn):hover {
@@ -1604,6 +1728,7 @@ html.dark button:not(.export-btn) {
   background: #0a0a0a !important;
   border: 1px solid white !important;
   color: white !important;
+  cursor: pointer !important;
 }
 
 html.dark button:not(.export-btn):hover {
@@ -1620,6 +1745,7 @@ html.dark button:not(.export-btn):hover {
   text-transform: uppercase !important;
   font-weight: bold !important;
   letter-spacing: 0.5px !important;
+  cursor: pointer !important;
 }
 
 .export-btn:hover {
@@ -1633,6 +1759,7 @@ html.dark .export-btn {
   background: #0a0a0a !important;
   border: 1px solid white !important;
   color: white !important;
+  cursor: pointer !important;
 }
 
 html.dark .export-btn:hover {
@@ -1650,14 +1777,6 @@ html.dark .export-btn:hover {
   transform: translateY(-1px) translateX(-1px) !important;
 }
 
-/* Card and form styling */
-.charter-card,
-.section-card,
-.form-group-large {
-  border-radius: 0 !important;
-  border: 1px solid black !important;
-}
-
 /* Checkbox and radio button styling */
 input[type="checkbox"],
 input[type="radio"] {
@@ -1671,32 +1790,6 @@ input[type="radio"]:checked {
   color: white !important;
 }
 
-/* Override any gray colors with black/white only */
-:deep(.text-neutral-900),
-:deep(.text-neutral-800),
-:deep(.text-neutral-700),
-:deep(.text-neutral-600),
-:deep(.text-neutral-500) {
-  color: black !important;
-}
-
-:deep(.bg-neutral-50),
-:deep(.bg-neutral-100),
-:deep(.bg-neutral-200) {
-  background-color: white !important;
-}
-
-html.dark :deep(.bg-neutral-50),
-html.dark :deep(.bg-neutral-100),
-html.dark :deep(.bg-neutral-200) {
-  background-color: #0a0a0a !important;
-}
-
-:deep(.border-neutral-200),
-:deep(.border-neutral-300) {
-  border-color: black !important;
-}
-
 /* Document titles */
 h1,
 h2,
@@ -1716,30 +1809,6 @@ div {
   font-family: "Ubuntu", monospace !important;
 }
 
-/* Dark mode typography overrides */
-html.dark h1,
-html.dark h2,
-html.dark h3,
-html.dark h4,
-html.dark h5,
-html.dark h6 {
-  color: #f9fafb !important;
-}
-html.dark p,
-html.dark span,
-html.dark div {
-  color: #e5e7eb !important;
-}
-
-/* Nuxt UI gray utility overrides in dark */
-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;
-}
-
 @media (max-width: 768px) {
   .template-wrapper {
     padding: 1rem;
diff --git a/pages/wizard.vue b/pages/wizard.vue
index 2c856b2..46f2bf7 100644
--- a/pages/wizard.vue
+++ b/pages/wizard.vue
@@ -1,269 +1,278 @@
 <template>
-  <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>
+  <div>
+    <!-- Wizard Subnav -->
+    <WizardSubnav />
 
-    <!-- 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" />
+    <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>
-      <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">
+      <!-- Completed State -->
+      <div v-if="isCompleted" class="text-center py-12">
         <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>
+          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 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>
-
+        <div class="flex justify-center gap-4">
           <UButton
-            v-if="canComplete"
-            @click="completeWizard"
+            variant="outline"
+            color="gray"
+            @click="restartWizard"
+            :disabled="isResetting">
+            Start Over
+          </UButton>
+          <UButton
+            @click="navigateTo('/scenarios')"
             size="lg"
             variant="solid"
             color="black">
-            Complete Setup
+            Go to Dashboard
           </UButton>
         </div>
       </div>
-    </div>
-  </section>
+
+      <!-- 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">
diff --git a/pages/wizards.vue b/pages/wizards.vue
new file mode 100644
index 0000000..f746431
--- /dev/null
+++ b/pages/wizards.vue
@@ -0,0 +1,339 @@
+<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">
+          <h1
+            class="text-3xl font-bold text-neutral-900 dark:text-white mb-2"
+            style="font-family: 'Ubuntu', monospace">
+            Wizards
+          </h1>
+          <p class="text-neutral-700 dark:text-neutral-200">
+            Fillable forms for cooperative documents. Data saves locally in your
+            browser.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div
+            v-for="template in templates"
+            :key="template.id"
+            class="template-card h-full flex flex-col">
+            <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 h-full flex flex-col">
+              <div class="mb-4">
+                <h3
+                  class="text-xl font-semibold text-neutral-900 dark:text-white">
+                  {{ template.name }}
+                </h3>
+              </div>
+              <p class="text-neutral-700 dark:text-neutral-200 mb-4">
+                {{ template.description }}
+              </p>
+              <div class="flex flex-wrap gap-2 mb-4">
+                <span
+                  v-for="tag in template.tags"
+                  :key="tag"
+                  class="px-2 py-1 text-xs font-medium bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-900 border border-black dark:border-white dither-tag">
+                  {{ tag }}
+                </span>
+              </div>
+              <div class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
+                <div class="flex items-center gap-4">
+                  <span>{{ template.estimatedTime }}</span>
+                  <span>{{ template.fields }} fields</span>
+                </div>
+              </div>
+              <div class="flex-1"></div>
+              <div class="flex gap-2 mt-auto">
+                <NuxtLink
+                  :to="template.path"
+                  class="flex-1 px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-center font-medium tracking-wider hover:underline"
+                  style="font-family: 'Ubuntu Mono', monospace">
+                  START WIZARD
+                </NuxtLink>
+                <NuxtLink
+                  v-if="hasData(template.id)"
+                  :to="template.path"
+                  class="px-4 py-2 bg-white dark:bg-neutral-950 text-black dark:text-white border border-black dark:border-white hover:bg-white dark:hover:bg-neutral-950 transition-colors bitmap-button"
+                  title="Continue from saved data"
+                  style="font-family: 'Ubuntu Mono', monospace">
+                  RESUME
+                </NuxtLink>
+              </div>
+            </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 (print), plain text, Markdown, or Word
+                  document.
+                </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>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const templates = [
+  {
+    id: "membership-agreement",
+    name: "Membership Agreement",
+    description:
+      "A comprehensive agreement outlining member rights, responsibilities, decision-making processes, and financial arrangements for worker cooperatives.",
+    icon: "i-heroicons-user-group",
+    path: "/templates/membership-agreement",
+    tags: ["Legal", "Governance", "Membership"],
+    estimatedTime: "15-30 min",
+    fields: 25,
+    storageKey: "membership-agreement-data",
+  },
+  {
+    id: "conflict-resolution-framework",
+    name: "Conflict Resolution Framework",
+    description:
+      "A customizable framework for handling conflicts with restorative justice principles, clear processes, and organizational values alignment.",
+    icon: "i-heroicons-scale",
+    path: "/templates/conflict-resolution-framework",
+    tags: ["Governance", "Process", "Care"],
+    estimatedTime: "20-40 min",
+    fields: 35,
+    storageKey: "conflict-resolution-framework-data",
+  },
+  {
+    id: "tech-charter",
+    name: "Technology Charter",
+    description:
+      "Build technology decisions on cooperative values. Define principles, technical constraints, and evaluation criteria for vendor selection.",
+    icon: "i-heroicons-cog-6-tooth",
+    path: "/templates/tech-charter",
+    tags: ["Technology", "Decision-Making", "Governance"],
+    estimatedTime: "10-20 min",
+    fields: 20,
+    storageKey: "tech-charter-data",
+  },
+  {
+    id: "decision-framework",
+    name: "Decision Framework Helper",
+    description:
+      "Interactive tool to help determine the best decision-making approach based on urgency, expertise, stakes, and team dynamics.",
+    icon: "i-heroicons-light-bulb",
+    path: "/templates/decision-framework",
+    tags: ["Decision-Making", "Process", "Governance"],
+    estimatedTime: "5-10 min",
+    fields: 7,
+    storageKey: "decision-framework-data",
+  },
+];
+
+const hasData = (templateId) => {
+  const template = templates.find((t) => t.id === templateId);
+  if (!template?.storageKey) return false;
+  if (process.client) {
+    const saved = localStorage.getItem(template.storageKey);
+    return saved && saved !== "{}";
+  }
+  return false;
+};
+
+useHead({
+  title: "Wizards - Co-op Pay & Value Tool",
+  meta: [
+    {
+      name: "description",
+      content:
+        "Interactive wizards for worker cooperatives including membership agreements and governance documents.",
+    },
+  ],
+});
+</script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
+
+.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);
+}
+
+.dither-shadow-disabled {
+  background: black;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 2px 2px;
+  opacity: 0.4;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dither-shadow-disabled {
+    background: white;
+    background-image: radial-gradient(black 1px, transparent 1px);
+  }
+}
+
+:global(.dark) .dither-shadow-disabled {
+  background: white;
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
+.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;
+}
+
+.bitmap-button {
+  font-family: "Ubuntu Mono", monospace !important;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+  position: relative;
+}
+
+.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;
+}
+
+.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>