/* ============================================================================
   w3.css — W3 redesign design system ("deep-space" direction, 2026-07)
   Loaded ONLY by redesigned pages (home / products list / product detail).
   Legacy pages keep mibooz + tejoy-redesign until the full-site rollout.

   It styles two kinds of DOM:
     1. Machinery-emitted markup that MUST keep its class names
        (chrome header/footer/mobilenav from _chrome.html, {{TILES}} from
        renderHome, cardHtml/#productGrid/chips from regenListPage,
        swiper-slide gallery from render()). Those class names are load-bearing
        anchors for chrome-sync/regen — restyle them, never rename them.
     2. Fresh w3-* sections owned by the new templates.
   No bootstrap, no jQuery, no icon font on redesigned pages.
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------ */
:root {
  --w3-bg: #0a0c0f;
  --w3-bg2: #0e1114;
  --w3-panel: #14181d;
  --w3-panel2: #191e24;
  --w3-line: rgba(255, 255, 255, 0.08);
  --w3-line2: rgba(255, 255, 255, 0.16);
  --w3-text: #eef1f4;
  --w3-text2: #a9b2bb;
  /* 2026-07-28:#75808a → #818d98。原值在 --w3-surface-2(卡片底,全站最亮的一档面)上
     只有 **3.87**,低于 WCAG AA 正文的 4.5。
     ⚠️ 审计报告写的是 4.42 —— 那是在 #14181d(面板底)上量的。**同一个前景色在六种面上
        有六个对比度,只报一个数会低估最差的那一档。** 判据要取【最不利背景】,不是随手一个。
        改前六面:3.87 / 4.42 / 4.62 / 4.70 / 4.86 / 4.94
        改后六面:4.60 / 5.26 / 5.50 / 5.59 / 5.78 / 5.88
     ⚠️ 改令牌影响两侧:抬亮 text3 会让它靠近 text2。实测 text2 与新 text3 仍差 **1.577 倍**,
        三档层级没被挤坏 —— 这是从字阶那批学到的:**改一个刻度点,受影响的是它两侧的整片区间。** */
  --w3-text3: #818d98;
  --w3-accent: #7db1ff;
  --w3-tile: #f4f5f7;          /* light stage for white-background product photos */
  --w3-ink: #14181d;           /* dark text on light surfaces */
  --w3-radius: 16px;
  --w3-radius-s: 10px;
  --w3-header-h: 68px;
  --w3-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --w3-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  --w3-maxw: 1240px;

  /* ---- 治沉闷对比系统 tokens (anti-flat / elevation & contrast — DESIGN.md §2.6, 2026-07-26 Joe/总工) ----
     北极星 anduril.com:暗得高级 = 分层 + 对比 + 焦点,非暗得平。新增令牌,③起逐块套用,未套前零视觉变化。 */
  --w3-surface-0: #0a0c0f;   /* 页面基底(= bg) */
  --w3-surface-1: #0e1114;   /* 凹陷:stat well / 输入框(inset,比基底略深感) */
  /* ⭐ 2026-07-27 Joe 早上反馈"卡还是暗贴暗没浮出来"→ 加大台阶:暗模式浮起靠【更亮的面+更亮顶边+更实边】
     比阴影有效(阴影在暗底弱)。surface-2 #171c22→#1e242e(与基底 #0a0c0f 台阶更明显)、顶边高光加亮、边用 line2。 */
  --w3-surface-2: #1e242e;   /* 卡片:比基底明显抬亮一档(肉眼可辨的台阶),配 elev/edge/边浮起 */
  --w3-surface-3: #262d38;   /* 抬起 / hover 态(再亮一档) */
  --w3-elev-card: 0 2px 8px -2px rgba(0,0,0,.55), 0 16px 40px -14px rgba(0,0,0,.7);  /* 卡片浮起柔和双层投影(略强) */
  --w3-edge-top: inset 0 1px 0 rgba(255,255,255,.09);   /* 顶边内高光(加亮):把卡片从暗底"抬"起来 */
  --w3-invert-bg: #f4f5f7;   /* 选择性提亮带(信任/证据类)浅底 */
  --w3-invert-ink: #14181d;  /* 反转带深标题 */
  --w3-invert-ink2: #4d5762; /* 反转带正文。2026-07-28:#56606b 在白卡上只有 6.40,低于总工定的正文级 ≥7;改 #4d5762 → 7.35。
     ⚠️ 全站令牌:14 条规则 / 32 个挂 w3-whitecards 的页面(首页 Our Advantages、Solutions、Guides、About)。
     只改文字深浅,不动任何版式。要退回原样就把这一行改回 #56606b。 */
  --w3-invert-accent: #1d63d6; /* 反转带 accent(浅底上 --w3-accent 太浅→用深蓝,与 §2.1 链接色同源) */
  --w3-well: radial-gradient(circle at 50% 42%, rgba(125,177,255,.13), transparent 70%);  /* 图标空 void 垫底(补白) */

  /* ══ 字阶(总工 2026-07-28 拍板 · 见 DESIGN.md §2.2)══════════════════════════
     **单值,不是带宽。** 改之前:186 处 font-size 声明散在 ~37 个落点 ——
     19 个固定值(9.5→26px,大量 0.5px 步长)+ 20 条 clamp,没有两条相同。

     🔴 为什么带宽写法必须废掉 —— 生产实测(375/768/1024/1280/1440)拿到 **8 对名次翻转**:
        `.w3-h2` 与 `.page-header__title` 在 375 是 32/27.2(h2 大)、1024 是 34.8/41(h2 小)、
        1440 又是 49/48(h2 大)—— **同一对元素翻转了两次**。
        还有 12 组元素在某个宽度撞成相等、换个宽度又散开,例如
        section-title / about-stat / guides-scenes / scene-panel 在 375 上全是 24px,
        到 1440 散成 35.2 / 30.2 / 31.7 / 38.4。
        **散开的顺序没有任何设计意图,只是几条 vw 系数碰巧不同 ——
        层级不是设计出来的,是碰撞出来的。**

     机制:**只有最上四档随断点跳,而且同步跳。** 所有元素在同一个断点换档,
     所以名次永远不会翻转 —— 这正是治那 8 对翻转的根,不是把它们挪开。

     判据:相邻档比例必须 ≥1.12(肉眼可辨),否则它不是一档,只是一次没必要的决定。
     0.5px = 3% 差,分辨不出来,它不制造层级、只制造不一致。

     ⚠️ 加新值 = 先进 DESIGN.md §2.2,由 type-scale-check 守。**档是给角色的,不是给数字省事的。** */
  --w3-fs-micro:   11px;    /* eyebrow / 全大写标签(常配 letter-spacing) */
  --w3-fs-small:   12.5px;  /* meta / 序号 / 图注 */
  --w3-fs-compact: 14px;    /* 导航 / 按钮 / 次要正文 / 密集列表 —— 全站最大的一坨(71 处) */
  --w3-fs-body:    16px;    /* 正文。= body 的值:正文若不等于 body,等于承认根值是错的 */
  --w3-fs-lead:    18px;    /* 引导句 / h3 */
  /* 大端:相邻比例 1.33 / 1.29 / 1.33 / 1.33 —— 几乎恒定。
     ⚠️ 这五档的值不是从"现状平均一下"来的,是从【改后每个元素的变动幅度】倒推的:
        全部落在 −7% ~ +15%,唯一超出的 .xlc-stat-number 是 +23%(变大,方向对)。
        改一个刻度点,受影响的是它两侧的整片区间,不是那一个点 —— 定档时要看
        "这一档的变动会把哪些元素挤到哪里去",而不只是"这一档合不合理"。 */
  --w3-fs-h3:  21px;
  --w3-fs-h2:  28px;
  --w3-fs-h1:  36px;
  --w3-fs-d2:  48px;   /* display-2:页标题 / 区块大标题 */
  --w3-fs-d1:  64px;   /* display-1:hero 主标题 */
}

/* ══ 窄屏(<768):最上四档【同步】跳一档 ═══════════════════════════════════
   同步是关键。所有元素在同一个断点换档,名次就永远不会翻转 ——
   改前那 8 对翻转,根源正是每条 clamp 各自按自己的 vw 系数连续漂移。

   🔴 display-1 34 是【实测定死】的,不是拍的:375 的 hero 容器实测宽 297px,
      逐档量四语行数 —— 36px 时 en/pt 是 4 行,34px 时四语全部 ≤3 行。34 是上限。
      (顺带修掉一个存量:改前 37.6px,en/pt 在 375 上本来就是 4 行。)

   🔴 窄屏五档【全部拆开,一档不合并】。
      先试过合并 h1 与 display-2(都取 29),理由是"窄屏放不下 5 个 ≥1.12 的间隔,
      而窄屏本来就不需要 5 级标题层次"。**实测把这个理由推翻了**:
      h1 档元素与 display-2 档元素在 **16 个页面**(About / Contact / Guides 四语)
      同页共存 —— 合并会让这 16 页在窄屏真的少一级层级。
      同理 display-1 与 display-2 也没合并:**4 个首页**(en/es/pt/zh)同时含
      .w3-h1 与 .w3-h2,合并会让 hero 和区块标题一样大。
      **"这两档反正互斥"是个假设 —— 枚举产出页去证实它,别假定。**

   ⚠️ 代价说清楚:21→24→27→30→34 里 **27→30 = 1.111,低于我们自己定的 1.12**(差 0.9%)。
      窄屏从 body 16 到硬上限 34 只有 2.125 倍,六个间隔塞不下全部 ≥1.12。
      **这是刻意放宽一次,不是没注意到。** 取舍:层级完整 > 0.9% 的阈值余量 ——
      另一条路(合并两档)会让 16 个页面真的少一级,那个代价更实在。 */
/* 🔴 中间档(768–1023)。**这一档是实测逼出来的,不是对称美学。**
   只设一个 767 断点时,hero 在 768–1023 直接吃桌面的 d1 64px,而那一段的 hero 容器
   只有 303–359px 宽 —— 实测 .w3-hero__content 369 > 303,**溢出,是这批引入的**
   (生产旧版同宽度 303>303 不溢出,因为旧 clamp 在 768 处算出来才 ~40px)。
   带宽写法在这一点上是对的:它天然给了中间过渡。**换成单值就必须自己把过渡补回来。**
   ⚠️ 仍然只有最上四档跳、且同步跳 —— 加断点不破坏"名次不翻转",
      因为所有档在同一个断点一起换。 */
@media (max-width: 1023px) {
  :root {
    --w3-fs-h2: 26px;
    --w3-fs-h1: 32px;
    --w3-fs-d2: 38px;
    --w3-fs-d1: 46px;
  }
}
@media (max-width: 767px) {
  :root {
    --w3-fs-h2: 24px;
    --w3-fs-h1: 27px;
    --w3-fs-d2: 30px;
    --w3-fs-d1: 34px;
  }
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--w3-bg);
  color: var(--w3-text);
  /* CJK 兜底尾链:zh(内部 locale)在中英混排时用系统中文字体,拉丁字形仍优先 Inter。纯拉丁页不受影响。 */
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: var(--w3-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: rgba(125, 177, 255, 0.28); }
:focus-visible { outline: 2px solid var(--w3-accent); outline-offset: 3px; border-radius: 4px; }
/* 跳过导航链接 —— 审计实测首页 101 个可聚焦元素、导航全在最前,键盘用户每进一页都要穿过整个
   导航才够得到正文(WCAG 2.4.1,A 级)。
   ⚠️ 不能用 display:none / visibility:hidden 藏它 —— 那样【键盘也聚焦不到】,这条链接等于不存在。
      只把它移出视口,聚焦时滑回来。 */
.w3-skip {
  position: absolute; top: -80px; left: 24px; z-index: 2000;
  padding: 12px 20px; border-radius: var(--w3-radius);
  background: var(--w3-accent); color: #0b0d10;
  font-size: var(--w3-fs-compact); font-weight: 600; text-decoration: none;
  transition: top 0.18s var(--w3-ease);
}
.w3-skip:focus { top: 16px; }
/* 落点靠 tabindex="-1" 才接得住焦点。那是【程序化】聚焦,不该画焦点框 ——
   :focus-visible 本就不会对它生效,这条把 :focus 那一侧也说死。 */
#main-content:focus { outline: none; }
body.w3-nav-locked { overflow: hidden; }

.w3-container, .container { width: 100%; max-width: var(--w3-maxw); margin: 0 auto; padding: 0 24px; }

/* legacy grid class neutralisers (markup emitted by render machinery) */
.row { display: block; margin: 0; }
[class*="col-"] { width: auto; padding: 0; }

/* ---- shared type ------------------------------------------------------- */
.w3-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--w3-text3);
}
.w3-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--w3-line2); }
.w3-h1 {
  font-size: var(--w3-fs-d1);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.028em;
}
/* §2.2 h2 —— 2026-07-28 按 Joe 密度 brief 升档(见 DESIGN.md §2.2 的状态说明)。
   ⚠️ 状态:待 Joe 实站确认。他若不满意，把这里和下面 .xlc-section h2 那条改回
   clamp(1.65rem,3vw,2.45rem)/1.14/-0.022em 即可回退，两处单点。 */
.w3-h2 {
  font-size: var(--w3-fs-d2); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700;
}
.w3-sub { color: var(--w3-text2); font-size: var(--w3-fs-body); max-width: 64ch; }
/* 区块【内】的次级标题(第一个用例:Popular products 里的 Shop by Starlink model)。
   层级 48 → 28 → 14(区块大标题 / 次级标题 / 商品卡标题),三档都在字阶上。 */
.w3-h3 { font-size: var(--w3-fs-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
/* 720px 卡住的只有一个标题(Field-proven)——其余四个区块标题的自然宽是 186–635px,
   远在 720 以下,放开对它们【可证明零影响】(已逐个量过)。
   副标题 .w3-sub 自带 max-width: 64ch,不会跟着变宽 —— 标题与正文本来就该是两种行宽。
   ⚠️ 用 none 而不是换一个更大的数字:.w3-sechead--row 已经在用 none,这是本规则自己的词汇。 */
.w3-sechead { display: grid; gap: 14px; max-width: none; margin-bottom: 44px; }
.w3-sechead--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
.w3-sechead--row > div { display: grid; gap: 14px; }
@media (max-width: 640px) { .w3-sechead--row { grid-template-columns: 1fr; align-items: start; } }

.w3-section { padding: 96px 0; }
.w3-section--tight { padding: 72px 0; }
/* 板块分隔 = 空间 + 色调,禁 hairline rule(总工/Joe 定,世界级做法 Apple/Linear)。
   旧的 `.w3-hairline-top` 细线全站移除;分段靠充足纵向留白(.w3-section 96px)+ 相邻板块极微妙
   色调交替(base --w3-bg #0a0c0f ↔ surface --w3-bg2 #0e1114,靠色块边界读分段)。见 DESIGN.md §板块分隔。 */
.w3-hairline-top { border-top: 0; }
.w3-band--alt { background: var(--w3-bg2); }

/* ---- buttons ----------------------------------------------------------- */
.w3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-size: var(--w3-fs-compact); font-weight: 600; letter-spacing: 0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--w3-ease), background 0.25s, border-color 0.25s, color 0.25s;
}
.w3-btn--primary { background: #fff; color: #0b0d10; }
.w3-btn--primary:hover { background: #dfe6ee; transform: translateY(-1px); }
.w3-btn--ghost { border-color: var(--w3-line2); color: var(--w3-text); background: rgba(255, 255, 255, 0.02); }
.w3-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
.w3-btn .w3-arw { transition: transform 0.25s var(--w3-ease); }
.w3-btn:hover .w3-arw { transform: translateX(3px); }

.w3-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--w3-fs-compact); font-weight: 600; color: var(--w3-text);
}
.w3-link-arrow::after { content: "→"; transition: transform 0.25s var(--w3-ease); color: var(--w3-text3); }
.w3-link-arrow:hover::after { transform: translateX(4px); color: var(--w3-text); }

/* ---- reveal motion ------------------------------------------------------ */
[data-w3-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.65s var(--w3-ease), transform 0.65s var(--w3-ease); }
[data-w3-reveal].is-in { opacity: 1; transform: none; }
[data-w3-reveal="2"] { transition-delay: 0.08s; }
[data-w3-reveal="3"] { transition-delay: 0.16s; }
[data-w3-reveal="4"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-w3-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================================================================
   CHROME — header (fixed, translucent-on-scroll)
   DOM comes from data/templates/_chrome.html via chrome-sync. Do not rename.
   ========================================================================== */
.main-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--w3-header-h);
  display: flex; align-items: stretch;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.w3-scrolled .main-header,
.w3-solid-header .main-header {
  background: rgba(10, 12, 15, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--w3-line);
}
/* ⑰ top scrim: transparent nav floats over the hero; on bright skies (home golden
   sky, ⑫ top-right release) the light logo/menu lost contrast. A restrained top-down
   gradient guarantees readability on ANY hero without killing the bright ambiance.
   Sits behind the nav content (z-index:-1 within the fixed header's stacking context,
   still above the hero). Fades out once the solid scrolled header takes over. */
.main-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 128px; z-index: -1;
  pointer-events: none; transition: opacity 0.35s;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.14) 46%, rgba(0, 0, 0, 0) 100%);
}
.w3-scrolled .main-header::before, .w3-solid-header .main-header::before { opacity: 0; }
.main-menu { width: 100%; display: flex; }
.main-menu-wrapper {
  width: 100%; max-width: var(--w3-maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
/* 窄屏把左右留白与间距收紧,给 logo 让出宽度(收缩是兜底,这一条是让它尽量不必收缩) */
@media (max-width: 560px) {
  .main-menu-wrapper { padding: 0 16px; gap: 14px; }
}
/* ⚠️ logo 必须【能收缩】(2026-07-28)。原本是 flex: 0 0 auto —— 不许收缩,
   于是 375 上宽度账是 logo 224 + gap 28 + 操作区 98 + padding 48 = 398 > 375,
   语言切换器被挤出容器右边 14px(实测 .main-menu 374>360,而且是可见的,不是屏外元素)。
   ⚠️ 只收紧 padding/gap 治不了根:那只是把溢出推到更窄的设备上(320 仍会溢出)。
      **能收缩的东西才不会溢出** —— min-width:0 是关键,没有它 flex 项不会缩到内容宽以下。 */
.main-menu-wrapper__logo { flex: 0 1 auto; min-width: 0; }
.main-menu-wrapper__logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; opacity: 1; }   /* Joe: logo at full white, never dimmed */
/* ⚠️ 保持 flex: 1 1 auto —— 它撑满 logo 右边的剩余空间,配合 justify-content:flex-end
   把导航与切换器顶到右缘。我一度为了治溢出把它改成 0 0 auto,**桌面导航当场挤回左边**
   (1440 实测语言切换器右缘 924,容器 1425)。溢出的根在 logo 不能收缩,不在这里 ——
   **治标的地方改了,标没了,别的也没了。** */
.main-menu-wrapper__main-menu { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.main-menu-wrapper__call { display: none; }

/* top-level nav */
.main-menu__list { display: flex; align-items: center; gap: 4px; }
.main-menu__list > li { position: relative; }
.main-menu__list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: 8px;
  font-size: var(--w3-fs-compact); font-weight: 600; color: #d7dde4;   /* Joe: one notch below logo/title (brightness ladder) but still crisp; hover->#fff */
  transition: color 0.2s, background 0.2s;
}
.main-menu__list > li:hover > a, .main-menu__list > li:focus-within > a { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* ⑱ active section (JS adds .is-active by current path — chrome stays byte-identical):
   current item goes full white + a short accent underline; other items already muted. */
.main-menu__list > li.is-active > a { color: #fff; font-weight: 700; }   /* one notch heavier than idle 600; accent underline is the primary current-page cue */
.main-menu__list > li.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--w3-accent); pointer-events: none;
}
/* caret only on items that actually have a dropdown */
.main-menu__list > li > a + ul { }
.main-menu__list > li:has(> ul) > a::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); opacity: 0.55;
  transition: transform 0.2s var(--w3-ease), margin-top 0.2s;
}
.main-menu__list > li:hover:has(> ul) > a::after { transform: rotate(225deg); margin-top: 3px; }

