/* ============================================================
   article.css v2 — 三级文章页统一样式
   设计语言：暖白底 + 古金细节 + 宋体标题 + 行宽 720px 长正文
   适用：18 个三级页（pillar/gene/team/content/process/guarantee/
                  philosophy/core-code/engine/family/nation/pain/
                  cost/era/about/company）
   依赖：tokens.css + global.css + page-hero.css（共享 .info-card 等）
   ============================================================ */

/* ===== 文章页基础 ===== */
body.article {
  padding-top: var(--nav-height-desktop);
  background:
    radial-gradient(ellipse 80% 25% at 50% 0%, var(--gold-tint-08) 0%, transparent 70%),
    repeating-linear-gradient(0deg,  rgba(197,162,77,0.025) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(197,162,77,0.025) 0 1px, transparent 1px 80px),
    var(--white-warm);
  color: var(--black-text);
  min-height: 100vh;
}

/* ===== 顶部阅读进度条 ===== */
.read-progress {
  position: fixed;
  top: var(--nav-height-desktop);
  left: 0;
  height: 2px;
  background: var(--gold-primary);
  width: 0%;
  z-index: 999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px var(--gold-primary);
}

/* ===== 三级页 Hero ===== */
.article-hero {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, var(--gold-tint-08) 0%, transparent 65%),
    var(--white-ivory);
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--gold-tint-25);
  position: relative;
  overflow: hidden;
}
.article-hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 100px; height: 2px;
  background: var(--gold-primary);
}
.article-hero .container {
  max-width: var(--container-base);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  text-align: center;
}

/* 徽章（pillar-badge / adv-badge / general badge） */
.article-hero .pillar-badge,
.article-hero .adv-badge,
.article-hero .badge,
.article-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--gold-primary);
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.article-hero .pillar-badge::before,
.article-hero .adv-badge::before,
.article-hero .badge::before,
.article-hero .hero-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-primary);
}
.article-hero h1 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 3px;
  line-height: 1.25;
  margin: 0 0 12px;
  text-shadow: 0 4px 20px rgba(197, 162, 77, 0.10);
}
.article-hero h1::after {
  content: '';
  display: block;
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  margin: 18px auto 0;
}
.article-hero .subtitle,
.article-hero .lead,
.article-hero h2.subtitle {
  font-size: 16px;
  color: var(--gray-700);
  line-height: 1.85;
  max-width: var(--container-narrow);
  margin: 16px auto 0;
  letter-spacing: 1px;
}
.article-hero .meta {
  font-size: 13px;
  color: var(--gray-700);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  padding: 8px 16px;
  letter-spacing: 1.5px;
}
.article-hero .meta > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ===== 正文容器（行宽 720px） ===== */
.article-body,
.article-content,
main.article,
.about-card,
.content-card {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 64px var(--space-md);
}

/* 长卡式容器（about/company.html 等） */
.about-card,
.content-card,
.article-body > section,
.article-body > article {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-lg);
  padding: 36px 40px;
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-radius: 2px;
  position: relative;
}
.about-card::before,
.content-card::before,
.article-body > section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--gold-primary);
}

/* 卡片编号 */
.about-card-num,
.content-card-num {
  display: inline-block;
  background: var(--gold-tint-12);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: var(--fw-bold);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===== 长正文版式（h1-h6 / p / ul / ol / quote / a / img） ===== */
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.about-card h2, .about-card h3, .about-card h4,
.content-card h2, .content-card h3, .content-card h4 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  color: var(--black-pure);
  line-height: 1.4;
  margin: 32px 0 16px;
  letter-spacing: 1px;
}
.article-body h2:first-child,
.about-card h2:first-child,
.content-card h2:first-child,
.article-body h3:first-child,
.about-card h3:first-child {
  margin-top: 0;
}

.article-body h2,
.about-card h2,
.content-card h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-tint-25);
  position: relative;
}
.article-body h2::before,
.about-card h2::before,
.content-card h2::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-primary);
}

