/* ==========================================================================
   NEWARE · CT/CE-5000 系列（5 系列）合并版样式 · v3 苹果风
   页面：https://www.neware.com.cn/BTS5000
   由 _build2_deploy.py 从 src/v3-合并版/ct-ce-5000.css 生成，请勿手改本产物。

   作用域纪律：全部规则以 .cs5 / .cs5-* / #cs5-* 开头，无任何裸元素选择器
   → 不会影响站点其它页面（header / footer / 咨询悬浮栏 / 自带产品列表）。

   v3 相对 v2 的唯一结构改动：把「精度口径 / 合规窗口 / 协议联测 / 节能测算」
   四屏合并为一屏「四项主张并排 + 详情弹层」（#cs5-claims）。屏序 12 → 9。
   四屏原有的互动控件（精度换算滑杆 / 节能测算滑杆）与两张表格、寄存器表
   全部平移进弹层，逻辑与数值一字未改。

   v2 视觉语言 = Apple 官网：
     · 底：#fff 与 #f5f5f7 交替，深色屏纯黑 #000
     · 字：#1d1d1f / #6e6e73 / #86868b，系统字 + 紧字距大标题
     · 品牌金 #f0b100 收敛为点缀（按钮 / 关键数字 / 关键词标注），
       关键词标注、日期与承诺条一律用品牌金本身；只有浅底上的图形小图标
       保留压深档 --gold-deep，否则它们在白底上会真的看不见
     · 卡片白底 + 发丝边 + 18~28px 圆角，几乎不用投影
     · 注释类信息（cs5-note / cs5-caveat）改为「脚注」形态，不再套色块

   功能性规则（轮播几何 / 弹层显隐 / 状态类 / 响应式断点）与原版完全一致。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌 · 作用域基座
   ========================================================================== */
.cs5{
  --gold:#f0b100;
  --gold-2:#e3a400;
  --gold-deep:#a35c00;   /* 仅剩浅底上的图形小图标在用：文字标注统一走 --gold 品牌金 */
  --gold-soft:#fdf6e3;
  --gold-line:rgba(240,177,0,.32);
  --ink:#1d1d1f;
  --ink2:#3a3a3c;
  --ink3:#6e6e73;
  --gray:#6e6e73;
  --gray-l:#86868b;
  --cream:#f5f5f7;
  --paper:#fff;
  --line:rgba(0,0,0,.09);
  --line-2:rgba(0,0,0,.17);
  --line-d:rgba(255,255,255,.14);
  --dark:#000;
  --dark2:#1d1d1f;
  --dark3:#2c2c2e;
  --ok:#248a3d;
  --shadow:0 12px 32px rgba(0,0,0,.08);
  --shadow-lg:0 24px 64px rgba(0,0,0,.16);
  --sh-sm:0 1px 4px rgba(0,0,0,.04);
  --r-sm:10px;--r:18px;--r-lg:20px;--r-xl:28px;--r-pill:980px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --gutter:120px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --num:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC","Hiragino Sans GB","Source Han Sans SC","Microsoft YaHei","Segoe UI",sans-serif;
  color:var(--ink);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:clip;
  background:var(--paper);
}
.cs5 *,.cs5 *::before,.cs5 *::after{box-sizing:border-box;margin:0;padding:0}
.cs5 img{max-width:100%;height:auto;display:block}
:where(.cs5 a){text-decoration:none;color:inherit}
:where(.cs5 button){font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
.cs5 ul,.cs5 ol{list-style:none}
.cs5 ::selection{background:rgba(240,177,0,.24);color:var(--ink)}
.cs5 a:focus-visible,.cs5 button:focus-visible,.cs5 input:focus-visible,
.cs5 select:focus-visible,.cs5 textarea:focus-visible,.cs5 [tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:6px;
}
.cs5-noscript-hide{display:none}
@media (prefers-reduced-motion:reduce){
  .cs5 *,.cs5 *::before,.cs5 *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;
  }
}

/* 图标：stroke-based，与线上 .hwi-ic 同构 */
.cs5-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.cs5-ic--sm{width:16px;height:16px;stroke-width:2}
.cs5-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   2. 布局基元
   ========================================================================== */
