diff --git a/site/assets/docs.css b/site/assets/docs.css
index 9e1cfc1..479e848 100644
--- a/site/assets/docs.css
+++ b/site/assets/docs.css
@@ -142,4 +142,10 @@ table.api td:first-child { white-space: nowrap; }
   .docs-grid { grid-template-columns: 1fr; gap: 0; }
   .docs-side { position: static; padding-bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; border-bottom: 1px solid var(--line-soft); }
   .docs-side .side-group { margin-bottom: 14px; }
+  /* API tables: let the first column wrap and long tokens break so the
+     second column isn't pushed off-screen and trimmed by overflow-x: hidden. */
+  table.api td:first-child { white-space: normal; }
+  .docs-main p code, .docs-main li code, .docs-main td code, .callout code {
+    overflow-wrap: anywhere;
+  }
 }
diff --git a/site/assets/landing.css b/site/assets/landing.css
index 677dffe..fea2032 100644
--- a/site/assets/landing.css
+++ b/site/assets/landing.css
@@ -273,8 +273,16 @@
 
 @media (max-width: 880px) {
   .hero { padding: 64px 0 70px; }
-  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
-  .capture { transform: none; }
+  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
+  /* Let the capture panel shrink below its nowrap min-content instead of
+     inflating the grid track (which stretched — and clipped — the hero text). */
+  .capture { transform: none; min-width: 0; }
   .proto-grid, .qs-steps { grid-template-columns: 1fr; }
   .agent-grid { grid-template-columns: 1fr; }
+  /* Same fix for the protocol cards: the nowrap .proto-snippet was inflating
+     the card's min-content and pushing card text off-screen. Let the card
+     shrink so the snippet scrolls inside it (it already has overflow-x: auto). */
+  .proto-card { min-width: 0; }
+  /* Break long inline identifiers/paths so they wrap instead of overflowing. */
+  .qs-step code, .agent-points code, .noop-note code { overflow-wrap: anywhere; }
 }