/* ============================================================
   TYPOGRAPHY & SPACING SYSTEM — Raycast 收敛版
   替代此前散落的 52 种字号 / 38 种间距。
   字阶：1.20 模块化音阶，锚定 body 15px（Raycast 实测正文 14-15px）
   间距：4px 基线栅格，7 级
   ============================================================ */
:root{
  /* — 字阶（9 级，覆盖 10-58px） — */
  --fs-micro: 10px;   /* 角标、序号 */
  --fs-cap:   11px;   /* mono 标签、eyebrow */
  --fs-tiny:  12px;   /* 辅助说明 */
  --fs-sm:    13px;   /* 次要正文、表格 */
  --fs-body:  15px;   /* 正文基准 */
  --fs-lead:  18px;   /* 导语、卡片标题 */
  --fs-h3:    22px;   /* 三级标题 */
  --fs-h2:    clamp(26px, 3.1vw, 36px);   /* 章节标题 */
  --fs-h1:    clamp(36px, 5vw, 58px);     /* 页面主标题 */

  /* — 行高（跟随字阶，中文需要更松） — */
  --lh-tight: 1.25;   /* 大标题 */
  --lh-snug:  1.4;    /* 卡片标题 */
  --lh-base:  1.65;   /* 正文（中文舒适区） */

  /* — 字重（Raycast 实测只用 3 档） — */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   600;

  /* — 间距栅格（4px 基线，7 级） — */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 20px;
  --sp-5: 32px;
  --sp-6: 56px;
  --sp-7: 96px;

  /* — 版心 — */
  --measure:      1160px;   /* 内容最大宽 */
  --measure-text: 640px;    /* 纯文字栏最大宽（中文 ~40 字/行） */
  --gutter:       96px;
}

@media (max-width: 1023px){
  :root{ --gutter: 40px; --sp-7: 64px; --sp-6: 40px; }
}
@media (max-width: 639px){
  :root{ --gutter: 20px; --sp-7: 48px; --sp-6: 32px; --fs-body: 14px; }
}

/* ============================================================
   TYPOGRAPHY APPLICATION — 把令牌落到元素
   仅处理字号 / 行高 / 字重 / 块间距，不碰颜色与布局。
   ============================================================ */

/* — 基准 — */
body{
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — 标题族 — */
.section-title, section > h2{
  margin: 0;
}
h3, .cap-card h3, .card-title{
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: -.005em;
}
h4{
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  font-weight: var(--fw-medium);
}

/* — eyebrow / mono 标签统一为一档 — */
.eyebrow, .cap-card-label, .kicker,
.integration-block-kicker, .delivery-spec-kicker,
.tri-num, .integration-phase-no{
  text-transform: uppercase;
}
/* 纯说明性小字：收窄行长，中文 ≤40 字/行 */
.tri-desc, .cap-card p, .integration-phase p,
.delivery-spec li, .integration-list li{
  max-width: var(--measure-text);
}

/* — 块级节奏：标题组 → 内容 — */
.eyebrow + .section-title,
.eyebrow + h2{ margin-top: var(--sp-2); }

.section-title + *, section > h2 + *{ margin-top: var(--sp-4); }

/* 章节之间 */
section + section{ margin-top: var(--sp-7); }

/* Chapter breaks: an intentionally quiet visual pause between the five main parts. */
.chapter-divider{
  position: relative;
  width: min(calc(100% - 48px), var(--measure));
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.09) 18%,
    rgba(2,157,76,.42) 50%,
    rgba(255,255,255,.09) 82%,
    transparent 100%);
}
.chapter-divider::after{
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: var(--green);
  box-shadow: 0 0 14px rgba(2,157,76,.5);
}
@media (max-width: 640px){
  .chapter-divider{ width: calc(100% - 40px); }
}

/* ============================================================
   11. FLAT & UNWRAPPED — 去装饰条 + 去嵌套盒
   Raycast 不用"模块顶部渐变条""左侧竖条"这类装饰，
   也不把内容盒再套一层外框。层级靠留白与字重表达。
   ============================================================ */

/* 11.1 所有模块装饰条（顶部渐变线 / 高光棱边） */
.native-harness::before,
.ai-story-case-note::before,
.period-card-real::before,
.delivery-spec::before,
.cost-side-kicker::before,
.cost-shift::after,
.cost-workflow-loop::before,
.effect-overview-card::before,
.capability-patent::before,
.dual-wheel-block::before,
.capability-suite::before,
.cap-card::after,
.method-block::after,
.seat-compare-card::after,
.period-card::after,
.integration-card::after,
.delivery-spec::after,
.cost-hero::after,
.cost-tier::after,
.live-demo-wrap::after{
  display: none !important;
  content: none !important;
}

/* 11.2 左侧竖条 → 去掉 */
.seat-compare-summary,
.native-loop-note,
.ai-story-proof,
.tri-item,
.cost-workflow-takeaway,
.effect-bridge{
  border-left: none !important;
}
.path-card{ border-top: none !important; }

/* 结论类文本改用淡绿底强调，不用竖条 */
.seat-compare-summary,
.native-loop-note,
.cost-workflow-takeaway,
.effect-bridge{
  padding: 16px 20px !important;
  border-radius: var(--r-sm);
  background: rgba(2,157,76,.06);
}

/* 11.3 去嵌套：内部已有卡片的容器不再是"盒" */
.capability-suite,
.capability-patent,
.dual-wheel-block,
.effect-overview-card,
.method-block,
.cost-hero,
.cost-workflow,
.native-harness,
.live-demo-wrap,
.integration-phase,
.ai-story-surface,
.cost-result,
.cost-side{
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible;
}
.capability-suite,
.capability-patent,
.dual-wheel-block,
.effect-overview-card,
.method-block,
.cost-hero,
.cost-workflow,
.native-harness,
.live-demo-wrap{
  margin-top: 72px;
}

/* 11.4 能力套件：卡片间竖分隔线 → 留白 */
.capability-suite .cap-grid{
  background: none !important;
  padding: 0 !important;
  gap: 32px !important;
}
.capability-suite .cap-card,
.capability-suite .cap-card:first-child,
.capability-suite .cap-card:last-child{
  padding: 0 !important;
  border: none !important;
}
.capability-suite .cap-card + .cap-card{ border-left: none !important; }

/* 11.5 三维度卡：裸文本块 */
.tri-model{ border: none !important; background: none !important; padding: 0 !important; }
.tri-item{
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.tri-num{ color: var(--green); display: block; margin-bottom: 8px; }
.tri-title{ font-weight: 600; display: block; margin-bottom: 6px; }

/* 11.6 成本页：结果条与工作流靠底色分层 */
.cost-result-item{
  background: rgba(255,255,255,.035) !important;
  border: none !important;
  border-radius: var(--r-md);
  padding: 22px 24px !important;
}
.cost-workflow-row{
  border-top: none !important;
  border-radius: var(--r-md);
  padding: 22px 24px !important;
}
.cost-workflow-row.is-now{ background: rgba(2,157,76,.07); }
.cost-workflow-row.is-past{ background: rgba(255,255,255,.028); }

/* 11.7 保留叶子层卡片（真正承载内容的面） */
.cap-card,
.integration-card,
.delivery-spec,
.period-card,
.cost-tier,
.seat-compare-card,
.demo-card{
  border: 1px solid var(--g-edge-soft);
  border-radius: var(--r-lg);
}

/* 11.8 漏网竖条：结论文本统一改淡绿底 */
.service-shooting-takeaway{
  border-left: none !important;
  padding: 16px 20px !important;
  border-radius: var(--r-sm);
  background: rgba(2,157,76,.06);
}
/* 注：.process-dot 的绿边是流程节点圆点，属功能性标识，保留 */

/* ============================================================
   12. 最小间距保护 —— 杜绝"完全吸附"
   规则：任何有底色/边框的块，其下方内容至少留 20px。
   媒体（图片/视频）与其说明文字之间至少 16px。
   ============================================================ */

/* 12.1 媒体 → 说明文字：不可贴合 */
.seat-compare-media + *,
.cost-side-media + *,
.cost-tier-media + *,
.service-shooting-photo-grid + *,
.phone-frame + *,
.demo-video-wrap + *,
.ai-story-video + *{
  margin-top: 20px !important;
}

/* 视频上的浮层标签需要脱离贴边 */
.seat-clip-label{ margin-top: 12px; }

/* 12.2 卡片内部：媒体块与正文区分离 */
.cost-side-media,
.cost-tier-media,
.service-shooting-photo-grid{
  margin-bottom: 20px;
}
.cost-side-copy,
.cost-tier-body,
.service-shooting-body{ padding-top: 4px; }

/* AI 制作卡以流程为主体，保留四边等距留白，避免顶部被通用紧凑规则压缩。 */
.service-shooting-card.is-now .service-shooting-body{ padding:24px; }

@media (max-width:640px){
  .service-shooting-card.is-now .service-shooting-body{ padding:20px; }
}

/* 12.3 并列结果条之间 */
.cost-result-item + .cost-result-item{ margin-top: 12px !important; }

/* 12.4 档位卡内逐条特性 */
.cost-tier-feature + .cost-tier-feature{ margin-top: 10px; }
.cost-tier-tag + .cost-tier-name,
.cost-tier-name{ margin-top: 14px; }

/* 12.5 说明性小字与上方内容 */
.period-caveat,
.phone-caption,
.cost-note,
.note{ margin-top: 16px; }

/* 12.6 章节内"下一个标题组"必须与上方内容拉开 */
.eyebrow{ margin-top: 0; }
* + .eyebrow,
.seat-compare-grid + *,
.cap-grid + *,
.tri-model + *,
.phone-stage + *{ margin-top: 56px; }

/* 座椅前后对比与下一个结果模块之间保留完整呼吸感 */
#effect-seat > .phone-stage{
  margin-bottom: clamp(var(--sp-8),4vw,48px);
}

/* 12.7 流程箭头等衔接元素 */
.service-ai-arrow{ margin-top: 16px; margin-bottom: 16px; }

/* ============================================================
   13. 残留修正
   ============================================================ */

/* 13.1 COVER 溢出：#cover 走全宽逻辑，不受 section 的 max-width 约束。
   之前写在内联 style 的修正被 h5-editor 回写覆盖，改放这里。 */
#cover{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  overflow-x: clip;
}
.cover-bg,
.cover-grid{
  max-width: 100% !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}
.hero-title,
.cover-audiences{ max-width: 100%; }

/* 13.2 移动端流程：步骤与箭头竖排时不可吸附 */
/* 24.10 下载按钮：文案长度不同不应导致高度差，统一拉伸对齐 */
#sec-input .tpl-download{ align-items: stretch; }
#sec-input .tpl-btn{ align-items: center; }
/* 副标题固定两行高度，避免一个折行一个不折造成 20px 高度差 */
#sec-input .tpl-btn-sub{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 900px){
  #sec-input .tpl-btn-sub{ min-height: 40px; }
}

@media (max-width: 640px){
  .cost-workflow-step + .cost-workflow-arrow,
  .cost-workflow-arrow{
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  .cost-workflow-step{ margin-bottom: 0; }
  /* 竖排箭头旋转，指向下一步 */
  .cost-workflow-arrow{ display: block; text-align: center; }
}

/* ============================================================
   14. CAPABILITY BOARD — 方法定义、生成能力与体验维度归入同一面板
   ============================================================ */
#sec-capability > .capability-board{
  position: relative;
  margin-top: 40px;
  padding: 40px 44px;
  overflow: hidden;
  border: 1px solid rgba(2,157,76,.14);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 8% 0%,rgba(2,157,76,.065),transparent 34%),
    linear-gradient(145deg,rgba(2,157,76,.035),rgba(255,255,255,.018) 48%,rgba(4,7,5,.44));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 24px 72px -54px rgba(2,157,76,.55);
}

#sec-capability .capability-board > .capability-suite{
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

#sec-capability .capability-board .capability-patent{
  grid-template-columns: minmax(0,1fr) auto;
  gap: 32px;
  align-items: end;
  margin: 0 !important;
  padding: 0 0 28px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#sec-capability .capability-board .capability-patent-copy{
  align-self: end;
  justify-self: end;
  padding-top: 0;
}

#sec-capability .capability-board .cap-grid{
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 28px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.07);
  background: none !important;
}

#sec-capability .capability-board .cap-grid > .cap-card:nth-child(n+3),
#sec-capability .capability-board .method-block{
  display: none !important;
}

#sec-capability .capability-board .cap-card,
#sec-capability .capability-board .cap-card:first-child,
#sec-capability .capability-board .cap-card:last-child{
  width: auto !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  align-content: start;
}

#sec-capability .capability-board .cap-card + .cap-card{
  border: 0 !important;
}

#sec-capability .capability-board > .hairline{
  display: none !important;
}

#sec-capability .capability-board .capability-suite > .method-block{
  margin: 32px -44px -40px !important;
  padding: 28px 44px 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(2,157,76,.045) !important;
  box-shadow: inset 0 1px 0 rgba(2,157,76,.08) !important;
}

#sec-capability .capability-board .method-head{
  margin-bottom: 22px;
}

#sec-capability .capability-board .tri-model{
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sec-capability .capability-board .tri-item{
  display: block;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

#sec-capability .capability-board .tri-num{
  margin-bottom: 10px;
}

@media (max-width: 899px){
  #sec-capability > .capability-board{
    margin-top: 32px;
    padding: 32px;
  }
  #sec-capability .capability-board .capability-patent{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #sec-capability .capability-board .capability-patent-copy{
    align-self: start;
    justify-self: start;
    padding-top: 0;
  }
  #sec-capability .capability-board .cap-grid{
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-top: 24px !important;
  }
  #sec-capability .capability-board .cap-card + .cap-card{
    margin-top: 18px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
  }
  #sec-capability .capability-board .tri-model{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #sec-capability .capability-board .capability-suite > .method-block{
    margin-bottom: -32px !important;
    margin-right: -32px !important;
    margin-left: -32px !important;
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}

@media (min-width: 641px) and (max-width: 899px){
  #sec-capability .capability-board .tri-model{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 640px){
  #sec-capability > .capability-board{
    margin-top: 28px;
    padding: 24px 20px;
    border-radius: var(--r-md);
  }
  #sec-capability .capability-board .cap-grid{
    padding-top: 22px !important;
  }
  #sec-capability .capability-board .capability-patent-link{
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
  }
  #sec-capability .capability-board .capability-patent-copy{
    width: 100%;
  }
  #sec-capability .capability-board .capability-suite > .method-block{
    margin: 28px -20px -24px !important;
    padding: 24px 20px 28px !important;
  }
  #sec-capability .capability-board .method-head{
    margin-bottom: 20px;
  }
}

/* ============================================================
   15. COST BOARD — 05 成本明确为两个同级 Part
   ============================================================ */
#sec-cost .cost-part-overview{
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 24px;
  align-items: stretch;
  margin-top: 32px;
}

#sec-cost .cost-part-overview-label{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border-radius: var(--r-md);
  border: 1px solid rgba(2,157,76,.22);
  background: rgba(2,157,76,.09);
  color: var(--green);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .1em;
}

#sec-cost .cost-part-overview-items{
  display: grid;
  grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr);
  gap: 12px;
  align-items: stretch;
}

#sec-cost .cost-part-overview-item{
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
}

#sec-cost .cost-part-overview-item span{
  color: var(--green);
  font-weight: 600;
  letter-spacing: .04em;
}

#sec-cost .cost-part-overview-item strong{
  margin-top: 7px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.35;
}

#sec-cost .cost-part-overview-plus{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: var(--fs-h3);
  font-weight: 300;
}

#sec-cost .cost-hero{
  margin-top: 40px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#sec-cost .cost-hero::after{ display: none; }

#sec-cost .cost-part{
  position: relative;
  padding: 32px;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 24px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 5% 0%,rgba(2,157,76,.045),transparent 32%),
    rgba(10,14,12,.58);
}

#sec-cost .cost-part + .cost-part{ margin-top: 56px; }

#sec-cost .cost-part-head{
  display: flex;
  gap: 18px;
  align-items: center;
}

#sec-cost .cost-part-no{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--green);
  color: #061008;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
}

