/* ============================================================
 * cover.css — 封面页 · 五章节翻阅（00 封面·含痛点轮播 / 01 我们 / 02 数字 / 03 流程 / 04 来聊）
 * ============================================================ */

/* ---------- 00 封面（开幅） ---------- */
.hero-eyebrow {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 14px;
}
.hero-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px);
  align-items: stretch; margin-top: clamp(14px, 3vh, 30px);
}
.hero-title {
  /* [MOD] Director 2026-11-02 裁定：主张字号收敛（原 clamp(40px,7vw,92px)，与站内他章层级差距缩小） */
  font-size: clamp(36px, 6vw, 78px); font-weight: 900;
  line-height: 1.16; letter-spacing: .01em;
}
.hero-title .dot { color: var(--seal); }
/* [MOD] Director 2026-10-30 三次裁定：主张三段阶梯排版（帮你把游戏，/做成/你想要的样子），
   朱批仅末段「你想要的样子」；轮播痛点句（同用 hero-title 类）不受染 */
.hero-title .l { display: block; }
.hero-title .l + .l { margin-top: .3em; }
.hero-title .l.hl { color: var(--seal); }
.hero-side { display: flex; gap: clamp(14px, 2vw, 24px); align-items: flex-start; padding-top: clamp(6px, 1.4vh, 16px); }
.seal--hero { width: clamp(58px, 6.4vw, 78px); height: clamp(58px, 6.4vw, 78px); font-size: clamp(26px, 3vw, 36px); animation: csStamp .55s var(--ease) both; }
.hero-vr { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding-top: 4px; }
.hero-lead {
  font-size: clamp(15.5px, 1.5vw, 18.5px); color: var(--ink-2); line-height: 2.1;
  margin-top: clamp(20px, 4vh, 42px); max-width: 62ch;
}
/* [MOD] Director 2026-10-30 四次裁定：着重＝印色文字＋加粗即可，洗底弃用；
   2026-10-30 痛点批改轮扩至轮播解法句（.hero-x__a .hl），与导语同规格；
   2026-10-31 WD-010 扩至 Why US? beat 正文（.we-prose .hl，V2 稿两处 <h> 着重） */
.hero-lead .hl, .hero-x__a .hl, .we-prose .hl, .plate__story .hl, .how .note .hl { color: var(--seal); font-weight: 700; }
.hero-x__q .hl { color: var(--seal); }   /* 题眼着重＝印色（题眼本为 900 级粗，不降权重） */
/* [REMOVED] 2026-11-02 Director 裁定：hero 注脚行移除，.hero-fine 死规则随审计清除 */
.readout {
  display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-2);
}
.readout a { border-bottom: 1px solid var(--line-soft); padding-bottom: 2px; }

/* ---------- 封面全幅轮播 + 固定栏（Director 2026-10-29 二次澄清：封面→痛点1→…→痛点6→封面，向左循环） ---------- */
.hero-x { min-width: 0; display: flex; flex-direction: column; }
.hero-x__stage { display: grid; overflow: hidden; }
/* 七张同格堆叠（grid-area 1/1）：容器高度随最高一张自适应，长文案不裁切。
   状态机：默认=右侧待入；is-on=居中呈现；is-out/is-out-b=向左/向右退场；is-in-b=左侧待入（倒退用）。
   is-on 声明在最后，与退场类叠加时保证胜出。 */
.hero-x__slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(100%); pointer-events: none;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
  will-change: transform;
}
.hero-x__slide.is-out   { transform: translateX(-100%); }
.hero-x__slide.is-out-b { transform: translateX(100%); }
.hero-x__slide.is-in-b  { transform: translateX(-100%); }
.hero-x__slide.is-on {
  opacity: 1; transform: translateX(0); pointer-events: auto;
}
/* 共情短语（Director 2026-10-29 三次裁定）：替换 No.0X 编号——小字、印色、衬线，位于大字痛点上方 */
.hero-x__lb {
  font-family: var(--serif); font-weight: 700; font-size: 15px;
  letter-spacing: .3em; color: var(--seal); margin-bottom: clamp(14px, 2.2vh, 22px);
}
/* 一句话痛点（Director 2026-10-29 四次裁定·排版一致）：六句统一标题级规格——复用 .hero-title 的
   900 字重与衬线，字号统一收敛至 clamp(34,4.8vw,64)，保证各张视觉一致、竖向不溢出；
   不同句型按语义断行区别对待：单段 3-4 行、双段对照 4 行、最长双段句 5 行，断点均落在子句边界 */
