.hero-top{position:static;display:block;margin:0 0 20px;justify-content:flex-start}
.ht-short{display:none}
.hero::after{background:
  linear-gradient(180deg,rgba(10,11,20,.6) 0%,rgba(10,11,20,.24) 22%,rgba(10,11,20,0) 42%),
  linear-gradient(0deg,rgba(10,11,20,.92) 0%,rgba(10,11,20,.62) 26%,
    rgba(10,11,20,.16) 52%,rgba(10,11,20,0) 74%),
  linear-gradient(90deg,rgba(10,11,20,.5) 0%,rgba(10,11,20,.1) 48%,rgba(10,11,20,0) 68%)}
.hero .sub{max-width:50ch}
.hero-inner{padding-bottom:calc(clamp(28px,5vh,56px) + 44px)}
.hero-foot{left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,24px);justify-content:space-between}
@media(max-width:600px){
  .hero-block{width:auto}
  .ht-long{display:none}
  .ht-short{display:inline}
  .hero::after{background:
    linear-gradient(180deg,rgba(10,11,20,.5) 0%,rgba(10,11,20,.14) 26%,rgba(10,11,20,0) 46%),
    linear-gradient(0deg,rgba(10,11,20,.95) 0%,rgba(10,11,20,.72) 30%,
      rgba(10,11,20,.3) 58%,rgba(10,11,20,0) 82%)}
}

.rail{background:var(--ink);color:var(--paper);padding:clamp(72px,7vw,104px) 0}
.rail .eyebrow{color:var(--orange)}

.rail .sec-title{color:var(--paper)}
.rail .sec-title .em{color:var(--orange)}
.rail .lead{color:rgba(243,241,234,.7)}
.rail-top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,72px);flex-wrap:wrap}
/* 2026-10：能力图例（实心/空心方块）随固定能力矩阵一起删除 —— 两栏选型轨各自带自己的
   能力清单，图例已无内容可解释。 */
.rail-cols{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line-2);
  margin-top:clamp(34px,4.4vw,60px)}
.rc{padding:28px 30px 4px 0;border-left:1px solid var(--line-2)}
.rc:first-child{border-left:0}
.rc:not(:first-child){padding-left:30px}
.rc:last-child{padding-right:0}
.rc-code{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,4.6vw,4.1rem);line-height:.88;letter-spacing:.01em}
.rc-pow{margin:10px 0 20px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;color:var(--orange)}
.rc-caps li{display:flex;align-items:center;gap:11px;padding:5px 0;
  font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.55)}
.rc-caps li .sq{width:11px;height:11px;flex:none;border:1px solid rgba(243,241,234,.4)}
.rc-caps li.on{color:var(--paper)}
.rc-caps li.on .sq{background:var(--orange);border-color:var(--orange)}
.rc-link{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);border-bottom:1px solid rgba(240,149,10,.5);
  padding-bottom:3px;transition:.25s}
.rc-link:hover{color:#fff;border-color:#fff}

/* 数字带不是 .section：上下内边距自己给（设计稿 .figures{padding:var(--sec-gap) 0 var(--sec-y)} ——
   上面是墨色 rail、下面是纸面 #x1，rail|figures 是不同底色交界 → 两侧各出满档；
   figures|#x1 同底色 → 各出半档（下半档由 #x1 的 padding-top 出，见下）。 */
.figures{display:grid;grid-template-columns:repeat(3,1fr);
  padding:clamp(72px,7vw,104px) 0 clamp(36px,4.5vw,70px)}
.fig{padding:0 clamp(20px,3vw,48px);border-left:1px solid var(--line)}
.fig:first-child{border-left:0;padding-left:0}
.fig b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,6.6vw,6rem);line-height:.86;letter-spacing:.005em}
.fig b .u{font-size:.42em;margin-left:.14em;letter-spacing:.02em}
.fig span{display:block;margin-top:14px;font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.fig.hi b{color:var(--orange)}

/* 段间距：本页同底色邻居各出半档（设计稿 2026-10 的规则）。本页底色序列
   rail(墨) · figures(纸) · x1(纸) · mseries(paper-2) · engineering(paper-2) · oem(纸) · engNote(墨) · faq(纸) · inq(paper-2)，
   同底色相邻两对 = figures|x1、mseries|engineering。主题没有 --sec-y / --sec-gap（.section 一档是
   clamp(72px,9vw,140px)），半档取 clamp(36px,4.5vw,70px)，两半相加正好一档。
   #x1 的 padding-top 用 id 写：它盖掉 .section 的整档（而已删的 .sec-top 正是给旧的 #m3 留的额外内边距）。 */
#x1{padding-top:clamp(36px,4.5vw,70px)}
#mseries{padding-bottom:clamp(36px,4.5vw,70px)}
#engineering{padding-top:clamp(36px,4.5vw,70px)}
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(22px,3vw,46px);align-items:start;
  margin-top:clamp(30px,3.8vw,48px)}