.article-body h3,
.about-card h3,
.content-card h3 {
  font-size: 20px;
  font-weight: 700;
  padding-left: 14px;
  border-left: 3px solid var(--gold-primary);
  letter-spacing: 2px;
}

.article-body h4,
.about-card h4,
.content-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 1.5px;
}

.article-body p,
.about-card p,
.content-card p {
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  margin: 0 0 16px;
  letter-spacing: 0.5px;
}
.article-body p:last-child,
.about-card p:last-child,
.content-card p:last-child {
  margin-bottom: 0;
}

.article-body ul, .article-body ol,
.about-card ul, .about-card ol,
.content-card ul, .content-card ol {
  padding-left: 1.5em;
  margin: 0 0 16px;
}
.article-body li,
.about-card li,
.content-card li {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 8px;
  color: var(--black-text);
}
.article-body ul li::marker,
.about-card ul li::marker,
.content-card ul li::marker {
  color: var(--gold-primary);
}
.article-body ol li::marker,
.about-card ol li::marker,
.content-card ol li::marker {
  color: var(--gold-deep);
  font-weight: var(--fw-bold);
}

.article-body strong, .article-body b,
.about-card strong, .about-card b,
.content-card strong, .content-card b {
  font-weight: var(--fw-bold);
  color: var(--black-pure);
  background: linear-gradient(180deg, transparent 65%, var(--gold-tint-12) 65%);
  padding: 0 2px;
}

.article-body em, .article-body i:not([data-lucide]),
.about-card em,
.content-card em {
  font-style: normal;
  color: var(--gold-deep);
  font-weight: var(--fw-medium);
}

/* ===== 正文链接（古金下划线） ===== */
.article-body a,
.about-card a:not(.btn):not(.cta-btn):not(.cta-btn-outline),
.content-card a:not(.btn):not(.cta-btn):not(.cta-btn-outline) {
  color: var(--black-pure);
  border-bottom: 1px solid var(--gold-primary);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: background 0.2s ease, color 0.2s ease;
  padding: 0 2px;
}
.article-body a:hover,
.about-card a:not(.btn):not(.cta-btn):not(.cta-btn-outline):hover,
.content-card a:not(.btn):not(.cta-btn):not(.cta-btn-outline):hover {
  background: var(--gold-tint-12);
  color: var(--black-pure);
}

/* ===== 引用块（中文不斜体 + 古金左边框） ===== */
blockquote,
.quote-block,
.article-body blockquote,
.about-card blockquote,
.content-card blockquote {
  background: var(--gold-tint-08);
  border-left: 3px solid var(--gold-primary);
  border-radius: 0 2px 2px 0;
  padding: 18px 24px;
  margin: 20px 0;
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  font-style: normal;
  position: relative;
}
blockquote::before,
.quote-block::before {
  content: '"';
  font-family: 'Source Han Serif SC', 'STSong', serif;
  position: absolute;
  top: -8px; left: 8px;
  font-size: 32px;
  color: var(--gold-primary);
  line-height: 1;
  opacity: 0.5;
}
blockquote p:last-child,
.quote-block p:last-child {
  margin-bottom: 0;
}

/* ===== 图片 / figure ===== */
.article-body figure,
.about-card figure,
.content-card figure {
  margin: 32px 0;
  text-align: center;
}
.article-body figure img,
.about-card figure img,
.content-card figure img {
  max-width: 100%;
  border-radius: 2px;
  border: 1px solid var(--gold-tint-25);
}
.article-body figcaption,
.about-card figcaption,
.content-card figcaption {
  font-size: 13px;
  color: var(--gray-700);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 1px;
}

