/* ===== W-H03 产品介绍页重设计 · scoped 覆盖（前缀 .wh03-）=====
   仅复用现有 token / 组件（暖米墨绿、字体层级、ui-btn / ui-eyebrow / brand），
   不新增视觉体系。目标是压缩首屏空白、提高信息密度、让下一段自然露出。 */

/* 统一内容宽度（沿用 production 的 content-max 与左右安全边） */
.wh03-wrap{
  width:min(var(--content-max), 100% - 2 * clamp(20px, 5vw, 72px));
  margin-inline:auto;
}

/* ---------- 首屏：紧凑分栏，露出下一段 ---------- */
.wh03-hero{
  width:min(var(--content-max), 100% - 2 * clamp(20px, 5vw, 72px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px, 4vw, 56px);
  align-items:center;
  padding:clamp(18px, 2.4vw, 28px) 0 clamp(26px, 3.6vw, 40px);   /* 顶留白 96px → ~18–28px */
}
.wh03-hero-copy{ display:grid; gap:clamp(12px, 1.5vw, 16px); justify-items:start; }
.wh03-hero .ui-eyebrow{ margin:0; }
.wh03-hero h1{
  margin:0; font-family:var(--font-display); font-weight:var(--heading-weight,600);
  font-size:clamp(28px, 3.2vw, 42px); line-height:1.16; letter-spacing:-.02em; color:var(--ink-900);
}
.wh03-lede{ margin:0; color:var(--ink-600); font-size:clamp(16px, 1.25vw, 18px); line-height:1.7; max-width:44ch; }
.wh03-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2px; }
.wh03-hero-actions .ui-btn,.wh03-closing-actions .ui-btn{
  box-sizing:border-box; width:180px; max-width:100%; min-height:44px;
  padding:0 16px; font-size:16px; line-height:1.4; flex:0 1 180px;
}
.wh03-hero-meta{
  list-style:none; margin:4px 0 0; padding:12px 0 0; border-top:1px solid var(--line-200);
  display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--ink-600); font-size:14px; width:100%;
}
.wh03-hero-meta li{ display:flex; align-items:center; gap:8px; }
.wh03-hero-meta li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-700); flex:none; }

