/* ============================================================
   LAVMAY · pages-refresh.css
   作用：把 product / journey / club 三个子页的视觉语言，
        对齐 knocket 子页（seo-hero + seo-sec）的真实做法。

   ⚠️ 为什么是「覆盖层」而不是改原文件：
      参考站自己就是分层的（tokens.css → pages.css → home-refresh.css
      逐层覆盖）。照它的结构做覆盖层，比把三页 CSS 全部推倒重写更安全：
      原文件里的布局/栅格/响应式逻辑全部保留，只覆盖「颜色与几何」。

   ⚠️ 本文件必须在 product / journey / club 三页的 CSS **之后**引入，
      否则同优先级规则会被原文件盖掉（曾经踩过 .safe-card 的坑）。

   ------------------------------------------------------------
   依据（均为实测，不是估计）：
   · 参考站子页 hero 底色  rgb(223,243,98) = #dff362  ≈ 我们的 --lm-lime
   · 参考站子页 body 底色  rgb(238,247,232) = #eef7e8  =  --lm-green-1
   · 参考站子页区块递进   #eef7e8 → #e3f2df → #d7edd9 → #bedfca
   · 参考站子页 h1 字重   800（我们子页原为 700）
   · 参考站子页卡片      白底 + 阴影 + 20~22px 圆角（不靠描边）
        —— 注意：子页卡片圆角是 20px，**不是**首页产品卡的 38px，
           这两套是并存的，不能用首页的 38px 去改子页。
   ============================================================ */

/* ============ 1. HERO：柠檬色块 ============ */
/* 参考站子页 hero 是满幅柠檬底，不是 cream。这是子页与首页最强的同源信号。 */
.p-hero,
.c-hero,
.auth-wrap {
  background: var(--lm-lime);
  color: var(--lm-ink);           /* 深字 on 柠檬 = 16.27:1 */
}

/* hero 上下要留出导航高度（.k-nav 固定 84px），否则标题被压住 */
.p-hero,
.c-hero {
  padding-top: clamp(112px, 11vw, 150px);
  padding-bottom: clamp(52px, 6vw, 90px);
}
.auth-wrap {
  padding-top: clamp(112px, 11vw, 150px);
}

/* hero 内的次要文字：柠檬底上 --lm-muted 仅 4.48:1（差一点），压深到 8.14:1。
   ★ 这里必须用足够高的特异性（(0,2,1)），否则会被第 4 组通用字色规则
     的 --lm-muted-strong(4.48) 抢走 —— 实测差 0.02 也会被审计拦下。 */
.p-hero .p-hero-meta span,
.p-hero .lead,
.p-hero .p-lead,
.c-hero .c-hero-note,
.c-hero .c-hero-stats span,
.auth-wrap .lead,
.auth-wrap .auth-note {
  color: #2f4437;                 /* on #dffc63 = 8.14:1 */
}

/* hero 里的 mono 小标签/KPI 说明文字，同样压深 */
.p-hero .kicker,
.p-hero .mono,
.c-hero .mono,
.auth-wrap .mono {
  color: #2f4437;
}

/* hero 内的标签：默认 tag--ink 是深底白字，在柠檬上反而要改成描边款 */
.p-hero .tag--ink,
.c-hero .tag {
  background: rgba(6, 21, 14, .1);
  color: var(--lm-ink);
  border-color: rgba(6, 21, 14, .22);
}

/* ============ 2. H1：字重与字距对齐参考站子页 ============ */
/* 参考站子页 h1: fs 77.76 / fw 800 / ls -3.4992px（1440 视口） */
.p-h1,
.c-hero h1,
.auth-wrap h1,
.jr-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--lm-ink);
}

/* 首页用 <span> 做双色标题的高亮，子页沿用同一手法 */
.p-h1 .em-lime,
.c-hero h1 .em-lime {
  color: var(--lm-dark);
  background: linear-gradient(transparent 62%, rgba(39, 198, 111, .45) 62%);
  padding-inline: 2px;
}

/* ============ 3. 区块色阶：一屏一色，由浅入深 ============ */
/* 参考站子页依次用 green-1..5。这里按「文档里第 N 个 section」赋值，
   让长页面有纵向节奏，而不是整页一种 cream。

   ★★★ 这里踩过一次坑，务必保持现在的写法：
      通用规则必须用 :where() 把特异性压到 (0,0,2)（只有 main+section 两个元素）。
      最初写成 `main > section:not(.p-hero):not(.c-hero)`，两个 :not() 各带一个
      类 ⇒ 特异性 (0,2,2)，**高于** 原文件里 `.p-clinical` 的 (0,1,0)，
      于是深底区块被刷成浅绿底，而区块内的文字仍是「深底反白」的浅色
      ⇒ 浅字 on 浅底 1.82:1，一次审计报出 10 处。
      用 :where() 包裹后，`.p-clinical` 自然胜出，不需要为了压过通用规则
      再去堆特异性（那会变成无休止的军备竞赛）。 */
