diff --git a/.impeccable.md b/.impeccable.md
index 5b5813d6..b3ce9531 100644
--- a/.impeccable.md
+++ b/.impeccable.md
@@ -34,7 +34,7 @@
 
 **Theme:** Dark mode primary (charcoal palette). Light mode planned but not yet implemented.
 
-**Accent:** Ember orange (#f97316) — conveys urgency fitting a troubleshooting context. Used sparingly (max 5% of UI). Warning uses yellow (#eab308), not amber, to stay distinct.
+**Accent:** Electric blue (#60a5fa dark / #2563eb light) — conveys trust, precision, and reliability fitting a troubleshooting tool MSP engineers depend on during outages. Used sparingly (max 5% of UI). Warning uses amber (#fbbf24), info uses cyan (#67e8f9).
 
 **Hard rules:** No glassmorphism, no gradient surfaces, no ambient orbs, no backdrop blur, no decorative shadows at rest. Elevation = lighter surface + border, not shadow.
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05fde67b..cf59720d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,26 @@ All notable changes to ResolutionFlow are documented here.
 
 ---
 
+## [0.11.0] - 2026-03-30
+
+### Changed
+- **Landing page redesign** — replaced AI-template layout with bold hero, live chat animation, scroll-driven reveals, and FAQ section; self-contained `--lp-*` palette; electric blue accent throughout
+- **Dashboard design critique** — eliminated section redundancy, differentiated card types across PerformanceCards, KnowledgeBaseCards, and TeamSummary; reduced visual noise
+- **Session History** — redesigned as tabbed view (AI Sessions / Flow Sessions) with Load More pagination and domain filter chips; AI sessions now support lazy-loaded flow sessions with URL param routing to correct tab
+- **Escalation Queue** — improved urgency signaling with time-based styling
+- **Assistant page** — TaskLane UX improvements (confirmed-delete, restorable skipped tasks, progress counter); ChatSidebar delete confirmation flow fixed (no accidental chat switch while confirming)
+- **Script Library/Builder** — design critique fixes; suggestion chips now correctly respect disabled state during generation
+- **Create Flow dropdown** — simplified to two options (Troubleshooting / Procedural); removed AI generate flow and maintenance flow per pilot scope
+- **Tag badges and buttons** — fixed unreadable text caused by `bg-accent` with dark foreground; tags now use elevated background with border
+
+### Fixed
+- Restored removed icon imports in MyTreesPage; added default export to SessionHistoryPage
+- Fixed ternary closing brackets in KnowledgeBaseCards and TeamSummary
+- Fixed `loadMoreAiSessions` race condition — stale pages from prior filter queries no longer mix with fresh results
+- Fixed `--lp-btn` using `var(--color-accent)` in `landing.css` (violates lesson 104); now hardcoded to `#60a5fa`
+
+---
+
 ## [0.10.0] - 2026-03-21
 
 ### Added
diff --git a/CLAUDE.md b/CLAUDE.md
index 25af73c8..78ab6de5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -369,6 +369,10 @@ gh run view <id> --json jobs --jq '.jobs[] | {name: .name, conclusion: .conclusi
 
 **103. Docker not available in code-server container:** The dev environment runs code-server inside Docker on the VPS. The `docker` CLI is not available inside the code-server container. To query the database, use the VPS SSH session: `docker exec resolutionflow_postgres psql -U postgres -d resolutionflow -t -c "SQL"`. Python is also not available in the container.
 
+**104. `landing.css` uses self-contained `--lp-*` color variables:** The landing page defines its own color palette at the top of `landing.css` (`--lp-bg`, `--lp-accent`, `--lp-text-*`, etc.). Never use `var(--color-*)` theme tokens in `landing.css` — they may resolve incorrectly outside the app shell context. Extend the `--lp-*` palette for any new landing page colors.
+
+**105. `npm run build` fails with `EACCES: permission denied` on `dist/` in code-server:** This is a filesystem permission issue in the Docker environment, not a TypeScript error — the TS compilation completes successfully. Use `npx tsc -b` to verify TypeScript cleanly without needing to write to `dist/`.
+
 ---
 
 ## RBAC & Permissions
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 133f0a60..9c450050 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Plus, Pin, Trash2, MessageSquare, History, X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import type { ChatListItem } from '@/types/assistant-chat'
@@ -84,7 +85,7 @@ export function ChatSidebar({
       <div className="flex-1 overflow-y-auto py-2">
         {pinnedChats.length > 0 && (
           <div className="px-3 mb-1">
-            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+            <span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
               Pinned
             </span>
           </div>
@@ -184,39 +185,65 @@ function ChatItem({
   onDelete: () => void
   onTogglePin: () => void
 }) {
+  const [confirming, setConfirming] = useState(false)
+
   return (
     <div
-      onClick={onSelect}
+      onClick={confirming ? e => e.stopPropagation() : onSelect}
       className={cn(
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
-        isActive
-          ? 'bg-accent-dim text-foreground'
-          : 'text-muted-foreground hover:bg-input hover:text-foreground'
+        confirming
+          ? 'bg-rose-500/10 border border-rose-500/20'
+          : isActive
+            ? 'bg-accent-dim text-foreground'
+            : 'text-muted-foreground hover:bg-input hover:text-foreground'
       )}
     >
       <MessageSquare size={14} className="shrink-0" />
       <div className="flex-1 min-w-0">
-        <div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
-        <div className="text-[0.6875rem] text-muted-foreground">
-          {chat.message_count} messages
+        {confirming ? (
+          <div className="flex items-center gap-2">
+            <span className="text-[0.75rem] text-rose-400 font-medium">Delete?</span>
+            <button
+              onClick={e => { e.stopPropagation(); onDelete(); setConfirming(false) }}
+              className="text-[0.6875rem] font-medium text-rose-400 hover:text-rose-300 px-1.5 py-0.5 rounded bg-rose-500/15 hover:bg-rose-500/25 transition-colors"
+            >
+              Yes
+            </button>
+            <button
+              onClick={e => { e.stopPropagation(); setConfirming(false) }}
+              className="text-[0.6875rem] text-muted-foreground hover:text-foreground px-1.5 py-0.5"
+            >
+              No
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
+            <div className="text-[0.6875rem] text-muted-foreground">
+              {chat.message_count} messages
+            </div>
+          </>
+        )}
+      </div>
+      {!confirming && (
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            onClick={e => { e.stopPropagation(); onTogglePin() }}
+            className="p-1 rounded hover:bg-white/[0.08]"
+            title={chat.pinned ? 'Unpin' : 'Pin'}
+          >
+            <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
+          </button>
+          <button
+            onClick={e => { e.stopPropagation(); setConfirming(true) }}
+            className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
+            title="Delete"
+          >
+            <Trash2 size={12} />
+          </button>
         </div>
-      </div>
-      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
-        <button
-          onClick={e => { e.stopPropagation(); onTogglePin() }}
-          className="p-1 rounded hover:bg-white/[0.08]"
-          title={chat.pinned ? 'Unpin' : 'Pin'}
-        >
-          <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
-        </button>
-        <button
-          onClick={e => { e.stopPropagation(); onDelete() }}
-          className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
-          title="Delete"
-        >
-          <Trash2 size={12} />
-        </button>
-      </div>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/components/assistant/TaskLane.tsx b/frontend/src/components/assistant/TaskLane.tsx
index 7a6a5850..590f34b3 100644
--- a/frontend/src/components/assistant/TaskLane.tsx
+++ b/frontend/src/components/assistant/TaskLane.tsx
@@ -225,8 +225,8 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
 
   return (
     <div
-      className="relative bg-sidebar border-l border-default flex flex-col shrink-0 animate-in slide-in-from-right-4 duration-200"
-      style={{ width: panelWidth }}
+      className="relative border-l border-default flex flex-col shrink-0 animate-slide-in-right"
+      style={{ background: 'var(--color-bg-page)', width: panelWidth }}
     >
       {/* Resize grip handle */}
       <div
@@ -234,16 +234,13 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
         className="absolute left-0 top-0 bottom-0 w-[6px] cursor-col-resize z-20 flex items-center justify-center group hover:bg-accent/10 transition-colors"
       >
         <div className="flex flex-col gap-[3px] opacity-0 group-hover:opacity-100 transition-opacity">
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
-          <div className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="w-[3px] h-[3px] rounded-full bg-muted-foreground" />
+          ))}
         </div>
       </div>
       {/* Header */}
-      <div className="px-4 py-3 border-b border-default flex items-center justify-between shrink-0">
+      <div className="px-4 py-3 border-b border-default flex items-center justify-between shrink-0" style={{ borderTop: '2px solid var(--color-accent)' }}>
         <h3 className="font-heading text-sm font-bold text-heading flex items-center gap-2">
           Tasks
           <span className={cn(
@@ -266,7 +263,7 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
         {/* ── Questions Section ── */}
         {questionTasks.length > 0 && (
           <section>
-            <div className="sticky top-0 z-10 bg-sidebar pb-2">
+            <div className="sticky top-0 z-10 pb-2" style={{ background: 'var(--color-bg-page)' }}>
               <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[1.2px] text-muted-foreground pl-0.5">
                 <span className="w-1.5 h-1.5 rounded-full bg-accent" />
                 Questions
@@ -282,16 +279,19 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
 
               if (q.state === 'done') {
                 return (
-                  <div key={idx} className="rounded-lg border border-success/20 bg-success-dim/20 p-3 mb-2 cursor-pointer hover:border-success/40 transition-colors" onClick={() => updateTask(idx, { state: 'active' })}>
-                    <div className="text-[0.8125rem] text-muted-foreground">{q.text}</div>
-                    <div className="text-[0.75rem] text-muted-foreground mt-1 italic">"{q.value}"</div>
+                  <div key={idx} className="rounded-lg border-l-[3px] border-l-success border border-success/25 bg-success-dim/30 p-3 mb-2 cursor-pointer hover:border-success/40 transition-colors" onClick={() => updateTask(idx, { state: 'active' })}>
+                    <div className="flex items-center gap-1.5">
+                      <Check size={12} className="text-success shrink-0" />
+                      <span className="text-[0.8125rem] text-foreground">{q.text}</span>
+                    </div>
+                    <div className="text-[0.75rem] text-muted-foreground mt-1 pl-5 italic truncate">"{q.value}"</div>
                   </div>
                 )
               }
 
               if (q.state === 'skipped') {
                 return (
-                  <div key={idx} className="rounded-lg border border-default/50 bg-elevated/20 p-3 mb-2 opacity-50">
+                  <div key={idx} className="rounded-lg border border-default/50 bg-elevated/20 p-3 mb-2 opacity-60 cursor-pointer hover:opacity-80 hover:border-default transition-all" onClick={() => updateTask(idx, { state: 'pending' })} title="Click to restore">
                     <div className="flex justify-between">
                       <div className="text-[0.8125rem] text-muted-foreground line-through">{q.text}</div>
                       <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Skipped</span>
@@ -342,9 +342,10 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
                       </button>
                       <button
                         onClick={() => updateTask(idx, { state: 'skipped' })}
-                        className="flex items-center gap-1 rounded-md px-2.5 py-1.5 text-[0.75rem] text-muted-foreground hover:text-heading"
+                        className="p-1.5 rounded-md text-muted-foreground hover:text-heading hover:bg-elevated/50 transition-colors"
+                        title="Skip this question"
                       >
-                        <SkipForward size={11} /> Skip
+                        <SkipForward size={13} />
                       </button>
                     </div>
                   )}
@@ -357,7 +358,7 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
         {/* ── Checks Section ── */}
         {actionTasks.length > 0 && (
           <section>
-            <div className="sticky top-0 z-10 bg-sidebar pb-2">
+            <div className="sticky top-0 z-10 pb-2" style={{ background: 'var(--color-bg-page)' }}>
               <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[1.2px] text-muted-foreground pl-0.5">
                 <span className="w-1.5 h-1.5 rounded-full bg-[#60a5fa]" />
                 Diagnostic Checks
@@ -401,10 +402,10 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
 
               if (a.state === 'done') {
                 return (
-                  <div key={idx} className="rounded-lg border border-success/20 bg-success-dim/20 p-3 mb-2 cursor-pointer hover:border-success/40 transition-colors" onClick={() => updateTask(idx, { state: 'active' })}>
-                    <div className="flex justify-between">
-                      <div className="text-[0.8125rem] font-medium text-heading">{a.label}</div>
-                      <span className="text-[10px] font-semibold uppercase tracking-wider text-success">✓ Done</span>
+                  <div key={idx} className="rounded-lg border-l-[3px] border-l-success border border-success/25 bg-success-dim/30 p-3 mb-2 cursor-pointer hover:border-success/40 transition-colors" onClick={() => updateTask(idx, { state: 'active' })}>
+                    <div className="flex items-center gap-1.5">
+                      <Check size={12} className="text-success shrink-0" />
+                      <span className="text-[0.8125rem] font-medium text-foreground flex-1">{a.label}</span>
                     </div>
                   </div>
                 )
@@ -412,7 +413,7 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
 
               if (a.state === 'skipped') {
                 return (
-                  <div key={idx} className="rounded-lg border border-default/50 bg-elevated/20 p-3 mb-2 opacity-50">
+                  <div key={idx} className="rounded-lg border border-default/50 bg-elevated/20 p-3 mb-2 opacity-60 cursor-pointer hover:opacity-80 hover:border-default transition-all" onClick={() => updateTask(idx, { state: 'pending' })} title="Click to restore">
                     <div className="flex justify-between">
                       <div className="text-[0.8125rem] text-muted-foreground line-through">{a.label}</div>
                       <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Skipped</span>
@@ -464,24 +465,19 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
                       </div>
                     </div>
                   ) : (
-                    <div className="mt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+                    <div className="mt-2 flex items-center gap-2">
                       <button
                         onClick={() => updateTask(idx, { state: 'active' })}
-                        className="flex items-center justify-center gap-1 rounded-md border border-accent/40 bg-accent-dim/30 px-2.5 py-1.5 text-[0.75rem] font-medium text-accent-text hover:bg-accent-dim/50 transition-colors"
+                        className="flex items-center gap-1 rounded-md border border-accent/40 bg-accent-dim/30 px-2.5 py-1.5 text-[0.75rem] font-medium text-accent-text hover:bg-accent-dim/50 transition-colors"
                       >
-                        <Clipboard size={11} /> Paste Result
-                      </button>
-                      <button
-                        onClick={() => updateTask(idx, { state: 'active' })}
-                        className="flex items-center justify-center gap-1 rounded-md border border-default bg-elevated/50 px-2.5 py-1.5 text-[0.75rem] font-medium text-heading hover:bg-elevated transition-colors"
-                      >
-                        Type Answer
+                        <Clipboard size={11} /> {a.command ? 'Paste Output' : 'Answer'}
                       </button>
                       <button
                         onClick={() => updateTask(idx, { state: 'skipped' })}
-                        className="flex items-center justify-center gap-1 rounded-md px-2.5 py-1.5 text-[0.75rem] text-muted-foreground hover:text-heading"
+                        className="p-1.5 rounded-md text-muted-foreground hover:text-heading hover:bg-elevated/50 transition-colors"
+                        title="Skip this check"
                       >
-                        <SkipForward size={11} /> Skip
+                        <SkipForward size={13} />
                       </button>
                     </div>
                   )}
@@ -495,19 +491,24 @@ export function TaskLane({ questions, actions, sessionId, onSubmit, onClose, loa
       {/* Footer */}
       <div className="p-3 border-t border-default shrink-0">
         {/* Progress bar */}
-        <div className="flex gap-1 mb-2">
-          {tasks.map((t, i) => (
-            <div
-              key={i}
-              className={cn(
-                'flex-1 h-[3px] rounded-full',
-                t.state === 'done' ? 'bg-success' :
-                t.state === 'skipped' ? 'bg-muted' :
-                t.state === 'active' ? 'bg-accent' :
-                'bg-elevated'
-              )}
-            />
-          ))}
+        <div className="flex items-center gap-2 mb-2">
+          <div className="flex gap-1 flex-1">
+            {tasks.map((t, i) => (
+              <div
+                key={i}
+                className={cn(
+                  'flex-1 h-[5px] rounded-full transition-colors',
+                  t.state === 'done' ? 'bg-success' :
+                  t.state === 'skipped' ? 'bg-muted-foreground/30' :
+                  t.state === 'active' ? 'bg-accent' :
+                  'bg-border-default'
+                )}
+              />
+            ))}
+          </div>
+          <span className="text-[0.625rem] font-medium text-muted-foreground tabular-nums shrink-0">
+            {handledCount}/{totalCount}
+          </span>
         </div>
         {/* Collapsible preview */}
         {anyHandled && (
diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 69a005fa..9e61a1bd 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -1,65 +1,19 @@
 import { useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
-import { Plus, ChevronDown, Sparkles, FolderTree, ListOrdered } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { Plus, ChevronDown, FolderTree, ListOrdered } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { editorAIApi } from '@/api/editorAI'
-import { apiClient } from '@/api/client'
-import { AIPromptDialog } from '@/components/editor-ai/AIPromptDialog'
-
-type AIFlowType = 'troubleshooting' | 'procedural' | 'maintenance'
 
 interface CreateFlowDropdownProps {
-  aiEnabled: boolean
   className?: string
   /** Button label — defaults to "Create Flow" */
   label?: string
 }
 
 export function CreateFlowDropdown({
-  aiEnabled,
   className,
   label = 'Create Flow',
 }: CreateFlowDropdownProps) {
   const [showMenu, setShowMenu] = useState(false)
-  const [aiPromptOpen, setAiPromptOpen] = useState(false)
-  const [aiPromptFlowType, setAiPromptFlowType] = useState<AIFlowType>('troubleshooting')
-  const navigate = useNavigate()
-
-  const handleAIGenerate = async (prompt: string) => {
-    // Start an AI session
-    const session = await editorAIApi.startSession(
-      aiPromptFlowType === 'maintenance' ? 'procedural' : aiPromptFlowType
-    )
-    const sessionId = session.session_id
-
-    // Send the user's prompt
-    await editorAIApi.sendMessage({
-      sessionId,
-      content: prompt,
-      actionType: 'generate_full',
-    })
-
-    // Generate the full flow
-    await editorAIApi.generateFull(sessionId)
-
-    // Import to create the tree
-    const { data: importResult } = await apiClient.post(
-      `/ai/chat/sessions/${sessionId}/import`,
-      {}
-    )
-    const treeId = importResult.tree_id
-
-    // Navigate to the editor
-    if (aiPromptFlowType === 'troubleshooting') {
-      navigate(`/trees/${treeId}/edit`, {
-        state: { aiPanelOpen: true, sessionId },
-      })
-    } else {
-      navigate(`/flows/${treeId}/edit`, {
-        state: { aiPanelOpen: true, sessionId },
-      })
-    }
-  }
 
   return (
     <div className={cn('relative', className)}>
@@ -74,43 +28,25 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl">
-            {/* Troubleshooting */}
+          <div className="absolute right-0 z-20 mt-1 w-60 rounded-lg border border-border bg-card p-1 shadow-xl">
             <Link
               to="/trees/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <FolderTree className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
-                <div className="font-medium">Troubleshooting Tree</div>
+                <div className="font-medium">Troubleshooting Flow</div>
                 <div className="text-xs text-muted-foreground">Branching decision flow</div>
               </div>
             </Link>
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('troubleshooting')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
 
             <div className="my-1 border-t border-border" />
 
-            {/* Procedural */}
             <Link
               to="/flows/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <ListOrdered className="h-4 w-4 text-muted-foreground" />
               <div className="flex-1">
@@ -118,51 +54,9 @@ export function CreateFlowDropdown({
                 <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
               </div>
             </Link>
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('procedural')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
-
-            <div className="my-1 border-t border-border" />
-
-            {aiEnabled && (
-              <button
-                type="button"
-                onClick={() => {
-                  setShowMenu(false)
-                  setAiPromptFlowType('procedural')
-                  setAiPromptOpen(true)
-                }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
-              >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
-                <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
-                </div>
-              </button>
-            )}
           </div>
         </>
       )}
-
-      <AIPromptDialog
-        isOpen={aiPromptOpen}
-        onClose={() => setAiPromptOpen(false)}
-        onGenerate={handleAIGenerate}
-        flowType={aiPromptFlowType}
-      />
     </div>
   )
 }
diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index 2cb22eb2..75723814 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -34,11 +34,11 @@ export function TagBadges({
           }}
           disabled={!onTagClick}
           className={cn(
-            'rounded-full font-sans text-xs transition-colors',
+            'rounded-full font-sans transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-accent text-muted-foreground hover:bg-accent'
-              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
+              ? 'bg-[var(--color-bg-elevated)] text-muted-foreground border border-border hover:text-foreground hover:border-[var(--color-border-hover)]'
+              : 'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border hover:text-foreground',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -48,9 +48,9 @@ export function TagBadges({
       {hiddenCount > 0 && (
         <span
           className={cn(
-            'rounded-full font-sans text-xs',
+            'rounded-full font-sans',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-accent/50 text-muted-foreground'
+            'bg-[rgba(255,255,255,0.04)] text-muted-foreground border border-border'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >
diff --git a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
index 41093810..3f6e8b08 100644
--- a/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/ActiveFlowPilotSessions.tsx
@@ -4,16 +4,7 @@ import { Clock, ArrowRight, Route, MessageCircle } from 'lucide-react'
 import { aiSessionsApi } from '@/api/aiSessions'
 import type { AISessionSummary } from '@/types/ai-session'
 import { cn } from '@/lib/utils'
-
-function timeAgo(dateStr: string): string {
-  const diffMs = Date.now() - new Date(dateStr).getTime()
-  const minutes = Math.floor(diffMs / 60000)
-  if (minutes < 1) return 'just now'
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  return `${Math.floor(hours / 24)}d ago`
-}
+import { timeAgo } from '@/lib/timeAgo'
 
 export function ActiveFlowPilotSessions({ hideHeader = false }: { hideHeader?: boolean }) {
   const [sessions, setSessions] = useState<AISessionSummary[]>([])
@@ -68,7 +59,7 @@ export function ActiveFlowPilotSessions({ hideHeader = false }: { hideHeader?: b
                 )}
                 <span
                   className={cn(
-                    'font-sans text-xs text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
+                    'font-sans text-[0.5625rem] uppercase px-1.5 py-0.5 rounded',
                     session.confidence_tier === 'guided' && 'bg-emerald-400/10 text-emerald-400',
                     session.confidence_tier === 'exploring' && 'bg-amber-400/10 text-amber-400',
                     session.confidence_tier === 'discovery' && 'bg-blue-400/10 text-blue-400',
diff --git a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
index 7a83286b..579dffba 100644
--- a/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
+++ b/frontend/src/components/dashboard/KnowledgeBaseCards.tsx
@@ -1,16 +1,19 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Network, Code2, ListChecks, ArrowRight } from 'lucide-react'
+import { Network, Code2, ListChecks, ArrowRight, ChevronRight } from 'lucide-react'
 import { sidebarApi } from '@/api'
+import { Skeleton } from '@/components/ui/Skeleton'
 
 export function KnowledgeBaseCards() {
   const navigate = useNavigate()
   const [flowCount, setFlowCount] = useState(0)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     sidebarApi.getStats()
       .then((stats) => setFlowCount(stats.tree_counts.total))
       .catch(() => {})
+      .finally(() => setLoading(false))
   }, [])
 
   const items = [
@@ -33,21 +36,33 @@ export function KnowledgeBaseCards() {
           Browse <ArrowRight size={10} />
         </button>
       </div>
-      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
-        {items.map((item) => (
+      <div className="py-1">
+        {loading ? Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-5 py-3" style={{ borderBottom: i < 2 ? '1px solid var(--color-border-default)' : undefined }}>
+            <Skeleton className="h-8 w-8 rounded-md shrink-0" />
+            <Skeleton className="h-4 flex-1 max-w-24" />
+            <Skeleton className="h-5 w-8" />
+          </div>
+        )) : items.map((item, i) => (
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
-            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
-            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
-            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
+            className="flex w-full items-center gap-3 px-5 py-3 text-left hover:bg-[var(--color-bg-card-hover)] transition-colors group"
+            style={{
+              borderBottom: i < items.length - 1 ? '1px solid var(--color-border-default)' : undefined,
+            }}
           >
-            <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
-              {item.label}
-            </p>
+            <span
+              className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md"
+              style={{ backgroundColor: `${item.color}15` }}
+            >
+              <item.icon size={15} style={{ color: item.color }} />
+            </span>
+            <span className="flex-1 text-sm font-medium text-foreground">{item.label}</span>
+            <span className="font-heading text-base font-bold text-foreground tabular-nums mr-1">
+              {item.value}
+            </span>
+            <ChevronRight size={14} className="text-muted-foreground opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
           </button>
         ))}
       </div>
diff --git a/frontend/src/components/dashboard/PendingEscalations.tsx b/frontend/src/components/dashboard/PendingEscalations.tsx
index 2d36a561..7db7955a 100644
--- a/frontend/src/components/dashboard/PendingEscalations.tsx
+++ b/frontend/src/components/dashboard/PendingEscalations.tsx
@@ -3,16 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { AlertTriangle } from 'lucide-react'
 import { aiSessionsApi } from '@/api/aiSessions'
 import type { AISessionSummary } from '@/types/ai-session'
-
-function timeAgo(dateStr: string): string {
-  const diffMs = Date.now() - new Date(dateStr).getTime()
-  const minutes = Math.floor(diffMs / 60000)
-  if (minutes < 1) return 'just now'
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  return `${Math.floor(hours / 24)}d ago`
-}
+import { timeAgo } from '@/lib/timeAgo'
 
 export function PendingEscalations() {
   const [escalations, setEscalations] = useState<AISessionSummary[]>([])
diff --git a/frontend/src/components/dashboard/PerformanceCards.tsx b/frontend/src/components/dashboard/PerformanceCards.tsx
index 6ae67aa6..c8dbb701 100644
--- a/frontend/src/components/dashboard/PerformanceCards.tsx
+++ b/frontend/src/components/dashboard/PerformanceCards.tsx
@@ -4,6 +4,7 @@ import { CheckCircle, Clock, TrendingUp, Timer } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import { sidebarApi } from '@/api'
 import { cn } from '@/lib/utils'
+import { Skeleton } from '@/components/ui/Skeleton'
 
 interface StatCard {
   label: string
@@ -19,6 +20,8 @@ export function PerformanceCards() {
   const [resolved, setResolved] = useState(0)
   const [active, setActive] = useState(0)
   const [totalMinutes, setTotalMinutes] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(false)
 
   useEffect(() => {
     sidebarApi.getStats()
@@ -27,9 +30,31 @@ export function PerformanceCards() {
         setActive(stats.active_count)
         setTotalMinutes(stats.total_session_minutes_today)
       })
-      .catch(() => {})
+      .catch(() => setError(true))
+      .finally(() => setLoading(false))
   }, [])
 
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="card-flat p-4 space-y-2">
+            <Skeleton className="h-3 w-2/3" />
+            <Skeleton className="h-7 w-1/2" />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="card-flat p-4 text-center">
+        <p className="text-sm text-muted-foreground">Unable to load performance data</p>
+      </div>
+    )
+  }
+
   const avgMttr = resolved > 0 ? Math.round(totalMinutes / resolved) : 0
 
   const cards: StatCard[] = [
@@ -70,14 +95,13 @@ export function PerformanceCards() {
         <button
           key={card.label}
           onClick={() => navigate(card.href)}
-          className="card-interactive p-4 text-left fade-in"
+          className="card-flat p-4 text-left fade-in hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
           style={{
             animationDelay: `${400 + i * 60}ms`,
-            borderLeft: `3px solid ${card.iconColor}`,
           }}
         >
           <div className="flex items-center justify-between mb-2">
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <p className="font-sans text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
               {card.label}
             </p>
             <card.icon size={14} style={{ color: card.iconColor }} />
diff --git a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
index 080353a7..c921bc59 100644
--- a/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
+++ b/frontend/src/components/dashboard/RecentFlowPilotSessions.tsx
@@ -3,18 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { CheckCircle, AlertTriangle, XCircle, ArrowRight, MessageCircle } from 'lucide-react'
 import { aiSessionsApi } from '@/api/aiSessions'
 import type { AISessionSummary } from '@/types/ai-session'
-
-function timeAgo(dateStr: string): string {
-  const diffMs = Date.now() - new Date(dateStr).getTime()
-  const minutes = Math.floor(diffMs / 60000)
-  if (minutes < 1) return 'just now'
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  if (days === 1) return 'yesterday'
-  return `${days}d ago`
-}
+import { timeAgo } from '@/lib/timeAgo'
 
 const STATUS_CONFIG: Record<string, { icon: typeof CheckCircle; color: string }> = {
   resolved: { icon: CheckCircle, color: '#34d399' },
diff --git a/frontend/src/components/dashboard/TeamSummary.tsx b/frontend/src/components/dashboard/TeamSummary.tsx
index a739aaa3..b0557de4 100644
--- a/frontend/src/components/dashboard/TeamSummary.tsx
+++ b/frontend/src/components/dashboard/TeamSummary.tsx
@@ -3,17 +3,20 @@ import { useNavigate } from 'react-router-dom'
 import { Users, AlertTriangle, Activity, ArrowRight } from 'lucide-react'
 import { usePermissions } from '@/hooks/usePermissions'
 import { aiSessionsApi } from '@/api/aiSessions'
+import { Skeleton } from '@/components/ui/Skeleton'
 
 export function TeamSummary() {
   const { isAccountOwner } = usePermissions()
   const navigate = useNavigate()
   const [escalationCount, setEscalationCount] = useState(0)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    if (!isAccountOwner) return
+    if (!isAccountOwner) { setLoading(false); return }
     aiSessionsApi.getEscalationQueue()
       .then((esc) => setEscalationCount(esc.length))
       .catch(() => {})
+      .finally(() => setLoading(false))
   }, [isAccountOwner])
 
   if (!isAccountOwner) return null
@@ -38,21 +41,26 @@ export function TeamSummary() {
           Manage <ArrowRight size={10} />
         </button>
       </div>
-      <div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--color-border-default)' }}>
-        {items.map((item) => (
+      <div className="p-4 space-y-3">
+        {loading ? Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3 px-3 py-2.5">
+            <Skeleton className="h-4 w-4 rounded shrink-0" />
+            <Skeleton className="h-4 flex-1 max-w-28" />
+            <Skeleton className="h-5 w-8" />
+          </div>
+        )) : items.map((item) => (
           <button
             key={item.label}
             onClick={() => navigate(item.href)}
-            className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
-            style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
-            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
-            onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
+            className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 hover:bg-[var(--color-bg-card-hover)] transition-colors group"
           >
-            <item.icon size={20} style={{ color: item.color }} />
-            <p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
-            <p className="font-sans text-xs text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <item.icon size={15} style={{ color: item.color }} className="shrink-0" />
+            <span className="flex-1 text-left text-[0.8125rem] text-muted-foreground group-hover:text-foreground transition-colors">
               {item.label}
-            </p>
+            </span>
+            <span className="font-heading text-lg font-bold text-foreground tabular-nums">
+              {item.value}
+            </span>
           </button>
         ))}
       </div>
diff --git a/frontend/src/components/flowpilot/EscalationQueue.tsx b/frontend/src/components/flowpilot/EscalationQueue.tsx
index af2de015..20e865f1 100644
--- a/frontend/src/components/flowpilot/EscalationQueue.tsx
+++ b/frontend/src/components/flowpilot/EscalationQueue.tsx
@@ -3,12 +3,21 @@ import { useNavigate } from 'react-router-dom'
 import { AlertTriangle, Clock, Hash, Ticket, Loader2, RefreshCw } from 'lucide-react'
 import { aiSessionsApi } from '@/api'
 import type { AISessionSummary } from '@/types/ai-session'
+import { timeAgo } from '@/lib/timeAgo'
 
 interface EscalationQueueProps {
   onPickup?: (sessionId: string) => void
+  onCountChange?: (count: number) => void
 }
 
-export function EscalationQueue({ onPickup }: EscalationQueueProps) {
+function waitTimeColor(createdAt: string): string {
+  const hours = (Date.now() - new Date(createdAt).getTime()) / 3_600_000
+  if (hours >= 4) return '#f87171'   // danger
+  if (hours >= 1) return '#fbbf24'   // warning/amber
+  return '#848b9b'                    // muted
+}
+
+export function EscalationQueue({ onPickup, onCountChange }: EscalationQueueProps) {
   const navigate = useNavigate()
   const [sessions, setSessions] = useState<AISessionSummary[]>([])
   const [isLoading, setIsLoading] = useState(true)
@@ -19,7 +28,12 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
     setError(null)
     try {
       const data = await aiSessionsApi.getEscalationQueue()
-      setSessions(data)
+      // Sort oldest-first — longest waiting = most urgent
+      const sorted = [...data].sort(
+        (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+      )
+      setSessions(sorted)
+      onCountChange?.(sorted.length)
     } catch {
       setError('Failed to load escalation queue')
     } finally {
@@ -29,6 +43,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
 
   useEffect(() => {
     loadQueue()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- load once on mount
   }, [])
 
   const handlePickup = (sessionId: string) => {
@@ -50,7 +65,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   if (error) {
     return (
       <div className="py-12 text-center">
-        <p className="text-sm text-rose-400">{error}</p>
+        <p className="text-sm text-danger">{error}</p>
         <button
           onClick={loadQueue}
           className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
@@ -80,7 +95,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between px-1">
-        <h3 className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-text-muted">
+        <h3 className="font-sans text-[0.625rem] uppercase tracking-wider text-muted-foreground">
           Awaiting pickup ({sessions.length})
         </h3>
         <button
@@ -93,13 +108,13 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
       </div>
 
       {sessions.map((session) => (
-        <div key={session.id} className="card-interactive p-3 sm:p-4 space-y-3">
+        <div key={session.id} className="card-flat p-3 sm:p-4 space-y-3">
           <div>
             <p className="text-sm font-semibold text-foreground">
               {session.problem_summary || 'Untitled session'}
             </p>
             {session.escalation_reason && (
-              <p className="mt-1 text-xs text-amber-400 line-clamp-2">
+              <p className="mt-1 text-xs text-warning line-clamp-2">
                 Reason: {session.escalation_reason}
               </p>
             )}
@@ -107,7 +122,7 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
 
           <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
             {session.problem_domain && (
-              <span className="font-sans text-xs rounded-md bg-accent-dim px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-primary">
+              <span className="font-sans rounded-md bg-accent-dim px-1.5 py-0.5 text-[0.5625rem] uppercase tracking-wider text-accent-text">
                 {session.problem_domain}
               </span>
             )}
@@ -115,24 +130,29 @@ export function EscalationQueue({ onPickup }: EscalationQueueProps) {
               <Hash size={10} />
               {session.step_count} steps
             </span>
-            <span className="flex items-center gap-1">
+            <span
+              className="flex items-center gap-1 font-medium"
+              style={{ color: waitTimeColor(session.created_at) }}
+            >
               <Clock size={10} />
-              {new Date(session.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+              {timeAgo(session.created_at)}
             </span>
             {session.psa_ticket_id && (
-              <span className="flex items-center gap-1 text-primary">
+              <span className="flex items-center gap-1 text-accent-text">
                 <Ticket size={10} />
                 #{session.psa_ticket_id}
               </span>
             )}
           </div>
 
-          <button
-            onClick={() => handlePickup(session.id)}
-            className="w-full min-h-[44px] rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
-          >
-            Pick Up Session
-          </button>
+          <div className="flex justify-end">
+            <button
+              onClick={() => handlePickup(session.id)}
+              className="rounded-lg bg-primary text-white px-4 py-2 text-sm font-semibold hover:brightness-110 active:scale-[0.98] transition-all"
+            >
+              Pick Up
+            </button>
+          </div>
         </div>
       ))}
     </div>
diff --git a/frontend/src/components/layout/NotificationsPanel.tsx b/frontend/src/components/layout/NotificationsPanel.tsx
index 8f634173..a261a068 100644
--- a/frontend/src/components/layout/NotificationsPanel.tsx
+++ b/frontend/src/components/layout/NotificationsPanel.tsx
@@ -10,14 +10,7 @@ import {
 } from 'lucide-react'
 import { notificationsApi } from '@/api/notifications'
 import type { AppNotification } from '@/types/notification'
-
-function timeAgo(dateStr: string): string {
-  const diff = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
-  if (diff < 60) return 'just now'
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
-}
+import { timeAgo } from '@/lib/timeAgo'
 
 function EventIcon({ event }: { event: string }) {
   switch (event) {
diff --git a/frontend/src/components/script-builder/ScriptBuilderInput.tsx b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
index 47bb10ab..87cf508d 100644
--- a/frontend/src/components/script-builder/ScriptBuilderInput.tsx
+++ b/frontend/src/components/script-builder/ScriptBuilderInput.tsx
@@ -1,17 +1,27 @@
 import { useState, useRef, useCallback, useEffect } from 'react'
-import { Send } from 'lucide-react'
+import { Send, Terminal, UserPlus, HardDrive, RotateCcw } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
+const SUGGESTIONS: { icon: LucideIcon; label: string }[] = [
+  { icon: UserPlus, label: 'Create a new AD user' },
+  { icon: HardDrive, label: 'Check disk space on all servers' },
+  { icon: RotateCcw, label: 'Restart a Windows service' },
+  { icon: Terminal, label: 'Reset MFA for a user' },
+]
+
 interface ScriptBuilderInputProps {
   onSend: (content: string) => void
   disabled: boolean
   placeholder?: string
+  showSuggestions?: boolean
 }
 
 export function ScriptBuilderInput({
   onSend,
   disabled,
   placeholder = 'Describe the script you need...',
+  showSuggestions = false,
 }: ScriptBuilderInputProps) {
   const [value, setValue] = useState('')
   const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -44,35 +54,54 @@ export function ScriptBuilderInput({
   const canSend = value.trim().length > 0 && !disabled
 
   return (
-    <div className="flex items-end gap-2 p-3 border-t" style={{ borderColor: 'var(--color-border-default)' }}>
-      <textarea
-        ref={textareaRef}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={placeholder}
-        disabled={disabled}
-        rows={1}
-        className={cn(
-          "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
-          "bg-card border border-border text-foreground placeholder:text-muted-foreground",
-          "focus:outline-none focus:border-[rgba(96,165,250,0.3)] transition-colors",
-          "disabled:opacity-50"
-        )}
-        style={{ maxHeight: 120 }}
-      />
-      <button
-        onClick={handleSend}
-        disabled={!canSend}
-        className={cn(
-          "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
-          canSend
-            ? "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
-            : "bg-[rgba(255,255,255,0.04)] text-text-muted cursor-not-allowed"
-        )}
-      >
-        <Send size={18} />
-      </button>
+    <div className="border-t border-border p-3 space-y-2">
+      <div className="flex items-end gap-2">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={1}
+          className={cn(
+            "flex-1 resize-none rounded-xl px-4 py-2.5 text-sm",
+            "bg-card border border-border text-foreground placeholder:text-muted-foreground",
+            "focus:outline-none focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] transition-colors",
+            "disabled:opacity-50"
+          )}
+          style={{ maxHeight: 120 }}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!canSend}
+          className={cn(
+            "shrink-0 flex items-center justify-center w-10 h-10 rounded-xl transition-all",
+            canSend
+              ? "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
+              : "bg-[var(--color-bg-elevated)] text-muted-foreground cursor-not-allowed"
+          )}
+        >
+          <Send size={18} />
+        </button>
+      </div>
+
+      {showSuggestions && (
+        <div className="flex flex-wrap gap-2">
+          {SUGGESTIONS.map(({ icon: Icon, label }) => (
+            <button
+              key={label}
+              type="button"
+              disabled={disabled}
+              onClick={() => { if (!disabled) onSend(label) }}
+              className="group flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs text-muted-foreground transition-all hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)] hover:text-foreground active:scale-[0.97] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+            >
+              <Icon size={11} className="text-muted shrink-0 group-hover:text-[#f97316] transition-colors" />
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/components/script-builder/ScriptCodeBlock.tsx b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
index 9b9eb487..4daa6392 100644
--- a/frontend/src/components/script-builder/ScriptCodeBlock.tsx
+++ b/frontend/src/components/script-builder/ScriptCodeBlock.tsx
@@ -5,7 +5,6 @@ import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'
 import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python'
 import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
 import { Eye, Copy, Check, BookmarkPlus } from 'lucide-react'
-import { cn } from '@/lib/utils'
 
 SyntaxHighlighter.registerLanguage('powershell', powershell)
 SyntaxHighlighter.registerLanguage('bash', bash)
@@ -52,10 +51,10 @@ export function ScriptCodeBlock({
   }
 
   return (
-    <div className="mt-3 rounded-lg border bg-[rgba(0,0,0,0.3)] border-[rgba(255,255,255,0.06)] overflow-hidden">
+    <div className="mt-3 rounded-lg border border-border bg-[var(--color-bg-code)] overflow-hidden">
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-[rgba(255,255,255,0.06)]">
-        <span className="font-mono text-xs text-blue-400 truncate">
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+        <span className="font-mono text-xs text-accent-text truncate">
           {filename || 'script'}
         </span>
         {lineCount != null && (
@@ -85,40 +84,31 @@ export function ScriptCodeBlock({
           {previewLines}
         </SyntaxHighlighter>
         {remainingLines > 0 && (
-          <div className="px-3 pb-2 font-mono text-[0.625rem] text-text-muted">
+          <div className="px-3 pb-2 font-mono text-[0.625rem] text-muted-foreground">
             {"··· "}{remainingLines} more line{remainingLines !== 1 ? 's' : ''}
           </div>
         )}
       </button>
 
       {/* Action buttons */}
-      <div className="flex items-center gap-2 px-3 py-2 border-t border-[rgba(255,255,255,0.06)]">
+      <div className="flex items-center gap-2 px-3 py-2 border-t border-border">
         <button
           onClick={onViewFull}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all",
-            "bg-primary text-white hover:brightness-110 active:scale-[0.98]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all bg-primary text-white hover:brightness-110 active:scale-[0.98]"
         >
           <Eye size={14} />
           View Full Script
         </button>
         <button
           onClick={handleCopy}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
-          {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+          {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
           {copied ? 'Copied' : 'Copy'}
         </button>
         <button
           onClick={(e) => { e.stopPropagation(); onSave() }}
-          className={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-            "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
-          )}
+          className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
         >
           <BookmarkPlus size={14} />
           Save to Library
diff --git a/frontend/src/components/script-builder/ScriptPreviewModal.tsx b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
index 5230e7bd..33b1b655 100644
--- a/frontend/src/components/script-builder/ScriptPreviewModal.tsx
+++ b/frontend/src/components/script-builder/ScriptPreviewModal.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
 import atomOneDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark'
 import { X, Copy, Check, BookmarkPlus } from 'lucide-react'
-import { cn } from '@/lib/utils'
 
 const LANGUAGE_MAP: Record<string, string> = {
   powershell: 'powershell',
@@ -55,44 +54,38 @@ export function ScriptPreviewModal({
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/80  flex items-center justify-center"
+      className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
-      <div className="bg-card rounded-xl border border-[rgba(255,255,255,0.08)] max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
+      <div className="bg-card rounded-xl border border-border max-w-[900px] w-full mx-4 max-h-[85vh] flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-3.5 border-b border-[rgba(255,255,255,0.06)]">
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-border">
           <div className="flex items-center gap-3 min-w-0">
-            <span className="font-mono text-sm text-blue-400 truncate">
+            <span className="font-mono text-sm text-accent-text truncate">
               {filename || 'script'}
             </span>
-            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[rgba(255,255,255,0.06)] text-muted-foreground">
+            <span className="shrink-0 font-mono text-[0.625rem] uppercase tracking-wider px-2 py-0.5 rounded-full bg-[var(--color-bg-elevated)] text-muted-foreground">
               {LANGUAGE_LABELS[language] || language}
             </span>
           </div>
           <div className="flex items-center gap-2">
             <button
               onClick={handleCopy}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-              )}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
             >
-              {copied ? <Check size={14} className="text-emerald-400" /> : <Copy size={14} />}
+              {copied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
               {copied ? 'Copied' : 'Copy'}
             </button>
             <button
               onClick={onSave}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                "bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 hover:bg-emerald-500/15"
-              )}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-primary text-white hover:brightness-110"
             >
               <BookmarkPlus size={14} />
               Save to Library
             </button>
             <button
               onClick={onClose}
-              className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.06)] transition-colors"
+              className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[var(--color-bg-elevated)] transition-colors"
             >
               <X size={18} />
             </button>
@@ -125,16 +118,13 @@ export function ScriptPreviewModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between px-5 py-3 border-t border-[rgba(255,255,255,0.06)]">
+        <div className="flex items-center justify-between px-5 py-3 border-t border-border">
           <span className="font-mono text-[0.625rem] text-muted-foreground">
             {lineCount} line{lineCount !== 1 ? 's' : ''}
           </span>
           <button
             onClick={onClose}
-            className={cn(
-              "px-4 py-1.5 rounded-lg text-xs font-medium transition-colors",
-              "bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)]"
-            )}
+            className="px-4 py-1.5 rounded-lg text-xs font-medium transition-colors border border-border text-foreground hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-elevated)]"
           >
             Close & Return to Chat
           </button>
diff --git a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
index 65a59c02..262a38af 100644
--- a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
+++ b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
@@ -108,7 +108,7 @@ export function ParameterDetectorStepper({
       {/* Progress */}
       <div className="flex items-center justify-between">
         <p className="text-xs font-medium text-foreground">
-          Candidate {currentIndex + 1} of {candidates.length}
+          Variable {currentIndex + 1} of {candidates.length}
         </p>
         <div className="flex items-center gap-1">
           {candidates.map((_, i) => (
@@ -127,7 +127,7 @@ export function ParameterDetectorStepper({
 
       {/* Matched line */}
       <div className="rounded-lg bg-black/20 px-3 py-2">
-        <p className="font-sans text-xs text-amber-400 break-all">
+        <p className="font-sans text-xs text-warning break-all">
           {current.matchedLine}
         </p>
         <p className="font-sans text-xs text-[0.5rem] text-muted-foreground mt-1">
@@ -145,7 +145,7 @@ export function ParameterDetectorStepper({
             placeholder="param_key"
           />
           {existingKeys.includes(key) && (
-            <p className="text-[0.625rem] text-amber-400 mt-0.5">Key already exists — consider a different name</p>
+            <p className="text-[0.625rem] text-warning mt-0.5">Key already exists — consider a different name</p>
           )}
         </div>
         <div>
@@ -174,7 +174,7 @@ export function ParameterDetectorStepper({
           <select
             value={type}
             onChange={e => setType(e.target.value as ScriptParameter['type'])}
-            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(96,165,250,0.3)]"
+            className="w-full rounded-lg border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)]"
           >
             {PARAM_TYPES.map(t => (
               <option key={t.value} value={t.value}>{t.label}</option>
diff --git a/frontend/src/components/scripts/ParameterizeAndSavePanel.tsx b/frontend/src/components/scripts/ParameterizeAndSavePanel.tsx
index 7cc3051f..fa1927aa 100644
--- a/frontend/src/components/scripts/ParameterizeAndSavePanel.tsx
+++ b/frontend/src/components/scripts/ParameterizeAndSavePanel.tsx
@@ -92,7 +92,7 @@ export function ParameterizeAndSavePanel({
     if (detected.length > 0) {
       setShowStepper(true)
     } else {
-      setDetectionSummary('No parameters detected — script will be saved as-is. Parameter detection currently supports PowerShell only.')
+      setDetectionSummary('No configurable values found — the script will be saved as-is. Variable detection currently supports PowerShell only.')
     }
   }, [])
 
@@ -298,7 +298,7 @@ export function ParameterizeAndSavePanel({
                   'disabled:opacity-50 disabled:cursor-not-allowed'
                 )}
               >
-                Detect Parameters
+                Find Variables
               </button>
             </section>
           )}
@@ -313,7 +313,7 @@ export function ParameterizeAndSavePanel({
                 <pre className="p-3 text-xs font-mono text-foreground whitespace-pre-wrap break-all">
                   {workingScript.split(/({{.*?}})/).map((part, i) =>
                     /^{{.*}}$/.test(part)
-                      ? <span key={i} className="text-amber-400 font-semibold">{part}</span>
+                      ? <span key={i} className="text-warning font-semibold">{part}</span>
                       : <span key={i}>{part}</span>
                   )}
                 </pre>
@@ -332,7 +332,7 @@ export function ParameterizeAndSavePanel({
           {showStepper && candidates.length > 0 && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Detected Parameters
+                Configurable Variables
               </p>
               <ParameterDetectorStepper
                 candidates={candidates}
@@ -348,7 +348,7 @@ export function ParameterizeAndSavePanel({
           {parameters.length > 0 && !showStepper && (
             <section className="space-y-2">
               <p className="font-sans text-xs uppercase tracking-widest text-muted-foreground">
-                Parameters ({parameters.length})
+                Variables ({parameters.length})
               </p>
               <div className="space-y-1">
                 {parameters.map((p) => (
@@ -357,7 +357,7 @@ export function ParameterizeAndSavePanel({
                     className="flex items-center justify-between rounded-lg bg-elevated px-3 py-2"
                   >
                     <div className="flex items-center gap-2">
-                      <code className="text-xs font-mono text-amber-400">{`{{${p.key}}}`}</code>
+                      <code className="text-xs font-mono text-warning">{`{{${p.key}}}`}</code>
                       <span className="text-xs text-muted-foreground">{p.label}</span>
                     </div>
                     <span className="text-[0.625rem] text-muted-foreground uppercase tracking-wide">
diff --git a/frontend/src/components/scripts/TemplateCard.tsx b/frontend/src/components/scripts/TemplateCard.tsx
index 0baecd37..c3ff5c6e 100644
--- a/frontend/src/components/scripts/TemplateCard.tsx
+++ b/frontend/src/components/scripts/TemplateCard.tsx
@@ -3,9 +3,9 @@ import { cn } from '@/lib/utils'
 import type { ScriptTemplateListItem } from '@/types'
 
 const COMPLEXITY_CLASSES: Record<ScriptTemplateListItem['complexity'], string> = {
-  beginner: 'text-emerald-400 bg-emerald-400/10',
-  intermediate: 'text-amber-400 bg-amber-400/10',
-  advanced: 'text-rose-500 bg-rose-500/10',
+  beginner: 'text-success bg-success-dim',
+  intermediate: 'text-warning bg-warning-dim',
+  advanced: 'text-danger bg-danger-dim',
 }
 
 interface Props {
@@ -28,7 +28,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <div className="flex items-center gap-1.5 shrink-0">
           {template.requires_elevation && (
             <span title="Requires administrator elevation">
-              <ShieldAlert size={13} className="text-amber-400" />
+              <ShieldAlert size={13} className="text-warning" />
             </span>
           )}
           <span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
@@ -62,7 +62,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
         <button
           type="button"
           onClick={() => onConfigure(template.id)}
-          className="shrink-0 bg-primary/10 border border-primary/20 text-primary text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
+          className="shrink-0 bg-accent-dim border border-primary/20 text-accent-text text-xs px-2.5 py-1 rounded-md hover:bg-primary/20 transition-colors"
         >
           Configure →
         </button>
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 36e6139c..8d39cb3f 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -208,8 +208,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             className={cn(
                               'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                               copiedCommandIndex === index
-                                ? 'bg-emerald-400/10 text-emerald-400'
-                                : 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
+                                ? 'bg-success-dim text-success'
+                                : 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
                             )}
                           >
                             {copiedCommandIndex === index ? (
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 0611f5b6..9d9cfec0 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -224,7 +224,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addCommand}
-            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1 rounded-md border border-border bg-[var(--color-bg-elevated)] px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
           >
             <Plus className="h-3 w-3" />
             Add Command
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addTag}
-            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md border border-border bg-[var(--color-bg-elevated)] px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]"
           >
             Add
           </button>
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 3026800a..bb8b99f8 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -226,7 +226,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                     'rounded-full px-2.5 py-1 text-xs transition-colors',
                     selectedTag === tag.tag
                       ? 'bg-primary text-white'
-                      : 'bg-accent text-muted-foreground hover:bg-accent'
+                      : 'border border-border bg-[var(--color-bg-elevated)] text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)]'
                   )}
                 >
                   {tag.tag} ({tag.count})
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index 9890d317..c3c66b15 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -6,7 +6,7 @@ export function Skeleton({ className, ...props }: SkeletonProps) {
   return (
     <div
       className={cn(
-        'animate-pulse rounded-lg bg-brand-border',
+        'animate-pulse rounded-lg bg-[var(--color-border-default)]',
         className
       )}
       {...props}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2fb1f923..8405b22f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -82,6 +82,7 @@
   --animate-fade-in: fade-in 200ms ease-out both;
   --animate-fade-in-up: fade-in-up 200ms ease-out both;
   --animate-slide-in-left: slide-in-from-left 200ms ease-out;
+  --animate-slide-in-right: slide-in-from-right 200ms ease-out both;
   --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out both;
   --animate-scale-in: scale-in 150ms ease-out both;
   --animate-fade: fadeIn 300ms ease both;
@@ -95,6 +96,9 @@
   @keyframes slide-in-from-left {
     from { transform: translateX(-100%); } to { transform: translateX(0); }
   }
+  @keyframes slide-in-from-right {
+    from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); }
+  }
   @keyframes slide-in-from-bottom {
     from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); }
   }
diff --git a/frontend/src/lib/timeAgo.ts b/frontend/src/lib/timeAgo.ts
new file mode 100644
index 00000000..c0b7ad44
--- /dev/null
+++ b/frontend/src/lib/timeAgo.ts
@@ -0,0 +1,14 @@
+/**
+ * Formats a date string as a relative time (e.g., "5m ago", "2h ago", "yesterday").
+ */
+export function timeAgo(dateStr: string): string {
+  const diffMs = Date.now() - new Date(dateStr).getTime()
+  const minutes = Math.floor(diffMs / 60000)
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days === 1) return 'yesterday'
+  return `${days}d ago`
+}
diff --git a/frontend/src/pages/EscalationQueuePage.tsx b/frontend/src/pages/EscalationQueuePage.tsx
index 0945f147..cddbff18 100644
--- a/frontend/src/pages/EscalationQueuePage.tsx
+++ b/frontend/src/pages/EscalationQueuePage.tsx
@@ -1,20 +1,27 @@
+import { useState } from 'react'
 import { AlertTriangle } from 'lucide-react'
 import { EscalationQueue } from '@/components/flowpilot'
 
 export default function EscalationQueuePage() {
+  const [count, setCount] = useState<number | null>(null)
+
   return (
-    <div className="mx-auto max-w-3xl p-6">
+    <div className="mx-auto max-w-4xl p-6">
       <div className="flex items-center gap-3 mb-6">
-        <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10">
-          <AlertTriangle size={16} className="text-amber-400" />
+        <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-warning-dim">
+          <AlertTriangle size={16} className="text-warning" />
         </span>
         <div>
           <h1 className="font-heading text-xl font-bold text-foreground">Escalation Queue</h1>
-          <p className="text-sm text-muted-foreground">Sessions from your team waiting for pickup</p>
+          <p className="text-sm text-muted-foreground">
+            {count !== null && count > 0
+              ? `${count} session${count !== 1 ? 's' : ''} waiting for pickup`
+              : 'Sessions from your team waiting for pickup'}
+          </p>
         </div>
       </div>
 
-      <EscalationQueue />
+      <EscalationQueue onCountChange={setCount} />
     </div>
   )
 }
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index cafafbe1..ba49969e 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -5,21 +5,44 @@ import '@/styles/landing.css'
 
 const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
 
+const FAQ_ITEMS = [
+  {
+    q: 'How is this different from just using ChatGPT?',
+    a: 'FlowPilot is purpose-built for MSP troubleshooting. It understands your stack (AD, Exchange, networking, VPN), captures every diagnostic step as you work, and generates formatted ticket notes ready for your PSA. ChatGPT doesn\u2019t build documentation and can\u2019t push notes to ConnectWise.',
+  },
+  {
+    q: 'Is my data safe?',
+    a: 'Troubleshooting sessions are encrypted and isolated per team. We never use your data to train AI models. You control what gets documented and exported.',
+  },
+  {
+    q: 'What PSA tools do you integrate with?',
+    a: 'Launching with ConnectWise PSA \u2014 session documentation exports directly as internal ticket notes. Atera and Syncro integrations are next. During beta, you can copy formatted notes into any PSA.',
+  },
+  {
+    q: 'What counts as a \u201csession\u201d?',
+    a: 'One session = one troubleshooting conversation. Describe an issue, work through it with FlowPilot, resolve it. Whether that takes 2 minutes or 2 hours, it\u2019s one session. Free plan: 20 sessions/month. Pro and Team: unlimited.',
+  },
+  {
+    q: 'What if FlowPilot gets it wrong?',
+    a: 'FlowPilot is a copilot, not autopilot. Every suggestion is a recommendation \u2014 you decide what to act on. And because every step is documented, you always have a full audit trail of what was tried and why.',
+  },
+]
+
 export default function LandingPage() {
   const [navScrolled, setNavScrolled] = useState(false)
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const [betaEmail, setBetaEmail] = useState('')
   const [betaStatus, setBetaStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
+  const [betaError, setBetaError] = useState('')
+  const [openFaq, setOpenFaq] = useState<number | null>(null)
   const mobileMenuRef = useRef<HTMLDivElement>(null)
 
-  // Nav scroll effect
   useEffect(() => {
     const handleScroll = () => setNavScrolled(window.scrollY > 40)
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
-  // Close mobile menu on click outside
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (mobileMenuRef.current && !mobileMenuRef.current.contains(e.target as Node)) {
@@ -32,10 +55,8 @@ export default function LandingPage() {
     }
   }, [mobileMenuOpen])
 
-  // Close mobile menu on scroll to section
   const handleMobileNavClick = () => setMobileMenuOpen(false)
 
-  // Scroll reveal
   useEffect(() => {
     const els = document.querySelectorAll('.landing-reveal')
     const observer = new IntersectionObserver(
@@ -52,442 +73,453 @@ export default function LandingPage() {
 
   const handleBetaSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault()
-    if (!betaEmail.trim() || betaStatus === 'sending') return
+    const trimmed = betaEmail.trim()
+    if (!trimmed || betaStatus === 'sending') return
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) {
+      setBetaStatus('error')
+      setBetaError('Enter a valid email address.')
+      return
+    }
     setBetaStatus('sending')
+    setBetaError('')
     try {
       const resp = await fetch(`${API_URL}/api/v1/beta-signup`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: betaEmail }),
+        body: JSON.stringify({ email: trimmed }),
       })
       if (!resp.ok) throw new Error('Signup failed')
       setBetaStatus('sent')
       setBetaEmail('')
     } catch {
       setBetaStatus('error')
-      setTimeout(() => setBetaStatus('idle'), 3000)
+      setBetaError('Could not complete signup. Please try again or email hello@resolutionflow.com.')
     }
   }, [betaEmail, betaStatus])
 
+  const toggleFaq = (index: number) => {
+    setOpenFaq(prev => prev === index ? null : index)
+  }
+
   return (
     <>
       <PageMeta
-        title="ResolutionFlow — From Issue to Resolution, Documented"
-        description="Your AI troubleshooting copilot. Describe the issue, get help fixing it, and get clean ticket notes — automatically."
+        title="ResolutionFlow \u2014 From Issue to Resolution, Documented"
+        description="Your AI troubleshooting copilot. Describe the issue, get help fixing it, and get clean ticket notes \u2014 automatically."
       />
 
       <div className="landing-page">
-        <div className="landing-ambient-glow" />
-        <div className="landing-grid-pattern" />
+        <a href="#main" className="landing-skip-link">Skip to content</a>
 
-        <div className="landing-page-content">
-          {/* Navigation */}
-          <nav className={`landing-nav ${navScrolled ? 'scrolled' : ''}`} ref={mobileMenuRef}>
-            <div className="landing-nav-inner">
-              <a href="#" className="landing-nav-logo">
-                <div className="landing-nav-logo-icon">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                    <circle cx="12" cy="5" r="2"/>
-                    <line x1="12" y1="7" x2="12" y2="11"/>
-                    <circle cx="6" cy="15" r="2"/>
-                    <circle cx="18" cy="15" r="2"/>
-                    <line x1="12" y1="11" x2="6" y2="13"/>
-                    <line x1="12" y1="11" x2="18" y2="13"/>
-                  </svg>
-                </div>
-                <div className="landing-nav-wordmark">Resolution<span>Flow</span></div>
-              </a>
-              <ul className="landing-nav-links">
-                <li><a href="#features">Features</a></li>
-                <li><a href="#how-it-works">How It Works</a></li>
-                <li><a href="#pricing">Pricing</a></li>
-              </ul>
-              <div className="landing-nav-cta">
-                <Link to="/login" className="landing-btn-ghost">Sign In</Link>
-                <Link to="/register" className="landing-btn-primary">Get Started Free</Link>
+        {/* Navigation */}
+        <nav className={`landing-nav ${navScrolled ? 'scrolled' : ''}`} ref={mobileMenuRef}>
+          <div className="landing-nav-inner">
+            <a href="#" className="landing-nav-logo">
+              <div className="landing-nav-logo-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="5" r="2" />
+                  <line x1="12" y1="7" x2="12" y2="11" />
+                  <circle cx="6" cy="15" r="2" />
+                  <circle cx="18" cy="15" r="2" />
+                  <line x1="12" y1="11" x2="6" y2="13" />
+                  <line x1="12" y1="11" x2="18" y2="13" />
+                </svg>
               </div>
-              <button
-                className={`landing-hamburger ${mobileMenuOpen ? 'open' : ''}`}
-                onClick={() => setMobileMenuOpen(v => !v)}
-                aria-label="Toggle menu"
-                aria-expanded={mobileMenuOpen}
-              >
-                <span />
-                <span />
-                <span />
-              </button>
+              <div className="landing-nav-wordmark">Resolution<span>Flow</span></div>
+            </a>
+            <ul className="landing-nav-links">
+              <li><a href="#features">Features</a></li>
+              <li><a href="#how-it-works">How It Works</a></li>
+              <li><a href="#pricing">Pricing</a></li>
+              <li><a href="#faq">FAQ</a></li>
+            </ul>
+            <div className="landing-nav-cta">
+              <Link to="/login" className="landing-btn-ghost">Sign In</Link>
+              <Link to="/register" className="landing-btn-primary">Get Started Free</Link>
             </div>
-            {mobileMenuOpen && (
-              <div className="landing-mobile-menu">
-                <a href="#features" onClick={handleMobileNavClick}>Features</a>
-                <a href="#how-it-works" onClick={handleMobileNavClick}>How It Works</a>
-                <a href="#pricing" onClick={handleMobileNavClick}>Pricing</a>
-                <div className="landing-mobile-menu-divider" />
-                <Link to="/login" onClick={handleMobileNavClick}>Sign In</Link>
-                <Link to="/register" className="landing-btn-primary" onClick={handleMobileNavClick} style={{ textAlign: 'center' }}>Get Started Free</Link>
-              </div>
-            )}
-          </nav>
+            <button
+              className={`landing-hamburger ${mobileMenuOpen ? 'open' : ''}`}
+              onClick={() => setMobileMenuOpen(v => !v)}
+              aria-label="Toggle menu"
+              aria-expanded={mobileMenuOpen}
+            >
+              <span /><span /><span />
+            </button>
+          </div>
+          {mobileMenuOpen && (
+            <div className="landing-mobile-menu">
+              <a href="#features" onClick={handleMobileNavClick}>Features</a>
+              <a href="#how-it-works" onClick={handleMobileNavClick}>How It Works</a>
+              <a href="#pricing" onClick={handleMobileNavClick}>Pricing</a>
+              <a href="#faq" onClick={handleMobileNavClick}>FAQ</a>
+              <div className="landing-mobile-menu-divider" />
+              <Link to="/login" onClick={handleMobileNavClick}>Sign In</Link>
+              <Link to="/register" className="landing-btn-primary" onClick={handleMobileNavClick} style={{ textAlign: 'center' }}>Get Started Free</Link>
+            </div>
+          )}
+        </nav>
 
-          {/* Hero */}
+        <main id="main" className="landing-main">
+          {/* Hero — left-aligned, two columns */}
           <section className="landing-hero">
-            <div className="landing-hero-badge">Now in Beta — Join early access</div>
-            <h1>
-              Resolve tickets faster.<br />
-              <span className="landing-gradient-text">Notes write themselves.</span>
-            </h1>
-            <p className="landing-hero-sub">
-              ResolutionFlow is your AI troubleshooting copilot. Describe the issue, get expert guidance fixing it, and get clean ticket documentation — without writing a single note.
-            </p>
-            <div className="landing-hero-actions">
-              <Link to="/register" className="landing-btn-hero-primary">Start Free</Link>
-              <a href="#how-it-works" className="landing-btn-hero-secondary">See How It Works</a>
+            <div className="landing-hero-inner">
+              <div className="landing-hero-content">
+                <div className="landing-hero-badge">Now in Beta</div>
+                <h1>
+                  Resolve tickets faster.<br />
+                  <span className="landing-hero-accent">Notes write themselves.</span>
+                </h1>
+                <p className="landing-hero-sub">
+                  Your AI troubleshooting copilot for MSPs. Describe the issue, get expert guidance, and get clean ticket documentation &mdash; without writing a single note.
+                </p>
+                <div className="landing-hero-actions">
+                  <Link to="/register" className="landing-btn-hero-primary">Start Free</Link>
+                  <a href="#how-it-works" className="landing-btn-hero-secondary">See How It Works</a>
+                </div>
+                <p className="landing-hero-credibility">
+                  Built by a 15-year MSP veteran who got tired of empty ticket notes.
+                </p>
+              </div>
+              <div className="landing-hero-visual">
+                <div className="landing-preview-window">
+                  <div className="landing-preview-titlebar">
+                    <div className="landing-preview-dots"><span /><span /><span /></div>
+                    <div className="landing-preview-url">
+                      <span className="landing-lock-icon">&#128274;</span>
+                      app.resolutionflow.com/pilot
+                    </div>
+                  </div>
+                  <div className="landing-preview-body">
+                    <div className="landing-mock-session">
+                      <div className="landing-chat-animated" style={{ '--chat-index': 0 } as React.CSSProperties}>
+                        <div className="landing-mock-chat-line user">
+                          <span className="label">You</span>
+                          <span className="text">User can&apos;t access shared drive after password reset</span>
+                        </div>
+                      </div>
+                      <div className="landing-chat-animated" style={{ '--chat-index': 1 } as React.CSSProperties}>
+                        <div className="landing-typing-indicator">
+                          <span /><span /><span />
+                          <span className="landing-typing-label">FlowPilot is thinking&hellip;</span>
+                        </div>
+                      </div>
+                      <div className="landing-chat-animated" style={{ '--chat-index': 2 } as React.CSSProperties}>
+                        <div className="landing-mock-chat-line ai">
+                          <span className="label">FlowPilot</span>
+                          <span className="text">Likely a cached credential issue. Let&apos;s check:</span>
+                        </div>
+                      </div>
+                      <div className="landing-chat-animated" style={{ '--chat-index': 3 } as React.CSSProperties}>
+                        <div className="landing-mock-chat-line ai">
+                          <span className="label">FlowPilot</span>
+                          <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
+                        </div>
+                      </div>
+                      <div className="landing-chat-animated" style={{ '--chat-index': 4 } as React.CSSProperties}>
+                        <div className="landing-mock-chat-line ai">
+                          <span className="label">FlowPilot</span>
+                          <span className="text">2. Credential Manager &rarr; remove saved share entries</span>
+                        </div>
+                      </div>
+                      <div className="landing-chat-animated" style={{ '--chat-index': 5 } as React.CSSProperties}>
+                        <div className="landing-mock-chat-line doc">
+                          <span className="label">Auto-doc</span>
+                          <span className="text">3 steps captured &#10003;</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </section>
 
-          {/* Social Proof Bar */}
-          <div className="landing-social-proof-bar">
-            <p>Built by MSP engineers, for MSP engineers</p>
-            <div className="landing-proof-stats">
-              <div className="landing-proof-stat">
-                <div className="number">15+</div>
-                <div className="label">Years MSP Experience</div>
-              </div>
-              <div className="landing-proof-stat">
-                <div className="number">70%</div>
-                <div className="label">Less Time on Documentation</div>
-              </div>
-              <div className="landing-proof-stat">
-                <div className="number">100%</div>
-                <div className="label">Auto-Generated Documentation</div>
-              </div>
-            </div>
-          </div>
-
-          {/* App Preview */}
-          <div className="landing-app-preview">
-            <div className="landing-preview-window">
-              <div className="landing-preview-titlebar">
-                <div className="landing-preview-tab">
-                  <div className="landing-tab-icon" />
-                  ResolutionFlow
-                  <span className="landing-tab-close">&times;</span>
-                </div>
-                <div className="landing-preview-url-bar">
-                  <div className="landing-preview-url">
-                    <span className="landing-lock-icon">&#128274;</span>
-                    app.resolutionflow.com/pilot
-                  </div>
-                </div>
-                <div className="landing-preview-window-controls">
-                  <div className="landing-win-btn">
-                    <svg viewBox="0 0 12 12"><line x1="2" y1="6" x2="10" y2="6"/></svg>
-                  </div>
-                  <div className="landing-win-btn">
-                    <svg viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8" rx="0.5"/></svg>
-                  </div>
-                  <div className="landing-win-btn close">
-                    <svg viewBox="0 0 12 12"><line x1="2" y1="2" x2="10" y2="10"/><line x1="10" y1="2" x2="2" y2="10"/></svg>
-                  </div>
-                </div>
-              </div>
-              <div className="landing-preview-body">
-                <div className="landing-preview-sidebar">
-                  <div className="landing-preview-sidebar-item active">
-                    <div className="dot" style={{ background: '#60a5fa' }} />
-                    FlowPilot
-                  </div>
-                  <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#34d399' }} />
-                    Session History
-                  </div>
-                  <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#a78bfa' }} />
-                    Guided Flows
-                  </div>
-                  <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#2dd4bf' }} />
-                    Scripts
-                  </div>
-                  <div className="landing-preview-sidebar-item">
-                    <div className="dot" style={{ background: '#38bdf8' }} />
-                    Analytics
-                  </div>
-                </div>
-                <div className="landing-preview-canvas">
-                  <div className="landing-mock-session">
-                    <div className="landing-mock-chat-line">
-                      <span className="label">You:</span>
-                      <span className="text">User can&apos;t access shared drive after password reset</span>
-                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">This is likely a cached credential issue. Let&apos;s check a few things:</span>
-                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">1. Run <code>klist purge</code> to clear Kerberos tickets</span>
-                    </div>
-                    <div className="landing-mock-chat-line">
-                      <span className="label" style={{ color: '#60a5fa' }}>FlowPilot:</span>
-                      <span className="text">2. Open Credential Manager &rarr; remove saved entries for the share</span>
-                    </div>
-                    <div className="landing-mock-chat-line doc">
-                      <span className="label">Auto-doc:</span>
-                      <span className="text">3 steps captured &#10003;</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="landing-section-divider" />
-
-          {/* Problem Section */}
-          <section id="problem" className="landing-reveal">
+          {/* Problem — asymmetric: headline left, cards right */}
+          <section id="problem" className="landing-section landing-section-alt landing-reveal">
             <div className="landing-section-inner">
-              <div className="landing-section-label">The Problem</div>
-              <h2 className="landing-section-title">Documentation is broken.<br />Everyone knows it.</h2>
-              <div className="landing-section-desc">
-                Engineers don&apos;t want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch every time.
-              </div>
-              <div className="landing-problem-grid">
-                <ProblemCard icon="&#9201;" color="red" title="15–25 min lost per ticket" description="Engineers spend more time documenting what they did than actually doing it. After a complex issue, writing notes is the last thing anyone wants to do." />
-                <ProblemCard icon="&#128203;" color="amber" title="Vague, useless notes" description={`"Fixed Outlook" tells you nothing. Documentation written under pressure tends toward generalities that help nobody the second time around.`} />
-                <ProblemCard icon="&#128260;" color="slate" title="Knowledge walks out the door" description="When a senior engineer leaves, years of tribal knowledge disappear overnight. New hires spend months building up what was never captured." />
-                <ProblemCard icon="&#129504;" color="violet" title="Context switching kills speed" description="Jumping between the issue, documentation tools, PSA tickets, and knowledge bases fragments focus and slows resolution." />
+              <div className="landing-problem-layout">
+                <div className="landing-problem-headline">
+                  <div className="landing-section-label">The Problem</div>
+                  <h2>Documentation is broken.<br />Everyone knows it.</h2>
+                  <p>Engineers don&apos;t want to write it. Managers hate chasing it. Clients never see it. The same issues get solved from scratch &mdash; every time.</p>
+                </div>
+                <div className="landing-problem-grid">
+                  <ProblemCard icon="&#9201;" color="red" title="15&ndash;25 min lost per ticket" description="More time documenting than resolving. After a complex issue, writing notes is the last thing anyone does." />
+                  <ProblemCard icon="&#128203;" color="amber" title="Vague, useless notes" description={`"Fixed Outlook" tells no one anything. Notes under pressure are always too vague to help next time.`} />
+                  <ProblemCard icon="&#128260;" color="slate" title="Knowledge walks out the door" description="When a senior engineer leaves, years of tribal knowledge vanish overnight." />
+                  <ProblemCard icon="&#129504;" color="violet" title="Context switching kills speed" description="Jumping between the issue, docs, PSA tickets, and knowledge bases fragments focus." />
+                </div>
               </div>
             </div>
           </section>
 
-          <div className="landing-section-divider" />
-
-          {/* Brand Equation */}
+          {/* Equation */}
           <div className="landing-equation-section landing-reveal">
-            <div className="landing-section-label">The Answer</div>
-            <div className="landing-brand-equation">
-              <span className="landing-eq-item">Resolution</span>
-              <span className="landing-eq-operator">+</span>
-              <span className="landing-eq-item">Documentation</span>
-              <span className="landing-eq-operator">&minus;</span>
-              <span className="landing-eq-item">Time</span>
-              <span className="landing-eq-operator">=</span>
-              <span className="landing-eq-result">ResolutionFlow</span>
+            <div className="landing-equation-inner">
+              <div className="landing-section-label">The Answer</div>
+              <div className="landing-brand-equation">
+                <span className="landing-eq-item">Resolution</span>
+                <span className="landing-eq-operator">+</span>
+                <span className="landing-eq-item">Documentation</span>
+                <span className="landing-eq-operator">&minus;</span>
+                <span className="landing-eq-item">Time</span>
+                <span className="landing-eq-operator">=</span>
+                <span className="landing-eq-result">ResolutionFlow</span>
+              </div>
+              <p className="landing-equation-desc">
+                What if documentation was a <em>byproduct</em> of solving the issue &mdash; not a separate task?
+              </p>
             </div>
-            <p className="landing-equation-desc">
-              What if documentation was a <em>byproduct</em> of solving the issue — not a separate task? What if every ticket your team touched had clean, detailed notes — without anyone writing them?
-            </p>
           </div>
 
-          <div className="landing-section-divider" />
-
-          {/* How It Works */}
-          <section id="how-it-works" className="landing-reveal">
+          {/* How It Works — zigzag */}
+          <section id="how-it-works" className="landing-section landing-reveal">
             <div className="landing-section-inner">
               <div className="landing-section-label">How It Works</div>
               <h2 className="landing-section-title">Three steps. Zero note-writing.</h2>
-              <div className="landing-section-desc">
-                Just describe the issue. FlowPilot handles the rest.
-              </div>
-              <div className="landing-steps-container">
-                <div className="landing-step-card">
+            </div>
+            <div className="landing-zigzag">
+              <div className="landing-zigzag-step">
+                <div className="landing-zigzag-text">
+                  <div className="landing-zigzag-number">01</div>
                   <h3>Describe the Issue</h3>
-                  <p>Type what&apos;s happening, paste an error message, or drop a screenshot. FlowPilot understands MSP environments — AD, Exchange, networking, VPN, you name it.</p>
-                  <div className="landing-step-visual">
-                    <div className="landing-mock-editor">
-                      <div className="landing-mock-node step" style={{ fontSize: '0.7rem', padding: '8px 12px' }}>&#128172; &ldquo;User can&apos;t access shared drive after password reset, getting Access Denied in Event Viewer&rdquo;</div>
-                    </div>
+                  <p>Type what&apos;s happening, paste an error, or drop a screenshot. FlowPilot understands MSP environments &mdash; AD, Exchange, networking, VPN, you name it.</p>
+                </div>
+                <div className="landing-zigzag-visual">
+                  <div className="landing-mock-input">
+                    <span className="landing-mock-input-icon">&#128172;</span>
+                    <span>User can&apos;t access shared drive after password reset, getting Access Denied in Event Viewer</span>
                   </div>
                 </div>
-
-                <div className="landing-step-card">
+              </div>
+              <div className="landing-zigzag-step reverse">
+                <div className="landing-zigzag-text">
+                  <div className="landing-zigzag-number">02</div>
                   <h3>Troubleshoot Together</h3>
-                  <p>FlowPilot acts like a senior engineer on the call with you. It suggests next steps, provides commands to run, and captures every action — documentation builds itself as you work.</p>
-                  <div className="landing-step-visual">
-                    <div className="landing-mock-session">
-                      <div className="landing-mock-chat-line">
-                        <span className="label">FlowPilot:</span>
-                        <span className="text">Is the user on VPN?</span>
-                      </div>
-                      <div className="landing-mock-chat-line">
-                        <span className="label" style={{ color: '#848b9b' }}>Engineer:</span>
-                        <span className="text">Yes, Cisco AnyConnect</span>
-                      </div>
-                      <div className="landing-mock-chat-line">
-                        <span className="label">FlowPilot:</span>
-                        <span className="text">Check split tunnel config &rarr;</span>
-                      </div>
-                      <div className="landing-mock-chat-line doc">
-                        <span className="label">Auto-doc:</span>
-                        <span className="text">Step captured &#10003;</span>
-                      </div>
+                  <p>FlowPilot acts like a senior engineer on the call. It suggests next steps, provides commands, and captures every action &mdash; documentation builds itself as you work.</p>
+                </div>
+                <div className="landing-zigzag-visual">
+                  <div className="landing-mock-session compact">
+                    <div className="landing-mock-chat-line ai">
+                      <span className="label">FlowPilot</span>
+                      <span className="text">Is the user on VPN?</span>
+                    </div>
+                    <div className="landing-mock-chat-line user">
+                      <span className="label">You</span>
+                      <span className="text">Yes, Cisco AnyConnect</span>
+                    </div>
+                    <div className="landing-mock-chat-line ai">
+                      <span className="label">FlowPilot</span>
+                      <span className="text">Check split tunnel config &rarr;</span>
+                    </div>
+                    <div className="landing-mock-chat-line doc">
+                      <span className="label">Auto-doc</span>
+                      <span className="text">Step captured &#10003;</span>
                     </div>
                   </div>
                 </div>
-
-                <div className="landing-step-card">
+              </div>
+              <div className="landing-zigzag-step">
+                <div className="landing-zigzag-text">
+                  <div className="landing-zigzag-number">03</div>
                   <h3>Resolve &amp; Document</h3>
-                  <p>Hit resolve and get clean, timestamped ticket notes — ready to paste into ConnectWise, Atera, or Syncro. Every step you took, every command you ran, documented automatically.</p>
-                  <div className="landing-step-visual">
-                    <div className="landing-mock-ticket">
-                      <div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div>
-                      <div className="landing-mock-ticket-line"><span className="time">10:04</span><span className="check">&#10003;</span><span>Verified VPN connection active</span></div>
-                      <div className="landing-mock-ticket-line"><span className="time">10:06</span><span className="check">&#10003;</span><span>Split tunnel misconfigured — fixed</span></div>
-                      <div className="landing-mock-ticket-line"><span className="time">10:08</span><span className="check">&#10003;</span><span>Confirmed Outlook sync restored</span></div>
-                      <div className="landing-mock-ticket-line"><span className="time">10:09</span><span className="check">&#10003;</span><span>Resolution: VPN split tunnel updated</span></div>
-                    </div>
+                  <p>Hit resolve and get clean, timestamped ticket notes &mdash; ready to paste into ConnectWise, Atera, or Syncro. Every step documented automatically.</p>
+                </div>
+                <div className="landing-zigzag-visual">
+                  <div className="landing-mock-ticket">
+                    <div className="landing-mock-ticket-header">ConnectWise Ticket #48291</div>
+                    <div className="landing-mock-ticket-line"><span className="time">10:04</span><span className="check">&#10003;</span><span>Verified VPN connection active</span></div>
+                    <div className="landing-mock-ticket-line"><span className="time">10:06</span><span className="check">&#10003;</span><span>Split tunnel misconfigured &mdash; fixed</span></div>
+                    <div className="landing-mock-ticket-line"><span className="time">10:08</span><span className="check">&#10003;</span><span>Confirmed Outlook sync restored</span></div>
+                    <div className="landing-mock-ticket-line"><span className="time">10:09</span><span className="check">&#10003;</span><span>Resolution: VPN split tunnel updated</span></div>
                   </div>
                 </div>
               </div>
             </div>
           </section>
 
-          <div className="landing-section-divider" />
-
           {/* Features */}
-          <section id="features" className="landing-reveal">
+          <section id="features" className="landing-section landing-section-alt landing-reveal">
             <div className="landing-section-inner">
               <div className="landing-section-label">Features</div>
-              <h2 className="landing-section-title">Troubleshoot faster.<br />Document everything. Automatically.</h2>
+              <h2 className="landing-section-title">Everything you need to troubleshoot faster.</h2>
+
+              <div className="landing-feature-highlight">
+                <div className="landing-feature-highlight-icon">
+                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /></svg>
+                </div>
+                <div className="landing-feature-highlight-content">
+                  <h3>FlowPilot &mdash; Your AI Copilot</h3>
+                  <p>Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself &mdash; as a byproduct of solving the problem.</p>
+                </div>
+              </div>
+
               <div className="landing-features-grid">
                 <FeatureCard
-                  highlight
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>}
-                  title="FlowPilot — Your AI Copilot"
-                  description="Like having a senior engineer on every call. Describe the issue, get expert troubleshooting guidance, and documentation writes itself — as a byproduct of solving the problem."
+                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><line x1="9" y1="3" x2="9" y2="21" /></svg>}
+                  title="Guided Flows"
+                  description="Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency."
                 />
                 <FeatureCard
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>}
-                  title="Guided Troubleshooting Flows"
-                  description="Build step-by-step troubleshooting paths your team can follow. Great for standard procedures, onboarding new engineers, or ensuring consistency."
+                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline points="14 2 14 8 20 8" /><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /></svg>}
+                  title="Zero Empty Tickets"
+                  description="Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures."
                 />
                 <FeatureCard
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>}
-                  title="Zero Empty Ticket Notes"
-                  description="Every troubleshooting session generates timestamped, detailed notes — formatted for your PSA. Your team will never close a ticket with empty notes again."
+                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>}
+                  title="Team Knowledge"
+                  description="Solutions are saved and surfaced when the next engineer hits a similar issue."
                 />
                 <FeatureCard
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>}
-                  title="Team Knowledge That Grows"
-                  description="Every resolved session makes your team smarter. Solutions are saved and surfaced automatically when the next engineer hits a similar issue."
+                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>}
+                  title="Session Analytics"
+                  description="Track resolution times, identify recurring issues, and measure team performance."
                 />
                 <FeatureCard
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>}
-                  title="Session History & Analytics"
-                  description="See every troubleshooting session your team has run. Track resolution times, identify common issues, and measure team performance."
-                />
-                <FeatureCard
-                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>}
+                  icon={<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" /><line x1="8" y1="21" x2="16" y2="21" /><line x1="12" y1="17" x2="12" y2="21" /></svg>}
                   title="PSA Integration"
-                  description="Connect directly to ConnectWise, Atera, and Syncro. Export session docs straight to tickets — no copy-paste needed."
+                  description="Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets."
                 />
               </div>
             </div>
           </section>
 
-          <div className="landing-section-divider" />
-
           {/* Pricing */}
-          <section id="pricing" className="landing-reveal">
+          <section id="pricing" className="landing-section landing-reveal">
             <div className="landing-section-inner">
               <div className="landing-section-label">Pricing</div>
               <h2 className="landing-section-title">Simple pricing. No surprises.</h2>
-              <div className="landing-section-desc">Start free. Upgrade when your team is ready.</div>
+              <p className="landing-section-desc">Start free. Upgrade when your team is ready.</p>
               <div className="landing-pricing-grid">
                 <PricingCard
                   name="Free"
-                  target="For individual techs evaluating"
+                  target="Individual techs evaluating"
                   amount="$0"
                   note="Free forever"
-                  features={['3 decision trees', '20 sessions per month', 'Auto-documentation export', 'Session history (30 days)', 'Community support']}
+                  features={['3 guided flows', '20 sessions per month', 'Auto-documentation export', '30-day session history']}
                   btnLabel="Get Started"
                   btnStyle="outline"
+                  plan="free"
                 />
                 <PricingCard
                   featured
                   name="Pro"
-                  target="For small MSPs with 1–5 techs"
+                  target="Small MSPs &middot; 1&ndash;5 techs"
                   amount="$15"
                   period="/user/mo"
                   note="Billed monthly or annually"
-                  features={['Unlimited decision trees', 'Unlimited sessions', 'FlowPilot AI copilot', 'Auto-documentation export', 'Full session history', 'Flow templates library', 'Priority support']}
+                  features={['Unlimited flows & sessions', 'FlowPilot AI copilot', 'Full session history', 'Flow templates library', 'Priority support']}
                   btnLabel="Start Free Trial"
                   btnStyle="filled"
+                  plan="pro"
                 />
                 <PricingCard
                   name="Team"
-                  target="For growing MSPs with 5–25 techs"
+                  target="Growing MSPs &middot; 5&ndash;25 techs"
                   amount="$25"
                   period="/user/mo"
                   note="Billed monthly or annually"
-                  features={['Everything in Pro', 'PSA integration (ConnectWise, Atera, Syncro)', 'Team analytics dashboard', 'Session sharing & collaboration', 'Client context system', 'Role-based permissions', 'Dedicated support']}
+                  features={['Everything in Pro', 'PSA integration', 'Team analytics dashboard', 'Session sharing', 'Role-based permissions', 'Dedicated support']}
                   btnLabel="Start Free Trial"
                   btnStyle="outline"
+                  plan="team"
                 />
               </div>
+              <p className="landing-pricing-session-note">One session = one troubleshooting conversation, regardless of length.</p>
               <p className="landing-pricing-enterprise">
-                Need Enterprise (25+ techs, SSO, custom branding)?{' '}
-                <a href="mailto:hello@resolutionflow.com">Contact us</a>
+                Enterprise (25+ techs, SSO, custom branding)?{' '}
+                <a href="mailto:hello@resolutionflow.com">Let&apos;s talk</a>
               </p>
             </div>
           </section>
 
-          <div className="landing-section-divider" />
-
-          {/* Testimonial */}
-          <div className="landing-testimonial-section landing-reveal">
-            <div className="landing-testimonial-quote">
-              We used to spend more time writing ticket notes than solving the actual issue. Now it just&hellip; happens. The documentation writes itself while we work.
+          {/* FAQ */}
+          <section id="faq" className="landing-section landing-section-alt landing-reveal">
+            <div className="landing-section-inner">
+              <div className="landing-section-label">FAQ</div>
+              <h2 className="landing-section-title">Common questions</h2>
+              <div className="landing-faq-list">
+                {FAQ_ITEMS.map((item, i) => (
+                  <div key={i} className={`landing-faq-item ${openFaq === i ? 'open' : ''}`}>
+                    <button
+                      className="landing-faq-trigger"
+                      onClick={() => toggleFaq(i)}
+                      aria-expanded={openFaq === i}
+                    >
+                      <span>{item.q}</span>
+                      <span className="landing-faq-icon" aria-hidden="true">{openFaq === i ? '\u2212' : '+'}</span>
+                    </button>
+                    <div className="landing-faq-answer" role="region">
+                      <p>{item.a}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
             </div>
-            <div className="landing-testimonial-author">
-              <strong>Beta Tester</strong> — MSP Engineer, Southeast US
+          </section>
+
+          {/* Founder — replaces anonymous testimonial */}
+          <div className="landing-founder-section landing-reveal">
+            <div className="landing-founder-inner">
+              <div className="landing-section-label">Why We Built This</div>
+              <blockquote>
+                After 15 years in the MSP trenches, I got tired of the same cycle: solve the issue in 10 minutes, spend 20 minutes writing notes about it. Or worse &mdash; close the ticket with &ldquo;Fixed issue&rdquo; because there&apos;s no time. ResolutionFlow is the tool I wanted on every call.
+              </blockquote>
+              <div className="landing-founder-name">&mdash; Michael, Founder</div>
             </div>
           </div>
 
-          <div className="landing-section-divider" />
-
           {/* CTA */}
           <section className="landing-cta-section landing-reveal">
-            <h2>Ready to never write ticket notes again?</h2>
-            <p>Join the beta. Troubleshoot your next ticket with FlowPilot and see the documentation write itself.</p>
-            <form className="landing-cta-email-form" onSubmit={handleBetaSubmit}>
-              <input
-                type="email"
-                className="landing-cta-email-input"
-                placeholder="you@yourmsp.com"
-                value={betaEmail}
-                onChange={e => setBetaEmail(e.target.value)}
-                required
-              />
-              <button type="submit" className="landing-btn-hero-primary" style={{ whiteSpace: 'nowrap' }} disabled={betaStatus === 'sending'}>
-                {betaStatus === 'sending' ? 'Joining...' : betaStatus === 'sent' ? 'Joined!' : 'Join Beta'}
-              </button>
-            </form>
-            {betaStatus === 'sent' && (
-              <p className="landing-cta-success">Thanks! We&apos;ll be in touch with beta access details.</p>
-            )}
-            {betaStatus === 'error' && (
-              <p className="landing-cta-error">Something went wrong. Please try again.</p>
-            )}
-            <p className="landing-cta-fine-print">Free to start. No credit card required.</p>
+            <div className="landing-cta-inner">
+              <h2>Ready to stop writing ticket notes?</h2>
+              <p>Join the beta. Troubleshoot your next ticket with FlowPilot.</p>
+              <form className="landing-cta-email-form" onSubmit={handleBetaSubmit} noValidate>
+                <div className="landing-cta-input-wrap">
+                  <input
+                    type="email"
+                    className="landing-cta-email-input"
+                    placeholder="you@yourmsp.com"
+                    value={betaEmail}
+                    onChange={e => {
+                      setBetaEmail(e.target.value)
+                      if (betaStatus === 'error') { setBetaStatus('idle'); setBetaError('') }
+                    }}
+                    required
+                    aria-describedby="beta-status"
+                  />
+                  <button type="submit" className="landing-btn-hero-primary" disabled={betaStatus === 'sending'}>
+                    {betaStatus === 'sending' ? 'Joining\u2026' : betaStatus === 'sent' ? 'Joined!' : 'Join Beta'}
+                  </button>
+                </div>
+                <div id="beta-status" aria-live="polite" className="landing-cta-status">
+                  {betaStatus === 'sent' && (
+                    <p className="landing-cta-success">You&apos;re in. We&apos;ll send beta access details soon.</p>
+                  )}
+                  {betaStatus === 'error' && betaError && (
+                    <p className="landing-cta-error">{betaError}</p>
+                  )}
+                </div>
+              </form>
+              <p className="landing-cta-fine-print">Free to start. No credit card required.</p>
+            </div>
           </section>
 
           {/* Footer */}
           <footer className="landing-footer">
             <div className="landing-footer-inner">
               <div className="landing-footer-left">
-                <div className="landing-nav-logo-icon" style={{ width: 28, height: 28, borderRadius: 8 }}>
-                  <svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 16, height: 16 }}>
-                    <circle cx="12" cy="5" r="2"/>
-                    <line x1="12" y1="7" x2="12" y2="11"/>
-                    <circle cx="6" cy="15" r="2"/>
-                    <circle cx="18" cy="15" r="2"/>
-                    <line x1="12" y1="11" x2="6" y2="13"/>
-                    <line x1="12" y1="11" x2="18" y2="13"/>
+                <div className="landing-nav-logo-icon" style={{ width: 24, height: 24, borderRadius: 6 }}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
+                    <circle cx="12" cy="5" r="2" />
+                    <line x1="12" y1="7" x2="12" y2="11" />
+                    <circle cx="6" cy="15" r="2" />
+                    <circle cx="18" cy="15" r="2" />
+                    <line x1="12" y1="11" x2="6" y2="13" />
+                    <line x1="12" y1="11" x2="18" y2="13" />
                   </svg>
                 </div>
-                <span className="landing-footer-copy">&copy; 2026 ResolutionFlow. All rights reserved.</span>
+                <span className="landing-footer-copy">&copy; 2026 ResolutionFlow</span>
               </div>
               <ul className="landing-footer-links">
                 <li><Link to="/privacy">Privacy</Link></li>
@@ -496,7 +528,7 @@ export default function LandingPage() {
               </ul>
             </div>
           </footer>
-        </div>
+        </main>
       </div>
     </>
   )
@@ -517,11 +549,11 @@ function ProblemCard({ icon, color, title, description }: {
   )
 }
 
-function FeatureCard({ icon, title, description, highlight }: {
-  icon: React.ReactNode; title: string; description: string; highlight?: boolean
+function FeatureCard({ icon, title, description }: {
+  icon: React.ReactNode; title: string; description: string
 }) {
   return (
-    <div className={`landing-feature-card ${highlight ? 'highlight' : ''}`}>
+    <div className="landing-feature-card">
       <div className="landing-feature-icon">{icon}</div>
       <h3>{title}</h3>
       <p>{description}</p>
@@ -529,12 +561,13 @@ function FeatureCard({ icon, title, description, highlight }: {
   )
 }
 
-function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured }: {
+function PricingCard({ name, target, amount, period, note, features, btnLabel, btnStyle, featured, plan }: {
   name: string; target: string; amount: string; period?: string; note: string
-  features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean
+  features: string[]; btnLabel: string; btnStyle: 'outline' | 'filled'; featured?: boolean; plan: string
 }) {
   return (
     <div className={`landing-pricing-card ${featured ? 'featured' : ''}`}>
+      {featured && <div className="landing-pricing-badge">Most Popular</div>}
       <div className="landing-pricing-plan-name">{name}</div>
       <div className="landing-pricing-target">{target}</div>
       <div className="landing-pricing-price">
@@ -545,7 +578,7 @@ function PricingCard({ name, target, amount, period, note, features, btnLabel, b
       <ul className="landing-pricing-features">
         {features.map(f => <li key={f}>{f}</li>)}
       </ul>
-      <Link to="/register" className={`landing-pricing-btn ${btnStyle}`}>{btnLabel}</Link>
+      <Link to={`/register?plan=${plan}`} className={`landing-pricing-btn ${btnStyle}`}>{btnLabel}</Link>
     </div>
   )
 }
diff --git a/frontend/src/pages/MyTreesPage.tsx b/frontend/src/pages/MyTreesPage.tsx
index 1ac2251a..242f2e4d 100644
--- a/frontend/src/pages/MyTreesPage.tsx
+++ b/frontend/src/pages/MyTreesPage.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, Link } from 'react-router-dom'
-import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, ChevronDown, Wrench } from 'lucide-react'
+import { Play, Pencil, Share2, Trash2, GitBranch, Clock, TrendingUp, FolderTree, Plus, ListOrdered, Wrench } from 'lucide-react'
 import { PageMeta } from '@/components/common/PageMeta'
 import { StaggerList } from '@/components/common/StaggerList'
 import { Button } from '@/components/ui/Button'
@@ -16,6 +16,7 @@ import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { toast } from '@/lib/toast'
 import { ForkModal } from '@/components/library/ForkModal'
+import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 
 interface TreeWithStats extends TreeListItem {
   lastUsed?: string
@@ -35,7 +36,6 @@ export function MyTreesPage() {
   const [isDeleting, setIsDeleting] = useState(false)
   const [treeToShare, setTreeToShare] = useState<TreeWithStats | null>(null)
   const [showShareModal, setShowShareModal] = useState(false)
-  const [showCreateMenu, setShowCreateMenu] = useState(false)
   const [forkTarget, setForkTarget] = useState<TreeWithStats | null>(null)
 
   useEffect(() => {
@@ -129,55 +129,7 @@ export function MyTreesPage() {
           </p>
         </div>
         {canCreateTrees && (
-          <div className="relative">
-            <Button
-              onClick={() => setShowCreateMenu(!showCreateMenu)}
-            >
-              <Plus className="h-4 w-4" />
-              Create New
-              <ChevronDown className="h-3.5 w-3.5" />
-            </Button>
-            {showCreateMenu && (
-              <>
-                <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
-                <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl">
-                  <Link
-                    to="/trees/new"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <FolderTree className="h-4 w-4 text-muted-foreground" />
-                    <div>
-                      <div className="font-medium">Troubleshooting Tree</div>
-                      <div className="text-xs text-muted-foreground">Branching decision flow</div>
-                    </div>
-                  </Link>
-                  <Link
-                    to="/flows/new"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <ListOrdered className="h-4 w-4 text-muted-foreground" />
-                    <div>
-                      <div className="font-medium">Procedural Flow</div>
-                      <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
-                    </div>
-                  </Link>
-                  <Link
-                    to="/flows/new?type=maintenance"
-                    onClick={() => setShowCreateMenu(false)}
-                    className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
-                  >
-                    <Wrench className="h-4 w-4 text-amber-400" />
-                    <div>
-                      <div className="font-medium">Maintenance Flow</div>
-                      <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
-                    </div>
-                  </Link>
-                </div>
-              </>
-            )}
-          </div>
+          <CreateFlowDropdown label="Create New" />
         )}
       </div>
 
diff --git a/frontend/src/pages/QuickStartPage.tsx b/frontend/src/pages/QuickStartPage.tsx
index dd07ed94..ac931e51 100644
--- a/frontend/src/pages/QuickStartPage.tsx
+++ b/frontend/src/pages/QuickStartPage.tsx
@@ -6,7 +6,6 @@ import { ActiveFlowPilotSessions } from '@/components/dashboard/ActiveFlowPilotS
 import { PerformanceCards } from '@/components/dashboard/PerformanceCards'
 import { KnowledgeBaseCards } from '@/components/dashboard/KnowledgeBaseCards'
 import { TeamSummary } from '@/components/dashboard/TeamSummary'
-import { GreetingStatStrip } from '@/components/dashboard/GreetingStatStrip'
 
 function SectionLabel({ children, action }: { children: React.ReactNode; action?: React.ReactNode }) {
   return (
@@ -37,18 +36,14 @@ export function QuickStartPage() {
     <div className="overflow-y-auto h-full">
       <PageMeta title="ResolutionFlow" />
       <div className="max-w-4xl mx-auto px-6 pt-12 pb-12">
-        {/* Hero: Greeting + Stat Strip */}
-        <div className="flex items-end justify-between mb-8 animate-fade-in-up">
-          <div>
-            <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
-              {dayOfWeek}, {formattedDate}
-            </p>
-            <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-[#f0f2f5] leading-tight">
-              Good {greeting},<br className="hidden sm:block" />
-              {firstName}.
-            </h1>
-          </div>
-          <GreetingStatStrip />
+        {/* Hero: Greeting */}
+        <div className="mb-8 animate-fade-in-up">
+          <p className="font-sans text-xs uppercase tracking-[0.12em] text-muted-foreground mb-1">
+            {dayOfWeek}, {formattedDate}
+          </p>
+          <h1 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight text-[#f0f2f5] leading-tight">
+            Good {greeting}, {firstName}.
+          </h1>
         </div>
 
         {/* Chat-style input */}
diff --git a/frontend/src/pages/ScriptBuilderPage.tsx b/frontend/src/pages/ScriptBuilderPage.tsx
index 31ae7aff..078210a9 100644
--- a/frontend/src/pages/ScriptBuilderPage.tsx
+++ b/frontend/src/pages/ScriptBuilderPage.tsx
@@ -189,6 +189,7 @@ export default function ScriptBuilderPage() {
         <ScriptBuilderInput
           onSend={(content) => handleSend(content)}
           disabled={isLoading}
+          showSuggestions={messages.length === 0}
         />
       </div>
 
diff --git a/frontend/src/pages/ScriptLibraryPage.tsx b/frontend/src/pages/ScriptLibraryPage.tsx
index c550957e..21ee359e 100644
--- a/frontend/src/pages/ScriptLibraryPage.tsx
+++ b/frontend/src/pages/ScriptLibraryPage.tsx
@@ -97,35 +97,37 @@ export default function ScriptLibraryPage() {
         <div>
           <h1 className="text-2xl font-heading font-bold text-foreground">Script Library</h1>
           <p className="text-sm text-muted-foreground mt-1">
-            Browse PowerShell templates, fill in parameters, and generate ready-to-run scripts.
+            Browse templates, fill in parameters, and generate ready-to-run scripts.
           </p>
+        </div>
+        <div className="flex items-center gap-2">
           {isEngineer && (
-            <div className="flex items-center gap-2 mt-2">
+            <>
               <Link
                 to="/scripts/manage"
-                className="inline-flex items-center gap-1.5 text-xs text-primary bg-accent-dim hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors group"
+                className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground px-2.5 py-1.5 rounded-lg transition-colors"
               >
-                <Settings size={12} className="group-hover:rotate-90 transition-transform duration-300" />
-                Manage Templates
+                <Settings size={12} />
+                Manage
               </Link>
               <button
                 type="button"
                 onClick={() => setShowImportPanel(true)}
-                className="inline-flex items-center gap-1.5 text-xs text-primary bg-accent-dim hover:bg-primary/15 px-2.5 py-1 rounded-full transition-colors"
+                className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] transition-colors"
               >
-                <FileUp size={12} />
-                New from Script
+                <FileUp size={14} />
+                Import Script
               </button>
-            </div>
+            </>
           )}
+          <Link
+            to="/script-builder"
+            className="inline-flex items-center gap-2 bg-primary text-white font-semibold rounded-lg px-4 py-2 text-sm hover:brightness-110 active:scale-[0.98] transition-all"
+          >
+            <Wand2 size={14} />
+            Build New Script
+          </Link>
         </div>
-        <Link
-          to="/script-builder"
-          className="inline-flex items-center gap-2 bg-primary text-white font-semibold rounded-lg px-4 py-2 hover:brightness-110 active:scale-[0.98] transition-all"
-        >
-          <Wand2 size={16} />
-          Build a New Script
-        </Link>
       </div>
 
       {/* Tab bar */}
diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index 1a10b230..56699db7 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -17,14 +17,32 @@ import { cn } from '@/lib/utils'
 import { toast } from '@/lib/toast'
 import { getSessionResumePath } from '@/lib/routing'
 
-export function SessionHistoryPage() {
+const PAGE_SIZE = 25
+
+const TABS = [
+  { id: 'ai', label: 'AI Sessions' },
+  { id: 'flows', label: 'Flow Sessions' },
+] as const
+
+type TabId = typeof TABS[number]['id']
+
+export default function SessionHistoryPage() {
   const navigate = useNavigate()
   const [searchParams, setSearchParams] = useSearchParams()
+  const [activeTab, setActiveTab] = useState<TabId>(() => {
+    // If URL params target flow session filters, start on flows tab
+    const hasFlowParams = searchParams.get('ticket') || searchParams.get('client') || searchParams.get('tree')
+    return hasFlowParams ? 'flows' : 'ai'
+  })
 
+  // ── AI Session state ──
   const [aiSessions, setAiSessions] = useState<AISessionSummary[]>([])
   const [aiLoading, setAiLoading] = useState(false)
+  const [aiLoadingMore, setAiLoadingMore] = useState(false)
+  const [aiHasMore, setAiHasMore] = useState(false)
   const [aiSearchInput, setAiSearchInput] = useState('')
   const aiSearchTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const aiFilterGenRef = useRef(0)
   const [aiFilters, setAiFilters] = useState({
     q: '',
     session_type: '',
@@ -34,11 +52,12 @@ export function SessionHistoryPage() {
     date_to: '',
   })
 
+  // ── Flow Session state ──
   const [sessions, setSessions] = useState<Session[]>([])
-  const [hasMore, setHasMore] = useState(false)
+  const [flowLoading, setFlowLoading] = useState(false)
+  const [flowHasMore, setFlowHasMore] = useState(false)
   const [trees, setTrees] = useState<TreeListItem[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [filter, setFilter] = useState<'all' | 'completed' | 'active' | 'prepared'>('active')
+  const [flowTab, setFlowTab] = useState<'all' | 'completed' | 'active' | 'prepared'>('active')
 
   // Close session popover state
   const [closingSessionId, setClosingSessionId] = useState<string | null>(null)
@@ -47,28 +66,19 @@ export function SessionHistoryPage() {
   const [closeLoading, setCloseLoading] = useState(false)
   const closePopoverRef = useRef<HTMLDivElement>(null)
 
-  // Initialize filters from URL params
   const [filters, setFilters] = useState<SessionFilterState>(() => {
     const ticketNumber = searchParams.get('ticket') || ''
     const clientName = searchParams.get('client') || ''
     const treeName = searchParams.get('tree') || ''
     const dateType = (searchParams.get('dateType') || 'started') as 'started' | 'completed'
-
     const from = searchParams.get('from')
     const to = searchParams.get('to')
     const dateRange: DateRange | undefined =
       from && to ? { from: new Date(from), to: new Date(to) } : undefined
-
-    return {
-      ticketNumber,
-      clientName,
-      treeName,
-      dateRange,
-      dateType,
-    }
+    return { ticketNumber, clientName, treeName, dateRange, dateType }
   })
 
-  // Debounce AI search input → aiFilters.q
+  // ── AI Sessions: debounce search ──
   useEffect(() => {
     if (aiSearchTimeout.current) clearTimeout(aiSearchTimeout.current)
     aiSearchTimeout.current = setTimeout(() => {
@@ -77,54 +87,92 @@ export function SessionHistoryPage() {
     return () => { if (aiSearchTimeout.current) clearTimeout(aiSearchTimeout.current) }
   }, [aiSearchInput])
 
-  // Load trees for filter dropdown
-  useEffect(() => {
-    const loadTrees = async () => {
-      try {
-        const treesData = await treesApi.list({})
-        setTrees(treesData)
-      } catch (err) {
-        console.error('Failed to load trees:', err)
-      }
-    }
-    loadTrees()
-  }, [])
-
-  // Load sessions when filters change
+  // ── AI Sessions: fetch ──
   useEffect(() => {
     let cancelled = false
+    const gen = ++aiFilterGenRef.current
+    setAiSessions([])
+    setAiHasMore(false)
+    const load = async () => {
+      setAiLoading(true)
+      try {
+        const data = await aiSessionsApi.listSessions({
+          limit: PAGE_SIZE,
+          q: aiFilters.q || undefined,
+          session_type: aiFilters.session_type || undefined,
+          problem_domain: aiFilters.problem_domain || undefined,
+          confidence_tier: aiFilters.confidence_tier || undefined,
+          date_from: aiFilters.date_from || undefined,
+          date_to: aiFilters.date_to ? `${aiFilters.date_to}T23:59:59.999Z` : undefined,
+        })
+        if (!cancelled && gen === aiFilterGenRef.current) {
+          setAiSessions(data)
+          setAiHasMore(data.length >= PAGE_SIZE)
+        }
+      } catch {
+        if (!cancelled) toast.error('Failed to load AI sessions')
+      } finally {
+        if (!cancelled) setAiLoading(false)
+      }
+    }
+    load()
+    return () => { cancelled = true }
+  }, [aiFilters])
 
-    const loadSessions = async () => {
-      setIsLoading(true)
+  const loadMoreAiSessions = async () => {
+    const gen = aiFilterGenRef.current
+    setAiLoadingMore(true)
+    try {
+      const data = await aiSessionsApi.listSessions({
+        skip: aiSessions.length,
+        limit: PAGE_SIZE,
+        q: aiFilters.q || undefined,
+        session_type: aiFilters.session_type || undefined,
+        problem_domain: aiFilters.problem_domain || undefined,
+        confidence_tier: aiFilters.confidence_tier || undefined,
+        date_from: aiFilters.date_from || undefined,
+        date_to: aiFilters.date_to ? `${aiFilters.date_to}T23:59:59.999Z` : undefined,
+      })
+      if (gen === aiFilterGenRef.current) {
+        setAiSessions(prev => [...prev, ...data])
+        setAiHasMore(data.length >= PAGE_SIZE)
+      }
+    } catch {
+      toast.error('Failed to load more sessions')
+    } finally {
+      setAiLoadingMore(false)
+    }
+  }
+
+  // ── Dynamic problem domains derived from loaded sessions ──
+  const problemDomains = [...new Set(aiSessions.map(s => s.problem_domain).filter(Boolean))] as string[]
+
+  // ── Flow Sessions: load trees ──
+  useEffect(() => {
+    treesApi.list({}).then(setTrees).catch(() => {})
+  }, [])
+
+  // ── Flow Sessions: fetch ──
+  useEffect(() => {
+    if (activeTab !== 'flows') return
+    let cancelled = false
+    const load = async () => {
+      setFlowLoading(true)
       try {
         const params: Record<string, string | boolean> = {}
-
-        // Tab filter (all/active/completed/prepared)
-        if (filter === 'prepared') {
+        if (flowTab === 'prepared') {
           params.status = 'prepared'
-        } else if (filter !== 'all') {
-          params.completed = filter === 'completed'
+        } else if (flowTab !== 'all') {
+          params.completed = flowTab === 'completed'
         }
-
-        // Search/filter params
-        if (filters.ticketNumber) {
-          params.ticket_number = filters.ticketNumber
-        }
-        if (filters.clientName) {
-          params.client_name = filters.clientName
-        }
-        if (filters.treeName) {
-          params.tree_name = filters.treeName
-        }
-
-        // Date range params
+        if (filters.ticketNumber) params.ticket_number = filters.ticketNumber
+        if (filters.clientName) params.client_name = filters.clientName
+        if (filters.treeName) params.tree_name = filters.treeName
         if (filters.dateRange?.from) {
           const fromDate = filters.dateRange.from
           const toDate = filters.dateRange.to || filters.dateRange.from
-          // Set end-of-day on the "to" date so sessions created that day are included
           const toDateEnd = new Date(toDate)
           toDateEnd.setHours(23, 59, 59, 999)
-
           if (filters.dateType === 'started') {
             params.started_after = fromDate.toISOString()
             params.started_before = toDateEnd.toISOString()
@@ -133,29 +181,24 @@ export function SessionHistoryPage() {
             params.completed_before = toDateEnd.toISOString()
           }
         }
-
-        const sessionsData = await sessionsApi.list({ ...params, size: 51 })
+        const data = await sessionsApi.list({ ...params, size: PAGE_SIZE + 1 })
         if (cancelled) return
-        const truncated = sessionsData.length > 50
-        setHasMore(truncated)
-        setSessions(truncated ? sessionsData.slice(0, 50) : sessionsData)
-      } catch (err) {
-        if (cancelled) return
-        toast.error('Failed to load sessions')
-        console.error(err)
+        const truncated = data.length > PAGE_SIZE
+        setFlowHasMore(truncated)
+        setSessions(truncated ? data.slice(0, PAGE_SIZE) : data)
+      } catch {
+        if (!cancelled) toast.error('Failed to load sessions')
       } finally {
-        if (!cancelled) setIsLoading(false)
+        if (!cancelled) setFlowLoading(false)
       }
     }
-
-    loadSessions()
+    load()
     return () => { cancelled = true }
-  }, [filter, filters])
+  }, [activeTab, flowTab, filters])
 
-  // Update URL params when filters change
+  // ── Flow Sessions: URL param sync ──
   useEffect(() => {
     const params = new URLSearchParams()
-
     if (filters.ticketNumber) params.set('ticket', filters.ticketNumber)
     if (filters.clientName) params.set('client', filters.clientName)
     if (filters.treeName) params.set('tree', filters.treeName)
@@ -164,50 +207,10 @@ export function SessionHistoryPage() {
       params.set('to', (filters.dateRange.to || filters.dateRange.from).toISOString())
       params.set('dateType', filters.dateType)
     }
-
     setSearchParams(params, { replace: true })
   }, [filters, setSearchParams])
 
-  // Load AI sessions always
-  useEffect(() => {
-    let cancelled = false
-    const loadAiSessions = async () => {
-      setAiLoading(true)
-      try {
-        const data = await aiSessionsApi.listSessions({
-          limit: 50,
-          q: aiFilters.q || undefined,
-          session_type: aiFilters.session_type || undefined,
-          problem_domain: aiFilters.problem_domain || undefined,
-          confidence_tier: aiFilters.confidence_tier || undefined,
-          date_from: aiFilters.date_from || undefined,
-          date_to: aiFilters.date_to ? `${aiFilters.date_to}T23:59:59.999Z` : undefined,
-        })
-        if (!cancelled) setAiSessions(data)
-      } catch {
-        if (!cancelled) toast.error('Failed to load AI sessions')
-      } finally {
-        if (!cancelled) setAiLoading(false)
-      }
-    }
-    loadAiSessions()
-    return () => { cancelled = true }
-  }, [aiFilters])
-
-  const handleFilterChange = (newFilters: SessionFilterState) => {
-    setFilters(newFilters)
-  }
-
-  const handleClearFilters = () => {
-    setFilters({
-      ticketNumber: '',
-      clientName: '',
-      treeName: '',
-      dateRange: undefined,
-      dateType: 'started',
-    })
-  }
-
+  // ── Close session handlers ──
   const handleCloseSession = useCallback(async () => {
     if (!closingSessionId || !closeOutcome) return
     setCloseLoading(true)
@@ -234,7 +237,6 @@ export function SessionHistoryPage() {
     }
   }, [closingSessionId, closeOutcome, closeNotes])
 
-  // Close popover on click outside
   useEffect(() => {
     if (!closingSessionId) return
     const handleClickOutside = (e: MouseEvent) => {
@@ -248,473 +250,453 @@ export function SessionHistoryPage() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [closingSessionId])
 
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString()
-  }
-
-  const getTreeName = (session: Session): string => {
-    return session.tree_snapshot?.name || 'Unknown Tree'
-  }
+  const handleFilterChange = (newFilters: SessionFilterState) => setFilters(newFilters)
+  const handleClearFilters = () => setFilters({ ticketNumber: '', clientName: '', treeName: '', dateRange: undefined, dateType: 'started' })
 
+  const formatDate = (dateString: string) => new Date(dateString).toLocaleString()
+  const getTreeName = (session: Session): string => session.tree_snapshot?.name || 'Unknown Tree'
   const formatOutcomeLabel = (outcome: Session['outcome']): string => {
     if (!outcome) return 'Not set'
-    const labels: Record<string, string> = {
-      resolved: 'Resolved',
-      escalated: 'Escalated',
-      workaround: 'Workaround',
-      unresolved: 'Unresolved',
-      cancelled: 'Cancelled',
-      resolved_externally: 'Resolved Externally',
-    }
+    const labels: Record<string, string> = { resolved: 'Resolved', escalated: 'Escalated', workaround: 'Workaround', unresolved: 'Unresolved', cancelled: 'Cancelled', resolved_externally: 'Resolved Externally' }
     return labels[outcome] ?? outcome
   }
 
   const hasAiFiltersActive = !!(aiSearchInput || aiFilters.q || aiFilters.session_type || aiFilters.problem_domain || aiFilters.confidence_tier || aiFilters.date_from || aiFilters.date_to)
   const hasFlowFiltersActive = !!(filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from)
 
-  // Determine section visibility
-  const showAiSection = aiLoading || aiSessions.length > 0 || hasAiFiltersActive
-  const showFlowSection = isLoading || sessions.length > 0 || hasFlowFiltersActive
-  const showCombinedEmpty = !showAiSection && !showFlowSection
-
   return (
     <div className="overflow-y-auto h-full">
-    <PageMeta title="Sessions" />
-    <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
-      <div className="mb-8">
-        <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Sessions</h1>
-        <p className="mt-2 text-muted-foreground">
-          View and manage all your sessions
-        </p>
-      </div>
-
-      {showCombinedEmpty && (
-        <EmptyState
-          illustration={<SessionIllustration />}
-          title="No sessions yet"
-          description="Start a flow or FlowPilot session to begin. All your sessions will appear here."
-          action={
-            <div className="flex gap-3">
-              <Link
-                to="/trees"
-                className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
-              >
-                Start a Flow
-              </Link>
-              <Link
-                to="/pilot"
-                className="inline-flex items-center gap-2 rounded-lg border border-border bg-[rgba(255,255,255,0.04)] px-5 py-2.5 text-sm font-semibold text-foreground hover:border-[rgba(255,255,255,0.12)] transition-all"
-              >
-                Start AI Session
-              </Link>
-            </div>
-          }
-          learnMoreLink="/guides/sessions"
-        />
-      )}
-
-      {/* FlowPilot Sessions Section */}
-      {showAiSection && (
-        <>
-          <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">AI Sessions</h2>
-
-          {/* AI Session Filter Bar */}
-          <div className="card-flat p-3 mb-4">
-            <div className="flex flex-wrap gap-3 items-center">
-              {/* Search input */}
-              <div className="relative flex-1 min-w-[180px]">
-                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-                <input
-                  type="text"
-                  value={aiSearchInput}
-                  onChange={(e) => setAiSearchInput(e.target.value)}
-                  placeholder="Search sessions..."
-                  className="w-full rounded-lg border border-border bg-card pl-8 pr-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none"
-                />
-              </div>
-
-              {/* Session type pills */}
-              <div className="flex gap-1">
-                {(['', 'guided', 'chat'] as const).map((t) => (
-                  <button
-                    key={t}
-                    onClick={() => setAiFilters((f) => ({ ...f, session_type: t }))}
-                    className={cn(
-                      'rounded-full border px-3 py-1 text-xs font-sans transition-colors',
-                      aiFilters.session_type === t
-                        ? 'bg-accent-dim text-foreground border-primary/30'
-                        : 'bg-card text-muted-foreground border-border hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
-                    )}
-                  >
-                    {t === '' ? 'All' : t === 'guided' ? 'Guided' : 'Chat'}
-                  </button>
-                ))}
-              </div>
-
-              {/* Problem domain dropdown */}
-              <select
-                value={aiFilters.problem_domain}
-                onChange={(e) => setAiFilters((f) => ({ ...f, problem_domain: e.target.value }))}
-                title="Filter by problem domain"
-                className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
-              >
-                <option value="">All domains</option>
-                <option value="Active Directory">Active Directory</option>
-                <option value="Networking">Networking</option>
-                <option value="Microsoft 365">Microsoft 365</option>
-                <option value="Hardware">Hardware</option>
-                <option value="Security">Security</option>
-                <option value="Email">Email</option>
-                <option value="Printing">Printing</option>
-                <option value="VPN / Remote Access">VPN / Remote Access</option>
-                <option value="Cloud Services">Cloud Services</option>
-                <option value="Other">Other</option>
-              </select>
-
-              {/* Confidence tier pills */}
-              <div className="flex gap-1">
-                {(['', 'guided', 'exploring', 'discovery'] as const).map((tier) => (
-                  <button
-                    key={tier}
-                    onClick={() => setAiFilters((f) => ({ ...f, confidence_tier: tier }))}
-                    className={cn(
-                      'rounded-full border px-3 py-1 text-xs font-sans text-xs transition-colors',
-                      aiFilters.confidence_tier === tier
-                        ? 'bg-accent-dim text-foreground border-primary/30'
-                        : 'bg-card text-muted-foreground border-border hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
-                    )}
-                  >
-                    {tier === '' ? 'All' : tier.charAt(0).toUpperCase() + tier.slice(1)}
-                  </button>
-                ))}
-              </div>
-
-              {/* Date range inputs */}
-              <div className="flex items-center gap-2">
-                <input
-                  type="date"
-                  value={aiFilters.date_from}
-                  onChange={(e) => setAiFilters((f) => ({ ...f, date_from: e.target.value }))}
-                  title="From date"
-                  className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none [color-scheme:dark]"
-                />
-                <span className="text-xs text-muted-foreground">to</span>
-                <input
-                  type="date"
-                  value={aiFilters.date_to}
-                  onChange={(e) => setAiFilters((f) => ({ ...f, date_to: e.target.value }))}
-                  title="To date"
-                  className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none [color-scheme:dark]"
-                />
-              </div>
-
-              {/* Clear filters */}
-              {hasAiFiltersActive && (
-                <button
-                  onClick={() => {
-                    setAiSearchInput('')
-                    setAiFilters({ q: '', session_type: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
-                  }}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  Clear
-                </button>
-              )}
-            </div>
-          </div>
-
-          {aiLoading ? (
-            <div className="flex justify-center py-12">
-              <Spinner />
-            </div>
-          ) : aiSessions.length === 0 ? (
-            <EmptyState
-              title="No sessions match your filters"
-              description="Try adjusting your search or filters."
-              action={
-                <button
-                  onClick={() => {
-                    setAiSearchInput('')
-                    setAiFilters({ q: '', session_type: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
-                  }}
-                  className="text-foreground hover:underline text-sm"
-                >
-                  Clear all filters
-                </button>
-              }
-            />
-          ) : (
-            <div className="space-y-2">
-              {aiSessions.map((s) => (
-                <AISessionListItem key={s.id} session={s} />
-              ))}
-            </div>
-          )}
-
-          {/* Divider between sections */}
-          {showFlowSection && (
-            <div className="my-8 border-t border-border" />
-          )}
-        </>
-      )}
-
-      {/* Flow Sessions Section */}
-      {showFlowSection && (
-      <>
-      <h2 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">Flow Sessions</h2>
-
-      {/* Filter Tabs */}
-      <div className="mb-6 flex gap-2 border-b border-border">
-        {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setFilter(tab)}
-            className={cn(
-              'px-4 py-2 text-sm font-medium transition-colors',
-              filter === tab
-                ? 'border-b-2 border-primary text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            {tab.charAt(0).toUpperCase() + tab.slice(1)}
-          </button>
-        ))}
-      </div>
-
-      <div className="mb-6">
-        <SessionFilters
-          filters={filters}
-          onChange={handleFilterChange}
-          onClear={handleClearFilters}
-          trees={trees}
-        />
-      </div>
-
-      {/* Loading State */}
-      {isLoading ? (
-        <div className="flex justify-center py-12">
-          <Spinner />
+      <PageMeta title="Sessions" />
+      <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
+        {/* Page heading */}
+        <div className="mb-6">
+          <h1 className="text-2xl font-heading font-bold text-foreground sm:text-3xl">Session History</h1>
+          <p className="mt-1 text-sm text-muted-foreground">View and manage your sessions</p>
         </div>
-      ) : sessions.length === 0 ? (
-        (filters.ticketNumber || filters.clientName || filters.treeName || filters.dateRange?.from) ? (
-          <EmptyState
-            title="No sessions match your filters"
-            description="Try adjusting your search or filters."
-            action={
-              <button onClick={handleClearFilters} className="text-foreground hover:underline text-sm">
-                Clear all filters
-              </button>
-            }
-          />
-        ) : (
-          <EmptyState
-            illustration={<SessionIllustration />}
-            title="Your session history will appear here"
-            description="Every troubleshooting session is recorded with decisions, timing, and outcomes — ready for export or review."
-            action={
-              <Link
-                to="/trees"
-                className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
-              >
-                Start a Session
-              </Link>
-            }
-            learnMoreLink="/guides/sessions"
-          />
-        )
-      ) : (
-        <>
-        <div className="space-y-4">
-          {sessions.map((session, i) => (
-            <div
-              key={session.id}
+
+        {/* Tab bar */}
+        <div className="flex gap-1 border-b border-border mb-6 overflow-x-auto">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
               className={cn(
-                'stagger-item',
-                closingSessionId === session.id && 'relative z-50'
+                'px-4 py-2 text-sm transition-colors whitespace-nowrap',
+                activeTab === tab.id
+                  ? 'border-b-2 border-primary text-foreground font-medium'
+                  : 'text-muted-foreground hover:text-foreground'
               )}
-              style={{ '--stagger-index': i } as React.CSSProperties}
             >
-            <div
-              className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
-            >
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                <div className="flex-1">
-                  {/* Status and Ticket/Client */}
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span
-                      className={cn(
-                        'inline-block h-2.5 w-2.5 rounded-full',
-                        session.completed_at ? 'bg-green-500' : 'bg-yellow-500'
-                      )}
-                    />
-                    <span className="font-medium text-foreground">
-                      {session.ticket_number || 'No ticket'}
-                    </span>
-                    {session.client_name && (
-                      <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs font-medium text-foreground">
-                        {session.client_name}
-                      </span>
-                    )}
-                    {session.completed_at && (
-                      <span
-                        className={cn(
-                          'rounded-full px-2.5 py-0.5 text-xs font-medium',
-                          session.outcome === 'resolved' && 'bg-emerald-500/20 text-emerald-300',
-                          session.outcome === 'workaround' && 'bg-amber-500/20 text-amber-300',
-                          session.outcome === 'escalated' && 'bg-blue-500/20 text-blue-300',
-                          session.outcome === 'unresolved' && 'bg-rose-500/20 text-rose-300',
-                          session.outcome === 'cancelled' && 'bg-zinc-500/20 text-zinc-300',
-                          session.outcome === 'resolved_externally' && 'bg-blue-500/20 text-blue-300',
-                          !session.outcome && 'bg-accent text-muted-foreground'
-                        )}
-                      >
-                        {formatOutcomeLabel(session.outcome)}
-                      </span>
-                    )}
-                  </div>
-
-                  {/* Tree Name */}
-                  <p className="mt-1 text-sm text-muted-foreground">
-                    <span className="font-medium">Tree:</span> {getTreeName(session)}
-                  </p>
-
-                  {/* Timestamps */}
-                  <p className="mt-1 text-sm text-muted-foreground">
-                    Started: {session.started_at ? formatDate(session.started_at) : 'Not started'}
-                    {session.completed_at && (
-                      <> · Completed: {formatDate(session.completed_at)}</>
-                    )}
-                  </p>
-
-                  {/* Stats */}
-                  <p className="mt-1 text-sm text-muted-foreground">
-                    {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
-                    {session.scratchpad && session.scratchpad.trim() && (
-                      <span> · Has notes</span>
-                    )}
-                  </p>
-                </div>
-
-                {/* Actions */}
-                <div className="relative flex gap-2">
-                  <button
-                    onClick={() => navigate(`/sessions/${session.id}`)}
-                    className={cn(
-                      'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
-                      'hover:bg-accent hover:text-foreground'
-                    )}
-                  >
-                    View Details
-                  </button>
-                  {!session.completed_at && session.started_at && (
-                    <>
-                      <button
-                        onClick={() => {
-                          setClosingSessionId(closingSessionId === session.id ? null : session.id)
-                          setCloseOutcome('')
-                          setCloseNotes('')
-                        }}
-                        className={cn(
-                          'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground',
-                          'hover:bg-accent hover:text-foreground',
-                          closingSessionId === session.id && 'bg-accent text-foreground'
-                        )}
-                      >
-                        Close
-                      </button>
-                      <button
-                        onClick={() => navigate(getSessionResumePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
-                        className={cn(
-                          'rounded-md bg-primary px-3 py-2 text-sm font-medium text-white',
-                          'hover:brightness-110'
-                        )}
-                      >
-                        Resume
-                      </button>
-                    </>
-                  )}
-
-                  {/* Close Session Popover */}
-                  {closingSessionId === session.id && (
-                    <div
-                      ref={closePopoverRef}
-                      className="absolute right-0 top-full z-20 mt-2 w-72 rounded-xl border border-border bg-card p-4 shadow-xl"
-                    >
-                      <p className="text-sm font-heading font-medium text-foreground mb-3">Close Session</p>
-
-                      <label className="block text-xs font-sans text-xs text-muted-foreground mb-1">Outcome</label>
-                      <select
-                        value={closeOutcome}
-                        onChange={(e) => setCloseOutcome(e.target.value as SessionOutcome)}
-                        title="Session outcome"
-                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none mb-3"
-                      >
-                        <option value="">Select outcome...</option>
-                        <option value="resolved">Resolved</option>
-                        <option value="escalated">Escalated</option>
-                        <option value="workaround">Workaround</option>
-                        <option value="unresolved">Unresolved</option>
-                        <option value="cancelled">Cancelled</option>
-                        <option value="resolved_externally">Resolved Externally</option>
-                      </select>
-
-                      <label className="block text-xs font-sans text-xs text-muted-foreground mb-1">Notes (optional)</label>
-                      <textarea
-                        value={closeNotes}
-                        onChange={(e) => setCloseNotes(e.target.value)}
-                        rows={2}
-                        placeholder="Add closure notes..."
-                        className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(96,165,250,0.3)] focus:outline-none resize-none mb-3"
-                      />
-
-                      <div className="flex items-center justify-end gap-2">
-                        <button
-                          onClick={() => {
-                            setClosingSessionId(null)
-                            setCloseOutcome('')
-                            setCloseNotes('')
-                          }}
-                          className="rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
-                        >
-                          Cancel
-                        </button>
-                        <button
-                          onClick={handleCloseSession}
-                          disabled={!closeOutcome || closeLoading}
-                          className={cn(
-                            'rounded-lg px-4 py-1.5 text-sm font-medium transition-opacity',
-                            closeOutcome
-                              ? 'bg-primary text-white hover:brightness-110'
-                              : 'bg-primary text-white opacity-50 cursor-not-allowed'
-                          )}
-                        >
-                          {closeLoading ? 'Closing...' : 'Confirm'}
-                        </button>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-            </div>
+              {tab.label}
+            </button>
           ))}
         </div>
-        {hasMore ? (
-          <p className="text-center text-sm text-muted-foreground py-4">
-            Showing the 50 most recent sessions
-          </p>
-        ) : sessions.length > 0 ? (
-          <p className="text-center text-sm text-muted-foreground py-4">
-            Showing all {sessions.length} sessions
-          </p>
-        ) : null}
-        </>
-      )}
-      </>
-      )}
-    </div>
+
+        {/* ════════ AI Sessions Tab ════════ */}
+        {activeTab === 'ai' && (
+          <>
+            {/* AI Session Filter Bar */}
+            <div className="card-flat p-3 mb-4">
+              <div className="flex flex-wrap gap-3 items-center">
+                {/* Search input */}
+                <div className="relative flex-1 min-w-[180px]">
+                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+                  <input
+                    type="text"
+                    value={aiSearchInput}
+                    onChange={(e) => setAiSearchInput(e.target.value)}
+                    placeholder="Search sessions..."
+                    className="w-full rounded-lg border border-border bg-card pl-8 pr-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none"
+                  />
+                </div>
+
+                {/* Session type pills */}
+                <div className="flex gap-1">
+                  {(['', 'guided', 'chat'] as const).map((t) => (
+                    <button
+                      key={t}
+                      onClick={() => setAiFilters((f) => ({ ...f, session_type: t }))}
+                      className={cn(
+                        'rounded-full border px-3 py-1 text-xs font-sans transition-colors',
+                        aiFilters.session_type === t
+                          ? 'bg-accent-dim text-foreground border-primary/30'
+                          : 'bg-card text-muted-foreground border-border hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+                      )}
+                    >
+                      {t === '' ? 'All' : t === 'guided' ? 'Guided' : 'Chat'}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Problem domain dropdown — dynamic */}
+                <select
+                  value={aiFilters.problem_domain}
+                  onChange={(e) => setAiFilters((f) => ({ ...f, problem_domain: e.target.value }))}
+                  title="Filter by problem domain"
+                  className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none [&>option]:bg-card [&>option]:text-foreground"
+                >
+                  <option value="">All domains</option>
+                  {problemDomains.map((d) => (
+                    <option key={d} value={d}>{d}</option>
+                  ))}
+                </select>
+
+                {/* Confidence tier pills */}
+                <div className="flex gap-1">
+                  {(['', 'guided', 'exploring', 'discovery'] as const).map((tier) => (
+                    <button
+                      key={tier}
+                      onClick={() => setAiFilters((f) => ({ ...f, confidence_tier: tier }))}
+                      className={cn(
+                        'rounded-full border px-3 py-1 text-xs font-sans transition-colors',
+                        aiFilters.confidence_tier === tier
+                          ? 'bg-accent-dim text-foreground border-primary/30'
+                          : 'bg-card text-muted-foreground border-border hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+                      )}
+                    >
+                      {tier === '' ? 'All' : tier.charAt(0).toUpperCase() + tier.slice(1)}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Date range inputs */}
+                <div className="flex items-center gap-2">
+                  <input
+                    type="date"
+                    value={aiFilters.date_from}
+                    onChange={(e) => setAiFilters((f) => ({ ...f, date_from: e.target.value }))}
+                    title="From date"
+                    className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none [color-scheme:dark]"
+                  />
+                  <span className="text-xs text-muted-foreground">to</span>
+                  <input
+                    type="date"
+                    value={aiFilters.date_to}
+                    onChange={(e) => setAiFilters((f) => ({ ...f, date_to: e.target.value }))}
+                    title="To date"
+                    className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none [color-scheme:dark]"
+                  />
+                </div>
+
+                {/* Clear filters */}
+                {hasAiFiltersActive && (
+                  <button
+                    onClick={() => {
+                      setAiSearchInput('')
+                      setAiFilters({ q: '', session_type: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
+                    }}
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    Clear
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* AI Session list */}
+            {aiLoading ? (
+              <div className="flex justify-center py-12">
+                <Spinner />
+              </div>
+            ) : aiSessions.length === 0 ? (
+              hasAiFiltersActive ? (
+                <EmptyState
+                  title="No sessions match your filters"
+                  description="Try adjusting your search or filters."
+                  action={
+                    <button
+                      onClick={() => {
+                        setAiSearchInput('')
+                        setAiFilters({ q: '', session_type: '', problem_domain: '', confidence_tier: '', date_from: '', date_to: '' })
+                      }}
+                      className="text-foreground hover:underline text-sm"
+                    >
+                      Clear all filters
+                    </button>
+                  }
+                />
+              ) : (
+                <EmptyState
+                  illustration={<SessionIllustration />}
+                  title="No AI sessions yet"
+                  description="Start a FlowPilot or chat session to begin. All your sessions will appear here."
+                  action={
+                    <Link
+                      to="/"
+                      className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                    >
+                      Start a Session
+                    </Link>
+                  }
+                />
+              )
+            ) : (
+              <>
+                <div className="space-y-2">
+                  {aiSessions.map((s) => (
+                    <AISessionListItem key={s.id} session={s} />
+                  ))}
+                </div>
+
+                {/* Load more / count */}
+                <div className="text-center py-4">
+                  {aiHasMore ? (
+                    <button
+                      onClick={loadMoreAiSessions}
+                      disabled={aiLoadingMore}
+                      className="inline-flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:border-[var(--color-border-hover)] transition-colors disabled:opacity-50"
+                    >
+                      {aiLoadingMore ? <Spinner className="h-3.5 w-3.5" /> : null}
+                      {aiLoadingMore ? 'Loading...' : 'Load more sessions'}
+                    </button>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      Showing all {aiSessions.length} session{aiSessions.length !== 1 ? 's' : ''}
+                    </p>
+                  )}
+                </div>
+              </>
+            )}
+          </>
+        )}
+
+        {/* ════════ Flow Sessions Tab ════════ */}
+        {activeTab === 'flows' && (
+          <>
+            {/* Flow tab sub-filters */}
+            <div className="mb-6 flex gap-2 border-b border-border">
+              {(['active', 'prepared', 'completed', 'all'] as const).map((tab) => (
+                <button
+                  key={tab}
+                  onClick={() => setFlowTab(tab)}
+                  className={cn(
+                    'px-4 py-2 text-sm font-medium transition-colors',
+                    flowTab === tab
+                      ? 'border-b-2 border-primary text-foreground'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  {tab.charAt(0).toUpperCase() + tab.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            <div className="mb-6">
+              <SessionFilters
+                filters={filters}
+                onChange={handleFilterChange}
+                onClear={handleClearFilters}
+                trees={trees}
+              />
+            </div>
+
+            {/* Flow session list */}
+            {flowLoading ? (
+              <div className="flex justify-center py-12">
+                <Spinner />
+              </div>
+            ) : sessions.length === 0 ? (
+              hasFlowFiltersActive ? (
+                <EmptyState
+                  title="No sessions match your filters"
+                  description="Try adjusting your search or filters."
+                  action={
+                    <button onClick={handleClearFilters} className="text-foreground hover:underline text-sm">
+                      Clear all filters
+                    </button>
+                  }
+                />
+              ) : (
+                <EmptyState
+                  illustration={<SessionIllustration />}
+                  title="Your flow sessions will appear here"
+                  description="Every troubleshooting session is recorded with decisions, timing, and outcomes."
+                  action={
+                    <Link
+                      to="/trees"
+                      className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
+                    >
+                      Start a Flow
+                    </Link>
+                  }
+                />
+              )
+            ) : (
+              <>
+                <div className="space-y-4">
+                  {sessions.map((session, i) => (
+                    <div
+                      key={session.id}
+                      className={cn(
+                        'stagger-item',
+                        closingSessionId === session.id && 'relative z-50'
+                      )}
+                      style={{ '--stagger-index': i } as React.CSSProperties}
+                    >
+                      <div className="bg-card border border-border rounded-xl p-4 transition-all hover:border-[var(--color-border-hover)]">
+                        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+                          <div className="flex-1">
+                            <div className="flex flex-wrap items-center gap-2">
+                              <span
+                                className={cn(
+                                  'inline-block h-2.5 w-2.5 rounded-full',
+                                  session.completed_at ? 'bg-success' : 'bg-warning'
+                                )}
+                              />
+                              <span className="font-medium text-foreground">
+                                {session.ticket_number || 'No ticket'}
+                              </span>
+                              {session.client_name && (
+                                <span className="rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-medium text-accent-text">
+                                  {session.client_name}
+                                </span>
+                              )}
+                              {session.completed_at && (
+                                <span
+                                  className={cn(
+                                    'rounded-full px-2.5 py-0.5 text-xs font-medium',
+                                    session.outcome === 'resolved' && 'bg-success-dim text-success',
+                                    session.outcome === 'workaround' && 'bg-warning-dim text-warning',
+                                    session.outcome === 'escalated' && 'bg-warning-dim text-warning',
+                                    session.outcome === 'unresolved' && 'bg-danger-dim text-danger',
+                                    session.outcome === 'cancelled' && 'bg-[rgba(255,255,255,0.06)] text-muted-foreground',
+                                    session.outcome === 'resolved_externally' && 'bg-success-dim text-success',
+                                    !session.outcome && 'bg-[rgba(255,255,255,0.06)] text-muted-foreground'
+                                  )}
+                                >
+                                  {formatOutcomeLabel(session.outcome)}
+                                </span>
+                              )}
+                            </div>
+
+                            <p className="mt-1 text-sm text-muted-foreground">
+                              <span className="font-medium">Tree:</span> {getTreeName(session)}
+                            </p>
+                            <p className="mt-1 text-sm text-muted-foreground">
+                              Started: {session.started_at ? formatDate(session.started_at) : 'Not started'}
+                              {session.completed_at && (
+                                <> · Completed: {formatDate(session.completed_at)}</>
+                              )}
+                            </p>
+                            <p className="mt-1 text-sm text-muted-foreground">
+                              {session.decisions.length} decision{session.decisions.length !== 1 ? 's' : ''} recorded
+                              {session.scratchpad && session.scratchpad.trim() && (
+                                <span> · Has notes</span>
+                              )}
+                            </p>
+                          </div>
+
+                          {/* Actions */}
+                          <div className="relative flex gap-2">
+                            <button
+                              onClick={() => navigate(`/sessions/${session.id}`)}
+                              className="rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-[var(--color-bg-elevated)] hover:text-foreground transition-colors"
+                            >
+                              View Details
+                            </button>
+                            {!session.completed_at && session.started_at && (
+                              <>
+                                <button
+                                  onClick={() => {
+                                    setClosingSessionId(closingSessionId === session.id ? null : session.id)
+                                    setCloseOutcome('')
+                                    setCloseNotes('')
+                                  }}
+                                  className={cn(
+                                    'rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-[var(--color-bg-elevated)] hover:text-foreground transition-colors',
+                                    closingSessionId === session.id && 'bg-[var(--color-bg-elevated)] text-foreground'
+                                  )}
+                                >
+                                  Close
+                                </button>
+                                <button
+                                  onClick={() => navigate(getSessionResumePath(session.tree_id, session.tree_snapshot?.tree_type), { state: { sessionId: session.id } })}
+                                  className="rounded-md bg-primary px-3 py-2 text-sm font-medium text-white hover:brightness-110 transition-all"
+                                >
+                                  Resume
+                                </button>
+                              </>
+                            )}
+
+                            {/* Close Session Popover */}
+                            {closingSessionId === session.id && (
+                              <div
+                                ref={closePopoverRef}
+                                className="absolute right-0 top-full z-20 mt-2 w-72 rounded-xl border border-border bg-card p-4 shadow-xl"
+                              >
+                                <p className="text-sm font-heading font-medium text-foreground mb-3">Close Session</p>
+
+                                <label className="block text-[0.625rem] font-sans uppercase tracking-[0.1em] text-muted-foreground mb-1">Outcome</label>
+                                <select
+                                  value={closeOutcome}
+                                  onChange={(e) => setCloseOutcome(e.target.value as SessionOutcome)}
+                                  title="Session outcome"
+                                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none mb-3"
+                                >
+                                  <option value="">Select outcome...</option>
+                                  <option value="resolved">Resolved</option>
+                                  <option value="escalated">Escalated</option>
+                                  <option value="workaround">Workaround</option>
+                                  <option value="unresolved">Unresolved</option>
+                                  <option value="cancelled">Cancelled</option>
+                                  <option value="resolved_externally">Resolved Externally</option>
+                                </select>
+
+                                <label className="block text-[0.625rem] font-sans uppercase tracking-[0.1em] text-muted-foreground mb-1">Notes (optional)</label>
+                                <textarea
+                                  value={closeNotes}
+                                  onChange={(e) => setCloseNotes(e.target.value)}
+                                  rows={2}
+                                  placeholder="Add closure notes..."
+                                  className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(249,115,22,0.25)] focus:ring-1 focus:ring-[rgba(249,115,22,0.1)] focus:outline-none resize-none mb-3"
+                                />
+
+                                <div className="flex items-center justify-end gap-2">
+                                  <button
+                                    onClick={() => { setClosingSessionId(null); setCloseOutcome(''); setCloseNotes('') }}
+                                    className="rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-[var(--color-bg-elevated)] hover:text-foreground transition-colors"
+                                  >
+                                    Cancel
+                                  </button>
+                                  <button
+                                    onClick={handleCloseSession}
+                                    disabled={!closeOutcome || closeLoading}
+                                    className={cn(
+                                      'rounded-lg px-4 py-1.5 text-sm font-medium transition-opacity',
+                                      closeOutcome
+                                        ? 'bg-primary text-white hover:brightness-110'
+                                        : 'bg-primary text-white opacity-50 cursor-not-allowed'
+                                    )}
+                                  >
+                                    {closeLoading ? 'Closing...' : 'Confirm'}
+                                  </button>
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Load more / count */}
+                <div className="text-center py-4">
+                  {flowHasMore ? (
+                    <p className="text-sm text-muted-foreground">
+                      Showing the {sessions.length} most recent sessions
+                    </p>
+                  ) : sessions.length > 0 ? (
+                    <p className="text-sm text-muted-foreground">
+                      Showing all {sessions.length} session{sessions.length !== 1 ? 's' : ''}
+                    </p>
+                  ) : null}
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </div>
     </div>
   )
 }
-
-export default SessionHistoryPage
diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 50f5e2ac..594893d4 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -25,7 +25,6 @@ import { cn, safeGetItem } from '@/lib/utils'
 import { getSessionResumePath, getTreeNavigatePath } from '@/lib/routing'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useUserPreferencesStore } from '@/store/userPreferencesStore'
-import { useCachedQuota } from '@/hooks/useCachedQuota'
 import { CreateFlowDropdown } from '@/components/common/CreateFlowDropdown'
 import { Spinner } from '@/components/common/Spinner'
 import { EmptyState } from '@/components/common/EmptyState'
@@ -94,7 +93,6 @@ export function TreeLibraryPage() {
 
   // AI builder state
 
-  const { aiEnabled } = useCachedQuota()
 
   // Repeat Last Session
   const lastSessionData = (() => {
@@ -311,11 +309,7 @@ export function TreeLibraryPage() {
                   <FileUp className="h-4 w-4" />
                   Import
                 </Button>
-                <CreateFlowDropdown
-                  aiEnabled={aiEnabled}
-
-                  label="Create New"
-                />
+                <CreateFlowDropdown label="Create New" />
               </div>
             )}
           </div>
@@ -512,7 +506,7 @@ export function TreeLibraryPage() {
                 description="Flows guide your team through proven resolution paths, capturing every decision along the way."
                 action={
                   canCreateTrees ? (
-                    <CreateFlowDropdown aiEnabled={aiEnabled} label="Create a Flow" />
+                    <CreateFlowDropdown label="Create a Flow" />
                   ) : undefined
                 }
                 learnMoreLink="/guides/creating-flows"
diff --git a/frontend/src/styles/landing.css b/frontend/src/styles/landing.css
index c2bdc99d..56f36fc1 100644
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -1,54 +1,67 @@
 /* ============================================
-   RESOLUTIONFLOW LANDING PAGE — Design System v4
-   All classes prefixed with landing- to avoid
-   collisions with the main app styles.
+   RESOLUTIONFLOW LANDING PAGE
+   Self-contained styles. No dependency on theme
+   variables that may resolve incorrectly.
    ============================================ */
 
+/* ---- LANDING COLOR PALETTE ---- */
+.landing-page {
+  --lp-bg: #14161d;
+  --lp-bg-alt: #181a22;
+  --lp-card: #1e2028;
+  --lp-elevated: #262830;
+  --lp-border: #2a2e3a;
+  --lp-border-hover: #3a3f4e;
+  --lp-text-heading: #f0f2f5;
+  --lp-text-body: #d0d4dc;
+  --lp-text-secondary: #9198a8;
+  --lp-text-dim: #636b7e;
+  --lp-accent: #60a5fa;
+  --lp-accent-soft: rgba(96, 165, 250, 0.10);
+  --lp-accent-text: #93bbfc;
+  --lp-btn: #60a5fa;
+  --lp-success: #34d399;
+  --lp-danger: #f87171;
+  --lp-warning: #fbbf24;
+}
+
+/* ---- BASE ---- */
 .landing-page {
   font-family: 'IBM Plex Sans', sans-serif;
-  background: var(--color-bg-page);
-  color: var(--color-text-primary);
+  background: var(--lp-bg);
+  color: var(--lp-text-body);
   line-height: 1.6;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   min-height: 100vh;
 }
 
-/* ---- AMBIENT BACKGROUND ---- */
-/* Subtle top glow only — no animated pulses or blur */
-.landing-ambient-glow {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  overflow: hidden;
-  background: radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.12) 0%, transparent 60%);
-}
-
-.landing-ambient-glow::before,
-.landing-ambient-glow::after {
-  display: none;
-}
-
-/* ---- GRID PATTERN ---- */
-.landing-grid-pattern {
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background-image:
-    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
-  background-size: 64px 64px;
-  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 70%);
-}
-
-.landing-page-content {
+.landing-main {
   position: relative;
   z-index: 1;
   overflow-x: hidden;
 }
 
+/* ---- SKIP LINK ---- */
+.landing-skip-link {
+  position: absolute;
+  top: -100px;
+  left: 16px;
+  z-index: 200;
+  padding: 8px 16px;
+  background: var(--lp-accent);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 0 0 8px 8px;
+  text-decoration: none;
+  transition: top 0.2s;
+}
+
+.landing-skip-link:focus {
+  top: 0;
+}
+
 /* ---- NAVIGATION ---- */
 .landing-nav {
   position: fixed;
@@ -57,12 +70,13 @@
   right: 0;
   z-index: 100;
   padding: 0 2rem;
-  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
 }
 
 .landing-nav.scrolled {
-  background: rgba(26, 28, 35, 0.95);
-  border-bottom: 1px solid var(--color-border-default);
+  background: rgba(20, 22, 29, 0.95);
+  border-bottom: 1px solid var(--lp-border);
+  backdrop-filter: blur(8px);
 }
 
 .landing-nav-inner {
@@ -84,8 +98,8 @@
 .landing-nav-logo-icon {
   width: 36px;
   height: 36px;
-  background: var(--color-accent);
-  border-radius: 10px;
+  background: var(--lp-btn);
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -100,12 +114,12 @@
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: var(--color-text-primary);
+  color: var(--lp-text-heading);
   letter-spacing: -0.02em;
 }
 
 .landing-nav-wordmark span {
-  color: var(--color-accent-text);
+  color: var(--lp-accent-text);
 }
 
 .landing-nav-links {
@@ -120,7 +134,7 @@
 .landing-nav-links a {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--lp-text-secondary);
   text-decoration: none;
   transition: color 0.2s;
   letter-spacing: 0.01em;
@@ -128,7 +142,7 @@
 }
 
 .landing-nav-links a:hover {
-  color: var(--color-text-primary);
+  color: var(--lp-text-heading);
 }
 
 .landing-nav-cta {
@@ -140,7 +154,7 @@
 .landing-btn-ghost {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--lp-text-secondary);
   text-decoration: none;
   padding: 0.5rem 1rem;
   border-radius: 8px;
@@ -148,7 +162,7 @@
 }
 
 .landing-btn-ghost:hover {
-  color: var(--color-text-primary);
+  color: var(--lp-text-heading);
   background: rgba(255, 255, 255, 0.06);
 }
 
@@ -159,7 +173,7 @@
   text-decoration: none;
   padding: 0.55rem 1.25rem;
   border-radius: 8px;
-  background: var(--color-accent);
+  background: var(--lp-btn);
   transition: opacity 0.25s, transform 0.25s;
   letter-spacing: -0.01em;
   border: none;
@@ -171,411 +185,13 @@
   transform: translateY(-1px);
 }
 
-/* ---- HERO ---- */
-.landing-hero {
-  padding: 10rem 2rem 6rem;
-  text-align: center;
-  max-width: 900px;
-  margin: 0 auto;
+/* ---- SECTIONS ---- */
+.landing-section {
+  padding: 5rem 2rem;
 }
 
-.landing-hero-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  border-radius: 100px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-accent-text);
-  margin-bottom: 2rem;
-  letter-spacing: 0.03em;
-  animation: landingFadeInDown 0.8s ease-out;
-}
-
-.landing-hero-badge::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--color-accent);
-  animation: landingPulse 2s ease-in-out infinite;
-}
-
-@keyframes landingPulse {
-
-  0%,
-  100% {
-    opacity: 0.5;
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-.landing-hero h1 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(2.75rem, 6vw, 4.25rem);
-  font-weight: 800;
-  line-height: 1.08;
-  letter-spacing: -0.035em;
-  margin-bottom: 1.5rem;
-  animation: landingFadeInUp 0.8s ease-out 0.15s both;
-}
-
-.landing-gradient-text {
-  color: var(--color-accent-text);
-}
-
-.landing-hero-sub {
-  font-size: 1.2rem;
-  font-weight: 400;
-  color: var(--color-text-secondary);
-  line-height: 1.7;
-  max-width: 600px;
-  margin: 0 auto 2.5rem;
-  animation: landingFadeInUp 0.8s ease-out 0.3s both;
-}
-
-.landing-hero-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  animation: landingFadeInUp 0.8s ease-out 0.45s both;
-}
-
-.landing-btn-hero-primary {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #fff;
-  text-decoration: none;
-  padding: 0.85rem 2rem;
-  border-radius: 10px;
-  background: var(--color-accent);
-  transition: opacity 0.3s, transform 0.3s;
-  letter-spacing: -0.01em;
-  border: none;
-  cursor: pointer;
-}
-
-.landing-btn-hero-primary:hover {
-  opacity: 0.9;
-  transform: translateY(-2px);
-}
-
-.landing-btn-hero-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.landing-btn-hero-secondary {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  padding: 0.85rem 2rem;
-  border-radius: 10px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  transition: background 0.3s, border-color 0.3s, color 0.3s;
-}
-
-.landing-btn-hero-secondary:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.1);
-  color: var(--color-text-primary);
-}
-
-/* ---- SOCIAL PROOF BAR ---- */
-.landing-social-proof-bar {
-  text-align: center;
-  padding: 3rem 2rem 1rem;
-  animation: landingFadeInUp 0.8s ease-out 0.6s both;
-}
-
-.landing-social-proof-bar>p {
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.75rem;
-  color: #5a6170;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  margin-bottom: 1.5rem;
-}
-
-.landing-proof-stats {
-  display: flex;
-  justify-content: center;
-  gap: 3rem;
-  flex-wrap: wrap;
-}
-
-.landing-proof-stat {
-  text-align: center;
-}
-
-.landing-proof-stat .number {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--color-accent-text);
-}
-
-.landing-proof-stat .label {
-  font-size: 0.8rem;
-  color: #5a6170;
-  margin-top: 0.25rem;
-}
-
-/* ---- APP PREVIEW ---- */
-.landing-app-preview {
-  max-width: 1000px;
-  margin: 3rem auto 0;
-  padding: 0 2rem;
-  animation: landingFadeInUp 1s ease-out 0.75s both;
-}
-
-.landing-preview-window {
-  border-radius: 12px;
-  border: 1px solid var(--color-border-default);
-  background: var(--color-bg-card);
-  overflow: hidden;
-  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);
-}
-
-.landing-preview-titlebar {
-  display: flex;
-  align-items: center;
-  padding: 0 0 0 14px;
-  height: 40px;
-  background: rgba(255, 255, 255, 0.02);
-  border-bottom: 1px solid var(--color-border-default);
-}
-
-.landing-preview-tab {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 14px;
-  height: 100%;
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.7rem;
-  color: var(--color-text-secondary);
-  border-right: 1px solid var(--color-border-default);
-  background: rgba(255, 255, 255, 0.02);
-  position: relative;
-}
-
-.landing-preview-tab::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-accent);
-}
-
-.landing-tab-icon {
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  background: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.landing-tab-close {
-  font-size: 0.65rem;
-  color: #5a6170;
-  margin-left: 4px;
-}
-
-.landing-preview-url-bar {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.landing-preview-url {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid var(--color-border-default);
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.65rem;
-  color: #5a6170;
-}
-
-.landing-lock-icon {
-  color: var(--color-success);
-  font-size: 0.6rem;
-}
-
-.landing-preview-window-controls {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  height: 100%;
-}
-
-.landing-win-btn {
-  width: 46px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #5a6170;
-  font-size: 0.7rem;
-  transition: background 0.15s;
-}
-
-.landing-win-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.landing-win-btn.close:hover {
-  background: #c42b1c;
-  color: white;
-}
-
-.landing-win-btn svg {
-  width: 12px;
-  height: 12px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.5;
-}
-
-.landing-preview-body {
-  padding: 2rem;
-  min-height: 340px;
-  display: flex;
-  gap: 1.5rem;
-}
-
-.landing-preview-sidebar {
-  width: 200px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.landing-preview-sidebar-item {
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.landing-preview-sidebar-item.active {
-  background: rgba(96, 165, 250, 0.08);
-  color: var(--color-accent-text);
-  border-left: 3px solid var(--color-accent);
-}
-
-.landing-preview-sidebar-item .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.landing-preview-canvas {
-  flex: 1;
-  background: rgba(255, 255, 255, 0.01);
-  border-radius: 12px;
-  border: 1px dashed var(--color-border-default);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Mini tree */
-.landing-mini-tree {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.landing-tree-node {
-  padding: 10px 20px;
-  border-radius: 10px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.landing-tree-node.root {
-  background: var(--color-accent);
-  color: #fff;
-}
-
-.landing-tree-node.decision {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  color: var(--color-text-primary);
-  font-size: 0.7rem;
-}
-
-.landing-tree-connector {
-  width: 2px;
-  height: 24px;
-  background: rgba(96, 165, 250, 0.2);
-}
-
-.landing-tree-branch {
-  display: flex;
-  gap: 2rem;
-  position: relative;
-}
-
-.landing-tree-branch::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: calc(100% - 100px);
-  transform: translateX(-50%);
-  height: 2px;
-  background: rgba(96, 165, 250, 0.15);
-}
-
-.landing-tree-branch-arm {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.landing-tree-branch-arm .landing-tree-connector {
-  height: 18px;
-}
-
-.landing-tree-label {
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.6rem;
-  color: var(--color-accent-text);
-  margin-bottom: 4px;
-  opacity: 0.7;
-}
-
-/* ---- SECTION LAYOUT ---- */
-.landing-page section {
-  padding: 4rem 2rem;
+.landing-section-alt {
+  background: var(--lp-bg-alt);
 }
 
 .landing-section-inner {
@@ -585,18 +201,19 @@
 
 .landing-section-label {
   font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--color-accent-text);
-  letter-spacing: 0.12em;
+  color: var(--lp-accent-text);
+  letter-spacing: 0.14em;
   text-transform: uppercase;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 .landing-section-title {
   font-family: 'Bricolage Grotesque', sans-serif;
   font-size: clamp(2rem, 4vw, 2.75rem);
   font-weight: 800;
+  color: var(--lp-text-heading);
   letter-spacing: -0.03em;
   line-height: 1.15;
   margin-top: 0;
@@ -604,356 +221,629 @@
 }
 
 .landing-section-desc {
-  font-size: 1.1rem;
-  color: var(--color-text-secondary);
+  font-size: 1.05rem;
+  color: var(--lp-text-secondary);
   line-height: 1.7;
-  max-width: 580px;
+  max-width: 520px;
+  margin-bottom: 0;
 }
 
-/* ---- SECTION DIVIDER ---- */
-.landing-section-divider {
-  max-width: 1100px;
+/* ---- HERO ---- */
+.landing-hero {
+  padding: 9rem 2rem 5rem;
+}
+
+.landing-hero-inner {
+  max-width: 1200px;
   margin: 0 auto;
-  height: 1px;
-  background: var(--color-bg-elevated);
-}
-
-/* ---- PROBLEM SECTION ---- */
-.landing-problem-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 3rem;
-  margin-top: 3.5rem;
-  align-items: start;
+  gap: 4rem;
+  align-items: center;
 }
 
-.landing-problem-card {
-  padding: 2rem;
-  border-radius: 16px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  transition: border-color 0.3s, transform 0.3s;
+.landing-hero-content {
+  animation: landingFadeInUp 0.8s ease-out;
 }
 
-.landing-problem-card:hover {
-  border-color: rgba(255, 255, 255, 0.12);
+.landing-hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 14px;
+  border-radius: 100px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: var(--lp-accent-text);
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.03em;
+}
+
+.landing-hero-badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--lp-accent);
+  animation: landingPulse 2s ease-in-out infinite;
+}
+
+@keyframes landingPulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.landing-hero h1 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: clamp(2.5rem, 5vw, 3.75rem);
+  font-weight: 800;
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+  color: var(--lp-text-heading);
+  margin-bottom: 1.25rem;
+}
+
+.landing-hero-accent {
+  color: var(--lp-accent-text);
+}
+
+.landing-hero-sub {
+  font-size: 1.1rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.7;
+  max-width: 480px;
+  margin-bottom: 2rem;
+}
+
+.landing-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.landing-btn-hero-primary {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  text-decoration: none;
+  padding: 0.8rem 1.75rem;
+  border-radius: 8px;
+  background: var(--lp-btn);
+  transition: opacity 0.3s, transform 0.3s;
+  letter-spacing: -0.01em;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.landing-btn-hero-primary:hover {
+  opacity: 0.9;
   transform: translateY(-2px);
 }
 
+.landing-btn-hero-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.landing-btn-hero-secondary {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--lp-text-secondary);
+  text-decoration: none;
+  padding: 0.8rem 1.75rem;
+  border-radius: 8px;
+  border: 1px solid var(--lp-border);
+  transition: background 0.3s, border-color 0.3s, color 0.3s;
+}
+
+.landing-btn-hero-secondary:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--lp-border-hover);
+  color: var(--lp-text-heading);
+}
+
+.landing-hero-credibility {
+  font-size: 0.8rem;
+  color: var(--lp-text-dim);
+  font-style: italic;
+  margin: 0;
+}
+
+/* Hero visual */
+.landing-hero-visual {
+  animation: landingPreviewEntrance 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
+}
+
+/* ---- PREVIEW WINDOW ---- */
+.landing-preview-window {
+  border-radius: 8px;
+  border: 1px solid var(--lp-border);
+  background: var(--lp-card);
+  overflow: hidden;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
+}
+
+.landing-preview-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--lp-border);
+}
+
+.landing-preview-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.landing-preview-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--lp-elevated);
+}
+
+.landing-preview-dots span:first-child {
+  background: #ef4444;
+}
+
+.landing-preview-dots span:nth-child(2) {
+  background: #eab308;
+}
+
+.landing-preview-dots span:last-child {
+  background: #22c55e;
+}
+
+.landing-preview-url {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lp-border);
+  font-size: 0.6rem;
+  color: var(--lp-text-dim);
+  flex: 1;
+  max-width: 260px;
+}
+
+.landing-lock-icon {
+  color: var(--lp-success);
+  font-size: 0.55rem;
+}
+
+.landing-preview-body {
+  padding: 1.25rem;
+  min-height: 260px;
+  display: flex;
+  align-items: center;
+}
+
+/* ---- MOCK ELEMENTS ---- */
+.landing-mock-session {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.landing-mock-session.compact {
+  gap: 0.35rem;
+}
+
+.landing-mock-chat-line {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 0.65rem;
+  font-family: 'IBM Plex Sans', sans-serif;
+  padding: 6px 10px;
+  border-radius: 6px;
+}
+
+.landing-mock-chat-line.user {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.landing-mock-chat-line.ai {
+  background: var(--lp-accent-soft);
+}
+
+.landing-mock-chat-line.doc {
+  background: rgba(52, 211, 153, 0.06);
+  border: 1px solid rgba(52, 211, 153, 0.1);
+}
+
+.landing-mock-chat-line .label {
+  font-weight: 700;
+  min-width: 52px;
+  flex-shrink: 0;
+  color: var(--lp-text-dim);
+}
+
+.landing-mock-chat-line.ai .label {
+  color: var(--lp-accent);
+}
+
+.landing-mock-chat-line.doc .label {
+  color: var(--lp-success);
+}
+
+.landing-mock-chat-line .text {
+  color: var(--lp-text-secondary);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.landing-mock-chat-line code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.6rem;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--lp-accent-text);
+}
+
+/* Mock input */
+.landing-mock-input {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  font-size: 0.7rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.5;
+  width: 100%;
+}
+
+.landing-mock-input-icon {
+  font-size: 0.9rem;
+  flex-shrink: 0;
+  margin-top: -1px;
+}
+
+/* Mock ticket */
+.landing-mock-ticket {
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.landing-mock-ticket-header {
+  font-size: 0.65rem;
+  color: var(--lp-accent-text);
+  font-weight: 700;
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--lp-border);
+  margin-bottom: 0.15rem;
+}
+
+.landing-mock-ticket-line {
+  font-size: 0.6rem;
+  color: var(--lp-text-secondary);
+  display: flex;
+  gap: 6px;
+}
+
+.landing-mock-ticket-line .time {
+  color: var(--lp-text-dim);
+  min-width: 30px;
+}
+
+.landing-mock-ticket-line .check {
+  color: var(--lp-success);
+}
+
+/* ---- PROBLEM SECTION (asymmetric) ---- */
+.landing-problem-layout {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+.landing-problem-headline h2 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-weight: 800;
+  color: var(--lp-text-heading);
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin: 0 0 1rem;
+}
+
+.landing-problem-headline > p {
+  font-size: 1rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.7;
+}
+
+.landing-problem-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.landing-problem-card {
+  padding: 1.25rem;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  transition: border-color 0.3s;
+}
+
+.landing-problem-card:hover {
+  border-color: var(--lp-border-hover);
+}
+
 .landing-problem-icon {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 1.25rem;
-  font-size: 1.25rem;
+  margin-bottom: 0.75rem;
+  font-size: 1.1rem;
 }
 
 .landing-problem-icon.red {
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--color-danger);
+  background: rgba(248, 113, 113, 0.1);
+  color: var(--lp-danger);
 }
 
 .landing-problem-icon.amber {
-  background: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+  background: rgba(251, 191, 36, 0.1);
+  color: var(--lp-warning);
 }
 
 .landing-problem-icon.slate {
-  background: rgba(148, 163, 184, 0.1);
-  color: #94a3b8;
+  background: rgba(145, 152, 168, 0.1);
+  color: var(--lp-text-secondary);
 }
 
 .landing-problem-icon.violet {
   background: rgba(139, 92, 246, 0.1);
-  color: #8b5cf6;
+  color: #a78bfa;
 }
 
 .landing-problem-card h3 {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.25rem;
+  font-size: 0.95rem;
   font-weight: 700;
-  margin-bottom: 0.6rem;
+  color: var(--lp-text-heading);
+  margin-bottom: 0.4rem;
   letter-spacing: -0.01em;
 }
 
 .landing-problem-card p {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  line-height: 1.65;
+  font-size: 0.8rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.6;
+  margin: 0;
 }
 
 /* ---- EQUATION ---- */
 .landing-equation-section {
   text-align: center;
-  padding: 3.5rem 2rem;
-  position: relative;
+  padding: 4rem 2rem;
 }
 
-/* Removed radial gradient pseudo-element */
-.landing-equation-section::before {
-  display: none;
+.landing-equation-inner {
+  max-width: 900px;
+  margin: 0 auto;
 }
 
 .landing-brand-equation {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 1rem;
+  gap: 0.75rem;
   flex-wrap: wrap;
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+  font-size: clamp(1.25rem, 3vw, 2.25rem);
   font-weight: 700;
   letter-spacing: -0.02em;
   margin-bottom: 1.5rem;
 }
 
 .landing-eq-item {
-  padding: 0.5rem 1.25rem;
-  border-radius: 12px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
+  padding: 0.4rem 1rem;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  color: var(--lp-text-heading);
 }
 
 .landing-eq-operator {
-  color: var(--color-accent-text);
-  font-size: 2rem;
+  color: var(--lp-accent);
+  font-size: 1.5em;
 }
 
 .landing-eq-result {
-  color: var(--color-accent-text);
-  padding: 0;
+  color: var(--lp-accent-text);
 }
 
-/* ---- EQUATION DESC ---- */
 .landing-equation-desc {
-  font-size: 1.1rem;
-  color: var(--color-text-secondary);
-  max-width: 550px;
+  font-size: 1.05rem;
+  color: var(--lp-text-secondary);
+  max-width: 480px;
   margin: 0 auto;
   line-height: 1.7;
 }
 
-/* ---- HOW IT WORKS ---- */
-.landing-steps-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+/* ---- HOW IT WORKS (zigzag) ---- */
+.landing-zigzag {
+  max-width: 1100px;
+  margin: 3rem auto 0;
+  padding: 0 2rem;
+  display: flex;
+  flex-direction: column;
   gap: 2rem;
-  margin-top: 3.5rem;
-  counter-reset: landing-step;
 }
 
-.landing-step-card {
-  padding: 2rem;
-  border-radius: 16px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  position: relative;
-  counter-increment: landing-step;
-  transition: border-color 0.3s, transform 0.3s;
+.landing-zigzag-step {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
 }
 
-.landing-step-card:hover {
-  border-color: rgba(96, 165, 250, 0.2);
+.landing-zigzag-step.reverse {
+  direction: rtl;
 }
 
-.landing-step-card::before {
-  content: counter(landing-step, decimal-leading-zero);
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--color-accent-text);
-  opacity: 0.6;
-  letter-spacing: 0.05em;
+.landing-zigzag-step.reverse > * {
+  direction: ltr;
 }
 
-.landing-step-card h3 {
+.landing-zigzag-number {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.25rem;
+  font-size: 0.75rem;
   font-weight: 700;
-  margin: 1rem 0 0.75rem;
-  letter-spacing: -0.01em;
+  color: var(--lp-accent);
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
 }
 
-.landing-step-card p {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  line-height: 1.65;
+.landing-zigzag-text h3 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--lp-text-heading);
+  letter-spacing: -0.02em;
+  margin-bottom: 0.75rem;
 }
 
-.landing-step-visual {
-  width: 100%;
-  height: 120px;
-  border-radius: 10px;
-  margin-top: 1.25rem;
-  background: var(--color-bg-page);
-  border: 1px solid var(--color-border-default);
+.landing-zigzag-text p {
+  font-size: 0.95rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.7;
+  margin: 0;
+}
+
+.landing-zigzag-visual {
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: var(--lp-bg);
+  border: 1px solid var(--lp-border);
+}
+
+.landing-section-alt .landing-zigzag-visual {
+  background: var(--lp-bg-alt);
+}
+
+/* ---- FEATURES ---- */
+.landing-feature-highlight {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
+  align-items: flex-start;
+  gap: 1.5rem;
+  padding: 2rem;
+  border-radius: 8px;
+  background: var(--lp-accent-soft);
+  border: 1px solid rgba(96, 165, 250, 0.15);
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
 }
 
-/* Mock editor */
-.landing-mock-editor {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  width: 100%;
-  align-items: center;
-}
-
-.landing-mock-node {
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-size: 0.6rem;
-  font-family: 'IBM Plex Sans', sans-serif;
-  overflow-wrap: anywhere;
-}
-
-.landing-mock-node.start {
+.landing-feature-highlight-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
   background: rgba(96, 165, 250, 0.15);
-  color: var(--color-accent-text);
-  border: 1px solid rgba(96, 165, 250, 0.2);
-}
-
-.landing-mock-node.step {
-  background: rgba(255, 255, 255, 0.03);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-default);
-}
-
-.landing-mock-connector {
-  width: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #5a6170;
-  font-size: 0.7rem;
+  color: var(--lp-accent);
+  flex-shrink: 0;
 }
 
-/* Mock session */
-.landing-mock-session {
-  width: 100%;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
+.landing-feature-highlight-content h3 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--lp-text-heading);
+  letter-spacing: -0.01em;
+  margin-bottom: 0.5rem;
 }
 
-.landing-mock-chat-line {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.6rem;
-  font-family: 'IBM Plex Sans', sans-serif;
+.landing-feature-highlight-content p {
+  font-size: 0.95rem;
+  color: var(--lp-text-secondary);
+  line-height: 1.65;
+  margin: 0;
 }
 
-.landing-mock-chat-line .label {
-  color: var(--color-accent-text);
-  font-weight: 600;
-  min-width: 55px;
-}
-
-.landing-mock-chat-line .text {
-  color: var(--color-text-secondary);
-  overflow-wrap: anywhere;
-  min-width: 0;
-}
-
-.landing-mock-chat-line.doc .label {
-  color: var(--color-success);
-}
-
-/* Mock ticket */
-.landing-mock-ticket {
-  width: 100%;
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.landing-mock-ticket-header {
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.6rem;
-  color: var(--color-accent-text);
-  font-weight: 600;
-  padding-bottom: 0.35rem;
-  border-bottom: 1px solid var(--color-border-default);
-  margin-bottom: 0.15rem;
-}
-
-.landing-mock-ticket-line {
-  font-size: 0.55rem;
-  font-family: 'IBM Plex Sans', sans-serif;
-  color: var(--color-text-secondary);
-  display: flex;
-  gap: 6px;
-}
-
-.landing-mock-ticket-line .time {
-  color: #5a6170;
-  min-width: 35px;
-}
-
-.landing-mock-ticket-line .check {
-  color: var(--color-success);
-}
-
-/* ---- FEATURES GRID ---- */
 .landing-features-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.5rem;
-  margin-top: 3.5rem;
+  gap: 1rem;
 }
 
 .landing-feature-card {
-  padding: 2rem;
-  border-radius: 16px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  transition: border-color 0.3s ease, transform 0.3s ease;
+  padding: 1.5rem;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  transition: border-color 0.3s;
 }
 
 .landing-feature-card:hover {
-  border-color: rgba(96, 165, 250, 0.2);
-  transform: translateY(-3px);
+  border-color: var(--lp-border-hover);
 }
 
 .landing-feature-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 10px;
-  background: rgba(96, 165, 250, 0.08);
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--lp-accent-soft);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 1.25rem;
-  color: var(--color-accent-text);
+  margin-bottom: 1rem;
+  color: var(--lp-accent-text);
 }
 
 .landing-feature-card h3 {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 700;
-  margin-bottom: 0.6rem;
+  color: var(--lp-text-heading);
+  margin-bottom: 0.4rem;
   letter-spacing: -0.01em;
 }
 
 .landing-feature-card p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  color: var(--lp-text-secondary);
   line-height: 1.6;
+  margin: 0;
 }
 
-.landing-feature-card.highlight {
-  border-color: rgba(96, 165, 250, 0.15);
-  background: var(--color-bg-card);
-  grid-column: span 2;
+/* 5 cards: 3 + 2 bottom row centered */
+.landing-features-grid .landing-feature-card:nth-child(4) {
+  grid-column: 1 / 2;
+}
+
+.landing-features-grid .landing-feature-card:nth-child(5) {
+  grid-column: 2 / 3;
 }
 
 /* ---- PRICING ---- */
@@ -961,110 +851,111 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
-  margin-top: 3.5rem;
+  margin-top: 3rem;
   align-items: start;
 }
 
 .landing-pricing-card {
-  padding: 2.5rem 2rem;
-  border-radius: 16px;
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border-default);
-  transition: border-color 0.3s, transform 0.3s;
+  padding: 2rem 1.75rem;
+  border-radius: 8px;
+  background: var(--lp-card);
+  border: 1px solid var(--lp-border);
+  transition: border-color 0.3s;
 }
 
 .landing-pricing-card:hover {
-  border-color: rgba(255, 255, 255, 0.12);
+  border-color: var(--lp-border-hover);
 }
 
 .landing-pricing-card.featured {
-  border-color: #60a5fa;
-  background: var(--color-bg-card);
+  border-color: var(--lp-accent);
+  padding: 2.5rem 2rem;
   position: relative;
+  box-shadow: 0 0 0 1px var(--lp-accent), 0 8px 32px rgba(96, 165, 250, 0.08);
 }
 
-.landing-pricing-card.featured::before {
-  content: 'Most Popular';
+.landing-pricing-badge {
   position: absolute;
-  top: -12px;
+  top: -11px;
   left: 50%;
   transform: translateX(-50%);
-  padding: 4px 14px;
+  padding: 3px 12px;
   border-radius: 100px;
-  background: var(--color-accent);
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.65rem;
-  font-weight: 600;
+  background: var(--lp-accent);
+  font-size: 0.6rem;
+  font-weight: 700;
   color: #fff;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
+  white-space: nowrap;
 }
 
 .landing-pricing-plan-name {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
   font-weight: 700;
-  margin-bottom: 0.5rem;
-  letter-spacing: -0.01em;
+  color: var(--lp-text-heading);
+  margin-bottom: 0.35rem;
 }
 
 .landing-pricing-target {
   font-size: 0.8rem;
-  color: #5a6170;
-  margin-bottom: 1.5rem;
+  color: var(--lp-text-dim);
+  margin-bottom: 1.25rem;
 }
 
 .landing-pricing-price {
   display: flex;
   align-items: baseline;
-  gap: 0.25rem;
-  margin-bottom: 0.25rem;
+  gap: 0.2rem;
+  margin-bottom: 0.2rem;
 }
 
 .landing-pricing-price .amount {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 2.75rem;
+  font-size: 2.5rem;
   font-weight: 800;
+  color: var(--lp-text-heading);
   letter-spacing: -0.04em;
 }
 
 .landing-pricing-card.featured .landing-pricing-price .amount {
-  color: var(--color-accent-text);
+  color: var(--lp-accent-text);
 }
 
 .landing-pricing-price .period {
   font-size: 0.85rem;
-  color: #5a6170;
+  color: var(--lp-text-dim);
 }
 
 .landing-pricing-note {
-  font-size: 0.8rem;
-  color: #5a6170;
-  margin-bottom: 2rem;
+  font-size: 0.75rem;
+  color: var(--lp-text-dim);
+  margin-bottom: 1.5rem;
 }
 
 .landing-pricing-features {
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 2rem;
+  gap: 0.6rem;
+  margin-bottom: 1.75rem;
   padding: 0;
 }
 
 .landing-pricing-features li {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
+  font-size: 0.85rem;
+  color: var(--lp-text-secondary);
   display: flex;
   align-items: flex-start;
-  gap: 0.6rem;
+  gap: 0.5rem;
 }
 
 .landing-pricing-features li::before {
   content: '\2713';
-  color: #60a5fa;
+  color: var(--lp-accent);
   font-weight: 700;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   margin-top: 2px;
   flex-shrink: 0;
 }
@@ -1072,9 +963,9 @@
 .landing-pricing-btn {
   display: block;
   text-align: center;
-  padding: 0.75rem 1.5rem;
-  border-radius: 10px;
-  font-size: 0.9rem;
+  padding: 0.7rem 1.25rem;
+  border-radius: 8px;
+  font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
   transition: opacity 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
@@ -1082,19 +973,19 @@
 }
 
 .landing-pricing-btn.outline {
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
+  color: var(--lp-text-heading);
+  border: 1px solid var(--lp-border);
   background: transparent;
 }
 
 .landing-pricing-btn.outline:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: var(--lp-border-hover);
 }
 
 .landing-pricing-btn.filled {
   color: #fff;
-  background: var(--color-accent);
+  background: var(--lp-btn);
   border: none;
 }
 
@@ -1103,15 +994,23 @@
   transform: translateY(-1px);
 }
 
+.landing-pricing-session-note {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.8rem;
+  color: var(--lp-text-dim);
+  font-style: italic;
+}
+
 .landing-pricing-enterprise {
   text-align: center;
-  margin-top: 2rem;
+  margin-top: 0.75rem;
   font-size: 0.85rem;
-  color: #5a6170;
+  color: var(--lp-text-dim);
 }
 
 .landing-pricing-enterprise a {
-  color: var(--color-accent-text);
+  color: var(--lp-accent-text);
   text-decoration: none;
 }
 
@@ -1119,140 +1018,190 @@
   text-decoration: underline;
 }
 
-/* ---- TESTIMONIAL ---- */
-.landing-testimonial-section {
+/* ---- FAQ ---- */
+.landing-faq-list {
+  max-width: 680px;
+  margin-top: 2rem;
+}
+
+.landing-faq-item {
+  border-bottom: 1px solid var(--lp-border);
+}
+
+.landing-faq-item:first-child {
+  border-top: 1px solid var(--lp-border);
+}
+
+.landing-faq-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.25rem 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--lp-text-heading);
+  gap: 1rem;
+  transition: color 0.2s;
+}
+
+.landing-faq-trigger:hover {
+  color: var(--lp-accent-text);
+}
+
+.landing-faq-icon {
+  font-size: 1.25rem;
+  color: var(--lp-text-dim);
+  flex-shrink: 0;
+  width: 24px;
   text-align: center;
-  max-width: 700px;
-  margin: 0 auto;
-  padding: 3.5rem 2rem;
+  transition: color 0.2s;
 }
 
-.landing-testimonial-quote {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.5;
-  letter-spacing: -0.01em;
-  color: var(--color-text-primary);
-  font-style: italic;
-  margin-bottom: 1.5rem;
-  position: relative;
+.landing-faq-item.open .landing-faq-icon {
+  color: var(--lp-accent);
 }
 
-.landing-testimonial-quote::before {
-  content: '\201C';
-  font-size: 4rem;
-  color: #60a5fa;
-  opacity: 0.3;
-  vertical-align: super;
-  margin-right: 1rem;
-  top: -2.5rem;
-  font-family: 'Bricolage Grotesque', sans-serif;
-  line-height: 1;
+/* Smooth height animation via grid-template-rows */
+.landing-faq-answer {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
 }
 
-.landing-testimonial-quote::after {
-  content: '\201D';
-  font-size: 4rem;
-  color: #60a5fa;
-  opacity: 0.3;
-  vertical-align: sub;
-  margin-left: 1rem;
-  font-family: 'Bricolage Grotesque', sans-serif;
-  line-height: 1;
-  position: absolute;
-  bottom: -2.5rem;
+.landing-faq-item.open .landing-faq-answer {
+  grid-template-rows: 1fr;
 }
 
-.landing-testimonial-author {
+.landing-faq-answer > p {
+  overflow: hidden;
+  margin: 0;
   font-size: 0.9rem;
-  color: #5a6170;
+  color: var(--lp-text-secondary);
+  line-height: 1.7;
+  padding: 0 0 1.25rem;
 }
 
-.landing-testimonial-author strong {
-  color: var(--color-text-secondary);
-  font-weight: 600;
+/* ---- FOUNDER ---- */
+.landing-founder-section {
+  padding: 4rem 2rem;
+}
+
+.landing-founder-inner {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.landing-founder-section blockquote {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.6;
+  color: var(--lp-text-body);
+  margin: 0.75rem 0 1.25rem;
+  padding-left: 1.25rem;
+  border-left: 3px solid var(--lp-accent);
+}
+
+.landing-founder-name {
+  font-size: 0.85rem;
+  color: var(--lp-text-dim);
+  padding-left: 1.25rem;
 }
 
 /* ---- CTA ---- */
 .landing-cta-section {
   text-align: center;
-  padding: 4rem 2rem;
-  position: relative;
+  padding: 5rem 2rem;
+  background: var(--lp-bg-alt);
 }
 
-/* Removed radial gradient pseudo-element */
-.landing-cta-section::before {
-  display: none;
+.landing-cta-inner {
+  max-width: 520px;
+  margin: 0 auto;
 }
 
 .landing-cta-section h2 {
   font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
   font-weight: 800;
+  color: var(--lp-text-heading);
   letter-spacing: -0.03em;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
-.landing-cta-section>p {
-  font-size: 1.1rem;
-  color: var(--color-text-secondary);
-  max-width: 500px;
-  margin: 0 auto 2rem;
+.landing-cta-section h2 + p {
+  font-size: 1rem;
+  color: var(--lp-text-secondary);
+  margin-bottom: 2rem;
   line-height: 1.7;
 }
 
 .landing-cta-email-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.landing-cta-input-wrap {
   display: flex;
   gap: 0.75rem;
-  max-width: 440px;
-  margin: 0 auto;
 }
 
 .landing-cta-email-input {
   flex: 1;
-  padding: 0.85rem 1.25rem;
-  border-radius: 10px;
-  border: 1px solid var(--color-border-default);
-  background: var(--color-bg-card);
-  color: var(--color-text-primary);
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  border: 1px solid var(--lp-border);
+  background: var(--lp-card);
+  color: var(--lp-text-heading);
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.9rem;
   outline: none;
-  transition: border-color 0.3s;
+  transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 .landing-cta-email-input::placeholder {
-  color: #5a6170;
+  color: var(--lp-text-dim);
 }
 
 .landing-cta-email-input:focus {
-  border-color: #60a5fa;
+  border-color: var(--lp-accent);
   box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
 }
 
-.landing-cta-fine-print {
-  font-size: 0.75rem;
-  color: #5a6170;
-  margin-top: 1rem;
+.landing-cta-status {
+  min-height: 1.5rem;
+  margin-top: 0.5rem;
 }
 
 .landing-cta-success {
   font-size: 0.85rem;
-  color: var(--color-success);
-  margin-top: 0.75rem;
+  color: var(--lp-success);
+  margin: 0;
 }
 
 .landing-cta-error {
   font-size: 0.85rem;
-  color: var(--color-danger);
+  color: var(--lp-danger);
+  margin: 0;
+}
+
+.landing-cta-fine-print {
+  font-size: 0.7rem;
+  color: var(--lp-text-dim);
   margin-top: 0.75rem;
 }
 
 /* ---- FOOTER ---- */
 .landing-footer {
-  border-top: 1px solid var(--color-border-default);
-  padding: 3rem 2rem;
+  border-top: 1px solid var(--lp-border);
+  padding: 2.5rem 2rem;
 }
 
 .landing-footer-inner {
@@ -1272,8 +1221,8 @@
 }
 
 .landing-footer-copy {
-  font-size: 0.8rem;
-  color: #5a6170;
+  font-size: 0.75rem;
+  color: var(--lp-text-dim);
 }
 
 .landing-footer-links {
@@ -1285,39 +1234,99 @@
 }
 
 .landing-footer-links a {
-  font-size: 0.8rem;
-  color: #5a6170;
+  font-size: 0.75rem;
+  color: var(--lp-text-dim);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .landing-footer-links a:hover {
-  color: var(--color-text-secondary);
+  color: var(--lp-text-secondary);
 }
 
 /* ---- ANIMATIONS ---- */
 @keyframes landingFadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes landingFadeInDown {
-  from {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
+@keyframes landingPreviewEntrance {
+  from { opacity: 0; transform: translateY(30px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+/* ---- CHAT ANIMATION ---- */
+.landing-chat-animated {
+  opacity: 0;
+  transform: translateX(-16px);
+  animation: landingChatSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation-delay: calc(1.5s + var(--chat-index, 0) * 1.2s);
+}
+
+.landing-chat-animated:nth-child(2) {
+  animation: landingTypingLifecycle 3s ease both;
+  animation-delay: 2.7s;
+}
+
+.landing-chat-animated:nth-child(3) { animation-delay: 5.7s; }
+.landing-chat-animated:nth-child(4) { animation-delay: 6.7s; }
+.landing-chat-animated:nth-child(5) { animation-delay: 7.7s; }
+.landing-chat-animated:nth-child(6) { animation-delay: 9s; }
+
+@keyframes landingChatSlideIn {
+  from { opacity: 0; transform: translateX(-16px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes landingTypingLifecycle {
+  0% { opacity: 0; transform: translateX(-16px); }
+  10% { opacity: 1; transform: translateX(0); }
+  75% { opacity: 1; transform: translateX(0); }
+  90% { opacity: 0; transform: translateX(0); }
+  100% { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; }
+}
+
+.landing-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--lp-accent-soft);
+  border: 1px solid rgba(96, 165, 250, 0.1);
+  width: fit-content;
+}
+
+.landing-typing-indicator span {
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--lp-accent);
+  opacity: 0.5;
+  animation: landingTypingBounce 1s ease-in-out infinite;
+}
+
+.landing-typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
+.landing-typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
+
+.landing-typing-label {
+  font-size: 0.6rem;
+  color: var(--lp-accent);
+  font-weight: 500;
+  white-space: nowrap;
+  /* Override dot styles */
+  width: auto !important;
+  height: auto !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  opacity: 1 !important;
+  animation: none !important;
+}
+
+@keyframes landingTypingBounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-4px); opacity: 1; }
 }
 
 /* ---- SCROLL REVEAL ---- */
@@ -1332,7 +1341,75 @@
   transform: translateY(0);
 }
 
-/* ---- Hamburger Button ---- */
+/* ---- Scroll-driven enhancements ---- */
+@supports (animation-timeline: scroll()) {
+  .landing-reveal {
+    opacity: 0;
+    transform: translateY(32px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 35%;
+    transition: none;
+  }
+
+  .landing-reveal.visible {
+    /* scroll-driven handles it */
+  }
+
+  @keyframes landingScrollReveal {
+    from { opacity: 0; transform: translateY(32px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .landing-problem-card {
+    opacity: 0;
+    transform: translateY(16px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 40%;
+  }
+
+  .landing-problem-card:nth-child(1) { animation-range: entry 0% entry 35%; }
+  .landing-problem-card:nth-child(2) { animation-range: entry 5% entry 40%; }
+  .landing-problem-card:nth-child(3) { animation-range: entry 10% entry 45%; }
+  .landing-problem-card:nth-child(4) { animation-range: entry 15% entry 50%; }
+
+  .landing-feature-card {
+    opacity: 0;
+    transform: translateY(16px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 40%;
+  }
+
+  .landing-feature-card:nth-child(1) { animation-range: entry 0% entry 30%; }
+  .landing-feature-card:nth-child(2) { animation-range: entry 3% entry 33%; }
+  .landing-feature-card:nth-child(3) { animation-range: entry 6% entry 36%; }
+  .landing-feature-card:nth-child(4) { animation-range: entry 9% entry 39%; }
+  .landing-feature-card:nth-child(5) { animation-range: entry 12% entry 42%; }
+
+  .landing-pricing-card {
+    opacity: 0;
+    transform: translateY(16px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 40%;
+  }
+
+  .landing-pricing-card:nth-child(1) { animation-range: entry 0% entry 30%; }
+  .landing-pricing-card:nth-child(2) { animation-range: entry 5% entry 35%; }
+  .landing-pricing-card:nth-child(3) { animation-range: entry 10% entry 40%; }
+
+  .landing-zigzag-step {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: landingScrollReveal linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 35%;
+  }
+}
+
+/* ---- HAMBURGER ---- */
 .landing-hamburger {
   display: none;
   flex-direction: column;
@@ -1351,13 +1428,13 @@
   display: block;
   width: 22px;
   height: 2px;
-  background: #848b9b;
+  background: var(--lp-text-secondary);
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .landing-hamburger:hover span {
-  background: #e2e5eb;
+  background: var(--lp-text-heading);
 }
 
 .landing-hamburger.open span:nth-child(1) {
@@ -1372,14 +1449,14 @@
   transform: translateY(-7px) rotate(-45deg);
 }
 
-/* ---- Mobile Menu ---- */
+/* ---- MOBILE MENU ---- */
 .landing-mobile-menu {
   display: none;
   flex-direction: column;
   gap: 0;
   padding: 0.5rem 1.5rem 1.5rem;
-  background: rgba(12, 13, 16, 0.98);
-  border-bottom: 1px solid var(--color-border-default);
+  background: rgba(20, 22, 29, 0.98);
+  border-bottom: 1px solid var(--lp-border);
 }
 
 .landing-mobile-menu a {
@@ -1387,14 +1464,14 @@
   padding: 0.875rem 0;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--color-text-secondary);
+  color: var(--lp-text-secondary);
   text-decoration: none;
   transition: color 0.2s;
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .landing-mobile-menu a:hover {
-  color: var(--color-text-primary);
+  color: var(--lp-text-heading);
 }
 
 .landing-mobile-menu a:last-child {
@@ -1414,28 +1491,81 @@
 
 /* ---- RESPONSIVE ---- */
 @media (max-width: 900px) {
-
-  .landing-page section {
-    padding: 3rem 1rem;
+  .landing-section {
+    padding: 3.5rem 1.25rem;
   }
 
-  .landing-section-inner {
+  .landing-hero {
+    padding: 7rem 1.25rem 3rem;
+  }
+
+  .landing-hero-inner {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+
+  .landing-hero h1 {
+    font-size: 2.25rem;
+  }
+
+  .landing-hero-sub {
     max-width: 100%;
   }
 
-  .landing-step-card {
-    padding: 1.25rem;
+  .landing-hero-actions {
+    flex-wrap: wrap;
   }
 
-  .landing-problem-grid,
-  .landing-steps-container,
-  .landing-features-grid,
-  .landing-pricing-grid {
+  .landing-problem-layout {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .landing-problem-grid {
     grid-template-columns: 1fr;
   }
 
-  .landing-feature-card.highlight {
-    grid-column: span 1;
+  .landing-zigzag {
+    padding: 0 1.25rem;
+  }
+
+  .landing-zigzag-step,
+  .landing-zigzag-step.reverse {
+    grid-template-columns: 1fr;
+    direction: ltr;
+    gap: 1.5rem;
+  }
+
+  .landing-zigzag-step.reverse > * {
+    direction: ltr;
+  }
+
+  .landing-zigzag-visual {
+    order: 2;
+  }
+
+  .landing-features-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .landing-features-grid .landing-feature-card:nth-child(4),
+  .landing-features-grid .landing-feature-card:nth-child(5) {
+    grid-column: auto;
+  }
+
+  .landing-feature-highlight {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .landing-pricing-grid {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+  }
+
+  .landing-pricing-card.featured {
+    order: -1;
   }
 
   .landing-nav-links {
@@ -1454,53 +1584,63 @@
     display: flex;
   }
 
-  .landing-preview-sidebar {
-    display: none;
-  }
-
-  .landing-preview-url-bar {
-    display: none;
-  }
-
-  .landing-preview-window-controls {
-    display: none;
-  }
-
-  .landing-preview-titlebar {
-    justify-content: center;
-  }
-
-  .landing-tree-branch {
-    gap: 1rem;
-  }
-
-  .landing-hero {
-    padding: 8rem 1.5rem 4rem;
-  }
-
   .landing-equation-section {
-    padding: 3rem 1rem;
+    padding: 3rem 1.25rem;
   }
 
   .landing-brand-equation {
-    font-size: 1.25rem;
-    gap: 0.5rem;
-    flex-wrap: wrap;
+    font-size: 1.1rem;
+    gap: 0.4rem;
   }
 
   .landing-eq-item {
-    padding: 0.35rem 0.75rem;
+    padding: 0.3rem 0.6rem;
   }
 
-  .landing-testimonial-section {
-    padding: 3rem 1rem;
+  .landing-founder-section {
+    padding: 3rem 1.25rem;
   }
 
   .landing-cta-section {
-    padding: 3rem 1rem;
+    padding: 3.5rem 1.25rem;
   }
 
-  .landing-cta-email-form {
+  .landing-cta-input-wrap {
     flex-direction: column;
   }
-}
\ No newline at end of file
+
+  .landing-faq-trigger {
+    font-size: 0.9rem;
+    padding: 1rem 0;
+  }
+}
+
+/* ---- REDUCED MOTION ---- */
+@media (prefers-reduced-motion: reduce) {
+  .landing-chat-animated,
+  .landing-hero-visual,
+  .landing-hero-content {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+
+  .landing-typing-indicator span {
+    animation: none;
+    opacity: 0.6;
+  }
+
+  .landing-chat-animated:nth-child(2) {
+    display: none;
+  }
+
+  .landing-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .landing-faq-answer {
+    transition: none;
+  }
+}