/* dropdown panels */
.main-menu__list > li > ul {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px;
  padding: 8px; border-radius: 14px;
  background: rgba(16, 19, 23, 0.96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--w3-line); box-shadow: var(--w3-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.22s var(--w3-ease), transform 0.22s var(--w3-ease), visibility 0.22s;
}
.main-menu__list > li:hover > ul, .main-menu__list > li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
/* hover bridge so the pointer can travel into the panel */
.main-menu__list > li > ul::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.main-menu__list > li > ul li a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: 9px;
  font-size: var(--w3-fs-compact); color: #c9d1d9; transition: background 0.15s, color 0.15s;
}
.main-menu__list > li > ul li a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-dd__n { font-size: var(--w3-fs-micro); color: var(--w3-text3); font-variant-numeric: tabular-nums; }
.nav-dd__sep { border-top: 1px solid var(--w3-line); margin-top: 6px; padding-top: 6px; }
/* Guides 下拉:5 任务轴与 FAQ 间的"参考"分组小标(Joe 定:FAQ 非可筛选轴,显性分组不孤儿)。非链接。
   ⛔ 当前全站 0 消费者。2026-07-28 Joe 的实际使用否掉了 REFERENCE 这个分组(他并不把 FAQ 当"另一类"),
   `_chrome.html` 里那个 <li> 已删。规则保留、不清理:删掉它等于把"REFERENCE 分组要不要彻底废除"
   这个该由 Joe 定的问题一起埋掉 —— 沉默的技术债和显性的待办,处理方式完全不同。 */
.nav-dd__reflabel { border-top: 1px solid var(--w3-line); margin-top: 6px; padding: 10px 18px 4px; font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w3-text3); pointer-events: none; }

/* language switcher (chrome block) */
.lang-switch { position: relative; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--w3-line2);
  font-size: var(--w3-fs-small); font-weight: 600; letter-spacing: 0.04em; color: #c9d1d9;
  cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.lang-switch__btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.lang-switch__caret { transition: transform 0.2s var(--w3-ease); }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 152px;
  padding: 6px; border-radius: 12px;
  background: rgba(16, 19, 23, 0.96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--w3-line); box-shadow: var(--w3-shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--w3-ease), transform 0.2s var(--w3-ease), visibility 0.2s;
}
.lang-switch.is-open .lang-switch__menu, .lang-switch:hover .lang-switch__menu, .lang-switch:focus-within .lang-switch__menu {
  opacity: 1; visibility: visible; transform: none;
}
.lang-switch__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 12px; border-radius: 8px; font-size: var(--w3-fs-compact); color: #c9d1d9; }
a.lang-switch__link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* selected language: wanew accent + ✓ tick (NOT the reference green) */
.lang-switch__link.is-current { color: var(--w3-accent); cursor: default; font-weight: 600; }
.lang-switch__link.is-current::after { content: "✓"; font-size: var(--w3-fs-small); line-height: 1; }
/* mobile: switcher collapses to the globe icon only (hide code text + caret) */
@media (max-width: 1080px) {
  .lang-switch__btn > span { display: none; }
  .lang-switch__caret { display: none; }
  .lang-switch__btn { padding: 9px; gap: 0; }
}

/* mobile toggler (fa icon font is not loaded — draw the hamburger in CSS) */
.mobile-nav__toggler {
  display: none; width: 44px; height: 44px; border-radius: 10px;
  align-items: center; justify-content: center;
}
.mobile-nav__toggler:hover { background: rgba(255, 255, 255, 0.07); }
.mobile-nav__toggler i.fa-bars {
  display: block; width: 20px; height: 2px; background: #e8ecf1; border-radius: 2px;
  box-shadow: 0 -6px 0 #e8ecf1, 0 6px 0 #e8ecf1;
}

/* ---- mobile nav panel (chrome block) ------------------------------------ */
.mobile-nav__wrapper {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden; pointer-events: none;
}
.mobile-nav__wrapper.expanded { visibility: visible; pointer-events: auto; }
.mobile-nav__overlay {
  position: absolute; inset: 0; background: rgba(4, 5, 7, 0.6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.3s;
}
.mobile-nav__wrapper.expanded .mobile-nav__overlay { opacity: 1; }
.mobile-nav__content {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: #0d1013; border-left: 1px solid var(--w3-line);
  padding: 22px 22px 34px; overflow-y: auto;
  transform: translateX(102%); transition: transform 0.38s var(--w3-ease);
  display: flex; flex-direction: column; gap: 22px;
}
.mobile-nav__wrapper.expanded .mobile-nav__content { transform: none; }
.mobile-nav__close { align-self: flex-end; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-nav__close:hover { background: rgba(255, 255, 255, 0.07); }
.mobile-nav__close i.fa-times { font-style: normal; }
.mobile-nav__close i.fa-times::before { content: "✕"; font-size: var(--w3-fs-lead); color: #e8ecf1; }
.mobile-nav__content .logo-box { margin-top: -46px; }
.mobile-nav__content .logo-box img { height: 24px; width: auto; }
.mobile-nav__container li { border-bottom: 1px solid var(--w3-line); }
.mobile-nav__container li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; font-size: var(--w3-fs-body); font-weight: 500; color: #d7dde3;
}
.mobile-nav__container li li > a { font-size: var(--w3-fs-compact); color: var(--w3-text2); padding: 10px 2px 10px 16px; }
.mobile-nav__container li ul { display: none; border-top: 1px solid var(--w3-line); padding-bottom: 6px; }
.mobile-nav__container li.w3-open > ul { display: block; }
/* ⑱ active section in mobile menu (JS marks the top-level li) */
.mobile-nav__container li.is-active > a { color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--w3-accent); }
.mobile-nav__container li ul li:last-child { border-bottom: 0; }
.w3-subnav-btn {
  background: none; border: 1px solid var(--w3-line); border-radius: 8px;
  width: 30px; height: 30px; flex: 0 0 auto; cursor: pointer; position: relative;
}
.w3-subnav-btn::before, .w3-subnav-btn::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: #c9d1d9;
}
.w3-subnav-btn::before { width: 12px; height: 1.6px; }
.w3-subnav-btn::after { width: 1.6px; height: 12px; transition: transform 0.2s; }
li.w3-open > a .w3-subnav-btn::after { transform: scaleY(0); }
.mobile-nav__contact li { border: 0; }
.mobile-nav__contact a { color: var(--w3-text2); font-size: var(--w3-fs-compact); }
.mobile-nav__contact i { display: none; }

/* scroll-to-top */
.scroll-to-target {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(20, 24, 29, 0.9); border: 1px solid var(--w3-line2);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.w3-scrolled .scroll-to-target { opacity: 1; visibility: visible; transform: none; }
.scroll-to-target:hover { border-color: rgba(255, 255, 255, 0.4); }
.scroll-to-target i.fa-angle-up {
  width: 9px; height: 9px; margin-top: 3px;
  border-left: 2px solid #e8ecf1; border-top: 2px solid #e8ecf1; transform: rotate(45deg);
}

/* sticky-header placeholder from old theme — inert here */
.stricky-header { display: none; }

@media (max-width: 1080px) {
  .main-menu__list { display: none; }
  .mobile-nav__toggler { display: inline-flex; }
}

/* ============================================================================
   CHROME — footer  (bootstrap col classes styled by hand; DOM from chrome)
   ========================================================================== */
.site-footer { background: #08090b; border-top: 1px solid var(--w3-line); margin-top: 0; }
.site-footer__middle { padding: 72px 0 48px; }
.site-footer__middle-inner > .row { display: grid; grid-template-columns: minmax(260px, 1.15fr) 2fr; gap: 48px; }
.site-footer .pcblock > .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.footer-widget__title { font-size: var(--w3-fs-compact); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w3-text); margin-bottom: 16px; }
/* Joe: footer col-1 leads with the white wordmark, company info left-aligned below it */
.footer-widget__logo { display: inline-block; margin-bottom: 18px; }
.footer-widget__logo img { height: 30px; width: auto; display: block; }
.footer-widget__newsletter .text { color: var(--w3-text3); font-size: var(--w3-fs-compact); line-height: 1.8; }
/* 命中区靠 padding 撑,不靠 li 的 margin —— margin 是死区,点不中。
   行内 <a> 的命中区就是字高 17px;改 inline-block 后 17+14=31,且相邻链接命中区连续无缝。
   桌面 31px 已越过 WCAG 2.2 AA 的 24px;移动端才是手指真正落点,单独提到 43px。 */
.footer-widget__links-list li { margin: 0; }
.footer-widget__links-list a { display: inline-block; padding: 7px 0; color: var(--w3-text3); font-size: var(--w3-fs-compact); transition: color 0.15s; }
.footer-widget__links-list a:hover { color: var(--w3-text); }
.site-footer__bottom { border-top: 1px solid var(--w3-line); padding: 22px 0; }
.site-footer__bottom-text { color: var(--w3-text3); font-size: var(--w3-fs-small); line-height: 1.7; }
.site-footer__bottom-text a { color: var(--w3-text2); }
@media (max-width: 900px) {
  .site-footer__middle-inner > .row { grid-template-columns: 1fr; gap: 36px; }
  .site-footer .pcblock > .row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* 手指落点在这一档 —— 命中区提到 43px(17 字高 + 13×2) */
  .footer-widget__links-list a { padding: 13px 0; }
}

/* ============================================================================
   HOME
   ========================================================================== */
.w3-hero {
  position: relative; min-height: max(620px, 92svh);
  display: flex; align-items: center;   /* Joe: lift the title block off the bottom into upper-middle */
  overflow: hidden;
}
/* hero-home.webp: 设备已朝正(总工 v4)——【不再镜像】(旧 hero-montana 需 scaleX(-1),现移除)。水平 scrim 正常 100deg
   (暗在左=左对齐文案侧),不再是镜像补偿的 260deg。 */
/* 骨架化(#84):主体位 = 一个变量,不是散落的魔法数。当前占位图=越野车,车体横跨 x≈48-85%,
   所以主体锚点取 66% 52%(车身中心);左侧 0-46% 是天空山脉净空 = 文案安全列。
   ⭐ Joe 新图到位后【只改 --hero-focus 一个值】,布局不用重做。 */
.w3-hero__bg { position: absolute; inset: 0; background-size: cover;
  background-position: var(--hero-focus, 66% 52%); transform: scale(1.02); }   /* Joe: shift the crop right so the (right-set) truck moves toward centre; NOT mirrored. Mobile keeps its own center override. */
/* ⑫ Q1.3: directional scrim — dark bottom-left (carries the left-anchored copy) →
   transparent top-right (releases the golden sky + truck). Second layer darkens the
   image bottom just enough for the white trust bar to read. */
.w3-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top right, rgba(10, 12, 15, 0.93) 0%, rgba(10, 12, 15, 0.62) 27%, rgba(10, 12, 15, 0.22) 54%, rgba(10, 12, 15, 0) 73%),
    /* 🔴 2026-08-01:这一层原本从 58% 就开始压暗,注释写着「just enough for the white trust bar to read」——
       那条白色 trust bar Joe 已于 2026-07-30 删除,压暗的理由跟着没了,但没人回头拆。
       它正好盖在碟所在的 y≈69%(实测该处叠加不透明度 49%,把碟 66 级的局部对比压到 34 级)。
       改为【只做贴底融合】:80% 之前完全不压,末端仍到 0.66 —— 实测底边亮度 21.1,
       0.66 黑叠上去 ≈15.1,与页面底色 12 差 3 级(旧值 0.74 是 14.4,肉眼等同)。 */
    linear-gradient(180deg, rgba(10, 12, 15, 0) 80%, rgba(10, 12, 15, 0.22) 92%, rgba(10, 12, 15, 0.66) 100%);
}
.w3-hero__inner { position: relative; width: 100%; padding: 88px 0 220px; }  /* Joe: lift the title block up toward the truck roofline (more bottom padding raises the centered block) */
/* 文案安全列:宽屏下限制在左侧 ~46%,主体从 48% 才开始 → 文字永远不叠在车上。
   用 min() 而不是写死 px:窄屏时让位给可读宽度,宽屏时守住比例。 */
/* 安全列上限:旧图取 46%(主体自 48% 起)。新图主体自 ~50% 起爬、峰值 60–65%,
   且副标题一行需要 620px —— 站点容器内宽 1192 下 620/1192 = 52%。
   取 52%:1440 下文案右缘 51%,距碟(58–63%)还有 7% 画面宽。
   ⚠️ 窄屏(≤1024)容器变窄,52% 不够 620 ⇒ 用 min() 让窄屏交给 760px 那一支,
      由容器自身宽度兜底,而不是继续按比例压。 */
/* ⑥ Joe:「文字适当加大、上下间距加大,让板块饱满一点」。
   ⚠️ 不用统一倍数 —— kicker 与间距各自定;h1 保持 64px。
   🔴 副标题【不动 18px】:试过 20px,它超出 620px 列宽 ⇒ 从 1 行变 2 行,
      而"副标题一行"是 Joe 早前明确要过的。**新指令不能静默撤掉旧指令。** */
.w3-hero__content { max-width: min(760px, max(620px, 52%)); display: grid; gap: 34px; }
.w3-hero__content .w3-eyebrow { font-size: var(--w3-fs-small); }   /* micro 11 → small 12.5;13px 不在刻度上，字阶闸拦过 */
/* ⚠️ 这里【曾经】让 hero 用比全站更宽的容器(min(1760px,92vw)),理由是旧图(越野车)主体横跨
   48–85%,宽屏下站点容器会把文案推到 26.6% 而右缘顶到 48.1% 正好压上车。
   🔴 新图(hero-home-v4)重测:逐列边缘能量显示左半 0–45% 是静区(72–84),
      能量自 50% 起爬升、峰值 60–65% —— 主体比旧图【更靠右也更集中】。
   ⇒ 那条特例的前提没了。Joe 要求 hero 文案与下方区块左对齐,现在可以满足而不压主体。
   **删掉的是数字的依据已变,不是这条没用过** —— 若将来换回宽主体的图,要连这段一起复算。 */
/* ⚠️ 站内容器类名是 .w3-container 不是 .container —— 我第一版写成 .container,规则从未匹配,
   CSS 文件里看着"改了"、量出来纹丝不动。只读代码会骗人,几何要真量。 */
.w3-hero__title { text-wrap: balance; }
.w3-hero__sub { color: #c3ccd5; font-size: var(--w3-fs-lead); max-width: 58ch; }
.w3-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ⑫ Q2.5: thin translucent trust bar living ON the hero image bottom (no divider —
   Q2.4). Restrained, small-caps, white over the image's dark foreground. */
.w3-trust { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(10, 12, 15, 0.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.w3-trust__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.w3-trust__item { padding: 12px 16px; border-left: 1px solid rgba(255, 255, 255, 0.12); display: grid; gap: 2px; }
.w3-trust__item:first-child { border-left: 0; padding-left: 0; }
.w3-trust__v { font-size: var(--w3-fs-compact); font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #fff; }
.w3-trust__k { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); }
@media (max-width: 760px) {
  /* keep the bar thin on mobile: single scrollable row instead of stacking rows */
  .w3-trust__grid { display: flex; overflow-x: auto; scrollbar-width: none; }
  .w3-trust__grid::-webkit-scrollbar { display: none; }
  .w3-trust__item { flex: 0 0 auto; padding: 10px 14px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .w3-trust__item:first-child { padding-left: 0; }
}

/* model tiles — markup emitted by renderHome(): .product-grid-* (do not rename) */
/* ⚠️ .product-grid-full 现在没有消费者了(首页那块已并入热门产品,改用 .w3-modelrail)。
   没删:删它属于清理,不属于这批;若将来别处要用整幅网格,它还在。 */
.product-grid-full { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ① 机型选择行:与商品卡【形状不同】才是合并的意义 —— 一行 vs 网格,~139px vs ~286px。
   形状取自 Products 页顶部的 MODEL 筛选(也是一行),不新造组件;窄屏横向滚动而不是换行,
   换行就又变成网格、和商品卡糊在一起了。 */
.w3-modelrail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 1fr);
  gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: 6px;
}
.w3-modelrail > * { scroll-snap-align: start; min-width: 0; }
/* 44 / 20 都是本文件已在用的值(.w3-sechead 的 margin-bottom 与 --row 的 gap),不新造间距。 */
.w3-modelrail__title { margin: 44px 0 20px; }
.product-grid-item { min-width: 0; }
.product-grid-link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius);
  padding: 10px; transition: transform 0.3s var(--w3-ease), border-color 0.3s, background 0.3s;
}
.product-grid-link:hover { transform: translateY(-4px); border-color: var(--w3-line2); background: var(--w3-panel2); }
.product-grid-img {
  background: var(--w3-tile); border-radius: 10px; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-grid-img img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; transition: transform 0.45s var(--w3-ease); }
.product-grid-link:hover .product-grid-img img { transform: scale(1.05); }
.product-grid-text {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 6px 5px; font-size: var(--w3-fs-compact); color: var(--w3-text);
}
.product-grid-text b { font-weight: 600; }
.product-grid-text::after { content: "→"; color: var(--w3-text3); font-size: var(--w3-fs-compact); transition: transform 0.25s var(--w3-ease), color 0.25s; }
.product-grid-link:hover .product-grid-text::after { transform: translateX(4px); color: var(--w3-text); }
@media (max-width: 980px) { .product-grid-full { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* product showcase strip (real product photos, cards from renderHome/{{PRODUCT_STRIP}}) */
.w3-pstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.w3-pstrip__card {
  display: flex; flex-direction: column;
  background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius);
  overflow: hidden; transition: transform 0.3s var(--w3-ease), border-color 0.3s, background 0.3s;
}
.w3-pstrip__card:hover { transform: translateY(-4px); border-color: var(--w3-line2); background: var(--w3-panel2); }
.w3-pstrip__img { background: var(--w3-tile); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 10px; border-radius: 10px; }
/* Joe: product image fills the white 1:1 inner frame edge-to-edge (for the 1:1 white-bg
   masters he'll upload). cover = exact fill for 1:1, crops legacy non-1:1 gracefully. */
.w3-pstrip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--w3-ease); }
.w3-pstrip__card:hover .w3-pstrip__img img { transform: scale(1.05); }
.w3-pstrip__title {
  padding: 4px 16px 18px; font-size: var(--w3-fs-compact); font-weight: 550; line-height: 1.45; color: var(--w3-text2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 980px) { .w3-pstrip { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* browse-by-category (moved into Popular products, Joe review) */
.w3-bycat { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--w3-line); display: grid; gap: 14px; }
/* browse-by-type rail */
.w3-typerail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.w3-bycat .w3-typerail { margin-top: 0; }
.w3-typecard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--w3-line); border-radius: 12px; padding: 15px 18px;
  font-size: var(--w3-fs-compact); font-weight: 550; color: var(--w3-text2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--w3-ease);
}
.w3-typecard::after { content: "→"; color: var(--w3-text3); transition: transform 0.25s var(--w3-ease); }
.w3-typecard:hover { color: var(--w3-text); border-color: var(--w3-line2); background: rgba(255, 255, 255, 0.03); transform: translateY(-2px); }
.w3-typecard:hover::after { transform: translateX(3px); }
@media (max-width: 980px) { .w3-typerail { grid-template-columns: 1fr 1fr; } }