#sec-cost .cost-case-kicker,
#sec-cost .service-shooting-kicker{
  margin-bottom: 5px;
  color: var(--ink-3);
}

#sec-cost .cost-part-title,
#sec-cost .service-shooting-head h3{
  color: var(--ink);
}

#sec-cost .cost-part-seat .cost-compare{ margin-top: 28px; }
#sec-cost .cost-part-seat .cost-workflow{ margin-top: 32px; }

#sec-cost .service-shooting-case{
  margin-top: 56px;
  padding: 32px;
}

#sec-cost .service-shooting-head .cost-part-no{ margin-bottom: 18px; }

#sec-cost .service-shooting-tagline{
  margin-top: 8px;
  color: var(--green);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
}

#sec-cost .cost-result{ margin-top: 40px; }

@media (min-width: 768px){
  #sec-cost .cost-result{
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
  }
  #sec-cost .cost-result-item + .cost-result-item{ margin-top: 0 !important; }
}

@media (max-width: 767px){
  #sec-cost .cost-part-overview{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #sec-cost .cost-part-overview-label{ min-height: 44px; }
  #sec-cost .cost-part-overview-items{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #sec-cost .cost-part-overview-plus{ min-height: 24px; }
  #sec-cost .cost-part-head{
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  #sec-cost .cost-part,
  #sec-cost .service-shooting-case{ padding: 24px; }
  #sec-cost .cost-part + .cost-part,
  #sec-cost .service-shooting-case{ margin-top: 40px; }
}

@media (max-width: 640px){
  #sec-cost .cost-part-overview-item{ padding: 18px 20px; }
  #sec-cost .cost-part,
  #sec-cost .service-shooting-case{ padding: 20px; }
  #sec-cost .cost-part-no{
    min-width: 78px;
    min-height: 34px;
  }
}

/* 32.2 Light-canvas contrast guard for the legacy dual-wheel component. */
#sec-capability .dual-wheel-block{
  border: 1px solid var(--swiss-grey-2) !important;
  border-radius: 0 !important;
  background: var(--swiss-grey-1) !important;
  box-shadow: none !important;
}
#sec-capability .dual-growth-track,
#sec-capability .dual-wheel-conclusion{
  border: 1px solid var(--swiss-grey-2) !important;
  border-radius: 0 !important;
  background: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-capability .dual-growth-track-copy h4,
#sec-capability .dual-growth-track-copy p,
#sec-capability .dual-growth-steps strong,
#sec-capability .dual-growth-steps span,
#sec-capability .dual-wheel-intro,
#sec-capability .dual-wheel-conclusion strong,
#sec-capability .dual-wheel-conclusion span{
  color: var(--swiss-ink) !important;
}
#sec-capability .dual-growth-steps li{
  border-radius: 0 !important;
  background: var(--swiss-grey-1) !important;
}
#sec-capability .dual-growth-core,
#sec-capability .dual-growth-hub,
#sec-capability .dual-growth-core-node{
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-capability .dual-growth-core{
  background: var(--swiss-ink) !important;
}
#sec-capability .dual-growth-hub{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}

/* ============================================================
   33. BLACK FOUNDATION — user direction
   Keep the Swiss grid and single lime accent, but return the deck to
   a predominantly black canvas. Chapters separate by ink density,
   not by black/white theme switching.
   ============================================================ */
html,
body,
main{
  background: var(--swiss-ink) !important;
}
main > section.swiss-light,
main > section.swiss-ink{
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper);
  --deck-rule: var(--swiss-dark-rule);
  --deck-muted: #a8a8a4;
  --deck-card: var(--swiss-dark-card);
}
main > section.swiss-grey{
  background: #111111 !important;
  color: var(--swiss-paper);
  --deck-rule: var(--swiss-dark-rule);
  --deck-muted: #a8a8a4;
  --deck-card: var(--swiss-dark-card);
}
main > section:not(#cover) > .eyebrow{
  color: var(--swiss-accent) !important;
}

/* Cover becomes a restrained black title field with lime rules. */
#cover.swiss-accent{
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper);
}
#cover .hero-title{
  color: var(--swiss-paper) !important;
}
#cover::before,
#cover::after{
  border-color: var(--swiss-accent) !important;
  color: var(--swiss-accent) !important;
}
.chapter-divider{
  background: var(--swiss-dark-rule) !important;
}

/* Capability: dark evidence cards, one lime patent statement. */
#sec-capability .capability-patent,
#sec-capability .capability-board .capability-patent{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-capability .cap-grid,
#sec-capability .capability-board .cap-grid{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-capability .cap-grid > .cap-card,
#sec-capability .capability-board .cap-grid > .cap-card,
#sec-capability .capability-board .cap-grid > .cap-card:first-child,
#sec-capability .capability-board .cap-grid > .cap-card:last-child{
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-capability .cap-card h3,
#sec-capability .cap-card-label{
  color: var(--swiss-paper) !important;
}
#sec-capability .cap-card p{
  color: #a8a8a4 !important;
}
#sec-capability .method-block,
#sec-capability .dual-wheel-block{
  border-color: var(--swiss-dark-rule) !important;
  background: #111111 !important;
  color: var(--swiss-paper) !important;
}
#sec-capability .tri-item,
#sec-capability .dual-growth-track,
#sec-capability .dual-wheel-conclusion{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-capability .method-title,
#sec-capability .tri-name,
#sec-capability .dual-wheel-title,
#sec-capability .dual-growth-track-copy h4,
#sec-capability .dual-growth-steps strong,
#sec-capability .dual-growth-steps span,
#sec-capability .dual-wheel-conclusion strong{
  color: var(--swiss-paper) !important;
}
#sec-capability .tri-desc,
#sec-capability .dual-wheel-intro,
#sec-capability .dual-growth-track-copy p,
#sec-capability .dual-wheel-conclusion span{
  color: #a8a8a4 !important;
}
#sec-capability .dual-growth-steps li{
  background: #222222 !important;
}

/* Service chapter: newspaper logic on charcoal instead of paper. */
#sec-effect-service{
  border-color: var(--swiss-dark-rule) !important;
}
#sec-effect-service .effect-part-title,
#sec-effect-service .effect-result-title,
#sec-effect-service .demo-title,
#sec-effect-service .service-story-title,
#sec-effect-service .ai-story-title,
#sec-effect-service .ai-story-cap-title{
  color: var(--swiss-paper) !important;
}
#sec-effect-service .effect-part-desc,
#sec-effect-service .demo-desc,
#sec-effect-service .demo-point,
#sec-effect-service .service-story-copy,
#sec-effect-service .ai-story-desc,
#sec-effect-service .ai-story-cap-sub,
#sec-effect-service .ai-story-case-note{
  color: #a8a8a4 !important;
}
#sec-effect-service .service-primary-demo,
#sec-effect-service .ai-story,
#sec-effect-service .service-story-step{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: #111111 !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-stage,
#sec-effect-service .ai-story-surface{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-tab{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-effect-service .ai-story-tab[aria-selected="true"]{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}

/* Timeline uses near-black and charcoal; the real duration stays lime. */
#sec-process .period-grid,
#sec-process .process-list{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-process .period-card,
#sec-process .process-item{
  border-radius: 0 !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-process .period-card-reference{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-process .period-card-reference *{
  color: var(--swiss-accent-on) !important;
}
#sec-process .period-name,
#sec-process .period-duration,
#sec-process .process-title{
  color: var(--swiss-paper) !important;
}
#sec-process .period-desc,
#sec-process .period-caveat,
#sec-process .process-desc{
  color: #a8a8a4 !important;
}

/* Input chapter: dark numbered facts with lime indices. */
#sec-input .integration-flow{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-input .integration-phase,
#sec-input .integration-card,
#sec-input .delivery-spec{
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-input .integration-block{
  border-color: var(--swiss-dark-rule) !important;
}
#sec-input .integration-phase strong,
#sec-input .integration-card h3,
#sec-input .delivery-spec h3,
#sec-input .integration-block-title{
  color: var(--swiss-paper) !important;
}
#sec-input .integration-phase p,
#sec-input .integration-card-lead,
#sec-input .integration-list li,
#sec-input .integration-block-note,
#sec-input .delivery-spec p{
  color: #a8a8a4 !important;
}
#sec-input .integration-card-tag{
  border-color: var(--swiss-dark-rule) !important;
  color: var(--swiss-paper) !important;
}
#sec-input .integration-card-index,
#sec-input .integration-phase-no{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}

/* 35. Integration list collision guard
   The visual editor can persist card width/grid-column overrides inline.
   Keep both cards in the responsive grid and reserve enough room for long
   English labels such as "Specifications" so they never run into the value. */
#sec-input .integration-content-grid > .integration-card{
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  justify-self: stretch !important;
  grid-column: auto !important;
}
#sec-input .integration-list li{
  grid-template-columns: minmax(112px, .26fr) minmax(0, 1fr) !important;
  column-gap: 16px !important;
}
#sec-input .integration-list b{
  min-width: 0;
  overflow-wrap: anywhere;
}
#sec-input .integration-list span{ min-width: 0; }

@media (max-width: 900px){
  #sec-input .integration-content-grid{
    flex-direction: column !important;
  }
  #sec-input .integration-content-grid > .integration-card{
    width: 100% !important;
    flex: 0 0 auto !important;
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 480px){
  #sec-input .integration-list li{
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 4px !important;
  }
}

/* ============================================================
   34. WHOLE-DECK LAYOUT AUDIT — Swiss spacing, type and evidence
   Fixes the repeated layout mechanism behind oversized blank areas:
   tall media may define a row, but copy stays on the upper content axis.
   ============================================================ */

/* 34.1 S01: keep the typographic group around the visual centre instead
   of pinning the title and footer to the bottom edge. */
#cover.swiss-accent{
  align-content: center;
  row-gap: clamp(24px, 4vh, 48px);
  padding-top: clamp(104px, 12vh, 156px);
  padding-bottom: clamp(80px, 10vh, 132px);
}
#cover .hero-title{
  justify-self: start;
  align-self: end;
}
#cover::after{
  margin-top: 0;
}

/* 34.2 S16 main evidence card: the phone no longer vertically centres
   the much shorter copy column or grows without a presentation cap. */
#sec-effect-service .service-primary-demo{
  padding: clamp(24px, 3vw, 40px) !important;
}
#sec-effect-service .service-primary-demo .service-result-head{
  margin: 0 !important;
}
#sec-effect-service .service-primary-demo #benefits-journey-demo{
  margin: clamp(20px, 2.2vw, 28px) 0 0 !important;
}
#benefits-journey-demo .phone-row.reverse{
  grid-template-columns: minmax(0, 1fr) minmax(248px, 300px) !important;
  gap: clamp(32px, 5vw, 72px) !important;
  align-items: start !important;
}
#benefits-journey-demo .demo-body{
  align-self: start;
  max-width: 44rem !important;
  padding-top: 0 !important;
}
#benefits-journey-demo .demo-desc{
  max-width: 42rem;
}
#benefits-journey-demo .phone-col{
  display: flex;
  width: 100%;
  height: auto !important;
  align-items: flex-start;
  justify-content: flex-end;
}
#benefits-journey-demo .phone-frame{
  width: min(100%, clamp(248px, 19vw, 288px)) !important;
  max-width: none !important;
  height: auto !important;
}

/* 34.3 Presentation surfaces stay straight and quiet. Device frames and
   circular system diagrams remain semantic exceptions. */
#sec-effect-service .ai-story-collage,
#sec-effect-service .ai-story-proof,
#sec-effect-service .service-ai-output,
#sec-effect-service .service-ai-qa,
#sec-effect-service .service-shooting-body,
#sec-effect-service .service-shooting-photo-grid,
#sec-effect-service .service-shooting-takeaway,
#sec-effect-service .service-shooting-cost-reference,
#sec-process .period-milestones,
#sec-cost .cost-tier-media,
#sec-cost .cost-tier-name,
#sec-cost .cost-tier-price,
#sec-cost .cost-side-media-label,
#sec-cost .cost-tier-media-label,
#sec-input .tpl-btn,
#sec-input .tpl-btn-icon{
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-cost .cost-side.has-media,
#sec-cost .cost-side-copy,
#sec-cost .cost-tier-price,
#sec-input .integration-card,
#sec-input .tpl-btn{
  background-image: none !important;
}
#sec-process .period-card-reference .period-caveat{
  color: rgba(10, 10, 10, .72) !important;
}

@media (max-width: 899px){
  #sec-effect-service .service-primary-demo{
    padding: clamp(20px, 4vw, 32px) !important;
  }
  #benefits-journey-demo .phone-row.reverse{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  #benefits-journey-demo .demo-body{
    max-width: 42rem !important;
  }
  #benefits-journey-demo .phone-col{
    justify-content: center;
  }
  #benefits-journey-demo .phone-frame{
    width: min(100%, 260px) !important;
  }
}

@media (max-width: 639px){
  #cover.swiss-accent{
    align-content: center;
    row-gap: 28px;
    padding-top: 96px;
    padding-bottom: 72px;
  }
  #sec-effect-service .service-primary-demo{
    padding: 20px !important;
  }
  #benefits-journey-demo .demo-link-row{
    align-items: stretch;
  }
}

/* 33.2 Straight-corner lock for all presentation surfaces. */
#sec-capability .dual-wheel-block,
#sec-capability .dual-growth-track,
#sec-capability .dual-growth-core,
#sec-capability .dual-growth-hub,
#sec-capability .dual-growth-core-node,
#sec-capability .dual-wheel-conclusion,
#sec-effect .seat-compare,
#sec-effect .seat-compare-card,
#sec-effect .seat-compare-media,
#sec-effect .seat-clip,
#sec-effect-service .service-primary-demo,
#sec-effect-service .ai-story,
#sec-effect-service .ai-story-stage,
#sec-effect-service .ai-story-surface,
#sec-effect-service .service-story-step,
#sec-process .period-card,
#sec-process .process-item,
#sec-cost .cost-part,
#sec-cost .cost-side,
#sec-cost .cost-ai-pipeline,
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-ai-pipeline-main,
#sec-cost .cost-ai-stage,
#sec-cost .service-shooting-card,
#sec-cost .cost-tier,
#sec-input .integration-flow,
#sec-input .integration-phase,
#sec-input .integration-block,
#sec-input .integration-card,
#sec-input .delivery-spec{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   14. MOTION —— 对齐 Raycast 实测动效
   实测结论（raycast.com/pro 计算样式采样）：
     · 缓动一律 `ease`，没有花哨贝塞尔曲线
     · 时长集中在 0.2s / 0.3s，最长 0.4s
     · 只过渡 color / transform / opacity 这类合成友好属性
     · 常驻 keyframes 仅装饰性圆点，且 6s 极慢
     · will-change 全站仅 3 处，不滥用
   本节零 JS、零常驻动画，不增加运行时负担。
   ============================================================ */

/* 14.1 统一时长与缓动令牌 */
:root{
  --dur-fast: .2s;
  --dur-base: .3s;
  --dur-slow: .4s;
  --ease: ease;
}

/* 14.2 链接/文字类：只过渡 color（最廉价，Raycast 用了 75 处） */
a,
.nav-chapters a,
.demo-link,
.tpl-btn,
.footer-link,
.cost-tier-link{
  transition: color var(--dur-base) var(--ease);
}

/* 14.3 可交互面：只过渡 transform + 边框色，不过渡 box-shadow
   （box-shadow 过渡会触发重绘，transform 走合成层，便宜得多） */