.hero-x__q { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.3; }
.hero-x__a {
  font-size: 14px; color: var(--ink-2); line-height: 2;
  margin-top: clamp(16px, 2.6vh, 26px); padding-left: 16px;
  border-left: 2px solid var(--seal); max-width: 62ch;
}
.hero-x__marks { display: flex; gap: 8px; margin-top: 18px; }
.hero-x__m {
  width: 22px; height: 3px; padding: 0; border: 0;
  background: var(--line); cursor: pointer;
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.hero-x__m:hover { background: var(--ink-3); }
.hero-x__m.is-on { width: 34px; background: var(--seal); }

/* 翻页钮·符号式（Director 2026-10-29 七次裁定）：裸「＞」符号即按钮——无边框无底色，
   衬线 900 字重与标题同族，静息注记级墨灰，悬停转印色并前移；全角字形与 CJK 排版一致 */
.hero-x__arrow {
  align-self: center;
  border: 0; background: none; cursor: pointer;
  font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 4vw, 56px);
  line-height: 1; color: var(--ink-3); padding: 6px 10px;
  transition: color .15s var(--ease), transform .2s var(--ease);
}
.hero-x__arrow:hover { color: var(--seal); transform: translateX(4px); }
.hero-x__arrow:active { transform: translateX(1px); }

/* 固定栏：印章（上）+ 翻页大钮（中）+ CTA 印色实底大按钮（下），不随轮播滚动 */
.hero-rail {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: 26px;
  padding-top: clamp(6px, 1.4vh, 16px);
}
.hero-cta { display: flex; flex-direction: column; gap: 12px; }
/* [MOD] Director 2026-11-02 裁定：全站主 CTA 统一 hero 规格（尺寸/居中/箭头动效/纵向堆叠）——收幅章与协力方式章随改 */
.hero-cta .btn, .closing-acts .btn, .how > .btn, .how-cta .btn { justify-content: center; padding: 15px 28px; font-size: 14px; }
.hero-cta .arr, .closing-acts .arr, .how > .btn .arr, .how-cta .btn .arr { transition: transform .2s var(--ease); }
.btn--fill { background: var(--seal); border-color: var(--seal); color: var(--sel-ink); }
/* [FIX] .arr 自带印色，印色实底上会隐形——改继承按钮反白字色 */
.btn--fill .arr { color: inherit; }
.btn--fill:hover { background: var(--seal-deep); border-color: var(--seal-deep); color: var(--sel-ink); }
.btn--fill:hover .arr { transform: translateX(3px); }

/* 无 JS：轮播退化为竖排清单，指示条隐藏 */
.no-js .hero-x__stage { display: block; }
.no-js .hero-x__slide { opacity: 1; transform: none; pointer-events: auto; margin-bottom: 22px; }
.no-js .hero-x__marks { display: none; }

/* ---------- 01 我们是谁 ---------- */
.we-prose p {
  font-size: clamp(17px, 1.8vw, 21px); line-height: 2.15;
  max-width: 66ch; margin-bottom: 1.05em;
}
.we-prose p:last-child { margin-bottom: 0; }
/* [MOD] 2026-10-31 WD-011：Why US? 收束句「Big highlight」（Director 标注）＝印色+700+放大 */
.we-prose .we-big {
  color: var(--seal); font-weight: 700;
  font-size: clamp(21px, 2.3vw, 27px); line-height: 1.75;
  margin-top: .55em;
}
/* 协力方式（2026-11-02 大改：原工作方式组块退役）——导语(.we-prose 复用)＋细分服务单钮＋起步注＋日历 CTA；
   文本三档标记：<size>=.how-t 首句放大，<b>=加粗，<h>=.hl 印色着重 */
.how { margin-top: clamp(8px, 2vh, 18px); }
.how-t { font-size: clamp(19px, 2vw, 23px); font-weight: 500; line-height: 1.95; }
.how-lead { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; margin-top: clamp(28px, 4.5vh, 44px); }
.how > .btn { margin-top: 14px; }
.how .note { margin-top: clamp(24px, 3.8vh, 36px); }
.how-cta { margin-top: clamp(28px, 4.5vh, 44px); border-top: 1px solid var(--line); padding-top: clamp(22px, 3.5vh, 34px); }
.how-cta__t { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; line-height: 2; }
.how-cta .btn { margin-top: 18px; }

