diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx
index 0ae9b70..fba723a 100644
--- a/app/components/NewsletterModal.tsx
+++ b/app/components/NewsletterModal.tsx
@@ -156,22 +156,14 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
           <Image alt="" src="/icon-close.png" width={24} height={24} className="size-full object-contain" />
         </button>
 
-        {/* modal-top: photo + copy/form, stacked below lg: — a deliberate
-            exception to the site's sm: (640px) structural consolidation
-            (see the figma-to-nextjs skill's Gotcha 5): this dialog is
-            capped at max-w-[75rem] (1200px), so at real Tablet viewports
-            (640-1023px) it's essentially full-viewport-width, leaving too
-            little room per column at sm: for the heading/form to read well
-            (reported 2026-07-29). Stacked (full-width photo above, copy/
-            form below) through the whole Tablet range instead, side by
-            side again only once there's real room at lg:. */}
-        <div className="flex flex-col lg:flex-row items-stretch border-b border-border">
-          <div className="relative w-full lg:flex-1 aspect-[4/3] lg:aspect-auto">
+        {/* modal-top: photo + copy/form, stacked below sm (moved down from the old md:) */}
+        <div className="flex flex-col sm:flex-row items-stretch border-b border-border">
+          <div className="relative w-full sm:flex-1 aspect-[4/3] sm:aspect-auto">
             <Image
               src="/newsletter-modal-photo.jpg"
               alt="Notizbuch mit Kaffee und Stift"
               fill
-              sizes="(min-width: 1024px) 50vw, 100vw"
+              sizes="(min-width: 640px) 50vw, 100vw"
               className="object-cover"
             />
           </div>
@@ -180,10 +172,8 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
             {/* -scale-y-100 is required, not just -rotate-4 — the SVG
                 itself is authored upside-down (matches how Newsletter.tsx
                 uses this exact same asset); without it the icon renders
-                flipped. Hidden below lg: — removed on mobile 2026-07-24,
-                threshold moved down with the rest of this section's
-                lg: exception 2026-07-29. */}
-            <div className="hidden lg:block w-16 h-14 -rotate-4 -scale-y-100">
+                flipped. Hidden below sm: — removed on mobile 2026-07-24. */}
+            <div className="hidden sm:block w-16 h-14 -rotate-4 -scale-y-100">
               <Image alt="" src="/newsletter-icon.svg" width={64} height={56} className="w-full h-full" />
             </div>
 
@@ -273,9 +263,7 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
             items-start + a fixed icon bounding box (icons have different
             native proportions, e.g. the sparkle glyph isn't square) fixes
             it without needing the flip trick. */}
-        {/* Same lg: exception as modal-top above, for the same fixed
-            max-w-[75rem] dialog reason. */}
-        <div className="flex flex-col lg:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 lg:gap-6">
+        <div className="flex flex-col sm:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 sm:gap-6">
           {features.map((f) => (
             <div key={f.title} className="flex-1 flex gap-6 items-start w-full">
               <div className="relative h-10 w-10 shrink-0 flex items-center justify-center">