.cap-card,
.integration-card,
.delivery-spec,
.period-card,
.cost-tier,
.seat-compare-card,
.demo-card{
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.cap-card:hover,
.integration-card:hover,
.delivery-spec:hover,
.period-card:hover,
.cost-tier:hover,
.demo-card:hover{
  transform: translateY(-2px);
  border-color: var(--g-green-edge);
}

/* 14.4 按钮：transform + 背景，0.2s 快反馈 */
.cta-primary,
.cta-secondary,
.ai-story-tab,
.live-tab,
.lang-switch button{
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.cta-primary:hover,
.cta-secondary:hover{ transform: translateY(-1px); }
.cta-primary:active,
.cta-secondary:active,
.ai-story-tab:active,
.live-tab:active{ transform: translateY(0) scale(.985); }

/* 14.5 媒体：hover 时轻微放大，用 transform 而非 width/height */
.seat-compare-media img,
.service-shooting-photo-grid img,
.demo-video-wrap video{
  transition: transform var(--dur-slow) var(--ease);
}
.seat-compare-card:hover .seat-compare-media img{ transform: scale(1.015); }

/* 14.6 焦点可见性（键盘可达性，零成本） */
a:focus-visible,
button:focus-visible,
.tpl-btn:focus-visible{
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* 14.7 性能约束：
   不使用常驻 keyframes；不过渡 filter / backdrop-filter / box-shadow / width；
   不全局设置 will-change（它会强制提层，反而吃显存）。
   注：不写 `*{will-change:auto}` —— 通配符选择器本身有匹配成本，
   且会干扰滚动进入动画所需的临时提层。 */

/* 14.8 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   25. 2026-08-29 版式收口
   Part 1 双 Demo、单视频参数卡、权益满栅格与成本流程。
   ============================================================ */

/* Part 1：把能力论证变成两个可直接阅读的 1:1 Demo。 */
#sec-capability .capability-board{
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(2,157,76,.07), transparent 30%),
    rgba(8,12,10,.74) !important;
}
#sec-capability .capability-board .cap-grid{
  gap: clamp(18px,2vw,28px) !important;
  padding-top: 24px !important;
}
#sec-capability .capability-board .cap-card,
#sec-capability .capability-board .cap-card:first-child,
#sec-capability .capability-board .cap-card:last-child{
  overflow: hidden;
  padding: 12px 12px 18px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#sec-capability .cap-card-media{
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 18px;
  border-radius: 14px;
  background: #101411;
}
#sec-capability .cap-card-media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 58%,rgba(0,0,0,.66));
}
#sec-capability .cap-card-media video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#sec-capability .cap-card:first-child .cap-card-media video{
  object-position: center 44%;
}
#sec-capability .cap-card-media-tag{
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  left: 14px;
  color: rgba(255,255,255,.9);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
}
#sec-capability .cap-card-content{
  padding: 0 4px;
}
#sec-capability .cap-card-label{
  margin-bottom: 9px;
  color: var(--green) !important;
}
#sec-capability .cap-card h3{
  margin-bottom: 7px;
}
#sec-capability .cap-card p{
  max-width: 48ch;
  color: var(--ink-3);
}

/* 信息层只保留一条视频，按卡片幅面居中裁切。 */
.seat-compare-media.is-single{
  display: block;
  overflow: hidden;
  background: #f3f3f3;
}
.seat-compare-media.is-single > video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 权益模块沿用页面栅格，不再在内部额外收窄。 */
#sec-effect-service .effect-part-standalone,
#sec-effect-service .ai-story,
#sec-effect-service .service-result-head,
#sec-effect-service #benefits-journey-demo{
  width: 100%;
  max-width: none !important;
  box-sizing: border-box;
}
#sec-effect-service .ai-story-grid{
  grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) !important;
  width: 100%;
}
#benefits-journey-demo .phone-row.reverse{
  grid-template-columns: minmax(0,1fr) minmax(300px,420px) !important;
  gap: clamp(36px,7vw,112px) !important;
  align-items: center;
}
#benefits-journey-demo .phone-overlay video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 成本流程：左侧讲清“为什么变”，右侧用 2×2 卡片讲清“如何做”。 */
#sec-cost .cost-ai-pipeline{
  display: grid !important;
  grid-template-columns: minmax(260px,.82fr) 46px minmax(0,1.18fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 24px !important;
  padding: 20px !important;
  border: 1px solid rgba(2,157,76,.15) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg,rgba(2,157,76,.055),rgba(255,255,255,.018) 52%) !important;
}
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-ai-pipeline-main{
  min-width: 0;
  padding: clamp(22px,2.5vw,34px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(5,8,6,.52);
}
#sec-cost .cost-ai-pipeline-intro{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#sec-cost .cost-ai-pipeline-intro h4{
  max-width: 16ch;
  margin: 12px 0 10px;
  font-size: clamp(22px,2.2vw,34px);
  line-height: 1.12;
}
#sec-cost .cost-ai-legacy{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#sec-cost .cost-ai-legacy-track{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
#sec-cost .cost-ai-legacy-track span{
  color: var(--ink-3);
}
#sec-cost .cost-ai-legacy-track b{
  margin-right: 5px;
  color: rgba(255,255,255,.38);
  font-family: var(--mono);
}
#sec-cost .cost-ai-legacy-track i{
  color: rgba(255,255,255,.25);
  font-style: normal;
}
#sec-cost .cost-ai-pipeline-arrow{
  display: grid;
  place-items: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(2,157,76,.34);
  border-radius: 50%;
  color: var(--green);
  background: #0b150e;
  box-shadow: 0 0 28px rgba(2,157,76,.1);
}
#sec-cost .cost-ai-pipeline-main{
  display: flex;
  flex-direction: column;
}
#sec-cost .cost-ai-pipeline-head{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
#sec-cost .cost-ai-pipeline-head strong{
  color: var(--green);
}
#sec-cost .cost-ai-pipeline-head span{
  max-width: 30ch;
  color: var(--ink-3);
  text-align: right;
}
#sec-cost .cost-ai-stages{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
#sec-cost .cost-ai-stage{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  align-items: start;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
#sec-cost .cost-ai-stage.is-result{
  border-color: rgba(2,157,76,.26);
  background: rgba(2,157,76,.07);
}
#sec-cost .cost-ai-stage-no{
  color: var(--green);
  font-family: var(--mono);
}
#sec-cost .cost-ai-stage-copy strong,
#sec-cost .cost-ai-stage-copy small{
  display: block;
}
#sec-cost .cost-ai-stage-copy strong{
  margin-bottom: 8px;
}
#sec-cost .cost-ai-stage-copy small{
  color: var(--ink-3);
}

@media (max-width: 899px){
  #sec-capability .capability-board .cap-grid{
    gap: 18px !important;
  }
  #sec-capability .capability-board .cap-card + .cap-card{
    margin-top: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255,255,255,.11) !important;
  }
  #sec-effect-service .ai-story-grid{
    grid-template-columns: 1fr !important;
  }
  #benefits-journey-demo .phone-row.reverse{
    grid-template-columns: minmax(0,1fr) minmax(260px,340px) !important;
    gap: 32px !important;
  }
  #sec-cost .cost-ai-pipeline{
    grid-template-columns: 1fr !important;
  }
  #sec-cost .cost-ai-pipeline-arrow{
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 639px){
  #sec-capability > .capability-board{
    padding: 20px;
  }
  #sec-capability .capability-board .cap-grid{
    grid-template-columns: 1fr !important;
  }
  #sec-capability .cap-card-media{
    margin-bottom: 15px;
  }
  #benefits-journey-demo .phone-row.reverse{
    grid-template-columns: 1fr !important;
  }
  #benefits-journey-demo .phone-col{
    width: min(100%,340px);
    margin-inline: auto;
  }
  #sec-cost .cost-ai-pipeline{
    padding: 12px !important;
  }
  #sec-cost .cost-ai-pipeline-intro,
  #sec-cost .cost-ai-pipeline-main{
    padding: 20px;
  }
  #sec-cost .cost-ai-pipeline-head{
    display: block;
  }
  #sec-cost .cost-ai-pipeline-head span{
    display: block;
    margin-top: 7px;
    text-align: left;
  }
  #sec-cost .cost-ai-stages{
    grid-template-columns: 1fr;
  }
  #sec-cost .cost-ai-stage{
    min-height: 0;
  }
}

/* ============================================================
   15. 内部圆角统一
   问题：卡片有 16px 圆角，但内部媒体块是直角，
   在卡片四角处出现"直角戳出圆角"的断层。
   规则：内部元素的圆角 = 外层圆角 - 边框宽度，
   贴边的一侧跟随外层，非贴边一侧用小圆角。
   ============================================================ */

:root{
  /* 内嵌圆角 = 外层 16px - 1px 描边 = 15px */
  --r-inner: 15px;
}

/* 15.1 卡片顶部媒体：上两角跟随卡片，下两角切平（下面接文字区） */
.cost-tier-media,
.cost-side.has-media .cost-side-media,
.integration-card-media,
.period-card-media{
  border-radius: var(--r-inner) var(--r-inner) 0 0 !important;
  overflow: hidden;
}

/* 媒体内的图片/视频同步，避免自身直角戳出 */
.cost-tier-media img,
.cost-tier-media video,
.cost-side-media img,
.cost-side-media video,
.integration-card-media img,
.period-card-media img{
  border-radius: inherit;
}
/* 渐变遮罩层同步圆角，否则遮罩四角会露出直角 */
.cost-tier-media::after,
.cost-side-media::after{ border-radius: inherit; }

/* 15.2 卡片底部媒体：下两角跟随卡片 */
.cost-tier-media.is-bottom,
.demo-card-media.is-bottom{
  border-radius: 0 0 var(--r-inner) var(--r-inner) !important;
}

/* 15.3 完全内嵌（四周都有内边距）的媒体：四角统一小圆角 */
.seat-compare-media,
.demo-video-wrap,
.ai-story-video,
.service-shooting-photo-grid img,
.phone-stage img{
  border-radius: var(--r-md) !important;
  overflow: hidden;
}
.seat-compare-media img,
.seat-compare-media video,
.demo-video-wrap video,
.ai-story-video video{ border-radius: inherit; }

/* 15.4 media 上的浮层标签：小圆角，不用直角 */
.cost-tier-media-label,
.cost-side-media-label,
.seat-clip-label{
  border-radius: var(--r-xs);
}

/* 15.5 卡片自身统一 16px，避免各处不一致 */
.cap-card,
.integration-card,
.delivery-spec,
.period-card,
.cost-tier,
.seat-compare-card,
.demo-card{
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* 15.6 服务拍摄卡：内部照片网格与正文区跟随外层圆角 */
.service-shooting-card{ border-radius: var(--r-lg); overflow: hidden; }
.service-shooting-card > :first-child{
  border-top-left-radius: var(--r-inner);
  border-top-right-radius: var(--r-inner);
}
.service-shooting-card > :last-child{
  border-bottom-left-radius: var(--r-inner);
  border-bottom-right-radius: var(--r-inner);
}
.service-shooting-photo-grid{ overflow: hidden; }

/* 15.7 标题组容器补间距
   第 12 节用的是 `* + .eyebrow`，但当 eyebrow 被包在
   .tier-intro 这类容器里时选择器不命中，导致 GAP=0。
   这里直接对"含标题组的容器"补上边距。 */
.tier-intro,
.section-intro,
.block-intro,
.cost-tiers-intro{
  margin-top: 72px;
}
/* 容器是 section 首个可见子元素时不需要额外上边距 */
section > .tier-intro:first-child,
section > .section-intro:first-child{ margin-top: 0; }

/* ============================================================
   16. 系统性走查修正
   诊断脚本发现的 4 类不一致
   ============================================================ */

/* 16.1 【对比度】ai-story-tab 激活态：深绿字配 16% 透明绿底，几乎不可读。
   改为深底亮绿字，与其他标签态保持一致的可读性。 */
.ai-story-tab[aria-selected="true"],
.live-tab.active{
  color: var(--green) !important;
  background: rgba(2,157,76,.14) !important;
  border-color: var(--g-green-edge) !important;
  font-weight: 600;
}
/* 未激活态过暗（38% 白），提到 62% 保证可辨识 */
.ai-story-tab,
.live-tab{ color: rgba(255,255,255,.62); }
.ai-story-tab:hover,
.live-tab:hover{ color: rgba(255,255,255,.88); }

/* 16.2 【圆角】收敛为 4 档 + 胶囊，去掉 28/34px 等散值 */
:root{ --r-pill: 999px; }
.phone-frame,
.seat-demo-phone,
.ai-demo-phone{ border-radius: 28px; } /* 手机样机保留物理圆角 */
.flywheel-card,
.dual-wheel-node,
.capability-patent,
.effect-overview-card,
.path-card,
.cost-part{
  border-radius: var(--r-md);
}
/* 圆形元素（序号点、图标底）保持 50% */

/* 16.3 【内边距】卡片统一 28px；窄卡 18px 的两处提到 24px */
.cap-card,
.integration-card,
.delivery-spec,
.period-card,
.cost-tier,
.seat-compare-card,
.demo-card{
  padding: 28px;
}
@media (max-width: 1439px){
  .cap-card,.integration-card,.delivery-spec,
  .period-card,.cost-tier,.seat-compare-card,.demo-card{ padding: 24px; }
}
@media (max-width: 640px){
  .cap-card,.integration-card,.delivery-spec,
  .period-card,.cost-tier,.seat-compare-card,.demo-card{ padding: 20px; }
}

/* 16.4 【字号】40 种过多，把零散字重并入标准档
   700 → 600（页面已统一用 600 作为强调字重）
   13px → 13.5px（与次要说明文字统一） */
b, strong,
.stk-who,
.matrix-head,
.cost-part-no,
.ev-label strong{ font-weight: 600; }

/* 16.5 左对齐基线：section 直接子元素统一贴 gutter
   （诊断显示 28 个元素在 220，另有 2 个在 0、1 个在 80） */
section > *:not(.cover-bg):not(.cover-grid){
  margin-left: 0;
  margin-right: 0;
}

/* 英文由普通文本和绿色 span 共同组成：补回词间距，并在四列窄卡下
   收紧最长的 “Custom estimate”，避免文字越出卡片内容区。 */
html[lang="en"] #sec-process .period-duration{
  display: flex;
  align-items: baseline;
  gap: .16em;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}
@media (min-width: 1440px){
}
.cost-part-overview-plus{ font-size: var(--fs-h3); font-weight: 300; }

/* 16.8 周期卡高度：见第 17.10 节（等高会产生 130-156px 死白） */

/* 英文桌面端周期标题保持一行，窄屏仍允许自然换行 */
@media (min-width: 1024px){
  #sec-process .section-title{
    max-width: none;
    white-space: nowrap;
  }
}

/* ============================================================
   17. 整体样式走查 · 第二轮（1600px 实测驱动）
   实测发现 6 类问题，逐条修正。
   ============================================================ */

/* 17.1 【行长】12px 小字满宽拉到 92–97 字/行，远超中文舒适区 25–40 字。
   Raycast 的做法是正文栏固定窄宽（实测 584px），而不是跟着容器拉满。
   这里给纯说明类小字加 measure-text 上限，标题与卡片内文字不受影响。 */
.integration-download-note,
.ai-story-case-note,
.ai-story-proof,
.cost-workflow-desc,
.process-desc,
.process-out,
.native-harness-desc,
.cost-note,
.period-caveat,
.footer-disclaimer p{
  max-width: var(--measure-text);
}
/* 流程条目在两栏布局里本身已窄，放宽一点避免过度收窄 */
.process-desc,
.process-out{ max-width: 720px; }

/* 17.2 【标题组节奏】章节内 "标题 → 首个内容块" 间距实测为
   72 / 37 / 40 / 40 / 16px 五种，节奏不统一。
   Raycast 是固定呼吸：标题组与内容之间恒定一档。统一为 56px。 */
main > section > .eyebrow + h2.section-title{ margin-top: 12px; }
main > section > h2.section-title + *,
main > section > .cost-thesis + *,
main > section > .lead + *{
  margin-top: 56px !important;
}
/* cost 页 thesis 是标题组的一部分，紧跟标题 */
main > section > h2.section-title + .cost-thesis{ margin-top: 16px !important; }

/* 17.3 【吸附】ai-story 三段式卡：媒体面与文字说明之间 gap=0，
   靠一条 1px 线硬分。改为去线 + 留白分层（与全局去分割线原则一致）。 */
.ai-story-cap{
  border-top: none;
  padding-top: 18px;
  min-height: 0;
}
.ai-story-stage-head{ padding-bottom: 12px; }
.ai-story-surface{ border-radius: var(--r-sm); }
.ai-story-stage{ padding: 0 14px 16px; }
.ai-story-stage-head{ padding-left: 0; padding-right: 0; }
.ai-story-cap{ padding-left: 0; padding-right: 0; }

