diff --git a/app/components/CardSmall/cardsmall.css b/app/components/CardSmall/cardsmall.css
index e57d9d20..0cacb921 100644
--- a/app/components/CardSmall/cardsmall.css
+++ b/app/components/CardSmall/cardsmall.css
@@ -4,7 +4,7 @@
   justify-content: start;
   display: flex;
   flex-direction: column;
-  background-color: var(--colors-cool-grey-100);
+  background-color: var(--colors-white);
   border: 1px solid var(--colors-cool-grey-200);
   border-radius: var(--border-radius);
 }
diff --git a/app/components/CardSmall/index.tsx b/app/components/CardSmall/index.tsx
index 4ded3378..da1f1c85 100644
--- a/app/components/CardSmall/index.tsx
+++ b/app/components/CardSmall/index.tsx
@@ -19,15 +19,15 @@ export default function CardSmall({
   className,
   iconColor = 'var(--colors-teal-50)',
 }: CardSmallProps) {
-  className = `card-small bordered ${className}`
+  className = `card-small bordered col-4 ${className}`
 
   return (
     <Button action={action} className={className}>
       <div style={{backgroundColor: iconColor}} className="card-small-icon">
         {icon({})}
       </div>
-      <p className="large-bold padding-bottom-8">{title}</p>
-      <p className="grey">{description}</p>
+      <p className="default-bold padding-bottom-8">{title}</p>
+      <p className="grey small">{description}</p>
     </Button>
   )
 }
