/* ============================================================
   LAVMAY · home.css
   首页结构**逐块对齐** knocket：
     hr-hero          100svh 双栏，亮绿底
     hr-rail-section  白底 + 产品横滑卡（这是产品介绍的主场）
     hr-inbox-section 薄荷面板（对应「四重配方」）
     hr-demos         蓝紫底（对应「临床实证 / 使用方式」）
     hr-steps         淡紫底（对应「怎么开始」）
     hr-you           奶油纸底（从「研究平均」接到「你自己的记录」）
     hr-final         近黑底收尾
   内容重心：产品本身，不是科学论证。
   ============================================================ */

/* ============ 1. HERO ============ */
.hr-hero {
  min-height: 100svh;
  padding: 170px max(5vw, 24px) 80px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr);
  align-items: center;
  gap: 4vw;
  background: var(--lm-hero-green);
  color: var(--lm-ink);          /* 白字在此底上仅 2.92:1，改深字 6.41:1 */
  position: relative;
  overflow: hidden;
}

.hr-hero-copy { min-width: 0; position: relative; z-index: 2; }

/* 顶部信任条（替代参考站的 Product Hunt 徽章位置） */
.hr-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 11px;
  border-radius: var(--r-pill);
  background: rgba(6, 21, 14, .12);
  border: 1.5px solid rgba(6, 21, 14, .2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lm-ink);
  margin-bottom: 26px;
}
.hr-badge b { font-weight: 800; }
.hr-badge-ico {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--lm-ink);
  color: var(--lm-lime);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
}

.hr-hero h1 {
  font-family: var(--font-display);
  max-width: 750px;
  margin: 22px 0 28px;
  font-size: clamp(50px, 6.2vw, 104px);
  line-height: .84;
  font-weight: 800;
  letter-spacing: -.055em;
}
.hr-hero h1 span { display: block; }
.hr-hero h1 em {
  font-style: normal;
  color: var(--lm-ink);
  background: var(--lm-lime);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hr-lead {
  max-width: 620px;
  margin-bottom: 34px;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.45;
  color: #0b2f1c;
  font-weight: 500;
}

.hr-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hr-hero-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #0b2f1c;
  line-height: 1.35;
}
.hr-hero-note b { font-size: 15px; font-weight: 800; }
.hr-hero-note span { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Hero 右侧：产品视觉（纯 CSS/SVG，无外部图） */
.hr-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
}
.hr-hero-art::before {
  content: '';
  position: absolute;
  inset: 6% -6% -4% 8%;
  border-radius: var(--r-xl);
  background: var(--lm-mint);
  z-index: 0;
}

/* 产品罐体 */
.jar-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  filter: drop-shadow(var(--sh-card));
  animation: jar-float 6s ease-in-out infinite;
}
@keyframes jar-float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-14px) rotate(1.2deg); }
}

/* Hero 浮层信息 chip */
.hero-chip {
  position: absolute;
  z-index: 3;
  background: var(--lm-white);
  border: 2px solid var(--lm-ink);
  border-radius: 16px;
  padding: 11px 16px;
  box-shadow: 4px 4px 0 var(--lm-ink);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--lm-ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-chip small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #3f5348;
  letter-spacing: .02em;
}
.hero-chip-1 { top: 6%; left: -2%; }
.hero-chip-2 { bottom: 12%; right: -3%; background: var(--lm-lime); }
.hero-chip-3 { bottom: 34%; left: -5%; background: var(--lm-white); }
.hero-chip-ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--lm-dark);
  color: var(--lm-lime);
  display: grid;
  place-items: center;
  font-size: 14px;
  flex: none;
}

/* ============ 2. 产品横滑栏（核心） ============ */
.hr-rail-section {
  padding: 110px 0 140px;
  background: var(--lm-white);
}
.hr-section-head {
  max-width: 1520px;
  margin: 0 auto 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 0 max(5vw, 24px);
}
.hr-section-head h2 {
  font-family: var(--font-display);
  margin-top: 14px;
  font-size: clamp(38px, 5.2vw, 88px);
  line-height: .86;
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--lm-dark);
}
.hr-section-head h2 em {
  font-style: normal;
  background: var(--lm-lime);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hr-section-head p { color: var(--on-cream); font-size: 15px; }

.hr-kicker { color: #3f5348; }

.hr-rail-nav { display: flex; gap: 10px; flex: none; }
.hr-rail-nav button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--lm-dark);
  background: var(--lm-white);
  font-size: 19px;
  font-weight: 700;
  color: var(--lm-dark);
  display: grid;
  place-items: center;
  transition: background .18s, color .18s, transform .18s;
}
.hr-rail-nav button:hover:not(:disabled) { background: var(--lm-dark); color: var(--lm-lime); }
.hr-rail-nav button:disabled { opacity: .32; cursor: not-allowed; }