/* 17.4 【高度失衡】ai-story-collage 内首图跨 3 行、其余图各占 1 行，
   实测同行出现 661 / 219px 的落差。让网格行等高分配。 */
.ai-story-collage{ align-items: stretch; }
.ai-story-collage img{ align-self: stretch; }

/* 17.5 【残留分割线】走查出 17 条单边真线，其中三类属纯装饰：
   - cost-tier-feature 顶线（逐条特性之间）
   - cost-tier-price 顶线（价格与特性之间）
   - period-milestones 顶线（明细表与卡片正文之间）
   全部改为留白 + 底色分层。 */
.cost-tier-feature{
  border-top: none;
  padding-top: 0;
  padding-bottom: 0;
}
.cost-tier-feature + .cost-tier-feature{ margin-top: 12px !important; }
.cost-tier-price{
  border-top: none;
  margin-top: 20px !important;
  padding-top: 0 !important;
}
.period-milestones{
  border-top: none;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.028);
}

/* 17.6 【尾部收口】footer-disclaimer 与上方 24px 就顶上了，
   而它是全页结束语，需要更明确的收束留白。 */
.footer-disclaimer{ margin-top: 56px !important; padding: 24px; }
.footer-disclaimer p{ font-size: var(--fs-cap); }

/* 17.7 【圆角】走查剩 15px（旧 --r-inner 遗留）与 28px 两个散值。
   15px 收敛到 12px 档；28px 仅保留给手机样机物理圆角。 */
:root{ --r-inner: 12px; }

/* 17.8 【吸附】ai-story-final（最终 Demo 卡）margin 顶为 0，
   与上方 panel 完全贴合。补上与内部节奏一致的分离量，
   横向保持 auto，避免独立 Demo 被钉在页面左侧。 */
.ai-story-final{ margin: 24px auto 20px !important; }

/* 17.9 【对齐】说明类小字加了 max-width 后，任何残留的 text-align:center
   都会变成"半宽居中"，与同组左对齐文字失配。
   实测 .cost-workflow-desc 上有编辑器遗留的内联 center，统一压回左对齐。 */
.cost-workflow-desc,
.integration-download-note,
.ai-story-case-note,
.ai-story-proof,
.process-desc,
.process-out,
.native-harness-desc,
.cost-note,
.period-caveat{
  text-align: start !important;
}
/* period-caveat 在块级容器里被 auto 边距推居中，拉回左基线 */
.period-caveat{ margin-left: 0 !important; margin-right: auto !important; }

/* 17.10 【周期卡等高】并排展示时，四张卡统一以内容最高的卡片为准；
   手机单列时恢复自然高度，避免无意义地拉长页面。 */
@media (min-width: 640px){
  .period-grid{
    align-items: stretch !important;
    grid-auto-rows: 1fr;
  }
  .period-card,
  .period-card-real{
    height: auto !important;
    align-self: stretch !important;
  }
}
@media (max-width: 639px){
  .period-grid{
    align-items: start !important;
    grid-auto-rows: auto;
  }
  .period-card,
  .period-card-real{
    height: auto !important;
    align-self: start !important;
  }
}

/* 现场拍摄成本参考：保持信息化呈现，不与主叙事竞争 */
#sec-input .tpl-btn-icon{
  border-radius: 10px;
  overflow: hidden;
}
#sec-cost .service-shooting-cost-reference{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.028);
}
#sec-cost .service-shooting-cost-reference span{
  color: var(--ink-3);
  letter-spacing: .03em;
}
#sec-cost .service-shooting-cost-reference strong{
  flex: 0 0 auto;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 640px){
  #sec-cost .service-shooting-cost-reference{
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* 17.11 【圆角】走查出一批有底色/描边但仍是直角的容器，
   与全站 12/16px 圆角体系断层。按层级补齐：
   外层容器 16px，内部面 12px，叶子媒体 8px。 */
.ai-story,
.ai-story-stage.is-demo,
.ai-story-final{
  border-radius: var(--r-lg);
}
/* 注：#sec-capability 的 .method-block 是刻意的出血底带，
   它靠父级 .capability-board（16px 圆角 + overflow:hidden）裁角，
   自身保持直角是正确的，不在此收敛。 */
/* seat-clip 是并列媒体卡，属叶子层 */
.seat-clip{ border-radius: var(--r-md); overflow: hidden; }
.seat-clip video{ border-radius: inherit; }
.ai-story-stage,
.ai-story-collage,
.service-shooting-photo{
  border-radius: var(--r-md);
}
.ai-story-proof{ border-radius: var(--r-sm); }
/* 拼图内的单张照片：跟随容器内切一档，避免直角戳出圆角边 */
.ai-story-collage{ overflow: hidden; }
.service-shooting-photo{ overflow: hidden; }
.service-shooting-photo img{ border-radius: inherit; }

/* 17.12 【孤儿卡】1440-1719px 区间把 delivery-spec-grid / cost-tiers
   压成两栏，3 项内容排成 2+1，末卡独占一行、右侧半幅空白。
   既定规则：三项组要么三栏、要么单列，不允许 2+1。
   1160px 内容宽下三栏每张 ~373px，容纳得下。 */
@media (min-width: 1200px){
  .delivery-spec-grid,
  .cost-tiers{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}

/* 17.13 【左基线】封面文字左边界与内容页差 140px（80 vs 220），
   从封面滚到 01 能力时标题会横向"跳"一下。
   #cover 是全宽容器不受 section max-width 约束，
   这里给它一个与内容页同宽的内层约束，保证首屏基线一致。 */
#cover{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#cover > *{
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* 背景层是绝对定位的装饰，不参与内容栅格 */
#cover > .cover-bg,
#cover > .cover-grid{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ============================================================
   18. 能力页三栏竖分隔线（按需求恢复）
   注：这是对第 11.4 / 11.5 节"竖线→留白"决策的定向回退。
   理由：能力 A/B 是「并列可比」关系，竖线在这里承担
   分栏语义，不是纯装饰。仅限这一处，
   其余位置仍遵循 11.x 的去线原则。
   ============================================================ */

/* 18.1 用 ::before 画线，落在 32px 沟槽正中（left: -16px），
   绝对定位不占布局、不改 DOM，也不影响已有的三栏等宽计算。 */
.capability-suite .cap-grid > .cap-card,
#sec-capability .tri-model > .tri-item{
  position: relative;
}
.capability-suite .cap-grid > .cap-card + .cap-card::before,
#sec-capability .tri-model > .tri-item + .tri-item::before{
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -16px;
  width: 1px;
  /* 两端淡出，避免线头生硬地戳在文字上下 */
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255,255,255,.10) 18%,
    rgba(255,255,255,.10) 82%,
    transparent
  );
  pointer-events: none;
}

/* 18.2 各自塌成单列后撤掉竖线：能力栏 899px，维度栏 640px。 */
@media (max-width: 899px){
  .capability-suite .cap-grid > .cap-card + .cap-card::before{
    display: none;
  }
}
@media (max-width: 640px){
  #sec-capability .tri-model > .tri-item + .tri-item::before{
    display: none;
  }
}

/* 18.4 能力卡三栏等分：能力 A/B/C 是平级并列，必须同行等宽。
   两栏会让第三张换行、宽度不均。minmax(0,1fr) 保证严格平分，
   min-width:0 允许内容收缩、避免长词把某一栏撑宽。 */
@media (min-width: 900px){
  .capability-suite .cap-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    align-items: stretch !important;
  }
  .capability-suite .cap-grid > .cap-card{
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* 18.3 【编辑器遗留】.capability-patent-copy 曾被可视化编辑器写入
   `transform: translate(-519.672px, -37.9092px) !important`（一次误拖拽），
   把「查看方法详情」按钮拽出卡片、挤到标题上方。
   内联 !important 无法用外部样式表压制，已直接删除 index.html 的该属性。
   这里只保留按钮的右上角定位。 */
#sec-capability .capability-board .capability-patent{
  align-items: end;
}
#sec-capability .capability-board .capability-patent-copy{
  align-self: end;
  justify-self: end;
  padding-top: 0;
}

@media (max-width: 899px){
  #sec-capability .capability-board .capability-patent{
    align-items: start;
  }
  #sec-capability .capability-board .capability-patent-copy{
    align-self: start;
    justify-self: start;
  }
}

/* ============================================================
   18.5 章节标题与摘要占满章节内容宽度
   可视化编辑器曾给部分标题写入固定宽高；统一恢复为随章节伸缩。
   ============================================================ */
#sec-capability,
#sec-effect,
#sec-effect-service,
#sec-process,
#sec-input,
#sec-cost{
  max-width: none;
}

#sec-capability > h2.section-title,
#sec-effect > h2.section-title,
#sec-effect-service > h2.section-title,
#sec-process > h2.section-title,
#sec-input > h2.section-title,
#sec-cost > h2.section-title,
#sec-cost > p.cost-thesis{
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}
/* ============================================================
   19. 04 接入模块整体重设计
   诊断（1600px 实测）：
   - 四个层级（流程 / 接入内容 / 交付规范 / 下载）用同一档 56px 间距、
     同一种卡片壳，信息没有主次，读者不知道先看哪
   - 两张接入卡一绿一蓝（#029D4C vs #6989FF），在单色体系里割裂
   - 三张 A/B/C 小标题与正文只隔 16px，分组感弱
   - 下载区两个 78px 空壳按钮，是本章唯一的行动点却最轻
   设计思路：按"读者动线"重排权重 —— 流程条(轻) → 接入内容(重) →
   交付规范(中) → 下载(强行动点)。
   ============================================================ */

/* 19.1 【层级】章节内四块改为阶梯式间距，而非全部 56px。
   流程条是导览、紧跟标题；主体内容块之间拉开到 72px。 */
#sec-input > .integration-flow{ margin-top: 40px !important; }
#sec-input > .integration-block{ margin-top: 72px !important; }

/* 19.2 【流程条】三步导览降权：去掉卡片壳，改为轻量步骤条。
   它只是"接下来分三步"的索引，不该和主体内容抢视觉重量。 */
#sec-input .integration-flow{
  gap: 0 !important;
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#sec-input .integration-phase{
  padding: 4px 28px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* 步骤之间用竖线分隔，与 18 节能力页的并列语义保持一致 */
#sec-input .integration-phase + .integration-phase{
  border-left: 1px solid rgba(255,255,255,.08) !important;
}
#sec-input .integration-phase:first-child{ padding-left: 0 !important; }
/* 序号从填充块改为纯字号标记，进一步降权 */
#sec-input .integration-phase-no{
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  color: var(--green);
  font-family: var(--mono); font-weight: 600; font-size: var(--tn-label); line-height: 1;
}

/* 19.3 【接入内容】这是本章主体，给足重量：加大内边距、
   用淡绿底与描边把两张卡从背景里托起来。 */
#sec-input .integration-card{
  padding: 32px !important;
  background: linear-gradient(160deg, rgba(2,157,76,.045), rgba(255,255,255,.012) 52%) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--r-lg) !important;
}

/* 19.4 【单色收敛】第二张卡的蓝色系（#6989FF）在全站单色绿体系里
   是唯一的异色，且与"可独立接入"的并列语义矛盾 —— 两张卡是平级的，
   不该一绿一蓝。统一为绿色，用序号亮度区分先后。 */
#sec-input .integration-card .integration-card-index{
  background: rgba(2,157,76,.10) !important;
  border-color: rgba(2,157,76,.30) !important;
  color: var(--green) !important;
}

/* 19.5 【分组感】A/B/C 小标题与其内容的距离，必须小于
   它与上一组的距离，否则读者分不清标题属于上面还是下面。
   现状 head→body 仅 16px 而组间 56px，比例失衡。 */
#sec-input .integration-block-head{
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* 19.6 【交付规范】三张规范卡是"查阅型"内容，降一档重量：
   比接入卡轻，比流程条重。 */
#sec-input .delivery-spec{
  padding: 26px !important;
  background: rgba(255,255,255,.022) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* 19.7 【下载区】本章唯一的行动点，此前是两个透明空壳（78px）。
   给实体感与绿色强调，让"下载模板"成为视觉终点。 */
#sec-input .tpl-btn{
  padding: 20px 24px !important;
  background: rgba(2,157,76,.055) !important;
  border: 1px solid rgba(2,157,76,.26) !important;
  border-radius: var(--r-md) !important;
}
#sec-input .tpl-btn:hover{
  background: rgba(2,157,76,.09) !important;
  border-color: rgba(2,157,76,.42) !important;
}
#sec-input .tpl-btn-icon{
  color: var(--green);
}
#sec-input .tpl-btn-arrow{
  color: var(--green);
}
/* 下载说明与按钮组分离 */
#sec-input .integration-download-note{
  margin-top: 18px !important;
}

/* 19.8 序号降权后不再需要 42px 的方块列，收窄为文字宽度，
   让步骤标题与描述靠左对齐成一栏。 */
#sec-input .integration-phase{
  grid-template-columns: 26px minmax(0,1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

/* 19.9 【单色收敛·补】上面第 19.4 条被更早的 :nth-child(2) 蓝色规则
   （权重 0,2,1 且带 !important）压制，这里用同等结构的选择器覆盖。
   两张接入卡是平级的「可独立接入」，不该一绿一蓝。 */
#sec-input .integration-card:nth-child(2){
  background: linear-gradient(160deg, rgba(2,157,76,.045), rgba(255,255,255,.012) 52%) !important;
}
#sec-input .integration-card:nth-child(2) .integration-card-index{
  color: var(--green) !important;
  border-color: rgba(2,157,76,.30) !important;
  background: rgba(2,157,76,.10) !important;
}
/* 第一张卡同步为同一渐变，两张完全对称 */
#sec-input .integration-card:nth-child(1){
  background: linear-gradient(160deg, rgba(2,157,76,.045), rgba(255,255,255,.012) 52%) !important;
}

/* 19.10 【窄屏】流程条塌成单列后（<640px，与 .integration-flow 的
   三栏断点一致），竖线会变成错位短竖条，改回横线分隔。
   注：834px 仍是三栏，必须保持竖线，故断点取 639px 而非 899px。 */
@media (max-width: 639px){
  #sec-input .integration-phase + .integration-phase{
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    margin-top: 14px;
    padding-top: 14px !important;
  }
  #sec-input .integration-phase{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ============================================================
   20. 对照卡双联媒体（接入闲置素材）
   「改造前」原本只展示参数表，现补入航司官网信息页，
   两段并置更完整地说明"信息是散的、冷的"。
   ============================================================ */
.seat-compare-media.is-duo{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  gap: 1px;
  background: rgba(255,255,255,.08);
}
.seat-compare-media.is-duo > video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
@media (max-width: 639px){
  .seat-compare-media.is-duo{ grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .seat-compare-media.is-duo > video:last-child{ display: none; }
}

/* ============================================================
   21. 画布调整同步：标题与能力卡顶满容器宽度
   ============================================================ */

/* 21.1 【标题顶满】section-title 此前被 max-width: 20em / 18em 限宽
   （约 720px / 648px），而版心是 1160px，右侧空出一大截。
   解除限宽后标题占满容器，长标题也不会提前折行。 */
h2.section-title,
.section-title{
  max-width: none !important;
  width: 100%;
}

/* 21.2 【卡片顶满】栅格格子等分后，卡片本身也要撑满各自格子，
   否则内容按自身宽度收缩、格子里留白。 */
.capability-suite .cap-grid > .cap-card,
.cap-grid > .cap-card{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
/* 卡片内部：内容区同样铺满，标题与描述不再被自身内容宽度限制 */
.cap-grid > .cap-card > .cap-card-content{
  width: 100%;
}
.cap-grid > .cap-card h3,
.cap-grid > .cap-card p{
  max-width: none;
}

/* ============================================================
   22. 画布调整：.phone-row.reverse 去背景 + 内容顶满
   ============================================================ */

/* 22.1 【去背景】背景来自两处：
   - <article> 内联 background-color（已从 HTML 移除）
   - .ai-story-stage.is-demo 的绿色渐变
   这里清掉渐变与边框投影，让该块与页面底色融为一体。 */
#benefits-journey-demo.ai-story-stage.is-demo{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 22.2 【顶满宽度】原有三层内缩：
   .ai-story-final .phone-row 的 padding:20px、
   .ai-story-final .demo-body 的 max-width:720px、
   以及 stage 自身的 padding。全部解除。 */
#benefits-journey-demo{
  padding: 0 !important;
}
#benefits-journey-demo .phone-row.reverse{
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
#benefits-journey-demo .demo-body{
  max-width: none !important;
  width: 100%;
}