.cs5-wrap{max-width:1560px;margin:0 auto;padding:0 var(--gutter);width:100%}
.cs5-sec{position:relative;padding:110px 0;background:var(--paper)}
.cs5-sec--cream{background:var(--cream)}
.cs5-sec--tight{padding:72px 0}
.cs5-sec--dark{background:var(--dark);color:#f5f5f7}
.cs5-sec--dark ::selection{background:rgba(240,177,0,.3)}
.cs5-hair{height:1px;background:var(--line);border:0}

/* 屏头：Apple 式无装饰线，靠字距与层级说话 */
.cs5-head{max-width:920px}
/* 加宽落位。四屏在 920px 落位下会出事（都以「量到几何」为准，不是看着别扭就算了）：
   · 型号矩阵 —— 副文单行要 931px，869px 量尺下末行只剩「…」；
   · 精度换算（v3 已并入主张屏）—— 副文单行要 1766px；
   · 适用场景 —— 副文单行要 911px（差 42px）。
   副文的默认 78ch 量尺（≈869px）在这些屏一并放到 1000px；其余各屏的标题与副文本来
   就在 920px / 869px 内断得干净（末行 ≥5 字），量尺不动。 */
.cs5-head--wide{max-width:1100px}
.cs5-head--wide .cs5-sub{max-width:1000px}
.cs5-head--c{margin:0 auto;text-align:center}
.cs5-head--c .cs5-sub{margin-left:auto;margin-right:auto}
.cs5-h2{
  font-size:clamp(28px,3.4vw,48px);line-height:1.12;font-weight:600;letter-spacing:-.022em;color:var(--ink);
}
.cs5-sec--dark .cs5-h2{color:#f5f5f7}
/* 深色屏的 h3 必须显式转浅：.cs5-h3 的底色字是 var(--ink)≈#1d1d1f，
   压在 #000 上等于没有标题（市场与信任屏就踩过这一下）。 */
.cs5-sec--dark .cs5-h3{color:#f5f5f7}
.cs5-h3{font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-bottom:22px;line-height:1.35}
.cs5-h3--grp{font-size:18px;margin-top:34px;margin-bottom:18px}
.cs5-sub{font-size:19px;line-height:1.7;color:var(--ink3);margin-top:20px;max-width:78ch}
.cs5-sec--dark .cs5-sub{color:#a1a1a6}
/* 屏头信任状（现只有第 5 屏「市场与信任」在用）。
   2026-09-28 从右栏 h3 的 <small> 里移出来 —— 挂在 h3 后缀上时，字号字重差不足，
   读起来就是一行糊掉的灰字，而且左栏标题没有对应物，两栏标题不对等。
   单独成行后它是「我们是谁」的背书，不再抢「我们怎么答」的标题位。 */
.cs5-cred{font-size:16px;line-height:1.6;color:var(--gray-l);margin-top:14px;letter-spacing:.01em}
/* 深底上的信任状不能沿用 --gray-l(#86868b)：压在 #000 上只有约 3.2:1，
   作为「我们是谁」的背书行太吃力。提到 #a1a1a6 —— 与 .cs5-sec--dark .cs5-sub 同档，
   仍明显弱于正文，不抢标题。 */
.cs5-sec--dark .cs5-cred{color:#a1a1a6}
.cs5-p{font-size:17px;line-height:1.8;color:var(--ink3)}
.cs5-sec--dark .cs5-p{color:#a1a1a6}
.cs5-b{font-weight:600;color:var(--ink)}
.cs5-sec--dark .cs5-b{color:#f5f5f7}
#cs5 .cs5-hl{display:inline;color:var(--gold);font-weight:600}
#cs5 .cs5-h2 .cs5-hl,#cs5 .cs5-h3 .cs5-hl{font-weight:inherit}
/* ⚠️ 金块是 display:inline —— 它的宽度与位置完全由**父级**排版决定。
   父级一旦变成 flex/grid，每个 inline 子节点立刻塌成并排块、当场互相压字
   （同一类事故踩过三次：脚注被拉成三列 / 配对栅格金块压字 / 口径行）。
   所以这里做两层加固：
     ① 把「整行文本」装进 .cs5-anst —— 它在结构上是**单个** inline 上下文，
        父级再怎么写也不会把一行字拆开；
     ② .cs5-hl / .cs5-model-n 显式声明 inline 血缘，堵住站点同名类改写。 */
#cs5 .cs5-anst{display:inline}
#cs5 .cs5-model-n{display:inline}
.cs5-nb{white-space:nowrap}
.cs5-hidden{display:none!important}
.cs5-warn{color:#b06b00;font-weight:600}
.cs5-model-n{font-variant-numeric:tabular-nums}
/* 脚注形态（浅底 / 深底两套）
   ⚠ 别给 .cs5-note 写 display:flex —— 一旦它里面出现 <b> 之类的多个子元素，
   每个子元素都会变成一个 flex 项，脚注当场被拉成并排的窄栏
   （「口径说明。」「该结果未经现场实测验证…」「不适用工况：」横着排三列，
   每列窄到一行只放得下四五个字）。这里要的就是一段话，用块级流。
   图标若要用，走 .cs5-note .cs5-ic 的 float/inline 对齐，不要靠容器 flex。 */
.cs5-note{
  display:block;
  font-size:13px;line-height:1.75;color:var(--gray-l);
  padding:0;margin-top:26px;max-width:100ch;
  text-wrap:pretty;
}
.cs5-note .cs5-ic{
  display:inline-block;vertical-align:-2px;margin-right:6px;
  color:var(--gray-l);
}
/* 脚注拆成多段时（如节能弹层的「口径说明 / 不适用工况」），段间留一行呼吸，
   段内不加 —— 其余三处脚注是纯文本，没有 <p>，不受这条影响。 */
.cs5-note p{margin:0}
.cs5-note p + p{margin-top:9px}
.cs5-sec--dark .cs5-note{color:rgba(255,255,255,.5)}
.cs5-sec--dark .cs5-note .cs5-ic{color:rgba(255,255,255,.5)}

/* 暖金提示条（固定模式） */
.cs5-strip{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;
  background:var(--cream);border-left:3px solid var(--gold);border-radius:var(--r-sm);
  padding:16px 22px;font-size:14px;color:var(--ink2);
}
.cs5-strip--warm{background:#fff9ea}
.cs5-strip .cs5-ic{color:var(--gold-deep);transform:translateY(2.5px)}
.cs5-strip-t{font-weight:700;color:var(--ink)}
.cs5-strip-i b{font-weight:700;color:var(--ink)}
.cs5-strip-i em{font-style:normal;color:var(--gray-l)}
.cs5-strip-sep{color:var(--line-2)}

/* 标签 */
.cs5-tags{display:flex;flex-wrap:wrap;gap:8px}
.cs5-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;line-height:1;color:var(--ink3);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:8px 14px;background:var(--paper);
}
.cs5-sec--dark .cs5-tag{color:#a1a1a6;border-color:var(--line-d)}
.cs5-dot{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;line-height:1;color:var(--ok);
  border:1px solid rgba(36,138,61,.28);background:rgba(36,138,61,.07);
  border-radius:var(--r-pill);padding:8px 14px;
}
.cs5-dot i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}

/* 按钮 */
.cs5-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 28px;border-radius:var(--r-pill);
  font-size:15.5px;font-weight:600;letter-spacing:-.005em;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.cs5-btn:active{transform:scale(.98)}
.cs5-btn--gold{background:var(--gold);color:#1d1d1f}
.cs5-btn--gold:hover{background:var(--gold-2)}
.cs5-btn--line{border:1px solid var(--line-2);color:var(--ink)}
.cs5-btn--line:hover{border-color:var(--ink);background:rgba(0,0,0,.03)}

/* ==========================================================================
   3. 响应式 · 圆点导航（站点通用裸点形态）
   ========================================================================== */
/* 圆点导航 = 线上 .hwi-dots 的同构实现。形态约束（构建自检有守门）：
     · 无容器：没有背景 / 边框 / 圆角 / 阴影 / 模糊 / 内边距，就是几个点
     · 每点 14px 盒，内部 i 用 inset:2px 的实心圆 —— 视觉点径 10px
     · 点间距 gap:12px，整条导航垂直居中、贴右侧固定
     · 未选中 #d5d5d5 → hover #b8b8b8 + scale(1.15)
     · 当前屏 --gold + scale(1.25) + 双层金晕（5px 淡圈 + 10px 光晕）
     · 标签是气泡：从点的左侧 24px 弹出，深底 rgba(20,20,20,.88) / 浅字 #f2efe6
   两处本地适配 —— 站点是「整页深色 + 内容满幅」，本页是「三色分屏 + 内容居中」：
     · 点色：站点恒用 #d5d5d5（深底）；本页浅底屏必须把未选中的点转深
     · 右距：站点 110px；本页 106px。本页内容盒右边缘最近只到「距视口右 120px」，
       106 + 14 = 120 正好贴在它外侧，一点不压正文。
   ========================================================================== */
.cs5-dots{
  position:fixed;right:106px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:12px;
}
.cs5-dots a{position:relative;display:block;width:14px;height:14px;cursor:pointer}
.cs5-dots a i{
  position:absolute;inset:2px;border-radius:50%;display:block;
  background:rgba(29,29,31,.34);
  transition:background-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* 标签改为绝对定位气泡 —— 它不再参与布局，容器宽度恒为 14px */
.cs5-dots a span{
  position:absolute;right:24px;top:50%;transform:translateY(-50%) translateX(8px);
  font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;
  background:rgba(20,20,20,.88);color:#f2efe6;padding:5px 11px;border-radius:6px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.cs5-dots a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}
.cs5-dots a:hover i{background:rgba(29,29,31,.52);transform:scale(1.15)}
/* 深色屏：未选中的点换成站点原色（深点压在 #000 上等于看不见）。
   注意这条必须写在「当前屏金色」之前 —— 两条选择的特异性都是 (0,3,1)，
   同分时后写的赢，放后面会把深色屏上的金色当前点盖成灰点。 */
.cs5-dots.cs5-dots--dark a i{background:#d5d5d5}
/* 排除 .cs5-on：否则深色屏上悬停当前屏的点，金点会被这条 (0,4,1) 的规则压成灰的。 */
.cs5-dots.cs5-dots--dark a:not(.cs5-on):hover i{background:#b8b8b8}
/* 当前屏：金色 + 双层金晕。放在最后，保证在任何屏底色下都是金色。 */
.cs5-dots a.cs5-on i{
  background:var(--gold);transform:scale(1.25);
  box-shadow:0 0 0 5px rgba(240,177,0,.2),0 0 10px 2px rgba(240,177,0,.4);
}

/* ==========================================================================
   4. 首屏（固定模式：设备图全屏打底，徽章 / H1 / 副文 / 按钮 / 指标行全部叠加图上）
   ========================================================================== */
.cs5-hero{
  position:relative;overflow:hidden;background:#000;color:#f5f5f7;
  min-height:max(640px,86vh);
  display:flex;flex-direction:column;justify-content:center;
  padding:140px 0 120px;
}
.cs5-hero-bg{position:absolute;inset:0;z-index:1}
.cs5-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.cs5-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.9) 100%),
    radial-gradient(120% 82% at 20% 42%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.24) 58%,rgba(0,0,0,0) 100%);
}
.cs5-hero-in{position:relative;z-index:2;width:100%}
.cs5-hero-copy{max-width:1000px}
.cs5-hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.74);margin-bottom:26px;
}
.cs5-hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.cs5-h1{
  font-size:clamp(34px,5.4vw,68px);line-height:1.08;font-weight:600;
  letter-spacing:-.03em;color:#fff;max-width:22ch;
  /* 别写 max-width:15ch —— ch 是「0」的字宽，中文下按拉丁数字宽算，
     68px 字号时 15ch ≈ 629px，24 字标题被硬挤成 4 行，末行只剩「得通」。
     22ch ≈ 923px，恰好收在中文的一个舒服断点：主句一行、金句一行，共 2 行。 */
}
.cs5-h1 em{font-style:normal;display:block;color:rgba(255,255,255,.9);margin-top:6px}
.cs5-h1-mark{
  background:linear-gradient(92deg,var(--gold) 0%,#ffd977 52%,var(--gold-2) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-weight:600;
}
.cs5-hero-sub{
  margin-top:28px;max-width:44ch;
  font-size:clamp(16px,1.35vw,19px);line-height:1.78;color:rgba(255,255,255,.78);
}
.cs5-hero-sub b{color:#fff;font-weight:600;white-space:nowrap}
.cs5-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.cs5-hero-btns .cs5-btn--line{border-color:rgba(255,255,255,.34);color:#fff}
.cs5-hero-btns .cs5-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.cs5-metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;
  margin-top:54px;padding-top:30px;border-top:1px solid rgba(255,255,255,.18);
  width:100%;
}
.cs5-metric{display:flex;flex-direction:column;gap:8px;min-width:0}
.cs5-metric-h{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.55);
}
.cs5-metric-h .cs5-ic{width:16px;height:16px;color:rgba(255,255,255,.55)}
.cs5-metric-v{
  font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:clamp(24px,2.2vw,32px);font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1.1;
  white-space:nowrap;
}
.cs5-metric-v small{font-size:.5em;font-weight:500;color:rgba(255,255,255,.6)}
.cs5-metric-v--gold{color:var(--gold)}
.cs5-metric-v--gold small{color:rgba(240,177,0,.72)}
.cs5-metric-c{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.5)}
.cs5-hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  color:rgba(255,255,255,.5);animation:cs5-bob 2.4s var(--ease) infinite;
}
@keyframes cs5-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
@media (prefers-reduced-motion:reduce){.cs5-hero-scroll{animation:none}}

/* ==========================================================================
   5. 选型三步
   ========================================================================== */
.cs5-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
.cs5-pick-step{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;
}
.cs5-pick-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--gold-soft);color:var(--gold-deep);
  font-family:var(--num);font-size:14px;font-weight:700;margin-bottom:18px;
}
.cs5-pick-step h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:20px}
.cs5-pick-opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto}
.cs5-pick-o{
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:10px 17px;font-size:13.5px;font-weight:600;color:var(--ink2);
  background:var(--paper);transition:all .26s var(--ease);
}
.cs5-pick-o:hover{border-color:var(--gold);color:var(--gold-deep)}
.cs5-pick-o.cs5-on{background:var(--gold);border-color:var(--gold);color:#1d1d1f}
.cs5-pick-out{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin-top:26px;padding:26px 30px;border-radius:var(--r-lg);
  background:var(--dark);color:#f5f5f7;
}
.cs5-pick-res{min-width:0;flex:1 1 auto}
.cs5-pick-k{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
}
.cs5-pick-v{
  display:block;margin-top:10px;
  font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:-.02em;color:var(--gold);
}
.cs5-pick-c{display:block;margin-top:10px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.66)}
.cs5-pick-act{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.cs5-pick-out .cs5-btn--line{border-color:rgba(255,255,255,.34);color:#fff}
.cs5-pick-out .cs5-btn--line:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.cs5-pick-out:not(.cs5-done) .cs5-pick-act{display:none}

/* ==========================================================================
   6. 主张屏（v3 合并屏 · 四句主张并排 + 详情弹层）
   合并了原来的四屏：精度口径 / 合规窗口 / 协议联测 / 节能测算。
   弹层里放的是原来那四屏的完整内容 —— 互动控件与表格一字未改。
   ========================================================================== */
.cs5-claims{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  /* grid-auto-rows:1fr：四张卡两行等高。
     没有这一行时行高各算各的 —— 第一行标题折成两行、第二行只有一行，
     两行就差 34px，2×2 看上去像被谁啃掉一块。卡内 .cs5-more 的
     margin-top:auto 只能拉平同一行内的两张，跨行得靠这条。 */
  grid-auto-rows:1fr;
  gap:clamp(14px,1.6vw,22px);margin-top:56px;
}
.cs5-claim{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,2.6vw,38px);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.cs5-claim::before{
  content:"";position:absolute;left:0;top:clamp(24px,2.6vw,38px);width:3px;height:0;
  border-radius:0 3px 3px 0;background:var(--gold);
  transition:height .5s var(--ease);
}
.cs5-claim:hover{border-color:var(--line-2);box-shadow:0 18px 44px -22px rgba(0,0,0,.22);transform:translateY(-2px)}
.cs5-claim:hover::before{height:44px}
.cs5-claim-n{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray-l);margin-bottom:clamp(14px,1.5vw,20px);
}
.cs5-claim h3{
  margin:0;font-size:clamp(19px,2vw,26px);font-weight:600;
  letter-spacing:-.018em;line-height:1.3;text-wrap:pretty;
}
.cs5-claim h3 .cs5-hl{color:var(--gold);font-weight:600}
.cs5-claim p{
  margin:14px 0 0;font-size:14.5px;line-height:1.74;color:var(--ink3);text-wrap:pretty;
}
/* 一条硬数据 —— 让「有话说」变成「有数」。
   四卡数值区等高（min-height），底部按钮才落在同一条基线上。 */
.cs5-kv{
  display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;
  margin:clamp(20px,2.2vw,30px) 0 0;padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);
  min-height:60px;
}
.cs5-kv b{
  font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:clamp(26px,2.8vw,36px);font-weight:700;letter-spacing:-.032em;
  line-height:1;color:var(--ink);white-space:nowrap;
  width:auto;  /* 防站点裸 b{width:100%}：.cs5-kv 是 flex 容器，b 会被撑满整行 */
}
.cs5-kv b em{font-style:normal;font-size:.52em;font-weight:600;letter-spacing:-.012em;margin-left:3px;color:var(--ink3)}
.cs5-kv span{font-size:12.5px;color:var(--gray-l);line-height:1.62;flex:1 1 auto;min-width:0}
.cs5-kv--gold b{color:var(--gold)}
.cs5-kv--gold b em{color:var(--gold-deep);opacity:.75}

/* 详情按钮 —— 锚到卡底（margin-top:auto），同排两卡的按钮才落在同一条基线上 */
.cs5-more{
  align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  margin-top:auto;padding:clamp(18px,2vw,24px) 0 0;
  border:0;background:transparent;color:var(--ink);
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  transition:color .28s var(--ease);
}
.cs5-more i{
  font-style:normal;border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:border-color .28s var(--ease);
}
.cs5-more .cs5-ic{
  width:15px;height:15px;color:var(--gray-l);
  transition:transform .34s var(--ease),color .28s var(--ease);
}
.cs5-more:hover{color:var(--gold-deep)}
.cs5-more:hover i{border-color:var(--gold)}
.cs5-more:hover .cs5-ic{color:var(--gold);transform:translateX(3px)}

/* 主张屏底部三条要点 */
.cs5-strips{
  margin-top:clamp(26px,3vw,44px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
}
.cs5-strips-i{
  display:flex;align-items:center;gap:11px;padding:19px clamp(16px,1.8vw,26px);
  font-size:13.5px;color:var(--ink2);line-height:1.5;
}
.cs5-strips-i + .cs5-strips-i{border-left:1px solid var(--line)}
.cs5-strips-i .cs5-ic{width:7px;height:7px;color:var(--gold);stroke-width:0;fill:currentColor}

/* ==========================================================================
   7. 弹层（四主张的详情）
   形态沿用留资弹层那套：遮罩 + 居中盒 + 头/体/脚。
   注意 .cs5-dlg[hidden]{display:none} 必须写死 —— 下面的 display:flex
   会把 HTML 的 hidden 属性盖掉（属性选择器 [hidden] 的特异性只有 (0,1,0)）。
   ========================================================================== */
.cs5-dlg{
  position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,48px);
}
.cs5-dlg[hidden]{display:none}
.cs5-dlg-bd{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:cs5-bdin .3s ease both;
}
@keyframes cs5-bdin{from{opacity:0}to{opacity:1}}
.cs5-dlg-box{
  position:relative;width:100%;max-width:940px;max-height:min(86vh,900px);
  display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  animation:cs5-boxin .42s var(--ease) both;overflow:hidden;
}
@keyframes cs5-boxin{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.cs5-dlg-hd{
  display:flex;align-items:flex-start;gap:18px;flex:none;
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px);
  border-bottom:1px solid var(--line);
}
.cs5-dlg-hd h3{margin:0;font-size:clamp(18px,1.8vw,23px);font-weight:700;letter-spacing:-.02em;line-height:1.3;text-wrap:pretty}
.cs5-dlg-hd h3 .cs5-hl{color:var(--gold)}
.cs5-dlg-hd p{margin:8px 0 0;font-size:14px;color:var(--ink3);line-height:1.65;text-wrap:pretty}
.cs5-dlg-x{
  flex:none;margin-left:auto;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink2);
  display:grid;place-items:center;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.cs5-dlg-x:hover{background:var(--cream);border-color:var(--ink3);color:var(--ink)}
.cs5-dlg-x .cs5-ic{width:15px;height:15px}
.cs5-dlg-body{padding:clamp(20px,2.4vw,34px);overflow-y:auto;overscroll-behavior:contain}
.cs5-dlg-body h4{margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:-.005em}
.cs5-dlg-body > h4 + *{margin-top:0}
.cs5-grp{margin-top:30px}

/* 说明表（弹层里的对照表） */
.cs5-dt{width:100%;border-collapse:collapse;font-size:14px}
.cs5-dt th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray-l);padding:0 14px 11px;border-bottom:1px solid var(--line-2);
}
.cs5-dt td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.62;text-wrap:pretty;overflow-wrap:break-word}
.cs5-dt tr:last-child td{border-bottom:0}
.cs5-dt .cs5-k{font-weight:600;color:var(--ink2);width:104px;white-space:nowrap}
.cs5-dt .cs5-a{color:var(--ink3)}
.cs5-dt .cs5-b2{color:var(--ink2)}
.cs5-dt code{
  font-family:var(--mono);font-size:12.5px;
  background:var(--cream);padding:2px 7px;border-radius:5px;color:var(--ink2);
}
.cs5-dt .cs5-hl{font-weight:600}
.cs5-dt .cs5-sub2{color:var(--gray-l);font-weight:400;font-size:12.5px}