/* ===== 上下篇导航 ===== */
.article-nav {
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, var(--gold-tint-08), transparent 70%),
    var(--white-ivory);
  padding: 56px 0;
  border-top: 1px solid var(--gold-tint-25);
  border-bottom: 1px solid var(--gold-tint-25);
}
.article-nav .container {
  max-width: var(--container-base);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.article-nav a,
.article-nav .nav-item {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-radius: 2px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.article-nav a:hover,
.article-nav .nav-item:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(197, 162, 77, 0.10);
}
.article-nav a:nth-child(1),
.article-nav .nav-prev {
  border-left: 3px solid var(--gold-primary);
}
.article-nav a:nth-child(2),
.article-nav .nav-next {
  border-right: 3px solid var(--gold-primary);
  text-align: right;
  flex-direction: row-reverse;
}
.article-nav .nav-label {
  display: block;
  font-size: 11px;
  color: var(--gray-700);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.article-nav .nav-title {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 15px;
  color: var(--black-pure);
  font-weight: var(--fw-bold);
  letter-spacing: 1.5px;
  line-height: 1.4;
}
.article-nav .nav-arrow {
  width: 24px; height: 24px;
  color: var(--gold-primary);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.article-nav a:hover .nav-arrow { transform: translateX(4px); }
.article-nav .nav-prev:hover .nav-arrow,
.article-nav a:nth-child(1):hover .nav-arrow { transform: translateX(-4px); }

/* ===== 文章底部 CTA（共享 page-hero.css 中的 .cta-section） ===== */

/* ===== 返回顶部按钮（已在 nav-toggle.js 注入） ===== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: 48px; height: 48px;
  background: var(--black-pure);
  color: var(--gold-primary);
  border: 1px solid var(--gold-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 900;
  cursor: pointer;
}
.back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--gold-primary);
  color: var(--black-pure);
  transform: translateY(-3px);
}
.back-to-top svg {
  width: 20px; height: 20px;
}

/* ===== 渐变标题栏卡片（pain/cost 类页面） ===== */
.group-card,
.cost-segment,
.painpoint-card {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-md);
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}
.group-card .group-header,
.cost-segment .segment-header,
.painpoint-card .painpoint-header {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-deep) 100%);
  color: var(--black-pure);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.group-card .group-header .icon,
.cost-segment .segment-header .icon,
.painpoint-card .painpoint-header .icon {
  width: 32px; height: 32px;
  color: var(--black-pure);
  flex-shrink: 0;
}
.group-card .group-header h3,
.cost-segment .segment-header h3,
.painpoint-card .painpoint-header h3 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 18px;
  color: var(--black-pure);
  margin: 0;
  border: 0;
  padding: 0;
  letter-spacing: 2px;
}
.group-card .group-header .subtitle,
.cost-segment .segment-header .subtitle,
.painpoint-card .painpoint-header .subtitle {
  font-size: 13px;
  color: var(--black-pure);
  margin-left: auto;
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
  opacity: 0.85;
}
.group-card .group-body,
.cost-segment .segment-body,
.painpoint-card .painpoint-body {
  padding: 24px;
}

/* 深色标题栏版（cost.html 用） */
.group-card.dark .group-header,
.cost-segment.dark .segment-header,
.painpoint-card.dark .painpoint-header {
  background: linear-gradient(135deg, var(--black-pure) 0%, var(--black-soft) 100%);
  color: var(--gold-primary);
}
.group-card.dark .group-header h3,
.cost-segment.dark .segment-header h3,
.painpoint-card.dark .painpoint-header h3 {
  color: var(--gold-primary);
}
.group-card.dark .group-header .subtitle,
.cost-segment.dark .segment-header .subtitle,
.painpoint-card.dark .painpoint-header .subtitle {
  color: rgba(255, 255, 255, 0.85);
}
.group-card.dark .group-header .icon,
.cost-segment.dark .segment-header .icon,
.painpoint-card.dark .painpoint-header .icon {
  color: var(--gold-primary);
}

