/* ══════════════════════════════════════════════════════════════
   灵境OZON 官网样式 · 晨雾极光 v3（浅色）

   令牌在 /tokens-light.css，本文件只写结构与表现，不新写字号。
   段落顺序：基座 → 晨雾光斑 → 首屏 hg- → 市场调研 mkt- →
            能力全景 cap- → 流水线 flw- → 可控可信 trs- →
            价格与 FAQ prc- → 页脚 ft- → 下载页 dl-
   每段类名前缀唯一，段与段之间零选择器冲突。

   行为性规则（IO 门控、text-wrap 清单、行长约束、flow 对齐、
   焦点逃生口、响应式断点）全部原样保留自深色版 —— 这次只换视觉层。
   ══════════════════════════════════════════════════════════════ */

/* ══ 全站基座。原本写在 hg- 段落样式表里，段落之间会互相覆盖，
   抽出来单独一层。 ══ */

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;              /* clip 不产生滚动容器，不会破坏 sticky */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background-color: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
::selection { background: rgba(126, 186, 233, .35); }

/* hidden 属性的兜底重置。浏览器 UA 样式表里那条 [hidden]{display:none} 优先级最低，
   本表里任何一条作者级 display 都能把它压掉 —— 比如 .hg-btn 的 display:inline-flex，
   于是下载页降级时服务端注入的 hidden 形同虚设：按钮照样是 474×52 可见可点，
   href="#" 点下去只跳回页首，等于在售卖页上放了个坏按钮。
   踩过的坑：管理后台 admin.css 里正好有同名规则（第 59 行），同样的 hidden 用法在后台
   工作正常，就默认官网这边也一样，实际官网整表没有这条。补上，顺带把 buy.html 里
   by-panel 那几处 hidden 也一并钉死（buy.js 只切 .hidden 属性、不碰 style.display，
   加 !important 不会打架）。 */
[hidden] {
  display: none !important;
}


/* ══════════ 晨雾光斑 · 环境层 ══════════
   深空星图整层（.sky-bg 全家 + canvas 星野 + SVG 星链 + 视差）已删除，
   对应的 HTML 与 site.js 星图 IIFE 一并移除。
   替身是纯 CSS 的晨雾光斑：三团大而缓的柔彩光斑（天蓝 / 薄紫 / 蜜桃），
   挂在 .hg-hero 的两个伪元素上，60–90s 永续漂移。

   三条纪律：
   一、柔光来自「色 → 透明」的径向渐变本身，不用 filter: blur ——
       一样柔，但不用付一层全屏模糊的账（样稿用的 blur(90px) 是单文件
       演示的偷懒写法，不进生产）。
   二、只动 transform（合成层），漂移期间零重绘。
   三、漂移动画整段包在 prefers-reduced-motion: no-preference 里：
       reduce 下 document.getAnimations() 必须为 0，光斑静止但仍在。 */
.hg-hero::before,
.hg-hero::after {
  content: "";
  position: absolute;
  inset: -14% -10% -6%;
  z-index: 0;
  pointer-events: none;
}
/* 前层：天蓝（左上）+ 蜜桃（中下），两团一层，同频漂移 */
.hg-hero::before {
  background-image:
    radial-gradient(42% 34% at 16% 10%, rgba(126, 186, 233, .50), transparent 70%),
    radial-gradient(40% 30% at 34% 82%, rgba(245, 198, 168, .38), transparent 72%);
}
/* 后层：薄紫（右上） */
.hg-hero::after {
  background-image:
    radial-gradient(44% 38% at 86% 6%, rgba(201, 184, 242, .46), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  /* 六拍入场的第一拍「光斑醒」：醒来只动 opacity（900ms 一次性），
     transform 归漂移动画管 —— 同一元素两条动画各占一个属性，不打架。
     永续额度不变：wake 是有限次动画。 */
  .hg-hero::before {
    animation: mist-drift-a 78s ease-in-out infinite alternate,
               hg-mist-wake 900ms var(--e-out) backwards;
    will-change: transform;
  }
  .hg-hero::after {
    animation: mist-drift-b 92s ease-in-out infinite alternate,
               hg-mist-wake 900ms var(--e-out) backwards;
    will-change: transform;
  }
}
@keyframes hg-mist-wake { from { opacity: 0; } to { opacity: 1; } }
@keyframes mist-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(1.5%, 6%, 0) scale(.96); }
}
@keyframes mist-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5%, 2.5%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, -3%, 0) scale(1.12); }
}


/* ══════════ 导航 + 品牌首屏 + 四件事概览 ══════════ */
/* ══════════════════════════════════════════════════════════════
   hg- · 顶部导航 + 首屏 + 四件事概览
   色值与字号取自 tokens-light.css；唯一的例外是首屏产品图的
   「深色窗口装裱」—— 那一块刻意保持深色（真实截图就是深色主题），
   相关色值写死在 .hg-panel / .hg-shot 里，不进令牌。
   ══════════════════════════════════════════════════════════════ */


.hg-nav, .hg-nav *, .hg-nav *::before, .hg-nav *::after,
.hg-root, .hg-root *, .hg-root *::before, .hg-root *::after { box-sizing: border-box; }

.hg-root { position: relative; }

.hg-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

.hg-n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}
.hg-n--roll { display: inline-block; min-width: 2ch; text-align: right; }

.hg-grad { color: var(--fg-0); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hg-grad {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.hg-skip {
  position: fixed; left: var(--s-4); top: var(--s-4); z-index: 200;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background-color: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-0); text-decoration: none;
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  transform: translateY(-300%);
  transition: transform var(--d-base) var(--e-out);
}
.hg-skip:focus { transform: translateY(0); box-shadow: var(--focus); outline: none; }

/* ── 按钮 ───────────────────────────────────────────────── */
.hg-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 var(--s-5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  font-weight: var(--w-mid);
  text-decoration: none; white-space: nowrap;
  overflow: hidden;   /* 光泽扫过要被圆角裁住 */
  /* D 包 · 磁吸：位移与 hover 抬升合成在同一条 transform 上。
     --hg-mx/--hg-my 由 site.js 在 60px 引力半径内 CSSOM 写入（首页专属，
     download.html 没有 #hg-hero 不注册）；hover 抬升从写死的 translateY
     改走 --hg-lift，否则 :hover 的 transform 会整条覆盖掉磁吸位移。
     无 JS / reduce 下三个变量都是默认值，等价于原来的静态按钮。 */
  transform: translate3d(var(--hg-mx, 0px), calc(var(--hg-my, 0px) + var(--hg-lift, 0px)), 0);
  transition: transform var(--d-hover) var(--e-out),
              box-shadow var(--d-hover) var(--e-out),
              background-color var(--d-hover) var(--e-color),
              border-color var(--d-hover) var(--e-color),
              color var(--d-hover) var(--e-color);
}
/* 光泽扫过（照样稿移植）：一道斜切的白高光，hover 时从左扫到右。
   动的是 left（一次性 transition，不是动画），reduce 下由令牌
   --d-sheen 塌成 1ms，等效瞬移，不会在 getAnimations 里留东西。 */
.hg-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 46%;
  background-image: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
  transform: skewX(-18deg);
  transition: left var(--d-sheen) ease;
  pointer-events: none;
}
.hg-btn:hover::before { left: 130%; }
.hg-btn--solid {
  background-image: var(--grad-btn);
  color: var(--on-accent);
  box-shadow: var(--edge-top), var(--glow-brand);
}
.hg-btn--solid:hover { --hg-lift: -2px; box-shadow: var(--edge-top), var(--glow-brand), var(--glow-soft); }
.hg-btn--ghost {
  background-color: var(--glass);
  border-color: var(--line-2);
  color: var(--fg-1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--edge-top);
}
.hg-btn--ghost::before {
  background-image: linear-gradient(105deg, transparent, rgba(126, 186, 233, .30) 50%, transparent);
}
.hg-btn--ghost:hover { background-color: var(--bg-hover); border-color: rgba(29, 111, 181, .40); color: var(--fg-0); --hg-lift: -2px; box-shadow: var(--edge-top), var(--glow-soft); }
.hg-btn--lg {
  min-height: 52px; padding: 0 var(--s-8);
  border-radius: var(--r-md);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
}
.hg-btn:focus-visible { outline: none; box-shadow: var(--focus); }

.hg-cta { --hg-bx: 50%; --hg-by: 50%; overflow: hidden; }
.hg-cta__label { position: relative; z-index: 1; }
/* 表面光斑（D 包升级）：不再等 hover —— 磁吸半径内由 --hg-so 渐显，
   光斑圆心跟着光标（--hg-bx/--hg-by 由 site.js 写）。
   :hover 那条保留成无 JS 的兜底：光斑亮在正中。 */
.hg-cta__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(120px 90px at var(--hg-bx) var(--hg-by), rgba(255, 255, 255, .40), transparent 70%);
  opacity: var(--hg-so, 0);
  transition: opacity var(--d-hover) var(--e-out);
}
.hg-cta:hover .hg-cta__sheen { opacity: 1; }
/* 次按钮（下载试用）的表面光斑走 ::after，天蓝调；只给首屏两枚主按钮。 */
.hg-acts .hg-btn--ghost::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(120px 84px at var(--hg-bx, 50%) var(--hg-by, 50%), rgba(126, 186, 233, .38), transparent 70%);
  opacity: var(--hg-so, 0);
  transition: opacity var(--d-hover) var(--e-out);
}
.hg-acts .hg-btn--ghost:hover::after { opacity: 1; }

/* ── 顶部导航 ───────────────────────────────────────────── */
.hg-nav { position: sticky; top: 0; z-index: 100; }
.hg-nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: var(--glass);
  border-bottom: 1px solid var(--line-1);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.hg-nav--stuck::before { opacity: 1; }
.hg-nav__inner {
  position: relative;
  display: flex; align-items: center; gap: var(--s-6);
  max-width: var(--container-wide); margin-inline: auto;
  padding-inline: var(--page-pad);
  min-height: 72px;
}

.hg-brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; padding: var(--s-2) 0; }
/* 正式 logo（resources/brand 原图派生）。旧的自绘六边形 + 盒子 + 旋转光环
   （hg-brand__mark/__ring/__glyph 全家）随品牌图标退役 —— 新图标自带玻璃
   机身；hg-spin 那条 7s 永续动画一并省下（全站永续 3 → 2）。 */
.hg-brand__logo { flex: none; display: block; }
/* 页脚小尺寸品牌位：与文字基线对齐 */
.ft-brand__logo, .by-brand__logo { flex: none; display: inline-block; vertical-align: -3px; }
.hg-brand__text {
  color: var(--fg-0);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: -0.01em;
  font-weight: var(--w-bold);
}
.hg-brand__lat { font-family: var(--font-num); letter-spacing: 0.02em; color: var(--fg-2); margin-left: 2px; }
.hg-brand:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: var(--focus); }

.hg-nav__links { display: flex; align-items: center; gap: var(--s-1); margin-inline: auto; }
.hg-nav__link {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  color: var(--fg-2); text-decoration: none;
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  transition: color var(--d-hover) var(--e-color), background-color var(--d-hover) var(--e-color);
}
.hg-nav__link:hover { color: var(--fg-0); background-color: var(--brand-ghost); }
/* 当前页高亮（pricing.html 的「价格」指自身）：与 hover 同一语汇，
   再压一分字重，让「你在这里」不靠颜色一个通道。 */
.hg-nav__link[aria-current="page"] {
  color: var(--fg-0);
  background-color: var(--brand-ghost);
  font-weight: var(--w-mid);
}
.hg-nav__link:focus-visible { outline: none; box-shadow: var(--focus); }
.hg-nav__acts { display: flex; align-items: center; gap: var(--s-3); }

/* ── 首屏 ───────────────────────────────────────────────── */
.hg-hero {
  /* 必须是 overflow-x: clip 而不是 overflow: hidden —— hidden 会让这个 section
     变成滚动容器，而 animation-timeline: view() 绑定的是最近的滚动祖先，
     入场动画会卡在一个固定进度上。clip 只裁剪，不建立滚动容器。 */
  position: relative; overflow-x: clip;
  padding-block: var(--s-20) var(--s-32);
}
.hg-hero:focus { outline: none; }









.hg-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--container-wide); margin-inline: auto;
  padding-inline: var(--page-pad);
}
.hg-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--s-16);
  align-items: end;
}

.hg-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-6);
  color: var(--fg-2);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
}
.hg-title {
  margin: 0;
  color: var(--fg-0);
  font-size: var(--t-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-mega);
  font-weight: var(--w-bold);
}
.hg-title__line { display: block; overflow: hidden; padding-bottom: .06em; }
.hg-title__in { display: block; }
/* 由 --t-display(60px) 降到 --t-h2(40px)。
   上一版主标题是三行断言，副行 60px 是那个结构里的收句，成立；
   现在主标题是品牌名「灵境OZON」、副行是标语，两者都在 60–84px 这一档
   会互相抢，而且标语在 700px 的标题列里会折行，断点正好把「10 家」拆开
   —— 那是整句话的重心。降一档之后单行放得下，层级也回到「品牌大、标语小」。 */
.hg-title__line--sub {
  margin-top: var(--s-3);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--w-normal);
}

.hg-lede { padding-bottom: var(--s-2); }
.hg-lede__p {
  margin: 0 0 var(--s-8);
  max-width: 46ch;
  color: var(--fg-1);
  font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
}
.hg-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0 0 var(--s-5); }
.hg-fine {
  /* 实测 596px / 49 字一行。参考站全站行长落在 17–36 字，
     超过 40 字眼睛回到行首时容易串行，细则这种没人愿意读的文字尤其。 */
  margin: 0; max-width: 420px; color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}

/* ── 产品窗口：深色装裱 ───────────────────────────────────
   浅色首屏上唯一的深色块。真实截图（hero-workbench.png）本来就是
   深色主题，给它一个深色圆角框 + 大半径蓝灰柔影，像一块压在
   晨雾光斑上的玻璃屏 —— 样稿里那个深窗口就是这个意思。
   深色色值写死在本段，不进浅色令牌。 */