/* 弹层里的提示块 */
.cs5-callout{
  margin-top:22px;padding:18px 20px;border-radius:var(--r-sm);
  border:1px solid var(--gold-line);background:rgba(240,177,0,.07);
  font-size:13.5px;line-height:1.74;color:var(--ink2);text-wrap:pretty;
}
.cs5-callout b{color:var(--gold-deep)}
.cs5-callout ol{margin:8px 0 0;padding-left:20px;list-style:decimal}
.cs5-callout li{margin:3px 0}

/* 弹层里的精度换算演示 */
.cs5-demo{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,34px);align-items:start;
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r);background:var(--cream);
}
.cs5-demo-k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gray-l)}
.cs5-demo-rdg{
  font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:clamp(34px,4.2vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1;margin:10px 0 6px;
}
.cs5-demo-rdg em{font-style:normal;font-size:.4em;font-weight:600;color:var(--ink3);margin-left:3px}
.cs5-demo-sub{font-size:12.5px;color:var(--gray-l)}
.cs5-demo-rows{margin-top:0}
.cs5-demo-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.cs5-demo-row:last-child{border-bottom:0}
.cs5-demo-row span{color:var(--ink3)}
.cs5-demo-row b{font-family:var(--num);font-weight:600;color:var(--ink2);white-space:nowrap;width:auto}
.cs5-demo-row--key b{color:var(--gold-deep);font-size:15px}

/* 弹层里的节能测算 */
.cs5-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,2.4vw,34px);align-items:start}
.cs5-ctl + .cs5-ctl{margin-top:16px}
.cs5-ctl label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink2);font-weight:500}
.cs5-ctl label b{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.01em;width:auto}  /* 站点裸 b{width:100%}：label 是 flex 容器，不重置会挤掉左端标签文字 */
.cs5-ctl label b em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--gray-l);margin-left:2px}
.cs5-slider{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;margin:14px 0 0;
  background:var(--line-2);border-radius:2px;outline:none;
}
.cs5-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-2);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;
}
.cs5-slider::-moz-range-thumb{
  width:19px;height:19px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line-2);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;
}
.cs5-calc-out{
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r);
  background:var(--dark);color:#fff;
}
.cs5-calc-k{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cs5-calc-big{
  margin:12px 0 0;font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--gold);
}
.cs5-calc-big em{font-style:normal;font-size:.34em;font-weight:600;color:rgba(255,255,255,.62);margin:0 6px}
.cs5-calc-two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line-d)}
.cs5-calc-two div > span{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:7px}
.cs5-calc-two div > b{font-size:15px;font-weight:600;color:#fff}

/* 弹层里的规格卡（协议屏平移过来） */
.cs5-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;grid-auto-rows:1fr}
.cs5-spec > div{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:18px 20px;
}
.cs5-spec dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-l);margin-bottom:7px}
.cs5-spec dd{font-size:15px;font-weight:600;color:var(--ink);line-height:1.5;overflow-wrap:break-word}
.cs5-spec dd em{font-style:normal;font-size:13px;font-weight:400;color:var(--gray-l)}

