.hero-block{width:min(680px,54%)}
.hero h1{font-size:clamp(2.32rem,min(6.11vw,9vh),5.5rem)}
/* Wide-desktop tier (>=1440): the design source runs this page on its base
   clamp(2.6rem,7vw,6rem); the 5.5rem cap above would render smaller than the
   design on wide screens. Mirrors the >=1440 step for kids/service/home in
   style.css -- same 12vh ladder, so every big-title page moves together.
   The min-height guard matters most here: this hero stacks a static hero-top
   line, a 52ch sub and a bottom metadata band, so on short viewports the 12vh
   size walks the h1 into the fixed header. Below 650px of height the shared
   9vh clamp above stays in charge. */
@media(min-width:1440px) and (min-height:650px){
  .hero h1{font-size:clamp(2.6rem,12vh,6rem)}
}
.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,.72) 0%,rgba(10,11,20,.4) 22%,rgba(10,11,20,.06) 46%),
  linear-gradient(0deg,rgba(10,11,20,.92) 0%,rgba(10,11,20,.66) 26%,
    rgba(10,11,20,.22) 54%,rgba(10,11,20,.04) 76%),
  linear-gradient(90deg,rgba(10,11,20,.82) 0%,rgba(10,11,20,.46) 40%,
    rgba(10,11,20,.12) 66%,rgba(10,11,20,0) 88%)}
.hero .sub{max-width:52ch}
/* The bottom metadata band owns the last narrow strip; hero-inner gets the matching
   extra bottom padding so the band and the button block never collide. */
.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}
  /* The base .hero h1 clamp above is unscoped, so it would shadow style.css's shared <=600px step
     (same specificity, this file loads second). Restating the shared step here keeps this page on
     the same phone ladder as every other hero. This page is the reason that step's slope is 13.4vw
     and not the desktop factor -- see the note on it in style.css; "Manufacturing." is the longest
     unbreakable word on the site and it sets the phone ceiling. */
  .hero h1{font-size:clamp(2.6rem,13.4vw,4.89rem)}
  /* On phones the full-bleed photo reads brighter, so the bottom needs more darkening. */
  .hero::after{background:
    linear-gradient(180deg,rgba(10,11,20,.7) 0%,rgba(10,11,20,.34) 26%,rgba(10,11,20,0) 48%),
    linear-gradient(0deg,rgba(10,11,20,.94) 0%,rgba(10,11,20,.7) 30%,
      rgba(10,11,20,.28) 58%,rgba(10,11,20,0) 82%)}
}

/* ---------- stage legend (the line before chapter one) ----------
   It doubles as the TOC: from the first screen the reader knows the page
   is four parts and how many claims each carries. The four orange ticks
   on the line are the four stages; the two ends are the journey's two ends
   (market gap / container). */
.stageline{background:var(--paper-2);padding:clamp(72px,7vw,104px) 0}
.stageline .lab{font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:26px 0 0}
.tline{display:flex;align-items:stretch;border-top:2px solid var(--ink);margin:14px 0 26px}
.tline .cap{display:flex;align-items:center;font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-right:18px}
.tline .cap.end{padding-left:18px;padding-right:0}
.tl{flex:1 1 0;min-width:0;position:relative;padding:14px 16px 0 0}
.tl::before{content:"";position:absolute;top:-8px;left:0;width:11px;height:11px;background:var(--orange)}
.tl b{display:block;font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1}
.tl .nm{display:block;font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:var(--fs-label);margin-top:7px}
.tl span{display:block;font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:3px}
@media(max-width:900px){
  /* The four stages stack vertically on narrow screens: the same line turns into a left-hand
     spine, the ticks still aligned with the top of each stage. The spine's x must match the
     one under .stage::before (both 10px) or the two lines will be offset. */
  .tline{display:block;border-top:0;border-left:2px solid var(--ink);margin-left:calc(10px - var(--pad))}
  .tline .cap{display:block;padding:0 0 6px 26px;border-left:0}
  .tline .cap.end{padding-left:26px}
  /* display:block is required, not just padding: a .tl is an <a>, and once .tline stops
     being a flex container it reverts to inline -- horizontal padding on inline boxes
     does not indent block children, so every stage's text slid onto the spine (the
     design source carries the same bug; the ::before ticks looked fine because they are
     absolutely positioned). */
  .tl{display:block;padding:14px 0 14px 26px}
  .tl::before{top:20px;left:-7px}
}

