From ca5f7dd446f168c0ff97a93a342ec402c6a47489 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 16 Aug 2025 17:21:52 +0100
Subject: [PATCH] style: update CSS for a bitmap aesthetic, enhance export
 options in templates, and streamline form field styling

---
 assets/css/main.css                           |   19 +-
 components/ExportOptions.vue                  |  718 +++++++++
 .../conflict-resolution-framework.vue         | 1193 +++------------
 pages/templates/decision-framework.vue        |   47 +
 pages/templates/membership-agreement.vue      | 1354 +----------------
 pages/templates/tech-charter.vue              |  943 ++++--------
 pages/wizards.vue                             |    3 +-
 7 files changed, 1326 insertions(+), 2951 deletions(-)
 create mode 100644 components/ExportOptions.vue

diff --git a/assets/css/main.css b/assets/css/main.css
index 5f4debd..08a5c19 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -23,5 +23,20 @@ body {
 }
 
 .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
+  @apply max-w-4xl mx-auto  relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
+}
+
+
+/* Bitmap aesthetic overrides - remove all rounded corners */
+* {
+  border-radius: 0 !important;
+  font-family: "Ubuntu", monospace !important;
+}
+
+/* Form fields with bitmap styling */
+input,
+textarea,
+select {
+  font-family: "Ubuntu Mono", monospace !important;
+}
+
diff --git a/components/ExportOptions.vue b/components/ExportOptions.vue
new file mode 100644
index 0000000..c2e83b4
--- /dev/null
+++ b/components/ExportOptions.vue
@@ -0,0 +1,718 @@
+<template>
+  <div class="export-options" :class="containerClass">
+    <div class="export-content">
+      <div class="export-section">
+        <h3 class="export-title">Export Options:</h3>
+        <div class="export-buttons">
+          <button 
+            @click="copyToClipboard" 
+            class="export-btn"
+            :disabled="isProcessing"
+            ref="copyButton">
+            <UIcon name="i-heroicons-clipboard" />
+            <span>Copy as Text</span>
+            <UIcon 
+              v-if="showCopySuccess" 
+              name="i-heroicons-check" 
+              class="success-icon" />
+          </button>
+          
+          <button 
+            @click="downloadAsMarkdown" 
+            class="export-btn"
+            :disabled="isProcessing"
+            ref="downloadButton">
+            <UIcon name="i-heroicons-arrow-down-tray" />
+            <span>Download Markdown</span>
+            <UIcon 
+              v-if="showDownloadSuccess" 
+              name="i-heroicons-check" 
+              class="success-icon" />
+          </button>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  exportData: any;
+  filename?: string;
+  title?: string;
+  containerClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  filename: 'export',
+  title: 'Export Data',
+  containerClass: 'centered'
+});
+
+const isProcessing = ref(false);
+const showCopySuccess = ref(false);
+const showDownloadSuccess = ref(false);
+
+const copyButton = ref<HTMLButtonElement>();
+const downloadButton = ref<HTMLButtonElement>();
+
+// Success feedback animation
+const showSuccessFeedback = (buttonRef: Ref<HTMLButtonElement | undefined>, successRef: Ref<boolean>) => {
+  if (!buttonRef.value) return;
+  
+  successRef.value = true;
+  
+  // Add checkmark overlay animation
+  const button = buttonRef.value;
+  button.classList.add('success-state');
+  
+  setTimeout(() => {
+    successRef.value = false;
+    button.classList.remove('success-state');
+  }, 2000);
+};
+
+const copyToClipboard = async () => {
+  if (isProcessing.value) return;
+  
+  isProcessing.value = true;
+  
+  try {
+    const textContent = extractTextContent();
+    
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(textContent);
+    } else {
+      // Fallback for browsers without clipboard API
+      const textarea = document.createElement('textarea');
+      textarea.value = textContent;
+      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');
+      }
+    }
+    
+    showSuccessFeedback(copyButton, showCopySuccess);
+  } catch (error) {
+    console.error('Copy failed:', error);
+    alert('Copy failed. Please try again or use the download option.');
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+const downloadAsMarkdown = () => {
+  if (isProcessing.value) return;
+  
+  isProcessing.value = true;
+  
+  try {
+    const content = convertToMarkdown();
+    downloadFile(content, `${props.filename}.md`, 'text/markdown');
+    showSuccessFeedback(downloadButton, showDownloadSuccess);
+  } catch (error) {
+    console.error('Markdown download failed:', error);
+    alert('Download failed. Please try again.');
+  } finally {
+    isProcessing.value = false;
+  }
+};
+
+
+const extractTextContent = (): string => {
+  const today = new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+
+  let content = `${props.title.toUpperCase()}\n${'='.repeat(props.title.length)}\n\nExported ${today}\n\n`;
+  
+  // Convert data to readable text format
+  if (props.exportData) {
+    content += formatDataAsText(props.exportData);
+  }
+  
+  return content;
+};
+
+const convertToMarkdown = (): string => {
+  const today = new Date().toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+
+  let content = `# ${props.title}\n\n*Exported ${today}*\n\n`;
+  
+  // Convert data to markdown format
+  if (props.exportData) {
+    content += formatDataAsMarkdown(props.exportData);
+  }
+  
+  return content;
+};
+
+const formatDataAsText = (data: any): string => {
+  // Special handling for different template types
+  if (data.section === 'tech-charter') {
+    return formatTechCharterAsText(data);
+  } else if (data.section === 'membership-agreement') {
+    return formatMembershipAgreementAsText(data);
+  } else if (data.section === 'conflict-resolution-framework') {
+    return formatConflictResolutionAsText(data);
+  } else if (data.section === 'decision-framework') {
+    return formatDecisionFrameworkAsText(data);
+  }
+  
+  if (Array.isArray(data)) {
+    return data.map((item, index) => `${index + 1}. ${formatObjectAsText(item)}`).join('\n');
+  } else if (typeof data === 'object' && data !== null) {
+    return formatObjectAsText(data);
+  }
+  return String(data);
+};
+
+const formatDataAsMarkdown = (data: any): string => {
+  // Special handling for different template types
+  if (data.section === 'tech-charter') {
+    return formatTechCharterAsMarkdown(data);
+  } else if (data.section === 'membership-agreement') {
+    return formatMembershipAgreementAsMarkdown(data);
+  } else if (data.section === 'conflict-resolution-framework') {
+    return formatConflictResolutionAsMarkdown(data);
+  } else if (data.section === 'decision-framework') {
+    return formatDecisionFrameworkAsMarkdown(data);
+  }
+  
+  if (Array.isArray(data)) {
+    return data.map((item, index) => `${index + 1}. ${formatObjectAsMarkdown(item)}`).join('\n\n');
+  } else if (typeof data === 'object' && data !== null) {
+    return formatObjectAsMarkdown(data);
+  }
+  return String(data);
+};
+
+const formatTechCharterAsText = (data: any): string => {
+  let content = `PURPOSE\n-------\n\n${data.charterPurpose}\n\n`;
+
+  const selectedPrinciples = Object.keys(data.principleWeights).filter(
+    (p) => data.principleWeights[p] > 0
+  );
+  
+  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
+    content += `CORE PRINCIPLES\n---------------\n\n`;
+    selectedPrinciples
+      .filter((p) => !data.nonNegotiables.includes(p))
+      .forEach((pId) => {
+        const principle = data.principles.find((p: any) => p.id === pId);
+        if (principle) {
+          content += `• ${principle.name}\n`;
+        }
+      });
+    content += "\n";
+  }
+
+  if (data.nonNegotiables.length > 0) {
+    content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
+    data.nonNegotiables.forEach((pId: string) => {
+      const principle = data.principles.find((p: any) => p.id === pId);
+      if (principle) {
+        content += `• ${principle.name}\n`;
+      }
+    });
+    content += "\n";
+  }
+
+  content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
+  content += `• Authentication: ${data.constraints.sso}\n`;
+  content += `• Hosting: ${data.constraints.hosting}\n`;
+  if (data.constraints.integrations.length > 0) {
+    content += `• Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
+  }
+  content += `• Support Level: ${data.constraints.support}\n`;
+  content += `• Migration Timeline: ${data.constraints.timeline}\n\n`;
+
+  if (data.sortedWeights.length > 0) {
+    content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
+    data.sortedWeights.forEach((principle: any) => {
+      content += `${principle.name} (Weight: ${data.principleWeights[principle.id]})\n${principle.rubricDescription}\n\n`;
+    });
+  }
+
+  return content;
+};
+
+const formatTechCharterAsMarkdown = (data: any): string => {
+  let content = `## Purpose\n\n${data.charterPurpose}\n\n`;
+
+  const selectedPrinciples = Object.keys(data.principleWeights).filter(
+    (p) => data.principleWeights[p] > 0
+  );
+  
+  if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
+    content += `## Core Principles\n\n`;
+    selectedPrinciples
+      .filter((p) => !data.nonNegotiables.includes(p))
+      .forEach((pId) => {
+        const principle = data.principles.find((p: any) => p.id === pId);
+        if (principle) {
+          content += `- ${principle.name}\n`;
+        }
+      });
+    content += "\n";
+  }
+
+  if (data.nonNegotiables.length > 0) {
+    content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
+    data.nonNegotiables.forEach((pId: string) => {
+      const principle = data.principles.find((p: any) => p.id === pId);
+      if (principle) {
+        content += `- **${principle.name}**\n`;
+      }
+    });
+    content += "\n";
+  }
+
+  content += `## Technical Constraints\n\n`;
+  content += `- Authentication: ${data.constraints.sso}\n`;
+  content += `- Hosting: ${data.constraints.hosting}\n`;
+  if (data.constraints.integrations.length > 0) {
+    content += `- Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
+  }
+  content += `- Support Level: ${data.constraints.support}\n`;
+  content += `- Migration Timeline: ${data.constraints.timeline}\n\n`;
+
+  if (data.sortedWeights.length > 0) {
+    content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
+    content += `| Criterion | Description | Weight |\n`;
+    content += `|-----------|-------------|--------|\n`;
+    data.sortedWeights.forEach((principle: any) => {
+      content += `| ${principle.name} | ${principle.rubricDescription} | ${data.principleWeights[principle.id]} |\n`;
+    });
+  }
+
+  return content;
+};
+
+const formatObjectAsText = (obj: any): string => {
+  if (!obj || typeof obj !== 'object') return String(obj);
+  
+  return Object.entries(obj)
+    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .map(([key, value]) => {
+      const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      if (typeof value === 'object') {
+        return `${formattedKey}: ${JSON.stringify(value)}`;
+      }
+      return `${formattedKey}: ${value}`;
+    })
+    .join('\n');
+};
+
+const formatObjectAsMarkdown = (obj: any): string => {
+  if (!obj || typeof obj !== 'object') return String(obj);
+  
+  return Object.entries(obj)
+    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .map(([key, value]) => {
+      const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+      if (typeof value === 'object') {
+        return `**${formattedKey}**: \`${JSON.stringify(value)}\``;
+      }
+      return `**${formattedKey}**: ${value}`;
+    })
+    .join('  \n');
+};
+
+// Membership Agreement formatting
+const formatMembershipAgreementAsText = (data: any): string => {
+  let content = `MEMBERSHIP AGREEMENT\n====================\n\n`;
+  content += `Cooperative Name: ${data.cooperativeName}\n`;
+  content += `Member Name: ${data.formData.memberName || '[Member Name]'}\n`;
+  content += `Effective Date: ${data.formData.effectiveDate || '[Date]'}\n\n`;
+  
+  if (data.formData.purpose) {
+    content += `PURPOSE\n-------\n${data.formData.purpose}\n\n`;
+  }
+  
+  if (data.formData.membershipRequirements) {
+    content += `MEMBERSHIP REQUIREMENTS\n----------------------\n${data.formData.membershipRequirements}\n\n`;
+  }
+  
+  if (data.formData.rightsAndResponsibilities) {
+    content += `RIGHTS AND RESPONSIBILITIES\n--------------------------\n${data.formData.rightsAndResponsibilities}\n\n`;
+  }
+  
+  return content;
+};
+
+const formatMembershipAgreementAsMarkdown = (data: any): string => {
+  let content = `## Membership Agreement\n\n`;
+  content += `**Cooperative Name:** ${data.cooperativeName}  \n`;
+  content += `**Member Name:** ${data.formData.memberName || '[Member Name]'}  \n`;
+  content += `**Effective Date:** ${data.formData.effectiveDate || '[Date]'}  \n\n`;
+  
+  if (data.formData.purpose) {
+    content += `### Purpose\n\n${data.formData.purpose}\n\n`;
+  }
+  
+  if (data.formData.membershipRequirements) {
+    content += `### Membership Requirements\n\n${data.formData.membershipRequirements}\n\n`;
+  }
+  
+  if (data.formData.rightsAndResponsibilities) {
+    content += `### Rights and Responsibilities\n\n${data.formData.rightsAndResponsibilities}\n\n`;
+  }
+  
+  return content;
+};
+
+// Conflict Resolution Framework formatting
+const formatConflictResolutionAsText = (data: any): string => {
+  let content = `CONFLICT RESOLUTION FRAMEWORK\n=============================\n\n`;
+  content += `Organization: ${data.orgName}\n`;
+  content += `Organization Type: ${data.orgType}\n`;
+  content += `Member Count: ${data.memberCount}\n\n`;
+  
+  if (data.coreValues?.length > 0) {
+    content += `CORE VALUES\n-----------\n`;
+    data.coreValues.forEach((value: string, index: number) => {
+      content += `${index + 1}. ${value}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.principles?.length > 0) {
+    content += `PRINCIPLES\n----------\n`;
+    data.principles.forEach((principle: string, index: number) => {
+      content += `${index + 1}. ${principle}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.policies) {
+    content += `POLICIES\n--------\n`;
+    Object.entries(data.policies).forEach(([key, value]) => {
+      if (value) {
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+        content += `${formattedKey}: ${value}\n`;
+      }
+    });
+  }
+  
+  return content;
+};
+
+const formatConflictResolutionAsMarkdown = (data: any): string => {
+  let content = `## Conflict Resolution Framework\n\n`;
+  content += `**Organization:** ${data.orgName}  \n`;
+  content += `**Organization Type:** ${data.orgType}  \n`;
+  content += `**Member Count:** ${data.memberCount}  \n\n`;
+  
+  if (data.coreValues?.length > 0) {
+    content += `### Core Values\n\n`;
+    data.coreValues.forEach((value: string, index: number) => {
+      content += `${index + 1}. ${value}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.principles?.length > 0) {
+    content += `### Principles\n\n`;
+    data.principles.forEach((principle: string, index: number) => {
+      content += `${index + 1}. ${principle}\n`;
+    });
+    content += '\n';
+  }
+  
+  if (data.policies) {
+    content += `### Policies\n\n`;
+    Object.entries(data.policies).forEach(([key, value]) => {
+      if (value) {
+        const formattedKey = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase());
+        content += `**${formattedKey}:** ${value}  \n`;
+      }
+    });
+  }
+  
+  return content;
+};
+
+// Decision Framework formatting
+const formatDecisionFrameworkAsText = (data: any): string => {
+  let content = `DECISION FRAMEWORK RESULTS\n=========================\n\n`;
+  
+  if (data.surveyResponses) {
+    content += `SURVEY RESPONSES\n----------------\n`;
+    content += `Urgency: ${data.surveyResponses.urgency}\n`;
+    content += `Reversible: ${data.surveyResponses.reversible}\n`;
+    content += `Expertise: ${data.surveyResponses.expertise}\n`;
+    content += `Impact: ${data.surveyResponses.impact}\n`;
+    content += `Options: ${data.surveyResponses.options}\n`;
+    content += `Investment: ${data.surveyResponses.investment}\n`;
+    content += `Team Size: ${data.surveyResponses.teamSize}\n\n`;
+  }
+  
+  if (data.recommendedFramework) {
+    const framework = data.recommendedFramework;
+    content += `RECOMMENDED FRAMEWORK\n--------------------\n`;
+    content += `Method: ${framework.method}\n`;
+    content += `Tagline: ${framework.tagline}\n\n`;
+    content += `Reasoning: ${framework.reasoning}\n\n`;
+    
+    if (framework.steps) {
+      content += `IMPLEMENTATION STEPS\n-------------------\n`;
+      framework.steps.forEach((step: string, index: number) => {
+        content += `${index + 1}. ${step}\n`;
+      });
+      content += '\n';
+    }
+    
+    if (framework.tips) {
+      content += `PRO TIPS\n--------\n`;
+      framework.tips.forEach((tip: string, index: number) => {
+        content += `${index + 1}. ${tip}\n`;
+      });
+      content += '\n';
+    }
+  }
+  
+  return content;
+};
+
+const formatDecisionFrameworkAsMarkdown = (data: any): string => {
+  let content = `## Decision Framework Results\n\n`;
+  
+  if (data.surveyResponses) {
+    content += `### Survey Responses\n\n`;
+    content += `**Urgency:** ${data.surveyResponses.urgency}  \n`;
+    content += `**Reversible:** ${data.surveyResponses.reversible}  \n`;
+    content += `**Expertise:** ${data.surveyResponses.expertise}  \n`;
+    content += `**Impact:** ${data.surveyResponses.impact}  \n`;
+    content += `**Options:** ${data.surveyResponses.options}  \n`;
+    content += `**Investment:** ${data.surveyResponses.investment}  \n`;
+    content += `**Team Size:** ${data.surveyResponses.teamSize}  \n\n`;
+  }
+  
+  if (data.recommendedFramework) {
+    const framework = data.recommendedFramework;
+    content += `### Recommended Framework\n\n`;
+    content += `**Method:** ${framework.method}  \n`;
+    content += `**Tagline:** ${framework.tagline}  \n\n`;
+    content += `**Reasoning:** ${framework.reasoning}\n\n`;
+    
+    if (framework.steps) {
+      content += `#### Implementation Steps\n\n`;
+      framework.steps.forEach((step: string, index: number) => {
+        content += `${index + 1}. ${step}\n`;
+      });
+      content += '\n';
+    }
+    
+    if (framework.tips) {
+      content += `#### Pro Tips\n\n`;
+      framework.tips.forEach((tip: string, index: number) => {
+        content += `${index + 1}. ${tip}\n`;
+      });
+      content += '\n';
+    }
+  }
+  
+  return content;
+};
+
+const downloadFile = (content: string, filename: string, type: string) => {
+  const blob = new Blob([content], { type });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+</script>
+
+<style scoped>
+.export-options {
+  margin: 2rem auto;
+  background: white;
+  border: 2px solid #000;
+  position: relative;
+  box-shadow: 4px 4px 0px #000;
+}
+
+.export-options.centered {
+  text-align: center;
+}
+
+.export-options::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: -2px;
+  bottom: -2px;
+  background: #000;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 3px 3px;
+  z-index: -1;
+}
+
+.export-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  gap: 1rem;
+}
+
+.export-section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+
+.export-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.export-title {
+  font-weight: 700;
+  color: #374151;
+  margin: 0;
+  white-space: nowrap;
+  font-size: 1.1rem;
+}
+
+.export-btn {
+  background: #f9fafb;
+  border: 2px solid #000;
+  color: #374151;
+  padding: 0.75rem 1rem;
+  border-radius: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  min-width: fit-content;
+  position: relative;
+  overflow: hidden;
+}
+
+.export-btn:hover:not(:disabled) {
+  background: #000;
+  color: #fff;
+  transform: translateY(-2px) translateX(-2px);
+  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
+}
+
+.export-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.export-btn.success-state {
+  background: #10b981 !important;
+  color: white !important;
+  border-color: #10b981 !important;
+}
+
+.success-icon {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  animation: successPulse 2s ease-out;
+  color: #10b981;
+}
+
+.export-btn.success-state .success-icon {
+  color: white;
+}
+
+@keyframes successPulse {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scale(0.5);
+  }
+  20% {
+    opacity: 1;
+    transform: translateY(-50%) scale(1.2);
+  }
+  40% {
+    transform: translateY(-50%) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-50%) scale(1);
+  }
+}
+
+/* Dark mode styles */
+html.dark .export-options {
+  background: #0a0a0a;
+  border-color: white;
+}
+
+html.dark .export-options::before {
+  background: white;
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
+html.dark .export-title {
+  color: #e5e7eb;
+}
+
+html.dark .export-btn {
+  background: #0a0a0a;
+  border-color: white;
+  color: white;
+}
+
+html.dark .export-btn:hover:not(:disabled) {
+  background: white;
+  color: black;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .export-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .export-section {
+    justify-content: center;
+  }
+  
+  .export-buttons {
+    justify-content: center;
+  }
+  
+  .export-btn {
+    flex: 1;
+    justify-content: center;
+    min-width: 140px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/templates/conflict-resolution-framework.vue b/pages/templates/conflict-resolution-framework.vue
index b2dec2f..68ce276 100644
--- a/pages/templates/conflict-resolution-framework.vue
+++ b/pages/templates/conflict-resolution-framework.vue
@@ -3,31 +3,17 @@
     <!-- 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>
+    <!-- Export Options - Top -->
+    <div class="flex justify-center py-6">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="conflict-resolution-framework" 
+        title="Conflict Resolution Framework" 
+      />
+    </div>
 
+    <div
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -35,8 +21,7 @@
           <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'"
-            >
+              :data-org-name="formData.orgName || 'Organization'">
               CONFLICT RESOLUTION FRAMEWORK
             </h1>
           </div>
@@ -53,8 +38,7 @@
                   size="xl"
                   class="w-full"
                   :error="validationErrors.orgName"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
               <div class="flex flex-row gap-4 space-x-4">
                 <UFormField label="Organization Type" class="form-group-large">
@@ -65,11 +49,12 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.orgType"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
-                <UFormField label="Number of Members/Staff" class="form-group-large">
+                <UFormField
+                  label="Number of Members/Staff"
+                  class="form-group-large">
                   <UInput
                     v-model="formData.memberCount"
                     type="number"
@@ -77,8 +62,7 @@
                     placeholder="e.g., 5"
                     size="xl"
                     :error="validationErrors.memberCount"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
             </div>
@@ -95,44 +79,38 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.values">
               <UFormField
                 label="Select Core Values (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="values-grid">
                   <div
                     v-for="(value, index) in coreValues"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="value.checked"
                       :id="`core-value-${index}`"
                       :label="value.label"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
               </UFormField>
 
               <UFormField
                 label="Additional Values or Principles"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.customValues"
                   :rows="3"
                   placeholder="Add any additional values specific to your organization..."
                   size="xl"
                   class="w-full"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
@@ -148,14 +126,12 @@
               <div
                 v-for="(conflict, index) in conflictTypes"
                 :key="index"
-                class="checkbox-item"
-              >
+                class="checkbox-item">
                 <UCheckbox
                   v-model="conflict.checked"
                   :id="`conflict-type-${index}`"
                   :label="conflict.label"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </div>
             </div>
             <div v-if="validationErrors.conflictTypes" class="validation-error">
@@ -168,14 +144,14 @@
             <h2 class="section-title">4. Primary Resolution Approach</h2>
 
             <div class="space-y-6">
-              <UFormField label="Choose your primary conflict resolution philosophy:">
+              <UFormField
+                label="Choose your primary conflict resolution philosophy:">
                 <URadioGroup
                   v-model="formData.approach"
                   :items="approachOptions"
                   variant="card"
                   size="lg"
-                  class="mt-2"
-                />
+                  class="mt-2" />
                 <div v-if="validationErrors.approach" class="validation-error">
                   {{ validationErrors.approach }}
                 </div>
@@ -187,8 +163,7 @@
                   id="anonymous-reporting"
                   label="Allow anonymous reporting"
                   help="Members can report issues without revealing their identity"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -200,36 +175,36 @@
             <div class="space-y-6">
               <UFormField
                 label="Who can receive initial conflict reports? (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group space-y-2 mt-4">
                   <div
                     v-for="(receiver, index) in reportReceivers"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="receiver.checked"
                       :id="`report-receiver-${index}`"
                       :label="receiver.label"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
-                <div v-if="validationErrors.reportReceivers" class="validation-error">
+                <div
+                  v-if="validationErrors.reportReceivers"
+                  class="validation-error">
                   {{ validationErrors.reportReceivers }}
                 </div>
               </UFormField>
 
-              <UFormField label="Mediator/Facilitator Structure" class="form-group-large">
+              <UFormField
+                label="Mediator/Facilitator Structure"
+                class="form-group-large">
                 <USelect
                   v-model="formData.mediatorType"
                   :items="mediatorTypeOptions"
                   placeholder="Select mediator structure..."
                   size="xl"
                   :error="validationErrors.mediatorType"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField class="form-group-large">
@@ -238,8 +213,7 @@
                   id="support-people"
                   label="Allow support people in mediation sessions"
                   help="Parties can bring a trusted person for emotional support"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -250,7 +224,9 @@
 
             <div class="space-y-6">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <UFormField label="Initial Response Time" class="form-group-large">
+                <UFormField
+                  label="Initial Response Time"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.initialResponse"
                     :items="responseTimeOptions"
@@ -258,11 +234,12 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.initialResponse"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
-                <UFormField label="Target Resolution Time" class="form-group-large">
+                <UFormField
+                  label="Target Resolution Time"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.resolutionTarget"
                     :items="resolutionTimeOptions"
@@ -270,30 +247,28 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.resolutionTarget"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
               <UFormField
                 label="Process Steps (select applicable steps)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group mt-4 space-y-3">
                   <div
                     v-for="(step, index) in processSteps"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="step.checked"
                       :id="`process-step-${index}`"
                       :label="`${index + 1}. ${step.label}`"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
-                <div v-if="validationErrors.processSteps" class="validation-error">
+                <div
+                  v-if="validationErrors.processSteps"
+                  class="validation-error">
                   {{ validationErrors.processSteps }}
                 </div>
               </UFormField>
@@ -302,7 +277,8 @@
 
           <!-- Section 7: Documentation & Privacy -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">7. Documentation & Privacy</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -311,8 +287,7 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -324,30 +299,31 @@
                   placeholder="Select documentation level..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Confidentiality Level" class="form-group-large">
+              <UFormField
+                label="Confidentiality Level"
+                class="form-group-large">
                 <USelect
                   v-model="formData.confidentiality"
                   :items="confidentialityOptions"
                   placeholder="Select confidentiality level..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Record Retention Period" class="form-group-large">
+              <UFormField
+                label="Record Retention Period"
+                class="form-group-large">
                 <USelect
                   v-model="formData.retention"
                   :items="retentionOptions"
                   placeholder="Select retention period..."
                   size="xl"
                   class="w-full"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -359,44 +335,42 @@
             <div class="space-y-6">
               <UFormField
                 label="Available Actions (check all that apply)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group mt-4 space-y-3">
                   <div
                     v-for="(action, index) in availableActions"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="action.checked"
                       :id="`available-action-${index}`"
                       :label="action.label"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
-                <div v-if="validationErrors.availableActions" class="validation-error">
+                <div
+                  v-if="validationErrors.availableActions"
+                  class="validation-error">
                   {{ validationErrors.availableActions }}
                 </div>
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.appealProcess"
                   id="appeal-process"
                   label="Include appeals process"
                   help="Parties can request review of decisions"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 9: Special Circumstances -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">9. Special Circumstances</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -405,8 +379,7 @@
                   label="Include this section"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -415,14 +388,12 @@
                 <div
                   v-for="(circumstance, index) in specialCircumstances"
                   :key="index"
-                  class="checkbox-item"
-                >
+                  class="checkbox-item">
                   <UCheckbox
                     v-model="circumstance.checked"
                     :id="`special-circumstance-${index}`"
                     :label="circumstance.label"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </div>
               </div>
             </div>
@@ -433,19 +404,22 @@
             <h2 class="section-title">10. Implementation Details</h2>
 
             <div class="space-y-6">
-              <UFormField label="Training Requirements" class="form-group-large">
+              <UFormField
+                label="Training Requirements"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.training"
                   :rows="3"
                   class="w-full"
                   placeholder="Describe any training needed for members, facilitators, or committee members..."
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
               <div class="flex flex-row space-x-4">
-                <UFormField label="Policy Review Schedule" class="form-group-large">
+                <UFormField
+                  label="Policy Review Schedule"
+                  class="form-group-large">
                   <USelect
                     v-model="formData.reviewSchedule"
                     :items="reviewScheduleOptions"
@@ -453,13 +427,11 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.reviewSchedule"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
                 <UFormField
                   label="How can this policy be amended?"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.amendments"
                     :items="amendmentOptions"
@@ -467,8 +439,7 @@
                     size="xl"
                     class="w-full"
                     :error="validationErrors.amendments"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
@@ -480,8 +451,7 @@
                       type="date"
                       size="xl"
                       class="w-full mb-0"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </UFormField>
 
                   <UFormField label="Next Review Date">
@@ -490,8 +460,7 @@
                       type="date"
                       size="xl"
                       class="w-full mb-0"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </UFormField>
                 </div>
               </div>
@@ -500,7 +469,8 @@
 
           <!-- Section 11: Reflection Process -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">11. Reflection Process</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -509,39 +479,41 @@
                   label="Include detailed reflection guidance"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.reflection">
-              <UFormField label="Reflection Period Timeframe" class="form-group-large">
+              <UFormField
+                label="Reflection Period Timeframe"
+                class="form-group-large">
                 <USelect
                   v-model="formData.reflectionPeriod"
                   :items="reflectionPeriodOptions"
                   placeholder="Select reflection timeframe..."
                   size="xl"
                   class="w-full md:w-1/2 mt-2"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Additional Reflection Prompts" class="form-group-large">
+              <UFormField
+                label="Additional Reflection Prompts"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.customReflectionPrompts"
                   :rows="4"
                   placeholder="Add any organization-specific reflection questions or prompts..."
                   size="xl"
                   class="w-full mt-2"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 12: Direct Resolution Guidelines -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">12. Direct Resolution Guidelines</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -550,99 +522,90 @@
                   label="Include detailed conversation guidance"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
             <div class="space-y-6" v-show="sectionsEnabled.directResolution">
               <UFormField
                 label="Communication Channels (select preferred escalation order)"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <div class="checkbox-group space-y-3 mt-4">
                   <div
                     v-for="(channel, index) in communicationChannels"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="channel.checked"
                       :id="`comm-channel-${index}`"
                       :label="channel.label"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.requireDirectAttempt"
                   id="require-direct-attempt"
                   label="Require direct resolution attempt before escalation"
                   help="Parties must try to resolve directly before filing complaints"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField
-                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4"
-              >
+                class="form-group-large border-t border-neutral-200 dark:border-neutral-800 pt-4">
                 <UCheckbox
                   v-model="formData.documentDirectResolution"
                   id="document-direct-resolution"
                   label="Require written record of direct resolution attempts"
                   help="Parties should document outcomes of direct conversations"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
 
           <!-- Section 13: Responsible Contact People -->
           <div class="section-card">
-            <h2 class="section-title">13. Responsible Contact People Structure</h2>
+            <h2 class="section-title">
+              13. Responsible Contact People Structure
+            </h2>
 
             <div class="space-y-6">
-              <UFormField label="Internal Advisor Designation" class="form-group-large">
+              <UFormField
+                label="Internal Advisor Designation"
+                class="form-group-large">
                 <USelect
                   v-model="formData.internalAdvisorType"
                   :items="internalAdvisorOptions"
                   placeholder="Select internal advisor structure..."
                   class="w-full md:w-1/2"
                   size="xl"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <UFormField
                 label="Staff Liaison for Conflict Resolution Committee"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <UInput
                   v-model="formData.staffLiaison"
                   placeholder="Title/role of designated staff liaison"
                   size="xl"
                   class="w-full md:w-1/2"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
               <UFormField
                 label="Board Chair Role in Conflict Resolution"
-                class="form-group-large"
-              >
+                class="form-group-large">
                 <USelect
                   v-model="formData.boardChairRole"
                   :items="boardChairRoleOptions"
                   placeholder="Select board chair involvement..."
                   size="xl"
                   class="w-full md:w-1/2"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -652,19 +615,19 @@
             <h2 class="section-title">14. Formal Complaint Requirements</h2>
 
             <div class="space-y-6">
-              <UFormField label="Required Complaint Elements" class="form-group-large">
+              <UFormField
+                label="Required Complaint Elements"
+                class="form-group-large">
                 <div class="checkbox-group space-y-3 mt-4">
                   <div
                     v-for="(element, index) in formalComplaintElements"
                     :key="index"
-                    class="checkbox-item"
-                  >
+                    class="checkbox-item">
                     <UCheckbox
                       v-model="element.checked"
                       :id="`complaint-element-${index}`"
                       :label="element.label"
-                      @change="autoSave"
-                    />
+                      @change="autoSave" />
                   </div>
                 </div>
               </UFormField>
@@ -672,30 +635,26 @@
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <UFormField
                   label="Formal Complaint Acknowledgment Time"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.formalAcknowledgmentTime"
                     :items="acknowledgmentTimeOptions"
                     placeholder="Select acknowledgment timeframe..."
                     class="w-full"
                     size="xl"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
 
                 <UFormField
                   label="Formal Review Completion Time"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.formalReviewTime"
                     :items="reviewTimeOptions"
                     placeholder="Select review timeframe..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
 
@@ -705,8 +664,7 @@
                   id="require-external-advice"
                   label="Require external legal advice for complex complaints"
                   help="Seek external expertise for multi-party or staff/director complaints"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
             </div>
           </div>
@@ -722,36 +680,31 @@
                   id="minutes-of-settlement"
                   label="Require 'Minutes of Settlement' for resolved complaints"
                   help="Agreements must be documented in writing and signed by both parties"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
               <div class="flex flex-row space-x-4">
                 <UFormField
                   label="Settlement Confidentiality Level"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.settlementConfidentiality"
                     :items="confidentialityOptions"
                     placeholder="Select confidentiality level..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
                 <UFormField
                   label="Conflict Resolution File Retention"
-                  class="form-group-large"
-                >
+                  class="form-group-large">
                   <USelect
                     v-model="formData.conflictFileRetention"
                     :items="retentionOptions"
                     placeholder="Select retention period..."
                     size="xl"
                     class="w-full"
-                    @change="autoSave"
-                  />
+                    @change="autoSave" />
                 </UFormField>
               </div>
             </div>
@@ -759,7 +712,8 @@
 
           <!-- Section 16: External Resources -->
           <div class="section-card">
-            <div class="section-header flex flex-row justify-between items-center">
+            <div
+              class="section-header flex flex-row justify-between items-center">
               <h2 class="section-title">16. External Resources & Redress</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
@@ -768,8 +722,7 @@
                   label="Include external resource information"
                   :ui="{
                     label: 'text-xs text-neutral-700 dark:text-neutral-300',
-                  }"
-                />
+                  }" />
               </div>
             </div>
 
@@ -780,30 +733,31 @@
                   id="include-human-rights"
                   label="Include Human Rights Commission information"
                   help="Reference external discrimination complaint options"
-                  @change="autoSave"
-                />
+                  @change="autoSave" />
               </UFormField>
 
-              <UFormField label="Additional External Resources" class="form-group-large">
+              <UFormField
+                label="Additional External Resources"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.additionalResources"
                   :rows="3"
                   class="w-full"
                   placeholder="List any other external resources, legal aid contacts, or specialized support services..."
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
 
-              <UFormField label="Acknowledgment/Attribution" class="form-group-large">
+              <UFormField
+                label="Acknowledgment/Attribution"
+                class="form-group-large">
                 <UTextarea
                   v-model="formData.acknowledgments"
                   :rows="2"
                   placeholder="Credit any sources used in developing this policy..."
                   class="w-full"
                   size="xl"
-                  @input="debouncedAutoSave"
-                />
+                  @input="debouncedAutoSave" />
               </UFormField>
             </div>
           </div>
@@ -811,81 +765,34 @@
           <!-- Document Preview Section -->
           <div class="no-print" v-if="showPreview">
             <div
-              class="border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 p-5 rounded-lg shadow-sm"
-            >
+              class="border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 p-5 rounded-lg shadow-sm">
               <div class="flex flex-row justify-between items-center mb-4">
                 <h2 class="section-title m-0">📄 Policy Document Preview</h2>
                 <UButton
                   size="sm"
                   variant="ghost"
                   @click="showPreview = false"
-                  title="Hide preview"
-                >
+                  title="Hide preview">
                   ✕
                 </UButton>
               </div>
               <div
                 class="policy-preview prose prose-neutral dark:prose-invert max-w-none px-6 py-5 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-md max-h-[600px] overflow-y-auto text-left"
-                v-html="markdownToHtml(generatePolicyDocument())"
-              ></div>
-            </div>
-          </div>
-
-          <!-- 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>
+                v-html="markdownToHtml(generatePolicyDocument())"></div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <!-- Export Options - Bottom -->
+    <div class="flex justify-center py-6">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="conflict-resolution-framework" 
+        title="Conflict Resolution Framework" 
+      />
+    </div>
   </div>
 </template>
 
@@ -963,7 +870,13 @@ const responseTimeOptions = [
   "Within 2 weeks",
 ];
 
-const resolutionTimeOptions = ["1 week", "2 weeks", "30 days", "60 days", "90 days"];
+const resolutionTimeOptions = [
+  "1 week",
+  "2 weeks",
+  "30 days",
+  "60 days",
+  "90 days",
+];
 
 const docLevelOptions = [
   "Minimal - outcomes only",
@@ -1024,7 +937,13 @@ const acknowledgmentTimeOptions = [
   "Within 2 weeks",
 ];
 
-const reviewTimeOptions = ["2 weeks", "1 month", "6 weeks", "2 months", "3 months"];
+const reviewTimeOptions = [
+  "2 weeks",
+  "1 month",
+  "6 weeks",
+  "2 months",
+  "3 months",
+];
 
 const sectionsEnabled = ref({
   values: true,
@@ -1198,14 +1117,18 @@ const validateForm = () => {
   }
 
   // Required checkbox groups (must have at least one checked)
-  const checkedConflictTypes = conflictTypes.value.filter((item) => item.checked);
+  const checkedConflictTypes = conflictTypes.value.filter(
+    (item) => item.checked
+  );
   if (checkedConflictTypes.length === 0) {
     errors.conflictTypes = "Please select at least one type of conflict";
   }
 
   // Note: Guiding Principles & Values section is optional - no validation needed
 
-  const checkedReportReceivers = reportReceivers.value.filter((item) => item.checked);
+  const checkedReportReceivers = reportReceivers.value.filter(
+    (item) => item.checked
+  );
   if (checkedReportReceivers.length === 0) {
     errors.reportReceivers = "Please select at least one report receiver";
   }
@@ -1215,7 +1138,9 @@ const validateForm = () => {
     errors.processSteps = "Please select at least one process step";
   }
 
-  const checkedAvailableActions = availableActions.value.filter((item) => item.checked);
+  const checkedAvailableActions = availableActions.value.filter(
+    (item) => item.checked
+  );
   if (checkedAvailableActions.length === 0) {
     errors.availableActions = "Please select at least one available action";
   }
@@ -1263,8 +1188,9 @@ const completionPercentage = computed(() => {
     ...specialCircumstances.value,
   ];
 
-  const filledInputs = allInputs.filter((val) => val && val.toString().trim() !== "")
-    .length;
+  const filledInputs = allInputs.filter(
+    (val) => val && val.toString().trim() !== ""
+  ).length;
   const checkedBoxes = checkboxInputs.filter((item) => item.checked).length;
 
   const totalFields = allInputs.length + checkboxInputs.length;
@@ -1288,10 +1214,12 @@ const loadSavedData = () => {
 
         // Load checkbox arrays
         if (parsedData.coreValues) coreValues.value = parsedData.coreValues;
-        if (parsedData.conflictTypes) conflictTypes.value = parsedData.conflictTypes;
+        if (parsedData.conflictTypes)
+          conflictTypes.value = parsedData.conflictTypes;
         if (parsedData.reportReceivers)
           reportReceivers.value = parsedData.reportReceivers;
-        if (parsedData.processSteps) processSteps.value = parsedData.processSteps;
+        if (parsedData.processSteps)
+          processSteps.value = parsedData.processSteps;
         if (parsedData.availableActions)
           availableActions.value = parsedData.availableActions;
         if (parsedData.specialCircumstances)
@@ -1423,711 +1351,30 @@ watch(
   { deep: true }
 );
 
-// Toggle section visibility
-const toggleSection = (sectionName) => {
-  sectionsEnabled.value[sectionName] = !sectionsEnabled.value[sectionName];
-  autoSave();
-};
+// Export data for the ExportOptions component
+const exportData = computed(() => ({
+  formData: formData.value,
+  orgName: formData.value.orgName || "Organization",
+  orgType: formData.value.orgType,
+  memberCount: formData.value.memberCount,
+  sectionsEnabled: sectionsEnabled.value,
+  coreValues: formData.value.coreValues,
+  principles: formData.value.principles,
+  policies: {
+    memberInvolvement: formData.value.memberInvolvement,
+    communicationGuidelines: formData.value.communicationGuidelines,
+    processSteps: formData.value.processSteps,
+    escalationCriteria: formData.value.escalationCriteria,
+    mediation: formData.value.mediation,
+    finalDecision: formData.value.finalDecision,
+    learning: formData.value.learning,
+    emergencyProcedures: formData.value.emergencyProcedures,
+    annualReview: formData.value.annualReview
+  },
+  exportedAt: new Date().toISOString(),
+  section: "conflict-resolution-framework"
+}));
 
-// Export functions
-const exportPDF = async () => {
-  if (process.server || typeof window === "undefined") {
-    console.warn("PDF export attempted on server side");
-    return;
-  }
-
-  try {
-    const orgName = formData.value.orgName || "organization";
-    const filename = `${orgName.replace(
-      /[^a-zA-Z0-9]/g,
-      "_"
-    )}_conflict_resolution_policy.pdf`;
-    await exportToPDF(".document-page", filename);
-  } catch (error) {
-    console.error("PDF export failed:", error);
-    alert(
-      `PDF generation failed: ${
-        error?.message || "Unknown error"
-      }\n\nFalling back to print dialog.`
-    );
-    window.print();
-  }
-};
-
-const handlePrint = () => {
-  window.print();
-};
-
-// Removed exportText - focusing on Markdown as the primary text export format
-
-const exportMarkdown = () => {
-  const content = generateMarkdownContent();
-  const orgName = formData.value.orgName || "organization";
-  const filename = `${orgName.replace(
-    /[^a-zA-Z0-9]/g,
-    "_"
-  )}_conflict_resolution_policy.md`;
-  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();
-  const conflictTable = generateConflictTypesTable();
-  const proceduresText = generateProceduresSection();
-  const definitionsText = generateDefinitionsSection();
-
-  return `# ${orgName} Conflict Resolution Policy
-
-## Purpose
-
-Disagreements in groups are par for the course. But ignoring conflicts, or managing them poorly, can deeply harm individuals and our whole community.
-
-Addressing conflict head-on is ***a way of caring for each other***.
-
-Our policies and procedures around conduct and conflict are the tools we rely on to prevent harm and intervene early when things go wrong.
-
-This policy aims to offer a straightforward, consistently enforced, and transparent approach to resolving conflicts and disputes. These issues could emerge in relation to ${
-    orgName.endsWith("s") ? orgName + "'" : orgName + "'s"
-  } programs, governance, or the actions of its staff${
-    formData.value.orgType === "Worker Cooperative" ||
-    formData.value.orgType === "Consumer Cooperative"
-      ? ", members,"
-      : ""
-  } or directors.
-
-## Who does this policy apply to?
-
-Staff${
-    formData.value.orgType === "Worker Cooperative" ||
-    formData.value.orgType === "Consumer Cooperative"
-      ? ", members,"
-      : ""
-  } and community members must comply with the ${orgName} Conflict Resolution Policy and related by-laws and policies as a condition of ${
-    formData.value.orgType === "Worker Cooperative"
-      ? "membership, employment,"
-      : "employment,"
-  } or participation. Failure to cooperate may result in termination${
-    formData.value.orgType === "Worker Cooperative" ||
-    formData.value.orgType === "Consumer Cooperative"
-      ? " or removal from membership"
-      : ""
-  }.
-
-## What policy should be used?
-
-${conflictTable}
-
-${sectionsEnabled.value.values ? valuesText : ""}
-
-${definitionsText}
-
-## Responsibility for implementation
-
-This policy acknowledges and respects the governance structure of ${orgName}, which states that the ${getMediatorStructureText()} ${
-    getMediatorStructureText().includes("mediators") ? "are" : "is"
-  } responsible for conflict resolution operations and activities, while the ${
-    formData.value.orgType === "Worker Cooperative"
-      ? "Board of Directors"
-      : "governing body"
-  } is responsible for matters related to policy, decisions, activities, and governance.
-
-${proceduresText}
-
----
-
-*This policy was created on ${
-    formData.value.createdDate || "[Date]"
-  } and is scheduled for review ${
-    formData.value.reviewSchedule?.toLowerCase() || "as needed"
-  }.*
-
-*Next review date: ${formData.value.reviewDate || "[To be scheduled]"}*`;
-};
-
-const getApproachDescription = (approach) => {
-  const approaches = {
-    restorative: "restorative/loving justice",
-    mediation: "mediation-first",
-    progressive: "progressive discipline",
-    hybrid: "hybrid",
-  };
-  return approaches[approach] || approach;
-};
-
-const generateValuesSection = () => {
-  const selectedValues = coreValues.value.filter((v) => v.checked);
-  const customValues = formData.value.customValues?.trim();
-
-  if (selectedValues.length === 0 && !customValues) {
-    return "";
-  }
-
-  let valuesText = "## Guiding principles\n\n";
-
-  if (selectedValues.length > 0) {
-    valuesText += `Our core values of ${selectedValues
-      .map((v) => v.label)
-      .join(", ")} apply in every interaction.\n\n`;
-  }
-
-  if (customValues) {
-    valuesText += `\n${customValues}\n\n`;
-  }
-
-  valuesText += `- Our skills and resources will be developed and used to resolve conflicts in a way that is ${getApproachDescription(
-    formData.value.approach
-  )}–based whenever possible.\n`;
-  valuesText +=
-    "- All parties to a complaint will *actively participate* and strive to achieve a *collaborative* outcome at the earliest possible stage of the process.\n";
-  valuesText += `- Information about a complaint will only be given to parties directly involved, ${getMediatorStructureText()}, and others on a need-to-know basis as determined by ${
-    formData.value.mediatorType === "Standing committee"
-      ? "the committee"
-      : "the mediator"
-  }.\n`;
-  valuesText +=
-    "- The parties will be provided with clear and understandable reasons for complaint decisions. All parties will be provided with updates during the review process.\n";
-  valuesText += `- Complaints will be dealt with promptly and resolved as quickly as possible (target: ${
-    formData.value.resolutionTarget || "[time not specified]"
-  }).\n`;
-  valuesText +=
-    "- Review of complaints will be fair, impartial, and respectful, allowing all parties to have their perspectives heard.\n";
-  valuesText +=
-    "- The review of complaints will be thorough and as detailed as possible based on the information provided by the parties.\n";
-  valuesText +=
-    "- The process will be accessible and clearly communicated to members.\n\n";
-
-  const orgPossessive =
-    formData.value.orgName && formData.value.orgName.endsWith("s")
-      ? formData.value.orgName + "'"
-      : formData.value.orgName + "'s";
-
-  if (formData.value.anonymousReporting) {
-    valuesText += `This process is ${orgPossessive} responsibility. Members have the right to request a mediator if required, and anonymous reporting is supported.\n\n`;
-  } else {
-    valuesText += `This process is ${orgPossessive} responsibility. Members have the right to request a mediator if required.\n\n`;
-  }
-
-  return valuesText;
-};
-
-const generateConflictTypesTable = () => {
-  const selectedConflicts = conflictTypes.value.filter((v) => v.checked);
-
-  let table =
-    "| **Who Can File** | **Type of Complaint** | **Policy Reference** | **Additional Notes** |\n";
-  table += "| --- | --- | --- | --- |\n";
-
-  const whoCanFile = getWhoCanFile();
-
-  selectedConflicts.forEach((conflict) => {
-    const policyRef = getConflictPolicyReference(conflict.label);
-    const notes = getConflictNotes(conflict.label);
-    table += `| ${whoCanFile} | ${conflict.label} | ${policyRef} | ${notes} |\n`;
-  });
-
-  return table;
-};
-
-const getWhoCanFile = () => {
-  const orgType = formData.value.orgType;
-  if (orgType === "Worker Cooperative" || orgType === "Consumer Cooperative") {
-    return "Directors, staff, members";
-  }
-  return "Directors, staff, community members";
-};
-
-const getConflictPolicyReference = (conflictType) => {
-  const references = {
-    "Interpersonal disputes between members": "This policy",
-    "Code of Conduct violations": "[[Code of Conduct]]",
-    "Harassment or discrimination": "[[Code of Conduct]]",
-    "Work performance issues": "[[HR Policy]]",
-    "Conflicts of interest": "[[Conflict of Interest Policy]]",
-    "External organization disputes": "Per agreement dispute clause",
-    "Financial disagreements": "This policy",
-  };
-  return references[conflictType] || "This policy";
-};
-
-const getConflictNotes = (conflictType) => {
-  const notes = {
-    "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",
-    "External organization disputes":
-      "Resolved per agreement's dispute resolution clause",
-  };
-  return notes[conflictType] || "-";
-};
-
-const getMediatorStructureText = () => {
-  const mediatorType = formData.value.mediatorType;
-  const typeMap = {
-    "Internal trained mediators": "trained internal mediators",
-    "External professional mediators": "external mediators",
-    "Rotating member facilitators": "rotating member facilitators",
-    "Standing committee": "Conflict Resolution Committee",
-    "Decided case-by-case": "designated mediators",
-  };
-  return typeMap[mediatorType] || mediatorType;
-};
-
-const generateDefinitionsSection = () => {
-  let definitions = "## Definitions\n\n";
-
-  definitions +=
-    "- **Conflict** and **dispute** are ongoing experiences of tension and misunderstandings, often leading to interpersonal discord. These terms are used interchangeably.\n";
-
-  if (formData.value.mediatorType === "Standing committee") {
-    definitions += `- The **Conflict Resolution Committee** is a ${
-      formData.value.orgType === "Worker Cooperative"
-        ? "standing committee of the Board"
-        : "designated committee"
-    } to which unresolved formal complaints are sent for review and recommendations.\n`;
-  }
-
-  definitions +=
-    "- A **complainant** is the individual lodging a complaint against another related individual, policy, or practice.\n";
-
-  if (formData.value.mediatorType !== "External professional mediators") {
-    definitions += `- The **Internal Advisor** is the ${
-      formData.value.orgType === "Worker Cooperative"
-        ? "Board-appointed"
-        : "organization-appointed"
-    } mediator who facilitates the conflict resolution process. They work to achieve a satisfactory solution by acting as an intermediary and convening authority.\n`;
-  }
-
-  definitions +=
-    "- A **respondent** is an individual against whom a complaint has been made, and/or someone responsible for the policy or activity complained about.\n";
-
-  const selectedReceivers = reportReceivers.value.filter((v) => v.checked);
-  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`;
-  }
-
-  if (formData.value.supportPeople) {
-    definitions +=
-      "- **Support people** are individuals not connected to the conflicts or disputes being addressed, which either the complainant or respondent may choose to have in attendance at mediation meetings.\n";
-  }
-
-  return definitions + "\n";
-};
-
-const generateProceduresSection = () => {
-  const selectedActions = availableActions.value.filter((v) => v.checked);
-
-  let procedures = "## Procedures\n\n";
-  procedures +=
-    "We do our best to resolve conflicts at the lowest possible escalation step (direct resolution), but agree to escalate conflicts (to assisted resolution) if they are not resolved.\n\n";
-
-  // Reflection Section
-  if (sectionsEnabled.value.reflection) {
-    procedures += generateReflectionSection();
-  }
-
-  // Direct Resolution Section
-  procedures += generateDirectResolutionSection();
-
-  // Assisted Resolution Section
-  procedures += generateAssistedResolutionSection();
-
-  // Formal Complaints Section
-  procedures += generateFormalComplaintsSection();
-
-  if (selectedActions.length > 0) {
-    procedures += "### Available Actions and Consequences\n\n";
-    procedures +=
-      "Depending on the nature and severity of the conflict, the following actions may be taken:\n\n";
-    selectedActions.forEach((action) => {
-      procedures += `- ${action.label}\n`;
-    });
-    procedures += "\n";
-  }
-
-  if (formData.value.appealProcess) {
-    procedures += "### Appeals Process\n\n";
-    procedures +=
-      "Parties may request a review of decisions made through this conflict resolution process. Appeals must be submitted in writing within 30 days of the decision.\n\n";
-  }
-
-  // Settlement Documentation
-  if (formData.value.requireMinutesOfSettlement) {
-    procedures += generateSettlementSection();
-  }
-
-  const selectedCircumstances = specialCircumstances.value.filter((v) => v.checked);
-  if (sectionsEnabled.value.special && selectedCircumstances.length > 0) {
-    procedures += "### Special Circumstances\n\n";
-    selectedCircumstances.forEach((circumstance) => {
-      procedures += `- ${circumstance.label}\n`;
-    });
-    procedures += "\n";
-  }
-
-  // External Resources
-  if (sectionsEnabled.value.externalResources) {
-    procedures += generateExternalResourcesSection();
-  }
-
-  return procedures;
-};
-
-const generateReflectionSection = () => {
-  let section = "### Reflection\n\n";
-  section += `Before escalating a conflict (timeframe: ${
-    formData.value.reflectionPeriod?.toLowerCase() || "as needed"
-  }), we encourage the following reflection process:\n\n`;
-
-  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 +=
-    "3. Distinguish disagreement from personal hostility. Disagreement and dissent are part of healthy discussion. Hostility is not.\n";
-  section +=
-    "4. Use your personal support system (friends, family, therapist, etc.) to work through and clarify your perspective.\n";
-  section +=
-    "5. Ask yourself what part you played, how you could have behaved differently, and what your needs are.\n\n";
-
-  if (formData.value.customReflectionPrompts?.trim()) {
-    section += "#### Additional Reflection Questions\n\n";
-    section += formData.value.customReflectionPrompts + "\n\n";
-  }
-
-  return section;
-};
-
-const generateDirectResolutionSection = () => {
-  let section = "## Direct Resolution\n\n";
-  section +=
-    "A *direct resolution* process occurs when individuals communicate their concerns and work together to resolve disputes without filing an informal or formal complaint.\n\n";
-
-  if (formData.value.requireDirectAttempt) {
-    section +=
-      "**Note: Direct resolution attempts are required before escalation in most cases.**\n\n";
-  }
-
-  section += "### Have a Conversation\n\n";
-  section +=
-    "When there is a disagreement, the involved people should first **communicate with each other** about their concerns.\n\n";
-
-  section +=
-    "1. Choose a time and place to meet that is private and agreeable to both.\n";
-  section += "2. Allow a reasonable amount of time.\n";
-  section +=
-    "3. The point of the meeting is not to determine who is right or wrong, but rather to reach **a mutual understanding**. Achieving this requires patience and a willingness to listen to the other person's perspective without immediately dismissing it as incorrect.\n";
-  section +=
-    '4. Express your thoughts and feelings directly and without belittling or dismissing the other person\'s perspective. Use "I" statements and active listening techniques.\n';
-  section +=
-    "5. Communicate your **wants** and **needs** and make **offers** and **requests**.\n";
-  section +=
-    "6. During the conversation, try your best to learn how to avoid miscommunication and misunderstandings in the future.\n";
-
-  if (formData.value.documentDirectResolution) {
-    section +=
-      "7. Keep a written record of the resolution of this conversation, agreed to by both parties.\n\n";
-  } else {
-    section += "\n";
-  }
-
-  // Escalating Bandwidth
-  const selectedChannels = communicationChannels.value.filter((c) => c.checked);
-  if (sectionsEnabled.value.directResolution && selectedChannels.length > 0) {
-    section += "#### Escalating Bandwidth\n\n";
-    section +=
-      "Whenever a misunderstanding or conflict arises, **escalate the bandwidth of the channel**:\n\n";
-    selectedChannels.forEach((channel, index) => {
-      section += `${index + 1}. ${channel.label}\n`;
-    });
-    section +=
-      "\nMove from text to voice, voice to video, and ultimately to in-person when possible.\n\n";
-  }
-
-  return section;
-};
-
-const generateAssistedResolutionSection = () => {
-  let section = "## Assisted Resolution\n\n";
-  section += "### Informal Complaints\n\n";
-  section +=
-    "If talking things out doesn't work, you can ask a responsible contact person for help in writing. Mention that you're making an *informal complaint* and seeking assistance.\n\n";
-
-  section += generateResponsibleContactTable();
-
-  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
-  } 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";
-  section +=
-    "The RCP will speak with each person separately to hear their perspectives and to review the direct resolution process.\n\n";
-  section +=
-    "The parties will be invited to attend informal meetings, negotiations, facilitated discussions, or mediation. These invitations will be extended by either the RCP, the Conflict Resolution Committee, or the Internal Advisor.\n\n";
-  section += `Depending on their training and neutrality, either the RCP or the ${
-    formData.value.internalAdvisorType?.toLowerCase() || "Internal Advisor"
-  } will act as a facilitator or mediator in the selected process.\n\n`;
-  section +=
-    "If the chosen process results in an acceptable informal outcome for both parties, the matter will be considered resolved.\n\n";
-
-  return section;
-};
-
-const generateFormalComplaintsSection = () => {
-  let section = "### Formal Complaints\n\n";
-  section += `If informal resolution efforts do not result in an acceptable outcome within ${
-    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);
-  if (selectedElements.length > 0) {
-    section += "The written complaint must include:\n\n";
-    selectedElements.forEach((element, index) => {
-      section += `${index + 1}. ${element.label}\n`;
-    });
-    section += "\n";
-  }
-
-  section += "It should be submitted to the appropriate RCP.\n\n";
-  if (formData.value.requireExternalAdvice) {
-    section +=
-      "*Seeking external advice and expertise to aid this process is recommended for complex complaints.*\n\n";
-  }
-
-  section += generateResponsibleContactTable("formal");
-
-  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`;
-
-  section +=
-    "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";
-
-  if (formData.value.requireExternalAdvice) {
-    section +=
-      "> **Tip:** If the complaint involves multiple complainants or respondents who are staff and/or Directors, seek external legal advice.\n\n";
-  }
-
-  return section;
-};
-
-const generateResponsibleContactTable = (type = "informal") => {
-  const orgType = formData.value.orgType;
-  const isCooperative =
-    orgType === "Worker Cooperative" || orgType === "Consumer Cooperative";
-
-  let table = `#### Responsible Contact People (${type} complaints)\n\n`;
-  table +=
-    "| Complainant | First Contact | If First Contact Is the Respondent | Additional Steps |\n";
-  table += "| --- | --- | --- | --- |\n";
-
-  // Staff row
-  const staffLiaison =
-    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`;
-
-  // ED/Leadership row
-  if (isCooperative) {
-    table += `| **Executive Director (ED)** | ${
-      formData.value.boardChairRole?.includes("Chair")
-        ? "Chair of the Board of Directors"
-        : "Board Chair"
-    } | ${staffLiaison} | If Respondents involve multiple directors, contact the Internal Advisor |\n`;
-  } else {
-    table += `| **Executive Director** | ${
-      formData.value.boardChairRole?.includes("Chair")
-        ? "Chair of the Board"
-        : "Board Chair"
-    } | ${staffLiaison} | If involving multiple directors, contact the Internal Advisor |\n`;
-  }
-
-  // Director row
-  table += `| **Director** | ${
-    isCooperative ? "One or both Co-EDs" : "Executive Director"
-  } | Internal Advisor | - |\n`;
-
-  // Member/Public row
-  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`;
-
-  return table;
-};
-
-const generateSettlementSection = () => {
-  let section = "#### Reaching an Agreement\n\n";
-  section +=
-    'Any resolution of a complaint that is agreed upon through direct negotiation must be documented in writing and signed by both the complainant and respondent. These "Minutes of Settlement" will be kept confidential and only shared with the Internal Advisor, Staff, Board, legal counsel, or other parties who need to know to fulfill their organizational duties.\n\n';
-
-  section += "Considerations when agreeing should include:\n\n";
-  section +=
-    "1. Is the agreement within the scope of the parties' decision-making powers in relation to their organizational role?\n";
-  section += "2. Is the agreement realistic and durable?\n";
-  section += "3. Does the agreement in any way compromise the organization?\n";
-  section +=
-    "4. Are there elements of the agreement that impact the organization's operations, policies, reputation, external relationships or public perceptions?\n";
-  section += `5. Does it align with our values and commitment to ${getApproachDescription(
-    formData.value.approach
-  )}?\n\n`;
-
-  section += `**Confidentiality Level**: ${
-    formData.value.settlementConfidentiality || "Need-to-know basis"
-  }\n`;
-  section += `**File Retention**: ${
-    formData.value.conflictFileRetention || "5 years"
-  }\n\n`;
-
-  return section;
-};
-
-const generateExternalResourcesSection = () => {
-  if (!sectionsEnabled.value.externalResources) return "";
-
-  let section = "## Other Redress\n\n";
-
-  if (formData.value.includeHumanRights) {
-    section +=
-      "An individual who is not satisfied with the outcome of a **harassment** complaint process may file a discrimination complaint with the [Canadian Human Rights Commission](https://www.chrc-ccdp.gc.ca/eng).\n\n";
-  }
-
-  if (formData.value.additionalResources?.trim()) {
-    section += "### Additional Resources\n\n";
-    section += formData.value.additionalResources + "\n\n";
-  }
-
-  if (formData.value.acknowledgments?.trim()) {
-    section += "## Acknowledgments\n\n";
-    section += formData.value.acknowledgments + "\n\n";
-  } else {
-    section += "## Acknowledgments\n\n";
-    section +=
-      "This work is inspired in part by the work of the Media Arts Network of Ontario led by Sheila Wilmot, January 2016.\n\n";
-  }
-
-  return section;
-};
-
-// Removed generateTextContent - using generatePolicyDocument directly
-
-const generateMarkdownContent = () => {
-  return generatePolicyDocument();
-};
-
-const downloadFile = (content, filename, mimeType) => {
-  const blob = new Blob([content], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-};
-
-// Initialize
-onMounted(() => {
-  loadSavedData();
-});
 </script>
 
 <style scoped>
@@ -2150,7 +1397,11 @@ 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;
@@ -2542,8 +1793,8 @@ html.dark .policy-preview blockquote {
 }
 
 .policy-preview code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace !important;
   background: #f3f4f6;
   padding: 0.1rem 0.35rem;
 }
diff --git a/pages/templates/decision-framework.vue b/pages/templates/decision-framework.vue
index ffc757f..5a0a9a3 100644
--- a/pages/templates/decision-framework.vue
+++ b/pages/templates/decision-framework.vue
@@ -3,6 +3,14 @@
     <!-- Wizard Subnav -->
     <WizardSubnav />
 
+    <!-- Export Options at Top -->
+    <div class="flex justify-center py-6">
+      <ExportOptions
+        :export-data="exportData"
+        filename="decision-framework"
+        title="Decision Framework Helper" />
+    </div>
+
     <div
       class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
       style="font-family: 'Ubuntu', monospace">
@@ -385,10 +393,20 @@
         </div>
       </div>
     </div>
+
+    <!-- Export Options at Bottom -->
+    <div class="flex justify-center py-6">
+      <ExportOptions
+        :export-data="exportData"
+        filename="decision-framework"
+        title="Decision Framework Helper" />
+    </div>
   </div>
 </template>
 
 <script setup>
+import ExportOptions from '~/components/ExportOptions.vue'
+
 const state = reactive({
   urgency: 3,
   reversible: null,
@@ -916,6 +934,35 @@ function printResult() {
   window.print();
 }
 
+// Export data for standardized export component
+const exportData = computed(() => ({
+  formData: {
+    state: state,
+    currentStep: currentStep.value,
+    showResult: showResult.value,
+    result: result.value
+  },
+  surveyResponses: {
+    urgency: state.urgency,
+    reversible: state.reversible,
+    expertise: state.expertise,
+    impact: state.impact,
+    options: state.options,
+    investment: state.investment,
+    teamSize: state.teamSize
+  },
+  recommendedFramework: result.value || null,
+  metadata: {
+    completedAt: showResult.value ? new Date().toISOString() : null,
+    totalSteps: totalSteps,
+    progressPercentage: Math.round((currentStep.value / totalSteps) * 100)
+  },
+  exportedAt: new Date().toISOString(),
+  section: "decision-framework",
+  title: "Decision Framework Helper",
+  description: "Interactive wizard to find the right way to decide together"
+}))
+
 // Keyboard navigation
 onMounted(() => {
   const handleKeydown = (event) => {
diff --git a/pages/templates/membership-agreement.vue b/pages/templates/membership-agreement.vue
index 9a7b23c..875c3e3 100644
--- a/pages/templates/membership-agreement.vue
+++ b/pages/templates/membership-agreement.vue
@@ -3,48 +3,17 @@
     <!-- Wizard Subnav -->
     <WizardSubnav />
 
+    <!-- Export Options - Top -->
+    <div class="w-full flex justify-center mb-8">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="membership-agreement" 
+        title="Membership Agreement" 
+      />
+    </div>
+
     <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
-            </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>
-
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -771,6 +740,15 @@
         </div>
       </div>
     </div>
+
+    <!-- Export Options - Bottom -->
+    <div class="w-full flex justify-center mt-8">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="membership-agreement" 
+        title="Membership Agreement" 
+      />
+    </div>
   </div>
 </template>
 
@@ -1046,564 +1024,31 @@ const handlePrint = () => {
   }, 100);
 };
 
-// Export functions
-const exportPDF = async () => {
-  // Only run on client side
-  if (process.server || typeof window === "undefined") {
-    console.warn("PDF export attempted on server side");
-    return;
-  }
-
-  try {
-    console.log("Starting PDF export...");
-
-    // Get the document title for filename if available
-    const cooperativeName = formData.value.cooperativeName || "document";
-    const filename = `${cooperativeName.replace(
-      /[^a-zA-Z0-9]/g,
-      "_"
-    )}_membership_agreement.pdf`;
-
-    console.log("Generated filename:", filename);
-
-    await exportToPDF(".document-page", filename);
-
-    console.log("PDF export completed successfully");
-  } catch (error) {
-    console.error("PDF export failed:", error);
-
-    // Show more specific error message
-    const errorMessage = error?.message || "Unknown error occurred";
-    alert(
-      `PDF generation failed: ${errorMessage}\n\nFalling back to print dialog.`
-    );
-
-    // Fallback to print dialog if PDF generation fails
-    window.print();
-  }
-};
-
-const exportText = () => {
-  const content = extractTextContent();
-  downloadFile(content, "membership_agreement.txt", "text/plain");
-};
-
-const exportMarkdown = () => {
-  const content = convertToMarkdown();
-  downloadFile(content, "membership_agreement.md", "text/markdown");
-};
-
-const extractTextContent = () => {
-  // Format date helper
-  const formatDate = (dateStr) => {
-    if (!dateStr) return "[_____]";
-    return new Date(dateStr).toLocaleDateString();
-  };
-
-  // Build the document content with actual data
-  const content = `
-MEMBERSHIP AGREEMENT
-====================
-
-1. Who We Are
--------------
-
-Cooperative Name: ${formData.value.cooperativeName || "[Cooperative Name]"}
-Date Established: ${formatDate(formData.value.dateEstablished)}
-
-Our Purpose: ${formData.value.purpose || "[Purpose]"}
-
-Our Core Values: ${formData.value.coreValues || "[Core Values]"}
-
-Current Members:
-${
-  formData.value.members && formData.value.members.some((m) => m.name)
-    ? formData.value.members
-        .map((member, index) =>
-          member.name
-            ? `${index + 1}. ${member.name}${
-                member.email ? ` (${member.email})` : ""
-              }${
-                member.joinDate
-                  ? ` - Joined: ${formatDate(member.joinDate)}`
-                  : ""
-              }${member.role ? ` - Role: ${member.role}` : ""}`
-            : ""
-        )
-        .filter(Boolean)
-        .join("\n")
-    : "[No members added yet]"
-}
-
-2. Membership
--------------
-
-Who Can Be a Member
-
-Any person who:
-
-• Shares our values and purpose
-• Contributes labour to the cooperative (by doing actual work, not just investing money)
-• Commits to collective decision-making
-• Participates in governance responsibilities
-
-Becoming a Member
-
-New members join through a consent process, which means existing members must agree that adding this person won't harm the cooperative.
-
-1. Trial period of ${
-    formData.value.trialPeriodMonths || "[___]"
-  } months working together
-2. Values alignment conversation
-3. Consent decision by current members
-4. Optional - Equal buy-in contribution of $${
-    formData.value.buyInAmount || "[___]"
-  } (can be paid over time or waived based on need)
-
-Leaving the Cooperative
-
-Members can leave anytime with ${
-    formData.value.noticeDays || "[___]"
-  } days notice. The cooperative will:
-
-• Pay out their share of any surplus within ${
-    formData.value.surplusPayoutDays || "[___]"
-  } days
-• Return their buy-in contribution within ${
-    formData.value.buyInReturnDays || "[___]"
-  } days
-• Maintain respectful ongoing relationships when possible
-
-3. How We Make Decisions
-------------------------
-
-Consent-Based Decisions
-
-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.
-
-Day-to-Day Decisions
-
-Decisions under $${
-    formData.value.dayToDayLimit || "[___]"
-  } can be made by any member. Just tell others what you did at the next meeting.
-
-Regular Decisions
-
-Decisions between $${formData.value.regularDecisionMin || "[___]"} and $${
-    formData.value.regularDecisionMax || "[___]"
-  } need consent from members present at a meeting (minimum 2 members).
-
-Major Decisions
-
-These require consent from all members:
-• Adding or removing members
-• Changing this agreement
-• Taking on debt over $${formData.value.majorDebtThreshold || "[___]"}
-• Fundamental changes to our purpose or structure
-• Dissolution of the cooperative
-
-Meeting Structure
-
-• We meet ${
-    formData.value.meetingFrequency || "[___]"
-  } to make decisions together
-• Emergency meetings need ${
-    formData.value.emergencyNoticeHours || "[___]"
-  } hours notice
-• All members can add items to the agenda
-• We keep simple records of what we decide
-
-4. Money and Labour
--------------------
-
-Equal Ownership
-
-Each member owns an equal share of the cooperative, regardless of when they joined or how much money they put in.
-
-Paying Ourselves
-
-• Base hourly rate: $${formData.value.baseRate || "[___]"}/hour for all members
-• Monthly draw: $${
-    formData.value.monthlyDraw || "[___]"
-  } per month (if applicable)
-• Payment date: ${formData.value.paymentDay || "[___]"}th of each month
-• Surplus sharing: ${
-    formData.value.surplusFrequency || "[___]"
-  }ly based on hours worked
-
-Work Expectations
-
-• Target hours per week: ${formData.value.targetHours || "[___]"} hours
-• All work counts equally - admin, client work, business development
-• We track hours honestly and transparently
-• Flexible scheduling based on personal needs and business requirements
-
-Financial Transparency
-
-• All members can access all financial records anytime
-• Monthly financial updates shared with everyone
-• Annual financial review conducted together
-• No secret salaries or hidden expenses
-
-5. Roles and Responsibilities
------------------------------
-
-Rotating Roles
-
-We rotate operational roles every ${
-    formData.value.roleRotationMonths || "[___]"
-  } months to share knowledge and prevent burnout. Current roles include:
-
-• Financial coordinator (bookkeeping, invoicing, payments)
-• Client relationship manager (main point of contact)
-• Operations coordinator (scheduling, project management)
-• Business development (marketing, new client outreach)
-
-Shared Responsibilities
-
-All members participate in:
-• Weekly planning and check-in meetings
-• Monthly financial review
-• Annual strategic planning
-• Conflict resolution when needed
-• Onboarding new members
-
-6. Conflict and Care
---------------------
-
-When Conflict Happens
-
-1. Direct conversation between parties (if comfortable)
-2. Bring in a neutral member as mediator
-3. Full group conversation if needed
-4. External mediation if we can't resolve it ourselves
-5. As a last resort, consent process about membership
-
-Care Commitments
-
-• We check in about capacity and wellbeing regularly
-• We adjust workload when someone is struggling
-• We celebrate successes and support through failures
-• We maintain boundaries between work and personal relationships
-• We commit to direct, kind communication
-
-7. Changing This Agreement
---------------------------
-
-This agreement gets reviewed every ${
-    formData.value.reviewFrequency || "[___]"
-  } and can be changed anytime with consent from all members. We'll update it as we learn what works for us.
-
-8. If We Need to Close
-----------------------
-
-If the cooperative dissolves:
-• Pay all debts and obligations first
-• Return member buy-ins
-• Donate remaining assets to ${
-    formData.value.assetDonationTarget || "[organization to be determined]"
-  }
-• Close all legal and financial accounts
-• Celebrate what we built together
-
-9. Legal Bits
--------------
-
-Legal Structure: ${formData.value.legalStructure || "[To be determined]"}
-Registered Location: ${
-    formData.value.registeredLocation || "[To be determined]"
-  }
-Fiscal Year End: ${formData.value.fiscalYearEndMonth || "December"} ${
-    formData.value.fiscalYearEndDay || "31"
-  }
-
-10. Agreement Review
---------------------
-
-Last Updated: ${formatDate(formData.value.lastUpdated)}
-Next Review: ${formatDate(formData.value.nextReview) || "[To be scheduled]"}
-
-Member Signatures
------------------
-
-By signing below, we agree to these terms and commit to working together as equals in this cooperative.
-
-${
-  formData.value.members && formData.value.members.some((m) => m.name)
-    ? formData.value.members
-        .map((member, index) =>
-          member.name
-            ? `${index + 1}. ${
-                member.name
-              }\n   Signature: ___________________________ Date: ___________\n`
-            : ""
-        )
-        .filter(Boolean)
-        .join("\n")
-    : "Member signatures:\n\n1. ___________________________ Date: ___________\n\n2. ___________________________ Date: ___________\n"
-}
-`;
-
-  return content.trim();
-};
-
-const convertToMarkdown = () => {
-  // Format date helper
-  const formatDate = (dateStr) => {
-    if (!dateStr) return "[_____]";
-    return new Date(dateStr).toLocaleDateString();
-  };
-
-  // Build the document content with actual data in Markdown format
-  const content = `# MEMBERSHIP AGREEMENT
-
-## 1. Who We Are
-
-**Cooperative Name:** ${
-    formData.value.cooperativeName || "[Cooperative Name]"
-  }  
-**Date Established:** ${formatDate(formData.value.dateEstablished)}
-
-**Our Purpose:** ${formData.value.purpose || "[Purpose]"}
-
-**Our Core Values:** ${formData.value.coreValues || "[Core Values]"}
-
-### Current Members
-
-${
-  formData.value.members && formData.value.members.some((m) => m.name)
-    ? formData.value.members
-        .map((member, index) =>
-          member.name
-            ? `${index + 1}. **${member.name}**${
-                member.email ? ` (${member.email})` : ""
-              }${
-                member.joinDate
-                  ? `  \n   Joined: ${formatDate(member.joinDate)}`
-                  : ""
-              }${member.role ? `  \n   Role: ${member.role}` : ""}`
-            : ""
-        )
-        .filter(Boolean)
-        .join("\n\n")
-    : "*No members added yet*"
-}
-
-## 2. Membership
-
-### Who Can Be a Member
-
-Any person who:
-
-- Shares our values and purpose
-- Contributes labour to the cooperative (by doing actual work, not just investing money)
-- Commits to collective decision-making
-- Participates in governance responsibilities
-
-### Becoming a Member
-
-New members join through a consent process, which means existing members must agree that adding this person won't harm the cooperative.
-
-1. Trial period of **${
-    formData.value.trialPeriodMonths || "[___]"
-  }** months working together
-2. Values alignment conversation
-3. Consent decision by current members
-4. Optional - Equal buy-in contribution of **$${
-    formData.value.buyInAmount || "[___]"
-  }** (can be paid over time or waived based on need)
-
-### Leaving the Cooperative
-
-Members can leave anytime with **${
-    formData.value.noticeDays || "[___]"
-  }** days notice. The cooperative will:
-
-- Pay out their share of any surplus within **${
-    formData.value.surplusPayoutDays || "[___]"
-  }** days
-- Return their buy-in contribution within **${
-    formData.value.buyInReturnDays || "[___]"
-  }** days
-- Maintain respectful ongoing relationships when possible
-
-## 3. How We Make Decisions
-
-### Consent-Based Decisions
-
-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.
-
-### Day-to-Day Decisions
-
-Decisions under **$${
-    formData.value.dayToDayLimit || "[___]"
-  }** can be made by any member. Just tell others what you did at the next meeting.
-
-### Regular Decisions
-
-Decisions between **$${formData.value.regularDecisionMin || "[___]"}** and **$${
-    formData.value.regularDecisionMax || "[___]"
-  }** need consent from members present at a meeting (minimum 2 members).
-
-### Major Decisions
-
-These require consent from all members:
-- Adding or removing members
-- Changing this agreement
-- Taking on debt over **$${formData.value.majorDebtThreshold || "[___]"}**
-- Fundamental changes to our purpose or structure
-- Dissolution of the cooperative
-
-### Meeting Structure
-
-- We meet **${
-    formData.value.meetingFrequency || "[___]"
-  }** to make decisions together
-- Emergency meetings need **${
-    formData.value.emergencyNoticeHours || "[___]"
-  }** hours notice
-- All members can add items to the agenda
-- We keep simple records of what we decide
-
-## 4. Money and Labour
-
-### Equal Ownership
-
-Each member owns an equal share of the cooperative, regardless of when they joined or how much money they put in.
-
-### Paying Ourselves
-
-- Base hourly rate: **$${
-    formData.value.baseRate || "[___]"
-  }/hour** for all members
-- Monthly draw: **$${
-    formData.value.monthlyDraw || "[___]"
-  }** per month (if applicable)
-- Payment date: **${formData.value.paymentDay || "[___]"}th** of each month
-- Surplus sharing: **${
-    formData.value.surplusFrequency || "[___]"
-  }ly** based on hours worked
-
-### Work Expectations
-
-- Target hours per week: **${formData.value.targetHours || "[___]"}** hours
-- All work counts equally - admin, client work, business development
-- We track hours honestly and transparently
-- Flexible scheduling based on personal needs and business requirements
-
-### Financial Transparency
-
-- All members can access all financial records anytime
-- Monthly financial updates shared with everyone
-- Annual financial review conducted together
-- No secret salaries or hidden expenses
-
-## 5. Roles and Responsibilities
-
-### Rotating Roles
-
-We rotate operational roles every **${
-    formData.value.roleRotationMonths || "[___]"
-  }** months to share knowledge and prevent burnout. Current roles include:
-
-- Financial coordinator (bookkeeping, invoicing, payments)
-- Client relationship manager (main point of contact)
-- Operations coordinator (scheduling, project management)
-- Business development (marketing, new client outreach)
-
-### Shared Responsibilities
-
-All members participate in:
-- Weekly planning and check-in meetings
-- Monthly financial review
-- Annual strategic planning
-- Conflict resolution when needed
-- Onboarding new members
-
-## 6. Conflict and Care
-
-### When Conflict Happens
-
-1. Direct conversation between parties (if comfortable)
-2. Bring in a neutral member as mediator
-3. Full group conversation if needed
-4. External mediation if we can't resolve it ourselves
-5. As a last resort, consent process about membership
-
-### Care Commitments
-
-- We check in about capacity and wellbeing regularly
-- We adjust workload when someone is struggling
-- We celebrate successes and support through failures
-- We maintain boundaries between work and personal relationships
-- We commit to direct, kind communication
-
-## 7. Changing This Agreement
-
-This agreement gets reviewed every **${
-    formData.value.reviewFrequency || "[___]"
-  }** and can be changed anytime with consent from all members. We'll update it as we learn what works for us.
-
-## 8. If We Need to Close
-
-If the cooperative dissolves:
-- Pay all debts and obligations first
-- Return member buy-ins
-- Donate remaining assets to **${
-    formData.value.assetDonationTarget || "[organization to be determined]"
-  }**
-- Close all legal and financial accounts
-- Celebrate what we built together
-
-## 9. Legal Bits
-
-**Legal Structure:** ${formData.value.legalStructure || "[To be determined]"}  
-**Registered Location:** ${
-    formData.value.registeredLocation || "[To be determined]"
-  }  
-**Fiscal Year End:** ${formData.value.fiscalYearEndMonth || "December"} ${
-    formData.value.fiscalYearEndDay || "31"
-  }
-
-## 10. Agreement Review
-
-**Last Updated:** ${formatDate(formData.value.lastUpdated)}  
-**Next Review:** ${formatDate(formData.value.nextReview) || "[To be scheduled]"}
-
-## Member Signatures
-
-By signing below, we agree to these terms and commit to working together as equals in this cooperative.
-
-${
-  formData.value.members && formData.value.members.some((m) => m.name)
-    ? formData.value.members
-        .map((member, index) =>
-          member.name
-            ? `**${index + 1}. ${
-                member.name
-              }**  \nSignature: ___________________________ Date: ___________\n`
-            : ""
-        )
-        .filter(Boolean)
-        .join("\n")
-    : "**Member signatures:**\n\n**1.** ___________________________  \nSignature: ___________________________ Date: ___________\n\n**2.** ___________________________  \nSignature: ___________________________ Date: ___________\n"
-}
-`;
-
-  return content.trim();
-};
-
-const downloadFile = (content, filename, mimeType) => {
-  const blob = new Blob([content], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-};
+// Export data for the ExportOptions component
+const exportData = computed(() => ({
+  formData: formData.value,
+  cooperativeName: formData.value.cooperativeName || "Worker Cooperative",
+  dateEstablished: formData.value.dateEstablished,
+  purpose: formData.value.purpose,
+  coreValues: formData.value.coreValues,
+  members: formData.value.members,
+  trialPeriodMonths: formData.value.trialPeriodMonths,
+  policies: {
+    buyInAmount: formData.value.buyInAmount,
+    noticeDays: formData.value.noticeDays,
+    surplusPayoutDays: formData.value.surplusPayoutDays,
+    buyInReturnDays: formData.value.buyInReturnDays,
+    dayToDayLimit: formData.value.dayToDayLimit,
+    regularDecisionMin: formData.value.regularDecisionMin,
+    regularDecisionMax: formData.value.regularDecisionMax,
+    majorDebtThreshold: formData.value.majorDebtThreshold,
+    meetingFrequency: formData.value.meetingFrequency,
+    emergencyNoticeHours: formData.value.emergencyNoticeHours,
+    baseRate: formData.value.baseRate
+  },
+  exportedAt: new Date().toISOString(),
+  section: "membership-agreement"
+}));
 </script>
 
 <style scoped>
@@ -1951,681 +1396,7 @@ const downloadFile = (content, filename, mimeType) => {
   pointer-events: none;
 }
 
-/* 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;
-}
-
-.separator {
-  width: 1px;
-  height: 2rem;
-  background: #d1d5db;
-  margin: 0 0.5rem;
-}
-
-.font-section {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
-}
-
-.font-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
-  margin: 0;
-}
-
-.export-btn {
-  background: white;
-  border: 1px solid black;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  color: black;
-  cursor: pointer;
-  transition: all 0.1s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-family: "Ubuntu Mono", monospace;
-  text-transform: uppercase;
-  font-weight: bold;
-  letter-spacing: 0.5px;
-}
-
-.export-btn:hover {
-  background: black;
-  color: white;
-  transform: translateY(-1px) translateX(-1px);
-}
-
-.export-btn.primary {
-  background: black;
-  color: white;
-}
-
-.export-btn.primary:hover {
-  background: black;
-  transform: translateY(-1px) translateX(-1px);
-}
-
-/* Bitmap aesthetic overrides - remove all rounded corners */
-* {
-  border-radius: 0 !important;
-  font-family: "Ubuntu", monospace !important;
-}
-
-/* Form fields with bitmap styling */
-input,
-textarea,
-select {
-  border: 1px solid black !important;
-  background: white !important;
-  color: black !important;
-  font-family: "Ubuntu Mono", monospace !important;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid black !important;
-  outline-offset: -2px !important;
-  background: white !important;
-}
-
-/* Dark mode form fields */
-html.dark input,
-html.dark textarea,
-html.dark select {
-  border: 1px solid white !important;
-  background: #0a0a0a !important;
-  color: white !important;
-}
-
-html.dark input:focus,
-html.dark textarea:focus,
-html.dark select:focus {
-  outline: 2px solid white !important;
-  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;
-}
-
-/* Remove any card styling roundness */
-.section-card,
-.form-group-large {
-  border-radius: 0 !important;
-}
-
-/* All text */
-p,
-span,
-div {
-  font-family: "Ubuntu", monospace !important;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .template-wrapper {
-    padding: 1rem;
-  }
-
-  .export-content {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .export-section {
-    justify-content: center;
-  }
-
-  .separator {
-    width: 100%;
-    height: 1px;
-    margin: 0;
-  }
-
-  .export-buttons {
-    justify-content: center;
-  }
-}
-
-/* Professional Print Styles - Match PDF Export Quality */
-@media print {
-  /* Page setup - professional document margins */
-  @page {
-    size: letter;
-    margin: 0.75in;
-  }
-
-  /* Global print reset */
-  * {
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Hide everything except the document content */
-  body > *:not(.template-wrapper),
-  #__nuxt > *:not(.template-wrapper),
-  .export-controls,
-  .no-print,
-  .no-pdf,
-  header,
-  nav,
-  footer,
-  .nuxt-loading,
-  [data-testid],
-  .nuxt-icon,
-  .app-header,
-  .page-header,
-  .brand,
-  .logo,
-  h1:contains("Urgent Tools"),
-  *:contains("Urgent Tools"):not(.document-title):not(.template-content *) {
-    display: none !important;
-  }
-
-  /* Specifically hide any element that contains "Urgent Tools" text but isn't part of our document */
-  body *:not(.template-wrapper):not(.template-wrapper *) {
-    visibility: hidden !important;
-  }
-
-  .template-wrapper,
-  .template-wrapper * {
-    visibility: visible !important;
-  }
-
-  /* Document structure - clean and professional */
-  .template-wrapper {
-    background: white !important;
-    padding: 0 !important;
-    min-height: auto !important;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, sans-serif !important;
-    font-size: 11pt !important;
-    line-height: 1.6 !important;
-    color: #000000 !important;
-  }
-
-  .document-page {
-    max-width: none !important;
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    background: white !important;
-    min-height: auto !important;
-  }
-
-  .template-content {
-    background: white !important;
-    padding: 0 !important;
-    max-width: none !important;
-  }
-
-  /* Professional header with black background - matching PDF but smaller */
-  .document-page::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 0.8in;
-    background: #000000 !important;
-    margin: 0 0 0.15in 0;
-    position: relative;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Document title styling - white text on black background */
-  .document-title {
-    position: relative !important;
-    z-index: 1 !important;
-    margin-top: -0.8in !important;
-    margin-bottom: 0.15in !important;
-    padding: 0.2in 0 0.1in 0 !important;
-    color: white !important;
-    background: transparent !important;
-    border: none !important;
-    font-size: 16pt !important;
-    font-weight: bold !important;
-    text-align: center !important;
-    text-transform: uppercase !important;
-    letter-spacing: 1pt !important;
-    page-break-after: avoid !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Add cooperative name below title */
-  .document-title::after {
-    content: attr(data-coop-name);
-    display: block;
-    font-size: 10pt;
-    font-weight: normal;
-    margin-top: 0.1in;
-    color: white !important;
-    text-transform: none;
-    letter-spacing: normal;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Section headers with professional gray background */
-  .section-title {
-    font-size: 14pt !important;
-    font-weight: bold !important;
-    margin: 20pt 0 12pt 0 !important;
-    padding: 6pt 10pt !important;
-    background: #f0f0f0 !important;
-    border-radius: 3pt !important;
-    color: #000000 !important;
-    page-break-after: avoid !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Subsection headers */
-  .subsection-title {
-    font-size: 12pt !important;
-    font-weight: bold !important;
-    margin: 14pt 0 8pt 0 !important;
-    color: #000000 !important;
-    border-bottom: 0.5pt solid #cccccc !important;
-    padding-bottom: 2pt !important;
-    page-break-after: avoid !important;
-  }
-
-  /* Content paragraphs */
-  .content-paragraph,
-  p {
-    margin: 8pt 0 !important;
-    text-align: justify !important;
-    line-height: 1.5 !important;
-    color: #000000 !important;
-    font-size: 11pt !important;
-    orphans: 2 !important;
-    widows: 2 !important;
-  }
-
-  /* Lists with proper spacing */
-  .content-list,
-  ul,
-  ol {
-    margin: 8pt 0 !important;
-    padding-left: 20pt !important;
-    color: #000000 !important;
-  }
-
-  .content-list li,
-  li {
-    margin: 4pt 0 !important;
-    line-height: 1.4 !important;
-    color: #000000 !important;
-    font-size: 11pt !important;
-    page-break-inside: avoid !important;
-  }
-
-  /* Section cards */
-  .section-card {
-    margin: 16pt 0 !important;
-    padding: 0 !important;
-    border: none !important;
-    border-radius: 0 !important;
-    background: white !important;
-    page-break-inside: avoid !important;
-  }
-
-  .section-card::after {
-    display: none !important;
-  }
-
-  /* CRITICAL: Form inputs styled to look like filled-in text */
-  input[type="text"],
-  input[type="number"],
-  input[type="date"],
-  input[type="email"],
-  textarea,
-  select,
-  .inline-field,
-  .large-field,
-  .block-field,
-  .number-field,
-  .wide-field {
-    /* Remove all input styling */
-    background: transparent !important;
-    border: none !important;
-    border-bottom: 0.75pt solid #000000 !important;
-    color: #000000 !important;
-    font-family: inherit !important;
-    font-size: inherit !important;
-    font-weight: bold !important;
-    padding: 0 2pt !important;
-    margin: 0 1pt !important;
-    outline: none !important;
-    box-shadow: none !important;
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    display: inline !important;
-    vertical-align: baseline !important;
-    min-width: 80pt !important;
-    height: auto !important;
-    line-height: inherit !important;
-  }
-
-  /* Special handling for empty inputs - show as underlined blanks */
-  input:placeholder-shown:not([value]),
-  input[value=""]:not(:focus),
-  textarea:placeholder-shown:not([value]),
-  textarea[value=""]:not(:focus) {
-    border-bottom: 0.75pt solid #000000 !important;
-    min-width: 100pt !important;
-    height: 11pt !important;
-    display: inline-block !important;
-  }
-
-  /* Filled inputs should look like handwritten text */
-  input:not(:placeholder-shown),
-  input[value]:not([value=""]),
-  textarea:not(:placeholder-shown),
-  textarea[value]:not([value=""]),
-  select:not([value=""]) {
-    border-bottom: none !important;
-    font-weight: bold !important;
-    background: transparent !important;
-  }
-
-  /* Ensure input values are visible in print by using CSS content */
-  input[data-print-value]:after {
-    content: attr(data-print-value) !important;
-    font-weight: bold !important;
-    color: #000000 !important;
-  }
-
-  /* Textarea specific styling */
-  textarea {
-    border: none !important;
-    padding: 2pt !important;
-    margin: 0 !important;
-    resize: none !important;
-    border-radius: 0 !important;
-    min-height: auto !important;
-    line-height: 1.5 !important;
-    font-weight: normal !important;
-    vertical-align: top !important;
-    overflow: hidden !important;
-  }
-
-  /* Select dropdowns */
-  select {
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    background-image: none !important;
-    border-bottom: none !important;
-  }
-
-  /* Form labels */
-  .form-group-large label,
-  label {
-    font-weight: bold !important;
-    color: #000000 !important;
-    display: block !important;
-    margin-bottom: 3pt !important;
-    font-size: 10pt !important;
-  }
-
-  .form-group-large {
-    margin: 10pt 0 !important;
-    page-break-inside: avoid !important;
-  }
-
-  /* Layout simplification for print */
-  .grid {
-    display: block !important;
-  }
-
-  .grid > div {
-    margin: 6pt 0 !important;
-    padding: 2pt 0 !important;
-  }
-
-  .flex {
-    display: block !important;
-  }
-
-  .flex.items-baseline {
-    display: inline !important;
-  }
-
-  .flex.items-baseline > * {
-    display: inline !important;
-    margin: 0 2pt !important;
-  }
-
-  .flex > *:not(.flex.items-baseline > *) {
-    display: block !important;
-    margin: 3pt 0 !important;
-  }
-
-  /* Spacing utilities */
-  .space-y-4 > * + *,
-  .space-y-6 > * + *,
-  .space-y-8 > * + * {
-    margin-top: 10pt !important;
-  }
-
-  /* Hide all buttons and UI controls */
-  button,
-  .export-btn,
-  .font-select,
-  .export-controls,
-  [class*="button"],
-  [type="button"],
-  [role="button"],
-  .no-print,
-  .no-pdf {
-    display: none !important;
-  }
-
-  /* Hide the "Add Member" button specifically */
-  button:contains("Add Member"),
-  [icon="i-heroicons-plus"] {
-    display: none !important;
-  }
-
-  /* Member management sections */
-  .border-neutral-200 {
-    border: none !important;
-    background: transparent !important;
-    padding: 0 !important;
-    margin: 10pt 0 !important;
-    page-break-inside: avoid !important;
-  }
-
-  /* Hide member management UI elements */
-  .border-neutral-200 button,
-  .border-neutral-200 .flex button,
-  [icon*="heroicons"],
-  .flex.items-start.justify-between h4,
-  .border-neutral-200 h4 {
-    display: none !important;
-  }
-
-  /* Member cards layout - convert to simple blocks */
-  .border-neutral-200 .grid {
-    display: block !important;
-  }
-
-  .border-neutral-200 .grid > * {
-    display: block !important;
-    margin: 5pt 0 !important;
-  }
-
-  /* Member card titles and management elements */
-  .border-neutral-200 .flex.items-start.justify-between {
-    display: none !important;
-  }
-
-  /* Style member information as clean blocks */
-  .border-neutral-200 .form-group-large {
-    margin: 6pt 0 !important;
-  }
-
-  .border-neutral-200 .form-group-large label {
-    font-size: 10pt !important;
-    font-weight: bold !important;
-    margin-bottom: 2pt !important;
-  }
-
-  /* Special areas styling */
-  .signature-space {
-    display: none !important;
-  }
-
-  .print-signatures {
-    margin-top: 20pt !important;
-    padding: 0 !important;
-    background: transparent !important;
-    color: #000000 !important;
-  }
-
-  .print-signatures p {
-    color: #000000 !important;
-    font-family: inherit !important;
-    line-height: 1.5 !important;
-  }
-
-  .print-signatures div {
-    page-break-inside: avoid !important;
-  }
-
-  .review-dates {
-    background: #f8f8f8 !important;
-    padding: 8pt !important;
-    border-radius: 3pt !important;
-    border-left: 2pt solid #3b82f6 !important;
-    margin: 10pt 0 !important;
-    -webkit-print-color-adjust: exact !important;
-    print-color-adjust: exact !important;
-  }
-
-  /* Page break controls */
-  .page-break-before {
-    page-break-before: always !important;
-  }
-  .page-break-after {
-    page-break-after: always !important;
-  }
-  .page-break-inside-avoid {
-    page-break-inside: avoid !important;
-  }
-}
-/* Dark mode enhancements for readability and contrast */
-html.dark .template-content {
-  color: #e5e7eb;
-}
-
-html.dark .document-title {
-  color: #f9fafb;
-  border-top-color: #f9fafb;
-  border-bottom-color: #f9fafb;
-  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
-}
-
-html.dark .section-card::after {
-  background: linear-gradient(90deg, #444 0%, #333 50%, #444 100%);
-}
-
-html.dark .section-title {
-  color: #f9fafb;
-}
-html.dark .subsection-title {
-  color: #e5e7eb;
-  border-bottom-color: #4b5563;
-}
-html.dark .content-paragraph {
-  color: #e5e7eb;
-}
-html.dark .content-list,
-html.dark .content-list li {
-  color: #e5e7eb;
-}
-
-html.dark .signature-space {
-  border-color: #374151;
-  background: #0a0a0a;
-}
-html.dark .review-dates {
-  background: #0f172a;
-  border-left-color: #60a5fa;
-}
-
-/* Dither overlay inversion */
+/* Dark mode dither inversion */
 html.dark .template-wrapper::before {
   background-image: radial-gradient(
       circle at 25% 25%,
@@ -2636,10 +1407,6 @@ html.dark .template-wrapper::before {
   opacity: 0.12;
 }
 
-/* Document page inversion for dark */
-html.dark .document-page {
-  background: #0a0a0a;
-}
 html.dark .document-page::before {
   background: white;
   background-image: radial-gradient(black 1px, transparent 1px);
@@ -2648,35 +1415,14 @@ html.dark .document-page::after {
   border-color: white;
 }
 
-/* Export controls */
-html.dark .export-controls {
-  background: #0a0a0a;
-  border-color: white;
-}
-html.dark .export-controls::before {
+.document-page {
+  min-height: 11in;
   background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-html.dark .export-title,
-html.dark .font-label {
-  color: #e5e7eb;
+  position: relative;
 }
 
-/* Buttons in dark */
-html.dark .export-btn {
+/* Dark mode document page inversion */
+html.dark .document-page {
   background: #0a0a0a;
-  border-color: white;
-  color: white;
 }
-html.dark .export-btn:hover {
-  background: white;
-  color: black;
-}
-html.dark .export-btn.primary {
-  background: white;
-  color: black;
-}
-html.dark .export-btn.primary:hover {
-  background: white;
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/pages/templates/tech-charter.vue b/pages/templates/tech-charter.vue
index 3bc0e3d..3101e0d 100644
--- a/pages/templates/tech-charter.vue
+++ b/pages/templates/tech-charter.vue
@@ -3,49 +3,17 @@
     <!-- Wizard Subnav -->
     <WizardSubnav />
 
+    <!-- Export Options - Top -->
+    <div class="flex justify-center py-6">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="tech-charter" 
+        title="Technology Charter" 
+      />
+    </div>
+
     <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>
-
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -59,52 +27,72 @@
 
           <!-- Content -->
           <div class="">
-            <!-- Principles Section -->
+            <!-- Purpose Section -->
             <div class="section-card">
               <div>
-                <h2
-                  class="text-2xl font-bold text-neutral-800 mb-4"
-                  id="principles-heading">
-                  Define Your Principles
+                <h2 class="text-2xl font-bold text-neutral-800 mb-4">
+                  Charter Purpose
                 </h2>
+                <p class="text-neutral-600 mb-4">
+                  Describe what this charter will guide and why it matters to
+                  your group.
+                </p>
               </div>
 
-              <fieldset class="space-y-4">
-                <legend class="sr-only">
-                  Select your technology principles
-                </legend>
-                <div class="grid md:grid-cols-2 gap-4 principle-grid">
+              <div class="relative">
+                <textarea
+                  v-model="charterPurpose"
+                  class="w-full min-h-32 p-4 border-2 border-neutral-300 bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 focus:border-black dark:focus:border-white transition-colors resize-y"
+                  rows="4" />
+              </div>
+            </div>
+
+            <!-- Unified Principles & Importance Section -->
+            <div class="section-card">
+              <div>
+                <h2 class="text-2xl font-bold text-neutral-800 mb-4">
+                  Define Your Principles & Importance
+                </h2>
+                <p class="text-neutral-600 mb-6">
+                  Select principles and set their importance. Zero means
+                  excluded, 5 means critical.
+                </p>
+              </div>
+
+              <div class="grid md:grid-cols-1 gap-4">
+                <div
+                  v-for="principle in principles"
+                  :key="principle.id"
+                  class="relative">
+                  <!-- Dithered shadow for selected cards -->
                   <div
-                    v-for="principle in principles"
-                    :key="principle.id"
-                    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">
+                    v-if="principleWeights[principle.id] > 0"
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+
+                  <div
+                    :class="[
+                      'relative transition-all',
+                      principleWeights[principle.id] > 0
+                        ? 'principle-selected border-2 border-black dark:border-white bg-white dark:bg-neutral-950'
+                        : 'border border-black dark:border-white bg-transparent',
+                    ]">
+                    <div class="p-6">
+                      <div class="flex items-start gap-6">
+                        <!-- Principle info -->
                         <div class="flex-1">
                           <div
                             :class="[
-                              'principle-text-bg p-3 mb-3',
-                              selectedPrinciples.includes(principle.id)
+                              'principle-text-bg mb-3',
+                              principleWeights[principle.id] > 0
                                 ? 'selected'
                                 : '',
                             ]">
-                            <h3 class="font-semibold text-lg mb-2">
+                            <h3 class="font-bold text-lg mb-2">
                               {{ principle.name }}
                             </h3>
                             <p
                               :class="
-                                selectedPrinciples.includes(principle.id)
+                                principleWeights[principle.id] > 0
                                   ? 'text-neutral-700'
                                   : 'text-neutral-600'
                               "
@@ -112,51 +100,86 @@
                               {{ principle.description }}
                             </p>
                           </div>
-                          <div class="flex gap-2">
-                            <label
+                        </div>
+
+                        <!-- Importance selector -->
+                        <div class="flex flex-col items-center gap-2">
+                          <label
+                            class="text-xs font-bold text-neutral-500 uppercase tracking-wider">
+                            Importance
+                          </label>
+
+                          <!-- Visual weight indicator -->
+                          <div class="flex gap-1 mb-2">
+                            <button
+                              v-for="level in [0, 1, 2, 3, 4, 5]"
+                              :key="level"
+                              @click="setPrincipleWeight(principle.id, level)"
                               :class="[
-                                'flex items-center gap-2 cursor-pointer principle-label-bg px-2 py-1',
-                                selectedPrinciples.includes(principle.id)
-                                  ? 'selected'
-                                  : '',
+                                'w-8 h-8 border-2 font-mono text-sm transition-all',
+                                principleWeights[principle.id] >= level
+                                  ? 'bg-black text-white border-black dark:bg-white dark:text-black dark:border-white'
+                                  : 'bg-white border-neutral-300 hover:border-neutral-500 dark:bg-neutral-950',
                               ]"
-                              @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>
+                              :title="`Set importance to ${level}`">
+                              {{ level }}
+                            </button>
                           </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>
+
+                          <!-- Weight value display -->
+                          <div class="text-center">
+                            <div class="text-2xl font-bold">
+                              {{ principleWeights[principle.id] || 0 }}
+                            </div>
+                            <div class="text-xs text-neutral-500">
+                              {{
+                                getWeightLabel(
+                                  principleWeights[principle.id] || 0
+                                )
+                              }}
+                            </div>
                           </div>
                         </div>
                       </div>
+
+                      <!-- Non-negotiable toggle (only shows for weights > 0) -->
+                      <div
+                        v-if="principleWeights[principle.id] > 0"
+                        class="mt-4 pt-4 border-t border-neutral-200">
+                        <label
+                          :class="[
+                            'flex items-center gap-3 cursor-pointer principle-label-bg px-2 py-1',
+                            nonNegotiables.includes(principle.id)
+                              ? 'selected'
+                              : '',
+                          ]">
+                          <input
+                            type="checkbox"
+                            :checked="nonNegotiables.includes(principle.id)"
+                            @change="toggleNonNegotiable(principle.id)"
+                            class="w-4 h-4" />
+                          <span class="text-sm font-medium text-red-600">
+                            Make this non-negotiable
+                          </span>
+                        </label>
+                      </div>
+
+                      <!-- Show rubric description when selected -->
+                      <div
+                        v-if="principleWeights[principle.id] > 0"
+                        class="mt-4 p-3 principle-label-bg selected border border-neutral-200">
+                        <div
+                          class="text-xs font-bold uppercase text-neutral-500 mb-1">
+                          Evaluation Criteria:
+                        </div>
+                        <div class="text-sm">
+                          {{ principle.rubricDescription }}
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </fieldset>
+              </div>
             </div>
 
             <!-- Constraints Section -->
@@ -202,9 +225,7 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg mb-4">
-                    Hosting Model
-                  </legend>
+                  <legend class="font-semibold text-lg">Hosting Model</legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
@@ -335,144 +356,15 @@
               </div>
             </div>
 
-            <!-- Weights Section -->
-            <div class="section-card">
-              <div>
-                <h2
-                  class="text-2xl font-bold text-neutral-800"
-                  id="weights-heading">
-                  Set Evaluation Weights
-                </h2>
-                <p class="text-neutral-600 mb-4">
-                  Adjust the importance of each criterion (0 = ignore, 5 =
-                  critical).
-                </p>
-                <div
-                  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.
-                  </p>
-                </div>
-              </div>
-
-              <div class="space-y-4">
-                <div
-                  v-for="weight in weightOptions"
-                  :key="weight.id"
-                  class="bg-neutral-50 p-6 rounded-lg">
-                  <div
-                    class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                    <div class="flex-1">
-                      <label
-                        :for="`weight-${weight.id}`"
-                        class="font-semibold text-lg mb-1 block"
-                        >{{ weight.name }}</label
-                      >
-                      <p class="text-neutral-600 text-sm">
-                        {{ weight.description }}
-                      </p>
-                    </div>
-                    <div class="flex items-center gap-4">
-                      <div class="flex items-center gap-2">
-                        <span class="text-sm text-neutral-500 w-4">0</span>
-                        <input
-                          :id="`weight-${weight.id}`"
-                          type="range"
-                          min="0"
-                          max="5"
-                          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-neutral-500" />
-                        <span class="text-sm text-neutral-500 w-4">5</span>
-                      </div>
-                      <div class="flex flex-col items-center">
-                        <input
-                          type="number"
-                          min="0"
-                          max="5"
-                          v-model.number="weights[weight.id]"
-                          :aria-label="`${weight.name} weight value`"
-                          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
-                        >
-                      </div>
-                    </div>
-                  </div>
-                  <div :id="`weight-${weight.id}-desc`" class="sr-only">
-                    Current weight: {{ weights[weight.id] }} out of 5.
-                    {{
-                      weights[weight.id] === 0
-                        ? "Ignored"
-                        : weights[weight.id] === 5
-                        ? "Critical importance"
-                        : `${weights[weight.id]} out of 5 importance`
-                    }}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Generate Button -->
-            <div class="relative mb-8">
-              <!-- Dithered shadow -->
-              <div
-                class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
-
-              <!-- 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>
-
-                <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>
+            <!-- Reset Form Section -->
+            <div v-if="canGenerateCharter" class="text-center mt-8">
+              <button
+                @click="resetForm"
+                class="export-btn"
+                title="Clear all form data and start over">
+                <UIcon name="i-heroicons-arrow-path" />
+                Reset Form
+              </button>
             </div>
           </div>
         </div>
@@ -480,7 +372,7 @@
         <!-- Generated Charter Output -->
         <div
           v-if="charterGenerated"
-          class="relative mb-8 animate-fadeIn"
+          class="relative animate-fadeIn"
           role="main"
           aria-label="Generated Technology Charter">
           <!-- Dithered shadow -->
@@ -530,16 +422,19 @@
               <section
                 class="mb-8"
                 v-if="
-                  selectedPrinciples.filter((p) => !nonNegotiables.includes(p))
-                    .length > 0
+                  Object.keys(principleWeights).filter(
+                    (p) =>
+                      principleWeights[p] > 0 && !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)
+                    v-for="principleId in Object.keys(principleWeights).filter(
+                      (p) =>
+                        principleWeights[p] > 0 && !nonNegotiables.includes(p)
                     )"
                     :key="principleId"
                     class="flex items-start">
@@ -673,7 +568,7 @@
                         </td>
                         <td
                           class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600">
-                          {{ weights[weight.id] }}
+                          {{ principleWeights[weight.id] }}
                         </td>
                       </tr>
                     </tbody>
@@ -760,47 +655,20 @@
                   </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>
     </div>
+
+    <!-- Export Options - Bottom -->
+    <div class="flex justify-center py-6">
+      <ExportOptions 
+        :export-data="exportData" 
+        filename="tech-charter" 
+        title="Technology Charter" 
+      />
+    </div>
   </div>
 </template>
 
@@ -812,10 +680,12 @@ definePageMeta({
 });
 
 // State
-const charterGenerated = ref(false);
-const selectedPrinciples = ref([]);
+const charterPurpose = ref(
+  "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."
+);
+const principleWeights = ref({});
 const nonNegotiables = ref([]);
-const copySuccess = ref(false);
+const charterGenerated = ref(false);
 
 const constraints = ref({
   sso: "optional",
@@ -825,84 +695,62 @@ const constraints = ref({
   timeline: "quarter",
 });
 
-const weights = ref({
-  privacy: 4,
-  accessibility: 5,
-  interop: 3,
-  lockin: 4,
-  opensource: 3,
-  cost: 4,
-  sustainability: 2,
-  localization: 2,
-  usability: 3,
-});
-
-// Data
-
+// Data - Unified principles with rubric descriptions
 const principles = [
   {
     id: "privacy",
-    icon: "🔒",
-    name: "Privacy & Data Minimization",
-    description:
-      "Collect only necessary data, encrypt everything, respect user autonomy",
-  },
-  {
-    id: "sovereignty",
-    icon: "🏛️",
-    name: "Data Sovereignty",
-    description:
-      "Data residency requirements, EU adequacy, local jurisdiction control",
+    name: "Privacy & Data Control",
+    description: "Data minimization, encryption, sovereignty, and user consent",
+    rubricDescription:
+      "Data collection practices, encryption standards, jurisdiction control",
+    defaultWeight: 4,
   },
   {
     id: "accessibility",
-    icon: "♿",
-    name: "Accessibility First",
-    description:
-      "WCAG 2.2 AA compliance, screen reader support, keyboard navigation",
-  },
-  {
-    id: "interop",
-    icon: "🔗",
-    name: "Interoperability",
-    description:
-      "Open standards, API access, webhook support, standard formats",
+    name: "Universal Access",
+    description: "WCAG compliance, screen readers, keyboard navigation",
+    rubricDescription: "WCAG 2.2 AA, keyboard nav, screen reader support",
+    defaultWeight: 5,
   },
   {
     id: "portability",
-    icon: "📦",
-    name: "Data Portability",
-    description: "Clear export paths, no vendor lock-in, migration-friendly",
+    name: "Data Freedom",
+    description: "Easy export, no vendor lock-in, migration-friendly",
+    rubricDescription:
+      "Export capabilities, proprietary formats, switching costs",
+    defaultWeight: 4,
   },
   {
     id: "opensource",
-    icon: "🌍",
-    name: "Open Source Preference",
-    description: "FOSS first, community-driven, transparent development",
+    name: "Open Source & Community",
+    description:
+      "FOSS preference, transparent development, community governance",
+    rubricDescription: "License type, community involvement, code transparency",
+    defaultWeight: 3,
   },
   {
-    id: "cost",
-    icon: "💰",
-    name: "Cost Sustainability",
-    description: "Predictable pricing, no surprise fees, budget-appropriate",
-  },
-  {
-    id: "environmental",
-    icon: "🌱",
-    name: "Environmental Impact",
-    description: "Green hosting, carbon neutral, efficient resource use",
+    id: "sustainability",
+    name: "Sustainable Operations",
+    description: "Predictable costs, green hosting, efficient resource use",
+    rubricDescription:
+      "Total cost of ownership, carbon footprint, resource efficiency",
+    defaultWeight: 3,
   },
   {
     id: "localization",
-    icon: "🌐",
-    name: "Localization Support",
-    description: "Multi-language, timezone awareness, cultural sensitivity",
+    name: "Local Support",
+    description: "Multi-language, timezone aware, cultural sensitivity",
+    rubricDescription: "Language options, cultural awareness, regional support",
+    defaultWeight: 2,
   },
   {
-    id: "mutual-aid",
-    icon: "🤝",
-    name: "Community Health",
-    description: "Vendor supports mutual aid, fair labor, cooperative values",
+    id: "usability",
+    name: "User Experience",
+    description:
+      "Intuitive interface, minimal learning curve, daily efficiency",
+    rubricDescription:
+      "Onboarding time, user satisfaction, workflow integration",
+    defaultWeight: 3,
   },
 ];
 
@@ -933,92 +781,66 @@ const timelineOptions = [
   { value: "exploring", label: "Just Exploring" },
 ];
 
-const weightOptions = [
-  {
-    id: "privacy",
-    name: "Privacy & Data Control",
-    description:
-      "How much the vendor respects data sovereignty and minimization",
-    rubricDescription: "Data collection practices, encryption, user consent",
-  },
-  {
-    id: "accessibility",
-    name: "Accessibility",
-    description: "WCAG compliance and inclusive design practices",
-    rubricDescription: "Screen readers, keyboard nav, WCAG compliance",
-  },
-  {
-    id: "interop",
-    name: "Interoperability & Export",
-    description: "API access, webhooks, standard formats, data export",
-    rubricDescription: "APIs, webhooks, standard formats, integrations",
-  },
-  {
-    id: "lockin",
-    name: "Lock-in Risk",
-    description: "How hard it would be to migrate away (higher = riskier)",
-    rubricDescription:
-      "Migration difficulty, proprietary formats, switching costs",
-  },
-  {
-    id: "opensource",
-    name: "Community & Open Source",
-    description: "FOSS preference, community governance, transparency",
-    rubricDescription: "FOSS status, community governance, transparency",
-  },
-  {
-    id: "cost",
-    name: "Total Cost of Ownership",
-    description: "Including licenses, hosting, maintenance, training",
-    rubricDescription: "Licenses, hosting, training, ongoing maintenance",
-  },
-  {
-    id: "sustainability",
-    name: "Sustainability",
-    description: "Environmental impact, green hosting, efficiency",
-    rubricDescription: "Carbon footprint, green hosting, efficiency",
-  },
-  {
-    id: "localization",
-    name: "Localization & Support",
-    description: "Multi-language, timezone support, cultural awareness",
-    rubricDescription: "Multi-language, timezones, cultural awareness",
-  },
-  {
-    id: "usability",
-    name: "Usability",
-    description: "User experience, learning curve, day-to-day efficiency",
-    rubricDescription: "Learning curve, daily efficiency, user satisfaction",
-  },
-];
-
 // Computed
 const sortedWeights = computed(() => {
-  return weightOptions
-    .filter((w) => weights.value[w.id] > 0)
-    .sort((a, b) => weights.value[b.id] - weights.value[a.id]);
+  return principles
+    .filter((p) => principleWeights.value[p.id] > 0)
+    .sort(
+      (a, b) => principleWeights.value[b.id] - principleWeights.value[a.id]
+    );
 });
 
 const canGenerateCharter = computed(() => {
-  // Must have at least one principle selected to generate charter
-  return selectedPrinciples.value.length > 0;
+  // At least one principle must have weight > 0
+  return Object.values(principleWeights.value).some((w) => w > 0);
 });
 
+const selectedPrincipleCount = computed(() => {
+  return Object.values(principleWeights.value).filter((w) => w > 0).length;
+});
+
+// Export data for the ExportOptions component
+const exportData = computed(() => ({
+  charterPurpose: charterPurpose.value,
+  principleWeights: principleWeights.value,
+  nonNegotiables: nonNegotiables.value,
+  constraints: constraints.value,
+  principles: principles.filter(p => principleWeights.value[p.id] > 0),
+  sortedWeights: sortedWeights.value,
+  summary: {
+    selectedPrincipleCount: selectedPrincipleCount.value,
+    nonNegotiableCount: nonNegotiables.value.length,
+    canGenerateCharter: canGenerateCharter.value
+  },
+  exportedAt: new Date().toISOString(),
+  section: "tech-charter"
+}));
+
 // Methods
-const togglePrincipleSelection = (principleId) => {
-  const idx = selectedPrinciples.value.indexOf(principleId);
-  if (idx === -1) {
-    selectedPrinciples.value.push(principleId);
-  } 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 setPrincipleWeight = (principleId, weight) => {
+  principleWeights.value[principleId] = weight;
+
+  // If setting to 0, remove from non-negotiables
+  if (weight === 0) {
+    const idx = nonNegotiables.value.indexOf(principleId);
+    if (idx !== -1) {
+      nonNegotiables.value.splice(idx, 1);
     }
   }
 };
 
+const getWeightLabel = (weight) => {
+  const labels = {
+    0: "Excluded",
+    1: "Low",
+    2: "Medium-Low",
+    3: "Medium",
+    4: "High",
+    5: "Critical",
+  };
+  return labels[weight] || "";
+};
+
 const toggleNonNegotiable = (principleId) => {
   const idx = nonNegotiables.value.indexOf(principleId);
   if (idx === -1) {
@@ -1039,7 +861,12 @@ const toggleIntegration = (integration) => {
 
 const resetForm = () => {
   if (confirm("Are you sure you want to clear all form data and start over?")) {
-    selectedPrinciples.value = [];
+    charterPurpose.value =
+      "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.";
+    // Reset all principle weights to 0
+    principles.forEach((p) => {
+      principleWeights.value[p.id] = 0;
+    });
     nonNegotiables.value = [];
     constraints.value = {
       sso: "optional",
@@ -1048,18 +875,6 @@ const resetForm = () => {
       support: "business",
       timeline: "quarter",
     };
-    weights.value = {
-      privacy: 4,
-      accessibility: 5,
-      interop: 3,
-      lockin: 4,
-      opensource: 3,
-      cost: 4,
-      sustainability: 2,
-      localization: 2,
-      usability: 3,
-    };
-    charterGenerated.value = false;
     localStorage.removeItem("tech-charter-data");
   }
 };
@@ -1070,17 +885,6 @@ const scrollToTop = () => {
     .scrollIntoView({ behavior: "smooth" });
 };
 
-const generateCharter = () => {
-  if (canGenerateCharter.value) {
-    charterGenerated.value = true;
-    autoSave(); // Save the completed form
-    setTimeout(() => {
-      document
-        .querySelector("#charter-title")
-        .scrollIntoView({ behavior: "smooth" });
-    }, 100);
-  }
-};
 
 // Load saved data
 const loadSavedData = () => {
@@ -1088,10 +892,12 @@ const loadSavedData = () => {
   if (saved) {
     try {
       const parsedData = JSON.parse(saved);
-      selectedPrinciples.value = parsedData.selectedPrinciples || [];
+      if (parsedData.charterPurpose !== undefined) {
+        charterPurpose.value = parsedData.charterPurpose;
+      }
+      principleWeights.value = parsedData.principleWeights || {};
       nonNegotiables.value = parsedData.nonNegotiables || [];
       constraints.value = { ...constraints.value, ...parsedData.constraints };
-      weights.value = { ...weights.value, ...parsedData.weights };
     } catch (error) {
       console.error("Error loading saved data:", error);
     }
@@ -1101,216 +907,33 @@ const loadSavedData = () => {
 // Auto-save data
 const autoSave = () => {
   const data = {
-    selectedPrinciples: selectedPrinciples.value,
+    charterPurpose: charterPurpose.value,
+    principleWeights: principleWeights.value,
     nonNegotiables: nonNegotiables.value,
     constraints: constraints.value,
-    weights: weights.value,
     lastUpdated: new Date().toISOString(),
   };
   localStorage.setItem("tech-charter-data", JSON.stringify(data));
 };
 
-// Export functions
-
-const exportText = () => {
-  const content = extractTextContent();
-  downloadFile(content, "tech_charter.txt", "text/plain");
-};
-
-const exportMarkdown = () => {
-  const content = convertToMarkdown();
-  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",
-    month: "long",
-    day: "numeric",
-  });
-
-  let content = `TECHNOLOGY CHARTER\n==================\n\nGenerated ${today}\n\n`;
-
-  content += `PURPOSE\n-------\n\nThis 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.\n\n`;
-
-  if (
-    selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
-      .length > 0
-  ) {
-    content += `CORE PRINCIPLES\n---------------\n\n`;
-    selectedPrinciples.value
-      .filter((p) => !nonNegotiables.value.includes(p))
-      .forEach((pId) => {
-        const principle = principles.find((p) => p.id === pId);
-        if (principle) {
-          content += `• ${principle.name}\n`;
-        }
-      });
-    content += "\n";
-  }
-
-  if (nonNegotiables.value.length > 0) {
-    content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
-    nonNegotiables.value.forEach((pId) => {
-      const principle = principles.find((p) => p.id === pId);
-      if (principle) {
-        content += `• ${principle.name}\n`;
-      }
-    });
-    content += "\n";
-  }
-
-  content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
-  content += `• Authentication: ${
-    authOptions.find((o) => o.value === constraints.value.sso)?.label
-  }\n`;
-  content += `• Hosting: ${
-    hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
-  }\n`;
-  if (constraints.value.integrations.length > 0) {
-    content += `• Required Integrations: ${constraints.value.integrations.join(
-      ", "
-    )}\n`;
-  }
-  content += `• Support Level: ${
-    supportOptions.find((o) => o.value === constraints.value.support)?.label
-  }\n`;
-  content += `• Migration Timeline: ${
-    timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
-  }\n\n`;
-
-  content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
-  sortedWeights.value.forEach((weight) => {
-    content += `${weight.name} (Weight: ${weights.value[weight.id]})\n${
-      weight.rubricDescription
-    }\n\n`;
-  });
-
-  return content;
-};
-
-const convertToMarkdown = () => {
-  const today = new Date().toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-
-  let content = `# Technology Charter\n\n*Generated ${today}*\n\n`;
-
-  content += `## Purpose\n\nThis 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.\n\n`;
-
-  if (
-    selectedPrinciples.value.filter((p) => !nonNegotiables.value.includes(p))
-      .length > 0
-  ) {
-    content += `## Core Principles\n\n`;
-    selectedPrinciples.value
-      .filter((p) => !nonNegotiables.value.includes(p))
-      .forEach((pId) => {
-        const principle = principles.find((p) => p.id === pId);
-        if (principle) {
-          content += `- ${principle.name}\n`;
-        }
-      });
-    content += "\n";
-  }
-
-  if (nonNegotiables.value.length > 0) {
-    content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
-    nonNegotiables.value.forEach((pId) => {
-      const principle = principles.find((p) => p.id === pId);
-      if (principle) {
-        content += `- **${principle.name}**\n`;
-      }
-    });
-    content += "\n";
-  }
-
-  content += `## Technical Constraints\n\n`;
-  content += `- Authentication: ${
-    authOptions.find((o) => o.value === constraints.value.sso)?.label
-  }\n`;
-  content += `- Hosting: ${
-    hostingOptions.find((o) => o.value === constraints.value.hosting)?.label
-  }\n`;
-  if (constraints.value.integrations.length > 0) {
-    content += `- Required Integrations: ${constraints.value.integrations.join(
-      ", "
-    )}\n`;
-  }
-  content += `- Support Level: ${
-    supportOptions.find((o) => o.value === constraints.value.support)?.label
-  }\n`;
-  content += `- Migration Timeline: ${
-    timelineOptions.find((o) => o.value === constraints.value.timeline)?.label
-  }\n\n`;
-
-  content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
-  content += `| Criterion | Description | Weight |\n`;
-  content += `|-----------|-------------|--------|\n`;
-  sortedWeights.value.forEach((weight) => {
-    content += `| ${weight.name} | ${weight.rubricDescription} | ${
-      weights.value[weight.id]
-    } |\n`;
-  });
-
-  return content;
-};
-
-const downloadFile = (content, filename, type) => {
-  const blob = new Blob([content], { type });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  a.click();
-  URL.revokeObjectURL(url);
-};
 
 // Load data on mount
 onMounted(() => {
+  // Initialize all principle weights to 0
+  principles.forEach((p) => {
+    principleWeights.value[p.id] = 0;
+  });
   loadSavedData();
 });
 
 // Auto-save when data changes
-watch([selectedPrinciples, nonNegotiables, constraints, weights], autoSave, {
-  deep: true,
-});
+watch(
+  [charterPurpose, principleWeights, nonNegotiables, constraints],
+  autoSave,
+  {
+    deep: true,
+  }
+);
 </script>
 
 <style scoped>
@@ -1665,30 +1288,6 @@ html.dark .export-title {
   animation: fadeIn 0.5s ease-out;
 }
 
-/* Bitmap aesthetic overrides - remove all rounded corners */
-* {
-  border-radius: 0 !important;
-  font-family: "Ubuntu", monospace !important;
-}
-
-/* Form fields with bitmap styling */
-input,
-textarea,
-select {
-  border: 1px solid black !important;
-  background: white !important;
-  color: black !important;
-  font-family: "Ubuntu Mono", monospace !important;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid black !important;
-  outline-offset: -2px !important;
-  background: white !important;
-}
-
 /* Dark mode form fields */
 html.dark input,
 html.dark textarea,
diff --git a/pages/wizards.vue b/pages/wizards.vue
index f746431..069335c 100644
--- a/pages/wizards.vue
+++ b/pages/wizards.vue
@@ -112,8 +112,7 @@
                   EXPORT OPTIONS
                 </h3>
                 <p class="text-sm text-neutral-700 dark:text-neutral-200">
-                  Download as PDF (print), plain text, Markdown, or Word
-                  document.
+                  Download as PDF, plain text, Markdown.
                 </p>
               </div>
               <div>