diff --git a/packages/homepage/components/bridges/flow-svg-shell.tsx b/packages/homepage/components/bridges/flow-svg-shell.tsx
new file mode 100644
index 0000000..fa09ce1
--- /dev/null
+++ b/packages/homepage/components/bridges/flow-svg-shell.tsx
@@ -0,0 +1,86 @@
+import type { RippleObj } from './simulation-data'
+
+interface Lane {
+  y: number
+  height: number
+  label: string
+  labelY: number
+}
+
+interface ArrowMarker {
+  id: string
+  fill: string
+}
+
+interface FlowSvgShellProps {
+  isActive: boolean
+  ripples: RippleObj[]
+  lanes: [Lane, Lane, Lane]
+  markers: ArrowMarker[]
+  children: React.ReactNode
+}
+
+export function FlowSvgShell({ isActive, ripples, lanes, markers, children }: FlowSvgShellProps) {
+  return (
+    <svg
+      className={`flow-svg${isActive ? ' active-svg' : ''}`}
+      viewBox="0 0 900 400"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        {markers.map((m) => (
+          <marker
+            key={m.id}
+            id={m.id}
+            markerWidth="8"
+            markerHeight="6"
+            refX="7"
+            refY="3"
+            orient="auto"
+          >
+            <polygon points="0 0.5, 8 3, 0 5.5" fill={m.fill} />
+          </marker>
+        ))}
+      </defs>
+
+      {/* Lane backgrounds */}
+      {lanes.map((l) => (
+        <rect
+          key={l.label}
+          className="lane-bg-rect"
+          x="4"
+          y={l.y}
+          width="892"
+          height={l.height}
+          rx="8"
+        />
+      ))}
+
+      {/* Lane labels */}
+      {lanes.map((l) => (
+        <text key={l.label} className="lane-label" x="16" y={l.labelY}>
+          {l.label}
+        </text>
+      ))}
+
+      {children}
+
+      {/* Ripple layer */}
+      <g>
+        {ripples.map((r) => (
+          <circle
+            key={r.id}
+            className="ripple-circle"
+            cx={r.cx}
+            cy={r.cy}
+            r="4"
+            stroke={r.color}
+            style={{
+              animation: `bridge-sim-ripple-expand 1.2s ${r.delay}s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards`,
+            }}
+          />
+        ))}
+      </g>
+    </svg>
+  )
+}
diff --git a/packages/homepage/components/bridges/step-by-step-svg.tsx b/packages/homepage/components/bridges/step-by-step-svg.tsx
index 137fd7a..a692d13 100644
--- a/packages/homepage/components/bridges/step-by-step-svg.tsx
+++ b/packages/homepage/components/bridges/step-by-step-svg.tsx
@@ -1,4 +1,5 @@
 import type { RippleObj } from './simulation-data'
