/**
 * 落地页样式
 *
 * 版式与配色严格对齐原型 prototype/待删/web/landing.html 的浅色设计：
 * 白色页底、深蓝横幅（顶栏 + hero）、金色 CTA、白卡浅灰色带。
 *
 * 除了「落地页特有的版式」，其余全部走设计令牌 —— 深浅色、字号档位、
 * 品牌色改一处即全站生效，这是令牌化的价值所在。因此这里没有一处硬编码色值，
 * `npm run lint:styles` 会拦住任何引入。
 *
 * 横幅（顶栏/hero/页脚）用色走 site.* 组件令牌，深浅色共用 —— 横幅本身就是
 * 深色的，两个主题下保持一致；页底与色带走 surface.*，随主题自动翻转。
 */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-body);
  line-height: var(--font-line-height-base);
  color: var(--text-primary);
  /* 原型 body 是纯白而非灰底 —— 用卡片白承接；深色模式随卡片色翻转 */
  background: var(--surface-card);
  transition: background-color var(--motion-duration-base) var(--motion-easing-standard);
}

/* 内容栅格：只管 max-width 与左右留白，由全宽区块套在里面。
   留白 20px 对齐原型的 .wrap padding（web/style.css 为 0 22px）——
   此前是 8px，在桌面端被 max-width 居中掩盖看不出来，在手机上内容几乎
   贴到屏幕边缘。手机档位再收一档到 16px。
   用 padding-inline 而非 padding 简写：简写会把 .header__inner 等复用
   .page 的元素上的纵向内边距一并清零（实测手机顶栏因此少了两侧留白）。 */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--space-20);
}

/* ── 顶栏（深蓝实底，原型 .header）────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background: var(--site-header-bg);
  color: var(--text-on-brand);
  box-shadow: var(--card-shadow);
}

/* 三栏网格：品牌左 / 导航居中 / 主题切换右。两侧同为 1fr，故导航恒在正中，
   空白对称分布 —— 此前 flex space-between 把导航推到最右，1180px 容器下
   品牌与导航之间空出 874px（占 74%）。 */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  /* 高度走令牌：.hero 的 min-height 要用同一个值做减法（顶栏 36px 时
     首屏会露出下一区 166px），两处必须是同一个数字 */
  min-height: var(--site-header-height);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* 触控目标下限。
   layout.touchTarget 令牌（44px）明确写了「目标客群年龄偏大，不可低于此值」，
   而实测顶栏品牌（32px）、导航链接（22px）、主题按钮（21px）、页脚法律链接
   （18px）共 7 处全部低于该值。此处统一给到 44px。
   顶栏本身 72px，装 44px 的可点区域不显拥挤；页脚链接变高会让页脚略高，
   但对这个客群来说可点性比紧凑更重要。 */
.header__brand,
.header__nav a,
.header__login,
.header__theme,
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-touch-target);
}

/* 顶栏增高后，锚点跳转的落点会被吸顶栏盖住（36px 时已轻微遮挡，
   72px 会明显压住区块标题）。scroll-margin-top 是标准解法，
   无需额外占位元素或 JS。 */
section[id] {
  scroll-margin-top: calc(var(--site-header-height) + var(--space-6));
}

.header__brand {
  justify-self: start;
  gap: var(--space-12);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  color: var(--text-on-brand);
  text-decoration: none;
}

/* 品牌徽章：44px 高，与触控目标同高 —— 顶栏 72px 里字标同排不挤。
   宽 auto 由源图 0.96:1 的比例撑出（369×384，透明底银章），不另行裁切。 */
.header__brand-mark {
  width: auto;
  height: var(--layout-touch-target);
}

.header__nav {
  display: flex;
  justify-self: center;
  align-items: center;
  gap: var(--space-16);
}

.header__actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: var(--space-4);
}

/* 会员入口：无边框的文字 + 图标。顶栏的次级控件一律不画框（主题按钮同此处理）——
   一个描边胶囊会把次级入口画得像主按钮，与 hero 的金色实心 CTA 抢注意力。
   文字走 brand-accent-light（金）：它在深蓝横幅上对比度 6.5:1；
   反过来的做法（实心金底 + 白字）只有 2.4:1，是不可读的那一种。
   悬停反馈沿用顶栏导航的语言 —— 一条从左展开的金线。线只画在文字下方、
   不画到图标底下：图标不是一个字，连它一起划线会让两者看起来像被串起来。
   也不做变色，因为它本来就是金色。 */
.header__login {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--font-note);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-accent-light);
  text-decoration: none;
}

.header__login span {
  position: relative;
  white-space: nowrap;
}

.header__login span::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: var(--brand-accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}

.header__login:hover span::after {
  transform: scaleX(1);
}

/* 悬停用「金色下划线展开」而非变色：深蓝横幅上换色对比不够明显，
   而一条从左展开的金线既清晰又贴合品牌。 */
.header__nav a {
  position: relative;
  font-size: var(--font-body);
  color: var(--site-on-brand-muted);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

/* 下划线锚在「文字正下方」而非盒底：导航链接现在有 44px 的可点高度，
   若按盒底定位，金线会掉到文字下方 11px 处、贴近顶栏底边。
   14px 字 × 1.6 行高 = 22.4px，半行高 11.2px，故取中心下 13px。 */
.header__nav a::after {
  content: '';
  position: absolute;
  top: calc(50% + 13px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--brand-accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-duration-base) var(--motion-easing-standard);
}

.header__nav a:hover {
  color: var(--text-on-brand);
}

.header__nav a:hover::after {
  transform: scaleX(1);
}

/* 主题切换：无边框图标按钮。
   此前是带边框的文字胶囊，且被 44px 的最小高度撑成了 34×44 的窄高竖条
   （12px 文字 + 2px 内边距 = 24px 宽），实测在手机上像一颗被挤扁的药丸。
   改为 44×44 的无边框图标：宽度与高度一致，去掉描边后不再抢视觉。 */
.header__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-touch-target);
  min-height: var(--layout-touch-target);
  padding: 0;
  color: var(--site-on-brand-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.header__theme:hover {
  color: var(--brand-accent-light);
}

/* 两个图标同时渲染，由 data-theme 决定显示哪一个 —— 视觉切换不经过 JS，
   首屏也就不会出现「图标闪一下」。
   显示「将要切换到」的模式：浅色下显示月亮（点了变深色）。 */
.header__theme-icon--to-light {
  display: none;
}

[data-theme='dark'] .header__theme-icon--to-dark {
  display: none;
}

[data-theme='dark'] .header__theme-icon--to-light {
  display: inline-block;
}

/* ── 首屏（高端健康蓝渐变横幅，原型 .hero）────────────── */

/* 首屏高度 = 视口高度 − 顶栏高度。顶栏是 sticky 且在常规流内，所以
   「顶栏 + hero」正好等于一整屏，下一区从折线之下开始、零像素露出。
   此前用 72vh 未减去顶栏，1280×720 下会露出下一区 166px。
   两行 min-height 不是重复：后一行是 svh（移动端浏览器地址栏收起前的小
   视口高度），不支持的浏览器会保留前一行。
   svh 兜底而非 dvh —— 地址栏滚动收缩时 dvh 会让首屏高度跳动。 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100svh - var(--site-header-height));
  padding: var(--space-64) 0;
  text-align: center;
  color: var(--text-on-brand);
  background: var(--site-hero-bg);
  border-bottom: 1px solid var(--site-hero-edge);
  /* 质感层（噪点 / 水印）以绝对定位铺在横幅上，溢出必须裁掉 */
  overflow: hidden;
}

/* 噪点：细颗粒去饱和噪声平铺，给大面积渐变一点「纸感」。
   强度走令牌（5%），只此一层、不再叠加别的纹理 —— 质感是氛围不是图案。 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--decor-noise-image);
  opacity: var(--decor-noise-opacity);
  pointer-events: none;
}

/* ── 首屏背景吉祥纹样（年轮 / 万年松）──────────────
   「健康长寿」意象的细线稿装饰（SVG 在 App.vue），白描低透明度
   压在横幅两侧留白上，与品牌徽章同一套线稿语言。
   绝对定位的纹样会盖住同级静态内容，正文 .page 必须提到 z-index:1，
   纹样永远在文字之下；溢出由 .hero 的 overflow:hidden 裁掉。 */
.hero .page {
  position: relative;
  z-index: 1;
}

.hero__decor {
  position: absolute;
  height: auto;
  color: var(--text-on-brand);
  opacity: var(--decor-watermark-opacity);
  pointer-events: none;
}

/* 年轮：右侧大而虚，半个探出画外 —— 岁月层积的底纹 */
.hero__decor--rings {
  right: clamp(-160px, -8vw, -60px);
  top: 50%;
  width: clamp(360px, 40vw, 640px);
  transform: translateY(-50%);
}

