docs: swap Step 01 and Step 02 — right panel first, vertical/line/function second

index.html

@@ -419,10 +419,56 @@
   </div>
 </div>
 
-<!-- ── SECTION 1: CHOOSE YOUR VERTICAL ── -->
+<!-- ── SECTION 1: CONFIGURE THE RIGHT PANEL ── -->
 <div class="section">
   <div class="container">
     <div class="section-label">Step 01</div>
+    <h2>Configure the Right Panel</h2>
+    <p class="lead">The right panel controls your ThoughtSpot connection, AI model, and tracks progress as the pipeline runs. Set it up before hitting GO.</p>
+
+    <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;">
+      <div>
+        <div class="panel-grid" style="grid-template-columns: 1fr;">
+          <div class="panel-card">
+            <h4>TS Environment</h4>
+            <p>Choose which ThoughtSpot instance to deploy to. <strong style="color:var(--white);">Required</strong> — GO will not run without a selection.</p>
+          </div>
+          <div class="panel-card">
+            <h4>AI Model</h4>
+            <p>Select the LLM for the build. GPT-5.5 is the current default — Claude models are also available for higher reasoning quality.</p>
+          </div>
+          <div class="panel-card">
+            <h4>⚙️ Settings (click to expand)</h4>
+            <p>Collapsible section with per-run options that take effect immediately — no save or reload needed:</p>
+            <ul style="margin-top:8px; padding-left:14px; font-size:.83rem; line-height:1.8;">
+              <li><strong style="color:var(--white);">Liveboard Name</strong> — leave blank to auto-derive from the company URL</li>
+              <li><strong style="color:var(--white);">Data Size</strong> — Small (~1k rows, fast) or Medium (~10k rows, richer data)</li>
+              <li><strong style="color:var(--white);">Geo Scope</strong> — USA Only or International location data</li>
+              <li><strong style="color:var(--white);">Tag Name</strong> — optional tag applied to all created TS objects</li>
+              <li><strong style="color:var(--white);">Column Naming Style</strong> — Regular Case, snake_case, camelCase, PascalCase, etc.</li>
+              <li><strong style="color:var(--white);">Object Naming Prefix</strong> — short prefix added to model and liveboard names</li>
+              <li><strong style="color:var(--white);">Share With</strong> — ThoughtSpot email to share the liveboard with after deployment</li>
+            </ul>
+          </div>
+          <div class="panel-card">
+            <h4>Pipeline Progress</h4>
+            <p>Once GO is pressed, watch the stages tick through in real time — Research → DDL → Data → ThoughtSpot → Liveboard → Complete. Pipeline Status shows live output as it runs.</p>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div class="screenshot-wrap" style="aspect-ratio: 9/16; height: auto;">
+          <img src="ss_rightpanel.png" alt="Right panel — TS Environment, AI Model, Liveboard Name, Pipeline Progress"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── SECTION 2: CHOOSE YOUR VERTICAL ── -->
+<div class="section">
+  <div class="container">
+    <div class="section-label">Step 02</div>
     <h2>Choose Your Vertical, Line &amp; Function</h2>
     <p class="lead">DemoPrep covers 15 industry verticals, each with specific lines of business, and 6 universal functions. Three selections and you're ready to run.</p>
 
@@ -515,52 +561,6 @@
   </div>
 </div>
 
-<!-- ── SECTION 2: CONFIGURE THE RIGHT PANEL ── -->
-<div class="section">
-  <div class="container">
-    <div class="section-label">Step 02</div>
-    <h2>Configure the Right Panel</h2>
-    <p class="lead">The right panel controls your ThoughtSpot connection, AI model, and tracks progress as the pipeline runs. Set it up before hitting GO.</p>
-
-    <div style="display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start;">
-      <div>
-        <div class="panel-grid" style="grid-template-columns: 1fr;">
-          <div class="panel-card">
-            <h4>TS Environment</h4>
-            <p>Choose which ThoughtSpot instance to deploy to. <strong style="color:var(--white);">Required</strong> — GO will not run without a selection.</p>
-          </div>
-          <div class="panel-card">
-            <h4>AI Model</h4>
-            <p>Select the LLM for the build. GPT-5.5 is the current default — Claude models are also available for higher reasoning quality.</p>
-          </div>
-          <div class="panel-card">
-            <h4>⚙️ Settings (click to expand)</h4>
-            <p>Collapsible section with per-run options that take effect immediately — no save or reload needed:</p>
-            <ul style="margin-top:8px; padding-left:14px; font-size:.83rem; line-height:1.8;">
-              <li><strong style="color:var(--white);">Liveboard Name</strong> — leave blank to auto-derive from the company URL</li>
-              <li><strong style="color:var(--white);">Data Size</strong> — Small (~1k rows, fast) or Medium (~10k rows, richer data)</li>
-              <li><strong style="color:var(--white);">Geo Scope</strong> — USA Only or International location data</li>
-              <li><strong style="color:var(--white);">Tag Name</strong> — optional tag applied to all created TS objects</li>
-              <li><strong style="color:var(--white);">Column Naming Style</strong> — Regular Case, snake_case, camelCase, PascalCase, etc.</li>
-              <li><strong style="color:var(--white);">Object Naming Prefix</strong> — short prefix added to model and liveboard names</li>
-              <li><strong style="color:var(--white);">Share With</strong> — ThoughtSpot email to share the liveboard with after deployment</li>
-            </ul>
-          </div>
-          <div class="panel-card">
-            <h4>Pipeline Progress</h4>
-            <p>Once GO is pressed, watch the stages tick through in real time — Research → DDL → Data → ThoughtSpot → Liveboard → Complete. Pipeline Status shows live output as it runs.</p>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="screenshot-wrap" style="aspect-ratio: 9/16; height: auto;">
-          <img src="ss_rightpanel.png" alt="Right panel — TS Environment, AI Model, Liveboard Name, Pipeline Progress"/>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
 <!-- ── SECTION 3: RUN THE PIPELINE ── -->
 <div class="section">
   <div class="container">