/* 22.3 权益旅程 Demo 使用真实的双层手机画布：
   外层 750 × 1624，内部权益浮层 750 × 1368，从顶部 256px 处开始。 */
#benefits-journey-demo .phone-frame{
  aspect-ratio: 750 / 1624;
  background: #505050;
}
#benefits-journey-demo .phone-backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
#benefits-journey-demo .phone-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.7);
  pointer-events: none;
}
#benefits-journey-demo .phone-overlay{
  position: absolute;
  top: calc(100% * 256 / 1624);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: 3.2% 3.2% 0 0;
  background: #000;
}
#benefits-journey-demo .phone-overlay video{
  object-position: center;
}

/* Preserve the current Cathay full-screen phone-video treatment in this branch. */
#benefits-journey-demo .phone-frame.is-fullscreen-video .phone-backdrop{
  display: none;
}
#benefits-journey-demo .phone-frame.is-fullscreen-video::before,
#benefits-journey-demo .phone-frame.is-fullscreen-video::after{
  display: none;
}
#benefits-journey-demo .phone-frame.is-fullscreen-video .phone-overlay{
  inset: 0;
  border-radius: 0;
}
#benefits-journey-demo .phone-frame.is-fullscreen-video .phone-overlay video{
  object-fit: cover;
  object-position: center;
}

/* 22.4 Logo 素材是 900px 宽的原图，必须在导航内显式约束；
   否则其固有宽度会把章节与语言按钮推到移动端视口外。 */
.nav-logo{
  display: flex;
  min-width: 0;
  align-items: center;
}
.nav-logo img{
  width: auto;
  max-width: 142px;
  height: 20px;
  object-fit: contain;
}
@media (max-width: 640px){
  .nav-logo{ padding-right: 12px; padding-left: 12px; }
  .nav-logo img{ max-width: 112px; height: 18px; }
  .nav-chapters a{ padding-right: 12px; padding-left: 12px; }
  .lang-switch{ margin-right: 8px; }
}

/* ============================================================
   23. 动效系统 — 参考 Raycast 的克制原则
   原则（来自其官网实测，非照搬视觉）：
   1. 时长短：微交互 120-180ms，位移类 240ms，绝不超过 400ms
   2. 缓动统一：出场用 ease-out（快起慢收），符合物理直觉
   3. 位移小：hover 位移 ≤2px，靠亮度/描边变化承载反馈而非大幅移动
   4. 一次只动一个属性组，避免同时 scale+translate+shadow 的廉价感
   ============================================================ */
:root{
  /* 缓动：standard 用于绝大多数；emphasis 用于入场；exit 用于消失 */
  --ease-standard: cubic-bezier(.32,.72,0,1);
  --ease-emphasis: cubic-bezier(.22,1,.36,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);
  /* 时长三档 */
  --dur-fast: 140ms;   /* 颜色、透明度、描边 */
  --dur-base: 220ms;   /* 位移、尺寸 */
  --dur-slow: 380ms;   /* 入场、大块过渡 */
}

/* 23.1 交互元件统一过渡：只过渡明确列出的属性，不用 all
   （all 会把 layout 属性也纳入，是卡顿常见来源） */
.cap-card, .period-card, .integration-card, .delivery-spec,
.cost-tier, .tpl-btn, .ai-story-tab, .nav a, .lang-btn,
.integration-phase, .process-item{
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color     var(--dur-fast) var(--ease-standard),
    color            var(--dur-fast) var(--ease-standard),
    transform        var(--dur-base) var(--ease-standard),
    box-shadow       var(--dur-base) var(--ease-standard);
}

/* 23.2 卡片 hover：2px 微位移 + 描边提亮，不加阴影堆叠 */
.cap-card:hover, .period-card:hover,
.integration-card:hover, .delivery-spec:hover, .cost-tier:hover{
  transform: translateY(-2px);
  border-color: rgba(2,157,76,.28);
}

/* 23.3 可点击元件：按下即时回弹，给出物理反馈 */
.tpl-btn:active, .ai-story-tab:active, .lang-btn:active{
  transform: translateY(0) scale(.985);
  transition-duration: 80ms;
}

/* 23.4 链接与标签 hover：只变色，不位移（避免文字抖动） */
.nav a:hover, .ai-story-tab:hover{
  color: var(--green, #029D4C);
  transform: none;
}

/* 23.5 滚动入场：位移从 16px 收到 10px，更接近 Raycast 的克制感 */
.cap-card, .stk-row, .process-item, .period-card,
.integration-phase, .integration-card, .delivery-spec,
.market-case, .cost-workflow, .cost-tier, .demo-body{
  --reveal-y: 10px;
}

/* 类名驱动入场态，避免 h5-editor 把状态烘焙成内联样式后永久锁死动效 */
.is-reveal{
  opacity: 0;
  transform: translateY(var(--reveal-y, 10px));
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.is-reveal.is-revealed{
  opacity: 1;
  transform: translateY(0);
}

/* 23.6 媒体元素：加载完成后淡入，避免闪白 */
.ai-story-collage img, .service-shooting-photo,
.seat-compare-media video{
  transition: opacity var(--dur-slow) var(--ease-emphasis);
}

/* 23.7 无障碍：尊重系统减弱动效设置 —— 全部关闭而非缩短 */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cap-card:hover, .period-card:hover,
  .integration-card:hover, .delivery-spec:hover, .cost-tier:hover{
    transform: none;
  }
}

/* 23.8 键盘焦点：统一为绿色描边环，与 hover 视觉区分 */
a:focus-visible, button:focus-visible,
.tpl-btn:focus-visible, .ai-story-tab:focus-visible{
  outline: 2px solid rgba(2,157,76,.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   24. 最终阅读体验精修
   参考 Raycast 的“单屏单焦点、悬浮工具条、短促进入动效”，
   同时吸收选岛页面的居中媒体舞台。所有新增动效只使用
   transform / opacity；静态光带不使用 filter 或常驻动画。
   ============================================================ */

/* 24.1 紧凑章节工具条：移动端保留全宽，桌面端形成悬浮舞台。 */
.nav{
  isolation: isolate;
}
.nav-chapters{
  gap: 2px;
  padding: 6px 4px;
}
.nav-chapters a{
  height: 40px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 10px;
}
.nav-chapters a.active{
  border-color: rgba(2,157,76,.16);
  background: rgba(2,157,76,.10);
  color: var(--ink);
}

@media (min-width: 768px){
  :root{ --nav-h: 72px; }
  main{ padding-top: 0; }
  .nav{
    top: 12px;
    right: auto;
    left: 50%;
    width: min(calc(100% - 32px), var(--measure));
    height: 52px;
    padding: 0 4px;
    overflow: hidden;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(7,10,8,.88);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    box-shadow: 0 18px 48px -30px rgba(0,0,0,.95), inset 0 1px rgba(255,255,255,.05);
  }
  .nav-logo{ padding-right: 16px; padding-left: 16px; }
  .nav-chapters a{ height: 38px; }
  #cover{
    min-height: 100svh !important;
    padding-top: 84px !important;
  }
}

/* 24.2 首屏：用静态“机舱光带”聚焦标题，不新增业务文案。 */
#cover{
  isolation: isolate;
  justify-content: center;
  text-align: center;
}
#cover .cover-bg{
  opacity: .92;
  filter: none !important;
  background:
    radial-gradient(ellipse 66% 52% at 50% 54%, rgba(2,157,76,.15), transparent 64%),
    repeating-linear-gradient(
      118deg,
      transparent 0 10%,
      rgba(2,157,76,.025) 11%,
      rgba(2,157,76,.19) 14%,
      rgba(2,157,76,.045) 18%,
      transparent 24%
    );
  mask-image: radial-gradient(ellipse 82% 72% at 50% 52%, #000 8%, rgba(0,0,0,.92) 45%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 52%, #000 8%, rgba(0,0,0,.92) 45%, transparent 78%);
}
#cover .cover-grid{
  opacity: .28;
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 64% 58% at 50% 54%, rgba(0,0,0,.72), transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 64% 58% at 50% 54%, rgba(0,0,0,.72), transparent 76%);
}

/* 首屏仅保留内容与底色，不使用光带、网格等背景装饰。 */
#cover .cover-bg,
#cover .cover-grid{
  display: none;
}
#cover .hero-title{
  width: 100% !important;
  max-width: 980px !important;
  height: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-wrap: balance;
}
.motion-ready #cover .hero-title{
  animation: cover-title-in 560ms var(--ease-emphasis) both;
}
@keyframes cover-title-in{
  from{ opacity: 0; transform: translateY(12px) scale(.992); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* 24.3 长页阅读：标题保持清晰行长，关键叙事块使用同一进入节奏。 */
section:not(#cover) > .section-title{
  max-width: 1060px !important;
  text-wrap: balance;
}
.is-reveal{
  transition-delay: var(--reveal-delay,0ms);
}
.effect-part-head,
.seat-compare-card,
.service-story-step,
.ai-story-stage,
.dual-growth-track,
.service-result-head{
  --reveal-y: 10px;
}

/* 24.4 媒体播放反馈：poster 先行，只在暂停时显示轻量播放标记。 */
.media-feedback-frame{
  position: relative;
  isolation: isolate;
}
.media-feedback-frame.is-media-playing{
  outline: 1px solid rgba(2,157,76,.22);
  outline-offset: -1px;
}
.media-play-indicator{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: translate(-50%,-50%) scale(1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(4,8,5,.82);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.95);
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.media-play-indicator::before{
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid rgba(235,255,240,.94);
}
.media-feedback-frame.is-media-playing .media-play-indicator{
  transform: translate(-50%,-50%) scale(.88);
  opacity: 0;
}
.media-feedback-frame.is-media-loading .media-play-indicator{
  opacity: .58;
}

/* 24.5 案例切换只做一次 4px 位移与淡显，不改变布局尺寸。 */
[data-ai-story-panel].is-panel-entering{
  animation: ai-story-panel-in 240ms var(--ease-standard) both;
}
@keyframes ai-story-panel-in{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine){
  .media-feedback-frame:not(.is-media-playing):hover .media-play-indicator{
    transform: translate(-50%,-50%) scale(1.04);
    border-color: rgba(2,157,76,.42);
  }
}

@media (max-width: 767px){
  #cover .cover-bg{ opacity: .72; }
  #cover .cover-grid{ opacity: .18; }
  .media-play-indicator{ width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce){
  .motion-ready #cover .hero-title,
  [data-ai-story-panel].is-panel-entering{
    animation: none !important;
  }
  .is-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0ms !important;
  }
  .media-play-indicator{
    transition: none !important;
  }
}

/* ============================================================
   24. 【05 接入】栅格系统统一
   ------------------------------------------------------------
   基线：4px 网格 / 12 列 / 左右边距沿用全站 --gutter / 列间距 20px
   注意：本节使用固定值而非 --sp-* 令牌。原因是 index.html 与
   本文件各自定义了一套同名 --sp-* 且取值不同（4/8/12/16/20/24/32/40
   vs 4/8/12/20/32/56/96），引用令牌会产生不可预期的结果。
   19.x 节大量使用 !important，故本节同级选择器需同等特异性。
   ============================================================ */

/* 24.1 章节容器：12 列栅格基准
   1440 视口下 → 内容宽 1248 = 12 列 × 84 + 11 × 20 */
#sec-input{
  --grid-gap: 20px;
  --card-pad: 28px;
  --rhythm-block: 72px;   /* 块间距 */
  --rhythm-head: 20px;    /* 小标题→内容 */
}

/* 24.2 图标：40×40 固定，与 4px 网格对齐 */
#sec-input .delivery-spec-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin-bottom: 16px;
  border: 1px solid rgba(2,157,76,.26);
  border-radius: 10px;
  background: rgba(2,157,76,.055);
  color: var(--green);
}
#sec-input .delivery-spec-icon svg{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* 24.3 列间距统一为 20px：下载区原为 10px，与其他栅格不一致 */
#sec-input .integration-content-grid,
#sec-input .delivery-spec-grid,
#sec-input .tpl-download{
  gap: var(--grid-gap) !important;
  align-items: stretch;
}

/* 24.4 卡片内距统一 28px
   原：接入卡 32 / 规范卡 26 / 下载按钮 20·24 三种值并存 */
#sec-input .integration-card,
#sec-input .delivery-spec{
  padding: var(--card-pad) !important;
  border-radius: 16px !important;
}
#sec-input .tpl-btn{
  padding: 22px var(--card-pad) !important;
  border-radius: 12px !important;
}

/* 24.5 交付规范卡：纵向流，三卡的说明列表从同一顶部基线开始。 */
#sec-input .delivery-spec{
  display: flex;
  flex-direction: column;
  height: auto;
}
#sec-input .delivery-spec-kicker{ margin-bottom: 6px; }
#sec-input .delivery-spec h3{ margin-top: 0; margin-bottom: 12px; }
#sec-input .delivery-spec-kpis{ margin: 0 0 16px !important; }
#sec-input .delivery-spec ul{ margin-top: 0; gap: 10px; }

/* 24.6 垂直节奏：统一为 4px 网格上的三级阶梯
   eyebrow→标题 12 / 标题→流程条 40 / 块间 72 / 小标题→内容 20 */
#sec-input > .integration-flow{ margin-top: 40px !important; }
#sec-input > .integration-block{ margin-top: var(--rhythm-block) !important; }
#sec-input .integration-block-head{
  margin-bottom: var(--rhythm-head) !important;
  padding-bottom: 12px !important;
}

/* 24.7 流程条：三栏等分，与下方 12 列栅格共用 20px 间距。
   原用 padding 制造间隔导致首列与其他列左边界不齐。 */
#sec-input .integration-flow{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: var(--grid-gap) !important;
  padding: 18px 0 !important;
}
#sec-input .integration-phase{
  padding: 0 !important;
  grid-template-columns: 26px minmax(0,1fr) !important;
  column-gap: 10px !important;
}
/* 分隔线用绝对定位伪元素，落在列间距正中，不占据文档流。
   原用 border-left + padding-left 会把 2/3 列内容右推 21px，
   导致三列文字起点不在各自列的同一相对位置。 */
#sec-input .integration-phase{ position: relative; }
#sec-input .integration-phase + .integration-phase{
  padding-left: 0 !important;
  border-left: 0 !important;
}
#sec-input .integration-phase + .integration-phase::before{
  content: "";
  position: absolute;
  left: calc(var(--grid-gap) / -2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.07);
}

/* 24.8 下载说明：与按钮组保持 18px，并对齐左边界 */
#sec-input .integration-download-note{
  margin-top: 18px !important;
  padding-left: 0 !important;
}

/* 24.9 响应式：列数逐级收敛，卡片内距与块间距同步缩放。
   左右边距由全站 --gutter 媒体查询统一控制，此处不重复定义。 */
@media (max-width: 1200px){
  #sec-input{ --card-pad: 24px; --rhythm-block: 56px; }
  /* 三张规范卡保持 3 列到 900px：改 2 列会让第三张孤立成半行 */
}
@media (max-width: 900px){
  #sec-input{ --card-pad: 22px; --rhythm-block: 48px; }
  #sec-input .integration-content-grid,
  #sec-input .delivery-spec-grid,
  #sec-input .tpl-download{ grid-template-columns: minmax(0,1fr) !important; }
  /* 单列后行距沿用 --grid-gap，避免与其他栅格出现两种间距 */
  #sec-input .integration-flow{ grid-template-columns: minmax(0,1fr) !important; }
  #sec-input .integration-phase + .integration-phase{
    padding-top: 16px !important;
  }
  #sec-input .integration-phase + .integration-phase::before{
    left: 0;
    right: 0;
    top: calc(var(--grid-gap) / -2);
    bottom: auto;
    width: auto;
    height: 1px;
  }
}
@media (max-width: 640px){
  #sec-input{ --card-pad: 20px; --rhythm-block: 40px; --grid-gap: 12px; }
  #sec-input .delivery-spec ul{ margin-top: 16px; }
}

