WEBSITE: Tidied up usagetap section

Author: PredictabilityAtScale

website/index.html

@@ -76,10 +76,8 @@
           <a href="#features">Features</a>
           <a href="#faq">FAQ</a>
           <a href="/docs/index.html">Docs</a>
-          <a class="button button-primary mobile-github" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
+          <a class="button button-primary nav-github" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
         </nav>
-
-        <a class="button button-primary desktop-github" href="https://github.com/PredictabilityAtScale/promptopskit">GitHub</a>
       </div>
     </header>
 
@@ -286,25 +284,6 @@ <h3>3. Render for any provider</h3>
       <section id="features" class="container section">
         <h2>Features for engineering teams</h2>
         <div class="grid two">
-          <article class="card card-featured-optional">
-            <p class="card-kicker">Optional Integration</p>
-            <h3>Usage-based billing and entitlement checks with <a href="https://usagetap.com">usagetap.com</a></h3>
-            <p>
-              PromptOpsKit can optionally pair with <a href="https://usagetap.com">usagetap.com</a> when you need usage metering,
-              per-call entitlement checks, spend-aware AI feature gating, or a path from free
-              usage to PAYG and committed plans. PromptOpsKit still owns prompt rendering;
-              <a href="https://usagetap.com">usagetap.com</a> adds billing and control around the LLM call.
-            </p>
-            <p>
-              The integration is separate, fetch-based, and opt-in through the
-              <code>promptopskit/usagetap</code> subpath.
-            </p>
-            <p>
-              <a href="/docs/index.html#/usagetap">Read the usagetap.com docs</a>
-              ·
-              <a href="https://usagetap.com">Learn about usagetap.com</a>
-            </p>
-          </article>
           <article class="card">
             <h3>Validation &amp; schema checks</h3>
             <ul>
@@ -350,6 +329,21 @@ <h3>No transport lock-in</h3>
               <li>Works with any fetch wrapper, SDK, or infrastructure</li>
             </ul>
           </article>
+          <article class="card card-featured-optional">
+            <p class="card-kicker">Optional Integration</p>
+            <h3>Usage-based billing and entitlement checks</h3>
+            <p>
+              PromptOpsKit can optionally pair with <a href="https://usagetap.com">usagetap.com</a> when you need usage metering,
+              per-call entitlement checks, spend-aware AI feature gating, or a path from free
+              usage to PAYG and committed plans. PromptOpsKit still owns prompt rendering;
+              <a href="https://usagetap.com">usagetap.com</a> adds billing and control around the LLM call.
+            </p>
+            <p>
+              <a href="/docs/index.html#/usagetap">Read the usagetap.com docs</a>
+              ·
+              <a href="https://usagetap.com">Learn about usagetap.com</a>
+            </p>
+          </article>
         </div>
       </section>
 

website/styles.css

@@ -67,8 +67,8 @@ body {
   line-height: 1;
 }
 
-.mobile-github {
-  display: none;
+.nav-github {
+  margin-left: 0.5rem;
 }
 
 nav {
@@ -177,19 +177,29 @@ h2 {
     radial-gradient(circle at top right, rgba(15, 23, 42, 0.08), transparent 35%),
     linear-gradient(180deg, #fffaf0 0%, #fffdf8 100%);
   border-color: #d6bbfb;
+  padding: 1.1rem;
+}
+
+.card-featured-optional h3 {
+  font-size: 1.45rem;
+}
+
+.card-featured-optional p {
+  font-size: 0.95rem;
 }
 
-.card-kicker {
+.card-featured-optional .card-kicker {
   display: inline-block;
-  margin: 0 0 0.75rem;
-  padding: 0.2rem 0.55rem;
+  margin: 0 0 0.6rem;
+  padding: 0.1rem 0.44rem;
   border: 1px solid #e9d7fe;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.9);
   color: #6941c6;
-  font-size: 0.8rem;
+  font-size: 0.68rem;
+  line-height: 1.2;
   font-weight: 700;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.015em;
   text-transform: uppercase;
 }
 
@@ -290,10 +300,6 @@ ul {
     margin-left: auto;
   }
 
-  .desktop-github {
-    display: none;
-  }
-
   nav {
     display: none;
     position: absolute;
@@ -315,9 +321,10 @@ ul {
     display: flex;
   }
 
-  .mobile-github {
+  .nav-github {
     display: inline-block;
     margin-top: 0.25rem;
+    margin-left: 0;
   }
 
   .grid.two,