.hg-stage {
  position: relative;
  margin: var(--s-16) auto 0;
  max-width: min(100%, 1060px);
}
/* 窗口脚下的极光余晖：天蓝→薄紫，替代原来的品牌蓝地灯 */
.hg-stage__floor {
  position: absolute; left: 8%; right: 8%; bottom: -7%; height: 42%;
  background-image: radial-gradient(60% 60% at 50% 100%, rgba(126, 186, 233, .38), rgba(201, 184, 242, .20) 55%, transparent 76%);
  pointer-events: none;
}
.hg-deck { position: relative; perspective: 1800px; }
.hg-unfold {
  transform-origin: 50% 0%;
  /* 第五拍：620ms 起 96% 缩放 + 12px 模糊落定。链上无 opacity（LCP 纪律）。 */
  animation: hg-unfold 750ms var(--e-out) 620ms backwards;
}
.hg-panel {
  --hg-rx: 4deg; --hg-ry: 0deg; --hg-lx: 76%; --hg-ly: 6%;
  position: relative;
  padding: var(--s-3);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--r-2xl);
  background-image: linear-gradient(160deg, #171A21, #12141A 60%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    var(--shadow-3);
  overflow: hidden;
  /* D 包 · 滚动视差 + 微倾斜：--hg-py（±30px 位移）与 --hg-tx（≤2° 追赶
     倾斜）由 site.js 的 rAF 收敛循环写入，停稳自动归零并停掉 rAF ——
     不是永续动画。与既有的光标倾斜（--hg-rx/--hg-ry）在同一条 transform
     上相加，两套 JS 各写各的变量，互不覆盖。reduce 下两套都不注册。 */
  transform: translate3d(0, var(--hg-py, 0px), 0)
             rotateX(calc(var(--hg-rx) + var(--hg-tx, 0deg)))
             rotateY(var(--hg-ry));
  transform-origin: 50% 0%;
  /* 跟随期间不加过渡 —— JS 每帧都在写新角度，过渡只会一直追不上；
     归位的过渡由 .hg-panel--rest 单独给。 */
}
.hg-panel--rest { transition: transform var(--d-slow) var(--e-out); }
/* 顶部的极光余晖折射：跟着光标走（--hg-lx/--hg-ly 由 JS 写），
   压在窗口之下，不盖内容。 */
.hg-panel__sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(46% 40% at var(--hg-lx) var(--hg-ly), rgba(126, 186, 233, .12), rgba(201, 184, 242, .06) 42%, transparent 70%);
  opacity: .4;
  transition: opacity var(--d-base) var(--e-out);
}
.hg-panel--live .hg-panel__sheen { opacity: 1; }
.hg-panel__edge {
  position: absolute; left: 14%; right: 14%; bottom: 0; height: 1px; z-index: 3;
  background-image: linear-gradient(90deg, transparent, rgba(126, 186, 233, .55), transparent);
  opacity: .6; pointer-events: none;
}

/* ── 状态条：玻璃药丸骑在产品窗口下沿（照样稿 plus-bento）──
   内容只有机制性文案与白名单数字（8 个阶段 / 30% 目标净利率），
   不做假实时数据。描边是 hairline 双层背景技法：玻璃白 padding-box
   垫底、光斑渐变 border-box 露出 1px 边。
   入场是六拍编排的末拍（900ms 显形，数字 count-up 由 site.js 950ms 起播；
   HTML 里写的是终值，无 JS / reduce 直接完整）。状态条不在截图的祖先链上，
   允许 opacity 显形；不加任何永续动画：永续额度已被光斑与品牌环占满。 */
.hg-live {
  position: relative; z-index: 2;
  width: max-content; max-width: calc(100% - var(--s-8));
  margin: -24px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-image:
    linear-gradient(var(--glass-edge), var(--glass-edge)),
    var(--grad-hair);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-2);
  animation: hg-live-in 520ms var(--e-out) 900ms backwards;
}
.hg-live__item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--fg-1);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  white-space: nowrap;
}
.hg-live__item b { color: var(--fg-0); font-weight: var(--w-bold); }
.hg-live__run { color: var(--fg-0); font-weight: var(--w-mid); }
.hg-live__sep { width: 1px; height: 16px; flex: none; background-color: var(--line-2); }
.hg-live__ticks { display: inline-flex; gap: 3px; margin-right: var(--s-1); }
.hg-live__ticks i { width: 12px; height: 5px; border-radius: 3px; background-color: var(--line-2); }
.hg-live__ticks i.p { background-color: var(--brand-dim); }
.hg-live__ticks i.c { background-color: var(--brand); box-shadow: 0 0 8px rgba(29, 111, 181, .45); }
@media (max-width: 599px) {
  /* 手机上窗口缩得小、状态条换两行，-24px 会盖掉迷你截图的
     商品流水线整行；改 -12px 只骑住窗框下沿，截图内容全露出。 */
  .hg-live { margin-top: -12px; border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); gap: var(--s-2) var(--s-3); }
  .hg-live__sep { display: none; }
  .hg-live__ticks i { width: 8px; }
}

.hg-led { width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); flex: none; display: inline-block; background-color: var(--fg-3); }
.hg-led--ok { background-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); }
.hg-led--warn { background-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.hg-led--on { background-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* ── 数据徽章：骑在产品窗口边缘的玻璃小药丸（照样稿 plus-layout）──
   内容只用已核实口径（数据存于本机 / 目标净利率 30%），全部 aria-hidden。
   刻意只放两枚、走上缘与左缘：下缘居中已被状态条占住，第三枚不管放哪
   都会和状态条在同一条边上重复同一个事实。入场在六拍编排之后弹出
   （1000/1120ms，1.6s 内收完），窄屏整组隐藏 —— 手机上窗口已经贴边，
   徽章只会压住截图内容。 */
.hg-fb {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-image:
    linear-gradient(var(--glass-edge), var(--glass-edge)),
    var(--grad-hair);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-2);
  color: var(--fg-1);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  white-space: nowrap;
  pointer-events: none;
  animation: hg-fb-pop 420ms var(--e-spring) backwards;
}
.hg-fb b { color: var(--fg-0); font-weight: var(--w-bold); }
.hg-fb--a { top: -14px; right: 5%; animation-delay: 1000ms; }
/* 42%：落在截图侧栏「运营/接入」两组之间的过渡带正中 ——
   36% 会盖住「订单管理」上半行；这一带唯一被压的是「接入」二字的
   分组小标题，十二个菜单项全部完整可读（实测两组间没有真正的
   全空白带能放下 40px 高的徽章，压分组标题是最轻的取舍）。 */
.hg-fb--b { top: 42%; left: -18px; animation-delay: 1120ms; }
@media (max-width: 899px) { .hg-fb { display: none; } }

/* ── 渐变墨关键词（C 包）：一句只亮一处 ─────────────────────
   冷色对（天蓝→薄紫深化墨）给首屏「10」与市场调研标题的「卖什么」；
   暖色对留给核价关卡的否决句（.flw-k，规则在 flw- 段）。
   不支持 background-clip: text 的浏览器退回深化墨实色，同样过 AA。 */
.hg-k, .mkt-k { color: var(--ink-sky); font-weight: var(--w-bold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hg-k, .mkt-k {
    background-image: var(--grad-k);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ── 区块英文眉线（C 包）：mono 全大写 + 加宽字距，配在中文眉线旁 ──
   纯装饰（aria-hidden），五个主区块各一条；FAQ 的「答疑」不配 ——
   它是价格段的附属，不是独立主区块。 */
.hg-label, .mkt-label, .flw-label, .trs-label, .prc-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
}
.hg-brow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-num);
  font-size: 11px; line-height: var(--lh-label);
  font-weight: var(--w-heavy);
  letter-spacing: .3em;
  color: var(--ink-sky);
  text-transform: uppercase;
  white-space: nowrap;
}
.hg-brow::after { content: ""; width: 26px; height: 1px; background-color: var(--line-3); }

/* ── 幽灵序号（A 包）：超大空心描边数字压在区块标题背后 ──────
   品牌蓝 12% 的描边 + 向下渐隐 mask，纯装饰：aria-hidden、禁选中、
   不吃指针。水平位置各段单调，见下方逐段偏移。 */
.hg-ghost {
  position: absolute; z-index: 0;
  top: -.34em; right: 0;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(96px, 12vw, 168px); line-height: .8;
  font-weight: var(--w-heavy);
  color: transparent;
  -webkit-text-stroke: 2px rgba(29, 111, 181, .12);
  -webkit-mask-image: linear-gradient(180deg, #000 22%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 22%, transparent 96%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 逐段偏移：有右下导语的头部（mkt/trs/flw）序号压在标题尾部上方，
   不落到导语一侧；概览与价格的头部右侧本来就空，靠右放。 */
.mkt-hd .hg-ghost, .trs-hd .hg-ghost { right: auto; left: 340px; }
.flw-head .hg-ghost { right: auto; left: 300px; top: -.22em; }
.prc-hd__l .hg-ghost { right: -12px; }
.flw-head { position: relative; }
.flw-head > :where(:not(.hg-ghost)) { position: relative; z-index: 1; }
.prc-hd__l { position: relative; }
.prc-hd__l > :where(:not(.hg-ghost)) { position: relative; z-index: 1; }
@media (max-width: 899px) {
  /* 窄屏幽灵序号缩小靠右上（头部单列回落写在 mkt- 段自己的断点里 ——
     那里的 display:grid 声明在后，写在这儿会被它压掉）。 */
  .hg-ghost, .mkt-hd .hg-ghost, .trs-hd .hg-ghost, .flw-head .hg-ghost {
    font-size: 96px; top: -.2em; left: auto; right: 0;
  }
}

/* ── 四件事 ─────────────────────────────────────────────── */
.hg-caps { position: relative; padding-block: var(--section-py); background-color: var(--bg-0); scroll-margin-top: 88px; }
.hg-caps::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--container), 100%); height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.hg-caps__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--page-pad); }
/* position:relative 是给幽灵序号 01 当锚的；文字压到 z-index:1，
   序号描边永远在字后面。 */
.hg-caps__hd { position: relative; display: flex; align-items: baseline; gap: var(--s-6); margin-bottom: var(--s-12); flex-wrap: wrap; }
.hg-caps__hd > :where(:not(.hg-ghost)) { position: relative; z-index: 1; }
.hg-label { margin: 0; color: var(--fg-2); font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); }
.hg-caps__t { margin: 0; color: var(--fg-0); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-bold); }

.hg-caps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.hg-cap {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
  transition: transform var(--d-hover) var(--e-out),
              box-shadow var(--d-hover) var(--e-out);
}
/* ── 描边升级：光斑三色的极淡渐变 hairline（照样稿 plus-bento）──
   静态环在 ::before：mask 用两层（content-box XOR border-box）抠出 1px 环，
   -webkit-mask-composite: xor 与标准 mask-composite: exclude 都要写。
   hover 点亮环在 ::after：同一副面具装点亮版渐变，opacity 淡入 ——
   渐变本身不能过渡，叠两层能。原来的顶部彩线与光泽扫过由这套语言替换。 */
.hg-cap::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.hg-cap::after {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  /* D 包升级：点亮环从整圈渐变改为跟着光标走的径向三色（光斑色系）。
     圆心 --gx/--gy 由 site.js 以 section 级委托写入（rAF 合帧）；
     无 JS / 触摸设备停在上沿正中，hover 照样点亮。 */
  background-image: radial-gradient(240px 190px at var(--gx, 50%) var(--gy, 0%),
    rgba(126, 186, 233, .95), rgba(201, 184, 242, .60) 46%, rgba(245, 198, 168, .42) 72%, transparent 88%);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--d-hover) var(--e-color);
  pointer-events: none;
}
.hg-cap:hover { transform: translateY(-4px); box-shadow: var(--edge-top), var(--shadow-2), var(--glow-soft); }
.hg-cap:hover::after { opacity: 1; }
.hg-cap__n { display: block; color: var(--fg-2); font-family: var(--font-num); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-num); }
.hg-cap__t { margin: var(--s-4) 0 var(--s-2); color: var(--fg-0); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-bold); }
.hg-cap__p { margin: 0; color: var(--fg-1); font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm); }

/* ── 概览卡的自绘线性图标 + 八段流水线刻度（照样稿 plus-bento）──
   图标 28px、2px 描边圆头；刻度标出本卡在八个阶段流水线中的位置，
   与 #flow 的阶段号一致。数字走等宽数字字体。 */
.hg-cap__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.hg-cap__ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px;
  border: 1px solid var(--line-1); border-radius: var(--r-md);
  background-image: linear-gradient(150deg, rgba(126, 186, 233, .14), rgba(201, 184, 242, .10));
  box-shadow: var(--edge-top);
  transition: transform var(--d-hover) var(--e-spring);
}
.hg-cap:hover .hg-cap__ic { transform: translateY(-2px) scale(1.05); }
.hg-cap__i { display: block; fill: none; stroke: var(--fg-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hg-cap__ia { stroke: var(--brand); }
.hg-cap__ticks {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-5);
}
.hg-cap__rail { display: flex; gap: 3px; flex: 1; min-width: 0; }
.hg-cap__rail i { flex: 1; height: 4px; border-radius: 3px; background-color: var(--line-1); }
.hg-cap__rail i.p { background-color: var(--brand-dim); }
.hg-cap__rail i.c { background-color: var(--brand); box-shadow: 0 0 6px rgba(29, 111, 181, .40); }
.hg-cap__stage { flex: none; color: var(--fg-3); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-num); }
.hg-cap__stage b { color: var(--brand-lift); font-weight: var(--w-bold); }
/* 刻度上方留出呼吸位：描述与刻度之间至少一格 */
.hg-cap__p { margin-bottom: var(--s-4); }

/* ── 入场：六拍编排（D 包，总长 ≤1.6s）───────────────────────
   0ms 光斑醒（见上方 hg-mist-wake）→ 100ms 眉线滑入 →
   240ms 品牌名逐字 40ms 错峰（拆字在 site.js，无 JS 标题是完整静态文本）→
   560ms 标语升起 → 620ms 窗口 96% 缩放+模糊落定 → 640/700/760ms
   引导/按钮/细则 → 900ms 状态条显形（950ms 数字 count-up，site.js）。

   LCP 链路纪律（沿用上一版结论）：截图的祖先链 .hg-unfold **绝不加
   opacity:0+backwards** —— Chrome 不把透明元素算作 LCP 候选，加了截图
   永远成不了 LCP。眉线/引导/细则/状态条不在那条链上，允许 opacity 显形。
   窗口落定的 filter: blur 不影响 LCP 资格（发布前已实测 LCP 仍是
   IMG.hg-shot）。 */