.hr-rail-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.hr-rail-viewport::-webkit-scrollbar { display: none; }
.hr-rail {
  display: flex;
  width: max-content;
  gap: 36px;
  padding: 20px max(5vw, 24px) 50px;
}

/* 产品卡（宽 68vw 上限 860px，38px 圆角，2px 描边，微旋转） */
.hr-product-card {
  width: min(68vw, 860px);
  min-height: 620px;
  padding: 38px;
  border-radius: var(--r-card);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 28px;
  flex: none;
  overflow: hidden;
  transform: rotate(var(--card-r, -1deg));
  border: 2px solid rgba(7, 61, 40, .12);
  transition: transform .5s var(--ease-out), box-shadow .5s;
  color: var(--lm-dark);
}
.hr-product-card:nth-child(even) { --card-r: 1deg; }
.hr-product-card:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(7, 61, 40, .3);
}
.hr-product-card.is-lime   { background: var(--lm-lime); }
.hr-product-card.is-forest { background: var(--lm-green); }
.hr-product-card.is-mint   { background: var(--lm-mint); }
.hr-product-card.is-cream  { background: var(--lm-cream); }

.hr-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.hr-card-no {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  /* 原用 rgba(7,61,40,.5) 只有 2.76:1；改实色后 10.69:1 */
  color: var(--lm-dark);
  opacity: .78;
}
.hr-card-copy h3 {
  font-family: var(--font-display);
  margin-top: auto;
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--lm-dark);
}
.hr-card-copy h3 small {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: .06em;
  /* rgba(.58) 只有 3.37:1；改实色后 8.92:1 */
  color: #124a2e;
  margin-top: 12px;
  text-transform: uppercase;
}
.hr-card-copy p {
  margin: 18px 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: #123322;
  font-weight: 500;
}
.hr-card-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}
.hr-card-kv span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(6, 21, 14, .1);
  color: var(--lm-dark);
}
.hr-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: auto;
  padding: 14px 14px 14px 20px;
  border-radius: 12px;
  background: var(--lm-dark);
  color: #fff;
  font-weight: 800;
  transition: transform .25s var(--ease-out), background .25s;
}
.hr-card-cta:hover { transform: translateX(4px); background: var(--lm-ink); }

.hr-card-media {
  position: relative;
  min-width: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 20px;
}
.hr-card-media svg { width: 100%; height: auto; }

/* ============ 3. 配方面板（薄荷，对应 hr-inbox） ============ */
.hr-formula {
  padding: 80px max(5vw, 24px);
  background: #e3f2df;
}
.hr-panel {
  max-width: 1800px;
  min-height: 580px;
  margin: auto;
  padding: clamp(36px, 4vw, 76px);
  display: grid;
  grid-template-columns: minmax(0, .37fr) minmax(0, .63fr);
  align-items: center;
  gap: clamp(28px, 4vw, 80px);
  border-radius: var(--r-xl);
  background: var(--lm-dark);
  color: #fff;
  overflow: hidden;
}
.hr-panel h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 60px);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.05em;
  margin: 14px 0 20px;
}
.hr-panel h2 em { font-style: normal; color: var(--lm-lime); }
.hr-panel p { color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.55; margin-bottom: 26px; }
.hr-panel .hr-kicker { color: var(--lm-lime); }
.hr-panel-visual { position: relative; display: grid; place-items: center; }
.hr-panel-visual svg { width: 100%; max-width: 760px; height: auto; }

