diff --git a/development/samples/overview.mdx b/development/samples/overview.mdx
new file mode 100644
index 000000000..c8b24e8ab
--- /dev/null
+++ b/development/samples/overview.mdx
@@ -0,0 +1,133 @@
+---
+title: "Demo Apps"
+description: "Start from a working demo app built on the Comfy API."
+mode: "wide"
+hideFooterPagination: true
+---
+
+Start from a working demo app, then adapt the workflow and interface for your own project. Choose Comfy Cloud for the fastest path, or Deploy Your Own when you need your own models or nodes.
+
+<div className="sample-card-grid">
+  <div className="sample-card" data-sample-card="true">
+    <div className="sample-card-inner">
+      <div className="sample-card-face sample-card-front" data-sample-front="true">
+        <img src="/images/samples/img2img-web-app.svg" alt="Preview of the image-to-image web app" className="sample-card-preview" />
+        <div className="sample-card-body">
+          <h2>Image-to-image web app</h2>
+          <p>Upload an image, run a Comfy workflow, and show the result in a Next.js app.</p>
+          <div className="sample-card-actions">
+            <button type="button" data-sample-open="api">Use Comfy Cloud</button>
+            <button type="button" data-sample-open="endpoint">Deploy Your Own</button>
+          </div>
+          <div className="sample-card-links">
+            <a href="https://github.com/Comfy-Org/comfy-examples/blob/main/img2img-web-app/workflows/workflow_api.json?raw=1">Download workflow ↗</a><span>·</span><a href="https://github.com/Comfy-Org/comfy-examples/tree/main/img2img-web-app">View source ↗</a>
+          </div>
+        </div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="api" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Comfy Cloud</p><h2>Use Image-to-image web app with Comfy Cloud</h2>
+          <p>Use Comfy Cloud as the managed endpoint. Create an API key, then deploy a copy of the app.</p>
+          <div className="sample-path-steps">
+            <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save a Comfy API key.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+            <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Deploy app to Vercel</strong><span>The provider creates a copy of this sample in your account.</span></div><a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-examples%2Ftree%2Fmain%2Fimg2img-web-app&env=COMFY_BASE_URL%2CCOMFY_API_KEY&envDefaults=%7B%22COMFY_BASE_URL%22%3A%22https%3A%2F%2Fcloud.comfy.org%22%7D">Deploy app ↗</a></div>
+          </div>
+        </div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="endpoint" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Deploy Your Own</p><h2>Deploy your own endpoint for Image-to-image web app</h2>
+          <p>Create a Comfy API serverless endpoint when you need your own models or custom nodes.</p>
+          <div className="sample-path-steps">
+            <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Download workflow</strong><span>Use this API-format workflow in the dedicated deployment flow.</span></div><a href="https://github.com/Comfy-Org/comfy-examples/blob/main/img2img-web-app/workflows/workflow_api.json?raw=1">Download workflow ↗</a></div>
+            <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save the key your deployed app will use.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+            <div className="sample-path-step"><span className="sample-path-number">3</span><div className="sample-path-copy"><strong>Paste Workflow and Deploy</strong><span>In Builds, paste the workflow, configure the endpoint, and wait for its URL.</span></div><a href="https://platform.comfy.org/profile/builds">Open builds ↗</a></div>
+            <div className="sample-path-step"><span className="sample-path-number">4</span><div className="sample-path-copy"><strong>Paste endpoint URL and API key</strong><span>Set COMFY_BASE_URL and COMFY_API_KEY during app deployment.</span></div><a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-examples%2Ftree%2Fmain%2Fimg2img-web-app&env=COMFY_BASE_URL%2CCOMFY_API_KEY">Deploy app ↗</a></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div className="sample-card" data-sample-card="true">
+    <div className="sample-card-inner">
+      <div className="sample-card-face sample-card-front" data-sample-front="true">
+        <img src="/images/samples/sketch-to-image.svg" alt="Preview of the sketch-to-image app" className="sample-card-preview" />
+        <div className="sample-card-body">
+          <h2>Sketch to image</h2><p>Draw or import a guide, then generate an image from the guide and a prompt.</p>
+          <div className="sample-card-actions"><button type="button" data-sample-open="api">Use Comfy Cloud</button><button type="button" data-sample-open="endpoint">Deploy Your Own</button></div>
+          <div className="sample-card-links"><a href="https://github.com/Comfy-Org/comfy-examples/blob/main/sketch-to-image/workflows/workflow_api.json?raw=1">Download workflow ↗</a><span>·</span><a href="https://github.com/Comfy-Org/comfy-examples/tree/main/sketch-to-image">View source ↗</a></div>
+        </div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="api" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Comfy Cloud</p>
+          <h2>Use Sketch to image with Comfy Cloud</h2>
+          <p>Use Comfy Cloud as the managed endpoint. Create an API key, then deploy a copy of the app.</p>
+          <div className="sample-path-steps">
+          <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save a Comfy API key.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Deploy app to Vercel</strong><span>The provider creates a copy of this sample in your account.</span></div><a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-examples%2Ftree%2Fmain%2Fsketch-to-image&env=COMFY_BASE_URL%2CCOMFY_API_KEY&envDefaults=%7B%22COMFY_BASE_URL%22%3A%22https%3A%2F%2Fcloud.comfy.org%22%7D">Deploy app ↗</a></div>
+        </div></div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="endpoint" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Deploy Your Own</p>
+          <h2>Deploy your own endpoint for Sketch to image</h2>
+          <p>Create a Comfy API serverless endpoint when you need your own models or custom nodes.</p>
+          <div className="sample-path-steps">
+          <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Download workflow</strong><span>Use this API-format workflow in the dedicated deployment flow.</span></div><a href="https://github.com/Comfy-Org/comfy-examples/blob/main/sketch-to-image/workflows/workflow_api.json?raw=1">Download workflow ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save the key your deployed app will use.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">3</span><div className="sample-path-copy"><strong>Paste Workflow and Deploy</strong><span>In Builds, paste the workflow, configure the endpoint, and wait for its URL.</span></div><a href="https://platform.comfy.org/profile/builds">Open builds ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">4</span><div className="sample-path-copy"><strong>Paste endpoint URL and API key</strong><span>Set COMFY_BASE_URL and COMFY_API_KEY during app deployment.</span></div><a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-examples%2Ftree%2Fmain%2Fsketch-to-image&env=COMFY_BASE_URL%2CCOMFY_API_KEY">Deploy app ↗</a></div>
+        </div></div>
+      </div>
+    </div>
+  </div>
+
+  <div className="sample-card" data-sample-card="true">
+    <div className="sample-card-inner">
+      <div className="sample-card-face sample-card-front" data-sample-front="true">
+        <img src="/images/samples/discord-image-bot.svg" alt="Preview of the Discord image bot" className="sample-card-preview" />
+        <div className="sample-card-body">
+          <h2>Discord image bot</h2><p>Add an `/imagine` command to a Discord server and run the bundled Comfy workflow.</p>
+          <div className="sample-card-actions"><button type="button" data-sample-open="api">Use Comfy Cloud</button><button type="button" data-sample-open="endpoint">Deploy Your Own</button></div>
+          <div className="sample-card-links"><a href="https://github.com/Comfy-Org/comfy-discord-image-bot/blob/main/workflows/workflow_api.json?raw=1">Download workflow ↗</a><span>·</span><a href="https://github.com/Comfy-Org/comfy-discord-image-bot">View source ↗</a></div>
+        </div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="api" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Comfy Cloud</p>
+          <h2>Use Discord image bot with Comfy Cloud</h2>
+          <p>Use Comfy Cloud as the managed endpoint. Create an API key, then deploy a copy of the app.</p>
+          <div className="sample-path-steps">
+          <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save a Comfy API key.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Deploy app to Render</strong><span>The provider creates a copy of this sample in your account.</span></div><a href="https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-discord-image-bot">Deploy app ↗</a></div>
+        </div></div>
+      </div>
+      <div className="sample-card-face sample-card-back" data-sample-path="endpoint" aria-hidden="true" inert="true">
+        <div className="sample-path-body">
+          <button type="button" data-sample-back="true">← Back to demo app</button>
+          <p className="sample-path-eyebrow">Deploy Your Own</p>
+          <h2>Deploy your own endpoint for Discord image bot</h2>
+          <p>Create a Comfy API serverless endpoint when you need your own models or custom nodes.</p>
+          <div className="sample-path-steps">
+          <div className="sample-path-step"><span className="sample-path-number">1</span><div className="sample-path-copy"><strong>Download workflow</strong><span>Use this API-format workflow in the dedicated deployment flow.</span></div><a href="https://github.com/Comfy-Org/comfy-discord-image-bot/blob/main/workflows/workflow_api.json?raw=1">Download workflow ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">2</span><div className="sample-path-copy"><strong>Create API key</strong><span>Create and save the key your deployed app will use.</span></div><a href="https://platform.comfy.org/profile/api-keys">Create API key ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">3</span><div className="sample-path-copy"><strong>Paste Workflow and Deploy</strong><span>In Builds, paste the workflow, configure the endpoint, and wait for its URL.</span></div><a href="https://platform.comfy.org/profile/builds">Open builds ↗</a></div>
+          <div className="sample-path-step"><span className="sample-path-number">4</span><div className="sample-path-copy"><strong>Paste endpoint URL and API key</strong><span>Set COMFY_BASE_URL and COMFY_API_KEY during app deployment.</span></div><a href="https://render.com/deploy?repo=https%3A%2F%2Fgithub.com%2FComfy-Org%2Fcomfy-discord-image-bot">Deploy app ↗</a></div>
+        </div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<Note>
+Both paths need a [Comfy API key](https://platform.comfy.org/profile/api-keys). For Deploy Your Own, download the workflow, use Builds to paste it and configure the serverless endpoint, wait for its URL, then paste that URL and the API key into your Vercel or Render deployment.
+</Note>
+
+Want to add a demo app? See the [examples repository](https://github.com/Comfy-Org/comfy-examples).
diff --git a/docs.json b/docs.json
index 79f6017a8..a8f05c869 100644
--- a/docs.json
+++ b/docs.json
@@ -3028,6 +3028,12 @@
                   }
                 ]
               },
