/* ============================================================
   LAVMAY · data.css — 减重数据页（data.html）

   设计意图
   --------
   这一页是「信息型长页」，与 product（产品）、club（招募）不同：
   读者的目的是拿走可执行的东西，所以版式必须让数字先跳出来。

   色阶（沿用 tokens 的 v12 段落节奏，不自造颜色）：
     d-hero   柠檬 #dffc63   与三页子页 hero 同源（子页最强同源信号）
     d-move   green-1 #eef7e8 运动处方（浅，正文多）
     d-meal   green-2 #e3f2df 餐食参考（深一档，换气）
     d-time   green-3 #d7edd9 会经历什么（再深一档，时间轴需要更"沉"的底）
     d-why    近黑 --lm-ink   为什么难维持（全页唯一的深色块，情绪的转折）
     d-kind   green-1         怎么减得不难受（回到浅色，收拢）
     d-fine   green-4 #cae7d3 口径说明（最深的浅色，像"附录"）

   ⚠️ 为什么不用 pages-refresh.css：
      那是 product/journey/club 三页的覆盖层，里面的
      `main > section:where(:not(.p-hero, .c-hero, .p-clinical, .p-cta, .c-wait))`
      会给所有 main 下的 section 刷成 green-1/green-2 交替。
      本页有自己的色阶（且 d-why 必须是深色），引入它等于给自己挖坑。
      所以本页只依赖 tokens + base + shared，色阶全部在本文件显式声明。
   ============================================================ */

