/* ═══════════════════════════════════════════════════════════════
   财小云 — /welcome/ 新手引导落地页（V16 样式回迁 260720；noindex 漏斗内页）
   依赖：tokens.css / base.css / home.css / components.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 轻 Hero（与 knowledge-sub.css 同款 V17 口径）── */
.hero-light { padding: var(--cxy-space-10) 0 var(--cxy-space-9); }
.hero-light .wrap { text-align: center; }
.hero-light .hello { display: inline-flex; align-items: center; gap: var(--cxy-space-2); margin-bottom: var(--cxy-space-4); }
.hero-light h1 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem);
  line-height: var(--cxy-leading-tight); letter-spacing: var(--cxy-tracking-tight);
  color: var(--cxy-ink); margin: 0 0 var(--cxy-space-4);
}
.hero-light h1 .grad { white-space: nowrap; }
.hero-light .hero-sub { font-size: var(--cxy-size-body-article); color: var(--cxy-text); max-width: 40em; margin: 0 auto; }
.hero-light .hero-sub a { color: var(--cxy-action); font-weight: var(--cxy-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }

/* ── 居中容器（V16 回迁）── */
.hero-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-center .hero-ctas { justify-content: center; }

/* ── 三步上手（V16 回迁：竖向步骤卡 + 数字圆标）── */
.steps-v {
  list-style: none; margin: var(--cxy-space-7) 0 0; padding: 0;
  display: grid; gap: var(--cxy-space-5);
  counter-reset: stepv;
  position: relative;
}
.steps-v li {
  position: relative; padding: var(--cxy-space-6) var(--cxy-space-6) var(--cxy-space-6) calc(var(--cxy-space-6) + 50px);
  background: var(--cxy-surface-card); border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-xl);
}
.steps-v li::before {
  content: counter(stepv); counter-increment: stepv;
  position: absolute; left: var(--cxy-space-5); top: var(--cxy-space-5);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cxy-action-fill); color: var(--cxy-on-color);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cxy-font-num); font-weight: var(--cxy-weight-bold); font-size: var(--cxy-size-title);
}
:root[data-theme="dark"] .steps-v li::before { background-color: var(--cxy-blue-deep); }
.steps-v h3 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-heavy);
  font-size: 19px; color: var(--cxy-ink); margin: 0 0 var(--cxy-space-2);
}
.steps-v .step-desc { font-size: var(--cxy-size-body); color: var(--cxy-text); margin: 0 0 var(--cxy-space-4); max-width: 36em; }
.steps-v .step-demo {
  background: var(--cxy-subtle); border-radius: var(--cxy-radius-md);
  padding: var(--cxy-space-4); font-size: var(--cxy-size-sm); color: var(--cxy-ink-2);
}
.steps-v .step-demo-tag {
  display: inline-block; font-size: var(--cxy-size-label); font-weight: var(--cxy-weight-semibold);
  color: var(--cxy-muted); margin-bottom: var(--cxy-space-2);
  letter-spacing: var(--cxy-tracking-label);
}

/* ── 提示卡 + 企微内联码（V16 回迁）── */
.welcome-tips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cxy-space-4); margin-top: var(--cxy-space-5); }
.welcome-tip {
  background: var(--cxy-surface-card); border: var(--cxy-border-hairline) solid var(--cxy-border);
  border-radius: var(--cxy-radius-lg); padding: var(--cxy-space-5) var(--cxy-space-6);
}
.welcome-tip h3 {
  font-family: var(--cxy-font-cn); font-weight: var(--cxy-weight-bold);
  font-size: var(--cxy-size-body); color: var(--cxy-ink); margin: 0 0 var(--cxy-space-2);
}
.welcome-tip p { font-size: var(--cxy-size-sm); color: var(--cxy-text); margin: 0; }
.welcome-tip .wecom-inline { display: inline-flex; align-items: center; gap: var(--cxy-space-2); margin-top: var(--cxy-space-3); }
.welcome-tip .wecom-inline img { width: 92px; height: 92px; border-radius: var(--cxy-radius-sm); background: var(--cxy-on-color); padding: 4px; }
.welcome-tip .wecom-inline b { font-size: var(--cxy-size-sm); color: var(--cxy-ink); }
.welcome-tip .wecom-inline small { display: block; font-size: var(--cxy-size-label); color: var(--cxy-muted); max-width: 18em; }

/* ────────── 响应式 ────────── */
@media (max-width: 720px) { .welcome-tips { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .steps-v li { padding-left: var(--cxy-space-6); padding-top: calc(var(--cxy-space-6) + 28px); }
  .steps-v li::before { top: var(--cxy-space-4); left: var(--cxy-space-5); }
}