fix(website): AnnouncementToast mobile presentation and a11y

apps/website/src/components/shared/AnnouncementToast.tsx

@@ -85,11 +85,18 @@ export function AnnouncementToast() {
   if (!visible) return null;
 
   return (
+    // Non-modal dialog, not role="alert": an alert/live region must not hold
+    // interactive content (the CTA button and email form live here), and
+    // assertive announcement of a marketing prompt is hostile. Focus is never
+    // stolen on entry; Escape dismisses once focus is inside.
     <div
-      role="alert"
-      aria-live="polite"
+      role="dialog"
+      aria-labelledby="toast-title"
       className="toast-root"
       data-mounted={mounted || undefined}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') dismiss();
+      }}
     >
       {/* Dismiss button */}
       <button
@@ -106,7 +113,7 @@ export function AnnouncementToast() {
       </p>
 
       {/* Title */}
-      <p className="toast-title">
+      <p id="toast-title" className="toast-title">
         From Prototype to Production
       </p>
 
@@ -184,7 +191,8 @@ export function AnnouncementToast() {
 
       {step === 'sent' && (
         <div className="toast-mt-section">
-          <p className="toast-success-text">
+          {/* role=status: the step swap is announced without stealing focus. */}
+          <p role="status" className="toast-success-text">
             ✓ Check your inbox — the guide is on its way!
           </p>
         </div>

apps/website/src/styles/chrome.css

@@ -335,6 +335,19 @@
   opacity: 1;
   transform: translateY(0);
 }
+/* On phones the 360px right-hugging card read as a wall (327px of a
+ * 375px screen, findings §6): present it as a centered bottom sheet
+ * with even margins instead. */
+@media (max-width: 480px) {
+  .toast-root {
+    left: 16px;
+    right: 16px;
+    bottom: 16px;
+    width: auto;
+    max-width: none;
+    padding: 16px 18px;
+  }
+}
 .toast-close {
   position: absolute;
   top: 10px;
@@ -346,6 +359,20 @@
   font-size: 18px;
   line-height: 1;
   padding: 4px;
+  border-radius: var(--radius-sm);
+}
+.toast-close:hover {
+  color: var(--color-text-primary);
+}
+/* 44px touch target without visual growth (findings §7). */
+.toast-close::after {
+  content: '';
+  position: absolute;
+  inset: -12px -13px;
+}
+.toast-close:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
 }
 .toast-eyebrow {
   font-family: var(--font-mono);