fix(mobile): nav overflow + docs Quick Setup + long API path wrapping

Three issues found in a mobile-viewport audit (390×844, iPhone 12 size):

1. .landing-nav-actions (Sign In + Get Started) was still rendering at
   ≤1024px alongside the hamburger button, pushing the row past the
   viewport and clipping "Get Started." Now hidden via the existing
   1024px media query, with the auth CTAs duplicated INSIDE the
   .landing-nav-links dropdown as styled button-pills (only visible
   when the hamburger menu is toggled open). The dropdown is now a
   complete navigation surface — marketing links + auth — with no
   visible row overflow.

2. The docs Quick Setup step 3 embedded an <OsTabs> picker whose
   .install-tabs container defaulted to display: flex / row (from
   index.css). On mobile this stacked the OS chips + curl code block
   in a single horizontal row that ran 933 px wide on a 390 px
   viewport. Forced flex-direction: column inside the existing
   ≤768px media query so the code block lands below the OS strip.
   Mirrors the same fix already shipped for the landing Quick Start
   via .install-tabs.install-tabs-landing.

3. .docs-endpoint-path rendered long URL paths like
   /api/incidents/{incident_id}/evidence/{evidence_id}/playlist.m3u8
   on a single line with no break opportunities. Added
   overflow-wrap: anywhere + word-break: break-word at all widths so
   long paths wrap gracefully in the API Reference table.

Sentinel, Pricing, and Security pages were already mobile-clean and
needed no changes (the security comparison table h-scrolls inside its
own container, which is acceptable).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Sbussiso

frontend/src/components/LandingNav.jsx

@@ -81,6 +81,28 @@ function LandingNav() {
             <li>
               <Link to="/pricing" onClick={() => setMobileMenuOpen(false)}>Pricing</Link>
             </li>
+            {/* Mobile-only auth CTAs. The desktop nav has these in
+                .landing-nav-actions (hidden via media query at ≤1024px); the
+                dropdown duplicates them so the hamburger menu is a complete
+                navigation surface on phones / narrow tablets. */}
+            <li className="landing-nav-mobile-cta">
+              <Link
+                to="/sign-in"
+                className="landing-btn-ghost"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Sign In
+              </Link>
+            </li>
+            <li className="landing-nav-mobile-cta">
+              <Link
+                to="/sign-up"
+                className="landing-btn-primary"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Get Started
+              </Link>
+            </li>
           </ul>
         </SignedOut>
 

frontend/src/styles/landing.css

@@ -1453,6 +1453,14 @@
 .docs-endpoint-path {
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   color: var(--text-primary);
+  /* Long URLs like /api/incidents/{incident_id}/evidence/{evidence_id}/playlist.m3u8
+     don't have natural break opportunities — slashes and underscores aren't
+     break points for `word-break: normal`, so the path renders on a single
+     line and overflows narrow viewports. anywhere lets the browser break
+     between any two characters when needed without sprinkling hyphens or
+     introducing wrap markers in the JSX. */
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .docs-flow-diagram {
@@ -1791,6 +1799,42 @@
     padding: 1rem;
   }
 
+  /* Hide the inline auth buttons at hamburger-breakpoint widths — at iPhone
+     widths they push the row past the viewport and clip the "Get Started"
+     CTA. The dropdown menu surfaces auth actions instead via the
+     .landing-nav-mobile-cta items appended to .landing-nav-links. */
+  .landing-nav-actions {
+    display: none;
+  }
+
+  /* Auth CTAs that live INSIDE the mobile dropdown. They are appended at
+     the bottom of .landing-nav-links and styled like proper buttons so the
+     dropdown is a complete navigation surface — marketing links + auth
+     CTAs, no separate visible row. */
+  .landing-nav-links li.landing-nav-mobile-cta {
+    padding: 0.5rem 1rem;
+  }
+  .landing-nav-links li.landing-nav-mobile-cta:first-of-type {
+    margin-top: 0.5rem;
+    border-top: 1px solid var(--border-color);
+    padding-top: 1rem;
+  }
+  .landing-nav-links li.landing-nav-mobile-cta a {
+    display: block;
+    text-align: center;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    font-weight: 600;
+  }
+  .landing-nav-links li.landing-nav-mobile-cta a.landing-btn-ghost {
+    border: 1px solid var(--border-color);
+    color: var(--text-primary);
+  }
+  .landing-nav-links li.landing-nav-mobile-cta a.landing-btn-primary {
+    background: var(--accent-green);
+    color: #0a0a0f;
+  }
+
   .landing-mobile-menu-btn {
     display: flex;
   }
@@ -1863,12 +1907,33 @@
   .docs-step {
     gap: 0.75rem;
   }
-  
+
   .docs-step-number {
     width: 1.75rem;
     height: 1.75rem;
     font-size: 0.8125rem;
   }
+
+  /* Step content can be wider than the viewport on mobile because some
+     steps embed an OS-tabs picker followed by a code block. Without this
+     min-width: 0 the inner flex child (.docs-step-content) refuses to
+     shrink below its intrinsic content width, pushing the whole row out
+     past the viewport edge. */
+  .docs-step-content {
+    min-width: 0;
+    flex: 1;
+  }
+
+  /* The docs Quick Setup wraps an <OsTabs> inside step 3. OsTabs renders
+     `.install-tabs` (display: flex, default row) with three OS chips and
+     a code block side-by-side — fits desktop, blows past mobile. Force
+     a vertical stack at narrow widths so the code block lands BELOW
+     the OS tab strip instead of overflowing to the right. Mirrors the
+     fix already in place for .install-tabs.install-tabs-landing on the
+     landing-page Quick Start. */
+  .install-tabs {
+    flex-direction: column;
+  }
 
   .docs-flow-diagram {
     padding: 1rem;