/* 弹层里的寄存器表（深色终端卡） */
.cs5-console{
  border-radius:var(--r-lg);overflow:hidden;background:var(--dark2);border:1px solid var(--line-d);
  box-shadow:var(--shadow);
}
.cs5-console-bar{
  display:flex;align-items:center;gap:10px;padding:14px 20px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--line-d);
}
.cs5-console-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2);flex:none}
.cs5-console-bar b{margin-left:6px;font-family:var(--mono);font-size:12px;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:.04em;width:auto}
.cs5-console-body{padding:8px 0}
.cs5-reg{
  display:grid;grid-template-columns:74px 152px minmax(0,1fr) 74px;gap:14px;align-items:center;
  padding:11px 22px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cs5-reg:last-child{border-bottom:0}
.cs5-reg code{color:var(--gold);font-weight:700}
.cs5-reg span{overflow-wrap:anywhere;font-weight:600}
.cs5-reg em{font-style:normal;color:rgba(255,255,255,.5);font-size:12px}
.cs5-reg b{
  text-align:right;color:#f5f5f7;font-weight:600;
  /* ⚠️ 站点裸 `b{width:100%}` 会把它撑满 grid 轨道（同 .cs5-wt b 的成因）。
     本表四列 `74px 152px minmax(0,1fr) 74px`，末列固定 74px，写 width:auto 即可回正。 */
  width:auto;justify-self:end;
}
.cs5-reg--head{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.03);
}
.cs5-reg--head b{color:rgba(255,255,255,.4);font-weight:600}