/* field-proven: user-controlled scenario tabs (no auto-rotate) */
.w3-fieldcar { padding: 96px 0 96px; }   /* #5(留白): bottom padding so Field-proven doesn't death-hug About below */
.w3-fieldcar .w3-sechead { margin-bottom: 28px; }
.w3-scenetabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.w3-scenetab {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--w3-line2);
  font-size: var(--w3-fs-compact); font-weight: 550; color: var(--w3-text2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.w3-scenetab:hover { color: var(--w3-text); border-color: rgba(255,255,255,.38); }
.w3-scenetab.is-active { background: #fff; color: #0b0d10; border-color: #fff; }
/* contained content-width card (not full-bleed): DESIGN.md rhythm reserves full-bleed for the
   hero + closing CTA bookends only; mid-page panels align to the same content max-width. Wrapped
   in .w3-container in home.html; the rounded/overflow-hidden card clips the panels. */
.w3-scenestage {
  position: relative; height: clamp(400px, 52vh, 560px);
  border-radius: var(--w3-radius); overflow: hidden; border: 1px solid var(--w3-line);
}
.w3-scene-panel {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity 0.8s var(--w3-ease), visibility 0.8s;
}
.w3-scene-panel.is-active { opacity: 1; visibility: visible; }
.w3-scene-panel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,15,.15) 0%, rgba(10,12,15,.05) 40%, rgba(10,12,15,.75) 100%),
              linear-gradient(90deg, rgba(10,12,15,.65) 0%, rgba(10,12,15,.05) 55%);
}
.w3-scene-panel__cap {
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(24px, 4vw, 44px) 40px; display: grid; gap: 14px; justify-items: start;
}
.w3-scene-panel__cap .w3-eyebrow { color: #cdd6df; }
.w3-scene-panel__line { font-size: var(--w3-fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; max-width: 18ch; text-wrap: balance; color: #fff; }
.w3-scene-panel__cap .w3-link-arrow { color: #fff; }
@media (max-width: 640px) {
  .w3-fieldcar { padding: 68px 0 68px; }
  .w3-scenetabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .w3-scenetabs::-webkit-scrollbar { display: none; }
  .w3-scenetab { flex: 0 0 auto; }
  .w3-scene-panel__cap { padding-bottom: 40px; }
}

/* why-wanew —— 格子组,与 About 的 OEM/ODM(.ab8-oem__grid)同一种写法。Joe 2026-08-01 直接点名对齐。
   四条优势是【一个承诺被切成四份】,不是四个各自独立、可点击的对象 ⇒ 共用一个外框、
   gap 1px 露出 --w3-line 当发丝分隔、圆角只在外框上、格内零 hover(不可点的东西不该给点击暗示)、
   格底与板块同色(OEM/ODM 也是 section 与格子同为 --w3-bg2,靠发丝线而非色差分格)。
   见 DESIGN.md §格子组的三条判据。此前是白卡:各自圆角+阴影+translateY hover —— 那是卡片语言。 */
.w3-why {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--w3-line);
  border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden;
}
.w3-whycard {
  background: var(--w3-bg); padding: clamp(26px, 2.4vw, 36px);
  display: grid; gap: 12px; align-content: start;
}
.w3-whycard h3 { font-size: var(--w3-fs-body); font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.w3-whycard p { font-size: var(--w3-fs-compact); color: var(--w3-text2); line-height: 1.65; }

/* About editorial visual (Joe: flow diagrams + meaningful icons, not text-dump).
   DESIGN.md nuance (总工 2026-07-25): icons serving flow/meaning are allowed & wanted;
   the banned thing was decorative icon+3-word card rows. Inline SVG line icons, accent. */
.about-oemodm__head { font-size: var(--w3-fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--w3-text3); margin: 0; }
.about-oemblock > .about-oemodm__head:first-child { margin-top: 8px; }
.about-oemodm__head--odm { margin-top: 40px; }

/* OEM services — meaningful-icon cards (icon serves the service, not decoration) */
.oem-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.w3-iconcard { position: relative; overflow: hidden; background: var(--w3-surface-2); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); box-shadow: var(--w3-edge-top), var(--w3-elev-card); padding: 24px 20px; display: grid; gap: 12px; align-content: start; transition: transform .35s var(--w3-ease), border-color .35s, box-shadow .35s; }
.w3-iconcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--w3-accent), transparent 72%); opacity: 0; transition: opacity .35s; }
.w3-iconcard:hover { transform: translateY(-4px); border-color: var(--w3-line2); box-shadow: var(--w3-edge-top), 0 6px 16px -4px rgba(0,0,0,.55), 0 22px 48px -16px rgba(0,0,0,.7); }
.w3-iconcard:hover::before { opacity: .85; }
.w3-iconcard__ic { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--w3-line); background: radial-gradient(120% 120% at 50% 30%, rgba(125,177,255,.12), var(--w3-bg2) 70%); color: var(--w3-accent); display: grid; place-items: center; transition: border-color .35s; }
.w3-iconcard:hover .w3-iconcard__ic { border-color: rgba(125,177,255,.35); }
.w3-iconcard__ic svg { width: 23px; height: 23px; }
.oem-cards .w3-iconcard h3 { font-size: var(--w3-fs-body); font-weight: 650; color: var(--w3-text); letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.w3-iconcard p { font-size: var(--w3-fs-compact); color: var(--w3-text2); line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .oem-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .oem-cards { grid-template-columns: 1fr; } }

/* Affiliation — one clear statement (dup title removed) + trademark note */
.about-affil { max-width: 780px; margin: 6px 0 0; display: grid; gap: 12px; }
.about-affil__stmt { font-size: var(--w3-fs-body); line-height: 1.7; color: var(--w3-text); margin: 0; }
.about-affil__stmt strong { color: var(--w3-accent); }
.about-affil__tm { font-size: var(--w3-fs-compact); color: var(--w3-text3); line-height: 1.6; margin: 0; border-left: 2px solid var(--w3-line2); padding-left: 14px; }

/* FAQ — flat card, 3 Q&A all expanded (Joe: no accordion) */
/* v5:容器不再是卡,卡是 .faq-flat__item(三列见下方 v5 段)。
   旧版是"一张大卡里三条带分隔线的问答",max-width 840 —— 三卡横排后它成了压宽的元凶。 */
.faq-flat .faq-flat__item h3 { font-size: var(--w3-fs-body); font-weight: 650; color: var(--w3-text); letter-spacing: -0.01em; line-height: 1.4; margin: 0 0 8px; }
.faq-flat__item p { font-size: var(--w3-fs-compact); color: var(--w3-text2); line-height: 1.7; margin: 0; }

/* certification evidence strip (real cert badges, foot of Why section) */
.w3-certstrip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--w3-line);
}
.w3-certstrip__label { font-size: var(--w3-fs-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w3-text3); }
.w3-certstrip__badges { display: flex; gap: 10px; margin-right: auto; }
.w3-certbadge {
  display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--w3-line2);
  font-size: var(--w3-fs-compact); font-weight: 700; letter-spacing: 0.03em; color: var(--w3-text);
}
@media (max-width: 560px) { .w3-certstrip__badges { margin-right: 0; } }
@media (max-width: 980px) { .w3-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .w3-why { grid-template-columns: 1fr; } }

/* §2.6 招2:选择性提亮反转带 —— 信任/证据板块用浅底深字,暗→亮→暗呼吸(每屏≤1)。
   ⚠️只对【信任/证据】类段用(如 Our Advantages),不是全站翻白。accent 在浅底改用 --w3-invert-accent(深蓝)。 */
.w3-invert { background: var(--w3-invert-bg); color: var(--w3-invert-ink); }
.w3-invert .w3-eyebrow { color: #5b6572; }
.w3-invert .w3-eyebrow::before { background: rgba(0,0,0,.2); }
.w3-invert .w3-h2 { color: var(--w3-invert-ink); }
.w3-invert .w3-sub { color: var(--w3-invert-ink2); }
.w3-invert .w3-link-arrow { color: var(--w3-invert-accent); }
.w3-invert .w3-link-arrow::after { color: var(--w3-invert-accent); }
/* whycard 在反转带:白卡浮于浅底(层次:浅底 → 白卡浮起) */
.w3-invert .w3-whycard { background: #fff; border-color: rgba(15,25,45,.1); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 10px -3px rgba(20,30,50,.12), 0 16px 34px -18px rgba(20,30,50,.22); }
.w3-invert .w3-whycard:hover { border-color: rgba(15,25,45,.2); }
.w3-invert .w3-whycard__idx { color: var(--w3-invert-accent); border-bottom-color: rgba(15,25,45,.12); font-size: var(--w3-fs-body); }
.w3-invert .w3-whycard h3 { color: var(--w3-invert-ink); }
.w3-invert .w3-whycard p { color: var(--w3-invert-ink2); }
/* certstrip 在反转带 */
.w3-invert .w3-certstrip { border-color: rgba(15,25,45,.12); }
.w3-invert .w3-certstrip__label { color: #5b6572; }
.w3-invert .w3-certbadge { background: #fff; border-color: rgba(15,25,45,.14); color: var(--w3-invert-ink); }

/* ⭐ Joe 2026-07-27 直裁:治沉闷 canonical = 【深底保留 + 容器翻白】,不是把整段背景翻白(.w3-invert)。
   深色板块 + 白卡 = 白卡在深底上强对比跳出,替代 .w3-invert 成为提亮首选。用于 Guides&Resources。
   ⚠️只翻【卡片容器】,不翻 section 背景、不翻 section header(eyebrow/h2/sub 仍浅字在深底)。
   ⚠️ 2026-08-01:Our Advantages 已按 Joe 要求改成格子组(见上面 .w3-why),退出白卡方案,
      所以这里原有的 5 条 `.w3-whitecards .w3-whycard*` 一并删除 —— 留着就是没有消费者的规则。
   ⚠️ 同日订正一条【假注释】:原文写"必须 section 作用域,.w3-whycard 被 About 复用,禁全局翻白"。
      实测 `.w3-whycard` 全站只有 home.html 一处、About 零命中 —— **那句复用是假的**。
      假注释比没有注释更贵:它会让下一个人为了一个不存在的消费者而不敢动。 */
/* guide 白卡:cover 翻浅底(深蓝图标)+ 内文深字 *

/* 2026-07-28:#8a94a0 在白卡上只有 **3.08**(11px 正文级,门槛 4.5)—— 那是个深色模式的灰
   被硬编码进了白底上下文。改用已有的白底墨色令牌(实测 7.35)。
   ⚠️ 没有为"它是次要信息"去发明第三档更浅的墨 —— **要新档就先进 DESIGN.md**,
      在 CSS 里就地调一个"看着差不多"的值,正是字阶那 37 个落点的来历。 *


/* about band */
/* Joe 定的排布(2026-08-01):标题通栏在【图片之上】,下面 图片左 / 文案+数字右。
   __head 用 grid-column: 1 / -1 横跨两列 —— 标题拿到整个容器宽度才排得成一行。
   44 / 14 是本文件已在用的值(.w3-sechead 的 margin-bottom 与 gap),不新造间距。 */
.w3-about { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 44px; align-items: center; }
.w3-about__head { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; }
.w3-about__body { display: grid; gap: 18px; justify-items: start; }
.w3-about__body .w3-sub { font-size: var(--w3-fs-body); }
.w3-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--w3-line); border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden; width: 100%; margin: 6px 0 4px; }
.w3-stat { background: var(--w3-bg2); padding: 18px 20px; display: grid; gap: 2px; }
.w3-stat__n { font-size: var(--w3-fs-h3); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.w3-stat__k { font-size: var(--w3-fs-small); color: var(--w3-text3); letter-spacing: 0.05em; }
.w3-about__media { position: relative; border-radius: var(--w3-radius); overflow: hidden; border: 1px solid var(--w3-line); }
.w3-about__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .w3-about { grid-template-columns: 1fr; gap: 36px; } }

/* guide cards *
/* §2.6:首页 Guides&Resources 卡与 ③ Guides 卡同款浮起(surface-2+edge+elev);cover 用径向井补"暗 void" *

.w3-viewall { margin-top: 28px; }

/* CTA band */
.w3-ctaband { position: relative; overflow: hidden; }
/* bg-position keeps the Starlink device in the safe zone across breakpoints (Joe review #5).
   Wide screens crop height (dish sits upper-center -> 42%); narrow screens crop width so pull
   the focal point up and centered to keep the device on-canvas on low-res/mobile. */
/* cta-band-bluehour: the Starlink dish sits small in the lower-right — anchor the
   crop bottom-right so it survives this wide/short band at every width. */
.w3-ctaband__bg { position: absolute; inset: 0; background-size: cover; background-position: 85% 85%; }
@media (max-width: 900px) { .w3-ctaband__bg { background-position: 82% 90%; } }
@media (max-width: 560px) { .w3-ctaband__bg { background-position: 80% 96%; } }
/* white copy over a bright sky/roof shot was unreadable (Joe): white text MUST sit on a dark base.
   Vertical blend to bg at top + a central radial scrim so the centered heading/sub/buttons land on
   a dark zone regardless of how bright the underlying photo is (DESIGN.md: text-on-image needs scrim). */
.w3-ctaband__bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--w3-bg) 0%, rgba(10, 12, 15, 0.56) 32%, rgba(10, 12, 15, 0.60) 68%, rgba(10, 12, 15, 0.80) 100%),
  radial-gradient(115% 85% at 50% 52%, rgba(10, 12, 15, 0.58) 0%, rgba(10, 12, 15, 0.16) 68%); }
/* ② 全站唯一居中的一块,改左对齐与其余区块一致。 */
.w3-ctaband__inner { position: relative; padding: 140px 0; display: grid; gap: 18px; justify-items: start; text-align: left; }
.w3-ctaband__inner .w3-h2 { max-width: 22ch; text-wrap: balance; }
.w3-ctaband__inner .w3-sub { text-align: left; }
.w3-ctaband__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin-top: 10px; }

/* ============================================================================
   LIST PAGE (/products/ shells) — chips + grid markup are machinery, keep names
   ========================================================================== */
/* Info-page hero band. ⚠️ OBSOLETE APPROACH (kept as history): height used to be
   width-driven (~38.5vw) to hold a ~2.6:1 band ratio matching the source images. But
   (a) real hero ratios vary a lot (2.33–6.83, not uniform 2.6) and (b) width-driven
   height blew past half-screen on wide monitors (Joe 2026-07-27: 2560 → 900px too tall).
   ⇒ REPLACED by vh-capped height (decoupled from width) + per-image --hero-focus (below).
   Homepage .w3-hero is separately/deliberately full-viewport — untouched. */
/* 🔴 全站 hero 响应式(Joe 2026-07-27 当面):height 原为 width-driven(38.5vw)→宽屏过半屏太高;
   改 **vh 封顶、与宽度解耦**(全屏不超半屏、窄屏/手机不过高)。每图焦点 var(--hero-focus) 让
   cover 围主体裁、不飘边(照片 hero 宽屏重裁上下=纵向焦点关键)。 */
.page-header { position: relative; min-height: clamp(400px, 46vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--w3-header-h) + 48px) 0 48px; overflow: hidden; }
.page-header-bg { position: absolute; inset: 0; background-size: cover; background-position: var(--hero-focus, center 44%); }
/* /about/ art-direction: source is 2.333:1 (narrower ratio than the ~2.6 band), so cover
   fills width and crops only top+bottom — the worker (head y≈20%, feet y≈63%, x≈62%) stays
   fully in frame at centre across 1440→2560 (widest crops ~10.6% each edge → head at ~12%).
   The dark left third sits under the bottom-left title = good text legibility. No zoom/anchor
   needed with the corrected band ratio; inherits base centre. (Old 118%/66% 24% hack removed
   — it was compensating for the old wrong-ratio band.) */
/* 每图焦点(⭐2026-07-27 v2:按【实际看图】的主体位置钉"中央偏右安全区"、不在角/不出框;Joe 三档微调)。
   XY 均含义:X% 高=露右侧,Y% 高=露下部。主体坐标(看图):
   about 工人 x62 y40(头22,左三分暗留标题)/ guides 碟+帐篷 x70 y70(在下右!旧 50% 把它裁掉→只剩星空)/
   solutions 碟 x60 y55 / products(=compat) 碟 x78 y22(右上,窄屏裁右→往右钉)/ contact 越野车 x55 y55。
   手机竖屏裁左右→X 对准主体最关键,off-center-X 的页(products/guides/about)单设 --hero-focus-mobile。 */
/* 🔴 2026-08-01 Joe「about 的 hero 底部与背景分界明显」——查证:不是亮度不融合
   (实测可见底边亮度 about 30.7 < solutions 45.7 < contact 93.1,底部渐变全站同一条)。
   真因是【裁切位置】:38% 时可见窗口只到原图 71.6%,岩石被拦腰切断 —— 那是"内容被切断"的边。
   对照 guides 89.1% / solutions 81.3% / contact 98.9%。改 78% ⇒ 下沿 ~90%,与它们同档。
   房子(两扇亮窗实测 y 58.5–59.1%,房体约 48–66%)在新窗口 35.8–90% 内仍完整,且落在画面上中部。 */
.page-header-bg--about { --hero-focus: 55% 78%; --hero-focus-mobile: 60% 38%; }
.page-header-bg--guides { --hero-focus: 68% 66%; --hero-focus-mobile: 72% 64%; }
.page-header-bg--solutions { --hero-focus: 58% 50%; }
.page-header-bg--products { --hero-focus: 74% 26%; --hero-focus-mobile: 82% 30%; }
.page-header-bg--contact { --hero-focus: 55% 50%; }
/* 文章页矮版照片 hero:比板块页矮,免长文被巨图挤下去;仍是【照片】hero 保持全站一致。同样 vh 封顶。 */
.page-header--article { min-height: clamp(280px, 34vh, 420px); }
/* Products/Industry/Service heroes: source images are ~2.6:1 like the band, so with the
   band-ratio fix above cover shows the (near-)full image on every width and the subject
   already sits inside the content column — no zoom/x-shift needed. They inherit the base
   .page-header-bg { background-position: center }. (Earlier per-page zoom+anchor hacks
   removed — they were compensating for the old wrong-ratio band.) */
