@deriv-web-design/ui 0.0.21 → 0.0.24

package/dist/index.css

@@ -377,7 +377,7 @@
   max-width: 846px;
   box-sizing: border-box;
 }
-.accordion .header {
+.accordion__header {
   display: flex;
   align-items: center;
   gap: var(--spacing-24);
@@ -391,31 +391,31 @@
   text-align: left;
   box-sizing: border-box;
 }
-.accordion .header:focus-visible::after {
+.accordion__header:focus-visible::after {
   content: "";
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.accordion .focusRing {
+.accordion__focus-ring {
   position: absolute;
   inset: -2px;
   border: 2px solid var(--accordion-focus-ring-color);
   pointer-events: none;
 }
-.accordion .titleWrapper {
+.accordion__title-wrapper {
   flex: 1 0 0;
   min-width: 1px;
 }
-.accordion .title {
+.accordion__title {
   font-family: var(--font-family-base);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semi-bold);
   line-height: var(--line-height-normal);
   color: var(--accordion-title-color);
 }
-.accordion .chevron {
+.accordion__chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -425,21 +425,21 @@
   color: var(--accordion-chevron-color);
   transition: transform 200ms ease;
 }
-.accordion .chevronRotated {
+.accordion__chevron--rotated {
   transform: rotate(180deg);
 }
-.accordion .bodyWrapper {
+.accordion__body-wrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 200ms ease;
 }
-.accordion .bodyWrapperOpen {
+.accordion__body-wrapper--open {
   grid-template-rows: 1fr;
 }
-.accordion .bodyInner {
+.accordion__body-inner {
   overflow: hidden;
 }
-.accordion .body {
+.accordion__body {
   padding-bottom: var(--spacing-24);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
@@ -1548,79 +1548,74 @@
   font-weight: var(--font-weight-regular);
 }
 
-/* templates/FeatureCards/FeatureCards.css */
-.fc-section {
+/* templates/FaqAccordion/FaqAccordion.css */
+.faq-accordion {
   width: 100%;
+}
+.faq-accordion--white {
   background-color: var(--color-slate-50);
 }
-.fc-container {
+.faq-accordion--slate {
+  background-color: var(--color-slate-75);
+}
+.faq-accordion__container {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-48);
+  gap: var(--spacing-24);
   max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);
   box-sizing: border-box;
+  width: 100%;
 }
 @media (min-width: 992px) {
-  .fc-container {
+  .faq-accordion__container {
+    gap: var(--spacing-48);
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.fc-header {
+.faq-accordion__header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--spacing-16);
-  text-align: left;
+  gap: 1.25rem;
+  width: 100%;
 }
-@media (min-width: 768px) {
-  .fc-header {
+@media (min-width: 992px) {
+  .faq-accordion__header {
     align-items: center;
-    text-align: center;
+    gap: var(--spacing-24);
   }
 }
-.fc-sectionTitle {
+.faq-accordion__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
   line-height: var(--typography-h2-line-height);
   color: var(--text-primary);
   margin: 0;
-}
-.fc-sectionDescription {
-  font-family: var(--typography-body-md-font-family);
-  font-size: var(--typography-body-md-font-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
-  margin: 0;
-  max-width: 640px;
-}
-.fc-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-16);
   width: 100%;
 }
-@media (min-width: 768px) {
-  .fc-grid {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--spacing-24);
-  }
-}
 @media (min-width: 992px) {
-  .fc-grid {
-    grid-template-columns: repeat(3, 1fr);
+  .faq-accordion__title {
+    text-align: center;
   }
 }
+.faq-accordion__list {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.faq-accordion__list > * {
+  max-width: 100%;
+}
 
-/* templates/FeatureCardsSecondary/FeatureCardsSecondary.css */
-.fcs-section {
+/* templates/FeatureCards/FeatureCards.css */
+.fc-section {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.fcs-container {
+.fc-container {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
@@ -1630,11 +1625,11 @@
   box-sizing: border-box;
 }
 @media (min-width: 992px) {
-  .fcs-container {
+  .fc-container {
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.fcs-header {
+.fc-header {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1642,12 +1637,12 @@
   text-align: left;
 }
 @media (min-width: 768px) {
-  .fcs-header {
+  .fc-header {
     align-items: center;
     text-align: center;
   }
 }
-.fcs-sectionTitle {
+.fc-sectionTitle {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -1655,7 +1650,7 @@
   color: var(--text-primary);
   margin: 0;
 }
-.fcs-sectionDescription {
+.fc-sectionDescription {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1664,42 +1659,42 @@
   margin: 0;
   max-width: 640px;
 }
-.fcs-grid {
+.fc-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-16);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .fcs-grid {
+  .fc-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-24);
   }
 }
 @media (min-width: 992px) {
-  .fcs-grid--3 {
+  .fc-grid--3 {
     grid-template-columns: repeat(3, 1fr);
   }
-  .fcs-grid--4 {
+  .fc-grid--4 {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-.fcs-grid--twoCards {
+.fc-grid--twoCards {
   grid-template-columns: 1fr;
   gap: var(--spacing-24);
   align-items: stretch;
 }
 @media (min-width: 768px) {
-  .fcs-grid--twoCards {
+  .fc-grid--twoCards {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .fcs-grid--twoCards {
+  .fc-grid--twoCards {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-.fcs-twoCardWrap {
+.fc-twoCardWrap {
   display: flex;
   flex-direction: column;
   align-self: stretch;
@@ -1707,7 +1702,7 @@
   width: 100%;
   min-height: 0;
 }
-.fcs-twoCard {
+.fc-twoCard {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -1718,28 +1713,28 @@
   overflow: hidden;
   box-sizing: border-box;
 }
-.fcs-twoCard--light {
+.fc-twoCard--light {
   background-color: var(--color-slate-75);
 }
-.fcs-twoCard--dark {
+.fc-twoCard--dark {
   background-color: var(--color-slate-1200);
 }
-.fcs-twoCard-body {
+.fc-twoCard-body {
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
   gap: 0;
   padding: var(--spacing-32);
 }
-.fcs-twoCard:not(:has(.fcs-twoCard-imageSection)) .fcs-twoCard-body {
+.fc-twoCard:not(:has(.fc-twoCard-imageSection)) .fc-twoCard-body {
   flex: 1 1 auto;
 }
-.fcs-twoCard-content {
+.fc-twoCard-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.fcs-twoCard-title {
+.fc-twoCard-title {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -1747,10 +1742,10 @@
   color: var(--text-primary);
   margin: 0;
 }
-.fcs-twoCard--dark .fcs-twoCard-title {
+.fc-twoCard--dark .fc-twoCard-title {
   color: var(--color-slate-50);
 }
-.fcs-twoCard-description {
+.fc-twoCard-description {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -1758,20 +1753,20 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.fcs-twoCard--dark .fcs-twoCard-description {
+.fc-twoCard--dark .fc-twoCard-description {
   color: var(--color-slate-50);
 }
-.fcs-twoCard-linkWrap {
+.fc-twoCard-linkWrap {
   margin-top: 0;
 }
-.fcs-twoCard-platformsOuter {
+.fc-twoCard-platformsOuter {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
   margin-top: var(--spacing-24);
   flex-shrink: 0;
 }
-.fcs-twoCard-platformsHeading {
+.fc-twoCard-platformsHeading {
   margin: 0;
   font-family: var(--typography-body-lg-font-family);
   font-size: var(--typography-body-lg-font-size);
@@ -1779,50 +1774,50 @@
   line-height: var(--typography-body-lg-line-height);
   color: var(--text-primary);
 }
-.fcs-twoCard--dark .fcs-twoCard-platformsHeading {
+.fc-twoCard--dark .fc-twoCard-platformsHeading {
   color: var(--color-slate-50);
 }
-.fcs-twoCard--light .fcs-twoCard-platformsHeading {
+.fc-twoCard--light .fc-twoCard-platformsHeading {
   color: var(--text-primary);
 }
-.fcs-twoCard-platformRow {
+.fc-twoCard-platformRow {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-16);
 }
-.fcs-platformLink {
+.fc-platformLink {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
   text-decoration: none;
   color: var(--text-primary);
 }
-.fcs-platformLink:hover {
+.fc-platformLink:hover {
   text-decoration: underline;
 }
-.fcs-platformLink:focus-visible {
+.fc-platformLink:focus-visible {
   outline: 2px solid var(--color-coral-700);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
-.fcs-platformLink--dark {
+.fc-platformLink--dark {
   color: var(--color-slate-50);
 }
-.fcs-platformLink-icon {
+.fc-platformLink-icon {
   display: block;
   width: 2rem;
   height: 2rem;
   flex-shrink: 0;
   object-fit: contain;
 }
-.fcs-platformLink-label {
+.fc-platformLink-label {
   font-family: var(--typography-body-sm-font-family);
   font-size: var(--typography-body-sm-font-size);
   font-weight: var(--typography-body-sm-font-weight);
   line-height: var(--typography-body-sm-line-height);
 }
-.fcs-twoCard-imageSection {
+.fc-twoCard-imageSection {
   margin-top: auto;
   flex: 0 0 auto;
   width: 100%;
@@ -1831,7 +1826,7 @@
   overflow: hidden;
   background-color: transparent;
 }
-.fcs-twoCard-image {
+.fc-twoCard-image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -1840,11 +1835,11 @@
   object-position: bottom center;
   display: block;
 }
-.fcs-oneCardShell {
+.fc-oneCardShell {
   width: 100%;
   box-sizing: border-box;
 }
-.fcs-oneCardGrid {
+.fc-oneCardGrid {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: 1fr;
@@ -1858,14 +1853,14 @@
   overflow: hidden;
 }
 @media (min-width: 768px) {
-  .fcs-oneCardGrid {
+  .fc-oneCardGrid {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     max-height: calc(30 * var(--spacing-16));
     min-height: calc(30 * var(--spacing-16));
   }
 }
-.fcs-oneCardLeft {
+.fc-oneCardLeft {
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -1874,13 +1869,13 @@
   min-height: 0;
   min-width: 0;
 }
-.fcs-oneCardContentBlock {
+.fc-oneCardContentBlock {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
   min-width: 0;
 }
-.fcs-oneCardRight {
+.fc-oneCardRight {
   position: relative;
   min-width: 0;
   min-height: 0;
@@ -1888,11 +1883,11 @@
   box-sizing: border-box;
 }
 @media (max-width: 767px) {
-  .fcs-oneCardRight {
+  .fc-oneCardRight {
     padding: 0 var(--spacing-16);
   }
 }
-.fcs-oneCardImage {
+.fc-oneCardImage {
   display: block;
   width: 100%;
   height: auto;
@@ -1901,10 +1896,10 @@
   object-position: center bottom;
 }
 @media (min-width: 768px) {
-  .fcs-oneCardRight {
+  .fc-oneCardRight {
     padding: 0;
   }
-  .fcs-oneCardImage {
+  .fc-oneCardImage {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -1914,12 +1909,82 @@
   }
 }
 
-/* templates/FeatureBullets/FeatureBullets.module.css */
-.section {
+/* templates/FeatureCardsIcon/FeatureCardsIcon.css */
+.fci-section {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.container {
+.fci-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .fci-container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.fci-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .fci-header {
+    align-items: center;
+    text-align: center;
+  }
+}
+.fci-sectionTitle {
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  color: var(--text-primary);
+  margin: 0;
+}
+.fci-sectionDescription {
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--color-slate-1200);
+  margin: 0;
+  max-width: 640px;
+}
+.fci-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .fci-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .fci-grid--3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .fci-grid--4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* templates/FeatureBullets/FeatureBullets.css */
+.feature-bullets {
+  width: 100%;
+  background-color: var(--color-slate-50);
+}
+.feature-bullets__container {
   display: flex;
   flex-direction: column;
   max-width: var(--content-width-1280);
@@ -1929,11 +1994,11 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .container {
+  .feature-bullets__container {
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
-.split {
+.feature-bullets__split {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1941,16 +2006,16 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .split {
+  .feature-bullets__split {
     flex-direction: row;
     align-items: center;
     gap: 8rem;
   }
-  .split--image-left {
+  .feature-bullets__split--image-left {
     flex-direction: row-reverse;
   }
 }
-.content {
+.feature-bullets__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -1958,13 +2023,13 @@
   width: 100%;
 }
 @media (min-width: 992px) {
-  .content {
+  .feature-bullets__content {
     gap: var(--spacing-32);
     width: 540px;
     flex-shrink: 0;
   }
 }
-.title {
+.feature-bullets__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -1972,26 +2037,26 @@
   color: var(--text-primary);
   margin: 0;
 }
-.bulletList {
+.feature-bullets__bullet-list {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.bulletItem {
+.feature-bullets__bullet-item {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-16);
   padding: var(--spacing-16) 0;
   border-bottom: 1px solid var(--color-slate-100);
 }
-.bulletItem:first-child {
+.feature-bullets__bullet-item:first-child {
   padding-top: 0;
 }
-.bulletItem:last-child {
+.feature-bullets__bullet-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }
-.iconWrapper {
+.feature-bullets__icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2001,12 +2066,12 @@
   color: var(--color-slate-1200);
   margin-top: 2px;
 }
-.icon {
+.feature-bullets__icon {
   width: 100%;
   height: 100%;
   display: block;
 }
-.bulletText {
+.feature-bullets__bullet-text {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -2014,7 +2079,7 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.imageWrapper {
+.feature-bullets__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-2xl);
@@ -2024,13 +2089,13 @@
   background-color: transparent;
 }
 @media (min-width: 992px) {
-  .imageWrapper {
+  .feature-bullets__image-wrapper {
     flex: 1 0 0;
     width: auto;
     border-radius: 2rem;
   }
 }
-.image {
+.feature-bullets__image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -2099,16 +2164,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   color: var(--footer-social-icon-color);
   text-decoration: none;
   flex-shrink: 0;
   overflow: hidden;
 }
 .footer__social-icon svg {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   display: block;
 }
 .footer__social-icon:hover {
@@ -2148,8 +2213,8 @@
   gap: var(--spacing-8);
 }
 .footer__ai-icon {
-  width: 24px;
-  height: 24px;
+  width: 32px;
+  height: 32px;
   border-radius: var(--radius-md);
   display: block;
   object-fit: cover;
@@ -2367,7 +2432,7 @@
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-normal);
   color: var(--color-slate-50);
-  margin: 0;
+  margin: var(--spacing-8) 0 0 0;
 }
 .footer__investors-card {
   background-color: var(--footer-surface);
@@ -2512,28 +2577,38 @@
   .footer__legal-block {
     align-items: flex-start;
   }
+  .footer__social-icon {
+    width: 24px;
+    height: 24px;
+  }
+  .footer__social-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+  .footer__ai-icon {
+    width: 24px;
+    height: 24px;
+  }
 }
 
 /* templates/Hero/Hero.css */
 :root {
   --hero-dark-bg: var(--color-slate-1200);
-  --hero-light-bg: var(--color-slate-75);
   --hero-text-light: var(--color-slate-50);
-  --hero-text-dark: var(--text-primary);
   --hero-subtitle-size: var(--typography-body-md-font-size);
   --hero-subtitle-lh: var(--typography-body-md-line-height);
   --hero-subtitle-weight: var(--font-weight-semi-bold);
-  --hero-title-size-mobile: var(--typography-h1-font-size);
-  --hero-title-lh-mobile: var(--typography-h1-line-height);
+  --hero-title-size: var(--typography-h1-font-size);
+  --hero-title-lh: var(--typography-h1-line-height);
   --hero-body-size: var(--typography-body-md-font-size);
   --hero-body-lh: var(--typography-body-md-line-height);
-  --hero-primary-padding-top-mobile: var(--spacing-80);
-  --hero-primary-padding-top-tablet: var(--spacing-96);
-  --hero-primary-padding-top-desktop: var(--spacing-96);
-  --hero-secondary-shrink-radius: 3.5rem;
-  --hero-secondary-padding-top-mobile: var(--spacing-80);
-  --hero-secondary-padding-top-tablet: var(--spacing-96);
-  --hero-secondary-padding-top-desktop: var(--spacing-112);
+  --hero-split-padding-top-mobile: var(--spacing-80);
+  --hero-split-padding-top-tablet: var(--spacing-96);
+  --hero-split-padding-top-desktop: var(--spacing-96);
+  --hero-shrink-radius: 3.5rem;
+  --hero-padding-top-mobile: var(--spacing-80);
+  --hero-padding-top-tablet: var(--spacing-96);
+  --hero-padding-top-desktop: var(--spacing-112);
 }
 .hero {
   position: relative;
@@ -2541,17 +2616,13 @@
   font-family: var(--font-family-base);
   box-sizing: border-box;
   overflow: hidden;
-}
-.hero__bg-image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  pointer-events: none;
-  display: block;
-  z-index: 0;
+  background-color: var(--hero-dark-bg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 100vh;
+  display: flex;
+  align-items: flex-start;
 }
 .hero__overlay {
   position: absolute;
@@ -2577,19 +2648,23 @@
   font-size: var(--hero-subtitle-size);
   font-weight: var(--hero-subtitle-weight);
   line-height: var(--hero-subtitle-lh);
+  color: var(--hero-text-light);
   margin: 0;
 }
 .hero__title {
-  font-size: var(--hero-title-size-mobile);
+  font-size: var(--hero-title-size);
   font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
+  line-height: var(--hero-title-lh);
+  color: var(--hero-text-light);
   margin: 0;
 }
 .hero__description {
   font-size: var(--hero-body-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--hero-body-lh);
+  color: var(--hero-text-light);
   margin: 0;
+  opacity: 0.8;
 }
 .hero__buttons {
   display: flex;
@@ -2604,14 +2679,6 @@
   gap: var(--spacing-24);
 }
 .hero--split {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-split-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2623,8 +2690,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2681,35 +2748,14 @@
   height: 100%;
   display: block;
 }
-.hero--split .hero__subtitle,
-.hero--split .hero__title,
-.hero--split .hero__description {
-  color: var(--hero-text-light);
-}
 .hero--split .hero__subtitle {
   font-size: var(--typography-h4-font-size);
   line-height: var(--typography-h4-line-height);
 }
-.hero--split .hero__title {
-  font-size: var(--typography-h1-font-size);
-  line-height: var(--typography-h1-line-height);
-}
-.hero--split .hero__description {
-  font-size: var(--typography-body-md-font-size);
-  line-height: var(--typography-body-md-line-height);
-}
 .hero--split .hero__buttons {
   align-items: stretch;
 }
 .hero--centered {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-centered-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2721,8 +2767,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2741,7 +2787,7 @@
   justify-content: center;
   width: 100%;
   height: calc(100vh - 16px);
-  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-top: var(--hero-padding-top-mobile);
   padding-bottom: 0;
 }
 .hero--centered .hero__content {
@@ -2763,28 +2809,6 @@
   max-width: 640px;
   width: 100%;
 }
-.hero--centered .hero__subtitle {
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--typography-h2-font-weight);
-  line-height: var(--hero-subtitle-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--centered .hero__title {
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--centered .hero__description {
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-  opacity: 0.8;
-}
 .hero--centered .hero__buttons {
   display: flex;
   flex-direction: column;
@@ -2793,130 +2817,7 @@
   width: 100%;
   justify-content: center;
 }
-.hero--visuals,
-.hero--minimal {
-  background-color: var(--hero-light-bg);
-  min-height: 540px;
-  display: flex;
-  align-items: center;
-}
-.hero--visuals .hero__grid,
-.hero--minimal .hero__grid {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23cfd4d8' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 40px 40px;
-}
-.hero--visuals .hero__overlay,
-.hero--minimal .hero__overlay {
-  background:
-    linear-gradient(
-      to right,
-      var(--hero-light-bg) 0%,
-      rgba(246, 247, 248, 0) 18%,
-      rgba(246, 247, 248, 0) 82%,
-      var(--hero-light-bg) 100%),
-    linear-gradient(
-      to bottom,
-      var(--hero-light-bg) 0%,
-      rgba(246, 247, 248, 0) 30%,
-      rgba(246, 247, 248, 0) 70%,
-      var(--hero-light-bg) 100%);
-}
-.hero--visuals .hero__inner,
-.hero--minimal .hero__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: var(--spacing-32);
-  padding-bottom: var(--spacing-32);
-  min-height: 540px;
-}
-.hero--visuals .hero__content,
-.hero--minimal .hero__content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-32);
-  width: 100%;
-  text-align: left;
-}
-.hero--visuals .hero__text,
-.hero--minimal .hero__text {
-  align-items: flex-start;
-  max-width: var(--content-width-846);
-}
-.hero--visuals .hero__subtitle,
-.hero--minimal .hero__subtitle {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--hero-subtitle-weight);
-  line-height: var(--hero-subtitle-lh);
-}
-.hero--visuals .hero__title,
-.hero--minimal .hero__title {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-}
-.hero--visuals .hero__description,
-.hero--minimal .hero__description {
-  color: var(--hero-text-dark);
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-}
-.hero--visuals .hero__buttons,
-.hero--minimal .hero__buttons {
-  align-items: stretch;
-  justify-content: flex-start;
-  flex-direction: column;
-  width: 100%;
-}
-.hero__visual {
-  position: absolute;
-  z-index: 1;
-  overflow: hidden;
-  pointer-events: none;
-}
-.hero__visual img,
-.hero__visual > * {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
-}
-.hero__visual--left {
-  width: 160px;
-  height: 160px;
-  top: calc(50% - 80px);
-  left: -20px;
-  bottom: auto;
-  will-change: transform;
-}
-.hero__visual--right {
-  width: 160px;
-  height: 160px;
-  top: calc(50% - 80px);
-  right: -20px;
-  bottom: auto;
-  will-change: transform;
-}
 .hero--showcase {
-  background-color: var(--hero-dark-bg);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  height: 100vh;
-  display: flex;
-  align-items: flex-start;
-  overflow: hidden;
   animation: hero-showcase-shrink linear both;
   animation-timeline: view();
   animation-range: exit 0% exit 40%;
@@ -2928,8 +2829,8 @@
     scale: 1;
   }
   100% {
-    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
-    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-left-radius: var(--hero-shrink-radius);
+    border-bottom-right-radius: var(--hero-shrink-radius);
     scale: 0.94;
   }
 }
@@ -2948,7 +2849,7 @@
   justify-content: center;
   width: 100%;
   height: calc(100vh - 16px);
-  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-top: var(--hero-padding-top-mobile);
   padding-bottom: 0;
 }
 .hero--showcase .hero__content {
@@ -2969,28 +2870,6 @@
   max-width: 640px;
   width: 100%;
 }
-.hero--showcase .hero__subtitle {
-  font-size: var(--hero-subtitle-size);
-  font-weight: var(--typography-h2-font-weight);
-  line-height: var(--hero-subtitle-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--showcase .hero__title {
-  font-size: var(--hero-title-size-mobile);
-  font-weight: var(--typography-h1-font-weight);
-  line-height: var(--hero-title-lh-mobile);
-  color: var(--hero-text-light);
-  margin: 0;
-}
-.hero--showcase .hero__description {
-  font-size: var(--hero-body-size);
-  font-weight: var(--typography-body-md-font-weight);
-  line-height: var(--hero-body-lh);
-  color: var(--hero-text-light);
-  margin: 0;
-  opacity: 0.8;
-}
 .hero--showcase .hero__buttons {
   display: flex;
   flex-direction: column;
@@ -3037,14 +2916,19 @@
     padding: var(--spacing-40) var(--spacing-24);
   }
   .hero--split .hero__inner {
-    padding-top: var(--hero-primary-padding-top-tablet);
+    padding-top: var(--hero-split-padding-top-tablet);
     padding-bottom: var(--spacing-40);
     padding-left: var(--spacing-24);
     padding-right: var(--spacing-24);
     justify-content: flex-end;
   }
+  .hero--split .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
   .hero--centered .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-tablet);
+    padding-top: var(--hero-padding-top-tablet);
     padding-bottom: 0;
   }
   .hero--centered .hero__content {
@@ -3061,33 +2945,8 @@
     max-width: none;
     width: auto;
   }
-  .hero--split .hero__buttons {
-    flex-direction: row;
-    align-items: center;
-    width: auto;
-  }
-  .hero--visuals .hero__inner,
-  .hero--minimal .hero__inner {
-    align-items: center;
-  }
-  .hero--visuals .hero__content,
-  .hero--minimal .hero__content {
-    align-items: center;
-    text-align: center;
-  }
-  .hero--visuals .hero__text,
-  .hero--minimal .hero__text {
-    align-items: center;
-  }
-  .hero--visuals .hero__buttons,
-  .hero--minimal .hero__buttons {
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: auto;
-  }
   .hero--showcase .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-tablet);
+    padding-top: var(--hero-padding-top-tablet);
     padding-bottom: 0;
   }
   .hero--showcase .hero__content {
@@ -3117,7 +2976,7 @@
   }
   .hero--split .hero__inner {
     max-width: var(--content-width-1280);
-    padding-top: var(--hero-primary-padding-top-desktop);
+    padding-top: var(--hero-split-padding-top-desktop);
     padding-bottom: var(--spacing-96);
     padding-left: var(--spacing-32);
     padding-right: var(--spacing-32);
@@ -3178,7 +3037,7 @@
         var(--color-opacity-slate-24) 100%);
   }
   .hero--centered .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-top: var(--hero-padding-top-desktop);
     padding-bottom: 0;
   }
   .hero--centered .hero__text {
@@ -3190,43 +3049,8 @@
     justify-content: center;
     width: auto;
   }
-  .hero--visuals .hero__buttons,
-  .hero--minimal .hero__buttons {
-    flex-direction: row;
-    width: auto;
-  }
-  .hero--visuals .hero__inner,
-  .hero--minimal .hero__inner {
-    position: relative;
-  }
-  .hero__visuals-wrapper {
-    flex-direction: row;
-    justify-content: center;
-    position: relative;
-  }
-  .hero--visuals .hero__visual--left {
-    width: 241px;
-    height: 241px;
-    top: calc(50% - 120px);
-    left: 48px;
-    bottom: auto;
-    right: auto;
-  }
-  .hero--visuals .hero__visual--right {
-    width: 241px;
-    height: 241px;
-    top: calc(50% - 120px);
-    right: 48px;
-    bottom: auto;
-    left: auto;
-  }
-  .hero--visuals .hero__content,
-  .hero--minimal .hero__content {
-    max-width: var(--content-width-846);
-    width: 100%;
-  }
   .hero--showcase .hero__inner {
-    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-top: var(--hero-padding-top-desktop);
     padding-bottom: 0;
   }
   .hero--showcase .hero__text {
@@ -3257,6 +3081,202 @@
   }
 }
 
+/* templates/Header/Header.css */
+:root {
+  --header-light-bg: var(--color-slate-75);
+  --header-text-dark: var(--text-primary);
+  --header-subtitle-size: var(--typography-body-md-font-size);
+  --header-subtitle-lh: var(--typography-body-md-line-height);
+  --header-subtitle-weight: var(--font-weight-semi-bold);
+  --header-title-size: var(--typography-h1-font-size);
+  --header-title-lh: var(--typography-h1-line-height);
+  --header-body-size: var(--typography-body-md-font-size);
+  --header-body-lh: var(--typography-body-md-line-height);
+}
+.header {
+  position: relative;
+  width: 100%;
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--header-light-bg);
+  min-height: 540px;
+  display: flex;
+  align-items: center;
+}
+.header__grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M 64 0 L 0 0 0 64' fill='none' stroke='%23cfd4d8' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 64px 64px;
+}
+.header__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background:
+    linear-gradient(
+      to right,
+      var(--header-light-bg) 0%,
+      rgba(246, 247, 248, 0) 18%,
+      rgba(246, 247, 248, 0) 82%,
+      var(--header-light-bg) 100%),
+    linear-gradient(
+      to bottom,
+      var(--header-light-bg) 0%,
+      rgba(246, 247, 248, 0) 30%,
+      rgba(246, 247, 248, 0) 70%,
+      var(--header-light-bg) 100%);
+}
+.header__inner {
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  max-width: var(--content-width-1280);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: var(--spacing-24) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  min-height: 540px;
+}
+.header__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-32);
+  width: 100%;
+  text-align: left;
+}
+.header__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}
+.header__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  align-items: flex-start;
+  max-width: var(--content-width-846);
+}
+.header__subtitle {
+  font-size: var(--header-subtitle-size);
+  font-weight: var(--header-subtitle-weight);
+  line-height: var(--header-subtitle-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__title {
+  font-size: var(--header-title-size);
+  font-weight: var(--typography-h1-font-weight);
+  line-height: var(--header-title-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__description {
+  font-size: var(--header-body-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--header-body-lh);
+  color: var(--header-text-dark);
+  margin: 0;
+}
+.header__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: 100%;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.header__visual {
+  position: absolute;
+  z-index: 1;
+  overflow: hidden;
+  pointer-events: none;
+}
+.header__visual img,
+.header__visual > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+.header__visual--left {
+  width: 160px;
+  height: 160px;
+  top: -20px;
+  left: -20px;
+  bottom: auto;
+  right: auto;
+  will-change: transform;
+}
+.header__visual--right {
+  width: 160px;
+  height: 160px;
+  bottom: -20px;
+  right: -20px;
+  top: auto;
+  left: auto;
+  will-change: transform;
+}
+@media (min-width: 768px) {
+  .header__inner {
+    padding: var(--spacing-40) var(--spacing-24);
+    align-items: center;
+  }
+  .header__content {
+    align-items: center;
+    text-align: center;
+  }
+  .header__text {
+    align-items: center;
+  }
+  .header__buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+  }
+}
+@media (min-width: 992px) {
+  .header__inner {
+    padding: var(--spacing-48) var(--spacing-32);
+    position: relative;
+  }
+  .header__content {
+    max-width: var(--content-width-846);
+    width: 100%;
+  }
+  .header__buttons {
+    flex-direction: row;
+    width: auto;
+  }
+  .header--visuals .header__visual--left {
+    width: 241px;
+    height: 241px;
+    top: 48px;
+    left: 48px;
+    bottom: auto;
+    right: auto;
+  }
+  .header--visuals .header__visual--right {
+    width: 241px;
+    height: 241px;
+    bottom: 48px;
+    right: 48px;
+    top: auto;
+    left: auto;
+  }
+}
+
 /* templates/Stats/Stats.css */
 :root {
   --stats-bg: var(--color-slate-50);
@@ -6000,9 +6020,10 @@
   text-align: center;
 }
 .tbl-section__title {
-  font-size: var(--typography-h2-font-size, 2.5rem);
-  font-weight: var(--typography-h2-font-weight, 800);
-  line-height: var(--typography-h2-line-height, 1.2);
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
   color: var(--tbl-text);
   margin: 0;
 }
@@ -6010,7 +6031,7 @@
   width: 100%;
   background-color: var(--tbl-bg);
   font-family: var(--tbl-font-family);
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text);
   box-sizing: border-box;
   border-radius: var(--radius-xl);
@@ -6039,7 +6060,7 @@
   font-size: var(--typography-body-sm-font-size);
 }
 .tbl__summary {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text-muted);
   white-space: nowrap;
   flex-shrink: 0;
@@ -6115,7 +6136,7 @@
   align-items: flex-start;
 }
 .tbl__col-label {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   font-weight: var(--font-weight-semi-bold);
   color: var(--tbl-text);
   line-height: 1.4;
@@ -6150,7 +6171,7 @@
   visibility: visible;
 }
 .tbl__global-hint-desc {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-hint-text);
   line-height: 1.5;
 }
@@ -6177,7 +6198,7 @@
   display: block;
 }
 .tbl__cell-text {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text);
   line-height: 1.4;
   white-space: normal;
@@ -6215,7 +6236,7 @@
   height: 1rem;
 }
 .tbl-section__info-text {
-  font-size: var(--typography-body-xs-font-size, 0.75rem);
+  font-size: var(--typography-body-xs-font-size);
   color: var(--tbl-text-muted);
   line-height: 1.5;
   margin: 0;
@@ -6256,12 +6277,12 @@
   }
 }
 
-/* templates/Leaders/Leaders.module.css */
-.section {
+/* templates/Leaders/Leaders.css */
+.leaders {
   width: 100%;
   background-color: var(--color-slate-50);
 }
-.container {
+.leaders__container {
   display: flex;
   flex-direction: column;
   max-width: var(--content-width-1280);
@@ -6273,12 +6294,12 @@
   gap: var(--spacing-48);
 }
 @media (min-width: 992px) {
-  .container {
+  .leaders__container {
     padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-80);
   }
 }
-.header {
+.leaders__header {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -6286,7 +6307,7 @@
   width: 100%;
   max-width: var(--content-width-846);
 }
-.title {
+.leaders__title {
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -6294,38 +6315,38 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.gridWrapper {
+.leaders__grid-wrapper {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.grid {
+.leaders__grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--spacing-24);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .grid {
+  .leaders__grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .grid {
+  .leaders__grid {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--spacing-32);
   }
 }
-.extraCards {
+.leaders__extra-cards {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   width: 100%;
 }
-.extraCardsOpen {
+.leaders__extra-cards--open {
   grid-template-rows: 1fr;
 }
-.extraGrid {
+.leaders__extra-grid {
   min-height: 0;
   overflow: hidden;
   display: grid;
@@ -6334,27 +6355,27 @@
   padding-top: var(--spacing-24);
 }
 @media (min-width: 768px) {
-  .extraGrid {
+  .leaders__extra-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 @media (min-width: 992px) {
-  .extraGrid {
+  .leaders__extra-grid {
     grid-template-columns: repeat(4, 1fr);
     gap: var(--spacing-32);
     padding-top: var(--spacing-32);
   }
 }
-.extraCard {
+.leaders__extra-card {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }
-.extraCardVisible {
+.leaders__extra-card--visible {
   opacity: 1;
   transform: translateY(0);
 }
-.card {
+.leaders__card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -6363,7 +6384,7 @@
   border-radius: var(--radius-2xl);
   width: 100%;
 }
-.imageWrapper {
+.leaders__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: var(--radius-2xl);
@@ -6371,7 +6392,7 @@
   position: relative;
   background-color: var(--color-slate-100);
 }
-.image {
+.leaders__image {
   position: absolute;
   inset: 0;
   width: 100%;
@@ -6380,14 +6401,14 @@
   object-position: center;
   display: block;
 }
-.content {
+.leaders__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--spacing-8);
   width: 100%;
 }
-.name {
+.leaders__name {
   font-family: var(--typography-h5-font-family);
   font-size: var(--typography-h5-font-size);
   font-weight: var(--typography-h5-font-weight);
@@ -6395,7 +6416,7 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.role {
+.leaders__role {
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
@@ -6403,16 +6424,16 @@
   color: var(--color-slate-1200);
   margin: 0;
 }
-.link {
+.leaders__link {
   margin-top: calc(var(--spacing-8) * -1);
 }
-.link :global(.icon) {
+.leaders__link .icon {
   color: #0072B1 !important;
 }
-.link:hover :global(.icon) {
+.leaders__link:hover .icon {
   color: #005582 !important;
 }
-.actions {
+.leaders__actions {
   display: flex;
   justify-content: center;
   width: 100%;