/* ==========================================================================
   RiskWeb — 极简高级 · 风险管理平台
   Design tokens + base styles
   ========================================================================== */

:root {
  /* 色板 */
  --bg: #FFFFFF;
  --bg-soft: #F6F6F3;
  --ink: #161616;
  --ink-mid: #55554F;
  --ink-soft: #8A8A84;
  --line: #E9E9E4;
  --line-strong: #D8D8D2;

  /* 企业线（蓝） */
  --biz: #0C447C;
  --biz-soft: #EAF1F8;
  /* 人生线（绿） */
  --life: #085041;
  --life-soft: #E8F2EE;

  /* 字体 */
  --serif: Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;

  /* 间距 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 128px;

  --maxw: 1120px;
  --radius: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--biz); color: #fff; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ==========================================================================
   排版
   ========================================================================== */

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; }

.display {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.h3 { font-size: 1.25rem; font-weight: 500; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-mid);
  line-height: 1.75;
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* 英文辅文案（双语对照用） */
.en { display: block; font-size: 0.82rem; color: var(--ink-soft); letter-spacing: 0.04em; }

/* ==========================================================================
   导航
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand .dot { color: var(--biz); }

.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }

.nav-links a {
  font-size: 0.94rem;
  color: var(--ink-mid);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

.nav-links .en-label { font-size: 0.72rem; color: var(--ink-soft); margin-left: 6px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.nav-cta:hover { background: var(--ink); color: #fff; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0;
}

/* ==========================================================================
   区块
   ========================================================================== */

.section { padding: var(--space-6) 0; }
.section.soft { background: var(--bg-soft); }
.section.tight { padding: var(--space-5) 0; }

.section-head { max-width: 640px; margin-bottom: var(--space-5); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { padding: var(--space-7) 0 var(--space-5); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hero .display { margin: var(--space-3) 0 var(--space-4); }
.hero .lead { max-width: 620px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: var(--space-4); }

/* 首页主按钮：与下方双入口卡对齐（两列等宽） */
.hero-actions--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hero-actions--split .btn {
  width: 100%;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 24px 28px;
}

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s;
}
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.ghost { border-color: var(--line-strong); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.biz { background: var(--biz); color: #fff; }
.btn.biz:hover { background: #0a3560; }
.btn.life { background: var(--life); color: #fff; }
.btn.life:hover { background: #063d31; }

/* 首页模块总览的工具地图入口（2026-11-10）：比文字链显眼，比主按钮克制 */
.toolmap-entry {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px 10px 16px;
  border: 1px solid rgba(15, 61, 46, 0.3);
  border-radius: 999px;
  background: var(--life-soft);
  color: var(--life);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.22s, border-color 0.22s, transform 0.22s;
}
.toolmap-entry::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
.toolmap-entry:hover {
  background: #fff;
  border-color: var(--life);
  transform: translateY(-1px);
}

/* 大号按钮（首页 Hero 主入口） */
.btn-lg {
  padding: 20px 42px;
  font-size: 1.08rem;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(22, 22, 22, 0.12);
}
.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(22, 22, 22, 0.18); }

/* 按钮内英文副标 */
.btn-en {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  opacity: 0.82;
  text-transform: uppercase;
}

/* ==========================================================================
   双业务入口（首页）
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.entry {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 48px 40px;
  border-radius: 12px;
  color: #fff;
  min-height: 360px;
  overflow: hidden;
  transition: transform 0.3s;
}
.entry:hover { transform: translateY(-4px); }
.entry.biz { background: var(--biz); }
.entry.life { background: var(--life); }

.entry .eyebrow { color: rgba(255, 255, 255, 0.7); }
.entry h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; margin: 20px 0 14px; }
.entry p { color: rgba(255, 255, 255, 0.82); max-width: 420px; }
.entry .entry-link { margin-top: auto; padding-top: 32px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.entry .entry-link::after { content: "→"; transition: transform 0.2s; }
.entry:hover .entry-link::after { transform: translateX(4px); }

/* ==========================================================================
   三列卡片
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 只有两张卡时用两列，避免第三列留空 */
.cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 四张卡（财务段：按次 → 退休专项 → 年度方案 → 年度顾问） */
.cards.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cards.cards-4 .card { padding: 30px 24px; }
.cards.cards-4 .card h3 { font-size: 1.06rem; }
.cards.cards-4 .card p { font-size: 0.88rem; }
.cards.cards-4 .card .en { font-size: 0.74rem; }
.card {
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  transition: border-color 0.2s;
}
.card:hover { border-color: var(--line-strong); }
.card .num { font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); }
.card h3 { margin: 18px 0 12px; }
.card p { color: var(--ink-mid); font-size: 0.96rem; }
.card .tag { display: inline-block; margin-top: 18px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.card .tag.biz { color: var(--biz); }
.card .tag.life { color: var(--life); }

/* 工具占位卡 */
.card.coming {
  background: var(--bg-soft);
  border-style: dashed;
  color: var(--ink-soft);
}
.card.coming h3 { color: var(--ink); }
.badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* ==========================================================================
   栏目标题页（企业 / 人生）
   ========================================================================== */

.page-hero { padding: var(--space-6) 0 var(--space-5); }
.page-hero.biz { background: var(--biz-soft); }
.page-hero.life { background: var(--life-soft); }
.page-hero .eyebrow { color: var(--ink-soft); }
.page-hero .display { margin: var(--space-2) 0 var(--space-3); }
.page-hero .lead { max-width: 640px; }

/* ---- 工具报告区「下一步」推荐栏（全站工具通用） ---- */
.next-tool {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--life);
  border-radius: 12px;
  background: var(--life-soft);
}
.next-tool .nt-eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--life);
  margin-bottom: 6px;
}
.next-tool p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.7; color: var(--ink-mid); }
/* 串链区并排入口：主路 + 可选的人工服务，同屏可见（合规工具包 → 回清单 / 创业指导） */
.next-tool .nt-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 串链区次级入口：主按钮之后可选的一行文字链 */
.next-tool .nt-plain { margin: 12px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.next-tool .nt-plain a { color: var(--life); text-decoration: underline; text-underline-offset: 2px; }
/* 深色报告区（退休金计算器 / 财务健康自测）内：白底卡片 + 品牌色按钮，与深绿背景明确区分 */
.retire-result .next-tool,
.finance-result .next-tool {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   列表 / 内容
   ========================================================================== */

.list { display: grid; gap: 0; }
.list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:first-child { border-top: 1px solid var(--line); }
.list-item h3 { font-size: 1.15rem; font-weight: 500; }
.list-item .en { margin-top: 4px; }
.list-item .meta { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }

/* ==========================================================================
   页脚
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0 var(--space-4);
  background: var(--bg-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: var(--space-4);
}
.footer h4 { font-size: 0.9rem; font-weight: 500; margin-bottom: 16px; }
.footer a, .footer p { font-size: 0.9rem; color: var(--ink-mid); display: block; margin-bottom: 10px; }
.footer a:hover { color: var(--ink); }
.footer .legal {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
/* 页脚合规链接：覆盖 .footer a 的块级排版，保持一行内联 */
.footer .legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.footer .legal-links a {
  display: inline;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 1px solid transparent;
}
.footer .legal-links a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
/* 页脚右侧：域名 + 公安联网备案（同列换行，避免挤掉版权与链接） */
.footer .legal-right { display: block; line-height: 1.7; text-align: right; }
.footer .legal-right a {
  display: inline;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.footer .legal-right a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* ==========================================================================
   表单
   ========================================================================== */

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; }
.field .en { display: inline; margin-left: 6px; font-size: 0.78rem; }

.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 0.2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }

.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.seg-item:hover { border-color: var(--ink); }
.seg-item input { accent-color: var(--biz); width: auto; padding: 0; }

@media (max-width: 860px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   通用工具类
   ========================================================================== */

.muted { color: var(--ink-mid); }
.small { font-size: 0.9rem; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 860px) {
  .nav-links {
    position: absolute;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 32px 24px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; }
  .hero-actions--split { grid-template-columns: 1fr; }
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .modules-grid .module-tile:last-child { grid-column: auto; max-width: none; }
  .cards { grid-template-columns: 1fr; }
  .cards.cards-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: var(--space-5) 0; }
}

/* ==========================================================================
   个人板块：子导航 + 模块结构
   ========================================================================== */

.subnav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  display: flex;
  gap: 28px;
  align-items: center;
  height: 52px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: 0.92rem;
  color: var(--ink-mid);
  white-space: nowrap;
  transition: color 0.2s;
}
.subnav a:hover, .subnav a.active { color: var(--life); }

/* ==========================================================================
   个人板块：五大模块概览（首屏醒目导航）
   ========================================================================== */

.modules-overview { background: var(--bg-soft); }
.modules-overview .section-head { margin-bottom: var(--space-4); }
.biz-overview { background: var(--biz-soft); }
.biz-overview .module-tile .num { color: var(--biz); }
.biz-overview .module-tile .tile-en { color: var(--ink-soft); }
.biz-overview .module-tile .cap.on {
  color: var(--biz);
  border-color: var(--biz);
  background: rgba(12, 68, 124, 0.07);
}
.biz-overview .module-tile .tile-arrow { color: var(--biz); }
.biz-overview .module-tile:hover {
  border-color: var(--biz);
  box-shadow: 0 10px 28px rgba(12, 68, 124, 0.10);
}
.biz-overview .module-tile:hover .tile-arrow { transform: translateX(4px); }

/* 企业线：七大中心区块 —— 不设「关键数字条」。
   条线数 / 控制点数属于内部口径，摆成一排数字反而把版面压成后台看板；
   规模感交给引导语自然表达。 */

.modules-grid { grid-template-columns: repeat(7, 1fr); gap: 14px; }
.modules-grid .module-tile { min-height: 200px; padding: 24px 18px 20px; }
.modules-grid .module-tile h3 { font-size: 1.1rem; margin: 12px 0 4px; }
.modules-grid .module-tile .num { font-size: 1.3rem; }
.modules-grid .module-tile .tile-desc { font-size: 0.82rem; margin-top: 10px; line-height: 1.5; }
.modules-grid .module-tile .tile-arrow { top: 22px; right: 18px; font-size: 1rem; }
.modules-grid .module-tile .tile-cap { margin-top: 14px; gap: 4px; }
.modules-grid .module-tile .cap { padding: 2px 7px; font-size: 0.66rem; }

/* 企业线：七大中心卡（4 + 3 布局，flex 居中，末行 3 个自动居中）
   这是进入测评的核心入口，版式按「年报章节条目」来立：
   不堆任何数字与徽章，只靠尺度、留白和一条起笔线撑气场。
   每格自左上起笔：主色短横线 → 英文小标 → 中文标题 → 一句定位 → 入口；
   右上角一枚浅色序数作水印（是装饰，不是数据）。
   hover 只做背景 + 描边的高亮，不弹跳、不重投影 —— 弹跳与投影是「小卡片」的语言。 */
.modules-grid-7 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: var(--space-2);
}
.modules-grid-7 .module-tile {
  flex: 0 0 calc((100% - 66px) / 4);
  min-height: 286px;
  padding: 34px 28px 26px;
  background: var(--bg);
  border: 1px solid #E6ECF4;
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.modules-grid-7 .module-tile:hover {
  transform: translateY(-3px);
  background: #FBFCFE;
  border-color: rgba(12, 68, 124, 0.34);
  box-shadow: 0 20px 44px -26px rgba(12, 68, 124, 0.38);
}
/* 序数：右上角浅色水印，hover 时略微加深 */
.modules-grid-7 .module-tile .tile-code {
  position: absolute;
  top: 24px;
  right: 26px;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(12, 68, 124, 0.085);
  pointer-events: none;
  transition: color 0.3s ease;
}
.modules-grid-7 .module-tile:hover .tile-code { color: rgba(12, 68, 124, 0.17); }
/* 英文小标 + 上方主色起笔线 */
.modules-grid-7 .module-tile .tile-en {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.modules-grid-7 .module-tile .tile-en::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  margin-bottom: 15px;
  background: var(--biz);
  opacity: 0.32;
  transition: opacity 0.3s ease, width 0.3s ease;
}
.modules-grid-7 .module-tile:hover .tile-en::before { opacity: 1; width: 30px; }
.modules-grid-7 .module-tile h3 {
  font-size: 1.42rem;
  font-weight: 500;
  margin: 10px 0 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.modules-grid-7 .module-tile .tile-desc {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--ink-mid);
  flex: 1;
}
.modules-grid-7 .module-tile .tile-go {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid #EDF1F7;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: color 0.26s ease;
}
.modules-grid-7 .module-tile .tile-go i {
  font-style: normal;
  transition: transform 0.26s ease;
}
.modules-grid-7 .module-tile:hover .tile-go { color: var(--biz); }
.modules-grid-7 .module-tile:hover .tile-go i { transform: translateX(4px); }

/* 企业线：② 服务层次 —— 三层是三个不同维度，不是一条价格直线：
     01 自助测评  = 报告深度（免费 → 标准 → 专家）
     02 测评范围  = 覆盖范围（单条流程线 → 单个中心 → 整家企业）
     03 年度顾问  = 时间维度（一年的服务关系，不是一次性交付物）
   价格在卡内退到底部小字行，主角是「这一层解决什么问题」。
   入口只有一种：每张卡底部一块蓝底文本框「开始测评」（.cta-block）——
   不再混用「开始 / 进入 / 了解 / 咨询」，同一种动线只给一种文案。 */
.tiers { margin-top: var(--space-4); }
#services .section-head { max-width: 880px; }
#services .section-head .lead { max-width: 660px; margin-left: auto; margin-right: auto; }
#services .section-head .h2.nowrap { white-space: nowrap; }
@media (max-width: 900px) {
  #services .section-head .h2.nowrap { white-space: normal; }
}
/* 中文单字成行（末行只剩一个「走」「色」）很扎眼：标题按可用宽度放到不折行，
   正文用 text-wrap: pretty 让浏览器把末行拉长，避免孤立单字。 */
.section-head .lead, .hero .lead { text-wrap: pretty; }
.next-head { max-width: 820px; }
.next-head .h2 { white-space: nowrap; }
@media (max-width: 900px) {
  .next-head .h2 { white-space: normal; text-wrap: balance; }
}
.tier-block { padding: 30px 0 34px; border-top: 1px solid #E6ECF4; }
.tier-block:first-child { border-top: 0; padding-top: 0; }
.tier-head {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}
.tier-no {
  grid-row: 1 / span 2;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--biz);
  opacity: 0.42;
}
.tier-head .tier-name {
  grid-column: 2;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tier-head .tier-note {
  grid-column: 2;
  margin: 6px 0 0;
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.tier-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tier-cards.single { grid-template-columns: 1fr; }
.tier-cards .service-card h4 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.tier-cards.single .service-card {
  padding: 30px 32px 28px;
  background: #F8FAFD;
  border-color: #DCE6F2;
}
.tier-cards.single .service-card p { flex: 0; }
.tier-list { margin: 2px 0 0; padding: 0; list-style: none; }
.tier-list li {
  position: relative;
  margin-top: 10px;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-mid);
}
.tier-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--biz);
  opacity: 0.5;
}
.tier-list b { color: var(--ink); font-weight: 600; }
#services .tier-price {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #EDF1F7;
}
#services .tier-price b {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#services .tier-price i { font-style: normal; font-size: 0.78rem; color: var(--ink-soft); }
#services .tier-price .tag { margin-left: auto; margin-top: 0; }
/* 统一入口：每张卡底部一块蓝底文本框「开始测评」——不再混用「开始 / 进入 / 了解」，
   同一种动线只有一种文案，整块可点，视觉上成为卡片的落点。 */
