/* ============================================================================
   ATLAS — v6 alignment layer (2026-10-09)
   ----------------------------------------------------------------------------
   WHY THIS EXISTS
   After atlas.css re-skinned the 286 old-template pages, the 31 v6 pages
   (home, /services/, /products/, /category/ + 28 categories) still spoke a
   different dialect: 6px/10px radii, drop shadows, a lift-on-hover button, and
   a plain uppercase eyebrow instead of the mono micro-label. Same site, two
   grammars — visible the moment you move from a region page to the home page.

   WHAT IT DOES
   Only re-points v6's OWN tokens and the few components that do not read from
   them. No structure, no markup, no content. v6 declares its palette inside
   `body.gera .g6`, which is why the :root changes in atlas.css could not reach
   it — the overrides have to be scoped to .g6 as well.

   NOT TOUCHED ON PURPOSE
     - v6's dark hero and ink bands: ATLAS uses ink bands too (.a-sec--ink /
       .a-cta), so the photo hero is already in the same language.
     - v6's type scale (--fs-*): measured within ~1px of the ATLAS scale.
     - Focus rings (--ring / --ring-soft): accessibility, never flatten those.
   ========================================================================== */

body.gera .g6 {
  /* warm paper skeleton, same values as atlas.css */
  --line:        #E5E2DC;
  /* 🔴 2026-10-10：与 atlas.css 同步加深。纸白 vs 纸灰原来只有 1.07:1（看不见），
     现在 1.149:1 + 发丝线。--muted 一并加深以保住纸灰上的 AA。 */
  --sand:        #EFEBE4;
  --n-wash:      #EFEBE4;
  --n-white:     #FCFBF9;
  --muted:       #5A686D;   /* 纸白 5.59:1 / 纸灰 4.86:1 */
  --n-body:      #3E4A4E;
  --n-onDark-2:  #9FB0B4;
  --n-onDark-3:  #8FA0A4;

  /* sharp geometry, flat surfaces */
  --r-sm: 3px;
  --r-md: 3px;
  --sh-1: none;
  --sh-2: none;
  --sh-acc: none;
  --sh-dark: none;
}

body.gera .g6 { background: var(--paper); }

/* the mono micro-label: the ATLAS tick, on the light heroes and on the dark ones */
body.gera .g6 .eyebrow {
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
}

/* buttons: ATLAS height, square corners, no lift */
body.gera .g6 .btn { height: 44px; border-radius: 3px; }
body.gera .g6 .catjump .btn { height: 44px; }
body.gera .g6 .btn:hover,
body.gera .g6 .btn:active,
body.gera .g6 .btn-p:active,
body.gera .g6 .chip:active,
body.gera .g6 .crow:active,
body.gera .g6 .mc:active,
body.gera .g6 .pt:active,
body.gera .g6 .ot:active,
body.gera .g6 .tchip:active,
body.gera .g6 .xp-tab:active,
body.gera .g6 .proc-tabs button:active,
body.gera .g6 .burger:active { transform: none; }

/* section rhythm matches atlas.css */
body.gera .g6 .sec { padding: var(--sec) 0; }
body.gera .g6 .sec.tight { padding: var(--sec-s) 0; }
body.gera .g6 .head2 { margin-bottom: clamp(32px, 4vw, 52px); }
/* 3-tier rhythm by position, same as atlas.css (no markup change) */
/* `:first-of-type` cannot be used here — the first <section> of a v6 page is
   `.hero`, so `.sec:first-of-type` matches nothing (measured). Target the
   section that directly follows the hero instead. */
body.gera .g6 > .hero + .sec,
body.gera .g6 > .chero + .sec { padding-top: var(--sec-s); }
body.gera .g6 > .sec:last-of-type,
body.gera .g6 > .cta { padding-bottom: var(--sec-l); }
/* the sand band: deeper paper + hairline, and accent-deep on it (accent is only
   4.22:1 on #EFEBE4) */
