@deriv-web-design/ui 0.0.3 → 0.0.5

package/dist/index.css

@@ -676,11 +676,171 @@
   outline-offset: 2px;
 }
 
+/* primitives/BottomSheet/BottomSheet.css */
+.bs-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--bottom-sheet-overlay-bg);
+  display: flex;
+  align-items: flex-end;
+}
+.bs-sheet {
+  width: 100%;
+  background: var(--bottom-sheet-bg);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  box-shadow: var(--bottom-sheet-shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-height: 90dvh;
+  animation: bs-slide-up 280ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
+}
+@keyframes bs-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+.bs-handle-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-8) 0;
+  flex-shrink: 0;
+}
+.bs-handle-bar {
+  width: 48px;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: var(--bottom-sheet-handle-color);
+}
+.bs-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  height: 48px;
+  padding: 0 var(--spacing-16);
+  flex-shrink: 0;
+}
+.bs-header-spacer {
+  width: 48px;
+  height: 48px;
+  flex-shrink: 0;
+}
+.bs-title {
+  flex: 1;
+  text-align: center;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-extra-bold);
+  font-size: var(--font-size-xl);
+  line-height: var(--line-height-xl);
+  color: var(--bottom-sheet-title-color);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.bs-close-container {
+  flex-shrink: 0;
+}
+.bs-close-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--bottom-sheet-close-icon-color);
+  transition: background-color 100ms ease;
+  outline: none;
+  box-sizing: border-box;
+}
+.bs-close-btn:hover {
+  background: var(--bottom-sheet-close-hover-bg);
+}
+.bs-close-btn:active {
+  background: var(--bottom-sheet-close-active-bg);
+}
+.bs-close-btn:focus-visible::after {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--bottom-sheet-focus-ring-color);
+  pointer-events: none;
+}
+.bs-body {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+.bs-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  flex-shrink: 0;
+}
+.bs-action-primary {
+  width: 100%;
+  height: 48px;
+  border-radius: var(--radius-full);
+  border: none;
+  background: var(--bottom-sheet-action-primary-bg);
+  color: var(--bottom-sheet-action-primary-text);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-extra-bold);
+  font-size: var(--font-size-md);
+  cursor: pointer;
+  transition: background-color 100ms ease;
+  box-sizing: border-box;
+}
+.bs-action-primary:hover {
+  background: var(--bottom-sheet-action-primary-bg-hover);
+}
+.bs-action-primary:active {
+  background: var(--bottom-sheet-action-primary-bg-active);
+}
+.bs-action-secondary {
+  width: 100%;
+  height: 48px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--bottom-sheet-action-secondary-border);
+  background: transparent;
+  color: var(--bottom-sheet-action-secondary-text);
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-extra-bold);
+  font-size: var(--font-size-md);
+  cursor: pointer;
+  transition: background-color 100ms ease;
+  box-sizing: border-box;
+}
+.bs-action-secondary:hover {
+  background: var(--bottom-sheet-action-secondary-hover-bg);
+}
+.bs-action-secondary:active {
+  background: var(--bottom-sheet-action-secondary-active-bg);
+}
+@media (min-width: 768px) {
+  .bs-overlay {
+    display: none;
+  }
+}
+
 /* primitives/Breadcrumb/Breadcrumb.css */
 .bc-list {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
+  overflow: hidden;
   gap: var(--spacing-8);
   list-style: none;
   margin: 0;
@@ -725,6 +885,13 @@
 .bc-current {
   color: var(--breadcrumb-text-current-color);
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bc-item:last-child {
+  min-width: 0;
+  flex-shrink: 1;
+  overflow: hidden;
 }
 .bc-separator {
   display: inline-flex;
@@ -775,12 +942,39 @@
   .bc-list.collapsible .bc-middleItem {
     display: none;
   }
-  .bc-list.collapsible.expanded .bc-ellipsisItem {
-    display: none;
-  }
-  .bc-list.collapsible.expanded .bc-middleItem {
-    display: flex;
-  }
+}
+.bc-sheet-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-bottom: var(--spacing-24);
+}
+.bc-sheet-item {
+  border-bottom: 1px solid var(--bottom-sheet-list-item-border);
+}
+.bc-sheet-item:last-child {
+  border-bottom: none;
+}
+.bc-sheet-link {
+  display: flex;
+  align-items: center;
+  height: 72px;
+  padding: 0 var(--spacing-24);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--breadcrumb-text-color);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bc-sheet-link:hover {
+  text-decoration: underline;
+}
+.bc-sheet-link:focus-visible {
+  outline: 2px solid var(--breadcrumb-focus-ring-color);
+  outline-offset: -2px;
 }
 
 /* primitives/ChipDropdown/ChipDropdown.css */
@@ -932,6 +1126,27 @@
   flex-shrink: 0;
   color: var(--chip-dropdown-item-selected-check);
 }