/* 万年松：左上垂枝入画 */
.hero__decor--pine {
  left: clamp(0px, 6vw, 120px);
  top: calc(-1 * var(--space-8));
  width: clamp(220px, 22vw, 340px);
  opacity: 0.1;
}

/* 手机：首屏窄，两侧留白塞不下松 —— 只留右下角一小段年轮，
   且进一步压低存在感，不与两行标题抢空间 */
@media (max-width: 640px) {
  .hero__decor--pine {
    display: none;
  }

  .hero__decor--rings {
    top: auto;
    right: -90px;
    bottom: -60px;
    width: 280px;
    transform: none;
    opacity: 0.05;
  }
}

/* 主标题上方的小号金色引子。成本最低的高端感来源：字号小、字距大，
   与主标题形成强对比，而不是再多一行正文。
   「鎏金藏青」升级：两侧各一条消隐金线 —— 引子从「一行小字」变成
   「一线居中、金字居上」的徽章式排印，这在线下请柬与会所物料中是
   最经典的版式语言。 */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin: 0 0 var(--space-8);
  font-size: var(--font-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--decor-tracking-eyebrow);
  text-indent: 0;
  color: var(--brand-accent-light);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: '';
  flex: 0 0 auto;
  width: 56px;
  height: 1px;
  background: var(--decor-gold-line);
}

.hero__title {
  max-width: 900px;
  margin: 0 auto var(--space-8);
  font-size: var(--font-heading-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--font-line-height-tight);
  letter-spacing: -0.01em;
  color: var(--text-on-brand);
}

.hero__sub {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  font-size: var(--font-heading-lead);
  line-height: var(--font-line-height-loose);
  color: var(--site-on-brand-muted);
}

.hero__tags {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}

/* 原型 .tagline：半透明白胶囊，白字白描边 */
.hero__tags li {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-body);
  color: var(--text-on-brand);
  background: var(--site-chip-bg);
  border: 1px solid var(--site-chip-border);
  border-radius: var(--radius-pill);
}

/* ── CTA（鎏金金属面）────────────────────────────────── */

/* 鎏金藏青的落点之一：CTA 面从纯色金升级为金属渐变（decor.goldMetalFill），
   深-浅-深的反光节奏让按钮成为首屏唯一的高光。
   文字必须用 metalInk（恒定深墨）而非 text.on-brand：白字压金只有 2.4:1，
   是「看不清」而不是「高端」；墨字压金 ≈8:1，且与 button.accent 的
   「金底深字」同构。hover 提亮走 filter，不再换底色 —— 金属面没有
   「另一块更亮的金」，只有同一块金转个角度。 */
.cta {
  display: inline-block;
  padding: var(--space-14) var(--space-32);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--decor-metal-ink);
  background: var(--decor-gold-metal-fill);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: filter var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.cta:hover {
  filter: brightness(1.06);
}

.cta:active {
  transform: translateY(1px);
}

.cta--block {
  display: block;
  padding: var(--space-12) 0;
  font-size: var(--font-body);
  text-align: center;
}

/* ── 区块（白色页底 + 交替浅灰色带，原型 .section / .section.alt）── */

.section {
  padding: var(--space-64) 0;
}

.section--band {
  background: var(--surface-page);
}

/* ── 二级页深蓝版面（服务总览 / 会员体系 / 加盟合作）────────────────── */

/* 这三张二级页（body 上的 .body-navy）按主题分两副面孔：
   深色模式 —— 整页采用深色 hero 的深蓝（#0a1726），区块之间无底色交替，
   分隔只靠 .flow 的发丝线与卡片本身；
   浅色模式 —— 完全跟随门户首页的浅色版式（白页底、白卡、深蓝标题、
   金色点缀），顶部 detail-band 呈现与首页 hero 同一条深蓝渐变。
   实现走令牌覆写而非逐条改组件样式：页内卡片/文字/描边消费的都是语义
   令牌，深色下覆写为深色主题取值；浅色下不覆写，取值即首页同款。
   注意覆写的必须是「消费端」令牌（--card-bg 这类）：--surface-card 是
   --card-bg 的取值来源，var() 在 :root 声明处即已求值，只覆写来源改不动
   已经定值的派生令牌（实测卡片仍是白底）。
   维护约定：覆写值必须与 theme-dark.css 保持一致，不发明新颜色。
   stylelint-disable：这里是在浅色页面里强制一段深色区块，必须写死深色主题的
   取值（不能引用 :root 上已被浅色覆盖的令牌）；取值逐项与 theme-dark.css 一致，
   改令牌时必须同步本块。 */
/* stylelint-disable color-no-hex, function-disallowed-list */
[data-theme="dark"] .body-navy {
  --surface-page: #0a1726;
  --card-bg: #12233a;
  --card-border: #1f3550;
  --card-shadow: 0px 1px 3px 0px #0000004d;
  --card-shadow-hover: 0px 10px 26px 0px #00000073;
  --surface-subtle: #1a3049;
  --border-subtle: #1e2e44;
  --text-primary: #e8eef6;
  --text-secondary: #8fa4bc;
  --text-tertiary: #b6c6d9;
  --brand-shade-pale: #8fb4d4;
  --brand-primary-alt: #c8a24b;
  --status-success-fg: #4fd18b;
  /* 顶部的 detail-band 与页底同色：由「色带」退为纯排版区，页面上半部
     不再出现第二条底色 */
  --site-hero-bg: var(--surface-page);
  --site-hero-edge: rgba(0, 0, 0, 0);
  background: var(--surface-page);
}
/* stylelint-enable color-no-hex, function-disallowed-list */

/* 版心宽度刻意与首页共用同一条 .page（1180px），不在此放宽：
   顶栏是各页复用的组件，版心一宽，跨页跳转时品牌与导航的位置就会横跳
   （2026-09-20 曾放宽到 1360px，按用户要求收回对齐首页）。 */

.section__title {
  font-size: var(--font-heading-section);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
  margin: 0 0 var(--space-5);
  text-align: center;
}

.section__sub {
  margin: 0 0 var(--space-16);
  font-size: var(--font-heading-lead);
  color: var(--brand-shade-pale);
  text-align: center;
}

/* 不允许在词组内部换行（如「紧急就医」被拆成「紧急就 / 医」） */
.nowrap {
  white-space: nowrap;
}

/* 首屏标题的三个短句：桌面端同一行用「·」分隔；手机端各占一行，
   避免「·」被甩到下一行行首，也避免「看病有 / 通道」拆词。 */
.hero__title-line {
  white-space: nowrap;
}

/* ── 服务板块 ─────────────────────────────────────────── */

/* 8 项服务刻意用固定 4 列而非 auto-fit：auto-fit minmax(300px,1fr) 在
   1180px 容器下只排 3 列，8 张卡会变成 3+3+2 —— 最后一行缺一张、留个角。
   固定 4 列得到整齐的 4×2。代价是卡片宽度由 372px 收到 271px，
   故卡片内边距同步从 32px 降到 24px，避免内容被挤成窄条。 */
.services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  color: inherit;
  text-decoration: none;
  /* 悬停反馈：上浮 + 阴影加深 + 描边升档。三者同时动才读得出「可点」，
     只换阴影在浅色底上几乎看不见。 */
  transition: transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard),
    border-color var(--motion-duration-base) var(--motion-easing-standard);
}

/* 悬停时卡顶浮现一条消隐金线：像抽屉被拉开一条金边。
   两端内收（不贴到圆角），线比整条通栏更「首饰感」；opacity 过渡
   而非 display 切换，键盘 :focus-visible 同样触发（见下方焦点规则）。 */
.service::before {
  content: '';
  position: absolute;
  top: -1px;
  right: var(--space-24);
  left: var(--space-24);
  height: 1px;
  background: var(--decor-gold-line);
  opacity: 0;
  transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}

.service:hover::before,
.service:focus-visible::before {
  opacity: 1;
}

.service:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
}

/* 编号眉（01-08）：编辑排印的秩序感来源。金用 gold.700（text.goldStrong）
   —— 白底上小号金字唯一过得了 4.5:1 的档。 */
.service__no {
  margin-bottom: var(--space-8);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--decor-tracking-brand);
  color: var(--text-gold-strong);
}

/* 图标磁贴：去填充底、改线性描边 —— 实底磁贴是工具栏语言，描边容器
   是器物语言；图标色随主题（深色下自动变金），描边走中性档。 */
.service__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-8);
  color: var(--brand-primary-alt);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
}

.service__title {
  font-size: var(--font-heading-card);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
  margin: 0 0 var(--space-6);
}

.service__desc {
  margin: 0 0 var(--space-8);
  font-size: var(--font-body);
  line-height: var(--font-line-height-loose);
  color: var(--text-secondary);
}