/* ---------- Hero（柠檬，与子页同源） ---------- */
.d-hero {
  background: var(--lm-lime);
  color: var(--lm-ink);
  padding-top: clamp(112px, 11vw, 150px);
  padding-bottom: clamp(52px, 6vw, 84px);
}
.d-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.d-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 72px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  margin: 16px 0 22px;
}
/* 与子页同一手法：柠檬底上用绿色下划线块，而不是换色（底色已经够亮） */
.d-h1 .em-lime {
  color: var(--lm-dark);
  background: linear-gradient(transparent 62%, rgba(39, 198, 111, .45) 62%);
  padding-inline: 2px;
}
.d-lead { max-width: 560px; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.62; color: #2f4437; }
.d-hero .kicker { color: #2f4437; }

/* 5 个入口。⚠️ 不能写死 repeat(4,…)：实测 5 项按 4 列排时，
   第 5 个会单独掉到第二行（1440 剩 1 格、1100 时那格被撑到 80px 高而其余 63px），
   形成很难看的「孤儿格」。5 项只有排成 5 列或 3 列时两行都排得满。 */
.d-hero-jump {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1.5px solid rgba(6, 21, 14, .18);
}
/* 5 列在 1200 以下每列只剩 ~120px，「怎么减得不难受」会折成 3 行 ⇒ 提前换 3 列（3+2 两行排满） */
@media (max-width: 1180px) {
  .d-hero-jump { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ★★★ 5 个入口在 2 列下必然排成 2+2+1：末行那个只剩半行宽（375px 时实测 w=160、
   容器 327，右侧空掉 167px），像掉出来的一格。
   ——这里必须让末项跨满整行，不能只在注释里「承诺」它占满整行（本文件的旧注释就写了这句、
      但代码从来没实现，于是 375/900 一直是孤儿格，靠判据红出来才发现）。
   跨列只挂在 2 列布局上：3 列时末行是 2 个，末项跨列会把本行唯一一行撑成「1 个 + 空白」。 */
@media (max-width: 980px) {
  .d-hero-jump > .d-jump:last-child { grid-column: 1 / -1; }
}
.d-jump {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 12px 13px;
  border-radius: 12px;
  background: rgba(6, 21, 14, .06);
  border: 1.4px solid rgba(6, 21, 14, .14);
  transition: background .2s, transform .2s;
  min-height: 44px;
}
.d-jump:hover { background: rgba(6, 21, 14, .12); transform: translateY(-2px); }
.d-jump b {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #2f4437;
}
.d-jump span { font-size: 13.5px; font-weight: 700; color: var(--lm-ink); line-height: 1.3; }

.d-hero-art svg { width: 100%; height: auto; display: block; }

/* ---------- 通用区块头 ---------- */
.d-head { max-width: 760px; margin-bottom: clamp(28px, 3.6vw, 46px); }
.d-h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 14px 0 16px;
  color: var(--lm-ink);
}
.d-h2--sm { font-size: clamp(24px, 2.8vw, 34px); }
.d-sub { font-size: clamp(14.5px, 1.14vw, 16.5px); line-height: 1.68; color: #3f5348; max-width: 700px; }
.d-sub b { font-weight: 800; color: var(--lm-ink); }
.d-no {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--lm-dark);
  background: rgba(6, 21, 14, .07);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 14px;
}

/* ---------- 01 运动处方 ---------- */
.d-move { background: var(--lm-green-1); padding-block: clamp(52px, 6.4vw, 96px); }
.d-move .kicker { color: #365946; }

.d-move-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.d-move-card {
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1.5px solid rgba(6, 21, 14, .1);
  display: flex;
  flex-direction: column;
}
/* A 卡略强调：有氧是"够量"的主体 */
.d-move-card--key { border-color: var(--lm-dark); border-width: 2px; }
.d-move-card h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  margin-bottom: 10px;
  color: var(--lm-ink);
}
.d-move-body { font-size: 14px; line-height: 1.65; color: #40564a; margin-bottom: 16px; }
.d-move-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-top: auto; }
.d-move-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding-top: 11px;
  border-top: 1.4px solid rgba(6, 21, 14, .09);
  align-items: start;
}
.d-move-list b { font-size: 13.5px; font-weight: 800; color: var(--lm-dark); }
.d-move-list span { font-size: 13px; line-height: 1.55; color: #4b6559; }

.d-callout {
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: #fff;
  border-left: 4px solid var(--lm-green);
  border-radius: 0 16px 16px 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #33493d;
}
.d-callout b { color: var(--lm-ink); font-weight: 800; }

/* ---------- 02 餐食参考 ---------- */
.d-meal { background: var(--lm-green-2); padding-block: clamp(52px, 6.4vw, 96px); }
.d-meal .kicker { color: #365946; }

.d-protein {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  margin-bottom: clamp(34px, 4vw, 52px);
}
.d-protein-calc,
.d-plate {
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1.5px solid rgba(6, 21, 14, .1);
}
.d-protein-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #365946;
  margin-bottom: 16px;
}
.d-protein-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.d-fld { margin-bottom: 0; }
.d-protein-out {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--lm-ink);
  padding: 14px 16px;
  background: var(--lm-green-1);
  border-radius: 12px;
  margin-bottom: 14px;
}
.d-protein-out b {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  color: var(--lm-dark);
  letter-spacing: -.02em;
}
.d-protein-hint { font-size: 12.5px; line-height: 1.65; color: var(--lm-muted); }

.d-plate-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lm-ink);
  margin-bottom: 18px;
}
.d-plate-ring { max-width: 240px; margin: 0 auto 20px; }
.d-plate-ring svg { width: 100%; height: auto; display: block; }
.d-plate-legend { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.d-plate-legend li {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.d-plate-legend i {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(6, 21, 14, .25);
  transform: translateY(2px);
}
.d-plate-legend b { font-weight: 800; color: var(--lm-ink); white-space: nowrap; }
.d-plate-legend span { font-size: 12.5px; color: #4b6559; line-height: 1.5; }
.d-plate-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.4px solid rgba(6, 21, 14, .1);
  font-size: 12.5px;
  line-height: 1.6;
  color: #365946;
}

.d-day-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lm-ink);
  margin-bottom: 8px;
}
.d-day-hint { font-size: 13.5px; color: #4b6559; margin-bottom: clamp(18px, 2.2vw, 26px); }

.d-day-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.d-day {
  background: #fff;
  border-radius: 20px;
  padding: clamp(18px, 2vw, 24px);
  border: 1.5px solid rgba(6, 21, 14, .1);
  display: flex;
  flex-direction: column;
}
.d-day--snack { background: var(--lm-green-1); }
.d-day h4 {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.32;
  color: var(--lm-ink);
  margin-bottom: 12px;
}
.d-day ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.d-day li {
  font-size: 13px;
  line-height: 1.55;
  color: #40564a;
  padding-left: 13px;
  position: relative;
}
.d-day li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lm-green);
}
.d-day-kcal {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1.4px solid rgba(6, 21, 14, .1);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #365946;
  line-height: 1.5;
}

