/* ==========================================================================
   链接未来官网 · 页面组件（v2 新增）
   只在 site.css 的设计系统之上补新组件，不改既有 token 与基础类。
   ========================================================================== */

/* ---------- 顶栏：分组下拉 ---------- */
/* site.css 里的 .nav a 会命中面板内的链接，这里用更高的具体度收回来 */

.nav > .nav-link,
.nav > .nav-group > .nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 400; color: #3a3d47;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  transition: color .18s, background .18s; white-space: nowrap;
}
.nav > .nav-link:hover,
.nav > .nav-group > .nav-trigger:hover { color: var(--ink); background: var(--secondary); }
.nav > .nav-link[aria-current="page"],
.nav > .nav-group > .nav-trigger[aria-current="page"] { color: var(--primary); font-weight: 600; }
.nav .chev { transition: transform .18s; flex: none; }

.nav-group { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  display: grid; gap: 2px; padding: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-elevated);
  opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 60;
}
.panel-sm { width: 300px; grid-template-columns: 1fr; }
.panel-md { width: 480px; grid-template-columns: repeat(2, 1fr); }
.panel-lg { width: 620px; grid-template-columns: repeat(2, 1fr); }
.nav-group[data-open="true"] .nav-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-group[data-open="true"] .chev { transform: rotate(180deg); }

/* 面板项：覆盖 site.css 的 .nav a */
.nav-panel a {
  display: block; padding: 11px 13px; border-radius: 10px;
  font-size: 14px; color: var(--fg);
}
.nav-panel a:hover { background: var(--secondary); }
.nav-panel a strong { display: block; font-size: 14px; font-weight: 600; }
.nav-panel a span {
  display: block; margin-top: 3px; font-size: 12.5px;
  color: var(--muted-fg); line-height: 1.55;
}

@media (max-width: 960px) {
  /* 移动端：面板变成手风琴，不再悬浮 */
  .nav > .nav-link,
  .nav > .nav-group > .nav-trigger {
    width: 100%; justify-content: space-between;
    padding: 12px 8px; font-size: 16px; border-radius: 8px;
  }
  .nav-group { position: static; }
  .nav-panel {
    position: static; transform: none; opacity: 1; visibility: visible;
    width: auto; grid-template-columns: 1fr; padding: 0 0 6px 10px;
    border: 0; box-shadow: none; background: transparent; display: none;
  }
  .nav-group[data-open="true"] .nav-panel { display: grid; transform: none; }
  .nav-panel a { padding: 9px 8px; }
  .nav-panel a span { display: none; }
}

/* ---------- 价格卡 ---------- */
.price-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.price-featured { border-color: #cfe0ff; box-shadow: var(--shadow-featured); }
.price-badge {
  position: absolute; top: -11px; left: 26px;
  padding: 3px 11px; border-radius: var(--radius-pill);
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700;
}
.price-name { font-size: 15.5px; font-weight: 700; }
.price-amount {
  margin-top: 14px; font-size: 34px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1.1;
}
.price-unit { margin-left: 4px; font-size: 14px; font-weight: 500; color: var(--muted-fg); }
.price-line { margin-top: 6px; font-size: 13px; color: var(--muted-fg); }
.price-quota {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.price-quota .sep { color: var(--border); }
.price-desc { margin-top: 14px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.72; }
.price-feats { margin-top: 18px; display: grid; gap: 10px; flex: 1; }
.price-feats li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.62; }
.price-feats .ck,
.price-feats svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--primary); }
.price-card .btn { margin-top: 22px; width: 100%; }
.price-note {
  margin-top: 26px; padding: 16px 18px;
  background: var(--secondary); border: 1px solid var(--border);
  border-radius: 10px; font-size: 13px; color: var(--muted-fg); line-height: 1.75;
}
.price-note strong { color: var(--ink); }
/* 首页简版：没有功能清单，卡片矮了一截，把 gap 也收一点，
   不然三张矮卡之间 20px 的缝看起来比卡片本身还显眼。 */
.price-grid.is-brief { gap: 16px; }
.price-grid.is-brief .price-card { padding: 24px 24px 22px; }

/* ---------- 表格 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); }
.tbl { min-width: 640px; font-size: 13.5px; }
.tbl th, .tbl td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); line-height: 1.62;
}
.tbl thead th { background: var(--secondary); font-weight: 700; color: var(--ink); white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody th {
  background: #fff; font-weight: 600; color: var(--ink);
  white-space: nowrap; position: sticky; left: 0; z-index: 1;
}

/* ---------- 覆盖范围：行业 / 部门 ---------- */
.chips { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .chips { grid-template-columns: 1fr; } }
.chip {
  display: flex; align-items: baseline; gap: 9px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font-size: 13.5px; line-height: 1.5;
}
.chip:hover { border-color: #cfd8e6; background: var(--secondary); }
.chip-code {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--primary); background: var(--primary-tint);
  padding: 2px 6px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.chip-name { font-weight: 600; color: var(--ink); }
.chip-note { font-size: 12px; color: var(--muted-fg); }
/* 行业行是链接（指向该行业的场景页）。箭头推到最右，整行的可点区域就是整张卡片；
   箭头平时淡、悬停加深 —— 不用下划线，51 行都带下划线会糊成一片。 */
a.chip { text-decoration: none; color: inherit; }
a.chip .chip-go {
  flex: none; margin-left: auto; display: inline-flex; align-items: center;
  color: var(--muted-fg); opacity: .55; transition: opacity .15s, transform .15s;
}
a.chip:hover { border-color: var(--primary); background: var(--primary-tint); }
a.chip:hover .chip-go { opacity: 1; color: var(--primary); transform: translateX(2px); }
a.chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.dept-roles { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dept-roles span {
  font-size: 11.5px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--secondary); border: 1px solid var(--border); color: var(--muted-fg);
}

/* ---------- 筛选条 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: #fff; color: var(--fg);
  font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.filter-btn:hover { border-color: #cfd8e6; background: var(--secondary); }
.filter-btn[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600;
}
.filter-btn .n { opacity: .6; font-variant-numeric: tabular-nums; }

/* ---------- 技能卡 ---------- */
.skill-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .skill-grid { grid-template-columns: 1fr; } }
.skill { display: flex; flex-direction: column; }
.skill[hidden] { display: none; }
.skill-cat {
  display: inline-block; align-self: flex-start; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--primary-tint); color: var(--primary-dark);
}
/* 技能名做成外链时：颜色跟标题走、靠 hover 与出站箭头区分。
   不用默认的蓝色链接 —— 一页 22 个蓝字会把标题层级打散，
   而这里的重点仍然是技能名本身，链接只是它的第二层含义。 */
.skill-link { color: inherit; text-decoration: none; }
.skill-link svg {
  margin-left: 6px; vertical-align: -1px; color: #b6bcc6;
  transition: color .15s, transform .15s;
}
.skill-link:hover { color: var(--primary-dark); }
.skill-link:hover svg { color: var(--primary-dark); transform: translate(1px, -1px); }
.skill-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

/* ---------- 专家包 ----------
   57 个包按场景分组。卡片整块是 <a>（落地是 SkillHub 上的真实详情页），
   所以 hover 反馈要给在整卡上，而不是只给标题 —— 否则「哪里能点」不明显。

   布局：左栏场景导航 + 右栏当前场景的包网格。
   57 个包逐场景竖着堆下来 8840px，滚到第 6 个场景时人已经不知道自己在哪了。
   左栏固定 232px，只有右栏随场景换 —— 页面高度不再随内容量线性增长。 */
.pack-groups { display: block; }
.pack-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px;
  align-items: start;
}

.pack-side {
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 84px;
  padding: 8px; background: var(--secondary);
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.pack-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg);
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; transition: background .15s, color .15s;
}
.pack-nav:hover { background: #fff; }
.pack-nav:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.pack-nav.is-active {
  background: #fff; color: var(--primary-dark);
  border-color: var(--border); box-shadow: 0 1px 3px rgba(16, 40, 34, .06);
}
.pn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-n {
  flex: none; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
  color: var(--muted-fg); background: rgba(16, 40, 34, .06);
}
.pack-nav.is-active .pn-n { color: #fff; background: var(--primary); }

.pack-main { min-width: 0; }
.pack-pane[hidden] { display: none; }
.pack-pane-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pack-pane-head h3 { font-size: 17px; }
.pack-cnt { font-size: 12.5px; color: var(--muted-fg); }

.pack-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .pack-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 窄屏：左栏改成横向可滑的一条 —— 竖排导航会占掉大半屏，
   而横向滑动是这套「切换」交互在手机上最省地方的形式。 */
@media (max-width: 760px) {
  .pack-layout { grid-template-columns: 1fr; gap: 16px; }
  .pack-side {
    position: static; flex-direction: row; gap: 8px;
    padding: 8px; overflow-x: auto; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .pack-nav { flex: none; width: auto; }
  .pn-name { max-width: 12em; }
}
@media (max-width: 640px) { .pack-grid { grid-template-columns: 1fr; } }
.pack {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 16px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.pack:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(40, 184, 148, .14);
}
.pack:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pack h4 { font-size: 16px; line-height: 1.4; }
.pack p { flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--muted-fg); }
.pack-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12.5px;
}
.pack-skills { color: var(--muted-fg); }
.pack-go {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--primary-dark);
}
.pack-go svg { transition: transform .15s; }
.pack:hover .pack-go svg { transform: translate(1px, -1px); }

/* ---------- 案例 ---------- */
.case-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .case-grid { grid-template-columns: 1fr; } }
/* 一排三列（首页「我们交付的真实案例」）。
   列数由 shape_cases(cols=) 写在宿主的 data-cols 上，运行期渲染器只换子节点、
   不动宿主属性，所以这条规则同时管到构建期与云库回填两种情况。
   断点与上面保持一致：窄于 860px 无论几列都退回单列 —— 三列在手机上
   每张卡只剩 100 来字宽，brief 卡的指标会折成三行。 */
.case-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .case-grid[data-cols="3"] { grid-template-columns: 1fr; } }
.case {
  padding: 26px 26px 24px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.case-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-client { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.case-ind {
  font-size: 11.5px; color: var(--muted-fg);
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--secondary); border: 1px solid var(--border);
}
.case h3 { margin-top: 12px; font-size: 16.5px; line-height: 1.4; }
.case-sum { margin-top: 10px; font-size: 14px; color: var(--muted-fg); line-height: 1.72; }
.case-metrics {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 22px;
}
.metric .m-val {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1.1;
}
.metric .m-lbl { margin-top: 5px; font-size: 12.5px; color: var(--muted-fg); }

/* 索引态案例卡（首页 / 行业方案 / 应用场景）。

   这三个页面原来铺的是完整案例卡，标题与摘要与 /cases/ 详页逐字相同 —— 读者在
   三页各读到一遍同一段文字。改成索引后：卡片只留客户名、行业、一个关键数字，
   以及指向详页的入口。详页 /cases/ 是全站唯一展开案例全文的地方。

   flex 纵向是为了让「案例详情 →」贴在卡片底部：同一行里各家指标字数不同，
   链接不吸底就会一行高一行低。 */
.case-brief { display: flex; flex-direction: column; padding: 22px 24px 20px; }
.case-brief .case-metrics {
  margin-top: 14px; padding-top: 0; border-top: 0; gap: 16px; flex: 1 1 auto;
  align-content: flex-start;
}
.case-brief .metric .m-val { font-size: 27px; }
.case-more {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--primary-dark);
}
.case-more:hover { color: var(--primary); }
.case-more svg { transition: transform 0.16s ease; }
.case-more:hover svg { transform: translateX(3px); }

/* ---------- 客户案例详页（/cases/） ----------

   五个案例全部展开共 4600px，读者的实际行为是「先找自己的行业」——
   所以第一屏之后紧跟一条 sticky 行业索引，而不是让他一路滚着找。

   索引条压在站头下面（top: var(--header-h)），因为站头是 fixed 的 ——
   写 top:0 会被站头盖住，看起来像没吸顶。 */
.case-idx-wrap {
  position: sticky; top: var(--header-h); z-index: 20;
  padding: 12px 0; background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}
.case-idx { display: flex; align-items: center; gap: 16px; }
.case-idx-lead {
  flex: none; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; color: var(--muted-fg);
}
.case-idx-list {
  /* 图标版 chip 比旧编号版宽 ~40px，六个挤一行会断成 5+1 很难看；
     干脆固定 3 列（3+3 对称），窄屏降为横滑。 */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  min-width: 0;
}
.case-idx-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: var(--radius-pill);
  background: var(--secondary); border: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  transition: border-color .16s, background .16s, transform .16s;
  min-width: 0;
}
.case-idx-link:hover {
  border-color: var(--primary); background: var(--primary-tint);
  transform: translateY(-1px);
}
.case-idx-link:hover .cil-ico { color: var(--primary); }
@media (max-width: 900px) {
  .case-idx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* 窄屏：索引条横滑，比换行堆三层更好用 —— 一排能看见 2 个还有「还能滑」的暗示 */
  .case-idx { flex-direction: column; align-items: flex-start; gap: 8px; }
  .case-idx-list { grid-template-columns: none; display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  .case-idx-link { flex: none; }
}

/* 案例卡：一是把每个案例框成一件事（原来五个案例像一大段连续文字），
   二是让指标带成为视觉主体 —— 读者就是冲那几个数字来的。
   scroll-margin-top 抵消 sticky 索引条的高度（图标版 3 列两行约 120px，
   比旧编号版高，72px 不够用了），否则锚点跳过去标题被压住。 */
.case-card {
  scroll-margin-top: calc(var(--header-h) + 132px);
  padding: 34px 36px 28px; background: #fff;
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 40, 34, .04), 0 12px 32px -18px rgba(16, 40, 34, .16);
}
@media (max-width: 640px) { .case-card { padding: 24px 20px 20px; } }

.case-detail-head { position: relative; padding-left: 62px; }
.case-no {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  font-size: 17px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--primary-dark); background: var(--primary-tint);
  border: 1px solid rgba(40, 184, 148, .28);
}
@media (max-width: 640px) {
  .case-detail-head { padding-left: 0; }
  .case-no { position: static; margin-bottom: 12px; }
}

/* 指标带：竖分隔线 + 等分，读起来像一份报表，而不是几行绿色数字 */
.case-metrics-lg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 0; margin-top: 26px; padding: 20px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.case-metrics-lg .metric { padding: 0 22px; border-left: 1px solid var(--border); }
.case-metrics-lg .metric:first-child { padding-left: 0; border-left: 0; }
.case-metrics-lg .metric .m-val {
  font-size: 34px; line-height: 1.05; letter-spacing: -.03em;
}
.case-metrics-lg .metric .m-lbl { margin-top: 8px; font-size: 13px; }
@media (max-width: 700px) {
  /* 窄屏改两列而不是继续横排：横排会把 "262 个" 挤成两行 */
  .case-metrics-lg { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-metrics-lg .metric { padding: 14px 0; border-left: 0; }
  .case-metrics-lg .metric:nth-child(n+3) { border-top: 1px solid var(--border); }
  .case-metrics-lg .metric:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--border); }
  .case-metrics-lg .metric .m-val { font-size: 27px; }
}

/* 四段式：每块带编号与左边线，读者一眼能分清「这是挑战」还是「这是做法」 */
.case-body { margin-top: 30px; display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .case-body { grid-template-columns: 1fr; } }
.case-block {
  padding: 4px 0 4px 18px; border-left: 2px solid var(--primary-tint);
}
.case-block h4 {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink);
}
.cb-n {
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: .04em; color: var(--primary-dark);
}
.case-block p { margin-top: 11px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.8; }
.case-block ul { margin-top: 11px; display: grid; gap: 8px; }
.case-block li {
  font-size: 13.5px; color: var(--muted-fg); line-height: 1.72;
  display: flex; gap: 8px;
}
.case-block li::before { content: "·"; color: var(--primary); font-weight: 800; }
.case-src {
  margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--border);
  font-size: 12px;
}

/* 详页的分例锚点（id 挂在小节的 .container 上，见 pages.py 的 p_cases）。
   索引卡的链接落到这里。站头是 sticky 的，不留出这段距离，跳过来之后案例标题
   正好被压在第一屏顶端之外，看着像跳错了位置。 */
.container[id] { scroll-margin-top: 96px; }
.case-detail { margin-top: 20px; display: grid; gap: 16px; }
.case-detail h4 { font-size: 13px; font-weight: 700; color: var(--ink); }
.case-detail p, .case-detail li { font-size: 13.5px; color: var(--muted-fg); line-height: 1.75; }
.case-detail ul { margin-top: 8px; display: grid; gap: 7px; }
.case-detail li { display: flex; gap: 9px; }
.case-detail li::before { content: "·"; color: var(--primary); font-weight: 800; }

/* ==========================================================================
   客户案例 · 真实案例版式（2026-09-18 换源后新增）
   /cases/ 换成本服务商自己交付的 6 个项目，每卡七段：
   元信息 → 指标 → 困境 / 方案 / 配置 / 成效表 → 前后对比 → 价值 → 可复制性。
   比原官方案例的四段（背景/挑战/做法/结果）多出「配置」「成效表」「对比」
   三段 —— 这三段是「我们做过的」和「产品公开材料」的分界线，必须看得见。
   ========================================================================== */

/* 一卡一屏、一卡一容器（锚点跳过来整张卡在视野里），间距只能打在容器上 */
.case-shell + .case-shell { margin-top: 26px; }

/* 元信息三件套：席位 / 部门 / 场景。
   放在标题与指标之间而不是末尾：读者先要知道「这是多大的单子、谁在用」，
   才知道下面那三个数字该怎么读。 */
.case-meta {
  margin-top: 18px; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cm-item {
  padding: 11px 13px; border-radius: 10px;
  background: var(--secondary); border: 1px solid var(--border);
  font-size: 13px; color: var(--muted-fg); line-height: 1.6;
}
.cm-item b {
  display: block; margin-bottom: 3px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink);
}
@media (max-width: 700px) { .case-meta { grid-template-columns: 1fr; } }

/* 正文：困境 / 方案 两列并排，配置与成效表单行通栏（表格通栏才读得全） */
.case-story {
  margin-top: 30px; display: grid; gap: 24px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-story .case-block-wide { grid-column: 1 / -1; }
@media (max-width: 820px) { .case-story { grid-template-columns: 1fr; } }

/* 困境：三条并列，每条一个小标题 —— 比一整段话好扫 */
.case-problems { margin-top: 12px; display: grid; gap: 10px; }
.cp-item {
  padding: 10px 13px; border-radius: 8px; background: #fcfcfd;
  border-left: 2px solid rgba(192, 57, 43, 0.32);
}
.cp-item h5 { font-size: 13px; font-weight: 700; color: var(--ink); }
.cp-item p { margin-top: 4px; font-size: 13px; color: var(--muted-fg); line-height: 1.72; }

/* 方案：流程一句话是这一块的标题句，用正文色而不是弱化灰 */
.case-block .case-flow { color: var(--ink); font-weight: 600; }
.case-note {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--primary-tint); border: 1px solid rgba(40, 184, 148, 0.22);
}
.case-note h5 { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); }
.case-note p { margin-top: 6px; font-size: 13px; color: var(--muted-fg); line-height: 1.75; }
.case-block .case-highlight {
  margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--primary);
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.7;
}

