diff --git a/assets/auto-sync.svg b/assets/auto-sync.svg
index 13852ef..aa900bf 100644
--- a/assets/auto-sync.svg
+++ b/assets/auto-sync.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="850" height="340" viewBox="0 0 850 340">
+<svg xmlns="http://www.w3.org/2000/svg" width="850" height="380" viewBox="0 0 850 380">
   <defs>
     <linearGradient id="sync-glow" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" stop-color="#06d6a0" stop-opacity="0"/>
@@ -11,107 +11,109 @@
 
   <!-- Title -->
   <text x="425" y="30" font-family="'Segoe UI', Arial, sans-serif" font-size="20" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Auto-Sync</text>
-  <text x="425" y="50" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Your report changes appear in Desktop automatically. Your modeling work is preserved.</text>
+  <text x="425" y="52" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Report changes appear in Desktop automatically. Your modeling work is preserved.</text>
 
-  <rect x="80" y="60" width="690" height="1" fill="url(#sync-glow)"/>
+  <!-- ============ 4 Steps: equal width, centered ============ -->
+  <!-- Card width=160, arrow gap=30, total = 4*160 + 3*30 = 730, start x = (850-730)/2 = 60 -->
 
-  <!-- ============ Step 1: CLI writes PBIR ============ -->
-  <rect x="20" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
-  <!-- Step number -->
-  <circle cx="42" cy="100" r="12" fill="#58a6ff"/>
-  <text x="42" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
-  <text x="105" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
-  <!-- File icon with pencil -->
-  <g transform="translate(60, 118)">
-    <rect x="0" y="0" width="36" height="44" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
-    <line x1="8" y1="12" x2="28" y2="12" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
-    <line x1="8" y1="20" x2="28" y2="20" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
-    <line x1="8" y1="28" x2="20" y2="28" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
+  <!-- Step 1: CLI Writes -->
+  <rect x="60" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
+  <!-- Step badge -->
+  <circle cx="140" cy="100" r="14" fill="#58a6ff"/>
+  <text x="140" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
+  <text x="140" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
+  <!-- File icon -->
+  <g transform="translate(110, 140)">
+    <rect x="0" y="0" width="32" height="40" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
+    <line x1="7" y1="11" x2="25" y2="11" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
+    <line x1="7" y1="19" x2="25" y2="19" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
+    <line x1="7" y1="27" x2="18" y2="27" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
     <!-- Pencil -->
-    <line x1="30" y1="32" x2="42" y2="20" stroke="#06d6a0" stroke-width="2" stroke-linecap="round"/>
-    <circle cx="42" cy="20" r="2" fill="#06d6a0"/>
+    <line x1="26" y1="30" x2="38" y2="18" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
+    <circle cx="38" cy="18" r="2.5" fill="#06d6a0"/>
   </g>
-  <text x="97" y="180" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">page.json</text>
-  <text x="97" y="193" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">visual.json</text>
+  <text x="140" y="200" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">page.json</text>
+  <text x="140" y="215" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">visual.json</text>
+  <text x="140" y="230" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">filters</text>
 
   <!-- Arrow 1 > 2 -->
-  <line x1="180" y1="140" x2="205" y2="140" stroke="#F2C811" stroke-width="2"/>
-  <polygon points="210,140 203,135 203,145" fill="#F2C811"/>
+  <line x1="225" y1="155" x2="248" y2="155" stroke="#F2C811" stroke-width="2.5"/>
+  <polygon points="253,155 245,149 245,161" fill="#F2C811"/>
 
