@charset "UTF-8";
/* ============================================================================
   main.css · 全站唯一样式文件
   ----------------------------------------------------------------------------
   来源：docs/03-design/design-spec.md v1.0（视觉）+ docs/01-spec/site-spec.md §9.3（命名）
   规矩：
     1. 第 0 节令牌区之外，不写任何裸色值（#hex / rgb() / rgba()）。
     2. 组件里的颜色 / 间距 / 字号一律走 var(--*)。尺寸类（宽高）允许写 px，
        重复出现的已提为令牌。
     3. 响应式断点只有三档，全站统一：
          @media (max-width:767px)                     移动
          @media (min-width:768px) and (max-width:1199px) 平板
          @media (min-width:1200px)                    桌面
        不许出现第四个断点。
     4. 命名：l- 布局 / c- 组件 / __ 元素 / -- 修饰 / is- has- 状态 / u- 工具 / js- 钩子。
     5. js- 类只给 JS 选元素，本文件不为任何 .js-* 写样式。
   目录：
     0.  设计令牌（原样复制 design-spec §2.1）+ 补充令牌 + 三城变量
     1.  Reset 与排版基线
     2.  布局原子
     3.  组件（顺序同 design-spec §5）
     4.  工具类
     5.  状态类汇总
     6.  无障碍（焦点 / 减少动效）
   ========================================================================== */

/* ============================================================================
   0. 设计令牌
   来源：docs/03-design/design-spec.md v1.0 ｜ 请勿在组件中写魔法值
   ========================================================================== */

:root{
  /* ---------- 1. 中性色阶（暖灰，模拟印刷纸；不是蓝灰） ---------- */
  --color-ink-900:#1A1917;   /* 标题 / 最深文字 */
  --color-ink-800:#2E2C28;   /* 正文 */
  --color-ink-700:#4A4741;   /* 次级正文、页脚浅字 */
  --color-ink-600:#635F57;   /* 次要文字、说明 */
  --color-ink-500:#6E695E;   /* 占位、辅助小字（仍达 5.46:1） */
  --color-ink-400:#A8A399;   /* 仅装饰（图标底、禁用描边），禁止用于正文 */
  --color-ink-300:#CFCBC2;   /* 分割线、装饰边框 */
  --color-ink-200:#E3E0D9;   /* 卡片边框、表格线 */
  --color-ink-100:#F1EFEA;   /* 浅色底块、表头 */
  --color-ink-50:#F8F7F4;    /* 页面底色 */
  --color-white:#FFFFFF;

  /* ---------- 2. 语义化的中性别名（组件只用这层，不直接用 ink-*） ---------- */
  --color-bg:var(--color-ink-50);
  --color-surface:var(--color-white);
  --color-surface-subtle:var(--color-ink-100);
  --color-border:var(--color-ink-200);
  --color-border-strong:#8C8778;              /* 控件边框：对白 3.59:1，满足非文本 3:1 */
  --color-text:var(--color-ink-900);
  --color-text-body:var(--color-ink-800);
  --color-text-muted:var(--color-ink-600);
  --color-text-faint:var(--color-ink-500);
  --color-text-placeholder:var(--color-ink-500);
  --color-text-disabled:#7C776C;

  /* ---------- 3. 品牌色：深松绿 ---------- */
  --color-brand-800:#072B26;
  --color-brand-700:#0A3D36;
  --color-brand-600:#0E4F46;                  /* 主色 */
  --color-brand-500:#17685C;
  --color-brand-100:#CFE3DE;
  --color-brand-50:#E7F0ED;

  --color-brand:var(--color-brand-600);
  --color-brand-hover:var(--color-brand-700);
  --color-brand-active:var(--color-brand-800);
  --color-brand-subtle:var(--color-brand-50);
  --color-brand-border:var(--color-brand-100);
  --color-on-brand:#FFFFFF;
  --color-link:var(--color-brand-600);
  --color-link-hover:var(--color-brand-700);

  /* 首屏与图片降级用的两段渐变（深色面） */
  --gradient-hero:linear-gradient(152deg,#0A3D36 0%,#0E4F46 52%,#166B5A 100%);
  --gradient-media:radial-gradient(120% 120% at 82% 18%,rgba(207,227,222,.20) 0%,rgba(207,227,222,0) 58%),
                   linear-gradient(152deg,#0A3D36 0%,#0E4F46 100%);

  /* ---------- 4. 三个卖点识别色（只用于标签与图标，永不用于按钮） ---------- */
  --color-pillar-comply:#27567D;              /* 合规：石板蓝 */
  --color-pillar-comply-subtle:#E7EEF5;
  --color-pillar-stable:#7A5A22;              /* 稳定：古铜赭 */
  --color-pillar-stable-subtle:#F5EDDD;
  --color-pillar-safe:#166B5A;                /* 安全：深青 */
  --color-pillar-safe-subtle:#E4F1EE;

  /* ---------- 5. 语义色 ---------- */
  --color-success:#2C6B33;
  --color-success-subtle:#E8F2E6;
  --color-warning:#8A5B0F;
  --color-warning-subtle:#FAF0DC;
  --color-danger:#A32A22;                     /* 暗砖红：警示，不是喜庆红 */
  --color-danger-subtle:#FBEAE7;
  --color-info:#27567D;                       /* 复用合规蓝，全站只有一种"条款蓝" */
  --color-info-subtle:#E7EEF5;

  /* ---------- 6. 深色面（首屏 / 页脚 / 深色区块）上的文字 ---------- */
  --color-on-dark:#FFFFFF;
  --color-on-dark-lead:#DCE6E2;
  --color-on-dark-muted:#C7C2B8;
  --color-on-dark-faint:#9A958B;
  --color-on-dark-border:rgba(255,255,255,.14);
  --color-on-dark-fill:rgba(255,255,255,.10);

  /* ---------- 7. 字体栈（中文优先，不引外部字体文件） ---------- */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
              "Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
              "Noto Sans CJK SC",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  /* ---------- 8. 字号阶梯（桌面值；平板/移动在下方覆盖） ---------- */
  --font-size-caption:13px;
  --font-size-sm:14px;
  --font-size-base:16px;
  --font-size-md:18px;
  --font-size-lg:20px;
  --font-size-xl:24px;
  --font-size-2xl:28px;
  --font-size-3xl:36px;
  --font-size-4xl:48px;
  --font-size-5xl:56px;   /* 仅 404 大字 */

  /* ---------- 9. 行高 / 字重 / 字距 ---------- */
  --line-height-none:1;
  --line-height-tight:1.2;
  --line-height-snug:1.35;
  --line-height-normal:1.6;
  --line-height-relaxed:1.75;
  --line-height-loose:1.9;

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  --letter-spacing-tight:-0.01em;
  --letter-spacing-normal:0;
  --letter-spacing-wide:0.02em;
  --letter-spacing-caps:0.06em;   /* 仅拉丁小标签 */

  /* ---------- 10. 间距（4px 基准） ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --space-13:128px;

  /* ---------- 11. 圆角（克制：卡片 8，按钮/输入框 4） ---------- */
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;

  /* ---------- 12. 阴影（暖色投影，三档，B2B 不许大投影） ---------- */
  --shadow-1:0 1px 2px rgba(26,25,23,.05);
  --shadow-2:0 2px 6px rgba(26,25,23,.07),0 1px 2px rgba(26,25,23,.05);
  --shadow-3:0 10px 24px rgba(26,25,23,.10),0 2px 6px rgba(26,25,23,.05);

  /* ---------- 13. 布局 ---------- */
  --container-max:1200px;
  --container-narrow:760px;       /* 长文阅读宽度 */
  --container-pad:24px;
  --grid-cols:12;
  --grid-gutter:24px;
  --header-h:72px;
  --section-space:96px;           /* 区块上下内距 */
  --section-space-sm:64px;        /* 相邻紧凑区块 */
  --block-gap:32px;               /* 区块内标题与内容之间 */
  --mobile-bar-h:56px;
  --btn-h:48px;
  --btn-h-lg:56px;
  --btn-h-sm:36px;
  --input-h:48px;
  --touch-min:44px;

  /* ---------- 14. 过渡 ---------- */
  --transition-fast:120ms ease-out;
  --transition-base:180ms ease-out;
  --transition-slow:280ms cubic-bezier(.2,.7,.3,1);

  /* ---------- 15. 焦点环 ---------- */
  --focus-ring-color:var(--color-brand-600);
  --focus-ring-width:2px;
  --focus-ring-offset:2px;

  /* ---------- 16. 层叠 ---------- */
  --z-header:100;
  --z-dropdown:200;
  --z-overlay:300;
  --z-modal:400;
  --z-mobile-bar:250;
}

/* 平板：768–1199 */
@media (min-width:768px) and (max-width:1199px){
  :root{
    --font-size-4xl:38px;
    --font-size-3xl:30px;
    --font-size-2xl:24px;
    --font-size-xl:22px;
    --font-size-lg:19px;
    --header-h:64px;
    --section-space:80px;
    --section-space-sm:56px;
    --grid-gutter:20px;
    --container-pad:24px;
  }
}

/* 移动：<768 */
@media (max-width:767px){
  :root{
    --font-size-5xl:48px;
    --font-size-4xl:30px;
    --font-size-3xl:26px;
    --font-size-2xl:22px;
    --font-size-xl:20px;
    --font-size-lg:18px;
    --font-size-md:17px;
    --header-h:56px;
    --section-space:56px;
    --section-space-sm:40px;
    --block-gap:24px;
    --grid-gutter:16px;
    --container-pad:20px;
  }
}

/* ============================================================================
   0.2 补充令牌
   ----------------------------------------------------------------------------
   design-spec 的组件规格里出现了几个"令牌区没有、但组件必须用"的值：
   上半部分是 4px 基准之外的间距微调（6 / 10 / 14 / 18 / 28px），
   下半部分是规格里以 rgba() 形式写死的中性色（半透明遮罩、深色面边框）。
   一律提为令牌，保证组件里不出现裸色值 / 魔法间距。
   ========================================================================== */

:root{
  /* 间距微调（不改变 4px 基准，只补齐规格里已明确的值） */
  --space-0-5:2px;
  --space-1-5:6px;
  --space-2-5:10px;
  --space-3-5:14px;
  --space-4-5:18px;
  --space-6-5:28px;

  /* 字号补充（规格里固定写死、不在主阶梯上的三档） */
  --font-size-2xs:12px;      /* pill 标签、页脚底条 */
  --font-size-ui:15px;       /* 导航链接 / 按钮 / 卡片正文 */
  --font-size-md-sm:17px;    /* FAQ 问题行、弹层标题、内页副标题小档 */

  /* 半透明面（规格里的 rgba 值） */
  --color-header-bg:rgba(248,247,244,.92);
  --color-header-bg-solid:rgba(248,247,244,.98);
  --color-mobile-bar-bg:rgba(248,247,244,.97);
  --color-overlay:rgba(26,25,23,.5);          /* 抽屉遮罩 */
  --color-overlay-strong:rgba(26,25,23,.62);  /* 弹层遮罩 */
  --color-overlay-shadow:rgba(26,25,23,.06);
  --color-line-shadow:rgba(26,25,23,.18);     /* 表格首列 sticky 阴影 */

  /* 深色面上的半透明白 */
  --color-on-dark-border-soft:rgba(255,255,255,.12);
  --color-on-dark-border-strong:rgba(255,255,255,.4);
  --color-on-dark-hover:rgba(255,255,255,.12);
  --color-on-dark-card:rgba(255,255,255,.06);
  --color-on-dark-ring:rgba(255,255,255,.22);
  --color-grid-line:rgba(255,255,255,.055);   /* 首屏坐标纸网格 */
  --color-on-dark-tag-text:#E8F0EC;           /* 深色底 tag 文字（对最亮端 ≥5.5:1） */
  --color-on-dark-media-glow:rgba(22,107,90,.55);

  /* 状态色投影 / 深色底警示 */
  --color-focus-glow:rgba(14,79,70,.14);
  --color-danger-glow:rgba(163,42,34,.12);
  --color-danger-on-dark-bg:rgba(163,42,34,.18);
  --color-danger-on-dark-bar:#E07068;
  --color-danger-on-dark-title:#F3C9C4;
  --color-spinner-track:rgba(255,255,255,.35);

  /* 遮罩层里只有 alpha 通道的渐变（#000 在此不作为颜色使用，仅表示不透明） */
  --mask-grid-fade:radial-gradient(120% 100% at 30% 20%,#000 30%,transparent 78%);

  /* 尺寸类（重复出现，提为令牌） */
  --logo-h:28px;
  --logo-h-tablet:26px;
  --logo-h-mobile:24px;
  --qr-sm:88px;
  --qr-md:120px;
  --qr-lg:200px;
  --qr-modal:260px;
  --qr-modal-mobile:220px;
  --stamp-size:40px;
  --stamp-size-lg:48px;
  --hero-media-min-h:440px;
  --table-min-w:720px;
  --table-min-w-tablet:640px;
  --drawer-w:min(86vw,360px);
  --modal-w:360px;
  --drawer-item-h:56px;
  --faq-panel-pad:40px;
  --toc-w:220px;
}

/* ============================================================================
   0.3 三城差异化（design-spec §7）
   ----------------------------------------------------------------------------
   只改 --city-accent / --city-accent-subtle 两个变量，以下几处同时变色：
     城市页顶部 4px 色条 / Hero 印章 / 场景卡顶条 / pill 标签
   用法：<body class="l-page l-page--city l-page--city-shenzhen">
   不需要为三城各写一套 CSS。
   ========================================================================== */

:root{
  /* 非城市页的默认值：让引用了 --city-accent 的组件在北/上/广之外仍取品牌色 */
  --city-accent:var(--color-brand-600);
  --city-accent-subtle:var(--color-brand-50);
}

body.l-page--city-shenzhen{  --city-accent:#27567D; --city-accent-subtle:#E7EEF5; }
body.l-page--city-beijing{   --city-accent:#7A5A22; --city-accent-subtle:#F5EDDD; }
body.l-page--city-guangzhou{ --city-accent:#166B5A; --city-accent-subtle:#E4F1EE; }

/* 印章文字（纯 CSS，不需要额外 HTML 内容） */
body.l-page--city-shenzhen  .c-hero__stamp::before{content:"SZ";}
body.l-page--city-beijing   .c-hero__stamp::before{content:"BJ";}
body.l-page--city-guangzhou .c-hero__stamp::before{content:"GZ";}

/* ============================================================================
   1. Reset 与排版基线
   ========================================================================== */

*,
*::before,
*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* 锚点跳转偏移：不让 sticky header 切掉目标区块标题 */
  scroll-padding-top:calc(var(--header-h) + var(--space-5));
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--font-size-base);
  line-height:var(--line-height-relaxed);
  color:var(--color-text-body);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  margin:0;
  color:var(--color-text);
  font-weight:var(--font-weight-bold);
}

/* 排版阶梯（design-spec §3.1）：H1 4xl / H2 3xl / H3 2xl / H4 lg */
h1{font-size:var(--font-size-4xl);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-wide);}
h2{font-size:var(--font-size-3xl);line-height:1.25;letter-spacing:var(--letter-spacing-wide);}
h3{font-size:var(--font-size-2xl);line-height:var(--line-height-snug);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);}
h4{font-size:var(--font-size-lg);line-height:1.4;font-weight:var(--font-weight-semibold);}

p{margin:0 0 var(--space-5);}
p:last-child{margin-bottom:0;}

ul,ol{margin:0;padding:0;}

a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--color-link-hover);}

