/*
 * 服务页专属样式 — 6 页共用同一份 DOM 与同一份 CSS。
 *
 * PC 基准：design/pc/{体外诊断,生命科学,生物医药,新药研发,临床供应链}.jpg，五张均为 1920×2172。
 * 移动基准：design/mobile/服务领域-生命科学@2x.png（750×1836 → 375×918）。
 *
 * PC 分区（实测，页脚顶边在五页上都是 y=1788）：
 *   hero y=0..815（816 高）；tab x=120..1799 y=685..949（悬浮跨区）；overview y=816..1787（972 高）。
 *   hero/overview 的分界靠版心外侧 x=30 取样得到：y=815 还是 banner 渐变，y=816 起是纯 #F1F6FC。
 *   别在 x>120 处找这条界 —— 那里是 tab 面板的白底，看不出来（曾据此把 hero 记成 818）。
 *
 * 版心 1680，居中于 1920 ⇒ 左边缘 x=120。下面所有坐标都按"相对段顶 816 / 相对版心左边 120"换算。
 *
 * 两个实测结论决定了这份布局的写法：
 *
 *   1. 六张服务页稿的 hero 区**逐像素相同**（fuzz20 差 0 px），所以只有一张 banner。
 *      之前按每页一张裁，既多 5 倍素材，又因为都用 +0+0 把稿上烤进去的页头一起裁了进来。
 *
 *   2. 概览区的 CTA 是**绝对定位**的，不跟着正文流走：正文行数在五页上是 3/4/5 行，
 *      而 CTA 顶边恒在块顶 +484，块高恒为 554。所以正文槽位固定 248px ≈ 最多 5 行，
 *      超出会压到按钮上（生命科学正好用满 5 行）。
 *
 * 已知稿件问题（不在这里修，见 docs/09 Q16）：
 *   生物医药/体外诊断两页的整个概览内容块比另三页低 30px，块高完全相同，属手工摆放不一致。
 *   本文件按多数（三页）实现，即块顶 y=1077。
 */

.page-service .container--wide {
  width: min(var(--container-wide), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- hero · PC y=0..817 / mobile y=50..174@375 */

/* hero 高 816，不是 818。成稿上 y=810..815 还是 banner 渐变，y=816 起已是纯 #F1F6FC
   （在版心外侧 x=30 取样得到，别在 x>120 取——那里是 tab 面板的白底，看不出边界）。
   816 正好等于 UI banner 的原生高度，于是 1920 下零缩放。
   舞台按 1920/816 锁比例，叠层和 tab 共用 --u；禁止定高 + cover + vw
   （以前窄屏把段高钉在 816、图 cover 另裁，就是两套系数，见 docs/14 §5）。 */
.page-service .svc-hero {
  --u: 0.05208333cqw;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 816;
  container-type: inline-size;
  overflow: visible;
  background: var(--bg-white);
}

.page-service .svc-hero > .svc-hero__bg,
.page-service .svc-hero > picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* 容器比例 = 素材 1920×816，cover 在 1920 不裁；object-position 只兜非成稿比例的后台图。 */
.svc-hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}



/* ---------------------------------------------------------------- tab · PC y=685, 1680×240 / mobile y=174, 横向滚动 */

.svc-tabs {
  position: absolute;
  left: 50%;
  top: calc(685 * var(--u));
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: calc(240 * var(--u));
  overflow: visible;
  overflow-anchor: auto;
  background: var(--bg-white);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
}

/* JS 重排前先按展示序画，避免 defer 脚本执行前闪一下旧序。 */
.svc-tabs a[href*="/services/clinical-supply"] { order: 1; }
.svc-tabs a[href*="/services/intl-cold-chain"] { order: 2; }
.svc-tabs a[href*="/services/drug-rd"] { order: 3; }
.svc-tabs a[href*="/services/biopharma"] { order: 4; }
.svc-tabs a[href*="/services/life-science"] { order: 5; }
.svc-tabs a[href*="/services/ivd"] { order: 6; }
.svc-tabs a[href*="/services/product-solutions"] { order: 7; }

html:not([data-layout="mobile"]) .svc-tabs:has(> a:nth-child(7)) {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

html:not([data-layout="mobile"]) .svc-tabs:has(> a:nth-child(7)) .svc-tabs__icons {
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}

.svc-tabs a:last-child:not(.is-active)::before {
  content: none;
}

/* 必须压过 `.page-service .container--wide`（0,2,0），否则中间宽仍是
   min(1680px, 100%−48) 而不是按舞台 --u 收的 1680。 */
.page-service .svc-tabs.container--wide {
  width: min(calc(1680 * var(--u)), calc(100% - var(--gutter) * 2));
  max-width: none;
}

.svc-tabs a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 稿上图标墨迹 y=740..803、文字墨迹 y=843..870；72 图标框 + 30 间距正好落在这两处 */
  gap: calc(30 * var(--u));
  height: 100%;
  min-height: calc(240 * var(--u));
  padding: calc(36 * var(--u)) calc(12 * var(--u)) calc(34 * var(--u));
  font-size: calc(30 * var(--u));
  line-height: 1.3;
  font-weight: 600;
  color: #173a7c;
  text-align: center;
  transition: color .2s, background .2s;
}

.svc-tabs a:hover {
  color: var(--brand);
}

/* 子菜单落到 #svc-tabs 时浏览器会聚焦整条栏（tabindex=-1），
   全局 :focus-visible 会在白条外画一圈品牌蓝框。条本身不是键盘控件，
   焦点环只留给里面的 a。 */
.svc-tabs:focus,
.svc-tabs:focus-visible {
  outline: none;
}

.svc-tabs a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  z-index: 1;
}

.svc-tabs a.is-active {
  z-index: 1;
  overflow: visible;
  background: transparent;
  color: #fff;
}

.svc-tabs a.is-active > * {
  position: relative;
  z-index: 1;
}

/* 选中块严丝合缝铺满自己那格：稿上 y=685..924 与白条同高，不外溢；圆角 8。 */
.svc-tabs a.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand);
  border-radius: calc(8 * var(--u));
}

.svc-tabs a:not(.is-active)::before {
  content: "";
  position: absolute;
  top: calc(56 * var(--u));
  right: 0;
  width: var(--hairline);
  height: calc(128 * var(--u));
  background: #e2e2e2;
}

/* 下沿三角：稿上底边 y=925 起、宽 44 高 22，正好接在白条下边缘。 */
.svc-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 0;
  transform: translateX(-50%);
  border-style: solid;
  border-width: calc(22 * var(--u)) calc(22 * var(--u)) 0;
  border-color: var(--brand) transparent transparent;
}

.svc-tabs__icons {
  position: relative;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  flex: 0 0 auto;
}

.svc-tabs__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .2s ease;
}

.svc-tabs__icon--active { opacity: 0; }
.svc-tabs a.is-active .svc-tabs__icon--normal { opacity: 0; }
.svc-tabs a.is-active .svc-tabs__icon--active { opacity: 1; }

/* F20-07 / F20-12：tab 条不再吸顶，避免盖住概览标题。 */

/* ---------------------------------------------------------------- overview · PC 双栏舞台 / mobile y=252..756@375 */

/* 与 hero/tab 同一套 1920 --u（docs/14 §5）：14″ 等中间宽只按容器收，
   禁止再给媒体舞台写 clamp(vw) 把高度钉在 650。min-height 写在 inner 上，
   因为容器自己查不了自己的 cqw。 */
.page-service .svc-overview {
  --u: 0.05208333cqw;
  position: relative;
  z-index: 1;
  min-height: 0;
  background: var(--bg-page);
  container-type: inline-size;
  overflow-anchor: none;
}

/* 必须压过 `.page-service .container--wide` 的 1680 封顶，否则 2160/2560
   只剩左右留白（F-01 同类：服务 tab / 左文 / 四图要跟舞台一起拉宽）。
   1680×--u = 视口的 87.5%，1920 下仍是成稿 1680。 */
.page-service .svc-overview__inner.container--wide {
  width: min(calc(1680 * var(--u)), calc(100% - var(--gutter) * 2));
  max-width: none;
}

.svc-overview__inner {
  position: relative;
  display: grid;
  /* 上限 580u = 1920 成稿左栏；下限 0。440/380 地板会在 14″ 把右栏挤成 leftover。 */
  grid-template-columns: minmax(0, calc(580 * var(--u))) minmax(0, 1fr);
  gap: calc(96 * var(--u));
  align-items: start;
  /* Q16 B 组眉题 y=1077 = 段顶 816 + 261。tab 白条底 924 → 眉题 153。
     130u 会把眉题顶到选中三角（y=946）。border-box 1031 = 原内容盒 692 + 补上的 131。 */
  min-height: calc(1031 * var(--u));
  padding-block: calc(261 * var(--u)) calc(78 * var(--u));
}

/* 圆图、徽标与四张照片统一收进一个按栏宽缩放的舞台。
   1920 媒体栏 1004×650；高必须跟宽走同一套系数，禁止 650×视口--u 定高、1fr 定宽。 */