/* aligned with home hero (.w3-hero__bg::after): light top so the transparent nav floats over
   the bright hero image, bright mid-window, darker only near the title, + left scrim for text. */
.page-header-bg::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(10, 12, 15, 0.40) 0%, rgba(10, 12, 15, 0.14) 34%, rgba(10, 12, 15, 0.62) 82%, var(--w3-bg) 100%),
  linear-gradient(100deg, rgba(10, 12, 15, 0.50) 0%, rgba(10, 12, 15, 0.04) 58%); }
.page-header__inner { position: relative; display: grid; gap: 10px; max-width: 720px; }
.page-header__title { font-size: var(--w3-fs-d2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--w3-text); }   /* explicit bright — /about/ (body.about-page sets text2) was inheriting grey */
.page-header__subtitle { color: var(--w3-text2); font-size: var(--w3-fs-body); }
/* 🔴 手机竖屏:容器变竖(裁左右、全高显示),主体横向 center 即在中央;降高防 hero 占满小屏。
   --hero-focus-mobile 可按需覆盖(默认回落桌面 --hero-focus)。 */
@media (max-width: 640px) {
  .page-header { min-height: clamp(340px, 50vh, 460px); padding: calc(var(--w3-header-h) + 30px) 0 34px; }
  .page-header-bg { background-position: var(--hero-focus-mobile, var(--hero-focus, center 44%)); }
  .page-header--article { min-height: clamp(240px, 40vh, 340px); }
  /* 原本这里手工给 page-header__title 换了一档(clamp(1.7rem,7vw,2.3rem))。
     跳档现在由 :root 在 767 统一做,**同一件事不许有两套机制** —— 留着它
     等于给这一个元素一个私有断点,名次翻转就是这么来的。已退役。 */
}

/* sticky filter bar */
.w3-filterbar {
  position: sticky; top: var(--w3-header-h); z-index: 60;
  background: rgba(10, 12, 15, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  /* ⑬ no hard divider rule (site-wide policy) — the near-opaque bg + soft shadow
     separate the sticky bar from the hero above and content scrolling beneath. */
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.55);
  padding: 12px 0;
}
.product-chiprow { display: flex; align-items: baseline; gap: 14px; padding: 4px 0; }
.product-chiprow__label { flex: 0 0 auto; font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--w3-text3); min-width: 52px; }
.product-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.product-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--w3-line);
  font-size: var(--w3-fs-small); font-weight: 550; color: var(--w3-text2);
  cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.product-chip:hover { color: var(--w3-text); border-color: var(--w3-line2); }
.product-chip.is-active { background: #fff; color: #0b0d10; border-color: #fff; }
.product-chip__n { font-size: var(--w3-fs-micro); color: var(--w3-text3); font-variant-numeric: tabular-nums; }
.product-chip.is-active .product-chip__n { color: rgba(11, 13, 16, 0.55); }
@media (max-width: 720px) {
  .product-chiprow { flex-direction: column; gap: 8px; }
  .product-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; width: 100%; }
  .product-chips::-webkit-scrollbar { display: none; }
  .product-chip { flex: 0 0 auto; }
}

/* product grid — cards emitted by cardHtml() (class names load-bearing) */
.w3-products { padding: 44px 0 96px; }
#productGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 16px; }
#productGrid > [class*="col-"] { display: flex; }
.blog-one__single {
  display: flex; flex-direction: column; width: 100%;
  background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius);
  overflow: hidden; transition: transform 0.3s var(--w3-ease), border-color 0.3s, background 0.3s;
}
.blog-one__single:hover { transform: translateY(-4px); border-color: var(--w3-line2); background: var(--w3-panel2); }
.blog-one__single > a { display: flex; flex-direction: column; height: 100%; }
.blog-one__img { background: var(--w3-tile); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 10px; border-radius: 10px; }
/* Joe: product image fills the white 1:1 inner frame edge-to-edge (see .w3-pstrip__img). */
.blog-one__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s var(--w3-ease); }
.blog-one__single:hover .blog-one__img img { transform: scale(1.05); }
.blog-content { padding: 6px 16px 18px; display: grid; gap: 6px; }
.blog-one__title {
  font-size: var(--w3-fs-compact); font-weight: 600; line-height: 1.45; letter-spacing: -0.005em; color: var(--w3-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-one__tt {
  font-size: var(--w3-fs-small); color: var(--w3-text3); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================================
   PRODUCT DETAIL
   ========================================================================== */
.w3-pdp { padding: calc(var(--w3-header-h) + 40px) 0 72px; }
.w3-pdp__crumb { margin-bottom: 26px; display: flex; align-items: center; gap: 8px; font-size: var(--w3-fs-compact); color: var(--w3-text3); }
.w3-pdp__crumb a { color: var(--w3-text2); transition: color 0.15s; }
.w3-pdp__crumb a:hover { color: var(--w3-text); }
/* breadcrumb doubles as the back-to-list affordance (总工/Joe: return via crumb, no separate button).
   The Products link is a pill-styled "← Products" so returning is one obvious click. */
.w3-pdp__back { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--w3-line2); border-radius: 999px; color: var(--w3-text) !important; font-weight: 550; }
.w3-pdp__back:hover { border-color: rgba(255,255,255,.38); background: var(--w3-panel); }
.w3-pdp__back-arw { font-size: var(--w3-fs-compact); line-height: 1; transition: transform 0.15s var(--w3-ease); }
.w3-pdp__back:hover .w3-pdp__back-arw { transform: translateX(-2px); }
.w3-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .w3-pdp__grid { grid-template-columns: 1fr; } }

/* gallery — slides emitted by render() keep .swiper-* names; slider is CSS snap + w3.js */
/* ⚠️ 显式 minmax(0,1fr) 列是根治:无显式列时 grid 的隐式 auto 列被撑到 max-content(slider flex 行
   ~650px)→ track 超出 gallery 盒(578)→ slider 填满 track 溢入右侧 info 列裁掉文字左缘。
   minmax(0,1fr) 把 track 钉在盒宽(min 0,不随内容涨)。overflow:hidden 兜底裁残留。 */
.w3-gallery { position: sticky; top: calc(var(--w3-header-h) + 24px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; overflow: hidden; }
@media (max-width: 900px) { .w3-gallery { position: static; } }
/* ⚠️ min-width:0 + width:100% 是必须的:swiper-wrapper 是 flex 行,其 min-content(整行 slide)撑到
   ~650px 会溢出 gallery 列(grid item 默认 min-width:auto=按内容),spill 进右侧 info 列盖住文字左缘
   (Joe 报的"首字符被裁")。约束住宽度即根治,与 swiper 是否初始化无关。 */
.product_feature_img_slider_2 { position: relative; border-radius: var(--w3-radius); overflow: hidden; width: 100%; min-width: 0; max-width: 100%; }
.product_feature_img_slider_2 .swiper-wrapper {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--w3-radius); width: 100%; min-width: 0;
}
.product_feature_img_slider_2 .swiper-wrapper::-webkit-scrollbar { display: none; }
.product_feature_img_slider_2 .swiper-slide {
  flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1 / 1;
  background: var(--w3-tile); display: flex; align-items: center; justify-content: center;
}
/* #4 PDP main image fills its 1:1 white container (was inset 88% contain) — matches ⑨. */
.product_feature_img_slider_2 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.swiper-button-prev, .swiper-button-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(11, 13, 16, 0.12);
  background: rgba(255, 255, 255, 0.88); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s, background 0.2s;
}
.product_feature_img_slider_2:hover .swiper-button-prev, .product_feature_img_slider_2:hover .swiper-button-next { opacity: 1; }
.swiper-button-prev { left: 14px; }
.swiper-button-next { right: 14px; }
.swiper-button-prev:hover, .swiper-button-next:hover { background: #fff; }
.swiper-button-prev::after, .swiper-button-next::after {
  content: ""; width: 9px; height: 9px; border-top: 2px solid #14181d; border-right: 2px solid #14181d;
}
.swiper-button-prev::after { transform: rotate(-135deg); margin-left: 3px; }
.swiper-button-next::after { transform: rotate(45deg); margin-right: 3px; }
.w3-gallery--single .swiper-button-prev, .w3-gallery--single .swiper-button-next { display: none; }

.product_thumb_slider_2 .swiper-wrapper { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.product_thumb_slider_2 .swiper-wrapper::-webkit-scrollbar { display: none; }
.product_thumb_slider_2 .swiper-slide {
  flex: 0 0 72px; width: 72px; aspect-ratio: 1 / 1; border-radius: var(--w3-radius-s);
  background: var(--w3-tile); border: 2px solid transparent; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.product_thumb_slider_2 .swiper-slide.is-active { border-color: var(--w3-accent); }
/* #4 PDP thumbnail fills its 1:1 white container too. */
.product_thumb_slider_2 .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.w3-gallery--single .product_thumb_slider_2 { display: none; }

/* info column */
.w3-pdp__info { display: grid; gap: 18px; align-content: start; }
.product-category-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--w3-line2);
  font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w3-text2);
}
.title-product { font-size: var(--w3-fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; }
.item-explain { color: var(--w3-text2); font-size: var(--w3-fs-compact); line-height: 1.75; }
.item-explain p { margin: 0 0 10px; }
.item-explain ul, .item-explain ol { display: grid; gap: 8px; margin: 4px 0 6px; }
.item-explain li { position: relative; padding-left: 24px; }
.item-explain li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 5px;
  border-left: 2px solid var(--w3-accent); border-bottom: 2px solid var(--w3-accent); transform: rotate(-45deg);
}
.item-inputs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.w3-pdp__note { display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--w3-line); padding-top: 18px; margin-top: 6px; }
.w3-pdp__note span { font-size: var(--w3-fs-small); color: var(--w3-text3); display: inline-flex; align-items: center; gap: 7px; }
.w3-pdp__note span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--w3-accent); }

/* description prose on a light stage (legacy rich HTML was authored on white) */
.w3-desc { padding: 24px 0 72px; }
.w3-desc__head { margin-bottom: 22px; }
.w3-desc__panel {
  background: #fff; color: #23282e; border-radius: 20px;
  padding: clamp(22px, 4vw, 52px);
}
.w3-desc__panel .explain { font-size: var(--w3-fs-body); line-height: 1.8; overflow-wrap: break-word; }
/* summary(item-explain)总工拍板从 header 右栏移到这张全宽白卡 —— 它默认是深空主题的浅灰字,
   在白卡上会看不清。这里覆盖成白卡的深色文本;首段起领读作用,与下方 description 之间留白分隔。 */