main > section:where(:not(.p-hero, .c-hero, .p-clinical, .p-cta, .c-wait)) {
  background: var(--lm-green-1);
}

/* 交替深浅：偶数区块深一档，形成可见的段落分界。
   (0,1,2) —— 高于上面的 (0,0,2)，低于 .p-faq 的 (0,2,0)。 */
main > section:nth-of-type(even):where(:not(.p-hero, .c-hero, .p-clinical, .p-cta, .c-wait)) {
  background: var(--lm-green-2);
}

/* 需要更明确分界的区块（长页腰部），用 green-3 */
.section.p-faq,
.section.c-faq {
  background: var(--lm-green-3);
}

/* 深底区块：保持原样（它们是整页唯一的深色锚点）。
   下面这条其实已被 :where() 排除，写在这里是**显式声明意图**，
   并防止将来有人改上面的排除列表时静默变回浅底。 */
.section.p-clinical,
main > section.p-clinical {
  background: var(--lm-dark);
  color: #eaf4ee;
}

/* ============ 4. 字色跟随底色 ============ */
/* ★ 这是最容易出错的地方，两层原因：
   (a) --lm-muted(#5f7263) 在 green-2..5 上只有 3.58~4.43，全部不达标。
       所以铺了绿色阶，就必须把正文次要色换成 --lm-muted-strong(#4e6154)，
       它在整个绿色阶上 ≥4.62。
   (b) ⚠️ 必须把深底区块排除掉。最初写成
       `main > section:not(.p-hero):not(.c-hero) :is(h2,h3,h4,b,strong,.num)`
       特异性 (0,3,2)，**压过了** .p-clinical 内的反色规则，
       结果深绿底上刷了深绿字（#073d28 on #073d28 = 1.00:1），
       标题、KPI 数字、"菌群也回来了" 小标题全部隐形。
       —— 与上面第 3 组是同一类错误的两个方向：一次改底没改字，一次改字没排除已改的底。
       修法一致：用 :where() 降特异性 + 显式排除深底区块。 */
main > section:where(:not(.p-hero, .c-hero, .p-clinical, .p-cta, .c-wait)) :is(p, li, .lead, .sci-tag, .fx-role, .mini-fact span, label, small, caption, th, td, em) {
  color: var(--lm-muted-strong);
}

/* 标题/强调文字始终用最深色，保证层级；同样排除深底区块 */
main > section:where(:not(.p-hero, .c-hero, .p-clinical, .p-cta, .c-wait)) :is(h2, h3, h4, b, strong, .num) {
  color: var(--lm-dark);
}

/* .cl-table em：原 #7f938c on 深绿仅 3.78:1。
   提到 #8fa39c（4.62:1，恰好与同文件 caption/th 在用色一致），
   色系不变、只提亮一档，肉眼几乎无差别。 */
