Marketing: mark Trace every call as coming soon

Remove the run-trace mockup, grey out the card, and add a Coming soon badge.

Author: RhysSullivan

apps/marketing/src/pages/index.astro

@@ -257,49 +257,20 @@ Source (and the place to start if something breaks): https://github.com/RhysSull
               </p>
             </div>
 
-            {/* Trace every call */}
-            <div class="cap-card">
+            {/* Trace every call (coming soon) */}
+            <div class="cap-card cap-card--soon">
+              <span class="cap-soon-badge">Coming soon</span>
               <span class="cap-icon"
                 ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"
                   ><path d="M3 12h4l3 8 4-16 3 8h4"></path></svg
                 ></span
               >
               <h3>Trace every call</h3>
-              <p class="mb-1">
+              <p>
                 One place to see every run and tool call. Audit any
                 decision after the fact.
               </p>
-              <div class="cap-visual trace">
-                <div class="trace-row is-root">
-                  <span class="lbl">run_7421</span>
-                  <span class="track"
-                    ><span class="bar" style="left:0%;width:100%"></span></span
-                  >
-                  <span class="dur">1.42s</span>
-                </div>
-                <div class="trace-row">
-                  <span class="lbl">sentry.getIssue</span>
-                  <span class="track"
-                    ><span class="bar" style="left:0%;width:18%"></span></span
-                  >
-                  <span class="dur">184ms</span>
-                </div>
-                <div class="trace-row">
-                  <span class="lbl">github.searchCode</span>
-                  <span class="track"
-                    ><span class="bar" style="left:18%;width:34%"></span></span
-                  >
-                  <span class="dur">391ms</span>
-                </div>
-                <div class="trace-row">
-                  <span class="lbl">linear.createIssue</span>
-                  <span class="track"
-                    ><span class="bar" style="left:52%;width:48%"></span></span
-                  >
-                  <span class="dur">612ms</span>
-                </div>
-              </div>
             </div>
 
             {/* Teams */}

apps/marketing/src/styles/global.css

@@ -670,13 +670,32 @@ body {
   }
 }
 .cap-card {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   padding: 1.6rem 1.5rem 1.7rem;
   background: white;
   transition: background 0.15s ease;
 }
+/* Coming-soon card: greyed out, with a corner badge that stays legible. */
+.cap-card--soon > :not(.cap-soon-badge) {
+  opacity: 0.45;
+}
+.cap-soon-badge {
+  position: absolute;
+  top: 1.45rem;
+  right: 1.4rem;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-ink-3);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-rule);
+  border-radius: 999px;
+  padding: 3px 9px;
+}
 .cap-card:hover {
   background: var(--color-surface);
 }