/* ============ 4. 实证段（蓝紫，对应 hr-demos） ============ */
.hr-proof {
  background: var(--lm-sec-blue);
  color: var(--lm-ink);
  padding: 96px max(5vw, 24px);
}
.hr-proof-head { max-width: 1520px; margin: 0 auto 48px; }
.hr-proof-head .hr-kicker { color: var(--on-blue); }
.hr-proof-head h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 76px);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.05em;
  margin-top: 14px;
  color: var(--lm-ink);
}
.hr-proof-head h2 em { font-style: normal; background: var(--lm-lime); padding: 0 .08em; }
.hr-proof-head > p { color: var(--on-blue); font-size: 16px; margin-top: 16px; max-width: 680px; line-height: 1.55; }

.hr-proof-grid {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hr-proof-card {
  background: rgba(255, 255, 255, .92);
  border-radius: 24px;
  padding: 26px 22px;
  border: 2px solid rgba(6, 21, 14, .1);
}
.hr-proof-card b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--lm-ink);
  margin-bottom: 6px;
}
.hr-proof-card b u { text-decoration: none; font-size: .46em; margin-left: 3px; color: var(--on-blue); }
.hr-proof-card span { font-size: 13.5px; line-height: 1.45; color: #22305a; font-weight: 600; display: block; }

.hr-proof-note {
  max-width: 1520px;
  margin: 26px auto 0;
  background: rgba(255, 255, 255, .72);
  border-left: 4px solid var(--lm-ink);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.65;
  color: #1b2647;
}
.hr-proof-note b { font-weight: 800; }

/* 图表区 */
.hr-chart-wrap {
  max-width: 1520px;
  margin: 30px auto 0;
  background: #fff;
  border-radius: 28px;
  padding: clamp(20px, 3vw, 38px);
  border: 2px solid rgba(6, 21, 14, .08);
}
.hr-chart-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  color: #22305a;
}
.hr-chart-legend i {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
  margin-right: 7px;
  vertical-align: -2px;
}
.hr-chart-scroll { overflow-x: auto; }
.hr-chart-scroll > svg { min-width: 620px; width: 100%; height: auto; }

/* ============ 5. 使用方法（淡紫，对应 hr-steps） ============ */
.hr-steps {
  background: var(--lm-sec-lavender);
  color: var(--lm-ink);
  padding: 96px max(5vw, 24px) 110px;
}
.hr-steps .hr-kicker { color: var(--on-violet); }
.hr-steps h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 76px);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.05em;
  margin: 14px 0 46px;
}
.hr-step-grid {
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hr-step-card {
  background: #fff;
  border-radius: 28px;
  padding: 30px 26px 34px;
  border: 2px solid rgba(6, 21, 14, .08);
  position: relative;
  overflow: hidden;
}
.hr-step-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--on-violet);
  display: block;
  margin-bottom: 18px;
}
.hr-step-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  color: var(--lm-ink);
}
.hr-step-card p { font-size: 14.5px; line-height: 1.6; color: #3a3550; }
.hr-step-art { margin-bottom: 20px; height: 92px; display: flex; align-items: center; }
.hr-step-art svg { height: 100%; width: auto; }


/* ============ 6. 从平均值到你自己（奶油纸底，hr-you） ============
   叙事位置：#how（怎么量）之后、hr-final（现在开始）之前。
   它要解决的问题：上一段 #evidence 给的是 130 人的平均 −4.5cm，
   读者会问「那和我有什么关系」。这一段把「群体证据」接到「个人证据」，
   CTA 指向 journey.html —— 这是转化主路径上原本断掉的一环。
   底色选 --lm-cream：上下分别是淡紫(#e6e1ef)与近黑(#06150e)，
   若再接一个彩色块会显得杂；奶油的纸感让这一段像「附页」，不抢主视觉。 */
.hr-you {
  background: var(--lm-cream);
  color: var(--lm-ink);
  padding: 96px max(5vw, 24px) 104px;
}
.hr-you-inner { max-width: 1220px; margin: 0 auto; }
.hr-you .hr-kicker { color: var(--on-cream); }
.hr-you h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 80px);
  line-height: .88;
  font-weight: 800;
  letter-spacing: -.055em;
  margin: 16px 0 26px;
}
.hr-you h2 em {
  font-style: normal;
  background: var(--lm-lime);
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hr-you-lead {
  max-width: 660px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--on-cream);
}

