diff --git a/site/pages/docs/index.astro b/site/pages/docs/index.astro
index 80409efa6..48082a0ed 100644
--- a/site/pages/docs/index.astro
+++ b/site/pages/docs/index.astro
@@ -117,16 +117,26 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
             <p class="docs-start-rail-lede">Install, run setup, then try one command on an existing page.</p>
           </header>
 
-          <ol class="docs-start-rail-steps docs-start-rail-steps--number-gutter docs-start-rail-steps--inner-inset" aria-label="Quick start steps">
-            {startSteps.map((step, i) => (
-              <li class="docs-start-rail-step">
-                <span class="docs-start-rail-num">{String(i + 1).padStart(2, "0")}</span>
-                <span class="docs-start-rail-label">{step.label}</span>
-                <code class="docs-start-rail-command">{step.command}</code>
-                <span class="docs-start-rail-line">{step.line}</span>
-              </li>
-            ))}
-          </ol>
+          <div class="docs-start-rail-sequence">
+            <div class="docs-start-rail-divider docs-start-rail-divider--top" aria-hidden="true">
+              <div class="ksd-divider ksd-divider--double-notch"></div>
+            </div>
+
+            <ol class="docs-start-rail-steps docs-start-rail-steps--number-gutter docs-start-rail-steps--inner-inset" aria-label="Quick start steps">
+              {startSteps.map((step, i) => (
+                <li class="docs-start-rail-step">
+                  <span class="docs-start-rail-num">{String(i + 1).padStart(2, "0")}</span>
+                  <span class="docs-start-rail-label">{step.label}</span>
+                  <code class="docs-start-rail-command">{step.command}</code>
+                  <span class="docs-start-rail-line">{step.line}</span>
+                </li>
+              ))}
+            </ol>
+
+            <div class="docs-start-rail-divider docs-start-rail-divider--bottom" aria-hidden="true">
+              <div class="ksd-divider ksd-divider--double-notch"></div>
+            </div>
+          </div>
 
           <p class="docs-start-rail-note">Full walkthrough: <a href="/tutorials/getting-started">Getting started</a>.</p>
         </section>
diff --git a/site/styles/docs-kinpaku.css b/site/styles/docs-kinpaku.css
index 9728b1579..9d138d457 100644
--- a/site/styles/docs-kinpaku.css
+++ b/site/styles/docs-kinpaku.css
@@ -17,6 +17,7 @@
    ============================================================================ */
 
 @import "./kinpaku-tokens.css";
+@import "./divider-patterns.css";
 
 
 /* ============================================================================
@@ -372,14 +373,36 @@ html.light .docs-kinpaku {
 
 /* Quick start rail ----------------------------------------------------- */
 
+.docs-kinpaku .docs-start-rail-sequence {
+  display: grid;
+  gap: clamp(12px, 1.8vw, 18px);
+}
+
+.docs-kinpaku .docs-start-rail-divider {
+  color: var(--docs-accent);
+  opacity: 0.86;
+}
+
+html.light .docs-kinpaku .docs-start-rail-divider {
+  opacity: 0.58;
+}
+
+.docs-kinpaku .docs-start-rail-divider .ksd-divider {
+  color: currentColor;
+}
+
+.docs-kinpaku .docs-start-rail-divider--top .ksd-divider {
+  transform: scaleY(-1);
+}
+
 .docs-kinpaku .docs-start-rail-steps {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  border-top: 1px solid var(--ks-rule);
-  border-bottom: 1px solid var(--ks-rule);
+  border-top: 0;
+  border-bottom: 0;
 }
 
 @media (max-width: 940px) {
@@ -491,6 +514,10 @@ html.light .docs-kinpaku {
     padding-inline: 0;
   }
 
+  .docs-kinpaku .docs-start-rail-step:last-child {
+    border-bottom: 0;
+  }
+
   .docs-kinpaku .docs-start-rail-command {
     min-height: 0;
   }