Merge branch 'main' into feat/l1-workspace

# Conflicts: # frontend/src/router.tsx
2026-05-29 00:24:54 -04:00
parent 83d1f4cecd 1d92893573
commit 4c83cebfca
43 changed files with 1246 additions and 412 deletions
--- a/frontend/e2e/auth.spec.ts
+++ b/frontend/e2e/auth.spec.ts
@@ -7,7 +7,7 @@ test.describe('authentication smoke tests', () => {
  test('team admin can sign in through the login form', async ({ page }) => {
    await signIn(page)

-    await expect(page).toHaveURL(/\/$/)
+    await expect(page).toHaveURL(/\/home$/)
    await expect(page.getByTestId('app-shell')).toBeVisible()
  })
 })
--- a/frontend/e2e/public.spec.ts
+++ b/frontend/e2e/public.spec.ts
@@ -4,7 +4,7 @@ test.use({ storageState: { cookies: [], origins: [] } })

 test.describe('public route smoke tests', () => {
  test('landing page loads', async ({ page }) => {
-    await page.goto('/landing')
+    await page.goto('/')

    await expect(
      page.getByRole('link', { name: 'Start Free', exact: true }),
@@ -17,7 +17,7 @@ test.describe('public route smoke tests', () => {
  test('protected routes redirect unauthenticated users to landing', async ({ page }) => {
    await page.goto('/sessions')

-    await expect(page).toHaveURL(/\/landing$/)
+    await expect(page).toHaveURL(/\/$/)
    await expect(
      page.getByRole('link', { name: 'Sign In' }),
    ).toBeVisible()
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -10,7 +10,7 @@
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,700&family=Atkinson+Hyperlegible+Mono:wght@400;500&family=Bricolage+Grotesque:wght@400;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

    <!-- PWA Icons -->
    <link rel="apple-touch-icon" href="/icons/app-icon-gradient.svg" />
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,36 @@
+User-agent: *
+Allow: /
+Allow: /terms
+Allow: /policies
+Allow: /privacy
+Allow: /contact
+Allow: /contact-sales
+Allow: /pricing
+Allow: /promotions
+Allow: /templates
+Disallow: /home
+Disallow: /trees/
+Disallow: /my-trees
+Disallow: /pilot/
+Disallow: /admin/
+Disallow: /account/
+Disallow: /script-builder
+Disallow: /scripts
+Disallow: /sessions
+Disallow: /analytics
+Disallow: /escalations
+Disallow: /queue
+Disallow: /review-queue
+Disallow: /network-diagrams
+Disallow: /kb-accelerator
+Disallow: /step-library
+Disallow: /tickets
+Disallow: /shares
+Disallow: /feedback
+Disallow: /welcome
+Disallow: /flow-assist
+Disallow: /dev/
+Disallow: /flows/
+Disallow: /guides
+
+Sitemap: https://resolutionflow.com/sitemap.xml
--- a/frontend/public/sitemap.xml
+++ b/frontend/public/sitemap.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://resolutionflow.com/</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/pricing</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/contact-sales</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/contact</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/templates</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/terms</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/privacy</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/policies</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://resolutionflow.com/promotions</loc>
+    <lastmod>2026-05-13</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.4</priority>
+  </url>
+</urlset>
--- a/frontend/src/components/common/PageMeta.tsx
+++ b/frontend/src/components/common/PageMeta.tsx
@@ -5,6 +5,8 @@ interface PageMetaProps {
  description?: string
  ogImage?: string
  ogType?: string
+  /** Canonical/Open Graph URL. Defaults to `window.location.href` in the browser. */
+  url?: string
 }

 const SITE_NAME = 'ResolutionFlow'
@@ -20,8 +22,12 @@ export function PageMeta({
  description = DEFAULT_DESCRIPTION,
  ogImage,
  ogType = 'website',
+  url,
 }: PageMetaProps) {
  const fullTitle = title ? `${title} | ${SITE_NAME}` : `${SITE_NAME} — ${DEFAULT_TAGLINE}`
+  const resolvedUrl =
+    url ?? (typeof window !== 'undefined' ? window.location.href : undefined)
+  const twitterCard = ogImage ? 'summary_large_image' : 'summary'

  return (
    <Helmet>
@@ -33,10 +39,11 @@ export function PageMeta({
      <meta property="og:description" content={description} />
      <meta property="og:type" content={ogType} />
      <meta property="og:site_name" content={SITE_NAME} />
+      {resolvedUrl && <meta property="og:url" content={resolvedUrl} />}
      {ogImage && <meta property="og:image" content={ogImage} />}

      {/* Twitter */}
-      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:card" content={twitterCard} />
      <meta name="twitter:title" content={fullTitle} />
      <meta name="twitter:description" content={description} />
      {ogImage && <meta name="twitter:image" content={ogImage} />}
--- a/frontend/src/components/dashboard/NextStepCard.tsx
+++ b/frontend/src/components/dashboard/NextStepCard.tsx
@@ -79,7 +79,7 @@ export function pickNextStep(
      title: 'Run your first FlowPilot session',
      description: 'Paste a ticket or pick a flow to see ResolutionFlow in action.',
      ctaLabel: 'Start a session',
-      ctaPath: '/',
+      ctaPath: '/home',
    }
  }
  if (!status.connected_psa) {
--- a/frontend/src/components/dashboard/SetupChecklist.tsx
+++ b/frontend/src/components/dashboard/SetupChecklist.tsx
@@ -51,7 +51,7 @@ export function buildChecklistItems(
    {
      key: 'ran_session',
      label: 'Run your first FlowPilot session',
-      path: '/',
+      path: '/home',
      done: status.ran_session,
    },
    {
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -58,7 +58,7 @@ export function AppLayout() {
  }

  const mobileNavItems = [
-    { path: '/', label: 'Dashboard', icon: LayoutGrid },
+    { path: '/home', label: 'Dashboard', icon: LayoutGrid },
    { path: '/sessions', label: 'Session History', icon: Clock },
    { path: '/escalations', label: 'Escalations', icon: AlertTriangle },
    { path: '/trees', label: 'Guided Flows', icon: GitBranch },
@@ -106,7 +106,7 @@ export function AppLayout() {
            style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
          >
            <div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
-              <Link to="/" className="flex items-center gap-2.5">
+              <Link to="/home" className="flex items-center gap-2.5">
                <BrandLogo size="sm" />
                <span className="text-sm font-heading font-bold text-text-heading">ResolutionFlow</span>
              </Link>
--- a/frontend/src/components/layout/CommandPalette.tsx
+++ b/frontend/src/components/layout/CommandPalette.tsx
@@ -40,7 +40,7 @@ interface Group {
 }

 const PAGES: PaletteItem[] = [
-  { id: 'page-dashboard', group: 'pages', title: 'Dashboard', path: '/', icon: 'page' },
+  { id: 'page-dashboard', group: 'pages', title: 'Dashboard', path: '/home', icon: 'page' },
  { id: 'page-flows', group: 'pages', title: 'All Flows', subtitle: 'Browse your flow library', path: '/trees', icon: 'page' },
  { id: 'page-sessions', group: 'pages', title: 'Sessions', subtitle: 'View session history', path: '/sessions', icon: 'page' },
  { id: 'page-flowpilot', group: 'pages', title: 'FlowPilot', subtitle: 'AI troubleshooting', path: '/pilot', icon: 'page' },
--- a/frontend/src/components/layout/ProtectedRoute.tsx
+++ b/frontend/src/components/layout/ProtectedRoute.tsx
@@ -22,7 +22,7 @@ export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps)
  }

  if (!isAuthenticated) {
-    return <Navigate to="/landing" state={{ from: location }} replace />
+    return <Navigate to="/" state={{ from: location }} replace />
  }

  // Enforce must_change_password — redirect unless already on /change-password
--- a/frontend/src/components/layout/TopBar.tsx
+++ b/frontend/src/components/layout/TopBar.tsx
@@ -63,7 +63,7 @@ export function TopBar() {
      >
        {/* Logo area */}
        <Link
-          to="/"
+          to="/home"
          className="flex items-center gap-2.5 pr-4 transition-all duration-200"
        >
          <BrandLogo size="sm" />
--- a/frontend/src/components/layout/tests/AppLayout.test.tsx
+++ b/frontend/src/components/layout/tests/AppLayout.test.tsx
@@ -71,11 +71,11 @@ const FROZEN_NOW = new Date('2026-05-06T00:00:00Z')

 function renderAppLayout() {
  return render(
-    <MemoryRouter initialEntries={['/']}>
+    <MemoryRouter initialEntries={['/home']}>
      <Routes>
        <Route element={<AppLayout />}>
          <Route
-            index
+            path="/home"
            element={<div data-testid="child-route-content">child route</div>}
          />
        </Route>
--- a/frontend/src/components/layout/tests/ProtectedRoute.test.tsx
+++ b/frontend/src/components/layout/tests/ProtectedRoute.test.tsx
@@ -0,0 +1,59 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Routes, Route, useLocation } from 'react-router-dom'
+
+import { ProtectedRoute } from '../ProtectedRoute'
+import { useAuthStore } from '@/store/authStore'
+
+/**
+ * Probe component: surfaces the current pathname and `location.state.from` so
+ * the test can assert both the redirect target and that the original
+ * destination is preserved for post-login return.
+ */
+function LocationProbe() {
+  const loc = useLocation()
+  const from =
+    (loc.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? ''
+  return (
+    <>
+      <div data-testid="probe-pathname">{loc.pathname}</div>
+      <div data-testid="probe-from">{from}</div>
+    </>
+  )
+}
+
+describe('ProtectedRoute — unauthenticated redirect', () => {
+  beforeEach(() => {
+    useAuthStore.setState({
+      user: null,
+      token: null,
+      isAuthenticated: false,
+      isLoading: false,
+    })
+  })
+
+  it('redirects unauthenticated visits to /home → / and preserves origin in state.from', () => {
+    render(
+      <MemoryRouter initialEntries={['/home']}>
+        <Routes>
+          <Route
+            path="/home"
+            element={
+              <ProtectedRoute>
+                <div data-testid="home-content">home</div>
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/" element={<LocationProbe />} />
+        </Routes>
+      </MemoryRouter>,
+    )
+
+    // The protected page should not render.
+    expect(screen.queryByTestId('home-content')).not.toBeInTheDocument()
+
+    // We landed on / (the public landing route), not /landing.
+    expect(screen.getByTestId('probe-pathname')).toHaveTextContent('/')
+    expect(screen.getByTestId('probe-from')).toHaveTextContent('/home')
+  })
+})
--- a/frontend/src/pages/AssistantChatPage.tsx
+++ b/frontend/src/pages/AssistantChatPage.tsx
@@ -2416,7 +2416,7 @@ export default function AssistantChatPage() {
          setShowConclude(false)
          if (activeSessionStatus === 'escalated') {
            toast.info('Session escalated. Heading back to your dashboard.')
-            navigate('/')
+            navigate('/home')
          }
        }}
        onConclude={handleConclude}
--- a/frontend/src/pages/ContactPage.tsx
+++ b/frontend/src/pages/ContactPage.tsx
@@ -7,7 +7,7 @@ export default function ContactPage() {
      <PageMeta title="Contact" description="Contact ResolutionFlow customer service, sales, billing, or security." />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-4">Contact ResolutionFlow</h1>
          <p className="text-muted-foreground mb-10">
            We respond to customer inquiries Monday through Friday during U.S. business hours, excluding federal holidays. Email is the fastest path to a response.
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -164,46 +164,74 @@ export default function LandingPage() {
            </div>
          </section>

-          {/* Problem — asymmetric: headline left, cards right */}
-          <section id="problem" className="landing-section landing-section-alt landing-reveal">
+          {/* Problem — editorial list, no cards */}
+          <section id="problem" className="landing-section landing-section-alt landing-reveal landing-section-tight">
            <div className="landing-section-inner">
              <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." />
+                  <p>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.</p>
                </div>
+                <ol className="landing-problem-list">
+                  <li className="landing-problem-item">
+                    <span className="landing-problem-num">01</span>
+                    <div className="landing-problem-body">
+                      <h3>15&ndash;25 min lost per ticket</h3>
+                      <p>More time documenting than resolving. After a complex issue, writing notes is the last thing anyone does.</p>
+                    </div>
+                  </li>
+                  <li className="landing-problem-item">
+                    <span className="landing-problem-num">02</span>
+                    <div className="landing-problem-body">
+                      <h3>Vague, useless notes</h3>
+                      <p>&ldquo;Fixed Outlook&rdquo; tells no one anything. Notes under pressure are always too vague to help next time.</p>
+                    </div>
+                  </li>
+                  <li className="landing-problem-item">
+                    <span className="landing-problem-num">03</span>
+                    <div className="landing-problem-body">
+                      <h3>Knowledge walks out the door</h3>
+                      <p>When a senior engineer leaves, years of tribal knowledge vanish overnight.</p>
+                    </div>
+                  </li>
+                  <li className="landing-problem-item">
+                    <span className="landing-problem-num">04</span>
+                    <div className="landing-problem-body">
+                      <h3>Context switching kills speed</h3>
+                      <p>Jumping between the issue, docs, PSA tickets, and knowledge bases fragments focus.</p>
+                    </div>
+                  </li>
+                </ol>
              </div>
            </div>
          </section>

-          {/* Equation */}
+          {/* Equation — typographic moment */}
          <div className="landing-equation-section landing-reveal">
            <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 className="landing-brand-equation" aria-label="Resolution plus documentation minus time equals ResolutionFlow">
+                <div className="landing-eq-lhs">
+                  <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>
+                </div>
+                <div className="landing-eq-equals">
+                  <span className="landing-eq-operator-equals">=</span>
+                </div>
+                <div className="landing-eq-result">ResolutionFlow</div>
              </div>
              <p className="landing-equation-desc">
-                What if documentation was a <em>byproduct</em> of solving the issue &mdash; not a separate task?
+                What if documentation was a <em>byproduct</em> of solving the issue, not a separate task?
              </p>
            </div>
          </div>

          {/* How It Works — zigzag */}
-          <section id="how-it-works" className="landing-section landing-reveal">
+          <section id="how-it-works" className="landing-section landing-reveal landing-section-tight">
            <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>
@@ -268,54 +296,47 @@ export default function LandingPage() {
            </div>
          </section>

-          {/* Features */}
-          <section id="features" className="landing-section landing-section-alt landing-reveal">
+          {/* Features — editorial spec list */}
+          <section id="features" className="landing-section landing-section-alt landing-reveal landing-section-generous">
            <div className="landing-section-inner">
              <div className="landing-section-label">Features</div>
              <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-marker" aria-hidden="true">FP</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>
+                  <h3>FlowPilot, your AI copilot</h3>
+                  <p>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.</p>
                </div>
              </div>

-              <div className="landing-features-grid">
-                <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 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"><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="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"><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"><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 to ConnectWise, Atera, and Syncro. Push session docs straight to tickets."
-                />
-              </div>
+              <dl className="landing-feature-spec">
+                <div className="landing-feature-row">
+                  <dt>Guided Flows</dt>
+                  <dd>Build step-by-step troubleshooting paths your team can follow. Great for onboarding and consistency.</dd>
+                </div>
+                <div className="landing-feature-row">
+                  <dt>Zero Empty Tickets</dt>
+                  <dd>Every session generates timestamped notes, formatted for your PSA. No more empty ticket closures.</dd>
+                </div>
+                <div className="landing-feature-row">
+                  <dt>Team Knowledge</dt>
+                  <dd>Solutions are saved and surfaced when the next engineer hits a similar issue.</dd>
+                </div>
+                <div className="landing-feature-row">
+                  <dt>Session Analytics</dt>
+                  <dd>Track resolution times, identify recurring issues, and measure team performance.</dd>
+                </div>
+                <div className="landing-feature-row">
+                  <dt>PSA Integration</dt>
+                  <dd>Connect to ConnectWise, Atera, and Syncro. Push session docs straight to tickets.</dd>
+                </div>
+              </dl>
            </div>
          </section>

          {/* Pricing */}
-          <section id="pricing" className="landing-section landing-reveal">
+          <section id="pricing" className="landing-section landing-reveal landing-section-generous">
            <div className="landing-section-inner">
              <div className="landing-section-label">Pricing</div>
              <h2 className="landing-section-title">Simple pricing. No surprises.</h2>
@@ -364,7 +385,7 @@ export default function LandingPage() {
          </section>

          {/* FAQ */}
-          <section id="faq" className="landing-section landing-section-alt landing-reveal">
+          <section id="faq" className="landing-section landing-section-alt landing-reveal landing-section-tight">
            <div className="landing-section-inner">
              <div className="landing-section-label">FAQ</div>
              <h2 className="landing-section-title">Common questions</h2>
@@ -399,15 +420,16 @@ export default function LandingPage() {
            </div>
          </div>

-          {/* CTA */}
-          <section className="landing-cta-section landing-reveal">
+          {/* CTA — drenched */}
+          <section className="landing-cta-section landing-cta-drench landing-reveal">
            <div className="landing-cta-inner">
-              <h2>Ready to stop writing ticket notes?</h2>
-              <p>Get early access. Troubleshoot your next ticket with FlowPilot.</p>
+              <div className="landing-cta-eyebrow">Stop writing ticket notes</div>
+              <h2>Troubleshoot your next ticket with FlowPilot.</h2>
+              <p>Get early access. Free to start, no credit card.</p>
              <div className="landing-cta-actions">
-                <Link to="/register?from=beta" className="landing-btn-hero-primary">Get started</Link>
+                <Link to="/register?from=beta" className="landing-btn-cta-invert">Get started</Link>
+                <a href="#how-it-works" className="landing-btn-cta-ghost">See how it works</a>
              </div>
-              <p className="landing-cta-fine-print">Free to start. No credit card required.</p>
            </div>
          </section>

@@ -421,30 +443,6 @@ export default function LandingPage() {

 /* ---- Sub-components ---- */

-function ProblemCard({ icon, color, title, description }: {
-  icon: string; color: string; title: string; description: string
-}) {
-  return (
-    <div className="landing-problem-card">
-      <div className={`landing-problem-icon ${color}`}>{icon}</div>
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </div>
-  )
-}
-
-function FeatureCard({ icon, title, description }: {
-  icon: React.ReactNode; title: string; description: string
-}) {
-  return (
-    <div className="landing-feature-card">
-      <div className="landing-feature-icon">{icon}</div>
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </div>
-  )
-}
-
 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; plan: string
--- a/frontend/src/pages/OAuthCallbackPage.tsx
+++ b/frontend/src/pages/OAuthCallbackPage.tsx
@@ -112,10 +112,10 @@ export function OAuthCallbackPage() {

        // Invitee path lands on the dashboard with the teammate-welcome
        // marker; new self-serve owners go to the welcome wizard; returning
-        // users to /.
-        let dest = '/'
+        // users to /home.
+        let dest = '/home'
        if (decoded?.accountInviteCode) {
-          dest = '/?welcome=teammate'
+          dest = '/home?welcome=teammate'
        } else if (result.is_new_user) {
          dest = '/welcome'
        }
--- a/frontend/src/pages/PoliciesPage.tsx
+++ b/frontend/src/pages/PoliciesPage.tsx
@@ -7,7 +7,7 @@ export default function PoliciesPage() {
      <PageMeta title="Customer Policies" description="ResolutionFlow customer service, billing, refunds, cancellation, legal restrictions, and promotional terms." />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-4">Customer Policies</h1>
          <p className="text-muted-foreground mb-2">Last updated: May 7, 2026</p>
          <p className="text-muted-foreground mb-2"><strong className="text-foreground">Operator:</strong> ResolutionFlow, LLC (the &ldquo;Company&rdquo;), operator of ResolutionFlow (&ldquo;Service&rdquo;).</p>
--- a/frontend/src/pages/PrivacyPage.tsx
+++ b/frontend/src/pages/PrivacyPage.tsx
@@ -7,7 +7,7 @@ export default function PrivacyPage() {
      <PageMeta title="Privacy Policy" description="ResolutionFlow Privacy Policy" />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-8">Privacy Policy</h1>
          <p className="text-muted-foreground mb-6">Last updated: March 21, 2026</p>

--- a/frontend/src/pages/PromotionsPage.tsx
+++ b/frontend/src/pages/PromotionsPage.tsx
@@ -7,7 +7,7 @@ export default function PromotionsPage() {
      <PageMeta title="Promotions" description="Active ResolutionFlow promotional offers and their terms." />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-4">Promotions</h1>
          <p className="text-muted-foreground mb-10">Last updated: May 7, 2026</p>

--- a/frontend/src/pages/PublicTemplatesPage.tsx
+++ b/frontend/src/pages/PublicTemplatesPage.tsx
@@ -168,7 +168,7 @@ export default function PublicTemplatesPage() {
        {/* Header */}
        <header className="sticky top-0 z-40 border-b border-border bg-background/80">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
-            <Link to="/landing" className="flex items-center gap-2.5">
+            <Link to="/" className="flex items-center gap-2.5">
              <BrandLogo size="sm" />
              <span className="font-heading text-lg font-semibold">
                <span className="text-foreground">Resolution</span>
@@ -406,7 +406,7 @@ export default function PublicTemplatesPage() {
        <footer className="border-t border-border py-8 px-4 sm:px-6 lg:px-8">
          <div className="max-w-7xl mx-auto flex items-center justify-between">
            <Link
-              to="/landing"
+              to="/"
              className="text-muted-foreground text-sm hover:text-foreground transition-colors"
            >
              Powered by <span className="font-semibold">ResolutionFlow</span>
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -423,7 +423,7 @@ export default function SessionHistoryPage() {
                  description="Start a FlowPilot or chat session to begin. All your sessions will appear here."
                  action={
                    <Link
-                      to="/"
+                      to="/home"
                      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
--- a/frontend/src/pages/TermsPage.tsx
+++ b/frontend/src/pages/TermsPage.tsx
@@ -7,7 +7,7 @@ export default function TermsPage() {
      <PageMeta title="Terms of Service" description="ResolutionFlow Terms of Service" />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
-          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
+          <Link to="/" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-8">Terms of Service</h1>
          <p className="text-muted-foreground mb-6">Last updated: March 21, 2026</p>

--- a/frontend/src/pages/VerifyEmailPage.tsx
+++ b/frontend/src/pages/VerifyEmailPage.tsx
@@ -20,8 +20,7 @@ const SUCCESS_REDIRECT_MS = 1200
 *   "Already verified" state. No API call.
 * - Else fire `POST /auth/email/verify` exactly once (a `useRef` guard keeps
 *   React 19 strict-mode double-invoke from double-firing the call). On
- *   success, refresh the auth store and bounce to `/?verified=1` so the
- *   dashboard surfaces a toast.
+ *   success, refresh the auth store and bounce to `/home`.
 * - On error, show "Invalid or expired token" + a "Resend" CTA that calls
 *   `POST /auth/email/send-verification`.
 */
@@ -70,10 +69,9 @@ export function VerifyEmailPage() {
        if (cancelled) return
        setStatus('success')
        toast.success('Email verified')
-        // Brief success state, then redirect with a query flag so the
-        // dashboard can re-surface confirmation if it wants to.
+        // Brief success state, then redirect to the dashboard.
        window.setTimeout(() => {
-          navigate('/?verified=1', { replace: true })
+          navigate('/home', { replace: true })
        }, SUCCESS_REDIRECT_MS)
      })
      .catch((err) => {
@@ -126,7 +124,7 @@ export function VerifyEmailPage() {
                Redirecting you to the dashboard…
              </p>
              <Link
-                to="/?verified=1"
+                to="/home"
                replace
                className={cn(
                  'mt-6 inline-flex items-center rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground',
@@ -149,7 +147,7 @@ export function VerifyEmailPage() {
                action needed.
              </p>
              <Link
-                to="/"
+                to="/home"
                className={cn(
                  'mt-6 inline-flex items-center rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground',
                  'hover:brightness-110',
@@ -181,7 +179,7 @@ export function VerifyEmailPage() {
                  Resend verification email
                </button>
                <Link
-                  to="/"
+                  to="/home"
                  className={cn(
                    'inline-flex items-center justify-center rounded-lg border border-default bg-input px-6 py-2 text-sm font-medium text-foreground',
                    'hover:border-border-hover',
@@ -204,7 +202,7 @@ export function VerifyEmailPage() {
                Try the link in your verification email again.
              </p>
              <Link
-                to="/"
+                to="/home"
                className={cn(
                  'mt-6 inline-flex items-center rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground',
                  'hover:brightness-110',
--- a/frontend/src/pages/tests/VerifyEmailPage.test.tsx
+++ b/frontend/src/pages/tests/VerifyEmailPage.test.tsx
@@ -52,7 +52,7 @@ function renderPage(initialPath: string) {
      <MemoryRouter initialEntries={[initialPath]}>
        <Routes>
          <Route path="/verify-email" element={<VerifyEmailPage />} />
-          <Route path="/" element={<div>dashboard</div>} />
+          <Route path="/home" element={<div>dashboard</div>} />
        </Routes>
      </MemoryRouter>
    </HelmetProvider>,
@@ -130,7 +130,7 @@ describe('VerifyEmailPage', () => {
        <MemoryRouter initialEntries={['/verify-email?token=valid-token']}>
          <Routes>
            <Route path="/verify-email" element={<VerifyEmailPage />} />
-            <Route path="/" element={<div>dashboard</div>} />
+            <Route path="/home" element={<div>dashboard</div>} />
          </Routes>
        </MemoryRouter>
      </HelmetProvider>,
@@ -142,7 +142,7 @@ describe('VerifyEmailPage', () => {
        <MemoryRouter initialEntries={['/verify-email?token=valid-token']}>
          <Routes>
            <Route path="/verify-email" element={<VerifyEmailPage />} />
-            <Route path="/" element={<div>dashboard</div>} />
+            <Route path="/home" element={<div>dashboard</div>} />
          </Routes>
        </MemoryRouter>
      </HelmetProvider>,
--- a/frontend/src/pages/welcome/WelcomeRouter.tsx
+++ b/frontend/src/pages/welcome/WelcomeRouter.tsx
@@ -6,8 +6,8 @@ import { PageLoader } from '@/components/common/PageLoader'
 * `/welcome` index — redirect to the next incomplete step (or `/` if done /
 * dismissed). Decision table:
 *
- *   onboarding_dismissed === true            → /
- *   onboarding_step_completed >= 3           → /
+ *   onboarding_dismissed === true            → /home
+ *   onboarding_step_completed >= 3           → /home
 *   onboarding_step_completed === null/0     → /welcome/step-1
 *   onboarding_step_completed === 1          → /welcome/step-2
 *   onboarding_step_completed === 2          → /welcome/step-3
@@ -19,10 +19,10 @@ export function WelcomeRouter() {
  // the page loader rather than racing past the redirect.
  if (!user) return <PageLoader />

-  if (user.onboarding_dismissed) return <Navigate to="/" replace />
+  if (user.onboarding_dismissed) return <Navigate to="/home" replace />

  const completed = user.onboarding_step_completed ?? 0
-  if (completed >= 3) return <Navigate to="/" replace />
+  if (completed >= 3) return <Navigate to="/home" replace />
  if (completed === 2) return <Navigate to="/welcome/step-3" replace />
  if (completed === 1) return <Navigate to="/welcome/step-2" replace />
  return <Navigate to="/welcome/step-1" replace />
--- a/frontend/src/pages/welcome/WelcomeStep1.tsx
+++ b/frontend/src/pages/welcome/WelcomeStep1.tsx
@@ -85,7 +85,7 @@ export function WelcomeStep1() {
    try {
      await onboardingApi.dismissRest()
      await fetchUser()
-      navigate('/')
+      navigate('/home')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
--- a/frontend/src/pages/welcome/WelcomeStep2.tsx
+++ b/frontend/src/pages/welcome/WelcomeStep2.tsx
@@ -90,7 +90,7 @@ export function WelcomeStep2() {
    try {
      await onboardingApi.dismissRest()
      await fetchUser()
-      navigate('/')
+      navigate('/home')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
--- a/frontend/src/pages/welcome/WelcomeStep3.tsx
+++ b/frontend/src/pages/welcome/WelcomeStep3.tsx
@@ -39,7 +39,7 @@ function makeEmptyRow(): InviteRow {
 *
 *   1. POST `/accounts/me/invites/bulk` with populated rows.
 *   2. PATCH `/users/me/onboarding-step` `{step: 3, action: "complete"}`.
- *   3. Navigate to `/?welcome=true` and fire a "You're all set" toast.
+ *   3. Navigate to `/home` and fire a "You're all set" toast.
 *
 * Partial-failure UX: rows in `failed[]` keep their input and show an
 * inline error. The wizard does NOT auto-advance when there are failures —
@@ -109,7 +109,7 @@ export function WelcomeStep3() {
    await onboardingApi.updateStep({ step: 3, action: 'complete' })
    await fetchUser()
    toast.success("You're all set!")
-    navigate('/?welcome=true')
+    navigate('/home')
  }

  const handleSendInvites = async () => {
@@ -177,7 +177,7 @@ export function WelcomeStep3() {
      await onboardingApi.updateStep({ step: 3, action: 'skip' })
      await fetchUser()
      toast.success("You're all set!")
-      navigate('/?welcome=true')
+      navigate('/home')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
@@ -191,7 +191,7 @@ export function WelcomeStep3() {
    try {
      await onboardingApi.dismissRest()
      await fetchUser()
-      navigate('/')
+      navigate('/home')
    } catch {
      setError('Could not save. Please try again.')
      setSubmitting(null)
--- a/frontend/src/pages/welcome/tests/WelcomeRouter.test.tsx
+++ b/frontend/src/pages/welcome/tests/WelcomeRouter.test.tsx
@@ -39,7 +39,7 @@ function renderRouter() {
        <Route path="/welcome/step-1" element={<div>step-1</div>} />
        <Route path="/welcome/step-2" element={<div>step-2</div>} />
        <Route path="/welcome/step-3" element={<div>step-3</div>} />
-        <Route path="/" element={<div>dashboard</div>} />
+        <Route path="/home" element={<div>dashboard</div>} />
      </Routes>
    </MemoryRouter>,
  )
@@ -100,7 +100,7 @@ describe('WelcomeRouter', () => {
    })
  })

-  it('redirects to / when onboarding_step_completed >= 3', async () => {
+  it('redirects to /home when onboarding_step_completed >= 3', async () => {
    useAuthStore.setState({
      user: makeUser({ onboarding_step_completed: 3 }),
    })
@@ -110,7 +110,7 @@ describe('WelcomeRouter', () => {
    })
  })

-  it('redirects to / when onboarding_dismissed is true', async () => {
+  it('redirects to /home when onboarding_dismissed is true', async () => {
    useAuthStore.setState({
      user: makeUser({
        onboarding_step_completed: 1,
--- a/frontend/src/pages/welcome/tests/WelcomeStep1.test.tsx
+++ b/frontend/src/pages/welcome/tests/WelcomeStep1.test.tsx
@@ -65,7 +65,7 @@ function renderPage() {
      <Routes>
        <Route path="/welcome/step-1" element={<WelcomeStep1 />} />
        <Route path="/welcome/step-2" element={<div>step-2</div>} />
-        <Route path="/" element={<div>dashboard</div>} />
+        <Route path="/home" element={<div>dashboard</div>} />
      </Routes>
    </MemoryRouter>,
  )
@@ -148,7 +148,7 @@ describe('WelcomeStep1', () => {
    })
  })

-  it('Skip-the-rest dismisses and navigates to /', async () => {
+  it('Skip-the-rest dismisses and navigates to /home', async () => {
    const user = userEvent.setup()
    renderPage()

--- a/frontend/src/pages/welcome/tests/WelcomeStep2.test.tsx
+++ b/frontend/src/pages/welcome/tests/WelcomeStep2.test.tsx
@@ -66,7 +66,7 @@ function renderPage() {
        <Route path="/welcome/step-2" element={<WelcomeStep2 />} />
        <Route path="/welcome/step-3" element={<div>step-3</div>} />
        <Route path="/account/integrations" element={<div>integrations</div>} />
-        <Route path="/" element={<div>dashboard</div>} />
+        <Route path="/home" element={<div>dashboard</div>} />
      </Routes>
    </MemoryRouter>,
  )
@@ -158,7 +158,7 @@ describe('WelcomeStep2', () => {
    expect(screen.queryByTestId('welcome-step-2-connect-now')).not.toBeInTheDocument()
  })

-  it('Skip-the-rest dismisses and navigates to /', async () => {
+  it('Skip-the-rest dismisses and navigates to /home', async () => {
    const user = userEvent.setup()
    renderPage()

--- a/frontend/src/pages/welcome/tests/WelcomeStep3.test.tsx
+++ b/frontend/src/pages/welcome/tests/WelcomeStep3.test.tsx
@@ -88,7 +88,7 @@ function renderPage() {
    <MemoryRouter initialEntries={['/welcome/step-3']}>
      <Routes>
        <Route path="/welcome/step-3" element={<WelcomeStep3 />} />
-        <Route path="/" element={<div>dashboard</div>} />
+        <Route path="/home" element={<div>dashboard</div>} />
      </Routes>
    </MemoryRouter>,
  )
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -7,6 +7,7 @@ import { RouteError } from '@/components/common/RouteError'
 import { ErrorBoundary } from '@/components/common/ErrorBoundary'
 import { PageLoader } from '@/components/common/PageLoader'
 import { lazyWithRetry } from '@/lib/lazyWithRetry'
+import { useAuthStore } from '@/store/authStore'
 import { L1RouteGuard } from '@/components/layout/L1RouteGuard'

 const sentryCreateBrowserRouter = Sentry.wrapCreateBrowserRouterV7(createBrowserRouter)
@@ -125,10 +126,27 @@ function page(Component: React.LazyExoticComponent<React.ComponentType>) {
  )
 }

+/**
+ * Public `/` wrapper — sends authenticated users to /home before LandingPage
+ * mounts, so they never see marketing-frame flicker.
+ */
+// eslint-disable-next-line react-refresh/only-export-components -- router.tsx exports a router instance, not a component
+function PublicLanding() {
+  const isAuthed = useAuthStore((s) => s.isAuthenticated)
+  if (isAuthed) return <Navigate to="/home" replace />
+  return page(LandingPage)
+}
+
 export const router = sentryCreateBrowserRouter([
+  {
+    path: '/',
+    element: <PublicLanding />,
+    errorElement: <RouteError />,
+  },
+  // Stale-bookmark redirect — keep one release, delete in a follow-up.
  {
    path: '/landing',
-    element: page(LandingPage),
+    element: <Navigate to="/" replace />,
    errorElement: <RouteError />,
  },
  {
@@ -236,7 +254,6 @@ export const router = sentryCreateBrowserRouter([
    errorElement: <RouteError />,
  },
  {
-    path: '/',
    element: (
      <ProtectedRoute>
        <AppLayout />
@@ -244,61 +261,61 @@ export const router = sentryCreateBrowserRouter([
    ),
    errorElement: <RouteError />,
    children: [
-      { index: true, element: page(QuickStartPage) },
-      { path: 'trees', element: page(TreeLibraryPage) },
-      { path: 'my-trees', element: page(MyTreesPage) },
-      { path: 'trees/new', element: page(TreeEditorPage) },
-      { path: 'trees/:id/edit', element: page(TreeEditorPage) },
-      { path: 'flows/new', element: page(ProceduralEditorPage) },
-      { path: 'flows/:id/edit', element: page(ProceduralEditorPage) },
-      { path: 'flows/:id/navigate', element: page(ProceduralNavigationPage) },
-      { path: 'flows/:id/maintenance', element: page(MaintenanceFlowDetailPage) },
-      { path: 'flows/:id/batches/:batchId', element: page(BatchStatusPage) },
-      { path: 'trees/:id/navigate', element: page(TreeNavigationPage) },
-      { path: 'sessions', element: page(SessionHistoryPage) },
-      { path: 'sessions/:id', element: page(SessionDetailPage) },
-      { path: 'tickets', element: page(TicketsPage) },
-      { path: 'shares', element: page(MySharesPage) },
-      { path: 'analytics', element: page(TeamAnalyticsPage) },
-      { path: 'analytics/me', element: page(MyAnalyticsPage) },
-      { path: 'feedback', element: page(FeedbackPage) },
-      { path: 'step-library', element: page(StepLibraryPage) },
-      { path: 'scripts', element: page(ScriptLibraryPage) },
-      { path: 'scripts/manage', element: page(ScriptManagePage) },
-      { path: 'script-builder', element: page(ScriptBuilderPage) },
-      { path: 'network-diagrams', element: page(NetworkDiagramsPage) },
-      { path: 'network-diagrams/new', element: page(DiagramEditorPage) },
-      { path: 'network-diagrams/:id', element: page(DiagramEditorPage) },
-      { path: 'kb-accelerator', element: page(KBAcceleratorPage) },
+      { path: '/home', element: page(QuickStartPage) },
+      { path: '/trees', element: page(TreeLibraryPage) },
+      { path: '/my-trees', element: page(MyTreesPage) },
+      { path: '/trees/new', element: page(TreeEditorPage) },
+      { path: '/trees/:id/edit', element: page(TreeEditorPage) },
+      { path: '/flows/new', element: page(ProceduralEditorPage) },
+      { path: '/flows/:id/edit', element: page(ProceduralEditorPage) },
+      { path: '/flows/:id/navigate', element: page(ProceduralNavigationPage) },
+      { path: '/flows/:id/maintenance', element: page(MaintenanceFlowDetailPage) },
+      { path: '/flows/:id/batches/:batchId', element: page(BatchStatusPage) },
+      { path: '/trees/:id/navigate', element: page(TreeNavigationPage) },
+      { path: '/sessions', element: page(SessionHistoryPage) },
+      { path: '/sessions/:id', element: page(SessionDetailPage) },
+      { path: '/tickets', element: page(TicketsPage) },
+      { path: '/shares', element: page(MySharesPage) },
+      { path: '/analytics', element: page(TeamAnalyticsPage) },
+      { path: '/analytics/me', element: page(MyAnalyticsPage) },
+      { path: '/feedback', element: page(FeedbackPage) },
+      { path: '/step-library', element: page(StepLibraryPage) },
+      { path: '/scripts', element: page(ScriptLibraryPage) },
+      { path: '/scripts/manage', element: page(ScriptManagePage) },
+      { path: '/script-builder', element: page(ScriptBuilderPage) },
+      { path: '/network-diagrams', element: page(NetworkDiagramsPage) },
+      { path: '/network-diagrams/new', element: page(DiagramEditorPage) },
+      { path: '/network-diagrams/:id', element: page(DiagramEditorPage) },
+      { path: '/kb-accelerator', element: page(KBAcceleratorPage) },
      // Phase 1 — FlowPilot migration. The unified chat-primary surface lives at
      // /pilot; /assistant permanently redirects. FlowPilotSessionPage (old
      // guided surface) is no longer mounted.
-      { path: 'pilot', element: page(AssistantChatPage) },
-      { path: 'pilot/:sessionId', element: page(AssistantChatPage) },
-      { path: 'assistant', element: <Navigate to="/pilot" replace /> },
-      { path: 'assistant/:sessionId', element: <AssistantSessionRedirect /> },
-      { path: 'flow-assist', element: page(FlowAssistPage) },
-      { path: 'escalations', element: page(EscalationQueuePage) },
-      { path: 'queue', element: page(SessionQueuePage) },
-      { path: 'review-queue', element: page(ReviewQueuePage) },
-      { path: 'analytics/flowpilot', element: page(FlowPilotAnalyticsPage) },
-      { path: 'dev/branching', element: page(DevBranchingPage) },
-      { path: 'guides', element: page(GuidesHubPage) },
-      { path: 'guides/:slug', element: page(GuideDetailPage) },
+      { path: '/pilot', element: page(AssistantChatPage) },
+      { path: '/pilot/:sessionId', element: page(AssistantChatPage) },
+      { path: '/assistant', element: <Navigate to="/pilot" replace /> },
+      { path: '/assistant/:sessionId', element: <AssistantSessionRedirect /> },
+      { path: '/flow-assist', element: page(FlowAssistPage) },
+      { path: '/escalations', element: page(EscalationQueuePage) },
+      { path: '/queue', element: page(SessionQueuePage) },
+      { path: '/review-queue', element: page(ReviewQueuePage) },
+      { path: '/analytics/flowpilot', element: page(FlowPilotAnalyticsPage) },
+      { path: '/dev/branching', element: page(DevBranchingPage) },
+      { path: '/guides', element: page(GuidesHubPage) },
+      { path: '/guides/:slug', element: page(GuideDetailPage) },
      // Welcome wizard (Phase 2). Mounted inside AppLayout so the email-
      // verification banner persists above each step.
-      { path: 'welcome', element: page(WelcomeRouter) },
-      { path: 'welcome/step-1', element: page(WelcomeStep1) },
-      { path: 'welcome/step-2', element: page(WelcomeStep2) },
-      { path: 'welcome/step-3', element: page(WelcomeStep3) },
+      { path: '/welcome', element: page(WelcomeRouter) },
+      { path: '/welcome/step-1', element: page(WelcomeStep1) },
+      { path: '/welcome/step-2', element: page(WelcomeStep2) },
+      { path: '/welcome/step-3', element: page(WelcomeStep3) },
      // L1 workspace routes — gated by canUseL1Surface
-      { path: 'l1', element: <L1RouteGuard>{page(L1Dashboard)}</L1RouteGuard> },
-      { path: 'l1/walk/:sessionId', element: <L1RouteGuard>{page(L1WalkPage)}</L1RouteGuard> },
-      { path: 'l1/drafts', element: <L1RouteGuard>{page(L1DraftsPage)}</L1RouteGuard> },
-      { path: 'l1/tickets', element: <L1RouteGuard>{page(L1TicketsPage)}</L1RouteGuard> },
+      { path: '/l1', element: <L1RouteGuard>{page(L1Dashboard)}</L1RouteGuard> },
+      { path: '/l1/walk/:sessionId', element: <L1RouteGuard>{page(L1WalkPage)}</L1RouteGuard> },
+      { path: '/l1/drafts', element: <L1RouteGuard>{page(L1DraftsPage)}</L1RouteGuard> },
+      { path: '/l1/tickets', element: <L1RouteGuard>{page(L1TicketsPage)}</L1RouteGuard> },
      // Admin routes
      {
-        path: 'admin',
+        path: '/admin',
        element: (
          <ErrorBoundary>
            <Suspense fallback={<PageLoader />}>
@@ -327,7 +344,7 @@ export const router = sentryCreateBrowserRouter([
      },
      // Account routes
      {
-        path: 'account',
+        path: '/account',
        element: (
          <ErrorBoundary>
            <Suspense fallback={<PageLoader />}>
--- a/frontend/src/styles/landing.css
+++ b/frontend/src/styles/landing.css
@@ -7,7 +7,7 @@
 /* ---- LANDING COLOR PALETTE ---- */
 .landing-page {
  --lp-bg: #14161d;
-  --lp-bg-alt: #181a22;
+  --lp-bg-alt: #1c1f2a;
  --lp-card: #1e2028;
  --lp-elevated: #262830;
  --lp-border: #2a2e3a;
@@ -23,14 +23,24 @@
  --lp-success: #34d399;
  --lp-danger: #f87171;
  --lp-warning: #fbbf24;
+
+  /* Typeset: a single hyperlegibility-engineered family across the page.
+     Atkinson Hyperlegible Next (Braille Institute, 2024) — designed for
+     low-vision readers. Picked here because MSP engineers read this page
+     mid-ticket, under pressure, often glancing. Hyperlegibility IS the
+     brand value, not decoration. Mono sibling pairs naturally for
+     timestamps and ticket IDs. */
+  --lp-font-display: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
+  --lp-font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
+  --lp-font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
 }

 /* ---- BASE ---- */
 .landing-page {
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: var(--lp-font-body);
  background: var(--lp-bg);
  color: var(--lp-text-body);
-  line-height: 1.6;
+  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
@@ -110,7 +120,7 @@
 }

 .landing-nav-wordmark {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lp-text-heading);
@@ -189,6 +199,14 @@
  padding: 5rem 2rem;
 }

+.landing-section-tight {
+  padding: 4rem 2rem 5rem;
+}
+
+.landing-section-generous {
+  padding: 7rem 2rem 6rem;
+}
+
 .landing-section-alt {
  background: var(--lp-bg-alt);
 }
@@ -199,24 +217,36 @@
 }

 .landing-section-label {
-  font-family: 'IBM Plex Sans', sans-serif;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--lp-accent-text);
-  letter-spacing: 0.14em;
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  font-family: var(--lp-font-display);
+  font-size: 0.9rem;
+  font-weight: 700;
+  color: var(--lp-accent);
+  letter-spacing: 0.08em;
  text-transform: uppercase;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.landing-section-label::before {
+  content: '';
+  width: 40px;
+  height: 2px;
+  background: var(--lp-accent);
+  flex-shrink: 0;
 }

 .landing-section-title {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-family: var(--lp-font-display);
+  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  color: var(--lp-text-heading);
-  letter-spacing: -0.03em;
-  line-height: 1.15;
+  letter-spacing: -0.035em;
+  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 1rem;
+  max-width: 22ch;
 }

 .landing-section-desc {
@@ -251,8 +281,8 @@
  position: absolute;
  inset: 0;
  background:
-    linear-gradient(to right, #14161d 22%, rgba(20, 22, 29, 0.80) 38%, rgba(20, 22, 29, 0.20) 58%, transparent 78%),
-    linear-gradient(to top, #14161d 0%, rgba(20, 22, 29, 0) 16%);
+    linear-gradient(to right, #14161d 0%, #14161d 38%, rgba(20, 22, 29, 0.92) 52%, rgba(20, 22, 29, 0.35) 72%, transparent 92%),
+    linear-gradient(to top, #14161d 0%, rgba(20, 22, 29, 0.4) 24%, rgba(20, 22, 29, 0) 48%);
  z-index: 1;
 }

@@ -300,7 +330,7 @@
 }

 .landing-hero h1 {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
@@ -447,7 +477,7 @@
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--lp-text-secondary);
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: var(--lp-font-body);
 }

 .tc-status {
@@ -531,7 +561,7 @@
 .tc-time {
  font-size: 0.55rem;
  color: var(--lp-text-dim);
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--lp-font-mono);
  flex-shrink: 0;
  min-width: 28px;
 }
@@ -601,7 +631,7 @@
  align-items: flex-start;
  gap: 8px;
  font-size: 0.65rem;
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: var(--lp-font-body);
  padding: 6px 10px;
  border-radius: 6px;
 }
@@ -641,7 +671,7 @@
 }

 .landing-mock-chat-line code {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: var(--lp-font-mono);
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 3px;
@@ -708,142 +738,172 @@
  color: var(--lp-success);
 }

-/* ---- PROBLEM SECTION (asymmetric) ---- */
+/* ---- PROBLEM SECTION (editorial, no cards) ---- */
 .landing-problem-layout {
  display: grid;
-  grid-template-columns: 2fr 3fr;
-  gap: 3rem;
+  grid-template-columns: 5fr 7fr;
+  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
 }

+.landing-problem-headline {
+  position: sticky;
+  top: 6rem;
+}
+
 .landing-problem-headline h2 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-family: var(--lp-font-display);
+  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--lp-text-heading);
-  letter-spacing: -0.03em;
-  line-height: 1.15;
-  margin: 0 0 1rem;
+  letter-spacing: -0.035em;
+  line-height: 1.05;
+  margin: 0 0 1.25rem;
 }

 .landing-problem-headline > p {
-  font-size: 1rem;
+  font-size: 1.05rem;
  color: var(--lp-text-secondary);
-  line-height: 1.7;
+  line-height: 1.65;
+  max-width: 36ch;
 }

-.landing-problem-grid {
+.landing-problem-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.landing-problem-item {
  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  grid-template-columns: 4.5rem 1fr;
+  column-gap: 1.25rem;
+  padding: 2rem 0;
+  border-top: 1px solid var(--lp-border);
 }

-.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-item:last-child {
+  border-bottom: 1px solid var(--lp-border);
 }

-.landing-problem-card:hover {
-  border-color: var(--lp-border-hover);
+.landing-problem-num {
+  font-family: var(--lp-font-display);
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--lp-accent);
+  letter-spacing: 0.08em;
+  padding-top: 0.65rem;
 }

-.landing-problem-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 0.75rem;
-  font-size: 1.1rem;
-}
-
-.landing-problem-icon.red {
-  background: rgba(248, 113, 113, 0.1);
-  color: var(--lp-danger);
-}
-
-.landing-problem-icon.amber {
-  background: rgba(251, 191, 36, 0.1);
-  color: var(--lp-warning);
-}
-
-.landing-problem-icon.slate {
-  background: rgba(145, 152, 168, 0.1);
-  color: var(--lp-text-secondary);
-}
-
-.landing-problem-icon.violet {
-  background: rgba(139, 92, 246, 0.1);
-  color: #a78bfa;
-}
-
-.landing-problem-card h3 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 0.95rem;
+.landing-problem-body h3 {
+  font-family: var(--lp-font-display);
+  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 700;
  color: var(--lp-text-heading);
-  margin-bottom: 0.4rem;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.025em;
+  line-height: 1.15;
+  margin: 0 0 0.6rem;
 }

-.landing-problem-card p {
-  font-size: 0.8rem;
+.landing-problem-body p {
+  font-size: 0.95rem;
  color: var(--lp-text-secondary);
-  line-height: 1.6;
+  line-height: 1.65;
  margin: 0;
+  max-width: 52ch;
 }

-/* ---- EQUATION ---- */
+/* ---- EQUATION (hero-scale typographic moment) ---- */
 .landing-equation-section {
-  text-align: center;
-  padding: 4rem 2rem;
+  text-align: left;
+  padding: 9rem 2rem 8rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.landing-equation-section::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(60% 80% at 78% 30%, rgba(96, 165, 250, 0.10), transparent 70%);
+  pointer-events: none;
+  z-index: 0;
 }

 .landing-equation-inner {
-  max-width: 900px;
+  max-width: 1200px;
  margin: 0 auto;
+  position: relative;
+  z-index: 1;
 }

 .landing-brand-equation {
+  font-family: var(--lp-font-display);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 0.95;
+  margin: 1.5rem 0 2rem;
+}
+
+.landing-eq-lhs {
  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
+  align-items: baseline;
  flex-wrap: wrap;
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(1.25rem, 3vw, 2.25rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  margin-bottom: 1.5rem;
+  gap: 0.5em;
+  font-size: clamp(1.5rem, 4vw, 3rem);
+  color: var(--lp-text-secondary);
+  margin-bottom: 0.4rem;
 }

 .landing-eq-item {
-  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(--lp-accent);
-  font-size: 1.5em;
+  font-weight: 600;
+}
+
+.landing-eq-equals {
+  font-size: clamp(2rem, 5vw, 4rem);
+  color: var(--lp-accent);
+  line-height: 1;
+  margin: 0.1em 0 0.05em;
+}
+
+.landing-eq-operator-equals {
+  display: inline-block;
 }

 .landing-eq-result {
-  color: var(--lp-accent-text);
+  font-size: clamp(2.25rem, 11vw, 9.5rem);
+  font-weight: 800;
+  color: var(--lp-text-heading);
+  letter-spacing: -0.055em;
+  line-height: 0.92;
+  display: inline-block;
+  position: relative;
+  padding-bottom: 0.05em;
+  max-width: 100%;
+}
+
+.landing-eq-result::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 14%;
+  bottom: 0.02em;
+  height: 0.12em;
+  background: linear-gradient(to right, var(--lp-accent), rgba(96, 165, 250, 0));
 }

 .landing-equation-desc {
-  font-size: 1.05rem;
+  font-size: 1.1rem;
  color: var(--lp-text-secondary);
-  max-width: 480px;
-  margin: 0 auto;
-  line-height: 1.7;
+  max-width: 520px;
+  margin: 2rem 0 0;
+  line-height: 1.6;
 }

 /* ---- HOW IT WORKS (zigzag) ---- */
@@ -872,7 +932,7 @@
 }

 .landing-zigzag-number {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--lp-accent);
@@ -881,7 +941,7 @@
 }

 .landing-zigzag-text h3 {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lp-text-heading);
@@ -907,100 +967,79 @@
  background: var(--lp-bg-alt);
 }

-/* ---- FEATURES ---- */
+/* ---- FEATURES (editorial spec list) ---- */
 .landing-feature-highlight {
-  display: flex;
-  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);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: 1.75rem;
+  padding: 2.25rem 2rem;
+  border-radius: 0;
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--lp-accent);
+  border-bottom: 1px solid var(--lp-border);
  margin-top: 2.5rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
 }

-.landing-feature-highlight-icon {
-  width: 52px;
-  height: 52px;
-  border-radius: 8px;
-  background: rgba(96, 165, 250, 0.15);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.landing-feature-highlight-marker {
+  font-family: var(--lp-font-display);
+  font-size: 2.25rem;
+  font-weight: 800;
  color: var(--lp-accent);
-  flex-shrink: 0;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  padding-right: 1.75rem;
+  border-right: 1px solid var(--lp-border);
 }

 .landing-feature-highlight-content h3 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1.35rem;
+  font-family: var(--lp-font-display);
+  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 700;
  color: var(--lp-text-heading);
-  letter-spacing: -0.01em;
-  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.4rem;
 }

 .landing-feature-highlight-content p {
-  font-size: 0.95rem;
+  font-size: 1rem;
  color: var(--lp-text-secondary);
  line-height: 1.65;
  margin: 0;
+  max-width: 68ch;
 }

-.landing-features-grid {
+.landing-feature-spec {
+  margin: 0;
+  padding: 0;
+}
+
+.landing-feature-row {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1rem;
+  grid-template-columns: minmax(180px, 24%) 1fr;
+  column-gap: 3rem;
+  align-items: baseline;
+  padding: 1.75rem 0;
+  border-bottom: 1px solid var(--lp-border);
 }

-.landing-feature-card {
-  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: var(--lp-border-hover);
-}
-
-.landing-feature-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  background: var(--lp-accent-soft);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-  color: var(--lp-accent-text);
-}
-
-.landing-feature-card h3 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: 1rem;
+.landing-feature-row dt {
+  font-family: var(--lp-font-display);
+  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--lp-text-heading);
-  margin-bottom: 0.4rem;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
 }

-.landing-feature-card p {
-  font-size: 0.85rem;
+.landing-feature-row dd {
+  font-size: 1rem;
  color: var(--lp-text-secondary);
-  line-height: 1.6;
+  line-height: 1.65;
  margin: 0;
-}
-
-/* 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;
+  max-width: 62ch;
 }

 /* ---- PRICING ---- */
@@ -1048,7 +1087,7 @@
 }

 .landing-pricing-plan-name {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--lp-text-heading);
@@ -1069,7 +1108,7 @@
 }

 .landing-pricing-price .amount {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--lp-text-heading);
@@ -1199,7 +1238,7 @@
  border: none;
  cursor: pointer;
  text-align: left;
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: var(--lp-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lp-text-heading);
@@ -1255,7 +1294,7 @@
 }

 .landing-founder-section blockquote {
-  font-family: 'Bricolage Grotesque', sans-serif;
+  font-family: var(--lp-font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
@@ -1271,32 +1310,125 @@
  padding-left: 1.25rem;
 }

-/* ---- CTA ---- */
+/* ---- CTA (drenched) ---- */
 .landing-cta-section {
-  text-align: center;
-  padding: 5rem 2rem;
+  padding: 6rem 2rem;
  background: var(--lp-bg-alt);
 }

+.landing-cta-section.landing-cta-drench {
+  background: var(--lp-accent);
+  color: #0a1430;
+  padding: 7rem 2rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.landing-cta-section.landing-cta-drench::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
+    radial-gradient(60% 80% at 0% 100%, rgba(13, 15, 21, 0.18), transparent 60%);
+  pointer-events: none;
+}
+
 .landing-cta-inner {
-  max-width: 520px;
+  max-width: 1100px;
  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.landing-cta-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  font-family: var(--lp-font-display);
+  font-size: 0.9rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #0a1430;
+  margin-bottom: 1.5rem;
+}
+
+.landing-cta-eyebrow::before {
+  content: '';
+  width: 40px;
+  height: 2px;
+  background: #0a1430;
+  flex-shrink: 0;
+  opacity: 0.55;
 }

 .landing-cta-section h2 {
-  font-family: 'Bricolage Grotesque', sans-serif;
-  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-family: var(--lp-font-display);
+  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
-  color: var(--lp-text-heading);
-  letter-spacing: -0.03em;
-  margin-bottom: 0.75rem;
+  color: #0a1430;
+  letter-spacing: -0.04em;
+  line-height: 1.02;
+  margin: 0 0 1.25rem;
+  max-width: 22ch;
 }

 .landing-cta-section h2 + p {
+  font-size: 1.15rem;
+  color: #0a1430;
+  opacity: 0.78;
+  margin-bottom: 2.5rem;
+  line-height: 1.55;
+  max-width: 44ch;
+}
+
+.landing-cta-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.landing-btn-cta-invert {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
  font-size: 1rem;
-  color: var(--lp-text-secondary);
-  margin-bottom: 2rem;
-  line-height: 1.7;
+  font-weight: 600;
+  color: var(--lp-accent);
+  text-decoration: none;
+  padding: 0.95rem 2rem;
+  border-radius: 8px;
+  background: #ffffff;
+  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
+  letter-spacing: -0.01em;
+  box-shadow: 0 1px 0 rgba(13, 15, 21, 0.08);
+}
+
+.landing-btn-cta-invert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 28px rgba(10, 20, 48, 0.25);
+}
+
+.landing-btn-cta-ghost {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #0a1430;
+  text-decoration: none;
+  padding: 0.95rem 1.5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(10, 20, 48, 0.35);
+  background: transparent;
+  transition: background 0.25s, border-color 0.25s;
+}
+
+.landing-btn-cta-ghost:hover {
+  background: rgba(10, 20, 48, 0.06);
+  border-color: rgba(10, 20, 48, 0.55);
 }

 .landing-cta-email-form {
@@ -1317,7 +1449,7 @@
  border: 1px solid var(--lp-border);
  background: var(--lp-card);
  color: var(--lp-text-heading);
-  font-family: 'IBM Plex Sans', sans-serif;
+  font-family: var(--lp-font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
@@ -1605,8 +1737,18 @@
    gap: 2rem;
  }

-  .landing-problem-grid {
-    grid-template-columns: 1fr;
+  .landing-problem-headline {
+    position: static;
+  }
+
+  .landing-problem-item {
+    grid-template-columns: 3rem 1fr;
+    column-gap: 1rem;
+    padding: 1.5rem 0;
+  }
+
+  .landing-problem-num {
+    padding-top: 0.5rem;
  }

  .landing-zigzag {
@@ -1628,19 +1770,22 @@
    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;
+    grid-template-columns: 1fr;
    gap: 1rem;
-    padding: 1.5rem;
+    padding: 1.5rem 0;
+  }
+
+  .landing-feature-highlight-marker {
+    padding-right: 0;
+    border-right: none;
+    font-size: 1.75rem;
+  }
+
+  .landing-feature-row {
+    grid-template-columns: 1fr;
+    row-gap: 0.6rem;
+    padding: 1.5rem 0;
  }

  .landing-pricing-grid {
@@ -1669,16 +1814,8 @@
  }

  .landing-equation-section {
-    padding: 3rem 1.25rem;
-  }
-
-  .landing-brand-equation {
-    font-size: 1.1rem;
-    gap: 0.4rem;
-  }
-
-  .landing-eq-item {
-    padding: 0.3rem 0.6rem;
+    padding: 5rem 1.25rem 4.5rem;
+    text-align: left;
  }

  .landing-founder-section {