/* 前后对比：左右两格 + 中间箭头，视觉上就是「从 A 到 B」 */
.case-compare {
  margin-top: 26px; padding: 20px 22px; border-radius: 12px;
  background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
  border: 1px solid var(--border);
}
.cc-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink);
}
.cc-row {
  margin-top: 14px; display: grid; gap: 14px;
  grid-template-columns: 1fr auto 1fr; align-items: stretch;
}
.cc-cell {
  padding: 13px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--border);
}
.cc-cell span {
  display: block; font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted-fg);
}
.cc-cell b {
  display: block; margin-top: 5px; font-size: 14px; line-height: 1.6; color: var(--muted-fg);
}
.cc-after { background: var(--primary-tint); border-color: rgba(40, 184, 148, 0.3); }
.cc-after b { color: var(--primary-dark); font-weight: 700; }
.cc-arrow {
  align-self: center; font-size: 20px; line-height: 1; color: var(--primary);
}
.cc-note {
  margin-top: 12px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.75;
}
@media (max-width: 700px) {
  .cc-row { grid-template-columns: 1fr; gap: 8px; }
  .cc-arrow { justify-self: center; transform: rotate(90deg); }
}

/* 尾部：价值提炼（quote + 标签）与可复制性（三项）并排 */
.case-foot {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
  display: grid; gap: 24px; grid-template-columns: 1.1fr 1fr;
}
.case-foot .case-block { padding-left: 0; border-left: 0; }
@media (max-width: 900px) { .case-foot { grid-template-columns: 1fr; } }

.a-quote {
  margin: 12px 0 0; padding: 13px 16px; border-radius: 10px;
  background: var(--secondary); border-left: 3px solid var(--primary);
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.65;
}
.case-repl { display: grid; gap: 10px; align-content: start; }
.cr-item {
  padding: 12px 14px; border-radius: 10px;
  background: #fff; border: 1px dashed var(--border);
}
.cr-item h5 { font-size: 12.5px; font-weight: 700; color: var(--primary-dark); }
.cr-item p { margin-top: 5px; font-size: 13px; color: var(--muted-fg); line-height: 1.72; }

/* 成效总览：4 组能力两列排，末尾两行是「出处」与「结果」，与正文区分开 */
.case-cap-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .case-cap-grid { grid-template-columns: 1fr; } }
.case-cap {
  padding: 22px 24px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
}
.case-cap h3 { font-size: 16px; font-weight: 800; }
.case-cap p { margin-top: 10px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.78; }
.case-cap .cc-refs { margin-top: 8px; font-size: 12.5px; color: var(--primary-dark); }
.case-cap .cc-result {
  margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
}
@media (max-width: 640px) { .case-cap { padding: 18px 18px; } }

/* 真实工作场景截图（v14-5）：每案例 2 张，取自《企业落地案例集》原书配图。
   放在指标带之后、故事正文之前 —— 读者先「眼见为实」再读七段故事。
   图片带 width/height（构建期从实际尺寸写入），避免懒加载时跳动。 */
.case-shots { margin-top: 28px; }
.cs-title {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 15px; font-weight: 800; color: var(--ink);
}
.cs-title span {
  font-size: 12.5px; font-weight: 500; color: var(--muted-fg); letter-spacing: 0;
}
.case-shots-grid {
  margin-top: 13px; display: grid; gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-shot { min-width: 0; }
.case-shot img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
  box-shadow: 0 1px 2px rgba(16, 40, 34, .05);
}
.case-shot figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.66;
  padding-left: 10px; border-left: 2px solid rgba(40, 184, 148, 0.4);
}
@media (max-width: 760px) { .case-shots-grid { grid-template-columns: 1fr; } }

/* 成效总览的六岗位价值总览图（v14-5）：通栏宽图，圆角与案例卡一致 */
.case-roles-fig { margin-top: 22px; }
.case-roles-fig img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--border); background: #fff;
  box-shadow: 0 1px 2px rgba(16, 40, 34, .05);
}
.case-roles-fig figcaption {
  margin-top: 9px; font-size: 12.5px; color: var(--muted-fg); text-align: center;
}

/* 索引条的行业图标（v14-5）：商业化线性图标替代编号圆 —— 编号在卡上已有，
   索引条改用「图标 + 行业 + 指标」两行排，观感更正式统一 */
.cil-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--primary-dark); background: var(--primary-tint);
  border: 1px solid rgba(40, 184, 148, 0.25);
}
.cil-ico svg {
  width: 17px; height: 17px; fill: none;
  stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.cil-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cil-txt .cil-c { font-size: 13px; line-height: 1.25; }
.cil-txt .cil-i {
  font-size: 11.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}

/* ---------- 行业方案 ---------- */
.ind { padding: 30px 0; border-top: 1px solid var(--border); }
.ind:first-of-type { border-top: 0; padding-top: 0; }
.ind-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ind-head h3 { font-size: 21px; letter-spacing: -0.015em; }
.ind-tag {
  font-size: 12.5px; color: var(--primary-dark); background: var(--primary-tint);
  padding: 3px 10px; border-radius: var(--radius-pill); font-weight: 600;
}
.ind-lead { margin-top: 14px; font-size: 14.5px; color: var(--muted-fg); line-height: 1.78; max-width: 74ch; }
.ind-cols { margin-top: 24px; display: grid; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .ind-cols { grid-template-columns: 1fr; } }
.ind-col h4 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); }
.ind-col ul { margin-top: 14px; display: grid; gap: 14px; }
.ind-col li strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ind-col li span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.7; }
.ind-pain li strong::before { content: "痛点 · "; font-weight: 600; color: #b8860b; font-size: 11.5px; }
.ind-sol li strong::before { content: "方案 · "; font-weight: 600; color: var(--success); font-size: 11.5px; }

/* ---------- 行业块底部的「相关案例」条 ----------
   设计意图：痛点与方案讲的是「我们能做什么」，这里补上「谁已经用上了」。
   做成一条可点的整行（而不是一排小标签），是因为它承载三种信息 ——
   关系（相关案例）、主体（客户名）、成效（一句话）—— 标签装不下。
   整行可点也把点击热区从 ~40px 扩大到整条，符合 Fitts 定律。

   箭头的摆法：不推到最右（margin-left:auto），而是紧跟在文字流末尾。
   推到最右会与文字之间留出一大片空白，视觉上断成两截；跟着内容走，
   无论摘要一行还是两行，箭头都贴着"这句话说完了"的位置。 */
.ind-case {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--secondary); text-decoration: none;
  transition: background .16s ease, border-color .16s ease;
}
a.ind-case:hover { background: var(--primary-tint); border-color: var(--primary); }
a.ind-case:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 没有对应案例时的静态形态：不给 hover 反馈，免得看起来像能点却点不动 */
.ind-case.is-static { border-left-color: var(--border); }

/* 分类标签压到最弱一档：它只是"这是什么东西"的说明，
   真正要读的是后面的客户名与成效。 */
.ind-case .ic-k {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted-fg); text-transform: uppercase;
}
.ind-case .ic-client { flex: none; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ind-case .ic-sum {
  min-width: 0; font-size: 13.5px; color: var(--muted-fg); line-height: 1.65;
  /* 摘要最多两行，超出打点。行业块之间要等高，摘要不限高会把块的节奏拉乱。 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ind-case .ic-go { flex: none; color: var(--primary-dark); font-weight: 700; }
a.ind-case:hover .ic-go { transform: translateX(2px); }
@media (max-width: 640px) {
  /* 窄屏：ic-k 独占一行做小标题，客户名与摘要在下一行 ——
     三者挤在一行时，"相关案例"四个字会把客户名顶掉半行。 */
  .ind-case { display: block; padding: 12px 14px; }
  .ind-case .ic-k { display: block; margin-bottom: 4px; }
  .ind-case .ic-client { margin-right: 6px; }
  .ind-case .ic-sum { display: inline; -webkit-line-clamp: unset; }
  .ind-case .ic-go { margin-left: 2px; }
}

/* ---------- 博客列表 ---------- */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.post-item {
  display: grid; gap: 8px 28px; grid-template-columns: minmax(0, 1fr) 150px;
  align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) { .post-item { grid-template-columns: 1fr; } }
.post-item h3 { font-size: 16.5px; line-height: 1.42; }
.post-item h3 a:hover { color: var(--primary); }
.post-item .ex { margin-top: 9px; font-size: 14px; color: var(--muted-fg); line-height: 1.72; max-width: 66ch; }
.post-meta { font-size: 12.5px; color: var(--muted-fg); display: flex; gap: 8px 14px; flex-wrap: wrap; }
.post-cluster {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--primary-tint); color: var(--primary-dark); justify-self: start;
}
.post-card {
  display: flex; flex-direction: column; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff;
  box-shadow: var(--shadow-card);
}
.post-card h3 { margin-top: 12px; font-size: 16px; line-height: 1.45; }
.post-card .ex { margin-top: 10px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.72; flex: 1; }
.post-card .post-meta { margin-top: 16px; }

/* ---------- 文章详情 ---------- */
.article { max-width: 720px; }
.article-head { padding-top: calc(var(--header-h) + 56px); padding-bottom: 40px; }
.article-head h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.22; }
.article-head .post-meta { margin-top: 20px; }
.takeaways {
  margin-top: 30px; padding: 22px 24px;
  background: var(--secondary); border: 1px solid var(--border); border-radius: 12px;
}
.takeaways h4 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); }
.takeaways ul { margin-top: 14px; display: grid; gap: 10px; }
.takeaways li { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; }
.takeaways li::before { content: "·"; color: var(--primary); font-weight: 800; }
.article-toc {
  margin-top: 34px; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff;
}
.article-toc h4 { font-size: 13px; font-weight: 700; color: var(--ink); }
.article-toc ol { margin-top: 12px; display: grid; gap: 8px; counter-reset: t; }
.article-toc li { font-size: 13.5px; counter-increment: t; display: flex; gap: 9px; }
.article-toc li::before { content: counter(t); color: var(--primary); font-weight: 700; font-size: 12px; }
.article-toc a:hover { color: var(--primary); }

.article-body { padding: 8px 0 0; }
.article-body h2 {
  margin-top: 52px; padding-top: 4px;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem); letter-spacing: -0.015em;
}
.article-body h3 { margin-top: 34px; font-size: 16.5px; }
.article-body p { margin-top: 18px; font-size: 15.5px; line-height: 1.85; color: #2f323c; }
.article-body ul, .article-body ol { margin-top: 18px; display: grid; gap: 11px; }
.article-body li { font-size: 15px; line-height: 1.8; color: #2f323c; display: flex; gap: 11px; }
.article-body ul li::before { content: "·"; color: var(--primary); font-weight: 800; }
.article-body ol { counter-reset: o; }
.article-body ol li { counter-increment: o; }
.article-body ol li::before { content: counter(o) "."; color: var(--primary); font-weight: 700; font-size: 14px; min-width: 18px; }
.a-quote {
  margin-top: 30px; padding: 4px 0 4px 22px; border-left: 3px solid var(--primary);
  font-size: 16px; line-height: 1.78; color: var(--ink); font-weight: 500;
}
.a-note {
  margin-top: 30px; padding: 20px 22px;
  background: #fffbf2; border: 1px solid #f4e3c3; border-radius: 12px;
}
.a-note h4 { font-size: 13.5px; font-weight: 700; color: #8a5a00; }
.a-note p { margin-top: 9px; font-size: 14px; line-height: 1.78; color: #6b4a12; }
.a-cta {
  margin-top: 40px; padding: 26px 28px;
  background: var(--primary-tint); border: 1px solid #d6e6ff; border-radius: 14px;
}
.a-cta p { margin-top: 0; font-size: 14.5px; line-height: 1.78; color: var(--ink); }
.a-cta .btn { margin-top: 18px; }
.a-links { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--border); }
.a-links h4 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-fg); }
.a-links ul { margin-top: 16px; display: grid; gap: 14px; }
.a-links a { display: block; font-size: 14.5px; font-weight: 600; }
.a-links a:hover { color: var(--primary); }
.a-links span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted-fg); line-height: 1.65; }

.post-nav {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border);
  display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav a { display: block; }
.post-nav .dir { font-size: 12px; color: var(--muted-fg); }
.post-nav .ti { margin-top: 6px; font-size: 14.5px; font-weight: 600; }
.post-nav a:hover .ti { color: var(--primary); }

/* ---------- 助理（远程任务）与生态 ---------- */
.flow { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .flow { grid-template-columns: 1fr; } }
.flow-step { padding: 0 26px 0 0; }
.flow-step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-tint);
  color: var(--primary-dark); font-size: 13px; font-weight: 800;
}
.flow-step h4 { margin-top: 14px; font-size: 15px; font-weight: 700; }
.flow-step p { margin-top: 8px; font-size: 13.5px; color: var(--muted-fg); line-height: 1.7; }

/* ---------- 编号步骤列表（.flow-list）----------
   序号和正文**必须同一行**。原来是「块级序号 + 带 margin-top 的块级 p」上下堆叠，
   于是「1」独占一行、正文另起一行 —— 读起来像两个字段，序号也白白吃掉一行高度。
   改法是把每一步变成两列栅格（序号列定宽 + 正文列占满），
   序号用 align-self:start 顶到正文首行，正文那一列自然跟着走。
   gap 用 14px：序号圆 30px 宽，太窄会贴住正文，太宽序号和文字就断开了。 */
.flow-list .flow-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 0 14px;
  padding-right: 20px;
}
.flow-list .flow-step .n { align-self: start; }
.flow-list .flow-step p {
  /* 与序号圆垂直居中对齐（圆 30px、正文行高 1.7×13.5≈23px → 上留 3.5px） */
  margin-top: 3.5px;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.7;
}
/* 每一步之间给足间距，让「一步一行」的节奏立起来；
   条与条之间加淡分隔线，收住长列表的松散感。 */
.flow-list .flow-step + .flow-step { margin-top: 18px; }
.eco-row { display: flex; flex-wrap: wrap; gap: 14px; }
.eco-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; min-width: 230px; flex: 1 1 230px;
}
.eco-item img { width: 24px; height: 24px; flex: none; }
.eco-item .t { font-size: 14px; font-weight: 700; }
.eco-item .d { margin-top: 3px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.55; }
.eco-item .role {
  font-size: 10.5px; font-weight: 700; color: var(--primary-dark);
  background: var(--primary-tint); padding: 2px 7px; border-radius: 5px; flex: none;
}

/* ---------- 叙述块（来自参考站的结构化正文） ---------- */
.prose-block { max-width: 74ch; }
.prose-block p { margin-top: 16px; font-size: 15px; color: var(--muted-fg); line-height: 1.82; }
.prose-block ul { margin-top: 16px; display: grid; gap: 10px; }
.prose-block li { font-size: 14.5px; color: var(--muted-fg); line-height: 1.75; display: flex; gap: 10px; }
.prose-block li::before { content: "·"; color: var(--primary); font-weight: 800; }

/* ---------- 双栏（图文/清单） ---------- */
.split { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- .fit-grid：两栏「卡片对卡片」，用于 /contact/ 的需求匹配段 ----------
   原来这两栏用的是 .split + .prose-block：两栏本身等高（252px），
   但它们被放进一个 88px 上下内边距的 section 里，内容只占一半高度，
   下半截就空出一片（实测 section 446px / 内容 252px）。
   问题不在栏高不齐，而在"裸文字栏 vs section 的大内边距"这个组合本身立不住。
   改法：两栏各自成卡（描边 + 浅底 + 内边距），卡片撑满栅格高度，
   视觉上有了边界，空白也就被卡片收进去了。 */
.fit-grid {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-card {
  display: flex; flex-direction: column;
  padding: 30px 30px 32px;
  border: 1px solid var(--border); border-radius: var(--radius-card, 16px);
  background: #fff;
}
.fit-card h2 { font-size: 1.25rem; }
.fit-card ul { margin-top: 18px; display: grid; gap: 12px; }
.fit-card li {
  display: flex; gap: 10px; font-size: 14.5px; line-height: 1.7;
  color: var(--muted-fg);
}
.fit-card li::before {
  content: "·"; flex: none; color: var(--primary); font-weight: 800;
}
/* 提示条吸到卡片底部：左栏只有 4 条、右栏多一个 tip，
   让 tip 用 margin-top:auto 顶到底，两张卡片的底边内容才对得齐。 */
.fit-card .tip { margin-top: auto; }

/* .split-60 是「左宽右窄」的变体。它的选择器多一个类，特异性更高，
   所以媒体查询里必须**带上它**一起写 —— 只写 .split 的话，
   窄屏下 .split-60 仍然是两列（实测 390 视口右列被压到 135px，
   信息卡里的电话号把页面顶出 11px 横向滚动）。 */
.split-60 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split-60 { grid-template-columns: 1fr; } }

/* 提示条 */
.tip {
  margin-top: 22px; padding: 15px 18px; border-radius: 10px;
  background: var(--success-tint); border: 1px solid #cfe9e0;
  font-size: 13px; line-height: 1.75; color: #17604c;
}
.tip strong { color: #0f4a3a; }

/* ==========================================================================
   v2 新增组件（第二批）：随 15 页结构一起长出来的
   ========================================================================== */

/* ---------- 小字声明 / 更多链接 ---------- */
.fine-print {
  margin-top: 20px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.78;
  max-width: 88ch;
}
.more-link { margin-top: 28px; font-size: 14.5px; font-weight: 600; }
.more-link a { display: inline-flex; align-items: center; gap: 6px; }
.more-link a:hover { color: var(--primary); }

/* ---------- 公司信息卡 ---------- */
.info-card {
  margin-top: 24px; padding: 22px 24px; border: 1px solid var(--border);
  border-radius: var(--radius-card); background: var(--secondary);
}
.info-card h3 { font-size: 15px; }
.info-dl { margin-top: 16px; display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px 18px; }
.info-dl dt { font-size: 13px; color: var(--muted-fg); }
.info-dl dd { font-size: 13.5px; color: var(--ink); line-height: 1.6; word-break: break-word; }
/* 电话那一行的值是 11 位连续数字，属「不可断词」：
   卡在 78px 的标签列旁边时，它会把 <dd> 的 min-content 顶到比容器还宽，
   整页随之出现 11px 横向滚动（390 视口实测）。
   overflow-wrap:anywhere 允许在数字中间断开 —— 手机号被折成两行，
   总比整页能左右拖动要好。 */
.info-dl dd a { overflow-wrap: anywhere; }
.qr-inline {
  margin-top: 20px; border-radius: 10px; padding: 5px;
  border: 1px solid var(--border); background: #fff;
}

/* 关于我们页的公司信息卡：字段与二维码并排。
   二维码单占一行时下面会吊着 300px 空白（右列比左列短一大截）——
   并排之后两列高度接近，二维码也不再像「忘了收起来的东西」。 */
.info-body { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
/* 字段表在并排布局里要收紧行距：原来一行 10px 的间隔配上更窄的列，
   「服务区域」那种两行的值会把整张卡拉得很长。 */
.info-body .info-dl { margin-top: 14px; gap: 9px 16px; grid-template-columns: 72px minmax(0, 1fr); }
.info-qr { margin: 0; text-align: center; }
.info-qr img {
  display: block; border-radius: 10px; padding: 5px;
  border: 1px solid var(--border); background: #fff;
}
.info-qr figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted-fg); }
@media (max-width: 1180px) {
  /* 两列都挤的时候二维码回到下方 —— 并排会把地址那一列压到只剩 120px */
  .info-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .info-qr { justify-self: start; }
}

/* 关于我们的左栏：两节之间用细线分开。
   原先「我们做什么」和「我们的交付标准」之间只有行距，读起来像同一段的延续，
   而它们回答的是两个不同的问题（我们是谁 / 我们怎么保证交付）。 */
.about-prose h2 + * + h2,
.about-prose h2 ~ h2 { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border); }