/* ===== 团队卡片（advantages/team.html） ===== */
.team-card,
.member-card {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-top: 2px solid var(--gold-primary);
  border-radius: 2px;
  padding: 28px 24px;
  text-align: center;
}
.team-avatar,
.member-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--gold-tint-12);
  border: 2px solid var(--gold-primary);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 28px;
  font-weight: 700;
}
.team-name, .member-name {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.team-role, .member-role {
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.team-bio, .member-bio {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-700);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  body.article {
    padding-top: var(--nav-height-mobile);
  }
  .read-progress { top: var(--nav-height-mobile); }
  .article-hero { padding: 48px 0 32px; }
  .article-hero .container { padding: 0 var(--space-md); }
  .article-hero h1 { font-size: 24px; letter-spacing: 2px; }
  .article-hero .subtitle, .article-hero .lead { font-size: 15px; }

  .article-body, .article-content, main.article {
    padding: 40px var(--space-md);
  }
  .about-card, .content-card,
  .article-body > section, .article-body > article {
    padding: 24px 20px;
    margin-bottom: var(--space-md);
  }
  .article-body h2, .about-card h2, .content-card h2 { font-size: 20px; }
  .article-body h3, .about-card h3, .content-card h3 { font-size: 17px; }
  .article-body p, .article-body li,
  .about-card p, .about-card li,
  .content-card p, .content-card li { font-size: 16px; }

  .article-nav { padding: 40px 0; }
  .article-nav .container {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 var(--space-md);
  }
  .article-nav a, .article-nav .nav-item {
    padding: 16px 20px;
    min-height: 64px;
  }
  .article-nav .nav-title { font-size: 14px; }

  .group-card .group-header,
  .cost-segment .segment-header,
  .painpoint-card .painpoint-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .group-card .group-header .subtitle,
  .cost-segment .segment-header .subtitle,
  .painpoint-card .painpoint-header .subtitle {
    margin-left: 0;
  }

  .back-to-top {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 44px; height: 44px;
  }
}

@media (max-width: 480px) {
  .article-hero h1 { font-size: 22px; }
  .about-card, .content-card,
  .article-body > section { padding: 20px 16px; }
}

/* ============================================================
   通用子段样式：cost/pain/era/process/tier 等子页面
   原 HTML 用 <div class="xxx-title"> 而非 <h3>，需用 class 锚定
   ============================================================ */

/* 段容器（cost-section / pain-section / group / era 等） */
.cost-section,
.pain-section,
.era-section,
.group-section,
.painpoint-section,
.tier-section,
.step-section,
.section-block {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-left: 3px solid var(--gold-primary);
  border-radius: 2px;
  padding: 28px 32px;
  margin: 0 auto 20px;
  max-width: var(--container-narrow);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.cost-section:hover,
.pain-section:hover,
.group-section:hover,
.tier-section:hover,
.step-section:hover {
  border-color: var(--gold-primary);
  border-left-color: var(--gold-deep);
  box-shadow: 0 8px 24px rgba(197, 162, 77, 0.10);
}

/* 段头（横向：icon + 标题块） */
.cost-header,
.pain-header,
.group-header,
.painpoint-header,
.tier-header,
.step-header,
.section-block-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
}
.cost-header > div,
.pain-header > div,
.group-header > div,
.painpoint-header > div,
.tier-header > div,
.step-header > div {
  flex: 1;
  min-width: 0;
}

/* 段头图标 */
.cost-icon, .pain-icon, .group-icon,
.painpoint-icon, .tier-icon, .step-icon,
.section-block-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-tint-40);
  border-radius: 2px;
}
.cost-icon [data-lucide],
.pain-icon [data-lucide],
.group-icon [data-lucide],
.painpoint-icon [data-lucide],
.tier-icon [data-lucide],
.step-icon [data-lucide] {
  width: 20px; height: 20px;
  color: var(--gold-primary);
}

