/* pages/solutions-detail.css — 解决方案详情页（bundle 4:365「SOLUTIONS-detail」，1920×5026）
   断点：base 移动流式；≥768 加留白；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 solutions.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent;
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1);
}

/* ---------- 面包屑（4:461：x=82，y=146；三级起 flex-wrap） ---------- */
.psold-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.psold-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}

.psold-crumbs svg {
  flex: none;
}

.psold-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 项目主区（4:454：块 x=82–1920 右出血；左标题块 y=265，右图 800×600 y=203） ---------- */
.psold-hero {
  display: grid;
  margin: 0 0 0 5.125rem; /* 左 82，右贴视口缘 */
}

.psold-hero__lead {
  position: relative;
  padding-top: 6.25rem; /* 标题 y=265（块顶 165 + 100） */
}

.psold-hero__title {
  max-width: 60rem; /* 960 */
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
  font-weight: var(--font-weight-medium);
}

.psold-hero__rule {
  width: 18.75rem; /* Line 10 红线 300 */
  /* 2026-09-18 用户要求「红线太细」→ 1px 加粗到 3px。
     做法：盒子真变 3px，上下边距各吃 1px 抵消（margin-top 60→59、margin-bottom 0→-1），
     于是**线中心恒 512.89**、上方标题与下方机型/导语位置全部零漂移。
     实测五档视口（1920/1280/1024/768/375）Δ中心 / Δ机型 / Δ导语 / Δ文档高 全为 0.00px。
     ⚠ 别只改 border-top 不补边距：md 档（768–1279）机型在静态流里、且 <768 的抵消规则不生效，
       实测机型与导语会下移 2px、文档高 +2px。
     ⚠ margin-top 在 ≥1280 与 <768 各被覆盖一次，改这一处必须同步改那两处。
     ⚠ 选型说明：box-shadow「上下各补 1px」也能零漂移且像素级输出与本方案逐行一致，
       但那样盒子仍是 1px、语义不实；本方案让「线就是 3px」在 CSS 里直接可读。 */
  margin: calc(3.75rem - 1px) 0 -1px; /* 上 59（原 60）、下 -1：3px 盒上下各探 1px */
  border: 0;
  border-top: 3px solid var(--color-primary);
}

.psold-hero__model {
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
}

.psold-hero__desc {
  margin-top: 3.6875rem; /* 导语 y=565（线底 506 + 59） */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
}

.psold-hero__media {
  align-self: start;
  margin-top: 2.375rem; /* 图 y=203（块顶 165 + 38） */
}

.psold-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 600;
  object-fit: cover;
}

/* ---------- PROJECT CONFIGURATION（4:418：全宽灰底 y=945–3015；左列 3 图 810×540，右列 4 组配置） ---------- */
.psold-config {
  margin-top: 5rem; /* 主区底 865 → 945 */
  padding-top: 5rem; /* 标题 y=1025 */
  padding-bottom: 5rem; /* 图 3 底 2945 → 3015 */
  background: var(--color-gray-100);
}

.psold-config__title {
  padding-inline: 5.125rem 2.5rem;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h2));
  line-height: 3.125rem; /* 50 */
  font-weight: var(--font-weight-medium);
}

.psold-config__rule {
  margin: 0 3.125rem; /* Line 5 x=50–1870，紧贴标题底 */
  border: 0;
  border-top: 1px solid var(--color-text-1);
}

.psold-config__body {
  display: grid;
  /* 2026-09-23 用户要求「右边距也调整成 82px」→ 左右对称 82/82（原右 10.99%）。
     ⚠ 本条是 base，由 1025–1279 档位生效（<1025 与 <768 另有 margin-inline 覆盖，
       早已是 40/40 与 24/24 对称）；≥1280 另有独立规则，除 margin 外还要重算列宽。 */
  margin: 5rem 5.125rem 0;
}

.psold-config__media {
  display: flex;
  flex-direction: column;
  gap: 5rem; /* 图间距 80（210→830→1450） */
}

.psold-config__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 810 / 540;
  object-fit: cover;
}

.psold-config__group + .psold-config__group {
  margin-top: 2.5rem; /* 组间距 40 */
}

.psold-config__group h3 {
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
}

