/* ============================================================================
   site.css — MTPEAK 官网页 · 内容详情（新闻）屏
   ----------------------------------------------------------------------------
   方案 A：固定桌面 1440，桌面端像素还原设计稿。
   数据来源：out/spec.json（由 sketch_extract.py 从 .sketch 解析）
   视觉基准：ref/news_1440.png（PDF示意图.pdf 第 6 页）

   布局策略（关键）：
     · 水平方向 —— 每个区块用设计稿的精确 x 与宽度（不留 auto 居中），
       因为设计稿里标题/分隔线/正文的横向中心其实并不在同一根轴上：
         分隔线 中心 723 / 正文 中心 712.55 / 标题 中心 738.1
       强行统一居中会让像素比对崩掉。
     · 垂直方向 —— 改为文档流（padding + margin 累加），而不是逐元素绝对定位。
       设计稿里内容区恰好 800px（= 2 段 × 5 行 × 45px 行高），是「这批占位文案」
       的巧合。改成流式后，设计文案下仍是 800px（像素一致），真实长文章则自然撑开。

   坐标基准：设计稿画板内坐标，画板 1440×1100，原点左上角。
   ============================================================================ */

/* ---------- 字体 ----------
   子集化产物：由 subset_fonts.py 从全站 7 屏文本抽取 114 个唯一字符生成，
   46MB TTF -> 81KB woff2。文案改版后必须重跑子集化脚本，否则新增字符掉字。
   字体与站点同源（不放 OSS）：@font-face 是 CORS 敏感资源，实测 OSS 未返回
   Access-Control-Allow-Origin，跨域加载会被拒并静默退化成系统字体。 */
