Navigation, state management, create rule button integration

app/create/informational/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
 import HeaderLockup from "../../components/type/HeaderLockup";
 import NumberedList from "../../components/type/NumberedList";
@@ -11,8 +12,17 @@ import NumberedList from "../../components/type/NumberedList";
  * Responsive sizing: uses L/M for HeaderLockup and M/S for NumberedList based on 640px breakpoint.
  */
 export default function InformationalPage() {
+  const [isMounted, setIsMounted] = useState(false);
   const isMdOrLarger = useMediaQuery("(min-width: 640px)");
 
+  // Avoid flash: only use breakpoint after mount so SSR and first paint use same layout (desktop).
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: defer layout breakpoint until after mount to prevent flash
+    setIsMounted(true);
+  }, []);
+
+  const effectiveMdOrLarger = !isMounted || isMdOrLarger;
+
   const items = [
     {
       title: "Tell us about your organization",
@@ -39,11 +49,11 @@ export default function InformationalPage() {
           title="How CommunityRule helps groups like yours"
           description="This flow will give you recommendations to improve your community and help you put together a proposal for your group to consider. Alternatively, there is a workshop that your group can use to go through the process it together."
           justification="left"
-          size={isMdOrLarger ? "L" : "M"}
+          size={effectiveMdOrLarger ? "L" : "M"}
         />
 
         {/* NumberedList: M size at 640px+, S size below 640px */}
-        <NumberedList items={items} size={isMdOrLarger ? "M" : "S"} />
+        <NumberedList items={items} size={effectiveMdOrLarger ? "M" : "S"} />
       </div>
     </div>
   );