From 7c09a57610317f4133d91a2b2b02c8aa2cf1dda7 Mon Sep 17 00:00:00 2001
From: Hananoshika Yomaru <brenkysbwim@gmail.com>
Date: Tue, 19 May 2026 13:40:19 -0700
Subject: [PATCH] Enhance SVG illustrations with animations and improved
 designs: update multiple SVG files to include floating and pulsing effects,
 modify titles and structures for clarity, and ensure consistent styling
 across illustrations. Update SASS for animation handling in the why-sections.

---
 themes/openfreebooks/sass/_why-sections.scss  | 38 +++++++++++++
 .../partials/svg/icons/tabler-coin.html       |  3 +
 .../partials/svg/icons/tabler-user.html       |  2 +
 .../templates/partials/svg/why-craft.html     | 54 +++++++++++++-----
 .../templates/partials/svg/why-html.html      | 56 +++++++++++++-----
 .../templates/partials/svg/why-learning.html  | 29 ++++++----
 .../templates/partials/svg/why-not-ai.html    | 57 +++++++++++++++----
 .../templates/partials/svg/why-teachers.html  | 28 ++++++---
 .../partials/svg/why-textbook-costs.html      | 30 ++++++----
 9 files changed, 229 insertions(+), 68 deletions(-)
 create mode 100644 themes/openfreebooks/templates/partials/svg/icons/tabler-coin.html
 create mode 100644 themes/openfreebooks/templates/partials/svg/icons/tabler-user.html

diff --git a/themes/openfreebooks/sass/_why-sections.scss b/themes/openfreebooks/sass/_why-sections.scss
index cf82fa9..8951606 100644
--- a/themes/openfreebooks/sass/_why-sections.scss
+++ b/themes/openfreebooks/sass/_why-sections.scss
@@ -36,6 +36,39 @@
   width: min(100%, 280px);
   height: auto;
   display: block;
