/**
 * Shared component size contract.
 *
 * Pages may use one of the explicit banner variants below, but they must not
 * invent a new hero height or card rhythm in page-local CSS.
 */
:root {
  --ui-banner-standard-height: 650px;
  --ui-banner-overview-height: 620px;
  --ui-banner-detail-height: 650px;
  --ui-banner-product-height: 650px;
  --ui-banner-compact-height: 560px;
  --ui-banner-media-height: 433px;
  --ui-card-radius: 8px;
  --ui-card-gap: 24px;
  --ui-card-padding: 24px;
  --ui-card-standard-height: 306px;
  --ui-card-feature-height: 374px;
  --ui-card-tall-height: 420px;
}

@media (max-width: 1440px) {
  :root {
    --ui-banner-standard-height: 620px;
  }
}

html body[class] main#main-content :is(
  .home-hero,
  .product-center-hero,
  .solutions-live-hero,
  .industries-hero,
  .support-hero,
  .about-redesign-hero,
  .kh-hero,
  .case-archive-hero,
  .downloads-hero,
  .cert-hero,
  .case-study-hero,
  .case-study-hero-grid
) {
  height: var(--ui-banner-overview-height);
  min-height: var(--ui-banner-overview-height);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .solution-hero,
  .industry-hero,
  .resource-detail-hero
) {
  height: var(--ui-banner-detail-height);
  min-height: var(--ui-banner-detail-height);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .inner-hero.compact,
  .archive-hero.compact
) {
  height: var(--ui-banner-compact-height);
  min-height: var(--ui-banner-compact-height);
  box-sizing: border-box;
}

html body[class] main#main-content .pd-hero {
  min-height: var(--ui-banner-product-height);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .home-hero__inner,
  .product-center-hero-inner,
  .solutions-live-hero-grid,
  .industries-hero__grid,
  .support-hero__grid,
  .solution-hero-grid,
  .industry-hero-grid,
  .case-archive-hero__grid,
  .cert-hero-grid
) {
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .home-equipment-card,
  .product-center-category-card,
  .solution-equipment-card,
  .support-service-card,
  .resource-category-card,
  .industry-solution-card
) {
  min-height: var(--ui-card-standard-height);
  height: 100%;
  border-radius: var(--ui-card-radius);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .home-solution-card,
  .product-center-featured-card,
  .resource-document-card,
  .case-study-card
) {
  min-height: var(--ui-card-feature-height);
  height: 100%;
  border-radius: var(--ui-card-radius);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .industry-card,
  .industry-info-card,
  .challenge-card
) {
  min-height: var(--ui-card-tall-height);
  height: 100%;
  border-radius: var(--ui-card-radius);
  box-sizing: border-box;
}

html body[class] main#main-content :is(
  .home-equipment__grid,
  .home-solutions__grid,
  .product-center-category-grid,
  .product-center-featured-grid,
  .solutions-live-cards,
  .solutions-live-steps,
  .industries-grid,
  .challenge-grid,
  .support-services__grid,
  .solution-equipment-grid,
  .industry-solution-grid,
  .resource-category-grid,
  .resource-featured-grid,
  .case-study-grid
) {
  gap: var(--ui-card-gap);
  align-items: stretch;
}

html body[class] main#main-content :is(
  .home-equipment-card,
  .product-center-category-card,
  .solution-equipment-card,
  .support-service-card,
  .resource-category-card,
  .industry-solution-card,
  .home-solution-card,
  .product-center-featured-card,
  .resource-document-card,
  .case-study-card,
  .industry-card,
  .industry-info-card,
  .challenge-card
) :is(h2, h3) {
  line-height: var(--line-height-tight);
}

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --ui-banner-standard-height: 570px;
    --ui-banner-overview-height: 540px;
    --ui-banner-detail-height: 580px;
    --ui-banner-product-height: 650px;
    --ui-banner-compact-height: 480px;
    --ui-card-standard-height: 280px;
    --ui-card-feature-height: 330px;
    --ui-card-tall-height: 360px;
  }
}