.w3-desc__panel .item-explain { color: #23282e; font-size: var(--w3-fs-body); line-height: 1.8; max-width: 80ch; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid rgba(11,13,16,.1); }
.w3-desc__panel .item-explain p { color: #23282e; margin: 0 0 10px; }
.w3-desc__panel .item-explain li { color: #3a4048; }
.w3-desc__panel h1, .w3-desc__panel h2, .w3-desc__panel h3, .w3-desc__panel h4 { color: #101418; line-height: 1.3; margin: 1.6em 0 0.6em; letter-spacing: -0.01em; }
.w3-desc__panel h2 { font-size: var(--w3-fs-h3); }
.w3-desc__panel h3 { font-size: var(--w3-fs-lead); }
.w3-desc__panel p { margin: 0 0 1em; }
.w3-desc__panel ul, .w3-desc__panel ol { margin: 0 0 1.2em 1.3em; display: block; }
.w3-desc__panel ul { list-style: disc; }
.w3-desc__panel ol { list-style: decimal; }
.w3-desc__panel li { margin-bottom: 0.4em; }
.w3-desc__panel img { display: inline-block; max-width: 100%; height: auto; border-radius: 10px; margin: 10px 0; }
.w3-desc__panel table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: var(--w3-fs-compact); display: block; overflow-x: auto; }
.w3-desc__panel th, .w3-desc__panel td { border: 1px solid #e6e9ed; padding: 10px 13px; text-align: left; vertical-align: top; }
.w3-desc__panel th { background: #f5f6f8; font-weight: 600; }
.w3-desc__panel a { color: #1d63d6; text-decoration: underline; }

/* P5 详情页产品视频区(Admin 加视频后官网渲染)。有视频才出;播放器 16:9 黑底 contain 不裁,
   §2.6 浮起(edge+elev);单视频占一列(≤720),多视频自适应网格。 */
.w3-pvideo { padding: 4px 0 72px; }
.w3-pvideo__title { font-size: var(--w3-fs-h2); font-weight: 700; letter-spacing: -0.02em; color: var(--w3-text); margin-bottom: 20px; }
.w3-pvideo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; max-width: 960px; }
.w3-pvideo__player { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #05070a; border: 1px solid var(--w3-line); border-radius: var(--w3-radius); box-shadow: var(--w3-edge-top), var(--w3-elev-card); }

/* inquiry */
.w3-inquiry { padding: 24px 0 84px; }
.w3-inquiry__panel {
  background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: 20px;
  padding: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(240px, 0.9fr) 1.4fr; gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 900px) { .w3-inquiry__panel { grid-template-columns: 1fr; } }
.w3-inquiry__intro { display: grid; gap: 12px; align-content: start; }
.w3-inquiry__intro h3 { font-size: var(--w3-fs-h2); font-weight: 700; letter-spacing: -0.02em; }
.w3-inquiry__intro p { color: var(--w3-text2); font-size: var(--w3-fs-compact); line-height: 1.7; }
.w3-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.w3-field-box { display: grid; gap: 6px; }
.w3-field-box--full { grid-column: 1 / -1; }
.w3-field-box label { font-size: var(--w3-fs-small); font-weight: 550; color: var(--w3-text2); }
.w3-form input[type="text"], .w3-form input[type="tel"], .w3-form input[type="email"], .w3-form textarea {
  width: 100%; background: var(--w3-bg2); border: 1px solid var(--w3-line); border-radius: var(--w3-radius-s);
  padding: 12px 14px; font-size: var(--w3-fs-compact); color: var(--w3-text);
  transition: border-color 0.2s, background 0.2s;
}
.w3-form textarea { min-height: 120px; resize: vertical; }
.w3-form input:focus, .w3-form textarea:focus { outline: none; border-color: var(--w3-accent); background: #10141a; }
.w3-form ::placeholder { color: var(--w3-text3); }
.w3-form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.wanew-form-status { font-size: var(--w3-fs-compact); }
.wanew-form-status.is-pending { color: var(--w3-text2); }
.wanew-form-status.is-success { color: #7fd8a2; }
.wanew-form-status.is-error { color: #ff9d9d; }
@media (max-width: 560px) { .w3-form { grid-template-columns: 1fr; } }

/* related */
.w3-related { padding: 0 0 96px; }
.related-products__head { font-size: var(--w3-fs-h2); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 24px; }
.w3-related .row { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 16px; }
.w3-related .row > [class*="col-"] { display: flex; }

.product-empty { padding: 48px 0; color: var(--w3-text3); font-size: var(--w3-fs-compact); }
.product-chip.is-empty { opacity: 0.45; }

/* ---- misc -------------------------------------------------------------- */
.tj-lang-badge { font-size: 0.78em; color: var(--w3-text3); font-weight: 500; }

/* ── hero 焦点分档 ──────────────────────────────────────────────────────
   护栏:① 碟必须【完整】在画面内(切一半比被遮更糟) ② 副标题右缘距主体左缘 ≥24px
   🔴 默认 66% 52% 【不改】—— 新图上实测 1440 净距 37px、2560 净距 131px,碟均完整在框内,
      两条护栏本来就满足。**没坏的不动。**
   🔴 窄屏 cover 把画面往里裁 ⇒ 主体在屏幕上左移,而文案列宽不变 ⇒ 净距被吃掉。
      焦点值【变小 = 画面右移 = 主体在屏幕上右移】,这是把净距还回来的杠杆,
      而不是去收窄文案(收窄会牺牲 Joe 要的副标题一行)。 */
/* ⚠️ 上沿必须一直顶到桌面档(1440)——第一版只到 1024,于是 1025–1439 落回默认 66%,
   实测 1100 净距 -91px(文字压在主体上)。**分档不是给"我想到的那几个宽度"用的,
   是给【整条区间】用的;没被任一档覆盖的宽度会静默掉回默认值。** */
/* 🔴 hero 的叠压布局从 ≤640 提到 ≤700。
   理由:641–700 上「文字在主体旁」这个模型物理上不成立 —— 护栏①(碟完整)要焦点抬高、
   护栏②(净距≥24)要焦点降低,两者直接对立(实测差 ~44px)。
   ⇒ 不再为这一段造第四档,改用【站点自己已有的答案】:叠压 + scrim。
   ⚠️ 只搬 hero 那几条,同一个 640 媒体查询里的 .w3-section 等【留在原处】——
      它们和这个问题无关,顺手一起挪就是扩大改动。 */
@media (max-width: 700px) {
  /* 手机:文案【压回背景图上】(Joe 2026-08-01)。
     ⚠️ 这里【曾经】是上下堆叠,理由是:「超宽图(2.7:1)在竖屏用 cover 会把主体裁没」。
        🔴 那条理由的前提是【旧图 2.7:1】。新图 hero-home-v4 是 2.00:1,竖屏裁切没那么狠 ——
        实测(见交付报告):手机窗口仍然包含主体,文字区亮度与对比度也都达标。
        **前提变了,结论才跟着变;不是把旧结论删掉。** 若将来换回更扁的图,要连这段一起复算。 */
  .w3-hero { display: flex; min-height: 78svh; }
  .w3-hero__bg { position: absolute; inset: 0;
    background-position: var(--hero-focus-mobile, 62% 52%); transform: none; }
  .w3-hero__bg::after { background: linear-gradient(to top, rgba(10,12,15,.82) 0%, rgba(10,12,15,.35) 55%, rgba(10,12,15,.15) 100%); }
  .w3-hero__content { max-width: none; }
  /* 🔴 2026-08-01 Joe「iPhone 端文字过于密集,都挤在上面」。不删 eyebrow(它是定位那句),
     治两处病因:① eyebrow 被 0.22em 字距撑成两行 → 手机收到 0.10em + micro 档,38 字符回一行;
     ② 上少下多(28/56)把整块顶到了上面 → 换成上多下少,整块下移。 */
  .w3-hero__content .w3-eyebrow { font-size: var(--w3-fs-micro); letter-spacing: 0.10em; }
  .w3-hero__inner { padding: 88px 0 44px; }
}

@media (max-width: 1439px) and (min-width: 861px) {
  /* 解出的上限 32.7%(再大就压主体);取 28% 留 4.7 个百分点余量。 */
  .w3-hero { --hero-focus: 20% 52%; }   /* 🔴 第一版取 28% 只验了 1024,到 900 净距只剩 11px。整档下沿才是判据:1024→-10.5~33.0% · 900→10.9~25.2%,交集 ⇒ 20% */
}
@media (max-width: 860px) and (min-width: 701px) {
  /* 🔴 这一档【无解】:护栏② 要焦点 ≤28.2%,护栏① 要 ≥35.6%,差 7.5 个百分点。
     ⇒ 按护栏③ 回退 B:**保碟,收窄文案列**,接受副标题两行。
     这不是没做到,是两个要求在这个宽度上物理互斥,而护栏定了保哪一个。 */
  .w3-hero { --hero-focus: 42% 52%; }   /* 同样按最窄端定:768→36.0~43.8% · 700→40.5~45.5%,交集 ⇒ 42% */
  .w3-hero__content { max-width: min(500px, 68%); }
}
@media (max-width: 640px) {
  .w3-section { padding: 68px 0; }
  .w3-field__inner, .w3-ctaband__inner { padding: 96px 0; }
}
/* ⚠️ 这里原本还有第二条 `.w3-hero__bg { background-position: center 42% }` —— 它排在骨架规则
   之后,把 `--hero-focus-mobile` 整个覆盖掉了(真视口实测:设了 62% 52%,量出来仍是 50% 42%)。
   同一个属性在同一个媒体查询里写两次 = 后写的赢,而变量看起来"设了却没生效" = 静默漂移。
   已合并为一条:窄屏取值走 --hero-focus-mobile,默认 62% 52%(把车+碟留在画面里)。 */

/* ============================================================================
   CONTENT PAGES (info-page rollout wave 2) — article hubs, prose, FAQ, contact,
   xlc/about. DOM comes from data/templates/page-*.html (renderPage). Restyled
   for the deep-space skin without restructuring the HTML (content preserved).
   ========================================================================== */

/* --- generic content-page scaffolding --- */
/* ⚠️ `.about-page` 是 <body> 类,不能进这条"内容区上下留白"规则 —— 它会给 body 加 padding-top:56,
   把整个 page-wrapper(含 .page-header hero)下推到固定 nav 下方,透明 nav 上方露出深色页底 =
   Joe 三次看到的"信息页 nav 黑带"根因(不是渐变、不是 stricky-header,是 body 顶 padding)。
   信息页 hero 靠自身 `.page-header` 的 top padding 避开 nav、内容区 .xlc-section 自带留白,body 无需顶 padding。
   其余 16 信息页 <body> 无类本就 flush、正确。约束:新信息页 body 别加带顶 padding 的类。 */
.blog-sidebar, .contact-page, .xlc-section, .video-page { padding: 56px 0 96px; }
.blog-sidebar .container > .row, .contact-page .container > .row { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(28px,4vw,48px); }
.blog-sidebar .container > .row { grid-template-columns: minmax(0, 2.6fr) minmax(240px, 1fr); }
@media (max-width: 900px) { .blog-sidebar .container > .row { grid-template-columns: 1fr; } }
.blog-sidebar [class*="col-"], .contact-page [class*="col-"] { width: auto; max-width: none; }

/* ============ ARTICLE DETAIL PAGES (.blog-details) — P1 皮肤迁移(总工拍板) ============
   长文攻略页(marine/62 等 67 页)迁离 tejoy 皮肤。规范:单栏(旧 blog 侧栏已在 HTML 删除,
   Linear/Stripe 文档式)/ W3 标题(h2 内联蓝框已剥,统一在此)/ 可读列宽 / 零内联样式。
   → 这三条即 DESIGN.md 的文章页规范。 */
.blog-details { padding: 56px 0 96px; }
.blog-details .row { display: block; margin: 0; }
.blog-details [class*="col-"] { width: auto; max-width: none; padding: 0; float: none; }
.blog-details__left, .blog-details__content, .blog-details__text-1 { max-width: 820px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 24px); }
.blog-details__title { font-size: var(--w3-fs-d2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.16; text-wrap: balance; margin: 0 0 28px; color: var(--w3-text); }
.blog-details__content h2, .blog-details__text-1 h2 { font-size: var(--w3-fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 48px 0 18px; scroll-margin-top: 90px; color: var(--w3-text); }
.blog-details__content h3, .blog-details__text-1 h3 { font-size: var(--w3-fs-h3); font-weight: 650; line-height: 1.4; margin: 32px 0 12px; color: var(--w3-text); }
.blog-details__content p, .blog-details__text-1 p { font-size: var(--w3-fs-body); line-height: 1.8; color: var(--w3-text2); margin: 0 0 16px; }
.blog-details__content ul, .blog-details__content ol, .blog-details__text-1 ul, .blog-details__text-1 ol { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.blog-details__content li, .blog-details__text-1 li { font-size: var(--w3-fs-body); line-height: 1.75; color: var(--w3-text2); }
.blog-details__content a, .blog-details__text-1 a { color: var(--w3-accent); }
.blog-details__content a:hover, .blog-details__text-1 a:hover { text-decoration: underline; }
.blog-details__content strong, .blog-details__text-1 strong { color: var(--w3-text); font-weight: 650; }
.blog-details__content img, .blog-details__text-1 img { max-width: 100%; height: auto; border-radius: 12px; margin: 20px 0; display: block; }
/* old markup ships <table width="1400"> — force fluid + scroll instead of blowing out the layout */
.blog-details__content table, .blog-details__text-1 table { width: 100% !important; border-collapse: collapse; margin: 20px 0; font-size: var(--w3-fs-compact); display: block; overflow-x: auto; }
.blog-details__content th, .blog-details__content td, .blog-details__text-1 th, .blog-details__text-1 td { border: 1px solid var(--w3-line); padding: 10px 14px; text-align: left; color: var(--w3-text2); }
.blog-details__content th, .blog-details__text-1 th { background: var(--w3-panel); color: var(--w3-text); font-weight: 650; }

/* --- article-hub: list of guide cards (blog-sidebar__content-single) --- */
.blog-sidebar__content { display: grid; gap: 14px; }
.blog-sidebar__title { font-size: var(--w3-fs-lead); font-weight: 650; line-height: 1.4; letter-spacing: -0.01em; margin: 0; }
.blog-sidebar__title a { color: var(--w3-text); transition: color 0.15s; }
.blog-sidebar__title a:hover { color: var(--w3-accent); }

/* --- sidebar rail (search / categories / recent posts) --- */
.sidebar { display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--w3-header-h) + 20px); }
@media (max-width: 900px) { .sidebar { position: static; } }

/* --- pagination (overrides template inline .pagination styles) --- */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 32px; padding: 0; list-style: none; }
.pagination .page-item, .pagination a, .pagination span {
  padding: 9px 15px !important; border: 1px solid var(--w3-line2) !important; border-radius: 999px !important;
  background: transparent !important; color: var(--w3-text2) !important; text-decoration: none; font-size: var(--w3-fs-compact); min-width: 42px; text-align: center;
}
.pagination .page-item:hover, .pagination a:hover { background: #fff !important; color: #0b0d10 !important; border-color: #fff !important; }
.pagination .active, .pagination .page-item.active { background: #fff !important; color: #0b0d10 !important; border-color: #fff !important; }

/* --- hangye water-sport industry cards (overrides template inline styles) --- */
.water-sport-item {
  background: var(--w3-panel) !important; border: 1px solid var(--w3-line) !important; border-radius: var(--w3-radius) !important;
  overflow: hidden; transition: transform 0.3s var(--w3-ease), border-color 0.3s;
}
.water-sport-item:hover { transform: translateY(-4px); border-color: var(--w3-line2) !important; }
/* #3 use-case photo cards: dark placeholder (was near-white --w3-tile, which flashed
   a white box while the lazy below-fold images loaded on the dark page — Joe's
   "white frame"). These are photos, not white-bg products, so a dark tile is correct. */
.sport-info .title { font-size: var(--w3-fs-body); font-weight: 650; line-height: 1.35; margin: 0 0 8px; }
.sport-info .title a { color: var(--w3-text) !important; }
.sport-info .title a:hover { color: var(--w3-accent) !important; }

/* Factory image wall — full-width 2×3 grid of real production photos (trust proof), editorial stage captions */
.about-facwall { list-style: none; margin: 34px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.about-facwall li { margin: 0; }
.about-facwall figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--w3-radius); border: 1px solid var(--w3-line); background: var(--w3-bg2); }
.about-facwall img { display: block; width: 100%; height: auto; aspect-ratio: 503 / 338; object-fit: cover; transition: transform .6s var(--w3-ease); }
.about-facwall figure:hover img { transform: scale(1.05); }
.about-facwall figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(10,12,15,.5)); pointer-events: none; }
.about-facwall figcaption { position: absolute; left: 12px; bottom: 11px; z-index: 2; font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; padding: 5px 10px; border-radius: 999px; background: rgba(10,12,15,.5); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 860px) { .about-facwall { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 520px) { .about-facwall { grid-template-columns: 1fr; } }
/* capability lead line — sits between the number band and the factory wall */
.about-caps-line { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: var(--w3-fs-body); line-height: 1.75; color: var(--w3-text2); }

/* ── Solutions: hub scene cards + scene recommended-accessory cards + shared CTA ── */
/* 2026-07-28:字号 small(12.5)→ micro(11),与基准 .w3-eyebrow 对齐。
   眉题是【一个角色】,基准形制是 micro/w600/全大写(§2.2)——同一角色两个字号,
   正是字阶那 37 个落点的病。色用 accent 是刻意的变体(总工判过:代码对、宪法过期)。 */
.page-header__eyebrow { display: inline-block; font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--w3-accent); margin-bottom: 12px; }
.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.sol-card { display: flex; flex-direction: column; border: 1px solid var(--w3-line); border-radius: var(--w3-radius); overflow: hidden; background: var(--w3-panel); text-decoration: none; transition: transform .35s var(--w3-ease), border-color .35s, box-shadow .35s; }
.sol-card:hover { transform: translateY(-4px); border-color: var(--w3-line2); box-shadow: 0 14px 34px rgba(0,0,0,.42); }
.sol-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--w3-bg2); }
.sol-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--w3-ease); }
.sol-card:hover .sol-card__media img { transform: scale(1.06); }
.sol-card__body { position: relative; padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.sol-card__t { font-size: var(--w3-fs-lead); font-weight: 700; color: var(--w3-text); letter-spacing: -0.01em; }
.sol-card__d { font-size: var(--w3-fs-compact); color: var(--w3-text2); line-height: 1.6; max-width: 34ch; }
.sol-card__arw { position: absolute; top: 20px; right: 22px; color: var(--w3-accent); font-size: var(--w3-fs-lead); line-height: 1; transition: transform .3s var(--w3-ease); }
.sol-card:hover .sol-card__arw { transform: translateX(4px); }
@media (max-width: 900px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sol-grid { grid-template-columns: 1fr; } }
/* scene page: recommended accessories */
.sol-recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; }
.sol-rec { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--w3-line); border-radius: var(--w3-radius); background: var(--w3-panel); text-decoration: none; transition: transform .3s var(--w3-ease), border-color .3s, box-shadow .3s; }
.sol-rec:hover { transform: translateY(-3px); border-color: rgba(125,177,255,.35); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.sol-rec__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--w3-line); background: radial-gradient(120% 120% at 50% 30%, rgba(125,177,255,.12), var(--w3-bg2) 70%); color: var(--w3-accent); display: grid; place-items: center; }
.sol-rec__ic svg { width: 23px; height: 23px; }
.sol-rec__t { flex: 1; font-size: var(--w3-fs-compact); font-weight: 600; color: var(--w3-text); }
.sol-rec__arw { color: var(--w3-text3); font-size: var(--w3-fs-body); transition: transform .3s var(--w3-ease), color .3s; }
.sol-rec:hover .sol-rec__arw { color: var(--w3-accent); transform: translateX(3px); }
/* shared CTA band (hub + scene) */
.sol-cta { margin-top: 44px; padding: 30px 34px; border-radius: var(--w3-radius); border: 1px solid var(--w3-line); background: linear-gradient(180deg, var(--w3-panel), var(--w3-bg2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sol-cta__text h3 { font-size: var(--w3-fs-h3); font-weight: 700; color: var(--w3-text); margin: 0 0 6px; letter-spacing: -0.01em; }
.sol-cta__text p { font-size: var(--w3-fs-compact); color: var(--w3-text2); margin: 0; line-height: 1.6; }
.sol-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .sol-cta { flex-direction: column; align-items: flex-start; } }

/* --- prose / rich content (about, faq, certs, xlc, video, compatibility) --- */
.about-page, .xlc-section, .xlc-body, .video-page { color: var(--w3-text2); }
.about-lead, .about-split { display: grid; gap: clamp(24px,4vw,48px); align-items: center; margin-bottom: 56px; }
/* v6:文字列加宽 —— 18px 下 1.1fr 只够 58 字符/行,低于 60-75 的可读区间。
   真正的约束是【列宽】不是 max-width,所以调列比而不是加大 max-width。 */
.about-lead { grid-template-columns: 1fr 1.1fr; align-items: start; }   /* v6:两列上对齐(原 center) */
.about-lead__text p { font-size: var(--w3-fs-lead); line-height: 1.7; max-width: 68ch; }  /* v6:全页第一印象,字大行短 */
.about-split { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .about-lead, .about-split { grid-template-columns: 1fr; } }
.about-lead__media img, .about-split__media img { width: 100%; border-radius: var(--w3-radius); border: 1px solid var(--w3-line); }
.about-lead__text, .about-split__text { display: grid; gap: 16px; }
.about-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--w3-line); border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden; list-style: none; padding: 0; margin: 6px 0; }
.about-caps li { background: var(--w3-bg2); padding: 16px 18px; display: grid; gap: 3px; }
.about-caps__k { font-size: var(--w3-fs-h3); font-weight: 700; color: var(--w3-text); font-variant-numeric: tabular-nums; }
.about-caps__v { font-size: var(--w3-fs-small); color: var(--w3-text3); }
/* Certifications — substantial cert cards (visual weight = trust), not mini pills */
/* Certifications = slim pill strip (v3: was 4 big empty cards). */
.about-certstrip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 0; }
.about-cert { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--w3-line2); background: rgba(255,255,255,.03); color: var(--w3-text); font-size: var(--w3-fs-compact); font-weight: 650; letter-spacing: 0.04em; }
/* v6:About 页零彩色(Joe)。药丸形态保留,图标跟随文字色。 */
.about-cert__ic { width: 18px; height: 18px; color: currentColor; flex: none; }
.about-lead a, .about-split a { color: var(--w3-accent); }
/* trademark disclaimer lead in the Compatibility & FAQ section */
.about-disclaimer { font-size: var(--w3-fs-compact); color: var(--w3-text3); line-height: 1.7; max-width: 820px; margin: 0 0 20px; }
/* section title = DESIGN.md §2.2 h2 (single rigorous scale, all sections identical) */
.about-lead__text h2, .about-split__text h2, .about-page h2, .xlc-section h2, .video-page h2 { color: var(--w3-text); font-size: var(--w3-fs-d2); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; }
/* ⚠️ 这里原本还有 `.about-page h3`。`.about-page` 是【body 上的类】,所以它一路管到页脚,
   把 .footer-widget__title 从 14px/600 顶成 18px/650 —— **只有 About 页的页脚长得不一样**
   (其余五页实测全是 14px/600)。
   实测 About 页 10 个 h3:7 个在 .xlc-section 内、3 个在页脚、**0 个靠 .about-page h3 兜底** ——
   它唯一的作用就是泄漏。已删,不是限定作用域:**没有用途的规则不该留着改小。**
   ⚠️ `.about-page h2` 保留:页脚实测 0 个 h2,它没有泄漏面。 */
.xlc-section h3, .video-page h3 { color: var(--w3-text); font-size: var(--w3-fs-lead); font-weight: 650; }
.about-lead p, .about-split p, .about-page p, .xlc-body p, .video-page p { line-height: 1.75; }

/* about stat row (tj-stats) */
.tj-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 40px 0; }
@media (max-width: 720px) { .tj-stats { grid-template-columns: 1fr 1fr; } }
.tj-st { background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); padding: 24px 20px; display: grid; gap: 8px; justify-items: start; }
.tj-ic { width: 30px; height: 30px; color: var(--w3-accent); }
.tj-v { font-size: var(--w3-fs-h3); font-weight: 700; color: var(--w3-text); letter-spacing: -0.01em; }
.tj-l { font-size: var(--w3-fs-compact); color: var(--w3-text2); line-height: 1.5; }

/* xlc stat cards */
/* By the Numbers — impactful 4-up stat grid (big numbers), per DESIGN.md stat/dense token */
.xlc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
/* v6:盒模型(底/边/圆角/内距)统一由 .ab-card 提供,这里只留排版。 */
.xlc-stat-card { display: grid; gap: 8px; text-align: center; align-content: center; }
.xlc-stat-number { font-size: var(--w3-fs-d1); font-weight: 800; color: var(--w3-accent); letter-spacing: -0.03em; line-height: 1; }
.xlc-stat-label { font-size: var(--w3-fs-compact); color: var(--w3-text2); font-weight: 500; }
@media (max-width: 720px) { .xlc-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* About 7-section rebuild: consolidated 6-stat band + inline patent note + merged Mfg/Quality + one-line Global + closing CTA */
.xlc-stats--6 { grid-template-columns: repeat(6, 1fr); }
/* 字号上下限一起收:上限 38→30 让 1440 装得下,下限 26→22 让最窄的 6 列档也装得下。
   数字仍然是这一段的视觉重点,但它不能撑破自己的卡。 */
.xlc-stats--6 .xlc-stat-number { font-size: var(--w3-fs-h2); }
/* v6:内距不再各卡自定,见 .ab-card */
/* 6 列的下限抬到 1280:1025-1279 这一整段过去仍是 6 列,每列扣掉统一内距后只剩 ~100px,
   而 "600,000+" 在最小字号下也要 ~111px —— 那一段【无论字号怎么调都装不下】,必须减列。 */
@media (max-width: 1279px) { .xlc-stats--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .xlc-stats--6 { grid-template-columns: repeat(2, 1fr); } }
.xlc-stats__note { text-align: center; margin: 18px 0 0; font-size: var(--w3-fs-compact); color: var(--w3-text3); letter-spacing: 0.01em; }
/* v6:视觉字号与同段的 h2 一致(Joe)。⚠️ 标签仍是 h3 —— 只改视觉不改文档层级。 */
.xlc-section h3.about-qp-head { margin-top: 56px !important; font-size: var(--w3-fs-d2); line-height: 1.08;
  letter-spacing: -0.03em; font-weight: 700; color: var(--w3-text); }
.about-global-line { font-size: var(--w3-fs-body); color: var(--w3-text2); line-height: 1.75; max-width: 760px; margin: 4px 0 0; }
.about-cta { margin-top: 44px; }
/* Partner CTA (v3): section title + one line + primary button */
.about-partner { display: grid; gap: 20px; max-width: 640px; justify-items: start; margin-top: 8px; }
.about-partner p { font-size: var(--w3-fs-body); color: var(--w3-text2); line-height: 1.75; margin: 0; }

/* --- FAQ accordion (overrides template inline .faq-* styles) --- */
.faq-item { background: var(--w3-panel) !important; border: 1px solid var(--w3-line) !important; border-radius: var(--w3-radius) !important; margin-bottom: 12px !important; overflow: hidden; }
.faq-question { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px !important; cursor: pointer; font-size: var(--w3-fs-body) !important; font-weight: 600 !important; color: var(--w3-text) !important; }
/* template toggleFaq() toggles `.close` on icon/line/answer; DEFAULT (no .close) = OPEN.
   Icon is the template's single `▼` glyph — NO pseudo-elements (avoids double-icon overlap). */
.faq-icon { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: var(--w3-fs-small); line-height: 1; color: var(--w3-accent); transform: rotate(180deg); transition: transform 0.25s var(--w3-ease); }  /* open = chevron up */
.faq-icon.close { transform: rotate(0deg); }  /* closed = chevron down */
.faq-answer { padding: 0 22px 20px !important; max-height: 1200px; overflow: hidden; transition: max-height 0.3s var(--w3-ease), padding 0.3s; color: var(--w3-text2) !important; line-height: 1.7; font-size: var(--w3-fs-compact); }  /* default open */
.faq-answer.close { max-height: 0 !important; padding: 0 22px !important; }  /* collapsed */
.faq-line { border-top: 1px solid var(--w3-line); margin: 0 22px; }  /* separator, hidden when closed */
.faq-line.close { display: none; }

/* --- contact page --- */
.section-title__tagline { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--w3-text3); }
.section-title__title { color: var(--w3-text); font-size: var(--w3-fs-h1); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 0; }
.contact-info-card { background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); padding: 26px; display: grid; gap: 10px; margin-top: 20px; }
.contact-info-card__name { color: var(--w3-text); font-size: var(--w3-fs-body); font-weight: 650; margin: 0; }
.contact-info-card a { color: var(--w3-accent); }
.contact-page .inner-add-comments-box { display: grid; gap: 6px; margin-bottom: 14px; }
.contact-page .form-control { width: 100%; background: var(--w3-bg2); border: 1px solid var(--w3-line); border-radius: var(--w3-radius-s); padding: 12px 14px; font-size: var(--w3-fs-compact); color: var(--w3-text); }
.contact-page .form-control:focus { outline: none; border-color: var(--w3-accent); }
.contact-page textarea.form-control { min-height: 120px; resize: vertical; }