@font-face {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 300; font-style: normal; font-display: block;
  src: url(../fonts/subset/AlibabaPuHuiTi-Light.woff2) format('woff2');
}
@font-face {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 400; font-style: normal; font-display: block;
  src: url(../fonts/subset/AlibabaPuHuiTi-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Alibaba PuHuiTi';
  font-weight: 700; font-style: normal; font-display: block;
  src: url(../fonts/subset/AlibabaPuHuiTi-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Sans SC';
  font-weight: 100 900; font-style: normal; font-display: block;
  src: url(../fonts/subset/NotoSansSC.woff2) format('woff2');
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #0C0D0F; }
/* 【第 17 轮·设计师反馈】原来用 body{display:flex;justify-content:center} 居中。
   问题：视口窄于 1440 时，flex 居中会让内容**向两侧平均溢出**，
   而滚动条只能向右滚 → **左侧那部分永远看不到**（设计师就因此在 image10 里把 `Is a ` 看漏了）。
   改成块级 + margin-left 取 max(0, 剩余空间/2)：
     视口 ≥1440 → 正常居中；视口 <1440 → 左对齐溢出，可以向右滚动看全。 */
body { display: block; }

.stage {
  position: relative;
  width: 1440px;
  margin-left: max(0px, calc((100% - 1440px) / 2));
  min-height: 1100px;                      /* 设计稿画板高度；长文章时自然增长 */
  background: #17191C;                     /* data-layer: 矩形 1440×1100 #17191C */
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* 【2026-10-09】宽度适配：视口 ≠1440 时 fit.js 给 body 加 CSS zoom 等比缩放整站，
   此时 .stage 必须取消居中偏移 —— 否则 margin-left 会按 1440 基准算出 240px 一类的
   偏移再被 zoom 放大，把画板推出视口。scale===1（视口恰为 1440）时不加 data-fit，
   本规则不生效 ⇒ 像素验收基线不受影响。详见 assets/js/fit.js。 */
html[data-fit="1"] .stage { margin-left: 0; }
html[data-fit="1"] { overflow-x: hidden; }
/* 定位策略：导航栏用 sticky 吸顶；页脚参与文档流跟随正文长度。
   两者的子元素一律被子元素定位需要，统一声明 absolute。

   【第 17 轮·设计师反馈】「导航栏吸顶固定」——
   最早用 JS 把 top 跟随 scrollY，但 scroll 事件在无头环境不派发、没法自动化验证；
   改用纯 CSS sticky 更稳（真实浏览器与无头都生效）：
     · position:sticky + top:0 负责吸顶
     · margin-bottom:-60px 抵消自身高度，让首屏 Hero 仍从 y0 开始（与设计稿一致）
     · z-index 保证盖在内容之上（原来是靠「排在 HTML 最后」自然叠在上层，
       现在 nav 移到了 .stage 首位，必须显式给 z-index）
   为此 <header class="nav"> 已挪到 .stage 的第一个子元素（5 个页面都改了）。 */
.stage > .nav { position: sticky; top: 0; margin-bottom: -60px; z-index: 100; }
.stage > .footer { position: relative; }
.stage > .nav > *,
.stage > .footer > * { position: absolute; }

/* ============================================================================
   正文区
   垂直节奏（设计稿实测，单位 px）：
     顶部留白 86 → 标题 60(86..146) → 15 → 分隔线 1(161..162)
     → 64 → 正文 226..676 → 59 → 分隔线 1(735..736) → 64 → 内容区底 800
   合计 86+60+15+1+64+450+59+1+64 = 800
   ============================================================================ */
.article {
  padding: 86px 0 64px;
  min-height: 800px;
}

/* ---------- 标题 ---------- */
.article-title {
  /* 【第 17 轮·自我核查补修】长标题会被画板裁掉。
     原 width:228.2px + white-space:nowrap：占位文案「News headline」正好 228px 所以看不出问题；
     但真实标题远长于它时，nowrap 让文字**只能朝右溢出**，而 text-align:center 在溢出状态下
     无法再居中 —— 左边缘钉在 624，右端一路撞到画板边。实测中文标题中心 1011.5（应 738.1）、
     英文 1033.0 且右端 x1439 已被切。
     改法：加宽到 1200 并把中心轴挪回 738.1（margin-left = 738.1 − 1200/2 = 138.1），
     允许换行。对 ?data=design 基线零影响 —— 占位文案是单行，line-height 撑满 min-height，
     高度与中心都不变。 */
  margin-left: 138.1px;
  width: 1200px;
  height: auto;
  min-height: 60px;
  white-space: normal;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 60px;
  letter-spacing: 1px;
  text-align: center;
  color: #FFFFFF;
}

/* ---------- 发布时间（2026-10-20 新增，仅静态文章页使用） ---------- */
/* 版式 A：标题下方居中，14px / 白 55% / 字距 2px。
   中轴必须与 .article-title 一致（margin-left 138.1 + width 1200 → 中心 738.1）。
   只写 text-align:center 会以 .article 的 1440 宽居中、中心落到 720，比标题偏左 18px。 */
.article-date {
  margin: 8px 0 0 138.1px;
  width: 1200px;
  text-align: center;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- 分隔线 ---------- */
.rule {                                     /* data-layer: 矢量 12095 / 12093 */
  margin-left: 67px;
  width: 1312px;
  height: 1px;
  background: #BBBBBB;
}
.rule-1 { margin-top: 15px; }
.rule-2 { margin-top: 59px; }

/* ---------- 正文（富文本） ---------- */
.article-body {
  margin-left: 220px;                      /* data-layer: Please enter the full news content… */
  width: 985.1px;
  margin-top: 64px;
  /* 不设 min-height：设计稿正文区 450px 是「2 段 × 5 行 × 45px 行高」算出来的巧合，
     真实文章行数不同。设成兜底值会让短文章下方空出一截（实测 8 行真实正文会多出 90px）。
     设计基线内容本身就渲染 450px，所以去掉它不影响 ?data=design 的像素对齐。 */
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 45px;                       /* 设计稿行高 */
  letter-spacing: 1px;
  color: #FFFFFF;
  text-align: left;
}
/* 富文本段落：设计稿两段之间无额外间距（451 − 226 = 225 = 5 行 × 45） */
.article-body p { margin: 0; }
/* 以下元素设计稿里没有（「新闻」屏只有纯文本），是按同一套字级补的。
   因此不影响 ?data=design 的像素对齐 —— 设计原文只含 <p>。 */
.article-body h2 {
  font-size: 24px; font-weight: 700; line-height: 40px; letter-spacing: 1px;
  margin: 36px 0 4px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-size: 20px; font-weight: 700; line-height: 36px; letter-spacing: 1px;
  margin: 28px 0 2px;
}
.article-body h3:first-child { margin-top: 0; }
.article-body ul, .article-body ol { margin: 8px 0; padding-left: 1.6em; }
.article-body li { line-height: 45px; }
.article-body blockquote {
  margin: 16px 0; padding: 4px 0 4px 20px;
  border-left: 2px solid #BBBBBB; color: rgba(255, 255, 255, 0.88);
}
.article-body hr { border: 0; height: 1px; background: #BBBBBB; margin: 28px 0; }
.article-body a { color: #E24B4A; text-decoration: underline; }
.article-body img { max-width: 985.1px; height: auto; display: block; margin: 16px 0; }
/* 规格参数表：设计稿的 SPECIFICATIONS 屏是两列排布，这里用表格承载 */
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-body td, .article-body th {
  padding: 10px 16px; font-size: 16px; line-height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  vertical-align: top; text-align: left;
}
.article-body td:first-child {
  width: 220px; white-space: nowrap; color: rgba(255, 255, 255, 0.62);
}
.article-body tr:last-child td { border-bottom: 0; }

/* ---------- 加载 / 降级状态 ---------- */
body[data-state="loading"] .article-title,
body[data-state="loading"] .article-body { color: transparent; }
body[data-state="loading"] .article-title::after {
  content: ''; display: block; width: 160px; height: 18px;
  margin: 21px auto 0; background: rgba(255,255,255,0.06);
}
body[data-state="loading"] .article-body::after {
  content: ''; display: block; width: 100%; height: 12px;
  background: rgba(255,255,255,0.05);
}
/* 降级提示条：仅在接口失败且回落到设计基线时出现，不参与像素基线 */
.notice {
  position: absolute; left: 67px; top: 118px; width: 1312px;
  font-family: 'Alibaba PuHuiTi', sans-serif;
  font-size: 12px; line-height: 18px; color: #EF9F27;
  display: none;
}
body[data-state="fallback"] .notice { display: block; }

/* ============================================================================
   首页 —— 首屏 Hero + 五个内容块 + 页脚
   ----------------------------------------------------------------------------
   版式来源：.sketch 画板「首页（改）」1440×5100（见 out/spec.json）
   视觉基准：../ref/home/full.png（PDF示意图.pdf 第 1 页）

   区块结构（画板内 y）：
     导航栏  覆盖在 Hero 上（absolute，不占高度）
     Hero        0..800     背景图 + rgba(0,0,0,.4) 遮罩 + 转曲字标 + 副标题
     内容—设计   800..1600  背景图 + rgba(0,0,0,.5) 遮罩 + 左对齐文字
     内容—工程   1600..2400 浅底背景图 + 深色文字（本条是唯一的浅色块）
     内容—定制   2400..3200 背景图 + 左对齐文字
     内容—制造   3200..4000 米色底 + 846×553 图 + 右侧 rgba(0,0,0,.3) 灰块（文字压在灰块上）
     内容—动态   4000..4800 背景图 + 左对齐文字
     页脚       4800..5100

   文字元素各自绝对定位，坐标 = 画板坐标 − 本区块起始 y，与内容详情页同一套做法。
   ============================================================================ */

.hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #17191C;
}
/* ---------------------------------------------------------------------------
   背景图统一用 background 表达（不用 <img> + object-fit）。
   原因：设计稿里这些图片填充是「cover 之后再额外缩放 + 精确偏移」，
   object-fit 只能表达 cover/contain/fill 三种固定行为，表达不了任意缩放比例。
   background-size 可给具体像素、background-position 可给精确像素，才能还原。

   参数来源：以 PDF 基准图逐像素反推（详见 out/home-fidelity.md）。
   原图尺寸 → 目标显示宽 → 垂直偏移：
   --------------------------------------------------------------------------- */

.hero__bg {                                  /* 素材 1440×800 —— 与画板同尺寸，1:1 落位 */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  /* 【2026-10-07 换图】设计师给了新的首页背景图（1440×800，正好等于画板）。
     新图是**已经调好色的成片**，不再需要缩放/偏移补偿。

     与设计基准 out/newpdf/01-home.png 的 hero 区域（0.5x）逐像素比：
       区域            MAE     新图亮度   基准亮度
       左上暗部        5.65      42.7      42.9
       车身中部        3.92      38.2      37.6
       右侧暗部        2.76      10.4      10.3
       底部            5.28      27.7      27.1
       整幅            6.54      25.6      28.7
     纯背景区域 MAE 全在 3~6（≈重采样噪声），亮度差 ≤0.6 —— 就是同一张图。

     差异只在字标区（MAE 107）和标语区（MAE 37）：那是设计稿里有、素材里没有的白字，
     由本页的 .hero__wordmark / .hero__slogan 两个 HTML 元素叠上去还原。

     旧实现（2880×2168 素材 + size 1131px + pos -86,-47 + 0.4 遮罩）
     是为旧素材做的裁切补偿，换图后不再适用，已一并去掉。 */
  background-size: 1440px 800px;
  background-position: 0 0;
}
.hero__scrim {
  /* 【2026-10-07 归零】原本是 data-layer「矩形 1440×800 rgba(0,0,0,.4)」。
     新背景图的暗调**已经烤进图片本身**，再叠 0.4 会把整幅压到亮度 15.4，
     而设计基准是 28.7（整幅 MAE 从 6.54 恶化到 13.68）。故作透明保留元素：
     结构不变、可一行回退，也避免以后换图时误以为这里还有遮罩。 */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background: transparent;
}
/* 字标：设计稿里是转曲矢量（画板「主页」的 矢量 12147-12152，fill=#FFFFFF，墨迹 x463-976 / y222-276）。
   asset.zip 导出的 MTPEAK2.svg（531×62）形状一致，但填充是深红 rgb(138,17,25) ——
   那是同一字标在别处的实例。这里用 filter 强制转白，避免去改动原始素材。
   SVG 含约 8.5px 左右 / 3.5px 上下留白，故左上角取 463-8.5 / 222-3.5。 */
.hero__wordmark {
  position: absolute; left: 454px; top: 218px;
  width: 531px; height: 62px; display: block;
  filter: brightness(0) invert(1);
}
/* 【SEO 2026-10-20】字标外层的 H1：只承担语义，不参与布局。
   清零 h1 的浏览器默认 margin，高度设为 0（内部 img 是 absolute，不靠它撑高）；
   首屏其余元素也都是 absolute，所以这个盒子占不占位对视觉没有影响。 */
.hero__title {
  margin: 0; padding: 0; height: 0;
  font-size: 0; line-height: 0; font-weight: normal;
}
/* 副标题同为转曲矢量，无字体信息。按白色墨迹实测反推：
   墨迹 x611-828（宽 218）/ y307-317（高 11）→ 字号约 15px；
   但 15px 下自然字距只有约 180px 宽，差 38px，故补 letter-spacing 1.5px。 */
.hero__slogan {
  /* 【第 17 轮·设计师反馈】「是 UI，不是文字」——
     原为 <p> 文字，现改用设计师导出的转曲图形 asset.zip/_x0020_10.svg 的白色版
     （assets/img/race-to-feel.svg，viewBox 1158.71×59.1467）。
     设计稿实测：本行 x611..828 宽 218、中心 719.5 → 按 19.59 比例，高 218/19.59 = 11.13，
     与原 font-size:15px 的字高吻合，位置尺寸都不用动。 */
  position: absolute; left: 611px; top: 306px; width: 218px;
  display: block;
}

.feature {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #17191C;
}
.feature__bg {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  background-size: 1440px auto;              /* cover 等效（各图宽度均为限制边） */
  background-position: center -320px;        /* cover 居中 = 上移 (图高−800)/2 */
}
/* 01 DESIGN：原图 2880×2880 → 图高 1440，居中偏移 −320（实测 1.23%） */
.feature--design .feature__bg { background-position: center -320px; }
/* 03 CUSTOMIZATION：原图 2879×2880。
   参数由【盾牌白边几何测量】确定（三个阈值 120/150/180 结果一致）：
   缩放 0.4995 → 显示宽约 1438px；偏移约 (-88, -300)。
   注意：用「差异像素占比」做扫描会给出相反的结论（认为越小越好），
   因为该块 88% 是暗色区，指标在暗区不敏感、只看亮区又受块边界截断干扰。
   —— 这类「大面积暗色 + 一个亮主体」的图，必须用特征点几何测量，不能用差异占比调参。 */
.feature--custom .feature__bg { background-size: 1440px auto; background-position: center -300px; }
/* 02 ENGINEERING：原图正好 1440×800，无需裁切（实测 1.10%） */
.feature--engineer .feature__bg { background-size: 1440px 800px; background-position: 0 0; }
/* 05 NEWS：原图 2160×2880 → cover 后图高 1920，实测设计稿显示的是 y425 处而非居中 560 */
/* 【2026-10-15 换图】旧的红色车影是 2160×2880 竖图，靠 center -425px 取中间一段；
   新素材是 EICMA 展台示意图，**1440×800 与展示区同尺寸**，1:1 落位即可。
   实测与设计稿画板 y4000–4800 吻合：不匹配率 0.92%、平均通道差 2.13
   （对比：旧图同区间不匹配率 70.91%）。 */
.feature--news .feature__bg { background-size: 1440px 800px; background-position: 0 0; }
.feature__scrim {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
}
.feature--light { background: #F5F1E8; }     /* 工程块：背景图本身是米色，此处兜底 */

/* 制造块：米色底 + 一张不铺满的图 + 右侧半透明灰块（文字压在灰块上） */
.feature--manuf { background: #F5F1E8; }
.feature__photo {                            /* data-layer: 矩形 6 846×553 @(66,123) */
  position: absolute; left: 66px; top: 123px;
  width: 846px; height: 553px; display: block;
}
.feature__panel {                            /* data-layer: 容器 6 800×300 @(640,277) */
  position: absolute; left: 640px; top: 277px;
  width: 800px; height: 300px;
  background: rgba(0, 0, 0, 0.3);
}

/* ---------- 内容块文字 ---------- */
.f-eyebrow {                                 /* data-layer: 01/DESIGN 等编号 */
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【第 17 轮·设计师反馈】「序号是红色，标题文字和正文同色」——
     原实现整串 01/DESIGN 都是品牌红（#8A110F）。设计稿里红框只圈了「/ENGINEERING」，
     「02」保持红。现拆成两段：序号用品牌红，其余跟随正文色（与 .f-desc 一致）。 */
  font-size: 24px; font-weight: 300; line-height: 32.93px; letter-spacing: 0;
  color: #FFFFFF; white-space: nowrap;
}
.f-eyebrow__num { color: #8A110F; }
/* 浅底块（首页「02/ENGINEERING」在米色底上）的正文色是 #17191C */
.feature--light .f-eyebrow { color: #17191C; }
.f-title {                                   /* data-layer: CARBON BODYWORK 等标题 */
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 36px; font-weight: 700; line-height: 49.39px; letter-spacing: 0;
  color: #FFFFFF; white-space: nowrap;
}
.f-desc {                                    /* data-layer: 描述段落 */
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 18px; font-weight: 400; line-height: 38px; letter-spacing: 1px;
  color: #FFFFFF;
}
/* 【2026-10-09】首页「光宇工业」描述段用户要求更细：16px + Light 300（仅挂 .f-desc--fine 的元素生效） */
.f-desc--fine { font-size: 16px; font-weight: 300; }
/* 浅底块改用深色文字（设计稿「内容—工程」的标题与描述都是 #17191C） */
.feature--light .f-title,
.feature--light .f-desc { color: #17191C; }

/* ============================================================================
   RETAILERS 页 —— 首屏标语 + 入驻流程五步图
   ----------------------------------------------------------------------------
   版式来源：.sketch 画板「RETAILERS」1440×1900（见 out/spec.json）
   视觉基准：../ref/retailers/full.png（PDF示意图.pdf 第 5 页）

   区块结构（画板内 y）：
     导航栏       覆盖在首屏上（absolute，不占高度）
     首屏          0..800     浅色背景图 + 黑色转曲大字标语
     入驻流程    800..1600   深色底 + 标题 + 分隔线 + 五步（图标+文字）+ 四段连接线
     页脚       1600..1900
   ============================================================================ */

.ret-hero {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #17191C;
}
.ret-hero__bg {                              /* data-layer: 矩形 10 1440×800 IMG=ef8f24ba */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  /* 【2026-10-10·建中反馈·终版】素材换上设计师原始大图（13133×7387，5.3MB）后生成的 5120×2880。
     5120 = 2560 逻辑宽 × DPR2，即主流 Retina 大屏下 1:1 显示，不再放大。
     配方 = 等比满宽后垂直居中裁（只裁 10px）：
       5120×2880 --÷3.5556--> 1440×810 --裁 y5..805--> 1440×800
     ⚠ 历史：曾用 `auto 800px`（只适合 2880×1234 的旧图，会让 1920 图两侧露底）。 */
  background-size: 1440px 810px;
  background-position: 0px -5px;
}
/* 【2026-10-10·建中反馈】.ret-hero__slogan 规则随黑色 slogan 元素一并移除（背景图自带灰色水印）。
   恢复时连 retailers.html 里的注释元素一起解开。
.ret-hero__slogan {
  position: absolute; left: 141px; top: 229px;
  width: 1159px; height: 59px; display: block;
}
*/

.ret-steps {
  position: relative;
  height: 800px;
  background: #17191C;
}
.ret-title {                                 /* data-layer: City Partner Onboarding Process */
  /* 容器用设计稿「标题组」的宽度 1312（而非文本层的 1002）：
     加了 letter-spacing 后内容约 1012px，用 1002 会折行。
     left 由 64 微调到 72.75：letter-spacing 会在【末字符之后也加一份】，
     浏览器按「含该份空白」的宽度居中，墨迹整体左偏 spacing/2（此处 8.75px）。
     注意 margin-right 负值对 absolute 元素的内容布局无效，必须用 left 补偿。 */
  position: absolute; left: 72.75px; top: 59px; width: 1312px; height: 60px;
  margin: 0; text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px; font-weight: 700; line-height: 60px; white-space: nowrap;
  /* 设计稿 kerning=15，但 CSS letter-spacing 在末位多算一份、且与 Sketch 的字距
     语义不完全等价 —— 实测墨迹宽 920（spacing 15）vs 设计 997，补到 17.5px 对上。 */
  letter-spacing: 17.5px;
}
.ret-rule {                                  /* data-layer: 直线 8 1312×0 #FFFFFF 1px */
  position: absolute; left: 64px; top: 137px;
  width: 1312px; height: 1px; background: #FFFFFF;
}
.ret-icon {                                  /* data-layer: 填写/审核/协议/账号/合作 图标组 */
  position: absolute; display: block;
}
.ret-label {                                 /* data-layer: 各步骤两行说明 */
  position: absolute; width: 155px; margin: 0;
  text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 设计稿这段文字没写 kerning，但逐像素实测需要 1.25px 才能对上块宽
     （设计 76/51/113/55/81 vs 无字距时 64/41/98/47/69，差约 16%）。
     可能是设计稿里该文本层显式压了字距而导出时未记录 —— 以实测为准。 */
  font-size: 12px; font-weight: 700; line-height: 16.46px; letter-spacing: 1.25px;
}
.ret-connector {                             /* data-layer: 直线 9-12 51×0 #FFFFFF 3px */
  position: absolute;
  width: 51px; height: 3px; background: #FFFFFF;
}

/* ============================================================================
   THE CAR 页 —— 车型详情（长页 1440×7500）
   ----------------------------------------------------------------------------
   版式来源：.sketch 画板「THE CAR」1440×7500（见 out/spec.json）
   视觉基准：../ref/thecar/full.png（PDF示意图.pdf 第 2 页）

   六个区块（画板 y）：
     01 首屏       0..800     整幅背景图 + 居中一行小标题
     02 主张     800..1600   深色底 + 斜切白色带 + 车图 + 白色大字
     03 三特性  1600..2400   米色底 + 三张 342×268 图 + 标题说明
     04 三组图文 2400..4800   动力 / 底盘 / 安全，各 800 高（背景图 + 渐变遮罩 + 文字）
     05 限量    4800..5600   整幅背景图 + 居中文字
     06 规格表  5600..7200   深色底 + 12 行参数表
     页脚       7200..7500

   区块内的文字元素用绝对定位，坐标 = 画板坐标 − 区块起始 y。
   ============================================================================ */

.tc-hero, .tc-limited { position: relative; height: 800px; overflow: hidden; background: #17191C; }
.tc-bg {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  background-size: cover;                    /* 占比接近，先用 cover 再按实测微调 */
  background-position: center center;
}
.tc-hero__logo {
  /* 【第 17 轮·设计师反馈】Hero 里的 One. ALL. 字标，原先缺失。
     素材用 asset.zip 的 ONEall0.svg（420×60.85，设计师导出，字形平滑）。
     位置取自设计稿 ref/thecar/full.png 实测：x513..927（宽 414），中心 x720。 */
  position: absolute; left: 513px; top: 229px; width: 414px;
  display: block;
}

.tc-eyebrow-center {                         /* 首屏的居中标题，字距很宽 */
  /* 【2026-10-08】字距实测：设计稿内容总宽 599（x421..1019，中心 720）。原 3px 只有 401。
     letter-spacing 3→10px 后文字宽 ~607，原 616px 盒放不下会换行 —— 盒加宽到 720 并
     重算 left 保持中心 720（left = 720−360）。text-indent 补偿尾随字距的视觉偏移。 */
  position: absolute; width: 720px; left: 360px; margin: 0;
  text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 300; line-height: 58px;
  letter-spacing: 10px;
}

/* ---------- 02 主张 ---------- */
.tc-statement { position: relative; height: 800px; overflow: hidden; background: #10151B; }
.tc-statement__shape {                       /* data-layer: 合并 → 2026-10-08 改用设计师 PNG */
  /* 【2026-10-08·意见③】原自转 tc-merged.svg 字形扭曲，换 one all.png（1387×286 透明底米色）。
     设计稿实测字标内容 x28..1382 / y1006..1199；PNG 内容 bbox (0,76)..(1356,285) → 1:1 落位：
     left = 28−0 = 28；top = (1006−76)−800 = 130。下缘 y416 起 16px 被 .tc-statement__light（top 400）盖住，
     与设计稿一致（设计稿字标下缘同样止于浅色带）。 */
  position: absolute; left: 28px; top: 130px;
  width: 1387px; height: 286px; display: block;
}
.tc-statement__light {                       /* data-layer: 矩形 12 1440×400 @(0,1200) */
  position: absolute; left: 0; top: 400px;
  width: 1440px; height: 400px; background: #F5F1E8;
}
.tc-statement__car {                         /* data-layer: 矩形 14 650×531 @(395,920) */
  /* 【第 12 轮修正】top 用实测值 69（= 869 − 800），不是 sketch 记录的 120（= 920 − 800）。
     原因：把车图素材按「行 0 对齐」与设计稿做互相关，最佳位置是设计稿 y=869，
     MAE 仅 3.06（相邻位置 20~42），说明素材被整体上移了 51px。
     按 sketch 的 920 摆放，整张车图会偏下 51px —— 这正是 y960..1050 那几行
     残差高达 −136 / +115 的原因。 */
  position: absolute; left: 395px; top: 69px;
  width: 650px; height: 531px; display: block;
}
.tc-statement__text {
  /* data-layer: 1075×59 @(187,686)（区块起点 800，故 1486−800=686） */
  position: absolute; left: 187px; top: 686px; width: 1075px; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 300; line-height: 32px; letter-spacing: 2px;
  text-align: center; color: #000000;
}

/* ---------- 03 三特性 ---------- */
.tc-features { position: relative; height: 800px; overflow: hidden; background: #F5F1E8; }
.tc-feature__img {
  position: absolute; display: block;
  /* 三张图的原始比例与展示区（342×268，比例 1.276）都不符：
     三轮/复古 2614×1632（1.602）、工艺 2154×2880（0.748）。
     必须用 cover 裁切填满，用默认的拉伸会把画面压变形
     （实测左列均值 224.5 vs 设计 192.0，差了 32 级亮度，就是变形导致的）。 */
  object-fit: cover;
  object-position: center;
}
.tc-feature__title {
  position: absolute; width: 342px; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 700; line-height: 25px; color: #000000;
}
.tc-feature__desc {
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 12px; font-weight: 300; line-height: 18px; letter-spacing: 2px;
  color: #000000;
}

/* ---------- 04 三组图文（外层容器 2400 高，内层每组 800 高、绝对定位） ---------- */
.tc-bands { position: relative; height: 2400px; overflow: hidden; background: #17191C; }
.tc-band { position: absolute; left: 0; width: 1440px; height: 800px; overflow: hidden; }
.tc-band__bg {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.tc-band__scrim {                            /* data-layer: 整幅压暗（无独立图层）*/
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  /* 【第 13 轮修正】原本写的是「黑 0% → 38% 纯黑 → 100% 透明」的纵向渐变，错。

     错在哪：当时看到设计稿该区上半部分接近纯黑（逐 100 行均值 0.0/4.8/3.9/3.7），
     就断定「上面被黑色渐变盖住了」。但把背景原图取出来一比才发现 ——
     **上半部分本来就是黑的**（原图同一位置均值 1.1/1.0/1.3/2.4），
     是图片自身内容，不是遮罩。加渐变等于把已经黑的区域再压一遍。

     真实情况：整幅只有一层**均匀的半透明黑**。
     用「设计 ÷ 原图」逐行最小二乘反解透过率 k：
       动力：k = 0.739  (α = 0.261)  MAE 11.20
       底盘：k = 0.701  (α = 0.299)  MAE 15.85
     两带 α 都在 0.26~0.30，取 0.30。四种方案实测对比（>40 占比 / 一致率）：
       动力  无遮罩 3.13%/74.6%   渐变 3.78%/75.8%   均匀0.26 1.71%/81.1%   均匀0.30 **1.76%/82.2%**
       底盘  无遮罩 6.65%/54.3%   渐变 2.86%/72.2%   均匀0.26 1.69%/65.1%   均匀0.30 **1.84%/67.3%**

     → 教训：看到「某区域整体很暗」先别急着加遮罩，**先把素材原图取出来比一比**。
       图片自带的暗部极易被误判成「被遮罩压暗」。 */
  background: rgba(0, 0, 0, 0.30);
}
/* 第三个 band（安全）压暗更重，实测 α=0.554 最优：
     居中 α=0.30 → 7.04%/59.6%    α=0.45 → 4.15%/65.6%
     居中 α=0.554 → **3.43%/71.4%**  α=0.65 → 5.50%/73.7%
   位置确认是「居中」：顶部对齐 17.06%、底部对齐 12.58%，都远差于居中的 3.43%。
   为什么这一带更暗：安全图是竖构图 3071×4095（比例 0.75）放进 1440×800 的横区，
   cover 后要放大到 1440×1920 再垂直裁掉 58%，剩下的是原图偏暗的中段；
   而且这种超大图在 PDF 导出时被重编码的程度也更高。 */
.tc-bands > .tc-band:nth-of-type(3) .tc-band__scrim {
  background: rgba(0, 0, 0, 0.55);
}
.tc-band__title {
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 43.9px; color: #FFFFFF;
}
.tc-band__desc {
  position: absolute; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 18px; font-weight: 400; line-height: 38px; color: #FFFFFF;
}
/* 【2026-10-09·三瓦片重构】替代原 .tc-band__icons 整图（已删）。
   设计稿实测（out/pdf2/p3.png y3612..3732）：瓦片 112.61×115 圆角 20、间隙 26、白色边框 ~1.5px；
   图标 ~52px 居中，文字 13px 两行居中。容器 left:165px top:410px（band 相对）。 */
.tc-band__tiles {
  position: absolute; left: 165px; top: 410px;
  display: flex; gap: 26px;
}
.tc-tile {
  width: 113px; height: 115px; box-sizing: border-box;
  border: 1.5px solid #FFFFFF; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 15px;                        /* 设计稿：图标顶 = 瓦片顶 +15 */
}
.tc-tile__icon { height: 47px; max-width: 88px; object-fit: contain; display: block; }  /* 设计稿图标高 46..49 */
.tc-tile__text {
  margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 12.5px; font-weight: 400; line-height: 19px; color: #FFFFFF;
  text-align: center;
}                                           /* 设计稿文字 y+61 起、两行 19px 步进、底距 ~15 */
/* 【2026-10-09】中文单行文字贴图标太近，加 12px 呼吸空间。
   只作用于中文态（html[data-lang="zh"]），英文态保持设计稿两行基线不动；删掉这行即回退。 */
html[data-lang="zh"] .tc-tile__text { margin-top: 12px; }
/* 大号数字块：70px Do Hyeon + 16px 说明，各带 #0F0F0F→#2D2D2E 渐变底 */
.tc-stat {
  /* 块高按设计稿 102（原 111） */
  position: absolute; width: 288px; height: 102px;
  background: linear-gradient(90deg, #0F0F0F 0%, #2D2D2E 100%);
}
.tc-stat__num {
  /* 【第 17 轮·设计师反馈】「字符大小不正确」——
     设计稿实测（ref/thecar/full.png 块1 y2816..2917）：
       数字「2.0T」  y2830..2879（块内 14..63，高 50）
       小字 high-output engine  y2893..2907（块内 77..91，高 15）→ 两者**分离**。
     原实现 height:91 + line-height:87.5 把数字下压，__cap top:62 又压在数字上，
     导致两者重叠（实测连成一段 y2829..2892）。
     改成 height = line-height = 77，数字在块内 13.5..63.5，与设计稿 14..63 吻合。 */
  position: absolute; left: 40px; top: 0; width: 209px; height: 77px; margin: 0;
  text-align: center; color: #FFFFFF;
  font-family: 'Do Hyeon', 'Alibaba PuHuiTi', sans-serif;
  font-size: 70px; font-weight: 400; line-height: 77px;
}
.tc-stat__cap {
  /* 小字下移到块内 77px 处（设计稿 77..91），与数字彻底分开 */
  position: absolute; left: 20px; top: 75px; width: 248px; height: 27px; margin: 0;
  text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 400; line-height: 20px;
}

/* ---------- 05 限量 ---------- */
.tc-limited__title {
  position: absolute; left: 233px; top: 166px; width: 974px;
  margin: 0; text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 32px; font-weight: 700; line-height: 43.9px;
}
.tc-limited__desc {
  position: absolute; left: 233px; top: 258px; width: 974px;
  margin: 0; text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【第 17 轮·设计师反馈（10-07）·顺手校正】行距原为 38px，设计稿实测是 **25px**
     （三行字形 bbox：设计稿 y5902..5969 行步进 25、实现 y5890..5983 行步进 38；
     字号两边一致，字形高都是 18）。
     行距不改的话，即使垂直居中，文字块仍是 94 高（上下各 27），而设计稿是 68 高（上下各 40）
     —— 视觉上会明显比设计稿松散，所以一并改掉。 */
  font-size: 18px; font-weight: 400; line-height: 38px;
}

/* ---------- 06 规格表 ---------- */
.tc-specs { position: relative; height: 1600px; background: #17191C; }
.tc-specs__title {
  position: absolute; left: 226px; top: 53px; width: 991px;
  margin: 0; text-align: center; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【第 17 轮·设计师反馈】设计稿 S P E C I F I C A T I O N S 跨度 487px（字距极宽），
     原 letter-spacing:6px 只有约 320px。margin-left 补偿末尾多出的那份字距，
     否则 text-align:center 会因它而视觉偏左半个字距。 */
  font-size: 30px; font-weight: 700; line-height: 60px;
  letter-spacing: 19px; margin-left: 9px;
}
/* 标题下方的分隔线。设计稿实测：y5765..5766（2px）、x298..1096（近白像素 799 个）。
   注意它比表格行条（x321..1120）**左移 23px** —— 设计稿里这两者本来就没对齐。
   【2026-10-08 改色】原 #BBBBBB（187,187,187）是错的 —— 那是在旧的 0.5x 模糊基线上取的色。
   用新设计稿（out/pdf2/p3.png，1440 全分辨率 1:1）逐像素采样：
     设计 y5765  x297=(50,51,53) x298=(255,255,255) x500=(255,255,255) x1096=(255,255,255) x1098=(23,24,27)
     → 纯白 #FFFFFF，与深底 #17191C 硬切、无过渡灰阶。
   同一页里表格行条那几条灰线确实是 187（#BBBBBB），只有这一条是白的，别混。 */
.tc-specs__rule {
  position: absolute; left: 298px; top: 165px;
  width: 800px; height: 2px; background: #FFFFFF;
}

/* 表格：12 行、行条高 72、行步进 99（间隙 27），整块 800 宽、中心 720。 */
.tc-specs__table {
  /* 【第 17 轮·设计师反馈】原 left:351 + width:950 → 表格中心 826，而设计稿是 800 宽、中心 720.5。
     原注释写「表格整体宽 950，居中于 1440」本身就是错的（950 宽配 left351，中心是 826 不是 720）。
     现按设计稿实测改：x321..1120 → left 320、width 800。 */
  position: absolute; left: 321px; top: 226px;
  width: 800px; border-collapse: collapse;
}
.tc-specs__table th {
  /* 【第 17 轮·设计师反馈】设计稿每行是一条深灰填充条（800×72），行步进 99（间隙 27）；
     原实现只有下划线、没有填充条，且行高 100。
     做法：单元格总高 99，底部 padding 27 当间隙，背景只画在顶部 72px。 */
  width: 300px; padding: 0 0 27px 32px; height: 99px;
  background-image: linear-gradient(#3C3C3C, #3C3C3C);
  background-repeat: no-repeat;
  background-size: 100% 72px;
  background-position: top center;
  text-align: left; vertical-align: middle; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 24px; font-weight: 700; line-height: 32.93px;
}
.tc-specs__table td {
  padding: 0 48px 27px 0; height: 99px;
  background-image: linear-gradient(#3C3C3C, #3C3C3C);
  background-repeat: no-repeat;
  background-size: 100% 72px;
  background-position: top center;
  text-align: right; vertical-align: middle; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 400; line-height: 27.44px;
}

/* ============================================================================
   HERITAGE 页 —— 品牌故事（长页 1440×7610）
   ----------------------------------------------------------------------------
   版式来源：.sketch 画板「HERITAGE」1440×7610（见 out/spec.json）
   视觉基准：../ref/heritage/full.png（PDF示意图.pdf 第 3 页）

   五个区块（画板 y）：
     01 首屏       0..800      整幅背景图 + 居中两行大字
     02 转折     800..1600    米色底 + 标题 + 1200×515 宽图
     03 创始人  1600..4510    深色底 + 长文 + 两张图（高 2910）
     04 光宇    4510..5310    整幅背景图 + 渐变遮罩 + 文字
     05 时间线  5310..7310    米色底 + 顶部深色带 + 六个节点左右交错（高 2000）
     页脚       7310..7610
   ============================================================================ */

.ht-hero { position: relative; height: 800px; overflow: hidden; background: #17191C; }
.ht-bg {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.ht-hero__scrim {                            /* data-layer: 矩形 23 的 rgba(0,0,0,.2) */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px; background: rgba(0, 0, 0, 0.2);
}
.ht-hero__text {
  /* 【第 17 轮·设计师反馈（10-07）】
     ① 设计稿两行文字**右端对齐**（1316 / 1318），实现原来 text-align:center 是居中；
     ② 设计稿字距明显更大：第一行宽 637、第二行 774，实现只有 447 / 544。
     letter-spacing:7px 是渲染后与设计稿比宽度校准出来的（实测 636 / 775，差 ±1）。
     left 231→238 是把右端也从 1309 挪到设计稿的 1316。
     【坑】不能用 margin-right 调这个 —— 绝对定位 + 固定 width 时 margin-right 不参与
     元素框的定位（框由 left + width 决定），写了也不生效。 */
  position: absolute; left: 232px; top: 188px; width: 1095px; margin: 0;
  text-align: right; letter-spacing: 7px;
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px; font-weight: 400; line-height: 60px;
}
.ht-hero__rule {
  /* 【第 17 轮·设计师反馈（10-07）】「还缺一条绘制的白色线」。
     设计稿实测：y331..332（2px）、x120..1319（宽 1200）、纯白。 */
  position: absolute; left: 120px; top: 331px;
  width: 1200px; height: 2px; background: #FFFFFF;
}

/* ---------- 02 转折 ---------- */
.ht-switch { position: relative; height: 800px; overflow: hidden; background: #F5F1E8; }
/* 【2026-10-08·意见⑦】MTPEAK 字标 —— 设计师给的 PNG（MT 红 #8A1119 + PEAK 黑，透明底 531×62）。
   设计稿 p0 实测：y874..935、x119..646（区块起点 y800 → 相对 top 74，宽 527≈素材原生 531，按原生 1:1 落位）。
   米色底 #F5F1E8 上黑 PEAK 正确（别替换成白字版）。 */
.ht-switch__mark {
  position: absolute; left: 119px; top: 74px;
  width: 531px; height: 62px; display: block;
}
.ht-switch__title {                           /* data-layer: 文本 @(119,962) → 区块内 top 162 */
  /* 【2026-10-08·对照稿 5B】增第二行「A tribute to every version of you. / 致敬所有版本的真我」。
     可用竖向空间 = 字标底 y936 .. 宽图顶 y1033（97px），两行放不下原 49.39 行高，
     故行高收到 46px、整块上移 22px（top 162→140 → 设计稿 y940..1032）。
     单行文案时此改动的净效果 = 该行上移 22px；这是 5B 明确接受的基线变化。 */
  position: absolute; left: 119px; top: 140px; width: 1201px; margin: 0;
  color: #000000;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【2026-10-10·建中反馈】字号调小 + 字间距扩大：36→32px、letter-spacing 2px。
     【2026-10-10 追加】宽图降低 45px 后文字区变大，两行行距 46→54（上下间距分开、更自然）。
     【2026-10-10 再追加】字号再小一些：32→28px（行距 54 不变，间距观感更舒展）。 */
  font-size: 28px; font-weight: 700; line-height: 54px; letter-spacing: 2px;
}
.ht-switch__img {                            /* data-layer: 矩形 26 1200×515 @(120,1033) */
  /* 【2026-10-10·建中反馈】图片换成矩形 26（1200×515，原生 1:1）；高度降 45px、下移保持底部对齐，
     腾出的 45px 给上方两行文字加大行距（title line-height 46→54）。section 高度 800 不变，下游基线不动。 */
  position: absolute; left: 120px; top: 278px;
  width: 1200px; height: 470px; display: block;
  object-fit: cover;
}

/* ---------- 03 创始人 ---------- */
.ht-founder { position: relative; height: 2910px; overflow: hidden; background: #17191C; }
.ht-founder__label {
  position: absolute; width: 1312px; margin: 0;
  text-align: center; color: #FFFFFF;
  /* 【第 17 轮·设计师反馈】设计稿是 T H E  F O U N D E R（全大写 + 字距极宽，跨度 401px）；
     实现是小写（The Founder）、跨度仅 172px。字距按 (401-172)/10 ≈ 23px 起步，渲染后再校。 */
  text-transform: uppercase; letter-spacing: 19px; margin-left: 9px;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px; font-weight: 700; line-height: 60px;
}
.ht-founder__rule {
  /* 【第 17 轮·设计师反馈】「线条缺失」。
     设计稿实测：y1762..1763（2px）、x0..1438（全宽）、纯白 #FFFFFF。
     ht-founder 区块起点 = 画板 y1600 → 区块内 top = 162。 */
  position: absolute; left: 0; top: 162px;
  width: 1439px; height: 2px; background: #FFFFFF;
}
/* 【2026-10-08·意见⑤】THE FOUNDER 两条短横线 —— 设计稿 p0 实测：
   y2433..2434（2px）、x176..636 与 x800..1260（各 461px）、纯白 #FFFFFF。
   区块起点 y1600 → 相对 top 833。在深底 #17191C 上，位置在人像/右列文字与底栏正文之间。 */
.ht-founder__col-rule {
  position: absolute; top: 833px;
  width: 461px; height: 2px; background: #FFFFFF;
}

.ht-founder__portrait {                      /* data-layer: 设计师截图标注 387.2×487.2 */
  /* 【2026-10-10·建中反馈「按设计稿示意调整」】用建中给的设计稿截图 + 程序量测重定：
     截图 1140px = 画布 1440 的 0.7917 倍；两条已知线做标定 ——
       rule 白线（画板 y1762）落在截图 y100；col-rule（画板 y2433）落在截图 y631
       两者均与 0.7917 换算精确吻合（预测 631.2 / 实测 631）→ 标定可信。
     选框实测 307×385 显示像素 ÷ 0.7917 = 387.8×486.3，与截图标注 387.2×487.2 一致。
     终值：left 227.4 / top 252.9（区块内）、387.2×487.2 —— 与素材 484×609（比例 0.7948）
     比例一致（0.7947），是 1:1 等比落位、无裁切。
     ⚠ 历史：曾用 534×609 @(175,194)（量测有误），建中先要求「缩小 80%」得 427×487。 */
  position: absolute; left: 227.4px; top: 252.9px;
  width: 387.2px; height: 487.2px; display: block;
  object-fit: cover;
}
.ht-founder__name {
  position: absolute; width: 610px; margin: 0;
  /* 【第 17 轮·设计师反馈】设计稿是 BARRY RAN（全大写）。 */
  text-transform: uppercase;
  color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px; font-weight: 700; line-height: 60px;
}
.ht-para {                                   /* 长段落：Light 20 / 行高 45 */
  position: absolute; margin: 0;
  color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 300; line-height: 45px;
}
.ht-founder__quote {                         /* data-layer: 矩形 43 1440×300 @(-4,3005) */
  position: absolute; left: 0; top: 1405px;
  width: 1440px; height: 300px; display: block;
  object-fit: cover;
}

/* ---------- 04 光宇 ---------- */
.ht-guangyu { position: relative; height: 800px; overflow: hidden; background: #17191C; }
.ht-guangyu .ht-bg {
  /* 【2026-10-10·建中反馈】背景图换成新素材（1920×1440，比例 1.333，与区域 1440×800 不符）。
     配方 = 等比缩到满宽后垂直居中裁切：
       1920×1440 --×0.75--> 1440×1080 --裁 y140..940--> 1440×800
     等效 CSS：size 1440×1080 + position 0 -140。改裁切只动这两个数即可（素材仍是原图）。
     【更早一版】矩形 29（1440×800，1:1）曾用 size 1440×800 / pos 0 0；
     旧图 2304×1728 用 1:1 + (-444,-564)。改素材必须重算这组配方。 */
  background-size: 1440px 1080px;
  background-position: 0px -140px;
  background-repeat: no-repeat;
}
.ht-guangyu__scrim {
  /* 【第 12 轮修正】方向 + 强度都改过，这里说明完整推导过程。

     1) 方向：sketch 的 矩形 29 gradient 是
          from = "{0.000000, 0.500000}" → to = "{0.997009, 0.500000}"
        两点 y 相同、x 从 0 到 1 → **水平**渐变（左 → 右）。
        之前写成垂直（0deg/180deg 二选一），两个方向都错。

     2) 强度：sketch 记的停靠点是 0%→100%，但实测对不上。
        把该区背景图按 1:1 定位（见 .ht-guangyu .ht-bg），
        取 crop>60 的高信噪像素逐列最小二乘解 α(x)，
        得到一条非单调曲线：左端强(≈0.99) → 1/3 处中(≈0.62) →
        2/3 处又回升(≈0.81) → 右端最强(≈0.94)。
        用线性 1→0 时 MAE 31.9；按实测曲线走降到 17.7。

     3) 下面是实测曲线的 7 点采样（平滑窗口 120px）。
        这是「逆向拟合」而非读设计意图 —— sketch 里找不到这些数值，
        所以换图或换尺寸时必须重新拟合。

     → 通用教训：渐变方向看 from/to 向量；
       强度不要相信二次导入留下的 stops，用实测反解。 */
  /* 【2026-10-10·建中反馈「太暗了」】遮罩按新设计图（内容4.png，1440×800）反解：
     该图与素材（矩形 29）**逐像素一致**（无文字区 err 1.03）、逐列反解 α(x) 全图≈0.000
     ⇒ 设计意图 = 不加遮罩。旧的黑色渐变（左 0.99 → 右 0.94，按旧图 2304×1728 拟合）
     已完全归零；元素与定位保留，恢复只需把下面的渐变解注。
     旧配方（备查）：
       background: linear-gradient(90deg,
                   rgba(0,0,0,.987) 0%, rgba(0,0,0,.791) 17%, rgba(0,0,0,.618) 33%,
                   rgba(0,0,0,.612) 50%, rgba(0,0,0,.805) 67%, rgba(0,0,0,.701) 83%,
                   rgba(0,0,0,.940) 100%);
     通用教训：渐变强度不要相信二次导入的 stops，也不要沿用旧图的拟合值——换图必须重新反解。 */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 800px;
  background: none;
}
.ht-guangyu__logo {                          /* data-layer: 图标MTPEAK 282×30 @(180,4735) */
  position: absolute; left: 180px; top: 225px;
  width: 282px; height: 30.3px; display: block;
}
.ht-guangyu__text {
  position: absolute; left: 180px; top: 307px; width: 534px; margin: 0;
  color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 18px; font-weight: 300; line-height: 31px;
}

/* ---------- 05 时间线 ---------- */
.ht-timeline { position: relative; height: 2000px; overflow: hidden; background: #F5F1E8; }
.ht-timeline__topbar { position: absolute; left: 0; top: 0; width: 1440px; height: 400px; }
.ht-timeline__topbg {
  /* 【第 12 轮修正】background-position 原本是 `center center`，错。
     顶部带图 2752×1536（比例 1.7917），区域 1440×400（比例 3.6000），
     cover 会先缩放到 1440×804，再按 position 垂直裁 400。
       center center → 裁掉上下各 202px，顶部内容丢失
       center 4px    → 只裁下方，与设计稿吻合
     用归一化互相关逐像素找垂直偏移，最佳 oy=4：
       oy=0 NCC .878 / oy=2 .912 / **oy=4 .963** / oy=6 .886
     叠加 rgba(0,0,0,.2) 后 MAE 3.19（center 时高达十几）。

     → 教训：对象框的宽高比与图片比例差一倍时，「居中裁切」和
       「顶部裁切」的差别是「露出一半内容」和「完全露头」，
       必须实测偏移，不能默认 center。 */
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 4px;
}
.ht-timeline__label {
  /* 【2026-10-09 修复】设计稿基线实测 TIMELINE 白字 x590..854、中心 720（out/pdf2/p0.png）。
     盒子本就居中（584+274/2=721），但原来没有 text-align → 文字左起 584，英文偏左 ~55px、
     中文「时间线」更明显。补 center 后中英文都落在 720。 */
  position: absolute; left: 584px; top: 74px; width: 274px; margin: 0;
  text-align: center;
  color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 30px; font-weight: 700; line-height: 60px;
}
.ht-timeline__body {                         /* data-layer: 矩形 30 1440×2000 的底纹图 */
  position: absolute; left: 0; top: 400px;
  width: 1440px; height: 1600px;
  background-repeat: no-repeat;
  /* 【2026-10-09·水印尺寸修复】原 cover（放大 1.589 倍 + 居中裁 280）导致「重庆光宇」水印
     比设计稿大 ~45% 且被右边/下边裁切。用 alpha 图正向模拟对 p0 网格搜索（MSE 0.77，
     cover 基线 11.95），设计稿实际是 s=1.2、图左上在 body 内 (367,60)。红绿叠加零分离。 */
  background-size: 1087px 1631px;            /* 906×1.2, 1359×1.2 */
  background-position: 367px 60px;
}
/* 节点：左右两列，x 固定 175 / 761；卡片 510×161，年份在卡片上方 */
/* 【第 17 轮·设计师反馈】「排版不正确，icon 不对」——
   设计稿有贯穿整个时间线的垂直中线（x720..721，宽 2px，品牌红 #8A110F），实现完全没有。
   【2026-10-08】红线+圆点改用设计师整图（.ht-timeline__axis），此伪元素保留但停用，可回退。 */
.ht-timeline__body::before {
  content: ''; display: none;
  position: absolute; left: 720px; top: 0;
  width: 2px; height: 100%; background: #8A110F;
}

/* 轴线整图：圆点圆心图内 (14.5, 14.5+k×239) → body 内 left=720−14.5、top=104−14.5（首个圆点圆心 y104）。 */
.ht-timeline__axis {
  position: absolute; left: 705.5px; top: 89.5px;
  width: 30px; height: 1406px; display: block;
}

.ht-node { position: absolute; width: 510px; }
.ht-node.left  { left: 175px; }
.ht-node.right { left: 761px; }
.ht-node__year {
  /* 【第 12 轮修正】margin-bottom 原本 24px，导致卡片整体下移 11px。
     用「卡片底色特征」（连续行在 x 起点+30..+480 区间保持 180..218）
     定位六个节点的卡片上边，设计稿与实现逐一比对，**六个全部偏 +11px**：
       1996: 5862/5873   2005: 6101/6112   2012: 6340/6351
       2018: 6579/6590   2023: 6818/6829   2026: 7057/7068
     年份红字位置是对的（5807 vs 5806），所以差的只是年份与卡片之间的间距。
     24 − 11 = 13。 */
  margin: 0 0 13px;
  color: #8A110F;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 50px; font-weight: 700; line-height: 50px;
}
.ht-node__dot {
  /* 【第 17 轮·设计师反馈】「icon 不对」——
     设计稿每个节点在中线上有一个实心圆点：直径 30、圆心 x720、圆心 y = 节点 top + 14。
     【2026-10-08】圆点已随轴线整图（.ht-timeline__axis）提供，此元素停用，可回退。 */
  display: none;
  position: absolute; top: 0; width: 30px; height: 30px;
  border-radius: 50%; background: #8A110F;
}
/* 年份朝中线对齐：右列年份左对齐，左列年份右对齐（设计稿实测 x765 起 vs 卡片 761 起）。 */
.ht-node.left .ht-node__year { text-align: right; }
/* 圆点圆心必须落在中线 x720 上，所以相对各自的 .ht-node 反算 left：
     右列 .ht-node.left=761 → 720−761−15 = −56
     左列 .ht-node.left=175 → 720−175−15 =  530 */
.ht-node.right .ht-node__dot { left: -56px; }
.ht-node.left  .ht-node__dot { left: 530px; }
.ht-node__card {
  /* 【第 12 轮修正】高度原本 161，实测设计稿六个卡片全是 **148**。
     测量法：取卡片内一列（x 起点+150），从卡片上边往下扫，
     值回到 >232（米色底）即为下边。六个节点结果完全一致：148。
     161 会让卡片比设计稿高 13px，且相邻节点间距被压缩。 */
  /* 【第 17 轮·设计师反馈（10-07）】两处：
     ① 「灰色方块宽高细微调整」—— 设计稿的卡片**不是纯矩形**，而是「矩形 + 顶部小三角」的并集。
        .sketch 实测：内层「矩形 42」510×148、外层「合并」(Union) 510×161，
        差的那 13px 就是三角；用户设计图里量到三角高 8px、底宽 15px（图坐标，缩放 0.654）
        → 换算到画板即 **高 13、底宽 23**，顶点距靠中线那一侧 41px。
     ② 「文字在容器中应该中心对齐」—— 设计稿文字距卡顶 40 / 距卡底 40（垂直居中），
        实现原来是 padding-top:13 把文字顶到上方（距顶 24 / 距底 30）。
        改用 flex 垂直居中；左右内边距按设计稿的「距卡左 19」设。 */
  position: relative;
  width: 510px; height: 148px; padding: 0 18px 0 19px;
  display: flex; align-items: center;
  background: #B8B8B1;
}
/* 顶部小三角（朝上凸出，位置在卡片靠中线的一侧） */
.ht-node__card::before {
  content: ''; position: absolute; top: -13px;
  width: 0; height: 0;
  border-left: 11.5px solid transparent;
  border-right: 11.5px solid transparent;
  border-bottom: 13px solid #B8B8B1;
}
.ht-node.right .ht-node__card::before { left: 30px; }
.ht-node.left  .ht-node__card::before { right: 30px; }
/* 【2026-10-08·设计师反馈】时间线文案里的品牌名 MTPEAK 用品牌红（组合 39.png：2023/2026 两条）。 */
.ht-brand { color: #8A110F; }
.ht-node__desc {  margin: 0;
  color: #000000;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【第 17 轮·设计师反馈（10-07）·顺手校正】行距原 38px，设计稿实测 **25px**
     （三行字形 bbox：设计稿行步进 25、实现 38；字号一致、字形高都是 18）。
     不改行距的话，即使垂直居中，文字块仍是 94 高（上下各 27），而设计稿是 68（上下各 40）。 */
  font-size: 18px; font-weight: 400; line-height: 25px;
}

/* ============================================================================
   页脚 —— 坐标基准：以下 top 值 = 画板坐标 − 800（.footer 自身在流中起于 y=800）
   ============================================================================ */
.footer {
  left: 0;
  width: 1440px;
  height: 300px;
  background: #17191C;                      /* data-layer: 矩形 40 */
}

.f-brand  { left: 64px; top: 71px; width: 232px;   /* data-layer: MTPEAK @画板(64,871) */
            font-size: 14px; font-weight: 400; line-height: 19.21px; color: #FFFFFF; }
.f-slogan { left: 64px; top: 97px; width: 157px; display: block;
            /* 【第 17 轮·设计师反馈】与 Hero 同一句，一并改成转曲图形。
               设计稿实测本行 x65..221 宽 157（原容器 232 只是留白），
               按 19.59 比例高 = 157/19.59 = 8.0，与原 font-size:14px 的字高吻合。 */ }
.f-rule   { left: 64px; top: 145px; width: 1312px; height: 2px;
            background: #FFFFFF; }               /* data-layer: 直线 13 @画板(64,945) */

.f-line   { left: 93px; font-size: 12px; font-weight: 400;
            line-height: 16.46px; color: #FFFFFF; white-space: nowrap; }
.f-mail   { top: 167px; }                        /* data-layer: info@mtpeakcn.com */
.f-co     { top: 204px; }                        /* data-layer: GuangYu Motorcycle… */
/* 【2026-10-08·需求】页脚公司名外链（可整段删除=还原纯文本）：继承白色、无下划线，
   悬停加下划线作可点击提示（不改变静态像素）。 */
.f-co-link { color: inherit; text-decoration: none; }
.f-co-link:hover { text-decoration: underline; }
.f-addr   { top: 236px; }                        /* data-layer: No.8 Mingchen Avenue… */

/* 备案号：法规要求放在首页底部中央，链接工信部备案系统 */
.f-icp {
  left: 0;
  right: 0;
  top: 266px;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .2px;
  white-space: nowrap;
}
.f-icp a { color: inherit; text-decoration: none; }
.f-icp a:hover { color: #FFFFFF; text-decoration: underline; }
.f-icp img {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
  border: 0;
}
.f-icp-sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, .28);
}

/* 图标尺寸取导出 SVG 的原生 viewBox，不要用 sketch 的 shapeGroup frame：
   地址图标 sketch 记 16×14，SVG viewBox 是 16×17.69，按 14 显示会被缩到 12.66px 宽。 */
.f-ico    { left: 64px; }
.f-ico-mail { top: 172px; width: 16.22px; height: 11px; }    /* data-layer: 矢量 12097 */
.f-ico-co   { top: 205px; width: 16px;    height: 15.16px; } /* data-layer: 矢量 12102 */
.f-ico-addr { top: 236px; width: 16px;    height: 17.69px; } /* data-layer: 矢量 12109 */
.f-ico img { width: 100%; height: 100%; object-fit: contain; object-position: left top; display: block; }

/* ============================================================================
   导航栏 —— .nav 定位在 top:0，故其子元素可直接用画板坐标
   注意：设计稿里导航栏在 7 个画板各复制了一份、未做 Symbol。
        上线时应抽公共组件（构建期 include 或运行期注入），否则改 7 处。
   ============================================================================ */
.nav {
  /* 【第 17 轮·设计师反馈】加「半透明矩形」。参数取自 .sketch 图层「导航栏(改)」：
     1440×60，fill #17191C @ alpha 0.30（叠在白底上得 RGB(186,186,187)，与设计稿实测吻合）。
     「吸顶」用 JS 把 top 跟随 scrollY 实现（保持 absolute，这样水平方向仍跟着 .stage 居中，
     换成 position:fixed 会脱离 .stage 的居中上下文、窄视口下又会踩到上面的溢出坑）。 */
  width: 1440px; height: 60px;
}
/* 滚动超过 60px 后由 site.js 加 .is-stuck，显出半透明底。 */
.nav.is-stuck {
  background: rgba(23, 25, 28, 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 【第 14 轮·设计变更】导航栏 LOGO 改成「#8A110F 红底 + 白色 M」方块，
   整块 80×80，从导航栏顶部起始，**底部溢出 20px**（导航栏本身仍是 60 高）。
   实测依据（新 PDF 单页画布的「导航栏(改)」画板）：
     · 红底矩形   rect=(49,0)-(129,80)  fill=#8A110F
     · 白色 M     bbox=(69,15.7)-(109,65.3)，即块内居中
     · 导航栏底色 y0..59 = RGB(186,186,187)，y60 起为画布白 —— 故导航栏高仍是 60
   旧值 (left:64 top:10 32.03×40) 是「白色 M 字标」时代的。
   `.nav` 没有 overflow:hidden，所以溢出部分是可见的 —— 这正是设计效果。 */
.nav-logo { left: 49px; top: 0; width: 80px; height: 80px; }
.nav-logo img { width: 100%; height: 100%; display: block; }

.nav-item {                                  /* data-layer: 容器 31 内 5 项 */
  top: 19px; width: 95px; height: 22px;
  font-size: 16px; font-weight: 300; line-height: 22px;
  text-align: center; color: #FFFFFF;
  text-decoration: none;
}
.nav-item.is-active {                        /* data-layer: Media */
  font-weight: 700; color: #8A110F;
}

/* ---------- 中英切换 ----------
   结构：(a.nav-lang 边框) > (span.nav-lang-text 文字)
   文字用绝对定位，这样两种语言（"EN/中" 与 "中/EN"）宽度一致时位置完全不动。 */
.nav-lang {                                   /* data-layer: 矩形 2，边框 #FFFFFF 1px */
  left: 1290px; top: 22px; width: 65px; height: 16px;
  border: 1px solid #FFFFFF; border-radius: 8px;
  display: block; text-decoration: none;
  cursor: pointer;
}
.nav-lang:hover { background: rgba(255, 255, 255, 0.12); }
.nav-lang-text {                             /* data-layer: Start now */
  /* 【坑】绝对定位子元素的包含块是父级的 padding box，不是 border box。
     .nav-lang 有 1px 边框，所以这里的坐标起点在边框内侧（1291,23），
     比父级外框（1290,22）各内移 1px。
     设计稿里文字相对【组】的偏移是 (7,1) => 绝对 (1297,23)，
     于是 CSS 要用 left:6px（7-1）、top:0px（1-1）才能落回原位。
     漏掉这 1px 的代价：整段文字右移 1px，EN 模式与设计稿基线出现 159 个差异像素。 */
  position: absolute; left: 6px; top: 0; width: 50px; height: 15px;
  font-size: 12px; font-weight: 300; line-height: 15px;
  text-align: center; color: #FFFFFF;
  white-space: nowrap;
}

/* 导航项可点击：给未实现页面一个明确反馈，而不是跳 404 或静默无反应 */
.nav-item { cursor: pointer; }
.nav-item[aria-disabled="true"] { cursor: default; }

/* ---------- 导航提示条 ----------
   默认 opacity:0 且 pointer-events:none，不参与设计基线的像素比对。 */
.nav-hint {
  position: fixed; left: 50%; top: 84px; transform: translateX(-50%);
  max-width: 560px; padding: 10px 18px; border-radius: 6px;
  background: rgba(23, 25, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF; font-size: 14px; line-height: 20px; text-align: center;
  z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.nav-hint.is-show { opacity: 1; }

/* ============================================================================
   MEDIA 页 —— 新闻列表（1440×1900）
   ----------------------------------------------------------------------------
   版式来源：.sketch 画板「MEDIA」1440×1900
   视觉基准：PDF示意图.pdf 的 MEDIA 画板（真实起点 x4551，不是 BOARDS 表里记的 4570 —— 差 19px）

   结构（画板 y）：
     Hero 轮播      0..800
     NEWS ABOUT US  800..936   标题居中 + 白色分隔线
     三张卡片       973..1427  各 300×455（图片 334 + 文字区 121）
     READ MORE      1487..1551 330×65 描边按钮
     页脚           1600..1900
   ============================================================================ */

/* ---------- 01 Hero 轮播（0..800）----------
   【2026-10-19 需求】每套内容 = 一张图 + 标题 + 正文。
   一张 slide 就是完整的一套；切换时整条 track 平移，所以文字跟着自己的图片一起滑动。
   旧版是「背景轨道 + 轨道外固定文字」，本次结构已替换。 */
.md-hero { position: relative; height: 800px; overflow: hidden; background: #17191C; }
.md-hero__viewport { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; overflow: hidden; }
.md-hero__track {
  display: flex; height: 800px;
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.md-hero__slide {                             /* 照片 1440×800，走 config.js 的 ASSETS */
  position: relative; flex: 0 0 1440px; width: 1440px; height: 800px; overflow: hidden;
  background-repeat: no-repeat; background-size: cover; background-position: center center;
}
/* 【2026-10-21】后台给这一张配了跳转内容时，整块可点（点击逻辑见 media.js openCurrentLink） */
.md-hero__slide.has-link { cursor: pointer; }
/* 文案在 slide 内部，位置沿用设计稿实测值；因此会随图片一起横向滑动。 */
.md-hero__title {                             /* 设计稿实测：字形顶 y232 / 332，高 68，行距 100 */
  position: absolute; left: 176px; top: 216px; width: 800px; margin: 0;
  color: #FFFFFF; white-space: normal;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【2026-10-10·设计师批注】标题字号 94→60px；行高保持 100px（两行位置不动）。 */
  font-size: 60px; font-weight: 700; line-height: 100px;
}
.md-hero__desc {                              /* 4 行，行距 38，首行字形顶 y446 → 行框顶 434 */
  position: absolute; left: 171px; top: 434px; width: 495px; margin: 0;
  color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 300; line-height: 38px;
}
.md-hero__dots {
  /* 【2026-10-07 纠正】原先写的是 条宽80/间隙20/总宽280/起点 x660 —— 全错。
     从 PDF 的矢量绘图对象直接读出真值：3 条各 **120** 宽、高 6、间隙 **40**、
     总宽 **440**、起点 **x500**（y771..777）；第 1 条填充是 (0.541,0.067,0.059)=#8A110F。
     2026-10-19 设计标注再修正为 active 80 / inactive 40 / gap 20，见文件末尾的覆盖规则。 */
  position: absolute; left: 500px; top: 771px; width: 440px; height: 6px;
  display: flex; gap: 40px;
}
.md-hero__dot {
  position: relative;
  width: 120px; height: 6px; padding: 0; border: 0;
  background: #FFFFFF; cursor: pointer;
}
/* 视觉仍是 2px 细线，但把上下点击热区扩到 26px，避免只能点中一条线 */
.md-hero__dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px;
}
.md-hero__dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 6px; }
.md-hero__dot.is-active { background: #8A110F; }

/* ---------- 02 NEWS ABOUT US（800..936，区块内相对坐标）---------- */
.md-list { position: relative; height: 800px; background: #17191C; }
.md-list__title {                             /* 实测 x481..958 宽478 中心719.5 → 居中 */
  position: absolute; left: 0; top: 62px; width: 1440px; margin: 0;
  text-align: center; color: #FFFFFF; white-space: nowrap;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 28px; font-weight: 700; line-height: 40px; letter-spacing: 22px;
}
/* NEWS 部分用品牌红；注意 letter-spacing 会在末字后多一份，用 margin-left 补偿让整句仍居中 */
.md-list__brand { color: #8A110F; }
.md-list__rule {                              /* 实测 x120..1319（宽1200）、2px、白 */
  position: absolute; left: 120px; top: 136px;
  width: 1200px; height: 2px; background: #FFFFFF;
}

/* ---------- 三张卡片（区块内 y173 起）---------- */
.md-cards { position: absolute; left: 205px; top: 173px; display: flex; gap: 58px; }
.md-card { width: 300px; height: 455px; position: relative; }
/* 【2026-10-08·需求】整卡可点 → 新闻详情：块级、继承白色、无下划线（不影响版式与悬停态）。
   删除此规则 + HTML 里的 a 标签即回退纯展示。 */
.md-card-link { display: block; color: inherit; text-decoration: none; }
.md-card__img { width: 300px; height: 334px;
  background-repeat: no-repeat; background-size: cover; background-position: center center; }
.md-card__body { width: 300px; height: 121px; background: #C3C3C3; position: relative; }
/* 【2026-10-21】卡片文字区重排（300×121，底线固定在距底 15px）：
   原 22/28 标题 + 16/22 摘要两行两列共占 109px，而底线以上只有 104px，
   摘要第二行会压到黑线上。现改为 18/24 标题 + 16/21 摘要：
     上留白 4 + 标题两行 48 + 间距 6 + 摘要两行 42 = 100px，距底线留 4px。
   标题 min-height 锁两行，标题只有一行时摘要仍与其他卡同一 Y 轴。
   标题实测距卡左 16（padding），字形顶距卡顶约 8（4 + 半行距 3 + 字面内缩）。 */
.md-card__title {
  margin: 0; padding: 4px 16px 0;
  color: #000000;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 18px; font-weight: 700; line-height: 24px;
  min-height: 48px;                          /* 2 × line-height，锁两行高度 */
}
.md-card__desc {
  margin: 0; padding: 6px 16px 0;
  color: #3C3C3C;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 400; line-height: 21px;
}
.md-card__rule {                              /* 实测距卡左右各 15、距卡底 15、2px */
  position: absolute; left: 15px; right: 15px; bottom: 15px;
  height: 2px; background: #000000;
}

/* 【2026-10-08·设计师反馈】卡片悬停选中态：鼠标进入 → 照片 −53px、灰底 +53px、底线黑→品牌红；移出复原。
   设计稿 p1 实测（第三张卡为 hover 示意）：普通灰顶 y1307 / hover 灰顶 y1254（Δ=53，照片 371→318），
   线位置两种状态相同（卡底上方 15px），仅变色 #000→#8A110F(138,17,14)；卡总高 455 不变（281+174）。
   .is-hover 供 media.js 的 ?hover=1 验收参数使用，与 :hover 共享规则；整块删除即回退。
   注：第三张卡静态素材已换回与前两张相同的照片，三张卡悬停行为一致。 */
.md-card__img, .md-card__body { transition: height .3s ease; }
.md-card__rule { transition: background-color .3s ease; }
.md-card:hover .md-card__img, .md-card.is-hover .md-card__img { height: 281px; }
.md-card:hover .md-card__body, .md-card.is-hover .md-card__body { height: 174px; }
.md-card:hover .md-card__rule, .md-card.is-hover .md-card__rule { background: #8A110F; }

/* ---------- READ MORE 按钮（区块内 y687）---------- */
.md-more {
  position: absolute; left: 555px; top: 687px;
  width: 330px; height: 65px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #FFFFFF; color: #FFFFFF; text-decoration: none;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: 2px;
}
.md-more:hover { background: rgba(255, 255, 255, 0.10); }

/* ==========================================================================
   RETAILERS — 全球分销商与经销商招募（2026-10-16 整页重做）
   --------------------------------------------------------------------------
   版式来源：新版设计稿 p3（中）/ p4（英）画板，1440×4135
   区块高度：Hero 800 / Why 800 / Model 880 / Region 800 / Process 555
   坐标 = 画板坐标 − 区块起始 y，与设计稿一一对应。
   ========================================================================== */

.pt-hero, .pt-why, .pt-model, .pt-region, .pt-process {
  position: relative; width: 1440px; overflow: hidden; background: #FFFFFF;
}
.pt-hero    { height: 800px; background: #17191C; }
.pt-why     { height: 800px; }
.pt-model   { height: 880px; }
.pt-region  { height: 800px; }
.pt-process { height: 800px; }  /* 设计稿实测 2480–3280 */

/* 区块标题：24px、水平居中（设计稿实测各区块标题中心均为 720） */
.pt-h2 {
  position: absolute; left: 0; width: 1440px; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 24px; font-weight: 700; line-height: 32px; color: #000000;
  text-align: center;
}

/* ---------------- 01 Hero ---------------- */
.pt-hero__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 800px;
               background-repeat: no-repeat; background-size: 1440px 800px; background-position: 0 0; }
.pt-hero__title, .pt-hero__l1, .pt-hero__l2, .pt-hero__l3 {
  position: absolute; margin: 0; left: 176.5px;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  color: #FFFFFF;
}
.pt-hero__title { left: 175px; top: 257.3px; font-size: 36px; font-weight: 700; line-height: 44px; }
.pt-hero__l1 { top: 335.7px; font-size: 14px; font-weight: 300; line-height: 25px; }
.pt-hero__l2 { top: 360.7px; font-size: 14px; font-weight: 300; line-height: 25px; }
.pt-hero__l3 { top: 385.7px; font-size: 14px; font-weight: 300; line-height: 25px; }

.pt-cta {
  position: absolute; margin: 0; padding: 0; cursor: pointer;
  border: 0; background: transparent;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 14px; font-weight: 300; color: #FFFFFF;
}
/* 左侧两个描边按钮：文字 x246.9/x517.5 起，两侧各留 38px 内边距（设计稿实测） */
.pt-cta--1, .pt-cta--2 {
  top: 732px; height: 58px; padding: 0 38px; line-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px;
}
.pt-cta--1 { left: 208.9px; }
.pt-cta--2 { left: 479.5px; }
/* 右侧两个两行项：＋ 号 + 两行文字 */
.pt-cta--3, .pt-cta--4 { top: 738px; display: flex; align-items: center; gap: 12px; }
.pt-cta--3 { left: 757.6px; }
.pt-cta--4 { left: 991.4px; }
.pt-cta__cap {
  width: 22px; height: 22px; line-height: 20px; text-align: center; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; font-size: 13px;
}
.pt-cta__col { display: flex; flex-direction: column; }
.pt-cta__en { line-height: 25px; white-space: nowrap; }

/* ---------------- 02 为什么加入 ---------------- */
.pt-card {
  position: absolute; top: 167px; width: 300px; height: 610px;
  background: #000000; overflow: hidden;
}
.pt-card__img { position: absolute; left: 0; top: 0; width: 300px; height: 463px; display: block; object-fit: cover; }
/* 【2026-10-18】甲方给的线稿图标：坐标 = 画板绝对坐标 − 卡片原点（卡 left 255/570/885、top 967） */
.pt-card__icon { position: absolute; display: block; object-fit: contain; z-index: 1; }
.pt-card:nth-of-type(1) .pt-card__icon { left: 115px; top: 128px; width: 70px;     height: 70px; }
.pt-card:nth-of-type(2) .pt-card__icon { left: 87px;  top: 143px; width: 117.49px; height: 40px; }
.pt-card:nth-of-type(3) .pt-card__icon { left: 112px; top: 128px; width: 72.39px;  height: 70px; }
.pt-card__title {
  position: absolute; left: 0; top: 474px; width: 300px; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: 0; color: #FFFFFF;
  text-align: center;
}
.pt-card__desc {
  position: absolute; left: 20px; top: 519px; width: 260px; margin: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 【2026-10-16 回退说明】建中给的规格里标题与描述写的是同一套（16px/700/22px），
     但按 16px 实现后：① 中文描述折成 3 行（设计稿 2 行）② 明显比设计稿粗大，卡片区差异 2.25%→2.71%。
     设计稿实测描述为 ink 高 10、行距 16（≈12px/16，weight 300）→ 此处按实测值。
     如果确实要用 16px/700/22，改回上面那三行即可。 */
  font-size: 12px; font-weight: 300; line-height: 16px; letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72); text-align: center;
}
.pt-card::after {
  /* 【2026-10-16 建中给规格】60×3、rgba(138,17,15,1)=#8A110F、画板 y1556 → 卡片内 top 589；
     设计稿实测 x375–434（60 宽），卡片 x255–555 的中心 405 → 正是水平居中 */
  content: ''; position: absolute; left: 50%; top: 589px; transform: translateX(-50%);
  width: 60px; height: 3px; background: #8A110F;
}

/* ---------------- 切换动效（2026-10-16 · 高级感版）----------------
   目标：切换要「优雅」而不是「跳出来」。四个手段：
     1. 缓动换成 **expo-out** `cubic-bezier(.16,1,.3,1)` —— 起步快、收尾极缓、尾巴拖得长；
        线性或普通 ease 会显得生硬
     2. 位移只 **6px**（不是 8~20px）。位移越大越像"弹窗"，越小越像"浮起"
     3. 起始叠 **1.5px 微模糊**，55% 处先到满不透明 —— 像内容从纸面慢慢聚焦；
        模糊量必须小，大了会糊
     4. **逐块错峰 70ms**：01 → 02 → 03 依次浮起形成"波纹"节奏
        （高级感最关键的一条：同时进场 = 块状，错峰 = 有呼吸）
   时长 520ms：比常规 300ms 长，但配 expo-out 不显慢，反而更从容。
   性能：只动 opacity / transform / filter，全在合成层，1440 画布不触发重排。
   与设计稿的关系：设计稿是静态画板、没有这一层；纯交互增强，不影响静态像素比对。 */
@keyframes pt-rise {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(1.5px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.pt-panel.is-switching 
   /* 01/02/03 数字仍绝对定位，浮在左上 */
.pt-panel.is-switching .pt-block:nth-child(2) { animation-delay: .07s; }
.pt-panel.is-switching .pt-block:nth-child(3) { animation-delay: .14s; }

/* 区域面板：地图略早（主视觉），标题条、国家清单依次错峰 */
.pt-region__panel.is-switching .pt-region__map       { animation: pt-rise .52s cubic-bezier(.16,1,.3,1) both; }
.pt-region__panel.is-switching .pt-region__head      { animation: pt-rise .52s cubic-bezier(.16,1,.3,1) both; animation-delay: .06s; }
.pt-region__panel.is-switching .pt-region__countries { animation: pt-rise .52s cubic-bezier(.16,1,.3,1) both; animation-delay: .12s; }

/* tab 色彩过渡同曲线、放长到 420ms，避免红/灰硬切；指示器补一次"落定"下沉 */
.pt-tab__icon  { transition: filter .42s cubic-bezier(.16,1,.3,1), opacity .42s ease; }
.pt-tab__label { transition: color .42s cubic-bezier(.16,1,.3,1); }
.pt-tab__mark  { transition: opacity .42s ease, transform .42s cubic-bezier(.16,1,.3,1); }
.pt-tab.is-active .pt-tab__mark { animation: pt-mark-drop .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes pt-mark-drop {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 尊重系统「减少动态效果」—— 高级感的前提是不打扰 */
@media (prefers-reduced-motion: reduce) {
  .pt-panel.is-switching .pt-block,
  .pt-region__panel.is-switching .pt-region__map,
  .pt-region__panel.is-switching .pt-region__head,
  .pt-region__panel.is-switching .pt-region__countries,
  .pt-tab.is-active .pt-tab__mark { animation: none; }
  .pt-tab__icon, .pt-tab__label, .pt-tab__mark { transition: none; }
}

/* ---------------- 03 合作模式 ---------------- */
.pt-tabs { position: absolute; left: 0; top: 141px; width: 1440px; height: 96px; }
.pt-tab {
  position: absolute; top: 0; margin: 0; padding: 0; border: 0; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 9px; cursor: pointer;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
}
.pt-tab:first-child { left: 585.4px; width: 60px; }
.pt-tab:nth-child(2) { left: 815.4px; width: 51.5px; }
.pt-tab__icon {
  /* 【2026-10-16】tab 图标改用甲方给的两张图（分销商=人形组 / 经销商=店铺）。
     每个图标生成红(#8A110F)/灰(#B8B8B2)两个状态，由 JS 按 data-active 切换 —— 不再用 CSS filter 调色 */
  width: 56px; height: 56px; display: block; object-fit: contain;
}

/* 红/灰两态互斥：未选中显示灰、选中显示红（由 .is-active 驱动，JS 已在切 tab 时切换该类） */
.pt-tab__icon--on  { display: none; }
.pt-tab__icon--off { display: block; }
.pt-tab.is-active .pt-tab__icon--on  { display: block; }
.pt-tab.is-active .pt-tab__icon--off { display: none; }

/* 红/灰两态互斥：未选中显示灰、选中显示红（由 .is-active 驱动，JS 已在切 tab 时切换该类） */
.pt-tab__icon--on  { display: none; }
.pt-tab__icon--off { display: block; }
.pt-tab.is-active .pt-tab__icon--on  { display: block; }
.pt-tab.is-active .pt-tab__icon--off { display: none; }

.pt-tab__label { font-size: 16px; line-height: 22px; color: #B8B8B2; }
.pt-tab.is-active .pt-tab__label { color: #8A110F; font-weight: 700; }
/* 【2026-10-16 建中】指示器改用甲方素材 08.png（26×19，浅灰 #CCCCCC）；
   设计稿实测画板 (596,1834)，即 tab 下方 → 在 tab 内用 margin 定位，仅 active 显示（与设计稿一致）。 */
.pt-tab__mark { width: 26px; height: 19px; display: none; margin-top: 3px; }
.pt-tab.is-active .pt-tab__mark { display: block; }

.pt-panel {
  position: absolute; left: 64px; top: 251.6px; width: 1312px; height: 577px;
  background: #EBEBEB;
}

.pt-table {
  /* 表格 x365–1175（宽 810），相对面板 x64 → margin-left 301；(4).pdf 渲染实测 */
  margin: 10px 0 0 301px; width: 810px; border-collapse: collapse; table-layout: fixed;
}
.pt-table th {
  /* (4).pdf 实测：表头底 #E1D5D5，文字 #475669；表头高 32 + 底部分隔线 1（画板 y2035–2067）
     【2026-10-16 建中给规格】字体 Noto Sans SC / Bold 700 / 13px / 行高 19px / 字距 0 / 居中 */
  height: 33px; background: #E1D5D5; color: #475669;
  border-bottom: 1px solid #B8B8B1;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 13px; font-weight: 700; line-height: 19px; letter-spacing: 0;
  text-align: center; padding: 0 12px; vertical-align: middle;
}
.pt-table td {
  /* 【2026-10-16 建中给规格】字体 Noto Sans SC / Regular 400 / 13px / 行高 19px / 字距 0 / 居中
     (4).pdf 实测：左列 13px、右列 12px/20；行高 36（含 1px 分隔线） */
  height: 36px; background: #FFFFFF; border-bottom: 1px solid #B8B8B1;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 13px; font-weight: 400; line-height: 19px; letter-spacing: 0;
  color: #1F2D3D; text-align: center; padding: 0 12px; vertical-align: middle;
}
.pt-table td:first-child { color: #38495C; }
.pt-table td:last-child { font-size: 12px; line-height: 20px; }

/* ---------------- 04 全球招募区域 ---------------- */
.pt-region__list {
  position: absolute; left: 149px; top: 221px; width: 294px; height: 523px;
  background: #FFFFFF; border: 1px solid #E5E5E5; box-sizing: border-box; padding: 20px 0;
}
.pt-region__item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 72px; padding: 0 26px;
  border: 0; background: transparent; cursor: pointer; text-align: left; box-sizing: border-box;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 300; color: #7B7B7B;
}
.pt-region__item::before {
  content: ''; width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1px solid currentColor; opacity: .5;
}
.pt-region__item.is-active { color: #17191C; font-weight: 700; background: #F5F5F5; }
.pt-region__item.is-active::before { border-color: #8A110F; background: #8A110F; opacity: 1; }

.pt-region__panel {
  position: absolute; left: 449px; top: 220px; width: 830px; height: 523px;
  background: #FFFFFF; overflow: hidden;
}
.pt-region__head {
  position: absolute; left: 6px; top: 15.9px; min-width: 300px; height: 33px; line-height: 33px;
  padding: 0 16px; background: #8A110F; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 400; box-sizing: border-box;
}
.pt-region__countries {
  position: absolute; left: 44px; top: 68.7px; width: 300px; margin: 0; padding: 0; list-style: none;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 14px; font-weight: 300; line-height: 36px; color: #17191C;
}
/* 地图：设计稿实测占面板右侧 x320–830（画板 769–1279），510×523 */
.pt-region__map { position: absolute; left: 320px; top: 0; width: 510px; height: 523px; display: block; }

/* ---------------- 05 申请流程 + CTA ---------------- */
/* 地图水印：设计稿在申请流程区背后垫了一层淡世界地图（建中 17:11 截图确认）。
   素材用 region-map-base.png（PDF 渲染出的灰大陆版；12.png 是纯白大陆，白底看不见）。
   放在 section 首位，内容都在它之上。 */
.pt-process__map {
  /* 【2026-10-16 建中给的设计标注】宽 692 / 高 450 / 左 345 / 顶 2625（画板）
     → 区块内 top 145（2625−2480，与标注里的「145」吻合） */
  position: absolute; left: 345px; top: 145px;
  width: 692px; height: 450px;
  object-fit: contain; pointer-events: none;
}
/* 【2026-10-16 建中确认】中英**都**用设计稿图形「JOIN US NOW.」，不按语言切换。
   原 h2「申请流程 / Application Process」保留在 DOM 里但隐藏 —— 便于随时改回双形态，
   i18n 词条 pt.process.title 也保留不动。若要恢复文字形态，把下面那行 display:none 去掉即可。 */
.pt-process__joinimg {
  /* 最新稿实测：join us now. 是**独立**的大字，位于区块标题(24px)下方
     画板 y2754.2 / 64px → 区块内 top 274.2；素材 462×58 与 64px 字高吻合，故直接用图形 */
  position: absolute; left: 50%; top: 274.2px; transform: translateX(-50%);
  width: 462px; height: 58px; display: block;
}
/* 【修正】区块标题「申请流程 / Application Process」是与 join us now. 并存的独立元素，不再隐藏 */
.pt-process > .pt-h2 { display: block; }

.pt-section-rule {
  /* 【2026-10-16 建中给规格】宽 1312 / 高 0(发丝线) / 顶 101.22 / 左 64 / 穿透
     四个区块共用（为什么加入 / 合作模式 / 全球招募区域 / 申请流程）。
     颜色校准：Sketch 的 0 高度发丝线在 PDF 里渲染成 2 行 [224,224,224]+[53,54,57]，
     两行墨量合计 ≈233/255 → 等效 1px 的 #17191C（之前误写 #C4C4C4 偏浅）。
     位置依据：设计稿实测「合作模式」y1700、「申请流程」y3380，均为区块内 y100 ≈ 101.22。 */
  position: absolute; left: 64px; top: 101.22px; width: 1312px; height: 1px;
  background: #17191C;
}
.pt-steps__dash {
  /* 【2026-10-16 建中给规格】宽 20px / 高 0（发丝线 → 1px）/ 深色 / 穿透
     （原 24×2 #B8B8B2 太粗太浅） */
  position: absolute; top: 195px; width: 20px; height: 1px; background: #17191C;
}
.pt-cta2--two { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pt-cta2__l1, .pt-cta2__l2 { font-size: 14px; line-height: 20px; }
/* 第三个 CTA：EN = Access（小字）+ Partnership Brochure；ZH = 获取合作手册（一行，按 (4).pdf p2/p3） */
.pt-cta2--brochure { gap: 0; }
.pt-cta2--brochure .pt-cta2__l1 { font-size: 10px; line-height: 13px; }
.pt-cta2--brochure .pt-cta2__l2 { font-size: 14px; line-height: 18px; }
html[data-lang="zh"] .pt-cta2--brochure .pt-cta2__l1 { font-size: 14px; line-height: 20px; }
html[data-lang="zh"] .pt-cta2--brochure .pt-cta2__l2 { display: none; }

.pt-step { position: absolute; top: 526px; width: 160px; margin-left: -80px;
           display: flex; flex-direction: column; align-items: center; gap: 11px; }
.pt-step__icon { width: 43px; height: 45px; display: block; object-fit: contain; 
                 filter: brightness(0);   /* 设计稿图标近黑，PDF 素材是浅灰 #B8B8B2 */}
.pt-step__label {
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 12px; font-weight: 700; line-height: 16px; color: #17191C; text-align: center;

  text-transform: uppercase;   /* 设计稿是全大写 */}
.pt-ctas {
  /* 【按 (4).pdf 实测】行 x208–1227.5（宽 1019.5）、y3116（块内 636）、高 70
     四个按钮中心 325.8 / 580.7 / 836.7 / 1091.3 → 等距 255（space-between 自动得到） */
  position: absolute; left: 208px; top: 636px; width: 1019.5px; height: 70px;
  display: flex; justify-content: space-between; align-items: stretch;
}
.pt-cta2 {
  /* 【按 (4).pdf 渲染像素实测】按钮是**实心填充**，不是描边：
       第 1 个 = 实心品牌红 #8A110E；第 2~4 个 = 实心深灰 #2D2E31；文字白色。
     原来做成「1px #C4C4C4 描边 + 白底 + 深色字」→ 这是 CTA 行 38.9% 差异的主因。 */
  position: static; width: 250px; height: 70px; margin: 0; padding: 0;
  cursor: pointer; border: 0; background: #2D2E31; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 14px; font-weight: 400; line-height: 1.3; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.pt-cta2--primary { background: #8A110E; color: #FFFFFF; }
.pt-cta2:nth-child(1) { left: 0; }
.pt-cta2:nth-child(2) { left: 255px; }
.pt-cta2:nth-child(3) { left: 510px; }
.pt-cta2:nth-child(4) { left: 765px; }
.pt-ctas__hall {
  position: absolute; left: 822px; top: 60.2px; display: none;
  font-size: 14px; color: #FFFFFF;
}

/* ============================================================================
   合作模式表格：列宽（2026-10-16 按 (4).pdf 渲染实测）
   ----------------------------------------------------------------------------
   设计稿实测：表 x364–1175（811 宽）；左列文字中心 462、右列中心 868
   → 左列 ≈ 296（36.5%）/ 右列 ≈ 515（63.5%）
   之前用默认 auto 布局，两列接近均分 → 右列文字整体左移约 40px（即 y2050 带 17~22% 差异的主因）
   ============================================================================ */
/* 由下面的列宽规则一并设置 */

/* ============================================================================
   为什么加入 区块的分割线单独定位（2026-10-16）
   ----------------------------------------------------------------------------
   问题：这条线原来跟着通用规则落在区块内 101（画板 901），**紧贴标题**（间距 0），
        而同一模块的其它线都在标题下方 32~35px 处：
          合作模式 标题 1644.4 → 线 1700（间距 32）
          申请流程 标题 2524.5 → 线 2580（间距 32）
          为什么加入 标题 876.9 → 线应 936（间距 35）
   修法：这条线改为区块内 top:136（＝ 标题 76.9 + 标题高 24 + 间距 35）。
   ============================================================================ */
.pt-why > .pt-section-rule { top: 136px; }

/* ============================================================================
   合作模式表格：列宽 + 列间竖分割线（2026-10-18 按 (4).pdf 渲染实测重定）
   ----------------------------------------------------------------------------
   表头/表体 x365–1175（宽 810），竖线 x557 → 左列 192px / 右列 618px；
   中文表头高 32 + 底部分隔线 1（y2035–2067），行高 36（含 1px 分隔线）。
   ⚠️ 2026-10-16 从设计截图推的 27.3% 与 (4).pdf 渲染不符（实测 23.7%），已改正。
   ============================================================================ */
.pt-table th:first-child, .pt-table td:first-child {
  width: 192px; border-right: 1px solid #B8B8B1;
}
.pt-table th:last-child, .pt-table td:last-child { width: 618px; }

/* 英文版表格：(4).pdf 实测表头 26+1、单行 30 / 双行 50（行高由内容决定） */
html[data-lang="en"] .pt-table { margin-left: 299px; }
html[data-lang="en"] .pt-table th { height: 27px; }
html[data-lang="en"] .pt-table td { height: auto; padding: 4.5px 12px; font-size: 12px; line-height: 20px; }
html[data-lang="en"] .pt-table td:first-child { font-size: 13px; }

/* 中文 03 块：标题→正文间距比 01/02 大 9px（(4).pdf 实测 41 vs 32） */
html[data-lang="zh"] .pt-block:nth-of-type(3) .pt-block__text { margin-top: 9px; }

/* 中文表格第 4 行比其余行高 1px（(4).pdf 实测 y2176–2212 = 37） */
html[data-lang="zh"] .pt-table tbody tr:nth-child(4) td { height: 37px; }

/* （2026-10-18：原 27.3% 列宽规则已合并到上方唯一权威块，避免同名规则覆盖） */

/* ============================================================================
   英文版块位置（2026-10-18 按 (4).pdf 实测重定）
   ----------------------------------------------------------------------------
   英文 01 标题 y1863.4 / 02 标题 y1975.4 / 03 标题 y2301.4（画板绝对坐标）；
   面板顶 1851.6，标题文字相对块顶约 +6.4 → 块顶 5.4 / 117.4 / 443.4。
   英文表格表头 y2009、单行 30 / 双行 50；中文表头 y2035、行高 36。
   ============================================================================ */

/* ============================================================================
   流程行整图（2026-10-16 建中给的两张整图，替代原来"6 图标 + 5 短横线 + 标签"的结构）
   ----------------------------------------------------------------------------
   规格：宽 905 / 高 87.06 / 左 267 / 顶 2978（画板）→ 区块内 top 498
   中英各一张，由 data-lang 切换显示（原来用 JS 排短横线的做法整体废弃 ✗）
   ============================================================================ */
.pt-steps-row {
  position: absolute; left: 267px; top: 498px; width: 905px; height: 87.06px; display: block;
}
.pt-steps-row--zh { display: none; }
html[data-lang="zh"] .pt-steps-row { display: none; }
html[data-lang="zh"] .pt-steps-row--zh { display: block; }
/* 首屏 data-lang 未写上时默认按 EN（HTML 原文）*/
html:not([data-lang]) .pt-steps-row--zh { display: none; }

/* ============================================================================
   合作模式三块：唯一权威规则（2026-10-16 去重后重建）
   ----------------------------------------------------------------------------
   ⚠️ 此前这些选择器在文件里各有 2~4 条同名规则 ✗，我改的总是被后面的原始规则覆盖，
      表现为「改了没变化 / 越改越乱」✗。
   现全部删除、在文件末尾重建唯一一条 —— **今后改这几处，只改这四块** ✓
   ============================================================================ */

/* ============================================================================
   合作模式三块：唯一权威规则（2026-10-16 去重后重建）
   ----------------------------------------------------------------------------
   ⚠️ 此前这些选择器在文件里各有 2~4 条同名规则 ✗，我改的总是被后面的原始规则覆盖，
      表现为「改了没变化 / 越改越乱」✗。
   现全部删除、在文件末尾重建唯一一条 —— **今后改这几处，只改这四块** ✓
   ============================================================================ */
.pt-block { position: absolute; left: 0; width: 1312px; }
/* 中文默认块位置（2026-10-18 按 (4).pdf 标题实测；英文覆盖在文件末尾）
   —— 原先把 top 写在 HTML 行内，EN 的 data-lang 规则会被行内样式压掉，改到 CSS 统一管理 */
.pt-block:nth-of-type(1) { top: 31.0px; }
.pt-block:nth-of-type(2) { top: 152.4px; }
.pt-block:nth-of-type(3) { top: 466.7px; }

.pt-block__no { position: absolute; left: 223px; top: 11.8px; }

.pt-block__title {
  margin: 0 0 0 298px; padding: 0;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  /* 2026-10-18：设计稿实测是 Bold（此前 400 导致英文标题窄 8%~9%），改 700；中文 CJK 宽度不变 */
  font-size: 20px; font-weight: 700; line-height: 30px; letter-spacing: 0;
  color: #8A110F; text-align: left;
}

.pt-block__text {
  margin: 0; padding: 0 165px 0 298px;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 400; line-height: 30px; letter-spacing: 0;
  color: #17191C; text-align: left;
}

/* 中文标题/正文 x 比英文各右移 2px：(4).pdf 实测中文 x365、英文 x362 */
html[data-lang="zh"] .pt-block__title { margin-left: 300px; }
html[data-lang="zh"] .pt-block__text { padding-left: 300px; }



/* ============================================================================
   英文版三块位置（2026-10-16 建中：灰底一致 ≠ 内容排布一致；英文要"刚好包住"）
   ----------------------------------------------------------------------------
   灰底固定 1312×577 不动 ✓（与中文完全一致）
   英文正文比中文多行：
     01 Definition  2 行（中文 2 行）→ 同上
     02 表格 6 行（中文 6 行）→ 同上
     03 Headquarters Support **3 行**（中文 **1 行**）→ 多 60px ✗
   → 英文版把三块整体上收，使 03 的第 3 行正好收在灰底内沿（画板 2424 附近）
   ============================================================================ */
html[data-lang="en"] .pt-block:nth-of-type(1) { top: 5.4px; }
html[data-lang="en"] .pt-block:nth-of-type(2) { top: 117.4px; }
html[data-lang="en"] .pt-block:nth-of-type(3) { top: 443.4px; }

/* ============================================================================
   2026-10-18 标题 / 字号修正（只改文字，不动任何图片）
   ----------------------------------------------------------------------------
   · 中文卡片标题：设计稿 20px（原 16px）→ 20px/28
   · 卡片描述：设计稿是白色 Regular（原 300 + 72% 透明度偏暗）→ #FFF / 400，top +3
   · 首屏主标题：按设计稿墨迹上移 2px
   · 字体子集已做 OTS 修复（subset_fonts.py），标题/正文现在真正使用 Alibaba
   试过的「英文卡标题 400」「首屏正文 400 + 0.6px 字距」像素反而变差，已回退。
   ============================================================================ */
html[data-lang="zh"] .pt-card__title { font-size: 20px; line-height: 28px; }
.pt-card__desc { top: 522px; font-weight: 400; color: #FFFFFF; }
.pt-hero__title { top: 255.3px; }

/* ============================================================================
   JOIN MTPEAK 弹窗（2026-10-18，按 (4).pdf p8 中文 / p9 英文实测）
   ----------------------------------------------------------------------------
   卡片 500×260 / 圆角 20 / 底色 #191919；标题与副标题 20px/27 Bold；
   邮件按钮 300×40 / 圆角 20 / #8A110F，left 94 / top 186；
   关闭按钮 20×20，top 17 / right 24。遮罩与卡片都随 fit.js 的 body zoom 缩放。
   ============================================================================ */
.pt-modal { position: fixed; left: 0; top: 0; right: auto; bottom: auto; z-index: 1200; display: none; align-items: center; justify-content: center; }
.pt-modal.is-open { display: flex; }
.pt-modal__mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.pt-modal__card {
  position: relative; width: 500px; height: 260px;
  background: #191919; border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.pt-modal__card:focus { outline: none; }
.pt-modal__close:focus { outline: none; }
.pt-modal__close:focus-visible,
.pt-modal__mail:focus-visible { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: 3px; }
.pt-modal__close {
  position: absolute; top: 17px; right: 24px; width: 20px; height: 20px;
  padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0;
}
.pt-modal__close svg { display: block; width: 20px; height: 20px; }
.pt-modal__title,
.pt-modal__sub {
  position: absolute; left: 0; width: 100%; margin: 0; text-align: center;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 20px; font-weight: 700; line-height: 27px; letter-spacing: 0; color: #FFFFFF;
}
.pt-modal__title { top: 53px; }
.pt-modal__sub { top: 81px; }
.pt-modal__label {
  position: absolute; top: 159px; left: 0; width: 100%; margin: 0; text-align: center;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 700; line-height: 18px; letter-spacing: 0; color: #FFFFFF;
}
.pt-modal__mail {
  position: absolute; left: 94px; top: 186px; width: 300px; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 20px; background: #8A110F; color: #FFFFFF;
  font-family: 'Alibaba PuHuiTi', -apple-system, 'PingFang SC', sans-serif;
  font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: 0;
  text-decoration: none;
}
.pt-modal__mail svg { display: block; width: 18px; height: 13px; flex: none; }
.pt-modal__mail:hover { background: #9C1714; }
html.pt-modal-open, html.pt-modal-open body { overflow: hidden; }

/* ============================================================================
   2026-10-18 设计标注（第一张图 / 中文）——只改文字，不动任何图片
   ----------------------------------------------------------------------------
   直接从设计工具标注读取：字号 / 字重 / 行高 / 字距 / 颜色 / 宽高 / 顶左。
   · Hero 标题：36/700/49，top 251，left 175
   · Hero 正文：14/400/25，字距 1，top 330/355/380，宽 502，left 176.5
   · 为什么加入标题：24/700/33，top 873（区块内 73）
   · 三卡标题：20/700/27，top 1442（卡内 475）
   · 三卡描述：12/400/16，白，top 1488（卡内 521），left 287 / 宽 237
   · 01 定义：标题 top 32，正文 top 62、宽 792、颜色 #010101
   · CTA3「获取合作手册」：14/400/25，字距 1
   ============================================================================ */
.pt-hero__title { top: 251px; line-height: 49px; }
html[data-lang="zh"] .pt-hero__l1 { top: 330px; }
html[data-lang="zh"] .pt-hero__l2 { top: 355px; }
html[data-lang="zh"] .pt-hero__l3 { top: 380px; }
html[data-lang="zh"] .pt-hero__l1,
html[data-lang="zh"] .pt-hero__l2,
html[data-lang="zh"] .pt-hero__l3 {
  font-weight: 400; letter-spacing: 1px; width: 502px; white-space: nowrap;
}
.pt-why > .pt-h2 { top: 73px; line-height: 33px; }
html[data-lang="zh"] .pt-card__title { top: 475px; line-height: 27px; font-size: 20px; }
.pt-card__desc { top: 521px; left: 32px; width: 237px; font-size: 12px; line-height: 16px; font-weight: 400; color: #FFFFFF; }
/* 设计标注这一张是中文；英文卡描述保持原来的 260 宽，避免英文断行变差 */
html[data-lang="en"] .pt-card__desc { top: 522px; left: 20px; width: 260px; }
.pt-block:nth-of-type(1) { top: 32px; }
.pt-block__text { padding-right: 220px; color: #010101; }
html[data-lang="zh"] .pt-cta2--brochure .pt-cta2__l1 { font-size: 14px; line-height: 25px; letter-spacing: 1px; font-weight: 400; }

/* ============================================================================
   2026-10-18 设计标注（第二批：英文 + 表格 / 03 细节）
   ----------------------------------------------------------------------------
   · EN Hero 正文：14/400/25，字距 1，top 330，宽 608
   · EN 01：块 top 7；正文 top 38（+1 margin）、宽 792
   · EN 03：正文 top 37（+2 margin）、宽 792
   · 中文 03：正文 width 811（padding-right 201），top +2（margin 11）
   · EN 卡标题 top 1442 → 475；卡描述 237 宽 / left 32 / top 521（中英统一）
   · EN CTA3：Access + Partnership Brochure 均 14/400/25，字距 1
   · 表格右列：Microsoft YaHei / 12 / 20；中文第 4 行高 36
   ============================================================================ */
html[data-lang="en"] .pt-hero__l1 { top: 330px; }
html[data-lang="en"] .pt-hero__l2 { top: 355px; }
html[data-lang="en"] .pt-hero__l3 { top: 380px; }
html[data-lang="en"] .pt-hero__l1,
html[data-lang="en"] .pt-hero__l2,
html[data-lang="en"] .pt-hero__l3 {
  font-weight: 400; letter-spacing: 1px; width: 608px; white-space: nowrap;
}
html[data-lang="en"] .pt-block:nth-of-type(1) { top: 7px; }
html[data-lang="en"] .pt-block:nth-of-type(1) .pt-block__text { margin-top: 1px; padding-right: 222px; }
html[data-lang="en"] .pt-block:nth-of-type(3) .pt-block__text { margin-top: 2px; padding-right: 222px; }
html[data-lang="zh"] .pt-block:nth-of-type(3) .pt-block__text { margin-top: 11px; padding-right: 201px; }
html[data-lang="en"] .pt-card__title { top: 475px; }
html[data-lang="en"] .pt-card__desc { top: 521px; left: 32px; width: 237px; }
html[data-lang="en"] .pt-cta2--brochure .pt-cta2__l1,
html[data-lang="en"] .pt-cta2--brochure .pt-cta2__l2 {
  font-size: 14px; line-height: 25px; letter-spacing: 1px; font-weight: 400;
}
.pt-table td:last-child {
  font-family: 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 12px; line-height: 20px;
}

/* ============================================================================
   2026-10-19 按 (5).pdf + 甲方标注修正
   ----------------------------------------------------------------------------
   · 合作模式：01/02/03 之间两条 914×1 #767676 分隔线（设计 x261–1174）
   · 标题：设计 Heavy；本地用 900 合成加粗；弹窗标题同步
   · 01/03 数字图：52×56（替换为带透明留白的素材），位置微调
   · 经销商表格：表头 33、内容行 36；“具体内容”行 33
   · JOIN US NOW 图形：按墨迹 bbox 右移/下移对齐设计（-13px / +12px）
   · 弹窗邮箱图标换甲方 PNG
   ============================================================================ */
.pt-panel::before, .pt-panel::after {
  content: ''; position: absolute; left: 197px; width: 914px; height: 1px;
  background: #767676; pointer-events: none; z-index: 0;
}
.pt-panel::before { top: 130.4px; }
.pt-panel::after  { top: 445.4px; }
html[data-lang="en"] .pt-panel::before { top: 109.4px; }
html[data-lang="en"] .pt-panel::after  { top: 439.4px; }

.pt-block__title { font-weight: 900; }
.pt-modal__title, .pt-modal__sub { font-weight: 900; }

.pt-process__joinimg { top: 286.2px; margin-left: -13px; }

.pt-table td:last-child { font-weight: 500; }

.pt-panel[data-model="dealer"] .pt-table th { height: 33px; }
.pt-panel[data-model="dealer"] .pt-table td { height: 36px; padding: 0 12px; }

.pt-modal__mail-icon { display: block; width: 18px; height: 12px; flex: none; }

/* 2026-10-19 经销商表格：设计稿 p6/p7 外层行距 39/46；内容行 36，表头 33 */
html[data-lang="zh"] .pt-panel[data-model="dealer"] .pt-block:nth-of-type(2) { top: 158.4px; }
html[data-lang="zh"] .pt-panel[data-model="dealer"] .pt-table td { height: 39px; }
html[data-lang="en"] .pt-panel[data-model="dealer"] .pt-table td { height: 46px; padding: 0 12px; }

/* 设计 Heavy：CJK 用 900 合成加粗 + 极细描边，避免 CJK 不参与 900 合成 */
.pt-block__title { -webkit-text-stroke: .25px currentColor; }

/* 2026-10-19 03 区块：设计标题/正文/数字图对齐；标题 Heavy 宽度微调 */
html[data-lang="zh"] .pt-block:nth-of-type(3) { top: 468.7px; }
html[data-lang="en"] .pt-block:nth-of-type(3) { top: 445.4px; }
html[data-lang="zh"] .pt-block:nth-of-type(3) .pt-block__text,
html[data-lang="en"] .pt-block:nth-of-type(3) .pt-block__text { margin-top: 2px; }

html[data-lang="en"] .pt-block:nth-of-type(1) .pt-block__title,
html[data-lang="en"] .pt-block:nth-of-type(3) .pt-block__title { margin-left: 300px; }

/* Heavy 近似：字距 0.25 补宽度（EN 01/02/03 设计分别宽 2/10/4px） */
.pt-block__title { letter-spacing: .25px; }

/* 中文经销商 02 标题上移 6px，表格下边距补回 6px，保持表头起点 */
html[data-lang="zh"] .pt-panel[data-model="dealer"] .pt-block:nth-of-type(2) { top: 152.4px; }
html[data-lang="zh"] .pt-panel[data-model="dealer"] .pt-table { margin-top: 16px; }

/* 2026-10-19 甲方：EN 经销商 01/02 太粗；表格行也太粗 → 降回设计字重 */
.pt-block__title { font-weight: 800; -webkit-text-stroke: 0; letter-spacing: .25px; }
.pt-table td,
.pt-table td:last-child { font-weight: 400; }
.pt-table td:first-child { color: #475669; }

/* 2026-10-19 最终：EN 01/02/03 标题再降一档（800 → 700），表格行保持 400 */
html[data-lang="en"] .pt-block__title { font-weight: 700; }

/* 2026-10-19 甲方参考「组合 40」重排 the-car 三张规格卡：
   160×175 黑底、圆角 18、图标 52 + 20 间距、文字 13/19 两行；解决 distribution 溢出卡片 */
.tc-band__tiles { gap: 18px; }
.tc-tile {
  width: 160px; height: 175px;
  padding: 20px 12px 14px;
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, #0B0B0B 0%, #050505 100%);
  justify-content: flex-start;
}
.tc-tile__icon { height: 52px; max-width: 100px; margin-bottom: 20px; }
.tc-tile__text { font-size: 13px; line-height: 19px; }

/* 2026-10-19 甲方按设计容器修正规格卡：112.61×115、圆角20、穿透、集中分布；
   内容缩到 34px 图标 + 9.5/12.5 文字，两行完整落在卡片内 */
.tc-band__tiles { gap: 26.09px; }
.tc-tile {
  width: 112.61px; height: 115px;
  padding: 0;
  border-radius: 20px;
  border: 1.5px solid #FFFFFF;
  background: transparent;              /* 图层模式：穿透 */
  justify-content: center;              /* 布局分布：集中分布 */
}
.tc-tile__icon { height: 34px; max-width: 100px; margin-bottom: 14px; }
.tc-tile__text { font-size: 9.5px; line-height: 12.5px; }
html[data-lang="zh"] .tc-tile__text { margin-top: 0; }

/* 2026-10-19 对齐设计稿 390×115 规格条：顶部 412，卡片 112.61，图标 38，卡片一断两行 */
.tc-band__tiles { top: 412px; gap: 26.09px; }
.tc-tile { width: 112.61px; height: 115px; border-radius: 20px; border: 1.5px solid #FFFFFF; background: transparent; justify-content: center; padding: 0; }
.tc-tile__icon { height: 38px; max-width: 100px; margin-bottom: 14px; }
.tc-tile__text { font-size: 9.5px; line-height: 12.5px; }
html[data-lang="zh"] .tc-tile__text { margin-top: 0; }

/* 2026-10-19 01/02 分隔线改挂到 01 模块底部（不再用 panel 固定 top；01 文案长短变化时线跟随） */
.pt-panel::before { display: none; }
.pt-panel .pt-block:nth-of-type(1)::after {
  content: "";
  position: absolute; left: 133px; bottom: 0;
  width: 914px; height: 1px; background: #767676;
}

/* 2026-10-19 按设计工具数值校正 01/02/03 竖排：
   01 块 top38.42；01/02 线 left300/right220（宽792）；02/03 线 472.58；
   02 块 EN148.82；03 块 EN478.58 / ZH495.9；面板 EN601 / ZH619 */
.pt-block:nth-of-type(1) { top: 38.42px; }
.pt-panel .pt-block:nth-of-type(1)::after { left: 236px; width: 792px; }
html[data-lang="en"] .pt-block:nth-of-type(2) { top: 148.82px; }
.pt-panel::after { top: 472.58px; }
html[data-lang="en"] .pt-block:nth-of-type(3) { top: 478.58px; }
html[data-lang="zh"] .pt-block:nth-of-type(3) { top: 495.9px; }
html[data-lang="en"] .pt-panel { height: 601px; }
html[data-lang="zh"] .pt-panel { height: 619px; }

/* 2026-10-19 对齐 1440×880 画板：面板 1312×575（top251.58 / 左右64 / 底53.42）；
   01 top38.42；02/03 线472.58；01/02 线随 01 底部；03 块 EN/ZH 478.58，压缩到 96.42 以落在面板内 */
.pt-panel { top: 251.58px; height: 575px; }
.pt-block:nth-of-type(1) { top: 38.42px; }
.pt-panel .pt-block:nth-of-type(1)::after { left: 236px; width: 792px; }
html[data-lang="en"] .pt-block:nth-of-type(2) { top: 148.82px; }
html[data-lang="zh"] .pt-block:nth-of-type(2) { top: 152.4px; }
.pt-panel::after { top: 472.58px; }
html[data-lang="en"] .pt-block:nth-of-type(3),
html[data-lang="zh"] .pt-block:nth-of-type(3) { top: 478.58px; height: 96.42px; }
.pt-block:nth-of-type(3) .pt-block__desc { line-height: 20px; }

/* 2026-10-19 合作模式整段用四态高清图：
   EN/ZH × Distributor/Dealer；点击 tab 写 .pt-model[data-model]，语言写 html[data-lang] */
.pt-model > .pt-model__state {
  position: absolute; left: 0; top: 0;
  width: 1440px; height: 880px; display: none; z-index: 0;
}
.pt-model > .pt-h2,
.pt-model > .pt-section-rule,
.pt-model > .pt-panel,
.pt-model .pt-tab__icon,
.pt-model .pt-tab__mark { display: none; }
.pt-model > .pt-tabs { opacity: 0; z-index: 2; }
.pt-model .pt-tab { width: 120px; height: 96px; }
.pt-model .pt-tab:first-child { left: 555.4px; }
.pt-model .pt-tab:nth-child(2) { left: 781.15px; }
.pt-model .pt-tab__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-lang="en"] .pt-model[data-model="distributor"] > .pt-model__state[data-state="en-distributor"],
html[data-lang="en"] .pt-model[data-model="dealer"] > .pt-model__state[data-state="en-dealer"],
html[data-lang="zh"] .pt-model[data-model="distributor"] > .pt-model__state[data-state="zh-distributor"],
html[data-lang="zh"] .pt-model[data-model="dealer"] > .pt-model__state[data-state="zh-dealer"] { display: block; }

/* 2026-10-19 media 首页分页指示条按设计标注修正：
   active 80 / inactive 40 / gap 20；3 张时总宽正好 200，指示器整体居中。
   用 max-content 而不是写死 200：slide 数量变化时（后续接后端）仍能按实际条数居中。 */
.md-hero__dots { width: max-content; gap: 20px; }
.md-hero__dot { width: 40px; }
.md-hero__dot.is-active { width: 80px; }

/* 2026-10-19 media 指示条高度按设计确认改为 2px；三条 flex 同一行、y 轴严格对齐 */
.md-hero__dots { height: 2px; align-items: center; }
.md-hero__dot { height: 2px; }

/* 2026-10-19 media 首屏轮播：5s 自动 + 左右滑动；横向手势交给脚本，纵向仍可滚动 */
.md-hero { touch-action: pan-y; -webkit-user-select: none; user-select: none; }

/* 2026-10-19 media 首屏分页指示器 x 轴居中（3 张时总宽 200，中心 720） */
.md-hero__dots { left: 50%; transform: translateX(-50%); }

/* 系统开启「减弱动态效果」时取消轮播位移动画（media.js 同时会停掉自动播放） */
@media (prefers-reduced-motion: reduce) {
  .md-hero__track { transition: none; }
}

/* 2026-10-19 media READ MORE：初始 3 张；展开后 5 张，按 3 列瀑布流从上到下、从左到右，按钮消失 */
.md-card--extra { display: none; }
.md-list.is-expanded { height: 1220px; }
.md-cards.is-expanded {
  display: block;
  width: 1016px;
  column-count: 3;
  column-gap: 58px;
}
.md-cards.is-expanded .md-card {
  display: block;
  width: 300px;
  margin: 0 0 40px;
  break-inside: avoid;
}
.md-cards.is-expanded .md-card--extra { display: block; }
.md-list.is-expanded .md-more { display: none; }

/* 2026-10-19 修复 Story 时间线 TIMELINE 重影：新顶图已经自带 TIMELINE 白字，隐藏 HTML 叠字 */
.ht-timeline__label { display: none; }

/* 2026-10-19 Story 转折：红框处（字标与第一行之间）及两行行距加高一点
   title top 140→150、line-height 54→58；下方宽图 top278 不变，仍留 12px */
.ht-switch__title { top: 150px; line-height: 58px; }

/* 2026-10-19 Story 创始人：肖像上端与 BARRY RAN 文案上端对齐（top 252.9→222，尺寸/左边不变） */
.ht-founder__portrait { top: 222px; }

/* 2026-10-19 首页 01/DESIGN、03/CUSTOMIZATION 换 4320×2400（1.8）后，
   旧 CSS 仍是方图的 1440px auto + center -320/-300px，会把新图整体上移裁掉。
   新图与 1440×800 区块同比例，改回 1:1 完整铺满。 */
.feature--design .feature__bg,
.feature--custom .feature__bg {
  background-size: 1440px 800px;
  background-position: 0 0;
}

/* 2026-10-19 MEDIA 新闻列表接接口：卡片标题/摘要按设计卡高做两行截断，
   避免接口真实标题/摘要比测试文案长时撑出卡片。 */
.md-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.md-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 2026-10-19 MEDIA READ MORE 展开：4 条时 CSS columns 会平衡成 2 列，
   改成 3 列 grid，保证和设计稿的 3 列卡片节奏一致。 */
.md-cards.is-expanded {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  column-gap: 58px;
  row-gap: 40px;
  width: 1016px;
}
.md-cards.is-expanded .md-card {
  width: 300px;
  margin: 0;
}