/* ---------- 分类说明条 ---------- */
.cat-rows { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--border); }
.cat-row {
  display: grid; gap: 4px 26px; grid-template-columns: 220px minmax(0, 1fr);
  padding: 16px 0; border-bottom: 1px solid var(--border); align-items: baseline;
}
@media (max-width: 720px) { .cat-row { grid-template-columns: 1fr; } }
.cat-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cat-name .n {
  margin-left: 9px; font-size: 12px; font-weight: 500; color: var(--primary-dark);
  background: var(--primary-tint); padding: 2px 8px; border-radius: var(--radius-pill);
}
.cat-row p { font-size: 13.5px; color: var(--muted-fg); line-height: 1.7; }

/* ---------- 叙述型区块（为什么选我们 / 私有化部署） ---------- */
.prose-wrap { max-width: 78ch; }
.prose-section { padding: 34px 0; border-top: 1px solid var(--border); }
.prose-section:first-child { border-top: 0; padding-top: 0; }
.prose-section:last-child { padding-bottom: 0; }
.prose-section h2 { font-size: clamp(1.3rem, 2vw, 1.62rem); letter-spacing: -0.015em; }
.prose-section .lead { margin-top: 12px; font-size: 15px; color: var(--muted-fg); line-height: 1.8; }
.prose-block { margin-top: 18px; }
.prose-block p { margin-top: 14px; font-size: 14.5px; color: var(--muted-fg); line-height: 1.82; }
.prose-block ul { margin-top: 16px; display: grid; gap: 10px; }
.prose-block li { font-size: 14.5px; color: var(--muted-fg); line-height: 1.75; display: flex; gap: 10px; }
.prose-block li::before { content: "·"; color: var(--primary); font-weight: 800; }
.prose-item { margin-top: 26px; }
.prose-item h3 { font-size: 16px; }
.prose-item p { margin-top: 10px; font-size: 14.5px; color: var(--muted-fg); line-height: 1.8; }
.prose-item ul { margin-top: 12px; display: grid; gap: 9px; }
.prose-item li { font-size: 14.5px; color: var(--muted-fg); line-height: 1.75; display: flex; gap: 10px; }
.prose-item li::before { content: "·"; color: var(--primary); font-weight: 800; }

/* 被压平成「序号+标题+描述」的步骤清单。
   主定义在文件上半部 `.flow-list .flow-step`（两列栅格、序号与正文同行），
   这里只补外层间距 —— 不要再写 `.flow-step p { margin-top }`，
   那会覆盖上面的对齐值、把正文又压回序号底下。 */
.flow-list { margin-top: 20px; }

/* ---------- 部门 / 岗位 ---------- */
.depts { display: grid; gap: 0; border-top: 1px solid var(--border); }
.dept { border-bottom: 1px solid var(--border); }
.dept summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.dept summary::-webkit-details-marker { display: none; }
.dept summary::after {
  content: "＋"; flex: none; color: var(--muted-fg); font-weight: 400; font-size: 17px;
}
.dept[open] summary::after { content: "－"; color: var(--primary); }
.dept[open] summary { color: var(--primary); }
.dept-n { font-size: 12px; font-weight: 500; color: var(--muted-fg); margin-left: auto; }
.dept .dept-roles { padding-bottom: 20px; }

/* ---------- 官方文档链接 ---------- */
.step-doc {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  font-size: 12.5px; font-weight: 600; color: var(--primary);
}
.step-doc:hover { color: var(--primary-dark); text-decoration: underline; }

/* ---------- 联系页：防冒充提醒 ---------- */
/* 这一定是「要客户主动加你」的页面上最该写的一段。样式刻意压得比正文轻 ——
   它是提醒不是卖点，写得太醒目反而像在恐吓。 */
.notice-box {
  max-width: 68ch; padding: 22px 24px;
  background: var(--secondary); border: 1px solid var(--border);
  border-left: 3px solid var(--primary); border-radius: var(--radius-card);
}
.notice-box h2 { font-size: 15.5px; }
.notice-box p { margin-top: 9px; font-size: 13.5px; line-height: 1.78; color: var(--muted-fg); }

/* ---------- 客户 logo 分组 ---------- */
.logo-group { margin-top: 30px; }
.logo-group:first-child { margin-top: 0; }
.logo-group h3 {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-fg);
}
.logo-group .logo-wall { margin-top: 14px; }
/* .logo-cell 的样式统一在 site.css 的 .logo-wall 一组里，这里不再重复定义 —— 
   两处定义同一选择器时，后加载的那份静默胜出，改样式容易只改到一半。 */

/* ---------- 案例详情（案例页每案一段） ----------

   注意：`.case-detail-head` / `.case-body` / `.case-metrics` 的**主定义在
   第 355 行那一节**（客户案例详页）。这里只补两条不冲突的排版细节，
   别把整块再抄一遍 —— 抄一遍就会出现两份同选择器定义，后加载的静默胜出，
   改样式时只改到一半还看不出来。 */
.case-detail-head h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -0.018em; margin-top: 14px; }
.case-detail-head .lead { margin-top: 12px; font-size: 15px; color: var(--muted-fg); line-height: 1.8; max-width: 76ch; }

/* ---------- 联系页 ---------- */
.contact-card {
  padding: 28px 28px 26px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.contact-card h3 { font-size: 15px; }
.contact-card p { margin-top: 10px; font-size: 14px; color: var(--muted-fg); line-height: 1.75; }
.contact-note { font-size: 12.5px !important; color: var(--muted-fg); line-height: 1.7; }
.qr-card { text-align: center; }
.qr-card img {
  margin: 16px auto 0; display: block; border-radius: 10px; padding: 6px;
  border: 1px solid var(--border); background: #fff; width: 200px; height: 200px;
}

/* ---------- 数据带上的 .n 计数（筛选按钮内）已定义；这里补行业方案容器 ---------- */
/* /solutions/ 的行业区块（site_parts.py shape_ind()）：上下堆叠的单列。
   类名与 /scenarios/<code>/ 的左导航布局**必须分开**，否则后定义的 grid
   会盖掉这里的 block，把行业块压成一列窄栏。 */
.ind-wrap { display: block; }

/* ---------- 云数据未就绪时的过渡 ---------- */
.cloud-pending { min-height: 40px; opacity: .999; }

/* ==========================================================================
   移动端横向溢出修复
   --------------------------------------------------------------------------
   根因：`display:grid` 的隐式/默认列轨道是 `1fr`，而 `1fr` 等价于
   `minmax(auto,1fr)` —— 下限是内容的 min-content。只要某一行里有一个
   不短的不可断词（英文缩写、型号），轨道就被撑到比容器还宽，页面出现横向滚动条。
   凡是「单列堆叠」的网格容器都必须显式写成 `minmax(0,1fr)`。

   ========================================================================== */

.prose-wrap, .prose-section, .prose-block, .prose-item { min-width: 0; }
.prose-block ul, .prose-item ul, .case-body ul, .ind-col ul,
.takeaways ul, .a-links ul, .article-body ul, .article-body ol,
.svc-list, .steps, .depts, .cat-rows, .post-list, .flow, .flow-list,
.eco-row, .logi-list, .cred-list {
  grid-template-columns: minmax(0, 1fr);
}

/* 列表项：让匿名弹性子项也能收缩，避免长串英文撑破行 */
.prose-block li, .prose-item li, .case-body li,
.ind-col li, .takeaways li, .a-links li, .article-body li {
  min-width: 0; overflow-wrap: anywhere;
}

/* 首屏标题里的硬换行只在宽屏生效，窄屏交给浏览器自然折行 */
@media (max-width: 760px) { .lg-only { display: none; } }

/* ==========================================================================
   WorkBuddy SkillHub 板块（/scenarios/）
   两个 Tab：精选技能（分类卡 + 29 张技能卡）｜ 岗位 Skill · 工作流推荐
   （部门岗位树 + 同页 iframe 详情）。所有类名与 site_parts.py 的 shape_* /
   app.js 的 renderers.* 一一对应，改一处必须同步改三处。
   ========================================================================== */

/* ---------- Tab 条 ---------- */
/* .section-tabs 是「页头 → Tab 条」之间的过渡段。
   不能沿用 .section 的 88px 上下内边距：页头本身已有 56px 底边距、
   .stat-band 又带 margin-top，三者叠起来就是截图里那块约 88px 的空白。
   这里只留上边 40px 的呼吸、下边交给面板自己的内边距，空白就收掉了。 */
.section-tabs { padding-top: 40px; padding-bottom: 0; }
@media (max-width: 760px) { .section-tabs { padding-top: 28px; } }

.skhub-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 26px; border-bottom: 1px solid var(--border);
}
.skhub-tab {
  appearance: none; border: 0; background: transparent; font-family: inherit;
  padding: 11px 16px; margin-bottom: -1px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--muted-fg);
  border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
}
.skhub-tab:hover { color: var(--ink); }
.skhub-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.skhub-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
/* Tab 上的计数胶囊。用 tabular-nums 让三个 Tab 的数字宽度一致 ——
   否则「29 项」「57 个」「138 个岗位」会让按钮宽度参差，切换时整条会轻微抖动。 */
.tab-n {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-fg); background: var(--secondary);
}
.skhub-tab.is-active .tab-n { color: #fff; background: var(--primary); }

/* hidden 属性对 flex/grid 子项不生效，必须显式收回 */
.skhub-panel[hidden] { display: none; }

/* 面板自己带 .section（88px 上下内边距）。Tab 条已经在下方留了 26px，
   再叠 88px 就是截图里 Tab 与内容之间那一段过不去的大空白。
   面板只需要上边一点点缓冲，下边保留 —— 下一段内容还要靠它隔开。 */
.section-tabpanel { padding-top: 34px; }
@media (max-width: 760px) { .section-tabpanel { padding-top: 24px; } }
.sub-head {
  margin: 0 0 16px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted-fg);
}

/* ---------- 分类卡（同时是筛选控件） ---------- */
.cat-cards {
  display: grid; gap: 10px; margin-bottom: 26px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) { .cat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cat-cards { grid-template-columns: minmax(0, 1fr); } }