/* ===== Contact page redesign (Joe): 2-col reach/form, icon rows, channels, map ===== */
.w3-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }   /* Joe: equal width + equal height */
@media (max-width: 900px) { .w3-contact__grid { grid-template-columns: minmax(0, 1fr); } }
.w3-contact__aside { display: grid; gap: 22px; }
/* both columns sit in surface cards so the content reads as panels, not floating on black */
/* Solutions v2:难点 + 需求 —— 一个面板、左右两栏。
   ⚠️ 两栏【各自独立成列,不逐行配对】:配对检查核到描述层,六页全部不成立
      (marine 需求 1/2 相对难点错位,且需求 1 同时回答难点 2 与 4)。
      逐行并排会隐含"这条难点由这条解决"的因果,把内容错误放大成明说的错话。
   ⚠️ 面板本体不在这里定义 —— 它消费 About v8 从 Contact 提取的 .w3-panel。**不许造第三个面板。** */
.sol-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sol-problem__col:first-child { padding-right: clamp(20px, 3vw, 40px); border-right: 1px solid var(--w3-line); }
.sol-problem__col:last-child { padding-left: clamp(20px, 3vw, 40px); }
.sol-problem__eyebrow { display: block; font-size: var(--w3-fs-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--w3-text3); margin: 0 0 6px; }
.sol-problem__list { list-style: none; margin: 0; padding: 0; display: grid; }
/* 🔴 右栏列表整体错开半行 —— 取消配对必须【在视觉上也取消】。
   实测:两栏文案长度太接近(每条描述 42-52 字、都只占一行),自然流出来左右逐行齐平
   (六页 top 全是 569/647/726/804)。CSS 里并没有跨栏对齐,但
   **相邻 + 行齐平 = 隐含对应关系**,读者照样会把第 i 行读成一对 —— 而配对检查证明它们不成对。
   错开是确定性手段:不依赖文案长度,任何语言/宽度下都不会再出现逐行齐平。
   ⚠️ 栏头 eyebrow 不错开:它们是【列标题】不是配对项,对齐是对的。 */
.sol-problem__col:last-child .sol-problem__list { margin-top: 30px; }
@media (max-width: 900px) { .sol-problem__col:last-child .sol-problem__list { margin-top: 0; } }
.sol-problem__n { flex: none; font-size: var(--w3-fs-small); font-weight: 700; letter-spacing: .14em; color: var(--w3-text3); padding-top: 3px; }
.sol-problem__ic { flex: none; display: inline-flex; width: 20px; height: 20px; color: var(--w3-text3); }
.sol-problem__ic svg { width: 100%; height: 100%; }
@media (max-width: 900px) {
  .sol-problem { grid-template-columns: 1fr; }
  .sol-problem__col:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--w3-line); padding-bottom: 18px; margin-bottom: 18px; }
  .sol-problem__col:last-child { padding-left: 0; }
}

/* ══ 共用面板组件 .w3-panel ══════════════════════════════════════════════════
   ⭐ 提取自 Contact 页 —— Joe 指出「contact 页面就挺好看的,为什么 about 怎么调都不好看」,
      量下来差别是【结构】不是细节:Contact 是 2 个深色面板 / 1 个白色元素 / 面板内细线分行,
      About 曾是 0 个面板 / 29 张白卡 / 每条内容各自成卡。
      **白卡本是"把一个东西从暗底提出来"的手段,当所有东西都被提出来,就等于没有东西被提出来。**
   🔴 新页面【消费这个组件】,不许再造第二个面板 —— 两页各长各的正是要消灭的病。
   ⚠️ 数值逐字取自原 .w3-contact__card,一个都没改:这一步是重构,Contact 产出必须逐字节不变。 */
.w3-panel { background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); padding: clamp(22px, 2.6vw, 34px); }
/* 面板内的"行":同一容器里的兄弟行 + 下边框,**不是各自带背景/圆角的盒子**。
   (卡片 = 可点击的对象;不可点击的内容用面板 + 分隔行 —— 总工 2026-07-28 立的规则。) */
.w3-panel__row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--w3-line); }
.w3-panel__row:last-child { border-bottom: none; }
/* Contact 沿用旧类名消费同一套值 —— 改类名会动它的产出,而这一步不许动。 */
.w3-contact__card { background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); padding: clamp(22px, 2.6vw, 34px); }   /* no align-self so the grid's align-items:stretch gives equal-height cards */
/* icon info rows */
.w3-cinfo { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.w3-cinfo__row { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--w3-line); }
.w3-cinfo__ic { flex: 0 0 auto; font-size: var(--w3-fs-lead); line-height: 1.5; opacity: 0.9; }
.w3-cinfo__body { display: grid; gap: 2px; min-width: 0; }
.w3-cinfo__k { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--w3-text3); }
.w3-cinfo__v { font-size: var(--w3-fs-compact); color: var(--w3-text); font-weight: 550; }
.w3-cinfo__link { color: var(--w3-accent); }
/* instant channels */
.w3-channels { display: flex; flex-wrap: wrap; gap: 10px; }
.w3-channel { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--w3-line2); background: var(--w3-panel); color: var(--w3-text); font-size: var(--w3-fs-compact); font-weight: 600; cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; }
.w3-channel:hover { border-color: var(--w3-line2); transform: translateY(-1px); background: var(--w3-panel2); }
.w3-channel__ic { display: inline-flex; }
/* ⭐ 品牌色按钮(全站唯一一颗:WhatsApp。微信与电话用中性面板底,不是品牌色)。
   2026-07-28:`#1faa53` → `#188741`。白字在旧值上只有 **3.03**,而 14px/w600 的门槛是 4.5。
   ⚠️ 先算过"抬字号到大字门槛 3.0"那条路,**没走** —— 因为 `.w3-channel__t` 没有独立字号规则,
      它继承 `.w3-channel`,而那条规则管着【三颗按钮】:抬字号会把中性底的电话/微信也一起抬大,
      或者逼出"三颗并排字号不一"。**局部最优 + 共享载体 = 必然波及。**
   ⚠️ 更硬的理由:新值过的是【完整门槛 4.5】,不是放宽后的 3.0。
      **不用放宽的方案,永远优于用得起放宽的方案。**
   实测:官方绿 `#25D366` 配白字仅 **1.98**(连 3.0 都不到),站内一直用的是加深版 ——
      **用户参照的从来不是官方绿**,所以再深一档不损识别;按钮的识别本来就靠绿+图标。
   新值 = 官方绿 64% 明度,白字对比 **4.58**(门槛 4.5,余量 53%)。
   ⚠️ 记一个没踩的坑:微信官方绿 `#07C160` 配白字只有 **2.38** —— 将来若有人想"统一成品牌色",
      先看这个数。 */
.w3-channel--wa { background: #188741; border-color: #188741; color: #fff; }
.w3-channel--wa:hover { background: #146d34; border-color: #146d34; }
.w3-channel-wechat { position: relative; }
/* default hidden — a class selector's display would beat the [hidden] attribute, so
   set display:none here and reveal via .is-open (click) or desktop hover/focus. */
.w3-wechat-pop { position: absolute; bottom: calc(100% + 12px); left: 0; z-index: 30; width: 224px; padding: 16px; border-radius: 14px; background: rgba(16, 19, 23, 0.98); border: 1px solid var(--w3-line); box-shadow: var(--w3-shadow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: none; gap: 10px; justify-items: center; text-align: center; }
.w3-wechat-pop.is-open { display: grid; }
@media (hover: hover) { .w3-channel-wechat:hover .w3-wechat-pop, .w3-channel-wechat:focus-within .w3-wechat-pop { display: grid; } }
.w3-wechat-pop__qr { width: 180px; height: auto; border-radius: 8px; background: #fff; }
.w3-wechat-pop__scan { font-size: var(--w3-fs-small); color: var(--w3-text2); margin: 0; }
.w3-wechat-pop__copy { font-size: var(--w3-fs-small); font-weight: 600; color: var(--w3-text); background: var(--w3-panel2); border: 1px solid var(--w3-line); border-radius: 8px; padding: 7px 12px; cursor: pointer; width: 100%; }
.w3-wechat-pop__copy:hover { border-color: var(--w3-accent); color: var(--w3-accent); }
.w3-wechat-pop__copy.is-copied { color: var(--w3-accent); border-color: var(--w3-accent); }
/* trust strip */
.w3-ctrust { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; border-top: 1px solid var(--w3-line); border-bottom: 1px solid var(--w3-line); }
.w3-ctrust--wide { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 560px) { .w3-ctrust { grid-template-columns: repeat(2, 1fr); gap: 16px 8px; } }
.w3-ctrust li { display: grid; gap: 2px; text-align: center; }
.w3-ctrust__v { font-size: var(--w3-fs-lead); font-weight: 700; letter-spacing: -0.01em; color: var(--w3-text); }
.w3-ctrust__k { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--w3-text3); }
/* privacy-safe static map card (no third-party request on load) */
.w3-cmap { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--w3-radius); border: 1px solid var(--w3-line); background:
    radial-gradient(120% 140% at 85% 15%, rgba(125, 177, 255, 0.10) 0%, rgba(10, 12, 15, 0) 55%), var(--w3-panel); transition: border-color 0.2s, transform 0.15s; }
.w3-cmap:hover { border-color: var(--w3-line2); transform: translateY(-1px); }
.w3-cmap__pin { flex: 0 0 auto; font-size: var(--w3-fs-h2); }
.w3-cmap__body { display: grid; gap: 3px; min-width: 0; }
.w3-cmap__hq { font-size: var(--w3-fs-compact); font-weight: 650; color: var(--w3-text); }
.w3-cmap__addr { font-size: var(--w3-fs-small); color: var(--w3-text3); }
.w3-cmap__cta { font-size: var(--w3-fs-small); font-weight: 600; color: var(--w3-accent); margin-top: 3px; }
/* form */
/* ⚠️ .w3-form is itself display:grid 1fr 1fr (product form puts .w3-field-box children
   directly). The contact form instead wraps all fields in ONE .w3-form__grid div — which
   would land in a single 1fr column of .w3-form (half width), squeezing the whole form +
   inputs to ~half the card (measured 2560: form 498 → grid 242 → input 113). Span it full
   width so its own 1fr 1fr fills the card. */
.w3-form > .w3-form__grid { grid-column: 1 / -1; width: 100%; }
.w3-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.w3-field { display: grid; gap: 6px; }
.w3-field--full { grid-column: 1 / -1; }
/* Contact right card: flex column so Submit sits at the card bottom, aligned with the
   left card's map card foot (cards are equal-height via .w3-contact__grid stretch). */
.w3-contact__form { display: flex; flex-direction: column; }
.w3-contact__form .w3-form { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.w3-contact__form .w3-form__submit-row { margin-top: auto; }
@media (max-width: 560px) { .w3-form__grid { grid-template-columns: 1fr; } .w3-field--half { grid-column: 1 / -1; } }
.w3-field label { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w3-text3); }
.w3-input { width: 100%; background: var(--w3-bg2); border: 1px solid var(--w3-line2); border-radius: var(--w3-radius-s); padding: 12px 14px; font-size: var(--w3-fs-compact); color: var(--w3-text); font-family: inherit; transition: border-color 0.18s, background 0.18s; }
.w3-input::placeholder { color: var(--w3-text3); }
.w3-input:focus { outline: none; border-color: var(--w3-accent); background: var(--w3-panel); }
.w3-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8791' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }
.w3-form textarea.w3-input { min-height: 130px; resize: vertical; }
.w3-form__submit { min-height: 50px; width: 100%; justify-content: center; font-size: var(--w3-fs-body); }
.contact-page .btn-1, .contact-page button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; color: #0b0d10; border: 0; font-weight: 600; font-size: var(--w3-fs-compact); cursor: pointer; }
/* screen-reader-only utility (was undefined after shell-swap → sr-only labels rendered visible = duplicate text) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* consolidate the inquiry form into one compact card, fields in a 2-col grid */
.contact-page .products-details-content { background: var(--w3-panel); border: 1px solid var(--w3-line); border-radius: var(--w3-radius); padding: clamp(22px, 3vw, 30px); }
.contact-page .form-contact-2 > .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-page .form-contact-2 .col-md-12, .contact-page .form-contact-2 .col-12 { grid-column: 1 / -1; }
.contact-page .inner-add-comments-box { margin-bottom: 0; }
@media (max-width: 560px) { .contact-page .form-contact-2 > .row { grid-template-columns: 1fr; } }

/* generic tables inside content */
.xlc-body table, .about-page table, .explain table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: var(--w3-fs-compact); display: block; overflow-x: auto; }
.xlc-body th, .xlc-body td, .about-page th, .about-page td { border: 1px solid var(--w3-line) !important; padding: 10px 13px; text-align: left; color: var(--w3-text2); }
.xlc-body th, .about-page th { background: var(--w3-panel2) !important; color: var(--w3-text); font-weight: 600; }
.huibg { background: transparent !important; }
/* Video page placeholder (legacy thumbnail removed; awaiting install videos) */
.video-soon { max-width: 640px; margin: 8px 0 0; display: grid; gap: 20px; justify-items: start; }
.video-soon p { font-size: var(--w3-fs-body); color: var(--w3-text2); line-height: 1.75; margin: 0; }
/* ── Guides library (home /guides/ + topic index + article) ── */
/* slim text-only hero (no image band) for guides list + article */
/* §2.6 治沉闷:全 Guides 区统一【设计化图形 header】(非实拍照)——accent 径向辉光 + 细网格,
   下缘遮罩淡出无缝接暗底;治"顶图不一致"+"无图暗 void"。/guides/ 首页 · 各 topic · 文章 · Compat/FAQ 共用。 */
.page-header--slim { position: relative; height: auto; min-height: 0; padding: calc(var(--w3-header-h) + 72px) 0 40px; background: var(--w3-bg); overflow: hidden; }
.page-header--slim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 150% at 84% -20%, rgba(125,177,255,.18), transparent 56%),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 44px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 18%, transparent 92%);
}
.page-header--slim .container, .page-header--slim .page-header__inner { position: relative; z-index: 1; }
.page-header--slim .page-header__title { font-size: var(--w3-fs-d2); }
.w3-crumb { font-size: var(--w3-fs-compact); color: var(--w3-text3); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.w3-crumb a { color: var(--w3-accent); }
/* Guides topic nav —— 一套浏览逻辑(Joe 铁令):chip 是导航链接 <a>,跳 /guides/{topic}/ 专属页,非就地筛选 */
/* ⭐ 单行横向条带(总工 2026-07-28):375 下 es 的 chip 条曾要占 6 行 ≈ 240px,
   把正文推到快一屏之下 —— 那是可用性问题不是观感问题。
   ⚠️ 刻意【不设断点】:一律 nowrap + overflow-x:auto。桌面本来就不溢出,行为零变化;
      一套行为比一个 media query 更难出错(总工原话)。 */
.guides-nav { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 28px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; position: relative; }
.guides-nav::-webkit-scrollbar { display: none; }
/* 右缘渐隐提示还有 —— 用背景色令牌不写死 hex;滚到底时由 JS 摘掉 is-end 之外的类,
   否则遮罩会永远在骗人(总工原话)。 */
.guides-nav::after { content: ""; position: sticky; right: 0; flex: none; width: 34px; height: 1px;
  margin-left: -34px; align-self: stretch; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--w3-bg)); transition: opacity .2s; }