img,
svg{max-width:100%;}
img{display:block;height:auto;border-style:none;}
figure{margin:0;}

button,
input,
textarea,
select{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
button{cursor:pointer;}

/* 数字对齐：统计、表格、金额、时效 */
.c-stat__num,
.c-table td,
.c-table th,
.u-tnum{font-variant-numeric:tabular-nums lining-nums;}

/* ============================================================================
   2. 布局原子
   ========================================================================== */

.l-container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.l-container--narrow{max-width:var(--container-narrow);}

.l-section{padding-block:var(--section-space);}
.l-section--tight{padding-block:var(--section-space-sm);}
.l-section--subtle{background:var(--color-surface-subtle);}
.l-section--dark{background:var(--color-ink-900);color:var(--color-on-dark);}
.l-section--dark h2,
.l-section--dark h3,
.l-section--dark h4{color:var(--color-on-dark);}

/* 区块标题 → 内容（对应 --block-gap：32 / 28 / 24） */
.l-section__head{margin-bottom:var(--block-gap);}

/* 区块末尾的中段 CTA / 按钮组 */
.l-section__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3) var(--space-4);
  margin-top:var(--space-7);
}
.l-section__actions--center{justify-content:center;}

.l-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gutter);
}
.l-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.l-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.l-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* 纵向流（表单区、文案区等不需要显式 gap 的场合） */
.l-stack{display:flex;flex-direction:column;gap:var(--space-4);}
.l-stack--lg{gap:var(--space-7);}

/* ============================================================================
   3. 组件
   ========================================================================== */

/* ---------------------------------------------------------------------------
   3.1 .c-icon（design-spec §5.19）
   -------------------------------------------------------------------------- */
.c-icon{
  display:inline-block;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-0.15em;
}
.c-icon--xs{width:14px;height:14px;}
.c-icon--sm{width:16px;height:16px;}
.c-icon--md{width:20px;height:20px;}
.c-icon--lg{width:24px;height:24px;}
.c-icon--xl{width:40px;height:40px;stroke-width:1.5;}

/* ---------------------------------------------------------------------------
   3.2 .c-header（§5.1）
   -------------------------------------------------------------------------- */
.c-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:var(--header-h);
  background:var(--color-header-bg);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow var(--transition-base),background-color var(--transition-base);
}
/* 滚动后只加深阴影，不改高度（改高会让 #lead 锚点偏移算错） */
.c-header.is-scrolled{
  box-shadow:var(--shadow-2);
  background:var(--color-header-bg-solid);
}
.c-header__inner{
  display:flex;
  align-items:center;
  gap:var(--space-7);
  height:100%;
}
.c-header__logo{
  display:inline-flex;
  align-items:center;
  flex:none;
  height:var(--logo-h);
  text-decoration:none;
}
.c-header__logo img{
  height:var(--logo-h);
  width:auto;
}
.c-header__actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.c-header__phone{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1-5);
  font-size:var(--font-size-ui);
  font-weight:var(--font-weight-semibold);
  color:var(--color-brand-700);
  text-decoration:none;
  white-space:nowrap;
}
.c-header__phone:hover{color:var(--color-brand-800);text-decoration:none;}

/* ---------------------------------------------------------------------------
   3.3 .c-nav（§5.2）桌面横排 + 三城下拉 + 移动抽屉
   -------------------------------------------------------------------------- */
.c-nav{display:flex;align-items:center;}
.c-nav__list{
  display:flex;
  align-items:center;
  gap:var(--space-6-5);
  list-style:none;
  margin:0;
  padding:0;
}
.c-nav__item{position:relative;display:flex;align-items:center;}