.cat-card {
  display: grid; gap: 3px; text-align: left; font-family: inherit;
  padding: 15px 16px 14px; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.cat-card:hover { border-color: #cfd8e6; background: var(--secondary); }
.cat-card.is-active {
  border-color: var(--ink); background: var(--secondary);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.cat-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cat-n {
  font-size: 21px; font-weight: 800; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.cat-card.is-active .cat-n { color: var(--primary); }
.cat-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cat-note { font-size: 12.5px; color: var(--muted-fg); line-height: 1.5; }

/* ---------- 岗位树 + 详情 ---------- */
.job-layout {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}
@media (max-width: 900px) { .job-layout { grid-template-columns: minmax(0, 1fr); } }

.job-side {
  display: grid; gap: 10px; align-content: start;
  padding: 14px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-card);
}
.job-search {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--secondary); color: var(--fg);
}
.job-search:focus { outline: none; border-color: var(--primary); background: #fff; }
.job-search::placeholder { color: #9aa0ab; }

.job-depts { display: grid; gap: 1px; max-height: 620px; overflow-y: auto; }
@media (max-width: 900px) { .job-depts { max-height: none; } }
.job-dept { min-width: 0; }
.job-dept[hidden] { display: none; }
.job-dept-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; font-family: inherit; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 8px; background: transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background .14s;
}
.job-dept-h:hover { background: var(--secondary); }
.job-dept-h:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.job-dept-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-dept-h .n {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
  background: var(--muted); border-radius: var(--radius-pill); padding: 1px 7px;
}
.job-dept-h[aria-expanded="true"] .n { background: var(--primary-tint); color: var(--primary-dark); }

.job-dept-body {
  display: grid; gap: 1px; margin: 2px 0 6px 10px; padding-left: 8px;
  border-left: 1px solid var(--border);
}
.job-dept-body[hidden] { display: none; }
.job-link {
  display: block; padding: 7px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--fg); line-height: 1.45;
}
.job-link[hidden] { display: none; }
.job-link:hover { background: var(--secondary); color: var(--ink); }
.job-link.is-active {
  background: var(--primary-tint); color: var(--primary-dark); font-weight: 600;
}
.job-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.job-main { min-width: 0; }
.job-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.job-crumb { font-size: 14px; font-weight: 600; color: var(--ink); }
.job-open {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12.5px; color: var(--primary); white-space: nowrap;
}
.job-open:hover { color: var(--primary-dark); text-decoration: underline; }
.job-open[hidden] { display: none; }
.job-empty {
  margin: 0; padding: 40px 24px; text-align: center;
  font-size: 13.5px; line-height: 1.7; color: var(--muted-fg);
  background: var(--secondary); border: 1px dashed var(--border); border-radius: var(--radius-card);
}
.job-empty[hidden] { display: none; }
.job-frame {
  display: block; width: 100%; height: 660px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff;
}
.job-frame[hidden] { display: none; }
@media (max-width: 700px) { .job-frame { height: 520px; } }

/* ==========================================================================
   首页 · WorkBuddy 视觉体系（workbuddy.ai 参照）
   两个新组件：首屏（.hero-*）与「你的工作好帮手」展示区（.wb-*）。
   素材全部来自产品方官方 CDN 并本地托管在 /assets/wb/，见 build/pages.py 的
   hero_home() 与 wb_showcase()。
   ========================================================================== */

/* ---------- 首页：展示区打头，定位横幅第二（2026-09-18） ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; text-align: center; }
/* 原 hero_home() 的三件视觉套件（hero-wm 水印 / hero-mascot 吉祥物 /
   hero-lockup 品牌行）随首页重排整体退场，样式一并删除：
   展示区台头已有 WorkBuddy 字标，顶栏品牌区常驻「企业版 · 授权服务商」，
   第二屏再放一份是同一件事说第三遍。 */
.hero h1 { max-width: 22ch; margin-inline: auto; }
.hero .lead { max-width: 52ch; margin-inline: auto; }

/* 定位横幅：收拢上一屏展示区的「一句话总结」。
   高度约为原首屏的 1/3 —— 它该做的是承接，不是再开一屏。
   两条覆盖都要带上 .hero 前缀：site.css 的 .hero 基础样式给首屏写死了
   「贴着吸顶头的 padding-top + 底部分隔线」，横幅在第二顺位，两边都要改。

   v14.3：它现在是**展示区的收尾条**，不是独立一屏。用户要「一屏装完」，
   而展示区(820)+横幅(267)=1087 超出一屏太多，所以这里做三件事把它压到
   一屏内：
     1. 留白再收（40/34 → 26/22）；
     2. 正文并成一行（.lead 的 max-width 放宽到 74ch，两行变一行省 26px）；
     3. 底纹与背景改为**无缝衔接**展示区（展示区是 --wb-gray 灰卡、圆角，
        横幅从灰渐变到白，两块的接缝正好落在灰卡下缘）——视觉上是一块
        完整的一屏，而不是两个各自完整的区块叠起来。
   字号不再降：1.75rem 的 h1 已经是「承接收尾」该有的最小体量。

   ------------------------------------------------------------------
   v14.7：用户圈出了**展示区灰卡下缘到这一条之间那条空白带**，要「减少一点」。
   实测那条带的构成是：
       .wb-wrap 的 padding-bottom  88px   ← 灰卡底边到此为止，之后全是底色
     + .hero-band 的 padding-top    15px
     = 103px 纯空白
   而且灰卡的 --wb-gray(#f4f6f9) 与 .wb-wrap 的底色几乎同色，所以这 88px
   在视觉上不是「区块间距」，而是**灰卡自己多留了一截**——这正是用户看到的
   「页面下面的留白有点多」。
   收法：.wb-wrap 的 padding-bottom 88 → 34（灰卡下缘只留一口气），
   .hero-band 的 padding-top 15 → 10。合计 103 → 44px，少掉 59px。
   收完之后灰卡与白色横幅之间仍有一条清晰的边界（靠圆角 + 底色差），
   但如果完全贴死会显得两段黏在一起，34px 是「分得开又不空」的位置。 */
.hero.hero-band {
  padding-top: 10px; padding-bottom: 12px;
  background: linear-gradient(180deg, #f4f6f9 0%, #ffffff 68%);
}
.hero-band h1 { font-size: clamp(1.6rem, 2.5vw, 2.05rem); }
.hero-band .lead { margin-top: 11px; max-width: 74ch; }
/* 横幅的底纹比内页页头再淡一档：这一屏字号小、留白少，同样的浓会显脏 */
.hero.hero-band::before { opacity: 0.22; }
@media (max-width: 760px) {
  .hero.hero-band { padding-top: 18px; padding-bottom: 20px; }
}

/* ---------- 「你的工作好帮手」展示区 ---------- */
/* 展示区是首页第一块（2026-09-18 起打头）。站头是 fixed 的、盖住页面最上方
   64px —— v12 时这一块排在 hero 之后，避让由 hero 的 padding-top 负责；
   现在打头了，这笔账落回它自己头上。

   v14.3 紧凑化：用户反馈「电脑一屏展示不完」。实测（1440×900）展示区 943px
   + 定位横幅 324px = 1267px，而笔记本可用高度普遍只有 780–900px。
   压缩点全在**留白与装饰**上，信息一个字没少：
     · 区块顶/底 padding 56/48 → 34/26
     · 标题上下的 logo 间距 18 → 12、副标题上边距 12 → 9
     · 正文列与设备列的间距 36 → 22，标签行上下 18/26 → 14/18
     · 吉祥物 62 → 52px（仍在，仍是这一块的识别物）
   压缩后约 600px，与横幅合计 ~924px，在 900px 视口下只需露一点续页提示。
   字号、行高、正文宽度一律不动 —— 那是可读性的底线。 */
/* v14.7：padding-bottom 88 → 34。灰卡下缘到此为止，剩下的 88px 全是底色，
   在用户眼里就是「展示区卡片下面多出一大块空白」。34px 既让灰卡「落得住」，
   又不至于空。详见 .hero-band 上方的说明。 */
.wb-wrap { padding-top: calc(var(--header-h) + 22px); padding-bottom: 34px; }
@media (max-width: 768px) { .wb-wrap { padding-top: calc(var(--header-h) + 16px); padding-bottom: 24px; } }
.wb-stage {
  background: var(--wb-gray); border-radius: var(--radius-stage);
  /* ⚠️ padding-bottom 不能是 0。.wb-stage 有 overflow:hidden，
      整机底座（15px）+ 垫脚（3px）+ 落地投影（10px）合计要往下伸出
      28px 左右；底 padding 为 0 时底座下沿会被卡片直接切掉，
      观感上「笔记本没有底」。v14.7 第二版实测补上 26px。
      顶部 20px 保留（logo 与标题的呼吸）。 */
  padding: 20px 0 26px; overflow: hidden; position: relative;
  /* .wb-logo 绝对定位的基准 */
}
@media (max-width: 768px) { .wb-stage { padding: 20px 0 20px; border-radius: 18px; } }

.wb-head { text-align: center; padding: 0 24px; }
/* v14.4：WorkBuddy 字标从标题上方居中挪到**灰卡左上角**并放大。
   居中时它是「第二行 logo」—— 标题上方一个、顶栏一个，同一件事说两遍；
   挪到角落变成卡片的水印署名，不再挤占标题的视觉权重，也让标题成为
   灰卡里唯一的视觉焦点（这是用户要求的「挪到左上角、大一点」）。
   绝对定位到 .wb-stage 的左上角（padding 与之对齐），不参与文档流。 */
.wb-logo {
  position: absolute; left: 34px; top: 26px; z-index: 2;
  height: 34px; width: auto; margin: 0;
}

/* 窄屏：logo 绝对定位会撞上居中的 h2（h2 横跨整行，躲不开）。
   让 logo 回到文档流、单独占一行，标题排到它下面 —— 竖排空间本就宽裕。
   ⚠️ 这条必须排在基础 .wb-logo 之后：同优先级下后者胜，写在前面会被盖掉。 */
@media (max-width: 900px) {
  .wb-logo {
    position: static; display: block;
    height: 28px; margin: 0 0 10px 24px;
  }
}
.wb-head h2 {
  font-size: clamp(1.38rem, 2.3vw, 1.8rem); letter-spacing: -0.02em;
}
.wb-head .wb-subtitle {
  margin-top: 7px; color: var(--muted-fg);
  max-width: 60ch; margin-inline: auto; line-height: 1.62;
  /* 桌面端强制单行，避免「给你审核」这种孤字吊尾（v14.5 修复）。 */
  white-space: nowrap;
  font-size: clamp(13px, 1.14vw, 15px);
}

.wb-body {
  display: grid; align-items: end; gap: 0;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  margin-top: 14px;
}
@media (max-width: 900px) {
  .wb-body { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
}

/* 左列：吉祥物 + 标签 + 文案 + 切换控件 */
.wb-copy {
  padding: 0 24px 18px 56px; display: flex; flex-direction: column;
  align-items: flex-start; min-width: 0;
}
/* 吉祥物。两张图并排 —— .wb-copy 本身是纵向 flex，直接放进去会竖着叠 */
.wb-crews { display: flex; align-items: flex-end; }
.wb-crews img { height: 46px; width: auto; }
.wb-crews img + img { margin-left: -4px; }

.wb-tabs {
  display: inline-flex; gap: 2px; margin: 11px 0 15px; padding: 4px;
  background: #fff; border-radius: 8px; flex-wrap: wrap;
}
.wb-tab {
  appearance: none; border: 0; background: transparent; font-family: inherit;
  padding: 7px 20px; border-radius: 5px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--fg);
  transition: background .18s, color .18s;
}
.wb-tab:hover { background: var(--secondary); }
.wb-tab.is-active { background: var(--primary); color: #fff; }
.wb-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* 窄屏：五档标签必须排在一行。默认 flex-wrap: wrap 在 390px 上会把「岗位」
   挤到第二行，看起来像坏掉。改成整行均分 + 不换行，字号跟着收。 */
@media (max-width: 640px) {
  .wb-tabs { display: flex; width: 100%; flex-wrap: nowrap; padding: 4px; gap: 2px; }
  .wb-tab { flex: 1 1 0; min-width: 0; padding: 7px 4px; font-size: 13px; }
}

.wb-pane { display: none; min-height: 128px; }
.wb-pane.is-active { display: block; animation: wb-in .28s ease both; }
@keyframes wb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wb-pane.is-active { animation: none; } }

.wb-h3 { font-size: 17px; font-weight: 700; color: var(--ink); }
.wb-h4 {
  margin-top: 5px; font-size: clamp(1.15rem, 1.75vw, 1.42rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.24; max-width: 20ch;
}
.wb-p {
  margin-top: 11px; font-size: 13.5px; line-height: 1.72;
  color: var(--muted-fg); max-width: 36ch;
}
.wb-open {
  display: grid; place-items: center; width: 36px; height: 36px; margin-top: 16px;
  background: var(--wb-black); color: #fff; border-radius: 4px;
  transition: background .18s, transform .18s;
}
.wb-open:hover { background: var(--primary); transform: translate(2px, -2px); }
.wb-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.wb-nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.wb-arrow {
  appearance: none; display: grid; place-items: center; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: #fff; color: var(--ink);
  transition: border-color .18s, background .18s;
}
.wb-arrow:hover { border-color: var(--wb-black); background: var(--secondary); }
.wb-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wb-dots {
  flex: none; display: flex; align-items: center; padding: 6px 10px;
  background: var(--wb-black); border-radius: var(--radius-pill);
}
.wb-dot {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.34);
  transition: background .2s, width .2s; cursor: pointer;
}
.wb-dot.is-on { background: #fff; width: 18px; border-radius: 3px; }

/* 右列：笔记本 mockup，屏幕里嵌随标签切换的真实产物截图。
   机身图在源文件里就是右侧出血的（屏幕右边缘没有边框），所以这里也让它
   向右出血——补上右边框反而会看出是硬裁的。

   屏幕内容必须**盖在机身图之上**（z-index 2 > 1）：机身图的黑屏面是不透明的，
   放在下层会被整块遮住，只剩一片黑。四个百分比是从 mac-laptop.png 上量的
   实测值（黑屏面 x 13%→100%、y 1.5%→91%），四周留 1% 左右就是边框。

   ⚠️ 出血只在**两列布局**下成立（≥901px）：那是「设备探出卡片右缘」的设计意图，
   而且此时被裁的是机身右侧的无内容区域。
   ≤900px 时网格塌成一列，设备占满整行，此时任何负 margin 都会把整机连同
   屏幕内容一起推出卡片、被 overflow:hidden 从中间切断（实测 900px 溢出 84px、
   390px 溢出 35px，机身整个逃出灰卡）。所以小屏必须归零。 */

/* v14.3 低矮屏适配：1366×768 这类 16:9 笔记本可用高度只有 ~660px，
   按 1440×900 调好的尺寸放进去仍会超出一屏 130px+。这里按**视口高度**
   再收一档，而不是按宽度 —— 「一屏装不下」是高度问题，用宽度断点治不对症。
   收的是设备尺寸与留白，标题与正文只微调，可读性不受影响。 */
@media (min-width: 901px) and (max-height: 820px) {
  .wb-wrap { padding-top: calc(var(--header-h) + 12px); padding-bottom: 26px; }
  .wb-stage { padding: 18px 0 22px; }
  .wb-logo { height: 27px; left: 26px; top: 20px; }
  .wb-head h2 { font-size: 1.55rem; }
  .wb-head .wb-subtitle { margin-top: 5px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
  .wb-body { margin-top: 12px; }
  .wb-copy { padding: 0 20px 14px 44px; }
  .wb-crews img { height: 38px; }
  .wb-tabs { margin: 9px 0 12px; }
  .wb-tab { padding: 6px 16px; font-size: 14px; }
  .wb-pane { min-height: 112px; }
  .wb-h4 { font-size: 1.3rem; line-height: 1.22; }
  .wb-p { margin-top: 8px; font-size: 13px; line-height: 1.62; }
  .wb-open { width: 32px; height: 32px; margin-top: 11px; }
  .wb-nav { margin-top: 13px; }
  .hero.hero-band { padding-top: 11px; padding-bottom: 10px; }
  .hero-band h1 { font-size: 1.75rem; }
  .hero-band .lead { margin-top: 8px; font-size: 13.5px; }
}

/* ---------- 右侧「一台 MacBook」（v14.6 第五版） ----------

   机壳第五版。前四版分别是：出血机身图被裁、CSS 手搓窗口套窗口、
   深色厚边显示器（不专业）、银铝 Studio Display（仍是显示器）。
   用户这次给了一张 MacBook Air 正面开盖图，要「用苹果电脑套壳」。

   MacBook 与显示器在外形上差在四处，逐条对应着做：

     ① **机身是银白，不是深灰**。MacBook Air 的壳是接近白的银色
        （#e8ebee 系），比 Studio Display 的银再亮一档。屏幕区周围是
        **一圈很窄的黑边**（屏幕黑场本身），黑边外面才是银色机身。
     ② **屏幕是 16:10**，不是 3:2。这是笔记本与显示器的硬区别。
        素材按 16:10 重新裁，`object-fit: contain` 即无裁无白边。
     ③ **屏幕下方一条转轴**，再下面是**楔形底座横条** ——
        MacBook Air 最标志性的特征：整机像一片削出来的楔子，
        前缘极薄、左右两端略翘起，中央有一道开盖凹槽。
     ④ **四角都是大圆角**，上盖两个角比底座两个角更圆。

   底座的几何是这一版的重点：它不是一条等比矩形，而是
     · 主体一条横向渐变（左右两端暗、中间亮）
     · 上面叠一条**中央凹槽**（开盖位），用一道暗线 + 两侧高光做出来
     · 两端各有**一个垫脚**，落到页面上的投影分两层（贴地实、外扩软）
   ------------------------------------------------------------------ */

/* 整机基准尺寸。宽度取三者最小，低矮屏自动收小。
   ⚠️ v14.7 第二版：上限从 560 收到 **500**（用户确认「缩小一档，留出呼吸」）。
      理由不只是「小一点好看」—— 整机宽 500px 时：
        · 银边 = 500 × 2.746% = 13.7px（真机比例，看得见铝框）
        · 整机高 = 500 × 0.65636 = 328px
        · 整机宽高比 = 1.524（与真机 304.1/199.6 完全一致）
      上一版 560px 时银边按 10px 固定值算，只占 1.8%，屏幕顶满整机 ——
      这正是用户说「看不出来是笔记本电脑」的物理原因。 */
.wb-device {
  position: relative; min-width: 0;
  /* ⚠️ v14.8：上盖只占 87.26%，底座占满 100%。
     所以 --wb-unit 现在表示**底座宽**（= 整机宽），不再是上盖宽。
     右栏实测 659px（1440 视口），留 20px 呼吸 → 上限给 620px。
     上一版 500px 时整机只占右栏 76%，器件细节（银线、楔形底座）看不清，
     这也是用户说「丑」的一部分 —— 太小的时候只剩一块黑方块。 */
  --wb-unit: min(100%, calc(100vh * 1.30 - 470px), 620px);
  display: flex; justify-content: center;
  /* 底座投影要溢出到容器外才自然，但容器不能因此产生滚动条 */
  padding-bottom: 2px;
}

.wb-monitor {
  position: relative;
  /* ⚠️ 容器按**底座**宽度取（底座比上盖宽 14.6%），
     否则底座会横向溢出 .wb-device，被 stage 的 overflow 裁掉两端。
     上盖（.wb-monitor-bezel）自己再收到 100/1.146 = 87.26%。 */
  width: var(--wb-unit);
  display: flex; flex-direction: column; align-items: center;
  /* 三层投影：宽软环境遮蔽 + 窄实接触影 + 一条冷调反射。 */
  filter: drop-shadow(0 24px 44px rgba(18, 24, 38, .15))
          drop-shadow(0 5px 12px rgba(18, 24, 38, .10));
}

/* 上盖（含屏幕）。银白铝合金，四边等宽边框。
   ══════════════════════════════════════════════════════════════════
   v14.7 第二版 · 按 MacBook Air 13" 的真实比例重建

   用户反馈（本轮）：「首页的电脑框看不出来是苹果或者笔记本电脑，需要重新优化。」
   并确认了两件事：**像苹果笔记本** + **缩小一档留出呼吸**。

   上一版为什么「看不出来」—— 逐条量真机尺寸之后，找到三个硬伤：

     ① **银边太窄（10px）**。我上轮以为「真机铝框很窄」，但真实尺寸是：
        机身 304.1mm / 屏幕 287.4mm → 左右边框各 8.35mm，
        **占屏幕宽 2.91%**。折算到 500px 整机宽是 **13.7px**，不是 10px。
        10px 只占 1.8%，屏幕顶满整机 —— 于是「铝框」退化成一条细缝，
        整机读起来是「带细边的平板」，不是笔记本。

     ② **底座太薄（17px）**。真机正视底座（转轴到前缘）约 9mm，
        **占屏幕高的 5.01%**。折算到 500px 宽是 14.8px —— 但那是「纯底座」，
        真实观感里底座是**转轴缝 + 楔形底条**两段的合计（真机约 12mm，
        折 19.6px）。17px 把楔形压没了，而楔形正是 MacBook 最有辨识度的一笔。

     ③ **整机宽高比错**。真机正视 **304.1 / 199.6 = 1.524**，
        而上一版是 560/385 = **1.454** —— 明显「偏高」，像一块竖着的屏。
        宽高比是「一眼认出是什么东西」的第一层信息，比颜色和圆角都更早被感知。

   ------------------------------------------------------------------
   做法：**把所有部件尺寸绑定到一个比例系数**，而不是各写各的像素。
   MacBook Air 13" 的真实比例（以机身宽为 1）：

     整机宽         1.0000
     左右边框       0.02746   (8.35 / 304.1)
     上边框         0.01644   (5.0 / 304.1)
     屏幕可视宽     0.94508   (287.4 / 304.1)
     屏幕可视高     0.59059   (179.6 / 304.1)
     转轴缝         0.00987   (3.0 / 304.1)
     楔形底条       0.02960   (9.0 / 304.1)
     整机高         0.65636   (199.6 / 304.1)

   CSS 里用 `--wb-unit` 乘以这些小数即可。这样改一次 `--wb-unit`，
   整机等比缩放，**永远不会再出现「某个部件比例不对」**。
   ══════════════════════════════════════════════════════════════════ */
.wb-monitor-bezel {
  position: relative;
  /* 上盖宽 = 底座的 87.26%（官网 2650 / 3038）。
     .wb-monitor 的宽度已经是「底座宽」，所以这里收到 87.26%，
     底座再占满 100% —— 两者相加正好是整机宽，不会溢出容器。 */
  width: 87.26%;
  /* ⚠️ v14.8 · 关键修正：**上盖是黑的，不是银的**
     ──────────────────────────────────────────────────────────────
     用户说「首页的电脑太丑了」，并给了官方参照 workbuddy.cn。
     我把官网那台 MacBook 的素材（mac-BqzMmYsu.png，3072×2346）
     逐像素量了一遍，发现我前几版的方向**从根上就错了**：

       行区间        银色像素占比      内容
       y 26–44       100%（2px 可见）  顶部一条银线
       y 45–2110     **0.2%**         整块纯黑 #000（黑玻璃面）
       y 2115–2266   96–98%           底座（中灰 138–159）

     也就是说，官网的 MacBook 是**「黑屏幕 + 银底座」**，
     不是「银框包住屏幕」。真实的 MacBook Air 也是这样：
     正面看到的黑，是「屏幕玻璃面 + 四周极窄的机身黑边」连成的一整块，
     银色几乎只在**顶部一条亮边**（受光的上盖边缘）和**底部底座**。

     我前几版把整圈做成银色渐变，等于给屏幕描了一圈银框 ——
     那是**显示器/平板**的画法，不是笔记本。这就是「丑」的物理原因。
     所以：上盖底色改成纯黑，银色只留顶部一条高光。 */
  background: #000;
  /* 圆角按官网素材实测：黑块左边缘从 y=45 的 x=466 收到 y=97 的 x=432，
     即圆角半径约 34px / 黑块宽 2650 = **1.28%**。
     ⚠️ 这个圆角必须小到几乎看不见 —— 它就是「笔记本 vs 平板」的分界。 */
  border-radius: 1.28% 1.28% 0.9% 0.9%;
  /* ⚠️ 这里必须把两个不同的宽度分开（上面那版量错了）：
       · **上盖（黑色块）** = 2650，这就是「屏幕那一块」的宽度；
       · **底座** = 3038，比上盖宽 14.6% —— 底座向左右**各探出 7.3%**。
     黑块四周的「机身黑边」其实极窄（真机约 1–2mm），所以上盖的
     左右 padding 只能给 **0.6%** 量级，绝不能给 6.4%
     —— 给了就变成「屏幕左右两条粗黑边」，正是上一稿的丑法。
     底座探出上盖的部分由 .wb-monitor-stand 的 width: 114.6% 实现。 */
  padding: 0.5% 0.6% 0.5%;
  box-shadow:
    /* 顶部那条银线是本设计里唯一的「银色上盖」信息 ——
       官网实测 y=28–31 是 183–192 的亮灰，下面是 73 → 0 的黑。
       用 1px inset 高光 + 1px 过渡线复现。 */
    inset 0 1.2px 0 rgba(196, 199, 203, .95),
    inset 0 2.6px 0 rgba(88, 92, 98, .55),
    /* 黑玻璃面自身的极淡内反光 */
    inset 0 0 0 1px rgba(255, 255, 255, .045);
}

/* 屏幕区：黑玻璃面上的**可视内容**。
   ⚠️ v14.8：上盖（.wb-monitor-bezel）已经是纯黑，所以这里不再需要
      自己做「黑边」——它只负责内容区本身。原先的 `padding: 0.7%`
      （黑玻璃边）已经上移到父级，这里保持 0 边距，让内容尽量大。 */
.wb-win {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #000;
  padding: 0;
  border-radius: 0.9%;
}
/* 玻璃边缘：一道极淡的内圈高光，让屏幕「嵌」进黑玻璃面。
   ⚠️ 强度必须很轻 —— 上盖已经是黑的，这里再重就成了一块边框。 */
.wb-win::before {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 1px 3px rgba(0, 0, 0, .40);
  pointer-events: none;
}

/* 摄像头：MacBook 的摄像头在**顶部黑色边缘的中央**。
   ⚠️ v14.8 实测：官网素材里摄像头位置几乎没有可见亮点（它融在顶部银线
      下方的黑里）。所以这里给一个**很克制**的深色小点，
      只在贴近看时成立 —— 上一版那颗蓝黑渐变球太抢眼，
      是「丑」的组成部分之一。 */
.wb-monitor-notch {
  position: absolute; left: 50%;
  top: calc(0.5% + 3px);
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; z-index: 4;
  background: #0d1015;
  box-shadow: inset 0 0 0 .5px rgba(120, 140, 170, .35);
}
.wb-monitor-notch span { display: none; }

/* 内容区：五档画面叠在同一块里，靠 opacity 交叉淡入淡出。
   父级 .wb-monitor-bezel 已提供黑玻璃边，这里 inset: 0 铺满 .wb-win 即可。 */
.wb-view {
  position: absolute; inset: 0; overflow: hidden;
  background: #000; border-radius: inherit;
}
.wb-view-inner { position: absolute; inset: 0; }
.wb-screen {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* 屏幕与素材同为 16:10，contain 即「不裁不留白」。
     不用 cover：cover 在亚像素误差时会啃掉边缘。 */
  object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .32s ease;
}
.wb-screen.is-active { opacity: 1; }
video.wb-screen { display: block; border: 0; background: #000; }
@media (prefers-reduced-motion: reduce) { .wb-screen { transition: none; } }

/* ---------- 转轴 + 底座 ----------
   ══════════════════════════════════════════════════════════════════════
   v14.8 · 按官网素材（mac-BqzMmYsu.png）实测重画

   官网实测数据（像素）：
     底座宽        3038   = 1.0000   ← 基准
     黑屏块宽      2650   = 0.8723   → **底座比屏幕宽 14.6%**
     底座高         152   = 0.0500
     黑块高        2065   = 0.6797
     屏幕左内缩     388   = 0.1277（图右侧被裁，实为居中内缩各 6.4%）

   底座纵向颜色（x=1500 中列，从上到下）：
     2118  177  ← 顶面高光
     2124  153  ← 进入平坦中灰
     2154  152
     2178  136
     2202   89  ← 开始转暗
     2226   56
     2244   25  ← 前缘最暗
     2250  165 α144  ← 下沿一道反光

   ⚠️ 三个关键修正（上一版全错在这里）：
     ① **底座比屏幕宽**。上一版 .wb-monitor-stand 只有 100.6%，
        几乎与屏幕等宽 —— 这是「平板」感的重要来源。
        真机底座向左右各多出 7.3%，于是屏幕像「立在托盘上」。
     ② **底座是「中灰」不是「亮银」**。上一版用 #f2f4f6 亮银，
        在浅色页面上糊成一片、像锡箔。官网中段是 **153 的灰**，
        极值 177（顶面）→ 25（前缘），是**暗调金属**。
     ③ **底座要高**（152/3038 = 5.0% of 底座宽）。
        上一版 20px（在 500px 整机上占 4%）偏薄，楔形压不出来。
   ══════════════════════════════════════════════════════════════════════ */
.wb-monitor-stand {
  position: relative;
  /* 底座占满 .wb-monitor（它的宽度已经是底座宽）。
     上盖收在 87.26%，底座 100% —— 于是底座自然向左右各探出 7.3%。 */
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  margin-top: 0;
  filter: drop-shadow(0 4px 7px rgba(18, 24, 38, .13));
}
/* 转轴缝：屏幕底边与底座之间那道暗缝。
   官网素材里这段是 2109→2115 的过渡（黑 → 177 高光），非常窄；
   正面观感只需要 2–3px 的暗线，不能像上一版那样做成 6px 的粗缝。 */
.wb-monitor-neck {
  width: 100%; height: 3px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(30, 34, 40, .55) 6%,
                    rgba(30, 34, 40, .55) 94%, transparent 100%);
  border-radius: 0;
}
/* 底座主体。
   ⚠️ 楔形方向：上沿（贴转轴处）最宽、下沿（前缘）略窄。
      官网实测：底座 y=2115–2190 宽 3038 恒定，到 y=2250 收到 2983 ——
      即**上宽下窄**，前缘收 1.8%。 */
.wb-monitor-base {
  position: relative; width: 100%;
  /* 高 = 0.0500 × 底座宽（官网 152 / 3038）。
     ⚠️ 不能用 calc(var(--wb-unit) * 0.0573)：--wb-unit 的值是
        `min(100%, calc(...), 500px)` 这个**字面表达式**，
        乘进 calc 后 Chrome 化简不了，整条 height 失效 → 掉回 min-height。
        改用 aspect-ratio（以自身宽度为基准），既准确又跟着缩放。 */
  aspect-ratio: 3038 / 152;
  background:
    /* ⚠️ 叠放顺序 = 从上到下。CSS 里**写在最前面的画在最上层**。
       所以纵向的「变暗遮罩」必须写在第一层 ——
       否则横向那层（不透明色）会把它整条盖掉，
       底座就变成一块死平的灰（上一稿实测：全高恒定 146，正是这个原因）。 */

    /* ① 纵向变暗遮罩（黑色 alpha，越往下越黑）——
          逐点照抄官网实测剖面（x=800 中列，底座高 152px）：
            y-2115   值    换算 alpha（以中段 147 为基准）
               0     75   → .49  顶缝
               5    152   → 0     顶面高光
            10–45  147→146 → 0 ~ .007  平坦亮带（前 30%）
            50–80  143→119 → .03 ~ .19 缓慢转暗
            85–100  99→57  → .33 ~ .61 快速转暗
           105–130  57→53  → .61 ~ .64 前缘暗带
             135    165    → 0     下沿一道反光
          **前 30% 必须几乎是平的**，掉早了就成「上亮下黑」两截。 */
    linear-gradient(180deg,
      rgba(0, 0, 0, .49) 0%,
      rgba(0, 0, 0, 0) 3.3%,
      rgba(0, 0, 0, 0) 29.6%,
      rgba(0, 0, 0, .03) 32.9%,
      rgba(0, 0, 0, .09) 39.5%,
      rgba(0, 0, 0, .14) 49.3%,
      rgba(0, 0, 0, .24) 54.7%,
      rgba(0, 0, 0, .39) 57.9%,
      rgba(0, 0, 0, .56) 62.5%,
      rgba(0, 0, 0, .61) 65.8%,
      rgba(0, 0, 0, .63) 82.2%,
      rgba(0, 0, 0, .64) 85.5%,
      rgba(0, 0, 0, .86) 88.8%,
      rgba(0, 0, 0, .18) 92.1%,
      rgba(0, 0, 0, .39) 96%),

    /* ② 中央开盖凹槽：官网实测 x=1670–1692 —— 宽仅 22px/3038 = 0.72%，
          是很窄的**暗**缺口。上一稿写成 35%–65% 的宽带 + 亮线，全错。 */
    linear-gradient(90deg, transparent 49.6%, rgba(58, 60, 64, .38) 49.7%,
                    rgba(58, 60, 64, .38) 50.3%, transparent 50.4%),

    /* ③ 横向明暗：官网实测 y=2140 —— x=40→81 / 200→138 / 800→147 /
          1500→153 / 2200→104 / 2900→159。左端比右端暗得多（81 vs 159），
          光源在右上方。以底座宽 3038 折算：1.3% / 6.6% / 26% / 50% / 95%。 */
    linear-gradient(90deg,
      rgb(81, 81, 81) 0%,
      rgb(138, 138, 138) 6.6%,
      rgb(147, 147, 147) 26%,
      rgb(153, 153, 153) 50%,
      rgb(147, 147, 147) 74%,
      rgb(140, 140, 140) 95%,
      rgb(159, 159, 159) 100%);
  /* 上沿几乎直角，下沿（前缘）圆润，**左右两端也带圆角**
     —— 官网实测左边界从 y=2184 的 x=35 起到 y=2248 的 x=78，
     即底部两端各内收约 1.4%，形成机身前缘的圆弧收口。 */
  border-radius: 1px 1px 4px 4px / 1px 1px 34% 34%;
  /* 前缘收窄 1.8%（官网 3038 → 2983），两端再各收一点做圆弧 */
  clip-path: polygon(0 0, 100% 0, 99.2% 100%, 0.8% 100%);
  box-shadow:
    inset 0 1px 0 rgba(206, 208, 211, .90),
    inset 0 -1px 0 rgba(20, 22, 26, .70);
}
/* 底条两端的垫脚 —— 官网 y=2255 有一小段独立不透明区（213–426），
   是前侧脚垫。做成两端的窄长条。 */
.wb-monitor-base::before {
  content: ""; position: absolute; left: 5%; right: 5%; top: 100%; height: 3px;
  background:
    linear-gradient(90deg, rgba(60, 62, 66, .80) 0 6%, transparent 6% 94%, rgba(60, 62, 66, .80) 94% 100%);
  border-radius: 0 0 2px 2px;
  opacity: .55;
}
/* 落到页面上的投影：贴地一层实、外扩一层软 */
.wb-monitor-base::after {
  content: ""; position: absolute; left: 1%; right: 1%; top: 100%; height: 12px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(18, 24, 38, .30) 0%, rgba(18, 24, 38, .11) 44%, transparent 74%);
  border-radius: 50%;
}

/* 窄屏：单列后整机居中，尺寸改由宽度驱动。 */
@media (max-width: 900px) {
  .wb-device { --wb-unit: 100%; justify-content: center; padding: 0; }
  .wb-monitor-bezel { border-radius: 2.4% 2.4% 1.7% 1.7%; }
  .wb-monitor-notch { width: 3px; height: 3px; }
  .wb-monitor-neck { height: 2px; }
  .wb-monitor-base { aspect-ratio: 3038 / 152; min-height: 10px; }
}

/* ---------- 六项服务的首页简版（只有序号 + 名称） ---------- */
.svc-list-brief { gap: 0; }
/* brief 版一行只有标题：序号圆与标题中心对齐（v14 修复「序号和文字没对齐」）。
   完整版的 -5px 首行对齐在这里反而是错位来源，所以单独覆盖。 */
.svc-list-brief .svc { align-items: center; }
.svc-list-brief .svc .svc-idx { margin-top: 0; }
.svc-list-brief .svc { padding: 12px 0; border-bottom: 1px solid var(--border); }
.svc-list-brief .svc:last-child { border-bottom: 0; }
.svc-list-brief .svc h3 { font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════
   行业场景页 /scenarios/<code>/  —— 「左侧行业导航 + 右侧场景卡」

   排版规划取自参考站的行业页，视觉沿用本站设计语言（.container / --radius-card /
   --primary-tint 等），所以两边观感不同是**有意的**，不是没对齐：
     · 参考站用独立于容器宽的 .wb-sidebar；我们放进 .container，
       保证与站内其他页面同宽、同左右边距，点来点去不会左右跳。
     · 参考站的做法是「一个页面 6 张卡平铺」。我们保持同样信息密度，
       但卡片用细边框 + 极浅 hover，不用阴影堆叠 —— 去掉「数据大屏」的观感。

   注意：本页是**构建期静态**，不接云库（没有 data-cloud / data-shape）。
   行业场景文案是逐条改写过的内容，不是可枚举的数据行，进云库只会多一层
   「快照与云数据谁为准」的歧义。
   ══════════════════════════════════════════════════════════════════════ */
.ind-detail {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 34px 0 60px;
}

/* ---- 左栏：51 个行业的分组导航 ---- */
.ind-side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.ind-side-head {
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted-fg);
}
.ind-group { margin-bottom: 13px; }
.ind-gtitle {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-fg);
}
.ind-items { display: block; }
.ind-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.ind-item:hover { background: var(--secondary); }
.ind-item .c {
  flex: none;
  width: 24px;
  font-size: 11.5px;
  color: var(--muted-fg);
  font-variant-numeric: tabular-nums;
}
.ind-item.is-active {
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
}
.ind-item.is-active .c { color: var(--primary-dark); }

/* ---- 右栏：行业标题 + 场景卡 ---- */
.ind-main { min-width: 0; }
.ind-crumb { margin-bottom: 16px; font-size: 13px; color: var(--muted-fg); }
.ind-crumb a { color: var(--muted-fg); text-decoration: none; }
.ind-crumb a:hover { color: var(--primary-dark); }
.ind-crumb i { padding: 0 7px; font-style: normal; }
.ind-h1 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.ind-lead {
  margin: 0;
  max-width: 64ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted-fg);
}
.ind-sub {
  margin: 26px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted-fg);
}
.ind-sub b { color: var(--fg); font-weight: 600; }

/* ---- 场景卡：输入 / 动作 / 输出 / 人工复核点 ---- */
.sc-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sc-card {
  padding: 20px 22px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sc-card:hover { border-color: #dcdcdc; box-shadow: var(--shadow-card); }
.sc-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.sc-num {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.sc-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.4;
}
.sc-meta { margin: 0 0 2px 24px; font-size: 12.5px; color: var(--muted-fg); line-height: 1.6; }
.sc-meta a { color: var(--muted-fg); text-decoration: underline; text-underline-offset: 2px; }
.sc-meta a:hover { color: var(--primary-dark); }
.sc-rows { margin-top: 10px; }
.sc-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.sc-row:first-child { border-top: 0; }
.sc-k { padding-top: 1px; font-size: 12.5px; font-weight: 600; color: var(--muted-fg); }
.sc-v { font-size: 14.5px; line-height: 1.65; color: var(--fg); }
/* 复核点是这条卡片最该被读到的一行 —— 用一点琥珀色提示，不加背景不加边框 */
.sc-row.is-check .sc-k { color: #946200; }

/* ---- 页脚翻页：上一个 / 下一个行业 ---- */
.ind-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.ind-pager a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  color: var(--fg);
  text-decoration: none;
}
.ind-pager a:hover { color: var(--primary-dark); }
.ind-pager .k { font-size: 12px; color: var(--muted-fg); }

@media (max-width: 1000px) {
  /* minmax(0, 1fr) 而不是 1fr —— 这是移动端横向溢出的根因：
     1fr 的最小尺寸是 auto（= 内容宽），横滑条里 51 个行业项约 8000px，
     会把整列（连带 <main> 与 .container）一起撑开，页面出现横向滚动。
     minmax(0,1fr) 允许列收缩到 0，宽度改由 overflow-x 接管。 */
  .ind-detail { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 0 46px; }
  .ind-side {
    position: static;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--border);
  }
  .ind-side-head { margin-bottom: 10px; padding-bottom: 0; border-bottom: 0; }
  /* 移动端不必把 51 个行业铺成一长条 —— 收成可横滑的一组，页面短回来 */
  .ind-groups { display: flex; gap: 16px; max-width: 100%; overflow-x: auto; padding-bottom: 8px; }
  .ind-group { flex: none; margin-bottom: 0; }
  .ind-gtitle { padding-left: 0; }
  .ind-items { display: flex; gap: 6px; }
  .ind-item {
    white-space: nowrap;
    padding: 5px 11px;
    border: 1px solid var(--border);
  }
  .ind-item.is-active { border-color: var(--primary); }
}
@media (max-width: 640px) {
  .sc-card { padding: 16px 16px 6px; }
  .sc-head { gap: 7px; }
  .sc-title { font-size: 15.5px; }
  .sc-meta { margin-left: 0; }
  .sc-row { grid-template-columns: 62px minmax(0, 1fr); gap: 10px; }
  .sc-v { font-size: 14px; }
  .ind-pager { flex-direction: column; gap: 10px; }
}

@media (max-width: 900px) {
  /* 窄屏的宽度链路（逐层量过，见 build/_probe_mobile_width.mjs）：
       .container            20px  ← 保留这一层，只让一次边
       .wb-stage            0
       .wb-body             20px  ← 与 container 重复，归零
       .wb-copy             0 / 右边 24px  ← 右边也归零
       .wb-monitor-bezel    8px  ← 屏幕框自己的边，属于器件不算布局
     归零前：390 的屏被吃掉 96px，屏幕只剩 294px；归零后拿到 342px。
     另把 .wb-copy 的底部 padding 压到 18px —— 设备块和文案之间
     不需要双份间距（.wb-body 的 margin-top 已经给了一份）。 */
  .wb-body { padding: 0; }
  .wb-copy { padding: 0 0 18px; }
  .wb-device { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   v14.6 · 客户案例板块「商务化」覆盖层

   用户反馈：「重新优化一下客户案例板块，更商务和专业一些。」

   「不商务」不是一个笼统的观感，拆开是六件具体的事（逐条对应用户看到
   的那几个截图位置）：

   ① **三个大指标是绿的**。绿色在本站是「行动色」（按钮、链接、强调），
      放在几十号字的大数字上，观感从「咨询报告」滑向「产品营销页」。
      商务口径：数字用正文墨色，绿色只留一根 2px 短下划线做点缀 ——
      强调靠字号和位置，不靠颜色。
   ② **序号 01 装在绿色圆角方块里**。那是 UI 徽章，不是报告章节号。
      改成「细线方框 + 墨色等宽数字」，像审计报告里的条款编号。
   ③ **卡片 16px 大圆角 + 双向投影**，偏「卡片式营销」。
      商务卡片是**方正、贴地、靠一根分隔线说话**：圆角收到 8px，投影降一档，
      标题区与正文之间加一道横向细分隔线。
   ④ **虚线框**（前置条件 / 起步建议 / 出处）看着像「草稿 / 待填」。
      全部改实线浅灰底。
   ⑤ **绿色撒得到处都是**（图标、序号、标签、指标、列表圆点、引用条）。
      收敛成：正文灰阶 + 单点强调 —— 只有「改造后」和关键指标用绿。
   ⑥ **索引胶囊是彩色 pill + 图标**，偏轻快。改成行业名 + 关键指标的
      「表格行」观感：左对齐、等宽、下方一根细线。

   这一层放在文件末尾而不是就地改原规则：原规则仍有别的页面在用，
   覆盖层可以只作用于 /cases/，且以后要回退只需删掉这一段。
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- ① 索引条：从「彩色胶囊」变成「表格行」 ---------- */
.case-idx-wrap {
  padding: 0; background: #fff;
  border-bottom: 1px solid var(--border);
}
.case-idx {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 0; align-items: stretch;
}
.case-idx-lead {
  display: flex; align-items: center;
  padding: 14px 0; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted-fg);
}
.case-idx-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; min-width: 0;
}
.case-idx-link {
  display: flex; align-items: center; gap: 0;
  padding: 13px 16px 13px 0; border-radius: 0;
  background: transparent; border: 0; border-top: 2px solid transparent;
  text-decoration: none; color: var(--ink);
  transition: border-color .16s, background .16s;
  min-width: 0;
}
.case-idx-link:hover {
  border-color: transparent; border-top-color: var(--primary);
  background: rgba(40, 184, 148, .045); transform: none;
}
/* 行业图标在商务口径里是噪音：行业名本身已经说清楚了。整块不显示，
   但 DOM 保留（_industry_icon 仍被 pages.py 调用，删 span 要动渲染层，
   收益为零）。 */
.case-idx-link .cil-ico { display: none; }
.case-idx-link .cil-txt {
  display: grid; gap: 3px; min-width: 0; padding-left: 16px;
  border-left: 1px solid var(--border);
}
.case-idx-link .cil-c {
  font-size: 13.5px; font-weight: 700; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-idx-link .cil-i {
  font-size: 12px; color: var(--muted-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .case-idx { grid-template-columns: 1fr; }
  .case-idx-lead { padding: 12px 0 0; }
  .case-idx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-idx-link { border-top-width: 1px; border-top-color: var(--border); }
  .case-idx-link .cil-txt { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .case-idx-list {
    display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%;
  }
  .case-idx-link { flex: none; padding-right: 18px; }
}

/* ---------- ② 案例卡：方、贴地、靠线分隔 ---------- */
.case-card {
  padding: 36px 40px 30px; border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
@media (max-width: 640px) { .case-card { padding: 26px 20px 22px; } }

/* 序号：细线方框 + 等宽墨色数字（审计报告条款号的观感） */
.case-detail-head { padding-left: 58px; }
.case-no {
  width: 40px; height: 40px; border-radius: 4px;
  font-size: 15px; font-weight: 700; letter-spacing: 0;
  color: var(--ink); background: #fff;
  border: 1px solid rgba(25, 26, 35, .18);
}
/* 标题与元信息之间加一道分隔线 —— 报告感主要来自这道线 */
.case-detail-head h2 {
  margin-top: 14px; padding-bottom: 0;
  font-size: clamp(1.4rem, 2.3vw, 1.85rem); letter-spacing: -.02em;
}
.case-head { gap: 12px; }
.case-client { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; }
.case-ind {
  background: transparent; border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--muted-fg);
}

/* 元信息：从「三块灰底卡」改成「三列表格」——去掉底色的卡片感 */
.case-meta {
  margin-top: 20px; gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cm-item {
  padding: 14px 18px 14px 0; border-radius: 0; background: transparent;
  border: 0; border-left: 1px solid var(--border);
  font-size: 13px; color: var(--ink); line-height: 1.6;
}
.cm-item:first-child { border-left: 0; padding-left: 0; }
.cm-item b {
  margin-bottom: 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted-fg);
}
@media (max-width: 700px) {
  .case-meta { grid-template-columns: 1fr; }
  .cm-item { padding: 12px 0; border-left: 0; border-top: 1px solid var(--border); }
  .cm-item:first-child { border-top: 0; }
}

/* ---------- ③ 指标带：数字用墨色，绿色只做一根短下线 ---------- */
.case-metrics-lg {
  margin-top: 0; padding: 24px 0;
  border-top: 0; border-bottom: 1px solid var(--border);
}
.case-metrics-lg .metric { padding: 0 24px 0 22px; border-left: 1px solid var(--border); }
.case-metrics-lg .metric:first-child { padding-left: 0; }
.case-metrics-lg .metric .m-val {
  position: relative; display: inline-block;
  padding-bottom: 7px;
  color: var(--ink); font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
/* 短下划线：宽度随文字走（不是整格），长度 = 文字宽度的 34%，最短 26px */
.case-metrics-lg .metric .m-val::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: max(26px, 34%); height: 2px; background: var(--primary);
}
.case-metrics-lg .metric .m-lbl {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted-fg);
}
@media (max-width: 700px) {
  .case-metrics-lg { padding: 0; }
  .case-metrics-lg .metric { padding: 16px 0; }
  .case-metrics-lg .metric:nth-child(n+3) { border-top: 0; }
  .case-metrics-lg .metric:nth-child(even) { padding-left: 18px; }
  .case-metrics-lg .metric .m-val { font-size: 26px; }
}

/* ---------- ④ 正文块：去绿、去虚线的报告式 ---------- */
/* 三段（困境 / 方案 / 配置）排成三列 + 成效表通栏。
   原来排两列：困境、方案占第一行，配置独占第二行左格 —— 右格空着，
   整块看着「缺了一角」。改三列就没有空洞，且更像一份报告的分节。
   成效表必须通栏：三列宽（场景 / 改造前 / 改造后）挤在半格里读不全。 */
.case-story {
  margin-top: 32px; gap: 28px 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .case-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case-block { padding: 0 0 0 16px; border-left: 1px solid var(--border); }
.case-block h4 {
  gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted-fg); text-transform: none;
}
.cb-n { color: var(--ink); font-size: 11.5px; letter-spacing: .08em; }
.case-block p { margin-top: 12px; font-size: 13.5px; line-height: 1.85; }
.case-block li { font-size: 13.5px; line-height: 1.78; }
.case-block li::before { content: ""; width: 4px; height: 1px; margin-top: 11px; flex: none; background: var(--ink); }
.case-block li { display: flex; gap: 9px; align-items: flex-start; }

/* 困境：红棕左边线 → 中性细线 + 无底色 */
.case-problems { gap: 0; margin-top: 14px; }
.cp-item {
  padding: 14px 0 14px 0; border-radius: 0; background: transparent;
  border-left: 0; border-top: 1px solid var(--border);
}
.cp-item:first-child { border-top: 0; padding-top: 0; }
.cp-item h5 { font-size: 13px; font-weight: 700; }
.cp-item p { margin-top: 5px; font-size: 13px; line-height: 1.8; }

/* 「同时，把制度交给……」这类附注：去掉绿色底，改左侧细线 */
.case-note {
  margin-top: 16px; padding: 0 0 0 14px; border-radius: 0;
  background: transparent; border: 0; border-left: 2px solid var(--ink);
}
.case-note h5 { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.case-note p { margin-top: 6px; font-size: 13px; line-height: 1.78; }

.case-block .case-highlight {
  margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--primary);
  font-size: 13.5px; font-weight: 600;
}

/* 成效表：表头行加深，数字列等宽 —— 报表观感 */
.case-story .tbl th {
  background: var(--secondary); font-size: 12.5px; letter-spacing: .04em;
  color: var(--ink); font-weight: 700;
}
.case-story .tbl td { font-variant-numeric: tabular-nums; }
.case-story .tbl tbody tr td:nth-child(3) { color: var(--ink); font-weight: 600; }

/* ---------- ⑤ 前后对比：从「渐变蓝卡」变成「报表双栏」 ---------- */
.case-compare {
  margin-top: 30px; padding: 22px 0 0; border-radius: 0;
  background: transparent; border: 0; border-top: 1px solid var(--border);
}
.cc-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted-fg);
}
.cc-row { margin-top: 16px; gap: 0; grid-template-columns: 1fr 44px 1fr; }
.cc-cell {
  padding: 16px 0; border-radius: 0; background: transparent; border: 0;
}
.cc-cell span { font-size: 11px; letter-spacing: .1em; }
.cc-cell b { margin-top: 6px; font-size: 15px; line-height: 1.55; }
.cc-before b { color: var(--muted-fg); }
.cc-after { background: transparent; border: 0; padding-left: 0; }
.cc-after span { color: var(--muted-fg); }
.cc-after b { color: var(--ink); font-weight: 800; font-size: 17px; }
.cc-cell.cc-before { padding-right: 24px; }
.cc-after { border-left: 1px solid var(--border); padding-left: 24px; }
/* 箭头不能用 --border：它和背景几乎同色，等于没有。
   用中灰 + 等宽 + 稍大字号，让它成为一个「方向标记」而不是装饰。 */
.cc-arrow {
  font-size: 17px; line-height: 1; color: rgba(25, 26, 35, .34);
  justify-self: center; align-self: center;
}
.cc-note {
  margin-top: 0; padding: 12px 0 0; border-top: 1px solid var(--border);
  font-size: 12.5px; letter-spacing: .01em;
}
@media (max-width: 700px) {
  .cc-after { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
  .cc-cell.cc-before { border-bottom: 1px solid var(--border); padding-bottom: 16px; }
  .cc-row { grid-template-columns: 1fr; gap: 0; }
  .cc-arrow { transform: rotate(90deg); justify-self: start; margin: -2px 0 0 0; }
}

/* ---------- ⑥ 尾部：价值 / 可复制性，去掉虚线框 ---------- */
.case-foot {
  margin-top: 32px; padding-top: 26px;
  gap: 32px; grid-template-columns: 1.05fr 1fr;
}
.a-quote {
  margin: 14px 0 0; padding: 0 0 0 16px; border-radius: 0;
  background: transparent; border-left: 2px solid var(--ink);
  font-size: 15.5px; font-weight: 700; line-height: 1.7; letter-spacing: -.01em;
}
.case-value p { margin-top: 12px; font-size: 13.5px; line-height: 1.8; }
.case-value .tag-row { margin-top: 16px; }
.case-value .tag {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 9px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; color: var(--ink);
}
.case-repl { gap: 0; }
.cr-item {
  padding: 16px 0; border-radius: 0; background: transparent;
  border: 0; border-top: 1px solid var(--border);
}
.cr-item:first-child { border-top: 0; padding-top: 0; }
.cr-item h5 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--ink);
}
.cr-item p { margin-top: 6px; font-size: 13px; line-height: 1.78; }

/* 真实工作场景截图：从「圆角浮卡」变成「带细框的插图」 */
.case-shots { margin-top: 30px; }
.cs-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.cs-title span { font-size: 12px; }
.case-shots-grid { margin-top: 15px; gap: 16px; }
.case-shot img {
  border-radius: 4px; border: 1px solid var(--border); box-shadow: none;
}
.case-shot figcaption {
  padding-left: 0; border-left: 0; font-size: 12.5px; line-height: 1.7;
}

/* ---------- ⑦ 成效总览 / 起步建议：方卡 + 实线 ---------- */
.case-cap {
  padding: 24px 0 0; border-radius: 0; background: transparent;
  border: 0; border-top: 1px solid var(--border);
}
.case-cap h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.case-cap p { margin-top: 10px; font-size: 13.5px; line-height: 1.82; }
.case-cap .cc-refs { font-size: 12px; color: var(--muted-fg); }
.case-cap .cc-result {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600;
}
.case-cap-grid { gap: 28px 34px; }
@media (max-width: 640px) { .case-cap { padding: 20px 0 0; } }

.case-roles-fig { margin-top: 26px; }
.case-roles-fig img { border-radius: 4px; box-shadow: none; }
.case-src { border-top: 1px solid var(--border); }

/* ---------- ⑧ 正文小标签：编号与文字之间留均匀的缝 ---------- */
.case-block h4 .cb-n {
  display: inline-block; min-width: 20px; margin-right: 2px;
  color: var(--muted-fg); font-weight: 700; letter-spacing: .08em;
}
/* 「价值提炼」这类带编号的 h4 也走同一档字号 */
.case-value h4 { font-size: 12.5px; letter-spacing: .1em; }
.cc-label .cb-n {
  margin-right: 10px; color: var(--muted-fg); letter-spacing: 0;
}

/* ---------- ⑨ 可复制性三项：编号式小标题 ---------- */
.cr-item { position: relative; }
.cr-item h5 {
  display: flex; align-items: center; gap: 10px;
}
.cr-item h5::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ══════════════════════════════════════════════════════════════════════
   v14.7 · 客户案例板块「与行业方案同排版」重做

   用户原话：「客户案例参考行业方案的排版效果，做到整个页面美观、大气、商务，
   不是现在的多个字体大小、排版错位、没有统一对齐、模块错位等。」

   先诊断。逐条量了 /cases/ 与 /scenarios/<code>/ 的实际字号（1440 宽）：

     /cases/ 正文区一共出现了 **11 档字号**：
       44·38.4·32·16.56·15.5·15·14.5·13.5·13·12.5·11.5px
     光「小标题 / 标签」这一族就有 13 / 12.5 / 12 / 11.5 四个值，
     差值 0.5–1.5px —— 屏幕上分不出来，观感上只是「乱」。
     而且 v14.6 那版把每一块都改成了「上细线 + 零内边距」的报告风，
     块与块之间只剩 28–32px 的间距，读者看到的是一条又一条横线。

     /scenarios/<code>/ 正文区只有 **6 档并有序**：
       32(h1) · 16(lead) · 15(卡标题) · 14(meta) · 13.5(v) · 12.5(k)
     每张卡是「顶线 2px 绿 + 标题行 + 键值行」，rows 用 grid 对齐：

       .sc-row { display: grid; grid-template-columns: 72px minmax(0,1fr) }

     键列固定 72px —— 这就是「统一对齐」的来源：所有卡、所有行的
     值都从同一条竖线上起步。案例页的困境/方案块没有任何一条这样的
     基准线，所以看起来「错位」。

   ------------------------------------------------------------------
   所以这一版做四件事，全部照行业方案的做法来：

   ① **字号收成一套模数**（1.2 倍音阶 + 两个等宽件），11 档并成 7 档，
      并去掉所有 0.5px 的中间值。模数写在最上面，下面一律引用变量，
      以后再加模块也不会各写各的：

        --cs-l (标题)   28px    x1.75
        --cs-m (卡标题) 16px    x1.00  ← 基准
        --cs-b (正文)   14px    x0.875
        --cs-s (注释)   12.5px  x0.78
        --cs-k (键标签) 12.5px  等宽 + 字距，与 --cs-s 同值
        --cs-n (数字)   40→28px 等宽（.cs-metrics）

   ② **建一条全局对齐基准线**。行业方案的 72px 键列搬到案例页：
      正文块的 h4 行（困境 / 方案 / 落地配置 …）与 .case-meta 的
      键值行共用同一条网格 —— h4 排在键列里，内容排在值列里，
      于是「01 业务困境」这四个字和每一对「采购席位 / 使用部门」
      的左边界在同一条竖线上。这条线是整页「对齐感」的骨架。

   ③ **模块间距收成四级**（不是随手给值）：
        --cs-g1  16px  同一个模块内部（标题↔内容）
        --cs-g2  22px  相邻子项（三条困境之间）
        --cs-g3  36px  模块之间（指标带 ↔ 正文 ↔ 对比 ↔ 尾部）
        --cs-g4  56px  章节之间（案例与案例）
      同时给每个模块加一个「模块序号 + 标题 + 右侧细线」的抬头，
      这样 36px 的间距才读得出是「换了一节」，而不是「多了一条线」。

   ④ **商务口径保留**（v14.6 定的、用户认可的部分不动）：墨色数字 +
      绿色短下线、实线不虚线、方角不圆角、绿色只做单点强调。

   注意：这一段整体放在文件末尾，靠级联覆盖前面的 v14.6 层与更早的原规则。
   只作用于 /cases/（页面 body 带 class，见下方 :where() 的用法）。
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- ⓪ 模数令牌 ---------- */
:root {
  /* 字号：7 档，比例约 1.2。所有案例页字号只能从这里取。 */
  --cs-l:   1.75rem;    /* 28px  章节 / 案例标题 */
  --cs-m:   1rem;       /* 16px  卡标题（基准） */
  --cs-b:   0.875rem;   /* 14px  正文 */
  --cs-s:   0.781rem;   /* 12.5px 注释 / 键标签 */
  --cs-n:   clamp(1.75rem, 2.6vw, 2.5rem);  /* 28→40px 指标数字 */
  /* 间距：四级 */
  --cs-g1: 16px;
  --cs-g2: 22px;
  --cs-g3: 36px;
  --cs-g4: 56px;
  /* 对齐基准线：键列宽度。正文块 h4 与元信息 b 共用这一条。
     ⚠️ 必须放得下最长的一个键标签。实测 12.5px 中文单字约 12.6px：
        「面临的挑战」5 字 ≈ 63px · 「入库与配置」5 字 ≈ 63px ·
        「业务困境 / 解决方案 / 落地配置」4 字 ≈ 51px。
        72px 会让 5 字标签折行，取 96px 留足余量（含字距 0.04em 的增量）。 */
  --cs-key: 96px;
  --cs-hair: #e3e5e8;   /* 比 --border 再淡半档的中性细线 */
}

/* ---------- ① 页头：与行业方案同宽同节奏 ---------- */
/* 行业方案的页头是「面包屑 → 大标题 → 一句 lead → 一条说明」，案例页
   原本多出一排三格指标卡（.stat-band）。它不是不行，但与下面的
   .case-metrics-lg 是同一件事说两遍，而且 3 个 38.4px 数字的卡片夹在
   标题和正文之间，把「商务」拉回「营销页」。
   处理：保留（它是全页汇总，有信息量），但降一档字号、去掉卡片边框，
   改成行业方案那种「一条数据带」—— 与正文的 .case-metrics-lg 拉开层级。 */
.page-hero { padding-top: calc(var(--header-h) + 52px); padding-bottom: 44px; }
.page-hero .crumb { margin-bottom: 14px; }
.page-hero h1 {
  font-size: clamp(2rem, 3.2vw, 2.6rem); letter-spacing: -.024em;
}
.page-hero .lead {
  margin-top: 14px; font-size: var(--cs-m); line-height: 1.7; max-width: 62ch;
}
.page-hero .hero-meta { margin-top: 26px; }
.page-hero .stat-band { margin-top: 0; gap: 0; }
.page-hero .stat {
  padding: 0 26px; border: 0; border-radius: 0; background: transparent;
  border-left: 1px solid var(--border);
}
.page-hero .stat:first-child { border-left: 0; padding-left: 0; }
.page-hero .stat .num { font-size: clamp(1.6rem, 2.2vw, 2rem); }
.page-hero .stat .lbl {
  margin-top: 8px; font-size: var(--cs-s); font-weight: 500;
  color: var(--muted-fg); letter-spacing: .02em;
}
@media (max-width: 900px) {
  .page-hero .stat { padding: 14px 0; border-left: 0; }
  .page-hero .stat:nth-child(n+2) { border-top: 1px solid var(--border); }
  .page-hero .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ② 索引条：真正吸顶，且与正文同一基准线 ---------- */
/* 原来 .case-idx 是 88px + 1fr 的两列。88px 是拍脑袋给的：实测「按行业查看」
   五个字 12px 下宽 60px，88px 让标题与下面案例卡的「01」左边界差了 26px。
   改成 --cs-key(72px) 后，索引的行业名列与案例卡正文的值列落在同一条线上。 */
.case-idx { grid-template-columns: var(--cs-key) minmax(0, 1fr); }
.case-idx-lead { font-size: var(--cs-s); letter-spacing: .08em; }
.case-idx-link { padding: 14px 18px 14px 0; }
.case-idx-link .cil-txt { padding-left: 18px; }
.case-idx-link .cil-c { font-size: var(--cs-b); }
.case-idx-link .cil-i { font-size: var(--cs-s); }

/* ---------- ③ 案例卡：统一内边距 + 章节抬头 ---------- */
.case-shell { margin-top: var(--cs-g4); }
.case-shell:first-of-type { margin-top: 0; }
.case-card {
  padding: 40px 44px 36px; border-radius: 6px;
  border: 1px solid var(--border); box-shadow: none;
}
@media (max-width: 900px) { .case-card { padding: 32px 28px 28px; } }
@media (max-width: 640px) { .case-card { padding: 26px 20px 24px; } }

/* 序号格：与正文键列同宽同起点，整页最左侧的竖线由它起 */
.case-detail-head { padding-left: var(--cs-key); }
.case-no {
  width: 44px; height: 44px; border-radius: 2px;
  font-size: var(--cs-m); font-weight: 700; letter-spacing: 0;
  color: var(--ink); background: transparent;
  border: 1px solid rgba(25, 26, 35, .22);
  font-variant-numeric: tabular-nums;
}
.case-head { gap: 12px; align-items: center; }
/* 客户名 = 这张卡的「谁的案例」，是抬头里最该被先看到的一行。
   原来 14px（--cs-b）与下面的导语同号，读起来像正文而不是标题。
   放到 20px（--cs-l 与 --cs-m 之间的一档）并加重到 800：
   比导语明显大，又不超过 28px 的案例标题，层级是 客户名 < 案例标题。 */
.case-client {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.005em;
  line-height: 1.3; color: var(--ink);
}
.case-ind {
  padding: 3px 9px; border-radius: 2px; font-size: var(--cs-s);
  font-weight: 500; letter-spacing: .04em;
  color: var(--muted-fg); background: transparent; border: 1px solid var(--border);
}
/* 案例标题：全页最大的一级。**一行放下**。
   原先 max-width: 24ch（≈374px）是为了给两行标题均分、避免孤字（30ch 时
   「压缩到 3 分钟」只剩「钟」独行）。但那个约束的代价是：一旦某句标题
   长到 25 字（「4 个年费席位，覆盖校招简历筛选与 40 余份制度查询」），
   就会在「校招简/历筛选」处硬折，且折点落在词中间，非常难看。

   实测数据（1440 视口，_probe_case_txt.mjs / _probe_sol_t.mjs）：
     /cases/      标题自然宽 401–658px，可用宽度 952px
     /solutions/  标题自然宽 484–647px，可用宽度 888px
   即最长的一句也只用掉 69% 的可用宽度 —— 根本不需要折行。
   所以：放开 max-width，去掉 text-wrap: balance，让标题自然单行；
   万一将来出现超长标题，word-break 兜底也不会切在词中间。 */
.case-detail-head h2 {
  margin-top: 16px; font-size: var(--cs-l); line-height: 1.34;
  letter-spacing: -.02em; max-width: none;
  overflow-wrap: break-word;
}
.case-detail-head .lead {
  margin-top: 14px; font-size: var(--cs-b); line-height: 1.82;
  color: var(--muted-fg); max-width: 68ch;
}

/* ---------- ④ 元信息条 = 「标签在上、值在下」的三栏 ---------- */
/* 这一块原来照搬行业方案的「96px 键列 + 1fr 值列」两列同行排法，
   实测下来三处都别扭（_probe_case_txt.mjs）：

     ① 键标签自然宽只有 50px（「采购席位」），却占了 96px 的列 →
        键与值之间空出 46px 死白，读起来两个词是断开的；
     ② 三格各 317px，但每格是「键列定宽 + 值列吃掉剩下的」，
        于是「校招筛选 · 制度问答」（自然宽 124px）和「人力资源部」
        （70px）两格的视觉重心完全不同，整条看起来是歪的；
     ③ align-items: baseline 在值折成两行时会把键一起往下拖。

   换成**标签在上、值在下**的堆叠式（和 /pricing/ 的 .price-note、
   行业方案的 .sc-row 抬头同构），理由：
     · 标签是分类、值是内容，读的顺序天然是先分类后内容；
     · 每格自带标题，三格重心一致，不再依赖「键列对齐」这种脆弱结构；
     · 值列拿到整格宽度（317px），最长的一条 144px 只用 45%，
       更长的部门名（「社群与内容运营」98px / 「基地 / 采购 / 销售」107px）
       也绝不会折行；
     · 三格等分 + 竖线分隔 + 上下的发丝线，构成一条完整的「信息条」，
       与下面指标带的等分三格形成呼应。 */
.case-meta {
  margin-top: var(--cs-g2); gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cs-hair);
  border-bottom: 1px solid var(--cs-hair);
}
.cm-item {
  display: block;
  padding: 16px 24px 17px 0;
  border-left: 1px solid var(--cs-hair);
  font-size: var(--cs-b); color: var(--ink); line-height: 1.6;
  min-width: 0;
}
.cm-item:first-child { border-left: 0; }
/* 从第二格起补左内边距，让三格内容与各自竖线保持同样的 24px 距离 ——
   第一格左边界对齐页面基准线（不缩进），所以只给 padding-right。 */
.cm-item + .cm-item { padding-left: 24px; }
.cm-item b {
  display: block; margin: 0 0 6px;
  font-size: var(--cs-s); font-weight: 500;
  letter-spacing: .06em; color: var(--muted-fg); white-space: nowrap;
}
@media (max-width: 1000px) {
  .case-meta { grid-template-columns: 1fr; }
  .cm-item { padding: 14px 0; border-left: 0; border-top: 1px solid var(--cs-hair); }
  .cm-item + .cm-item { padding-left: 0; }
  .cm-item:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  .cm-item b { margin-bottom: 4px; }
}
/* ---------- ⑤ 指标带：等宽数字 + 绿色短下线，四列等分 ---------- */
/* v14.6 已经是「墨色数字 + 绿下线」，保留。这里只做三处统一：
   ① 与元信息之间不留双份间距（元信息的底边线就是它的上边线）；
   ② 三格改成「等分 + 每格等左内边距」，不再按内容宽度分配 ——
      三格宽度不同是「排版错位」最直接的来源；
   ③ 标签统一 --cs-s，两行以内，行高一致。

   /solutions/ 的官方案例卡是 .case-metrics-lg 的**两格**版本，整数等分后
   两格各占一半、中间一条竖线，右侧半格空着 —— 看起来像漏了一格。
   两格时改「内容宽度 + 一条竖线」，不再等分：
     grid-auto-columns: auto + justify-content: start
     让每格按内容宽度排，竖线紧跟在数字列右侧。 */
.case-metrics-lg {
  margin-top: 0; padding: var(--cs-g3) 0;
  border-top: 0; border-bottom: 1px solid var(--cs-hair);
  grid-auto-columns: minmax(0, 1fr);
  justify-content: start;
}
/* 只有两格时按内容宽度排（/solutions/ 用），三格及以上仍等分 */
.case-metrics-lg > .metric:nth-child(2):last-child { grid-auto-columns: auto; }
.case-metrics-lg:has(> .metric:nth-child(2):last-child) {
  grid-auto-columns: minmax(0, 320px);
  justify-content: start;
}
.case-metrics-lg .metric {
  padding: 0 28px 0 28px; border-left: 1px solid var(--cs-hair);
}
.case-metrics-lg .metric:first-child { padding-left: 0; }
.case-metrics-lg .metric:last-child { padding-right: 0; }
.case-metrics-lg .metric .m-val {
  padding-bottom: 9px; font-size: var(--cs-n); font-weight: 800;
  line-height: 1.02; letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.case-metrics-lg .metric .m-lbl {
  margin-top: 13px; font-size: var(--cs-s); line-height: 1.66;
  color: var(--muted-fg); max-width: 26ch;
}
@media (max-width: 700px) {
  .case-metrics-lg { padding: 0; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-metrics-lg .metric { padding: 18px 0; border-left: 0; }
  .case-metrics-lg .metric:nth-child(n+3) { border-top: 1px solid var(--cs-hair); }
  .case-metrics-lg .metric:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--cs-hair); }
}

/* ---------- ⑥ 正文块：48/1fr 键值网格，与元信息同一条基准线 ---------- */
/* 这是全页「统一对齐」的核心改动。
   原来 .case-block 是「2px 绿左边线 + h4 横排在外面」，h4 与内容都从
   同一个 x 起步，读者看不出「这是标题 / 这是内容」的层级，只能靠字号差
   —— 而字号差只有 0.5px（13 与 13.5）。
   改成行业方案的键值网格：h4 进键列（12.5px 灰 + 字距），内容进值列
   （14px 墨色/灰色），左边界统一在 72px 处。层级由「列」建立，
   不再依赖那 0.5px 的字号差。 */
.case-story {
  margin-top: var(--cs-g3); gap: var(--cs-g3) 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1000px) { .case-story { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cs-g3) 32px; } }
