/* ============================================================
   产品页统一首屏体系（product-hero-unify · 2026-07-25）
   四页共用：/chatgpt /claude /gemini /grok
   结构统一：pill → H1 → 说明 → CTA → chips → CAPABILITIES → #plans
   只作用于 .hero--product 与 #cl-caps / #cl-plans 的排版层，
   不触碰套餐卡片结构、购买参数与弹窗逻辑。
   加载顺序在 site.css / product-cards.css 之后，按需覆盖。
   ============================================================ */

/* ---------- 首屏：严格居中、紧凑、留白克制 ---------- */
.hero--product{
  max-width:1080px;
  margin:0 auto;
  padding:34px 24px 0;
  text-align:center;
}

/* 1) 顶部小胶囊 → H1 间距 12px */
.hero--product .pill{
  padding:5px 14px;
  font-size:11.5px;
  letter-spacing:.12em;
  margin:0 0 12px;
}

/* 2) H1：比现在小一档、行高紧凑、允许自然换行 */
.hero--product h1{
  font-size:clamp(34px,3.2vw,52px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.5px;
  white-space:normal;
  max-width:980px;
  margin:0 auto;
  padding:0;
}

/* 3) 说明文案：明显缩小、收窄、浅一层 */
.hero--product .sub{
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.65;
  color:#5f6368;
  max-width:820px;
  margin:10px auto 0;
}

/* 4) CTA：说明→CTA 16px；两键居中同排，移动端自动换行 */
.hero--product .cta{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin:16px auto 0;
}
/* 主按钮「查看套餐」：轻微悬浮 + 柔和散光 */
.hero--product .cta .btn-fill{
  border-radius:12px;
  box-shadow:0 10px 26px rgba(0,168,107,.22), 0 2px 8px rgba(13,13,13,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero--product .cta .btn-fill:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(0,168,107,.30), 0 3px 10px rgba(13,13,13,.12);
}
/* 次按钮「选购与充值指南」：次一级、安静 */
.hero--product .cta .btn:not(.btn-fill){
  border-radius:12px;
  background:#fff;
  color:#333;
  border:1px solid #e3e6ea;
  box-shadow:none;
}
.hero--product .cta .btn:not(.btn-fill):hover{
  border-color:#bfc6cd;
  color:#0d0d0d;
}

/* 5) chips：CTA→chips 12px；更小更克制 */
.hero--product .chome-strip{
  margin:12px 0 0;
  gap:10px;
  justify-content:center;
}
.hero--product .chome-strip span{
  font-size:13px;
  padding:8px 14px;
  font-weight:600;
}

/* chips → CAPABILITIES 26px（首屏收底 + 能力区收顶） */
.hero--product{ padding-bottom:26px; }

/* ---------- 6) CAPABILITIES：统一、轻量、对称 ---------- */
#cl-caps{ padding-top:0; padding-bottom:26px; }
#cl-caps .sec-head{ margin-bottom:22px; }
#cl-caps .sec-head h2{ font-size:clamp(22px,2vw,30px); margin-bottom:8px; }
#cl-caps .sec-head p{
  font-size:14.5px;
  line-height:1.7;
  color:#6b7075;
  max-width:760px;
  margin:0 auto;
}
#cl-caps .cx-feat h3{ font-size:16px; }
#cl-caps .cx-feat p{ font-size:13.5px; line-height:1.65; color:#6b7075; }

/* ---------- 7) 价格区衔接：CAPABILITIES→#plans 26px；标题略收一档 ---------- */
#cl-plans{ padding-top:26px; }
#cl-plans .sec-head{ margin-bottom:22px; }
#cl-plans .sec-head h2{ font-size:clamp(24px,2.2vw,32px); margin-bottom:8px; }
#cl-plans .sec-head p{
  font-size:14.5px;
  line-height:1.7;
  color:#6b7075;
  margin:0 auto;
  max-width:760px;
}

/* ---------- 移动端：不撑高首屏、不横向滚动 ---------- */
@media (max-width:768px){
  .hero--product{ padding:24px 20px 22px; }
  .hero--product h1{ font-size:clamp(27px,7.4vw,34px); }
  .hero--product .sub{ font-size:14px; }
  .hero--product .cta{ gap:10px; margin-top:14px; }
  .hero--product .cta .btn{ width:min(320px,100%); }
  .hero--product .chome-strip span{ font-size:12px; padding:7px 12px; }
  #cl-caps{ padding-bottom:22px; }
  #cl-plans{ padding-top:22px; }
}