diff --git a/bitwarden-switch/password-manager-overview.html b/bitwarden-switch/password-manager-overview.html
index 001b792..a8c11e9 100644
--- a/bitwarden-switch/password-manager-overview.html
+++ b/bitwarden-switch/password-manager-overview.html
@@ -436,7 +436,7 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
 .prose b{color:var(--ink)}
 
 /* =========================================================================
-   SECTION 1 — WHY (key analogy + stat gauges)
+   SECTION 1 — WHY (key analogy + qualitative stat cards)
    ========================================================================= */
 .analogy{
   display:grid;grid-template-columns:1fr;gap:0;
@@ -463,21 +463,45 @@ section{padding:clamp(2.6rem,6vw,4.4rem) 0;border-top:1px solid var(--rule)}
 @media(min-width:760px){.analogy .keypic{border-top:none;border-left:1px solid var(--border)}}
 .analogy .keypic svg{width:100%;max-width:320px;height:auto;color:var(--accent)}
 
-/* stat gauges */
+/* stat cards — honest qualitative figures (no fake-percentage rings) */
 .stats{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px}
 @media(max-width:760px){.stats{grid-template-columns:1fr}}
 .stat{
+  --sc:var(--accent);            /* semantic colour, overridden per card */
+  --sc-wash:var(--accent-wash);
   background:var(--surface);border:1px solid var(--border);border-radius:13px;
-  border-top:3px solid var(--accent);box-shadow:var(--shadow);
-  padding:1.3rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;
+  border-top:3px solid var(--sc);box-shadow:var(--shadow);
+  padding:1.4rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:center;text-align:center;
+}
+.stat--accent{--sc:var(--accent);--sc-wash:var(--accent-wash)}
+.stat--warn  {--sc:var(--warn);  --sc-wash:var(--warn-wash)}
+.stat--bad   {--sc:var(--bad);   --sc-wash:var(--bad-wash)}
+
+/* fixed-geometry icon medallion — identical across all three cards */
+.stat .medallion{
+  width:84px;height:84px;flex:none;border-radius:50%;
+  display:grid;place-items:center;margin-bottom:.95rem;
+  background:var(--sc-wash);
+  border:1.5px solid color-mix(in srgb, var(--sc) 35%, transparent);
+  box-shadow:0 0 0 6px color-mix(in srgb, var(--sc) 7%, transparent);
+}
+.stat .medallion svg{width:42px;height:42px;display:block;color:var(--sc)}
+
+/* the qualitative lead word — bold figure, NOT a measured number */
+.stat .lead{
+  font-family:var(--serif);font-weight:700;line-height:1.05;
+  font-size:clamp(1.5rem,1.2rem+1vw,1.85rem);letter-spacing:-.015em;
+  color:var(--sc);margin:0 0 .12rem;min-height:1.05em;
+}
+.stat .lead-sub{
+  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
+  color:var(--muted);margin:0 0 .85rem;min-height:1em;
 }
-.stat .gauge{width:118px;height:118px;flex:none;margin-bottom:.7rem}
-.stat .gauge text{font-family:var(--serif);font-weight:700;fill:var(--ink)}
 .stat .glabel{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
-  color:var(--accent);font-weight:700;margin-bottom:.3rem}
+  color:var(--sc);font-weight:700;margin-bottom:.3rem}
 .stat h3{font-size:var(--step-0);margin:0 0 .35rem;font-family:var(--serif);line-height:1.2}
 .stat p{margin:0;font-size:var(--step--1);color:var(--muted);line-height:1.5}
-.stat .src{margin-top:.6rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--faint)}
+.stat .src{margin-top:auto;padding-top:.7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--faint)}
 
 .fix-banner{
   margin-top:18px;border:1px solid var(--border);border-left:4px solid var(--good);
@@ -1014,71 +1038,112 @@ footer .sig .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)
         done by software at massive scale while the attacker sleeps. You're just one row in a spreadsheet of millions.</p>
       </div>
       <div class="keypic" aria-hidden="true">