diff --git a/app/components/HowCanIHelp/HelpItem.tsx b/app/components/HowCanIHelp/HelpItem.tsx
index cd6dd050..bb69120f 100644
--- a/app/components/HowCanIHelp/HelpItem.tsx
+++ b/app/components/HowCanIHelp/HelpItem.tsx
@@ -9,12 +9,12 @@ type HelpItemProps = {
 }
 const HelpItem = ({title, children, links, titleFont = 'large-bold'}: HelpItemProps) => {
   return (
-    <div className="section-split padding-bottom-40">
-      <div>
+    <div className="flexbox padding-bottom-40">
+      <div className="col-6">
         {title && <p className={`padding-bottom-16 ${titleFont}`}>{title}</p>}
         <p className="grey default padding-bottom-16"> {children} </p>
       </div>
-      <div>
+      <div className="col-6">
         {links?.map((link) => (
           <div key={link.title} className="padding-bottom-16">
             <LinkCard action={link.action || '#'} {...link} />
diff --git a/app/components/HowCanIHelp/howcanihelp.css b/app/components/HowCanIHelp/howcanihelp.css
index d0ed5515..8c08de4f 100644
--- a/app/components/HowCanIHelp/howcanihelp.css
+++ b/app/components/HowCanIHelp/howcanihelp.css
@@ -1,4 +1,4 @@
-.howcanihelp-header {
+/* .howcanihelp-header {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 }
@@ -36,4 +36,4 @@
   .section-split {
     grid-template-columns: 1fr;
   }
-}
+} */
diff --git a/app/root.css b/app/root.css
index 03de5c73..21c60219 100644
--- a/app/root.css
+++ b/app/root.css
@@ -39,6 +39,7 @@
   --spacing-40: clamp(24px, 2.78vw, 40px);
   --spacing-48: clamp(24px, 3.33vw, 48px);
   --spacing-56: clamp(24px, 3.89vw, 56px);
+  --spacing-64: clamp(32px, 4.45vw, 64px);
   --spacing-80: clamp(40px, 5.56vw, 80px);
   --spacing-104: clamp(56px, 7.22vw, 104px);
   --spacing-128: clamp(56px, 8.89vw, 128px);
@@ -98,42 +99,59 @@ h2 {
   letter-spacing: -0.57px;
 }
 
+/* typography tags */
+
+h1 {
+  font-size: 56px;
+  font-weight: 500;
+  line-height: 125%; /* 80px */
+  letter-spacing: -1.28px;
+}
+
+h2 {
+  font-size: 38px;
+  font-weight: 500;
+  line-height: 130%; /* 49.4px */
+  letter-spacing: -0.57px;
+}
+
 /* typography classes */
 
 .large {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 300;
   line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
+  letter-spacing: -0.44px;
 }
 
 .large-reading {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 300;
   line-height: 190%; /* 30.6px */
-  letter-spacing: -0.18px;
+  letter-spacing: -0.44px;
+  /* this is only for the body of articles, don't use it anywhere else */
 }
 
 .large-bold {
-  font-size: 18px;
+  font-size: 20px;
   font-weight: 500;
   line-height: 170%; /* 30.6px */
-  letter-spacing: -0.18px;
+  letter-spacing: -0.44px;
 }
 
 .default {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 300;
   line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
+  letter-spacing: -0.18px;
   /* only use if a parent has been assigned another typography class (otherwise this is defined in body) */
 }
 
 .default-bold {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   line-height: 170%; /* 27.2px */
-  letter-spacing: -0.16px;
+  letter-spacing: -0.18px;
 }
 
 .small {
@@ -174,6 +192,7 @@ h2 {
 .leading-0 {
   line-height: 0 !important;
 }
+
 /* color classes */
 
 .black {
@@ -373,54 +392,107 @@ h2 {
 /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */
 /* note I may change these to vars later */
 
+/* standard grid - 1056px wide, 51px columns, 40px gutters */
 .col-1 {
-  width: clamp(0px, 3.54vw, 53px);
+  width: 51px;
 }
 
 .col-2 {
-  width: clamp(0px, 9.93vw, 171px);
+  width: 143px;
 }
 
 .col-3 {
-  width: clamp(0px, 16.25vw, 288px);
+  width: 234px;
 }
 
 .col-4 {
-  width: clamp(0px, 22.57vw, 405px);
+  width: 325px;
 }
 
 .col-5 {
-  width: clamp(0px, 28.96vw, 523px);
+  width: 417px;
 }
 
 .col-6 {
-  width: clamp(270px, 35.28vw, 640px);
+  width: 508px;
 }
 
 .col-7 {
-  width: clamp(0px, 41.6vw, 757px);
+  width: 599px;
 }
 
 .col-8 {
-  width: clamp(0px, 47.99vw, 875px);
+  width: 691px;
 }
 
 .col-9 {
-  width: clamp(0px, 54.31vw, 992px);
+  width: 782px;
 }
 
 .col-10 {
-  width: clamp(300px, 60.62vw, 1109px);
+  width: 873px;
 }
 
 .col-11 {
-  width: clamp(0px, 67.01vw, 1227px);
+  width: 965px;
 }
 
 .col-12 {
-  width: clamp(0px, 73.33vw, 1344px);
+  width: 1056px;
+}
+
+/* Alternate grid for extra spacing between elements - 1056px wide, 29px columns, 64px gutters */
+
+.col-1-alt {
+  width: 29px;
+}
+
+.col-2-alt {
+  width: 123px;
+}
+
+.col-3-alt {
+  width: 216px;
+}
+
+.col-4-alt {
+  width: 309px;
+}
+
+.col-5-alt {
+  width: 403px;
+}
+
+.col-6-alt {
+  width: 496px;
+}
+
+.col-7-alt {
+  width: 589px;
+}
+
+.col-8-alt {
+  width: 683px;
+}
+
+.col-9-alt {
+  width: 776px;
+}
+
+.col-10-alt {
+  width: 869px;
+}
+
+.col-11-alt {
+  width: 963px;
+}
+
+.col-12-alt {
+  width: 1056px;
 }
 
+/* etc width, height */
+
 .full-width {
   width: 100%;
 }
@@ -430,6 +502,22 @@ h2 {
   min-height: 100%;
 }
 
+/* flexbox */
+
+.flexbox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-40);
+}
+
+.flexbox-alt {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-64);
+}
+
 /* z-index classes */
 .z-index-1 {
   z-index: 1;
@@ -543,6 +631,18 @@ svg {
   overflow: hidden;
 }
 
+p,
+textarea,
+button {
+  font-family: Poppins;
+}
+.margin-top-40 {
+  margin-top: var(--spacing-40);
+}
+.relative {
+  position: relative;
+}
+
 /* for troubleshooting */
 
 .pink {
@@ -550,9 +650,10 @@ svg {
   background: pink !important;
 }
 
-/* defines the standard left and right margins */
+/* defines the standard left and right margins on every page */
 .page-body {
-  padding: 0px var(--spacing-128);
+  width: 1056px;
+  margin: 0 auto;
 }
 
 /* all other classes */
@@ -599,20 +700,53 @@ svg {
   border-radius: var(--border-radius);
 }
 
+/* hide elements designed for only mobile on desktop */
+
 @media (min-width: 780px) {
   .mobile-only {
     display: none !important;
   }
 }
 
+/* ---------------------------------------------------------------------------------------------------------------------------------- */
+
 /* mobile */
 
 @media (max-width: 780px) {
   .page-body {
-    padding: 0px var(--spacing-48);
+    width: 87.2vw;
+  }
+
+  /* by default, all widths (.col-* and .col-*-alt) will transition to taking up full-width (87.2vw) on mobile */
+
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6,
+  .col-7,
+  .col-8,
+  .col-9,
+  .col-10,
+  .col-11,
+  .col-12,
+  .col-1-alt,
+  .col-2-alt,
+  .col-3-alt,
+  .col-4-alt,
+  .col-5-alt,
+  .col-6-alt,
+  .col-7-alt,
+  .col-8-alt,
+  .col-9-alt,
+  .col-10-alt,
+  .col-11-alt,
+  .col-12-alt {
+    width: 87.2vw;
   }
 
-  /* typography tags */
+  /* typography tags for mobile */
 
   h1 {
     font-size: 38px;
@@ -630,7 +764,7 @@ svg {
     letter-spacing: -0.52px;
   }
 
-  /* typography classes */
+  /* typography classes for mobile */
 
   .large {
     font-size: 18px;
@@ -656,7 +790,7 @@ svg {
     letter-spacing: -0.18px;
   }
 
-  /* other one-off classes */
+  /* other one-off classes for mobile */
 
   .desktop-only {
     display: none !important;
@@ -684,15 +818,6 @@ svg {
     background-color: var(--colors-white);
     width: 85%;
   }
-} /* end mobile */
-p,
-textarea,
-button {
-  font-family: Poppins;
-}
-.margin-top-40 {
-  margin-top: var(--spacing-40);
-}
-.relative {
-  position: relative;
 }
+
+/* end mobile */
diff --git a/app/routes/how-can-i-help.career.tsx b/app/routes/how-can-i-help.career.tsx
index 39141f1d..54575c37 100644
--- a/app/routes/how-can-i-help.career.tsx
+++ b/app/routes/how-can-i-help.career.tsx
@@ -18,8 +18,8 @@ const ResearchPath = () => (
       <h2 className="teal-500 padding-bottom-40" id="research">
         AI alignment research
       </h2>
-      <div className="section-grid">
-        <div>
+      <div className="flexbox-alt">
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">What</p>
           <p className="grey default">
             AI alignment research is the field dedicated to ensuring that advanced artificial
@@ -29,7 +29,7 @@ const ResearchPath = () => (
             safely and ethically within the intentions set by their human creators.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
           <p className="grey default">
             To ensure humanity benefits from advanced AI and mitigates risks—like unintended
@@ -39,7 +39,7 @@ const ResearchPath = () => (
             problem that demands significant high-quality intellectual talent.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Where AI alignment researchers work</p>
           <p className="grey default padding-bottom-24">
             AI alignment researchers typically work at non-profit organizations dedicated to AI
@@ -52,7 +52,7 @@ const ResearchPath = () => (
             technology itself—and so ends up causing harm.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">You might be a good fit if...</p>
           <p className="grey default">
             You might be a good fit as an AI alignment researcher if you have a quantitative
@@ -64,9 +64,9 @@ const ResearchPath = () => (
     </div>
 
     <div className="padding-bottom-24">
-      <div className="section-split padding-bottom-56">
-        <h2>Interested in pursuing this career path?</h2>
-        <p>
+      <div className="flexbox padding-bottom-56">
+        <h2 className="col-6">Interested in pursuing this career path?</h2>
+        <p className="col-6 large">
           Take the following steps to (1) learn more & further assess your fit; (2) learn how to
           make the transition
         </p>
@@ -177,7 +177,7 @@ const ResearchPath = () => (
       </DropDown>
     </div>
 
-    <div className="section-split padding-bottom-32">
+    <div className="flexbox padding-bottom-32">
       <Testimonial
         src="/assets/guy.jpeg"
         title="Lorem ipsum"
@@ -185,6 +185,7 @@ const ResearchPath = () => (
         enim risus netus lacinia. Metus sit quis mollis est justo posuere dui potenti blandit. Velit
         enim integer a etiam vel. Nec gravida pulvinar congue integer leo mi euismod. Nulla in sit
         molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor."
+        className="col-6"
       />
       <Testimonial
         src="/assets/guy.jpeg"
@@ -192,7 +193,9 @@ const ResearchPath = () => (
         description="Lorem ipsum dolor sit amet consectetur. Ultricies neque pellentesque sit sit diam. Magna
         enim risus netus lacinia. Metus sit quis mollis est justo posuere dui potenti blandit. Velit
         enim integer a etiam vel. Nec gravida pulvinar congue integer leo mi euismod. Nulla in sit
+        molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor. leo mi euismod. Nulla in sit
         molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor."
+        className="col-6"
       />
     </div>
 
@@ -211,8 +214,8 @@ const GovernancePath = () => (
       <h2 className="teal-500 padding-bottom-40" id="governance">
         AI governance & policy
       </h2>
-      <div className="section-grid">
-        <div>
+      <div className="flexbox-alt">
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">What</p>
           <p className="grey default">
             AI alignment research is the field dedicated to ensuring that advanced artificial
@@ -222,7 +225,7 @@ const GovernancePath = () => (
             safely and ethically within the intentions set by their human creators.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
           <p className="grey default">
             To ensure humanity benefits from advanced AI and mitigates risks—like unintended
@@ -232,7 +235,7 @@ const GovernancePath = () => (
             problem that demands significant high-quality intellectual talent.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Where AI alignment researchers work</p>
           <p className="grey default">
             AI alignment researchers typically work at non-profit organizations dedicated to AI
@@ -240,7 +243,7 @@ const GovernancePath = () => (
             independently; or on industry safety teams*, usually at major AI companies like OpenAI.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">You might be a good fit if...</p>
           <p className="grey default">
             You might be a good fit as an AI alignment researcher if you have a quantitative
@@ -252,9 +255,9 @@ const GovernancePath = () => (
     </div>
 
     <div className="padding-bottom-24">
-      <div className="section-split padding-bottom-56">
-        <h2>Interested in pursuing this career path?</h2>
-        <p>
+      <div className="flexbox padding-bottom-56">
+        <h2 className="col-6">Interested in pursuing this career path?</h2>
+        <p className="col-6 large">
           Take the following steps to (1) learn more & further assess your fit; (2) learn how to
           make the transition
         </p>
@@ -315,7 +318,7 @@ const GovernancePath = () => (
       </HelpItem>
     </div>
 
-    <div className="section-split padding-bottom-32">
+    <div className="flexbox padding-bottom-32">
       <Testimonial
         src="/assets/guy.jpeg"
         title="Lorem ipsum"
@@ -323,6 +326,7 @@ const GovernancePath = () => (
         enim risus netus lacinia. Metus sit quis mollis est justo posuere dui potenti blandit. Velit
         enim integer a etiam vel. Nec gravida pulvinar congue integer leo mi euismod. Nulla in sit
         molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor."
+        className="col-6"
       />
       <Testimonial
         src="/assets/guy.jpeg"
@@ -330,7 +334,9 @@ const GovernancePath = () => (
         description="Lorem ipsum dolor sit amet consectetur. Ultricies neque pellentesque sit sit diam. Magna
         enim risus netus lacinia. Metus sit quis mollis est justo posuere dui potenti blandit. Velit
         enim integer a etiam vel. Nec gravida pulvinar congue integer leo mi euismod. Nulla in sit
+        molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor. leo mi euismod. Nulla in sit
         molestie ut velit ultricies justo nulla. Ipsum turpis purus tempor."
+        className="col-6"
       />
     </div>
 
@@ -347,8 +353,8 @@ const FieldBuildingPath = () => (
       <h2 className="teal-500 padding-bottom-40" id="field-building">
         AI safety field-building
       </h2>
-      <div className="section-grid">
-        <div>
+      <div className="flexbox-alt">
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">What</p>
           <p className="grey default">
             AI alignment research is the field dedicated to ensuring that advanced artificial
@@ -358,7 +364,7 @@ const FieldBuildingPath = () => (
             safely and ethically within the intentions set by their human creators.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">Why this is important</p>
           <p className="grey default">
             To ensure humanity benefits from advanced AI and mitigates risks—like unintended
@@ -368,7 +374,7 @@ const FieldBuildingPath = () => (
             problem that demands significant high-quality intellectual talent.
           </p>
         </div>
-        <div>
+        <div className="col-6-alt">
           <p className="default-bold padding-bottom-16">You might be a good fit if...</p>
           <p className="grey default">
             You might be a good fit as an AI alignment researcher if you have a quantitative
@@ -518,9 +524,9 @@ const FieldBuildingPath = () => (
     </div>
 
     <div className="padding-bottom-24">
-      <div className="section-split padding-bottom-56">
-        <h2>Interested in pursuing this career path?</h2>
-        <p>
+      <div className="flexbox padding-bottom-56">
+        <h2 className="col-6">Interested in pursuing this career path?</h2>
+        <p className="col-6">
           Take the following steps to (1) learn more & further assess your fit; (2) learn how to
           make the transition
         </p>
@@ -582,7 +588,7 @@ const FieldBuildingPath = () => (
 const CareerPaths = () => (
   <>
     <p className="grey default padding-bottom-32">There are 3 major career paths in AI safety:</p>
-    <div className="paths-grid padding-bottom-80">
+    <div className="flexbox padding-bottom-80">
       <CardSmall
         action="#research"
         iconColor="var(--colors-teal-700)"