#services .cta-block {
  display: block;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 6px;
  background: var(--biz);
  color: #fff;
  text-align: center;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, transform 0.2s ease;
}
#services .cta-block:hover {
  background: #0A3A6B;
  color: #fff;
  transform: translateY(-1px);
}
#services .cta-block:focus-visible { outline: 2px solid var(--biz); outline-offset: 3px; }
/* 次级动线：不想先答题、范围已明确的人，直接从卡里进付款 */
#services .cta-alt { margin: 10px 0 0; text-align: center; }
#services .cta-alt a {
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
#services .cta-alt a:hover { color: var(--biz); border-bottom-color: var(--biz); }
@media (max-width: 1024px) {
  .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier-cards.single { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tier-head { grid-template-columns: 34px 1fr; column-gap: 12px; margin-bottom: 18px; }
  .tier-no { font-size: 1.2rem; }
  .tier-head .tier-name { font-size: 1.14rem; }
  .tier-head .tier-note { font-size: 0.85rem; }
  .tier-cards { grid-template-columns: 1fr; gap: 14px; }
  .tier-cards.single .service-card { padding: 24px 20px 22px; }
  #services .tier-price b { font-size: 1.05rem; }
  #services .tier-price .tag { font-size: 0.72rem; }
}


.vc-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-4);
  padding: 14px 18px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.vc-subnav a {
  font-size: 0.85rem;
  color: var(--ink-mid);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  transition: all 0.2s;
}
.vc-subnav a:hover {
  color: var(--biz);
  border-color: var(--biz);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.module-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 22px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  transition: all 0.25s;
  min-height: 220px;
}
.module-tile:hover {
  border-color: var(--life);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(8, 80, 65, 0.10);
}
.module-tile .num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--life);
  letter-spacing: -0.02em;
  line-height: 1;
}
.module-tile h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 14px 0 4px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.module-tile .tile-en {
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.module-tile .tile-desc {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--ink-mid);
  flex: 1;
  line-height: 1.55;
}
.module-tile .tile-cap {
  display: flex;
  gap: 6px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.module-tile .cap {
  display: inline-block;
  padding: 2px 9px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  line-height: 1.5;
}
.module-tile .cap.on {
  color: var(--life);
  border-color: var(--life);
  background: rgba(8, 80, 65, 0.07);
  font-weight: 500;
}
.module-tile .tile-arrow {
  position: absolute;
  top: 26px;
  right: 22px;
  font-size: 1.1rem;
  color: var(--life);
  transition: transform 0.22s;
}
.module-tile:hover .tile-arrow { transform: translateX(4px); }

.module-block { margin-top: var(--space-5); }
.module-block:first-of-type { margin-top: var(--space-4); }
.module-title {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--life);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.service-card { display: flex; flex-direction: column; }
.service-card h3 { margin: 18px 0 12px; }
.service-card p { color: var(--ink-mid); flex: 1; }
.service-card .btn { margin-top: var(--space-3); align-self: flex-start; }

.card-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
}
.card-list li {
  font-size: 0.88rem;
  color: var(--ink-mid);
  padding: 4px 0 4px 18px;
  position: relative;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
}