.hg-eyebrow { animation: hg-brow-in 520ms var(--e-out) 100ms backwards; }
.hg-lede__p, .hg-acts, .hg-fine { animation: hg-rise-in 520ms var(--e-out) backwards; }
.hg-lede__p { animation-delay: 640ms; }
.hg-acts { animation-delay: 700ms; }
.hg-fine { animation-delay: 760ms; }
/* 品牌行（第一行）整行 hg-lift 退役，让位给逐字入场；行的 overflow
   放开 —— 逐字带模糊浮出，clip 会切掉辉散。无 JS 时该行零动画。 */
.hg-title__line:first-child { overflow: visible; }
.hg-title__line:nth-child(2) .hg-title__in { animation: hg-lift var(--d-enter) var(--e-out) 560ms backwards; }
/* 逐字：span 由 site.js 运行时拆出（.hg-boot 同时打上），序号走 CSSOM 的
   --hg-ci。只在 no-preference 下声明 —— reduce 里 site.js 根本不拆字，
   这里再包一层保险。 */
.hg-ch { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hg-boot .hg-ch {
    animation: hg-ch-rise 560ms var(--e-out) backwards;
    animation-delay: calc(240ms + var(--hg-ci, 0) * 40ms);
  }
}

@keyframes hg-brow-in { from { opacity: 0; transform: translateX(-18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hg-rise-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hg-live-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hg-ch-rise { from { opacity: 0; transform: translateY(.55em); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes hg-lift { from { transform: translateY(112%); } to { transform: none; } }
@keyframes hg-unfold { from { transform: translateY(44px) scale(.96); filter: blur(12px); } to { transform: none; filter: blur(0); } }
@keyframes hg-fb-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }


/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .hg-hero__top { gap: var(--s-12); }
}
/* 首屏双栏改为 1023 就堆叠（原来是 899）。
   900–1023 这一档标题列只剩 434–501px，而这一档的标题字号还有 56px ——
   一行放不下 6 个汉字，主标题必然折成三行甚至撕开单字。
   这个区间是小尺寸笔记本和分屏浏览的常见宽度，不是边缘情况。
   堆叠之后标题拿到整行宽度，同一句话反而排得开。 */
@media (max-width: 1023px) {
  .hg-hero__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); align-items: start; }
  .hg-lede__p { max-width: none; }
}
@media (max-width: 899px) {
  .hg-lede__p { max-width: none; }
  /* 原来这里是 display:none —— 能力/怎么跑/价格三个锚点在平板和手机上会彻底消失，
     滚过首屏之后导航里只剩一个按钮，那不是取舍是缺失。改成横向可滚一排。 */
  .hg-nav__links {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    gap: var(--s-5);
    /* 窄屏下这一排是横向滚动器，五项放不下时最后一两项在视口外。
       没有任何暗示的话，右缘被切一半的字看着像排版事故 —— 右侧加一层
       渐隐遮罩当「还有内容」的信号。末尾垫 28px 内边距，滚到头时
       最后一项能完全走出渐隐区，不会永远虚着；没滚动时右缘本来是空的，
       遮罩落在空白上等于不存在，平板宽度下自动免疫。
       不支持 mask 的老浏览器只是没有渐隐，滚动本身不受影响。 */
    padding-inline-end: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--s-1);
    margin-top: var(--s-1);
  }
  .hg-nav__links::-webkit-scrollbar { display: none; }
  .hg-nav__inner { flex-wrap: wrap; }

  /* 触控目标。实测导航三个锚点和页脚链接的高度都是 29px，
     而手指的可靠命中面积是 44×44（WCAG 2.5.8 定的 24×24 是下限，
     苹果和谷歌的人机指南都写 44）。
     用负 margin 抵掉增加的 padding，所以**行高不变**、导航不会因此变高 ——
     命中区扩大了，版式一点没动。 */
  .hg-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -7px;
    /* 可滚一排里的链接不许被 flex 压扁：压扁会让「市场调研」竖排成
       一列单字（浅色改版自查时在 390 上抓到的）。 */
    flex: none;
    white-space: nowrap;
  }
  .hg-stage { margin-top: var(--s-12); }
  .hg-panel { --hg-rx: 0deg; }
  .hg-caps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  /* 原来 ≤599 把「下载试用」也藏了，手机上就没有下载入口了。
     保留，只是收窄内边距。 */
  .hg-nav__dl { padding-inline: var(--s-3); }
  .hg-nav__inner { gap: var(--s-4); }
  .hg-brand__text { font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm); }
  .hg-acts { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hg-btn--lg { width: 100%; }
  .hg-panel { padding: var(--s-2); border-radius: var(--r-xl); }
  .hg-caps__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── 降级：动效退成静态终态，不是消失 ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hg-eyebrow, .hg-lede__p, .hg-acts, .hg-fine,
  .hg-title__in, .hg-ch, .hg-unfold, .hg-live, .hg-fb,
  .hg-cap,
  .hg-cap__n, .hg-cap__t, .hg-cap__p, .hg-cap__ticks,
  .hg-hero::before, .hg-hero::after {
    animation: none;
  }
  .hg-panel, .hg-cap, .hg-cap::after, .hg-cap__ic, .hg-btn, .hg-btn::before,
  .hg-acts .hg-btn--ghost::after, .hg-cta__sheen, .hg-skip { transition: none; }
}
/* ── 真实工作台截图 ────────────────────────────────────────
   playwright 拍的真图，工作台自带深色主题（data-theme="dark" 强制）。
   浅色改版后它装在上面 .hg-panel 的深色框里 —— 深图配深框，
   不会是一块黑斑直接贴在暖白纸上。边线和底色跟着框走深色字面值。
   2 倍图（2880×1440）缩到面板宽度显示，字才不糊。
   width/height 写死是为了让浏览器先占好位，避免图加载完页面往下跳。 */
.hg-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  background-color: #12141A;
}


/* ══════════ 能力全景 · 十二个功能面 ══════════ */
/* ══ cap- · 能力全景：十二个功能面。色值字号全取自 tokens-light.css ══ */
.cap-root, .cap-root *, .cap-root *::before, .cap-root *::after { box-sizing: border-box; }
.cap-n { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-num); }
.cap-grad { color: var(--fg-0); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cap-grad { background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}

/* ── 基座：首屏是 bg-0，这一段下沉到 void；正文区块不给极光 ── */
.cap-sec { position: relative; overflow-x: clip; padding-block: var(--section-py); background-color: var(--void); scroll-margin-top: 88px; }
.cap-seam {
  position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); pointer-events: none;
  width: min(var(--container), calc(100% - var(--page-pad) * 2)); height: 1px; background-image: var(--grad-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
}
.cap-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cap-bg > * { position: absolute; inset: 0; display: block; }
.cap-bg__grid {
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  -webkit-mask-image: radial-gradient(115% 80% at 50% 12%, var(--fg-0) 0%, transparent 72%);
  mask-image: radial-gradient(115% 80% at 50% 12%, var(--fg-0) 0%, transparent 72%);
}
.cap-bg__noise { opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cap-bg__fade { background-image: linear-gradient(to bottom, transparent 62%, var(--bg-0) 100%); }
.cap-inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-pad); }

/* ── 章首与分组头 ── */
/* 头部三段式（A 包，同 mkt-hd）：导语挪到右下与标题底对齐。
   46ch 的行长约束由导语列宽（≤400px ≈ 21 字）接手。 */
.cap-hd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  column-gap: var(--s-16);
  align-items: end;
  margin-bottom: var(--s-16);
}
.cap-label { grid-column: 1 / -1; }
.cap-title { grid-column: 1; }
.cap-lede { grid-column: 2; grid-row: 2; padding-bottom: 6px; }
.cap-label, .cap-grp__d { margin: 0; color: var(--fg-2); }
.cap-label { margin-bottom: var(--s-5); font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); }
.cap-title { margin: 0; color: var(--fg-0); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-bold); }
.cap-title__l { display: block; }
.cap-title__l--sub { font-weight: var(--w-light); }
.cap-lede { margin: var(--s-6) 0 0; color: var(--fg-1); font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); font-weight: var(--w-light); }
.cap-grp + .cap-grp, .cap-shelf { margin-top: var(--s-16); }
.cap-grp__hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-1); }
.cap-grp__d, .cap-q__lb, .cap-card--sm .cap-card__d { font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm); }

/* ── 栅格：运营 bento ＋ 接入/设置两排货架 ── */
.cap-grid, .cap-mini { display: grid; gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
.cap-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cap-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap-slot, .cap-mini > li { display: grid; }
.cap-slot--a { grid-column: span 7; grid-row: span 2; }
.cap-slot--b, .cap-slot--c { grid-column: span 5; }
.cap-slot--d, .cap-slot--e, .cap-slot--f { grid-column: span 4; }
.cap-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-16); }

/* ── 卡片：磨砂白玻璃 ── */
.cap-card {
  position: relative; display: flex; flex-direction: column; padding: var(--s-6);
  border: 1px solid transparent; border-radius: var(--r-xl);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
  transition: transform var(--d-hover) var(--e-out), box-shadow var(--d-hover) var(--e-out);
}
/* 描边升级为 hairline 环（技法同 .hg-cap::before）。
   本卡的 hover 点亮不用第二个环 —— ::after 已经是跟着光标走的真 1px 光环，
   那就是这张卡的点亮机制。 */
.cap-card::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
/* 真 1px 光环，跟着光标走；无 JS 时停在上沿正中 */
.cap-card::after {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background-image: radial-gradient(60% 120% at var(--cap-mx, 50%) var(--cap-my, 0%), rgba(29, 111, 181, .65), transparent 62%);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box; mask-composite: exclude;
  transition: opacity var(--d-hover) var(--e-color);
}
.cap-card:hover { transform: translateY(-4px); box-shadow: var(--edge-top), var(--shadow-2), var(--glow-soft); }
.cap-card:hover::after { opacity: .9; }
.cap-card__n { display: block; color: var(--fg-3); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-num); }
.cap-card__hd { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.cap-grp__t, .cap-card__t { margin: 0; color: var(--fg-0); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--w-bold); }
.cap-card__d { margin: var(--s-4) 0 0; color: var(--fg-2); text-wrap: pretty; font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.cap-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  border: 1px solid var(--line-1); border-radius: var(--r-md); background-color: var(--brand-ghost);
  color: var(--brand-lift); box-shadow: var(--edge-top);
}
.cap-i { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* 小卡：窄栏里图标压在名字上方，名字不折行 */
.cap-card--sm { padding: var(--s-5); }
.cap-card--sm .cap-card__hd { display: block; }
.cap-card--sm .cap-ic { width: 36px; height: 36px; margin-bottom: var(--s-3); }
.cap-card--sm .cap-card__t { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); font-weight: var(--w-mid); }
.cap-card--sm .cap-card__d { margin-top: var(--s-2); }

/* ── 大卡里的界面示意：玻璃外框 ＋ 不透明实窗 ── */
.cap-shot, .cap-q { margin-top: var(--s-6); border: 1px solid var(--line-1); border-radius: var(--r-lg); box-shadow: var(--edge-top); }
.cap-shot { flex: 1; padding: var(--s-2); background-color: var(--glass); }
.cap-win { display: flex; flex-direction: column; height: 100%; min-height: 208px; overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-md); background-color: var(--bg-1); }
.cap-win__bar { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-1); }
.cap-win__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background-color: var(--line-3); }
.cap-win__cap { margin-left: var(--s-2); color: var(--fg-2); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); }
.cap-win__body { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--s-4); flex: 1; padding: var(--s-4); }
.cap-side { display: flex; flex-direction: column; gap: var(--s-4); }
/* 侧栏十二条按 6 / 3 / 3 分段，条纹用一层 repeating-linear-gradient 画完 */
.cap-rows { display: block; position: relative; background-image: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 16px); }
.cap-rows--6 { height: 86px; }
.cap-rows--3 { height: 38px; }
.cap-rows--6::before { content: ""; position: absolute; left: 0; top: 0; width: 72%; height: 6px; border-radius: var(--r-pill); background-image: var(--grad-btn); }
.cap-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--s-3); }
.cap-ln { display: block; width: 46%; height: 8px; border-radius: var(--r-pill); background-color: var(--bg-3); }
.cap-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.cap-tile, .cap-panel { display: block; border: 1px solid var(--line-1); border-radius: var(--r-md); background-color: var(--bg-3); box-shadow: var(--edge-top); }
.cap-tile { height: 40px; }
.cap-panel {
  min-height: 56px;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 26px);
}

/* ── 自动队列：八段进度条，入场生长一次 ── */
.cap-q { padding: var(--s-4); background-color: var(--bg-1); }
.cap-q__track { position: relative; height: 10px; overflow: hidden; border-radius: var(--r-pill); background-color: var(--bg-3); }
.cap-q__track::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right, transparent 0 calc(12.5% - 2px), var(--bg-1) calc(12.5% - 2px) 12.5%); }
.cap-q__fill { display: block; height: 100%; border-radius: var(--r-pill); background-image: var(--grad-btn); transform: scaleX(.625); transform-origin: left center; }
.cap-q__lb { margin: var(--s-3) 0 0; color: var(--fg-2); }

/* ── 入场：IntersectionObserver 触发，定时播放 ──────────────
   原来这一段是 animation-timeline: view() 的滚动跟手动画，换掉的三条理由：

   一、跟手意味着**动画进度绑在滚动位置上**。实测滚 120px 时 .prc-slot 已到
       opacity 0.903，剩下 10% 又拖了 200px；而小幅点动会把卡片**停在
       opacity 0.44 的半透明态**不动——这是可读性 bug，不是审美问题。
   二、快速甩滚轮（1000px/200ms）时那 300px 区间在 60ms 内滚完，动画等于没播。
   三、view() 需要 Chrome 115+。360/QQ/微信 X5 这类旧 Chromium 上整块规则
       被 @supports 跳过，那批用户从来没看见过这里的动效。

   门控类 .cap-io 由 JS 打上：没有 JS、JS 出错、或不支持 IO 时这一段整体不生效，
   元素保持终态可见 —— 失败方向是「静态但完整」。 */