/* 卡片底部的进入提示。margin-top:auto 让它在各卡文案长短不一时仍对齐底部 */
.service__more {
  margin-top: auto;
  font-size: var(--font-note);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.service:hover .service__more {
  color: var(--brand-accent);
}

/* ── 会员等级 ─────────────────────────────────────────── */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-32);
  /* 刻意不写 align-items: start —— 那会覆盖 grid 默认的 stretch，
     使各卡只有自身内容高（金卡 4 条权益比另两张少一条，实测矮 33px）。
     等高后差额由 .tier__benefits 的 flex:1 吸收，表现为权益列表之后、
     按钮之前的留白，按钮仍对齐卡片底部。 */
}

/* 等级卡。三档各有一张「金属名片带」（令牌 tier.*）：卡片顶部一块通栏底色，
   承载等级名与一句话定位。这是三张卡之间唯一的颜色身份，也是「等级不同」
   在版面上最直接的一处表达。
   带上的文字固定深蓝（tier.bandInk），**不随主题翻转** —— 带子本身是浅金属，
   深浅两个主题下都是浅的，底色不变文字就不该变。
   金属不做彩色文字：金色字在白底上过不了对比度（gold.600 仅 2.41:1），
   把价格写成金色得到的是「看不清」而不是「高端」。 */
.tier {
  /* 未知等级 code 的兜底：走品牌金并取消带子，至少不会渲染成一张无色怪卡。
     已识别的三档在下方 .metal-* 覆盖。 */
  --metal-band: none;
  --metal-ring: var(--card-border);

  position: relative;
  display: flex;
  flex-direction: column;
  /* 名片带要通栏到卡片左右边缘，靠负外边距反向撑开卡片内边距 ——
     溢出的部分必须被裁掉，否则四个圆角外会露出方形色块 */
  overflow: hidden;
  padding: var(--space-32);
  background: var(--card-bg);
  border: 1px solid var(--metal-ring);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard);
}

.metal-gold {
  --metal-band: var(--tier-gold-band);
  --metal-ring: var(--tier-gold-ring);
}

.metal-platinum {
  --metal-band: var(--tier-platinum-band);
  --metal-ring: var(--tier-platinum-ring);
}

.metal-diamond {
  --metal-band: var(--tier-diamond-band);
  --metal-ring: var(--tier-diamond-ring);
}

/* 三档一律不抬升、不带角标：卡片之间只靠颜色区分等级，不暗示「推荐哪一张」。
   此前主推档抬升 10px —— 用户明确要求取消（「铂金卡会员不要默认上移」）。 */
.tier:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
}

/* 金属名片带。通栏靠负外边距抵消卡片内边距（上下左右四个方向都要）：
   上边 -32 让带子顶到卡片上沿，左右 -32 让它贯通到两侧描边。
   「鎏金藏青」升级：带面叠一层噪点（金属拉丝的暗示），下缘压一条
   30% 金发丝线 —— 带子与卡身的分界从「色块断开」变成「金线镶边」。 */
.tier__band {
  position: relative;
  margin: calc(-1 * var(--space-32)) calc(-1 * var(--space-32)) var(--space-20);
  padding: var(--space-20) var(--space-32);
  background-image: var(--metal-band);
  color: var(--tier-band-ink);
  box-shadow: inset 0 -1px 0 var(--decor-hairline-gold);
}

.tier__band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--decor-noise-image);
  opacity: 0.04;
  pointer-events: none;
}

/* 噪点层是绝对定位，会盖在文字上方（视觉上只是 4% 颗粒，但让文字
   回到自己的图层更干净） */
.tier__band > * {
  position: relative;
}

.tier__name {
  margin: 0;
  font-size: var(--font-heading-card);
  font-weight: var(--font-weight-bold);
  color: inherit;
}

/* 等级英文标识（VIP GOLD / VIP PLATINUM / VIP DIAMOND）。放在中文等级名上方作引子，
   与电子会员卡上的写法一致 —— 字体小、字距大，与 20px 的中文名形成强对比。
   字距 0.28em 与首屏那条金色引子（.hero__eyebrow）同一个值：全站「小号引子」
   只有这一种排版语言，多一个值就多一种节奏。
   不用 opacity 压暗：带子是浅底、字是深蓝，透明度会把对比度从 6.3:1 拉到 3.8:1，
   而这里只需要「比中文名轻」，靠字号与字重就够了。 */

/* 等级卖点，来自后端 tagline。带上的两行同色、靠字号与字重分层 ——
   13px 小字在带子最深一端仍有 6:1，不必为它另配一个浅色（浅色反而降对比） */
.tier__tagline {
  margin: var(--space-4) 0 0;
  font-size: var(--font-note);
  line-height: var(--font-line-height-base);
  color: inherit;
}

.tier__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--brand-primary-alt);
}

.tier__currency {
  font-size: var(--font-heading-h2);
}

/* 36px 展示号：价格是等级卡的视觉重心，也是客户唯一真正在比较的信息。
   tabular-nums + 微字距：大数字排印的笃定感来自等宽数位与紧凑字距。 */
.tier__amount {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  letter-spacing: var(--decor-tracking-numeral);
  font-variant-numeric: tabular-nums;
}

.tier__unit {
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.tier__quota {
  margin: var(--space-6) 0 var(--space-8);
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.tier__benefits {
  flex: 1;
  margin: 0 0 var(--space-10);
  padding: 0;
  list-style: none;
}

.tier__benefits li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) var(--space-10);
  font-size: var(--font-body);
  line-height: var(--font-line-height-base);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}

.tier__benefits li:last-child {
  border-bottom: none;
}

.tier__benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--status-success-fg);
  font-weight: var(--font-weight-bold);
}

.source {
  margin: var(--space-10) 0 0;
  font-size: var(--font-caption);
  line-height: 1.7;
  color: var(--text-secondary);
  text-align: center;
}

.source code {
  font-family: var(--font-family-code);
  font-size: 0.92em;
}

/* ── 权益对比详情（原型 .compare-table）───────────────── */

/* 表格是「同一维度横向比较」唯一成立的版式：三档并列、逐行对照。
   原型在窄屏完全没有处理（.compare-table 会直接溢出容器），这里的做法是
   压缩字号与内边距让它在 390px 下也放得下，而不是改成横滑 —— 对比表一旦
   需要横滑，比较本身就断了（同一行的另外两列不在视野里）。
   overflow-x 仅作兜底：字号档位调到「特大」时仍可能溢出。 */
.compare {
  overflow-x: auto;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  /* 定宽布局：三档列等宽，第一列宽度可控 —— 自动布局下「权益项目」四字
     会按内容把首列压到最窄，各行列宽还会随文字变化而跳。 */
  table-layout: fixed;
  font-size: var(--font-note);
}

/* 表头走顶栏同一条令牌组（深蓝底 + 白字）：深浅两个主题下横幅都是深色的，
   表头也应当恒定，不随页底翻转 —— 否则深色模式下会变成一块亮块。 */
.compare__table thead th {
  padding: var(--space-10) var(--space-8);
  font-size: var(--font-note);
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-brand);
  background: var(--site-header-bg);
  text-align: left;
  vertical-align: top;
}

/* 三个等级列的表头各用该档的金属色 —— 与等级卡的名片带同一个令牌
   （--metal-band 由 .metal-* 提供），所以「金卡」在卡片上和表头上是同一块金。
   首列「权益项目」不是等级，保持原本的深蓝表头底与白字。 */
.compare__table thead th.metal-gold,
.compare__table thead th.metal-platinum,
.compare__table thead th.metal-diamond {
  background-image: var(--metal-band);
  color: var(--tier-band-ink);
}

.compare__tier {
  display: block;
}

/* 价格是表头的第二层信息，比等级名弱一档。层级靠字号与字重拉开，不靠颜色 ——
   它只出现在金属表头里，而金属底是浅色，任何「压暗」都会把对比度拉下去
   （浅底深蓝字加 28% 透明度：6.3:1 → 3.8:1）。 */
.compare__price {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-regular);
  color: inherit;
}

.compare__table tbody th,
.compare__table tbody td {
  padding: var(--space-10) var(--space-8);
  text-align: left;
  vertical-align: top;
}