.card-footnote {
  display: block;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* 滚动渐入 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   模块网格响应式（2026-09-22 视觉打磨）
   注意：基础规则 .modules-grid 在文件中部有两处（7 列 / 5 列重复定义），
   响应式断点必须排在所有基础规则之后才能生效，故统一移至文件末尾。
   ========================================================================== */
@media (max-width: 1100px) {
  .modules-grid { grid-template-columns: repeat(4, 1fr); }
  .modules-grid .module-tile { min-height: 180px; }
  .modules-grid .module-tile:last-child { grid-column: span 4; max-width: 320px; }
}
@media (max-width: 860px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
  .modules-grid .module-tile:last-child { grid-column: auto; max-width: none; }
}

/* ==========================================================================
   服务页 v2（2026-10-09）
   新增模块：摘要条 / 交付物 / 服务流程 / 适合度双向筛选 / 费用与边界 / FAQ
   ⚠️ 约定：本节新类名一律不得使用 .field ——表单采集脚本按 .field 遍历，
      服务页正文若误用会被当成表单字段提交进后台。
   ========================================================================== */

/* ---- ① Hero 摘要条（形式 · 周期 · 起价） ---- */
.svc-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 780px;
  margin-top: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
.svc-summary > div { padding: 18px 22px; border-right: 1px solid var(--line); }
.svc-summary > div:last-child { border-right: 0; }
.svc-summary .k {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.svc-summary .v { display: block; font-size: 0.98rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.svc-summary .hl .v { font-family: var(--serif); font-size: 1.35rem; color: var(--life); letter-spacing: -0.01em; }
.svc-summary .hl .v em { font-family: var(--sans); font-style: normal; font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
/* 服务范围声明（考证经验分享：只接考过的四个证） */
.svc-scope {
  max-width: 780px;
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--life);
  border-radius: 0 8px 8px 0;
  background: var(--life-soft);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--ink-mid);
}
.svc-scope strong { color: var(--ink); font-weight: 600; }

/* 可选方向卡（考证经验分享：这次聊哪个证） */
.svc-opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--space-4);
}
.svc-opt {
  padding: 20px 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
}
.svc-opt .so-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.svc-opt p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--ink-mid);
}