.guides-nav.is-end::after { opacity: 0; }
.guides-nav.is-nooverflow::after { display: none; }
.guides-chip { flex: none; }
.guides-chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--w3-line2); background: transparent; color: var(--w3-text2); font-size: var(--w3-fs-compact); font-weight: 600; text-decoration: none; transition: color .2s var(--w3-ease), background .2s, border-color .2s; }
.guides-chip:hover { color: var(--w3-text); border-color: rgba(255,255,255,.38); }
.guides-chip.is-active { background: #fff; color: var(--w3-surface-0); border-color: #fff; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* §2.6 治沉闷:卡片从 surface-2 抬亮 + 顶边高光 + 柔和双层投影 = 明显浮起、不与底糊;顶部 accent 渐变线做焦点 */
.guides-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 24px 22px 20px; border: 1px solid var(--w3-line); border-radius: var(--w3-radius); background: var(--w3-surface-2); box-shadow: var(--w3-edge-top), var(--w3-elev-card); text-decoration: none; overflow: hidden; transition: transform .35s var(--w3-ease), border-color .35s, box-shadow .35s; }
.guides-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--w3-accent), transparent 72%); opacity: 0; transition: opacity .35s var(--w3-ease); }
.guides-card:hover { transform: translateY(-4px); border-color: var(--w3-line2); box-shadow: var(--w3-edge-top), 0 6px 16px -4px rgba(0,0,0,.55), 0 22px 48px -16px rgba(0,0,0,.7); }
.guides-card:hover::before { opacity: 1; }
/* 2026-07-28:字重 700 → 600,与基准 .w3-eyebrow 对齐(同上,眉题是一个角色)。 */
.guides-card__topic { font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w3-accent); }
.guides-card__t { font-size: var(--w3-fs-body); font-weight: 700; color: var(--w3-text); line-height: 1.32; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.guides-card__sum { font-size: var(--w3-fs-compact); font-weight: 400; color: var(--w3-text2); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guides-card__arw { color: var(--w3-text3); font-size: var(--w3-fs-body); margin-top: auto; padding-top: 4px; transition: transform .3s var(--w3-ease), color .3s; }
.guides-card:hover .guides-card__arw { color: var(--w3-accent); transform: translateX(3px); }
@media (max-width: 900px) { .guides-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .guides-grid { grid-template-columns: 1fr; } }
/* article closing CTA */
.guides-cta { margin: 48px auto 0; max-width: 820px; padding-top: 30px; border-top: 1px solid var(--w3-line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.guides-cta h2 { width: 100%; margin: 0 0 4px; }
.guides-soon { grid-column: 1 / -1; font-size: var(--w3-fs-body); color: var(--w3-text2); line-height: 1.7; margin: 0; }
.guides-soon a { color: var(--w3-accent); }

/* ── Solutions · Marine deep blocks (#77 sample). §2.6 分层：bg-0 段 → surface-2 卡浮起 + edge-top。
   全部走令牌，零硬编码色。其余 5 场景不加载这些类（HTML 里根本不出现）。 */
.sol-deep-problem, .sol-deep-kit, .sol-deep-cta { padding-top: 96px; padding-bottom: 96px; }
.sol-deep-kit .tj-sechead { margin-bottom: 8px; }

/* ③ 推荐配置：可点卡（图标+名+为什么+规格），刻意不用产品图（旧品牌像素风险） */
.sol-deep-kit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 52px; }
.sol-deep-kit__c { position: relative; display: block; padding: 24px 22px 44px; border-radius: var(--w3-radius); background: var(--w3-surface-2); border: 1px solid var(--w3-line); border-top: 1px solid var(--w3-edge-top); box-shadow: var(--w3-elev-card); text-decoration: none; transition: transform .3s var(--w3-ease), border-color .3s, box-shadow .3s; }
.sol-deep-kit__c:hover { transform: translateY(-3px); border-color: rgba(125,177,255,.35); box-shadow: 0 16px 32px rgba(0,0,0,.38); }
.sol-deep-kit__ic { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: var(--w3-well); color: var(--w3-accent); margin-bottom: 14px; }
.sol-deep-kit__ic svg { width: 20px; height: 20px; }
.sol-deep-kit__t { font-size: var(--w3-fs-lead); font-weight: 700; color: var(--w3-text); margin: 0 0 6px; letter-spacing: -0.015em; line-height: 1.3; }
.sol-deep-kit__w { font-size: var(--w3-fs-compact); line-height: 1.65; color: var(--w3-text2); margin: 0 0 10px; }
.sol-deep-kit__s { font-size: var(--w3-fs-small); line-height: 1.6; color: var(--w3-text3); margin: 0; letter-spacing: .01em; }
.sol-deep-kit__arw { position: absolute; right: 20px; bottom: 18px; color: var(--w3-text3); transition: color .3s, transform .3s; }
.sol-deep-kit__c:hover .sol-deep-kit__arw { color: var(--w3-accent); transform: translateX(3px); }
.sol-deep-note { margin: 30px 0 0; font-size: var(--w3-fs-small); line-height: 1.6; color: var(--w3-text3); max-width: 640px; opacity: .85; }

/* ④ 凭什么信：复用 About 认证条 */
.sol-deep-certs { margin-top: 34px; }

@media (max-width: 767px) {
  .sol-deep-kit__grid { grid-template-columns: 1fr; }
  .sol-deep-problem, .sol-deep-kit, .sol-deep-cta { padding-top: 60px; padding-bottom: 60px; }
}

/* ── About v4 下半段治沉闷（Joe：暗卡暗字挤一起）。§2.6 招2 = 深底留深、容器翻白。
   同时套 Solutions 那轮定下的「starlink 密度」：标题更大、块间更松、正文更少。 */

/* ① OEM/ODM —— 4 服务卡 + 3 步流程一起翻白，整段一种容器语言（半白半暗会打架） */
.about-oem-light { padding-top: 96px; padding-bottom: 96px; }
.about-oem-light .about-oemodm__head { margin-top: 46px; }
.w3-whitecards .w3-iconcard { background: #fff; border-color: rgba(11,13,16,.10); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.w3-whitecards .w3-iconcard h3 { color: var(--w3-invert-ink); }
.w3-whitecards .w3-iconcard p { color: var(--w3-invert-ink2); }
.w3-whitecards .w3-iconcard__ic { background: rgba(11,13,16,.05); color: var(--w3-invert-accent); }

/* ② Compatibility & FAQ —— 保持深底（与上面的白卡段形成呼吸），但做真分层 + accent 提亮 */
/* v6:盒模型归 .ab-card;蓝色左竖条(::before)一并退场 —— About 页零彩色。 */
.faq-flat__item h3 { color: var(--w3-text); font-size: var(--w3-fs-lead); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; line-height: 1.35; }
.faq-flat__item p { color: var(--w3-text2); font-size: var(--w3-fs-compact); line-height: 1.7; margin: 0; }
.about-disclaimer { max-width: 720px; }

/* ③ Partner —— v3 是一句话+一个按钮（所以显空）。改成真收尾转化块：三条路径 + 主次出口 */
.about-partner-close { padding-top: 96px; padding-bottom: 104px; }
.about-partner__lead { margin: 16px 0 0; font-size: var(--w3-fs-body); line-height: 1.6; color: var(--w3-text2); }
.about-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; margin-top: 46px; }
.about-path { padding: 24px 24px 24px 26px; border-left: 2px solid var(--w3-line); }
.about-path__n { display: block; font-size: var(--w3-fs-small); font-weight: 700; letter-spacing: .14em; color: var(--w3-accent); margin-bottom: 10px; }
.about-path h3 { font-size: var(--w3-fs-h3); font-weight: 700; color: var(--w3-text); margin: 0 0 8px; letter-spacing: -0.015em; }
.about-path p { font-size: var(--w3-fs-compact); line-height: 1.6; color: var(--w3-text3); margin: 0; }
.about-partner__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 44px; }

@media (max-width: 767px) {
  .about-oem-light, .about-partner-close { padding-top: 60px; padding-bottom: 60px; }
  .about-paths { grid-template-columns: 1fr; gap: 8px; }
  .about-path { padding: 18px 0 18px 20px; }
}

/* ── Guides 场景横切带(#85)：任务轴仍是唯一浏览逻辑(§3.2e)，这条是【横切入口】，
   指向 /solutions/{场景}/ 而不是新建第二套 Guides 轴。只出现在 Guides 首页。 */
.guides-scenes { margin: 72px 0 8px; }
.guides-scenes__h { font-size: var(--w3-fs-h1); line-height: 1.15; letter-spacing: -0.025em; color: var(--w3-text); margin: 0 0 10px; }
.guides-scenes__sub { font-size: var(--w3-fs-body); line-height: 1.6; color: var(--w3-text2); margin: 0 0 26px; max-width: 620px; }
.guides-scenes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.guides-scene { position: relative; display: block; padding: 24px 22px 42px; border-radius: var(--w3-radius);
  background: var(--w3-surface-2); border: 1px solid var(--w3-line); border-top: 1px solid var(--w3-edge-top);
  box-shadow: var(--w3-elev-card); text-decoration: none;
  transition: transform .3s var(--w3-ease), border-color .3s, box-shadow .3s; }
.guides-scene:hover { transform: translateY(-3px); border-color: rgba(125,177,255,.35); box-shadow: 0 16px 32px rgba(0,0,0,.38); }
.guides-scene__n { display: block; font-size: var(--w3-fs-micro); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--w3-accent); margin-bottom: 10px; }
.guides-scene__t { display: block; font-size: var(--w3-fs-lead); font-weight: 700; color: var(--w3-text); letter-spacing: -0.015em; margin-bottom: 8px; }
.guides-scene__d { display: block; font-size: var(--w3-fs-compact); line-height: 1.6; color: var(--w3-text2); }
.guides-scene__arw { position: absolute; right: 20px; bottom: 16px; color: var(--w3-text3); transition: color .3s, transform .3s; }
.guides-scene:hover .guides-scene__arw { color: var(--w3-accent); transform: translateX(3px); }
@media (max-width: 767px) { .guides-scenes { margin-top: 48px; } .guides-scenes__grid { grid-template-columns: 1fr; } }

/* PDP 兼容入口(体检 #1)——买家第一个决定"配不配我的终端"的结构化出口。
   刻意做成克制的文字链而不是大按钮:页面已有主 CTA(Request a quote),这条不该抢它。 */
.product-compat-link { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px;
  font-size: var(--w3-fs-compact); font-weight: 600; color: var(--w3-accent); text-decoration: none;
  transition: gap .25s var(--w3-ease), opacity .25s; }
.product-compat-link:hover { gap: 10px; opacity: .85; color: var(--w3-accent); }

/* ── About 下半段「削版式」(Joe: 白卡做成了小补丁不是焦点提亮) ──────────────
   诊断:病不在白卡这个手法,在【内容量撑不起版式】—— 4 张卡每张只有「标题+约6词」,
   贴在一起像四块创可贴;3 步流程同理。上半段之所以成立,是它有 6 数字+6 工厂照+5 步质检+4 认证
   = 有真东西。所以这里把版式削到与内容相称,而不是给内容注水(新编内容会踩内容准确红线)。
   → 4 卡合成一个紧凑定义列表、3 步合成一条序列、二者同属一个饱满的块。 */
/* ⚠️ 叫 .about-oemcaps 不叫 .about-caps:1203 行已有一个同名组件(数字网格 1fr 1fr)。
   上一版撞了名又没重设 columns → 这些行继承了它的两列,每行只拿到一半宽。 */
.about-oemcaps { display: grid; grid-template-columns: 1fr; gap: 0; margin: 18px 0 0; }
.about-oemcaps__row { display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 18px;
  padding: 15px 2px; border-top: 1px solid var(--w3-line); }
.about-oemcaps__row:first-child { border-top: 0; }
.about-oemcaps__row dt { font-size: var(--w3-fs-body); font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--w3-text); }
.about-oemcaps__row dd { font-size: var(--w3-fs-compact); line-height: 1.6; margin: 0; color: var(--w3-text2); }
@media (max-width: 560px) { .about-oemcaps__row { grid-template-columns: 1fr; gap: 4px; } }

/* 整块做成一张真白卡。上一版的白底是 .w3-iconcard 给的,我换掉那个类时只搬走了深色墨,
   白底留在了原地 —— 深墨落深底,标题就此消失。底和墨必须一起搬。 */
.w3-whitecards .about-oemblock { background: #fff; border-radius: 16px; padding: 26px 30px;
  border: 1px solid rgba(11,13,16,.10); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.w3-whitecards .about-oemblock .about-oemodm__head { color: var(--w3-invert-ink2); }
.w3-whitecards .about-oemcaps__row { border-color: rgba(11,13,16,.14); }
.w3-whitecards .about-oemcaps__row dt { color: var(--w3-invert-ink); }
.w3-whitecards .about-oemcaps__row dd { color: var(--w3-invert-ink2); }
@media (max-width: 560px) { .w3-whitecards .about-oemblock { padding: 20px 18px; } }

.about-steps { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
/* ⚠️ 别把这条 li 改回 grid/flex。上一版是 grid + `28px 1fr`,而 li 里有三个子项
   (序号 span、<b>、以及【裸文本节点】)—— 裸文本成了匿名网格项、掉进 28px 那一列,
   于是每个单词占一行。block + 绝对定位序号,内联内容有几个都不影响。 */
.about-steps li { position: relative; display: block; padding-left: 36px;
  font-size: var(--w3-fs-compact); line-height: 1.65; color: var(--w3-text2); }
/* ⚠️ 底层直接给单色,不再依赖 .w3-whitecards 之类的【上下文覆盖】——
   上下文一旦消失(v8 把白卡换成深色面板),覆盖静默失效、底层的 accent 蓝就露出来。
   今天已经栽过同一根:白底来自 .w3-iconcard 的上下文,换类后只搬了墨没搬底。
   **别把"最终值"寄存在上下文里。** */
.about-steps__n { position: absolute; left: 0; top: 1px; background: var(--w3-surface-2);
  border: 1px solid var(--w3-line2); color: var(--w3-text);
  display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  /* ⚠️ 这里原本还有一次 `background: var(--w3-accent); color:#fff` —— 同一条规则里的【后置声明】,
     它赢的不是选择器优先级,是【源码顺序】。今天第一次修根只在块首加了单色,验收仍读出蓝。
     教训:改一个属性前先看【整块】,不只是看有没有别的选择器也在管它。 */
  border-radius: 50%; font-size: var(--w3-fs-small); font-weight: 700; }
.about-steps b { font-weight: 700; margin-right: 6px; color: var(--w3-text); }
.w3-whitecards .about-steps li { color: var(--w3-invert-ink2); }
.w3-whitecards .about-steps b { color: var(--w3-invert-ink); }
/* v6:零彩色 —— 序号圆点跟随墨色,不用 accent(原 invert-accent 是蓝) */
/* .w3-whitecards 上下文在 About 已不存在(v8),这条留着只会误导 —— 底层已是单色。 */

/* Partner 的"三合一成一行"版(含 max-width:860 与项目符号)已随 v5 三卡退役,见下方 v5 段。 */

/* ── About v5(Joe 亲列 7 条)────────────────────────────────────────────────
   🔴 本段的硬性不变量:每个进 .w3-whitecards 白名单的卡片类,
      **底色声明与文字墨色声明必须成对出现**。上一版 About 崩掉的第二个根因就是
      只搬了墨没搬底 —— 深墨落深底、标题整片隐形,而两个改动【各自看都是对的】。
      scripts/whitecards-pair-check.mjs 常驻检查这一条,缺一即红。 */

/* ④ Compatibility & FAQ:3 卡横排,三卡总宽 = 容器宽。
   免责声明整幅一行留在卡上方(法务文案,且 #brand 是 301 目标,id 不动)。 */
.faq-flat { list-style: none; margin: 18px 0 0; display: grid; }
/* v6:见 .ab-card */

/* ⑤ Partner:三条路径 → 三张卡(i18n 本来就是 .t/.d 的卡片形状,没新建键) */
/* 三个并列选项 → 三栏并列(它们是"选一个",不是"依次读") */
.about-partner__ways { list-style: none; margin: 16px 0 0; padding: clamp(22px, 2.6vw, 34px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 32px); }
.about-partner__ways > .w3-panel__row { flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 0; border-bottom: 0; min-width: 0; }
@media (max-width: 860px) { .about-partner__ways { grid-template-columns: 1fr; gap: 0; }
  .about-partner__ways > .w3-panel__row { flex-direction: row; padding: 12px 0;
    border-bottom: 1px solid var(--w3-line); }
  .about-partner__ways > .w3-panel__row:last-child { border-bottom: 0; } }
/* v6:见 .ab-card */
/* 退役旧 .faq-flat 容器时它的外边距一并没了,链接会贴着卡底边。补回呼吸位。 */
.about-faq-more { margin-top: 16px; }
.about-pcard h3 { font-size: var(--w3-fs-lead); font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; }
.about-pcard p { font-size: var(--w3-fs-compact); line-height: 1.6; margin: 0; }

/* ⑦ OEM/ODM 标题拆大小字。副标题是【独立键】不是切出来的:
   es/pt 的 OEM/ODM 夹在句中,切字符串会得到病句。 */
   /* 段标题区仍在深底上,墨不翻 */

/* ⑥ 白名单新增三类卡。底与墨【成对】,顺序写在一起,便于人眼与闸同时核。 */
/* ══ About v8:白卡待遇已退役 ═══════════════════════════════════════════════
   v6 用 .ab-card 统一了"卡片长相",但 Joe 指出 Contact 好看而 About 怎么调都不好看 ——
   量下来差别是【结构】:Contact 2 个深色面板 / 1 个白色元素,About 曾是 0 个面板 / 29 张白卡。
   **白卡是"把一个东西从暗底提出来"的手段;当所有东西都被提出来,就等于没有东西被提出来。**
   → 内容改用共用面板 .w3-panel + 细线分行(见上)。白色只留焦点(Request a quote)。
   ⚠️ 只有【头部规格】留下来:图标与标题同一行(v7),那条在面板结构下同样成立。
   🔴 别把 .ab-card 的白底待遇加回来 —— 已否的删,同流程带那条。 */
.ab-card__hd { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.ab-card__hd > :is(h3, h4, .about-oemodm__head) { margin: 0; min-width: 0; }
.ab-card__ic { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--w3-text3); }
.ab-card__ic svg { width: 100%; height: 100%; }

/* 面板内的行:内容区(标题+描述)统一由 .w3-panel__body 承载 */
.w3-panel__body { flex: 1 1 auto; min-width: 0; }
.w3-panel__body h3, .w3-panel__body h4 { font-size: var(--w3-fs-body); font-weight: 650; color: var(--w3-text); margin: 0 0 4px; letter-spacing: -0.01em; }
.w3-panel__body p { font-size: var(--w3-fs-compact); line-height: 1.65; color: var(--w3-text2); margin: 0; }

/* 数据:6 项细线分行,不是 6 张卡 */
/* 并列数据 → 横排 6 列。竖排时每条都是"数字+标签"一行,六条读起来是六句话;
   横排之后它们才读成【一组指标】。 */
.about-stats { list-style: none; margin: 18px 0 0; padding: clamp(22px, 2.6vw, 34px);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.about-stats .about-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 0; border-bottom: 0; min-width: 0; }
/* ⚠️ 归档改判(2026-07-28):这排数字先按"现状 34px → 最近且不缩小的档 = h1 36"归了档,
   实测 6 列布局下每格只有 168px(1440)/126px(375),而 "600,000+" 在 36px w800 下要 175px —— 溢出 7px。
   **v9 把它从竖排改成 6 列时,可用宽度大幅缩小了,字号必须跟着容器走。**
   它现在的角色是"格子里的数据字",不是"区块标题" —— 归 h2。
   ⚠️ 这不是给它破例,是重新判断它属于哪一档;档本身一个字没动。 */
.about-stat__n { font-size: var(--w3-fs-h2); font-weight: 800; color: var(--w3-text); letter-spacing: -0.03em; line-height: 1.05; }
/* 标签左缘对齐 = 每格自身左对齐(竖排时标签跟在数字后面,六条参差不齐) */
.about-stat__l { font-size: var(--w3-fs-compact); line-height: 1.4; color: var(--w3-text2); }
@media (max-width: 1100px) { .about-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .about-stats { grid-template-columns: repeat(2, 1fr); } }

/* Quality Process:5 行,行首序号承担顺序(连接线 v6 已判掉) */
/* 有顺序的流程 → 横向 5 步。竖排时它和上面那六条数据长得一模一样,读不出"这是个流程"。 */
.about-qp { list-style: none; margin: 18px 0 0; padding: clamp(22px, 2.6vw, 34px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.about-qp .about-qprow { flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 0; border-bottom: 0; min-width: 0; }
@media (max-width: 1100px) { .about-qp { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .about-qp { grid-template-columns: 1fr; }
  .about-qp .about-qprow { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px 0;
    border-bottom: 1px solid var(--w3-line); }
  .about-qp .about-qprow:last-child { border-bottom: 0; } }
.about-qprow__n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--w3-surface-2);
  border: 1px solid var(--w3-line2); color: var(--w3-text); display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--w3-fs-micro); font-weight: 700; }

/* v6 的 QP【卡片】规则(6 列网格 3+2、卡底居中序号)已随 v8 面板结构退役。
   顺序改由行首序号承担;3+2 排布问题在面板里自动消失。 */

/* OEM / ODM:并排两卡。两边内容不等长(4 行 vs 3 步),靠 grid 默认 stretch 等高。 */
/* ⚠️ 刻意【不】用 align-items:stretch 强制等高。OEM 有 4 行带说明、ODM 只有 3 句短句,
   撑到等高之后 ODM 卡下方是一大块空白 —— 比自然的高度差更难看。
   "两卡是一对"由【顶部对齐 + 同宽 + 同一套 .ab-card 规格】维持,不由等高维持。 */
/* 一个面板内两栏,中间一条竖向细线。等高问题自动消失:面板是一个物体,
   两栏长短不同不再读成"一张卡没做完"。 */
.about-oemgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 18px 0 0; align-items: stretch; }
.about-oemgrid > .about-oemcard:first-child { padding-right: clamp(18px, 2.4vw, 30px); border-right: 1px solid var(--w3-line); }
.about-oemgrid > .about-oemcard:last-child { padding-left: clamp(18px, 2.4vw, 30px); }
.about-oemcard { display: flex; flex-direction: column; }
/* 堆叠断点 900→1279:与数字卡转 3 列同一条线 —— 整段【中等宽度】用一个定义,不是一个组件一条线。
   实测:901/es 并排时高度差 419px、1025/es 257px,那已经不成对了;≥1280 并排时差 124-168px,自然。 */
@media (max-width: 1279px) { .about-oemgrid { grid-template-columns: 1fr; }
  .about-oemgrid > .about-oemcard:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--w3-line); padding-bottom: 18px; }
  .about-oemgrid > .about-oemcard:last-child { padding-left: 0; padding-top: 18px; } }

