/* ============================================================================
   assets/pages-worker-4.css — ems-pdu / IDCPDU · 编码包 worker-4
   页面：/pdu/ats/ · /specifications/ · /specifications/electrical/ ·
         /specifications/mechanical/ · /specifications/wiring/ · /certificates/

   ⛔ 全部类名以 `w4-` 开头（跨包重名防护）。
   ⛔ 本文件**不改动** design-tokens.css / assets/site.css 的任何既有类；
      只在此基础上叠加本包各页自己的版式。
   ⛔ CSP：style-src 'self' —— 无 @import、无第三方 URL、无内联 style 依赖。
      参数化一律走类名（is-c2/to/is-r2 ...），不写 style="--x:n"。
   ⛔ 反模式：一律 background-color / background-image 分开写，不用 background 简写
      （简写会把 background-image 重置为 none）。
   ⛔ 长宽比白名单：容器 aspect-ratio 只用 3/2 · 2/3 · 1/1。
      生图：hero 1536x1024（3/2）· 分屏/CTA 图 1024x1024（1/1）
      证书扫描件 1460x1956（约 3/4 to 容器给 2/3 近似，object-fit:contain 不裁）。
   ========================================================================= */

/* ============================ 0 · 页级底座 ============================== */
.w4-main { display: block; }

/* 内联 SVG sprite 的挂载点：尺寸归零并从无障碍树移除，但**不能** display:none
   （display:none 的 sprite 在部分浏览器里会让 <use> 取不到 symbol）。 */
.w4-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 面包屑：导航，不是转化动作（不加 data-modal-open） */
.w4-crumbs {
  margin: 0 0 var(--s-xl);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-nav); text-transform: uppercase;
  color: var(--fg-label);
}
.w4-crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.w4-crumbs a { color: var(--fg-4); border-bottom: 1px solid transparent; transition: var(--transition-ctl); }
.w4-crumbs a:hover { color: var(--brand-ink); border-bottom-color: var(--brand-ink); }
.w4-crumbs [aria-current="page"] { color: var(--fg-2); }
.w4-crumbs .w4-sep { color: var(--rule-strong); }
.is-light .w4-crumbs { color: var(--steel-cap); }
.is-light .w4-crumbs a { color: var(--steel-ink); }
.is-light .w4-crumbs a:hover { color: var(--brand-deep); border-bottom-color: var(--brand-deep); }
.is-light .w4-crumbs .w4-sep { color: var(--hair-light); }

/* ============================ 1 · hero 内文 =============================
   本包 hero 一律走共享 .hero + .hero__bg/.hero__scrim/.hero__lightbar。
   只补「左文右栏」与「右文左栏」两处版式差异（图片留白侧）——
   layout=text-left-media-right to 文字在左列；text-right-media-left to 文字在右列。
   ========================================================================= */
.w4-hero__copy { min-width: 0; max-width: 60ch; }
.w4-hero__copy > * + * { margin-top: var(--s-md); }
.w4-hero__copy .h1 { margin-top: var(--s-md); }
.w4-hero__copy .btn-row { margin-top: var(--s-lg); }

/* 右侧常驻参数栏：hero 里只留 3–4 行，压在左半留白内 */
.w4-hero .rail { margin-top: var(--s-lg); }

/* 主体在左 to 文字推到右列；同时按 3/2 图的左半留白重算遮罩权重 */
.hero.w4-hero--mirror .hero__grid { grid-template-columns: 1fr var(--split); }
.hero.w4-hero--mirror .w4-hero__copy { grid-column: 2; grid-row: 1; }
.hero.w4-hero--mirror .hero__grid > .rail { grid-column: 1; grid-row: 1; }
.hero.w4-hero--mirror .hero__bg img { object-position: 36% 48%; filter: saturate(.44) brightness(.62) contrast(1.05); }
.hero.w4-hero--mirror .hero__scrim {
  background-image:
    linear-gradient(270deg,
      rgba(var(--scrim-base), .95) 0%,
      rgba(var(--scrim-base), .86) 34%,
      rgba(var(--scrim-base), .30) 62%,
      rgba(var(--scrim-base), .60) 100%),
    var(--scrim-v);
}
@media (max-width: 900px) {
  .hero.w4-hero--mirror .hero__grid { grid-template-columns: 1fr; }
  .hero.w4-hero--mirror .w4-hero__copy,
  .hero.w4-hero--mirror .hero__grid > .rail { grid-column: 1; grid-row: auto; }
  .hero.w4-hero--mirror .hero__scrim { background-image: var(--scrim-h), var(--scrim-v); }
}