.svc-overview__media {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1004 / 650;
  overflow: visible;
}

/* -------- 左侧信息层级 -------- */
.svc-overview__text {
  position: relative;
  z-index: 3;
  min-width: 0;
  /* 与右侧媒体同高（1004×650 → 650u），六页咨询钮钉在同一条底边上。 */
  min-height: calc(650 * var(--u));
}

.svc-overview__en {
  font-size: calc(18 * var(--u));
  line-height: 1.22;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.svc-overview__text h2 {
  margin-top: calc(21 * var(--u));
  font-size: calc(64 * var(--u));
  line-height: 1.25;
  color: var(--brand);
}

.svc-overview__rule {
  margin-top: calc(27 * var(--u));
  width: calc(62 * var(--u));
  height: calc(4 * var(--u));
  background: var(--accent);
}

.svc-overview__body {
  max-width: calc(560 * var(--u));
  margin-top: calc(62 * var(--u));
  /* 给绝对定位的咨询钮留出 70u 高 + 54u 缝，六页正文再长也不把钮顶下去。 */
  padding-bottom: calc(124 * var(--u));
  font-size: 22px;
  line-height: 2;
  font-weight: 600;
  color: #173a7c;
  text-align: left;
  overflow-wrap: anywhere;
}

.svc-overview__body p { margin: 0; }
.svc-overview__body p + p { margin-top: 1em; }

.svc-overview__cta {
  position: absolute;
  left: calc(5 * var(--u));
  bottom: 0;
  width: auto;
  height: calc(70 * var(--u));
  min-width: calc(222 * var(--u));
  margin: 0;
  padding-inline: calc(30 * var(--u));
  gap: calc(10 * var(--u));
  box-sizing: border-box;
  font-size: 20px;
  font-weight: 400;
  white-space: nowrap;
}

.svc-overview__cta-icon {
  width: calc(24 * var(--u));
  height: calc(18 * var(--u));
  object-fit: contain;
  transition: filter .2s ease;
}

.svc-overview__cta:hover .svc-overview__cta-icon,
.svc-overview__cta:focus-visible .svc-overview__cta-icon {
  filter: brightness(0) invert(1);
}

/* -------- 右侧媒体舞台：圆 + 双环白底叠在竖图左缘 --------
   1920 下媒体栏约 1004：圆 559 @ left 7%（比稿左移，少挡右侧四图），竖图 408 右对齐。
   虚线环 106.5% / 117%（Q18），外圈铺白底，两圈虚线坐在白盘上，竖图从外环右缘起。 */

.svc-overview__figure {
  position: absolute;
  left: 7%;
  top: 50%;
  z-index: 3;
  width: calc(100% * 559 / 1004);
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
}

.svc-overview__circle {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}

/* 两圈虚线环：半径对齐 Q18（297.5 / 327.5 ÷ 圆 r 279.5 ⇒ 106.5% / 117%）。
   成稿虚线色是品牌蓝 #0064B4。外圈铺白底圆盘，两圈虚线都坐在白底上，
   环下不露竖图；要多露四图靠把圆往左移，不能改成透明底。 */
.svc-overview__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  border: var(--hairline) dashed #0064B4;
  border-radius: 50%;
  pointer-events: none;
}

.svc-overview__ring--inner {
  width: 106.5%;
  height: 106.5%;
  animation: svc-ring-counterclockwise 32s linear infinite;
}

.svc-overview__ring--outer {
  width: 117%;
  height: 117%;
  background: #fff;
  animation: svc-ring-clockwise 42s linear infinite;
}

@keyframes svc-ring-clockwise {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes svc-ring-counterclockwise {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 四个徽标：白圆底 100×100 + 单色线性图标（图标从成稿抠出，白圆与阴影用 CSS）。
   白圆实测中心（成稿绝对坐标，已按本文件取的那一组换算）：
     温度计 (1075,1087) 地球 (899,1224) 方块 (905,1456) 盾牌 (1071,1598)
   换算成相对圆形主图左上角 (947,1065) 的偏移即下面的 left/top。 */
.svc-overview__badge {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.89%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 16px rgba(10, 27, 57, .08);
  animation: svc-badge-float 3.8s ease-in-out infinite;
}

.svc-overview__badge:nth-of-type(4) { animation-delay: -.9s; }
.svc-overview__badge:nth-of-type(5) { animation-delay: -1.8s; }
.svc-overview__badge:nth-of-type(6) { animation-delay: -2.7s; }

@keyframes svc-badge-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* 图标实测高 56（四枚抠出来分别是 45/56/55/47 × 56），在 100 的白圆里占 56%。
   别按感觉写 28，那会缩成一半。 */
.svc-overview__badge img {
  width: auto;
  height: 56%;
  object-fit: contain;
}

.svc-overview__badge--temp   { left: 14.13%;  top: -4.83%; }
.svc-overview__badge--globe  { left: -17.35%; top: 19.68%; }
.svc-overview__badge--box    { left: -16.28%; top: 61.18%; }
.svc-overview__badge--shield { left: 13.42%;  top: 86.58%; }

/* -------- 右侧竖排 4 张照片 408×143 @ x=1392 —— 相对版心左边 1272（右边缘与版心齐平），相对段顶 226 --------
   Q16 已决：统一 B 组（photo 顶 y=1042 = 段顶 816 + 226）；A 组稿低 30px 不按页补偿。
   行顶实测 y=1042/1194/1347/1499，步距 152.33 ⇒ 间隙 (600-4×143)/3 = 9.33。整块 600 高。 */

.svc-overview__photos {
  position: absolute;
  right: 0;
  top: 4%;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 1.5%;
  width: calc(100% * 408 / 1004);
  height: 92%;
  min-width: 0;
}

.svc-overview__photos li {
  overflow: hidden;
  min-width: 0;
  /* 成稿四图右上角 @2x 约 20px 弧 ⇒ 10 CSS；PC 同源圆角，不再用 6。 */
  border-radius: 10px;
}

.svc-overview__photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================ 国际医药冷链专属两段
 *
 * 只有 /services/intl-cold-chain 有这两段（控制器只给该 slug 注入 scopes/containers）。
 * 成稿 design/pc/国际医药冷链.jpg 1920×3836，比另五页长 1664：
 *   服务范围 y=1788..2443；冷链箱 y=2444..3451；页脚从 3452 起（版心外 x=30 取样）。
 * 版心仍是 1680（x=120..1799）。
 *
 * 素材全部来自 UI 原图，不裁成稿：
 *   5 张卡图 cover 顶对齐，避开白面板叠压区后与成稿残差 0.00%；
 *   2 张箱型图尺寸/落点由二维拟合定（残差 2.10% / 2.52%），见 tools/slice-assets.sh。
 */

/* -------- 服务范围 · y=1788..2443（656 高） -------- */

.svc-scope {
  --u: 0.05208333cqw;
  container-type: inline-size;
  background: var(--bg-white);
  overflow-anchor: none;
}

/* 字号/下划线仍走全局 Q22（36 / rule 22）；上边距本段单独钉 72，不跟全局 77。 */
.svc-scope .section-title {
  padding-top: 72px;
}

.svc-scope__grid {
  display: grid;
  /* 1fr 而不是 320px：版心在 769–1919 会按 --u 收到 <1680，钉 320 会溢出。
     1920 下版心正好 1680，（1680−80）/5 仍是成稿 320。 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  gap: 20px;                 /* 实测卡左边缘 120/460/800/1140/1480 ⇒ 步距 340、卡宽 320 */
  margin-top: 53px;          /* 标题组底 1937 → 卡顶 1990 */
  padding-bottom: 0;
}

/* 五张卡等高：卡 1 正文 4 行、卡 4 只有 3 行，但成稿上底边都在 y=2443 ⇒ 高度 454。
   写 min-height 不写 height：中文放得下，算出来仍是 454（1920 像素比对 8.54%、页高 3796
   与写死时逐位相同）；英文文案更长，写死会把五张卡全裁掉（实测需 479~539）。
   grid item 默认 stretch，五卡照旧等高。 */
.svc-scope__grid li {
  position: relative;
  min-height: 454px;
  border-radius: 14px;
  background: var(--bg-white);
  box-shadow: 0 2px 14px rgba(10, 27, 57, .07);
  overflow: hidden;
  transition: translate .38s cubic-bezier(.22, 1, .36, 1), box-shadow .38s ease;
}

/* 图 320×218 满宽出血。UI 原图比 320×218 更方，成稿用的是 cover + 顶对齐
   （实测：顶对齐 0.00%、居中 30.69%、底对齐 43.64%，不是随手选的）。 */
.svc-scope__grid li > picture {
  display: block;
}

.svc-scope__photo {
  display: block;
  width: 100%;
  height: 218px;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px 14px 0 0;
  transition: scale .55s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .svc-scope__grid li:hover {
    translate: 0 -9px;
    box-shadow: 0 20px 36px rgba(10, 27, 57, .15);
  }

  .svc-scope__grid li:hover .svc-scope__photo { scale: 1.08; }
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .svc-overview__media[data-reveal].is-revealed {
    transition-delay: 100ms;
  }

  html.motion-ready .svc-scope__grid > [data-reveal-soft]:nth-child(2) { transition-delay: 100ms; }
  html.motion-ready .svc-scope__grid > [data-reveal-soft]:nth-child(3) { transition-delay: 200ms; }
  html.motion-ready .svc-scope__grid > [data-reveal-soft]:nth-child(4) { transition-delay: 300ms; }

  html.motion-ready .svc-container__photo[data-reveal-soft].is-revealed {
    transition-delay: 100ms;
  }
}

/* 白面板往上压 14px，正好等于圆角半径 ——
   于是照片只从面板两个上圆角的缺口里露出来。成稿面板上沿实测 y=2194，照片底 2207。 */
.svc-scope__body {
  position: relative;
  margin-top: -14px;
  min-height: 250px;
  /* `FOB/CIF/DAP/DDP`（146px）、英文标题里的 `Pharmaceutical`（192px）都是不可断长串，
     栏宽不够时会直接顶出卡片。卡内文案后台可改、中英两版长度不同，所以在这里兜住。
     中文正文栏 256 > 146 且标题无长串，加了不改变渲染。 */
  overflow-wrap: anywhere;
  padding: 32px;
  border-radius: 14px;
  background: var(--bg-white);
}

/* line-height 32 不是排版偏好，是拿来对齐 ink 的：行高 26 时字咬在盒顶，
   ink 落在 2226，成稿是 2229。行高每加 2，ink 下移 1。下面的线随之减 6 补回来。 */
.svc-scope__body h3 {
  font-size: 26px;
  line-height: 32px;
  color: var(--brand);
}

/* 卡内这条线与区块下划线同规格（实测都是蓝 60 + 隙 4 + 绿 33、粗 5），只是左对齐 */
.svc-scope__rule {
  justify-content: flex-start;
  margin-top: 17px;
}

.svc-scope__body p {
  margin-top: 17px;
  font-size: 16px;
  line-height: 28px;
  color: #575757;
}

/* -------- 冷链箱 · y=2444..3451（1008 高） -------- */

.svc-container {
  --u: 0.05208333cqw;
  container-type: inline-size;
  padding-top: 138px;      /* 段顶 2444 → 第一行标题盒顶 2582 */
  padding-bottom: 80px;
  background: var(--bg-white);
  overflow-anchor: none;
}

.svc-container .container--wide {
  position: relative;
}

/* 左文右图各一半。图高自适应，行高跟图走；不再绝对定位，两张图不会叠在一起。 */
.svc-container__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  column-gap: 0;
}

.svc-container__row + .svc-container__row {
  margin-top: 40px;
}

.svc-container__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 与全局 .section-title__text 同为 36（Q22 已决）；行内标题左对齐，不走居中 section-title */
.svc-container__text h2 {
  font-size: var(--section-title-size);
  line-height: 1.3;
  font-weight: 900;
  color: var(--brand);
}

.svc-container__rule {
  justify-content: flex-start;
  margin-top: 20px;   /* 字号 34→36 后行盒高 44.2→46.8，这里减 3 把线钉回 y=2649 */
}

.svc-container__text p {
  margin-top: 49px;
  font-size: 22px;
  line-height: 44px;
  color: #16397b;
}

/* 高亮行：Q20 已决拆 highlight_prefix / highlight_accent。
   行距 60（实测两行 ink 顶 2870/2930）；前缀蓝 22、数字绿 32。
   选择器必须带 __text：只写 .svc-container__hl 会被 `.svc-container__text p` 盖掉。 */
.svc-container__text .svc-container__hl {
  margin-top: 24px;
  line-height: 60px;
  font-size: 22px;
  color: #16397b;
}

.svc-container__hl-line {
  display: block;
}

.svc-container__hl-prefix {
  font-size: 22px;
  font-weight: 400;
  color: #16397b;
}

.svc-container__hl-accent {
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0;
}

/* 产品图占行宽一半、高度跟素材走，不再绝对定位。
   原先主动式 top:-24 会叠到上一张图上。 */
.svc-container__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  align-self: start;
}