/* 「模糊到清晰」的入场：blur 和 opacity/transform 一起写进 from/to。
   to 必须显式（隐式 to 会取门控后的 opacity:0，从 0 播到 0）。 */
@keyframes cap-rise { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes cap-grow { from { transform: scaleX(0); } to { transform: scaleX(.625); } }
/* D 包 · 概览四步的卡内二拍：序号 spring 落下、内容 60ms 后跟 */
@keyframes hg-num-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes cap-part { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: no-preference) {
  /* 门控选择器包在 :where() 里，特异性归零 —— 这一条是必须的，不是风格偏好。
     不包的话 `.cap-io .cap-grid > li` 是 (0,2,1)，会压过下面 `.cap-io .is-shown`
     的 (0,2,0)，于是「初始就在视口内、已标记 is-shown」的元素依然是透明的。
     .is-in 不受影响是因为动画声明本来就凌驾于普通声明，
     所以这个 bug 只在重载恢复滚动位置那条路径上暴露 —— 测出来过一次。 */
  /* mkt- / trs- / hg-caps（概览四步）共用这套门控与 cap-rise 入场，
     动作一样，不另写一份。 */
  .cap-io :where(
    .cap-hd > *, .cap-grp__hd, .cap-grid > li, .cap-mini > li,
    .mkt-hd > *, .mkt-grid > li, .mkt-note,
    .trs-hd > *, .trs-grid > li,
    .hg-caps__hd > *, .hg-caps__list > li
  ) { opacity: 0; }
  /* 进度条不能用 opacity 门控：它播的是 cap-grow，不碰 opacity，
     被按成透明之后就再也回不来了。它单独用 transform 门控。 */
  .cap-io :where(.cap-q__fill) { transform: scaleX(0); }

  /* 初始就在视口内的元素直接显形，不播动画 —— 见 site.js 里的同步放行。 */
  .cap-io .is-shown { opacity: 1; }
  .cap-io .cap-q__fill.is-shown { transform: scaleX(.625); }

  .cap-io .is-in {
    animation: cap-rise var(--d-slow) var(--e-out) both;
    /* 序号 --i 由 JS 走 CSSOM 赋值，不再维护 nth-child 阶梯 ——
       原来只排到 :nth-child(6)，加第 7 张卡会静默退回最早那一档。
       市场调研 bento 的 --i 改为「中心向外」的几何序（site.js 预写），
       机制不变，变的只是分配逻辑。 */
    animation-delay: calc(var(--stg-cap, 80ms) * var(--i, 0));
  }
  .cap-io .cap-q__fill.is-in {
    animation: cap-grow var(--d-slow) var(--e-out) both;
    animation-delay: calc(var(--stg-cap, 80ms) * var(--i, 0));
  }

  /* ── D 包 · 概览四步的卡内二拍：卡壳起后「序号先落、内容 60ms 后跟」──
     子元素门控只有在 JS 打上 .cap-io 之后才生效（无 JS 完整可见）；
     这些卡里没有可聚焦元素，焦点逃生口不受影响；reduce 整块被媒体查询
     排除。--i 写在 li 上，子元素继承，同一张卡内只加固定偏移。 */
  .cap-io :where(.hg-caps__list > li) :where(.hg-cap__n, .hg-cap__t, .hg-cap__p, .hg-cap__ticks) { opacity: 0; }
  .cap-io .is-shown :where(.hg-cap__n, .hg-cap__t, .hg-cap__p, .hg-cap__ticks) { opacity: 1; }
  .cap-io .is-in .hg-cap__n {
    animation: hg-num-drop 460ms var(--e-spring) both;
    animation-delay: calc(var(--stg-cap, 80ms) * var(--i, 0) + 60ms);
  }
  .cap-io .is-in :where(.hg-cap__t, .hg-cap__p, .hg-cap__ticks) {
    animation: cap-part 520ms var(--e-out) both;
    animation-delay: calc(var(--stg-cap, 80ms) * var(--i, 0) + 120ms);
  }
}

/* 焦点逃生口。**必须写在 no-preference 媒体查询之外**：
   IO 的 rootMargin 带负底边，落在视口最下面那一条里的元素不会触发，
   而每个卡片里都可能有可聚焦元素。键盘用户 Tab 过去时，
   绝不能出现「焦点停在一个完全看不见的元素上」。 */
.cap-io :focus-within,
.cap-io :focus-visible {
  opacity: 1 !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cap-hd > *, .cap-grp__hd, .cap-grid > li, .cap-mini > li, .cap-q__fill, .cap-card,
  .hg-caps__hd > *, .hg-caps__list > li { animation: none; }
}

/* ── 响应式：900 / 600 两档 ── */
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-slot--a, .cap-slot--f { grid-column: span 2; grid-row: auto; }
  .cap-slot--b, .cap-slot--c, .cap-slot--d, .cap-slot--e { grid-column: span 1; }
  .cap-shelf { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .cap-hd { display: block; margin-bottom: var(--s-12); }
  .cap-lede { padding-bottom: 0; }
  .cap-win__body { grid-template-columns: 96px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .cap-slot--a, .cap-slot--b, .cap-slot--c, .cap-slot--d, .cap-slot--e, .cap-slot--f { grid-column: auto; grid-row: auto; }
  /* 六个小面不砍，改成横向可滚的一排 */
  .cap-mini {
    display: flex; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--page-pad) * -1); padding: 2px var(--page-pad) var(--s-3);
  }
  .cap-mini > li { flex: 0 0 76%; scroll-snap-align: start; }
  .cap-card { padding: var(--s-5); }
  .cap-win { min-height: 184px; }
}

/* ═══ mkt- 市场调研 / trs- 可控与可信 ═══════════════════════
   两段共用同一套骨架：容器 + 头部 + 三列卡片网格。
   刻意不复用 .cap-* —— 那一套是不等大的 bento 布局，带窗口示意图和
   光标跟随光环，为「十二个模块」那种罗列设计的；这两段是等权的六项，
   套过来会带进一堆用不上的规则，也会让两段长得一模一样、失去分段的意义。
   骨架尽量短，颜色间距全部走既有令牌。 */
/* box-sizing 在这份表里是按段作用域声明的（.hg-root *、.cap-root * …）。
   这两段曾经漏了这条：.mkt-in/.trs-in 的 width:100% + padding-inline 按
   content-box 算，390 视口下容器实宽 430px，卡片右缘和引导段行尾的字
   被 overflow-x:clip 硬裁掉 —— 文案被视觉删字。新加段落必须带上这条。 */
.mkt-sec, .mkt-sec *, .mkt-sec *::before, .mkt-sec *::after,
.trs-sec, .trs-sec *, .trs-sec *::before, .trs-sec *::after { box-sizing: border-box; }
.mkt-sec, .trs-sec {
  position: relative; overflow-x: clip;
  padding-block: var(--section-py);
  scroll-margin-top: 88px;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(140% 320px at 50% 0%, var(--seam-lift), transparent 68%);
}
/* 参与全站的地面交替：mkt 夹在 --bg-0 的 .hg-caps 与 --void 的 .cap-sec 之间，
   trs 夹在 --bg-0 的 .flw-sec 与 --void 的 .prc-sec 之间，两处都取相反的那个。 */
.mkt-sec { background-color: var(--void); }
.trs-sec { background-color: var(--void); }

.mkt-in, .trs-in {
  position: relative; z-index: 1;
  /* max-width 取 --container 本身而不是 calc(--container + pad*2)：
     这两段的卡片栅格要跟上下相邻的 .cap-inner/.prc（同为 --container 内减
     padding，1440 下卡片横跨 140–1300）对成同一根纵向栅格线。
     calc 那个口径是 .flw-in 的 —— 流程段内容是居中 640px 单列，
     容器边缘不可见，才用得起更宽的口径。 */
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--page-pad);
}

/* ── 区块头部三段式（A 包）：眉线整行、标题居左、导语挪到右下与
   标题底对齐 —— 右侧不再留一整块空。原来的 max-width:640 解除
   （那是单列构图的行长约束；现在标题列自身 ≤1fr、导语列 ~400px，
   行长照旧成立）。899 以下回落单列，见下方断点。 */
.mkt-hd, .trs-hd {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  column-gap: var(--s-16);
  align-items: end;
  margin-bottom: var(--s-12);
}
.mkt-hd > :where(:not(.hg-ghost)), .trs-hd > :where(:not(.hg-ghost)) { position: relative; z-index: 1; }
.mkt-label, .trs-label { grid-column: 1 / -1; }
.mkt-title, .trs-title { grid-column: 1; }
.mkt-lede, .trs-lede { grid-column: 2; grid-row: 2; margin: 0; padding-bottom: 6px; }
.mkt-label, .trs-label {
  margin: 0 0 var(--s-4); color: var(--fg-2);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
  font-weight: var(--w-mid); text-transform: uppercase;
}
.mkt-title, .trs-title {
  margin: 0; color: var(--fg-0);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--w-bold);
}
.mkt-lede, .trs-lede {
  margin: var(--s-5) 0 0; max-width: 560px; color: var(--fg-1);
  font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
  font-weight: var(--w-light);
  text-wrap: pretty;
}

.mkt-grid, .trs-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.mkt-card, .trs-item {
  position: relative;
  padding: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
  transition:
    box-shadow   var(--d-hover) var(--e-out),
    transform    var(--d-hover) var(--e-out);
}
/* 描边升级：静态 hairline 环（::before）+ hover 点亮环（::after），
   技法同 .hg-cap —— mask 双层 XOR 抠 1px 环，两种 composite 写法都要有。
   原来的顶部彩线与光泽扫过由这套语言替换，overflow:hidden 随之解除。 */
.mkt-card::before, .trs-item::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.mkt-card::after, .trs-item::after {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  /* D 包升级：同 .hg-cap::after —— 点亮环跟光标（--gx/--gy），
     无 JS 停在上沿正中。 */
  background-image: radial-gradient(240px 190px at var(--gx, 50%) var(--gy, 0%),
    rgba(126, 186, 233, .95), rgba(201, 184, 242, .60) 46%, rgba(245, 198, 168, .42) 72%, transparent 88%);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--d-hover) var(--e-color);
  pointer-events: none;
}
.mkt-card:hover, .trs-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--edge-top), var(--shadow-2), var(--glow-soft);
}
.mkt-card:hover::after, .trs-item:hover::after { opacity: 1; }

.mkt-card__t, .trs-item__t {
  margin: 0 0 var(--s-3); color: var(--fg-0);
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  font-weight: var(--w-mid);
}
.mkt-card__d, .trs-item__d {
  margin: 0; color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  text-wrap: pretty;
}
.mkt-card__d b, .trs-item__d b { color: var(--fg-1); font-weight: var(--w-mid); }
.mkt-n, .trs-n {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num); color: var(--fg-1);
}

.mkt-note {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-10) 0 0; max-width: 480px;
  color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  text-wrap: pretty;
}
.mkt-dot {
  flex: none; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--warn); box-shadow: 0 0 10px 0 var(--warn-dim);
}

/* ── mkt- · bento 网格与六个微型数据表现（照样稿 plus-bento）──
   六格既有文案原样保留；图形全部内联 SVG / 纯 CSS，2px 圆头描边，
   只用令牌色。角标数字只用已核实口径（20 机会/轮、50 词/轮、
   1000 条/天、7 天）；柱高与条宽是纯视觉示意，刻意不标数值 ——
   不编造「92 分」「412 单」这类假数据。 */
.mkt-card { display: flex; flex-direction: column; }
.mkt-card__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.mkt-card__hd .mkt-card__t { margin: 0; }
.mkt-stat {
  flex: none; display: inline-flex; align-items: baseline; gap: 5px;
  margin-top: 2px;
  padding: 3px var(--s-3);
  border: 1px solid rgba(29, 111, 181, .16);
  border-radius: var(--r-pill);
  background-color: var(--brand-ghost);
  color: var(--brand-lift);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.mkt-stat .mkt-n { color: inherit; font-size: var(--t-sm); font-weight: var(--w-heavy); }
.mkt-viz { margin-top: auto; padding-top: var(--s-6); }

/* 大格：2×2。一组之内唯一的淡彩底 —— 天蓝 10%，低于 12% 上限。 */
.mkt-card--big {
  grid-column: 1 / 3; grid-row: 1 / 3;
  background-image:
    linear-gradient(rgba(126, 186, 233, .10), rgba(126, 186, 233, .10)),
    linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45));
}
.mkt-card--big .mkt-card__d { max-width: 40em; }
/* 大格高度由右列两张卡决定。余量不再对分留白，而是让六柱图纵向
   拉伸吃掉：柱高取 max(基准px, 按列高等比放大)，比例存在 --six-r 里，
   缩不小于基准、涨则同比 —— 题注随之贴底收尾（1440 实测原先题注
   下方悬着约 90px 死白）。只在大格为 2×2 的宽度启用：≤1023 大格
   通栏自适应高度，图表区没有富余高度可吃，% 会塌成 0。 */
