/* Phone/tablet: same desktop page, readable and fast. */
html, body {
  background: #141210;
}

.reveal,
.hero-copy,
.hero-copy.motion-stagger,
.motion-ready .motion-stagger > *,
.motion-ready .hero-copy.is-visible .hero-title-line > span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

.hero picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero-bg,
.hero picture .hero-bg,
.section-bg,
.tariff-card-img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.pay-mark,
.cn-pay-chip img,
.hero-payment-logos img,
.footer-payments img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .hero {
    min-height: 100svh;
  }

  .hero-inner {
    padding-top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
  }

  .header-inner {
    grid-template-columns: auto auto !important;
  }

  .menu-toggle {
    display: inline-flex !important;
    justify-self: end;
  }

  .main-nav,
  .header-actions {
    display: none;
  }

  body.menu-open .main-nav {
    display: grid;
  }

  body.menu-open .header-actions {
    display: flex;
    position: fixed;
    top: calc(var(--header-h, 56px) + 8px);
    right: 16px;
    z-index: 40;
  }

  .pricing-showcase,
  .pricing-showcase.reveal,
  .pricing-showcase.reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .tariff-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tariff-slider__viewport::-webkit-scrollbar {
    display: none;
  }

  .tariff-slider__track {
    display: flex !important;
    gap: 12px;
    width: max-content !important;
  }

  .tariff-card-slide {
    flex: 0 0 min(72vw, 280px) !important;
    max-height: min(62vh, 520px);
    scroll-snap-align: start;
  }

  .tariff-card-img,
  .tariff-card-fallback {
    height: min(62vh, 520px) !important;
    max-height: min(62vh, 520px) !important;
    object-fit: cover !important;
  }

  .tariff-glass {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .tariff-glass__price,
  .tariff-glass__meta,
  .tariff-glass__cta {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .tariff-slider__arrow {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .tariff-card-slide--no-img .tariff-card-fallback {
    display: flex !important;
  }

  .photo-band,
  .photo-band-tall {
    min-height: 36vw !important;
  }

  .pricing-statement h2 {
    font-size: clamp(26px, 7vw, 36px) !important;
    margin-bottom: 12px !important;
  }

  .devices-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tariff-card-slide {
    flex-basis: min(86vw, 340px) !important;
  }

  .hero-title {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}