/* 桌面：服务范围五卡 / 冷链箱跟 tab、概览共用 1680*--u，左右齐平。
   五卡已是 1fr，盒子跟着 --u 拉宽时卡也跟着分，不必再钉 --container-wide
   （钉住后超宽屏 tab 仍是 87.5vw、五卡停在 1680，两侧会空一截）。
   必须写在 769 以上：移动档卡宽由 gutter 出 343@375，不能吃进 1680u。 */
html:not([data-layout="mobile"]) {
  .page-service .svc-scope__grid.container--wide,
  .page-service .svc-container > .container--wide {
    width: min(calc(1680 * var(--u)), calc(100% - var(--gutter) * 2));
    max-width: none;
    margin-inline: auto;
  }
}

/* 版心之内、1920 之下：整体按比例收。概览躲 dock 仍只到 1799（见下一块）。 */
/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (max-width: 1919px) and (min-width: 769px)。 */
@media not all {
  .svc-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (max-width: 1799px) and (min-width: 769px)。 */
@media not all {
  /* 胶囊 dock 72 + right 20。1920 版心右留白 120，够用；窄于 1799 时
     0.875 版心右缘会钻进 dock，四图右上角被切。右缘钉在 dock 左，不新开断点。 */
  .page-service .svc-overview__inner.container--wide {
    width: min(calc(1680 * var(--u)), calc(100% - var(--gutter) - 92px));
    margin-right: 92px;
  }
}

/* 769~1280 窄桌面：概览改单栏，正文铺满换行，左右与页头导航齐平。
   1280 是已登记断点；这一带没有成稿，只把双栏细条改成可读排版给运营看。
   必须写在 1799 档后面，才能盖掉那边给 dock 的 92px 右缘（否则正文右缘对不齐导航）。 */
/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (min-width: 769px) and (max-width: 1280px)。 */
@media not all {
  .page-service .svc-tabs.container--wide,
  .page-service .svc-overview__inner.container--wide,
  .page-service .svc-scope__grid.container--wide,
  .page-service .svc-container > .container--wide {
    width: calc(100% - 2 * var(--header-pad-x));
    max-width: none;
    margin-inline: auto;
  }

  .svc-overview__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: 0;
    padding-block: calc(220 * var(--u)) 56px;
  }

  .svc-overview__body {
    max-width: none;
    overflow-wrap: break-word;
  }

  .svc-overview__text {
    min-height: 0;
  }

  .svc-overview__text h2 {
    font-size: max(64px, calc(36px / var(--s)));
  }

  .svc-overview__body {
    max-width: none;
    padding-bottom: 0;
    font-size: max(22px, calc(17px / var(--s)));
  }

  .svc-overview__cta {
    position: static;
    margin: calc(32 * var(--u)) 0 0;
  }

  /* 媒体舞台跟正文同一条左右边。地球徽标相对圆是 left:-17.35%，
     圆宽 559/1004 ⇒ 左溢约 9.66% 舞台；圆左移到这个数，徽标齐 Logo，四图 right:0 齐导航。
     高按 1004/650 跟宽走，避免只被拉扁。 */
  .svc-overview__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1004 / 650;
    overflow: visible;
  }

  .svc-overview__figure {
    left: 9.66%;
  }

  .svc-overview__photos {
    right: 0;
  }
}

/* 769~1040 平板档。成稿只有 PC（≥1041 按 1920 稿）和移动（≤768 按 750@2x 稿）两套，
   这一带没稿；断点沿用 Q25 已经定下的 769~1040（页头/页脚同界），不另起边界。 */
/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (min-width: 769px) and (max-width: 1040px)。 */
@media not all {
  /* 页头这一带是 20px 内边距，token 仍是 40；跟 layout.css 对齐，不新开变量。 */
  .page-service .svc-tabs.container--wide,
  .page-service .svc-overview__inner.container--wide,
  .page-service .svc-scope__grid.container--wide,
  .page-service .svc-container > .container--wide {
    width: calc(100% - 40px);
  }

  /* 五列在这一带把卡压到 128（769）~182（1040）宽，正文 4~7.4 字/行，
     `FOB/CIF/DAP/DDP` 还顶出卡片。改 3 列（3+2 两行）：769 卡宽 227、1040 卡宽 317 ——
     1040 几乎正好回到成稿的 320，正文 10.2~13.9 字/行。
     只动列数：gap 20、圆角 14、白面板上压 -14、定高转 min-height 全部照旧。 */
  .svc-scope__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 半栏正文在 769~1040 放不下 PC 那套 22/32 高亮，同比收一档：
     正文/前缀 16、绿字 16×32/22≈23，行距按 PC 的 44/22、60/22 换算成 32、44。
     h2 不动：36 是 Q22 全站值，同宽度下服务范围标题也是 36。
     tab 标签这一带折两行（769~1271 都折），维持现状不收字号：要六项全单行得把 30 压到 16，
     配 72px 图标明显头重脚轻，两行标签本身可读。 */
  .svc-container__text p {
    font-size: max(16px, calc(12px / var(--s)));
    line-height: 32px;
  }

  .svc-container__text .svc-container__hl {
    font-size: max(16px, calc(12px / var(--s)));
    line-height: 44px;
  }

  .svc-container__hl-prefix {
    font-size: max(16px, calc(12px / var(--s)));
  }

  .svc-container__hl-accent {
    font-size: 23px;
  }
}