.c-nav__link,
.c-nav__toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  height:var(--touch-min);
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:var(--font-size-ui);
  font-weight:var(--font-weight-medium);
  color:var(--color-ink-700);
  text-decoration:none;
  white-space:nowrap;
}
.c-nav__link::after,
.c-nav__toggle::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:var(--space-1-5);
  height:2px;
  background:var(--color-brand-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition-base);
}
.c-nav__link:hover,
.c-nav__toggle:hover{color:var(--color-brand-700);text-decoration:none;}
.c-nav__link:hover::after,
.c-nav__toggle:hover::after,
.c-nav__item:focus-within > .c-nav__toggle::after,
.c-nav__link.is-active::after,
.c-nav__toggle.is-active::after{transform:scaleX(1);}
.c-nav__link.is-active,
.c-nav__toggle.is-active{color:var(--color-brand-700);font-weight:var(--font-weight-semibold);}

/* 三城下拉 */
.c-nav__dropdown{
  position:absolute;
  top:calc(100% - var(--space-1));
  left:calc(var(--space-4) * -1);
  z-index:var(--z-dropdown);
  min-width:180px;
  padding:var(--space-2) 0;
  margin:0;
  list-style:none;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-3);
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity var(--transition-base),
             transform var(--transition-base),
             visibility 0s linear var(--transition-base);
}
.c-nav__item:hover > .c-nav__dropdown,
.c-nav__item:focus-within > .c-nav__dropdown,
.c-nav__item.is-open > .c-nav__dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition-delay:0s;
}
.c-nav__dropdown-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  height:var(--space-8);
  padding:0 var(--space-4);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-regular);
  color:var(--color-ink-800);
  text-decoration:none;
  white-space:nowrap;
}
.c-nav__dropdown-link:hover,
.c-nav__dropdown-link.is-active{
  background:var(--color-brand-50);
  color:var(--color-brand-700);
  text-decoration:none;
}

/* 汉堡按钮（<768 才出现） */
.c-nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:var(--touch-min);
  height:var(--touch-min);
  padding:0;
  border:0;
  background:none;
  color:var(--color-ink-800);
}
.c-nav-toggle__bar{
  display:block;
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform var(--transition-base);
}
.c-nav-toggle.is-open .c-nav-toggle__bar:nth-child(1){transform:rotate(45deg) translateY(3.5px);}
.c-nav-toggle.is-open .c-nav-toggle__bar:nth-child(2){transform:rotate(-45deg) translateY(-3.5px);}

/* 抽屉遮罩与面板（默认不占位，桌面端永不显示） */
.c-nav__scrim{
  display:none;
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  background:var(--color-overlay);
  opacity:0;
  transition:opacity var(--transition-base);
}
.c-nav__drawer{
  display:none;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:calc(var(--z-overlay) + 1);
  width:var(--drawer-w);
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  box-shadow:var(--shadow-3);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--transition-slow),visibility 0s linear var(--transition-slow);
}
body.is-nav-open .c-nav__scrim{opacity:1;}
body.is-nav-open .c-nav__drawer{
  transform:translateX(0);
  visibility:visible;
  transition-delay:0s;
}
.c-nav__drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex:none;
  height:var(--header-h);
  padding-inline:var(--container-pad);
  border-bottom:1px solid var(--color-border);
}
.c-nav__drawer-head .c-header__logo{height:var(--logo-h-mobile);}
.c-nav__drawer-head .c-header__logo img{height:var(--logo-h-mobile);}
.c-nav__close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-min);
  height:var(--touch-min);
  padding:0;
  border:0;
  background:none;
  color:var(--color-ink-600);
}
.c-nav__mobile-list{
  flex:1 1 auto;
  overflow-y:auto;
  list-style:none;
  margin:0;
  padding:0;
}
.c-nav__mobile-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-height:var(--drawer-item-h);
  padding:0 var(--container-pad);
  font-size:var(--font-size-md-sm);
  font-weight:var(--font-weight-medium);
  color:var(--color-ink-800);
  text-decoration:none;
  border-bottom:1px solid var(--color-border);
}
.c-nav__mobile-link.is-active{
  color:var(--color-brand-700);
  box-shadow:inset 3px 0 0 var(--color-brand-600);
}
/* 抽屉内的三城二级列表：直接铺开，不折叠 */
.c-nav__mobile-sub{
  list-style:none;
  margin:0;
  padding:0;
  background:var(--color-surface-subtle);
  border-bottom:1px solid var(--color-border);
}
.c-nav__mobile-sublink{
  display:flex;
  align-items:center;
  min-height:var(--touch-min);
  padding:0 var(--container-pad) 0 calc(var(--container-pad) + var(--space-4));
  font-size:var(--font-size-sm);
  color:var(--color-ink-700);
  text-decoration:none;
}
.c-nav__mobile-sublink.is-active{color:var(--color-brand-700);font-weight:var(--font-weight-semibold);}
.c-nav__drawer-foot{
  flex:none;
  padding:var(--space-5) var(--container-pad) calc(var(--space-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--color-border);
}
.c-nav__chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.c-nav__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-h-sm);
  padding:0 var(--space-3);
  border-radius:var(--radius-sm);
  background:var(--color-brand-50);
  color:var(--color-brand-700);
  font-size:var(--font-size-sm);
  text-decoration:none;
}
.c-nav__chip:hover{background:var(--color-brand-100);text-decoration:none;}

/* ---------------------------------------------------------------------------
   3.4 .c-btn（§5.3）
   -------------------------------------------------------------------------- */
.c-btn{
  --_h:var(--btn-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  height:var(--_h);
  padding-inline:var(--space-6);
  font-family:inherit;
  font-size:var(--font-size-ui);
  font-weight:var(--font-weight-semibold);
  line-height:1;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:none;
  cursor:pointer;
  text-decoration:none;
  transition:background-color var(--transition-fast),
             border-color var(--transition-fast),
             box-shadow var(--transition-fast),
             color var(--transition-fast);
}
.c-btn--primary{background:var(--color-brand-600);color:var(--color-on-brand);}
.c-btn--primary:hover{background:var(--color-brand-700);box-shadow:var(--shadow-2);color:var(--color-on-brand);text-decoration:none;}
.c-btn--primary:active{background:var(--color-brand-800);box-shadow:none;}

.c-btn--secondary{
  background:var(--color-surface);
  color:var(--color-ink-800);
  border-color:var(--color-border-strong);
  padding-inline:var(--space-5);
}
.c-btn--secondary:hover{
  background:var(--color-brand-50);
  border-color:var(--color-brand-600);
  color:var(--color-brand-700);
  text-decoration:none;
}
.c-btn--secondary:active{background:var(--color-brand-100);}

.c-btn--ghost{
  background:transparent;
  color:var(--color-brand-600);
  padding-inline:var(--space-3);
}
.c-btn--ghost:hover{color:var(--color-brand-700);text-decoration:underline;text-underline-offset:4px;}

.c-btn--lg{--_h:var(--btn-h-lg);font-size:var(--font-size-base);padding-inline:var(--space-8);}
.c-btn--sm{--_h:var(--btn-h-sm);font-size:var(--font-size-sm);padding-inline:var(--space-4);font-weight:var(--font-weight-medium);}
.c-btn--block{display:flex;width:100%;}

/* 深色底上的次级按钮 */
.c-btn--on-dark{
  background:transparent;
  color:var(--color-on-dark);
  border-color:var(--color-on-dark-border-strong);
}
.c-btn--on-dark:hover{
  background:var(--color-on-dark-hover);
  color:var(--color-on-dark);
  text-decoration:none;
}

.c-btn:disabled,
.c-btn[aria-disabled="true"]{
  background:var(--color-ink-100);
  color:var(--color-text-disabled);
  border-color:var(--color-border);
  cursor:not-allowed;
  box-shadow:none;
}

/* 加载态：保留底色 + 旋转环 + 文字「提交中…」，禁用点击 */
.c-btn.is-loading{pointer-events:none;}
.c-btn__spinner{
  display:none;
  width:var(--space-4);
  height:var(--space-4);
  border:2px solid var(--color-spinner-track);
  border-top-color:var(--color-on-brand);
  border-radius:var(--radius-pill);
  animation:c-spin 700ms linear infinite;
}
.c-btn.is-loading .c-btn__spinner{display:inline-block;}
.c-btn--secondary .c-btn__spinner{border-color:var(--color-border-strong);border-top-color:var(--color-brand-600);}
@keyframes c-spin{to{transform:rotate(360deg);}}

/* ---------------------------------------------------------------------------
   3.5 .c-hero（§5.4 / §8.2）
   -------------------------------------------------------------------------- */
.c-hero{position:relative;overflow:hidden;}

.c-hero__inner{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gutter);
  align-items:center;
}
.c-hero__content{grid-column:span 7;min-width:0;}
.c-hero__visual{grid-column:span 5;min-width:0;}

.c-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-4);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--letter-spacing-caps);
  text-transform:uppercase;
}

.c-hero__title{
  margin:0 0 var(--space-5);
  max-width:16em;
  font-size:var(--font-size-4xl);
  line-height:var(--line-height-tight);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-wide);
  color:var(--color-on-dark);
}
.c-hero__lead{
  margin:0 0 var(--space-7);
  max-width:34em;
  font-size:var(--font-size-md);
  line-height:var(--line-height-relaxed);
  color:var(--color-on-dark-lead);
}
.c-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-4);
}
.c-hero__trust{margin-top:var(--space-6);}

