[style] unify body prose at max-w-prose across public site

apps/website/CLAUDE.md

@@ -117,7 +117,8 @@ Component styles go in the component file via Tailwind — not in `globals.css`,
 
 - Never specify `font-family` — it's already set globally.
 - Prefer `min-h-[Xpx]` over `h-[Xpx]` — let content expand naturally.
-- Use `min-width`/`min-height` for flexibility; avoid `max-width`/`max-height` (except `max-w-prose` for readability).
+- Use `min-width`/`min-height` for flexibility; avoid `max-width`/`max-height`.
+- **Prose width:** body-text columns (paragraphs, markdown content, descriptive lists) wrap in `max-w-prose mx-auto` (~65ch). One width across the public site — About, Join Us, lander prose sections, policies, missions, community, resources. Cards/grids/structured layouts use `max-w-text` (840px) or `max-w-section-wide` (1100px); they're not prose.
 
 ### Figma-to-code
 

apps/website/src/__tests__/pages/__snapshots__/about.test.tsx.snap

@@ -588,131 +588,143 @@ exports[`AboutPage > should render correctly 1`] = `
     <section
       class="intro-section section section-body"
     >
-      <h3
-        class="bluedot-section-heading mb-6"
-      >
-        Who we are
-      </h3>
       <div
-        class="intro-section__text-container flex flex-col gap-5"
+        class="max-w-prose mx-auto"
       >
-        <p
-          class="bluedot-p not-prose"
-        >
-          In 2021, a handful of us at Cambridge wanted to work on AI safety, but couldn't find where to start. Important ideas and arguments were scattered across the internet. There were no courses, no career paths, and few people to talk to. So we started running reading groups.
-        </p>
-        <p
-          class="bluedot-p not-prose"
-        >
-          Those reading groups evolved into the BlueDot courses. We've trained over 7,000 people in AI safety, governance and biosecurity, and hundreds of our graduates now work at Anthropic, DeepMind, and UK AISI.
-        </p>
-        <p
-          class="bluedot-p not-prose"
+        <h3
+          class="bluedot-section-heading mb-6"
         >
-          But training alone isn't enough. We give out grants to support career transitions, and we help exceptional people land impactful roles or start new organisations. Our goal isn't just to educate people, it's to get them working on the most important problems.
-        </p>
-        <p
-          class="bluedot-p not-prose"
+          Who we are
+        </h3>
+        <div
+          class="intro-section__text-container flex flex-col gap-5"
         >
-          The gap between how fast AI is advancing and how fast the safety and security workforce is growing is the most dangerous mismatch of our time. We're a small team based in San Francisco and London working as fast as we can to close it.
-        </p>
-      </div>
-    </section>
-    <section
-      class="beliefs-section section section-body"
-    >
-      <h3
-        class="bluedot-section-heading mb-6"
-      >
-        Core beliefs
-      </h3>
-      <div
-        class="flex flex-col gap-6"
-      >
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
-          >
-            AGI could arrive soon, and society is dangerously unprepared
-          </h4>
           <p
             class="bluedot-p not-prose"
           >
-            Human-level AI is likely years away, not decades. AI companies are moving at a blistering pace, while the institutions meant to govern it are moving at a fraction of the speed required.
+            In 2021, a handful of us at Cambridge wanted to work on AI safety, but couldn't find where to start. Important ideas and arguments were scattered across the internet. There were no courses, no career paths, and few people to talk to. So we started running reading groups.
           </p>
-        </div>
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
-          >
-            People at key moments rewrite history
-          </h4>
           <p
             class="bluedot-p not-prose"
           >
-            The future of AI isn't set in stone. Throughout history, a small number of people in the right positions at the right time have steered powerful technologies toward better outcomes. We find and prepare those people.
+            Those reading groups evolved into the BlueDot courses. We've trained over 7,000 people in AI safety, governance and biosecurity, and hundreds of our graduates now work at Anthropic, DeepMind, and UK AISI.
           </p>
-        </div>
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
+          <p
+            class="bluedot-p not-prose"
           >
-            We need urgency and wisdom
-          </h4>
+            But training alone isn't enough. We give out grants to support career transitions, and we help exceptional people land impactful roles or start new organisations. Our goal isn't just to educate people, it's to get them working on the most important problems.
+          </p>
           <p
             class="bluedot-p not-prose"
           >
-            The stakes are vast and time is short, but panic and fatalism lead to bad decisions. We need thoughtful and rapid action.
+            The gap between how fast AI is advancing and how fast the safety and security workforce is growing is the most dangerous mismatch of our time. We're a small team based in San Francisco and London working as fast as we can to close it.
           </p>
         </div>
       </div>
     </section>
     <section
-      class="values-section section section-body"
+      class="beliefs-section section section-body"
     >
-      <h3
-        class="bluedot-section-heading mb-6"
-      >
-        Values
-      </h3>
       <div
-        class="flex flex-col gap-6"
+        class="max-w-prose mx-auto"
       >
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
-          >
-            Own the mission
-          </h4>
-          <p
-            class="bluedot-p not-prose"
-          >
-            We all take responsibility for achieving our mission, not just getting tasks done. If something important needs doing and it's not anyone's job, it's your job.
-          </p>
-        </div>
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
-          >
-            Think hard and move fast
-          </h4>
-          <p
-            class="bluedot-p not-prose"
-          >
-            We think carefully about what matters most, then we pursue it with urgency. Speed in the wrong direction is wasted effort.
-          </p>
+        <h3
+          class="bluedot-section-heading mb-6"
+        >
+          Core beliefs
+        </h3>
+        <div
+          class="flex flex-col gap-6"
+        >
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              AGI could arrive soon, and society is dangerously unprepared
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              Human-level AI is likely years away, not decades. AI companies are moving at a blistering pace, while the institutions meant to govern it are moving at a fraction of the speed required.
+            </p>
+          </div>
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              People at key moments rewrite history
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              The future of AI isn't set in stone. Throughout history, a small number of people in the right positions at the right time have steered powerful technologies toward better outcomes. We find and prepare those people.
+            </p>
+          </div>
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              We need urgency and wisdom
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              The stakes are vast and time is short, but panic and fatalism lead to bad decisions. We need thoughtful and rapid action.
+            </p>
+          </div>
         </div>
-        <div>
-          <h4
-            class="bluedot-h4 mb-2"
-          >
-            Say the uncomfortable truth
-          </h4>
-          <p
-            class="bluedot-p not-prose"
-          >
-            We give feedback directly and receive it generously. The mission is too important for politeness to get in the way of honesty.
-          </p>
+      </div>
+    </section>
+    <section
+      class="values-section section section-body"
+    >
+      <div
+        class="max-w-prose mx-auto"
+      >
+        <h3
+          class="bluedot-section-heading mb-6"
+        >
+          Values
+        </h3>
+        <div
+          class="flex flex-col gap-6"
+        >
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              Own the mission
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              We all take responsibility for achieving our mission, not just getting tasks done. If something important needs doing and it's not anyone's job, it's your job.
+            </p>
+          </div>
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              Think hard and move fast
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              We think carefully about what matters most, then we pursue it with urgency. Speed in the wrong direction is wasted effort.
+            </p>
+          </div>
+          <div>
+            <h4
+              class="bluedot-h4 mb-2"
+            >
+              Say the uncomfortable truth
+            </h4>
+            <p
+              class="bluedot-p not-prose"
+            >
+              We give feedback directly and receive it generously. The mission is too important for politeness to get in the way of honesty.
+            </p>
+          </div>
         </div>
       </div>
     </section>

apps/website/src/__tests__/pages/__snapshots__/join-us.test.tsx.snap

@@ -588,24 +588,28 @@ exports[`JoinUsPage > should render correctly 1`] = `
     <section
       class="section section-body"
     >
