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

astro.config.mjs

@@ -57,6 +57,7 @@ export default defineConfig({
 					label: 'How-To Guides',
 					badge: { text: 'Solve', variant: 'note' },
 					items: [
+						{ label: 'Connect to Hosted Server', slug: 'how-to/hosted-mcp', badge: { text: 'New', variant: 'success' } },
 						{ label: 'Extract Tables from Word', slug: 'how-to/extract-tables' },
 						{ label: 'Analyze Excel Data', slug: 'how-to/analyze-excel' },
 						{ label: 'Convert to Markdown', slug: 'how-to/convert-markdown' },