/* ==========================================================================
   8. 型号矩阵（槽位 —— 卡片由站点统一组件 .pc-* 承担）
   ========================================================================== */
.cs5-slot{margin-top:26px;margin-bottom:8px}
.cs5-slot > .prod-cards{margin:0}
.cs5-slot > .cs5-empty{margin:0 var(--gutter)}
.cs5-empty{
  padding:40px 24px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--paper);
  font-size:14.5px;color:var(--ink3);text-align:center;line-height:1.7;
}
/* 交期条（P1-2：交期从副文句尾提级成独立提示条，与暖金条同一视觉层级） */
.cs5-strip--lead{margin-top:22px}
.cs5-strip--lead .cs5-strip-t{display:inline-flex;align-items:center;gap:8px}
.cs5-strip--lead .cs5-ic{color:var(--gold-deep)}

/* ==========================================================================
   9. 适用场景
   ========================================================================== */
.cs5-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:52px}
.cs5-app{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;
}
.cs5-app--wide{grid-column:span 2}
.cs5-app-ic{
  width:46px;height:46px;border-radius:13px;flex:none;
  display:grid;place-items:center;background:var(--gold-soft);color:var(--gold-deep);
  margin-bottom:22px;
}
.cs5-app-ic--narrow{background:var(--cream);color:var(--ink3)}
.cs5-app h4{font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.cs5-app p{font-size:14.5px;line-height:1.78;color:var(--ink3)}
.cs5-app .cs5-tags{margin-top:auto;padding-top:14px}

/* ==========================================================================
   10. 市场与信任（配对栅格：一行一对，左权重条 / 右我方口径）
   ========================================================================== */
/* ⚠️ 配对栅格：列线一律写**显式数字**，不许写 `1 / -1`。
   事故（2026-09-28 深夜）：横跨规则原写 `grid-column:1 / -1`。
   `-1` 是**隐式**列线，只在栅格实际存在 2 条线时才指向第 2 条；
   一旦右列因任何原因塌缩，`-1` 就退化成第 1 条线 → 横跨元素只占左列 →
   其后的 cs5-wt / cs5-ans 被顺推到错列，**左右两格叠在同一位置**
   （表现：权重条的 `24 %` `21 %` 等百分比压在右格文案上）。
   写死 `1 / 3` 后，跨列语义与列数解耦，列数异常也不会串位。
   同时给两列 `min-width:0`，防长内容把列顶塌。 */
.cs5-pairs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;align-items:stretch;margin-top:60px;
}
.cs5-pairs > *{min-width:0}
.cs5-pairs .cs5-h3 small{display:block;margin-top:10px;font-size:13.5px;font-weight:400;letter-spacing:0;line-height:1.7;color:rgba(255,255,255,.5)}
.cs5-pairs .cs5-wt{padding:12px 0;border-bottom:1px solid var(--line-d);display:flex;align-items:center;gap:16px}
.cs5-pairs .cs5-wt span{font-size:14.5px;font-weight:600;color:#f5f5f7;flex:none;width:132px}
.cs5-pairs .cs5-wt--key span{color:var(--gold)}
.cs5-bar{flex:1 1 auto;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;min-width:0}
.cs5-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform-origin:left center}
/* ⚠️ 这里必须**显式写死 width**（2026-09-29 线上事故，第三次踩 flex + 站点裸选择器）：
   站点全局样式表给了裸标签规则 `b{width:100%}`（来自 style.css，另有 xwr_style.css
   在 ≤640px 的 `b,strong{width:100%}`）。`<b>` 在 flex 容器里 `flex-basis:auto`
   **取的就是 width** —— 于是站点那条把本页的 `flex:none;min-width:44px` 全部架空：
   `<b>` 撑满整列 632px，剩余可分配空间归零 → `.cs5-bar` 被压成 **width:0（进度条消失）**，
   `<b>` 右界越出左列 164px → **百分比压到右列口径文案上（看着像字重叠）**。
   本页规则特异性 (0,3,1) 高于站点裸 `b` (0,0,1)，**只要把 width 也写出来就能赢**。
   教训：本站站点样式表有裸 `b{width:100%}`，本页任何 `<b>` 处在 flex/grid 容器内时，
   **只写 flex/min-width 不够，必须显式声明 width**（构建自检 5.4d 守门）。 */