-  <!-- ============ Step 2: Snapshot ============ -->
-  <rect x="215" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
-  <circle cx="237" cy="100" r="12" fill="#F2C811"/>
-  <text x="237" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
-  <text x="305" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
-  <!-- Camera/snapshot icon -->
-  <g transform="translate(257, 118)">
-    <rect x="0" y="8" width="44" height="32" rx="4" fill="none" stroke="#F2C811" stroke-width="1.5"/>
-    <circle cx="22" cy="24" r="10" fill="none" stroke="#F2C811" stroke-width="1.5"/>
-    <circle cx="22" cy="24" r="4" fill="#F2C811" opacity="0.4"/>
-    <rect x="14" y="4" width="16" height="8" rx="2" fill="none" stroke="#F2C811" stroke-width="1"/>
+  <!-- Step 2: Snapshot -->
+  <rect x="258" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
+  <circle cx="338" cy="100" r="14" fill="#F2C811"/>
+  <text x="338" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
+  <text x="338" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
+  <!-- Camera icon -->
+  <g transform="translate(308, 140)">
+    <rect x="0" y="10" width="50" height="34" rx="5" fill="none" stroke="#F2C811" stroke-width="1.5"/>
+    <circle cx="25" cy="27" r="11" fill="none" stroke="#F2C811" stroke-width="1.5"/>
+    <circle cx="25" cy="27" r="5" fill="#F2C811" opacity="0.3"/>
+    <rect x="16" y="4" width="18" height="10" rx="3" fill="none" stroke="#F2C811" stroke-width="1.2"/>
   </g>
-  <text x="292" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Captures your</text>
-  <text x="292" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">PBIR changes</text>
+  <text x="338" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">Captures your</text>
+  <text x="338" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#F2C811" text-anchor="middle" font-weight="600">PBIR changes</text>
 
   <!-- Arrow 2 > 3 -->
-  <line x1="375" y1="140" x2="400" y2="140" stroke="#F2C811" stroke-width="2"/>
-  <polygon points="405,140 398,135 398,145" fill="#F2C811"/>
+  <line x1="423" y1="155" x2="446" y2="155" stroke="#F2C811" stroke-width="2.5"/>
+  <polygon points="451,155 443,149 443,161" fill="#F2C811"/>
 
-  <!-- ============ Step 3: Desktop Saves ============ -->
-  <rect x="410" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#06d6a0" stroke-width="1.5"/>
-  <circle cx="432" cy="100" r="12" fill="#06d6a0"/>
-  <text x="432" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
-  <text x="503" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
-  <!-- Floppy/save icon with checkmark -->
-  <g transform="translate(453, 118)">
-    <rect x="0" y="0" width="40" height="40" rx="4" fill="none" stroke="#06d6a0" stroke-width="1.5"/>
-    <rect x="8" y="0" width="24" height="14" rx="2" fill="none" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
-    <rect x="6" y="24" width="28" height="14" rx="2" fill="#06d6a0" opacity="0.15"/>
-    <!-- Checkmark -->
-    <polyline points="12,32 18,38 30,26" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Step 3: Desktop Saves -->
+  <rect x="456" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#06d6a0" stroke-width="1.5"/>
+  <circle cx="536" cy="100" r="14" fill="#06d6a0"/>
+  <text x="536" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
+  <text x="536" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
+  <!-- Save icon with checkmark -->
+  <g transform="translate(508, 140)">
+    <rect x="0" y="0" width="44" height="44" rx="5" fill="none" stroke="#06d6a0" stroke-width="1.5"/>
+    <rect x="10" y="0" width="24" height="16" rx="3" fill="none" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
+    <rect x="7" y="26" width="30" height="16" rx="3" fill="#06d6a0" opacity="0.12"/>
+    <!-- Large checkmark -->
+    <polyline points="14,36 20,42 32,28" fill="none" stroke="#06d6a0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
   </g>
-  <text x="487" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Preserves your</text>
-  <text x="487" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#06d6a0" text-anchor="middle" font-weight="600">modeling work</text>
+  <text x="536" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">Preserves your</text>
+  <text x="536" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0" text-anchor="middle" font-weight="600">modeling work</text>
 
   <!-- Arrow 3 > 4 -->
-  <line x1="570" y1="140" x2="595" y2="140" stroke="#F2C811" stroke-width="2"/>
-  <polygon points="600,140 593,135 593,145" fill="#F2C811"/>
+  <line x1="621" y1="155" x2="644" y2="155" stroke="#F2C811" stroke-width="2.5"/>
+  <polygon points="649,155 641,149 641,161" fill="#F2C811"/>
 
-  <!-- ============ Step 4: Re-apply + Reopen ============ -->
-  <rect x="605" y="80" width="225" height="120" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
-  <circle cx="627" cy="100" r="12" fill="#d97757"/>
-  <text x="627" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
-  <text x="735" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#d97757" text-anchor="middle" font-weight="bold">Re-apply + Reopen</text>
+  <!-- Step 4: Re-apply + Reopen -->
+  <rect x="654" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
+  <circle cx="734" cy="100" r="14" fill="#d97757"/>
+  <text x="734" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
+  <text x="734" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#d97757" text-anchor="middle" font-weight="bold">Reopen</text>
   <!-- Refresh/cycle icon -->