+              {
+                "group": "Demo Apps",
+                "pages": [
+                  "development/samples/overview"
+                ]
+              },
               {
                 "group": "Comfy Router",
                 "pages": [
@@ -13897,4 +13903,4 @@
       "destination": "/tutorials/partner-nodes/wan/wan3-0"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/images/samples/discord-image-bot.svg b/images/samples/discord-image-bot.svg
new file mode 100644
index 000000000..4a60c6991
--- /dev/null
+++ b/images/samples/discord-image-bot.svg
@@ -0,0 +1,21 @@
+<svg width="960" height="540" viewBox="0 0 960 540" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="960" height="540" fill="#302D58"/>
+  <circle cx="170" cy="109" r="115" fill="#554E9D" opacity="0.35"/>
+  <circle cx="813" cy="437" r="167" fill="#6759B0" opacity="0.25"/>
+  <rect x="297" y="48" width="366" height="444" rx="35" fill="#20202D" stroke="#11111A" stroke-width="10"/>
+  <rect x="420" y="67" width="120" height="13" rx="6.5" fill="#393946"/>
+  <text x="332" y="137" fill="#EEEAF7" font-family="Arial, sans-serif" font-size="21" font-weight="700"># imagine</text>
+  <rect x="329" y="160" width="302" height="3" rx="1.5" fill="#393946"/>
+  <rect x="330" y="189" width="52" height="52" rx="10" fill="#665FB6"/>
+  <text x="347" y="222" fill="white" font-family="Arial, sans-serif" font-size="20" font-weight="700">C</text>
+  <text x="394" y="211" fill="#F1EFF6" font-family="Arial, sans-serif" font-size="16" font-weight="700">/imagine</text>
+  <text x="394" y="233" fill="#B8B5C2" font-family="Arial, sans-serif" font-size="14">a lavender cat in sunlight</text>
+  <rect x="330" y="270" width="52" height="52" rx="10" fill="#8077C4"/>
+  <text x="347" y="303" fill="white" font-family="Arial, sans-serif" font-size="20" font-weight="700">C</text>
+  <text x="394" y="293" fill="#F1EFF6" font-family="Arial, sans-serif" font-size="16" font-weight="700">Comfy bot</text>
+  <text x="394" y="315" fill="#B8B5C2" font-family="Arial, sans-serif" font-size="14">Your image is ready</text>
+  <rect x="394" y="335" width="194" height="108" rx="10" fill="url(#paint0_linear)"/>
+  <circle cx="534" cy="360" r="18" fill="#FFF0A8"/>
+  <path d="M394 406C427 374 460 387 493 417C526 448 557 422 588 388V443H394V406Z" fill="#5D3A89" opacity="0.87"/>
+  <defs><linearGradient id="paint0_linear" x1="403" y1="340" x2="577" y2="433" gradientUnits="userSpaceOnUse"><stop stop-color="#E5A7E8"/><stop offset="0.47" stop-color="#E9D976"/><stop offset="1" stop-color="#7164B7"/></linearGradient></defs>
+</svg>
diff --git a/images/samples/img2img-web-app.svg b/images/samples/img2img-web-app.svg
new file mode 100644
index 000000000..445abb678
--- /dev/null
+++ b/images/samples/img2img-web-app.svg
@@ -0,0 +1,20 @@
+<svg width="960" height="540" viewBox="0 0 960 540" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="960" height="540" fill="#F4F2FA"/>
+  <rect x="108" y="65" width="744" height="410" rx="20" fill="white" stroke="#DED9EA" stroke-width="3"/>
+  <rect x="108" y="65" width="744" height="58" rx="20" fill="#49378B"/>
+  <path d="M108 103C108 91.954 116.954 83 128 83H832C843.046 83 852 91.954 852 103V123H108V103Z" fill="#49378B"/>
+  <circle cx="145" cy="94" r="7" fill="#F2FF59"/>
+  <rect x="168" y="88" width="134" height="12" rx="6" fill="#C9C1E5"/>
+  <rect x="144" y="158" width="284" height="254" rx="12" fill="#F7F6F9" stroke="#D8D3E3" stroke-width="2" stroke-dasharray="8 8"/>
+  <path d="M244 263L278 227L331 285L357 258L398 302V365H174V314L214 274L244 304V263Z" fill="#D8D3E3"/>
+  <circle cx="344" cy="221" r="19" fill="#F2FF59"/>
+  <text x="181" y="397" fill="#645D73" font-family="Arial, sans-serif" font-size="19" font-weight="700">Upload an image</text>
+  <path d="M458 282H510" stroke="#8E80BF" stroke-width="5" stroke-linecap="round"/>
+  <path d="M494 263L514 282L494 301" stroke="#8E80BF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="540" y="158" width="276" height="254" rx="12" fill="url(#paint0_linear)"/>
+  <circle cx="726" cy="215" r="36" fill="#FFF1A7" opacity="0.9"/>
+  <path d="M540 340C592 287 643 304 690 351C736 397 772 360 816 324V412H540V340Z" fill="#513B91" opacity="0.88"/>
+  <path d="M540 371C584 330 622 346 671 384C725 426 770 391 816 354V412H540V371Z" fill="#2E245B" opacity="0.88"/>
+  <text x="551" y="397" fill="white" font-family="Arial, sans-serif" font-size="19" font-weight="700">Generated image</text>
+  <defs><linearGradient id="paint0_linear" x1="554" y1="170" x2="792" y2="408" gradientUnits="userSpaceOnUse"><stop stop-color="#F9C878"/><stop offset="0.54" stop-color="#F28683"/><stop offset="1" stop-color="#7652A2"/></linearGradient></defs>
+</svg>
diff --git a/images/samples/sketch-to-image.svg b/images/samples/sketch-to-image.svg
new file mode 100644
index 000000000..681fd26b0
--- /dev/null
+++ b/images/samples/sketch-to-image.svg
@@ -0,0 +1,19 @@
+<svg width="960" height="540" viewBox="0 0 960 540" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="960" height="540" fill="#F7F6EF"/>
+  <rect x="109" y="64" width="742" height="412" rx="20" fill="white" stroke="#E1DED3" stroke-width="3"/>
+  <rect x="109" y="64" width="742" height="58" rx="20" fill="#4A3A83"/>
+  <rect x="138" y="86" width="135" height="14" rx="7" fill="#CEC6E8"/>
+  <circle cx="801" cy="94" r="7" fill="#F2FF59"/>
+  <rect x="150" y="160" width="293" height="252" rx="12" fill="#FFFEFA" stroke="#4B4650" stroke-width="3"/>
+  <path d="M150 210H443M150 260H443M150 310H443M150 360H443M208 160V412M266 160V412M324 160V412M382 160V412" stroke="#E6E2D7" stroke-width="2"/>
+  <path d="M204 337C223 291 248 259 278 268C313 280 307 325 337 331C367 337 375 249 408 215" stroke="#4B4650" stroke-width="7" stroke-linecap="round"/>
+  <path d="M201 350C260 352 326 367 399 235" stroke="#8E80BF" stroke-width="5" stroke-linecap="round" stroke-dasharray="9 11"/>
+  <text x="169" y="392" fill="#5D5663" font-family="Arial, sans-serif" font-size="18" font-weight="700">Draw a guide</text>
+  <path d="M469 282H519" stroke="#8E80BF" stroke-width="5" stroke-linecap="round"/>
+  <path d="M503 263L523 282L503 301" stroke="#8E80BF" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+  <rect x="551" y="160" width="257" height="252" rx="12" fill="url(#paint0_radial)"/>
+  <path d="M551 357C594 323 624 340 663 375C707 414 758 385 808 332V412H551V357Z" fill="#552C6C" opacity="0.74"/>
+  <circle cx="731" cy="226" r="25" fill="#FFF0A5"/>
+  <text x="569" y="392" fill="white" font-family="Arial, sans-serif" font-size="18" font-weight="700">Generate from sketch</text>
+  <defs><radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(714 220) rotate(95) scale(228)"><stop stop-color="#FCD999"/><stop offset="0.53" stop-color="#EC8581"/><stop offset="1" stop-color="#692C70"/></radialGradient></defs>
+</svg>
diff --git a/samples-cards.css b/samples-cards.css
new file mode 100644
index 000000000..b857b168b
--- /dev/null
+++ b/samples-cards.css
@@ -0,0 +1,31 @@
+.sample-card-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; }
+.sample-card { min-width: 0; perspective: 1200px; }
+.sample-card-inner { height: 565px; position: relative; transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2, .75, .3, 1); }
+.sample-card[data-flipped="true"] .sample-card-inner { transform: rotateY(180deg); }
+.sample-card-face { backface-visibility: hidden; background: #fff; border: 1px solid #e5e1eb; border-radius: 12px; box-sizing: border-box; height: 100%; inset: 0; overflow: hidden; position: absolute; width: 100%; }
+.sample-card-front { display: flex; flex-direction: column; }
+.sample-card-back { opacity: 0; pointer-events: none; transform: rotateY(180deg); visibility: hidden; }
+.sample-card[data-flipped="true"] .sample-card-front { pointer-events: none; transition: visibility 0s linear 280ms; visibility: hidden; }
+.sample-card[data-flipped="true"][data-active-path="api"] .sample-card-back[data-sample-path="api"], .sample-card[data-flipped="true"][data-active-path="endpoint"] .sample-card-back[data-sample-path="endpoint"] { opacity: 1; pointer-events: auto; visibility: visible; }
+.sample-card-preview { border-bottom: 1px solid #e5e1eb; display: block; width: 100%; }
+.sample-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
+.sample-card-body h2, .sample-path-body h2 { color: #49378b; font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
+.sample-path-body h2 { text-align: center; }
+.sample-card-body > p { color: #5f5966; font-size: 14px; line-height: 1.55; margin: 0; min-height: 66px; }
+.sample-card-actions { display: flex; gap: 8px; margin-top: 20px; }
+.sample-card-actions button { background: #fff; border: 1px solid #cfc8de; border-radius: 6px; color: #49378b; cursor: pointer; flex: 1; font-size: 13px; font-weight: 700; padding: 10px 12px; }
+.sample-card-links { border-top: 1px solid #eeeaf1; display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; }
+.sample-card-links a { color: #625b6c; font-size: 12px; font-weight: 650; text-decoration: none; }
+.sample-card-links span { color: #b3adba; }
+.sample-path-body { padding: 20px; }
+.sample-path-body > button { background: transparent; border: 0; color: #625b6c; cursor: pointer; font-size: 12px; font-weight: 700; padding: 0; }
+.sample-path-eyebrow { color: #857a9e; font-size: 10px; font-weight: 700; letter-spacing: .08em; margin: 19px 0 5px; text-align: center; text-transform: uppercase; }
+.sample-path-body > p:not(.sample-path-eyebrow) { color: #5f5966; font-size: 12px; line-height: 1.5; margin: 0 0 15px; }
+.sample-path-steps { display: grid; gap: 8px; }
+.sample-path-step { align-items: center; background: #faf9fc; border: 1px solid #e5e1ea; border-radius: 8px; display: flex; gap: 10px; padding: 10px 11px; }
+.sample-path-number { align-items: center; background: #49378b; border-radius: 999px; color: #fff; display: inline-flex; flex: 0 0 21px; font-size: 11px; font-weight: 700; height: 21px; justify-content: center; }
+.sample-path-copy { flex: 1; min-width: 0; }
+.sample-path-copy strong { color: #312c36; display: block; font-size: 12px; }
+.sample-path-copy span { color: #706a75; display: block; font-size: 11px; line-height: 1.35; margin-top: 2px; }
+.sample-path-step a { color: #49378b; flex: 0 0 auto; font-size: 11px; font-weight: 700; text-decoration: none; }
+@media (max-width: 768px) { .sample-card-grid { grid-template-columns: 1fr; } }
diff --git a/samples-cards.js b/samples-cards.js
new file mode 100644
index 000000000..650e97f62
--- /dev/null
+++ b/samples-cards.js
@@ -0,0 +1,34 @@
+document.addEventListener("click", (event) => {
+  const openButton = event.target.closest("[data-sample-open]");
+  const backButton = event.target.closest("[data-sample-back]");
+
+  if (openButton) {
+    const card = openButton.closest("[data-sample-card]");
+    const path = openButton.dataset.sampleOpen;
+    const front = card.querySelector("[data-sample-front]");
+    const selectedPath = card.querySelector(`[data-sample-path="${path}"]`);
+    event.preventDefault();
+    card.dataset.activePath = path;
+    card.dataset.flipped = "true";
+    front.inert = true;
+    front.setAttribute("aria-hidden", "true");
+    card.querySelectorAll("[data-sample-path]").forEach((panel) => {
+      panel.inert = panel !== selectedPath;
+      panel.setAttribute("aria-hidden", panel === selectedPath ? "false" : "true");
+    });
+  }
+
+  if (backButton) {
+    const card = backButton.closest("[data-sample-card]");
+    const front = card.querySelector("[data-sample-front]");
+    event.preventDefault();
+    card.removeAttribute("data-flipped");
+    card.removeAttribute("data-active-path");
+    front.inert = false;
+    front.setAttribute("aria-hidden", "false");
+    card.querySelectorAll("[data-sample-path]").forEach((panel) => {
+      panel.inert = true;
+      panel.setAttribute("aria-hidden", "true");
+    });
+  }
+});