/* XD 24P1-17 / 24SP4-2: horizontal flow at every width, readable mobile labels. */
html:root body.support-page .sup-diagram-compare .support-cycle-mobile {
  --scm-stroke: 32px;
  --scm-head: 34px;
}
html:root body.support-page .support-cycle-mobile .scm-loop path {
  stroke-width: var(--scm-stroke) !important;
}
@media (min-width: 769px) and (max-width: 1199px) {
  html:root body.support-page .sup-diagram-compare .support-cycle-mobile {
    max-width: calc(100vw - 48px) !important;
  }
}
/* Preserve readable labels when a touch tablet scales the desktop canvas. */
html[data-tablet-layout="desktop"] body.support-page .support-cycle-mobile .scm-connection span,
html[data-tablet-layout="desktop"] body.support-page .support-cycle-mobile .scm-upgrade {
  font-size: calc(16px * var(--tablet-ui-zoom)) !important;
}
@media (max-width: 768px) {
  html:root body.support-page .sup-diagram-compare .support-cycle-mobile {
    --scm-stroke: 20px;
    --scm-head: 22px;
    grid-template-columns: 70px minmax(0, 1fr) 70px minmax(0, 1fr) 70px !important;
    grid-template-rows: auto !important;
    max-width: 640px !important;
    padding: 56px 56px 62px 0 !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-card {
    height: 220px !important;
    padding: 16px 8px !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-title {
    writing-mode: vertical-rl !important;
    font-size: 22px !important;
    letter-spacing: .04em !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-connection span {
    top: auto !important;
    bottom: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-upgrade {
    top: auto !important;
    right: auto !important;
    bottom: 8px !important;
    left: calc(50% - 28px) !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    height: auto !important;
    min-height: 36px !important;
    padding: 6px 16px !important;
    writing-mode: horizontal-tb !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
  }
}
@media (max-width: 480px) {
  html:root body.support-page .sup-diagram-compare .support-cycle-mobile {
    --scm-stroke: 12px;
    --scm-head: 14px;
    grid-template-columns: 46px minmax(0, 1fr) 46px minmax(0, 1fr) 46px !important;
    padding: 46px 32px 50px 0 !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-card {
    height: 182px !important;
    padding: 12px 4px !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-title {
    font-size: 18px !important;
    letter-spacing: .04em !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-connection span {
    bottom: calc(100% + 10px) !important;
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 14px !important;
  }
  html:root body.support-page .support-cycle-mobile .scm-upgrade {
    left: calc(50% - 16px) !important;
    min-height: 30px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
  }
}