.psold-config__group ul {
  margin-top: 1.25rem; /* bullet 组顶 y=52（组顶 + 20） */
  list-style: none;
}

.psold-config__group li {
  display: grid;
  grid-template-columns: .5rem 1fr;
  column-gap: .9375rem; /* 圆点 8 + 15 = 文字 x=23 */
  font-size: var(--font-size-h3);
  line-height: 2rem;
  color: var(--color-text-2);
}

.psold-config__group li + li {
  margin-top: .625rem; /* bullet 行距 10（32 行高 + 10 = 42） */
}

.psold-config__group li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  margin-top: .75rem; /* 圆点中心对首行中心（y=16） */
  border-radius: var(--radius-full);
  background: var(--color-text-2);
}

/* ---------- VIEW OTHER SOLUTIONS（4:394：标题 y=3095，3 卡 640×660 无间距） ---------- */
.psold-other {
  margin-top: 5rem; /* 配置区底 3015 → 3095 */
}

.psold-other__title {
  padding-inline: 5.125rem 2.5rem;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h2));
  line-height: 3.125rem;
  font-weight: var(--font-weight-medium);
}

.psold-other__list {
  display: grid;
  margin-top: 0; /* 卡行 y=3145，紧贴标题底（3095+50） */
  list-style: none;
}

.psold-card {
  position: relative;
  padding: 4.3125rem 1rem 1.5rem;
  background: var(--color-bg-card);
  transition: background-color .2s ease-out;
}

/* ⚠ 坑 29 同型（2026-09-20 审计发现并修）：同 products-sub.css 的 `.pmod-card`，
   `.psold-card`（VIEW OTHER SOLUTIONS）也是 `[data-m-stagger]` 的直接子元素，
   上面那条 `transition: background-color .2s` 被 motion.css（0,2,0）整条覆盖 → hover 背景瞬跳。
   解法：选择器抬到 (0,3,0) + 把 motion 三条过渡原样抄回。❗ 详见 products-sub.css 同名规则的注释。 */
.psold-other .psold-other__list .psold-card {
  transition:
    opacity var(--m-dur) ease var(--m-delay, 0ms),
    translate var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    scale var(--m-dur) var(--m-ease) var(--m-delay, 0ms),
    background-color .2s ease-out;
}


.psold-card__media {
  position: relative;
  aspect-ratio: 540 / 420;
  overflow: hidden;
}

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

/* hover 态遮罩 + 机型标签（数据以设计稿 hover 卡 MDL-150XE 为 mock，后端接入后替换） */
.psold-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease-out;
}

.psold-card__flag {
  display: none;
  position: absolute;
  z-index: 1;
  right: 11.85%; /* 标签右缘距图右 64/540 */
  bottom: .3125rem;
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
  color: #fff;
}

/* 红段线：图底 1px，默认居中 270/540，hover 两端延长盖满（无黑底线，与 solutions 列表卡同型） */
.psold-card__line {
  position: relative;
  height: 1px;
  margin-top: 1px;
}

/* 红段线（2026-09-18 用户要求「参照 solutions.html 九卡」，1px → 3px）：
   与 solutions.html 的 .psol-card__line::after 同构 —— 父盒仍是 1px，
   红段用 top:50% + translateY(-50%) 上下对称溢出到 3px。
   好处：线**中心**不变、下方标题完全不动（标题仍距线底 29px），也不用改任何 margin。
   ⚠ 内缩保持本页 25%（135/540）：本页图宽 540，25% 正好 = 设计值 270；
     solutions.html 写 24.53% 是因为那边图宽 530，两者视觉等价，别照抄。
   ⚠ 代价是红段上缘会压住图片底部 1px（与 products-sub「红覆黑线」同一手法）。
   ⚠ 别改成「父盒 height:3px」：那会让标题下移 2px。
   ⚠ <768 档本规则被 display:none 覆盖（移动端不要这条线，见文件末媒体查询）。 */
.psold-card__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;  /* 红段 270 居中（135/540） */
  right: 25%;
  height: 3px;   /* 上下居中覆于 1px 盒，上下各探 1px */
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: left .35s ease-out, right .35s ease-out;
}

