@deriv-web-design/ui 0.0.12 → 0.0.14

package/dist/index.css

@@ -221,7 +221,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--chip-border-color);
+  border: var(--chip-border-width) solid var(--chip-border-color);
   border-radius: var(--radius-full);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-regular);
@@ -264,10 +264,12 @@
 }
 .chip.selected {
   background-color: var(--chip-selected-background);
-  border-color: var(--chip-selected-background);
+  border-color: var(--chip-selected-border);
+  border-width: var(--chip-selected-border-width);
   color: var(--chip-selected-text);
 }
 .chip:disabled {
+  border-color: var(--chip-disabled-border);
   color: var(--chip-disabled-text);
   cursor: not-allowed;
 }
@@ -294,7 +296,7 @@
   pointer-events: none;
 }
 .chip.selected .focusRing {
-  inset: -2px;
+  inset: -3px;
 }
 .chip:focus-visible::after {
   content: "";
@@ -305,7 +307,7 @@
   pointer-events: none;
 }
 .chip.selected:focus-visible::after {
-  inset: -2px;
+  inset: -3px;
 }
 
 /* primitives/Tag/Tag.css */
@@ -1325,6 +1327,7 @@
   border-radius: var(--radius-2xl);
   overflow: hidden;
   flex-shrink: 0;
+  outline: 1px solid var(--border-subtle);
 }
 .card-thumbnail .ct-thumbnailImage {
   position: absolute;
@@ -1444,7 +1447,7 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-regular);
-  line-height: 1.375rem;
+  line-height: var(--line-height-sm);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
@@ -1472,7 +1475,7 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-regular);
-  line-height: 1.375rem;
+  line-height: var(--line-height-sm);
   user-select: none;
 }
 .pagination .navButton {
@@ -1525,7 +1528,7 @@
 }
 @media (min-width: 992px) {
   .fc-container {
-    padding: var(--spacing-112) var(--spacing-56);
+    padding: var(--spacing-112) var(--spacing-24);
   }
 }
 .fc-header {
@@ -1542,10 +1545,10 @@
   }
 }
 .fc-sectionTitle {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--line-height-4xl);
+  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(--color-slate-1200);
   margin: 0;
 }
@@ -1559,20 +1562,90 @@
   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);
+  }
+}
+
+/* templates/FeatureCardsSecondary/FeatureCardsSecondary.css */
+.fcs-section {
+  width: 100%;
+  background-color: var(--color-slate-50);
+}
+.fcs-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .fcs-container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.fcs-header {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  text-align: left;
+}
+@media (min-width: 768px) {
+  .fcs-header {
+    align-items: center;
+    text-align: center;
+  }
+}
+.fcs-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(--color-slate-1200);
+  margin: 0;
+}
+.fcs-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;
+}
+.fcs-grid {
+  display: grid;
+  grid-template-columns: 1fr;
   gap: var(--spacing-16);
   width: 100%;
 }
 @media (min-width: 768px) {
-  .fc-grid {
-    flex-direction: row;
+  .fcs-grid {
+    grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-24);
-    align-items: stretch;
   }
-  .fc-grid > * {
-    flex: 1 1 0;
-    min-width: 0;
+}
+@media (min-width: 992px) {
+  .fcs-grid--3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .fcs-grid--4 {
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 
@@ -2056,14 +2129,20 @@
   --hero-light-bg: var(--color-slate-75);
   --hero-text-light: var(--color-slate-50);
   --hero-text-dark: var(--color-slate-1200);
-  --hero-subtitle-size: var(--font-size-md);
-  --hero-subtitle-lh: var(--line-height-md);
-  --hero-title-size-mobile: var(--font-size-4xl);
-  --hero-title-lh-mobile: var(--line-height-4xl);
-  --hero-title-size: var(--font-size-5xl);
-  --hero-title-lh: var(--line-height-5xl);
-  --hero-body-size: var(--font-size-sm);
-  --hero-body-lh: var(--line-height-md);
+  --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-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 {
   position: relative;
@@ -2105,19 +2184,19 @@
 }
 .hero__subtitle {
   font-size: var(--hero-subtitle-size);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--hero-subtitle-weight);
   line-height: var(--hero-subtitle-lh);
   margin: 0;
 }
 .hero__title {
   font-size: var(--hero-title-size-mobile);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--typography-h1-font-weight);
   line-height: var(--hero-title-lh-mobile);
   margin: 0;
 }
 .hero__description {
   font-size: var(--hero-body-size);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--typography-body-md-font-weight);
   line-height: var(--hero-body-lh);
   margin: 0;
 }
@@ -2126,132 +2205,209 @@
   flex-direction: column;
   gap: var(--spacing-8);
   width: 100%;
+  align-items: stretch;
 }
 .hero__body {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
 }