/* hero 底图铺满 —— 这条**必须存在**，而且**必须限定在本包自己的 `.w4-hero` 作用域内**。
   &#9940; 事故记录（2026-09-26，本包自查 + 协调者复跑 `check-layout-edges.js` 命中）：
      site.css §5 只写了 `.hero__bg img{width:100%;height:100%;object-fit:cover}`，
      **没有给 <img> 定位**。`.hero__bg` 虽是 `position:absolute;inset:0`，但它的高度
      在 hero 里是内容撑出来的；静态定位的 <img> 上的 `height:100%` 于是解析成 `auto`
      to 图按自身 3/2 比例撑高。实测 390x844 档：hero 图渲成 390x932（视口高 110%）
      至 390x959（114%），`check-layout-edges.js` 判 `过大图[grid]`（限 101%）。
      1440x900 档因为满幅宽度下 3/2 图高 931px 恰好被 hero 的 overflow:hidden 裁住而侥幸没中。
      —— 我此前为解决与 pages-worker-1.css 的选择器冲突，把裸 `.hero__bg > img` 整条删掉，
         连带删掉了 hero 唯一的定位规则。**冲突的正解是加作用域前缀，不是删规则。**
   &#9940; 加回 absolute+inset 之后，图宽 = 视口宽（&gt;= VW*0.9），同时满足脚本的铺底图判据
      （`position:absolute && width >= VW*0.9`）—— 它本来就是一张铺底图，不该进内容图判据。
   &#9940; 前缀用 `.hero.w4-hero`（硬约束 54 单一权威源）：裸 `.hero__bg > img` 会与
      pages-worker-1.css 的同名选择器重复定义，`check-css-conflicts.py` 会红。 */
.hero.w4-hero .hero__bg > img { position: absolute; inset: 0; }

/* ============================ 2 · 段落头（图标 + eyebrow + 标题 + 引文）==
   .w4-head 只做「头顶有一枚图标、下面一串信息」，不接管节间距。
   ========================================================================= */
.w4-head { max-width: 68ch; }
.w4-head .eyebrow { display: block; color: var(--brand-ink); }
.w4-head .w4-ico { display: block; margin-bottom: 12px; }
.w4-head .h2 { margin-top: var(--s-sm); }
.w4-head .h3 { margin-top: var(--s-sm); }
.w4-head .lede { margin-top: var(--s-md); }
.is-light .w4-head .eyebrow { color: var(--brand-deep); }
.is-light .w4-head .w4-ico { color: var(--brand-deep); }

/* 图标：/assets/icons/*.svg 作为 <img> 用，颜色靠 filter 压成主色/钢色 */
.w4-ico { width: 24px; height: 24px; flex: 0 0 auto; }
.w4-ico--brand { filter: invert(45%) sepia(72%) saturate(2436%) hue-rotate(348deg) brightness(93%) contrast(92%); }
.w4-ico--lg { width: 28px; height: 28px; }

/* ============================ 3 · 参数表（spec-band / table-dense）=====
   &#9940; 桌面端表格不出现横向滚动条：table 自身 min-width:0；
      .w4-tw 的 min-width:560px 只进移动端媒体查询（用户铁律 4）。
   ========================================================================= */
.w4-band { display: grid; grid-template-columns: var(--spec); gap: var(--gap-spec); align-items: start; }
.w4-band__table { min-width: 0; }
.w4-band__side { min-width: 0; }
.w4-band__side > * + * { margin-top: var(--s-lg); }

.w4-table { width: 100%; border-collapse: collapse; margin-top: var(--s-md); }
.w4-table caption {
  text-align: left; padding-bottom: 12px;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-label);
}
.w4-table th {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-label);
  text-align: left; font-weight: var(--w-regular);
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--rule-strong);
}
.w4-table td {
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule);
  color: var(--fg-2); font-size: var(--fs-body-s);
  line-height: var(--lh-ui); vertical-align: top;
}
.w4-table td:first-child { color: var(--fg-1); font-weight: var(--w-regular); }
.w4-table td.n {
  font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.w4-table tbody tr:hover td { background-color: rgba(255, 255, 255, .022); }
.is-light .w4-table th { color: var(--steel-cap); border-bottom-color: var(--on-light); }
.is-light .w4-table td { color: var(--ink); border-bottom-color: var(--hair-light-soft); }
.is-light .w4-table td:first-child { color: var(--on-light); }
.is-light .w4-table td.n { color: var(--on-light); }
.is-light .w4-table caption { color: var(--steel-cap); }
.is-light .w4-table tbody tr:hover td { background-color: rgba(14, 18, 20, .04); }

.w4-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) { .w4-tw > .w4-table { min-width: 560px; } }