/* ============================================================
   25. 【03 开发周期】栅格系统统一
   ------------------------------------------------------------
   诊断（1440 实测）：
   - 章节宽 1352 而非 1440，内容左边界 140 而非 96
     → 与其余四节差 44px，滚动时横向跳动（已在 18.5 白名单修复）
   - 四张周期卡等高 372px，但前三张内容底只到 212，
     各留 160px 空白；第四张 Reference 内容到 343，仅留 29
     → 根因是把「档位摘要」与「工期明细」两类内容塞进同一排四等分
   - period-grid gap 12px，与全站栅格 20px 不一致
   - 卡片内距 24px，与 sec-input 统一后的 28px 不一致
   同样不使用 --sp-* 令牌（两套同名定义冲突，见第 24 节说明）。
   ============================================================ */

#sec-process{
  --grid-gap: 20px;
  --card-pad: 28px;
  --rhythm-block: 56px;
}

/* 25.1 列间距与内距对齐全站栅格 */
#sec-process .period-grid{
  gap: var(--grid-gap) !important;
  margin-top: var(--rhythm-block) !important;
}
#sec-process .period-card{
  padding: var(--card-pad) !important;
  display: flex;
  flex-direction: column;
}

/* 25.2 等高保留（17.10 的既定规则），解决的是内容分布而非高度。
   前三张「档位摘要」内容约 212px，第四张「工期明细」约 343px。
   此前 160px 空白全部堆在卡片尾部；改为在数字与描述之间弹性留白，
   让描述贴住卡片底部，形成「标题组—数字—描述」三段式，
   四张卡的顶部与底部基线由此对齐。 */
#sec-process .period-card > .period-desc{
  margin-top: auto !important;
  padding-top: 20px;
}
/* 描述与卡片底之间保持与内距同源的呼吸量 */
#sec-process .period-card:not(.period-card-reference) .period-desc{
  padding-bottom: 2px;
}

/* 25.3 数字层级：档位卡与 Reference 卡区分主次
   原四张同为 28px（Reference 被放大到 34px），量级混乱 */
#sec-process .period-duration{
  margin: 14px 0 !important;
}

/* 25.4 Reference 卡明细表：与卡片内距对齐，撑满剩余高度 */
#sec-process .period-milestones{
  margin-top: 16px !important;
  padding-top: 14px !important;
}
#sec-process .period-caveat{
  margin-top: 14px !important;
}

/* 25.5 流程列表：与周期卡组保持同一档块间距
   原 40px，与上方 56px 不同档，三个模块节奏不均 */
#sec-process .process-list{
  margin-top: var(--rhythm-block) !important;
}

/* 25.6 流程条目：序号列宽与正文缩进对齐 4px 网格
   原 46px 列宽 + 12px 内缩 = 58px，非网格值 */
#sec-process .process-item{
  grid-template-columns: 40px minmax(0,1fr) !important;
  padding-bottom: 28px !important;
}
#sec-process .process-body{
  padding-left: 0 !important;
}
#sec-process .process-item:last-child{
  padding-bottom: 0 !important;
}

/* 25.7 hairline 在本节 display:none 却仍占 32px 上下外边距，
   造成两处不可见的空隙。彻底折叠。 */
#sec-process > .hairline{
  margin: 0 !important;
}

/* 25.8 响应式：列数逐级收敛，与 sec-input 断点保持一致 */
@media (max-width: 1200px){
  #sec-process{ --card-pad: 24px; --rhythm-block: 48px; }
  #sec-process .period-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 900px){
  #sec-process{ --card-pad: 22px; --rhythm-block: 40px; }
}
@media (max-width: 640px){
  #sec-process{ --card-pad: 20px; --rhythm-block: 32px; --grid-gap: 12px; }
  #sec-process .period-grid{ grid-template-columns: minmax(0,1fr) !important; }
  #sec-process .process-item{ grid-template-columns: 32px minmax(0,1fr) !important; }
}

/* ============================================================
   26. Part 1 · 双轮增长结构重构
   Figma 关系：左侧旅客价值 / 中央合作核心 / 右侧品牌价值。
   ============================================================ */
#sec-capability .dual-wheel-block{
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(40px,5vw,72px) !important;
  padding: clamp(30px,4vw,56px) !important;
  border: 1px solid rgba(2,157,76,.16) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 58%,rgba(2,157,76,.085),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.042),rgba(5,9,6,.84) 46%,rgba(2,157,76,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 28px 80px -52px rgba(0,0,0,.9) !important;
}
#sec-capability .dual-wheel-block::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  height: auto;
  opacity: .3;
  background-image:
    linear-gradient(rgba(2,157,76,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(2,157,76,.08) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 55%,#000,transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 55%,#000,transparent 70%);
}
#sec-capability .dual-wheel-head{
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr);
  gap: clamp(32px,5vw,80px);
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#sec-capability .dual-wheel-kicker{
  margin-bottom: 12px;
  color: var(--green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#sec-capability .dual-wheel-title{
  width: 100%;
  max-width: none;
  margin: 0;
  text-wrap: balance;
}
#sec-capability .dual-wheel-intro{
  max-width: 38ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}
#sec-capability .dual-growth-system{
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(320px,1.12fr) minmax(0,.9fr);
  gap: clamp(16px,2vw,24px);
  align-items: stretch;
  margin-top: 28px;
}
#sec-capability .dual-growth-track{
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 438px;
  flex-direction: column;
  padding: clamp(22px,2.4vw,32px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.014) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#sec-capability .dual-growth-track::after{
  content: "";
  position: absolute;
  right: -36px;
  bottom: -54px;
  width: 170px;
  height: 170px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .07;
}
#sec-capability .dual-growth-track.is-profit{
  color: var(--green);
  border-color: rgba(2,157,76,.24);
  background: linear-gradient(155deg,rgba(2,157,76,.075),rgba(255,255,255,.014) 58%);
}
#sec-capability .dual-growth-track.is-brand{
  color: var(--wheel-brand);
  border-color: rgba(129,120,255,.28);
  background: linear-gradient(155deg,rgba(129,120,255,.065),rgba(255,255,255,.014) 58%);
}
#sec-capability .dual-growth-track-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
#sec-capability .dual-growth-track .flywheel-num{
  color: currentColor;
  font-family: var(--mono);
}
#sec-capability .dual-growth-track-label{
  padding: 7px 10px;
  color: currentColor;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  opacity: .74;
}
#sec-capability .dual-growth-track-copy{
  margin-top: 30px;
}
#sec-capability .dual-growth-track-copy h4{
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px,2vw,28px);
  line-height: 1.25;
}
#sec-capability .dual-growth-track-copy p{
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.68;
}
#sec-capability .dual-growth-steps{
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.08);
}
#sec-capability .dual-growth-steps li{
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.16);
}
#sec-capability .dual-growth-steps li span{
  color: currentColor;
  font-family: var(--mono);
  opacity: .68;
}
#sec-capability .dual-growth-steps li strong{
  font-weight: 600;
}
#sec-capability .dual-growth-core{
  position: relative;
  display: grid;
  min-height: 438px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(2,157,76,.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at center,rgba(2,157,76,.085),transparent 40%),
    rgba(3,7,4,.64);
}
#sec-capability .dual-growth-core::before,
#sec-capability .dual-growth-core::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(2,157,76,.52));
}
#sec-capability .dual-growth-core::before{ left: 0; }
#sec-capability .dual-growth-core::after{ right: 0; transform: rotate(180deg); }
#sec-capability .dual-growth-orbit{
  position: absolute;
  width: 61%;
  aspect-ratio: 1;
  border: 1px solid rgba(2,157,76,.28);
  border-radius: 50%;
}
#sec-capability .dual-growth-orbit::before{
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 50%;
}
#sec-capability .dual-growth-orbit::after{
  content: "";
  position: absolute;
  top: 12%;
  right: 14%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(2,157,76,.72);
}
#sec-capability .dual-growth-orbit.is-profit-orbit{
  transform: translateX(-17%) rotate(-18deg);
}
#sec-capability .dual-growth-orbit.is-brand-orbit{
  transform: translateX(17%) rotate(162deg);
  border-color: rgba(129,120,255,.34);
}
#sec-capability .dual-growth-orbit.is-brand-orbit::after{
  background: var(--wheel-brand);
  box-shadow: 0 0 18px rgba(129,120,255,.72);
}
#sec-capability .dual-growth-hub{
  position: relative;
  z-index: 3;
  display: grid;
  width: min(72%,250px);
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 22px;
  border: 1px solid rgba(2,157,76,.34);
  border-radius: 18px;
  background: rgba(5,10,6,.92);
  box-shadow: 0 24px 70px -36px rgba(2,157,76,.6),inset 0 1px 0 rgba(255,255,255,.06);
  text-align: center;
}
#sec-capability .dual-growth-hub-status{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 14px rgba(2,157,76,.84);
}
#sec-capability .dual-growth-hub strong{
  color: var(--ink);
  line-height: 1.35;
}
#sec-capability .dual-growth-hub small{
  max-width: 19ch;
  color: var(--ink-3);
  line-height: 1.5;
}
#sec-capability .dual-growth-core-node{
  position: absolute;
  z-index: 4;
  left: 50%;
  min-width: 96px;
  transform: translateX(-50%);
  padding: 7px 10px;
  color: var(--green);
  border: 1px solid rgba(2,157,76,.26);
  border-radius: 999px;
  background: rgba(4,9,5,.9);
  font-family: var(--mono);
  text-align: center;
}
#sec-capability .dual-growth-core-node.is-top{ top: 38px; }
#sec-capability .dual-growth-core-node.is-bottom{
  bottom: 38px;
  color: var(--wheel-brand);
  border-color: rgba(129,120,255,.32);
}
#sec-capability .dual-growth-track.is-profit .dual-growth-steps li span{
  color: var(--green);
}
#sec-capability .dual-growth-track.is-brand .dual-growth-steps li span{
  color: var(--wheel-brand);
}
#sec-capability .dual-wheel-conclusion{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 28px;
  align-items: center;
  margin-top: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(2,157,76,.16);
  border-radius: 14px;
  background: rgba(2,157,76,.045);
  text-align: left;
}
#sec-capability .dual-wheel-conclusion strong{
  color: var(--green);
  white-space: nowrap;
}
#sec-capability .dual-wheel-conclusion span{
  color: var(--ink-3);
  line-height: 1.55;
}

/* 合作价值模块是独立的一屏叙事：标题、说明和双轮图在一次停留中完整呈现。 */
@media (min-width: 641px){
  #sec-capability .dual-wheel-block{
    min-height: calc(100svh - var(--nav-h) - 28px);
  }
  #sec-capability .dual-growth-system{
    flex: 1 1 auto;
    min-height: max(438px, 56svh);
  }
  #sec-capability .dual-growth-track,
  #sec-capability .dual-growth-core{
    min-height: 0;
  }
}

@media (hover:hover) and (pointer:fine){
  #sec-capability .dual-growth-track{
    transition: transform 260ms var(--ease-standard),border-color 260ms var(--ease-standard),background 260ms var(--ease-standard);
  }
  #sec-capability .dual-growth-track:hover{
    transform: translateY(-4px);
    border-color: rgba(2,157,76,.38);
  }
  #sec-capability .dual-growth-steps li{
    transition: border-color 180ms ease,background 180ms ease;
  }
  #sec-capability .dual-growth-track:hover .dual-growth-steps li{
    border-color: rgba(2,157,76,.16);
    background: rgba(2,157,76,.035);
  }
}

@media (max-width: 1100px){
  #sec-capability .dual-wheel-head{
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  #sec-capability .dual-wheel-title{ max-width: 24ch; }
  #sec-capability .dual-wheel-intro{ max-width: 60ch; }
  #sec-capability .dual-growth-system{
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #sec-capability .dual-growth-core{
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 360px;
  }
  #sec-capability .dual-growth-track{ min-height: 410px; }
}

@media (max-width: 640px){
  #sec-capability .dual-wheel-block{
    padding: 20px !important;
    border-radius: 22px !important;
  }
  #sec-capability .dual-wheel-title{
    max-width: none;
}
  #sec-capability .dual-growth-system{
    grid-template-columns: 1fr;
  }
  #sec-capability .dual-growth-core{
    grid-column: auto;
    grid-row: auto;
    min-height: 320px;
  }
  #sec-capability .dual-growth-track{
    min-height: 390px;
  }
  #sec-capability .dual-wheel-conclusion{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #sec-capability .dual-wheel-conclusion strong{
    white-space: normal;
  }
}

/* 768px 以上保留三列关系，避免在演示屏宽度被折成两行而溢出一屏。 */
@media (min-width: 768px) and (max-width: 1100px){
  #sec-capability .dual-growth-system{
    grid-template-columns: minmax(0,.9fr) minmax(260px,1.12fr) minmax(0,.9fr);
  }
  #sec-capability .dual-growth-core{
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
  }
  #sec-capability .dual-growth-track{
    min-height: 0;
  }
}

/* 双 Demo 按真实画幅展示：座椅为竖幅，权益视频为横幅，不再裁成等大的正方形。 */
#sec-capability .capability-board .cap-card:first-child .cap-card-media{
  aspect-ratio: 69 / 80;
}
#sec-capability .capability-board .cap-card:nth-child(2) .cap-card-media{
  aspect-ratio: 16 / 9;
}
#sec-capability .capability-board .cap-card:nth-child(2) .cap-card-media video{
  object-fit: cover;
}
@media (min-width: 641px){
  #sec-capability .capability-board .cap-grid{
    grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr) !important;
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce){
  #sec-capability .dual-growth-track,
  #sec-capability .dual-growth-steps li{
    transition: none !important;
  }
}

/* ============================================================
   27. 成本页空列修复
   旧 cost-compare 保留了 1fr / 140px / 1fr 对比栅格，
   但实际只有一个子节点，因此右侧成为假空白。
   现将实例视频与传统成本说明收进一张满宽卡。
   ============================================================ */
#sec-cost .cost-part-seat .cost-compare{
  display: block !important;
  width: 100%;
  margin-top: 24px !important;
}
#sec-cost .cost-part-seat .cost-side.has-media{
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr);
  width: 100%;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.014)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#sec-cost .cost-part-seat .cost-side-media{
  width: 100%;
  height: 100%;
  min-height: 420px;
  margin: 0 !important;
  aspect-ratio: auto;
  border-right: 1px solid rgba(255,255,255,.09);
  border-bottom: 0;
  border-radius: 17px 0 0 17px !important;
}
#sec-cost .cost-part-seat .cost-side-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#sec-cost .cost-part-seat .cost-side-copy{
  display: flex;
  min-width: 0;
  margin: 0 !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px,4vw,52px) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(2,157,76,.06),transparent 42%),
    rgba(5,8,6,.46);
}
#sec-cost .cost-part-seat .cost-side-headline{
  max-width: 360px;
  margin-bottom: 24px;
}
#sec-cost .cost-part-seat .cost-num{
  margin-bottom: 14px;
}
#sec-cost .cost-part-seat .cost-side-label{
  max-width: 34ch;
}

@media (max-width: 899px){
  #sec-cost .cost-part-seat .cost-side.has-media{
    grid-template-columns: 1fr;
  }
  #sec-cost .cost-part-seat .cost-side-media{
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    border-radius: 17px 17px 0 0 !important;
  }
  #sec-cost .cost-part-seat .cost-side-headline{
    max-width: 24ch;
  }
}

/* ============================================================
   28. WIDE-SCREEN CANVAS — 留出左右的安静空间
   页面背景继续铺满，阅读和演示内容则收在统一版心内。此前部分
   大屏规则将 section 再次撑满，抵消了封面已经具备的左右留白。
   ============================================================ */