+.cd-list--sheet {
+  position: static;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  background: transparent;
+}
+.cd-list--sheet .cd-item {
+  height: 72px;
+  padding: 0 var(--spacing-24);
+  border-radius: 0;
+  border-bottom: 1px solid var(--bottom-sheet-list-item-border);
+  font-size: var(--font-size-md);
+}
+.cd-list--sheet .cd-item:last-child {
+  border-bottom: none;
+}
+.cd-list--sheet .cd-item.itemSelected .cd-itemLabel {
+  font-weight: var(--font-weight-extra-bold);
+}
 
 /* components/Card/CardPrimaryVariant.css */
 .card-primary {
@@ -1089,6 +1304,10 @@
   border-radius: inherit;
   pointer-events: none;
   display: block;
+  transition: transform 0.25s ease-in-out;
+}
+.card-thumbnail:hover .ct-thumbnailImage {
+  transform: scale(1.1);
 }
 .card-thumbnail .ct-playButton {
   position: absolute;
@@ -1325,4 +1544,2031 @@
     min-width: 0;
   }
 }
+
+/* templates/Footer/Footer.css */
+.footer {
+  background-color: var(--footer-background);
+  width: 100%;
+  font-family: var(--font-family-base);
+}
+.footer__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+  padding: var(--spacing-32) var(--spacing-16);
+  width: 100%;
+  max-width: 640px;
+  min-width: 320px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.footer__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-24);
+  border-bottom: 1px solid var(--footer-header-divider);
+  padding-bottom: var(--spacing-32);
+  width: 100%;
+}
+.footer__logo-wrapper {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.footer__logo {
+  height: 20px;
+  width: auto;
+  min-width: 1px;
+  display: block;
+}
+.footer__social {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-shrink: 0;
+}
+.footer__social--in-header {
+  display: none;
+}
+.footer__social--standalone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.footer__social-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--footer-social-icon-color);
+  text-decoration: none;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.footer__social-icon svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+.footer__social-icon:hover {
+  opacity: 0.8;
+}
+.footer__ai-bar.footer__ai-bar--inline {
+  display: none;
+}
+.footer__ai-section {
+  border-bottom: 1px solid var(--footer-header-divider);
+  padding-bottom: var(--spacing-32);
+  width: 100%;
+  box-sizing: border-box;
+}
+.footer__ai-bar {
+  background-color: var(--footer-surface);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-16);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-16);
+}
+.footer__ai-bar--block {
+  flex-direction: column;
+}
+.footer__ai-bar-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-xs);
+  color: var(--color-slate-50);
+  text-align: center;
+  white-space: nowrap;
+}
+.footer__ai-bar-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.footer__ai-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+.footer__ai-icon img {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-md);
+  display: block;
+  object-fit: cover;
+}
+.footer__nav--columns {
+  display: none;
+}
+.footer__column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  flex: 1 0 0;
+}
+.footer__nav-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.footer__nav-title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-md);
+  color: var(--footer-nav-title-color);
+  margin: 0;
+  white-space: nowrap;
+}
+.footer__nav-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.footer__nav--accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.footer__accordion-item {
+  width: 100%;
+}
+.footer__accordion-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-16) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-family-base);
+}
+.footer__accordion-label {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--footer-accordion-text-color);
+}
+.footer__accordion-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--footer-accordion-chevron-color);
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  transition: transform 150ms ease;
+}
+.footer__accordion-item--open .footer__accordion-chevron {
+  transform: rotate(180deg);
+}
+.footer__accordion-links {
+  list-style: none;
+  padding: 0 0 var(--spacing-8) 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.footer__nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  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(--footer-nav-link-color);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.footer__nav-link:hover {
+  opacity: 0.8;
+}
+.footer__nav-link svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.footer__sidebar {
+  display: none;
+}
+.footer__deriv-go-card,
+.footer__deriv-go-banner {
+  background-color: var(--footer-surface);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  box-sizing: border-box;
+}
+.footer__deriv-go-banner {
+  width: 100%;
+}
+.footer__deriv-go-banner-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+.footer__deriv-go-banner-badges {
+  width: 100%;
+}
+.footer__deriv-go-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.footer__deriv-go-logo {
+  width: 24px;
+  height: 24px;
+  display: block;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.footer__deriv-go-title {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-50);
+  white-space: nowrap;
+}
+.footer__deriv-go-desc {
+  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-50);
+  margin: 0;
+}
+.footer__deriv-go-qr {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+.footer__deriv-go-qr-img {
+  width: 64px;
+  height: 64px;
+  display: block;
+  flex-shrink: 0;
+}
+.footer__deriv-go-qr-icon {
+  width: 64px;
+  height: 64px;
+  display: block;
+  flex-shrink: 0;
+}
+.footer__deriv-go-qr-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.footer__deriv-go-qr-label {
+  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-50);
+}
+.footer__app-badges {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  align-items: stretch;
+}
+.footer__app-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--footer-app-badge-border);
+  border-radius: var(--radius-sm);
+  padding: var(--spacing-4) var(--spacing-8);
+  min-height: 36px;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+.footer__app-badge img {
+  display: block;
+  max-height: 24px;
+  width: auto;
+}
+.footer__app-badge-svg {
+  display: block;
+  width: 100%;
+  text-decoration: none;
+}
+.footer__app-badge-svg svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.footer__app-note {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-normal);
+  color: var(--color-slate-50);
+  margin: 0;
+}
+.footer__investors-card {
+  background-color: var(--footer-surface);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-16);
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+.footer__investors-stacked {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.footer__investors-img {
+  height: 32px;
+  width: 160px;
+  display: block;
+  object-fit: contain;
+}
+.footer__legal-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+.footer__license {
+  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(--footer-legal-text-color);
+  width: 100%;
+}
+.footer__license p {
+  margin: 0 0 var(--spacing-16) 0;
+}
+.footer__license p:last-child {
+  margin-bottom: 0;
+}
+.footer__license a {
+  color: var(--footer-legal-text-color);
+  text-decoration: underline;
+}
+.footer__risk-warning {
+  background-color: var(--footer-surface);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-16);
+  box-sizing: border-box;
+  width: 100%;
+}
+.footer__risk-warning-text {
+  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(--footer-legal-text-color);
+  margin: 0;
+}
+@media (min-width: 768px) {
+  .footer__inner {
+    max-width: 1280px;
+    min-width: 641px;
+    padding: var(--spacing-32) var(--spacing-24);
+  }
+  .footer__header {
+    justify-content: space-between;
+  }
+  .footer__social--in-header {
+    display: flex;
+  }
+  .footer__social--standalone {
+    display: none;
+  }
+  .footer__ai-section {
+    display: none;
+  }
+  .footer__deriv-go-banner {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-24);
+  }
+  .footer__deriv-go-banner-info {
+    flex: 1 1 auto;
+  }
+  .footer__deriv-go-banner-badges {
+    flex: 0 0 280px;
+    width: 280px;
+  }
+}
+@media (min-width: 992px) {
+  .footer__inner {
+    max-width: 1280px;
+    padding: var(--spacing-48) var(--spacing-32);
+    gap: var(--spacing-40);
+  }
+  .footer__header {
+    border-bottom-color: var(--footer-divider-desktop);
+  }
+  .footer__ai-bar.footer__ai-bar--inline {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-16);
+    gap: var(--spacing-16);
+  }
+  .footer__ai-section {
+    display: none;
+  }
+  .footer__nav--columns {
+    display: flex;
+    gap: var(--spacing-24);
+    align-items: flex-start;
+    width: 100%;
+  }
+  .footer__nav--accordion {
+    display: none;
+  }
+  .footer__sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    align-items: flex-start;
+    flex-shrink: 0;
+    width: 192px;
+  }
+  .footer__deriv-go-card {
+    width: 192px;
+  }
+  .footer__deriv-go-banner {
+    display: none;
+  }
+  .footer__investors-stacked {
+    display: none;
+  }
+  .footer__legal-block {
+    align-items: flex-start;
+  }
+}
+
+/* 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(--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 {
+  position: relative;
+  width: 100%;
+  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;
+}
+.hero__overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.hero__inner {
+  position: relative;
+  z-index: 3;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: var(--spacing-24) var(--spacing-16);
+}
+.hero__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.hero__subtitle {
+  font-size: var(--hero-subtitle-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--hero-subtitle-lh);
+  margin: 0;
+}
+.hero__title {
+  font-size: var(--hero-title-size-mobile);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--hero-title-lh-mobile);
+  margin: 0;
+}
+.hero__description {
+  font-size: var(--hero-body-size);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--hero-body-lh);
+  margin: 0;
+}
+.hero__buttons {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: 100%;
+}
+.hero__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}
+.hero--homepage {
+  background-color: var(--hero-dark-bg);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  align-items: stretch;
+}
+.hero--homepage .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%);
+}
+.hero--homepage .hero__inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100vh;
+  padding-top: 0;
+  padding-bottom: var(--spacing-40);
+}
+.hero--homepage .hero__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  width: 100%;
+}
+.hero--homepage .hero__image-slot {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+  width: 78%;
+  max-width: 380px;
+  height: auto;
+  display: flex;
+  overflow: visible;
+  pointer-events: none;
+}
+.hero--homepage .hero__image-slot img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  object-position: top center;
+  display: block;
+  max-width: none;
+  max-height: none;
+}
+.hero--homepage .hero__image-slot > *:not(img) {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.hero--homepage .hero__subtitle,
+.hero--homepage .hero__title,
+.hero--homepage .hero__description {
+  color: var(--hero-text-light);
+}
+.hero--homepage .hero__buttons {
+  align-items: stretch;
+}
+.hero--full-image {
+  background-color: var(--hero-dark-bg);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+}
+.hero--full-image .hero__overlay {
+  background:
+    linear-gradient(
+      180deg,
+      var(--hero-dark-bg) 0%,
+      var(--color-opacity-slate-72) 40%,
+      rgba(24, 28, 37, 0) 100%);
+}
+.hero--full-image .hero__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding-top: var(--spacing-32);
+  padding-bottom: var(--spacing-32);
+}
+.hero--full-image .hero__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-24);
+  width: 100%;
+  text-align: center;
+}
+.hero--full-image .hero__text {
+  align-items: center;
+  max-width: 840px;
+}
+.hero--full-image .hero__subtitle,
+.hero--full-image .hero__title,
+.hero--full-image .hero__description {
+  color: var(--hero-text-light);
+}
+.hero--full-image .hero__buttons {
+  align-items: center;
+  justify-content: center;
+}
+.hero--visuals,
+.hero--text-only {
+  background-color: var(--hero-light-bg);
+  min-height: 540px;
+  display: flex;
+  align-items: center;
+}
+.hero--visuals .hero__grid,
+.hero--text-only .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--text-only .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--text-only .hero__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+  width: 100%;
+  text-align: center;
+}
+.hero--visuals .hero__text,
+.hero--text-only .hero__text {
+  align-items: center;
+  max-width: 846px;
+}
+.hero--visuals .hero__subtitle,
+.hero--visuals .hero__title,
+.hero--visuals .hero__description,
+.hero--text-only .hero__subtitle,
+.hero--text-only .hero__title,
+.hero--text-only .hero__description {
+  color: var(--hero-text-dark);
+}
+.hero--visuals .hero__buttons,
+.hero--text-only .hero__buttons {
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+}
+.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;
+}
+.hero__visual--left {
+  width: 160px;
+  height: 160px;
+  top: -20px;
+  left: -20px;
+}
+.hero__visual--right {
+  width: 160px;
+  height: 160px;
+  bottom: -20px;
+  right: -20px;
+}
+@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);
+    padding-bottom: var(--spacing-40);
+  }
+  .hero--homepage .hero__buttons,
+  .hero--full-image .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+@media (min-width: 992px) {
+  .hero__inner {
+    padding: var(--spacing-48) var(--spacing-32);
+  }
+  .hero__title {
+    font-size: var(--hero-title-size);
+    line-height: var(--hero-title-lh);
+  }
+  .hero--homepage .hero__inner {
+    max-width: 1280px;
+    padding: var(--spacing-96) var(--spacing-32);
+    height: 100vh;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .hero--homepage .hero__content {
+    flex-direction: column;
+    gap: var(--spacing-32);
+    max-width: 600px;
+  }
+  .hero--homepage .hero__left {
+    width: 100%;
+  }
+  .hero--homepage .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--homepage .hero__image-slot {
+    position: absolute;
+    top: 75px;
+    right: 0;
+    left: auto;
+    transform: none;
+    z-index: 4;
+    width: 50%;
+    height: calc(100% - 5px);
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    overflow: visible;
+    pointer-events: none;
+    max-width: none;
+  }
+  .hero--homepage .hero__image-slot img {
+    height: 100%;
+    width: auto;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    object-position: left top;
+  }
+  .hero--homepage .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+    gap: var(--spacing-16);
+  }
+  .hero--homepage .hero__overlay {
+    background:
+      linear-gradient(
+        to right,
+        var(--color-slate-1200) 0%,
+        var(--color-opacity-slate-88) 40%,
+        var(--color-opacity-slate-24) 100%);
+  }
+  .hero--full-image .hero__text {
+    max-width: 840px;
+  }
+  .hero--full-image .hero__buttons {
+    flex-direction: row;
+    align-items: center;
+    width: auto;
+  }
+  .hero--visuals .hero__inner,
+  .hero--text-only .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: 50%;
+    left: 48px;
+    bottom: auto;
+    right: auto;
+    transform: translateY(-50%);
+  }
+  .hero--visuals .hero__visual--right {
+    width: 241px;
+    height: 241px;
+    top: 50%;
+    right: 48px;
+    bottom: auto;
+    left: auto;
+    transform: translateY(-50%);
+  }
+  .hero--visuals .hero__content,
+  .hero--text-only .hero__content {
+    max-width: 846px;
+    width: 100%;
+  }
+}
+
+/* templates/Stats/Stats.css */
+:root {
+  --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-value-size: var(--font-size-3xl);
+  --stats-value-lh: var(--line-height-3xl);
+  --stats-value-featured-size: var(--font-size-5xl);
+  --stats-value-featured-lh: var(--line-height-5xl);
+  --stats-label-size: var(--font-size-lg);
+  --stats-label-lh: var(--line-height-lg);
+}
+.stats {
+  width: 100%;
+  background-color: var(--stats-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.stats__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-48) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  box-sizing: border-box;
+}
+.stats__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.stats__title {
+  font-size: var(--stats-title-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--stats-title-lh);
+  color: var(--stats-text-primary);
+  margin: 0;
+}
+.stats__description {
+  font-size: var(--stats-desc-size);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--stats-desc-lh);
+  color: var(--stats-text-primary);
+  margin: 0;
+}
+.stats__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-32);
+  width: 100%;
+}
+.stats__card {
+  background-color: var(--stats-card-bg);
+  border-radius: var(--radius-2xl);
+  padding: var(--spacing-24);
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.stats__card-track {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  overflow: visible;
+}
+.stats__stat {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  will-change: transform, opacity;
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+.stats__stat-value {
+  display: block;
+  font-family: var(--font-family-base);
+  font-size: var(--stats-value-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--stats-value-lh);
+  text-transform: uppercase;
+  color: var(--stats-text-primary);
+}
+.stats__stat-label {
+  display: block;
+  font-family: var(--font-family-base);
+  font-size: var(--stats-label-size);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--stats-label-lh);
+  color: var(--stats-text-primary);
+}
+.stats__stat--active .stats__stat-value {
+  font-size: var(--stats-value-featured-size);
+  line-height: var(--stats-value-featured-lh);
+  font-weight: 900;
+}
+.stats__stat--inactive .stats__stat-value {
+  font-size: var(--stats-value-size);
+  line-height: var(--stats-value-lh);
+  font-weight: var(--font-weight-extra-bold);
+  color: var(--color-slate-400);
+}
+.stats__stat--inactive .stats__stat-label {
+  color: var(--color-slate-400);
+}
+.stats__fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100px;
+  pointer-events: none;
+  z-index: 3;
+}
+.stats__fade--top {
+  top: 0;
+  background:
+    linear-gradient(
+      180deg,
+      var(--stats-card-bg) 0%,
+      rgba(246, 247, 248, 0) 100%);
+}
+.stats__fade--bottom {
+  bottom: 0;
+  background:
+    linear-gradient(
+      0deg,
+      var(--stats-card-bg) 0%,
+      rgba(246, 247, 248, 0) 100%);
+}
+.stats__award {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.stats__award-image {
+  display: block;
+  width: 100px;
+  height: 100px;
+  object-fit: contain;
+}
+.stats__awards-col {
+  display: none;
+}
+.stats__awards-mobile {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-16);
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .stats__header {
+    align-items: center;
+    text-align: center;
+  }
+  .stats__inner {
+    gap: var(--spacing-48);
+    padding: var(--spacing-48) var(--spacing-24);
+  }
+}
+@media (min-width: 992px) {
+  .stats__inner {
+    padding: var(--spacing-96) var(--spacing-32);
+    gap: var(--spacing-80);
+  }
+  .stats__header {
+    max-width: 846px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .stats__content {
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: center;
+    gap: var(--spacing-24);
+  }
+  .stats__card {
+    width: 414px;
+    height: 414px;
+    padding: var(--spacing-72);
+    flex-shrink: 0;
+  }
+  .stats__card-track {
+    height: 270px;
+  }
+  .stats__fade {
+    height: 65px;
+  }
+  .stats__awards-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-32);
+    width: 196px;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .stats__awards-col--left {
+    justify-content: flex-start;
+  }
+  .stats__awards-col--right {
+    justify-content: flex-end;
+  }
+  .stats__awards-col .stats__award-image {
+    width: 140px;
+    height: 140px;
+  }
+  .stats__awards-mobile {
+    display: none;
+  }
+}
+
+/* templates/Scrollytelling/Scrollytelling.css */
+:root {
+  --scrolly-bg: var(--color-slate-50);
+  --scrolly-text-primary: var(--color-slate-1200);
+  --scrolly-text-muted: var(--color-slate-500);
+  --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-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);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.scrolly__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-48) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  box-sizing: border-box;
+}
+.scrolly__header {
+  font-size: var(--scrolly-header-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--scrolly-header-lh);
+  color: var(--scrolly-text-primary);
+  margin: 0;
+}
+.scrolly__layout {
+  display: none;
+}
+.scrolly__mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+}
+.scrolly__mobile-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.scrolly__mobile-media {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--scrolly-mobile-radius);
+  background-color: var(--scrolly-media-bg);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.scrolly__mobile-media img,
+.scrolly__mobile-media > * {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.scrolly__item-title {
+  font-size: var(--scrolly-title-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--scrolly-title-lh);
+  color: var(--scrolly-text-primary);
+  margin: 0;
+}
+.scrolly__item-desc {
+  font-size: var(--scrolly-body-size);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--scrolly-body-lh);
+  color: var(--scrolly-text-primary);
+  margin: 0;
+}
+.scrolly__item-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  font-size: var(--scrolly-link-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--scrolly-link-lh);
+  color: var(--scrolly-link-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  cursor: pointer;
+}
+.scrolly__item-link:hover {
+  color: var(--scrolly-link-hover);
+}
+.scrolly__item-link-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+.scrolly__item-link:hover .scrolly__item-link-icon {
+  transform: translateX(var(--spacing-4));
+}
+@media (min-width: 768px) {
+  .scrolly__inner {
+    padding: var(--spacing-64) var(--spacing-24);
+    gap: var(--spacing-40);
+  }
+}
+@media (min-width: 992px) {
+  .scrolly__header {
+    text-align: center;
+  }
+  .scrolly__inner {
+    padding: var(--spacing-88) var(--spacing-32);
+    gap: var(--spacing-56);
+  }
+  .scrolly__layout {
+    display: flex;
+    flex-direction: row;
+    gap: var(--scrolly-col-gap);
+    align-items: flex-start;
+    width: 100%;
+  }
+  .scrolly__mobile-list {
+    display: none;
+  }
+  .scrolly--media-left .scrolly__layout {
+    flex-direction: row-reverse;
+  }
+  .scrolly__media-col {
+    flex: 1 0 0;
+    position: sticky;
+    top: var(--scrolly-sticky-top);
+    align-self: flex-start;
+  }
+  .scrolly__media-wrap {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    position: relative;
+    border-radius: var(--scrolly-media-radius);
+    background-color: var(--scrolly-media-bg);
+    overflow: hidden;
+  }
+  .scrolly__media-item {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: opacity;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .scrolly__media-item--active {
+    opacity: 1;
+  }
+  .scrolly__media-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .scrolly__media-item > * {
+    width: 100% !important;
+    height: 100% !important;
+  }
+  .scrolly__content-col {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .scrolly__item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: var(--scrolly-item-min-height);
+    gap: var(--spacing-24);
+    padding-left: var(--spacing-32);
+    transition: opacity 0.4s ease;
+    opacity: 0.4;
+    box-sizing: border-box;
+  }
+  .scrolly__item--active {
+    opacity: 1;
+  }
+  .scrolly__item--inactive .scrolly__item-desc,
+  .scrolly__item--inactive .scrolly__item-title {
+    color: var(--scrolly-text-muted);
+  }
+}
+
+/* templates/StickyStackedCards/StickyStackedCards.css */
+:root {
+  --ssc-bg: var(--color-slate-50);
+  --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-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-img-height-mobile: 21rem;
+}
+.ssc {
+  width: 100%;
+  background-color: var(--ssc-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.ssc__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: var(--spacing-64) var(--spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-48);
+  box-sizing: border-box;
+}
+.ssc__header {
+  font-size: var(--ssc-header-size);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--ssc-header-lh);
+  color: var(--ssc-card-light-text);
+  margin: 0;
+}
+.ssc__track {
+  display: block;
+  padding-bottom: var(--ssc-img-height-mobile);
+}
+.ssc__card {
+  border-radius: var(--ssc-card-radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  position: sticky;
+  transform: scale(var(--card-scale, 1));
+  transform-origin: top center;
+  will-change: transform;
+  transition: transform 0.12s ease-out;
+}
+.ssc__card--light {
+  background-color: var(--ssc-card-light-bg);
+  color: var(--ssc-card-light-text);
+}
+.ssc__card--coral {
+  background-color: var(--ssc-card-coral-bg);
+  color: var(--ssc-card-coral-text);
+}
+.ssc__card--dark {
+  background-color: var(--ssc-card-dark-bg);
+  color: var(--ssc-card-dark-text);
+}
+.ssc__card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ssc-content-gap);
+  padding: var(--spacing-32);
+}
+.ssc__card-title {
+  font-size: var(--ssc-title-size);
+  font-weight: var(--font-weight-extra-bold);
+  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);
+  line-height: var(--ssc-body-lh);
+  color: inherit;
+  margin: 0;
+}
+.ssc__card-image {
+  position: relative;
+  height: var(--ssc-img-height-mobile);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.ssc__card-image img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+@media (min-width: 768px) {
+  .ssc__inner {
+    padding: var(--spacing-80) var(--spacing-24);
+    gap: var(--spacing-64);
+  }
+  .ssc__header {
+    text-align: center;
+  }
+}
+@media (min-width: 992px) {
+  .ssc__inner {
+    padding: var(--spacing-112) var(--spacing-64);
+    gap: var(--spacing-80);
+  }
+  .ssc__track {
+    padding-bottom: var(--ssc-card-min-height);
+  }
+  .ssc__card {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    min-height: var(--ssc-card-min-height);
+  }
+  .ssc__card-content {
+    padding: var(--spacing-56);
+    justify-content: flex-start;
+    align-self: stretch;
+  }
+  .ssc__card-image {
+    height: auto;
+    min-height: 100%;
+    align-self: stretch;
+  }
+}
+
+/* templates/CTABanner/CTABanner.css */
+:root {
+  --ctab-max-width: 80rem;
+  --ctab-stage-height: calc(11 * var(--ctab-grid-cell));
+  --ctab-hero-max-width: 90%;
+  --ctab-avatar-radius: var(--radius-xl);
+  --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 5);
+  --ctab-avatar-size: var(--ctab-grid-cell);
+  --ctab-section-min-height: var(--ctab-stage-height);
+}
+@media (min-width: 480px) and (max-width: 767px) {
+  :root {
+    --ctab-hero-max-width: 80%;
+    --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 7);
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  :root {
+    --ctab-stage-height: 48rem;
+    --ctab-hero-max-width: 70%;
+    --ctab-avatar-radius: var(--radius-2xl);
+    --ctab-grid-cell: calc((100vw - 2 * var(--spacing-24)) / 11);
+    --ctab-section-min-height: var(--ctab-stage-height);
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --ctab-stage-height: 42.5rem;
+    --ctab-hero-max-width: 52.875rem;
+    --ctab-avatar-radius: var(--radius-2xl);
+    --ctab-grid-cell: 6rem;
+    --ctab-avatar-size: 6rem;
+    --ctab-section-min-height: 42.5rem;
+  }
+  .ctab:not(.ctab--compact) {
+    --ctab-stage-height: 54rem;
+    --ctab-section-min-height: 54rem;
+  }
+}
+.ctab {
+  position: relative;
+  width: 100%;
+  min-height: var(--ctab-section-min-height);
+  background-color: var(--color-coral-500);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ctab__grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%),
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%);
+  -webkit-mask-composite: destination-in;
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%),
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 20%,
+      black 80%,
+      transparent 100%);
+  mask-composite: intersect;
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) var(--ctab-grid-cell)),
+    repeating-linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) calc(var(--ctab-grid-cell) - 1px),
+      var(--color-opacity-white-16) var(--ctab-grid-cell));
+  background-position: var(--spacing-24) calc(1px - var(--ctab-grid-cell));
+}
+@media (min-width: 992px) {
+  .ctab__grid {
+    background-position: max(0px, calc((100vw - var(--ctab-max-width)) / 2)) calc(1px - var(--ctab-grid-cell));
+  }
+}
+.ctab__inner {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--ctab-section-min-height);
+  max-width: var(--ctab-max-width);
+  margin: 0 auto;
+  padding: 0 var(--spacing-24);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .ctab__inner {
+    padding: 0;
+  }
+}
+.ctab__stage {
+  position: relative;
+  width: 100%;
+  height: var(--ctab-stage-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ctab__hero {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-16);
+  width: var(--ctab-hero-max-width);
+  max-width: 100%;
+  text-align: center;
+  padding: var(--spacing-48) var(--spacing-24);
+}
+.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);
+  color: var(--color-slate-50);
+}
+.ctab__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-width: var(--spacing-96);
+  padding: var(--spacing-16) var(--spacing-24);
+  background-color: var(--color-slate-1200);
+  color: var(--color-slate-50);
+  border-radius: var(--radius-full);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-extra-bold);
+  line-height: var(--line-height-xs);
+  text-decoration: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: background-color 100ms ease;
+}
+.ctab__cta:hover {
+  background-color: var(--color-slate-1100);
+}
+.ctab__avatar {
+  position: absolute;
+  width: var(--ctab-avatar-size);
+  height: var(--ctab-avatar-size);
+  border-radius: var(--ctab-avatar-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-md);
+  flex-shrink: 0;
+  left: var(--av-d-left, auto);
+  right: var(--av-d-right, auto);
+  top: var(--av-d-top, auto);
+}
+.ctab__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: var(--ctab-avatar-radius);
+}
+@media (max-width: 991px) {
+  .ctab__avatar {
+    left: var(--av-m-left, auto);
+    right: var(--av-m-right, auto);
+    top: var(--av-m-top, auto);
+  }
+  .ctab__avatar--desktop-only {
+    display: none;
+  }
+}
+
+/* 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-text-day: var(--color-slate-1400);
+  --dnt-text-night: var(--color-slate-50);
+  --dnt-btn-bg: var(--color-coral-500);
+  --dnt-btn-bg-hover: var(--color-coral-600);
+  --dnt-btn-text: var(--color-slate-50);
+  --dnt-btn-radius: var(--radius-full);
+  --dnt-btn-px: var(--spacing-24);
+  --dnt-btn-py: var(--spacing-16);
+  --dnt-btn-size: var(--font-size-md);
+  --dnt-btn-lh: var(--line-height-xs);
+  --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-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-gap: var(--spacing-16);
+}
+@media (min-width: 992px) {
+  :root {
+    --dnt-content-py: var(--spacing-96);
+    --dnt-content-px: var(--spacing-48);
+  }
+}
+.dnt {
+  position: relative;
+  height: var(--dnt-wrapper-height);
+  width: 100%;
+  font-family: var(--font-family-base);
+}
+.dnt__sticky {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+.dnt__bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  display: block;
+  pointer-events: none;
+}
+.dnt__bg--day {
+  z-index: 0;
+}
+.dnt__bg--night {
+  z-index: 1;
+}
+.dnt__content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+  padding: var(--dnt-content-py) var(--dnt-content-px);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .dnt__content {
+    align-items: center;
+  }
+}
+.dnt__text-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dnt-gap);
+  max-width: var(--dnt-content-max-width);
+}
+.dnt__crossfade-wrap {
+  display: grid;
+  grid-template-areas: "stack";
+}
+.dnt__crossfade-wrap > * {
+  grid-area: stack;
+}
+.dnt__headline {
+  margin: 0;
+  font-family: var(--font-family-base);
+  font-size: var(--dnt-headline-size);
+  font-weight: var(--dnt-headline-weight);
+  line-height: var(--dnt-headline-lh);
+}
+.dnt__description {
+  margin: 0;
+  font-family: var(--font-family-base);
+  font-size: var(--dnt-desc-size);
+  font-weight: var(--dnt-desc-weight);
+  line-height: var(--dnt-desc-lh);
+}
+.dnt__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-start;
+  padding: var(--dnt-btn-py) var(--dnt-btn-px);
+  background-color: var(--dnt-btn-bg);
+  color: var(--dnt-btn-text);
+  border-radius: var(--dnt-btn-radius);
+  font-family: var(--font-family-base);
+  font-size: var(--dnt-btn-size);
+  font-weight: var(--dnt-btn-weight);
+  line-height: var(--dnt-btn-lh);
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.3s ease;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.dnt__btn:hover {
+  background-color: var(--dnt-btn-bg-hover);
+}
+
+/* templates/PaymentMethods/PaymentMethods.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 {
+  position: relative;
+  width: 100%;
+  background-color: var(--pm-bg);
+  font-family: var(--font-family-base);
+  box-sizing: border-box;
+}
+.pm__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  align-items: flex-start;
+  max-width: var(--pm-max-width);
+  margin: 0 auto;
+  padding: var(--pm-section-py-mobile) var(--pm-section-px-mobile);
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .pm__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);
+  }
+}
+.pm__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+  align-items: flex-start;
+  width: 100%;
+  order: 1;
+}
+@media (min-width: 992px) {
+  .pm__content {
+    flex-shrink: 0;
+    width: var(--pm-text-width);
+    order: 2;
+  }
+}
+.pm__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);
+}
+.pm__text-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+.pm__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);
+}
+.pm__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);
+}
+.pm__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);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.pm__link:hover {
+  text-decoration: underline;
+}
+.pm__media {
+  position: relative;
+  width: 100%;
+  order: 2;
+  flex-shrink: 0;
+}
+@media (min-width: 992px) {
+  .pm__media {
+    flex: 1 0 0;
+    min-width: 0;
+    order: 1;
+    align-self: stretch;
+  }
+}
+.pm__carousel {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pm-col-gap);
+  height: var(--pm-carousel-height-mob);
+  overflow: hidden;
+}
+@media (min-width: 992px) {
+  .pm__carousel {
+    height: var(--pm-carousel-height);
+  }
+}
+.pm__fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--pm-fade-height);
+  pointer-events: none;
+  z-index: 2;
+}
+.pm__fade--top {
+  top: 0;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--pm-bg) 0%,
+      rgba(0, 0, 0, 0) 100%);
+}
+.pm__fade--bottom {
+  bottom: 0;
+  background:
+    linear-gradient(
+      to top,
+      var(--pm-bg) 0%,
+      rgba(0, 0, 0, 0) 100%);
+}
+.pm__col {
+  flex: 1 0 0;
+  align-self: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-card-gap);
+  min-width: 0;
+  will-change: transform;
+}
+.pm__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);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .pm__card {
+    border-radius: var(--pm-card-radius);
+    padding: var(--pm-card-py) var(--pm-card-px);
+  }
+}
+.pm__card-img-wrap {
+  width: 100%;
+  height: var(--pm-card-img-h-mobile);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+@media (min-width: 992px) {
+  .pm__card-img-wrap {
+    height: var(--pm-card-img-h);
+  }
+}
+.pm__card-img-wrap img {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
 /*# sourceMappingURL=index.css.map */