/**
 * 旧版浏览器兼容（360 兼容模式、IE11 等）
 */

/* 无 JS 时内容可见 */
html.no-js .reveal,
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* 标记为旧版时加强图片限制 */
html.is-legacy img,
html.is-legacy picture img {
  max-width: 100% !important;
  height: auto !important;
}

html.is-legacy .showcase-shot img,
html.is-legacy .showcase-shot picture img {
  max-height: 520px !important;
}

html.is-legacy .showcase-desktop img,
html.is-legacy .showcase-desktop picture img {
  max-height: 560px !important;
}

html.is-legacy .hero-screenshot {
  max-height: 456px !important;
  height: auto !important;
}

@supports not (aspect-ratio: 1 / 1) {
  .phone-screen {
    position: relative;
    height: auto;
    overflow: hidden;
  }

  .phone-screen::before {
    content: "";
    display: block;
    padding-top: 211.11%;
  }

  .phone-screen > picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .hero-screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .showcase-shot img,
  .showcase-shot picture img {
    max-height: 520px;
    aspect-ratio: auto;
  }

  .showcase-desktop img,
  .showcase-desktop picture img {
    max-height: 560px;
  }

  .contact-qr {
    width: 120px;
    height: 120px;
  }

  .contact-qr img {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
  }
}

@supports not (width: min(100%, 1px)) {
  .container {
    width: 94%;
    max-width: 960px;
  }

  .phone-mockup {
    width: 100%;
    max-width: 240px;
  }

  .dialog {
    width: 94%;
    max-width: 440px;
  }
}

@supports not (display: grid) {
  .hero-grid,
  .compare-grid,
  .guide-grid,
  .showcase-gallery-3,
  .func-tool-grid,
  .product-cards,
  .footer-grid {
    display: block;
  }

  .hero-grid > *,
  .compare-grid > *,
  .guide-grid > *,
  .showcase-gallery-3 > *,
  .func-tool-grid > *,
  .product-cards > * {
    margin-bottom: 16px;
  }
}

@supports not (gap: 1px) {
  .hero-actions .btn {
    margin: 0 8px 8px 0;
  }

  .compare-grid .compare-card + .compare-card {
    margin-top: 16px;
  }
}

@supports not (object-fit: cover) {
  .hero-screenshot,
  .showcase-shot img {
    height: auto;
    object-fit: none;
  }
}

/* IE / 旧版通用 */
[hidden] {
  display: none !important;
}

.modal {
  display: none;
}

.modal:not([hidden]) {
  display: flex;
}