-        <!-- one key, many locks -->
-        <svg viewBox="0 0 320 220" fill="none" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
-          <!-- the single key -->
+        <!-- one key opens many locks — the danger of reuse -->
+        <svg viewBox="0 0 320 240" fill="none" stroke="currentColor"
+             stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round">
+          <!-- branch lines from the key tip (185,120) to each lock, evenly fanned -->
+          <g stroke-width="2" stroke-dasharray="1 7" opacity=".55">
+            <path d="M185 120 C218 120 226 44 256 44"/>
+            <path d="M185 120 C222 120 230 92 256 92"/>
+            <path d="M185 120 C222 120 230 148 256 148"/>
+            <path d="M185 120 C218 120 226 196 256 196"/>
+          </g>
+
+          <!-- the single shared key, centred on y=120 -->
           <g>
-            <circle cx="52" cy="110" r="26"/>
-            <circle cx="52" cy="110" r="9" stroke-width="2.4"/>
-            <path d="M78 110 H190"/>
-            <path d="M150 110 v20 M170 110 v26 M190 110 v18"/>
+            <circle cx="46" cy="120" r="27"/>
+            <circle cx="46" cy="120" r="9.5" stroke-width="2.4"/>
+            <path d="M73 120 H185"/>
+            <!-- bit / teeth, evenly spaced and aligned to the shaft -->
+            <path d="M150 120 v17 M167 120 v23 M185 120 v17"/>
           </g>
-          <!-- many locks branching out -->
-          <g stroke-width="2.6" opacity=".9">
-            <path d="M190 110 C230 70 250 60 280 52" />
-            <path d="M190 110 C235 100 255 98 286 96" />
-            <path d="M190 110 C235 150 252 158 282 170" />
-          </g>
-          <g stroke-width="2.8">
-            <rect x="278" y="36" width="30" height="26" rx="3"/>
-            <path d="M283 36 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
-            <rect x="280" y="84" width="30" height="26" rx="3"/>
-            <path d="M285 84 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
-            <rect x="276" y="156" width="30" height="26" rx="3"/>
-            <path d="M281 156 v-5 a6 6 0 0 1 20 0 v5" stroke-width="2.4"/>
+
+          <!-- four identical locks, perfectly aligned on the right rail -->
+          <g>
+            <g transform="translate(256,30)">
+              <rect x="0" y="0" width="34" height="28" rx="5"/>
+              <path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
+              <circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
+              <path d="M17 16 v6"/>
+            </g>
+            <g transform="translate(256,78)">
+              <rect x="0" y="0" width="34" height="28" rx="5"/>
+              <path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
+              <circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
+              <path d="M17 16 v6"/>
+            </g>
+            <g transform="translate(256,134)">
+              <rect x="0" y="0" width="34" height="28" rx="5"/>
+              <path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
+              <circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
+              <path d="M17 16 v6"/>
+            </g>
+            <g transform="translate(256,182)">
+              <rect x="0" y="0" width="34" height="28" rx="5"/>
+              <path d="M7 0 v-6 a10 10 0 0 1 20 0 v6" stroke-width="2.6"/>
+              <circle cx="17" cy="13" r="3.2" fill="currentColor" stroke="none"/>
+              <path d="M17 16 v6"/>
+            </g>
           </g>
         </svg>
       </div>
     </div>
 
-    <!-- qualitative stat gauges (honest, no fabricated precise %) -->
+    <!-- qualitative stat cards: honest figure + icon, NOT a measured % gauge -->
     <div class="stats">
-      <div class="stat reveal">
-        <svg class="gauge" viewBox="0 0 120 120" aria-hidden="true">
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/>
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--accent)" stroke-width="12"
-            stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="55"
-            transform="rotate(-90 60 60)"/>
-          <text x="60" y="58" text-anchor="middle" font-size="19" data-i18n="g1_a">most</text>
-          <text x="60" y="78" text-anchor="middle" font-size="9" fill="var(--muted)" data-i18n="g1_b">breaches</text>
-        </svg>
+      <div class="stat stat--accent reveal">
+        <span class="medallion" aria-hidden="true">
+          <!-- skeleton key forced into a lock: stolen / weak credentials -->
+          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
+               stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="14" cy="14" r="7.5"/>
+            <circle cx="14" cy="14" r="2.6" stroke-width="2"/>
+            <path d="M19.3 19.3 38 38"/>
+            <path d="M31.5 31.5 27 36 M35 35 30.5 39.5"/>
+          </svg>
+        </span>
+        <p class="lead" data-i18n="g1_a">most</p>
+        <p class="lead-sub" data-i18n="g1_b">breaches</p>
         <span class="glabel" data-i18n="g1_lab">The #1 way in</span>
         <h3 data-i18n="g1_h">Stolen &amp; weak credentials</h3>
         <p data-i18n="g1_p">The large majority of hacking-related breaches involve stolen or weak passwords — year after year.</p>
         <span class="src" data-i18n="g1_src">Source: Verizon DBIR</span>
       </div>
