docs: fix mobile layout — kill horizontal scroll, equal-width cards

- overflow-x hidden on html (iOS ignores body-only), max-width on glow layers
- min-width: 0 on grid cards so wide pre/mono content can't stretch tracks
- filetree/code blocks scroll internally; smaller mono sizes at <=640px
- headings wrap naturally on mobile (br hidden, spacing preserved)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docs/index.html

@@ -66,7 +66,7 @@
         <span class="pill-dot"></span> Now in Obsidian Community Plugins
         <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
       </a>
-      <h1 class="reveal d1">Turn your vault into an<br /><span class="grad">AI command center</span></h1>
+      <h1 class="reveal d1">Turn your vault into an <br /><span class="grad">AI command center</span></h1>
       <p class="hero-sub reveal d2">
         Agent Fleet is an Obsidian plugin for building and running autonomous AI agents —
         on Claude&nbsp;Code or OpenAI&nbsp;Codex. Schedule tasks, chat in real time, connect
@@ -223,7 +223,7 @@
   <section class="section" id="backends">
     <div class="container">
       <p class="kicker reveal">Backends</p>
-      <h2 class="reveal">Runs on the subscriptions<br />you already pay for</h2>
+      <h2 class="reveal">Runs on the subscriptions <br />you already pay for</h2>
       <p class="section-sub reveal">
         No separate API bill required. Each agent picks its engine — mix freely in the same fleet.
         Chat, tasks, heartbeat, channels, and memory work identically on both.
@@ -405,7 +405,7 @@
     <div class="container split">
       <div class="split-text">
         <p class="kicker reveal">Philosophy</p>
-        <h2 class="reveal">If the plugin disappears,<br />your knowledge stays</h2>
+        <h2 class="reveal">If the plugin disappears, <br />your knowledge stays</h2>
         <p class="section-sub left reveal">
           Every agent, skill, task, run log, and memory is a plain markdown file in your vault.
           Searchable, diffable, version-controllable — fully yours.
@@ -498,7 +498,7 @@
   <section class="section cta-section">
     <div class="cta-glow" aria-hidden="true"></div>
     <div class="container center">
-      <h2 class="reveal">Your vault is about to<br />get a lot more done</h2>
+      <h2 class="reveal">Your vault is about to <br />get a lot more done</h2>
       <div class="hero-ctas reveal d1">
         <button class="install-cmd" id="copy-cmd-2" title="Copy to clipboard">
           <span class="mono"><span class="dim">$</span> npm install -g obsidian-agent-fleet</span>

docs/styles.css

@@ -22,7 +22,7 @@
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
-html { scroll-behavior: smooth; }
+html { scroll-behavior: smooth; overflow-x: hidden; }
 
 body {
   background: var(--bg);
@@ -210,6 +210,7 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   left: 50%;
   transform: translateX(-50%);
   width: 1100px;
+  max-width: 100%;
   height: 700px;
   background:
     radial-gradient(ellipse 50% 45% at 50% 40%, rgba(124, 92, 246, 0.16), transparent 70%),
@@ -338,7 +339,7 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
 }
 .card:hover { border-color: var(--border-strong); }
 
-.backend-card { padding: 28px; }
+.backend-card { padding: 28px; min-width: 0; }
 .backend-card p { color: var(--text-2); font-size: 0.95rem; }
 .backend-card strong { color: var(--text); font-weight: 600; }
 
@@ -393,6 +394,7 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   display: flex;
   flex-direction: column;
   gap: 8px;
+  min-width: 0;
 }
 .bento-card.span-2 { grid-column: span 2; }
 .bento-card p { color: var(--text-2); font-size: 0.92rem; line-height: 1.55; }
@@ -417,6 +419,8 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   line-height: 1.75;
   color: var(--text-2);
   text-align: left;
+  max-width: 100%;
+  overflow-x: auto;
 }
 .filetree.big { font-size: 0.85rem; line-height: 2; padding: 28px 32px; }
 .ft-hl { color: #c4b5fd; }
@@ -543,7 +547,8 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 12px;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   border: 1px solid rgba(167, 139, 250, 0.3);
   background: rgba(167, 139, 250, 0.07);
   border-radius: 8px;
@@ -677,6 +682,8 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   border: 1px solid rgba(74, 222, 128, 0.3);
 }
 
+.split-text, .split-visual { min-width: 0; }
+
 .split-visual .filetree.big {
   display: block;
   background: var(--bg-card);
@@ -695,7 +702,7 @@ h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
   text-align: left;
 }
 
-.step { padding: 26px; }
+.step { padding: 26px; min-width: 0; }
 .step-num {
   font-size: 0.75rem;
   color: var(--accent);
@@ -777,6 +784,7 @@ details p {
   left: 50%;
   transform: translateX(-50%);
   width: 900px;
+  max-width: 100%;
   height: 500px;
   background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(124, 92, 246, 0.14), transparent 70%);
   pointer-events: none;
@@ -836,10 +844,14 @@ details p {
 
 @media (max-width: 640px) {
   .hero { padding-top: 130px; }
+  h1 br, h2 br { display: none; }
   .bento { grid-template-columns: 1fr; }
   .bento-card.span-2 { grid-column: span 1; }
   .backend-grid { grid-template-columns: 1fr; }
+  .filetree { font-size: 0.68rem; }
   .filetree.big { font-size: 0.7rem; padding: 20px; }
-  .install-cmd { font-size: 0.78rem; }
+  .bento-visual { padding: 14px; }
+  .install-cmd { font-size: 0.78rem; max-width: 100%; overflow-x: auto; }
+  .code { font-size: 0.7rem; }
   .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
 }