/* Hero — phone coverflow (same look on every device via scaled design canvas) */
body.home-page .hero-landing.hero-landing--merchant.hero-landing--phones,
body.home-page .hero-landing--phones {
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding:
    calc(var(--home-nav-offset, 72px) + 2rem)
    0
    0.85rem !important;
}

@media (max-width: 899px) {
  body.home-page .hero-landing.hero-landing--merchant.hero-landing--phones,
  body.home-page .hero-landing.hero-landing--merchant.hero-landing--phones {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding:
      calc(var(--home-nav-offset, 64px) + 1.5rem)
      0
      0.65rem !important;
  }
}

@media (max-width: 768px) {
  body.home-page .hero-landing.hero-landing--merchant.hero-landing--phones {
    min-height: 0 !important;
    padding:
      calc(var(--home-nav-offset, 64px) + 1.35rem)
      0
      0.5rem !important;
  }
}

body.home-page .hero-landing--phones .hero-merchant-bg,
body.home-page .hero-landing--phones .hero-merchant-vignette {
  display: none !important;
}

body.home-page .hero-landing--phones .hero-notifications-layout {
  display: none !important;
}

body.home-page .hero-phones-stage {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  /* Isolate from html[dir=rtl] so coverflow order/transforms stay stable */
  direction: ltr;
  /* Hide until Swiper centers coverflow — avoids left flash on first paint */
  opacity: 0;
  transition: opacity 0.18s ease;
}

body.home-page .hero-phones-stage.is-ready {
  opacity: 1;
}

body.home-page .hero-phones-swiper,
body.home-page .hero-phones-swiper .swiper-wrapper {
  direction: ltr;
}

/* Fixed design — JS measures fan and scales to viewport edges */
body.home-page .hero-phones-scaler {
  width: 920px;
  flex-shrink: 0;
  transform-origin: top center;
  will-change: transform;
}

body.home-page .hero-phones-swiper {
  width: 100%;
  padding: 0.5rem 0 0.75rem !important;
  overflow: visible !important;
}

body.home-page .hero-phones-swiper .swiper-wrapper {
  align-items: center;
}

body.home-page .hero-phones-swiper .swiper-slide {
  width: 200px;
  height: auto !important;
  background: transparent;
  box-shadow: none;
}

body.home-page .hero-phones-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 371 / 748;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
}

body.home-page .hero-phones-swiper .swiper-slide-shadow-left,
body.home-page .hero-phones-swiper .swiper-slide-shadow-right {
  display: none !important;
}

body.home-page .hero-landing--phones .hero-merchant-caption {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  margin-top: 0.35rem;
  padding: 0 clamp(0.75rem, 3vw, 1.5rem);
  text-align: center;
}

body.home-page .hero-landing--phones .hero-merchant-caption .hero-title--split {
  font-size: clamp(1.45rem, 5vw, 3rem);
  margin-bottom: 0;
}

body.home-page .hero-landing--phones .hero-merchant-caption .hero-line--1 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

body.home-page .hero-landing--phones .hero-merchant-caption .hero-line--2 {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

body.home-page .hero-landing--phones .hero-merchant-caption .hero-title-brand {
  color: var(--orange, #e84c0e);
  -webkit-text-fill-color: var(--orange, #e84c0e);
}

/* Tablets stack under partners */
.home-tablets-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  width: 100%;
  background: transparent;
  border: none;
  direction: ltr;
}

.home-tablets-stack img {
  display: block;
  width: 100%;
  max-width: min(680px, 72vw);
  height: auto;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 768px) {
  .home-tablets-stack img {
    width: 62vw;
    max-width: min(360px, 62vw);
    margin-inline: auto;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  body.home-page .hero-landing--phones {
    padding-top: calc(var(--home-nav-offset, 56px) + 0.25rem) !important;
    padding-bottom: 0.5rem !important;
  }

  body.home-page .hero-landing--phones .hero-merchant-caption .hero-title--split {
    font-size: clamp(1.1rem, 4.2vh, 1.6rem);
  }
}