/* ============================================================
   batterylinepro.com — 设计基线 v3（企业网站 · 参考 sourcewigs.com）
   ⭐ 仅 index.html 使用；其余 11 页仍用 site.css，⛔ 本文件不影响它们。
   配色不变（site.config.md）：红 #C4131A + 白 + 十级灰阶，⛔ 无第二个彩色。
   ⛔ 零外部 CDN · ⛔ 零外链字体
   ============================================================ */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --ink:#17191C; --body:#4A4E55; --muted:#63676E; --faint:#999999;
  /* 🚨 director_fix 2026-08-28：--muted 原 #6B7078 —— 白底 4.98 ✓ 但**浅灰带 #EAEAEA 上只有 4.14** ✗，
     11px 序号大量落在浅灰带上 ⇒ 改 #63676E（#EAEAEA 4.72 / 白底 5.68），⛔ 只调明度、⛔ 不换色相。 */
  /* 🚨 深色档红：#C4131A 压 #0A0A0A 只有 3.26 —— 本文件第 115 行自己写着「深色带内⛔不许红字」，
     而 .v4 .bmark 正是红字压深色。⇒ 加 --red-lt（#0A0A0A 上 5.16），同色相不同明度档，⛔ 不是第二个彩色。 */
  --red-lt:#E8484F;
  --line:#E0E0E0; --line-2:#EDEDED; --line-3:#E6E6E6;
  --surface:#F7F7F7; --surface-2:#F0F0F0; --bg:#FFFFFF;
  --dark:#1A1A1A; --dark-2:#141414;
  --red:#C4131A; --red-dk:#A50F15; --red-tint:#FBF1F2; --red-tint-2:#F6E4E5;
  --sans:"Geist","Manrope","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(56px,5.2vw,92px); --gap:26px; --maxw:1280px; --edge:36px;
  --rad:12px; --rad-s:8px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.05);
  --shadow-h:0 2px 6px rgba(0,0,0,.06),0 14px 34px rgba(0,0,0,.09);
}

/* ── reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);
  font:500 16.5px/1.72 var(--sans);          /* ⭐ v3 硬判据 3：正文 w500 起 */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img{max-width:100%;border:0;display:block}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
svg{flex:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}