.psold-card__go {
  position: absolute;
  right: 0;
  /* ⚠ 从 calc(100% + 1px) 改为 100%（2026-09-18，参照 solutions.html）：钮整体下移 1px，
     与红段**重叠** 1px。原值在盒模型上确实与红段上缘相切（0 缝），但钮与红段各自成层、
     各自光栅化取整、共享边界又落在分数坐标上 → 被撕开一条 1px 缝（本页改造前实测存在）。
     几何：红段 3px 占 723.78..726.78，钮底 724.78 → 重叠恒 1.00px。
     ⚠ 这个 1px 不是「视觉微调」，是**消除接缝的必要量**，别再改回相切。 */
  bottom: 100%;
  z-index: 2; /* 高于整卡覆盖层（.psold-card__link::after 的 z-index:1）—— 指针落在钮上时命中的是钮自己，保住它的 :hover 变深红 */
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border-radius: .3125rem 0 0 0; /* 左上 5px 圆角（2026-09-18 用户要求「参照 solutions.html」；其余三角仍为设计稿的直角） */
  background: var(--color-primary);
  color: #fff;
  transition: opacity .2s ease-out, background-color .2s ease-out;
}

.psold-card__go:hover {
  background: var(--color-primary-dark);
}

.psold-card__go svg {
  width: .625rem;  /* 10 */
  height: .875rem; /* 14 */
}

/* 整卡可点（2026-09-18 用户要求「参照 solutions.html 整卡点击跳转」）：stretched link。
   关键在 .psold-card__link **自身是 static** —— 它 ::after 的包含块才会是上面那个
   position:relative 的 .psold-card，inset:0 才能铺满整张卡（含卡片内边距）。
   ⚠ 若日后给 .psold-card__link 或它祖先加 position，覆盖层会塌回那个祖先的盒子。
   ⚠ 不能把这套挪进 .psold-card__line：它是 position:relative，会把包含块截在 1px 高的线上。
   配合 HTML：标题里是**真链接**（留在无障碍树），红色箭头钮改为 aria-hidden + tabindex="-1"。
   ⚠ 覆盖层与 .psold-card__flag 同为 z-index:1，靠 DOM 顺序决胜（title 在 figure 之后）→ 链接赢。 */
.psold-card__link {
  color: inherit;
  text-decoration: none;
}

.psold-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 低于红色钮的 z-index:2，高于卡片其余内容 */
}

.psold-card__title {
  margin-top: 1.8125rem; /* 标题 y=519（线底 490 + 29） */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
}

/* ---------- 售后服务（4:375：与 products/solutions 同构同文案） ---------- */
.psold-service {
  margin-top: 6.25rem; /* 卡行底 3805 → 3905 */
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-text-1); /* Line 7 */
}

.psold-service__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39;
  border-bottom: 1px solid currentColor; /* Line 5 */
}

.psold-service__cols {
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.psold-service__col {
  position: relative;
}

.psold-service__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
}

.psold-service__col h3 {
  margin-top: var(--space-10);
  padding-right: 5rem;
  font-size: var(--font-size-h3);
  line-height: 2rem;
}

.psold-service__col p {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem;
  color: var(--color-text-2);
}