-.hero--homepage {
+.hero--split {
   background-color: var(--hero-dark-bg);
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
   height: 100vh;
-  overflow: hidden;
   display: flex;
-  align-items: stretch;
+  align-items: flex-start;
+  overflow: hidden;
+  animation: hero-split-shrink linear both;
+  animation-timeline: view();
+  animation-range: exit 0% exit 40%;
+}
+@keyframes hero-split-shrink {
+  0% {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    scale: 1;
+  }
+  100% {
+    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    scale: 0.94;
+  }
 }
-.hero--homepage .hero__overlay {
+.hero--split .hero__overlay {
   background:
     linear-gradient(
       180deg,
-      var(--color-opacity-slate-16) 0%,
-      rgba(0, 0, 0, 0) 20%,
-      rgba(0, 0, 0, 0) 42%,
-      var(--color-opacity-slate-48) 60%,
-      var(--color-opacity-slate-72) 75%,
-      var(--color-opacity-slate-88) 100%);
+      transparent 0%,
+      transparent 30%,
+      var(--color-opacity-slate-48) 55%,
+      var(--color-opacity-slate-88) 75%,
+      var(--hero-dark-bg) 100%);
 }
-.hero--homepage .hero__inner {
+.hero--split .hero__inner {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
+  width: 100%;
   height: 100vh;
   padding-top: 0;
   padding-bottom: var(--spacing-40);
+  padding-left: var(--spacing-16);
+  padding-right: var(--spacing-16);
 }
-.hero--homepage .hero__content {
+.hero--split .hero__content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
   width: 100%;
 }
-.hero--homepage .hero__image-slot {
+.hero--split .hero__image-slot {
   position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 4;
-  width: 78%;
-  max-width: 380px;
-  height: auto;
-  display: flex;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  height: 80vh;
+  z-index: 1;
   overflow: visible;
   pointer-events: none;
 }
-.hero--homepage .hero__image-slot img {
+.hero--split .hero__image-slot img {
   width: 100%;
-  height: auto;
+  bottom: var(--spacing-40);
   object-fit: contain;
-  object-position: top center;
+  object-position: center bottom;
   display: block;
-  max-width: none;
-  max-height: none;
 }
-.hero--homepage .hero__image-slot > *:not(img) {
+.hero--split .hero__image-slot > *:not(img) {
   width: 100%;
-  height: auto;
+  height: 100%;
   display: block;
 }
-.hero--homepage .hero__subtitle,
-.hero--homepage .hero__title,
-.hero--homepage .hero__description {
+.hero--split .hero__subtitle,
+.hero--split .hero__title,
+.hero--split .hero__description {
   color: var(--hero-text-light);
 }
-.hero--homepage .hero__buttons {
+.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--full-image {
+.hero--centered {
   background-color: var(--hero-dark-bg);
-  min-height: 100vh;
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+  height: 100vh;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  overflow: hidden;
+  animation: hero-centered-shrink linear both;
+  animation-timeline: view();
+  animation-range: exit 0% exit 40%;
+}
+@keyframes hero-centered-shrink {
+  0% {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    scale: 1;
+  }
+  100% {
+    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    scale: 0.94;
+  }
 }
-.hero--full-image .hero__overlay {
+.hero--centered .hero__overlay {
   background:
     linear-gradient(
       180deg,
       var(--hero-dark-bg) 0%,
-      var(--color-opacity-slate-72) 40%,
-      rgba(24, 28, 37, 0) 100%);
+      var(--color-opacity-slate-88) 20%,
+      var(--color-opacity-slate-48) 45%,
+      transparent 70%);
 }
-.hero--full-image .hero__inner {
+.hero--centered .hero__inner {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  min-height: 100vh;
-  padding-top: var(--spacing-32);
-  padding-bottom: var(--spacing-32);
+  width: 100%;
+  height: calc(100vh - 16px);
+  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-bottom: 0;
 }
-.hero--full-image .hero__content {
+.hero--centered .hero__content {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-24);
   width: 100%;
-  text-align: center;
+  height: 100vh;
+  padding-bottom: var(--spacing-48);
+  text-align: left;
+  justify-content: flex-start;
 }
-.hero--full-image .hero__text {
-  align-items: center;
-  max-width: 840px;
+.hero--centered .hero__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  max-width: 640px;
+  width: 100%;
 }
-.hero--full-image .hero__subtitle,
-.hero--full-image .hero__title,
-.hero--full-image .hero__description {
+.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--full-image .hero__buttons {
-  align-items: center;
+.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;
+  gap: var(--spacing-12);
+  align-items: stretch;
+  width: 100%;
   justify-content: center;
 }
 .hero--visuals,
-.hero--text-only {
+.hero--minimal {
   background-color: var(--hero-light-bg);
   min-height: 540px;
   display: flex;
   align-items: center;
 }
 .hero--visuals .hero__grid,
-.hero--text-only .hero__grid {
+.hero--minimal .hero__grid {
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -2261,7 +2417,7 @@
   background-size: 40px 40px;
 }
 .hero--visuals .hero__overlay,
-.hero--text-only .hero__overlay {
+.hero--minimal .hero__overlay {
   background:
     linear-gradient(
       to right,
@@ -2277,42 +2433,56 @@
       var(--hero-light-bg) 100%);
 }
 .hero--visuals .hero__inner,
-.hero--text-only .hero__inner {
+.hero--minimal .hero__inner {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  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--text-only .hero__content {
+.hero--minimal .hero__content {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-32);
   width: 100%;
-  text-align: center;
+  text-align: left;
 }
 .hero--visuals .hero__text,
-.hero--text-only .hero__text {
-  align-items: center;
+.hero--minimal .hero__text {
+  align-items: flex-start;
   max-width: 846px;
 }
 .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--text-only .hero__subtitle,
-.hero--text-only .hero__title,
-.hero--text-only .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--text-only .hero__buttons {
-  align-items: center;
-  justify-content: center;
-  flex-direction: row;
+.hero--minimal .hero__buttons {
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+  width: 100%;
 }
 .hero__visual {
   position: absolute;
@@ -2330,112 +2500,306 @@
 .hero__visual--left {
   width: 160px;
   height: 160px;
-  top: -20px;
+  top: calc(50% - 80px);
   left: -20px;
+  bottom: auto;
+  will-change: transform;
 }
 .hero__visual--right {
   width: 160px;
   height: 160px;
-  bottom: -20px;
+  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 top;
+  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%;
+}
+@keyframes hero-showcase-shrink {
+  0% {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    scale: 1;
+  }
+  100% {
+    border-bottom-left-radius: var(--hero-secondary-shrink-radius);
+    border-bottom-right-radius: var(--hero-secondary-shrink-radius);
+    scale: 0.94;
+  }
+}
+.hero--showcase .hero__overlay {
+  background:
+    linear-gradient(
+      180deg,
+      var(--hero-dark-bg) 0%,
+      var(--color-opacity-slate-88) 20%,
+      var(--color-opacity-slate-48) 45%,
+      transparent 70%);
+}
+.hero--showcase .hero__inner {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  height: calc(100vh - 16px);
+  padding-top: var(--hero-secondary-padding-top-mobile);
+  padding-bottom: 0;
+}
+.hero--showcase .hero__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-24);
+  width: 100%;
+  height: 100vh;
+  padding-bottom: var(--spacing-48);
+  text-align: left;
+}
+.hero--showcase .hero__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  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;
+  gap: var(--spacing-12);
+  align-items: stretch;
+  width: 100%;
+}
+.hero--showcase .hero__product-image {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 17.5rem;
+  max-height: 50vh;
+  overflow: clip;
+  margin-top: auto;
+  margin-bottom: 8px;
+}
+.hero--showcase .hero__product-image img,
+.hero--showcase .hero__product-image > * {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+.hero--showcase .hero__floating-image {
+  width: 100%;
+  max-width: 160px;
+  margin-top: auto;
+  margin-bottom: var(--spacing-40);
+  aspect-ratio: 1 / 1;
+}
+.hero--showcase .hero__floating-image img,
+.hero--showcase .hero__floating-image > * {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
 }
 @media (min-width: 768px) {
   .hero__inner {
     padding: var(--spacing-40) var(--spacing-24);
   }
-  .hero--homepage .hero__inner,
-  .hero--full-image .hero__inner {
-    padding-top: var(--spacing-40);
+  .hero--split .hero__inner {
+    padding-top: var(--hero-primary-padding-top-tablet);
     padding-bottom: var(--spacing-40);
+    padding-left: var(--spacing-24);
+    padding-right: var(--spacing-24);
+    justify-content: flex-end;
   }
-  .hero--homepage .hero__buttons,
-  .hero--full-image .hero__buttons {
-    flex-direction: row;
-    align-items: center;
+  .hero--centered .hero__inner {
+    padding-top: var(--hero-secondary-padding-top-tablet);
+    padding-bottom: 0;
   }
-}
-@media (min-width: 992px) {
-  .hero__inner {
-    padding: var(--spacing-48) var(--spacing-32);
+  .hero--centered .hero__content {
+    align-items: center;
+    text-align: center;
   }
-  .hero__title {
-    font-size: var(--hero-title-size);
-    line-height: var(--hero-title-lh);
+  .hero--centered .hero__text {
+    align-items: center;
   }
-  .hero--homepage .hero__inner {
-    max-width: 1280px;
-    padding: var(--spacing-96) var(--spacing-32);
-    height: 100vh;
+  .hero--centered .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    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-bottom: 0;
+  }
+  .hero--showcase .hero__content {
+    align-items: center;
+    text-align: center;
+  }
+  .hero--showcase .hero__text {
+    align-items: center;
+  }
+  .hero--showcase .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    max-width: none;
+    width: auto;
+  }
+  .hero--showcase .hero__product-image {
+    max-width: 640px;
+  }
+  .hero--showcase .hero__floating-image {
+    max-width: 180px;
+  }
+}
+@media (min-width: 992px) {
+  .hero__inner {
+    padding: var(--spacing-48) var(--spacing-32);
+  }
+  .hero--split .hero__inner {
+    max-width: 1280px;
+    padding-top: var(--hero-primary-padding-top-desktop);
+    padding-bottom: var(--spacing-96);
+    padding-left: var(--spacing-32);
+    padding-right: var(--spacing-32);
+    height: 100vh;
     justify-content: center;
     align-items: flex-start;
   }
-  .hero--homepage .hero__content {
+  .hero--split .hero__content {
     flex-direction: column;
     gap: var(--spacing-32);
     max-width: 600px;
   }
-  .hero--homepage .hero__left {
+  .hero--split .hero__left {
     width: 100%;
   }
-  .hero--homepage .hero__body {
+  .hero--split .hero__body {
     gap: var(--spacing-32);
   }
-  .hero--homepage .hero__subtitle {
-    font-size: var(--font-size-2xl);
-    line-height: var(--line-height-xl);
-  }
-  .hero--homepage .hero__title {
-    font-size: var(--font-size-5xl);
-    line-height: var(--line-height-5xl);
+  .hero--split .hero__subtitle {
+    line-height: var(--typography-h5-line-height);
   }
-  .hero--homepage .hero__image-slot {
+  .hero--split .hero__image-slot {
     position: absolute;
-    top: 75px;
-    right: 0;
-    left: auto;
+    top: var(--spacing-72);
+    right: auto;
+    left: 50%;
     transform: none;
     z-index: 4;
     width: 50%;
     height: calc(100% - 5px);
     display: flex;
     align-items: flex-start;
-    justify-content: flex-start;
+    justify-content: center;
     overflow: visible;
     pointer-events: none;
     max-width: none;
   }
-  .hero--homepage .hero__image-slot img {
+  .hero--split .hero__image-slot img {
     height: 100%;
     width: auto;
     max-height: none;
     max-width: none;
     object-fit: contain;
-    object-position: left top;
+    object-position: center top;
   }
-  .hero--homepage .hero__buttons {
+  .hero--split .hero__buttons {
     flex-direction: row;
     align-items: center;
     width: auto;
     gap: var(--spacing-16);
   }
-  .hero--homepage .hero__overlay {
+  .hero--split .hero__overlay {
     background:
       linear-gradient(
         to right,
-        var(--color-slate-1200) 0%,
+        var(--hero-dark-bg) 0%,
         var(--color-opacity-slate-88) 40%,
         var(--color-opacity-slate-24) 100%);
   }
-  .hero--full-image .hero__text {
-    max-width: 840px;
+  .hero--centered .hero__inner {
+    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-bottom: 0;
   }
-  .hero--full-image .hero__buttons {
+  .hero--centered .hero__text {
+    max-width: 760px;
+  }
+  .hero--centered .hero__buttons {
     flex-direction: row;
     align-items: center;
+    justify-content: center;
+    width: auto;
+  }
+  .hero--visuals .hero__buttons,
+  .hero--minimal .hero__buttons {
+    flex-direction: row;
     width: auto;
   }
   .hero--visuals .hero__inner,
-  .hero--text-only .hero__inner {
+  .hero--minimal .hero__inner {
     position: relative;
   }
   .hero__visuals-wrapper {
@@ -2446,26 +2810,54 @@
   .hero--visuals .hero__visual--left {
     width: 241px;
     height: 241px;
-    top: 50%;
+    top: calc(50% - 120px);
     left: 48px;
     bottom: auto;
     right: auto;
-    transform: translateY(-50%);
   }
   .hero--visuals .hero__visual--right {
     width: 241px;
     height: 241px;
-    top: 50%;
+    top: calc(50% - 120px);
     right: 48px;
     bottom: auto;
     left: auto;
-    transform: translateY(-50%);
   }
   .hero--visuals .hero__content,
-  .hero--text-only .hero__content {
+  .hero--minimal .hero__content {
     max-width: 846px;
     width: 100%;
   }
+  .hero--showcase .hero__inner {
+    padding-top: var(--hero-secondary-padding-top-desktop);
+    padding-bottom: 0;
+  }
+  .hero--showcase .hero__text {
+    max-width: 760px;
+  }
+  .hero--showcase .hero__product-image {
+    width: auto;
+    max-width: none;
+    height: 50vh;
+    max-height: none;
+    aspect-ratio: 1 / 1;
+    margin-bottom: 8vh;
+  }
+  .hero--showcase .hero__floating-image {
+    max-width: 200px;
+  }
+}
+@media (min-width: 1280px) {
+  .hero--showcase .hero__product-image {
+    width: auto;
+    max-width: none;
+    height: 50vh;
+    max-height: none;
+    aspect-ratio: 1 / 1;
+  }
+  .hero--showcase .hero__floating-image {
+    max-width: 220px;
+  }
 }
 
 /* templates/Stats/Stats.css */
@@ -2473,10 +2865,10 @@
   --stats-bg: var(--color-slate-50);
   --stats-card-bg: var(--color-slate-75);
   --stats-text-primary: var(--color-slate-1200);
-  --stats-title-size: var(--font-size-4xl);
-  --stats-title-lh: var(--line-height-4xl);
-  --stats-desc-size: var(--font-size-md);
-  --stats-desc-lh: var(--line-height-md);
+  --stats-title-size: var(--typography-h2-font-size);
+  --stats-title-lh: var(--typography-h2-line-height);
+  --stats-desc-size: var(--typography-body-md-font-size);
+  --stats-desc-lh: var(--typography-body-md-line-height);
   --stats-value-size: var(--font-size-3xl);
   --stats-value-lh: var(--line-height-3xl);
   --stats-value-featured-size: var(--font-size-5xl);
@@ -2576,7 +2968,7 @@
 .stats__stat--active .stats__stat-value {
   font-size: var(--stats-value-featured-size);
   line-height: var(--stats-value-featured-lh);
-  font-weight: 900;
+  font-weight: var(--font-weight-extra-bold);
 }
 .stats__stat--inactive .stats__stat-value {
   font-size: var(--stats-value-size);
@@ -2700,28 +3092,20 @@
   --scrolly-link-color: var(--color-coral-500);
   --scrolly-link-hover: var(--color-coral-600);
   --scrolly-media-bg: var(--color-slate-200);
-  --scrolly-header-size: var(--font-size-3xl);
-  --scrolly-header-lh: var(--line-height-3xl);
-  --scrolly-title-size: var(--font-size-2xl);
-  --scrolly-title-lh: var(--line-height-2xl);
-  --scrolly-body-size: var(--font-size-md);
-  --scrolly-body-lh: var(--line-height-md);
-  --scrolly-link-size: var(--font-size-md);
-  --scrolly-link-lh: var(--line-height-sm);
+  --scrolly-header-size: var(--typography-h2-font-size);
+  --scrolly-header-lh: var(--typography-h2-line-height);
+  --scrolly-title-size: var(--typography-h3-font-size);
+  --scrolly-title-lh: var(--typography-h3-line-height);
+  --scrolly-body-size: var(--typography-body-md-font-size);
+  --scrolly-body-lh: var(--typography-body-md-line-height);
+  --scrolly-link-size: var(--typography-link-md-font-size);
+  --scrolly-link-lh: var(--typography-link-md-line-height);
   --scrolly-col-gap: var(--spacing-112);
   --scrolly-media-radius: var(--radius-2xl);
   --scrolly-mobile-radius: var(--radius-2xl);
   --scrolly-item-min-height: 60vh;
   --scrolly-sticky-top: var(--spacing-80);
 }
-@media (min-width: 992px) {
-  :root {
-    --scrolly-header-size: var(--font-size-4xl);
-    --scrolly-header-lh: var(--line-height-4xl);
-    --scrolly-title-size: var(--font-size-3xl);
-    --scrolly-title-lh: var(--line-height-3xl);
-  }
-}
 .scrolly {
   width: 100%;
   background-color: var(--scrolly-bg);
@@ -2731,7 +3115,7 @@
 .scrolly__inner {
   max-width: 1280px;
   margin: 0 auto;
-  padding: var(--spacing-48) var(--spacing-16);
+  padding: var(--spacing-56) var(--spacing-16);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-32);
@@ -2814,7 +3198,7 @@
 }
 @media (min-width: 768px) {
   .scrolly__inner {
-    padding: var(--spacing-64) var(--spacing-24);
+    padding: var(--spacing-56) var(--spacing-24);
     gap: var(--spacing-40);
   }
 }
@@ -2823,7 +3207,7 @@
     text-align: center;
   }
   .scrolly__inner {
-    padding: var(--spacing-88) var(--spacing-32);
+    padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-56);
   }
   .scrolly__layout {
@@ -2904,35 +3288,40 @@
 /* templates/StickyStackedCards/StickyStackedCards.css */
 :root {
   --ssc-bg: var(--color-slate-50);
+  --ssc-font-family: var(--font-family-base);
+  --ssc-header-color: var(--color-slate-1200);
   --ssc-card-light-bg: var(--color-slate-75);
   --ssc-card-light-text: var(--color-slate-1200);
   --ssc-card-coral-bg: var(--color-coral-500);
   --ssc-card-coral-text: var(--color-slate-50);
   --ssc-card-dark-bg: var(--color-slate-1200);
   --ssc-card-dark-text: var(--color-slate-50);
-  --ssc-header-size: var(--font-size-4xl);
-  --ssc-header-lh: var(--line-height-4xl);
-  --ssc-title-size: var(--font-size-3xl);
-  --ssc-title-lh: var(--line-height-3xl);
-  --ssc-body-size: var(--font-size-md);
-  --ssc-body-lh: var(--line-height-md);
+  --ssc-header-size: var(--typography-h2-font-size);
+  --ssc-header-lh: var(--typography-h2-line-height);
+  --ssc-header-weight: var(--typography-h2-font-weight);
+  --ssc-title-size: var(--typography-h3-font-size);
+  --ssc-title-lh: var(--typography-h3-line-height);
+  --ssc-title-weight: var(--typography-h3-font-weight);
+  --ssc-body-size: var(--typography-body-md-font-size);
+  --ssc-body-lh: var(--typography-body-md-line-height);
+  --ssc-body-weight: var(--typography-body-md-font-weight);
   --ssc-card-radius: var(--radius-2xl);
   --ssc-content-gap: var(--spacing-24);
   --ssc-sticky-top: var(--spacing-80);
   --ssc-peek-offset: var(--spacing-16);
-  --ssc-card-min-height: 40rem;
+  --ssc-card-min-height: 60vh;
   --ssc-img-height-mobile: 21rem;
 }
 .ssc {
   width: 100%;
   background-color: var(--ssc-bg);
-  font-family: var(--font-family-base);
+  font-family: var(--ssc-font-family);
   box-sizing: border-box;
 }
 .ssc__inner {
   max-width: 1280px;
   margin: 0 auto;
-  padding: var(--spacing-64) var(--spacing-16);
+  padding: var(--spacing-56) var(--spacing-16);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-48);
@@ -2940,9 +3329,9 @@
 }
 .ssc__header {
   font-size: var(--ssc-header-size);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--ssc-header-weight);
   line-height: var(--ssc-header-lh);
-  color: var(--ssc-card-light-text);
+  color: var(--ssc-header-color);
   margin: 0;
 }
 .ssc__track {
@@ -2956,12 +3345,16 @@
   flex-direction: column;
   box-sizing: border-box;
   width: 100%;
+  margin-bottom: var(--ssc-peek-offset);
   position: sticky;
   transform: scale(var(--card-scale, 1));
   transform-origin: top center;
   will-change: transform;
   transition: transform 0.12s ease-out;
 }
+.ssc__card:last-child {
+  margin-bottom: 0;
+}
 .ssc__card--light {
   background-color: var(--ssc-card-light-bg);
   color: var(--ssc-card-light-text);
@@ -2982,14 +3375,14 @@
 }
 .ssc__card-title {
   font-size: var(--ssc-title-size);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--ssc-title-weight);
   line-height: var(--ssc-title-lh);
   color: inherit;
   margin: 0;
 }
 .ssc__card-desc {
   font-size: var(--ssc-body-size);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--ssc-body-weight);
   line-height: var(--ssc-body-lh);
   color: inherit;
   margin: 0;
@@ -3010,7 +3403,7 @@
 }
 @media (min-width: 768px) {
   .ssc__inner {
-    padding: var(--spacing-80) var(--spacing-24);
+    padding: var(--spacing-56) var(--spacing-24);
     gap: var(--spacing-64);
   }
   .ssc__header {
@@ -3019,7 +3412,7 @@
 }
 @media (min-width: 992px) {
   .ssc__inner {
-    padding: var(--spacing-112) var(--spacing-64);
+    padding: var(--spacing-112) var(--spacing-24);
     gap: var(--spacing-80);
   }
   .ssc__track {
@@ -3032,7 +3425,7 @@
     min-height: var(--ssc-card-min-height);
   }
   .ssc__card-content {
-    padding: var(--spacing-56);
+    padding: var(--spacing-56) var(--spacing-24);
     justify-content: flex-start;
     align-self: stretch;
   }
@@ -3182,10 +3575,10 @@
 }
 .ctab__headline {
   margin: 0;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-5xl);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--line-height-5xl);
+  font-family: var(--typography-h1-font-family);
+  font-size: var(--typography-h1-font-size);
+  font-weight: var(--typography-h1-font-weight);
+  line-height: var(--typography-h1-line-height);
   color: var(--color-slate-50);
 }
 .ctab__avatar {
@@ -3368,6 +3761,106 @@
 .navbar--dark .navbar__pill .navbar__lang-globe {
   filter: brightness(0) invert(1);
 }
+.navbar__lang-wrapper {
+  position: relative;
+}
+.navbar__lang-dropdown {
+  position: absolute;
+  top: calc(100% + var(--spacing-8));
+  left: calc(50% - 352px);
+  width: 704px;
+  background-color: var(--color-slate-50);
+  border: 1px solid var(--color-slate-100);
+  border-radius: var(--navbar-dropdown-radius);
+  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.04), 0px -14px 16px 2px rgba(0, 0, 0, 0.02);
+  padding: var(--spacing-24) var(--spacing-32);
+  z-index: var(--navbar-z-dropdown);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.navbar__lang-dropdown-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--lang-rows, 7), auto);
+  gap: 0;
+}
+.navbar__lang-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-8) 0;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+  transition: color 120ms ease;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.navbar__lang-dropdown-item:hover {
+  color: #ff444f;
+}
+.navbar__lang-dropdown-item--active {
+  color: #ff444f;
+  font-weight: var(--font-weight-semi-bold);
+}
+.navbar__drawer-lang-panel {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-slate-50);
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--spacing-24);
+  overflow-y: auto;
+  z-index: 1;
+}
+.navbar__drawer-lang-back {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  background: transparent;
+  color: var(--color-slate-1200);
+  cursor: pointer;
+  padding: 0;
+  margin: var(--spacing-8) 0;
+  flex-shrink: 0;
+}
+.navbar__drawer-lang-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+  padding: var(--spacing-8) 0 var(--spacing-16);
+}
+.navbar__drawer-lang-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-12) 0;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+.navbar__drawer-lang-item:hover {
+  color: #ff444f;
+}
+.navbar__drawer-lang-item--active {
+  color: #ff444f;
+  font-weight: var(--font-weight-semi-bold);
+}
 .navbar__actions {
   grid-column: 3;
   grid-row: 1;
@@ -3683,8 +4176,8 @@
   background-color: var(--color-slate-50);
 }
 .navbar__drawer-panel-cols {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: var(--spacing-16);
 }
 .navbar__drawer-panel-col {
@@ -3893,9 +4386,9 @@
 
 /* templates/DayNightTransition/DayNightTransition.css */
 :root {
-  --dnt-headline-size: var(--font-size-4xl);
-  --dnt-headline-lh: var(--line-height-4xl);
-  --dnt-headline-weight: var(--font-weight-extra-bold);
+  --dnt-headline-size: var(--typography-h2-font-size);
+  --dnt-headline-lh: var(--typography-h2-line-height);
+  --dnt-headline-weight: var(--typography-h2-font-weight);
   --dnt-text-day: var(--color-slate-1400);
   --dnt-text-night: var(--color-slate-50);
   --dnt-btn-bg: var(--color-coral-500);
@@ -3909,17 +4402,17 @@
   --dnt-btn-weight: var(--font-weight-extra-bold);
   --dnt-wrapper-height: 250vh;
   --dnt-content-max-width: 37.5rem;
-  --dnt-content-py: var(--spacing-80);
+  --dnt-content-py: var(--spacing-56);
   --dnt-content-px: var(--spacing-16);
-  --dnt-desc-size: var(--font-size-md);
-  --dnt-desc-lh: var(--line-height-md);
-  --dnt-desc-weight: var(--font-weight-regular);
+  --dnt-desc-size: var(--typography-body-md-font-size);
+  --dnt-desc-lh: var(--typography-body-md-line-height);
+  --dnt-desc-weight: var(--typography-body-md-font-weight);
   --dnt-gap: var(--spacing-16);
 }
 @media (min-width: 992px) {
   :root {
-    --dnt-content-py: var(--spacing-96);
-    --dnt-content-px: var(--spacing-48);
+    --dnt-content-py: var(--spacing-112);
+    --dnt-content-px: var(--spacing-24);
   }
 }
 .dnt {
@@ -4016,75 +4509,75 @@
   background-color: var(--dnt-btn-bg-hover);
 }
 
-/* templates/PaymentMethods/PaymentMethods.css */
+/* templates/LogoMarquee/LogoMarquee.css */
 :root {
-  --pm-bg: var(--color-slate-1200);
-  --pm-section-py: var(--spacing-96);
-  --pm-section-px: var(--spacing-48);
-  --pm-section-height: 50rem;
-  --pm-max-width: 80rem;
-  --pm-layout-gap: var(--spacing-112);
-  --pm-card-bg: var(--color-slate-1100);
-  --pm-card-radius: var(--radius-lg);
-  --pm-card-radius-mobile: var(--radius-2xl);
-  --pm-card-px: var(--spacing-16);
-  --pm-card-py: var(--spacing-24);
-  --pm-card-px-mobile: var(--spacing-12);
-  --pm-card-py-mobile: var(--spacing-12);
-  --pm-card-img-h: var(--spacing-112);
-  --pm-card-img-h-mobile: 5.375rem;
-  --pm-card-gap: var(--spacing-24);
-  --pm-col-gap: var(--spacing-24);
-  --pm-carousel-height: 39.375rem;
-  --pm-carousel-height-mob: 20.5rem;
-  --pm-fade-height: var(--spacing-64);
-  --pm-headline-size: var(--font-size-4xl);
-  --pm-headline-lh: var(--line-height-4xl);
-  --pm-headline-color: var(--color-slate-50);
-  --pm-headline-weight: var(--font-weight-extra-bold);
-  --pm-body-size: var(--font-size-md);
-  --pm-body-lh: var(--line-height-md);
-  --pm-body-color: var(--color-slate-50);
-  --pm-body-weight: var(--font-weight-regular);
-  --pm-disc-size: var(--font-size-sm);
-  --pm-disc-lh: var(--line-height-sm);
-  --pm-disc-color: var(--color-slate-400);
-  --pm-disc-weight: var(--font-weight-regular);
-  --pm-link-color: var(--color-coral-500);
-  --pm-link-size: var(--font-size-md);
-  --pm-link-weight: var(--font-weight-semi-bold);
-  --pm-text-width: 32.625rem;
-  --pm-section-py-mobile: var(--spacing-48);
-  --pm-section-px-mobile: var(--spacing-16);
-}
-.pm {
+  --lm-bg: var(--color-slate-1200);
+  --lm-section-py: var(--spacing-112);
+  --lm-section-px: var(--spacing-24);
+  --lm-section-height: 50rem;
+  --lm-max-width: 80rem;
+  --lm-layout-gap: var(--spacing-112);
+  --lm-card-bg: var(--color-slate-1100);
+  --lm-card-radius: var(--radius-lg);
+  --lm-card-radius-mobile: var(--radius-2xl);
+  --lm-card-px: var(--spacing-16);
+  --lm-card-py: var(--spacing-24);
+  --lm-card-px-mobile: var(--spacing-12);
+  --lm-card-py-mobile: var(--spacing-12);
+  --lm-card-img-h: var(--spacing-112);
+  --lm-card-img-h-mobile: 5.375rem;
+  --lm-card-gap: var(--spacing-24);
+  --lm-col-gap: var(--spacing-24);
+  --lm-carousel-height: 39.375rem;
+  --lm-carousel-height-mob: 20.5rem;
+  --lm-fade-height: var(--spacing-64);
+  --lm-headline-size: var(--typography-h2-font-size);
+  --lm-headline-lh: var(--typography-h2-line-height);
+  --lm-headline-color: var(--color-slate-50);
+  --lm-headline-weight: var(--typography-h2-font-weight);
+  --lm-body-size: var(--typography-body-md-font-size);
+  --lm-body-lh: var(--typography-body-md-line-height);
+  --lm-body-color: var(--color-slate-50);
+  --lm-body-weight: var(--typography-body-md-font-weight);
+  --lm-disc-size: var(--typography-body-sm-font-size);
+  --lm-disc-lh: var(--typography-body-sm-line-height);
+  --lm-disc-color: var(--color-slate-400);
+  --lm-disc-weight: var(--typography-body-sm-font-weight);
+  --lm-link-color: var(--color-coral-500);
+  --lm-link-size: var(--typography-link-md-font-size);
+  --lm-link-weight: var(--typography-link-md-font-weight);
+  --lm-text-width: 32.625rem;
+  --lm-section-py-mobile: var(--spacing-56);
+  --lm-section-px-mobile: var(--spacing-16);
+}
+.lm {
   position: relative;
   width: 100%;
-  background-color: var(--pm-bg);
+  background-color: var(--lm-bg);
   font-family: var(--font-family-base);
   box-sizing: border-box;
 }
-.pm__inner {
+.lm__inner {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
   align-items: flex-start;
-  max-width: var(--pm-max-width);
+  max-width: var(--lm-max-width);
   margin: 0 auto;
-  padding: var(--pm-section-py-mobile) var(--pm-section-px-mobile);
+  padding: var(--lm-section-py-mobile) var(--lm-section-px-mobile);
   box-sizing: border-box;
 }
 @media (min-width: 992px) {
-  .pm__inner {
+  .lm__inner {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    gap: var(--pm-layout-gap);
-    padding: var(--pm-section-py) var(--pm-section-px);
-    min-height: var(--pm-section-height);
+    gap: var(--lm-layout-gap);
+    padding: var(--lm-section-py) var(--lm-section-px);
+    min-height: var(--lm-section-height);
   }
 }
-.pm__content {
+.lm__content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-24);
@@ -4093,153 +4586,526 @@
   order: 1;
 }
 @media (min-width: 992px) {
-  .pm__content {
+  .lm__content {
     flex-shrink: 0;
-    width: var(--pm-text-width);
+    width: var(--lm-text-width);
     order: 2;
   }
 }
-.pm__headline {
+.lm__headline {
   margin: 0;
   font-family: var(--font-family-base);
-  font-size: var(--pm-headline-size);
-  font-weight: var(--pm-headline-weight);
-  line-height: var(--pm-headline-lh);
-  color: var(--pm-headline-color);
+  font-size: var(--lm-headline-size);
+  font-weight: var(--lm-headline-weight);
+  line-height: var(--lm-headline-lh);
+  color: var(--lm-headline-color);
 }
-.pm__text-group {
+.lm__text-group {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-16);
 }
-.pm__body {
+.lm__body {
   margin: 0;
   font-family: var(--font-family-base);
-  font-size: var(--pm-body-size);
-  font-weight: var(--pm-body-weight);
-  line-height: var(--pm-body-lh);
-  color: var(--pm-body-color);
+  font-size: var(--lm-body-size);
+  font-weight: var(--lm-body-weight);
+  line-height: var(--lm-body-lh);
+  color: var(--lm-body-color);
 }
-.pm__disclaimer {
+.lm__disclaimer {
   margin: 0;
   font-family: var(--font-family-base);
-  font-size: var(--pm-disc-size);
-  font-weight: var(--pm-disc-weight);
-  line-height: var(--pm-disc-lh);
-  color: var(--pm-disc-color);
+  font-size: var(--lm-disc-size);
+  font-weight: var(--lm-disc-weight);
+  line-height: var(--lm-disc-lh);
+  color: var(--lm-disc-color);
 }
-.pm__link {
+.lm__link {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
-  font-family: var(--font-family-base);
-  font-size: var(--pm-link-size);
-  font-weight: var(--pm-link-weight);
-  line-height: var(--line-height-xs);
-  color: var(--pm-link-color);
+  font-family: var(--typography-link-md-font-family);
+  font-size: var(--lm-link-size);
+  font-weight: var(--lm-link-weight);
+  line-height: var(--typography-link-md-line-height);
+  color: var(--lm-link-color);
   text-decoration: none;
   cursor: pointer;
   white-space: nowrap;
+  transition: color 0.2s ease;
 }
-.pm__link:hover {
-  text-decoration: underline;
+.lm__link:hover {
+  color: var(--color-coral-600);
+}
+.lm__link-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
 }
-.pm__media {
+.lm__link:hover .lm__link-icon {
+  transform: translateX(var(--spacing-4));
+}
+.lm__media {
   position: relative;
   width: 100%;
   order: 2;
   flex-shrink: 0;
 }
 @media (min-width: 992px) {
-  .pm__media {
+  .lm__media {
     flex: 1 0 0;
     min-width: 0;
     order: 1;
     align-self: stretch;
   }
 }
-.pm__carousel {
+.lm__carousel {
   position: relative;
   display: flex;
   align-items: flex-start;
-  gap: var(--pm-col-gap);
-  height: var(--pm-carousel-height-mob);
+  gap: var(--lm-col-gap);
+  height: var(--lm-carousel-height-mob);
   overflow: hidden;
 }
 @media (min-width: 992px) {
-  .pm__carousel {
-    height: var(--pm-carousel-height);
+  .lm__carousel {
+    height: var(--lm-carousel-height);
   }
 }
-.pm__fade {
+.lm__fade {
   position: absolute;
   left: 0;
   right: 0;
-  height: var(--pm-fade-height);
+  height: var(--lm-fade-height);
   pointer-events: none;
   z-index: 2;
 }
-.pm__fade--top {
+.lm__fade--top {
   top: 0;
   background:
     linear-gradient(
       to bottom,
-      var(--pm-bg) 0%,
+      var(--lm-bg) 0%,
       rgba(0, 0, 0, 0) 100%);
 }
-.pm__fade--bottom {
+.lm__fade--bottom {
   bottom: 0;
   background:
     linear-gradient(
       to top,
-      var(--pm-bg) 0%,
+      var(--lm-bg) 0%,
       rgba(0, 0, 0, 0) 100%);
 }
-.pm__col {
+.lm__col {
   flex: 1 0 0;
   align-self: flex-start;
   display: flex;
   flex-direction: column;
-  gap: var(--pm-card-gap);
+  gap: var(--lm-card-gap);
   min-width: 0;
   will-change: transform;
 }
-.pm__card {
+.lm__card {
   flex-shrink: 0;
-  background-color: var(--pm-card-bg);
-  border-radius: var(--pm-card-radius-mobile);
-  padding: var(--pm-card-py-mobile) var(--pm-card-px-mobile);
+  background-color: var(--lm-card-bg);
+  border-radius: var(--lm-card-radius-mobile);
+  aspect-ratio: 4 / 3;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   width: 100%;
+  overflow: hidden;
 }
 @media (min-width: 992px) {
-  .pm__card {
-    border-radius: var(--pm-card-radius);
-    padding: var(--pm-card-py) var(--pm-card-px);
+  .lm__card {
+    border-radius: var(--lm-card-radius);
   }
 }
-.pm__card-img-wrap {
+.lm__card-img-wrap {
   width: 100%;
-  height: var(--pm-card-img-h-mobile);
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }
+.lm__card-img-wrap img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* primitives/DownloadBadge/DownloadBadge.css */
+:root {
+  --download-badge-height: var(--spacing-48);
+  --download-badge-radius: var(--radius-full);
+  --download-badge-padding-x: var(--spacing-16);
+  --download-badge-transition: opacity 100ms ease, box-shadow 100ms ease;
+  --download-badge-focus-color: var(--color-blue-600);
+  --download-badge-light-bg: var(--color-slate-50);
+  --download-badge-light-border: var(--spacing-2) solid var(--color-slate-1200);
+  --download-badge-dark-bg: var(--color-slate-800);
+  --download-badge-dark-border: var(--spacing-2) solid transparent;
+  --download-badge-img-height: var(--spacing-32);
+}
+.download-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--download-badge-height);
+  padding: 0 var(--download-badge-padding-x);
+  border-radius: var(--download-badge-radius);
+  box-sizing: border-box;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  flex-shrink: 0;
+  transition: var(--download-badge-transition);
+}
+.download-badge--light {
+  background: var(--download-badge-light-bg);
+  border: var(--download-badge-light-border);
+}
+.download-badge--dark {
+  background: var(--download-badge-dark-bg);
+  border: var(--download-badge-dark-border);
+}
+.download-badge:hover {
+  opacity: 0.85;
+}
+.download-badge:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: calc(-1 * var(--spacing-2));
+  border-radius: var(--download-badge-radius);
+  border: var(--spacing-2) solid var(--download-badge-focus-color);
+  pointer-events: none;
+}
+.download-badge__img {
+  height: var(--download-badge-img-height);
+  width: auto;
+  display: block;
+  pointer-events: none;
+}
+
+/* templates/Steps/Steps.css */
+:root {
+  --steps-bg: var(--color-slate-50);
+  --steps-title-color: var(--color-slate-1200);
+  --steps-number-color: var(--color-coral-500);
+  --steps-item-title-color: var(--color-slate-1200);
+  --steps-item-desc-color: var(--color-slate-600);
+  --steps-divider-color: var(--color-slate-200);
+}
+.steps {
+  width: 100%;
+  background-color: var(--steps-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.steps__container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-40);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .steps__container {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-96);
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+  .steps__container--image-right {
+    flex-direction: row-reverse;
+  }
+}
+.steps__image-wrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-2xl);
+  overflow: hidden;
+  flex-shrink: 0;
+  background-color: var(--color-slate-100);
+}
 @media (min-width: 992px) {
-  .pm__card-img-wrap {
-    height: var(--pm-card-img-h);
+  .steps__image-wrapper {
+    flex: 1 0 0;
+    width: auto;
   }
 }
-.pm__card-img-wrap img {
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
+.steps__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.steps__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .steps__content {
+    flex: 1 0 0;
+    width: auto;
+  }
+}
+.steps__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(--steps-title-color);
+  margin: 0;
+}
+.steps__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.steps__item {
+  border-bottom: 1px solid var(--steps-divider-color);
+}
+.steps__item:last-child {
+  border-bottom: none;
+}
+.steps__item-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  padding: var(--spacing-16) 0;
+}
+.steps__number {
+  font-family: var(--font-family-base);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--typography-h5-line-height);
+  color: var(--steps-number-color);
+  flex-shrink: 0;
+  min-width: var(--spacing-16);
+  padding-top: 2px;
+}
+.steps__item-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.steps__item-title {
+  font-family: var(--font-family-base);
+  font-size: var(--typography-body-lg-font-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--typography-body-lg-line-height);
+  color: var(--steps-item-title-color);
+  margin: 0;
+}
+.steps__item-description {
+  font-family: var(--font-family-base);
+  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(--steps-item-desc-color);
+  margin: 0;
+}
+
+/* templates/DownloadBanner/DownloadBanner.css */
+:root {
+  --db-section-bg-light: var(--color-slate-100);
+  --db-section-bg-light-2: var(--color-slate-50);
+  --db-section-bg-dark: var(--color-slate-50);
+  --db-card-bg-light: var(--color-slate-50);
+  --db-card-bg-light-2: var(--color-slate-100);
+  --db-card-bg-dark: var(--color-slate-1200);
+  --db-title-color-light: var(--color-slate-1200);
+  --db-title-color-dark: var(--color-slate-50);
+  --db-subtitle-color-light: var(--color-slate-1200);
+  --db-subtitle-color-dark: var(--color-slate-50);
+  --db-disclaimer-color-light: var(--color-slate-500);
+  --db-disclaimer-color-dark: var(--color-slate-500);
+  --db-card-radius: var(--radius-2xl);
+}
+.db-section {
+  width: 100%;
+  box-sizing: border-box;
+}
+.db-section--light {
+  background-color: var(--db-section-bg-light);
+}
+.db-section--light-2 {
+  background-color: var(--db-section-bg-light-2);
+}
+.db-section--dark {
+  background-color: var(--db-section-bg-dark);
+}
+.db-container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-56) var(--spacing-16);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .db-container {
+    padding: var(--spacing-56) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .db-container {
+    padding: var(--spacing-112) var(--spacing-24);
+  }
+}
+.db-card {
+  border-radius: var(--db-card-radius);
+  padding: var(--spacing-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  box-sizing: border-box;
+}
+.db-section--light .db-card {
+  background-color: var(--db-card-bg-light);
+}
+.db-section--light-2 .db-card {
+  background-color: var(--db-card-bg-light-2);
+}
+.db-section--dark .db-card {
+  background-color: var(--db-card-bg-dark);
+}
+@media (min-width: 992px) {
+  .db-card {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-80);
+    padding: var(--spacing-48);
+  }
+}
+.db-qr-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+@media (min-width: 992px) {
+  .db-qr-block {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-32);
+    flex-shrink: 0;
+  }
+}
+.db-qr-image {
+  width: 128px;
+  height: 128px;
   object-fit: contain;
+  display: none;
+  flex-shrink: 0;
+}
+@media (min-width: 992px) {
+  .db-qr-image {
+    display: block;
+  }
+}
+.db-qr-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.db-qr-text__title--desktop,
+.db-qr-text__subtitle--desktop {
+  display: none;
+}
+.db-qr-text__title--mobile {
   display: block;
 }
+@media (min-width: 992px) {
+  .db-qr-text__title--desktop,
+  .db-qr-text__subtitle--desktop {
+    display: block;
+  }
+  .db-qr-text__title--mobile {
+    display: none;
+  }
+}
+.db-qr-text__title--desktop {
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+}
+.db-qr-text__subtitle--desktop {
+  margin: 0;
+  font-family: var(--typography-h3-font-family);
+  font-size: var(--typography-h3-font-size);
+  font-weight: var(--typography-h3-font-weight);
+  line-height: var(--typography-h3-line-height);
+}
+.db-qr-text__title--mobile {
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+}
+.db-section--light .db-qr-text__title--desktop,
+.db-section--light .db-qr-text__title--mobile,
+.db-section--light-2 .db-qr-text__title--desktop,
+.db-section--light-2 .db-qr-text__title--mobile {
+  color: var(--db-title-color-light);
+}
+.db-section--dark .db-qr-text__title--desktop,
+.db-section--dark .db-qr-text__title--mobile {
+  color: var(--db-title-color-dark);
+}
+.db-section--light .db-qr-text__subtitle--desktop,
+.db-section--light-2 .db-qr-text__subtitle--desktop {
+  color: var(--db-subtitle-color-light);
+}
+.db-section--dark .db-qr-text__subtitle--desktop {
+  color: var(--db-subtitle-color-dark);
+}
+.db-disclaimer {
+  display: block;
+  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);
+  margin-top: var(--spacing-4);
+}
+.db-section--light .db-disclaimer,
+.db-section--light-2 .db-disclaimer {
+  color: var(--db-disclaimer-color-light);
+}
+.db-section--dark .db-disclaimer {
+  color: var(--db-disclaimer-color-dark);
+}
+.db-badges {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-8);
+}
+.db-badges .download-badge {
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .db-badges {
+    flex: unset;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-content: flex-end;
+    align-items: center;
+  }
+  .db-badges .download-badge {
+    width: auto;
+  }
+}
 /*# sourceMappingURL=index.css.map */