fix(website): mobile viewport fixes — overflow, touch targets, autocomplete

apps/website/src/app/global.css

@@ -11,6 +11,16 @@ body {
   font-family: var(--font-inter);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* Long unbreakable tokens (e.g. package names like @threadplane/chat,
+ * file paths like app.config.ts) live inside marketing headings and pull
+ * the layout wider than the viewport on narrow phones. Allow breaking
+ * within these tokens to prevent horizontal overflow. */
+h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 /* Scroll-triggered fade-in for server components */

apps/website/src/components/contact/ContactForm.tsx

@@ -107,6 +107,7 @@ export function ContactForm() {
         Email
         <input
           type="email"
+          autoComplete="email"
           required
           value={email}
           onChange={(e) => setEmail(e.target.value)}
@@ -117,6 +118,7 @@ export function ContactForm() {
         Name <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
         <input
           type="text"
+          autoComplete="name"
           value={name}
           onChange={(e) => setName(e.target.value)}
           style={inputStyle}
@@ -126,6 +128,7 @@ export function ContactForm() {
         Company <span style={{ color: tokens.colors.textMuted }}>(optional)</span>
         <input
           type="text"
+          autoComplete="organization"
           value={company}
           onChange={(e) => setCompany(e.target.value)}
           style={inputStyle}

apps/website/src/components/landing/Differentiator.tsx

@@ -155,7 +155,7 @@ export function Differentiator() {
                   flexWrap: 'wrap',
                 }}
               >
-                <div style={{ flex: '1 1 360px', minWidth: 0 }}>
+                <div style={{ flex: '1 1 200px', minWidth: 0 }}>
                   <span
                     style={{
                       fontFamily: tokens.typography.body.family,

apps/website/src/components/landing/WhitePaperBlock.tsx

@@ -168,6 +168,7 @@ export function WhitePaperBlock({ paper = 'overview' }: WhitePaperBlockProps = {
                 <input
                   id="wp-email"
                   type="email"
+                  autoComplete="email"
                   placeholder="you@company.com"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}

apps/website/src/components/pricing/LeadForm.tsx

@@ -220,6 +220,7 @@ export function LeadForm() {
                   <input
                     id="lf-name"
                     name="name"
+                    autoComplete="name"
                     aria-label="Name"
                     placeholder="Name"
                     required
@@ -232,6 +233,7 @@ export function LeadForm() {
                     id="lf-email"
                     name="email"
                     type="email"
+                    autoComplete="email"
                     aria-label="Work email"
                     placeholder="Work email"
                     required
@@ -243,6 +245,7 @@ export function LeadForm() {
                   <input
                     id="lf-company"
                     name="company"
+                    autoComplete="organization"
                     aria-label="Company"
                     placeholder="Company"
                     required

apps/website/src/components/shared/Footer.tsx

@@ -70,6 +70,7 @@ function NewsletterForm() {
       <input
         id="footer-email"
         type="email"
+        autoComplete="email"
         placeholder="Email address"
         value={email}
         onChange={e => setEmail(e.target.value)}

apps/website/src/components/shared/Nav.tsx

@@ -176,7 +176,15 @@ export function Nav() {
           className="lg:hidden"
           onClick={() => { setOpen(!open); if (!open) setMobileTab(isDocsPage ? 'docs' : 'site'); }}
           aria-label={open ? 'Close menu' : 'Open menu'}
-          style={{ color: tokens.colors.textPrimary }}>
+          style={{
+            color: tokens.colors.textPrimary,
+            // Expand hit area to >=44x44 without shifting visual layout.
+            padding: 12,
+            margin: -12,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
           {open ? <CloseIcon /> : <MenuIcon />}
         </button>
       </div>