/* ---- 工作微信入口（表单之外的即时通道） ---- */
.svc-wechat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  padding: 30px 34px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg);
}
.svc-wechat .h3 { font-size: 1.16rem; }
.svc-wechat p { font-size: 0.94rem; line-height: 1.75; color: var(--ink-mid); }
.svc-wechat .sw-fine { margin-top: 10px; font-size: 0.84rem; color: var(--ink-soft); }
.sw-qr { text-align: center; }
.sw-qr img {
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.sw-qr span {
  display: block;
  margin-top: 8px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.sw-qr.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  text-align: center;
}
.sw-qr.is-empty::before {
  content: attr(data-empty);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.sw-qr.is-empty span { display: none; }

/* ---- ② 交付物清单 ---- */
.deliver { border-top: 1px solid var(--line-strong); }
.deliver-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.deliver-row.head {
  padding: 13px 0;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.deliver-row h3 { font-size: 1.05rem; font-weight: 500; }
.deliver-row .dv-form,
.deliver-row .dv-when { font-size: 0.92rem; color: var(--ink-mid); line-height: 1.65; }
.deliver-row .dv-when { white-space: nowrap; }

/* ---- ③ 服务流程 ---- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.step { position: relative; padding-top: 34px; border-top: 1px solid var(--line-strong); }
.step.on { border-top-color: var(--life); }
.step .s-num {
  position: absolute;
  top: -14px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1;
}
.step.on .s-num { background: var(--life); border-color: var(--life); color: #fff; }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7; }
.step .s-when {
  display: block;
  margin-top: 10px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---- ④ 适合 / 不适合（双向筛选） ---- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fit-col { padding: 30px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fit-col.no { background: var(--bg-soft); }
.fit-col h3 { font-size: 1.05rem; margin-bottom: 18px; }
.fit-col ul { list-style: none; }
.fit-col li { position: relative; padding: 9px 0 9px 22px; font-size: 0.93rem; color: var(--ink-mid); line-height: 1.65; }
.fit-col li::before { content: ""; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; border-radius: 50%; }
.fit-col.yes li::before { background: var(--life); }
.fit-col.no li::before { background: var(--line-strong); }

/* ---- ⑤ 费用与边界 ---- */
.price-box {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.price-main { padding: 40px 32px; background: var(--life-soft); border-right: 1px solid var(--line); }
.price-main .from { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 10px; }
.price-main .amt { font-family: var(--serif); font-size: 2.9rem; line-height: 1; color: var(--life); letter-spacing: -0.02em; }
.price-main .amt span { font-size: 1.15rem; margin-right: 2px; }
.price-main .unit { display: block; margin-top: 12px; font-size: 0.86rem; color: var(--ink-mid); }
.price-main .pay {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(8, 80, 65, 0.18);
  font-size: 0.85rem;
  color: var(--ink-mid);
  line-height: 1.75;
}
.price-side { padding: 34px 32px; }
.price-side h3 { font-size: 0.95rem; margin-bottom: 14px; }
.price-side h3 + h3 { margin-top: 28px; }
.price-side .sub { display: block; margin-top: 6px; font-size: 0.82rem; font-weight: 400; color: var(--ink-soft); }
.inc-list { list-style: none; }
.inc-list li { position: relative; padding: 7px 0 7px 22px; font-size: 0.92rem; color: var(--ink-mid); line-height: 1.65; }
.inc-list li::before { content: ""; position: absolute; left: 0; background: var(--ink-soft); }
.inc-list.yes li::before { top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--life); }
.inc-list.no li::before { top: 19px; width: 9px; height: 2px; }

/* ---- ⑥ 常见问题 ---- */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--ink-soft); }
.faq details[open] summary::after { content: "\2212"; color: var(--life); }
.faq .faq-a { padding: 0 48px 26px 0; font-size: 0.94rem; color: var(--ink-mid); line-height: 1.85; }
.faq .faq-a p + p { margin-top: 12px; }

/* ---- ⑦ 预约区：本次预约摘要 ---- */
.form-svc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  padding: 16px 20px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--life);
  border-radius: 10px;
  background: var(--life-soft);
}
.form-svc .fs-k { font-size: 0.86rem; color: var(--ink-mid); }
.form-svc .fs-v { font-size: 1rem; font-weight: 500; }
.form-svc .fs-p { margin-left: auto; font-family: var(--serif); font-size: 1.1rem; color: var(--life); }