/* 侧栏小面板：数据点 + 短句列表 */
.w4-panel {
  border: 1px solid var(--rule); background-color: var(--surface-strong);
  padding: var(--s-md); box-shadow: var(--e-1);
}
.w4-panel > * + * { margin-top: var(--s-sm); }
.w4-panel .label { display: block; }
.w4-panel .w4-ico { margin-bottom: 4px; }
.w4-panel h3 { font-size: var(--fs-h4); }
.w4-panel p { margin: 0; font-size: var(--fs-body-s); color: var(--fg-3); line-height: var(--lh-body); }
.w4-panel ul { margin: 0; padding: 0; list-style: none; }
.w4-panel li {
  display: flex; justify-content: space-between; gap: var(--s-sm);
  padding: 8px 0; border-top: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .04em; color: var(--fg-label); line-height: var(--lh-ui);
}
.w4-panel li b { color: var(--fg-1); font-weight: var(--w-regular); text-align: right; min-width: 0; }
/* &#9940; 每一条 flex 行都必须给**两项**都写 min-width:0。
   flex 项默认 `min-width:auto` = 不许窄于自身 min-content（最长单词）；
   长值（"Breaker or hydraulic" / "Travels with dispatch"）于是把 302px 宽的窄屏列撑破，
   实测 390px 档文档宽被顶到 415–482px（横向溢出）。 */
.w4-panel li span, .w4-panel li b { min-width: 0; }
.is-light .w4-panel { background-color: var(--paper); border-color: var(--hair-light); }
.is-light .w4-panel p { color: var(--steel-ink); }
.is-light .w4-panel li { color: var(--steel-cap); border-top-color: var(--hair-light-soft); }
.is-light .w4-panel li b { color: var(--on-light); }

/* 单列 dl 参数行（宽表不适合、参数少时用） */
.w4-dl { margin: var(--s-md) 0 0; padding: 0; display: grid; gap: 0; }
.w4-dl.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-lg); }
.w4-dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-sm); flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--hair-1);
}
.w4-dl dt {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-label);
}
.w4-dl dd {
  margin: 0; font-family: var(--f-mono); font-size: var(--fs-data);
  color: var(--fg-1); font-variant-numeric: tabular-nums; text-align: right;
}
.w4-dl dd em { font-style: normal; color: var(--brand-ink); }
.is-light .w4-dl > div { border-bottom-color: var(--hair-light-soft); }
.is-light .w4-dl dt { color: var(--steel-cap); }
.is-light .w4-dl dd { color: var(--on-light); }
.is-light .w4-dl dd em { color: var(--brand-deep); }
@media (max-width: 700px) { .w4-dl.is-2 { grid-template-columns: 1fr; } }

/* ============================ 4 · 分屏（强制同高）=======================
   &#9940; 用户铁律 1：align-items:stretch + 图片 absolute cover 铺满列高，
      不出现「图片比文字矮」。
   &#9940; 版式跟随 image-strategy 的 layout：图主体在右 to 文字左；主体在左 to 文字右。
   ========================================================================= */