-      <div class="stat reveal">
-        <svg class="gauge" viewBox="0 0 120 120" aria-hidden="true">
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/>
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--warn)" stroke-width="12"
-            stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="75"
-            transform="rotate(-90 60 60)"/>
-          <text x="60" y="58" text-anchor="middle" font-size="19" data-i18n="g2_a">most</text>
-          <text x="60" y="78" text-anchor="middle" font-size="9" fill="var(--muted)" data-i18n="g2_b">people</text>
-        </svg>
+      <div class="stat stat--warn reveal">
+        <span class="medallion" aria-hidden="true">
+          <!-- two identical key-cards: the same password reused -->
+          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
+               stroke-linecap="round" stroke-linejoin="round">
+            <rect x="14" y="6" width="26" height="17" rx="2.5"/>
+            <path d="M18 11.5h6 M18 16h12"/>
+            <rect x="8" y="25" width="26" height="17" rx="2.5" fill="var(--surface)"/>
+            <path d="M12 30.5h6 M12 35h12"/>
+          </svg>
+        </span>
+        <p class="lead" data-i18n="g2_a">most</p>
+        <p class="lead-sub" data-i18n="g2_b">people</p>
         <span class="glabel" data-i18n="g2_lab">The bad habit</span>
         <h3 data-i18n="g2_h">Reuse the same password</h3>
         <p data-i18n="g2_p">Surveys consistently find most people reuse passwords across multiple accounts.</p>
         <span class="src" data-i18n="g2_src">Source: industry surveys</span>
       </div>
-      <div class="stat reveal">
-        <svg class="gauge" viewBox="0 0 120 120" aria-hidden="true">
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--surface-2)" stroke-width="12"/>
-          <circle cx="60" cy="60" r="50" fill="none" stroke="var(--bad)" stroke-width="12"
-            stroke-linecap="round" stroke-dasharray="251" stroke-dashoffset="20"
-            transform="rotate(-90 60 60)"/>
-          <text x="60" y="58" text-anchor="middle" font-size="17" data-i18n="g3_a">billions</text>
-        </svg>
+      <div class="stat stat--bad reveal">
+        <span class="medallion" aria-hidden="true">
+          <!-- leaked passwords scattering out: already circulating -->
+          <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.6"
+               stroke-linecap="round" stroke-linejoin="round">
+            <path d="M9 30v6a3 3 0 0 0 3 3h13"/>
+            <rect x="6" y="18" width="18" height="12" rx="2.5"/>
+            <path d="M10 18v-3a5 5 0 0 1 10 0v3" stroke-width="2.2"/>
+            <circle cx="33" cy="13" r="1.8" fill="currentColor" stroke="none"/>
+            <circle cx="40" cy="20" r="1.8" fill="currentColor" stroke="none"/>
+            <circle cx="38" cy="32" r="1.8" fill="currentColor" stroke="none"/>
+            <circle cx="42" cy="11" r="1.4" fill="currentColor" stroke="none"/>
+            <circle cx="33" cy="24" r="1.4" fill="currentColor" stroke="none"/>
+          </svg>
+        </span>
+        <p class="lead" data-i18n="g3_a">billions</p>
+        <p class="lead-sub" aria-hidden="true">&nbsp;</p>
         <span class="glabel" data-i18n="g3_lab">Already out there</span>
         <h3 data-i18n="g3_h">Stolen passwords circulating</h3>
         <p data-i18n="g3_p">Billions of stolen passwords are already on criminal forums and in malware dumps right now.</p>