docs(bryn): bucket the hero flow into two stage groups [BRYN-1086]

static/images/bryn/src/d1-hero-flow.mmd

@@ -1,13 +1,20 @@
 flowchart TB
-    V([Website visitor]) --> P[Pixel]
-    P --> ID[Identity resolution]
-    PH[Product analytics] --> ID
-    WH[Your systems<br/>webhook] --> ID
-    ID --> CO["Company + person<br/>(when known)"]
-    CO --> S[Signals]
-    S --> SC["Score<br/>Fit&nbsp;⬩&nbsp;Intent&nbsp;⬩&nbsp;Timing"]
-    SC --> PL[Plays]:::accent
-    PL --> O1[Slack alert]
-    PL --> O2[CRM update]
-    PL --> O3[On-page<br/>personalization]
+    V([Website visitor]) --> P
+    subgraph NS ["Noise to signal"]
+        direction TB
+        PH[Product analytics] -->|"product events"| ID[Identity resolution]
+        P[Pixel] -->|"page views ⬩ clicks"| ID
+        WH[Your systems<br/>webhook] -->|"your events"| ID
+        ID --> CO["Company + person<br/>(when known)"]
+        CO --> S[Signals]
+        S --> SC["Score<br/>Fit&nbsp;⬩&nbsp;Intent&nbsp;⬩&nbsp;Timing"]
+    end
+    subgraph PE ["Play agent engine"]
+        direction TB
+        PL[Plays]:::accent --> O1["Alerts<br/>Slack&nbsp;⬩&nbsp;Teams&nbsp;⬩&nbsp;Discord"]
+        PL --> O2["Tool updates<br/>CRM&nbsp;⬩&nbsp;sequences&nbsp;⬩&nbsp;webhooks"]
+        PL --> O3["On-page personalization"]
+    end
+    SC --->|"scored signals trigger Plays"| PL
+    O2 -->|"personalized content and outreach"| V2([Website visitor])
     classDef accent fill:#7C3AED,stroke:#7C3AED,color:#FFFFFF

static/images/bryn/src/theme-dark.json

@@ -10,12 +10,18 @@
     "secondaryColor": "#161D27",
     "tertiaryColor": "#161D27",
     "edgeLabelBackground": "#0D1320",
-    "clusterBkg": "transparent"
+    "clusterBkg": "transparent",
+    "clusterBorder": "#2A3548",
+    "titleColor": "#94A3B8"
   },
   "flowchart": {
     "curve": "basis",
     "htmlLabels": true,
     "nodeSpacing": 30,
-    "rankSpacing": 40
+    "rankSpacing": 40,
+    "subGraphTitleMargin": {
+      "top": 8,
+      "bottom": 24
+    }
   }
 }

static/images/bryn/src/theme-light.json

@@ -10,12 +10,18 @@
     "secondaryColor": "#F8FAFC",
     "tertiaryColor": "#F8FAFC",
     "edgeLabelBackground": "#FFFFFF",
-    "clusterBkg": "transparent"
+    "clusterBkg": "transparent",
+    "clusterBorder": "#94A3B8",
+    "titleColor": "#1F2937"
   },
   "flowchart": {
     "curve": "basis",
     "htmlLabels": true,
     "nodeSpacing": 30,
-    "rankSpacing": 40
+    "rankSpacing": 40,
+    "subGraphTitleMargin": {
+      "top": 8,
+      "bottom": 24
+    }
   }
 }