diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.less b/cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.scss
similarity index 83%
rename from cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.less
rename to cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.scss
index 2525f56dc1..5e9e61ab46 100644
--- a/cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.less
+++ b/cfgov/unprocessed/apps/ask-cfpb/css/autocomplete.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .m-autocomplete {
   position: relative;
 
@@ -9,6 +11,7 @@
 .m-autocomplete__results {
   box-sizing: border-box;
   width: 100%;
+
   // Restrict height of autocomplete suggestions
   // 'dropdown' box to 200px.
   max-height: 200px;
@@ -27,7 +30,7 @@
 
     &:hover,
     &.m-autocomplete__selected {
-      background-color: @block--bg;
+      background-color: $block-bg;
     }
 
     &:last-child {
@@ -37,7 +40,7 @@
 
   a {
     display: block;
-    padding: unit(@grid_gutter-width / 4 / @base-font-size-px, em);
+    padding: math.div(math.div($grid-gutter-width, 4), $base-font-size-px) + em;
     border-width: 0;
     color: var(--black);
   }
diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/main.less b/cfgov/unprocessed/apps/ask-cfpb/css/main.less
deleted file mode 100644
index f1bbf1e6f2..0000000000
--- a/cfgov/unprocessed/apps/ask-cfpb/css/main.less
+++ /dev/null
@@ -1,253 +0,0 @@
-@import (reference) '../../../css/main.less';
-@import (less) './autocomplete.less';
-
-/* ==========================================================================
-   consumerfinance.gov
-   Ask CFPB pages at /ask-cfpb/.
-   ========================================================================== */
-
-.ask-cfpb-page--see-all {
-  .search-bar,
-  .m-notification,
-  .results,
-  .terms {
-    box-sizing: border-box;
-    max-width: 41.875rem;
-  }
-
-  .terms {
-    padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-
-    .term {
-      margin-bottom: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
-    }
-
-    .term + .term {
-      padding-top: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
-    }
-
-    .term__name {
-      .h2();
-
-      display: block;
-    }
-
-    .term__definition {
-      display: block;
-      margin-left: 0;
-    }
-  }
-
-  .ask-search-link {
-    // Break Ask search link below text on smaller screen sizes.
-    display: flex;
-    flex-wrap: wrap;
-    gap: unit(10px / @base-font-size-px, rem);
-  }
-
-  .search-bar {
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-
-    label {
-      margin-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    }
-
-    .a-btn {
-      margin-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    }
-
-    .a-btn--link {
-      margin-left: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    }
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      .m-form-field {
-        display: flex;
-        align-items: flex-start;
-        flex-wrap: nowrap;
-
-        button {
-          margin-left: unit( @grid_gutter-width / 3 / @base-font-size-px, em );
-          margin-top: 0;
-        }
-
-        .a-btn--link {
-          flex-shrink: 0;
-          margin-top: 0.5em;
-        }
-      }
-    });
-  }
-
-  h1 + .search-bar {
-    margin-top: unit(25px / @base-font-size-px, em);
-  }
-
-  .results-message {
-    margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    margin-bottom: unit(40px / @base-font-size-px, em);
-  }
-
-  .results-link {
-    margin: unit(5px / @base-font-size-px, em) 0;
-    display: block;
-  }
-
-  .results {
-    article {
-      padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-      padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-      border-top: 1px solid @block--border-top;
-
-      .h3 {
-        margin-bottom: 0;
-
-        a {
-          color: var(--black);
-
-          &:hover {
-            border-style: solid;
-            border-color: @link-underline-hover;
-            color: @link-text-hover;
-          }
-        }
-      }
-    }
-
-    article:last-of-type {
-      padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    }
-  }
-}
-
-/* Answer page */
-
-.ask-cfpb-page--answer {
-  .m-notification {
-    max-width: 41.875rem;
-  }
-
-  .answer-text {
-    h2,
-    h3,
-    h4 {
-      max-width: 41.875rem;
-    }
-    .row + .row {
-      margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    }
-
-    .row + .row > .o-table:first-child,
-    .row + .row > .o-video-player:first-child {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-    }
-
-    .row + .row h2 {
-      margin-top: unit(@grid_gutter-width / @size-ii, em);
-    }
-
-    .row + .row h3 {
-      margin-top: unit(@grid_gutter-width / @size-iii, em);
-    }
-
-    // Large desktop size.
-    .respond-to-min(@bp-lg-min, {
-      .row + .row h2 {
-        margin-top: unit( @grid_gutter-width * 1.5 / @size-ii, em );
-      }
-    });
-  }
-
-  // Mobile only.
-  .respond-to-max(@bp-xs-max, {
-    .related-questions {
-      margin: unit( @grid_gutter-width / @base-font-size-px, em ) 0;
-    }
-  });
-
-  .about-us-text a {
-    font-weight: 500;
-  }
-
-  .lead-paragraph {
-    // This makes for line lengths between 85-95 characters
-    max-width: 41.875rem;
-  }
-
-  .answer-edited-date {
-    .h5();
-    display: block;
-    color: var(--gray-90);
-  }
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    .m-list__item--last {
-      padding-top: unit(7px / @base-font-size-px, em);
-    }
-  });
-}
-
-/* Landing page */
-
-.ask-cfpb-page--landing {
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    .m-hero {
-      border-bottom: 1px solid @block--border;
-    }
-  });
-
-  form[action='/ask-cfpb/search/'] h2 {
-    .heading-4();
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      .heading-3();
-    });
-  }
-}
-
-.ask-cfpb-page {
-  // Mobile only.
-  .respond-to-max(@bp-xs-max, {
-    .m-pagination {
-      height: auto;
-    }
-  });
-
-  .search-results {
-    max-width: 41.875rem;
-  }
-
-  .question__summary {
-    border-bottom: 1px solid @block--border-bottom;
-  }
-}
-
-.ask-cfpb-page--search {
-  .o-search-bar {
-    max-width: 41.875rem;
-    .a-text-input {
-      width: 100%;
-    }
-    form {
-      max-width: 41.875rem;
-    }
-  }
-
-  .question__summary {
-    padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em) 0;
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding:  unit(@grid_gutter-width / @base-font-size-px, em) 0;
-    });
-
-    .question__title a {
-      font-size: @size-iv;
-      border-width: 0;
-    }
-  }
-}
diff --git a/cfgov/unprocessed/apps/ask-cfpb/css/main.scss b/cfgov/unprocessed/apps/ask-cfpb/css/main.scss
new file mode 100644
index 0000000000..fb1bddeb5b
--- /dev/null
+++ b/cfgov/unprocessed/apps/ask-cfpb/css/main.scss
@@ -0,0 +1,268 @@
+@use 'sass:math';
+@import '../../../css/main';
+@import './autocomplete';
+
+/* ==========================================================================
+   consumerfinance.gov
+   Ask CFPB pages at /ask-cfpb/.
+   ========================================================================== */
+
+.ask-cfpb-page--see-all {
+  .search-bar,
+  .m-notification,
+  .results,
+  .terms {
+    box-sizing: border-box;
+    max-width: 41.875rem;
+  }
+
+  .terms {
+    padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    .term {
+      margin-bottom: math.div($grid-gutter-width * 1.5, $base-font-size-px) + em;
+    }
+
+    .term + .term {
+      padding-top: math.div($grid-gutter-width * 1.5, $base-font-size-px) + em;
+    }
+
+    .term__name {
+      @include h2;
+
+      display: block;
+    }
+
+    .term__definition {
+      display: block;
+      margin-left: 0;
+    }
+  }
+
+  .ask-search-link {
+    // Break Ask search link below text on smaller screen sizes.
+    display: flex;
+    flex-wrap: wrap;
+    gap: math.div(10px, $base-font-size-px) + rem;
+  }
+
+  .search-bar {
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    label {
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 3),
+          $base-font-size-px
+        ) + em;
+    }
+
+    .a-btn {
+      margin-top: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
+        em;
+    }
+
+    .a-btn--link {
+      margin-left: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
+        em;
+    }
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      .m-form-field {
+        display: flex;
+        align-items: flex-start;
+        flex-wrap: nowrap;
+
+        button {
+          margin-left: math.div(
+              math.div($grid-gutter-width, 3),
+              $base-font-size-px
+            ) + em;
+          margin-top: 0;
+        }
+
+        .a-btn--link {
+          flex-shrink: 0;
+          margin-top: 0.5em;
+        }
+      }
+    }
+  }
+
+  h1 + .search-bar {
+    margin-top: math.div(25px, $base-font-size-px) + em;
+  }
+
+  .results-message {
+    margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+    margin-bottom: math.div(40px, $base-font-size-px) + em;
+  }
+
+  .results-link {
+    margin: (math.div(5px, $base-font-size-px) + em) 0;
+    display: block;
+  }
+
+  .results {
+    article {
+      padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+      padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+      border-top: 1px solid $block-border-top;
+
+      .h3 {
+        margin-bottom: 0;
+
+        a {
+          color: var(--black);
+
+          &:hover {
+            border-style: solid;
+            border-color: $link-underline-hover;
+            color: $link-text-hover;
+          }
+        }
+      }
+    }
+
+    article:last-of-type {
+      padding-bottom: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + em;
+    }
+  }
+}
+
+/* Answer page */
+
+.ask-cfpb-page--answer {
+  .m-notification {
+    max-width: 41.875rem;
+  }
+
+  .answer-text {
+    h2,
+    h3,
+    h4 {
+      max-width: 41.875rem;
+    }
+    .row + .row {
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
+    }
+
+    .row + .row > .o-table:first-child,
+    .row + .row > .o-video-player:first-child {
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+    }
+
+    .row + .row h2 {
+      margin-top: math.div($grid-gutter-width, $size-ii) + em;
+    }
+
+    .row + .row h3 {
+      margin-top: math.div($grid-gutter-width, $size-iii) + em;
+    }
+
+    // Large desktop size.
+    @include respond-to-min($bp-lg-min) {
+      .row + .row h2 {
+        margin-top: math.div($grid-gutter-width * 1.5, $size-ii) + em;
+      }
+    }
+  }
+
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    .related-questions {
+      margin: (math.div($grid-gutter-width, $base-font-size-px) + em) 0;
+    }
+  }
+
+  .about-us-text a {
+    font-weight: 500;
+  }
+
+  .lead-paragraph {
+    // This makes for line lengths between 85-95 characters
+    max-width: 41.875rem;
+  }
+
+  .answer-edited-date {
+    @include h5;
+    display: block;
+    color: var(--gray-90);
+  }
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    .m-list__item--last {
+      padding-top: math.div(7px, $base-font-size-px) + em;
+    }
+  }
+}
+
+/* Landing page */
+
+.ask-cfpb-page--landing {
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    .m-hero {
+      border-bottom: 1px solid $block-border;
+    }
+  }
+
+  form[action='/ask-cfpb/search/'] h2 {
+    @include heading-4;
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include heading-3;
+    }
+  }
+}
+
+.ask-cfpb-page {
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    .m-pagination {
+      height: auto;
+    }
+  }
+
+  .search-results {
+    max-width: 41.875rem;
+  }
+
+  .question__summary {
+    border-bottom: 1px solid $block-border-bottom;
+  }
+}
+
+.ask-cfpb-page--search {
+  .o-search-bar {
+    max-width: 41.875rem;
+    .a-text-input {
+      width: 100%;
+    }
+    form {
+      max-width: 41.875rem;
+    }
+  }
+
+  .question__summary {
+    padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em
+      0;
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      padding: (math.div($grid-gutter-width, $base-font-size-px) + em) 0;
+    }
+
+    .question__title a {
+      font-size: $size-iv;
+      border-width: 0;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/apps/careers/css/main.less b/cfgov/unprocessed/apps/careers/css/main.less
deleted file mode 100644
index 8606efd23c..0000000000
--- a/cfgov/unprocessed/apps/careers/css/main.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) 'cfpb-core.less';
-
-dl.vacancy-announcement dt {
-  margin-top: unit(12px / @base-font-size-px, em);
-  margin-bottom: 0;
-}
diff --git a/cfgov/unprocessed/apps/careers/css/main.scss b/cfgov/unprocessed/apps/careers/css/main.scss
new file mode 100644
index 0000000000..923d890b48
--- /dev/null
+++ b/cfgov/unprocessed/apps/careers/css/main.scss
@@ -0,0 +1,7 @@
+@use 'sass:math';
+@import 'cfpb-core';
+
+dl.vacancy-announcement dt {
+  margin-top: math.div(12px, $base-font-size-px) + em;
+  margin-bottom: 0;
+}
diff --git a/cfgov/unprocessed/apps/ccdb-search/css/main.less b/cfgov/unprocessed/apps/ccdb-search/css/main.scss
similarity index 84%
rename from cfgov/unprocessed/apps/ccdb-search/css/main.less
rename to cfgov/unprocessed/apps/ccdb-search/css/main.scss
index e02c606839..4d7371a3d4 100644
--- a/cfgov/unprocessed/apps/ccdb-search/css/main.less
+++ b/cfgov/unprocessed/apps/ccdb-search/css/main.scss
@@ -1,5 +1,6 @@
-@import url('../node_modules/@cfpb/ccdb5-ui/dist/ccdb5.css');
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import '../node_modules/@cfpb/ccdb5-ui/dist/ccdb5.css';
+@import 'cfpb-core';
 
 // TODO: CCDB requires a number of undesirable overrides here, since it imports
 //       the DS into its codebase independent of the import that happens for the
@@ -26,7 +27,7 @@
 // mega menu override and brings the ul:last-child back to having no bottom
 // margin. This causes the mega menu to lose a gap between featured menu items.
 .o-mega-menu__content-2-list--featured ul {
-  margin-bottom: unit(30px / @base-font-size-px, em);
+  margin-bottom: math.div(30px, $base-font-size-px) + em;
 }
 
 .ccdb-search {
@@ -38,14 +39,14 @@
   left: 50%;
   right: 50%;
   position: relative;
-  padding: unit(30px / @base-font-size-px, rem);
+  padding: math.div(30px, $base-font-size-px) + rem;
   padding-bottom: 0;
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-    padding: unit(15px / @base-font-size-px, rem);
+  @include respond-to-max($bp-sm-max) {
+    padding: math.div(15px, $base-font-size-px) + rem;
     padding-bottom: 0;
-  });
+  }
 
   // Overrides for design system.
   .o-expandable__header .o-expandable__cue-close,
@@ -72,7 +73,7 @@
     height: auto;
   }
 
-  // Overrides for styles in tags.less
+  // Overrides for styles in tags.scss
   .m-tags {
     padding-left: 0;
   }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss
similarity index 79%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss
index 72d7dadd62..922c41a4d1 100644
--- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.less
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss
@@ -1,30 +1,15 @@
-@import (less) 'highcharts/css/highcharts.css';
+@use './vars' as *;
+@import 'highcharts/css/highcharts.css';
 
 // cf-core is included for cf-brand-colors and media queries.
-@import (reference) '@cfpb/cfpb-core/src/cfpb-core.less';
-@import (less) './mixins.less';
+@import '@cfpb/cfpb-core/src/cfpb-core';
+@import './mixins';
 
 // Import chart-type specific styling.
-@import (less) './chart-line.less';
-@import (less) './chart-bar.less';
-@import (less) './chart-tilemap.less';
-@import (less) './chart-geomap.less';
-
-// Chart colors.
-@chart-blue-primary: var(--pacific);
-@chart-blue-secondary: var(--pacific-60);
-@chart-gold-primary: var(--gold-dark);
-@chart-gold-secondary: var(--gold-80);
-@chart-green-primary: var(--green);
-@chart-green-secondary: var(--green-60);
-@chart-navy-primary: var(--navy);
-@chart-navy-secondary: var(--navy-60);
-@chart-neutral-primary: var(--neutral);
-@chart-neutral-secondary: var(--neutral-60);
-@chart-purple-primary: var(--purple);
-@chart-purple-secondary: var(--purple-60);
-@chart-teal-primary: var(--teal);
-@chart-teal-secondary: var(--teal-60);
+@import './chart-line';
+@import './chart-bar';
+@import './chart-tilemap';
+@import './chart-geomap';
 
 /*
 Updating the charts:
@@ -47,7 +32,7 @@ x/y positioning on the SVG elements.
   .highcharts-legend-box,
   .highcharts-axis-labels,
   .highcharts-tooltip text {
-    .u-chart-label();
+    @include u-chart-label;
   }
 
   &[data-chart-type='line'],
@@ -108,7 +93,7 @@ x/y positioning on the SVG elements.
     // Center "Select time range" label.
     .cfpb-chart__small {
       .highcharts-range-selector-label {
-        .h6();
+        @include h6;
         transform: translateY(370px);
         left: calc(50% - 64px) !important;
       }
@@ -151,7 +136,9 @@ x/y positioning on the SVG elements.
      ****************/
 
     // Small screen size.
+    /* stylelint-disable no-duplicate-selectors */
     .cfpb-chart__small {
+      /* stylelint-enable no-duplicate-selectors */
       .highcharts-button text {
         /*
         This vertically aligns the button text, but in IE11 the y value will
@@ -162,7 +149,9 @@ x/y positioning on the SVG elements.
     }
 
     // Large screen size.
+    /* stylelint-disable no-duplicate-selectors */
     .cfpb-chart__large {
+      /* stylelint-enable no-duplicate-selectors */
       .highcharts-button text {
         /*
         This vertically aligns the button text, but in IE11 the y value will
@@ -174,7 +163,7 @@ x/y positioning on the SVG elements.
 
     .highcharts-button {
       fill: var(--pacific-20);
-      font-size: @size-v;
+      font-size: $size-v;
 
       &:hover {
         cursor: pointer;
@@ -197,7 +186,6 @@ x/y positioning on the SVG elements.
     /* Setting `navigator { enabled: false }` in JavaScript
        also disables the pressed state of the range selector buttons,
        so instead we hide the navigator via CSS. */
-
     .highcharts-navigator,
     .highcharts-navigator-series,
     .highcharts-navigator-xaxis,
@@ -209,7 +197,7 @@ x/y positioning on the SVG elements.
 
     /* stylelint-disable no-duplicate-selectors */
     .cfpb-chart__large {
-      /* stylelint-enable */
+      /* stylelint-enable no-duplicate-selectors */
       .highcharts-navigator,
       .highcharts-navigator-series,
       .highcharts-navigator-xaxis,
@@ -250,36 +238,57 @@ x/y positioning on the SVG elements.
     // Set default label settings.
     .highcharts-tooltip,
     .highcharts-tooltip .highcharts-header {
-      .u-chart-label();
+      @include u-chart-label;
     }
 
     // Set colors.
     &[data-chart-color='blue'] {
-      .u-chart-colorizer-navigator( @chart-blue-primary, @chart-blue-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-blue-primary,
+        $chart-blue-secondary
+      );
     }
 
     &[data-chart-color='gold'] {
-      .u-chart-colorizer-navigator( @chart-gold-primary, @chart-gold-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-gold-primary,
+        $chart-gold-secondary
+      );
     }
 
     &[data-chart-color='green'] {
-      .u-chart-colorizer-navigator( @chart-green-primary, @chart-green-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-green-primary,
+        $chart-green-secondary
+      );
     }
 
     &[data-chart-color='neutral'] {
-      .u-chart-colorizer-navigator( @chart-neutral-primary, @chart-neutral-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-neutral-primary,
+        $chart-neutral-secondary
+      );
     }
 
     &[data-chart-color='purple'] {
-      .u-chart-colorizer-navigator( @chart-purple-primary, @chart-purple-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-purple-primary,
+        $chart-purple-secondary
+      );
     }
 
     &[data-chart-color='teal'] {
-      .u-chart-colorizer-navigator( @chart-teal-primary, @chart-teal-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-teal-primary,
+        $chart-teal-secondary
+      );
     }
 
     &[data-chart-color='navy'] {
-      .u-chart-colorizer-navigator( @chart-navy-primary, @chart-navy-secondary );
+      @include u-chart-colorizer-navigator(
+        $chart-navy-primary,
+        $chart-navy-secondary
+      );
     }
   }
 }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss
similarity index 61%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss
index 0ea0250f85..7f876ae63a 100644
--- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.less
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss
@@ -1,3 +1,5 @@
+@use './vars.scss' as *;
+
 .cfpb-chart[data-chart-type='bar'] {
   // Position horizontal rule.
   .cfpb-chart__small::after {
@@ -20,18 +22,21 @@
   }
 
   &[data-chart-color='blue'] {
-    .u-chart-colorizer-bar( @chart-blue-primary, @chart-blue-secondary );
+    @include u-chart-colorizer-bar($chart-blue-primary, $chart-blue-secondary);
   }
 
   &[data-chart-color='green'] {
-    .u-chart-colorizer-bar( @chart-green-primary, @chart-green-secondary );
+    @include u-chart-colorizer-bar(
+      $chart-green-primary,
+      $chart-green-secondary
+    );
   }
 
   &[data-chart-color='teal'] {
-    .u-chart-colorizer-bar( @chart-teal-primary, @chart-teal-secondary );
+    @include u-chart-colorizer-bar($chart-teal-primary, $chart-teal-secondary);
   }
 
   &[data-chart-color='navy'] {
-    .u-chart-colorizer-bar( @chart-navy-primary, @chart-navy-secondary );
+    @include u-chart-colorizer-bar($chart-navy-primary, $chart-navy-secondary);
   }
 }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-geomap.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-geomap.scss
similarity index 100%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-geomap.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-geomap.scss
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss
similarity index 86%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss
index 042b92ef67..9ae39629a8 100644
--- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.less
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss
@@ -1,3 +1,5 @@
+@use './vars.scss' as *;
+
 /*********
 * LEGEND
 *********/
@@ -112,30 +114,30 @@
    **************/
 
   &[data-chart-color='blue'] {
-    .u-chart-colorizer-line( @chart-blue-primary );
+    @include u-chart-colorizer-line($chart-blue-primary);
   }
 
   &[data-chart-color='gold'] {
-    .u-chart-colorizer-line( @chart-gold-primary );
+    @include u-chart-colorizer-line($chart-gold-primary);
   }
 
   &[data-chart-color='green'] {
-    .u-chart-colorizer-line( @chart-green-primary );
+    @include u-chart-colorizer-line($chart-green-primary);
   }
 
   &[data-chart-color='neutral'] {
-    .u-chart-colorizer-line( @chart-neutral-primary );
+    @include u-chart-colorizer-line($chart-neutral-primary);
   }
 
   &[data-chart-color='purple'] {
-    .u-chart-colorizer-line( @chart-purple-primary );
+    @include u-chart-colorizer-line($chart-purple-primary);
   }
 
   &[data-chart-color='teal'] {
-    .u-chart-colorizer-line( @chart-teal-primary );
+    @include u-chart-colorizer-line($chart-teal-primary);
   }
 
   &[data-chart-color='navy'] {
-    .u-chart-colorizer-line( @chart-navy-primary );
+    @include u-chart-colorizer-line($chart-navy-primary);
   }
 }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss
similarity index 81%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss
index 317d6b0836..c0a5f9e4cc 100644
--- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.less
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss
@@ -9,7 +9,7 @@
   }
 
   .highcharts-label__tile-map {
-    .u-chart-label();
+    @include u-chart-label;
     color: var(--black);
     font-weight: 600;
     span {
@@ -21,13 +21,13 @@
   .highcharts-legend__tile-map {
     transform: translateY(15px);
 
-    .respond-to-min( 500px, {
-      transform: translateY( 0 );
-    } );
+    @include respond-to-min(500px) {
+      transform: translateY(0);
+    }
   }
 
   // Utility for setting the hover/focus state of a tile.
-  .u-point-hover-state {
+  @mixin u-point-hover-state() {
     stroke: var(--black);
     cursor: default;
     stroke-width: 4px !important;
@@ -38,26 +38,26 @@
     stroke: var(--gray-80);
     &:hover,
     &:focus {
-      .u-point-hover-state();
+      @include u-point-hover-state;
     }
   }
 
   // Provide this for Firefox.
   .highcharts-map-series .highcharts-point-hover {
-    .u-point-hover-state();
+    @include u-point-hover-state;
   }
 
   .highcharts-data-label {
     font-weight: 600;
     color: var(--black);
-    font-size: @size-v;
+    font-size: $size-v;
     line-height: 1.3;
 
-    .respond-to-max( 600px, {
+    @include respond-to-max(600px) {
       margin-top: 2px;
       font-size: 10px;
       line-height: 1;
-    } );
+    }
 
     .highcharts-data-label-state-abbr {
       text-align: center;
@@ -65,11 +65,11 @@
     }
 
     .highcharts-data-label-state-value {
-      .respond-to-max( 600px, {
+      @include respond-to-max(600px) {
         display: block;
         margin-top: -2px;
         font-size: 9px;
-      } );
+      }
     }
   }
 }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.less b/cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.scss
similarity index 64%
rename from cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.less
rename to cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.scss
index 000d4fa9ae..13f46c1614 100644
--- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.less
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/mixins.scss
@@ -1,16 +1,16 @@
 // Set up default label settings.
-.u-chart-label {
-  font-size: @base-font-size-px;
+@mixin u-chart-label() {
+  font-size: $base-font-size-px;
   font-family: inherit;
   color: var(--gray);
 }
 
 // Set colors and position for legend and tooltip lines.
-.u-chart-colorizer-line( @color-primary ) {
+@mixin u-chart-colorizer-line($color-primary) {
   .highcharts-color-0,
   .highcharts-color-1,
   .highcharts-navigator-series .highcharts-graph {
-    stroke: @color-primary;
+    stroke: $color-primary;
   }
 
   // Remove drop-shadow filter from tooltip text.
@@ -45,6 +45,7 @@
 
       &::before {
         position: absolute;
+
         // This value offsets the value sent in the parent position.
         left: 9995px;
 
@@ -56,11 +57,10 @@
         /* Using an SVG prevents an issue where the 1px dash line will disappear
            at certain heights due to rounding off of single pixels.
         */
-        @svg-url: %(
-          'data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" version="1.1" width="14" height="4" viewBox="0 0 14 4"%3E%3Cpath d="M 0.5 0.5 L 261.5 0.5 261.5 79.5 0.5 79.5 Z" style="fill: %a"%3E%3C/path%3E%3C/svg%3E',
-          escape(@color-primary)
-        );
-        background-image: url('@{svg-url}');
+        $svg-url: 'data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" version="1.1" width="14" height="4" viewBox="0 0 14 4"%3E%3Cpath d="M 0.5 0.5 L 261.5 0.5 261.5 79.5 0.5 79.5 Z" style="fill: #{$color-primary}"%3E%3C/path%3E%3C/svg%3E';
+
+        //        $svg-url: %( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14' height='4' viewBox='0 0 14 4'%3E%3Cpath d='M 0.5 0.5 L 261.5 0.5 261.5 79.5 0.5 79.5 Z' style='fill: %a'%3E%3C/path%3E%3C/svg%3E", escape( $color-primary ) );
+        background-image: url('#{$svg-url}');
         background-repeat: no-repeat;
       }
     }
@@ -74,27 +74,27 @@
 }
 
 // Set colors for bar chart bars and tooltip.
-.u-chart-colorizer-bar( @color-primary, @color-secondary ) {
+@mixin u-chart-colorizer-bar($color-primary, $color-secondary) {
   .highcharts-point {
-    fill: @color-secondary;
+    fill: $color-secondary;
 
     &.highcharts-data__unprojected {
-      fill: @color-primary;
+      fill: $color-primary;
     }
   }
 
   .highcharts-tooltip-box {
-    stroke: @color-primary;
+    stroke: $color-primary;
   }
 }
 
 // Set colors in navigator (used in line charts).
-.u-chart-colorizer-navigator( @color-primary, @color-secondary ) {
+@mixin u-chart-colorizer-navigator($color-primary, $color-secondary) {
   .highcharts-navigator-series .highcharts-graph {
-    stroke: @color-primary;
+    stroke: $color-primary;
   }
 
   .highcharts-navigator-series .highcharts-graph.highcharts-zone-graph-1 {
-    stroke: @color-secondary;
+    stroke: $color-secondary;
   }
 }
diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/vars.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/vars.scss
new file mode 100644
index 0000000000..32f8410481
--- /dev/null
+++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/vars.scss
@@ -0,0 +1,15 @@
+// Chart colors.
+$chart-blue-primary: var(--pacific);
+$chart-blue-secondary: var(--pacific-60);
+$chart-gold-primary: var(--gold-dark);
+$chart-gold-secondary: var(--gold-80);
+$chart-green-primary: var(--green);
+$chart-green-secondary: var(--green-60);
+$chart-navy-primary: var(--navy);
+$chart-navy-secondary: var(--navy-60);
+$chart-neutral-primary: var(--neutral);
+$chart-neutral-secondary: var(--neutral-60);
+$chart-purple-primary: var(--purple);
+$chart-purple-secondary: var(--purple-60);
+$chart-teal-primary: var(--teal);
+$chart-teal-secondary: var(--teal-60);
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
deleted file mode 100644
index eb74f39ec7..0000000000
--- a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.less
+++ /dev/null
@@ -1,182 +0,0 @@
-@import (reference) '../../../css/main.less';
-@import url('../node_modules/ctrl-f/dist/css/index.css');
-
-.o-fig__main {
-  // Bump up all heading sizes to improve readability
-  h1 {
-    .superheading();
-  }
-
-  h2 {
-    .h1();
-    margin-top: 60px;
-  }
-
-  h3 {
-    .h2();
-    margin-top: 45px;
-  }
-
-  :not(.m-info-unit__heading-text) > h4 {
-    .h3();
-    margin-top: 30px;
-  }
-
-  h5 {
-    .h4();
-    margin-top: 30px;
-  }
-
-  pre {
-    font-family: Menlo, 'Andale Mono', 'Courier New', monospace;
-    overflow-x: auto;
-    font-size: unit(14px / @base-font-size-px, em);
-  }
-
-  .o-table {
-    margin-top: unit(30px / @base-font-size-px, em);
-    td {
-      vertical-align: top;
-      hyphens: auto;
-    }
-    br {
-      display: none;
-    }
-  }
-
-  .u-fig-print-link {
-    margin-top: unit(45px / @base-font-size-px, em);
-    margin-bottom: unit(60px / @base-font-size-px, em);
-    padding-top: unit(30px / @base-font-size-px, em);
-  }
-
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    // Increase the sidebar border from 1px to 2px
-    .content &:after {
-      border-left-width: 2px;
-    }
-  });
-}
-
-.o-fig__heading {
-  a {
-    color: var(--black);
-    word-break: break-word;
-  }
-}
-
-.o-fig__section--sub-sub {
-  margin-top: unit(45px / @base-font-size-px, em);
-  margin-bottom: unit(45px / @base-font-size-px, em);
-
-  // Put a horizontal rule below all sub level 3 headings
-  &::after {
-    display: inline-block;
-    content: '';
-    border-top: 2px solid var(--gray-50);
-    width: calc(100% + 30px);
-    margin: unit(45px / @base-font-size-px, em) 0 0
-      unit(-30px / @base-font-size-px, em);
-  }
-}
-
-// TODO: convert FIG secondary nav override abuse to modifiers on secondary nav.
-.o-fig__sidebar {
-  .o-secondary-nav__label {
-    width: 95%;
-  }
-
-  // When the sidebar collapses into an expandable,
-  // make the expandable's content scrollable
-  .o-secondary-nav__content[data-open='true'] {
-    overflow-y: auto;
-    height: 100vh;
-    > .o-secondary-nav__list {
-      // Add a large buffer underneath to ensure mobile users
-      // can use assistive technology like Reachability to access
-      // items at the bottom of the list
-      padding-bottom: unit(420px / @base-font-size-px, em);
-    }
-  }
-
-  // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-    .o-secondary-nav__link {
-      padding: unit( 10px / @base-font-size-px, em );
-    }
-  });
-
-  .o-secondary-nav__link {
-    padding-left: unit(24px / @base-font-size-px, em);
-    text-indent: unit(-18px / @base-font-size-px, em);
-  }
-
-  .o-secondary-nav__list--parents > .o-secondary-nav__link {
-    padding-left: unit(10px / @base-font-size-px, em);
-    text-indent: unit(-10px / @base-font-size-px, em);
-  }
-
-  h4 {
-    padding-left: unit(19px / @size-iv, em);
-  }
-}
-
-.research-report {
-  // 670px, plus a 15px gutter on each side (standard paragrah widths)
-  max-width: unit((670 + 30) / 16, em);
-
-  .lead-paragraph,
-  .author-names {
-    margin: 30px 0;
-  }
-
-  .report-header > a {
-    color: black;
-    &:visited {
-      color: black;
-    }
-  }
-}
-
-.u-hide-on-desktop {
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    display: none;
-  });
-}
-
-.u-hide-on-tablet {
-  // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-    display: none;
-  });
-}
-
-#ctrl-f-modal {
-  h3 {
-    font-size: unit(16px / @base-font-size-px, em);
-  }
-  svg {
-    .cf-icon-svg();
-  }
-  input {
-    .a-text-input();
-    padding-left: unit(32px / @base-font-size-px, em);
-    &:focus {
-      .a-text-input.focus();
-    }
-  }
-  .ctrl-f-search-result {
-    border-bottom: 1px solid var(--gray-40);
-    a {
-      color: var(--black);
-      &:focus {
-        .a-text-input.focus();
-      }
-      &:hover {
-        .a-text-input.hover();
-      }
-    }
-  }
-}
diff --git a/cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss
new file mode 100644
index 0000000000..5b572a88e4
--- /dev/null
+++ b/cfgov/unprocessed/apps/filing-instruction-guide/css/main.scss
@@ -0,0 +1,206 @@
+@use 'sass:math';
+@import '../../../css/main';
+@import '../node_modules/ctrl-f/dist/css/index.css';
+
+.o-fig__main {
+  // Bump up all heading sizes to improve readability
+  h1 {
+    @include u-superheading;
+  }
+
+  h2 {
+    @include h1;
+    margin-top: 60px;
+  }
+
+  h3 {
+    @include h2;
+    margin-top: 45px;
+  }
+
+  &:not(.m-info-unit__heading-text) > h4 {
+    @include h3;
+    margin-top: 30px;
+  }
+
+  h5 {
+    @include h4;
+    margin-top: 30px;
+  }
+
+  pre {
+    font-family: Menlo, 'Andale Mono', 'Courier New', monospace;
+    overflow-x: auto;
+    font-size: math.div(14px, $base-font-size-px) + em;
+  }
+
+  .o-table {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    td {
+      vertical-align: top;
+      hyphens: auto;
+    }
+    br {
+      display: none;
+    }
+  }
+
+  .u-fig-print-link {
+    margin-top: math.div(45px, $base-font-size-px) + em;
+    margin-bottom: math.div(60px, $base-font-size-px) + em;
+    padding-top: math.div(30px, $base-font-size-px) + em;
+  }
+
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    // Increase the sidebar border from 1px to 2px
+    .content &::after {
+      border-left-width: 2px;
+    }
+  }
+}
+
+.o-fig__heading {
+  a {
+    color: var(--black);
+    word-break: break-word;
+  }
+}
+
+.o-fig__section--sub-sub {
+  margin-top: math.div(45px, $base-font-size-px) + em;
+  margin-bottom: math.div(45px, $base-font-size-px) + em;
+
+  // Put a horizontal rule below all sub level 3 headings
+  &::after {
+    display: inline-block;
+    content: '';
+    border-top: 2px solid var(--gray-50);
+    width: calc(100% + 30px);
+    margin: (math.div(45px, $base-font-size-px) + em) 0 0
+      (math.div(-30px, $base-font-size-px) + em);
+  }
+}
+
+// TODO: convert FIG secondary nav override abuse to modifiers on secondary nav.
+.o-fig__sidebar {
+  .o-secondary-nav__label {
+    width: 95%;
+  }
+
+  // When the sidebar collapses into an expandable,
+  // make the expandable's content scrollable
+  .o-secondary-nav__content[data-open='true'] {
+    overflow-y: auto;
+    height: 100vh;
+    > .o-secondary-nav__list {
+      // Add a large buffer underneath to ensure mobile users
+      // can use assistive technology like Reachability to access
+      // items at the bottom of the list
+      padding-bottom: math.div(420px, $base-font-size-px) + em;
+    }
+  }
+
+  // Tablet and below.
+  @include respond-to-max($bp-sm-max) {
+    .o-secondary-nav__link {
+      padding: math.div(10px, $base-font-size-px) + em;
+    }
+  }
+
+  .o-secondary-nav__link {
+    padding-left: math.div(24px, $base-font-size-px) + em;
+    text-indent: math.div(-18px, $base-font-size-px) + em;
+  }
+
+  .o-secondary-nav__list--parents > .o-secondary-nav__link {
+    padding-left: math.div(10px, $base-font-size-px) + em;
+    text-indent: math.div(-10px, $base-font-size-px) + em;
+  }
+
+  h4 {
+    padding-left: math.div(19px, $size-iv) + em;
+  }
+}
+
+.research-report {
+  // 670px, plus a 15px gutter on each side (standard paragrah widths)
+  max-width: math.div((670 + 30), 16) + em;
+
+  .lead-paragraph,
+  .author-names {
+    margin: 30px 0;
+  }
+
+  .report-header > a {
+    color: black;
+    &:visited {
+      color: black;
+    }
+  }
+}
+
+.u-hide-on-desktop {
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    display: none;
+  }
+}
+
+.u-hide-on-tablet {
+  // Tablet and below.
+  @include respond-to-max($bp-sm-max) {
+    display: none;
+  }
+}
+
+#ctrl-f-modal {
+  h3 {
+    font-size: math.div(16px, $base-font-size-px) + em;
+  }
+  svg {
+    // cf-icon-svg
+    height: $cf-icon-height;
+    vertical-align: text-top;
+    fill: currentcolor;
+  }
+  input {
+    // Reset the browser's default styling.
+    appearance: none;
+    display: inline-block;
+    padding: math.div(7px, $base-font-size-px) + em;
+    border: 1px solid $input-border;
+    background: $input-bg;
+    color: $input-text;
+
+    padding-left: math.div(32px, $base-font-size-px) + em;
+    &:focus {
+      border-color: $input-border-focused;
+      box-shadow: 0 0 0 1px $input-border-focused;
+      outline: 1px dotted $input-border-focused;
+
+      // The outline-offset property is not supported everywhere (e.g. IE)
+      // but it adds a nice touch in browsers where it is.
+      outline-offset: 2px;
+    }
+  }
+  .ctrl-f-search-result {
+    border-bottom: 1px solid var(--gray-40);
+    a {
+      color: var(--black);
+      &:focus {
+        border-color: $input-border-focused;
+        box-shadow: 0 0 0 1px $input-border-focused;
+        outline: 1px dotted $input-border-focused;
+
+        // The outline-offset property is not supported everywhere (e.g. IE)
+        // but it adds a nice touch in browsers where it is.
+        outline-offset: 2px;
+      }
+      &:hover {
+        border-color: $input-border-hover;
+        outline: 1px solid $input-border-hover;
+      }
+    }
+  }
+}
diff --git a/cfgov/unprocessed/apps/financial-well-being/css/main.less b/cfgov/unprocessed/apps/financial-well-being/css/main.scss
similarity index 83%
rename from cfgov/unprocessed/apps/financial-well-being/css/main.less
rename to cfgov/unprocessed/apps/financial-well-being/css/main.scss
index 7780af5269..3d59e1f0bb 100644
--- a/cfgov/unprocessed/apps/financial-well-being/css/main.less
+++ b/cfgov/unprocessed/apps/financial-well-being/css/main.scss
@@ -1,4 +1,5 @@
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import 'cfpb-core';
 
 .save-links {
   padding-bottom: 15px;
@@ -47,7 +48,7 @@
   padding-left: 5px;
   border-left: 1px solid var(--gray-40);
   position: absolute;
-  font-size: unit(12px / @base-font-size-px, em);
+  font-size: math.div(12px, $base-font-size-px) + em;
   list-style: none;
 }
 
@@ -83,7 +84,7 @@
   margin-bottom: 5px;
   background-color: var(--pacific-20);
   color: var(--black);
-  font-size: unit(14px / @base-font-size-px, em);
+  font-size: math.div(14px, $base-font-size-px) + em;
 }
 
 .comparison-chart__toggle-button:hover,
@@ -141,30 +142,30 @@
   border-top: 1px solid var(--gray-40);
   margin-top: 30px;
   color: var(--gray-80);
-  font-size: unit(12px / @base-font-size-px, em);
+  font-size: math.div(12px, $base-font-size-px) + em;
 }
 
-@scale-point-count: 5;
+$scale-point-count: 5;
 
 .o-scale {
   + .o-scale {
-    padding-top: unit(30px / @base-font-size-px, em);
+    padding-top: math.div(30px, $base-font-size-px) + em;
     border-top: 1px solid var(--gray-40);
-    margin-top: unit(30px / @base-font-size-px, em);
+    margin-top: math.div(30px, $base-font-size-px) + em;
   }
 
   .m-form-field + .m-form-field {
     margin-top: 0;
   }
 
-  .respond-to-min( @bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     .m-form-field--radio {
-      width: percentage( 1 / @scale-point-count );
+      width: math.percentage(math.div(1, $scale-point-count));
 
       float: left;
       position: relative;
 
-      &:not(:last-child):before {
+      &:not(:last-child)::before {
         border-top: 1px solid var(--gray-80);
 
         position: absolute;
@@ -177,28 +178,28 @@
     }
 
     .a-label,
-    .a-label:before, {
+    .a-label::before {
       display: block;
     }
 
-    .a-label:before {
-      margin-bottom: unit( 3px / @base-font-size-px, em );
+    .a-label::before {
+      margin-bottom: math.div(3px, $base-font-size-px) + em;
 
       position: relative;
       z-index: 1;
     }
-  } );
+  }
 
-  .respond-to-max( @bp-lg-max, {
+  @include respond-to-max($bp-lg-max) {
     .o-scale__answer-prefix {
-      margin-bottom: unit( 15px / @base-font-size-px, em );
+      margin-bottom: math.div(15px, $base-font-size-px) + em;
     }
-  } );
+  }
 
-  .respond-to-min( @bp-xl-min, {
+  @include respond-to-min($bp-xl-min) {
     .o-scale__answer-prefix {
       box-sizing: border-box;
-      padding-right: unit( 15px / @base-font-size-px, em );
+      padding-right: math.div(15px, $base-font-size-px) + em;
       width: 20%;
 
       float: left;
@@ -209,7 +210,7 @@
 
       float: left;
     }
-  } );
+  }
 }
 
 /* CF Enhancements */
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.scss
similarity index 76%
rename from cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
rename to cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.scss
index f4ed782aec..f895f95634 100644
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.less
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/hud.scss
@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 .hud-search-container {
   background: var(--gray-5);
 }
 
 .hud-search-container__text {
-  padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+  padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
 }
 
 #hud-hca-api-map-canvas {
@@ -11,20 +13,21 @@
 }
 
 #hud-hca-api-query {
-  max-width: unit(480px / @base-font-size-px, em);
+  max-width: math.div(480px, $base-font-size-px) + em;
 }
 
 // Desktop and above.
-.respond-to-min(@bp-med-min, {
+@include respond-to-min($bp-med-min) {
   .hud-search-container {
     display: flex;
   }
 
   .hud-search-container__text {
     flex: 1;
+
     // Magic number of 270px below keeps full input placeholder in view.
-    min-width: unit( 270px / @base-font-size-px, em );
-    padding: unit( @grid_gutter-width / @base-font-size-px, em );
+    min-width: math.div(270px, $base-font-size-px) + em;
+    padding: math.div($grid-gutter-width, $base-font-size-px) + em;
   }
 
   .hud-search-container__map {
@@ -34,7 +37,7 @@
   #hud-hca-api-map-canvas {
     height: 440px;
   }
-});
+}
 
 #hud-hca-api-map-container {
   /* Prevent map controls from appearing on top of mega menu. */
@@ -46,13 +49,13 @@
 }
 
 .hud-hca-api-results-actions {
-  .respond-to-min(@bp-xs-max, {
+  @include respond-to-min($bp-xs-max) {
     & {
       // Margin makes a gap between result header links and result text.
       margin-left: 20px;
       float: right;
     }
-  });
+  }
 
   // Remove underline from PDF abbreviation and icons in links.
   & abbr,
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.less b/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.less
deleted file mode 100644
index bbab106088..0000000000
--- a/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.less
+++ /dev/null
@@ -1,5 +0,0 @@
-// Import required CF components.
-@import (reference) 'cfpb-core.less';
-@import (reference) 'cfpb-grid.less';
-@import (less) './hud.less';
-@import (less) './hud_print.css';
diff --git a/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.scss b/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.scss
new file mode 100644
index 0000000000..311c158145
--- /dev/null
+++ b/cfgov/unprocessed/apps/find-a-housing-counselor/css/main.scss
@@ -0,0 +1,5 @@
+// Import required CF components.
+@import 'cfpb-core';
+@import 'cfpb-grid';
+@import './hud';
+@import './hud_print.css';
diff --git a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.scss
similarity index 51%
rename from cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
rename to cfgov/unprocessed/apps/form-explainer/css/form-explainer.scss
index 85bf684ef6..db0498e85d 100644
--- a/cfgov/unprocessed/apps/form-explainer/css/form-explainer.less
+++ b/cfgov/unprocessed/apps/form-explainer/css/form-explainer.scss
@@ -1,35 +1,50 @@
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:map';
+
 /* ==========================================================================
    "Form explainer" custom styles
    ========================================================================== */
 
-@gold-dk: #ff9e1b; // var(--gold))
-@gold-md: #ffce8d; // var(--gold-60)
-@gold-lt: #ffd8a3; // var(--gold-50)
-@gold-bg: #fff8f0;
-
-@red-dk: #d486b2; // var(--purple-60)
-@red-md: #dc9cbf; // var(--purple-50)
-@red-lt: #f0d8e2; // var(--purple-20)
-@red-bg: #f9f6f6;
-
-@blue-dk: #6f88b2; // var(--navy-70)
-@blue-md: #9daecc; // var(--navy-50)
-@blue-lt: #d3daeb; // var(--navy-20)
-@blue-bg: #f4f7fa;
-
-@teal-dk: #579695; // var(--teal-80)
-@teal-md: #70a6a5; // var(--teal-70)
-@teal-lt: #d4e7e6; // var(--teal-20)
-@teal-bg: #f2f8f8;
-
-@colors: gold, red, blue, teal;
+$colors-map: (
+  'gold-dk': #ff9e1b,
+  // var(--gold))
+  'gold-md': #ffce8d,
+  // var(--gold-60)
+  'gold-lt': #ffd8a3,
+  // var(--gold-50)
+  'gold-bg': #fff8f0,
+  'red-dk': #d486b2,
+  // var(--purple-60)
+  'red-md': #dc9cbf,
+  // var(--purple-50)
+  'red-lt': #f0d8e2,
+  // var(--purple-20)
+  'red-bg': #f9f6f6,
+  'blue-dk': #6f88b2,
+  // var(--navy-70)
+  'blue-md': #9daecc,
+  // var(--navy-50)
+  'blue-lt': #d3daeb,
+  // var(--navy-20)
+  'blue-bg': #f4f7fa,
+  'teal-dk': #579695,
+  // var(--teal-80)
+  'teal-md': #70a6a5,
+  // var(--teal-70)
+  'teal-lt': #d4e7e6,
+  // var(--teal-20)
+  'teal-bg': #f2f8f8,
+);
+$colors: gold, red, blue, teal;
 
 .form-explainer {
   .image-map {
     display: block;
     box-sizing: border-box;
-    margin-bottom: unit(30px / @base-font-size-px, em);
-    .u-clearfix();
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+
+    @include u-clearfix;
   }
 
   .image-map__wrapper {
@@ -50,29 +65,30 @@
     transition: border 100ms ease-out;
   }
 
-  each( @colors, {
-    @color: @{value}-dk;
+  @each $value in $colors {
+    $index: list.index($colors, $value);
+    $color: map.get($colors-map, #{$value}-dk);
 
-    .image-map__overlay--category-@{index} {
-      background: fade( @@color, 20% );
+    .image-map__overlay--category-#{$index} {
+      background: rgba($color, 0.2);
 
       &:hover,
       &.hover-has-attention {
-        border-color: @@color;
+        border-color: $color;
       }
 
       &:focus,
       &.has-attention {
-        border-color: @@color;
-        background: fade( @@color, 50% );
+        border-color: $color;
+        background: rgba($color, 0.5);
       }
 
       &:focus {
-        outline: 1px dotted @@color;
+        outline: 1px dotted $color;
         outline-offset: 1px;
       }
     }
-  });
+  }
 
   // Expandable overrides
   // TODO: Make this its own component.
@@ -89,9 +105,13 @@
 
     &.has-attention {
       // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-        transform: translateX( unit( -@grid_gutter-width / 2 / @base-font-size-px, em ) );
-      });
+      @include respond-to-min($bp-sm-min) {
+        $translate-value: math.div(
+            math.div(-1 * $grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
+        transform: translateX($translate-value);
+      }
 
       .o-expandable__cues {
         color: var(--black);
@@ -103,38 +123,39 @@
     }
 
     .o-expandable__label {
-      font-size: unit(16 / @base-font-size-px, em);
+      font-size: 1em;
     }
 
-    each( @colors, {
-      @tint: @{value}-bg;
-      @light: @{value}-lt;
-      @med: @{value}-md;
+    @each $value in $colors {
+      $index: list.index($colors, $value);
+      $tint: #{$value}-bg;
+      $light: #{$value}-lt;
+      $med: #{$value}-md;
 
-      &.o-expandable__form-explainer-category-@{index} {
-        background-color: @@tint;
+      &.o-expandable__form-explainer-category-#{$index} {
+        background-color: $tint;
 
         .o-expandable__header {
-          background-color: @@light;
+          background-color: $light;
         }
 
-        border-color: @@light;
+        border-color: $light;
 
         &.has-attention,
         &:hover {
-          border-color: @@med;
+          border-color: $med;
         }
 
         &.has-attention {
           .o-expandable__header {
-            background-color: @@med;
+            background-color: $med;
           }
         }
       }
-    });
+    }
 
     &.o-expandable__form-explainer + h3 {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
   }
 
@@ -150,19 +171,19 @@
   }
 
   .explain {
-    margin: 0 auto unit(60px / @base-font-size-px, em);
+    margin: 0 auto math.div(60px, $base-font-size-px) + em;
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       &__image-map {
-        display:flex;
+        display: flex;
       }
-    });
+    }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      &__container{
-        display:flex;
+    @include respond-to-min($bp-sm-min) {
+      &__container {
+        display: flex;
       }
 
       &__image-map {
@@ -182,35 +203,39 @@
 
       &__terms {
         flex: 1;
-        padding-left: unit( 35px / @base-font-size-px, em );
+        padding-left: math.div(35px, $base-font-size-px) + em;
       }
 
       &__pagination {
-        margin-bottom: unit( @grid_gutter-width / 3 / @base-font-size-px, em );
+        margin-bottom: math.div(
+            math.div($grid-gutter-width, 3),
+            $base-font-size-px
+          ) + em;
       }
-    });
+    }
   }
 
   .explain__page {
     // Position is needed to allow .explain_image-map
     // to stick to the bottom of .explain_page.
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       position: relative;
-    });
+    }
   }
 
   .explain__pagination {
-    margin-top: unit(15px / @base-font-size-px, em);
-    .u-clearfix();
+    margin-top: math.div(15px, $base-font-size-px) + em;
+
+    @include u-clearfix;
   }
 
   .form-explainer__page-buttons {
     button {
       position: absolute;
       top: 45%;
-      padding-left: unit(10px / @btn-font-size, em);
-      padding-right: unit(10px / @btn-font-size, em);
+      padding-left: math.div(10px, $btn-font-size) + em;
+      padding-right: math.div(10px, $btn-font-size) + em;
       z-index: 100;
       &.prev {
         left: -16px;
@@ -227,25 +252,28 @@
   }
 
   .form-explainer__page-links {
-    margin-bottom: unit(
-      @grid_gutter-width / 3 / @base-font-size-px,
-      em
-    ) !important;
+    margin-bottom: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
+      em !important;
     float: left;
     li {
       float: left;
       a {
         float: left;
         display: block;
-        padding: 0 unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+        padding: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+          em;
         cursor: pointer;
 
         // Tablet and above.
-        .respond-to-min(@bp-sm-min, {
+        @include respond-to-min($bp-sm-min) {
+          $margin-value: math.div(
+              math.div($grid-gutter-width, 2),
+              $base-font-size-px
+            ) + em;
           padding: 0;
           border-bottom-width: 1px;
-          margin: 0 unit( @grid_gutter-width / 2 / @base-font-size-px, em );
-        });
+          margin: 0 $margin-value;
+        }
 
         &.current-page {
           &,
diff --git a/cfgov/unprocessed/apps/form-explainer/css/main.less b/cfgov/unprocessed/apps/form-explainer/css/main.less
deleted file mode 100644
index 06ffddf63e..0000000000
--- a/cfgov/unprocessed/apps/form-explainer/css/main.less
+++ /dev/null
@@ -1,2 +0,0 @@
-@import (reference) '../../../css/main.less';
-@import (less) './form-explainer.less';
diff --git a/cfgov/unprocessed/apps/form-explainer/css/main.scss b/cfgov/unprocessed/apps/form-explainer/css/main.scss
new file mode 100644
index 0000000000..f0eda4344b
--- /dev/null
+++ b/cfgov/unprocessed/apps/form-explainer/css/main.scss
@@ -0,0 +1,2 @@
+@import '../../../css/main';
+@import './form-explainer';
diff --git a/cfgov/unprocessed/apps/homepage/css/main.less b/cfgov/unprocessed/apps/homepage/css/main.scss
similarity index 100%
rename from cfgov/unprocessed/apps/homepage/css/main.less
rename to cfgov/unprocessed/apps/homepage/css/main.scss
diff --git a/cfgov/unprocessed/apps/know-before-you-owe/css/main.less b/cfgov/unprocessed/apps/know-before-you-owe/css/main.scss
similarity index 85%
rename from cfgov/unprocessed/apps/know-before-you-owe/css/main.less
rename to cfgov/unprocessed/apps/know-before-you-owe/css/main.scss
index 0e8bb9ca1a..c00c55a683 100644
--- a/cfgov/unprocessed/apps/know-before-you-owe/css/main.less
+++ b/cfgov/unprocessed/apps/know-before-you-owe/css/main.scss
@@ -1,12 +1,13 @@
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import 'cfpb-core';
 
 .kbyo-professional-resources,
 .kbyo-footer {
   background-color: var(--gray-5);
   border-bottom: 1px solid var(--gray-10);
   border-top: 1px solid var(--gray-10);
-  padding-top: unit(60px / @base-font-size-px, rem);
-  padding-bottom: unit(60px / @base-font-size-px, rem);
+  padding-top: math.div(60px, $base-font-size-px) + rem;
+  padding-bottom: math.div(60px, $base-font-size-px) + rem;
 }
 
 .kbyo-compare-tiles {
@@ -15,7 +16,7 @@
 }
 
 .kbyo-compare-col {
-  padding-bottom: unit(45px / @base-font-size-px, rem);
+  padding-bottom: math.div(45px, $base-font-size-px) + rem;
 }
 
 @media only all and (min-width: 50em) {
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/a-range.less b/cfgov/unprocessed/apps/owning-a-home/css/a-range.scss
similarity index 71%
rename from cfgov/unprocessed/apps/owning-a-home/css/a-range.less
rename to cfgov/unprocessed/apps/owning-a-home/css/a-range.scss
index 8574c8da60..5546ed7997 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/a-range.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/a-range.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /*
     Range slider for credit score
     --------------------------- */
@@ -6,8 +8,8 @@
   margin-bottom: 1.5em;
 
   &__labels {
-    margin: unit(15px / @base-font-size-px, em) 0
-      unit(8px / @base-font-size-px, em);
+    margin: (math.div(15px, $base-font-size-px) + em) 0
+      (math.div(8px, $base-font-size-px) + em);
     font-size: 0.625em;
     line-height: 0;
 
@@ -19,7 +21,7 @@
   &__text {
     position: absolute;
     display: block;
-    margin-left: unit(-10px / @base-font-size-px, em);
+    margin-left: math.div(-10px, $base-font-size-px) + em;
     font-size: 0.875em;
     white-space: nowrap;
     text-align: center;
@@ -32,7 +34,7 @@
   display: block;
   width: 100%;
   height: 20px;
-  background: transparent url('@{image-path}/slider-bg.png') scroll no-repeat
+  background: transparent url('#{$image-path}/slider-bg.png') scroll no-repeat
     center center;
   background-size: 100%;
 }
@@ -50,13 +52,13 @@
   width: 22px;
   height: 21px;
   border: 0;
-  background: transparent url('@{image-path}/slider-handle.png') no-repeat 0 0;
+  background: transparent url('#{$image-path}/slider-handle.png') no-repeat 0 0;
   background-size: 100%;
 
   &.warning {
     width: 22px;
     height: 21px;
-    background: transparent url('@{image-path}/slider-handle.png') no-repeat 0
+    background: transparent url('#{$image-path}/slider-handle.png') no-repeat 0
       100%;
     background-size: 100%;
   }
@@ -74,14 +76,14 @@
     width: 22px;
     height: 21px;
     border: 0;
-    background: transparent url('@{image-path}/slider-handle@2x.png') no-repeat
+    background: transparent url('#{$image-path}/slider-handle$2x.png') no-repeat
       0 0;
     background-size: 100%;
 
     &.warning {
       width: 22px;
       height: 21px;
-      background: transparent url('@{image-path}/slider-handle@2x.png')
+      background: transparent url('#{$image-path}/slider-handle$2x.png')
         no-repeat 0 100%;
       background-size: 100%;
     }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.scss
similarity index 64%
rename from cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
rename to cfgov/unprocessed/apps/owning-a-home/css/brand-footer.scss
index d4a6166655..c9d11edb13 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-footer.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    "Brand footer" custom styles
    ========================================================================== */
@@ -8,21 +10,21 @@
 
   &__wrapper {
     box-sizing: border-box;
-    padding: unit(30px / @base-font-size-px, rem);
-    padding-bottom: unit(60px / @base-font-size-px, rem);
+    padding: math.div(30px, $base-font-size-px) + rem;
+    padding-bottom: math.div(60px, $base-font-size-px) + rem;
     max-width: 1230px;
     margin: 0 auto;
   }
 
   &__heading {
-    margin-bottom: unit(30px / @base-font-size-px, rem);
+    margin-bottom: math.div(30px, $base-font-size-px) + rem;
   }
 
   &__blocks {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: unit(60px / @base-font-size-px, rem);
+    gap: math.div(60px, $base-font-size-px) + rem;
   }
 
   &__block {
@@ -38,13 +40,14 @@
     text-align: center;
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       text-align: left;
-    });
+    }
 
     img {
       width: 150px;
-      padding-bottom: unit((@grid_gutter-width - 5) / @base-font-size-px, em);
+      padding-bottom: math.div(($grid-gutter-width - 5), $base-font-size-px) +
+        em;
     }
   }
 }
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/brand-header.scss b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.scss
new file mode 100644
index 0000000000..b25bab6e54
--- /dev/null
+++ b/cfgov/unprocessed/apps/owning-a-home/css/brand-header.scss
@@ -0,0 +1,42 @@
+@use 'sass:math';
+
+// TODO: Remove this code when owning-a-home is migrated Wagtail.
+.brand-header {
+  background-color: var(--gray-5);
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--gray-40);
+
+  &__1-2-container {
+    padding: 15px;
+
+    @include respond-to-min(799px) {
+      @include u-grid-column(6);
+      border: 0;
+      &:last-child {
+        border-left: 1px solid var(--gray-40);
+      }
+    }
+  }
+
+  &__text {
+    font-size: 14px;
+  }
+
+  &__1-2-container--with-icon {
+    .brand-header__icon {
+      color: var(--green);
+      font-size: 2.5em;
+      text-align: center;
+      position: absolute;
+      left: 0;
+      top: -7px;
+    }
+    .brand-header__headline {
+      font-size: 16px;
+      font-weight: 500;
+      padding-left: 3em;
+      position: relative;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.scss
similarity index 72%
rename from cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
rename to cfgov/unprocessed/apps/owning-a-home/css/explore-rates.scss
index 57524d97ff..e65660dd75 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/explore-rates.scss
@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 /* ==========================================================================
    "Rate checker" custom styles
    ========================================================================== */
 
 // Mixin to remove any default spacing or borders on an element.
-.u-reset() {
+@mixin u-reset() {
   border: 0;
   margin: 0;
   padding: 0;
@@ -14,24 +16,24 @@
 
   // lead paragraphs are typically the first paragraph in a content area.
   .lead {
-    margin-bottom: unit(30px / @base-font-size-px, em);
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
     font-size: 1.125em;
   }
 
   // Page intros are content areas that are in place of a hero.
   .page-intro {
     border-bottom: 1px solid var(--gray-10);
-    padding-bottom: unit(36px / @base-font-size-px, rem);
+    padding-bottom: math.div(36px, $base-font-size-px) + rem;
 
     &__cols {
       display: flex;
-      gap: unit(15px / @base-font-size-px, rem);
+      gap: math.div(15px, $base-font-size-px) + rem;
       flex-direction: column;
 
       // Desktop and above.
-      .respond-to-min(@bp-med-min, {
+      @include respond-to-min($bp-med-min) {
         flex-direction: row;
-      });
+      }
     }
 
     &__cols-first {
@@ -46,7 +48,7 @@
   .loan-type,
   .calc-footer,
   .calc-subsection {
-    .u-grid-column( 12 );
+    @include u-grid-column(12);
   }
 
   /*
@@ -56,14 +58,14 @@
   .loan-amt-total,
   .state-col,
   .form-intro {
-    .u-grid-column( 3, 3 );
+    @include u-grid-column(3, 3);
   }
 
   /*
         Sidebar with all the user input
        --------------------------- */
   .calculator {
-    padding-left: unit(10px / @base-font-size-px, rem);
+    padding-left: math.div(10px, $base-font-size-px) + rem;
     background: var(--gray-5);
 
     p:last-child,
@@ -75,7 +77,7 @@
       font-weight: 500;
 
       display: block;
-      margin-bottom: unit(4px / @base-font-size-px, em);
+      margin-bottom: math.div(4px, $base-font-size-px) + em;
       text-transform: none;
     }
 
@@ -84,7 +86,7 @@
     }
 
     section {
-      padding: unit(30px / @base-font-size-px, em) 0;
+      padding: (math.div(30px, $base-font-size-px) + em) 0;
       border-top: 1px solid var(--gray-10);
     }
 
@@ -98,7 +100,7 @@
     }
 
     .calc-footer {
-      padding: unit(15px / @base-font-size-px, em) 0; // the bottom <section> has less padding
+      padding: (math.div(15px, $base-font-size-px) + em) 0; // the bottom <section> has less padding
     }
 
     input[type='number'] {
@@ -111,48 +113,48 @@
     }
 
     .calc-subsection {
-      padding: 0 0 unit(30px / @base-font-size-px, em);
+      padding: 0 0 (math.div(30px, $base-font-size-px) + em);
       border-top: none;
     }
 
     #arm-warning {
       padding-top: 0;
       border-top: 0;
-      margin-top: unit(-10px / @base-font-size-px, em);
+      margin-top: math.div(-10px, $base-font-size-px) + em;
     }
   }
 
   .calc-loan-details {
     .upper {
-      margin-bottom: unit(15px / @base-font-size-px, em);
+      margin-bottom: math.div(15px, $base-font-size-px) + em;
     }
   }
 
   .loan-amt-total {
-    padding-top: unit(10px / @base-font-size-px, em);
+    padding-top: math.div(10px, $base-font-size-px) + em;
 
     span {
       display: block;
-      margin-top: unit(10px / @base-font-size-px, em);
+      margin-top: math.div(10px, $base-font-size-px) + em;
       font-weight: 500;
     }
   }
 
   .county {
-    padding-top: unit(10px / @base-font-size-px, em);
+    padding-top: math.div(10px, $base-font-size-px) + em;
   }
 
   .half-width-gt-1230 {
-    .u-grid-column( 1, 2 );
+    @include u-grid-column(1, 2);
   }
 
   .downpayment-warning {
-    padding-top: unit(10px / @base-font-size-px, em);
+    padding-top: math.div(10px, $base-font-size-px) + em;
     font-size: 0.875em;
   }
 
   .timestamp-message {
-    margin-right: 1.25em; //align it nicely with the chart
+    margin-right: 1.25em; // Align it nicely with the chart.
     font-size: 0.875em;
     text-align: right;
   }
@@ -161,8 +163,8 @@
         Main section with output
         --------------------------- */
   .rate-checker-heading {
-    margin-right: unit(10px / @base-font-size-px, em);
-    margin-bottom: unit(16px / @base-font-size-px, em);
+    margin-right: math.div(10px, $base-font-size-px) + em;
+    margin-bottom: math.div(16px, $base-font-size-px) + em;
     font-size: 1.375em;
   }
 
@@ -190,9 +192,10 @@
 
   .highcharts-tooltip > span {
     z-index: 9999;
-    padding: unit(4px / @base-font-size-px, em)
-      unit(10px / @base-font-size-px, em) unit(4px / @base-font-size-px, em)
-      unit(8px / @base-font-size-px, em);
+    padding: (math.div(4px, $base-font-size-px) + em)
+      (math.div(10px, $base-font-size-px) + em)
+      (math.div(4px, $base-font-size-px) + em)
+      (math.div(8px, $base-font-size-px) + em);
     border: 2px solid var(--green-60);
     margin: 0 2px;
     background-color: var(--white);
@@ -201,14 +204,15 @@
 
   .chart {
     position: relative;
-    padding-top: unit(40px / @base-font-size-px, em);
+    padding-top: math.div(40px, $base-font-size-px) + em;
     border-top: 1px solid var(--gray-10);
     border-bottom: 1px solid var(--gray-10);
-    margin: unit(20px / @base-font-size-px, em)
-      unit(20px / @base-font-size-px, em) unit(20px / @base-font-size-px, em) 0;
+    margin: (math.div(20px, $base-font-size-px) + em)
+      (math.div(20px, $base-font-size-px) + em)
+      (math.div(20px, $base-font-size-px) + em) 0;
 
     &.geolocating {
-      background: transparent url('@{image-path}icon_spinner.gif') scroll
+      background: transparent url('#{$image-path}icon_spinner.gif') scroll
         no-repeat center center;
       #chart {
         opacity: 0;
@@ -241,7 +245,7 @@
     }
 
     figure {
-      .u-reset();
+      @include u-reset;
     }
   }
 
@@ -252,8 +256,9 @@
   .chart-caption {
     padding-right: 1em;
     padding-bottom: 1em;
+
     // Magic number to line up caption with chart
-    margin-left: unit(60px / @base-font-size-px, em);
+    margin-left: math.div(60px, $base-font-size-px) + em;
     font-size: 1em;
   }
 
@@ -264,8 +269,8 @@
 
   .rc-data-link {
     text-align: left;
-    margin: unit(20px / @base-font-size-px, em) 0
-      unit(10px / @base-font-size-px, em);
+    margin: (math.div(20px, $base-font-size-px) + em) 0
+      (math.div(10px, $base-font-size-px) + em);
   }
 
   .chart-tooltip {
@@ -290,27 +295,27 @@
         Compare interest rate costs
         --------------------------- */
   .compare {
-    margin-top: unit(30px / @base-font-size-px, em);
+    margin-top: math.div(30px, $base-font-size-px) + em;
     label {
-      .u-visually-hidden();
+      @include u-visually-hidden;
     }
   }
 
   // Layouts
   .rc-comp-1 {
-    .u-grid-column( 1 );
+    @include u-grid-column(1);
   }
 
   .rc-comp-3 {
-    .u-grid-column( 3 );
+    @include u-grid-column(3);
   }
 
   .rc-comp-3-push {
-    .u-grid-column( @columns: 3; @prefix: 1; @suffix: 0 );
+    @include u-grid-column($columns: 30);
   }
 
   .rc-comp-5 {
-    .u-grid-column( 5 );
+    @include u-grid-column(5);
   }
 
   .vs {
@@ -333,10 +338,10 @@
   }
 
   .rate-compare-container {
-    .u-grid-column( 6 );
+    @include u-grid-column(6);
 
     position: relative;
-    margin-bottom: unit(10px / @base-font-size-px, em);
+    margin-bottom: math.div(10px, $base-font-size-px) + em;
   }
 
   .dollar-input,
@@ -346,7 +351,7 @@
     input {
       width: 100%;
       box-sizing: border-box;
-      padding-left: unit(15px / @base-font-size-px, em);
+      padding-left: math.div(15px, $base-font-size-px) + em;
     }
 
     .unit {
@@ -361,7 +366,7 @@
 
   .percent-input {
     input {
-      padding-left: unit(4px / @base-font-size-px, em);
+      padding-left: math.div(4px, $base-font-size-px) + em;
     }
 
     .unit {
@@ -389,7 +394,7 @@
         --------------------------- */
   .next-steps {
     margin-top: 5em;
-    margin-bottom: unit(45px / @base-font-size-px, em);
+    margin-bottom: math.div(45px, $base-font-size-px) + em;
 
     .tabs {
       box-sizing: border-box;
@@ -403,7 +408,7 @@
   }
 
   .next-steps-list {
-    .u-reset();
+    @include u-reset;
 
     position: relative;
     padding-left: 30px; // match the negative outdent of the numbering
@@ -413,7 +418,8 @@
 
     li {
       position: relative;
-      .u-grid-column( 1, 3 );
+
+      @include u-grid-column(1, 3);
     }
   }
 
@@ -458,8 +464,8 @@
 
     &__btn {
       width: 100%;
-      padding: unit(5px / @base-font-size-px, em)
-        unit(15px / @base-font-size-px, em);
+      padding: (math.div(5px, $base-font-size-px) + em)
+        (math.div(15px, $base-font-size-px) + em);
       border: none;
       background-color: var(--white);
       color: var(--pacific);
@@ -480,8 +486,9 @@
 
       li {
         list-style: none;
-        padding: unit(5px / @base-font-size-px, em) 0
-          unit(5px / @base-font-size-px, em) unit(15px / @base-font-size-px, em);
+        padding: (math.div(5px, $base-font-size-px) + em) 0
+          (math.div(5px, $base-font-size-px) + em)
+          (math.div(15px, $base-font-size-px) + em);
         margin: 0;
 
         &:hover {
@@ -508,7 +515,7 @@
         Media queries
         --------------------------- */
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     display: grid;
     grid-template-areas:
       'page-intro'
@@ -516,7 +523,7 @@
       'rc-results';
 
     .page-intro {
-      grid-area: page-intro
+      grid-area: page-intro;
     }
 
     .rc-results {
@@ -526,10 +533,9 @@
     .calculator {
       grid-area: calculator;
     }
-  });
-
-  .respond-to-max(720px, {
+  }
 
+  @include respond-to-max(720px) {
     .rc-home-illu {
       display: none;
     }
@@ -540,12 +546,12 @@
 
     .next-steps-list li {
       position: relative;
-      .u-grid-column( 12 );
-    }
-  });
 
-  .respond-to-max(800px, {
+      @include u-grid-column(12);
+    }
+  }
 
+  @include respond-to-max(800px) {
     .rc-comparison-section {
       margin-top: 1.5em;
     }
@@ -555,19 +561,19 @@
     }
 
     .rc-comp-1 {
-      .u-grid-column( 2 );
+      @include u-grid-column(2);
     }
 
     .rc-comp-3 {
-      .u-grid-column( 5 );
+      @include u-grid-column(5);
     }
 
     .rc-comp-3-push {
-      .u-grid-column( @columns: 5; @prefix: 1; @suffix: 0 )
+      @include u-grid-column($columns: 5);
     }
 
     .rc-comp-5 {
-      .u-grid-column( 12 );
+      @include u-grid-column(12);
     }
 
     .interest-cost {
@@ -575,24 +581,23 @@
       font-weight: 600;
       color: var(--gray-60);
     }
-  });
+  }
 
-  .respond-to-min(1000px, {
+  @include respond-to-min(1000px) {
     .rate-checker-heading {
       width: 75%;
     }
-  });
-
-  .respond-to-max(@bp-lg-max, {
+  }
 
+  @include respond-to-max($bp-lg-max) {
     .half-width-gt-1230 {
-      .u-grid-column( 12 );
+      @include u-grid-column(12);
     }
 
     .down-payment {
-      margin-top: unit( 20px / @base-font-size-px, em );
+      margin-top: math.div(20px, $base-font-size-px) + em;
     }
-  });
+  }
 
   @media print {
     .rc-illu-inner {
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/helpers.less b/cfgov/unprocessed/apps/owning-a-home/css/helpers.scss
similarity index 89%
rename from cfgov/unprocessed/apps/owning-a-home/css/helpers.less
rename to cfgov/unprocessed/apps/owning-a-home/css/helpers.scss
index f2e91b8b9e..b22ca3e78d 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/helpers.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/helpers.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Helper Classes & Styles
    ========================================================================== */
@@ -44,14 +46,14 @@
   border-bottom: 1px dotted;
 }
 
-.respond-to-max(800px, {
+@include respond-to-max(800px) {
   .mobi-no {
     display: none;
   }
-});
+}
 
-.respond-to-min(800px, {
+@include respond-to-min(800px) {
   .mobi-yes {
     display: none;
   }
-});
+}
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/main.less b/cfgov/unprocessed/apps/owning-a-home/css/main.less
deleted file mode 100644
index 4a7696999d..0000000000
--- a/cfgov/unprocessed/apps/owning-a-home/css/main.less
+++ /dev/null
@@ -1,15 +0,0 @@
-/* ==========================================================================
-   Buying a House
-   Main Less file
-   ========================================================================== */
-
-// Image path
-@image-path: '/static/apps/owning-a-home/img/';
-
-@import (reference) '../../../css/main.less';
-@import (less) './brand-header.less';
-@import (less) './brand-footer.less';
-@import (less) './explore-rates.less';
-@import (less) './helpers.less';
-@import (less) './tab.less';
-@import (less) './a-range.less';
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/main.scss b/cfgov/unprocessed/apps/owning-a-home/css/main.scss
new file mode 100644
index 0000000000..6843a72fc7
--- /dev/null
+++ b/cfgov/unprocessed/apps/owning-a-home/css/main.scss
@@ -0,0 +1,15 @@
+/* ==========================================================================
+   Buying a House
+   Main Less file
+   ========================================================================== */
+
+// Image path
+$image-path: '/static/apps/owning-a-home/img/';
+
+@import '../../../css/main';
+@import './brand-header';
+@import './brand-footer';
+@import './explore-rates';
+@import './helpers';
+@import './tab';
+@import './a-range';
diff --git a/cfgov/unprocessed/apps/owning-a-home/css/tab.less b/cfgov/unprocessed/apps/owning-a-home/css/tab.scss
similarity index 89%
rename from cfgov/unprocessed/apps/owning-a-home/css/tab.less
rename to cfgov/unprocessed/apps/owning-a-home/css/tab.scss
index 2e77ba85d8..65282a954c 100644
--- a/cfgov/unprocessed/apps/owning-a-home/css/tab.less
+++ b/cfgov/unprocessed/apps/owning-a-home/css/tab.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    "Tabs" custom styles
    ========================================================================== */
@@ -16,7 +18,7 @@
     position: relative;
     display: block;
     padding: 28px 20px;
-    font-size: unit(22px / @base-font-size-px, em);
+    font-size: math.div(22px, $base-font-size-px) + em;
     text-align: left;
     z-index: 1;
     box-sizing: border-box;
@@ -82,12 +84,12 @@
 
 .next-steps {
   .tab-list {
-    .u-grid-column( 6 );
+    @include u-grid-column(6);
     border-left: 0;
     border-right: 0;
   }
 }
 
 .tab-content {
-  margin-top: unit(50px / @base-font-size-px, em);
+  margin-top: math.div(50px, $base-font-size-px) + em;
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss
similarity index 64%
rename from cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
rename to cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss
index c37bab794e..4f5b92b021 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/cf-enhancements.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Design System
    Enhancements
@@ -20,23 +22,23 @@
 
 .form-label__text-wrapper {
   display: block;
-  margin-bottom: unit(5px / @base-font-size-px, em);
+  margin-bottom: math.div(5px, $base-font-size-px) + em;
   font-size: 1.125em;
 }
 
 /* ==========================================================================
    Capital Framework Notification Styling
-   from https://github.com/cfpb/consumerfinance.gov/blob/2c62c966880afba0d634df7062876abec3393661/cfgov/unprocessed/css/cf-notifications.less
+   from https://github.com/cfpb/consumerfinance.gov/blob/2c62c966880afba0d634df7062876abec3393661/cfgov/unprocessed/css/cf-notifications.scss
    ========================================================================== */
 
 .cf-notification {
-  @notification-padding-px: 11px;
+  $notification-padding-px: 11px;
 
   position: relative;
 
-  padding: @notification-padding-px;
+  padding: $notification-padding-px;
   padding-left: 40px;
-  margin-bottom: @notification-padding-px + 4px;
+  margin-bottom: $notification-padding-px + 4px;
 
   background: var(--gray-20);
   border: 1px solid var(--gray);
@@ -58,11 +60,11 @@
 
   &__icon {
     position: absolute;
-    top: @notification-padding-px + 2px;
-    left: @notification-padding-px + 4px;
+    top: $notification-padding-px + 2px;
+    left: $notification-padding-px + 4px;
 
     color: var(--gray-20);
-    font-size: unit(18px / @base-font-size-px, em);
+    font-size: math.div(18px, $base-font-size-px) + em;
 
     &--error {
       color: #d14327;
@@ -78,12 +80,12 @@
   }
 
   &__text {
-    .h4();
+    @include h4;
     margin: 0;
 
     .short-desc {
       display: block;
-      font-size: @base-font-size-px;
+      font-size: $base-font-size-px;
     }
   }
 }
@@ -92,28 +94,28 @@
    Big numbered lists (from Know Before You Owe)
    ========================================================================== */
 
-@char-icon-size: unit(32px / @base-font-size-px, em);
-@char-icon-spacing: 0.5em;
+$char-icon-size: math.div(32px, $base-font-size-px) + em;
+$char-icon-spacing: 0.5em;
 
-.char-icon {
+@mixin char-icon {
   box-sizing: border-box;
-  padding-left: @char-icon-size + @char-icon-spacing;
+  padding-left: $char-icon-size + $char-icon-spacing;
   position: relative;
 
   &::before {
     display: block;
     box-sizing: border-box;
-    width: @char-icon-size;
-    height: @char-icon-size;
+    width: $char-icon-size;
+    height: $char-icon-size;
     border-radius: 100%;
-    margin-right: @char-icon-spacing;
+    margin-right: $char-icon-spacing;
     position: absolute;
     left: 0;
-    top: unit(@base-line-height - @char-icon-size, em);
+    top: ($base-line-height - $char-icon-size) + em;
     background: var(--green-20);
     color: var(--black);
-    font-size: unit(18px / @base-font-size-px, em);
-    line-height: @char-icon-size;
+    font-size: math.div(18px, $base-font-size-px) + em;
+    line-height: $char-icon-size;
     text-align: center;
     text-indent: 0;
   }
@@ -157,7 +159,8 @@
 
   & > li {
     counter-increment: steps;
-    .char-icon();
+
+    @include char-icon;
   }
 
   & > li::before {
@@ -170,14 +173,14 @@
    ========================================================================== */
 
 .column-well {
-  padding-top: unit(25px / @base-font-size-px, em);
-  padding-bottom: unit(10px / @base-font-size-px, em);
+  padding-top: math.div(25px, $base-font-size-px) + em;
+  padding-bottom: math.div(10px, $base-font-size-px) + em;
   position: relative;
 
-  .respond-to-min(@bp-sm-min, {
-    padding-top: unit(30px / @base-font-size-px, em);
-    padding-bottom: unit(30px / @base-font-size-px, em);
-  });
+  @include respond-to-min($bp-sm-min) {
+    padding-top: math.div(30px, $base-font-size-px) + em;
+    padding-bottom: math.div(30px, $base-font-size-px) + em;
+  }
 
   &::after {
     display: block;
@@ -185,15 +188,16 @@
     height: 9999px;
     position: absolute;
     top: 0;
-    left: unit(-(@grid_gutter-width / @base-font-size-px) / 2, em);
+    left: (-1 * math.div(math.div($grid_gutter-width, $base-font-size-px), 2)) +
+      em;
     z-index: 0;
     background-color: var(--gray-5);
     content: '';
 
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       width: 100%;
       left: 0;
-    });
+    }
   }
 
   &__wrapper {
@@ -202,9 +206,9 @@
     &--overflow-small {
       overflow: visible;
 
-      .respond-to-min(@bp-sm-min, {
+      @include respond-to-min($bp-sm-min) {
         overflow: hidden;
-      });
+      }
     }
   }
 
@@ -212,25 +216,25 @@
     position: relative;
     z-index: 1;
 
-    .respond-to-min(@bp-sm-min, {
-      padding-right: unit(30px / @base-font-size-px, em);
-      padding-left: unit(30px / @base-font-size-px, em);
-    });
+    @include respond-to-min($bp-sm-min) {
+      padding-right: math.div(30px, $base-font-size-px) + em;
+      padding-left: math.div(30px, $base-font-size-px) + em;
+    }
   }
 
   &--bleed {
     &::after {
-      .respond-to-min(@bp-med-min, {
-        padding-right: @grid_gutter-width * 2;
-        left: -@grid_gutter-width;
-      });
+      @include respond-to-min($bp-med-min) {
+        padding-right: $grid_gutter-width * 2;
+        left: -$grid_gutter-width;
+      }
     }
 
     .column-well__content {
-      .respond-to-min(@bp-med-min, {
+      @include respond-to-min($bp-med-min) {
         padding-right: 0;
         padding-left: 0;
-      });
+      }
     }
   }
 
@@ -238,25 +242,25 @@
     padding-top: 0;
     padding-bottom: 0;
 
-    .respond-to-min(@bp-sm-min, {
-      padding-top: unit(30px / @base-font-size-px, em);
-      padding-bottom: unit(30px / @base-font-size-px, em);
-    });
+    @include respond-to-min($bp-sm-min) {
+      padding-top: math.div(30px, $base-font-size-px) + em;
+      padding-bottom: math.div(30px, $base-font-size-px) + em;
+    }
 
     &::after {
       display: none;
 
-      .respond-to-min(@bp-sm-min, {
+      @include respond-to-min($bp-sm-min) {
         display: block;
-      });
+      }
     }
   }
 
   &--emphasis {
-    .respond-to-min(@bp-sm-min, {
-      padding-top: unit(50px / @base-font-size-px, em);
-      padding-bottom: unit(50px / @base-font-size-px, em);
-    });
+    @include respond-to-min($bp-sm-min) {
+      padding-top: math.div(50px, $base-font-size-px) + em;
+      padding-bottom: math.div(50px, $base-font-size-px) + em;
+    }
 
     &::after {
       background-color: var(--gray-5);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss
similarity index 63%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss
index 533e7e3638..4d316879aa 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss
@@ -1,16 +1,18 @@
+@use 'sass:math';
+
 .college-costs {
   &__tool-section--school-results {
     & .highcharts-plot-band {
       fill-opacity: 1;
 
       &:first-child {
-        fill: @college-costs-chart-min;
+        fill: $college-costs-chart-min;
       }
       &:nth-child(2) {
-        fill: @college-costs-chart-median;
+        fill: $college-costs-chart-median;
       }
       &:last-child {
-        fill: @college-costs-chart-max;
+        fill: $college-costs-chart-max;
       }
     }
   }
@@ -32,9 +34,9 @@
 
   &__chart {
     & + p.median-salary-note {
-      font-size: unit(12px / @base-font-size-px, rem);
-      margin-top: unit(15px / @base-font-size-px, rem);
-      padding-top: unit(15px / @base-font-size-px, rem);
+      font-size: math.div(12px, $base-font-size-px) + rem;
+      margin-top: math.div(15px, $base-font-size-px) + rem;
+      padding-top: math.div(15px, $base-font-size-px) + rem;
       border-top: black 1px solid;
     }
   }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss
similarity index 61%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss
index 657b1bb95e..5b352570f8 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/college-costs.scss
@@ -1,3 +1,6 @@
+@use 'sass:math';
+@import 'cfpb-core';
+
 .college-costs {
   // remove border between sidebar and main content
   & .content__main {
@@ -13,7 +16,7 @@
   }
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     @supports (position: sticky) {
       .app-container {
         display: flex;
@@ -25,23 +28,23 @@
         width: 30%;
         .number-callout {
           position: sticky;
-          top: unit( 10px / @base-font-size-px, em );
+          top: math.div(10px, $base-font-size-px) + em;
         }
       }
     }
-  });
+  }
 
   .cf-icon-svg--help-round {
     color: var(--pacific);
   }
 
   .u-border-bottom {
-    border-bottom: 1px solid @block--border-bottom;
+    border-bottom: 1px solid $block-border-bottom;
   }
 
   .block.block--mid {
-    margin-top: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
-    margin-bottom: unit(@grid_gutter-width * 1.5 / @base-font-size-px, em);
+    margin-top: math.div(($grid_gutter-width * 1.5), $base-font-size-px) + em;
+    margin-bottom: math.div(($grid_gutter-width * 1.5), $base-font-size-px) + em;
   }
 
   // Notification explanation doesn't need top margin unless it follows message
@@ -50,38 +53,38 @@
   }
 
   .m-notification__message + .m-notification__explanation {
-    margin-top: unit(5px / @base-font-size-px, em);
+    margin-top: math.div(5px, $base-font-size-px) + em;
   }
 
   &__tool-section {
     display: none;
 
-    max-width: unit(570px / @base-font-size-px, rem);
+    max-width: math.div(570px, $base-font-size-px) + rem;
 
     h3,
     legend.h4 {
-      margin-top: unit(30px / @base-font-size-px, em);
+      margin-top: math.div(30px, $base-font-size-px) + em;
     }
     legend.h4 {
-      margin-bottom: unit(4px / @base-font-size-px, em);
+      margin-bottom: math.div(4px, $base-font-size-px) + em;
     }
 
     .equation-row {
       .financial-item {
         &__label div,
         &__value span {
-          .h3();
+          @include h3;
         }
       }
 
       .o-costs-group {
         &__header {
-          margin-top: unit(30px / @base-font-size-px, em);
+          margin-top: math.div(30px, $base-font-size-px) + em;
         }
 
         &__label.h4,
         &__link span {
-          .h3();
+          @include h3;
         }
       }
 
@@ -92,8 +95,8 @@
     }
 
     .m-notification {
-      margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+      margin-bottom: math.div($grid_gutter-width, $base-font-size-px) + em;
+      margin-top: math.div($grid_gutter-width, $base-font-size-px) + em;
     }
 
     input {
@@ -111,12 +114,21 @@
 
     &--school-search {
       .m-notification {
-        margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-        margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+        margin-bottom: math.div(
+          $grid_gutter-width / 2 / $base-font-size-px,
+          em
+        );
+        margin-top: math.div(
+            math.div($grid_gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
 
       .m-form-field {
-        margin-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
+        margin-top: math.div(
+            math.div($grid_gutter-width, 3),
+            $base-font-size-px
+          ) + em;
       }
     }
 
@@ -129,18 +141,18 @@
 
       .costs__button-section {
         .m-form-field {
-          margin-bottom: unit(15px / @base-font-size-px, em);
+          margin-bottom: math.div(15px, $base-font-size-px) + em;
         }
       }
     }
 
     &--debt-guideline {
       .h3 .financial-item--subtotal {
-        margin-top: unit(15px / @base-font-size-px, em);
+        margin-top: math.div(15px, $base-font-size-px) + em;
       }
 
       h2.step-2 {
-        margin-top: unit(45px / @base-font-size-px, em);
+        margin-top: math.div(45px, $base-font-size-px) + em;
       }
     }
 
@@ -150,7 +162,7 @@
       }
 
       h2 {
-        margin-top: unit(30px / @base-font-size-px, em);
+        margin-top: math.div(30px, $base-font-size-px) + em;
       }
 
       .o-costs-group__header {
@@ -165,7 +177,10 @@
       }
 
       .financial-item + .financial-item {
-        margin-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
+        margin-top: math.div(
+            math.div($grid_gutter-width, 3),
+            $base-font-size-px
+          ) + em;
       }
 
       dl {
@@ -176,7 +191,8 @@
           margin-bottom: 0;
         }
         dd::after {
-          height: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
+          height: math.div(math.div($grid_gutter-width, 3), $base-font-size-px) +
+            em;
         }
       }
     }
@@ -203,41 +219,44 @@
     }
 
     .affording-loans-choices__about {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+      margin-top: math.div($grid_gutter-width, $base-font-size-px) + em;
     }
   }
 
   .comparison-section {
     border: 2px solid var(--gray-20);
-    padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    padding: math.div(math.div($grid_gutter-width, 2), $base-font-size-px) + em;
 
     .h4 {
       margin-top: 0;
     }
 
     legend {
-      margin-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
+      margin-bottom: math.div(
+          math.div($grid_gutter-width, 3),
+          $base-font-size-px
+        ) + em;
     }
 
     .school-results__rank-display {
       display: flex;
       align-items: center;
-      margin: unit(@grid_gutter-width / @base-font-size-px, em) 0;
+      margin: (math.div($grid_gutter-width, $base-font-size-px) + em) 0;
     }
 
     .big-percentile {
-      @big-percentile-font-size-px: 36px;
-      height: unit(110px / @big-percentile-font-size-px, em);
-      width: unit(110px / @big-percentile-font-size-px, em);
+      $big-percentile-font-size-px: 36px;
+      height: math.div(110px, $big-percentile-font-size-px) + em;
+      width: math.div(110px, $big-percentile-font-size-px) + em;
       border: 5px solid var(--black);
       border-radius: 50%;
-      margin-right: unit(15px / @big-percentile-font-size-px, em);
-      line-height: unit(110px / @big-percentile-font-size-px, em);
+      margin-right: math.div(15px, $big-percentile-font-size-px) + em;
+      line-height: math.div(110px, $big-percentile-font-size-px) + em;
       text-align: center;
-      font-size: unit(36px / @base-font-size-px, em);
+      font-size: math.div(36px, $base-font-size-px) + em;
       font-weight: 600;
       flex: 1;
-      flex-basis: unit(110px / @big-percentile-font-size-px, em);
+      flex-basis: math.div(110px, $big-percentile-font-size-px) + em;
       flex-grow: 0;
       flex-shrink: 0;
     }
@@ -254,7 +273,10 @@
 
   .o-table--financial {
     .indented-row td:first-child {
-      padding-left: unit(@grid_gutter-width * 2/3 / @base-font-size-px, em);
+      padding-left: math.div(
+          math.div($grid_gutter-width, 1.5),
+          $base-font-size-px
+        ) + em;
     }
     .subtotal-row {
       font-weight: 600;
@@ -267,8 +289,8 @@
       .up-next--desc {
         display: list-item;
         font-size: 0.875em;
-        margin-top: unit(15px / @base-font-size-px, em);
-        margin-left: unit(30px / @base-font-size-px, em);
+        margin-top: math.div(15px, $base-font-size-px) + em;
+        margin-left: math.div(30px, $base-font-size-px) + em;
       }
     }
 
@@ -277,8 +299,8 @@
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: space-between;
-      margin-top: unit(45px / @base-font-size-px, em);
-      margin-bottom: unit(30px / @base-font-size-px, em);
+      margin-top: math.div(45px, $base-font-size-px) + em;
+      margin-bottom: math.div(30px, $base-font-size-px) + em;
 
       & > button {
         width: 45%;
@@ -297,7 +319,7 @@
     margin-bottom: 1.875em;
     margin-top: 1.875em;
     position: relative;
-    padding: unit(15px / @base-font-size-px, em);
+    padding: math.div(15px, $base-font-size-px) + em;
     background: var(--gray-5);
     border: 1px solid var(--gray-40);
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss
similarity index 70%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss
index 80378c1c86..93bd288aad 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss
@@ -1,5 +1,7 @@
+@use 'sass:math';
+
 .financial-item {
-  margin-top: unit(30px / @base-font-size-px, em);
+  margin-top: math.div(30px, $base-font-size-px) + em;
 
   &:not(&--flyout) {
     .financial-item__label,
@@ -38,7 +40,7 @@
   &--total {
     .financial-item__label > :not(p),
     .financial-item__value {
-      .heading-4();
+      @include heading-4;
       margin-bottom: 0;
     }
   }
@@ -58,11 +60,11 @@
 
     .financial-item__note {
       text-align: left;
-      margin-top: unit(15px / @base-font-size-px, em);
+      margin-top: math.div(15px, $base-font-size-px) + em;
     }
 
     .financial-item__note span {
-      margin-top: unit(15px / @base-font-size-px, em);
+      margin-top: math.div(15px, $base-font-size-px) + em;
     }
 
     .financial-item__value {
@@ -73,7 +75,7 @@
   &.o-costs-group__header {
     width: 100%;
     border: none;
-    margin-bottom: unit(15px / @base-font-size-px, em);
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
     text-align: left;
 
     &--collapsed {
@@ -82,7 +84,7 @@
       }
       .o-costs-group__cue-open {
         display: inline;
-        margin-left: unit(5px / @base-font-size-px, em);
+        margin-left: math.div(5px, $base-font-size-px) + em;
       }
     }
 
@@ -92,7 +94,7 @@
       }
       .o-costs-group__cue-close {
         display: inline;
-        margin-left: unit(5px / @base-font-size-px, em);
+        margin-left: math.div(5px, $base-font-size-px) + em;
       }
     }
 
@@ -114,9 +116,9 @@
   }
 
   &--total {
-    font-size: unit(20px / @size-iv, em);
+    font-size: math.div(20px, $size-iv) + em;
     border-top: 1px solid var(--gray-60);
-    padding-top: unit(10px / @base-font-size-px, em);
+    padding-top: math.div(10px, $base-font-size-px) + em;
   }
 
   &--warning {
@@ -127,35 +129,35 @@
 
   &--full-width {
     div + div {
-      margin-top: unit(5px / @base-font-size-px, em);
+      margin-top: math.div(5px, $base-font-size-px) + em;
     }
   }
 
   .financial-item__label p {
-    font-size: unit(16px / @base-font-size-px, em);
+    font-size: math.div(16px, $base-font-size-px) + em;
   }
 }
 
 .financial-item-group {
   & + h3,
   & + h4 {
-    margin-top: unit(30px / @base-font-size-px, em);
+    margin-top: math.div(30px, $base-font-size-px) + em;
   }
 
   .o-costs-group {
-    border-bottom: 1px solid @flyout-border;
+    border-bottom: 1px solid $flyout-border;
     &:first-child,
     &.o-costs-group--first {
-      border-top: 1px solid @flyout-border;
+      border-top: 1px solid $flyout-border;
     }
   }
 
   .o-costs-group__content {
     .financial-item {
-      margin-top: unit(15px / @base-font-size-px, em);
+      margin-top: math.div(15px, $base-font-size-px) + em;
     }
 
-    margin-bottom: unit(15px / @base-font-size-px, em);
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
   }
 
   & [data-financial-item='gapLoan_gapLoan'] {
@@ -165,7 +167,7 @@
 
 .text-item--bigger {
   .financial-item__label div {
-    font-size: unit(18px / @base-font-size-px, em);
+    font-size: math.div(18px, $base-font-size-px) + em;
     font-weight: 500;
   }
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.scss
similarity index 81%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.scss
index 6ab7eec170..0074a85108 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/nav.scss
@@ -1,14 +1,16 @@
+@use 'sass:math';
+
 .o-college-costs-nav {
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     padding-left: 0;
     padding-right: 0;
     border-width: 0;
-  });
+  }
 
   .o-secondary-nav__list--parents {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       border-top: 1px solid var(--gray-20);
       border-left: 0;
       padding-left: 0;
@@ -17,7 +19,7 @@
         border-bottom: 1px solid var(--gray-20);
 
         & > .o-secondary-nav__link {
-          font-size: unit( 18px / @base-font-size-px, em );
+          font-size: math.div(18px, $base-font-size-px) + em;
         }
       }
 
@@ -25,8 +27,8 @@
         border: none;
         font-weight: normal;
         color: var(--black);
-        padding: unit( 5px / @base-font-size-px, em ) 0;
-        padding-left: unit( 10px / @base-font-size-px, em );
+        padding: math.div(5px, $base-font-size-px) + em 0;
+        padding-left: math.div(10px, $base-font-size-px) + em;
         text-align: left;
         width: 100%;
         display: block;
@@ -63,6 +65,6 @@
           }
         }
       }
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
deleted file mode 100644
index 1f38a47182..0000000000
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.less
+++ /dev/null
@@ -1,41 +0,0 @@
-.number-callout {
-  &__header {
-    font-size: unit(16px / @base-font-size-px, em);
-    font-weight: 500;
-    margin-bottom: 0;
-    text-transform: uppercase;
-  }
-
-  &__value {
-    margin-top: 0;
-    margin-bottom: unit(10px / @base-font-size-px, em);
-    font-size: unit(18px / @base-font-size-px, em);
-  }
-
-  &--large {
-    .number-callout__value {
-      font-size: unit(28px / @base-font-size-px, em);
-      font-weight: 600;
-    }
-  }
-
-  &--right {
-    text-align: right;
-    border-right: 5px solid var(--black);
-    padding-right: unit(10px / @base-font-size-px, em);
-  }
-
-  &--warning {
-    border-color: var(--red);
-
-    .number-callout__value {
-      color: var(--red);
-    }
-  }
-
-  &--border-top {
-    border-top: 1px solid @block--border;
-    padding-top: unit(10px / @base-font-size-px, em);
-    margin-top: unit(30px / @base-font-size-px, em);
-  }
-}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.scss
new file mode 100644
index 0000000000..f6430638a6
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/number-callout.scss
@@ -0,0 +1,43 @@
+@use 'sass:math';
+
+.number-callout {
+  &__header {
+    font-size: math.div(16px, $base-font-size-px) + em;
+    font-weight: 500;
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
+  &__value {
+    margin-top: 0;
+    margin-bottom: math.div(10px, $base-font-size-px) + em;
+    font-size: math.div(18px, $base-font-size-px) + em;
+  }
+
+  &--large {
+    .number-callout__value {
+      font-size: math.div(28px, $base-font-size-px) + em;
+      font-weight: 600;
+    }
+  }
+
+  &--right {
+    text-align: right;
+    border-right: 5px solid var(--black);
+    padding-right: math.div(10px, $base-font-size-px) + em;
+  }
+
+  &--warning {
+    border-color: var(--red);
+
+    .number-callout__value {
+      color: var(--red);
+    }
+  }
+
+  &--border-top {
+    border-top: 1px solid $block-border;
+    padding-top: math.div(10px, $base-font-size-px) + em;
+    margin-top: math.div(30px, $base-font-size-px) + em;
+  }
+}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.scss
similarity index 82%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.scss
index 8fb7f8b0ed..7a883918bb 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/search.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 #college-costs_school-search {
   position: relative;
 
@@ -25,8 +27,8 @@
         button {
           background: none;
           border: none;
-          padding: unit(5px / @base-font-size-px, em)
-            unit(30px / @base-font-size-px, em);
+          padding: math.div(5px, $base-font-size-px) + em
+            math.div(30px, $base-font-size-px) + em;
           margin: 0;
           text-align: left;
           width: 100%;
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss
similarity index 95%
rename from cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
rename to cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss
index 63f111346b..67e82203cf 100644
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.less
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss
@@ -134,7 +134,7 @@ main.college-costs {
 
   &[data-state_activesection='customize-estimate'] {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       @supports (position: sticky) {
         .costs-not-covered-sticky {
           display: block;
@@ -143,7 +143,7 @@ main.college-costs {
           display: none;
         }
       }
-    });
+    }
   }
 
   // Save and finish later section visibility
@@ -331,55 +331,55 @@ main.college-costs {
 
   &[data-state_rategraduationrange='high'] {
     .comparison-section--grad-rate .big-percentile {
-      border-color: @college-costs-chart-max;
+      border-color: $college-costs-chart-max;
     }
   }
 
   &[data-state_rategraduationrange='medium'] {
     .comparison-section--grad-rate .big-percentile {
-      border-color: @college-costs-chart-median;
+      border-color: $college-costs-chart-median;
     }
   }
 
   &[data-state_rategraduationrange='low'] {
     .comparison-section--grad-rate .big-percentile {
-      border-color: @college-costs-chart-min;
+      border-color: $college-costs-chart-min;
     }
   }
 
   &[data-state_raterepay3yrrange='high'] {
     .comparison-section--repayment-rate .big-percentile {
-      border-color: @college-costs-chart-max;
+      border-color: $college-costs-chart-max;
     }
   }
 
   &[data-state_raterepay3yrrange='medium'] {
     .comparison-section--repayment-rate .big-percentile {
-      border-color: @college-costs-chart-median;
+      border-color: $college-costs-chart-median;
     }
   }
 
   &[data-state_raterepay3yrrange='low'] {
     .comparison-section--repayment-rate .big-percentile {
-      border-color: @college-costs-chart-min;
+      border-color: $college-costs-chart-min;
     }
   }
 
   &[data-state_defaultraterange='high'] {
     .comparison-section--default-rate .big-percentile {
-      border-color: @college-costs-chart-min;
+      border-color: $college-costs-chart-min;
     }
   }
 
   &[data-state_defaultraterange='medium'] {
     .comparison-section--default-rate .big-percentile {
-      border-color: @college-costs-chart-median;
+      border-color: $college-costs-chart-median;
     }
   }
 
   &[data-state_defaultraterange='low'] {
     .comparison-section--default-rate .big-percentile {
-      border-color: @college-costs-chart-max;
+      border-color: $college-costs-chart-max;
     }
   }
 
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/stepper.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/stepper.scss
new file mode 100644
index 0000000000..e2f655e439
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/stepper.scss
@@ -0,0 +1,36 @@
+.m-stepper {
+  ol {
+    display: grid;
+    list-style-type: none;
+    padding: 0;
+    grid-auto-flow: column;
+    gap: 2px;
+  }
+
+  li {
+    display: block;
+    height: 0.5rem;
+    background: linear-gradient(to left, var(--gray-20) 50%, var(--green) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.3s;
+    &.active {
+      background-position: left bottom;
+    }
+  }
+
+  .current-step {
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 1;
+    color: var(--white);
+    background-color: var(--green);
+    padding: 0.6rem 1rem;
+    border-radius: 50%;
+  }
+
+  .h4 {
+    display: inline;
+    margin-left: 1rem;
+  }
+}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/tooltip.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/tooltip.scss
new file mode 100644
index 0000000000..58c70d58de
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/tooltip.scss
@@ -0,0 +1,17 @@
+#a-tooltip {
+  max-width: 50%;
+  min-width: 300px;
+  z-index: 9;
+  color: var(--black);
+  background-color: var(--gray-5);
+  padding: 0.9375rem;
+}
+
+.a-tooltip {
+  border: none;
+  background: none;
+  span {
+    visibility: hidden;
+    display: block;
+  }
+}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
deleted file mode 100644
index 1820ca9e94..0000000000
--- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.less
+++ /dev/null
@@ -1,5 +0,0 @@
-@college-costs-chart-min: #d14124;
-@college-costs-chart-median: #ff9e1b;
-@college-costs-chart-max: #257675;
-@flyout-transition-speed: 0.25s;
-@flyout-border: var(--gray-40);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.scss
new file mode 100644
index 0000000000..831d8f4d31
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/vars.scss
@@ -0,0 +1,5 @@
+$college-costs-chart-min: #d14124;
+$college-costs-chart-median: #ff9e1b;
+$college-costs-chart-max: #257675;
+$flyout-transition-speed: 0.25s;
+$flyout-border: var(--gray-40);
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
deleted file mode 100644
index 2b6a410aae..0000000000
--- a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.less
+++ /dev/null
@@ -1,1819 +0,0 @@
-/* ==========================================================================
-   Global
-   ========================================================================== */
-
-@small-font-size-px: 14px;
-@x-small-font-size-px: 12px;
-// Minimum width that putting the + or - sign inline with values in two-column line items works
-@bp-inline-sign-min: 689px;
-// Minimum width that bar graphs work in two columns
-@bp-graph-cols-min: 740px;
-
-.understanding-financial-aid-offer {
-  // Hide the clear-input "helper" in IE10+; it throws off calculations
-  input::-ms-clear {
-    display: none;
-  }
-
-  .content {
-    &__main {
-      padding-top: 0;
-      padding-bottom: 0;
-
-      button.a-btn.a-btn--link {
-        border: none;
-        background: none;
-        border-bottom: solid 1px var(--pacific);
-      }
-
-      // Overrides a style bleeding in from footer.css/header.css
-      p:last-child {
-        margin-bottom: 15px;
-      }
-    }
-
-    &__sidebar a {
-      border-bottom-width: 1px;
-    }
-  }
-
-  .information-right,
-  .information-wrong,
-  .offer-part__content-positive-cost,
-  .offer-part__content-negative-cost,
-  .evaluate,
-  .question,
-  .get-options,
-  .followup--no-not-sure,
-  .followup--yes,
-  .next-steps {
-    display: none;
-  }
-
-  #info-right:target,
-  #info-wrong:target {
-    display: block;
-    outline: none;
-  }
-}
-
-.step {
-  &__heading {
-    .heading-2();
-  }
-
-  &__intro {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .heading-3();
-       });
-  }
-}
-
-// A bottom border for the sections in step 3 that use a special grid (11 columns plus bleeding into one gutter)
-.offer-part::after,
-.criteria__wrapper::after {
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       display: block;
-       height: 1px;
-       border-right: 0;
-       border-left: 0;
-       margin-right: 0;
-       position: absolute;
-       bottom: 0;
-       right: @grid_gutter-width / 2;
-       left: @grid_gutter-width / 2;
-       z-index: 10;
-       background-color: var(--gray-40);
-       content: ' ';
-     });
-
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-       width: unit( (11 / @grid_total-columns) * 100, %);
-     });
-}
-
-/* ==========================================================================
-      Tool intro
-      ========================================================================== */
-
-.understanding-financial-aid-offer .m-hero__image {
-  background-image: url('/static/apps/paying-for-college/img/intro-195.png');
-}
-
-@media (min-resolution: 192dpi) {
-  .understanding-financial-aid-offer .m-hero__image {
-    background-image: url('/static/apps/paying-for-college/img/intro-390.png');
-  }
-}
-
-/* ==========================================================================
-      Verify offer
-      ========================================================================== */
-
-.verify {
-  margin-top: unit(20px / @base-font-size-px, em);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       margin-top: unit(30px / @base-font-size-px, em);
-     });
-
-  &__wrapper {
-    margin-bottom: unit(20px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-         margin-bottom: unit(45px / @base-font-size-px, em);
-       });
-  }
-
-  &__content {
-    dt,
-    dd {
-      display: block;
-    }
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(9);
-       });
-
-    .respond-to-min(@bp-lg-min, {
-         .u-grid-column(7);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(6);
-       });
-  }
-
-  &__prompt {
-    .heading-2();
-    margin-bottom: unit(30px / @font-size, em);
-  }
-
-  &__school,
-  &__location {
-    .heading-3();
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-bottom: unit(5px / @font-size, em);
-       });
-  }
-  &__school {
-    margin-bottom: 0;
-    font-weight: bold;
-  }
-
-  &__list {
-    margin-top: unit(15px / @base-font-size-px, em);
-    margin-bottom: unit(15px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-top: unit(20px / @base-font-size-px, em);
-       });
-  }
-
-  &__heading,
-  &__label {
-    .heading-5();
-    margin-bottom: 0;
-  }
-
-  &__value {
-    margin-left: 0;
-  }
-
-  &__value + &__heading {
-    padding-top: unit(15px / @x-small-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         padding-top: unit(20px / @x-small-font-size-px, em);
-       });
-  }
-
-  &__estimate {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(8);
-         border: none;
-       });
-  }
-
-  &__controls {
-    margin-top: unit(30px / @base-font-size-px, em);
-    text-align: center;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         text-align: left;
-       });
-  }
-
-  &__wrong-info-btn {
-    font-size: 1em;
-  }
-
-  [data-missing-data-error] {
-    display: none;
-  }
-}
-
-/* ==========================================================================
-      Instructions
-      ========================================================================== */
-
-.instructions {
-  margin-top: unit(30px / @base-font-size-px, em);
-
-  &__wrapper {
-    padding-bottom: unit(5px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-         padding-bottom: unit(20px / @base-font-size-px, em);
-       });
-  }
-
-  &__content {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-  }
-
-  &__subheading {
-    .heading-4();
-  }
-
-  &__about-wrapper {
-    padding-top: unit(20px / @base-font-size-px, em);
-    padding-bottom: unit(20px / @base-font-size-px, em);
-    margin-top: unit(30px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(5);
-         .u-grid-push(1);
-         padding-top: 0;
-         padding-bottom: 0;
-         margin-top: 0;
-       });
-  }
-
-  &__about-heading {
-    .heading-5();
-  }
-}
-
-/* ==========================================================================
-      Offer and expenses forms
-      ========================================================================== */
-
-.aid-form {
-  @aid-form-left-inset: 40px;
-  margin-top: unit(30px / @base-font-size-px, em);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       margin-top: 0;
-     });
-
-  .respond-to-min(@bp-lg-min, {
-       padding-left: unit(@aid-form-left-inset / @base-font-size-px, em);
-     });
-
-  &__heading {
-    margin-bottom: unit(20px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         padding-bottom: unit(5px / @base-font-size-px, em);
-         border-bottom: 1px solid var(--gray-40);
-       });
-  }
-
-  &__title {
-    margin-bottom: unit(5px / 18px, em);
-  }
-
-  &__label-wrapper,
-  .form-label__text-wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(12);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(15,24);
-       });
-
-    .aid-form__definition {
-      margin-bottom: unit(5px / @small-font-size-px, em);
-    }
-  }
-
-  &__input-wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(12);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(9,24);
-       });
-  }
-
-  &__input {
-    box-sizing: border-box;
-    width: 100%;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         max-width: unit(280px / @base-font-size-px, em);
-       });
-
-    &--currency {
-      text-align: right;
-    }
-
-    &--percent {
-      width: unit(65px / @base-font-size-px, em);
-      text-align: right;
-    }
-
-    &[disabled] {
-      background-color: var(--gray-10);
-      color: var(--black);
-      // Need to set -webkit-text-fill-color to make disabled input text var(--black) in Safari/iOS
-      -webkit-text-fill-color: var(--black);
-      opacity: 1;
-    }
-
-    &&--error {
-      border-color: var(--red-80);
-      border-width: unit(2px / @base-font-size-px, em);
-    }
-  }
-
-  &__calc-error {
-    font-size: unit(@small-font-size-px / @base-font-size-px, em);
-    line-height: 1.5;
-    margin-top: unit(5px / @base-font-size-px, em);
-    display: none;
-
-    & > .cf-icon-svg {
-      color: var(--red-80);
-      margin-right: unit(5px / @base-font-size-px, em);
-    }
-  }
-
-  &__unit {
-    display: inline-block;
-    margin-top: unit(6px / @base-font-size-px, em);
-    margin-left: unit(10px / @base-font-size-px, em);
-  }
-
-  &__equals-line {
-    margin-top: unit(15px / @base-font-size-px, em);
-    margin-bottom: unit(5px / @base-font-size-px, em);
-    background-color: var(--black);
-  }
-
-  &__summary,
-  &__summary.column-well__content {
-    padding-top: unit(20px / @base-font-size-px, em);
-    padding-right: (@grid_gutter-width / 2);
-    padding-bottom: unit(20px / @base-font-size-px, em);
-    padding-left: (@grid_gutter-width / 2);
-    margin-top: unit(30px / @base-font-size-px, em);
-    margin-right: -(@grid_gutter-width / 2);
-    margin-left: -(@grid_gutter-width / 2);
-    background-color: var(--gray-5);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         padding-top: 0;
-         padding-right: @grid_gutter-width;
-         padding-bottom: 0;
-         padding-left: @grid_gutter-width;
-         margin-top: 0;
-         margin-right: 0;
-         margin-left: 0;
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         margin-right: -@grid_gutter-width;
-         margin-left: -@grid_gutter-width;
-       });
-  }
-
-  &__summary-heading {
-    padding-bottom: unit(5px / @font-size, em);
-    border-bottom: 1px solid var(--black);
-    .heading-4();
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .heading-5();
-       });
-  }
-
-  &__definition {
-    font-size: unit(@small-font-size-px / @base-font-size-px, em);
-  }
-
-  &__group-header {
-    margin-bottom: unit(20px / @base-font-size-px, em);
-
-    .respond-to-min(@bp-lg-min, {
-         margin-left: unit(-@aid-form-left-inset / @base-font-size-px, em);
-       });
-  }
-
-  &__inline-subtotal {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         display: none;
-       });
-  }
-
-  .form-group + .form-group {
-    margin-top: unit(60px / @base-font-size-px, em);
-  }
-
-  .form-group__item {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-       });
-  }
-
-  .form-group__item + .form-group__item {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-top: unit(20px / @base-font-size-px, em);
-       });
-  }
-
-  .form-label {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         margin-top: unit(4px / @base-font-size-px, em);
-       });
-  }
-
-  .form-label-header {
-    font-style: normal;
-    font-weight: bolder;
-    font-size: 0.875em;
-    display: block;
-    letter-spacing: 1px;
-    line-height: 1.25;
-    text-transform: uppercase;
-    margin-bottom: 0.71428571em;
-    padding-bottom: unit(5px / @small-font-size-px, em);
-    border-bottom: 1px solid var(--gray-40);
-
-    & + .aid-form__definition {
-      margin-top: unit(-5px / @small-font-size-px, em);
-    }
-  }
-
-  .form-label + .aid-form__definition {
-    margin-top: unit(-5px / @small-font-size-px, em);
-  }
-}
-
-.line-item {
-  @line-item-font-size: 18px;
-
-  .u-grid-nested-col-group();
-  margin-bottom: unit(15px / @font-size, em);
-  .heading-4();
-
-  &__sign {
-    display: inline-block;
-    margin-right: unit(5px / @line-item-font-size, em);
-    font-size: unit(@line-item-font-size / @font-size, em);
-  }
-
-  &__currency {
-    position: absolute;
-    right: unit(88px / @font-size, em);
-  }
-
-  &__explanation {
-    display: block;
-    margin-top: unit(5px / @line-item-font-size, em);
-    font-size: unit(14px / @line-item-font-size, em);
-  }
-
-  &__title {
-    .u-grid-column(7);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(7);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(8);
-       });
-  }
-
-  &__value {
-    .u-grid-column(5);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(5);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(4);
-       });
-  }
-
-  &__amount {
-    float: right;
-  }
-
-  &--total {
-    margin-bottom: 0;
-  }
-
-  & + p {
-    margin-top: unit(20px / @base-font-size-px, em);
-  }
-}
-
-/* ==========================================================================
-      Review your first year offer
-      ========================================================================== */
-
-.review {
-  margin-top: unit(45px / @base-font-size-px, em);
-
-  &__wrapper {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-nested-col-group();
-       });
-
-    & + .criteria {
-      margin-top: unit(30px / @base-font-size-px, em);
-    }
-  }
-
-  &__intro {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(7);
-       });
-  }
-}
-
-.offer-part {
-  /*
-  padding-top, z-index, and background color need to be set here to make
-  sticky sidebars work correctly.
-  */
-  padding-top: unit(45px / @base-font-size-px, em);
-  z-index: 200;
-  background-color: #fff;
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       .u-grid-nested-col-group();
-       padding-bottom: unit(30px / @base-font-size-px, em);
-     });
-
-  &__intro {
-    margin-bottom: unit(15px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(12);
-       });
-  }
-
-  &__intro-wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-       });
-  }
-
-  &__intro-content {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(12);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(6);
-       });
-
-    .respond-to-min(@bp-lg-min, {
-         .u-grid-column(7);
-       });
-  }
-
-  &__heading {
-    .heading-3();
-  }
-
-  &__form-wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-  }
-
-  &__summary-wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-         padding-top: unit(30px / @base-font-size-px, em);
-         margin-top: 0;
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(4);
-         .u-grid-push(1);
-
-         &.is__stuck {
-           .u-grid-column(4);
-           .u-grid-push(7);
-           margin-left: -20px;
-         }
-
-         &.is__stuck.is__bottomed {
-           margin-left: 0;
-         }
-       });
-
-    .line-item {
-      .respond-to-range(@bp-sm-min, @bp-inline-sign-min, {
-           font-size: unit(16px / @base-font-size-px, em);
-         });
-    }
-  }
-
-  &__terms {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(12);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(15,24);
-         margin-top: unit(-15px / @base-font-size-px, em);
-       });
-  }
-
-  &__term {
-    margin-top: unit(15px / @base-font-size-px, em);
-    margin-bottom: unit(5px / @base-font-size-px, em);
-  }
-
-  &.cost-to-attend {
-    margin-top: unit(30px / @base-font-size-px, em);
-  }
-}
-
-.contributions,
-.loans,
-.future {
-  .column-well {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .aid-form__summary {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         padding-top: unit(30px / @base-font-size-px, em);
-         padding-bottom: unit(30px / @base-font-size-px, em);
-       });
-  }
-}
-
-.contributions,
-.loans {
-  .big-picture {
-    display: none;
-    padding-bottom: 0;
-    background-color: transparent;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         display: block;
-       });
-  }
-
-  .column-well::after {
-    background-color: var(--gold-20);
-  }
-}
-
-.future {
-  .aid-form__summary.debt-summary {
-    margin-top: 0;
-    background-color: var(--gold-40);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         padding-bottom: 0;
-       });
-  }
-
-  .aid-form__summary.big-picture {
-    background-color: var(--gold-20);
-  }
-
-  .column-well::after {
-    background-color: var(--gold-40);
-  }
-}
-
-.loans {
-  &__line {
-    border-top: 1px dotted var(--gray-40);
-    margin-top: unit(30px / @base-font-size-px, em);
-    margin-bottom: unit(15px / @base-font-size-px, em);
-    background-color: transparent;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-top: unit(15px / @base-font-size-px, em);
-       });
-  }
-}
-
-.private-loans {
-  border-bottom: 1px dotted var(--gray-40);
-  margin-bottom: unit(15px / @base-font-size-px, em);
-
-  &__heading {
-    border-bottom: 1px solid var(--gray-40);
-    margin-bottom: unit(15px / @base-font-size-px, em);
-    position: relative;
-  }
-
-  &__heading-text {
-    .heading-4();
-  }
-
-  &__remove-btn,
-  &__add-btn {
-    border-bottom: none;
-    font-size: 1em;
-
-    &:hover,
-    &:visited,
-    &:active {
-      border-bottom: none;
-    }
-  }
-
-  &__remove-btn {
-    position: absolute;
-    top: unit(-8px / @base-font-size-px, em);
-    right: 0;
-    font-size: 1em;
-  }
-
-  &__add-btn {
-    margin-top: unit(20px / @base-font-size-px, em);
-    margin-right: 0;
-    margin-bottom: unit(30px / @base-font-size-px, em);
-    margin-left: 0;
-    text-align: left;
-  }
-
-  &__loan + &__loan {
-    margin-top: unit(45px / @base-font-size-px, em);
-  }
-}
-
-.debt-summary {
-  .aid-form__summary-heading {
-    .heading-3();
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .heading-5();
-       });
-  }
-}
-
-/* ==========================================================================
-      Evaluating your offer
-      ========================================================================== */
-
-.evaluate {
-  margin-top: unit(45px / @base-font-size-px, em);
-
-  &__wrapper {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-nested-col-group();
-       });
-
-    & + .criteria {
-      margin-top: unit(30px / @base-font-size-px, em);
-    }
-  }
-
-  &__intro {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(7);
-       });
-  }
-}
-
-.criteria {
-  margin-top: unit(30px / @base-font-size-px, em);
-
-  .respond-to-min(@bp-graph-cols-min, {
-       margin-top: unit(45px / @base-font-size-px, em);
-     });
-
-  &__heading {
-    .heading-3();
-  }
-
-  &__wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-       });
-
-    &::after {
-      .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-           display: none;
-         });
-    }
-  }
-
-  &__intro {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-graph-cols-min, {
-         .u-grid-column(6);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(5);
-       });
-  }
-
-  & + & {
-    padding-top: unit(15px / @base-font-size-px, em);
-    border-top: 1px solid var(--gray-20);
-
-    .respond-to-min(@bp-graph-cols-min, {
-         padding-top: 0;
-         border-top: none;
-       });
-  }
-}
-
-.metric {
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       .u-grid-column(10);
-     });
-
-  .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-       padding-bottom: 0;
-     });
-
-  .respond-to-min(@bp-graph-cols-min, {
-       .u-grid-column(6);
-       padding-top: unit(30px / @base-font-size-px, em);
-     });
-
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-       .u-grid-column(4);
-       .u-grid-push(2);
-     });
-
-  &__heading {
-    .heading-4();
-  }
-
-  &__explanation {
-    margin-bottom: unit(15px / 14px, em);
-    font-size: unit(14px / @base-font-size-px, em);
-  }
-
-  &__notification {
-    margin-bottom: unit(15px / @base-font-size-px, em);
-
-    .cf-notification__text,
-    .cf-notification__icon {
-      display: none;
-    }
-
-    &--no-you,
-    &--no-average,
-    &--no-data {
-      padding-left: 11px;
-    }
-
-    &--better .metric__notification-text-better,
-    &--same .metric__notification-text-same,
-    &--worse .metric__notification-text-worse,
-    &--no-you .metric__notification-text-no-you,
-    &--no-average .metric__notification-text-no-average,
-    &--no-data .metric__notification-text-no-data {
-      display: block;
-    }
-
-    &.cf-notification .cf-notification__icon {
-      display: inline-block;
-    }
-
-    p + .cf-notification__text {
-      margin-top: 0;
-    }
-  }
-
-  &__link {
-    border-top: 1px solid var(--gray-40);
-    margin-top: 30px;
-    padding-top: 30px;
-  }
-
-  &.column-well--not-stacked {
-    .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-         padding-top: 0;
-       });
-  }
-
-  &.column-well--not-stacked::after {
-    .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-         display: none;
-       });
-  }
-
-  .column-well__content {
-    .respond-to-range(@bp-sm-min, @bp-graph-cols-min - 1, {
-         padding-right: 0;
-         padding-left: 0;
-       });
-  }
-}
-
-.salary-and-debt {
-  @salary-and-debt-font-size: 18px;
-
-  &__projection {
-    .u-grid-nested-col-group();
-    max-width: unit(380px / @base-font-size-px, em);
-    margin-bottom: unit(20px / @base-font-size-px, em);
-  }
-
-  &__projection-name {
-    .u-grid-column(7);
-    .heading-4();
-  }
-
-  &__projection-value {
-    .u-grid-column(5);
-    .heading-4();
-    text-align: right;
-  }
-
-  &__explanation {
-    display: block;
-    margin-top: unit(5px / @salary-and-debt-font-size, em);
-    font-size: unit(14px / @salary-and-debt-font-size, em);
-  }
-
-  &__payment-term {
-    margin-bottom: unit(30px / @base-font-size-px, em);
-
-    label {
-      // Bug in Chrome and Safari
-      // Radio button w/ margin-left: 0 in an overflow: hidden container
-      // has clipping on the left side. Fix: set a tiny margin-left value.
-      margin-left: 1px;
-      line-height: 2;
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           margin-left: 0;
-         });
-
-      .respond-to-min(@bp-lg-min, {
-           line-height: normal;
-         });
-    }
-  }
-}
-
-.debt-burden {
-  &__projection {
-    .u-grid-nested-col-group();
-    max-width: unit(380px / @base-font-size-px, em);
-    margin-bottom: unit(20px / @base-font-size-px, em);
-  }
-
-  &__projection-name {
-    .u-grid-column(7);
-  }
-
-  &__projection-value {
-    .u-grid-column(5);
-    text-align: right;
-  }
-
-  &__payment-term {
-    margin-bottom: unit(30px / @base-font-size-px, em);
-
-    label {
-      // Bug in Chrome and Safari
-      // Radio button w/ margin-left: 0 in an overflow: hidden container
-      // has clipping on the left side. Fix: set a tiny margin-left value.
-      margin-left: 1px;
-      line-height: 2;
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           margin-left: 0;
-         });
-
-      .respond-to-min(@bp-lg-min, {
-           line-height: normal;
-         });
-    }
-  }
-}
-
-.debt-equation {
-  max-width: unit(380px / @base-font-size-px, em);
-  padding-top: unit(10px / @base-font-size-px, em);
-  margin-bottom: unit(30px / @base-font-size-px, em);
-
-  &__part {
-    float: left;
-  }
-
-  &__part--loan {
-    width: 25%;
-  }
-
-  &__part--income {
-    width: 25%;
-  }
-
-  &__part--percent {
-    width: 20%;
-  }
-
-  &__symbol {
-    @symbol-font-size-px: 36px;
-    margin-top: unit(3px / @symbol-font-size-px, em);
-    width: 15%;
-    float: left;
-    font-size: @symbol-font-size-px;
-    text-align: center;
-  }
-
-  &__number {
-    font-size: unit(18px / @base-font-size-px, em);
-  }
-}
-
-.bar-graph {
-  @bar-graph-container-max-width: 380px;
-  @bar-graph-width: 45px;
-  @bar-graph-width-sm: 25px;
-  @bar-graph-width-xs: 17px;
-  @bar-graph-height: 130px;
-  @bar-graph-label-width: 135px;
-  @bar-graph-value-min-width: 95px;
-  @bar-graph-you-font-size: 18px;
-  @bar-graph-average-font-size: 16px;
-  @bar-graph-line-overhang: 6px;
-  @bar-graph-top-label-width: 70px;
-  @bar-graph-top-label-height: 20px;
-  // A little cheat to make the line look vertically centered
-  @bar-graph-line-top-cheat: 3px;
-
-  height: @bar-graph-height;
-  max-width: unit(@bar-graph-container-max-width / @base-font-size-px, em);
-  margin-bottom: unit(10px / @base-font-size-px, em);
-  position: relative;
-
-  &__point {
-    width: 100%;
-    position: absolute;
-  }
-
-  &__label,
-  &__value {
-    position: absolute;
-    top: 0;
-    background-color: var(--white);
-
-    .respond-to-min(@bp-graph-cols-min, {
-         background-color: var(--gray-5);
-       });
-  }
-
-  &__label {
-    width: @bar-graph-label-width;
-    left: 0;
-    z-index: 10;
-  }
-
-  &__value {
-    min-width: @bar-graph-value-min-width;
-    padding-left: 8px;
-    right: 0;
-  }
-
-  &__line {
-    width: 100%;
-    border-top-width: 3px;
-    position: absolute;
-  }
-
-  &__number {
-    display: inline-block;
-  }
-
-  &__bar {
-    width: @bar-graph-width;
-    height: @bar-graph-height;
-    margin-left: -@bar-graph-line-overhang;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    background-color: var(--gray-10);
-
-    .respond-to-range(@bp-graph-cols-min, @bp-med-max, {
-         width: @bar-graph-width-sm;
-         border-right: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
-         border-left: (@bar-graph-width - @bar-graph-width-sm) / 2 solid var(--gray-5);
-       });
-
-    // Graph bars need to get really skinny at some screen sizes
-    .respond-to-range(@bp-graph-cols-min, 759px, {
-         width: @bar-graph-width-xs;
-         border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-         border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-       });
-
-    .respond-to-range(901px, 929px, {
-         width: @bar-graph-width-xs;
-         border-right: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-         border-left: (@bar-graph-width - @bar-graph-width-xs) / 2 solid var(--gray-5);
-       });
-  }
-
-  &__top-label {
-    width: @bar-graph-top-label-width;
-    margin-left: -(@bar-graph-top-label-width - @bar-graph-width) / 2 - @bar-graph-line-overhang;
-    position: absolute;
-    top: unit(-@bar-graph-top-label-height / @small-font-size-px, em);
-    left: 50%;
-    z-index: 100;
-    font-size: unit(@small-font-size-px / @base-font-size-px, em);
-    text-align: center;
-  }
-
-  &__point--you {
-    font-size: unit(@bar-graph-you-font-size / @base-font-size-px, em);
-
-    .bar-graph__line {
-      border-top-color: var(--black);
-      border-top-style: solid;
-      top: unit((@bar-graph-you-font-size + @bar-graph-line-top-cheat) / 2, px);
-    }
-  }
-
-  &__point--average {
-    color: var(--gray-dark);
-
-    .bar-graph__line {
-      border-top-color: var(--gray-dark);
-      border-top-style: dotted;
-      top: unit(
-        (@bar-graph-average-font-size + @bar-graph-line-top-cheat) / 2,
-        px
-      );
-    }
-  }
-
-  &--equal &__point--average {
-    display: none;
-  }
-
-  &--missing-you {
-    display: none;
-  }
-
-  &--missing-average &__point--average {
-    display: none;
-  }
-
-  &--high-point &__top-label {
-    display: none;
-  }
-
-  // Median salary and loan default graphs need room above for the top-label
-  &[data-metric='medianSalary'],
-  &[data-metric='defaultRate'] {
-    border-top: @bar-graph-top-label-height solid transparent;
-  }
-}
-
-#content__expenses-nat-salary {
-  display: none;
-}
-
-/* ==========================================================================
-      Estimated monthly expenses
-      ========================================================================== */
-
-.debt-burden .column-well__content {
-  .respond-to-min(@bp-graph-cols-min, {
-       position: absolute;
-     });
-}
-
-.estimated-expenses {
-  padding-top: unit(10px / @base-font-size-px, em);
-  padding-bottom: unit(15px / @base-font-size-px, em);
-  border-top: 1px solid var(--gray-40);
-  margin-top: unit(30px / @base-font-size-px, em);
-  margin-bottom: unit(15px / @base-font-size-px, em);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       .u-grid-column(10);
-       padding-bottom: 0;
-       border-top: 1px solid var(--gray-40);
-     });
-
-  .respond-to-min(@bp-graph-cols-min, {
-       .u-grid-column(6);
-       padding-top: 0;
-       border-top: none;
-       margin-top: unit(15px / @base-font-size-px, em);
-       margin-bottom: unit(45px / @base-font-size-px, em);
-     });
-
-  &__region {
-    margin-bottom: unit(20px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-         border-width: 0;
-       });
-  }
-
-  .aid-form {
-    margin-top: 0;
-
-    &__heading {
-      .respond-to-range(@bp-sm-min, @bp-graph-cols-min, {
-           border-bottom: none;
-         });
-    }
-
-    .form-label__text-wrapper {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           .u-grid-column(12);
-         });
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           .u-grid-column(12,24);
-         });
-    }
-
-    &__input-wrapper {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           .u-grid-column(12);
-         });
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           .u-grid-column(12,24);
-         });
-    }
-
-    &__sign {
-      .u-grid-column(3,24);
-      border-width: 0;
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           .u-grid-column(3);
-           border-width: 0px;
-         });
-    }
-
-    &__input {
-      max-width: none;
-      width: 80%;
-
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           width: 85%;
-         });
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           width: 75%;
-         });
-    }
-
-    &__summary {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           padding-left: 0;
-           margin-top: unit(30px / @base-font-size-px, em);
-           margin-left: 0;
-           background-color: transparent;
-         });
-
-      // Tablet only.
-      .respond-to-range(@bp-sm-min, @bp-sm-max, {
-           padding-right: 0;
-         });
-
-      .respond-to-min(@bp-lg-min, {
-           padding-left: unit(40px / @base-font-size-px, em);
-         });
-    }
-
-    &__summary-heading {
-      .heading-4();
-      margin-bottom: unit(10px / @font-size, em);
-      text-transform: none;
-    }
-  }
-
-  .line-item {
-    &__title {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           .u-grid-column(8);
-         });
-    }
-
-    &__value {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           .u-grid-column(4);
-         });
-    }
-
-    &__sign {
-      position: absolute;
-      right: unit(100px / @base-font-size-px, em);
-    }
-  }
-}
-
-.recalculating-mobile {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 15px;
-  background-color: var(--gold-20);
-  font-size: unit(14px / @base-font-size-px, em);
-
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-       top: -100em;
-     });
-}
-
-/* ==========================================================================
-      Continue to step 2, and the big question
-      ========================================================================== */
-
-.continue,
-.question {
-  padding-top: unit(25px / @base-font-size-px, em);
-  padding-bottom: unit(5px / @base-font-size-px, em);
-  margin-top: unit(30px / @base-font-size-px, em);
-  background-color: var(--teal-20);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       padding-top: unit(30px / @base-font-size-px, em);
-       padding-bottom: unit(15px / @base-font-size-px, em);
-       margin-top: unit(45px / @base-font-size-px, em);
-     });
-
-  &__wrapper {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-nested-col-group();
-       });
-  }
-
-  &__content {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(8);
-       });
-  }
-}
-
-.continue__controls,
-.question__answers {
-  margin-top: unit(20px / @base-font-size-px, em);
-  margin-bottom: unit(20px / @base-font-size-px, em);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    margin-top: unit(30px / @base-font-size-px, em);
-    margin-bottom: unit(30px / @base-font-size-px, em);
-  });
-}
-
-/* ==========================================================================
-      You have options
-      ========================================================================== */
-
-.get-options {
-  margin-top: unit(45px / @base-font-size-px, em);
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-       padding-bottom: unit(30px / @base-font-size-px, em);
-     });
-
-  &__wrapper {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-nested-col-group();
-       });
-  }
-
-  &__wrapper + &__wrapper {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-       });
-  }
-
-  &__intro {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(8);
-       });
-  }
-
-  .step__intro {
-    margin-bottom: 0;
-  }
-
-  .step__intro + p {
-    margin-top: unit(20px / @base-font-size-px, em);
-  }
-
-  & + .content__line {
-    display: none;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         display: block;
-       });
-  }
-
-  &--settlement {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(8);
-       });
-  }
-
-  &--sidebar {
-    margin-top: unit(60px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-column(6);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(4);
-       });
-  }
-}
-
-.option {
-  margin-top: unit(45px / @base-font-size-px, em);
-
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-       .u-grid-column(4);
-     });
-
-  &--maximize-grants,
-  &--reduce-costs,
-  &--different-program,
-  &--transfer-credits,
-  &--work-while-studying,
-  &--explore-schools {
-    background-position: center 30px;
-    background-size: 150px;
-    background-repeat: no-repeat;
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         background-position: center 60px;
-       });
-  }
-
-  &--maximize-grants {
-    background-image: url('/static/apps/paying-for-college/img/maximize-grants_150.png');
-  }
-
-  &--reduce-costs {
-    background-image: url('/static/apps/paying-for-college/img/reduce-costs_150.png');
-  }
-
-  &--different-program {
-    background-image: url('/static/apps/paying-for-college/img/different-program_150.png');
-  }
-
-  &--transfer-credits {
-    background-image: url('/static/apps/paying-for-college/img/transfer-credits_150.png');
-  }
-
-  &--explore-schools {
-    background-image: url('/static/apps/paying-for-college/img/explore-schools_150.png');
-  }
-
-  &--work-while-studying {
-    background-image: url('/static/apps/paying-for-college/img/work-while-studying_150.png');
-  }
-
-  @media (min-resolution: 192dpi) {
-    &--maximize-grants {
-      background-image: url('/static/apps/paying-for-college/img/maximize-grants_300.png');
-    }
-
-    &--reduce-costs {
-      background-image: url('/static/apps/paying-for-college/img/reduce-costs_300.png');
-    }
-
-    &--different-program {
-      background-image: url('/static/apps/paying-for-college/img/different-program_300.png');
-    }
-
-    &--transfer-credits {
-      background-image: url('/static/apps/paying-for-college/img/transfer-credits_300.png');
-    }
-
-    &--explore-schools {
-      background-image: url('/static/apps/paying-for-college/img/explore-schools_300.png');
-    }
-
-    &--work-while-studying {
-      background-image: url('/static/apps/paying-for-college/img/work-while-studying_300.png');
-    }
-  }
-
-  // Add padding on top of the heading for the 150px illustration
-  // X-small and small screens: 150px + 30px padding above and below the image
-  // Meidum and larger screens: 150px + 60px padding above and below the image
-  &__heading {
-    padding-top: unit(210px / @font-size, em);
-    .heading-4();
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         padding-top: unit(270px / @font-size, em);
-       });
-  }
-
-  &--take-action-header {
-    .heading-3();
-  }
-
-  // Top borders on all but the first option on small screens and only the second row of options on larger screens
-  & + & &__heading {
-    border-top: 1px solid var(--gray-40);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         border-top: none;
-       });
-  }
-
-  & + & + & &__heading {
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         border-top: 1px solid var(--gray-40);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         border-top: none;
-       });
-  }
-
-  & + & + & + & &__heading {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         border-top: 1px solid var(--gray-40);
-       });
-  }
-
-  // Settlement school modifications
-  &--settlement {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(1, 2);
-       });
-
-    // Top borders on all but the first option on small screens and only the second row of options on larger screens
-    & + & .option__heading {
-      border-top: 1px solid var(--gray-40);
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           border-top: none;
-         });
-    }
-
-    & + & + & .option__heading {
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-           border-top: 1px solid var(--gray-40);
-         });
-    }
-
-    & + & + & + & .option__heading {
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-           border-top: 1px solid var(--gray-40);
-         });
-    }
-  }
-}
-
-/* ==========================================================================
-      Next steps
-      ========================================================================== */
-
-.next-steps {
-  padding-bottom: unit(30px / @base-font-size-px, em);
-
-  &__wrapper {
-    margin-top: unit(30px / @base-font-size-px, em);
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         margin-top: unit(45px / @base-font-size-px, em);
-         .u-grid-nested-col-group();
-       });
-  }
-
-  &__intro {
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(10);
-       });
-
-    .respond-to-min(@bp-xl-min, {
-         .u-grid-column(7);
-       });
-  }
-
-  &__list {
-    margin-top: unit(45px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         .u-grid-nested-col-group();
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         margin-top: unit(60px / @base-font-size-px, em);
-       });
-  }
-
-  &__list-item {
-    margin-top: unit(30px / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-top: 0;
-         .u-grid-column(9);
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         .u-grid-column(4);
-       });
-  }
-
-  &__list-intro {
-    .heading-4();
-  }
-
-  &__controls {
-    margin-top: unit(20px / @base-font-size-px, em);
-    margin-left: -2.5em;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         margin-left: 0;
-       });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-         margin-top: unit(30px / @base-font-size-px, em);
-       });
-  }
-
-  .content__line {
-    display: none;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-         display: block;
-       });
-  }
-}
-
-/* ==========================================================================
-      Scripted Elements
-      ========================================================================== */
-
-[data-multi_year='false'] {
-  display: none;
-}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss
new file mode 100644
index 0000000000..58c27928b3
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/disclosures.scss
@@ -0,0 +1,1837 @@
+@use 'sass:math';
+
+/* ==========================================================================
+   Global
+   ========================================================================== */
+
+$small-font-size-px: 14px;
+$x-small-font-size-px: 12px;
+
+// Minimum width that putting the + or - sign inline with values in two-column line items works
+$bp-inline-sign-min: 689px;
+
+// Minimum width that bar graphs work in two columns
+$bp-graph-cols-min: 740px;
+
+.understanding-financial-aid-offer {
+  // Hide the clear-input "helper" in IE10+; it throws off calculations
+  input::-ms-clear {
+    display: none;
+  }
+
+  .content {
+    &__main {
+      padding-top: 0;
+      padding-bottom: 0;
+
+      button.a-btn.a-btn--link {
+        border: none;
+        background: none;
+        border-bottom: solid 1px var(--pacific);
+      }
+
+      // Overrides a style bleeding in from footer.css/header.css
+      p:last-child {
+        margin-bottom: 15px;
+      }
+    }
+
+    &__sidebar a {
+      border-bottom-width: 1px;
+    }
+  }
+
+  .information-right,
+  .information-wrong,
+  .offer-part__content-positive-cost,
+  .offer-part__content-negative-cost,
+  .evaluate,
+  .question,
+  .get-options,
+  .followup--no-not-sure,
+  .followup--yes,
+  .next-steps {
+    display: none;
+  }
+
+  #info-right:target,
+  #info-wrong:target {
+    display: block;
+    outline: none;
+  }
+}
+
+.step {
+  &__heading {
+    @include heading-2;
+  }
+
+  &__intro {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include heading-3;
+    }
+  }
+}
+
+// A bottom border for the sections in step 3 that use a special grid (11 columns plus bleeding into one gutter)
+.offer-part::after,
+.criteria__wrapper::after {
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    display: block;
+    height: 1px;
+    border-right: 0;
+    border-left: 0;
+    margin-right: 0;
+    position: absolute;
+    bottom: 0;
+    right: math.div($grid_gutter-width, 2);
+    left: math.div($grid_gutter-width, 2);
+    z-index: 10;
+    background-color: var(--gray-40);
+    content: ' ';
+  }
+
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    width: math.div(11, $grid_total-columns) * 100%;
+  }
+}
+
+/* ==========================================================================
+      Tool intro
+      ========================================================================== */
+
+.understanding-financial-aid-offer .m-hero__image {
+  background-image: url('/static/apps/paying-for-college/img/intro-195.png');
+}
+
+@media (min-resolution: 192dpi) {
+  .understanding-financial-aid-offer .m-hero__image {
+    background-image: url('/static/apps/paying-for-college/img/intro-390.png');
+  }
+}
+
+/* ==========================================================================
+      Verify offer
+      ========================================================================== */
+
+.verify {
+  margin-top: math.div(20px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+  }
+
+  &__wrapper {
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+      margin-bottom: math.div(45px, $base-font-size-px) + em;
+    }
+  }
+
+  &__content {
+    dt,
+    dd {
+      display: block;
+    }
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(9);
+    }
+
+    @include respond-to-min($bp-lg-min) {
+      @include u-grid-column(7);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(6);
+    }
+  }
+
+  &__prompt {
+    @include heading-2;
+    margin-bottom: math.div(30px, $size-ii) + em;
+  }
+
+  &__school,
+  &__location {
+    @include heading-3;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-bottom: math.div(5px, $size-iii) + em;
+    }
+  }
+  &__school {
+    margin-bottom: 0;
+    font-weight: bold;
+  }
+
+  &__list {
+    margin-top: math.div(15px, $base-font-size-px) + em;
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-top: math.div(20px, $base-font-size-px) + em;
+    }
+  }
+
+  &__heading,
+  &__label {
+    @include heading-5;
+    margin-bottom: 0;
+  }
+
+  &__value {
+    margin-left: 0;
+  }
+
+  &__value + &__heading {
+    padding-top: math.div(15px, $x-small-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      padding-top: math.div(20px, $x-small-font-size-px) + em;
+    }
+  }
+
+  &__estimate {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(8);
+      border: none;
+    }
+  }
+
+  &__controls {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    text-align: center;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      text-align: left;
+    }
+  }
+
+  &__wrong-info-btn {
+    font-size: 1em;
+  }
+
+  [data-missing-data-error] {
+    display: none;
+  }
+}
+
+/* ==========================================================================
+      Instructions
+      ========================================================================== */
+
+.instructions {
+  margin-top: math.div(30px, $base-font-size-px) + em;
+
+  &__wrapper {
+    padding-bottom: math.div(5px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+      padding-bottom: math.div(20px, $base-font-size-px) + em;
+    }
+  }
+
+  &__content {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+  }
+
+  &__subheading {
+    @include heading-4;
+  }
+
+  &__about-wrapper {
+    padding-top: math.div(20px, $base-font-size-px) + em;
+    padding-bottom: math.div(20px, $base-font-size-px) + em;
+    margin-top: math.div(30px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(5);
+      @include u-grid-push(1);
+      padding-top: 0;
+      padding-bottom: 0;
+      margin-top: 0;
+    }
+  }
+
+  &__about-heading {
+    @include heading-5;
+  }
+}
+
+/* ==========================================================================
+      Offer and expenses forms
+      ========================================================================== */
+
+.aid-form {
+  $aid-form-left-inset: 40px;
+  margin-top: math.div(30px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    margin-top: 0;
+  }
+
+  @include respond-to-min($bp-lg-min) {
+    padding-left: math.div($aid-form-left-inset, $base-font-size-px) + em;
+  }
+
+  &__heading {
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      padding-bottom: math.div(5px, $base-font-size-px) + em;
+      border-bottom: 1px solid var(--gray-40);
+    }
+  }
+
+  &__title {
+    margin-bottom: math.div(5px, 18px) + em;
+  }
+
+  &__label-wrapper,
+  .form-label__text-wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(12);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(15, 24);
+    }
+
+    .aid-form__definition {
+      margin-bottom: math.div(5px, $small-font-size-px) + em;
+    }
+  }
+
+  &__input-wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(12);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(9, 24);
+    }
+  }
+
+  &__input {
+    box-sizing: border-box;
+    width: 100%;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      max-width: math.div(280px, $base-font-size-px) + em;
+    }
+
+    &--currency {
+      text-align: right;
+    }
+
+    &--percent {
+      width: math.div(65px, $base-font-size-px) + em;
+      text-align: right;
+    }
+
+    &[disabled] {
+      background-color: var(--gray-10);
+      color: var(--black);
+
+      // Need to set -webkit-text-fill-color to make disabled input text var(--black) in Safari/iOS
+      -webkit-text-fill-color: var(--black);
+      opacity: 1;
+    }
+
+    &--error {
+      border-color: var(--red-80);
+      border-width: math.div(2px, $base-font-size-px) + em;
+    }
+  }
+
+  &__calc-error {
+    font-size: math.div($small-font-size-px, $base-font-size-px) + em;
+    line-height: 1.5;
+    margin-top: math.div(5px, $base-font-size-px) + em;
+    display: none;
+
+    & > .cf-icon-svg {
+      color: var(--red-80);
+      margin-right: math.div(5px, $base-font-size-px) + em;
+    }
+  }
+
+  &__unit {
+    display: inline-block;
+    margin-top: math.div(6px, $base-font-size-px) + em;
+    margin-left: math.div(10px, $base-font-size-px) + em;
+  }
+
+  &__equals-line {
+    margin-top: math.div(15px, $base-font-size-px) + em;
+    margin-bottom: math.div(5px, $base-font-size-px) + em;
+    background-color: var(--black);
+  }
+
+  &__summary,
+  &__summary.column-well__content {
+    padding-top: math.div(20px, $base-font-size-px) + em;
+    padding-right: ($grid_gutter-width / 2);
+    padding-bottom: math.div(20px, $base-font-size-px) + em;
+    padding-left: ($grid_gutter-width / 2);
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    margin-right: -1 * math.div($grid_gutter-width, 2);
+    margin-left: -1 * math.div($grid_gutter-width, 2);
+    background-color: var(--gray-5);
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      padding-top: 0;
+      padding-right: $grid_gutter-width;
+      padding-bottom: 0;
+      padding-left: $grid_gutter-width;
+      margin-top: 0;
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      margin-right: -$grid_gutter-width;
+      margin-left: -$grid_gutter-width;
+    }
+  }
+
+  &__summary-heading {
+    padding-bottom: math.div(5px, $size-iv) + em;
+    border-bottom: 1px solid var(--black);
+
+    @include heading-4;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include heading-5;
+    }
+  }
+
+  &__definition {
+    font-size: math.div($small-font-size-px, $base-font-size-px) + em;
+  }
+
+  &__group-header {
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+
+    @include respond-to-min($bp-lg-min) {
+      margin-left: -1 * math.div($aid-form-left-inset, $base-font-size-px) + em;
+    }
+  }
+
+  &__inline-subtotal {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      display: none;
+    }
+  }
+
+  .form-group + .form-group {
+    margin-top: math.div(60px, $base-font-size-px) + em;
+  }
+
+  .form-group__item {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  .form-group__item + .form-group__item {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-top: math.div(20px, $base-font-size-px) + em;
+    }
+  }
+
+  .form-label {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      margin-top: math.div(4px, $base-font-size-px) + em;
+    }
+  }
+
+  .form-label-header {
+    font-style: normal;
+    font-weight: bolder;
+    font-size: 0.875em;
+    display: block;
+    letter-spacing: 1px;
+    line-height: 1.25;
+    text-transform: uppercase;
+    margin-bottom: 0.71428571em;
+    padding-bottom: math.div(5px, $small-font-size-px) + em;
+    border-bottom: 1px solid var(--gray-40);
+
+    & + .aid-form__definition {
+      margin-top: math.div(-5px, $small-font-size-px) + em;
+    }
+  }
+
+  .form-label + .aid-form__definition {
+    margin-top: math.div(-5px, $small-font-size-px) + em;
+  }
+}
+
+.line-item {
+  $line-item-font-size: 18px;
+
+  @include u-grid-nested-col-group;
+  margin-bottom: math.div(15px, $size-iv) + em;
+
+  @include heading-4;
+
+  &__sign {
+    display: inline-block;
+    margin-right: math.div(5px, $line-item-font-size) + em;
+    font-size: math.div($line-item-font-size, $size-iv) + em;
+  }
+
+  &__currency {
+    position: absolute;
+    right: math.div(88px, $size-iv) + em;
+  }
+
+  &__explanation {
+    display: block;
+    margin-top: math.div(5px, $line-item-font-size) + em;
+    font-size: math.div(14px, $line-item-font-size) + em;
+  }
+
+  &__title {
+    @include u-grid-column(7);
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(7);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(8);
+    }
+  }
+
+  &__value {
+    @include u-grid-column(5);
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(5);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(4);
+    }
+  }
+
+  &__amount {
+    float: right;
+  }
+
+  &--total {
+    margin-bottom: 0;
+  }
+
+  & + p {
+    margin-top: math.div(20px, $base-font-size-px) + em;
+  }
+}
+
+/* ==========================================================================
+      Review your first year offer
+      ========================================================================== */
+
+.review {
+  margin-top: math.div(45px, $base-font-size-px) + em;
+
+  &__wrapper {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-nested-col-group;
+    }
+
+    & + .criteria {
+      margin-top: math.div(30px, $base-font-size-px) + em;
+    }
+  }
+
+  &__intro {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(7);
+    }
+  }
+}
+
+.offer-part {
+  /*
+  padding-top, z-index, and background color need to be set here to make
+  sticky sidebars work correctly.
+  */
+  padding-top: math.div(45px, $base-font-size-px) + em;
+  z-index: 200;
+  background-color: #fff;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    @include u-grid-nested-col-group;
+    padding-bottom: math.div(30px, $base-font-size-px) + em;
+  }
+
+  &__intro {
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(12);
+    }
+  }
+
+  &__intro-wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  &__intro-content {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(12);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(6);
+    }
+
+    @include respond-to-min($bp-lg-min) {
+      @include u-grid-column(7);
+    }
+  }
+
+  &__heading {
+    @include heading-3;
+  }
+
+  &__form-wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+  }
+
+  &__summary-wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+      padding-top: math.div(30px, $base-font-size-px) + em;
+      margin-top: 0;
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(4);
+      @include u-grid-push(1);
+
+      &.is__stuck {
+        @include u-grid-column(4);
+        @include u-grid-push(7);
+        margin-left: -20px;
+      }
+
+      &.is__stuck.is__bottomed {
+        margin-left: 0;
+      }
+    }
+
+    .line-item {
+      @include respond-to-range($bp-sm-min, $bp-inline-sign-min) {
+        font-size: math.div(16px, $base-font-size-px) + em;
+      }
+    }
+  }
+
+  &__terms {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(12);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(15, 24);
+      margin-top: math.div(-15px, $base-font-size-px) + em;
+    }
+  }
+
+  &__term {
+    margin-top: math.div(15px, $base-font-size-px) + em;
+    margin-bottom: math.div(5px, $base-font-size-px) + em;
+  }
+
+  &.cost-to-attend {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+  }
+}
+
+.contributions,
+.loans,
+.future {
+  .column-well {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .aid-form__summary {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      padding-top: math.div(30px, $base-font-size-px) + em;
+      padding-bottom: math.div(30px, $base-font-size-px) + em;
+    }
+  }
+}
+
+.contributions,
+.loans {
+  .big-picture {
+    display: none;
+    padding-bottom: 0;
+    background-color: transparent;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      display: block;
+    }
+  }
+
+  .column-well::after {
+    background-color: var(--gold-20);
+  }
+}
+
+.future {
+  .aid-form__summary.debt-summary {
+    margin-top: 0;
+    background-color: var(--gold-40);
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      padding-bottom: 0;
+    }
+  }
+
+  .aid-form__summary.big-picture {
+    background-color: var(--gold-20);
+  }
+
+  .column-well::after {
+    background-color: var(--gold-40);
+  }
+}
+
+.loans {
+  &__line {
+    border-top: 1px dotted var(--gray-40);
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
+    background-color: transparent;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-top: math.div(15px, $base-font-size-px) + em;
+    }
+  }
+}
+
+.private-loans {
+  border-bottom: 1px dotted var(--gray-40);
+  margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+  &__heading {
+    border-bottom: 1px solid var(--gray-40);
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
+    position: relative;
+  }
+
+  &__heading-text {
+    @include heading-4;
+  }
+
+  &__remove-btn,
+  &__add-btn {
+    border-bottom: none;
+    font-size: 1em;
+
+    &:hover,
+    &:visited,
+    &:active {
+      border-bottom: none;
+    }
+  }
+
+  &__remove-btn {
+    position: absolute;
+    top: math.div(-8px, $base-font-size-px) + em;
+    right: 0;
+    font-size: 1em;
+  }
+
+  &__add-btn {
+    margin-top: math.div(20px, $base-font-size-px) + em;
+    margin-right: 0;
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+    margin-left: 0;
+    text-align: left;
+  }
+
+  &__loan + &__loan {
+    margin-top: math.div(45px, $base-font-size-px) + em;
+  }
+}
+
+.debt-summary {
+  .aid-form__summary-heading {
+    @include heading-3;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include heading-5;
+    }
+  }
+}
+
+/* ==========================================================================
+      Evaluating your offer
+      ========================================================================== */
+
+.evaluate {
+  margin-top: math.div(45px, $base-font-size-px) + em;
+
+  &__wrapper {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-nested-col-group;
+    }
+
+    & + .criteria {
+      margin-top: math.div(30px, $base-font-size-px) + em;
+    }
+  }
+
+  &__intro {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(7);
+    }
+  }
+}
+
+.criteria {
+  margin-top: math.div(30px, $base-font-size-px) + em;
+
+  @include respond-to-min($bp-graph-cols-min) {
+    margin-top: math.div(45px, $base-font-size-px) + em;
+  }
+
+  &__heading {
+    @include heading-3;
+  }
+
+  &__wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+    }
+
+    &::after {
+      @include respond-to-range($bp-sm-min, $bp-graph-cols-min - 1) {
+        display: none;
+      }
+    }
+  }
+
+  &__intro {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-graph-cols-min) {
+      @include u-grid-column(6);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(5);
+    }
+  }
+
+  & + & {
+    padding-top: math.div(15px, $base-font-size-px) + em;
+    border-top: 1px solid var(--gray-20);
+
+    @include respond-to-min($bp-graph-cols-min) {
+      padding-top: 0;
+      border-top: none;
+    }
+  }
+}
+
+.metric {
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    @include u-grid-column(10);
+  }
+
+  @include respond-to-range($bp-sm-min, $bp-graph-cols-min - 1) {
+    padding-bottom: 0;
+  }
+
+  @include respond-to-min($bp-graph-cols-min) {
+    @include u-grid-column(6);
+    padding-top: math.div(30px, $base-font-size-px) + em;
+  }
+
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    @include u-grid-column(4);
+    @include u-grid-push(2);
+  }
+
+  &__heading {
+    @include heading-4;
+  }
+
+  &__explanation {
+    margin-bottom: math.div(15px, 14px) + em;
+    font-size: math.div(14px, $base-font-size-px) + em;
+  }
+
+  &__notification {
+    margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+    .cf-notification__text,
+    .cf-notification__icon {
+      display: none;
+    }
+
+    &--no-you,
+    &--no-average,
+    &--no-data {
+      padding-left: 11px;
+    }
+
+    &--better .metric__notification-text-better,
+    &--same .metric__notification-text-same,
+    &--worse .metric__notification-text-worse,
+    &--no-you .metric__notification-text-no-you,
+    &--no-average .metric__notification-text-no-average,
+    &--no-data .metric__notification-text-no-data {
+      display: block;
+    }
+
+    &.cf-notification .cf-notification__icon {
+      display: inline-block;
+    }
+
+    p + .cf-notification__text {
+      margin-top: 0;
+    }
+  }
+
+  &__link {
+    border-top: 1px solid var(--gray-40);
+    margin-top: 30px;
+    padding-top: 30px;
+  }
+
+  &.column-well--not-stacked {
+    @include respond-to-range($bp-sm-min, $bp-graph-cols-min - 1) {
+      padding-top: 0;
+    }
+  }
+
+  &.column-well--not-stacked::after {
+    @include respond-to-range($bp-sm-min, $bp-graph-cols-min - 1) {
+      display: none;
+    }
+  }
+
+  .column-well__content {
+    @include respond-to-range($bp-sm-min, $bp-graph-cols-min - 1) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+.salary-and-debt {
+  $salary-and-debt-font-size: 18px;
+
+  &__projection {
+    @include u-grid-nested-col-group;
+    max-width: math.div(380px, $base-font-size-px) + em;
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+  }
+
+  &__projection-name {
+    @include u-grid-column(7);
+    @include heading-4;
+  }
+
+  &__projection-value {
+    @include u-grid-column(5);
+    @include heading-4;
+    text-align: right;
+  }
+
+  &__explanation {
+    display: block;
+    margin-top: math.div(5px, $salary-and-debt-font-size) + em;
+    font-size: math.div(14px, $salary-and-debt-font-size) + em;
+  }
+
+  &__payment-term {
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+
+    label {
+      // Bug in Chrome and Safari
+      // Radio button w/ margin-left: 0 in an overflow: hidden container
+      // has clipping on the left side. Fix: set a tiny margin-left value.
+      margin-left: 1px;
+      line-height: 2;
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        margin-left: 0;
+      }
+
+      @include respond-to-min($bp-lg-min) {
+        line-height: normal;
+      }
+    }
+  }
+}
+
+.debt-burden {
+  &__projection {
+    @include u-grid-nested-col-group;
+    max-width: math.div(380px, $base-font-size-px) + em;
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+  }
+
+  &__projection-name {
+    @include u-grid-column(7);
+  }
+
+  &__projection-value {
+    @include u-grid-column(5);
+    text-align: right;
+  }
+
+  &__payment-term {
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+
+    label {
+      // Bug in Chrome and Safari
+      // Radio button w/ margin-left: 0 in an overflow: hidden container
+      // has clipping on the left side. Fix: set a tiny margin-left value.
+      margin-left: 1px;
+      line-height: 2;
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        margin-left: 0;
+      }
+
+      @include respond-to-min($bp-lg-min) {
+        line-height: normal;
+      }
+    }
+  }
+}
+
+.debt-equation {
+  max-width: math.div(380px, $base-font-size-px) + em;
+  padding-top: math.div(10px, $base-font-size-px) + em;
+  margin-bottom: math.div(30px, $base-font-size-px) + em;
+
+  &__part {
+    float: left;
+  }
+
+  &__part--loan {
+    width: 25%;
+  }
+
+  &__part--income {
+    width: 25%;
+  }
+
+  &__part--percent {
+    width: 20%;
+  }
+
+  &__symbol {
+    $symbol-font-size-px: 36px;
+    margin-top: math.div(3px, $symbol-font-size-px) + em;
+    width: 15%;
+    float: left;
+    font-size: $symbol-font-size-px;
+    text-align: center;
+  }
+
+  &__number {
+    font-size: math.div(18px, $base-font-size-px) + em;
+  }
+}
+
+.bar-graph {
+  $bar-graph-container-max-width: 380px;
+  $bar-graph-width: 45px;
+  $bar-graph-width-sm: 25px;
+  $bar-graph-width-xs: 17px;
+  $bar-graph-height: 130px;
+  $bar-graph-label-width: 135px;
+  $bar-graph-value-min-width: 95px;
+  $bar-graph-you-font-size: 18px;
+  $bar-graph-average-font-size: 16px;
+  $bar-graph-line-overhang: 6px;
+  $bar-graph-top-label-width: 70px;
+  $bar-graph-top-label-height: 20px;
+
+  // A little cheat to make the line look vertically centered
+  $bar-graph-line-top-cheat: 3px;
+
+  height: $bar-graph-height;
+  max-width: math.div($bar-graph-container-max-width, $base-font-size-px) + em;
+  margin-bottom: math.div(10px, $base-font-size-px) + em;
+  position: relative;
+
+  &__point {
+    width: 100%;
+    position: absolute;
+  }
+
+  &__label,
+  &__value {
+    position: absolute;
+    top: 0;
+    background-color: var(--white);
+
+    @include respond-to-min($bp-graph-cols-min) {
+      background-color: var(--gray-5);
+    }
+  }
+
+  &__label {
+    width: $bar-graph-label-width;
+    left: 0;
+    z-index: 10;
+  }
+
+  &__value {
+    min-width: $bar-graph-value-min-width;
+    padding-left: 8px;
+    right: 0;
+  }
+
+  &__line {
+    width: 100%;
+    border-top-width: 3px;
+    position: absolute;
+  }
+
+  &__number {
+    display: inline-block;
+  }
+
+  &__bar {
+    width: $bar-graph-width;
+    height: $bar-graph-height;
+    margin-left: -$bar-graph-line-overhang;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    background-color: var(--gray-10);
+
+    @include respond-to-range($bp-graph-cols-min, $bp-med-max) {
+      width: $bar-graph-width-sm;
+      border-right: math.div(($bar-graph-width - $bar-graph-width-sm), 2) solid
+        var(--gray-5);
+      border-left: math.div(($bar-graph-width - $bar-graph-width-sm), 2) solid
+        var(--gray-5);
+    }
+
+    // Graph bars need to get really skinny at some screen sizes
+    @include respond-to-range($bp-graph-cols-min, 759px) {
+      width: $bar-graph-width-xs;
+      border-right: math.div(($bar-graph-width - $bar-graph-width-xs), 2) solid
+        var(--gray-5);
+      border-left: math.div(($bar-graph-width - $bar-graph-width-xs), 2) solid
+        var(--gray-5);
+    }
+
+    @include respond-to-range(901px, 929px) {
+      width: $bar-graph-width-xs;
+      border-right: math.div(($bar-graph-width - $bar-graph-width-xs), 2) solid
+        var(--gray-5);
+      border-left: math.div(($bar-graph-width - $bar-graph-width-xs), 2) solid
+        var(--gray-5);
+    }
+  }
+
+  &__top-label {
+    width: $bar-graph-top-label-width;
+    margin-left: -($bar-graph-top-label-width - $bar-graph-width) / 2 - $bar-graph-line-overhang;
+    position: absolute;
+    top: math.div(-$bar-graph-top-label-height, $small-font-size-px) + em;
+    left: 50%;
+    z-index: 100;
+    font-size: math.div($small-font-size-px, $base-font-size-px) + em;
+    text-align: center;
+  }
+
+  &__point--you {
+    font-size: math.div($bar-graph-you-font-size, $base-font-size-px) + em;
+
+    .bar-graph__line {
+      border-top-color: var(--black);
+      border-top-style: solid;
+      top: math.div(($bar-graph-you-font-size + $bar-graph-line-top-cheat), 2) +
+        px;
+    }
+  }
+
+  &__point--average {
+    color: var(--gray-dark);
+
+    .bar-graph__line {
+      border-top-color: var(--gray-dark);
+      border-top-style: dotted;
+      top: math.div(
+          ($bar-graph-average-font-size + $bar-graph-line-top-cheat),
+          2
+        ) + px;
+    }
+  }
+
+  &--equal &__point--average {
+    display: none;
+  }
+
+  &--missing-you {
+    display: none;
+  }
+
+  &--missing-average &__point--average {
+    display: none;
+  }
+
+  &--high-point &__top-label {
+    display: none;
+  }
+
+  // Median salary and loan default graphs need room above for the top-label
+  &[data-metric='medianSalary'],
+  &[data-metric='defaultRate'] {
+    border-top: $bar-graph-top-label-height solid transparent;
+  }
+}
+
+#content__expenses-nat-salary {
+  display: none;
+}
+
+/* ==========================================================================
+      Estimated monthly expenses
+      ========================================================================== */
+
+.debt-burden .column-well__content {
+  @include respond-to-min($bp-graph-cols-min) {
+    position: absolute;
+  }
+}
+
+.estimated-expenses {
+  padding-top: math.div(10px, $base-font-size-px) + em;
+  padding-bottom: math.div(15px, $base-font-size-px) + em;
+  border-top: 1px solid var(--gray-40);
+  margin-top: math.div(30px, $base-font-size-px) + em;
+  margin-bottom: math.div(15px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    @include u-grid-column(10);
+    padding-bottom: 0;
+    border-top: 1px solid var(--gray-40);
+  }
+
+  @include respond-to-min($bp-graph-cols-min) {
+    @include u-grid-column(6);
+    padding-top: 0;
+    border-top: none;
+    margin-top: math.div(15px, $base-font-size-px) + em;
+    margin-bottom: math.div(45px, $base-font-size-px) + em;
+  }
+
+  &__region {
+    margin-bottom: math.div(20px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+      border-width: 0;
+    }
+  }
+
+  .aid-form {
+    margin-top: 0;
+
+    &__heading {
+      @include respond-to-range($bp-sm-min, $bp-graph-cols-min) {
+        border-bottom: none;
+      }
+    }
+
+    .form-label__text-wrapper {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        @include u-grid-column(12);
+      }
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        @include u-grid-column(12, 24);
+      }
+    }
+
+    &__input-wrapper {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        @include u-grid-column(12);
+      }
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        @include u-grid-column(12, 24);
+      }
+    }
+
+    &__sign {
+      @include u-grid-column(3, 24);
+      border-width: 0;
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        @include u-grid-column(3);
+        border-width: 0;
+      }
+    }
+
+    &__input {
+      max-width: none;
+      width: 80%;
+
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        width: 85%;
+      }
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        width: 75%;
+      }
+    }
+
+    &__summary {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        padding-left: 0;
+        margin-top: math.div(30px, $base-font-size-px) + em;
+        margin-left: 0;
+        background-color: transparent;
+      }
+
+      // Tablet only.
+      @include respond-to-range($bp-sm-min, $bp-sm-max) {
+        padding-right: 0;
+      }
+
+      @include respond-to-min($bp-lg-min) {
+        padding-left: math.div(40px, $base-font-size-px) + em;
+      }
+    }
+
+    &__summary-heading {
+      @include heading-4;
+      margin-bottom: math.div(10px, $size-iv) + em;
+      text-transform: none;
+    }
+  }
+
+  .line-item {
+    &__title {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        @include u-grid-column(8);
+      }
+    }
+
+    &__value {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        @include u-grid-column(4);
+      }
+    }
+
+    &__sign {
+      position: absolute;
+      right: math.div(100px, $base-font-size-px) + em;
+    }
+  }
+}
+
+.recalculating-mobile {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 15px;
+  background-color: var(--gold-20);
+  font-size: math.div(14px, $base-font-size-px) + em;
+
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    top: -100em;
+  }
+}
+
+/* ==========================================================================
+      Continue to step 2, and the big question
+      ========================================================================== */
+
+.continue,
+.question {
+  padding-top: math.div(25px, $base-font-size-px) + em;
+  padding-bottom: math.div(5px, $base-font-size-px) + em;
+  margin-top: math.div(30px, $base-font-size-px) + em;
+  background-color: var(--teal-20);
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    padding-top: math.div(30px, $base-font-size-px) + em;
+    padding-bottom: math.div(15px, $base-font-size-px) + em;
+    margin-top: math.div(45px, $base-font-size-px) + em;
+  }
+
+  &__wrapper {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  &__content {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(8);
+    }
+  }
+}
+
+.continue__controls,
+.question__answers {
+  margin-top: math.div(20px, $base-font-size-px) + em;
+  margin-bottom: math.div(20px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+  }
+}
+
+/* ==========================================================================
+      You have options
+      ========================================================================== */
+
+.get-options {
+  margin-top: math.div(45px, $base-font-size-px) + em;
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    padding-bottom: math.div(30px, $base-font-size-px) + em;
+  }
+
+  &__wrapper {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  &__wrapper + &__wrapper {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  &__intro {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(8);
+    }
+  }
+
+  .step__intro {
+    margin-bottom: 0;
+  }
+
+  .step__intro + p {
+    margin-top: math.div(20px, $base-font-size-px) + em;
+  }
+
+  & + .content__line {
+    display: none;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      display: block;
+    }
+  }
+
+  &--settlement {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(8);
+    }
+  }
+
+  &--sidebar {
+    margin-top: math.div(60px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(6);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(4);
+    }
+  }
+}
+
+.option {
+  margin-top: math.div(45px, $base-font-size-px) + em;
+
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    @include u-grid-column(4);
+  }
+
+  &--maximize-grants,
+  &--reduce-costs,
+  &--different-program,
+  &--transfer-credits,
+  &--work-while-studying,
+  &--explore-schools {
+    background-position: center 30px;
+    background-size: 150px;
+    background-repeat: no-repeat;
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      background-position: center 60px;
+    }
+  }
+
+  &--maximize-grants {
+    background-image: url('/static/apps/paying-for-college/img/maximize-grants_150.png');
+  }
+
+  &--reduce-costs {
+    background-image: url('/static/apps/paying-for-college/img/reduce-costs_150.png');
+  }
+
+  &--different-program {
+    background-image: url('/static/apps/paying-for-college/img/different-program_150.png');
+  }
+
+  &--transfer-credits {
+    background-image: url('/static/apps/paying-for-college/img/transfer-credits_150.png');
+  }
+
+  &--explore-schools {
+    background-image: url('/static/apps/paying-for-college/img/explore-schools_150.png');
+  }
+
+  &--work-while-studying {
+    background-image: url('/static/apps/paying-for-college/img/work-while-studying_150.png');
+  }
+
+  @media (min-resolution: 192dpi) {
+    &--maximize-grants {
+      background-image: url('/static/apps/paying-for-college/img/maximize-grants_300.png');
+    }
+
+    &--reduce-costs {
+      background-image: url('/static/apps/paying-for-college/img/reduce-costs_300.png');
+    }
+
+    &--different-program {
+      background-image: url('/static/apps/paying-for-college/img/different-program_300.png');
+    }
+
+    &--transfer-credits {
+      background-image: url('/static/apps/paying-for-college/img/transfer-credits_300.png');
+    }
+
+    &--explore-schools {
+      background-image: url('/static/apps/paying-for-college/img/explore-schools_300.png');
+    }
+
+    &--work-while-studying {
+      background-image: url('/static/apps/paying-for-college/img/work-while-studying_300.png');
+    }
+  }
+
+  // Add padding on top of the heading for the 150px illustration
+  // X-small and small screens: 150px + 30px padding above and below the image
+  // Meidum and larger screens: 150px + 60px padding above and below the image
+  &__heading {
+    padding-top: math.div(210px, $size-iv) + em;
+
+    @include heading-4;
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      padding-top: math.div(270px, $size-iv) + em;
+    }
+  }
+
+  &--take-action-header {
+    @include heading-3;
+  }
+
+  // Top borders on all but the first option on small screens and only the second row of options on larger screens
+  & + & &__heading {
+    border-top: 1px solid var(--gray-40);
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      border-top: none;
+    }
+  }
+
+  & + & + & &__heading {
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      border-top: 1px solid var(--gray-40);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      border-top: none;
+    }
+  }
+
+  & + & + & + & &__heading {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      border-top: 1px solid var(--gray-40);
+    }
+  }
+
+  // Settlement school modifications
+  &--settlement {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(1, 2);
+    }
+
+    // Top borders on all but the first option on small screens and only the second row of options on larger screens
+    & + & .option__heading {
+      border-top: 1px solid var(--gray-40);
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        border-top: none;
+      }
+    }
+
+    & + & + & .option__heading {
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        border-top: 1px solid var(--gray-40);
+      }
+    }
+
+    & + & + & + & .option__heading {
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        border-top: 1px solid var(--gray-40);
+      }
+    }
+  }
+}
+
+/* ==========================================================================
+      Next steps
+      ========================================================================== */
+
+.next-steps {
+  padding-bottom: math.div(30px, $base-font-size-px) + em;
+
+  &__wrapper {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      margin-top: math.div(45px, $base-font-size-px) + em;
+
+      @include u-grid-nested-col-group;
+    }
+  }
+
+  &__intro {
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(10);
+    }
+
+    @include respond-to-min($bp-xl-min) {
+      @include u-grid-column(7);
+    }
+  }
+
+  &__list {
+    margin-top: math.div(45px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-nested-col-group;
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      margin-top: math.div(60px, $base-font-size-px) + em;
+    }
+  }
+
+  &__list-item {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-top: 0;
+
+      @include u-grid-column(9);
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      @include u-grid-column(4);
+    }
+  }
+
+  &__list-intro {
+    @include heading-4;
+  }
+
+  &__controls {
+    margin-top: math.div(20px, $base-font-size-px) + em;
+    margin-left: -2.5em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin-left: 0;
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      margin-top: math.div(30px, $base-font-size-px) + em;
+    }
+  }
+
+  .content__line {
+    display: none;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      display: block;
+    }
+  }
+}
+
+/* ==========================================================================
+      Scripted Elements
+      ========================================================================== */
+
+[data-multi_year='false'] {
+  display: none;
+}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/main.less b/cfgov/unprocessed/apps/paying-for-college/css/main.less
deleted file mode 100755
index ba9b321abc..0000000000
--- a/cfgov/unprocessed/apps/paying-for-college/css/main.less
+++ /dev/null
@@ -1,31 +0,0 @@
-/* ==========================================================================
-   paying-for-college
-   ========================================================================== */
-
-// This is your project's main Less file.
-// Project-specific Less rules go after the imports.
-
-// Import Design System components.
-@import (reference) '../../../css/main.less';
-
-// Import the Design System enhancements
-@import (less) 'cf-enhancements.less';
-
-// Import the disclosures.less file
-@import (less) 'disclosures.less';
-
-// Import the college-costs.less file
-@import (less) 'college-costs/vars.less';
-@import (less) 'college-costs/college-costs.less';
-@import (less) 'college-costs/charts.less';
-@import (less) 'college-costs/financial-item.less';
-@import (less) 'college-costs/nav.less';
-@import (less) 'college-costs/number-callout.less';
-@import (less) 'college-costs/search.less';
-@import (less) 'college-costs/state-based.less';
-@import (less) 'college-costs/stepper.less';
-@import (less) 'college-costs/tooltip.less';
-
-.respond-to-print( {
-  @import (less) 'print.css';
-});
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/main.scss b/cfgov/unprocessed/apps/paying-for-college/css/main.scss
new file mode 100644
index 0000000000..7082a0371e
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/main.scss
@@ -0,0 +1,28 @@
+/* ==========================================================================
+   paying-for-college
+   ========================================================================== */
+
+// This is your project's main Less file.
+// Project-specific Less rules go after the imports.
+
+// Import Design System components.
+@import '../../../css/main';
+
+// Import the Design System enhancements
+@import 'cf-enhancements';
+
+// Import the disclosures.scss file
+@import 'disclosures';
+
+// Import the college-costs.scss file
+@import 'college-costs/vars';
+@import 'college-costs/college-costs';
+@import 'college-costs/charts';
+@import 'college-costs/financial-item';
+@import 'college-costs/nav';
+@import 'college-costs/number-callout';
+@import 'college-costs/search';
+@import 'college-costs/state-based';
+@import 'college-costs/stepper';
+@import 'college-costs/tooltip';
+@import 'print';
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/print.css b/cfgov/unprocessed/apps/paying-for-college/css/print.css
deleted file mode 100644
index 44ded56c39..0000000000
--- a/cfgov/unprocessed/apps/paying-for-college/css/print.css
+++ /dev/null
@@ -1,230 +0,0 @@
-body {
-  font-family: 'Avenir Next', Arial, sans-serif;
-  color: #000 !important;
-}
-
-.header {
-  display: none;
-}
-
-#header {
-  display: none;
-}
-
-.share {
-  display: none;
-}
-
-#footer {
-  display: none;
-}
-
-.icon {
-  display: none;
-}
-
-.hero h1 {
-  font-weight: 600;
-  line-height: 1em;
-  letter-spacing: 0.5px;
-  font-family: 'Avenir Next', Arial, sans-serif;
-  margin-bottom: 45px;
-}
-
-.label {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-}
-
-.lead {
-  margin-bottom: 6px;
-}
-
-.uc {
-  text-transform: uppercase;
-  font-weight: 500;
-}
-
-a,
-.lnk {
-  border-bottom: 1px dotted #004d6b;
-  text-decoration: none;
-  color: #3a7188;
-  font-weight: 500;
-}
-
-a.ec,
-a.ec-blk {
-  font-weight: 500;
-  text-decoration: none;
-  padding-left: 0;
-  background-repeat: no-repeat;
-  background-position-x: 0;
-  background-position-y: 0;
-}
-
-a.collapse {
-  background-position-y: -14px;
-  color: #212121;
-}
-
-ul.m,
-ol.m {
-  line-height: 18px;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-  font-weight: normal;
-  color: #000 !important;
-}
-
-h1 {
-  font-size: 28px;
-  font-weight: 400;
-  padding-top: 0.67em;
-}
-
-h2 {
-  text-transform: uppercase;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 0;
-  line-height: 18px;
-}
-
-h3 {
-  font-size: 1.5em;
-  font-weight: 500;
-  margin-bottom: 0.4em;
-  margin-top: 1.4em;
-  text-transform: none;
-  border-bottom: 3px solid #212121;
-}
-
-h4 {
-  font-size: 1em;
-  text-transform: none;
-  font-weight: 500;
-  margin-bottom: -0.5em;
-  margin-top: 1em;
-}
-
-p,
-p.body {
-  font-size: 12px;
-  font-family: Georgia, Arial, sans-serif;
-  margin-bottom: 10px;
-}
-
-th {
-  font-size: 1.5em;
-  line-height: 1em;
-  font-weight: 500;
-}
-
-td {
-  font-family: georgia, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  text-align: center;
-  font-weight: 500;
-  padding: 10px 0;
-}
-
-.lc {
-  text-transform: lowercase;
-}
-
-.nc {
-  text-transform: none;
-  font-weight: 500;
-  letter-spacing: 0;
-  margin-bottom: -0.3em;
-}
-
-.s {
-  font-weight: normal !important;
-  font-style: italic;
-}
-
-.ss {
-  font-family: 'Avenir Next', Arial, sans-serif;
-}
-
-table {
-  border: 0;
-  border-collapse: separate;
-  border-spacing: 18px 0;
-  padding-bottom: 20px;
-}
-
-td,
-th {
-  vertical-align: top;
-  padding: 10px 0;
-  text-align: left;
-}
-
-.rh {
-  text-align: left;
-}
-
-.rh .icon {
-  top: 9px;
-}
-
-ol,
-ul {
-  padding: 0;
-  list-style: none;
-}
-
-ol li {
-  margin-bottom: 10px;
-  padding-left: 30px;
-  background-position-y: 2px;
-}
-
-/* Options Table */
-table th {
-  background: transparent;
-  color: #212121;
-  border: 0;
-  text-align: left;
-}
-
-table td {
-  border: 0;
-}
-
-/* Modals */
-.modal {
-  display: none;
-}
-
-/* Print Specific */
-
-.bullet {
-  float: left;
-  display: inline-block;
-  height: 25px;
-  width: 25px;
-  text-align: center;
-  line-height: 26px;
-  font-size: 1.5em;
-  border-radius: 100%;
-  margin-right: 5px;
-  font-weight: 600;
-  margin-top: -6px;
-}
-
-@page {
-  margin: 0.5cm;
-}
diff --git a/cfgov/unprocessed/apps/paying-for-college/css/print.scss b/cfgov/unprocessed/apps/paying-for-college/css/print.scss
new file mode 100644
index 0000000000..f315a00293
--- /dev/null
+++ b/cfgov/unprocessed/apps/paying-for-college/css/print.scss
@@ -0,0 +1,232 @@
+@include respond-to-print {
+  body {
+    font-family: 'Avenir Next', Arial, sans-serif;
+    color: #000 !important;
+  }
+
+  .header {
+    display: none;
+  }
+
+  #header {
+    display: none;
+  }
+
+  .share {
+    display: none;
+  }
+
+  #footer {
+    display: none;
+  }
+
+  .icon {
+    display: none;
+  }
+
+  .hero h1 {
+    font-weight: 600;
+    line-height: 1em;
+    letter-spacing: 0.5px;
+    font-family: 'Avenir Next', Arial, sans-serif;
+    margin-bottom: 45px;
+  }
+
+  .label {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 400;
+  }
+
+  .lead {
+    margin-bottom: 6px;
+  }
+
+  .uc {
+    text-transform: uppercase;
+    font-weight: 500;
+  }
+
+  a,
+  .lnk {
+    border-bottom: 1px dotted #004d6b;
+    text-decoration: none;
+    color: #3a7188;
+    font-weight: 500;
+  }
+
+  a.ec,
+  a.ec-blk {
+    font-weight: 500;
+    text-decoration: none;
+    padding-left: 0;
+    background-repeat: no-repeat;
+    background-position-x: 0;
+    background-position-y: 0;
+  }
+
+  a.collapse {
+    background-position-y: -14px;
+    color: #212121;
+  }
+
+  ul.m,
+  ol.m {
+    line-height: 18px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-weight: normal;
+    color: #000 !important;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: 400;
+    padding-top: 0.67em;
+  }
+
+  h2 {
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 0;
+    line-height: 18px;
+  }
+
+  h3 {
+    font-size: 1.5em;
+    font-weight: 500;
+    margin-bottom: 0.4em;
+    margin-top: 1.4em;
+    text-transform: none;
+    border-bottom: 3px solid #212121;
+  }
+
+  h4 {
+    font-size: 1em;
+    text-transform: none;
+    font-weight: 500;
+    margin-bottom: -0.5em;
+    margin-top: 1em;
+  }
+
+  p,
+  p.body {
+    font-size: 12px;
+    font-family: Georgia, Arial, sans-serif;
+    margin-bottom: 10px;
+  }
+
+  th {
+    font-size: 1.5em;
+    line-height: 1em;
+    font-weight: 500;
+  }
+
+  td {
+    font-family: georgia, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+    font-weight: 500;
+    padding: 10px 0;
+  }
+
+  .lc {
+    text-transform: lowercase;
+  }
+
+  .nc {
+    text-transform: none;
+    font-weight: 500;
+    letter-spacing: 0;
+    margin-bottom: -0.3em;
+  }
+
+  .s {
+    font-weight: normal !important;
+    font-style: italic;
+  }
+
+  .ss {
+    font-family: 'Avenir Next', Arial, sans-serif;
+  }
+
+  table {
+    border: 0;
+    border-collapse: separate;
+    border-spacing: 18px 0;
+    padding-bottom: 20px;
+  }
+
+  td,
+  th {
+    vertical-align: top;
+    padding: 10px 0;
+    text-align: left;
+  }
+
+  .rh {
+    text-align: left;
+  }
+
+  .rh .icon {
+    top: 9px;
+  }
+
+  ol,
+  ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  ol li {
+    margin-bottom: 10px;
+    padding-left: 30px;
+    background-position-y: 2px;
+  }
+
+  /* Options Table */
+  table th {
+    background: transparent;
+    color: #212121;
+    border: 0;
+    text-align: left;
+  }
+
+  table td {
+    border: 0;
+  }
+
+  /* Modals */
+  .modal {
+    display: none;
+  }
+
+  /* Print Specific */
+
+  .bullet {
+    float: left;
+    display: inline-block;
+    height: 25px;
+    width: 25px;
+    text-align: center;
+    line-height: 26px;
+    font-size: 1.5em;
+    border-radius: 100%;
+    margin-right: 5px;
+    font-weight: 600;
+    margin-top: -6px;
+  }
+
+  @page {
+    margin: 0.5cm;
+  }
+}
diff --git a/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/js-tokens-4.0.0.tgz b/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/js-tokens-4.0.0.tgz
new file mode 100644
index 0000000000..5a06ecbe8b
Binary files /dev/null and b/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/js-tokens-4.0.0.tgz differ
diff --git a/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/loose-envify-1.4.0.tgz b/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/loose-envify-1.4.0.tgz
new file mode 100644
index 0000000000..cc1d1e4151
Binary files /dev/null and b/cfgov/unprocessed/apps/paying-for-college/npm-packages-offline-cache/loose-envify-1.4.0.tgz differ
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less b/cfgov/unprocessed/apps/prepaid-agreements/css/main.scss
similarity index 54%
rename from cfgov/unprocessed/apps/prepaid-agreements/css/main.less
rename to cfgov/unprocessed/apps/prepaid-agreements/css/main.scss
index 6928982cbf..655051224c 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/main.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/main.scss
@@ -1,6 +1,7 @@
-@import (reference) '../../../css/main.less';
-@import (less) './search.less';
-@import (less) './search-bar.less';
+@use 'sass:math';
+@import '../../../css/main';
+@import './search';
+@import './search-bar';
 
 .u-readable-width {
   // Magic number: matches max-width for content set in cf-layout
@@ -23,16 +24,22 @@
     font-weight: normal;
     text-transform: none;
     font-size: inherit;
-    .heading-4();
-    margin-bottom: unit(@grid_gutter-width / 6 / @base-font-size-px, em);
+
+    @include heading-4;
+    margin-bottom: math.div(math.div($grid-gutter-width, 6), $base-font-size-px) +
+      em;
 
     &:last-of-type {
-      margin-bottom: unit(@grid_gutter-width / 6 / @base-font-size-px, em);
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 6),
+          $base-font-size-px
+        ) + em;
     }
   }
 
   dd + dt {
-    margin-top: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
+    margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
   }
 }
 
@@ -45,14 +52,15 @@
 
   .filters {
     &__applied {
-      padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+      padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
     }
     .o-multiselect__choices {
       display: none;
     }
   }
 
-  .respond-to-min(@bp-lg-min, {
+  @include respond-to-min($bp-lg-min) {
     .content__sidebar {
       width: 33% !important;
     }
@@ -60,13 +68,16 @@
     .content__main {
       width: 67% !important;
     }
-  });
+  }
 
   .search__wrapper {
     label.h2 {
       display: block;
       max-width: none;
-      margin-bottom: unit(@grid_gutter-width * 2/3 / @base-font-size-px, em);
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 1.5),
+          $base-font-size-px
+        ) + em;
     }
   }
 
@@ -85,18 +96,22 @@
   }
 
   .database-disclaimer {
-    padding: unit(@grid_gutter-width / @base-font-size-px, em);
+    padding: math.div($grid-gutter-width, $base-font-size-px) + em;
     padding-bottom: 0;
   }
 }
 
 .prepaid-agreements-detail {
   dt h2 {
-    .h4();
-    margin-bottom: unit(@grid_gutter-width / 6 / @base-font-size-px, em);
+    @include h4;
+    margin-bottom: math.div(math.div($grid-gutter-width, 6), $base-font-size-px) +
+      em;
   }
 
   dd {
-    margin-bottom: unit(@grid_gutter-width * 2/3 / @base-font-size-px, em);
+    margin-bottom: math.div(
+        math.div($grid-gutter-width, 1.5),
+        $base-font-size-px
+      ) + em;
   }
 }
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.scss
similarity index 66%
rename from cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less
rename to cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.scss
index 9398683185..f7dd4321fa 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search-bar.scss
@@ -1,5 +1,7 @@
+@use 'sass:math';
+
 // The code is borrowed, with some modifications, from
-// ccdb5-ui's App.less, SearchBar.less, and select.less
+// ccdb5-ui's App.scss, SearchBar.scss, and select.scss
 
 .layout-row {
   display: flex;
@@ -26,15 +28,16 @@ button.a-btn.flex-fixed {
 }
 
 // Tablet and below.
-.respond-to-max(@bp-sm-max, {
+@include respond-to-max($bp-sm-max) {
   .a-select {
-    margin-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
     width: 100%;
   }
-});
+}
 
 // select
-@select-height: @size-ii;
+$select-height: $size-ii;
 
 .a-select {
   border: 1px solid var(--gray-40);
@@ -45,11 +48,11 @@ button.a-btn.flex-fixed {
   justify-content: center;
 
   select {
-    padding: unit(4px / @base-font-size-px, em)
-      unit(6px / @base-font-size-px, em);
+    padding: (math.div(4px, $base-font-size-px) + em)
+      (math.div(6px, $base-font-size-px) + em);
 
     // Save room for the drop-arrow
-    padding-right: unit(@select-height * 1.1 / @base-font-size-px, em);
+    padding-right: math.div($select-height * 1.1, $base-font-size-px) + em;
     background-color: var(--gray);
     color: var(--white);
 
@@ -69,8 +72,8 @@ button.a-btn.flex-fixed {
   &::after {
     height: 100%;
     content: '\25BE';
-    width: unit(@select-height / @base-font-size-px, em);
-    line-height: unit(@select-height / @base-font-size-px, em);
+    width: math.div($select-height, $base-font-size-px) + em;
+    line-height: math.div($select-height, $base-font-size-px) + em;
     text-align: center;
     vertical-align: middle;
     background-image: none;
diff --git a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less b/cfgov/unprocessed/apps/prepaid-agreements/css/search.scss
similarity index 66%
rename from cfgov/unprocessed/apps/prepaid-agreements/css/search.less
rename to cfgov/unprocessed/apps/prepaid-agreements/css/search.scss
index 65b15927ce..42713100eb 100644
--- a/cfgov/unprocessed/apps/prepaid-agreements/css/search.less
+++ b/cfgov/unprocessed/apps/prepaid-agreements/css/search.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .search__wrapper {
   &.o-well {
     max-width: 100%;
@@ -63,8 +65,8 @@
     padding-top: 0;
   }
   .results__count {
-    padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em)
-      unit(@grid_gutter-width / 2 / @base-font-size-px, em) 0;
+    padding: (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) em)
+      (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em) 0;
     border-right: 1px solid var(--gray-40);
     border-bottom: 1px solid var(--gray-40);
     background-color: var(--green-20);
@@ -74,40 +76,43 @@
     }
   }
   .results__list {
-    padding: unit(@grid_gutter-width / @base-font-size-px, em)
-      unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    padding: (math.div($grid-gutter-width, $base-font-size-px) + em)
+      (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em);
     li {
       list-style-type: none;
     }
   }
   .results__item {
-    margin: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    margin: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
     & + .results__item {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       h4 {
-        padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
+        padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
         border-top: 1px solid var(--gray-40);
       }
     }
   }
   .results__paginator {
-    margin: 0 unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    padding: 0 unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    margin: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
+    padding: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
     max-width: 41.875rem;
   }
 }
 
 // Tablet and below.
-.respond-to-max(@bp-sm-max, {
+@include respond-to-max($bp-sm-max) {
   .search__results {
     .content__sidebar {
-      padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+      padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
     }
     .content__main {
-      margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
     }
     .results__count {
       border-left: 1px solid var(--gray-40);
     }
   }
-});
+}
diff --git a/cfgov/unprocessed/apps/regulations3k/css/main.less b/cfgov/unprocessed/apps/regulations3k/css/main.less
deleted file mode 100644
index 589f9b53bc..0000000000
--- a/cfgov/unprocessed/apps/regulations3k/css/main.less
+++ /dev/null
@@ -1,18 +0,0 @@
-/* ==========================================================================
-   Regulations 3000
-   Main Less file for Regulations pages
-   ========================================================================== */
-
-@import (reference) '../../../css/main.less';
-@import (less) './reg-listing.less';
-@import (less) './reg-landing-page.less';
-@import (less) './reg-navigation.less';
-@import (less) './reg-pagination.less';
-@import (less) './reg-search.less';
-@import (less) './reg-text.less';
-@import (less) './reg-inline-interpretations.less';
-@import (less) './reg-wayfinder.less';
-
-.section-nav {
-  .u-clearfix;
-}
diff --git a/cfgov/unprocessed/apps/regulations3k/css/main.scss b/cfgov/unprocessed/apps/regulations3k/css/main.scss
new file mode 100644
index 0000000000..b320271235
--- /dev/null
+++ b/cfgov/unprocessed/apps/regulations3k/css/main.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+   Regulations 3000
+   Main Less file for Regulations pages
+   ========================================================================== */
+
+@import '../../../css/main';
+@import './reg-listing';
+@import './reg-landing-page';
+@import './reg-navigation';
+@import './reg-pagination';
+@import './reg-search';
+@import './reg-text';
+@import './reg-inline-interpretations';
+@import './reg-wayfinder';
+
+.section-nav {
+  @include u-clearfix;
+}
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.less b/cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.scss
similarity index 59%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.scss
index c57a80998f..39dd273e69 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-inline-interpretations.scss
@@ -8,13 +8,16 @@
   max-width: 41.875rem;
 }
 
-.generateInterpLevel(6);
-
 // Generate six indentation levels for inline interpretations
-.generateInterpLevel(@n, @i: 1) when (@i =< @n) {
-  .level-@{i} + .inline-interpretation {
-    margin-left: (@i * 2rem);
-    max-width: (41.875rem - (@i*2));
+@mixin u-generate-interp-level($n, $i: 1) {
+  @if $i <= $n {
+    .level-#{$i} + .inline-interpretation {
+      margin-left: ($i * 2rem);
+      max-width: (41.875rem - ($i * 2));
+    }
+
+    @include u-generate-interp-level($n, ($i + 1));
   }
-  .generateInterpLevel(@n, (@i + 1));
 }
+
+@include u-generate-interp-level(6);
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less b/cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.scss
similarity index 100%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-landing-page.scss
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less b/cfgov/unprocessed/apps/regulations3k/css/reg-listing.scss
similarity index 60%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-listing.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-listing.scss
index c8813bfd42..5de1467ddd 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-listing.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-listing.scss
@@ -1,29 +1,31 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Regulations 3000
    Regulations listing on landing page
    ========================================================================== */
 
 #regulations-listing {
-  margin: unit(45px / @base-font-size-px, em) 0
-    unit(60px / @base-font-size-px, em);
+  margin: (math.div(45px, $base-font-size-px) + em) 0
+    (math.div(60px, $base-font-size-px) + em);
 
   > ul {
-    margin-bottom: unit(30px / @base-font-size-px, em);
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
     padding-left: 0;
 
     > li {
       border-bottom: 1px solid var(--gray);
       list-style-type: none;
-      padding-bottom: unit(15px / @base-font-size-px, em);
+      padding-bottom: math.div(15px, $base-font-size-px) + em;
 
       &:first-child {
         border-top: 1px solid var(--gray);
-        padding-top: unit(15px / @base-font-size-px, em);
+        padding-top: math.div(15px, $base-font-size-px) + em;
       }
     }
 
     .new-version {
-      font-size: unit(@size-v / @base-font-size-px, em);
+      font-size: math.div($size-v, $base-font-size-px) + em;
       font-weight: normal;
       list-style-type: square;
     }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.scss
similarity index 75%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-navigation.scss
index d670368f1a..5d9ba0ba71 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-navigation.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Regulations 3000
    Custom eRegs secondary navigation styles
@@ -12,13 +14,13 @@
   //       (possibly shared with expandables).
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     background-color: var(--gray-5);
-    margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
 
     // Add drop-shadow.
-    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
-  });
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 20%);
+  }
 
   // TODO - this will be updated to data-open='true' in newer expandables.
   .o-expandable__target--expanded {
@@ -37,19 +39,20 @@
 .o-regs3k-sections {
   .o-expandable__header {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       padding: 0.9375em 0;
-    });
+    }
     border: 0;
   }
 
   .o-expandable__content {
     padding: 0;
+
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       background: none;
       border: none;
-    });
+    }
     &::before {
       border: 0;
       padding: 0;
@@ -58,11 +61,11 @@
 
   &::before {
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       border-bottom: 1px solid var(--gray-40);
       content: ' ';
       display: block;
-    });
+    }
   }
 }
 
@@ -74,21 +77,21 @@
   }
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-    padding: unit( 10px / @base-font-size-px, em )
-    unit( 15px / @base-font-size-px, em );
-  });
+  @include respond-to-max($bp-sm-max) {
+    padding: (math.div(10px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em);
+  }
 
   .o-regs3k-navigation__header {
     display: none;
 
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       display: flex;
-    });
+    }
 
-    padding: unit(10px / @base-font-size-px, em) 0
-      unit(5px / @base-font-size-px, em);
+    padding: (math.div(10px, $base-font-size-px) + em) 0
+      math.div(5px, $base-font-size-px) + em;
     .o-expandable__label {
       text-transform: uppercase;
     }
@@ -104,7 +107,7 @@
   }
 
   &--parent {
-    .heading-4();
+    @include heading-4;
     font-size: 1em;
     font-weight: 300;
     margin-bottom: 0;
@@ -115,7 +118,7 @@
 // is stacked on top of the page's content
 .u-hide-on-stacked {
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     display: none;
-  });
+  }
 }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less b/cfgov/unprocessed/apps/regulations3k/css/reg-pagination.scss
similarity index 100%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-pagination.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-pagination.scss
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less b/cfgov/unprocessed/apps/regulations3k/css/reg-search.scss
similarity index 69%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-search.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-search.scss
index dce9df90c9..d64f7e7625 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-search.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-search.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Regulations 3000
    Regulations search
@@ -59,7 +61,7 @@
         border-bottom: none;
       }
       &__label {
-        .h4;
+        @include h4;
         margin-bottom: 0;
       }
     }
@@ -76,8 +78,8 @@
     padding-top: 0;
   }
   .results__count {
-    padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em)
-      unit(@grid_gutter-width / 2 / @base-font-size-px, em) 0;
+    padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em
+      math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em 0;
     border-right: 1px solid var(--gray-40);
     border-bottom: 1px solid var(--gray-40);
     background-color: var(--green-20);
@@ -87,52 +89,55 @@
     }
   }
   .results__list {
-    padding: unit(@grid_gutter-width / @base-font-size-px, em)
-      unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    padding: (math.div($grid-gutter-width, $base-font-size-px) + em)
+      (math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em);
 
     li {
       list-style-type: none;
     }
   }
   .results__item {
-    margin: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+    margin: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
 
     & + .results__item {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       h4 {
-        padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
+        padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
         border-top: 1px solid var(--gray-40);
       }
     }
   }
   .results__paginator {
-    margin: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    padding: 0 unit((@grid_gutter-width / 2) / @base-font-size-px, em);
+    margin: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
+    padding: 0 math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
     max-width: 41.875rem;
   }
 }
 
 // Tablet and below.
-.respond-to-max(@bp-sm-max, {
+@include respond-to-max($bp-sm-max) {
   .search__results {
     .content__sidebar {
-      padding-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
+      padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
     }
     .content__main {
-      margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
     }
     .results__count {
       border-left: 1px solid var(--gray-40);
     }
   }
-});
+}
 
 // We have an awkward state where text in the filters sidebar is too long on
 // mid-size screens but is fine on desktop and mobile
 .u-hide-on-tablet {
-  .respond-to-range(@bp-sm-max, 1100px, {
+  @include respond-to-range($bp-sm-max, 1100px) {
     display: none;
-  });
+  }
 }
 
 /* PWA */
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-text.less b/cfgov/unprocessed/apps/regulations3k/css/reg-text.scss
similarity index 53%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-text.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-text.scss
index dc4cfb9e24..dcec1233b7 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-text.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-text.scss
@@ -1,29 +1,33 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Regulations 3000
    Regulation section text styling and type hierarchy
    ========================================================================== */
 
-.generateLevel(6);
-
 // Generate six indentation levels for reg text
-.generateLevel(@n, @i: 1) when (@i =< @n) {
-  .level-@{i} {
-    box-sizing: border-box;
-    padding-left: (@i * 2em);
-  }
+@mixin generate-level($n, $i: 1) {
+  @if $i <= $n {
+    .level-#{$i} {
+      box-sizing: border-box;
+      padding-left: ($i * 2em);
+    }
 
-  .generateLevel(@n, (@i + 1));
+    @include generate-level($n, ($i + 1));
+  }
 }
 
+@include generate-level(6);
+
 .regdown-block {
   overflow: hidden;
 }
 
 .regulation-meta {
-  margin-bottom: unit(25px / @base-font-size-px, rem);
+  margin-bottom: math.div(25px, $base-font-size-px) + rem;
 
   .a-date {
-    margin-bottom: unit(8px / @base-font-size-px, rem);
+    margin-bottom: math.div(8px, $base-font-size-px) + rem;
     white-space: normal;
   }
 }
diff --git a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.scss
similarity index 58%
rename from cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
rename to cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.scss
index fe6847d6c5..7367d52903 100644
--- a/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.less
+++ b/cfgov/unprocessed/apps/regulations3k/css/reg-wayfinder.scss
@@ -1,11 +1,12 @@
+@use 'sass:math';
+
 /* ==========================================================================
    Regulations 3000
    Wayfinder
 ========================================================================== */
 
-@regs-wayfinder-padding-top: unit(15px / @base-font-size-px, rem);
-
-@regs-wayfinder-padding-top: unit(15px / @base-font-size-px, rem);
+$regs-wayfinder-padding-top: math.div(15px, $base-font-size-px) + rem;
+$regs-wayfinder-padding-top: math.div(15px, $base-font-size-px) + rem;
 
 .o-regulations-wayfinder {
   box-sizing: border-box;
@@ -17,10 +18,10 @@
   box-shadow: 0 3px 8px -6px var(--black);
   transition: top 0.1s ease-in-out;
   z-index: 100;
-  padding-left: unit(15px / @base-font-size-px, rem);
-  padding-right: unit(15px / @base-font-size-px, rem);
-  padding-top: @regs-wayfinder-padding-top;
-  padding-bottom: unit(15px / @base-font-size-px, rem);
+  padding-left: math.div(15px, $base-font-size-px) + rem;
+  padding-right: math.div(15px, $base-font-size-px) + rem;
+  padding-top: $regs-wayfinder-padding-top;
+  padding-bottom: math.div(15px, $base-font-size-px) + rem;
 
   &__link {
     display: inline-block;
@@ -28,8 +29,8 @@
   }
 
   &__link:visited {
-    border-color: @link-underline;
-    color: @link-text;
+    border-color: $link-underline;
+    color: $link-text;
   }
 
   &__sidebar {
@@ -37,13 +38,13 @@
   }
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    padding-left: unit(30px / @base-font-size-px, rem);
-    padding-right: unit(30px / @base-font-size-px, rem);
-  });
+  @include respond-to-min($bp-sm-min) {
+    padding-left: math.div(30px, $base-font-size-px) + rem;
+    padding-right: math.div(30px, $base-font-size-px) + rem;
+  }
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     &__wrapper {
       display: grid;
       grid-template-columns: 1fr 3fr;
@@ -55,18 +56,18 @@
       display: inline-block;
       position: relative;
 
-      &:after {
+      &::after {
         border-right: 1px solid var(--gray-40);
         content: '';
         position: absolute;
         right: -1px;
-        top: -@regs-wayfinder-padding-top;
-        height: calc( 100% + (@regs-wayfinder-padding-top * 2));
+        top: -$regs-wayfinder-padding-top;
+        height: calc(100% + ($regs-wayfinder-padding-top * 2));
       }
     }
 
     &__content {
-      padding-left: unit(30px / @base-font-size-px, rem);
+      padding-left: math.div(30px, $base-font-size-px) + rem;
       display: flex;
       justify-content: space-between;
     }
@@ -74,7 +75,7 @@
     &__version {
       text-align: right;
     }
-  });
+  }
 }
 
 .show-wayfinder .o-regulations-wayfinder {
diff --git a/cfgov/unprocessed/apps/retirement/css/claiming.less b/cfgov/unprocessed/apps/retirement/css/claiming.scss
similarity index 97%
rename from cfgov/unprocessed/apps/retirement/css/claiming.less
rename to cfgov/unprocessed/apps/retirement/css/claiming.scss
index 4e26c8bb63..c6a499efe9 100644
--- a/cfgov/unprocessed/apps/retirement/css/claiming.less
+++ b/cfgov/unprocessed/apps/retirement/css/claiming.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 #claiming-social-security {
   .input-labels__block .cf-icon-svg {
     margin-top: 1px;
@@ -38,7 +40,7 @@
   }
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     .intro {
       margin-bottom: 45px;
 
@@ -50,7 +52,7 @@
         background-image: url('/static/apps/retirement/img/before-you-claim.png');
       }
     }
-  } );
+  }
 
   h1 span.header-line {
     display: block;
@@ -375,7 +377,7 @@
   ==================================================================== */
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     #step-one-form {
       margin-bottom: 30px;
     }
@@ -407,14 +409,14 @@
     .step-two .lifestyle-response > p:last-child {
       margin-bottom: 0;
     }
-  } );
+  }
 
   /* ====================================================================
      Medium screens
   ==================================================================== */
 
   // Tablet only.
-  .respond-to-range(@bp-sm-min, @bp-sm-max, {
+  @include respond-to-range($bp-sm-min, $bp-sm-max) {
     .step-one {
       padding-top: 30px;
     }
@@ -507,14 +509,14 @@
       margin-top: 60px;
       margin-bottom: 60px;
     }
-  } );
+  }
 
   /* ====================================================================
      Small screens
   ==================================================================== */
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     .content-l {
       margin-left: 0;
       margin-right: 0;
@@ -659,7 +661,7 @@
       margin-top: 30px;
       margin-bottom: 30px;
     }
-  } );
+  }
 
   /* TOOLTIPS */
   div[data-tooltip-name] {
@@ -738,12 +740,12 @@
     margin-top: 30px;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       margin-top: 60px;
       .img {
         background-image: url('/static/apps/retirement/img/before-you-claim-es.png');
       }
-    } );
+    }
   }
 
   .step-two .question-expenses img,
@@ -755,9 +757,9 @@
     padding-left: 200px; /* Move image out of view */
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       display: inline-block;
-    } );
+    }
   }
 
   .step-two .question-expenses img {
diff --git a/cfgov/unprocessed/apps/retirement/css/main.less b/cfgov/unprocessed/apps/retirement/css/main.less
deleted file mode 100755
index fda106d696..0000000000
--- a/cfgov/unprocessed/apps/retirement/css/main.less
+++ /dev/null
@@ -1,18 +0,0 @@
-/* ==========================================================================
-   Retirement
-   ========================================================================== */
-
-// This is your project's main Less file.
-// Project-specific Less rules go after the imports.
-
-// Import Design System modules.
-@import (reference) 'cfpb-core.less';
-@import (reference) 'cfpb-icons.less';
-@import (reference) 'cfpb-buttons.less';
-@import (reference) 'cfpb-forms.less';
-@import (reference) 'cfpb-layout.less';
-@import (reference) 'cfpb-typography.less';
-@import (reference) 'cfpb-notifications.less';
-
-// Import the claiming.less file
-@import (less) 'claiming.less';
diff --git a/cfgov/unprocessed/apps/retirement/css/main.scss b/cfgov/unprocessed/apps/retirement/css/main.scss
new file mode 100644
index 0000000000..bbd98e16a0
--- /dev/null
+++ b/cfgov/unprocessed/apps/retirement/css/main.scss
@@ -0,0 +1,18 @@
+/* ==========================================================================
+   Retirement
+   ========================================================================== */
+
+// This is your project's main Less file.
+// Project-specific Less rules go after the imports.
+
+// Import Design System modules.
+@import 'cfpb-core';
+@import 'cfpb-icons';
+@import 'cfpb-buttons';
+@import 'cfpb-forms';
+@import 'cfpb-layout';
+@import 'cfpb-typography';
+@import 'cfpb-notifications';
+
+// Import the claiming.scss file
+@import 'claiming';
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.scss
similarity index 96%
rename from cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
rename to cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.scss
index 862c74a778..ebb03e84b8 100644
--- a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.less
+++ b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/main.scss
@@ -3,7 +3,7 @@
    Main Less file
    ========================================================================== */
 
-@import (reference) 'cfpb-core.less';
+@import 'cfpb-core';
 
 // Select menu inside the h2 header on the search tool view.
 .u-inline-select {
@@ -63,6 +63,7 @@
   border: none;
   width: 100%;
 }
+
 // Override zebra-striping of table rows.
 .o-table-wrapper--scrolling table > tbody > tr:nth-child(even) > td {
   background: #fff;
@@ -85,7 +86,7 @@ tr.data + tr[class=''] {
 
 // Print-related styling.
 /* stylelint-disable-next-line no-invalid-position-at-import-rule */
-@import (less) './print.less';
+@import './print';
 
 // u-hidden is duplicated from cf-core,
 // but since we only import cf-core by reference it gets overridden by cf-grid,
diff --git a/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less b/cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.scss
similarity index 100%
rename from cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.less
rename to cfgov/unprocessed/apps/rural-or-underserved-tool/css/print.scss
diff --git a/cfgov/unprocessed/apps/tccp/css/main.less b/cfgov/unprocessed/apps/tccp/css/main.scss
similarity index 62%
rename from cfgov/unprocessed/apps/tccp/css/main.less
rename to cfgov/unprocessed/apps/tccp/css/main.scss
index c81e862fb3..c7f35fbac4 100644
--- a/cfgov/unprocessed/apps/tccp/css/main.less
+++ b/cfgov/unprocessed/apps/tccp/css/main.scss
@@ -1,12 +1,13 @@
-@import (reference) 'cfpb-core.less';
-@import (reference) 'cfpb-buttons.less';
-@import (less) 'tooltip.less';
+@use 'sass:math';
+@import 'cfpb-core';
+@import 'cfpb-buttons';
+@import 'tooltip';
 
-.respond-to-min(@bp-sm-min, {
+@include respond-to-min($bp-sm-min) {
   .o-form__group {
-    max-width: unit((380px / @base-font-size-px), rem);
+    max-width: math.div(380px, $base-font-size-px) + rem;
   }
-});
+}
 
 // A form fieldset with large block-level areas for
 // helper text under each form field
@@ -31,7 +32,7 @@
       display: none;
       box-sizing: border-box;
       width: 100%;
-      padding: unit((15px / @base-font-size-px), rem);
+      padding: math.div(15px, $base-font-size-px) + rem;
       padding-top: 0;
       background-color: var(--pacific-20);
       border: 1px solid var(--pacific);
@@ -48,7 +49,7 @@
     padding-left: 1.125em;
 
     .m-list__item {
-      margin-left: unit((15px / @base-font-size-px), rem);
+      margin-left: math.div(15px, $base-font-size-px) + rem;
     }
 
     .m-list__item--has-icon {
@@ -62,7 +63,7 @@
       }
 
       span {
-        margin-top: unit((-1px / @base-font-size-px), rem);
+        margin-top: math.div(-1px, $base-font-size-px) + rem;
       }
     }
   }
@@ -70,17 +71,18 @@
 
 .u-btn-helper {
   width: 100%;
-  margin-top: unit((15px / @base-font-size-px), rem);
+  margin-top: math.div(15px, $base-font-size-px) + rem;
   text-align: center;
   a {
     border-bottom-width: 1px;
   }
-  .respond-to-min(@bp-sm-min, {
+
+  @include respond-to-min($bp-sm-min) {
     display: inline-block;
     width: auto;
     margin-top: 0;
-    margin-left: unit((6px / @btn-font-size), rem);
-  });
+    margin-left: math.div(6px, $btn-font-size) + rem;
+  }
 }
 
 .u-small-text--subtle {
@@ -88,7 +90,7 @@
 }
 
 .o-well.o-well--speed-bump {
-  padding: unit((20px / @base-font-size-px), rem);
+  padding: math.div(20px, $base-font-size-px) + rem;
   background-color: var(--teal-10);
 
   a {
@@ -101,20 +103,21 @@
   }
 
   &-large {
-    padding: unit((75px / @base-font-size-px), rem)
-      unit((45px / @base-font-size-px), rem);
+    padding: (math.div(75px, $base-font-size-px) + rem)
+      (math.div(45px, $base-font-size-px) + rem);
 
     p:first-child {
-      .h3();
+      @include h3;
     }
+
     // Make everything bigger on desktop
-    .respond-to-min(@bp-sm-min, {
-      padding-right: unit((60px / @base-font-size-px), rem);
+    @include respond-to-min($bp-sm-min) {
+      padding-right: math.div(60px, $base-font-size-px) + rem;
 
       p:last-child {
-        .heading-3();
+        @include heading-3;
       }
-    });
+    }
   }
 
   .cf-icon-svg {
@@ -136,15 +139,15 @@
   }
 }
 
-.u-heading-4-size-only() {
-  font-size: @size-iv;
+@mixin u-heading-4-size-only() {
+  font-size: $size-iv;
   line-height: 1.25;
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
-    font-size: unit(16px / @base-font-size-px, rem);
-    line-height: unit(18px /  @base-font-size-px);
-  });
+  @include respond-to-max($bp-xs-max) {
+    font-size: math.div(16px, $base-font-size-px) + rem;
+    line-height: math.div(18px, $base-font-size-px);
+  }
 }
 
 .m-card.m-card--tabular {
@@ -153,21 +156,22 @@
   color: var(--black);
 
   > a {
-    padding: unit((20px / @base-font-size-px), rem);
+    padding: math.div(20px, $base-font-size-px) + rem;
     border: 1px solid #d2d3d5;
     border-bottom-width: 3px;
     color: var(--black);
+
     // Disable iOS link highlighting for our large cards
     -webkit-tap-highlight-color: transparent;
 
     &:visited .m-card__subtitle {
-      border-color: @link-underline-visited;
-      color: @link-text-visited;
+      border-color: $link-underline-visited;
+      color: $link-text-visited;
     }
 
-    .respond-to-min(@bp-sm-min, {
-      padding-bottom: unit((20px / @base-font-size-px), rem);
-    });
+    @include respond-to-min($bp-sm-min) {
+      padding-bottom: math.div(20px, $base-font-size-px) + rem;
+    }
   }
 
   dl {
@@ -183,8 +187,8 @@
     }
 
     .m-card__subtitle {
-      border-bottom: 1px solid @link-underline-hover;
-      color: @link-text-hover;
+      border-bottom: 1px solid $link-underline-hover;
+      color: $link-text-hover;
     }
 
     &::after {
@@ -199,63 +203,63 @@
   }
 
   .m-card__heading-group {
-    margin-bottom: unit((20px / @base-font-size-px), rem);
+    margin-bottom: math.div(20px, $base-font-size-px) + rem;
   }
 
   .m-card__heading {
     margin-bottom: 0;
     color: var(--gray);
-    font-size: unit((16px / @base-font-size-px), rem);
+    font-size: math.div(16px, $base-font-size-px) + rem;
     font-weight: 400;
     text-transform: uppercase;
   }
 
   .m-card__subtitle {
     display: inline;
-    border-bottom: 1px dotted @link-underline;
-    color: @link-text;
+    border-bottom: 1px dotted $link-underline;
+    color: $link-text;
   }
 
   .m-card__footer {
-    margin-top: unit((5px / @base-font-size-px), rem);
+    margin-top: math.div(5px, $base-font-size-px) + rem;
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      margin-top: unit((20px / @base-font-size-px), rem);
-    });
+    @include respond-to-min($bp-sm-min) {
+      margin-top: math.div(20px, $base-font-size-px) + rem;
+    }
   }
 
   .m-apr-rating {
-    .u-heading-4-size-only();
-    margin-bottom: unit(20px / @base-font-size-px, rem);
+    @include u-heading-4-size-only;
+    margin-bottom: math.div(20px, $base-font-size-px) + rem;
     font-weight: 600;
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
-      margin-bottom: unit(10px / @base-font-size-px, rem);
-    });
+    @include respond-to-max($bp-xs-max) {
+      margin-bottom: math.div(10px, $base-font-size-px) + rem;
+    }
   }
 }
 
 .o-apr-rating-group {
   &--heading {
-    .h3();
+    @include h3;
   }
 
   .m-apr-rating {
-    margin-bottom: unit(5px / @base-font-size-px, rem);
+    margin-bottom: math.div(5px, $base-font-size-px) + rem;
     display: grid;
-    grid-template-columns: unit(45px / @base-font-size-px, em) 1fr;
+    grid-template-columns: (math.div(45px, $base-font-size-px) + em) 1fr;
     align-items: baseline;
-    gap: unit(5px / @base-font-size-px, em);
+    gap: math.div(5px, $base-font-size-px) + em;
     font-weight: 500;
 
-    .u-heading-4-size-only();
+    @include u-heading-4-size-only;
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       margin-bottom: 0;
-    });
+    }
   }
 
   dt {
@@ -273,10 +277,10 @@
   column-gap: 10px;
   row-gap: 15px;
 
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     grid-template-areas: 'apr fee transfer rewards requirements';
     grid-template-columns: 5fr 4fr 6fr 7fr 7fr;
-  });
+  }
 }
 
 .m-data-spec {
@@ -289,12 +293,12 @@
   }
 
   &--apr-disclaimer {
-    font-size: unit((14px / @base-font-size-px), rem);
+    font-size: math.div(14px, $base-font-size-px) + rem;
 
-    .respond-to-min(@bp-sm-min, {
-      font-size: unit((16px / @base-font-size-px), rem);
-      line-height: unit((22px / @base-font-size-px), rem);
-    });
+    @include respond-to-min($bp-sm-min) {
+      font-size: math.div(16px, $base-font-size-px) + rem;
+      line-height: math.div(22px, $base-font-size-px) + rem;
+    }
   }
 
   &--fee {
@@ -315,58 +319,58 @@
   }
 
   &--requirements {
-    padding-bottom: unit((15px / @base-font-size-px), rem);
+    padding-bottom: math.div(15px, $base-font-size-px) + rem;
     grid-area: requirements;
     dt {
-      .u-visually-hidden;
+      @include u-visually-hidden;
     }
 
     dd {
-      padding-top: unit((4px / @base-font-size-px), rem);
+      padding-top: math.div(4px, $base-font-size-px) + rem;
     }
 
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       padding-bottom: 0;
-    });
+    }
   }
 
   dt,
   &.m-data-spec--requirements dd {
     text-transform: none;
     letter-spacing: inherit;
-    font-size: unit((14px / @base-font-size-px), rem);
+    font-size: math.div(14px, $base-font-size-px) + rem;
     font-weight: normal;
     strong {
       font-weight: 500;
     }
 
-    .respond-to-min(@bp-sm-min, {
-      font-size: unit((16px / @base-font-size-px), rem);
-      line-height: unit((22px / @base-font-size-px), rem);
+    @include respond-to-min($bp-sm-min) {
+      font-size: math.div(16px, $base-font-size-px) + rem;
+      line-height: math.div(22px, $base-font-size-px) + rem;
       strong {
-        font-size: unit((18px / @base-font-size-px), rem);
+        font-size: math.div(18px, $base-font-size-px) + rem;
       }
-    });
+    }
   }
 
   dd {
     margin: 0;
-    font-size: unit((16px / @base-font-size-px), rem);
+    font-size: math.div(16px, $base-font-size-px) + rem;
     strong {
-      font-size: unit((18px / @base-font-size-px), rem);
+      font-size: math.div(18px, $base-font-size-px) + rem;
       font-weight: 500;
     }
     &::after {
       content: none;
     }
 
-    .respond-to-min(@bp-sm-min, {
-      font-size: unit((22px / @base-font-size-px), rem);
-      line-height: unit((26px / @base-font-size-px), rem);
+    @include respond-to-min($bp-sm-min) {
+      font-size: math.div(22px, $base-font-size-px) + rem;
+      line-height: math.div(26px, $base-font-size-px) + rem;
       strong {
-        font-size: unit((26px / @base-font-size-px), rem);
+        font-size: math.div(26px, $base-font-size-px) + rem;
       }
-    });
+    }
   }
 }
 
@@ -384,8 +388,8 @@ html.js .o-filterable-list-results--partial {
 // card result to emphasize that there are more cards to see
 #u-show-more-fade {
   position: relative;
-  margin-top: unit((-200px / @base-font-size-px), rem);
-  padding-top: unit((180px / @base-font-size-px), rem);
+  margin-top: math.div(-200px, $base-font-size-px) + rem;
+  padding-top: math.div(180px, $base-font-size-px) + rem;
   z-index: 1;
   cursor: pointer;
   background-image: linear-gradient(
@@ -400,25 +404,25 @@ html.js .o-filterable-list-results--partial {
 .m-credit-tier-chart {
   display: flex;
   align-items: stretch;
-  font-size: unit((15px / @base-font-size-px), rem);
+  font-size: math.div(15px, $base-font-size-px) + rem;
 
-  .respond-to-min(@bp-sm-min, {
-    margin-left: unit((-18px / @base-font-size-px), rem);
-    font-size: unit((16px / @base-font-size-px), rem);
-  });
+  @include respond-to-min($bp-sm-min) {
+    margin-left: math.div(-18px, $base-font-size-px) + rem;
+    font-size: math.div(16px, $base-font-size-px) + rem;
+  }
 
   &__tier {
     display: flex;
     flex-direction: column;
-    padding: unit((5px / @base-font-size-px), rem)
-      unit((15px / @base-font-size-px), rem);
+    padding: (math.div(5px, $base-font-size-px) + rem)
+      (math.div(15px, $base-font-size-px) + rem);
     background-color: var(--teal-10);
 
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       display: block;
-      padding: unit((5px / @base-font-size-px), rem)
-        unit((20px / @base-font-size-px), rem);
-    });
+      padding: (math.div(5px, $base-font-size-px) + rem)
+        (math.div(20px, $base-font-size-px) + rem);
+    }
   }
   &__tier:first-of-type {
     border-radius: 20px 0 0 20px;
@@ -437,9 +441,9 @@ html.js .o-filterable-list-results--partial {
     border-left: 1px solid var(--white);
   }
   &__tier--unselected &__icon {
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       display: none;
-    });
+    }
   }
 }
 
@@ -454,39 +458,39 @@ html.js .o-filterable-list-results--partial {
 }
 
 .o-card-details-section {
-  margin-top: unit((45px / @base-font-size-px), rem);
+  margin-top: math.div(45px, $base-font-size-px) + rem;
 
   &--introduction {
-    padding-bottom: unit((30px / @base-font-size-px), rem);
-    margin-bottom: unit((10px / @base-font-size-px), rem);
+    padding-bottom: math.div(30px, $base-font-size-px) + rem;
+    margin-bottom: math.div(10px, $base-font-size-px) + rem;
     border-bottom: 1px solid var(--gray-40);
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
-      margin-top: unit((30px / @base-font-size-px), rem);
-    });
+    @include respond-to-max($bp-xs-max) {
+      margin-top: math.div(30px, $base-font-size-px) + rem;
+    }
   }
 
   &:not(.o-card-details-section--introduction) > h2 {
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       font-weight: 600;
-    });
+    }
   }
 }
 
 .o-table--apr {
-  margin-top: unit((30px / @base-font-size-px), rem);
-  margin-bottom: unit((30px / @base-font-size-px), rem);
+  margin-top: math.div(30px, $base-font-size-px) + rem;
+  margin-bottom: math.div(30px, $base-font-size-px) + rem;
 }
 
 .o-additional-details {
-  margin-top: unit((30px / @base-font-size-px), rem);
+  margin-top: math.div(30px, $base-font-size-px) + rem;
 }
 
 .m-list__card-details {
   dt {
-    margin-top: unit((15px / @base-font-size-px), rem);
+    margin-top: math.div(15px, $base-font-size-px) + rem;
   }
   dt:first-child {
     margin-top: 0;
@@ -502,13 +506,13 @@ html.js .o-filterable-list-results--partial {
     margin-left: 0;
   }
   dd + dd {
-    margin-top: unit((15px / @base-font-size-px), rem);
+    margin-top: math.div(15px, $base-font-size-px) + rem;
   }
   dd::after {
     content: none;
   }
   dd .o-table {
-    margin-top: unit((10px / @base-font-size-px), rem);
+    margin-top: math.div(10px, $base-font-size-px) + rem;
   }
 }
 
@@ -521,16 +525,16 @@ html.js .o-filterable-list-results--partial {
   display: flex;
   flex-direction: column;
 
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     flex-direction: row;
-    gap: unit((30px / @base-font-size-px), rem);
-  });
+    gap: math.div(30px, $base-font-size-px) + rem;
+  }
 
   &__operator {
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       align-self: center;
       margin-bottom: 0;
-    });
+    }
   }
 }
 
@@ -546,7 +550,7 @@ html.js .o-filterable-list-results--partial {
   position: fixed;
   top: 0;
   z-index: 1000;
-  height: unit((5px / @base-font-size-px), rem);
+  height: math.div(5px, $base-font-size-px) + rem;
   width: 100%;
 
   .htmx-progress-bar {
@@ -629,12 +633,12 @@ html.js form[hx-boost] {
 
 .a-form-alert__text {
   display: block;
-  margin-left: unit((20px / @base-font-size-px), em);
+  margin-left: math.div(20px, $base-font-size-px) + em;
 }
 
 // Our page has no sidebar but there are a handful of
 // elements that we want to cap at a width slightly longer
 // than our standard cf.gov line length.
 .u-cap-width {
-  max-width: unit((700px / @base-font-size-px), em);
+  max-width: math.div(700px, $base-font-size-px) + em;
 }
diff --git a/cfgov/unprocessed/apps/tccp/css/tooltip.less b/cfgov/unprocessed/apps/tccp/css/tooltip.less
deleted file mode 100644
index 7b0923d7f9..0000000000
--- a/cfgov/unprocessed/apps/tccp/css/tooltip.less
+++ /dev/null
@@ -1,25 +0,0 @@
-@import (css) '../node_modules/tippy.js/dist/tippy.css';
-@import (css) '../node_modules/tippy.js/dist/border.css';
-
-// Custom theme, see https://atomiks.github.io/tippyjs/v6/themes/
-.tippy-box[data-theme='cfpb'] {
-  background-color: var(--gray-5);
-  border: 1px solid var(--gray-40);
-  border-radius: 0;
-  color: var(--black);
-  padding: unit((15px / @base-font-size-px), rem);
-
-  .tippy-arrow {
-    color: var(--gray-5);
-  }
-
-  .tippy-heading {
-    font-weight: 500;
-    font-size: unit((18px / @base-font-size-px), rem);
-  }
-
-  .tippy-body {
-    font-size: unit((16px / @base-font-size-px), rem);
-    margin-top: unit((15px / @base-font-size-px), rem);
-  }
-}
diff --git a/cfgov/unprocessed/apps/tccp/css/tooltip.scss b/cfgov/unprocessed/apps/tccp/css/tooltip.scss
new file mode 100644
index 0000000000..2fdb48fa98
--- /dev/null
+++ b/cfgov/unprocessed/apps/tccp/css/tooltip.scss
@@ -0,0 +1,26 @@
+@use 'sass:math';
+@import '../node_modules/tippy.js/dist/tippy.css';
+@import '../node_modules/tippy.js/dist/border.css';
+
+// Custom theme, see https://atomiks.github.io/tippyjs/v6/themes/
+.tippy-box[data-theme='cfpb'] {
+  background-color: var(--gray-5);
+  border: 1px solid var(--gray-40);
+  border-radius: 0;
+  color: var(--black);
+  padding: math.div(15px, $base-font-size-px) + rem;
+
+  .tippy-arrow {
+    color: var(--gray-5);
+  }
+
+  .tippy-heading {
+    font-weight: 500;
+    font-size: math.div(18px, $base-font-size-px) + rem;
+  }
+
+  .tippy-body {
+    font-size: math.div(16px, $base-font-size-px) + rem;
+    margin-top: math.div(15px, $base-font-size-px) + rem;
+  }
+}
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.scss
similarity index 100%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/atoms/icon.scss
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/main.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/main.less
deleted file mode 100755
index 4b004a522b..0000000000
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/main.less
+++ /dev/null
@@ -1,27 +0,0 @@
-/* ==========================================================================
-   Teachers Digital Platform
-   ========================================================================== */
-
-// Import Capital Framework by reference so that variables and mixins are
-// available, but the whole output doesn't duplicate what we're already getting
-// from consumerfinance.gov.
-@import (reference) 'cfpb-core.less';
-@import (reference) 'cfpb-icons.less';
-@import (reference) 'cfpb-buttons.less';
-@import (reference) 'cfpb-forms.less';
-@import (reference) 'cfpb-grid.less';
-@import (reference) 'cfpb-layout.less';
-@import (reference) 'cfpb-typography.less';
-@import (reference) 'cfpb-notifications.less';
-@import (reference) 'cfpb-pagination.less';
-@import (reference) 'cfpb-expandables.less';
-@import (reference) 'cfpb-tables.less';
-
-// Project specific Less goes here or you can break it up into discrete files.
-@import url('atoms/icon.less');
-@import url('molecules/form-fields.less');
-@import url('molecules/search-hero.less');
-@import url('organisms/expandable.less');
-@import url('organisms/expandable-facets.less');
-@import url('pages/activity-search.less');
-@import url('utilities/hide-on.less');
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss b/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss
new file mode 100644
index 0000000000..d29ad9eec2
--- /dev/null
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss
@@ -0,0 +1,27 @@
+/* ==========================================================================
+   Teachers Digital Platform
+   ========================================================================== */
+
+// Import Capital Framework by reference so that variables and mixins are
+// available, but the whole output doesn't duplicate what we're already getting
+// from consumerfinance.gov.
+@import 'cfpb-core';
+@import 'cfpb-icons';
+@import 'cfpb-buttons';
+@import 'cfpb-forms';
+@import 'cfpb-grid';
+@import 'cfpb-layout';
+@import 'cfpb-typography';
+@import 'cfpb-notifications';
+@import 'cfpb-pagination';
+@import 'cfpb-expandables';
+@import 'cfpb-tables';
+
+// Project specific Less goes here or you can break it up into discrete files.
+@import 'atoms/icon';
+@import 'molecules/form-fields';
+@import 'molecules/search-hero';
+@import 'organisms/expandable';
+@import 'organisms/expandable-facets';
+@import 'pages/activity-search';
+@import 'utilities/hide-on';
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.scss
similarity index 74%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.scss
index 9fb1581a50..4ca1d93abc 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/form-fields.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Custom Form fields styling
 //
@@ -6,7 +8,7 @@
   .a-checkbox + .a-label.indeterminate {
     &::before {
       background-image: url('/static/apps/teachers-digital-platform/img/square-gray.png');
-      background-size: auto 0.875em auto unit(15px / @base-font-size-px, em);
+      background-size: auto 0.875em auto math.div(15px, $base-font-size-px) + em;
       background-position: center;
       background-repeat: no-repeat;
     }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.scss
similarity index 61%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.scss
index a0b468bc5a..6b90ea5a33 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/molecules/search-hero.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Search hero
 //
@@ -6,18 +8,18 @@
   overflow: auto;
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     display: flex;
-  });
+  }
 }
 
 .m-search-hero__text {
   box-sizing: border-box;
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     width: 60%;
-  });
+  }
 }
 
 .m-search-hero__image-wrapper {
@@ -25,9 +27,9 @@
   display: none;
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     display: block;
     width: 40%;
-    padding-left: unit( 30px / @base-font-size-px, em );
-  });
+    padding-left: math.div(30px, $base-font-size-px) + em;
+  }
 }
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable-facets.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable-facets.scss
similarity index 100%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable-facets.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable-facets.scss
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.scss
similarity index 73%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.scss
index 1849e83fc5..1ce68d8944 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/organisms/expandable.scss
@@ -1,7 +1,9 @@
+@use 'sass:math';
+
 // Import external dependencies
-@import (reference) '@cfpb/cfpb-core/src/cfpb-core.less';
-@import (reference) '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
-@import (reference) '@cfpb/cfpb-icons/src/cfpb-icons.less';
+@import '@cfpb/cfpb-core/src/cfpb-core';
+@import '@cfpb/cfpb-buttons/src/cfpb-buttons';
+@import '@cfpb/cfpb-icons/src/cfpb-icons';
 
 /* ==========================================================================
    Design System
@@ -12,24 +14,13 @@
 // Theme variables
 //
 
-// .o-expandable__label
-@expandable__label-text: var(--black);
-
-// .o-expandable__cues
-@expandable__cues-text: var(--pacific);
-
 // .o-expandable modifiers
-@expandable__background: var(--gray-5);
-
-// Sizing variables
-
-// .o-expandable__cues
-@expandable__cues-font-size: @btn-font-size;
+$expandable-background: var(--gray-5);
 
 // Timing variables
 
 // .o-expandable__content__transition
-@expandable__transition-speed: 0.25s;
+$expandable-transition-speed: 0.25s;
 
 //
 // Recommended expandable pattern
@@ -64,27 +55,27 @@
   }
 
   &__content {
-    padding: 0 unit((15px / @base-font-size-px), em);
+    padding: 0 math.div(15px, $base-font-size-px) + em;
 
     // The divider between _header and _content.
     &::before {
       content: '';
       display: block;
       border-top: 1px solid var(--gray-40);
-      padding-top: unit((15px / @base-font-size-px), em);
+      padding-top: math.div(15px, $base-font-size-px) + em;
     }
 
     &::after {
-      padding-bottom: unit((15px / @base-font-size-px), em);
+      padding-bottom: math.div(15px, $base-font-size-px) + em;
       width: 100%;
     }
 
     // A clearfix prevents twitchy animations from occurring when margins
     // collapse and extend past the bounds of the expandable.
-    .u-clearfix();
+    @include u-clearfix;
 
     &--transition {
-      transition: max-height @expandable__transition-speed ease-in-out;
+      transition: max-height $expandable-transition-speed ease-in-out;
     }
 
     &--collapsed {
@@ -115,8 +106,8 @@
     min-width: 60px;
     text-align: right;
     color: var(--pacific);
-    font-size: unit((@btn-font-size / @base-font-size-px), em);
-    line-height: unit((@base-line-height-px / @btn-font-size));
+    font-size: math.div($btn-font-size, $base-font-size-px) + em;
+    line-height: math.div($base-line-height-px, $btn-font-size);
   }
 
   //
@@ -124,14 +115,14 @@
   //
 
   &__header {
-    padding: unit((10px / @base-font-size-px), em)
-      unit((15px / @base-font-size-px), em);
+    padding: (math.div(10px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em);
     display: flex;
     justify-content: space-between;
 
     // Using the button element with .o-expandable__header requires setting
     // an explicit width.
-    button& {
+    button & {
       width: 100%;
       text-align: left;
     }
@@ -147,7 +138,7 @@
   //
 
   &--background {
-    background: @expandable__background;
+    background: $expandable-background;
   }
 
   //
@@ -172,7 +163,7 @@
     }
   }
 
-  .respond-to-print( {
+  @include respond-to-print {
     // Hide the interactive expandable cues when printing
     &__target--expanded &__cue-close,
     &__target--collapsed &__cue-open {
@@ -186,7 +177,7 @@
       display: block;
       max-height: 99999px !important;
     }
-  });
+  }
 }
 
 // Used when the set language reads right-to-left
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.scss
similarity index 61%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.scss
index 995744f966..8eabb1c745 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/pages/activity-search.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .tdp-activity-search {
   .m-hero {
     background-color: transparent;
@@ -12,14 +14,14 @@
     display: none;
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       display: inline-block;
       margin-top: 0;
-    });
+    }
   }
 
   .m-pagination {
-    margin-bottom: unit(45px / @base-font-size-px, em);
+    margin-bottom: math.div(45px, $base-font-size-px) + em;
   }
 
   .o-well {
@@ -29,7 +31,7 @@
   .skip-filters:focus {
     clip: initial;
     height: initial;
-    margin-top: unit(-30px / @base-font-size-px, em);
+    margin-top: math.div(-30px, $base-font-size-px) + em;
     width: initial;
   }
 
@@ -38,17 +40,17 @@
   }
 
   .content__sidebar {
-    padding: unit(15px / @base-font-size-px, em)
-      unit(15px / @base-font-size-px, em) 0;
+    padding: (math.div(15px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em) 0;
     border: 1px solid var(--gray-40);
     background-color: var(--gray-5);
-    margin-bottom: unit(30px / @base-font-size-px, em);
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       margin-bottom: 0;
-      padding-top: unit( 30px / @base-font-size-px, em );
-    });
+      padding-top: math.div(30px, $base-font-size-px) + em;
+    }
 
     .o-expandable__header,
     .o-expandable__content {
@@ -67,12 +69,12 @@
     }
 
     .o-expandable__header {
-      padding: unit(13px / @base-font-size-px, em) 0;
+      padding: (math.div(13px, $base-font-size-px) + em) 0;
       margin-bottom: 2px;
     }
 
     .m-list--unstyled .m-list--unstyled {
-      margin-left: unit(27px / @base-font-size-px, em);
+      margin-left: (math.div(27px, $base-font-size-px) + em);
     }
 
     .filter-section {
@@ -81,9 +83,9 @@
 
     .filter-section:first-of-type {
       // Tablet and below.
-      .respond-to-max(@bp-sm-max, {
+      @include respond-to-max($bp-sm-max) {
         border-top: 0;
-      });
+      }
     }
 
     .o-form__group {
@@ -108,17 +110,17 @@
   }
 
   .results__count {
-    padding: unit(15px / @base-font-size-px, em)
-      unit(15px / @base-font-size-px, em) 0;
+    padding: (math.div(15px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em) 0;
     border: 1px solid var(--gray-40);
     background-color: var(--green-20);
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       border-left: 0;
-      padding-left: unit( 30px / @base-font-size-px, em );
-      padding-right: unit( 30px / @base-font-size-px, em );
-    });
+      padding-left: math.div(30px, $base-font-size-px) + em;
+      padding-right: math.div(30px, $base-font-size-px) + em;
+    }
   }
 
   .results__count--empty {
@@ -135,14 +137,14 @@
   }
 
   .results__filters {
-    padding-top: unit(15px / @base-font-size-px, em);
+    padding-top: math.div(15px, $base-font-size-px) + em;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       border-left: 0;
-      padding-left: unit( 30px / @base-font-size-px, em );
-      padding-right: unit( 30px / @base-font-size-px, em );
-    });
+      padding-left: math.div(30px, $base-font-size-px) + em;
+      padding-right: math.div(30px, $base-font-size-px) + em;
+    }
   }
 
   .results__filters-label {
@@ -152,12 +154,12 @@
   }
 
   .results__list {
-    padding: unit(15px / @base-font-size-px, em) 0;
+    padding: (math.div(15px, $base-font-size-px) + em) 0;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding-left: unit( 30px / @base-font-size-px, em );
-    });
+    @include respond-to-min($bp-med-min) {
+      padding-left: math.div(30px, $base-font-size-px) + em;
+    }
 
     li {
       max-width: 100%;
@@ -166,9 +168,9 @@
 
   .results__footer {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding-left: unit( 30px / @base-font-size-px, em );
-    });
+    @include respond-to-min($bp-med-min) {
+      padding-left: math.div(30px, $base-font-size-px) + em;
+    }
   }
 
   .layout-row > * {
@@ -179,13 +181,13 @@
     background: var(--white);
     border: 1px solid var(--gray-40);
     box-sizing: border-box;
-    padding: unit(30px / @base-font-size-px, em)
-      unit(15px / @base-font-size-px, em);
+    padding: (math.div(30px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em);
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding: unit( 30px / @base-font-size-px, em );
-    });
+    @include respond-to-min($bp-med-min) {
+      padding: math.div(30px, $base-font-size-px) + em;
+    }
 
     h3,
     h4,
@@ -210,23 +212,23 @@
     }
 
     > div:first-child {
-      margin-bottom: unit(30px / @base-font-size-px, em);
+      margin-bottom: math.div(30px, $base-font-size-px) + em;
     }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       display: flex;
 
       > div:first-child {
         margin-bottom: 0;
-        padding-right: unit( 30px / @base-font-size-px, em );
+        padding-right: math.div(30px, $base-font-size-px) + em;
         width: 66%;
       }
 
       > div:last-child {
         width: 33%;
       }
-    });
+    }
   }
 
   .activity__meta-key {
diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.less b/cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.scss
similarity index 57%
rename from cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.less
rename to cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.scss
index 123dc75686..6943361a0d 100644
--- a/cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.less
+++ b/cfgov/unprocessed/apps/teachers-digital-platform/css/utilities/hide-on.scss
@@ -1,37 +1,39 @@
+@use 'sass:math';
+
 //
 // Hide on screen sizes or print
 //
 
 .u-hide-on-xs {
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     display: none !important;
-  });
+  }
 }
 
 .u-hide-on-sm {
   // Tablet only.
-  .respond-to-range(@bp-sm-min, @bp-sm-max, {
+  @include respond-to-range($bp-sm-min, $bp-sm-max) {
     display: none !important;
-  });
+  }
 }
 
 .u-hide-on-med {
-  .respond-to-range(@bp-med-min, @bp-med-max, {
+  @include respond-to-range($bp-med-min, $bp-med-max) {
     display: none !important;
-  });
+  }
 }
 
 .u-hide-on-lg {
-  .respond-to-range(@bp-lg-min, @bp-lg-max, {
+  @include respond-to-range($bp-lg-min, $bp-lg-max) {
     display: none !important;
-  });
+  }
 }
 
 .u-hide-on-xl {
-  .respond-to-min(@bp-xl-min, {
+  @include respond-to-min($bp-xl-min) {
     display: none !important;
-  });
+  }
 }
 
 html.js .u-hide-on-js {
diff --git a/cfgov/unprocessed/css/atoms/overlay.less b/cfgov/unprocessed/css/atoms/overlay.scss
similarity index 87%
rename from cfgov/unprocessed/css/atoms/overlay.less
rename to cfgov/unprocessed/css/atoms/overlay.scss
index 67307dcf65..3a2462c785 100644
--- a/cfgov/unprocessed/css/atoms/overlay.less
+++ b/cfgov/unprocessed/css/atoms/overlay.scss
@@ -1,6 +1,8 @@
+@use 'sass:math';
+
 .a-overlay {
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     height: 100vh;
     width: 100vw;
 
@@ -8,6 +10,7 @@
     min-height: -webkit-fill-available;
 
     position: fixed;
+
     // TODO: Update z-index value with standard z-index variable.
     z-index: 10;
 
@@ -17,5 +20,5 @@
     // Cursor needs to be set for iOS to capture clicks of the overlay
     // and bubble them up to the body.
     cursor: pointer;
-  });
+  }
 }
diff --git a/cfgov/unprocessed/css/atoms/rule-break.less b/cfgov/unprocessed/css/atoms/rule-break.less
deleted file mode 100644
index b5383b097e..0000000000
--- a/cfgov/unprocessed/css/atoms/rule-break.less
+++ /dev/null
@@ -1,4 +0,0 @@
-.a-rule-break {
-  padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-  border-top: 1px solid @horizontal-rule;
-}
diff --git a/cfgov/unprocessed/css/atoms/rule-break.scss b/cfgov/unprocessed/css/atoms/rule-break.scss
new file mode 100644
index 0000000000..e9c3fe0485
--- /dev/null
+++ b/cfgov/unprocessed/css/atoms/rule-break.scss
@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+.a-rule-break {
+  padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+  border-top: 1px solid var(--gray-40);
+}
diff --git a/cfgov/unprocessed/css/atoms/tag.less b/cfgov/unprocessed/css/atoms/tag.scss
similarity index 76%
rename from cfgov/unprocessed/css/atoms/tag.less
rename to cfgov/unprocessed/css/atoms/tag.scss
index 192b279a09..cd9c16b3f2 100644
--- a/cfgov/unprocessed/css/atoms/tag.less
+++ b/cfgov/unprocessed/css/atoms/tag.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /* ==========================================================================
    consumerfinance.gov
    tag
@@ -7,7 +9,7 @@
   border: 1px solid var(--teal);
   padding: 4px 10px;
   background-color: var(--teal-20);
-  border-radius: unit(3px / @base-font-size-px, rem);
+  border-radius: math.div(3px, $base-font-size-px) + rem;
   font-weight: 500;
   color: var(--black);
 
@@ -31,8 +33,14 @@
     pointer-events: none;
   }
 
-  a& {
+  a & {
     // Colors for :link, :visited, :hover, :focus, :active.
-    .u-link-colors( var(--black), var(--black), var(--black), var(--black), var(--black) );
+    @include u-link-colors(
+      var(--black),
+      var(--black),
+      var(--black),
+      var(--black),
+      var(--black)
+    );
   }
 }
diff --git a/cfgov/unprocessed/css/breadcrumbs.less b/cfgov/unprocessed/css/breadcrumbs.scss
similarity index 50%
rename from cfgov/unprocessed/css/breadcrumbs.less
rename to cfgov/unprocessed/css/breadcrumbs.scss
index 532ce74ddd..0919b773d3 100644
--- a/cfgov/unprocessed/css/breadcrumbs.less
+++ b/cfgov/unprocessed/css/breadcrumbs.scss
@@ -1,28 +1,31 @@
+@use 'sass:math';
+
 .m-breadcrumbs {
   // Mobile size.
   position: relative;
   display: flex;
-  gap: unit(10px / @base-font-size-px, rem);
+  gap: math.div(10px, $base-font-size-px) + rem;
   align-items: center;
   flex-wrap: wrap;
 
-  font-size: unit(14px / @base-font-size-px, rem);
-  padding-top: unit(15px / @base-font-size-px, rem);
-  padding-bottom: unit(15px / @base-font-size-px, rem);
+  font-size: math.div(14px, $base-font-size-px) + rem;
+  padding-top: math.div(15px, $base-font-size-px) + rem;
+  padding-bottom: math.div(15px, $base-font-size-px) + rem;
   min-height: 33px;
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    padding-top: unit(30px / @base-font-size-px, rem);
+  @include respond-to-min($bp-med-min) {
+    padding-top: math.div(30px, $base-font-size-px) + rem;
+
     // Bottom is zero because main content area may or may not have a breadcrumb,
     // so the main content needs to set it s own spacing.
     padding-bottom: 0;
-  });
+  }
 }
 
 // Hide on print.
-.respond-to-print( {
+@include respond-to-print {
   .m-breadcrumbs {
     display: none;
   }
-});
+}
diff --git a/cfgov/unprocessed/css/calendar-icon.less b/cfgov/unprocessed/css/calendar-icon.less
deleted file mode 100755
index b443a21344..0000000000
--- a/cfgov/unprocessed/css/calendar-icon.less
+++ /dev/null
@@ -1,59 +0,0 @@
-/*  Mixin to generate a calendar icon.
-    @month [String] The month (3-letter abbreviation, typically).
-    @date [Number] The day in the month.
-    @background-color [Color] A color value for the icon background (behind the month).
-    @foreground-color [Color] A color value for the color behind the day.
-    @scale [Number] A multiplier for the size of the icon (1 is the default). */
-.cf-calendar-icon( @month, @date, @background-color, @foreground-color, @scale ) {
-  // Display & Box Model.
-  display: block;
-  width: 3em * @scale;
-  border: 0.25em solid @background-color;
-  border-radius: 0.375em * @scale;
-
-  // Background.
-  background-color: @background-color;
-
-  // Foreground.
-  line-height: 1;
-  text-align: center;
-
-  &::before,
-  &::after {
-    // Display & Box Model.
-    display: block;
-  }
-
-  &::before {
-    // Display & Box Model.
-    padding-bottom: 0.15em;
-
-    // Foreground.
-    color: @foreground-color;
-    font-size: 1em * @scale;
-    text-transform: uppercase;
-
-    // Miscellaneous, alphabetic.
-    content: @month;
-  }
-
-  &::after {
-    // Display & Box Model.
-    padding: 0.15em 0 0;
-    border-radius: 0 0 0.16em 0.16em;
-
-    // Background.
-    background: @foreground-color;
-
-    // Foreground.
-    color: @background-color;
-    font-size: 1.5em * @scale;
-
-    // Miscellaneous, alphabetic.
-    content: @date;
-  }
-}
-
-.calendar-icon {
-  .cf-calendar-icon( attr(data-month), attr(data-day), var(--gray-40), var(--white), 1 );
-}
diff --git a/cfgov/unprocessed/css/calendar-icon.scss b/cfgov/unprocessed/css/calendar-icon.scss
new file mode 100644
index 0000000000..031df94c67
--- /dev/null
+++ b/cfgov/unprocessed/css/calendar-icon.scss
@@ -0,0 +1,71 @@
+/*  Mixin to generate a calendar icon.
+    $month [String] The month (3-letter abbreviation, typically).
+    $date [Number] The day in the month.
+    $background-color [Color] A color value for the icon background (behind the month).
+    $foreground-color [Color] A color value for the color behind the day.
+    $scale [Number] A multiplier for the size of the icon (1 is the default). */
+@mixin cf-calendar-icon(
+  $month,
+  $date,
+  $background-color,
+  $foreground-color,
+  $scale
+) {
+  // Display & Box Model.
+  display: block;
+  width: 3em * $scale;
+  border: 0.25em solid $background-color;
+  border-radius: 0.375em * $scale;
+
+  // Background.
+  background-color: $background-color;
+
+  // Foreground.
+  line-height: 1;
+  text-align: center;
+
+  &::before,
+  &::after {
+    // Display & Box Model.
+    display: block;
+  }
+
+  &::before {
+    // Display & Box Model.
+    padding-bottom: 0.15em;
+
+    // Foreground.
+    color: $foreground-color;
+    font-size: 1em * $scale;
+    text-transform: uppercase;
+
+    // Miscellaneous, alphabetic.
+    content: $month;
+  }
+
+  &::after {
+    // Display & Box Model.
+    padding: 0.15em 0 0;
+    border-radius: 0 0 0.16em 0.16em;
+
+    // Background.
+    background: $foreground-color;
+
+    // Foreground.
+    color: $background-color;
+    font-size: 1.5em * $scale;
+
+    // Miscellaneous, alphabetic.
+    content: $date;
+  }
+}
+
+.calendar-icon {
+  @include cf-calendar-icon(
+    attr(data-month),
+    attr(data-day),
+    var(--gray-40),
+    var(--white),
+    1
+  );
+}
diff --git a/cfgov/unprocessed/css/enhancements/forms.less b/cfgov/unprocessed/css/enhancements/forms.scss
similarity index 85%
rename from cfgov/unprocessed/css/enhancements/forms.less
rename to cfgov/unprocessed/css/enhancements/forms.scss
index 47d36d807c..a8029bbd47 100644
--- a/cfgov/unprocessed/css/enhancements/forms.less
+++ b/cfgov/unprocessed/css/enhancements/forms.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 /*
  * Removes top margin from text input when it follows
  * .a-label--heading, which applies a 10px bottom margin.
@@ -14,5 +16,5 @@
  * This is for an issue in iOS Safari where the input is collapsed.
  */
 input[type='date'] {
-  min-height: unit(35px / @base-font-size-px, rem);
+  min-height: math.div(35px, $base-font-size-px) + rem;
 }
diff --git a/cfgov/unprocessed/css/enhancements/layout-1-3.less b/cfgov/unprocessed/css/enhancements/layout-1-3.scss
similarity index 63%
rename from cfgov/unprocessed/css/enhancements/layout-1-3.less
rename to cfgov/unprocessed/css/enhancements/layout-1-3.scss
index 7552fa1c48..8d2a496f89 100644
--- a/cfgov/unprocessed/css/enhancements/layout-1-3.less
+++ b/cfgov/unprocessed/css/enhancements/layout-1-3.scss
@@ -1,16 +1,18 @@
+@use 'sass:math';
+
 @layer layout-1-3 {
   // Defaults shared in left-to-right (LTR) and right-to-left (RTL) layouts.
   .u-layout-grid--1-3 {
     // Mobile
     .u-layout-grid {
       &__secondary-nav {
-        margin-left: unit(-15px / @base-font-size-px, rem);
-        margin-right: unit(-15px / @base-font-size-px, rem);
+        margin-left: math.div(-15px, $base-font-size-px) + rem;
+        margin-right: math.div(-15px, $base-font-size-px) + rem;
       }
     }
 
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       .u-layout-grid {
         &__secondary-nav {
           // Hide this element when it has a secondary nav DOM.
@@ -19,23 +21,24 @@
           }
         }
       }
-    });
+    }
 
     // Tablet only.
-    .respond-to-range(@bp-sm-min, @bp-sm-max, {
+    @include respond-to-range($bp-sm-min, $bp-sm-max) {
       .u-layout-grid {
         &__secondary-nav {
-          margin-left: unit(-30px / @base-font-size-px, rem);
-          margin-right: unit(-30px / @base-font-size-px, rem);
+          margin-left: math.div(-30px, $base-font-size-px) + rem;
+          margin-right: math.div(-30px, $base-font-size-px) + rem;
         }
       }
-    });
+    }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__wrapper {
           grid-auto-rows: minmax(0, auto) minmax(0, auto) 1fr;
+
           // Numbers below are 870 split into four parts
           // 870 is the 900px breakpoint - 30px of gutters
           grid-auto-columns: minmax(217.5px, 1fr) minmax(652.5px, 3fr);
@@ -49,16 +52,17 @@
           margin-left: 0;
         }
       }
-    });
+    }
   }
 
   // 1-3 Left-to-right (LTR) layout.
-  .u-layout-grid--1-3:not(&[dir='rtl']) {
+  .u-layout-grid--1-3:not(.u-layout-grid--1-3[dir='rtl']) {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__wrapper {
           grid-auto-rows: minmax(0, auto) minmax(0, auto) 1fr;
+
           // Numbers below are 870 split into four parts
           // 870 is the 900px breakpoint - 30px of gutters
           grid-auto-columns: minmax(217.5px, 1fr) minmax(652.5px, 3fr);
@@ -69,49 +73,49 @@
 
         &__main {
           position: relative;
-          margin-left: unit(30px / @base-font-size-px, rem);
+          margin-left: math.div(30px, $base-font-size-px) + rem;
 
-          &:after {
+          &::after {
             content: '';
-            border-left: 1px solid @content__main-border;
+            border-left: 1px solid $content-main-border;
             position: absolute;
-            top: unit(30px / @base-font-size-px, rem );
+            top: math.div(30px, $base-font-size-px) + rem;
             bottom: 0;
-            left: unit( ( (-1 * 30px) / @base-font-size-px ), rem );
+            left: math.div((-1 * 30px), $base-font-size-px) + rem;
           }
         }
 
         &__secondary-nav {
-          margin-right: unit(30px / @base-font-size-px, rem);
+          margin-right: math.div(30px, $base-font-size-px) + rem;
         }
       }
-    });
+    }
   }
 
   // 1-3 Right-to-left (RTL) layout.
   .u-layout-grid--1-3[dir='rtl'] {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__main {
           position: relative;
-          margin-right: unit(30px / @base-font-size-px, rem);
+          margin-right: math.div(30px, $base-font-size-px) + rem;
 
-          &:after {
+          &::after {
             content: '';
-            border-left: 1px solid @content__main-border;
+            border-left: 1px solid $content-main-border;
             position: absolute;
-            top: unit(30px / @base-font-size-px, rem );
+            top: math.div(30px, $base-font-size-px) + rem;
             bottom: 0;
-            right: unit( ( (-1 * 30px) / @base-font-size-px ), rem );
+            right: math.div((-1 * 30px), $base-font-size-px) + rem;
           }
         }
 
         &__secondary-nav {
-          margin-left: unit(30px / @base-font-size-px, rem);
+          margin-left: math.div(30px, $base-font-size-px) + rem;
         }
       }
-    });
+    }
   }
 
   // Optionally make the secondary nav sticky
@@ -127,15 +131,15 @@
     // Expand the sticky nav to full height on desktop with optional scrolling
     // and adjust spacing so that the scrollbar does not cover content
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       max-height: 100vh;
       overflow-y: auto;
-      margin-right: unit(15px / @base-font-size-px, rem);
+      margin-right: math.div(15px, $base-font-size-px) + rem;
 
       .o-secondary-nav {
-        margin-right: unit(15px / @base-font-size-px, rem);
-        padding-bottom: unit(60px / @base-font-size-px, rem);
+        margin-right: math.div(15px, $base-font-size-px) + rem;
+        padding-bottom: math.div(60px, $base-font-size-px) + rem;
       }
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/enhancements/layout-2-1.less b/cfgov/unprocessed/css/enhancements/layout-2-1.scss
similarity index 67%
rename from cfgov/unprocessed/css/enhancements/layout-2-1.less
rename to cfgov/unprocessed/css/enhancements/layout-2-1.scss
index 8d6b67968a..13b4476621 100644
--- a/cfgov/unprocessed/css/enhancements/layout-2-1.less
+++ b/cfgov/unprocessed/css/enhancements/layout-2-1.scss
@@ -1,6 +1,8 @@
+@use 'sass:math';
+
 @layer layout-2-1 {
   // Layout 2-1 utilities.
-  .u-hero-background() {
+  @mixin u-hero-background() {
     position: absolute;
     z-index: -1;
     top: 0;
@@ -8,19 +10,22 @@
     width: 200vw;
     height: 100%;
     content: '';
+
     // This CSS color variable is hardcoded in the hero.html template.
     background: var(--m-hero-background-color);
   }
 
-  .u-sidebar-background() {
+  @mixin u-sidebar-background() {
     position: absolute;
     z-index: -1;
     top: 0;
+
     // Add a offset to the width to handle covering gaps added by the wrapper.
     width: calc(100vw + 60px);
     height: 100%;
     content: '';
     background: var(--gray-5);
+
     // Expand off the screen to cover any margins added by the wrapper.
     left: -30px;
   }
@@ -35,25 +40,25 @@
 
       // Create the hero background bleed.
       &::after {
-        .u-hero-background();
+        @include u-hero-background;
       }
     }
 
     .u-layout-grid {
       &__sidebar {
         position: relative;
-        padding-left: unit(30px / @base-font-size-px, rem);
-        margin-left: unit(-30px / @base-font-size-px, rem);
-        padding-top: unit(45px / @base-font-size-px, rem);
+        padding-left: math.div(30px, $base-font-size-px) + rem;
+        margin-left: math.div(-30px, $base-font-size-px) + rem;
+        padding-top: math.div(45px, $base-font-size-px) + rem;
 
         &::after {
-          .u-sidebar-background();
+          @include u-sidebar-background;
         }
       }
     }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__wrapper {
           // Numbers below are 870 split into three parts
@@ -64,53 +69,53 @@
             'c-main c-sidebar';
         }
       }
-    });
+    }
   }
 
   // 2-1 Left-to-right (LTR) layout.
-  .u-layout-grid--2-1:not(&[dir='rtl']) {
+  .u-layout-grid--2-1:not(.u-layout-grid--2-1[dir='rtl']) {
     // This is for the sidebar bleed.
     overflow-x: hidden;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__main {
-          padding-right: unit(10px / @base-font-size-px, rem);
+          padding-right: math.div(10px, $base-font-size-px) + rem;
         }
 
         &__sidebar {
-          padding-left: unit(30px / @base-font-size-px, rem);
-          margin-left: unit(20px / @base-font-size-px, rem);
+          padding-left: math.div(30px, $base-font-size-px) + rem;
+          margin-left: math.div(20px, $base-font-size-px) + rem;
 
-          &:after {
+          &::after {
             border-left: 1px solid var(--gray-40);
             left: 0;
           }
         }
       }
-    });
+    }
   }
 
   // 2-1 Right-to-left (RTL) layout.
   .u-layout-grid--2-1[dir='rtl'] {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       .u-layout-grid {
         &__main {
-          padding-left: unit(10px / @base-font-size-px, rem);
+          padding-left: math.div(10px, $base-font-size-px) + rem;
         }
 
         &__sidebar {
-          padding-right: unit(30px / @base-font-size-px, rem);
-          margin-right: unit(20px / @base-font-size-px, rem);
+          padding-right: math.div(30px, $base-font-size-px) + rem;
+          margin-right: math.div(20px, $base-font-size-px) + rem;
 
-          &:after {
+          &::after {
             border-right: 1px solid var(--gray-40);
             right: 0;
           }
         }
       }
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/enhancements/layout-base.less b/cfgov/unprocessed/css/enhancements/layout-base.scss
similarity index 66%
rename from cfgov/unprocessed/css/enhancements/layout-base.less
rename to cfgov/unprocessed/css/enhancements/layout-base.scss
index d8a58d0226..c758f7843d 100644
--- a/cfgov/unprocessed/css/enhancements/layout-base.less
+++ b/cfgov/unprocessed/css/enhancements/layout-base.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @layer layout-base {
   // Establish the wrapper inside the grid container as the grid element.
   .u-layout-grid {
@@ -7,8 +9,8 @@
       display: grid;
       max-width: var(--layout-max-width);
       margin: 0 auto;
-      padding-left: unit(15px / @base-font-size-px, rem);
-      padding-right: unit(15px / @base-font-size-px, rem);
+      padding-left: math.div(15px, $base-font-size-px) + rem;
+      padding-right: math.div(15px, $base-font-size-px) + rem;
       grid-template-areas:
         'c-breadcrumbs'
         'c-secondary-nav'
@@ -25,7 +27,7 @@
 
     &__main {
       grid-area: c-main;
-      padding-top: unit((30px / @base-font-size-px), rem);
+      padding-top: math.div(30px, $base-font-size-px) + rem;
     }
 
     &__sidebar {
@@ -41,38 +43,38 @@
     }
 
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       &__breadcrumbs {
-        padding-left: unit(30px / @base-font-size-px, rem);
-        padding-right: unit(30px / @base-font-size-px, rem);
-        margin-left: unit(-30px / @base-font-size-px, rem);
-        margin-right: unit(-30px / @base-font-size-px, rem);
+        padding-left: math.div(30px, $base-font-size-px) + rem;
+        padding-right: math.div(30px, $base-font-size-px) + rem;
+        margin-left: math.div(-30px, $base-font-size-px) + rem;
+        margin-right: math.div(-30px, $base-font-size-px) + rem;
         background: var(--gray-5);
         border-bottom: 1px solid var(--gray-40);
       }
-    });
+    }
 
     // Tablet only.
-    .respond-to-range(@bp-sm-min, @bp-sm-max, {
+    @include respond-to-range($bp-sm-min, $bp-sm-max) {
       &__breadcrumbs {
-        padding-left: unit(15px / @base-font-size-px, rem);
-        padding-right: unit(15px / @base-font-size-px, rem);
+        padding-left: math.div(15px, $base-font-size-px) + rem;
+        padding-right: math.div(15px, $base-font-size-px) + rem;
       }
-    });
+    }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       &__wrapper {
         // This handles collapsing of the breadcrumbs space if they are absent.
         grid-template-rows: min-content 1fr;
-        padding-left: unit(30px / @base-font-size-px, rem);
-        padding-right: unit(30px / @base-font-size-px, rem);
+        padding-left: math.div(30px, $base-font-size-px) + rem;
+        padding-right: math.div(30px, $base-font-size-px) + rem;
       }
 
       // If we do not have breadcrumbs, the gap above the content is larger…
       &__main,
       &__secondary-nav {
-        margin-top: unit((15px / @base-font-size-px), rem);
+        margin-top: math.div(15px, $base-font-size-px) + rem;
       }
 
       // …than if we do have breadcrumbs
@@ -80,14 +82,14 @@
       &__breadcrumbs ~ &__secondary-nav {
         margin-top: 0;
       }
-    });
+    }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       &__secondary-nav {
-        padding-top: unit((30px / @base-font-size-px), rem);
+        padding-top: math.div(30px, $base-font-size-px) + rem;
       }
-    });
+    }
   }
 
   // Modifier to remove max-width value. Used on CCDB, for example.
diff --git a/cfgov/unprocessed/css/enhancements/layout.less b/cfgov/unprocessed/css/enhancements/layout.less
deleted file mode 100644
index 4a43fa8573..0000000000
--- a/cfgov/unprocessed/css/enhancements/layout.less
+++ /dev/null
@@ -1,91 +0,0 @@
-@import (less) './layout-base.less';
-@import (less) './layout-2-1.less';
-@import (less) './layout-1-3.less';
-
-.wrapper--match-content {
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    max-width: @grid_wrapper-width - ( @grid_gutter-width * 2 );
-  });
-}
-
-.content--half-top-on-desk {
-  // Desktop and above.
-  .respond-to-min(@bp-med-min, {
-    padding-top: unit( @grid_gutter-width / @base-font-size-px, em);
-
-    &:after {
-      top: unit( @grid_gutter-width / @base-font-size-px, em) !important;
-    }
-  });
-}
-
-.content--flush-sides-on-small {
-  // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-    padding-left: 0;
-    padding-right: 0;
-    border-width: 0;
-  });
-}
-
-.content-l__col {
-  &.content-l__col-1 + &.content-l__col-1 {
-    margin-top: 0;
-  }
-}
-
-.content__hide-horizontal-overflow {
-  overflow-x: hidden;
-}
-
-// Center content and bleed full-width images into gutters
-// Used on our story pages
-.content__center-image-bleed {
-  .u-layout-grid__main {
-    max-width: 41.875rem;
-    margin-left: auto;
-    margin-right: auto;
-
-    .o-full-width-text-group {
-      overflow: inherit;
-    }
-
-    .image-bleed {
-      @half-gutter-width: @grid_gutter-width / 2;
-      @two-gutter-widths: @grid_gutter-width * 2;
-
-      width: ~'calc( 100vw - @{grid_gutter-width} )';
-      max-width: ~'calc( 100vw - @{grid_gutter-width} )';
-      margin-left: ~'calc( -50vw + @{half-gutter-width} )';
-      margin-right: ~'calc( -50vw + @{half-gutter-width} )';
-      position: relative;
-      left: 50%;
-      right: 50%;
-
-      // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
-        width: ~'calc( 100vw - @{two-gutter-widths} )';
-        max-width: ~'calc( 100vw - @{two-gutter-widths} )';
-        margin-left: ~'calc( -50vw + @{grid_gutter-width} )';
-        margin-right: ~'calc( -50vw + @{grid_gutter-width} )';
-      });
-
-      .respond-to-min(@bp-xl-min, {
-        width: @grid_wrapper-width - @two-gutter-widths;
-        max-width: @grid_wrapper-width - @two-gutter-widths;
-        margin-left: -( ( @grid_wrapper-width - @two-gutter-widths ) / 2 );
-        margin-right: -( ( @grid_wrapper-width - @two-gutter-widths ) / 2 );
-      });
-    }
-  }
-}
-
-// Increase the size of all headings by one level
-// Used on our story pages
-// @TODO: Expose heading class modifiers in wagtail
-.content__supersize-headings {
-  .o-full-width-text-group h2 {
-    .h1();
-  }
-}
diff --git a/cfgov/unprocessed/css/enhancements/layout.scss b/cfgov/unprocessed/css/enhancements/layout.scss
new file mode 100644
index 0000000000..547cf7b769
--- /dev/null
+++ b/cfgov/unprocessed/css/enhancements/layout.scss
@@ -0,0 +1,94 @@
+@use 'sass:math';
+@import './layout-base';
+@import './layout-2-1';
+@import './layout-1-3';
+
+.wrapper--match-content {
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    max-width: $grid_wrapper-width - ($grid-gutter-width * 2);
+  }
+}
+
+.content--half-top-on-desk {
+  // Desktop and above.
+  @include respond-to-min($bp-med-min) {
+    padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    &::after {
+      top: math.div($grid-gutter-width, $base-font-size-px) + em !important;
+    }
+  }
+}
+
+.content--flush-sides-on-small {
+  // Tablet and below.
+  @include respond-to-max($bp-sm-max) {
+    padding-left: 0;
+    padding-right: 0;
+    border-width: 0;
+  }
+}
+
+.content-l__col {
+  &.content-l__col-1 + &.content-l__col-1 {
+    margin-top: 0;
+  }
+}
+
+.content__hide-horizontal-overflow {
+  overflow-x: hidden;
+}
+
+// Center content and bleed full-width images into gutters
+// Used on our story pages
+.content__center-image-bleed {
+  .u-layout-grid__main {
+    max-width: 41.875rem;
+    margin-left: auto;
+    margin-right: auto;
+
+    .o-full-width-text-group {
+      overflow: inherit;
+    }
+
+    .image-bleed {
+      $half-gutter-width: math.div($grid-gutter-width, 2);
+      $two-gutter-widths: $grid-gutter-width * 2;
+
+      width: 'calc( 100vw - #{$grid-gutter-width} )';
+      max-width: 'calc( 100vw - #{$grid-gutter-width} )';
+      margin-left: 'calc( -50vw + #{$half-gutter-width} )';
+      margin-right: 'calc( -50vw + #{$half-gutter-width} )';
+      position: relative;
+      left: 50%;
+      right: 50%;
+
+      // Tablet and above.
+      @include respond-to-min($bp-sm-min) {
+        width: 'calc( 100vw - #{$two-gutter-widths} )';
+        max-width: 'calc( 100vw - #{$two-gutter-widths} )';
+        margin-left: 'calc( -50vw + #{$grid-gutter-width} )';
+        margin-right: 'calc( -50vw + #{$grid-gutter-width} )';
+      }
+
+      @include respond-to-min($bp-xl-min) {
+        width: $grid_wrapper-width - $two-gutter-widths;
+        max-width: $grid_wrapper-width - $two-gutter-widths;
+        margin-left: -1 *
+          math.div(($grid_wrapper-width - $two-gutter-widths), 2);
+        margin-right: -1 *
+          math.div(($grid_wrapper-width - $two-gutter-widths), 2);
+      }
+    }
+  }
+}
+
+// Increase the size of all headings by one level
+// Used on our story pages
+// $TODO: Expose heading class modifiers in wagtail
+.content__supersize-headings {
+  .o-full-width-text-group h2 {
+    @include h1;
+  }
+}
diff --git a/cfgov/unprocessed/css/enhancements/tables.less b/cfgov/unprocessed/css/enhancements/tables.less
deleted file mode 100644
index 5acf9e87f5..0000000000
--- a/cfgov/unprocessed/css/enhancements/tables.less
+++ /dev/null
@@ -1,19 +0,0 @@
-// Tablet and below.
-.respond-to-max(@bp-sm-max, {
-  table {
-    width: 100%;
-  }
-});
-
-.o-table {
-  tbody th {
-    border-bottom: 1px solid @table-head-bg;
-    padding: unit(10px / @font-size, em);
-    color: @table-head-text;
-    background: @table-head-bg;
-    .h5();
-    &:first-child {
-      border-top: 1px solid @table-head-bg;
-    }
-  }
-}
diff --git a/cfgov/unprocessed/css/enhancements/tables.scss b/cfgov/unprocessed/css/enhancements/tables.scss
new file mode 100644
index 0000000000..93c1a3b24c
--- /dev/null
+++ b/cfgov/unprocessed/css/enhancements/tables.scss
@@ -0,0 +1,23 @@
+@use 'sass:math';
+
+// Tablet and below.
+@include respond-to-max($bp-sm-max) {
+  table {
+    width: 100%;
+  }
+}
+
+.o-table {
+  tbody th {
+    border-bottom: 1px solid $table-head-bg;
+    padding: math.div(10px, $size-v) + em;
+    color: $table-head-text;
+    background: $table-head-bg;
+
+    @include h5;
+
+    &:first-child {
+      border-top: 1px solid $table-head-bg;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/enhancements/typography.less b/cfgov/unprocessed/css/enhancements/typography.scss
similarity index 87%
rename from cfgov/unprocessed/css/enhancements/typography.less
rename to cfgov/unprocessed/css/enhancements/typography.scss
index da329d557d..e3c4fa2cc4 100644
--- a/cfgov/unprocessed/css/enhancements/typography.less
+++ b/cfgov/unprocessed/css/enhancements/typography.scss
@@ -1,5 +1,5 @@
 dt {
-  .h5();
+  @include h5;
   display: inline-block;
 
   margin-bottom: 0.5em;
@@ -20,7 +20,7 @@ dd {
 }
 
 .eyebrow {
-  .heading-5();
+  @include heading-5;
 }
 
 .a-link__text {
diff --git a/cfgov/unprocessed/css/enhancements/utilities.less b/cfgov/unprocessed/css/enhancements/utilities.scss
similarity index 52%
rename from cfgov/unprocessed/css/enhancements/utilities.less
rename to cfgov/unprocessed/css/enhancements/utilities.scss
index 09ee393db2..e9bfed1809 100644
--- a/cfgov/unprocessed/css/enhancements/utilities.less
+++ b/cfgov/unprocessed/css/enhancements/utilities.scss
@@ -1,37 +1,37 @@
-.u-w95pct {
+@mixin u-w95pct() {
   width: 95%;
 }
 
-.u-w85pct {
+@mixin u-w85pct() {
   width: 85%;
 }
 
-.u-w65pct {
+@mixin u-w65pct() {
   width: 65%;
 }
 
-.u-w55pct {
+@mixin u-w55pct() {
   width: 55%;
 }
 
-.u-w45pct {
+@mixin u-w45pct() {
   width: 45%;
 }
 
-.u-w35pct {
+@mixin u-w35pct() {
   width: 35%;
 }
 
-.u-w15pct {
+@mixin u-w15pct() {
   width: 15%;
 }
 
-.u-w5pct {
+@mixin u-w5pct() {
   width: 5%;
 }
 
 /* Used for cropping views in multi-level menus. */
 
-.u-hidden-overflow {
+@mixin u-hidden-overflow() {
   overflow: hidden;
 }
diff --git a/cfgov/unprocessed/css/images.less b/cfgov/unprocessed/css/images.scss
similarity index 100%
rename from cfgov/unprocessed/css/images.less
rename to cfgov/unprocessed/css/images.scss
diff --git a/cfgov/unprocessed/css/main.less b/cfgov/unprocessed/css/main.less
deleted file mode 100644
index 9b52ffb4b2..0000000000
--- a/cfgov/unprocessed/css/main.less
+++ /dev/null
@@ -1,123 +0,0 @@
-/* ==========================================================================
-   consumerfinance.gov
-   Main Less file
-   ========================================================================== */
-
-/* Base styles
-   ========================================================================== */
-
-// Import required CF components.
-@import (less) 'cfpb-core.less';
-@import (less) 'cfpb-icons.less';
-@import (less) 'cfpb-buttons.less';
-@import (less) 'cfpb-forms.less';
-@import (less) 'cfpb-grid.less';
-@import (less) 'cfpb-layout.less';
-@import (less) 'cfpb-typography.less';
-@import (less) 'cfpb-notifications.less';
-@import (less) 'cfpb-pagination.less';
-@import (less) 'cfpb-expandables.less';
-@import (less) 'cfpb-tables.less';
-
-// Webfont variables
-// This is the path for self-hosted fonts.
-@cf-fonts-path: '/static/fonts';
-
-// Enhancements that are on a migration path to being added to CF.
-// CF Core
-@import (less) 'enhancements/utilities.less';
-
-// CF Typography
-@import (less) 'enhancements/typography.less';
-
-// CF Layout
-@import (less) 'enhancements/layout.less';
-
-// CF Forms
-@import (less) 'enhancements/forms.less';
-
-// CF Tables
-@import (less) 'enhancements/tables.less';
-
-/* Base patterns
-   ========================================================================== */
-
-@import (less) 'images.less';
-@import (less) 'misc.less';
-@import (less) 'schema.less';
-
-/* Amalgamated patterns
-   ========================================================================== */
-
-@import (less) 'calendar-icon.less';
-
-/* Atom pieces
-   ========================================================================== */
-
-@import (less) 'atoms/overlay.less';
-@import (less) 'atoms/tag.less';
-@import (less) 'atoms/rule-break.less';
-
-/* Molecule pieces
-   ========================================================================== */
-
-@import (less) 'molecules/call-to-action.less';
-@import (less) 'molecules/file-input.less';
-@import (less) 'molecules/form-field-with-button.less';
-@import (less) 'molecules/full-width-media.less';
-@import (less) 'molecules/global-eyebrow.less';
-@import (less) 'molecules/global-header-cta.less';
-@import (less) 'molecules/global-search.less';
-@import (less) 'molecules/info-unit.less';
-@import (less) 'molecules/inset.less';
-@import (less) 'molecules/translation-links.less';
-@import (less) 'molecules/related-metadata.less';
-@import (less) 'molecules/related-posts.less';
-@import (less) 'molecules/social-media.less';
-@import (less) 'molecules/tags.less';
-
-/* Organism pieces
-   ========================================================================== */
-@import (less) 'organisms/audio-player.less';
-@import (less) 'organisms/footer.less';
-@import (less) 'organisms/filterable-list-controls.less';
-@import (less) 'organisms/full-width-text-group.less';
-@import (less) 'organisms/header.less';
-@import (less) 'organisms/info-unit-group.less';
-@import (less) 'organisms/item-introduction.less';
-@import (less) 'organisms/mega-menu.less';
-@import (less) 'organisms/post-preview.less';
-@import (less) 'organisms/prefooter.less';
-@import (less) 'organisms/secondary-nav.less';
-@import (less) 'organisms/sidebar-breakout.less';
-@import (less) 'organisms/video-player.less';
-
-/* Template pieces
-   ========================================================================== */
-
-@import (less) 'skip-nav.less';
-@import (less) 'breadcrumbs.less';
-@import (less) 'footnotes.less';
-
-/* Print styles
-   ========================================================================== */
-
-@import (less) 'print.less';
-
-// TODO: Move to Design System.
-.u-text-centered {
-  text-align: center;
-}
-
-@horizontal-rule: var(--gray-40);
-
-body {
-  -webkit-font-smoothing: antialiased;
-}
-
-// Make Arial the first-line font in Vietnamese pages' main content area.
-// This is used because Avenir Next does not contain all Vietnamese diacritics.
-// See https://[GHE]/Design-Development/Design-and-Content-Team/issues/175
-html[lang='vi'] body main {
-  font-family: Arial, 'Avenir Next', sans-serif;
-}
diff --git a/cfgov/unprocessed/css/main.scss b/cfgov/unprocessed/css/main.scss
new file mode 100644
index 0000000000..bf759fe21f
--- /dev/null
+++ b/cfgov/unprocessed/css/main.scss
@@ -0,0 +1,120 @@
+/* ==========================================================================
+   consumerfinance.gov
+   Main Less file
+   ========================================================================== */
+
+/* Base styles
+   ========================================================================== */
+
+// Import required CF components.
+@import 'cfpb-core';
+@import 'cfpb-icons';
+@import 'cfpb-buttons';
+@import 'cfpb-forms';
+@import 'cfpb-grid';
+@import 'cfpb-layout';
+@import 'cfpb-typography';
+@import 'cfpb-notifications';
+@import 'cfpb-pagination';
+@import 'cfpb-expandables';
+@import 'cfpb-tables';
+
+// Webfont variables
+// This is the path for self-hosted fonts.
+$cf-fonts-path: '/static/fonts';
+
+// Enhancements that are on a migration path to being added to CF.
+// CF Core
+@import 'enhancements/utilities';
+
+// CF Typography
+@import 'enhancements/typography';
+
+// CF Layout
+@import 'enhancements/layout';
+
+// CF Forms
+@import 'enhancements/forms';
+
+// CF Tables
+@import 'enhancements/tables';
+
+/* Base patterns
+   ========================================================================== */
+
+@import 'images';
+@import 'misc';
+@import 'schema';
+
+/* Amalgamated patterns
+   ========================================================================== */
+
+@import 'calendar-icon';
+
+/* Atom pieces
+   ========================================================================== */
+
+@import 'atoms/overlay';
+@import 'atoms/tag';
+@import 'atoms/rule-break';
+
+/* Molecule pieces
+   ========================================================================== */
+
+@import 'molecules/call-to-action';
+@import 'molecules/file-input';
+@import 'molecules/form-field-with-button';
+@import 'molecules/full-width-media';
+@import 'molecules/global-eyebrow';
+@import 'molecules/global-header-cta';
+@import 'molecules/global-search';
+@import 'molecules/info-unit';
+@import 'molecules/inset';
+@import 'molecules/translation-links';
+@import 'molecules/related-metadata';
+@import 'molecules/related-posts';
+@import 'molecules/social-media';
+@import 'molecules/tags';
+
+/* Organism pieces
+   ========================================================================== */
+@import 'organisms/audio-player';
+@import 'organisms/footer';
+@import 'organisms/filterable-list-controls';
+@import 'organisms/full-width-text-group';
+@import 'organisms/header';
+@import 'organisms/info-unit-group';
+@import 'organisms/item-introduction';
+@import 'organisms/mega-menu';
+@import 'organisms/post-preview';
+@import 'organisms/prefooter';
+@import 'organisms/secondary-nav';
+@import 'organisms/sidebar-breakout';
+@import 'organisms/video-player';
+
+/* Template pieces
+   ========================================================================== */
+
+@import 'skip-nav';
+@import 'breadcrumbs';
+
+/* Print styles
+   ========================================================================== */
+
+@import 'print';
+
+// TODO: Move to Design System.
+.u-text-centered {
+  text-align: center;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Make Arial the first-line font in Vietnamese pages' main content area.
+// This is used because Avenir Next does not contain all Vietnamese diacritics.
+// See https://[GHE]/Design-Development/Design-and-Content-Team/issues/175
+html[lang='vi'] body main {
+  font-family: Arial, 'Avenir Next', sans-serif;
+}
diff --git a/cfgov/unprocessed/css/misc.less b/cfgov/unprocessed/css/misc.scss
old mode 100755
new mode 100644
similarity index 90%
rename from cfgov/unprocessed/css/misc.less
rename to cfgov/unprocessed/css/misc.scss
index 4b303a82f5..6d712047cb
--- a/cfgov/unprocessed/css/misc.less
+++ b/cfgov/unprocessed/css/misc.scss
@@ -1,15 +1,17 @@
-.u-drop-shadow-after() {
+@mixin u-drop-shadow-after() {
   &::after {
     display: block;
     height: 5px;
     width: 100%;
 
     position: absolute;
+
     // Offset for thickness of shadow.
     bottom: -5px;
     left: 0;
 
     background: var(--gray);
+
     // Whitespace in content so element can have dimensions set.
     content: '';
     opacity: 0.2;
diff --git a/cfgov/unprocessed/css/molecules/call-to-action.less b/cfgov/unprocessed/css/molecules/call-to-action.less
deleted file mode 100644
index ddd9b4ee18..0000000000
--- a/cfgov/unprocessed/css/molecules/call-to-action.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.m-call-to-action {
-  &__text {
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-  }
-}
diff --git a/cfgov/unprocessed/css/molecules/call-to-action.scss b/cfgov/unprocessed/css/molecules/call-to-action.scss
new file mode 100644
index 0000000000..368c5709f9
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/call-to-action.scss
@@ -0,0 +1,7 @@
+@use 'sass:math';
+
+.m-call-to-action {
+  &__text {
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/file-input.less b/cfgov/unprocessed/css/molecules/file-input.scss
similarity index 100%
rename from cfgov/unprocessed/css/molecules/file-input.less
rename to cfgov/unprocessed/css/molecules/file-input.scss
diff --git a/cfgov/unprocessed/css/molecules/form-field-with-button.less b/cfgov/unprocessed/css/molecules/form-field-with-button.scss
similarity index 67%
rename from cfgov/unprocessed/css/molecules/form-field-with-button.less
rename to cfgov/unprocessed/css/molecules/form-field-with-button.scss
index 6df124183e..7c1e14a2fd 100644
--- a/cfgov/unprocessed/css/molecules/form-field-with-button.less
+++ b/cfgov/unprocessed/css/molecules/form-field-with-button.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // TODO: Look into merging email-signup and form-field-with-button styles
 // Form field with button isn't used anywhere else
 .m-form-field-with-button {
@@ -7,6 +9,7 @@
 
   &__info,
   .a-btn {
-    margin-top: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
+    margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/full-width-media.less b/cfgov/unprocessed/css/molecules/full-width-media.less
deleted file mode 100644
index 340dd2c7fd..0000000000
--- a/cfgov/unprocessed/css/molecules/full-width-media.less
+++ /dev/null
@@ -1,14 +0,0 @@
-.m-full-width-media {
-  &--bottom-rule {
-    padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-    border-bottom: 1px solid @horizontal-rule;
-  }
-
-  &__image {
-    display: block;
-  }
-
-  &__caption {
-    margin-top: unit(15px / @base-font-size-px, rem);
-  }
-}
diff --git a/cfgov/unprocessed/css/molecules/full-width-media.scss b/cfgov/unprocessed/css/molecules/full-width-media.scss
new file mode 100644
index 0000000000..ba395c0e38
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/full-width-media.scss
@@ -0,0 +1,19 @@
+@use 'sass:math';
+
+.m-full-width-media {
+  &--bottom-rule {
+    padding-bottom: math.div(
+        math.div($grid-gutter-width, 2),
+        $base-font-size-px
+      ) + rem;
+    border-bottom: 1px solid var(--gray-40);
+  }
+
+  &__image {
+    display: block;
+  }
+
+  &__caption {
+    margin-top: math.div(15px, $base-font-size-px) + rem;
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/global-eyebrow.less b/cfgov/unprocessed/css/molecules/global-eyebrow.less
deleted file mode 100644
index 445e163ab7..0000000000
--- a/cfgov/unprocessed/css/molecules/global-eyebrow.less
+++ /dev/null
@@ -1,107 +0,0 @@
-.m-global-eyebrow {
-  font-size: unit(12px / @base-font-size-px, em);
-
-  &__actions {
-    text-align: right;
-  }
-
-  &__languages {
-    display: inline;
-
-    .m-list__item:not(:last-child) {
-      margin-right: unit(7px / 12px, em);
-      margin-bottom: 0;
-
-      .respond-to-min(@bp-lg-min, {
-        margin-right: unit( 10px / 12px, em );
-      });
-    }
-
-    a {
-      .u-link-no-border();
-    }
-  }
-
-  &__phone {
-    padding-left: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  }
-
-  &--horizontal {
-    width: 100%;
-    display: inline-block;
-    padding-top: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    padding-bottom: unit(@grid_gutter-width / 3 / @base-font-size-px, em);
-    background: var(--gray-5);
-    border-bottom: 1px solid var(--gray-40);
-
-    /* This is to allow vertical overlap with the languages */
-    .a-tagline {
-      float: left;
-    }
-
-    .m-global-eyebrow__languages {
-      text-align: right;
-    }
-
-    // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
-      .m-global-eyebrow__actions {
-        display: none;
-      }
-      /* Prevent spacing issues since the languages aren't displayed */
-      .a-tagline {
-        float: none;
-      }
-    });
-  }
-
-  &--list {
-    padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-    padding-left: unit(@grid_gutter-width / @base-font-size-px, rem);
-    padding-right: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-    padding-bottom: unit(@grid_gutter-width / @base-font-size-px, rem);
-
-    .m-global-eyebrow__actions {
-      padding: 0;
-      border: 0;
-      margin: 0;
-
-      text-align: left;
-    }
-
-    .m-global-eyebrow__phone,
-    .m-global-eyebrow__languages {
-      display: block;
-      padding-left: 0;
-    }
-
-    .m-global-eyebrow__phone {
-      border-top: 1px solid var(--gray-40);
-      padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-
-      // Apply padding to the phone number to increase the touch area.
-      a {
-        padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-        padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-      }
-    }
-
-    .m-global-eyebrow__languages {
-      margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-
-      .m-list__item {
-        // Apply padding to the language links to increase their touch area.
-        a {
-          display: block;
-          text-align: center;
-          min-width: 48px;
-          padding-top: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-          padding-bottom: unit(
-            @grid_gutter-width / 2 / @base-font-size-px,
-            rem
-          );
-        }
-      }
-    }
-  }
-}
diff --git a/cfgov/unprocessed/css/molecules/global-eyebrow.scss b/cfgov/unprocessed/css/molecules/global-eyebrow.scss
new file mode 100644
index 0000000000..a693dbe699
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/global-eyebrow.scss
@@ -0,0 +1,130 @@
+@use 'sass:math';
+
+.m-global-eyebrow {
+  font-size: math.div(12px, $base-font-size-px) + em;
+
+  &__actions {
+    text-align: right;
+  }
+
+  &__languages {
+    display: inline;
+
+    .m-list__item:not(:last-child) {
+      margin-right: math.div(7px, 12px) + em;
+      margin-bottom: 0;
+
+      @include respond-to-min($bp-lg-min) {
+        margin-right: math.div(10px, 12px) + em;
+      }
+    }
+
+    a {
+      @include u-link-no-border;
+    }
+  }
+
+  &__phone {
+    padding-left: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+  }
+
+  &--horizontal {
+    width: 100%;
+    display: inline-block;
+    padding-top: math.div(math.div($grid-gutter-width, 3), $base-font-size-px) +
+      em;
+    padding-bottom: math.div(
+        math.div($grid-gutter-width, 3),
+        $base-font-size-px
+      ) + em;
+    background: var(--gray-5);
+    border-bottom: 1px solid var(--gray-40);
+
+    /* This is to allow vertical overlap with the languages */
+    .a-tagline {
+      float: left;
+    }
+
+    .m-global-eyebrow__languages {
+      text-align: right;
+    }
+
+    // Tablet and below.
+    @include respond-to-max($bp-sm-max) {
+      .m-global-eyebrow__actions {
+        display: none;
+      }
+
+      /* Prevent spacing issues since the languages aren't displayed */
+      .a-tagline {
+        float: none;
+      }
+    }
+  }
+
+  &--list {
+    padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      rem;
+    padding-left: math.div($grid-gutter-width, $base-font-size-px) + rem;
+    padding-right: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      rem;
+    padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + rem;
+
+    .m-global-eyebrow__actions {
+      padding: 0;
+      border: 0;
+      margin: 0;
+
+      text-align: left;
+    }
+
+    .m-global-eyebrow__phone,
+    .m-global-eyebrow__languages {
+      display: block;
+      padding-left: 0;
+    }
+
+    .m-global-eyebrow__phone {
+      border-top: 1px solid var(--gray-40);
+      padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        rem;
+
+      // Apply padding to the phone number to increase the touch area.
+      a {
+        padding-top: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + rem;
+        padding-bottom: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + rem;
+      }
+    }
+
+    .m-global-eyebrow__languages {
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + rem;
+
+      .m-list__item {
+        // Apply padding to the language links to increase their touch area.
+        a {
+          display: block;
+          text-align: center;
+          min-width: 48px;
+          padding-top: math.div(
+              math.div($grid-gutter-width, 2),
+              $base-font-size-px
+            ) + rem;
+          padding-bottom: math.div(
+              math.div($grid-gutter-width, 2),
+              $base-font-size-px
+            ) + rem;
+        }
+      }
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/global-header-cta.less b/cfgov/unprocessed/css/molecules/global-header-cta.less
deleted file mode 100644
index 4308474710..0000000000
--- a/cfgov/unprocessed/css/molecules/global-header-cta.less
+++ /dev/null
@@ -1,12 +0,0 @@
-.m-global-header-cta {
-  border-left: 1px solid var(--gray-40);
-  padding-left: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  padding-top: 13px;
-  padding-bottom: 11px;
-
-  a {
-    // Colors for :link, :visited, :hover, :focus, :active.
-    .u-link-colors( var(--pacific), var(--pacific), var(--pacific-dark), var(--pacific), var(--navy-dark) );
-    font-weight: 500;
-  }
-}
diff --git a/cfgov/unprocessed/css/molecules/global-header-cta.scss b/cfgov/unprocessed/css/molecules/global-header-cta.scss
new file mode 100644
index 0000000000..15f0c58d04
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/global-header-cta.scss
@@ -0,0 +1,21 @@
+@use 'sass:math';
+
+.m-global-header-cta {
+  border-left: 1px solid var(--gray-40);
+  padding-left: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+    em;
+  padding-top: 13px;
+  padding-bottom: 11px;
+
+  a {
+    // Colors for :link, :visited, :hover, :focus, :active.
+    @include u-link-colors(
+      var(--pacific),
+      var(--pacific),
+      var(--pacific-dark),
+      var(--pacific),
+      var(--navy-dark)
+    );
+    font-weight: 500;
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/global-search.less b/cfgov/unprocessed/css/molecules/global-search.scss
similarity index 72%
rename from cfgov/unprocessed/css/molecules/global-search.less
rename to cfgov/unprocessed/css/molecules/global-search.scss
index 1f3ddcdbc4..aa02babfe3 100644
--- a/cfgov/unprocessed/css/molecules/global-search.less
+++ b/cfgov/unprocessed/css/molecules/global-search.scss
@@ -1,8 +1,11 @@
+@use 'sass:math';
+
 // TODO: Move the theme variables to /enhancements/ for CF.
 
-@margin-em: unit(@grid_gutter-width / @base-font-size-px, em);
-@margin-half-em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-@mobile-trigger-ht-px: 54px;
+$margin-em: math.div($grid-gutter-width, $base-font-size-px) + em;
+$margin-half-em: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+  em;
+$mobile-trigger-ht-px: 54px;
 
 .m-global-search {
   &__trigger {
@@ -20,9 +23,9 @@
     box-sizing: border-box;
     border-left: 1px solid transparent;
 
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       font-size: 18px;
-    });
+    }
 
     &:focus {
       outline: 1px dotted var(--black);
@@ -61,18 +64,17 @@
   }
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
-
+  @include respond-to-max($bp-sm-max) {
     &__fallback {
-      margin: @margin-half-em;
+      margin: $margin-half-em;
     }
 
     &__trigger {
       padding-top: 5px;
-      height: @mobile-trigger-ht-px;
-      min-width: @mobile-trigger-ht-px;
+      height: $mobile-trigger-ht-px;
+      min-width: $mobile-trigger-ht-px;
 
-      &[aria-expanded="true"] {
+      &[aria-expanded='true'] {
         background: var(--gray-10);
         border-left: 1px solid var(--gray-40);
 
@@ -92,7 +94,7 @@
           border-left: 1px solid var(--gray-40);
 
           // Important needed to override background color in expanded state.
-          background: var(--gray-20)  !important;
+          background: var(--gray-20) !important;
         }
       }
     }
@@ -101,11 +103,11 @@
       width: 100%;
 
       &-form {
-        .u-drop-shadow-after();
+        @include u-drop-shadow-after;
 
         box-sizing: border-box;
         width: 100%;
-        padding: @margin-em @margin-half-em @margin-half-em;
+        padding: $margin-em $margin-half-em $margin-half-em;
 
         left: 0;
         z-index: 10;
@@ -115,28 +117,27 @@
         border-bottom: 1px solid var(--gray-40);
       }
     }
-  });
+  }
 
   // Tablet only.
-  .respond-to-range(@bp-sm-min, @bp-sm-max, {
+  @include respond-to-range($bp-sm-min, $bp-sm-max) {
     &__trigger {
       // Min-width sets open/close states to same size.
       min-width: 110px;
 
-      padding-left: unit(@grid_gutter-width / 2 / 18px, em);
-      padding-right: unit(@grid_gutter-width / 2 / 18px, em);
+      padding-left: math.div(math.div($grid-gutter-width, 2), 18px) + em;
+      padding-right: math.div(math.div($grid-gutter-width, 2), 18px) + em;
     }
-
-  });
+  }
 
   // Desktop and above
-  .respond-to-min(@bp-med-min, {
-
+  @include respond-to-min($bp-med-min) {
     // Center on the call to action (CTA) divider to right of search.
     padding-top: 6px;
     padding-bottom: 5px;
+
     // Match CTA offset from divider.
-    padding-right: @margin-half-em;
+    padding-right: $margin-half-em;
     position: relative;
 
     overflow: hidden;
@@ -146,29 +147,30 @@
 
       // Match height of input with button.
       padding: 8px 0;
-      line-height: unit(19px / @base-font-size-px);
+      line-height: math.div(19px, $base-font-size-px);
 
-      &[aria-expanded="true"] {
-        .u-invisible();
+      &[aria-expanded='true'] {
+        @include u-invisible;
       }
     }
 
     &__content {
-      right: @margin-half-em;
+      right: $margin-half-em;
       width: auto;
+
       // Add margin so that the focus rectangle is not cropped by
       // the hidden overflow of the search container element.
       margin-left: 3px;
     }
-  });
+  }
 
   // Hide on print.
-  .respond-to-print( {
+  @include respond-to-print {
     & {
       // Important needed to override JS display settings.
       display: none !important;
     }
-  });
+  }
 
   // Hide fallback by default.
   &__fallback {
diff --git a/cfgov/unprocessed/css/molecules/info-unit.less b/cfgov/unprocessed/css/molecules/info-unit.less
deleted file mode 100644
index 6d8be25bc3..0000000000
--- a/cfgov/unprocessed/css/molecules/info-unit.less
+++ /dev/null
@@ -1,80 +0,0 @@
-@m-info-unit_img__sm: 130px;
-@m-info-unit_img__lg: 150px;
-
-/*
-    info-unit Helper Mixin -
-    This mixin is used to create the main info-unit class below.
-    It shouldn't be used on it's own.
- */
-.u-info-unit-base() {
-  &__image {
-    display: block;
-    margin-right: auto;
-    margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    margin-left: auto;
-    background-size: cover;
-
-    &--square {
-      width: unit(@m-info-unit_img__sm / @base-font-size-px, em);
-      height: unit(@m-info-unit_img__sm / @base-font-size-px, em);
-
-      // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-        width: unit(@m-info-unit_img__lg / @base-font-size-px, em);
-        height: unit(@m-info-unit_img__lg / @base-font-size-px, em);
-      });
-    }
-  }
-
-  &__heading-link {
-    display: block;
-
-    .u-link-colors( var(--black), var(--pacific-80) );
-  }
-}
-
-/*
-    Inline info-unit Helper Mixin -
-    This mixin is used to modify an info-unit to an inline arrangement.
-    Most of the time the `.m-info-unit__inline` class will be sufficient,
-    but there are limited situations the inline arrangement needs to be conditioned.
-    See /pages/home.less L:103
- */
-.u-info-unit-base__inline( @img_size ) {
-  .u-clearfix();
-
-  .m-info-unit__image {
-    float: left;
-    margin-bottom: 0;
-  }
-
-  .m-info-unit__content,
-  .m-info-unit__heading-text {
-    margin-left: unit(
-      (@img_size + @grid_gutter-width) / @base-font-size-px,
-      em
-    );
-  }
-}
-
-.m-info-unit {
-  .u-info-unit-base();
-
-  &__inline {
-    // Tablet only.
-    .respond-to-range(@bp-sm-min, @bp-sm-max, {
-      .u-info-unit-base__inline( @m-info-unit_img__sm );
-    });
-
-    .respond-to-min(@bp-med-max, {
-      .u-info-unit-base__inline( @m-info-unit_img__lg );
-    });
-  }
-
-  // Hide image on print.
-  .respond-to-print( {
-    &__image {
-      display: none;
-    }
-  });
-}
diff --git a/cfgov/unprocessed/css/molecules/info-unit.scss b/cfgov/unprocessed/css/molecules/info-unit.scss
new file mode 100644
index 0000000000..468f6bb834
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/info-unit.scss
@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+$info-unit-img-sm: 130px;
+$m-info-unit-img-lg: 150px;
+
+/*
+    info-unit Helper Mixin -
+    This mixin is used to create the main info-unit class below.
+    It shouldn't be used on it's own.
+ */
+@mixin u-info-unit-base() {
+  &__image {
+    display: block;
+    margin-right: auto;
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+    margin-left: auto;
+    background-size: cover;
+
+    &--square {
+      width: math.div($info-unit-img-sm, $base-font-size-px) + em;
+      height: math.div($info-unit-img-sm, $base-font-size-px) + em;
+
+      // Desktop and above.
+      @include respond-to-min($bp-med-min) {
+        width: math.div($m-info-unit-img-lg, $base-font-size-px) + em;
+        height: math.div($m-info-unit-img-lg, $base-font-size-px) + em;
+      }
+    }
+  }
+
+  &__heading-link {
+    display: block;
+
+    @include u-link-colors(var(--black), var(--pacific-80));
+  }
+}
+
+/*
+    Inline info-unit Helper Mixin -
+    This mixin is used to modify an info-unit to an inline arrangement.
+    Most of the time the `.m-info-unit__inline` class will be sufficient,
+    but there are limited situations the inline arrangement needs to be conditioned.
+    See /pages/home.scss L:103
+ */
+@mixin u-info-unit-base-inline($img_size) {
+  @include u-clearfix;
+
+  .m-info-unit__image {
+    float: left;
+    margin-bottom: 0;
+  }
+
+  .m-info-unit__content,
+  .m-info-unit__heading-text {
+    margin-left: math.div(($img_size + $grid-gutter-width), $base-font-size-px) +
+      em;
+  }
+}
+
+.m-info-unit {
+  @include u-info-unit-base;
+
+  &__inline {
+    // Tablet only.
+    @include respond-to-range($bp-sm-min, $bp-sm-max) {
+      @include u-info-unit-base-inline($info-unit-img-sm);
+    }
+
+    @include respond-to-min($bp-med-max) {
+      @include u-info-unit-base-inline($m-info-unit-img-lg);
+    }
+  }
+
+  // Hide image on print.
+  @include respond-to-print {
+    &__image {
+      display: none;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/inset.less b/cfgov/unprocessed/css/molecules/inset.less
deleted file mode 100644
index 05dadf5f1a..0000000000
--- a/cfgov/unprocessed/css/molecules/inset.less
+++ /dev/null
@@ -1,95 +0,0 @@
-.m-inset {
-  width: 100%;
-  clear: right;
-  margin-left: auto;
-  margin-right: auto;
-
-  &--bottom-rule {
-    padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    border-bottom: 1px solid @horizontal-rule;
-  }
-
-  &__caption {
-    margin-top: unit(15px / @base-font-size-px, em);
-  }
-
-  &--bordered {
-    // Styling for "Tip" insets, most commonly used in Ask CFPB
-    border-top: 4px solid var(--teal-60);
-    border-bottom: 2px solid var(--teal-40);
-    padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em) 0;
-    margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      margin: unit( 3px / @base-font-size-px, em )
-      0
-      unit( @grid_gutter-width / @base-font-size-px, em )
-      unit( @grid_gutter-width / @base-font-size-px, em );
-      padding: unit( @grid_gutter-width / @base-font-size-px, em ) 0;
-    });
-  }
-
-  &.m-inset--170 {
-    // Ensure that 170px inset images are that same size on XS screens
-    width: unit(170px / @base-font-size-px, em);
-  }
-
-  &--270 {
-    // Ensure that 270px inset images are that same size on XS screens
-    width: unit(270px / @base-font-size-px, em);
-  }
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    // Default anything with just an .m-inset class to 270px floating right,
-    // e.g., quote and related links blocks.
-    float: right;
-    width: unit( 270px / @base-font-size-px, em );
-
-    &--left {
-      float: left;
-      clear: left;
-    }
-
-    .m-call-to-action {
-      width: 100%;
-    }
-  });
-
-  .respond-to-min(@bp-xl-min, {
-    &--470 {
-      width: unit( 470px / @base-font-size-px, em );
-    }
-  });
-
-  .m-call-to-action,
-  .m-related-links {
-    padding-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-    border-bottom: 1px solid @horizontal-rule;
-  }
-
-  .m-full-width-text {
-    padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-    padding-bottom: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-    border-top: 1px solid @horizontal-rule;
-    border-bottom: 1px solid @horizontal-rule;
-    margin-bottom: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-  }
-
-  &--email {
-    // This originally was a block,
-    // so we override the 30px margin added by .full-width-text-group .m-inset.
-    margin-bottom: unit(
-      @grid_gutter-width * 2 / @base-font-size-px,
-      em
-    ) !important;
-
-    // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      box-sizing: border-box;
-      width: 50%;
-      padding-left: unit( @grid_gutter-width / @base-font-size-px, em );
-    });
-  }
-}
diff --git a/cfgov/unprocessed/css/molecules/inset.scss b/cfgov/unprocessed/css/molecules/inset.scss
new file mode 100644
index 0000000000..29a6b741dd
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/inset.scss
@@ -0,0 +1,102 @@
+@use 'sass:math';
+
+.m-inset {
+  width: 100%;
+  clear: right;
+  margin-left: auto;
+  margin-right: auto;
+
+  &--bottom-rule {
+    padding-bottom: math.div(
+        math.div($grid-gutter-width, 2),
+        $base-font-size-px
+      ) + em;
+    border-bottom: 1px solid var(--gray-40);
+  }
+
+  &__caption {
+    margin-top: math.div(15px, $base-font-size-px) + em;
+  }
+
+  &--bordered {
+    // Styling for "Tip" insets, most commonly used in Ask CFPB
+    border-top: 4px solid var(--teal-60);
+    border-bottom: 2px solid var(--teal-40);
+    padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em
+      0;
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      margin: (math.div(3px, $base-font-size-px) + em) 0
+        (math.div($grid-gutter-width, $base-font-size-px) + em)
+        (math.div($grid-gutter-width, $base-font-size-px) + em);
+      padding: (math.div($grid-gutter-width, $base-font-size-px) + em) 0;
+    }
+  }
+
+  &.m-inset--170 {
+    // Ensure that 170px inset images are that same size on XS screens
+    width: math.div(170px, $base-font-size-px) + em;
+  }
+
+  &--270 {
+    // Ensure that 270px inset images are that same size on XS screens
+    width: math.div(270px, $base-font-size-px) + em;
+  }
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    // Default anything with just an .m-inset class to 270px floating right,
+    // e.g., quote and related links blocks.
+    float: right;
+    width: math.div(270px, $base-font-size-px) + em;
+
+    &--left {
+      float: left;
+      clear: left;
+    }
+
+    .m-call-to-action {
+      width: 100%;
+    }
+  }
+
+  @include respond-to-min($bp-xl-min) {
+    &--470 {
+      width: math.div(470px, $base-font-size-px) + em;
+    }
+  }
+
+  .m-call-to-action,
+  .m-related-links {
+    padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+    border-bottom: 1px solid var(--gray-40);
+  }
+
+  .m-full-width-text {
+    padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+    padding-bottom: math.div(
+        math.div($grid-gutter-width, 2),
+        $base-font-size-px
+      ) + em;
+    border-top: 1px solid var(--gray-40);
+    border-bottom: 1px solid var(--gray-40);
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+  }
+
+  &--email {
+    // This originally was a block,
+    // so we override the 30px margin added by .full-width-text-group .m-inset.
+    margin-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + em !important;
+
+    // Tablet and above.
+    @include respond-to-min($bp-sm-min) {
+      box-sizing: border-box;
+      width: 50%;
+      padding-left: math.div($grid-gutter-width, $base-font-size-px) + em;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.less b/cfgov/unprocessed/css/molecules/related-metadata.less
deleted file mode 100644
index 2986a04ede..0000000000
--- a/cfgov/unprocessed/css/molecules/related-metadata.less
+++ /dev/null
@@ -1,70 +0,0 @@
-// Modifier for jump links to give them topic-tags style gold/gray styling.
-.a-link--jump-gold {
-  font-size: unit(12px / @base-font-size-px, rem);
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--gold-80);
-  border-color: var(--gold-80);
-  letter-spacing: 1px;
-
-  .u-link-colors(var(--gold-80));
-
-  .a-link__text {
-    color: var(--gray-90);
-    border-bottom-color: var(--gold-80);
-  }
-
-  a&:hover .a-link__text {
-    color: var(--black);
-  }
-
-  a&:hover:before {
-    border-color: var(--gold-80);
-    color: var(--gold-80);
-  }
-
-  // If it's not a link, don't add a border.
-  // TODO: Make it so topic tag related metadata items are ALWAYS links.
-  span&:hover:before {
-    border-top-color: transparent !important;
-  }
-}
-
-@margin-half-em: unit(15px / @base-font-size-px, em);
-
-.m-related-metadata {
-  .m-list__link {
-    .u-link-colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
-  }
-
-  // Tablet only.
-  .respond-to-range(@bp-sm-min, @bp-sm-max, {
-    border-left: @margin-half-em solid transparent;
-    border-right: @margin-half-em solid transparent;
-  });
-}
-
-.m-related-metadata__item-container {
-  &:not(:last-child) {
-    margin-bottom: @margin-half-em * 2;
-  }
-
-  .status-definitions {
-    display: block;
-  }
-}
-
-.m-related-metadata__status {
-  div {
-    margin-bottom: 1.25em;
-  }
-
-  h6 {
-    margin-bottom: 0.25em;
-    color: var(--gray);
-  }
-}
-
-.m-related-metadata__topics {
-  line-height: 1em;
-}
diff --git a/cfgov/unprocessed/css/molecules/related-metadata.scss b/cfgov/unprocessed/css/molecules/related-metadata.scss
new file mode 100644
index 0000000000..0fc563d71e
--- /dev/null
+++ b/cfgov/unprocessed/css/molecules/related-metadata.scss
@@ -0,0 +1,78 @@
+@use 'sass:math';
+
+// Modifier for jump links to give them topic-tags style gold/gray styling.
+.a-link--jump-gold {
+  font-size: math.div(12px, $base-font-size-px) + rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--gold-80);
+  border-color: var(--gold-80);
+  letter-spacing: 1px;
+
+  @include u-link-colors(var(--gold-80));
+
+  .a-link__text {
+    color: var(--gray-90);
+    border-bottom-color: var(--gold-80);
+  }
+}
+
+a.a-link--jump-gold:hover .a-link__text {
+  color: var(--black);
+}
+
+a.a-link--jump-gold:hover:before {
+  border-color: var(--gold-80);
+  color: var(--gold-80);
+}
+
+// If it's not a link, don't add a border.
+// TODO: Make it so topic tag related metadata items are ALWAYS links.
+span.a-link--jump-gold:hover:before {
+  border-top-color: transparent !important;
+}
+
+$margin-half-em: math.div(15px, $base-font-size-px) + em;
+
+.m-related-metadata {
+  .m-list__link {
+    @include u-link-colors(
+      var(--pacific),
+      var(--pacific),
+      var(--pacific-60),
+      var(--pacific),
+      var(--navy)
+    );
+  }
+
+  // Tablet only.
+  @include respond-to-range($bp-sm-min, $bp-sm-max) {
+    border-left: $margin-half-em solid transparent;
+    border-right: $margin-half-em solid transparent;
+  }
+}
+
+.m-related-metadata__item-container {
+  &:not(:last-child) {
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+  }
+
+  .status-definitions {
+    display: block;
+  }
+}
+
+.m-related-metadata__status {
+  div {
+    margin-bottom: 1.25em;
+  }
+
+  h6 {
+    margin-bottom: 0.25em;
+    color: var(--gray);
+  }
+}
+
+.m-related-metadata__topics {
+  line-height: 1em;
+}
diff --git a/cfgov/unprocessed/css/molecules/related-posts.less b/cfgov/unprocessed/css/molecules/related-posts.scss
similarity index 57%
rename from cfgov/unprocessed/css/molecules/related-posts.less
rename to cfgov/unprocessed/css/molecules/related-posts.scss
index 35c8613e60..879972e640 100644
--- a/cfgov/unprocessed/css/molecules/related-posts.less
+++ b/cfgov/unprocessed/css/molecules/related-posts.scss
@@ -1,19 +1,28 @@
-@gap: unit(15px / @base-font-size-px, rem);
+@use 'sass:math';
+
+$gap: math.div(30px, $base-font-size-px) + rem;
+$gap-half: math.div(15px, $base-font-size-px) + rem;
 
 .m-related-posts__list {
   display: grid;
-  column-gap: @gap * 2;
-  row-gap: @gap;
+  column-gap: $gap;
+  row-gap: $gap-half;
 
   grid-template-columns: repeat(
     auto-fit,
     // 230px is an arbitrary width for small screens.
-    minmax(230px, calc(50% - @gap))
+    minmax(230px, calc(50% - $gap-half))
   );
 
   .m-list__link {
-    .u-link-colors(var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy));
-    .u-link-no-border();
+    @include u-link-colors(
+      var(--pacific),
+      var(--pacific),
+      var(--pacific-60),
+      var(--pacific),
+      var(--navy)
+    );
+    @include u-link-no-border;
 
     &:hover {
       border-bottom: 1px dotted;
@@ -22,30 +31,31 @@
 
   .m-list__item .a-date {
     margin-bottom: 0;
-    margin-top: unit(10px / @base-font-size-px, rem);
+    margin-top: math.div(10px, $base-font-size-px) + rem;
   }
 }
 
 .m-related-posts__list-container {
-  margin-bottom: @gap * 2;
+  margin-bottom: $gap;
 
   &:last-child {
     margin-bottom: 0;
   }
 }
+
 // Mobile only.
-.respond-to-max(@bp-xs-max, {
+@include respond-to-max($bp-xs-max) {
   // Always remove columns at mobile size.
   .m-related-posts__list {
     grid-template-columns: initial;
   }
-});
+}
 
 // Desktop and above.
-.respond-to-min(@bp-med-min, {
+@include respond-to-min($bp-med-min) {
   // If in the sidebar at desktop sizes, do not break into columns.
   // Related posts also appear in the pre-footer, so we exclude that here.
   .u-layout-grid__sidebar .m-related-posts__list {
     grid-template-columns: initial;
   }
-});
+}
diff --git a/cfgov/unprocessed/css/molecules/social-media.less b/cfgov/unprocessed/css/molecules/social-media.scss
similarity index 60%
rename from cfgov/unprocessed/css/molecules/social-media.less
rename to cfgov/unprocessed/css/molecules/social-media.scss
index ad6339b031..534bdea606 100644
--- a/cfgov/unprocessed/css/molecules/social-media.less
+++ b/cfgov/unprocessed/css/molecules/social-media.scss
@@ -1,39 +1,42 @@
+@use 'sass:math';
+
 .m-social-media {
   display: flex;
   flex-wrap: wrap;
-  row-gap: unit(10px / @base-font-size-px, rem);
-  column-gap: unit(30px / @base-font-size-px, rem);
+  row-gap: math.div(10px, $base-font-size-px) + rem;
+  column-gap: math.div(30px, $base-font-size-px) + rem;
 
   &__icons {
     display: flex;
-    gap: unit(10px / @base-font-size-px, rem);
+    gap: math.div(10px, $base-font-size-px) + rem;
   }
 
   &__icon {
     color: var(--gray-dark);
-    font-size: unit(@grid_gutter-width / @base-font-size-px, rem);
+    font-size: math.div($grid-gutter-width, $base-font-size-px) + rem;
     line-height: 1;
-    .u-link-colors( var(--gray-dark), var(--pacific-80) );
-    .u-link-no-border();
+
+    @include u-link-colors(var(--gray-dark), var(--pacific-80));
+    @include u-link-no-border;
   }
 
   // Only for elements in "share" (m-social-media--share) section.
   &--share {
     .m-social-media__heading {
-      .heading-5();
+      @include heading-5;
       margin: auto 0;
     }
 
     .m-social-media__print {
-      padding-left: unit(10px / @base-font-size-px, rem);
+      padding-left: math.div(10px, $base-font-size-px) + rem;
       border-left: 1px solid var(--black);
     }
   }
 
   // Hide on print.
-  .respond-to-print( {
+  @include respond-to-print {
     display: none;
-  });
+  }
 
   // Hide print when JS is off.
   .no-js &__print {
@@ -46,7 +49,7 @@ html[lang='ar'] .m-social-media--share {
   .m-social-media__print {
     padding-left: 0;
     border-left: none;
-    padding-right: unit(10px / @base-font-size-px, rem);
+    padding-right: math.div(10px, $base-font-size-px) + rem;
     border-right: 1px solid var(--black);
   }
 
diff --git a/cfgov/unprocessed/css/molecules/tags.less b/cfgov/unprocessed/css/molecules/tags.scss
old mode 100755
new mode 100644
similarity index 60%
rename from cfgov/unprocessed/css/molecules/tags.less
rename to cfgov/unprocessed/css/molecules/tags.scss
index 08166e05ac..c40fbda156
--- a/cfgov/unprocessed/css/molecules/tags.less
+++ b/cfgov/unprocessed/css/molecules/tags.scss
@@ -1,11 +1,12 @@
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import 'cfpb-core';
 
-@bullet-font-size: 17px;
+$bullet-font-size: 17px;
 
 .m-tags {
   // Mobile.
   &__heading {
-    .h4();
+    @include h4;
     display: block;
     color: var(--black);
   }
@@ -20,13 +21,14 @@
   }
 
   &__tag {
-    .h6();
+    @include h6;
+
     // Override h6 margin.
     margin: 0;
     box-sizing: border-box;
     display: inline-block;
     position: relative;
-    line-height: @bullet-font-size;
+    line-height: $bullet-font-size;
     color: var(--gray);
   }
 
@@ -38,15 +40,23 @@
     position: absolute;
     left: -1em;
     color: var(--gold-80);
-    font-size: unit(@bullet-font-size / @base-font-size-px, rem);
-    margin-right: unit(5px / @base-font-size-px, rem);
-    margin-left: @bullet-font-size;
+    font-size: math.div($bullet-font-size, $base-font-size-px) + rem;
+    margin-right: math.div(5px, $base-font-size-px) + rem;
+    margin-left: $bullet-font-size;
   }
 
   a.m-tags--tag {
-    .u-link-colors(
-      var(--gray), var(--gray), var(--gray), var(--gray), var(--gray),
-      var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80), var(--gold-80)
+    @include u-link-colors(
+      var(--gray),
+      var(--gray),
+      var(--gray),
+      var(--gray),
+      var(--gray),
+      var(--gold-80),
+      var(--gold-80),
+      var(--gold-80),
+      var(--gold-80),
+      var(--gold-80)
     );
   }
 
@@ -58,13 +68,13 @@
   }
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     &__tag {
       height: 100%;
       width: 100%;
-      padding-top: unit(10px / @base-font-size-px, rem);
-      padding-bottom: unit(10px / @base-font-size-px, rem);
-      padding-left: @bullet-font-size;
+      padding-top: math.div(10px, $base-font-size-px) + rem;
+      padding-bottom: math.div(10px, $base-font-size-px) + rem;
+      padding-left: $bullet-font-size;
       border-top: 1px dotted var(--gold-80);
     }
 
@@ -84,31 +94,31 @@
         border-bottom: 1px dotted var(--gold-80);
       }
     }
-  });
+  }
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     display: flex;
     align-items: baseline;
-    gap: unit(15px / @base-font-size-px, rem);
+    gap: math.div(15px, $base-font-size-px) + rem;
 
     &__list {
       flex-direction: row;
-      gap: unit(15px / @base-font-size-px, rem);
+      gap: math.div(15px, $base-font-size-px) + rem;
     }
 
     &__tag {
-      margin-left: @bullet-font-size;
+      margin-left: $bullet-font-size;
     }
 
     &__bullet {
       margin-left: 0;
     }
-  });
+  }
 
-  .respond-to-print({
+  @include respond-to-print {
     display: none;
-  });
+  }
 }
 
 // Right-to-left (RTL) adjustments for arabic pages.
@@ -122,26 +132,26 @@ html[lang='ar'] {
     }
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       &__tag {
-        padding-right: @bullet-font-size;
+        padding-right: $bullet-font-size;
       }
 
       &__bullet {
-        right: unit(-7px / @base-font-size-px, rem);
+        right: math.div(-7px, $base-font-size-px) + rem;
       }
-    });
+    }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       &__tag {
         margin-left: 0;
-        margin-right: @bullet-font-size;
+        margin-right: $bullet-font-size;
       }
 
       &__bullet {
         margin-right: 0;
       }
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/molecules/translation-links.less b/cfgov/unprocessed/css/molecules/translation-links.scss
similarity index 83%
rename from cfgov/unprocessed/css/molecules/translation-links.less
rename to cfgov/unprocessed/css/molecules/translation-links.scss
index f24357b460..07967a597d 100644
--- a/cfgov/unprocessed/css/molecules/translation-links.less
+++ b/cfgov/unprocessed/css/molecules/translation-links.scss
@@ -1,11 +1,12 @@
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import 'cfpb-core';
 
-.u-divider {
+@mixin u-divider() {
   content: '';
   display: block;
   background: var(--gray);
   width: 1px;
-  height: unit(20px / @base-font-size-px, em);
+  height: math.div(20px, $base-font-size-px) + em;
 }
 
 ul.m-translation-links {
@@ -30,7 +31,8 @@ ul.m-translation-links {
       position: absolute;
       left: -11px;
       top: 2px;
-      .u-divider();
+
+      @include u-divider;
     }
   }
 }
@@ -54,7 +56,8 @@ html[lang='ar'] ul.m-translation-links {
       position: absolute;
       right: -11px;
       top: 2px;
-      .u-divider();
+
+      @include u-divider;
     }
   }
 }
diff --git a/cfgov/unprocessed/css/on-demand/chart.less b/cfgov/unprocessed/css/on-demand/chart.less
deleted file mode 100644
index 10602ddf62..0000000000
--- a/cfgov/unprocessed/css/on-demand/chart.less
+++ /dev/null
@@ -1,10 +0,0 @@
-// Import external cfpb-chart-builder stylesheet
-@import (less) '../../apps/cfpb-chart-builder/css/cfpb-chart-builder.less';
-
-// Footnote text below charts
-.m-chart-footnote {
-  padding-top: unit(15px / @base-font-size-px, em);
-  margin-top: unit(30px / @base-font-size-px, em);
-  color: var(--black);
-  font-size: unit(12px / @base-font-size-px, em);
-}
diff --git a/cfgov/unprocessed/css/on-demand/chart.scss b/cfgov/unprocessed/css/on-demand/chart.scss
new file mode 100644
index 0000000000..c3e8bc7476
--- /dev/null
+++ b/cfgov/unprocessed/css/on-demand/chart.scss
@@ -0,0 +1,13 @@
+@use 'sass:math';
+
+// Import external cfpb-chart-builder stylesheet
+@import '../../apps/cfpb-chart-builder/css/cfpb-chart-builder';
+
+// Footnote text below charts
+.m-chart-footnote {
+  padding-top: math.div(15px, $base-font-size-px) + em;
+  margin-top: math.div(30px, $base-font-size-px) + em;
+  color: var(--black);
+
+  font-size: math.div(12px, $base-font-size-px) + em;
+}
diff --git a/cfgov/unprocessed/css/on-demand/error.less b/cfgov/unprocessed/css/on-demand/error.scss
similarity index 64%
rename from cfgov/unprocessed/css/on-demand/error.less
rename to cfgov/unprocessed/css/on-demand/error.scss
index 86f6bcb561..e85aab3726 100644
--- a/cfgov/unprocessed/css/on-demand/error.less
+++ b/cfgov/unprocessed/css/on-demand/error.scss
@@ -1,4 +1,5 @@
-@import (reference) '../main.less';
+@use 'sass:math';
+@import '../main';
 
 /* ==========================================================================
    consumerfinance.gov
@@ -8,17 +9,17 @@
 .m-list--divider {
   display: flex;
   flex-direction: column;
-  gap: unit(30px / @base-font-size-px, rem);
+  gap: math.div(30px, $base-font-size-px) + rem;
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     flex-direction: row;
 
     .m-list__item + .m-list__item {
       border-left: 1px solid var(--white);
-      padding-left: unit( 30px / @base-font-size-px, rem);
+      padding-left: math.div(30px, $base-font-size-px) + rem;
     }
-  });
+  }
 }
 
 .error-page {
@@ -28,35 +29,38 @@
     color: var(--white);
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       background-blend-mode: multiply;
-    });
+    }
 
     // Large desktop and above.
-    .respond-to-min(@bp-lg-min, {
+    @include respond-to-min($bp-lg-min) {
       background-blend-mode: normal;
-    });
+    }
 
     .a-link--jump {
       color: var(--white);
       border-color: var(--white);
-      margin-top: unit((@grid_gutter-width / 4) / @base-font-size-px, em);
+      margin-top: math.div(math.div($grid-gutter-width, 4), $base-font-size-px) +
+        em;
     }
   }
 
   &__404 {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      background: var(--gray-dark) url('/static/img/plug-538x655.png') no-repeat top right;
+    @include respond-to-min($bp-med-min) {
+      background: var(--gray-dark) url('/static/img/plug-538x655.png') no-repeat
+        top right;
       background-size: 269px 327px;
-    });
+    }
   }
 
   &__500 {
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      background: var(--gray-dark) url('/static/img/server-706x619.png') no-repeat center right;
+    @include respond-to-min($bp-med-min) {
+      background: var(--gray-dark) url('/static/img/server-706x619.png')
+        no-repeat center right;
       background-size: 353px 310px;
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/on-demand/event.less b/cfgov/unprocessed/css/on-demand/event.scss
similarity index 79%
rename from cfgov/unprocessed/css/on-demand/event.less
rename to cfgov/unprocessed/css/on-demand/event.scss
index 0a599dec06..1e5a5fe480 100644
--- a/cfgov/unprocessed/css/on-demand/event.less
+++ b/cfgov/unprocessed/css/on-demand/event.scss
@@ -1,4 +1,5 @@
-@import (reference) '../main.less';
+@use 'sass:math';
+@import '../main';
 
 /* ==========================================================================
    consumerfinance.gov
@@ -10,14 +11,14 @@
 /* Event template settings
    ========================================================================== */
 .t-event__details {
-  margin-bottom: unit(10px / @base-font-size-px, rem);
+  margin-bottom: math.div(10px, $base-font-size-px) + rem;
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     .modification-date {
       float: right;
     }
-  });
+  }
 }
 
 /* Event-Agenda Table
@@ -33,11 +34,11 @@
   }
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     th {
       width: 25%;
     }
-  });
+  }
 }
 
 /* Event-Media-Container
@@ -76,21 +77,21 @@
    ========================================================================== */
 
 .event-status {
-  margin: 0 0 unit(30px / @base-font-size-px, em);
+  margin: 0 0 math.div(30px, $base-font-size-px) + em;
   color: var(--black);
   border-top: 1px solid var(--gray-20);
   border-bottom: 1px solid var(--gray-20);
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     float: right;
-    width: unit(250px / @base-font-size-px, em);
-    margin-top: unit(5px / @base-font-size-px, em);
-    margin-left: unit(@grid_gutter-width / @base-font-size-px, em);
-  });
+    width: math.div(250px, $base-font-size-px) + em;
+    margin-top: math.div(5px, $base-font-size-px) + em;
+    margin-left: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
 
   &__body {
-    margin: unit(26px / @base-font-size-px, em) 0;
+    margin: (math.div(26px, $base-font-size-px) + em) 0;
   }
 
   .event-meta {
@@ -100,9 +101,10 @@
 
 .event-status__livestream p:first-child {
   line-height: 1;
+
   // The margin is kept at 10px to accommodate the line-height
   // of the text so that the gap appears to be 15px.
-  margin-bottom: unit(10px / @base-font-size-px, em);
+  margin-bottom: math.div(10px, $base-font-size-px) + em;
 }
 
 /* Event-Venue
@@ -116,19 +118,19 @@
 .event-venue__details {
   padding: 1.5em 1.5em 0.5em;
 
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     padding: 1.5em;
-  });
+  }
 
   .datetime {
-    .h5();
+    @include h5;
     text-transform: uppercase;
   }
 
   .event-meta__address {
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       margin: 0;
-    });
+    }
   }
 
   .event-meta__venue {
@@ -155,10 +157,10 @@
 }
 
 .modification-date {
-  .h6();
+  @include h6;
   background: var(--green-20);
   color: var(--black);
   letter-spacing: 0;
-  padding: unit(9px / @base-font-size-px, rem);
+  padding: math.div(9px, $base-font-size-px) + rem;
   text-align: center;
 }
diff --git a/cfgov/unprocessed/css/on-demand/job-listing-list.less b/cfgov/unprocessed/css/on-demand/job-listing-list.less
deleted file mode 100644
index 69a2cf07cd..0000000000
--- a/cfgov/unprocessed/css/on-demand/job-listing-list.less
+++ /dev/null
@@ -1,18 +0,0 @@
-@import (reference) 'cfpb-core.less';
-@import (reference) 'cfpb-grid.less';
-
-.m-jobs-list .m-list--links {
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-    .m-list__item + .m-list__item {
-      margin-top: unit( ( @grid_gutter-width / 2 ) / @base-font-size-px, em );
-    }
-  });
-
-  .a-link__subtext {
-    .u-link-colors( var(--black) );
-    display: block;
-    margin-top: unit(2px / @base-font-size-px, em);
-    font-weight: normal;
-  }
-}
diff --git a/cfgov/unprocessed/css/on-demand/job-listing-list.scss b/cfgov/unprocessed/css/on-demand/job-listing-list.scss
new file mode 100644
index 0000000000..88d01c3a29
--- /dev/null
+++ b/cfgov/unprocessed/css/on-demand/job-listing-list.scss
@@ -0,0 +1,20 @@
+@use 'sass:math';
+@import 'cfpb-core';
+@import 'cfpb-grid';
+
+.m-jobs-list .m-list--links {
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    .m-list__item + .m-list__item {
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
+    }
+  }
+
+  .a-link__subtext {
+    @include u-link-colors(var(--black));
+    display: block;
+    margin-top: math.div(2px, $base-font-size-px) + em;
+    font-weight: normal;
+  }
+}
diff --git a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.scss
similarity index 79%
rename from cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
rename to cfgov/unprocessed/css/on-demand/mortgage-performance-trends.scss
index 8be1453fe0..e431dd68b4 100644
--- a/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.less
+++ b/cfgov/unprocessed/css/on-demand/mortgage-performance-trends.scss
@@ -1,10 +1,12 @@
-@import (reference) 'cfpb-core.less';
+@use 'sass:math';
+@import 'cfpb-core';
 
 .o-mp-map {
   border: 1px solid var(--gray-40);
-  margin-top: unit(30px / @base-font-size-px, em);
-  padding: unit(30px / @base-font-size-px, em)
-    unit(30px / @base-font-size-px, em) unit(15px / @base-font-size-px, em);
+  margin-top: math.div(30px, $base-font-size-px) + em;
+  padding: (math.div(30px, $base-font-size-px) + em)
+    (math.div(30px, $base-font-size-px) + em)
+    (math.div(15px, $base-font-size-px) + em);
 
   h3 span {
     font-weight: 600;
@@ -57,7 +59,7 @@
 
   dt {
     border-bottom: 1px solid var(--black);
-    font-size: @size-vi;
+    font-size: $size-vi;
     margin-bottom: 5px;
     padding-bottom: 5px;
     width: 100%;
@@ -65,13 +67,13 @@
   }
   dd {
     display: block;
-    font-size: @size-vi;
+    font-size: $size-vi;
     padding: 2px 0;
   }
 }
 
 .m-color-ramp {
-  margin-top: unit(15px / @base-font-size-px, em);
+  margin-top: math.div(15px, $base-font-size-px) + em;
   width: 100%;
 
   &[data-chart-color='blue'] {
@@ -127,7 +129,7 @@
   }
 
   rect {
-    font-size: unit(12px / @base-font-size-px, em);
+    font-size: math.div(12px, $base-font-size-px) + em;
     height: 15px;
     stroke: #838588;
     stroke-miterlimit: 10;
@@ -136,19 +138,19 @@
   }
 
   text {
-    font-size: unit(12px / @base-font-size-px, em);
+    font-size: math.div(12px, $base-font-size-px) + em;
     text-anchor: start;
   }
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     text {
-      font-size: unit( 16px / @base-font-size-px, em );;
+      font-size: math.div(16px, $base-font-size-px) + em;
     }
     tspan {
-      font-size: unit( 16px / @base-font-size-px, em );;
+      font-size: math.div(16px, $base-font-size-px) + em;
     }
-  });
+  }
 }
 
 #mp-line-chart-container,
@@ -170,8 +172,9 @@
   // Helper text under some filter or zoom options
   .m-field-helper-text {
     color: var(--gray-80);
-    @font-size: 12px;
-    font-size: unit(@font-size / @base-font-size-px, em);
+
+    $font-size: 12px;
+    font-size: math.div($font-size, $base-font-size-px) + em;
   }
 }
 
@@ -187,6 +190,6 @@
 
 #mp-map-month-container label,
 #mp-map-year-container label {
-  @font-size: 14px;
-  font-size: unit(@font-size / @base-font-size-px, em);
+  $font-size: 14px;
+  font-size: math.div($font-size, $base-font-size-px) + em;
 }
diff --git a/cfgov/unprocessed/css/on-demand/partially-styled-link.less b/cfgov/unprocessed/css/on-demand/partially-styled-link.scss
similarity index 51%
rename from cfgov/unprocessed/css/on-demand/partially-styled-link.less
rename to cfgov/unprocessed/css/on-demand/partially-styled-link.scss
index 283ad69074..aeaf285ddb 100644
--- a/cfgov/unprocessed/css/on-demand/partially-styled-link.less
+++ b/cfgov/unprocessed/css/on-demand/partially-styled-link.scss
@@ -1,4 +1,4 @@
-@import (reference) 'cfpb-core.less';
+@import 'cfpb-core';
 
 .a-link--partially-styled {
   border-bottom-width: 0;
@@ -9,19 +9,19 @@
   }
 
   .a-link__underlined {
-    border-bottom: 1px dotted @link-underline;
+    border-bottom: 1px dotted $link-underline;
   }
 
   &:visited .a-link__underlined {
-    border-bottom: 1px dotted @link-underline-visited;
+    border-bottom: 1px dotted $link-underline-visited;
   }
 
   &:hover span,
   &:focus span {
-    border-bottom: 1px solid @link-underline-hover !important;
+    border-bottom: 1px solid $link-underline-hover !important;
   }
 
   &:active span {
-    border-bottom: 1px solid @link-underline-active !important;
+    border-bottom: 1px solid $link-underline-active !important;
   }
 }
diff --git a/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less b/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less
deleted file mode 100644
index e1d68d9514..0000000000
--- a/cfgov/unprocessed/css/on-demand/sidebar-contact-info.less
+++ /dev/null
@@ -1,12 +0,0 @@
-@import (reference) '../main.less';
-
-.o-sidebar-contact-info {
-  &__content {
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-  }
-
-  .m-contact + .m-contact {
-    // Adds margin top to info contacts that follow another
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-  }
-}
diff --git a/cfgov/unprocessed/css/on-demand/sidebar-contact-info.scss b/cfgov/unprocessed/css/on-demand/sidebar-contact-info.scss
new file mode 100644
index 0000000000..93ab4298c2
--- /dev/null
+++ b/cfgov/unprocessed/css/on-demand/sidebar-contact-info.scss
@@ -0,0 +1,13 @@
+@use 'sass:math';
+@import '../main';
+
+.o-sidebar-contact-info {
+  &__content {
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+
+  .m-contact + .m-contact {
+    // Adds margin top to info contacts that follow another
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+}
diff --git a/cfgov/unprocessed/css/on-demand/simple-chart.less b/cfgov/unprocessed/css/on-demand/simple-chart.scss
similarity index 76%
rename from cfgov/unprocessed/css/on-demand/simple-chart.less
rename to cfgov/unprocessed/css/on-demand/simple-chart.scss
index ab70157898..7cffbb9ea8 100644
--- a/cfgov/unprocessed/css/on-demand/simple-chart.less
+++ b/cfgov/unprocessed/css/on-demand/simple-chart.scss
@@ -1,38 +1,39 @@
-@import (reference) '../main.less';
-@import (less) 'highcharts/css/highcharts.css';
+@use 'sass:math';
+@import '../main';
+@import 'highcharts/css/highcharts.css';
 
 .o-simple-chart {
   max-width: 670px;
-  margin-bottom: unit(60 / @base-font-size-px, em);
+  margin-bottom: math.div(60px, $base-font-size-px) + em;
   .chart-anchor,
   &:hover,
   &:visited {
-    color: @text;
+    color: $text;
   }
   h2 {
     margin-top: 0;
   }
 
   h5 {
-    margin-bottom: unit(@size-v / 14, em);
+    margin-bottom: math.div($size-v, 14) + em;
   }
 
   h3 {
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
-      margin-top: unit( 25 / 15, em);
-    });
+    @include respond-to-max($bp-xs-max) {
+      margin-top: math.div(25px, 15px) + em;
+    }
   }
 
   .o-simple-chart__subtitle {
-    margin: 0 0 unit(30 / @base-font-size-px, em);
+    margin: 0 0 (math.div(30px, $base-font-size-px) + em);
   }
 
   .o-simple-chart__filters {
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
-      margin-top: unit( 9 / @base-font-size-px, em);
-    });
+    @include respond-to-max($bp-xs-max) {
+      margin-top: math.div(9px, $base-font-size-px) + em;
+    }
   }
   .highcharts-tilemap-series {
     .highcharts-point {
@@ -49,43 +50,47 @@
       text {
         pointer-events: none;
       }
+
       // Mobile only.
-      .respond-to-max(@bp-xs-max, {
+      @include respond-to-max($bp-xs-max) {
         font-size: 10px;
         tspan:last-of-type {
           display: none;
         }
-      });
+      }
     }
   }
   .filter-wrapper {
-    .u-grid-column(1,2);
+    @include u-grid-column(1, 2);
     box-sizing: inherit;
-    margin-bottom: unit(10 / @base-font-size-px, em);
+    margin-bottom: math.div(10px, $base-font-size-px) + em;
     border-width: 0 30px 0 0;
+
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       display: block;
       width: 100%;
-      margin-bottom: unit( 30 / @base-font-size-px, em);
-    });
+      margin-bottom: math.div(30px, $base-font-size-px) + em;
+    }
   }
 
   .a-label--heading {
     margin: 0;
     padding-bottom: 10px;
+
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
-      font-size: @base-font-size-px;
-    });
+    @include respond-to-max($bp-xs-max) {
+      font-size: $base-font-size-px;
+    }
   }
 
   .o-simple-chart__target {
-    margin-top: unit(14 / @base-font-size-px, em);
+    margin-top: math.div(14px, $base-font-size-px) + em;
+
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       margin-top: 0;
-    });
+    }
   }
 
   .highcharts-navigator-mask-inside {
@@ -164,15 +169,16 @@
       color: var(--gray) !important;
       fill: var(--gray) !important;
       transform: translate(0, 5px);
-      font-size: @base-font-size-px;
+      font-size: $base-font-size-px;
       font-weight: 400;
     }
     & > text {
       &:first-child {
         transform: translate(48px, -28px);
-        .respond-to-max(660px, {
-          transform:translate(128px,-28px)
-        });
+
+        @include respond-to-max(660px) {
+          transform: translate(128px, -28px);
+        }
       }
     }
   }
@@ -189,7 +195,7 @@
     }
 
     .a-link {
-      color: @link-text;
+      color: $link-text;
       border-width: 0 0 1px;
       border-style: dotted;
       display: inline-block;
@@ -197,17 +203,17 @@
       overflow: hidden;
 
       &:visited {
-        color: @link-text-visited;
+        color: $link-text-visited;
       }
 
       &:hover {
         border-style: solid;
-        color: @link-text-hover;
+        color: $link-text-hover;
       }
 
       &:active {
         border-style: solid;
-        color: @link-text-active;
+        color: $link-text-active;
       }
     }
     b {
@@ -222,10 +228,10 @@
     margin-bottom: 66px;
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       margin-top: -8px;
       margin-bottom: -6px;
-    });
+    }
 
     .legend-title {
       margin-bottom: 10px;
@@ -254,9 +260,9 @@
 
   .highcharts-legend {
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       transform: translateX(0) !important;
-    });
+    }
   }
 
   .highcharts-legend-item tspan {
@@ -264,9 +270,9 @@
   }
 
   .m-chart-footnote {
-    max-width: unit(670 / @size-vi, rem);
-    margin-top: unit(45 / @size-vi, em);
-    padding-top: unit(15 / @size-vi, em);
+    max-width: math.div(670px, $size-vi) + rem;
+    margin-top: math.div(45px, $size-vi) + em;
+    padding-top: math.div(15px, $size-vi) + em;
     font-size: 0.75em;
   }
 
diff --git a/cfgov/unprocessed/css/organisms/audio-player.less b/cfgov/unprocessed/css/organisms/audio-player.less
deleted file mode 100644
index 865c5aac4c..0000000000
--- a/cfgov/unprocessed/css/organisms/audio-player.less
+++ /dev/null
@@ -1,4 +0,0 @@
-audio {
-  display: block;
-  margin: unit(15px / @base-font-size-px, em) 0;
-}
diff --git a/cfgov/unprocessed/css/organisms/audio-player.scss b/cfgov/unprocessed/css/organisms/audio-player.scss
new file mode 100644
index 0000000000..4b9245460e
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/audio-player.scss
@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+audio {
+  display: block;
+  margin: (math.div(15px, $base-font-size-px) + em) 0;
+}
diff --git a/cfgov/unprocessed/css/organisms/filterable-list-controls.less b/cfgov/unprocessed/css/organisms/filterable-list-controls.scss
similarity index 100%
rename from cfgov/unprocessed/css/organisms/filterable-list-controls.less
rename to cfgov/unprocessed/css/organisms/filterable-list-controls.scss
diff --git a/cfgov/unprocessed/css/organisms/footer.less b/cfgov/unprocessed/css/organisms/footer.scss
similarity index 57%
rename from cfgov/unprocessed/css/organisms/footer.less
rename to cfgov/unprocessed/css/organisms/footer.scss
index 63cd7ab686..03014952f8 100644
--- a/cfgov/unprocessed/css/organisms/footer.less
+++ b/cfgov/unprocessed/css/organisms/footer.scss
@@ -1,6 +1,7 @@
-@import (reference) '../enhancements/typography.less';
+@use 'sass:math';
+@import '../enhancements/typography';
 
-.u-upper-hover-line {
+@mixin u-upper-hover-line() {
   position: absolute;
   top: -1px;
   content: '';
@@ -12,12 +13,14 @@
 
 .o-footer {
   font-weight: 500;
+
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
-  padding-top: unit(50px / @base-font-size-px, em);
+  padding-top: math.div(50px, $base-font-size-px) + em;
+
   // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
-  padding-bottom: unit(50px / @base-font-size-px, em);
+  padding-bottom: math.div(50px, $base-font-size-px) + em;
   border-top: 5px solid var(--green);
   background: var(--gray-5);
 
@@ -26,12 +29,12 @@
   }
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     .m-list__link {
       display: block;
       box-sizing: border-box;
-      padding-top: unit(10px / @base-font-size-px, em);
-      padding-bottom: unit(10px / @base-font-size-px, em);
+      padding-top: math.div(10px, $base-font-size-px) + em;
+      padding-bottom: math.div(10px, $base-font-size-px) + em;
       border-top-width: 1px;
       border-bottom-width: 1px;
 
@@ -41,8 +44,8 @@
     }
 
     // Handle the borders of jump links that are adjacent in a list.
-    .o-footer-middle-right .m-list__link:hover:before {
-      .u-upper-hover-line();
+    .o-footer-middle-right .m-list__link:hover::before {
+      @include u-upper-hover-line;
     }
 
     li:has(.m-list__link) + li:has(.m-list__link) {
@@ -51,59 +54,66 @@
         border-top: none;
       }
 
-      .m-list__link:hover:before {
-        .u-upper-hover-line();
+      .m-list__link:hover::before {
+        @include u-upper-hover-line;
       }
     }
-  });
+  }
 
   &__nav-list {
-    .m-list--links();
+    padding-left: 0;
+    list-style-type: none;
 
     .m-list__link {
-      font-size: unit(18px / @base-font-size-px, em);
-      .u-link-colors( var(--black) );
+      margin-left: 0;
+      font-size: math.div(18px, $base-font-size-px) + em;
+
+      @include u-link-colors(var(--black));
 
       // Tablet and above.
-      .respond-to-min(@bp-sm-min, {
+      @include respond-to-min($bp-sm-min) {
         margin-right: 1em;
 
-        .u-link-hover-border();
-      });
+        @include u-link-hover-border;
+      }
 
       // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-        margin-right: unit( @grid_gutter-width / 22px, em );
-        font-size: unit( 20px / @base-font-size-px, em );
-      });
+      @include respond-to-min($bp-med-min) {
+        margin-right: math.div($grid-gutter-width, 22px) + em;
+        font-size: math.div(20px, $base-font-size-px) + em;
+      }
     }
 
     .m-list__link.m-list__link--disabled {
       border-bottom: 1px dotted;
 
       // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-        .u-link-no-border();
-      });
+      @include respond-to-min($bp-med-min) {
+        @include u-link-no-border;
+      }
     }
   }
 
   &__list {
-    .m-list--links();
+    padding-left: 0;
+    list-style-type: none;
 
     .m-list__link {
-      .u-link-colors( var(--gray-dark) );
+      margin-left: 0;
+
+      @include u-link-colors(var(--gray-dark));
     }
   }
 
   &__pre {
     position: relative;
-    margin-bottom: unit(45px / @base-font-size-px, em);
+    margin-bottom: math.div(45px, $base-font-size-px) + em;
 
     .o-footer__top-button {
       display: block;
       width: 100%;
       text-align: center;
+
       // There's a standard margin between the top
       // of the footer and the links. The button comes between
       // that margin in the wireframes.
@@ -115,9 +125,9 @@
     }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
-      margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
+    @include respond-to-min($bp-sm-min) {
+      padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+      margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
       border-bottom: 1px solid var(--gray-40);
 
       .o-footer__top-button {
@@ -125,20 +135,27 @@
       }
 
       .o-footer__nav-list {
-        .m-list--horizontal();
+        padding-left: 0;
+        list-style-type: none;
 
         .m-list__item {
+          margin-left: 0;
+          display: inline-block;
+
+          // Assuming a natural space of 4px between inline block items
+          // then the space between would be 8px (4px natural + 4px added).
+          margin-right: math.div(4px, $base-font-size-px) + em;
           margin-bottom: 0;
         }
       }
-    });
+    }
 
-    .respond-to-print( {
+    @include respond-to-print {
       // !important used here to avoid being overriden by a much more specific
       // selector that sets the display property for this element
       // and to avoid using a selector that specific here.
       display: none !important;
-    });
+    }
   }
 
   // TODO: Refactor to use Design System Layout package.
@@ -148,42 +165,45 @@
     }
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       // Fix doubled border in mobile view.
-      .o-footer__col:nth-child( n+2 ) {
+      .o-footer__col:nth-child(n + 2) {
         .o-footer__list {
           .m-list__item .m-list__link {
             border-top-width: 0;
           }
         }
       }
-    });
+    }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      .u-grid-column(8);
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(8);
       border-right: 1px solid var(--gray-40);
       border-left: 0;
 
       .o-footer__col {
-        .u-grid-column(6);
+        @include u-grid-column(6);
         border-left: 0;
         border-right: 0;
-        padding-right: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding-right: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
-    });
+    }
 
-    .respond-to-print( {
+    @include respond-to-print {
       // !important used here to avoid being overriden by a much more specific
       // selector that sets the display property for this element
       // and to avoid using a selector that specific here.
       display: none !important;
-    });
+    }
   }
 
   &-middle-right {
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       // Fix missing top line hover.
       position: relative;
 
@@ -193,39 +213,39 @@
           border-top-width: 0;
         }
       }
-    });
+    }
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      .u-grid-column(4);
+    @include respond-to-min($bp-sm-min) {
+      @include u-grid-column(4);
 
       .o-footer__list {
-        padding-left: @grid_gutter-width;
-        padding-right: @grid_gutter-width;
+        padding-left: $grid-gutter-width;
+        padding-right: $grid-gutter-width;
       }
-    });
+    }
 
-    .respond-to-print( {
+    @include respond-to-print {
       // !important used here to avoid being overriden by a much more specific
       // selector that sets the display property for this element
       // and to avoid using a selector that specific here.
       display: none !important;
-    });
+    }
   }
 
   &-post {
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
 
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
-      padding-top: unit( @grid_gutter-width / @base-font-size-px, em );
+    @include respond-to-min($bp-sm-min) {
+      padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       border-top: 1px solid var(--gray-40);
-    });
+    }
 
-    .respond-to-print( {
+    @include respond-to-print {
       padding: 0;
       border: none;
       margin: 0;
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/full-width-text-group.less b/cfgov/unprocessed/css/organisms/full-width-text-group.less
deleted file mode 100644
index d44d4d8110..0000000000
--- a/cfgov/unprocessed/css/organisms/full-width-text-group.less
+++ /dev/null
@@ -1,78 +0,0 @@
-.o-full-width-text-group {
-  clear: both;
-
-  /**
-     * Fix for Wagtail's default img markup that includes height attribute
-     * and for loss of margin on extant Media block images.
-     * TODO: Remove once data migration from Media to ContentImage is complete
-     */
-
-  > img {
-    height: auto;
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-  }
-
-  .m-inset {
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-
-    &:not(:first-child) {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-    }
-  }
-
-  .m-full-width-media {
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, em);
-
-    &:not(:first-child) {
-      margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-    }
-  }
-
-  .m-full-width-text {
-    margin-top: unit(30px / @base-font-size-px, em);
-    margin-bottom: unit(30px / @base-font-size-px, em);
-  }
-
-  .m-full-width-text + .m-call-to-action {
-    margin-top: unit(30px / @base-font-size-px, em);
-  }
-
-  // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
-
-    .m-full-width-text {
-      margin-top: unit(45px / @base-font-size-px, em);
-      margin-bottom: unit(45px / @base-font-size-px, em);
-    }
-
-    .m-inset {
-      margin-left: unit( @grid_gutter-width / @base-font-size-px, em );
-
-      & + .m-full-width-text ul,
-      & + .m-full-width-text ol {
-        // Fix for IE11 rendering bullets issue
-        overflow: hidden;
-      }
-
-      &:not(:first-child) {
-        margin-top: 0;
-      }
-    }
-
-    .m-inset--left {
-      margin-right: unit( @grid_gutter-width / @base-font-size-px, em );
-      margin-bottom: unit( 20px / @base-font-size-px, em );
-      margin-left: 0;
-    }
-
-    .m-full-width-text + .m-inset__image {
-      // 19px value optically aligns top of image
-      // with adjacent Avenir Next cap height
-      margin-top: unit( 19px / @base-font-size-px, em );
-    }
-
-    .m-full-width-text + .m-inset__image + .m-full-width-text {
-      margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
-    }
-  });
-}
diff --git a/cfgov/unprocessed/css/organisms/full-width-text-group.scss b/cfgov/unprocessed/css/organisms/full-width-text-group.scss
new file mode 100644
index 0000000000..924045005d
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/full-width-text-group.scss
@@ -0,0 +1,80 @@
+@use 'sass:math';
+
+.o-full-width-text-group {
+  clear: both;
+
+  /**
+     * Fix for Wagtail's default img markup that includes height attribute
+     * and for loss of margin on extant Media block images.
+     * TODO: Remove once data migration from Media to ContentImage is complete
+     */
+
+  > img {
+    height: auto;
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+
+  .m-inset {
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    &:not(:first-child) {
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+    }
+  }
+
+  .m-full-width-media {
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    &:not(:first-child) {
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+    }
+  }
+
+  .m-full-width-text {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+    margin-bottom: math.div(30px, $base-font-size-px) + em;
+  }
+
+  .m-full-width-text + .m-call-to-action {
+    margin-top: math.div(30px, $base-font-size-px) + em;
+  }
+
+  // Tablet and above.
+  @include respond-to-min($bp-sm-min) {
+    .m-full-width-text {
+      margin-top: math.div(45px, $base-font-size-px) + em;
+      margin-bottom: math.div(45px, $base-font-size-px) + em;
+    }
+
+    .m-inset {
+      margin-left: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+      & + .m-full-width-text ul,
+      & + .m-full-width-text ol {
+        // Fix for IE11 rendering bullets issue
+        overflow: hidden;
+      }
+
+      &:not(:first-child) {
+        margin-top: 0;
+      }
+    }
+
+    .m-inset--left {
+      margin-right: math.div($grid-gutter-width, $base-font-size-px) + em;
+      margin-bottom: math.div(20px, $base-font-size-px) + em;
+      margin-left: 0;
+    }
+
+    .m-full-width-text + .m-inset__image {
+      // 19px value optically aligns top of image
+      // with adjacent Avenir Next cap height
+      margin-top: math.div(19px, $base-font-size-px) + em;
+    }
+
+    .m-full-width-text + .m-inset__image + .m-full-width-text {
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/organisms/header.less b/cfgov/unprocessed/css/organisms/header.scss
similarity index 71%
rename from cfgov/unprocessed/css/organisms/header.less
rename to cfgov/unprocessed/css/organisms/header.scss
index 50922a8848..72f64a1d11 100644
--- a/cfgov/unprocessed/css/organisms/header.less
+++ b/cfgov/unprocessed/css/organisms/header.scss
@@ -1,17 +1,20 @@
-@margin-half-em: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-@mobile-trigger-ht-px: 54px;
-@min_app_width__px: 320px;
+@use 'sass:math';
+
+$margin-half-em: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+  em;
+$mobile-trigger-ht-px: 54px;
+$min-app-width-px: 320px;
 
 .o-header {
-  min-width: @min_app_width__px;
+  min-width: $min-app-width-px;
   border-bottom: 5px solid var(--green);
   position: relative;
   z-index: 10;
   background-color: var(--white);
 
-  .respond-to-min(@bp-lg-min, {
-    min-width: @bp-lg-min;
-  });
+  @include respond-to-min($bp-lg-min) {
+    min-width: $bp-lg-min;
+  }
 
   &__content {
     position: relative;
@@ -25,20 +28,21 @@
         float: right;
 
         // Mobile only.
-        .respond-to-max(@bp-xs-max, {
+        @include respond-to-max($bp-xs-max) {
           margin-right: -15px;
-        });
+        }
 
         // Tablet only.
-        .respond-to-range(@bp-sm-min, @bp-sm-max, {
+        @include respond-to-range($bp-sm-min, $bp-sm-max) {
           margin-right: -30px;
-        });
+        }
       }
     }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+    @include respond-to-min($bp-med-min) {
+      padding-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
 
       > .wrapper {
         > .m-global-header-cta {
@@ -51,10 +55,10 @@
           min-width: 373px;
         }
       }
-    });
+    }
 
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       // Hide Global Header Call to Action.
       // Adjust Mobile Megamenu margin
       > .wrapper {
@@ -71,25 +75,27 @@
           position: absolute;
         }
       }
-    });
+    }
   }
 
   &__logo {
     &-img {
       // Size is to fit 320px minimum width for older iPhones, etc.
-      height: @mobile-trigger-ht-px - 20px;
+      height: $mobile-trigger-ht-px - 20px;
       width: auto;
+
       // Margin is to bring height to menu trigger's 60px (40 + 10 + 10).
       margin-top: 10px;
       margin-bottom: 10px;
+
       // Removes typical inline vertical whitespace.
       vertical-align: middle;
 
       // Desktop and above.
-      .respond-to-min(@bp-med-min, {
-        margin: 0 0 unit( 20px / @base-font-size-px, em ) 0;
+      @include respond-to-min($bp-med-min) {
+        margin: 0 0 (math.div(20px, $base-font-size-px) + em) 0;
         height: 50px;
-      });
+      }
     }
   }
 
@@ -97,29 +103,29 @@
     // Setting the minimum height allocates room for the mega menu
     // so the header height doesn't change when it loads in.
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       min-height: 167px;
-    });
+    }
   }
 
   &--mega-menu &__logo {
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       .js & {
         // Offset logo by width of mega menu trigger + 15px gap.
         // The margin-left starts inside the 15px padding of the page
         // page already, so a value that matches the width of the trigger
         // will give it the desired spacing to the right of the trigger.
-        margin-left: @mobile-trigger-ht-px;
+        margin-left: $mobile-trigger-ht-px;
       }
-    });
+    }
   }
 }
 
 // Move logo on print.
-.respond-to-print( {
+@include respond-to-print {
   .o-header__logo {
     // Mega menu is hidden, so we need to remove logo offset.
     margin-left: 15px !important;
   }
-});
+}
diff --git a/cfgov/unprocessed/css/organisms/info-unit-group.less b/cfgov/unprocessed/css/organisms/info-unit-group.scss
similarity index 51%
rename from cfgov/unprocessed/css/organisms/info-unit-group.less
rename to cfgov/unprocessed/css/organisms/info-unit-group.scss
index 7dae692e4d..1d011f0ea3 100644
--- a/cfgov/unprocessed/css/organisms/info-unit-group.less
+++ b/cfgov/unprocessed/css/organisms/info-unit-group.scss
@@ -1,12 +1,14 @@
-.u-u-grid-column--top-divider {
-  margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
-  border-left-width: @grid_gutter-width / 2;
+@use 'sass:math';
+
+@mixin u-grid-column-top-divider() {
+  margin-top: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
+  border-left-width: math.div($grid-gutter-width, 2);
 
   &::before {
     display: block;
     height: 1px;
     width: 100%;
-    margin-bottom: unit((@grid_gutter-width / @base-font-size-px), em);
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
     margin-left: auto !important;
     position: static;
     background-color: var(--gray-40);
@@ -16,7 +18,7 @@
 
 .o-info-unit-group {
   .content-l {
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
   }
 
   > .content-l:first-child {
@@ -25,49 +27,49 @@
 
   .content-l__col-1 + .content-l__col-1 {
     // Adds margin top to info units that follow another
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em) !important;
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em !important;
   }
 
   .content-l__top-divider {
     .content-l__col-1 + .content-l__col-1 {
       // Adds top divider between single-column info units
-      .u-u-grid-column--top-divider();
+      @include u-grid-column-top-divider;
     }
   }
 
   .content-l__top-divider + .content-l__top-divider {
     // Adds top divider between multi-column info unit rows
-    .u-u-grid-column--top-divider();
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
+    @include u-grid-column-top-divider;
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
   }
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     // Adds top divider between info unit cols on small screens
     .content-l__top-divider {
       .content-l__col + .content-l__col {
-        .u-u-grid-column--top-divider();
-        margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
+        @include u-grid-column-top-divider;
+        margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       }
     }
-  });
+  }
 
   // Tablet and above.
-  .respond-to-min(@bp-sm-min, {
+  @include respond-to-min($bp-sm-min) {
     .content-l__top-divider + .content-l__top-divider {
       // Matches top divider width to cols on larger screens
-      &:before {
-        // Overrides .u-u-grid-column--top-divider() margin-left !important rule
+      &::before {
+        // Overrides @include u-grid-column-top-divider(); margin-left !important rule
         margin-left: 15px !important;
         margin-right: 15px;
         width: auto;
       }
     }
-    .content-l__col-1:nth-of-type( n+2 ),
-    .content-l__col-1-2:nth-of-type( n+3 ),
-    .content-l__col-1-3:nth-of-type( n+4 ) {
+    .content-l__col-1:nth-of-type(n + 2),
+    .content-l__col-1-2:nth-of-type(n + 3),
+    .content-l__col-1-3:nth-of-type(n + 4) {
       // Adds margin-top to info units that begin a new row in their group
-      margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
+      margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
-  });
+  }
 }
diff --git a/cfgov/unprocessed/css/organisms/item-introduction.less b/cfgov/unprocessed/css/organisms/item-introduction.less
deleted file mode 100644
index 4c49c134d4..0000000000
--- a/cfgov/unprocessed/css/organisms/item-introduction.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.o-item-introduction {
-  margin-bottom: unit(@grid_gutter-width * 2 / @base-font-size-px, rem);
-
-  &__intro {
-    padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
-  }
-
-  .lead-paragraph {
-    margin-top: 0;
-  }
-
-  .meta {
-    margin-bottom: unit(@grid_gutter-width / @base-font-size-px, rem);
-
-    .byline {
-      .heading-4();
-    }
-  }
-}
diff --git a/cfgov/unprocessed/css/organisms/item-introduction.scss b/cfgov/unprocessed/css/organisms/item-introduction.scss
new file mode 100644
index 0000000000..e69efda3ff
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/item-introduction.scss
@@ -0,0 +1,24 @@
+@use 'sass:math';
+
+.o-item-introduction {
+  margin-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + rem;
+
+  &__intro {
+    padding-bottom: math.div(
+        math.div($grid-gutter-width, 2),
+        $base-font-size-px
+      ) + rem;
+  }
+
+  .lead-paragraph {
+    margin-top: 0;
+  }
+
+  .meta {
+    margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + rem;
+
+    .byline {
+      @include heading-4;
+    }
+  }
+}
diff --git a/cfgov/unprocessed/css/organisms/mega-menu.less b/cfgov/unprocessed/css/organisms/mega-menu.scss
similarity index 66%
rename from cfgov/unprocessed/css/organisms/mega-menu.less
rename to cfgov/unprocessed/css/organisms/mega-menu.scss
index 97988dc412..4d35293585 100644
--- a/cfgov/unprocessed/css/organisms/mega-menu.less
+++ b/cfgov/unprocessed/css/organisms/mega-menu.scss
@@ -1,21 +1,22 @@
+@use 'sass:math';
+
 // Import Design System's Atomic Component less file to get transition CSS.
-@import (less)
-  '@cfpb/cfpb-atomic-component/src/utilities/transition/transition.less';
+@import '@cfpb/cfpb-atomic-component/src/utilities/transition/transition';
 
 // Each content level adds a depth-specific class, such as o-mega-menu__content-1, o-mega-menu__content-2, etc.
 
-@mobile-trigger-ht-px: 54px;
+$mobile-trigger-ht-px: 54px;
 
 // TODO: Reduce global scope and reign it in to the menu only if possible.
 body {
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     overflow-x: hidden;
-  });
+  }
 }
 
-@menu-max-width-px: 1200px;
-@menu-link-hover-bar-px: 5px;
+$menu-max-width-px: 1200px;
+$menu-link-hover-bar-px: 5px;
 
 //
 // ELEMENT STATES
@@ -28,23 +29,23 @@ body {
 // Create a bar for hover purposes to the left of an item.
 // Ignore style linting on the name, because it's not smart enough for mixins.
 /* stylelint-disable selector-class-pattern */
-.u-bar-left( @color, @position: -@menu-link-hover-bar-px - 10px ) {
+@mixin u-bar-left($color, $position: (-1 * $menu-link-hover-bar-px) - 10px) {
   /* stylelint-enable */
   position: relative;
 
   &::before {
     position: absolute;
-    left: @position;
+    left: $position;
     top: 0;
     content: '';
-    background: @color;
-    width: @menu-link-hover-bar-px;
+    background: $color;
+    width: $menu-link-hover-bar-px;
     height: 100%;
   }
 }
 
 // Focus item appearance.
-.u-focus-rectangle() {
+@mixin u-focus-rectangle() {
   // Position focus rectangle relative to parent container.
   position: relative;
 
@@ -80,16 +81,16 @@ body {
 
 // Hover over item appearance.
 // Default link hover menu items.
-.u-hover-link-desktop() {
+@mixin u-hover-link-desktop() {
   &:hover {
-    .u-bar-left( var(--green) );
+    @include u-bar-left(var(--green));
   }
 }
 
 // Adjustments for links with icons, desktop.
-.u-hover-link-icon-desktop() {
+@mixin u-hover-link-icon-desktop() {
   &:hover {
-    .u-bar-left( var(--green), -@menu-link-hover-bar-px - 8px );
+    @include u-bar-left(var(--green), -$menu-link-hover-bar-px - 8px);
 
     .cf-icon-svg {
       fill: var(--black);
@@ -98,17 +99,18 @@ body {
 }
 
 // Adjustments for featured link, desktop.
-.u-hover-link-featured-desktop() {
+@mixin u-hover-link-featured-desktop() {
   &:hover {
-    .u-bar-left( transparent );
+    @include u-bar-left(transparent);
   }
 }
 
 // A default link on mobile.
-.u-hover-link-mobile() {
+@mixin u-hover-link-mobile() {
   &:hover {
     color: var(--black);
-    .u-bar-left( var(--green) );
+
+    @include u-bar-left(var(--green));
 
     // This is for the link with icon, which is
     // combined with this helper because the
@@ -130,52 +132,52 @@ body {
 //
 
 // Default link focus appearance, desktop.
-.u-focus-link-desktop() {
-  .u-focus-rectangle();
+@mixin u-focus-link-desktop() {
+  @include u-focus-rectangle;
 
   &::after {
-    left: -@menu-link-hover-bar-px - 9px;
-    width: calc(100% + @menu-link-hover-bar-px + 6px);
+    left: -$menu-link-hover-bar-px - 9px;
+    width: calc(100% + $menu-link-hover-bar-px + 6px);
   }
 }
 
 // Focus on overview links, desktop.
-.u-focus-overview-link-desktop() {
-  .u-focus-rectangle();
+@mixin u-focus-overview-link-desktop() {
+  @include u-focus-rectangle;
 
   &::after {
-    left: -@menu-link-hover-bar-px - 9px;
-    width: calc(100% + @menu-link-hover-bar-px + 9px);
+    left: -$menu-link-hover-bar-px - 9px;
+    width: calc(100% + $menu-link-hover-bar-px + 9px);
   }
 }
 
 // Focus on links with icons, desktop.
-.u-focus-link-icon-desktop() {
-  .u-focus-rectangle();
+@mixin u-focus-link-icon-desktop() {
+  @include u-focus-rectangle;
 
   &::after {
-    left: -@menu-link-hover-bar-px - 7px;
-    width: calc(100% + @menu-link-hover-bar-px + 6px);
+    left: -$menu-link-hover-bar-px - 7px;
+    width: calc(100% + $menu-link-hover-bar-px + 6px);
   }
 }
 
 // Focus on featured links, desktop.
-.u-focus-link-featured-desktop() {
-  .u-focus-rectangle();
+@mixin u-focus-link-featured-desktop() {
+  @include u-focus-rectangle;
 
   &::after {
-    left: -@menu-link-hover-bar-px;
-    width: calc(100% + @menu-link-hover-bar-px + 5px);
+    left: -$menu-link-hover-bar-px;
+    width: calc(100% + $menu-link-hover-bar-px + 5px);
   }
 }
 
 // Default link on mobile.
-.u-focus-link-mobile() {
-  .u-focus-rectangle();
+@mixin u-focus-link-mobile() {
+  @include u-focus-rectangle;
 
   &::after {
-    left: -@menu-link-hover-bar-px - 9px;
-    width: calc(100% + @menu-link-hover-bar-px + 14px);
+    left: -$menu-link-hover-bar-px - 9px;
+    width: calc(100% + $menu-link-hover-bar-px + 14px);
   }
 }
 
@@ -188,26 +190,26 @@ body {
 //
 
 // Default current link appearance, desktop.
-.u-current-link-desktop() {
+@mixin u-current-link-desktop() {
   &,
   &:hover {
-    .u-bar-left( var(--black) );
+    @include u-bar-left(var(--black));
   }
 }
 
 // Current link with an icon, desktop.
-.u-current-link-icon-desktop() {
+@mixin u-current-link-icon-desktop() {
   &,
   &:hover {
-    .u-bar-left( var(--black), -@menu-link-hover-bar-px - 8px );
+    @include u-bar-left(var(--black), -$menu-link-hover-bar-px - 8px);
   }
 }
 
 // Default current link, mobile.
-.u-current-link-mobile() {
+@mixin u-current-link-mobile() {
   &,
   &:hover {
-    .u-bar-left( var(--black) );
+    @include u-bar-left(var(--black));
   }
 }
 
@@ -228,7 +230,7 @@ body {
   &__content {
     &-overview-heading {
       margin-bottom: 0;
-      font-size: unit(18px / @base-font-size-px, rem);
+      font-size: math.div(18px, $base-font-size-px) + rem;
       font-weight: normal;
     }
 
@@ -252,6 +254,7 @@ body {
         border-bottom-width: 0;
       }
 
+      // Show the icons in featured links.
       & .cf-icon-svg {
         display: inline;
         color: var(--pacific);
@@ -264,7 +267,7 @@ body {
   &__content-1 {
     &-link {
       // Colors for :link, :visited, :hover, :focus, :active.
-      .u-link-colors( var(--black) );
+      @include u-link-colors(var(--black));
 
       display: block;
     }
@@ -281,7 +284,13 @@ body {
     &-link,
     &-overview-link {
       // Colors for :link, :visited, :hover, :focus, :active.
-      .u-link-colors( var(--pacific), var(--pacific), var(--black), var(--pacific), var(--black) );
+      @include u-link-colors(
+        var(--pacific),
+        var(--pacific),
+        var(--black),
+        var(--pacific),
+        var(--black)
+      );
       &:hover:focus {
         color: var(--black);
       }
@@ -291,25 +300,25 @@ body {
   }
 
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
+  @include respond-to-max($bp-xs-max) {
     &__trigger {
       margin-left: -15px;
     }
-  });
+  }
 
   // Tablet only.
-  .respond-to-range(@bp-sm-min, @bp-sm-max, {
+  @include respond-to-range($bp-sm-min, $bp-sm-max) {
     &__trigger {
       margin-left: -30px;
     }
-  });
+  }
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     &__trigger {
       display: none;
-      height: @mobile-trigger-ht-px;
-      min-width: @mobile-trigger-ht-px;
+      height: $mobile-trigger-ht-px;
+      min-width: $mobile-trigger-ht-px;
       padding-top: 14px;
       padding-bottom: 14px;
 
@@ -339,7 +348,7 @@ body {
         display: block;
       }
 
-      &[aria-expanded="true"] {
+      &[aria-expanded='true'] {
         background: var(--gray-10);
         border-left: 1px solid var(--gray-40);
         border-right: 1px solid var(--gray-40);
@@ -365,7 +374,7 @@ body {
     // Menu flyout.
     // All menus - Tablet/Mobile.
     &__content {
-      .u-drop-shadow-after();
+      @include u-drop-shadow-after;
 
       display: none;
       box-sizing: border-box;
@@ -383,14 +392,15 @@ body {
       }
 
       &.u-is-animating,
-      &[data-open="true"] {
+      &[data-open='true'] {
         display: block;
       }
 
       &-alt-trigger {
         display: block;
         width: 100%;
-        padding: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+          em;
         border: none;
         border-bottom: 1px solid var(--gray-40);
         position: relative;
@@ -419,8 +429,11 @@ body {
       }
 
       &-wrapper {
-        padding-top: unit( @grid_gutter-width / 2 / @base-font-size-px, rem );
-        padding-left: unit( @grid_gutter-width / @base-font-size-px, rem );
+        padding-top: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + rem;
+        padding-left: math.div($grid-gutter-width, $base-font-size-px) + rem;
       }
 
       // Adjust padding and margin on unordered list menu items
@@ -435,18 +448,31 @@ body {
 
       &-overview-heading-text {
         display: block;
-        padding-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
-        padding-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding-top: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
+        padding-bottom: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
 
       &-link,
       &-overview-link {
         position: relative;
+
         // Colors for :link, :visited, :hover, :focus, :active.
-        .u-link-colors( var(--pacific), var(--pacific), var(--pacific-60), var(--pacific), var(--navy-dark) );
+        @include u-link-colors(
+          var(--pacific),
+          var(--pacific),
+          var(--pacific-60),
+          var(--pacific),
+          var(--navy-dark)
+        );
 
-        padding-top: unit( 15px / 18px, em );
-        padding-bottom: unit( 15px / 18px, em );
+        padding-top: math.div(15px, 18px) + em;
+        padding-bottom: math.div(15px, 18px) + em;
 
         // Hide  >  icon when we do not have children.
         &-icon-post {
@@ -459,18 +485,18 @@ body {
           position: absolute;
           right: 0;
           top: 50%;
-          transform: translateY( -50% );
+          transform: translateY(-50%);
 
           .cf-icon-svg {
             fill: var(--green);
           }
         }
 
-        .u-hover-link-mobile();
-        .u-focus-link-mobile();
+        @include u-hover-link-mobile;
+        @include u-focus-link-mobile;
 
         &--current {
-          .u-current-link-mobile();
+          @include u-current-link-mobile;
         }
       }
     }
@@ -481,18 +507,19 @@ body {
 
       .js & {
         // Offset for height of trigger button.
-        top: @mobile-trigger-ht-px;
+        top: $mobile-trigger-ht-px;
       }
 
       &-list-group {
-        padding-right: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding-right: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
-
     }
 
     // 2nd-level menu - Tablet/Mobile.
     &__content-2 {
-
       // Remove final border line of last list item.
       &-lists &-list-group:last-child &-list:last-child &-item:last-child {
         border-bottom: none;
@@ -514,25 +541,33 @@ body {
     // Submenus - Tablet/Mobile.
     &__content-2,
     &__content-3 {
-      .u-move-right();
+      // u-move-right
+      transform: translate3d(100%, 0, 0);
       position: absolute;
       left: 0;
       top: -1px;
       z-index: 10;
 
       &-wrapper {
-        padding-right: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
-        padding-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding-right: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
+        padding-bottom: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
     }
 
     // Group heading - Tablet/Mobile
     &__group-heading {
-      // !important is used to override a highly specific ul+.h5 rule in base.less
-      margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, rem ) !important;
+      // !important is used to override a highly specific ul+.h5 rule in base.scss
+      margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        rem !important;
 
       &--hidden {
-        .u-visually-hidden();
+        @include u-visually-hidden;
       }
 
       // add border between title and following list
@@ -540,27 +575,27 @@ body {
         border-top: 1px solid var(--gray-40);
       }
     }
-  });
+  }
 
   // Desktop sizes. 901px.
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     position: relative;
-    left: -( @grid_gutter-width / 2 );
-    width: calc( 100% + @grid_gutter-width );
+    left: -1 * math.div($grid-gutter-width, 2);
+    width: calc(100% + $grid-gutter-width);
 
     // Horizontal rule to overlay on top of header rule so that
     // rule is not hidden when menu opens.
-    &:after {
+    &::after {
       position: absolute;
       bottom: 0;
-      left: -( @grid_gutter-width / 2 );
-      right: -( @grid_gutter-width / 2 );
+      left: -1 * math.div($grid-gutter-width, 2);
+      right: -1 * math.div($grid-gutter-width, 2);
       display: block;
       z-index: 20;
       height: 1px;
       content: '';
-      box-shadow: 0px 1px 0px 0px var(--gray-40);
+      box-shadow: 0 1px 0 0 var(--gray-40);
     }
 
     &__trigger {
@@ -574,10 +609,10 @@ body {
 
     // 1st-level menu - Desktop.
     &__content-1 {
-      &[data-open="true"] {
+      &[data-open='true'] {
         .o-mega-menu__content-1-wrapper {
           display: block;
-          transform: translateY( 0 );
+          transform: translateY(0);
         }
       }
 
@@ -586,11 +621,12 @@ body {
         width: 100%;
 
         // Constrain the menu spacing.
-        max-width: unit( 1000px / @base-font-size-px, em );
+        max-width: math.div(1000px, $base-font-size-px) + em;
       }
 
       &-list-group {
         margin-bottom: 0;
+
         // Truncate the expanded menu to this element.
         position: relative;
       }
@@ -614,11 +650,12 @@ body {
 
         position: relative;
         z-index: 30;
-        padding: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+        padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+          em;
         border-top: 1px solid transparent;
         border-right: 1px solid transparent;
         border-left: 1px solid transparent;
-        font-size: unit( 16px / @base-font-size-px, rem );
+        font-size: math.div(16px, $base-font-size-px) + rem;
 
         // Revert 100% width set globally within menu.
         width: auto !important;
@@ -640,27 +677,27 @@ body {
         // We cannot use a border here as it will get a slant on
         // the edges because there are transparent left/right
         // borders.
-        &:after {
+        &::after {
           position: absolute;
           left: 0;
           bottom: 0;
           content: '';
           background: transparent;
           width: 100%;
-          height: unit( 6px / @base-font-size-px, em );
+          height: math.div(6px, $base-font-size-px) + em;
         }
 
         &:hover {
           cursor: pointer;
 
           // Change hover border color.
-          &:after {
+          &::after {
             background: var(--gray-40);
           }
         }
 
         // A main nav label has been selected and the menu is expanded.
-        &[aria-expanded="true"],
+        &[aria-expanded='true'],
         &:active {
           position: relative;
           top: 1px;
@@ -672,33 +709,37 @@ body {
         }
 
         // Do not show hover when menu is expanded.
-        &[aria-expanded="true"]:hover,
+        &[aria-expanded='true']:hover,
         &:active:hover {
           border-bottom: none;
-          padding-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
+          padding-bottom: math.div(
+              math.div($grid-gutter-width, 2),
+              $base-font-size-px
+            ) + em;
         }
 
         &:focus {
           outline-offset: 2px;
         }
 
-        &[aria-expanded="true"]:focus {
+        &[aria-expanded='true']:focus {
           outline: none;
-          box-shadow: 0 -4px 5px 0 var(--pacific-40),
-          -5px -2px 5px 0 var(--pacific-40),
-          5px -2px 5px 0 var(--pacific-40);
+          box-shadow:
+            0 -4px 5px 0 var(--pacific-40),
+            -5px -2px 5px 0 var(--pacific-40),
+            5px -2px 5px 0 var(--pacific-40);
         }
 
-        &[aria-expanded="true"]:hover,
-        &[aria-expanded="true"]:focus {
-          &:after {
+        &[aria-expanded='true']:hover,
+        &[aria-expanded='true']:focus {
+          &::after {
             position: absolute;
             bottom: -5px;
             left: 0;
             display: block;
             content: '';
             width: 100%;
-            height: unit( 10px / @base-font-size-px, em );
+            height: math.div(10px, $base-font-size-px) + em;
             background: var(--gray-5);
           }
         }
@@ -706,39 +747,43 @@ body {
         &-icon-closed .cf-icon-svg,
         &-icon-open .cf-icon-svg {
           position: absolute;
+
           // Adjusts position by 4px to accommodate longer titles.
-          right: unit( ( 15px - 4px ) / @base-font-size-px, rem );
+          right: math.div((15px - 4px), $base-font-size-px) + rem;
           top: 19px;
-          font-size: unit( 10px / @base-font-size-px, em );
+          font-size: math.div(10px, $base-font-size-px) + em;
         }
 
         &-icon-closed .cf-icon-svg {
           display: inline-block;
         }
 
-        &[aria-expanded="true"] &-icon-open .cf-icon-svg {
+        &[aria-expanded='true'] &-icon-open .cf-icon-svg {
           display: inline-block;
         }
 
-        &[aria-expanded="true"] &-icon-closed .cf-icon-svg {
+        &[aria-expanded='true'] &-icon-closed .cf-icon-svg {
           display: none;
         }
 
         // Add padding to accommodate caret.
         &--has-children {
           // Remove 4px to accommodate longer titles.
-          padding-right: unit( ( @grid_gutter-width - 4px ) / @base-font-size-px, em );
+          padding-right: math.div(
+              ($grid-gutter-width - 4px),
+              $base-font-size-px
+            ) + em;
         }
 
         &--current {
           // Change the selection bar to black.
-          &:after {
+          &::after {
             background-color: var(--black);
           }
         }
 
-        &--current[aria-expanded="true"]:after,
-        &--current:active:after {
+        &--current[aria-expanded='true']::after,
+        &--current:active::after {
           background-color: transparent;
         }
       }
@@ -760,7 +805,7 @@ body {
         display: none;
       }
 
-      &[data-open="true"] {
+      &[data-open='true'] {
         overflow: visible;
 
         .o-mega-menu__content-2-wrapper {
@@ -771,12 +816,14 @@ body {
       &-wrapper {
         background-color: var(--gray-5);
         border: 1px solid var(--gray-40);
-        box-shadow: 0 5px 5px 0px rgba( 0, 0, 0, 0.2 );
-
-        padding: unit( @grid_gutter-width / @base-font-size-px, em );
-        padding-top: unit( 20px / @base-font-size-px, em );
-        padding-left: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em );
-        padding-right: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em );
+        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 20%);
+
+        padding: math.div($grid-gutter-width, $base-font-size-px) + em;
+        padding-top: math.div(20px, $base-font-size-px) + em;
+        padding-left: math.div(($grid-gutter-width * 1.5), $base-font-size-px) +
+          em;
+        padding-right: math.div(($grid-gutter-width * 1.5), $base-font-size-px) +
+          em;
       }
 
       &-alt-trigger {
@@ -784,8 +831,8 @@ body {
       }
 
       &-overview {
-        padding-bottom: @grid_gutter-width / 2;
-        margin-bottom: @grid_gutter-width;
+        padding-bottom: math.div($grid-gutter-width, 2);
+        margin-bottom: $grid-gutter-width;
 
         &-heading {
           padding-top: 0;
@@ -794,14 +841,14 @@ body {
 
       &-lists {
         display: table;
-        margin-top: unit( 10px / @base-font-size-px, em );
+        margin-top: math.div(10px, $base-font-size-px) + em;
       }
 
       &-list-group {
         display: table-cell;
         width: 25%;
         vertical-align: top;
-        padding-right: unit( 30px / @base-font-size-px, em );
+        padding-right: math.div(30px, $base-font-size-px) + em;
       }
 
       &-list-group:last-child {
@@ -811,63 +858,65 @@ body {
       // Move the first link in each mega menu list group up a bit so that
       // it aligns with the featured links box. We do this instead of
       // removing the top padding to preserve the link hover state.
-      &-list:not( &-list--featured ) &-item:first-child &-link {
-        margin-top: unit( -12px / @base-font-size-px, em );
+      &-list:not(&-list--featured) &-item:first-child &-link {
+        margin-top: math.div(-12px, $base-font-size-px) + em;
       }
 
       &-overview-link,
       &-link {
-        padding: unit( 10px / 18px, em );
+        padding: math.div(10px, 18px) + em;
         padding-left: 0;
-        padding-right: unit( 15px / 18px, em );
+        padding-right: math.div(15px, 18px) + em;
 
-        .u-hover-link-desktop();
+        @include u-hover-link-desktop;
 
         &--current {
-          .u-current-link-desktop();
+          @include u-current-link-desktop;
         }
       }
 
       &-overview-link {
         display: inline-block;
-        font-size: unit( 18px / @base-font-size-px, rem );
-        .u-focus-overview-link-desktop();
+        font-size: math.div(18px, $base-font-size-px) + rem;
+
+        @include u-focus-overview-link-desktop;
       }
 
       &-link {
-        font-size: unit( 16px / @base-font-size-px, em );
-        .u-focus-link-desktop();
+        font-size: math.div(16px, $base-font-size-px) + em;
+
+        @include u-focus-link-desktop;
       }
 
       &-item--has-icon {
         // Pad in featured items from their icons.
-        padding-left: unit( 13px / @base-font-size-px, em );
+        padding-left: math.div(13px, $base-font-size-px) + em;
       }
 
       // Set up hover state for link with an icon.
       &-item--has-icon &-link {
-        .u-hover-link-icon-desktop();
-        .u-focus-link-icon-desktop();
+        @include u-hover-link-icon-desktop;
+        @include u-focus-link-icon-desktop;
 
         &--current {
-          .u-current-link-icon-desktop();
+          @include u-current-link-icon-desktop;
         }
       }
 
       // Featured item has a highlight box around it.
       &-list--featured ul {
         // Style the featured item box.
-        padding-right: unit( 13px / @base-font-size-px, em );
-        padding-top: unit( 30px / @base-font-size-px, em );
-        padding-bottom: unit( 30px / @base-font-size-px, em );
-        margin-bottom: unit( 30px / @base-font-size-px, em );
+        padding-right: math.div(13px, $base-font-size-px) + em;
+        padding-top: math.div(30px, $base-font-size-px) + em;
+        padding-bottom: math.div(30px, $base-font-size-px) + em;
+        margin-bottom: math.div(30px, $base-font-size-px) + em;
         border: 1px solid var(--gray-40);
         border-top: 6px solid var(--gold);
         box-sizing: border-box;
       }
 
       &-list--featured &-item {
-        margin-bottom: unit( 15px / @base-font-size-px, em );
+        margin-bottom: math.div(15px, $base-font-size-px) + em;
 
         &:last-child {
           margin-bottom: 0;
@@ -876,8 +925,8 @@ body {
 
       &-list--featured &-link {
         // Remove hover bar for featured item link.
-        .u-hover-link-featured-desktop();
-        .u-focus-link-featured-desktop();
+        @include u-hover-link-featured-desktop;
+        @include u-focus-link-featured-desktop;
 
         display: flex;
         padding: 0;
@@ -887,7 +936,7 @@ body {
         & .cf-icon-svg {
           color: var(--gold);
           width: 100%;
-          max-width: unit( 16px / @base-font-size-px, rem );
+          max-width: math.div(16px, $base-font-size-px) + rem;
         }
       }
     }
@@ -898,7 +947,7 @@ body {
     }
 
     &__group-heading {
-      margin-bottom: unit( 30px / @base-font-size-px, em );
+      margin-bottom: math.div(30px, $base-font-size-px) + em;
 
       &--hidden {
         visibility: hidden;
@@ -910,38 +959,35 @@ body {
     .m-global-eyebrow {
       display: none;
     }
-  });
+  }
 
   // Large desktop size. 1021px. Not currently used.
 
-  /* .respond-to-min(@bp-lg-min, { }); */
+  /* @include respond-to-min($bp-lg-min, { }); */
 
   // Xtra-Large desktop size. 1261px.
-  .respond-to-min(@bp-xl-min + @grid_gutter-width, {
-    width: @menu-max-width-px;
+  @include respond-to-min($bp-xl-min + $grid-gutter-width) {
+    width: $menu-max-width-px;
 
     // Horizontal rule to overlay on top of header rule so that
     // rule is not hidden when menu opens.
-    &:after {
-      left: -@grid_gutter-width;
-      width: @menu-max-width-px + ( @grid_gutter-width * 2 );
+    &::after {
+      left: -$grid-gutter-width;
+      width: $menu-max-width-px + ($grid-gutter-width * 2);
     }
 
     &__content-2 {
-      left: -@grid_gutter-width;
-      width: @menu-max-width-px + ( @grid_gutter-width * 2 );
+      left: -$grid-gutter-width;
+      width: $menu-max-width-px + ($grid-gutter-width * 2);
     }
-
-  });
+  }
 
   // Normalize second level width between 901px and 1260px
-  .respond-to-range(@bp-med-min, @bp-lg-max + @grid_gutter-width, {
-
+  @include respond-to-range($bp-med-min, $bp-lg-max + $grid-gutter-width) {
     &__content-2 {
       width: 100%;
     }
-
-  });
+  }
 }
 
 .no-js .o-mega-menu {
@@ -957,11 +1003,11 @@ body {
 }
 
 // Hide on print.
-.respond-to-print( {
+@include respond-to-print {
   .o-mega-menu {
     display: none;
   }
-});
+}
 
 // The following three rules prevent mega-menu linebreak shenanigans
 .o-mega-menu__content-2-item--has-icon .o-mega-menu__content-2-link {
diff --git a/cfgov/unprocessed/css/organisms/post-preview.less b/cfgov/unprocessed/css/organisms/post-preview.less
deleted file mode 100644
index 083a0f337c..0000000000
--- a/cfgov/unprocessed/css/organisms/post-preview.less
+++ /dev/null
@@ -1,74 +0,0 @@
-.o-post-preview {
-  border-bottom: 1px solid var(--gray-40);
-  padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: auto;
-  grid-template-areas:
-    'header header'
-    'content image';
-
-  // Mobile only.
-  .respond-to-max(@bp-xs-max, {
-    grid-template-areas:
-    'header'
-    'image'
-    'content';
-  });
-
-  + .o-post-preview {
-    margin-top: unit(@grid_gutter-width / @base-font-size-px, em);
-  }
-
-  &__content {
-    grid-area: content;
-    padding-right: unit(@grid_gutter-width / @base-font-size-px, em);
-
-    > .calendar-icon {
-      float: left;
-      margin-right: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-      margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-    }
-  }
-
-  &__description {
-    margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  }
-
-  &__image-container {
-    position: relative;
-    grid-area: image;
-
-    // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
-      margin-bottom: unit( @grid_gutter-width / 2 / @base-font-size-px, em);
-    });
-
-    // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      width: unit( 270px / @base-font-size-px, em );
-    });
-  }
-
-  &__image {
-    display: block;
-    width: 100%;
-  }
-
-  &__title a {
-    .u-link-colors( var(--black), var(--pacific-80) );
-  }
-
-  &__subtitle {
-    .heading-6();
-
-    // margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em);
-    clear: both;
-  }
-
-  &__byline-group,
-  .m-tags {
-    display: block;
-    margin-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-  }
-}
diff --git a/cfgov/unprocessed/css/organisms/post-preview.scss b/cfgov/unprocessed/css/organisms/post-preview.scss
new file mode 100644
index 0000000000..6a90133cb9
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/post-preview.scss
@@ -0,0 +1,88 @@
+@use 'sass:math';
+
+.o-post-preview {
+  border-bottom: 1px solid var(--gray-40);
+  padding-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+    em;
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  grid-template-areas:
+    'header header'
+    'content image';
+
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    grid-template-areas:
+      'header'
+      'image'
+      'content';
+  }
+
+  + .o-post-preview {
+    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+
+  &__content {
+    grid-area: content;
+    padding-right: math.div($grid-gutter-width, $base-font-size-px) + em;
+
+    > .calendar-icon {
+      float: left;
+      margin-right: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + em;
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + em;
+    }
+  }
+
+  &__description {
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+  }
+
+  &__image-container {
+    position: relative;
+    grid-area: image;
+
+    // Tablet and below.
+    @include respond-to-max($bp-sm-max) {
+      margin-bottom: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + em;
+    }
+
+    // Desktop and above.
+    @include respond-to-min($bp-med-min) {
+      width: math.div(270px, $base-font-size-px) + em;
+    }
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+  }
+
+  &__title a {
+    @include u-link-colors(var(--black), var(--pacific-80));
+  }
+
+  &__subtitle {
+    @include heading-6;
+
+    // margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
+    clear: both;
+  }
+
+  &__byline-group,
+  .m-tags {
+    display: block;
+    margin-bottom: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+  }
+}
diff --git a/cfgov/unprocessed/css/organisms/prefooter.less b/cfgov/unprocessed/css/organisms/prefooter.less
deleted file mode 100644
index 3ffe16df93..0000000000
--- a/cfgov/unprocessed/css/organisms/prefooter.less
+++ /dev/null
@@ -1,35 +0,0 @@
-// TODO: Investigate where this fits in the organisms wiki.
-//       Remove margin from this file as it doesn't fit within
-//       our atomic rules.
-
-.o-prefooter {
-  // Clear any floating m-inset that may be above this.
-  clear: both;
-
-  margin-top: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
-  margin-bottom: 0;
-
-  margin-right: unit(@grid_gutter-width / -2 / @base-font-size-px, em);
-  margin-left: unit(@grid_gutter-width / -2 / @base-font-size-px, em);
-
-  border-top: 1px solid var(--gray-40);
-
-  padding-top: unit(@grid_gutter-width / @base-font-size-px, em);
-  padding-left: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-  padding-right: unit((@grid_gutter-width / 2) / @base-font-size-px, em);
-
-  background: var(--gray-5);
-  overflow: auto;
-
-  .respond-to-min(@bp-sm-min, {
-    margin-right: unit( -@grid_gutter-width / @base-font-size-px, em );
-    margin-left: unit( -@grid_gutter-width / @base-font-size-px, em );
-
-    // Border for both LTR and RTL layouts.
-    border-right: 1px solid var(--gray-40);
-    border-left: 1px solid var(--gray-40);
-
-    padding-left: unit( @grid_gutter-width / @base-font-size-px, em);
-    padding-right: unit( @grid_gutter-width / @base-font-size-px, em);
-  });
-}
diff --git a/cfgov/unprocessed/css/organisms/prefooter.scss b/cfgov/unprocessed/css/organisms/prefooter.scss
new file mode 100644
index 0000000000..c7b78eaec8
--- /dev/null
+++ b/cfgov/unprocessed/css/organisms/prefooter.scss
@@ -0,0 +1,41 @@
+@use 'sass:math';
+
+// TODO: Investigate where this fits in the organisms wiki.
+//       Remove margin from this file as it doesn't fit within
+//       our atomic rules.
+
+.o-prefooter {
+  // Clear any floating m-inset that may be above this.
+  clear: both;
+
+  margin-top: math.div($grid-gutter-width * 2, $base-font-size-px) + em;
+  margin-bottom: 0;
+
+  margin-right: math.div(math.div($grid-gutter-width, -2), $base-font-size-px) +
+    em;
+  margin-left: math.div(math.div($grid-gutter-width, -2), $base-font-size-px) +
+    em;
+
+  border-top: 1px solid var(--gray-40);
+
+  padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
+  padding-left: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+    em;
+  padding-right: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+    em;
+
+  background: var(--gray-5);
+  overflow: auto;
+
+  @include respond-to-min($bp-sm-min) {
+    margin-right: math.div(-$grid-gutter-width, $base-font-size-px) + em;
+    margin-left: math.div(-$grid-gutter-width, $base-font-size-px) + em;
+
+    // Border for both LTR and RTL layouts.
+    border-right: 1px solid var(--gray-40);
+    border-left: 1px solid var(--gray-40);
+
+    padding-left: math.div($grid-gutter-width, $base-font-size-px) + em;
+    padding-right: math.div($grid-gutter-width, $base-font-size-px) + em;
+  }
+}
diff --git a/cfgov/unprocessed/css/organisms/secondary-nav.less b/cfgov/unprocessed/css/organisms/secondary-nav.scss
similarity index 55%
rename from cfgov/unprocessed/css/organisms/secondary-nav.less
rename to cfgov/unprocessed/css/organisms/secondary-nav.scss
index 539232a93e..0a6b0c1a38 100644
--- a/cfgov/unprocessed/css/organisms/secondary-nav.less
+++ b/cfgov/unprocessed/css/organisms/secondary-nav.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .o-secondary-nav {
   //
   // Header
@@ -7,8 +9,8 @@
     justify-content: space-between;
     border: 0;
     cursor: pointer;
-    padding: unit((10px / @base-font-size-px), em)
-      unit((15px / @base-font-size-px), em);
+    padding: (math.div(10px, $base-font-size-px) + em)
+      (math.div(15px, $base-font-size-px) + em);
 
     &:focus {
       outline: 1px dotted var(--black);
@@ -41,37 +43,37 @@
     min-width: 60px;
     text-align: right;
     color: var(--pacific);
-    font-size: unit((@btn-font-size / @base-font-size-px), em);
-    line-height: unit((@base-line-height-px / @btn-font-size));
+    font-size: math.div($btn-font-size, $base-font-size-px) + em;
+    line-height: math.div($base-line-height-px, $btn-font-size);
   }
 
   &__label {
     // Grow to available width.
     flex-grow: 1;
 
-    font-size: unit(16px / @base-font-size-px, rem);
+    font-size: math.div(16px, $base-font-size-px) + rem;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--pacific);
 
-    line-height: unit((22 / @size-v));
+    line-height: math.div(22px, $size-v);
     margin-bottom: 0;
   }
 
   &__content {
-    padding: unit((15px / @base-font-size-px), em);
+    padding: math.div(15px, $base-font-size-px) + em;
     padding-top: 0;
 
     // The divider between __header and __content.
     &::before {
       content: '';
       display: block;
-      border-top: 1px solid @expandable--border;
-      padding-top: unit((15px / @base-font-size-px), em);
+      border-top: 1px solid $expandable-border;
+      padding-top: math.div(15px, $base-font-size-px) + em;
     }
 
     &::after {
-      padding-bottom: unit((15px / @base-font-size-px), em);
+      padding-bottom: math.div(15px, $base-font-size-px) + em;
       width: 100%;
     }
   }
@@ -86,13 +88,17 @@
   }
 
   &__list--children {
-    margin-left: unit((@grid_gutter-width / 2 / @base-font-size-px), em);
+    margin-left: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       // Add 5px for the border to half the gutter
-      margin-left: unit( (( (@grid_gutter-width / 2 ) + 5px ) / @base-font-size-px), em) ;
-    });
+      margin-left: math.div(
+          math.div($grid-gutter-width, 2) + 5px,
+          $base-font-size-px
+        ) + em;
+    }
   }
 
   &__link {
@@ -101,59 +107,83 @@
     // Break the menu word when it is too wide to fit in the sidebar area.
     word-break: break-word;
 
-    .u-link-colors( var(--pacific), var(--pacific), var(--black), var(--black), var(--black),
-    transparent, transparent, var(--green), var(--green), var(--green) );
+    @include u-link-colors(
+      var(--pacific),
+      var(--pacific),
+      var(--black),
+      var(--black),
+      var(--black),
+      transparent,
+      transparent,
+      var(--green),
+      var(--green),
+      var(--green)
+    );
 
     border-style: solid;
     border-left-width: 5px;
 
     // Tablet and below.
-    .respond-to-max(@bp-sm-max, {
+    @include respond-to-max($bp-sm-max) {
       display: block;
 
-      padding: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
-    });
+      padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+        em;
+    }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
-      padding-top: unit( (10px / @base-font-size-px), em );
-      padding-bottom: unit( (10px / @base-font-size-px), em );
-      padding-left: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
-    });
+    @include respond-to-min($bp-med-min) {
+      padding-top: math.div(10px, $base-font-size-px) + em;
+      padding-bottom: math.div(10px, $base-font-size-px) + em;
+      padding-left: math.div(
+          math.div($grid-gutter-width, 2),
+          $base-font-size-px
+        ) + em;
+    }
 
     &--current {
-      .u-link-colors( var(--black), var(--black), var(--black), var(--black), var(--black),
-      var(--black), var(--black), var(--black), var(--black), var(--black) );
+      @include u-link-colors(
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black),
+        var(--black)
+      );
     }
 
     &--parent {
-      .heading-4();
+      @include heading-4;
 
       margin-bottom: inherit;
     }
   }
 
   // Tablet and below.
-  .respond-to-max(@bp-sm-max, {
+  @include respond-to-max($bp-sm-max) {
     background: var(--gray-5);
     border-bottom: 1px solid var(--gray-40);
 
     // Add drop-shadow.
-    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 20%);
 
     &--no-children {
       display: none;
     }
 
     &__list--parents {
-      li[data-nav-is-active='False']{
+      li[data-nav-is-active='False'] {
         display: none;
       }
     }
-  });
+  }
 
   // Desktop and above.
-  .respond-to-min(@bp-med-min, {
+  @include respond-to-min($bp-med-min) {
     .o-secondary-nav {
       background: none;
 
@@ -168,17 +198,17 @@
         max-height: 100% !important;
         padding: 0;
 
-        &:before {
+        &::before {
           display: none;
         }
       }
     }
-  });
+  }
 
   // Hide on print.
-  .respond-to-print( {
+  @include respond-to-print {
     display: none;
-  });
+  }
 }
 
 // Right-to-left (RTL) layout.
@@ -202,14 +232,20 @@ html[lang='ar'] {
     }
 
     // Desktop and above.
-    .respond-to-min(@bp-med-min, {
+    @include respond-to-min($bp-med-min) {
       &__link {
-        padding-right: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
+        padding-right: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
 
       &__list--parents {
-        padding-right: unit((@grid_gutter-width / 2 / @base-font-size-px), em);
+        padding-right: math.div(
+            math.div($grid-gutter-width, 2),
+            $base-font-size-px
+          ) + em;
       }
-    });
+    }
   }
 }
diff --git a/cfgov/unprocessed/css/organisms/sidebar-breakout.less b/cfgov/unprocessed/css/organisms/sidebar-breakout.scss
similarity index 50%
rename from cfgov/unprocessed/css/organisms/sidebar-breakout.less
rename to cfgov/unprocessed/css/organisms/sidebar-breakout.scss
index 05358e7add..b562f7e582 100644
--- a/cfgov/unprocessed/css/organisms/sidebar-breakout.less
+++ b/cfgov/unprocessed/css/organisms/sidebar-breakout.scss
@@ -1,6 +1,8 @@
-@margin-em: unit(@grid_gutter-width / @base-font-size-px, em);
-@o-sidebar-breakout__img-width: 300px;
-@o-sidebar-breakout__img-height: 170px;
+@use 'sass:math';
+
+$margin-em: math.div($grid-gutter-width, $base-font-size-px) + em;
+$sidebar-breakout-img-width: 300px;
+$sidebar-breakout-img-height: 170px;
 
 .o-sidebar-breakout {
   &__img {
@@ -12,8 +14,8 @@
   }
 
   &__img-container {
-    max-width: @o-sidebar-breakout__img-width;
-    max-height: @o-sidebar-breakout__img-height;
+    max-width: $sidebar-breakout-img-width;
+    max-height: $sidebar-breakout-img-height;
   }
 
   &__img-container--round {
@@ -21,30 +23,29 @@
 
     .o-sidebar-breakout__img {
       padding: 0;
-      height: @o-sidebar-breakout__img-height;
-      width: @o-sidebar-breakout__img-height;
+      height: $sidebar-breakout-img-height;
+      width: $sidebar-breakout-img-height;
     }
   }
 
   &__text-body {
-    margin-bottom: @margin-em;
+    margin-bottom: $margin-em;
   }
 
   &__text-heading {
-    margin-top: @margin-em;
-    margin-bottom: @margin-em / 2;
+    margin-top: $margin-em;
+    margin-bottom: $margin-em / 2;
   }
 }
 
-.respond-to-max(@bp-xs-max, {
+@include respond-to-max($bp-xs-max) {
   .o-sidebar-breakout {
-
-    margin-bottom: @margin-em;
+    margin-bottom: $margin-em;
 
     &__col {
       width: 100%;
       &:last-child {
-        margin-top: unit( (@grid_gutter-width * 2) / @base-font-size-px, em );
+        margin-top: math.div(($grid-gutter-width * 2), $base-font-size-px) + em;
       }
     }
 
@@ -54,22 +55,22 @@
       text-align: center;
     }
   }
-});
+}
 
 // Desktop and above.
-.respond-to-min(@bp-med-min, {
+@include respond-to-min($bp-med-min) {
   .o-sidebar-breakout__col:last-child {
-    padding-left: @margin-em;
+    padding-left: $margin-em;
   }
-});
+}
 
 // Tablet only.
-.respond-to-range( @bp-sm-min, @bp-sm-max, {
+@include respond-to-range($bp-sm-min, $bp-sm-max) {
   .o-sidebar-breakout {
     &__img-container {
       float: left;
-      width: @o-sidebar-breakout__img-width / @bp-sm-max * 100%;
-      margin-right: @margin-em;
+      width: math.div($sidebar-breakout-img-width, $bp-sm-max) * 100%;
+      margin-right: $margin-em;
     }
 
     &__text-container {
@@ -80,4 +81,4 @@
       margin-top: 0;
     }
   }
-});
+}
diff --git a/cfgov/unprocessed/css/organisms/video-player.less b/cfgov/unprocessed/css/organisms/video-player.scss
similarity index 80%
rename from cfgov/unprocessed/css/organisms/video-player.less
rename to cfgov/unprocessed/css/organisms/video-player.scss
index 0305d4712e..83a63ac995 100644
--- a/cfgov/unprocessed/css/organisms/video-player.less
+++ b/cfgov/unprocessed/css/organisms/video-player.scss
@@ -1,11 +1,13 @@
+@use 'sass:math';
+
 // Variable used to set the size of the play button.
-@play-btn-size-px: 60px;
+$play-btn-size-px: 60px;
 
 // Variable used to set the size of the play button's SVG icon.
-@play-btn-icon-size: 30px;
+$play-btn-icon-size: 30px;
 
 // Magic number: height of standard button.
-@standard-btn-height-px: 36px;
+$standard-btn-height-px: 36px;
 
 .o-video-player {
   overflow: hidden;
@@ -58,9 +60,10 @@
     margin-left: -1px;
     float: left;
     height: 0;
+
     // Calculate padding to set the height of the container proportionally
     // so that we end up with a 16:9 aspect ratio.
-    padding-top: 9 / 16 * 100%;
+    padding-top: math.div(9, 16) * 100%;
   }
 
   // To clear float.
@@ -76,20 +79,21 @@
   display: block;
   opacity: 0;
   transition: opacity 0.25s;
+
   // Needed for IE11 to not stretch the image.
   flex-shrink: 0;
   align-self: center;
 
   // Using the default CFPB cover card image.
   &[src^='/static/img/cfpb__video__cover__card__954x200'] {
-    padding: unit(60px / @base-font-size-px, em);
+    padding: math.div(60px, $base-font-size-px) + em;
     box-sizing: border-box;
 
-    // Overrides values set in featured-content-module.less file in the DS.
+    // Overrides values set in featured-content-module.scss file in the DS.
     &.o-featured-content-module__img {
       max-width: 100%;
       height: auto;
-      padding: unit(15px / @base-font-size-px, em);
+      padding: math.div(15px, $base-font-size-px) + em;
       left: 0;
       transform: none;
     }
@@ -110,7 +114,7 @@
   padding-right: 6px;
   padding-top: 3px;
   padding-bottom: 3px;
-  font-size: unit(16px / @base-font-size-px, rem);
+  font-size: math.div(16px, $base-font-size-px) + rem;
   position: absolute;
   right: 0;
   bottom: 0;
@@ -118,13 +122,15 @@
 
 .o-video-player__play-btn {
   box-sizing: border-box;
-  width: @play-btn-size-px;
-  height: @play-btn-size-px;
+  width: $play-btn-size-px;
+  height: $play-btn-size-px;
+
   // !important is needed for when this is applied to a link.
   border: 2px solid var(--gray-5) !important;
   border-radius: 100%;
   position: absolute;
   z-index: 3;
+
   // !important is needed for when this is applied to a link.
   background-color: rgba(
     16,
@@ -133,7 +139,7 @@
     75%
   ) !important; // CFPB Black (#101820) at 80% opacity
   color: var(--white) !important;
-  font-size: @play-btn-icon-size;
+  font-size: $play-btn-icon-size;
 
   &:hover {
     // !important is needed to override non-hover background.
@@ -152,8 +158,8 @@
   }
 
   &--bottom-right {
-    right: unit(@grid_gutter-width / 2 / @play-btn-icon-size, em);
-    bottom: unit(@grid_gutter-width / 2 / @play-btn-icon-size, em);
+    right: math.div(math.div($grid-gutter-width, 2), $play-btn-icon-size) + em;
+    bottom: math.div(math.div($grid-gutter-width, 2), $play-btn-icon-size) + em;
   }
 
   &--center,
@@ -211,6 +217,7 @@ button.o-video-player__play-btn,
   opacity: 0;
   height: 0;
   margin: auto;
+
   // var(--black) not used because it's not totally black.
   background-color: #000;
 }
@@ -219,7 +226,7 @@ button.o-video-player__play-btn,
   right: 0;
   left: auto;
 
-  padding: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
+  padding: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
   color: var(--white);
 
   .m-social-media__heading {
@@ -232,14 +239,14 @@ button.o-video-player__play-btn,
 }
 
 // Tablet and above.
-.respond-to-min(@bp-sm-min, {
+@include respond-to-min($bp-sm-min) {
   .o-video-player__video-actions-container {
     position: absolute;
     top: 0;
   }
-});
+}
 
-.o-video-player__iframe-mixin() {
+@mixin u-video-player-iframe-mixin() {
   position: absolute;
   top: 0;
   left: 0;
@@ -250,11 +257,12 @@ button.o-video-player__play-btn,
 .o-video-player__video-container--flexible {
   .o-video-player__iframe-container {
     width: auto;
-    .u-flexible-container-mixin();
+
+    @include u-flexible-container-mixin;
   }
 
   .o-video-player__iframe {
-    .o-video-player__iframe-mixin();
+    @include u-video-player-iframe-mixin;
   }
 
   .o-video-player__video-actions-container {
@@ -265,20 +273,21 @@ button.o-video-player__play-btn,
 
   .m-social-media {
     // Tablet and above.
-    .respond-to-min(@bp-sm-min, {
+    @include respond-to-min($bp-sm-min) {
       text-align: right;
-    });
+    }
   }
 
   .m-social-media,
   .o-video-player__video-actions {
     margin-bottom: 0;
-    .u-grid-column(6);
+
+    @include u-grid-column(6);
 
     // Mobile only.
-    .respond-to-max(@bp-xs-max, {
+    @include respond-to-max($bp-xs-max) {
       width: 100%;
-    });
+    }
   }
 }
 
@@ -290,58 +299,61 @@ button.o-video-player__play-btn,
   .m-social-media__icons {
     display: block;
     margin-right: 0;
-    margin-top: unit(10px / @base-font-size-px, rem);
+    margin-top: math.div(10px, $base-font-size-px) + rem;
   }
 }
 
 .o-video-player .m-social-media,
 .o-video-player__video-actions {
   // Mobile only.
-  .respond-to-max(@bp-xs-max, {
-    margin-top: unit( @grid_gutter-width / 2 / @base-font-size-px, em );
-  });
+  @include respond-to-max($bp-xs-max) {
+    margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) +
+      em;
+  }
 }
 
 // Mobile only.
-.respond-to-max(@bp-xs-max, {
+@include respond-to-max($bp-xs-max) {
   .o-video-player__iframe-container {
-    .u-flexible-container-mixin();
+    @include u-flexible-container-mixin;
   }
 
   .o-video-player__iframe {
-    .o-video-player__iframe-mixin();
+    @include u-video-player-iframe-mixin;
   }
-});
+}
 
 // Special styles for playing within a Featured Content Module (FCM).
 .o-featured-content-module {
   .o-video-player__video-actions-container {
     margin: 0;
     padding: 0;
+
     // Magic number: height of standard button and 1px border around FCM.
-    top: (@standard-btn-height-px + 1px) * -1;
+    top: ($standard-btn-height-px + 1px) * -1;
   }
 
   .o-video-player__close-btn {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     display: block;
+
     // Pushes button out of masked window when not playing.
-    margin-top: @standard-btn-height-px;
+    margin-top: $standard-btn-height-px;
   }
 }
 
 // Mobile only.
-.respond-to-max(@bp-xs-max, {
+@include respond-to-max($bp-xs-max) {
   .o-featured-content-module .o-video-player__video-actions-container {
     display: none;
   }
-});
+}
 
 // Tablet and above.
-.respond-to-min(@bp-sm-min, {
+@include respond-to-min($bp-sm-min) {
   .o-featured-content-module.video-playing {
-    .u-flexible-container();
+    @include u-flexible-container-mixin;
     transition: 0.5s all ease-out;
     min-height: 0;
 
@@ -370,4 +382,4 @@ button.o-video-player__play-btn,
       opacity: 1;
     }
   }
-});
+}
diff --git a/cfgov/unprocessed/css/print.less b/cfgov/unprocessed/css/print.scss
similarity index 75%
rename from cfgov/unprocessed/css/print.less
rename to cfgov/unprocessed/css/print.scss
index 8610d49576..0ae9c0105d 100644
--- a/cfgov/unprocessed/css/print.less
+++ b/cfgov/unprocessed/css/print.scss
@@ -1,43 +1,46 @@
+@use 'sass:math';
+
 /* "The `.print` class acts a styling hook. When using the
-  `.respond-to-print()` mixin, all stlyes will be nested under both
+  `@include respond-to-print()` mixin, all stlyes will be nested under both
   `@media print` and `.print`."
  */
 
-.respond-to-print({
+@include respond-to-print {
   a {
     font-weight: 500;
   }
 
-  a:after {
+  a::after {
     border-bottom: 1px solid var(--white);
     font-weight: 300;
     word-break: break-all;
   }
 
-  a[href*="://"]:after {
+  a[href*="://"]:after
+  {
     // Output href in parentheses for links with a protocol already there.
-    content: " (" attr(href) ")";
+    content: ' (' attr(href) ')';
   }
 
-  a[href^="/"]:after {
+  a[href^='/']::after {
     // Output root-relative hrefs in parentheses with our domain prepended.
-    content: " (cfpb.gov" attr(href) ")";
+    content: ' (cfpb.gov' attr(href) ')';
   }
 
-  a[href^="/ask-cfpb/"]:after,
-  a[href*="consumerfinance.gov/ask-cfpb"]:after {
+  a[href^='/ask-cfpb/']::after,
+  a[href*='consumerfinance.gov/ask-cfpb']::after {
     // Use short URL when printing Ask CFPB links.
-    content: " (" attr(data-pretty-href) ")";
+    content: ' (' attr(data-pretty-href) ')';
   }
 
-  a.o-header__logo-img:after,
-  a.m-info-unit__heading-link:after,
-  .m-info-unit__content h4 a:after {
+  a.o-header__logo-img::after,
+  a.m-info-unit__heading-link::after,
+  .m-info-unit__content h4 a::after {
     // Do not append hrefs to the logo or info unit headings.
     content: none;
   }
 
-  a[href^="#"]{
+  a[href^='#'] {
     // Style in-page anchor links (like page TOCs) to not look like links.
     color: var(--gray-dark);
     border-bottom-width: 0;
@@ -49,8 +52,8 @@
     &:visited {
       // Replace Design System button link stylings with some generic styling
       all: unset;
-      border-bottom: 1px dotted @link-underline;
-      color: @link-text;
+      border-bottom: 1px dotted $link-underline;
+      color: $link-text;
       display: inline;
       font-weight: 500;
       text-decoration: none;
@@ -65,14 +68,14 @@
       // Convert stand-alone (jump) links to standard inline links
       border-top: 0;
       display: inline;
-      padding-top: unit( 5px / @base-font-size-px, em );
+      padding-top: math.div(5px, $base-font-size-px) + em;
       padding-bottom: 0;
     }
   }
 
   .m-list--links .m-list__item {
     // Space out stand-alone links by .5em
-    margin-bottom: unit( 8px / @base-font-size-px, em );
+    margin-bottom: math.div(8px, $base-font-size-px) + em;
   }
 
   .o-info-unit-group {
@@ -83,19 +86,19 @@
       display: table-cell !important;
     }
     .content-l__col-1 {
-      .u-grid-column( 12 );
+      @include u-grid-column(12);
     }
     .content-l__col-1-2 {
       // Keep 50/50 info unit groups at two columns for print
-      .u-grid-column( 6 );
+      @include u-grid-column(6);
     }
     .content-l__col-1-3 {
       // Keep 33/33/33 info unit groups at three columns for print
-      .u-grid-column( 4 );
+      @include u-grid-column(4);
     }
     .content-l__col-2-3 {
       // Maintain 2/3 layouts for print
-      .u-grid-column( 8 );
+      @include u-grid-column(8);
     }
     .m-info-unit__image {
       // Print info unit images
@@ -104,7 +107,7 @@
     .m-info-unit__inline .m-info-unit__image {
       // Preserve inline info unit image layout
       float: left;
-      margin-right: unit( @grid_gutter-width / @base-font-size-px, em );
+      margin-right: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
   }
 
@@ -114,8 +117,8 @@
 
     &__text {
       flex: 1;
-      padding-right: @fcm-visual-width + @grid_gutter-width;
-      padding-left: unit( @grid_gutter-width / @base-font-size-px, em );
+      padding-right: $fcm-visual-width + $grid-gutter-width;
+      padding-left: math.div($grid-gutter-width, $base-font-size-px) + em;
     }
 
     &__visual {
@@ -127,7 +130,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      width: @fcm-visual-width;
+      width: $fcm-visual-width;
     }
 
     &__img {
@@ -143,7 +146,7 @@
 
     &__center &__img {
       left: 50%;
-      transform: translateX( -50% );
+      transform: translateX(-50%);
     }
   }
 
@@ -158,11 +161,13 @@
     // When printing, shrink video preview images to one column with the :after
     // URL in a second column next to it.
     &__image-container {
-      .u-grid-column( 6 );
+      @include u-grid-column(6);
     }
-    &:after {
-      content: "Watch the video at https://www.youtube.com/watch?v=" attr(data-id);
-      .u-grid-column( 6 );
+    &::after {
+      content: 'Watch the video at https://www.youtube.com/watch?v='
+        attr(data-id);
+
+      @include u-grid-column(6);
     }
   }
 
@@ -202,8 +207,9 @@
 
   // Solving longstanding issue in Firefox of cutting off inline-block
   // elements after one page.
-  @-moz-document url-prefix() {
-    html, body {
+  @document url-prefix() {
+    html,
+    body {
       margin: 0;
       padding: 0;
     }
@@ -217,4 +223,4 @@
       display: block !important;
     }
   }
-});
+}
diff --git a/cfgov/unprocessed/css/schema.less b/cfgov/unprocessed/css/schema.less
deleted file mode 100644
index 63da878d52..0000000000
--- a/cfgov/unprocessed/css/schema.less
+++ /dev/null
@@ -1,34 +0,0 @@
-.schema-block h2 {
-  margin-top: unit(@grid_gutter-width / @size-ii, em);
-}
-
-.schema-block--how-to li,
-.schema-block--how-to > div p:first-child {
-  margin-top: unit(@grid_gutter-width / 2 / @base-font-size-px, em);
-}
-
-.schema-block--how-to {
-  h2,
-  h3,
-  h4 {
-    max-width: 41.875rem;
-  }
-
-  h2 {
-    margin-top: unit(@grid_gutter-width / @size-ii, em);
-  }
-
-  h3 {
-    margin-top: unit(@grid_gutter-width / @size-iii, em);
-  }
-
-  h4 {
-    margin-top: unit(@grid_gutter-width / @size-iv, em);
-  }
-}
-
-.respond-to-min(@bp-lg-min, {
-  .schema-block h2 {
-    margin-top: unit( @grid_gutter-width * 1.5 / @size-ii, em );
-  }
-});
diff --git a/cfgov/unprocessed/css/schema.scss b/cfgov/unprocessed/css/schema.scss
new file mode 100644
index 0000000000..b1bae55baa
--- /dev/null
+++ b/cfgov/unprocessed/css/schema.scss
@@ -0,0 +1,36 @@
+@use 'sass:math';
+
+.schema-block h2 {
+  margin-top: math.div($grid-gutter-width, $size-ii) + em;
+}
+
+.schema-block--how-to li,
+.schema-block--how-to > div p:first-child {
+  margin-top: math.div(math.div($grid-gutter-width, 2), $base-font-size-px) + em;
+}
+
+.schema-block--how-to {
+  h2,
+  h3,
+  h4 {
+    max-width: 41.875rem;
+  }
+
+  h2 {
+    margin-top: math.div($grid-gutter-width, $size-ii) + em;
+  }
+
+  h3 {
+    margin-top: math.div($grid-gutter-width, $size-iii) + em;
+  }
+
+  h4 {
+    margin-top: math.div($grid-gutter-width, $size-iv) + em;
+  }
+}
+
+@include respond-to-min($bp-lg-min) {
+  .schema-block h2 {
+    margin-top: math.div($grid-gutter-width * 1.5, $size-ii) + em;
+  }
+}
diff --git a/cfgov/unprocessed/css/skip-nav.less b/cfgov/unprocessed/css/skip-nav.scss
similarity index 78%
rename from cfgov/unprocessed/css/skip-nav.less
rename to cfgov/unprocessed/css/skip-nav.scss
index 603001e4bd..1c3fcd88c6 100644
--- a/cfgov/unprocessed/css/skip-nav.less
+++ b/cfgov/unprocessed/css/skip-nav.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .skip-nav {
   position: relative;
 
@@ -15,10 +17,11 @@
     z-index: 11;
 
     &:focus {
-      .a-btn();
+      @include a-btn;
+
       // Adjustments to button to make it appear like a super button.
-      padding: unit(11px / 18px, em) unit(29px / 18px, em);
-      font-size: unit(18px / @base-font-size-px, em);
+      padding: (math.div(11px, 18px) + em) (math.div(29px, 18px) + em);
+      font-size: math.div(18px, $base-font-size-px) + em;
 
       top: 15px;
       left: 15px;
diff --git a/esbuild/plugins/plugin-postcss-sass.js b/esbuild/plugins/plugin-postcss-sass.js
new file mode 100644
index 0000000000..dcfbefcdae
--- /dev/null
+++ b/esbuild/plugins/plugin-postcss-sass.js
@@ -0,0 +1,34 @@
+import { readdirSync } from 'node:fs';
+import postcss from 'postcss';
+import * as sass from 'sass';
+import { pluginProcessIcons } from './postcss-process-icons.js';
+
+const pluginPostCssSass = ({ plugins = [] }) => ({
+  name: 'postcss-sass',
+  setup(build) {
+    build.onLoad({ filter: /.\.scss$/ }, async (args) => {
+      const sassResult = await sass.compile(args.path, {
+        loadPaths: [
+          ...readdirSync('./node_modules/@cfpb').map(
+            (v) => `./node_modules/@cfpb/${v}/src`,
+          ),
+          './node_modules/',
+        ],
+      });
+
+      const result = await postcss([...plugins, pluginProcessIcons]).process(
+        sassResult.css,
+        {
+          from: args.path,
+        },
+      );
+
+      return {
+        contents: result.css,
+        loader: 'css',
+      };
+    });
+  },
+});
+
+export { pluginPostCssSass };
diff --git a/esbuild/plugins/postcss-process-icons.js b/esbuild/plugins/postcss-process-icons.js
new file mode 100644
index 0000000000..ba22db3531
--- /dev/null
+++ b/esbuild/plugins/postcss-process-icons.js
@@ -0,0 +1,46 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const pluginProcessIcons = () => {
+  const stripQuotes = (str) => str.replace(/['"]+/g, '');
+
+  return {
+    postcssPlugin: 'process-icons',
+    Declaration: {
+      '--cfpb-background-icon-svg': async (decl) => {
+        const props = decl.value.split(' ');
+        const iconName = stripQuotes(props[0]);
+        const iconColor = props.length > 1 ? stripQuotes(props[1]) : '';
+
+        const pathToSVG =
+          __dirname +
+          '/../../node_modules/@cfpb/cfpb-icons/src/icons/' +
+          iconName +
+          '.svg';
+        const rawSVG = await readFileSync(pathToSVG, 'utf8', (err, data) => {
+          if (err) console.log(err);
+
+          return data;
+        });
+
+        let cleanSVG = rawSVG;
+        if (iconColor !== '') {
+          cleanSVG = rawSVG.replace(
+            /class="cf-icon-svg .+" /,
+            `fill="${iconColor}" `,
+          );
+        }
+
+        decl.prop = 'background-image';
+        decl.value = `url('data:image/svg+xml;charset=UTF-8,${cleanSVG}')`;
+      },
+    },
+  };
+};
+pluginProcessIcons.postcss = true;
+
+export { pluginProcessIcons };
diff --git a/esbuild/plugins/postcss.js b/esbuild/plugins/postcss.js
deleted file mode 100644
index b5e19e8ce8..0000000000
--- a/esbuild/plugins/postcss.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { promises } from 'fs';
-const { readFile } = promises;
-import { dirname } from 'path';
-import postcss from 'postcss';
-import less from 'less';
-
-const postCSSPlugin = ({ plugins = [], lessOptions = {} }) => ({
-  name: 'less-and-postcss',
-  setup(build) {
-    build.onLoad({ filter: /.\.less$/ }, async (args) => {
-      const fileContent = await readFile(args.path, { encoding: 'utf-8' });
-      const lessResult = await less.render(fileContent, {
-        ...lessOptions,
-        filename: args.path,
-        rootpath: dirname(args.path),
-      });
-      const result = await postcss(plugins).process(lessResult.css, {
-        from: args.path,
-      });
-
-      return {
-        contents: result.css,
-        loader: 'css',
-      };
-    });
-  },
-});
-
-export default postCSSPlugin;
diff --git a/esbuild/styles.js b/esbuild/styles.js
index 872ac3fcb9..ec8ed8f409 100644
--- a/esbuild/styles.js
+++ b/esbuild/styles.js
@@ -1,10 +1,9 @@
-import { readdirSync } from 'fs';
-import postCSSPlugin from './plugins/postcss.js';
+import { pluginPostCssSass } from './plugins/plugin-postcss-sass.js';
 import autoprefixer from 'autoprefixer';
 import { getAll } from './utils.js';
 
 import environment from '../config/environment.js';
-const { unprocessed, modules } = environment.paths;
+const { unprocessed } = environment.paths;
 
 const css = `${unprocessed}/css`;
 const apps = `${unprocessed}/apps`;
@@ -30,9 +29,9 @@ const styledApps = [
 ];
 
 const cssPaths = [
-  `${css}/main.less`,
-  ...getAll(`${css}/on-demand`, /.less$/),
-  ...styledApps.map((app) => `${apps}/${app}/css/main.less`),
+  `${css}/main.scss`,
+  ...getAll(`${css}/on-demand`, /.scss$/),
+  ...styledApps.map((app) => `${apps}/${app}/css/main.scss`),
 ];
 
 /**
@@ -44,18 +43,8 @@ function styles(baseConfig) {
     ...baseConfig,
     entryPoints: cssPaths,
     plugins: [
-      postCSSPlugin({
+      pluginPostCssSass({
         plugins: [autoprefixer],
-        lessOptions: {
-          math: 'always',
-          paths: [
-            ...readdirSync(`${modules}/@cfpb`).map(
-              (v) => `${modules}/@cfpb/${v}/src`,
-            ),
-            `${modules}/cfpb-chart-builder/src/css`,
-            `${modules}`,
-          ],
-        },
       }),
     ],
   };
diff --git a/npm-packages-offline-cache/@csstools-postcss-sass-5.1.1.tgz b/npm-packages-offline-cache/@csstools-postcss-sass-5.1.1.tgz
new file mode 100644
index 0000000000..63d236dfe3
Binary files /dev/null and b/npm-packages-offline-cache/@csstools-postcss-sass-5.1.1.tgz differ
diff --git a/npm-packages-offline-cache/@csstools-sass-import-resolve-1.0.0.tgz b/npm-packages-offline-cache/@csstools-sass-import-resolve-1.0.0.tgz
new file mode 100644
index 0000000000..dc643ad20d
Binary files /dev/null and b/npm-packages-offline-cache/@csstools-sass-import-resolve-1.0.0.tgz differ
diff --git a/npm-packages-offline-cache/@types-node-22.0.0.tgz b/npm-packages-offline-cache/@types-node-22.0.0.tgz
deleted file mode 100644
index 0fde62a9a4..0000000000
Binary files a/npm-packages-offline-cache/@types-node-22.0.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/@types-node-22.1.0.tgz b/npm-packages-offline-cache/@types-node-22.1.0.tgz
new file mode 100644
index 0000000000..8990c3c589
Binary files /dev/null and b/npm-packages-offline-cache/@types-node-22.1.0.tgz differ
diff --git a/npm-packages-offline-cache/binary-extensions-2.3.0.tgz b/npm-packages-offline-cache/binary-extensions-2.3.0.tgz
new file mode 100644
index 0000000000..f09abb3bc9
Binary files /dev/null and b/npm-packages-offline-cache/binary-extensions-2.3.0.tgz differ
diff --git a/npm-packages-offline-cache/browserslist-4.23.2.tgz b/npm-packages-offline-cache/browserslist-4.23.2.tgz
deleted file mode 100644
index df2f72c661..0000000000
Binary files a/npm-packages-offline-cache/browserslist-4.23.2.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/browserslist-4.23.3.tgz b/npm-packages-offline-cache/browserslist-4.23.3.tgz
new file mode 100644
index 0000000000..dd01014000
Binary files /dev/null and b/npm-packages-offline-cache/browserslist-4.23.3.tgz differ
diff --git a/npm-packages-offline-cache/caniuse-lite-1.0.30001645.tgz b/npm-packages-offline-cache/caniuse-lite-1.0.30001646.tgz
similarity index 98%
rename from npm-packages-offline-cache/caniuse-lite-1.0.30001645.tgz
rename to npm-packages-offline-cache/caniuse-lite-1.0.30001646.tgz
index 2b9a5f05a0..071431e82b 100644
Binary files a/npm-packages-offline-cache/caniuse-lite-1.0.30001645.tgz and b/npm-packages-offline-cache/caniuse-lite-1.0.30001646.tgz differ
diff --git a/npm-packages-offline-cache/chokidar-3.6.0.tgz b/npm-packages-offline-cache/chokidar-3.6.0.tgz
new file mode 100644
index 0000000000..7ed4eae467
Binary files /dev/null and b/npm-packages-offline-cache/chokidar-3.6.0.tgz differ
diff --git a/npm-packages-offline-cache/immutable-4.3.7.tgz b/npm-packages-offline-cache/immutable-4.3.7.tgz
new file mode 100644
index 0000000000..be1396d413
Binary files /dev/null and b/npm-packages-offline-cache/immutable-4.3.7.tgz differ
diff --git a/npm-packages-offline-cache/is-binary-path-2.1.0.tgz b/npm-packages-offline-cache/is-binary-path-2.1.0.tgz
new file mode 100644
index 0000000000..be7714afbd
Binary files /dev/null and b/npm-packages-offline-cache/is-binary-path-2.1.0.tgz differ
diff --git a/npm-packages-offline-cache/object-path-0.11.8.tgz b/npm-packages-offline-cache/object-path-0.11.8.tgz
new file mode 100644
index 0000000000..760f1224eb
Binary files /dev/null and b/npm-packages-offline-cache/object-path-0.11.8.tgz differ
diff --git a/npm-packages-offline-cache/postcss-less-6.0.0.tgz b/npm-packages-offline-cache/postcss-less-6.0.0.tgz
deleted file mode 100644
index 3e220c737e..0000000000
Binary files a/npm-packages-offline-cache/postcss-less-6.0.0.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/postcss-media-query-parser-0.2.3.tgz b/npm-packages-offline-cache/postcss-media-query-parser-0.2.3.tgz
new file mode 100644
index 0000000000..fec7617907
Binary files /dev/null and b/npm-packages-offline-cache/postcss-media-query-parser-0.2.3.tgz differ
diff --git a/npm-packages-offline-cache/postcss-replace-2.0.1.tgz b/npm-packages-offline-cache/postcss-replace-2.0.1.tgz
new file mode 100644
index 0000000000..2cac60cb68
Binary files /dev/null and b/npm-packages-offline-cache/postcss-replace-2.0.1.tgz differ
diff --git a/npm-packages-offline-cache/postcss-scss-4.0.9.tgz b/npm-packages-offline-cache/postcss-scss-4.0.9.tgz
new file mode 100644
index 0000000000..ddd49b8935
Binary files /dev/null and b/npm-packages-offline-cache/postcss-scss-4.0.9.tgz differ
diff --git a/npm-packages-offline-cache/readdirp-3.6.0.tgz b/npm-packages-offline-cache/readdirp-3.6.0.tgz
new file mode 100644
index 0000000000..cc455c08bd
Binary files /dev/null and b/npm-packages-offline-cache/readdirp-3.6.0.tgz differ
diff --git a/npm-packages-offline-cache/sass-1.77.8.tgz b/npm-packages-offline-cache/sass-1.77.8.tgz
new file mode 100644
index 0000000000..fd9a669f73
Binary files /dev/null and b/npm-packages-offline-cache/sass-1.77.8.tgz differ
diff --git a/npm-packages-offline-cache/source-map-0.7.4.tgz b/npm-packages-offline-cache/source-map-0.7.4.tgz
new file mode 100644
index 0000000000..5cf01f712e
Binary files /dev/null and b/npm-packages-offline-cache/source-map-0.7.4.tgz differ
diff --git a/npm-packages-offline-cache/stylelint-config-recommended-scss-14.1.0.tgz b/npm-packages-offline-cache/stylelint-config-recommended-scss-14.1.0.tgz
new file mode 100644
index 0000000000..ebe253498d
Binary files /dev/null and b/npm-packages-offline-cache/stylelint-config-recommended-scss-14.1.0.tgz differ
diff --git a/npm-packages-offline-cache/stylelint-config-standard-scss-13.1.0.tgz b/npm-packages-offline-cache/stylelint-config-standard-scss-13.1.0.tgz
new file mode 100644
index 0000000000..ee4e32769a
Binary files /dev/null and b/npm-packages-offline-cache/stylelint-config-standard-scss-13.1.0.tgz differ
diff --git a/npm-packages-offline-cache/stylelint-less-3.0.1.tgz b/npm-packages-offline-cache/stylelint-less-3.0.1.tgz
deleted file mode 100644
index 2c1750cf86..0000000000
Binary files a/npm-packages-offline-cache/stylelint-less-3.0.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/stylelint-scss-6.4.1.tgz b/npm-packages-offline-cache/stylelint-scss-6.4.1.tgz
new file mode 100644
index 0000000000..78a4b23303
Binary files /dev/null and b/npm-packages-offline-cache/stylelint-scss-6.4.1.tgz differ
diff --git a/npm-packages-offline-cache/undici-types-6.11.1.tgz b/npm-packages-offline-cache/undici-types-6.11.1.tgz
deleted file mode 100644
index 584827791d..0000000000
Binary files a/npm-packages-offline-cache/undici-types-6.11.1.tgz and /dev/null differ
diff --git a/npm-packages-offline-cache/undici-types-6.13.0.tgz b/npm-packages-offline-cache/undici-types-6.13.0.tgz
new file mode 100644
index 0000000000..6ef153b4f2
Binary files /dev/null and b/npm-packages-offline-cache/undici-types-6.13.0.tgz differ
diff --git a/package.json b/package.json
index e5767118ef..e5c524a7b7 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,8 @@
     "svg-inline-loader": "0.8.2"
   },
   "devDependencies": {
+    "@csstools/postcss-sass": "5.1.1",
+    "@csstools/sass-import-resolve": "1.0.0",
     "cypress": "13.13.2",
     "cypress-fail-fast": "7.1.0",
     "eslint": "8.57.0",
@@ -55,16 +57,18 @@
     "eslint-plugin-jsdoc": "48.2.4",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.34.1",
+    "immutable": "4.3.7",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-fetch-mock": "3.0.3",
-    "postcss-less": "6.0.0",
+    "postcss-replace": "2.0.1",
+    "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
     "snyk": "1.1292.2",
+    "source-map": "0.7.4",
     "stylelint": "16.8.1",
-    "stylelint-config-standard": "36.0.1",
-    "stylelint-less": "3.0.1"
+    "stylelint-config-standard-scss": "13.1.0"
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
diff --git a/scripts/lint.sh b/scripts/lint.sh
index 062bdeea75..cf32ff5e9a 100755
--- a/scripts/lint.sh
+++ b/scripts/lint.sh
@@ -1,8 +1,8 @@
 ## Run prettier. See ignored path in .prettierignore.
-yarn prettier "./**/*.{js,jsx,ts,tsx,md,css,less}" --write
+yarn prettier "./**/*.{js,jsx,ts,tsx,md,css,scss}" --write
 
 ## Run JS linting. See ignored path in .eslintignore.
 eslint --ignore-pattern node_modules './{cfgov/unprocessed,config,esbuild,scripts,test}/**/*.js' --fix
 
 ## Run CSS linting. See ignored path in .stylelintignore.
-stylelint './cfgov/unprocessed/**/*.{css,less}' --fix
+stylelint './cfgov/unprocessed/**/*.{css,scss}' --fix
diff --git a/.stylelintrc.cjs b/stylelint.config.js
similarity index 64%
rename from .stylelintrc.cjs
rename to stylelint.config.js
index 2cc430d725..3439715fe3 100644
--- a/.stylelintrc.cjs
+++ b/stylelint.config.js
@@ -1,7 +1,6 @@
 /* NOTES:
 at-rule-no-unknown -
-  This rule enforces only @ rules that appear in the CSS spec,
-  however, @plugin appears in Less, so should be ignored.
+  Ignore to allow at rules from Sass.
 color-function-notation -
   Set to 'legacy' to support older browsers in our browserslist (for now).
 declaration-block-no-redundant-longhand-properties -
@@ -12,10 +11,10 @@ declaration-empty-line-before -
   TODO: Turn on this rule and work out what style we want.
 declaration-property-value-no-unknown -
   Turned off for Less per documentation guidance.
-function-no-unknown -
-  Ignore the 'unit' helper function that comes from Less.
 media-feature-range-notation -
   Prefer prefixed values, since Less doesn't support ranges.
+media-query-no-invalid -
+  Turned off because of https://github.com/ssivanatarajan/stylelint-less/issues/6
 no-descending-specificity -
   Turned off, but probably shouldn't be.
   TODO: Turn on this rule and see if issues can be fixed.
@@ -25,27 +24,27 @@ rule-empty-line-before -
   Custom setting that differs from stylelint-config-standard.
 selector-id-pattern -
   Turned off.
-  TODO: Turn on this rule and work out regex for consistent IDs.
+  TODO: Turn on this rule and work out regex for BEM syntax.
 selector-class-pattern -
-  Set to getBEM.com style BEM pattern.
-less/color-no-invalid-hex
-less/no-duplicate-variables
-  Both of the above settings are turned off till
-  https://github.com/ssivanatarajan/stylelint-less/issues/6 is addressed.
+  Turned off.
+  TODO: Turn on this rule and work out regex for BEM syntax.
+scss/operator-no-newline-after -
+  Turned off. Prettier(?) wraps long lines, so sometimes the + operator ends up
+  at the end of the line.
+scss/comment-no-empty -
+  Turned off. Allow empty comments, for visual formatting purposes.
 */
-module.exports = {
-  extends: ['stylelint-config-standard'],
-  plugins: ['stylelint-less'],
-  ignoreFiles: ['packages/**/node_modules/**/*.less'],
-  customSyntax: 'postcss-less',
+export default {
+  extends: ['stylelint-config-standard-scss'],
+  ignoreFiles: ['packages/**/node_modules/**/*.scss'],
   rules: {
-    'at-rule-no-unknown': [true, { ignoreAtRules: 'plugin' }],
+    'at-rule-no-unknown': null,
     'color-function-notation': ['legacy'],
     'declaration-block-no-redundant-longhand-properties': null,
     'declaration-empty-line-before': null,
     'declaration-property-value-no-unknown': null,
-    'function-no-unknown': [true, { ignoreFunctions: ['unit'] }],
     'media-feature-range-notation': ['prefix'],
+    'media-query-no-invalid': null,
     'no-descending-specificity': null,
     'number-max-precision': 10,
     'rule-empty-line-before': [
@@ -60,7 +59,7 @@ module.exports = {
       '^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$',
       { resolveNestedSelectors: true },
     ],
-    'less/color-no-invalid-hex': null,
-    'less/no-duplicate-variables': null,
+    'scss/operator-no-newline-after': null,
+    'scss/comment-no-empty': null,
   },
 };
diff --git a/yarn.lock b/yarn.lock
index 0bb742c1d1..6dbdaa1030 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -402,6 +402,20 @@
   resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.13.tgz#f00be93f6bede07c14ddf51a168ad2748e4fe9e5"
   integrity sha512-XaHr+16KRU9Gf8XLi3q8kDlI18d5vzKSKCY510Vrtc9iNR0NJzbY9hhTmwhzYZj/ZwGL4VmB3TA9hJW0Um2qFA==
 
+"@csstools/postcss-sass@5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-sass/-/postcss-sass-5.1.1.tgz#135921df13bc56bee50c7470a66e4e9f3d5c89ae"
+  integrity sha512-La7bgTcM6YwPBLqlaXg7lMLry82iLv1a+S1RmgvHq2mH2Zd57L2anjZvJC8ACUHWc4M9fXws93dq6gaK0kZyAw==
+  dependencies:
+    "@csstools/sass-import-resolve" "^1.0.0"
+    sass "^1.69.5"
+    source-map "~0.7.4"
+
+"@csstools/sass-import-resolve@1.0.0", "@csstools/sass-import-resolve@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz#32c3cdb2f7af3cd8f0dca357b592e7271f3831b5"
+  integrity sha512-pH4KCsbtBLLe7eqUrw8brcuFO8IZlN36JjdKlOublibVdAIPHCzEnpBWOVUXK5sCf+DpBi8ZtuWtjF0srybdeA==
+
 "@csstools/selector-specificity@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz#63085d2995ca0f0e55aa8b8a07d69bfd48b844fe"
@@ -1059,11 +1073,11 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/node@*":
-  version "22.0.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.0.0.tgz#04862a2a71e62264426083abe1e27e87cac05a30"
-  integrity sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
+  integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
   dependencies:
-    undici-types "~6.11.1"
+    undici-types "~6.13.0"
 
 "@types/sinonjs__fake-timers@8.1.1":
   version "8.1.1"
@@ -1220,7 +1234,7 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-anymatch@^3.0.3:
+anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
@@ -1529,6 +1543,11 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 blob-util@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
@@ -1552,7 +1571,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^3.0.3:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -1560,13 +1579,13 @@ braces@^3.0.3:
     fill-range "^7.1.1"
 
 browserslist@^4.23.0, browserslist@^4.23.1:
-  version "4.23.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.2.tgz#244fe803641f1c19c28c48c4b6ec9736eb3d32ed"
-  integrity sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==
+  version "4.23.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
+  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
   dependencies:
-    caniuse-lite "^1.0.30001640"
-    electron-to-chromium "^1.4.820"
-    node-releases "^2.0.14"
+    caniuse-lite "^1.0.30001646"
+    electron-to-chromium "^1.5.4"
+    node-releases "^2.0.18"
     update-browserslist-db "^1.1.0"
 
 bser@2.1.1:
@@ -1630,10 +1649,10 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001640:
-  version "1.0.30001645"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001645.tgz#4c4b7427683dea1170a152cd1654be8d0da7bd71"
-  integrity sha512-GFtY2+qt91kzyMk6j48dJcwJVq5uTkk71XxE3RtScx7XWRLsO7bU44LOFkOZYR8w9YMS0UhPSYpN/6rAMImmLw==
+caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001646:
+  version "1.0.30001646"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001646.tgz#d472f2882259ba032dd73ee069ff01bfd059b25d"
+  integrity sha512-dRg00gudiBDDTmUhClSdv3hqRfpbOnU28IpI1T6PBTLWa+kOj0681C8uML3PifYfREuBrVjDGhL3adYpBT6spw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -1667,6 +1686,21 @@ check-more-types@^2.24.0:
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
   integrity sha512-Pj779qHxV2tuapviy1bSZNEL1maXr13bPYpsvSDB68HlYcYuhlDrmGd63i0JHMCLKzc7rUSNIrpdJlhVlNwrxA==
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 ci-info@^3.2.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
@@ -2108,7 +2142,7 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-electron-to-chromium@^1.4.820:
+electron-to-chromium@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.4.tgz#cd477c830dd6fca41fbd5465c1ff6ce08ac22343"
   integrity sha512-orzA81VqLyIGUEA77YkVA1D+N+nNfl2isJVjjmOyrlxuooZ19ynb+dOlaDTqd/idKRS9lDCSBmtzM+kyCsMnkA==
@@ -2818,7 +2852,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -2904,7 +2938,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-glob-parent@^5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -3150,6 +3184,11 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
+immutable@4.3.7, immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3235,6 +3274,13 @@ is-bigint@^1.0.1:
   dependencies:
     has-bigints "^1.0.1"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-boolean-object@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719"
@@ -3312,7 +3358,7 @@ is-generator-function@^1.0.10:
   dependencies:
     has-tostringtag "^1.0.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -4054,7 +4100,7 @@ keyv@^4.5.3, keyv@^4.5.4:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^6.0.2:
+kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -4370,12 +4416,12 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
-node-releases@^2.0.14:
+node-releases@^2.0.18:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
   integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -4417,6 +4463,11 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-path@^0.11.8:
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.8.tgz#ed002c02bbdd0070b78a27455e8ae01fc14d4742"
+  integrity sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==
+
 object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
@@ -4618,7 +4669,7 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-picomatch@^2.0.4, picomatch@^2.2.3, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -4650,10 +4701,18 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss-less@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-6.0.0.tgz#463b34c60f53b648c237f569aeb2e09149d85af4"
-  integrity sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
+
+postcss-replace@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-replace/-/postcss-replace-2.0.1.tgz#9d406ef95553380890094f777451b8bb9cc797da"
+  integrity sha512-T83GVovCkBQkFCTmuid0B2bWNu/O0Bh/HDMeEGFC62EwMvVBLZQFYM7iBbcGT48QDXSNSX6e/X1Q7/Syh5NFng==
+  dependencies:
+    kind-of "^6.0.3"
+    object-path "^0.11.8"
 
 postcss-resolve-nested-selector@^0.1.1, postcss-resolve-nested-selector@^0.1.4:
   version "0.1.4"
@@ -4665,7 +4724,12 @@ postcss-safe-parser@^7.0.0:
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a"
   integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==
 
-postcss-selector-parser@^6.1.1:
+postcss-scss@4.0.9, postcss-scss@^4.0.9:
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685"
+  integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
+
+postcss-selector-parser@^6.1.0, postcss-selector-parser@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz#5be94b277b8955904476a2400260002ce6c56e38"
   integrity sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==
@@ -4673,7 +4737,7 @@ postcss-selector-parser@^6.1.1:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@4.2.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -4798,6 +4862,13 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 reflect.getprototypeof@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859"
@@ -4968,6 +5039,15 @@ safe-regex-test@^1.0.3:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.69.5:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
@@ -5102,7 +5182,7 @@ snyk@1.1292.2:
     "@sentry/node" "^7.36.0"
     global-agent "^3.0.0"
 
-source-map-js@^1.0.1, source-map-js@^1.2.0:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -5115,6 +5195,11 @@ source-map-support@0.5.13:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map@0.7.4, source-map@~0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
@@ -5267,25 +5352,45 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+stylelint-config-recommended-scss@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz#1a5855655cddcb5f77c10f38c76567adf2bb9aa3"
+  integrity sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==
+  dependencies:
+    postcss-scss "^4.0.9"
+    stylelint-config-recommended "^14.0.1"
+    stylelint-scss "^6.4.0"
+
 stylelint-config-recommended@^14.0.1:
   version "14.0.1"
   resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6"
   integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==
 
-stylelint-config-standard@36.0.1:
+stylelint-config-standard-scss@13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886"
+  integrity sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA==
+  dependencies:
+    stylelint-config-recommended-scss "^14.0.0"
+    stylelint-config-standard "^36.0.0"
+
+stylelint-config-standard@^36.0.0:
   version "36.0.1"
   resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz#727cbb2a1ef3e210f5ce8329cde531129f156609"
   integrity sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==
   dependencies:
     stylelint-config-recommended "^14.0.1"
 
-stylelint-less@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-less/-/stylelint-less-3.0.1.tgz#3b5a4e79993e9e3e7b04be470b1b9e6629c00002"
-  integrity sha512-6GkZ4jhmReXxX61IiNaniZFuyTzYTTC4HvRLNNok883d1ux/wUodM1uik+iAHZM1VSCwNASaj0Th6ZX46WZLMw==
+stylelint-scss@^6.4.0:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-6.4.1.tgz#78a197bbcdf9a61b7365769a9a42dddc722a24c5"
+  integrity sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==
   dependencies:
+    known-css-properties "^0.34.0"
+    postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
-    postcss-value-parser "4.2.0"
+    postcss-selector-parser "^6.1.0"
+    postcss-value-parser "^4.2.0"
 
 stylelint@16.8.1:
   version "16.8.1"
@@ -5572,10 +5677,10 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undici-types@~6.11.1:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.11.1.tgz#432ea6e8efd54a48569705a699e62d8f4981b197"
-  integrity sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==
+undici-types@~6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
+  integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
 
 universalify@^0.2.0:
   version "0.2.0"