/* 2026-09-14 改（按要求）：
   ① [class~="po-page"] 不再写 font-family / font-size —— 字体型号与基准字号跟随客户原页面，上下一致；
      （原来硬写 -apple-system… / 16px，和客户页面自带字体不一致）
   ② 标题/表格字号由固定 px 改为 em（相对继承来的正文字号）—— 整块随客户页面等比缩放，
      既"跟客户页面一致"，又保证标题与正文的层级比例不走样（不会出现标题和正文一样大）。
   ③ h2 / h3 / FAQ 问题显式 font-weight:700 —— 不再依赖浏览器对标题的默认加粗，
      避免客户主题把 h2/h3 重置成 400 后看起来"没加粗"（正文里也不再需要塞 <strong>）。
   ④ 不再写 max-width + margin:0 auto —— 原来是 1180px 定宽居中，在比它宽的页面里
      会左右各留一段空白、看起来"缩进/居中"，和客户原页面靠左的内容对不齐。
      现在整块跟随所在容器宽度、靠左排版。
   ⑤ [class~="po-page"] 加 clear:both —— 客户原描述常常以 float:left 的图片收尾，我们的块紧跟其后
      会被"绕排"到图片右边的窄栏里（实测 signowa 的 SIG-X1M 页：3 张浮动大图把整块挤成半栏）。
      清浮动后整块永远另起一行、占满宽度。 */
[class~="po-page"]{color:#1a202c;line-height:1.7;clear:both}
[class~="po-page"] h2{clear:both;font-weight:700;font-size:1.75em;line-height:1.25;margin:56px 0 18px;padding-bottom:10px;border-bottom:1px solid #e2e5ec;position:relative;letter-spacing:-.015em}
[class~="po-page"] h2::before{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;background:#1e40d8;border-radius:3px}
[class~="po-page"] h3{font-weight:700;font-size:1.25em;line-height:1.35;margin:34px 0 12px;display:flex;align-items:center;gap:10px}
[class~="po-page"] h3::before{content:"";width:6px;height:6px;border-radius:50%;background:#1e40d8;flex:none}
[class~="po-page"] p{margin:0 0 18px}
[class~="po-page"] ul,[class~="po-page"] ol{margin:0 0 18px;padding-left:22px}
[class~="po-page"] li{margin-bottom:8px}
[class~="po-page"] .po-table-wrap{border:1px solid #eef0f4;border-radius:12px;overflow:hidden;background:#fff;margin:14px 0 18px}
[class~="po-page"] table.po-table{width:100%;border-collapse:collapse}
[class~="po-page"] .po-table th,[class~="po-page"] .po-table td{padding:13px 18px;border-bottom:1px solid #eef0f4;text-align:left}
[class~="po-page"] .po-table thead th{background:#f7f8fb;color:#52525b;font-weight:700}
[class~="po-page"] .po-table tbody tr:last-child td{border-bottom:0}
[class~="po-page"] .po-table tbody tr:nth-child(even){background:#fbfcfe}
[class~="po-page"] .po-faq-list{border-top:1px solid #eef0f4}
[class~="po-page"] .po-faq-item{border-bottom:1px solid #eef0f4;padding:22px 0}
[class~="po-page"] .po-faq-item h3{margin:0 0 8px;font-size:1.125em;font-weight:700}
[class~="po-page"] .po-faq-item p{margin:0;color:#52525b}
/* 项目符号列表：普通单列圆点列表。
   2026-09-13 改：原来这里是 display:grid 的多列卡片，短文本配大卡片又空又乱，
   而且每页都用同一种卡片 → 视觉上"一眼看出是模板"。按要求改为最朴素的单列分点。 */
[class~="po-page"] ul.po-list{list-style:none;padding:0;margin:0 0 18px}
[class~="po-page"] ul.po-list>li{position:relative;padding-left:20px;margin-bottom:10px}
[class~="po-page"] ul.po-list>li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:#1e40d8}
[class~="po-page"] ul.po-list>li strong{font-weight:700}
/* 2026-10-14 新增：配图排版（产品落地页式；用户看过 D 版实测效果后定的）
   为什么改：原来的图带内联 max-width:100% —— 站点图多是 1000px 见方的方图，
   满宽时**每张就占 1000px 高**，实测 UPBI287 一条 14 张图把页面撑到 19922px；
   缩到 200–380px 并轮换版式后同一页 6474px（−67%），观感也从"图片墙"变成产品页节奏。
   版式：单图按模块轮换 左浮 / 右浮 / 居中 / 小图 / 大图（相邻模块不重样）；
        连排图走 .po-media--row（flex 一行 2–3 张，每张一样大）。
   h2 已加 clear:both，浮动图不会越界到下一个模块。 */
[class~="po-page"] .po-media{margin:16px 0}
[class~="po-page"] .po-media img{display:block;width:auto;max-width:100%;max-height:320px;height:auto;border-radius:10px;box-shadow:0 3px 12px rgba(15,23,42,.10)}
[class~="po-page"] .po-media--center{text-align:center;margin:20px 0}
[class~="po-page"] .po-media--center img{margin:0 auto;max-height:320px}
[class~="po-page"] .po-media--row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:flex-start;margin:18px 0}
[class~="po-page"] .po-media--row img{max-height:320px}
@media (max-width:720px){[class~="po-page"] h2{font-size:1.5em}[class~="po-page"] h3{font-size:1.125em}[class~="po-page"] ul,[class~="po-page"] ol{padding-left:18px}}
[class~="po-page"] .po-media-split{display:flex;gap:26px;align-items:center;margin:22px 0}
[class~="po-page"] .po-media-split>.po-media{flex:0 0 auto;margin:0;text-align:left}
[class~="po-page"] .po-media-split>.po-media img{margin:0}
[class~="po-page"] .po-media-split>.po-split-text{flex:1 1 auto;min-width:0}
[class~="po-page"] .po-media-split>.po-split-text>*:first-child{margin-top:0}
@media (max-width:720px){[class~="po-page"] .po-media--row img{max-height:180px}[class~="po-page"] .po-media-split{flex-direction:column;gap:10px}[class~="po-page"] .po-media-split>.po-media{flex:none;width:auto;max-width:none}[class~="po-page"] .po-media-split--rev>.po-split-text{order:2}[class~="po-page"] .po-media-split--rev>.po-media{order:1}}