+import { FlowSvgShell } from './flow-svg-shell'
 
 export interface StepByStepSvgProps {
   isActive: boolean
@@ -7,162 +8,439 @@ export interface StepByStepSvgProps {
 
 export function StepByStepSvg({ isActive, sbRipples }: StepByStepSvgProps) {
   return (
-    <svg className={`flow-svg${isActive ? ' active-svg' : ''}`} viewBox="0 0 900 400" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <marker id="sb-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#6b4d40"/>
-        </marker>
-        <marker id="sb-arrow-green" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#3FDC77"/>
-        </marker>
-      </defs>
-
-      {/* Lane backgrounds */}
-      <rect className="lane-bg-rect" x="4" y="4" width="892" height="108" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="118" width="892" height="128" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="252" width="892" height="144" rx="8"/>
-
-      {/* Lane labels */}
-      <text className="lane-label" x="16" y="62">APPLICANT</text>
-      <text className="lane-label" x="16" y="186">UNDERWRITING</text>
-      <text className="lane-label" x="16" y="328">OPERATIONS</text>
-
+    <FlowSvgShell
+      isActive={isActive}
+      ripples={sbRipples}
+      lanes={[
+        { y: 4, height: 108, label: 'APPLICANT', labelY: 62 },
+        { y: 118, height: 128, label: 'UNDERWRITING', labelY: 186 },
+        { y: 252, height: 144, label: 'OPERATIONS', labelY: 328 },
+      ]}
+      markers={[
+        { id: 'sb-arrow', fill: '#6b4d40' },
+        { id: 'sb-arrow-green', fill: '#3FDC77' },
+      ]}
+    >
       {/* ALL edges */}
-      <line data-edge-id="sb-edge-submit-upload" className="edge" x1="245" y1="58" x2="385" y2="58" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-upload-credit" className="edge" x1="430" y1="73" x2="430" y2="167" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-credit-risk" className="edge" x1="468" y1="182" x2="600" y2="182" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-risk-approved-v" className="edge" x1="640" y1="197" x2="640" y2="305" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-risk-denied-h" className="edge" x1="680" y1="182" x2="780" y2="182"/>
-      <line data-edge-id="sb-edge-risk-denied-v" className="edge" x1="780" y1="182" x2="780" y2="305" markerEnd="url(#sb-arrow)"/>
-      <path data-edge-id="sb-edge-risk-review-h" className="edge" d="M600 197 L480 250 L340 250"/>
-      <line data-edge-id="sb-edge-risk-review-v" className="edge" x1="340" y1="250" x2="340" y2="305" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-offer-disburse" className="edge" x1="640" y1="335" x2="560" y2="365" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-disburse-end" className="edge" x1="517" y1="380" x2="173" y2="380" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-reject-end-h" className="edge" x1="780" y1="335" x2="780" y2="380"/>
-      <line data-edge-id="sb-edge-reject-end-v" className="edge" x1="780" y1="380" x2="173" y2="380" markerEnd="url(#sb-arrow)"/>
-      <path data-edge-id="sb-edge-manual-risk-v" className="edge" d="M300 305 L300 155 L640 155 L640 167" markerEnd="url(#sb-arrow)"/>
-      <line data-edge-id="sb-edge-manual-risk-h" className="edge" x1="0" y1="0" x2="0" y2="0" style={{ opacity: 0 }}/>
+      <line
+        data-edge-id="sb-edge-submit-upload"
+        className="edge"
+        x1="245"
+        y1="58"
+        x2="385"
+        y2="58"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-upload-credit"
+        className="edge"
+        x1="430"
+        y1="73"
+        x2="430"
+        y2="167"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-credit-risk"
+        className="edge"
+        x1="468"
+        y1="182"
+        x2="600"
+        y2="182"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-risk-approved-v"
+        className="edge"
+        x1="640"
+        y1="197"
+        x2="640"
+        y2="305"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-risk-denied-h"
+        className="edge"
+        x1="680"
+        y1="182"
+        x2="780"
+        y2="182"
+      />
+      <line
+        data-edge-id="sb-edge-risk-denied-v"
+        className="edge"
+        x1="780"
+        y1="182"
+        x2="780"
+        y2="305"
+        markerEnd="url(#sb-arrow)"
+      />
+      <path data-edge-id="sb-edge-risk-review-h" className="edge" d="M600 197 L480 250 L340 250" />
+      <line
+        data-edge-id="sb-edge-risk-review-v"
+        className="edge"
+        x1="340"
+        y1="250"
+        x2="340"
+        y2="305"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-offer-disburse"
+        className="edge"
+        x1="640"
+        y1="335"
+        x2="560"
+        y2="365"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-disburse-end"
+        className="edge"
+        x1="517"
+        y1="380"
+        x2="173"
+        y2="380"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-reject-end-h"
+        className="edge"
+        x1="780"
+        y1="335"
+        x2="780"
+        y2="380"
+      />
+      <line
+        data-edge-id="sb-edge-reject-end-v"
+        className="edge"
+        x1="780"
+        y1="380"
+        x2="173"
+        y2="380"
+        markerEnd="url(#sb-arrow)"
+      />
+      <path
+        data-edge-id="sb-edge-manual-risk-v"
+        className="edge"
+        d="M300 305 L300 155 L640 155 L640 167"
+        markerEnd="url(#sb-arrow)"
+      />
+      <line
+        data-edge-id="sb-edge-manual-risk-h"
+        className="edge"
+        x1="0"
+        y1="0"
+        x2="0"
+        y2="0"
+        style={{ opacity: 0 }}
+      />
 
       {/* Edge labels */}
-      <text className="edge-label" x="645" y="255">approved</text>
-      <text className="edge-label" x="720" y="170">denied</text>
-      <text className="edge-label" x="460" y="242">review</text>
+      <text className="edge-label" x="645" y="255">
+        approved
+      </text>
+      <text className="edge-label" x="720" y="170">
+        denied
+      </text>
+      <text className="edge-label" x="460" y="242">
+        review
+      </text>
 
       {/* ALL nodes */}
       {/* Submit Application (action) */}
-      <g data-node-id="sb-node-submit" className="node-group ntype-action" data-cx="200" data-cy="58" transform="translate(200,58)">
-        <rect className="node-rect" x="-45" y="-15" width="90" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Submit Application</text>
+      <g
+        data-node-id="sb-node-submit"
+        className="node-group ntype-action"
+        data-cx="200"
+        data-cy="58"
+        transform="translate(200,58)"
+      >
+        <rect
+          className="node-rect"
+          x="-45"
+          y="-15"
+          width="90"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Submit Application
+        </text>
       </g>
       {/* Upload Documents (action) */}
-      <g data-node-id="sb-node-upload" className="node-group ntype-action" data-cx="430" data-cy="58" transform="translate(430,58)">
-        <rect className="node-rect" x="-45" y="-15" width="90" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Upload Documents</text>
+      <g
+        data-node-id="sb-node-upload"
+        className="node-group ntype-action"
+        data-cx="430"
+        data-cy="58"
+        transform="translate(430,58)"
+      >
+        <rect
+          className="node-rect"
+          x="-45"
+          y="-15"
+          width="90"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Upload Documents
+        </text>
       </g>
       {/* Credit Check (action) */}
-      <g data-node-id="sb-node-credit" className="node-group ntype-action" data-cx="430" data-cy="182" transform="translate(430,182)">
-        <rect className="node-rect" x="-38" y="-15" width="76" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Credit Check</text>
+      <g
+        data-node-id="sb-node-credit"
+        className="node-group ntype-action"
+        data-cx="430"
+        data-cy="182"
+        transform="translate(430,182)"
+      >
+        <rect
+          className="node-rect"
+          x="-38"
+          y="-15"
+          width="76"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Credit Check
+        </text>
       </g>
       {/* Risk Assessment (switch) */}
-      <g data-node-id="sb-node-risk" className="node-group ntype-switch" data-cx="640" data-cy="182" transform="translate(640,182)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(163,116,255,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">SWITCH</text>
-        <text className="node-label" x="0" y="6">Risk</text>
+      <g
+        data-node-id="sb-node-risk"
+        className="node-group ntype-switch"
+        data-cx="640"
+        data-cy="182"
+        transform="translate(640,182)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(163,116,255,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">
+          SWITCH
+        </text>
+        <text className="node-label" x="0" y="6">
+          Risk
+        </text>
       </g>
       {/* Generate Offer (action) */}
-      <g data-node-id="sb-node-offer" className="node-group ntype-action" data-cx="640" data-cy="320" transform="translate(640,320)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Generate Offer</text>
+      <g
+        data-node-id="sb-node-offer"
+        className="node-group ntype-action"
+        data-cx="640"
+        data-cy="320"
+        transform="translate(640,320)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Generate Offer
+        </text>
       </g>
       {/* Disburse Funds (action) */}
-      <g data-node-id="sb-node-disburse" className="node-group ntype-action" data-cx="560" data-cy="380" transform="translate(560,380)">
-        <rect className="node-rect" x="-43" y="-15" width="86" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Disburse Funds</text>
+      <g
+        data-node-id="sb-node-disburse"
+        className="node-group ntype-action"
+        data-cx="560"
+        data-cy="380"
+        transform="translate(560,380)"
+      >
+        <rect
+          className="node-rect"
+          x="-43"
+          y="-15"
+          width="86"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Disburse Funds
+        </text>
       </g>
       {/* Send Rejection (action) */}
-      <g data-node-id="sb-node-reject" className="node-group ntype-action" data-cx="780" data-cy="320" transform="translate(780,320)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Send Rejection</text>
+      <g
+        data-node-id="sb-node-reject"
+        className="node-group ntype-action"
+        data-cx="780"
+        data-cy="320"
+        transform="translate(780,320)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Send Rejection
+        </text>
       </g>
       {/* Manual Review (action) */}
-      <g data-node-id="sb-node-manual" className="node-group ntype-action" data-cx="340" data-cy="320" transform="translate(340,320)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Manual Review</text>
+      <g
+        data-node-id="sb-node-manual"
+        className="node-group ntype-action"
+        data-cx="340"
+        data-cy="320"
+        transform="translate(340,320)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Manual Review
+        </text>
       </g>
       {/* End (terminal) */}
-      <g data-node-id="sb-node-end" className="node-group ntype-terminal" data-cx="160" data-cy="380" transform="translate(160,380)">
-        <circle className="node-circle" cx="0" cy="0" r="13"/>
-        <text className="node-label" x="0" y="0" fontSize="8.5">End</text>
-      </g>
-
-      {/* Ripple layer */}
-      <g>
-        {sbRipples.map(r => (
-          <circle
-            key={r.id}
-            className="ripple-circle"
-            cx={r.cx}
-            cy={r.cy}
-            r="4"
-            stroke={r.color}
-            style={{ animation: `bridge-sim-ripple-expand 1.2s ${r.delay}s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards` }}
-          />
-        ))}
+      <g
+        data-node-id="sb-node-end"
+        className="node-group ntype-terminal"
+        data-cx="160"
+        data-cy="380"
+        transform="translate(160,380)"
+      >
+        <circle className="node-circle" cx="0" cy="0" r="13" />
+        <text className="node-label" x="0" y="0" fontSize="8.5">
+          End
+        </text>
       </g>
 
       {/* Data tooltips for step-by-step mode */}
       <g data-tooltip-id="tt-sb-submit" className="data-tooltip">
-        <rect x="130" y="14" width="180" height="28" rx="5"/>
-        <text x="138" y="28"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ applicant: "Jane Doe" }`}</tspan></text>
-        <text x="138" y="38"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ appId: "LN-8834" }`}</tspan></text>
+        <rect x="130" y="14" width="180" height="28" rx="5" />
+        <text x="138" y="28">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ applicant: "Jane Doe" }`}</tspan>
+        </text>
+        <text x="138" y="38">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ appId: "LN-8834" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-upload" className="data-tooltip">
-        <rect x="510" y="34" width="210" height="28" rx="5"/>
-        <text x="518" y="48"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ docs: ["W2", "bank_stmt"] }`}</tspan></text>
-        <text x="518" y="58"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ verified: true, score: 0.94 }`}</tspan></text>
+        <rect x="510" y="34" width="210" height="28" rx="5" />
+        <text x="518" y="48">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ docs: ["W2", "bank_stmt"] }`}</tspan>
+        </text>
+        <text x="518" y="58">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ verified: true, score: 0.94 }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-credit" className="data-tooltip">
-        <rect x="500" y="157" width="210" height="28" rx="5"/>
-        <text x="508" y="171"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ ssn: "***-**-4821" }`}</tspan></text>
-        <text x="508" y="181"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ creditScore: 742, tier: "A" }`}</tspan></text>
+        <rect x="500" y="157" width="210" height="28" rx="5" />
+        <text x="508" y="171">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ ssn: "***-**-4821" }`}</tspan>
+        </text>
+        <text x="508" y="181">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ creditScore: 742, tier: "A" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-risk" className="data-tooltip">
-        <rect x="686" y="160" width="200" height="28" rx="5"/>
-        <text x="694" y="174"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ score: 742, amount: $85K }`}</tspan></text>
-        <text x="694" y="184"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ decision: "approved" }`}</tspan></text>
+        <rect x="686" y="160" width="200" height="28" rx="5" />
+        <text x="694" y="174">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ score: 742, amount: $85K }`}</tspan>
+        </text>
+        <text x="694" y="184">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ decision: "approved" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-offer" className="data-tooltip">
-        <rect x="700" y="296" width="185" height="28" rx="5"/>
-        <text x="708" y="310"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ rate: 5.2%, term: 30yr }`}</tspan></text>
-        <text x="708" y="320"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ offerId: "OFF-1192" }`}</tspan></text>
+        <rect x="700" y="296" width="185" height="28" rx="5" />
+        <text x="708" y="310">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ rate: 5.2%, term: 30yr }`}</tspan>
+        </text>
+        <text x="708" y="320">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ offerId: "OFF-1192" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-disburse" className="data-tooltip">
-        <rect x="640" y="363" width="195" height="28" rx="5"/>
-        <text x="648" y="377"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ amount: $85,000 }`}</tspan></text>
-        <text x="648" y="387"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ txId: "ACH-5510", ok: true }`}</tspan></text>
+        <rect x="640" y="363" width="195" height="28" rx="5" />
+        <text x="648" y="377">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ amount: $85,000 }`}</tspan>
+        </text>
+        <text x="648" y="387">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ txId: "ACH-5510", ok: true }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-reject" className="data-tooltip">
-        <rect x="710" y="270" width="170" height="28" rx="5"/>
-        <text x="718" y="284"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ reason: "DTI > 43%" }`}</tspan></text>
-        <text x="718" y="294"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ letter: "REJ-4410" }`}</tspan></text>
+        <rect x="710" y="270" width="170" height="28" rx="5" />
+        <text x="718" y="284">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ reason: "DTI > 43%" }`}</tspan>
+        </text>
+        <text x="718" y="294">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ letter: "REJ-4410" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-manual" className="data-tooltip">
-        <rect x="270" y="270" width="190" height="28" rx="5"/>
-        <text x="278" y="284"><tspan className="tt-heading">In:</tspan> <tspan className="tt-val">{`{ flag: "income_mismatch" }`}</tspan></text>
-        <text x="278" y="294"><tspan className="tt-heading">Out:</tspan> <tspan className="tt-val">{`{ override: "approve" }`}</tspan></text>
+        <rect x="270" y="270" width="190" height="28" rx="5" />
+        <text x="278" y="284">
+          <tspan className="tt-heading">In:</tspan>{' '}
+          <tspan className="tt-val">{`{ flag: "income_mismatch" }`}</tspan>
+        </text>
+        <text x="278" y="294">
+          <tspan className="tt-heading">Out:</tspan>{' '}
+          <tspan className="tt-val">{`{ override: "approve" }`}</tspan>
+        </text>
       </g>
       <g data-tooltip-id="tt-sb-end" className="data-tooltip">
-        <rect x="120" y="340" width="100" height="20" rx="5"/>
-        <text x="128" y="353"><tspan className="tt-heading">status:</tspan> <tspan className="tt-val">disbursed</tspan></text>
+        <rect x="120" y="340" width="100" height="20" rx="5" />
+        <text x="128" y="353">
+          <tspan className="tt-heading">status:</tspan> <tspan className="tt-val">disbursed</tspan>
+        </text>
       </g>
-    </svg>
+    </FlowSvgShell>
   )
 }
diff --git a/packages/homepage/components/bridges/walkthrough-svg.tsx b/packages/homepage/components/bridges/walkthrough-svg.tsx
index fd7386d..5b0e159 100644
--- a/packages/homepage/components/bridges/walkthrough-svg.tsx
+++ b/packages/homepage/components/bridges/walkthrough-svg.tsx
@@ -1,4 +1,5 @@
 import type { RippleObj } from './simulation-data'
+import { FlowSvgShell } from './flow-svg-shell'
 
 export interface WalkthroughSvgProps {
   isActive: boolean
@@ -7,104 +8,281 @@ export interface WalkthroughSvgProps {
 
 export function WalkthroughSvg({ isActive, wtRipples }: WalkthroughSvgProps) {
   return (
-    <svg className={`flow-svg${isActive ? ' active-svg' : ''}`} viewBox="0 0 900 400" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <marker id="wt-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#6b4d40"/>
-        </marker>
-        <marker id="wt-arrow-green" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#3FDC77"/>
-        </marker>
-      </defs>
-
-      {/* Lane backgrounds */}
-      <rect className="lane-bg-rect" x="4" y="4" width="892" height="118" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="128" width="892" height="118" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="252" width="892" height="144" rx="8"/>
-
-      {/* Lane labels */}
-      <text className="lane-label" x="16" y="68">RECEPTION</text>
-      <text className="lane-label" x="16" y="192">TRIAGE</text>
-      <text className="lane-label" x="16" y="328">CLINICAL</text>
-
+    <FlowSvgShell
+      isActive={isActive}
+      ripples={wtRipples}
+      lanes={[
+        { y: 4, height: 118, label: 'RECEPTION', labelY: 68 },
+        { y: 128, height: 118, label: 'TRIAGE', labelY: 192 },
+        { y: 252, height: 144, label: 'CLINICAL', labelY: 328 },
+      ]}
+      markers={[
+        { id: 'wt-arrow', fill: '#6b4d40' },
+        { id: 'wt-arrow-green', fill: '#3FDC77' },
+      ]}
+    >
       {/* ALL edges */}
-      <line data-edge-id="wt-edge-checkin-verify" className="edge" x1="238" y1="63" x2="390" y2="63" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-verify-assess" className="edge" x1="430" y1="78" x2="490" y2="172" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-assess-priority" className="edge" x1="536" y1="187" x2="620" y2="187" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-priority-urgent-v" className="edge" x1="660" y1="202" x2="640" y2="310" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-priority-routine-h" className="edge" x1="700" y1="187" x2="780" y2="187"/>
-      <line data-edge-id="wt-edge-priority-routine-v" className="edge" x1="780" y1="187" x2="780" y2="360" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-emergprep-review" className="edge" x1="560" y1="325" x2="350" y2="325" markerEnd="url(#wt-arrow)"/>
-      <line data-edge-id="wt-edge-review-end" className="edge" x1="270" y1="325" x2="143" y2="325" markerEnd="url(#wt-arrow)"/>
-      <path data-edge-id="wt-edge-sched-end-h" className="edge" d="M737 375 L130 375 L130 338" markerEnd="url(#wt-arrow)"/>
+      <line
+        data-edge-id="wt-edge-checkin-verify"
+        className="edge"
+        x1="238"
+        y1="63"
+        x2="390"
+        y2="63"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-verify-assess"
+        className="edge"
+        x1="430"
+        y1="78"
+        x2="490"
+        y2="172"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-assess-priority"
+        className="edge"
+        x1="536"
+        y1="187"
+        x2="620"
+        y2="187"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-priority-urgent-v"
+        className="edge"
+        x1="660"
+        y1="202"
+        x2="640"
+        y2="310"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-priority-routine-h"
+        className="edge"
+        x1="700"
+        y1="187"
+        x2="780"
+        y2="187"
+      />
+      <line
+        data-edge-id="wt-edge-priority-routine-v"
+        className="edge"
+        x1="780"
+        y1="187"
+        x2="780"
+        y2="360"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-emergprep-review"
+        className="edge"
+        x1="560"
+        y1="325"
+        x2="350"
+        y2="325"
+        markerEnd="url(#wt-arrow)"
+      />
+      <line
+        data-edge-id="wt-edge-review-end"
+        className="edge"
+        x1="270"
+        y1="325"
+        x2="143"
+        y2="325"
+        markerEnd="url(#wt-arrow)"
+      />
+      <path
+        data-edge-id="wt-edge-sched-end-h"
+        className="edge"
+        d="M737 375 L130 375 L130 338"
+        markerEnd="url(#wt-arrow)"
+      />
 
       {/* Edge labels */}
-      <text className="edge-label" x="665" y="255">urgent</text>
-      <text className="edge-label" x="720" y="180">routine</text>
+      <text className="edge-label" x="665" y="255">
+        urgent
+      </text>
+      <text className="edge-label" x="720" y="180">
+        routine
+      </text>
 
       {/* ALL nodes */}
       {/* Check In (action) */}
-      <g data-node-id="wt-node-checkin" className="node-group ntype-action" data-cx="200" data-cy="63" transform="translate(200,63)">
-        <rect className="node-rect" x="-38" y="-15" width="76" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Check In</text>
+      <g
+        data-node-id="wt-node-checkin"
+        className="node-group ntype-action"
+        data-cx="200"
+        data-cy="63"
+        transform="translate(200,63)"
+      >
+        <rect
+          className="node-rect"
+          x="-38"
+          y="-15"
+          width="76"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Check In
+        </text>
       </g>
       {/* Verify Insurance (action) */}
-      <g data-node-id="wt-node-verify" className="node-group ntype-action" data-cx="430" data-cy="63" transform="translate(430,63)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Verify Insurance</text>
+      <g
+        data-node-id="wt-node-verify"
+        className="node-group ntype-action"
+        data-cx="430"
+        data-cy="63"
+        transform="translate(430,63)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Verify Insurance
+        </text>
       </g>
       {/* Initial Assessment (action) */}
-      <g data-node-id="wt-node-assess" className="node-group ntype-action" data-cx="490" data-cy="187" transform="translate(490,187)">
-        <rect className="node-rect" x="-46" y="-15" width="92" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Initial Assessment</text>
+      <g
+        data-node-id="wt-node-assess"
+        className="node-group ntype-action"
+        data-cx="490"
+        data-cy="187"
+        transform="translate(490,187)"
+      >
+        <rect
+          className="node-rect"
+          x="-46"
+          y="-15"
+          width="92"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Initial Assessment
+        </text>
       </g>
       {/* Priority Rating (switch) */}
-      <g data-node-id="wt-node-priority" className="node-group ntype-switch" data-cx="660" data-cy="187" transform="translate(660,187)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(163,116,255,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">SWITCH</text>
-        <text className="node-label" x="0" y="6">Priority</text>
+      <g
+        data-node-id="wt-node-priority"
+        className="node-group ntype-switch"
+        data-cx="660"
+        data-cy="187"
+        transform="translate(660,187)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(163,116,255,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">
+          SWITCH
+        </text>
+        <text className="node-label" x="0" y="6">
+          Priority
+        </text>
       </g>
       {/* Emergency Prep (action) */}
-      <g data-node-id="wt-node-emergprep" className="node-group ntype-action" data-cx="600" data-cy="325" transform="translate(600,325)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Emergency Prep</text>
+      <g
+        data-node-id="wt-node-emergprep"
+        className="node-group ntype-action"
+        data-cx="600"
+        data-cy="325"
+        transform="translate(600,325)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Emergency Prep
+        </text>
       </g>
       {/* Doctor Review (action) */}
-      <g data-node-id="wt-node-review" className="node-group ntype-action" data-cx="310" data-cy="325" transform="translate(310,325)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Doctor Review</text>
+      <g
+        data-node-id="wt-node-review"
+        className="node-group ntype-action"
+        data-cx="310"
+        data-cy="325"
+        transform="translate(310,325)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Doctor Review
+        </text>
       </g>
       {/* Schedule Appointment (action) */}
-      <g data-node-id="wt-node-schedule" className="node-group ntype-action" data-cx="780" data-cy="375" transform="translate(780,375)">
-        <rect className="node-rect" x="-43" y="-15" width="86" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Schedule Appt</text>
+      <g
+        data-node-id="wt-node-schedule"
+        className="node-group ntype-action"
+        data-cx="780"
+        data-cy="375"
+        transform="translate(780,375)"
+      >
+        <rect
+          className="node-rect"
+          x="-43"
+          y="-15"
+          width="86"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Schedule Appt
+        </text>
       </g>
       {/* End (terminal) */}
-      <g data-node-id="wt-node-end" className="node-group ntype-terminal" data-cx="130" data-cy="325" transform="translate(130,325)">
-        <circle className="node-circle" cx="0" cy="0" r="13"/>
-        <text className="node-label" x="0" y="0" fontSize="8.5">End</text>
-      </g>
-
-      {/* Ripple layer */}
-      <g>
-        {wtRipples.map(r => (
-          <circle
-            key={r.id}
-            className="ripple-circle"
-            cx={r.cx}
-            cy={r.cy}
-            r="4"
-            stroke={r.color}
-            style={{ animation: `bridge-sim-ripple-expand 1.2s ${r.delay}s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards` }}
-          />
-        ))}
+      <g
+        data-node-id="wt-node-end"
+        className="node-group ntype-terminal"
+        data-cx="130"
+        data-cy="325"
+        transform="translate(130,325)"
+      >
+        <circle className="node-circle" cx="0" cy="0" r="13" />
+        <text className="node-label" x="0" y="0" fontSize="8.5">
+          End
+        </text>
       </g>
-    </svg>
+    </FlowSvgShell>
   )
 }
diff --git a/packages/homepage/components/bridges/what-if-svg.tsx b/packages/homepage/components/bridges/what-if-svg.tsx
index 31c8007..0795444 100644
--- a/packages/homepage/components/bridges/what-if-svg.tsx
+++ b/packages/homepage/components/bridges/what-if-svg.tsx
@@ -1,4 +1,5 @@
 import type { RippleObj } from './simulation-data'
+import { FlowSvgShell } from './flow-svg-shell'
 
 export interface WhatIfSvgProps {
   isActive: boolean
@@ -7,112 +8,294 @@ export interface WhatIfSvgProps {
 
 export function WhatIfSvg({ isActive, wiRipples }: WhatIfSvgProps) {
   return (
-    <svg className={`flow-svg${isActive ? ' active-svg' : ''}`} viewBox="0 0 900 400" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <marker id="wi-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#6b4d40"/>
-        </marker>
-        <marker id="wi-arrow-green" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#3FDC77"/>
-        </marker>
-        <marker id="wi-arrow-red" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
-          <polygon points="0 0.5, 8 3, 0 5.5" fill="#FF362B"/>
-        </marker>
-      </defs>
-
-      {/* Lane backgrounds */}
-      <rect className="lane-bg-rect" x="4" y="4" width="892" height="108" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="118" width="892" height="128" rx="8"/>
-      <rect className="lane-bg-rect" x="4" y="252" width="892" height="144" rx="8"/>
-
-      {/* Lane labels */}
-      <text className="lane-label" x="16" y="62">CLAIMANT</text>
-      <text className="lane-label" x="16" y="186">ADJUSTER</text>
-      <text className="lane-label" x="16" y="328">SETTLEMENT</text>
-
+    <FlowSvgShell
+      isActive={isActive}
+      ripples={wiRipples}
+      lanes={[
+        { y: 4, height: 108, label: 'CLAIMANT', labelY: 62 },
+        { y: 118, height: 128, label: 'ADJUSTER', labelY: 186 },
+        { y: 252, height: 144, label: 'SETTLEMENT', labelY: 328 },
+      ]}
+      markers={[
+        { id: 'wi-arrow', fill: '#6b4d40' },
+        { id: 'wi-arrow-green', fill: '#3FDC77' },
+        { id: 'wi-arrow-red', fill: '#FF362B' },
+      ]}
+    >
       {/* ALL edges */}
-      <line data-edge-id="wi-edge-file-evidence" className="edge" x1="238" y1="58" x2="390" y2="58" markerEnd="url(#wi-arrow)"/>
-      <line data-edge-id="wi-edge-evidence-review" className="edge" x1="430" y1="73" x2="430" y2="167" markerEnd="url(#wi-arrow)"/>
-      <line data-edge-id="wi-edge-review-assess" className="edge" x1="468" y1="182" x2="600" y2="182" markerEnd="url(#wi-arrow)"/>
-      <line data-edge-id="wi-edge-assess-approve-v" className="edge" x1="630" y1="197" x2="630" y2="310" markerEnd="url(#wi-arrow)"/>
-      <line data-edge-id="wi-edge-assess-investigate-h" className="edge" x1="680" y1="182" x2="780" y2="182" style={{ opacity: 0, transition: 'opacity 0.4s ease' }}/>
-      <line data-edge-id="wi-edge-assess-investigate-v" className="edge" x1="780" y1="182" x2="780" y2="310" markerEnd="url(#wi-arrow)" style={{ opacity: 0, transition: 'opacity 0.4s ease' }}/>
-      <line data-edge-id="wi-edge-payout-issue" className="edge" x1="587" y1="325" x2="360" y2="325" markerEnd="url(#wi-arrow)"/>
-      <line data-edge-id="wi-edge-issue-end" className="edge" x1="280" y1="325" x2="143" y2="325" markerEnd="url(#wi-arrow)"/>
+      <line
+        data-edge-id="wi-edge-file-evidence"
+        className="edge"
+        x1="238"
+        y1="58"
+        x2="390"
+        y2="58"
+        markerEnd="url(#wi-arrow)"
+      />
+      <line
+        data-edge-id="wi-edge-evidence-review"
+        className="edge"
+        x1="430"
+        y1="73"
+        x2="430"
+        y2="167"
+        markerEnd="url(#wi-arrow)"
+      />
+      <line
+        data-edge-id="wi-edge-review-assess"
+        className="edge"
+        x1="468"
+        y1="182"
+        x2="600"
+        y2="182"
+        markerEnd="url(#wi-arrow)"
+      />
+      <line
+        data-edge-id="wi-edge-assess-approve-v"
+        className="edge"
+        x1="630"
+        y1="197"
+        x2="630"
+        y2="310"
+        markerEnd="url(#wi-arrow)"
+      />
+      <line
+        data-edge-id="wi-edge-assess-investigate-h"
+        className="edge"
+        x1="680"
+        y1="182"
+        x2="780"
+        y2="182"
+        style={{ opacity: 0, transition: 'opacity 0.4s ease' }}
+      />
+      <line
+        data-edge-id="wi-edge-assess-investigate-v"
+        className="edge"
+        x1="780"
+        y1="182"
+        x2="780"
+        y2="310"
+        markerEnd="url(#wi-arrow)"
+        style={{ opacity: 0, transition: 'opacity 0.4s ease' }}
+      />
+      <line
+        data-edge-id="wi-edge-payout-issue"
+        className="edge"
+        x1="587"
+        y1="325"
+        x2="360"
+        y2="325"
+        markerEnd="url(#wi-arrow)"
+      />
+      <line
+        data-edge-id="wi-edge-issue-end"
+        className="edge"
+        x1="280"
+        y1="325"
+        x2="143"
+        y2="325"
+        markerEnd="url(#wi-arrow)"
+      />
 
       {/* Edge labels */}
-      <text className="edge-label" x="635" y="255">approve</text>
-      <text data-edge-label="investigate" className="edge-label" x="720" y="170" style={{ opacity: 0, transition: 'opacity 0.4s ease' }}>investigate</text>
+      <text className="edge-label" x="635" y="255">
+        approve
+      </text>
+      <text
+        data-edge-label="investigate"
+        className="edge-label"
+        x="720"
+        y="170"
+        style={{ opacity: 0, transition: 'opacity 0.4s ease' }}
+      >
+        investigate
+      </text>
 
       {/* ALL nodes */}
       {/* File Claim (action) */}
-      <g data-node-id="wi-node-file" className="node-group ntype-action" data-cx="200" data-cy="58" transform="translate(200,58)">
-        <rect className="node-rect" x="-38" y="-15" width="76" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">File Claim</text>
+      <g
+        data-node-id="wi-node-file"
+        className="node-group ntype-action"
+        data-cx="200"
+        data-cy="58"
+        transform="translate(200,58)"
+      >
+        <rect
+          className="node-rect"
+          x="-38"
+          y="-15"
+          width="76"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          File Claim
+        </text>
       </g>
       {/* Submit Evidence (action) */}
-      <g data-node-id="wi-node-evidence" className="node-group ntype-action" data-cx="430" data-cy="58" transform="translate(430,58)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Submit Evidence</text>
+      <g
+        data-node-id="wi-node-evidence"
+        className="node-group ntype-action"
+        data-cx="430"
+        data-cy="58"
+        transform="translate(430,58)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Submit Evidence
+        </text>
       </g>
       {/* Review Claim (action) */}
-      <g data-node-id="wi-node-review" className="node-group ntype-action" data-cx="430" data-cy="182" transform="translate(430,182)">
-        <rect className="node-rect" x="-38" y="-15" width="76" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Review Claim</text>
+      <g
+        data-node-id="wi-node-review"
+        className="node-group ntype-action"
+        data-cx="430"
+        data-cy="182"
+        transform="translate(430,182)"
+      >
+        <rect
+          className="node-rect"
+          x="-38"
+          y="-15"
+          width="76"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Review Claim
+        </text>
       </g>
       {/* Assess Damage (switch) */}
-      <g data-node-id="wi-node-assess" className="node-group ntype-switch" data-cx="640" data-cy="182" transform="translate(640,182)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(163,116,255,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">SWITCH</text>
-        <text className="node-label" x="0" y="6">Assess</text>
+      <g
+        data-node-id="wi-node-assess"
+        className="node-group ntype-switch"
+        data-cx="640"
+        data-cy="182"
+        transform="translate(640,182)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(163,116,255,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#A374FF">
+          SWITCH
+        </text>
+        <text className="node-label" x="0" y="6">
+          Assess
+        </text>
       </g>
       {/* Calculate Payout (action) */}
-      <g data-node-id="wi-node-payout" className="node-group ntype-action" data-cx="630" data-cy="325" transform="translate(630,325)">
-        <rect className="node-rect" x="-43" y="-15" width="86" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Calculate Payout</text>
+      <g
+        data-node-id="wi-node-payout"
+        className="node-group ntype-action"
+        data-cx="630"
+        data-cy="325"
+        transform="translate(630,325)"
+      >
+        <rect
+          className="node-rect"
+          x="-43"
+          y="-15"
+          width="86"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Calculate Payout
+        </text>
       </g>
       {/* Issue Payment (action) */}
-      <g data-node-id="wi-node-issue" className="node-group ntype-action" data-cx="320" data-cy="325" transform="translate(320,325)">
-        <rect className="node-rect" x="-40" y="-15" width="80" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Issue Payment</text>
+      <g
+        data-node-id="wi-node-issue"
+        className="node-group ntype-action"
+        data-cx="320"
+        data-cy="325"
+        transform="translate(320,325)"
+      >
+        <rect
+          className="node-rect"
+          x="-40"
+          y="-15"
+          width="80"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Issue Payment
+        </text>
       </g>
       {/* End (terminal) */}
-      <g data-node-id="wi-node-end" className="node-group ntype-terminal" data-cx="130" data-cy="325" transform="translate(130,325)">
-        <circle className="node-circle" cx="0" cy="0" r="13"/>
-        <text className="node-label" x="0" y="0" fontSize="8.5">End</text>
+      <g
+        data-node-id="wi-node-end"
+        className="node-group ntype-terminal"
+        data-cx="130"
+        data-cy="325"
+        transform="translate(130,325)"
+      >
+        <circle className="node-circle" cx="0" cy="0" r="13" />
+        <text className="node-label" x="0" y="0" fontSize="8.5">
+          End
+        </text>
       </g>
       {/* Fraud Check (action) — investigate path, hidden by default */}
-      <g data-node-id="wi-node-fraud" className="node-group ntype-action" data-cx="780" data-cy="325" style={{ opacity: 0, transformOrigin: '780px 325px', transform: 'scale(0)' }} transform="translate(780,325)">
-        <rect className="node-rect" x="-38" y="-15" width="76" height="30" style={{ stroke: 'rgba(255,146,67,0.3)' }}/>
-        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">ACTION</text>
-        <text className="node-label" x="0" y="6">Fraud Check</text>
-      </g>
-
-      {/* Ripple layer */}
-      <g>
-        {wiRipples.map(r => (
-          <circle
-            key={r.id}
-            className="ripple-circle"
-            cx={r.cx}
-            cy={r.cy}
-            r="4"
-            stroke={r.color}
-            style={{ animation: `bridge-sim-ripple-expand 1.2s ${r.delay}s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards` }}
-          />
-        ))}
+      <g
+        data-node-id="wi-node-fraud"
+        className="node-group ntype-action"
+        data-cx="780"
+        data-cy="325"
+        style={{ opacity: 0, transformOrigin: '780px 325px', transform: 'scale(0)' }}
+        transform="translate(780,325)"
+      >
+        <rect
+          className="node-rect"
+          x="-38"
+          y="-15"
+          width="76"
+          height="30"
+          style={{ stroke: 'rgba(255,146,67,0.3)' }}
+        />
+        <text className="node-type-badge" x="0" y="-6" fill="#FF9243">
+          ACTION
+        </text>
+        <text className="node-label" x="0" y="6">
+          Fraud Check
+        </text>
       </g>
 
       {/* Error tooltip for what-if mode */}
       <g data-tooltip-id="wi-error-tooltip" className="error-tooltip">
-        <rect x="660" y="348" width="250" height="22" rx="5"/>
-        <text x="670" y="362"><tspan className="tt-icon">{'\u26A0'}</tspan> Alert: Suspicious pattern — duplicate claim #CLM-7829</text>
+        <rect x="660" y="348" width="250" height="22" rx="5" />
+        <text x="670" y="362">
+          <tspan className="tt-icon">{'\u26A0'}</tspan> Alert: Suspicious pattern — duplicate claim
+          #CLM-7829
+        </text>
       </g>
-    </svg>
+    </FlowSvgShell>
   )
 }
diff --git a/packages/homepage/components/sections/hero.tsx b/packages/homepage/components/sections/hero.tsx
index 8484614..94b9591 100644
--- a/packages/homepage/components/sections/hero.tsx
+++ b/packages/homepage/components/sections/hero.tsx
@@ -1,13 +1,13 @@
-"use client"
+'use client'
 
-import { Button } from "@/components/ui/button"
-import { HeroBackground } from "@/components/hero-background"
-import { Copy, ArrowRight } from "lucide-react"
-import { useState } from "react"
+import { Button } from '@/components/ui/button'
+import { HeroBackground } from '@/components/hero-background'
+import { Copy, ArrowRight } from 'lucide-react'
+import { useState } from 'react'
 
 export function HeroSection() {
   const [copied, setCopied] = useState(false)
-  const installCommand = "npm i -g flowprint"
+  const installCommand = 'npm i -g flowprint'
 
   const handleCopy = async () => {
     try {
@@ -22,10 +22,10 @@ export function HeroSection() {
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
       <HeroBackground />
-      
+
       {/* Gradient overlay */}
       <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
-      
+
       <div className="relative z-10 max-w-5xl mx-auto px-6 py-24 text-center">
         {/* Badge */}
         <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/50 border border-border mb-8 animate-fade-in-up">
@@ -35,25 +35,37 @@ export function HeroSection() {
         </div>
 
         {/* Headline */}
-        <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 text-balance animate-fade-in-up" style={{ animationDelay: "0.1s" }}>
+        <h1
+          className="text-5xl md:text-7xl font-bold tracking-tight mb-6 text-balance animate-fade-in-up"
+          style={{ animationDelay: '0.1s' }}
+        >
           <span className="text-foreground">Executable</span>
           <br />
           <span className="gradient-text">service blueprints</span>
         </h1>
 
         {/* Subheadline */}
-        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
-          Visual design, decision tables, simulation, code generation, and version control — 
-          all in one specification that business defines and engineering ships.
+        <p
+          className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
+          style={{ animationDelay: '0.2s' }}
+        >
+          Visual design, decision tables, simulation, code generation, and version control — all in
+          one specification that business defines and engineering ships.
         </p>
 
         {/* CTAs */}
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-fade-in-up" style={{ animationDelay: "0.3s" }}>
-          <Button size="lg" className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-8 py-6 text-base">
+        <div
+          className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12 animate-fade-in-up"
+          style={{ animationDelay: '0.3s' }}
+        >
+          <Button
+            size="lg"
+            className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-8 py-6 text-base"
+          >
             Try it now
             <ArrowRight className="ml-2 h-4 w-4" />
           </Button>
-          
+
           <div className="flex items-center gap-2 bg-card border border-border rounded-lg px-4 py-3">
             <code className="font-mono text-sm text-foreground">{installCommand}</code>
             <button
@@ -61,32 +73,42 @@ export function HeroSection() {
               className="p-1 hover:bg-secondary rounded transition-colors"
               aria-label="Copy install command"
             >
-              <Copy className={`h-4 w-4 ${copied ? "text-primary" : "text-muted-foreground"}`} />
+              <Copy className={`h-4 w-4 ${copied ? 'text-primary' : 'text-muted-foreground'}`} />
             </button>
           </div>
         </div>
 
         {/* YAML Preview */}
-        <div className="max-w-lg mx-auto animate-fade-in-up" style={{ animationDelay: "0.4s" }}>
+        <div className="max-w-lg mx-auto animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
           <div className="code-block text-left p-4 text-sm overflow-hidden">
             <div className="flex items-center gap-2 mb-3 pb-3 border-b border-border">
               <div className="w-3 h-3 rounded-full bg-destructive/50" />
               <div className="w-3 h-3 rounded-full bg-chart-4/50" />
               <div className="w-3 h-3 rounded-full bg-chart-5/50" />
-              <span className="ml-2 text-muted-foreground text-xs">patient-intake.flowprint.yaml</span>
+              <span className="ml-2 text-muted-foreground text-xs">
+                patient-intake.flowprint.yaml
+              </span>
             </div>
             <pre className="text-muted-foreground">
               <code>
-                <span className="text-primary">name:</span> patient-intake{"\n"}
-                <span className="text-primary">version:</span> 1.0.0{"\n"}
-                <span className="text-primary">lanes:</span>{"\n"}
-                {"  "}<span className="text-chart-3">- id:</span> patient{"\n"}
-                {"  "}<span className="text-chart-3">- id:</span> intake-staff{"\n"}
-                {"  "}<span className="text-chart-3">- id:</span> clinical{"\n"}
-                <span className="text-primary">nodes:</span>{"\n"}
-                {"  "}<span className="text-chart-3">- id:</span> check-in{"\n"}
-                {"    "}<span className="text-chart-3">type:</span> action{"\n"}
-                {"    "}<span className="text-chart-3">lane:</span> patient
+                <span className="text-primary">name:</span> patient-intake{'\n'}
+                <span className="text-primary">version:</span> 1.0.0{'\n'}
+                <span className="text-primary">lanes:</span>
+                {'\n'}
+                {'  '}
+                <span className="text-chart-3">- id:</span> patient{'\n'}
+                {'  '}
+                <span className="text-chart-3">- id:</span> intake-staff{'\n'}
+                {'  '}
+                <span className="text-chart-3">- id:</span> clinical{'\n'}
+                <span className="text-primary">nodes:</span>
+                {'\n'}
+                {'  '}
+                <span className="text-chart-3">- id:</span> check-in{'\n'}
+                {'    '}
+                <span className="text-chart-3">type:</span> action{'\n'}
+                {'    '}
+                <span className="text-chart-3">lane:</span> patient
               </code>
             </pre>
           </div>