/* ============================================================
 * 鲸选 · 智能工作台
 * sub.css —— 产品页 / 定价页 专用样式（依附 home.css 设计体系）
 * ============================================================ */

/* ---------- 1. 顶栏导航 ---------- */
html { scroll-behavior: smooth; }
.hx-sec { scroll-margin-top: 72px; }   /* 锚点跳转时避开 sticky 顶栏 */
.top-nav {
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px);
  margin-left: auto;
}
.top-nav .top-link { position: relative; padding: 8px 2px; }
.top-nav .top-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--hz-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--hz-d-fast) var(--hz-ease);
}
.top-nav .top-link:hover::after { transform: scaleX(1); }
.top-nav .top-link.nav-active { color: var(--hz-text); }
.top-nav .top-link.nav-active::after { transform: scaleX(1); }
/* 登录区紧随其后 */
.top-right { margin-left: 0; }

/* ---------- 2. 子页 Hero（比首页收敛） ---------- */
.sub-hero { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(30px, 4vw, 56px); }
.sub-hero .hx-h1 { font-size: clamp(36px, 4.6vw, 64px); }
.sub-hero .hx-lead { max-width: 40em; }

/* ---------- 3. 定价页：四条路，四个价钱 ---------- */
.pr-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
/* 两张卡的在线使用区（个人版 / 团队版） */
.pr-grid.two {
  grid-template-columns: repeat(2, 1fr);
  width: min(860px, 100%);
}
/* 三张卡的在线使用区（个人版 / 团队版 / 企业顾问） */
.pr-grid.three {
  grid-template-columns: repeat(3, 1fr);
  width: min(1100px, 100%);
}

.pr-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--hz-surface); border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-lg);
  transition: transform var(--hz-d-base) var(--hz-ease), border-color var(--hz-d-base) var(--hz-ease),
              box-shadow var(--hz-d-base) var(--hz-ease);
}
.pr-card:hover { transform: translateY(-6px); border-color: var(--hz-line-strong); box-shadow: var(--hz-sh-2); }
.pr-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--hz-line-strong); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--hz-d-base) var(--hz-ease);
}
.pr-card:hover::after { transform: scaleX(1); }

/* 徽章：挂在卡片右上角（精选特惠），卡片本身与其它价目卡同款 */
.pr-badge {
  position: absolute; top: -13px; right: 18px;
  font-family: var(--hz-mono); font-size: 10px; letter-spacing: 1.4px;
  background: var(--hz-accent); color: #0B0C0E;
  padding: 4px 12px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--hz-sh-1);
}

.pr-name {
  font-family: var(--hz-body); font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em; color: var(--hz-text);
}
.pr-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-price .num {
  font-family: var(--hz-display); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(34px, 3vw, 44px); line-height: 1; color: var(--hz-text);
  font-variant-numeric: tabular-nums;
}
.pr-price .unit {
  font-family: var(--hz-mono); font-size: 12px; letter-spacing: 0.4px; color: var(--hz-faint);
}
.pr-desc { font-size: var(--hz-fs-sm); line-height: 1.85; color: var(--hz-muted); }
.pr-give {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hz-line);
  font-family: var(--hz-mono); font-size: 11px; letter-spacing: 0.5px; color: var(--hz-muted);
}
.pr-give b { color: var(--hz-text); font-weight: 600; }

/* 价目页脚注 */
.pr-foot {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--hz-mono); font-size: 11.5px; letter-spacing: 0.5px; color: var(--hz-faint);
}
.pr-foot::before { content: ""; width: 26px; height: 1px; background: var(--hz-line-strong); }

/* ---------- 4. 定价页：部署三档 ---------- */
.dp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.dp-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--hz-surface); border: 1px solid var(--hz-line);
  border-radius: var(--hz-r-lg);
  transition: transform var(--hz-d-base) var(--hz-ease), border-color var(--hz-d-base) var(--hz-ease),
              box-shadow var(--hz-d-base) var(--hz-ease);
}
.dp-card:hover { transform: translateY(-6px); border-color: var(--hz-line-strong); box-shadow: var(--hz-sh-2); }
.dp-num {
  font-family: var(--hz-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--hz-accent); text-transform: uppercase;
}
.dp-card.mid {
  background: var(--hz-surface-2);
  border-color: rgba(255, 90, 31, 0.55);
  box-shadow: var(--hz-sh-2);
  transform: translateY(-10px);
}
.dp-card.mid::after {
  content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px;
  background: var(--hz-accent); border-radius: var(--hz-r-lg) var(--hz-r-lg) 0 0;
}
.dp-name { font-family: var(--hz-body); font-weight: 700; font-size: 17px; color: var(--hz-text); }
.dp-price { display: flex; align-items: baseline; gap: 8px; }
.dp-price .num {
  font-family: var(--hz-display); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(30px, 2.6vw, 38px); line-height: 1; color: var(--hz-text);
  font-variant-numeric: tabular-nums;
}
.dp-price .unit { font-family: var(--hz-mono); font-size: 12px; color: var(--hz-faint); }
.dp-desc { font-size: var(--hz-fs-sm); line-height: 1.85; color: var(--hz-muted); }
.dp-give {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hz-line);
  font-family: var(--hz-mono); font-size: 11px; letter-spacing: 0.5px; color: var(--hz-muted);
}
.dp-give b { color: var(--hz-text); font-weight: 600; }

/* 三档页底部的立场句 */
.dp-quote {
  margin-top: clamp(28px, 3.4vw, 44px);
  font-size: clamp(15px, 1.3vw, 18px); font-weight: 700; color: var(--hz-text);
  display: flex; align-items: baseline; gap: 12px;
}
.dp-quote::before { content: ""; width: 26px; height: 3px; flex: none; background: var(--hz-accent); transform: translateY(-4px); }

/* ---------- 5. 产品页补充 ---------- */
.sub-final .btn { min-width: 260px; }
/* 产品页五张工作台：静态展示卡复用 .pos-card，改为 <a> */
a.pos-card { text-decoration: none; }

/* ---------- 6. 响应式 ---------- */
@media (max-width: 1080px) {
  .pr-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .pr-grid.three { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .dp-grid { grid-template-columns: 1fr; }
  .dp-card.mid { transform: none; }
  .top-nav { gap: 14px; }
}

/* 手机：顶栏收紧为单行（品牌 + 导航 + 登录），放不下时自动换行兜底 */
@media (max-width: 760px) {
  .portal-top { padding: 10px 0; }
  .portal-top .container { flex-wrap: wrap; row-gap: 2px; }
  body.home-body .brand .bn-sub { display: none; }
  .top-right { order: 3; margin-left: 0; gap: 12px; }
  .top-nav { margin-left: auto; gap: 16px; }
  .top-nav .top-link { min-height: 36px; }
  .sub-hero .hx-h1 { font-size: clamp(38px, 11vw, 54px); }
  .sub-hero { padding-top: 34px; }
}

@media (max-width: 640px) {
  .pr-grid, .pr-grid.two, .pr-grid.three { grid-template-columns: 1fr; }
  .pr-badge { top: -11px; right: 14px; font-size: 9px; padding: 3px 10px; }
  .top-nav { gap: 16px; }
  .top-nav .top-link { font-size: 12px; }
  .top-user { display: none; }
  .hx-cta .btn { width: 100%; }
  /* 底部 CTA 区：大按钮与「意见反馈」上下堆叠，不再挤在一行 */
  .hx-final-act { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hx-final-act .btn { width: 100%; min-width: 0; }
  .hx-final-act .fb-btn { width: 100%; justify-content: center; }
  .sub-final .btn { min-width: 0; }
}