/* ---- ⑧ 相关服务推荐 ---- */
.related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- 服务页 v2 响应式（必须排在所有基础规则之后） ---- */
@media (max-width: 860px) {
  .svc-summary { grid-template-columns: 1fr; }
  .svc-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .svc-summary > div:last-child { border-bottom: 0; }

  .deliver-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .deliver-row.head { display: none; }
  .deliver-row .dv-when { white-space: normal; }

  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { padding: 0 0 28px 44px; border-top: 0; }
  .step::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 0;
    width: 1px;
    background: var(--line-strong);
  }
  .step:last-child::after { display: none; }
  .step .s-num { top: 0; left: 0; }

  .fit-grid { grid-template-columns: 1fr; }
  .price-box { grid-template-columns: 1fr; }
  .price-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .faq .faq-a { padding-right: 0; }
  .form-svc .fs-p { margin-left: 0; }
  .related .cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   内容页（2026-10-09）
   insights.html 内容列表 + insights-NN.html 文章页（引流内容）
   正文由 scripts/sync-content.js 从内容加工工作空间生成，勿手工改产出页。
   ========================================================================== */

/* ---- 文章 Hero ---- */
.article-hero .display {
  font-size: clamp(1.85rem, 4.2vw, 3.05rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 900px;
}
.article-hero .lead { max-width: 720px; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: var(--space-3);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.article-meta > span:first-child { padding-right: 12px; border-right: 1px solid var(--line-strong); }
.article-meta .tag,
.insight-tags .tag {
  display: inline-block;
  margin-top: 0;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--life);
}

/* ---- 文章头图 ---- */
.article-cover { margin: 0 0 var(--space-5); border-radius: 10px; overflow: hidden; }
.article-cover img { width: 100%; aspect-ratio: 900 / 383; object-fit: cover; }

/* ---- 正文排版 ---- */
.article-body { max-width: 760px; margin: 0 auto; font-size: 1.06rem; }
.article-body p { color: #3F3F3F; line-height: 1.95; margin-bottom: 26px; }
.article-body h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.45;
  margin: var(--space-5) 0 var(--space-3);
  color: var(--ink);
  letter-spacing: -0.01em;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 1.1rem; font-weight: 600; margin: var(--space-4) 0 var(--space-2); color: var(--ink); }
.article-body strong { font-weight: 600; color: var(--ink); }

.article-body .article-pull {
  font-family: var(--serif);
  font-size: 1.42rem;
  line-height: 1.62;
  text-align: center;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-3);
  background: var(--bg-soft);
  border-radius: 10px;
}