/* ---------- the four stage sections: one 2px spine all the way down ----------
   The spine is drawn on .stage::before (covering the vertical padding), and because the
   four sections are adjacent it never breaks. It is deliberately NOT drawn on .wrap's
   border -- a wrap wider than 1480 would glue the border to the screen edge.
   x is always max(10px, the outside margin), so at any width it sits in the gutter to
   the left of the content. The node squares ride the spine (left:-9px offsets the 2px
   spine plus half of the 16px square). */
.stage{padding:clamp(36px,4.5vw,70px) 0;position:relative}
.stage::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--ink);
  left:max(10px,calc((100vw - 1480px)/2));z-index:1}
.stage > .wrap{position:static}
.stage-node{position:absolute;left:calc(max(10px,calc((100vw - 1480px)/2)) - 7px);
  top:clamp(44px,6vw,76px);width:16px;height:16px;background:var(--ink);z-index:2}
.stage .sec-head{max-width:none}
/* Stage titles in the two-column layout are one notch smaller than full-width, otherwise
   74px wraps to three lines inside a ~700px column. */
.stage .sec-title{font-size:clamp(1.85rem,3.3vw,2.95rem)}
@media(max-width:900px){
  .stage::before{left:10px}
  .stage-node{left:3px;width:14px;height:14px}
}

/* ---------- each stage: two-column text/image (alternating sides) + sticky image ----------
   Locked by the user 2026-10-08: on scroll the text moves, the image does not (the image
   column is sticky); one representative image per stage at column width (~520px), no
   longer full-bleed. The apparatuses (matrix / ribbon / ladder / register) stay full-width
   below -- tables need the width. */
.stage-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.stage.flip .stage-grid{grid-template-columns:1fr 1.3fr}
.stage.flip .stage-txt{order:2}
.stage.flip .stage-media{order:1}
.stage-media{position:sticky;top:calc(var(--hh) + 40px);background:var(--ink);border:1px solid var(--line)}
.stage-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.stage-media figcaption{display:block;padding:9px 13px;
  font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.8)}
/* The apparatus block under each two-column pair (the design source carried this margin
   inline on four divs; it is a class here so the markup stays clean). */
.stage-apparatus{margin-top:clamp(26px,3.4vw,40px)}
@media(max-width:1100px){
  /* Narrow screens drop the sticky and the alternation: copy first, image after, one column.
     The breakpoint is 1100 instead of 1000: at 1024 the two-column text column is only ~400px,
     and it also holds the 36px number + the 176px figure column -- claims would wrap to 4-5
     lines at ~30 characters. */
  /* 单列时图片在上、文字在下（2026-10 用户要求，与 .split / .mrow / .duo 的移动端顺序一致）。
     桌面仍保留交替：.stage.flip 把图放在左列。 */
  .stage-grid,.stage.flip .stage-grid{grid-template-columns:1fr;gap:26px}
  .stage-grid .stage-media,.stage.flip .stage-grid .stage-media{order:1}
  .stage-grid .stage-txt,.stage.flip .stage-grid .stage-txt{order:2}
  .stage-media{position:static}
  .stage-media img{aspect-ratio:16/9}
}

/* ---------- numbered claim rows ---------- */
.rows{margin-top:clamp(26px,3.4vw,40px);border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:36px minmax(0,1fr) 176px;gap:0;align-items:center;
  padding:16px 0}
.row .rid{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--orange)}
.row h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  font-size:1rem;line-height:1.3}
.row p{color:var(--muted);font-size:var(--fs-body);line-height:1.62;margin-top:6px;max-width:96ch}
.row .fig{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;
  line-height:1.5;text-align:right;border-left:1px solid var(--line);padding-left:16px}
.row .fig i{font-style:normal;font-weight:400;color:var(--muted)}
@media(max-width:1000px){
  .row{grid-template-columns:36px minmax(0,1fr)}
  .row .fig{grid-column:2;text-align:left;border-left:0;padding-left:0;margin-top:10px}
}

