docs: rebuild README previews from 2x captures

Rework the product preview section around three real screens captured at
deviceScaleFactor 2 instead of the previous 900 px shots taken at a 75%
browser zoom, which read as blurry.

- capture the conversation workspace, the agent customization page and the
  visitor widget, then crop each one to a consistent frame
- drop the tight 480 px widget crop and its leftover gray strip
- restructure the preview section with one lead line and a caption per shot,
  and fold the local start-up steps into a shorter quick start
- keep the browser overlay out of the captures and note the method in the
  asset manifest
- finish the visible ReplyPier rename (sidebar wordmark, widget footer,
  page title, login screen, demo page) so screenshots and UI agree

frontend/index.html

@@ -35,12 +35,12 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="apple-mobile-web-app-title" content="ChatterMate">
+  <meta name="apple-mobile-web-app-title" content="ReplyPier">
   <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@500;600;700&display=swap">
-  <title>ChatterMate · 智能客服工作台</title>
+  <title>ReplyPier · 智能客服工作台</title>
   <meta name="shopify-api-key" content="<%= VITE_SHOPIFY_API_KEY %>" />
   <!-- Shopify App Bridge, and the Polaris web components the Shopify views use.
        Only loaded inside the Shopify admin (host/shop query params present);