/* 子段主标题（核心修复点） */
.cost-title,
.pain-title,
.group-title,
.painpoint-title,
.tier-title,
.step-title,
.section-block-title {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0 0 4px;
  display: block;
}

/* 子段副标题 */
.cost-subtitle,
.pain-subtitle,
.group-subtitle,
.painpoint-subtitle,
.tier-subtitle,
.step-subtitle,
.section-block-subtitle {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--gold-deep);
  letter-spacing: 2px;
  margin: 0;
  display: block;
}

/* 段正文 p */
.cost-section > p,
.pain-section > p,
.group-section > p,
.tier-section > p,
.step-section > p,
.section-block > p {
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}
.cost-section > p:last-child,
.pain-section > p:last-child,
.group-section > p:last-child,
.tier-section > p:last-child,
.step-section > p:last-child,
.section-block > p:last-child {
  margin-bottom: 0;
}

/* 段内 .highlight 高亮内联（古金底高亮） */
.highlight {
  background: linear-gradient(180deg, transparent 60%, var(--gold-tint-40) 60%);
  padding: 0 2px;
  color: var(--black-pure);
  font-weight: var(--fw-semibold);
}

/* warning-box / notice-box 警示框 */
.warning-box,
.notice-box,
.alert-box {
  background: linear-gradient(135deg, rgba(162, 59, 59, 0.05), transparent);
  border: 1px solid rgba(162, 59, 59, 0.3);
  border-left: 3px solid #A23B3B;
  border-radius: 2px;
  padding: 24px 28px;
  margin: 32px auto;
  max-width: var(--container-narrow);
}
.warning-box h3,
.notice-box h3,
.alert-box h3 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 18px;
  font-weight: 700;
  color: #A23B3B;
  letter-spacing: 2px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
.warning-box p,
.notice-box p,
.alert-box p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--black-text);
  margin: 0;
}

/* tip-box / info-box 提示框（古金版） */
.tip-box, .info-box,
.insight-box {
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-tint-40);
  border-left: 3px solid var(--gold-primary);
  border-radius: 2px;
  padding: 24px 28px;
  margin: 32px auto;
  max-width: var(--container-narrow);
}
.tip-box h3, .info-box h3, .insight-box h3 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 2px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

@media (max-width: 768px) {
  .cost-section, .pain-section, .group-section,
  .tier-section, .step-section, .section-block,
  .warning-box, .tip-box, .info-box {
    padding: 20px 18px;
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }
  .cost-header, .pain-header, .group-header,
  .tier-header, .step-header {
    gap: 12px;
  }
  .cost-title, .pain-title, .group-title,
  .tier-title, .step-title { font-size: 17px; letter-spacing: 1.5px; }
}

/* ============================================================
   article-content 选择器补强 + 纯文字布局拓宽
   修复：原 article.css 选择器只匹配 .article-body，
   而实际 HTML 用 .article-content，所有正文样式失效
   ============================================================ */

/* article-content 容器拓宽（与 hero 1080 对齐），
   内部纯文字段落仍限 720px 增强可读性 */
.article-content {
  padding: 64px 0;
}
.article-content > .container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
/* 直接子级 p / h2 / h3 / h4 / ul / ol / blockquote 限 720px 居中 */
.article-content > .container > h2,
.article-content > .container > h3,
.article-content > .container > h4,
.article-content > .container > p,
.article-content > .container > ul,
.article-content > .container > ol,
.article-content > .container > blockquote {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* article-content 内 h2/h3/h4 样式（与 .article-body 同源） */
.article-content h2 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 32px auto 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold-tint-25);
  position: relative;
}
.article-content h2::before {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 40px; height: 1px;
  background: var(--gold-primary);
}
.article-content h3 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 32px auto 16px;
  padding-left: 14px;
  border-left: 3px solid var(--gold-primary);
}
.article-content h3:first-child {
  margin-top: 0;
}
.article-content h4 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 1.5px;
  margin: 24px auto 12px;
}
.article-content p {
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  margin: 0 auto 16px;
  letter-spacing: 0.5px;
}
.article-content ul, .article-content ol {
  padding-left: 1.5em;
  margin: 0 auto 16px;
}
.article-content li {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 8px;
  color: var(--black-text);
}
.article-content ul li::marker { color: var(--gold-primary); }
.article-content ol li::marker { color: var(--gold-deep); font-weight: var(--fw-bold); }
.article-content strong, .article-content b {
  font-weight: var(--fw-bold);
  color: var(--black-pure);
  background: linear-gradient(180deg, transparent 65%, var(--gold-tint-12) 65%);
  padding: 0 2px;
}

