Give the shell one header, a skip link, and a cookie-aware first paint.

Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/layout.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import { Suspense, type ReactNode } from "react";
 import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
+import SkipToContent from "../components/navigation/SkipToContent";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
 import messages from "../../messages/en/index";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
 
 export const metadata: Metadata = {
@@ -27,10 +29,17 @@ export default function AppLayout({ children }: { children: ReactNode }) {
   return (
     <MessagesProvider messages={messages}>
       <AuthModalProvider>
+        <SkipToContent />
         <Suspense fallback={null}>
           <ConditionalNavigation />
         </Suspense>
-        <main className="flex-1">{children}</main>
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex-1 outline-none"
+        >
+          {children}
+        </main>
       </AuthModalProvider>
     </MessagesProvider>
   );