/* 维度名：本行第一个、也是唯一确定无疑的一格，用主文字色压住 */
.compare__table tbody th {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.compare__table tbody td {
  color: var(--text-primary);
}

/* 行分隔线画在行首而非行尾：末行不会多出一条悬空的下边线 */
.compare__table tbody tr + tr th,
.compare__table tbody tr + tr td {
  border-top: 1px solid var(--border-subtle);
}

/* 悬停：整行提亮，帮助横向读数。
   曾经排除过「主推列」—— 那一列有整列浅底，再叠悬停会变成第三种颜色。
   现在三档一视同仁、没有整列底色，排除逻辑也就不需要了。 */
.compare__table tbody tr:hover td {
  background: var(--surface-page);
}

/* 占位格：「—」走 text.tertiary —— 它比正文弱一档，读起来是「此处无内容」
   而不是「这里写着一个字」。
   选择器必须带 td 限定：占位类挂在 td 自身，而上面 `.compare__table tbody td`
   已经给 td 设了 text.primary —— 同层写 `.compare__none` 特异度更低（0,1,0
   对 0,1,2），会被静默盖掉（实测「—」显示成了正文色，占位语义全失）。 */
.compare__table tbody td.compare__none {
  color: var(--text-tertiary);
}

/* 首列定宽 22%：桌面端 1180px 容器下约 260px，放得下「院士 / 专家资源」这类
   六字标签不折行；三档各得 26%，数值与短语一行即可容纳。 */
.compare__dim {
  width: 22%;
}

.compare__note {
  max-width: 760px;
  margin: var(--space-10) auto 0;
  font-size: var(--font-caption);
  line-height: 1.8;
  color: var(--text-secondary);
  text-align: center;
}

/* ── 联系方式 ─────────────────────────────────────────── */

.contact {
  text-align: center;
}

.contact__phone {
  /* min()：桌面保持 6xl 令牌；窄屏（≤420）随视口收一档，
     13 位号码在 360px 上不再逼近栏宽 */
  font-size: min(var(--font-size-6xl), 11vw);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--decor-tracking-numeral);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary-alt);
}

.contact__cities {
  margin-top: var(--space-6);
  font-size: var(--font-heading-lead);
  color: var(--brand-shade-pale);
}

.contact__links {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.contact__links a {
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

/* ── 预约表单（SOP V2 0a 获客口）─────────────────────── */

/* 此前整段样式以十六进制字面量写在 App.vue 的 <style> 块里 —— 是全站
   「没有一处硬编码色」承诺的唯一破口，直接后果是深色模式下表单仍是
   一块白卡。迁入此处并全部令牌化，深浅色随主题自动翻转。
   margin-inline: auto：表单在居中的联系区内左对齐与全区块的居中语言
   不一致，限宽之外把盒子本身也居中。 */
.lead-form {
  max-width: 560px;
  margin: var(--space-24) auto 0;
  padding: var(--space-24);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.lead-form__title {
  margin: 0 0 var(--space-16);
  font-size: var(--font-heading-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.lead-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.lead-form__input {
  flex: 1 1 140px;
  min-height: var(--layout-touch-target);
  padding: 0 var(--space-12);
  font-size: var(--font-body);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}

.lead-form__input:hover {
  border-color: var(--border-strong);
}

.lead-form__input:focus-visible {
  border-color: var(--brand-accent);
  outline: 2px solid var(--brand-accent);
  outline-offset: 1px;
}

textarea.lead-form__area {
  width: 100%;
  min-height: 72px;
  margin-top: var(--space-8);
  padding: var(--space-10) var(--space-12);
  resize: vertical;
}

.lead-form__select {
  flex: 0 0 170px;
}

/* 错误提示：错误文案就落在表单内（submit 时聚焦提示行），
   role="alert" 使读屏用户不必翻找 —— 见 App.vue 模板。 */
.lead-form__err {
  margin: var(--space-8) 0 0;
  font-size: var(--font-note);
  font-weight: var(--font-weight-semibold);
  color: var(--status-danger-strong);
}

.lead-form__btn {
  min-height: var(--layout-touch-target);
  margin-top: var(--space-12);
  padding: 0 var(--space-24);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  color: var(--text-on-brand);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-alt));
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: filter var(--motion-duration-fast) var(--motion-easing-standard);
}

.lead-form__btn:hover {
  filter: brightness(1.15);
}

.lead-form__btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.lead-form__note {
  margin: var(--space-12) 0 0;
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

.lead-form__done {
  margin: 0;
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--status-success-strong);
}

/* ── 无障碍工具 ──────────────────────────────────────── */

/* 仅读屏可见（表单 label 等）：视觉上隐藏、可访问树里完整保留 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转正文链接：键盘 Tab 的第一站，获得焦点才出现（左上角金底墨字） */
.skip-link {
  position: fixed;
  top: var(--space-8);
  left: var(--space-8);
  z-index: calc(var(--z-index-modal) + 1);
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--decor-metal-ink);
  background: var(--decor-gold-metal-fill);
  border-radius: var(--radius-md);
  text-decoration: none;
  /* 平移出视口而非 display:none —— display 切换会让某些读屏丢失焦点 */
  transform: translateY(calc(-100% - var(--space-16)));
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}

.skip-link:focus-visible {
  transform: none;
}

/* 字号切换按钮：与主题按钮同款的无边框图标钮（2026-09-23 改）。
   原先是「A + 档位小字」两行堆叠（flex-direction: column）—— 44px 方框里
   挤着 16px 字母与 9px 小字，与旁边的图标按钮不是一个物种。
   现在两者尺寸、配色、悬停反馈逐字一致：44×44、site-on-brand-muted、
   悬停转 brand-accent-light；图标为「一大一小两个 A」（icons 的 font-size）。 */
.header__fontscale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-touch-target);
  min-height: var(--layout-touch-target);
  padding: 0;
  color: var(--site-on-brand-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.header__fontscale:hover {
  color: var(--brand-accent-light);
}

/* ── 页脚（深蓝底，原型 .footer）──────────────────────── */

.footer {
  padding: var(--space-32) 0;
  background: var(--site-footer-bg);
  text-align: center;
}

.footer p {
  margin: 0 0 var(--space-3);
  font-size: var(--font-caption);
  color: var(--brand-shade-pale);
}

.footer__note {
  color: var(--site-on-brand-muted);
}

/* ── 服务详情页（二级页）──────────────────────────────── */

/* 与首页 hero 同一条底色与收边令牌，但更矮：二级页承担的是「定位」而非
   「打动」，占满一屏会把用户挡在内容之外。深色下同样跟随 heroBg 取消色带。 */
.detail-band {
  padding: var(--space-32) 0 var(--space-48);
  color: var(--text-on-brand);
  background: var(--site-hero-bg);
  border-bottom: 1px solid var(--site-hero-edge);
}

/* 面包屑。位于首屏带顶部、标题之前 —— 首项在前、当前页在末，
   视线顺序即浏览顺序，兼作「回到上一级」的入口。 */
.crumbs {
  margin-bottom: var(--space-8);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs__item {
  display: flex;
  align-items: center;
}

.crumbs__link,
.crumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-touch-target);
  font-size: var(--font-note);
}

.crumbs__link {
  color: var(--site-on-brand-muted);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.crumbs__link:hover {
  color: var(--brand-accent-light);
}

/* 当前页比上级更亮：面包屑要能看出「我在这」，而不是一律同一灰度 */
.crumbs__current {
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-brand);
}

.crumbs__sep {
  margin: 0 var(--space-5);
  font-size: var(--font-note);
  color: var(--site-on-brand-muted);
  opacity: 0.55;
}

/* 图文两栏：文字占 1fr，图占 0.85fr（略窄于文字，避免图抢标题）；
   无图时（--text 修饰类）退化为单栏并限宽，保持文字行长可读 */
.detail-band__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--space-32);
  align-items: center;
}

.detail-band__grid--text {
  grid-template-columns: minmax(0, 780px);
}

.detail-band__head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* 固定 3:2 取景框 + object-fit: cover：图片按原生比例入仓、不做破坏性裁切，
   取景重心由 image-sources.ts 的 objectPosition 逐张调整，改取景无需重新编码 */
.detail-band__figure {
  margin: 0;
}

.detail-band__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--card-radius);
  border: 1px solid var(--site-chip-border);
}

.detail-band__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--brand-accent-light);
  background: var(--site-chip-bg);
  border: 1px solid var(--site-chip-border);
  border-radius: var(--radius-xl);
}

.detail-band__title {
  margin: 0;
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--text-on-brand);
}

.detail-band__lead {
  max-width: 760px;
  margin: var(--space-8) 0 0;
  font-size: var(--font-heading-lead);
  line-height: var(--font-line-height-loose);
  color: var(--site-on-brand-muted);
}