/* ---------- 两栏对照：平均 vs 你 ---------- */
.hr-you-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 52px 0 0;
}
.hr-you-card {
  background: #fff;
  border: 2px solid rgba(6, 21, 14, .08);
  border-radius: 28px;
  padding: 26px 26px 30px;
}
/* 「你自己」那张：用深色强调，让视线落在右边 —— 它是这一段的主张 */
.hr-you-card--mine {
  background: var(--lm-dark);
  border-color: var(--lm-dark);
  color: #fff;
}
.hr-you-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--on-cream);
  background: rgba(6, 21, 14, .06);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.hr-you-card--mine .hr-you-tag {
  color: var(--lm-lime);
  background: rgba(223, 252, 99, .14);
}
.hr-you-viz { margin: 0 0 20px; }
.hr-you-viz svg { width: 100%; height: auto; display: block; }
/* 深色卡里的 SVG 网格/文字要跟着换色，否则浅灰线在深绿上几乎看不见。
   ⚠️ 注意：坐标轴刻度文字的 fill 写在 <g> 上、由 <text> 继承，
   所以必须选 [fill] 而不是 text[fill] —— 后者匹配不到任何元素（实测过，
   getComputedStyle 返回 NO-ELEMENT，而画面看起来「只是有点暗」，很容易漏掉）。 */
.hr-you-card--mine .hr-you-viz svg [stroke="#e6e0d1"] { stroke: rgba(255, 255, 255, .14); }
.hr-you-card--mine .hr-you-viz svg [fill="#5f7263"] { fill: rgba(255, 255, 255, .62); }
.hr-you-card--mine .hr-you-viz svg [stroke="#cfc7b4"] { stroke: rgba(255, 255, 255, .3); }
.hr-you-card--mine .hr-you-viz svg polyline { stroke: var(--lm-lime); }
.hr-you-card--mine .hr-you-viz svg g[fill="#fff"][stroke="#073d28"] { fill: var(--lm-dark); stroke: var(--lm-lime); }
.hr-you-card--mine .hr-you-viz svg circle[fill="#27c66f"] { fill: var(--lm-lime); stroke: var(--lm-dark); }
/* 平台期那条短虚线：原色是深绿 #073d28，压在深绿卡上实测 1.00:1 —— 完全看不见。
   它必须跟折线同一个亮色，否则「卡住了」这个标注就成了无指向的孤岛。 */
.hr-you-card--mine .hr-you-viz svg line[stroke="#073d28"] { stroke: var(--lm-lime); }

.hr-you-card h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 10px;
  color: var(--lm-ink);
}
.hr-you-card--mine h3 { color: #fff; }
.hr-you-card p { font-size: 14.5px; line-height: 1.62; color: #3a3550; }
.hr-you-card--mine p { color: rgba(255, 255, 255, .82); }

/* ---------- 三条事实 ---------- */
.hr-you-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 44px 0 0;
  padding: 0;
  border-top: 2px solid rgba(6, 21, 14, .1);
}
.hr-you-facts li {
  padding: 24px 28px 0 0;
  border-right: 2px solid rgba(6, 21, 14, .1);
}
.hr-you-facts li:last-child { border-right: 0; padding-right: 0; }
.hr-you-facts li + li { padding-left: 28px; }
.hr-you-facts b {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lm-ink);
  margin-bottom: 8px;
}
.hr-you-facts span { font-size: 14px; line-height: 1.6; color: var(--on-cream); }

/* ---------- 口径说明（不能省） ---------- */
.hr-you-note {
  margin: 40px 0 0;
  padding: 16px 20px;
  background: rgba(6, 21, 14, .045);
  border-left: 3px solid rgba(6, 21, 14, .22);
  border-radius: 0 12px 12px 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--on-cream);
}
.hr-you-note b { font-weight: 800; }

.hr-you-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding: 16px 24px;
  border-radius: 14px;
  background: var(--lm-ink);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  transition: transform .25s var(--ease-out), background .25s;
}
.hr-you-link:hover { transform: translateY(-3px); background: var(--lm-dark); }