/* 首页首屏：深色，全站唯一重色块 */
.c-hero--home{
  background:var(--gradient-hero);
  color:var(--color-on-dark);
  padding-block:var(--space-11) var(--space-12);
  min-height:clamp(560px,calc(100svh - var(--header-h)),760px);
  display:flex;
  align-items:center;
}
.c-hero--home .c-hero__inner{width:100%;}

/* 首屏视觉：渐变 + 档案纸网格 + 青色光晕（无照片时的正式方案，非占位） */
.c-hero__media{
  position:relative;
  min-height:var(--hero-media-min-h);
  border-radius:var(--radius-md);
  background:var(--gradient-media);
  border:1px solid var(--color-on-dark-border-soft);
  overflow:hidden;
  isolation:isolate;
}
.c-hero__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    repeating-linear-gradient(90deg,var(--color-grid-line) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(0deg,var(--color-grid-line) 0 1px,transparent 1px 32px);
  -webkit-mask-image:var(--mask-grid-fade);
  mask-image:var(--mask-grid-fade);
}
.c-hero__media::after{
  content:"";
  position:absolute;
  z-index:0;
  left:-12%;
  bottom:-32%;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,var(--color-on-dark-media-glow),transparent 70%);
  filter:blur(2px);
}
.c-hero__media > svg{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
}

/* 内页首屏：浅色 */
.c-hero--page{
  background:var(--color-surface-subtle);
  border-bottom:1px solid var(--color-border);
  padding-block:var(--space-10) var(--space-9);
}
.c-hero--page .c-hero__inner{align-items:start;}
.c-hero--page .c-hero__content{grid-column:span 8;}
.c-hero--page .c-hero__visual{grid-column:span 4;}
.c-hero--page .c-hero__title{
  max-width:20em;
  font-size:var(--font-size-3xl);
  color:var(--color-ink-900);
}
.c-hero--page .c-hero__lead{
  margin-bottom:var(--space-6);
  max-width:38em;
  font-size:var(--font-size-md);
  color:var(--color-ink-700);
}

/* 页头右栏小卡（准入材料清单 / 覆盖片区 / 稽查 8 问） */
.c-hero__aside{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-6);
}
.c-hero__aside-title{
  margin:0 0 var(--space-4);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
}
.c-hero__aside-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-ink-700);
}

/* 城市页首屏：顶部 4px 城市色条 + 印章 + pill */
.c-hero--city{
  border-top:4px solid var(--city-accent);
  padding-block:var(--space-9) var(--space-9);
}
.c-hero__stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--stamp-size);
  height:var(--stamp-size);
  margin-bottom:var(--space-4);
  border-radius:var(--radius-sm);
  background:var(--city-accent);
  color:var(--color-on-brand);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-caps);
}
.c-hero--city .c-tag--pill{
  background:var(--city-accent-subtle);
  color:var(--city-accent);
}

/* 文章页首屏：白底，无 CTA
   注意：.c-hero__title / .c-hero__lead 的基色是深色面配色（--color-on-dark /
   --color-on-dark-lead），在白底上等于白字白底。这里必须显式改回墨色。
   只改颜色，不动尺寸与间距（尺寸见 design-spec §5.4 文章页一行）。 */
.c-hero--article{
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  padding-block:var(--space-9) var(--space-8);
}
.c-hero--article .c-hero__title{
  font-size:var(--font-size-3xl);
  color:var(--color-ink-900);
}
.c-hero--article .c-hero__lead{color:var(--color-ink-700);}
.c-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1) var(--space-2);
  margin-top:var(--space-4);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
}
.c-hero__meta-sep{color:var(--color-ink-300);}

/* 404 大字 */
.c-hero__code{
  margin:0;
  font-size:var(--font-size-5xl);
  line-height:var(--line-height-none);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-tight);
  color:var(--color-ink-200);
}

/* ---------------------------------------------------------------------------
   3.6 .c-card（§5.5）
   -------------------------------------------------------------------------- */
.c-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-6);
  transition:border-color var(--transition-base),
             box-shadow var(--transition-base),
             transform var(--transition-base);
}
.c-card__title{
  margin:0 0 var(--space-2);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-snug);
  color:var(--color-ink-900);
}
.c-card__desc{
  margin:0;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-muted);
}
.c-card__link{
  margin-top:auto;
  padding-top:var(--space-4);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  color:var(--color-brand-600);
  text-decoration:none;
}
.c-card__link:hover{color:var(--color-brand-700);text-decoration:underline;text-underline-offset:4px;}

/* 卡片内的图标（entry / 通用） */
.c-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--space-5);
  color:var(--color-brand-600);
}

/* --entry：首页四入口分流卡 */
.c-card--entry{
  padding:var(--space-7);
  text-decoration:none;
  color:inherit;
}
.c-card--entry .c-card__icon{color:var(--color-brand-600);}
.c-card--entry .c-card__title{font-size:var(--font-size-lg);}
.c-card--entry .c-card__desc{font-size:var(--font-size-ui);line-height:1.7;color:var(--color-text-muted);}
.c-card--entry .c-card__arrow{
  margin-top:auto;
  padding-top:var(--space-5);
  display:flex;
  justify-content:flex-end;
  color:var(--color-brand-600);
}
.c-card--entry:hover{
  transform:translateY(-2px);
  border-color:var(--color-brand-border);
  box-shadow:var(--shadow-2);
}

/* --scene：场景卡（顶部 3px 色条） */
.c-card--scene{
  --card-accent:var(--city-accent,var(--color-brand-600));
  border-top-width:3px;
  border-top-color:var(--card-accent);
  padding:var(--space-6);
}
.c-card--scene .c-card__title{font-size:var(--font-size-lg);}
.c-card--scene .c-card__desc{font-size:var(--font-size-ui);line-height:var(--line-height-relaxed);color:var(--color-text-muted);}
.c-card--scene:hover{
  border-color:var(--color-border-strong);
  border-top-color:var(--card-accent);
  box-shadow:var(--shadow-2);
}
/* 编号卡（医药四类费用痛点 ① ② ③ ④） */
.c-card__num{
  display:inline-block;
  margin-bottom:var(--space-3);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-caps);
  color:var(--card-accent,var(--color-brand-600));
  font-variant-numeric:tabular-nums;
}
/* 场景卡内的说明清单 */
.c-card__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-muted);
}
.c-card__list li{position:relative;padding-left:var(--space-4);}
.c-card__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--card-accent,var(--color-brand-600));
}

/* --city：首页三城卡 */
.c-card--city{
  border-top:4px solid var(--city-accent);
  padding:var(--space-6);
  text-decoration:none;
  color:inherit;
}
.c-card--city .c-card__stamp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--stamp-size-lg);
  height:var(--stamp-size-lg);
  margin-bottom:var(--space-4);
  border-radius:var(--radius-sm);
  background:var(--city-accent);
  color:var(--color-on-brand);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-caps);
}
.c-card--city .c-card__title{font-size:var(--font-size-2xl);color:var(--color-ink-900);}
.c-card--city:hover{
  border-color:var(--color-border-strong);
  border-top-color:var(--city-accent);
  box-shadow:var(--shadow-2);
}
/* 城市卡 / 覆盖片区 chip */
.c-card__chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);}
.c-card__chip{
  display:inline-flex;
  align-items:center;
  height:var(--space-6-5);
  padding:0 var(--space-2-5);
  border-radius:var(--radius-sm);
  background:var(--color-surface-subtle);
  color:var(--color-ink-700);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
}

/* --case：案例三条（行业 + 问题 + 做法 + 交付物/结果） */
.c-card--case{padding:var(--space-6);}
.c-card--case .c-card__label{
  display:block;
  margin:var(--space-3) 0 var(--space-1-5);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--letter-spacing-caps);
  color:var(--color-ink-500);
}
.c-card--case .c-card__problem{
  margin:0;
  font-size:var(--font-size-ui);
  line-height:var(--line-height-normal);
  color:var(--color-ink-800);
}
.c-card--case .c-card__action{
  margin:0;
  font-size:var(--font-size-ui);
  line-height:var(--line-height-relaxed);
  color:var(--color-ink-700);
}
.c-card--case .c-tag-list{margin-top:var(--space-3);}

/* --article：资讯列表 */
.c-card--article{
  flex-direction:row;
  gap:var(--space-6);
  padding:var(--space-5);
  text-decoration:none;
  color:inherit;
}
.c-card__cover{
  flex:none;
  width:200px;
  height:128px;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--color-surface-subtle);
}
.c-card__cover img{width:100%;height:100%;object-fit:cover;}
.c-card__body{min-width:0;display:flex;flex-direction:column;}
.c-card--article .c-card__title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  font-size:var(--font-size-lg);
}
.c-card--article .c-card__desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  margin-top:var(--space-2);
  font-size:var(--font-size-sm);
  line-height:1.7;
  color:var(--color-ink-600);
}
.c-card--article .c-card__meta{
  margin-top:auto;
  padding-top:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1) var(--space-2);
  font-size:var(--font-size-caption);
  color:var(--color-ink-500);
}
.c-card--article:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-2);}
.c-card--article:hover .c-card__title{color:var(--color-brand-700);}

/* --link：关联入口小卡 */
.c-card--link{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  height:72px;
  padding:0 var(--space-5);
  border:1px solid var(--color-border);
  border-left:3px solid var(--color-brand-100);
  text-decoration:none;
  color:var(--color-ink-900);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
}
.c-card--link .c-card__arrow{color:var(--color-brand-600);}
.c-card--link:hover{
  border-left-color:var(--color-brand-600);
  border-top-color:var(--color-border-strong);
  border-right-color:var(--color-border-strong);
  border-bottom-color:var(--color-border-strong);
  color:var(--color-brand-700);
  text-decoration:none;
  box-shadow:var(--shadow-1);
}

