fix(demo): pin text-size-adjust on PinDemo so large system fonts don't crop the card

Chat bubbles in PinDemo / MobilePinDemo use px-based font sizes (text-[12px]
etc.) inside a fixed-height container with overflow-hidden. When a user
sets their phone's system font to "Large" or enables Chrome's Text Scaling
accessibility setting, Android Chrome (and iOS Safari in some configs)
multiplies px text sizes, which pushes bubble heights past BODY_H=340 and
the card clips the last line — visible as the demo "cutting off".

The demo is a visual illustration, not readable prose, so it's treated
like a video/screenshot: textSizeAdjust: 100% locks it to the designed
size. All other text on the page (hero, inputs, articles) still respects
accessibility font-size settings.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: zizhaof

frontend/components/MobilePinDemo.tsx

@@ -336,7 +336,16 @@ export default function MobilePinDemo() {
   return (
     <div
       className="w-full select-none"
-      style={{ maxWidth: 380 }}
+      style={{
+        maxWidth: 380,
+        // Pin text at the designed size — this demo card behaves like a
+        // video/screenshot, not readable prose. Without this, Android
+        // Chrome's Text Scaling and iOS font boost can enlarge the
+        // px-based bubble text, which then overflows the fixed-height
+        // body (340px) + overflow-hidden and crops the last line.
+        textSizeAdjust: "100%",
+        WebkitTextSizeAdjust: "100%",
+      }}
       onTouchStart={nudgeTouch}
       onPointerDown={nudgeTouch}
     >

frontend/components/PinDemo.tsx

@@ -341,7 +341,15 @@ export default function PinDemo() {
   return (
     <div
       className="w-full select-none mx-auto"
-      style={{ maxWidth: 1080 }}
+      style={{
+        maxWidth: 1080,
+        // Pin text at the designed size — this demo behaves like a
+        // video/screenshot, not readable prose. Needed so Android-tablet
+        // Chrome Text Scaling / other accessibility font inflation can't
+        // overflow the fixed-height body + overflow-hidden and crop rows.
+        textSizeAdjust: "100%",
+        WebkitTextSizeAdjust: "100%",
+      }}
       onMouseMove={nudgeHover}
       onMouseEnter={nudgeHover}
     >