/* Native smooth scroll fights wheel scrolling on the timeline; keep scroll instant */
html.metayb-iot-smooth-page {
  scroll-behavior: auto;
}

/* IoT section rise-in — short, light transitions */
.metayb-iot-reveal-section .metayb-who-reveal {
  opacity: 0;
  transform: translate3d(0, var(--metayb-who-y, 40px), 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--metayb-who-delay, 0ms);
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.metayb-iot-reveal-section .metayb-who-reveal.metayb-who-perspective {
  transform: perspective(1200px) translate3d(0, var(--metayb-who-y, 40px), 0);
}

.metayb-iot-reveal-section.metayb-who-inview .metayb-who-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.metayb-iot-reveal-section.metayb-who-inview .metayb-who-reveal.metayb-who-perspective {
  transform: perspective(1200px) translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .metayb-iot-reveal-section .metayb-who-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 809.98px) {
  section[data-framer-name="who we are"].metayb-who-inview #how-it-works-content {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* White rounded card behind the whole step. Icons are not styled. */
section[data-framer-name="who we are"] #how-it-works-content [id^="content-"] {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border-radius: 16px;
  transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

section[data-framer-name="who we are"] #how-it-works-content [id^="content-"].metayb-timeline-filled {
  background-color: rgb(255, 255, 255) !important;
}

section[data-framer-name="who we are"] #how-it-works-content [data-border="true"] {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Single 2px timeline track (gray base + dark fill), no duplicate line */
section[data-framer-name="who we are"] [data-framer-name="Progress bar"] {
  z-index: 3;
  pointer-events: none;
  overflow: visible !important;
}

section[data-framer-name="who we are"] [data-framer-name="Progress bar"] .framer-u86vw4-container > div {
  position: relative !important;
  width: 2px !important;
  min-width: 2px !important;
  max-width: 2px !important;
  margin: 0 auto !important;
  background: rgb(237, 238, 241) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

section[data-framer-name="who we are"] [data-framer-name="Progress bar"] .metayb-timeline-gray-track {
  display: none !important;
}

section[data-framer-name="who we are"] .framer-ba3sil {
  background: transparent !important;
  overflow: visible !important;
}

section[data-framer-name="who we are"] #how-it-works-content [data-border="true"] {
  border-left-color: transparent !important;
}

section[data-framer-name="who we are"] [data-framer-name="Progress bar"] .metayb-timeline-fill-clip {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  height: 100% !important;
  transform-origin: top !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  will-change: transform;
  backface-visibility: hidden;
}

section[data-framer-name="who we are"] [data-framer-name="Progress bar"] .metayb-timeline-progress-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  transform: none !important;
  backface-visibility: hidden;
}