.plate{position:relative;margin:0;background:#fff;border:1px solid var(--line);overflow:hidden}
.plate a{display:block}
.plate img{width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;display:block}
/* Hover attaches to the image link, not the figure, so brushing the caption does not lift the bike.
   The tightest content margin across the four images is 8.2% (m3) = ~34px on a 633px plate, so a
   6px lift uses 18% of it and cannot clip the bike.
*/
.plate img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
  .plate a:hover img{transform:translateY(-6px) scale(1.012)}
}
/* The global reduced-motion rule only zeroes transition duration, so the shift would still jump;
   cancel the transform too.
*/
@media(prefers-reduced-motion:reduce){
  .plate a:hover img{transform:none}
}
.plate figcaption{padding:12px 16px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--muted);background:var(--paper)}
.vName{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,1.95vw,1.9rem);line-height:1.04;margin:0 0 16px}
.copy > p{margin:0;font-size:var(--fs-body);line-height:1.72}
.copy .insight{margin-top:20px;border-top:1px solid var(--ink);padding-top:15px}
.copy .insight p{color:var(--muted)}

/* M5 and M6 share one border so they read as a single object. Two bordered plates above a two-column
   split aligned into four vertical lanes, which made the left column look like it described the M5
   alone when it describes both bikes.
*/
.pair{margin:clamp(30px,3.8vw,48px) 0 0;border:1px solid var(--line);background:#fff;overflow:hidden}
.pair-imgs{display:grid;grid-template-columns:repeat(3,1fr)}
.pair-imgs a{position:relative;display:block}
.pair-imgs img{width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pair-imgs a + a{border-left:1px solid var(--line)}
/* The model label sits on the image's own bottom-left corner (it belongs to that image) instead of a
   separate strip below. The shots already carry 10-13% white margin there, so it covers no wheel or
   shadow, and --muted reads ~5.2:1 on white. pointer-events:none keeps the image link clickable.
*/
.pair-imgs .tag{position:absolute;left:0;bottom:0;padding:0 12px 4px;pointer-events:none;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--muted);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Same lift as .plate; only the img moves, the label is the reference point and must stay. */
@media(hover:hover){ .pair-imgs a:hover img{transform:translateY(-6px) scale(1.012)} }
@media(prefers-reduced-motion:reduce){ .pair-imgs a:hover img{transform:none} }
/* Image caption strip: one cell per bodywork, each with that bike's own product button.
   Every bike has its own product page, so the buttons cannot be merged into one.
   2026-10: three bodyworks now, not two. */
.pair figcaption{display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--paper)}
.pair figcaption .cap{padding:14px 16px;display:flex;align-items:center}
.pair figcaption .cap + .cap{border-left:1px solid var(--line)}
/* Shared copy is a single column (780, the same tier as the section headings). */
.pairNote{max-width:780px;margin-top:clamp(28px,3.6vw,44px)}
.pairNote .vName{margin-bottom:16px}
.pairNote p{margin:0;font-size:var(--fs-body);line-height:1.72}
.pairNote .roi{margin-top:20px;border-top:1px solid var(--ink);padding-top:15px;color:var(--muted)}

/* Hand-off to the adult end of the same platform (M5 MAX / M6 MAX / M12 MAX / M8).
   A full-width statement row, not a card: it closes the section, it is not another option inside it. */
.xlink{margin-top:clamp(30px,3.8vw,48px);border-top:2px solid var(--ink);padding-top:clamp(20px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);align-items:center;justify-content:space-between}
.xlink .xl-t{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.1;letter-spacing:.01em}
.xlink .xl-d{margin:8px 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--muted);max-width:60ch}