.includes {
  display: grid;
  /* min(100%,280px)：auto-fit 的列下限用 300px 固定值时，视口内容宽
     一旦不足 300px（约 ≤332px 的手机），网格会横向溢出。min() 让下限
     永不超过可用宽度，列数随宽度自然增减。 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 var(--space-32);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.includes li {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) var(--space-10);
  font-size: var(--font-body);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}

.includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--status-success-fg);
  font-weight: var(--font-weight-bold);
}

/* ── 详情页正文：单一底色 + 细线分隔 ─────────────────── */

/* 此前正文五个区块交替全宽底色（透明 / 灰 / 透明 / 灰 / 透明），实测高度为
   284 / 714 / 309 / 274 / 269 —— 全宽色带的边界本身是一条条分区线，而各区块
   内容量差到 2.6 倍，于是节奏不齐、看起来像一排没对齐的色卡。
   底色是「区域」的强语义，只应留给真正的框架（首屏带、页脚）；正文内部
   改用 1px 细线 —— 细线权重恒定，不随内容多少变化，节奏自然齐。 */
.flow + .flow {
  border-top: 1px solid var(--border-subtle);
}

/* 详情页区块标题改左对齐，与正文（清单、时间轴、卡片网格）共用同一条起始线。
   居中的标题配左对齐的正文，两者看起来不属于同一块。
   首页是营销版式，仍保持居中。 */
.flow .section__title,
.flow .section__sub {
  text-align: left;
}

.flow .section__sub {
  max-width: 640px;
}

/* 收尾的 CTA 仍居中：行动号召居中更有收束感。
   必须写在上面两条之后 —— 同特异度下源码靠后者胜出。
   margin-inline: auto 是必需的一条：上面 .flow .section__sub 给了
   max-width: 640px 限制行宽，但盒子默认贴左，text-align: center 只在
   那个 640px 盒子内居中 —— 实测文字视觉中心偏左 250px（容器中心 713，
   文字中心 463）。限宽保留、把盒子本身居中，两个目的同时成立。 */
.detail-cta .section__title,
.detail-cta .section__sub {
  text-align: center;
}

/* ── 服务流程（时间轴）───────────────────────────────── */

/* 竖轴 + 串联节点，而非并列卡片网格：流程的本质是「有先后、要连起来」，
   一排并列卡片表达的是「几件并列的事」，语义不符，观感也像通用的功能罗列。
   单列布局在任意宽度下都成立，因此不需要断点 —— 这也是它比双列卡片更稳的地方。 */
.steps {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  /* 左列留给节点：节点 40px + 与正文间距 28px */
  padding: 0 0 var(--space-24) 68px;
}

/* 连接线：自本节点下缘画到条目底边，与下一条目的节点顶边相接，因此整条
   流程是连续的。末条不再画线，否则轴尾会拖出一截悬空短线。 */
.step::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 19px;
  width: 1px;
  background: var(--border-default);
}

.step:last-child {
  padding-bottom: 0;
}

.step:last-child::before {
  display: none;
}

/* 节点：底色走 surface-subtle —— 它同时与浅色页底（白）和深色页底
   （card-bg #12233a）都有差值，故节点圆在两种主题下都看得见。
   原先用 card-bg 是因为那时流程铺在灰色带上；现在正文已是单一底色，
   card-bg 在浅色下等于页底，圆就只剩一圈描边了。 */
.step__node {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: var(--font-family-code);
  font-size: var(--font-note);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}

/* 标题与频次同一行：频次靠右对齐，形成「环节 —— 节奏」的对照，
   扫读时一眼就能横向比较各步的频次，不必逐条读句子 */
.step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-5);
}

.step__title {
  margin: 0;
  /* 20px 而非 16px：16px 标题配 14px 说明只差 2px，层级看不出来；
     与 28px 的区块标题之间也需要一档过渡。走展示页的卡片标题档。 */
  font-size: var(--font-heading-card);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

/* 频次做成胶囊：它是客户最想知道、也最容易被含糊带过的信息，
   做成可扫读的标签而不是夹在句子里。
   文字走 text.tertiary 而非 text.secondary —— 胶囊底是 surface.subtle，
   text.secondary 在其上对比度不足 4.5:1（12px 属小字，门槛 4.5）。
   绿色语义也不放在文字上：实测绿色小字两个主题下都达不到 4.5。 */
.step__cadence {
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  background: var(--surface-subtle);
  border-radius: var(--radius-pill);
}

.step__desc {
  margin: 0;
  font-size: var(--font-body);
  line-height: var(--font-line-height-loose);
  color: var(--text-tertiary);
}

/* ── 专业边界 ─────────────────────────────────────────── */

/* 专业边界：四条并列陈述，不是四张卡片。
   原先每项都套一块 surface.subtle 底色方块 —— 这是页面上的第三种矩形，
   与上方的清单、下方「其他服务」的链接卡叠在一起，方框过多。
   改用金色左竖线：仍能成组，但不构成方框，页面少一层盒子。 */
.boundaries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16) var(--space-24);
}

.boundary {
  padding-left: var(--space-8);
  border-left: 2px solid var(--brand-accent);
}

.boundary__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-heading-h4);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.boundary__desc {
  margin: 0;
  font-size: var(--font-note);
  line-height: var(--font-line-height-loose);
  color: var(--text-secondary);
}

/* 「其他服务」共 7 项。此前用 minmax(220px,1fr)，1180px 下自动排 5 列 →
   5+2，最后一行只两张、明显缺角。固定 4 列得到 4+3，缺口最小。 */
.others {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.other {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  /* 触控目标下限：实测卡片高 42px，低于令牌要求的 44px */
  min-height: var(--layout-touch-target);
  padding: var(--space-8) var(--space-10);
  color: var(--text-primary);
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  transition: transform var(--motion-duration-base) var(--motion-easing-standard),
    box-shadow var(--motion-duration-base) var(--motion-easing-standard),
    border-color var(--motion-duration-base) var(--motion-easing-standard);
}

.other:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
}

.other__icon {
  display: flex;
  color: var(--brand-primary-alt);
}

.other__title {
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
}

.detail-cta {
  text-align: center;
}

/* margin-inline: auto 是必需的一条，不只 margin-bottom。
   上方 .flow .section__sub 给了 max-width: 640px 以限制行宽，但盒子默认贴左，
   text-align: center 只在那个 640px 盒子**内部**居中 —— 实测文字视觉中心
   偏左 250px（容器中心 713，文字中心 463）。限宽保留、把盒子本身也居中，
   两个目的才同时成立。 */
.detail-cta .section__sub {
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

/* ── 键盘可达性 ───────────────────────────────────────── */

/* 悬停反馈对键盘用户不可达，故单独给焦点环。
   使用 :focus-visible 而非 :focus —— 后者在鼠标点击时也会出现。 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 法律文本页 ───────────────────────────────────────── */

/* 两栏：目录侧栏 + 正文。文书有 5 章 18 条，没有目录只能靠滚动找条款。
   正文列限宽 760px —— 法律文本以长段落为主，行宽过大会显著降低可读性
   （中文最佳行宽约 30-40 字）。 */
.legal__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: var(--space-48);
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: calc(var(--site-header-height) + var(--space-16));
  padding: var(--space-10);
  background: var(--surface-subtle);
  border-radius: var(--card-radius);
}

.legal__toc-title {
  margin: 0 0 var(--space-8);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  color: var(--text-secondary);
}

.legal__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal__toc-list a {
  display: flex;
  align-items: center;
  min-height: var(--layout-touch-target);
  font-size: var(--font-note);
  line-height: var(--font-line-height-base);
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.legal__toc-list a:hover {
  color: var(--brand-primary-alt);
}

/* 元信息块：发布主体 / 版本号 / 生效日期 / 更新日期。
   法律文本必须能一眼看出「谁发的、哪一版、何时生效」——这是它能否被
   引用的前提，故放在标题正下方，而不是塞进正文首段。 */
.legal__meta {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: var(--space-6) var(--space-16);
  margin: var(--space-10) 0 0;
}

.legal__meta-item {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-note);
}

.legal__meta dt {
  color: var(--site-on-brand-muted);
}

.legal__meta dd {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-brand);
}

/* 章：带分隔线，与纸质法律文本的排版习惯一致 */
.legal__chapter + .legal__chapter,
.legal__chapter + .legal__contact {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--border-subtle);
}