.article-body .article-figure { margin: var(--space-5) 0; }
.article-body .article-figure img { width: 100%; border-radius: 8px; }
/* 配图破格：比正文栏更宽，避免整页窄条感 */
.article-body .article-figure {
  width: min(920px, calc(100vw - 64px));
  margin-left: 50%;
  translate: -50% 0;
}

.article-body .article-sep {
  margin: var(--space-5) 0;
  text-align: center;
  color: var(--line-strong);
  font-size: 0.9rem;
  letter-spacing: 8px;
}

.article-body ul,
.article-body ol { list-style: none; margin: 0 0 26px; }
.article-body li { position: relative; padding: 7px 0 7px 28px; color: #3F3F3F; line-height: 1.85; }
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--life);
}
.article-body ol { counter-reset: artol; }
.article-body ol li { counter-increment: artol; }
.article-body ol li::before {
  content: counter(artol) ".";
  position: absolute;
  left: 0;
  top: 7px;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--life);
}

/* ---- 文末推荐区（紧凑小卡） ---- */
.article-reco.section { padding: var(--space-5) 0; }
.article-reco .section-head { margin-bottom: var(--space-3); }
.article-reco .section-head .lead { font-size: 0.95rem; margin-top: 10px; }
.article-reco .module-block { margin-top: var(--space-4); }
.article-reco .module-block:first-of-type { margin-top: var(--space-3); }
.article-reco .module-title { font-size: 0.76rem; margin-bottom: var(--space-2); padding-bottom: 8px; }
.article-reco .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.article-reco .card { padding: 20px 18px 18px; border-radius: 10px; }
.article-reco .card .num { font-size: 0.82rem; }
.article-reco .card h3 { font-size: 0.98rem; line-height: 1.4; margin: 10px 0 7px; }
.article-reco .card p { font-size: 0.85rem; line-height: 1.68; }
.article-reco .card .tag { margin-top: 12px; font-size: 0.72rem; }
.article-reco .card .btn { padding: 8px 14px; font-size: 0.8rem; margin-top: var(--space-3); }
.article-reco .svc-price { font-size: 0.85rem; }
.svc-price { font-weight: 600; color: var(--life); }

