diff --git a/src/components/sections/SolutionsSections.tsx b/src/components/sections/SolutionsSections.tsx
index 3b9b850..2eefc64 100644
--- a/src/components/sections/SolutionsSections.tsx
+++ b/src/components/sections/SolutionsSections.tsx
@@ -642,51 +642,66 @@ function Sol01() {
    BEAT 02 — ELIMINATING DAILY FRICTION (Before vs DoorMile Control)
    LIGHT SECTION (sol-bg--white) — Visual Rhythm Break
    ============================================================ */
+/* Both card sets share one skeleton so the two tab views line up pixel-for-pixel
+   and nothing jumps when you toggle: fixed-height icon/stat header, then title,
+   body, then a bottom-pinned outcome line. */
 const S02_OLD = [
   {
-    badge: "Friction 01",
-    chip: "2.5x time on coordination",
+    icon: IcPhone,
+    statV: "2.5x",
+    statL: "Time on coordination",
     title: "20 Phone Calls for One Truck",
     body: "Operations managers waste hours calling drivers, hub managers and clients just to find out where a shipment is.",
-    foot: "Cost: your most experienced dispatcher spends the morning relaying, not deciding.",
+    footLbl: "Cost",
+    footTxt: "your most experienced dispatcher spends the morning relaying, not deciding.",
   },
   {
-    badge: "Friction 02",
-    chip: "73% of delays start here",
+    icon: IcSheet,
+    statV: "73%",
+    statL: "Of delays start here",
     title: "Outdated Excel Spreadsheets",
     body: "Orders in one file, driver lists in another. When delays happen, nobody has the true status until clients complain.",
-    foot: "Cost: the handoff between two files is where the day quietly goes wrong.",
+    footLbl: "Cost",
+    footTxt: "the handoff between two files is where the day quietly goes wrong.",
   },
   {
-    badge: "Friction 03",
-    chip: "28% higher cost to operate",
+    icon: IcArchive,
+    statV: "28%",
+    statL: "Higher cost to operate",
     title: "Paper Receipts & Invoicing Delays",
     body: "Waiting days for physical paper delivery receipts to return to the office before invoices can be processed.",
-    foot: "Cost: completed revenue sits in a glovebox instead of on an invoice.",
+    footLbl: "Cost",
+    footTxt: "completed revenue sits in a glovebox instead of on an invoice.",
   },
 ];
 
 const S02_DM = [
   {
-    badge: "✓ DoorMile Control",
-    chip: "99.2% on-time",
+    icon: IcTracking,
+    statV: "99.2%",
+    statL: "On-time",
     title: "Live Real-Time GPS Tracking",
     body: "Every vehicle and shipment visible on one live map. ETAs update automatically without making a single phone call.",
-    foot: "Gain: status is answered in a glance, not a call chain.",
+    footLbl: "Gain",
+    footTxt: "status is answered in a glance, not a call chain.",
   },
   {
-    badge: "✓ DoorMile Control",
-    chip: "40% fewer manual tasks",
+    icon: IcLayers,
+    statV: "40%",
+    statL: "Fewer manual tasks",
     title: "Single Connected Workspace",
     body: "Orders, vehicle capacity, driver dispatch and tracking sync live in one place for your entire team.",
-    foot: "Gain: one screen replaces the entire morning ritual.",
+    footLbl: "Gain",
+    footTxt: "one screen replaces the entire morning ritual.",
   },
   {
-    badge: "✓ DoorMile Control",
-    chip: "3x faster response",
+    icon: IcBilling,
+    statV: "3x",
+    statL: "Faster response",
     title: "Instant Digital Proof of Receipt",
     body: "Digital signatures and OTP receipts captured at the doorstep — ready for instant billing reconciliation.",
-    foot: "Gain: the invoice is raised the moment the door closes.",
+    footLbl: "Gain",
+    footTxt: "the invoice is raised the moment the door closes.",
   },
 ];
 
@@ -748,15 +763,21 @@ function Sol02() {
           {!isDm ? (
             <div className="sol-s02-view sol-s02-view--old" key="old">
               <div className="sol-s02-grid-3">
-                {S02_OLD.map((c) => (
-                  <div className="sol-s02-card-old" key={c.badge}>
+                {S02_OLD.map((c, i) => (
+                  <div className="sol-s02-card sol-s02-card--old" key={c.title} style={{ "--i": i } as React.CSSProperties}>
                     <div className="sol-s02-card-top">
-                      <span className="sol-s02-badge-old">{c.badge}</span>
-                      <span className="sol-s02-chip-old">{c.chip}</span>
+                      <span className="sol-s02-ic">{c.icon}</span>
+                      <span className="sol-s02-stat">
+                        <b>{c.statV}</b>
+                        <i>{c.statL}</i>
+                      </span>
                     </div>
                     <h3>{c.title}</h3>
                     <p>{c.body}</p>
-                    <span className="sol-s02-foot sol-s02-foot--old">{c.foot}</span>
+                    <span className="sol-s02-foot">
+                      <b>{c.footLbl}</b>
+                      {c.footTxt}
+                    </span>
                   </div>
                 ))}
               </div>
@@ -778,23 +799,33 @@ function Sol02() {
           ) : (
             <div className="sol-s02-view sol-s02-view--dm" key="dm">
               <div className="sol-s02-grid-3">
-                {S02_DM.map((c) => (
-                  <div className="sol-s02-card-dm" key={c.title}>
+                {S02_DM.map((c, i) => (
+                  <div className="sol-s02-card sol-s02-card--dm" key={c.title} style={{ "--i": i } as React.CSSProperties}>
                     <div className="sol-s02-card-top">
-                      <span className="sol-s02-badge-dm">{c.badge}</span>
-                      <span className="sol-s02-chip-dm">{c.chip}</span>
+                      <span className="sol-s02-ic">{c.icon}</span>
+                      <span className="sol-s02-stat">
+                        <b>{c.statV}</b>
+                        <i>{c.statL}</i>
+                      </span>
                     </div>
                     <h3>{c.title}</h3>
                     <p>{c.body}</p>
-                    <span className="sol-s02-foot sol-s02-foot--dm">{c.foot}</span>
+                    <span className="sol-s02-foot">
+                      <b>{c.footLbl}</b>
+                      {c.footTxt}
+                    </span>
                   </div>
                 ))}
               </div>
 
-              {/* Secondary layer: supporting illustration + what changes */}
+              {/* Secondary layer: supporting illustration + what changes.
+                  One bordered panel with the photo bled to the edge, so the
+                  image and the copy read as a single object rather than two
+                  loose halves floating on the white. */}
               <div className="sol-s02-media-row">
                 <MediaPanel
                   tone="light"
+                  className="sol-s02-media-panel"
                   src="/images/tab-pic-1-solution.webp"
                   alt="DoorMile connected operations"
                   badges={[
@@ -803,7 +834,10 @@ function Sol02() {
                   ]}
                 />
                 <div className="sol-s02-media-copy">
-                  <span className="sol-s02-eyeb">/ What actually changes /</span>
+                  <span className="sol-s02-eyeb">
+                    <i aria-hidden="true" />
+                    What actually changes
+                  </span>
                   <h4>The same day, minus the chasing</h4>
                   <MiniList
                     tone="light"
@@ -830,11 +864,17 @@ function Sol02() {
               <span className="sol-s02-cmp-lbl">{r.label}</span>
               <div className="sol-s02-cmp-bars">
                 <div className="sol-s02-cmp-line">
-                  <i className="sol-s02-cmp-bar sol-s02-cmp-bar--old" style={{ width: `${r.oldW}%` }} />
+                  <span className="sol-s02-cmp-tag">Traditional</span>
+                  <span className="sol-s02-cmp-track">
+                    <i className="sol-s02-cmp-bar sol-s02-cmp-bar--old" style={{ width: `${r.oldW}%` }} />
+                  </span>
                   <em>{r.old}</em>
                 </div>
                 <div className="sol-s02-cmp-line">
-                  <i className="sol-s02-cmp-bar sol-s02-cmp-bar--dm" style={{ width: `${r.dmW}%` }} />
+                  <span className="sol-s02-cmp-tag sol-s02-cmp-tag--dm">DoorMile</span>
+                  <span className="sol-s02-cmp-track">
+                    <i className="sol-s02-cmp-bar sol-s02-cmp-bar--dm" style={{ width: `${r.dmW}%` }} />
+                  </span>
                   <em>{r.dm}</em>
                 </div>
               </div>
@@ -2319,10 +2359,10 @@ const CSS = `
 #sol-root .sol-map canvas { display: block; width: 100%; height: 100%; }
 
 /* WHITE CARD BACKGROUND (sol-bg--white & sol-bg--white-red) */
-#sol-root .sol-bg--white { background: #ffffff; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.12); }
+#sol-root .sol-bg--white { background: #ffffff; box-shadow: 0 12px 36px -20px rgba(0,0,0,0.07); }
 #sol-root .sol-bg--white-red {
   background: radial-gradient(75% 60% at 50% 0%, rgba(226, 53, 74, 0.08) 0%, rgba(255, 255, 255, 0.98) 70%), linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
-  box-shadow: 0 30px 90px -30px rgba(192, 18, 39, 0.12);
+  box-shadow: 0 12px 36px -20px rgba(192, 18, 39, 0.07);
   border: 1px solid rgba(226, 53, 74, 0.14);
 }
 #sol-root .sol-sec--white .sol-eyebrow { color: var(--sol-red) !important; }
@@ -2619,21 +2659,55 @@ const CSS = `
 #sol-root .sol-s02-stage-box { width: 100%; max-width: 1040px; }
 #sol-root .sol-s02-view { animation: solFadeUp 0.5s ease-out both; }
 @keyframes solFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
-#sol-root .sol-s02-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
-#sol-root .sol-s02-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
-#sol-root .sol-s02-card-old { padding: 24px; border-radius: 20px; background: #fef2f2; border: 1px solid #fecaca; display: flex; flex-direction: column; }
-#sol-root .sol-s02-badge-old { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fee2e2; color: #dc2626; font-size: 11px; font-weight: 800; }
-#sol-root .sol-s02-chip-old { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #b91c1c; }
-#sol-root .sol-s02-card-old h3 { color: #991b1b; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
-#sol-root .sol-s02-card-old p { color: #7f1d1d; font-size: 13.5px; line-height: 1.55; margin: 0; }
-#sol-root .sol-s02-card-dm { padding: 24px; border-radius: 20px; background: #111827; border: 1px solid #1f2937; color: #fff; display: flex; flex-direction: column; }
-#sol-root .sol-s02-badge-dm { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(34,197,94,0.2); color: #4ade80; font-size: 11px; font-weight: 800; }
-#sol-root .sol-s02-chip-dm { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #f87171; }
-#sol-root .sol-s02-card-dm h3 { color: #fff; font-size: 17px; font-weight: 800; margin: 0 0 8px; }
-#sol-root .sol-s02-card-dm p { color: #9ca3af; font-size: 13.5px; line-height: 1.55; margin: 0; }
-#sol-root .sol-s02-foot { display: block; margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.5; font-weight: 600; }
-#sol-root .sol-s02-foot--old { color: #b91c1c; border-top: 1px solid #fecaca; margin-top: 14px; }
-#sol-root .sol-s02-foot--dm { color: #6ee7b7; border-top: 1px solid #1f2937; margin-top: 14px; }
+#sol-root .sol-s02-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
+
+/* Shared card skeleton. Every row is a fixed-height band so the three titles,
+   the three body blocks and the three outcome lines sit on the same baselines
+   across the row — and across both tabs. */
+#sol-root .sol-s02-card { position: relative; isolation: isolate; overflow: hidden; padding: 26px 24px 22px; border-radius: 22px; display: flex; flex-direction: column; animation: solFadeUp 0.55s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i, 0) * 90ms); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.45s, box-shadow 0.45s; }
+#sol-root .sol-s02-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; z-index: 2; opacity: 0.75; transition: opacity 0.45s; }
+#sol-root .sol-s02-card::after { content: ""; position: absolute; z-index: -1; top: -55%; right: -30%; width: 74%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
+#sol-root .sol-s02-card:hover { transform: translateY(-5px); }
+#sol-root .sol-s02-card:hover::after { opacity: 1; }
+#sol-root .sol-s02-card:hover::before { opacity: 1; }
+
+#sol-root .sol-s02-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin-bottom: 18px; }
+#sol-root .sol-s02-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.45s, color 0.45s, border-color 0.45s; }
+#sol-root .sol-s02-ic svg { width: 20px; height: 20px; }
+#sol-root .sol-s02-stat { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; min-width: 0; }
+#sol-root .sol-s02-stat b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
+#sol-root .sol-s02-stat i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
+#sol-root .sol-s02-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; margin: 0 0 10px; }
+#sol-root .sol-s02-card p { font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
+#sol-root .sol-s02-foot { display: block; margin-top: auto; padding-top: 15px; font-size: 12px; line-height: 1.55; font-weight: 600; }
+#sol-root .sol-s02-foot b { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; opacity: 0.75; }
+
+/* Traditional — paper-red, deliberately flatter and heavier than the DoorMile card. */
+#sol-root .sol-s02-card--old { background: linear-gradient(168deg, #fff5f5 0%, #fef2f2 55%, #fee9e9 100%); border: 1px solid #f6cfd0; box-shadow: 0 1px 2px rgba(153,27,27,0.04); }
+#sol-root .sol-s02-card--old::before { background: linear-gradient(90deg, #dc2626, rgba(220,38,38,0)); }
+#sol-root .sol-s02-card--old::after { background: radial-gradient(circle, rgba(220,38,38,0.1), transparent 68%); }
+#sol-root .sol-s02-card--old:hover { border-color: #eeb4b6; box-shadow: 0 8px 20px -8px rgba(153,27,27,0.25); }
+#sol-root .sol-s02-card--old .sol-s02-ic { background: #fee2e2; border: 1px solid #f8c9ca; color: #dc2626; }
+#sol-root .sol-s02-card--old .sol-s02-stat b { color: #b91c1c; }
+#sol-root .sol-s02-card--old .sol-s02-stat i { color: rgba(153,27,27,0.6); }
+#sol-root .sol-s02-card--old h3 { color: #7f1d1d; }
+#sol-root .sol-s02-card--old p { color: #8b3a3a; }
+#sol-root .sol-s02-card--old .sol-s02-foot { color: #a03436; border-top: 1px solid #f6cfd0; }
+#sol-root .sol-s02-card--old .sol-s02-foot b { color: #b91c1c; }
+
+/* DoorMile — deep navy with a green control accent. */
+#sol-root .sol-s02-card--dm { background: linear-gradient(168deg, #18233a 0%, #111a2b 52%, #0d1421 100%); border: 1px solid #253148; color: #fff; box-shadow: 0 1px 2px rgba(8,12,20,0.4); }
+#sol-root .sol-s02-card--dm::before { background: linear-gradient(90deg, #34d399, rgba(52,211,153,0)); }
+#sol-root .sol-s02-card--dm::after { background: radial-gradient(circle, rgba(52,211,153,0.16), transparent 68%); }
+#sol-root .sol-s02-card--dm:hover { border-color: rgba(52,211,153,0.4); box-shadow: 0 8px 22px -8px rgba(8,14,26,0.5), 0 0 16px rgba(52,211,153,0.15); }
+#sol-root .sol-s02-card--dm .sol-s02-ic { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.26); color: #34d399; }
+#sol-root .sol-s02-card--dm:hover .sol-s02-ic { background: rgba(52,211,153,0.2); border-color: rgba(52,211,153,0.5); }
+#sol-root .sol-s02-card--dm .sol-s02-stat b { color: #fff; }
+#sol-root .sol-s02-card--dm .sol-s02-stat i { color: rgba(255,255,255,0.42); }
+#sol-root .sol-s02-card--dm h3 { color: #fff; }
+#sol-root .sol-s02-card--dm p { color: #97a3b6; }
+#sol-root .sol-s02-card--dm .sol-s02-foot { color: #a7f3d0; border-top: 1px solid rgba(255,255,255,0.09); }
+#sol-root .sol-s02-card--dm .sol-s02-foot b { color: #34d399; }
 
 #sol-root .sol-s02-ledger { margin-top: 20px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid #fecaca; }
 #sol-root .sol-s02-ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
@@ -2645,22 +2719,53 @@ const CSS = `
 #sol-root .sol-s02-ledger-list li i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #e5e7eb 0 4px, transparent 4px 8px); }
 #sol-root .sol-s02-ledger-list li b { color: #991b1b; font-weight: 800; white-space: nowrap; }
 
-#sol-root .sol-s02-media-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 24px; }
-#sol-root .sol-s02-eyeb { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sol-red); margin-bottom: 10px; }
-#sol-root .sol-s02-media-copy h4 { color: #111827; font-size: clamp(20px, 2vw, 26px); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
+/* One panel, photo bled to the edge of its half — no gap, no double frame. */
+#sol-root .sol-s02-media-row { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 28px; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid #e6e9ee; box-shadow: 0 16px 40px -20px rgba(17,24,39,0.18); }
+#sol-root .sol-s02-media-panel { height: 100%; }
+#sol-root .sol-s02-media-panel .sol-media-glow { display: none; }
+/* !important here answers the .sol-sec--white .sol-media-frame override
+   above — inside this panel the frame is a flush cell, not a floating card. */
+#sol-root .sol-s02-media-panel .sol-media-frame { height: 100%; min-height: 420px; border: 0; border-right: 1px solid #e6e9ee !important; border-radius: 0; box-shadow: none !important; }
+/* Absolute so the photo contributes no intrinsic height — the panel is sized by
+   the copy column and the image crops to fill whatever that comes out to. */
+#sol-root .sol-s02-media-panel .sol-media-frame img { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; }
+#sol-root .sol-s02-media-panel .sol-media-badge { border-radius: 12px; padding: 9px 13px; background: rgba(11,16,26,0.72); border-color: rgba(255,255,255,0.16); }
+#sol-root .sol-s02-media-panel .sol-media-badge--tl { left: 16px; top: 16px; }
+#sol-root .sol-s02-media-panel .sol-media-badge--br { right: 16px; bottom: 16px; }
+
+#sol-root .sol-s02-media-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px, 3.2vw, 40px); }
+#sol-root .sol-s02-eyeb { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 13px; border-radius: 999px; background: rgba(192,18,39,0.07); border: 1px solid rgba(192,18,39,0.16); font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sol-red); margin-bottom: 14px; }
+#sol-root .sol-s02-eyeb i { width: 5px; height: 5px; border-radius: 50%; background: var(--sol-red); flex: none; }
+#sol-root .sol-s02-media-copy h4 { color: #111827; font-size: clamp(20px, 2vw, 27px); font-weight: 800; margin: 0; letter-spacing: -0.015em; line-height: 1.22; max-width: 16ch; }
+/* Numbered steps read as a sequence; the old hairline rules read as leftovers. */
+#sol-root .sol-s02-media-copy .sol-minilist { margin-top: 22px; gap: 0; counter-reset: s02step; }
+#sol-root .sol-s02-media-copy .sol-mini { align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f4; }
+#sol-root .sol-s02-media-copy .sol-mini:first-child { border-top: 0; padding-top: 4px; }
+#sol-root .sol-s02-media-copy .sol-mini:last-child { padding-bottom: 0; }
+#sol-root .sol-s02-media-copy .sol-mini-rule { counter-increment: s02step; width: 26px; height: 26px; min-height: 0; align-self: flex-start; margin-top: 1px; border-radius: 9px; background: rgba(192,18,39,0.08); border: 1px solid rgba(192,18,39,0.16); display: flex; align-items: center; justify-content: center; }
+#sol-root .sol-s02-media-copy .sol-mini-rule::before { content: counter(s02step, decimal-leading-zero); color: var(--sol-red); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
+#sol-root .sol-s02-media-copy .sol-mini b { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
 
 #sol-root .sol-s02-compare { width: 100%; max-width: 1040px; padding: 24px 26px; border-radius: 20px; background: #f9fafb; border: 1px solid #e5e7eb; }
 #sol-root .sol-s02-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
 #sol-root .sol-s02-compare-head b { color: #111827; font-size: 15px; font-weight: 800; }
 #sol-root .sol-s02-compare-head span { color: #9ca3af; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
-#sol-root .sol-s02-cmp-row { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: 20px; align-items: center; padding: 12px 0; border-top: 1px solid #eceef1; }
-#sol-root .sol-s02-cmp-lbl { color: #374151; font-size: 13px; font-weight: 700; }
-#sol-root .sol-s02-cmp-bars { display: flex; flex-direction: column; gap: 8px; }
-#sol-root .sol-s02-cmp-line { display: flex; align-items: center; gap: 12px; }
-#sol-root .sol-s02-cmp-bar { height: 8px; border-radius: 6px; display: block; transform-origin: left center; animation: solGrow 0.9s cubic-bezier(0.16,1,0.3,1) both; }
-#sol-root .sol-s02-cmp-bar--old { background: #fca5a5; }
-#sol-root .sol-s02-cmp-bar--dm { background: var(--sol-red); }
-#sol-root .sol-s02-cmp-line em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6b7280; white-space: nowrap; }
+/* The label column used to be 0.7fr — ~500px for a 200px label — and the bars
+   were flex, so a short bar left the rest of the row blank. Now the label
+   column is only as wide as it needs, each bar sits in a full-width rail, and
+   the readouts line up in their own right-hand column. Nothing is loose. */
+#sol-root .sol-s02-cmp-row { display: grid; grid-template-columns: minmax(140px, 0.33fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid #eceef1; }
+#sol-root .sol-s02-cmp-lbl { color: #374151; font-size: 13px; font-weight: 700; line-height: 1.4; }
+#sol-root .sol-s02-cmp-bars { display: flex; flex-direction: column; gap: 10px; }
+#sol-root .sol-s02-cmp-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) 132px; align-items: center; gap: 14px; }
+#sol-root .sol-s02-cmp-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: #9ca3af; white-space: nowrap; }
+#sol-root .sol-s02-cmp-tag--dm { color: var(--sol-red); }
+#sol-root .sol-s02-cmp-track { position: relative; display: block; height: 9px; border-radius: 6px; background: #ebeef2; overflow: hidden; }
+#sol-root .sol-s02-cmp-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; display: block; transform-origin: left center; animation: solGrow 0.9s cubic-bezier(0.16,1,0.3,1) both; }
+#sol-root .sol-s02-cmp-bar--old { background: #f7a9a9; }
+#sol-root .sol-s02-cmp-bar--dm { background: linear-gradient(90deg, var(--sol-red), var(--sol-red-bright)); }
+#sol-root .sol-s02-cmp-line em { font-style: normal; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #6b7280; white-space: nowrap; text-align: right; }
+#sol-root .sol-s02-cmp-line:last-child em { color: #111827; font-weight: 800; }
 @keyframes solGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
 
 /* ============================================================
@@ -3176,7 +3281,7 @@ const CSS = `
    ============================================================ */
 #sol-root .sol-mt-hero {
   position: relative; z-index: 1;
-  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
+  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
   align-items: center; gap: clamp(32px, 5vw, 80px);
 }
 #sol-root .sol-mt-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
@@ -3196,9 +3301,9 @@ const CSS = `
 #sol-root .sol-sec--mt .sol-mt-h {
   color: var(--mt-ink) !important;
   text-transform: none !important;
-  max-width: 18ch;
+  max-width: 22ch;
   margin: 26px 0 0 !important;
-  font-size: clamp(30px, 3.35vw, 46px) !important;
+  font-size: clamp(32px, 3.5vw, 50px) !important;
   line-height: 1.16 !important;
   letter-spacing: -0.028em !important;
   font-weight: 800 !important;
@@ -3232,8 +3337,8 @@ const CSS = `
 /* ============================================================
    2. DECISION GRAPH — the section's only red glow sits behind this
    ============================================================ */
-#sol-root .sol-mt-viz { position: relative; display: flex; justify-content: center; align-items: center; }
-#sol-root .sol-mt-graph { position: relative; width: 100%; max-width: 680px; aspect-ratio: 680 / 400; }
+#sol-root .sol-mt-viz { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; }
+#sol-root .sol-mt-graph { position: relative; width: 100%; max-width: 840px; aspect-ratio: 680 / 400; }
 /* Wide and soft, so the nucleus sits IN light rather than becoming a hot blob
    that outshines the graph it is supposed to anchor. */
 #sol-root .sol-mt-graph-glow {
@@ -3395,8 +3500,14 @@ const CSS = `
   #sol-root .sol-in { width: calc(100% - 20px); }
   #sol-root .sol-bg { left: 10px; right: 10px; }
   #sol-root .sol-s01-pain-grid { grid-template-columns: repeat(2, 1fr); }
-  #sol-root .sol-s01-split, #sol-root .sol-s03-canvas, #sol-root .sol-s04-split, #sol-root .sol-s05-scenario-grid, #sol-root .sol-s06-card, #sol-root .sol-s02-media-row, #sol-root .sol-wings-row { grid-template-columns: 1fr; gap: 32px; }
-  #sol-root .sol-s02-grid-3 { grid-template-columns: 1fr; }
+  #sol-root .sol-s01-split, #sol-root .sol-s03-canvas, #sol-root .sol-s04-split, #sol-root .sol-s05-scenario-grid, #sol-root .sol-s06-card, #sol-root .sol-wings-row { grid-template-columns: 1fr; gap: 32px; }
+  /* Stacks, but stays one seamless panel — gap 0, and the photo's divider
+     moves from the right edge to the bottom edge. */
+  #sol-root .sol-s02-media-row { grid-template-columns: 1fr; gap: 0; }
+  #sol-root .sol-s02-media-panel .sol-media-frame { min-height: 0; aspect-ratio: 2 / 1; border-right: 0 !important; border-bottom: 1px solid #e6e9ee !important; }
+  /* Two up before one up — three full-width cards is a lot of scrolling. */
+  #sol-root .sol-s02-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #sol-root .sol-s02-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
   #sol-root .sol-off-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   #sol-root .sol-sec--mt { padding: 84px 0; }
   /* Graph first: the AI centrepiece should still be the first thing seen. */
@@ -3410,7 +3521,7 @@ const CSS = `
   /* The console is a wide readout with real type in it, not the symmetric
      emblem this used to cap at 380px — starve it of width and the footer
      figures stop being legible. Let it take the column. */
-  #sol-root .sol-mt-graph { max-width: 560px; }
+  #sol-root .sol-mt-graph { max-width: 760px; }
   /* Full-width cards go horizontal: icon left, copy right. */
   #sol-root .sol-mt-cards { grid-template-columns: 1fr; gap: 18px; }
   #sol-root .sol-mt-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic title" "ic body"; column-gap: 24px; }
@@ -3444,7 +3555,14 @@ const CSS = `
   #sol-root .sol-h { font-size: clamp(26px, 8vw, 34px) !important; }
   #sol-root .sol-s01-pain-grid { grid-template-columns: 1fr; }
   #sol-root .sol-s01-floats { grid-template-columns: 1fr; }
-  #sol-root .sol-s02-cmp-row { grid-template-columns: 1fr; gap: 8px; }
+  #sol-root .sol-s02-cmp-row { grid-template-columns: 1fr; gap: 10px; }
+  #sol-root .sol-s02-cmp-line { grid-template-columns: 74px minmax(0, 1fr) 78px; gap: 8px; }
+  #sol-root .sol-s02-cmp-line em { font-size: 10.5px; white-space: normal; }
+  #sol-root .sol-s02-grid-3 { grid-template-columns: 1fr; gap: 14px; }
+  #sol-root .sol-s02-card { padding: 22px 20px 20px; }
+  #sol-root .sol-s02-media-row { border-radius: 20px; }
+  #sol-root .sol-s02-media-panel .sol-media-frame { aspect-ratio: 4 / 3; }
+  #sol-root .sol-s02-media-copy h4 { max-width: none; }
   #sol-root .sol-s02-toggle-bar { width: 100%; }
   #sol-root .sol-s02-tgl-btn { flex: 1 1 100%; padding: 10px 14px; font-size: 12px; }
   #sol-root .sol-s03-canvas, #sol-root .sol-s06-card { padding: 22px; }
@@ -3477,6 +3595,7 @@ const CSS = `
   #sol-root .sol-ticker-track,
   #sol-root .sol-s02-cmp-bar,
   #sol-root .sol-s02-view,
+  #sol-root .sol-s02-card,
   #sol-root .sol-s03-art,
   #sol-root .sol-s03-art-svg .sa-radar,
   #sol-root .sol-s03-art-svg .sa-road-dash,