@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');
:root{
--ink:#22282e; --ink2:#31363d; --ink3:#3d444d; --steel:#5a636e;
--body:#4d555f; --muted:#7d8794; --faint:#9aa4b0;
--line:#e2e6ea; --line2:#eef1f4; --bg:#ffffff; --soft:#f6f8fa;
--brand:#ffc400; --brand-d:#e6ae00; --brand-s:#fff8e1; --brand-ink:#1a1d21;
--radius:8px; --maxw:1200px; --hdr:112px;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--bg);line-height:1.75;font-size:15.5px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3,h4,h5{line-height:1.3}
/* ---------- topbar ---------- */
.tbar{background:var(--ink);color:#9aa4b0;font-size:12.5px}
.tbar .wrap{display:flex;align-items:center;gap:22px;height:38px;flex-wrap:wrap}
.tbar a:hover{color:var(--brand)}
.tbar .sp{margin-left:auto}
.tbar .dot{width:1px;height:12px;background:var(--ink3);display:inline-block}
.tbar-soc{display:flex;align-items:center}
.tbar .soc{gap:6px}
/* 顶栏社媒图标：弱化填充、只做小描边。容器 22px / 图形 13px
（2026-09-23 用户确认：原设计 18/10 偏小，放大一档增加存在感）。 */
/* 必须带 .tbar 前缀提高特异性：下方通用的 .soc a(34px)/.soc svg(17px) 同为 (0,1,1)
且出现更晚，会把顶栏图标覆盖撑大到 34px（曾在桌面端表现为「图标过大、比例失调」）。 */
.tbar .soc-sm a{width:22px;height:22px;border-radius:6px;background:transparent;border:1px solid rgba(255,255,255,.12)}
.tbar .soc-sm svg{width:13px;height:13px;fill:#7f8894}
.tbar .soc-sm a:hover{background:rgba(255,255,255,.07);border-color:var(--brand)}
.tbar .soc-sm a:hover svg{fill:#fff}
/* 顶栏固定 38px 且不换行（小屏由下方 .tbar-sm 规则收缩字号） */
.tbar .wrap{flex-wrap:nowrap;overflow:hidden}
/* ---------- header ---------- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hdr-in{display:flex;align-items:stretch;gap:8px;height:72px}
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* 品牌标记：链环互扣 NEWBAS 记号（透明底 PNG，高度随页头缩放，宽度自动） */
.logo picture{display:flex;align-items:center;flex:0 0 auto}
.logo-m{display:block;height:42px;width:auto;flex:0 0 auto}
.logo-t{display:flex;flex-direction:column;line-height:1.15}
.logo-t b{color:var(--ink);font-size:16.5px;font-weight:700;letter-spacing:.01em}
.logo-t small{font-size:10px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.nav{display:flex;align-items:center;margin-left:auto}
.nav>div{position:relative}
.nav>div>a,.nav>a{display:flex;align-items:center;gap:5px;padding:0 15px;height:72px;font-size:14.5px;color:var(--ink);font-weight:500;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav>div>a:hover,.nav>a:hover{color:var(--brand-d)}
.nav>div>a.on,.nav>a.on{color:var(--ink);border-bottom-color:var(--brand)}
.nav .caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55}
.nav .btn-q{margin-left:14px;align-self:center}
.btn-q{background:var(--brand);color:var(--brand-ink)!important;font-weight:600;font-size:14px;padding:0 20px;height:42px;display:inline-flex;align-items:center;border-radius:6px;transition:background .15s}
.btn-q:hover{background:var(--brand-d);color:var(--brand-ink)!important}
.lang{font-size:13px;color:var(--muted);padding:0 4px;height:72px;display:flex;align-items:center}
.lang:hover{color:var(--ink)}
/* 语言切换器（多语言下拉）：桌面端视觉与原 .lang 文字链接保持一致。
不用 JS —— :hover 供鼠标，:focus-within 供键盘 Tab 与触屏点按也能展开。 */
.langsel{position:relative;display:flex;align-items:center;height:72px}
.langsel-btn{font:inherit;font-size:13px;color:var(--muted);background:none;border:0;cursor:pointer;
display:flex;align-items:center;gap:5px;padding:0 4px;height:72px}
.langsel-btn:hover,.langsel-btn:focus-visible{color:var(--ink)}
.langsel-menu{display:none;position:absolute;top:56px;right:0;z-index:60;min-width:130px;
list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);box-shadow:0 14px 30px rgba(20,26,34,.14)}
.langsel:hover .langsel-menu,.langsel:focus-within .langsel-menu,.langsel.open .langsel-menu{display:block}
.langsel-menu a{display:block;padding:8px 12px;border-radius:6px;font-size:13px;color:var(--steel);white-space:nowrap}
.langsel-menu a:hover{background:var(--soft);color:var(--ink)}
.langsel-menu a.on{color:var(--ink);font-weight:500;background:var(--brand-s)}
/* mega menu */
.mega{position:absolute;top:72px;left:0;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brand);
box-shadow:0 18px 40px rgba(20,26,34,.13);padding:26px 28px;display:none;min-width:640px;z-index:70}
.nav>div:hover .mega{display:block}
.mega-g{display:grid;grid-template-columns:1fr 1fr;gap:6px 34px}
.mega.wide{min-width:720px}
.mega-h{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;
grid-column:1/-1;margin:2px 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line2)}
.mega a{display:block;padding:7px 10px;margin:0 -10px;border-radius:5px;font-size:14px;color:var(--body);transition:.13s}
.mega a:hover{background:var(--soft);color:var(--ink)}
.mega a b{display:block;color:var(--ink);font-weight:600}
.mega a span{font-size:12.5px;color:var(--muted)}
.mega-ft{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);font-size:13px}
.mega-ft a{display:inline;padding:0;margin:0;color:var(--brand-d);font-weight:600}
.mega-ft a:hover{background:none;text-decoration:underline}
.burger{display:none;margin-left:auto;align-self:center;background:none;border:1px solid var(--line);border-radius:6px;width:42px;height:38px;color:var(--ink);font-size:18px;cursor:pointer}
@media(max-width:1000px){
.hdr-in{height:60px}
.logo-m{height:36px}
.nav{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;
border-top:1px solid var(--line);box-shadow:0 14px 30px rgba(20,26,34,.12);max-height:calc(100vh - 60px);overflow-y:auto;padding:6px 0}
.nav.open{display:flex}
.nav>div>a,.nav>a{height:auto;padding:13px 28px;border-bottom:1px solid var(--line2);border-left:none}
.nav .btn-q{margin:14px 28px 18px;align-self:flex-start}
.lang{height:auto;padding:13px 28px;border-bottom:1px solid var(--line2)}
/* 移动端：切换器放进抽屉，菜单改为静态展开（没有悬停，展开更简单可靠） */
.langsel{height:auto;display:block;padding:0 28px;border-bottom:1px solid var(--line2)}
.langsel-btn{height:auto;padding:13px 0;width:100%;justify-content:flex-start}
.langsel-menu{display:block;position:static;min-width:0;border:0;box-shadow:none;padding:0 0 8px}
.langsel-menu a{padding:8px 0}
.mega{position:static;display:block;border:none;border-top:none;box-shadow:none;padding:6px 28px 12px;min-width:0}
.mega-g{grid-template-columns:1fr}
.burger{display:block}
.hdr-in{position:relative}
.tbar .wrap{height:auto;padding:7px 0;gap:12px}
}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:6px;
font-size:15px;font-weight:600;transition:.16s;border:1px solid transparent;letter-spacing:.005em}
.btn-p{background:var(--brand);color:var(--brand-ink)}
.btn-p:hover{background:var(--brand-d)}
.btn-o{border-color:rgba(255,255,255,.32);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.6)}
.btn-d{border-color:var(--line);color:var(--ink);background:#fff}
.btn-d:hover{border-color:var(--ink);background:var(--soft)}
/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:76px 0 0}
.hero::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:52px 52px;pointer-events:none}
.hero::after{content:"";position:absolute;right:-140px;top:-120px;width:620px;height:620px;border-radius:50%;
background:radial-gradient(circle,rgba(255,196,0,.13) 0%,rgba(255,196,0,0) 66%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero-g{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
/* 首屏：去掉 eyebrow 小字后，层级为 H1 → lead → CTA，靠字号与色阶拉开对比 */
/* 全大写标题：字号收一档、行高放宽、字距转正 —— 大写字母等高，负字距会挤成一团 */
.hero h1{font-size:39px;line-height:1.22;font-weight:800;color:#fff;max-width:21ch;
text-transform:uppercase;letter-spacing:.012em}
.hero h1 em{font-style:normal;color:var(--brand)}
/* ------------------------------------------------------------------
H1 上方的品牌黄线 —— 2026-10-08 最终选定方案 B「与首行文字等长」。
历史：44px 短线 → 渐隐(C) → 移除 → 现改为 B。
B 的线长 = H1 **第一行文字**的实测宽度，由页脚小脚本用 Range 量出首行
宽度后写入 CSS 变量 --l1w，line 宽即 var(--l1w)。因此：
· 文案改字、字体回退、窗口缩放、中英文切换都会自动跟随，无需手改数值；
· fallback 540px 仅在 JS 禁用/未执行时用（此时约等于桌面首行宽）。
height/颜色/圆角沿用最初设计（3px 品牌黄）。仅首页 .hero 生效（内页用 .ph）。
------------------------------------------------------------------ */
.hero h1{--l1w:540px}
.hero h1::before{content:"";display:block;width:var(--l1w,540px);height:3px;
background:var(--brand);margin-bottom:20px;border-radius:2px}
.hero-lead{margin-top:20px;font-size:17px;color:#b4bdc8;max-width:54ch;line-height:1.75}
.hero-btns{margin-top:30px}
/* 正文区导语（白底，区别于头图上的 .hero-lead） */
.sec-lead{font-size:16px;color:var(--body);line-height:1.75;max-width:72ch;
margin:0 0 30px;padding-left:18px;border-left:3px solid var(--brand)}
.sec-lead:last-child{margin-bottom:0}
@media(max-width:640px){.sec-lead{font-size:15px;padding-left:14px}}
/* 正文列宽统一令牌：所有长文本块共用，避免各页右边距参差 */
:root{--colw:860px}
/* 小标题（规格分组 / 表头上方）与段落级标题，取代内联 font-size */
.sub-h3{font-size:16px;color:var(--ink);font-weight:700;margin:0 0 10px;letter-spacing:-.006em}
.h3-blk{font-size:20px;color:var(--ink);font-weight:700;margin:40px 0 18px;letter-spacing:-.014em}
@media(max-width:640px){.h3-blk{font-size:18px;margin:32px 0 15px}}
.hero-btns{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.hero-art{border:1px solid var(--ink3);border-radius:10px;background:rgba(255,255,255,.028);padding:22px}
.hero-art .ha-cap{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:#7d8794;margin-bottom:16px;
display:flex;justify-content:space-between;align-items:center}
.hero-art .ha-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-art figure{border:1px solid var(--ink3);border-radius:7px;background:rgba(255,255,255,.02);padding:14px 10px 10px;text-align:center;color:#b3bfcc;transition:.16s}
.hero-art a:hover figure{border-color:var(--brand);background:rgba(255,196,0,.07);color:var(--brand)}
.hero-art svg{width:100%;height:74px;display:block}
.hero-art figcaption{font-size:10.5px;color:#8b95a2;margin-top:8px;letter-spacing:.06em;font-weight:600}
.hero-band{border-top:1px solid var(--ink3);margin-top:64px;background:rgba(0,0,0,.16);position:relative;z-index:2}
.hero-band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.hstat{padding:24px 0;border-right:1px solid var(--ink3)}
.hstat:last-child{border-right:none}
.hstat b{display:block;font-size:27px;color:#fff;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.hstat span{font-size:11.5px;color:#8b95a2;letter-spacing:.11em;text-transform:uppercase;font-weight:500}
@media(max-width:1000px){
.hero-g{grid-template-columns:1fr;gap:38px}
.hero{padding-top:48px}
.hero h1{font-size:32px;max-width:none}
.hero-lead{font-size:15.5px}
.hero-art{display:none}
.hero-band{margin-top:40px}
.hero-band .wrap{grid-template-columns:1fr 1fr}
.hstat{border-bottom:1px solid var(--ink3);padding:16px 0}
.hstat b{font-size:22px}
}
/* ---------- sections ---------- */
section{padding:78px 0}
.sec-soft{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-dark{background:var(--ink);color:#b4bdc8}
.sec-dark .head h2,.sec-dark h3{color:#fff}
.sec-dark .head p{color:#9aa4b0}
.sec-dark .kicker{color:var(--brand)}
.sec-dark .tlist li{border-bottom-color:var(--ink3);color:#c3ccd6}
.sec-dark .tlist b{color:#fff}
.sec-dark .notes{border-left-color:var(--brand)}
.sec-dark .note{background:rgba(255,196,0,.09);border-color:rgba(255,196,0,.32);color:#ddd4b8}
.sec-dark .note b{color:#fff}
.sec-dark .steps li{color:#c3ccd6}
.sec-dark a:not(.btn){color:var(--brand)}
.sec-dark a:not(.btn):hover{color:#ffd54a}
.head{margin-bottom:40px;max-width:760px}
.head h2{font-size:31px;color:var(--ink);font-weight:800;letter-spacing:-.022em}
.head p{color:var(--muted);margin-top:12px;font-size:16px;max-width:640px}
.kicker{color:var(--brand-d);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.head-c{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.head-c p{margin-left:auto;margin-right:auto}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head-row .head{margin-bottom:0}
/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--line)}
.pillar{padding:34px 32px 34px 0;border-right:1px solid var(--line);position:relative}
.pillar:last-child{border-right:none;padding-right:0}
.pillar:nth-child(2),.pillar:nth-child(3){padding-left:32px}
.pillar-n{font-size:11px;font-weight:800;color:var(--brand-d);letter-spacing:.14em;margin-bottom:14px}
.pillar h3{font-size:20px;color:var(--ink);font-weight:700;margin-bottom:11px;letter-spacing:-.012em}
.pillar p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.pillar .lk{font-size:13.5px;font-weight:600;color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:2px}
.pillar .lk:hover{color:var(--brand-d);border-color:var(--brand-d)}
@media(max-width:900px){
.pillars{grid-template-columns:1fr}
.pillar{border-right:none;border-bottom:1px solid var(--line);padding:26px 0}
.pillar:nth-child(2),.pillar:nth-child(3){padding-left:0}
.pillar:last-child{border-bottom:none}
}
/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:.18s;
display:flex;flex-direction:column;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);transform:scaleY(0);transform-origin:top;transition:transform .2s}
.card:hover{border-color:#cdd5dd;box-shadow:0 8px 26px rgba(20,26,34,.08)}
.card:hover::after{transform:scaleY(1)}
.card-ic{width:56px;height:56px;border-radius:8px;background:var(--brand-s);display:flex;align-items:center;justify-content:center;margin-bottom:17px;color:var(--brand-d)}
.card-ic svg{width:32px;height:32px}
.card h3{font-size:17px;color:var(--ink);font-weight:700;margin-bottom:7px;letter-spacing:-.008em}
.card p{font-size:13.8px;color:var(--muted);line-height:1.68;flex:1}
.card .more{font-size:13.2px;color:var(--brand-d);font-weight:600;margin-top:16px}
/* 这里必须写「真实字符」右箭头，不要写 CSS 的数字转义形式（反斜杠加 2192）。
本文件内嵌 CSS 用的是普通（非 raw）字符串，Python 会把反斜杠加 219 当成八进制
转义吃掉（八进制 21 即 U+0011），产物退化成 content:" <控制字符>92"，
页面上每个产品卡片都显示成 "View details 92"。
同类坑还有 .faq details[open] 的减号、页头 mega 菜单的箭头，均已改为真实字符。 */
.card .more::after{content:" →"}
.card .cnt{font-size:11.5px;color:var(--muted);background:var(--soft);border:1px solid var(--line);
padding:2px 9px;border-radius:20px;display:inline-block;margin-top:13px;align-self:flex-start}
/* ---------- capability badges ---------- */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.badge{border:1px solid var(--ink3);border-radius:var(--radius);padding:26px 22px;background:rgba(255,255,255,.03);transition:.18s}
.badge:hover{background:rgba(255,255,255,.06);border-color:var(--steel)}
.badge .bi{width:46px;height:46px;border-radius:50%;background:rgba(255,196,0,.14);display:flex;align-items:center;
justify-content:center;color:var(--brand);margin-bottom:16px}
.badge .bi svg{width:24px;height:24px}
.badge h4{font-size:15.5px;color:#fff;font-weight:600;margin-bottom:7px}
.badge p{font-size:13.2px;color:#9aa4b0;line-height:1.62}
@media(max-width:900px){.badges{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.badges{grid-template-columns:1fr}}
/* ---------- markets ---------- */
.markets{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.mkt{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;background:#fff;transition:.16s}
.mkt:hover{border-color:var(--brand);background:var(--brand-s)}
.mkt b{display:block;font-size:14.5px;color:var(--ink);font-weight:600}
.mkt span{font-size:12.5px;color:var(--muted)}
/* ---------- why ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.why-i{border-left:2px solid var(--brand);padding-left:17px}
.why-i h4{font-size:15.5px;color:var(--ink);font-weight:700;margin-bottom:6px}
.why-i p{font-size:13.8px;color:var(--muted)}
/* ---------- quality pillars（质量与认证页四支柱，2026-09-29 用户选定「方案 1」）----------
圆底图标 + 黄左边条标题 + 浅灰卡片承载说明，栏间细箭头串联。
原 .why/.why-i（仅黄左边条、无图）已不再被任何页面引用，暂留以防回退。 */
.q1{padding:44px 0}
.q1-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.q1-i{position:relative;display:flex;flex-direction:column}
.q1-ic{width:62px;height:62px;border-radius:50%;background:var(--brand);
display:flex;align-items:center;justify-content:center;margin-bottom:16px;
box-shadow:0 6px 16px rgba(255,196,0,.32)}
.q1-tx{flex:1;display:flex;flex-direction:column;border-left:2px solid var(--brand);padding-left:15px}
.q1-tx h4{font-size:15.5px;color:var(--ink);font-weight:700;margin-bottom:8px;line-height:1.35}
.q1-tx p{flex:1;font-size:13.6px;color:var(--muted);background:var(--soft);border-radius:var(--radius);
padding:11px 13px;margin-top:4px}
/* 2026-09-29 加：四支柱配图。.q1-tx 撑满剩余高度 → 四张图底边对齐成一条线 */
.q1-fig{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;background:var(--soft)}
.q1-fig img{display:block;width:100%;height:auto;aspect-ratio:500/420;object-fit:cover}
/* 2026-10-07：四支柱下方整页共用的那张实拍（QC_SINGLE_PHOTO）。
用户要求与上方四栏文字**同宽**：.q1-grid 是 repeat(4,1fr)+gap:18px 铺满.wrap 的内容宽
（1200-56=1144px），故这里不能设 max-width，去掉即可撑满同一条左右边界。
object-fit:cover + aspect-ratio:5/3 保证放大到 1144 宽时不变形。 */
.q1-single{margin:30px 0 0;border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.q1-single img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
/* 2026-10-07 四象限网格（用户选定 QD_Q3 效果）：2x2 严格均分的那张实拍。
样式取自预览稿 Q3 —— 14px 间隙 + 浅灰卡片底(var(--soft)) + 内层 4px 小圆角，
四块共用外框圆角；每块 aspect-ratio 800/480 与源图切片一致，移动端降为单列。 */
.q1-quad{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0 0;
padding:14px;background:var(--soft);border:1px solid var(--line);
border-radius:var(--radius)}
.q1-cell{overflow:hidden;border-radius:4px}
.q1-cell img{display:block;width:100%;height:auto;aspect-ratio:800/480;object-fit:cover}
@media(max-width:620px){.q1-quad{grid-template-columns:1fr;gap:10px;padding:10px}}
.fl-arrow{position:absolute;left:100%;top:19px;margin-left:-9px;display:flex;z-index:2;
align-items:center;justify-content:center;opacity:.95}
@media(max-width:1020px){
.q1-grid{grid-template-columns:1fr 1fr;row-gap:32px}
.fl-arrow{display:none}
}
@media(max-width:620px){.q1-grid{grid-template-columns:1fr}}
/* ---------- shackle selection pointer（卸扣页选型指路条，2026-09-29 用户选定「变体 A」）----------
规格表 → 选型建议之间的过渡：一句指路 + 四个胶囊链接（卸扣选型指南 + 三种美标型式标准页）
+ 底部限定语小字。四个链接目标全部是站上已有页面（卸扣页本来就各链着它们）。
限定语文本直接用 specs_shackle.UI_SH[lang]['not_a_std'] —— 即被删 WLL 节里那句原话。 */
.qa{margin-top:26px;padding-top:22px;border-top:1px solid var(--line2)}
.qa-tx{font-size:14.2px;color:var(--body);line-height:1.75;max-width:var(--colw)}
.qa-tx b{color:var(--ink);font-weight:600}
.qa-lk{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.qa-a{font-size:13px;border:1px solid var(--line);border-radius:20px;padding:6px 15px;
color:var(--ink);background:#fff;display:inline-flex;gap:8px;align-items:center;transition:.15s}
.qa-a:hover{border-color:var(--brand);background:var(--brand-s)}
.qa-a span{color:var(--brand-d)}
.qa-note{font-size:12.5px;color:var(--muted);margin-top:14px;max-width:var(--colw);line-height:1.68}
/* ---------- breadcrumb + page head ---------- */
.crumb{font-size:12.5px;color:var(--muted);padding:16px 0}
.crumb a:hover{color:var(--brand-d)}
.crumb span{margin:0 7px;color:#c3cad3}
.ph{background:var(--ink);color:#fff;padding:52px 0 46px;position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;right:-90px;top:-90px;width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle,rgba(255,196,0,.11) 0%,rgba(255,196,0,0) 68%)}
.ph .wrap{position:relative;z-index:2}
.ph h1{font-size:36px;font-weight:800;letter-spacing:-.022em;color:#fff;line-height:1.22;max-width:20ch}
.ph p{margin-top:14px;color:#b4bdc8;max-width:660px;font-size:16px}
@media(max-width:640px){.ph h1{font-size:26px;max-width:none}}
/* ---------- spec table ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;overflow-x:auto;background:#fff}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:14px 17px;background:var(--ink);font-weight:600;color:#fff;font-size:12px;
letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
td{padding:14px 17px;border-bottom:1px solid var(--line2);color:var(--body);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--soft)}
td b{color:var(--ink);font-weight:600}
.tag{display:inline-block;font-size:11.5px;background:var(--soft);border:1px solid var(--line);color:var(--muted);padding:1px 8px;border-radius:4px;white-space:nowrap}
.req{color:var(--brand-d);font-size:13px;font-weight:500}
/* ---------- 上下文推荐位（ctx_links.py）---------- */
.ctxrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:13px}
.ctxcard{display:flex;flex-direction:column;gap:9px;padding:19px 21px;
border:1px solid var(--line);border-radius:var(--radius);background:#fff;
transition:border-color .16s,background .16s,transform .16s}
.ctxcard:hover{border-color:var(--brand);background:var(--brand-s);transform:translateY(-2px)}
.ctxcard h3{font-size:15.5px;color:var(--ink);line-height:1.4;font-weight:600}
.ctxcard .more{font-size:12.5px;color:var(--brand-d);font-weight:600;margin-top:auto}
/* ---------- note ---------- */
.note{background:var(--brand-s);border:1px solid #f5e6b8;border-left:3px solid var(--brand);border-radius:7px;
padding:16px 19px;font-size:13.8px;color:#6b5518;margin-top:22px}
.note b{color:#4d3d0d}
/* ---------- placeholder ---------- */
.ph-box{background:var(--soft);border:1px dashed #c9d2dc;border-radius:var(--radius);display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;color:#aeb7c2;padding:34px 20px;text-align:center}
.ph-box svg{width:56px;height:56px;color:#c3cad3}
.ph-box span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#aeb7c2}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.pgrid .ph-box{padding:26px 14px;min-height:168px}
/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.cinfo{list-style:none}
.cinfo li{padding:15px 0;border-bottom:1px solid var(--line)}
.cinfo li:first-child{padding-top:0}
.cinfo dt{font-size:11.5px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px}
.cinfo dd{font-size:16.5px;color:var(--ink);font-weight:600}
.cinfo a:hover{color:var(--brand-d)}
@media(max-width:800px){.contact{grid-template-columns:1fr;gap:30px}}
/* ---------- cta band ---------- */
.band{background:var(--brand);color:var(--brand-ink);padding:60px 0;position:relative;overflow:hidden}
/* 2026-10-06 去掉黄底网格纹理（.band::before，52px 间隔 / 5% 透明度）。
起因：5% 弱到在正常显示器上几乎看不见，但**拍照时会被屏幕摩尔纹放大成
明显的竖条纹**，用户因此误以为「有的页面有竖线、有的没有」（实为拍摄相位差异）。
弱纹理两头不讨好 —— 要么看不见，要么在低质屏显/照片里变干扰，故改为纯色平面。 */
.band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{font-size:27px;font-weight:800;letter-spacing:-.018em}
.band p{color:#5c4a08;margin-top:7px;font-size:15.5px;max-width:540px}
.band .btn-p{background:var(--ink);color:#fff!important}
.band .btn-p:hover{background:#000}
.band .btn-d{border-color:rgba(0,0,0,.28);color:var(--brand-ink)}
.band .btn-d:hover{background:rgba(255,255,255,.55);border-color:var(--ink)}
/* ---------- chips ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{font-size:12.8px;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 15px}
/* ---------- content blocks ---------- */
.tlist{list-style:none}
.tlist li{padding:15px 0;border-bottom:1px solid var(--line2);font-size:14.5px}
.tlist li:first-child{padding-top:0}
.tlist li:last-child{border-bottom:none}
.tlist b{display:block;color:var(--ink);font-weight:700;margin-bottom:3px;font-size:15px}
.steps{counter-reset:s;list-style:none}
.steps li{padding-left:34px;margin-bottom:13px;counter-increment:s;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
border-radius:50%;background:var(--brand);color:var(--brand-ink);font-size:12px;font-weight:700;
display:flex;align-items:center;justify-content:center}
.notes{list-style:none;border-left:3px solid var(--brand);padding-left:19px}
.notes li{margin-bottom:8px;font-size:14.2px}
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{padding:17px 20px;cursor:pointer;font-size:15.2px;font-weight:600;color:var(--ink);
list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-d);font-size:21px;line-height:1;flex:0 0 auto;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq summary:hover{background:var(--soft)}
.faq .a{padding:0 20px 18px;font-size:14.2px;color:var(--body);max-width:var(--colw)}
.know{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:26px 28px;margin-bottom:15px}
.know h3{font-size:18px;color:var(--ink);font-weight:700;margin-bottom:13px}
.know ul{list-style:none}
.know li{padding-left:19px;position:relative;margin-bottom:10px;font-size:14.5px}
.know li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.prose{max-width:var(--colw)}
.prose p{font-size:15.5px;color:var(--body);margin-bottom:15px}
.prose h3{font-size:19px;color:var(--ink);font-weight:700;margin:30px 0 11px;letter-spacing:-.01em}
.prose h4{font-size:16px;color:var(--ink);font-weight:700;margin:22px 0 8px}
/* ---------- 公司简介页（Company profile） ---------- */
.cp-close{border-left:3px solid var(--brand);padding:4px 0 4px 17px;margin-top:26px;
font-size:15.5px;color:var(--ink);font-weight:600}
/* ---------- About 页 · 生产工序六格（2026-09-30 用户定稿） ---------- */
/* 白卡浮在 .sec-soft 灰底上（沿用 .faq / .know 的既有做法）。
排布：3 栏 × 2 行（上 01-03 / 下 04-06）；卡片 max-width 收窄到 --colw(860px)，
使其右边界与上方 .prose 正文列右边界齐平（1440 视口下同为 1008px）。 */
.mflow{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:26px 28px 30px;margin:6px 0 30px;max-width:var(--colw)}
.mflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;row-gap:26px}
.mflow-i{position:relative;min-width:0}
/* 箭头悬在栏间距中央（gap 22px）；行内 01→02→03 / 04→05→06 各 2 个 */
.mflow-ar{position:absolute;top:28%;right:-19px;color:#93a7b6;z-index:2}
/* 每行末格不画箭头（换行处不做跨行连线）；末格 06 生成时本就不带箭头 */
.mflow-i:nth-child(3n) .mflow-ar{display:none}
.mflow-fig{margin:0;border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;background:#f4f7f9;aspect-ratio:4/3}
.mflow-fig img{display:block;width:100%;height:100%;object-fit:cover}
.mflow-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--brand-d);margin-top:12px}
.mflow-i h4{font-size:15px;color:var(--ink);font-weight:700;margin:4px 0 5px;line-height:1.28}
.mflow-i p{font-size:13px;color:var(--muted);line-height:1.55;margin:0}
/* 拆 prose 后第二段的首个小标题要去掉上边距，否则会多出一截空白 */
.prose-c h3:first-child{margin-top:0}
/* 2 栏档：格宽变小，行内箭头会跨栏误导，整组隐藏 */
@media(max-width:820px){.mflow-grid{grid-template-columns:1fr 1fr;gap:18px;row-gap:22px}
.mflow-ar{display:none}}
@media(max-width:620px){.mflow{padding:20px 16px 24px}
.mflow-grid{gap:14px;row-gap:18px}}
/* ---------- 制造能力板块（Manufacturing capability） ---------- */
.cap-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,240px));
width:fit-content;max-width:100%;gap:0;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.cap-n{padding:22px 20px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.cap-n b{display:block;font-size:27px;font-weight:800;color:var(--brand);
letter-spacing:-.025em;line-height:1.1}
.cap-n span{display:block;margin-top:7px;font-size:11px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.cap-eq{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:26px;margin-top:34px}
.cap-g h4{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.cap-g dl{margin:0}
.cap-g div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
padding:9px 0;border-bottom:1px solid var(--line2)}
.cap-g div:last-child{border-bottom:0}
.cap-g dt{font-size:14px;color:var(--ink2)}
.cap-g dd{margin:0;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.cap-cert{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.cap-cert span{display:inline-flex;align-items:center;gap:8px;font-size:13px;
font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);
border-radius:99px;padding:8px 16px}
.cap-cert span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.cap-note{margin-top:26px;font-size:14.5px;color:var(--muted);border-left:3px solid var(--line);
padding:3px 0 3px 15px}
.block{margin-bottom:32px}
.stdlist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:11px}
.stdlist a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
border:1px solid var(--line);border-radius:7px;padding:13px 16px;font-size:14.5px;color:var(--ink);transition:.15s}
.stdlist a:hover{border-color:var(--brand);background:var(--brand-s)}
.stdlist a span{font-size:11.5px;color:var(--muted);white-space:nowrap}
/* glossary */
.gloss{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.gl-i{border-bottom:1px solid var(--line);padding:20px 24px}
.gl-i:last-child{border-bottom:none}
.gl-i h3{font-size:16px;color:var(--ink);font-weight:700;margin-bottom:5px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.gl-i h3 small{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.04em}
.gl-i p{font-size:14.2px;color:var(--body)}
.gl-i .abbr{font-size:11px;background:var(--brand-s);border:1px solid #f0e0ac;color:#7a6114;
padding:1px 8px;border-radius:4px;font-weight:700;letter-spacing:.05em}
.gl-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px}
.gl-nav a{font-size:13px;border:1px solid var(--line);border-radius:20px;padding:4px 13px;color:var(--body);background:#fff}
.gl-nav a:hover{border-color:var(--brand);background:var(--brand-s);color:var(--ink)}
/* ---------- footer ---------- */
.ftr{background:linear-gradient(to bottom,#31363d 0%,#22282e 100%);color:#9aa4b0;padding:64px 0 28px;font-size:13.8px}
.ftr-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:38px;border-bottom:1px solid var(--ink3)}
.ftr h5{color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.ftr ul{list-style:none}
.ftr li{margin-bottom:9px}
.ftr a:hover{color:var(--brand)}
.ftr .fbrand p{color:#9aa4b0;font-size:13.5px;margin-top:14px;max-width:34ch}
/* 页脚品牌块：复用页头 logo 组合（S 标 + NEWBAS/Rigging hardware），深底改浅色文字 */
.fbrand-logo{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.fbrand-logo img{height:42px;width:auto;flex:0 0 auto}
.fbrand-logo .logo-t b{color:#fff;font-size:16.5px;font-weight:700;letter-spacing:.01em}
.fbrand-logo .logo-t small{color:#9aa4b0}
.ftr-b{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#7d8794}
.soc{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.soc a{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);transition:background .18s,border-color .18s,transform .18s}
.soc a:hover{background:rgba(255,255,255,.15);border-color:var(--brand);transform:translateY(-2px)}
.soc svg{width:17px;height:17px;fill:#c2cad3;display:block;transition:fill .18s}
.soc a:hover svg{fill:#fff}
.soc-d a{background:#fff;border:1px solid var(--line)}
.soc-d svg{fill:var(--steel)}
.soc-d a:hover{background:var(--brand);border-color:var(--brand)}
.soc-d a:hover svg{fill:var(--brand-ink)}
.soc-lg a{width:42px;height:42px;border-radius:11px}
.soc-lg svg{width:20px;height:20px}
.soc.mt0{margin-top:0}
@media(max-width:640px){.soc a{width:38px;height:38px}.soc svg{width:18px;height:18px}}
/* 顶栏图标在任何断点都保持同一尺寸，不被上面的 .soc a 通用规则放大 */
@media(max-width:1000px){.tbar .soc-sm a,.soc-sm a{width:22px;height:22px;border-radius:6px}
.tbar .soc-sm svg,.soc-sm svg{width:13px;height:13px}
.tbar .wrap{gap:14px;font-size:12px}}
@media(max-width:520px){
.tbar .wrap{gap:10px;font-size:11.5px}
.tbar .dot{display:none}
.tbar-soc .soc{flex-wrap:nowrap}
}
@media(max-width:1000px){.ftr-g{grid-template-columns:1fr 1fr 1fr;gap:28px}}
@media(max-width:640px){.ftr-g{grid-template-columns:1fr 1fr;gap:24px}}
/* ---------- responsive ---------- */
@media(max-width:640px){
section{padding:52px 0}
.head h2{font-size:24px}
.hero h1{font-size:26px;letter-spacing:.008em}
/* 移动端同样跟随首行实测宽度（--l1w 由脚本按当前断点重算），只调下方间距 */
.hero h1::before{height:3px;margin-bottom:16px}
.hero-lead{margin-top:16px;font-size:15.5px}
.hero-btns{margin-top:24px}
.hero{padding:40px 0 0}
.wrap{padding:0 20px}
.band{padding:44px 0} .band h2{font-size:21px}
.btn{padding:12px 22px;font-size:14.5px}
}
/* ---------- 全站搜索（顶栏搜索框 + 搜索页） ---------- */
/* 2026-10-08：顶栏原社交图标位置改为搜索框。深色顶栏上用轻描边胶囊，
focus 时描边转品牌黄，和站内的 brand 呼应。 */
.tbar-search{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:0 12px;height:30px;
transition:border-color .18s,background .18s}
.tbar-search:focus-within{border-color:var(--brand);background:rgba(255,255,255,.1)}
.tbar-search svg{width:14px;height:14px;fill:#8f9aa6;flex:0 0 auto}
.tbar-search input{background:transparent;border:0;outline:0;color:#fff;font-size:13px;
width:210px;padding:0;font-family:inherit}
.tbar-search input::placeholder{color:#8f9aa6}
@media(max-width:1000px){.tbar-search input{width:150px}}
@media(max-width:640px){.tbar-soc{display:none}.tbar-search input{width:120px}}
/* 搜索页 */
.srch{max-width:760px;margin:0 auto}
.srch-bar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
border-radius:12px;padding:6px 16px;box-shadow:0 2px 10px rgba(20,30,45,.05);
transition:border-color .18s,box-shadow .18s}
.srch-bar:focus-within{border-color:var(--brand);box-shadow:0 4px 18px rgba(255,196,0,.16)}
.srch-bar svg{width:20px;height:20px;fill:var(--steel);flex:0 0 auto}
.srch-bar input{flex:1;border:0;outline:0;font-size:16px;padding:12px 0;font-family:inherit;background:transparent}
.srch-count{margin:22px 0 14px;font-size:14px;color:#5a6675}
.srch-list{display:grid;gap:10px}
.srch-item{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
background:#fff;text-decoration:none;transition:border-color .18s,transform .18s,box-shadow .18s}
.srch-item:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,30,45,.07)}
.srch-item h3{margin:0 0 5px;font-size:16px;color:#1c2430}
.srch-item .u{display:block;font-size:12px;color:var(--brand-ink);margin-bottom:6px;word-break:break-all}
.srch-item p{margin:0;font-size:13.5px;color:#5a6675;line-height:1.6}
.srch-empty{padding:34px 0;text-align:center;color:#5a6675;font-size:15px}
/* ---------- 全站浮动 WhatsApp 按钮（唯一 WhatsApp 入口） ---------- */
.wa-fab{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:9px;
background:#25d366;color:#fff;border-radius:999px;padding:12px 20px 12px 17px;
font-weight:700;font-size:14.5px;text-decoration:none;
box-shadow:0 8px 24px rgba(16,90,50,.32);transition:transform .18s,box-shadow .18s}
.wa-fab svg{width:21px;height:21px;fill:#fff}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(16,90,50,.42);color:#fff}
@media(max-width:640px){.wa-fab{right:16px;bottom:16px;padding:13px;gap:0}
.wa-fab span{display:none}}
/* ============ 产品线页（方案 B：左型号清单 — 右型号详情） ============ */
/* 深色页头：品牌光晕，与首页 hero 同一签名（.ph 自带光晕） */
/* 【2026-10-01】此处原有 52px 网格线装饰，只加在 8 个产品分类页上，
导致同一站内有的页头有网格线、有的没有，视觉不一致。
用户决定「全部取消网格线」→ 已删除该规则，页面上的对应类名也一并去掉。
全站页头现已统一为：深色底 + 品牌光晕 + 面包屑/标题/导语。 */
.ph-facts{position:relative;z-index:2;display:grid;gap:0;margin-top:32px;list-style:none;
grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--ink3)}
.ph-facts li{padding:17px 20px 3px 0;border-right:1px solid var(--ink3);min-width:0}
.ph-facts li:last-child{border-right:none}
.ph-facts b{display:block;font-size:16.5px;font-weight:800;color:#fff;line-height:1.35;
letter-spacing:-.01em}
.ph-facts span{display:block;margin-top:3px;font-size:10.5px;color:var(--muted);
letter-spacing:.12em;text-transform:uppercase;font-weight:500}
/* —— 主从区 —— */
.md{position:relative;display:grid;gap:28px;align-items:start;
grid-template-columns:minmax(0,338px) minmax(0,1fr)}
.md-r{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.md-list{list-style:none;border:1px solid var(--line);border-radius:var(--radius);
background:#fff;overflow:hidden}
.md-list li{border-bottom:1px solid var(--line2)}
.md-list li:last-child{border-bottom:none}
.md-i{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;padding:14px 16px;
cursor:pointer;transition:background .14s;align-items:start}
.md-i:hover{background:var(--soft)}
.md-i>.n{font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.06em;padding-top:3px}
.md-i .t{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.md-i .t .std{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;
background:rgba(34,40,46,.86);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;
vertical-align:1.5px}
.md-i .m{display:block;margin-top:4px;font-size:11.8px;color:var(--muted);line-height:1.5}
/* —— 右侧详情 —— */
.md-panes{min-width:0}
.md-pane{display:none}
.md-two{display:grid;gap:26px;align-items:stretch;
grid-template-columns:minmax(0,1fr) minmax(0,.96fr)}
.md-figs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-content:stretch}
.md-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
.md-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:11px}
.md-idx{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--brand-d)}
.md-h{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.26;margin:0}
.md-lead{margin:12px 0 0;font-size:14.6px;color:var(--body);line-height:1.78}
.md-meta{list-style:none;display:flex;flex-wrap:wrap;margin:18px 0 0;
border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.md-meta li{padding:11px 20px 11px 0;margin-right:20px;border-right:1px solid var(--line2)}
.md-meta li:last-child{border-right:none;margin-right:0;padding-right:0}
.md-meta span{display:block;font-size:10.5px;color:var(--faint);letter-spacing:.1em;
text-transform:uppercase}
.md-meta b{display:block;margin-top:2px;font-size:14px;color:var(--ink);font-weight:700}
/* 2026-09-25：原 .md-cta（面板内黄色「Request a quote」按钮）已按用户要求整块删除，
对应 CSS 规则一并移除。如需恢复，加回 .md-cta 规则并在 _pane() 里补回按钮即可。 */
/* 型号详情右侧三项要素（材质 / 表面处理 / 规格范围）—— 图标行 */
.sp-b{list-style:none;margin:20px 0 0;border-top:1px solid var(--line2)}
.sp-b li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2)}
.sp-b .ic{flex:0 0 auto;width:30px;height:30px;border-radius:7px;background:var(--brand-s);
color:var(--brand-d);display:flex;align-items:center;justify-content:center}
.sp-b .ic svg{width:16px;height:16px;display:block}
.sp-b .tx{min-width:0}
.sp-b .k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--faint);line-height:1.3}
.sp-b b{display:block;margin-top:1px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.4}
.md-fig{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:12px;display:flex}
/* 2026-09-25：去掉 .im 的 aspect-ratio:4/3 —— 用户要求左侧图卡与右侧信息栏**等高**。
改为 .md-fig 作 flex 容器、.im flex:1 撑满，图随列高伸展（不再被 4/3 扁框框死），
右栏 .md-info 内容垂直居中（见下）。照片仍 object-fit:contain 居中不裁切。 */
.md-fig .im{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
background:#fff;border-radius:6px}
/* 底色用白不用 --soft：图册产品照统一是白底，用浅灰底会在照片四周显出一圈
灰边（contain 的留白区），看起来像照片没对齐。白底让照片与卡片融为一体。 */
.md-fig .im>picture{display:block;width:100%;height:100%}
.md-fig .im img{width:100%;height:100%;object-fit:contain;display:block}
/* ⚠️ 两个坑，改这里前先读：
1) 不要用 max-width/max-height:100% —— `.im` 的高度来自 aspect-ratio，
百分比 max-height 在 flex 里会被解析成 auto，竖构图产品照会按原始像素
高度铺开（实测 294x894 塞进 221px 高的框）再被 overflow:hidden 裁掉，
面板里只剩产品顶部一小截。必须 width/height:100% + object-fit:contain。
2) `seo_optimize` 会把每个 ![]()
包进 ； 默认 display:inline、
宽度是 shrink-to-fit，会成为「不确定高度」的中间层，让百分比再次失效。
所以必须显式给 >picture 定尺寸。 */
.md-fig figcaption{font-size:11.8px;color:var(--muted);margin-top:9px;line-height:1.55}
.md-fig.empty .im{border:1px dashed #c9d2dc;background:#fff;color:var(--muted);
font-size:12.5px;text-align:center;padding:20px}
.md-tbl{margin-top:34px}
/* 上下区块分割（细线 + 居中标，规格区章节起读点）。
2026-09-25 用户选定**方案 A**：标签改用与「材质/表面处理/规格范围」三行**同源**的
图标块语言 —— 浅黄圆角方块 + 琥珀线条图标 + 琥珀大写文字，**不加底色胶囊**（最克制）。
同时删除原 `.md-tbl-h`（规格表上方重复的型号名 h4，与右栏 h3 重复）。 */
.md-sep{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.md-sep-line{flex:1;height:1px;background:var(--line)}
.md-sep-t{display:inline-flex;align-items:center;gap:10px}
.md-sep-t .ic{flex:0 0 auto;width:30px;height:30px;border-radius:7px;background:var(--brand-s);
color:var(--brand-d);display:flex;align-items:center;justify-content:center}
.md-sep-t .ic svg{width:16px;height:16px;display:block}
.md-sep-t .tx{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--brand-d);white-space:nowrap}
.md-tbl .tbl-wrap{margin-top:10px}
.md-tbl .tbl-wrap table{font-size:12.6px}
/* 规格表表头**大小写完全按图册原文**（含 Size / Weight 这类标签词）。
全局 `th` 带 text-transform:uppercase，会把图册刻意区分的大小写抹平 —— 线图用
H/h、d/d1/d2、E/e、R/r、a…f/L、Ø A 这些**大小写敏感**的符号标注尺寸，一律转大写后
表头与图纸对不上（H 与 h 变成两个一模一样的 H）。
2026-09-29 第二版：第一版只把「符号 token」单独包一层关掉大写，标签词仍全大写；
用户要求标签也按源表原文显示（`Size` 而非 `SIZE`，`Weight (g/pc)` 而非 `WEIGHT`），
故放宽到整个 thead th，第一版方案作废。 */
.md-tbl .tbl-wrap thead th{text-transform:none}
.md-tbl .tbl-wrap thead tr+tr th{background:var(--ink2);color:#b9c2cc;font-weight:500;
font-size:10.5px;letter-spacing:.06em}
/* 规格表上方的尺寸线图（2026-09-23 试点：用图纸代替「列名清单」那一行）。
2026-09-26：图纸换成用户新绘的横构图线稿后，各图长宽比差异很大（1.25 ~ 3.36），
若按宽度等比缩放，会出现「有的很高、有的很扁」的不一致（实测 DIN741 高 352、DUPLEX 仅 131）。
用户要求「大小基本一致」→ 改为**固定高度的显示带**：图在带内居中、按比例缩放
（max-width/max-height + width/height:auto，绝不拉伸变形），各型号图纸视觉大小一致。
· .im 给**确定高度**（不是 aspect-ratio 推导的不确定高度），这样 img 用 px 的
max-height 才稳；不要改成百分比 max-height（见 .md-fig 的坑注）。
· seo_optimize 会把每个 ![]()
包进 ，用 display:contents 让 img 直接
成为 flex 子项参与居中，避免 picture 这层成为「不确定高度」的中间层。 */
.md-dwg{margin:14px auto 0;max-width:580px;border:1px solid var(--line);
border-radius:var(--radius);background:#fff;padding:12px 14px 10px}
.md-dwg .im{display:flex;align-items:center;justify-content:center;height:300px;overflow:hidden}
.md-dwg .im>picture{display:contents}
.md-dwg .im img{max-width:100%;max-height:300px;width:auto;height:auto;display:block}
.md-dwg figcaption{margin-top:9px;font-size:11.8px;color:var(--muted);line-height:1.55;
text-align:center}
/* 无图册尺寸数据产线的型号清单（swing hook）。
2026-10-05：用户反馈"格式和别的产品不一样"。原先这里是极简的
+ 两行文字卡，与主从面板的「序号 + 标准徽标 + 名称 + 副信息
+ 线图」观感差距明显。现在**复用主从面板的排版语言**（.md-pend-in
内部就是 .md-i 那套 grid），让访客看不出这是无尺寸数据的产线。
⚠️ 版式对齐 ≠ 数据编造：这里依然只列型号名、标准、材质、表面，
**不填任何尺寸行、不声明额定载荷**（摆动吊钩是悬挂件、非起重用途）。 */
.md-pend{list-style:none;display:grid;gap:18px;
grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}
.md-pend li{border:1px solid var(--line);border-radius:var(--radius);
background:#fff;padding:16px 18px 14px;display:flex;flex-direction:column;gap:14px}
.md-pend-in{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start}
.md-pend-in>.n{font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.06em;padding-top:3px}
.md-pend-in .t{display:block;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.md-pend-in .t .std{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;
background:rgba(34,40,46,.86);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;
vertical-align:1.5px}
.md-pend-in .m{display:block;margin-top:4px;font-size:11.8px;color:var(--muted);line-height:1.5}
/* 卡片内的线图：与 _dwg_above_html 同一张图、同一边框语汇，只是限高更小 */
.md-pend .md-dwg.sm{margin:0;border:1px solid var(--line2);border-radius:8px;
background:#fff;padding:10px}
.md-pend .md-dwg.sm .im{display:flex;align-items:center;justify-content:center;height:204px;overflow:hidden}
.md-pend .md-dwg.sm .im>picture{display:contents}
.md-pend .md-dwg.sm .im img{max-width:100%;max-height:204px;width:auto;height:auto;display:block}
/* 说明性长文折叠：让「型号 + 数据 + 图纸」当主角。
2026-09-24：折叠条原先是套在普通 里（上下各 78px 内边距），
收起时只有一行标题 → 页面中间出现一条 ~224px 的空白带，看着像坏掉。
现在给它独立类 .sec-notes 并把 section 内边距清零，做成紧凑的「展开更多」横条：
上下两条 1px 分隔线由相邻的 sec-soft 区块自带，本身不再画线。 */
.sec-notes{padding:0;background:#fff}
.pdp-notes{background:#fff}
.pdp-notes>summary{cursor:pointer;font-size:16px;font-weight:700;padding:22px 0;
color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px}
.pdp-notes[open]{padding-bottom:26px}
.pdp-notes>summary::-webkit-details-marker{display:none}
.pdp-notes>summary::before{content:"+";color:var(--brand);font-weight:800;font-size:18px}
/* 减号用真实字符。不要写 CSS 的数字转义形式（反斜杠加 2212）：本 CSS 块是 raw
字符串，转义会原样输出，浏览器解析成字面反斜杠加数字，显示成乱码。 */
.pdp-notes[open]>summary::before{content:"−"}
.pdp-notes section,.pdp-notes .sec-soft,.pdp-notes .sec-dark{background:transparent;
border:none;padding:0;margin:0}
.pdp-notes section .wrap{padding-top:20px;padding-bottom:20px}
@media(max-width:1020px){
.md{grid-template-columns:1fr}
.md-two{grid-template-columns:1fr}
.md-figs{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ph-facts{grid-auto-flow:row;grid-template-columns:1fr 1fr}
.ph-facts li{border-bottom:1px solid var(--ink3);padding-bottom:15px}
.ph-facts li:nth-child(2n){border-right:none}
/* 型号清单改为横向滑动条：详情紧跟其后，不必先划过整列型号 */
.md-list{display:flex;gap:8px;overflow-x:auto;border:none;background:none;
padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.md-list li{flex:0 0 auto;border:none}
.md-i{display:block;min-width:160px;max-width:250px;border:1px solid var(--line);
border-radius:7px;background:#fff;padding:10px 13px}
.md-i>.n{display:none}
.md-i .t{font-size:13.5px}
.md-i .m{font-size:11px;margin-top:3px}
}
@media(max-width:620px){
.ph-facts{grid-template-columns:1fr}
.ph-facts li{border-right:none}
.md-h{font-size:21px}
}
/* ===== 2026-09-26 方形图框 + 点开看大图（**已全站启用**，见 ZOOM_LINES）=====
用户批准的方案（wire rope clip 试点当天即确认，随后「可以了，推广到全站」）：
· 首屏图框改成**正方形**，各型号尺寸完全一致，不再随右栏文字多少而高矮不一；
· 点图框打开同一张产品照的**放大版**看细节。
零 JS：checkbox + label（与 .md-r 主从切换同一套思路）。
⚠️ 样式全部以 .md-fig.z 打头；万一某条产线要回退，加进 ZOOM_LINES_OFF 即可，
旧标记（）和下面的旧规则都还在，回退不用改 CSS。
⚠️ 整块必须留在 GAL_CSS 的**最末尾**（含下面几条 media query）：它靠源码顺序
压过上面的 .md-fig / .md-fig .im 规则，往上挪就会被旧规则翻盘。 */
/* 左卡片不再被右栏拉伸，尺寸只由自己的宽度决定 */
.md-fig.z{padding:0;display:block;position:relative;align-self:start}
/* 状态位：沿用 .md-r 的「1px 隐形」写法。
不要改成 display:none —— 个别浏览器下 display:none 的控件无法被 label 点击切换。 */
.md-fig.z .md-zb{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
/* 图框本体：整块可点（点哪儿都算） */
.md-fig.z .md-img{position:relative;display:block;padding:12px;cursor:zoom-in}
.md-fig.z .md-img:focus-visible{outline:2px solid var(--brand-d);outline-offset:-2px}
/* 正方形图框：**固定 240px 见方**，尺寸不再随视口漂移。
2026-09-26 第二版：第一版是「宽度=列宽、上限 404」，实测在用户视口（1105 CSS px）
出来 293×293，比右栏文字块（实测约 258px 高）还大一圈，用户反馈「太大了、压过文字」。
改为固定尺寸 + 左栏固定 266px（见下方 .md-two:has(.md-fig.z)），
于是每台机器、每个型号拿到的框都是同一个 240×240 —— 这才是「对称平齐」。
⚠️ 不要改回 .md-fig .im 的 flex:1 —— 那正是「图框被右栏文字拉成高矮不一的长方形」
的成因，也就是这次要修掉的问题。
⚠️ img 仍用 width/height:100% + object-fit:contain（见上方 .md-fig 的长注解，
百分比 max-height 在这个盒子里会解析成 auto，竖构图照片会被顶开再裁掉）。 */
.md-fig.z .im{flex:0 0 auto;width:100%;max-width:240px;aspect-ratio:1/1;height:auto;
margin:0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;
background:#fff;border-radius:6px}
.md-fig.z .im>picture{display:block;width:100%;height:100%}
.md-fig.z .im img{width:100%;height:100%;object-fit:contain;display:block}
.md-fig.z.empty{padding:12px}
.md-fig.z.empty .im{border:1px dashed #c9d2dc;color:var(--muted);font-size:12.5px;
text-align:center;padding:20px}
/* 「点开看大图」提示 = 30px 浅黄圆角方块 + 16px 琥珀放大镜，**无可见文字**。
2026-09-26 用户从 8 个方案里选定这一版：与页面里「材质/表面处理/规格范围」(.sp-b .ic)
和「SPECIFICATION TABLE」(.md-sep-t .ic) 用的是**同一套图标语言**（浅黄底 + 琥珀线性图标），
等于不新增视觉元素。取代原来的「深色胶囊 + Click to enlarge」——那一条压在产品照右下角
（DIN741 的螺母正好在右下）太碍眼。
文案没有删掉，改成 .sr（站点已有的读屏专用类）供屏幕阅读器使用；
label 上另有 title（zoom_open）给出鼠标悬停提示。 */
.zoom-hint{position:absolute;right:16px;bottom:16px;display:block;
width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:7px;
background:var(--brand-s);color:var(--brand-d);pointer-events:none}
.zoom-hint svg{width:16px;height:16px;display:block}
/* —— 放大态 —— */
.md-fig.z .md-ovl{display:none;position:fixed;inset:0;z-index:90;
background:rgba(21,24,29,.88);cursor:zoom-out}
/* .md-lb 自身不吃点击（pointer-events:none），只有卡片里的内容吃 ——
这样点在图片四周的空白处就落到下面的遮罩上，等于「点空白关闭」。 */
.md-fig.z .md-lb{display:none;position:fixed;inset:0;z-index:91;padding:34px;
align-items:center;justify-content:center;pointer-events:none}
.md-fig.z:has(.md-zb:checked) .md-ovl{display:block}
.md-fig.z:has(.md-zb:checked) .md-lb{display:flex}
.md-fig.z .md-lb>*{pointer-events:auto}
.md-fig.z .md-lb-im{display:flex;align-items:center;justify-content:center;max-width:100%;
background:#fff;border-radius:10px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.42)}
/* seo_optimize 会把 ![]()
包进 ；用 display:contents 让 img 直接参与居中，
避免 picture 成为「不确定高度」的中间层（同 .md-dwg 的处理）。
max-* 用 vw / vh 这类绝对单位，不依赖父容器是否定高。 */
.md-fig.z .md-lb-im>picture{display:contents}
/* 大图上限用 vw / vh（绝对单位，不依赖父容器定高）。
高度留 78vh 而不是 82vh：底部要给型号名让出位置，避免两者叠在一起。 */
.md-fig.z .md-lb-im img{max-width:min(92vw,1440px);max-height:78vh;width:auto;height:auto;
display:block;border-radius:5px}
/* 型号名贴着屏幕**底部**居中。不要放顶部 —— 站点页头是 sticky 的（z-index:60），
遮罩盖住了它但仍占同一高度，型号名放顶部会和被压暗的导航文字叠在一起。 */
.md-fig.z .md-lb-cap{position:absolute;left:40px;right:40px;bottom:24px;text-align:center;
color:#fff;font-size:14px;font-weight:700;letter-spacing:.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-fig.z .md-lb-x{position:absolute;top:20px;right:24px;width:40px;height:40px;
border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;
display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none}
.md-fig.z .md-lb-x:hover{background:var(--brand);color:var(--ink)}
@media(min-width:1021px){
/* 试点产线的左栏**固定 266px**（= 240 方图 + 12×2 内边距 + 1×2 边框），
多出来的宽度全部给右栏文字 —— 图框不再跟右栏抢空间。
用 :has() 限定「本 pane 里有方图框」的主从区，其他产线（.md-fig 不带 z）不受影响。
用 px 而不是 fr：fr 会让框随视口长大，1310 屏就又是一堵墙；
而且固定列宽才保证「同一个 240 框」在任何屏宽下都成立。 */
.md-two:has(.md-fig.z){grid-template-columns:minmax(0,266px) minmax(0,1fr)}
}
/* 宽屏（≥1400 CSS px）再加一档。容器上限仍是 1200，但 1440 屏上右栏文字列实测 486px，
240 的方框夹在旁边显得偏小（正文体量压过图片）。把方框提到 280、左栏随之 306
（= 280 + 12×2 内边距 + 1×2 边框），多出的 40px 从右栏借，图片不再偏轻。
⚠️ 只在 ≥1400 触发：1200~1399 屏完全维持 240 原样，中部尺寸不缩水；
⚠️ 仍然写死 px（不是 fr / vw）——「每台机器、每个型号拿到同一个框」的对称平齐原则不变。 */
@media(min-width:1400px){
.md-fig.z .im{max-width:280px}
.md-two:has(.md-fig.z){grid-template-columns:minmax(0,306px) minmax(0,1fr)}
}
@media(max-width:1020px){
/* 窄屏下右栏已换行到图框下方，图框不必再跟着 266px 左栏走。
🚨 但**不能写成 max-width:100%** —— `.im` 是 width:100% + aspect-ratio:1/1，
放开上限后它会跟着列宽长成**正方形大图**：实测 1005px 视口下变成 912×912，
等于一个占满整屏的方块。试点期只有一条产线、又只量了 1089/1424，
这个坑没暴露；全站启用后每个手机访客都会撞上。
改成固定 320：手机（375 屏，内容约 339）近似吃满，平板/窄桌面居中不失控。 */
.md-fig.z .im{max-width:320px}
.md-fig.z .md-img{padding:10px}
.zoom-hint{right:14px;bottom:14px}
}
@media(max-width:620px){
.md-fig.z .md-lb{padding:16px}
.md-fig.z .md-lb-cap{bottom:16px;left:24px;right:24px;font-size:12.5px}
.md-fig.z .md-lb-x{top:12px;right:12px;width:34px;height:34px;font-size:20px}
.md-fig.z .md-lb-im img{max-width:94vw;max-height:70vh}
}
.md-r:nth-of-type(1):checked~.md-panes>.md-pane:nth-child(1){display:block}.md-r:nth-of-type(1):checked~.md-list>li:nth-child(1)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(1):checked~.md-list>li:nth-child(1)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(1):focus-visible~.md-list>li:nth-child(1)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(2):checked~.md-panes>.md-pane:nth-child(2){display:block}.md-r:nth-of-type(2):checked~.md-list>li:nth-child(2)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(2):checked~.md-list>li:nth-child(2)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(2):focus-visible~.md-list>li:nth-child(2)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(3):checked~.md-panes>.md-pane:nth-child(3){display:block}.md-r:nth-of-type(3):checked~.md-list>li:nth-child(3)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(3):checked~.md-list>li:nth-child(3)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(3):focus-visible~.md-list>li:nth-child(3)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(4):checked~.md-panes>.md-pane:nth-child(4){display:block}.md-r:nth-of-type(4):checked~.md-list>li:nth-child(4)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(4):checked~.md-list>li:nth-child(4)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(4):focus-visible~.md-list>li:nth-child(4)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(5):checked~.md-panes>.md-pane:nth-child(5){display:block}.md-r:nth-of-type(5):checked~.md-list>li:nth-child(5)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(5):checked~.md-list>li:nth-child(5)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(5):focus-visible~.md-list>li:nth-child(5)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(6):checked~.md-panes>.md-pane:nth-child(6){display:block}.md-r:nth-of-type(6):checked~.md-list>li:nth-child(6)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(6):checked~.md-list>li:nth-child(6)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(6):focus-visible~.md-list>li:nth-child(6)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(7):checked~.md-panes>.md-pane:nth-child(7){display:block}.md-r:nth-of-type(7):checked~.md-list>li:nth-child(7)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(7):checked~.md-list>li:nth-child(7)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(7):focus-visible~.md-list>li:nth-child(7)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(8):checked~.md-panes>.md-pane:nth-child(8){display:block}.md-r:nth-of-type(8):checked~.md-list>li:nth-child(8)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(8):checked~.md-list>li:nth-child(8)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(8):focus-visible~.md-list>li:nth-child(8)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(9):checked~.md-panes>.md-pane:nth-child(9){display:block}.md-r:nth-of-type(9):checked~.md-list>li:nth-child(9)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(9):checked~.md-list>li:nth-child(9)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(9):focus-visible~.md-list>li:nth-child(9)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(10):checked~.md-panes>.md-pane:nth-child(10){display:block}.md-r:nth-of-type(10):checked~.md-list>li:nth-child(10)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(10):checked~.md-list>li:nth-child(10)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(10):focus-visible~.md-list>li:nth-child(10)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(11):checked~.md-panes>.md-pane:nth-child(11){display:block}.md-r:nth-of-type(11):checked~.md-list>li:nth-child(11)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(11):checked~.md-list>li:nth-child(11)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(11):focus-visible~.md-list>li:nth-child(11)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(12):checked~.md-panes>.md-pane:nth-child(12){display:block}.md-r:nth-of-type(12):checked~.md-list>li:nth-child(12)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(12):checked~.md-list>li:nth-child(12)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(12):focus-visible~.md-list>li:nth-child(12)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(13):checked~.md-panes>.md-pane:nth-child(13){display:block}.md-r:nth-of-type(13):checked~.md-list>li:nth-child(13)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(13):checked~.md-list>li:nth-child(13)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(13):focus-visible~.md-list>li:nth-child(13)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(14):checked~.md-panes>.md-pane:nth-child(14){display:block}.md-r:nth-of-type(14):checked~.md-list>li:nth-child(14)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(14):checked~.md-list>li:nth-child(14)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(14):focus-visible~.md-list>li:nth-child(14)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(15):checked~.md-panes>.md-pane:nth-child(15){display:block}.md-r:nth-of-type(15):checked~.md-list>li:nth-child(15)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(15):checked~.md-list>li:nth-child(15)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(15):focus-visible~.md-list>li:nth-child(15)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(16):checked~.md-panes>.md-pane:nth-child(16){display:block}.md-r:nth-of-type(16):checked~.md-list>li:nth-child(16)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(16):checked~.md-list>li:nth-child(16)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(16):focus-visible~.md-list>li:nth-child(16)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(17):checked~.md-panes>.md-pane:nth-child(17){display:block}.md-r:nth-of-type(17):checked~.md-list>li:nth-child(17)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(17):checked~.md-list>li:nth-child(17)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(17):focus-visible~.md-list>li:nth-child(17)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(18):checked~.md-panes>.md-pane:nth-child(18){display:block}.md-r:nth-of-type(18):checked~.md-list>li:nth-child(18)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(18):checked~.md-list>li:nth-child(18)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(18):focus-visible~.md-list>li:nth-child(18)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(19):checked~.md-panes>.md-pane:nth-child(19){display:block}.md-r:nth-of-type(19):checked~.md-list>li:nth-child(19)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(19):checked~.md-list>li:nth-child(19)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(19):focus-visible~.md-list>li:nth-child(19)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(20):checked~.md-panes>.md-pane:nth-child(20){display:block}.md-r:nth-of-type(20):checked~.md-list>li:nth-child(20)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(20):checked~.md-list>li:nth-child(20)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(20):focus-visible~.md-list>li:nth-child(20)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(21):checked~.md-panes>.md-pane:nth-child(21){display:block}.md-r:nth-of-type(21):checked~.md-list>li:nth-child(21)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(21):checked~.md-list>li:nth-child(21)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(21):focus-visible~.md-list>li:nth-child(21)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(22):checked~.md-panes>.md-pane:nth-child(22){display:block}.md-r:nth-of-type(22):checked~.md-list>li:nth-child(22)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(22):checked~.md-list>li:nth-child(22)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(22):focus-visible~.md-list>li:nth-child(22)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(23):checked~.md-panes>.md-pane:nth-child(23){display:block}.md-r:nth-of-type(23):checked~.md-list>li:nth-child(23)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(23):checked~.md-list>li:nth-child(23)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(23):focus-visible~.md-list>li:nth-child(23)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}.md-r:nth-of-type(24):checked~.md-panes>.md-pane:nth-child(24){display:block}.md-r:nth-of-type(24):checked~.md-list>li:nth-child(24)>.md-i{background:var(--brand-s);box-shadow:inset 3px 0 0 var(--brand)}.md-r:nth-of-type(24):checked~.md-list>li:nth-child(24)>.md-i>.n{color:var(--brand-d)}.md-r:nth-of-type(24):focus-visible~.md-list>li:nth-child(24)>.md-i{outline:2px solid var(--brand-d);outline-offset:-2px}:root{
--sans:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","HarmonyOS Sans SC","Source Han Sans CN","Microsoft YaHei",sans-serif;
--radius:10px;
}
/* ---------- 规格图 / 并排布局 ---------- */
.spec-fig{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:16px;display:block}
.spec-fig svg{width:100%;height:auto;display:block}
.spec-fig img{width:100%;height:auto;display:block;border-radius:6px;background:#fff}
.spec-two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:24px;align-items:start}
/* 🚨 必须是 minmax(0,1fr)，不能是 1fr：
`1fr` = `minmax(auto,1fr)`，track 最小宽度 = 内容的 min-content。
`.spec-two` 的子项里装着规格表（`.tbl-wrap`）,表格的 min-content 由最长单元格决定，
实测 eye-bolt 页达 597px → track 被撑到 597，而视口只有 469 → **整页横向溢出 133px**
（手机上看就是页面能左右拖，而不是表格自己滚）。
`.tbl-wrap` 本身早已是 `overflow-x:auto`（build.py），本该它自己滚 ——
是这条 `1fr` 让它永远轮不到生效。与 `.md`/`.md-two` 同类的「grid 子项 min-width:auto」坑。 */
@media(max-width:900px){.spec-two{grid-template-columns:minmax(0,1fr)}}
/* ---------- 规格表：等宽数字 + 表头浅底 + 行分隔 ---------- */
.thin-tbl{font-size:13px;font-variant-numeric:tabular-nums}
.thin-tbl th,.thin-tbl td{padding:9px 12px;text-align:left;white-space:normal;
border-bottom:1px solid var(--line2)}
.thin-tbl thead th{background:var(--soft);color:var(--ink);font-weight:600;
font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.thin-tbl thead tr+tr th{background:#fff;color:var(--muted);font-weight:500;
font-size:11px;text-transform:none;letter-spacing:.01em}
.thin-tbl tbody td{color:var(--body)}
.thin-tbl tbody td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.thin-tbl tbody tr:hover td{background:#fbfcfd}
.thin-tbl tbody tr:last-child td{border-bottom:0}
/* ---------- 图注 / 提示 ---------- */
.cap{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.65}
.warn{border-left:3px solid var(--brand);background:var(--brand-s);
padding:15px 18px;margin:16px 0;border-radius:0 6px 6px 0}
.warn h3{font-size:15px;margin:0 0 8px;color:var(--ink);font-weight:700}
.warn p{font-size:14px;color:var(--body)}
/* ---------- 载荷工况列表 ---------- */
.mode{display:grid;grid-template-columns:158px 1fr;gap:12px 20px;align-items:start;
margin:0;padding:14px 0;border-bottom:1px solid var(--line2)}
.mode:last-of-type{border-bottom:0}
.mode .k{font-size:15px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mode .k span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.mode div:nth-child(2n){font-size:14px;color:var(--body);line-height:1.7}
@media(max-width:var(--colw)){.mode{grid-template-columns:1fr;gap:6px}}
/* ---------- 首页主视觉：工厂图背景 ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 0;
background:
linear-gradient(100deg, rgba(13,17,23,.74) 0%, rgba(13,17,23,.52) 38%, rgba(13,17,23,.14) 68%, rgba(13,17,23,0) 100%),
url('/assets/factory-hero.jpg') center/cover no-repeat}
.hero::before{opacity:.5}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
background:linear-gradient(90deg,var(--brand),rgba(255,196,0,0) 62%)}
/* 首页：右侧无文字处让出画布，保持楼体明亮清晰 */
.hero .hero-art{display:none}
.hero .hero-g{grid-template-columns:minmax(0,620px);gap:0}
/* 文字区：磨砂玻璃虚化（软边渐隐，避免生硬方框）+ 轻微压暗，与右侧清晰楼体拉开层次 */
.hero-g > div:first-child{position:relative;z-index:1;padding:20px 24px;margin:-20px -24px}
.hero-g > div:first-child::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:20px;
backdrop-filter:blur(14px) saturate(1.06);-webkit-backdrop-filter:blur(14px) saturate(1.06);
background:linear-gradient(100deg, rgba(13,17,23,.40) 0%, rgba(13,17,23,.12) 58%, rgba(13,17,23,0) 90%);
-webkit-mask-image:linear-gradient(100deg,#000 0 54%,rgba(0,0,0,0) 96%);
mask-image:linear-gradient(100deg,#000 0 54%,rgba(0,0,0,0) 96%)}
.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-lead{color:#c9d2dc;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.hero-art{background:rgba(12,16,22,.42);backdrop-filter:blur(2px);border-color:rgba(255,255,255,.14)}
.hero-band{background:rgba(9,13,18,.74);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
border-top:1px solid rgba(255,255,255,.12)}
.hero-band .hstat{padding:31px 0 35px 34px}
.hero-band .hstat:first-child{padding-left:0}
.hero-band .hstat b{margin-bottom:4px}
@media(max-width:1000px){
.hero-band .hstat{padding:22px 0 24px 28px}
.hero-band .hstat:nth-child(2n+1){padding-left:0}
.hero-band .hstat:nth-child(2n){border-right:0}
}
@media(max-width:900px){
.hero{background:linear-gradient(100deg,rgba(16,20,26,.92) 0%,rgba(16,20,26,.86) 100%),
url('/assets/factory-hero.jpg') center/cover no-repeat;padding:64px 0 0}
}
/* ---------- 系列块（兼容） ---------- */
.cat-block{margin:22px 0}
.cat-block h3{font-size:15.5px;margin:0 0 8px;color:var(--ink)}
/* ---------- 图册系列名：原数据全大写，展示转 Title Case ---------- */
.tcase{text-transform:capitalize;letter-spacing:0}
.tcase small{text-transform:none}
/* ---------- 图片容器：统一比例，网格整齐 ---------- */
.ph-box.photo{padding:0;overflow:hidden;display:flex;align-items:center;
justify-content:center;background:#fff;border-radius:var(--radius)}
.ph-box.photo img{width:100%;height:100%;object-fit:contain}
.card-ic.has-img{width:100%;height:168px;padding:14px;margin-bottom:18px;
background:#fff;border:1px solid var(--line2);border-radius:8px;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-ic.has-img img{width:100%;height:100%;object-fit:contain}
/* 无实拍图的产品线：与有图卡片同结构，中性灰线图 + 待补说明，不再用品牌黄底图标 */
.card-ic.has-img.pending{flex-direction:column;gap:9px;color:#c8cfd7}
.card-ic.has-img.pending svg{width:74px;height:74px;stroke-width:1.6}
.card-ic.has-img.pending em{font-style:normal;font-size:10px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:#a6afb8;line-height:1}
.hero-art-img{width:100%;height:120px;object-fit:contain;display:block;margin:0 auto}
/* 首屏小图容器的图注统一 */
figure .hero-art-img{margin:0 auto 8px}
/* ---------- 场景图（自有品牌矢量示意图，非照片） ---------- */
.sfig{margin:0 0 30px;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line);background:#f2f4f6}
.sfig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.sfig figcaption{font-size:12.5px;color:var(--muted);padding:10px 16px;background:#fff;
border-top:1px solid var(--line2)}
/* 页面主图：紧接头图下方，通栏 */
.ph-fig{margin:0;border-radius:0;overflow:hidden;background:var(--ink)}
.ph-fig img{display:block;width:100%;height:clamp(220px,32vw,420px);object-fit:cover;
opacity:.92}
/* ---------- 内页头图：整幅背景照片（.ph--bg） ----------
2026-09-30 加：联系我们页头图区由「纯深色底 + 下方通栏示意图」改为
「整幅实拍背景 + 文字叠加」，参照首页 .hero 的做法。
背景图不做任何调色处理，仅靠深色渐变遮罩保证文字可读性。
2026-10-01 改：**与普通内页头图 .ph 等高**。
原先为了"背景图铺满好看"给了 min-height:clamp(300px,34vw,430px) + 加大内边距(104/96)，
比 company profile 等页高出一大截。现在 padding 对齐 .ph 的 52px/46px。
但仅对齐 padding 还不够：contact 导语只有 2 行，about(company profile) 有 3 行，
会矮一行。故补 min-height 兜底。
取值依据：**实测** 1440px 视口下 about 页 .ph 高度 = 296px（截图量测，含 1.238 DPI 换算），
取整 296px。文案更长的页面仍由内容自然撑高，不受此值限制。
复核：contact 370px / about 367px（截图尺度），换算 CSS 后约 299 vs 296，肉眼不可辨。 */
.ph--bg{background:var(--ink);padding:52px 0 46px;min-height:296px}
.ph--bg::before{content:"";position:absolute;inset:0;z-index:1;
background:var(--ph-scrim,linear-gradient(100deg,rgba(13,17,23,.80) 0%,rgba(13,17,23,.58) 42%,rgba(13,17,23,.22) 74%,rgba(13,17,23,.08) 100%))}
.ph--bg::after{background:radial-gradient(circle,rgba(255,196,0,.16) 0%,rgba(255,196,0,0) 68%)}
.ph--bg .ph-bgimg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
object-fit:cover;object-position:var(--ph-pos,center 58%);display:block}
.ph--bg .wrap{position:relative;z-index:2;width:100%}
.ph--bg h1{max-width:20ch;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.ph--bg p{color:#cfd7e0;max-width:620px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.ph--bg .crumb,.ph--bg .crumb a{color:#aab4c0}
.ph--bg .crumb span{color:#79838f}
.ph--bg .crumb a:hover{color:#fff}
@media(max-width:640px){
.ph--bg{padding:44px 0 40px;min-height:0}
.ph--bg::before{background:linear-gradient(180deg,rgba(13,17,23,.70) 0%,rgba(13,17,23,.86) 100%)}
}
/* 应用领域：图文卡片 */
.app-card{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;background:#fff}
.app-card .sfig{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.app-card .sfig img{aspect-ratio:16/9}
.app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
@media(max-width:640px){.app-grid{grid-template-columns:1fr}}
/* 应用领域卡片内的小节配图 */
.know-fig{margin:0 0 16px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);
background:#f2f4f6}
.know-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* 制造能力区：图与数字条并排 */
.cap-fig{margin-top:30px}
.cap-fig .sfig{margin:0}
/* ---------- 产品页图集：实拍图替代虚线占位框 ---------- */
.pcell{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:14px;display:flex;align-items:center;justify-content:center;min-height:176px}
.pcell img{width:100%;height:148px;object-fit:contain}
.pcell.empty{border-style:dashed;color:var(--muted);font-size:12px;
letter-spacing:.06em;text-transform:uppercase}
/* 标准页释义块 */
.std-note{margin-top:4px}
.std-note .sn-scope{font-size:15px;line-height:1.75;margin:0 0 12px;color:var(--ink)}
.std-note ul{margin:0;padding-left:20px}
.std-note ul li{margin:7px 0;line-height:1.72}
.sn-caution{margin-top:14px;padding:12px 16px;border-left:3px solid #c0392b;
background:#fdf3f2;border-radius:0 8px 8px 0;font-size:14px;line-height:1.7}
.sn-install{margin-top:12px;padding:12px 16px;border-left:3px solid #1f5fa8;
background:#f2f7fc;border-radius:0 8px 8px 0;font-size:14px;line-height:1.7}
.sn-src{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.6}
/* ---------- 参考载荷表（联网查证，标注来源） ----------
2026-09-24：原来这块直接挂在 下、没有 .wrap 包裹 → 卡片通栏贴边，
而全站其它区块都是「居中 + 1200px 限宽」。现在统一包进 .wrap（.lrw 只负责上间距），
宽度与相邻区块对齐。 */
.lrw{padding-top:64px;padding-bottom:0}
.loadref{margin:0;border:1px solid var(--line);border-radius:var(--r);
background:#fff;overflow:hidden}
.loadref-h{padding:14px 18px;background:rgba(0,0,0,.035);border-bottom:1px solid var(--line)}
.loadref-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.loadref-h p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}
.loadref-b{padding:16px 18px 18px}
.loadref table{width:100%;border-collapse:collapse;font-size:13.5px}
.loadref th,.loadref td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right}
.loadref th:first-child,.loadref td:first-child{text-align:left}
.loadref thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;
color:var(--muted);font-weight:700}
.loadref tbody tr:last-child td{border-bottom:none}
/* 说明性段落（花兰载荷说明）。**不要复用 .tlist** —— 那里的 b 是 display:block，
会把句子中间的加粗短语顶到单独一行，读起来像断句。 */
.lr-p{margin:0 0 14px;font-size:14.2px;line-height:1.78;color:var(--body)}
.lr-p:last-of-type{margin-bottom:18px}
.lr-p b{font-weight:700;color:var(--ink)}
.loadref-note{margin:12px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted);
padding:10px 14px;border-left:3px solid var(--brand);background:rgba(0,0,0,.03)}
@media(max-width:640px){.lrw{padding-top:44px}.loadref-b{padding:14px 14px 16px}
.loadref table{font-size:12.5px}}
/* ---------- 相关标准与技术指南 ----------
2026-09-24：这块现在是页面最后一个内容区块（下一块就是黄色转化区）。
原来只有上内边距，胶囊行会直接贴住转化区上沿；这里补下内边距。 */
.rel{margin:0;padding:0 0 48px}
.rel-h{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);font-weight:700;margin:0 0 14px}
.rel-l{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.rel-l a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
border:1px solid var(--line);border-radius:999px;background:#fff;
font-size:13.5px;color:var(--ink);text-decoration:none;transition:.18s}
.rel-l a:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.rel-l a::before{content:"";width:5px;height:5px;border-radius:50%;
background:var(--brand);opacity:.55}
@media(max-width:640px){.rel-l a{font-size:13px;padding:8px 13px}}
/* ---------- FAQ 区块 ---------- */
.faqblk{margin:0}
.faq-q{width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line);
padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;letter-spacing:-.01em;
font-family:inherit;line-height:1.45}
.faq-q:hover{color:var(--brand)}
.faq-q::after{content:"+";flex:none;font-size:19px;font-weight:400;color:var(--brand);
line-height:1;transition:.2s}
/* 减号用真实字符。不要写 CSS 的数字转义形式（反斜杠加 2212）：本 CSS 块是 raw
字符串，转义会原样落到产物里，浏览器把双反斜杠解析成字面反斜杠，显示成乱码。 */
.faq-i[open] .faq-q::after{content:"−"}
.faq-a{padding:0 0 18px;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:var(--colw)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-src{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}