.band{margin:clamp(30px,3.8vw,48px) 0 0;border:1px solid var(--line);background:#0c0e18}
.band img{width:100%;aspect-ratio:16/9;object-fit:cover}
.band figcaption{padding:12px 16px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--muted);background:var(--paper)}

.tbl{margin-top:clamp(28px,3.6vw,46px);border-top:2px solid var(--ink)}
.tRow{display:grid;position:relative}
.tRow > *{padding:14px 16px;font-size:var(--fs-body);line-height:1.6}
.tRow > *:not(:first-child){border-left:1px solid var(--line);font-family:var(--mono);font-weight:700;
  font-variant-numeric:tabular-nums}
.tRow.head > *{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:16px}
.tRow.lab > *:first-child{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.tbl.t2 .tRow{grid-template-columns:1.25fr repeat(2,1fr)}
.tbl.t4 .tRow{grid-template-columns:1.15fr repeat(3,1fr)}
.tbl.t5 .tRow{grid-template-columns:1.05fr repeat(4,1fr)}
/* 各栏重复的项不写四遍，收成表格下一条通栏脚注（模板 table.php 的 'note'）。
   刻意放在 .tbl 之外：≤1024 这张表会转置，隐式列网格里 grid-column:1/-1 跨不了全宽
   （实测会缩成 146px 一列），放在外面则任何宽度下都是一条通栏小字。
   视觉上与表内一行等价：同样的 mono/字号/颜色 + 同样的行底发丝线。 */
.tblNote{margin:0;padding:14px 16px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:400;line-height:1.85;color:var(--muted)}
/* Rows stagger in via --d, written by assets/js/teen.js in row order. Scoped under .js so a blocked
   script cannot leave every row stuck at opacity:0.
*/
.js .tbl.reveal .tRow{opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.js .tbl.reveal.vis .tRow{opacity:1;transform:none;transition-delay:var(--d,0ms)}

.upgrades{margin-top:clamp(28px,3.6vw,46px);border-top:2px solid var(--ink)}
.upRow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,76px);align-items:end;
  padding:24px 0}
.upRow .area{margin:0 0 12px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Three fixed columns so all five arrows start, end and measure identically. The 2px line avoids a
   1px line splitting unevenly at fractional devicePixelRatio (verified at DPR 1.25).
*/
.swap{display:grid;grid-template-columns:minmax(0,208px) clamp(64px,9vw,148px) auto;
  align-items:center;gap:16px;margin:0;font-family:var(--mono);font-size:var(--fs-body);line-height:1.4}
.swap .from{color:var(--muted)}
.swap i{--arrow:#B0AFB0;width:100%;height:2px;background:var(--arrow);position:relative}
.swap i::after{content:"";position:absolute;right:0;top:-4px;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:8px solid var(--arrow)}
.swap .to{font-weight:700;color:var(--ink)}
.benefit{margin:0;padding-top:2px;font-size:var(--fs-body);line-height:1.7;color:var(--muted);max-width:52ch}

.engNote{background:var(--ink);color:var(--paper);padding:clamp(72px,6vw,92px) 0}
.engLab{margin:0 0 18px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange)}
.engStmt{margin:0;max-width:34ch;font-family:var(--sans);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,2.1rem);line-height:1.32;letter-spacing:-.005em;color:rgba(243,241,234,.96)}
.engStmt em{font-style:normal;color:var(--orange)}
.engNoteGrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,90px);align-items:end}
.engSide{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:6px}
.engMail{margin:0;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgba(243,241,234,.62)}
.engMail a{color:rgba(243,241,234,.85);border-bottom:1px solid rgba(243,241,234,.35)}
.engMail a:hover{color:var(--orange);border-color:var(--orange)}