/* --doc：资料 / 材料清单（无边框，靠上分割线成行） */
.c-card--doc{
  display:block;
  border:0;
  border-top:1px solid var(--color-border);
  border-radius:0;
  padding:var(--space-3-5) 0;
  background:none;
}
.c-card--doc .c-card__title{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2-5);
  margin:0 0 var(--space-1);
  font-size:var(--font-size-base);
  color:var(--color-ink-900);
}
.c-card--doc .c-card__title .c-icon{color:var(--color-pillar-comply);margin-top:.2em;}
.c-card--doc .c-card__desc{padding-left:calc(20px + var(--space-2-5));}

/* --dark：深色区块内的卡 */
.c-card--dark{
  background:var(--color-on-dark-card);
  border-color:var(--color-on-dark-border);
}
.c-card--dark .c-card__title{color:var(--color-on-dark);}
.c-card--dark .c-card__desc{color:var(--color-on-dark-muted);}

/* ---------------------------------------------------------------------------
   3.7 .c-tag / .c-badge / .c-tag-list（§5.6）
   -------------------------------------------------------------------------- */
.c-tag,
.c-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1-5);
  height:28px;
  padding:0 var(--space-2-5);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
  line-height:1;
  white-space:nowrap;
}
.c-tag{background:var(--color-ink-100);color:var(--color-ink-700);}
.c-tag--on-dark{
  background:var(--color-on-dark-hover);
  border:1px solid var(--color-on-dark-border-soft);
  color:var(--color-on-dark-tag-text);
}
.c-tag--pill{
  height:var(--space-6);
  padding:0 var(--space-2-5);
  border-radius:var(--radius-pill);
  font-size:var(--font-size-2xs);
  background:var(--color-brand-50);
  color:var(--color-brand-700);
}

.c-badge--comply{background:var(--color-pillar-comply-subtle);color:var(--color-pillar-comply);font-weight:var(--font-weight-semibold);}
.c-badge--stable{background:var(--color-pillar-stable-subtle);color:var(--color-pillar-stable);font-weight:var(--font-weight-semibold);}
.c-badge--safe{background:var(--color-pillar-safe-subtle);color:var(--color-pillar-safe);font-weight:var(--font-weight-semibold);}

.c-tag-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2) var(--space-3);
  margin:0;
  padding:0;
  list-style:none;
}

/* ---------------------------------------------------------------------------
   3.8 .c-step（§5.7）—— 连接线是全站最容易做歪的地方
   桌面：水平线 left:32px / right:-4px，末项隐藏
   平板：3 列，行末（3n）隐藏
   移动：竖线 left:13px / top:28px
   -------------------------------------------------------------------------- */
.c-step__list{
  --step-count:6;
  display:grid;
  grid-template-columns:repeat(var(--step-count),minmax(0,1fr));
  gap:var(--space-4);
  list-style:none;
  margin:0;
  padding:0;
}
.c-step__item{position:relative;padding-top:var(--space-8);min-width:0;}
.c-step__item::before{
  content:"";
  position:absolute;
  top:13px;
  left:32px;
  right:-4px;
  height:2px;
  background:var(--color-border);
}
.c-step__item:last-child::before{display:none;}
.c-step__dot{
  position:absolute;
  top:0;
  left:0;
  width:28px;
  height:28px;
  border-radius:var(--radius-pill);
  background:var(--color-surface);
  border:2px solid var(--color-brand-600);
  color:var(--color-brand-700);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-bold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-variant-numeric:tabular-nums;
}
.c-step__name{
  margin:0 0 var(--space-2);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
}
.c-step__desc{
  margin:0;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-muted);
}
/* 深色区块内的步骤条 */
.l-section--dark .c-step__item::before{background:var(--color-on-dark-border);}
.l-section--dark .c-step__dot{
  background:var(--color-ink-900);
  border-color:var(--color-brand-500);
  color:var(--color-on-dark);
}
.l-section--dark .c-step__name{color:var(--color-on-dark);}
.l-section--dark .c-step__desc{color:var(--color-on-dark-muted);}

/* --detail：/fuwu/ 六步详解（2×3 卡片，隐藏连接线） */
.c-step--detail .c-step__list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-5);
}
.c-step--detail .c-step__item{
  padding:var(--space-6) var(--space-6) var(--space-6) var(--space-10);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
}
.c-step--detail .c-step__item::before{display:none;}
.c-step--detail .c-step__dot{top:var(--space-6);left:var(--space-5);}
.c-step--detail .c-step__name{font-size:var(--font-size-lg);}
.c-step--detail .c-step__desc{margin-bottom:var(--space-3);}
/* 四行小字：客户做什么 / 我方做什么 / 产出文件 / 耗时 */
.c-step__meta{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-1-5);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-600);
}
.c-step__meta dt{display:inline;font-weight:var(--font-weight-semibold);color:var(--color-ink-700);}
.c-step__meta dd{display:inline;margin:0 0 0 var(--space-1);}

/* ---------------------------------------------------------------------------
   3.9 .c-table（§5.8）移动端横向滚动，首列 sticky
   -------------------------------------------------------------------------- */
.c-table__scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}
.c-table{
  width:100%;
  min-width:var(--table-min-w);
  border-collapse:collapse;
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-text-body);
}
.c-table th,
.c-table td{
  padding:var(--space-4-5) var(--space-4);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--color-border);
}
.c-table thead th{
  padding:var(--space-3-5) var(--space-4);
  background:var(--color-ink-100);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-700);
  white-space:nowrap;
}
.c-table tbody tr:last-child th,
.c-table tbody tr:last-child td{border-bottom:0;}
.c-table th:first-child,
.c-table td:first-child{
  min-width:120px;
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
}
.c-table__caption{
  caption-side:top;
  padding:var(--space-3) var(--space-4);
  font-size:var(--font-size-caption);
  color:var(--color-ink-600);
  text-align:left;
}
@media (hover:hover){
  .c-table tbody tr:hover td,
  .c-table tbody tr:hover th{background:var(--color-brand-50);}
}

/* ---------------------------------------------------------------------------
   3.10 .c-faq（§5.9）grid-template-rows 过渡，不用 max-height
   -------------------------------------------------------------------------- */
.c-faq{border-top:1px solid var(--color-border);}
.c-faq__item{border-bottom:1px solid var(--color-border);}
.c-faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  width:100%;
  min-height:60px;
  padding:var(--space-5) 0;
  border:0;
  background:none;
  text-align:left;
  font-family:inherit;
  font-size:var(--font-size-md-sm);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-snug);
  color:var(--color-ink-900);
  transition:color var(--transition-base);
}
.c-faq__q:hover{color:var(--color-brand-700);}
.c-faq__item.is-open .c-faq__q{color:var(--color-brand-700);}
.c-faq__icon{
  flex:none;
  color:var(--color-ink-500);
  transition:transform var(--transition-base);
}
.c-faq__item.is-open .c-faq__icon{transform:rotate(180deg);}
.c-faq__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--transition-base);
}
.c-faq__panel > div{overflow:hidden;}
.c-faq__item.is-open .c-faq__panel{grid-template-rows:1fr;}
.c-faq__a{
  margin:0;
  padding:0 var(--faq-panel-pad) var(--space-5) 0;
  font-size:var(--font-size-ui);
  line-height:1.8;
  color:var(--color-ink-700);
}
/* 无 JS 降级：<html class="no-js"> 时全部展开 */
.no-js .c-faq__panel{grid-template-rows:1fr;}

/* ---------------------------------------------------------------------------
   3.11 .c-callout（§5.17）
   -------------------------------------------------------------------------- */
.c-callout{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-3);
  padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-sm);
  border-left:3px solid var(--color-ink-400);
  background:var(--color-ink-100);
}
.c-callout__icon{color:var(--color-ink-500);margin-top:var(--space-0-5);}
.c-callout__title{
  margin:0 0 var(--space-2);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
}
.c-callout__body{
  margin:0;
  font-size:var(--font-size-sm);
  line-height:1.8;
  color:var(--color-ink-700);
}
.c-callout__body + .c-callout__body{margin-top:var(--space-2);}