/* ---- 内容列表 ---- */
.insight-list { display: grid; }
.insight-item {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}
.insight-list > .insight-item:last-child { border-bottom: 1px solid var(--line); }
.insight-thumb { display: block; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.insight-thumb img { width: 100%; aspect-ratio: 900 / 383; object-fit: cover; transition: transform 0.5s ease; }
.insight-item:hover .insight-thumb img { transform: scale(1.03); }
.insight-meta { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.insight-text h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 500; line-height: 1.45; margin: 10px 0 12px; }
.insight-text h3 a:hover { color: var(--life); }
.insight-digest { color: var(--ink-mid); font-size: 0.95rem; line-height: 1.75; }
.insight-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.insight-more { display: inline-block; margin-top: 14px; font-size: 0.86rem; letter-spacing: 0.04em; color: var(--life); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.insight-more:hover { border-bottom-color: var(--life); }
/* 板块「内容」模块头：标题居左，「全部内容」入口居右并与标题并排 */
.module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.module-head .module-title { margin: 0; padding: 0; border-bottom: 0; }
.module-more {
  flex: none;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--life);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.module-more:hover { border-bottom-color: var(--life); }
/* 暂无文章的板块：选题占位卡下方的说明，跨整行 */
.sec-soon {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---- 内容列表 · 板块分组 ---- */
.insight-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.insight-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--ink-mid);
  transition: border-color 0.2s, color 0.2s;
}
.insight-chips a:hover { border-color: var(--life); color: var(--life); }
.insight-chips .chip-n { font-size: 0.72rem; color: var(--ink-soft); }
.insight-section { margin-top: var(--space-5); }
.insight-section:first-of-type { margin-top: 0; }
.insight-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
}
.insight-section-head h2 { font-family: var(--serif); font-size: 1.28rem; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.insight-section-head .sec-link { font-size: 0.82rem; color: var(--life); }
.insight-section-head .sec-link:hover { border-bottom: 1px solid var(--life); }
.insight-section-head .sec-note { font-size: 0.82rem; color: var(--ink-soft); margin-left: auto; }
.insight-section .insight-list > .insight-item:first-child { border-top: 0; }

/* ---- 关于页 · 品牌故事正文 ---- */
.about-story {
  max-width: 720px;
  margin: 0;
}
.about-story h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-2);
}
.about-story h3:first-child { margin-top: 0; }
.about-story p:last-child { margin-bottom: 0; }

