docs: fix minor style bug and improve style for workflow

docs/src/components/Workflow.astro

@@ -0,0 +1,117 @@
+---
+interface Props {
+  steps: Array<{
+    title: string;
+    description: string;
+  }>;
+}
+
+const { steps } = Astro.props;
+---
+
+<div class="workflow-wrapper">
+  <div class="workflow-container">
+    {
+      steps.map((step, index) => (
+        <>
+          <div class="workflow-step">
+            <div class="step-header">
+              <div class="step-number">{index + 1}</div>
+              <h3 class="step-title">{step.title}</h3>
+            </div>
+            <p class="step-description">{step.description}</p>
+          </div>
+          {index < steps.length - 1 && <div class="workflow-arrow">→</div>}
+        </>
+      ))
+    }
+  </div>
+</div>
+
+<style is:global>
+  .sl-markdown-content .workflow-wrapper * {
+    margin-top: 0 !important;
+  }
+</style>
+
+<style>
+  .workflow-wrapper {
+    background: var(--sl-color-bg-sidebar);
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: var(--sl-border-radius-lg);
+    padding: 1rem;
+    margin: 1rem 0;
+  }
+
+  .workflow-container {
+    display: flex;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+
+  .workflow-step {
+    flex: 1 1 0;
+    padding: 1.75rem 1.5rem;
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: var(--sl-border-radius-md);
+    background: var(--sl-color-bg);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .step-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    background: var(--sl-color-accent);
+    color: var(--sl-color-bg);
+    border-radius: 50%;
+    font-weight: 700;
+    font-size: 0.875rem;
+    flex-shrink: 0;
+  }
+
+  .step-title {
+    font-size: var(--sl-text-base);
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .step-description {
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-3);
+    line-height: 1.5;
+  }
+
+  .workflow-arrow {
+    color: var(--sl-color-accent);
+    font-size: 1.5rem;
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  @media (max-width: 768px) {
+    .workflow-container {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: center;
+    }
+
+    .workflow-step {
+      width: 100%;
+    }
+
+    .workflow-arrow {
+      transform: rotate(90deg);
+    }
+  }
+</style>

docs/src/content/docs/building-stacks/workflow.mdx

@@ -6,17 +6,28 @@ description: The end-to-end process of building and deploying a Hyperstack data
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
 
 Building a stack follows a straightforward four-step workflow: define your data model in Rust, compile to build the stack, deploy to Hyperstack Cloud, and connect from your application.
 
-```
-┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
-│  1. Write   │     │  2. Build   │     │  3. Deploy  │     │ 4. Connect  │
-│    Rust     │ ──▶ │   Stack     │ ──▶ │   via CLI   │ ──▶ │   from App  │
-│             │     │             │     │             │     │             │
-│ #[hyperstack]    │ cargo build │     │   hs up     │     │  SDK/WS     │
-└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
-```
+<Workflow steps={[
+  {
+    title: "Write Rust",
+    description: "Define entities using #[hyperstack] macro"
+  },
+  {
+    title: "Build Stack", 
+    description: "Compile with cargo build"
+  },
+  {
+    title: "Deploy via CLI",
+    description: "Push to cloud with hs up"
+  },
+  {
+    title: "Connect from App",
+    description: "Use generated SDK to stream"
+  }
+]} />
 
 ---
 

docs/src/content/docs/index.mdx

@@ -4,6 +4,7 @@ description: Programmable data feeds for Solana
 ---
 
 import { Card, CardGrid, Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../components/Workflow.astro";
 
 **Hyperstack is a system for programmable data feeds on Solana.**
 
@@ -102,13 +103,20 @@ npm install hyperstack-stacks hyperstack-react
 
 Hyperstack handles the full pipeline from chain to client:
 
-```
-┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
-│     Solana       │ ──▶ │   Hyperstack    │ ──▶ │    Your App     │
-│   (on-chain)     │     │  (transform +   │     │   (live feed)   │
-│                  │     │    stream)       │     │                 │
-└─────────────────┘     └─────────────────┘     └─────────────────┘
-```
+<Workflow steps={[
+  {
+    title: "Solana",
+    description: "On-chain data"
+  },
+  {
+    title: "Hyperstack",
+    description: "Transform + stream"
+  },
+  {
+    title: "Your App",
+    description: "Live feed"
+  }
+]} />
 
 1. **Define** the data shape you need using a declarative Rust DSL
 2. **Deploy** your definition — Hyperstack manages the infrastructure

docs/src/content/docs/using-stacks/connect.mdx

@@ -6,6 +6,7 @@ description: Add Hyperstack to your existing project and stream live Solana data
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
 
 Add Hyperstack to an existing project and start streaming live Solana data in minutes. Connect to stacks you have deployed or to one of our managed feeds like Ore. The Ore feed is available with no account required — just install the SDK and connect to the public Ore stack.
 
@@ -204,12 +205,20 @@ You just connected to a live Hyperstack stack. The ORE mining stack watches the
 
 The stack is public — no API key or account needed. Point your SDK at the WebSocket URL and start receiving data immediately.
 
-```
-┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
-│     Solana      │ ──▶ │   Hyperstack    │ ──▶ │    Your App     │
-│   (on-chain)    │     │   (streaming)   │     │   (live feed)   │
-└─────────────────┘     └─────────────────┘     └─────────────────┘
-```
+<Workflow steps={[
+  {
+    title: "Solana",
+    description: "On-chain"
+  },
+  {
+    title: "Hyperstack",
+    description: "Streaming"
+  },
+  {
+    title: "Your App",
+    description: "Live feed"
+  }
+]} />
 
 ### The Data You're Receiving
 

docs/src/content/docs/using-stacks/quickstart.mdx

@@ -7,6 +7,7 @@ description: Scaffold a new Hyperstack app in under 2 minutes.
 ---
 
 import { Tabs, TabItem } from "@astrojs/starlight/components";
+import Workflow from "../../../components/Workflow.astro";
 
 Create a new app that streams live Solana data in under 2 minutes. The CLI scaffolds everything you need — no configuration required.
 
@@ -116,12 +117,20 @@ The scaffolded app connects to a deployed **Hyperstack Stack** — a streaming d
 2. **Transforms raw transactions** into structured round data (round ID, motherlode, deployment totals)
 3. **Streams updates** to your app via WebSocket as they happen on-chain
 
-```
-┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
-│     Solana       │ ──▶ │   Hyperstack    │ ──▶ │    Your App     │
-│  ORE program     │     │   ore stack     │     │   (live feed)   │
-└─────────────────┘     └─────────────────┘     └─────────────────┘
-```
+<Workflow steps={[
+  {
+    title: "Solana",
+    description: "ORE program"
+  },
+  {
+    title: "Hyperstack",
+    description: "ORE stack"
+  },
+  {
+    title: "Your App",
+    description: "Live feed"
+  }
+]} />
 
 No RPC calls. No polling. No custom indexer. Just streaming data.
 

docs/src/styles/custom.css

@@ -439,3 +439,10 @@ starlight-tabs [role="tab"][aria-selected="true"] {
     font-size: var(--sl-text-xl);
   }
 }
+
+/* ============================================
+   Heading Anchor Links - Fix Overlap
+   ============================================ */
+.sl-markdown-content .sl-heading-wrapper {
+  --sl-anchor-icon-gap: 0.75em;
+}