fix(docs): show landing screenshots at native aspect ratio

Remove object-fit cropping that squashed Mac/iPhone shots, pair each
section with matching copy, and re-export clearer iPhone assets.

docs/index.html

@@ -303,9 +303,7 @@
     .hero-stage-frame img {
       width: 100%;
       height: auto;
-      aspect-ratio: 16 / 10;
+      display: block;
-      object-fit: cover;
-      object-position: top center;
     }
     .sonic-ring {
       position: absolute;
@@ -403,21 +401,36 @@
     }
 
     /* —— Story rows —— */
+    /* Never force aspect-ratio + object-fit:cover on product shots — that crops/squashes. */
     .story {
       display: grid;
-      grid-template-columns: 1fr 1.15fr;
+      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
-      gap: 3rem;
+      gap: clamp(1.5rem, 4vw, 3rem);
       align-items: center;
-      padding: 2.5rem 0;
+      padding: 2.75rem 0;
     }
-    .story.reverse { direction: rtl; }
+    .story.story--phone {
-    .story.reverse > * { direction: ltr; }
+      grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
+    }
+    .story.story--media-first {
+      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
+    }
+    .story.story--media-first.story--phone {
+      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+    }
+    .story.story--media-first .story-copy { order: 2; }
+    .story.story--media-first .story-media { order: 1; }
     @media (max-width: 860px) {
-      .story, .story.reverse {
+      .story,
+      .story.story--phone,
+      .story.story--media-first,
+      .story.story--media-first.story--phone {
         grid-template-columns: 1fr;
-        gap: 1.5rem;
+        gap: 1.35rem;
-        direction: ltr;
       }
+      .story.story--media-first .story-copy,
+      .story.story--media-first .story-media { order: initial; }
+      .story .story-media { order: -1; }
     }
     .story-copy .kicker {
       display: inline-flex;
@@ -440,53 +453,76 @@
       color: var(--text-2);
       font-size: 1.02rem;
     }
-    .story-media {
+    .shot {
-      border-radius: 16px;
+      margin: 0;
-      overflow: hidden;
-      border: 1px solid var(--line);
-      background: var(--bg-soft);
-      box-shadow: var(--shadow);
-    }
-    .story-media img {
-      width: 100%;
-      aspect-ratio: 16 / 10;
-      object-fit: cover;
-      object-position: top center;
-    }
-    .story-media.phone-media {
-      max-width: 280px;
-      margin-inline: auto;
-      border-radius: 28px;
-      aspect-ratio: auto;
-    }
-    .story-media.phone-media img {
-      aspect-ratio: 9 / 19.5;
-      object-fit: cover;
-    }
-
-    /* —— Device strip —— */
-    .device-strip {
-      display: grid;
-      grid-template-columns: 1.1fr 0.7fr 0.7fr;
-      gap: 1.1rem;
-      align-items: end;
-    }
-    @media (max-width: 800px) {
-      .device-strip { grid-template-columns: 1fr; }
-    }
-    .device-card {
       border-radius: 16px;
       overflow: hidden;
       border: 1px solid var(--line);
       background: var(--bg-elevated);
       box-shadow: var(--shadow);
+      line-height: 0;
     }
-    .device-card img { width: 100%; }
+    .shot img {
-    .device-card.phone {
+      width: 100%;
-      max-width: 260px;
+      height: auto;
+      display: block;
+    }
+    .shot--phone {
+      border-radius: 28px;
+      max-width: 300px;
+      width: 100%;
       margin-inline: auto;
+    }
+
+    /* —— Device strip —— */
+    .device-strip {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-end;
+      justify-content: center;
+      gap: 1.5rem 1.75rem;
+    }
+    .device-card {
+      margin: 0;
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      background: var(--bg-elevated);
+      box-shadow: var(--shadow);
+      line-height: 0;
+    }
+    .device-card img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    .device-card.mac {
+      flex: 1 1 520px;
+      max-width: 720px;
+    }
+    .device-card.phone {
+      flex: 0 0 auto;
+      width: min(260px, 46vw);
       border-radius: 26px;
     }
+    .device-caption {
+      margin-top: 0.65rem;
+      font-size: 0.8rem;
+      font-weight: 600;
+      color: var(--text-3);
+      text-align: center;
+      line-height: 1.3;
+    }
+    .device-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .device-item.mac {
+      flex: 1 1 520px;
+      max-width: 720px;
+    }
+    .device-item.mac .device-card { width: 100%; }
 
     /* —— Compare —— */
     .compare {
@@ -692,7 +728,7 @@
           <div class="sonic-ring" aria-hidden="true"></div>
           <div class="sonic-ring" aria-hidden="true"></div>
           <div class="hero-stage-frame">
-            <img src="assets/screenshots/mac-dashboard.png" width="1440" height="900" alt="OSGKeyboard Mac dashboard" loading="eager">
+              <img src="assets/screenshots/mac-dashboard.png" width="1440" height="900" alt="OSGKeyboard Mac dashboard" loading="eager">
           </div>
         </div>
       </div>
@@ -749,25 +785,29 @@
               <span class="material-symbols-outlined" aria-hidden="true">laptop_mac</span>
               <span data-i18n="story.mac.k">macOS</span>
             </div>
-            <h3 data-i18n="story.mac.t">按住 Option，全局听写</h3>
+            <h3 data-i18n="story.mac.t">首页听写，边说边落字</h3>
-            <p data-i18n="story.mac.b">菜单栏常驻，底部浮层实时反馈。本地 ASR 就绪时，文字直接落在当前光标处。</p>
+            <p data-i18n="story.mac.b">红色录音态实时显示转写。本地 ASR 就绪时，文字出现在听写区，也可插入前台 App 光标处。</p>
           </div>
           <div class="story-media">
-            <img src="assets/screenshots/mac-recording.png" width="1440" height="900" alt="Mac recording" loading="lazy">
+            <figure class="shot">
+              <img src="assets/screenshots/mac-recording.png" width="1440" height="900" alt="Mac dictation recording" loading="lazy">
+            </figure>
           </div>
         </div>
 
-        <div class="story reverse reveal">
+        <div class="story story--phone story--media-first reveal">
           <div class="story-copy">
             <div class="kicker">
               <span class="material-symbols-outlined" aria-hidden="true">smartphone</span>
-              <span data-i18n="story.ios.k">iPhone / iPad</span>
+              <span data-i18n="story.ios.k">iPhone</span>
             </div>
-            <h3 data-i18n="story.ios.t">任意 App 里的自定义键盘</h3>
+            <h3 data-i18n="story.ios.t">自定义键盘：绿就绪，红录音</h3>
-            <p data-i18n="story.ios.b">点按麦克风说话。绿色就绪、红色录音，状态一目了然 — 不用离开正在写的东西。</p>
+            <p data-i18n="story.ios.b">主 App 可试键盘；系统设置添加后，任意 App 切换到 OSGKeyboard 即可听写。「本地」标识默认不上云。</p>
           </div>
-          <div class="story-media phone-media">
+          <div class="story-media">
-            <img src="assets/screenshots/iphone-keyboard_recording.png" width="720" height="1560" alt="iPhone keyboard recording" loading="lazy">
+            <figure class="shot shot--phone">
+              <img src="assets/screenshots/iphone-keyboard_recording.png" width="552" height="1200" alt="iPhone keyboard recording" loading="lazy">
+            </figure>
           </div>
         </div>
 
@@ -775,27 +815,31 @@
           <div class="story-copy">
             <div class="kicker">
               <span class="material-symbols-outlined" aria-hidden="true">menu_book</span>
-              <span data-i18n="story.dict.k">Personal dictionary</span>
+              <span data-i18n="story.dict.k">个性词库</span>
             </div>
             <h3 data-i18n="story.dict.t">个性词库，让识别更懂你</h3>
-            <p data-i18n="story.dict.b">人名、产品名、专业术语原样保留。AI 润色时不会被「改坏」，并可跨设备同步。</p>
+            <p data-i18n="story.dict.b">人名、产品名、专业术语按类整理。AI 润色时原样保留，避免被「改坏」。</p>
           </div>
           <div class="story-media">
-            <img src="assets/screenshots/mac-dictionary.png" width="1440" height="900" alt="Dictionary" loading="lazy">
+            <figure class="shot">
+              <img src="assets/screenshots/mac-dictionary.png" width="1440" height="900" alt="Mac personal dictionary" loading="lazy">
+            </figure>
           </div>
         </div>
 
-        <div class="story reverse reveal">
+        <div class="story story--media-first reveal">
           <div class="story-copy">
             <div class="kicker">
-              <span class="material-symbols-outlined" aria-hidden="true">tune</span>
+              <span class="material-symbols-outlined" aria-hidden="true">shield_lock</span>
-              <span data-i18n="story.settings.k">BYOK &amp; engines</span>
+              <span data-i18n="story.settings.k">隐私 · 本地引擎</span>
             </div>
-            <h3 data-i18n="story.settings.t">引擎与 Key，都由你决定</h3>
+            <h3 data-i18n="story.settings.t">默认本地识别，高隐私低延迟</h3>
-            <p data-i18n="story.settings.b">本地识别或云端引擎。DeepSeek、OpenAI 兼容端点 — 填入你的 Key，费用只付给你选的服务商。</p>
+            <p data-i18n="story.settings.b">设置里可选本地或云端引擎。截图中本地识别已勾选；云端与 API Key 仅在你主动配置时使用。</p>
           </div>
           <div class="story-media">
-            <img src="assets/screenshots/mac-settings.png" width="1440" height="900" alt="Settings" loading="lazy">
+            <figure class="shot">
+              <img src="assets/screenshots/mac-settings.png" width="1440" height="900" alt="Mac settings local ASR" loading="lazy">
+            </figure>
           </div>
         </div>
       </div>
@@ -805,18 +849,27 @@
     <section class="block" style="padding-top: 0;">
       <div class="wrap">
         <div class="block-head reveal">
-          <h2 data-i18n="gallery.title">同一套产品语言</h2>
+          <h2 data-i18n="gallery.title">跨端同一套体验</h2>
-          <p data-i18n="gallery.subtitle">桌面听写、手机键盘、统计与历史 — 一条体验线。</p>
+          <p data-i18n="gallery.subtitle">Mac 历史归档，iPhone 用量与键盘 — 完整窗口，不做裁切。</p>
         </div>
         <div class="device-strip reveal">
-          <div class="device-card">
+          <div class="device-item mac">
-            <img src="assets/screenshots/mac-history.png" width="1440" height="900" alt="Mac history" loading="lazy">
+            <figure class="device-card mac">
+              <img src="assets/screenshots/mac-history.png" width="1440" height="900" alt="Mac history" loading="lazy">
+            </figure>
+            <div class="device-caption" data-i18n="gallery.cap.mac">Mac · 听写历史</div>
           </div>
-          <div class="device-card phone">
+          <div class="device-item">
-            <img src="assets/screenshots/iphone-home.png" width="720" height="1560" alt="iPhone home" loading="lazy">
+            <figure class="device-card phone">
+              <img src="assets/screenshots/iphone-home.png" width="552" height="1200" alt="iPhone home" loading="lazy">
+            </figure>
+            <div class="device-caption" data-i18n="gallery.cap.home">iPhone · 首页统计</div>
           </div>
-          <div class="device-card phone">
+          <div class="device-item">
-            <img src="assets/screenshots/iphone-keyboard_idle.png" width="720" height="1560" alt="iPhone keyboard idle" loading="lazy">
+            <figure class="device-card phone">
+              <img src="assets/screenshots/iphone-keyboard_idle.png" width="552" height="1200" alt="iPhone keyboard idle" loading="lazy">
+            </figure>
+            <div class="device-caption" data-i18n="gallery.cap.kb">iPhone · 键盘待机</div>
           </div>
         </div>
       </div>
@@ -946,19 +999,22 @@
         "product.title": "After you speak, you stay in control",
         "product.subtitle": "From keyboard to desktop — real product UI.",
         "story.mac.k": "macOS",
-        "story.mac.t": "Hold Option. Dictate anywhere.",
+        "story.mac.t": "Dictate on the home screen — live transcript",
-        "story.mac.b": "Menu-bar app with a live overlay. Local ASR ready — polished text lands at your cursor.",
+        "story.mac.b": "Red recording state streams text into the dictation area. With local ASR ready, insert at the frontmost app cursor when you choose.",
-        "story.ios.k": "iPhone / iPad",
+        "story.ios.k": "iPhone",
-        "story.ios.t": "A custom keyboard in every app",
+        "story.ios.t": "Custom keyboard: green ready, red recording",
-        "story.ios.b": "Tap the mic. Green ready, red recording — stay in whatever you were writing.",
+        "story.ios.b": "Try it in the main app; after adding the keyboard in Settings, switch to OSGKeyboard in any app. The Local chip means audio stays on-device by default.",
         "story.dict.k": "Personal dictionary",
         "story.dict.t": "Terms the AI must never rewrite",
-        "story.dict.b": "Names, products, jargon stay verbatim — and can sync across devices.",
+        "story.dict.b": "Names, products, and jargon — grouped and preserved verbatim during polish.",
-        "story.settings.k": "BYOK & engines",
+        "story.settings.k": "Privacy · local engine",
-        "story.settings.t": "You choose the engine and the key",
+        "story.settings.t": "Local recognition by default",
-        "story.settings.b": "Local or cloud ASR. DeepSeek / OpenAI-compatible endpoints — you pay only your provider.",
+        "story.settings.b": "Choose local or cloud in Settings. This shot shows local ASR selected; cloud engines and API keys only when you opt in.",
-        "gallery.title": "One product language",
+        "gallery.title": "One experience across devices",
-        "gallery.subtitle": "Desktop dictation, mobile keyboard, stats and history — one line.",
+        "gallery.subtitle": "Mac history, iPhone stats and keyboard — full frames, never cropped.",
+        "gallery.cap.mac": "Mac · History",
+        "gallery.cap.home": "iPhone · Home stats",
+        "gallery.cap.kb": "iPhone · Keyboard idle",
         "compare.title": "Why BYOK matters",
         "compare.subtitle": "Many tools fold AI usage into a subscription. If you already have a key, you shouldn't pay again.",
         "compare.1.t": "No double billing",
@@ -1011,19 +1067,22 @@
         "product.title": "开口之后，全链路都在你掌控",
         "product.subtitle": "从键盘到桌面，从词库到设置 — 真实产品界面。",
         "story.mac.k": "macOS",
-        "story.mac.t": "按住 Option，全局听写",
+        "story.mac.t": "首页听写，边说边落字",
-        "story.mac.b": "菜单栏常驻，底部浮层实时反馈。本地 ASR 就绪时，文字直接落在当前光标处。",
+        "story.mac.b": "红色录音态实时显示转写。本地 ASR 就绪时，文字出现在听写区，也可插入前台 App 光标处。",
-        "story.ios.k": "iPhone / iPad",
+        "story.ios.k": "iPhone",
-        "story.ios.t": "任意 App 里的自定义键盘",
+        "story.ios.t": "自定义键盘：绿就绪，红录音",
-        "story.ios.b": "点按麦克风说话。绿色就绪、红色录音，状态一目了然 — 不用离开正在写的东西。",
+        "story.ios.b": "主 App 可试键盘；系统设置添加后，任意 App 切换到 OSGKeyboard 即可听写。「本地」标识默认不上云。",
         "story.dict.k": "个性词库",
         "story.dict.t": "个性词库，让识别更懂你",
-        "story.dict.b": "人名、产品名、专业术语原样保留。AI 润色时不会被「改坏」，并可跨设备同步。",
+        "story.dict.b": "人名、产品名、专业术语按类整理。AI 润色时原样保留，避免被「改坏」。",
-        "story.settings.k": "BYOK & 引擎",
+        "story.settings.k": "隐私 · 本地引擎",
-        "story.settings.t": "引擎与 Key，都由你决定",
+        "story.settings.t": "默认本地识别，高隐私低延迟",
-        "story.settings.b": "本地识别或云端引擎。DeepSeek、OpenAI 兼容端点 — 填入你的 Key，费用只付给你选的服务商。",
+        "story.settings.b": "设置里可选本地或云端引擎。截图中本地识别已勾选；云端与 API Key 仅在你主动配置时使用。",
-        "gallery.title": "同一套产品语言",
+        "gallery.title": "跨端同一套体验",
-        "gallery.subtitle": "桌面听写、手机键盘、统计与历史 — 一条体验线。",
+        "gallery.subtitle": "Mac 历史归档，iPhone 用量与键盘 — 完整窗口，不做裁切。",
+        "gallery.cap.mac": "Mac · 听写历史",
+        "gallery.cap.home": "iPhone · 首页统计",
+        "gallery.cap.kb": "iPhone · 键盘待机",
         "compare.title": "为什么选 BYOK",
         "compare.subtitle": "很多工具把 AI 用量包进订阅。你已经有 Key 时，不该再付一遍。",
         "compare.1.t": "避免重复消费",