/* ---------- 03 数字（信任与背景） ---------- */
/* Director 2026-10-29 裁定：本章配色与其他章节统一——弃墨底反白专用 token，随主题底色/墨色/印色走 */
.plate__grid {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px); align-items: center;
}
/* 数字账目式左对齐（Director 2026-10-29 裁定）：竖排左缘对齐，数左签右，基线对齐 */
.plate__stats { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 28px); }
.stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 24px); }
.stat b {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(42px, 4.8vw, 68px); line-height: 1.05;
}
.stat b small { font-size: .32em; margin-left: .18em; color: var(--ink-2); font-weight: 400; }
/* [MOD] Director 2026-11-02 裁定：背景章四枚统计数字标红（印色，含单位；下方标签维持注记级） */
.plate__stats .stat b { color: var(--seal); }
.plate__stats .stat b small { color: var(--seal); }
.stat span {
  display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .22em; color: var(--ink-3);
}
.plate__story p { font-size: 15px; line-height: 2.15; max-width: 62ch; color: var(--ink-2); }
.plate__story p + p { margin-top: .9em; }
.plate__story b { color: var(--ink); }
.plate__story a {
  color: var(--seal); border-bottom: 1px solid var(--line);
  padding-bottom: 2px; margin-right: 1em; display: inline-block; margin-top: .4em;
}
.plate__story a:hover { border-color: var(--seal); }

/* ---------- 04 协力方式（2026-11-02 大改：stepflow/step 六步网格随章退役，样式见上方 .how 区） ---------- */

/* ---------- 05 来聊（收幅，2026-11-02 设计Agent 重排：三阶字号＋印色落点＋细线分隔，对齐站内标记语言；
   先抑句已升章头 h2，原 .closing-sub 死规则随审计清除） ---------- */
.closing-cl {
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; color: var(--ink-2);
  line-height: 1.9; margin-top: 0;   /* [MOD] 2026-11-02：先抑句升为章头 h2 后，章头自带上距，cl 前距归零 */
}
.closing-cl b { color: var(--ink); font-weight: 700; }
.closing-punch {
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 900; color: var(--seal);
  line-height: 1.3; margin-top: clamp(14px, 2.2vh, 22px);
}
.closing-acts {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  margin-top: clamp(26px, 4vh, 40px);
  padding-top: clamp(20px, 3vh, 30px); border-top: 1px solid var(--line);
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .plate__grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .hero-main { grid-template-columns: 1fr; }
  .hero-rail { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 0; }
  /* [MOD] 2026-11-02 WD-016 移动端否决返修：固定栏只留「日历」「服务」两个 CTA——
     「真」印章＋竖排题签「真实评测 · 实务档案」与「＞」翻页钮整体隐藏
     （轮播自动循环仍走，指示条点选可用）；桌面端固定栏不受影响 */
  .hero-side { display: none; }
  .hero-x__arrow { display: none; }
  .hero-cta { flex: 1; flex-direction: row; flex-wrap: wrap; }
  .hero-cta .btn { flex: 1 1 auto; }   /* 宽度够并排、不够则各占整行 */
  .readout { gap: 14px 22px; }
  /* [FIX] 2026-11-02 WD-016 返修：指示条触区补丁原写 height:auto——box-sizing:border-box 下
     content-box 高度塌陷为 0，background-clip:content-box 画区归零，条形整体不可见（即所报「显示问题」）。
     改 27px 总高（24px 触区 + 3px 画区），视觉条形恢复且触点 44px 级标准保持 */
  .hero-x__marks { gap: 4px; margin-top: 10px; }
  .hero-x__m { height: 27px; padding: 12px 0; background-clip: content-box; }
  .hero-eyebrow { line-height: 2; }
  /* [MOD] 2026-11-02 WD-017 移动端舞台高度追踪（Architect B 案 × 设计AGENT B 案合流）：
     死区根因＝grid 叠放舞台高度被最高张（封面 ~472px）撑死，非封面张（277–382px）居中悬浮 90–195px。
     align-self:start＝测量契约：张高=自身内容高，切断「测量→写入→复测」回环；
     cover-view.js paint() 末尾 syncHeight() 据此写舞台显式 px 高度。
     警告：删 align-self:start 则 offsetHeight 回读拉伸行高→测量退化为恒等，轮播不坏但死区复现——
     cover.css / cover-view.js 两文件契约，改动须同步。
     无 JS / matchMedia 缺失 / 测量非正 → 不写高度，回退现状（最高张），零影响。
     行距两条为辅项（无亲裁值，双方 Agent 共同背书）：导语 2.1→1.85、解法句 2.0→1.8。 */
  .hero-x__slide { align-self: start; }
  .hero-x__stage { transition: height .3s var(--ease); }
  .hero-lead { line-height: 1.85; }
  .hero-x__a { line-height: 1.8; }
}