@media (max-width: 820px) { .case-story { grid-template-columns: 1fr; gap: var(--cs-g3); } }

/* 键值网格。要点：h4 占 key 列，**值列的多个子元素必须能自然堆叠**。
   grid 本身做不到 —— 同一网格单元里放多个子元素，它们各自找空位，
   数量一多就互相压。所以这里用 flex：
     · .case-block 是 row，h4 固定 --cs-key 宽，其余子元素全部落在
       右侧的 .case-vals 里（构建期不加 wrapper 时的降级见下）。
   但 pages.py 产出的结构里值列子元素与 h4 是**兄弟**，没有 wrapper，
   所以用「h4 定宽 + 兄弟 flex:1 1 100% + wrap」来实现：
     第一行：h4(72px) + 第一个子元素(剩余宽)
     后续子元素因 flex-basis:100% 自动换行，且 margin-left:72px 对齐键列。
   这样既保住 72px 基准线，又不需要动 HTML。 */
.case-block {
  padding: 0; border-left: 0;
  display: flex; flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--cs-g1);
}
.case-block > h4 {
  flex: 0 0 var(--cs-key); width: var(--cs-key);
  margin: 0; padding: 2px 0 0;
  font-size: var(--cs-s); font-weight: 500;
  letter-spacing: .04em; color: var(--muted-fg); line-height: 1.55;
  /* 键标签必须单行。--cs-key 是「基准列宽」，但个别页面（/solutions/ 的
     「面临的挑战」）会比它宽一点点；强制不换行 + 允许溢出 1–2px，
     比让它折成「面临的挑 / 战」好得多 —— 折行会同时破坏对齐感与可读性。 */
  white-space: nowrap;
}
.case-block > *:not(h4) { flex: 1 1 100%; min-width: 0; }
/* 第一个值元素与 h4 同行：靠 flex-basis 归零回填到第一行右侧 */
.case-block > h4 + * { flex: 1 1 0; margin-top: 0; }
/* 其余值元素换行后缩进 --cs-key，与值列左边界对齐 */
.case-block > *:not(h4):not(h4 + *) { margin-left: calc(var(--cs-key) + var(--cs-g1)); margin-top: var(--cs-g1); }
/* 通用的「值元素间距」：相邻值元素之间 16px */
.case-block > *:not(h4) + *:not(h4) { margin-top: var(--cs-g1); }
.case-block > h4 + * + * { margin-top: var(--cs-g1); }
.cb-n { color: var(--muted-fg); font-size: var(--cs-s); letter-spacing: .04em; font-weight: 600; }