.w4-split { display: grid; grid-template-columns: var(--split); gap: var(--gap-split); align-items: stretch; }
.w4-split__media {
  position: relative; min-height: 320px; overflow: hidden;
  background-color: var(--ink-void); border: 1px solid var(--rule);
}
.w4-split__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 46%;
  filter: saturate(.5) brightness(.68) contrast(1.05);
}
.w4-split__body { min-width: 0; }
.w4-split__body > * + * { margin-top: var(--s-md); }
.w4-split__body .w4-ico { margin-bottom: 0; }
.w4-split.is-media-left .w4-split__media { order: 1; }
.w4-split.is-media-left .w4-split__body { order: 2; }
.w4-split.is-media-right .w4-split__media { order: 2; }
.w4-split.is-media-right .w4-split__body { order: 1; }
@media (max-width: 900px) {
  .w4-split { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w4-split.is-media-left .w4-split__media,
  .w4-split.is-media-left .w4-split__body,
  .w4-split.is-media-right .w4-split__media,
  .w4-split.is-media-right .w4-split__body { order: 0; }
  .w4-split__media { min-height: 240px; }
}

/* ============================ 5 · 读数墙（meter-row / register-grid）===
   register-grid：分区读数，值 + 单位 + 出处；meter-row：一行一支表计的刻度条。
   ========================================================================= */
.w4-readout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s-lg); margin-top: var(--s-lg);
  border-top: 1px solid var(--hair-2);
}
.w4-readout__cell { padding: var(--s-md) 0; border-bottom: 1px solid var(--hair-1); min-width: 0; }
.w4-readout__cell > * + * { margin-top: 6px; }
.w4-readout__cell .w4-ico { margin-bottom: 8px; }
.w4-readout__cell b {
  display: block; font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: var(--w-regular);
}
.w4-readout__cell strong {
  display: block; font-family: var(--f-display); font-weight: var(--w-display);
  font-size: clamp(28px, 3vw, 42px); line-height: 1;
  letter-spacing: .5px; color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.w4-readout__cell strong i { font-style: normal; font-size: .46em; letter-spacing: .02em; color: var(--fg-label); margin-left: 6px; }
.w4-readout__cell span { display: block; font-size: var(--fs-body-s); color: var(--fg-3); line-height: var(--lh-body); }
.is-light .w4-readout { border-top-color: var(--hair-light); }
.is-light .w4-readout__cell { border-bottom-color: var(--hair-light-soft); }
.is-light .w4-readout__cell b { color: var(--steel-cap); }
.is-light .w4-readout__cell strong { color: var(--on-light); }
.is-light .w4-readout__cell strong i { color: var(--steel-cap); }
.is-light .w4-readout__cell span { color: var(--steel-ink); }
@media (max-width: 1080px) { .w4-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .w4-readout { grid-template-columns: 1fr; } }

/* 计量刻度条：一行 = 一支表计，刻度点按列对齐（不写内联 style） */
.w4-meter { margin-top: var(--s-lg); border-top: 1px solid var(--hair-2); }
.w4-meter__row {
  display: grid; grid-template-columns: 1.1fr 1fr 1.4fr .9fr;
  gap: var(--s-md); align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--hair-1);
}
.w4-meter__row b {
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: var(--w-regular);
}
.w4-meter__row .w4-meter__val {
  font-family: var(--f-display); font-size: 26px; line-height: 1;
  letter-spacing: .5px; color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.w4-meter__row .w4-meter__val i { font-style: normal; font-size: .5em; color: var(--fg-label); margin-left: 5px; }
.w4-meter__row span { font-size: var(--fs-body-s); color: var(--fg-3); }
.w4-meter__row .w4-meter__src { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--fg-4); text-align: right; }
@media (max-width: 820px) {
  .w4-meter__row { grid-template-columns: 1fr 1fr; gap: 4px var(--s-md); }
  .w4-meter__row .w4-meter__src { text-align: left; }
}

/* ============================ 6 · 步骤条（stage-line，&lt;=3 列）============
   &#9940; 用户铁律 2：步骤条 &lt;=3 列；6 步 to 3×2，禁 6 列。
   ========================================================================= */
.w4-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-lg); margin-top: var(--s-lg); counter-reset: w4step;
}
.w4-steps__step { position: relative; padding-top: var(--s-md); border-top: 2px solid var(--rule-strong); min-width: 0; }
.w4-steps__step::before {
  counter-increment: w4step;
  content: counter(w4step, decimal-leading-zero);
  position: absolute; top: -2px; left: 0; padding-right: 8px;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; color: var(--brand-ink);
  background-color: var(--canvas); box-shadow: 0 -2px 0 0 var(--brand);
}
.w4-steps.is-on-deep .w4-steps__step::before { background-color: var(--surface); }
.w4-steps.is-on-light .w4-steps__step { border-top-color: var(--on-light); }
.w4-steps.is-on-light .w4-steps__step::before { background-color: var(--light); color: var(--brand-deep); }
.w4-steps__step > * + * { margin-top: var(--s-xs); }
.w4-steps__step h3 { font-size: var(--fs-h4); }
.w4-steps__step p { margin: 0; font-size: var(--fs-body-s); color: var(--fg-3); line-height: var(--lh-copy); }
.w4-steps.is-on-deep .w4-steps__step p { color: var(--text-2); }
.is-light .w4-steps__step h3 { color: var(--on-light); }
.is-light .w4-steps__step p { color: var(--steel-ink); }
.w4-steps__meta {
  display: block; margin-top: var(--s-sm); padding-top: 8px;
  border-top: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .04em; color: var(--fg-label);
}
@media (max-width: 900px) { .w4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w4-steps { grid-template-columns: 1fr; } }

