Add hosted MCP connection docs and photorealistic stapler hero

- Add how-to/hosted-mcp.mdx with connection instructions for:
  - Claude Code quick connect
  - MCP Settings JSON config
  - Python SDK example
  - Self-hosting with Docker
- Add swingline-hero.png (photorealistic red Swingline)
- Add red-swingline.svg for alternate use
- Update hero image to use photorealistic stapler
- Add "Connect to Hosted Server" to sidebar with "New" badge

src/assets/red-swingline.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40" fill="none">
+  <!-- Stapler base/anvil -->
+  <path d="M8 32 L72 32 L72 36 C72 38 70 40 68 40 L12 40 C10 40 8 38 8 36 Z" fill="#1e293b"/>
+
+  <!-- Base plate (metal part) -->
+  <rect x="12" y="30" width="56" height="4" rx="1" fill="#64748b"/>
+
+  <!-- Main body (red top) -->
+  <path d="M10 18 L70 18 L72 28 L70 30 L10 30 L8 28 Z" fill="#dc2626"/>
+
+  <!-- Body highlight -->
+  <path d="M10 18 L70 18 L71 23 L10 23 Z" fill="#ef4444"/>
+
+  <!-- Body shadow line -->
+  <line x1="10" y1="26" x2="70" y2="26" stroke="#b91c1c" stroke-width="1"/>
+
+  <!-- Swingline logo area (recessed) -->
+  <rect x="24" y="20" width="32" height="6" rx="1" fill="#b91c1c"/>
+  <text x="40" y="25" font-family="Arial, sans-serif" font-size="5" font-weight="bold" fill="#fca5a5" text-anchor="middle">SWINGLINE</text>
+
+  <!-- Staple loading slot -->
+  <rect x="14" y="19" width="6" height="3" rx="0.5" fill="#991b1b"/>
+
+  <!-- Push lever (back) -->
+  <path d="M66 12 C68 12 70 14 70 16 L70 18 L66 18 L66 14 C66 13 66 12 66 12" fill="#dc2626"/>
+  <path d="M66 12 C68 12 70 14 70 16 L70 17 L66 17 L66 14" fill="#ef4444"/>
+
+  <!-- Hinge pin -->
+  <circle cx="12" cy="20" r="2" fill="#475569"/>
+  <circle cx="12" cy="20" r="1" fill="#64748b"/>
+
+  <!-- Front nose -->
+  <path d="M70 22 L76 26 L76 30 L70 30 Z" fill="#dc2626"/>
+  <path d="M70 22 L76 26 L76 27 L70 23 Z" fill="#ef4444"/>
+
+  <!-- Staple exit slot -->
+  <rect x="72" y="28" width="4" height="2" fill="#1e293b"/>
+</svg>