@media (min-width: 1367px) {
  html body.home[class] main#main-content .home-hero .home-hero__benefits {
    width: min(calc(100vw - var(--home-gutter) - var(--home-gutter)), var(--home-container));
    max-width: none;
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 32px;
  }

  html body.home[class] main#main-content .home-hero .home-hero__benefits > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* The compact desktop header remains collapsed through 1366px. Keep its
 * first-screen content inside a content-driven hero at the same breakpoint. */
@media (min-width: 1025px) and (max-width: 1366px) {
  html body.home[class] main#main-content.home-page .home-hero,
  html body.home[class] main#main-content.home-page .home-hero__inner {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__inner {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    align-items: center !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__copy {
    padding: 48px 18px 48px 0 !important;
  }

  html body.home[class] main#main-content.home-page .home-hero h1 {
    font-size: clamp(40px, 3.8vw, 52px) !important;
    line-height: 1.02 !important;
  }

  html body.home[class] main#main-content.home-page .home-hero h1 > span {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__actions {
    gap: 12px !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__actions .home-button {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 170px !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__benefits {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__benefits > li {
    min-width: 0 !important;
    flex: 1 1 180px !important;
    white-space: normal !important;
  }

  html body.home[class] main#main-content.home-page .home-hero__visual {
    height: clamp(320px, 34vw, 440px) !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
  }
}

/* Home equipment copy is CMS-managed. Rows may equalize, but text may not be
 * truncated to force a fixed card height. */
@media (min-width: 769px) {
  html body.home[class] main#main-content.home-page .home-equipment__grid {
    grid-auto-rows: 1fr !important;
  }

  html body.home[class] main#main-content.home-page .home-equipment-card.product-center-category-card {
    height: 100% !important;
    min-height: 0 !important;
  }

  html body.home[class] main#main-content.home-page .home-equipment-card .product-center-category-copy {
    height: auto !important;
    min-height: 172px !important;
  }

  html body.home[class] main#main-content.home-page .home-equipment-card .product-center-category-copy :is(h3, p) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }
}

/* Solution detail changes from two columns to one at this width. Let both the
 * copy and the complete gallery establish the hero height. */
@media (min-width: 761px) and (max-width: 1024px) {
  html body.single-solution main#main-content.solution-detail .solution-hero,
  html body.single-solution main#main-content.solution-detail .solution-hero-grid {
    height: auto !important;
    min-height: 0 !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
    padding-block: 48px 76px !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-hero-copy {
    width: 100% !important;
    max-width: 820px !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-gallery {
    width: 100% !important;
    max-width: 860px !important;
    height: auto !important;
    min-height: 0 !important;
    justify-self: start !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-gallery-main {
    grid-row: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-gallery-thumbs {
    grid-row: 2 !important;
    max-height: none !important;
    flex-direction: row !important;
    padding-bottom: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body.single-solution main#main-content.solution-detail .solution-gallery-thumb {
    width: 72px !important;
    min-width: 72px !important;
    min-height: 66px !important;
  }
}

/* Insights switches to one column at 1100px and can also exceed the nominal
 * desktop height with longer CMS copy. Preserve the baseline as a minimum,
 * then allow natural growth. */
@media (min-width: 769px) {
  html body:is(.post-type-archive-insight, .page-template-page-insights) main#main-content.knowledge-hub .kh-hero {
    height: auto !important;
    min-height: var(--ui-banner-overview-height) !important;
  }

  html body:is(.post-type-archive-insight, .page-template-page-insights) main#main-content.knowledge-hub .kh-hero-grid {
    height: auto !important;
  }

  html body.post-type-archive-solution main#main-content .solutions-live-hero,
  html body.page-template-page-industries main#main-content.industries-overview .industries-hero {
    height: auto !important;
    min-height: var(--ui-banner-overview-height) !important;
  }

  html body.post-type-archive-solution main#main-content .solutions-live-hero-grid,
  html body.page-template-page-industries main#main-content.industries-overview .industries-hero__grid {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  :root {
    --ui-card-gap: 16px;
    --ui-card-padding: 20px;
    --ui-card-standard-height: auto;
    --ui-card-feature-height: auto;
    --ui-card-tall-height: auto;
  }

  html body[class] main#main-content :is(
    .home-hero,
    .product-center-hero,
    .solutions-live-hero,
    .industries-hero,
    .support-hero,
    .about-redesign-hero,
    .kh-hero,
    .case-archive-hero,
    .downloads-hero,
    .cert-hero,
    .solution-hero,
    .industry-hero,
    .resource-detail-hero,
    .inner-hero,
    .archive-hero,
    .pd-hero,
    .case-study-hero
  ) {
    height: auto;
    min-height: 0;
  }

  html body[class] main#main-content :is(
    .home-equipment-card,
    .product-center-category-card,
    .solution-equipment-card,
    .support-service-card,
    .resource-category-card,
    .industry-solution-card,
    .home-solution-card,
    .product-center-featured-card,
    .resource-document-card,
    .case-study-card,
    .industry-card,
    .industry-info-card,
    .challenge-card
  ) {
    height: auto;
    min-height: 0;
  }
}