.mkt-card--big .mkt-viz { margin-block: auto; }
@media (min-width: 1024px) {
  .mkt-card--big .mkt-viz {
    flex: 1 1 auto; min-height: 0; margin-block: 0;
    display: flex; flex-direction: column;
  }
  .mkt-card--big .mkt-six { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  /* 64px ≈ 维度名 + 证据等级两行标签与列内间距的高度 */
  .mkt-card--big .mkt-six__bar { height: max(var(--six-h), calc((100% - 64px) * var(--six-r))); }
}

/* 六维评分小柱。柱高按 nth-child 写在这里：HTML 零内联样式（CSP 铁律）。
   --six-h 是基准像素高，--six-r 是相对最高柱的比例（大格 2×2 拉伸用）。 */
.mkt-six {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4); align-items: end;
}
.mkt-six__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-2); min-width: 0; }
.mkt-six__bar {
  width: min(46px, 76%); height: var(--six-h);
  border-radius: 8px 8px 4px 4px;
  background-image: linear-gradient(180deg, rgba(126, 186, 233, .85), var(--brand) 90%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mkt-six__col:nth-child(1) { --six-h: 200px; --six-r: 1; }
.mkt-six__col:nth-child(2) { --six-h: 176px; --six-r: .88; }
.mkt-six__col:nth-child(3) { --six-h: 136px; --six-r: .68; }
.mkt-six__col:nth-child(4) { --six-h: 158px; --six-r: .79; }
.mkt-six__col:nth-child(5) { --six-h: 80px; --six-r: .40; }
.mkt-six__col:nth-child(6) { --six-h: 116px; --six-r: .58; }
/* 「证据 C · 降权」的虚线柱：画的是产品真实的诚实机制，必须保留 */
.mkt-six__col--cut .mkt-six__bar {
  background-image: repeating-linear-gradient(135deg, rgba(38, 40, 46, .13) 0 4px, rgba(38, 40, 46, .04) 4px 9px);
  border: 1px dashed var(--line-3);
  box-shadow: none;
}
.mkt-six__k { color: var(--fg-1); font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm); font-weight: var(--w-bold); }
.mkt-six__e { color: var(--fg-3); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro); white-space: nowrap; }
.mkt-six__e--cut { color: var(--fg-2); background-color: var(--bg-3); padding: 1px var(--s-2); border-radius: var(--r-pill); }
.mkt-six__cap {
  margin: var(--s-4) 0 0; padding-top: var(--s-3);
  border-top: 1px dashed var(--line-2);
  color: var(--fg-3);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}

/* 关键词 chips：俄语词 → 中文找货词（界面示意词对，不是承诺） */
.mkt-kw { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.mkt-kw__row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.mkt-kw__ru {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px var(--s-3);
  border: 1px solid var(--line-1); border-radius: var(--r-pill);
  background-color: var(--bg-3);
  color: var(--fg-1);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: 0;
}
.mkt-kw__ar { flex: none; color: var(--fg-3); font-size: var(--t-label); line-height: var(--lh-label); }
.mkt-kw__cn {
  flex: none; white-space: nowrap;
  padding: 3px var(--s-3);
  border: 1px solid rgba(29, 111, 181, .16); border-radius: var(--r-pill);
  background-color: var(--brand-ghost);
  color: var(--brand-lift);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
  font-weight: var(--w-bold);
}

/* 微型图形通用 */
.mkt-svg { display: block; width: 100%; height: auto; }
.mkt-vcap {
  margin: var(--s-3) 0 0;
  display: flex; justify-content: space-between; gap: var(--s-3);
  color: var(--fg-3);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}
.mkt-vcap__hi { color: var(--brand-lift); font-weight: var(--w-bold); }

/* 热词：平台只保留 7 天（灰短线）vs 软件逐日积累（蓝长线） */
.mkt-hot__axis { stroke: var(--line-2); stroke-width: 1; }
.mkt-hot__line { stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.mkt-hot__area { fill: url(#mktHotFill); }
.mkt-hot__s0 { stop-color: rgba(126, 186, 233, .32); }
.mkt-hot__s1 { stop-color: rgba(126, 186, 233, 0); }
.mkt-hot__cut { stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 3 4; }
.mkt-hot__them { stroke: var(--fg-3); stroke-width: 2.5; stroke-linecap: round; fill: none; opacity: .65; }
.mkt-legend {
  margin: var(--s-3) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}
.mkt-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.mkt-legend__us i { background-color: var(--brand); }
.mkt-legend__them i { background-color: var(--fg-3); opacity: .6; }

/* 热销榜单条：骨架名 + 成交条，纯视觉示意（刻意不标数值） */
.mkt-rank { display: flex; flex-direction: column; gap: var(--s-3); }
.mkt-rank__row { display: flex; align-items: center; gap: var(--s-3); }
.mkt-rank__name { flex: none; width: 64px; height: 9px; border-radius: 5px; background-color: var(--bg-3); }
.mkt-rank__track { flex: 1; height: 9px; border-radius: 5px; background-color: var(--bg-3); overflow: hidden; }
.mkt-rank__fill { display: block; height: 100%; border-radius: 5px; background-image: linear-gradient(90deg, rgba(126, 186, 233, .55), var(--brand)); }
.mkt-rank__row:nth-child(1) .mkt-rank__fill { width: 100%; }
.mkt-rank__row:nth-child(2) .mkt-rank__fill { width: 82%; }
.mkt-rank__row:nth-child(3) .mkt-rank__fill { width: 67%; }
.mkt-rank__row:nth-child(4) .mkt-rank__fill { width: 55%; }

/* 缺货：供需天平 —— 需求侧沉、供给侧空 */
.mkt-oos__frame { stroke: var(--fg-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.mkt-oos__pivot { fill: var(--fg-1); }
.mkt-oos__demand { fill: var(--brand); }
.mkt-oos__supply { fill: none; stroke: var(--fg-3); stroke-width: 2; }

/* 类目：搜索量 × 竞争密度散点，机会象限提亮 */
.mkt-cat__zone { fill: var(--brand-ghost); }
.mkt-cat__axis { stroke: var(--line-3); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.mkt-cat__dots { fill: var(--fg-2); opacity: .38; }
.mkt-cat__pick { fill: var(--brand); }
.mkt-cat__halo { fill: none; stroke: rgba(29, 111, 181, .35); stroke-width: 1.5; }

@media (max-width: 1023px) {
  .mkt-grid, .trs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-card--big { grid-column: 1 / -1; grid-row: auto; }
}
/* 头部三段式的单列回落（A 包）：≤899 导语回到标题下方。
   这个断点块必须排在上面的 display:grid 之后才能赢。 */
@media (max-width: 899px) {
  .mkt-hd, .trs-hd { display: block; }
  .mkt-lede, .trs-lede { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .mkt-grid, .trs-grid { grid-template-columns: minmax(0, 1fr); }
  .mkt-hd, .trs-hd { margin-bottom: var(--s-8); }
  /* 六柱在窄屏改 3×2：6 列时单列只剩 ~43px，「证据 C · 降权」会折成
     三行、把整列的柱基线顶歪；3 列时单列 ~95px，标签一行放得下。 */
  .mkt-six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-2); }
  .mkt-six__e { white-space: normal; text-align: center; }
}
/* 这一条原本在上面 600px 那个块里，插入新段落时被带了出来。
   它是 cap- 段的响应式，断点必须留在 600，不能跟着新段落变成 700。 */
@media (max-width: 600px) {
  .cap-win__body { grid-template-columns: 84px minmax(0, 1fr); }
}

/* ══════════ 自动运营流水线 · 八个阶段 ══════════ */
/* ══ 自动运营流水线 · flw- ══ */
.flw-sec,.flw-sec *{box-sizing:border-box}
/* 必须 overflow-x:clip：hidden 会让本段成为滚动容器，view() 时间轴会锁死 */
/* 底色由 --void 改成 --bg-0：改之前 .cap-sec 和 .flw-sec 用的是同一个 --void，
   两段之间连名义上的分界都没有 —— 能力区 1.86 屏接流程区，连着 3.49 屏
   不换气。现在至少进入了交替序列（bg-0 / void / bg-0 / void）。
   但两者只差 4/255，光靠平涂是看不出来的，真正的分界信号见下面的「区块换气」。 */
.flw-sec{position:relative;overflow-x:clip;padding:var(--section-py) 0;background:var(--bg-0);--flw-rail:40px;--flw-dt:28px;--flw-n:44px}
.flw-sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(760px,84%);height:1px;z-index:2;background-image:var(--grad-line);-webkit-mask-image:linear-gradient(90deg,transparent,var(--fg-0) 24%,var(--fg-0) 76%,transparent);mask-image:linear-gradient(90deg,transparent,var(--fg-0) 24%,var(--fg-0) 76%,transparent)}

.flw-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.flw-bg>*{position:absolute;inset:0;display:block}
.flw-bg__grid{background-image:repeating-linear-gradient(90deg,var(--grid-line) 0 1px,transparent 1px var(--grid-size)),repeating-linear-gradient(0deg,var(--grid-line) 0 1px,transparent 1px var(--grid-size));-webkit-mask-image:radial-gradient(115% 80% at 50% 12%,var(--fg-0) 0%,transparent 72%);mask-image:radial-gradient(115% 80% at 50% 12%,var(--fg-0) 0%,transparent 72%)}
.flw-bg__glow{background-image:radial-gradient(48% 34% at 50% 46%,var(--brand-dim),transparent 70%)}
.flw-bg__noise{opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.flw-bg__fade{background-image:linear-gradient(180deg,transparent 66%,var(--bg-0))}

.flw-in{position:relative;z-index:1;width:100%;max-width:calc(var(--container) + var(--page-pad)*2);margin-inline:auto;padding-inline:var(--page-pad)}
.flw-head,.flw-flow{max-width:960px;margin-inline:auto}
/* 时间轴每一行收窄到 640 并左对齐。
   原来行宽跟着容器 960 走，卡片 900px 而内容最远只到 745px —— 七张常规卡
   平均填充率 50%，八条并排就是八根空了一半的横杠，看着像没做完。
   收到 640（卡宽 580）之后填充率 67.2%，八条标题、八条描述**零折行**（实测）。

   收窄放在行上、不放在 .flw-flow 上，有两个原因：
   一、.flw-kick 和 .flw-end 各自也带一段轨道，它们是 .flw-steps 的兄弟；
       三者一起限宽，整条竖轨才不会在首尾错位。
   二、若改成收窄 .flw-flow 再居中，时间轴左缘会落在 420，而标题左缘是 240，
       两者对不上，看着是飘的（试过，截图里很明显）。
       保持 .flw-flow 与标题同宽同轴、只把行左对齐地收窄，左缘就齐了。 */
.flw-kick,.flw-end,.flw-step{max-width:640px}
.flw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:end;gap:var(--s-8)}
.flw-label{margin:0 0 var(--s-4);color:var(--fg-2);font-size:var(--t-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)}
.flw-title{margin:0;color:var(--fg-0);font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--w-bold)}
.flw-lead{margin:0;color:var(--fg-1);font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead)}
.flw-num{font-family:var(--font-num);letter-spacing:var(--ls-num)}

.flw-flow{margin-top:var(--s-12)}
.flw-kick,.flw-end,.flw-step{display:grid;grid-template-columns:var(--flw-rail) minmax(0,1fr);gap:var(--s-5);align-items:start}
.flw-kick,.flw-end{--flw-dt:5px;margin:0}
.flw-kick{margin-bottom:var(--s-4)}
.flw-end{margin-top:var(--s-4)}
.flw-kick__t,.flw-end__t{margin:0;color:var(--fg-2);font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--ls-sm)}
.flw-steps{display:grid;gap:var(--s-4);margin:0;padding:0;list-style:none}

/* 光轨与节点 */
.flw-rail{position:relative;display:block;align-self:stretch;min-height:22px}
.flw-track{position:absolute;left:50%;top:calc(var(--flw-dt) + 19px);bottom:calc(var(--s-4)*-1);width:2px;margin-left:-1px;overflow:hidden;border-radius:var(--r-pill);background:var(--line-1)}
.flw-fill{position:absolute;inset:0;border-radius:inherit;transform-origin:top center;background-image:linear-gradient(180deg,var(--brand-lift),var(--brand-deep));box-shadow:0 0 12px 0 var(--brand-dim)}
.flw-dot{position:absolute;left:50%;top:var(--flw-dt);width:14px;height:14px;margin-left:-7px;border-radius:var(--r-pill);background:var(--bg-3);border:1px solid var(--line-2)}
.flw-dot__on{position:absolute;inset:-1px;border-radius:inherit;background:var(--brand);box-shadow:0 0 0 4px var(--brand-ghost)}
.flw-dot--gate{top:calc(var(--flw-dt) - 3px);width:20px;height:20px;margin-left:-10px;background:var(--bg-2);border-color:var(--line-3)}
.flw-dot--gate .flw-dot__on{background:var(--warn);box-shadow:0 0 0 5px var(--warn-dim)}
.flw-dot--end{background:var(--bg-0);border-color:var(--line-3)}
/* 核价之后光轨断成虚线：放行才继续 */
.flw-step--gate .flw-track{top:calc(var(--flw-dt) + 22px);-webkit-mask-image:repeating-linear-gradient(180deg,var(--fg-0) 0 5px,transparent 5px 11px);mask-image:repeating-linear-gradient(180deg,var(--fg-0) 0 5px,transparent 5px 11px)}

/* 阶段卡 */
.flw-card,.flw-gate{position:relative;background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.45));-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid transparent;box-shadow:var(--edge-top),var(--shadow-1);transition:transform var(--d-hover) var(--e-out),box-shadow var(--d-hover) var(--e-out)}
/* 标题列 180 -> 120：卡收窄之后 180px 会把描述挤到只剩一点。
   120 是实测下界 —— 110px 时「1688 采集」开始折行。 */
.flw-card{display:grid;grid-template-columns:var(--flw-n) 120px minmax(0,1fr);align-items:baseline;gap:var(--s-2) var(--s-5);padding:var(--s-5) var(--s-6);border-radius:var(--r-xl)}
/* 描边升级：hairline 环，技法同 .hg-cap。核价关卡（.flw-gate）的 ::after
   已被暖光占用，hover 点亮环只给常规卡（.flw-card::after）。 */
.flw-card::before,.flw-gate::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background-image:var(--grad-hair);-webkit-mask-image:linear-gradient(var(--fg-0) 0 0),linear-gradient(var(--fg-0) 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-image:linear-gradient(var(--fg-0) 0 0),linear-gradient(var(--fg-0) 0 0);mask-clip:content-box,border-box;mask-composite:exclude;pointer-events:none}
.flw-card::after{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;background-image:var(--grad-hair-hot);-webkit-mask-image:linear-gradient(var(--fg-0) 0 0),linear-gradient(var(--fg-0) 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-image:linear-gradient(var(--fg-0) 0 0),linear-gradient(var(--fg-0) 0 0);mask-clip:content-box,border-box;mask-composite:exclude;opacity:0;transition:opacity var(--d-hover) var(--e-color);pointer-events:none}
.flw-card:hover,.flw-gate:hover{transform:translateY(-4px);box-shadow:var(--edge-top),var(--shadow-2),var(--glow-soft)}
.flw-card:hover::after{opacity:1}
.flw-n{flex:none;width:var(--flw-n);color:var(--fg-2);font-family:var(--font-num);font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro)}
.flw-t{margin:0;color:var(--fg-0);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--w-mid)}
.flw-d{margin:0;color:var(--fg-2);font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--ls-sm)}

