/* ============================================================
   织象 AIForEC 介绍站 — 页面层
   ------------------------------------------------------------
   本文件是 2026-08-26 设计交付稿的**版面移植**:
   设计稿把几何写成 inline `style=`(预览器需要),生产站把同样的几何搬成类名,
   计算值保持一致。设计系统层仍是 tokens.css,本文件只消费 var(--*)。

   🔴 设计稿运行时 props 覆盖(必须复现,否则颜色不是设计稿的颜色)
   交付稿末尾 `<script data-dc-script data-props=...>` 的三个默认值会在
   componentDidMount 里写进 :root,覆盖 tokens.css:
     deepBlockColor #2A3247 → --indigo   (tokens 里是 #17161A)
     accentLine     #C2410C → --flame    (tokens 里是 #D93A1E)
     paperGround    #F7F5F0 → --paper    (tokens 里是 #F4F1EA)
   宝哥屏幕上看到的就是这一组。tokens.css 保持与 handoff 逐字节一致不动,
   变体在这里显式登记 —— 不是"我调了个色",是把交付稿的实际交付态写下来。
   ============================================================ */

:root {
  --indigo: #2A3247;
  --flame:  #C2410C;
  --paper:  #F7F5F0;
  /* 与上面三个同源的派生值:tokens 里 --chai 与 --flame 同值,--indigo-soft 是 indigo 提亮档 */
  --chai: #C2410C;
  --indigo-soft: #3B455E;
  /* 🔴 全站唯一的纯白,功能性必需:二维码必须纯白底才扫得稳,用暖白 --paper-raised
     (#FBF9F4)会给黑白模块之间引入色偏。登记在这里而不是散在规则里,是为了让
     "为什么这里可以有纯白"跟着被读到。 */
  --qr-white: #fff;
}

