diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
index 74ea4fe..b080623 100644
--- a/blocks/cards/cards.css
+++ b/blocks/cards/cards.css
@@ -1,19 +1,19 @@
 .cards > ul {
   list-style: none;
-  margin: 0;
-  padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
-  gap: 24px;
+  gap: var(--space-m);
+  margin: 0;
+  padding: 0;
 }
 
 .cards > ul > li {
-  border: 1px solid #dadada;
-  background-color: var(--background-color);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg);
 }
 
 .cards .cards-card-body {
-  margin: 16px;
+  margin: var(--space-s);
 }
 
 .cards .cards-card-image {
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
index f2b203e..58e1bd8 100644
--- a/blocks/columns/columns.css
+++ b/blocks/columns/columns.css
@@ -21,9 +21,9 @@
 
 @media (width >= 900px) {
   .columns > div {
-    align-items: center;
     flex-direction: unset;
-    gap: 24px;
+    align-items: center;
+    gap: var(--space-m);
   }
 
   .columns > div > div {
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index d8617de..b01e819 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -1,12 +1,12 @@
 footer {
-  background-color: var(--light-color);
-  font-size: var(--body-font-size-xs);
+  background-color: var(--color-bg-light);
+  font-size: var(--text-s);
 }
 
 footer .footer > div {
+  max-width: var(--site-width);
   margin: auto;
-  max-width: 1200px;
-  padding: 40px 24px 24px;
+  padding: var(--space-l) var(--space-m) var(--space-m);
 }
 
 footer .footer p {
@@ -15,6 +15,6 @@ footer .footer p {
 
 @media (width >= 900px) {
   footer .footer > div {
-    padding: 40px 32px 24px;
+    padding: var(--space-l) var(--space-l) var(--space-m);
   }
 }
diff --git a/blocks/header/header.css b/blocks/header/header.css
index 19d07bc..f414ca7 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -1,23 +1,23 @@
 /* header and nav layout */
 header .nav-wrapper {
-  background-color: var(--background-color);
-  width: 100%;
-  z-index: 2;
   position: fixed;
+  z-index: 2;
+  width: 100%;
+  background-color: var(--color-bg);
 }
 
 header nav {
-  box-sizing: border-box;
   display: grid;
   grid-template:
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 0 24px;
-  margin: auto;
-  max-width: 1248px;
+  gap: 0 var(--space-m);
+  box-sizing: border-box;
   height: var(--nav-height);
-  padding: 0 24px;
+  max-width: 1248px;
+  margin: auto;
+  padding: 0 var(--space-m);
   font-family: var(--body-font-family);
 }
 
@@ -38,14 +38,14 @@ header nav[aria-expanded='true'] {
   header nav {
     display: flex;
     justify-content: space-between;
-    gap: 0 32px;
+    gap: 0 var(--space-l);
     max-width: 1264px;
-    padding: 0 32px;
+    padding: 0 var(--space-l);
   }
 
   header nav[aria-expanded='true'] {
-    min-height: 0;
     overflow: visible;
+    min-height: 0;
   }
 }
 
@@ -60,21 +60,21 @@ header nav a:any-link {
 
 /* hamburger */
 header nav .nav-hamburger {
-  grid-area: hamburger;
-  height: 22px;
   display: flex;
+  grid-area: hamburger;
   align-items: center;
+  height: 22px;
 }
 
 header nav .nav-hamburger button {
+  overflow: initial;
   height: 22px;
   margin: 0;
   border: 0;
   border-radius: 0;
   padding: 0;
-  background-color: var(--background-color);
+  background-color: var(--color-bg);
   color: inherit;
-  overflow: initial;
   text-overflow: initial;
   white-space: initial;
 }
@@ -82,9 +82,9 @@ header nav .nav-hamburger button {
 header nav .nav-hamburger-icon,
 header nav .nav-hamburger-icon::before,
 header nav .nav-hamburger-icon::after {
-  box-sizing: border-box;
   display: block;
   position: relative;
+  box-sizing: border-box;
   width: 20px;
 }
 
@@ -119,11 +119,11 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::before,
 header nav[aria-expanded='true'] .nav-hamburger-icon::after {
   top: 3px;
   left: 1px;
-  transform: rotate(45deg);
-  transform-origin: 2px 1px;
-  width: 24px;
   height: 2px;
+  width: 24px;
   border-radius: 2px;
+  transform: rotate(45deg);
+  transform-origin: 2px 1px;
 }
 
 header nav[aria-expanded='true'] .nav-hamburger-icon::after {
@@ -141,40 +141,40 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after {
 
 /* brand */
 header .nav-brand {
-  grid-area: brand;
   flex-basis: 128px;
-  font-size: var(--heading-font-size-s);
+  grid-area: brand;
+  font-size: var(--heading-s);
   font-weight: 700;
   line-height: 1;
 }
 
 header nav .nav-brand img {
-  width: 128px;
   height: auto;
+  width: 128px;
 }
 
 /* sections */
 header nav .nav-sections {
-  grid-area: sections;
-  flex: 1 1 auto;
   display: none;
+  flex: 1 1 auto;
+  grid-area: sections;
   visibility: hidden;
 }
 
 header nav[aria-expanded='true'] .nav-sections {
   display: block;
-  visibility: visible;
   align-self: start;
+  visibility: visible;
 }
 
 header nav .nav-sections ul {
   list-style: none;
   padding-left: 0;
-  font-size: var(--body-font-size-s);
+  font-size: var(--text-m);
 }
 
 header nav .nav-sections ul > li {
-  font-weight: 500;
+  font-weight: 400;
 }
 
 header nav .nav-sections ul > li > ul {
@@ -198,7 +198,7 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections .nav-drop {
     position: relative;
-    padding-right: 16px;
+    padding-right: var(--space-s);
     cursor: pointer;
   }
 
@@ -208,12 +208,12 @@ header nav .nav-sections ul > li > ul > li {
     position: absolute;
     top: 0.5em;
     right: 2px;
-    transform: rotate(135deg);
-    width: 6px;
     height: 6px;
+    width: 6px;
     border: 2px solid currentcolor;
     border-radius: 0 1px 0 0;
     border-width: 2px 2px 0 0;
+    transform: rotate(135deg);
   }
 
   header nav .nav-sections .nav-drop[aria-expanded='true']::after {
@@ -224,7 +224,7 @@ header nav .nav-sections ul > li > ul > li {
 
   header nav .nav-sections ul {
     display: flex;
-    gap: 24px;
+    gap: var(--space-m);
     margin: 0;
   }
 
@@ -241,11 +241,11 @@ header nav .nav-sections ul > li > ul > li {
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul {
     display: block;
     position: absolute;
+    top: 150%;
     left: -24px;
     width: 200px;
-    top: 150%;
-    padding: 16px;
-    background-color: var(--light-color);
+    padding: var(--space-s);
+    background-color: var(--color-bg-light);
     white-space: initial;
   }
 
@@ -254,15 +254,15 @@ header nav .nav-sections ul > li > ul > li {
     position: absolute;
     top: -8px;
     left: 16px;
-    width: 0;
     height: 0;
+    width: 0;
     border-left: 8px solid transparent;
+    border-bottom: 8px solid var(--color-bg-light);
     border-right: 8px solid transparent;
-    border-bottom: 8px solid var(--light-color);
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li > ul > li {
-    padding: 8px 0;
+    padding: var(--space-xs) 0;
   }
 }
 
diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css
index 974eaf2..f98447c 100644
--- a/blocks/hero/hero.css
+++ b/blocks/hero/hero.css
@@ -5,33 +5,33 @@
 
 .hero {
   position: relative;
-  padding: 40px 24px;
   min-height: 300px;
+  padding: var(--space-l) var(--space-m);
 }
 
 .hero h1 {
-  max-width: 1200px;
+  max-width: var(--site-width);
   margin-left: auto;
   margin-right: auto;
-  color: var(--background-color);
+  color: var(--color-bg);
 }
 
 .hero picture {
   position: absolute;
-  z-index: -1;
   inset: 0;
-  object-fit: cover;
+  z-index: -1;
   box-sizing: border-box;
+  object-fit: cover;
 }
 
 .hero img {
-  object-fit: cover;
-  width: 100%;
   height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 @media (width >= 900px) {
   .hero {
-    padding: 40px 32px;
+    padding: var(--space-l) var(--space-l);
   }
-}
\ No newline at end of file
+}
diff --git a/fonts/roboto-medium.woff2 b/fonts/roboto-medium.woff2
deleted file mode 100644
index 8b1aebb..0000000
Binary files a/fonts/roboto-medium.woff2 and /dev/null differ
diff --git a/scripts/aem.js b/scripts/aem.js
index 260ea22..f31275c 100644
--- a/scripts/aem.js
+++ b/scripts/aem.js
@@ -390,6 +390,7 @@ function wrapTextNodes(block) {
     'UL',
     'OL',
     'PICTURE',
+    'BLOCKQUOTE',
     'TABLE',
     'H1',
     'H2',
@@ -440,6 +441,7 @@ function decorateIcon(span, prefix = '', alt = '') {
   img.width = 16;
   img.height = 16;
   span.append(img);
+  if (window.iconObserver) window.iconObserver.observe(img);
 }
 
 /**
@@ -452,6 +454,39 @@ function decorateIcons(element, prefix = '') {
   icons.forEach((span) => {
     decorateIcon(span, prefix);
   });
+
+  window.iconObserver = window.iconObserver || new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (!entry.isIntersecting) return;
+      window.iconObserver.unobserve(entry.target);
+      const img = entry.target;
+      const { src } = img;
+      window.iconCache = window.iconCache || new Map();
+      if (!window.iconCache.has(src)) {
+        window.iconCache.set(src, fetch(src).then((r) => r.text()));
+      }
+      window.iconCache.get(src).then((svgText) => {
+        const temp = document.createElement('div');
+        temp.innerHTML = svgText;
+        const svg = temp.querySelector('svg');
+        if (!svg || !img.isConnected) return;
+        const titleEl = svg.querySelector('title');
+        const title = titleEl && titleEl.textContent;
+        if (!svgText.toLowerCase().includes('currentcolor')) {
+          if (title) img.alt = title;
+          return;
+        }
+        svg.setAttribute('focusable', false);
+        if (title) {
+          svg.setAttribute('role', 'img');
+          svg.setAttribute('aria-label', title);
+        } else {
+          svg.setAttribute('aria-hidden', true);
+        }
+        img.replaceWith(svg);
+      });
+    });
+  });
 }
 
 /**
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 0bc5097..dfc85b8 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -104,7 +104,7 @@ function decorateButtons(main) {
     p.className = 'button-wrapper';
     a.className = 'button';
     if (strong && em) { // high-impact call-to-action
-      a.classList.add('accent');
+      a.classList.add('cta');
       const outer = strong.contains(em) ? strong : em;
       outer.replaceWith(a);
     } else if (strong) {
@@ -115,6 +115,15 @@ function decorateButtons(main) {
       em.replaceWith(a);
     }
   });
+
+  // collapse adjacent button wrappers
+  let adjacent = main.querySelector('p.button-wrapper + p.button-wrapper');
+  while (adjacent) {
+    const prev = adjacent.previousElementSibling;
+    adjacent.querySelectorAll('a.button').forEach((btn) => prev.appendChild(btn));
+    adjacent.remove();
+    adjacent = main.querySelector('p.button-wrapper + p.button-wrapper');
+  }
 }
 
 /**
diff --git a/styles/fonts.css b/styles/fonts.css
index 319c400..2fc4de4 100644
--- a/styles/fonts.css
+++ b/styles/fonts.css
@@ -1,36 +1,27 @@
 /* stylelint-disable max-line-length */
 @font-face {
+  font-display: swap;
   font-family: roboto-condensed;
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
   src: url('../fonts/roboto-condensed-bold.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
+  font-display: swap;
   font-family: roboto;
   font-style: normal;
   font-weight: 700;
-  font-display: swap;
   src: url('../fonts/roboto-bold.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
-  font-family: roboto;
-  font-style: normal;
-  font-weight: 500;
   font-display: swap;
-  src: url('../fonts/roboto-medium.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
   font-family: roboto;
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
   src: url('../fonts/roboto-regular.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
diff --git a/styles/styles.css b/styles/styles.css
index 5fd3c04..54bc9fc 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -11,33 +11,75 @@
  */
 
 :root {
-  /* colors */
-  --background-color: white;
-  --light-color: #f8f8f8;
-  --dark-color: #505050;
-  --text-color: #131313;
-  --link-color: #3b63fb;
-  --link-hover-color: #1d3ecf;
+  /* color primitives */
+  --color-white: #fff;
+  --color-gray-100: #f4f4f4;
+  --color-gray-300: #ccc;
+  --color-gray-500: #767676;
+  --color-gray-700: #555;
+  --color-gray-900: #131313;
+  --color-black: #000;
+  --color-yellow: #ffcd11;
+  --color-yellow-dark: #d4a900;
+  --color-blue: #2679b8;
+  --color-blue-dark: #1c5a8c;
+
+  /* semantic color tokens */
+  --color-bg: var(--color-white);
+  --color-bg-light: var(--color-gray-100);
+  --color-bg-dark: var(--color-gray-900);
+  --color-border: var(--color-gray-300);
+  --color-text: var(--color-gray-900);
+  --color-muted: var(--color-gray-700);
+  --color-link: var(--color-blue);
+  --color-link-hover: var(--color-blue-dark);
+  --color-brand: var(--color-yellow);
+  --color-brand-dark: var(--color-yellow-dark);
 
   /* fonts */
   --body-font-family: roboto, roboto-fallback, sans-serif;
   --heading-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
 
-  /* body sizes */
-  --body-font-size-m: 22px;
-  --body-font-size-s: 19px;
-  --body-font-size-xs: 17px;
-
   /* heading sizes */
-  --heading-font-size-xxl: 55px;
-  --heading-font-size-xl: 44px;
-  --heading-font-size-l: 34px;
-  --heading-font-size-m: 27px;
-  --heading-font-size-s: 24px;
-  --heading-font-size-xs: 22px;
-
-  /* nav height */
+  --heading-xl: 1.875rem;  /* 30px */
+  --heading-l: 1.625rem;   /* 26px */
+  --heading-m: 1.25rem;    /* 20px */
+  --heading-s: 1rem;       /* 16px */
+
+  /* text sizes */
+  --text-m: 0.875rem;      /* 14px */
+  --text-s: 0.75rem;       /* 12px */
+
+  /* line heights */
+  --lh-xs: 1.25;
+  --lh-s: 1.45;
+  --lh-m: 1.6;
+
+  /* spacing primitives */
+  --space-100: 4px;
+  --space-200: 8px;
+  --space-300: 12px;
+  --space-400: 16px;
+  --space-500: 24px;
+  --space-600: 32px;
+  --space-700: 48px;
+  --space-800: 64px;
+
+  /* spacing semantic */
+  --space-xs: var(--space-200);
+  --space-s: var(--space-400);
+  --space-m: var(--space-500);
+  --space-l: var(--space-600);
+  --space-xl: var(--space-800);
+
+  /* layout */
   --nav-height: 64px;
+  --site-width: 1200px;
+
+  /* border radii */
+  --radius-s: 4px;
+  --radius-m: 8px;
+  --radius-l: 16px;
 }
 
 /* fallback fonts */
@@ -53,31 +95,23 @@
   src: local('Arial');
 }
 
-@media (width >= 900px) {
-  :root {
-    /* body sizes */
-    --body-font-size-m: 18px;
-    --body-font-size-s: 16px;
-    --body-font-size-xs: 14px;
-
-    /* heading sizes */
-    --heading-font-size-xxl: 45px;
-    --heading-font-size-xl: 36px;
-    --heading-font-size-l: 28px;
-    --heading-font-size-m: 22px;
-    --heading-font-size-s: 20px;
-    --heading-font-size-xs: 18px;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation: none !important;
+    transition: none !important;
   }
 }
 
 body {
   display: none;
   margin: 0;
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--color-bg);
+  color: var(--color-text);
   font-family: var(--body-font-family);
-  font-size: var(--body-font-size-m);
-  line-height: 1.6;
+  font-size: var(--text-m);
+  line-height: var(--lh-m);
 }
 
 body.appear {
@@ -98,6 +132,8 @@ footer .footer[data-block-status="loaded"] {
   visibility: visible;
 }
 
+/* TYPOGRAPHY */
+
 h1,
 h2,
 h3,
@@ -106,18 +142,29 @@ h5,
 h6 {
   margin-top: 0.8em;
   margin-bottom: 0.25em;
-  font-family: var(--heading-font-family);
-  font-weight: 600;
-  line-height: 1.25;
   scroll-margin: 40px;
+  font-family: var(--heading-font-family);
+  font-weight: 700;
+  line-height: var(--lh-xs);
+}
+
+h1 {
+  font-size: var(--heading-xl);
+}
+
+h2 {
+  font-size: var(--heading-l);
+}
+
+h3 {
+  font-size: var(--heading-m);
 }
 
-h1 { font-size: var(--heading-font-size-xxl); }
-h2 { font-size: var(--heading-font-size-xl); }
-h3 { font-size: var(--heading-font-size-l); }
-h4 { font-size: var(--heading-font-size-m); }
-h5 { font-size: var(--heading-font-size-s); }
-h6 { font-size: var(--heading-font-size-xs); }
+h4,
+h5,
+h6 {
+  font-size: var(--heading-s);
+}
 
 p,
 dl,
@@ -131,64 +178,121 @@ blockquote {
 
 code,
 pre {
-  font-size: var(--body-font-size-s);
+  font-size: var(--text-s);
 }
 
 pre {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: var(--light-color);
   overflow-x: auto;
+  border-radius: var(--radius-m);
+  padding: var(--space-s);
+  background-color: var(--color-bg-light);
   white-space: pre;
 }
 
-main > div {
-  margin: 40px 16px;
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child,
+p:first-child,
+dl:first-child,
+ol:first-child,
+ul:first-child,
+pre:first-child,
+blockquote:first-child {
+  margin-top: 0;
 }
 
-input,
-textarea,
-select,
-button {
-  font: inherit;
+h1:last-child,
+h2:last-child,
+h3:last-child,
+h4:last-child,
+h5:last-child,
+h6:last-child,
+p:last-child,
+dl:last-child,
+ol:last-child,
+ul:last-child,
+pre:last-child,
+blockquote:last-child {
+  margin-bottom: 0;
 }
 
-/* links */
+/* IMAGES & ICONS */
+
+img {
+  display: block;
+  height: auto;
+  width: auto;
+  max-width: 100%;
+  margin: auto;
+}
+
+.icon {
+  display: inline-block;
+  height: 1em;
+  width: auto;
+}
+
+.icon img,
+.icon svg {
+  height: 100%;
+  width: 100%;
+}
+
+/* LINKS */
+
 a:any-link {
-  color: var(--link-color);
-  text-decoration: none;
+  color: var(--color-link);
   overflow-wrap: break-word;
+  text-decoration: none;
 }
 
 a:hover {
-  color: var(--link-hover-color);
+  color: var(--color-link-hover);
   text-decoration: underline;
 }
 
-/* buttons */
+/* FORM ELEMENTS */
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+/* BUTTONS */
+
 p.button-wrapper {
-  margin: 12px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin: 1.2em 0;
 }
 
 a.button:any-link,
 button.button {
-  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
   max-width: 100%;
   margin: 0;
-  border: 2px solid transparent;
-  border-radius: 2.4em;
+  border: 1px solid transparent;
+  border-radius: var(--radius-s);
   padding: 0.5em 1.2em;
   font: inherit;
-  font-weight: 500;
-  line-height: 1.25;
+  font-family: var(--heading-font-family);
+  font-weight: 400;
+  line-height: var(--lh-xs);
   text-decoration: none;
-  cursor: pointer;
-  overflow: hidden;
   text-overflow: ellipsis;
+  text-transform: capitalize;
   white-space: nowrap;
+  cursor: pointer;
 }
 
 a.button[aria-disabled="true"],
@@ -197,20 +301,21 @@ button.button:disabled {
   pointer-events: none;
 }
 
+/* primary: dark fill, white text */
 a.button.primary,
 button.button.primary {
-  border-color: var(--text-color);
-  background-color: var(--text-color);
-  color: var(--background-color);
+  border-color: var(--color-text);
+  background-color: var(--color-text);
+  color: var(--color-bg);
 }
 
 a.button.primary:hover,
 a.button.primary:focus-visible,
 button.button.primary:hover,
 button.button.primary:focus-visible {
-  border-color: var(--dark-color);
-  background-color: var(--dark-color);
-  color: var(--light-color);
+  border-color: var(--color-muted);
+  background-color: var(--color-muted);
+  color: var(--color-bg-light);
 }
 
 a.button.primary[aria-disabled="true"],
@@ -219,25 +324,26 @@ a.button.primary[aria-disabled="true"]:focus-visible,
 button.button.primary:disabled,
 button.button.primary:disabled:hover,
 button.button.primary:disabled:focus-visible {
-  background-color: var(--light-color);
-  border-color: var(--light-color);
-  color: var(--dark-color);
+  border-color: var(--color-border);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
 }
 
+/* secondary: outline */
 a.button.secondary,
 button.button.secondary {
-  border-color: var(--text-color);
+  border-color: var(--color-text);
   background-color: transparent;
-  color: var(--text-color);
+  color: var(--color-text);
 }
 
 a.button.secondary:hover,
 a.button.secondary:focus-visible,
 button.button.secondary:hover,
 button.button.secondary:focus-visible {
-  border-color: var(--dark-color);
-  background-color: var(--light-color);
-  color: var(--dark-color);
+  border-color: var(--color-muted);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
 }
 
 a.button.secondary[aria-disabled="true"],
@@ -246,64 +352,60 @@ a.button.secondary[aria-disabled="true"]:focus-visible,
 button.button.secondary:disabled,
 button.button.secondary:disabled:hover,
 button.button.secondary:disabled:focus-visible {
-  background-color: var(--light-color);
-  border-color: var(--light-color);
-  color: var(--dark-color);
+  border-color: var(--color-border);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
 }
 
-/* high-impact call-to-action */
-a.button.accent,
-button.button.accent {
-  border-color: var(--link-color);
-  background-color: var(--link-color);
-  color: var(--background-color);
+/* cta: yellow brand CTA */
+a.button.cta,
+button.button.cta {
+  border-color: var(--color-brand);
+  background-color: var(--color-brand);
+  color: var(--color-text);
 }
 
-a.button.accent:hover,
-a.button.accent:focus-visible,
-button.button.accent:hover,
-button.button.accent:focus-visible {
-  border-color: var(--link-hover-color);
-  background-color: var(--link-hover-color);
+a.button.cta:hover,
+a.button.cta:focus-visible,
+button.button.cta:hover,
+button.button.cta:focus-visible {
+  border-color: var(--color-brand-dark);
+  background-color: var(--color-brand-dark);
 }
 
-a.button.accent[aria-disabled="true"],
-a.button.accent[aria-disabled="true"]:hover,
-a.button.accent[aria-disabled="true"]:focus-visible,
-button.button.accent:disabled,
-button.button.accent:disabled:hover,
-button.button.accent:disabled:focus-visible {
-  background-color: var(--light-color);
-  border-color: var(--light-color);
-  color: var(--dark-color);
+a.button.cta[aria-disabled="true"],
+a.button.cta[aria-disabled="true"]:hover,
+a.button.cta[aria-disabled="true"]:focus-visible,
+button.button.cta:disabled,
+button.button.cta:disabled:hover,
+button.button.cta:disabled:focus-visible {
+  border-color: var(--color-border);
+  background-color: var(--color-bg-light);
+  color: var(--color-muted);
 }
 
-main img {
-  max-width: 100%;
-  width: auto;
-  height: auto;
-}
+/* SECTIONING */
 
-.icon {
-  display: inline-block;
-  height: 24px;
-  width: 24px;
-}
-
-.icon img {
-  height: 100%;
-  width: 100%;
+main > div {
+  margin: var(--space-l) var(--space-s);
 }
 
-/* sections */
 main > .section {
-  margin: 40px 0;
+  margin: var(--space-l) 0;
 }
 
 main > .section > div {
-  max-width: 1200px;
+  max-width: var(--site-width);
   margin: auto;
-  padding: 0 24px;
+  padding: 0 var(--space-m);
+}
+
+main > .section > [class*="-wrapper"] + [class*="-wrapper"] {
+  margin-top: var(--space-l);
+}
+
+main > .section > .default-content-wrapper + [class*="-wrapper"] {
+  margin-top: 1.2em;
 }
 
 main > .section:first-of-type {
@@ -311,15 +413,62 @@ main > .section:first-of-type {
 }
 
 @media (width >= 900px) {
+  main > .section {
+    margin: var(--space-xl) 0;
+  }
+
   main > .section > div {
-    padding: 0 32px;
+    padding: 0 var(--space-l);
   }
 }
 
-/* section metadata */
 main .section.light,
-main .section.highlight {
-  background-color: var(--light-color);
+main .section.dark {
   margin: 0;
-  padding: 40px 0;
+  padding: var(--space-l) 0;
+}
+
+main .section.light {
+  background-color: var(--color-bg-light);
+}
+
+main .section.dark {
+  background-color: var(--color-bg-dark);
+  color: var(--color-bg);
+}
+
+main .section.dark h1,
+main .section.dark h2,
+main .section.dark h3,
+main .section.dark h4,
+main .section.dark h5,
+main .section.dark h6,
+main .section.dark a:not(.button) {
+  color: inherit;
+}
+
+main > .section.light:last-child,
+main > .section.dark:last-child {
+  margin-bottom: 0;
+}
+
+main > .section.light + .section.light,
+main > .section.light + .section.dark,
+main > .section.dark + .section.light,
+main > .section.dark + .section.dark {
+  margin-top: 0;
+}
+
+main > .section.light:has(+ .section.light),
+main > .section.light:has(+ .section.dark),
+main > .section.dark:has(+ .section.light),
+main > .section.dark:has(+ .section.dark) {
+  margin-bottom: 0;
+}
+
+@media (width >= 900px) {
+  main .section.light,
+  main .section.dark {
+    padding: var(--space-xl) 0;
+  }
 }