/* Products capability typography follows the compact benefit row inside the
 * Homepage banner. */
html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic strong {
  color: #101828;
  font-size: clamp(15px, .86vw, 16px) !important;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.68 !important;
}

html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic small {
  color: #475467;
  font-size: clamp(15px, .86vw, 16px) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35 !important;
  text-transform: none;
}

html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic-icon,
html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic-icon svg {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

/* Products banner capability layout. Anchor the strip immediately above the
 * category navigation and give every item a predictable grid cell. */
@media (min-width: 1201px) {
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-hero-image {
    inset-block: 0;
    height: 100%;
    min-height: 100%;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistics {
    height: 72px;
    margin-top: -72px;
    top: -72px;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistics-grid {
    height: 72px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, clamp(164px, 12.8vw, 190px)));
    justify-content: start;
    gap: 0 clamp(8px, 1vw, 16px);
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:nth-child(n) {
    width: auto;
    min-width: 0;
    height: 72px;
    min-height: 72px;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 clamp(8px, 1vw, 16px);
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:first-child {
    padding-left: 0;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:last-child {
    padding-right: 0;
  }
}

@media (min-width: 761px) and (max-width: 1200px) {
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-hero-image {
    inset-block: 0;
    height: 100%;
    min-height: 100%;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistics {
    height: 176px;
    margin-top: 0;
    padding: 16px 0;
    top: 0;
    background: #f7f9fb;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistics-grid {
    height: 144px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 72px);
    gap: 0;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:nth-child(n) {
    width: auto;
    min-width: 0;
    height: 72px;
    min-height: 72px;
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 0 14px;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:nth-child(3n + 1) {
    padding-left: 0;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:nth-child(3n) {
    padding-right: 0;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav {
    top: 0;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav-wrap {
    margin-bottom: 0;
  }
}

/* Product carousel dots keep their compact visual mark while exposing a
 * full-size pointer and keyboard target. */
html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page button.products-slider-dot {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page button.products-slider-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d0d5dd;
  transform: translate(-50%, -50%);
}

html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page button.products-slider-dot[aria-current='page']::before {
  width: 18px;
  background: var(--c-brand);
}

html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page button.products-slider-dot:focus-visible {
  outline: 3px solid rgba(17, 24, 39, .9) !important;
  outline-offset: 1px !important;
}

@media (max-width: 760px) {
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistic:nth-child(n) {
    display: grid;
    grid-template-columns: 15px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }
}

/* Let the banner boundary pass through the category card's vertical center. */
html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav {
  top: 0;
  transform: translateY(-50%);
}

html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav-wrap {
  margin-bottom: 0;
}

/* The rail visually floats over the hero's bottom edge (transform above), so
 * its in-flow wrapper must not also reserve height. Collapse the wrapper on
 * desktop so the category section's top padding is the only reservation for
 * the floating rail — otherwise the two reservations stack into a large gap. */
@media (min-width: 901px) {
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav-wrap {
    height: 0;
    min-height: 0;
    overflow: visible;
  }
}

/* Products overview: every module shares one horizontal content frame. */
html body:is(.post-type-archive-product, .page-template-page-products) .products-page {
  --products-module-gutter: 72px;
}

html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-container {
  width: calc(100% - (var(--products-module-gutter) * 2)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page {
    --products-module-gutter: 16px;
  }
}

/* Process heading uses the same compact label scale as PRODUCT CATEGORIES. */
html body:is(.post-type-archive-product, .page-template-page-products) .products-page #product-process-title {
  color: var(--products-red) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.62 !important;
  letter-spacing: .08em !important;
}

html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-categories .product-center-kicker {
  color: var(--products-red) !important;
}

/* Cross-page content frame: Homepage is the source of truth.
 *
 * The Home page uses 48px side gutters from 1026px through 1440px, then
 * returns to the original fluid clamp on wider screens. Public overview pages
 * below use the same rail so banners, breadcrumbs and section modules line up
 * one-to-one against Home.
 */
  html body[class] {
    --tongyi-home-frame-shell: var(--container-page);
    --tongyi-home-frame-gutter: clamp(22px, 3.2vw, 72px);
  }

@media (min-width: 1026px) and (max-width: 1440px) {
  html body[class] {
    --tongyi-home-frame-gutter: 48px;
  }
}

@media (max-width: 1025px) {
  html body[class] {
    --tongyi-home-frame-gutter: 32px;
  }
}

@media (max-width: 768px) {
  html body[class] {
    --tongyi-home-frame-gutter: 24px;
  }
}

@media (max-width: 480px) {
  html body[class] {
    --tongyi-home-frame-gutter: 18px;
  }
}

@media (min-width: 769px) {
  html body[class] {
    --tongyi-banner-shell: var(--tongyi-home-frame-shell);
    --tongyi-banner-gutter: var(--tongyi-home-frame-gutter);
  }

  html body[class] .site-breadcrumbs .site-breadcrumbs__inner.shell,
  html body:is(.post-type-archive-product, .page-template-page-products, .post-type-archive-solution) .site-breadcrumbs__inner,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-container,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-hero-inner,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-statistics-grid,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav,
  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-categories > .products-container,
  html body.post-type-archive-solution .solutions-mobile-live .shell,
  html body.post-type-archive-solution .solutions-live-hero-grid,
  html body.single-solution main#main-content.solution-detail .solution-container,
  html body.single-product main#main-content .pd-shell,
  html body.tax-product_category main#main-content.product-selector-page > section > .shell,
  html body.tax-product_category main#main-content.product-category-generic > section > .shell,
  html body.tax-product_category main#main-content.product-category-generic .products-container,
  html body.tax-product_category main#main-content.product-category-empty > .shell,
  html body.tax-product_category main#main-content.product-selector-page .selector-support-grid,
  html body.tax-product_category main#main-content.product-selector-page .selector-service-strip,
  html body.tax-product_category .site-breadcrumbs__inner.shell,
  html body.page-template-page-industries .industries-shell,
  html body.page-template-page-industries .site-breadcrumbs__inner.shell,
  html body.page-template-page-industries .site-footer.site-footer .shell,
  html body.single-industry main#main-content .industry-hero-grid,
  html body.tax-application_industry main#main-content.industry-detail .shell,
  html body.page-template-page-services-support main#main-content.support-page .support-shell,
  html body.page-template-page-services-support main#main-content.support-page .support-hero__grid,
  html body.page-template-page-services-support main#main-content.support-page .support-capabilities > .support-shell,
  html body.page-template-page-downloads main#main-content.downloads-page .shell,
  html body.single-resource main#main-content.downloads-page .resource-detail-hero-grid,
  html body.single-resource main#main-content.downloads-page .resource-detail-main.shell,
  html body.single-resource main#main-content.downloads-page .resource-request-wrap.shell,
  html body.post-type-archive-case .case-archive-v2 .shell,
  html body.single-case main#main-content .case-detail-v3 .case-shell,
  html body.single-case main#main-content.case-detail-v3 .case-shell,
  html body.page-template-page-insights .knowledge-hub .shell,
  html body.post-type-archive-insight .knowledge-hub .shell,
  html body.single-insight main#main-content.insight-detail-page .insight-detail-layout,
  html body.page-template-page-contact .shell,
  html body.page-template-page-contact-us main#main-content.contact-page .shell,
  html body.page-id.contact-page .shell,
  html body[class] main#main-content .privacy-shell,
  html body[class] main#main-content .legal-shell,
  html body[class] main#main-content .cookie-shell {
    width: min(calc(100% - (var(--tongyi-home-frame-gutter) * 2)), var(--tongyi-home-frame-shell)) !important;
    max-width: var(--tongyi-home-frame-shell) !important;
    margin-inline: auto !important;
    box-sizing: border-box;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page {
    --products-module-gutter: var(--tongyi-home-frame-gutter) !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-container,
  html body.post-type-archive-solution .solutions-mobile-live .shell,
  html body.single-solution main#main-content.solution-detail .solution-container,
  html body.single-product main#main-content .pd-shell,
  html body.tax-product_category main#main-content.product-selector-page > section > .shell,
  html body.tax-product_category main#main-content.product-category-generic > section > .shell,
  html body.tax-product_category main#main-content.product-category-generic .products-container,
  html body.tax-product_category main#main-content.product-category-empty > .shell,
  html body.tax-product_category main#main-content.product-selector-page .selector-support-grid,
  html body.tax-product_category main#main-content.product-selector-page .selector-service-strip,
  html body.single-industry main#main-content .industry-hero-grid,
  html body.tax-application_industry main#main-content.industry-detail .shell,
  html body.page-template-page-downloads main#main-content.downloads-page .shell,
  html body.single-resource main#main-content.downloads-page .resource-detail-hero-grid,
  html body.single-resource main#main-content.downloads-page .resource-detail-main.shell,
  html body.single-resource main#main-content.downloads-page .resource-request-wrap.shell,
  html body.page-template-page-services-support main#main-content.support-page .support-shell,
  html body.page-template-page-services-support main#main-content.support-page .support-hero__grid,
  html body.page-template-page-services-support main#main-content.support-page .support-capabilities > .support-shell {
    padding-inline: 0 !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-hero::after {
    width: min(calc(100% - (var(--tongyi-home-frame-gutter) * 2)), var(--tongyi-home-frame-shell)) !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .product-center-hero-image {
    right: max(var(--tongyi-home-frame-gutter), calc((100% - var(--tongyi-home-frame-shell)) / 2)) !important;
    width: min(calc((100vw - (var(--tongyi-home-frame-gutter) * 2) - var(--tongyi-banner-gap)) / 2), 820px) !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) .products-page .products-category-nav {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.tax-product_category main#main-content.product-category-page .selector-hero .site-breadcrumbs__inner.shell {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}

/* Common detail-page card contract.
 *
 * Product detail cards intentionally keep their own composition. Other public
 * detail templates use different card implementations, so normalize only the
 * shared detail-page grids: every card fills its grid track and every row in a
 * module uses the same height. This prevents content length from changing the
 * visual rhythm between solution, industry, resource and case details.
 */
@media (min-width: 769px) {
  html body.single-solution main#main-content.solution-detail :is(
    .solution-category-grid,
    .solution-industry-grid,
    .solution-equipment-grid,
    .solution-case-grid
  ),
  html body.tax-application_industry main#main-content.industry-detail :is(
    .industry-card-grid,
    .industry-solution-grid,
    .industry-step-grid,
    .industry-challenge-grid
  ),
  html body.single-case main#main-content.case-detail-v3 :is(
    .case-detail-overview__grid,
    .case-detail-evidence__grid
  ),
  html body.single-resource main#main-content.downloads-page .resource-featured-grid {
    grid-auto-rows: 1fr;
    align-items: stretch;
  }

  html body.single-solution main#main-content.solution-detail :is(
    .solution-category-card,
    .solution-industry-card,
    .solution-equipment-card,
    .solution-case-card
  ),
  html body.tax-application_industry main#main-content.industry-detail :is(
    .industry-info-card,
    .industry-step-grid li,
    .industry-solution-card
  ),
  html body.single-case main#main-content.case-detail-v3 .case-detail-panel,
  html body.single-resource main#main-content.downloads-page .resource-document-card {
    height: 100%;
    box-sizing: border-box;
  }

  /* Keep card content anchored consistently when one description is shorter. */
  html body.single-solution main#main-content.solution-detail :is(
    .solution-category-card,
    .solution-industry-card,
    .solution-equipment-card,
    .solution-case-card
  ) > :last-child,
  html body.tax-application_industry main#main-content.industry-detail .industry-solution-card__content {
    display: flex;
    flex-direction: column;
  }
}

/* Unified statistics card contract.
 *
 * The markup already shares `.site-stats` / `.site-stat`, but older page
 * layers set different heights and track behavior. Normalize the public stats
 * rails so every overview page uses the same card rhythm while preserving the
 * natural column count of each module.
 */
@media (min-width: 769px) {
  html body[class] main#main-content :is(
    .home-statistics,
    .solutions-live-stats,
    .industries-stats,
    .support-capabilities__grid
  ) {
    width: 100% !important;
    height: 132px !important;
    min-height: 132px !important;
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e4e9ef !important;
    border-radius: 8px !important;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .035) !important;
    box-sizing: border-box;
  }

  html body.home[class] main#main-content .home-statistics {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  html body.post-type-archive-solution main#main-content .solutions-live-stats,
  html body.page-template-page-industries main#main-content .industries-stats,
  html body.page-template-page-services-support main#main-content.support-page .support-capabilities__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body[class] main#main-content :is(
    .home-statistic,
    .solutions-live-stat,
    .industries-stat,
    .support-capabilities article
  ) {
    width: auto !important;
    min-width: 0 !important;
    height: 130px !important;
    min-height: 130px !important;
    padding: 20px 24px !important;
    background: transparent !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #e8edf2 !important;
    border-right: 0 !important;
    box-sizing: border-box;
  }

  html body[class] main#main-content :is(
    .home-statistic,
    .solutions-live-stat,
    .industries-stat,
    .support-capabilities article
  ):first-child {
    border-left: 0 !important;
  }

  html body.home[class] main#main-content .home-statistic {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  html body.post-type-archive-solution main#main-content .solutions-live-stat,
  html body.page-template-page-industries main#main-content .industries-stat,
  html body.page-template-page-services-support main#main-content.support-page .support-capabilities article {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  html body[class] main#main-content :is(
    .home-statistic strong,
    .solutions-live-stat strong,
    .industries-stat dd,
    .support-capabilities strong
  ) {
    margin: 0 0 10px !important;
    color: var(--c-brand) !important;
    font-family: var(--font-family-base) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 29.4px !important;
    letter-spacing: -.98px !important;
    text-transform: none !important;
    transform: none !important;
  }

  html body.home[class] main#main-content .home-statistic strong {
    margin-bottom: 4px !important;
  }

  html body[class] main#main-content :is(
    .home-statistic span,
    .solutions-live-stat span,
    .industries-stat dt,
    .support-capabilities h2
  ) {
    margin: 0 !important;
    color: #718096 !important;
    font-family: var(--font-family-base) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 12px !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    transform: none !important;
  }

  html body.home[class] main#main-content .home-statistic > svg,
  html body.home[class] main#main-content .home-statistic-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    color: var(--c-brand) !important;
  }

  html body.home[class] main#main-content .home-statistics-wrap,
  html body.post-type-archive-solution main#main-content .solutions-live-metrics {
    margin-top: -66px !important;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {
  html body.home[class] main#main-content .home-statistics {
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  html body.home[class] main#main-content .home-statistic {
    height: 96px !important;
    min-height: 96px !important;
    padding: 16px 18px !important;
  }

  html body.home[class] main#main-content .home-statistic strong {
    font-size: 22px !important;
  }

  html body.home[class] main#main-content .home-statistic span {
    font-size: 9px !important;
  }

  html body.home[class] main#main-content .home-statistics-wrap {
    margin-top: -40px !important;
  }
}