.legal__heading {
  margin: 0 0 var(--space-10);
  font-size: var(--font-heading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.legal__clause + .legal__clause {
  margin-top: var(--space-12);
}

/* 条标题：条号单独一列、定宽左对齐，使 18 条的数号在竖直方向上对齐 ——
   法律文本常按条引用，数号对齐才便于定位 */
.legal__clause-title {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--font-heading-h4);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.legal__clause-no {
  color: var(--text-secondary);
}

.legal__para {
  margin: 0 0 var(--space-5);
  /* 15px + 行高 1.9：法律文本以长段落为主，14px 读起来偏挤 */
  font-size: var(--font-heading-h4);
  line-height: 1.9;
  color: var(--text-tertiary);
}

.legal__para:last-child {
  margin-bottom: 0;
}

/* 导言与条款正文区分开：稍大字号 + 主文字色 */
.legal__para--lead {
  font-size: var(--font-body);
  color: var(--text-primary);
}

.legal__contact {
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--border-subtle);
}

.legal__contact-value {
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

/* ── 页脚法律链接 ─────────────────────────────────────── */

.footer__links {
  margin: 0 0 var(--space-8);
}

.footer__links a {
  font-size: var(--font-note);
  color: var(--site-on-brand-muted);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}

.footer__links a:hover {
  color: var(--brand-accent-light);
}

.footer__sep {
  margin: 0 var(--space-6);
  color: var(--site-on-brand-muted);
}

/* ── 多端自适应 ───────────────────────────────────────── */

/* 断点一律**按宽度降序**排列。
   原因：多个 max-width 同时命中时，同优先级下源码靠后的规则胜出。
   降序可保证「窄屏规则永远晚于宽屏规则」，这是最后生效的那一层。
   此前 768 块写在 1100 块之前，实测导致 390px 下 .boundaries 被 1100 块的
   2 列覆盖（每张卡不到 170px）—— 这类 bug 不报错、只在窄屏难看。

   档位划分依据实际容器宽度（.page 最大 1180px，两侧留白 20px）：
   4 列每卡 ≈ (1180-3×24)/4 = 277px，是服务卡的舒适宽度上界；
   3 列在 900px 以下每卡不足 260px，故 900 处降 2 列；
   2 列在 620px 以下每卡不足 280px，故 640 处降 1 列。 */

@media (max-width: 1100px) {
  /* 4 列在 1100px 以下每卡不足 250px，改为 2 列：
     8 张卡恰好 4+4 整除。此前降 3 列会排出 3+3+2，尾行右侧缺一块。 */
  .services {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 其余 6 项服务同步 2 列（7 项 = 4 行末卡通栏补齐，见下方 span 规则） */
  .others {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 7 项的尾行只剩 1 张卡，让它横跨两列补齐空洞，而不是右边留白 */
  .others > :last-child {
    grid-column: 1 / -1;
  }

  .boundaries {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .services {
    grid-template-columns: repeat(2, 1fr);
  }

  .others {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 平板竖屏（641-900）首屏降档：56px 的 display 档在这一区间会把
     「体检有人管 · 看病有通道 · 慢病有人跟」折成「……慢病有人 / 跟」，
     单字吊行。降到 section 档（40px）后三段两行收齐，不再出吊字；
     字距同步归零（负字距是大字号的补偿，小字号下反而发闷）。 */
  .hero__title {
    font-size: var(--font-heading-section);
    letter-spacing: 0;
  }

  .hero__sub {
    font-size: var(--font-size-xl);
  }

  /* 平板竖屏（641-900）等级卡显式单列居中：auto-fit minmax(280px) 在这一
     区间落 2 列，3 张卡排成 2+1，尾行右侧缺一块；且 640-626 恰好压在
     280×2+32 的临界值（592=592）上，宽度微调就会在 1/2 列之间跳。
     单列 + 480px 上限居中 —— 定价卡单列比 2+1 更符合「留白即奢华」。 */
  .tiers {
    grid-template-columns: min(100%, 480px);
    justify-content: center;
  }

  /* 平板竖屏（768-900）首屏图文改上下排列：两栏时图只剩 330px 宽，
     与文字列并排会显得局促 */
  .detail-band__grid {
    grid-template-columns: 1fr;
  }

  /* 法律文本的目录侧栏折到正文上方并取消吸顶 */
  .legal__layout {
    grid-template-columns: 1fr;
  }

  .legal__toc {
    position: static;
  }

  /* 元信息平板档就改 2×2：四列 auto 在 641-900 的深蓝横幅里每列只剩
     90-150px，「生效日期 2026-09-10」会折行错位（640 档已有同规则） */
  .legal__meta {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 640px) {
  /* 顶栏收成两行：品牌与主题按钮一行，导航独占第二行居中。
     刻意不隐藏导航（原型在窄屏是 display:none）—— 隐藏后锚点导航就没了，
     而这个站点没有汉堡菜单。
     三项必须显式指定 grid-row / grid-column：只写 grid-column: 1/-1 时，
     自动排布会把主题按钮顺延到第 3 行（实测 grid-template-rows 为
     44px 44px 44px，顶栏高达 142px）。显式定位后是规整的两行。 */
  .header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-5);
  }

  .header__brand {
    grid-row: 1;
    grid-column: 1;
    /* 徽章 + 站名在 390px 上超出栏宽会把「部」字挤到第二行：
       窄屏收小徽章与字号、禁折行，一行装下「徽章 + 七字站名」。 */
    gap: var(--space-6);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-xl);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* 320-360px 时品牌名允许收成省略号，优先保住右侧「登录」与两个工具按钮：
     此前品牌是不可收缩的 nowrap，网格把 actions 顶出视口，登录被挤成竖排。 */
  .header__brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header__brand-mark {
    height: 34px;
  }

  .header__actions {
    grid-row: 1;
    grid-column: 2;
  }

  /* 导航独占第二行居中。
     导航链接此前只有 28px 宽（2 字 × 14px）、间距 10px，三个链接挤成一小撮，
     是「导航看起来错位 / 不美观」的直接原因。现给到 44px 见方的触控目标
     （宽高都达到令牌下限）并把间距拉到 12px，三链接成为一组规整的居中按钮。 */
  .header__nav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
    gap: var(--space-12);
  }

  /* 手机不吸顶：两行顶栏约 103px，吸顶会长期占用视口 11%。
     窄屏下用户本就在纵向滚动，不需要常驻导航。 */
  .header {
    position: static;
  }

  .header__nav a {
    justify-content: center;
    min-width: var(--layout-touch-target);
  }

  /* 顶栏不再吸顶，锚点跳转就不需要为它留出偏移 */
  section[id] {
    scroll-margin-top: var(--space-8);
  }

  /* 手机两侧留白收窄一档：20px 在 390px 屏上会挤掉内容宽度的 10% */
  .page {
    padding-inline: var(--space-16);
  }

  /* 手机首屏撑满一屏。此前改成了内容撑高（实测 379px，仅占 844px 视口的
     45%），结果是一条扁带、没有首屏该有的分量。
     这里不减顶栏高度：手机上顶栏不吸顶、随页面一起滚走，滚过之后首屏
     占满整屏才对；减去顶栏会少 72px（且令牌是 72px、手机顶栏实际 103px，
     减它本身也不准）。 */
  .hero {
    min-height: 100svh;
    padding: var(--space-48) 0;
  }

  /* 主标题走移动端 Hero 档（heading.hero = 28px，约占屏宽 7.2%）。
     此前是 20px —— 只比 16px 的按钮大 4px，首屏没有视觉重心。 */
  .hero__title {
    font-size: var(--font-heading-hero);
    letter-spacing: 0;
  }

  .hero__sub {
    font-size: var(--font-heading-h4);
  }

  /* 六个标签在手机上占两行、约 72px，而其内容与下方「服务」区块重复
     （绿通协助 / 康养旅居 / 圈层社交等都是服务项本身），
     在首屏只是噪音，故在手机档位隐藏。 */
  .hero__tags {
    display: none;
  }

  /* CTA 改整行：手机上居中一个小按钮不如整行按钮好点，视觉也更稳 */
  .hero .cta {
    display: block;
    text-align: center;
  }

  .section {
    padding: var(--space-32) 0;
  }

  .section__title {
    font-size: var(--font-heading-h1);
  }

  .services,
  .tiers {
    gap: var(--space-16);
  }

  /* 对比表在手机上不横滑，靠收字号与内边距放下：
     390px 屏（两侧留白 16px）内容宽 358px，首列 26% ≈ 93px、三档各 ≈ 88px。
     11px 字号下「42 项 · 含肿瘤早筛」折两行、最长的「专家对接 · 季度院士分享」
     折三行 —— 都读得完，且同一行的三档始终同屏可比。
     内边距由 8px 收到 5px：四列共省下 24px，正好抵掉折行带来的高度增量。 */
  .compare__table {
    font-size: var(--font-caption);
    /* 四列同屏才叫「对比」：此前 min-width:560px 在 390px 上只露出两列半，
       右侧被裁、需要横滑。改为 100% 定宽 + 四列等分，文字折行但整行始终可比；
       特大字号档仍可能溢出，外层 overflow-x:auto 作为兜底。 */
    min-width: 0;
    width: 100%;
  }

  .compare__table thead th,
  .compare__table tbody th,
  .compare__table tbody td {
    padding: var(--space-6);
  }

  .compare__dim {
    width: 26%;
  }

  .services {
    grid-template-columns: 1fr;
  }

  /* 其他服务在手机上改单列全宽：两列时每张不足 170px，
     图标加标题挤成一团 */
  .others {
    grid-template-columns: 1fr;
  }

  .boundaries {
    grid-template-columns: 1fr;
  }

  /* 元信息在手机上改 2×2：4 列时每列仅约 60-80px，值会折成两行 */
  .legal__meta {
    grid-template-columns: repeat(2, auto);
  }

  .detail-band__title {
    font-size: var(--font-heading-section);
  }

  /* 对比表横向滚动暗示：小屏上第四列（钻石卡）会被裁出视口，
     右缘一道渐入页底色的 fade 提示「还有内容」；滑到尽头后由脚本
     挂上 .is-end 使其隐去。fade 取页底色令牌，深浅主题自动跟随。 */
  .compare {
    position: relative;
  }

  .compare::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--space-16);
    background: linear-gradient(90deg, transparent, var(--surface-page));
    pointer-events: none;
    transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
  }

  .compare.is-end::after {
    opacity: 0;
  }

  /* 预约表单手机档：四控件竖排全宽 —— flex-wrap 下 140px 弹性基线会让
     「会员咨询」和「称呼」挤同一行、「意向等级」170px 定宽孤零零；
     统一整行更符合单手填单的节奏。提交按钮同宽，主行动更大更好按。 */
  .lead-form {
    padding: var(--space-16);
  }

  .lead-form__row {
    flex-direction: column;
  }

  .lead-form__row .lead-form__input,
  .lead-form__row .lead-form__select {
    flex: 1 1 auto;
    width: 100%;
  }

  .lead-form__btn {
    width: 100%;
  }

  /* 眉线金线随视口收窄：56px 定宽在 390px 上与 12 字引子抢宽度 */
  .hero__eyebrow::before,
  .hero__eyebrow::after {
    width: 28px;
  }
}

/* ── 手机横屏 / 矮视口 ─────────────────────────────────
   高度 ≤500px 的横屏（如 844×390）下，hero 的 100svh 会占满整个首屏，
   金色 CTA 被裁掉一半 —— 主行动按钮不可见是不可接受的。改为内容撑高、
   自然滚动；必须放在 640 档之后，优先级才能盖过它的 100svh。 */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: var(--space-32) 0;
  }
}

