@ebrains/components 2.4.1 → 3.1.0

package/dist/components/components.css

@@ -1,23 +1,34 @@
+/* Inter Light 300 */
 @font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
+  font-family: 'Inter';
+  src: url('../fonts/Inter-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
   font-display: swap;
+}
+/* IBM Plex Sans Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
+  font-weight: 400;
   font-style: normal;
-  src: url("../fonts/Inter.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter.var.woff2") format("woff2");
-  src: url("../fonts/Inter.var.woff2") format("woff2") tech("variations");
+  font-display: swap;
 }
+/* IBM Plex Sans SemiBold 600 */
 @font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
+  font-family: 'IBM Plex Sans';
+  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
   font-display: swap;
-  font-style: italic;
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter-Italic.var.woff2") format("woff2");
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2") tech("variations");
 }
-:root {
-  font-optical-sizing: auto;
+/* IBM Plex Mono Regular 400 */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 html,
 body {
@@ -30,91 +41,6 @@ body {
   outline: none !important;
 }
 */
-/*FADE*/
-.fade-enter-active,
-.fade-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: linear;
-  transition-property: opacity;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-/*FADE TRANSLATE Y*/
-.fade-down-enter-active,
-.fade-down-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-
-  transition-property: opacity, transform;
-}
-.fade-down-enter-from,
-.fade-down-leave-to {
-  opacity: 0;
-  transform: translateY(12px);
-}
-/*SLIDE LEFT*/
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  transition-property: opacity, transform;
-}
-.slide-left-enter-from,
-.slide-left-leave-to {
-  transform: translateX(-110%);
-}
-/*SLIDE BOTTOM*/
-.slide-bottom-enter-active,
-.slide-bottom-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  transition-property: opacity, transform;
-}
-.slide-bottom-enter-from,
-.slide-bottom-leave-to {
-  transform: translateY(100%);
-}
-.slide-bottom-list-move,
-.slide-bottom-list-enter-active,
-.slide-bottom-list-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-property: opacity, transform;
-}
-.slide-bottom-list-enter-from,
-.slide-bottom-list-leave-to {
-  opacity: 0;
-  transform: translateY(100%);
-}
-.slide-bottom-list-leave-active {
-  position: absolute;
-}
-/*COLLAPSE Y*/
-.collapseY-enter-active,
-.collapseY-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: linear;
-  overflow: hidden;
-  max-height: 500px;
-  transition-property: max-height;
-}
-.collapseY-enter-from,
-.collapseY-leave-to {
-  max-height: 0;
-}
-:root {
-  --color-chart-accent: var(--green-500);
-  --color-chart-strong: var(--grey-700);
-  --color-chart-accent-dark: var(--green-600);
-  --color-chart-lighter: var(--grey-500);
-  --color-chart-accent-light: var(--green-400);
-  --color-chart-lightest: var(--grey-400);
-  --color-chart-accent-lighter: var(--green-300);
-  --color-chart-darker: var(--grey-300);
-  --color-chart-accent-lightest: var(--green-200);
-}
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -221,9 +147,7 @@ body {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-/*
-! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com */
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -659,89 +583,104 @@ video {
   }
 }
 :root {
-  --sans: Inter, Helvetica, Arial, sans-serif;
-  --f-heading-01-fontFamily: var(--sans);
-  --f-heading-01-fontWeight: 800;
+  --inter: Inter, Helvetica, Arial, sans-serif;
+  --plex-sans: "IBM Plex Sans", Inter, Helvetica, Arial, sans-serif;
+  --plex-mono: "IBM Plex Mono", "Courier New", Courier, monospace;
+  --f-heading-01-fontFamily: var(--inter);
+  --f-heading-01-fontWeight: 300;
   --f-heading-01-fontSize: 42px;
   --f-heading-01-lineHeight: 100%;
   --f-heading-01-letterSpacing: -0.01em;
-  --f-heading-02-fontFamily: var(--sans);
-  --f-heading-02-fontWeight: 800;
+  --f-heading-02-fontFamily: var(--inter);
+  --f-heading-02-fontWeight: 300;
   --f-heading-02-fontSize: 36px;
   --f-heading-02-lineHeight: 100%;
   --f-heading-02-letterSpacing: -0.01em;
-  --f-heading-03-fontFamily: var(--sans);
-  --f-heading-03-fontWeight: 800;
+  --f-heading-03-fontFamily: var(--inter);
+  --f-heading-03-fontWeight: 300;
   --f-heading-03-fontSize: 36px;
   --f-heading-03-lineHeight: 100%;
   --f-heading-03-letterSpacing: -0.01em;
-  --f-heading-04-fontFamily: var(--sans);
-  --f-heading-04-fontWeight: 800;
+  --f-heading-04-fontFamily: var(--inter);
+  --f-heading-04-fontWeight: 300;
   --f-heading-04-fontSize: 28px;
   --f-heading-04-lineHeight: 100%;
   --f-heading-04-letterSpacing: -0.01em;
-  --f-heading-05-fontFamily: var(--sans);
-  --f-heading-05-fontWeight: 800;
+  --f-heading-05-fontFamily: var(--inter);
+  --f-heading-05-fontWeight: 300;
   --f-heading-05-fontSize: 28px;
   --f-heading-05-lineHeight: 110%;
   --f-heading-05-letterSpacing: -0.01em;
-  --f-heading-06-fontFamily: var(--sans);
-  --f-heading-06-fontWeight: 800;
+  --f-heading-06-fontFamily: var(--inter);
+  --f-heading-06-fontWeight: 300;
   --f-heading-06-fontSize: 22px;
   --f-heading-06-lineHeight: 120%;
-  --f-body-01-fontFamily: var(--sans);
-  --f-body-01-fontWeight: 600;
+  --f-body-01-fontFamily: var(--plex-sans);
+  --f-body-01-fontWeight: 400;
   --f-body-01-fontSize: 20px;
   --f-body-01-lineHeight: 140%;
   --f-body-01-letterSpacing: -0.01em;
-  --f-body-02-fontFamily: var(--sans);
-  --f-body-02-fontWeight: 600;
+  --f-body-02-fontFamily: var(--plex-sans);
+  --f-body-02-fontWeight: 400;
   --f-body-02-fontSize: 17px;
   --f-body-02-lineHeight: 150%;
-  --f-ui-01-fontFamily: var(--sans);
-  --f-ui-01-fontWeight: 800;
+  --f-body-03-fontFamily: var(--plex-sans);
+  --f-body-03-fontWeight: 400;
+  --f-body-03-fontSize: 17px;
+  --f-body-03-lineHeight: 150%;
+  --f-ui-01-fontFamily: var(--plex-sans);
+  --f-ui-01-fontWeight: 400;
   --f-ui-01-fontSize: 18px;
   --f-ui-01-lineHeight: 110%;
   --f-ui-01-letterSpacing: -0.01em;
-  --f-ui-02-fontFamily: var(--sans);
-  --f-ui-02-fontWeight: 800;
+  --f-ui-02-fontFamily: var(--plex-sans);
+  --f-ui-02-fontWeight: 400;
   --f-ui-02-fontSize: 16px;
   --f-ui-02-lineHeight: 110%;
   --f-ui-02-letterSpacing: -0.01em;
-  --f-ui-02-light-fontFamily: var(--sans);
-  --f-ui-02-light-fontWeight: 600;
+  --f-ui-02-light-fontFamily: var(--plex-sans);
+  --f-ui-02-light-fontWeight: 400;
   --f-ui-02-light-fontSize: 16px;
   --f-ui-02-light-lineHeight: 110%;
   --f-ui-02-light-letterSpacing: -0.01em;
-  --f-ui-03-fontFamily: var(--sans);
-  --f-ui-03-fontWeight: 800;
+  --f-ui-03-fontFamily: var(--plex-sans);
+  --f-ui-03-fontWeight: 400;
   --f-ui-03-fontSize: 14px;
   --f-ui-03-lineHeight: 110%;
   --f-ui-03-letterSpacing: -0.01em;
-  --f-ui-03-light-fontFamily: var(--sans);
-  --f-ui-03-light-fontWeight: 600;
+  --f-ui-03-light-fontFamily: var(--plex-sans);
+  --f-ui-03-light-fontWeight: 400;
   --f-ui-03-light-fontSize: 14px;
   --f-ui-03-light-lineHeight: 130%;
   --f-ui-03-light-letterSpacing: -0.01em;
-  --f-ui-04-fontFamily: var(--sans);
-  --f-ui-04-fontWeight: 800;
+  --f-ui-04-fontFamily: var(--plex-sans);
+  --f-ui-04-fontWeight: 400;
   --f-ui-04-fontSize: 12px;
   --f-ui-04-lineHeight: 100%;
   --f-ui-04-letterSpacing: -0.01em;
-  --f-ui-05-fontFamily: var(--sans);
-  --f-ui-05-fontWeight: 800;
+  --f-ui-05-fontFamily: var(--plex-sans);
+  --f-ui-05-fontWeight: 400;
   --f-ui-05-fontSize: 10px;
   --f-ui-05-lineHeight: 110%;
   --f-ui-05-letterSpacing: -0.01em;
-  --f-caption-fontFamily: var(--sans);
-  --f-caption-fontWeight: 800;
+  --f-caption-fontFamily: var(--plex-sans);
+  --f-caption-fontWeight: 400;
   --f-caption-fontSize: 12px;
   --f-caption-lineHeight: 120%;
-  --f-display-01-fontFamily: var(--sans);
-  --f-display-01-fontWeight: 800;
+  --f-code-fontFamily: var(--plex-mono);
+  --f-code-fontWeight: 400;
+  --f-code-fontSize: 14px;
+  --f-code-lineHeight: 140%;
+  --f-display-01-fontFamily: var(--inter);
+  --f-display-01-fontWeight: 300;
   --f-display-01-fontSize: 120px;
   --f-display-01-lineHeight: 100%;
   --f-display-01-letterSpacing: -0.01em;
+  --f-display-02-fontFamily: var(--inter);
+  --f-display-02-fontWeight: 300;
+  --f-display-02-fontSize: 120px;
+  --f-display-02-lineHeight: 100%;
+  --f-display-02-letterSpacing: -0.02em;
 }
 .f-heading-01 {
   font-family: var(--f-heading-01-fontFamily);
@@ -799,6 +738,13 @@ video {
   line-height: var(--f-body-02-lineHeight);
   letter-spacing: var(--f-body-02-letterSpacing);
 }
+.f-body-03 {
+  font-family: var(--f-body-03-fontFamily);
+  font-weight: var(--f-body-03-fontWeight);
+  font-size: var(--f-body-03-fontSize);
+  line-height: var(--f-body-03-lineHeight);
+  letter-spacing: var(--f-body-03-letterSpacing);
+}
 .f-ui-01 {
   font-family: var(--f-ui-01-fontFamily);
   font-weight: var(--f-ui-01-fontWeight);
@@ -855,6 +801,13 @@ video {
   line-height: var(--f-caption-lineHeight);
   letter-spacing: var(--f-caption-letterSpacing);
 }
+.f-code {
+  font-family: var(--f-code-fontFamily);
+  font-weight: var(--f-code-fontWeight);
+  font-size: var(--f-code-fontSize);
+  line-height: var(--f-code-lineHeight);
+  letter-spacing: var(--f-code-letterSpacing);
+}
 .f-display-01 {
   font-family: var(--f-display-01-fontFamily);
   font-weight: var(--f-display-01-fontWeight);
@@ -862,6 +815,13 @@ video {
   line-height: var(--f-display-01-lineHeight);
   letter-spacing: var(--f-display-01-letterSpacing);
 }
+.f-display-02 {
+  font-family: var(--f-display-02-fontFamily);
+  font-weight: var(--f-display-02-fontWeight);
+  font-size: var(--f-display-02-fontSize);
+  line-height: var(--f-display-02-lineHeight);
+  letter-spacing: var(--f-display-02-letterSpacing);
+}
 @media (min-width: 750px) {
   :root {
     --f-heading-01-fontSize: 48px;
@@ -872,6 +832,7 @@ video {
     --f-heading-01-fontSize: 72px;
     --f-heading-02-fontSize: 48px;
     --f-display-01-fontSize: 150px;
+    --f-display-02-fontSize: 150px;
   }
 }
 @media (min-width: 1024px) {
@@ -906,6 +867,9 @@ video {
 .f-body-02 b, .f-body-02 strong {
   font-weight: var(--f-body-02---bold-weight, bold);
 }
+.f-body-03 b, .f-body-03 strong {
+  font-weight: var(--f-body-03---bold-weight, bold);
+}
 .f-ui-01 b, .f-ui-01 strong {
   font-weight: var(--f-ui-01---bold-weight, bold);
 }
@@ -930,10 +894,25 @@ video {
 .f-caption b, .f-caption strong {
   font-weight: var(--f-caption---bold-weight, bold);
 }
+.f-code b, .f-code strong {
+  font-weight: var(--f-code---bold-weight, bold);
+}
 .f-display-01 b, .f-display-01 strong {
   font-weight: var(--f-display-01---bold-weight, bold);
 }
+.f-display-02 b, .f-display-02 strong {
+  font-weight: var(--f-display-02---bold-weight, bold);
+}
 :root {
+  --brand-black: #07140D;
+  --brand-green: #00FF9D;
+  --brand-green-dark: #00C87B;
+  --grey-light: #ECECEC;
+  --grey-dark: #7A7B7A;
+  --black: #000000;
+  --white: #FFFFFF;
+  --transparent: transparent;
+  --current: currentColor;
   --grey-100: #f8f8f8;
   --grey-200: #f2f2f2;
   --grey-300: #e6e6e6;
@@ -1006,10 +985,6 @@ video {
   --cyan-700: #267FBE;
   --cyan-800: #1F689B;
   --cyan-900: #15496D;
-  --black: #000000;
-  --white: #ffffff;
-  --transparent: transparent;
-  --current: currentColor;
 }
 .grid-layout {
   display: grid;
@@ -1824,16 +1799,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .md\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .md\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .md\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .md\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .md\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -1872,52 +1847,64 @@ video {
     border-inline-end-color: rgba(255, 255, 255, 0.15);
   }
   .md\:grid-line-x-soft[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .md\:grid-line-y-soft[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .md\:grid-line-xy-soft[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .md\:grid-line-xy-soft[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .md\:grid-line-x-softer[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .md\:grid-line-y-softer[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .md\:grid-line-xy-softer[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .md\:grid-line-xy-softer[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .md\:grid-line-x-softest[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .md\:grid-line-y-softest[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .md\:grid-line-xy-softest[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .md\:grid-line-xy-softest[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .md\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .md\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .md\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .md\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
+  }
+  .md\:grid-line-x-accent-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .md\:grid-line-y-accent-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
+  }
+  .md\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .md\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
   }
   .md\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -1955,6 +1942,30 @@ video {
   .md\:grid-line-xy-transparent[class*="grid-line-xy-"] > *::after {
     border-inline-end-color: var(--transparent);
   }
+  .md\:grid-line-x-grey[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .md\:grid-line-y-grey[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .md\:grid-line-xy-grey[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .md\:grid-line-xy-grey[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .md\:grid-line-x-grey-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .md\:grid-line-y-grey-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
+  .md\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .md\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
   .md\:grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
     border-bottom-width: 1px;
   }
@@ -2687,16 +2698,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .lg\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .lg\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .lg\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .lg\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .lg\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -2735,52 +2746,64 @@ video {
     border-inline-end-color: rgba(255, 255, 255, 0.15);
   }
   .lg\:grid-line-x-soft[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .lg\:grid-line-y-soft[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .lg\:grid-line-xy-soft[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .lg\:grid-line-xy-soft[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .lg\:grid-line-x-softer[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .lg\:grid-line-y-softer[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .lg\:grid-line-xy-softer[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .lg\:grid-line-xy-softer[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .lg\:grid-line-x-softest[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .lg\:grid-line-y-softest[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .lg\:grid-line-xy-softest[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .lg\:grid-line-xy-softest[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .lg\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .lg\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .lg\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .lg\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
+  }
+  .lg\:grid-line-x-accent-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .lg\:grid-line-y-accent-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
+  }
+  .lg\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .lg\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
   }
   .lg\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -2818,6 +2841,30 @@ video {
   .lg\:grid-line-xy-transparent[class*="grid-line-xy-"] > *::after {
     border-inline-end-color: var(--transparent);
   }
+  .lg\:grid-line-x-grey[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .lg\:grid-line-y-grey[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .lg\:grid-line-xy-grey[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .lg\:grid-line-xy-grey[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .lg\:grid-line-x-grey-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .lg\:grid-line-y-grey-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
+  .lg\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .lg\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
   .lg\:grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
     border-bottom-width: 1px;
   }
@@ -3550,16 +3597,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -3598,52 +3645,64 @@ video {
     border-inline-end-color: rgba(255, 255, 255, 0.15);
   }
   .xl\:grid-line-x-soft[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xl\:grid-line-y-soft[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xl\:grid-line-x-softer[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xl\:grid-line-y-softer[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xl\:grid-line-x-softest[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xl\:grid-line-y-softest[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
+  }
+  .xl\:grid-line-x-accent-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xl\:grid-line-y-accent-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
+  }
+  .xl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
   }
   .xl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -3681,6 +3740,30 @@ video {
   .xl\:grid-line-xy-transparent[class*="grid-line-xy-"] > *::after {
     border-inline-end-color: var(--transparent);
   }
+  .xl\:grid-line-x-grey[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xl\:grid-line-y-grey[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xl\:grid-line-x-grey-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xl\:grid-line-y-grey-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
+  .xl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
   .xl\:grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
     border-bottom-width: 1px;
   }
@@ -4413,16 +4496,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xxl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -4461,52 +4544,64 @@ video {
     border-inline-end-color: rgba(255, 255, 255, 0.15);
   }
   .xxl\:grid-line-x-soft[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xxl\:grid-line-y-soft[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xxl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xxl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xxl\:grid-line-x-softer[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xxl\:grid-line-y-softer[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xxl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xxl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xxl\:grid-line-x-softest[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xxl\:grid-line-y-softest[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xxl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xxl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xxl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
+  }
+  .xxl\:grid-line-x-accent-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xxl\:grid-line-y-accent-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
+  }
+  .xxl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xxl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
   }
   .xxl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -4544,6 +4639,30 @@ video {
   .xxl\:grid-line-xy-transparent[class*="grid-line-xy-"] > *::after {
     border-inline-end-color: var(--transparent);
   }
+  .xxl\:grid-line-x-grey[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xxl\:grid-line-y-grey[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xxl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xxl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xxl\:grid-line-x-grey-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xxl\:grid-line-y-grey-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
+  .xxl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xxl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
   .xxl\:grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
     border-bottom-width: 1px;
   }
@@ -5276,16 +5395,16 @@ video {
     bottom: -var(--outer-gutter, 0px);
   }
   .xxxl\:grid-line-x-default[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxxl\:grid-line-y-default[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--black);
+    border-bottom-color: var(--brand-black);
   }
   .xxxl\:grid-line-xy-default[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--black);
+    border-inline-end-color: var(--brand-black);
   }
   .xxxl\:grid-line-x-inverse[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--white);
@@ -5324,52 +5443,64 @@ video {
     border-inline-end-color: rgba(255, 255, 255, 0.15);
   }
   .xxxl\:grid-line-x-soft[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xxxl\:grid-line-y-soft[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xxxl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .15 );
+    border-bottom-color: rgba(0, 0, 0, .15);
   }
   .xxxl\:grid-line-xy-soft[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .15 );
+    border-inline-end-color: rgba(0, 0, 0, .15);
   }
   .xxxl\:grid-line-x-softer[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xxxl\:grid-line-y-softer[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xxxl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .1 );
+    border-bottom-color: rgba(0, 0, 0, .1);
   }
   .xxxl\:grid-line-xy-softer[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .1 );
+    border-inline-end-color: rgba(0, 0, 0, .1);
   }
   .xxxl\:grid-line-x-softest[class*="grid-line-x-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xxxl\:grid-line-y-softest[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xxxl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: rgba(0, 0, 0, .05 );
+    border-bottom-color: rgba(0, 0, 0, .05);
   }
   .xxxl\:grid-line-xy-softest[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: rgba(0, 0, 0, .05 );
+    border-inline-end-color: rgba(0, 0, 0, .05);
   }
   .xxxl\:grid-line-x-accent[class*="grid-line-x-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxxl\:grid-line-y-accent[class*="grid-line-y-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
   }
   .xxxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::before {
-    border-bottom-color: var(--green-500);
+    border-bottom-color: var(--brand-green);
   }
   .xxxl\:grid-line-xy-accent[class*="grid-line-xy-"] > *::after {
-    border-inline-end-color: var(--green-500);
+    border-inline-end-color: var(--brand-green);
+  }
+  .xxxl\:grid-line-x-accent-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xxxl\:grid-line-y-accent-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
+  }
+  .xxxl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--brand-green-dark);
+  }
+  .xxxl\:grid-line-xy-accent-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--brand-green-dark);
   }
   .xxxl\:grid-line-x-error[class*="grid-line-x-"] > *::before {
     border-bottom-color: var(--red-700);
@@ -5407,6 +5538,30 @@ video {
   .xxxl\:grid-line-xy-transparent[class*="grid-line-xy-"] > *::after {
     border-inline-end-color: var(--transparent);
   }
+  .xxxl\:grid-line-x-grey[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xxxl\:grid-line-y-grey[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xxxl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-light);
+  }
+  .xxxl\:grid-line-xy-grey[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-light);
+  }
+  .xxxl\:grid-line-x-grey-dark[class*="grid-line-x-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xxxl\:grid-line-y-grey-dark[class*="grid-line-y-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
+  .xxxl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::before {
+    border-bottom-color: var(--grey-dark);
+  }
+  .xxxl\:grid-line-xy-grey-dark[class*="grid-line-xy-"] > *::after {
+    border-inline-end-color: var(--grey-dark);
+  }
   .xxxl\:grid-cols-1[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
     border-bottom-width: 1px;
   }
@@ -5833,7 +5988,7 @@ video {
   }
 
     &::after {
-    border-color: rgba(0, 0, 0, .1 );
+    border-color: rgba(0, 0, 0, .1);
   }
 
     &::after {
@@ -5866,27 +6021,77 @@ video {
 .input-label b,.input-label strong {
   font-weight: var(--f-ui-04---bold-weight, bold);
 }
+.\!input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
 .input {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+}
+.\!input {
+  display: flex;
+  min-height: 2.5rem;
+  width: 100%;
+  align-items: center;
+}
+.input {
   display: flex;
   min-height: 2.5rem;
   width: 100%;
   align-items: center;
+}
+.\!input {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.input {
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
+}
+.\!input {
   border-radius: 8px;
   border-width: 2px;
-  border-color: rgba(0, 0, 0, .1 );
+  border-color: rgba(0, 0, 0, .1);
+}
+.\!input:hover {
+  border-color: var(--brand-black);
+}
+.\!input:active {
+  border-color: var(--brand-black);
+}
+.input {
+  border-radius: 8px;
+  border-width: 2px;
+  border-color: rgba(0, 0, 0, .1);
 }
 .input:hover {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 .input:active {
-  border-color: var(--black);
+  border-color: var(--brand-black);
+}
+.\!input {
+  font-family: var(--f-ui-02-light-fontFamily);
+  font-weight: var(--f-ui-02-light-fontWeight);
+  font-size: var(--f-ui-02-light-fontSize);
+  line-height: var(--f-ui-02-light-lineHeight);
+  letter-spacing: var(--f-ui-02-light-letterSpacing);
+}
+.\!input b,.\!input strong {
+  font-weight: var(--f-ui-02-light---bold-weight, bold);
+}
+.\!input::-moz-placeholder {
+  color: var(--grey-500);
+}
+.\!input::placeholder {
+  color: var(--grey-500);
 }
 .input {
   font-family: var(--f-ui-02-light-fontFamily);
@@ -5904,6 +6109,18 @@ video {
 .input::placeholder {
   color: var(--grey-500);
 }
+.\!input {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--brand-green);
+}
+.\!input:focus-visible {
+  outline-style: solid;
+}
 .input {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5911,21 +6128,32 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .input:focus-visible {
   outline-style: solid;
 }
+.\!input:disabled {
+  cursor: not-allowed;
+  background-color: var(--grey-light);
+  color: var(--grey-500);
+}
+.\!input:disabled:hover {
+  border-color: rgba(0, 0, 0, .1);
+}
+.\!input:disabled:active {
+  border-color: rgba(0, 0, 0, .1);
+}
 .input:disabled {
   cursor: not-allowed;
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
   color: var(--grey-500);
 }
 .input:disabled:hover {
-  border-color: rgba(0, 0, 0, .1 );
+  border-color: rgba(0, 0, 0, .1);
 }
 .input:disabled:active {
-  border-color: rgba(0, 0, 0, .1 );
+  border-color: rgba(0, 0, 0, .1);
 }
 .input-with-icon {
   padding-right: 34px;
@@ -5937,7 +6165,7 @@ video {
   width: 1rem;
   padding: 0rem;
   border-radius: 4px;
-  border-color: rgba(0, 0, 0, .15 );
+  border-color: rgba(0, 0, 0, .15);
 }
 .input-checkbox::after {
   --tw-content: '';
@@ -5959,18 +6187,18 @@ video {
   border-color: var(--transparent);
 }
 .input-checkbox:checked {
-  border-color: var(--black);
-  background-color: var(--black);
+  border-color: var(--brand-black);
+  background-color: var(--brand-black);
 }
 .input-checkbox:checked::after {
   border-color: var(--white);
 }
 .input-checkbox:checked:disabled {
-  border-color: rgba(0, 0, 0, .15 );
-  background-color: var(--grey-300);
+  border-color: rgba(0, 0, 0, .15);
+  background-color: var(--grey-light);
 }
 .input-checkbox:checked:disabled::after {
-  border-color: rgba(0, 0, 0, .15 );
+  border-color: rgba(0, 0, 0, .15);
 }
 .input-radio {
   position: relative;
@@ -5979,7 +6207,7 @@ video {
   width: 1rem;
   padding: 0rem;
   border-radius: 9999px;
-  border-color: rgba(0, 0, 0, .15 );
+  border-color: rgba(0, 0, 0, .15);
 }
 .input-radio::after {
   --tw-content: '';
@@ -6000,8 +6228,8 @@ video {
   background-color: var(--transparent);
 }
 .input-radio:checked {
-  border-color: var(--black);
-  background-color: var(--black);
+  border-color: var(--brand-black);
+  background-color: var(--brand-black);
 }
 .input-radio:checked::after {
   background-color: var(--white);
@@ -6048,17 +6276,6 @@ input[type="range"]::-webkit-slider-thumb {
     border: 3px solid rgba(0, 0, 0, .3);
     border-bottom-color: #000;
 }
-.scroller-x {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-.scroller-x::-webkit-scrollbar {
-  display: none;
-}
-.scroller-x {
-  overflow: auto;
-  overscroll-behavior-x: contain;
-}
 /** region TRANSITIONS */
 .effect-color {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
@@ -6072,12 +6289,6 @@ input[type="range"]::-webkit-slider-thumb {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
-.effect-background {
-  transition-property: background;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .effect-height {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
@@ -6094,7 +6305,7 @@ input[type="range"]::-webkit-slider-thumb {
 .effect-focus {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .effect-focus:focus-visible {
   outline-style: solid;
@@ -6102,7 +6313,7 @@ input[type="range"]::-webkit-slider-thumb {
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 .effect-focus-within:focus-within {
   outline-style: solid;
@@ -6154,7 +6365,7 @@ input[type="range"]::-webkit-slider-thumb {
   right: 0rem;
   z-index: 0;
   border-radius: 8px;
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark);
   --tw-content: '';
   content: var(--tw-content);
 }
@@ -6212,6 +6423,9 @@ input[type="range"]::-webkit-slider-thumb {
 .bottom-0 {
   bottom: 0rem;
 }
+.bottom-16 {
+  bottom: 1rem;
+}
 .bottom-4 {
   bottom: 0.25rem;
 }
@@ -6230,8 +6444,11 @@ input[type="range"]::-webkit-slider-thumb {
 .left-4 {
   left: 0.25rem;
 }
-.left-\[4px\] {
-  left: 4px;
+.left-\[12px\] {
+  left: 12px;
+}
+.left-\[14px\] {
+  left: 14px;
 }
 .right-0 {
   right: 0rem;
@@ -6269,12 +6486,6 @@ input[type="range"]::-webkit-slider-thumb {
 .z-10 {
   z-index: 10;
 }
-.z-50 {
-  z-index: 50;
-}
-.z-\[1\] {
-  z-index: 1;
-}
 .z-\[999999\] {
   z-index: 999999;
 }
@@ -6284,9 +6495,6 @@ input[type="range"]::-webkit-slider-thumb {
 .z-on-top {
   z-index: 99999;
 }
-.order-first {
-  order: -9999;
-}
 .order-last {
   order: 9999;
 }
@@ -6312,15 +6520,9 @@ input[type="range"]::-webkit-slider-thumb {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-.-ml-16 {
-  margin-left: -1rem;
-}
 .-ml-4 {
   margin-left: -0.25rem;
 }
-.-mr-16 {
-  margin-right: -1rem;
-}
 .-mr-4 {
   margin-right: -0.25rem;
 }
@@ -6336,6 +6538,9 @@ input[type="range"]::-webkit-slider-thumb {
 .mb-2 {
   margin-bottom: 0.125rem;
 }
+.mb-24 {
+  margin-bottom: 1.5rem;
+}
 .mb-28 {
   margin-bottom: 1.75rem;
 }
@@ -6474,9 +6679,15 @@ input[type="range"]::-webkit-slider-thumb {
 .aspect-4x5 {
   aspect-ratio: 4/5;
 }
+.\!h-auto {
+  height: auto !important;
+}
 .h-0 {
   height: 0rem;
 }
+.h-10 {
+  height: 0.625rem;
+}
 .h-12 {
   height: 0.75rem;
 }
@@ -6531,6 +6742,9 @@ input[type="range"]::-webkit-slider-thumb {
 .h-full {
   height: 100%;
 }
+.max-h-\[90vh\] {
+  max-height: 90vh;
+}
 .\!min-h-0 {
   min-height: 0rem !important;
 }
@@ -6570,9 +6784,6 @@ input[type="range"]::-webkit-slider-thumb {
 .w-20 {
   width: 1.25rem;
 }
-.w-24 {
-  width: 1.5rem;
-}
 .w-28 {
   width: 1.75rem;
 }
@@ -6588,6 +6799,9 @@ input[type="range"]::-webkit-slider-thumb {
 .w-\[200px\] {
   width: 200px;
 }
+.w-\[250px\] {
+  width: 250px;
+}
 .w-\[300px\] {
   width: 300px;
 }
@@ -6604,6 +6818,9 @@ input[type="range"]::-webkit-slider-thumb {
 .w-full {
   width: 100%;
 }
+.min-w-0 {
+  min-width: 0rem;
+}
 .min-w-\[200px\] {
   min-width: 200px;
 }
@@ -6616,18 +6833,24 @@ input[type="range"]::-webkit-slider-thumb {
 .min-w-\[280px\] {
   min-width: 280px;
 }
-.max-w-120 {
-  max-width: 120px;
-}
 .max-w-full {
   max-width: 100%;
 }
 .max-w-sidebar {
   max-width: 1224px;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .flex-none {
   flex: none;
 }
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.shrink {
+  flex-shrink: 1;
+}
 .grow {
   flex-grow: 1;
 }
@@ -6642,6 +6865,9 @@ input[type="range"]::-webkit-slider-thumb {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -6702,6 +6928,9 @@ input[type="range"]::-webkit-slider-thumb {
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -6714,15 +6943,23 @@ input[type="range"]::-webkit-slider-thumb {
 .gap-12 {
   gap: 0.75rem;
 }
+.gap-16 {
+  gap: 1rem;
+}
+.gap-2 {
+  gap: 0.125rem;
+}
 .gap-20 {
   gap: 1.25rem;
 }
 .gap-4 {
   gap: 0.25rem;
 }
-.gap-x-1 {
-  -moz-column-gap: 0.0625rem;
-       column-gap: 0.0625rem;
+.gap-6 {
+  gap: 0.375rem;
+}
+.gap-8 {
+  gap: 0.5rem;
 }
 .gap-x-12 {
   -moz-column-gap: 0.75rem;
@@ -6754,6 +6991,9 @@ input[type="range"]::-webkit-slider-thumb {
 .gap-y-16 {
   row-gap: 1rem;
 }
+.gap-y-20 {
+  row-gap: 1.25rem;
+}
 .gap-y-24 {
   row-gap: 1.5rem;
 }
@@ -6796,11 +7036,14 @@ input[type="range"]::-webkit-slider-thumb {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-visible {
+  overflow: visible;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
-.overflow-x-hidden {
-  overflow-x: hidden;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 .overflow-y-scroll {
   overflow-y: scroll;
@@ -6850,55 +7093,42 @@ input[type="range"]::-webkit-slider-thumb {
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
 }
-.rounded-tl-lg {
-  border-top-left-radius: 16px;
-}
-.rounded-tr-lg {
-  border-top-right-radius: 16px;
-}
 .border {
   border-width: 1px;
 }
-.border-0 {
-  border-width: 0px;
-}
 .border-2 {
   border-width: 2px;
 }
 .border-3 {
   border-width: 3px;
 }
-.border-b-0 {
-  border-bottom-width: 0px;
-}
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-l-0 {
-  border-left-width: 0px;
-}
-.border-r-0 {
-  border-right-width: 0px;
-}
 .border-t-2 {
   border-top-width: 2px;
 }
-.border-\[\#0034CB\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 52 203 / var(--tw-border-opacity));
-}
 .border-accent {
-  border-color: var(--green-500);
+  border-color: var(--brand-green);
+}
+.border-accent-dark {
+  border-color: var(--brand-green-dark);
 }
 .border-current {
   border-color: currentColor;
 }
 .border-default {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 .border-error {
   border-color: var(--red-700);
 }
+.border-grey {
+  border-color: var(--grey-light);
+}
+.border-grey-dark {
+  border-color: var(--grey-dark);
+}
 .border-inverse {
   border-color: var(--white);
 }
@@ -6909,50 +7139,46 @@ input[type="range"]::-webkit-slider-thumb {
   border-color: rgba(255, 255, 255, 0.15);
 }
 .border-soft {
-  border-color: rgba(0, 0, 0, .15 );
+  border-color: rgba(0, 0, 0, .15);
 }
 .border-softer {
-  border-color: rgba(0, 0, 0, .1 );
+  border-color: rgba(0, 0, 0, .1);
 }
 .border-softest {
-  border-color: rgba(0, 0, 0, .05 );
+  border-color: rgba(0, 0, 0, .05);
 }
 .border-transparent {
   border-color: var(--transparent);
 }
 .\!bg-accent-dark {
-  background-color: var(--green-600) !important;
+  background-color: var(--brand-green-dark) !important;
 }
 .\!bg-darker {
-  background-color: var(--grey-400) !important;
+  background-color: var(--grey-dark) !important;
+}
+.\!bg-inverse {
+  background-color: var(--white) !important;
 }
 .\!bg-strong-dark {
   background-color: var(--grey-800) !important;
 }
-.bg-\[\#00A595\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 165 149 / var(--tw-bg-opacity));
-}
 .bg-accent {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 .bg-accent-dark {
-  background-color: var(--green-600);
-}
-.bg-accent-darker {
-  background-color: var(--green-800);
+  background-color: var(--brand-green-dark);
 }
 .bg-current {
   background-color: currentColor;
 }
 .bg-dark {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 .bg-darker {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark);
 }
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--brand-black);
 }
 .bg-error {
   background-color: var(--red-200);
@@ -6961,10 +7187,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--white);
 }
 .bg-inverse-soft {
-  background-color: rgba(255, 255, 255, .2);
-}
-.bg-inverse-softer {
-  background-color: rgba(255, 255, 255, .15);
+  background-color: rgba(0, 0, 0, .05);
 }
 .bg-on-dark {
   background-color: rgba(255, 255, 255, 0.2);
@@ -6985,10 +7208,7 @@ input[type="range"]::-webkit-slider-thumb {
   background-color: var(--grey-900);
 }
 .bg-strongest {
-  background-color: var(--black);
-}
-.bg-strongest-soft {
-  background-color: rgba(0, 0, 0, .05);
+  background-color: var(--brand-black);
 }
 .bg-success {
   background-color: var(--green-200);
@@ -7002,9 +7222,6 @@ input[type="range"]::-webkit-slider-thumb {
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
 }
-.fill-current {
-  fill: currentColor;
-}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -7025,9 +7242,6 @@ input[type="range"]::-webkit-slider-thumb {
 .p-16 {
   padding: 1rem;
 }
-.p-2 {
-  padding: 0.125rem;
-}
 .p-20 {
   padding: 1.25rem;
 }
@@ -7037,8 +7251,8 @@ input[type="range"]::-webkit-slider-thumb {
 .p-32 {
   padding: 2rem;
 }
-.p-4 {
-  padding: 0.25rem;
+.p-5 {
+  padding: 0.3125rem;
 }
 .p-64 {
   padding: 4rem;
@@ -7046,6 +7260,9 @@ input[type="range"]::-webkit-slider-thumb {
 .p-8 {
   padding: 0.5rem;
 }
+.p-\[24px\] {
+  padding: 24px;
+}
 .\!px-0 {
   padding-left: 0rem !important;
   padding-right: 0rem !important;
@@ -7066,21 +7283,21 @@ input[type="range"]::-webkit-slider-thumb {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.px-2 {
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
 .px-20 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
 }
+.px-32 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .px-4 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
-.px-5 {
-  padding-left: 0.3125rem;
-  padding-right: 0.3125rem;
+.px-48 {
+  padding-left: 3rem;
+  padding-right: 3rem;
 }
 .px-6 {
   padding-left: 0.375rem;
@@ -7090,10 +7307,6 @@ input[type="range"]::-webkit-slider-thumb {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.py-1 {
-  padding-top: 0.0625rem;
-  padding-bottom: 0.0625rem;
-}
 .py-12 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -7110,6 +7323,10 @@ input[type="range"]::-webkit-slider-thumb {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-24 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-3 {
   padding-top: 0.1875rem;
   padding-bottom: 0.1875rem;
@@ -7126,26 +7343,32 @@ input[type="range"]::-webkit-slider-thumb {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.pb-12 {
+  padding-bottom: 0.75rem;
+}
 .pb-16 {
   padding-bottom: 1rem;
 }
+.pb-2 {
+  padding-bottom: 0.125rem;
+}
 .pb-20 {
   padding-bottom: 1.25rem;
 }
 .pb-28 {
   padding-bottom: 1.75rem;
 }
+.pb-4 {
+  padding-bottom: 0.25rem;
+}
 .pb-8 {
   padding-bottom: 0.5rem;
 }
 .pl-12 {
   padding-left: 0.75rem;
 }
-.pl-16 {
-  padding-left: 1rem;
-}
-.pl-28 {
-  padding-left: 1.75rem;
+.pl-2 {
+  padding-left: 0.125rem;
 }
 .pl-32 {
   padding-left: 2rem;
@@ -7162,11 +7385,8 @@ input[type="range"]::-webkit-slider-thumb {
 .pr-12 {
   padding-right: 0.75rem;
 }
-.pr-16 {
-  padding-right: 1rem;
-}
-.pr-28 {
-  padding-right: 1.75rem;
+.pr-2 {
+  padding-right: 0.125rem;
 }
 .pr-4 {
   padding-right: 0.25rem;
@@ -7177,8 +7397,8 @@ input[type="range"]::-webkit-slider-thumb {
 .pr-8 {
   padding-right: 0.5rem;
 }
-.pt-12 {
-  padding-top: 0.75rem;
+.pt-16 {
+  padding-top: 1rem;
 }
 .pt-20 {
   padding-top: 1.25rem;
@@ -7215,6 +7435,9 @@ input[type="range"]::-webkit-slider-thumb {
 .font-bold {
   font-weight: 700;
 }
+.font-semibold {
+  font-weight: 600;
+}
 .uppercase {
   text-transform: uppercase;
 }
@@ -7227,18 +7450,20 @@ input[type="range"]::-webkit-slider-thumb {
 .\!text-current {
   color: currentColor !important;
 }
-.text-\[\#0034CB\] {
-  --tw-text-opacity: 1;
-  color: rgb(0 52 203 / var(--tw-text-opacity));
+.\!text-default {
+  color: var(--brand-black) !important;
 }
 .text-accent {
-  color: var(--green-500);
+  color: var(--brand-green);
+}
+.text-accent-dark {
+  color: var(--brand-green-dark);
 }
 .text-current {
   color: currentColor;
 }
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
 }
 .text-error {
   color: var(--red-700);
@@ -7250,14 +7475,17 @@ input[type="range"]::-webkit-slider-thumb {
   color: var(--white);
 }
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-dark);
 }
 .text-lighter {
-  color: var(--grey-600);
+  color: var(--grey-light);
 }
 .text-lightest {
   color: var(--grey-500);
 }
+.text-on-dark {
+  color: var(--white);
+}
 .text-on-gradient {
   color: rgba(0, 0, 0, 0.55);
 }
@@ -7276,12 +7504,6 @@ input[type="range"]::-webkit-slider-thumb {
 .\!no-underline {
   text-decoration-line: none !important;
 }
-.decoration-\[\#0034CB\] {
-  text-decoration-color: #0034CB;
-}
-.decoration-accent {
-  text-decoration-color: var(--green-500);
-}
 .decoration-2 {
   text-decoration-thickness: 2px;
 }
@@ -7302,14 +7524,9 @@ input[type="range"]::-webkit-slider-thumb {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-accent {
-  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);
-  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-hover {
-  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
-  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  --tw-shadow: 0px 8px 24px rgba(7, 20, 13, 0.2);
+  --tw-shadow-colored: 0px 8px 24px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .shadow-lg {
@@ -7317,20 +7534,11 @@ input[type="range"]::-webkit-slider-thumb {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-small {
-  --tw-shadow: 0px 1.5px 2px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);
+  --tw-shadow: 0px 1px 3px rgba(7, 20, 13, 0.1);
+  --tw-shadow-colored: 0px 1px 3px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .outline {
   outline-style: solid;
 }
@@ -7348,13 +7556,10 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .backdrop-blur {
   --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -7376,6 +7581,9 @@ input[type="range"]::-webkit-slider-thumb {
 .duration-150 {
   transition-duration: 150ms;
 }
+.duration-200 {
+  transition-duration: 200ms;
+}
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -7431,8 +7639,8 @@ input[type="range"]::-webkit-slider-thumb {
 .underline-offset-4 {
   text-underline-offset: 0.2em;
 }
-.\@container {
-  container-type: inline-size;
+.underline-offset-6 {
+  text-underline-offset: 0.3em;
 }
 .bg-gradient-01-top {
     background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
@@ -7470,6 +7678,42 @@ input[type="range"]::-webkit-slider-thumb {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+@media (min-width: 0px) {
+  .sm\:grid-cols-2[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+    border-bottom-width: 1px;
+  }
+  .sm\:grid-cols-2[class*="grid-line-xfull"] > *:nth-child(n)::before {
+    inset-inline-start: calc(var(--inner-gutter) / -2);
+    inset-inline-end: calc(var(--inner-gutter) / -2);
+  }
+  .sm\:grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1)::before {
+    inset-inline-start: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+2)::before {
+    inset-inline-end: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2)::before {
+    border-bottom-width: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-x"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ *::before {
+    border-bottom-width: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+    border-inline-end-width: 1px;
+  }
+  .sm\:grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+2)::after {
+    border-inline-end-width: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+2)::after {
+    top: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2)::after {
+    bottom: 0;
+  }
+  .sm\:grid-cols-2[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(2n+1):nth-last-child(-n+2) ~ li::after {
+    bottom: 0;
+  }
+}
 @media (min-width: 750px) {
   .md\:grid-col-span-3 {
     --container-grid-columns: 3;
@@ -7568,6 +7812,40 @@ input[type="range"]::-webkit-slider-thumb {
   .lg\:grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
     bottom: 0;
   }
+  .lg\:grid-cols-5[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
+    border-bottom-width: 1px;
+  }
+  .lg\:grid-cols-5[class*="grid-line-xfull"] > *:nth-child(n)::before {
+    inset-inline-start: calc(var(--inner-gutter) / -2);
+    inset-inline-end: calc(var(--inner-gutter) / -2);
+  }
+  .lg\:grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1)::before {
+    inset-inline-start: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+5)::before {
+    inset-inline-end: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5)::before {
+    border-bottom-width: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-x"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ *::before {
+    border-bottom-width: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
+    border-inline-end-width: 1px;
+  }
+  .lg\:grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+5)::after {
+    border-inline-end-width: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+5)::after {
+    top: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5)::after {
+    bottom: 0;
+  }
+  .lg\:grid-cols-5[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(5n+1):nth-last-child(-n+5) ~ li::after {
+    bottom: 0;
+  }
 }
 @media (min-width: 1024px) {
   .xl\:grid-col-span-3 {
@@ -7585,23 +7863,17 @@ input[type="range"]::-webkit-slider-thumb {
     grid-column: span 3 / span 3;
   }
 }
-.even\:bg-inverse-softer:nth-child(even) {
-  background-color: rgba(255, 255, 255, .15);
-}
-.focus-within\:bg-transparent:focus-within {
-  background-color: var(--transparent);
+.hover\:bg-accent:hover {
+  background-color: var(--brand-green);
 }
 .hover\:bg-accent-dark:hover {
-  background-color: var(--green-600);
+  background-color: var(--brand-green-dark);
 }
 .hover\:bg-dark:hover {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 .hover\:bg-darker:hover {
-  background-color: var(--grey-400);
-}
-.hover\:bg-default:hover {
-  background-color: var(--grey-200);
+  background-color: var(--grey-dark);
 }
 .hover\:bg-inverse:hover {
   background-color: var(--white);
@@ -7609,24 +7881,33 @@ input[type="range"]::-webkit-slider-thumb {
 .hover\:bg-strong-dark:hover {
   background-color: var(--grey-800);
 }
-.hover\:bg-transparent:hover {
-  background-color: var(--transparent);
+.hover\:bg-strongest:hover {
+  background-color: var(--brand-black);
+}
+.hover\:text-accent:hover {
+  color: var(--brand-green);
 }
 .hover\:text-default:hover {
-  color: var(--black);
+  color: var(--brand-black);
+}
+.hover\:text-inverse:hover {
+  color: var(--white);
+}
+.hover\:text-light:hover {
+  color: var(--grey-dark);
 }
 .hover\:text-lighter:hover {
-  color: var(--grey-600);
+  color: var(--grey-light);
 }
 .hover\:\!underline:hover {
   text-decoration-line: underline !important;
 }
-.hover\:no-underline:hover {
-  text-decoration-line: none;
+.hover\:decoration-accent:hover {
+  text-decoration-color: var(--brand-green);
 }
 .hover\:shadow-hover:hover {
-  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
-  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  --tw-shadow: 0px 8px 24px rgba(7, 20, 13, 0.2);
+  --tw-shadow-colored: 0px 8px 24px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .focus\:shadow-none:focus {
@@ -7641,14 +7922,11 @@ input[type="range"]::-webkit-slider-thumb {
 .focus-visible\:rounded-xs:focus-visible {
   border-radius: 4px;
 }
-.focus-visible\:text-default:focus-visible {
-  color: var(--black);
-}
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
 .disabled\:bg-dark:disabled {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 .disabled\:text-lightest:disabled {
   color: var(--grey-500);
@@ -7659,17 +7937,14 @@ input[type="range"]::-webkit-slider-thumb {
 .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
   cursor: not-allowed;
 }
-.aria-disabled\:\!border-transparent[aria-disabled="true"] {
-  border-color: var(--transparent) !important;
-}
 .aria-disabled\:bg-dark[aria-disabled="true"] {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 .aria-disabled\:bg-transparent[aria-disabled="true"] {
   background-color: var(--transparent);
 }
 .aria-disabled\:text-light[aria-disabled="true"] {
-  color: var(--grey-700);
+  color: var(--grey-dark);
 }
 .aria-disabled\:text-lightest[aria-disabled="true"] {
   color: var(--grey-500);
@@ -7686,7 +7961,7 @@ input[type="range"]::-webkit-slider-thumb {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .aria-current-page\:bg-darker[aria-current="page"] {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark);
 }
 .after\:absolute::after {
   position: absolute;
@@ -7694,39 +7969,14 @@ input[type="range"]::-webkit-slider-thumb {
 .after\:inset-0::after {
   inset: 0rem;
 }
-.after\:inset-x-0::after {
-  left: 0rem;
-  right: 0rem;
-}
-.after\:bottom-0::after {
-  bottom: 0rem;
-}
-.after\:left-16::after {
-  left: 1rem;
-}
-.after\:right-16::after {
-  right: 1rem;
-}
 .after\:z-10::after {
   z-index: 10;
 }
-.after\:h-2::after {
-  height: 0.125rem;
-}
-.after\:rounded-lg::after {
-  border-radius: 16px;
-}
-.after\:border-b-2::after {
-  border-bottom-width: 2px;
-}
 .after\:\!border-transparent::after {
   border-color: var(--transparent) !important;
 }
-.after\:border-soft::after {
-  border-color: rgba(0, 0, 0, .15 );
-}
 .after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05 );
+  border-color: rgba(0, 0, 0, .05);
 }
 .after\:opacity-0::after {
   opacity: 0;
@@ -7741,59 +7991,18 @@ input[type="range"]::-webkit-slider-thumb {
 .hover\:after\:opacity-100:hover::after {
   opacity: 1;
 }
+.aria-disabled\:after\:\!border-0[aria-disabled="true"]::after {
+  border-width: 0px !important;
+}
 .aria-disabled\:after\:\!border-transparent[aria-disabled="true"]::after {
   border-color: var(--transparent) !important;
 }
-.before\:absolute::before {
-  position: absolute;
-}
-.before\:inset-x-0::before {
-  left: 0rem;
-  right: 0rem;
-}
-.before\:-bottom-2::before {
-  bottom: -0.125rem;
-}
-.before\:bottom-0::before {
-  bottom: 0rem;
-}
-.before\:h-12::before {
-  height: 0.75rem;
-}
-.before\:h-3::before {
-  height: 0.1875rem;
-}
-.before\:rounded-lg::before {
-  border-radius: 16px;
-}
-.before\:border-2::before {
-  border-width: 2px;
-}
-.before\:border-softest::before {
-  border-color: rgba(0, 0, 0, .05 );
-}
-.before\:bg-default::before {
-  background-color: var(--grey-200);
-}
-.before\:bg-inverse-softer::before {
-  background-color: rgba(255, 255, 255, .15);
-}
 .before\:\!opacity-100::before {
   opacity: 1 !important;
 }
 .before\:opacity-0::before {
   opacity: 0;
 }
-.before\:opacity-5::before {
-  opacity: 0.05;
-}
-.before\:content-\[\'\'\]::before {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-.before\:bg-gradient-y::before {
-    background: linear-gradient(to bottom, transparent, ease-in-out, black);
-  }
 .before\:bg-gradient-01-top::before {
     background: linear-gradient(to bottom, #00E766, ease-in-out, #E6E6E6);
   }
@@ -7827,11 +8036,6 @@ input[type="range"]::-webkit-slider-thumb {
 .focus-visible\:before\:opacity-0:focus-visible::before {
   opacity: 0;
 }
-@container (min-width: 46.875rem) {
-  .\@md\:max-w-192 {
-    max-width: 192px;
-  }
-}
 @media (min-width: 0px) {
   .sm\:mb-4 {
     margin-bottom: 0.25rem;
@@ -7839,6 +8043,9 @@ input[type="range"]::-webkit-slider-thumb {
   .sm\:max-w-\[200px\] {
     max-width: 200px;
   }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 @media (min-width: 750px) {
   .md\:bottom-20 {
@@ -7853,6 +8060,9 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:top-20 {
     top: 1.25rem;
   }
+  .md\:mt-64 {
+    margin-top: 4rem;
+  }
   .md\:flex {
     display: flex;
   }
@@ -7873,6 +8083,15 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .md\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+  .md\:gap-y-0 {
+    row-gap: 0rem;
+  }
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
@@ -7881,18 +8100,12 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 900px) {
-  .lg\:order-last {
-    order: 9999;
-  }
   .lg\:order-none {
     order: 0;
   }
   .lg\:mt-0 {
     margin-top: 0rem;
   }
-  .lg\:block {
-    display: block;
-  }
   .lg\:flex {
     display: flex;
   }
@@ -7902,14 +8115,11 @@ input[type="range"]::-webkit-slider-thumb {
   .lg\:w-auto {
     width: auto;
   }
-  .lg\:max-w-\[720px\] {
-    max-width: 720px;
-  }
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .lg\:flex-row {
-    flex-direction: row;
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
   .lg\:flex-nowrap {
     flex-wrap: nowrap;
@@ -7917,10 +8127,6 @@ input[type="range"]::-webkit-slider-thumb {
   .lg\:gap-y-16 {
     row-gap: 1rem;
   }
-  .lg\:px-28 {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
-  }
   .lg\:\!pl-12 {
     padding-left: 0.75rem !important;
   }