fix(landing): design audit fixes — hamburger menu, dead links, branding, spacing (#117)

* fix(landing): design audit fixes — hamburger menu, dead links, branding, spacing

- Add mobile hamburger menu with animated open/close and click-outside dismiss
- Create Privacy and Terms pages (footer links were dead # anchors)
- Change "Decision Tree Platform" to "AI-Powered Troubleshooting for MSPs" on login, register, and HTML title
- Fix register page icon color (was red/coral via CSS invert, now uses BrandLogo directly)
- Replace "0 Ticket Notes Written by Hand" stat with "100% Auto-Generated Documentation"
- Increase nav link touch targets to 44px minimum
- Fix heading hierarchy: section titles are now <h2>, standardize H3 to 1.25rem
- Tighten section spacing (6rem → 4rem padding, remove extra 5rem spacer)
- Add color-scheme: dark to HTML element
- Replace all transition: all with specific properties (10 occurrences)
- Fix loading ellipsis (... → …)

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

* fix(mobile): responsive modals + landing preview overflow

- PrepareSessionModal: bottom-sheet on mobile, centered on desktop
- IntakeFormModal: bottom-sheet on mobile, responsive padding
- ShareTreeModal: bottom-sheet on mobile, full-width on small screens
- Landing preview: hide URL bar and window controls on mobile (<900px)
  to prevent 189px horizontal overflow

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

* fix(mobile): collapse search bar to icon on mobile

On mobile (<640px), the full search bar with placeholder text and ⌘K
badge was taking too much space in the topbar. Now shows just a
magnifying glass icon that opens the same command palette on tap.

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

---------

Co-authored-by: chihlasm <michael@resolutionflow.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/common/PageLoader.tsx

@@ -5,7 +5,7 @@ export function PageLoader() {
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
-        <p className="text-sm text-muted-foreground">Loading...</p>
+        <p className="text-sm text-muted-foreground">Loading&hellip;</p>
       </div>
     </div>
   )

frontend/src/components/layout/TopBar.tsx

@@ -78,10 +78,10 @@ export function TopBar() {
         {/* Spacer - push search to center */}
         <div className="flex-1" />
 
-        {/* Search trigger */}
+        {/* Search trigger — icon on mobile, full bar on desktop */}
         <button
           onClick={() => setCommandPaletteOpen(true)}
-          className="relative w-full text-left"
+          className="hidden sm:relative sm:block w-full text-left"
           style={{ maxWidth: '480px' }}
         >
           <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
@@ -92,6 +92,13 @@ export function TopBar() {
             {navigator.platform?.toLowerCase().includes('mac') ? '⌘K' : 'Ctrl+K'}
           </span>
         </button>
+        <button
+          onClick={() => setCommandPaletteOpen(true)}
+          className="sm:hidden rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
+          title="Search"
+        >
+          <Search size={18} />
+        </button>
 
         {/* Spacer - push actions to right */}
         <div className="flex-1" />

frontend/src/components/library/ShareTreeModal.tsx

@@ -112,7 +112,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
   if (!isOpen) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
       {/* Backdrop */}
       <div
         className="absolute inset-0 bg-black/80 backdrop-blur-xs"
@@ -120,7 +120,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg bg-card border border-border rounded-2xl shadow-lg">
+      <div className="relative w-full max-w-full rounded-t-2xl bg-card border border-border shadow-lg sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <h2 className="text-lg font-semibold text-foreground">Share Tree</h2>

frontend/src/components/procedural/IntakeFormModal.tsx

@@ -212,8 +212,8 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs">
-      <div className="mx-4 w-full max-w-lg rounded-2xl border border-border bg-background shadow-xl">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4 bg-black/60 backdrop-blur-xs">
+      <div className="w-full max-w-full rounded-t-2xl border border-border bg-background shadow-xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
         <div className="border-b border-border px-6 py-4">
           <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
@@ -224,7 +224,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
         {/* Form */}
         <form onSubmit={handleSubmit}>
-          <div className="max-h-[60vh] space-y-4 overflow-y-auto px-6 py-4">
+          <div className="max-h-[70vh] space-y-4 overflow-y-auto px-4 py-4 sm:max-h-[60vh] sm:px-6">
             {Array.from(groups.entries()).map(([groupName, groupFields]) => (
               <div key={groupName}>
                 {groupName && (

frontend/src/components/procedural/PrepareSessionModal.tsx

@@ -88,9 +88,9 @@ export function PrepareSessionModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
       <div className="absolute inset-0 bg-background/60 backdrop-blur-xs" onClick={onClose} />
-      <div className="relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl">
+      <div className="relative w-full max-w-full rounded-t-2xl border border-border bg-card shadow-2xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-border px-5 py-4">
           <div className="flex items-center gap-2">
@@ -106,7 +106,7 @@ export function PrepareSessionModal({
         </div>
 
         {/* Body */}
-        <div className="max-h-[60vh] overflow-y-auto p-5 space-y-5">
+        <div className="max-h-[70vh] overflow-y-auto p-4 space-y-5 sm:max-h-[60vh] sm:p-5">
           {/* Flow name */}
           <div className="rounded-lg bg-accent px-3 py-2">
             <p className="text-xs text-muted-foreground">Flow</p>