/* ==========================================================================
   首页第 2~9 屏（只在首页加载）

   这些类名来自内容管线里的语义 HTML 块（营销/官网文案/01-首页.md）：
   Markdown 只适合写段落，写不出「时间轴 / 徽章 / 数字块」这种版式，
   所以那几屏在源文案里就是 HTML 块，这里只负责给它们皮肤。

   两条纪律：
   1. 只加皮肤，不改内容 —— 出现的每一段文字都由建站脚本从源文案派生，
      CSS 里不写 content（用 ::before 写文案等于把内容搬出内容管线，
      爬虫和 AI 抓取器读不到）。序号、项目符号这类装饰符号才用伪元素。
   2. 移动端只做「降列」，不做「换版式」——同一套结构，列数往下掉，
      避免为窄屏再维护一份平行标记。
   ========================================================================== */

/* ---------------------------------------------------------------- 通用 */
.content .sec-lead {
  margin: 10px 0 22px;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.content .sec-cta { margin: 22px 0 4px; }

/* 字段级证据行：这是本页相对同行最不一样的地方 ——
   每条能力下面都挂着真实的表/字段。样式上刻意做成「附注」而不是正文。 */
.content .ev {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7c8b96;
}
.content .ev code {
  padding: 1px 5px;
  border-radius: 3px;
  background: #eef3f5;
  color: #3d5a67;
  font-size: 12px;
  /* 表名/字段名是连续串（FLOW_RECYCLE_PACKAGE.FACT_PRICE），默认只在空格处断行，
     两列布局下会把轨道撑破。允许任意处断行，宁可难看也不撑坏版式。 */
  overflow-wrap: anywhere;
}
.content .ev a { font-size: 12.5px; }

/* ---------------------------------------------------------------- 四个真实的麻烦 */
.content .pains {
  display: grid;
  /* 四张卡固定 2×2，不用 auto-fit：容器够宽时 auto-fit 会拉成一排四列，
     卡片被压成窄条、标题三行起步，读起来比两行两列累。
     ⚠ 必须 minmax(0, 1fr) 而不是 1fr —— grid 轨道的最小尺寸默认取 auto（= min-content），
     证据行里那段长表名会把轨道撑宽、把另一列挤扁。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
}
.content .pains > li {
  position: relative;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 39, 51, .04);
}
.content .pains > li:hover {
  border-color: rgba(11, 107, 94, .38);
  box-shadow: 0 2px 4px rgba(27, 39, 51, .06), 0 12px 28px rgba(27, 39, 51, .07);
}
.content .pains-n {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 9px;
  border-radius: 5px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.content .pains h3 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.content .pains p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 闭环时间轴 */
.content .tl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin: 22px 0 8px;
  padding: 0;
  list-style: none;
}
.content .tl > li {
  display: flex;
  gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: 10px;
  background: #fff;
}
.content .tl-n {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(11, 107, 94, .35);
  background: #f1f7f6;
  color: var(--brand);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .tl-b { min-width: 0; }
.content .tl-b h3 {
  margin: 6px 0 7px;
  font-size: 16px;
  line-height: 1.5;
}
.content .tl-b h3 a { color: var(--ink); }
.content .tl-b h3 a:hover { color: var(--brand); }
.content .tl-b p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 三张能力卡 */
.content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}
.content .card {
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(27, 39, 51, .04);
}
.content .card h3 {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.content .card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 卡片里的段落被上面归零了 margin，证据行要重新顶开一点。
   用复合选择器（.pains p.ev）而不是 !important：!important 会把后面所有
   想再调这份间距的人都锁死，而这里只是「谁更具体」的问题。 */
.content .pains p.ev,
.content .tl-b p.ev,
.content .card p.ev {
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------- 标准徽章 */
.content .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
}
.content .badges a {
  display: block;
  min-width: 168px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.content .badges a:hover {
  border-color: rgba(11, 107, 94, .45);
  box-shadow: 0 6px 18px rgba(27, 39, 51, .08);
  transform: translateY(-1px);
  text-decoration: none;
}
.content .badges b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.content .badges span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 数字块 */
.content .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 20px 0 10px;
  padding: 0;
  list-style: none;
}
.content .stats > li {
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  /* 白色而不是 --bg-soft：这一节现在压在区段底色上，
     用同层的灰就像一块没擦干净的印子。 */
  background: #fff;
  text-align: center;
}
.content .stats b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.content .stats span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 可核验的细节 */
.content .proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 20px 0 8px;
  padding: 0;
  list-style: none;
}
.content .proof > li {
  padding: 18px 20px 20px;
  border: 1px dashed rgba(11, 107, 94, .38);
  border-radius: 10px;
  background: #fbfdfc;
}
.content .proof h3 {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.content .proof p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- 转化区（表单 + 信任点） */
.content .convert {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 22px 0 8px;
}
.content .convert .lead-form {
  margin: 0;
  background: #fff;
}
.content .convert-trust {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.content .convert-trust h3 {
  margin: 0 0 10px;
  font-size: 15.5px;
}
.content .convert-trust ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.content .convert-trust li { margin: 5px 0; }

/* ---------------------------------------------------------------- 各节配图（大屏） */
/* 规则：**只在大屏出现**，正文与插图左右并排，且隔节换边（奇左偶右）。
   为什么只给大屏：窄屏一列排下来，图插在文字中间会把一节切成两半，
   读起来比不配图更累；这和 Hero 的 3D 是同一条断点（1000px）。
   ⚠ 窄屏是「不显示」而不是「挪到下面」：九张图堆在手机屏上，
   页面会被拉成画册，与「大屏增强」的初衷相反。 */
.band-figure { display: none; }

@media (min-width: 1000px) {
  .band-split {
    display: grid;
    /* 正文略宽于插图：这一列是内容，插图是陪衬 */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 40px;
    align-items: center;
  }
  .band-body { order: 2; }          /* 默认：正文在右 */
  .band-figure {
    display: block;
    order: 1;                        /* 默认：插图在左 */
    margin: 0;
  }

  /* 偶数节换边 —— 长页面往下滚时有一段视觉节奏，
     而不是九张图全部贴同一边（那会让左/右一侧的留白一直空着）。 */
  .content > .band:nth-child(even) .band-body { order: 1; }
  .content > .band:nth-child(even) .band-figure { order: 2; }
}

.band-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  /* 插图是深色系（动漫线条 + 深底），需要一圈轻微投影才从浅色区段上"浮"起来 */
  box-shadow: 0 10px 30px rgba(27, 39, 51, .10);
}

/* ---------------------------------------------------------------- 窄屏降列 */
@media (max-width: 820px) {
  .content .convert { grid-template-columns: minmax(0, 1fr); }
  /* 两列在手机上每列只剩 ~160px，正文挤成一团 —— 降到单列 */
  .content .pains { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .content .tl > li { padding: 14px 15px 16px; }
  .content .stats b { font-size: 24px; }
  .content .badges a { min-width: 0; width: 100%; }
}