.cs5-pairs .cs5-wt b{
  flex:none;font-family:var(--num);font-variant-numeric:tabular-nums;
  font-size:15px;font-weight:700;color:var(--gold);text-align:right;
  width:44px;min-width:44px;max-width:44px;
}
/* ⚠️ 这一条**绝不能**写 display:flex（2026-09-28 线上事故，踩过两次）：
   最初为「让视觉隐藏的 .cs5-ans-k 参与对齐」写了 flex，但 flex 容器会把**每个子节点**
   变成 flex item —— 包括纯文本节点（变成匿名 flex item）。于是
   「金块 .cs5-hl」与「，满量程口径写明…」成了并排的两个 item，
   **金色高亮块与后续文字直接叠在一起**（线上实测重叠，见 trust 屏六条口径）。
   本地预览之所以没暴露：窄档有 `@media {display:block}` 兜底，而那正是本地常走的档位 ——
   典型的「本地越绿越危险」。`.cs5-ans-k` 本就是 position:absolute + clip 的视觉隐藏元素
   （见下一条），**不需要** flex 为它留位。
   写法上用**双选择器 + !important**：只要有一个 .cs5-ans 在 flex/grid 里，这条就兜住它，
   不给站点同名类、也不给后续自己的 @media 留任何改写空间。 */
p.cs5-ans,
.cs5-pairs .cs5-ans{
  display:block!important;
  padding:12px 0;border-bottom:1px solid var(--line-d);
  font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.8);
}
/* 视觉隐藏：只给读屏，不占位。⚠️ 这里若改成 flex/grid 容器就会重现上面的重叠 */
.cs5-ans-k{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* 脚注横跨两列。⚠️ 写 `1 / 3` 不写 `1 / -1` —— 理由见上面 .cs5-pairs 的注释。 */
.cs5-pairs > .cs5-pairs-src,.cs5-pairs > .cs5-note{grid-column:1 / 3}
.cs5-pairs > .cs5-pairs-src{margin-top:26px;font-size:13px}

/* ==========================================================================
   11. 服务与交付
   ========================================================================== */
.cs5-svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:52px}
.cs5-svc-c{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;
}
.cs5-svc-c h4{
  display:flex;align-items:center;gap:10px;
  font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:14px;
}
.cs5-svc-c h4 .cs5-ic{width:18px;height:18px;color:var(--gold-deep)}
.cs5-svc-c > p{font-size:14px;line-height:1.75;color:var(--ink3);margin-bottom:18px}
.cs5-svc-c ul{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.cs5-svc-c li{
  position:relative;padding-left:18px;font-size:13.5px;line-height:1.65;color:var(--ink2);
}
.cs5-svc-c li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--gold);
}

.cs5-dlv{margin-top:56px;border-top:1px solid var(--line);padding-top:40px}
.cs5-dlv-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;margin-bottom:30px}
.cs5-dlv-h h3{font-size:19px;font-weight:600;letter-spacing:-.012em;margin:0}
.cs5-dlv-c{font-size:13px;color:var(--gray-l)}
.cs5-dlv-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.cs5-dlv-list li{position:relative;padding:0 26px 0 0}
.cs5-dlv-list li::after{
  content:"";position:absolute;left:0;right:26px;top:5px;height:1px;background:var(--line-2);
}
.cs5-dlv-list li::before{
  content:"";position:absolute;left:0;top:1px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);z-index:2;
}
.cs5-dlv-d{display:block;padding-top:26px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--gray-l)}
/* ⚠️ width:auto 不可省 —— 站点裸 b{width:100%}。虽然本条 display:block 后 width 影响有限，
   但父 .cs5-dlv-list 是 grid（四列），不重置会在窄档撑宽轨道。 */
.cs5-dlv-list b{display:block;margin-top:9px;font-size:15.5px;font-weight:600;color:var(--ink);width:auto}
.cs5-dlv-list em{display:block;margin-top:7px;font-style:normal;font-size:13px;line-height:1.65;color:var(--ink3)}
.cs5-dlv-note{margin-top:30px;font-size:13.5px;line-height:1.75;color:var(--gray-l)}
.cs5-dlv-note b{color:var(--ink2)}

/* 服务保障区（.cs5-reach / .cs5-reach-i）已于 2026-09-28 整块删除，相关 CSS 一并清掉。
   Alice 的判断：这一组的四条都属于「怎么写好看」而非客户真正要看的东西 ——
   ① 服务组织地点（原「4 个区域服务中心 · 华南/华东/西南/华北」→「深圳总部」）
      实际项目里不一定从总部派人，写死地点等于给自己上枷锁；
   ② 48h 响应 / 3 年记录留存 / 全周期备件 —— 这三条在页面别处已有且更贴语境：
      48h 在留资区（「选型工程师 48 小时内回复」）、3 年在合规弹层
      （「校准原始记录可追溯保存不少于 3 年」）、备件在「四件事」卡与第 5 屏口径里。
      → 留在这里只是重复，删掉是减负而非缺信息。
   ⚠ 若要恢复这一区，先确认「服务是谁做、在哪做、承诺多久」这三件事的真实口径，
      不要靠文案层圆回来。构建自检有守门：服务保障区不得再出现。 */

/* ==========================================================================
   12. 常见问题
   ========================================================================== */