/* The background image is handled like the kids SKU area: 50% wash, right-anchored, left edge fading
   into paper, hidden below 1300px. The fade must stay fully opaque until 50% and only then ramp -
   --muted on paper is already 4.43:1, and the FAQ's real ink edge reaches only 48.3% of the viewport
   (.q p wraps at 62ch ~500px, not at its 860px box, so measuring the box misleads).
   Starting the ramp at 44% measured 228 on the copy background (3.93:1, below baseline).
*/
#faq{position:relative;overflow:hidden}
/* Fills the whole section (inset:0). aspect-ratio plus vertical centring left the element shorter
   than the section and cut a hard white edge above the image.
*/
#faq .faqBg{position:absolute;inset:0;opacity:.5;z-index:0;pointer-events:none}
#faq .faqBg img{width:100%;height:100%;object-fit:cover;object-position:74% 50%}
#faq .faqBg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 50%,
      rgba(243,241,234,.8) 57%,rgba(243,241,234,.28) 62%,rgba(243,241,234,0) 66%),
    linear-gradient(0deg,var(--paper) 0%,rgba(243,241,234,.5) 7%,rgba(243,241,234,0) 16%)}
#faq > .wrap{position:relative;z-index:2}
@media(max-width:1300px){#faq .faqBg{display:none}}

.faq{max-width:860px;margin-top:clamp(28px,3.6vw,46px);border-top:2px solid var(--ink)}
.q{display:grid;grid-template-columns:54px 1fr;gap:20px;align-items:start;
  padding:24px 0}
.q .n{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.16em;color:var(--orange);
  padding-top:3px}
.q h3{margin:0 0 9px;font-family:var(--sans);font-weight:800;letter-spacing:.02em;font-size:var(--fs-body);
  line-height:1.35}
.q p{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--muted);max-width:62ch}

