/* ==================================================================
   首睿工控官网 · 页面级增量样式（v1）
   ------------------------------------------------------------------
   用途：补 `style.css` 里没有的板块 —— 产品详情页概览区 / 末尾 CTA /
        新闻列表与详情页正文。
   约定：**只做增量，不覆盖、不改写 style.css 的任何既有规则**。
        所有色值、圆角、间距一律引用 style.css 已定义的 :root 变量，
        保证两套文件视觉同源（设计稿口径见《画布落版施工图》§4）。
   口径：内容宽 1280（.in），栅格间距 18，卡片 radius 16 / 描边 1px。
   ================================================================== */

/* ---------- [hidden] 显隐基线 ----------
   JS 就地显隐（file:// 预览）用 el.hidden 开关条目；.nitem 等组件自带
   的 display:flex/grid 是作者样式，层级恒高于浏览器对 [hidden] 的默认
   display:none —— 不补这条，hidden=true 也照样显示（2026-09-24 业主
   截图实锤：「展会活动」筛选后列表仍整屏可见，DOM 属性对了视觉没动）。 */
[hidden]{display:none!important}

/* ---------- 浅底面包屑条（产品详情页用；Banner 内的 .crumb 仍走 style.css） ---------- */
.crumbbar{background:#fff;border-bottom:1px solid var(--line)}
.crumbbar .in{display:flex;align-items:center;min-height:48px}
.crumbbar .crumb{color:var(--sub);font-size:13px}
.crumbbar .crumb a{color:var(--sub)}
.crumbbar .crumb a:hover{color:var(--blue)}
.crumbbar .crumb span{margin:0 7px;opacity:.45}
.crumbbar .crumb b{color:var(--ink);font-weight:600}

/* Banner 内面包屑：当前页用白字，与面包屑链路的可点项区分开 */
.ban .crumb b{color:#fff;font-weight:600}

/* 分页器：<a> 元素的禁用态与省略号（style.css 只定义了 button 的 [disabled]） */
.pager .pg[aria-disabled="true"]{opacity:.4;cursor:not-allowed;pointer-events:none}
.pager .pg.ell{border:0;background:none;pointer-events:none;opacity:1}

/* ---------- 产品概览区 ---------- */
/* ★ 第一列是固定宽度时必须写 px，不能写 fr ——
   写成 `minmax(0,540fr) minmax(0,1fr)` 会构成 540:1 的比例，
   把右侧栏压成 2px，栏内文字逐字竖排、整页被撑高。 */
.pov{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:44px;align-items:start}

/* 产品图库：主图 1 张 + 缩略图行，合成**一张卡**（2026-09-24 业主问题6：
   「四个相框没有和主图组合起来」—— 原先两块各自描边、中间留 12px 缝，看着像散的）。
   相册素材（assets/uploads/<slug>-N.*）存在时 bp_detail 渲染真缩略图，
   点击切换主图（app.js）；无素材时不渲染缩略图行（.gal.solo），主图恢复完整圆角。 */
.gal{display:grid;gap:0}
/* ★ 2026-09-24 业主问题3：详情页主图位改正方形，大框 540×540。
   ★ 2026-10-28 业主第 4 条：**主图不再缩到 50%**，铺满大框（见文件尾
     `.gal .main img` 的覆盖，并把 object-fit 改成 contain 以免裁掉机身）。 */
.gal .main{position:relative;overflow:hidden;border:1px solid var(--line);border-bottom:0;
  border-radius:16px 16px 0 0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDF3FA 0%,#E1EAF4 62%,#D7E3F0 100%);aspect-ratio:1/1}
.gal.solo .main{border-bottom:1px solid var(--line);border-radius:16px}
.gal .main::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:230px;height:132px;border-radius:10px;border:1.5px solid #A6BED8;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.44));box-shadow:0 14px 32px rgba(11,42,80,.09)}
.gal .main::after{content:"";position:absolute;left:50%;top:calc(50% + 58px);transform:translateX(-50%);width:150px;height:8px;border-radius:4px;background:#C2D3E4}
.gal .main u{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#9FB4CB;text-decoration:none}
/* ★ 业主追加（2026-09-24）：缩略格固定 64×64（约原 122 的一半），auto-fill 从左排，
   几张排几格——不再固定 4 列（固定列会把减半后的格子又拉大）。 */
.gal .thumbs{display:grid;grid-template-columns:repeat(auto-fill,64px);justify-content:flex-start;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:0 0 16px 16px;padding:10px}
.gal .thumbs i{display:block;aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;background:linear-gradient(160deg,#F2F7FC,#E4EDF6);position:relative;overflow:hidden;cursor:pointer}
.gal .thumbs i::before{content:"";position:absolute;inset:22px 26px;border-radius:4px;border:1.2px solid #B6CBE0;background:rgba(255,255,255,.6)}
.gal .thumbs i.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,77,178,.10)}
.gal .thumbs i img{width:100%;height:100%;object-fit:cover;display:block}
/* 有真图的容器不再画占位插画（2026-09-24 业主问题3）。
   旧浏览器不识别 :has() 时，img 的 position:relative;z-index:1 也能把它盖在下面。 */
.pcard .pic:has(img)::before,.mc-img:has(img)::before,.mc-img:has(img)::after,
.gal .main:has(img)::before,.gal .main:has(img)::after,
.gal .thumbs i:has(img)::before{display:none}

/* 产品信息栏 */
.pinfo .model{font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--blue);font-weight:700}
.pinfo h1{margin-top:9px;font-size:32px;line-height:1.3;letter-spacing:-.02em;font-weight:700;max-width:none}
/* ★ 2026-11-10：型号移进 h1（原来型号在 .model 里、h1 只有品类名，284 款详情页的 H1
   有 237 款彼此重复，搜「IPC-2300 工控机」时页面最大标题里根本没有型号）。
   视觉上不变 —— span 仍是「mono 蓝字小号另起一行」，与原来的 .model 行等价；
   语义上 h1 的文本变成「IPC-2300 2U工控机」，型号进了 H1。 */
.pinfo h1 .h1m{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  color:var(--blue);font-weight:700;margin-bottom:9px;line-height:1.4}
.pinfo .lead{color:#37475C;margin-top:14px;max-width:none;font-size:15px}

/* 核心亮点组（2×2） */
.hl{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;border-top:1px solid var(--line);padding-top:20px}
.hl>div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start}
.hl svg{width:18px;height:18px;margin-top:2px;flex:none}
.hl p{font-size:13.5px;line-height:1.72;color:#3B4A5E}

/* 产品 CTA + 认证标识 */
.pcta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.certline{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.certline em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9AABC0;letter-spacing:.08em;margin-right:2px}

/* 参数表：用 <th scope="row"> 承载参数名（语义化，AI 引擎可直接抽「键→值」），
   视觉与设计稿的 td.k 完全一致 */
/* ★ 2026-10-29 业主 8 条：参数名（「显示」「系统」这类）与右侧多行参数值
   **上下居中**对齐 —— 原来是 top，右侧内容三四行时标签贴在头一行上，
   视觉上像是错行。td.k（旧模板）与 th.k（语义化模板）两处同改。 */
/* ★ 2026-10-29 业主 8 条（补）：语义化模板用的是 `<th scope="row">显示</th>`
   ——**没有 `.k` 类**，宽度由 `<colgroup><col class="k">` 给。上面那条 th.k
   管不到它，得按 scope 属性再补一条，否则「显示」仍是贴顶的。 */
table.spec th[scope="row"]{vertical-align:middle}
table.spec th.k{color:#68798F;width:170px;font-weight:400;font-size:14px;text-align:left;padding:11px 16px;border-top:1px solid var(--line);vertical-align:middle}
table.spec caption.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 参数组卡：产品详情页「技术参数」板块（画布 P3 · 节点 6:516） ----------
   改这条之前先读画布：组标题行 #F4F6F9 / 15px SemiBold / 上下 15、左右 20；
   参数行上下 13、左右 20；参数名列定宽 180 + 24 间距（= 业主第 17 条「参数列左边距」，
   原来是 170 宽 + 左右 16）；偶数行 #FAFBFD 斑马；**无「项目 / 规格」表头行**。
   ⚠️ 只服务详情页的 .sg-t；table.spec 仍被待审定页等 5 类页面复用，两条样式不合并。 */
.sg{background:#fff;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden}
.sg+.sg{margin-top:18px}
.sg-h{background:#F4F6F9;padding:15px 28px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.sg-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.sg-t th,.sg-t td{box-sizing:border-box;text-align:left;vertical-align:top;padding:13px 0}
/* ★ 2026-10-29 业主 8 条：详情页「技术参数」里，参数名（左列）与右侧多行参数值
   **上下居中**。原来继承 top，右侧内容三四行时「显示」贴在头一行上，看着像错行。
   只作用于行标题（scope=row），组标题行不受影响。 */
.sg-t th[scope="row"]{vertical-align:middle}
/* ★ 列宽必须写在 <col> 上，不能写在 th 上：table-layout:fixed + border-collapse 下，
   Chrome 对首行单元格的 `width` 会被忽略（实测 th 宽 224 仍渲成 599，两张卡都在，
   只有 <col> 生效）。别"简化"回 th{width}。 */
.sg-t col.k{width:224px}
/* ★ 2026-11-05 业主追加：「红框内字号大小一致，都为 14px；所有这类问题都如此改」。
   即参数名（键列）也要 14px —— 上一版把键列留 13px 做层级弱化，业主明确否掉。
   现在层级只由**颜色 / 字重**承担（键 #6B7280 灰 500、值 #232E3E 深），
   字号一律 14px：表级、th、td 三处都写死，谁都不许再继承到 13px。 */
.sg-t th{padding-left:28px;padding-right:28px;font-size:14px;font-weight:500;color:#6B7280}
/* 值列 14px / #232E3E（业主 2026-11-05 上一条）；line-height 21 → 22 是 14px 的行气。 */
.sg-t td{padding-left:6px;padding-right:24px;font-size:14px;line-height:22px;color:#232E3E;word-break:break-word}
.sg-t tbody tr:nth-child(even){background:#FAFBFD}
/* 表头说明只留语义（屏幕阅读器 / 抓取），不占视觉 —— caption 默认是可见的 */
.sg-t caption.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 名词解释区（<dl> 承载，GEO 抽取用） */
.dlbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.deflist{display:grid;gap:14px}
.deflist dt{font-size:14px;font-weight:600}
.deflist dd{margin-top:4px;font-size:14px;color:#37475C;line-height:1.85}

/* ---------- 间距工具类（替代行内 style） ---------- */
/* ★ 2026-11-04 巡检补 `.mt12`：渲染器（`_tools/bp_pages_b.py` 的资料下载表）在用
   `class="tblwrap mt12"`，但这里从来没有定义过 —— 属于「HTML 用了、CSS 没有」的真缺口。
   视觉上当时没坏，是因为那条 `<div class="dl-bar mt30">` 与表格**相邻**，被下面的
   `.dl-bar + .tblwrap{margin-top:20px}`（特异性 0,2,0）兜住了；一旦中间插一个元素，
   20px 立刻消失、表格贴住标题栏，而且没有任何闸门会红（class 名写错不报错）。
   补 12px 是补全工具类清单，不改观感（相邻规则特异性更高，仍然赢）。 */
.mt12{margin-top:12px}
.mt14{margin-top:14px}
.mt18{margin-top:18px}
.mt30{margin-top:30px}
/* 行内分隔点（如下载卡里「主文案 · 补充说明」之间的间隔） */
.sep{margin:0 6px;opacity:.5}

/* 描边态按钮（浅色底上用） */
.btn.ol{border-color:#C9DEF6;color:var(--blue)}
.btn.ol:hover{background:var(--bl)}

/* ---------- 卖点 / 场景：卡内图标 ---------- */
.ico{width:38px;height:38px;border-radius:11px;background:var(--bl);display:flex;align-items:center;justify-content:center;flex:none}
.ico svg{width:19px;height:19px}
/* 2026-11-02：图标可以来自后台「图标库」（上传的图片），尺寸与内置矢量严格一致，
   换图不改变卡片高度与栅格节奏 —— 与首页 `.adv-ico img` 同一口径。 */
.ico img{width:19px;height:19px;object-fit:contain;display:block}
.card h3{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-top:15px}
.card p.d{margin-top:9px;font-size:13.5px;line-height:1.78;color:var(--sub)}
/* ---------- 产品详情页「关键能力 / 应用场景」卡：裸线性图标 ----------
   ★ 2026-11-11 业主第 5 批（拿参考图比对）：原先是「38px 淡蓝圆角方块 + 19px 对勾」，
     六张卡一个样，图标不承载任何信息。参考图是**各条独立的线性图标**（约 30px、
     无底框、蓝色描边），卡片描边 + 极淡投影，图标与标题之间留得开。
   只作用于 `.card.feat`（`_tools/bp_detail.py › _card` 产出）；`.ico` 本体不动 ——
   它还挂在联系页、系列页、首页共 281 个页面的 icocard 上。 */
.card.feat{padding:24px;box-shadow:0 1px 2px rgba(10,22,40,.045)}
/* ★ `align-self:flex-start` 不能省：`.card` 是 flex column，`.ico` 作为 flex item
   默认被拉满整行宽，`justify-content:center` 就把图标顶到了卡片正中间 —— 而参考图
   的图标是**贴左上角**的（原来 38px 方块有固定宽高，撑不开，所以这个坑没暴露）。 */
.card.feat .ico{width:auto;height:auto;border-radius:0;background:none;color:var(--blue);
  align-self:flex-start;justify-content:flex-start}
.card.feat .ico svg{width:30px;height:30px}
.card.feat .ico img{width:30px;height:30px}
.card.feat h3{margin-top:20px}
.card.feat p.d{margin-top:10px}

/* ---------- 下载与支持条 ---------- */
.dlbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin-top:18px}
.dlbar .grp{display:flex;align-items:center;gap:14px;min-width:0}
.dlbar .t b{display:block;font-size:15.5px}
.dlbar .t span{display:block;margin-top:4px;font-size:13.5px;color:var(--sub);line-height:1.7}
/* 2026-11-10：`.t span` 是 display:block，把里面那颗「·」分隔点也块级化了 ——
   窄屏下「·」单独占一行（业主看着像一个孤零零的句号）。把分隔点和
   「提交后 1 个工作日内发送」包成的 .nb 恢复行内 + 不拆行，两者永远同排。 */
.dlbar .t .sep,.dlbar .t .nb{display:inline;margin-top:0}
.dlbar .t .nb{white-space:nowrap}

/* ---------- 末尾 CTA 渐变卡（对应画布 6:2022） ---------- */
.endcta{position:relative;overflow:hidden;border-radius:16px;padding:36px 40px;color:#fff;background:linear-gradient(118deg,#014DB2 0%,#00296E 55%,#001645 100%);display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.endcta::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.5) 55%,#000);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.5) 55%,#000)}
.endcta>div{position:relative;z-index:2}
.endcta b{display:block;font-size:22px;line-height:1.42;letter-spacing:-.01em}
.endcta p{margin-top:9px;font-size:14.5px;line-height:1.8;color:#C7DAF0;max-width:720px}
.endcta .act{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ---------- 新闻列表页 ---------- */
.catbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.catbar .cat{font-size:14px;padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.30);color:#CFE0F5;background:none}
.catbar .cat:hover{border-color:#fff;color:#fff}
.catbar .cat.on{background:#fff;border-color:#fff;color:var(--ink);font-weight:600}

/* ★ 同上：焦点图列固定 560px，正文占剩余（写 fr 会让标题竖排） */
.nfocus{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:36px;align-items:center}
.nfocus .pic{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#EDF3FA,#D7E3F0);aspect-ratio:16/9}
.nfocus .pic u{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;color:#9FB4CB;text-decoration:none}
.nfocus h2{margin-top:14px;font-size:25px;line-height:1.42;letter-spacing:-.02em;max-width:none}
.nfocus h2 a:hover{color:var(--blue)}
.nfocus p{margin-top:12px;font-size:14.5px;line-height:1.85;color:#37475C}
.nfocus .go{margin-top:16px;font-size:14.5px;color:var(--blue);font-weight:600}
.nfocus .go:hover{text-decoration:underline}
.nfocus .ameta{margin-top:16px}
/* ★ 2026-10-30 业主第 5 条红框①：焦点卡左上角的实心药丸角标
   （文案由构建器给：后台只剩「设为焦点」一个开关，统一写「焦点」） */
.nfocus .npill{display:inline-block;background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:.04em;
  padding:5px 14px;border-radius:999px}

/* ---------- 焦点轮播（多篇「设为焦点」时自动启用） ----------
   结构：.nfocus-car 里并排放 N 个 .nfocus.nslide，脚本把非当前张 hidden。
   ★ 渐进增强：HTML 里**没有**任何 hidden，脚本未运行时所有焦点卡竖直堆叠、
     内容一条不少（只是没有切换）；脚本给容器加 `.is-ready` 后才收成单屏。
   ★ 控制条同理，默认 `display:none` —— 无 JS 时不出现「点了没反应」的按钮。 */
.nfocus-car .nslide+.nslide{margin-top:34px}
/* ★ 2026-10-30 业主：指示条改成**首页首屏轮播那种** —— 压在图上，左下圆点、
   右下「03 / 05」页码；两侧的圆形翻转按钮一律不要（首页那边也同步去掉了）。
   默认 `display:none`，脚本给容器加 `.is-ready` 才显形（无 JS 不出现死按钮）。 */
.nbar{display:none}
.nfocus-car.is-ready .nbar{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px}
/* 压暗垫层：白点压在浅色实拍上也看得清（首页是 .car-shade，这里跟着图走） */
.nbar::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  pointer-events:none;background:linear-gradient(180deg,rgba(0,22,69,0),rgba(0,22,69,.62))}
.nbar .ndots{display:flex;align-items:center;gap:7px}
.nbar .nd{width:6px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.5);transition:width .3s,background .3s}
.nbar .nd:hover{background:rgba(255,255,255,.85)}
.nbar .nd.on{width:20px;background:#fff}
.nbar .nd:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 页码兼作暂停/继续（WCAG 2.2.2 要有停的手段，但视觉上与首页那串数字一致） */
.nbar .ncount{display:flex;align-items:baseline;gap:6px;padding:0;border:0;background:none;
  font-family:var(--mono);font-size:14px;color:#C9DEF6;cursor:pointer}
.nbar .ncount b{font-size:16px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.nbar .ncount:hover{color:#fff}
.nbar .ncount.is-paused{opacity:.7}   /* 暂停后压暗一点，作为唯一的状态反馈 */
.nbar .ncount:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* 占位图（还没传实拍）时，把「待替换实拍」标签抬到指示条上面，别叠在一起 */
.nfocus .pic.has-nbar u{bottom:64px}
/* 切换淡入。`prefers-reduced-motion` 下不加动画（但**仍自动轮播**，见脚本：
   reduce 关的是动画，不是内容 —— 2026-10-30 业主反馈「不自动轮播了」后改的）。 */
@media (prefers-reduced-motion:no-preference){
  .nfocus-car.is-ready .nslide.is-on{animation:nfade .45s ease both}
}
@keyframes nfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.nlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nitem{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;height:100%}
.nitem .cat{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--blue);background:var(--bl);border-radius:999px;padding:3px 10px;align-self:flex-start}
.nitem h3{margin-top:14px;font-size:16px;line-height:1.52;letter-spacing:-.01em}
.nitem h3 a:hover{color:var(--blue)}
.nitem p{margin-top:10px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.nitem .meta{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:12.5px;color:#9AABC0;display:flex;gap:12px;flex-wrap:wrap}

/* 新闻详情：正文排版 */
.art{max-width:none}
.art .sh{margin-bottom:16px}
.art .sh h1{font-size:29px;line-height:1.42;letter-spacing:-.02em;font-weight:700;max-width:none}
/* 元信息行（正文页顶栏 + 列表页焦点新闻共用） */
.ameta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--sub)}
.art .ameta{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}
.art h2{margin:34px 0 12px;font-size:20px;line-height:1.5;letter-spacing:-.01em}
.art h3{margin:24px 0 10px;font-size:16.5px;line-height:1.5}
.art p{margin:12px 0;font-size:16px;line-height:1.95;color:#22314A}
.art ul,.art ol{margin:12px 0;padding-left:22px;display:grid;gap:8px}
.art li{font-size:14.5px;line-height:1.85;color:#3B4A5E}
.art blockquote{margin:18px 0;border-left:3px solid var(--blue);background:var(--bl);border-radius:0 10px 10px 0;padding:14px 20px}
.art blockquote p{margin:0;font-size:14.5px;color:#22314A}
.art figure{margin:22px 0}
.art figure .ph{aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,#EDF3FA,#D7E3F0);position:relative;overflow:hidden}
.art figure .ph u{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;color:#9FB4CB;text-decoration:none}
.art figcaption{margin-top:9px;font-size:13px;color:var(--sub);text-align:center}
.art .kw{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;border-top:1px solid var(--line);padding-top:20px}
.art .kw em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:#9AABC0;letter-spacing:.08em;align-self:center;margin-right:2px}

/* ================= 产品列表页（对应画布 P2 6:2） ================= */

/* 筛选卡片：头部（标题 + 结果数 + 已选条件 + 重置）+ 5 行筛选 */
/* ★ 2026-11-11 业主第 8 批第 1 条：这张卡是**筛选条件跳转的落点**（`id="filter"`）。
   点任一 `.fopt` 后浏览器直接停在卡顶，`scroll-margin-top` 给 sticky 页头（约 68px）
   留出高度 —— 不加的话「产品筛选」标题和第一行条件会被页头压住半行。
   值与 `.sec[id]` 一致，全站 scroll-margin 只有这两个档位。 */
.fcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;scroll-margin-top:84px}
.fhead{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.fhead .ftitle{font-size:16px;font-weight:700}
.fhead .fcount{margin-left:10px;font-size:13.5px;color:var(--sub)}
.fhead .fops{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fsel{background:var(--bl);color:var(--blue);border-radius:999px;padding:5px 14px;font-size:13px}
/* ★ 2026-11-09 业主第 1 条：「重置筛选」从 `<button>` 改成**真链接**
   （它原来没有任何 onclick，点了没反应）。补 text-decoration:none ——
   否则浏览器会给它加一条下划线，和旁边「已选」胶囊的观感对不上。 */
.freset{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--sub);background:none;border:0;padding:0;cursor:pointer;font-family:inherit;text-decoration:none}
.freset:hover{color:var(--blue)}
.freset svg{width:13px;height:13px;flex:none}

.frow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.frow:first-of-type,.fhead+.frow{border-top:0;padding-top:16px}
.flab{font-size:14px;font-weight:600;line-height:2.2}
.fopts{display:flex;flex-wrap:wrap;gap:8px}
.fopt{font-size:13.5px;line-height:1;padding:8px 14px;border-radius:8px;border:1px solid var(--line);color:var(--sub);background:#fff}
.fopt:hover{border-color:#C9DEF6;color:var(--blue)}
.fopt.on{background:var(--bl);border-color:#C9DEF6;color:var(--blue);font-weight:600}

/* 结果工具栏：左计数、右排序与视图切换 */
.rtbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rtbar .rt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.01em}
.rtbar .rt span{display:block;margin-top:6px;font-size:13.5px;color:var(--sub)}
.rtbar .tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sel{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 14px;font-size:13.5px;color:#37455B}
.sel svg{width:10px;height:10px;flex:none}
.vsw{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.vsw i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:#47586E}
.vsw i svg{width:14px;height:14px}
.vsw i.on{background:var(--blue);color:#fff}

/* ================= 产品卡（列表页 3×3 栅格 / 系列页 3×2 栅格共用） =================
   ★ 2026-09-24 业主问题2：图位由固定高度改**正方形**（aspect-ratio:1，
     随栅格列宽自适应；固定高度的三处旧规则一并移除）。 */
.plist,.mrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}

.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;height:100%}
/* ★ flex-shrink:0：卡片等高栅格里，文字多的卡会把行撑高、反压图位——
   不锁住的话 aspect-ratio 会被压缩回长条（2026-09-24 业主问题2 实测）。
   ★ 2026-09-24 业主追加：全站图位统一「正方形且边长减半」——容器 2:1，
     照片内嵌为等高正方形居中（img 覆盖规则在 style.css 尾部统一收口），
     可见照片范围 = 列宽的 1/2 正方形（376→188）。 */
.pcard .pic{position:relative;overflow:hidden;aspect-ratio:2/1;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#EDF3FA 0%,#E1EAF4 62%,#D7E3F0 100%)}
.pcard .pic::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);width:128px;height:74px;border-radius:8px;border:1.4px solid #A6BED8;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.44));box-shadow:0 10px 24px rgba(11,42,80,.08)}
.pcard .pic u{position:absolute;left:14px;bottom:11px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9FB4CB;text-decoration:none}
.pcard .bd{padding:20px 22px 22px;display:flex;flex-direction:column;height:100%}
.pcard .id{font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--blue)}
.pcard .nm{margin-top:7px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.pcard .sp{margin-top:9px;font-size:13.5px;line-height:1.72;color:var(--sub);
  /* 2026-11-10：卡片规格行只放一行（构建器已在「·」边界截成一句话，
     这里是兜底 —— 万一某条摘要单段超宽，省略号收尾而不是折成两三行）。 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--blue)}
.pcard .go:hover{text-decoration:underline}

/* ---- v13.21 业主第 3 条：产品卡图位可点 + 悬浮放大 ------------------------
   业主原话：「鼠标浮动到图片上，图片有浮动放大效果，鼠标移走，图片恢复；
   鼠标点击图片红框内都可和"查看详情页"一样跳转到下一个页面」。
   实现：模板（bp_pages_f / bp_pages_g 的 pcard）把图位整体包进
   `<a class="piclink" href="型号页">` —— 红框区 = .pic 整块，点击即跳详情页；
   放大只动 .pic 里的 img（.pic 自带 overflow:hidden，放大不会溢出圆角），
   悬浮进入放大（2026-10-27 业主第 22 条：「放大幅度再大一些」，1.06 → **1.12** ——
   再大就切进图片主体、看不清全貌了；容器 overflow:hidden 挡住溢出）。
   移开 350ms 回弹。没有实拍图的占位卡只获得"可点"，不凭空放大一个占位框。 */
.pcard .piclink{display:block;text-decoration:none}
.pcard .piclink:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pcard .piclink .pic img{transition:transform .35s ease;will-change:transform}
.pcard .piclink:hover .pic img,
.pcard .piclink:focus-visible .pic img{transform:scale(1.2)}
/* ★ 2026-11-11 业主 bug 单：「鼠标滑动上后，图片放大后会显示不全」。
   ★ 2026-11-12 业主定稿口径（推翻第一版 83.33% 缩小方案）：
   放大幅度 1.2 不变、图框（.pic 容器与卡片边框）不变、照片基准也不变
   （仍 height:100%，静止时上下贴边）；悬停放大后**允许溢出边框、
   溢出部分不隐藏** —— 图片放大后完整可见，哪怕伸出卡片外面。
   实现：transform 溢出本会被 .pic 与 .pcard 两层 overflow:hidden 裁掉，
   悬停/聚焦时用 :has 临时解除两层裁剪（静止态立即恢复原样）；
   .pic 自带顶部圆角 16px 与卡片一致，解除裁剪后圆角外观不变；
   .piclink 抬 z-index 保证溢出部分盖住相邻卡片而不是被压在下面。
   只限带 .piclink（可点 + 可放大）的卡片，详情页主图（.gal .main）
   与新闻图不参与。 */
.pcard:has(.piclink:hover),
.pcard:has(.piclink:focus-visible),
.pcard .piclink:hover .pic,
.pcard .piclink:focus-visible .pic{overflow:visible}
.pcard .piclink .pic{border-radius:16px 16px 0 0}
.pcard .piclink{position:relative}
.pcard .piclink:hover,
.pcard .piclink:focus-visible{z-index:30}

/* ================= 产品系列页（对应画布 P11 6:2071） ================= */

/* 系列概述：左文字栏 660 / 右选购要点 */
/* ★ 同上：正文列固定 660px，选型要点卡列占剩余（写 fr 会让 4 张卡挤成 2px） */
.sov{display:grid;grid-template-columns:minmax(0,660px) minmax(0,1fr);gap:44px;align-items:start}
.sov h2{font-size:23px;line-height:1.46;letter-spacing:-.02em;max-width:none}
.sov .p1{margin-top:16px;font-size:14.5px;line-height:1.95;color:#22314A;max-width:none}
.sov .p2{margin-top:12px;font-size:14.5px;line-height:1.95;color:#37475C;max-width:none}
.skeys{display:grid;gap:12px}
.skey{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.skey svg{width:18px;height:18px;margin-top:1px;flex:none}
.skey p{font-size:13.5px;line-height:1.75;color:#3B4A5E}

/* 筛选工具栏：左平台胶囊、右型号数与排序 */
.ptools{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 20px}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchip{font-size:13.5px;line-height:1;padding:8px 15px;border-radius:999px;border:1px solid var(--line);color:var(--sub);background:#fff}
.pchip:hover{border-color:#C9DEF6;color:var(--blue)}
.pchip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pmeta .cnt{font-size:13.5px;color:var(--sub)}

/* ---------- 间距工具类（补充） ---------- */
.mt6{margin-top:6px}

/* ================= 栏目页增量（联系我们 / 解决方案 / 技术支持 / 关于我们 / 客户案例） =================
   以下全部为 **增量**：不覆盖 style.css 的任何既有规则，色值一律引用 :root 变量。
   ==================================================================================== */

/* ---------- 0. 导航下拉面板（megamenu）—— 全站共享，子页补齐 ----------
   ★ 这里补的是**显示缺陷**，不是新样式：这套规则原本只写在 home.css 里，
     而 home.css 的定位是「首页专属增量」，**只有 index.html 加载它**。
     于是除首页外的 15 个页面里，.nav .grp .mega 面板没有任何隐藏规则，
     以默认 block 流整块铺在页面顶部，把首屏内容全部盖住。
     实测同一视口高度截图：首页 60 KB、子页 175 KB —— 差的正是这层本该隐藏的面板。
   ★ 处理方式与下面的 FAQ / 页脚完全一致：在子页共享的本文件里等价补一份。
     index.html 同时加载本文件与 home.css，两者取值逐条相同，结果无差别；
     home.css 保持原样（它与设计稿 P30 逐条对应，按约定不改写）。
   ★ 必须自带 --ease：它原本只在 home.css 的 :root 里定义，缺了会让下面
     transition 整条解析失败，面板变成「硬闪现」而不是淡入。 */
:root{--ease:cubic-bezier(.22,.68,.32,1)}

.nav .grp{position:static}
/* .nav 自身是 relative（style.css），会把面板锚成 nav 宽度 —— 改 static，
   让面板上溯到 sticky header 全宽展开（P29 口径：面板通栏，内容 1200 居中） */
.top .nav{position:static}
/* 面板定位层：铺满整宽只为「定位」，本身不画任何背景 —— 真正的面板是里面的
   .mega-in（浮动圆角卡片，2026-09-23 定稿口径，2026-09-24 与 home.css 对齐）。
   左右 padding 40 与 .top .in 对齐，于是面板的外边线与页头内容同宽，
   看起来像是从导航下面「长出来」的一整块。 */
.nav .grp .mega{position:absolute;left:0;right:0;top:100%;padding:0 40px;
  background:none;border:0;box-shadow:none;overflow:visible;
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:90;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
/* ★ 2026-09-24 业主问题10：鼠标滑过面板后移到面板外，面板仍展开不缩回。
   真因：.mega 定位层 left:0;right:0 **全宽**且自身透明（真卡片只有中间
   .mega-in 1200px），这条透明的左右带参与 hover 命中 —— 鼠标看着已经滑出
   面板、实际还压在这条隐形带上，.grp:hover 不解除，面板就钉着不缩。
   修法：定位层对鼠标穿透（pointer-events:none），只让真正的卡片 .mega-in
   接收交互 —— 命中范围 = 视觉范围，滑出卡片边缘立即缩回。
   键盘路径不受影响（Tab 焦点不走 pointer-events），触屏点卡片内链接正常。 */
.nav .grp .mega{pointer-events:none}
.nav .grp .mega .mega-in{pointer-events:auto}
/* ★ 2026-09-24 业主问题1：鼠标点击导航链接后焦点残留在 <a> 上，
   :focus-within 会让面板「移开鼠标/点击页面后仍然展开」。
   改用 :has(>a:focus-visible)：键盘 Tab 导航仍可展开（无障碍不丢），
   鼠标点击产生的普通 focus 不再触发；配合 app.js 点击导航外自动 blur 双保险。 */
.nav .grp:hover .mega,.nav .grp:has(>a:focus-visible) .mega{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:1200px;margin:0 auto;padding:22px 24px 0;background:#fff;
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 60px rgba(10,22,40,.17),0 6px 16px rgba(10,22,40,.08);
  overflow:hidden}
.mega a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}

/* --- 产品族卡（A 区块） --- */
.mgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 28px}
.mcard{border-radius:12px;padding:8px 10px;transition:background .2s var(--ease),outline-color .2s}
.mcard:hover{background:var(--bl);outline:1px solid #C9DEF6}
.mt{display:flex;gap:9px;align-items:center;padding:4px 6px 9px;margin-bottom:7px;
  border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.mt:hover{color:#9B0205}
/* P29 定稿：组图标 = 浅酒红底 #FBEFF0 + 酒红 #9B0205 线条 */
.mi{width:26px;height:26px;border-radius:7px;background:#FBEFF0;color:#9B0205;
  display:grid;place-items:center;flex:none}
.mi svg{width:16px;height:16px;stroke:currentColor}
.ms{display:grid}
/* P29 定稿：系列子链接与卡片左缘对齐（不缩进到标题文字下） */
.ms a{display:block;padding:4px 6px;font-size:13.5px;color:#47586E;border-radius:7px;
  transition:background .18s var(--ease),color .18s var(--ease)}
.ms a:hover{background:#FBEFF0;color:#9B0205}

/* --- C 区块：面板标题行 + 产品族卡片（产品中心 2026-09-23 定稿） ---
   ★ 这套规则原先只写在 home.css 里，而 home.css 只有首页加载 —— 子页里
     .mhead / .pgrid / .pcard 完全没有样式，C 区块结构被 B 区块旧样式硬套，
     面板排版全坏（2026-09-24 业主截图1「下拉框出问题」的根因）。现搬入全站共享的本文件。
   ★ 卡片类一律带 .mega 前缀：本文件下方产品列表页自己的 .pcard（列表卡）是
     另一个同名类，裸写会跨板块撞车 —— 列表卡会被加上 12px 圆角与面板内距。 */
.mhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:0 0 12px}
.mhead b{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.mhead span{font-size:11px;letter-spacing:.14em;color:#93A1B5;text-transform:uppercase}
.mega .pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:2px 0 4px}
.mega .pcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px;background:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.mega .pcard:hover{background:var(--bl);border-color:#C9DEF6}
.mega .pcard .hd{display:flex;gap:12px;align-items:flex-start;text-decoration:none}
.mega .pcard .hd .mi{width:40px;height:40px;border-radius:10px}
.mega .pcard .hd .mi svg{width:20px;height:20px}
.mega .pcard .tx{display:block;min-width:0}
.mega .pcard .tx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.mega .pcard .tx i{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:1.6;color:var(--sub)}
/* 系列深链：与卡片左缘对齐（同 P29 对 .ms 的定稿要求），比 A 区块多一条虚线分隔
   ★ 2026-11-02 业主第 2 条：三级类目原来**一列纵向堆叠**，卡片右半截永远是空的
     （截图红框）。改成横向流式排列（左右排序）：一行放得下就排一行，放不下自动
     换行。左缘用 -7px 抵消 chip 自身内边距，仍与图标卡左缘齐平。
   ★ 字号 12.5 + 内边距 3/6 是量出来的：4 列面板里单卡内容宽约 290px，
     13.5px 时三条「2U 工控机 / 4U 工控机 / 国产化平台」正好挤爆，会掉成 2+1。 */
.mega .pcard .ms{display:flex;flex-wrap:wrap;gap:5px;margin:11px 0 0 -7px;
  padding-top:9px;border-top:1px dashed var(--line)}
.mega .pcard .ms a{padding:3px 7px;font-size:12.5px;line-height:1.45;white-space:nowrap}

/* --- 图标卡（B 区块） --- */
.mrow2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:6px 0 4px}
.mcard.b{display:flex;gap:12px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.mcard.b:hover{background:var(--bl);border-color:#C9DEF6}
.mcard.b .tx{display:block;min-width:0}
.mcard.b .mi{width:40px;height:40px;border-radius:10px}
.mcard.b .mi svg{width:20px;height:20px}
.mcard.b b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.mcard.b i{display:block;margin-top:4px;font-style:normal;font-size:13px;line-height:1.6;color:var(--sub)}
.mrow2 + .mfoot,.mgrid + .mfoot{margin-top:14px}

/* --- 底部汇总条（P29 定稿：浅灰条，与 1200 内容同宽横贯） --- */
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-top:1px solid var(--line);background:#F9F9F9;
  margin:14px -24px 0;padding:13px 24px 15px;
  font-size:13.5px;color:#47586E}
.mfoot nav{display:flex;gap:18px}
.mfoot a{font-size:14px;font-weight:600;color:var(--blue)}
.mfoot a:hover{text-decoration:underline}

/* --- 下拉面板响应式：窄屏不展开面板（页脚已含全部链接） --- */
@media(max-width:1080px){
  .nav .grp .mega{display:none}
}
@media(prefers-reduced-motion:reduce){
  .nav .grp .mega,.mcard.b,.ms a,.mega .pcard{transition:none}
}

/* ---------- 1. 常开式 FAQ（画布口径：问答全部服务端直出、常显可抓取） ----------
   首页的同类规则在 home.css 里，子页面不加载 home.css，故在此等价补一份。
   ★ 与 FAQPage 结构化数据必须逐字一致，改文案要两处同改。 */
.faq .qa{padding:17px 24px 19px;border-top:1px solid var(--line)}
.faq .qa:first-child{border-top:0}
.faq .qa h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.005em;color:var(--blue);display:flex;gap:12px;align-items:flex-start}
.faq .qb{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--blue);background:var(--bl);border-radius:6px;width:26px;box-sizing:border-box;padding:2px 0;text-align:center;flex:none;margin-top:2px}
/* ★ 答案左缩进 = 26(徽标) + 12(gap) = 38，与问题文字同一条竖线（口径同 style.css 的 .faq summary::before） */
.faq .qa p{margin:9px 0 0;padding-left:38px;font-size:14px;color:#37475C;line-height:1.85}

/* ---------- 2. 子页四栏页脚（对齐画布：品牌 + 4 栏目 + 5 地址 + 底栏） ----------
   ★ 首页的 .ftop / .fnav 定义在 home.css（子页不加载）⇒ 在此等价补一份。
   ★ 品牌列必须写固定 px：写成 320fr 会与 1fr 构成 320:1 的比例，
     把右侧 4 栏挤成 1/321 宽 → 标题逐字竖排、页脚被撑高（本项目已踩）。 */
.foot .ftop{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:44px}
.foot .fnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.foot .fnav b{display:block;color:#DCE7F5;font-size:15px;margin-bottom:14px}
.foot .fnav a{display:block;font-size:14px;color:#8FA3BC;padding:5px 0;transition:color .22s ease,transform .22s ease}
.foot .fnav a:hover{color:#fff;transform:translateX(3px)}
.foot .faddr{margin-top:36px;padding-top:30px;border-top:1px solid #1A2C46;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}

/* ---------- 3. 栅格补充：g4 / g3 的响应式回落 ---------- */
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .fnav{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .foot .faddr{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .foot .ftop{grid-template-columns:1fr;gap:30px}
  .foot .faddr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){.grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr}}

/* ---------- 4. KPI 行（板块内使用，不依赖 Banner 的深色底） ---------- */
.kpis.wide{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:30px}
.kpis.wide .kpi{background:var(--bl);border:1px solid #D8E7F8;border-radius:12px;padding:16px 20px;min-width:0}
.kpis.wide .kpi b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--blue);letter-spacing:-.02em;line-height:1.3}
.kpis.wide .kpi span{display:block;margin-top:6px;font-size:13.5px;color:#37475C}
@media(max-width:860px){.kpis.wide{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}}

/* ---------- 5. 需求表单（真实 <form>，无 JS 也可提交；渐进增强） ---------- */
.qform{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.qform h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.qform .fhint{margin-top:8px;font-size:13.5px;color:var(--sub)}
.qform .fld{margin-top:16px;display:grid;gap:7px}
.qform label{font-size:13.5px;color:#37475C;font-weight:600}
.qform label span{color:#C0392B}
.qform input,.qform textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:#FCFDFF;border:1px solid var(--line);border-radius:10px;padding:11px 14px;line-height:1.7;resize:vertical}
.qform input::placeholder,.qform textarea::placeholder{color:#9AABC0}
.qform input:focus,.qform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,77,178,.10)}
.qform .btn{margin-top:20px;justify-content:center;width:100%}
/* 蜜罐字段：离屏而不是 display:none —— 机器人普遍会跳过隐藏元素，
   用 display:none 就等于没放。这里保留它在渲染树里、只是挪出可视区。
   属性上另有 aria-hidden + tabindex="-1"（见 bp_forms.honeypot），
   所以读屏与键盘用户根本不会碰到它。 */
.qform .hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;white-space:nowrap}
/* 提交失败提示（由 contact-form.js 插入；无 JS 时不存在 —— 那时错误由
   后端返回的确认页承担，不会出现这块） */
/* 表单页脚两句说明：`note` 是浅黄提示条（沿用 style.css 的 .note），
   `pn`（隐私说明）是灰色小字 —— 两句都在后台 forms.json 里可编辑，
   渲染器必须都读（2026-11-02 修：privacy_note 曾「后台能填、前端不显示」）。 */
.qform .note.pn{margin-top:10px;padding:0;background:none;border:0;
  font-size:12.5px;line-height:1.7;color:#7C8CA1}
.qform .qmsg{background:#FEF3F2;border:1px solid #FBC9C4;border-radius:10px;padding:13px 16px;font-size:13.5px;color:#B42318;line-height:1.8}
.qform .qmsg ul{margin:7px 0 0;padding-left:19px}
/* 「想更快拿到答案」四条 */
.card h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.card>.d{margin-top:9px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.faster{margin-top:16px;display:grid;gap:13px}
.faster>div{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px}
.faster dt{font-family:var(--mono);font-size:13px;color:var(--blue);font-weight:700}
.faster dd b{font-size:14.5px}
.faster dd p{margin-top:3px;font-size:13.5px;line-height:1.7;color:var(--sub)}
.card>.go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600}
.card>.go a{color:var(--blue)}
.card>.go a:hover{text-decoration:underline}

/* ---------- 6. 到访信息：定义列表 + 环境图占位 ---------- */
.vdl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.vdl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--line)}
.vdl>div:first-child{border-top:0;padding-top:0}
.vdl dt{font-family:var(--mono);font-size:12.5px;color:#8798AC}
.vdl dd{font-size:14px;color:#22314A;line-height:1.7}
.vpic,.opic{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#EDF3FA 0%,#E1EAF4 62%,#D7E3F0 100%);min-height:260px;height:100%}
.vpic u,.opic u{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#9FB4CB;text-decoration:none}
.opic{min-height:0;height:auto;aspect-ratio:4/3}
/* 手机端：`.vpic` 保持 16:10（它与 `.vdl` 并排，压扁是为了不空成一个大方块）；
   `.opic` 走 **4:3** —— 与桌面、与后台建议值（`about/img` = 1200×900）、与 contact
   的环境图同一个口径，业主只准备一种尺寸的图就够。
   ★ 2026-11-13 业主实测反馈「前台显示 496×350.7，后台却让传 1200×900」：
     根因就在这里 —— 同一个图位三处口径各不同（桌面吃兄弟列行高≈1.41 / 手机 1.6 /
     后台 1.333），而且图片白名单漏了 `.opic img`，素材一到就按原图裸尺寸渲染。 */
@media(max-width:620px){.vpic{min-height:0;aspect-ratio:16/10;height:auto}
  .opic{min-height:0;aspect-ratio:4/3;height:auto}}

/* ---------- 7. 行业/案例卡：痛点 · 方案 · 结果 ---------- */
.card.ind{display:flex;flex-direction:column;height:100%}
.card.ind .tag{align-self:flex-start}
.card.ind h3{margin-top:14px}
.indl{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:12px}
.indl>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}
.indl dt{font-family:var(--mono);font-size:12.5px;color:#8798AC;line-height:1.9}
.indl dd{font-size:13.5px;line-height:1.8;color:#3B4A5E}
.card.ind .ok{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--blue)}
.card.ind .ok::before{content:"✓";font-family:var(--mono);margin-right:7px;color:var(--blue)}

/* ---------- 8. 流程步骤（架构层 / 实施流程共用） ---------- */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:30px}
.steps .stp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.steps .sn{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--blue)}
.steps h3{margin-top:11px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.steps p{margin-top:9px;font-size:13.5px;line-height:1.78;color:var(--sub)}
@media(max-width:1180px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.steps{grid-template-columns:1fr}}

/* ---------- 9. 客户证言卡（子页口径：浅底 + 描边，与首页深色底版本区分） ---------- */
.cquote{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;height:100%}
.cquote blockquote{margin:0}
.cquote blockquote p{font-size:15px;line-height:1.9;color:#22314A}
.cquote figcaption{margin-top:auto;padding-top:18px;font-size:13.5px;color:var(--sub)}


/* ---------- 网站地图页：栏目卡内的链接清单 ----------
   版式口径 = 画布 P14「网站地图页」`6:2816` 的「链接组」：
   ★ 画布上是**纯文字清单** —— 无分隔线、无右侧路径列、行距 11px。
     旧版曾做成「左页面名 + 右 mono 路径」的对照行，与画布不符，已按画布收口。
   ★ 尚未上线的页面渲染成 <span>（不可点、颜色更浅），**故意不做成死链**；
     上线后把 span 换成 a 即可。 */
.smap{margin-top:15px;display:grid;gap:11px}
.smap a,.smap span{font-size:14px;color:#37475C}
.smap a{transition:color .2s ease}
.smap a:hover{color:var(--blue)}
.smap span{color:#A8B4C4}
.card .h b a{color:inherit}


/* ---------- 网站地图页：城市分站板块（口径 = 画布 P14 `6:2816`） ----------
   ★ 画布上**不是胶囊 chip**：每行 = 蓝色地区标签（定宽 84）+ 城市名平排，
     城市之间 gap 24、可折行；7 行之间 gap 26。 */
.cities{display:grid;gap:26px}
.cities .crow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px}
.cities .crow h3{flex:0 0 84px;margin:0;font-size:14px;font-weight:600;color:var(--blue)}
.cities .crow span{font-size:14px;color:#37475C}

/* 分站未开通时的状态说明（数据口径：data/cities.json 里 online=true 的城市为 0）。
   ★ 为什么要有这一行：43 个城市里只有 12 个规划了子域名、且**一个都没开通**，
     不写清楚就是拿「城市分站」当服务节点卖 —— 说清状态，比让访客点了没反应好。
   开通后渲染器自动不再输出这句话（见 bp_pages_e.page_sitemap）。 */
.citiesnote{margin:16px 0 0;padding:9px 14px;border-left:3px solid var(--blue);
  background:#F2F6FC;border-radius:0 8px 8px 0;font-size:13px;line-height:1.7;color:#5A6B80}


/* ---------- 网站地图页：产品型号索引（2026-11-03 新增板块） ----------
   128 个型号要能一屏扫完，所以是**紧凑的两列清单**，不是卡片阵列：
   每个频道一行标题（系列名可点 + 型号数徽标），下面平排型号链接。
   ★ 链接文字用**型号**（访客的检索词，直接搜 "SRB-8200"），名称放 title 属性 ——
     名称在同频道内大量重复（"无风扇嵌入式工控机" 出现十几次），做成链接就是一堵同义墙。
   ★ 与 `.smap` 的区别：.smap 是栏目卡里的清单（gap 11 竖排），这里是索引（横向平排、字号更小）。 */
.mindex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.mindex .mg{border-top:1px solid var(--line);padding-top:13px}
.mindex .mg h3{margin:0;display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.mindex .mg h3 a{color:var(--blue)}
.mindex .mg h3 a:hover{text-decoration:underline}
.mindex .mg h3 .na{color:#5A6B80}
.mindex .mg h3 em{flex:none;font-family:var(--mono);font-style:normal;font-size:11px;font-weight:400;
  color:#7D8FA6;line-height:17px;padding:0 7px;border:1px solid var(--line);border-radius:20px}
.mindex .mlist{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:11px}
.mindex .mlist a{font-size:13.5px;color:#37475C;transition:color .2s ease}
.mindex .mlist a:hover{color:var(--blue)}

/* ---------- 网站地图页：新闻文章索引（同上，两列 + 日期右对齐） ---------- */
.nindex{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.nindex li{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.nindex li a{flex:1;font-size:14px;line-height:1.55;color:#37475C;transition:color .2s ease}
.nindex li a:hover{color:var(--blue)}
.nindex li time{flex:none;font-family:var(--mono);font-size:12px;color:#8A97A8}
@media(max-width:900px){.mindex,.nindex{grid-template-columns:1fr}}


/* ---------- 产品详情页：场景承接条（口径 = 「型号详情页-模板-预览」的 ★场景承接条） ----------
   ★ 为什么详情页**不复述**系列页那 6 行场景索引：
     系列页已有完整索引，详情页再抄一遍会形成 9 份重复正文（同模板多页重复
     是搜索引擎判「低质重复」的典型形态，canonical 救不了站内重复）。
     改用一条承接条回答「我是哪几个场景的命中型号」，既个性化又不重复。
   ★ 只写画布版这一处样式；不需要动 style.css。 */
.scene{background:linear-gradient(100deg,#014DB2,#001645);border-radius:16px;padding:26px 32px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;color:#fff}
.scene>*{min-width:0}
.scene .lb{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  opacity:.72;text-transform:uppercase}
.scene h3{margin-top:10px;font-size:16px;font-weight:600;line-height:1.6}
.scene h3 b{color:#9FC4F5}
.scene p{margin-top:8px;font-size:14px;line-height:1.7;opacity:.82}
.scene a{font-size:14.5px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.4);padding:11px 20px;border-radius:10px;transition:all .15s}
.scene a:hover{background:rgba(255,255,255,.14);border-color:#fff}


/* ---------- 响应式 ---------- */
@media(max-width:1080px){
  .pov,.nfocus,.sov{grid-template-columns:1fr;gap:26px}
  .hl{grid-template-columns:1fr}
  .plist,.mrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scene{grid-template-columns:1fr;gap:20px}
}
@media(max-width:860px){
  .nlist{grid-template-columns:1fr}
  .plist,.mrow{grid-template-columns:1fr}
  .pinfo h1{font-size:26px}
  .endcta{padding:28px 24px}
  .endcta b{font-size:19px}
  .frow{grid-template-columns:1fr;gap:8px}
  .flab{line-height:1.6}
  .rtbar,.ptools{align-items:flex-start}
}
@media(max-width:620px){
  /* ★ 2026-11-05：`.act` 是 flex:none（由内容撑宽），而里面 `.btn{width:100%}` 的
     100% 是以 `.act` 自己为基准 —— 两者互相等 ⇒ 按钮宽 = 文字 max-content，
     390px 屏上实测比卡片宽 48px（support / privacy 两页横向溢出就是这个）。
     给 `.act` 一个确定的 100%，100% 才落到卡片内容盒上。 */
  .endcta .act{width:100%;flex:1 1 100%}
  .endcta .act .btn{width:100%;justify-content:center}
  .fcard{padding:18px 16px}
  .fopts{gap:6px}
  .fopt{padding:7px 11px}
  .cities .crow h3{flex:1 0 100%}
}

/* v11.4 实拍图位：photos/ 素材到位后 photo() 构件渲染 <img>，撑满原占位容器。
   ★ position:relative;z-index:1（2026-09-24 业主问题3）：容器的 ::before/::after
     占位插画是绝对定位，不抬 img 层级就会盖在真实照片上 —— 与 style.css 同名规则保持一致。 */
.main img,.mc-img img,.pic img,.vpic img,.opic img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}


/* ---------- 新闻详情：文首配图 + 两栏（正文 / 右侧栏，设计稿定稿口径） ---------- */
.art-main{max-width:800px}
/* 正文由**纯文本**渲染（v13.14：`@图 路径` → 插图段落，`## ` → 小标题）。
   样式在这里，编辑写正文时不用碰任何标签。 */
.art-main p{font-size:15px;line-height:1.9;color:#3C4A5E;margin:0 0 16px}
.abpic{margin:22px 0;text-align:center}
.abpic img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:12px;display:inline-block}
.art-main h2{font-size:18px;font-weight:700;color:var(--ink);margin:26px 0 12px;line-height:1.5}
.art-hero{aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(160deg,#EDF3FA,#D7E3F0);overflow:hidden;margin:0 0 24px}
.art-hero img{width:100%;height:100%;object-fit:cover;display:block}
.art-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;align-items:start}
.art-side{position:sticky;top:92px;display:grid;gap:16px}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px 12px}
.toc b{display:block;font-size:15px;font-weight:700;letter-spacing:-.005em;color:var(--ink);margin-bottom:6px}
.toc a{display:block;padding:8px 0 8px;font-size:13.5px;line-height:1.6;color:#47586E;border-top:1px dashed var(--line)}
.toc a:first-of-type{border-top:0}
.toc a i{font-style:normal;font-family:var(--mono);font-size:11px;color:#9FB4CB;margin-right:8px}
.toc a:hover{color:var(--blue)}
.side-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.side-card b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.side-card p{margin:8px 0 14px;font-size:13px;line-height:1.8;color:#47586E}
.side-card .btn{display:block;text-align:center}
@media(max-width:1080px){
  .art-cols{grid-template-columns:minmax(0,1fr)}
  .art-side{position:static;order:2}
}

/* ---------- 信创互认证清单 / 资质荣誉（P25 新版 / P27 定稿） ----------
   2026-10-30：cphrz 前两块按设计稿（工控机官网 - 首页设计_23）回改 ——
     S1 改回 `orgs`  → `.orgc`   一厂商一卡：厂商名 / 大数字 + 「项认证」/ 体系名
     S2 改回 `certs` → `.cert-sys` 一体系一卡：浅蓝头带（体系名 + 厂商 + 蓝底项数）+ 型号 chip
     S3 使用指南     → `.pbc`    四卡：编号徽标 + 标题 + 说明
   旧的 `.sysc` / `.certtbl`（P25 新版 S1/S2）样式**一条不删**：两个渲染器都还在，
   数据里把 type 换回 syscards / certtable 就能复活 —— 别按「现在没人用」清掉。 */
.cert-sys{background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin-bottom:14px}
.cert-sys .cs-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  padding:13px 20px;background:#EEF4FB;border-bottom:1px solid #E3ECF7}
.cert-sys .cs-head b{font-size:13.5px;font-weight:700;color:var(--ink)}
.cert-sys .cs-head span{margin-left:auto;font-size:12px;color:#7C8CA1}
.cert-sys .cs-head .chip{margin-left:0;background:var(--blue);border-color:var(--blue);
  color:#fff;font-weight:600}
.cert-sys .cs-body{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px 18px}
.cert-sys .chip{display:inline-flex;align-items:baseline;gap:7px;font-family:var(--sans);
  font-size:12.5px;padding:6px 13px;background:#FBFDFF;border-color:#DDE9F8;color:#7C8CA1}
.cert-sys .chip b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue)}
.cert-sys .chip i{font-style:normal}
/* 2026-11-02 业主第 1 条：认证类型(kind)/认证版本(ver) 元信息行 + 底部适配说明(note)。
   头带下、型号区上：一行小字，标签浅蓝底、内容深色；没填就不输出（渲染器保证）。 */
.cert-sys .cs-meta{display:flex;flex-wrap:wrap;gap:6px 22px;padding:12px 20px 0;
  font-size:12.5px;line-height:1.7;color:#42506B}
.cert-sys .cs-meta span{display:inline-flex;align-items:baseline;gap:8px}
.cert-sys .cs-meta i{font-style:normal;font-size:11.5px;color:#5B7BA8;background:#EEF4FB;
  border-radius:4px;padding:1px 8px;white-space:nowrap}
.cert-sys .cs-note{margin:0;padding:0 20px 16px;font-size:12.5px;line-height:1.7;color:#7C8CA1}
/* note 与 body 的间距：body 底 padding 与 note 顶 padding 二选一，都在渲染端保证顺序 */
.cert-sys .cs-body+.cs-note{padding-top:0;margin-top:-6px}
a.chip:hover{border-color:#C9DEF6;background:var(--bl)}

/* S1 · 厂商总览卡（一厂商一卡，数字与项数都从认证清单现算） */
.orgcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.orgc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 24px 20px}
.orgc .oc-name{font-size:15px;font-weight:700;color:var(--ink)}
.orgc .oc-num{display:flex;align-items:flex-start;gap:8px;margin-top:10px}
.orgc .oc-num b{font-family:var(--mono);font-size:38px;line-height:1;font-weight:700;color:var(--blue)}
.orgc .oc-num i{padding-top:4px;font-style:normal;font-size:12.5px;color:#8FA0B4}
/* 体系名贴卡底：三张卡等高，名字行数不同也不会把数字顶歪 */
.orgc .oc-sys{margin-top:auto;padding-top:18px;font-size:12.5px;line-height:1.7;color:#7C8CA1}

/* S3 · 使用指南四卡（编号徽标独立成块，标题不再带「01 · 」前缀） */
.pbgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pbc{background:#fff;border:1px solid #EDF1F6;border-radius:14px;padding:22px 22px 24px}
.pbc .pbn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:#EDF3FB;font-family:var(--mono);font-size:14px;
  font-weight:700;color:var(--blue)}
.pbc h3{margin-top:16px;font-size:15.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.pbc .d{margin-top:10px;font-size:13px;line-height:1.85;color:#6B7C90}
@media(max-width:1080px){.pbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.orgcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.orgcards,.pbgrid{grid-template-columns:minmax(0,1fr)}}
.honor-group{margin-bottom:22px}
.honor-group .hg-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.honor-group .hg-head b{font-size:15.5px;font-weight:700;color:var(--ink)}
.honor-group .links .lk{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}

/* 资证明细 · 证书卡（2026-11-02 业主第 1 条：每一项都要点得开图）
   整卡 = data-img 触发器，弹层复用信创互认证页那套 .lbox。
   ★ 缩略图用 object-fit:contain 而不是 cover —— 证书有横有竖，cover 会裁掉底部的
     发证机关与钢印，等于把「可核对的证据」裁掉了。留白比裁切正确。
   ★ 尺寸同时写进 <img width/height>（构建时定死），21 张图懒加载也不会抖版。 */
.honor-group .links .lk.hcard{
  display:flex;flex-direction:column;padding:0;overflow:hidden;cursor:zoom-in;
  text-align:left;font:inherit;margin-bottom:0;
  transition:border-color .14s ease,box-shadow .18s ease;
}
.hcard .hp{display:block;background:#F5F9FD;border-bottom:1px solid var(--line)}
.hcard .hp img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  transition:opacity .14s ease}
.hcard b{padding:14px 16px 0;margin:0;font-size:14px;line-height:1.5}
.hcard .hmeta{display:block;padding:6px 16px 0;font-size:12.5px;line-height:1.7;color:var(--sub)}
.hcard .hm{margin-top:auto;padding:12px 16px 14px;font-style:normal;
  font-size:12px;font-weight:600;color:var(--blue)}
.hcard:hover{border-color:#B9D3F0;box-shadow:0 8px 20px rgba(1,77,178,.10)}
.hcard:hover .hp img{opacity:.94}
@media(max-width:1080px){.honor-group .links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.honor-group .links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.honor-group .links{grid-template-columns:minmax(0,1fr)}}

/* ---------- 信创产品互认证 · P25 新版（2026-10-29 第 9 条） ----------
   设计稿把这一页拆成两种**新口径**的呈现，与旧的「按厂商分组」不是同一件事：
     S1 `syscards`  —— 一体系一卡：发证机构 / 认证类型 / 认证版本 / 型号清单 / 备注
     S2 `certtable` —— 摊平成表：一行 = 一条可直接抄进投标文件的认证依据
   旧的 `.cert-sys` 分组卡样式**保留**（`certs` 渲染器仍在，其它页型可能复用）。

   ★ banner 两级标题：`h1` 只放页面名，主张句单独一行 `p.btitle`。
     只有带主张句的页（`.ban.has-bt`）才收窄 h1 —— 不给全站 h1 改字号。 */
.ban.has-bt h1{font-size:30px;letter-spacing:-.005em}
.ban .btitle{max-width:960px;margin-top:16px;font-size:46px;line-height:1.24;
  letter-spacing:-.022em;font-weight:700;color:#fff}

/* S1 · 体系卡（2 列；末位可挂一张 service 服务卡） */
.sysgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sysc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 24px 24px}
.sysc .sc-h{display:flex;align-items:flex-start;gap:12px;padding-bottom:12px;
  border-bottom:1px solid #EDF1F6}
.sysc .sc-h h3{flex:1;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
.sysc .sc-n{flex:none;padding-top:3px;font-family:var(--mono);font-size:12.5px;
  color:#5A6B82;white-space:nowrap}
.sysc .sc-tag{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:#9AABC0;padding-top:5px}
.sysc .sc-meta{display:grid;gap:7px;margin-top:14px}
.sysc .sc-meta div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px}
.sysc .sc-meta dt{font-size:12.5px;color:#8FA0B4}
.sysc .sc-meta dd{font-size:13.5px;line-height:1.6;color:#22303F}
.sysc .sc-models{display:grid;gap:0;margin-top:16px;padding:0;list-style:none}
.sysc .sc-models li{padding:7px 0;font-size:13.5px;color:#0A1628;
  border-bottom:1px dashed #F0F4F8}
.sysc .sc-models li span{font-size:12.5px;color:#8FA0B4}
/* ★ 备注块紧跟型号清单，**不贴卡片底** —— 等高栅格里若用 margin-top:auto，
   型号少的卡会把备注推到最底部，中间空出一大片（同排的 9 型号卡不会）。
   画布 P25 的排法是「型号 → 紧接备注 → 余下留白」。只有服务卡的热线才贴底。 */
.sysc .sc-note{margin-top:16px;padding:13px 15px;background:#F4F8FD;border-radius:10px;
  font-size:12.5px;line-height:1.75;color:#5A6B82}
.sysc.svc{background:#F7FAFE;border-color:#D9E6F5}
.sysc.svc .sc-lead{margin-top:14px;font-size:15px;font-weight:600;color:var(--ink)}
.sysc.svc .sc-pts{display:grid;gap:7px;margin-top:14px;padding-left:18px}
.sysc.svc .sc-pts li{font-size:13px;line-height:1.65;color:#47586E}
.sysc.svc .sc-tel{margin-top:auto;padding-top:20px;font-size:13px;font-weight:600;
  color:var(--blue)}

/* S2 · 清单表格 */
.certtbl{margin-top:30px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.certtbl .tr{display:grid;gap:16px;align-items:center;padding:12px 24px;
  grid-template-columns:62px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.15fr)}
.certtbl .tr+.tr{border-top:1px solid #EFF3F8}
.certtbl .tr.th{background:#F4F8FD}
.certtbl .tr.th span{font-size:12.5px;font-weight:600;color:#5A6B82}
.certtbl .no{font-family:var(--mono);font-size:12.5px;color:#9AABC0}
.certtbl .sys{font-size:13.5px;line-height:1.6;color:#22303F}
.certtbl .mdl{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--blue)}
.certtbl .mdl a{color:var(--blue);text-decoration:none}
.certtbl .mdl a:hover{text-decoration:underline}
.certtbl .frm,.certtbl .org{font-size:13.5px;color:#47586E}
.certnote{margin-top:22px;padding:22px 26px;background:#F4F8FD;
  border-radius:14px;font-size:13px;line-height:1.9;color:#5A6B82}
@media(max-width:900px){
  .ban .btitle{font-size:32px}
  .sysgrid{grid-template-columns:minmax(0,1fr)}
  .certtbl .tr{grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:15px 16px}
  .certtbl .tr.th{display:none}
  .certtbl .sys,.certtbl .mdl,.certtbl .frm,.certtbl .org{grid-column:2}
  .certtbl .no{grid-row:1 / span 4;align-self:start;padding-top:2px}
  .certnote{padding:18px 18px}
}


/* ---------- 信创里程碑（口径 = 画布 P26 新版 97:3068 定稿） ----------
   三个板块：S1 交替时间轴 / S2 能力现状双栏 / S3 能力矩阵表。
   ★ 轴上「当年为深蓝实心点、在研年份为浅色空心点」是画布明确的口径
     （2026 行是空心点 + 「进行中」徽标），不要统一成同一种点。
   ★★ 类名一律带 `ms-` 前缀：**不能用 `.tl`** —— `style.css` 里早有一个 `.tl`
     （`padding-left:34px` + 一条 `::before` 装饰竖线），撞名会让整块内容
     右移 34px 并多出一条不属于本板块的直线。跨样式表的同名类不报错，
     只会静默叠加 —— 新增板块的类名先查一遍三个 CSS 再定名。 */
.ms-tl{display:grid;gap:26px}
.ms-row{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);
  align-items:stretch}
/* ★ 两个子项都写死 grid-row:1：只写 grid-column 时行号是自动的，
   而自动排布是「只向前」的 —— 先放下的卡片占掉第 1 行第 3 列后，
   轴列会掉到第 2 行，于是轴高变成 0、点线全部错位（v11.8 实测）。 */
.ms-row>*{grid-row:1}
.ms-row .ms-card{grid-column:3}
.ms-row.rev .ms-card{grid-column:1}
.ms-axis{grid-column:2;position:relative;display:flex;justify-content:center}
.ms-axis::after{content:"";width:2px;height:100%;background:#C9DEF6}
.ms-axis::before{content:"";position:absolute;left:50%;top:26px;
  transform:translateX(-50%);width:16px;height:16px;box-sizing:border-box;
  border-radius:999px;background:var(--blue);border:2px solid #EAF2FC;z-index:1}
.ms-row.cur .ms-axis::before{background:#fff;border-color:#5A6B82}
.ms-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  display:grid;gap:12px;align-content:start}
.ms-card .yh{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.ms-card .y{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--blue);line-height:1.1}
.ms-card h3{margin:0;font-size:16px;font-weight:600;line-height:1.5;color:var(--ink)}
.ms-card .bdg{font-family:var(--mono);font-size:11px;font-weight:500;white-space:nowrap;
  color:var(--blue);background:#EAF2FC;border-radius:999px;padding:3px 9px}
.ms-ev{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ms-ev li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.68;color:#37475C}
.ms-ev li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:999px;background:#B9CCE2}

/* S2 能力现状：双栏（已完成 / 正在推进） */
.st-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.st-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;
  display:grid;gap:12px;align-content:start}
.st-head{display:flex;gap:12px;align-items:center}
.st-head b,.st-head .st-h{font-size:15px;font-weight:600;color:var(--ink);margin:0;line-height:inherit}   /* .st-h：2026-11-04 由 <b> 升为 <h3>，修 h2→h4 跳级 */
.st-card.off .st-head b,.st-card.off .st-head .st-h{color:#68798F}
.st-head .bdg{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:500;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.st-card .bdg.on{background:var(--blue);color:#fff}
.st-card .bdg.off{background:#F1F5F9;color:#5A6B82}
.st-list{display:grid;gap:12px}
.st-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start}
.st-item .n{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--blue);line-height:1.9}
.st-card.off .st-item .n{color:#9DAAB9}
.st-item h4{margin:0;font-size:14.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.st-item p{margin:5px 0 0;font-size:13px;line-height:1.72;color:#47586E}

/* S3 能力矩阵表 */
.captbl{margin-top:26px;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden}
.captbl .tr{display:grid;grid-template-columns:180px minmax(0,1fr);padding:18px 32px}
.captbl .tr+.tr{border-top:1px solid #E4E9EE}
.captbl .tr.th{padding:14px 32px;background:#F4F8FD}
.captbl .tr.th span{font-size:13px;font-weight:600;color:#5A6B82}
.captbl .dim{font-size:14px;font-weight:600;color:var(--blue)}
.captbl .val{font-size:14px;line-height:1.7;color:#22303F}
@media(max-width:860px){
  .ms-row{grid-template-columns:20px minmax(0,1fr)}
  .ms-row .ms-axis{grid-column:1}
  .ms-row .ms-card,.ms-row.rev .ms-card{grid-column:2}
  .st-cols{grid-template-columns:minmax(0,1fr)}
  .captbl .tr{grid-template-columns:minmax(0,1fr);gap:8px;padding:16px 18px}
  .captbl .tr.th{padding:12px 18px}
}
/* ==================================================================
   v13 · 2026-09-23 业主 13 条增补
   ================================================================== */

/* ⑥ FAQ 答案缩进（v13.5 改口径）：原「首行缩进 2 字符」只作用于首行、
   与问题文字必然错位；业主 2026-09-28 要求上下对齐 ⇒ 改为整块左缩进 38px，
   实际声明见本节 §1 的 .faq .qa p{padding-left:38px}，此处不再重复。 */

/* ⑥ 栏目页首版 banner 背景图（site.json › banner_bg，后台「全局内容」可改）。
   ★ .ban 的 ::before/::after 已被网格纹与圆环装饰占用（style.css 36-37），
     所以背景图不用伪元素 —— 直接把「暗色渐变叠层 + 背景图」写在元素自己的
     background 上，原有的装饰伪元素照常工作。
   ★ 2026-10-29 业主第 1 条：叠层从 .90/.52 降到 .72/.30。
     原值把实拍图压成灰（2026-09-29 业主因此干脆把图停用了），
     上传图片的实际观感等于"没换"。左侧文字压在 .72 上仍够读，
     右侧 .30 让图能看清。 */
.ban.has-bg{background:linear-gradient(120deg,rgba(10,25,47,.72),rgba(10,25,47,.30)),var(--ban-bg) center/cover no-repeat}

/* ⑩ 右侧中部常驻：企业微信二维码悬浮卡（任何栏目、任何滚动位置都居中于右侧） */
.wx-float{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:90;
  width:88px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 26px rgba(10,22,40,.14);padding:10px 8px 9px;text-align:center;
  font-size:11.5px;color:#3B4A5E;line-height:1.45}
/* 点开放大（2026-11-03）：整卡可点，鼠标/触摸有可点反馈 */
.wx-float{cursor:pointer;-webkit-tap-highlight-color:transparent}
.wx-float img{display:block;width:70px;height:70px;margin:0 auto 6px;
  border-radius:6px;object-fit:contain;background:#F2F7FC}
/* ★ 2026-11-13：object-fit 由 cover 改 contain —— 二维码不是方图时，cover 会
   裁掉边角（扫不出来且看不出来），contain 只留白、保整图。现网图 234×234
   是正方形，两种写法视觉完全一样，所以这是纯兜底、无观感变化。 */
.wx-float b{display:block;color:var(--blue);font-weight:600}
.wx-float:hover{box-shadow:0 14px 32px rgba(10,22,40,.20);border-color:#CBD3DE}

/* ③ 手机端响应式增强（在既有 1080/860/620 断点上补齐） */
@media(max-width:860px){
  .wx-float{right:10px;width:74px;padding:8px 6px 7px}
  .wx-float img{width:58px;height:58px}
  .kpis{gap:10px}
  .faq .qa{padding:14px 16px 16px}
  .tblwrap table,.gal table{font-size:13px}
  .sg-t col.k{width:150px}
  .sg-t td{padding-right:14px}
}
@media(max-width:620px){
  .wx-float{width:62px;padding:7px 5px 6px;font-size:10px}
  .wx-float img{width:48px;height:48px}
  h1{font-size:26px}
  .ban .in{padding-top:34px;padding-bottom:38px}
  .btn.b,.btn.w{width:100%;justify-content:center;text-align:center}
  .nfocus{display:block}
  /* 焦点卡窄屏：框保持 16/9，图满铺（原来写死 180px 高，图会缩在框里留白） */
  .nfocus .pic img{height:100%}
  .nitem{padding:14px 0}
  /* 参数组卡：窄屏收窄参数名列，避免值列被挤成两三字一行 */
  .sg-h{padding:12px 14px}
  .sg-t col.k{width:96px}
  .sg-t th{padding-left:12px;padding-right:12px}
  .sg-t td{padding-right:14px}
}

/* ==========================================================================
   产品中心枢纽页（P4 · 画布「屏 A v2」）—— 2026-09-28
   --------------------------------------------------------------------------
   ★ 这里**只补三样新东西**：按产品线浏览的徽标与引导卡修饰、选型快捷路径的图文卡、
     全型号索引。
     「按产品线浏览」的 11 张卡不新造组件 —— 直接复用 .card（build_pages.icocard
     构件）+ .mrow2 栅格，与 10 个系列页底部的「相关产品系列」是**同一个组件**：
     同语义（频道卡：图标 + 频道名 + 一句定位 + 款数 + 查看系列）就该同观感；
     只加一个 `.guide` 修饰类把第 12 张路标卡区分出来（见 1b 段）。
     快捷路径的 2 列栅格复用 .grid.g2（style.css 86 定义、266 行有断点回落），
     也不新造容器。
   ★ 命名避让：画布稿里的 `.fam` **不能照抄** —— home.css:180 已用 `.fam` 表示
     首页「产品线矩阵」的三栏卡（padding 26/24、hover 位移、子元素 .fam-no/.fam-list），
     而 home.css **只在 index.html 加载**，照抄会在产品中心页变成「有类名没样式」。
   ========================================================================== */

/* ---- 1. 选型快捷路径：图文卡（2 列，图在上、文在下） ---- */
.gapcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
/* ★ 图位走 build_pages.photo(name, label, "gapimg") 构件，容器类名由本渲染器指定为
   `gapimg` —— **不是** `pic`。原因：photo() 只负责「有图出 <img>、无图出占位块」，
   尺寸由容器 CSS 决定；而本项目在文件尾有一条全站规则
   `.pic img{width:auto;height:100%;aspect-ratio:1/1}`（产品图位「边长减半」口径），
   套 `pic` 会把这张横幅卡压成 1:1。用独立容器名即可两不相干。
   ★ 容器固定 196px 高 ⇒ **有无素材都不产生布局位移**（CLS=0），
     因此不必再给 <img> 写 width/height 属性（photo() 也不提供该参数）。 */
.gapcard .gapimg{position:relative;overflow:hidden;aspect-ratio:3/1;height:auto;flex:none;
  background:linear-gradient(135deg,#EEF3F9,#DDE7F2)}
.gapcard .gapimg img{display:block;width:100%;height:100%;object-fit:cover}
.gapcard .gapimg u{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:#93A6BC;text-decoration:none}
/* 手机端横幅图改 16:9：344 宽按 3:1 只有 115 高，主体会糊成一条。
   后台建议值仍是 3:1（1200×400），手机端的裁切在容差内（主体居中即可）。 */
@media(max-width:620px){.gapcard .gapimg{aspect-ratio:16/9}}
.gapcard .bd{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
/* 卡头的分类标签（「按平台」「按场景」）—— 照设计稿的 `.pill`（mono + 蓝字浅蓝底）。
   ★ 不套 `.pchip`：那是**可点筛选胶囊**（13.5px 白底描边 + hover 变蓝），
     而这一个是纯标签、不是链接 —— 语义不同就不该共用类名（同文件里
     `.card.ind .tag{align-self:flex-start}` 是同一处结构问题的既有解法）。
   ★ `align-self:flex-start` 必须有：`.bd` 是 flex 列容器，默认 stretch 会把
     这个小胶囊拉成整卡宽的一条（实测过）。 */
.gapcard .pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-family:var(--mono);font-size:12px;border-radius:999px;padding:3px 10px;
  background:var(--bl);color:var(--blue);border:1px solid #C9DEF6}
.gapcard h3{margin-top:13px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.gapcard p{margin-top:9px;font-size:13.5px;line-height:1.8;color:var(--sub)}
.gapcard .chips{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
/* ★ 2026-11-09 业主第 3 条：「选型快捷路径红框内展示内容太多，做成折叠效果」。
   场景卡原来一口气平铺 11 个产品线胶囊，把整张卡撑得比左边那张高出一大截，
   两卡并排看就是一高一矮。改折叠：默认只露**一整行**，展开才铺开。
   · 行高按 `.pchip` 的**实际盒高**算，不是猜：font-size 13.5px + line-height 1
     ⇒ 内容 13.5，padding 8×2=16，border 1×2=2 ⇒ **31.5px**。原先写 max-height:30px，
     比盒高少 1.5px ⇒ 第一行的**下边框被裁掉**（截图里三个胶囊下边是断的，2026-11-09
     业主第 1 条）。现取 35px：比 31.5 多 3.5px 余量（子像素/字体替换都不至于再裁），
     又远小于第二行起点 31.5+8=39.5px ⇒ 第二行仍被整行裁掉，不会露半截；
   · 折叠用 checkbox hack（与「全型号索引」`.idx` 同一套），胶囊**仍逐条在 HTML 里**，
     只被 overflow 裁掉视觉溢出 —— 抓取端零差异，也不依赖 JS。 */
.gapcard .chips-fold{display:block}
.gapcard .chips-fold .foldwrap{display:flex;gap:8px;flex-wrap:wrap;
  max-height:35px;overflow:hidden;transition:max-height .28s ease}
.gapcard .chips-fold .foldchk:checked ~ .foldwrap{max-height:640px}
.gapcard .foldmore{display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;user-select:none;
  transition:color .15s}
.gapcard .foldmore:hover{color:#1B5FA8}
.gapcard .foldmore .fm-close{display:none}
.gapcard .foldmore .fm-open::after{content:'▾';margin-left:3px;font-size:11px}
.gapcard .chips-fold .foldchk:checked ~ .foldmore .fm-open{display:none}
.gapcard .chips-fold .foldchk:checked ~ .foldmore .fm-close{display:inline}
.gapcard .chips-fold .foldchk:checked ~ .foldmore .fm-close::after{content:'▴';margin-left:3px;font-size:11px}
@media(max-width:860px){
  .gapcard .chips-fold .foldwrap{max-height:38px}
  .gapcard .chips-fold .foldchk:checked ~ .foldwrap{max-height:900px}
}
.gapcard .cap{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:11.5px;color:#93A6BC}

/* ---- 1b. 按产品线浏览：系列码徽标 + 第 12 张引导卡 ---- */
/* 频道名后的**系列码徽标**（设计稿 `.fam h3 em`）。码与切换条、导航下拉同源，
   三处看到的是同一个「IPC / SRB / …」，不是三套叫法。 */
.mrow2 .card h3 em{font-family:var(--mono);font-size:11px;font-style:normal;font-weight:400;
  color:var(--sub);background:var(--bl);border-radius:999px;padding:2px 8px;margin-left:7px;
  vertical-align:2px}
/* ★ 第 12 张「按场景选型」不是产品线、是**路标**：图标位改虚线描边（同设计稿
   `.fam.ghost .ic`），让它一眼区别于 11 张真频道卡 —— 不做区分的话用户会以为
   它是第 12 条产品线（那是语义错误，不是观感问题）。只改图标位，卡片几何不变。 */
.mrow2 .card.guide .ico{background:transparent;border:1px dashed #B7C6D8;color:#7D8FA6}

/* ---- 1c. 频道卡产品图（2026-10-29 设计稿定稿：11 张频道卡顶部加整幅图区） ----
   ★ 图位走 build_pages.photo(name, label, "plimg") 构件，素材名 `pl-<key>`、
     描述性 alt 存 channels.json[].img / img_alt（缺省时渲染器回落派生名）。
   ★ 容器 `aspect-ratio:5/3` 固定比例 ⇒ **有无素材都不产生布局位移**（CLS=0），
     720px 宽 WebP（每张 9–18KB）在 288px 卡宽下是 2.5x，够清晰。
   ★ 负外边距抵消 `.card` 的 22px 内边距，图区满幅出血到卡片圆角
     （`.mrow2 .card{overflow:hidden}` 负责裁切圆角，引导卡无图不受影响）。
   ★ 素材说明：当前 11 张为 AI 示意图（统一棚拍风格），上线后按《素材需求清单.md》
     替换为实拍图，文件名不变、重跑构建即生效。 */
.mrow2 .card{overflow:hidden}
.plimg{position:relative;flex:none;aspect-ratio:5/3;overflow:hidden;
  margin:-22px -22px 16px;
  background:linear-gradient(135deg,#EEF3F9,#DDE7F2)}
.plimg img{display:block;width:100%;height:100%;object-fit:cover}
.plimg u{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:#93A6BC;text-decoration:none}
/* 图区把 .ico 顶下来之后，图标与图之间用 .plimg 的下边距留白即可；
   窄屏 2 列 / 1 列时卡片变宽，比例不变，无需另写断点。 */

/* ---- 2. 全部型号索引：纯文本链接平铺（无参数 URL，爬虫全量可达路径） ----
   v13.12（2026-09-29）：默认只露 2 行，其余折叠；展开用**纯 CSS checkbox hack**。
   ★ 抓取安全性（三条硬约束，改这段前先读）：
     ① 128 条 <a> 全量写在 HTML 里，**不用 JS 注入** —— 折叠前后抓取端看到的 DOM 完全一样。
     ② 用 `max-height` + `overflow:hidden` 裁剪，**不用 display:none / visibility:hidden**
        —— 后者属于「隐藏内容」，百度对隐藏内容降权甚至不索引；被 overflow 裁掉的部分
        仍在渲染树里（display:block），照常解析。
     ③ 展开不依赖 JS —— `<label for>` 激活 `:checked`，兄弟选择器解除高度限制。
        没有「JS 没跑 ⇒ 内容不可见」的失败模式（这正是百度对懒加载折叠不收录的主因）。
   行高显式定为 24px（`height`+`line-height`+`box-sizing:border-box`）⇒ max-height 可精确
   算到 2 行 = 24×2 + 行间距 9 = 57px，不依赖字体渲染差异，第三行不会露出半截。 */
.idx{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-top:26px}
.idxlist{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px 14px;margin-top:16px;
  max-height:57px;overflow:hidden}
.idx-chk:checked ~ .idxlist{max-height:none}
.idxlist a{font-family:var(--mono);font-size:12px;color:var(--sub);
  height:24px;line-height:24px;box-sizing:border-box;padding:0;
  border-bottom:1px dashed var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idxlist a:hover{color:var(--blue);border-bottom-color:#C9DEF6}
/* 展开 / 收起控件：无 JS，靠 :checked 切换文案与箭头 */
.idx-more{display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:13px;font-weight:600;color:var(--blue);cursor:pointer;user-select:none;
  transition:color .15s}
.idx-more:hover{color:#1B5FA8}
.idx-more .idx-close{display:none}
.idx-more .idx-open::after{content:'▾';margin-left:4px;font-size:11px}
.idx-chk:checked ~ .idx-more .idx-open{display:none}
.idx-chk:checked ~ .idx-more .idx-close{display:inline}
.idx-chk:checked ~ .idx-more .idx-close::after{content:'▴';margin-left:4px;font-size:11px}
@media(max-width:1180px){.idxlist{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:860px){.idxlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.idxlist{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 3. 跨系列检索工具区（整块 noindex 工具化） ---- */
/* ★ 2026-11-09 业主第 1 条：20 → 24，与系列页 `.sh → .ptools` 的 24px 对齐。
   两页「标题 → 子频道条」的间距从此是同一个数（原来 20 / 26 各说各话）。 */
.toolsec .sh{margin-bottom:24px}
.toolsec .fcard{margin-top:14px}
.toolsec .note{margin-top:18px}
/* ★ 2026-11-09 业主第 4 条：「红框内容距离上面太近」——
   `.rtbar`（「全部产品共 N 款产品」那一行）紧贴 `.fcard` 底边，两者之间原本 0 间距，
   `fcard` 自己的 padding-bottom 就是全部留白，整行像是贴在筛选卡上。
   24px 与 `.toolsec .sh` 的下间距同一档 —— 这一节的纵向节奏统一用 24。 */
.toolsec .rtbar{margin-top:24px}

/* ===== P6 搜索行（2026-09-28；2026-09-29 定位与宽度按业主第 7 条调整） ===== */
/* 位置：产品中心 Banner 与「按产品线浏览」11 张卡之间，**横排**白底卡片。
   设计稿截图参考：左「热门关键词：」+ 一行 chip（后台自由增删）、右一字搜索框带放大镜。
   数据从 `data/products.json › list_page › searchbox` 取：
   · placeholder（input 占位文案）
   · hot_keywords（数组，每项一个 chip —— 后台 chip 编辑器自由增删）
   ★ 2026-09-29 业主第 7 条两处修正：
     ① **不再骑在 Banner 上**（原 `margin-top:-32px`）—— 完全落在 Banner 下方。
        上下间距分别由 Banner 的 `padding-bottom`(46px) 与下一个 `.sec` 的
        `padding-top`(52px) 提供，这里不再自己叠 margin。
     ② **宽度与下方内容严格一致** —— 外层改成 `.in`（全站唯一容器），
        因此这里的 `max-width` 必须去掉：`.in` 是 1280px 再减左右 padding 的**内容区**，
        而 `max-width:1280px` 是**外框**，两者差 44px，正是「搜索框比下面长一截」的成因。 */
.psearchrow{
  position:relative;z-index:5;
  /* ★ 与上方 Banner **留出间距**（业主 2026-09-29 第 7 条）。
     上一轮（06-29 第 7 条）把搜索框从「骑在 Banner 上」改成「落在 Banner 下方」，
     margin 归零后两者**贴死**了 —— 视觉上像 Banner 长了个白条。现在给 18px 呼吸，
     小屏收到 12px（见下方断点）。★ 只改 margin，宽度仍由外层 .in 决定，
     所以「与下方内容区同宽」的几何契约不受影响。 */
  margin:18px 0 0;
  max-width:none;                                  /* 宽度交给外层 .in，不在这里算第二遍 */
  padding:10px 22px 10px 24px;background:#fff;border-radius:12px;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(20,40,70,.10);
  display:grid;grid-template-columns:1fr 300px;gap:18px;
  align-items:center}
.psr-kws{display:flex;align-items:center;flex-wrap:wrap;
  gap:4px 12px;min-width:0}
.psr-kwlbl{font-weight:600;color:var(--ink);flex:none;font-size:13px}
.psr-kw{display:inline-flex;align-items:center;color:var(--ink);
  padding:2px 9px;border-radius:6px;font-size:13px;line-height:1.5;
  text-decoration:none;transition:background .15s,color .15s}
.psr-kw:hover,.psr-kw:focus{background:var(--bl, #F0F5FB);color:var(--blue);outline:0}
.psr-frm{display:flex;align-items:center;gap:4px;
  padding:3px 4px 3px 16px;border:1.5px solid var(--line);
  border-radius:999px;background:#FAFBFD;
  transition:border-color .15s,background .15s,box-shadow .15s}
.psr-frm:focus-within{border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(31,99,170,.08)}
.psr-frm input{flex:1;border:0;outline:0;background:transparent;
  font:inherit;font-size:13.5px;color:var(--ink);min-width:0;padding:3px 0;height:26px}
.psr-frm input::placeholder{color:#9AA8BC}
.psr-btn{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:0;border-radius:50%;background:transparent;
  color:var(--sub);cursor:pointer;flex:none;transition:color .15s}
.psr-btn:hover{color:var(--blue)}
.psr-btn svg{width:16px;height:16px}

/* ---------- 小搜索框 .psr-mini：系列页工具栏 / 产品列表 rtbar ----------
   ★ 2026-10-29 业主第 4 条：「在产品列表那一栏再加一个搜索框，方便用户继续搜索，
     可搜索范围与产品中心一样大」。语料、路由表、脚本都由 `_tools/psearch.py` 一处下发
     （不是各写一份），这里只是**同一个组件的另一种尺寸**，所以视觉复刻 .psr-frm 的
     胶囊输入框，只收小一档、不抢版面。
   ★ 只用类、不用 id：一个页面可能出现两个小搜索框（系列页工具栏 + 产品列表），
     id 会撞（撞了以后 `getElementById` 只认第一个，第二个框就"点了没反应"）。 */
.psr-mini{position:relative;display:flex;align-items:center;gap:2px;min-width:0;
  padding:1px 3px 1px 13px;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;transition:border-color .15s,box-shadow .15s}
.psr-mini:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(31,99,170,.08)}
.psr-mini input{flex:1;min-width:0;height:24px;border:0;outline:0;
  background:transparent;font:inherit;font-size:13px;color:var(--ink)}
.psr-mini input::placeholder{color:#9AA8BC}
.psr-mini button{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border:0;border-radius:50%;background:transparent;
  color:var(--sub);cursor:pointer;transition:color .15s}
.psr-mini button:hover,.psr-mini button:focus-visible{color:var(--blue)}
.psr-mini button svg{width:15px;height:15px}
/* 列表工具栏里：占住「标题」与「排序/视图」之间那段，宽度封顶，不把两侧挤走 */
.rtbar>.psr-mini{flex:1 1 200px;max-width:300px;margin-bottom:2px}
/* 系列页工具栏（.pmeta）里：固定宽度，「共 N 款 / 排序」排在它右侧 */
.pmeta>.psr-mini{width:210px}
/* 未命中提示：绝对定位挂在框下，不把工具栏顶高一截 */
.psr-tip{position:absolute;left:6px;top:calc(100% + 5px);z-index:5;
  padding:3px 8px;border-radius:6px;background:#fff;color:#C0392B;
  font-size:12px;line-height:1.5;white-space:nowrap;
  box-shadow:0 6px 16px rgba(20,40,70,.14)}
.psr-tip:empty{display:none}

/* 下拉结果：横跨整张卡的底部，绝对定位叠在内容之上 */
.psr-dd{position:absolute;left:22px;right:22px;top:calc(100% - 6px);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,40,70,.14);max-height:380px;overflow:auto;
  z-index:20}
.psr-item{display:flex;gap:14px;align-items:baseline;padding:10px 16px;
  border-bottom:1px solid #F1F4F8;text-decoration:none;color:inherit}
.psr-item:last-child{border-bottom:0}
.psr-item:hover,.psr-item:focus{background:#F5F8FC;outline:0}
.psr-model{font:600 13px var(--mono);color:var(--blue);min-width:90px}
.psr-name{font-size:13px;color:var(--ink);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.psr-empty{padding:16px 16px;text-align:center;color:var(--sub);font-size:13px}

/* 移动端：上下排，关键字独占一行、搜索框独占一行 */
@media (max-width:860px){
  .psearchrow{grid-template-columns:1fr;padding:10px 14px;gap:12px;margin:12px 0 0}
  .psr-dd{left:14px;right:14px}
}
@media (max-width:640px){
  .psr-kws{font-size:12.5px;gap:3px 9px}
  .psr-kw{font-size:12.5px;padding:2px 8px}
  .psr-model{min-width:auto;font-size:12.5px}
  .psr-name{font-size:12.5px}
}
/* ★ 同一个 .catbar 组件要能落在两种底色上：Banner 深蓝底（本文件 132-134 行的
   原样式，白字描边）与工具区的白底。这里只做**底色适配覆盖**，结构与交互不变。
   ——产品线切换条在工具区里是「筛选控件」，不再是 Banner 里的栏目 Tab；
   这是因为 屏 A v2 删掉了 Banner 的 12 频道 Tab（与下方 11 张产品线卡重复），
   参数化 URL 从此只允许出现在工具区。 */
.toolsec .catbar{margin-top:0;padding:16px 20px;background:#fff;
  border:1px solid var(--line);border-radius:16px;align-items:center}
.toolsec .catbar .cat{border-color:var(--line);color:var(--sub);background:#fff}
.toolsec .catbar .cat:hover{border-color:#C9DEF6;color:var(--blue)}
.toolsec .catbar .cat.on{background:var(--blue);border-color:var(--blue);color:#fff}
.toolsec .catbar .cat:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ★ 2026-09-24 业主追加：全站产品图位统一「正方形且边长减半」。
   容器已改 2:1（.pcard .pic / .gal .main 在本文件、.mc-img 在 style.css），
   这里把照片收成**等高正方形**居中——可见照片边长 = 容器宽的 1/2
   （products 卡 376→188、详情页主图 540→270、B 批型号卡约 274→137）。
   ★ 必须排在文件尾：本文件 line 547 的共享 img 规则（width:100%）与
     style.css 336 同名——同特异性靠后者胜出，这份是全站最后一次声明。
     .vpic（新闻配图）不参与，保持满容器。 */
.main img,.mc-img img,.pic img{width:auto;height:100%;aspect-ratio:1/1}
/* ★ 2026-10-30 业主第 2 条：新闻列表「置顶/焦点」卡图要与**新闻详情页首图**同比例。
   详情页首图是 `.art-hero`（16:9，800×450），焦点卡原来是 16:10，且被上面那句
   全站规则按 `.pic img` 收成**正方形**（width:auto + aspect-ratio:1/1）——
   于是 560×350 的框里只坐着一张 348×348 的方图，右侧空出一条渐变底，很扎眼。
   这里两处一起修：框改 16/9，图改满铺（`.nfocus .pic img` 特异性高于 `.pic img`，
   不依赖书写顺序）。object-fit 用 cover，与详情页同一个取景口径。 */
.nfocus .pic{aspect-ratio:16/9}
.nfocus .pic img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
/* ★ 2026-09-28 业主第 4 条：详情页主图**不再缩到 50%**，原样大小铺满正方形大框。
   原来这里有一句 `.gal .main img{height:50%}`（业主 2026-09-24 第 12 轮定的
   「照片边长 = 容器宽一半」口径），在 540×540 的框里只有 270×270，
   产品图看着比周围文字小一圈。现在 height:100% ⇒ 540×540。
   ★ 同时把 object-fit 改成 contain（全站默认是 cover）：产品图多是 4:3/16:9，
   cover 会把机身两侧/接口裁掉，contain 保证整机完整可见，不缩图也不裁图。 */
.gal .main img{height:100%;object-fit:contain}

/* ---------- v13.31 业主第 14 条：资料下载中心型号过滤框 ----------
   形态与产品中心的 .psr-frm 同一套（胶囊输入框 + 聚焦描边），
   但这是「表格上方的一个小框」，不需要按钮与下拉 —— 独立类不混用。 */
/* ★ 2026-10-28 业主第 14 条：搜索框**缩小并靠右**（原来是 320px 挤在左侧，
   和下面的表格左边缘不对齐，看起来像排版错位）。
   ★ 2026-10-29 业主第 3 条（五改）：
     ① 说明文字从标题区挪进本行 → 三栏：说明（左，可伸缩）/ 搜索框 + 计数（右）；
     ② 搜索框 240 → 170px（"缩小一点"）；
     ③ 行与表格之间留 20px（"搜索框不要和下面边框连着"）；
     ④ 三列等距：table-layout:fixed + 34/33/33，原先是 auto 布局，
        实测三列 170/551/477 —— 最后一列只有一个小链接却占 477px，
        观感就是"右侧空出一大片"。 */
.dl-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between}
/* ★ 2026-10-30 业主：下载中心「标题 → 副标题」间距过大（实测 39px）。
   拆开看是两段：① `.sh` 标题栏 26px 下边距 与 `.dl-bar` 的 margin-top **折叠取大值**
   （原来 .mt30 的 30px 赢，所以是 30）；② 这一行 `align-items:center`，输入框比文字高，
   文字又被压下 9px。故 30 + 9 = 39。
   ★ 2026-10-30 业主复核：25px 仍比 FAQ 那处大（FAQ 实测 9px），改以 FAQ 为准。
   本行是 flex（align-items:center），输入框比文字高 ⇒ 文字天然被压下 9px，
   所以「可见间距 = .sh 下边距 + 9」。要 9px 就把 .sh 下边距归零（0 + 9 = 9）。
   ★ 别去改 .dl-lead 的 margin —— 它在 flex 行里是居中项，加 margin 只会撑高整行。 */
#download .sh{margin-bottom:0}
#download .dl-bar.mt30{margin-top:0}
.dl-bar .dl-lead{margin:0;color:var(--sub);font-size:13.5px;line-height:1.6;
  flex:1 1 300px;min-width:0}
.dl-bar .dl-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.dl-bar input{flex:0 0 170px;min-width:140px;max-width:170px;padding:7px 14px;
  border:1.5px solid var(--line);border-radius:999px;background:#FAFBFD;
  font:inherit;font-size:13.5px;color:var(--ink);outline:0;
  transition:border-color .15s,background .15s,box-shadow .15s}
.dl-bar input:focus{border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(31,99,170,.08)}
.dl-bar input::placeholder{color:#9AA8BC}
.dl-bar .hint{color:var(--sub);font-size:13px;white-space:nowrap}
.dl-bar + .tblwrap{margin-top:20px}
/* ★ 2026-11-04 巡检：390px 下 `.dl-tools` 实测宽 378px（输入框 170 + 间距 12 + 提示 196），
   而它是 `flex:0 0 auto`、提示又是 `white-space:nowrap` ⇒ 不收缩、不换行，
   把 390 的视口撑出 **10px 横向滚动条**（只有 support.html 这一页中招，
   因为只有它同时有这一排「输入框 + 计数提示」）。
   窄屏把它整行放下：输入框独占一行，提示另起一行，两者都不再和容器抢宽度。 */
@media(max-width:620px){
  .dl-bar .dl-tools{flex:1 1 100%;margin-left:0;flex-wrap:wrap;row-gap:8px}
  .dl-bar input{flex:1 1 100%;max-width:none;min-width:0}
  .dl-bar .hint{white-space:normal}
}
/* 三列等距（业主第 3 条）：固定布局后列宽只由本规则决定，
   不再被内容长度带偏。资料名称最长，留 34% 保证不折行太碎。 */
.dl-tbl{table-layout:fixed;width:100%}
.dl-tbl th:nth-child(1),.dl-tbl td:nth-child(1){width:34%}
.dl-tbl th:nth-child(2),.dl-tbl td:nth-child(2){width:33%}
.dl-tbl th:nth-child(3),.dl-tbl td:nth-child(3){width:33%}
/* 资料下载分页（2026-10-28 业主第 2 条：每 20 条一页）。
   与站内列表分页同一观感：胶囊按钮、当前页实底，禁用态灰掉。 */
.dl-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  justify-content:flex-end;margin-top:14px}
.dl-pager button{font:inherit;font-size:13px;line-height:1;padding:7px 12px;
  border:1px solid var(--line,#E3E9F2);background:#fff;color:var(--text,#1B2534);
  border-radius:6px;cursor:pointer;transition:.12s}
.dl-pager button:hover:not(:disabled){border-color:var(--blue,#0B63F6);color:var(--blue,#0B63F6)}
.dl-pager button.on{background:var(--blue,#0B63F6);border-color:var(--blue,#0B63F6);color:#fff}
.dl-pager button:disabled{color:#A8B4C6;cursor:default;background:#F7F9FC}
.dl-pager .gap{color:#A8B4C6;padding:0 2px}

/* ---------- v13.31 业主第 10 条：下拉四卡跳 support 页内锚点 ----------
   固定页头（.top，高约 68px）是 sticky 的：不加 scroll-margin，
   锚点跳到位后板块标题会被页头压住一条。84px = 头高 + 16px 呼吸。 */
.sec[id]{scroll-margin-top:84px}
/* 手机端页头只有 59px（抽屉导航版），锚点跳转不需要再留 84px 的余量 */
@media(max-width:1080px){.sec[id]{scroll-margin-top:70px}}
/* ★ 2026-10-29 业主第 4、5 条：搜索结果 / 平台胶囊的落点是 `.rtbar` 上的 `#results`
   （不是这一节的 `#search` —— 那一节开头压着整张筛选卡，跳过去看不到产品）。
   它不是 `.sec`，所以上面那条规则管不到，这里补一条同样的 84px。 */
#results{scroll-margin-top:84px}

/* ---------- v13.31 业主第 9 条：「关于我们」下拉改两行七卡 ----------
   第一行 4 卡（公司简介 / 发展历程 / 资质荣誉 / 企业文化），
   第二行 3 卡（联系我们 / 信创产品互认证 / 信创里程碑）。
   .mrow2 默认 4 列（第 363 行）—— 补一个 .four 同口径，
   小屏折行行为沿用 .mrow2 既有断点，不另写。 */
.mrow2.four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ★ 2026-11-05：`.mrow2` 之前**一个响应式断点都没有**（注释里写「沿用既有断点」，
   实际不存在）。390px 屏上仍是 4 列 ⇒ 每张卡 80px 宽，产品线名「嵌入式工控机」
   被挤成一字一行、竖着排。这里按 3 / 2 / 1 列补齐，与 .grid 系列同口径：
   同时修好产品中心「按产品线浏览」、系列页「相关产品系列」两处。 */
@media(max-width:1080px){.mrow2,.mrow2.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.mrow2,.mrow2.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mrow2,.mrow2.four{grid-template-columns:minmax(0,1fr)}}

/* ---------- v13.31 业主第 11 条：新闻页「焦点轮播 + 置顶」 ----------
   轮播项全部在 DOM（无 JS 显示第一张），JS 只切 .on。16/6 横幅比例，
   说明条叠底渐变；圆点右上角。置顶区是轮播下的一条横栏。 */
.ncar{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:16px;background:linear-gradient(160deg,#EDF3FA,#D7E3F0)}
.ncar-item{display:none;position:relative;text-decoration:none;color:#fff}
.ncar-item.on{display:block}
.ncar-item .pic{aspect-ratio:16/5;border-radius:0;border:0;background:none}
/* ★ 必须把 width / height / aspect-ratio 三个都显式写回：
   第 1030 行的「产品图位边长减半」口径是 `.main img,.mc-img img,.pic img{
   width:auto;height:100%;aspect-ratio:1/1}` —— 它把轮播图压成 1:1 的左侧一小块，
   右边整片露白，标题块贴在图外的左下角（看起来像"图片没加载出来"）。
   只写 object-fit 盖不住它，因为宽度根本不是 100%。 */
.ncar-item .pic img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.ncar-item .pic::before,.ncar-item .pic::after{content:none}
/* ★ 圆点要显式抬到图片之上：`.pic img` 那条全局规则带 `z-index:1`。 */
.ncar-nav{position:absolute;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;
  display:flex;align-items:center;justify-content:center;padding:0;border:0;
  border-radius:50%;background:rgba(6,22,48,.42);color:#fff;cursor:pointer;
  backdrop-filter:blur(2px);transition:background .2s}
.ncar-nav:hover{background:rgba(6,22,48,.68)}
.ncar-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ncar-nav.prev{left:16px}
.ncar-nav.next{right:16px}
.ncar-nav svg{width:18px;height:18px}
.ncar-dots{position:absolute;right:18px;top:16px;z-index:3;display:flex;gap:8px;
  padding:7px 11px;border-radius:999px;background:rgba(6,22,48,.38)}
.ncar-dots i{width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.55);cursor:pointer;transition:background .15s,transform .15s}
.ncar-dots i.on{background:#fff;transform:scale(1.15)}
.ncar-dots i:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 置顶：横栏，与轮播同宽 —— 放同一个 .sec 里，视觉上是一组。 */
.npin{margin-top:14px;display:flex;align-items:center;gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 18px}
.npin ul{display:flex;flex-direction:column;gap:4px;min-width:0;list-style:none;margin:0;padding:0}
.npin li{display:flex;align-items:baseline;gap:12px;min-width:0}
.npin li a{color:var(--ink);text-decoration:none;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.npin li a:hover{color:var(--blue);text-decoration:underline}
.npin li time{flex:none;color:var(--sub);font-size:12.5px}
@media(max-width:620px){
  .ncar-item .pic{aspect-ratio:16/9}
  .npin{flex-direction:column;align-items:flex-start}
}

/* ---------- 居中大卡版末尾 CTA（.endcta-lg） ----------
   联系页 / 新闻页 / 首页 S7 共用：标题、副文、按钮**纵向居中**排列。
   ★ 2026-10-30 起规则**只在本文件定义**（原来写死在 home.css；联系页与新闻页
     不加载 home.css，搬过来才能用）。home.css 里那份已删除，别再抄回去。
   ★ 必须排在**文件最末**：`.endcta b{font-size:22px}` 在小屏媒体查询里还有一条
     19px，二者与 `.endcta-lg b` 选择器权重相同（0,1,1）—— 靠书写顺序定胜负。
     写在这之前，手机上大卡标题会被 19px 压掉。 */
.endcta-lg{flex-direction:column;text-align:center;justify-content:center;gap:20px;
  padding:52px 40px;border-radius:20px;transition:box-shadow .34s var(--ease)}
/* 网格底纹是列表页口径；大卡是纯净渐变，关掉 */
.endcta-lg::before{content:none}
.endcta-lg b{font-size:30px;line-height:1.36}
.endcta-lg .act{justify-content:center;gap:14px}
.endcta-lg:hover{box-shadow:0 10px 26px rgba(1,77,178,.20)}

/* ---------- 居中版末尾 CTA（.endcta-c，2026-11-02 业主第 2 条） ----------
   产品中心底部："所有文字内容居中"。
   ★ 与 .endcta-lg 的区别要守住：**只居中对齐**，不放大标题（22px 保持）、
     不加 padding、保留网格底纹。业主没要首页那种大卡，别顺手换掉字号节奏。
   ★ p 有 max-width:720px，不补左右 auto 会「块内居中、整体靠左」。 */
.endcta-c{flex-direction:column;text-align:center;justify-content:center;gap:22px}
.endcta-c > div:first-child{width:100%}
.endcta-c p{margin-left:auto;margin-right:auto}
.endcta-c .act{justify-content:center}

/* ---------- 相关页面 › 富卡片（.lk2，2026-10-30 信创里程碑页底部） ----------
   设计稿的四行结构：小标签 · 标题 · 说明 · 「查看 X →」。
   ★ 选择器必须写到 `.lk.lk2 .lk-d` 这一级：基础样式里 `.lk span{color:var(--sub);font-size:13px}`
     权重是 (0,1,1)，只写 `.lk-d`（0,1,0）会被它整条压掉（padding/字号都不生效，
     页面上看着像「改了没反应」—— 与 .cert-tbl 那次同一个坑）。
   ★ 卡片等高：`.links` 是 grid，四张卡同高；「查看 X →」用 margin-top:auto 钉在底部，
     说明文字长短不一时四行也齐。 */
.lk.lk2{display:flex;flex-direction:column;padding:17px 18px 15px;border-radius:12px}
.lk.lk2 .lk-k{
  font-family:var(--mono);font-size:10.5px;line-height:1.4;letter-spacing:.12em;
  color:#93A1B4;text-transform:uppercase;
}
.lk.lk2 b{font-size:15.5px;margin:7px 0 6px;line-height:1.4}
.lk.lk2 .lk-d{color:var(--sub);font-size:12.5px;line-height:1.65}
.lk.lk2 .lk-m{
  margin-top:auto;padding-top:14px;color:var(--blue);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;
}
.lk.lk2 .lk-m i{font-style:normal;transition:transform .16s var(--ease)}
.lk.lk2:hover .lk-m i{transform:translateX(3px)}

/* ---------- 认证证书 chip + 里程碑年度图 + 看图弹层（2026-11-02） ----------
   三个东西共用一套 data-img / .lbox 机制：
     · 认证清单的型号 chip（.chip.cimg）：右上角一个 ⊞ 提示「这儿能点开看图」
     · 里程碑每年的缩略图（.ms-pic）：卡片内左图右事件
     · 弹层（.lbox）：全屏遮罩 + 居中大图 + 图注
   动效只用 opacity：不引入 transform 缩放，避免低端机上看图卡顿。 */
.chip.cimg{
  cursor:zoom-in;font:inherit;font-size:13px;line-height:1.5;text-align:left;
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  transition:border-color .14s ease,background .14s ease;
}
.chip.cimg b{font-weight:600;color:var(--blue)}
.chip.cimg i{font-style:normal;font-size:12px;color:#7C8DA3}
.chip.cimg .cam{
  font-style:normal;font-size:10px;line-height:1;color:#A9BACE;
  padding-left:7px;border-left:1px solid #E4EBF3;transition:color .14s ease;
}
.chip.cimg:hover{border-color:#B9D4F2;background:var(--bl)}
.chip.cimg:hover .cam{color:var(--blue)}

/* 里程碑：卡片内「左图 + 右事件」，图 4:3 不打乱行高 */
.ms-bd{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:start}
.ms-pic{
  display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#F4F8FD;cursor:zoom-in;transition:border-color .14s ease;
}
.ms-pic img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .14s ease}
.ms-pic:hover{border-color:#B9D4F2}
.ms-pic:hover img{opacity:.9}
@media(max-width:620px){
  .ms-bd{grid-template-columns:minmax(0,1fr)}
  .ms-pic{max-width:260px}
}

/* 看图弹层 */
.lbox{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:4vh 4vw;background:rgba(8,18,32,.84);opacity:0;transition:opacity .18s ease;
}
.lbox.on{opacity:1}
.lbox figure{
  margin:0;max-width:min(880px,92vw);max-height:92vh;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lbox img{
  max-width:100%;max-height:76vh;border-radius:10px;background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}
.lbox figcaption{
  color:#E3EDF9;font-size:13px;line-height:1.65;text-align:center;max-width:min(760px,90vw);
}
.lbox figcaption a{color:#9CC6F5;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;margin-left:8px}
.lbox .x{
  position:absolute;top:20px;right:24px;width:40px;height:40px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.14);
  color:#fff;font-size:20px;line-height:38px;cursor:pointer;transition:background .14s ease;
}
.lbox .x:hover{background:rgba(255,255,255,.26)}
body.lbox-open{overflow:hidden}

/* ==========================================================================
   行业落地页（solution-manufacturing / -power / -rail / -medical）
   2026-11-02：四版行业设计稿落进正式站的第一版样式。
   ★ 版式取自 _design_drafts/ 的四份设计稿，但**页头页尾用现站外壳**
     （data/nav.json 驱动），不用设计稿里的占位页头页脚。
   ★ 类名统一加 .indp / .isc / .imc / .irc 前缀，避免与既有 .card / .pcard /
     .ind（solutions.html 的行业卡）等撞名 —— 本项目栽过「同名两义」的坑。
   ========================================================================== */

/* ---- banner 标签行：行业·场景 ｜ 已验证指标 ｜ 方案编号 ---- */
.ban .btags{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:20px;font-size:13.5px;color:#C9DAF3}
.ban .btags span{white-space:nowrap}

/* ---- 痛点卡（图标 + 标题 + 说明）---- */
.indp .ico{width:44px;height:44px;border-radius:12px;color:var(--blue)}
.indp .ico svg{width:22px;height:22px}

/* ---- 场景卡（图标 + 标题 + 英文副标 + 说明 + 适配）---- */
.isc .ico{width:44px;height:44px;border-radius:12px;color:var(--blue)}
.isc .ico svg{width:22px;height:22px}
.isc .en{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--blue);margin-top:6px}
.isc .fit{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;font-size:13px;color:var(--sub);line-height:1.7}
.isc .fit b{color:var(--ink);font-weight:600}

/* ---- 机型卡（型号 + 名称 + 一句话 + 要点 + 详情入口）---- */
.imc .md{font-family:var(--mono);font-size:12.5px;color:var(--blue);letter-spacing:.06em}
.imc h3{margin-top:6px}
.imc ul{display:grid;gap:6px;margin-top:11px}
/* ★ 2026-11-05 业主第 2 条：推荐机型的三条要点**不要**任何前缀符号。
   .imc li::before 原来画了个 9×9 圆角小方块（蓝边浅蓝底），业主看图后要求去掉。
   ⚠️ 光删 ::before 不够 —— <ul> 的默认 list-style:disc 之前被那个方块盖住了，
   删掉方块后圆点会露出来（截图实测踩到）。所以这里必须同时 list-style:none。 */
.imc ul{display:grid;gap:6px;margin-top:11px;list-style:none;padding:0}
.imc li{font-size:13.5px;color:var(--sub);line-height:1.75}
.imc .go{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--blue)}
.imc .go:hover{text-decoration:underline}

/* ---- 可靠与合规卡（图标在左的横排）---- */
.irc{flex-direction:row;align-items:flex-start;gap:14px}
.irc .ico{color:var(--blue)}
.irc h3{margin-top:0}
.irc p.d{margin-top:6px}

/* ---- 解决方案总览的「查看完整方案 →」（四个重点行业有独立落地页）---- */
.card.ind .more{margin-top:12px;font-size:13.5px;font-weight:600}
.card.ind .more a{color:var(--blue)}
.card.ind .more a:hover{text-decoration:underline}

/* ==========================================================================
   手机端分页条（2026-11-03 业主：手机页码只显示 3 个数字）
   --------------------------------------------------------------------------
   数字由 app.js 收到 3 个（服务端仍输出 5 个，口径不动），但光收数字还不够：
   3 个数字 + 两个省略号 + 上一页/下一页 = 352px > 346px 可用宽，照样折行。
   所以这一条同时把按钮的内边距与间距收窄 —— 实测 390px 从 400px 降到 323px，
   一行放得下；≤620 之外的所有宽度不受影响（桌面连一个 padding 都没变）。
   ========================================================================== */
@media(max-width:620px){
  .pager{gap:10px;margin-top:20px}
  .pager .meta{font-size:12px}
  .pages{gap:5px}
  .pg{min-width:30px;height:32px;padding:0 8px;font-size:13px;border-radius:8px}
}

/* ==========================================================================
   手机端「企业微信」浮层：常驻卡片 → 右下角圆形按钮（2026-11-03）
   --------------------------------------------------------------------------
   原来 62×98 的卡片固定在 right:10 / top:50%，手机一屏只有 390px，它常驻压住正文：
   实测压掉首页/产品页一行字，产品列表第 6 页的「下一页」整枚按钮被它盖死 ——
   分页条收窄成 3 个数字后仍然点不到，等于白改。
   改成：右下角 52px 圆形按钮（只显示「客服」两字），点一下才铺成二维码卡；
   点按钮以外任意处、或视口拉宽，都会自动收起。
   桌面（>620px）完全不受影响 —— 这一整块只在手机断点里生效。
   ========================================================================== */
@media(max-width:620px){
  .wx-float{
    top:auto;bottom:14px;right:10px;transform:none;
    width:52px;height:52px;padding:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  /* 收起态只留一个「客服」圆点：内容一律藏起来
     ★ 逐个子元素点名而不用 `> *` —— `.wx-float img`（0,1,1）比 `> *`（0,1,0）更硬，
       写成通配会被 img 的 display:block 反过来压住。 */
  .wx-float:not(.on) > img,
    .wx-float:not(.on) > b,
  .wx-float:not(.on) > span{display:none}
  .wx-float:not(.on)::before{
    content:'客服';font-size:11.5px;font-weight:600;color:var(--blue);letter-spacing:.02em;
  }
  /* 展开态：还是那张卡，只是从底部立起来 */
  .wx-float.on{
    width:126px;height:auto;padding:9px 8px 8px;border-radius:12px;
    display:block;text-align:center;
  }
  .wx-float.on img{width:96px;height:96px;margin:0 auto 6px}
}

/* 再往下一档：360（安卓主流）/ 320（iPhone SE 一代）
   --------------------------------------------------------------------------
   3 个数字的整条在 390px 是 338px；到 360px 可用宽只有 316 —— 还差 22px，
   会重新折成两行（「下一页」又掉下去）。两档只收按钮的内边距与间距，
   不动字号以外的任何东西；不换文案（「上一页/下一页」四个字比箭头好认）。 */
@media(max-width:380px){
  .pages{gap:4px}
  .pg{min-width:28px;padding:0 6px}
}
@media(max-width:340px){
  /* gap 4→3：320px 下整条算出来是 276.03px，容器正好 276 —— 差 0.03px 也会折行 */
  .pages{gap:3px}
  .pg{min-width:26px;padding:0 5px;font-size:12px}
}

/* ==========================================================================
   客户案例：一页看完（2026-11-05 业主第 1 条）
   --------------------------------------------------------------------------
   背景：原来 cases.html 只放 6 张摘要卡，点进去是 case/<slug>.html 详情页。
   业主要求「所有案例总结到一个页面，也只显示一个页面」⇒ 6 个案例各做成一张
   **完整卡**（编号 / 难点·方案·结果三步 / 概况表 / 产品链接），详情页下线。

   ★ 不做左右分栏：案例只有 pain/plan/result 三段 + 4 条 facts，没有实拍图
     （assets 里只有 og-*.jpg 分享卡，没有现场照）。硬做「左文右图」只会
     得到大片留白 —— 那正是详情页被嫌"太空"的原因。
     改用「编号 + 三步横排 + 底部概况表」，靠结构而不是图片撑满版面。
   ★ 卡片仍带 data-cat，容器仍是 [data-nlist]，行业 Tab 筛选逻辑不受影响。
   ========================================================================== */
.cases-all{display:grid;gap:26px;margin-top:30px}
.caseblk{background:var(--w);border:1px solid var(--line);border-radius:18px;
  padding:34px 36px 30px;scroll-margin-top:96px}
/* 编号行：一条蓝短线 + CASE 01 + 竖线分隔的行业名 —— 不再两枚药丸并排（2026-11-05 业主） */
.cbm{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.cbno{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--blue)}
.cbno::before{content:"";width:20px;height:2px;background:var(--blue);border-radius:2px}
.caseblk .cbm .tag{margin:0;padding:0 0 0 13px;background:none;border-radius:0;
  border-left:1px solid var(--line);font-family:var(--sans);font-size:12.5px;
  letter-spacing:.02em;color:#8296AE}
.caseblk .cbt{font-size:25px;line-height:1.42;margin:0;letter-spacing:-.015em;font-weight:700}
/* 三步：拆掉三个盒子，改成「顶部细线 + 序号 + 标题 + 正文」的开放三栏。
   短内容不再显得"卡里有空洞"——没有边框就不存在被框住的留白。 */
.cbsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:26px}
.cbs{padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cbs .n{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;color:#9FB6D2}
.cbs h4{font-size:15.5px;margin:0;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.cbs p{font-size:14px;line-height:1.88;color:var(--sub);margin:0}
/* 第三步（运行结果）：顶线/序号换主色、结论加深 —— 一屏里的落点，但仍不加盒子 */
.cbs.res{border-top-color:var(--blue)}
.cbs.res .n{color:var(--blue)}
.cbs.res p{color:var(--ink);font-weight:600}
.cbfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.cbdl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 26px;
  margin:0;flex:1;min-width:0}
.cbdl>div{min-width:0}
.cbdl dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:#8296AE;font-weight:400}
.cbdl dd{margin:4px 0 0;font-size:14px;color:var(--ink);line-height:1.6}
.cbfoot .lnk{flex:none;white-space:nowrap;font-size:13.5px}
@media(max-width:1000px){
  .cbsteps{grid-template-columns:1fr;gap:20px}
  .cbdl{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ★ 字段区与右下的产品链接在窄屏必须上下堆叠：cbdl 是 flex:1 + min-width:0，
     不换行就一路缩到 100px，字段值被折成三行（手机实测）。 */
  .cbfoot{flex-direction:column;align-items:stretch;gap:16px}
  .cbfoot .lnk{align-self:flex-start}
}
@media(max-width:620px){
  .caseblk{padding:24px 20px 22px}
  .caseblk .cbt{font-size:20px}
  .cbsteps{gap:18px}
  .cbdl{grid-template-columns:1fr;gap:13px}
}

/* ==========================================================================
   行业筛选页正文（cases.html?ind=…，2026-11-05 业主第 2 条）
   --------------------------------------------------------------------------
   由来：业主截图指出「点行业 Tab 进去，每个页面内容太少」。原来的筛选态
   只有 1 个案例 + 一组全站数据，整页正文不到 500 字。
   现在补上：行业概览（左文右工况表）/ 现场难点 / 典型场景 / 选型口径 /
   交付验证（复用 .steps）/ FAQ（复用 .faq）/ 相关内链。
   ★ 全部沿用站点的白卡 + 1px 描边 + mono 小标签体系，不新造一套视觉语言；
     浅底/白底交替靠 .sec.alt（构建器给 data-part 那几段），这里只写卡内样式。
   ★ 断言：390px 下不得横向溢出（`.inden` / `.ispec` 在窄屏改为上下堆叠）。
   ========================================================================== */
/* 概览：**左文右表**，整块与下方难点区（.indpain）同宽 1200。
   ★ 2026-11-05 业主第 2 条：「排版不好，换成左右，左文右表，区块宽度要和下面区块的宽度一样」。
     原来上下堆叠、整块 `max-width:940` ⇒ 页面右侧空出 260px，越往下越像"只有左半边有内容"；
     而下面的难点三栏、选型口径、交付清单都是 1200 —— 宽窄跳两次，视线一路往右掉。
   ★ 左栏放"解释"（导语 + 编者按），右栏放"条件"（现场工况表）：两者是"为什么"与"什么环境"，
     并排读得通，也解释了为什么右边必须是表而不是又一段正文。
   ★ 1200 - 56 间距 = 1144，按 1.05:1 分成 586 / 558。右栏 558 - 52 内边距 = 506 给四行键值表，
     值列 390，最长一条（22 字 ≈ 290px）仍是一行。 */
/* ★ 2026-11-05 业主追加：「红框内右侧的区块要和左面差不多高」。
   上一版 align-items:start，右表只由四行内容撑开 ≈ 250px，左栏文字 ≈ 330px，
   右下空掉一截（截图里红箭头指的就是它）。改 stretch 让两栏**严格等高**；
   只等高还不够 —— .ienv 内部必须把多出来的高度摊给四行，否则内容全挤在顶部、
   底部留一片白，看起来仍是"矮了一截"。所以 .ienv 走 flex 列、.inden flex:1 +
   align-content:space-evenly，四行均匀铺满，分隔线也跟着等距。 */
.iov{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 56px;align-items:stretch;margin-top:22px}
/* 概览左栏：导语 + 承接说明（左侧竖线）。
   ★ 2026-11-05 业主先后否掉「左文 + 右窄表（表挂角落、右下一片空）」和
     「大段正文 + 通栏深色带」；现在宽度由 .iov 给，这里只负责文字层级。 */
.indintro{margin:0;max-width:none}
.indintro .ilead{font-size:18.5px;line-height:1.92;color:var(--ink);margin:0;
  letter-spacing:0}
/* 承接说明：不用卡片、不用顶部彩条，只在**左侧**压一道主色竖线 —— 与"被强调的一段话"
   这个语义一致，也不会像顶部长条那样把区块切出一道横线。 */
.indintro .inote{margin:18px 0 0;padding:14px 20px;background:#F4F8FE;
  border-left:3px solid var(--blue);border-radius:0 10px 10px 0;
  font-size:14.2px;line-height:1.92;color:#33465C}
.indintro .itx{margin-top:16px}
.indintro .itx p{font-size:14.5px;line-height:1.95;color:var(--sub);margin:0 0 12px}
.indintro .itx p:last-child{margin-bottom:0}

/* 现场工况 = 白底「参数表」：一行表头 + 四行「键 / 值」。
   ★ 原来是整条深色带（Banner 同色系）+ 顶部淡蓝渐变线 —— 业主认为"这种区块排版不好"。
   ★ 2026-11-05 第 2 版：进右栏后宽度只有 ~558，2×2 会把值挤成两行、末行只剩几个字，
     改成**四行键值表**（键 96px + 值 1fr）：行数与数据一致，阅读像规格表，
     也和产品详情页的「参数名 / 参数值」同一套语言。 */
.ienv{margin:0;max-width:none;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:0 26px;display:flex;flex-direction:column}
.ienv-h{display:flex;align-items:baseline;gap:10px;padding:17px 0 13px;
  border-bottom:1px solid var(--line)}
.ienv-h b{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.ienv-h span{font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.2em;color:#A8BCD4}
/* ★ 不做 text-wrap:balance：中文按字断行，均衡后会出现"电压波/动""焊机带/来的"
   这种把词拆开的断法，比末行短更难读。
   ★ flex:1 + align-content:space-evenly 是「右表等高」的另一半（见 .iov 注释）：
     表头固定，剩余高度由四行均分；窄屏单列时 .ienv 高度由内容定，这两条自然失效。 */
.inden{list-style:none;display:grid;grid-template-columns:1fr;
  gap:0;margin:0;padding:10px 0 14px;flex:1;align-content:space-evenly}
.inden li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
  align-items:baseline;padding:11px 0;border-top:1px solid var(--line)}
.inden li:first-child{border-top:0}
/* 参数名用正文字体（不用 mono）：它是"字段名"，要和值形成名/值层级，
   而不是又一个技术标签；mono 留给表头的 ENVIRONMENT 与全站编号。 */
.inden b{font-size:12.5px;font-weight:600;color:var(--ink);
  letter-spacing:.01em;line-height:1.7}
.inden span{font-size:13.2px;line-height:1.72;color:#44576E}

/* 现场难点 = **三张白卡**（2026-11-05 业主第 1 条：「恢复为原样，只是去掉上面的蓝色图标」）。
   ★ 演变：① 原版三卡 + 左上角 34×3 蓝条（"蓝色段在上面的不好"）→ ② 拆成三栏说明
     → ③ 业主现在要卡片回来，但**不要那条蓝图标**。
     所以 `.ipain::before` 永久不得回归（`_verify_cases_filter` H 段盯着），
     卡片本身的底/边/圆角按全站卡语言（同 `.iscene`：白底 + 1px 描边 + r16）。
   ★ 三栏等高由 grid 默认 stretch 保证。 */
.indpain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:26px}
.ipain{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;display:flex;flex-direction:column;gap:8px}
.ipain .no{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--blue)}
.ipain h3{font-size:17px;line-height:1.5;margin:0;letter-spacing:-.01em}
.ipain p{font-size:13.8px;line-height:1.92;color:var(--sub);margin:0}

.indscene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.iscene{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.iscene h3{font-size:18px;line-height:1.45;margin:0 0 8px}
.iscene p{font-size:14px;line-height:1.85;color:var(--sub);margin:0}
.iscene .need{margin:14px 0 0;padding-top:13px;border-top:1px dashed var(--line);
  display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:var(--ink)}
.iscene .need b{flex:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  color:var(--blue);background:var(--bl);border-radius:5px;padding:2px 7px}

/* 选型口径：两列「项目 / 建议」，界面上就是一张表，便于被引擎摘成表格 */
.indspec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:26px 0 0;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ispec{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:baseline;
  background:#fff;padding:18px 22px}
.ispec dt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#8296AE}
.ispec dd{margin:0;font-size:14px;line-height:1.8;color:var(--ink)}

/* 交付与验证 = 编号清单（2026-11-05 业主：四张卡"排版不好"）
   ★ 不用全站 .steps：它是 5 列网格，这里只有 4 步 ⇒ 永远空一格；250px 宽的卡
     把中文正文切成一行 16 字，断句碎。
   ★ 也不用「一行一步」的通栏列表：说明只有 40~50 字，一行就结束，右侧会空掉一半。
     两列 × 两行、去掉卡片边框，每项 570px（说明一行 32 字、正好两行），
     左侧编号跨两行做栅格锚点 —— 宽度用满，也没有盒子套盒子。 */
.ideliver{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 56px;margin-top:26px}
.idv{display:grid;grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"n t" "n d";gap:6px 20px;align-items:start;
  padding:22px 0;border-top:1px solid var(--line)}
.idv .dn{grid-area:n;font-family:var(--mono);font-size:24px;line-height:1.15;
  font-weight:700;letter-spacing:-.03em;color:#93AECB}
.idv h4{grid-area:t;margin:0;font-size:16.5px;line-height:1.5;font-weight:700;
  letter-spacing:-.01em}
.idv p{grid-area:d;margin:0;font-size:14.2px;line-height:1.85;color:var(--sub)}

.indlinks{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px dashed var(--line)}
.indlinks>span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:#8296AE}
.indlinks a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--blue);
  background:var(--bl);border:1px solid #CFE1F7;border-radius:999px;padding:6px 14px;
  transition:background .18s,color .18s,border-color .18s}
.indlinks a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ★ 1080 就切换，而不是 1000：1024 视口下内容区只剩 718px 给 4 列参数，
   正好卡在折行边缘（4×180=720 > 718）—— 差 2px 就变成 3+1 两行，第 4 项孤零零。
   1080 与站点的导航断点同一条线，也留足余量。 */
@media(max-width:1080px){
  /* 概览：左右两栏在 1080 以下并排放不下（左 500 / 右 480，导语一行只剩 26 字）
     → 叠成上下，表格回到满宽（此时满宽本来就是 718，不需要 max-width） */
  .iov{grid-template-columns:1fr;gap:0}
  .iov .ienv{margin-top:26px}
  /* 参数表（四行键值）在窄屏只收内边距 */
  .ienv{padding:0 22px}
  /* 交付清单：单列，编号仍跨两行 */
  .ideliver{grid-template-columns:1fr;gap:0}
  .idv{grid-template-columns:56px minmax(0,1fr);gap:7px 18px;padding:20px 0}
  .idv .dn{font-size:22px}
}
@media(max-width:1000px){
  /* 三张卡 → 单列堆叠（卡片形态保留，不再换成竖线分栏） */
  .indpain{grid-template-columns:1fr;gap:14px}
  .ipain{padding:24px 24px}
  .indscene{grid-template-columns:1fr}
  .indspec{grid-template-columns:1fr}
}
@media(max-width:620px){
  .iscene{padding:22px 20px}
  .ispec{grid-template-columns:1fr;gap:4px;padding:15px 18px}
  .indlinks a{font-size:13px;padding:5px 12px}
  .indintro .ilead{font-size:17px;line-height:1.88}
  .indintro .inote{padding:13px 16px;font-size:13.6px;line-height:1.88}
  .ienv{padding:0 18px;border-radius:14px}
  .inden{padding:8px 0 12px}
  .inden li{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px 0}
  .inden span{font-size:13px}
  .ipain{padding:22px 20px}
  .idv{grid-template-columns:40px minmax(0,1fr);gap:5px 14px;padding:18px 0}
  .idv .dn{font-size:20px}
  .idv h4{font-size:15.5px}
  .idv p{font-size:14px}
}