diff --git a/assets/css/main.css b/assets/css/main.css
index 08a5c19..0575114 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,10 +3,12 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+/* Ubuntu font import */
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
+
 [data-theme="dark"] {
   html { @apply bg-white text-neutral-900; }
   html.dark { @apply bg-neutral-950 text-neutral-100; }
-  
 }
 
 /* Disable all animations, transitions, and smooth scrolling app-wide */
@@ -22,12 +24,347 @@ body {
   transition: none !important;
 }
 
-.document-page {
-  @apply max-w-4xl mx-auto  relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
+/* =========================
+   TEMPLATE DOCUMENT LAYOUT
+   ========================= */
+
+/* Template wrapper and document styling */
+.template-wrapper {
+  @apply min-h-screen relative;
+  
 }
 
 
-/* Bitmap aesthetic overrides - remove all rounded corners */
+.document-page {
+  @apply max-w-full mx-auto relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
+
+}
+
+
+
+/* =========================
+   SECTION STYLING
+   ========================= */
+
+.section-card {
+  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
+}
+
+.section-card::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: -4px;
+  bottom: -4px;
+  background: black;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 2px 2px;
+  z-index: -1;
+}
+
+.section-title {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: inherit;
+  margin: 0 0 1rem 0;
+}
+
+.subsection-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  margin: 0 0 0.75rem 0;
+  text-decoration: none;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 0.25rem;
+}
+
+/* =========================
+   FORM STYLING
+   ========================= */
+
+.form-group-large {
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
+
+.form-group-large > * {
+  width: 100%;
+}
+
+/* Ensure consistent alignment for all form fields */
+.form-group-large :deep(textarea),
+.form-group-large :deep(input),
+.form-group-large :deep(select),
+.form-group-large :deep(.ui-select),
+.form-group-large :deep(.ui-input),
+.form-group-large :deep(.ui-textarea) {
+  margin-left: 0 !important;
+  padding-left: 0.75rem !important;
+}
+
+/* Additional targeting for UInput, USelect, UTextarea components */
+.form-group-large :deep(.u-input),
+.form-group-large :deep(.u-select),
+.form-group-large :deep(.u-textarea),
+.form-group-large :deep([data-headlessui-state]),
+.form-group-large :deep(.relative) {
+  margin-left: 0 !important;
+}
+
+.form-group-large :deep(.u-input input),
+.form-group-large :deep(.u-select select),
+.form-group-large :deep(.u-textarea textarea) {
+  margin-left: 0 !important;
+  padding-left: 0.75rem !important;
+}
+
+.form-group-large .large-field {
+  @apply block w-full mt-2 text-lg rounded-md border-none transition-colors duration-150 ease-in-out;
+}
+
+.form-group-large .large-field:focus {
+  background: #f3f4f6;
+  box-shadow: none;
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+
+.inline-field {
+  display: inline-block;
+  margin: 0 0.25rem;
+  min-width: 120px;
+  border: none;
+  background: #f9fafb;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.inline-field:focus {
+  background: #f3f4f6;
+  outline: 1px solid #3b82f6;
+  outline-offset: -1px;
+}
+
+.number-field {
+  min-width: 80px !important;
+  text-align: center;
+}
+
+.wide-field {
+  min-width: 250px !important;
+}
+
+.form-group-block .block-field {
+  display: block;
+  width: 100%;
+  margin-top: 0.25rem;
+  border: none;
+  background: #f9fafb;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.form-group-block .block-field:focus {
+  background: #f3f4f6;
+  outline: 1px solid #3b82f6;
+  outline-offset: -1px;
+}
+
+/* =========================
+   CONTENT STYLING
+   ========================= */
+
+.content-paragraph {
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+  text-align: left;
+}
+
+.content-list {
+  margin: 0.5rem 0;
+  padding-left: 1.5rem;
+}
+
+.content-list li {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+  display: list-item;
+  list-style-position: outside;
+}
+
+.content-list.numbered {
+  list-style-type: decimal;
+  counter-reset: list-counter;
+}
+
+.content-list.numbered li {
+  list-style-type: decimal;
+  display: list-item;
+}
+
+.content-list:not(.numbered) {
+  list-style-type: disc;
+}
+
+.content-list:not(.numbered) li {
+  list-style-type: disc;
+  display: list-item;
+}
+
+/* Ensure bullets are visible even with flex items */
+.content-list li.flex {
+  display: list-item;
+}
+
+.content-list li .flex {
+  display: flex;
+  width: 100%;
+}
+
+/* Fix flex list items to show bullets */
+.content-list li[class*="flex"] {
+  display: list-item !important;
+  list-style-position: outside !important;
+}
+
+/* Ensure numbered lists show numbers even with flex */
+.content-list.numbered li[class*="flex"] {
+  list-style-type: decimal !important;
+}
+
+/* Ensure bullet lists show bullets even with flex */
+.content-list:not(.numbered) li[class*="flex"] {
+  list-style-type: disc !important;
+}
+
+/* =========================
+   CHECKBOX AND VALUES GRID
+   ========================= */
+
+.checkbox-item {
+  @apply flex;
+}
+
+.checkbox-group {
+  @apply flex flex-col space-y-3;
+}
+
+.values-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin-top: 10px;
+}
+
+/* =========================
+   DITHERED SHADOW EFFECTS
+   ========================= */
+
+.dither-shadow {
+  background: black;
+  background-image: radial-gradient(white 1px, transparent 1px);
+  background-size: 2px 2px;
+}
+
+html.dark .dither-shadow {
+  background: white;
+  background-image: radial-gradient(black 1px, transparent 1px);
+}
+
+/* =========================
+   BUTTON STYLING
+   ========================= */
+
+.export-btn {
+  @apply bg-white border border-black text-black font-mono uppercase font-normal tracking-wide;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  text-decoration: none;
+  min-width: fit-content;
+}
+
+.export-btn:hover {
+  @apply bg-black text-white -translate-x-px -translate-y-px;
+}
+
+.export-btn.primary {
+  @apply bg-black text-white;
+}
+
+.export-btn.primary:hover {
+  @apply bg-black -translate-x-px -translate-y-px;
+}
+
+.export-btn svg {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.export-btn.large svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Dark mode export buttons */
+html.dark .export-btn {
+  @apply bg-neutral-950 border-white text-white;
+}
+
+html.dark .export-btn:hover {
+  @apply bg-white text-black;
+}
+
+html.dark .export-btn.primary {
+  @apply bg-white text-black;
+}
+
+html.dark .export-btn.primary:hover {
+  @apply bg-white text-black;
+}
+
+/* General buttons with bitmap styling */
+button:not(.export-btn) {
+  background: white !important;
+  border: 1px solid black !important;
+  color: black !important;
+  font-family: "Ubuntu Mono", monospace !important;
+  text-transform: uppercase !important;
+  font-weight: bold !important;
+  letter-spacing: 0.5px !important;
+  cursor: pointer !important;
+}
+
+button:not(.export-btn):hover {
+  background: black !important;
+  color: white !important;
+  transform: translateY(-1px) translateX(-1px) !important;
+}
+
+/* Dark mode buttons */
+html.dark button:not(.export-btn) {
+  background: #0a0a0a !important;
+  border: 1px solid white !important;
+  color: white !important;
+}
+
+html.dark button:not(.export-btn):hover {
+  background: white !important;
+  color: black !important;
+}
+
+/* =========================
+   BITMAP AESTHETIC OVERRIDES
+   ========================= */
+
+/* Remove all rounded corners */
 * {
   border-radius: 0 !important;
   font-family: "Ubuntu", monospace !important;
@@ -37,6 +374,188 @@ body {
 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;
+}
+
+/* Checkbox and radio button styling */
+input[type="checkbox"],
+input[type="radio"] {
+  border: 2px solid black !important;
+  background: white !important;
+}
+
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  background: black !important;
+  color: white !important;
+}
+
+html.dark input[type="checkbox"],
+html.dark input[type="radio"] {
+  border: 2px solid white !important;
+  background: #0a0a0a !important;
+}
+
+html.dark input[type="checkbox"]:checked,
+html.dark input[type="radio"]:checked {
+  background: white !important;
+  color: black !important;
+}
+
+/* Document titles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Ubuntu", monospace !important;
+  color: inherit !important;
+}
+
+/* All text */
+p,
+span,
+div {
+  color: inherit !important;
+  font-family: "Ubuntu", monospace !important;
+}
+
+/* =========================
+   HIDE ELEMENTS FROM PRINT
+   ========================= */
+
+.no-print,
+.no-pdf {
+  display: block;
+}
+
+/* =========================
+   PRINT STYLES
+   ========================= */
+
+@media print {
+  .no-print,
+  .no-pdf {
+    display: none !important;
+  }
+
+  .template-wrapper {
+    background: white !important;
+    padding: 0 !important;
+    min-height: auto !important;
+  }
+
+  .document-page {
+    max-width: none !important;
+    width: 100% !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+  }
+
+  .document-page::before {
+    content: "";
+    display: block;
+    height: 0.5in;
+  }
+
+  .section-title {
+    font-size: 14pt;
+    page-break-after: avoid;
+  }
+
+  .section-card {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    box-shadow: none;
+  }
+
+  .checkbox-item {
+    font-size: 10pt;
+    margin: 2pt 0;
+  }
+
+  .inline-field,
+  .large-field,
+  .block-field {
+    background: none !important;
+    border: none !important;
+    border-bottom: 1pt solid #000 !important;
+    padding: 2pt !important;
+  }
+
+  .signature-space {
+    border: 1px solid #000;
+    background: none;
+    min-height: 3rem;
+    padding: 1rem;
+  }
+}
+
+/* =========================
+   MOBILE RESPONSIVENESS
+   ========================= */
+
+@media (max-width: 768px) {
+  .template-wrapper {
+    padding: 1rem;
+  }
+
+  .values-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .export-content {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  /* Make principle cards full width on mobile */
+  .principle-grid {
+    grid-template-columns: 1fr;
+  }
+
+  /* Stack constraint buttons vertically on mobile */
+  .constraint-buttons {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .constraint-buttons button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
diff --git a/components/ExportOptions.vue b/components/ExportOptions.vue
index c2e83b4..b4860e9 100644
--- a/components/ExportOptions.vue
+++ b/components/ExportOptions.vue
@@ -4,32 +4,31 @@
       <div class="export-section">
         <h3 class="export-title">Export Options:</h3>
         <div class="export-buttons">
-          <button 
-            @click="copyToClipboard" 
+          <button
+            @click="copyToClipboard"
             class="export-btn"
             :disabled="isProcessing"
-            ref="copyButton">
+            ref="copyButton"
+          >
             <UIcon name="i-heroicons-clipboard" />
             <span>Copy as Text</span>
-            <UIcon 
-              v-if="showCopySuccess" 
-              name="i-heroicons-check" 
-              class="success-icon" />
+            <UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
           </button>
-          
-          <button 
-            @click="downloadAsMarkdown" 
+
+          <button
+            @click="downloadAsMarkdown"
             class="export-btn"
             :disabled="isProcessing"
-            ref="downloadButton">
+            ref="downloadButton"
+          >
             <UIcon name="i-heroicons-arrow-down-tray" />
             <span>Download Markdown</span>
-            <UIcon 
-              v-if="showDownloadSuccess" 
-              name="i-heroicons-check" 
-              class="success-icon" />
+            <UIcon
+              v-if="showDownloadSuccess"
+              name="i-heroicons-check"
+              class="success-icon"
+            />
           </button>
-          
         </div>
       </div>
     </div>
@@ -45,9 +44,9 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  filename: 'export',
-  title: 'Export Data',
-  containerClass: 'centered'
+  filename: "export",
+  title: "Export Data",
+  containerClass: "centered",
 });
 
 const isProcessing = ref(false);
@@ -58,53 +57,56 @@ const copyButton = ref<HTMLButtonElement>();
 const downloadButton = ref<HTMLButtonElement>();
 
 // Success feedback animation
-const showSuccessFeedback = (buttonRef: Ref<HTMLButtonElement | undefined>, successRef: Ref<boolean>) => {
+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');
-  
+  button.classList.add("success-state");
+
   setTimeout(() => {
     successRef.value = false;
-    button.classList.remove('success-state');
+    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');
+      const textarea = document.createElement("textarea");
       textarea.value = textContent;
-      textarea.style.position = 'fixed';
-      textarea.style.opacity = '0';
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
       document.body.appendChild(textarea);
       textarea.focus();
       textarea.select();
-      
-      const successful = document.execCommand('copy');
+
+      const successful = document.execCommand("copy");
       document.body.removeChild(textarea);
-      
+
       if (!successful) {
-        throw new Error('execCommand copy failed');
+        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.');
+    console.error("Copy failed:", error);
+    alert("Copy failed. Please try again or use the download option.");
   } finally {
     isProcessing.value = false;
   }
@@ -112,71 +114,74 @@ const copyToClipboard = async () => {
 
 const downloadAsMarkdown = () => {
   if (isProcessing.value) return;
-  
+
   isProcessing.value = true;
-  
+
   try {
     const content = convertToMarkdown();
-    downloadFile(content, `${props.filename}.md`, 'text/markdown');
+    downloadFile(content, `${props.filename}.md`, "text/markdown");
     showSuccessFeedback(downloadButton, showDownloadSuccess);
   } catch (error) {
-    console.error('Markdown download failed:', error);
-    alert('Download failed. Please try again.');
+    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'
+  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`;
-  
+  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'
+  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') {
+  if (data.section === "tech-charter") {
     return formatTechCharterAsText(data);
-  } else if (data.section === 'membership-agreement') {
+  } else if (data.section === "membership-agreement") {
     return formatMembershipAgreementAsText(data);
-  } else if (data.section === 'conflict-resolution-framework') {
+  } else if (data.section === "conflict-resolution-framework") {
     return formatConflictResolutionAsText(data);
-  } else if (data.section === 'decision-framework') {
+  } 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 data
+      .map((item, index) => `${index + 1}. ${formatObjectAsText(item)}`)
+      .join("\n");
+  } else if (typeof data === "object" && data !== null) {
     return formatObjectAsText(data);
   }
   return String(data);
@@ -184,19 +189,21 @@ const formatDataAsText = (data: any): string => {
 
 const formatDataAsMarkdown = (data: any): string => {
   // Special handling for different template types
-  if (data.section === 'tech-charter') {
+  if (data.section === "tech-charter") {
     return formatTechCharterAsMarkdown(data);
-  } else if (data.section === 'membership-agreement') {
+  } else if (data.section === "membership-agreement") {
     return formatMembershipAgreementAsMarkdown(data);
-  } else if (data.section === 'conflict-resolution-framework') {
+  } else if (data.section === "conflict-resolution-framework") {
     return formatConflictResolutionAsMarkdown(data);
-  } else if (data.section === 'decision-framework') {
+  } 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 data
+      .map((item, index) => `${index + 1}. ${formatObjectAsMarkdown(item)}`)
+      .join("\n\n");
+  } else if (typeof data === "object" && data !== null) {
     return formatObjectAsMarkdown(data);
   }
   return String(data);
@@ -208,7 +215,7 @@ const formatTechCharterAsText = (data: any): string => {
   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
@@ -245,7 +252,9 @@ const formatTechCharterAsText = (data: any): string => {
   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`;
+      content += `${principle.name} (Weight: ${data.principleWeights[principle.id]})\n${
+        principle.rubricDescription
+      }\n\n`;
     });
   }
 
@@ -258,7 +267,7 @@ const formatTechCharterAsMarkdown = (data: any): string => {
   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
@@ -297,7 +306,9 @@ const formatTechCharterAsMarkdown = (data: any): string => {
     content += `| Criterion | Description | Weight |\n`;
     content += `|-----------|-------------|--------|\n`;
     data.sortedWeights.forEach((principle: any) => {
-      content += `| ${principle.name} | ${principle.rubricDescription} | ${data.principleWeights[principle.id]} |\n`;
+      content += `| ${principle.name} | ${principle.rubricDescription} | ${
+        data.principleWeights[principle.id]
+      } |\n`;
     });
   }
 
@@ -305,75 +316,79 @@ const formatTechCharterAsMarkdown = (data: any): string => {
 };
 
 const formatObjectAsText = (obj: any): string => {
-  if (!obj || typeof obj !== 'object') return String(obj);
-  
+  if (!obj || typeof obj !== "object") return String(obj);
+
   return Object.entries(obj)
-    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .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') {
+      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');
+    .join("\n");
 };
 
 const formatObjectAsMarkdown = (obj: any): string => {
-  if (!obj || typeof obj !== 'object') return String(obj);
-  
+  if (!obj || typeof obj !== "object") return String(obj);
+
   return Object.entries(obj)
-    .filter(([key, value]) => value !== null && value !== undefined && key !== 'id')
+    .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') {
+      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');
+    .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`;
-  
+  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`;
-  
+  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;
 };
 
@@ -383,33 +398,35 @@ const formatConflictResolutionAsText = (data: any): string => {
   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';
+    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';
+    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());
+        const formattedKey = key
+          .replace(/([A-Z])/g, " $1")
+          .replace(/^./, (str) => str.toUpperCase());
         content += `${formattedKey}: ${value}\n`;
       }
     });
   }
-  
+
   return content;
 };
 
@@ -418,40 +435,42 @@ const formatConflictResolutionAsMarkdown = (data: any): string => {
   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';
+    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';
+    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());
+        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`;
@@ -462,37 +481,37 @@ const formatDecisionFrameworkAsText = (data: any): string => {
     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';
+      content += "\n";
     }
-    
+
     if (framework.tips) {
       content += `PRO TIPS\n--------\n`;
       framework.tips.forEach((tip: string, index: number) => {
         content += `${index + 1}. ${tip}\n`;
       });
-      content += '\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`;
@@ -503,38 +522,38 @@ const formatDecisionFrameworkAsMarkdown = (data: any): string => {
     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';
+      content += "\n";
     }
-    
+
     if (framework.tips) {
       content += `#### Pro Tips\n\n`;
       framework.tips.forEach((tip: string, index: number) => {
         content += `${index + 1}. ${tip}\n`;
       });
-      content += '\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');
+  const a = document.createElement("a");
   a.href = url;
   a.download = filename;
   document.body.appendChild(a);
@@ -545,31 +564,7 @@ const downloadFile = (content: string, filename: string, type: string) => {
 </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;
-}
-
+@reference "tailwindcss";
 .export-content {
   display: flex;
   flex-wrap: wrap;
@@ -592,31 +587,8 @@ const downloadFile = (content: string, filename: string, type: string) => {
   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;
+  @apply bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white;
 }
 
 .export-btn:hover:not(:disabled) {
@@ -667,52 +639,25 @@ const downloadFile = (content: string, filename: string, type: string) => {
     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
+</style>
diff --git a/pages/templates/conflict-resolution-framework.vue b/pages/templates/conflict-resolution-framework.vue
index 00bc782..450dc98 100644
--- a/pages/templates/conflict-resolution-framework.vue
+++ b/pages/templates/conflict-resolution-framework.vue
@@ -4,13 +4,12 @@
     <WizardSubnav />
 
     <!-- Export Options - Top -->
-    <div class="flex justify-center py-6">
-      <ExportOptions
-        :export-data="exportData"
-        filename="conflict-resolution-framework"
-        title="Conflict Resolution Framework"
-      />
-    </div>
+
+    <ExportOptions
+      :export-data="exportData"
+      filename="conflict-resolution-framework"
+      title="Conflict Resolution Framework"
+    />
 
     <div
       class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
@@ -822,13 +821,11 @@
     </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>
 
@@ -1392,57 +1389,9 @@ const exportData = computed(() => ({
 </script>
 
 <style scoped>
-/* Ubuntu font import */
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
 @reference "tailwindcss";
 
-/* Template wrapper and document styling */
-/* rely on Tailwind bg utilities applied on wrapper */
-.template-wrapper {
-  min-height: 100vh;
-  padding: 2rem;
-  font-family: "Ubuntu", monospace;
-  position: relative;
-}
-.template-wrapper::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  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;
-  opacity: 0.1;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.document-page::before {
-  content: "";
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  right: -4px;
-  bottom: -4px;
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  z-index: -1;
-}
-.document-page::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid black;
-  z-index: 1;
-  pointer-events: none;
-}
+/* Template-specific styles that aren't in main.css */
 
 /* Progress bar */
 .progress-bar {
@@ -1461,30 +1410,6 @@ const exportData = computed(() => ({
   transition: width 0.3s ease;
 }
 
-/* Document header */
-.document-header {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.document-title {
-  font-size: 2.25rem;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-
-  margin: 0 0 0.5rem;
-  padding: 1rem 0;
-  border-top: 2px solid #111827;
-  border-bottom: 2px solid #111827;
-}
-
-.subtitle {
-  color: #666;
-  font-size: 1.1rem;
-  margin: 0;
-}
-
 /* Quick start section */
 .quick-start {
   background: #f0f7ff;
@@ -1528,11 +1453,6 @@ const exportData = computed(() => ({
   color: white;
 }
 
-/* Section styling */
-.section-card {
-  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
-}
-
 /* Styling for sections when toggled off */
 .section-card:has(.space-y-6[style*="display: none"]) {
   opacity: 0.7;
@@ -1542,17 +1462,6 @@ const exportData = computed(() => ({
   color: #666;
 }
 
-.section-header {
-  /* presentational container only */
-}
-
-.section-title {
-  font-size: 1.75rem;
-  font-weight: 800;
-  color: inherit;
-  margin: 0 0 1rem 0;
-}
-
 /* Toggle styling */
 .toggle-section {
   display: flex;
@@ -1589,84 +1498,6 @@ const exportData = computed(() => ({
   transform: translateX(24px);
 }
 
-/* Form styling */
-.form-group-large {
-  margin-bottom: 1.5rem;
-}
-
-/* Ensure form field containers are also full-width */
-.form-group-large {
-  width: 100%;
-}
-
-.form-group-large > * {
-  width: 100%;
-}
-
-/* Ensure consistent alignment for all form fields */
-.form-group-large :deep(textarea),
-.form-group-large :deep(input),
-.form-group-large :deep(select),
-.form-group-large :deep(.ui-select),
-.form-group-large :deep(.ui-input),
-.form-group-large :deep(.ui-textarea) {
-  margin-left: 0 !important;
-  padding-left: 0.75rem !important;
-}
-
-/* Additional targeting for UInput, USelect, UTextarea components */
-.form-group-large :deep(.u-input),
-.form-group-large :deep(.u-select),
-.form-group-large :deep(.u-textarea),
-.form-group-large :deep([data-headlessui-state]),
-.form-group-large :deep(.relative) {
-  margin-left: 0 !important;
-}
-
-.form-group-large :deep(.u-input input),
-.form-group-large :deep(.u-select select),
-.form-group-large :deep(.u-textarea textarea) {
-  margin-left: 0 !important;
-  padding-left: 0.75rem !important;
-}
-
-.help-text {
-  /* moved to inline classes */
-}
-
-.checkbox-group {
-  @apply flex flex-col space-y-3;
-}
-
-.checkbox-item {
-  @apply flex;
-}
-
-/* Approach radio styling removed - using pure Tailwind classes */
-
-.values-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0.75rem;
-  margin-top: 10px;
-}
-
-.inline-field {
-  display: inline-block;
-  margin: 0 0.25rem;
-  min-width: 120px;
-  border: none;
-  background: #f9fafb;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.content-paragraph {
-  margin-bottom: 0.75rem;
-  line-height: 1.6;
-  text-align: left;
-}
-
 /* Validation error styling */
 .validation-error {
   color: #ef4444;
@@ -1702,21 +1533,6 @@ const exportData = computed(() => ({
   background: #5856eb;
 }
 
-/* Bottom export controls */
-
-.export-buttons-bottom {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.export-btn.large svg {
-  width: 20px;
-  height: 20px;
-}
-
 .close-preview-btn {
   background: #ef4444;
   color: white;
@@ -1857,169 +1673,4 @@ html.dark .policy-preview code {
 .policy-preview em {
   font-style: italic;
 }
-
-/* Export controls */
-
-.export-btn {
-  /* retained for bitmap overrides below; core layout now via Tailwind */
-}
-
-/* Hide elements from print */
-.no-print,
-.no-pdf {
-  display: block;
-}
-
-/* Print styles */
-@media print {
-  .no-print,
-  .no-pdf {
-    display: none !important;
-  }
-
-  .template-wrapper {
-    background: white !important;
-    padding: 0 !important;
-  }
-
-  .document-page {
-    max-width: none !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-    padding: 0 !important;
-  }
-
-  .document-title {
-    font-size: 18pt;
-    background: none;
-    padding: 0.5rem 0;
-    border-width: 1px;
-  }
-
-  .section-title {
-    font-size: 14pt;
-    page-break-after: avoid;
-  }
-
-  .section-card {
-    break-inside: avoid;
-    margin-bottom: 1rem;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-  }
-
-  .checkbox-item {
-    font-size: 10pt;
-    margin: 2pt 0;
-  }
-
-  .inline-field {
-    background: none !important;
-    border: none !important;
-    border-bottom: 1pt solid #000 !important;
-    padding: 2pt !important;
-  }
-}
-
-/* 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;
-}
-
-.export-btn {
-  @apply bg-white border border-black text-black font-mono uppercase font-normal tracking-wide;
-}
-
-.export-btn:hover {
-  @apply bg-black text-white -translate-x-px -translate-y-px;
-}
-
-.export-btn.primary {
-  @apply bg-black text-white;
-}
-
-.export-btn.primary:hover {
-  @apply bg-black -translate-x-px -translate-y-px;
-}
-
-/* Remove any card styling roundness */
-.section-card,
-.form-group-large {
-  border-radius: 0 !important;
-}
-
-/* Document titles */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Ubuntu", monospace !important;
-  color: inherit !important;
-}
-
-/* All text */
-p,
-span,
-div {
-  color: inherit !important;
-  font-family: "Ubuntu", monospace !important;
-}
-
-/* Mobile responsiveness */
-@media (max-width: 768px) {
-  .template-wrapper {
-    padding: 1rem;
-  }
-
-  .preset-buttons {
-    flex-direction: column;
-  }
-
-  .values-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .export-content {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-}
 </style>
diff --git a/pages/templates/decision-framework.vue b/pages/templates/decision-framework.vue
index 5a0a9a3..ac16d47 100644
--- a/pages/templates/decision-framework.vue
+++ b/pages/templates/decision-framework.vue
@@ -4,34 +4,39 @@
     <WizardSubnav />
 
     <!-- Export Options at Top -->
-    <div class="flex justify-center py-6">
-      <ExportOptions
-        :export-data="exportData"
-        filename="decision-framework"
-        title="Decision Framework Helper" />
-    </div>
+    <ExportOptions
+      :export-data="exportData"
+      filename="decision-framework"
+      title="Decision Framework Helper"
+    />
 
     <div
       class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
-      style="font-family: 'Ubuntu', monospace">
+      style="font-family: 'Ubuntu', monospace"
+    >
       <!-- Spacer for consistency -->
       <div class="py-4"></div>
 
       <div class="max-w-4xl mx-auto relative px-4">
         <div
-          class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container">
+          class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container"
+        >
           <!-- Header -->
           <div
-            class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
+            class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section"
+          >
             <!-- Dithered shadow background -->
             <div
-              class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"></div>
+              class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"
+            ></div>
 
             <div
-              class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border-2 border-neutral-100 dark:border-neutral-900">
+              class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border-2 border-neutral-100 dark:border-neutral-900"
+            >
               <h1
                 class="text-3xl font-bold mb-2 uppercase"
-                style="font-family: 'Ubuntu', monospace">
+                style="font-family: 'Ubuntu', monospace"
+              >
                 Decision Framework Helper
               </h1>
               <p class="text-lg" style="font-family: 'Ubuntu', monospace">
@@ -41,24 +46,22 @@
               <!-- Progress Bar -->
               <div v-if="!showResult" class="mt-8">
                 <div class="flex justify-between items-center mb-2">
-                  <span
-                    class="text-sm"
-                    style="font-family: 'Ubuntu Mono', monospace"
+                  <span class="text-sm" style="font-family: 'Ubuntu Mono', monospace"
                     >Step {{ currentStep }} of {{ totalSteps }}</span
                   >
-                  <span
-                    class="text-sm"
-                    style="font-family: 'Ubuntu Mono', monospace"
+                  <span class="text-sm" style="font-family: 'Ubuntu Mono', monospace"
                     >{{ Math.round((currentStep / totalSteps) * 100) }}%</span
                   >
                 </div>
                 <div
-                  class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900">
+                  class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900"
+                >
                   <div
                     class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
                     :style="{
                       width: (currentStep / totalSteps) * 100 + '%',
-                    }"></div>
+                    }"
+                  ></div>
                 </div>
               </div>
             </div>
@@ -72,14 +75,15 @@
               <div v-if="currentStep === 1">
                 <div
                   class="font-semibold text-black dark:text-white mb-6 text-2xl"
-                  style="font-family: 'Ubuntu', monospace">
+                  style="font-family: 'Ubuntu', monospace"
+                >
                   How urgent is this decision?
                 </div>
                 <div
-                  class="bg-white dark:bg-neutral-950 p-8 border-2 border-neutral-900 dark:border-neutral-100 relative">
+                  class="bg-white dark:bg-neutral-950 p-8 border-2 border-neutral-900 dark:border-neutral-100 relative"
+                >
                   <!-- Dithered shadow background -->
-                  <div
-                    class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
+                  <div class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
 
                   <div class="relative">
                     <div class="flex justify-between mb-6 text-sm">
@@ -101,10 +105,12 @@
                         min="1"
                         max="5"
                         step="1"
-                        class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
+                        class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider"
+                      />
                       <div
                         class="flex justify-between mt-4 text-sm text-black dark:text-white"
-                        style="font-family: 'Ubuntu Mono', monospace">
+                        style="font-family: 'Ubuntu Mono', monospace"
+                      >
                         <span>1</span>
                         <span>2</span>
                         <span>3</span>
@@ -120,7 +126,8 @@
               <div v-if="currentStep === 2">
                 <div
                   class="font-semibold text-black mb-6 text-2xl"
-                  style="font-family: 'Ubuntu', monospace">
+                  style="font-family: 'Ubuntu', monospace"
+                >
                   Can we change our minds later?
                 </div>
                 <div class="grid gap-4">
@@ -133,7 +140,8 @@
                         ? 'border-violet-700 bg-violet-700 text-white'
                         : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('reversible', option.value)">
+                    @click="selectOption('reversible', option.value)"
+                  >
                     <div class="font-semibold mb-1">{{ option.title }}</div>
                     <div class="text-sm opacity-85">
                       {{ option.description }}
@@ -157,7 +165,8 @@
                         ? 'border-violet-700 bg-violet-700 text-white'
                         : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('expertise', option.value)">
+                    @click="selectOption('expertise', option.value)"
+                  >
                     <div class="font-semibold mb-1">{{ option.title }}</div>
                     <div class="text-sm opacity-85">
                       {{ option.description }}
@@ -181,7 +190,8 @@
                         ? 'border-violet-700 bg-violet-700 text-white'
                         : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('impact', option.value)">
+                    @click="selectOption('impact', option.value)"
+                  >
                     <div class="font-semibold mb-1">{{ option.title }}</div>
                     <div class="text-sm opacity-85">
                       {{ option.description }}
@@ -205,7 +215,8 @@
                         ? 'border-violet-700 bg-violet-700 text-white'
                         : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('options', option.value)">
+                    @click="selectOption('options', option.value)"
+                  >
                     <div class="font-semibold mb-1">{{ option.title }}</div>
                     <div class="text-sm opacity-85">
                       {{ option.description }}
@@ -229,7 +240,8 @@
                         ? 'border-violet-700 bg-violet-700 text-white'
                         : 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('investment', option.value)">
+                    @click="selectOption('investment', option.value)"
+                  >
                     <div class="font-semibold mb-1">{{ option.title }}</div>
                     <div class="text-sm opacity-85">
                       {{ option.description }}
@@ -253,7 +265,8 @@
                         ? 'bg-violet-700 text-white border-violet-700'
                         : 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
                     ]"
-                    @click="selectOption('teamSize', size)">
+                    @click="selectOption('teamSize', size)"
+                  >
                     {{ size }}
                   </button>
                 </div>
@@ -261,11 +274,13 @@
 
               <!-- Navigation -->
               <div
-                class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200">
+                class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200"
+              >
                 <button
                   v-if="currentStep > 1"
                   @click="previousStep"
-                  class="px-6 py-3 text-violet-700 border-2 border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
+                  class="px-6 py-3 text-violet-700 border-2 border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200"
+                >
                   ← Previous
                 </button>
                 <div v-else></div>
@@ -273,13 +288,15 @@
                 <button
                   v-if="canProceed && currentStep < totalSteps"
                   @click="nextStep"
-                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
+                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200"
+                >
                   Next →
                 </button>
                 <button
                   v-else-if="canProceed && currentStep === totalSteps"
                   @click="showRecommendation"
-                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
+                  class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200"
+                >
                   Get Recommendation
                 </button>
               </div>
@@ -289,7 +306,8 @@
             <div
               v-if="showResult"
               data-results
-              class="border-t-2 border-neutral-200 pt-12">
+              class="border-t-2 border-neutral-200 pt-12"
+            >
               <UCard class="bg-neutral-50">
                 <div class="mb-8">
                   <h2 class="text-2xl font-semibold text-violet-700 mb-2">
@@ -317,10 +335,9 @@
                         <li
                           v-for="step in result.steps"
                           :key="step"
-                          class="flex items-start">
-                          <span class="text-violet-700 font-bold mr-3 mt-1"
-                            >→</span
-                          >
+                          class="flex items-start"
+                        >
+                          <span class="text-violet-700 font-bold mr-3 mt-1">→</span>
                           <span class="text-neutral-700">{{ step }}</span>
                         </li>
                       </ul>
@@ -334,10 +351,9 @@
                         <li
                           v-for="tip in result.tips"
                           :key="tip"
-                          class="flex items-start">
-                          <span class="text-violet-700 font-bold mr-3 mt-1"
-                            >→</span
-                          >
+                          class="flex items-start"
+                        >
+                          <span class="text-violet-700 font-bold mr-3 mt-1">→</span>
                           <span class="text-neutral-700">{{ tip }}</span>
                         </li>
                       </ul>
@@ -351,7 +367,8 @@
                   variant="soft"
                   :title="'Watch out for:'"
                   :description="result.warning"
-                  class="mb-6" />
+                  class="mb-6"
+                />
 
                 <UAlert
                   v-if="result.success"
@@ -359,7 +376,8 @@
                   variant="soft"
                   :title="'Success looks like:'"
                   :description="result.success"
-                  class="mb-6" />
+                  class="mb-6"
+                />
 
                 <UCard v-if="result.alternatives" class="bg-neutral-50">
                   <h3 class="font-semibold text-neutral-900 mb-4 text-lg">
@@ -369,7 +387,8 @@
                     <UCard
                       v-for="alt in result.alternatives"
                       :key="alt.method"
-                      class="bg-white">
+                      class="bg-white"
+                    >
                       <span class="font-semibold">{{ alt.method }}:</span>
                       {{ alt.when }}
                     </UCard>
@@ -380,10 +399,7 @@
                   <UButton @click="resetForm" color="violet">
                     Try Another Decision
                   </UButton>
-                  <UButton
-                    @click="printResult"
-                    variant="outline"
-                    color="violet">
+                  <UButton @click="printResult" variant="outline" color="violet">
                     Print Recommendation
                   </UButton>
                 </div>
@@ -395,17 +411,16 @@
     </div>
 
     <!-- Export Options at Bottom -->
-    <div class="flex justify-center py-6">
       <ExportOptions
         :export-data="exportData"
         filename="decision-framework"
-        title="Decision Framework Helper" />
-    </div>
+        title="Decision Framework Helper"
+      />
   </div>
 </template>
 
 <script setup>
-import ExportOptions from '~/components/ExportOptions.vue'
+import ExportOptions from "~/components/ExportOptions.vue";
 
 const state = reactive({
   urgency: 3,
@@ -584,8 +599,7 @@ function determineFramework() {
         "Execute without delay",
         "Debrief when crisis passes",
       ],
-      warning:
-        "Only use in true emergencies. Follow up with team discussion afterward.",
+      warning: "Only use in true emergencies. Follow up with team discussion afterward.",
       success:
         "Crisis averted through quick action. Team understands why autocratic mode was necessary.",
     };
@@ -621,11 +635,7 @@ function determineFramework() {
   }
 
   // AVOIDANT - non-urgent + undefined + low investment
-  if (
-    state.urgency <= 2 &&
-    state.options === "undefined" &&
-    state.investment === "low"
-  ) {
+  if (state.urgency <= 2 && state.options === "undefined" && state.investment === "low") {
     return {
       method: "Strategic Delay",
       tagline: "Wait for clarity to emerge",
@@ -638,10 +648,8 @@ function determineFramework() {
         "Revisit when conditions change",
         "Document why you're waiting",
       ],
-      warning:
-        "Don't let avoidance become paralysis. Set a deadline for revisiting.",
-      success:
-        "By waiting, better options emerged or the decision became unnecessary.",
+      warning: "Don't let avoidance become paralysis. Set a deadline for revisiting.",
+      success: "By waiting, better options emerged or the decision became unnecessary.",
       alternatives: [
         {
           method: "Time-boxed exploration",
@@ -752,8 +760,7 @@ function determineFramework() {
         "Document all input received",
         "Explain how input influenced the decision",
       ],
-      success:
-        "Decision informed by diverse perspectives with clear accountability.",
+      success: "Decision informed by diverse perspectives with clear accountability.",
     };
   }
 
@@ -815,10 +822,7 @@ function determineFramework() {
   }
 
   // DEMOCRATIC VOTE - larger group, time pressure
-  if (
-    (state.teamSize === "6-8" || state.teamSize === "9+") &&
-    state.urgency >= 4
-  ) {
+  if ((state.teamSize === "6-8" || state.teamSize === "9+") && state.urgency >= 4) {
     return {
       method: "Democratic Vote",
       tagline: "Majority decides, move forward together",
@@ -838,8 +842,7 @@ function determineFramework() {
       ],
       warning:
         "Don't vote on everything! Reserve it for when other methods are too slow.",
-      success:
-        "Clear decision made efficiently with everyone having equal say.",
+      success: "Clear decision made efficiently with everyone having equal say.",
     };
   }
 
@@ -940,7 +943,7 @@ const exportData = computed(() => ({
     state: state,
     currentStep: currentStep.value,
     showResult: showResult.value,
-    result: result.value
+    result: result.value,
   },
   surveyResponses: {
     urgency: state.urgency,
@@ -949,19 +952,19 @@ const exportData = computed(() => ({
     impact: state.impact,
     options: state.options,
     investment: state.investment,
-    teamSize: state.teamSize
+    teamSize: state.teamSize,
   },
   recommendedFramework: result.value || null,
   metadata: {
     completedAt: showResult.value ? new Date().toISOString() : null,
     totalSteps: totalSteps,
-    progressPercentage: Math.round((currentStep.value / totalSteps) * 100)
+    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"
-}))
+  description: "Interactive wizard to find the right way to decide together",
+}));
 
 // Keyboard navigation
 onMounted(() => {
diff --git a/pages/templates/membership-agreement.vue b/pages/templates/membership-agreement.vue
index 875c3e3..1f13cb6 100644
--- a/pages/templates/membership-agreement.vue
+++ b/pages/templates/membership-agreement.vue
@@ -4,16 +4,15 @@
     <WizardSubnav />
 
     <!-- Export Options - Top -->
-    <div class="w-full flex justify-center mb-8">
-      <ExportOptions 
-        :export-data="exportData" 
-        filename="membership-agreement" 
-        title="Membership Agreement" 
-      />
-    </div>
+    <ExportOptions
+      :export-data="exportData"
+      filename="membership-agreement"
+      title="Membership Agreement"
+    />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
+    >
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
@@ -21,9 +20,8 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
-              :data-coop-name="
-                formData.cooperativeName || 'Worker Cooperative'
-              ">
+              :data-coop-name="formData.cooperativeName || 'Worker Cooperative'"
+            >
               MEMBERSHIP AGREEMENT
             </h1>
           </div>
@@ -31,7 +29,8 @@
           <!-- Section 1: Who We Are -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               1. Who We Are
             </h2>
 
@@ -43,7 +42,8 @@
                   size="xl"
                   class="w-full"
                   @input="debouncedAutoSave"
-                  @change="autoSave" />
+                  @change="autoSave"
+                />
               </UFormField>
 
               <UFormField label="Date Established" class="form-group-large">
@@ -52,7 +52,8 @@
                   type="date"
                   size="xl"
                   class="large-field"
-                  @change="autoSave" />
+                  @change="autoSave"
+                />
               </UFormField>
 
               <UFormField label="Our Purpose" class="form-group-large">
@@ -63,7 +64,8 @@
                   size="xl"
                   class="large-field"
                   @input="debouncedAutoSave"
-                  @change="autoSave" />
+                  @change="autoSave"
+                />
               </UFormField>
 
               <UFormField label="Our Core Values" class="form-group-large">
@@ -74,7 +76,8 @@
                   size="xl"
                   class="large-field"
                   @input="debouncedAutoSave"
-                  @change="autoSave" />
+                  @change="autoSave"
+                />
               </UFormField>
 
               <div class="form-group-large">
@@ -88,7 +91,8 @@
                     size="sm"
                     color="primary"
                     variant="outline"
-                    icon="i-heroicons-plus">
+                    icon="i-heroicons-plus"
+                  >
                     Add Member
                   </UButton>
                 </div>
@@ -97,10 +101,10 @@
                   <div
                     v-for="(member, index) in formData.members"
                     :key="index"
-                    class="border border-neutral-600 rounded-lg p-4">
+                    class="border border-neutral-600 rounded-lg p-4"
+                  >
                     <div class="flex items-start justify-between mb-3">
-                      <h4
-                        class="font-medium text-neutral-900 dark:text-neutral-100">
+                      <h4 class="font-medium text-neutral-900 dark:text-neutral-100">
                         Member {{ index + 1 }}
                       </h4>
                       <UButton
@@ -109,7 +113,8 @@
                         size="sm"
                         color="red"
                         variant="ghost"
-                        icon="i-heroicons-trash">
+                        icon="i-heroicons-trash"
+                      >
                       </UButton>
                     </div>
 
@@ -121,7 +126,8 @@
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave" />
+                          @change="autoSave"
+                        />
                       </UFormField>
 
                       <UFormField label="Email" class="form-group-large">
@@ -132,7 +138,8 @@
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave" />
+                          @change="autoSave"
+                        />
                       </UFormField>
 
                       <UFormField label="Join Date" class="form-group-large">
@@ -141,19 +148,22 @@
                           type="date"
                           size="xl"
                           class="large-field"
-                          @change="autoSave" />
+                          @change="autoSave"
+                        />
                       </UFormField>
 
                       <UFormField
                         label="Current Role (Optional)"
-                        class="form-group-large">
+                        class="form-group-large"
+                      >
                         <UInput
                           v-model="member.role"
                           placeholder="e.g., Coordinator, Developer, etc."
                           size="xl"
                           class="large-field"
                           @input="debouncedAutoSave"
-                          @change="autoSave" />
+                          @change="autoSave"
+                        />
                       </UFormField>
                     </div>
                   </div>
@@ -165,14 +175,16 @@
           <!-- Section 2: Membership -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               2. Membership
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Who Can Be a Member
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -181,8 +193,8 @@
                 <ul class="content-list my-2 pl-6 list-disc">
                   <li>Shares our values and purpose</li>
                   <li>
-                    Contributes labour to the cooperative (by doing actual work,
-                    not just investing money)
+                    Contributes labour to the cooperative (by doing actual work, not just
+                    investing money)
                   </li>
                   <li>Commits to collective decision-making</li>
                   <li>Participates in governance responsibilities</li>
@@ -191,14 +203,14 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Becoming a Member
                 </h3>
 
                 <p class="content-paragraph">
-                  New members join through a consent process, which means
-                  existing members must agree that adding this person won't harm
-                  the cooperative.
+                  New members join through a consent process, which means existing members
+                  must agree that adding this person won't harm the cooperative.
                 </p>
 
                 <ol class="content-list numbered my-2 pl-6 list-decimal">
@@ -209,7 +221,8 @@
                       type="number"
                       placeholder="3"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     months working together
                   </li>
                   <li>Values alignment conversation</li>
@@ -220,7 +233,8 @@
                       type="number"
                       placeholder="1000"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     (can be paid over time or waived based on need)
                   </li>
                 </ol>
@@ -228,19 +242,20 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Leaving the Cooperative
                 </h3>
 
-                <p
-                  class="content-paragraph flex items-baseline gap-2 flex-wrap">
+                <p class="content-paragraph flex items-baseline gap-2 flex-wrap">
                   Members can leave anytime with
                   <UInput
                     v-model="formData.noticeDays"
                     type="number"
                     placeholder="30"
                     class="inline-field number-field"
-                    @change="autoSave" />
+                    @change="autoSave"
+                  />
                   days notice. The cooperative will:
                 </p>
 
@@ -252,7 +267,8 @@
                       type="number"
                       placeholder="30"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     days
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -262,12 +278,11 @@
                       type="number"
                       placeholder="90"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     days
                   </li>
-                  <li>
-                    Maintain respectful ongoing relationships when possible
-                  </li>
+                  <li>Maintain respectful ongoing relationships when possible</li>
                 </ul>
               </div>
             </div>
@@ -276,71 +291,80 @@
           <!-- Section 3: How We Make Decisions -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               3. How We Make Decisions
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Consent-Based Decisions
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  We use consent, not consensus. This means we move forward when
-                  no one has a principled objection that would harm the
-                  cooperative. An objection must explain how the proposal would
-                  contradict our values or threaten our sustainability.
+                  We use consent, not consensus. This means we move forward when no one
+                  has a principled objection that would harm the cooperative. An objection
+                  must explain how the proposal would contradict our values or threaten
+                  our sustainability.
                 </p>
               </div>
 
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                  >
                     Day-to-Day Decisions
                   </h3>
                   <p
-                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
+                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
+                  >
                     Decisions under $<UInput
                       v-model="formData.dayToDayLimit"
                       type="number"
                       placeholder="100"
                       class="inline-field number-field"
-                      @change="autoSave" />
-                    can be made by any member. Just tell others what you did at
-                    the next meeting.
+                      @change="autoSave"
+                    />
+                    can be made by any member. Just tell others what you did at the next
+                    meeting.
                   </p>
                 </div>
 
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                  >
                     Regular Decisions
                   </h3>
                   <p
-                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
+                    class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
+                  >
                     Decisions between $<UInput
                       v-model="formData.regularDecisionMin"
                       type="number"
                       placeholder="100"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     and $<UInput
                       v-model="formData.regularDecisionMax"
                       type="number"
                       placeholder="1000"
                       class="inline-field number-field"
-                      @change="autoSave" />
-                    need consent from members present at a meeting (minimum 2
-                    members).
+                      @change="autoSave"
+                    />
+                    need consent from members present at a meeting (minimum 2 members).
                   </p>
                 </div>
               </div>
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Major Decisions
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -355,7 +379,8 @@
                       type="number"
                       placeholder="5000"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                   </li>
                   <li>Fundamental changes to our purpose or structure</li>
                   <li>Dissolution of the cooperative</li>
@@ -364,7 +389,8 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Meeting Structure
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
@@ -374,7 +400,8 @@
                       v-model="formData.meetingFrequency"
                       placeholder="weekly"
                       class="inline-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
                     Emergency meetings need
@@ -383,13 +410,12 @@
                       type="number"
                       placeholder="24"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     hours notice
                   </li>
                   <li>We rotate who facilitates meetings</li>
-                  <li>
-                    Decisions and reasoning get documented in shared notes
-                  </li>
+                  <li>Decisions and reasoning get documented in shared notes</li>
                 </ul>
               </div>
             </div>
@@ -398,25 +424,28 @@
           <!-- Section 4: Money and Labour -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               4. Money and Labour
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Equal Ownership
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  Each member owns an equal share of the cooperative, regardless
-                  of hours worked or tenure.
+                  Each member owns an equal share of the cooperative, regardless of hours
+                  worked or tenure.
                 </p>
               </div>
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Paying Ourselves
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
@@ -426,7 +455,8 @@
                       type="number"
                       placeholder="25"
                       class="inline-field number-field"
-                      @change="autoSave" />/hour for all members
+                      @change="autoSave"
+                    />/hour for all members
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
                     Or: Equal monthly draw of $<UInput
@@ -434,7 +464,8 @@
                       type="number"
                       placeholder="2000"
                       class="inline-field number-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     per member
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -444,7 +475,8 @@
                       :items="dayOptions"
                       placeholder="15"
                       class="inline-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                     of each month
                   </li>
                   <li class="flex items-baseline gap-2 flex-wrap">
@@ -453,7 +485,8 @@
                       v-model="formData.surplusFrequency"
                       placeholder="quarter"
                       class="inline-field"
-                      @change="autoSave" />
+                      @change="autoSave"
+                    />
                   </li>
                 </ul>
               </div>
@@ -461,7 +494,8 @@
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                  >
                     Work Expectations
                   </h3>
                   <ul class="content-list my-2 pl-6 list-disc">
@@ -472,31 +506,29 @@
                         type="number"
                         placeholder="40"
                         class="inline-field number-field"
-                        @change="autoSave" />
+                        @change="autoSave"
+                      />
                       (flexible based on capacity)
                     </li>
                     <li>We explicitly reject crunch culture</li>
                     <li>Members communicate their capacity openly</li>
                     <li>
-                      We adjust workload collectively when someone needs reduced
-                      hours
+                      We adjust workload collectively when someone needs reduced hours
                     </li>
                   </ul>
                 </div>
 
                 <div>
                   <h3
-                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                    class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                  >
                     Financial Transparency
                   </h3>
                   <ul class="content-list my-2 pl-6 list-disc">
-                    <li>
-                      All members can access all financial records anytime
-                    </li>
+                    <li>All members can access all financial records anytime</li>
                     <li>Monthly financial check-ins at meetings</li>
                     <li>
-                      Quarterly reviews of our runway (how many months we can
-                      operate)
+                      Quarterly reviews of our runway (how many months we can operate)
                     </li>
                   </ul>
                 </div>
@@ -507,31 +539,34 @@
           <!-- Section 5: Roles and Responsibilities -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               5. Roles and Responsibilities
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Rotating Roles
                 </h3>
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
+                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
+                >
                   We rotate operational roles every
                   <UInput
                     v-model="formData.roleRotationMonths"
                     type="number"
                     placeholder="6"
                     class="inline-field number-field"
-                    @change="autoSave" />
+                    @change="autoSave"
+                  />
                   months. Current roles include:
                 </p>
                 <ul class="content-list">
                   <li>
-                    Financial coordinator (handles bookkeeping, not financial
-                    decisions)
+                    Financial coordinator (handles bookkeeping, not financial decisions)
                   </li>
                   <li>Meeting facilitator</li>
                   <li>External communications</li>
@@ -541,7 +576,8 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Shared Responsibilities
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
@@ -559,14 +595,16 @@
           <!-- Section 6: Conflict and Care -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               6. Conflict and Care
             </h2>
 
             <div class="space-y-4">
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   When Conflict Happens
                 </h3>
                 <ol class="content-list numbered my-2 pl-6 list-decimal">
@@ -579,16 +617,15 @@
 
               <div>
                 <h3
-                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
+                  class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3"
+                >
                   Care Commitments
                 </h3>
                 <ul class="content-list my-2 pl-6 list-disc">
                   <li>We check in about capacity and wellbeing regularly</li>
                   <li>We honour diverse access needs</li>
                   <li>We maintain flexibility for life circumstances</li>
-                  <li>
-                    We contribute to mutual aid when members face hardship
-                  </li>
+                  <li>We contribute to mutual aid when members face hardship</li>
                 </ul>
               </div>
             </div>
@@ -597,27 +634,31 @@
           <!-- Section 7: Changing This Agreement -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               7. Changing This Agreement
             </h2>
 
             <p
-              class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
+              class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
+            >
               This is a living document. We review it every
               <UInput
                 v-model="formData.reviewFrequency"
                 placeholder="year"
                 class="inline-field"
-                @change="autoSave" />
-              and update it through our consent process. Small clarifications
-              can happen anytime; structural changes need full member consent.
+                @change="autoSave"
+              />
+              and update it through our consent process. Small clarifications can happen
+              anytime; structural changes need full member consent.
             </p>
           </div>
 
           <!-- Section 8: If We Need to Close -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               8. If We Need to Close
             </h2>
 
@@ -634,7 +675,8 @@
                   <UInput
                     v-model="formData.assetDonationTarget"
                     placeholder="Enter organization name"
-                    class="inline-field wide-field" />
+                    class="inline-field wide-field"
+                  />
                 </li>
               </ol>
             </div>
@@ -643,7 +685,8 @@
           <!-- Section 9: Legal Bits -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               9. Legal Bits
             </h2>
 
@@ -654,7 +697,8 @@
                     v-model="formData.legalStructure"
                     size="xl"
                     class="w-full"
-                    placeholder="Cooperative corporation, LLC, partnership, etc." />
+                    placeholder="Cooperative corporation, LLC, partnership, etc."
+                  />
                 </UFormField>
 
                 <UFormField label="Registered in" class="form-group-inline">
@@ -663,7 +707,8 @@
                     placeholder="State/Province"
                     size="xl"
                     class="inline-field w-full"
-                    @change="autoSave" />
+                    @change="autoSave"
+                  />
                 </UFormField>
 
                 <div class="fiscal-year-group">
@@ -675,23 +720,25 @@
                         placeholder="Month"
                         size="xl"
                         class="w-60"
-                        @change="autoSave" />
+                        @change="autoSave"
+                      />
                       <USelect
                         v-model="formData.fiscalYearEndDay"
                         :items="dayOptions"
                         placeholder="Day"
                         size="xl"
                         class="w-40"
-                        @change="autoSave" />
+                        @change="autoSave"
+                      />
                     </div>
                   </UFormField>
                 </div>
               </div>
 
               <p class="content-paragraph mb-3 leading-relaxed text-left">
-                This agreement works alongside but doesn't replace our legal
-                incorporation documents. Where they conflict, we follow the law
-                but work to align our legal structure with our values.
+                This agreement works alongside but doesn't replace our legal incorporation
+                documents. Where they conflict, we follow the law but work to align our
+                legal structure with our values.
               </p>
             </div>
           </div>
@@ -699,39 +746,46 @@
           <!-- Section 10: Agreement Review -->
           <div class="section-card">
             <h2
-              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4"
+            >
               10. Agreement Review
             </h2>
 
             <div class="space-y-4">
               <p class="content-paragraph mb-3 leading-relaxed text-left">
-                By using this agreement, we commit to these principles and to
-                showing up for each other.
+                By using this agreement, we commit to these principles and to showing up
+                for each other.
               </p>
 
               <div
-                class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300">
+                class="bg-neutral-50 dark:bg-neutral-900 p-4 rounded-md border-l-4 border-emerald-300"
+              >
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap">
+                  class="content-paragraph mb-3 leading-relaxed text-left flex items-baseline gap-2 flex-wrap"
+                >
                   This agreement was last updated on
                   <UInput
                     v-model="formData.lastUpdated"
                     type="date"
                     class="inline-field"
-                    @change="autoSave" />. We commit to reviewing it on
+                    @change="autoSave"
+                  />. We commit to reviewing it on
                   <UInput
                     v-model="formData.nextReview"
                     type="date"
                     class="inline-field"
-                    @change="autoSave" />
+                    @change="autoSave"
+                  />
                   or sooner if circumstances require.
                 </p>
               </div>
 
               <div
-                class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950">
+                class="signature-space mt-8 p-8 border border-dashed border-neutral-300 rounded-md bg-neutral-50 dark:bg-neutral-950"
+              >
                 <p
-                  class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic">
+                  class="content-paragraph mb-3 leading-relaxed text-center text-neutral-600 italic"
+                >
                   [Space for member signatures when printed]
                 </p>
               </div>
@@ -742,13 +796,11 @@
     </div>
 
     <!-- Export Options - Bottom -->
-    <div class="w-full flex justify-center mt-8">
-      <ExportOptions 
-        :export-data="exportData" 
-        filename="membership-agreement" 
-        title="Membership Agreement" 
-      />
-    </div>
+    <ExportOptions
+      :export-data="exportData"
+      filename="membership-agreement"
+      title="Membership Agreement"
+    />
   </div>
 </template>
 
@@ -846,10 +898,7 @@ onMounted(() => {
 
 // Auto-save individual field changes immediately
 const autoSave = () => {
-  localStorage.setItem(
-    "membership-agreement-data",
-    JSON.stringify(formData.value)
-  );
+  localStorage.setItem("membership-agreement-data", JSON.stringify(formData.value));
   console.log("Manual auto-save triggered:", formData.value);
 };
 
@@ -901,12 +950,8 @@ const handlePrint = () => {
     `;
 
     // Add signature lines for each member
-    const membersWithNames =
-      formData.value.members?.filter((m) => m.name) || [];
-    const numSignatures = Math.max(
-      2,
-      Math.min(8, membersWithNames.length || 4)
-    );
+    const membersWithNames = formData.value.members?.filter((m) => m.name) || [];
+    const numSignatures = Math.max(2, Math.min(8, membersWithNames.length || 4));
 
     for (let i = 0; i < numSignatures; i++) {
       const memberName = membersWithNames[i]?.name || "";
@@ -936,8 +981,7 @@ const handlePrint = () => {
       value = formData.value.cooperativeName;
     else if (input.closest('[label="Date Established"]'))
       value = formData.value.dateEstablished;
-    else if (input.closest('[label="Our Purpose"]'))
-      value = formData.value.purpose;
+    else if (input.closest('[label="Our Purpose"]')) value = formData.value.purpose;
     else if (input.closest('[label="Our Core Values"]'))
       value = formData.value.coreValues;
     else if (input.closest('[label="Legal Structure"]'))
@@ -954,16 +998,13 @@ const handlePrint = () => {
     // Handle member fields
     else if (input.closest(".border-neutral-200")) {
       const memberCard = input.closest(".border-neutral-200");
-      const memberIndex = Array.from(memberCard.parentNode.children).indexOf(
-        memberCard
-      );
+      const memberIndex = Array.from(memberCard.parentNode.children).indexOf(memberCard);
       const member = formData.value.members?.[memberIndex];
       if (member) {
         if (input.closest('[label="Full Name"]')) value = member.name;
         else if (input.closest('[label="Email"]')) value = member.email;
         else if (input.closest('[label="Join Date"]')) value = member.joinDate;
-        else if (input.closest('[label="Current Role (Optional)"]'))
-          value = member.role;
+        else if (input.closest('[label="Current Role (Optional)"]')) value = member.role;
       }
     }
     // Fallback to input.value
@@ -1044,162 +1085,24 @@ const exportData = computed(() => ({
     majorDebtThreshold: formData.value.majorDebtThreshold,
     meetingFrequency: formData.value.meetingFrequency,
     emergencyNoticeHours: formData.value.emergencyNoticeHours,
-    baseRate: formData.value.baseRate
+    baseRate: formData.value.baseRate,
   },
   exportedAt: new Date().toISOString(),
-  section: "membership-agreement"
+  section: "membership-agreement",
 }));
 </script>
 
 <style scoped>
-/* Ubuntu font import */
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
 @reference "tailwindcss";
 
+/* Template-specific styles not in main.css */
+
 .template-content {
   max-width: none;
   line-height: 1.6;
   color: #1f2937;
 }
 
-/* Section styling */
-.section-card {
-  @apply border border-neutral-200 dark:border-neutral-800 rounded-lg p-5 mb-8;
-}
-
-.section-card:last-child::after {
-  display: none;
-}
-
-.section-title {
-  font-size: 1.75rem;
-  font-weight: 800;
-  color: #111827;
-  margin: 0 0 1rem 0;
-  padding: 0;
-  letter-spacing: -0.025em;
-}
-
-.subsection-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #374151;
-  margin: 0 0 0.75rem 0;
-  text-decoration: none;
-  border-bottom: 1px solid #e5e7eb;
-  padding-bottom: 0.25rem;
-}
-
-/* Content styling */
-.content-paragraph {
-  margin-bottom: 0.75rem;
-  line-height: 1.6;
-  text-align: left;
-}
-
-.content-list {
-  margin: 0.5rem 0;
-  padding-left: 1.5rem;
-}
-
-.content-list li {
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
-  display: list-item;
-  list-style-position: outside;
-}
-
-.content-list.numbered {
-  list-style-type: decimal;
-  counter-reset: list-counter;
-}
-
-.content-list.numbered li {
-  list-style-type: decimal;
-  display: list-item;
-}
-
-.content-list:not(.numbered) {
-  list-style-type: disc;
-}
-
-.content-list:not(.numbered) li {
-  list-style-type: disc;
-  display: list-item;
-}
-
-/* Ensure bullets are visible even with flex items */
-.content-list li.flex {
-  display: list-item;
-}
-
-.content-list li .flex {
-  display: flex;
-  width: 100%;
-}
-
-/* Fix flex list items to show bullets */
-.content-list li[class*="flex"] {
-  display: list-item !important;
-  list-style-position: outside !important;
-}
-
-/* Ensure numbered lists show numbers even with flex */
-.content-list.numbered li[class*="flex"] {
-  list-style-type: decimal !important;
-}
-
-/* Ensure bullet lists show bullets even with flex */
-.content-list:not(.numbered) li[class*="flex"] {
-  list-style-type: disc !important;
-}
-
-.form-group-inline .inline-field:focus {
-  background: #f3f4f6;
-  outline: 1px solid #3b82f6;
-  outline-offset: -1px;
-}
-
-.form-group-block .block-field {
-  display: block;
-  width: 100%;
-  margin-top: 0.25rem;
-  border: none;
-  background: #f9fafb;
-  padding: 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.form-group-block .block-field:focus {
-  background: #f3f4f6;
-  outline: 1px solid #3b82f6;
-  outline-offset: -1px;
-}
-
-.form-group-large {
-  margin-bottom: 1rem;
-}
-
-.form-group-large .large-field {
-  @apply block w-full mt-2 text-lg rounded-md border-none transition-colors duration-150 ease-in-out;
-}
-
-.form-group-large .large-field:focus {
-  background: #f3f4f6;
-  box-shadow: none;
-  outline: 2px solid #3b82f6;
-  outline-offset: -2px;
-}
-
-.number-field {
-  min-width: 80px !important;
-  text-align: center;
-}
-
-.wide-field {
-  min-width: 250px !important;
-}
-
 /* Fiscal year group styling */
 .fiscal-year-group {
   display: flex;
@@ -1232,100 +1135,6 @@ const exportData = computed(() => ({
   border-left: 3px solid #3b82f6;
 }
 
-/* Hide elements from print */
-.no-print {
-  display: block;
-}
-
-/* Print optimizations */
-@media print {
-  .no-print {
-    display: none !important;
-  }
-
-  .template-content {
-    font-size: 10pt;
-    line-height: 1.3;
-  }
-
-  .document-title {
-    font-size: 16pt;
-    background: none;
-    padding: 0.5rem 0;
-    border-width: 1px;
-  }
-
-  .section-title {
-    font-size: 14pt;
-  }
-
-  .section-card {
-    box-shadow: none;
-    border: none;
-    break-inside: avoid;
-    margin-bottom: 1rem;
-  }
-
-  .section-card::after {
-    height: 1px;
-    background: #000;
-    margin: 1rem 0;
-  }
-
-  .signature-space {
-    border: 1px solid #000;
-    background: none;
-    min-height: 3rem;
-    padding: 1rem;
-  }
-
-  .review-dates {
-    background: none;
-    border: 1px solid #000;
-    padding: 0.5rem;
-  }
-
-  .large-field,
-  .inline-field,
-  .block-field {
-    background: none !important;
-    border: none !important;
-    outline: 1px solid #000 !important;
-    padding: 0.25rem !important;
-  }
-
-  .font-selector {
-    display: none;
-  }
-}
-
-/* Font selector styling */
-.font-selector {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  z-index: 1000;
-  background: white;
-  padding: 0.75rem;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  border: 1px solid #d1d5db;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.font-selector label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
-  margin: 0;
-}
-
-.font-select {
-  min-width: 140px;
-}
-
 /* Font families */
 .template-content.font-source-serif,
 .template-content.font-source-serif * {
@@ -1334,95 +1143,11 @@ const exportData = computed(() => ({
 
 .template-content.font-ubuntu,
 .template-content.font-ubuntu * {
-  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    sans-serif !important;
+  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
 }
 
 .template-content.font-inter,
 .template-content.font-inter * {
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    sans-serif !important;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
 }
-
-/* Template wrapper and document styling */
-/* rely on Tailwind bg utilities applied on wrapper */
-.template-wrapper {
-  min-height: 100vh;
-  padding: 2rem;
-  font-family: "Ubuntu", monospace;
-  position: relative;
-}
-.template-wrapper::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  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;
-  opacity: 0.1;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.document-page::before {
-  content: "";
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  right: -4px;
-  bottom: -4px;
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  z-index: -1;
-}
-.document-page::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid black;
-  z-index: 1;
-  pointer-events: none;
-}
-
-/* Dark mode dither inversion */
-html.dark .template-wrapper::before {
-  background-image: radial-gradient(
-      circle at 25% 25%,
-      white 1px,
-      transparent 1px
-    ),
-    radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
-  opacity: 0.12;
-}
-
-html.dark .document-page::before {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-html.dark .document-page::after {
-  border-color: white;
-}
-
-.document-page {
-  min-height: 11in;
-  background: white;
-  position: relative;
-}
-
-/* Dark mode document page inversion */
-html.dark .document-page {
-  background: #0a0a0a;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/templates/tech-charter.vue b/pages/templates/tech-charter.vue
index 3101e0d..e9ba808 100644
--- a/pages/templates/tech-charter.vue
+++ b/pages/templates/tech-charter.vue
@@ -4,23 +4,23 @@
     <WizardSubnav />
 
     <!-- Export Options - Top -->
-    <div class="flex justify-center py-6">
-      <ExportOptions 
-        :export-data="exportData" 
-        filename="tech-charter" 
-        title="Technology Charter" 
-      />
-    </div>
+    <ExportOptions
+      :export-data="exportData"
+      filename="tech-charter"
+      title="Technology Charter"
+    />
 
     <div
-      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100">
+      class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
+    >
       <!-- Document Container -->
       <div class="document-page">
         <div class="template-content">
           <!-- Document Header -->
           <div class="text-center mb-8">
             <h1
-              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100">
+              class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
+            >
               Tech Charter
             </h1>
           </div>
@@ -30,12 +30,9 @@
             <!-- Purpose Section -->
             <div class="section-card">
               <div>
-                <h2 class="text-2xl font-bold text-neutral-800 mb-4">
-                  Charter Purpose
-                </h2>
+                <h2 class="text-2xl font-bold text-neutral-800 mb-4">Charter Purpose</h2>
                 <p class="text-neutral-600 mb-4">
-                  Describe what this charter will guide and why it matters to
-                  your group.
+                  Describe what this charter will guide and why it matters to your group.
                 </p>
               </div>
 
@@ -43,7 +40,8 @@
                 <textarea
                   v-model="charterPurpose"
                   class="w-full min-h-32 p-4 border-2 border-neutral-300 bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 focus:border-black dark:focus:border-white transition-colors resize-y"
-                  rows="4" />
+                  rows="4"
+                />
               </div>
             </div>
 
@@ -54,20 +52,18 @@
                   Define Your Principles & Importance
                 </h2>
                 <p class="text-neutral-600 mb-6">
-                  Select principles and set their importance. Zero means
-                  excluded, 5 means critical.
+                  Select principles and set their importance. Zero means excluded, 5 means
+                  critical.
                 </p>
               </div>
 
               <div class="grid md:grid-cols-1 gap-4">
-                <div
-                  v-for="principle in principles"
-                  :key="principle.id"
-                  class="relative">
+                <div v-for="principle in principles" :key="principle.id" class="relative">
                   <!-- Dithered shadow for selected cards -->
                   <div
                     v-if="principleWeights[principle.id] > 0"
-                    class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                    class="absolute top-2 left-2 w-full h-full dither-shadow"
+                  ></div>
 
                   <div
                     :class="[
@@ -75,7 +71,8 @@
                       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 -->
@@ -83,10 +80,9 @@
                           <div
                             :class="[
                               'principle-text-bg mb-3',
-                              principleWeights[principle.id] > 0
-                                ? 'selected'
-                                : '',
-                            ]">
+                              principleWeights[principle.id] > 0 ? 'selected' : '',
+                            ]"
+                          >
                             <h3 class="font-bold text-lg mb-2">
                               {{ principle.name }}
                             </h3>
@@ -96,7 +92,8 @@
                                   ? 'text-neutral-700'
                                   : 'text-neutral-600'
                               "
-                              class="text-sm">
+                              class="text-sm"
+                            >
                               {{ principle.description }}
                             </p>
                           </div>
@@ -105,7 +102,8 @@
                         <!-- Importance selector -->
                         <div class="flex flex-col items-center gap-2">
                           <label
-                            class="text-xs font-bold text-neutral-500 uppercase tracking-wider">
+                            class="text-xs font-bold text-neutral-500 uppercase tracking-wider"
+                          >
                             Importance
                           </label>
 
@@ -121,7 +119,8 @@
                                   ? 'bg-black text-white border-black dark:bg-white dark:text-black dark:border-white'
                                   : 'bg-white border-neutral-300 hover:border-neutral-500 dark:bg-neutral-950',
                               ]"
-                              :title="`Set importance to ${level}`">
+                              :title="`Set importance to ${level}`"
+                            >
                               {{ level }}
                             </button>
                           </div>
@@ -132,11 +131,7 @@
                               {{ principleWeights[principle.id] || 0 }}
                             </div>
                             <div class="text-xs text-neutral-500">
-                              {{
-                                getWeightLabel(
-                                  principleWeights[principle.id] || 0
-                                )
-                              }}
+                              {{ getWeightLabel(principleWeights[principle.id] || 0) }}
                             </div>
                           </div>
                         </div>
@@ -145,19 +140,20 @@
                       <!-- Non-negotiable toggle (only shows for weights > 0) -->
                       <div
                         v-if="principleWeights[principle.id] > 0"
-                        class="mt-4 pt-4 border-t border-neutral-200">
+                        class="mt-4 pt-4 border-t border-neutral-200"
+                      >
                         <label
                           :class="[
                             'flex items-center gap-3 cursor-pointer principle-label-bg px-2 py-1',
-                            nonNegotiables.includes(principle.id)
-                              ? 'selected'
-                              : '',
-                          ]">
+                            nonNegotiables.includes(principle.id) ? 'selected' : '',
+                          ]"
+                        >
                           <input
                             type="checkbox"
                             :checked="nonNegotiables.includes(principle.id)"
                             @change="toggleNonNegotiable(principle.id)"
-                            class="w-4 h-4" />
+                            class="w-4 h-4"
+                          />
                           <span class="text-sm font-medium text-red-600">
                             Make this non-negotiable
                           </span>
@@ -167,9 +163,9 @@
                       <!-- Show rubric description when selected -->
                       <div
                         v-if="principleWeights[principle.id] > 0"
-                        class="mt-4 p-3 principle-label-bg selected border border-neutral-200">
-                        <div
-                          class="text-xs font-bold uppercase text-neutral-500 mb-1">
+                        class="mt-4 p-3 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">
@@ -187,7 +183,8 @@
               <div>
                 <h2
                   class="text-2xl font-bold text-neutral-800 mb-2"
-                  id="constraints-heading">
+                  id="constraints-heading"
+                >
                   Technical Constraints
                 </h2>
               </div>
@@ -198,15 +195,18 @@
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="auth-heading">
+                    aria-labelledby="auth-heading"
+                  >
                     <div
                       v-for="option in authOptions"
                       :key="option.value"
-                      class="relative">
+                      class="relative"
+                    >
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.sso === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"
+                      ></div>
                       <button
                         @click="constraints.sso = option.value"
                         :aria-pressed="constraints.sso === option.value"
@@ -217,7 +217,8 @@
                           constraints.sso === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]">
+                        ]"
+                      >
                         {{ option.label }}
                       </button>
                     </div>
@@ -229,15 +230,18 @@
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="hosting-heading">
+                    aria-labelledby="hosting-heading"
+                  >
                     <div
                       v-for="option in hostingOptions"
                       :key="option.value"
-                      class="relative">
+                      class="relative"
+                    >
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.hosting === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"
+                      ></div>
                       <button
                         @click="constraints.hosting = option.value"
                         :aria-pressed="constraints.hosting === option.value"
@@ -248,7 +252,8 @@
                           constraints.hosting === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]">
+                        ]"
+                      >
                         {{ option.label }}
                       </button>
                     </div>
@@ -256,32 +261,29 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">
-                    Required Integrations
-                  </legend>
-                  <p class="text-sm text-neutral-600 mb-4">
-                    Select all that apply
-                  </p>
+                  <legend class="font-semibold text-lg">Required Integrations</legend>
+                  <p class="text-sm text-neutral-600 mb-4">Select all that apply</p>
                   <div class="flex flex-wrap gap-3 constraint-buttons">
                     <div
                       v-for="integration in integrationOptions"
                       :key="integration"
-                      class="relative">
+                      class="relative"
+                    >
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.integrations.includes(integration)"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"
+                      ></div>
                       <button
                         @click="toggleIntegration(integration)"
-                        :aria-pressed="
-                          constraints.integrations.includes(integration)
-                        "
+                        :aria-pressed="constraints.integrations.includes(integration)"
                         :class="[
                           'relative px-5 py-2 border-2 transition-all focus:outline-none focus:ring-1 focus:ring-black cursor-pointer',
                           constraints.integrations.includes(integration)
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]">
+                        ]"
+                      >
                         {{ integration }}
                       </button>
                     </div>
@@ -289,21 +291,22 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">
-                    Support Expectations
-                  </legend>
+                  <legend class="font-semibold text-lg">Support Expectations</legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="support-heading">
+                    aria-labelledby="support-heading"
+                  >
                     <div
                       v-for="option in supportOptions"
                       :key="option.value"
-                      class="relative">
+                      class="relative"
+                    >
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.support === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"
+                      ></div>
                       <button
                         @click="constraints.support = option.value"
                         :aria-pressed="constraints.support === option.value"
@@ -314,7 +317,8 @@
                           constraints.support === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]">
+                        ]"
+                      >
                         {{ option.label }}
                       </button>
                     </div>
@@ -322,21 +326,22 @@
                 </fieldset>
 
                 <fieldset class="bg-neutral-50 p-6 rounded-lg">
-                  <legend class="font-semibold text-lg">
-                    Migration Timeline
-                  </legend>
+                  <legend class="font-semibold text-lg">Migration Timeline</legend>
                   <div
                     class="flex flex-wrap gap-3 constraint-buttons"
                     role="radiogroup"
-                    aria-labelledby="timeline-heading">
+                    aria-labelledby="timeline-heading"
+                  >
                     <div
                       v-for="option in timelineOptions"
                       :key="option.value"
-                      class="relative">
+                      class="relative"
+                    >
                       <!-- Dithered shadow for selected buttons -->
                       <div
                         v-if="constraints.timeline === option.value"
-                        class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
+                        class="absolute top-2 left-2 w-full h-full dither-shadow"
+                      ></div>
                       <button
                         @click="constraints.timeline = option.value"
                         :aria-pressed="constraints.timeline === option.value"
@@ -347,7 +352,8 @@
                           constraints.timeline === option.value
                             ? 'constraint-selected border-black dark:border-white cursor-pointer !bg-black !text-white dark:!bg-white dark:!text-black'
                             : 'border-neutral-300 hover:border-neutral-400 bg-white dark:bg-neutral-950 cursor-pointer',
-                        ]">
+                        ]"
+                      >
                         {{ option.label }}
                       </button>
                     </div>
@@ -361,7 +367,8 @@
               <button
                 @click="resetForm"
                 class="export-btn"
-                title="Clear all form data and start over">
+                title="Clear all form data and start over"
+              >
                 <UIcon name="i-heroicons-arrow-path" />
                 Reset Form
               </button>
@@ -374,19 +381,17 @@
           v-if="charterGenerated"
           class="relative animate-fadeIn"
           role="main"
-          aria-label="Generated Technology Charter">
+          aria-label="Generated Technology Charter"
+        >
           <!-- Dithered shadow -->
-          <div
-            class="absolute top-4 left-4 right-0 bottom-0 dither-shadow"></div>
+          <div class="absolute top-4 left-4 right-0 bottom-0 dither-shadow"></div>
 
           <!-- Charter container -->
           <div
-            class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8">
-            <div
-              class="text-center mb-8 pb-6 border-b-2 border-black dark:border-white">
-              <h2
-                class="text-3xl font-bold text-neutral-800"
-                id="charter-title">
+            class="relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white p-8"
+          >
+            <div class="text-center mb-8 pb-6 border-b-2 border-black dark:border-white">
+              <h2 class="text-3xl font-bold text-neutral-800" id="charter-title">
                 Technology Charter
               </h2>
               <p class="text-neutral-600 mt-2">
@@ -402,7 +407,8 @@
               <div class="mt-4">
                 <button
                   @click="scrollToTop"
-                  class="text-sm text-neutral-600 hover:text-neutral-800 underline focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded">
+                  class="text-sm text-neutral-600 hover:text-neutral-800 underline focus:outline-none focus:ring-2 focus:ring-neutral-500 rounded"
+                >
                   Back to form
                 </button>
               </div>
@@ -412,10 +418,10 @@
               <section class="mb-8">
                 <h3 class="text-xl font-bold text-neutral-800 mb-3">Purpose</h3>
                 <p class="text-neutral-700 leading-relaxed">
-                  This charter guides our cooperative's technology decisions
-                  based on our shared values and operational needs. It ensures
-                  we choose tools that support our mission while respecting our
-                  principles of autonomy, sustainability, and mutual aid.
+                  This charter guides our cooperative's technology decisions based on our
+                  shared values and operational needs. It ensures we choose tools that
+                  support our mission while respecting our principles of autonomy,
+                  sustainability, and mutual aid.
                 </p>
               </section>
 
@@ -423,25 +429,21 @@
                 class="mb-8"
                 v-if="
                   Object.keys(principleWeights).filter(
-                    (p) =>
-                      principleWeights[p] > 0 && !nonNegotiables.includes(p)
+                    (p) => principleWeights[p] > 0 && !nonNegotiables.includes(p)
                   ).length > 0
-                ">
-                <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                  Core Principles
-                </h3>
+                "
+              >
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">Core Principles</h3>
                 <ul class="space-y-2">
                   <li
                     v-for="principleId in Object.keys(principleWeights).filter(
-                      (p) =>
-                        principleWeights[p] > 0 && !nonNegotiables.includes(p)
+                      (p) => principleWeights[p] > 0 && !nonNegotiables.includes(p)
                     )"
                     :key="principleId"
-                    class="flex items-start">
+                    class="flex items-start"
+                  >
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span>{{
-                      principles.find((p) => p.id === principleId)?.name
-                    }}</span>
+                    <span>{{ principles.find((p) => p.id === principleId)?.name }}</span>
                   </li>
                 </ul>
               </section>
@@ -451,18 +453,16 @@
                   Non-Negotiable Requirements
                 </h3>
                 <p class="text-red-600 font-semibold mb-3">
-                  Any vendor failing these requirements is automatically
-                  disqualified.
+                  Any vendor failing these requirements is automatically disqualified.
                 </p>
                 <ul class="space-y-2">
                   <li
                     v-for="principleId in nonNegotiables"
                     :key="principleId"
-                    class="flex items-start text-red-600 font-semibold">
+                    class="flex items-start text-red-600 font-semibold"
+                  >
                     <span class="mr-2">→</span>
-                    <span>{{
-                      principles.find((p) => p.id === principleId)?.name
-                    }}</span>
+                    <span>{{ principles.find((p) => p.id === principleId)?.name }}</span>
                   </li>
                 </ul>
               </section>
@@ -477,8 +477,7 @@
                     <span
                       >Authentication:
                       {{
-                        authOptions.find((o) => o.value === constraints.sso)
-                          ?.label
+                        authOptions.find((o) => o.value === constraints.sso)?.label
                       }}</span
                     >
                   </li>
@@ -487,15 +486,11 @@
                     <span
                       >Hosting:
                       {{
-                        hostingOptions.find(
-                          (o) => o.value === constraints.hosting
-                        )?.label
+                        hostingOptions.find((o) => o.value === constraints.hosting)?.label
                       }}</span
                     >
                   </li>
-                  <li
-                    v-if="constraints.integrations.length > 0"
-                    class="flex items-start">
+                  <li v-if="constraints.integrations.length > 0" class="flex items-start">
                     <span class="text-purple-600 mr-2">→</span>
                     <span
                       >Required Integrations:
@@ -507,9 +502,7 @@
                     <span
                       >Support Level:
                       {{
-                        supportOptions.find(
-                          (o) => o.value === constraints.support
-                        )?.label
+                        supportOptions.find((o) => o.value === constraints.support)?.label
                       }}</span
                     >
                   </li>
@@ -518,9 +511,8 @@
                     <span
                       >Migration Timeline:
                       {{
-                        timelineOptions.find(
-                          (o) => o.value === constraints.timeline
-                        )?.label
+                        timelineOptions.find((o) => o.value === constraints.timeline)
+                          ?.label
                       }}</span
                     >
                   </li>
@@ -528,27 +520,27 @@
               </section>
 
               <section class="mb-8">
-                <h3 class="text-xl font-bold text-neutral-800 mb-3">
-                  Evaluation Rubric
-                </h3>
+                <h3 class="text-xl font-bold text-neutral-800 mb-3">Evaluation Rubric</h3>
                 <p class="text-neutral-700 mb-4">
-                  Score each vendor option using these weighted criteria (0-5
-                  scale):
+                  Score each vendor option using these weighted criteria (0-5 scale):
                 </p>
                 <div class="overflow-x-auto">
                   <table class="w-full border-collapse">
                     <thead>
                       <tr class="bg-neutral-100">
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left"
+                        >
                           Criterion
                         </th>
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-left"
+                        >
                           Description
                         </th>
                         <th
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center"
+                        >
                           Weight
                         </th>
                       </tr>
@@ -557,17 +549,21 @@
                       <tr
                         v-for="weight in sortedWeights"
                         :key="weight.id"
-                        class="hover:bg-neutral-50">
+                        class="hover:bg-neutral-50"
+                      >
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 font-semibold">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 font-semibold"
+                        >
                           {{ weight.name }}
                         </td>
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-sm text-neutral-600">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-sm text-neutral-600"
+                        >
                           {{ weight.rubricDescription }}
                         </td>
                         <td
-                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600">
+                          class="border-2 border-neutral-900 dark:border-neutral-100 p-3 text-center font-bold text-neutral-600"
+                        >
                           {{ principleWeights[weight.id] }}
                         </td>
                       </tr>
@@ -584,8 +580,8 @@
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
                     <span
-                      >Any vendor failing a non-negotiable requirement is
-                      automatically eliminated</span
+                      >Any vendor failing a non-negotiable requirement is automatically
+                      eliminated</span
                     >
                   </li>
                   <li class="flex items-start">
@@ -598,8 +594,8 @@
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
                     <span
-                      >When scores are within 10%, choose based on alignment
-                      with cooperative values</span
+                      >When scores are within 10%, choose based on alignment with
+                      cooperative values</span
                     >
                   </li>
                   <li class="flex items-start">
@@ -642,16 +638,11 @@
                   </li>
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span
-                      >Document any exceptions with clear justification</span
-                    >
+                    <span>Document any exceptions with clear justification</span>
                   </li>
                   <li class="flex items-start">
                     <span class="text-neutral-600 mr-2">→</span>
-                    <span
-                      >Share learnings with other cooperatives in our
-                      network</span
-                    >
+                    <span>Share learnings with other cooperatives in our network</span>
                   </li>
                 </ul>
               </section>
@@ -662,13 +653,11 @@
     </div>
 
     <!-- Export Options - Bottom -->
-    <div class="flex justify-center py-6">
-      <ExportOptions 
-        :export-data="exportData" 
-        filename="tech-charter" 
-        title="Technology Charter" 
-      />
-    </div>
+    <ExportOptions
+      :export-data="exportData"
+      filename="tech-charter"
+      title="Technology Charter"
+    />
   </div>
 </template>
 
@@ -716,15 +705,13 @@ const principles = [
     id: "portability",
     name: "Data Freedom",
     description: "Easy export, no vendor lock-in, migration-friendly",
-    rubricDescription:
-      "Export capabilities, proprietary formats, switching costs",
+    rubricDescription: "Export capabilities, proprietary formats, switching costs",
     defaultWeight: 4,
   },
   {
     id: "opensource",
     name: "Open Source & Community",
-    description:
-      "FOSS preference, transparent development, community governance",
+    description: "FOSS preference, transparent development, community governance",
     rubricDescription: "License type, community involvement, code transparency",
     defaultWeight: 3,
   },
@@ -732,8 +719,7 @@ const principles = [
     id: "sustainability",
     name: "Sustainable Operations",
     description: "Predictable costs, green hosting, efficient resource use",
-    rubricDescription:
-      "Total cost of ownership, carbon footprint, resource efficiency",
+    rubricDescription: "Total cost of ownership, carbon footprint, resource efficiency",
     defaultWeight: 3,
   },
   {
@@ -746,10 +732,8 @@ const principles = [
   {
     id: "usability",
     name: "User Experience",
-    description:
-      "Intuitive interface, minimal learning curve, daily efficiency",
-    rubricDescription:
-      "Onboarding time, user satisfaction, workflow integration",
+    description: "Intuitive interface, minimal learning curve, daily efficiency",
+    rubricDescription: "Onboarding time, user satisfaction, workflow integration",
     defaultWeight: 3,
   },
 ];
@@ -785,9 +769,7 @@ const timelineOptions = [
 const sortedWeights = computed(() => {
   return principles
     .filter((p) => principleWeights.value[p.id] > 0)
-    .sort(
-      (a, b) => principleWeights.value[b.id] - principleWeights.value[a.id]
-    );
+    .sort((a, b) => principleWeights.value[b.id] - principleWeights.value[a.id]);
 });
 
 const canGenerateCharter = computed(() => {
@@ -805,15 +787,15 @@ const exportData = computed(() => ({
   principleWeights: principleWeights.value,
   nonNegotiables: nonNegotiables.value,
   constraints: constraints.value,
-  principles: principles.filter(p => principleWeights.value[p.id] > 0),
+  principles: principles.filter((p) => principleWeights.value[p.id] > 0),
   sortedWeights: sortedWeights.value,
   summary: {
     selectedPrincipleCount: selectedPrincipleCount.value,
     nonNegotiableCount: nonNegotiables.value.length,
-    canGenerateCharter: canGenerateCharter.value
+    canGenerateCharter: canGenerateCharter.value,
   },
   exportedAt: new Date().toISOString(),
-  section: "tech-charter"
+  section: "tech-charter",
 }));
 
 // Methods
@@ -880,12 +862,9 @@ const resetForm = () => {
 };
 
 const scrollToTop = () => {
-  document
-    .querySelector(".template-wrapper")
-    .scrollIntoView({ behavior: "smooth" });
+  document.querySelector(".template-wrapper").scrollIntoView({ behavior: "smooth" });
 };
 
-
 // Load saved data
 const loadSavedData = () => {
   const saved = localStorage.getItem("tech-charter-data");
@@ -916,7 +895,6 @@ const autoSave = () => {
   localStorage.setItem("tech-charter-data", JSON.stringify(data));
 };
 
-
 // Load data on mount
 onMounted(() => {
   // Initialize all principle weights to 0
@@ -927,28 +905,16 @@ onMounted(() => {
 });
 
 // Auto-save when data changes
-watch(
-  [charterPurpose, principleWeights, nonNegotiables, constraints],
-  autoSave,
-  {
-    deep: true,
-  }
-);
+watch([charterPurpose, principleWeights, nonNegotiables, constraints], autoSave, {
+  deep: true,
+});
 </script>
 
 <style scoped>
-/* Ubuntu font import */
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
 @reference "tailwindcss";
 
-/* rely on Tailwind bg utilities applied on wrapper */
-.template-wrapper {
-  min-height: 100vh;
-  padding: 2rem;
-  position: relative;
-}
+/* Template-specific styles not in main.css */
 
-/* Section styling */
 .section-card {
   @apply mb-8 relative;
 }
@@ -999,7 +965,6 @@ html.dark .principle-selected::after {
 }
 
 /* Text background for better readability */
-
 .principle-label-bg {
   background: rgba(255, 255, 255, 0.85);
   border-radius: 4px;
@@ -1048,231 +1013,6 @@ html.dark button.constraint-selected:hover {
   color: black !important;
 }
 
-.section-card::before {
-  content: "";
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  right: -4px;
-  bottom: -4px;
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  z-index: -1;
-}
-/* Dithered shadow effects */
-.dither-shadow {
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-}
-
-html.dark .dither-shadow {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-
-.dither-shadow-header {
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  opacity: 0.8;
-}
-
-html.dark .dither-shadow-header {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-
-.progress-dither {
-  background-image: radial-gradient(
-    circle at 50% 50%,
-    rgba(0, 0, 0, 0.1) 1px,
-    transparent 1px
-  );
-  background-size: 4px 4px;
-}
-.template-wrapper::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  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;
-  opacity: 0.1;
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* Dark mode dither inversion */
-html.dark .template-wrapper::before {
-  background-image: radial-gradient(
-      circle at 25% 25%,
-      white 1px,
-      transparent 1px
-    ),
-    radial-gradient(circle at 75% 75%, white 1px, transparent 1px);
-  opacity: 0.12;
-}
-
-.document-page {
-  min-height: 11in;
-  background: white;
-  position: relative;
-}
-.document-page::before {
-  content: "";
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  right: -4px;
-  bottom: -4px;
-  background: black;
-  background-image: radial-gradient(white 1px, transparent 1px);
-  background-size: 2px 2px;
-  z-index: -1;
-}
-.document-page::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid black;
-  z-index: 1;
-  pointer-events: none;
-}
-
-/* Dark mode document page inversion */
-html.dark .document-page {
-  background: #0a0a0a;
-}
-html.dark .document-page::before {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-html.dark .document-page::after {
-  border-color: white;
-}
-
-.export-controls {
-  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;
-}
-
-/* Dark mode export controls */
-html.dark .export-controls {
-  background: #0a0a0a;
-  border-color: white;
-}
-html.dark .export-controls::before {
-  background: white;
-  background-image: radial-gradient(black 1px, transparent 1px);
-}
-
-.export-content {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  gap: 1rem;
-}
-
-.export-section {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.export-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.export-title {
-  font-weight: 600;
-  color: #374151;
-  margin: 0;
-  white-space: nowrap;
-}
-
-html.dark .export-title {
-  color: #e5e7eb;
-}
-
-.export-btn {
-  background: #f9fafb;
-  border: 1px solid #d1d5db;
-  color: #374151;
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  transition: all 0.2s;
-  text-decoration: none;
-  min-width: fit-content;
-}
-
-.export-btn:hover {
-  background: #f3f4f6;
-  border-color: #9ca3af;
-  transform: translateY(-1px);
-}
-
-.export-btn.primary {
-  background: #3b82f6;
-  border-color: #3b82f6;
-  color: white;
-}
-
-.export-btn.primary:hover {
-  background: #2563eb;
-  border-color: #2563eb;
-}
-
-.export-btn svg {
-  flex-shrink: 0;
-}
-
-.content-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: inherit;
-  text-align: center;
-  margin-bottom: 0.5rem;
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -1288,209 +1028,11 @@ html.dark .export-title {
   animation: fadeIn 0.5s ease-out;
 }
 
-/* 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;
-  cursor: pointer !important;
-}
-
-button:not(.export-btn):hover {
-  background: black !important;
-  color: white !important;
-  transform: translateY(-1px) translateX(-1px) !important;
-}
-
-/* Dark mode buttons */
-html.dark button:not(.export-btn) {
-  background: #0a0a0a !important;
-  border: 1px solid white !important;
-  color: white !important;
-  cursor: pointer !important;
-}
-
-html.dark button:not(.export-btn):hover {
-  background: white !important;
-  color: black !important;
-}
-
-/* Export buttons specifically */
-.export-btn {
-  background: white !important;
-  border: 1px solid black !important;
-  color: black !important;
-  font-family: "Ubuntu Mono", monospace !important;
-  text-transform: uppercase !important;
-  font-weight: bold !important;
-  letter-spacing: 0.5px !important;
-  cursor: pointer !important;
-}
-
-.export-btn:hover {
-  background: black !important;
-  color: white !important;
-  transform: translateY(-1px) translateX(-1px) !important;
-}
-
-/* Dark mode export buttons */
-html.dark .export-btn {
-  background: #0a0a0a !important;
-  border: 1px solid white !important;
-  color: white !important;
-  cursor: pointer !important;
-}
-
-html.dark .export-btn:hover {
-  background: white !important;
-  color: black !important;
-}
-
-.export-btn.primary {
-  background: black !important;
-  color: white !important;
-}
-
-.export-btn.primary:hover {
-  background: black !important;
-  transform: translateY(-1px) translateX(-1px) !important;
-}
-
-/* Checkbox and radio button styling */
-input[type="checkbox"],
-input[type="radio"] {
-  border: 2px solid black !important;
-  background: white !important;
-}
-
-input[type="checkbox"]:checked,
-input[type="radio"]:checked {
-  background: black !important;
-  color: white !important;
-}
-
-/* Document titles */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Ubuntu", monospace !important;
-  color: inherit !important;
-}
-
-/* All text */
-p,
-span,
-div {
-  color: inherit !important;
-  font-family: "Ubuntu", monospace !important;
-}
-
-@media (max-width: 768px) {
-  .template-wrapper {
-    padding: 1rem;
-  }
-
-  .export-content {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .export-section {
-    justify-content: center;
-  }
-
-  .export-buttons {
-    justify-content: center;
-  }
-
-  .content-title {
-    font-size: 2rem;
-  }
-
-  /* Make principle cards full width on mobile */
-  .principle-grid {
-    grid-template-columns: 1fr;
-  }
-
-  /* Stack constraint buttons vertically on mobile */
-  .constraint-buttons {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .constraint-buttons button {
-    width: 100%;
-    justify-content: center;
-  }
-
-  /* Improve weight control layout on mobile */
-  .weight-control-mobile {
-    flex-direction: column;
-    gap: 1rem;
-  }
-}
-
-@media print {
-  body > *:not(.template-wrapper),
-  #__nuxt > *:not(.template-wrapper),
-  .export-controls,
-  .no-print,
-  .no-pdf,
-  button,
-  [class*="button"] {
-    display: none !important;
-  }
-
-  body *:not(.template-wrapper):not(.template-wrapper *) {
-    visibility: hidden !important;
-  }
-
-  .template-wrapper,
-  .template-wrapper * {
-    visibility: visible !important;
-  }
-
-  .template-wrapper {
-    background: white !important;
-    padding: 0 !important;
-    min-height: auto !important;
-  }
-
-  .document-page {
-    max-width: none !important;
-    width: 100% !important;
-    margin: 0 !important;
-    box-shadow: none !important;
-    border-radius: 0 !important;
-  }
-
-  .document-page::before {
-    content: "";
-    display: block;
-    height: 0.5in;
-  }
+.content-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: inherit;
+  text-align: center;
+  margin-bottom: 0.5rem;
 }
 </style>