/* --alert：强警示（每页最多 1 个） */
.c-callout--alert{
  background:var(--color-danger-subtle);
  border-left-width:4px;
  border-left-color:var(--color-danger);
}
.c-callout--alert .c-callout__icon{color:var(--color-danger);}
.c-callout--alert .c-callout__title{
  color:var(--color-danger);
  font-size:var(--font-size-base);
  font-weight:var(--font-weight-bold);
}
.c-callout--alert .c-callout__body{
  font-size:var(--font-size-ui);
  color:var(--color-ink-800);
}
/* 拒绝项清单：每条前置 ✕ */
.c-callout__list{
  margin:var(--space-2) 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.c-callout__list li{
  position:relative;
  padding-left:var(--space-6);
  font-size:var(--font-size-ui);
  line-height:var(--line-height-normal);
  color:var(--color-ink-800);
}
.c-callout__list li::before{
  content:"✕";
  position:absolute;
  left:0;
  top:0;
  font-size:var(--font-size-2xs);
  line-height:var(--line-height-loose);
  font-weight:var(--font-weight-bold);
  color:var(--color-danger);
}

/* --comply：合规说明 */
.c-callout--comply{
  background:var(--color-pillar-comply-subtle);
  border-left-color:var(--color-pillar-comply);
}
.c-callout--comply .c-callout__icon{color:var(--color-pillar-comply);}
.c-callout--comply .c-callout__title{color:var(--color-pillar-comply);}

/* --note 的别名，仅为语义可读；视觉与基类一致 */
.c-callout--note{background:var(--color-ink-100);}

/* 深色区块内的 alert（/yiyao/ 反商业贿赂拒绝声明） */
.l-section--dark .c-callout--alert{
  background:var(--color-danger-on-dark-bg);
  border-left-color:var(--color-danger-on-dark-bar);
}
.l-section--dark .c-callout--alert .c-callout__title{color:var(--color-danger-on-dark-title);}
.l-section--dark .c-callout--alert .c-callout__body,
.l-section--dark .c-callout__list li{color:var(--color-on-dark-lead);}
.l-section--dark .c-callout--alert .c-callout__icon{color:var(--color-danger-on-dark-bar);}
.l-section--dark .c-callout__list li::before{color:var(--color-danger-on-dark-bar);}

/* ---------------------------------------------------------------------------
   3.12 .c-form（§5.10）全站唯一转化组件
   -------------------------------------------------------------------------- */
.c-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-5);
  max-width:100%;
}
/* 提交成功后 main.js 会 `form.hidden = true` 把表单换成成功卡（§7.3「整体替换」）。
   上面 .c-form 的 display:flex 优先级高于 UA 的 [hidden]{display:none}，
   不加这一条表单会继续显示 —— 访客会看到一张填满内容、按钮卡在「提交中…」
   且 disabled 的死表单，下面再排一张成功卡。同 .c-form__error[hidden] /
   .c-modal[hidden] 的既有写法。 */
.c-form[hidden]{display:none;}
.c-form__field{display:flex;flex-direction:column;min-width:0;}

.c-form__label{
  margin-bottom:var(--space-1-5);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  line-height:var(--line-height-normal);
  color:var(--color-ink-800);
}
.c-form__req{color:var(--color-danger);margin-left:var(--space-1);}

.c-form__input{
  display:block;
  width:100%;
  height:var(--input-h);
  padding:0 var(--space-3-5);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  color:var(--color-ink-900);
  appearance:none;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast);
}
.c-form__input::placeholder{color:var(--color-text-placeholder);opacity:1;}
.c-form__input:hover{border-color:var(--color-ink-500);}
.c-form__input:focus{
  outline:none;
  border-color:var(--color-brand-600);
  box-shadow:0 0 0 3px var(--color-focus-glow);
}
/* 焦点环另给一层，键盘用户仍能看见 */
.c-form__input:focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:var(--focus-ring-offset);
}
.c-form__input--textarea{
  height:auto;
  min-height:112px;
  padding:var(--space-3) var(--space-3-5);
  line-height:var(--line-height-normal);
  resize:vertical;
}
/* 错误态：红框 + 红底 + 外环 + 图标 + 文字，四重冗余 */
.c-form__field.has-error .c-form__input{
  border-color:var(--color-danger);
  background:var(--color-danger-subtle);
  box-shadow:0 0 0 3px var(--color-danger-glow);
}
.c-form__error{
  display:flex;
  align-items:flex-start;
  gap:var(--space-1-5);
  margin:var(--space-1-5) 0 0;
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-medium);
  line-height:var(--line-height-normal);
  color:var(--color-danger);
}
.c-form__error .c-icon{flex:none;margin-top:.15em;}
.c-form__error[hidden]{display:none;}

.c-form__hint{
  margin:var(--space-1-5) 0 0;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
}

/* 隐私说明 */
.c-form__privacy{
  margin:var(--space-4) 0 0;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
  text-align:left;
}

/* 蜜罐：移出视口，读屏与 Tab 均不可达 */
.c-form__hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* 提交失败兜底提示（表单不消失，内容保留） */
.c-form__alert{margin-top:var(--space-2);}

/* 成功卡（原位替换表单） */
.c-form__success{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-4);
  padding:var(--space-8) var(--space-7);
  background:var(--color-success-subtle);
  border:1px solid var(--color-success);
  border-radius:var(--radius-md);
}
.c-form__success-icon{color:var(--color-success);}
.c-form__success-title{
  margin:0;
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-semibold);
  line-height:var(--line-height-snug);
  color:var(--color-success);
}
.c-form__success-desc{
  margin:0;
  font-size:var(--font-size-ui);
  line-height:var(--line-height-relaxed);
  color:var(--color-ink-800);
}
.c-form__success-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2);}

/* ---------------------------------------------------------------------------
   3.13 .c-footer（§5.11）
   -------------------------------------------------------------------------- */
.c-footer{
  background:var(--color-ink-900);
  color:var(--color-on-dark);
  padding-top:var(--space-10);
}
.c-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:var(--space-8);
}
.c-footer__col{min-width:0;}
.c-footer__col-title{
  margin:0 0 var(--space-4);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--letter-spacing-caps);
  color:var(--color-on-dark-faint);
}
.c-footer__brand .c-footer__logo{
  display:inline-flex;
  height:var(--logo-h);
  margin-bottom:var(--space-4);
}
.c-footer__brand .c-footer__logo img{height:var(--logo-h);width:auto;}
.c-footer__slogan{
  margin:0 0 var(--space-3);
  max-width:24em;
  font-size:var(--font-size-caption);
  line-height:1.7;
  color:var(--color-on-dark-muted);
}
.c-footer__worktime{
  display:flex;
  align-items:center;
  gap:var(--space-1-5);
  margin:0 0 var(--space-4);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-on-dark-faint);
}
.c-footer__qr{
  display:inline-flex;
  flex-direction:column;
  gap:var(--space-2);
  align-items:flex-start;
  padding:0;
  border:0;
  background:none;
  color:var(--color-on-dark-muted);
  font-size:var(--font-size-2xs);
}
.c-footer__qr img{
  width:var(--qr-sm);
  height:var(--qr-sm);
  border-radius:var(--radius-sm);
  border:1px solid var(--color-on-dark-border);
  background:var(--color-surface);
}
.c-footer__links{list-style:none;margin:0;padding:0;}
.c-footer__link{
  display:inline-block;
  padding-block:var(--space-1-5);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-on-dark-muted);
  text-decoration:none;
}
.c-footer__link:hover{color:var(--color-on-dark);text-decoration:underline;text-underline-offset:4px;}
.c-footer__address{
  margin:0 0 var(--space-1-5);
  font-size:var(--font-size-caption);
  line-height:1.7;
  color:var(--color-on-dark-faint);
}
.c-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-1) var(--space-3);
  margin-top:var(--space-9);
  padding-block:var(--space-5);
  border-top:1px solid var(--color-on-dark-border);
  font-size:var(--font-size-2xs);
  line-height:1.8;
  color:var(--color-on-dark-faint);
}
.c-footer__bottom a{color:inherit;text-decoration:none;}
.c-footer__bottom a:hover{color:var(--color-on-dark);text-decoration:underline;}
.c-footer__bottom-sep{color:var(--color-on-dark-faint);opacity:.6;}

/* 微信号复制按钮（页脚与联系页复用） */
.c-copy{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1-5);
  padding:var(--space-1-5) 0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.c-copy:hover{color:var(--color-on-dark);text-decoration:underline;text-underline-offset:4px;}
.c-copy.is-copied{color:var(--color-success);}
.c-copy.is-copied .c-copy__icon{color:inherit;}
.c-footer .c-copy.is-copied{color:var(--color-on-dark);}

/* ---------------------------------------------------------------------------
   3.14 .c-breadcrumb（§5.12）
   -------------------------------------------------------------------------- */
.c-breadcrumb{margin-bottom:var(--space-4);}
.c-breadcrumb__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
}
.c-breadcrumb__item{display:inline-flex;align-items:center;min-width:0;}
.c-breadcrumb__item + .c-breadcrumb__item::before{
  content:"/";
  margin:0 var(--space-2);
  color:var(--color-ink-300);
}
.c-breadcrumb__link{
  color:var(--color-ink-500);
  text-decoration:none;
  white-space:nowrap;
}
.c-breadcrumb__link:hover{color:var(--color-brand-700);text-decoration:underline;}
.c-breadcrumb__current{
  color:var(--color-ink-700);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------------------------------------------------------------------
   3.15 .c-toc（§5.13）
   -------------------------------------------------------------------------- */
.c-toc{font-size:var(--font-size-sm);}
.c-toc__title{
  margin:0 0 var(--space-3);
  font-size:var(--font-size-caption);
  font-weight:var(--font-weight-semibold);
  letter-spacing:var(--letter-spacing-caps);
  color:var(--color-ink-500);
}
.c-toc__list{margin:0;padding:0;list-style:none;}
.c-toc__link{
  display:block;
  padding:var(--space-2) 0 var(--space-2) var(--space-3);
  border-left:2px solid var(--color-border);
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  color:var(--color-ink-600);
  text-decoration:none;
}
.c-toc__link:hover{color:var(--color-brand-700);text-decoration:none;}
.c-toc__link.is-active{
  color:var(--color-brand-700);
  border-left-color:var(--color-brand-600);
  font-weight:var(--font-weight-medium);
}
/* <details> 版（平板与移动） */
.c-toc__details{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 var(--space-4);}
.c-toc__summary{
  cursor:pointer;
  min-height:var(--touch-min);
  display:flex;
  align-items:center;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-800);
}
.c-toc__details[open] .c-toc__summary{margin-bottom:var(--space-2);}

/* 文章页两栏：正文 8 列 + 目录 3 列 */
.c-article-layout{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gutter);
  align-items:start;
}
.c-article-layout__main{grid-column:span 8;min-width:0;}
.c-article-layout__aside{grid-column:span 3;min-width:0;}

