Benchmark page leads with the comparison bars; the phone header is one row

agents/import.mdx

@@ -11,7 +11,7 @@ Supported inputs include OpenClaw workspace files, Hermes config and skills, Age
 
 ## From your terminal or coding agent
 
-Run these yourself, or ask Claude Code, Cursor, Codex, or any agent with a shell to run them:
+Run these yourself, or ask any agent with a shell to run them:
 
 ```bash
 npx -y @proofable/sdk auth --oauth

agents/talk-to-an-agent.mdx

@@ -141,7 +141,7 @@ Over HTTP it is `GET /api/v1/profile/usage?from=YYYY-MM-DD&to=YYYY-MM-DD` with t
 
 ## Other ways to reach the same agent
 
-- **In an MCP client.** `npx -y @proofable/sdk mount my-agent --apply claude` loads the agent into Claude, Cursor, Codex, Hermes, OpenClaw, or OpenCode. [Connect agent context](/agents/runtime-mount)
+- **In an MCP client.** `npx -y @proofable/sdk mount my-agent --apply claude` loads the agent into your client, Hermes, OpenClaw, or OpenCode. [Connect agent context](/agents/runtime-mount)
 - **As background work.** Start a [job](/jobs) for scheduled or long work, on an isolated computer when it needs one.
 
 ## Related

connections.mdx

@@ -7,7 +7,7 @@ icon: plug
 
 Stop re-explaining yourself. Link an app once. The next tool uses the same approved connection.
 
-Connecting Cursor, Claude, or another assistant to Proofable signs that host into your profile. Connections holds the apps your agents work in.
+Connecting an assistant to Proofable signs that host into your profile. Connections holds the apps your agents work in.
 
 ## Link an app
 

index.mdx

@@ -19,7 +19,7 @@ Adds Proofable to the AI tools on your machine. Your client opens the sign-in th
 
 <CardGroup cols={2}>
   <Card title="Give your agents limits" icon="robot" iconType="solid" href="/mcp/setup">
-    Identity, limits and vault keys it uses but never sees, in Claude, Cursor, Codex and VS Code.
+    Identity, limits and vault keys it uses but never sees, in every MCP client you already run.
   </Card>
   <Card title="Add sign-in to your app" icon="right-to-bracket" iconType="solid" href="/verification/hosted">
     Passkey, OAuth and wallet sign-in from one hosted page. No sign-in screens to build.

mcp/overview.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Proofable for MCP"
 sidebarTitle: "MCP"
-description: "Connect Proofable to ChatGPT, Cursor, Claude, Codex, VS Code, and any MCP client."
+description: "Connect Proofable to any MCP client, so every agent you run carries your identity, limits and proof."
 icon: plug
 "og:image": "/images/og-default.png"
 "twitter:image": "/images/og-default.png"

styles.css

@@ -47,7 +47,10 @@ main > span.absolute.inset-0.overflow-hidden.pointer-events-none:not(#background
 
 /*
   Frosted docs header: use Mintlify #navbar-transition as the glass plate (do not hide it).
-  Interactive chrome stays above the plate; no extra drop shadows on the shell.
+  The plate dissolves into the page instead of stopping on a hairline: a solid field behind
+  the controls, then the same progressive fade the product header uses, so scrolled text
+  passes under a soft edge rather than being cut by a bar. Interactive chrome stays above
+  the plate; no extra drop shadows on the shell.
 */
 #navbar {
   background: transparent !important;
@@ -66,10 +69,31 @@ main > span.absolute.inset-0.overflow-hidden.pointer-events-none:not(#background
   background-color: transparent !important;
   -webkit-backdrop-filter: var(--proofable-shell-glass-blur) !important;
   backdrop-filter: var(--proofable-shell-glass-blur) !important;
-  border-bottom: 1px solid var(--proofable-shell-glass-border) !important;
+  /* A hairline on a dissolving plate re-draws the hard edge the fade removes. */
+  border-bottom: none !important;
   box-shadow: none !important;
   opacity: 1 !important;
   z-index: 0;
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    #000 0%,
+    #000 74%,
+    rgb(0 0 0 / 0.4) 90%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    180deg,
+    #000 0%,
+    #000 74%,
+    rgb(0 0 0 / 0.4) 90%,
+    transparent 100%
+  );
+}
+
+/* The bar's own hairline and the sheet behind it would cut the fade off at the same line. */
+#navbar .border-b,
+#navbar [class*="border-b"] {
+  border-bottom-width: 0 !important;
 }
 
 #navbar > .max-w-8xl,
@@ -1167,11 +1191,19 @@ a.card:hover {
     max-height: 2rem !important;
   }
 
+  /*
+    One compact 56px band on a phone. Mintlify stacks two rows: an h-16 logo/search row
+    and an h-14 navigation row under it, so the fixed chrome ate 92px of a 667px screen
+    and read as a second bar rather than a header. The navigation trigger moves up into
+    the logo row as a 44px target on the leading edge, its duplicated tab label folds
+    away, and the whole header is one row again.
+  */
   #navbar .flex.items-center.lg\:px-12.h-16,
   #navbar .flex.items-center.h-16 {
-    height: 3rem !important;
-    min-height: 3rem !important;
-    max-height: 3rem !important;
+    height: 3.5rem !important;
+    min-height: 3.5rem !important;
+    max-height: 3.5rem !important;
+    padding-left: 2.5rem !important;
   }
 
   #navbar .flex.items-center.h-16 .border-b,
@@ -1181,38 +1213,27 @@ a.card:hover {
 
   #navbar button.h-14.lg\:hidden,
   #navbar button.flex.items-center.h-14 {
+    position: absolute !important;
+    top: 0.375rem !important;
+    left: 0.25rem !important;
+    width: 2.75rem !important;
+    min-width: 2.75rem !important;
+    max-width: 2.75rem !important;
     height: 2.75rem !important;
     min-height: 2.75rem !important;
     max-height: 2.75rem !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-    min-width: 0 !important;
+    padding: 0 !important;
+    justify-content: center !important;
+    z-index: 2 !important;
   }
 
+  /* The row's own copy of the page title is the duplicate the H1 already carries. */
   #navbar button.h-14 .ml-4 {
-    min-width: 0 !important;
-    overflow: hidden !important;
-  }
-
-  /* Keep the current tab name; hide the duplicated page title that truncated over the H1. */
-  #navbar button.h-14 .ml-4 > :first-child {
-    min-width: 0 !important;
-    max-width: calc(100vw - 7.5rem) !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-  }
-
-  #navbar button.h-14 .ml-4 > :not(:first-child) {
-    display: none !important;
-  }
-
-  #navbar button.h-14 .ml-4 svg {
     display: none !important;
   }
 
   #content-container > .flex.flex-row-reverse {
-    padding-top: 6.25rem !important;
+    padding-top: 4.5rem !important;
     min-width: 0 !important;
     max-width: 100% !important;
   }
@@ -1353,3 +1374,54 @@ html {
     min-width: 7.5rem;
   }
 }
+
+/*
+  Evidence charts: one cut per theme per viewport.
+
+  Each figure ships four files, a wide cut and a stacked cut for phones, each in light and
+  dark. Every variant used to carry the same mint-block / dark:mint-hidden pair, so both the
+  wide (1200x460) and the tall (1200x1037) cut rendered at every width: each visitor saw each
+  chart twice and a phone fetched four charts where it needed two. The `.dark .evid-dark.evid-wide`
+  selector inside the media query is load-bearing, because without it the dark-theme rule outside
+  the query outranks a plain `.evid-dark.evid-wide` and both cuts show on a phone in dark mode.
+*/
+.evid-wide,
+.evid-tall {
+  display: none;
+}
+
+.evid-light.evid-wide {
+  display: block;
+}
+.dark .evid-light.evid-wide {
+  display: none;
+}
+.dark .evid-dark.evid-wide {
+  display: block;
+}
+
+.mdx-content img.evid-wide,
+.mdx-content img.evid-tall {
+  width: 100% !important;
+  max-width: 100% !important;
+  height: auto !important;
+  margin: 0 !important;
+  border-radius: var(--proofable-radius-lg);
+}
+
+@media (max-width: 768px) {
+  .evid-light.evid-wide,
+  .evid-dark.evid-wide,
+  .dark .evid-dark.evid-wide {
+    display: none;
+  }
+  .evid-light.evid-tall {
+    display: block;
+  }
+  .dark .evid-light.evid-tall {
+    display: none;
+  }
+  .dark .evid-dark.evid-tall {
+    display: block;
+  }
+}