diff --git a/index.html b/index.html
index 501f178..8887a8a 100644
--- a/index.html
+++ b/index.html
@@ -171,20 +171,107 @@ Open source & public domain — no moat, no castle, just infrastructure
       Marketplaces charge 15&#8211;40% commission on every sale. That adds up fast. On a $20 sale at a 30% marketplace, you walk away with $14. On Make Post Sell, you keep <b>$19.12</b> after <a href="https://stripe.com/pricing" target="_blank">payment processing</a>.
 
       <div class="mps-comparison">
-        <div class="mps-comparison-card marketplace">
+
+        <!-- Marketplace donut: 70% you, 3.5% processing, 26.5% marketplace -->
+        <div class="mps-comparison-card marketplace" style="padding-bottom: 30px;">
+          <svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;">
+            <!-- You: 70% = 252° -->
+            <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
+              stroke="#678731" stroke-width="30"
+              stroke-dasharray="307.8 131.9" stroke-dashoffset="110"
+              transform="rotate(-90 100 100)" />
+            <!-- Payment Processing: 3.5% = 12.6° -->
+            <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
+              stroke="#d4a843" stroke-width="30"
+              stroke-dasharray="15.4 424.3" stroke-dashoffset="-197.8"
+              transform="rotate(-90 100 100)" />
+            <!-- Marketplace: 26.5% = 95.4° -->
+            <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
+              stroke="#c77765" stroke-width="30"
+              stroke-dasharray="116.5 323.2" stroke-dashoffset="-213.2"
+              transform="rotate(-90 100 100)" />
+            <!-- Center hole -->
+            <circle cx="100" cy="100" r="55" fill="#f8d7da" />
+          </svg>
+
+          <div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
+            <span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 70%</span>
+            <span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
+            <span style="font-size: 12px;"><span style="color: #c77765;">&#9632;</span> Marketplace 26.5%</span>
+          </div>
+
           <span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
           <span class="mps-comparison-label">Marketplace (30% commission)</span>
         </div>
-        <div class="mps-comparison-card mps">
+
+        <!-- MPS donut: 96.5% you, 3.5% processing -->
+        <div class="mps-comparison-card mps" style="padding-bottom: 30px;">
+          <svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;">
+            <!-- You: 96.5% = 347.4° -->
+            <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
+              stroke="#678731" stroke-width="30"
+              stroke-dasharray="424.3 15.4" stroke-dashoffset="110"
+              transform="rotate(-90 100 100)" />
+            <!-- Payment Processing: 3.5% = 12.6° -->
+            <circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
+              stroke="#d4a843" stroke-width="30"
+              stroke-dasharray="15.4 424.3" stroke-dashoffset="-314.3"
+              transform="rotate(-90 100 100)" />
+            <!-- Center hole -->
+            <circle cx="100" cy="100" r="55" fill="#e8f5d4" />
+          </svg>
+
+          <div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
+            <span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 96.5%</span>
+            <span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
+          </div>
+
           <span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
           <span class="mps-comparison-label">Make Post Sell (0% commission)</span>
         </div>
+
       </div>
 
       That gap compounds. Run <a target="_blank" href="https://docs.google.com/spreadsheets/d/138fW3wlNowTv09nKeIe_TZrWsLIHVoD7PdlI2HXGmLs/copy?usp=sharing">your own numbers</a> to see how much commission-free saves over a year.
 
     </section>
 
+<script>
+// Animate donut charts when they scroll into view
+(function() {
+  var animated = false;
+  var segments = document.querySelectorAll('.donut-animate');
+
+  // Set initial state: all segments start with no visible stroke
+  segments.forEach(function(seg) {
+    seg.style.opacity = '0';
+    seg.style.transition = 'stroke-dasharray 1.2s ease-out, opacity 0.4s ease';
+  });
+
+  function animateDonuts() {
+    if (animated) return;
+    var charts = document.querySelectorAll('.donut-chart');
+    for (var i = 0; i < charts.length; i++) {
+      var rect = charts[i].getBoundingClientRect();
+      if (rect.top < window.innerHeight * 0.85) {
+        animated = true;
+        segments.forEach(function(seg, idx) {
+          setTimeout(function() {
+            seg.style.opacity = '1';
+          }, idx * 150);
+        });
+        window.removeEventListener('scroll', animateDonuts);
+        break;
+      }
+    }
+  }
+
+  window.addEventListener('scroll', animateDonuts);
+  // Also check on load in case already visible
+  animateDonuts();
+})();
+</script>
+
     <hr class="mps-section-divider"/>
 
     <!-- ======== PROTECTION ======== -->