From 44c7524211c568e9da43b6e2c6c1b5bea00112dd Mon Sep 17 00:00:00 2001
From: Luca Martial <lucamrtl@gmail.com>
Date: Fri, 15 May 2026 05:40:05 -0700
Subject: [PATCH] fix: use <ol> for runtime pipeline steps in product mechanics

The PipelineStep component renders <li> elements, but the RuntimeDiagram
wrapper was a plain <div> instead of a list element. This produced invalid
HTML and accessibility warnings. IngestionDiagram already used <ol>.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs-site/components/product-mechanics.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs-site/components/product-mechanics.tsx b/docs-site/components/product-mechanics.tsx
index 1bf04e8e..9b370d7d 100644
--- a/docs-site/components/product-mechanics.tsx
+++ b/docs-site/components/product-mechanics.tsx
@@ -222,7 +222,7 @@ function RuntimeDiagram() {
 
         <section className="bg-fd-muted/35 p-4">
           <ColumnLabel>KTX planning and execution</ColumnLabel>
-          <div className="grid gap-2 sm:grid-cols-2">
+          <ol className="grid gap-2 sm:grid-cols-2">
             {runtimeSteps.map((step, index) => (
               <PipelineStep
                 key={step.title}
@@ -231,7 +231,7 @@ function RuntimeDiagram() {
                 body={step.body}
               />
             ))}
-          </div>
+          </ol>
         </section>
       </div>