/* ---------------------------------------------------------------- 移动 */

html[data-layout="mobile"] {
  .page-service-body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  /* 2026-08-24：移动端与 PC 同一张 banner，不再换 svc-hero-mobile、不再叠标题。
     但图只铺 hero 上部 124（=稿上 banner 底边，恒等于 tab 白条顶边），不铺满 375/202：
     舞台 1.856 比素材 2.353 窄，inset:0 + cover 会左右各裁掉 21%，稿上「链接全球」
     的首字直接被切没（实测 375 与 452 两档都切）。锁 124 高后素材按宽铺满、只裁上下，
     标题与飞机/船/卡车全在。124..158 那截露出的底板由下面这条渐变续上。 */
  .page-service .svc-hero {
    --u: 0.26666667cqw;
    container-type: inline-size;
    height: auto;
    aspect-ratio: 375 / 202;
    background: linear-gradient(180deg, #f2f5fb 0, #f6f7fb 78.2%, var(--bg-white) 78.2%);
  }

  .page-service .svc-hero > .svc-hero__bg,
  .page-service .svc-hero > picture {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    height: calc(124 * var(--u));
  }

  /* 白条本体画在 hero 上，不画在 .svc-tabs 上：.svc-tabs 是横向滚动容器，
     overflow-y 必被裁（overflow-x: auto 会把 visible 计算成 auto），白底留在它身上
     就得把盒子撑到能容下下沿三角，白条底边随之掉到选中块下面 21px。
     稿实测（@2x ÷ 2）：白条 174..245（71 高），底边与选中蓝块底边同一条线，
     三角 245..251.5 挂在白条之外。这里画的是不随内容横滚的静态底板。 */
  /* 第十一轮：白条左右都跟服务范围卡同一条 --gutter（16@375）。
     旧值 left 11 / right 0 是成稿量值，滚到尽头最后一格会贴视口右缘。 */
  .page-service .svc-hero::after {
    content: "";
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(124 * var(--u));
    height: calc(71 * var(--u));
    z-index: 2;
    border-radius: calc(10 * var(--u));
    box-shadow: 0 3px 14px rgba(0, 0, 0, .08);
    background: var(--bg-white);
  }

  /* 选择器必须带 .container--wide（0,3,0），否则 PC 那条同名规则（也是 0,3,0，但在文件更靠前）
     只会被 width 覆盖一半。滚动层必须和白条同宽，滚到底最后一格才跟白条右缘齐平。 */
  .page-service .svc-tabs.container--wide {
    position: absolute;
    left: var(--gutter);
    top: calc(124 * var(--u));     /* 恒等于 banner 图的底边：124/375 = 248/750 */
    transform: none;
    display: flex;
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* 只当滚动层：白底 / 圆角 / 阴影全在 .svc-hero::after 上。
       高 = 格高 71 + 三角 6.5，padding-bottom 6.5 把三角留在 padding box 内不被裁。 */
    border-radius: 0;
    box-shadow: none;
    background: none;
    min-height: calc(71 * var(--u));
    height: calc(77.5 * var(--u));
    padding-bottom: calc(6.5 * var(--u));
  }

  .svc-tabs::-webkit-scrollbar {
    display: none;
  }

  /* 稿实测（格顶 174）：图标 ink 190..210、文字 ink 222..233 ⇒ 图标框顶 188、字框顶 220，
     即 14 上边距 + 24 图标 + 8 缝。桌面那份是 justify-content: center，会把这 8 的缝
     两边平摊掉（实测字 ink 落到 216，比稿高 6），所以这里必须改回 flex-start。 */
  .svc-tabs a {
    flex: 0 0 calc(84 * var(--u));
    height: calc(71 * var(--u));
    min-height: calc(71 * var(--u));
    justify-content: flex-start;
    padding: calc(14 * var(--u)) calc(4 * var(--u)) calc(10 * var(--u));
    gap: calc(8 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: 1.2;
    font-weight: 600;
    scroll-snap-align: start;
  }

  .svc-tabs a.is-active::before {
    border-radius: calc(8 * var(--u));
  }

  /* 移动稿同样是「选中块贴合本格 + 三角挂在格子下沿」，圆角同为 8；三角 13×6.5。
     稿实测蓝块 348..490@2x，与白条完全同高，三角 490..503@2x 落在白条之外。 */
  .svc-tabs a.is-active::after {
    border-width: calc(6.5 * var(--u)) calc(6.5 * var(--u)) 0;
  }

  /* 稿实测这条竖线 382..455@2x（=191..227.5，色 #E0E0E0），只有 37 高：
     从图标顶稍上起、到文字中部收，不到格底。两条分隔线（x=526 / x=695）读数一致。 */
  .svc-tabs a:not(.is-active)::before {
    top: calc(17 * var(--u));
    height: calc(37 * var(--u));
  }

  .svc-tabs__icon {
    width: 100%;
    height: 100%;
  }

  .svc-tabs__icons {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* 七个 tab 时 PC 把图标收到 64；同一条会漏进移动，71 高格子把标签裁掉。 */
  .svc-tabs:has(> a:nth-child(7)) .svc-tabs__icons {
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  /* 移动稿概览区底色是白的，不是 PC 的浅蓝。
     --u 按 375 稿同比：375 仍是 20/11/15，768（iPad Mini）收到约 41/22.5/31。
     第十一轮：左右跟服务范围卡同一条 --gutter（16@375），不再用更窄的 11。 */
  .page-service .svc-overview {
    --u: calc(100cqi / 375);
    min-height: 0;
    margin-top: 0;
    background: #fff;
  }

  .page-service .svc-overview__inner,
  .page-service .svc-overview__inner.container--wide {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
    margin-inline: auto;
    min-height: 0;
    padding: calc(20 * var(--u)) 0 calc(32 * var(--u));
    container-type: inline-size;
  }

  .svc-overview__text {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .svc-overview__en {
    display: none;
  }

  .svc-overview__text h2 {
    margin-top: 0;
    font-size: calc(20 * var(--u));
    line-height: calc(31 * var(--u));
  }

  .svc-overview__rule {
    margin-top: calc(-2 * var(--u));
    width: calc(32 * var(--u));
    height: calc(2 * var(--u));
  }

  .svc-overview__body {
    margin-top: calc(14 * var(--u));
    padding-bottom: 0;
    font-size: calc(11 * var(--u));
    line-height: calc(22 * var(--u));
    font-weight: 600;
    max-width: none;
    overflow-wrap: break-word;
  }

  .svc-overview__cta {
    position: static;
    margin-top: calc(14 * var(--u));
    width: auto;
    height: calc(42 * var(--u));
    min-width: calc(133 * var(--u));
    padding: 0 calc(16 * var(--u));
    gap: calc(8 * var(--u));
    font-size: calc(14 * var(--u));
    font-weight: 400;
    white-space: nowrap;
  }

  .svc-overview__cta-icon {
    width: calc(15 * var(--u));
    height: calc(12 * var(--u));
  }

  /* 整组（圆 + 双环 + 4 徽标 + 4 张竖图）收进一个按稿定比的盒子，居中、随宽度缩放。
     稿实测（@2x ÷ 2）：整组 ink x=31.5..350.5、y=508.5..732；暗圆本体 203.5 直径 @ (58.5,519)；
     竖图 140.5×49.5、步距 52.5、首行顶 517.5、右缘齐 350.5。
     盒子左缘按地球徽标的白底圆算（图标 ink 31.5 再往左半个白边 ⇒ 23.5），
     于是 375 下左右各留 23.5，本来就是居中的。 */
  .svc-overview__media {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: calc(100cqi * 223 / 328);
    aspect-ratio: 328 / 223;
    transform: none;
    /* 375 稿 CTA 底到图组约 48；不跟 --u 拉到 768 的 90+，也不用 14 贴死 */
    margin-top: 40px;
  }

  /* 原来是 559 定宽再整体 transform 缩放：视口一变整组不动，右边空一大块；
     1px 虚线环也被缩到不到半个像素直接消失（稿上那两圈虚线因此一直没出来）。
     改成按 media 盒的百分比定位，徽标/环/竖图沿用桌面那套百分比，随盒缩放。
     地球徽标相对圆 left:-17.35%、圆宽 62% ⇒ 左溢 10.76%；圆左移到这个数，徽标齐汉堡栏。 */
  .svc-overview__figure {
    position: absolute;
    left: 10.76%;
    top: 4.5%;                   /* (519 - 509) / 223 */
    width: 62%;                  /* 203.5 / 328 */
    height: auto;
    aspect-ratio: 1;
    transform: none;
  }

  .svc-overview__photos {
    position: absolute;
    left: auto;
    right: 0;
    top: 3.8%;                   /* (517.5 - 509) / 223 */
    width: 42.8%;                /* 140.5 / 328 */
    height: 92.8%;               /* (4×49.5 + 3×3) / 223 */
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 1.45%;
  }

  .svc-overview__photos li {
    border-radius: 10px;
  }

  /* -------- 冷链两段 · 移动（design/mobile/服务领域-国际医药冷链@2x.png 750×4528 → 375×2264）
     移动版式与 PC 完全不同，不是把 PC 收窄：
       服务范围卡是深蓝渐变底 + 白字，5 张竖排，**没有每卡配图**；
       冷链箱标题居中（PC 左对齐），产品图在正文下方通栏。 */

  /* 移动稿这里的标题组比全局那份紧（全局移动值 padding-top 22，实测本段是 6）。
     只在本段覆盖，不动 base.css —— 那份还管着首页等其他页。
     线距 4 与全局 3 只差 1px，保留实测值。 */
  .svc-scope {
    --sc-u: calc(100cqi / 375);
  }

  .svc-scope .section-title {
    padding-top: 6px;
  }

  .svc-scope .section-title__rule {
    margin-top: 4px;
  }

  /* 卡 x=16..358（宽 343）由 .container--wide 的 gutter 给，这里不能再加 padding-inline，
     否则两层边距叠起来卡只剩 311 宽。 */
  .svc-scope__grid {
    grid-template-columns: 1fr;
    gap: 12px;                   /* 稿实测卡底 962.5 → 下一张卡顶 975 */
    margin-top: 14px;
  }

  /* 卡高随内容（卡 1 三行 146、其余两行 124），不像 PC 那样等高写死。
     `min-height: 0` 是必须的：PC 那条已从 `height: 454px` 改成 `min-height: 454px`，
     只写 `height: auto` 压不住下限，移动卡会被撑到 454。 */
  .svc-scope__grid li {
    height: auto;
    aspect-ratio: 343 / 146;
    min-height: 0;
    /* 目标稿圆角 20；卡宽仍由 .container--wide 的 16 gutter 出 343@375。 */
    border-radius: 20px;
    box-shadow: none;
    background: var(--brand);    /* 配图缺失时的兜底底色 */
  }

  /* 移动卡是「照片压蓝渐变」：配图铺满整卡（后台 mobileImageId，空则回退桌面
     imageId / cold-scope-N；加载失败再落到 cold-scope-N-m），
     蓝渐变挂在 li::after。目标稿：180deg，顶全透明 → 底 #0064B4。 */
  .svc-scope__grid li > picture {
    position: absolute;
    inset: 0;
    display: block;
  }

  .svc-scope__photo {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 桌面是 320×218 顶对齐；移动整卡当背景。768 卡按 343/146 拉高后更扁，
       顶对齐只剩图上沿（实验室顶灯、仓储天花），改取中间。 */
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  /* 卡比正文高时，渐变必须盖满整卡，否则底下一条没压蓝的原图。 */
  .svc-scope__grid li::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 39, 135, 0) 0%, rgba(0, 100, 180, 1) 100%);
    pointer-events: none;
  }

  .svc-scope__body {
    position: relative;          /* 压在照片与整卡渐变之上 */
    z-index: 1;
    margin-top: 0;
    height: auto;
    min-height: 0;               /* 同上：压住 PC 那条 min-height: 250px */
    padding: 22px 26px 24px;
    border-radius: 20px;
    background: none;
  }

  .svc-scope__body h3 {
    font-size: calc(18 * var(--sc-u));
    line-height: calc(18 * var(--sc-u));
    color: #fff;
  }

  /* 移动卡内这条线只有绿段（实测 30×3），没有 PC 那段蓝的 */
  .svc-scope__rule {
    margin-top: 10px;
  }

  .svc-scope__rule::before {
    display: none;
  }

  .svc-scope__rule::after {
    width: 30px;
    height: 3px;
  }

  .svc-scope__body p {
    margin-top: calc(13 * var(--sc-u));
    font-size: calc(12 * var(--sc-u));
    line-height: calc(20 * var(--sc-u));
    color: #fff;
  }

  /* 同样不能给左右 padding：里层 .container--wide 已经出了 16 的 gutter。
     成稿服务范围底 → 被动式标题约在 y=1500@2x（=750 CSS）；原 padding 40 + 末行 margin 34 让整页比稿高 ~154。 */
  .svc-container {
    padding: 24px 0 0;
  }

  .svc-container__row {
    display: block;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 24px;
  }

  .svc-container__row + .svc-container__row {
    margin-top: 0;
  }

  .svc-container__row:last-child {
    min-height: 0;
    margin-bottom: 16px;
  }

  .svc-container__text,
  .svc-container__row--active .svc-container__text {
    width: 100%;
  }

  /* 移动稿两个箱型标题都居中（实测中心 187.5 = 375/2），PC 是左对齐 */
  .svc-container__text h2 {
    font-size: var(--section-title-size);
    line-height: 1.3;
    font-weight: 900;
    text-align: center;
  }

  /* 实测「被动式冷链箱」下面是标准的蓝 37 + 绿 20.5 双线（y=3164..3169 处
     x=316..389 取到 #0064B4、x=396..436 取到 #58C221），不是单绿段；
     ink 底 1574 → 线顶 1582 的 8 也跟其他区块一样，走全局移动段即可。 */
  .svc-container__rule {
    justify-content: center;
  }

  .svc-container__text p {
    margin-top: 12px;            /* 原 19 */
    font-size: 12px;
    line-height: 20px;           /* 原 22 */
  }

  /* 同样必须带 __text，否则被上面那条 `.svc-container__text p` 盖掉。
     font-size 也要跟着降：留着 PC 的 22 会让行盒 strut 按 22 算，行距被撑到 24。 */
  .svc-container__text .svc-container__hl {
    margin-top: 8px;             /* 原 12 */
    font-size: 12px;             /* 原 22 */
    line-height: 20px;
  }

  /* Q20 的 22/32 是 PC 值，移动端必须重设，否则 32px 绿字在 20px 行高里叠行。
     移动稿实测（750@2x → CSS 折半）：正文与蓝前缀同为 22@2x=11，绿数字汉字步进 27~28@2x=14。
     本页移动正文已按 12 落地（比稿 +1），前缀跟正文走 12，绿字按稿内比例 14×12/11≈15。 */
  .svc-container__hl-prefix {
    font-size: 12px;             /* 原 22 */
  }

  .svc-container__hl-accent {
    font-size: 15px;             /* 原 32 */
  }

  /* 移动稿产品图在正文下方通栏，不再是右侧绝对定位 */
  .svc-container__row--passive .svc-container__photo,
  .svc-container__row--active .svc-container__photo {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    margin-top: 4px;             /* 原 8 */
  }

  .page-service--product .svc-overview__text h2 {
    font-size: calc(20 * var(--u));
    font-weight: 700;
  }

  .prod-block {
    --u: calc(100cqi / 375);
    container-type: inline-size;
   
  }

  .prod-iot-wrap,
  .prod-feat {
    --u: calc(100cqi / 375);
    container-type: inline-size;
  }

  .prod-block__head {
    padding-top: calc(24 * var(--u));
  }

  .prod-block__head--left {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .prod-block__title {
    font-size: 22px;
  }

  .prod-compare__frame,
  .prod-spec__frame {
    width: min(calc(343 * var(--u)), calc(100% - 32px));
    margin-top: calc(16 * var(--u));
    overflow-x: hidden;
  }

  .prod-compare__table,
  .prod-spec__table {
    width: 100%;
    min-width: 0;
    font-size: 9px;
  }

  .prod-compare__table col.prod-table__label,
  .prod-spec__table col.prod-table__label {
    width: 22%;
  }

  .prod-compare__table thead th {
    padding: 6px 4px;
    font-size: 10px;
    line-height: 1.3;
  }

  .prod-compare__table tbody th,
  .prod-compare__table tbody td {
    padding: 6px 4px;
    font-size: 9px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .prod-spec__table thead th {
    padding: 6px 4px;
    font-size: 9px;
    line-height: 1.3;
  }

  .prod-spec__table tbody th,
  .prod-spec__table tbody td {
    padding: 6px 4px;
    font-size: 8px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .prod-td__choice {
    column-gap: 4px;
    align-items: flex-start;
    white-space: normal;
  }

  .prod-td__icon {
    height: 16px;
  }

  .prod-td__choice > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .prod-compare .prod-block__head--left,
  .prod-iot .prod-block__head--left,
  .prod-spec .prod-block__head--left {
    text-align: center;
  }

  .prod-compare .prod-block__head--left .section-title__rule,
  .prod-iot .prod-block__head--left .section-title__rule,
  .prod-spec .prod-block__head--left .section-title__rule {
    justify-content: center;
  }

  .prod-structure__stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(2, 80px auto auto);
    align-items: start;
    width: min(calc(343 * var(--u)), calc(100% - 32px));
    margin: calc(16 * var(--u)) auto 0;
    column-gap: calc(16 * var(--u));
    row-gap: calc(8 * var(--u));
  }

  .prod-structure__explode {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(196px, 100%);
    margin-inline: auto;
  }

  .prod-structure__callout {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: center;
    min-width: 0;
    text-align: center;
  }

  .prod-structure__callout--pcm { grid-column: 1; grid-row: 2 / span 3; }
  .prod-structure__callout--shell { grid-column: 2; grid-row: 2 / span 3; }
  .prod-structure__callout--vip { grid-column: 1; grid-row: 5 / span 3; }
  .prod-structure__callout--logger { grid-column: 2; grid-row: 5 / span 3; }

  .prod-structure__callout img {
    width: auto;
    height: 80px;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
  }

  .prod-structure__callout h3 {
    grid-column: auto;
    align-self: start;
    font-size: 14px;
  }

  .prod-structure__callout p {
    grid-column: auto;
    align-self: start;
    font-size: 10px;
    line-height: 1.6;
  }

  .prod-structure__note {
    display: none;
  }

  .prod-adv__sub {
    font-size: 12px;
    margin-top: calc(8 * var(--u));
  }

  .prod-block.prod-adv {
    min-height: 0;
    background-image: url("/img/service/product/bg-adv-m.png");
    background-position: center top;
    background-size: cover;
  }

  .prod-adv__grid {
    width: min(calc(343 * var(--u)), calc(100% - 32px));
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--u)) calc(12 * var(--u));
    margin: calc(16 * var(--u)) auto 0;
    padding-bottom: calc(24 * var(--u));
  }

  .prod-adv__item--range { order: 1; }
  .prod-adv__item--maintain { order: 2; }
  .prod-adv__item--insulate { order: 3; }
  .prod-adv__item--green { order: 4; }
  .prod-adv__item--light { order: 5; }
  .prod-adv__item--trace { order: 6; }

  .prod-adv__icon {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
  }

  .prod-adv__item h3 {
    margin-top: calc(8 * var(--u));
    font-size: 14px;
  }

  .prod-adv__item p {
    margin-top: calc(4 * var(--u));
    font-size: 10px;
    line-height: 1.5;
  }

  .prod-iot__grid {
    width: min(calc(347 * var(--u)), calc(100% - 28px));
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
    margin-top: calc(16 * var(--u));
  }

  .prod-iot__card {
    grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr);
    padding: calc(12 * var(--u));
    gap: calc(12 * var(--u));
  }

  .prod-iot__card h3 {
    font-size: 14px;
  }

  .prod-iot__card p {
    font-size: 10px;
    line-height: 1.6;
  }

  .prod-feat {
    min-height: 0;
    padding: calc(20 * var(--u)) 16px calc(24 * var(--u));
  }

  .prod-feat__title {
    font-size: 22px;
  }

  .prod-feat__grid {
    width: min(calc(343 * var(--u)), 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(20 * var(--u)) 8px;
    margin-top: calc(28 * var(--u));
  }

  .prod-feat__item--ip65 { order: 1; }
  .prod-feat__item--4g { order: 2; }
  .prod-feat__item--gps { order: 3; }
  .prod-feat__item--temp { order: 4; }
  .prod-feat__item--humidity { order: 5; }
  .prod-feat__item--light { order: 6; }

  .prod-feat__item {
    gap: calc(8 * var(--u));
  }

  .prod-feat__item img {
    width: calc(56 * var(--u));
    height: calc(56 * var(--u));
  }

  /* 水滴切图 88px、其它 120px，同等框里会显大；略收一圈，占位仍 56 以免三列文字错位。 */
  .prod-feat__item--ip65 img {
    padding: calc(8 * var(--u));
    box-sizing: border-box;
  }

  .prod-feat__item span {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------- 产品方案独有 · 首页2.0 外 产品方案 PC 1917×6655 / 375×3337 */

.page-service--product .svc-overview__text h2 {
  font-size: calc(66 * var(--u));
  font-weight: 700;
}

.prod-block {
  --u: 0.05208333cqw;
  container-type: inline-size;
  background: #fff;
}

.prod-block__head {
  text-align: center;
  padding-top: calc(80 * var(--u));
}

.prod-block__head--left {
  text-align: left;
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

.prod-block__title {
  margin: 0;
  font-size: var(--section-title-size);
  line-height: 1.3;
  font-weight: 700;
  color: var(--brand);
}

.prod-block__head--left .section-title__rule {
  justify-content: flex-start;
}

/* 表阴影画在框外边；下一块 .prod-block 白底会盖住底边。底内边距把阴影留在本段里。 */
.prod-compare {
 
  overflow: visible;
}

.prod-compare__frame,
.prod-spec__frame {
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin: calc(38 * var(--u)) auto calc(8 * var(--u));
  border-radius: 8px;
  box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.prod-spec__frame {
  margin-top: calc(60 * var(--u));
}

.prod-compare__table,
.prod-spec__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}

.prod-compare__table col.prod-table__label,
.prod-spec__table col.prod-table__label {
  width: 17%;
}

.prod-compare__table thead th,
.prod-spec__table thead th {
  padding: calc(22 * var(--u)) calc(20 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.prod-compare__table thead th:first-child {
  background: #0152b0;
}

.prod-compare__table thead th:nth-child(2) {
  background: #1675d8;
}

.prod-compare__table thead th:nth-child(3) {
  background: #5bb66f;
}

.prod-spec__table thead th {
  background: var(--brand);
}

.prod-compare__table tbody th,
.prod-compare__table tbody td,
.prod-spec__table tbody th,
.prod-spec__table tbody td {
  padding: calc(22 * var(--u)) calc(20 * var(--u));
  font-size: calc(18 * var(--u));
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid #eee;
}

.prod-compare__table tbody th,
.prod-spec__table tbody th {
  font-weight: 500;
  text-align: center;
}

.prod-spec__table tbody th {
  color: var(--brand);
  font-weight: 700;
}

.prod-compare__table tbody tr:nth-child(even),
.prod-spec__table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

.prod-compare__table tbody tr:last-child th,
.prod-compare__table tbody tr:last-child td,
.prod-spec__table tbody tr:last-child th,
.prod-spec__table tbody tr:last-child td {
  border-bottom: 0;
}

.prod-compare__table tbody td {
  white-space: pre-line;
}

/* 选型决策：图标在左、两行文案在右，禁止因 pre-line 把图标单独折到上一行。 */
.prod-compare__table tbody td:has(.prod-td__choice) {
  white-space: normal;
  text-align: left;
}

.prod-td__choice {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: calc(12 * var(--u));
  white-space: nowrap;
}

.prod-td__icon {
  flex: none;
  width: auto;
  height: calc(40 * var(--u));
  object-fit: contain;
}

.prod-td__choice > span {
  min-width: 0;
  line-height: 1.5;
}

.prod-structure__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: calc(24 * var(--u));
  row-gap: calc(48 * var(--u));
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin: calc(40 * var(--u)) auto 0;
}

.prod-structure__explode {
  grid-column: 2;
  grid-row: 1 / 3;
  width: calc(501 * var(--u));
  height: auto;
  justify-self: center;
}

.prod-structure__callout {
  text-align: center;
}

.prod-structure__callout--pcm { grid-column: 1; grid-row: 1; }
.prod-structure__callout--logger { grid-column: 1; grid-row: 2; }
.prod-structure__callout--shell { grid-column: 3; grid-row: 1; }
.prod-structure__callout--vip { grid-column: 3; grid-row: 2; }

.prod-structure__callout img {
  display: block;
  width: calc(160 * var(--u));
  height: auto;
  margin: 0 auto calc(16 * var(--u));
  object-fit: contain;
}

.prod-structure__callout h3 {
  margin: 0;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--brand);
}

.prod-structure__callout p {

  font-size: calc(18 * var(--u));
  line-height: calc(28 / 18);
  color: var(--ink-soft);
}

.prod-structure__note {
  margin: calc(24 * var(--u)) auto calc(80 * var(--u));
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  text-align: center;
  font-size: calc(16 * var(--u));
  color: var(--ink-soft);
}

.prod-block.prod-adv {
  background: #0a5ea8 url("/img/service/product/bg-adv.png") center / cover no-repeat;
  color: #fff;
  min-height: calc(608 * var(--u));
}

.prod-adv .prod-block__title {
  color: #fff;
}

.prod-adv .section-title__rule::before { background: #fff; }
.prod-adv .section-title__rule::after { background: var(--accent); }

.prod-adv__sub {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(20 * var(--u));
  font-weight: 500;
  color: #fff;
}

.prod-adv__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin: calc(56 * var(--u)) auto 0;
  padding: 0 0 calc(72 * var(--u));
  list-style: none;
  text-align: center;
}

.prod-adv__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(88 * var(--u));
  height: calc(88 * var(--u));
  margin: 0 auto;
}

.prod-adv__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prod-adv__item h3 {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  color: #fff;
}

.prod-adv__item p {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(14 * var(--u));
  line-height: calc(24 / 14);
  color: #fff;
  white-space: pre-line;
}

.prod-iot-wrap {
  --u: 0.05208333cqw;
  container-type: inline-size;
  background: #f6faff;
}

.prod-iot__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--u));
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin: calc(60 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
}

.prod-iot__card {
  display: grid;
  grid-template-columns: calc(220 * var(--u)) minmax(0, 1fr);
  gap: calc(24 * var(--u));
  align-items: center;
  padding: calc(28 * var(--u));
  background: #fff;
  border-radius: calc(12 * var(--u));
  box-shadow: 0px 3px 5px  rgba(3, 99, 178, 0.3);
}

.prod-iot__card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.prod-iot__card h3 {
  margin: 0;
  font-size: calc(28 * var(--u));
  font-weight: 700;
  color: var(--brand);
}

.prod-iot__rule {
  justify-content: flex-start;
  margin-top: calc(8 * var(--u));
}

.prod-iot__card p {
  margin: calc(16 * var(--u)) 0 0;
  font-size: calc(16 * var(--u));
  line-height: 1.75;
  color: var(--ink-soft);
}

.prod-spec {
  padding-bottom: calc(64 * var(--u));
}

.prod-feat {
  background: var(--brand) url("/img/service/product/bg-feat.png") center / cover no-repeat;
  color: #fff;
  min-height: calc(450 * var(--u));
  padding: calc(80 * var(--u)) 0 calc(72 * var(--u));
  box-sizing: border-box;
}

.prod-feat__head {
  text-align: center;
}

.prod-feat__title {
  margin: 0;
  font-size: var(--section-title-size);
  font-weight: 700;
}

.prod-feat__rule {
  justify-content: center;
}

.prod-feat__rule::before { background: #fff; }
.prod-feat__rule::after { background: var(--accent); }

.prod-feat__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(16 * var(--u));
  width: min(calc(1400 * var(--u)), calc(100% - var(--gutter) * 2));
  margin: calc(48 * var(--u)) auto 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.prod-feat__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--u));
}

.prod-feat__item img {
  width: calc(80 * var(--u));
  height: calc(80 * var(--u));
  object-fit: contain;
}

.prod-feat__item span {
  font-size: calc(24 * var(--u));
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .page-service .prod-block__head[data-reveal]:not(.is-revealed) .section-title__rule,
  html.motion-ready .page-service .prod-feat__head[data-reveal]:not(.is-revealed) .section-title__rule {
    scale: .18 1;
  }
  html.motion-ready .page-service .prod-block__head[data-reveal].is-revealed .section-title__rule,
  html.motion-ready .page-service .prod-feat__head[data-reveal].is-revealed .section-title__rule {
    scale: 1;
    transition: scale .7s cubic-bezier(.22, 1, .36, 1) .14s;
  }

  html.motion-ready .page-service .prod-adv .prod-block__head:not(.is-revealed) .prod-adv__sub {
    opacity: 0;
    translate: 0 14px;
  }
  html.motion-ready .page-service .prod-adv .prod-block__head.is-revealed .prod-adv__sub {
    opacity: 1;
    translate: none;
    transition:
      opacity .6s cubic-bezier(.22, 1, .36, 1) .18s,
      translate .6s cubic-bezier(.22, 1, .36, 1) .18s;
  }

  html.motion-ready .page-service [data-reveal-from="x"] > [data-reveal] {
    translate: -40px 0;
  }
  html.motion-ready .page-service [data-reveal-from="x"] > .is-revealed {
    translate: none;
    transition:
      opacity .72s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-i, 0) * 90ms),
      translate .72s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-i, 0) * 90ms),
      transform .32s cubic-bezier(.22, 1, .36, 1),
      box-shadow .32s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service [data-reveal-from="x"] > [data-reveal-replay]:not(.is-revealed) {
    transition:
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      translate .55s cubic-bezier(.22, 1, .36, 1),
      transform .32s cubic-bezier(.22, 1, .36, 1),
      box-shadow .32s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(1) { --reveal-i: 0; }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(2) { --reveal-i: 1; }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(3) { --reveal-i: 2; }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(4) { --reveal-i: 3; }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(5) { --reveal-i: 4; }
  html.motion-ready .page-service [data-reveal-from="x"] > :nth-child(6) { --reveal-i: 5; }

  html.motion-ready .page-service .prod-structure__explode[data-reveal]:not(.is-revealed) {
    translate: 0 40px;
  }
  html.motion-ready .page-service .prod-structure__callout--pcm[data-reveal]:not(.is-revealed) {
    translate: -40px 0;
  }
  html.motion-ready .page-service .prod-structure__callout--logger[data-reveal]:not(.is-revealed) {
    translate: -40px 0;
  }
  html.motion-ready .page-service .prod-structure__callout--shell[data-reveal]:not(.is-revealed) {
    translate: 40px 0;
  }
  html.motion-ready .page-service .prod-structure__explode.is-revealed,
  html.motion-ready .page-service .prod-structure__callout.is-revealed {
    translate: none;
    transition:
      opacity .72s cubic-bezier(.22, 1, .36, 1),
      translate .72s cubic-bezier(.22, 1, .36, 1),
      transform .32s cubic-bezier(.22, 1, .36, 1);
  }

  html.motion-ready .page-service .prod-structure__callout[data-reveal]:not(.is-revealed) img {
    opacity: 0;
    scale: .86;
  }
  html.motion-ready .page-service .prod-structure__callout.is-revealed img {
    opacity: 1;
    scale: 1;
    transition:
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      scale .55s cubic-bezier(.34, 1.4, .64, 1);
  }

  html.motion-ready .page-service .prod-structure__callout[data-reveal]:not(.is-revealed) h3,
  html.motion-ready .page-service .prod-structure__callout[data-reveal]:not(.is-revealed) p {
    opacity: 0;
    translate: 0 12px;
  }
  html.motion-ready .page-service .prod-structure__callout.is-revealed h3,
  html.motion-ready .page-service .prod-structure__callout.is-revealed p {
    opacity: 1;
    translate: none;
    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      translate .5s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service .prod-structure__callout.is-revealed h3 { transition-delay: 80ms; }
  html.motion-ready .page-service .prod-structure__callout.is-revealed p { transition-delay: 140ms; }

  html.motion-ready .page-service .prod-compare__frame:not(.is-revealed) .prod-compare__table thead th,
  html.motion-ready .page-service .prod-spec__frame:not(.is-revealed) .prod-spec__table thead th {
    opacity: 0;
    translate: -22px 0;
  }
  html.motion-ready .page-service .prod-compare__frame:not(.is-revealed) .prod-compare__table tbody :is(th, td),
  html.motion-ready .page-service .prod-spec__frame:not(.is-revealed) .prod-spec__table tbody :is(th, td) {
    opacity: 0;
    translate: 0 14px;
  }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table thead th,
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table thead th,
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody :is(th, td),
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody :is(th, td) {
    opacity: 1;
    translate: none;
    transition:
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      translate .55s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table thead th:nth-child(1),
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table thead th:nth-child(1) { transition-delay: 70ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table thead th:nth-child(2),
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table thead th:nth-child(2) { transition-delay: 140ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table thead th:nth-child(3),
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table thead th:nth-child(3) { transition-delay: 210ms; }

  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody tr:nth-child(1) :is(th, td) { transition-delay: 180ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody tr:nth-child(2) :is(th, td) { transition-delay: 260ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody tr:nth-child(3) th { transition-delay: 340ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody tr:nth-child(3) td:nth-child(2) { transition-delay: 400ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-compare__table tbody tr:nth-child(3) td:nth-child(3) { transition-delay: 460ms; }

  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(1) :is(th, td) { transition-delay: 160ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(2) :is(th, td) { transition-delay: 210ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(3) :is(th, td) { transition-delay: 260ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(4) :is(th, td) { transition-delay: 310ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(5) :is(th, td) { transition-delay: 360ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(6) :is(th, td) { transition-delay: 410ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(7) :is(th, td) { transition-delay: 460ms; }
  html.motion-ready .page-service .prod-spec__frame.is-revealed .prod-spec__table tbody tr:nth-child(8) :is(th, td) { transition-delay: 510ms; }

  html.motion-ready .page-service .prod-compare__frame:not(.is-revealed) .prod-td__icon {
    opacity: 0;
    scale: .7;
  }
  html.motion-ready .page-service .prod-compare__frame.is-revealed .prod-td__icon {
    opacity: 1;
    scale: 1;
    transition:
      opacity .45s cubic-bezier(.22, 1, .36, 1),
      scale .45s cubic-bezier(.34, 1.4, .64, 1);
  }
  html.motion-ready .page-service .prod-compare__frame.is-revealed tbody tr:nth-child(3) td:nth-child(2) .prod-td__icon { transition-delay: 480ms; }
  html.motion-ready .page-service .prod-compare__frame.is-revealed tbody tr:nth-child(3) td:nth-child(3) .prod-td__icon { transition-delay: 540ms; }

  html.motion-ready .page-service .prod-adv__item[data-reveal]:not(.is-revealed) .prod-adv__icon {
    opacity: 0;
    scale: .62;
  }
  html.motion-ready .page-service .prod-adv__item.is-revealed .prod-adv__icon {
    opacity: 1;
    scale: 1;
    transition:
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      scale .55s cubic-bezier(.34, 1.45, .64, 1);
    transition-delay: 80ms;
  }
  html.motion-ready .page-service .prod-adv__item[data-reveal]:not(.is-revealed) h3,
  html.motion-ready .page-service .prod-adv__item[data-reveal]:not(.is-revealed) p {
    opacity: 0;
    translate: 0 12px;
  }
  html.motion-ready .page-service .prod-adv__item.is-revealed h3,
  html.motion-ready .page-service .prod-adv__item.is-revealed p {
    opacity: 1;
    translate: none;
    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      translate .5s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service .prod-adv__item.is-revealed h3 { transition-delay: 160ms; }
  html.motion-ready .page-service .prod-adv__item.is-revealed p { transition-delay: 230ms; }

  html.motion-ready .page-service .prod-iot__card[data-reveal]:not(.is-revealed) img {
    opacity: 0;
    translate: -22px 0;
  }
  html.motion-ready .page-service .prod-iot__card[data-reveal]:not(.is-revealed) > div {
    opacity: 0;
    translate: 22px 0;
  }
  html.motion-ready .page-service .prod-iot__card.is-revealed img,
  html.motion-ready .page-service .prod-iot__card.is-revealed > div {
    opacity: 1;
    translate: none;
    transition:
      opacity .6s cubic-bezier(.22, 1, .36, 1),
      translate .6s cubic-bezier(.22, 1, .36, 1);
  }
  html.motion-ready .page-service .prod-iot__card.is-revealed img { transition-delay: 80ms; }
  html.motion-ready .page-service .prod-iot__card.is-revealed > div { transition-delay: 160ms; }

  html.motion-ready .page-service .prod-feat__item[data-reveal]:not(.is-revealed) img {
    opacity: 0;
    scale: .62;
    rotate: -10deg;
  }
  html.motion-ready .page-service .prod-feat__item.is-revealed img {
    opacity: 1;
    scale: 1;
    rotate: none;
    transition:
      opacity .55s cubic-bezier(.22, 1, .36, 1),
      scale .55s cubic-bezier(.34, 1.4, .64, 1),
      rotate .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 70ms;
  }
  html.motion-ready .page-service .prod-feat__item[data-reveal]:not(.is-revealed) span {
    opacity: 0;
    translate: 0 12px;
  }
  html.motion-ready .page-service .prod-feat__item.is-revealed span {
    opacity: 1;
    translate: none;
    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      translate .5s cubic-bezier(.22, 1, .36, 1);
    transition-delay: 160ms;
  }

  html[data-layout="mobile"].motion-ready .page-service [data-reveal-from="x"] > .is-revealed {
    --reveal-i: 0;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-iot__grid[data-reveal-from="x"] > [data-reveal] {
    translate: 0 28px;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-iot__grid[data-reveal-from="x"] > .is-revealed {
    translate: none;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-structure__explode[data-reveal]:not(.is-revealed) {
    translate: 0 32px;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-structure__callout--pcm[data-reveal]:not(.is-revealed) {
    translate: -28px 0;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-structure__callout--shell[data-reveal]:not(.is-revealed) {
    translate: 28px 0;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-structure__callout--vip[data-reveal]:not(.is-revealed) {
    translate: -28px 0;
  }
  html[data-layout="mobile"].motion-ready .page-service .prod-structure__callout--logger[data-reveal]:not(.is-revealed) {
    translate: 28px 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  html.motion-ready .page-service .prod-adv__item.is-revealed:hover,
  html.motion-ready .page-service .prod-adv__item.is-revealed:focus-within,
  html.motion-ready .page-service .prod-feat__item.is-revealed:hover,
  html.motion-ready .page-service .prod-feat__item.is-revealed:focus-within,
  html.motion-ready .page-service .prod-structure__callout.is-revealed:hover,
  html.motion-ready .page-service .prod-structure__callout.is-revealed:focus-within {
    transform: translateY(-8px);
  }
  html.motion-ready .page-service .prod-iot__card.is-revealed:hover,
  html.motion-ready .page-service .prod-iot__card.is-revealed:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(3, 99, 178, .28);
  }
  html.motion-ready .page-service .prod-adv__item.is-revealed:hover .prod-adv__icon,
  html.motion-ready .page-service .prod-adv__item.is-revealed:focus-within .prod-adv__icon,
  html.motion-ready .page-service .prod-feat__item.is-revealed:hover img,
  html.motion-ready .page-service .prod-feat__item.is-revealed:focus-within img {
    scale: 1.08;
  }
}

html.motion-ready .page-service .prod-adv__item.is-revealed:active,
html.motion-ready .page-service .prod-feat__item.is-revealed:active,
html.motion-ready .page-service .prod-structure__callout.is-revealed:active,
html.motion-ready .page-service .prod-iot__card.is-revealed:active {
  transform: translateY(-6px);
}
html.motion-ready .page-service .prod-iot__card.is-revealed:active {
  box-shadow: 0 12px 24px rgba(3, 99, 178, .28);
}
html.motion-ready .page-service .prod-adv__item.is-revealed:active .prod-adv__icon,
html.motion-ready .page-service .prod-feat__item.is-revealed:active img {
  scale: 1.08;
}

@media (prefers-reduced-motion: reduce) {
  .svc-tabs a {
    transition: none;
  }

  .svc-overview__ring,
  .svc-overview__badge {
    animation: none;
  }

  .svc-scope__grid li,
  .svc-scope__photo {
    transition: none;
  }

  .svc-scope__grid li:hover .svc-scope__photo { scale: 1; }

  html.motion-ready .page-service .prod-adv__item.is-revealed:hover,
  html.motion-ready .page-service .prod-adv__item.is-revealed:focus-within,
  html.motion-ready .page-service .prod-adv__item.is-revealed:active,
  html.motion-ready .page-service .prod-feat__item.is-revealed:hover,
  html.motion-ready .page-service .prod-feat__item.is-revealed:focus-within,
  html.motion-ready .page-service .prod-feat__item.is-revealed:active,
  html.motion-ready .page-service .prod-structure__callout.is-revealed:hover,
  html.motion-ready .page-service .prod-structure__callout.is-revealed:focus-within,
  html.motion-ready .page-service .prod-structure__callout.is-revealed:active,
  html.motion-ready .page-service .prod-iot__card.is-revealed:hover,
  html.motion-ready .page-service .prod-iot__card.is-revealed:focus-within,
  html.motion-ready .page-service .prod-iot__card.is-revealed:active {
    transform: none;
    box-shadow: none;
  }
  html.motion-ready .page-service .prod-iot__card.is-revealed:hover,
  html.motion-ready .page-service .prod-iot__card.is-revealed:focus-within,
  html.motion-ready .page-service .prod-iot__card.is-revealed:active {
    box-shadow: 0px 3px 5px rgba(3, 99, 178, 0.3);
  }
  html.motion-ready .page-service .prod-adv__item.is-revealed:hover .prod-adv__icon,
  html.motion-ready .page-service .prod-adv__item.is-revealed:focus-within .prod-adv__icon,
  html.motion-ready .page-service .prod-adv__item.is-revealed:active .prod-adv__icon,
  html.motion-ready .page-service .prod-feat__item.is-revealed:hover img,
  html.motion-ready .page-service .prod-feat__item.is-revealed:focus-within img,
  html.motion-ready .page-service .prod-feat__item.is-revealed:active img {
    scale: 1;
  }

  .page-service .prod-block__head .section-title__rule,
  .page-service .prod-feat__head .section-title__rule,
  .page-service .prod-adv__sub,
  .page-service .prod-structure__explode,
  .page-service .prod-structure__callout,
  .page-service .prod-structure__callout img,
  .page-service .prod-structure__callout h3,
  .page-service .prod-structure__callout p,
  .page-service .prod-compare__table :is(th, td),
  .page-service .prod-spec__table :is(th, td),
  .page-service .prod-td__icon,
  .page-service .prod-adv__item,
  .page-service .prod-adv__icon,
  .page-service .prod-adv__item h3,
  .page-service .prod-adv__item p,
  .page-service .prod-iot__card,
  .page-service .prod-iot__card img,
  .page-service .prod-iot__card > div,
  .page-service .prod-feat__item,
  .page-service .prod-feat__item img,
  .page-service .prod-feat__item span {
    opacity: 1;
    translate: none;
    transform: none;
    scale: 1;
    rotate: none;
    transition: none;
    animation: none;
  }
}