@media (min-width: 1440px){
  main > section:not(#cover){
    width: 100%;
    max-width: calc(1160px + 96px * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: 96px;
    padding-right: 96px;
  }
}

/* ============================================================
   29. 浏览器批注 1—6 · 信息顺序与明确栅格
   让主要 Demo 先出现；周期为单列横向卡；成本与交付规范在
   演示宽度内保持一行，并强化 Pro 价格层级。
   ============================================================ */

/* 29.1 权益旅程 Demo 是服务 Part 的主要介绍，紧跟主标题。 */
#sec-effect-service .service-primary-demo{
  position: relative;
  z-index: 2;
  margin: clamp(28px,4vw,48px) 0 clamp(52px,6vw,80px);
}
#sec-effect-service .service-primary-demo .service-result-head{
  margin-top: 0 !important;
}
#sec-effect-service .service-primary-demo #benefits-journey-demo{
  margin-top: 18px !important;
}

/* 29.2 周期卡改为一列；每一张卡内部保持横向扫描效率。 */
#sec-process .period-grid{
  grid-template-columns: minmax(0,1fr) !important;
  gap: 14px !important;
}
#sec-process .period-card{
  display: grid !important;
  grid-template-columns: minmax(160px,.72fr) minmax(170px,.62fr) minmax(0,1.66fr);
  gap: clamp(20px,3vw,40px);
  align-items: center;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(22px,2.6vw,32px) !important;
}
#sec-process .period-card-heading,
#sec-process .period-card-detail{
  min-width: 0;
}
#sec-process .period-card-heading{
  display: grid;
  gap: 8px;
}
#sec-process .period-card .period-tier,
#sec-process .period-card .period-name,
#sec-process .period-card .period-duration,
#sec-process .period-card .period-desc,
#sec-process .period-card .period-milestones,
#sec-process .period-card .period-caveat{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#sec-process .period-card .period-duration{
  white-space: nowrap;
}
#sec-process .period-card .period-desc{
  padding: 0 !important;
  max-width: 66ch;
}
#sec-process .period-card-reference .period-card-detail{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(210px,.9fr);
  gap: 20px;
  align-items: center;
}
#sec-process .period-card-reference .period-milestones{
  padding: 12px 14px !important;
}
#sec-process .period-card-reference .period-caveat{
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.08);
}

/* 29.3 995px 演示视口内，座椅视频与价格说明保持横向一行。 */
@media (min-width: 900px){
  #sec-cost .cost-part-seat .cost-side.has-media{
    display: grid !important;
    grid-template-columns: minmax(0,1.18fr) minmax(320px,.82fr) !important;
  }
}

/* 29.4 只强化 Pro 方案的 40 万价格，不改变其他档位文案。 */
#sec-cost .cost-tier.recommended .cost-tier-price{
  width: 100%;
  margin-top: auto !important;
  padding: 18px 22px 20px !important;
  border: 1px solid rgba(2,157,76,.42) !important;
  border-radius: 14px;
  background:
    radial-gradient(circle at 88% 18%,rgba(2,157,76,.2),transparent 42%),
    linear-gradient(135deg,rgba(2,157,76,.13),rgba(2,157,76,.035));
  color: var(--green) !important;
  font-family: var(--numeric),var(--mono);
  text-shadow: 0 0 28px rgba(2,157,76,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(2,157,76,.04);
}

/* 29.5 视频、图片、文案三张交付卡在演示视口内横向一行。 */
@media (min-width: 769px){
  #sec-input .delivery-spec-grid{
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 859px){
  #sec-process .period-card{
    grid-template-columns: minmax(0,1fr);
    gap: 16px;
  }
  #sec-process .period-card-reference .period-card-detail{
    grid-template-columns: minmax(0,1fr);
    gap: 14px;
  }
  #sec-process .period-card-reference .period-caveat{
    padding: 14px 0 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-left: 0;
  }
}

@media (max-width: 768px){
  #sec-input .delivery-spec-grid{
    grid-template-columns: minmax(0,1fr) !important;
  }
}

/* ============================================================
   30. 有序入场编排 — 产品页式的级联展示
   参考 Raycast 的做法：同屏元素不是一起冒出，而是按阅读顺序
   依次亮起，配合极轻的模糊消散建立“正在被呈现”的秩序感。
   只使用 opacity / transform / filter，不触发布局回流。
   ============================================================ */
:root{
  --reveal-step: 70ms;   /* 相邻元素的级联间隔，由 JS 累乘 */
  --reveal-blur: 5px;    /* 文本类入场的消散强度 */
}

/* 30.1 级联延迟由 JS 按文档顺序写入 --reveal-delay */
.is-reveal{
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.is-reveal.is-revealed{
  will-change: auto;
}

/* 30.2 文本与轻量块加入模糊消散；媒体块不加 filter，避免视频重新合成 */
.is-reveal.reveal-soft{
  filter: blur(var(--reveal-blur));
  transition-property: opacity, transform, filter;
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-emphasis);
}
.is-reveal.reveal-soft.is-revealed{
  filter: blur(0);
}

/* 30.3 成本章：让每一个信息单元都参与编排，而不是整块突然出现 */
#sec-cost .cost-thesis,
#sec-cost .cost-part,
#sec-cost .cost-side,
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-ai-pipeline-head,
#sec-cost .cost-ai-stage,
#sec-cost .service-shooting-card,
#sec-cost .service-shooting-takeaway,
#sec-cost .tier-intro,
#sec-cost .cost-tier{
  --reveal-y: 12px;
}

/* 30.4 AI 四步与三档方案是节奏点，位移略大以强调递进 */
#sec-cost .cost-ai-stage{ --reveal-y: 14px; }
#sec-cost .cost-tier{ --reveal-y: 16px; }

/* 30.5 章节标题组：眉标 → 大标题 → 论点，三拍进入 */
#sec-cost .eyebrow,
#sec-cost .section-title{
  --reveal-y: 10px;
}

/* 30.6 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce){
  .is-reveal,
  .is-reveal.reveal-soft{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-delay: 0ms !important;
  }
}

/* ============================================================
   31. DECK-WIDE GRID — 全页演示排版收口
   保留既有黑绿品牌与真实 Demo；统一封面、章节轴、内容版心和
   卡片表面，让长滚动页面也拥有一套连贯的演示节奏。
   ============================================================ */
:root{
  --deck-rule: rgba(255,255,255,.10);
  --deck-muted: rgba(255,255,255,.62);
  --deck-card: rgba(255,255,255,.028);
}
main > section:not(#cover){
  width: min(100%, calc(var(--measure) + var(--gutter) * 2));
  margin-right: auto;
  margin-left: auto;
  padding-top: clamp(72px,8vw,112px);
  padding-right: var(--gutter);
  padding-bottom: clamp(72px,8vw,112px);
  padding-left: var(--gutter);
}
main > section:not(#cover) > .eyebrow{
  margin-bottom: 14px;
  color: var(--green);
  font-family: var(--mono);
}
main > section:not(#cover) > .section-title{
  max-width: 25ch;
}
main > section:not(#cover) > .section-title + *{
  margin-top: clamp(32px,4vw,56px);
}
#cover{
  width: 100% !important;
  height: auto !important;
  min-height: calc(100svh - var(--nav-h));
  padding: clamp(72px,10vw,136px) var(--gutter) clamp(64px,8vw,112px) !important;
}
#cover .hero-title{
  width: min(100%, var(--measure));
  margin: auto 0 0 !important;
  text-align: left !important;
}
#cover::after{
  content: "FLIGGY DESIGN · IMMERSIVE EXPERIENCE";
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, var(--measure));
  margin: 20px 0 0;
  color: var(--green);
  font-family: var(--mono); font-weight: 600; font-size: var(--tn-label); line-height: 1.3;
  letter-spacing: .12em;
}
.chapter-divider{
  width: min(calc(100% - var(--gutter) * 2), var(--measure));
  margin: 0 auto;
  background: var(--deck-rule);
}
.chapter-divider::after{
  width: 6px;
  height: 6px;
  border-radius: 0;
  box-shadow: none;
}
/* 叶子卡统一为低对比玻璃面；布局容器不再叠第二层装饰。 */
.cap-card,
.seat-compare-card,
.integration-card,
.period-card,
.cost-tier,
.delivery-spec,
.service-shooting-card{
  border-color: var(--deck-rule) !important;
  background-color: var(--deck-card) !important;
}
.cap-card p,
.period-desc,
.cost-thesis,
.delivery-spec p,
.integration-card p{
  color: var(--deck-muted);
  font-size: 16px;
  line-height: 1.6;
}
@media (max-width: 1023px){
  main > section:not(#cover){
    padding-top: 72px;
    padding-bottom: 72px;
  }
}
@media (max-width: 640px){
  main > section:not(#cover){
    padding-top: 64px;
    padding-bottom: 64px;
  }
  main > section:not(#cover) > .section-title{
    max-width: none;
}
  #cover{
    min-height: calc(100svh - var(--nav-h));
    padding-top: 64px !important;
    padding-bottom: 56px !important;
  }
  #cover::after{ margin-top: 16px; font-size: 10px; }
  .chapter-divider{ width: calc(100% - var(--gutter) * 2); }
}

/* ============================================================
   32. SWISS VISUAL REFRESH — guizang-ppt-skill / Style B
   12-column content logic, one accent, straight evidence frames,
   hairline hierarchy and inverse font-weight scale.
   ============================================================ */
:root{
  --swiss-paper: #fafaf8;
  --swiss-ink: #0a0a0a;
  --swiss-grey-1: #f0f0ee;
  --swiss-grey-2: #d4d4d2;
  --swiss-grey-3: #737373;
  --swiss-accent: #029D4C;
  --swiss-accent-on: #0a0a0a;
  --swiss-dark-card: #171717;
  --swiss-dark-rule: #383838;
  --green: var(--swiss-accent);
  --green-bright: var(--swiss-accent);
  --deck-rule: var(--swiss-grey-2);
  --deck-muted: var(--swiss-grey-3);
  --deck-card: var(--swiss-grey-1);
}
html{ background: var(--swiss-paper); }
body{
  background: var(--swiss-paper) !important;
  color: var(--swiss-ink);
  font-family: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body::before,
body::after{
  display: none !important;
  content: none !important;
}

/* Navigation stays black as the stable chrome above changing canvases. */
.nav{
  top: 0;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: var(--swiss-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.nav-logo{ border: 0 !important; }
.nav-chapters a,
.lang-switch button{
  min-height: 36px;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--swiss-grey-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nav-chapters a.active,
.lang-switch button[aria-pressed="true"]{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
.lang-switch{
  border: 1px solid var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Theme rhythm: accent cover → light → ink → light → grey → ink → light. */
main{ background: var(--swiss-paper); }
main > section{
  position: relative;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
main > section.swiss-light{
  background: var(--swiss-paper) !important;
  color: var(--swiss-ink);
}
main > section.swiss-grey{
  background: var(--swiss-grey-1) !important;
  color: var(--swiss-ink);
}
main > section.swiss-ink{
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper);
  --deck-rule: var(--swiss-dark-rule);
  --deck-muted: #a8a8a4;
  --deck-card: var(--swiss-dark-card);
}
main > section:not(#cover){
  width: min(100%, 1440px);
  padding-top: clamp(88px, 9vw, 132px);
  padding-bottom: clamp(88px, 9vw, 132px);
}
main > section:not(#cover) > .eyebrow{
  margin: 0 0 18px;
  color: var(--swiss-grey-3);
}
main > section.swiss-ink > .eyebrow{ color: var(--swiss-accent); }
main > section:not(#cover) > .section-title{
  max-width: 20ch;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}
main > section:not(#cover) > .section-title + *{
  margin-top: clamp(52px, 6vw, 88px);
}

/* Full-bleed typographic cover. */
#cover.swiss-accent{
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  align-content: end;
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on);
}
#cover .cover-bg,
#cover .cover-grid,
#cover .cover-audiences{ display: none !important; }
#cover .hero-title{
  position: relative;
  z-index: 1;
  width: min(9.5em, 100%);
  margin: 0 !important;
  color: var(--swiss-accent-on) !important;
  text-align: left !important;
  text-wrap: balance;
}
#cover::after{
  content: "FLIGGY DESIGN · AI NATIVE EXPERIENCE";
  width: 100%;
  margin: clamp(26px, 4vh, 52px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--swiss-accent-on);
  color: var(--swiss-accent-on);
  font-size: 16px;
  font-weight: 600;
}

/* Hairlines replace decorative chapter pills and glass dividers. */
.chapter-divider{
  width: min(calc(100% - var(--gutter) * 2), 1440px);
  height: 1px;
  margin: 0 auto;
  background: var(--swiss-grey-2) !important;
}
.chapter-divider::after{
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--swiss-accent) !important;
  border: 0 !important;
}
.hairline{
  height: 1px !important;
  background: var(--deck-rule) !important;
}

/* Remove consumer-card effects from presentation containers. */
.capability-board,
.capability-suite,
.capability-patent,
.cap-card,
.method-block,
.dual-wheel-block,
.dual-growth-track,
.dual-growth-core,
.dual-growth-hub,
.dual-wheel-conclusion,
.effect-part,
.seat-compare-card,
.seat-clip,
.service-primary-demo,
.ai-story,
.ai-story-stage,
.ai-story-surface,
.service-story-step,
.effect-bridge,
.period-card,
.process-item,
.cost-part,
.cost-side,
.cost-ai-pipeline,
.cost-ai-pipeline-intro,
.cost-ai-pipeline-main,
.cost-ai-stage,
.service-shooting-card,
.cost-tier,
.tier-intro,
.integration-flow,
.integration-phase,
.integration-block,
.integration-card,
.delivery-spec,
.live-demo-wrap{
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Capability / S05: two equal evidence frames, then the control system. */
#sec-capability .capability-board,
#sec-capability .capability-suite{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-capability .capability-patent{
  margin-bottom: 28px;
  padding: clamp(24px, 3vw, 40px);
  border: 0 !important;
  border-top: 1px solid var(--swiss-ink) !important;
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on);
}
#sec-capability .capability-patent-title{
  max-width: 28ch;
}
#sec-capability .capability-patent-link{
  min-height: 44px;
  border: 1px solid var(--swiss-accent-on) !important;
  border-radius: 0 !important;
  color: var(--swiss-accent-on) !important;
  font-size: 14px;
  font-weight: 600;
}
#sec-capability .cap-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--swiss-grey-2);
  border: 1px solid var(--swiss-grey-2);
}
#sec-capability .cap-grid > .cap-card{
  min-width: 0;
  border: 0 !important;
  background: var(--swiss-paper) !important;
}
#sec-capability .cap-grid > .cap-card:nth-child(1),
#sec-capability .cap-grid > .cap-card:nth-child(2){ grid-column: span 6; }
#sec-capability .cap-grid > .cap-card:nth-child(3){
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
}
#sec-capability .cap-card-media{
  aspect-ratio: 16 / 10 !important;
  border-radius: 0 !important;
  background: var(--swiss-ink);
}
#sec-capability .cap-card-media video{
  border-radius: 0 !important;
  object-fit: cover;
  object-position: center 42%;
}
#sec-capability .cap-card-content{
  padding: clamp(22px, 2.4vw, 34px) !important;
}
#sec-capability .cap-card h3{
  font-size: clamp(23px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.15;
}
#sec-capability .method-block,
#sec-capability .dual-wheel-block{
  margin-top: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3.6vw, 52px) !important;
  border: 1px solid var(--swiss-grey-2) !important;
  background: var(--swiss-grey-1) !important;
}
#sec-capability .tri-item,
#sec-capability .dual-growth-track,
#sec-capability .dual-wheel-conclusion{
  border-color: var(--swiss-grey-2) !important;
  background: var(--swiss-paper) !important;
}
#sec-capability .dual-growth-hub{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}