/* ---- 账号中心 ---- */
/* hidden 属性必须压过任何 display 规则（弹层 / 网格都设了 display，会盖掉 UA 默认） */
[hidden] { display: none !important; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.acct-card { border: 1px solid var(--line); border-radius: 12px; padding: 30px 28px; background: #fff; }
.acct-h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.acct-h3 { font-size: 1rem; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.acct-p { color: var(--ink-mid); font-size: 0.92rem; line-height: 1.85; margin: 0 0 18px; }
.acct-note { font-size: 0.84rem; line-height: 1.7; color: #8A5A12; margin: 12px 0 0; }
.acct-note.bad { color: #B42318; }
.acct-btn {
  display: inline-block; padding: 10px 20px; border: 0; border-radius: 8px;
  background: var(--biz); color: #fff; font-family: inherit; font-size: 0.9rem;
  cursor: pointer; text-decoration: none;
}
.acct-btn:hover { background: #0A3A69; }
.acct-btn[disabled] { opacity: 0.5; cursor: default; }
.acct-btn.ghost { background: transparent; color: var(--biz); border: 1px solid rgba(12, 68, 124, 0.28); }
.acct-btn.ghost:hover { background: var(--biz-soft); }
.acct-form { margin: 0; }
.acct-form-act { display: flex; gap: 10px; margin-top: 6px; }
.acct-label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 12px; }
.acct-label input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px;
  font-family: inherit; font-size: 0.94rem; color: var(--ink); background: #fff;
}
.acct-label input:focus { outline: none; border-color: var(--biz); }
.acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.acct-head .acct-h2 { margin: 6px 0 0; font-size: 1.16rem; word-break: break-all; }
.acct-sec { margin-top: 38px; }
.acct-count { font-size: 0.8rem; font-weight: 400; color: var(--ink-soft); }
.acct-list { border-top: 1px solid var(--line); }
.acct-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.acct-row.off { opacity: 0.62; }
.acct-row-title { font-size: 0.96rem; font-weight: 500; color: var(--ink); }
.acct-row-meta { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.7; margin-top: 4px; }
.acct-row-code code, .acct-inline {
  font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0.05em;
  background: var(--bg-soft); color: var(--ink); padding: 4px 8px; border-radius: 6px;
}
.acct-row-code { display: flex; align-items: center; gap: 8px; }
.acct-mini {
  font-family: inherit; font-size: 0.78rem; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink-mid);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.acct-mini:hover { border-color: var(--biz); color: var(--biz); }
.acct-mini.ghost { color: var(--biz); border-color: rgba(12, 68, 124, 0.3); }
.acct-dim { color: var(--ink-soft); font-size: 0.82rem; }
.acct-badge {
  display: inline-block; font-size: 0.72rem; padding: 2px 8px; border-radius: 10px;
  background: var(--bg-soft); color: var(--ink-mid); vertical-align: middle; font-weight: 400;
}
.acct-badge.ok { background: var(--life-soft); color: var(--life); }
.acct-badge.wait { background: #FBF1DF; color: #8A5A12; }
.acct-badge.dim { background: var(--bg-soft); color: var(--ink-soft); }
.acct-empty { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.8; padding: 20px 0; margin: 0; }
.acct-empty a { color: var(--biz); }
.acct-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(20, 30, 24, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.acct-modal {
  position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 460px;
  padding: 30px 28px; box-sizing: border-box; max-height: 88vh; overflow-y: auto;
}
.acct-modal h3 { margin: 0 0 8px; font-size: 1.06rem; font-weight: 600; }
.acct-modal-x {
  position: absolute; top: 12px; right: 14px; border: 0; background: none;
  font-size: 20px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}

/* ---- 内容页响应式（必须排在所有基础规则之后） ---- */
@media (max-width: 860px) {
  .article-hero .display { font-size: 1.72rem; }
  .article-body { font-size: 1.02rem; }
  .article-body .article-pull { font-size: 1.18rem; padding: var(--space-3) var(--space-2); }
  .article-body h2 { font-size: 1.3rem; margin-top: var(--space-4); }
  .insight-item { grid-template-columns: 1fr; gap: var(--space-3); }
  .insight-thumb img { aspect-ratio: 16 / 9; }
  .insight-text h3 { font-size: 1.18rem; }
  .article-reco .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .page-hero .lead, .lead { white-space: normal; }
  .article-reco .cards { grid-template-columns: 1fr; }
  .article-reco .card { padding: 18px 16px 16px; }
}
@media (max-width: 1024px) {
  .modules-grid-7 { gap: 18px; }
  .modules-grid-7 .module-tile { flex-basis: calc((100% - 36px) / 3); min-height: 268px; padding: 30px 24px 24px; }
  .modules-grid-7 .module-tile .tile-code { font-size: 3rem; top: 22px; right: 22px; }
}
@media (max-width: 720px) {
  .modules-grid-7 { gap: 14px; }
  .modules-grid-7 .module-tile {
    flex-basis: calc((100% - 14px) / 2);
    min-height: 238px;
    padding: 24px 20px 20px;
  }
  .modules-grid-7 .module-tile .tile-code { font-size: 2.5rem; top: 18px; right: 18px; }
  .modules-grid-7 .module-tile .tile-en::before { margin-bottom: 12px; }
  .modules-grid-7 .module-tile h3 { font-size: 1.18rem; }
  .modules-grid-7 .module-tile .tile-desc { font-size: 0.83rem; margin-top: 11px; }
  .modules-grid-7 .module-tile .tile-go { margin-top: 18px; padding-top: 12px; font-size: 0.75rem; }
}
@media (max-width: 520px) {
  .modules-grid-7 .module-tile { flex-basis: 100%; min-height: 0; }
  .modules-grid-7 .module-tile .tile-code { font-size: 2.8rem; }
}

@media (max-width: 860px) {
  .acct-grid { grid-template-columns: 1fr; }
  .acct-card { padding: 24px 20px; }
  .acct-head { flex-direction: column; align-items: flex-start; }
  .acct-row { grid-template-columns: 1fr; gap: 10px; }
  .acct-row-code { justify-content: flex-start; }
}

/* ==========================================================================
   工具之间的连接（2026-11-05）
   · .tl-toast —— 跨工具推送后的统一回声
   · .tl-link  —— 工具页里「推到下一个工具」的小按钮
   ========================================================================== */
.tl-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  max-width: min(88vw, 420px);
  padding: 10px 18px;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  color: #fff;
  background: rgba(8, 80, 65, 0.94);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
}
.tl-toast.on { opacity: 1; transform: translate(-50%, 0); }

.tl-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--life);
  background: transparent;
  border: 1px solid rgba(8, 80, 65, 0.28);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tl-link:hover { background: var(--life); color: #fff; border-color: var(--life); }
.tl-link.is-done { color: var(--ink-soft); border-color: rgba(0, 0, 0, 0.12); cursor: default; }
.tl-link.is-done:hover { background: transparent; color: var(--ink-soft); border-color: rgba(0, 0, 0, 0.12); }

/* 工具页底部归位入口（2026-11-05） */
.tl-backmap {
  padding: 26px 0 30px;
  border-top: 1px solid var(--line);
}
.tl-backmap .container { display: flex; }
.tl-backmap a {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.tl-backmap a:hover { color: var(--life); }
.tl-backmap-k {
  padding: 1px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--life);
  border: 1px solid rgba(8, 80, 65, 0.28);
  border-radius: 999px;
}
@media (max-width: 620px) {
  .tl-backmap a { flex-wrap: wrap; gap: 6px; }
}

/* 四列卡片的降级（2026-11-09）：1240 以下两列，860 以下单列 */
@media (max-width: 1240px) {
  .cards.cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cards.cards-4 .card { padding: 32px 28px; }
  .cards.cards-4 .card h3 { font-size: 1.12rem; }
  .cards.cards-4 .card p { font-size: 0.92rem; }
}
@media (max-width: 860px) {
  .cards.cards-4 { grid-template-columns: 1fr; }
  .cards.cards-4 .card { padding: 36px 32px; }
}

/* 服务页可选方向卡响应式（2026-11-10）：两列 → 单列 */
@media (max-width: 1000px) {
  .svc-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .svc-opts { grid-template-columns: 1fr; gap: 12px; }
  .svc-opt { padding: 18px 18px 20px; }
}

/* 工作微信入口响应式（2026-11-10）：窄屏改为上下排列，二维码居左 */
@media (max-width: 760px) {
  .svc-wechat { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .sw-qr { text-align: left; }
  .sw-qr.is-empty { width: 100%; height: 120px; }
}