/* ============================ 7 · 索引卡（子页路由 / 对照维度）==========
   每一张卡必须能点：出现箭头/继续阅读暗示的卡一律 <a>（用户铁律 5）。
   ========================================================================= */
.w4-cards { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
.w4-cards.is-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w4-cards.is-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w4-cards.is-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w4-card {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--rule); background-color: var(--surface-strong);
  box-shadow: var(--e-1); transition: var(--transition-ctl);
}
.w4-card:hover { border-color: var(--rule-strong); transform: var(--hover-lift); }
.w4-card__head { padding: var(--s-md) var(--s-md) 0; }
.w4-card__head .label { display: block; margin-top: 8px; }
.w4-card__head h3 { font-size: var(--fs-h4); margin-top: 6px; }
.w4-card__body { padding: var(--s-sm) var(--s-md) var(--s-md); flex: 1 1 auto; }
.w4-card__body p { margin: 0; font-size: var(--fs-body-s); color: var(--fg-3); line-height: var(--lh-body); }
.w4-card__rows { margin: var(--s-sm) 0 0; padding: 0; list-style: none; }
.w4-card__rows li {
  display: flex; justify-content: space-between; gap: var(--s-sm);
  padding: 7px 0; border-top: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .04em; color: var(--fg-label); line-height: var(--lh-ui);
}
.w4-card__rows li b { color: var(--fg-1); font-weight: var(--w-regular); text-align: right; }
.w4-card__foot {
  padding: 11px var(--s-md); border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--brand-ink);
}
.w4-card:hover .w4-card__foot { color: var(--fg-1); }
.is-light .w4-card { background-color: var(--paper); border-color: var(--hair-light); }
.is-light .w4-card__body p { color: var(--steel-ink); }
.is-light .w4-card__head h3 { color: var(--on-light); }
.is-light .w4-card__rows li { color: var(--steel-cap); border-top-color: var(--hair-light-soft); }
.is-light .w4-card__rows li b { color: var(--on-light); }
.is-light .w4-card__foot { color: var(--brand-deep); border-top-color: var(--hair-light-soft); }
@media (max-width: 1080px) { .w4-cards.is-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .w4-cards.is-c3, .w4-cards.is-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .w4-cards.is-c2, .w4-cards.is-c3, .w4-cards.is-c4 { grid-template-columns: 1fr; }
}

/* ============================ 8 · 证书墙（真实扫描件）==================
   &#9940; 引用 /assets/certificates/<name>.webp（不是 /generated/）。
   &#9940; 编号不落文字：只写证名 + 持证主体 + 标准号。
   &#9940; 容器比例取白名单 2/3（扫描件 1460x1956 约 3/4，用 contain 不裁）。
   ========================================================================= */
.w4-certs { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
.w4-certs.is-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w4-certs.is-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.w4-certs.is-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w4-certs__item {
  display: flex; flex-direction: column; min-width: 0;
  background-color: var(--surface-strong); border: 1px solid var(--rule);
  box-shadow: var(--e-1); transition: var(--transition-ctl);
}
.w4-certs__item:hover { border-color: var(--rule-strong); transform: var(--hover-lift); }
.w4-certs__shot { background-color: var(--paper); padding: var(--s-xs); }
.w4-certs__shot img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: contain;
}
.w4-certs__meta { padding: var(--s-sm); border-top: 1px solid var(--rule); }
.w4-certs__meta b { display: block; font-size: var(--fs-body-s); color: var(--fg-1); font-weight: var(--w-regular); }
.w4-certs__meta span {
  display: block; margin-top: 4px; font-family: var(--f-mono);
  font-size: var(--fs-micro); letter-spacing: .04em; color: var(--fg-label);
  line-height: var(--lh-ui);
}
@media (max-width: 1080px) {
  .w4-certs.is-c4, .w4-certs.is-c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .w4-certs.is-c4, .w4-certs.is-c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .w4-certs.is-c2 { grid-template-columns: 1fr; } }