.cs5-faq{margin-top:44px;border-top:1px solid var(--line)}
.cs5-faq-i{border-bottom:1px solid var(--line)}
.cs5-faq-q{
  display:flex;align-items:center;gap:20px;width:100%;text-align:left;
  padding:26px 4px;font-size:18px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
  transition:color .26s var(--ease);
}
.cs5-faq-q:hover{color:var(--gold-deep)}
.cs5-faq-q span{flex:1 1 auto;min-width:0}
.cs5-faq-q i{position:relative;flex:none;width:18px;height:18px}
.cs5-faq-q i::before,.cs5-faq-q i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink3);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.cs5-faq-q i::before{width:14px;height:1.5px}
.cs5-faq-q i::after{width:1.5px;height:14px}
.cs5-faq-q[aria-expanded="true"] i::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.cs5-faq-a{padding:0 4px 26px;max-width:110ch}
.cs5-faq-a p{font-size:15px;line-height:1.85;color:var(--ink3)}
.cs5-faq-a p + p{margin-top:12px}
.cs5-faq-a b{color:var(--ink2)}

/* ==========================================================================
   13. CTA（固定模式：白底 + 1px 描边 + radius 20 + 居中横幅）
   ========================================================================== */
.cs5-cta{
  padding:60px 48px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--paper);text-align:center;
}
.cs5-cta h2{
  font-size:clamp(26px,3vw,42px);font-weight:600;letter-spacing:-.022em;line-height:1.16;
}
.cs5-cta h2 span{color:var(--gold)}
/* CTA 副文量尺：原 70ch —— 中文下 ch 是「0」的拉丁字宽，完全失效（≈700px），
   47 字副文被挤成两行，且断在加粗词组「48 小时内回复」中间（截图可见「…内回 / 复机型建议」）。
   改用 px 并放宽到 860px：一行放得下，加粗词不会被切开。
   这也是全页「标题/正文禁止用 ch 量尺」那条纪律的又一例（见 MEMORY.md 中文断行节）。 */
.cs5-cta p{margin:20px auto 0;max-width:860px;font-size:16.5px;line-height:1.8;color:var(--ink3)}
.cs5-cta p b{color:var(--ink2)}
.cs5-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
/* CTA 下方原有一行小字留资入口（.cs5-cta-alt「或提交工况需求…」），
   2026-09-28 Alice 要求删除，相关 CSS 一并清掉。
   ⚠ 副作用已知：桌面端（>768px）此后没有任何 data-lead-open 触发点，
      站内留资弹层（#cs5LeadModal）在桌面端打不开了 —— 只剩「咨询选型与报价」
      外链 /Contact 与「资料下载」外链 /Download 两个出口；移动端底栏 .cs5-mbar 仍在。
      Alice 明确选择「只删这行，其余不动」，弹层与表单保留。
      要恢复桌面端留资，就把第一个按钮从外链改成开弹层，别再加回这行小字。 */

/* ==========================================================================
   14. 留资弹层 / 移动底栏 / toast（运行时由 JS 注入）
   ========================================================================== */
.cs5-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
/* 状态类统一用 .cs5-on —— 和 .cs5-toast.cs5-on / .cs5-pick-o.cs5-on 同一套约定；
   JS 里 add/remove 的就是 cs5-on。曾经这里写成 .cs5-open，脚本照旧加 cs5-on，
   两条状态类对不上，弹层内部状态变成「已打开」但 CSS 永远 display:none ——
   表单一个字段都看不见，且页面不报任何错。别改回 cs5-open。 */
.cs5-modal.cs5-on{display:flex}
.cs5-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.cs5-modal-box{
  position:relative;width:min(720px,100%);max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;background:var(--paper);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  animation:cs5-boxin .4s var(--ease) both;
}
.cs5-modal-hd{display:flex;align-items:flex-start;gap:18px;flex:none;padding:26px 30px 20px;border-bottom:1px solid var(--line)}
.cs5-modal-hd h3{font-size:20px;font-weight:700;letter-spacing:-.018em}
.cs5-modal-hd p{margin-top:8px;font-size:13.5px;line-height:1.65;color:var(--ink3)}
.cs5-modal-x{
  flex:none;margin-left:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink2);
  display:grid;place-items:center;
}
.cs5-modal-x:hover{background:var(--cream);color:var(--ink)}
.cs5-modal-scroll{flex:1 1 auto;overflow-y:auto;padding:0 30px;overscroll-behavior:contain}
.cs5-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:26px 0}
.cs5-field{display:flex;flex-direction:column;gap:9px;min-width:0}
.cs5-field--full{grid-column:1 / -1}
.cs5-field label{font-size:13.5px;font-weight:600;color:var(--ink2)}
.cs5-req{color:#c0392b}
.cs5-field input,.cs5-field select,.cs5-field textarea{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;font-size:14.5px;font-family:inherit;color:var(--ink);
  background:var(--paper);transition:border-color .24s var(--ease);
}
.cs5-field textarea{min-height:84px;resize:vertical;line-height:1.65}
.cs5-field input:focus,.cs5-field select:focus,.cs5-field textarea:focus{outline:none;border-color:var(--gold)}
.cs5-err{font-size:12.5px;color:#c0392b;min-height:0}
.cs5-err:empty{display:none}
.cs5-promise{
  display:flex;flex-wrap:wrap;gap:10px 22px;padding:18px 0 26px;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink3);
}
.cs5-promise b{color:var(--gold);width:auto}  /* 站点裸 b{width:100%}：.cs5-promise 是 flex 容器 */
.cs5-modal-ft{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 30px;border-top:1px solid var(--line);background:var(--cream);
}
.cs5-modal-ft p{font-size:12.5px;color:var(--gray-l);max-width:52ch;line-height:1.6}

.cs5-mbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:var(--cs5-sf,0px);
}
.cs5-mbar-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cs5-mbar-in a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:11px 4px;font-size:12px;font-weight:600;color:var(--ink3);cursor:pointer;
}
.cs5-mbar-in a .cs5-ic{width:19px;height:19px}
.cs5-mbar-in a.cs5-pri{color:var(--gold-deep)}
.cs5-toast{
  position:fixed;left:50%;bottom:calc(34px + var(--cs5-sf,0px));transform:translateX(-50%) translateY(14px);
  z-index:1100;max-width:min(560px,calc(100vw - 32px));
  background:rgba(20,20,20,.93);color:#f5f5f7;
  padding:13px 22px;border-radius:var(--r-pill);
  font-size:13.5px;line-height:1.6;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.cs5-toast.cs5-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ==========================================================================
   15. 入场显现
   写成「有脚本才隐藏」（根节点带 cs5-js 才生效）—— 脚本被拦时正文原样完整显示。
   ========================================================================== */
.cs5.cs5-js .cs5-rv{opacity:0;transform:translateY(18px)}
.cs5.cs5-js .cs5-rv.cs5-in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .cs5.cs5-js .cs5-rv{opacity:1;transform:none}
}

/* ==========================================================================
   16. 断行兜底
   ========================================================================== */
