Performance follow-ups

app/(marketing)/layout.tsx

@@ -1,6 +1,9 @@
 import dynamic from "next/dynamic";
 import type { ReactNode } from "react";
 import MarketingNavigation from "../components/navigation/MarketingNavigation";
+import { MessagesProvider } from "../contexts/MessagesContext";
+import { AuthModalProvider } from "../contexts/AuthModalContext";
+import marketingMessages from "../../messages/en/marketing";
 
 // Site footer is part of the public marketing chrome only — not rendered for
 // signed-in product surfaces, admin dashboards, or dev previews. See
@@ -14,10 +17,12 @@ const Footer = dynamic(() => import("../components/navigation/Footer"), {
 
 export default function MarketingLayout({ children }: { children: ReactNode }) {
   return (
-    <>
-      <MarketingNavigation />
-      <main className="flex-1">{children}</main>
-      <Footer />
-    </>
+    <MessagesProvider messages={marketingMessages}>
+      <AuthModalProvider>
+        <MarketingNavigation />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </AuthModalProvider>
+    </MessagesProvider>
   );
 }

app/(marketing)/learn/page.tsx

@@ -29,22 +29,18 @@ export default function LearnPage() {
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
       <ContentLockup {...contentLockupData} />
 
-      <div className="smd:hidden sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] sm:px-[var(--spacing-scale-020)] space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)]">
+      {/*
+       * Single responsive render: ContentThumbnailTemplate variant="responsive"
+       * uses <picture> to swap horizontal/vertical art at smd (530px). The
+       * container switches from a vertical flex stack (<smd) to a grid (≥smd),
+       * matching the prior twin-region layout without doubling the DOM.
+       */}
+      <div className="flex flex-col space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] smd:grid smd:grid-cols-2 smd:gap-[var(--spacing-scale-008)] smd:space-y-0 smd:px-[var(--spacing-scale-020)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-016)] md:px-[var(--spacing-scale-032)] xmd:grid-cols-3 xmd:gap-[var(--spacing-scale-012)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-064)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg2:grid-cols-4 lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:grid-cols-5 xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] [&>*]:min-w-0">
         {allPosts.map((post) => (
           <ContentThumbnailTemplate
-            key={`${post.slug}-horizontal`}
+            key={post.slug}
             post={post}
-            variant="horizontal"
-          />
-        ))}
-      </div>
-
-      <div className="hidden smd:grid smd:grid-cols-2 xmd:grid-cols-3 lg:grid-cols-3 lg2:grid-cols-4 xl:grid-cols-5 smd:gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-016)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] smd:px-[var(--spacing-scale-020)] md:px-[var(--spacing-scale-032)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] [&>*]:min-w-0">
-        {allPosts.map((post) => (
-          <ContentThumbnailTemplate
-            key={`${post.slug}-vertical`}
-            post={post}
-            variant="vertical"
+            variant="responsive"
           />
         ))}
       </div>