-      <h3
-        class="bluedot-section-heading mb-6"
-      >
-        Why us
-      </h3>
       <div
-        class="flex flex-col gap-5"
+        class="max-w-prose mx-auto"
       >
-        <p
-          class="bluedot-p not-prose"
+        <h3
+          class="bluedot-section-heading mb-6"
         >
-          We're a small team. We just raised $25M. We're expanding from London to San Francisco in 2026 and scaling to 20 team members. If you join now, you'll shape how the organisation works, what we build, and who we become.
-        </p>
-        <p
-          class="bluedot-p not-prose"
+          Why us
+        </h3>
+        <div
+          class="flex flex-col gap-5"
         >
-          On any given day you might be shipping a new course, redesigning a placements pipeline, or figuring out how to reach ten times more people. We delete bureaucracy: our expense policy is "act in BlueDot's best interest." We're a non-profit, but our salaries are benchmarked on SF tech salaries.
-        </p>
+          <p
+            class="bluedot-p not-prose"
+          >
+            We're a small team. We just raised $25M. We're expanding from London to San Francisco in 2026 and scaling to 20 team members. If you join now, you'll shape how the organisation works, what we build, and who we become.
+          </p>
+          <p
+            class="bluedot-p not-prose"
+          >
+            On any given day you might be shipping a new course, redesigning a placements pipeline, or figuring out how to reach ten times more people. We delete bureaucracy: our expense policy is "act in BlueDot's best interest." We're a non-profit, but our salaries are benchmarked on SF tech salaries.
+          </p>
+        </div>
       </div>
     </section>
     <section