/* Content-driven overview layouts for the tablet and compact-laptop range.
 * The overview hero owner switches Products to a stacked composition below
 * 1200px, so the shared fixed-height contract must switch with it. */
@media (min-width: 761px) and (max-width: 1200px) {
  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .product-center-hero {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #f7f9fb !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .product-center-hero::before {
    display: none !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .product-center-hero-inner {
    order: 1 !important;
    width: min(calc(100% - (var(--tongyi-home-frame-gutter) * 2)), var(--tongyi-home-frame-shell)) !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    flex: none !important;
    padding: 48px 0 38px !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .product-center-hero-copy {
    width: 100% !important;
    max-width: 760px !important;
    padding: 0 !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .product-center-hero-image {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    width: min(calc(100% - (var(--tongyi-home-frame-gutter) * 2)), var(--tongyi-home-frame-shell)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 7 !important;
    object-fit: cover !important;
    border-radius: 8px 8px 0 0 !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistics,
  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistics-grid,
  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistic:nth-child(n) {
    height: auto !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistics {
    min-height: 0 !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistics-grid {
    min-height: 144px !important;
    grid-template-rows: repeat(2, minmax(72px, auto)) !important;
  }

  html body:is(.post-type-archive-product, .page-template-page-products) main#main-content.products-page .products-statistic:nth-child(n) {
    min-height: 72px !important;
    padding-block: 12px !important;
  }
}

/* CMS copy may exceed the reference-height composition. Preserve the normal
 * banner height as a minimum while allowing verified long content to grow. */
html body.page-template-page-services-support[class] main#main-content.support-page .support-hero__copy,
html body.page-template-page-services-support[class] main#main-content.support-page .support-hero__description {
  min-width: 0;
  max-width: 100%;
}

html body.page-template-page-services-support[class] main#main-content.support-page .support-hero__description {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 1367px) {
  html body.home[class] main#main-content.home-page .home-hero,
  html body.home[class] main#main-content.home-page .home-hero__inner {
    height: auto !important;
    min-height: var(--ui-banner-overview-height) !important;
  }
}

@media (min-width: 1200px) {
  html body:is(.post-type-archive-product, .page-template-page-products)[class] main#main-content.products-page .product-center-hero,
  html body:is(.post-type-archive-product, .page-template-page-products)[class] main#main-content.products-page .product-center-hero-inner {
    height: auto !important;
    min-height: var(--ui-banner-overview-height) !important;
  }
}

@media (min-width: 1025px) {
  html body.page-template-page-services-support[class] main#main-content.support-page .support-hero,
  html body.page-template-page-services-support[class] main#main-content.support-page .support-hero__grid {
    height: auto !important;
    min-height: var(--ui-banner-overview-height) !important;
  }

  html body.page-template-page-services-support[class] main#main-content.support-page .support-hero__grid {
    padding-block: 66px !important;
    box-sizing: border-box;
  }

  html body.tax-application_industry[class] main#main-content.industry-detail .industry-hero,
  html body.tax-application_industry[class] main#main-content.industry-detail .industry-hero-grid {
    height: auto !important;
    min-height: var(--ui-banner-detail-height) !important;
  }

  html body.tax-application_industry[class] main#main-content.industry-detail .industry-hero-grid {
    padding-bottom: 56px !important;
    box-sizing: border-box;
  }
}