/* GEI 官网 v4「做厚」· 能力区长卷 (CapabilityScreen) + 段3 交付岛 + 证据 SVG
   核心红线:
   - 一能力一整屏 (≥100svh), zigzag 左右交替, 手机图在文下纵向堆叠。
   - 证据 SVG: CSS 默认态 = 描满 (no-JS / reduced-motion 安全); JS 加 .js 门控后才反置初态。
   - 屏外段 content-visibility:auto 降帧。每屏 ≤1 朱点。 */

/* ============ 段3 · 能交付什么 (两岛并置) ============ */
.deliver-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cap-col-gap);
  margin-top: var(--sp-12);
  align-items: start;
}
.deliver-island { display: flex; flex-direction: column; align-items: flex-start; }
.deliver-island__title { margin: var(--sp-4) 0 var(--sp-1); }
.deliver-island__sub { color: var(--ink-nezumi); margin: 0; }

/* count-stat: "14 份" 数字位 (编舞 ④ count-up) — 朱预算: 数字本身走 sumi, 不耗朱 */
.count-stat { white-space: nowrap; }
.count-stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink-sumi);
}
@media (max-width: 720px) {
  .deliver-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ============ 段4 能力区段首总览 ============ */
.s-capabilities { padding-block: 0; }
.cap-overview { padding-block: var(--section-y-loose); }
.cap-overview__head { margin-bottom: var(--sp-8); }
.cap-overview__caption { margin: var(--sp-8) auto 0; }
/* 七能力 vs 环图五节点调和说明 (P1 #7) — nezumi 承载文字 */
.cap-overview__note {
  margin: var(--sp-3) auto 0;
  max-width: var(--measure);
  color: var(--ink-nezumi);
}

/* ============ 能力子屏 (zigzag) ============ */
.cap-screen {
  min-height: var(--cap-screen-min-h);
  display: flex;
  align-items: center;
  padding-block: var(--cap-screen-pad-y);
  /* 屏外降帧: 长卷掉帧第一解 */
  content-visibility: auto;
  contain-intrinsic-size: 100svh;
}
.cap-screen__inner {
  width: min(100% - 2.5rem, var(--w-capability));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--cap-col-gap);
  align-items: center;
}
/* 偶数屏整行翻转: 图左文右 */
.cap-screen[data-cap="2"] .cap-text,
.cap-screen[data-cap="4"] .cap-text,
.cap-screen[data-cap="6"] .cap-text { order: 2; }

.cap-text { max-width: 34ch; }
.cap-progress {
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  /* 方位感: 段内进度计数 01/07 (承载文字) → nezumi 6.6:1 (P0 #3, Newsreader 笔画细更吃力) */
  color: var(--ink-nezumi);
  font-feature-settings: "lnum" 1, "tnum" 1; /* 等宽 lining 数字, 不抖 */
  margin: 0 0 var(--sp-3);
}
.cap-progress span { margin: 0 0.15em; }
.cap-name { margin: 0; }
.cap-value {
  font-family: var(--font-display);  /* cap-value 用 display 衬线 (per type scale) */
  font-size: var(--fs-cap-value);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-nezumi);
  margin: var(--cap-name-to-value) 0 0;
  text-wrap: pretty;
}

.cap-figure { display: flex; justify-content: center; }
.cap-svg, .evi-svg {
  width: min(100%, 320px);
  height: auto;
  overflow: visible;
}
.evi-svg { width: min(100%, 200px); }

@media (max-width: 760px) {
  .cap-screen__inner { grid-template-columns: 1fr; gap: var(--cap-value-to-svg); }
  /* 手机: 图一律在文下 (去 zigzag) */
  .cap-screen[data-cap="2"] .cap-text,
  .cap-screen[data-cap="4"] .cap-text,
  .cap-screen[data-cap="6"] .cap-text { order: 0; }
  .cap-text { max-width: none; }
  .cap-svg, .evi-svg { width: min(78%, 280px); }
  /* 手机长卷过密 → 子屏高度收一点, 仍留白 */
  .cap-screen { min-height: auto; padding-block: var(--section-y-base); }
}