.case-block p { margin: 0; font-size: var(--cs-b); line-height: 1.85; color: var(--muted-fg); }
.case-block ul { margin: var(--cs-g1) 0 0; display: grid; gap: 10px; }
.case-block li {
  font-size: var(--cs-b); line-height: 1.8; color: var(--muted-fg);
  display: flex; gap: 10px; align-items: flex-start;
}
.case-block li::before {
  content: ""; flex: none; width: 5px; height: 1px; margin-top: 12px;
  background: rgba(25, 26, 35, .38);
}
.case-block .case-flow {
  color: var(--ink); font-weight: 600; font-size: var(--cs-b);
  line-height: 1.8; letter-spacing: -.005em;
}

/* 困境三条：从「一堆横线」改成「编号 + 标题 + 说明」的层叠，
   三条之间只用 22px 间距（--cs-g2），不再各画一条线。 */
.case-problems { margin: var(--cs-g1) 0 0; display: grid; gap: var(--cs-g2); }
.cp-item {
  position: relative; padding: 0 0 0 22px;
  border: 0; border-radius: 0; background: transparent;
}
.cp-item::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: rgba(25, 26, 35, .34);
}
.cp-item h5 {
  font-size: var(--cs-b); font-weight: 700; color: var(--ink);
  line-height: 1.6; letter-spacing: -.005em;
}
.cp-item p { margin-top: 6px; font-size: var(--cs-b); line-height: 1.85; color: var(--muted-fg); }