#cs5 .cs5-sub,#cs5 .cs5-p,#cs5 .cs5-app p,#cs5 .cs5-faq-a,
#cs5 .cs5-note,#cs5 .cs5-dlg-hd p,#cs5 .cs5-callout{text-wrap:pretty}

/* ==========================================================================
   17. 打印
   ========================================================================== */
@media print{
  .cs5-dots,.cs5-hero-scroll,.cs5-mbar,.cs5-toast,.cs5-modal,.cs5-dlg{display:none!important}
  .cs5.cs5-js .cs5-rv{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   18. 响应式
   ========================================================================== */
@media (max-width:1440px){
  .cs5{--gutter:96px}
  /* 圆点导航在这里收起。它要完全落在内容盒之外，需 right ≤ --gutter - 14，
     而 >1440px 时 --gutter 是 120px（106 的右距才成立）；≤1440px 起
     --gutter 掉到 96 / 64 / 32px，留给一条固定导航的边距带只剩 82 / 50 / 18px，
     点会一路贴到屏幕边上，故整条收起。 */
  .cs5-dots{display:none}
}
@media (max-width:1280px){
  .cs5{--gutter:64px}
  .cs5-hero-in{gap:40px}
  .cs5-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs5-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs5-app--wide{grid-column:span 2}
}
@media (max-width:1100px){
  .cs5{--gutter:32px}
  .cs5-sec{padding:84px 0}
  /* 首屏仍是全屏底图叠加：窄屏不再追求 86vh，高度由内容决定 */
  .cs5-hero{min-height:0;padding:88px 0 72px}
  .cs5-hero-bg img{object-position:50% 60%}
  .cs5-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
  .cs5-claims{grid-template-columns:minmax(0,1fr)}
  .cs5-strips{grid-template-columns:minmax(0,1fr)}
  .cs5-strips-i + .cs5-strips-i{border-left:0;border-top:1px solid var(--line)}
  .cs5-pick{grid-template-columns:1fr;gap:16px}
  .cs5-dlv-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .cs5-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs5-app--wide{grid-column:span 2}
  /* 配对栅格退回单列：一行一对变成「权重条 → 口径」上下相邻，
     靠对齐认项不再成立，右格行首的项名必须显形，否则读不出这条在答哪一项。 */
  .cs5-pairs{grid-template-columns:1fr}
  /* 单列后列数从 2 → 1，显式的 `1 / 3` 会越界 → 这里必须跟着收回 `1 / -1`。
     单列时 `-1` 恒等于第 1 条线，反而安全（没有第二列可串）。
     判据：**凡在宽档写显式列线的地方，窄档一定要重新声明**，否则跨列元素会溢出。 */
  .cs5-pairs > .cs5-pairs-src,
  .cs5-pairs > .cs5-note{grid-column:1 / -1}
  .cs5-pairs .cs5-h3 + .cs5-h3{margin-top:34px}
  /* 注：此处的 `.cs5-pairs .cs5-ans{display:block}` 已删除 ——
     主规则本身已带 `display:block!important`，再留一条窄档兜底只会掩盖问题
     （2026-09-28 事故就是因为「本地常走窄档、正好被这条兜住」而漏过线上宽屏）。 */
  .cs5-ans-k{
    position:static;width:auto;height:auto;margin:0 .45em 0 0;overflow:visible;
    clip:auto;white-space:normal;border:0;
    font-weight:700;color:#f5f5f7;
  }
  .cs5-cta{padding:48px 32px}
}
@media (max-width:991px){
  .cs5{--gutter:24px}
}
@media (max-width:768px){
  .cs5-sec{padding:64px 0}
  .cs5-sec--tight{padding:44px 0}
  /* 小屏 H1 必须随视口缩：390 下若仍 36px，「精度写得清，协议测得通」
     一行放不下，整段变 4 行。7.6vw 在 390 处约 29.6px，两行干净放下。 */
  .cs5-h1{font-size:clamp(28px,7.6vw,40px)}
  .cs5-hero{padding:80px 0 64px}
  .cs5-metrics{gap:20px;margin-top:40px;padding-top:24px}
  .cs5-hero-btns .cs5-btn{width:100%}
  .cs5-pick-out{flex-direction:column;align-items:stretch}
  .cs5-pick-act{width:100%}
  .cs5-pick-act .cs5-btn{flex:1 1 auto;justify-content:center}
  .cs5-dlv-list{grid-template-columns:1fr;gap:0}
  .cs5-dlv-list li{padding:0 0 26px}
  /* 单列时横线失去意义，改成左侧竖线 + 左对齐点 */
  .cs5-dlv-list li::before{left:0;top:4px}
  .cs5-dlv-list li::after{display:none}
  .cs5-dlv-list li{padding-left:22px}
  .cs5-spec{grid-template-columns:1fr}
  /* 寄存器表四列并排，窄屏会把中文含义压成一列一个字。
     改成两行一组：上行地址 + 字段名，下行含义，单位靠右跨两行；表头整行收起。 */
  .cs5-reg{grid-template-columns:52px minmax(0,1fr) auto;row-gap:3px;padding:12px 18px}
  .cs5-reg code{grid-column:1;grid-row:1}
  .cs5-reg span{grid-column:2;grid-row:1}
  .cs5-reg em{grid-column:2;grid-row:2}
  .cs5-reg b{grid-column:3;grid-row:1 / span 2;width:auto;justify-self:end}
  .cs5-reg--head{display:none}
  .cs5-apps{grid-template-columns:1fr;gap:16px}
  .cs5-app--wide{grid-column:span 1}
  .cs5-svc{grid-template-columns:1fr}
  .cs5-form{grid-template-columns:1fr}
  .cs5-modal-box{width:calc(100vw - 24px);margin:12px auto;max-height:calc(100vh - 24px);border-radius:var(--r)}
  .cs5-modal-hd{padding:22px 20px 16px}
  .cs5-modal-scroll{padding:0 20px}
  .cs5-modal-ft{padding:16px 20px}
  .cs5-modal-ft .cs5-btn{width:100%}
  .cs5-cta{padding:40px 26px;border-radius:var(--r-lg)}
  .cs5-faq-q{padding:22px 4px;font-size:16.5px}
  .cs5-faq-a{padding:0 4px 24px}
  .cs5-mbar{display:block}
  .cs5-toast{bottom:calc(104px + var(--cs5-sf,0px))}
}
@media (max-width:700px){
  .cs5-calc,.cs5-demo{grid-template-columns:minmax(0,1fr)}
  .cs5-calc-two{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:640px){
  .cs5-dlg{align-items:flex-end;padding:0}
  .cs5-dlg-box{max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .cs5-dt .cs5-k{width:auto;white-space:normal}
  .cs5-dt th,.cs5-dt td{padding-left:6px;padding-right:10px}
}
@media (max-width:420px){
  .cs5{--gutter:18px}
}