@@ -615,16 +619,20 @@ exports[`JoinUsPage > should render correctly 1`] = `
         class="invisible relative bottom-48"
         id="open-roles-anchor"
       />
-      <h3
-        class="bluedot-section-heading mb-6"
-      >
-        Open roles
-      </h3>
-      <p
-        class="bluedot-p not-prose"
+      <div
+        class="max-w-prose mx-auto"
       >
-        We're not currently running any open hiring rounds at the moment.
-      </p>
+        <h3
+          class="bluedot-section-heading mb-6"
+        >
+          Open roles
+        </h3>
+        <p
+          class="bluedot-p not-prose"
+        >
+          We're not currently running any open hiring rounds at the moment.
+        </p>
+      </div>
     </section>
     <div
       class="page-newsletter w-full bd-md:px-spacing-x bd-md:mt-spacing-y bd-md:mb-16"

apps/website/src/components/about/BeliefsSection.tsx

@@ -19,14 +19,16 @@ const beliefs = [
 const BeliefsSection = () => {
   return (
     <section className="beliefs-section section section-body">
-      <h3 className={`${pageSectionHeadingClass} mb-6`}>Core beliefs</h3>
-      <div className="flex flex-col gap-6">
-        {beliefs.map((belief) => (
-          <div key={belief.title}>
-            <h4 className="bluedot-h4 mb-2">{belief.title}</h4>
-            <P>{belief.description}</P>
-          </div>
-        ))}
+      <div className="max-w-prose mx-auto">
+        <h3 className={`${pageSectionHeadingClass} mb-6`}>Core beliefs</h3>
+        <div className="flex flex-col gap-6">
+          {beliefs.map((belief) => (
+            <div key={belief.title}>
+              <h4 className="bluedot-h4 mb-2">{belief.title}</h4>
+              <P>{belief.description}</P>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   );

apps/website/src/components/about/IntroSection.tsx

@@ -4,12 +4,14 @@ import { pageSectionHeadingClass } from '../PageListRow';
 const IntroSection = () => {
   return (
     <section className="intro-section section section-body">
-      <h3 className={`${pageSectionHeadingClass} mb-6`}>Who we are</h3>
-      <div className="intro-section__text-container flex flex-col gap-5">
-        <P>In 2021, a handful of us at Cambridge wanted to work on AI safety, but couldn&apos;t find where to start. Important ideas and arguments were scattered across the internet. There were no courses, no career paths, and few people to talk to. So we started running reading groups.</P>
-        <P>Those reading groups evolved into the BlueDot courses. We&apos;ve trained over 7,000 people in AI safety, governance and biosecurity, and hundreds of our graduates now work at Anthropic, DeepMind, and UK AISI.</P>
-        <P>But training alone isn&apos;t enough. We give out grants to support career transitions, and we help exceptional people land impactful roles or start new organisations. Our goal isn&apos;t just to educate people, it&apos;s to get them working on the most important problems.</P>
-        <P>The gap between how fast AI is advancing and how fast the safety and security workforce is growing is the most dangerous mismatch of our time. We&apos;re a small team based in San Francisco and London working as fast as we can to close it.</P>
+      <div className="max-w-prose mx-auto">
+        <h3 className={`${pageSectionHeadingClass} mb-6`}>Who we are</h3>
+        <div className="intro-section__text-container flex flex-col gap-5">
+          <P>In 2021, a handful of us at Cambridge wanted to work on AI safety, but couldn&apos;t find where to start. Important ideas and arguments were scattered across the internet. There were no courses, no career paths, and few people to talk to. So we started running reading groups.</P>
+          <P>Those reading groups evolved into the BlueDot courses. We&apos;ve trained over 7,000 people in AI safety, governance and biosecurity, and hundreds of our graduates now work at Anthropic, DeepMind, and UK AISI.</P>
+          <P>But training alone isn&apos;t enough. We give out grants to support career transitions, and we help exceptional people land impactful roles or start new organisations. Our goal isn&apos;t just to educate people, it&apos;s to get them working on the most important problems.</P>
+          <P>The gap between how fast AI is advancing and how fast the safety and security workforce is growing is the most dangerous mismatch of our time. We&apos;re a small team based in San Francisco and London working as fast as we can to close it.</P>
+        </div>
       </div>
     </section>
   );

apps/website/src/components/about/ValuesSection.tsx

@@ -19,14 +19,16 @@ const values = [
 const ValuesSection = () => {
   return (
     <section className="values-section section section-body">
-      <h3 className={`${pageSectionHeadingClass} mb-6`}>Values</h3>
-      <div className="flex flex-col gap-6">
-        {values.map((value) => (
-          <div key={value.title}>
-            <h4 className="bluedot-h4 mb-2">{value.title}</h4>
-            <P>{value.description}</P>
-          </div>
-        ))}
+      <div className="max-w-prose mx-auto">
+        <h3 className={`${pageSectionHeadingClass} mb-6`}>Values</h3>
+        <div className="flex flex-col gap-6">
+          {values.map((value) => (
+            <div key={value.title}>
+              <h4 className="bluedot-h4 mb-2">{value.title}</h4>
+              <P>{value.description}</P>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   );