.case-note {
  margin: var(--cs-g1) 0 0; padding: 0 0 0 16px; border-radius: 0;
  background: transparent; border: 0; border-left: 2px solid rgba(25, 26, 35, .5);
}
.case-note h5 { font-size: var(--cs-b); font-weight: 700; color: var(--ink); }
.case-note p { margin-top: 6px; font-size: var(--cs-b); line-height: 1.82; }

.case-block .case-highlight {
  margin: var(--cs-g1) 0 0; padding-left: 16px;
  border-left: 2px solid var(--primary);
  font-size: var(--cs-b); font-weight: 600; line-height: 1.78;
}

/* 成效表通栏：表头灰底，右列加墨 */
.case-story .case-block-wide { grid-column: 1 / -1; display: block; }
.case-story .case-block-wide h4 { margin-bottom: var(--cs-g1); }
.case-story .case-block-wide .tbl-wrap { margin: 0; }
.case-story .tbl { min-width: 0; font-size: var(--cs-b); }
.case-story .tbl th,
.case-story .tbl td { padding: 13px 18px; }
.case-story .tbl th {
  background: var(--secondary); font-size: var(--cs-s);
  letter-spacing: .04em; font-weight: 600; color: var(--muted-fg);
  border-bottom: 1px solid var(--border);
}
.case-story .tbl td { font-variant-numeric: tabular-nums; line-height: 1.7; }
.case-story .tbl tbody tr td:first-child { color: var(--ink); font-weight: 600; }
.case-story .tbl tbody tr td:nth-child(3) { color: var(--ink); font-weight: 600; }

/* ---------- ⑦ 截图区：与正文同宽的两栏，说明文字对齐左下 ---------- */
.case-shots { margin-top: var(--cs-g3); }
.cs-title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: var(--cs-m); font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
}
.cs-title span { font-size: var(--cs-s); font-weight: 400; color: var(--muted-fg); }
.case-shots-grid { margin-top: var(--cs-g1); gap: 20px; }
.case-shot img {
  border-radius: 3px; border: 1px solid var(--border); box-shadow: none;
  background: #fff;
}
.case-shot figcaption {
  margin-top: 10px; padding: 0; border: 0;
  font-size: var(--cs-s); line-height: 1.72; color: var(--muted-fg);
}

/* ---------- ⑧ 前后对比：报表双栏，与前一段共用基准线 ---------- */
.case-compare {
  margin-top: var(--cs-g3); padding: var(--cs-g2) 0 0; border-radius: 0;
  background: transparent; border: 0; border-top: 1px solid var(--cs-hair);
  display: grid; grid-template-columns: var(--cs-key) minmax(0, 1fr);
  gap: 0 var(--cs-g1); align-items: start;
}
.case-compare > * { grid-column: 2; }
.cc-label {
  grid-column: 1; grid-row: 1;
  font-size: var(--cs-s); font-weight: 500; letter-spacing: .04em;
  color: var(--muted-fg); line-height: 1.6;
}
.cc-label .cb-n { display: none; }
.cc-row { margin: 0; grid-column: 2; gap: 0; grid-template-columns: 1fr 52px 1fr; }
.cc-cell { padding: 0; border: 0; border-radius: 0; background: transparent; }
.cc-cell span {
  display: block; font-size: var(--cs-s); letter-spacing: .04em; color: var(--muted-fg);
}
.cc-cell b {
  display: block; margin-top: 8px; font-size: var(--cs-m);
  line-height: 1.5; color: var(--muted-fg); font-variant-numeric: tabular-nums;
}
.cc-before { padding-right: 26px; }
.cc-after { border-left: 1px solid var(--cs-hair); padding-left: 26px; background: transparent; }
.cc-after span { color: var(--muted-fg); }
.cc-after b { color: var(--ink); font-weight: 800; font-size: 1.25rem; }
.cc-arrow {
  justify-self: center; align-self: center;
  font-size: 16px; line-height: 1; color: rgba(25, 26, 35, .3);
}
.cc-note {
  grid-column: 2; margin: var(--cs-g1) 0 0; padding: 0; border: 0;
  font-size: var(--cs-s); line-height: 1.7; color: var(--muted-fg);
}
@media (max-width: 700px) {
  .case-compare { grid-template-columns: 1fr; }
  .case-compare > *, .cc-label, .cc-row, .cc-note { grid-column: 1; }
  .cc-label { margin-bottom: var(--cs-g1); }
  .cc-row { grid-template-columns: 1fr; gap: var(--cs-g1); }
  .cc-before { padding-right: 0; }
  .cc-after { border-left: 0; padding-left: 0; border-top: 1px solid var(--cs-hair); padding-top: var(--cs-g1); }
  .cc-arrow { justify-self: start; transform: rotate(90deg); }
}

/* ---------- ⑨ 尾部：价值提炼 + 可复制性，两栏同基准线 ---------- */
.case-foot {
  margin-top: var(--cs-g3); padding-top: var(--cs-g3);
  border-top: 1px solid var(--cs-hair);
  gap: 44px; grid-template-columns: 1.08fr 1fr;
}
.case-foot .case-block { display: block; }
.case-foot .case-block h4 { margin-bottom: var(--cs-g1); }
.a-quote {
  margin: 0; padding: 0 0 0 18px; border-radius: 0;
  background: transparent; border-left: 2px solid var(--ink);
  font-size: 1.15rem; font-weight: 700; line-height: 1.66; letter-spacing: -.012em;
  color: var(--ink);
}
.case-value p { margin-top: var(--cs-g1); font-size: var(--cs-b); line-height: 1.85; }
.case-value .tag-row { margin-top: var(--cs-g2); display: flex; gap: 8px; flex-wrap: wrap; }
.case-value .tag {
  padding: 4px 11px; border-radius: 2px; font-size: var(--cs-s);
  font-weight: 500; letter-spacing: .04em;
  color: var(--muted-fg); background: transparent; border: 1px solid var(--border);
}
.case-repl { gap: 0; }
.cr-item {
  padding: 15px 0; border-radius: 0; background: transparent;
  border: 0; border-top: 1px solid var(--cs-hair);
}
.cr-item:first-child { border-top: 0; padding-top: 0; }
.cr-item:last-child { padding-bottom: 0; }
.cr-item h5 {
  display: block; font-size: var(--cs-s); font-weight: 500;
  letter-spacing: .04em; color: var(--muted-fg);
}
.cr-item h5::after { content: none; }
.cr-item p { margin-top: 7px; font-size: var(--cs-b); line-height: 1.82; color: var(--muted-fg); }
@media (max-width: 900px) { .case-foot { grid-template-columns: 1fr; gap: var(--cs-g3); } }

/* ---------- ⑩ 成效总览 / 岗位图：与案例卡同节奏 ---------- */
.case-cap { padding: var(--cs-g2) 0 0; border-top: 1px solid var(--cs-hair); }
.case-cap h3 { font-size: var(--cs-m); font-weight: 700; letter-spacing: -.01em; }
.case-cap p { margin-top: 10px; font-size: var(--cs-b); line-height: 1.85; color: var(--muted-fg); }
.case-cap .cc-refs { font-size: var(--cs-s); color: var(--muted-fg); }
.case-cap .cc-result {
  margin-top: var(--cs-g1); padding-top: var(--cs-g1);
  border-top: 1px solid var(--cs-hair); font-size: var(--cs-b); font-weight: 600;
}
.case-cap-grid { gap: var(--cs-g3) 40px; }
.case-roles-fig { margin-top: var(--cs-g3); }
.case-roles-fig img { border-radius: 3px; border: 1px solid var(--border); box-shadow: none; }
.case-roles-fig figcaption { font-size: var(--cs-s); color: var(--muted-fg); }
.case-src { border-top: 1px solid var(--cs-hair); font-size: var(--cs-s); }

/* ---------- ⑪ 兜底：清掉旧的 0.5px 档字号，防止别处漏改 ---------- */
.page-hero .lead,
.case-detail-head .lead,
.case-block p, .case-block li, .cp-item p, .cr-item p,
.case-note p, .case-block .case-flow { font-size: var(--cs-b); }
.cp-item h5, .case-note h5 { font-size: var(--cs-b); }
.cc-note, .case-shot figcaption, .case-idx-link .cil-i { font-size: var(--cs-s); }

/* ==========================================================================
   v15 · 岗位应用案例（/cases/<slug>/ × 39 + /solutions/ 入口）
   --------------------------------------------------------------------------
   设计口径：**商业、成熟、去 AI 感**。落到具体规则上就是三条自缚：

     ① 不用大圆角彩色胶囊标签。AI 生成页的典型特征就是一排排圆角彩色 chip；
        这里所有「标签」都改成「细边框 + 深灰小字」，颜色只留给可点的当前项。
     ② 不用渐变底、不用发光、不用彩色阴影。分隔靠 1px 细线，层次靠留白与字号，
        强调色只出现一处（--j-wb 绿），出现第二次就说明用滥了。
     ③ 数字与编号一律等宽字体 + 固定列宽。菜单里 00…38 是四十几项的长列表，
        编号不对齐会整列看起来是歪的 —— 这是「数据册排版」和「落地页排版」的
        分水岭，也是这一版最主要的手工活。
   ========================================================================== */

/* 令牌挂在 .jobs-wrap 上 —— 它**同时**是 .jobs-nav 和 .jobs-main 的父级，
   所以两个子树都继承得到。第一版把令牌挂在 .jobs-page（= .jobs-main）上，
   结果父级 .jobs-wrap 的 var(--j-nav-w) 求值为空，grid-template-columns
   整条失效、退回单列 —— 而页面照样渲染得出来，只是左栏跑到内容上面去了。
   CSS 变量的作用域是**元素子树**，不是「同一段样式代码」：要用在同级或父级
   上的令牌，必须定义在它们的公共祖先。 */
.jobs-wrap,
.jobs-page {
  --j-hair: #e6e7e9;        /* 细线：比 --border 再浅一档，长列表里不刺眼 */
  --j-hair-2: #d8dade;
  --j-num: #9aa0a8;         /* 编号灰 */
  --j-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --j-nav-w: 268px;         /* 左栏宽度：39 项最长的是「审计内控与风控」7 字 */
  --j-wb: var(--primary);
}