.wh03-hero-media{ display:grid; gap:14px; }
.wh03-shot{
  background:var(--surface-card); border:var(--card-border); border-radius:var(--radius-l);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.wh03-shot img{ width:100%; height:auto; display:block; }
.wh03-shot--main{ padding:clamp(10px, 1.4vw, 16px); box-shadow:var(--shadow-lift); }
.wh03-shot-cap{ display:flex; align-items:center; gap:8px; padding:8px 6px 2px; color:var(--ink-600); font-size:13px; }
.wh03-shot-cap b{ color:var(--ink-900); font-weight:600; }
.wh03-shot-cap .wh03-tag{
  margin-left:auto; background:var(--brand-100); color:var(--brand-700);
  border-radius:var(--radius-pill, 999px); padding:2px 10px; font-size:12px; font-weight:600;
}
.wh03-hero-subshots{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wh03-shot--mini{ padding:8px; }

/* ---------- 通用区块 ---------- */
.wh03-section{
  width:min(var(--content-max), 100% - 2 * clamp(20px, 5vw, 72px));
  margin:0 auto; padding:clamp(28px, 3.6vw, 44px) 0; display:grid; gap:clamp(18px, 2.4vw, 28px);
}
.wh03-section + .wh03-section{ border-top:1px solid var(--line-200); }
.wh03-head{ display:grid; gap:8px; max-width:64ch; }
.wh03-head .ui-eyebrow{ margin:0; }
.wh03-head h2{ margin:0; font-family:var(--font-display); font-weight:var(--heading-weight,600); font-size:var(--text-section-title); line-height:1.28; color:var(--ink-900); }
.wh03-head p{ margin:0; color:var(--ink-600); font-size:16px; line-height:1.7; }

/* 痛点：3 卡 */
.wh03-pains{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wh03-pain{ background:var(--surface-card); border:var(--card-border); border-radius:var(--radius-l); padding:20px; display:grid; gap:8px; align-content:start; }
.wh03-pain b{ font-size:17px; color:var(--ink-900); }
.wh03-pain p{ margin:0; color:var(--ink-600); font-size:15px; line-height:1.7; }

/* 三步：编号 + 说明（图集中放首屏，避免重复） */
.wh03-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.wh03-step{ background:var(--surface-card); border:var(--card-border); border-radius:var(--radius-l); padding:20px; display:grid; gap:10px; align-content:start; }
.wh03-step-top{ display:flex; align-items:center; gap:12px; }
.wh03-step-num{ width:36px; height:36px; border-radius:50%; background:var(--brand-100); color:var(--brand-700); font-weight:700; display:grid; place-items:center; flex:none; font-family:var(--font-display); }
.wh03-step-top b{ font-size:17px; color:var(--ink-900); }
.wh03-step p{ margin:0; color:var(--ink-600); font-size:14px; line-height:1.7; }

/* 功能：按 导入 / 练习 / 复习 / 家长与环境 分组，提高密度 */
.wh03-groups{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.wh03-group{ background:var(--paper-1); border-radius:var(--radius-l); padding:20px; display:grid; gap:14px; }
.wh03-group > h3{ margin:0; font-size:13px; letter-spacing:.12em; color:var(--brand-700); text-transform:uppercase; font-weight:700; }
.wh03-group ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.wh03-group li{ display:grid; gap:3px; }
.wh03-group li b{ font-size:16px; color:var(--ink-900); }
.wh03-group li p{ margin:0; color:var(--ink-600); font-size:14px; line-height:1.65; }

/* 价格（口径不变） */
.wh03-pricing{ background:var(--brand-700); color:var(--paper-0); border-radius:var(--radius-l); padding:clamp(22px, 3vw, 32px); display:grid; gap:10px; }
.wh03-pricing b{ font-family:var(--font-display); font-size:20px; }
.wh03-pricing p{ margin:0; line-height:1.75; color:color-mix(in srgb, var(--paper-0) 82%, transparent); max-width:72ch; }

/* 结尾 */
.wh03-closing{
  width:min(var(--content-max), 100% - 2 * clamp(20px, 5vw, 72px)); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px, 3vw, 40px); align-items:end;
  padding:clamp(28px, 3.6vw, 44px) 0 clamp(40px, 5vw, 64px); border-top:1px solid var(--line-200);
}
.wh03-closing .ui-eyebrow{ margin:0; }
.wh03-closing h2{ margin:8px 0 0; font-family:var(--font-display); font-weight:var(--heading-weight,600); font-size:var(--text-section-title); line-height:1.3; color:var(--ink-900); }
.wh03-closing-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- 手机（<=820px）收拢 ---------- */
@media (width <= 820px){
  .wh03-hero{ grid-template-columns:1fr; gap:22px; padding:16px 0 26px; }
  .wh03-hero h1{ font-size:clamp(26px, 7.4vw, 34px); }
  .wh03-hero-actions{ width:100%; justify-content:center; }
  .wh03-hero-media{ display:none; }
  .wh03-pains{ grid-template-columns:1fr; }
  .wh03-steps{ grid-template-columns:1fr; width:100%; min-width:0; margin:0; padding:0; list-style:none; }
  .wh03-start .wh03-head{ justify-items:center; text-align:center; max-width:none; }
  .wh03-step{ width:100%; min-width:0; justify-items:center; text-align:center; }
  .wh03-step-top{ flex-direction:column; justify-content:center; width:100%; }
  .wh03-step-top b{ max-width:100%; overflow-wrap:anywhere; }
  .wh03-step p{ text-align:center; }
  .wh03-groups{ grid-template-columns:1fr; }
  .wh03-closing{ grid-template-columns:1fr; align-items:stretch; }
  .wh03-closing-actions{ width:100%; display:grid; grid-template-columns:minmax(0,180px); justify-content:center; }
}
@media (width <= 360px){
  .wh03-hero-subshots{ grid-template-columns:1fr; }
}