/* article-content 内的特殊容器（team-tiers/cost-section 等）允许全宽 1080 */
.article-content > .container > .team-tiers,
.article-content > .container > .cost-section,
.article-content > .container > .pain-section,
.article-content > .container > .group-section,
.article-content > .container > .step-section,
.article-content > .container > .tier-section {
  max-width: 100%;
}

/* ============================================================
   team-tiers timeline 布局（advantages/team.html 等）
   原结构：顶层/中层/底层 三个 .tier，每个含：
     .tier-left (.tier-badge 序号 + .tier-line 装饰竖线)
     .tier-right (.tier-title 标题 + .tier-desc 描述)
   设计：左侧序号方框 + 古金竖线串联，右侧大字标题 + 段描述
   ============================================================ */
.team-tiers,
.tier-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 40px auto;
  max-width: 1000px;
  position: relative;
}
.tier {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 4px 0 32px;
  position: relative;
}
.tier:last-child { padding-bottom: 0; }
.tier-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}
.tier-badge {
  width: 64px; height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-primary);
  border-radius: 2px;
  letter-spacing: 1px;
  line-height: 1;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}
.tier-badge::before,
.tier-badge::after {
  content: '';
  position: absolute;
  width: 6px; height: 1px;
  background: var(--gold-primary);
  top: 50%;
  transform: translateY(-50%);
}
.tier-badge::before { left: -8px; }
.tier-badge::after  { right: -8px; }
.tier-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-primary), var(--gold-tint-25));
  min-height: 40px;
}
.tier:last-child .tier-line { display: none; }