+  overflow: visible;
+}
+
+.why-art.is-inview .why-illustration__float {
+  animation: why-illustration-float 4.5s ease-in-out infinite;
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+.why-art.is-inview .why-illustration__pulse {
+  animation: why-illustration-pulse 2.8s ease-in-out infinite;
+}
+
+@keyframes why-illustration-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes why-illustration-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.45;
+  }
 }
 
 .why-copy {
@@ -245,6 +278,11 @@ $university-colors: (
     transition: none;
   }
 
+  .why-illustration__float,
+  .why-illustration__pulse {
+    animation: none !important;
+  }
+
   .university-carousel-track {
     animation: none;
     flex-wrap: wrap;
diff --git a/themes/openfreebooks/templates/partials/svg/icons/tabler-coin.html b/themes/openfreebooks/templates/partials/svg/icons/tabler-coin.html
new file mode 100644
index 0000000..9e617e5
--- /dev/null
+++ b/themes/openfreebooks/templates/partials/svg/icons/tabler-coin.html
@@ -0,0 +1,3 @@
+<path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/>
+<path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1"/>
+<path d="M12 7v10"/>
diff --git a/themes/openfreebooks/templates/partials/svg/icons/tabler-user.html b/themes/openfreebooks/templates/partials/svg/icons/tabler-user.html
new file mode 100644
index 0000000..8fb3fa2
--- /dev/null
+++ b/themes/openfreebooks/templates/partials/svg/icons/tabler-user.html
@@ -0,0 +1,2 @@
+<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/>
+<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/>
diff --git a/themes/openfreebooks/templates/partials/svg/why-craft.html b/themes/openfreebooks/templates/partials/svg/why-craft.html
index 899b6d6..627491e 100644
--- a/themes/openfreebooks/templates/partials/svg/why-craft.html
+++ b/themes/openfreebooks/templates/partials/svg/why-craft.html
@@ -1,14 +1,42 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-  <title>Scholars and institutions worldwide</title>
-  <circle cx="100" cy="92" r="46" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
-  <path d="M54 92 C54 68 74 52 100 52 C126 52 146 68 146 92" fill="var(--accent)" fill-opacity="0.08" stroke="none"/>
-  <path d="M54 92 C72 108 88 112 100 112 C112 112 128 108 146 92" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
-  <path d="M54 92 C68 76 84 68 100 68 C116 68 132 76 146 92" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
-  <circle cx="72" cy="148" r="10" fill="none" stroke="var(--ink)" stroke-width="1.2"/>
-  <path d="M66 158 C66 150 69 146 72 146 C75 146 78 150 78 158 L78 168 L66 168 Z" fill="none" stroke="var(--ink)" stroke-width="1.2" stroke-linejoin="round"/>
-  <circle cx="100" cy="152" r="10" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
-  <path d="M94 162 C94 154 97 150 100 150 C103 150 106 154 106 162 L106 172 L94 172 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
-  <circle cx="128" cy="148" r="10" fill="none" stroke="var(--ink)" stroke-width="1.2"/>
-  <path d="M122 158 C122 150 125 146 128 146 C131 146 134 150 134 158 L134 168 L122 168 Z" fill="none" stroke="var(--ink)" stroke-width="1.2" stroke-linejoin="round"/>
-  <path d="M82 48 L88 36 M100 44 L100 32 M118 48 L112 36" stroke="var(--accent)" stroke-width="1" stroke-linecap="round" opacity="0.6"/>
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+  <title>Scholars worldwide on Earth</title>
+
+  <!-- Earth -->
+  <g>
+    <circle cx="100" cy="70" r="52" fill="var(--accent)" fill-opacity="0.08" stroke="var(--ink)" stroke-width="1.5"/>
+    <ellipse cx="100" cy="70" rx="52" ry="16" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
+    <ellipse cx="100" cy="50" rx="36" ry="9" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <ellipse cx="100" cy="90" rx="36" ry="9" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <path d="M100 18 C70 36 70 104 100 122 C130 104 130 36 100 18" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.4"/>
+    <path d="M62 70 C62 46 62 94 62 70" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <path d="M138 70 C138 46 138 94 138 70" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <!-- continents — varied sizes -->
+    <path d="M54 62 C48 48 58 36 72 40 C80 46 78 58 70 66 C62 74 52 72 54 62 Z" fill="var(--accent)" fill-opacity="0.28" stroke="none"/>
+    <path d="M96 38 C108 32 124 36 130 48 C126 58 110 56 102 50 C98 44 96 38 96 38 Z" fill="var(--accent)" fill-opacity="0.24" stroke="none"/>
+    <path d="M88 58 C96 52 108 54 112 68 C108 82 94 80 88 68 Z" fill="var(--accent)" fill-opacity="0.22" stroke="none"/>
+    <path d="M118 86 C126 82 134 88 132 96 C126 100 118 96 118 86 Z" fill="var(--accent)" fill-opacity="0.2" stroke="none"/>
+    <path d="M72 88 C76 86 80 90 76 94 C72 94 70 90 72 88 Z" fill="var(--accent)" fill-opacity="0.18" stroke="none"/>
+    <path d="M108 72 C112 70 116 74 114 78 C110 78 108 74 108 72 Z" fill="var(--accent)" fill-opacity="0.16" stroke="none"/>
+  </g>
+
+  <path d="M56 121 L76 108 M100 118 L100 108 M144 121 L124 108" stroke="var(--accent)" stroke-width="1" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.55"/>
+
+  <!-- scholars worldwide -->
+  <g class="why-illustration__float">
+    <g>
+      <circle cx="56" cy="132" r="11" fill="var(--card-bg)" stroke="var(--ink)" stroke-width="1.5"/>
+      <path d="M42 154 C42 146 48 142 56 142 C64 142 70 146 70 154 L70 166 L42 166 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+      <path d="M56 166 L56 180 M46 180 L66 180" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <g>
+      <circle cx="100" cy="130" r="12" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
+      <path d="M84 152 C84 143 92 138 100 138 C108 138 116 143 116 152 L116 166 L84 166 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
+      <path d="M100 166 L100 180 M88 180 L112 180" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+    <g>
+      <circle cx="144" cy="132" r="11" fill="var(--card-bg)" stroke="var(--ink)" stroke-width="1.5"/>
+      <path d="M130 154 C130 146 136 142 144 142 C152 142 158 146 158 154 L158 166 L130 166 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+      <path d="M144 166 L144 180 M134 180 L154 180" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+    </g>
+  </g>
 </svg>
diff --git a/themes/openfreebooks/templates/partials/svg/why-html.html b/themes/openfreebooks/templates/partials/svg/why-html.html
index 94e09c6..beba10e 100644
--- a/themes/openfreebooks/templates/partials/svg/why-html.html
+++ b/themes/openfreebooks/templates/partials/svg/why-html.html
@@ -1,15 +1,43 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-  <title>Paper and PDF versus interactive HTML</title>
-  <rect x="24" y="48" width="56" height="72" rx="2" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
-  <path d="M32 60 L72 60 M32 72 L68 72 M32 84 L64 84" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
-  <text x="52" y="108" text-anchor="middle" font-family="var(--mono)" font-size="9" fill="var(--muted)">PDF</text>
-  <rect x="88" y="48" width="56" height="72" rx="2" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.5"/>
-  <path d="M96 60 L136 60 M96 72 L132 72" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
-  <path d="M148 56 L148 160" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"/>
-  <path d="M140 72 L156 72 L152 88 L144 88 Z" fill="var(--accent)" fill-opacity="0.2" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
-  <rect x="156" y="56" width="36" height="104" rx="4" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
-  <path d="M164 72 L184 72 M164 84 L180 84 M164 96 L182 96" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
-  <circle cx="174" cy="118" r="8" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
-  <path d="M171 118 L173 120 L177 114" fill="none" stroke="var(--accent)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
-  <text x="174" y="140" text-anchor="middle" font-family="var(--mono)" font-size="8" fill="var(--accent)">&lt;/&gt;</text>
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+  <title>Physical book to digital book to interactive web</title>
+
+  <!-- 1. Physical book -->
+  <g>
+    <rect x="14" y="74" width="10" height="56" rx="1" fill="var(--accent)" fill-opacity="0.28" stroke="var(--ink)" stroke-width="1.2"/>
+    <rect x="24" y="72" width="36" height="60" rx="2" fill="var(--card-bg)" stroke="var(--ink)" stroke-width="1.5"/>
+    <path d="M30 86 L52 86 M30 96 L50 96 M30 106 L48 106 M30 116 L46 116" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
+    <text x="32" y="156" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="var(--muted)">PRINT</text>
+  </g>
+
+  <!-- arrow -->
+  <path d="M66 104 L74 104 M70 100 L74 104 L70 108" fill="none" stroke="var(--soft-ink)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- 2. Digital book (tablet / PDF) -->
+  <g>
+    <rect x="82" y="68" width="48" height="72" rx="5" fill="var(--card-bg)" stroke="var(--ink)" stroke-width="1.5"/>
+    <rect x="88" y="76" width="36" height="52" rx="2" fill="var(--paper)" stroke="var(--soft-ink)" stroke-width="1"/>
+    <path d="M94 88 L118 88 M94 98 L116 98 M94 108 L114 108 M94 118 L112 118" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round" opacity="0.65"/>
+    <rect x="94" y="122" width="20" height="4" rx="1" fill="var(--muted)" opacity="0.35"/>
+    <text x="106" y="156" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="var(--muted)">PDF</text>
+  </g>
+
+  <!-- arrow -->
+  <path d="M136 104 L144 104 M140 100 L144 104 L140 108" fill="none" stroke="var(--accent)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+
+  <!-- 3. Interactive web -->
+  <g class="why-illustration__float">
+    <rect x="150" y="58" width="44" height="92" rx="4" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
+    <path d="M158 68 L186 68" stroke="var(--line)" stroke-width="1"/>
+    <circle cx="162" cy="64" r="2" fill="var(--accent)" opacity="0.7"/>
+    <circle cx="168" cy="64" r="2" fill="var(--soft-ink)" opacity="0.5"/>
+    <circle cx="174" cy="64" r="2" fill="var(--soft-ink)" opacity="0.5"/>
+    <rect x="158" y="72" width="28" height="6" rx="2" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
+    <path d="M158 88 C166 80 174 96 182 88 C186 84 186 100 178 98 C170 96 166 104 158 96 Z" fill="var(--accent)" fill-opacity="0.18" stroke="var(--accent)" stroke-width="1.1" stroke-linejoin="round"/>
+    <path d="M158 110 L168 110 L164 118 L160 118 Z" fill="var(--accent)" fill-opacity="0.25" stroke="var(--accent)" stroke-width="1" stroke-linejoin="round"/>
+    <path d="M172 110 L184 110" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
+    <circle cx="178" cy="126" r="5" fill="none" stroke="var(--success)" stroke-width="1.1"/>
+    <path d="M176 126 L177.5 127.5 L180.5 123.5" fill="none" stroke="var(--success)" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
+    <text x="172" y="142" text-anchor="middle" font-family="var(--mono)" font-size="7" fill="var(--accent)">&lt;/&gt;</text>
+    <text x="172" y="156" text-anchor="middle" font-family="var(--mono)" font-size="7" letter-spacing="0.08em" fill="var(--accent)">WEB</text>
+  </g>
 </svg>
diff --git a/themes/openfreebooks/templates/partials/svg/why-learning.html b/themes/openfreebooks/templates/partials/svg/why-learning.html
index 152236e..5f8187a 100644
--- a/themes/openfreebooks/templates/partials/svg/why-learning.html
+++ b/themes/openfreebooks/templates/partials/svg/why-learning.html
@@ -1,11 +1,20 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-  <title>Student thinking with a textbook</title>
-  <circle cx="100" cy="52" r="20" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
-  <path d="M68 108 C68 86 82 74 100 74 C118 74 132 86 132 108 L132 132 L68 132 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
-  <rect x="88" y="136" width="24" height="32" rx="2" fill="var(--accent)" fill-opacity="0.15" stroke="var(--accent)" stroke-width="1.5"/>
-  <path d="M94 148 L106 148 M94 156 L106 156" stroke="var(--accent)" stroke-width="1" stroke-linecap="round"/>
-  <path d="M44 64 Q28 48 36 32" fill="none" stroke="var(--soft-ink)" stroke-width="1.2" stroke-linecap="round"/>
-  <path d="M40 36 L36 28 M44 34 L48 26" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
-  <text x="32" y="56" font-family="var(--font-heading)" font-size="14" fill="var(--accent)" font-style="italic">?</text>
-  <path d="M156 72 L168 60 M160 88 L176 88" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+  <title>Learner with an active mind and a textbook guide</title>
+  <path d="M100 132 L100 162 M88 162 L112 162" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M94 77 L106 77 L124 84 C128 102 128 120 124 132 L76 132 C72 120 72 102 76 84 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M76 84 L92 142" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M124 84 L108 142" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="100" cy="56" r="21" fill="var(--card-bg)" stroke="var(--ink)" stroke-width="1.5"/>
+  <g class="why-illustration__pulse">
+    <path d="M100 46 C92 46 87 52 87 60 C87 65 91 69 95 69 C94 72 97 74 100 74 C103 74 106 72 105 69 C109 69 113 65 113 60 C113 52 108 46 100 46 Z" fill="var(--accent)" fill-opacity="0.28" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
+    <path d="M100 48 L100 72" stroke="var(--accent)" stroke-width="1" opacity="0.55"/>
+    <path d="M93 54 C95 60 97 63 100 61" fill="none" stroke="var(--accent)" stroke-width="0.9" stroke-linecap="round" opacity="0.6"/>
+    <path d="M107 54 C105 60 103 63 100 61" fill="none" stroke="var(--accent)" stroke-width="0.9" stroke-linecap="round" opacity="0.6"/>
+    <path d="M96 66 C98 68 102 68 104 66" fill="none" stroke="var(--accent)" stroke-width="0.8" stroke-linecap="round" opacity="0.45"/>
+  </g>
+  <g class="why-illustration__float">
+    <path d="M84 144 L84 172 L116 172 L116 144 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M84 144 L100 136 L116 144" fill="var(--accent)" fill-opacity="0.22" stroke="var(--accent)" stroke-width="1.2" stroke-linejoin="round"/>
+    <path d="M90 156 L110 156 M90 164 L106 164" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.45"/>
+  </g>
 </svg>
diff --git a/themes/openfreebooks/templates/partials/svg/why-not-ai.html b/themes/openfreebooks/templates/partials/svg/why-not-ai.html
index 68dda8f..de6ea4e 100644
--- a/themes/openfreebooks/templates/partials/svg/why-not-ai.html
+++ b/themes/openfreebooks/templates/partials/svg/why-not-ai.html
@@ -1,13 +1,46 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-  <title>Open textbook and the earth</title>
-  <circle cx="100" cy="100" r="44" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
-  <path d="M56 100 C56 72 76 56 100 56 C124 56 144 72 144 100 C144 128 124 144 100 144 C76 144 56 128 56 100 Z" fill="var(--accent)" fill-opacity="0.08" stroke="none"/>
-  <path d="M56 92 C80 88 88 108 100 108 C112 108 120 88 144 92" fill="none" stroke="var(--accent)" stroke-width="1.2"/>
-  <path d="M64 112 C88 118 96 98 108 98 C120 98 128 118 136 112" fill="none" stroke="var(--soft-ink)" stroke-width="1"/>
-  <rect x="128" y="36" width="48" height="40" rx="6" fill="none" stroke="var(--muted)" stroke-width="1.2" stroke-dasharray="4 3" opacity="0.55"/>
-  <path d="M136 52 L168 52 M136 60 L160 60" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
-  <path d="M120 36 L128 28" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round"/>
-  <rect x="72" y="118" width="56" height="40" rx="2" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
-  <path d="M80 132 L120 132 M80 142 L112 142" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.5"/>
-  <text x="100" y="154" text-anchor="middle" font-family="var(--mono)" font-size="7" fill="var(--accent)">OPEN</text>
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+  <title>One open web textbook for Earth, not endless AI prompts</title>
+
+  <!-- Earth -->
+  <g>
+    <circle cx="100" cy="72" r="44" fill="var(--accent)" fill-opacity="0.08" stroke="var(--ink)" stroke-width="1.5"/>
+    <ellipse cx="100" cy="72" rx="44" ry="14" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
+    <ellipse cx="100" cy="54" rx="30" ry="8" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <ellipse cx="100" cy="90" rx="30" ry="8" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <path d="M100 28 C74 44 74 100 100 116 C126 100 126 44 100 28" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.4"/>
+    <path d="M68 72 C68 50 68 94 68 72" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <path d="M132 72 C132 50 132 94 132 72" fill="none" stroke="var(--soft-ink)" stroke-width="0.9" opacity="0.35"/>
+    <path d="M66 58 C72 48 86 50 90 62 C84 70 72 66 66 58 Z" fill="var(--accent)" fill-opacity="0.24" stroke="none"/>
+    <path d="M110 52 C122 44 136 50 138 64 C132 74 116 70 110 52 Z" fill="var(--accent)" fill-opacity="0.24" stroke="none"/>
+    <path d="M86 80 C94 74 110 76 114 90 C106 98 90 94 86 80 Z" fill="var(--accent)" fill-opacity="0.18" stroke="none"/>
+  </g>
+
+  <!-- One interactive web textbook (good) -->
+  <g class="why-illustration__float">
+    <rect x="20" y="112" width="56" height="76" rx="4" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
+    <path d="M28 124 L68 124" stroke="var(--line)" stroke-width="1"/>
+    <circle cx="32" cy="120" r="2" fill="var(--accent)" opacity="0.75"/>
+    <circle cx="38" cy="120" r="2" fill="var(--soft-ink)" opacity="0.45"/>
+    <circle cx="44" cy="120" r="2" fill="var(--soft-ink)" opacity="0.45"/>
+    <rect x="28" y="128" width="32" height="6" rx="2" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
+    <path d="M28 144 C36 136 44 152 52 144 C56 140 60 152 56 156 C48 160 40 152 28 144 Z" fill="var(--accent)" fill-opacity="0.18" stroke="var(--accent)" stroke-width="1.1" stroke-linejoin="round"/>
+    <path d="M28 162 L40 162 L36 170 L32 170 Z" fill="var(--accent)" fill-opacity="0.22" stroke="var(--accent)" stroke-width="1" stroke-linejoin="round"/>
+    <path d="M44 162 L64 162" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round"/>
+    <text x="56" y="176" text-anchor="end" font-family="var(--mono)" font-size="6" fill="var(--accent)">&lt;/&gt;</text>
+    <circle cx="68" cy="108" r="11" fill="var(--card-bg)" stroke="var(--success)" stroke-width="1.4"/>
+    <path d="M63 108 L66 111 L73 104" fill="none" stroke="var(--success)" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <!-- Many duplicate AI prompts (bad) -->
+  <g class="why-illustration__pulse" opacity="0.7">
+    <rect x="126" y="36" width="58" height="30" rx="6" fill="var(--card-bg)" stroke="var(--muted)" stroke-width="1.2"/>
+    <path d="M134 48 L176 48 M134 56 L168 56" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.55"/>
+    <rect x="134" y="72" width="58" height="30" rx="6" fill="var(--card-bg)" stroke="var(--muted)" stroke-width="1.2"/>
+    <path d="M142 84 L180 84 M142 92 L174 92" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.55"/>
+    <rect x="118" y="108" width="58" height="30" rx="6" fill="var(--card-bg)" stroke="var(--muted)" stroke-width="1.2"/>
+    <path d="M126 120 L168 120 M126 128 L162 128" stroke="var(--muted)" stroke-width="1" stroke-linecap="round" opacity="0.55"/>
+    <text x="152" y="52" text-anchor="middle" font-family="var(--mono)" font-size="6" fill="var(--muted)">AI</text>
+    <path d="M114 30 L188 148" stroke="var(--muted)" stroke-width="2" stroke-linecap="round"/>
+    <path d="M188 30 L114 148" stroke="var(--muted)" stroke-width="2" stroke-linecap="round"/>
+  </g>
 </svg>
diff --git a/themes/openfreebooks/templates/partials/svg/why-teachers.html b/themes/openfreebooks/templates/partials/svg/why-teachers.html
index 6232c34..dd58e54 100644
--- a/themes/openfreebooks/templates/partials/svg/why-teachers.html
+++ b/themes/openfreebooks/templates/partials/svg/why-teachers.html
@@ -1,10 +1,22 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
   <title>Teacher guiding, open textbook</title>
-  <circle cx="72" cy="56" r="18" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
-  <path d="M48 108 C48 88 60 78 72 78 C84 78 96 88 96 108 L96 130 L48 130 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
-  <path d="M56 98 L88 98" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
-  <path d="M108 72 L108 148 L168 148 L168 88 L148 72 Z" fill="var(--accent)" fill-opacity="0.1" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
-  <path d="M116 92 L160 92 M116 108 L152 108 M116 124 L156 124" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.6"/>
-  <path d="M72 130 L72 160 M60 160 L84 160" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
-  <path d="M100 56 L132 72" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 3"/>
+  <circle cx="64" cy="56" r="18" fill="none" stroke="var(--ink)" stroke-width="1.5"/>
+  <path d="M40 108 C40 88 52 78 64 78 C76 78 88 88 88 108 L88 130 L40 130 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M48 98 L72 98" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
+  <path d="M88 94 L118 88" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="120" cy="87" r="2.5" fill="var(--ink)"/>
+  <path d="M64 130 L64 160 M52 160 L76 160" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round"/>
+  <g class="why-illustration__float">
+    <rect x="108" y="52" width="80" height="108" rx="5" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5"/>
+    <path d="M116 64 L180 64" stroke="var(--line)" stroke-width="1"/>
+    <circle cx="122" cy="60" r="2" fill="var(--accent)" opacity="0.75"/>
+    <circle cx="128" cy="60" r="2" fill="var(--soft-ink)" opacity="0.45"/>
+    <circle cx="134" cy="60" r="2" fill="var(--soft-ink)" opacity="0.45"/>
+    <rect x="116" y="68" width="48" height="7" rx="2" fill="none" stroke="var(--soft-ink)" stroke-width="1" opacity="0.5"/>
+    <path d="M116 84 L176 84 M116 96 L168 96 M116 108 L172 108 M116 120 L160 120" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.45"/>
+    <path d="M116 132 C128 124 140 140 152 132 C160 126 168 142 176 134" fill="none" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round"/>
+    <path d="M116 148 L128 148 L124 154 L120 154 Z" fill="var(--accent)" fill-opacity="0.22" stroke="var(--accent)" stroke-width="1" stroke-linejoin="round"/>
+    <text x="168" y="152" text-anchor="end" font-family="var(--mono)" font-size="7" fill="var(--accent)">&lt;/&gt;</text>
+  </g>
+  <path d="M64 54 L132 100" stroke="var(--accent)" stroke-width="1.2" stroke-linecap="round" stroke-dasharray="2 3" opacity="0.65"/>
 </svg>
diff --git a/themes/openfreebooks/templates/partials/svg/why-textbook-costs.html b/themes/openfreebooks/templates/partials/svg/why-textbook-costs.html
index 73f97ee..9227639 100644
--- a/themes/openfreebooks/templates/partials/svg/why-textbook-costs.html
+++ b/themes/openfreebooks/templates/partials/svg/why-textbook-costs.html
@@ -1,12 +1,20 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
-  <title>Stack of textbooks and cost</title>
-  <rect x="48" y="118" width="104" height="12" rx="2" fill="var(--accent)" opacity="0.25"/>
-  <path d="M52 118 L52 72 L88 64 L88 118 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
-  <path d="M88 118 L88 64 L124 72 L124 118 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
-  <path d="M124 118 L124 76 L160 84 L160 118 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
-  <path d="M56 72 L88 64 L88 68 L56 76 Z" fill="var(--accent)" fill-opacity="0.35" stroke="none"/>
-  <circle cx="148" cy="52" r="28" fill="none" stroke="var(--accent)" stroke-width="1.5"/>
-  <text x="148" y="58" text-anchor="middle" font-family="var(--mono)" font-size="18" fill="var(--accent)">$</text>
-  <path d="M36 148 L164 148" stroke="var(--ink)" stroke-width="1" stroke-dasharray="4 4" opacity="0.4"/>
-  <path d="M72 40 L72 28 M68 34 L76 34" stroke="var(--soft-ink)" stroke-width="1.2" stroke-linecap="round"/>
+<svg class="why-illustration" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true">
+  <title>Stack of textbooks and rising cost</title>
+  <g class="why-illustration__float">
+    <path d="M40 130 L168 130" stroke="var(--ink)" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
+    <path d="M52 130 L52 74 L88 66 L88 130 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M60 90 L82 90 M60 102 L80 102 M60 114 L78 114" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round" opacity="0.55"/>
+    <path d="M56 74 L88 66 L88 70 L56 78 Z" fill="var(--accent)" fill-opacity="0.3" stroke="none"/>
+    <path d="M88 130 L88 66 L124 74 L124 130 Z" fill="none" stroke="var(--ink)" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M96 90 L118 90 M96 102 L116 102" stroke="var(--soft-ink)" stroke-width="1" stroke-linecap="round" opacity="0.55"/>
+    <path d="M124 130 L124 78 L160 86 L160 130 Z" fill="var(--accent)" fill-opacity="0.12" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M132 94 L154 94 M132 106 L152 106 M132 118 L150 118" stroke="var(--ink)" stroke-width="1" stroke-linecap="round" opacity="0.4"/>
+    <path d="M128 78 L160 86 L160 90 L128 82 Z" fill="var(--accent)" fill-opacity="0.35" stroke="none"/>
+  </g>
+  <g class="why-illustration__pulse">
+    <path d="M132 36 L168 36 L168 72 L148 84 L132 72 Z" fill="var(--card-bg)" stroke="var(--accent)" stroke-width="1.5" stroke-linejoin="round"/>
+    <circle cx="148" cy="56" r="2" fill="var(--accent)" opacity="0.5"/>
+    <text x="150" y="60" text-anchor="middle" font-family="var(--mono)" font-size="22" font-weight="600" fill="var(--accent)">$</text>
+  </g>
+  <path d="M36 148 L164 148" stroke="var(--ink)" stroke-width="1" stroke-dasharray="4 4" opacity="0.35"/>
 </svg>