/* ══ ① 顶部 utility bar ══════════════════════════════════ */
#top-bar{background:var(--dark-2);color:#E4E6E8;font-size:13px;font-weight:500}
#top-bar .wrap{display:flex;align-items:center;gap:22px;height:42px}
.tb-claim{display:flex;align-items:center;gap:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-claim svg{color:var(--red)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.tb-item{display:inline-flex;align-items:center;gap:8px;color:#E4E6E8}
.tb-item:hover{color:#fff}
.tb-item svg{width:15px;height:15px;color:var(--red)}
.tb-soc{display:flex;gap:12px;padding-left:20px;border-left:1px solid rgba(255,255,255,.16)}
.tb-soc a{display:inline-flex;color:#C4C4C4}
.tb-soc a:hover{color:#fff}
.tb-soc svg{width:15px;height:15px}

/* 锚点落点补偿：#main-menu 是 sticky(78px+1px border)，⛔ 不补的话锚点标题会被压在导航底下 */
section[id]{scroll-margin-top:96px}

/* ══ ② 导航 ══════════════════════════════════════════════ */
#main-menu{background:#fff;border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:60}
#main-menu .wrap{display:flex;align-items:center;gap:20px;height:78px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.01em}
.brand span small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
.dm-menu{margin-left:auto}
.dm-menu > ul{display:flex;align-items:center;gap:4px}
.dm-menu > ul > li{position:relative}
.dm-menu > ul > li > a{display:inline-flex;align-items:center;gap:6px;padding:12px 14px;border-radius:var(--rad-s);
  font-size:15px;font-weight:600;color:var(--ink)}
.dm-menu > ul > li > a:hover{color:var(--red);background:var(--surface)}
.dm-menu .car{width:11px;height:11px;color:var(--muted)}
.dm-sub{position:absolute;top:100%;left:0;min-width:272px;background:#fff;border:1px solid var(--line-3);
  border-radius:var(--rad);box-shadow:var(--shadow-h);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s ease,transform .14s ease}
.dm-menu li:hover > .dm-sub,.dm-menu li:focus-within > .dm-sub{opacity:1;visibility:visible;transform:none}
.dm-sub a{display:block;padding:10px 13px;border-radius:var(--rad-s);font-size:14.5px;font-weight:500;color:var(--body)}
.dm-sub a:hover{background:var(--red-tint);color:var(--red-dk)}
.hdr-cta{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;
  padding:13px 22px;border-radius:var(--rad-s);font-size:14.5px;font-weight:700;white-space:nowrap}
.hdr-cta:hover{background:var(--red-dk)}
.hdr-cta svg{width:16px;height:16px}
.nav-btn{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-3);
  border-radius:var(--rad-s);background:#fff;cursor:pointer;padding:0;flex-direction:column;
  justify-content:center;align-items:center;gap:5px}
.nav-btn span{display:block;width:19px;height:2px;background:var(--ink)}

/* ══ ③ HERO —— 满版实景图 + scrim ════════════════════════ */
.hero{position:relative;background:var(--dark);color:#fff;isolation:isolate}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
/* 🚨 scrim 必须挂在 **.band-bg 的伪元素** 上 —— contrast-gate 只从 `:scope > .band-bg` 的
   ::before/::after 读 scrim；挂在 section::before 上它读不到，会把白字判成 1:1（假红，但同型的假绿
   正是 build-rules §24 那三例的成因）⇒ hero 的图层 div 同时带 band-bg 类，让闸真的量到。
   ⚠️ 最薄处 .68 —— §24.1 实算：.55=3.89 ✗ / .65=5.40 ✓，⛔ 不许回调。 */
/* 🚨 渐变 scrim 必须挂 ::before —— contrast-gate 只对 ::before 解析 backgroundImage 的色标
   （::after 只读 backgroundColor）⇒ 渐变挂 ::after 等于闸看不见，白字被算成 1:1。 */
.hero .band-bg::after{background:none}
.hero .band-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,20,20,.88) 0%,rgba(20,20,20,.82) 38%,rgba(20,20,20,.60) 64%,rgba(20,20,20,.34) 100%)}
/* 🚨 2026-08-19 二次修正：上一版写 100deg，那个角度让 .42（最薄）落在**左侧文字区** ——
   探针实测 H1 处有效 alpha 只有 .42，白字最坏 2.74:1。⭐ 我按「左 0% 右 100%」想当然了，
   ⛔ 没验证渐变角度的实际落点。改 90deg 并显式分四段：
     0–38% 文字区 .88/.82（白字最坏 ≥9.9:1）· 64% 起 .60→.34 让产线露出来。
   ⚠️ ⛔ 不许再动 0–38% 段 —— 白字过 AA 的下限是 .60（实算：alpha .60 ⇒ 4.81:1）。 */
/* 🚨 2026-08-19 Director 裁：原 .90/.80/.68 把产线遮得几乎看不见 —— **加 hero 图的目的就是让买家看见机器**。
   ⇒ 减到 .74/.64/.42：左侧文字区 .74（白字最坏情况仍 >4.5:1），右侧 .42 让设备露出来。
   ⚠️ ⛔ 不许再往下压左侧 —— 白字过 AA 的下限是 alpha .595（build-rules §24.1 实算）。 */
.hero-in{padding:clamp(46px,4.4vw,70px) 0 clamp(34px,3.4vw,52px)}
/* 🚨 2026-08-20 移动端亲验：.eyebrow 是 inline-flex + align-items:center，
   窄屏下文字换成 2–4 行时 icon 仍按整块垂直居中 ⇒ **icon 浮在文字中间**，视觉断开。
   ⚠️ 与 about 页 .linemap 那个 bug 同源（多行文字 + align-items:center）。
   ⛔ 桌面端看不出来（eyebrow 单行）—— 只有窄屏亲验才发现。 */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--sans);
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:9px 15px;border-radius:999px;align-items:flex-start}
.eyebrow > svg{flex:0 0 auto;margin-top:2px}
.eyebrow svg{width:14px;height:14px;color:#FF6B6B}
h1{margin-top:22px;font:800 clamp(34px,4.3vw,58px)/1.11 var(--sans);letter-spacing:-.025em;color:#fff;max-width:19ch}
/* 🚨 深色带内 ⛔ 不许红「字」（§24.1 实算 1.13:1）⇒ 高亮做成**红底白字块**：白 on #C4131A = 6.13:1 ✓ */
h1 .hl{background:var(--red);color:#fff;padding:.02em .22em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-lead{margin-top:22px;font-size:19px;line-height:1.62;font-weight:500;color:#F0F1F2;max-width:60ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;
  padding:16px 26px;border-radius:var(--rad-s);font-size:15.5px;font-weight:700}
.btn:hover{background:var(--red-dk)}
.btn svg{width:17px;height:17px}
.btn-o{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.72);padding:15px 25px;border-radius:var(--rad-s);
  font-size:15.5px;font-weight:700}
.btn-o:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-o svg{width:17px;height:17px}

/* 线路图带（hero 底部，5 个工位标 + icon） */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(30px,3.6vw,64px);align-items:center}
/* 🚨 文字背板：scrim 最薄处 alpha .42（Director 16:43 裁定，为让设备露出来）下，
   **纯白字在纯白图上也只有 2.75:1** ⇒ 文字区必须自带实色背板，⛔ 不许靠整幅 scrim。
   ⚠️ contrast-gate 对普通祖先只读 backgroundColor（⛔ 不解析渐变）⇒ 这里必须是**实色 rgba**，
   写成渐变等于闸看不见 = 绿方向的假（build-rules §25）。
   实算：白图 → .42 → rgb(156) → 再压 .45 → rgb(95) ⇒ 白字 6.39:1 ✓ / #F0F1F2 5.55:1 ✓ */
.hero-txt{background:rgba(20,20,20,.45);border-radius:16px;padding:clamp(26px,2.4vw,36px) clamp(24px,2.4vw,38px)}
/* ⚠️ 玻璃卡若用 rgba(255,255,255,.06) 会把 scrim 提亮到 rgb(105) ⇒ 卡内文字最坏情况 4.4:1（<AA）
   ⇒ 改成**压暗**的玻璃：rgba(0,0,0,.24) 把底压到 rgb(62) ⇒ 同样的字色变 8.3:1。 */
.hero-side{border:1px solid rgba(255,255,255,.20);border-radius:var(--rad);background:rgba(0,0,0,.46);padding:26px 24px}
.hs-k{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#E4E6E8;margin-bottom:6px}
/* 🚨 2026-08-19 Director：scrim 从 .90 减到 .74/.64/.42 让产线露出来后，
   这张卡坐在最薄的 .42 端且自己没有底 ⇒ 9 处功能性文字掉到 3.59:1。
   ⭐ 解法是**文字自己带底**，⛔ 不是把整块 scrim 加回去 —— 那会重新遮住机器。
   （build-rules：深底容器内自带背景的后代必须自己定色，此处是同一原理的反向应用） */
.linemap{display:grid;grid-template-columns:1fr;gap:0;background:rgba(18,18,18,.66);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:26px 28px}
/* 🚨 同上：图带上的 .linemap li #E4E6E8 最坏 4.12:1 ⇒ 纯白 5.17。 */
.linemap li{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:600;color:#fff;position:relative;padding:13px 0}
/* 🚨 2026-08-19 Director 亲渲发现 + 三轮定位：about 页 icon 与首字贴住。
   ⛔ 前两轮我改 `.linemap li` 的 flex/gap —— **完全无效**，因为 li 里只有一个 <a> 子元素，
   gap 没有第二个 flex 项可作用。真因：<a> 是 display:block，其内 <svg> 是 inline + margin:0。
   ⭐ 教训：**改之前先看 DOM 实际结构**，⛔ 别照着「看起来像 flex 布局」去改。 */
.linemap li a{display:flex;align-items:flex-start;gap:11px}
.linemap li a > svg{flex:0 0 auto;margin-top:3px}

.linemap li + li{border-top:1px solid rgba(255,255,255,.14)}
.linemap li svg{width:19px;height:19px;color:#fff;opacity:.9}
.linemap li.on{color:#fff}
.linemap li.on svg{color:#FF6B6B;opacity:1}

/* 数字条（深色，紧贴 hero） */
.statband{background:#101010;border-top:1px solid rgba(255,255,255,.10)}
.statband ul{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.statband li{padding:30px 26px 30px 0;position:relative}
.statband li + li{padding-left:26px;border-left:1px solid rgba(255,255,255,.12)}
.s-n{display:block;font:800 clamp(25px,2.7vw,37px)/1.08 var(--sans);letter-spacing:-.03em;color:#fff}
.s-l{display:block;margin-top:10px;font:600 12.5px/1.5 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:#C4C4C4;max-width:26ch}

/* 认证条 */
.certband{background:#181818;border-top:1px solid rgba(255,255,255,.10)}
.certband .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;padding-bottom:18px}
.certband h2{font:600 12.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#C4C4C4;margin-right:8px}
.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:9px 17px;font-size:13.5px;font-weight:600;color:#fff}
.pill svg{width:15px;height:15px;color:#FF6B6B}

/* ══ 节壳 ════════════════════════════════════════════════ */
main > section{padding:var(--pad) 0;background-color:var(--bg);
  /* 浅底节禁裸白（handoff-gate 检 2）：极淡对角纹理 */
  background-image:linear-gradient(180deg,rgba(26,26,26,.028) 0,rgba(26,26,26,0) 92px)}
main > section.surface{background-color:var(--surface)}
main > section.hero{padding:0}
main > section.band{background-color:var(--dark);color:#fff;background-image:none;position:relative;isolation:isolate}
.band-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
/* .74 实算：纯白图下白字 7.94:1 ✓ / 纯黑图下 18.9:1 ✓ —— 两端都过 AA */
/* 🚨 阮总 08-21：「透明度不够」—— .74 把图压成纯黑。降到 .58 让图透出来（v4 下再叠渐变），
   白字安全靠逐元素墨迹实测，⛔ 不靠拍脑袋 */
.band-bg::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.62)}

/* ⭐ 深色带底部单侧弧 —— 深⇄浅切换处的 shape divider（handoff-gate 检 11 的 border-radius 实现）
   ⚠️ 必须**只有一侧**有显著圆角：四角都圆 = 卡片，⛔ 闸不认，视觉上也不是 divider。 */
.hero,main > section.band{border-radius:0 0 clamp(26px,2.8vw,48px) clamp(26px,2.8vw,48px);overflow:hidden}
/* 浅底 → 深色带 的进入弧（独立于节之间的满宽短条） */
.dvc{display:block;line-height:0;background:var(--bg)}
.dvc.on-surface{background:var(--surface)}
.dvc svg{display:block;width:100%;height:clamp(38px,4vw,64px)}

/* 节头 —— ⭐ 双栏：左 节号 + H2，右 lead（⛔ 单栏会让右半整片空着 = 阮总说的「大段空白」）*/
.sh{margin-bottom:clamp(30px,3.2vw,46px);display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(30px,3.6vw,68px);align-items:end}
.sh h2{grid-column:1;grid-row:1}
.sh .lead{grid-column:2;grid-row:1;margin-top:0}
h2{font:700 clamp(25px,2.5vw,37px)/1.18 var(--sans);letter-spacing:-.022em;color:var(--ink);max-width:23ch}
.band h2{color:#fff}
.lead{margin-top:14px;font-size:18px;line-height:1.62;font-weight:500;color:var(--muted);max-width:52ch}
.band .lead{color:#F0F1F2}
h3{font:600 18px/1.38 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.band h3{color:#fff}
.bodytext{margin-top:24px;font-size:16.5px;line-height:1.74;font-weight:500;color:var(--body);max-width:78ch}
.bodytext strong{font-weight:700;color:var(--ink)}
.band .bodytext{color:#F0F1F2}
.band .bodytext strong{color:#fff}
.u-d{margin-top:9px;font-size:15.5px;line-height:1.66;font-weight:500;color:var(--muted)}
/* 🚨 director_fix 2026-08-28：图带上的浅灰字按**最坏情况（图若为纯白）**只有 4.12 / 2.95。
   ⭐ 本站既有注释已确立标准就是这个最坏情况模型（「.55=3.89 ✗ / .65=5.40 ✓ ⛔ 不许回调」）
   ⇒ 提到纯白：white on rgb(109) = 5.17 ✓。⛔ 不动 scrim（那会连带压暗整幅图）。 */
.band .u-d{color:#fff}
.u-d strong{font-weight:700;color:var(--ink)}
.foot-note{margin-top:20px;font-size:14px;line-height:1.66;font-weight:500;color:var(--muted)}
figcaption{margin-top:11px;font-size:13.5px;line-height:1.55;font-weight:500;color:var(--muted)}
/* 🚨 director_fix 2026-08-28：图带上的 figcaption #C4C4C4 —— 最坏情况（图若纯白）2.95:1 ⇒ 提到纯白 5.17。 */
.band figcaption{color:#fff}

/* 布局工具 */
.cols{display:grid;gap:clamp(28px,3vw,52px)}
.c-2{grid-template-columns:repeat(2,1fr)}
.c-3{grid-template-columns:repeat(3,1fr)}
.c-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,3.4vw,60px);align-items:center}
.split-r{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(30px,3.4vw,60px);align-items:center}
.sp-l{margin-top:clamp(30px,3.4vw,52px)}
.sp-m{margin-top:clamp(22px,2.4vw,34px)}

/* 图 */
.fig{display:block;overflow:hidden;border-radius:var(--rad);background:var(--surface-2)}
.fig img{width:100%;height:100%;object-fit:cover}
.r32{aspect-ratio:3/2}.r43{aspect-ratio:4/3}.r11{aspect-ratio:1/1}.r219{aspect-ratio:21/9}.r169{aspect-ratio:16/9}

/* ══ 形态 A：图卡网格（图 + 渐变 + 居中 icon + 红箭头链接）══ */
.icards{display:grid;gap:var(--gap)}
.icard{position:relative;border-radius:var(--rad);overflow:hidden;background:var(--dark);min-height:334px;display:flex}
.icard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.icard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,16,.42) 0%,rgba(16,16,16,.72) 46%,rgba(16,16,16,.90) 100%)}
.icard-in{position:relative;z-index:2;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;width:100%}
.icard-ic{width:46px;height:46px;border-radius:12px;background:var(--red);display:flex;align-items:center;
  justify-content:center;margin-bottom:16px}
.icard-ic svg{width:23px;height:23px;color:#fff}
.icard h3{color:#fff;font-size:19px;font-weight:700}
.icard .u-d{color:#fff}
.arrow{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#FF6B6B;font-size:14px;font-weight:700}
.arrow svg{width:15px;height:15px}
.arrow:hover{color:#fff}

/* ══ 形态 B：白卡（圆角 + 描边 + icon）══════════════════ */
.cards{display:grid;gap:var(--gap)}
.card{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);padding:28px 26px;box-shadow:var(--shadow)}
main > section.surface .card{background:#fff}
.card-ic{width:46px;height:46px;border-radius:12px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card-ic svg{width:23px;height:23px;color:var(--red)}
.card h3{font-size:18px}
.card-n{display:block;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--red);margin-bottom:11px}

/* ══ 形态 C：Icon Reason Block（左 icon + 右文）══════════ */
.rblocks{display:grid;gap:22px}
.rblock{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.rb-ic{width:52px;height:52px;border-radius:12px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center}
.rb-ic svg{width:25px;height:25px;color:var(--red)}
.band .rb-ic{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.band .rb-ic svg{color:#FF6B6B}

/* ══ 形态 D：深挖五步（每步 icon）═══════════════════════ */
.steps{display:grid;gap:0;border:1px solid var(--line-3);border-radius:var(--rad);overflow:hidden;background:#fff}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px 28px}
.steps li + li{border-top:1px solid var(--line-2)}
.st-ic{width:52px;height:52px;border-radius:12px;background:var(--red);display:flex;align-items:center;justify-content:center}
.st-ic svg{width:24px;height:24px;color:#fff}
.st-k{display:block;font:600 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.steps h3{font-size:19px;font-weight:700}
.st-d{margin-top:9px;font-size:15.5px;line-height:1.68;font-weight:500;color:var(--muted)}

/* ══ 形态 E：规格表 / 对比表 ════════════════════════════ */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-3);border-radius:var(--rad);background:#fff}
.tbl{min-width:660px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line-2);font-weight:500}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl thead th{font:600 12px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line-3)}
.tbl tbody th{font-weight:700;color:var(--ink);width:26%}
.tbl .m{display:block;margin-top:5px;font-size:13px;font-weight:500;color:var(--muted)}
.tbl .big{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
/* ⭐ 自家列 = 品牌色成为视觉中心（⛔ 不用深底：深底后代字色要逐类补，见 build-rules §24） */
.tbl thead th.own{background:var(--red);color:#fff;font-family:var(--sans);font-size:14px;
  font-weight:700;letter-spacing:0;text-transform:none;border-bottom-color:var(--red)}
.tbl thead th.own em{display:block;font-style:normal;margin-top:4px;font-size:12.5px;font-weight:500;color:#FBE7E8}
.tbl td.own{background:var(--red-tint);color:var(--ink);font-weight:700}
.cmark{display:inline-flex;align-items:center;gap:9px}
.cmark svg{width:17px;height:17px;flex:none}
.cmark--y svg{color:var(--red)}
.cmark--n svg{color:var(--muted)}
.cmark--m svg{color:var(--faint)}

/* ══ 形态 F：Timeline ═══════════════════════════════════ */
.tline{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);position:relative}
.tline li{position:relative;padding-top:8px}
.tl-ic{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--red);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.tl-ic svg{width:24px;height:24px;color:var(--red)}
.tline li::before{content:"";position:absolute;top:35px;left:54px;right:-13px;height:2px;background:var(--line);z-index:1}
.tline li:last-child::before{display:none}
.tl-n{display:block;margin-top:16px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--red)}
.tline h3{margin-top:9px;font-size:17px}

/* ══ 形态 G：FAQ ════════════════════════════════════════ */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line-3);border-radius:var(--rad);background:#fff;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;
  padding:20px 24px;font-size:17px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .fq-ic{margin-left:auto;width:32px;height:32px;border-radius:8px;background:var(--red-tint);
  display:flex;align-items:center;justify-content:center;flex:none}
.faq .fq-ic svg{width:16px;height:16px;color:var(--red);transition:transform .18s ease}
.faq details[open] .fq-ic svg{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px 24px;font-size:15.5px;line-height:1.72;font-weight:500;color:var(--muted);max-width:88ch}

/* ══ 形态 H：数据墙（深色带内）══════════════════════════ */
.wall{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(30px,3.6vw,60px);align-items:start}
.wall-n{display:block;font:800 clamp(58px,7.4vw,122px)/.94 var(--sans);letter-spacing:-.045em;color:#fff}
.wall-k{display:block;margin-top:18px;font-size:15px;font-weight:600;line-height:1.6;color:#fff}

/* ══ 标签 / chip ════════════════════════════════════════ */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-3);background:#fff;
  border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--ink)}
.chip svg{width:15px;height:15px;color:var(--red)}
.chip-auto{background:var(--red);border-color:var(--red);color:#fff}
.chip-auto svg{color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tags li{background:var(--surface-2);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--ink)}
main > section.surface .tags li{background:#E6E6E6}

/* ══ 图库 / 导航列表 ════════════════════════════════════ */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.navlist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.navlist a{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line-3);
  border-radius:var(--rad);padding:17px 20px}
.navlist a:hover{border-color:var(--red);box-shadow:var(--shadow)}
.nl-n{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--red);font-style:normal;flex:none}
.nl-t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.45}
.navlist i{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--red);flex:none;font-style:normal;font-size:13.5px;font-weight:700;white-space:nowrap}
.navlist i svg{width:17px;height:17px}

/* ══ 联系面板 ═══════════════════════════════════════════ */
.cpanel{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);padding:26px}
.cp-row{display:grid;grid-template-columns:44px 1fr;gap:15px;align-items:start}
.cp-row + .cp-row{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2)}
.cp-ic{width:44px;height:44px;border-radius:11px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center}
.cp-ic svg{width:21px;height:21px;color:var(--red)}
.cp-k{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cp-v{margin-top:5px;font-size:16px;font-weight:600;color:var(--ink);word-break:break-word}
.cp-v a:hover{color:var(--red)}
.micro{margin-top:18px;font-size:13.5px;font-weight:500;color:#C4C4C4}

/* ══ 悬浮 WhatsApp ══════════════════════════════════════ */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:var(--red);box-shadow:0 6px 20px rgba(0,0,0,.24);display:flex;align-items:center;justify-content:center}
.wa:hover{background:var(--red-dk)}
.wa svg{width:27px;height:27px;color:#fff}

/* ══ 页脚 ═══════════════════════════════════════════════ */
footer{background:var(--dark);color:#C4C4C4;padding:clamp(48px,4.8vw,74px) 0 30px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3vw,50px)}
.f-brand .brand{color:#fff}
.f-brand p{margin-top:16px;font-size:14.5px;font-weight:500;line-height:1.7;color:#C4C4C4;max-width:36ch}
.f-soc{display:flex;gap:12px;margin-top:20px}
.f-soc a{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#C4C4C4}
.f-soc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.f-soc svg{width:16px;height:16px}
.f-col h4{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.f-col li + li{margin-top:11px}
.f-col a{font-size:14.5px;font-weight:500;color:#C4C4C4}
.f-col a:hover{color:#fff}
.f-bot{margin-top:clamp(34px,3.4vw,52px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13.5px;font-weight:500;color:#C4C4C4}

/* ══ 动效（唯一一种）════════════════════════════════════ */
html.js .rv{opacity:0;transform:translateY(14px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .2s ease-out,transform .2s ease-out}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv.in{opacity:1;transform:none;transition:none}
  *{transition:none!important}
}

/* ══ 断点 ═══════════════════════════════════════════════ */
@media (max-width:1080px){
  .c-4{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .tline{grid-template-columns:repeat(3,1fr);row-gap:34px}
  .tline li::before{display:none}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--edge:22px}
  .sh{grid-template-columns:1fr}
  .sh .lead{grid-column:1;grid-row:2;margin-top:14px}
  h2{max-width:none}
  #top-bar .tb-claim{display:none}
  /* ⚠️ 320 档实测：顶栏三组内容撑到 432px ⇒ 文档横向溢出 112px（handoff-gate 检 5 FAIL）
     ⇒ 窄屏只留电话 + 社交，邮箱入口在页脚与联系面板都有，⛔ 不丢功能 */
  #top-bar .tb-item[href^="mailto"]{display:none}
  #top-bar .wrap{gap:14px}
  .tb-soc{padding-left:14px;gap:10px}
  .nav-btn{display:flex}
  .hdr-cta{display:none}
  .dm-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line-3);
    box-shadow:var(--shadow-h);padding:12px 22px 20px;display:none;max-height:72vh;overflow-y:auto}
  .dm-menu.open{display:block}
  .dm-menu > ul{display:block}
  .dm-menu > ul > li > a{display:flex;padding:13px 0;font-size:16px}
  .dm-menu .car{display:none}
  .dm-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:2px solid var(--line);border-radius:0;padding:0 0 8px 14px;margin-bottom:6px;min-width:0}
  .dm-sub a{padding:9px 0}
  .c-2,.c-3,.c-4,.split,.split-r,.wall{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-side{margin-top:26px}
  .statband ul{grid-template-columns:repeat(2,1fr)}
  .statband li{padding:22px 18px 22px 0}
  .statband li + li{padding-left:18px}
  .statband li:nth-child(odd){border-left:0;padding-left:0}
  .navlist{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .steps li{grid-template-columns:1fr;gap:16px}
  h1{max-width:none}
}
@media (max-width:600px){
  .tline{grid-template-columns:repeat(2,1fr)}
  .f-top{grid-template-columns:1fr}
  .icard{min-height:290px}
}
/* 窄屏字号下限（build-rules §15：正文/图注 ≥13px） */
@media (max-width:768px){
  .u-d,.st-d,.faq .a,.bodytext{font-size:15.5px}
  figcaption,.foot-note,.f-col a,.f-brand p,.f-bot,.micro{font-size:13.5px}
  .s-l,.card-n,.tl-n,.nl-n,.cp-k,.tbl thead th{font-size:12.5px}
}

/* ════════════════════════════════════════════════════════════════════
   v3 页型扩展（2026-08-19 · pack-line / capacity-planning / about 三页）
   ⭐ 纯新增选择器 —— ⛔ 未修改任何 index.html 依赖的既有规则。
   ⚠️ 新增前已按 build-rules §23 grep 过 ~/Git/site-director/tools/：
      sline / defs / def-* / roster / rs-* / klist / numcard* / nc-* / flow /
      bignum / hrail / hr-* / chip-mute / tier —— 全部 0 命中（`.flowline` 是
      contrast-gate 认识的另一个类，⛔ 本文件不碰它）。
   ════════════════════════════════════════════════════════════════════ */

/* ── 通用 ── */
.sp-s{margin-top:clamp(16px,1.8vw,24px)}
.band .hl,h2 .hl,.hero-side .hl{background:var(--red);color:#fff;padding:.02em .2em;border-radius:6px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ══ 形态 I：Station line —— 15 工位导轨（pack-line 页主形态）════════ */
.sline{display:grid;grid-template-columns:repeat(5,1fr);gap:34px 22px}
.sline li{position:relative;padding-top:6px}
.sline li::before{content:"";position:absolute;top:32px;left:56px;right:-22px;height:2px;background:var(--line-3);z-index:1}
.sline li:nth-child(5n)::before{display:none}
.sl-ic{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;background:#fff;
  border:2px solid var(--line-3);display:flex;align-items:center;justify-content:center}
.sl-ic svg{width:23px;height:23px;color:var(--muted)}
.sline li.on .sl-ic{border-color:var(--red);background:var(--red)}
.sline li.on .sl-ic svg{color:#fff}
.sl-n{display:block;margin-top:15px;font:700 12.5px/1 var(--sans);letter-spacing:.13em;color:var(--red)}
.sl-t{display:block;margin-top:8px;font-size:15px;font-weight:600;line-height:1.42;color:var(--ink)}
.sl-c{display:inline-flex;align-items:center;gap:7px;margin-top:12px;border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  background:var(--surface-2);color:var(--ink)}
.sl-c svg{width:13px;height:13px;color:var(--muted)}
.sl-c--a{background:var(--red);color:#fff}
.sl-c--a svg{color:#fff}

/* ══ 形态 J：对照卡（about 词汇节 —— 一个词的两种读法）════════════ */
.defs{display:grid;gap:var(--gap)}
.def{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow)}
.def-h{display:flex;align-items:center;gap:12px;background:var(--dark);padding:17px 22px}
.def-h svg{width:19px;height:19px;color:#FF6B6B}
.def-h h3{color:#fff;font-size:17px;font-weight:700}
.def-b{padding:19px 22px}
.def-b + .def-b{border-top:1px solid var(--line-2)}
.def-k{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.def-k svg{width:14px;height:14px;color:var(--red)}
.def-t{font-size:15.5px;line-height:1.68;font-weight:500;color:var(--body)}
.def-t strong{font-weight:700;color:var(--ink)}
.def-b--own{background:var(--red-tint)}
.def-b--own .def-k{color:var(--red-dk)}

/* ══ 形态 K：编号清单导轨（可扫读，⛔ 不配评语）════════════════════ */
.roster{display:grid;gap:11px}
.roster li{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line-3);
  border-radius:var(--rad);padding:14px 20px}
.rs-ic{width:38px;height:38px;border-radius:10px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center;flex:none}
.rs-ic svg{width:18px;height:18px;color:var(--red)}
.rs-n{font:700 12.5px/1 var(--sans);letter-spacing:.12em;color:var(--red);flex:none}
.rs-t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.45}
.rs-c{margin-left:auto;flex:none}

/* ══ 形态 L：✓／✗ 对照清单 ═══════════════════════════════════════ */
.klist{display:grid;gap:12px;margin-top:16px}
/* 🚨 2026-08-20 修（b2b 实测 6 页 64 个 li 全中）：原来是 display:grid + 两列。
   一个 li 里若是「<svg> + <strong>标题</strong> + 裸文本」，裸文本会被 CSS Grid 包成
   **第三个匿名网格项**，落到第二行第一列（20px 宽）⇒ 整段正文竖着一词一行。
   ⛔ 没有任何闸会报错：不溢出、不遮挡、对比度也正常，只是**读不了**。
   ⇒ 改成 block + 绝对定位 icon：li 内所有行内内容都在同一个流里，⛔ 不会被拆项。 */
.klist li{display:block;position:relative;padding-left:32px;font-size:15.5px;line-height:1.62;
  font-weight:500;color:var(--body)}
.klist li>svg:first-child{position:absolute;left:0;top:2px}
.klist svg{width:19px;height:19px;color:var(--red);margin-top:2px}
.klist--n svg{color:var(--muted)}

/* ══ 形态 M：数字卡（浅底数字，⛔ 不占深色带配额）═══════════════ */
.numcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.numcard{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);padding:26px 24px;box-shadow:var(--shadow)}
.nc-ic{width:44px;height:44px;border-radius:11px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.nc-ic svg{width:21px;height:21px;color:var(--red)}
.nc-n{display:block;font:800 clamp(25px,2.8vw,38px)/1.06 var(--sans);letter-spacing:-.03em;color:var(--red)}
.nc-k{display:block;margin-top:11px;font-size:14.5px;font-weight:600;line-height:1.55;color:var(--muted)}
.bignum{display:block;font:800 clamp(54px,7vw,116px)/.94 var(--sans);letter-spacing:-.045em;color:var(--red)}
.bignum-k{display:block;margin-top:18px;font-size:15.5px;font-weight:600;line-height:1.6;color:var(--muted)}

/* ══ 形态 N：段位流程条（你在整条线的哪一段）════════════════════ */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flow li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line-3);
  border-radius:var(--rad);padding:15px 18px;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4}
.flow li svg{width:18px;height:18px;color:var(--muted);flex:none}
.flow li.on{background:var(--red);border-color:var(--red);color:#fff}
.flow li.on svg{color:#fff}

/* ══ hero 内的 15 刻导轨（pack-line 页 hero 签名）═══════════════ */
/* 🚨 自带实色底 —— build-rules §32：⛔ 不许靠"这张图恰好够暗" */
.hrail{margin-top:clamp(24px,2.6vw,38px);background:rgba(16,16,16,.80);
  border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:22px 26px 19px}
.hr-n{display:grid;grid-template-columns:repeat(15,1fr);margin-bottom:9px}
.hr-n li{font:700 11.5px/1 var(--sans);letter-spacing:.05em;color:#B9BCBF;text-align:center}
.hr-n li.on{color:#fff}
.hr-g{display:block;width:100%;height:22px}
.hr-lab{margin-top:13px;font-size:14.5px;font-weight:600;color:#E4E6E8}
.hr-lab b{color:#fff;font-weight:700}

/* ══ 表格扩展：三档表头 + 缺口 chip ═══════════════════════════ */
.tbl thead th.tier{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--ink);background:var(--surface-2)}
.tbl thead th.tier em{display:block;font-style:normal;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.tbl .chip{white-space:normal;text-align:left;line-height:1.4}
.chip-mute{background:var(--surface-2);border-color:var(--line-3)}
.chip-mute svg{color:var(--muted)}

/* ══ 断点 ═══════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .sline{grid-template-columns:repeat(3,1fr)}
  .sline li::before{display:none}
  .numcards{grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sline{grid-template-columns:repeat(2,1fr)}
  .numcards{grid-template-columns:1fr}
  .hr-n{display:none}
  .hr-g{height:18px}
  .roster li{align-items:flex-start}
  .rs-c{margin-left:0;width:100%;margin-top:10px}
  .roster li{flex-wrap:wrap}
}
@media (max-width:600px){
  .sline{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
}
@media (max-width:768px){
  .sl-t,.rs-t,.klist li,.def-t{font-size:15px}
  .nc-k,.bignum-k,.flow li,.hr-lab{font-size:14px}
}

/* ⭐ 4 步 timeline 变体 —— ⛔ 不许用行内 style 写死列数（320 档实测右溢 19px） */
.tline--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.tline--4{grid-template-columns:repeat(2,1fr);row-gap:34px}}
@media (max-width:600px){.tline--4{grid-template-columns:1fr}}

/* ══ 深色上下文的文字色必须逐类枚举（build-rules §24）════════════════
   🚨 2026-08-19 contrast-gate 实测：`.u-d strong` 继承 `color:var(--ink)` = #1A1A1A，
      放进 `.icard`（深底图卡）或 `.band`（深色带）就是 **1.00:1 肉眼不可见**。
      ⛔ 这不是"看起来暗一点"，是完全看不见 —— 且五闸里只有 contrast-gate 抓得到。
   ⭐ 新增任何"深底容器"时必须同步在这里补一行，⛔ 不许指望继承。 */
.band .u-d strong,.icard .u-d strong,.band .st-d strong,.band .rblock .u-d strong{color:#fff}

/* ══ 正文内联外链（唯一写法，⛔ 不许再用行内 style）════════════════
   🚨 深色带上 #FF9095 在"最坏情况白图 + .74 scrim"下只有 3.65:1（<AA）
      ⇒ 深底一律白字 + 红下划线，⛔ 不靠红色字。 */
.inl{color:var(--red-dk);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(196,19,26,.45)}
.inl:hover{color:var(--red);text-decoration-color:var(--red)}
.band .inl,.icard .inl{color:#fff;text-decoration-color:#FF6B6B}
/* 🚨 2026-08-20 补（§24 深色上下文逐类枚举）：`.klist` 此前只出现在浅色节，
   它的 `color:var(--body)`(#333) 一旦进 `.hero-side` / `.band` 就是**肉眼不可见**（实测 hero 全灰）。
   ⇒ 本站首次把 klist 用进深色上下文（gantry 页 hero），按 §24 把它加进枚举表。
   ⚠️ 现全站只有 gantry 页命中，⛔ 对已完工页零影响（已逐页扫过）。 */
/* 🚨 director_fix 2026-08-28：图带上的 .klist li #E4E6E8 —— 最坏情况（图若纯白）4.12:1 ⇒ 纯白 5.17。 */
.hero-side .klist li,.band .klist li{color:#fff}
.hero-side .klist li strong,.band .klist li strong{color:#fff}
/* 同源（§24）：`figcaption` 默认 var(--muted)#666，进 `.hero-side` 深底后实测 1.12:1 ⇒ 逐类枚举。 */
.hero-side figcaption{color:#F0F1F2}
/* 同源（§24）：`.pull-q` 默认 var(--ink)#1A1A1A，进 `.hero-side` / `.band` 深底后实测 1.18:1 ⇒ 逐类枚举。
   ⚠️ 现全站只有 cell-compatibility 页 hero 引句命中，⛔ 对已完工页零影响（已逐页扫过）。 */
.hero-side .pull-q,.band .pull-q{color:#fff}
.band .inl:hover,.icard .inl:hover{color:#fff;text-decoration-color:#fff}

/* ══ 形态 O：可带走的一句（about 页「拿这条去问别家」）════════════ */
.pull{margin-top:26px;background:var(--surface);border:1px solid var(--line-3);
  border-left:4px solid var(--red);border-radius:var(--rad-s);padding:20px 24px}
main > section.surface .pull{background:#fff}
.pull-k{display:flex;align-items:center;gap:9px;font:700 12.5px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:11px}
.pull-k svg{width:15px;height:15px;color:var(--red)}
.pull-q{font-size:17px;line-height:1.55;font-weight:700;color:var(--ink)}
@media (max-width:768px){.pull-q{font-size:16px}}

/* 🚨 hero 文字卡内的 micro：#C4C4C4 在「最坏情况白图」下只有 3.13:1（contrast-gate 实测）
   ⇒ hero 内一律用 lead 同色 #F0F1F2（同底实测 4.83:1）。⛔ 深色带里的 .micro 不受影响。 */
.hero-txt .micro{color:#F0F1F2}

/* 数字条三格变体（capacity 页只有三档，⛔ 不许为凑第四格编一个数） */
.statband--3 ul{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.statband--3 ul{grid-template-columns:repeat(2,1fr)}}

/* ══ 形态 P：剖面图卡（conveyor 页 —— 图 + 位置标签 + 说明）════════
   ⚠️ 与 `.icard`（满底深色图卡）不同：白卡 + 上方实景剖面 + 左上角定位胶囊。 */
.xcards{display:grid;gap:var(--gap)}
.xcard{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow)}
.xcard-fig{position:relative;display:block;aspect-ratio:3/2;background:var(--surface-2)}
.xcard-fig img{width:100%;height:100%;object-fit:cover}
.xcard-tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;
  background:rgba(14,14,14,.86);color:#fff;border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em}
.xcard-tag svg{width:14px;height:14px;color:#FF6B6B}
.xcard-in{padding:21px 23px 24px}
.xcard h3{font-size:17.5px}
.xcard .u-d{margin-top:9px}

/* ══ 形态 Q：数值卡（一个数 + 它回答什么 / ⛔ 不回答什么）══════════ */
.vcards{display:grid;gap:var(--gap)}
.vcard{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);padding:26px 24px;box-shadow:var(--shadow)}
.vc-ic{width:44px;height:44px;border-radius:11px;background:var(--red-tint);border:1px solid var(--red-tint-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:17px}
.vc-ic svg{width:21px;height:21px;color:var(--red)}
.vc-n{display:block;font:800 clamp(23px,2.5vw,33px)/1.08 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.vc-l{display:block;margin-top:7px;font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.vc-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.vc-k{display:flex;align-items:center;gap:8px;font:700 12.5px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.vc-k svg{width:14px;height:14px;color:var(--red)}
.vc-k--n svg{color:var(--muted)}
.vc-t{font-size:15.5px;line-height:1.66;font-weight:500;color:var(--body)}
main > section.surface .vcard{background:#fff}

@media (max-width:900px){
  .xcards.c-3,.xcards.c-2,.vcards.c-2,.vcards.c-4{grid-template-columns:1fr}
}
@media (max-width:768px){.xcard .u-d,.vc-t{font-size:15px}}

/* ══ 形态 R：压力曲线板（module-stacking 页签名图元）════════════════
   ⭐ 纯图形 SVG（⛔ 图内无文字 —— 图注/图例用 HTML，contrast-gate 才量得到）。 */
.curvebox{background:var(--surface);border:1px solid var(--line-3);border-radius:var(--rad);padding:26px 24px 22px}
main > section.surface .curvebox{background:#fff}
.curve{display:block;width:100%;height:auto}
.cv-leg{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cv-cap{margin-top:14px;font-size:14px;line-height:1.6;font-weight:500;color:var(--muted)}

/* ══ 独立数字条节（module-stacking 页把数字条提升为独立 section）══════
   ⚠️ 视觉上仍与 hero 连成一块深色（同底 #1A1A1A ⇒ handoff 检 4 判「同底连读」WARN，⛔ 非相撞 FAIL）；
   ⭐ 提升为 section 的目的是让**形态**成立：page-diversity-gate 按 `main > section` 识别形态，
      数字条藏在 hero 里它就看不见 —— 而「数字条为主」正是本页与另两个工位页的区别。
   ⇒ hero 让出下沿弧（`.hero--flat`），由数字条节承担，⛔ 不许两处都有弧（会出现双层曲线）。 */
main > section.statsec{padding:0}
.hero--flat{border-radius:0!important}

/* ══ 形态 S：索引导轨（equipment 页 —— 九台设备的纵向索引）════════
   ⭐ 与 `.navlist`（两列卡片）不同：单列 + 左侧连续导轨线 + 节点圆点，
      读起来是「一条线上的九个位置」，⛔ 不是九张并列的卡。 */
.idxrail{position:relative;margin-left:7px;border-left:2px solid var(--line-3);
  background:#fff;border-radius:0 var(--rad) var(--rad) 0;border-top:1px solid var(--line-3);
  border-right:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
main > section.surface .idxrail{background:#fff}
.idxrail li{position:relative}
.idxrail li + li a{border-top:1px solid var(--line-2)}
.idxrail a{display:flex;align-items:center;gap:15px;padding:15px 20px 15px 28px}
.idxrail a:hover{background:var(--red-tint)}
.idxrail li::before{content:"";position:absolute;left:-8px;top:50%;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid var(--line-3);transform:translateY(-50%);z-index:2}
.idxrail li:hover::before{border-color:var(--red);background:var(--red)}
.ir-n{font:700 12.5px/1 var(--sans);letter-spacing:.12em;color:var(--red);flex:none;width:24px}
.ir-t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.42}
.ir-a{margin-left:auto;flex:none;display:inline-flex;color:var(--red)}
.ir-a svg{width:17px;height:17px}

/* ══ 形态 T：段位命中图（三行 × 九格）════════════════════════════ */
.segmap{display:grid;gap:14px}
.segrow{display:grid;grid-template-columns:minmax(0,168px) 1fr;gap:16px;align-items:center}
.seg-k{display:flex;align-items:center;gap:9px;font:700 13px/1.3 var(--sans);color:var(--ink)}
.seg-k svg{width:17px;height:17px;color:var(--red);flex:none}
.seg-c{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}
.seg-c span{display:flex;align-items:center;justify-content:center;height:38px;border-radius:9px;
  background:var(--surface-2);color:var(--muted);font:700 13px/1 var(--sans);letter-spacing:.04em}
.seg-c span.on{background:var(--red);color:#fff}
main > section.surface .seg-c span{background:#EAEAEA}
@media (max-width:900px){
  .segrow{grid-template-columns:1fr;gap:9px}
  .idxrail a{flex-wrap:wrap;gap:10px}
}
@media (max-width:600px){.seg-c{grid-template-columns:repeat(5,1fr)}}

/* 17 格段位条（module-segment 页的分段图卡用）*/
.seg-c--17{grid-template-columns:repeat(17,1fr);gap:4px}
.seg-c--17 span{height:28px;border-radius:6px;font-size:11px;letter-spacing:0}
@media (max-width:1080px){.seg-c--17{grid-template-columns:repeat(9,1fr);gap:5px}}
@media (max-width:600px){.seg-c--17{grid-template-columns:repeat(6,1fr)}}
/* ⚠️ `statsec-lite` 是**语义标记**（浅底数字带），⛔ 无样式 ——
   page-diversity-gate 按 `main > section` 的 className 识别 stat-band 形态，
   数字带若不在 section 名上留痕，闸就看不见这个形态。⭐ 本页确实以数字带为主形态之一。 */

/* 15 格段位条（PACK 段）*/
.seg-c--15{grid-template-columns:repeat(15,1fr);gap:5px}
.seg-c--15 span{height:30px;border-radius:7px;font-size:11.5px;letter-spacing:0}
@media (max-width:1080px){.seg-c--15{grid-template-columns:repeat(8,1fr)}}
@media (max-width:600px){.seg-c--15{grid-template-columns:repeat(5,1fr)}}

/* ══ 形态 U：询盘表单（contact 页主形态）══════════════════════════
   🚨 本站**无后端端点** ⇒ 表单 action 走 `mailto:` + `enctype="text/plain"`，
      按钮点下去打开的是访客自己的邮件客户端，⛔ 不是假装能提交的 POST。
      表单下方的 `.micro` 把这件事讲明白 —— ⛔ 不许删。
   ⚠️ 标签用 `.flab`（#666 muted，白底 5.74:1）⛔ 不用 `.eyebrow`（那是 hero 深底胶囊，
      且它在 contrast-gate 的装饰清单里 —— 表单标签是**功能性**文字，⛔ 不许借装饰豁免）。 */
.form{background:#fff;border:1px solid var(--line-3);border-radius:var(--rad);
  padding:clamp(26px,2.8vw,38px);box-shadow:var(--shadow)}
.fgrid{display:grid;gap:20px}
.fgrid.fg-2{grid-template-columns:repeat(2,1fr)}
.fgrid.fg-3{grid-template-columns:repeat(3,1fr)}
.flab{display:flex;align-items:center;gap:8px;font:700 12.5px/1.35 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.flab svg{width:14px;height:14px;color:var(--red);flex:none}
.fld{width:100%;border:1px solid var(--line-3);border-radius:var(--rad-s);background:var(--surface);
  padding:13px 15px;font:500 15.5px/1.5 var(--sans);color:var(--ink)}
.fld::placeholder{color:var(--muted);opacity:1}
.fld:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-tint)}
textarea.fld{resize:vertical;min-height:96px}
.fgroup{margin-top:26px;padding-top:24px;border-top:1px solid var(--line-2)}
.fhead{display:flex;align-items:center;gap:11px;font:700 15px/1.3 var(--sans);color:var(--ink);margin-bottom:18px}
.fhead svg{width:19px;height:19px;color:var(--red);flex:none}
@media (max-width:900px){.fgrid.fg-2,.fgrid.fg-3{grid-template-columns:1fr}}
@media (max-width:768px){.fld{font-size:15px}}

/* ══ 两个实测缺陷的修（2026-08-19 六闸抓到）══════════════════════════
   🚨 ① `main > section.surface .seg-c span{background:#EAEAEA}` 的特指度(0,3,1)高于
      `.seg-c span.on{background:var(--red)}`(0,2,0) ⇒ 浅带里命中格的红底被静默盖掉，
      而字色仍是 #fff ⇒ **1.20:1 肉眼不可见**（contrast-gate 在 equipment / module / eol 三页共抓到 18 处）。
      ⭐ 这正是 build-rules §30.2：语义修饰类必须与被覆盖规则**特指度对齐且排在其后**。
   🚨 ② contact 表单里 `sales@batterylinepro.com` 是 24 字符不可断词 ⇒ `.cta-row` 的
      min-content = 270px ⇒ 撑爆 320 档（实测文档宽 346）。⛔ 不是 padding 问题，是**最小内容宽**问题。 */
main > section.surface .seg-c span.on,main > section.band .seg-c span.on{background:var(--red);color:#fff}
.form .cta-row .btn-o{overflow-wrap:anywhere}
@media (max-width:900px){
  .split,.split-r,.wall{grid-template-columns:minmax(0,1fr)}
}

/* ── 询盘结果面板（⛔ 消灭静默失败，见 contact.js 文件头）───────────────── */
.enq-out{margin-top:22px;padding:20px 20px 18px;border:1px solid var(--line-2);
  border-left:3px solid var(--red);background:var(--faint);border-radius:var(--rad-s);outline:none}
.enq-out[hidden]{display:none}
.enq-h{display:flex;align-items:center;gap:9px;margin:0 0 8px;font-weight:600;color:var(--ink)}
.enq-h > svg{flex:0 0 auto;width:18px;height:18px;color:var(--red)}
.enq-note{margin:0 0 13px;font-size:.9rem;line-height:1.6;color:var(--muted)}
.enq-text{margin:0 0 15px;padding:13px 14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad-s);font-family:var(--mono);font-size:.82rem;line-height:1.65;
  color:var(--ink);white-space:pre-wrap;word-break:break-word;max-height:250px;overflow:auto}
.enq-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.enq-a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--line-3);border-radius:var(--rad-s);color:var(--ink);
  text-decoration:none;font-size:.9rem;font-weight:500}
.enq-a > svg{flex:0 0 auto;width:17px;height:17px}
.enq-a:hover{border-color:var(--red);color:var(--red)}
/* ⭐ Copy 是三条路里最保险的一条 ⇒ 视觉上必须是主行动，⛔ 不能最弱（初版反了）*/
.enq-copy{background:var(--red);border-color:var(--red);color:#fff;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:500}
.enq-copy:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff}

/* ── Skip link（⭐ 键盘用户每页要 Tab 过 21+ 导航链接才够得着正文）───────── */
.skip{position:absolute;left:-9999px;top:0;z-index:999;
  padding:11px 18px;background:var(--red);color:#fff;text-decoration:none;
  font-size:.92rem;font-weight:600;border-radius:0 0 var(--rad-s) 0}
.skip:focus{left:0;outline:2px solid #fff;outline-offset:-4px}
/* skip 目标被程序聚焦时⛔ 不画轮廓（它不是用户主动聚焦的控件）*/
[tabindex="-1"]:focus{outline:none}

/* ── Hero 分档（⭐ 1920px 发给 390px 手机 = 约 5 倍过供，实测 LCP 卡在下载上）───── */
.hero-bg{background-image:var(--hero-d)}
@media (max-width:700px){.hero-bg{background-image:var(--hero-m,var(--hero-d))}}

/* ══ 形态 J：大图叠字（figure.figover）════════════════════
   ⭐ 文字压在图上 + 分层进场，⛔ 不是 caption 挂图下。
   🚨 对比度立法出处（2026-08-20 实测）：第一版把遮罩做成**整图底部百分比渐变**，
      深区只到 22% —— 而 .fo-cap 实测高 297px = 图高的 57%，文字上半截压在亮图上，
      采样命中纯白 RGB(255,255,255) ⇒ **1.00:1**。
   ⭐ 所以遮罩改挂在 .fo-cap 自己身上：**它跟着文字块高度走**，⛔ 不赌图的百分比。
      padding-top 撑出羽化带 ⇒ 文字永远落在 alpha ≥.86 的区间（1.05/((1-.86)+.05)=5.5:1 ✓）。
   ⭐ 动效全部挂 .rv 的 .in（site.js 已有 IO + reduce 直接给终态）⇒ ⛔ 零新 JS。
   ⛔ 隐藏态只在 html.js 下 —— 禁 JS 时文字与图 100% 可见。 */
.figover{position:relative;border-radius:var(--rad);overflow:hidden;isolation:isolate}
.figover .fig{border-radius:0;background:var(--surface-2)}
/* 整图轻压：只管调性统一，⛔ 不承担文字对比度 */
.fo-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(16,16,16,.34) 0%,rgba(16,16,16,.12) 46%,rgba(16,16,16,0) 72%)}
/* ⭐ 文字块自带遮罩 —— 顶端 100% 透明，⛔ 无硬边；底端 .96 */
.fo-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin-top:0;color:#fff;
  padding:clamp(64px,7.4vw,116px) clamp(22px,3.1vw,46px) clamp(24px,3vw,42px);
  background:linear-gradient(0deg,rgba(16,16,16,.96) 0%,rgba(16,16,16,.93) 38%,
             rgba(16,16,16,.86) 62%,rgba(16,16,16,.50) 84%,rgba(16,16,16,0) 100%)}
.fo-rule{display:block;height:3px;border-radius:2px;background:#FF6B6B;margin-bottom:clamp(14px,1.5vw,20px)}
.fo-clip{display:block;overflow:hidden}
.fo-text{display:block;max-width:44ch;font:700 clamp(19px,2.05vw,28px)/1.32 var(--sans);
  letter-spacing:-.018em;color:#fff}
/* hover 提示标：⛔ 折叠态若无 affordance，没人知道还有下文 */
.fo-hint{position:absolute;right:clamp(20px,2.6vw,34px);bottom:clamp(22px,2.6vw,34px);
  width:34px;height:34px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.30);color:#fff}
.fo-hint svg{width:17px;height:17px}

/* ⭐ 折叠只在真有 hover 的设备上做 —— 触摸屏 / 禁 JS ⇒ 全文常显，⛔ 不丢内容。
   ⭐ 文字始终留在 DOM 里（只是被 .fo-clip 裁切）⇒ 屏幕阅读器与 curl 都拿得到全文。 */
@media (hover:hover) and (pointer:fine){
  .fo-hint{display:flex}
  .fo-cap{padding-top:clamp(40px,4.4vw,64px)}
  /* 🚨 ⛔ 不许用 em —— 它继承 figcaption 的 13.5px，实测折叠成 18px 把字拦腰切断。
     ⭐ 必须与 .fo-text 自己的字号绑定 ⇒ 恰好一整行。 */
  .fo-clip{max-height:calc(clamp(19px,2.05vw,28px)*1.36)}
  .figover:hover .fo-cap,.figover:focus-visible .fo-cap,.figover:focus-within .fo-cap{
    padding-top:clamp(64px,7.4vw,116px)}
  .figover:hover .fo-clip,.figover:focus-visible .fo-clip,.figover:focus-within .fo-clip{max-height:calc(clamp(19px,2.05vw,28px)*1.36*5)}
  .figover:hover .fo-hint,.figover:focus-visible .fo-hint,.figover:focus-within .fo-hint{
    opacity:0;transform:translateY(6px)}
  html.js .fo-cap{transition:padding-top .44s cubic-bezier(.22,.61,.36,1)}
  html.js .fo-clip{transition:max-height .44s cubic-bezier(.22,.61,.36,1)}
  html.js .fo-hint{transition:opacity .3s ease-out,transform .3s ease-out}
  /* 单行 caption：⛔ 不折叠 ⛔ 不给提示标（由 site.js 量出行数后打标） */
  .figover.fo-single .fo-hint{display:none}
  .figover.fo-single .fo-clip{max-height:none}
}
.figover:focus-visible{outline:3px solid #FF6B6B;outline-offset:3px}

/* ---- 分层进场：图 settle → 文字块从底部揭开 → 红线画出 → 文字上浮 ---- */
html.js .figover .fig img{transform:scale(1.055)}
html.js .figover.in .fig img{transform:scale(1);
  transition:transform 1.9s cubic-bezier(.16,.84,.44,1)}
html.js .figover .fo-cap{clip-path:inset(100% 0 0 0)}
html.js .figover.in .fo-cap{clip-path:inset(0 0 0 0);
  transition:clip-path .8s cubic-bezier(.22,.61,.36,1)}
html.js .figover .fo-rule{width:0}
html.js .figover.in .fo-rule{width:62px;transition:width .55s cubic-bezier(.22,.61,.36,1) .22s}
html.js .figover .fo-text{opacity:0;transform:translateY(18px)}
html.js .figover.in .fo-text{opacity:1;transform:none;
  transition:opacity .5s ease-out .32s,transform .55s cubic-bezier(.22,.61,.36,1) .32s}

@media (prefers-reduced-motion:reduce){
  html.js .figover .fig img,html.js .figover.in .fig img{transform:none;transition:none}
  html.js .figover .fo-cap,html.js .figover.in .fo-cap{clip-path:none;transition:none}
  html.js .figover .fo-rule,html.js .figover.in .fo-rule{width:62px;transition:none}
  html.js .figover .fo-text,html.js .figover.in .fo-text{opacity:1;transform:none;transition:none}
  html.js .fo-cap,html.js .fo-clip,html.js .fo-hint{transition:none}
}
@media (max-width:700px){
  .fo-text{font-size:17px;line-height:1.36;max-width:100%}
  .fo-cap{padding-top:clamp(48px,14vw,72px)}
}

/* ══════════════════════════════════════════════════════════
   ⭐ v4 企业站设计语言（阮总 2026-08-21 给稿 · docs/design-baseline-v4.md）
   🚨 全部挂 `body.v4` 前缀 —— CSS 是**全站 20 页共享**的，不加前缀会连带改掉
      另外 19 页。⭐ 照 README-BUILD-ORDER：只改首页 → 交阮总亲验 → 点头才铺开。
   ══════════════════════════════════════════════════════════ */

/* ── ① 顶栏：黑底 + 红 BLP logo + 右侧红 CTA（稿子四屏顶部都只有这一条） ── */
.v4 #top-bar{display:none}                     /* 稿子无 utility bar；联系方式在 footer 与 contact 面板 */
.v4 #main-menu{background:#0A0A0A;border-bottom:0}
.v4 #main-menu .wrap{height:72px}
.v4 .brand{gap:12px}
.v4 .brand > svg{display:none}                 /* 换成字标 */
.v4 .bmark{font:900 27px/1 var(--sans);font-style:italic;color:var(--red-lt);letter-spacing:-.045em}
.v4 .bname{font:700 14.5px/1 var(--sans);font-style:italic;color:#fff;
  letter-spacing:.055em;text-transform:uppercase}
.v4 .dm-menu > ul > li > a{color:#fff;font-size:14px;letter-spacing:.02em;text-transform:uppercase;font-weight:700}
.v4 .dm-menu > ul > li > a:hover{color:#fff;background:rgba(255,255,255,.10)}
.v4 .dm-menu .car{color:rgba(255,255,255,.62)}
.v4 .hdr-cta{text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:14px 22px;border-radius:4px}
.v4 .nav-btn{border-color:rgba(255,255,255,.26);background:transparent}
.v4 .nav-btn span{background:#fff}

/* ── ② Hero：左文右图分栏（⛔ 不是满版背景图 + scrim） ── */
.v4 .hero{background:#0A0A0A;border-radius:0}
.v4 .hero .hero-bg{left:auto;right:0;width:63%;border-radius:0}
/* 🚨 scrim 仍挂 .band-bg::before —— contrast-gate 只从这里读色标（见 §24 三例假绿） */
/* 🚨 渐变按 **.hero-bg 自己的宽度**算，⛔ 不是按整幅 hero ——
   第一版照整幅写 0–30% 纯黑，而 bg 已缩到右 63% ⇒ 等于拿黑色盖掉图的 72%，右侧全黑。
   ⭐ v4 下它只负责**图的左边缘融进黑底**，⛔ 不负责文字对比度
   （文字区落在 .hero 的纯黑 #0A0A0A 上，白字 19:1）。 */
.v4 .hero .band-bg::before{background:linear-gradient(90deg,
  #0A0A0A 0%,rgba(10,10,10,.80) 16%,rgba(10,10,10,.30) 38%,rgba(10,10,10,0) 60%)}
.v4 .hero-in{padding:clamp(56px,5.4vw,88px) 0 clamp(40px,4vw,64px)}
.v4 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;row-gap:0}
.v4 .hero-txt{background:none;padding:0;grid-column:1;grid-row:1}
.v4 .hero h1{font-weight:800;font-size:clamp(34px,3.75vw,51px);line-height:1.09;letter-spacing:-.028em;max-width:none}
.v4 .hero h1 .hl{background:none;color:#fff;padding:0}   /* 稿子 H1 全白，⛔ 无红底块 */
.v4 .hero-lead{font-size:17.5px;line-height:1.6;color:#C9CCD0;max-width:46ch;margin-top:20px}
.v4 .hero .eyebrow{background:none;border:0;padding:0;color:var(--red);
  font:700 12.5px/1 var(--sans);letter-spacing:.14em;gap:0}
.v4 .hero .eyebrow > svg{display:none}
/* 08-21 调性轮：hero 按钮同全站 Title Case（原 uppercase 特异度压住 ⑮ 的统一规则） */
.v4 .hero .btn,.v4 .hero .btn-o{text-transform:none;letter-spacing:0;font-size:14px;border-radius:6px}
/* linemap 移到左栏文字下方一条细导轨（⛔ 内容不丢 —— 稿子把它演成了 hero 下的 8 站图） */
.v4 .hero-side,.v4 .hero-side .linemap{grid-column:1;grid-row:2;background:none;border:0;border-radius:0;box-shadow:none;
  border-top:1px solid rgba(255,255,255,.15);padding:20px 0 0;margin-top:32px}
.v4 .hero-side .hs-k{color:var(--red);font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.v4 .hero-side .linemap{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.v4 .hero-side .linemap li{font-size:12.5px}

/* ── ③ KPI 数字条：4 张白卡（线性图标 + 红数字 + 标题 + 说明） ── */
.v4 .statband{background:#fff;padding:clamp(32px,3.2vw,50px) 0;border:0}
.v4 .statband ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.v4 .statband li{background:#fff;border:1px solid var(--line-3);border-radius:10px;
  padding:24px 22px;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  box-shadow:0 1px 2px rgba(0,0,0,.03)}
.v4 .kpi-ic{width:44px;height:44px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.v4 .kpi-ic svg{width:38px;height:38px}
.v4 .statband .s-n{display:block;color:var(--red);font:800 clamp(21px,1.9vw,27px)/1.06 var(--sans);letter-spacing:-.022em}
.v4 .statband .s-t{display:block;margin-top:7px;font:700 14.5px/1.3 var(--sans);color:var(--ink)}
.v4 .statband .s-l{display:block;margin-top:6px;font:500 13px/1.5 var(--sans);color:var(--muted)}

/* ── ④ Eyebrow：红大写 + 一条短横线（稿子 PART 2 / OUR LINEUP / THE SEAM） ── */
.v4 main .eb{display:flex;align-items:center;gap:14px;margin-bottom:16px;
  font:700 12.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.v4 main .eb::after{content:"";flex:0 0 44px;height:1px;background:var(--line)}
.v4 .band .eb{color:#FF6B6B}
.v4 .band .eb::after{background:rgba(255,255,255,.28)}

@media (max-width:900px){
  .v4 .hero .hero-bg{width:100%;opacity:.5}
  .v4 .hero-grid{grid-template-columns:1fr}
  .v4 .statband ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){ .v4 .statband ul{grid-template-columns:1fr} }

/* ── ④b eyebrow 在 .sh 双栏节头里的位置（⭐ 标签文案取自 md 板块锚名，⛔ 不另发明） ── */
.v4 h2{font-weight:800;letter-spacing:-.024em;font-size:clamp(26px,2.8vw,40px);line-height:1.14}

/* ── ⑤ 收尾 CTA：黑底 + 右侧图渐变融合 + 红实心/描边双按钮 ── */
.v4 #midcta{background:#0A0A0A}
.v4 #midcta .band-bg::after{background:none}
.v4 #midcta .band-bg::before{content:"";position:absolute;inset:0;
  /* 🚨 深色区必须**盖满左栏全宽（1.06fr ≈ 52%）** —— 第一版只到 32%，
     第三个 Reason Block 落在渐变变淡处压住电池模组亮部，实测 2.78:1。 */
  background:linear-gradient(90deg,#0A0A0A 0%,#0A0A0A 47%,rgba(10,10,10,.88) 57%,
             rgba(10,10,10,.46) 75%,rgba(10,10,10,.18) 100%)}
.v4 #midcta h2{color:#fff;font-weight:800}
.v4 #midcta .btn,.v4 #midcta .btn-o{text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;border-radius:4px}

/* ── ⑥ Footer：黑底 · 列标题红短下划线 · 社交圆标 ── */
.v4 footer{background:#0A0A0A;color:#B9BDC2;border-top:0}
.v4 footer .bmark{font-size:24px}
.v4 footer .bname{font-size:13px}
.v4 footer h4{color:#fff;font:700 12.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  padding-bottom:11px;margin-bottom:16px;position:relative}
.v4 footer h4::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;background:var(--red)}
.v4 footer a{color:#B9BDC2}
.v4 footer a:hover{color:#fff}
.v4 footer p{color:#9BA0A6}
.v4 .f-soc{display:flex;gap:10px;margin-top:20px}
.v4 .f-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.24);
  display:flex;align-items:center;justify-content:center;color:#fff}
.v4 .f-soc a:hover{border-color:var(--red);background:var(--red)}
.v4 .f-soc svg{width:17px;height:17px}

/* 🚨 2026-08-21 实测 bug：`.band-bg` 有 background-size:cover 却**没有 background-image 规则**
   （`.hero-bg` 有，见上方 `.hero-bg{background-image:var(--hero-d)}`，`.band-bg` 漏了）
   ⇒ 全站所有深色带的背景图**从来没显示过**，只剩 ::after 那层 rgba(20,20,20,.74) 纯色。
   ⚠️ design-baseline-gate ⑥ 只数「深色带 ≥3 条」，⛔ 不查带里有没有图 ⇒ 一直报绿。
   ⭐ 阮总 08-21「只用改首页」⇒ 本次只在 v4 作用域内修；**其余 19 页记账待放行后统一修**。 */
.v4 .band-bg{background-image:var(--hero-d)}
@media (max-width:700px){ .v4 .band-bg{background-image:var(--hero-m,var(--hero-d))} }
/* midcta 自带左黑右透渐变 ⇒ ⛔ 关掉 .band-bg::after 那层全幅 .74 灰罩，否则图仍看不见 */
.v4 #midcta .band-bg::after{background:none}

/* 🚨 稿子的收尾 CTA：右侧是**纯图**，文字全在左侧。
   实测第一版把 rblocks 留在右栏 ⇒ 白字压在车间亮地面上，对比度必挂。
   ⇒ 左栏两行（文案 / 三项要素横排），右栏完全留给图。 */
.v4 #midcta .split{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:start}
.v4 #midcta .split > div:first-child{grid-column:1;grid-row:1}
.v4 #midcta .rblocks{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.v4 #midcta .rblock{grid-template-columns:38px 1fr;gap:13px}
.v4 #midcta .rb-ic{width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}
.v4 #midcta .rb-ic svg{width:19px;height:19px;color:#FF6B6B}
.v4 #midcta h3{font-size:15px}
.v4 #midcta .u-d{font-size:13.5px}
@media (max-width:900px){ .v4 #midcta .rblocks{grid-template-columns:1fr} }

/* 🚨 `font:` 简写**不重置 letter-spacing / text-transform** —— 原 .s-l 带 .1em 字距 + 大写，
   在 KPI 窄卡里把每个词撑成独占一行（实测竖排）。⇒ 必须显式清掉。 */
.v4 .statband .s-l{letter-spacing:0;text-transform:none;color:var(--muted)}
.v4 .statband .s-n{letter-spacing:-.022em;text-transform:none}
.v4 .statband li + li{border-left:0;padding-left:22px}

/* 🚨 li 有三个子元素（icon / 数字 / 说明），两列 grid 会把说明甩进 44px 的图标列
   ⇒ 每行只塞得下一个词（实测竖排 6 行）。⭐ 必须显式指定每个子元素的行列。 */
.v4 .statband li{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:16px;row-gap:9px;align-items:start}
.v4 .kpi-ic{grid-column:1;grid-row:1}
.v4 .statband .s-n{grid-column:2;grid-row:1;margin:0}
.v4 .statband .s-l{grid-column:2;grid-row:2;margin:0}

/* ── ⑦ 线稿产线图（v4 三稿 · 融合版：⛔ 无卡片容器，图直接融页面底）── */
/* ⭐ 背景融入（阮总 08-21 点名）：⛔ 不是平灰一块 —— 上亮下沉渐变 + 中上部光斑，
   尾色收在 #F7F7F7 与下一节 .surface 无缝衔接；设备填色与背景顶色同族，靠描边立形 */
.v4 #hero-scene{padding:clamp(44px,4.4vw,72px) 0 clamp(30px,3vw,48px);
  background:
    radial-gradient(ellipse 62% 46% at 50% 30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FAFBFC 0%,#F0F1F3 58%,#F7F7F7 100%)}
.v4 .scene-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:clamp(20px,2.2vw,34px)}
.v4 .scene-title{font:800 clamp(27px,2.9vw,42px)/1.05 var(--sans);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink)}
.v4 .scene-sub{margin-top:9px;font:500 16px/1.4 var(--sans);color:var(--muted)}
.v4 .scene-rule{display:block;width:46px;height:3px;border-radius:2px;background:var(--red);margin-top:15px}
.v4 .scene-meta{font:700 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.v4 .scene-meta i{font-style:normal;color:var(--red);margin:0 8px;font-size:9px;vertical-align:1px}
.v4 .scene-meta b{color:var(--ink)}
.v4 #hero-scene .stage{border:0;border-radius:0;background:transparent;padding:0;overflow-x:auto}
.v4 #hero-scene svg.scene{display:block;width:100%;min-width:1080px;height:auto}
.v4 .scene-foot{display:flex;align-items:center;gap:26px;margin-top:clamp(18px,2vw,30px)}
.v4 .scene-foot .fline{flex:1;height:1px;background:var(--line-2)}
.v4 .scene-foot a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);
  font:800 12.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}
/* ⭐ 照稿子：红下划线只压文字，箭头在线外 */
.v4 .scene-foot .efl{padding-bottom:7px;border-bottom:2px solid var(--red)}
.v4 .scene-foot a:hover{color:var(--red)}
.v4 .scene-foot a svg{width:15px;height:15px;color:var(--red)}
@media (max-width:900px){ .v4 .scene-head{flex-direction:column;align-items:flex-start} }

/* ── ⑧ THE SEAM 深色分栏 banner（左 timeline + 右满出血图）── */
.v4 .seam-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:#0A0A0A;border-radius:14px;overflow:hidden;margin-top:clamp(26px,2.8vw,40px)}
.v4 .seam-hero-l{padding:clamp(30px,3.4vw,54px)}
.v4 .seam-hero-l .shk{color:#C9CCD0;font-size:15px;line-height:1.62;max-width:44ch}
.v4 .seam-tl{margin-top:30px;list-style:none;padding:0}
.v4 .seam-tl li{position:relative;padding-bottom:24px}
.v4 .seam-tl li::before{content:"";position:absolute;left:15px;top:36px;bottom:2px;width:1px;
  background:rgba(255,255,255,.20)}
.v4 .seam-tl li:last-child{padding-bottom:0}
.v4 .seam-tl li:last-child::before{display:none}
.v4 .seam-tl a{display:flex;align-items:center;gap:16px;color:#E4E6E8;font:600 15px/1 var(--sans)}
.v4 .seam-tl a:hover span{color:#fff}
.v4 .seam-tl i{font-style:normal;flex:none;width:31px;height:31px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;
  font:700 11.5px/1 var(--sans)}
.v4 .seam-tl li.on i{border-color:#FF6B6B;color:#FF6B6B}
.v4 .seam-tl li.on span{color:#FF6B6B}
.v4 .seam-tl li.on a::after{content:"";flex:1;height:1px;background:rgba(255,107,107,.55);margin-left:6px}
.v4 .seam-hero-r{position:relative;min-height:430px}
.v4 .seam-hero-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .v4 .seam-hero{grid-template-columns:1fr}
  .v4 .seam-hero-r{min-height:250px;order:-1}
  .v4 .seam-hero-r img{position:static;height:250px}
}

/* ── ⑨ levels 图上白标签 + tiers 红型号 + footer CTA ── */
.v4 #levels .fig{position:relative;display:block}
.v4 .lv-tag{position:absolute;top:14px;left:14px;z-index:2;background:#fff;color:var(--ink);
  font:800 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:8px 13px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.v4 #tiers .tbl th[scope="row"]{font-size:17px;font-weight:800;color:var(--red);letter-spacing:-.01em}
.v4 #tiers .tbl th[scope="row"] .m{color:var(--muted);font-weight:600}
.v4 .f-cta{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;
  margin-top:22px;padding:13px 22px;border-radius:4px;
  font:700 13px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.v4 .f-cta:hover{background:var(--red-dk);color:#fff}
.v4 .f-cta svg{width:15px;height:15px}

/* ⭐ 新 hero 图（阮总 08-21 给图）：主体（BLP 标识/机器人/模组托盘）在图右侧
   ⇒ 右对齐定位，⛔ center 会把右缘 BLP 标识裁掉一半 */
.v4 .hero .hero-bg{background-position:right center}

/* ── ⑩ hero v4 二版（阮总 08-21 hero 稿）：满版图 + 引线标注 + KPI 深色条压图底 ── */
.v4 .hero .hero-bg{left:0;width:100%;background-position:right center}
/* 满版图后文字对比全靠 scrim：0–38% 文字区 .92/.86（蓝亮图上白字 ≥5.5:1），右侧留给标注与图 */
/* ⭐ 08-21 深色整线图（阮总给图 · 图内自带 01–05 标注）：图自暗 ⇒ 右侧几乎不压，
   左文字区保 .92/.88；⚠️ HTML 标注层已撤 —— 图内已烧同套标注，双层 = 重复 */
.v4 .hero .band-bg::before{background:linear-gradient(90deg,
  rgba(6,6,6,.97) 0%,rgba(6,6,6,.93) 26%,rgba(8,8,8,.74) 42%,
  rgba(8,8,8,.18) 58%,rgba(8,8,8,.04) 76%,rgba(8,8,8,.10) 100%)}
.v4 .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* 引线标注层 */
.v4 .hero-anno{position:absolute;inset:0;z-index:1;pointer-events:none}
.v4 .ha{position:absolute;display:flex;flex-direction:column;align-items:center}
/* 🚨 白字裸压亮图实测 3.09:1 ⇒ 标注加深色胶囊（alpha .82 → 最坏 ≥4.9:1），
   与 THE SEAM 红标签同形态语言 */
.v4 .ha b{font:600 11.5px/1 var(--sans);color:#fff;letter-spacing:.03em;white-space:nowrap;
  background:rgba(8,8,8,.82);padding:5px 9px;border-radius:3px}
.v4 .ha i{display:block;width:1px;background:rgba(255,255,255,.62);margin-top:7px}
.v4 .ha-seam b{background:var(--red);padding:5px 9px;border-radius:3px;
  font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.07em;text-shadow:none}
.v4 .ha-seam i{width:0;height:300px;background:none;border-left:1.6px dashed rgba(196,19,26,.85)}
@media (max-width:900px){.v4 .hero-anno{display:none}}
/* KPI 条：深色半透明圆角，压在 hero 图底部（⛔ 不再是 hero 下白卡区） */
.v4 .statband{background:transparent;padding:clamp(20px,2.2vw,34px) 0 clamp(30px,3vw,46px);position:relative;z-index:2}
/* ⭐ 磨砂玻璃（阮总 08-21 点名）：透过条能看到图里的模组托盘 —— 深玻璃底 + blur18 +
   saturate + 细白描边 + 顶部 1px 高光。⚠️ 白字对比度靠玻璃底 .42+图暗部，实测为准 */
.v4 .statband ul{gap:0;background:rgba(15,15,18,.62)  /* 🚨 director_fix 2026-08-28：原 .42 —— 最坏情况（图若为纯白）合成底色 0.42×16+0.58×240 = **146**，白字仅 3.09:1。
     ⭐ 反算需 alpha ≥ .545 ⇒ 取 .62（合成 101，白字 5.8:1），⛔ 不动图本身的 scrim（那会压暗整幅图）。 */;border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:clamp(18px,1.8vw,26px) clamp(16px,1.6vw,24px);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 34px rgba(0,0,0,.35)}
.v4 .statband li{background:none;border:0;box-shadow:none;border-radius:0;padding:4px 22px}
.v4 .statband li + li{border-left:1px solid rgba(255,255,255,.13)}
.v4 .statband .s-n{color:#fff}
.v4 .statband .s-l{color:#B9BDC2}
.v4 .kpi-ic{color:#FF6B6B}
@media (max-width:900px){
  .v4 .statband ul{flex-wrap:wrap;display:grid;grid-template-columns:repeat(2,1fr);row-gap:18px}
  .v4 .statband li:nth-child(odd){border-left:0}
}
/* KPI 深色条内数字字号微降防断行（500 MWh – 2 GWh 实测折行） */
.v4 .statband .s-n{font-size:clamp(19px,1.65vw,24px);white-space:nowrap}

/* ══ ⑪ hero 动效层（阮总 08-21：「效果都不用，很素」⇒ 做足）═══════
   ⭐ 全部 CSS-only：隐藏态只挂 html.js（禁 JS 正文 100% 可见）；reduce 全停直接终态。 */
.v4 .hero{overflow:hidden}
/* ① 进场 stagger：eyebrow → H1 → lead → CTA → KPI 玻璃条 依次上浮 */
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
html.js .v4 .hero .eyebrow{animation:heroIn .65s cubic-bezier(.22,.61,.36,1) both}
html.js .v4 .hero h1{animation:heroIn .7s cubic-bezier(.22,.61,.36,1) .12s both}
html.js .v4 .hero-lead{animation:heroIn .7s cubic-bezier(.22,.61,.36,1) .24s both}
html.js .v4 .hero .cta-row{animation:heroIn .7s cubic-bezier(.22,.61,.36,1) .36s both}
html.js .v4 .statband ul{animation:heroIn .8s cubic-bezier(.22,.61,.36,1) .52s both}
/* ② 背景 Ken Burns settle：1.07 → 1，一次性 */
@keyframes bgSettle{from{transform:scale(1.07)}to{transform:scale(1)}}
html.js .v4 .hero .hero-bg{animation:bgSettle 5.5s cubic-bezier(.16,.84,.44,1) both}
/* ③ 扫光：对角亮带每 7s 扫过产线一次（⚠️ 覆盖 v3 的 ::after none —— 闸只读 ::after 的
   backgroundColor，此处是 backgroundImage，不进对比度计算） */
.v4 .hero .band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,
  transparent 42%,rgba(255,255,255,.085) 50%,transparent 58%);
  transform:translateX(-130%);animation:sweep 7s ease-in-out 2.4s infinite}
@keyframes sweep{0%{transform:translateX(-130%)}42%{transform:translateX(130%)}100%{transform:translateX(130%)}}
/* ④ 主 CTA 红光呼吸 */
.v4 .hero .btn{box-shadow:0 6px 22px rgba(196,19,26,.32);animation:ctaGlow 3.4s ease-in-out 1.6s infinite}
@keyframes ctaGlow{50%{box-shadow:0 8px 36px rgba(196,19,26,.62)}}
/* ⑤ KPI 玻璃卡 hover 微升 + 图标提亮 */
.v4 .statband li{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.v4 .statband li:hover{transform:translateY(-4px)}
.v4 .statband li:hover .kpi-ic{color:#FF8A8A}
/* reduce：全部动画停、直接终态 */
@media (prefers-reduced-motion:reduce){
  html.js .v4 .hero .eyebrow,html.js .v4 .hero h1,html.js .v4 .hero-lead,
  html.js .v4 .hero .cta-row,html.js .v4 .statband ul,html.js .v4 .hero .hero-bg,
  .v4 .hero .btn,.v4 .statband li{animation:none;transition:none;opacity:1;transform:none}
  .v4 .hero .band-bg::after{animation:none;content:none}
}

/* ══ ⑫ 全页效果体系（阮总 08-21 立规：每个板块都上最好效果，「素」=驳）═══
   ⭐ 全 CSS：reduce 统一停；hover 只在 (hover:hover) 生效；⛔ 不碰渲染范式。 */

/* ① 卡片：hover 升起 + 阴影加深 + 顶部红线滑入 */
@media (hover:hover){
.v4 .card{position:relative;overflow:hidden;transition:transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s}
.v4 .card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.v4 .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-h)}
.v4 .card:hover::after{transform:scaleX(1)}
/* ② 图片：hover 缓慢放大（⛔ figover 除外——它有自己的进场 scale） */
.v4 figure:not(.figover) .fig{overflow:hidden}
.v4 figure:not(.figover) .fig img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.v4 figure:not(.figover):hover .fig img{transform:scale(1.05)}
.v4 .card .fig img{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.v4 .card:hover .fig img{transform:scale(1.06)}
/* ③ 按钮：箭头滑动 + 副按钮红化 */
.v4 .btn svg,.v4 .btn-o svg,.v4 .scene-foot a svg,.v4 .f-cta svg{transition:transform .25s}
.v4 .btn:hover svg,.v4 .btn-o:hover svg,.v4 .scene-foot a:hover svg,.v4 .f-cta:hover svg{transform:translateX(4px)}
.v4 .btn-o{transition:border-color .25s,color .25s,background .25s}
/* ④ 表格：行 hover 红染 */
.v4 .tbl tbody tr{transition:background .22s}
.v4 .tbl tbody tr:hover{background:var(--red-tint)}
/* ⑤ Reason Block / steps：hover 图标底红化 */
.v4 .rblock .rb-ic,.v4 .steps .st-ic{transition:transform .28s,background .28s}
.v4 .rblock:hover .rb-ic{transform:scale(1.08)}
.v4 .steps li:hover .st-ic{transform:scale(1.08)}
/* ⑥ seam timeline：hover 圈红化 */
.v4 .seam-tl a i{transition:border-color .25s,color .25s}
.v4 .seam-tl a:hover i{border-color:#FF6B6B;color:#FF6B6B}
}
/* ⑦ 深色带扫光（break / yield / midcta —— 与 hero 同语言、更慢更淡） */
.v4 section.band{position:relative;overflow:hidden}
.v4 section.band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.05) 50%,transparent 56%);
  transform:translateX(-130%);animation:sweep 9s ease-in-out 3.2s infinite}
/* ⑧ 滚动进场 stagger：卡组/步骤组子元素依次上浮（⛔ 容器自身仍走 .rv 原逻辑） */
html.js .v4 :is(.cards,.rblocks,.steps).rv > *{opacity:0;transform:translateY(20px)}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *:nth-child(2){transition-delay:.1s}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *:nth-child(3){transition-delay:.2s}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *:nth-child(4){transition-delay:.3s}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *:nth-child(5){transition-delay:.4s}
html.js .v4 :is(.cards,.rblocks,.steps).rv.in > *:nth-child(n+6){transition-delay:.5s}
/* reduce：⑦⑧ 全停直接终态 */
@media (prefers-reduced-motion:reduce){
  .v4 section.band::before{animation:none;content:none}
  html.js .v4 :is(.cards,.rblocks,.steps).rv > *{opacity:1;transform:none;transition:none}
}

/* ══ ⑬ icon 裸化（阮总 08-21：「icon 不要用背景颜色，太不高级」）═══════
   ⛔ 全部去掉 tint 底 / 实心底 / 边框容器 —— 裸红描边 icon，放大补视觉重量 */
.v4 .rb-ic,.v4 .card-ic,.v4 .st-ic,.v4 .icard-ic{background:none;border:0;box-shadow:none;
  width:auto;height:auto;border-radius:0}
.v4 .rb-ic svg{width:30px;height:30px;color:var(--red)}
.v4 .card-ic svg{width:32px;height:32px;color:var(--red)}
.v4 .st-ic svg{width:30px;height:30px;color:var(--red)}
.v4 .icard-ic svg{width:30px;height:30px;color:#FF6B6B}
.v4 .rblock{grid-template-columns:40px 1fr;gap:16px}
.v4 .steps li{grid-template-columns:44px 1fr}
.v4 .band .rb-ic{background:none;border:0}
.v4 .band .rb-ic svg{color:#FF6B6B}
.v4 #midcta .rb-ic{background:none;border:0;width:auto;height:auto}
@media (hover:hover){
  .v4 .rblock:hover .rb-ic{transform:scale(1.12)}
  .v4 .steps li:hover .st-ic{transform:scale(1.12)}
}

/* ══ ⑭ v4 排版精修（阮总 08-21 规格表逐条）════════════════════
   lead 20/32/500 · Feature 标题 20/600 · Feature 正文 16.5/28/400 ·
   标题 #17191C · 正文 #6B7078 · icon 18–20px/1.5 stroke 红面积大幅降 */
.v4 .lead,.v4 .hero-lead{font-size:20px;line-height:32px;font-weight:500}
.v4 h3,.v4 .card h3,.v4 .steps h3,.v4 #midcta h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.v4 .u-d,.v4 .st-d{font-size:16.5px;line-height:28px;font-weight:400}
.v4 .bodytext{font-size:16.5px;line-height:28px;font-weight:400}
.v4 .foot-note,.v4 figcaption{font-weight:400}
/* icon：18–20px · 1.5px stroke · ⛔ 30px 大红块时代结束 */
.v4 .rb-ic svg,.v4 .st-ic svg{width:20px;height:20px;stroke-width:1.5}
.v4 .card-ic svg{width:20px;height:20px;stroke-width:1.5}
.v4 .icard-ic svg{width:20px;height:20px;stroke-width:1.5}
.v4 .rblock{grid-template-columns:30px 1fr;gap:14px}
.v4 .steps li{grid-template-columns:34px 1fr}
.v4 .kpi-ic{width:26px;height:26px}
.v4 .kpi-ic svg{width:22px;height:22px;stroke-width:1.5}
.v4 .statband li{grid-template-columns:30px minmax(0,1fr)}
.v4 .flab svg{stroke-width:1.5}

/* ══ ⑮ 调性对齐（阮总 08-21 整页稿）══════════════════════════ */
/* ① icon 再降：18px · 1.2 stroke（「icon 太粗」） */
.v4 .rb-ic svg,.v4 .st-ic svg,.v4 .card-ic svg,.v4 .icard-ic svg{width:18px;height:18px;stroke-width:1.2}
.v4 .kpi-ic svg{width:20px;height:20px;stroke-width:1.2}
.v4 .chip svg,.v4 .pill svg,.v4 .flab svg{stroke-width:1.2}
.v4 .rblock{grid-template-columns:28px 1fr}
.v4 .steps li{grid-template-columns:30px 1fr}
/* ② 按钮小巧化：Title Case · 14px/600 · 6px 圆角（⛔ 大写大块时代结束） */
.v4 .btn,.v4 .btn-o,.v4 .hdr-cta,.v4 .f-cta{text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:600;padding:12px 20px;border-radius:6px}
.v4 .btn svg,.v4 .btn-o svg{width:15px;height:15px}
/* ③ 菜单紧凑 Title Case */
.v4 .dm-menu > ul > li > a{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:600;padding:10px 12px}
/* ④ tiers 三卡（specs-table → 稿子三卡形态；数据一字不变） */
.v4 .tcard{display:flex;flex-direction:column;padding:20px 20px 18px!important}
.v4 .tc-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.v4 .tc-name{font:800 19px/1 var(--sans);color:var(--red);letter-spacing:-.01em}
.v4 .tc-ppm{font:700 13.5px/1 var(--sans);color:var(--ink)}
.v4 .tcard .fig{border-radius:8px;margin-bottom:14px}
.v4 .tcard .u-d{margin-top:0}
.v4 .tc-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font:600 13.5px/1 var(--sans);color:var(--ink)}
.v4 .tc-more:hover{color:var(--red)}
.v4 .tc-more svg{width:14px;height:14px;color:var(--red);transition:transform .25s}
.v4 .tc-more:hover svg{transform:translateX(3px)}
/* ⑤ midcta → 红底大条（稿子）：⛔ 不再用图底 */
.v4 #midcta{background:var(--red);border-radius:0}
.v4 #midcta .band-bg{display:none}
.v4 #midcta .band-bg::before,.v4 #midcta .band-bg::after{content:none}
.v4 #midcta h2,.v4 #midcta h3{color:#fff}
.v4 #midcta .lead{color:rgba(255,255,255,.92)}
.v4 #midcta .micro{color:rgba(255,255,255,.82)}
.v4 #midcta .u-d{color:rgba(255,255,255,.88)}
.v4 #midcta .btn{background:#fff;color:var(--red)}
.v4 #midcta .btn:hover{background:#F6E4E5}
.v4 #midcta .btn-o{border-color:rgba(255,255,255,.75);color:#fff}
.v4 #midcta .rb-ic svg{color:#fff}
.v4 #midcta .rblocks{border-top-color:rgba(255,255,255,.30)}

/* ══ ⑯ 稿子创意板块（scope 拼贴 · tiers 横卡 · 圈线 icon）═══════════ */
/* rblock 圈线 icon（稿子 One Takt 形态：细线圆圈 + 深色 icon，红只在 hover） */
.v4 .rblock .rb-ic{width:44px;height:44px;border:1.2px solid #C9CCD0;border-radius:50%;
  background:none;display:flex;align-items:center;justify-content:center;transition:border-color .25s}
.v4 .rblock .rb-ic svg{width:18px;height:18px;stroke-width:1.2;color:var(--ink);transition:color .25s}
.v4 .rblock{grid-template-columns:44px 1fr;gap:16px}
@media (hover:hover){
 .v4 .rblock:hover .rb-ic{border-color:var(--red);transform:none}
 .v4 .rblock:hover .rb-ic svg{color:var(--red)}}
.v4 .band .rblock .rb-ic,.v4 #midcta .rblock .rb-ic{border-color:rgba(255,255,255,.4)}
.v4 .band .rblock .rb-ic svg,.v4 #midcta .rblock .rb-ic svg{color:#fff}
/* scope 拼贴：左文右 1+2 图 */
.v4 .scope-grid{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:clamp(30px,3.6vw,64px);align-items:start}
.v4 .scope-l .bodytext{margin-top:0}
.v4 .scope-l .rblocks{margin-top:26px;grid-template-columns:1fr;gap:20px}
.v4 .scope-r .card{border:1px solid var(--line-3);border-radius:12px}
.v4 .sc-big{margin-bottom:14px}
.v4 .sc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.v4 .sc-tag{position:absolute;top:12px;left:12px;z-index:2;
  font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--red);
  background:rgba(255,255,255,.92);padding:6px 10px;border-radius:3px}
.v4 .scope-r figure{position:relative}
/* tiers 横卡（稿子：左名右图） */
.v4 .tier-cards .tcard{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:16px;align-items:center;padding:22px 22px!important;overflow:visible}
.v4 .tc-name{display:block;font:800 20px/1 var(--sans);color:var(--red);letter-spacing:-.01em}
.v4 .tc-ppm{display:block;margin-top:8px;font:700 14.5px/1 var(--sans);color:var(--ink)}
.v4 .tc-rule{display:block;width:34px;height:1px;background:var(--line);margin:14px 0}
.v4 .tcard .u-d{margin-top:0;font-size:14.5px;line-height:1.55}
.v4 .tc-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font:600 13.5px/1 var(--sans);color:var(--ink)}
.v4 .tc-more:hover{color:var(--red)}
.v4 .tc-more svg{width:14px;height:14px;color:var(--red);transition:transform .25s}
.v4 .tc-more:hover svg{transform:translateX(3px)}
.v4 .tc-fig{border-radius:8px}
@media (max-width:900px){
 .v4 .scope-grid{grid-template-columns:1fr}
 .v4 .tier-cards .tcard{grid-template-columns:1fr}
 .v4 .tc-fig{order:-1}}
/* midcta 红底：内容满宽 + 右侧 blueprint 线稿装饰（⛔ 右半大红空板） */
.v4 #midcta{position:relative;overflow:hidden}
.v4 #midcta .split{grid-template-columns:minmax(0,1fr);max-width:760px}
.v4 #midcta .rblocks{grid-template-columns:repeat(3,minmax(0,1fr))}
.v4 .cta-deco{position:absolute;right:clamp(-40px,2vw,60px);top:50%;transform:translateY(-50%);
  width:min(46%,560px);height:auto;pointer-events:none}
@media (max-width:1100px){.v4 .cta-deco{display:none}}

/* ── seam：timeline 驱动图上玻璃面板 ── */
.v4 .seam-tl button{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;
  padding:0;cursor:pointer;color:#E4E6E8;font:600 15px/1 var(--sans);text-align:left}
.v4 .seam-tl button i{font-style:normal;flex:none;width:31px;height:31px;border-radius:50%;
  border:1.2px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;
  font:700 11.5px/1 var(--sans);transition:border-color .25s,color .25s}
.v4 .seam-tl li.on button i{border-color:#FF6B6B;color:#FF6B6B}
.v4 .seam-tl li.on button span{color:#FF6B6B}
.v4 .seam-tl li.on button::after{content:"";flex:1;height:1px;background:rgba(255,107,107,.55);margin-left:6px}
.v4 .seam-panels{position:absolute;left:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);bottom:clamp(18px,2vw,30px)}
.v4 .sp{display:none;background:rgba(10,10,12,.52);border:1px solid rgba(255,255,255,.18);border-radius:12px;
  padding:clamp(18px,2vw,28px);-webkit-backdrop-filter:blur(28px) saturate(135%);backdrop-filter:blur(28px) saturate(135%)}
.v4 .sp.on{display:block}
html.js .v4 .sp.on{animation:spIn .34s cubic-bezier(.22,.61,.36,1)}
@keyframes spIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.v4 .sp-k{display:block;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:#FF6B6B;margin-bottom:10px}
.v4 .sp h3{color:#fff;font-size:18px;margin-bottom:8px}
.v4 .sp p{color:#D6D9DC;font:400 14.5px/1.65 var(--sans);margin:0}
.v4 .seam-hero-r{min-height:520px}
/* 禁 JS：面板全显平铺（正文不丢）；reduce：无切换动画 */
html:not(.js) .v4 .seam-panels{position:static}
html:not(.js) .v4 .sp{display:block;margin-top:10px}
@media (prefers-reduced-motion:reduce){html.js .v4 .sp.on{animation:none}}
@media (max-width:900px){
  .v4 .seam-hero-r{min-height:0}
  .v4 .seam-hero-r img{position:static;height:230px}
  .v4 .seam-panels{position:static;margin-top:-6px}}

/* ══ ⑰ 圆角退场（阮总 08-21）；斜切 divider 同日试过被判「违和」已撤——深浅交界直切 ═══ */
.v4 .hero,.v4 main > section.band{border-radius:0}
.v4 footer{position:relative;overflow:hidden}

/* ══ ⑱ figover 叠字族退场（阮总 08-21：「这种效果设计太丑了」）══════
   ⭐ 满宽大图不再叠字：图干净展示 + 下方工程图注条（红竖线 + 深色文字）。
   hover 展开 / 提示标 / scrim 全部作废。 */
.v4 .figover .fo-scrim,.v4 .figover .fo-hint{display:none!important}
.v4 .figover{overflow:visible;border-radius:0}
.v4 .figover .fig{border-radius:10px;overflow:hidden}
.v4 .figover .fo-cap{position:static;background:none;padding:14px 2px 0;max-width:none;
  clip-path:none!important;display:flex;align-items:flex-start;gap:12px;color:var(--ink)}
.v4 .figover .fo-rule{flex:none;width:3px;height:1.15em;border-radius:2px;margin:2px 0 0;
  background:var(--red);transition:none}
.v4 .figover .fo-clip,.v4 .figover.in .fo-clip{max-height:none!important}
.v4 .figover .fo-text,.v4 .figover.in .fo-text{color:var(--ink);font:600 15.5px/1.5 var(--sans);
  max-width:70ch;opacity:1;transform:none}
html.js .v4 .figover .fig img{transform:none}
@media (hover:hover){.v4 .figover:hover .fig img{transform:scale(1.03);transition:transform .7s}}

/* ── talk：表单在板块左栏（阮总 08-21）· 联系面板 icon 裸化（补漏） ── */
.v4 #talk .split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.v4 #talk .talk-form{max-width:none}
.v4 .cp-ic{background:none;border:0;width:auto;height:auto;border-radius:0}
.v4 .cp-ic svg{width:20px;height:20px;stroke-width:1.2;color:var(--red)}
.v4 .cp-row{grid-template-columns:30px 1fr}

/* ── wrong 三卡：默认露图，hover 展开正文（阮总 08-21「不然都被文字遮挡」）── */
@media (hover:hover){
 .v4 .icard::after{background:linear-gradient(180deg,rgba(16,16,16,0) 42%,rgba(16,16,16,.55) 70%,rgba(16,16,16,.95) 100%)}
 .v4 .icard::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(14,14,15,.84);
   opacity:0;transition:opacity .38s cubic-bezier(.22,.61,.36,1)}
 .v4 .icard:hover::before{opacity:1}
 .v4 .icard .u-d{max-height:0;opacity:0;overflow:hidden;margin:0;
   transition:max-height .45s cubic-bezier(.22,.61,.36,1),opacity .35s .06s,margin .45s}
 .v4 .icard:hover .u-d{max-height:220px;opacity:1;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
 .v4 .icard::before,.v4 .icard .u-d{transition:none}
 .v4 .icard .u-d{max-height:none;opacity:1;margin-top:10px}
 .v4 .icard::before{opacity:1}
}
/* about #unnamed 带（No customer names）：faq-bg-v3 蓝模组亮部压白字 ⇒ 罩单独加深 */
.v4 #unnamed .band-bg::after{background:rgba(16,16,17,.84)}

/* ══ ⑲ H-V4-02 · about hero「硬分屏」（阮总 08-22：每页 hero 必须不同）═════
   与 H-V4-01（index：满版图渐变融合+图上标注+KPI 玻璃条）的区分轴：
   融合 vs 硬切 · 图上元素 vs 纯净图 · 底部玻璃条 vs 左栏编号清单 */
.pg-about .hero .hero-bg{left:auto;right:0;width:56%;border-left:3px solid var(--red)}
.pg-about .hero .band-bg::before{background:none}   /* ⛔ 无渐变融合 —— 硬分屏 */
.pg-about .hero .band-bg::after{background:linear-gradient(0deg,rgba(8,8,8,.22),rgba(8,8,8,0) 40%)}
.pg-about .hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.pg-about .hero-in{padding:clamp(56px,5.6vw,92px) 0 clamp(48px,4.8vw,80px)}
.pg-about .hero h1{font-size:clamp(30px,3.2vw,44px)}
.pg-about .hero h1 .hl{background:none;color:#FF6B6B;padding:0}
/* 四差清单：红编号 01–04 竖排（⛔ 不是首页的 KPI 条） */
.pg-about .hero-side{border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:22px}
.pg-about .hero-side .hs-k{color:#FF6B6B;font:700 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.pg-about .hero-side .linemap{display:block;margin-top:16px;counter-reset:hd}
.pg-about .hero-side .linemap li{display:block;margin:0 0 12px;counter-increment:hd}
.pg-about .hero-side .linemap a{display:flex;align-items:baseline;gap:12px;color:#E4E6E8;
  font:600 14px/1.45 var(--sans)}
.pg-about .hero-side .linemap a:hover{color:#fff}
.pg-about .hero-side .linemap a::before{content:"0" counter(hd);flex:none;
  font:800 12px/1 var(--sans);color:#FF6B6B;letter-spacing:.05em}
.pg-about .hero-side .linemap svg{display:none}
@media (max-width:900px){
  .pg-about .hero .hero-bg{width:100%;border-left:0;opacity:.4}
}

/* ══ ⑳ 每页独特 hero · 第一批 4 页（登记 §12.3）═══════════════════ */
/* H-V4-03 · pack-assembly-line（08-22 改造：图带断开 → 满版垫底）：
   满版图 + 全宽文字 + 横排 chips + ⭐ 15 刻 station rail 卡（签名件） */
.pg-battery-pack-assembly-line .hero .band-bg::before{background:linear-gradient(90deg,
  rgba(6,6,6,.93) 0%,rgba(6,6,6,.88) 46%,rgba(8,8,8,.66) 72%,rgba(8,8,8,.45) 100%)}
.pg-battery-pack-assembly-line .hero-grid{grid-template-columns:1fr}
.pg-battery-pack-assembly-line .hero-txt{max-width:860px}
.pg-battery-pack-assembly-line .hero-in{padding-bottom:64px}
.pg-battery-pack-assembly-line .hero-side{grid-column:1;border-top:1px solid rgba(255,255,255,.18);
  margin-top:30px;padding-top:20px;background:none;border-left:0;border-right:0;border-bottom:0}
.pg-battery-pack-assembly-line .hero-side .linemap{display:flex;flex-wrap:wrap;gap:10px 30px}
.pg-battery-pack-assembly-line .hero-side .linemap li{font-size:13px}

/* H-V4-04 · module-assembly-line「镜像分屏」：图左 54% 硬切红右缘 + 文字右列 + 方点清单 */
.pg-battery-module-assembly-line .hero .hero-bg{left:0;right:auto;width:54%;border-right:3px solid var(--red)}
.pg-battery-module-assembly-line .hero .band-bg::before{background:none}
.pg-battery-module-assembly-line .hero .band-bg::after{background:linear-gradient(0deg,rgba(8,8,8,.22),rgba(8,8,8,0) 40%)}
.pg-battery-module-assembly-line .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.pg-battery-module-assembly-line .hero-txt{grid-column:2}
.pg-battery-module-assembly-line .hero-side{grid-column:2;grid-row:2;border-top:1px solid rgba(255,255,255,.18);
  margin-top:26px;padding-top:20px}
.pg-battery-module-assembly-line .hero-side .linemap li a::before{content:"";display:inline-block;
  width:8px;height:8px;background:var(--red);margin-right:11px;vertical-align:1px}
.pg-battery-module-assembly-line .hero-side .linemap svg{display:none}

/* H-V4-06 · pack-eol-testing「满版重扫 + 白实底卡条」（⛔ 非玻璃 —— 与 V4-01 区分） */
.pg-battery-pack-eol-testing .hero .band-bg::before{background:linear-gradient(90deg,
  rgba(6,6,6,.93) 0%,rgba(6,6,6,.88) 30%,rgba(8,8,8,.55) 52%,rgba(8,8,8,.18) 75%,rgba(8,8,8,.06) 100%)}
.pg-battery-pack-eol-testing .hero-side{background:#fff;border:0;border-radius:10px;
  box-shadow:0 10px 34px rgba(0,0,0,.28);padding:24px 26px;margin-top:36px;grid-column:1/-1}
.pg-battery-pack-eol-testing .hero-side .hs-k{color:var(--red)}
.pg-battery-pack-eol-testing .hero-side .linemap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.pg-battery-pack-eol-testing .hero-side .linemap li,.pg-battery-pack-eol-testing .hero-side .linemap a{color:var(--ink);font-weight:600}
.pg-battery-pack-eol-testing .hero-side .linemap a:hover{color:var(--red)}
.pg-battery-pack-eol-testing .hero-side .linemap svg{color:var(--red)}

/* H-V4-05 · manufacturing-equipment「全居中 + 卡组下挂」 */
.pg-battery-manufacturing-equipment .hero .band-bg::before{background:rgba(8,8,8,.86)}
.pg-battery-manufacturing-equipment .hero-grid{grid-template-columns:1fr}
.pg-battery-manufacturing-equipment .hero-txt{text-align:center;max-width:780px;margin:0 auto}
.pg-battery-manufacturing-equipment .hero .eyebrow{justify-content:center;display:flex}
.pg-battery-manufacturing-equipment .hero h1{margin-left:auto;margin-right:auto}
.pg-battery-manufacturing-equipment .hero-lead{margin-left:auto;margin-right:auto}
.pg-battery-manufacturing-equipment .cta-row{justify-content:center}
.pg-battery-manufacturing-equipment .hero-side{grid-column:1;margin:38px auto 0;max-width:980px;width:100%;
  border:0;background:none;padding:0;text-align:center}
.pg-battery-manufacturing-equipment .hero-side .linemap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.pg-battery-manufacturing-equipment .hero-side .linemap li{background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:16px 18px;font-size:13.5px;text-align:left}
@media (max-width:900px){
  .pg-battery-pack-eol-testing .hero-side .linemap,
  .pg-battery-manufacturing-equipment .hero-side .linemap{grid-template-columns:1fr}
  .pg-battery-module-assembly-line .hero .hero-bg{width:100%;opacity:.35;border-right:0}
  .pg-battery-module-assembly-line .hero-txt,.pg-battery-module-assembly-line .hero-side{grid-column:1}
}

/* 🚨 08-22 方向感知探针现形：品牌红 #C4131A 压深黑底实测 1.04:1 —— 旧探针只测白字方向，
   全站 hero 红 eyebrow 一直假绿。⭐ 深底红字统一亮红 #FF6B6B（同深色带 icon 规矩），
   白底上的红字（eol 白卡 hs-k 等）不受影响（特异度覆盖）。 */
.v4 .hero .eyebrow{color:#FF6B6B}
.v4 .hero .hs-k{color:#FF6B6B}
.pg-battery-pack-eol-testing .hero-side .hs-k{color:var(--red)}
/* equipment 三卡底加实（半透明卡在亮图区文字对比不稳） */
.pg-battery-manufacturing-equipment .hero-side .linemap li{background:rgba(12,12,14,.72)}

/* ══ ㉑ 每页独特 hero · 第二批 14 页（登记 §12.3；多窗 = hero-bg 本体+伪元素窗读继承变量）══ */

/* H-V4-07 conveyor「三层复合」：文字全宽顶 → 左清单 + 右下图块（红左上角线） */
.pg-battery-assembly-conveyor-system .hero .hero-bg{top:auto;bottom:0;left:auto;right:0;width:52%;height:74%;border-left:3px solid var(--red);border-top:3px solid var(--red)}
.pg-battery-assembly-conveyor-system .hero .band-bg::before{background:linear-gradient(180deg,rgba(8,8,8,.25),transparent 40%)}
.pg-battery-assembly-conveyor-system .hero-grid{grid-template-columns:1fr}
.pg-battery-assembly-conveyor-system .hero-txt{max-width:46%}
.pg-battery-assembly-conveyor-system .hero-side{max-width:44%;border-top:1px solid rgba(255,255,255,.18);margin-top:26px;padding-top:18px}
.pg-battery-assembly-conveyor-system .hero-side .linemap li{font-size:13px}

/* H-V4-08 capacity-planning「对称双图夹文」：左右 22% 竖图条（红内缘）+ 中央居中文字 */
.pg-battery-pack-line-capacity-planning .hero .hero-bg{width:22%;border-right:3px solid var(--red)}
.pg-battery-pack-line-capacity-planning .hero .band-bg::before{background:rgba(8,8,8,.35)}
.pg-battery-pack-line-capacity-planning .hero{position:relative}
.pg-battery-pack-line-capacity-planning .hero > .mirror{position:absolute;top:0;bottom:0;right:0;width:22%;
  background-image:var(--hero-d);background-size:cover;background-position:center;border-left:3px solid var(--red)}
.pg-battery-pack-line-capacity-planning .hero-grid{grid-template-columns:1fr}
.pg-battery-pack-line-capacity-planning .hero-txt{max-width:640px;margin:0 auto;text-align:center}
.pg-battery-pack-line-capacity-planning .hero .eyebrow{display:flex;justify-content:center}
.pg-battery-pack-line-capacity-planning .cta-row{justify-content:center}
.pg-battery-pack-line-capacity-planning .hero-side{max-width:640px;margin:26px auto 0;border-top:1px solid rgba(255,255,255,.18);padding-top:18px;text-align:center}
.pg-battery-pack-line-capacity-planning .hero-side .linemap{display:inline-block;text-align:left}

/* H-V4-09 factory-layout「腰带式」（08-22 阮总：图没垫在模块下 ⇒ 三明治作废）：
   图满版垫底 + 文字包在半透黑腰带横贯中部（上下露图，红上下缘线）——全站唯一腰带构图 */
.pg-battery-pack-line-factory-layout-utilities .hero > .mirror{display:none}
.pg-battery-pack-line-factory-layout-utilities .hero .band-bg::before{background:rgba(8,8,8,.22)}
.pg-battery-pack-line-factory-layout-utilities .hero-in{padding:clamp(120px,13vw,190px) 0}
.pg-battery-pack-line-factory-layout-utilities .hero-in > .wrap{background:rgba(7,7,8,.90);
  border-top:3px solid var(--red);border-bottom:3px solid var(--red);
  padding-top:clamp(36px,3.6vw,56px);padding-bottom:clamp(36px,3.6vw,56px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pg-battery-pack-line-factory-layout-utilities .hero-grid{grid-template-columns:1fr}
.pg-battery-pack-line-factory-layout-utilities .hero-txt{max-width:780px}

/* H-V4-10 busbar「大圆裁切」：文左 + 右侧大圆图（4px 红环） */
.pg-busbar-welding-station .hero .hero-bg{left:auto;right:6%;top:50%;bottom:auto;transform:translateY(-50%);
  width:min(32vw,430px);height:min(32vw,430px);border-radius:50%;border:4px solid var(--red);margin-top:-40px;
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
.pg-busbar-welding-station .hero .band-bg::before{background:none}
.pg-busbar-welding-station .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.66fr)}

/* H-V4-11 changeover「下沉式」（08-22 同因改造）：图满版垫底，scrim 上轻下重，
   文字沉在下半——上半露图，与 index 左右式 / equipment 居中重罩区分 */
.pg-cell-compatibility-and-changeover .hero .band-bg::before{background:linear-gradient(180deg,
  rgba(8,8,8,.22) 0%,rgba(8,8,8,.52) 14%,rgba(6,6,6,.91) 22%,rgba(6,6,6,.95) 100%)}
.pg-cell-compatibility-and-changeover .hero-in{padding-top:clamp(280px,30vw,420px);padding-bottom:56px}
.pg-cell-compatibility-and-changeover .hero-grid{grid-template-columns:1fr}
.pg-cell-compatibility-and-changeover .hero-txt{max-width:860px}
.pg-cell-compatibility-and-changeover .hero-side{border-top:1px solid rgba(255,255,255,.18);margin-top:24px;padding-top:16px}
.pg-cell-compatibility-and-changeover .hero-side .linemap{display:flex;flex-wrap:wrap;gap:10px 28px}

/* H-V4-12 cell-testing「三方窗竖叠」：右列一图三窗（top/center/bottom 段） */
.pg-cell-testing-sorting-station .hero .hero-bg{left:auto;right:0;top:6%;width:30%;height:26%;
  background-position:center top;border-radius:10px 0 0 10px;border-left:3px solid var(--red)}
/* 🚨 hero-bg 兼任 band-bg，其伪元素被 scrim 规则占用（inset:0 会撑满窗）⇒ 窗一律用 mirror DOM */
.pg-cell-testing-sorting-station .hero .mirror{position:absolute;right:0;width:30%;height:26%;
  background-image:var(--hero-d);background-size:cover;border-radius:10px 0 0 10px;border-left:3px solid var(--red)}
.pg-cell-testing-sorting-station .hero .mirror.m2{top:calc(6% + 26% + 22px);background-position:center center}
.pg-cell-testing-sorting-station .hero .mirror.m3{top:calc(6% + 52% + 44px);background-position:center bottom}
.pg-cell-testing-sorting-station .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}

/* H-V4-13 contact「表单风右挂卡」：文左 + 右白卡（三行清单 + 引导按钮） */
.pg-contact .hero .band-bg::before{background:linear-gradient(90deg,rgba(6,6,6,.92) 0%,rgba(6,6,6,.85) 40%,rgba(8,8,8,.45) 70%,rgba(8,8,8,.25) 100%)}
.pg-contact .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:center}
.pg-contact .hero-side{grid-column:2;grid-row:1;background:#fff;border:0;border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.35);padding:30px 30px 26px;margin:0}
.pg-contact .hero-side .hs-k{color:var(--red)}
.pg-contact .hero-side .linemap{margin-top:14px}
.pg-contact .hero-side .linemap li{display:block;margin-bottom:12px}
.pg-contact .hero-side .linemap li,.pg-contact .hero-side .linemap a{color:var(--ink);font-weight:600}
.pg-contact .hero-side .linemap svg{color:var(--red)}
.pg-contact .hero-txt{grid-column:1;grid-row:1}

/* H-V4-14 cylindrical「overlap 堆叠」：右大窗 + 右下小窗错位压角（红边） */
.pg-cylindrical-consumer-pack-line .hero .hero-bg{left:auto;right:3%;top:9%;width:32%;height:58%;
  border-radius:12px;background-position:center}
.pg-cylindrical-consumer-pack-line .hero .mirror{position:absolute;right:14%;bottom:9%;width:26%;height:34%;
  background-image:var(--hero-d);background-size:cover;background-position:right bottom;
  border-radius:12px;border:3px solid var(--red);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.pg-cylindrical-consumer-pack-line .hero h1{max-width:17ch}
.pg-cylindrical-consumer-pack-line .hero-txt{max-width:58%}
.pg-cylindrical-consumer-pack-line .hero .band-bg::before{background:none}
.pg-cylindrical-consumer-pack-line .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}

/* H-V4-15 energy-storage「icon 胶囊行」：文左 + 底部横排胶囊清单 + 满版轻扫 */
.pg-energy-storage-battery-pack-line .hero .band-bg::before{background:linear-gradient(90deg,rgba(6,6,6,.90) 0%,rgba(6,6,6,.80) 38%,rgba(8,8,8,.40) 66%,rgba(8,8,8,.15) 100%)}
/* 胶囊行与本页 statband 内容同源（314Ah/1P13S/1P52S 两处复读）⇒ 视觉隐藏，DOM 保留 */
.pg-energy-storage-battery-pack-line .hero-side{display:none}
.pg-energy-storage-battery-pack-line .hero-side .linemap{display:flex;flex-wrap:wrap;gap:10px}
.pg-energy-storage-battery-pack-line .hero-side .linemap li{background:rgba(10,10,12,.68);
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:9px 16px;font-size:12.5px}

/* H-V4-16 gantry「双列清单面板」：文左 + 右深色面板双列清单（9 项） */
.pg-gantry-laser-welding-machine .hero .band-bg::before{background:linear-gradient(90deg,rgba(6,6,6,.95) 0%,rgba(6,6,6,.91) 44%,rgba(8,8,8,.64) 72%,rgba(8,8,8,.40) 100%)}
.pg-gantry-laser-welding-machine .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}
.pg-gantry-laser-welding-machine .hero-side{grid-column:2;grid-row:1;background:rgba(12,12,14,.78);
  border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:26px;margin:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pg-gantry-laser-welding-machine .hero-side .linemap{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-top:12px}
.pg-gantry-laser-welding-machine .hero-side .linemap li{font-size:12.5px}
.pg-gantry-laser-welding-machine .hero-txt{grid-column:1;grid-row:1}

/* H-V4-17 gluing「深实底数字条」：文上 + 底部深实底红顶线横条（⛔ 非玻璃非白卡） */
.pg-liquid-cooling-plate-gluing-station .hero .band-bg::before{background:linear-gradient(180deg,rgba(6,6,6,.80),rgba(6,6,6,.90))}
.pg-liquid-cooling-plate-gluing-station .hero-grid{grid-template-columns:1fr}
.pg-liquid-cooling-plate-gluing-station .hero-txt{max-width:880px}
.pg-liquid-cooling-plate-gluing-station .hero-side{background:#131315;border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--red);border-radius:0;padding:22px 26px;margin-top:34px}
.pg-liquid-cooling-plate-gluing-station .hero-side .linemap{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:12px}
.pg-liquid-cooling-plate-gluing-station .hero-side .linemap li{font-size:12.5px}

/* H-V4-18 stacking「三横带序号窗」：左文（3 条清单）+ 右三横条图窗（同图三段 + 大红序号） */
.pg-module-stacking-pressing-station .hero .hero-bg{left:auto;right:0;top:7%;width:40%;height:25%;
  background-position:center top;border-radius:8px 0 0 8px}
.pg-module-stacking-pressing-station .hero .mirror{position:absolute;right:0;width:40%;height:25%;
  background-image:var(--hero-d);background-size:cover;border-radius:8px 0 0 8px}
.pg-module-stacking-pressing-station .hero .mirror.m2{top:calc(7% + 25% + 20px);background-position:center center}
.pg-module-stacking-pressing-station .hero > .mirror:not(.m2){top:calc(7% + 50% + 40px);background-position:center bottom}
.pg-module-stacking-pressing-station .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}

/* H-V4-19 fat-sat「纯排版大字 + 器件角标」：无满版图 · H1 加大 · 右下角小图卡 */
.pg-pack-line-fat-sat-acceptance .hero .hero-bg{left:auto;right:48px;top:16%;bottom:auto;width:320px;height:220px;
  border-radius:12px;border:1px solid rgba(255,255,255,.25);box-shadow:0 16px 44px rgba(0,0,0,.5)}
.pg-pack-line-fat-sat-acceptance .hero .band-bg::before{background:none}
.pg-pack-line-fat-sat-acceptance .hero h1{font-size:clamp(38px,4.4vw,62px);max-width:none}
.pg-pack-line-fat-sat-acceptance .hero-grid{grid-template-columns:1fr}
.pg-pack-line-fat-sat-acceptance .hero-txt{max-width:920px}
.pg-pack-line-fat-sat-acceptance .hero-side{max-width:56%;border-top:1px solid rgba(255,255,255,.18);margin-top:26px;padding-top:18px}

/* H-V4-20 terminal-addressing「斜角 mask」：图右 52% 左缘斜切（⚠️ 首例斜角 mask，交阮总小样） */
.pg-terminal-addressing-station .hero .hero-bg{left:auto;right:0;width:52%;
  clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.pg-terminal-addressing-station .hero .band-bg::before{background:linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.72) 46%,rgba(8,8,8,.30) 62%,rgba(8,8,8,.10) 80%)}
.pg-terminal-addressing-station .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.82fr)}

@media (max-width:900px){
  .pg-battery-pack-line-capacity-planning .hero > .mirror,
  .pg-battery-pack-line-factory-layout-utilities .hero > .mirror,
  .pg-module-stacking-pressing-station .hero > .mirror{display:none}
  .pg-busbar-welding-station .hero .hero-bg{position:absolute;inset:0;transform:none;width:100%;height:100%;border-radius:0;border:0;opacity:.35}
  .pg-cell-testing-sorting-station .hero .hero-bg,.pg-cylindrical-consumer-pack-line .hero .hero-bg,
  .pg-module-stacking-pressing-station .hero .hero-bg,.pg-pack-line-fat-sat-acceptance .hero .hero-bg{display:none}
  .pg-terminal-addressing-station .hero .hero-bg{width:100%;clip-path:none;opacity:.35}
  .pg-battery-assembly-conveyor-system .hero-side,.pg-pack-line-fat-sat-acceptance .hero-side{max-width:100%}
  .pg-battery-pack-line-factory-layout-utilities .hero-in{padding-top:230px;padding-bottom:230px}
  .pg-contact .hero-side,.pg-gantry-laser-welding-machine .hero-side{grid-column:1;grid-row:auto}
}
/* contact 白卡：清单纵排修正（父级 flex 特异度压过 li display）+ 卡内间距 */
.pg-contact .hero-side .linemap{display:block!important;margin-top:16px}
.pg-contact .hero-side .linemap li{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:15px}
.pg-contact .hero-side .linemap li:last-child{margin-bottom:0}
.pg-contact .hero-side{padding:30px 32px}
.pg-contact .hero-side .hs-k{font-size:12.5px}
.pg-terminal-addressing-station .hero h1{max-width:18ch}
/* terminal：警示行同样限宽避开斜切图区 */
.pg-terminal-addressing-station .hero-txt{max-width:56%}
/* cylindrical：hero-side 清单横铺压进主图窗（实测二维相交 389×153）⇒ 限左列宽 */
.pg-cylindrical-consumer-pack-line .hero-side{max-width:54%}

/* ── director_fix 2026-08-30 · 移动端 hero 兜底 ──
   实测 390px 下 21 页有 11 页 hero 仍是两栏（.pg-* 与 .v4 的页级 grid-template-columns 写在
   通用 ≤900px 单列规则之后，把它盖掉了；文字列被挤到 132–211px，每行只剩十来个字符）。
   本块必须保持在文件**最末**：同特异度靠后者胜，⛔ 不用 !important、⛔ 别往上挪。 */
@media (max-width:900px){
  .v4 .hero-grid,[class*="pg-"] .hero-grid{grid-template-columns:minmax(0,1fr)}
  .v4 .hero-txt,.v4 .hero-side,[class*="pg-"] .hero-txt,[class*="pg-"] .hero-side{grid-column:1;grid-row:auto;max-width:100%}
  .v4 .hero-txt{width:auto}
}

/* ── director_fix 2026-08-30 · 工位索引条目在手机上箭头掉行 ──
   .idxrail a 在窄屏被设成 flex-wrap:wrap，标题稍长时 margin-left:auto 的箭头就掉到下一行。
   标题允许换行、箭头固定在行尾。本块保持在文件最末。 */
.idxrail a{ flex-wrap:nowrap; }
.idxrail .ir-t{ flex:1 1 auto; min-width:0; }
.idxrail .ir-a{ flex:0 0 auto; }

/* ── director_fix 2026-08-30 · mid-cta 三个要点块在手机上收成单列（第三列曾被裁掉） ── */
@media (max-width:600px){
  .rblocks{ grid-template-columns:1fr; gap:14px; }
  .rblocks .rblock{ display:grid; grid-template-columns:28px 1fr; column-gap:12px; align-items:start; }
}
@media (max-width:600px){
  #midcta .rblocks, .v4 #midcta .rblocks, .mid-cta .rblocks{ grid-template-columns:1fr; gap:14px; }
}

/* ── director_fix 2026-08-30 · 审图共性修复（battery）── 本块保持在文件最末 */
/* ① .cmark 是 inline-flex，单元格里「文字 + <b> + 文字」被拆成三个 flex 项排成竖列 → 改块级 + 绝对定位图标 */
.tbl .cmark{ display:block; position:relative; padding-left:26px; }
.tbl .cmark svg{ position:absolute; left:0; top:.15em; }
/* ② 左右分栏：文字栏居中对着高图会留出上下大空档（空栏≠留白）→ 顶对齐 */
.split, .split-r{ align-items:start; }
/* ③ 图上脚注对比度 */
section.band .foot-note, .band .foot-note, [data-ctx="dark"] .foot-note{ color:#F0F1F2; text-shadow:0 1px 2px rgba(0,0,0,.6); }
@media (max-width:900px){
  /* ④ #talk / #midcta 等页级两栏规则写在通用单列规则之后 → 兜底强制单列 */
  .split, .split-r, .v4 #talk .split, .v4 #midcta .split{ grid-template-columns:minmax(0,1fr) !important; }
  .cpanel .cp-v, .cp-v a{ overflow-wrap:anywhere; word-break:normal; }
  .cpanel .cp-k{ white-space:nowrap; }
}
@media (max-width:600px){
  /* ⑤ 两列表在手机上换行显示；多列表保留横滑 + 右缘渐隐提示 */
  .tbl.cols-2{ min-width:0; table-layout:fixed; width:100%; }
  .tbl.cols-2 tbody th{ width:36%; }
  .tbl.cols-2 th, .tbl.cols-2 td{ padding:12px 12px; overflow-wrap:anywhere; }
  .tbl.cols-2 .big{ white-space:normal; font-size:17px; }
  .tbl:not(.cols-2){ min-width:600px; }
  .tbl:not(.cols-2) th, .tbl:not(.cols-2) td{ padding:12px 12px; font-size:14px; }
  .scroll{ position:relative; }
  .scroll::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none; background:linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0)); border-radius:0 var(--rad) var(--rad) 0; }
}
/* ⑥ 半栏里的链接卡/两列表/八步卡：不在 50% 栏里再切两列 */
.split .navlist, .split-r .navlist{ grid-template-columns:1fr; }
.roster .rs-t{ flex:1 1 auto; min-width:0; }
.split .tbl.cols-2, .split-r .tbl.cols-2{ min-width:0; table-layout:fixed; width:100%; }
.split .tbl.cols-2 th, .split .tbl.cols-2 td, .split-r .tbl.cols-2 th, .split-r .tbl.cols-2 td{ padding:14px 14px; overflow-wrap:anywhere; }
.split .scroll, .split-r .scroll{ position:relative; }
.split .scroll::after, .split-r .scroll::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:34px; pointer-events:none; background:linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0)); border-radius:0 var(--rad) var(--rad) 0; }
.split .scroll:has(.cols-2)::after, .split-r .scroll:has(.cols-2)::after{ display:none; }
/* ⑦ 首页产线图在手机上横滑 + 右缘提示 */
@media (max-width:900px){
  .stage{ position:relative; }
  .stage::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:40px; pointer-events:none; background:linear-gradient(to left,rgba(247,247,247,.95),rgba(247,247,247,0)); }
}
/* ⑧ 手机上 hero 文字块加半透明底，背景渲染图里的标注不再透到标题后面 */
@media (max-width:600px){
  .v4 .hero-txt{ background:rgba(10,10,10,.5); padding:18px 16px; border-radius:12px; backdrop-filter:blur(2px); }
}
/* ⑨ hero 底部数字条：手机上数字允许换行、字号收一档，右格不再被裁 */
@media (max-width:600px){
  .hero .wrap > ul .s-n, .s-n{ white-space:normal; font-size:clamp(20px,5.6vw,25px); overflow-wrap:anywhere; }
}