Balance CTA spacing; reorder benefits (API access before seat-at-table); rename API card

index.html

@@ -167,6 +167,7 @@
     gap: 16px;
     flex-wrap: wrap;
     justify-content: center;
+    margin: 40px 0;
   }
 
   /* Prominent notices — how-it-works and beta, styled to stand out. */
@@ -404,6 +405,21 @@
       </ul>
     </div>
 
+    <div class="benefit-card">
+      <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+        <path d="M8 9l-3 3 3 3" stroke="#5b8c5a" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M16 9l3 3-3 3" stroke="#6ba86b" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M13 6l-2 12" stroke="#7ab87a" stroke-width="1.6" stroke-linecap="round"/>
+      </svg>
+      <h2>API access</h2>
+      <p>Use the same private models from your own tools with an OpenAI-compatible API.</p>
+      <ul>
+        <li>OpenAI-compatible endpoint</li>
+        <li>Your own API keys</li>
+        <li>Shares your member budget</li>
+      </ul>
+    </div>
+
     <div class="benefit-card">
       <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <circle cx="9" cy="8" r="3" stroke="#5b8c5a" stroke-width="1.6"/>
@@ -419,21 +435,6 @@
         <li>Own the roadmap</li>
       </ul>
     </div>
-
-    <div class="benefit-card">
-      <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-        <path d="M8 9l-3 3 3 3" stroke="#5b8c5a" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M16 9l3 3-3 3" stroke="#6ba86b" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
-        <path d="M13 6l-2 12" stroke="#7ab87a" stroke-width="1.6" stroke-linecap="round"/>
-      </svg>
-      <h2>Developer API</h2>
-      <p>Build on the same private models with an OpenAI-compatible API.</p>
-      <ul>
-        <li>OpenAI-compatible endpoint</li>
-        <li>Your own API keys</li>
-        <li>Shares your member budget</li>
-      </ul>
-    </div>
   </div>
 
   <div class="footer">