.tier-right {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-left: 3px solid var(--gold-primary);
  border-radius: 2px;
  padding: 24px 28px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.tier-right:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 8px 24px rgba(197, 162, 77, 0.10);
}
.tier-title {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.tier-desc {
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  letter-spacing: 0.5px;
}
.tier-desc strong, .tier-desc b,
.tier-desc .highlight {
  background: linear-gradient(180deg, transparent 60%, var(--gold-tint-40) 60%);
  padding: 0 2px;
  color: var(--black-pure);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   段落视觉节奏增强（让纯文字也有节奏感）
   ============================================================ */
/* 每段 p 段后加古金小分隔点（仅在 article-content 直接子级生效，
   避免在卡片内重复） */
.article-content > .container > p + h3::before,
.article-content > .container > p + h2::before {
  /* heading 前已经有古金左边框/底线，不再追加 */
}

/* highlight 行内高亮（部分页面用 span.highlight） */
.article-content .highlight,
.article-content span.highlight {
  background: linear-gradient(180deg, transparent 60%, var(--gold-tint-40) 60%);
  padding: 0 2px;
  color: var(--black-pure);
  font-weight: var(--fw-semibold);
}

/* article-hero 与 article-content 容器拓宽对齐（1080px） */
.article-hero .container {
  max-width: 1080px;
}

@media (max-width: 1024px) {
  .article-content > .container { max-width: 100%; padding: 0 var(--space-lg); }
  .tier { grid-template-columns: 72px 1fr; gap: 20px; }
  .tier-badge { width: 56px; height: 56px; font-size: 20px; }
}

@media (max-width: 768px) {
  .article-content { padding: 40px 0; }
  .article-content > .container { padding: 0 var(--space-md); }
  .article-content h2 { font-size: 20px; }
  .article-content h3 { font-size: 18px; }
  .tier { grid-template-columns: 56px 1fr; gap: 16px; padding-bottom: 24px; }
  .tier-badge { width: 44px; height: 44px; font-size: 17px; }
  .tier-right { padding: 18px 20px; }
  .tier-title { font-size: 17px; letter-spacing: 1px; }
  .tier-desc { font-size: 15px; }
}

/* ============================================================
   article-content 内未样式化容器全面补强（5 类共 22+ 处实例）
   ============================================================ */

/* ===== 模式 A：item 卡（service / engine / family / service-card） ===== */
.service-item,
.engine-item,
.family-item,
.service-card,
.notion-item {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-top: 2px solid var(--gold-primary);
  border-radius: 2px;
  padding: 28px 32px;
  margin: 0 auto 20px;
  max-width: 1000px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.service-item:hover,
.engine-item:hover,
.family-item:hover,
.service-card:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 8px 24px rgba(197, 162, 77, 0.10);
}
/* item 卡内 h3 标题 */
.service-item > h3,
.engine-item > h3,
.family-item > h3,
.service-card > h3 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.service-item > h3 .si-icon,
.service-card > .sc-icon,
.service-item > .si-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-tint-40);
  border-radius: 2px;
  flex-shrink: 0;
}
.service-item > h3 .si-icon [data-lucide],
.service-card > .sc-icon [data-lucide],
.service-item > .si-icon [data-lucide] {
  width: 20px; height: 20px;
  color: var(--gold-primary);
}
/* service-card 内 sc-icon 独立行（与 h3 分离） */
.service-card > .sc-icon { margin-bottom: 14px; }
/* item 卡内段落 */
.service-item > p,
.engine-item > p,
.family-item > p,
.service-card > p {
  font-size: 16px;
  color: var(--black-text);
  line-height: 1.85;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}
.service-item > p:last-child,
.engine-item > p:last-child,
.family-item > p:last-child,
.service-card > p:last-child {
  margin-bottom: 0;
}

/* ===== 模式 B：engine-header / family-header（num + title 横排） ===== */
.engine-header,
.family-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.engine-num,
.family-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-primary);
  border-radius: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.engine-title,
.family-title {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  line-height: 1.4;
  flex: 1;
}
.family-icon {
  width: 28px; height: 28px;
  color: var(--gold-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.family-icon [data-lucide] { width: 24px; height: 24px; color: var(--gold-primary); }

/* ===== 模式 C：flow-steps timeline（与 team-tiers 同源） ===== */
.flow-steps {
  display: flex;
  flex-direction: column;
  margin: 40px auto;
  max-width: 1000px;
}
.flow-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 4px 0 28px;
}
.flow-step:last-child { padding-bottom: 0; }
.step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-primary);
  border-radius: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.step-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-primary), var(--gold-tint-25));
  min-height: 30px;
}
.flow-step:last-child .step-line { display: none; }
.step-right {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-left: 3px solid var(--gold-primary);
  border-radius: 2px;
  padding: 20px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.step-right:hover {
  border-color: var(--gold-primary);
  box-shadow: 0 8px 24px rgba(197, 162, 77, 0.10);
}
.step-title {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 1.5px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.step-desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-700);
  letter-spacing: 0.5px;
}

/* ===== 模式 D：goal-box 目标提示框 ===== */
.goal-box {
  background: linear-gradient(135deg, var(--gold-tint-12), var(--gold-tint-08));
  border: 1px solid var(--gold-primary);
  border-left: 3px solid var(--gold-deep);
  border-radius: 2px;
  padding: 22px 28px;
  margin: 32px auto;
  max-width: 1000px;
  position: relative;
}
.goal-box::before {
  content: '目标';
  position: absolute;
  top: -10px; left: 20px;
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--black-pure);
  background: var(--gold-primary);
  padding: 2px 12px;
  letter-spacing: 4px;
  border-radius: 2px;
}
.goal-box > h3 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
}
.goal-box > p {
  font-size: 15px;
  color: var(--black-text);
  line-height: 1.8;
  margin: 0;
}