/* 核价 —— 唯一会拒绝放行的关卡 */
.flw-gate{isolation:isolate;padding:var(--s-6) var(--s-6) var(--s-8);border-radius:var(--r-2xl);box-shadow:var(--edge-top),var(--shadow-2)}
.flw-gate::after{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:70%;border-radius:inherit;background-image:radial-gradient(58% 100% at 50% 100%,var(--warn-dim),transparent 72%)}
.flw-gate__hd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5)}
.flw-badge{margin:0;padding:5px var(--s-3);border-radius:var(--r-pill);background:var(--warn-dim);border:1px solid var(--line-1);color:var(--warn);font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);font-weight:var(--w-mid)}
.flw-gate__b{padding-left:var(--flw-n)}
.flw-gate__lead{margin:0 0 var(--s-3);color:var(--fg-0);font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--w-mid)}
/* 46em 在 --t-sm 上换算出来是 644px / 46 字一行，收到 480px / 约 34 字 */
.flw-gate__d{margin:0;max-width:480px;color:var(--fg-1);font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--ls-sm)}

/* ── C 包 · 否决句的渐变墨 + 手绘下划线 ─────────────────────
   「不予上架」用暖色深化墨（同关卡的 warn 语汇），下面骑一条手绘感
   SVG 双笔画。默认态就是描画完成的终态（无 JS / 老浏览器 / reduce
   全部直接可见）；支持 view() 且未减弱动效时挂在本步现成的
   --flw-v 时间轴上进场描画，flw-js 兜底走 transition —— 与整段
   flw- 的滚动驱动机制同构，不另起炉灶。 */
.flw-k{color:var(--ink-peach-deep);font-weight:var(--w-bold)}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .flw-k{background-image:var(--grad-k-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.hg-uline{position:relative;white-space:nowrap}
.hg-uline__svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.38em;overflow:visible;pointer-events:none}
.hg-uline__svg path{fill:none;stroke:var(--ink-peach);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.hg-uline__echo{stroke-width:3.4;opacity:.32}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .flw-step--gate .hg-uline__main{animation:hg-draw linear both;animation-timeline:--flw-v;animation-range:entry 20% cover 42%}
    .flw-step--gate .hg-uline__echo{animation:hg-draw linear both;animation-timeline:--flw-v;animation-range:entry 26% cover 48%}
  }
}
@keyframes hg-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.flw-js .hg-uline__svg path{stroke-dashoffset:100;transition:stroke-dashoffset 900ms var(--e-out) 300ms}
.flw-js .hg-uline__svg .hg-uline__echo{transition-delay:520ms}
.flw-js .flw-on .hg-uline__svg path{stroke-dashoffset:0}

/* 核价卡里的三条要点。用左侧一条细线串起来，不用项目符号 ——
   这里已经有轨道线、节点、分叉三种指示元素，再加圆点会更吵。 */
.flw-facts{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-4)}
.flw-fact{
  position:relative;padding-left:var(--s-5);
  color:var(--fg-2);font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--ls-sm);
  text-wrap:pretty;
}
.flw-fact::before{
  content:"";position:absolute;left:0;top:.45em;bottom:.2em;width:1px;
  background-image:linear-gradient(180deg,var(--line-2),transparent);
}
.flw-fact b{display:block;margin-bottom:2px;color:var(--fg-0);font-weight:var(--w-mid)}
/* 句中的 b 不换行，只提亮 —— 上面那条 display:block 是给小标题用的 */
.flw-fact b:not(:first-child){display:inline;margin:0;color:var(--fg-1)}

/* 分叉 */
.flw-fork{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-10)}
.flw-fork::before{content:"";position:absolute;top:0;left:50%;width:1px;height:var(--s-6);background:var(--line-3)}
.flw-fork::after{content:"";position:absolute;top:var(--s-6);left:25%;right:25%;height:1px;background-image:linear-gradient(90deg,var(--ok),var(--line-3) 50%,var(--bad))}
.flw-br{position:relative;padding:var(--s-4) var(--s-5);border-radius:var(--r-md);background:var(--bg-1);border:1px solid var(--line-1)}
.flw-br::before{content:"";position:absolute;top:calc(var(--s-4)*-1);left:50%;width:1px;height:var(--s-4);background:currentColor}
.flw-br::after{content:"";position:absolute;inset-inline:var(--s-5);top:0;height:1px;background:currentColor;opacity:.5}
.flw-br--go{color:var(--ok)}
.flw-br--stop{color:var(--bad)}
.flw-br__k{margin:0 0 var(--s-2);font-size:var(--t-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--w-mid)}
.flw-br__v{margin:0;color:var(--fg-1);font-size:var(--t-sm);line-height:var(--lh-sm);letter-spacing:var(--ls-sm)}

/* ── 断点 ── */
@media (max-width:899px){
  .flw-sec{--flw-rail:34px;--flw-dt:26px;--flw-n:40px}
  .flw-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--s-5)}
  .flw-card{grid-template-columns:var(--flw-n) minmax(0,1fr);padding:var(--s-4) var(--s-5)}
  .flw-d{grid-column:2}
  .flw-gate{padding:var(--s-5) var(--s-5) var(--s-6)}
}
@media (max-width:599px){
  .flw-sec{--flw-rail:28px;--flw-dt:22px;--flw-n:34px}
  .flw-kick,.flw-end,.flw-step{gap:var(--s-3)}
  .flw-card{gap:var(--s-1) var(--s-3)}
  .flw-gate__b{padding-left:0}
  .flw-fork{grid-template-columns:minmax(0,1fr);margin-top:var(--s-5);padding-top:0}
  .flw-fork::before,.flw-fork::after,.flw-br::before{display:none}
}

/* ── 滚动驱动：光轨推进，节点依次点亮
   默认样式即终态；不支持 view() 或关掉动效时直接是点亮的样子。 */
@keyframes flw-rise{from{opacity:0;translate:0 16px}}
@keyframes flw-lit{from{opacity:0;scale:.4}}
@keyframes flw-grow{from{transform:scaleY(0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .flw-head,.flw-kick,.flw-end,.flw-step{view-timeline-name:--flw-v;view-timeline-axis:block}
    .flw-head,.flw-card,.flw-gate,.flw-kick__t,.flw-end__t{animation:flw-rise linear both;animation-timeline:--flw-v;animation-range:entry var(--flw-e,8%) cover 34%}
    .flw-dot__on{animation:flw-lit linear both;animation-timeline:--flw-v;animation-range:entry calc(var(--flw-e,8%) + 8%) cover 40%}
    .flw-fill{animation:flw-grow linear both;animation-timeline:--flw-v;animation-range:entry calc(var(--flw-e,8%) + 12%) cover 64%}
    .flw-step:nth-child(2){--flw-e:12%}.flw-step:nth-child(3){--flw-e:16%}.flw-step:nth-child(4){--flw-e:20%}
    .flw-step:nth-child(5){--flw-e:24%}.flw-step:nth-child(6){--flw-e:28%}.flw-step:nth-child(7){--flw-e:32%}
    .flw-step:nth-child(8){--flw-e:36%}
  }
}
/* 兜底：仅当脚本执行且浏览器不支持 view() 时接管，静态终态不受影响 */
.flw-js .flw-head,.flw-js .flw-card,.flw-js .flw-gate,.flw-js .flw-kick__t,.flw-js .flw-end__t{opacity:0;translate:0 16px;transition:opacity var(--d-slow) var(--e-out),translate var(--d-slow) var(--e-out)}
.flw-js .flw-dot__on{opacity:0;transition:opacity var(--d-base) var(--e-out) 120ms}
.flw-js .flw-fill{transform:scaleY(0);transition:transform var(--d-slow) var(--e-out) 200ms}
.flw-js .flw-head.flw-on,.flw-js .flw-on .flw-card,.flw-js .flw-on .flw-gate,.flw-js .flw-on .flw-kick__t,.flw-js .flw-on .flw-end__t{opacity:1;translate:none}
.flw-js .flw-on .flw-dot__on{opacity:1}
.flw-js .flw-on .flw-fill{transform:none}

/* ══════════ 价格与常见问题 ══════════ */
/* ══════════════════════════════════════════════════════════════
   prc- · 授权价格 + 常见问题
   色值与字号取自 tokens-light.css；玻璃卡的白渐变是本段唯一的字面值。
   ══════════════════════════════════════════════════════════════ */

.prc-root, .prc-root *, .prc-root *::before, .prc-root *::after { box-sizing: border-box; }

.prc-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.prc-n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-num);
}
.prc-grad { color: var(--fg-0); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .prc-grad {
    background-image: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ── 区块基座与背景五层 ─────────────────────────────────── */
.prc-sec {
  /* 必须是 overflow-x: clip 而不是 overflow: hidden —— hidden 会让这个 section
     变成滚动容器，而 animation-timeline: view() 绑定的是最近的滚动祖先，
     入场动画会卡在一个固定进度上。clip 只裁剪，不建立滚动容器。 */
  position: relative; overflow-x: clip;
  /* 与相邻段交替：flw-sec 是 bg-0，这里就用 void；faq 再回 bg-0。
     改之前是 bg-0 / bg-0（和流程区同色）、void / void（和页脚同色），
     六段里有两处接缝在名义上都不存在。 */
  background-color: var(--void);
  padding-block: var(--section-py);
  scroll-margin-top: 88px;
}
.prc-faq {
  position: relative; overflow-x: clip;
  background-color: var(--bg-0);
  padding-block: var(--section-py);
}

/* ── 区块换气 ──────────────────────────────────────────────
   问题：主接缝均值 304px 的无墨带，而相邻区块的底色只差 4/255
   （--bg-0 #0A0B0F vs --void #06070B），正常环境光下就是同一块黑。
   于是唯一的分隔物是那 304px 留白 —— 只砍留白不换地面，
   #capabilities 接 #flow 会糊成一堵三屏半的墙，比现在更糟。

   深色站不能照搬浅色站的换地法。#F5F4FE 相对白是 4% 的变化、落在高亮度区
   人眼敏感；同样 4% 落在近黑区会被显示器黑阶和环境光反射吃掉。
   所以这里不去加大平涂色差（那会同时压低卡片与底的对比），
   改成在每段顶部给一道大半径的柔光 —— 这正是 .flw-sec::before 那条 hairline
   已经在用的语汇，只是把它做足，让「换了一段」有一个能被感知的信号。

   用 background-image 叠在 background-color 上，不占用伪元素 ——
   这几段的 ::before / ::after 都已经被接缝线和辉光占着了。 */
.hg-caps,
.cap-sec,
.flw-sec,
.prc-sec,
.prc-faq {
  background-image:
    radial-gradient(140% 320px at 50% 0%, var(--seam-lift), transparent 68%);
  background-repeat: no-repeat;
}
/* 页脚不参与：它是收口，顶部已经有一条 border-top */

/* 强度令牌 --seam-lift 在 tokens-light.css 里，和其余令牌放一起。 */

.prc-seam {
  position: absolute; top: 0; left: 50%; z-index: 1;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - var(--page-pad) * 2)); height: 1px;
  background-image: var(--grad-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
  pointer-events: none;
}

.prc-bg { position: absolute; inset: -8% 0 -12%; z-index: 0; pointer-events: none; }
.prc-bg > * { position: absolute; inset: 0; display: block; }
.prc-bg__aurora {
  /* will-change 原本写在这里 —— 它不受下面 @supports 和 reduce 的约束，
     于是不支持滚动驱动动画的浏览器、和关掉动效的用户，都要白养一整段合成层。
     挪进真正会动的那个分支里。 */
  background-image: var(--aurora-1), var(--aurora-2), var(--aurora-3);
}
.prc-bg__grid {
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  -webkit-mask-image: radial-gradient(115% 80% at 50% 12%, var(--fg-0) 0%, transparent 72%);
  mask-image: radial-gradient(115% 80% at 50% 12%, var(--fg-0) 0%, transparent 72%);
}
.prc-bg__noise {
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.prc-bg__fade { background-image: linear-gradient(to bottom, transparent 58%, var(--bg-0) 100%); }

.prc-inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ── 章首标题 ───────────────────────────────────────────── */
.prc-hd {
  display: grid;
  /* 原来是 1.12fr / .88fr，左栏在 ≥1440 时只有 614px，而副标题
     「一个激活码，绑一台设备」在那一档的 60px 字号下需要 642px ——
     差 28px，于是「备」一个字被挤到第二行。1440 及以上是最常见的
     桌面宽度，等于大多数人看到的定价段标题都带一个孤字。
     1.18fr 是能一行放下的最小值。顺带把版式变一致了：改之前副标题
     和右侧导语都在 1440 这一档各翻一次行（副标题 1→2、导语 2→1），
     改之后两者在所有宽度上都固定 —— 副标题一行、导语两行。 */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: var(--s-16);
  align-items: end;
  margin-bottom: var(--s-16);
}
.prc-label {
  /* 原来是 --fg-3：3.17:1，而且正落在 --aurora-1 最亮的一团上，实际更低 */
  margin: 0 0 var(--s-5);
  color: var(--fg-2);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
}
/* 原来这里是 --t-mega（84px），和首屏 h1 同级 —— 而 .hg-caps__t / .cap-title /
   .flw-title / .prc-faq__t 四个区块标题**全都是 --t-h2**。这是层级 bug 不是审美：
   .prc-hd 因此高 305px，把四张价格卡整个推出首屏折线（实测 .prc-plans 顶在 y=5357），
   截图里标题占满一屏、价格卡只露出上沿。定价页的主角是那四个数字，不是标题。
   副行照 .cap-title__l--sub 的既有模型走：不改字号，只改字重。 */
.prc-title {
  margin: 0;
  color: var(--fg-0);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--w-bold);
}
.prc-title__line { display: block; overflow: hidden; padding-bottom: .06em; }
.prc-title__in { display: block; }
.prc-title__line--sub {
  margin-top: var(--s-2);
  font-weight: var(--w-light);
}
.prc-hd__r { padding-bottom: var(--s-2); }
.prc-lede {
  margin: 0; max-width: 42ch;
  color: var(--fg-1);
  font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
}

/* ── 四档卡片 ───────────────────────────────────────────── */
.prc-plans {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter); align-items: stretch;
}
.prc-slot { position: relative; display: flex; }
.prc-slot__floor {
  position: absolute; left: 4%; right: 4%; bottom: -10%; height: 46%; z-index: 0;
  background-image: radial-gradient(62% 52% at 50% 100%, var(--brand-dim), transparent 72%);
  pointer-events: none;
}