/* ============ 7. 收尾（近黑，对应 hr-final） ============ */
.hr-final {
  min-height: 72vh;
  padding: 100px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--lm-ink);
  color: #fff;
  border-radius: 70px 70px 0 0;
}
.hr-final .hr-kicker { color: var(--lm-lime); }
.hr-final h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 110px);
  line-height: .84;
  font-weight: 800;
  letter-spacing: -.055em;
  margin: 20px 0 34px;
  max-width: 900px;
}
.hr-final h2 em { font-style: normal; color: var(--lm-lime); }
.hr-final .cta { background: var(--lm-lime); color: var(--lm-ink); }
.hr-final .cta > span { background: var(--lm-lime); border-left-color: rgba(6, 21, 14, .25); }
.hr-final .cta:hover { background: #eafd8a; }

/* ============ 数据带 marquee（参考站 .marquee） ============ */
.marquee {
  background: var(--lm-ink);
  color: var(--lm-cream);
  padding: 26px 0;
  overflow: hidden;
  border-top: 3px solid var(--lm-ink);
  border-bottom: 3px solid var(--lm-ink);
  transform: rotate(-1.2deg);
  margin: -40px 0 0;
  position: relative;
  z-index: 5;
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 34s linear infinite;
  align-items: center;
}
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lm-cream);
  white-space: nowrap;
}
.marquee-item::after {
  content: '✦';
  color: var(--lm-lime);
  font-size: .85em;
  margin-left: 56px;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ============ 响应式 ============ */
@media (max-width: 1200px) {
  .hr-product-card { width: min(78vw, 780px); grid-template-columns: 1fr; min-height: auto; }
  .hr-card-copy h3 { margin-top: 10px; }
  .hr-card-media { min-height: 300px; }
  .hr-proof-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .hr-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 120px max(5vw, 24px) 64px;
    gap: 40px;
  }
  .hr-hero h1 { font-size: clamp(44px, 9vw, 72px); }
  .hr-hero-art { min-height: 340px; order: -1; }
  .jar-wrap { width: min(72%, 300px); }
  .hero-chip-1 { left: 0; }
  .hero-chip-3 { left: 0; bottom: 26%; }
  .hero-chip-2 { right: 0; }

  .hr-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hr-rail-section { padding: 70px 0 90px; }
  .hr-product-card { width: 84vw; padding: 26px; }

  .hr-panel { grid-template-columns: 1fr; min-height: auto; }
  .hr-step-grid { grid-template-columns: 1fr; }

  /* 从平均到自己：两栏对照改单列，「平均」在上、「你」在下 —— 保持先证据后主张的顺序 */
  .hr-you { padding: 74px max(5vw, 24px) 82px; }
  .hr-you-grid { grid-template-columns: 1fr; margin-top: 40px; }
  /* 三条事实：竖排，靠间距而非竖线分隔（窄屏竖线会贴字） */
  .hr-you-facts { grid-template-columns: 1fr; margin-top: 36px; }
  .hr-you-facts li {
    border-right: 0;
    border-bottom: 2px solid rgba(6, 21, 14, .1);
    padding: 20px 0;
  }
  .hr-you-facts li:last-child { border-bottom: 0; }
  .hr-you-facts li + li { padding-left: 0; }

  .hr-final { border-radius: 44px 44px 0 0; }
}

@media (max-width: 640px) {
  .hr-hero { padding: 104px 20px 52px; }
  .hr-badge { font-size: 11.5px; padding: 8px 13px 8px 9px; }
  .hr-hero-actions { gap: 16px; }
  .hr-hero-note { font-size: 12px; }
  .hr-proof-grid { grid-template-columns: 1fr; }
  .hr-product-card { width: 88vw; padding: 22px; border-radius: 26px; }
  .hr-card-copy h3 { font-size: 30px; }
  .hr-rail { gap: 18px; }
  .hr-rail-nav button { width: 44px; height: 44px; }
  .hr-final { padding: 70px 20px; }
  .hr-you { padding: 62px 20px 70px; }
  .hr-you-card { padding: 22px 20px 26px; border-radius: 24px; }
  .hr-you-lead { font-size: 15.5px; }
  .hr-you-note { font-size: 12px; padding: 14px 16px; }
  .hr-you-link { width: 100%; justify-content: center; }
  .marquee { margin-top: -24px; }
  .hero-chip { font-size: 11px; padding: 8px 12px; }
  .hero-chip-ico { width: 26px; height: 26px; font-size: 12px; }
}