-  <g transform="translate(680, 118)">
-    <path d="M 20,2 A 18,18 0 1,1 2,20" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>
-    <polygon points="20,2 14,0 16,8" fill="#d97757"/>
-    <path d="M 20,38 A 18,18 0 1,1 38,20" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
-    <polygon points="20,38 26,40 24,32" fill="#06d6a0"/>
-    <!-- Center PBI icon -->
-    <rect x="13" y="13" width="5" height="14" rx="1" fill="#F2C811" opacity="0.6"/>
-    <rect x="19" y="17" width="5" height="10" rx="1" fill="#F2C811" opacity="0.8"/>
-    <rect x="25" y="20" width="5" height="7" rx="1" fill="#F2C811"/>
+  <g transform="translate(706, 140)">
+    <path d="M 24,2 A 22,22 0 1,1 2,24" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>
+    <polygon points="24,2 17,0 19,9" fill="#d97757"/>
+    <path d="M 24,46 A 22,22 0 1,1 46,24" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
+    <polygon points="24,46 31,48 29,39" fill="#06d6a0"/>
+    <!-- Center PBI mini icon -->
+    <rect x="16" y="15" width="6" height="18" rx="1" fill="#F2C811" opacity="0.6"/>
+    <rect x="23" y="20" width="6" height="13" rx="1" fill="#F2C811" opacity="0.8"/>
+    <rect x="30" y="24" width="6" height="9" rx="1" fill="#F2C811"/>
   </g>
-  <text x="717" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Restores PBIR changes,</text>
-  <text x="717" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#d97757" text-anchor="middle" font-weight="600">Desktop reopens fresh</text>
+  <text x="734" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">PBIR restored,</text>
+  <text x="734" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#d97757" text-anchor="middle" font-weight="600">Desktop reopens</text>
 
-  <!-- ============ Bottom: Before/After comparison ============ -->
-  <rect x="80" y="218" width="690" height="1" fill="url(#sync-glow)"/>
+  <!-- ============ Bottom comparison ============ -->
+  <rect x="60" y="258" width="730" height="1" fill="url(#sync-glow)"/>
 
-  <!-- Before -->
-  <rect x="50" y="235" width="350" height="85" rx="8" fill="#161b22" stroke="#ff6b6b" stroke-width="1" stroke-opacity="0.5"/>
-  <text x="225" y="258" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b" text-anchor="middle" font-weight="bold">Without Auto-Sync</text>
-  <text x="80" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b">&#x2717;</text>
-  <text x="98" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Close Desktop manually after every change</text>
-  <text x="80" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b">&#x2717;</text>
-  <text x="98" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Risk losing unsaved modeling work</text>
+  <!-- Without -->
+  <rect x="60" y="275" width="350" height="85" rx="8" fill="#161b22" stroke="#ff6b6b" stroke-width="1" stroke-opacity="0.5"/>
+  <text x="235" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b" text-anchor="middle" font-weight="bold">Without Auto-Sync</text>
+  <text x="90" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b">&#x2717;</text>
+  <text x="110" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Close Desktop manually every time</text>
+  <text x="90" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b">&#x2717;</text>
+  <text x="110" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Risk losing unsaved modeling work</text>
 
-  <!-- After -->
-  <rect x="450" y="235" width="350" height="85" rx="8" fill="#161b22" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
-  <text x="625" y="258" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">With Auto-Sync</text>
-  <text x="480" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0">&#x2713;</text>
-  <text x="498" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">Desktop reopens automatically</text>
-  <text x="480" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0">&#x2713;</text>
-  <text x="498" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">All your work is preserved -- both layers</text>
+  <!-- With -->
+  <rect x="440" y="275" width="350" height="85" rx="8" fill="#161b22" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
+  <text x="615" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0" text-anchor="middle" font-weight="bold">With Auto-Sync</text>
+  <text x="470" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0">&#x2713;</text>
+  <text x="490" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">Desktop reopens automatically</text>
+  <text x="470" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0">&#x2713;</text>
+  <text x="490" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">All work preserved -- both layers</text>
 </svg>