/* ── _ds 基线等价复现 ──────────────────────────────────────────
   设计稿在 tokens.css 之前还加载了 `_ds/modernist-*/styles.css`(通用 Modernist
   起手样式)。那份文件 `@import` Google Fonts、另带一套色板,**生产站不能引**
   (P-CN self-host 铁律 · F7)。但设计稿的版面确实站在它的 reset 与 h1-h6 基线上,
   所以这里把**它实际生效的那几条**等价写出来,字体一律用我们自托管的。 */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }
figure { margin: 0; }
figcaption { margin-top: var(--sp-1); }

/* ── 通用件 ─────────────────────────────────────────────────── */
.frame {
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: var(--paper-raised);
  overflow: hidden;
}
.frame img { width: 100%; height: auto; }
.frame-fit { display: flex; align-items: center; justify-content: center; }
.frame-fit img { object-fit: contain; }
[data-full] { cursor: zoom-in; }
.h2 { margin: 0; font-size: var(--fs-800); font-weight: var(--w-title); line-height: var(--lh-title); }
.h3 { margin: 0; font-size: var(--fs-700); font-weight: var(--w-title); }
.lede { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); max-width: 32em; }
.eyebrow-flame { color: var(--flame); }
.sec-top { padding: var(--sp-11) 0 var(--sp-9); border-top: 1px solid var(--hairline); }
.sec-sunk { background: var(--paper-sunk); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.chip-node { border-color: var(--chai); color: var(--chai); }

/* ── nav(设计稿:brand + FOOTWEAR FIRST + 联系;实施时按 ACCEPTANCE 换成 mark + 中文名)── */
.nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.brand { display: inline-flex; align-items: baseline; gap: var(--sp-4); border: 0; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark { width: 32px; height: auto; align-self: center; }
.brand-cn { font-size: var(--fs-400); font-weight: var(--w-title); letter-spacing: var(--ls-title); }
.nav-cta { font-size: var(--fs-300); border-bottom-color: var(--hairline); }
/* 🔴 375 档 nav 三处换行(「织象」/ FOOTWEAR FIRST /「联系」各拆两行,navH 84.8 而非 65)。
   溢出量算得出来:可用宽 375−2×20(gutter)=335,内容需
   32(mark)+3×16(brand gap)+28.3+61.3+122.6+24(nav-in gap)+26(联系)=342.2 → 差 7.2px。
   临界视口宽 = 342.2+40 = 382.2,故 390 恰好放得下、375 放不下 —— 断点必须 ≥382,取常规值 400。
   只收 .brand gap 到 12px 也够(实测 navH 65),但余量仅 4.8px 吃不住字体回退;加收 .nav-in 后 12.8px。
   🔴 刻意不加 white-space:nowrap —— 320×568 实测加了会横向溢出 22px(spec 射程外,但属变差),
      不加则优雅换行、溢出 0。行数由 G1 的 Range 判据直接验,不需要靠溢出当信号。 */
@media (max-width: 400px) {
  .brand  { gap: 12px; }
  .nav-in { gap: 16px; }
}

/* 🔴 锚点深链接直达时首个标题被 sticky .nav 遮(站点级既有形态)。
   射程 = 滚动容器,是 `[id]{scroll-margin-top}` 的超集:覆盖将来新增的 id,
   也覆盖无 id 但被 scrollIntoView() 定位的目标 —— 让漏项在结构上不可能成立。
   🔴 必须写 `html` 不能写 `:root`:gate_intro_site 的 G3-hard 用
      re.sub(r":root\s*\{[^}]*\}", "", body, count=1) 移除**第一个** :root 块作色值豁免,
      本文件 :root 块含 7 个色值靠它才 ≤2。新增 :root 排在其前会挪走豁免 → G3-hard 假红,
      而报错只说「硬编码色值 7 处」,看不出根因。`html` 等效且不匹配该正则。
   --nav-h 是常量:CSS 读不到元素高度;上面那条 media 生效后 navH 全视口恒 65。
   将来 nav 版式变高时由 G2(用实测 nav 底边判,非常量)兜住。 */
html { --nav-h: 65px; scroll-padding-top: calc(var(--nav-h) + var(--sp-4)); }

/* ── 首屏(设计稿 hero)───────────────────────────────────────── */
.sec-hero { padding-top: var(--sp-6); }
.hero { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: var(--sp-7); align-items: end; }
.hero-h1 { margin: var(--sp-4) 0 0; font-size: var(--fs-1000); font-weight: var(--w-title); line-height: var(--lh-tight); letter-spacing: var(--ls-title); max-width: 14em; }
.hero-scope { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; }
.hero-sub { margin: var(--sp-5) 0 0; font-size: var(--fs-600); font-weight: var(--w-mid); line-height: var(--lh-title); max-width: 22em; }
.hero-lede { margin: var(--sp-4) 0 0; font-size: var(--fs-400); color: var(--ink-muted); max-width: 30em; }
/* 三栏 INTAKE → 01/02 · 03/04 · 05 带 */
.hero-rail { margin-top: var(--sp-6); border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-rail > div { padding: var(--sp-4) var(--sp-4) 0; border-left: 1px solid var(--hairline); }
.hero-rail > div:first-child { padding-left: 0; border-left: 0; }
.hero-rail > div:last-child { padding-right: 0; }
.hero-rail p { margin: 0; }
.hero-rail .rail-v { margin-top: var(--sp-2); font-size: var(--fs-400); }
/* 首屏下方双图带 */
.hero-pair { margin-top: var(--sp-7); }
.hero-pair .split { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }

/* ── ticker 走马灯(tokens.css 已定义 .ticker;这里只定位)──────── */
.ticker { margin-top: var(--sp-8); }
.ticker-track > span { gap: var(--sp-4); }
.ticker-sep { color: var(--flame); }

/* ── Slogan 深色带(设计稿 BRAND DIRECTION 段版式)──────────────── */
.sec-slogan { background: var(--ink-deep); color: var(--on-deep); padding: var(--sp-10) 0; }
.sec-slogan .eyebrow { color: var(--flame); }
.slogan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: end; }
.slogan-quote {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-quote); font-style: italic;
  font-size: var(--fs-900); line-height: 1.05; color: var(--on-deep);
}
.slogan-scope { margin: var(--sp-5) 0 0; font-size: var(--fs-400); color: var(--on-deep); font-weight: var(--w-mid); }
.slogan-lines { margin: var(--sp-5) 0 0; font-size: var(--fs-800); font-weight: var(--w-title); line-height: var(--lh-title); color: var(--on-deep); }
.slogan-side { border-left: 1px solid var(--hairline-on-deep); padding-left: var(--sp-6); }
.slogan-side p { margin: 0; font-size: var(--fs-400); color: var(--on-deep-muted); }
/* copy-sot 把右栏写成三行,每行一件事 —— 第三句「拍板的还是你的人」是这一段的落点,
   埋在段中就没了。按 SOT 的换行独立成行,行间留一档间距。 */
.slogan-body { line-height: 1.9; }
.slogan-body br { display: block; content: ""; margin-top: var(--sp-3); }
.chip-on-deep { background: transparent; border-color: var(--hairline-on-deep); color: var(--on-deep-muted); }

/* ── 02 · ENTRY POINTS · 本段公用件(甘特轴与静态四卡样式已随结构改版删除)── */
.sec-entry { padding: var(--sp-8) 0 var(--sp-9); border-top: 1px solid var(--hairline); }
.sec-head-split { margin-top: var(--sp-4); }
/* 「从第 N 步接手 → X」深色锚块:与主干条的 ENTRY 格呼应 */
.entry-anchor {
  margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4);
  background: var(--indigo); color: var(--on-deep);
  border-radius: var(--r-1);
  font-size: var(--fs-500); font-weight: var(--w-mid);
}
.entry-anchor-v { margin: var(--sp-3) 0 0; font-size: var(--fs-400); color: var(--ink-muted); }

/* ── 03 · THE MAIN LINE(左轨五步)──────────────────────────────── */
.intake-card { margin-top: var(--sp-8); padding: var(--sp-6); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: start; }
.intake-card .in-k { margin: var(--sp-2) 0 0; font-size: var(--fs-600); font-weight: var(--w-title); white-space: nowrap; }
.flow { margin-top: var(--sp-7); }
.rail { border-left: 1px solid var(--hairline); padding: 0 0 var(--sp-8) var(--sp-7); }
.rail-node { border-left: 1px solid var(--hairline); padding: var(--sp-3) 0 var(--sp-3) var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.rail-node .nd { font-size: var(--fs-300); color: var(--ink-faint); }
.rail-tail { padding-left: var(--sp-7); border-left: 1px solid transparent; }
.rail-tail p { margin: 0; font-size: var(--fs-300); color: var(--ink-faint); }
.step-head { display: flex; align-items: center; gap: var(--sp-4); }
.step-n { font-family: var(--font-mono); font-size: var(--fs-600); color: var(--indigo); }
.step-split { margin-top: var(--sp-5); }
.step-split .eyebrow { margin-top: var(--sp-5); }
.step-split p.eyebrow + p { margin: var(--sp-2) 0 0; font-size: var(--fs-400); }
/* Q41 钩子:每步段首一句,比 step-lead 重一档 —— 它要先被读到,才有节奏 */
.step-hook { margin: 0 0 var(--sp-4); font-size: var(--fs-500); font-weight: var(--w-mid);
  color: var(--indigo); line-height: var(--lh-title); max-width: 30em; }
.step-lead { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); }
.discipline { margin-top: var(--sp-8); border-top: 1px solid var(--hairline); padding-top: var(--sp-6); display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-7); }
.discipline p { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); }

/* ── 04 · IN / OUT ─────────────────────────────────────────────── */
.cmps { margin-top: var(--sp-8); display: grid; gap: var(--sp-9); }
.cmp-t { margin: var(--sp-3) 0 var(--sp-4); font-size: var(--fs-500); font-weight: var(--w-mid); }
.cmp-note { margin: 0; padding: var(--sp-5); border: 1px dashed var(--hairline-strong); border-radius: var(--r-1); font-size: var(--fs-300); color: var(--ink-muted); }
.frame-h230 { height: 230px; }
.frame-h340 { height: 340px; }
.frame-h420 { height: 420px; }
.frame-h520 { height: 520px; overflow-y: auto; }
.frame-h320 { height: 320px; }
.frame-h230 img, .frame-h340 img, .frame-h420 img, .frame-h320 img { height: 100%; width: 100%; object-fit: cover; }
.frame-h230.frame-fit img, .frame-h340.frame-fit img, .frame-h320.frame-fit img { object-fit: contain; }
/* 定高框里放长图:改成可滚动,而不是 cover 裁掉下面 90% —— 图注写「长图」就得能看到长图。 */
.frame-scroll { overflow-y: auto; }
.frame-scroll img { height: auto !important; object-fit: initial !important; }
.sub { border-top: 1px solid var(--hairline); padding-top: var(--sp-7); margin-top: var(--sp-9); }
.picks { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.pick { margin: 0; font-size: var(--fs-300); color: var(--ink-muted); }
.pick-k { display: inline-block; min-width: 1.8em; font-family: var(--font-mono); color: var(--ink); }
.picks-why { margin: var(--sp-6) 0 0; max-width: 40em; font-size: var(--fs-400); }
.spec-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-7); align-items: center; padding: var(--sp-6) 0; border-top: 1px solid var(--hairline-faint); }
.spec-copy p { margin: 0 0 var(--sp-4); font-size: var(--fs-400); }
.spec-copy p:last-child { margin-bottom: 0; }
.spec-t { font-family: var(--font-mono); font-size: var(--fs-600) !important; letter-spacing: 0.06em; color: var(--flame-deep); }
.spec-tail { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--hairline-faint); max-width: 40em; }
.scale { margin: var(--sp-8) 0 0; padding-top: var(--sp-6); border-top: 1px solid var(--hairline-strong); font-size: var(--fs-600); font-weight: var(--w-mid); }
.gal { margin-top: var(--sp-6); }

/* ── 05 · 差异与边界(设计稿无此段 · 按同一版面语言新建)────────────── */
.edges { margin-top: var(--sp-8); }
.edge { padding: var(--sp-6); }
.edge .h3 { margin: 0 0 var(--sp-4); font-size: var(--fs-600); }
.edge p { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); }
.status-wrap { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--hairline-strong); }
.status-lede { margin: var(--sp-4) 0 var(--sp-6); font-size: var(--fs-500); max-width: 34em; }
.st { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-5) 0; border-top: 1px solid var(--hairline-faint); }
.st-k { margin: 0; font-size: var(--fs-400); font-weight: var(--w-mid); }
.st-v { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); }
.status-tail { margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--hairline); font-size: var(--fs-400); color: var(--ink-muted); max-width: 36em; }

/* ── 07 · CONTACT ──────────────────────────────────────────────── */
.sec-contact { padding: var(--sp-10) 0; border-top: 1px solid var(--hairline); }
.contact { margin-top: var(--sp-5); align-items: end; }
.contact-lede { margin: var(--sp-4) 0 0; font-size: var(--fs-400); color: var(--ink-muted); max-width: 26em; }
.cta { display: grid; gap: var(--sp-5); }
.cta-row + .cta-row { border-top: 1px solid var(--hairline-on-deep); padding-top: var(--sp-5); }
.cta-v { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: var(--fs-600); color: var(--on-deep); }
.cta-v a { color: var(--on-deep); border-bottom-color: var(--hairline-on-deep); }
.cta-hint { margin: var(--sp-3) 0 0; font-size: var(--fs-300); color: var(--on-deep-muted); max-width: 24em; }
.cta-wechat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; }
.qr { flex: 0 0 auto; }
.qr img { width: 118px; height: 118px; display: block; background: var(--qr-white); padding: 6px; border-radius: var(--r-1); }

/* ── footer ────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--hairline); }
.footer-in { padding-top: var(--sp-5); padding-bottom: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.footer-in p { margin: 0; font-size: var(--fs-300); color: var(--ink-faint); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* ── lightbox ──────────────────────────────────────────────────── */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(15, 14, 17, 0.94); display: flex; align-items: center; justify-content: center; padding: var(--sp-6); cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 92vh; width: auto; object-fit: contain; }
/* 长图(高宽比 > 2)改成纵向滚动阅读 —— 92vh 的高度上限对它们是绑定约束,790×4487 会被压到
   146px 宽(1440 视口实测)。这里只解掉高度上限,宽度仍受 max-width:100% 约束,所以横向
   永远不溢出;分流判据在 site.js 的 isTall(),常规图与横图完全走原路径不受影响。
   align-items 必须从 center 改 flex-start:内容高于容器时 center 会把顶部裁掉且滚不回去。 */
.lb-tall { align-items: flex-start; overflow-y: auto; }
.lb-tall img { max-height: none; }

/* ── 手机竖屏 390(tokens.css @media 已收字阶与网格,这里补版面特有项)── */
@media (max-width: 900px) {
  .sec-top { padding: var(--sp-9) 0 var(--sp-8); }
  .sec-entry { padding: var(--sp-7) 0 var(--sp-8); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-h1, .hero-sub, .hero-lede { max-width: none; }
  .hero-rail { grid-template-columns: minmax(0, 1fr); }
  .hero-rail > div { padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--hairline-faint); }
  .hero-rail > div:first-child { border-top: 0; }
  .hero-pair .split { grid-template-columns: minmax(0, 1fr); }
  .slogan, .discipline, .contact, .spec-row { grid-template-columns: minmax(0, 1fr); }
  .slogan-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline-on-deep); padding-top: var(--sp-5); }
  .rail, .rail-node, .rail-tail { padding-left: var(--sp-5); }
  .st { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .picks { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .frame-h520 { height: 380px; }
  .frame-h420 { height: 300px; }
  /* 窄屏:长通路名 + nowrap 的 ENTRY · STEP 并排会撑出横向溢出(390 实测 +31px)。
     改堆叠,顺序仍是 通路名 → STEP 号,与甘特轴的对应关系不变。 */
  /* tokens.css 给 .chip 定的是 white-space:nowrap —— 短标签用它对,但「正背平铺线稿与
     六视图版面」这类长标签在 390 下会撑破卡片(实测 400 vs 350)。窄屏放开换行。 */
  .chip { white-space: normal; }
  .cmps { gap: var(--sp-7); }
}

/* 甘特轴的网格定位:设计稿写在 inline style 里,这里用 data-* 属性选择器等价表达,
   保持 HTML 无 inline style(G3)同时几何逐格一致。 */
.gantt > .gantt-label { grid-column: 1; }
.gantt > [data-row="1"] { grid-row: 1; }
.gantt > [data-row="2"] { grid-row: 2; }
.gantt > [data-row="3"] { grid-row: 3; }
.gantt > [data-row="4"] { grid-row: 4; }
.gantt > [data-row="5"] { grid-row: 5; }
.gantt > [data-row="6"] { grid-row: 6; }
.gantt > [data-row="1-6"] { grid-row: 1 / 6; }
.gantt > [data-row="2-6"] { grid-row: 2 / 6; }
.gantt > [data-row="3-6"] { grid-row: 3 / 6; }
.gantt > [data-row="4-6"] { grid-row: 4 / 6; }
.gantt > [data-col="2"] { grid-column: 2; }
.gantt > [data-col="3"] { grid-column: 3; }
.gantt > [data-col="4"] { grid-column: 4; }
.gantt > [data-col="5"] { grid-column: 5; }
.gantt > [data-col="6"] { grid-column: 6; }
.gantt > [data-col="2-7"] { grid-column: 2 / 7; }
.gantt > [data-col="3-7"] { grid-column: 3 / 7; }
.gantt > [data-col="4-7"] { grid-column: 4 / 7; }
.gantt > [data-shift="1"] { margin-left: 10px; }

.note-deep { margin-top: var(--sp-7); }
.note-deep p { margin: 0; font-size: var(--fs-500); }
.sixview { margin-top: var(--sp-4); }
.cmp-note-in { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); }
.status { display: grid; margin-top: var(--sp-5); }

.cap-gen { font-style: italic; }

/* ── 客户原文便签(第 4 段 IN 04 / IN 06)──────────────────────────────
   copy-sot § IN 侧实样两段 明写「以引用块/便签样式呈现,视觉上明确是"客户发来的原文"
   而非我们的文案」。故意保留原始换行与不对齐 —— 一对齐就不"没有排版"了。 */
.raw-note {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline-strong);
  border-radius: var(--r-1);
  padding: var(--sp-5);
}
.raw-k {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-label); font-size: var(--fs-200); font-weight: var(--w-mid);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint);
}
.raw-body {
  margin: 0; font-family: var(--font-cn); font-size: var(--fs-400);
  line-height: 1.85; color: var(--ink-muted);
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
/* 详情页长图:原来只露出顶部 520px(4452px 高的图),看不出是"长图"。
   加高到能同时看见多个模块,仍可滚。 */
.frame-longpage { height: 760px; overflow-y: auto; }
.frame-longpage img { width: 100%; height: auto; }
.out04 { align-items: start; }
@media (max-width: 900px) {
  .frame-longpage { height: 460px; }
  .raw-note { padding: var(--sp-4); }
  .raw-body { font-size: var(--fs-300); }
}

/* ══ 02 · ENTRY POINTS 新稿:点选标签条 + 主干条联动 + 单面板互斥 ═══════════
   结构取 2026-08-26 设计交付稿。颜色/字号/间距全部走 tokens,零新增。
   切换过渡 260-320ms,与交付稿一致;面板不参与滚动揭幕(隐藏元素动画会失效)。 */
.picker { margin-top: var(--sp-6); }
.picker-k { margin: 0 0 var(--sp-3); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.tab {
  appearance: none; text-align: left; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-1);
  padding: var(--sp-4); display: grid; gap: var(--sp-2);
  font-family: var(--font-cn); background: var(--paper-raised);
  transition: background 260ms, border-color 260ms, color 260ms;
}
.tab-en { color: var(--ink-faint); transition: color 260ms; }
.tab-cn { font-size: var(--fs-500); font-weight: var(--w-mid); color: var(--ink); transition: color 260ms; }
.tab-sub { font-size: var(--fs-300); color: var(--ink-faint); transition: color 260ms; }
.tab:hover { border-color: var(--hairline-strong); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.tab[aria-selected="true"] .tab-cn { color: var(--on-deep); }
.tab[aria-selected="true"] .tab-en { color: var(--flame); }
.tab[aria-selected="true"] .tab-sub { color: var(--on-deep-muted); }

.rail-wrap { margin-top: var(--sp-5); }
.mainline {
  border: 1px solid var(--hairline); border-radius: var(--r-1);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden;
}
.ml-cell { padding: var(--sp-4); border-left: 1px solid var(--hairline); background: var(--paper-raised); transition: background 320ms; }
.ml-cell:first-child { border-left: 0; }
.ml-tag { color: var(--ink-faint); transition: color 320ms; }
.ml-label { margin-top: var(--sp-2); font-size: var(--fs-400); color: var(--ink-faint); transition: color 320ms; }
.ml-cell.live { background: var(--ink); }
.ml-cell.live .ml-label { color: var(--on-deep); }
.ml-cell.live .ml-tag { color: var(--on-deep-muted); }
.ml-cell.entry .ml-tag { color: var(--flame); }

.panel { margin-top: var(--sp-6); }
.panel[hidden] { display: none; }
.panel-in { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.panel-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* 小图位缺席时(通路二/三/四无真实产出)大图自适应,不留空框 */
.panel-figs-solo .frame-h340 { height: 506px; }
.frame-h150 { height: 150px; }
.frame-h150 img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 38%; }
/* `Q45`=B(2026-08-28):四张路径卡不再模拟客户口吻,`::before/::after` 的「」引号
   随之撤掉 —— 文案改了第三人称而引号还在,视觉上仍然是「有人在说话」,等于没改。
   类名同轮由 `panel-quote` 改 `panel-lead`:留着旧名会误导下一个人往回加引号。
   字号(`--fs-700`)与最大字号地位**不动** —— `Q37` 的认领功能靠它,只是不再拟声。 */
.panel-lead {
  margin: var(--sp-4) 0 0; font-size: var(--fs-700); font-weight: var(--w-title);
  line-height: var(--lh-title); max-width: 18em;
}
.panel-rows { margin-top: var(--sp-6); border-top: 1px solid var(--hairline); }
.panel-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.panel-row .eyebrow { margin: 0; }
.panel-v { margin: 0; font-size: var(--fs-400); }
.panel-take { margin: 0 0 var(--sp-3); font-size: var(--fs-400); font-weight: var(--w-mid); }
.panel-chips { margin: 0; }
.panel .entry-anchor { margin: var(--sp-4) 0 0; }
.panel .entry-anchor-v { margin: var(--sp-3) 0 var(--sp-4); }

@media (max-width: 900px) {
  /* 标签是这一段的入口,四个横排在手机上必然挤,挤了就点不准 → 纵向堆叠。
     主干条同理:五格横排在 390 下每格 70px,标签读不出来。 */
  .tabs { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .tab { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--sp-3); }
  .tab-sub { grid-column: 2; }
  .mainline { grid-template-columns: minmax(0, 1fr); }
  .ml-cell { border-left: 0; border-top: 1px solid var(--hairline); display: flex; align-items: baseline; gap: var(--sp-3); }
  .ml-cell:first-child { border-top: 0; }
  .ml-label { margin-top: 0; }
  .ml-cell.live { border-top-color: var(--hairline-on-deep); }
  .panel-in { grid-template-columns: minmax(0, 1fr); }
  .panel-figs-solo .frame-h340 { height: 300px; }
  .panel-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

/* 第 3 段 05:长图(可滚)+ 平台主图并置 —— copy 写的是「商品图与平台主图、详情页长图」,
   只放长图会漏掉「平台主图」那半句。 */
.step-figs-05 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .step-figs-05 { grid-template-columns: minmax(0, 1fr); } }

/* ── BRAND · 名字与标识 ─────────────────────────────────────────────────
   四图同为 4:5,用裸 .frame 不做高度归一:.frame-h320 的 object-fit:cover 是给
   deliverables 那种异构比例做归一的,套在同构 4:5 上只会白裁掉约 10% 画面。 */
.gal-brand { margin-top: var(--sp-6); }
.brand-meaning { margin-top: var(--sp-7); }
.brand-meaning p { margin: 0; font-size: var(--fs-400); color: var(--ink-muted); max-width: 34em; }
@media (max-width: 900px) {
  .brand-meaning { gap: var(--sp-5); }
}