/* ---------------------------------------------------------------------------
   3.16 .c-mobile-bar（§5.14）移动端常驻操作条
   -------------------------------------------------------------------------- */
.c-mobile-bar{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:var(--space-2);
  position:fixed;
  inset:auto 0 0 0;
  z-index:var(--z-mobile-bar);
  padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  background:var(--color-mobile-bar-bg);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--color-border);
  box-shadow:0 -2px 12px var(--color-overlay-shadow);
}
.c-mobile-bar__btn{--_h:48px;}

/* ---------------------------------------------------------------------------
   3.17 .c-modal（§5.15）微信二维码弹层
   -------------------------------------------------------------------------- */
.c-modal{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:grid;
  place-items:center;
  padding:var(--space-6);
  background:var(--color-overlay-strong);
  opacity:0;
  transition:opacity 160ms ease-out;
}
.c-modal[hidden]{display:none;}
.c-modal.is-open{opacity:1;}
.c-modal__panel{
  position:relative;
  width:100%;
  max-width:var(--modal-w);
  padding:var(--space-7) var(--space-6-5) var(--space-6-5);
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  text-align:center;
  transform:scale(.96);
  opacity:0;
  transition:transform 200ms ease-out,opacity 200ms ease-out;
}
.c-modal.is-open .c-modal__panel{transform:scale(1);opacity:1;}
.c-modal__close{
  position:absolute;
  top:var(--space-1);
  right:var(--space-1);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--touch-min);
  height:var(--touch-min);
  padding:0;
  border:0;
  background:none;
  color:var(--color-ink-500);
}
.c-modal__close:hover{color:var(--color-ink-900);}
.c-modal__title{
  margin:0 0 var(--space-5);
  font-size:var(--font-size-md-sm);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
}
.c-modal__qr{
  display:block;
  width:var(--qr-modal);
  height:var(--qr-modal);
  max-width:100%;
  margin:0 auto var(--space-4);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  object-fit:contain;
}
.c-modal__id{
  display:block;
  margin-bottom:var(--space-3);
  font-size:var(--font-size-ui);
  font-weight:var(--font-weight-medium);
  color:var(--color-ink-800);
  word-break:break-all;
}
.c-modal__note{
  margin:var(--space-3) 0 0;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
}

/* ---------------------------------------------------------------------------
   3.18 .c-stat（§5.16）
   -------------------------------------------------------------------------- */
.c-stat{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--grid-gutter);
  margin:0;
  padding:0;
  list-style:none;
}
.c-stat__item{
  min-width:0;
  padding-left:var(--space-6);
  border-left:1px solid var(--color-border);
}
.c-stat__item:first-child{padding-left:0;border-left:0;}
.c-stat__num{
  display:inline-block;
  font-size:var(--font-size-3xl);
  line-height:1.1;
  font-weight:var(--font-weight-bold);
  color:var(--color-ink-900);
}
.c-stat__unit{
  margin-left:var(--space-0-5);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  color:var(--color-ink-600);
}
.c-stat__desc{
  margin:var(--space-2) 0 0;
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-600);
}
/* 深色底变体 */
.c-stat--on-dark .c-stat__num{color:var(--color-on-dark);}
.c-stat--on-dark .c-stat__unit,
.c-stat--on-dark .c-stat__desc{color:var(--color-on-dark-muted);}
.c-stat--on-dark .c-stat__item{border-left-color:var(--color-on-dark-border);}

/* ---------------------------------------------------------------------------
   3.19 .c-article（§5.18）
   -------------------------------------------------------------------------- */
.c-article{
  max-width:var(--container-narrow);
  font-size:var(--font-size-md);
  line-height:var(--line-height-loose);
  color:var(--color-ink-800);
}
.c-article p{margin:0 0 var(--space-5);}
.c-article h2{
  font-size:var(--font-size-3xl);
  line-height:1.25;
  font-weight:var(--font-weight-bold);
  color:var(--color-ink-900);
  margin:var(--space-9) 0 var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  scroll-margin-top:calc(var(--header-h) + var(--space-5));
}
.c-article h3{
  font-size:var(--font-size-xl);
  line-height:var(--line-height-snug);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-900);
  margin:var(--space-7) 0 var(--space-3);
  scroll-margin-top:calc(var(--header-h) + var(--space-5));
}
.c-article h4{
  margin:var(--space-6) 0 var(--space-2);
  color:var(--color-ink-900);
}
.c-article ul,
.c-article ol{margin:0 0 var(--space-5);padding-left:var(--space-6);}
.c-article li{margin-bottom:var(--space-2);line-height:var(--line-height-loose);}
.c-article li::marker{color:var(--color-pillar-comply);}
.c-article a{color:var(--color-brand-600);text-underline-offset:3px;text-decoration-thickness:1px;}
.c-article a:hover{color:var(--color-brand-700);}
.c-article blockquote{
  margin:var(--space-6) 0;
  padding:var(--space-5) var(--space-6);
  background:var(--color-brand-50);
  border-left:3px solid var(--color-brand-600);
  border-radius:var(--radius-sm);
  color:var(--color-ink-700);
  font-size:var(--font-size-base);
}
.c-article blockquote p:last-child{margin-bottom:0;}
.c-article figure{margin:var(--space-6) 0 var(--space-7);}
.c-article figcaption{
  margin-top:var(--space-2);
  font-size:var(--font-size-caption);
  line-height:var(--line-height-normal);
  color:var(--color-ink-500);
}
.c-article table{
  width:100%;
  border-collapse:collapse;
  margin:var(--space-6) 0 var(--space-7);
  font-size:var(--font-size-sm);
}
.c-article th{
  background:var(--color-ink-100);
  text-align:left;
  padding:var(--space-3) var(--space-3-5);
  font-weight:var(--font-weight-semibold);
  color:var(--color-ink-800);
  border-bottom:1px solid var(--color-border);
}
.c-article td{
  padding:var(--space-3) var(--space-3-5);
  border-bottom:1px solid var(--color-border);
  vertical-align:top;
}
.c-article__disclaimer{margin-top:var(--space-8);}

/* ============================================================================
   4. 工具类（只做间距 / 对齐 / 隐藏，不承载视觉）
   ========================================================================== */

.u-visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* 每页第一个可聚焦元素：跳到主要内容 */
.u-skip-link{
  position:absolute;
  top:var(--space-2);
  left:var(--space-2);
  z-index:calc(var(--z-modal) + 1);
  padding:var(--space-2) var(--space-4);
  background:var(--color-surface);
  color:var(--color-brand-700);
  border:1px solid var(--color-brand-600);
  border-radius:var(--radius-sm);
  font-size:var(--font-size-sm);
  text-decoration:none;
  transform:translateY(-200%);
}
.u-skip-link:focus{transform:translateY(0);}

.u-text-center{text-align:center;}
.u-text-right{text-align:right;}
.u-mt-sm{margin-top:var(--space-4);}
.u-mt-md{margin-top:var(--space-6);}
.u-mt-lg{margin-top:var(--space-9);}
.u-mb-md{margin-bottom:var(--space-6);}
.u-mb-lg{margin-bottom:var(--space-9);}
.u-hidden{display:none !important;}
.u-nowrap{white-space:nowrap;}
.u-full{width:100%;}

/* ============================================================================
   5. 状态类汇总（由 JS 增删）
   ========================================================================== */

.is-active{}
.is-open{}
.is-loading{}
.has-error{}
.is-success{}
.is-copied{}
.is-scrolled{}

/* 打开抽屉 / 弹层时锁滚动 */
body.is-nav-open,
body.is-modal-open{overflow:hidden;}

/* ============================================================================
   6. 无障碍：焦点环不可被去掉
   ========================================================================== */

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset:var(--focus-ring-offset);
  border-radius:var(--radius-sm);
}
/* 深色底上换白色环（品牌绿在深绿/暖黑底上看不见） */
.c-hero--home :focus-visible,
.l-section--dark :focus-visible,
.c-footer :focus-visible{
  outline-color:var(--color-on-dark);
  box-shadow:0 0 0 4px var(--color-on-dark-ring);
}
.c-btn--primary:focus-visible{outline-color:var(--color-brand-600);outline-offset:3px;}

/* 减少动效：关掉位移与旋转，但保留颜色变化 */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .c-card--entry:hover{transform:none;}
  .c-btn__spinner{
    animation:none;
    border-color:var(--color-spinner-track);
    border-top-color:var(--color-on-brand);
  }
  .c-modal__panel{transform:none;}
}

/* ============================================================================
   7. 响应式（三档，唯一允许的三个断点）
   ========================================================================== */

/* ---------- 桌面 ≥1200：显式声明，避免"桌面继承移动"的歧义 ---------- */
@media (min-width:1200px){
  .c-nav-toggle{display:none;}
  .c-nav__drawer,
  .c-nav__scrim{display:none;}
  .c-mobile-bar{display:none;}
  .c-toc__details{display:none;}
}