body.gera .g6 .sec.sand { border-top: 1px solid var(--line-2, #D4D0C8); }
body.gera .g6 .sec.sand .eyebrow { color: var(--accent-deep); }
body.gera .g6 .sec.sand .eyebrow b { color: var(--ink); }
body.gera .g6 .subbar { background: rgba(252, 251, 249, .92); }

@media (max-width: 768px) {
  body.gera .g6 .sec { padding: 46px 0; }
}

/* ============================================================================
   2026-10-10 - readability fixes (visual audit D1 / D3)
   ----------------------------------------------------------------------------
   D1  Measured: v6.css sets `.cmp-col:not(.on){opacity:.44}`, which pushes the
       body copy of the two unselected "Three ways to source" columns to about
       2.9:1 (WCAG AA body text needs 4.5:1). On phones the three columns stack,
       so the 2nd and 3rd blocks become nearly invisible AND lose their column
       header, reading as a subject-less fragment ("SCREENING / Whoever
       answers first").
       Fix: stop dimming whole columns. Keep the selected column tinted, and
       grey the unselected ones via --muted text instead. Separation survives,
       body text returns to 4.84:1. Column headers are re-added on narrow
       screens with CSS only (no markup change).
   D3  Measured: the hero `.cue` is a 26x42 empty box whose inner 3x8 animated
       bar is faded out most of the time, so it reads as an unloaded image or a
       stray element. Replaced with a static down chevron.
   ========================================================================== */

/* -- D1 - unselected columns: no opacity, muted text instead -- */
body.gera .g6 .cmp-col:not(.on) { opacity: 1; background: #fff; }
body.gera .g6 .cmp-col:not(.on) .cmp-row b { color: var(--muted); font-weight: 500; }
body.gera .g6 .cmp-col + .cmp-col { border-left: 1px solid var(--line); }

/* -- D1 - stacked on narrow screens: restore the column headers -- */
@media (max-width: 1080px) {
  body.gera .g6 .cmp-col + .cmp-col { border-left: 0; border-top: 1px solid var(--line); }
  body.gera .g6 .cmp-col::before {
    display: block;
    padding: 10px 18px;
    font-size: var(--fs-7, 11px);
    letter-spacing: var(--ls-label, .08em);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink);
    background: var(--sand, #F5F3EF);
    border-bottom: 1px solid var(--line);
  }
  body.gera .g6 .cmp-col.on::before { background: var(--acc-tint2, #EAF4F3); }
  body.gera .g6 .cmp-col[data-i="0"]::before { content: "Marketplace, on your own"; }
  body.gera .g6 .cmp-col[data-i="1"]::before { content: "Per-order agent"; }
  body.gera .g6 .cmp-col[data-i="2"]::before { content: "This desk"; }
}

/* -- D3 - hero scroll cue: empty box -> down chevron -- */
body.gera .g6 .cue { border: 0; width: 26px; height: 26px; bottom: 64px; }
body.gera .g6 .cue span { display: none; }
body.gera .g6 .cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 13px;
  height: 13px;
  border-right: 2px solid rgba(255, 255, 255, .8);
  border-bottom: 2px solid rgba(255, 255, 255, .8);
  transform: translateX(-50%) rotate(45deg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-10 字阶（与 atlas.css 同一把尺子）
   ---------------------------------------------------------------------------
   实测（v6.css）：标题 font-weight 全部是 **700**，h2 = clamp(22px,2.55vw,38px)；
   正文字号 --fs-5 = 16px、--fs-6 = 14px、--fs-7 = 12.5px。
   与 286 页那套（h2 500/40、body 17）不是一套语言 → 同一站在两页之间会"换声"。
   这里只改 .g6 作用域内的字号与字重，不动任何结构。
   ═══════════════════════════════════════════════════════════════════════════ */

/* v6 的 7 档字号收敛到与 atlas.css 同一套：
     --fs-1 36→60  Display        --fs-5 17  body
     --fs-2 27→40  h2             --fs-6 15  ui/small
     --fs-3 19     h3             --fs-7 11.5 meta
     --fs-4 19     lead
   实测首页原来在用 12.5px(131 个元素) / 14px(107) / 18px(24) —— 小字海 + 微差。 */
body.gera .g6 {
  --fs-1: clamp(36px, 4.6vw, 60px);
  --fs-2: clamp(27px, 3vw, 40px);
  --fs-3: 19px;
  --fs-4: 19px;
  --fs-5: 17px;
  --fs-6: 15px;
  --fs-7: 11.5px;
}
body.gera .g6 h1,
body.gera .g6 h2 { font-weight: 500; letter-spacing: -.025em; }
body.gera .g6 h3,
body.gera .g6 h4 { font-weight: 600; }
body.gera .g6 h3 { letter-spacing: -.012em; line-height: 1.32; }
body.gera .g6 h4 { font-size: 15px; line-height: 1.38; }
body.gera .g6 .hero h1,
body.gera .g6 .chero h1 { font-weight: 500; letter-spacing: -.03em; }
body.gera .g6 .bleed h2,
body.gera .g6 .scrolly h2,
body.gera .g6 .cta h2 { font-weight: 500; }

/* 小字归一：12.5 / 13 / 14 → 14（meta 与 small 合并），14.5/15.5 → 15 */
body.gera .g6 .crow .meta,
body.gera .g6 .mc .meta,
body.gera .g6 .pt .meta,
body.gera .g6 .ot .meta { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-10 「Five ways a first order goes wrong」—— 5 列 → 3 列（TEMPLATE_AUDIT §三.3）
   ---------------------------------------------------------------------------
   实测：`.pains` 是 5 列 grid，1440 下每列 234.8px、内容宽 195px → 15px 正文一行
   只放得下 ~24 字，正是审计里「小字海 + 一屏 5 个并列」的元凶。
   改法：容器切 6 格，前 3 张各占 2 格（=3 列），后 2 张各占 3 格（=2 列）。
   5 张卡片正好填满两行，**不留灰洞**（灰洞是 ATLAS 明确要避免的：容器底色是
   --line，空格会显示成一块灰）。
   ⚠️ 卡片数若不是 5，第二行的 span 规则会失准 —— 改文案时同步看这里。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1081px) {
  body.gera .g6 .pains { grid-template-columns: repeat(6, 1fr); }
  body.gera .g6 .pains .pain { grid-column: span 2; }
  body.gera .g6 .pains .pain:nth-child(4),
  body.gera .g6 .pains .pain:nth-child(5) { grid-column: span 3; }
}
/* 卡内三级文字对齐 atlas.css 的 19 / 17 / 11.5 */
body.gera .g6 .pain b { font-size: 19px; letter-spacing: -.015em; }
body.gera .g6 .pain span { font-size: 17px; }
body.gera .g6 .pain i { font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-12 (UX_FIX_1012 · 审核 P0-3) —— 深色带上的小字对比度
   ---------------------------------------------------------------------------
   实测：首页 `.scrolly`（`background: var(--dark)` #0B1416）里的
   `<span class="basis">Four steps · one published fee · …</span>` 用的是
   `--muted`（#5A686D，为**纸底**调的值）→ **3.23:1**，11.5px 正文要 4.5:1。
   v6 里本来就有深色档 `--n-onDark-3`（#8FA0A4）—— 在同底色上 **7.01:1**，
   且 hero 的 `.hero-tags` 已经在用它，视觉上是同一个「深色次要文字」档位。
   ⚠️ 只改 `.scrolly` 里的 `.basis`：`.basis` 在纸底带上（如 `.head2` 之外）
   仍是 `--muted`，那是达标的（纸白 5.59:1）。
   ═══════════════════════════════════════════════════════════════════════════ */
body.gera .g6 .scrolly .basis { color: var(--n-onDark-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-12 (UX_FIX_1012 · 审核 C2) —— /services/ 首屏「What the brief decides」面板
   ---------------------------------------------------------------------------
   实测（1440，/services/）：
     · 面板 510px 高，三行各 **153 / 153 / 89px** —— 行的值 `<b>` 用的是 `--fs-2`
       （40px），可里面的值是**短语**（"1 of 2 factories" / "sample plan" /
       "ship plan"）不是数字，40px 在 326px 栏宽里折成两行 → 行高失控，
       整块像被放大镜照过，也把 hero 的注意力从标题抢走。
     · 面板底色 `rgba(255,255,255,.07)` 压在 hero 照片上。实测照片亮度
       **p50 0.0885 / p90 0.2544**（有一片亮区到 0.4548）→ 11.5px 标签
       （`--n-onDark-3`）对比度 **p50 只有 2.79:1、亮区只有 1.27:1** —— 真读不清。
   改法：
     ① 行改「标签在上、值在下、左对齐」；值 40px → 19px
     ② 面板底色 → `rgba(11,20,22,.78)`：实测最亮像素合成后亮度 0.0366，
        `--n-onDark-2` 仍有 **5.46:1**，p90 处 6.22:1（原来 1.27:1）。
        保留 22% 透光 + 18px 模糊，玻璃感还在。
     ③ 标签与脚注统一到 `--n-onDark-2`（#9FB0B4）
   ═══════════════════════════════════════════════════════════════════════════ */
body.gera .g6 .glass {
  background: rgba(11, 20, 22, .78);
  border-color: rgba(255, 255, 255, .14);
}
body.gera .g6 .glass .g-head { color: var(--n-onDark-2); }
body.gera .g6 .glass .g-row { display: block; padding: 14px 0; }
body.gera .g6 .glass .g-row span {
  display: block; text-align: left; font-size: 11.5px; color: var(--n-onDark-2);
}
body.gera .g6 .glass .g-row b {
  display: block; margin-top: 5px; font-size: 19px;
  letter-spacing: -.012em; line-height: 1.25;
}
body.gera .g6 .glass .g-foot { color: var(--n-onDark-2); }

/* ── 2026-10-12 MOBILE LEGIBILITY FLOOR（v6 侧）────────────────────────────
   v6 的微标档是 token `--fs-7`，atlas-v6 把它对齐到 11.5px。
   实测 390px 首页：118 个元素在这个档位，且 `.basis` / `.pains i` /
   `.wall-head span` / `.credit` 装的是**整句**，手机上偏小。
   这里只在手机档把它抬到 13px —— 一个 token 覆盖 v6 全部微标，
   正文（--fs-5 17px / --fs-4 19px）不动，不会整页重排。
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.gera .g6 { --fs-7: 13px; }
}

/* ---- hero readability on phones (FIXPLAN_1013 / #4, 2026-10-13) -----------
   Measured with the pixel method (hide the text, screenshot the same box,
   compare every pixel): the subtitle sat at 3.93:1 average and 1.29:1 at the
   worst pixel on a 390px viewport — a genuine AA failure, and worse than the
   4.30:1 that had been estimated from colour values.
   Root cause: this layer repoints --n-onDark-2 to #9FB0B4 (line 34), which was
   checked against a UNIFORM dark plate (5.46:1). The hero is not that: it is a
   photo under a 96deg HORIZONTAL scrim (.94 -> .74 -> .30). On phones the
   subtitle runs the full width, so its right half lands in the .30-.74 zone.
   Two changes, both scoped to the hero and to phones only:
     1. scrim goes VERTICAL at <=768px — the hero copy stacks vertically there,
        so a vertical scrim actually aligns with the text block;
     2. the hero's on-photo type gets its own lighter tone. The token is NOT
        touched: #9FB0B4 is correct on the dark sections, and changing it would
        move every other dark surface.
   Acceptance is the pixel method again, at 390px and 1440px, >=4.5:1 worst case.
   NOTE on the values: the first pass used .90/.87/.80 and measured 12.55:1 —
   correct, but it flattened the photograph to near-black, which is a different
   hero from the desktop one (49,49,52 average). Eased to .84/.80/.72, which is
   still >=8:1 even if a pixel of the photo were pure white, and keeps the photo
   visible. The pixel method is the acceptance test, not the colour maths. */
/* The lighter hero tone applies at EVERY width, not only on phones: measured
   at 1440px the worst pixel behind the subtitle was 4.04:1, because the desktop
   scrim (.94 -> .74 -> .30) also thins out over the photo. The dark SECTIONS
   keep #9FB0B4 — that is where its 5.46:1 is real. Only the photo hero changes. */
body.gera .g6 .hero .sub,
body.gera .g6 .hero .eyebrow { color: #DCE3E6; }
body.gera .g6 .hero .hero-tags { color: #CBD5D9; }

/* Phones only: the scrim goes vertical. The hero copy stacks vertically there,
   so a vertical scrim actually aligns with the text block instead of running
   across it. */
@media (max-width: 768px) {
  body.gera .g6 .hero-scrim {
    background: linear-gradient(178deg, rgba(5, 9, 18, .84) 0%, rgba(5, 9, 18, .80) 55%, rgba(5, 9, 18, .72) 100%);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   🔴 2026-10-22 · 整页视觉修复（第一批）
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 「Illustrative photograph — not a customer order」这行说明被聊天按钮压住 ──
   v6.css 把 .credit 钉在 `right:10px; bottom:10px`，而右下角常驻的聊天按钮
   （46px 高，fixed 定位）就在那儿 —— 滚动到某些位置必然重叠（实测首页 bleed 段
   credit 在 y=4233、聊天按钮在视口 bottom 16px，两者会压在一起）。
   聊天按钮是**功能件**且必须留在右下角（用户 2026-10-13 明确要的），
   所以把说明文字挪到**左下角** —— 它本来也是"注解"，贴左边更顺。
   `.cta .credit / .hero .credit` 原来 bottom:56px 是为了躲聊天按钮，现在不需要了。 */
body.gera .g6 .credit {
  right: auto;
  left: 20px;
  bottom: 14px;
}
body.gera .g6 .cta .credit,
body.gera .g6 .hero .credit {
  bottom: 14px;
}
@media (max-width: 768px) {
  body.gera .g6 .credit { left: 15px; bottom: 12px; }
}


/* ── 2. 28 个等高胶囊 = 标签云 → 改成 3 列数据索引 ───────────────────────────
   审计：「28 categories, one desk」下面 24–28 个胶囊形状、字号、边框完全一样，
   读起来是一团彩色标签，不像一份数据。计数（1,731 / 1,369 …）才是真内容。
   改成 3 列索引：名称左、计数右（等宽数字）、发丝分隔线，无底色无边框。
   ≥1025px 生效；≤1024 保留原胶囊样式（手机另有 mobile1017.css 的图文块）。 */
@media (min-width: 1025px) {
  body.gera .g6 .wall-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--s6);
    border-top: 1px solid var(--line);
  }
  body.gera .g6 .wall-grid > .tchip {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s2); min-height: 0; padding: 11px 2px;
    background: none; border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; box-shadow: none; transform: none;
    font-size: var(--fs-6); font-weight: 500; color: var(--ink);
  }
  body.gera .g6 .wall-grid > .tchip:hover {
    background: none; border-color: var(--line); box-shadow: none; transform: none;
    color: var(--acc);
  }
  body.gera .g6 .wall-grid > .tchip:hover b { color: var(--acc); }
  body.gera .g6 .wall-grid > .tchip b {
    font-family: var(--font-num, ui-monospace, monospace);
    font-size: var(--fs-7); color: var(--muted);
  }
}

/* ── 3. 成本条「Our fee」：4% 宽塞不下标签 ───────────────────────────────────
   实测：色条按**真实比例**排（货值 82% / 服务费 4% / 运费 14%，来自
   USD 6,945 / 347 / 1,168），服务费那段只有 46px，而 "Our fee" 11.5px 就要 47px
   + 左右各 8px 内边距 → 标签必然溢出到邻段，白字压浅绿底读不了。
   比例不能改（那是这节唯一的信息），所以把**这一段的标签移到色块下方**，加一条细引线。 */
@media (min-width: 1025px) {
  body.gera .g6 .stack { overflow: visible; margin-bottom: 34px; }
  body.gera .g6 .stack > div:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
  body.gera .g6 .stack > div:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
  body.gera .g6 .stack > .seg2 { position: relative; }
  body.gera .g6 .stack > .seg2 span,
  body.gera .g6 .stack.in > .seg2 span {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) !important;
    margin-top: 8px; color: var(--ink); font-weight: 600;
  }
  body.gera .g6 .stack > .seg2 span::before {
    content: ""; position: absolute; left: 50%; top: -8px;
    width: 1px; height: 8px; background: var(--acc);
  }
}

/* ── 4. 品类缩略图 54px → 72px ──────────────────────────────────────────────
   96 张 AI 静物缩到 54px 彼此分不出来；放大到 72px 才看得出是「什么品类」。
   内容里的 sizes="54px" 不动：DPR2/3 下浏览器会挑 160w/480w 源，缩到 72px 显示
   = 缩图不是放图，不会糊。 */
@media (min-width: 1025px) {
  body.gera .g6 .xp-tab { grid-template-columns: 72px 1fr 18px; }
  body.gera .g6 .xp-tab .thumb {
    width: 72px; height: 72px;
    box-shadow: inset 0 0 0 1px rgba(1, 18, 47, .06);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   🔴 2026-10-23 · LOOK_1023 视觉提案落地（用户「可以的，动手吧」）
   诊断：好看的地方全是「有图 + 深底」的节；平的地方全是「纯文字 + 白/米底」的节
   —— 病根不是缺动效，是纯文字节里**没有任何视觉重音**。
   方向：加结构，不加花。不引组件库、不加第二个强调色、不叠加动效框架。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 「Five ways a first order goes wrong.」5 张卡 ───────────────────────
   病：.pain 是 flex 列 + `i{margin-top:auto}` → 网格等高 → 短卡正文和对策行
       之间空出一大段白，读起来像没做完。
   改：卡高随内容；对策行给一条 2px 青绿竖线（原来只有颜色没有形状）；
       引号换衬线（Plex Serif 已自托管，零新增体积）。 */
/* 🔴 第一版把 `.pains` 改成 `align-items:start`（想让卡高随内容），实拍发现**更糟**：
   网格行高仍由最高那张决定 → 短卡下面露出一条背景色带，看起来像漏了一块。
   等高卡片 + 对策行贴底（原有的 margin-top:auto）本来就是对的，撤掉。 */
body.gera .g6 .pain i {
  padding-top: var(--s2);
  padding-left: 10px;
  border-left: 2px solid var(--acc);
}
body.gera .g6 .pain b::before,
body.gera .g6 .pain b::after {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3em;
  line-height: 0;
  color: var(--acc);
  opacity: .5;
}

/* ── 2. 「What it costs.」对比表：把「选中那列」说清楚 ──────────────────────
   .cmp 是三列 + 顶部 .seg 三个按钮切换 .cmp-col.on。原来只靠背景色差 + 未选中列
   文字压灰，实拍里几乎看不出哪列被选中。加：顶部 3px 青绿条 + 选中列每行一个实心点。 */
body.gera .g6 .cmp-col.on { box-shadow: inset 0 3px 0 0 var(--acc); }
/* 🔴 第一版还给选中列每行加了一个实心青绿小圆点，实拍后**撤掉**：
   只出现在选中列 → 没有"对比"含义，读起来像个装饰性项目符号，纯噪音。
   表下那句「No rival is named — these are approaches, not companies」也说明
   这不该做成对/错标记。保留顶部 3px 青绿条 + 原有的浅青底，足够说明"这列是选中的"。 */

/* ── 3. 「Four things we won't do.」：破折号 → 等宽编号 ─────────────────────
   这块是全页最平的一块（703px 米色带 + 两列文字 + 四个 —）。
   改：01–04 等宽编号给一个可数的节奏；两列之间补一条发丝竖线把"两列"说清楚。 */
body.gera .g6 .wont ul { counter-reset: gera-wont; }
body.gera .g6 .wont li {
  counter-increment: gera-wont;
  padding-left: 38px;
}
body.gera .g6 .wont li::before {
  content: counter(gera-wont, decimal-leading-zero);
  left: 0; top: .2em;
  font-family: var(--font-num);
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
}
@media (min-width: 769px) {
  body.gera .g6 .wont li:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: 52px;
  }
  body.gera .g6 .wont li:nth-child(even)::before { left: 20px; }
}

/* ── 4. FAQ：现在只有右侧一个 +/−，展开/收起看不出状态 ─────────────────── */
body.gera .g6 .faq summary {
  border-left: 2px solid transparent;
  padding-left: 18px;
  transition: border-color var(--d2) var(--e);
}
body.gera .g6 .faq details[open] summary { border-left-color: var(--acc); }
body.gera .g6 .faq summary:hover { border-left-color: var(--line-2); }
body.gera .g6 .faq .ans p { padding-left: 18px; }

/* ── 5. 米底分节看不出来 ────────────────────────────────────────────────────
   --paper-2 #EFEBE4 与纸白 #FCFBF9 的对比只有 1.149 → 实拍里「What it costs」
   「Four things」两块米底像"没上色的白"。只压深 v6 页面这一档，不动 atlas 页。 */
/* 🔴 注意：v6 的米色节用的是 **`--sand`**，不是 `--paper-2`
   （v6.css: `.sand{background:var(--sand)}`）→ 第一版只改 `--paper-2` 完全没生效。
   两个都改，值保持一致。 */
body.gera .g6 { --paper-2: #EAE4D9; --sand: #EAE4D9; }


/* ── 6. 数字带（新增节）─────────────────────────────────────────────────────
   站上最有说服力的资产是 12,951 条工厂档案，但原来只出现在 /data/ 和地域页，
   首页一个字没提。在「What gets checked」和地图节之间插一条数字带。
   数字全部取自站上已有口径（地图图例与 /data/ 同源），**没有新造任何数字**。
   🔴 类名一律带 `statband-` 前缀：第一版用了 `.sb / .sb-grid / .sb-note`，
      结果 `.sb` 在 v6.css 里**早就存在**（是侧栏组件：`display:grid;
      grid-template-columns:1.35fr .65fr`）→ 我的格子被撑成两列、数字和标签并排。
      **v6.css 用的是极短类名（.sb .duo .cl .bar .ot .seg .cmp .xp），新类名必须带前缀。** */
body.gera .g6 .statband {
  background: var(--paper-2);
  border-block: 1px solid var(--line);
  padding: var(--sec-s) 0;
}
body.gera .g6 .statband-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}
body.gera .g6 .statband-cell { border-top: 2px solid var(--acc); padding-top: var(--s25); }
body.gera .g6 .statband-n {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: .95;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink-brand);
  font-variant-numeric: tabular-nums;
}
body.gera .g6 .statband-k {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
body.gera .g6 .statband-note {
  margin-top: var(--s4);
  font-size: var(--fs-7);
  color: var(--muted);
}
@media (max-width: 768px) {
  body.gera .g6 .statband-grid { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
  body.gera .g6 .statband-n { font-size: clamp(32px, 9vw, 44px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-25 · CURATE_1025 视觉海选落地
   🔴 口味红线（用户 10-25 否掉全部自运动动效后确立）：
   ① 零自运动 —— 没有任何东西自己会动；所有变化都发生在用户动作（悬停/按下/聚焦）之后
   ② 反馈要"实"—— 悬停 = 颜色变深 + 边线变实 + 一个 1px 级的小位移，不用大阴影大浮起
   ③ 全部复用已有 token（--acc / --acc-tint / --d2 260ms / --e），不加新变量不加 JS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. 按钮：按下反馈 + 顶栏主 CTA 微加深 ───────────────────────────────────
   现状：按钮 hover 只有 background 换色，没有按压感（active 无反馈）。
   Uiverse 高票按钮的共同点就是 active 有位移+阴影收紧。 */
body.gera .g6 .gera-btn:active,
body.gera .g6 a.gera-btn:active {
  transform: translateY(1px);
}
body.gera .g6 .cta .gera-btn:hover {
  background: var(--acc-deep, var(--accent-deep));
  border-color: var(--acc-deep, var(--accent-deep));
}

/* ── 2. 品类墙 .tchip：数字在悬停时亮起来 ────────────────────────────────────
   现状 hover：边框变色 + 上浮 2px + 阴影。缺的是"这一格为什么值得点"——
   悬停时让记录数从灰变青绿，数字本身成为第二重反馈。 */
body.gera .g6 .tchip:hover b {
  color: var(--acc);
  transition: color var(--d2) var(--e);
}

/* ── 3. 五张卡 .pain：悬停时引号点亮 ─────────────────────────────────────────
   现状 .pain 无 hover。悬停时衬线引号从半透明变实，"引用感"成立。 */
body.gera .g6 .pain { transition: background var(--d2) var(--e); }
body.gera .g6 .pain:hover { background: var(--acc-tint2); }
body.gera .g6 .pain:hover b::before,
body.gera .g6 .pain:hover b::after { opacity: 1; transition: opacity var(--d2) var(--e); }

/* ── 4. 品类索引行（wall 行不行，.tchip 已是胶囊；跳过）── */

/* ── 5. FAQ 问题行：悬停整行提示"可以点" ───────────────────────────────────── */
body.gera .g6 .faq summary { transition: border-color var(--d2) var(--e), color var(--d2) var(--e); }
body.gera .g6 .faq summary:hover { color: var(--acc-deep, var(--accent-deep)); }

/* ── 6. 页脚邮箱/WhatsApp 行：图标随行亮 ───────────────────────────────────── */
body.gera .gera-foot .gera-fcontact a .gera-fic {
  transition: color var(--d2) var(--e), transform var(--d2) var(--e);
}
body.gera .gera-foot .gera-fcontact a:hover .gera-fic {
  color: var(--accent-deep);
  transform: translateX(1px);
}

/* ── 7. 键盘焦点环（全站统一，a11y 加分）────────────────────────────────────
   Uiverse 值得学的不是花按钮，是「状态全都看得见」。键盘 Tab 到任何链接/按钮/输入框
   都给同一个 2px 青绿描边。只作用于 :focus-visible（鼠标点击不出现）。 */
body.gera :focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-31 —— 手机端品类页子导航：可滚，但要让访客看出来"还能滚"
   ---------------------------------------------------------------------------
   实测（390×844，/category/hardware-tools/）：`.subbar .subnav` clientWidth=360、
   scrollWidth=635 → **275px 藏在右边**，最后一项「Where it is made」被切成半个词，
   而滚动条被 `scrollbar-width:none` 藏掉 → 看起来像排版坏了，不像能滑。

   修法（纯 CSS，不加 JS）：
     ① 右缘 44px 白色渐隐 —— 露出"后面还有"，而不是硬切一个半截词；
     ② `scroll-snap-type: x proximity` + 每项 `scroll-snap-align: start` ——
        滑到哪一项就停在那一项，不会停在半个词上；
     ③ 给滚动容器右侧补 44px padding，最后一格滑到底时不会被渐隐吃掉。
   容器 `.subbar` 本身是 `position:sticky; background:#fff`，渐隐用伪元素叠在最右，
   白底渐变，所以不依赖任何背景色变量（深色主题也不会出现白块）。 */
@media (max-width: 768px) {
  body.gera .g6 .subbar { position: sticky; }
  body.gera .g6 .subbar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 74%);
  }
  body.gera .g6 .subbar .subnav {
    scroll-snap-type: x proximity;
    padding-right: 44px;
    -webkit-overflow-scrolling: touch;
  }
  body.gera .g6 .subbar .subnav a { scroll-snap-align: start; }
}

/* 2026-10-31 —— 手机上品类页眉标的两行时，绿点别跑到第二行去
   实测（390px，/category/hardware-tools/）：眉标
   「1,731 COMPANY RECORDS IN THIS CATEGORY · 26 PROVINCES」在 360px 容器里必然折成两行，
   而 `.eyebrow` 是 `display:flex; align-items:center` → 那颗 7px 的 `.live` 绿点被**垂直居中**
   到两行的中间，看上去像是第二行「26 PROVINCES」前面的一个孤点。
   修法：≤480 时让绿点对齐第一行（flex-start + 半个字高的光学补偿），字距从 2px 收到 1.2px。 */
@media (max-width: 480px) {
  body.gera .g6 .eyebrow { align-items: flex-start; letter-spacing: 1.2px; }
  body.gera .g6 .eyebrow .live { margin-top: .42em; flex: 0 0 auto; }
}