.prc-card {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
  transition: transform var(--d-hover) var(--e-out),
              box-shadow var(--d-hover) var(--e-out);
}
/* 描边升级：静态 hairline 环 + hover/focus 点亮环，技法同 .hg-cap。 */
.prc-card::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.prc-card::after {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair-hot);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--d-hover) var(--e-color);
  pointer-events: none;
}
.prc-card:hover,
.prc-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--edge-top), var(--shadow-2), var(--glow-soft);
}
.prc-card:hover::after,
.prc-card:focus-within::after { opacity: 1; }
.prc-card__hd, .prc-card__price, .prc-card__num, .prc-btn { position: relative; z-index: 1; }

/* 推荐档：静态抬起 ＋ 真 1px 光环 ＋ 光标高光 */
.prc-card--best {
  --prc-mx: 74%; --prc-my: 4%;
  transform: translateY(-8px);
  box-shadow: var(--edge-top), var(--shadow-2), var(--glow-soft);
}
.prc-card--best:hover,
.prc-card--best:focus-within { transform: translateY(-12px); }
.prc-card__sheen {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(42% 44% at var(--prc-mx) var(--prc-my), rgba(126, 186, 233, .28), var(--brand-ghost) 46%, transparent 72%);
  opacity: .75;
  transition: opacity var(--d-base) var(--e-out);
}
.prc-card--best:hover .prc-card__sheen { opacity: 1; }
.prc-card__ring {
  position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
}
.prc-card__ring::before {
  content: ""; position: absolute; inset: -60%;
  background-image: conic-gradient(from 0deg, transparent 0deg, var(--brand) 70deg, var(--violet) 140deg, transparent 250deg);
}

.prc-card__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 24px; }
.prc-card__name {
  margin: 0; color: var(--fg-2); font-weight: var(--w-mid);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
}
.prc-card--best .prc-card__name { color: var(--fg-0); }
.prc-flag {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-image: linear-gradient(var(--bg-3), var(--bg-3)), var(--grad-line);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--fg-0);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}

.prc-card__price { margin: 0; display: flex; align-items: baseline; gap: var(--s-1); color: var(--fg-0); }
.prc-cur {
  color: var(--fg-2); font-family: var(--font-num);
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-num);
}
.prc-num {
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-num);
  font-weight: var(--w-bold);
}
.prc-term {
  margin-left: var(--s-2); color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}

.prc-card__num { display: grid; gap: var(--s-3); }
.prc-meta {
  margin: 0; display: grid; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-1);
}
.prc-meta__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.prc-meta__k {
  color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}
.prc-meta__v {
  margin: 0; color: var(--fg-1);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-num);
}
.prc-card--best .prc-meta__v { color: var(--fg-0); }
.prc-meta__v--nil { color: var(--fg-2); }

.prc-save {
  height: var(--s-1);
  border-radius: var(--r-pill);
  background-color: var(--line-1);
  overflow: hidden;
}
.prc-save__fill {
  display: block; height: 100%; border-radius: inherit;
  transform: scaleX(var(--prc-fill, 0));
  transform-origin: left center;
  background-image: linear-gradient(90deg, var(--brand-deep), var(--brand-lift));
}
.prc-card--month  { --prc-fill: 0; }
.prc-card--quarter { --prc-fill: .11; }
.prc-card--half    { --prc-fill: .39; }
.prc-card--year    { --prc-fill: 1; }
.prc-card--best .prc-save__fill { background-image: linear-gradient(90deg, var(--brand), var(--violet)); }

/* ── 按钮 ───────────────────────────────────────────────── */
.prc-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: auto;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
  font-weight: var(--w-mid);
  text-decoration: none; white-space: nowrap;
  overflow: hidden;
  transition: transform var(--d-hover) var(--e-out),
              box-shadow var(--d-hover) var(--e-out),
              background-color var(--d-hover) var(--e-color),
              border-color var(--d-hover) var(--e-color),
              color var(--d-hover) var(--e-color);
}
/* 光泽扫过，与 .hg-btn 同一语汇 */
.prc-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 46%;
  background-image: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
  transform: skewX(-18deg);
  transition: left var(--d-sheen) ease;
  pointer-events: none;
}
.prc-btn:hover::before { left: 130%; }
.prc-btn--ghost {
  background-color: var(--glass);
  border-color: var(--line-2);
  color: var(--fg-1);
  box-shadow: var(--edge-top);
}
.prc-btn--ghost::before {
  background-image: linear-gradient(105deg, transparent, rgba(126, 186, 233, .30) 50%, transparent);
}
.prc-btn--ghost:hover { background-color: var(--bg-hover); border-color: rgba(29, 111, 181, .40); color: var(--fg-0); transform: translateY(-1px); }
.prc-btn--solid {
  background-image: var(--grad-btn);
  color: var(--on-accent);
  box-shadow: var(--edge-top), var(--glow-brand);
}
.prc-btn--solid:hover { transform: translateY(-1px); box-shadow: var(--edge-top), var(--glow-brand), var(--glow-soft); }
.prc-btn:focus-visible { outline: none; box-shadow: var(--focus); }

/* ── 试用码一行 ─────────────────────────────────────────── */
.prc-note {
  /* 实测 1160px / 83 字一行 —— 横跨整个容器，是全页第二长的行 */
  margin: var(--s-10) 0 0; max-width: 480px;
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}
.prc-dot {
  width: var(--s-2); height: var(--s-2); flex: none;
  border-radius: var(--r-pill);
  background-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-dim);
}

/* ── 常见问题 ───────────────────────────────────────────── */
.prc-inner--faq {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s-16);
  align-items: start;
}
.prc-faq__t {
  margin: 0; color: var(--fg-0);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--w-bold);
}
.prc-faq__sub {
  margin: var(--s-4) 0 0; color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}
.prc-faq__list {
  position: relative;
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .50));
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
}
/* 描边升级：静态 hairline 环（容器不需要 hover 点亮） */
.prc-faq__list::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
.prc-fa { border-top: 1px solid var(--line-1); }
.prc-fa:first-child { border-top: 0; }
.prc-fa__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 56px; padding-block: var(--s-3);
  border-radius: var(--r-md);
  cursor: pointer; list-style: none;
}
.prc-fa__q::-webkit-details-marker { display: none; }
.prc-fa__q::marker { content: ""; }
.prc-fa__q:focus-visible { outline: none; box-shadow: var(--focus); }
.prc-fa__h {
  margin: 0; color: var(--fg-1); font-weight: var(--w-mid);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
  transition: color var(--d-hover) var(--e-color);
}
.prc-fa__q:hover .prc-fa__h, .prc-fa[open] .prc-fa__h { color: var(--fg-0); }
.prc-chev { width: 16px; height: 16px; flex: none; fill: none; transition: transform var(--d-hover) var(--e-out); }
.prc-chev__p { stroke: var(--fg-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.prc-fa[open] .prc-chev { transform: rotate(180deg); }
.prc-fa[open] .prc-chev__p { stroke: var(--fg-0); }
.prc-fa__a { padding: 0 0 var(--s-5); max-width: 54ch; }
.prc-fa__p {
  margin: 0; max-width: 520px; color: var(--fg-1);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}

/* ── keyframes ──────────────────────────────────────────── */
/* 这三条必须写显式的 to。原来只有 from，隐式 to 取元素自身的计算值 ——
   在 view() 那套下元素的自然 opacity 是 1，所以能用；但改成 IO 门控之后
   元素被按成 opacity: 0，隐式 to 就也变成 0，动画从 0 播到 0，永远不显形。
   实测这个 bug 让四张价格卡和整个 FAQ 段全部消失。
   prc-grow 的 to 要还原成 scaleX(var(--prc-fill))，不是 none —— 那是每张卡
   各自的省额比例，写 none 会让所有进度条都变成满格。 */
@keyframes prc-rise  { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes prc-lift  { from { opacity: 0; transform: translateY(112%); } to { opacity: 1; transform: none; } }
@keyframes prc-grow  { from { transform: scaleX(0); } to { transform: scaleX(var(--prc-fill, 0)); } }
@keyframes prc-spin  { to { transform: rotate(360deg); } }
@keyframes prc-open  { from { opacity: 0; transform: translateY(-6px); } }
@keyframes prc-float {
  from { transform: translate3d(0, 4%, 0) scale(1.04); }
  to   { transform: translate3d(0, -6%, 0) scale(1.08); }
}

/* ── 动效：不支持滚动驱动就直接是终态 ───────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .prc-card__ring::before {
    animation: prc-spin 7s linear infinite;
    animation-play-state: paused;
  }
  .prc-card--best:hover .prc-card__ring::before,
  .prc-card--best:focus-within .prc-card__ring::before { animation-play-state: running; }

  .prc-fa[open] .prc-fa__a { animation: prc-open var(--d-base) var(--e-out) both; }

  /* 入场动画迁到 IntersectionObserver（理由同 cap- 段，见上文）。
     门控选择器一律包 :where() 把特异性归零，否则 `.prc-io .prc-slot` (0,2,0)
     会压过 `.prc-io .is-shown` (0,2,0) 里靠后者取胜的假设 —— 更要命的是
     `.prc-io .prc-title__line .prc-title__in` 这种 (0,3,0) 一定压过 is-shown。 */
  .prc-io :where(.prc-hd__r, .prc-note, .prc-faq__hd, .prc-faq__list, .prc-slot) {
    opacity: 0;
  }
  /* 标题行用位移门控而不是 opacity：prc-lift 是「从遮罩下方升起」，
     .prc-title__line 的 overflow:hidden 就是那道遮罩，改用 opacity
     会把这个动作退化成单纯的淡入。

     注意门控和触发挂在**不同元素**上：位移给内层 .prc-title__in，
     而 is-in / is-shown 挂在外层 .prc-title__line。原因是
     IntersectionObserver 会先按祖先的 overflow 裁剪框裁一次目标矩形 ——
     内层被位移到遮罩外之后，它的交叉区域恒为空，**永远不会触发**，
     标题会一直停在遮罩下面看不见。踩过一次，靠断言 7 抓出来的。 */
  .prc-io :where(.prc-title__line) .prc-title__in { transform: translateY(112%); }
  /* 省额进度条播的是 prc-grow，不碰 opacity，只能用 transform 门控 */
  .prc-io :where(.prc-save__fill) { transform: scaleX(0); }

  .prc-io .is-shown { opacity: 1; }
  .prc-io .prc-title__line.is-shown .prc-title__in { transform: none; }
  /* 复位到每张卡自己的省额比例，不是 none —— none 会让进度条全部满格 */
  .prc-io .prc-save__fill.is-shown { transform: scaleX(var(--prc-fill, 0)); }

  .prc-io .is-in {
    animation: prc-rise var(--d-slow) var(--e-out) both;
    animation-delay: calc(var(--stg-prc, 90ms) * var(--i, 0));
  }
  /* 触发在外层，动画播在内层 */
  .prc-io .prc-title__line.is-in { animation: none; }
  .prc-io .prc-title__line.is-in .prc-title__in {
    animation: prc-lift var(--d-enter) var(--e-out) both;
    animation-delay: calc(var(--stg-prc, 90ms) * var(--i, 0));
  }
  .prc-io .prc-save__fill.is-in {
    animation: prc-grow var(--d-slow) var(--e-out) both;
    animation-delay: calc(var(--stg-prc, 90ms) * var(--i, 0));
  }

  /* 背景极光的视差**保留**在 view() 上：它是连续跟手的环境动效，
     不是入场动画，没有「播完」这个概念，换成 IO 反而不对。 */
  @supports (animation-timeline: view()) {
    .prc-sec .prc-bg__aurora {
      animation: prc-float linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* 焦点逃生口。每个 .prc-slot 里都有一个购买按钮 —— 键盘用户 Tab 过去时
   绝不能停在一个看不见的按钮上。必须写在 no-preference 之外。 */
.prc-io :focus-within,
.prc-io :focus-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .prc-hd { gap: var(--s-10); }
  .prc-inner--faq { gap: var(--s-10); }
  .prc-card { padding: var(--s-5); gap: var(--s-4); }
}
@media (max-width: 899px) {
  .prc-hd { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; margin-bottom: var(--s-12); }
  .prc-hd__r { padding-bottom: 0; }
  .prc-lede { max-width: none; }
  .prc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prc-card--best { transform: none; }
  .prc-card--best:hover, .prc-card--best:focus-within { transform: translateY(-4px); }
  .prc-inner--faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .prc-fa__a { max-width: none; }
}
@media (max-width: 599px) {
  .prc-plans { grid-template-columns: minmax(0, 1fr); }
  .prc-note { align-items: flex-start; margin-top: var(--s-8); }
  .prc-dot { margin-top: var(--s-3); }
  .prc-faq__list { padding-inline: var(--s-4); }
  .prc-card { border-radius: var(--r-lg); }
}

/* ── 降级：动效退成静态终态，不是消失 ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .prc-title__in, .prc-hd__r, .prc-note, .prc-faq__hd, .prc-faq__list,
  .prc-slot, .prc-save__fill, .prc-bg__aurora,
  .prc-card__ring::before, .prc-fa[open] .prc-fa__a { animation: none; }
  .prc-card, .prc-card::after, .prc-btn, .prc-btn::before, .prc-chev, .prc-fa__h, .prc-card__sheen { transition: none; }
}

/* ── pricing.html 独立页：prc-sec 兼任页头 ─────────────────
   价格与 FAQ 已从首页整段迁到 /pricing.html，prc- 组件零改动，
   只加这一个页面级修饰符：顶部换气柔光做足一档（mkt/trs 的地面
   语汇放大），标题组与导航之间多一档呼吸 —— 不上 hero 光斑全套，
   极光背景层（.prc-bg__aurora）原样保留。写在 .prc-sec 的共享
   background-image 之后，靠书写顺序覆盖。 */
.prc-sec--page {
  background-image:
    radial-gradient(150% 460px at 50% 0%, var(--seam-lift), transparent 72%);
  padding-block-start: var(--s-16);
}
.prc-sec--page .prc-hd { margin-top: var(--s-10); }
@media (max-width: 899px) {
  .prc-sec--page { padding-block-start: var(--s-12); }
  .prc-sec--page .prc-hd { margin-top: var(--s-6); }
}


/* ══════════════════════════════════════════════════════════════
   cta- · 首页价格入口带。价格明细与 FAQ 独立成 /pricing.html 之后，
   原 #pricing 的位置换成这条紧凑 CTA 带：id 不变（旧链接 /#pricing
   仍能落到这里），句子全部复用既有文案，玻璃卡语汇同 prc-card。
   零动画、零门控：它是导流入口，任何条件下都必须完整可见。
   ══════════════════════════════════════════════════════════════ */
.cta-sec, .cta-sec *, .cta-sec *::before, .cta-sec *::after { box-sizing: border-box; }

.cta-sec {
  position: relative; overflow-x: clip;
  /* 地面交替：上邻 .trs-sec 是 --void，下邻页脚也是 --void，这里取 bg-0 */
  background-color: var(--bg-0);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(140% 320px at 50% 0%, var(--seam-lift), transparent 68%);
  padding-block: var(--section-py);
  scroll-margin-top: 88px;
}
.cta-seam {
  position: absolute; top: 0; left: 50%; z-index: 1;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - var(--page-pad) * 2)); height: 1px;
  background-image: var(--grad-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--fg-0) 26%, var(--fg-0) 74%, transparent);
  pointer-events: none;
}
.cta-in {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--page-pad);
}
.cta-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-10) var(--s-12);
  border: 1px solid transparent;
  border-radius: var(--r-2xl);
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--edge-top), var(--shadow-1);
}
/* 描边：静态 hairline 环，技法同 .prc-card::before */
.cta-card::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
  background-image: var(--grad-hair);
  -webkit-mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--fg-0) 0 0), linear-gradient(var(--fg-0) 0 0);
  mask-clip: content-box, border-box;
  mask-composite: exclude;
  pointer-events: none;
}
/* 幽灵序号 05 压在卡内右上，文字层压到序号之上 */
.cta-card > :where(:not(.hg-ghost)) { position: relative; z-index: 1; }
.cta-card .hg-ghost { top: var(--s-2); right: var(--s-8); }
.cta-label {
  margin: 0 0 var(--s-4); color: var(--fg-2);
  font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: var(--ls-label);
}
.cta-title {
  margin: 0; color: var(--fg-0);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: var(--w-bold);
}
.cta-lede {
  margin: var(--s-3) 0 0; max-width: 42ch;
  color: var(--fg-1);
  font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
  font-weight: var(--w-light);
  text-wrap: pretty;
}
.cta-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 899px) {
  .cta-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
    padding: var(--s-8) var(--s-6);
  }
  .cta-card .hg-ghost { top: 0; right: 0; }
}
@media (max-width: 599px) {
  .cta-card { border-radius: var(--r-xl); }
  .cta-acts { flex-direction: column; align-items: stretch; }
}