@media(max-width:1024px){
  .rail-cols{grid-template-columns:1fr 1fr}
  .rc{border-top:1px solid var(--line-2);border-left:0;padding:26px 26px 4px 0}
  /* 两列布局下：左列（奇数项）为 pl 0 / pr 26，右列（偶数项）为 pl 26 / pr 0 ——
     两列内容宽度相等，26px 就是列间距，右边沿与容器齐。
     ⚠ 这两条必须把 padding 写全：桌面版的 .rc:not(:first-child){padding-left:30px} 和
     .rc:last-child{padding-right:0} 权重（0,2,0）高于 ≤ 1024 的 .rc{padding:…}（0,1,0），
     会漏到窄屏上来 —— 实测第 3 个 rc 残留 30px 左缩进（与第 1 个不对齐），
     而右列第 2 个 rc 的右边距 26 与第 4 个的 0 也不一致。 */
  .rc:nth-child(odd){padding-left:0;padding-right:26px}
  .rc:nth-child(even){border-left:1px solid var(--line-2);padding-left:26px;padding-right:0}
  .rc:nth-child(1),.rc:nth-child(2){border-top:0}
  .split{grid-template-columns:1fr}
  .upRow{grid-template-columns:1fr;gap:14px;align-items:start}
  .engNoteGrid{grid-template-columns:1fr;align-items:start}

  /* 规格对比表 X/Y 轴转置：型号当行、参数当列（与 kids 的 specs 表同一套处理，见 kids.css）。
     原来 ≤ 640px 是「压成一列 + 表头隐藏 + 用 data-l 把列名贴到值上方」—— 竖着排完跨型号
     没法对比；而 641–1024px 这段更糟：只能吃到 kids.css 的通用 .tRow 规则（表头藏了、又没有
     data-l 标签），完全看不出哪个值属于哪个型号。
     转置后任一参数列里各型号的值上下相邻、同屏可见，横滑只是换看哪个参数。
     做法：.tbl 自己当 grid、.tRow 用 display:contents 交出格子，再按列优先排版；
     每列 N 格 = 表头 + N-1 个型号，N 由 table.php 算出来写在 --cols 上。
     选择器用 .tbl（不带 tN）就够：本文件只在这一页加载，页面上的 .tbl 就是这三张表。 */
  .tbl{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--cols,4),auto);
    grid-auto-columns:minmax(146px,1fr);overflow-x:auto}
  .tbl .tRow{display:contents}
  /* .tRow 不再生成盒子：行发丝线改挂在格子上，行间的 border-top 要清掉（用 border-bottom 就够） */
  .tbl .tRow > *{border-top:0;border-left:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* 只有第一列该固定 —— 转置后 head 行的格子落在第一列（= 型号名）。
     ⚠ 不能用 `:first-child`：那选到的是各行的参数名，它们全落在第一行，会一起粘在左边缘堆成一坨。
     底色 --ink 来自基础规则，不透明，能遮住从底下滑过去的参数列。 */
  .tbl .tRow.head > *{position:sticky;left:0;z-index:1}
  /* 第一行 = 参数名，与第一列合成表头的 L 形 */
  .tbl .tRow.lab > *:first-child{background:var(--ink);color:var(--paper)}
  /* 行依次展开的动画改到格子上（--d 由 teen.js 设在 .tRow 上，display:contents 仍会继承下来） */
  .js .tbl.reveal .tRow > *{opacity:0;transform:translateY(10px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease;
    transition-delay:var(--d,0ms),var(--d,0ms),0ms}
  .js .tbl.reveal.vis .tRow > *{opacity:1;transform:none}
}
@media(max-width:700px){
  /* 2026-10：选型轨从四栏变两栏，701–1024 仍能两栏并排（每列 ~315px），到 700 以下才竖排。
     注意把 nth-child 两条写全：≤1024 那组 .rc:nth-child(odd/even) 权重（0,2,0）高于 .rc（0,1,0），
     不写就会把两列时的左右缩进漏到单列上来（与上一版注释同一个坑）。 */
  .rail-cols{grid-template-columns:1fr}
  .rc,.rc:nth-child(odd),.rc:nth-child(even){border-top:1px solid var(--line-2);border-left:0;
    padding:26px 0 4px}
  .rc:first-child{border-top:0}
  .figures{grid-template-columns:1fr}
  .fig{border-left:0;padding:22px 0 4px}
  .fig:first-child{border-top:0;padding-top:4px}
  .band{margin-top:clamp(26px,5vw,40px)}
}
@media(max-width:640px){
  .pair-imgs{grid-template-columns:1fr}
  .pair-imgs a + a{border-left:0}
  /* 2026-10（用户）：手机上图片竖排后，标签居中 + 末尾加一个「→」告诉客户可以点；
     图下的按钮条随之隐藏。标签不做成按钮样式（底色/描边太丑），保持原有 mono 小字。
     链接就是图片本身（模板里 .pair-imgs a → 该型号产品页），pointer-events:none 让它不挡链接。 */
  .pair figcaption{display:none}
  .pair-imgs .tag{left:50%;transform:translateX(-50%);max-width:calc(100% - 24px)}
  .pair-imgs .tag::after{content:" →"}
  /* 表格不再在这里改版式：≤ 1024px 已整体转置（见上面的 1024 断点），data-l 标签也随之不用了。 */
  .swap{grid-template-columns:1fr;gap:8px}
  .swap i{display:none}
  .swap .to::before{content:"↓";margin-right:9px;font-weight:400;color:var(--muted)}
  .q{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .js .tbl.reveal .tRow{opacity:1;transform:none}
}