/* ---------- 页尾标语（4:367：与服务区/页脚间距均 80） ---------- */
.psold-slogan {
  margin: 5rem auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.psold-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.psold-slogan .btn-more {
  margin-top: 1.875rem;
}

/* ---------- 平板档（768–1279：加大留白，网格两列） ---------- */
@media (min-width: 768px) {
  .psold-crumbs {
    margin-inline: var(--space-10);
  }

  .psold-hero {
    margin-left: var(--space-10);
  }

  .psold-hero__lead {
    padding-top: 4rem;
  }

  .psold-config__title,
  .psold-other__title {
    padding-inline: var(--space-10) 2.5rem;
  }

  .psold-config__rule {
    margin-inline: var(--space-10);
  }

  .psold-config__body {
    margin-inline: var(--space-10);
  }

  .psold-other__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .psold-card {
    padding: 4.3125rem 2rem 1.5rem;
  }

  .psold-service {
    padding-inline: var(--space-10);
  }

  .psold-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .psold-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146) */
  }

  .psold-hero {
    grid-template-columns: 52.23% 43.53%; /* lead 960/1838 + 图 800/1838，余为间隙 */
    justify-content: space-between;
    align-items: center; /* 左右两区块上下居中对齐（设计稿两块中心对齐） */
    min-height: 43.75rem; /* 700 */
    margin-left: 5.125rem; /* 恢复 x=82（md 档 40px 泄漏） */
  }

  .psold-hero__lead {
    padding-top: 0; /* 垂直居中由 grid align-items 承担 */
  }

  /* ⚠ 本块内**不要**再放 `.psold-hero__title` 的 font-size 覆盖。
     2026-09-23 审计：这里曾另有一条 `.psold-hero__title { font-size: var(--font-size-h1) }`，
     与本条同块、同特异性、位置靠后 → 后者胜，本条成**死声明**，
     标题在 1280–1919 恒 48px 完全不收缩，与本注释所述「与导语同节奏」矛盾。已删除。
     现标题随视口收缩：1280→40 / 1440→42 / 1600→44 / 1920→48px，
     与 `.psold-hero__desc`（20→24）同为跨 1280 断点收一档（−16.7%）再长回 1920 的节奏。
     若日后确要改回固定值，请**同时删除**本条的 clamp，别让两条并存。 */
  .psold-hero__title {
    font-size: clamp(2.5rem, 1.25vw + 24px, 3rem); /* 48 @1920，1280–1920 与导语同节奏收缩 */
  }

  .psold-hero__rulewrap {
    position: relative; /* 占满 lead 宽：标签 absolute left 320px 的可用空间由此提供（fit-content 会把标签挤折行） */
  }

  .psold-hero__model {
    position: absolute;
    left: 20rem;    /* x=320，红线右端 300 + 20 */
    top: 50%;
    transform: translateY(-50%); /* 与红线上下居中，随标题行数自适应 */
    white-space: nowrap;
  }

  .psold-hero__media {
    align-self: center;
    margin-top: 0;
  }

  .psold-config__rule {
    margin-inline: 3.125rem; /* 恢复 Line 5 x=50（md 档泄漏） */
  }


  .psold-hero__rule {
    margin-top: calc(3.75rem - 1px); /* 59：3px 盒比原 1px 盒上探 1px，同步减 1 保线中心 556.89 */
  }

  .psold-hero__desc {
    margin-top: 3.6875rem; /* y=565 */
    font-size: clamp(1.25rem, .625vw + 12px, 1.5rem); /* 24 @1920，1280–1920 随标题同节奏收缩防溢出 */
  }

  .psold-config__title,
  .psold-other__title {
    padding-inline: 5.125rem 2.5rem;
    font-size: var(--font-size-h2); /* 36 */
  }

  .psold-config__body {
    /* 2026-09-23 用户要求「右边距也调整成 82px」→ 内容区左右对称 82/82。
       内容盒因此从 **1627**（1920 − 左 82 − 右 211）变宽到 **1756**（1920 − 82 − 82），
       多出 129px；用户选择「左图锁 810×540、间距锁 136，129px 全给右文列」→ 右列 681 → 810。
       故三列 = 810 : 136 : 810，分母 1756：
         810 / 1756 = 46.1276%      136 / 1756 = 7.7449%      合计 100.0001% ≈ 满铺
       ⚠ 分母仍是**内容盒**而不是画板宽 1920（旧值 42.1875%/35.4688% 就是按 1920 算错的，
         实测只有 686.39 / 577.06，与设计 810 / 681 不符 —— 别再犯）。
       验算 @1920：46.1276% × 1756 = 810.0 ✓ ；7.7449% × 1756 = 136.0 ✓ */
    grid-template-columns: 46.1276% 46.1276%; /* 810 / 810（原 810 / 681） */
    column-gap: 7.7449%; /* 136 */
    margin: 5rem 5.125rem 0; /* 上 80 / 左右 82 / 下 0（原右 10.99% ≈ 211） */
  }

  /* ---------- 静态排列（2026-09-23 用户要求：去掉左图「上推覆盖」动画）----------
     移除的是：左图叠放动画（`is-stack` 系列）+ 左卡 sticky + 右文 sticky + 行程占位。
     恢复设计稿的静态几何：
       · 左列 3 图**纵向排列、间距 80** → 总高 1780（设计稿图位标注 210→830→1450，正是此排布）
       · 右列文字**吸附**在视口内，左图从旁边滚过（见下方 `.psold-config__list` 规则）
       · 区块高 1726 → 约 3016，与设计稿 `y=945–3015` 吻合
     ⚠ 物理事实（别再试图「左侧整体固定」）：左列 1780px > 视口 900px，
       `position: sticky` 对**高于视口**的元素**不产生固定效果** —— 它会照常滚走。
       要让左侧真钉住，3 图必须叠进单个 ≤视口 的图框（一次只显示 1 张），
       这与「3 张图都要看得见」直接冲突。用户已确认取「3 图全可见」。
     ⚠ 这里**不再覆盖 `.psold-config__media` 的 display** ——
       让 base 的 `display: flex; flex-direction: column; gap: 5rem` 生效，恢复 80px 图间距
       （原来的 `display: block` 是叠放动画专用，会把 flex 的 gap 一并吃掉）。
     ⚠ `.psold-config__spacer` 改 `display: none`：
       原 `height: 72vw` 是叠放动画的滚动行程来源，静态排列下留着会凭空多出 1382px 空白；
       而若只把高度归零、元素仍在流内，它作为 flex 项会**多贡献一个 80px 的 gap**
       （4 项 3 缝，应为 3 项 2 缝）→ 必须 `display: none` 让它彻底退出布局。
       ⚠ 不删 DOM —— 移动端 marquee 按 `children.length` 定位克隆组首项，删了会改 origCount
         （已核实 period 值不变，但保留 DOM 是零风险选择）。 */
  .psold-config__spacer {
    display: none;
  }

  /* 右列吸附（2026-09-23 用户二次确认）：
     背景 —— 静态排列下右列内容只有 624px、贴在 1780px 格子的顶部，滚约 835px 后文字全部
     移出视口，而左图还有约 945px 没滚完 → **右侧一大片空白**（截图 dy=900 已复现）。
     效果 —— 滚到图片区后文字钉在视口内，左图从旁边滚过；行程走完后文字底部与图片列底部
     同步离场（不再出现空白）。
     ⚠ **必须 `align-self: start`** —— grid 默认 `stretch` 会把右列拉成 1780px（= 左列高），
       元素高 = 容器高 → sticky 没有可移动余量，**等于没生效**（会退化成 static）。
     ⚠ `top` 里的 6rem 是**子页导航高度**（`.page-sub .site-nav` 为 sticky top:0、height 6rem），
       另加 2.5rem 间隙，避免吸附时文字贴住导航底边。
     ⚠ 祖先链已核实无 `overflow != visible` / `transform` / `filter`（`.section{overflow:hidden}`
       只作用于 `.section` 类，本版块是 `<section class="psold-config">`，不受影响）。
     ⚠ sticky 行程 = 容器 1780 − 内容 624 ≈ 1156px（实测吸附区间：滚动偏移 200–1200 稳定在 136）。 */
  .psold-config__list {
    position: sticky;
    top: calc(6rem + 2.5rem); /* 96（子页导航）+ 40 间隙 = 136 */
    align-self: start;
  }

  .psold-other__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 41.25rem; /* 660，行高固定 */
  }

  .psold-card {
    padding: 4.3125rem 7.8125% 1.5rem; /* 上 69，左右 50/640 */
  }

  /* 设计稿卡 3 即 hover 态（灰底 + 全宽红线 + 箭头钮 + 遮罩/机型标签），三卡统一实现为 hover/focus-within */
  .psold-card__go {
    opacity: 0;
  }

  .psold-card:hover,
  .psold-card:focus-within {
    background: var(--color-gray-100);
  }

  /* 图片 hover 放大（2026-09-18 用户要求 scale(1.05)，参照 solutions.html）。
     .psold-card__media 已是 overflow:hidden，img 是 width/height:100% + object-fit:cover
     填满容器 —— 放大绕自身中心 = 绕窗中心，**不需要** transform-origin 修正。
     不写 will-change：hover-only 元素常驻提升合成层是反模式，transform 过渡本身已走合成器。
     ⚠ 必须 gate ≥1280：触屏没有 hover，且本档的遮罩 / 机型标签 / 红线展开也都是 ≥1280 才启用。
     ⚠ 基态写 transform: scale(1)（不是 none）：给过渡一个同类型的起点。 */
  .psold-card__media img {
    transform: scale(1);
    transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  }

  .psold-card:hover .psold-card__media img,
  .psold-card:focus-within .psold-card__media img {
    transform: scale(1.05);
  }

  .psold-card:hover .psold-card__go,
  .psold-card:focus-within .psold-card__go {
    opacity: 1;
    /* 等红线铺完（.35s = 上面 ::after 的 left/right 过渡时长）再出现，与 solutions.html 一致。
       只给 hover-in 加延迟：基态 transition 无延迟，移出鼠标时钮先消失、线再收回，反向顺序天然正确。
       ⚠ 必须写成**两个值**：.psold-card__go 基态 transition 列了两条
       （opacity .2s, background-color .2s），单值 transition-delay 会同时命中两者 ——
       那样指针移到钮上时「变深红」也会被拖 350ms。
       第一个值对应 opacity（要延迟），第二个对应 background-color（不延迟）。 */
    transition-delay: .35s, 0s;
  }

  .psold-card:hover .psold-card__line::after,
  .psold-card:focus-within .psold-card__line::after {
    left: 0;
    right: 0;
  }

  .psold-card__flag {
    display: block;
    opacity: 0;
    transition: opacity .2s ease-out;
  }

  .psold-card:hover .psold-card__media::after,
  .psold-card:focus-within .psold-card__media::after {
    opacity: 1;
  }

  .psold-card:hover .psold-card__flag,
  .psold-card:focus-within .psold-card__flag {
    opacity: 1;
  }

  .psold-service {
    padding: 0 3.125rem;
    border-bottom: 0; /* Line 7 移到 __inner（见下） */
  }

  /* 售后区两条分隔线（设计 Line 5 / Line 7）都横跨区块盒 50→1870（1820），文字才内缩到 x=82：
     原先 Line 7 挂在区块 border 上 → 跨满视口 0→1920；Line 5 挂在标题上、被 __inner 的
     2rem 内缩带成 82→1838 —— 两条都偏。改法：__inner 不再承担内缩，两条线自然跨满区块盒，
     内缩交给文字元素自己（标题与两栏各 2rem）。仅 ≥1280 生效，移动/平板档不变。 */
  .psold-service__inner {
    border-bottom: 1px solid var(--color-text-1); /* Line 7：50→1870 */
  }

  .psold-service__title {
    padding-inline: 2rem; /* 文字 x=82；Line 5 随盒跨 50→1870 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem;
  }

  .psold-service__cols {
    padding-inline: 2rem; /* 两栏内容仍在 x=82 / x=1010 */
    grid-template-columns: 47.1526% 47.1526%; /* 828/1756：百分比按**内容盒**解析（1820 − 2rem×2），不是按画板宽 1820 */
    justify-content: space-between;
    gap: 0;
    margin-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .psold-service__cols::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 19.375rem; /* Line 6 竖线 310 */
    background: var(--color-text-1);
  }

  .psold-service__icon {
    width: 5rem;
    height: 5rem;
  }

  .psold-service__col h3 {
    margin-top: 3rem;
    padding-right: 0;
  }

  .psold-service__col p {
    margin-top: 3.125rem;
  }

  .psold-slogan {
    margin: 5rem auto; /* 售后底 4325 → 标语 4405；底 4534 → 页脚 4614 */
  }

  .psold-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem;
  }
}