/* ── 大桌面 ───────────────────────────────────────────
   ≥1600px 时 1180 容器两侧留白超过 210px，44px 的 display 档在整块
   藏青画布上分量偏轻。升 16px（令牌值 + 步长）找回视觉重心。 */
@media (min-width: 1600px) {
  .hero__title {
    /* 3vw 随视口走：1920 约 58px。3.2vw 时整行需 975px、距 1000 上限只剩
       25px —— 字号「特大」档的字距补偿一加就折行（已踩坑）；3vw 留出
       60px 余量。max() 保证任何字号档位下都不低于 display 档。 */
    font-size: max(var(--font-heading-display), 3vw);
    max-width: 1000px;
  }
}

/* ── 打印 ─────────────────────────────────────────────── */

/* 法律文本会被打印或另存 PDF 存档，故需剥掉界面元素并转为纯黑白。
   用 print.ink / print.paper 两个语义令牌而非直接写原语 —— 打印必须与
   屏幕主题无关：深色主题下 text.primary 是浅灰，直接打印就是白纸印浅字。
   条款不分页：一条被拦腰截断会让文档难以引用。 */
@media print {
  .header,
  .footer,
  .crumbs,
  .legal__toc,
  .detail-cta {
    display: none;
  }

  body {
    color: var(--print-ink);
    background: var(--print-paper);
  }

  .detail-band {
    padding: 0 0 var(--space-16);
    color: var(--print-ink);
    background: none;
    border-bottom: 1px solid var(--print-ink);
  }

  .detail-band__title,
  .detail-band__lead,
  .legal__title,
  .legal__heading,
  .legal__clause-title,
  .legal__para,
  .legal__meta dt,
  .legal__meta dd {
    color: var(--print-ink);
  }

  .legal__section,
  .legal__clause {
    break-inside: avoid;
  }
}

/* ── 动效降级 ─────────────────────────────────────────── */

/* 前庭功能敏感用户（prefers-reduced-motion）看过渡动画会头晕。
   全站统一压到近零而非彻底移除：保留状态切换的瞬时反馈，去掉位移过程。
   transition-property 不动 —— 只把时长压掉，避免残留半截状态。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── 城市合伙人 · 加盟合作（2026-09-20 新增板块）──
   三列（招募对象 / 总部支持 / 合作模式），窄屏收单列；
   CTA 锚到 #contact 表单并把咨询类型预置为加盟合作。 */
.franchise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-20);
}

.franchise__h {
  margin: 0 0 var(--space-8);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.franchise__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-8);
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.franchise__list li {
  position: relative;
  padding-left: var(--space-12);
}

.franchise__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-accent-light);
}

.franchise__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-20);
}

.franchise__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-touch-target);
  padding: 0 var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: var(--text-on-brand);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: filter var(--motion-duration-fast) var(--motion-easing-standard);
}

.franchise__btn:hover {
  filter: brightness(1.08);
}

.franchise__tip {
  font-size: var(--font-caption);
  color: var(--text-tertiary);
}

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

/* ── 服务总览页 ─────────────────────────────────────────── */
.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

.highlight-tag {
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-note);
  font-weight: var(--font-weight-medium);
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-10);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-2px);
}

.service-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.service-card__no {
  font-size: var(--font-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--decor-tracking-eyebrow);
  color: var(--brand-primary-alt);
  opacity: 0.5;
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
}

.service-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-heading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.service-card__desc {
  margin: 0 0 var(--space-6);
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--font-line-height-loose);
}

.service-card__includes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  margin-bottom: var(--space-6);
}

.service-card__tag {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-caption);
  color: var(--text-tertiary);
  background: var(--surface-subtle);
  border-radius: var(--radius-sm);
}

.service-card__more {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-caption);
  color: var(--brand-primary-alt);
  font-weight: var(--font-weight-medium);
}

.service-card__cta {
  font-size: var(--font-note);
  font-weight: var(--font-weight-medium);
  color: var(--brand-primary-alt);
}

/* ── 会员详情页 ─────────────────────────────────────────── */
.tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-16);
}

.tier-card {
  --metal-bg: var(--card-bg);
  --metal-ring: var(--card-border);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--metal-ring);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.tier-card__band {
  padding: var(--space-20);
  border-bottom: 1px solid var(--border-subtle);
}

/* stylelint-disable function-disallowed-list -- 金属带顶部晕光是三种金属各自的一次性
   15% 叠加，不是可复用的语义色；令牌层没有对应档位，写死比新增三套近似令牌更可控 */
.metal-gold .tier-card__band {
  background: linear-gradient(180deg, rgba(232, 213, 172, 0.15), transparent);
}

.metal-platinum .tier-card__band {
  background: linear-gradient(180deg, rgba(219, 226, 234, 0.15), transparent);
}

.metal-diamond .tier-card__band {
  background: linear-gradient(180deg, rgba(207, 227, 247, 0.15), transparent);
}
/* stylelint-enable function-disallowed-list */

.tier-card__en {
  margin: 0 0 var(--space-3);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--decor-tracking-eyebrow);
  color: var(--text-secondary);
}

.tier-card__name {
  margin: 0;
  font-size: var(--font-heading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.tier-card__tagline {
  margin: var(--space-2) 0 0;
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.tier-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-12) var(--space-20);
  color: var(--brand-primary-alt);
}

.tier-card__currency {
  font-size: var(--font-heading-h3);
}

.tier-card__amount {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--decor-tracking-numeral);
  font-variant-numeric: tabular-nums;
}

.tier-card__unit {
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.tier-card__quota {
  padding: 0 var(--space-20);
  font-size: var(--font-note);
  color: var(--text-secondary);
}

.tier-card__benefits {
  margin: var(--space-8) 0 0;
  padding: var(--space-8) var(--space-20) var(--space-12);
  list-style: none;
}

.tier-card__benefits li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-10);
  font-size: var(--font-note);
  color: var(--text-tertiary);
}

.tier-card__benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--status-success-fg);
  font-weight: var(--font-weight-bold);
}

.source-note {
  margin-top: var(--space-12);
  font-size: var(--font-caption);
  color: var(--text-secondary);
  text-align: center;
}

.services-grid-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.service-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.service-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
}

.service-item__text {
  flex: 1;
}

.service-item__label {
  margin: 0;
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary-alt);
}

.service-item__desc {
  margin: var(--space-1) 0 0;
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

/* ── 加盟页 ─────────────────────────────────────────── */
.feature-grid,
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.feature-card,
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}

.feature-card__icon,
.partner-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border-radius: var(--radius-lg);
}

.feature-card__title,
.partner-card__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-heading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.feature-card__desc,
.partner-card__desc {
  margin: 0;
  font-size: var(--font-body);
  color: var(--text-secondary);
  line-height: var(--font-line-height-loose);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.support-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

.support-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
}

.support-card__text {
  flex: 1;
}

.support-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary-alt);
}

.support-card__desc {
  margin: 0;
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

.cities-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-12);
}

.city-tag {
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary-alt);
  background: var(--surface-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}

.cities-note {
  margin-top: var(--space-6);
  font-size: var(--font-note);
  color: var(--text-secondary);
  text-align: center;
}

/* 加盟页「合作流程」是 4 列卡片网格；.steps / .step 这两个类名与上面
   详情页的竖向时间轴（1330 起）同名 —— 不加限定符会互相污染：网格规则
   把 8 张详情页的时间轴排成 4 列、时间轴的 ::before 竖向连接线与
   760px 定宽漏进加盟卡片（实测前三张卡各有一根竖线）。
   整组挂 .body-navy 限定到三张深蓝二级页，详情页时间轴不受影响。 */