/* ============================ 9 · 收口 CTA（page-end-form 变体）======== */
.w4-close { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gap-split); align-items: stretch; }
.w4-close__media {
  position: relative; min-height: 300px; overflow: hidden;
  border: 1px solid var(--rule); background-color: var(--ink-void);
}
.w4-close__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 38% 48%;
  filter: saturate(.48) brightness(.66) contrast(1.05);
}
.w4-close__body { min-width: 0; }
.w4-close__body > * + * { margin-top: var(--s-md); }
.w4-close__body .btn-row { margin-top: var(--s-lg); }
.w4-close.is-media-right .w4-close__media { order: 2; }
.w4-close.is-media-right .w4-close__body { order: 1; }
@media (max-width: 900px) {
  .w4-close { grid-template-columns: 1fr; gap: var(--s-lg); }
  .w4-close.is-media-right .w4-close__media,
  .w4-close.is-media-right .w4-close__body { order: 0; }
  .w4-close__media { min-height: 220px; }
}

/* 收口段的行末提示：回复承诺 / 文档范围（不写天数与 MOQ 数字） */
.w4-note {
  display: block; margin-top: var(--s-sm); padding-top: 10px;
  border-top: 1px solid var(--hair-1);
  font-family: var(--f-mono); font-size: var(--fs-micro);
  letter-spacing: .04em; color: var(--fg-label); line-height: var(--lh-body);
}
.w4-note b { color: var(--fg-1); font-weight: var(--w-regular); }
.is-light .w4-note { border-top-color: var(--hair-light-soft); color: var(--steel-cap); }
.is-light .w4-note b { color: var(--on-light); }

/* ============================ 10 · 汇总条（页尾小数据带）============== */
.w4-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--s-lg); margin-top: var(--s-lg);
  border-top: 1px solid var(--hair-2);
}
.w4-strip__cell { padding: 16px 0; border-bottom: 1px solid var(--hair-1); min-width: 0; }
.w4-strip__cell b {
  display: block; font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-label); font-weight: var(--w-regular);
}
.w4-strip__cell strong {
  display: block; margin-top: 4px; font-family: var(--f-display);
  font-weight: var(--w-display); font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: .5px; line-height: 1; color: var(--fg-1);
}
.w4-strip__cell span { display: block; margin-top: 6px; font-size: var(--fs-body-s); color: var(--fg-3); }
.is-light .w4-strip { border-top-color: var(--hair-light); }
.is-light .w4-strip__cell { border-bottom-color: var(--hair-light-soft); }
.is-light .w4-strip__cell b { color: var(--steel-cap); }
.is-light .w4-strip__cell strong { color: var(--on-light); }
.is-light .w4-strip__cell span { color: var(--steel-ink); }
@media (max-width: 900px) { .w4-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .w4-strip { grid-template-columns: 1fr; } }

/* ============================ 11 · 小工具 ============================== */
/* 页尾「上一级 / 相邻页」交叉链接行 —— 是导航，不是转化动作 */
.w4-also {
  display: flex; flex-wrap: wrap; gap: var(--s-sm) var(--s-lg);
  margin: 0; padding: 0; list-style: none;
}
.w4-also a {
  display: inline-flex; align-items: center; min-height: var(--s-touch);
  font-family: var(--f-mono); font-size: var(--fs-data);
  letter-spacing: .06em; color: var(--brand-ink);
  border-bottom: 1px solid var(--rule-strong); transition: var(--transition-ctl);
}
.w4-also a:hover { border-bottom-color: var(--brand-ink); }
.is-light .w4-also a { color: var(--brand-deep); border-bottom-color: var(--hair-light); }
.w4-also b { font-weight: var(--w-regular); }

/* 引用式说明块（亮段 / 暗段各一套边线） */
.w4-quote {
  margin: 0; padding: var(--s-md) 0 0;
  border-top: 2px solid var(--brand);
  max-width: 62ch;
}
.w4-quote p {
  margin: 0; font-family: var(--f-body); font-size: var(--fs-lead);
  line-height: var(--lh-copy); color: var(--fg-2);
}
.w4-quote cite {
  display: block; margin-top: var(--s-sm); font-style: normal;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-nav); text-transform: uppercase; color: var(--fg-4);
}
.is-light .w4-quote p { color: var(--ink); }
.is-light .w4-quote cite { color: var(--steel-cap); }

/* 窄屏兜底：任何网格子项都不得把版心撑破 */
.w4-band > *, .w4-split > *, .w4-close > *, .w4-cards > *, .w4-certs > *,
.w4-readout > *, .w4-steps > *, .w4-strip > *, .w4-meter__row > * { min-width: 0; }