.d-warn {
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  background: #fff8e6;
  border: 1.5px solid #e3c477;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.72;
  color: #5a4416;
}
.d-warn b { display: block; color: #6b4e12; font-weight: 800; margin-bottom: 6px; }
.d-warn strong { color: #5a3d08; font-weight: 800; }

/* ---------- 03 会经历什么（时间轴） ---------- */
.d-time { background: var(--lm-green-3); padding-block: clamp(52px, 6.4vw, 96px); }
.d-time .kicker { color: #365946; }

/* 时间轴用 <ol>：这是有序信息，屏幕阅读器会念出「第 1 项，共 4 项」。
   左侧竖线由每个 item 的 ::before 画，最后一项不再画（否则尾巴多出一截）。
   ⚠️ 竖线宽度 2px 与圆点 15px 要在各断点都对齐，所以圆点的 left 用变量算，不写死。 */
.d-tl {
  list-style: none;
  --tl-dot: 15px;
  --tl-line: 2px;
  --tl-gap: 22px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
  margin-bottom: clamp(34px, 4vw, 52px);
}
.d-tl-item {
  position: relative;
  padding-left: calc(var(--tl-dot) + var(--tl-gap));
}
.d-tl-item::before {
  content: '';
  position: absolute;
  left: calc(var(--tl-dot) / 2 - var(--tl-line) / 2);
  top: calc(var(--tl-dot) + 6px);
  bottom: calc(-1 * clamp(20px, 2.6vw, 30px) - 4px);
  width: var(--tl-line);
  background: rgba(6, 21, 14, .16);
}
.d-tl-item:last-child::before { display: none; }
.d-tl-dot {
  position: absolute;
  left: 0;
  top: 3px;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid rgba(6, 21, 14, .38);
}
/* 平台期是这一段的核心，唯一实心强调 */
.d-tl-item--key .d-tl-dot { background: var(--lm-lime); border-color: var(--lm-dark); }

.d-tl-body {
  background: #fff;
  border-radius: 18px;
  padding: clamp(18px, 2.1vw, 24px) clamp(18px, 2.2vw, 26px);
  border: 1.5px solid rgba(6, 21, 14, .1);
}
.d-tl-item--key .d-tl-body { border-color: var(--lm-dark); border-width: 2px; }

.d-tl-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  /* 曾是 #6c8477：在 #fff 上 4.42:1，差 0.08 不达标。改 #5f7263（同 --lm-muted，5.16:1） */
  color: #5f7263;
  margin-bottom: 7px;
}
.d-tl-body h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.22;
  color: var(--lm-ink);
  margin-bottom: 9px;
}
.d-tl-body p { font-size: 14px; line-height: 1.72; color: #3b5145; }
.d-tl-body strong { color: var(--lm-ink); font-weight: 800; }
.d-tl-body b { color: var(--lm-ink); font-weight: 800; }
/* 「要小心」是这一节的可执行部分，给独立底色而不是只靠一个字重 */
.d-tl-watch {
  margin-top: 11px;
  padding: 11px 14px;
  background: #fff8e6;
  border-left: 3px solid #d9a83a;
  border-radius: 0 10px 10px 0;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #5a4416 !important;
}
.d-tl-watch b { color: #4a3208 !important; }

/* ---------- 测量方法（左文右栏） ---------- */
.d-measure {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
}
.d-measure-main {
  background: #fff;
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1.5px solid rgba(6, 21, 14, .1);
}
.d-measure-main h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.24;
  color: var(--lm-ink);
  margin-bottom: 11px;
}
.d-measure-main > p { font-size: 14px; line-height: 1.72; color: #3b5145; }
.d-measure-main > p + p { margin-top: 12px; }
.d-measure-main b { color: var(--lm-ink); font-weight: 800; }

.d-measure-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.d-measure-list li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1.4px solid rgba(6, 21, 14, .09);
  align-items: start;
}
.d-measure-list b { font-size: 13.5px; font-weight: 800; color: var(--lm-dark); line-height: 1.4; }
.d-measure-list span { font-size: 13px; line-height: 1.6; color: #4b6559; }

.d-measure-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--lm-green-1);
  border-radius: 12px;
  font-size: 13px !important;
  line-height: 1.68 !important;
  color: #33493d !important;
}

.d-measure-side {
  background: var(--lm-dark);
  border-radius: 22px;
  padding: clamp(22px, 2.6vw, 30px);
  color: #fff;
}
.d-measure-side-t {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--lm-lime);
  margin-bottom: 12px;
}
.d-measure-side p {
  font-size: 13.5px;
  line-height: 1.72;
  /* 白 .84 on #073d28：实测 9.6:1，留余量 */
  color: rgba(255, 255, 255, .84);
}
.d-measure-side p + p { margin-top: 12px; }
.d-measure-side p:last-of-type { margin-bottom: 20px; }
.d-measure-side b { color: #fff; font-weight: 800; }

.d-measure-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--lm-lime);
  color: var(--lm-ink);
  font-size: 13.5px;
  font-weight: 800;
  transition: background .2s, transform .2s;
}
.d-measure-cta:hover { background: #d3f04a; transform: translateY(-1px); }
.d-measure-cta-note { margin-top: 10px; font-size: 11.5px !important; color: rgba(255, 255, 255, .68) !important; }

/* ---------- 04 为什么难维持（深色，全页唯一） ---------- */
.d-why {
  background: var(--lm-ink);
  color: #fff;
  padding-block: clamp(52px, 6.4vw, 96px);
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}
.d-head--dark .kicker { color: var(--lm-lime); }
.d-head--dark .d-h2 { color: #fff; }
.d-head--dark .d-sub { color: rgba(255, 255, 255, .78); }

.d-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.d-why-card {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  padding: clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 100 千卡那格是全段的核心论点（食欲 > 代谢），用柠檬边强调 */
.d-why-card--hl { border-color: var(--lm-lime); background: rgba(223, 252, 99, .1); }
.d-why-card b {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--lm-lime);
}
.d-why-card b u { text-decoration: none; font-size: .42em; margin-left: 4px; color: rgba(255, 255, 255, .72); }
.d-why-card span { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.d-why-card em {
  margin-top: auto;
  padding-top: 10px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
}

.d-why-note {
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: clamp(22px, 2.6vw, 32px);
}
.d-why-note h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 14px;
}
.d-why-note p {
  font-size: 14px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 12px;
}
.d-why-note p:last-child { margin-bottom: 0; }
.d-why-note b { color: #fff; font-weight: 800; }
.d-why-note i { font-style: italic; }

/* 来源行：两种底色（深/浅）都要能看清，所以做成独立类。
   ⚠️ 这里的 !important 是为了压过 `.d-why-note p`（0,1,1 胜 .d-src 的 0,1,0）。
   代价是**浅色变体也必须带 !important**，否则它压不回来 —— 曾因此让
   「来源：Purcell…」在白色 .d-myth 卡里变成米白字，实测 1.00:1（等于隐形）。
   ⇒ 「底 + 字」成对改这条规矩，在这里正好踩反了，记录一下。 */
.d-src {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62) !important;
}
.d-src--light {
  border-top-color: rgba(6, 21, 14, .14);
  color: #4b6559 !important;
}

/* ---------- 05 怎么减得不难受 ---------- */
.d-kind { background: var(--lm-green-1); padding-block: clamp(52px, 6.4vw, 96px); }
.d-kind .kicker { color: #365946; }

.d-myth {
  background: #fff;
  border: 2px solid var(--lm-dark);
  border-radius: 24px;
  padding: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.d-myth-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--lm-lime);
  background: var(--lm-ink);
  border-radius: 999px;
  padding: 6px 13px;
  margin-bottom: 16px;
}
.d-myth h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--lm-ink);
  margin-bottom: 16px;
}
.d-myth p { font-size: 14.5px; line-height: 1.78; color: #3b5145; margin-bottom: 14px; }
.d-myth p:last-child { margin-bottom: 0; }
.d-myth i { font-style: italic; }

.d-myth-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(10px, 1.6vw, 20px);
  align-items: center;
  margin: clamp(20px, 2.6vw, 30px) 0;
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--lm-green-1);
  border-radius: 16px;
}
.d-myth-compare > div:not(.d-myth-vs) { text-align: center; }
.d-myth-compare b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--lm-dark);
  margin-bottom: 8px;
}
.d-myth-compare span { font-size: 12.5px; line-height: 1.5; color: #3f5348; }
.d-myth-vs {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  /* ⚠️ 曾是 #6b8578，在 green-1 (#eef7e8) 上实测 3.64:1 —— 它只有 15px，够不上
     「大字 18.66px 粗体」的 3:1 豁免线，必须按正文 4.5:1。#4b6559 实测 5.71:1。 */
  color: #4b6559;
  letter-spacing: .04em;
}
.d-myth-concl { padding-top: 14px; border-top: 1.5px solid rgba(6, 21, 14, .1); }
.d-myth-concl b { color: var(--lm-ink); font-weight: 800; }
.d-myth-mean {
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 22px);
  background: #fff8e6;
  border-left: 3px solid #d9a83a;
  border-radius: 0 12px 12px 0;
  font-size: 14px !important;
  color: #5a4416 !important;
}
.d-myth-mean b { color: #4a3208; font-weight: 800; }
.d-myth .d-src { border-top-color: rgba(6, 21, 14, .12); color: #4b6559 !important; }

.d-kind-title {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lm-ink);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.d-kind-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.d-kind-card {
  background: #fff;
  border-radius: 20px;
  padding: clamp(18px, 2vw, 24px);
  border: 1.5px solid rgba(6, 21, 14, .1);
}
.d-kind-card h4 {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--lm-ink);
  margin-bottom: 10px;
}
.d-kind-card p { font-size: 13px; line-height: 1.68; color: #40564a; }

.d-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1.5px solid rgba(6, 21, 14, .12);
}
.d-cta-note { font-size: 12.5px; color: #4b6559; }

/* ---------- 口径说明表 ---------- */
.d-fine { background: var(--lm-green-4); padding-block: clamp(48px, 6vw, 88px); }
.d-fine .d-h2 { margin-bottom: clamp(22px, 2.8vw, 32px); }
.d-fine .d-caption { color: #365946; }

.d-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.d-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  font-size: 13.5px;
  min-width: 620px;
}
.d-caption {
  caption-side: top;
  text-align: left;
  font-size: 12.5px;
  color: #365946;
  padding-bottom: 12px;
}
.d-table thead th {
  background: var(--lm-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: left;
  padding: 13px 16px;
  white-space: nowrap;
}
.d-table tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--lm-ink);
  padding: 14px 16px;
  line-height: 1.5;
}
.d-table tbody td {
  padding: 14px 16px;
  color: #3f5348;
  line-height: 1.55;
  vertical-align: top;
}
.d-table tbody tr + tr th,
.d-table tbody tr + tr td { border-top: 1px solid rgba(6, 21, 14, .1); }
.d-table tbody tr:nth-child(even) { background: #f6fbf4; }
.d-table i { font-style: italic; }

.d-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* 四类证据用四种颜色，肉眼可分区：
   指南=蓝(权威) / 综述与meta=绿(汇总) / 随机对照=紫(最高等级实测) / 模型=琥珀(推算) */
.d-tag--guide { background: #e3eefb; color: #1d4d7d; border-color: #b7d3ee; }
.d-tag--rev   { background: #e4f4e6; color: #25603a; border-color: #b3ddba; }
.d-tag--meta  { background: #e4f4e6; color: #25603a; border-color: #b3ddba; }
.d-tag--rct   { background: #efe8f7; color: #4d3576; border-color: #cfbfe6; }
.d-tag--model { background: #fdf1dc; color: #6d4c12; border-color: #ead0a2; }

.d-fine-note {
  margin-top: clamp(22px, 2.8vw, 32px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px);
  background: rgba(255, 255, 255, .72);
  border-left: 3px solid var(--lm-dark);
  border-radius: 0 12px 12px 0;
  font-size: 12.5px;
  line-height: 1.72;
  color: #33493d;
}
.d-fine-note b { color: var(--lm-ink); font-weight: 800; }

/* ============ 响应式 ============ */

@media (max-width: 1200px) {
  .d-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .d-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .d-hero-art { order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
  .d-hero-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2 列 + 末项跨满（rule 在主样式段，见 .d-hero-jump 附近的说明） */
  .d-move-grid { grid-template-columns: 1fr; }
  .d-protein { grid-template-columns: 1fr; }
  .d-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-myth-compare { grid-template-columns: 1fr; gap: 14px; }
  .d-myth-vs { text-align: center; }
  /* 时间轴：正文卡片贴着竖线会更省横向空间；
     但 --tl-gap 不能压到 12 以下，否则圆点会压到卡片圆角里 */
  .d-tl { --tl-gap: 14px; }
  .d-measure { grid-template-columns: 1fr; }
  .d-measure-list li { grid-template-columns: 116px minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .d-hero { padding-top: 104px; padding-bottom: 48px; }
  .d-hero-jump { grid-template-columns: 1fr 1fr; gap: 8px; }
  .d-move-list li { grid-template-columns: 1fr; gap: 3px; }
  .d-day-grid { grid-template-columns: 1fr; }
  .d-kind-grid { grid-template-columns: 1fr; }
  .d-why-grid { grid-template-columns: 1fr; }
  .d-protein-inputs { grid-template-columns: 1fr; }
  .d-plate-ring { max-width: 200px; }
  .d-cta-row .btn { width: 100%; justify-content: center; }
  .d-why { border-radius: 24px 24px 0 0; }
  /* 手机上「指标名 / 说明」两栏并排会把说明压到每行 8 个字，
     改成上下堆叠读起来才顺 */
  .d-measure-list li { grid-template-columns: 1fr; gap: 4px; }
  .d-measure-cta { width: 100%; justify-content: center; }
}