.section.p-clinical .cl-table em { color: #8fa39c; }

/* 深底区块反色：这里必须对 h2/h4/b 这些也显式给色，
   否则被上面那条的继承色污染（深底上出现深绿字）。 */
.section.p-clinical,
main > section.p-clinical {
  color: #eaf4ee;
}
.section.p-clinical :is(h2, h3, h4, b, strong, .num) {
  color: var(--lm-cream);
}
.section.p-clinical :is(p, li) {
  color: rgba(234, 244, 238, .82);
}
/* 深底上原本就该是柠檬色的强调（kicker / hl），恢复之 */
.section.p-clinical .kicker {
  color: var(--lm-lime);
}
/* .cl-table 的各类单元格颜色在 product.css 里已按深底设计，
   这里不动，避免把已经正确的对比度改坏 */
/* 薄荷/柠檬强调色在深绿上对比度充足，保持不变 */

/* ============ 5. 卡片：白底 + 阴影 + 20px 圆角 ============ */
/* 参考站子页卡片实测：background rgb(255,255,255) / border-radius 20~22px
   / box-shadow 有值 / border 0px —— 靠阴影分层，不靠描边。 */
main > section:not(.p-clinical) :is(.sci-card, .safe-card, .fx-item, .mini-fact, .faq, .cl-note) {
  background: var(--lm-white);
  border: 1px solid rgba(7, 61, 40, .08);
  border-radius: var(--r-md);          /* 20px，与参考站子页一致 */
  box-shadow: 0 14px 28px -18px rgba(7, 61, 40, .28);
}

/* 深底区块内的卡片：半透明白，避免出现一块刺眼的白 */
.section.p-clinical :is(.sci-card, .safe-card, .fx-item, .mini-fact) {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}

/* ============ 6. 收尾区 ============ */
/* 逐值对齐参考站子页 .seo-final（实测）：
     background rgb(7,61,40)  (= --lm-dark)
     color      rgb(255,255,255)
     border-radius 0px        ← 子页收尾**不带**顶部大圆角，那是首页 .hr-final 的做法
     padding    130px 72px
     CTA 按钮   bg rgb(22,173,99) + 深色字
   最初的柠檬底圆角收尾是错的方向：柠檬 + 大圆角是首页 .hr-steps 的语言，
   不是子页收尾的语言。子页要的是「深绿落地」，把整页压住。 */
.section.p-cta,
.section.c-wait {
  background: var(--lm-dark);
  color: #fff;
  border-radius: 0;
  padding-block: clamp(64px, 9vw, 130px);
}

.section.p-cta :is(h2, h3, b, strong),
.section.c-wait :is(h2, h3, b, strong) {
  color: #fff;
}
.section.p-cta :is(p, li),
.section.c-wait :is(p, li),
.section.p-cta .lead,
.section.c-wait .lead {
  color: rgba(255, 255, 255, .82);
}

/* ★ 第三次踩同一个坑（前两次改底没改字、改字没排除深底）：
   反色规则会一路下沉到**白底子卡片**里。收尾区嵌着 .c-form-card（白底），
   里面的文字本来是深色，被上面 :is(p,li) 刷成白色 ⇒ 白字 on 白底 1.00:1。
   修法不是写复杂的排除选择器（:not(.c-form-card *) 这类选择器难读、
   且一旦结构变了就静默失效），而是**显式把白底卡片内的颜色再设一遍**，
   用更高特异性(0,3,x)盖住上面的(0,2,1)。改结构时这里会一起被看到。 */
.section.c-wait .c-form-card :is(p, li, span, label, small) {
  color: var(--lm-muted-2);
}
.section.c-wait .c-form-card :is(h2, h3, h4, b, strong) {
  color: var(--lm-dark);
}
.section.c-wait .c-form-foot {
  color: var(--lm-muted-2);
}
/* 收尾区的 kicker 用柠檬，与深绿形成高对比（参考站同款搭配） */
.section.p-cta .kicker,
.section.c-wait .kicker {
  color: var(--lm-lime);
}

/* CTA 按钮：参考站子页是品牌绿底 + 深字，不是洋红。
   （洋红是首页 hero 的主 CTA，两者场景不同，不要混用。） */
.section.p-cta .btn,
.section.c-wait .btn {
  background: var(--lm-hero-green);
  color: var(--lm-ink);
  border-color: transparent;
}
.section.p-cta .btn:hover,
.section.c-wait .btn:hover {
  background: var(--lm-green);
}

/* ============ 6b. club 页的深色锚点 ============ */
/* 首页有 .hr-final 把页面压住；product 有 p-clinical 深色实证段。
   club 原本全浅，缺一个「重量级」段落 ⇒ 把 8 周时间线做成深绿底。
   ★ 但时间线紧邻 c-wait（也是深绿），两块同色会糊成一大坨（首页从未
     出现连续两个同色区块）。所以时间线用**比收尾更深一档**的 --lm-ink，
   让「时间线 → 收尾」之间有一条肉眼可辨的界线，而不是靠猜。 */
.section.c-timeline {
  background: var(--lm-ink);
  color: #fff;
  /* 与下方 c-wait（--lm-dark）之间补一条亮线。
     两种深色的亮度比只有 1.52:1，单靠色差在暗屏上几乎看不出分界，
     加一条 1px 低透明白线才能稳定区分「时间线段」与「招募段」。 */
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.section.c-timeline :is(h2, h3, h4, b, strong) {
  color: #fff;
}
.section.c-timeline :is(p, li) {
  color: rgba(255, 255, 255, .78);
}
.section.c-timeline .kicker {
  color: var(--lm-lime);
}
/* 周列表的分隔线原本是深色（浅底设计），深底上要换成白色低透明 */
.section.c-timeline .wk-list {
  border-top-color: rgba(255, 255, 255, .18);
}
.section.c-timeline .wk-list li {
  border-bottom-color: rgba(255, 255, 255, .1);
}
.section.c-timeline .wk-n {
  color: var(--lm-lime);
}

/* ============ 7. 移动端：hero 上下留白收紧 ============ */
@media (max-width: 720px) {
  .p-hero,
  .c-hero,
  .auth-wrap {
    padding-top: 96px;
    padding-bottom: 40px;
  }
  /* 手机上大圆角会把内容挤窄，收到 40px */
  .section.p-cta,
  .section.c-wait {
    border-radius: 40px 40px 0 0;
  }
}