/* ---------- ① 整页骨架：左栏常驻 + 右栏内容 ---------- */
.jobs-wrap {
  display: grid;
  grid-template-columns: var(--j-nav-w) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.jobs-main { min-width: 0; padding: 40px 0 96px 44px; }

/* ---------- ② 左栏菜单 ----------
   结构：栏头（标题+口径）→ 搜索 → 分组列表（每组一个小标题 + N 项）。
   三个「不能省」的细节：
     · position: sticky + 自身可滚（39 项 高度约 1300px，比视口高）
     · 搜索框是**真过滤**（app.js 里绑），不是装饰 —— 39 项已经多到需要找
     · 当前项用「左侧 2px 竖线 + 加粗」而不是「整条色块」——
       色块在大列表里像导航高亮，竖线更像目录里夹的书签，也更接近纸本文档 */
.jobs-nav {
  position: sticky;
  top: calc(var(--header-h, 64px) + 16px);
  max-height: calc(100vh - var(--header-h, 64px) - 32px);
  display: flex; flex-direction: column;
  border: 1px solid var(--j-hair);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.jobs-nav-head {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--j-hair);
  background: var(--secondary);
}
.jobs-nav-head h2 {
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: var(--ink); line-height: 1.4;
}
.jobs-nav-head p {
  margin-top: 6px; font-size: 12px; line-height: 1.65; color: var(--muted-fg);
}
.jobs-nav-head .jn-stat {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--j-hair-2);
  display: flex; gap: 14px; font-size: 12px; color: var(--muted-fg);
}
.jobs-nav-head .jn-stat b {
  font-family: var(--j-mono); font-size: 13px; font-weight: 600; color: var(--ink);
}
.jobs-search { padding: 12px 14px; border-bottom: 1px solid var(--j-hair); }
.jobs-search input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--j-hair-2); border-radius: 4px;
  font-size: 13px; font-family: inherit; color: var(--ink);
  background: #fff; outline: none;
}
.jobs-search input:focus { border-color: var(--j-wb); }
.jobs-search input::placeholder { color: #a8adb4; }

.jobs-nav-list { overflow-y: auto; padding: 8px 0 14px; }
.jobs-nav-group + .jobs-nav-group { margin-top: 6px; }
.jobs-nav-gt {
  padding: 10px 18px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #8a9098; text-transform: uppercase;
}
.jobs-nav-link {
  position: relative; display: block;
  padding: 6px 18px 6px 20px;
  font-size: 13.5px; line-height: 1.5; color: #4a4f57;
  border-left: 2px solid transparent;
}
.jobs-nav-link:hover { background: var(--secondary); color: var(--ink); }
.jobs-nav-link .jn-no {
  display: inline-block; width: 30px;
  font-family: var(--j-mono); font-size: 12px; color: var(--j-num);
}
.jobs-nav-link.on {
  border-left-color: var(--j-wb);
  background: var(--primary-tint);
  color: var(--primary-dark); font-weight: 600;
}
.jobs-nav-link.on .jn-no { color: var(--primary-dark); }
.jobs-nav-link.hide { display: none; }
.jobs-nav-group.hide { display: none; }
.jobs-nav-empty {
  padding: 18px; font-size: 12.5px; color: var(--muted-fg); text-align: center;
}
.jobs-nav-empty.hide { display: none; }

/* ---------- ③ 内容抬头 ----------
   抬头做成「编号 + 岗位名」两列对齐，下面是一条 hairline 分隔带放三个事实
   （覆盖角色 / 白皮书页码 / 大类）。刻意不做大标题横幅：
   39 个页面都是同一个模板，横幅越大越像生成的落地页。 */
.jobs-head { border-bottom: 1px solid var(--j-hair); padding-bottom: 24px; }
.jobs-crumb { font-size: 12.5px; color: var(--muted-fg); margin-bottom: 18px; }
.jobs-crumb a { color: var(--muted-fg); }
.jobs-crumb a:hover { color: var(--primary-dark); }
.jobs-crumb span { margin: 0 8px; color: #c4c8ce; }
.jobs-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.jobs-title .jt-no {
  font-family: var(--j-mono); font-size: 15px; font-weight: 600;
  color: var(--j-num); letter-spacing: .02em;
}
.jobs-title h1 { font-size: 32px; line-height: 1.25; letter-spacing: -.02em; }
.jobs-title .jt-group {
  align-self: center; padding: 3px 9px;
  border: 1px solid var(--j-hair-2); border-radius: 3px;
  font-size: 12px; color: var(--muted-fg);
}
.jobs-judge {
  margin-top: 16px; padding-left: 14px;
  border-left: 2px solid var(--j-wb);
  font-size: 15.5px; line-height: 1.8; color: var(--ink);
}
.jobs-facts {
  margin-top: 20px; display: grid; gap: 0 32px;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  border-top: 1px solid var(--j-hair);
}
.jobs-fact { padding: 13px 0; }
.jobs-fact + .jobs-fact { border-left: 1px solid var(--j-hair); padding-left: 24px; }
.jobs-fact dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: #8a9098; text-transform: uppercase;
}
.jobs-fact dd { margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--ink); }
.jobs-fact dd.mono { font-family: var(--j-mono); font-size: 13px; color: var(--muted-fg); }

/* ---------- ④ 区块通用 ---------- */
.jobs-sec { margin-top: 52px; scroll-margin-top: calc(var(--header-h, 64px) + 20px); }
.jobs-sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.jobs-sec-head .jh-n {
  font-family: var(--j-mono); font-size: 12px; font-weight: 600;
  color: var(--j-num); padding-top: 3px;
}
.jobs-sec-head h2 { font-size: 19px; line-height: 1.4; letter-spacing: -.01em; }
.jobs-sec-head .jh-note {
  margin-left: auto; font-size: 12.5px; color: var(--muted-fg);
}
.jobs-sec-lead {
  margin: -4px 0 20px; font-size: 14px; line-height: 1.8; color: var(--muted-fg);
  max-width: 76ch;
}

/* ---------- ⑤ 应用场景全景表 ----------
   39 张表结构完全同构（场景 / 需要输入 / 可辅助交付 / 人工或系统边界），
   所以这里可以放心地把列宽写死：换一个岗位也不用重排。
   第 4 列「边界」是这张表的重点（读者要拿它去说服合规），给它更淡的底色
   而不是更重的颜色 —— 淡底 = 「这是注记」，重色 = 「这是警告」，后者会
   让整张表看起来像风险清单。 */
.jobs-table-wrap {
  border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden;
}
.jobs-table-scroll { overflow-x: auto; }
.jobs-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.jobs-table th {
  padding: 11px 14px; background: var(--secondary);
  border-bottom: 1px solid var(--j-hair);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #6b7079; text-align: left; white-space: nowrap;
}
.jobs-table td {
  padding: 12px 14px; border-top: 1px solid var(--j-hair);
  font-size: 13.5px; line-height: 1.7; color: var(--ink); vertical-align: top;
}
.jobs-table tbody tr:first-child td { border-top: 0; }
.jobs-table td.jt-scene { font-weight: 600; }
.jobs-table td.jt-gate { color: var(--muted-fg); background: #fbfbfc; }
.jobs-table col.c1 { width: 20%; }
.jobs-table col.c2 { width: 24%; }
.jobs-table col.c3 { width: 27%; }
.jobs-table col.c4 { width: 29%; }

/* ---------- ⑥ 三个优先场景 ----------
   一条「一、二、三」的横向步进条 + 三张等宽卡。步进条不是装饰：
   白皮书的建议是「先做一个、跑稳了再扩」，所以顺序本身是信息。 */
.jobs-steps {
  display: flex; gap: 0; margin-bottom: 22px;
  border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden;
}
.jobs-step {
  flex: 1; min-width: 0; padding: 10px 14px;
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--muted-fg);
}
.jobs-step + .jobs-step { border-left: 1px solid var(--j-hair); }
.jobs-step .js-n {
  flex: none; font-family: var(--j-mono); font-size: 11.5px; font-weight: 600;
  color: var(--j-num);
}
.jobs-step .js-t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jobs-step.is-first { background: var(--primary-tint); color: var(--primary-dark); font-weight: 600; }
.jobs-step.is-first .js-n { color: var(--primary-dark); }

.jobs-scenes { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jobs-scene {
  display: flex; flex-direction: column;
  border: 1px solid var(--j-hair); border-radius: 6px; background: #fff;
  overflow: hidden;
}
.jobs-scene.is-first { border-color: var(--j-wb); }
.jobs-scene-head {
  padding: 14px 16px 13px; border-bottom: 1px solid var(--j-hair);
  display: flex; align-items: baseline; gap: 10px;
}
.jobs-scene-head .js-no {
  flex: none; font-family: var(--j-mono); font-size: 12px; font-weight: 600;
  color: var(--j-num);
}
.jobs-scene.is-first .js-no { color: var(--primary-dark); }
.jobs-scene-head h3 { font-size: 15px; line-height: 1.45; letter-spacing: -.005em; }
.jobs-scene-badge {
  margin-left: auto; flex: none; padding: 2px 7px;
  border: 1px solid var(--j-hair-2); border-radius: 3px;
  font-size: 11px; font-weight: 600; color: var(--muted-fg); white-space: nowrap;
}
.jobs-scene.is-first .jobs-scene-badge {
  border-color: var(--primary); color: var(--primary-dark); background: var(--primary-tint);
}
.jobs-scene-body { padding: 15px 16px 6px; flex: 1; }
.jobs-scene-body p { font-size: 13.5px; line-height: 1.78; color: #3f444b; }
.jobs-scene-kv { margin-top: 15px; border-top: 1px solid var(--j-hair); }
.jobs-scene-kv .jk {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--j-hair);
  font-size: 13px; line-height: 1.68;
}
.jobs-scene-kv .jk:last-child { border-bottom: 0; }
.jobs-scene-kv dt {
  font-size: 12px; font-weight: 600; color: #8a9098; padding-top: 1px;
}
.jobs-scene-kv dd { color: var(--ink); }
.jobs-scene-kv .jk-gate dd { color: var(--muted-fg); }

/* 图：站内既有客户端截图。做成 16:10 无圆角的「证据条」，
   而不是带阴影的卡片 —— 案例页的其他图已经是卡片语气，这里要能区分开。 */
.jobs-scene-fig { border-top: 1px solid var(--j-hair); background: var(--secondary); }
.jobs-scene-fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: left top;
  border-bottom: 1px solid var(--j-hair);
}
.jobs-scene-fig figcaption {
  padding: 9px 14px 11px; font-size: 12px; line-height: 1.6; color: var(--muted-fg);
}

/* ---------- ⑦ 四层能力 ---------- */
.jobs-cap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden; }
.jobs-cap-col { padding: 0; }
.jobs-cap-col + .jobs-cap-col { border-left: 1px solid var(--j-hair); }
.jobs-cap-col header {
  padding: 11px 15px; background: var(--secondary);
  border-bottom: 1px solid var(--j-hair);
  display: flex; align-items: baseline; gap: 8px;
}
.jobs-cap-col header .jc-lv {
  font-family: var(--j-mono); font-size: 11px; color: var(--j-num);
}
.jobs-cap-col header h4 { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.jobs-cap-col .jc-body { padding: 14px 15px 16px; }
.jobs-cap-col .jc-body p { font-size: 13px; line-height: 1.75; color: var(--ink); }
.jobs-cap-col .jc-body p + p {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--j-hair);
  font-size: 12.5px; color: var(--muted-fg);
}
.jobs-cap-col .jc-scenes { list-style: none; }
.jobs-cap-col .jc-scenes li {
  font-size: 13px; line-height: 1.65; color: var(--ink);
  padding-left: 12px; position: relative;
}
.jobs-cap-col .jc-scenes li + li { margin-top: 6px; }
.jobs-cap-col .jc-scenes li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 3px; height: 3px; background: var(--j-hair-2); border-radius: 50%;
}
.jobs-cap-col .jc-cond {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--j-hair);
  font-size: 12.5px; line-height: 1.7; color: var(--muted-fg);
}

/* ---------- ⑧ 试点建议 / 实施边界 ---------- */
.jobs-2col { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jobs-box { border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden; }
.jobs-box-head {
  padding: 11px 16px; background: var(--secondary);
  border-bottom: 1px solid var(--j-hair);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #6b7079;
}
.jobs-box-body { padding: 16px; }
.jobs-pilot p { font-size: 13.5px; line-height: 1.82; color: var(--ink); }
.jobs-pilot p + p { margin-top: 12px; }
.jobs-pilot .jp-metrics { color: var(--muted-fg); font-size: 13px; }
.jobs-limits { list-style: none; }
.jobs-limits li {
  padding: 9px 0 9px 14px; border-top: 1px solid var(--j-hair);
  font-size: 13px; line-height: 1.72; color: var(--ink); position: relative;
}
.jobs-limits li:first-child { border-top: 0; padding-top: 0; }
.jobs-limits li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 2px; height: 12px; background: var(--j-hair-2);
}
.jobs-limits li:first-child::before { top: 6px; }

/* ---------- ⑨ 资料来源 ---------- */
.jobs-srcs { list-style: none; counter-reset: js; }
.jobs-srcs li {
  counter-increment: js; position: relative;
  padding: 8px 0 8px 34px; border-top: 1px solid var(--j-hair);
  font-size: 13px; line-height: 1.7; color: var(--muted-fg);
}
.jobs-srcs li:first-child { border-top: 0; }
.jobs-srcs li::before {
  content: counter(js, decimal-leading-zero);
  position: absolute; left: 0; top: 9px;
  font-family: var(--j-mono); font-size: 11.5px; color: #b4b9c0;
}

/* ---------- ⑩ 上一 / 下一个岗位 ---------- */
.jobs-pager {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--j-hair);
  display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jobs-pager a {
  display: block; padding: 15px 18px;
  border: 1px solid var(--j-hair); border-radius: 6px;
  /* 网格列虽已 minmax(0,1fr)，但卡片自身仍是 min-width:auto，
     「19审计内控与风控」这类长名会把列撑宽 → 文档横向溢出。 */
  min-width: 0; overflow: hidden;
}
.jobs-pager a:hover { border-color: var(--primary); background: var(--primary-tint); }
.jobs-pager .jp-dir {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: #8a9098; text-transform: uppercase;
}
.jobs-pager .jp-name {
  display: block; margin-top: 7px; font-size: 15px; font-weight: 600; color: var(--ink);
  overflow-wrap: anywhere;
}
.jobs-pager .jp-role {
  display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jobs-pager .jp-next { text-align: right; }
.jobs-pager .jp-next .jp-role { direction: rtl; }

/* ---------- ⑪ /solutions/ 入口页：39 岗位矩阵 ----------
   入口页刻意跟详情页反着来：详情页是「细线长列表」（要读），
   入口页是「按大类分块的密排链接」（要扫）。两者共用同一组 hairline，
   所以看起来仍是一套东西。 */
.sol-jobs-group + .sol-jobs-group {
  margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--j-hair);
}
.sol-jobs-gt {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
.sol-jobs-gt h3 { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.sol-jobs-gt .sg-n {
  /* 中文序号「一二三」：不用等宽（等宽字体里的中文会显得松散），
     改用小字重 + 更浅的字色，让它明显退到标题后面。 */
  font-size: 12.5px; font-weight: 600; color: var(--j-num);
  letter-spacing: .08em;
}
.sol-jobs-gt .sg-d {
  margin-left: auto; font-size: 12.5px; color: var(--muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52%;
}
.sol-jobs-links {
  display: grid; gap: 1px; background: var(--j-hair);
  border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sol-jobs-links a { background: #fff; padding: 12px 15px; display: block; min-width: 0; }
.sol-jobs-links a:hover { background: var(--primary-tint); }
.sol-jobs-links .sj-t {
  display: flex; align-items: baseline; gap: 9px; font-size: 14px; font-weight: 600;
  min-width: 0;
}
.sol-jobs-links .sj-t .sj-no {
  font-family: var(--j-mono); font-size: 11.5px; font-weight: 400; color: var(--j-num);
  flex: none;
}
/* 岗位名本身也要能省略 —— 「客户成功实施交付」这类长名在窄列里会顶出格子。
   注意 min-width:0 必须同时给到 a 与 .sj-t：块级子元素默认 min-width:auto，
   不写的话 ellipsis 不起作用、内容把格子撑宽（render_check 就是这么发现的）。 */
.sol-jobs-links .sj-t > .sj-nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sol-jobs-links .sj-d {
  display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.6;
  color: var(--muted-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 入口页的索引表：一张表看全 39 个岗位的规模（场景数 / 首推 / 页码）。
   比 39 张卡片有用得多 —— 读者要的是「哪个岗位的场景最多、先看哪个」。 */
.sol-idx { border: 1px solid var(--j-hair); border-radius: 6px; overflow: hidden; }
.sol-idx-scroll { overflow-x: auto; }
.sol-idx table { width: 100%; border-collapse: collapse; min-width: 640px; }
.sol-idx th {
  padding: 10px 14px; background: var(--secondary); border-bottom: 1px solid var(--j-hair);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #6b7079;
  text-align: left; white-space: nowrap;
}
.sol-idx td {
  padding: 10px 14px; border-top: 1px solid var(--j-hair);
  font-size: 13.5px; color: var(--ink); vertical-align: top;
}
.sol-idx tbody tr:hover { background: var(--primary-tint); }
.sol-idx tbody tr:first-child td { border-top: 0; }
.sol-idx .si-no, .sol-idx .si-n {
  font-family: var(--j-mono); font-size: 12.5px; color: var(--j-num);
  text-align: right; white-space: nowrap;
}
.sol-idx .si-job { font-weight: 600; white-space: nowrap; }
.sol-idx .si-role { color: var(--muted-fg); font-size: 13px; }

/* ---------- ⑫ 响应式 ----------
   断点分三档，理由是左栏三种命运：
     ≥1181px  左栏 sticky 常驻（内容列还有 ≥680px，四列全景表放得下）
     861–1180 左栏改为「页头下方的横向滚动条」，不再占左侧
     ≤860px   全部单列
   注意 ≤1180 档没有把菜单删掉 —— 39 项删掉就没法在岗位间跳了，
   改成横向条 + 保留搜索框，跳转能力不丢。 */
@media (max-width: 1180px) {
  .jobs-wrap { display: block; max-width: 100%; padding: 0 20px; }
  .jobs-main { padding: 28px 0 76px; }
  .jobs-nav {
    position: static; max-height: none; margin-top: 20px;
    /* flex 列容器的子项默认 min-width:auto，横向滚动条会反过来把导航盒撑宽、
       进而把 .jobs-wrap 和整个文档撑出横向溢出。这两条是横向滚动能成立的前提。 */
    min-width: 0; max-width: 100%;
  }
  .jobs-nav-list {
    display: flex; gap: 0; overflow-x: auto; padding: 6px 10px 12px;
    scrollbar-width: thin;
    min-width: 0; max-width: 100%;
  }
  .jobs-nav-group { display: flex; align-items: center; }
  .jobs-nav-group + .jobs-nav-group { margin-top: 0; }
  .jobs-nav-gt {
    padding: 0 12px 0 16px; white-space: nowrap;
    border-left: 1px solid var(--j-hair); align-self: stretch;
    display: flex; align-items: center;
  }
  .jobs-nav-group:first-child .jobs-nav-gt { border-left: 0; }
  .jobs-nav-link {
    padding: 6px 12px; border-left: 0; border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .jobs-nav-link.on { border-left: 0; border-bottom-color: var(--j-wb); }
  .jobs-nav-link .jn-no { width: auto; margin-right: 7px; }
  .jobs-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs-cap-col:nth-child(3) { border-left: 0; }
  .jobs-cap-col:nth-child(n+3) { border-top: 1px solid var(--j-hair); }
  .sol-jobs-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .jobs-wrap { padding: 0 16px; }
  .jobs-title h1 { font-size: 26px; }
  .jobs-facts { grid-template-columns: 1fr; }
  .jobs-fact + .jobs-fact {
    border-left: 0; border-top: 1px solid var(--j-hair); padding-left: 0;
  }
  .jobs-sec { margin-top: 40px; }
  .jobs-sec-head { flex-wrap: wrap; }
  .jobs-sec-head .jh-note { margin-left: 0; flex-basis: 100%; }
  .jobs-scenes { grid-template-columns: 1fr; }
  .jobs-cap { grid-template-columns: 1fr; }
  .jobs-cap-col + .jobs-cap-col { border-left: 0; border-top: 1px solid var(--j-hair); }
  .jobs-2col { grid-template-columns: 1fr; }
  .jobs-pager { grid-template-columns: 1fr; }
  .jobs-steps { flex-direction: column; }
  .jobs-step + .jobs-step { border-left: 0; border-top: 1px solid var(--j-hair); }
  .sol-jobs-links { grid-template-columns: 1fr; }
  .sol-jobs-gt { flex-wrap: wrap; }
  .sol-jobs-gt .sg-d { margin-left: 0; flex-basis: 100%; max-width: none; }
  .jobs-table { min-width: 640px; }
}
@media (max-width: 520px) {
  .jobs-title h1 { font-size: 23px; }
  .jobs-nav-head { padding: 14px 14px 12px; }
  .jobs-scene-kv .jk { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
}

/* ---------- ⑬ /solutions/ 入口页的两层容器 ---------- */
.sol-jobs { display: block; }
/* 入口页的数字：hero-meta 里的 <b> 是规模数字，比标签重一档但不用大字号 ——
   这一页的主角是下面 39 项目录，抬头数字抢戏会让读者以为进了数据看板。 */
.sol-jobs ~ * { min-width: 0; }
.page-hero .hero-meta b {
  font-family: var(--j-mono, ui-monospace, monospace);
  font-size: 15px; font-weight: 700; color: var(--ink);
}