/* ---------- 段间距：同底色邻居各出半档（设计稿 2026-10 的规则，与 kids/teen/adults 同一套） ----------
   本页底色序列：stageline(paper-2) · rd/mfg/eng/comp(纸) · inq(paper-2)。
   设计稿：.stageline{padding:var(--sec-gap) 0}、.stage{padding:var(--sec-y) 0}（= 半档），
   只有 #rd 的顶与 #comp 的底在色块交界处出满档：#rd{padding-top:var(--sec-gap)}、#comp{padding-bottom:var(--sec-gap)}。
   主题没有 --sec-y/--sec-gap：一档 clamp(72px,9vw,140px)（= .section），半档 clamp(36px,4.5vw,70px)。 */
#rd{padding-top:clamp(72px,9vw,140px)}
#comp{padding-bottom:clamp(72px,9vw,140px)}

/* ---------- apparatus 01: full-age product matrix ---------- */
.matrix{border-top:2px solid var(--ink)}
.mx{display:grid;grid-template-columns:196px 296px 104px minmax(0,1fr) 174px;gap:0;align-items:center;
  padding:15px 0}
.mx > *:not(:first-child){padding-left:18px}
.mx.head{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
/* 2026-10：第一列从「年龄段大号数字」改成「线名」，并新增 Wheels 列 —— 与设计稿
   production.html 的四列一致（Line / Series / Wheels / Range today）。
   线名用 mono 正文号（不再是 display 1.5rem），型号/轮径/续航三栏统一 mono 小字不加重。 */
.mx .ln{font-family:var(--mono);font-size:var(--fs-body);font-weight:700;letter-spacing:.08em;line-height:1.3}
.mx .ser,.mx .wh,.mx .rg{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
.mx a{font-family:var(--mono);font-size:var(--fs-label);color:var(--orange);text-align:right;
  border-bottom:1px solid rgba(240,149,10,.4)}
.mx a:hover{color:var(--navy);border-color:var(--navy)}
@media(max-width:1000px){
  .mx{grid-template-columns:minmax(0,1fr);gap:2px 0;padding:16px 0}
  .mx .ln{margin-bottom:3px}
  .mx > *:not(:first-child){padding-left:0}
  .mx.head{display:none}
  .mx a{text-align:left}
}

/* ---------- apparatus 02: QMS ribbon + witness photos ---------- */
.ribbon{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rb{border:1px solid var(--ink);padding:15px 16px}
.rb b{display:block;font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1}
.rb span{display:block;font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:7px}
.wit3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.wit3 figure{background:var(--ink);border:1px solid var(--line)}
.wit3 img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wit3 figcaption{padding:9px 11px}
.wit3 figcaption b{display:block;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.86)}
@media(max-width:900px){
  .ribbon{grid-template-columns:1fr 1fr}
  .wit3{grid-template-columns:1fr}
}

/* ---------- apparatus 03: three-stage ladder + field-testing-first ink bar ---------- */
.lad{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.lt{padding:18px 20px 18px 0}
.lt + .lt{border-left:1px solid var(--line);padding-left:20px}
.lt b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.25rem}
.lt span{display:block;font-family:var(--mono);font-size:var(--fs-label);line-height:1.55;
  color:var(--muted);margin-top:8px}
.fieldbar{margin-top:16px;background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:18px;
  padding:14px 20px;flex-wrap:wrap}
.fieldbar b{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--orange)}
.fieldbar span{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;color:rgba(243,241,234,.9)}
@media(max-width:900px){
  .lad{grid-template-columns:1fr}
  .lt + .lt{border-left:0;padding-left:0}
}

/* ---------- apparatus 04: standards register ---------- */
.reg{border-top:2px solid var(--ink)}
.rr{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:0;
  padding:14px 0;align-items:baseline}
.rr > *:not(:first-child){padding-left:18px}
.rr.head{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.rr b{font-family:var(--mono);font-size:var(--fs-body);font-weight:700;letter-spacing:.08em}
.rr span{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted)}
@media(max-width:900px){
  /* Once the column heads are hidden the values lose their labels; follow teenager-youth's
     data-l approach and print the column name back in front of each value. */
  .mx span::before,.rr span::before{content:attr(data-l);display:block;font-family:var(--mono);
    font-size:var(--fs-mini);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
    opacity:.8;margin-bottom:2px}
  .rr{grid-template-columns:minmax(0,1fr);gap:4px}
  .rr > *:not(:first-child){padding-left:0}
  .rr.head{display:none}
}