.body-navy .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-16);
  max-width: none;
}

.body-navy .step {
  position: relative;
  padding: var(--space-8);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}

/* 时间轴的 .step::before 连接线（::after 节点位）不进卡片 */
.body-navy .step::before,
.body-navy .step::after {
  content: none;
}

.body-navy .step__no {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--font-heading-h2);
  font-weight: var(--font-weight-extrabold);
  color: var(--brand-primary-alt);
  opacity: 0.3;
}

.body-navy .step__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-body);
  font-weight: var(--font-weight-bold);
  color: var(--brand-primary-alt);
}

.body-navy .step__desc {
  margin: 0;
  font-size: var(--font-caption);
  color: var(--text-secondary);
  line-height: var(--font-line-height-loose);
}

@media (max-width: 900px) {
  .services-grid,
  .tiers-grid,
  .feature-grid,
  .partner-grid,
  .support-grid,
  .body-navy .steps {
    grid-template-columns: 1fr;
  }
}

/* ═══ 商务风改版（2026-09-29）══════════════════════════
   改版原则（与既有决策兼容，逐条可回溯）：
   · 不编造数字 —— 信任来自「口径统一 + 流程透明」，不来自口号与统计；
     新增区块的每一句文案都能在站内既有内容里找到出处。
   · 不给等级卡设「推荐」角标（此前已明确取消主推档抬升，不回潮）。
   · 全部走设计令牌，无一处硬编码色；深浅色随主题。
   · 新交互只用原生元素（details/summary）—— 站点仍是零客户端 bundle，
     交互全在 entry-server 的内联脚本里（预约表单的选择器契约未动）。
   新增：区块引子 / 次级描边按钮 / 服务承诺条 / 常见问题 / 联系两栏 /
   结构化页脚 / 页头预约钮。 */

/* ── 区块引子（商务版式节奏：引子 → 标题 → 副题）────────
   与首屏金色引子同一套排版语言（小号、大字距、金），但不带两侧消隐线
   —— 徽章式排印在首屏出现一次是仪式感，在内容区重复十次就成了花边。
   颜色用 text.goldStrong：白底小号金字唯一过 4.5:1 的档（与 .service__no
   同一取值、同一理由）。 */
.kicker {
  margin: 0 0 var(--space-8);
  font-size: var(--font-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--decor-tracking-eyebrow);
  color: var(--text-gold-strong);
  text-align: center;
}

/* ── 次级描边按钮（.cta--ghost）────────────────────────
   主金钮旁边的次动作：不抢金属面高光，也不退化成纯文字链接。
   与 .cta 同高（继承同款 padding），并排时主次分明、基线一致。
   浅色页底上描边深蓝；深蓝横幅（.hero 上下文）描边白 —— 用上下文
   覆盖而不另起类名，调用处写 `class="cta cta--ghost"` 即可。
   必须置于 .cta 之后：同特异度靠源顺序覆盖金色底。 */
.cta--ghost {
  color: var(--brand-primary-alt);
  background: none;
  border: 1px solid var(--border-strong);
}

.cta--ghost:hover {
  background: var(--surface-subtle);
}

.hero .cta--ghost {
  color: var(--text-on-brand);
  border-color: var(--site-chip-border);
}

.hero .cta--ghost:hover {
  background: var(--site-chip-bg);
  filter: none;
}

/* 按钮排（主 + 次并排）：居中、可折行 —— 手机上主钮在前、次钮换行，
   转化优先级不因折行改变。 */
.cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.hero__cta {
  margin-top: var(--space-4);
}

/* ── 服务承诺条（hero 之下的信任条）────────────────────
   商务站的信任条贵在「句句可兑现」：四项全部是站内既有口径的浓缩
   （服务板块 01 的绿通与陪诊 / 1 对 25 配比的管理师 / 首页价格口径
   声明原文 / 后台可见性矩阵的分级隐私），不新增无法兑现的承诺。
   细底色带 + 发丝线下缘：安静地垫在深蓝 hero 与白色内容之间。 */
.promise {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}

.promise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  margin: 0;
  padding: var(--space-20) 0;
  list-style: none;
}

.promise__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
}

.promise__icon {
  flex: 0 0 auto;
  margin-top: var(--space-1);
  color: var(--brand-primary-alt);
}

.promise__label {
  display: block;
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.promise__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-caption);
  color: var(--text-secondary);
}

/* ── 常见问题（已移除）──────────────────────────────────
   2026-09-29 业务方要求移除「你可能想了解」区：售前问答改由健康管理
   师话术承载，页面保持「服务 → 价格 → 对照 → 流程 → 联系」一条线。
   对应的 .faq__* 样式已随之删除。 */

/* ── 联系区两栏（信息卡 + 预约表单）────────────────────
   此前电话与城市居中堆叠、表单孤零零跟在后面。商务版式把「机构信息」
   与「行动入口」左右并置：左卡左排（信息区居中是贺卡语言，不是商务
   语言），右列表单。表单的选择器契约（.lead-form / #lead-* /
   .lead-form__btn / .lead-form__err）原样保留 —— 内联脚本按这些
   选择器接管提交，改版不碰行为。 */
.contact-split {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: var(--space-24);
  align-items: start;
  margin-top: var(--space-24);
  text-align: left;
}

/* 获客开关关闭时的弹性形态（内联脚本摘掉表单后给容器打标记）：
   切单列、信息卡限宽居中 —— 右侧不再留一块空白（2026-09-29 业务方）。 */
.contact-split--formless {
  grid-template-columns: 1fr;
}

.contact-split--formless .contact-card {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.contact-card {
  padding: var(--space-24);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.contact-card__row + .contact-card__row {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.contact-card__label {
  display: block;
  font-size: var(--font-caption);
  letter-spacing: var(--decor-tracking-brand);
  color: var(--text-tertiary);
}

.contact-card__value {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-heading-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.contact-card__value--phone {
  color: var(--brand-primary-alt);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--decor-tracking-numeral);
}

.contact-split .lead-form {
  max-width: none;
  margin: 0;
}

/* ── 页脚（版权信息区，2026-09-29 业务方：精简为仅版权 + 居中）──
   曾做过四栏结构化页脚，业务方复核后要求收回：版权、免责与法务链接
   居中堆叠，右侧的定价口径与构建时间换行到第二行 —— 依旧保留，它是
   「官网价格与后台一致」的锚。 */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: 0;
  /* 只给纵向内边距：padding 简写会把 .page 的左右留白清零，
     页脚声明与版权行会贴到屏幕边缘（实测 390px 下字被裁）。 */
  padding-block: var(--space-16) var(--space-8);
  border-top: none;
  text-align: center;
}

.footer__bottom p {
  margin: 0;
  color: var(--site-on-brand-muted);
}

/* 服务边界声明（2026-10-23 业务方）：页脚固定展示，不随页面内容变化。
   单独给最大宽度与行高，长句在窄屏也能读；不抢版权行的位置。 */
.footer__bottom .footer__boundary {
  max-width: 880px;
  margin: 0 auto var(--space-4);
  line-height: 1.65;
  text-wrap: pretty;
}

.footer__bottom a {
  color: var(--brand-shade-pale);
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--brand-accent-light);
}

/* ── 页头预约钮（每个页面顶栏的常驻转化入口）───────────
   金底墨字与 .cta 同一金属材质，尺寸收到页头比例；窄屏隐藏 —— 手机
   顶栏已有两行导航，转化入口由 hero 与页尾 CTA 带承担。挂
   data-lead-entry：运营关闭门户入口时整钮被内联脚本摘除（与全站
   同一语义，见 App.vue 顶部说明）。 */
.header__cta {
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-body);
  font-weight: var(--font-weight-semibold);
  color: var(--decor-metal-ink);
  background: var(--decor-gold-metal-fill);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--motion-duration-fast) var(--motion-easing-standard);
}

.header__cta:hover {
  filter: brightness(1.06);
}

/* ── 商务版式 · 多端自适应 ─────────────────────────────
   与文件头部「多端自适应」大段分开：新增组件的断点就近放在一起，
   改一处组件不必跨两千行找对应规则。 */
@media (max-width: 960px) {
  .header__cta {
    display: none;
  }

  .promise__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .promise__grid {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  /* 手机窄屏：标题/副题按可用宽度重新平衡，避免「慢病有人跟」单独吊在
     第二行、或「紧急就医」被拆成「紧急就 / 医」。 */
  .hero__title {
    text-wrap: balance;
  }

  .hero__title-line {
    display: block;
  }

  .hero__sub,
  .section__sub,
  .detail-band__lead {
    text-wrap: pretty;
  }

  .contact-split {
    grid-template-columns: 1fr;
  }
}