/* Layout for the operations workflow and feature grids. */
@media (max-width: 767px) {
  .ops-hero > .container > .grid { row-gap: 24px; }
  .ops-hero .ops-hero__copy { margin-bottom: 0; }
  .ops-hero__art {
    display: grid;
    place-items: center;
    padding: 16px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
  }
  .ops-hero__art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  .ops-hero .ops-hero__device {
    position: relative;
    inset: auto;
    width: min(56%, 240px);
    height: auto;
    transform: none;
  }
}
@media (max-width: 1023.98px) {
  .ops-workflow { row-gap: 10px; }
  .ops-workflow > div:first-child { padding: 18px 14px; text-align: start; }
  .ops-workflow > div:first-child > h2 { margin-bottom: 12px; text-wrap: balance; }
  .ops-workflow .grid-cols-3 > div { padding: 16px 14px; text-align: start; }
  .ops-workflow .grid-cols-3 h3 { margin-bottom: 6px; font-size: 24px; }
  .ops-workflow .grid-cols-3 h4 { margin-bottom: 6px; }
}

@media (max-width: 1023.98px) {
  html[lang="zh-CN"] #counter_trusted h2 {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .ops-features .ops-features__heading { margin-bottom: 24px; }
  .ops-features .ops-features__card { padding-block: 28px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ops-features .ops-features__card { padding-inline: 24px; }
}

@media (max-width: 767px) {
  .ops-product-art > .ops-product-art__tile { right: 0; max-width: min(68%, 275px); }
  .ops-case-cards { padding-block-end: clamp(40px, 12vw, 64px); }
}

/* Let long card groups use the homepage carousel on phones and tablets. */
@media (max-width: 1180px) {
  .ops-card-rail[data-weswoo-mobile-carousel] {
    --ops-rail-card: max(min(84%, 390px), 54%);
    display: flex;
    align-items: stretch;
    min-width: 0;
    gap: 16px;
    padding: 8px 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ops-card-rail::-webkit-scrollbar { display: none; }
  .ops-card-rail > * {
    box-sizing: border-box;
    flex: 0 0 var(--ops-rail-card);
    min-width: 0;
    scroll-snap-align: center;
    overflow-wrap: break-word;
  }
  .ops-card-rail.ops-insights-track > * {
    padding: 24px;
    border: 1px solid rgba(135, 145, 126, .28);
    border-radius: 16px;
  }
  .ops-insights-track > .ops-features__card::before,
  .ops-insights-track > .ops-features__card::after { content: none !important; }

  .ops-card-rail + .weswoo-carousel-controls {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  .ops-card-rail + .weswoo-carousel-controls .weswoo-carousel-dot {
    width: 44px;
    height: 44px;
  }
  .ops-card-rail + .weswoo-carousel-controls .weswoo-carousel-dot::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8a9287;
    content: "";
    transform: translate(-50%, -50%);
  }
  .ops-card-rail + .weswoo-carousel-controls .weswoo-carousel-dot[aria-current="true"]::before {
    background: #aeea35;
  }
  .ops-case-cards + .weswoo-carousel-controls {
    margin-bottom: clamp(24px, 6vw, 48px);
  }
}

@media (max-width: 767px) {
  .ops-support { overflow: clip; }
  .ops-support > div.absolute:first-child {
    bottom: 0;
    height: auto;
  }
}

@media (min-width: 1180.01px) {
  .ops-insights-track > :nth-child(-n+3) {
    border-bottom: 1px solid rgba(135, 145, 126, .20);
  }
}

/* Keep pilot artwork clipped without trapping the page's vertical scroll. */
@media (max-width: 1180px) {
  .ops-features + section.overflow-x-hidden {
    overflow: hidden;
    overflow: clip;
  }
}