diff --git a/app/pages/404.mjs b/app/pages/404.mjs
index 88509234..2365191a 100644
--- a/app/pages/404.mjs
+++ b/app/pages/404.mjs
@@ -129,10 +129,10 @@ export default function FourOh4({ html, state }) {
 
     <header
       class="
-        mb5
-        mb-none-lg
-        pl3
-        pt1
+        mbe5
+        mbe-none-lg
+        pis3
+        pbs1
         font-sans
       ">
       <div
@@ -141,8 +141,8 @@ export default function FourOh4({ html, state }) {
          justify-content-start
          align-items-center
         ">
-        <cherub-head class="mr0"></cherub-head>
-        <h2 class="text1 pt-3 font-bold">Enhance</h2>
+        <cherub-head class="mie0"></cherub-head>
+        <h2 class="text1 pbs-3 font-bold">Enhance</h2>
       </div>
     </header>
     <main
@@ -159,7 +159,7 @@ export default function FourOh4({ html, state }) {
           heading
           text-center
           align-self-center
-          mb5
+          mbe5
           m-none-lg
         ">
         <h1 class="tracking-1">Not Found - 404</h1>
@@ -175,7 +175,7 @@ export default function FourOh4({ html, state }) {
         ">
         <p
           class="
-          mb2
+          mbe2
           text2
           text3-lg
           text-center
@@ -189,7 +189,7 @@ export default function FourOh4({ html, state }) {
             block
             align-self-end
             align-self-start-lg
-            pt5
+            pbs5
             p-none-lg
           "></cherub-mascot>
     </main>
diff --git a/app/pages/cta.html b/app/pages/cta.html
index ff23d425..d11b4907 100644
--- a/app/pages/cta.html
+++ b/app/pages/cta.html
@@ -83,10 +83,9 @@
   <main
     class="
       mi-auto
-      pt4
-      pr2
-      pb2
-      pl2
+      pbs4
+      pi2
+      pbe2
       color-light
       font-sans
     "
@@ -94,8 +93,7 @@
     <div
       class="
         mi-auto
-        pr2
-        pl2
+        pi2
         mbe0
      "
     >
@@ -103,20 +101,19 @@
     </div>
     <div
       class="
-        pr1
-        pl1
+        pi1
         mb2
       "
     >
       <img src="/_public/img/svg/enhance-type.svg" alt="Enhance">
     </div>
-    <div class="pr1 pl1 mb2 font-semibold color-lilac text3 text-center">
+    <div class="pi1 mb2 font-semibold color-lilac text3 text-center">
       <h2>The HTML framework</h2>
     </div>
     <section
       class="
         p2
-        mb1
+        mbe1
         text0
         text1-lg
         bg-lilac
@@ -128,10 +125,10 @@ <h2>The HTML framework</h2>
       "
     >
       <div class="inline-block">
-        <p class="mb-1">
+        <p class="mbe-1">
           <span class="inline-block cta">Read the Docs:</span> <a class="" href="https://enhance.dev/docs/">enhance.dev/docs</a>
         </p>
-        <p class="mb-1">
+        <p class="mbe-1">
           <span class="inline-block cta">Join our Discord:</span> <a href="https://enhance.dev/discord">enhance.dev/discord</a>
         </p>
         <p>