/* ============ 证据 SVG 描边 · CSS 兜底 = 描满 (P0 #4) ============
   默认 (no-JS / reduced-motion / JS 失败): path 完整可见。
   仅当 .js 且未 reduced-motion: 反置初态 (描隐), anime.js 接管描出。
   注: anime.js 用 stroke-dasharray/offset 内联控制; 这里只负责"JS 没接管时也别空"。 */
.cap-svg [data-draw],
.evi-svg [data-draw],
.threestate [data-draw] { /* 默认完整 */ }

/* JS 接管前的瞬态由 choreography.js 内联设 dashoffset; 朱点默认完整可见 (兜底) */
.shu-dot { transform-box: fill-box; transform-origin: center; }

/* reduced-motion: 强制完整 (即使 JS 在) */
@media (prefers-reduced-motion: reduce) {
  .cap-svg [data-draw],
  .evi-svg [data-draw],
  .threestate [data-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .shu-dot { opacity: 1 !important; transform: scale(1) !important; }
}

/* ============ 段7 · 交得放心 9 闸门清单 ============ */
.gate-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-12) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6) var(--sp-8);
}
.gate-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-sumi);
}
/* 墨线小方勾 ▢ (纯 CSS, 无图标库) */
.gate-check {
  flex: none;
  width: 18px; height: 18px;
  border: 1.25px solid var(--ink-sumi);
  border-radius: var(--r-xs);
  position: relative;
}
.gate-check::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border-right: 1.5px solid var(--ink-sumi);
  border-bottom: 1.5px solid var(--ink-sumi);
  transform: rotate(40deg);
}
/* 末项: 勾染朱 (强调"以你为准") — 本屏唯一朱 */
.gate-item--shu { color: var(--ink-sumi); }
.gate-check--shu { border-color: var(--shu); }
.gate-check--shu::after { border-right-color: var(--shu); border-bottom-color: var(--shu); }

@media (max-width: 720px) {
  .gate-list { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-4); }
  .gate-item { font-size: var(--fs-body); }
}
@media (max-width: 480px) {
  .gate-list { grid-template-columns: 1fr; }
}

/* ============ 段9 · 适合谁 ============ */
.fit-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-8) 0 0;
  max-width: var(--measure);
}
.fit-list li {
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--ink-nezumi);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-whisper);
}
.fit-list li:first-child { border-top: 0; }

/* —— 适合谁: 谁你是 → 你能带走什么 (round-2) —— */
.fit-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.fit-item__who {
  font-size: var(--fs-display-s, 1.5rem);
  line-height: 1.25;
  color: var(--ink);            /* 标题用主墨, 立住人设 */
  margin: 0;
}
.fit-item__desc {
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
  color: var(--ink-nezumi);
  margin: 0;
  max-width: var(--measure);
}
.fit-item__get {
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
  color: var(--ink);            /* 收益是重点 → 主墨, 比描述更实 */
  margin: var(--sp-1) 0 0;
  max-width: var(--measure);
}
.fit-item__get-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-nezumi);     /* 克制: 不耗朱 (每屏唯一朱留给别处), 小标签领出收益句 */
  margin-right: 0.5em;
}

/* ============ 段6 · 质量三态图 ============ */
.s-quality .threestate {
  margin: var(--sp-12) auto var(--sp-4);
  display: flex;
  justify-content: center;
}
.threestate svg { width: min(100%, 460px); height: auto; overflow: visible; }
.threestate__cap {
  text-align: center;
  color: var(--ink-nezumi);
  margin: var(--sp-2) auto 0;
}

/* ============ 段3½ · 它会以什么形态交到你手里 (shapes · round-5) ============ */
.shapes-grid {
  list-style: none;
  padding: 0;
  margin: var(--sp-12) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cap-col-gap, var(--sp-8));
}
.shape-card {
  position: relative;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line-whisper);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.shape-card__mark {
  position: absolute;
  top: -1px;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--shu);
}
.shape-card__title { margin: 0; line-height: 1.3; }
.shape-card__desc {
  margin: 0;
  color: var(--ink-nezumi);
  line-height: 1.85;
  text-wrap: pretty;
  max-width: 46ch;
}
@media (max-width: 720px) {
  .shapes-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}