/* ---------- 平板 768–1199 ---------- */
@media (min-width:768px) and (max-width:1199px){
  /* 头部：导航仍横排，电话文本隐藏，CTA 保留
     ------------------------------------------------------------------------
     768 档横向溢出的根因（实测，不是估计）：
       可用宽度 = 768 - 2×24(container-pad) = 720
       头部内容 = logo 108 + 2×24(gap) + 导航 608 + CTA(被压到 65) = 853 → 溢出 85
     而 6 个中文标签一个字都没法换行，标签文字本身就占 473px（13px × 35 字），
     所以光收 gap 不够，必须同时收这几样，顺序按"影响面从小到大"：
       1) 头部左右内距 24→16（只作用于 .c-header，不动其他区块栅格）
       2) logo 高度 26→24（--logo-h-mobile，令牌阶梯里已有的一档）
       3) 头部 gap 24→8、导航 gap 20→8（--space-2）
       4) 导航字号 14→13（--font-size-caption，最后才动字号）
       5) CTA 锁 min-width:100px 并收内距，避免再被 flex 压成 65px
     全部用现有令牌，没有新增魔法值；标签文字一个字未删、未改。
     收窄后 768 档实测 inner 736/736，恰好装下，不溢出。
     ⚠ 1200+ 桌面档在本媒体查询之外，一个字没动。
     ------------------------------------------------------------------------ */
  .c-header .l-container{padding-inline:var(--space-4);}
  .c-header__inner{gap:var(--space-2);}
  .c-header__logo{height:var(--logo-h-mobile);}
  .c-header__logo img{height:var(--logo-h-mobile);}
  .c-header__phone{display:none;}
  .c-nav__list{gap:var(--space-2);}
  .c-nav__link,
  .c-nav__toggle{font-size:var(--font-size-caption);}
  .c-header__actions .c-btn{min-width:100px;padding-inline:var(--space-4);}

  /* 首屏：单列；首页视觉块降为右侧背景浮层，内页/城市页的右栏卡改为整宽下移 */
  .c-hero--home{padding-block:var(--space-10) var(--space-10);}
  .c-hero__content{grid-column:span 12;position:relative;z-index:1;}
  .c-hero--home .c-hero__visual{
    grid-column:span 12;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:46%;
    opacity:.28;
    pointer-events:none;
  }
  .c-hero--home .c-hero__media{min-height:320px;height:100%;opacity:.9;}
  /* 内页 / 城市页的右栏卡：不浮层化，放到 CTA 下方整宽显示 */
  .c-hero--page .c-hero__content,
  .c-hero--page .c-hero__visual,
  .c-hero--city .c-hero__visual{
    grid-column:span 12;
    position:static;
    width:auto;
    opacity:1;
    pointer-events:auto;
  }
  .c-hero--page .c-hero__visual{margin-top:var(--space-6);}

  /* 栅格：四列收成 2×2，三列保持 */
  .l-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}

  /* 六步流程：3 列 × 2 行，行末项隐藏连接线 */
  .c-step__list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .c-step__item:nth-child(3n)::before{display:none;}

  /* 表格：字号降一档，最小宽收窄 */
  .c-table{min-width:var(--table-min-w-tablet);font-size:var(--font-size-caption);}
  .c-table th,
  .c-table td{padding:var(--space-3-5) var(--space-3);}

  /* 资讯卡：封面收窄 */
  .c-card__cover{width:160px;height:104px;}

  /* 页脚：2×2，品牌块跨 2 列 */
  .c-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-7);}
  .c-footer__brand{grid-column:span 2;}

  /* 文章页：目录折叠为顶部 details */
  .c-article-layout__main{grid-column:span 12;}
  .c-article-layout__aside{grid-column:span 12;}
  .c-toc--sidebar{display:none;}
  .c-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
  .c-stat__item:nth-child(odd){padding-left:0;border-left:0;}
}

/* ---------- 移动 <768 ---------- */
@media (max-width:767px){
  /* 移动端为底部常驻条预留空间，避免遮住页脚最后一行 */
  body{padding-bottom:calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--space-2));}
  body.is-nav-open .c-mobile-bar,
  body.is-modal-open .c-mobile-bar{display:none;}

  /* 头部：抽屉形态 */
  .c-header__inner{gap:var(--space-3);}
  .c-header__logo{height:var(--logo-h-mobile);}
  .c-header__logo img{height:var(--logo-h-mobile);}
  .c-header__phone,
  .c-header__actions .c-btn{display:none;}
  .c-header__actions{gap:var(--space-2);}
  .c-nav{display:none;}
  .c-nav-toggle{display:flex;margin-left:auto;}
  .c-nav__scrim{display:block;pointer-events:none;}
  body.is-nav-open .c-nav__scrim{pointer-events:auto;}
  .c-nav__drawer{display:flex;}

  /* 首屏 */
  .c-hero--home{
    padding-block:var(--space-8) var(--space-9);
    min-height:0;
    display:block;
  }
  .c-hero__content,
  .c-hero__visual{grid-column:span 12;}
  /* 首页视觉块在移动端隐藏；内页/城市页的右栏卡保留，置于 CTA 之后整宽显示 */
  .c-hero--home .c-hero__visual{display:none;}
  .c-hero--page .c-hero__visual,
  .c-hero--city .c-hero__visual{
    display:block;
    position:static;
    width:auto;
    opacity:1;
    pointer-events:auto;
    margin-top:var(--space-5);
  }
  .c-hero__title{max-width:none;}
  .c-hero__lead{margin-bottom:var(--space-6);}
  .c-hero__actions{flex-direction:column;align-items:stretch;}
  .c-hero__actions .c-btn{width:100%;}
  .c-hero--page,
  .c-hero--city{padding-block:var(--space-7) var(--space-7);}
  .c-hero--page .c-hero__content,
  .c-hero--page .c-hero__visual{grid-column:span 12;}
  .c-hero--page .c-hero__visual{margin-top:var(--space-5);}
  .c-hero--article{padding-block:var(--space-7) var(--space-6);}
  .c-hero__aside{padding:var(--space-5);}

  /* 栅格全部单列（两列以上的对照交给组件自身：c-stat / 页脚底条） */
  .l-grid,
  .l-grid--2,
  .l-grid--3,
  .l-grid--4{grid-template-columns:minmax(0,1fr);}

  /* 组件内距收窄 */
  .c-card,
  .c-card--entry,
  .c-card--scene,
  .c-card--city,
  .c-card--case{padding:var(--space-5);}
  .c-card--entry .c-icon--xl{width:32px;height:32px;}
  .c-card--city .c-card__title{font-size:var(--font-size-xl);}

  /* 资讯卡改竖排 */
  .c-card--article{flex-direction:column;gap:var(--space-3);padding:var(--space-4);}
  .c-card__cover{width:100%;height:auto;aspect-ratio:16 / 9;}

  /* 关联入口卡 */
  .c-card--link{height:auto;min-height:64px;padding:var(--space-4) var(--space-4);}

  /* 六步流程：纵向时间轴 */
  .c-step__list{grid-template-columns:minmax(0,1fr);gap:0;}
  .c-step__item{
    padding-top:0;
    padding-left:44px;
    padding-bottom:var(--space-6);
  }
  .c-step__item::before{
    left:13px;
    top:28px;
    bottom:-8px;
    right:auto;
    width:2px;
    height:auto;
  }
  .c-step__item:last-child{padding-bottom:0;}
  /* --detail 变体在移动端单列，圆点回到左上 */
  .c-step--detail .c-step__item{padding:var(--space-5) var(--space-5) var(--space-5) var(--space-9);}
  .c-step--detail .c-step__dot{top:var(--space-5);left:var(--space-4);}
  .c-step--detail .c-step__item::before{display:none;}

  /* 表格：横向滚动 + 首列吸附 */
  .c-table{min-width:var(--table-min-w);font-size:var(--font-size-caption);}
  .c-table th,
  .c-table td{padding:var(--space-3-5) var(--space-3);}
  .c-table td:first-child,
  .c-table th:first-child{
    position:sticky;
    left:0;
    z-index:1;
    background:var(--color-surface);
    box-shadow:6px 0 8px -6px var(--color-line-shadow);
  }
  .c-table thead th:first-child{background:var(--color-ink-100);}

  /* 表单 */
  .c-form{gap:var(--space-4);}
  .c-form__success{padding:var(--space-6) var(--space-5);}
  .c-form__success-actions{flex-direction:column;align-items:stretch;width:100%;}
  .c-form__success-actions .c-btn{width:100%;}

  /* 面包屑：单行省略 */
  .c-breadcrumb__list{flex-wrap:nowrap;overflow:hidden;}
  .c-breadcrumb__item{flex:0 1 auto;}

  /* 页脚：品牌块整行 + 2×2，底部让出底条高度 */
  .c-footer{padding-top:var(--space-9);}
  .c-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-6);}
  .c-footer__brand{grid-column:span 2;}
  .c-footer__qr img{width:80px;height:80px;}
  .c-footer__link{padding-block:var(--space-2-5);}
  .c-footer__bottom{
    margin-top:var(--space-7);
    font-size:var(--font-size-2xs);
    line-height:1.8;
  }
  .c-footer{
    padding-bottom:calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--space-6));
  }

  /* 移动底条 */
  .c-mobile-bar{display:grid;}

  /* 弹层 */
  .c-modal{padding:var(--space-4);}
  .c-modal__panel{width:min(92vw,var(--modal-w));padding:var(--space-6) var(--space-5) var(--space-5);}
  .c-modal__qr{width:var(--qr-modal-mobile);height:var(--qr-modal-mobile);}
  .c-modal__panel .c-btn{width:100%;}

  /* 统计：2×2，无竖线 */
  .c-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);}
  .c-stat__item{padding-left:0;border-left:0;}
  .c-stat__num{font-size:var(--font-size-2xl);}

  /* 文章页：目录折叠 */
  .c-article-layout__main,
  .c-article-layout__aside{grid-column:span 12;}
  .c-toc--sidebar{display:none;}
  .c-article{font-size:var(--font-size-base);}
  .c-article h2{margin-top:var(--space-8);}

  /* 提示块内距 */
  .c-callout{padding:var(--space-4) var(--space-5);}
  .c-hero__code{font-size:var(--font-size-5xl);}
}