Add hosted server connector guide and improve OG cards

- New connectors page with setup steps for Claude.ai, ChatGPT,
  Claude Desktop, Claude Code, and generic MCP clients
- OG cards: gradient bg, left-accent border, larger title/logo,
  visible description text
- Splash page: hosted server section with quick-connect cards
- Quickstart: aside linking to no-install hosted option

docs/src/content/docs/getting-started/connectors.mdx

@@ -0,0 +1,144 @@
+---
+title: Connect to the Hosted Server
+description: Use mcnoaa-tides from Claude.ai, ChatGPT, Claude Desktop, or any MCP client — no install needed
+sidebar:
+  order: 3
+---
+
+import { Aside, Steps, TabItem, Tabs } from '@astrojs/starlight/components';
+
+A public instance of mcnoaa-tides runs at:
+
+```
+https://mcp.mcnoaa-tides.warehack.ing/
+```
+
+No API keys, no authentication, no local install. Connect from your browser
+and start asking about tides.
+
+<Aside type="tip">
+  Want lower latency or offline access? Install locally with `uvx mcnoaa-tides`
+  — see the [Quickstart](/getting-started/quickstart/) for setup.
+</Aside>
+
+---
+
+## Claude.ai
+
+Available on **Pro**, **Max**, **Team**, and **Enterprise** plans.
+
+<Steps>
+
+1. Open [claude.ai](https://claude.ai) and go to **Settings**
+
+2. Select **Connectors** in the sidebar
+
+3. Click **Add custom connector**
+
+4. Paste the server URL:
+
+   ```
+   https://mcp.mcnoaa-tides.warehack.ing/
+   ```
+
+5. No authentication needed — leave auth fields empty and save
+
+</Steps>
+
+Once connected, ask Claude something like *"When's the next high tide in
+Seattle?"* and it will call the server directly.
+
+Works on Claude iOS and Android too, once configured through the web interface.
+
+---
+
+## ChatGPT
+
+Available on **Plus**, **Team**, **Enterprise**, and **Edu** plans.
+
+<Steps>
+
+1. Open [chatgpt.com](https://chatgpt.com) and go to **Settings**
+
+2. Under **Advanced**, enable **Developer Mode**
+
+3. Go to **Settings → Connectors**
+
+4. Click **Create** and fill in:
+   - **Name:** NOAA Tides
+   - **URL:** `https://mcp.mcnoaa-tides.warehack.ing/`
+
+5. No OAuth needed — save without configuring auth
+
+</Steps>
+
+Once added, ChatGPT can call the server's tools in any conversation. Works
+across web, desktop, and mobile.
+
+---
+
+## Claude Desktop
+
+Add the server URL to your Claude Desktop config file:
+
+<Tabs>
+  <TabItem label="macOS">
+    Edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
+  </TabItem>
+  <TabItem label="Windows">
+    Edit `%APPDATA%\Claude\claude_desktop_config.json`:
+  </TabItem>
+  <TabItem label="Linux">
+    Edit `~/.config/Claude/claude_desktop_config.json`:
+  </TabItem>
+</Tabs>
+
+```json
+{
+  "mcpServers": {
+    "mcnoaa-tides": {
+      "url": "https://mcp.mcnoaa-tides.warehack.ing/"
+    }
+  }
+}
+```
+
+Restart Claude Desktop. The server's 14 tools, 4 prompts, and 3 resources
+will be available immediately.
+
+---
+
+## Claude Code
+
+Register the remote server with a single command:
+
+```bash
+claude mcp add mcnoaa-tides --transport http https://mcp.mcnoaa-tides.warehack.ing/
+```
+
+That's it. Claude Code connects on the next session.
+
+---
+
+## Any MCP Client
+
+If your client supports MCP's Streamable HTTP transport, point it at:
+
+| Field | Value |
+|-------|-------|
+| **Endpoint** | `https://mcp.mcnoaa-tides.warehack.ing/` |
+| **Transport** | Streamable HTTP |
+| **Auth** | None required |
+| **Capabilities** | 14 tools, 4 prompts, 3 resources |
+
+Most clients accept a JSON config — the minimal block looks like:
+
+```json
+{
+  "mcpServers": {
+    "mcnoaa-tides": {
+      "url": "https://mcp.mcnoaa-tides.warehack.ing/"
+    }
+  }
+}
+```

docs/src/content/docs/getting-started/quickstart.mdx

@@ -5,12 +5,18 @@ sidebar:
   order: 2
 ---
 
-import { Steps } from '@astrojs/starlight/components';
+import { Aside, Steps } from '@astrojs/starlight/components';
 
 This guide walks through adding **mcnoaa-tides** to Claude Code and making
 your first three requests: finding a station, pulling tide predictions, and
 checking marine conditions.
 
+<Aside>
+  **Don't want to install anything?** Connect to the hosted server directly from
+  [Claude.ai, ChatGPT, or Claude Desktop](/getting-started/connectors/) — no
+  local setup needed.
+</Aside>
+
 ### Prerequisites
 
 - [Claude Code](https://docs.anthropic.com/en/docs/claude-code) installed

docs/src/content/docs/index.mdx

@@ -1,5 +1,6 @@
 ---
 title: mcnoaa-tides
+description: Tides, weather, and conditions from 300 U.S. coastal stations
 template: splash
 hero:
   tagline: Tides, weather, and conditions from 300 U.S. coastal stations
@@ -227,3 +228,32 @@ Then register it with your MCP client. Most accept a JSON config:
 />
 
 </div>
+
+<div class="splash-section">
+
+## Try the hosted server
+
+A public instance runs at `https://mcp.mcnoaa-tides.warehack.ing/` —
+no install needed. Connect from your browser.
+
+<CardGrid>
+  <Card title="Claude.ai" icon="laptop">
+    **Settings → Connectors → Add custom connector** — paste the URL and save.
+    No auth needed.
+
+    Available on Pro, Max, Team, and Enterprise plans.
+  </Card>
+  <Card title="ChatGPT" icon="setting">
+    **Settings → Developer Mode → Connectors → Create** — name it "NOAA Tides",
+    paste the URL, save.
+
+    Available on Plus, Team, Enterprise, and Edu plans.
+  </Card>
+</CardGrid>
+
+<LinkCard
+  title="Full setup guide for all clients"
+  href="/getting-started/connectors/"
+/>
+
+</div>

docs/src/pages/og/[...slug].ts

@@ -12,19 +12,19 @@ export const { getStaticPaths, GET } = await OGImageRoute({
   getImageOptions: (_id, page: (typeof pages)[number]) => ({
     title: page.data.title,
     description: page.data.description,
-    bgGradient: [[10, 21, 23]],
+    bgGradient: [[10, 21, 23], [13, 30, 35]],
-    border: { color: [26, 138, 143], width: 20 },
+    border: { color: [26, 138, 143], width: 16, side: "inline-start" },
-    padding: 120,
+    padding: 80,
     font: {
       title: {
-        size: 64,
+        size: 72,
         weight: "Bold",
         color: [232, 240, 240],
         families: ["Inter"],
       },
       description: {
-        size: 28,
+        size: 30,
-        color: [196, 212, 214],
+        color: [143, 168, 172],
         families: ["Inter"],
       },
     },
@@ -34,7 +34,7 @@ export const { getStaticPaths, GET } = await OGImageRoute({
     ],
     logo: {
       path: "./public/favicon.svg",
-      size: [60],
+      size: [80],
     },
   }),
 });