/* ---------- 移动端专属（<768 手机档；PC / 平板档严格不动） ---------- */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .psold-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 区块导语字号全站统一 18/26（与各列表页导语一致；原 24/32 偏大） */
  .psold-hero__desc {
    font-size: var(--font-size-body-md); /* 18 */
    line-height: 1.625rem; /* 26 */
  }

  /* 配置区 4 组的小标题（DRILLING TOOL CONFIGURATION / PROCESS TYPE / …）及其下的小字列表项：
     与上面的导语统一 18/26（原 24/32；用户指定对齐 MDL-150XE 下的小文字）。
     字重不动——标题保留 500 以维持层级。 */
  .psold-config__group h3,
  .psold-config__group li {
    font-size: var(--font-size-body-md); /* 18 */
    line-height: 1.625rem; /* 26 */
  }

  /* 圆点位置随行高重算：原 line-height 32 → margin-top 12（中心 16 = 32/2）。
     行高降到 26 后中心应为 13 → margin-top = 13 − 圆点半径 4 = 9。
     不改的话圆点会相对首行偏下 3px。 */
  .psold-config__group li::before {
    margin-top: .5625rem; /* 9 */
  }

  /* 售后区：与 products.html 同构——图标从右上角绝对定位移到标题前（同行、上下居中），缩小 64 → 40。
     两列内容改用两行网格：第 1 行 = 图标 + 标题，第 2 行 = 正文（跨列，与标题左缘对齐）。 */
  .psold-service__col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3); /* 12：图标与标题间距 */
  }

  .psold-service__icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 2.5rem;  /* 40（原移动端 4rem） */
    height: 2.5rem;
  }

  .psold-service__col h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;    /* 图标已占首行，标题不再下移 */
    padding-right: 0; /* 无需再避让右上角图标 */
  }

  .psold-service__col p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* ---------- 全页对齐修复（2026-09-17）：base 层把桌面 x=82 的文字基线写死，
     而 ≥768 档用 --space-10 覆盖、<768 档无人管 → 375 下 hero / config / other 三区
     内容整体被推到 x=82（右侧越过视口，被 .section 的 overflow:hidden 裁掉）。
     本页其余区块（crumbs / service / slogan）用的是 24 页边距，故这里统一回 24。
     ⚠ 只改 <768；≥768 与 ≥1280 段不受影响（它们各自有显式覆盖）。 ---------- */

  /* hero：原 margin-left:82，且 300 宽红线把 grid 单列撑到 300 → 内容 82→382，右侧裁掉 7px。
     改回左右对称 24 后容器 327 > 300，列宽不再溢出。 */
  .psold-hero {
    margin: 0 var(--space-6);
  }

  /* 面包屑 → 标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     ⚠ 本页标题的 y 由 .psold-hero__lead 的 padding-top 决定（base 6.25rem = 100，是 1920 设计值），
     块自身上外边距为 0 → 所以这里要改的是 __lead 的 padding-top，**不是块的外边距**
     （给块加 margin-top 只会把 100 一起推下去）。 */
  .psold-hero__lead {
    padding-top: 3.75rem; /* 60 */
  }

  /* 红线：① 300 宽在 <320 视口会撑破列宽，加上限（375 下不生效，取值仍是 300）；
     ② 上移 20（60 → 40）：原「标题底 → 线」间距在 375 下偏大（实测 60px）。
     ⚠ 移动端 <768 的 .psold-hero__model 是普通流（≥1280 才 absolute），它紧跟在 <hr> 之后，
     所以单改线的 margin-top 会把 MDL-150XE 一起带上去 → 必须给机型补等量的 margin-top 抵消。
     补 20 后：线 607→587（上移 20 ✓）、机型 608 不变 ✓、rulewrap 高度 33→53 使 wrap 底仍为 640
     → 其后的导语 y 也不变 ✓。 */
  .psold-hero__rule {
    max-width: 100%;
    margin-top: calc(2.5rem - 1px); /* 39（原 40）：与 ≥1280 同理，3px 盒上探 1px */
  }

  .psold-hero__model {
    margin-top: 1.25rem; /* 20：抵消线的上移，保持 MDL-150XE 原位 */
  }

  /* 区块标题：原 padding-inline 82 / 40（盒却横跨 0→375，文字才内缩）→ 两侧 24，文字与横线同缘。
     line-height 原为固定 50px（为 ≥1280 的 36 字号所设），28 字号下 1.79 倍过松 → 改 1.39，
     与 products / solutions 列表页的区块标题一致。 */
  .psold-config__title,
  .psold-other__title {
    padding-inline: var(--space-6);
    line-height: 1.39;
  }

  /* 配置区横线：原 margin-inline 50 → 与标题文字同缘 24 */
  .psold-config__rule {
    margin-inline: var(--space-6);
  }

  /* 配置区正文：原 左 82 / 右 10.99%（≈41）→ 左右不对称；改回 24 / 24 */
  .psold-config__body {
    margin-inline: var(--space-6);
  }

  /* 卡内边距：原 16，与全页 24 基线差 8px；对齐到 24 */
  .psold-card {
    padding-inline: var(--space-6);
  }

  /* VIEW OTHER SOLUTIONS：图下细红线不要（用户口头规格，仅移动端）。
     ⚠ 只隐藏 ::after（红段本身），不要隐藏 .psold-card__line：
     它是 .psold-card__go（45×45 箭头钮）的包含块——钮靠 `bottom: 100%`
     贴在线元素上缘，整块 display:none 会把箭头钮一起干掉。
     保留 1px 的空线元素，箭头位置与标题 y 全部不变。 */
  .psold-card__line::after {
    display: none;
  }

  /* ---------- PROJECT CONFIGURATION 移动端改造（2026-09-17，用户口头规格）----------
     ① 去掉标题下的下划线；② 三图改为同一行、无限循环自动轮播；③ 图片离标题缩 20px。
     ⚠ 只改 <768；≥768 与 ≥1280 完全不受影响（≥1280 仍是 sticky 滚动层叠动画）。 ---------- */

  /* ① 下划线不要（元素保留在 DOM，只隐藏；避免动 HTML 结构影响桌面档） */
  .psold-config__rule {
    display: none;
  }

  /* 标题及以下内容整体上移 15px（用户口头规格）。
     ⚠ 改的是 padding-top 而不是 margin-top：用户明确要「灰底顶边不动」，
     margin-top 会把整个灰底区块一起往上推（白底/灰底分界线跟着变高）。
     改 padding-top 则灰底顶边留在原位，标题上方的灰底留白 80 → 65，
     区块总高 -15 → 其下所有内容（VIEW OTHER SOLUTIONS / 售后 / 标语）同步上移 15。 */
  .psold-config {
    padding-top: 4.0625rem; /* 65（原 5rem = 80） */
  }

  /* ③ 间距缩 20：原「标题底 → 图顶」= 81px（横线 1px + body margin-top 80px）。
     横线隐藏后少掉那 1px，故 margin-top 取 61 → 新间距 61px，正好比原 81 少 20。
     （写成 3.8125rem 而非 3.75rem，是为了严格对齐「-20px」而不是「-21px」。） */
  .psold-config__body {
    margin-top: 3.8125rem;
  }

  /* ② 三图同一行 + 横滑 + 无缝自动轮播。
     自动循环由 js/stats-marquee.js 驱动（[data-stats-marquee]）：克隆一组内容后
     按「克隆组首项 − 原始组首项」的偏移回绕，与 gap 大小无关、接缝处不跳格。
     不做 scroll-snap：程序化 scrollLeft 递进与 mandatory 吸附会互相打架。 */
  .psold-config__media {
    flex-direction: row;
    gap: .75rem;                    /* 12：卡间距（原纵向 80） */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* 滑到两端不带动页面、不触发返回手势 */
  }

  .psold-config__media::-webkit-scrollbar {
    display: none;
  }

  /* 卡宽 82%（375 下 327 × 82% ≈ 268，3:2 → 高 179）：右侧露出下一张约 47px，提示可滑动 */
  .psold-config__card {
    flex: none;
    width: 82%;
  }

  /* 行程占位是 ≥1280 层叠动画专用（空高 div）；移动端留着会在轮播接缝处多出一个 gap
     → 视觉上接缝处间隔变成两倍。直接隐藏（display:none 不参与 flex 布局，也不产生 gap）。 */
  .psold-config__spacer {
    display: none;
  }

  /* 图片条 → 下方文字：留 20 间距。
     原为 0（.psold-config__body 是单列 grid，row-gap 为 normal=0，media 底与 h3 顶完全贴合），
     三图改横排后贴太紧。用 list 的 margin-top 而非 body 的 row-gap，语义更明确且不影响后续组间距。 */
  .psold-config__list {
    margin-top: 1.25rem; /* 20 */
  }
}