/* ===== 模式 E：angel-section 大节强调 ===== */
.angel-section {
  background: var(--white-pure);
  border: 1px solid var(--gold-primary);
  border-radius: 2px;
  padding: 36px 40px;
  margin: 40px auto;
  max-width: 1000px;
  position: relative;
}
.angel-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-primary), var(--gold-deep), var(--gold-primary));
}
.angel-section > h2 {
  font-family: 'Source Han Serif SC', 'STSong', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  margin: 8px 0 8px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.angel-section > h2 [data-lucide] {
  width: 28px; height: 28px;
  color: var(--gold-primary);
}
.angel-section > h2::before { display: none; }
.angel-section .angel-sub {
  font-size: 13px;
  color: var(--gold-deep);
  letter-spacing: 2px;
  font-weight: var(--fw-semibold);
  margin-bottom: 16px;
  padding: 6px 12px;
  background: var(--gold-tint-08);
  border-left: 2px solid var(--gold-primary);
  display: inline-block;
  border-radius: 0 2px 2px 0;
}
.angel-section > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--black-text);
  margin: 0 0 16px;
}
.angel-section .angel-highlight {
  background: linear-gradient(180deg, transparent 60%, var(--gold-tint-40) 60%);
  padding: 0 2px;
  color: var(--black-pure);
  font-weight: var(--fw-semibold);
}

/* ===== 模式 F：source-grid / service-grid 多卡栅格 ===== */
/* source-grid 强制 3 列（content.html 3 张固定卡，避免 auto-fit 在某些视口算成 2+1） */
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px auto;
  max-width: 1080px;
  align-items: stretch;
}
/* service-grid 3 列（pillar3.html 6 卡 → 2 行×3 列整齐网格） */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 36px auto;
  max-width: 1080px;
  align-items: stretch;
}
.source-card {
  background: var(--white-pure);
  border: 1px solid var(--gold-tint-25);
  border-top: 2px solid var(--gold-primary);
  border-radius: 2px;
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 200px; /* 等高三卡 */
}
.source-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--gold-deep);
}
.source-card:hover {
  border-color: var(--gold-primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(197, 162, 77, 0.15);
}
.source-card .sc-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-primary);
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-tint-40);
  border-radius: 2px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.source-card .sc-icon [data-lucide] { width: 24px; height: 24px; color: var(--gold-primary); }
.source-card > h4 {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--black-pure);
  letter-spacing: 2px;
  margin: 0;
  padding: 0;
  position: relative;
}
.source-card > h4::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold-primary);
  margin: 10px 0 0;
}
.source-card > p {
  font-size: 14px;
  line-height: 1.85;
  color: var(--black-text);
  margin: 0;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .service-item, .engine-item, .family-item,
  .service-card, .goal-box, .angel-section {
    padding: 20px 18px;
    margin-left: var(--space-md);
    margin-right: var(--space-md);
  }
  .service-item > h3, .engine-title, .family-title { font-size: 17px; letter-spacing: 1.5px; }
  .engine-num, .family-num { width: 36px; height: 36px; font-size: 16px; }
  .flow-step { grid-template-columns: 48px 1fr; gap: 14px; padding-bottom: 20px; }
  .step-num { width: 40px; height: 40px; font-size: 18px; }
  .step-right { padding: 16px 18px; }
  .step-title { font-size: 16px; }
  .goal-box::before { left: 12px; }
  .angel-section > h2 { font-size: 18px; }
  .source-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .source-card { padding: 24px 20px; min-height: 0; }
  .source-card > h4 { font-size: 17px; letter-spacing: 1.5px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}