/* ══════════════════════════════════════════════════════════════
   页脚。结构不变，配色整套走浅色令牌。
   小字沿用 --fg-2 的习惯不改 —— 浅色令牌里 fg-2 ≈ 6.4:1、fg-3 ≈ 5.1:1，
   备案号、联系方式这些真信息在浅底上也全部过 AA。
   ══════════════════════════════════════════════════════════════ */
.ft-footer {
  position: relative;
  border-top: 1px solid var(--line-1);
  background-color: var(--void);
  padding-block: var(--s-20) var(--s-12);
  color: var(--fg-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-sm);
}
/* ── 孤字 ──────────────────────────────────────────────────
   末行只剩一两个字，在中文里比英文更扎眼 —— 汉字等宽，一个字独占一行
   会留下明显的缺口。站内这几段导语的长度正好都卡在容易出孤字的区间。

   text-wrap: pretty 让浏览器为避免孤行而回溯断点；不支持它的浏览器
   直接忽略，退回默认断法，没有副作用，所以不需要 @supports 包一层。

   不靠调容器宽度解决：那只是把孤字从这一段推到相邻那一段去 ——
   定价段标题的孤字「备」就是这么被"修"到右侧导语上的。 */
.hg-lede__p,
.hg-fine,
.cap-lede,
.flw-lead,
.flw-gate__d,
.prc-lede,
.prc-note,
.prc-faq__sub,
.prc-fa__p,
.dl-lede,
.dl-req__d {
  text-wrap: pretty;
}

/* .ft-legal 原来不在这里，而它是 .ft-wrap 下一个没有任何规则的裸 <p>，
   于是继承了页脚整幅宽度、左右内边距为 0：版权和免责那两行一直顶着
   视口两边，而同一个页脚里上面那排栏目是有留白的。
   375px 下最明显 —— 全站每个元素都对齐在 20px，只有这两行贴到 0。 */
.ft-footer__inner,
.ft-foot-grid,
.ft-legal {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
/* 法务两行实测 1240px / 89 字一行，是全页最长的行，要收窄。
   但不能只写 max-width —— 上面那条给了 margin-inline: auto，收窄之后它会**居中**，
   而页脚栏目那一排是左对齐的，等于把上一轮刚修好的对齐问题又弄回来。
   所以改由 .ft-wrap（只有 index.html 有）统一提供左右边距，
   里面的栅格和法务行都不再各自约束，法务行在里面左对齐收窄。
   download.html 没有 .ft-wrap，它的 .ft-foot-grid 仍走上面那条规则。 */
.ft-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.ft-wrap .ft-foot-grid,
.ft-wrap .ft-legal {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}
/* 660px 在 --t-sm(14px) 上还是 47 字一行 —— 报告给的 px 值是按更大字号折算的。
   中文舒适行长 25–40 字，这里按 34 字反推：34 × 14 ≈ 480px。下面两处同理。 */
.ft-wrap .ft-legal { max-width: 480px; }
.ft-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--s-10) var(--gutter);
}
.ft-foot-h {
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--w-bold);
}
.ft-foot-co { margin: 0 0 var(--s-2); color: var(--fg-1); font-weight: var(--w-mid); }
.ft-foot-req { margin: 0; color: var(--fg-2); font-size: var(--t-micro); line-height: var(--lh-micro); }
.ft-foot-list { list-style: none; margin: 0; padding: 0; }
.ft-foot-list li + li { margin-top: var(--s-2); }
.ft-foot-list li { color: var(--fg-2); }
.ft-foot-dl { margin: 0 0 var(--s-3); }
/* 触控端把命中区撑到 44px，但**不改变行高** —— 页脚在移动端已经是 885px、
   全站第二重的区块，8 条链接各加 16px 就是再涨 128px。
   所以用伪元素向外撑命中区，视觉版式一点不动。
   只在 coarse 指针下生效：鼠标不需要这个，而且重叠的命中区会干扰精确点选。 */
@media (pointer: coarse) {
  .ft-link, .ft-copy, .dl-contact__v { position: relative; }
  .ft-link::after,
  .ft-copy::after,
  .dl-contact__v::after {
    content: "";
    position: absolute;
    inset: -8px -4px;
  }
}

.ft-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--brand-lift);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-hover) var(--e-color), color var(--d-hover) var(--e-color);
}
.ft-link:hover { color: var(--fg-0); border-bottom-color: var(--line-3); }
.ft-link:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
.ft-num { font-family: var(--font-num); letter-spacing: var(--ls-num); }
.ft-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  text-decoration: none;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  font-weight: var(--w-mid);
  transition: border-color var(--d-hover) var(--e-color), background-color var(--d-hover) var(--e-color);
}
.ft-buy:hover { border-color: var(--line-3); background-color: var(--bg-2); }
.ft-buy--primary {
  background-image: var(--grad-btn);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: var(--glow-brand);
}
.ft-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%); border: 0;
}

/* 微信号一键复制。个人加好友二维码几天就过期，微信号才是耐久的那个；
   让人手抄一串字母数字最容易抄错。 */
.ft-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-lift);
  font: inherit;
  font-family: var(--font-num);
  letter-spacing: var(--ls-num);
  cursor: pointer;
}
.ft-copy__hint {
  padding: 2px var(--s-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background-color: var(--bg-2);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  transition: border-color var(--d-hover) var(--e-color), color var(--d-hover) var(--e-color);
}
.ft-copy:hover .ft-copy__hint { border-color: var(--brand); color: var(--fg-0); }
.ft-copy:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
.ft-copy.is-done .ft-copy__hint { border-color: var(--ok); color: var(--ok); }

@media (max-width: 899px) {
  .ft-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ft-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   下载页 dl-。复用 hg- 的导航与按钮、ft- 的页脚，这里只写本页版式。
   ══════════════════════════════════════════════════════════════ */
/* box-sizing 在这份样式表里是按段落作用域声明的（.hg-root *、.cap-root * …），
   下载页的容器不在任何一个作用域里，不补这条的话按钮的 width:100% 之外
   还会再加上 64px 内边距，直接撑出横向滚动。 */
.dl-main, .dl-main *, .dl-main *::before, .dl-main *::after { box-sizing: border-box; }

.dl-main {
  padding-block: var(--s-24) var(--s-20);
  background-color: var(--bg-0);
}
.dl-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.dl-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
}
.dl-head { max-width: 60ch; margin-bottom: var(--s-16); }
.dl-label {
  margin: 0 0 var(--s-3);
  color: var(--fg-2);
  font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); font-weight: var(--w-bold);
}
.dl-title { margin: 0; }
.dl-title__l {
  display: block;
  color: var(--fg-0);
  font-size: var(--t-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--w-bold);
}
.dl-title__l--sub { font-weight: var(--w-light); }
.dl-lede {
  margin: var(--s-5) 0 0;
  color: var(--fg-1);
  font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead);
}
.dl-n { font-family: var(--font-num); letter-spacing: var(--ls-num); color: var(--fg-0); }

/* ── 下载区 ── */
.dl-get {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--s-10);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2xl);
  background-color: var(--bg-2);
  box-shadow: var(--edge-top), var(--shadow-1);
}
/* 按钮不能比容器宽。min-width 在窄屏会撑出横向滚动，max-width 兜住；
   文字允许折行，否则 inline-flex 会按整行文字撑开自己。 */
.dl-btn {
  min-width: min(260px, 100%);
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
.dl-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-8);
  margin: var(--s-8) 0 0;
}
.dl-meta > div { display: grid; gap: var(--s-1); }
.dl-meta dt {
  color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}
.dl-meta dd {
  margin: 0; color: var(--fg-1);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}
.dl-note {
  margin: var(--s-6) 0 0; max-width: 68ch;
  color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}

/* ── 两栏卡片 ── */
.dl-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--s-16);
}
.dl-card {
  position: relative;
  padding: var(--s-8);
  border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  background-color: var(--bg-2);
  box-shadow: var(--edge-top), var(--shadow-1);
}
.dl-card::before {
  content: ""; position: absolute; inset-inline: var(--s-6); top: 0; height: 1px;
  background-image: var(--grad-line);
}
.dl-card__n {
  margin: 0 0 var(--s-3);
  color: var(--fg-2);
  font-family: var(--font-num);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-num);
}
.dl-card__t {
  margin: 0 0 var(--s-4);
  color: var(--fg-0);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: var(--w-bold);
}
.dl-card__d {
  margin: 0 0 var(--s-4);
  color: var(--fg-1);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
}
.dl-card__d:last-child { margin-bottom: 0; }
.dl-steps {
  margin: 0 0 var(--s-5); padding-left: var(--s-5);
  color: var(--fg-1);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
}
.dl-steps li { margin-bottom: var(--s-2); }
.dl-steps b { color: var(--fg-0); font-weight: var(--w-mid); }

/* SmartScreen 那段提示。用 warn 语义色，因为它确实是个需要留意的事，
   不是装饰 —— 但也不该做成 bad，软件本身没问题。 */
.dl-warn {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-left: 2px solid var(--warn);
  border-radius: var(--r-md);
  background-color: var(--bg-1);
  color: var(--fg-2);
  font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm);
}

.dl-contact { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.dl-contact li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
}
.dl-contact__k {
  flex: none; min-width: 3em;
  color: var(--fg-2);
  font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: var(--ls-micro);
}
.dl-contact__v { font-family: var(--font-num); letter-spacing: var(--ls-num); }
.dl-inline { color: var(--brand-lift); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.dl-inline:hover { color: var(--fg-0); }

/* ── 交互反馈 ──
   .dl-* 整段原来零 transition 零 animation：卡片、内联链接、联系方式
   全部硬切。下载页是**唯一的交付页**，试用用户第一次接触产品就在这里。
   走令牌，reduce 下自动塌成 1ms。 */
.dl-card {
  transition:
    border-color var(--d-hover) var(--e-color),
    box-shadow   var(--d-hover) var(--e-out),
    transform    var(--d-hover) var(--e-out);
}
.dl-card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.dl-inline,
.dl-contact__v {
  transition:
    color        var(--d-hover) var(--e-color),
    border-color var(--d-hover) var(--e-color);
}

/* ── 还需要什么 ── */
.dl-req {
  margin-top: var(--s-16);
  padding-top: var(--s-10);
  border-top: 1px solid var(--line-1);
}
.dl-req__t {
  margin: 0 0 var(--s-3);
  color: var(--fg-0);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: var(--w-bold);
}
.dl-req__d {
  margin: 0 0 var(--s-5); max-width: 60ch;
  color: var(--fg-2);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
}
.dl-req__list {
  margin: 0; padding-left: var(--s-5); max-width: 76ch;
  color: var(--fg-1);
  font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--ls-body);
}
.dl-req__list li { margin-bottom: var(--s-3); }
.dl-req__list b { color: var(--fg-0); font-weight: var(--w-mid); }

@media (max-width: 899px) {
  .dl-cols { grid-template-columns: minmax(0, 1fr); }
  .dl-get { padding: var(--s-6); }
}
@media (max-width: 599px) {
  .dl-btn { width: 100%; min-width: 0; }
  .dl-meta { gap: var(--s-5); }
}