/* Effect / S08: evidence stays dark, straight and same-height within groups. */
#sec-effect .effect-part{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-effect .effect-part-title,
#sec-effect .effect-result-title{ color: var(--swiss-paper) !important; }
#sec-effect .seat-compare{
  gap: 1px;
  background: var(--swiss-dark-rule);
  border: 1px solid var(--swiss-dark-rule);
}
#sec-effect .seat-compare-card{
  border: 0 !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper);
}
#sec-effect .seat-compare-media,
#sec-effect .seat-compare-media video,
#sec-effect .seat-clip,
#sec-effect .seat-clip video{ border-radius: 0 !important; }
#sec-effect .seat-compare-kicker,
#sec-effect .seat-clip-label{
  color: var(--swiss-accent) !important;
}

/* Service evidence / S16: newspaper grid on paper. */
#sec-effect-service{
  border-top: 1px solid var(--swiss-grey-2);
}
#sec-effect-service .effect-part{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-effect-service .effect-part-title{
  max-width: 22ch;
}
#sec-effect-service .service-primary-demo,
#sec-effect-service .ai-story,
#sec-effect-service .service-story-step{
  border: 1px solid var(--swiss-grey-2) !important;
  background: var(--swiss-grey-1) !important;
}
#sec-effect-service .ai-story-stage,
#sec-effect-service .ai-story-surface{
  border-color: var(--swiss-grey-2) !important;
  background: var(--swiss-paper) !important;
}
#sec-effect-service .ai-story-collage img,
#sec-effect-service .ai-story-video{ border-radius: 0 !important; }
#sec-effect-service .ai-story-tab,
#sec-effect-service .demo-link,
#sec-effect-service .demo-badge{
  min-height: 42px;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#sec-effect-service .ai-story-tab[aria-selected="true"],
#sec-effect-service .demo-link{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-effect-service .effect-bridge{
  border: 0 !important;
  border-top: 1px solid var(--swiss-ink) !important;
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}

/* Process / S11: actual duration is the accent anchor; steps form a rail. */
#sec-process .period-grid{
  gap: 1px;
  background: var(--swiss-grey-2);
  border: 1px solid var(--swiss-grey-2);
}
#sec-process .period-card{
  border: 0 !important;
  background: var(--swiss-paper) !important;
}
#sec-process .period-card-reference{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-process .process-list{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 1px;
  overflow-x: auto;
  border: 1px solid var(--swiss-grey-2);
  background: var(--swiss-grey-2);
  scroll-snap-type: x proximity;
}
#sec-process .process-item{
  min-height: 100%;
  padding: clamp(22px, 2.5vw, 34px) !important;
  border: 0 !important;
  background: var(--swiss-paper) !important;
  scroll-snap-align: start;
}
#sec-process .process-dot{
  border-radius: 0 !important;
  background: var(--swiss-ink) !important;
  box-shadow: none !important;
}
#sec-process .process-dot.green{ background: var(--swiss-accent) !important; }

/* Cost / S08: black canvas, straight comparisons, one accent price card. */
#sec-cost .cost-thesis{
  max-width: 72ch;
  color: #b5b5b0 !important;
  font-size: 18px !important;
}
#sec-cost .cost-part,
#sec-cost .cost-ai-pipeline,
#sec-cost .service-shooting-card,
#sec-cost .cost-tier{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper);
}
#sec-cost .cost-side,
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-ai-pipeline-main,
#sec-cost .cost-ai-stage{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper);
}
#sec-cost video,
#sec-cost img,
#sec-cost figure{
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-cost .cost-num,
#sec-cost .service-shooting-cost-reference strong,
#sec-cost .cost-tier-price{
  font-family: "DIN Alternate", "DIN Condensed", "Arial Narrow", var(--sans) !important;
}
#sec-cost .cost-num{
  color: var(--swiss-accent) !important;
}
#sec-cost .tier-intro{
  border: 0 !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
  background: transparent !important;
}
#sec-cost .cost-tiers{
  gap: 1px;
  border: 1px solid var(--swiss-dark-rule);
  background: var(--swiss-dark-rule);
}
#sec-cost .cost-tier{ border: 0 !important; }
#sec-cost .cost-tier.recommended{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-cost .cost-tier.recommended *{ color: var(--swiss-accent-on) !important; }

/* Input / S19: simple numbered phases and factual return cards. */
#sec-input .integration-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--swiss-grey-2) !important;
  background: var(--swiss-grey-2) !important;
}
#sec-input .integration-phase,
#sec-input .integration-card,
#sec-input .delivery-spec{
  border: 0 !important;
  background: var(--swiss-grey-1) !important;
}
#sec-input .integration-block{
  border: 0 !important;
  border-top: 1px solid var(--swiss-ink) !important;
  background: transparent !important;
}
#sec-input .integration-card-tag,
#sec-input .integration-card-index,
#sec-input .integration-phase-no{
  border-radius: 0 !important;
  color: var(--swiss-ink) !important;
}
#sec-input .integration-card-index,
#sec-input .integration-phase-no{ background: var(--swiss-accent) !important; }
/* Size and weight for these card titles are owned by
   theme-typo-normalize.css so Chinese and English render identically. */

/* Preserve semantic device frames; presentation frames stay straight. */
.phone-frame,
.seat-demo-phone{ box-shadow: none !important; }

@media (max-width: 1023px){
  main > section:not(#cover){
    padding-top: 82px;
    padding-bottom: 82px;
  }
  main > section:not(#cover) > .section-title{
    max-width: 24ch;
}
  #sec-capability .dual-growth-system,
  #sec-effect-service .service-story-flow,
  #sec-cost .service-shooting-grid,
  #sec-cost .cost-tiers{ grid-template-columns: 1fr !important; }
}
@media (max-width: 767px){
  .nav{
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
  .nav-chapters{
    overflow-x: auto;
    white-space: nowrap;
  }
  main > section:not(#cover){
    padding-top: 72px;
    padding-bottom: 72px;
  }
  main > section:not(#cover) > .section-title{
    max-width: none;
}
  #cover::before,
  #cover::after{ font-size: 12px; }
  #sec-capability .cap-grid > .cap-card:nth-child(1),
  #sec-capability .cap-grid > .cap-card:nth-child(2),
  #sec-capability .cap-grid > .cap-card:nth-child(3){ grid-column: 1 / -1; }
  #sec-capability .cap-grid > .cap-card:nth-child(3){ grid-template-columns: 1fr; }
  #sec-effect .seat-compare,
  #sec-input .integration-flow{ grid-template-columns: 1fr !important; }
  #sec-effect .seat-compare-arrow{ transform: rotate(90deg); }
  #sec-process .period-grid{ grid-template-columns: 1fr !important; }
}

/* 32.1 Capability specificity guard: legacy deck rules use a deeper selector. */
#sec-capability .capability-board .capability-patent{
  margin-bottom: 28px !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-ink) !important;
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-capability .capability-board .cap-grid{
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 1px !important;
  padding: 0 !important;
  border: 1px solid var(--swiss-grey-2) !important;
  background: var(--swiss-grey-2) !important;
}
#sec-capability .capability-board .cap-grid > .cap-card,
#sec-capability .capability-board .cap-grid > .cap-card:first-child,
#sec-capability .capability-board .cap-grid > .cap-card:last-child{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-capability .capability-board .cap-grid > .cap-card:nth-child(1),
#sec-capability .capability-board .cap-grid > .cap-card:nth-child(2){
  grid-column: span 6 !important;
}
#sec-capability .capability-board .cap-card-media,
#sec-capability .capability-board .cap-card-media video{
  border-radius: 0 !important;
}
@media (max-width: 767px){
  #sec-capability .capability-board .cap-grid{
    grid-template-columns: 1fr !important;
  }
  #sec-capability .capability-board .cap-grid > .cap-card:nth-child(1),
  #sec-capability .capability-board .cap-grid > .cap-card:nth-child(2){
    grid-column: 1 !important;
  }
}

/* 33.1 Final cascade lock — black is the deck foundation. */
html,
body,
main{
  background: var(--swiss-ink) !important;
}
#sec-capability.swiss-light,
#sec-effect-service.swiss-light,
#sec-input.swiss-light,
#sec-effect.swiss-ink,
#sec-cost.swiss-ink{
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper) !important;
  --deck-rule: var(--swiss-dark-rule);
  --deck-muted: #a8a8a4;
  --deck-card: var(--swiss-dark-card);
}
#sec-process.swiss-grey{
  background: #111111 !important;
  color: var(--swiss-paper) !important;
  --deck-rule: var(--swiss-dark-rule);
  --deck-muted: #a8a8a4;
  --deck-card: var(--swiss-dark-card);
}
#sec-capability > .section-title,
#sec-effect-service .effect-part-title,
#sec-process > .section-title,
#sec-input > .section-title{
  color: var(--swiss-paper) !important;
}
#cover.swiss-accent{
  background: var(--swiss-ink) !important;
  color: var(--swiss-paper) !important;
}
#cover .hero-title{ color: var(--swiss-paper) !important; }
#cover::before,
#cover::after{
  border-color: var(--swiss-accent) !important;
  color: var(--swiss-accent) !important;
}
.chapter-divider{ background: var(--swiss-dark-rule) !important; }

#sec-capability .capability-board .cap-grid{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-capability .capability-board .cap-grid > .cap-card,
#sec-capability .capability-board .cap-grid > .cap-card:first-child,
#sec-capability .capability-board .cap-grid > .cap-card:last-child{
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-capability .cap-card h3,
#sec-capability .cap-card-label{ color: var(--swiss-paper) !important; }
#sec-capability .cap-card p{ color: #a8a8a4 !important; }
#sec-capability .method-block,
#sec-capability .dual-wheel-block{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: #111111 !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-capability .tri-item,
#sec-capability .dual-growth-track,
#sec-capability .dual-wheel-conclusion{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-capability .method-title,
#sec-capability .tri-name,
#sec-capability .dual-wheel-title,
#sec-capability .dual-growth-track-copy h4,
#sec-capability .dual-growth-steps strong,
#sec-capability .dual-growth-steps span,
#sec-capability .dual-wheel-conclusion strong{ color: var(--swiss-paper) !important; }
#sec-capability .tri-desc,
#sec-capability .dual-wheel-intro,
#sec-capability .dual-growth-track-copy p,
#sec-capability .dual-wheel-conclusion span{ color: #a8a8a4 !important; }
#sec-capability .dual-growth-steps li{ background: #222222 !important; }

#sec-effect-service .service-primary-demo,
#sec-effect-service .ai-story,
#sec-effect-service .service-story-step{
  border-color: var(--swiss-dark-rule) !important;
  background: #111111 !important;
  color: var(--swiss-paper) !important;
}
#sec-effect-service .ai-story-stage,
#sec-effect-service .ai-story-surface{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-effect-service .demo-title,
#sec-effect-service .service-story-title,
#sec-effect-service .ai-story-title,
#sec-effect-service .ai-story-cap-title{ color: var(--swiss-paper) !important; }
#sec-effect-service .effect-part-desc,
#sec-effect-service .demo-desc,
#sec-effect-service .demo-point,
#sec-effect-service .service-story-copy,
#sec-effect-service .ai-story-desc,
#sec-effect-service .ai-story-cap-sub,
#sec-effect-service .ai-story-case-note{ color: #a8a8a4 !important; }

#sec-process .period-grid,
#sec-process .process-list{
  border-color: var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-process .period-card,
#sec-process .process-item{
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
}
#sec-process .period-card-reference{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-process .period-card-reference *{ color: var(--swiss-accent-on) !important; }
#sec-process .period-name,
#sec-process .period-duration,
#sec-process .process-title{ color: var(--swiss-paper) !important; }
#sec-process .period-desc,
#sec-process .period-caveat,
#sec-process .process-desc{ color: #a8a8a4 !important; }

#sec-cost .cost-part-seat .cost-side.has-media,
#sec-cost .cost-part-seat .cost-side-media,
#sec-cost .cost-part,
#sec-cost .cost-side,
#sec-cost .cost-ai-pipeline,
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-ai-pipeline-main,
#sec-cost .cost-ai-stage,
#sec-cost .service-shooting-card,
#sec-cost .cost-tier{
  border-radius: 0 !important;
  box-shadow: none !important;
}

#sec-input .integration-flow{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: var(--swiss-dark-rule) !important;
  box-shadow: none !important;
}
#sec-input .integration-phase,
#sec-input .integration-card,
#sec-input .delivery-spec{
  border-radius: 0 !important;
  background: var(--swiss-dark-card) !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-input .integration-block{
  border-color: var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-input .integration-phase strong,
#sec-input .integration-card h3,
#sec-input .delivery-spec h3,
#sec-input .integration-block-title{ color: var(--swiss-paper) !important; }

/* ============================================================
   34. Cost / AI production pipeline
   Turn the editor-created 2×2 card block into one compact, directional
   production sequence. The conclusion owns the left rail; the four stages
   share one continuous grid and only the reusable result takes the accent.
   ============================================================ */
#sec-cost .cost-ai-pipeline{
  display: block !important;
  margin-top: 28px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-cost .cost-ai-pipeline-main{
  display: grid !important;
  grid-template-columns: minmax(210px,.86fr) minmax(0,3.14fr) !important;
  width: 100% !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-cost .cost-ai-pipeline-head{
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-width: 0;
  margin: 0 !important;
  padding: 28px 26px;
  border-right: 1px solid var(--swiss-dark-rule);
  background: #111111;
}
#sec-cost .cost-ai-pipeline-head strong{
  display: block;
  max-width: 9ch;
  color: var(--swiss-paper) !important;
  font-weight: 500;
  line-height: 1.28;
}
#sec-cost .cost-ai-pipeline-head strong::before{
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--swiss-accent);
}
#sec-cost .cost-ai-pipeline-head span{
  display: block;
  max-width: 19ch;
  color: #a8a8a4 !important;
  font-weight: 500;
  line-height: 1.55;
  text-align: left !important;
}
#sec-cost .cost-ai-stages{
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 1px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--swiss-dark-rule);
}
#sec-cost .cost-ai-stage{
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: space-between;
  gap: 40px !important;
  min-width: 0;
  min-height: 214px !important;
  padding: 26px 22px 24px !important;
  border: 0 !important;
  background: var(--swiss-ink) !important;
}
#sec-cost .cost-ai-stage::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(61,236,107,.26);
}
#sec-cost .cost-ai-stage-no{
  color: var(--swiss-accent) !important;
  font-family: "DIN Alternate", "DIN Condensed", "Arial Narrow", var(--sans) !important;
}
#sec-cost .cost-ai-stage-copy strong{
  margin: 0 0 9px !important;
  color: var(--swiss-paper) !important;
}
#sec-cost .cost-ai-stage-copy small{
  color: #a8a8a4 !important;
}
#sec-cost .cost-ai-stage.is-result{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}
#sec-cost .cost-ai-stage.is-result::before{
  background: var(--swiss-accent-on);
}
#sec-cost .cost-ai-stage.is-result .cost-ai-stage-no,
#sec-cost .cost-ai-stage.is-result .cost-ai-stage-copy strong,
#sec-cost .cost-ai-stage.is-result .cost-ai-stage-copy small{
  color: var(--swiss-accent-on) !important;
}

@media (max-width: 1023px){
  #sec-cost .cost-ai-pipeline-main{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-cost .cost-ai-pipeline-head{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(220px,.75fr);
    align-items: end;
    gap: 24px;
    border-right: 0;
    border-bottom: 1px solid var(--swiss-dark-rule);
  }
  #sec-cost .cost-ai-pipeline-head strong{ max-width: none; }
  #sec-cost .cost-ai-pipeline-head span{ max-width: 30ch; }
  #sec-cost .cost-ai-stages{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  #sec-cost .cost-ai-stage{ min-height: 176px !important; }
}

@media (max-width: 639px){
  #sec-cost .cost-ai-pipeline-head{
    display: flex !important;
    align-items: flex-start;
    padding: 24px 20px;
  }
  #sec-cost .cost-ai-stages{ grid-template-columns: minmax(0,1fr) !important; }
  #sec-cost .cost-ai-stage{
    min-height: 0 !important;
    gap: 28px !important;
    padding: 22px 20px !important;
  }
}
#sec-input .integration-phase p,
#sec-input .integration-card-lead,
#sec-input .integration-list li,
#sec-input .integration-block-note,
#sec-input .delivery-spec p{ color: #a8a8a4 !important; }
#sec-input .integration-card-index,
#sec-input .integration-phase-no{
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
}