/* ================================================================
   ABOUT SHOWCASE v8 — editorial industrial story.
   The About page intentionally alternates light and dark chapters;
   evidence is staged as photography + typography, not equal cards.
   ================================================================ */
.ab8-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--w3-accent); font-size: var(--w3-fs-micro);
  font-weight: 600; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase;
}
.ab8-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
.ab8-kicker--dark { color: var(--w3-accent); } /* 三种颜色统一到蓝：其余四页只有这一种 */

.ab8-story {
  padding: 132px 0 148px; color: var(--w3-text);
  /* 🔴 必须与 hero 底部渐变的末端同色(--w3-bg),否则 hero 一结束就是一条硬边。
     其它页 hero 之后那块根本不写 background、继承 body,天然无缝——About 对齐它们。 */
  background: var(--w3-bg);
}
.ab8-story__grid {
  display: grid; grid-template-columns: 1fr; gap: 44px;
  align-items: end; margin-bottom: 78px;
}
.ab8-story__statement h2 {
  /* 14ch 与 .ab8-sectionhead 的 12ch、.ab8-independent 的 9ch 是同一类遗留：
     两栏时标题只占半幅才需要收窄。堆叠后它是唯一还在强制折行的东西。
     🔴 字号不动（48px 全站统一），放开宽度。 */
  margin: 24px 0 0; max-width: none; color: var(--w3-text);
  font-size: var(--w3-fs-d2); font-weight: 700; letter-spacing: -.04em; line-height: 1.03;
  text-wrap: balance;
}
.ab8-story__body > p {
  margin: 0; max-width: none; color: var(--w3-text2);
  font-size: var(--w3-fs-body); line-height: 1.8;
}
.ab8-story__location {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 14px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--w3-line);
}
.ab8-story__location span {
  color: var(--w3-text3); font-size: var(--w3-fs-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.ab8-story__location strong { color: var(--w3-text); font-size: var(--w3-fs-compact); font-weight: 650; }
.ab8-story__media { position: relative; margin: 0; border-radius: var(--w3-radius); overflow: hidden; }
.ab8-story__media img {
  display: block; width: 100%; height: clamp(420px,52vw,650px);
  object-fit: cover; object-position: center 48%; border-radius: 2px;
}
.ab8-story__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--w3-line);
}
.ab8-story__media figcaption {
  position: absolute; left: 28px; right: 28px; bottom: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
  color: rgba(255,255,255,.88); font-size: var(--w3-fs-small); line-height: 1.4;
}
/* 图右下角:ENGINEERING & MANUFACTURING + 地名。figcaption 本来就是 space-between,
   所以左边角标不动、这一组自然落右下。 */
/* 已移出图片:左对齐容器左边缘,颜色回到正文那套(图上的白字在页面背景上会过亮)。 */
.ab8-story__where {
  display: flex; align-items: baseline; gap: 10px; margin: 20px 0 0;
  color: var(--w3-text3); font-size: var(--w3-fs-micro);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ab8-story__where b { font-weight: 650; color: var(--w3-text); letter-spacing: 0; text-transform: none; font-size: var(--w3-fs-compact); }
.ab8-story__media figcaption span {
  font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: .16em;
}

.ab8-capabilities { padding: 136px 0 128px; background: var(--w3-bg2); color: var(--w3-text); }
.ab8-sectionhead { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
.ab8-sectionhead .ab8-kicker { grid-column: 1 / -1; margin-bottom: 0; }
.ab8-sectionhead h2 {
  /* 12ch 是左右分栏时代的遗留：标题只占半幅，才需要收窄。
     堆叠之后它成了强制折行的唯一原因（Manufacturing Capability 24 字符 > 12ch）。
     🔴 字号不动（48px 是全站统一值），放开宽度即可。 */
  margin: 0; max-width: none; color: var(--w3-text); font-size: var(--w3-fs-d2);
  font-weight: 700; line-height: 1.03; letter-spacing: -.04em;
}
.ab8-sectionhead > p {
  margin: 0; max-width: 52ch; color: var(--w3-text2);
  font-size: var(--w3-fs-body); line-height: 1.7;
}
.ab8-anchor { position: relative; top: calc(-1 * var(--w3-header-h)); }
/* 🔴 2026-08-01 Joe「大图不太清晰」——查证:六张源图全是 ~505×340,而原本 01 号横跨整幅
   (≈1180px)= 【放大 2.33 倍】,CSS 变不出像素。改 3 列等宽 ⇒ 每格 ≈372px,源图变成缩小
   0.73 倍 → 清晰。要恢复"一张大图"的层次,需要一张 ≥1600px 的工厂原片(Joe 提供)。 */
.ab8-factory {
  display: grid; grid-template-columns: repeat(3,1fr); margin-top: 48px;
  gap: 1px; background: var(--w3-line); border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden;
}
.ab8-factory figure { position: relative; aspect-ratio: 1.45; margin: 0; overflow: hidden; background: var(--w3-panel); }
.ab8-factory img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) contrast(1.04); transition: transform .55s var(--w3-ease), filter .3s;
}
.ab8-factory figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4,5,7,.72));
  pointer-events: none;
}
.ab8-factory figcaption {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 17px;
  display: flex; gap: 12px; align-items: center; color: #fff;
  font-size: var(--w3-fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ab8-factory figcaption span { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
/* 🔴 2026-08-01 Joe:参考首页 About 那组数字的表现形式,并去掉数字上面的分割线。
   与 .w3-stats 同一配方:1px 间隙露出 --w3-line 当格线、格底 --w3-bg2、外框+圆角+裁切。
   原来的 border-top 就是他说的那条分割线,已删。 */
.ab8-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: 72px 0 0; padding: 0;
  background: var(--w3-line); border: 1px solid var(--w3-line);
  border-radius: 14px; overflow: hidden;
}
.ab8-stats div { background: var(--w3-bg2); padding: 22px 24px; }
.ab8-stats dt {
  color: var(--w3-text); font-size: var(--w3-fs-h2); font-weight: 700;
  line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.ab8-stats dd { margin: 8px 0 0; color: var(--w3-text3); font-size: var(--w3-fs-small); line-height: 1.45; }

/* 卡片皮只裹数据(问答条目 / 流程表);标题、按钮、徽章行站在页面背景上。
   ⚠️ 皮从 .container 挪到这里而不是复制一份 —— 值必须只有一个出处,否则两处会各自漂。 */
.ab8-independent__card, .ab8-quality__card {
  display: grid; padding: 0; gap: 1px; background: var(--w3-line); border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden;
}
.ab8-independent__card { grid-column: 1 / -1; }
.ab8-quality { padding: 136px 0 142px; background: var(--w3-bg); color: var(--w3-text); }
.ab8-quality__intro { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.ab8-sectionhead--dark { display: block; }
.ab8-sectionhead--dark h2 { margin-top: 24px; color: var(--w3-text); }
.ab8-sectionhead--dark > p { margin-top: 24px; color: var(--w3-text2); }
.ab8-quality__media { position: relative; margin: 0; overflow: hidden; }
.ab8-quality__media img { display: block; width: 100%; min-height: 420px; object-fit: cover; }
.ab8-quality__media figcaption {
  position: absolute; left: 20px; bottom: 18px; padding: 7px 12px;
  background: rgba(9,11,14,.78); color: #fff; font-size: var(--w3-fs-micro);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.ab8-quality__card { margin-top: 36px; }
.ab8-certs { margin-top: 36px; }
.ab8-process { list-style: none; margin: 0; padding: 0; display: grid; background: var(--w3-bg2); }
.ab8-process li + li::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: var(--w3-line); }
.ab8-process li {
  position: relative;
  display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 26px 40px;
  background: var(--w3-bg2);
}
.ab8-process li > span {
  color: var(--w3-text3); font-size: var(--w3-fs-small); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ab8-process li > div { display: grid; grid-template-columns: minmax(220px,.55fr) 1fr; gap: 48px; }
.ab8-process h3 { margin: 0; color: var(--w3-text); font-size: var(--w3-fs-body); font-weight: 700; line-height: 1.4; }
.ab8-process p { margin: 0; color: var(--w3-text2); font-size: var(--w3-fs-compact); line-height: 1.7; }
.ab8-certs {
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  margin-top: 46px;
}
.ab8-certs > span { color: var(--w3-text3); font-size: var(--w3-fs-micro); font-weight: 600; letter-spacing: .15em; }
.ab8-certs > div { display: flex; flex-wrap: wrap; gap: 8px; }
.ab8-certs strong {
  min-width: 76px; padding: 10px 16px; border: 1px solid var(--w3-line); border-radius: var(--w3-radius-s);
  color: var(--w3-text); text-align: center; font-size: var(--w3-fs-small); font-weight: 700;
}

.ab8-oem { padding: 136px 0 142px; background: var(--w3-bg2); }
.ab8-oem__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; gap: 1px; background: var(--w3-line); border: 1px solid var(--w3-line); border-radius: 14px; overflow: hidden; }
.ab8-oem__grid article {
  position: relative; min-height: 0; padding: clamp(34px,4vw,56px);
  background: var(--w3-bg2); color: var(--w3-text); overflow: hidden;
}
.ab8-oem__number {
  position: absolute; top: 20px; right: 26px; color: rgba(255,255,255,.07);
  font-size: var(--w3-fs-d1); font-weight: 800; line-height: 1; letter-spacing: -.08em;
  transform: scale(1.75); transform-origin: top right;
}
.ab8-oem__grid h3 {
  position: relative; margin: 0 0 40px; color: var(--w3-text);
  font-size: var(--w3-fs-h1); font-weight: 700; letter-spacing: -.035em;
}
.ab8-oem__grid ol { position: relative; list-style: none; margin: 0; padding: 0; }
.ab8-oem__grid li {
  display: grid; grid-template-columns: minmax(150px,.55fr) 1fr; gap: 24px;
  padding: 16px 0; border-top: 1px solid var(--w3-line);
}
.ab8-oem__grid li b { color: var(--w3-text); font-size: var(--w3-fs-compact); line-height: 1.45; }
.ab8-oem__grid li span { color: var(--w3-text3); font-size: var(--w3-fs-small); line-height: 1.55; }

/* About 板块底色 = 全站两值交替 --w3-bg ↔ --w3-bg2(见 DESIGN.md §板块分隔)。
   2026-08-01 之前这里是 5 个各不相同的写死值(#090b0e/#0c0f13/#080a0d/#10141a + surface-1),
   跨度只有 8 个灰阶 —— 看不出差别,却又都不一样,既不一致也不成节奏。 */
.ab8-independent { padding: 88px 0; background: var(--w3-bg); color: var(--w3-text); }
.ab8-independent__inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 30px 24px; align-items: start; padding-top: 0;
}
.ab8-independent h2 {
  /* 同上：9ch 是分栏遗留。移动端本来就写着 max-width: none，这里与它对齐。 */
  margin: 22px 0 0; max-width: none; color: var(--w3-text);
  font-size: var(--w3-fs-h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.06;
}
.ab8-independent .faq-flat { margin: 0; padding: 0; display: grid; background: var(--w3-bg2); }
.ab8-independent .faq-flat li + li::before { content: ""; position: absolute; top: 0; left: 40px; right: 40px; height: 1px; background: var(--w3-line); }
.ab8-independent .faq-flat li { position: relative; padding: 26px 40px; margin: 0; background: var(--w3-bg2); }
.ab8-independent .faq-flat h3 { margin: 0 0 8px; color: var(--w3-text); font-size: var(--w3-fs-compact); font-weight: 650; }
.ab8-independent .faq-flat p { margin: 0; color: var(--w3-text3); font-size: var(--w3-fs-small); line-height: 1.6; }
.ab8-independent .w3-link-arrow { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin-top: 8px; }
/* 按钮占满整行。⚠️ 这里原本还列了 .faq-flat —— 2026-08-01 起它嵌在 .ab8-independent__card
   里面(卡壳自己已有 grid-column: 1/-1),那半条对孙元素无效,已删。 */
.ab8-independent .about-partner__actions { grid-column: 1 / -1; }

@media (max-width: 980px) {
  .ab8-story, .ab8-capabilities, .ab8-quality, .ab8-oem { padding-top: 96px; padding-bottom: 100px; }
  .ab8-story__grid, .ab8-quality__intro { grid-template-columns: 1fr; gap: 44px; }
  .ab8-story__statement h2 { max-width: 17ch; }
  .ab8-sectionhead { grid-template-columns: 1fr; gap: 24px; }
  .ab8-sectionhead .ab8-kicker { margin-bottom: 0; }
  .ab8-factory { grid-auto-rows: auto; }
  .ab8-stats { grid-template-columns: repeat(3,1fr); row-gap: 28px; }
  .ab8-oem__grid { grid-template-columns: 1fr; }
  .ab8-oem__grid article { min-height: 0; }
  .ab8-independent__inner { grid-template-columns: 1fr; gap: 46px; }
  .ab8-independent h2 { max-width: none; }
  .ab8-independent .w3-link-arrow { grid-column: 1; }
}

@media (max-width: 700px) {
  .ab8-story, .ab8-capabilities, .ab8-quality, .ab8-oem { padding-top: 74px; padding-bottom: 78px; }
  .ab8-story__grid { margin-bottom: 48px; }
  .ab8-story__location { grid-template-columns: 1fr; gap: 6px; }
  .ab8-story__media img { height: 360px; }
  .ab8-story__media figcaption { left: 18px; right: 18px; bottom: 16px; align-items: flex-end; }
  /* 窄屏 2 列。原本这里还有三条对 __feature/__wide 的跨列覆盖和一组固定行高 ——
     2026-08-01 六张图改等宽之后那些类已从模板删除,规则跟着退役(留着就是指向不存在的类)。 */
  .ab8-factory { grid-template-columns: 1fr 1fr; margin-top: 44px; }   /* gap 由桌面那条的 1px 继承 —— 窄屏原本留着 8px,是带间隙时代的残留 */
  .ab8-factory figcaption { left: 12px; right: 12px; bottom: 10px; font-size: var(--w3-fs-micro); }
  .ab8-stats { grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .ab8-stats dt { font-size: var(--w3-fs-h3); }
  .ab8-quality__media img { min-height: 300px; }
  .ab8-process { margin-top: 54px; }
  .ab8-process li { grid-template-columns: 44px 1fr; padding: 22px 22px; }
  .ab8-process li + li::before, .ab8-independent .faq-flat li + li::before { left: 22px; right: 22px; }
  .ab8-independent .faq-flat li { padding: 22px 22px; }
  .ab8-process li > div { grid-template-columns: 1fr; gap: 8px; }
  .ab8-certs { align-items: flex-start; flex-direction: column; }
  .ab8-oem__grid article { padding: 30px 22px; }
  .ab8-oem__number { transform: scale(1.22); }
  .ab8-oem__grid h3 { margin: 50px 0 34px; }
  .ab8-oem__grid li { grid-template-columns: 1fr; gap: 5px; }
  .ab8-independent { padding: 64px 0; }
}

/* PDP 适配徽章〔#52 契约〕:买家的第一个决定是"这个配不配我的终端"。数据是机型 slug,
   显示名 model_display > categories.display。**产品没填 compatible_with 就整块不出现**——
   这条是内容红线的一部分(没写清的不显示,不编),不是可选的样式细节。 */
.pdp-compat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 2px; }
.pdp-compat__lbl { font-size: var(--w3-fs-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w3-text3); }
.pdp-compat__b { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--w3-line2); background: var(--w3-surface-2); color: var(--w3-text);
  font-size: var(--w3-fs-small); font-weight: 600; }

/* Compatibility & FAQ:暗卡原本缩在左侧、右边一大片空 → 撑满 */
#brand .about-disclaimer { max-width: none; }

/* ══ 语种覆盖(必须排在文件最末)═════════════════════════════════════════
   2026-08-01 多语言窗口指出:下面这条与若干 `.xxx h2` 同特异性,而那些排在它后面,
   理论上能赢(真机实测当前没赢,computed letterSpacing 全 normal)。
   修法不是把选择器写得更长去打特异性升级战 —— **语种覆盖天然属于层叠的最后一层**,
   挪到文件末尾,同特异性时靠顺序取胜,以后新增任何组件规则都不会再压过它。 */
/* ---- CJK 字距 ---------------------------------------------------------
   2026-08-01 Joe 指出:中文大标题「配件一站式解决方案」字与字挤在一起,而 eyebrow
   「独立制造商 · OEM/ODM」间隔正常。
   病因不是中文字体,是【负字距】:全站标题用 letter-spacing -0.02 ~ -0.03em。
   那是给拉丁字母收紧字怀的手法 —— 拉丁字形两侧本来就有空白,收紧才紧凑;
   汉字是等宽方块字,字面已经顶到字身框,再收就是让笔画互相贴上去。
   (eyebrow 之所以正常,是因为它用的是 +0.22em 正字距。)
   ⇒ zh 下把【展示级标题】的负字距归零。混排的拉丁词(Starlink)在 0 上也是正常值,
     不需要也不应该为它保留负值 —— 一个标题只能有一个字距。
   ⚠️ 只治 h1/h2/h3 这一档。卡片小标题那批 -0.01em 在 14~16px 上肉眼无感,不动。 */
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="zh"] h3,
html[lang="zh"] .w3-h1, html[lang="zh"] .w3-h2, html[lang="zh"] .w3-h3,
html[lang="zh"] .page-header__title,
html[lang="zh"] .w3-scene-panel__line,
html[lang="zh"] .title-product,
html[lang="zh"] .w3-pvideo__title { letter-spacing: 0; }