/* ════════ AutoAI 官网共享样式 ════════
   ⚠️ 2026-09-23 起官网是**亮色（暖米白）**。token 值**不再**与
   frontend/public/product.html:10-26 一致 —— 那条「风格延续 product.html、只做增强」
   的约定已被用户明确推翻。product.html 自带独立 <style> 且**不引用本文件**，
   所以它仍是暗色，两者是**有意**分家的：不要再把 dark token 同步回来。

   ── 双金制（本文件最容易改错的地方）────────────────────────────────
   --gold     #C9A96E  只当**填充**：按钮底 / 标签底 / 徽章底 / 装饰描边，配 #000 字。
                       它在本站底色上只有 2.24:1，**连大字号 3:1 都不过**，
                       所以任何 `color: var(--gold)` 都是 bug。
   --gold-ink #7A5C2E  专当**墨**：文字 / 链接 / 焦点环 / 流程节点描边。
   绿色同理分家：--green 填充（2.39:1）、--green-ink 文字（5.43:1）。
   因为填充色没动，按钮与标签一行未改；改的是全部 20 处「金/绿当文字」。
   新增文字色前先看文件末尾「对比度基线」，别凭肉眼估——金色在白底上看着
   「挺清楚」是错觉，它比 WCAG 门槛低一半还多。 */

/* ⚠️ 2026-09-24 移除 Google Fonts 外链 —— 它是**阻塞渲染**的，国内访问
   fonts.googleapis.com 不通（DNS 被劫持，实测 25s 超时才失败），
   浏览器会一直等它，导致官网首屏白屏卡 25 秒。页面本身只要 40ms。
   --font-display 已有本地回退链（'Songti SC','STSong',serif），中文衬线观感无实质损失。
   若将来确实要用 Noto Serif SC，请把字体文件自托管 + 本地 @font-face，
   **不要**再加回这句外链 @import。 */

:root {
  /* 声明本页只支持亮色：否则系统处于深色模式时，浏览器会把原生
     <select> 弹层、滚动条、自动填充底色渲染成深色，与亮色页面打架。 */
  color-scheme: light;

  --bg: #FAF8F4;                            /* 暖米白 */
  --bg-card: #FFFFFF;
  --gold: #C9A96E;                          /* 填充专用；白底 2.24:1 —— 禁作文字色 */
  --gold-ink: #7A5C2E;                      /* 文字/描边专用；白底 6.18:1 ✓ */
  --gold-dim: rgba(201,169,110,0.16);       /* 浅金底：徽章 / 对比表高亮列 */
  --gold-mid: rgba(201,169,110,0.62);       /* 金描边：输入框 / 卡片 hover / 表头分隔 */
  --gold-glow: rgba(201,169,110,0.16);      /* Hero、CTA 的径向光晕 */
  --text: #1C1A17;                          /* 暖近黑 */
  --text-dim: rgba(28,26,23,0.72);          /* 正文主力色；暖米白底 6.68:1 ✓ */
  --text-muted: rgba(28,26,23,0.52);        /* 仅装饰；3.49:1，不得用于正文（见文件末尾） */
  --border: rgba(28,26,23,0.10);
  --green: #07C160;                         /* 填充专用；白底 2.39:1 —— 禁作文字色 */
  --green-ink: #0E7A3C;                     /* 文字专用；白底 5.43:1 ✓ */
  --shadow: rgba(28,26,23,0.13);            /* 暗色下靠 rgba(0,0,0,.5~.6) 撑深度，
                                               亮色下同一数值会变成一块脏灰，故独立成 token */
  --font-display: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 官网新增（不改既有） */
  --max-w: 1200px;
  --nav-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased; line-height: 1.7; overflow-x: hidden;
}
a { color: var(--gold-ink); }

/* ── 导航 ── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: var(--nav-h);
  /* 这里必须跟着底色走：硬编码的 rgba(8,8,12,.85) 不改，导航会成一条黑带压在亮页顶部 */
  background: rgba(250,248,244,0.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.site-nav .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-nav .logo .icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #a68a4e);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px var(--gold-dim);
}
.site-nav .logo .icon svg { width: 16px; height: 16px; }
.site-nav .logo span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 2px; color: var(--text); }
.site-nav .links { display: flex; gap: 32px; list-style: none; }
.site-nav .links a { color: var(--text-dim); text-decoration: none; font-size: 13px; letter-spacing: 1px; transition: color 0.3s; }
.site-nav .links a:hover, .site-nav .links a.active { color: var(--gold-ink); }
.site-nav .nav-cta {
  padding: 9px 20px; border-radius: 6px; background: var(--gold); color: #000;
  font-size: 13px; font-weight: 600; letter-spacing: 1px; text-decoration: none; transition: box-shadow 0.3s;
}
.site-nav .nav-cta:hover { box-shadow: 0 8px 30px var(--gold-dim); }

/* ── 版心 / 通用 ── */
section.blk { padding: 120px 48px; max-width: var(--max-w); margin: 0 auto; position: relative; }
section.blk.wide { max-width: none; }
.section-label { font-size: 11px; letter-spacing: 4px; color: var(--gold-ink); margin-bottom: 24px; display: block; }
.section-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 700; line-height: 1.3; margin-bottom: 16px; letter-spacing: 2px; }
.section-sub { font-size: 16px; color: var(--text-dim); max-width: 640px; }
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }
.gold { color: var(--gold-ink); }
.dim { color: var(--text-dim); }

/* ── Hero ── */
.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--nav-h) + 40px) 48px 80px; position: relative; }
.hero::before {
  content: ''; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%); pointer-events: none;
}
.hero h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 58px); font-weight: 900; line-height: 1.2; letter-spacing: 3px; position: relative; z-index: 1; }
.hero p.lead { font-size: 18px; color: var(--text-dim); margin-top: 24px; max-width: 620px; position: relative; z-index: 1; letter-spacing: 1px; }
.hero .hero-meta { font-size: 13px; color: var(--text-dim); margin-top: 24px; position: relative; z-index: 1; letter-spacing: 1px; }

/* 录屏 */
.hero-video {
  position: relative; z-index: 1; margin-top: 56px; width: 100%; max-width: 960px;
  aspect-ratio: 16/9;                     /* 高度由容器自己撑住：视频加载失败也不塌成一条线 */
  border-radius: 12px; border: 1px solid var(--border); overflow: hidden;
  /* 这是「录屏缺失 / 加载失败」时的占位底。亮色下改为中性浅底的空态面板，
     不做成深色播放器 chrome——本站没有真实录屏，深色框会读成「有东西没加载出来」。 */
  background: linear-gradient(135deg, #F2EFE8, #E9E4DA);
  box-shadow: 0 30px 90px var(--shadow);
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 录屏缺失 / 加载失败时 site.js 加 .no-asset：显示渐变底 + 文案，不留白也不塌陷 */
.hero-video.no-asset { display: flex; align-items: center; justify-content: center; }
.hero-video.no-asset video { display: none; }
.hero-video.no-asset::after { content: '演示录屏待录制'; color: var(--text-dim); font-size: 13px; letter-spacing: 2px; }

/* ── 按钮 ── */
.btn { display: inline-block; padding: 16px 48px; background: var(--gold); color: #000; border-radius: 8px; font-size: 15px; font-weight: 600; letter-spacing: 2px; text-decoration: none; border: none; cursor: pointer; transition: box-shadow 0.3s, transform 0.3s; }
.btn:hover { box-shadow: 0 8px 40px var(--gold-dim); transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--gold-ink); border: 1px solid var(--gold-mid); }
.btn.sm { padding: 10px 24px; font-size: 13px; letter-spacing: 1px; }
.btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; position: relative; z-index: 1; }

/* ── 卡片 / 网格 ── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; transition: transform 0.3s, border-color 0.3s; }
.card:hover { transform: translateY(-4px); border-color: var(--gold-mid); }
.card h3, .card h4 { font-family: var(--font-display); letter-spacing: 1px; margin-bottom: 12px; }
.card h3 { font-size: 22px; }
.card h4 { font-size: 18px; }
.card p { color: var(--text-dim); font-size: 14px; }
.grid { display: grid; gap: 24px; margin-top: 56px; }
.grid.g2 { grid-template-columns: repeat(2, 1fr); }
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }

/* 编号列表（痛点 / 对比） */
.num-item { display: flex; gap: 24px; align-items: flex-start; }
/* 大字序号是底纹式装饰（暗色下靠 25% 金色微光），故用墨色压到很低不透明度，
   保持「看得见但不抢」；若改用 --gold 会在白底上直接消失。 */
.num-item .num { font-family: var(--font-display); font-size: 48px; font-weight: 900; color: var(--gold-ink); opacity: 0.28; line-height: 1; flex-shrink: 0; }
.num-item h4 { font-family: var(--font-display); font-size: 20px; margin-bottom: 8px; letter-spacing: 1px; }
.num-item p { color: var(--text-dim); font-size: 14px; }

/* ── 徽章（语义固定：绿=AI自动 / 金=需人工） ── */
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.badge.auto { color: var(--green-ink); border: 1px solid rgba(14,122,60,0.30); background: rgba(7,193,96,0.10); }
.badge.human { color: var(--gold-ink); border: 1px solid var(--gold-mid); background: var(--gold-dim); }

/* ── 边界清单（信任主轴） ── */
.boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 56px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.boundary .col { padding: 40px; }
.boundary .col.never { background: var(--bg-card); border-right: 1px solid var(--border); }
.boundary .col.always { background: rgba(7,193,96,0.05); }
.boundary h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 24px; letter-spacing: 1px; }
.boundary ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.boundary li { display: flex; gap: 12px; font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.boundary li .mk { flex-shrink: 0; font-weight: 700; }
.boundary .never .mk { color: var(--gold-ink); }
.boundary .always .mk { color: var(--green-ink); }

/* ── 竞品对比表（激活 product.html:312-343 的既有设计） ── */
.comp-wrap { overflow-x: auto; margin-top: 56px; }
.comp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.comp-table th, .comp-table td { padding: 18px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.comp-table thead th { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; color: var(--text); border-bottom: 1px solid var(--gold-mid); }
.comp-table tbody td { color: var(--text-dim); }
.comp-table .col-autoai { background: var(--gold-dim); color: var(--text); font-weight: 600; }
.comp-table thead th.col-autoai { color: var(--gold-ink); }

/* ── 定价 ── */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; align-items: start; }
/* featured 卡的 1px 金描边保留 --gold：它是**装饰性分组边**，不是控件边界
   （卡片另有金底标签与阴影区分），金色细线在亮底上肉眼可辨，不必为 3:1 牺牲观感。 */
.tier { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 40px 32px; position: relative; }
.tier.featured { border-color: var(--gold); box-shadow: 0 20px 60px var(--shadow); }
.tier .tier-tag { position: absolute; top: -12px; left: 32px; padding: 4px 14px; border-radius: 20px; background: var(--gold); color: #000; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.tier h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; }
.tier .price { font-family: var(--font-display); font-size: 44px; font-weight: 900; color: var(--gold-ink); line-height: 1; margin: 20px 0 4px; }
.tier .price small { font-size: 14px; font-weight: 400; color: var(--text-dim); letter-spacing: 1px; }
.tier .yearly { font-size: 13px; color: var(--text-dim); margin-bottom: 28px; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--text-dim); }
.tier ul li::before { content: '—'; color: var(--gold-ink); margin-right: 10px; }

/* 开通实施费横幅：必收的一次性费用，压在价位卡下方。它跟三档是**不同性质**的钱，
   放成一行小字就会被当成脚注跳过 —— 故给满宽金底 + 粗金边 + 放大金额。
   配色守双金制：--gold 只做描边/底色，金额文字用 --gold-ink（6.18:1）。 */
.fee-band { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px;
  margin-top: 48px; padding: 26px 32px; text-align: center;
  background: var(--gold-dim); border: 1px solid var(--gold-mid); border-left: 6px solid var(--gold); border-radius: 12px; }
.fee-band .fee-amount { font-family: var(--font-display); font-size: 38px; font-weight: 900; color: var(--gold-ink); line-height: 1; }
.fee-band .fee-label { font-size: 15px; color: var(--text); letter-spacing: 1px; }
.fee-band .fee-tag { display: inline-block; padding: 2px 10px; border-radius: 20px; background: var(--gold); color: #000; font-size: 12px; font-weight: 600; letter-spacing: 1px; }
.fee-band .fee-note { flex: 1 1 100%; margin-top: 10px; font-size: 13px; color: var(--text-dim); }

/* ── 电话模型 / 流程（沿用 product.html 的 tl-* 视觉语言） ── */
.flow { display: flex; flex-direction: column; gap: 0; margin-top: 56px; position: relative; }
.flow::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold), var(--gold-dim), var(--border)); }
.flow-item { display: flex; gap: 40px; padding: 32px 0; position: relative; }
.flow-item .flow-time { flex-shrink: 0; width: 120px; text-align: right; font-size: 13px; color: var(--gold-ink); letter-spacing: 2px; padding-top: 6px; }
/* 节点环：2px 描边是「控件级」的可见性要求，用墨色而非浅金，否则白底上几乎看不见 */
.flow-item .flow-dot { position: absolute; left: 74px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold-ink); z-index: 2; }
.flow-item .flow-body { flex: 1; padding-left: 40px; }
.flow-item .flow-body h4 { font-family: var(--font-display); font-size: 18px; margin-bottom: 8px; letter-spacing: 1px; }
.flow-item .flow-body p { color: var(--text-dim); font-size: 14px; }

/* ── 反例卡（真实数据回源） ── */
.counter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.counter .c-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
.counter .c-wrong { color: var(--text-dim); font-size: 14px; text-decoration: line-through; margin-bottom: 16px; }
.counter .c-right { color: var(--text); font-size: 15px; margin-bottom: 16px; }
.counter .c-why { color: var(--text-dim); font-size: 13px; }

/* ── 合规页 / 长文 ── */
.doc { max-width: 800px; margin: 0 auto; padding: calc(var(--nav-h) + 80px) 48px 120px; }
.doc h1 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 38px); letter-spacing: 2px; margin-bottom: 12px; }
.doc .doc-meta { color: var(--text-dim); font-size: 13px; margin-bottom: 48px; }
.doc h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; margin: 48px 0 16px; color: var(--gold-ink); }
.doc p, .doc li { color: var(--text-dim); font-size: 14px; line-height: 1.9; }
.doc ul, .doc ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.doc .notice { margin: 40px 0; padding: 20px 24px; border-left: 2px solid var(--gold-ink); background: var(--gold-glow); color: var(--text); font-size: 14px; }

/* ── 留资表单 ──
   全站唯一的表单，且没有 <label>（placeholder 就是字段名），所以焦点可见性是硬要求。
   原方案 outline:none 会把键盘用户的焦点指示整个抹掉，这里改为保留 outline 槽位 + 金色焦点环。
   焦点环用 --gold-ink 而非 --gold：浅金在白底上只有 2.24:1，等于把焦点指示又抹了一次。 */
.lead-form { max-width: 520px; margin: 56px auto 0; display: flex; flex-direction: column; gap: 16px; position: relative; z-index: 1; }
.lead-form input, .lead-form select {
  width: 100%; padding: 14px 18px; border-radius: 8px; font-size: 15px; font-family: var(--font-body);
  background: var(--bg-card); border: 1px solid var(--gold-mid); color: var(--text);
  outline: 2px solid transparent; outline-offset: 2px;
  transition: border-color 0.3s, outline-color 0.3s;
}
.lead-form input:focus, .lead-form select:focus { border-color: var(--gold-ink); }
.lead-form input:focus-visible, .lead-form select:focus-visible { outline-color: var(--gold-ink); }
.lead-form input::placeholder { color: var(--text-dim); }
/* #FF6B6B 是暗色底上的浅红，在暖米白上只有 2.5:1 读不出；换成深红 5.13:1。
   这是**转化失败路径上唯一的提示**，看不见等于用户不知道发生了什么事。 */
.lead-form .err { color: #C0392B; font-size: 13px; text-align: left; min-height: 18px; }
.lead-form .ok { color: var(--green-ink); font-size: 14px; text-align: center; }
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── 联系方式三路 ── */
.contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.contact { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 32px; text-align: center; }
.contact .c-icon { font-size: 28px; margin-bottom: 16px; }
.contact h4 { font-family: var(--font-display); font-size: 17px; margin-bottom: 10px; letter-spacing: 1px; }
.contact p { color: var(--text-dim); font-size: 13px; }
.contact .qr { width: 160px; height: 160px; margin: 0 auto 16px; border-radius: 8px; background: var(--bg) center/cover no-repeat; border: 1px solid var(--border); display: block; object-fit: cover; }

/* ── CTA ── */
.cta { text-align: center; padding: 160px 48px; position: relative; }
.cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%); pointer-events: none; }
.cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 700; position: relative; z-index: 1; letter-spacing: 2px; }
.cta p { color: var(--text-dim); margin-top: 16px; font-size: 16px; position: relative; z-index: 1; }

/* ── 页脚 ──
   小字号文字一律用 --text-dim（暖米白底 6.68:1 过 AA），不用 --text-muted（3.49:1，12px 下不达标）。
   页脚在此处承载公司主体与 ICP 备案号（合规门面），必须看得清。 */
footer.site-footer { padding: 64px 48px 40px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 12px; letter-spacing: 1px; }
footer.site-footer .f-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
footer.site-footer .f-brand { font-family: var(--font-display); font-size: 15px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 12px; }
footer.site-footer a { color: var(--text-dim); text-decoration: none; transition: color 0.3s; }
footer.site-footer a:hover { color: var(--gold-ink); }
footer.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
footer.site-footer .f-col-title { color: var(--text-dim); font-size: 12px; letter-spacing: 2px; margin-bottom: 16px; }
footer.site-footer .f-bottom { max-width: var(--max-w); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* 备案号链接（页脚 + about 页「备案信息」卡片共用）。
   只加下划线，**不动颜色**：页脚里它沿用 footer 链接的 --text-dim（6.48:1）、
   hover 走 --gold-ink（5.51:1），about 卡片里沿用全局 a 的 --gold-ink ——
   两个色都已在下方对比度基线里，没有新配色要复测。
   下划线是必须的：WCAG 1.4.1 要求「颜色不得是区分链接的唯一手段」，
   而这行里公司名（纯文本）和备案号（链接）并排，只靠颜色区分不合格。
   选择器要带 footer.site-footer 前缀才压得住上面那条 a{text-decoration:none}。 */
footer.site-footer a.icp-link { text-decoration: underline; text-underline-offset: 2px; }

/* ── reveal 动效（与 product.html:362-366 的观感一致） ──
   ⚠️ 与 product.html 的唯一（有意）差异：隐藏态挂在 .reveal-init 上，由 site.js 添加，
   绝不写在 .reveal 自身。若 .reveal 默认 opacity:0，则 site.js 一旦失败（被拦截 / 抛异常）
   整页恒黑——首页是留资落地页，黑屏等于转化归零（spec §5.7）。JS 没跑就默认可见。 */
.reveal { transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-init { opacity: 0; transform: translateY(40px); }
.reveal-init.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── 响应式 ── */
@media (max-width: 900px) {
  /* 移动端导航：两行（logo + CTA 一行，链接一行横向可滑）
     原方案是 .links { display: none }，但全站没有任何汉堡按钮 ——
     手机上等于整站没有导航。而本站流量主要来自企微/朋友圈分享，是手机端为主的。
     改为始终可见（不依赖 JS），链接行横向可滑，容纳 5 项不换行、不挤压 CTA。
     头部因此变高约 40px；首屏正文的内联 padding-top 是 calc(var(--nav-h) + 120px)，
     还剩约 80px 余量，不会被压住。 */
  .site-nav { padding: 8px 16px; height: auto; min-height: var(--nav-h); flex-wrap: wrap; }
  .site-nav .links {
    order: 3; flex-basis: 100%;
    display: flex; gap: 18px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 0 10px;
    scrollbar-width: none;
  }
  .site-nav .links::-webkit-scrollbar { display: none; }
  .site-nav .links a { white-space: nowrap; }
  section.blk { padding: 72px 24px; }
  .grid.g3, .grid.g4, .tiers, .counter, .contacts { grid-template-columns: 1fr; }
  .grid.g2, .boundary { grid-template-columns: 1fr; }
  .boundary .col.never { border-right: none; border-bottom: 1px solid var(--border); }
  /* 表格不折叠成 2 字一行：给 min-width 让 .comp-wrap 的 overflow-x:auto 真正生效 */
  .comp-table { min-width: 560px; }
  .flow::before { left: 8px; }
  .flow-item .flow-time { display: none; }
  .flow-item .flow-dot { left: 2px; }
  .flow-item .flow-body { padding-left: 32px; }
  footer.site-footer .f-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-left: 24px; padding-right: 24px; }
  .doc, .cta { padding-left: 24px; padding-right: 24px; }
}

/* ── 无障碍：用户偏好减弱动效 ──
   不动 <video>：poster 是 video 元素自身的属性，display:none 会把 poster 一起藏掉，
   盒子塌成 2px 高。改由 site.js 摘掉 autoplay 并 pause()——暂停的视频正好显示 poster。 */
@media (prefers-reduced-motion: reduce) {
  .reveal-init { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ════════ 对比度基线（WCAG 2.1 相对亮度）════════
   下表**照抄** `CHECK_LANDING_VERBOSE=1 node scripts/check-landing.js` 的实测输出，
   不是手算。⚠️ 本项目已手算错过一次，所以这条不是洁癖：写这份表时把「金色当字压在
   近黑底（8.79）」与「黑字压在金色填充上」两个**不同的对**算混了，写出 8.79:1，
   实测 9.38:1；另有三个数字也各差一点。要改 token 就重跑，别复用下面的旧数字。

   数字取的是**最差的一种亮色底**：§12 会遍历 4 个候选底（--bg / --bg-card /
   --gold-dim 压卡片 / .badge.auto 压卡片），实测**每一次都是「--gold-dim 压卡片」最差**，
   故下表只列它（#F6F1E9）。
   ── 文字（门槛 4.5:1）──
     --text      #1C1A17 在 #F6F1E9 上 ... 15.47:1 ✓
     --text-dim  → 实际可见色 #595651 ...... 6.48:1 ✓
     --gold-ink  #7A5C2E .................. 5.51:1 ✓
     .fee-band 金额/说明：底色是 --gold-dim 叠在页面底上 ≈ #F2EBDE，
       故 --gold-ink 金额 ...... 5.21:1 ✓（实测值，非 #FAF8F4 上那个 6.18）
       --text-dim 说明 ......... 6.31:1 ✓
     --green-ink #0E7A3C .................. 4.84:1 ✓
     .err        #C0392B .................. 4.84:1 ✓
   ── 填充（不参与文字门槛，另测「配上去的字」）──
     .btn / .nav-cta / .tier-tag 的 --gold 底配 #000 字 ... 9.38:1 ✓
       （这条由 §12 末尾单独钉住：--gold 一旦被调暗即破，而上面那圈只测 color 声明，
         按钮的字色是字面量 #000、底色是填充，两头都不在扫描面内）
   ── 装饰 / 不可当文字 ──
     --gold    #C9A96E 在卡片底 ... 2.24:1 ✗文字
     --green   #07C160 在卡片底 ... 2.38:1 ✗文字
     .tier.featured 的 border-color（--gold 描边）在卡片底 ... 2.24:1
       §12 **显式放行并连前提一起查**：该卡片另有 `.tier-tag`「最多人选」文字标签
       （金底黑字 9.38:1）作识别信号，故非「颜色是唯一手段」，WCAG 1.4.11 不适用。
       前提由 §12 现场核对 pricing.html —— 谁把 tier-tag 文案删空，检查立刻变红
     .num-item .num（--gold-ink ×opacity:.28）→ 1.48:1
       §12 显式豁免：大字序号是底纹式装饰，不承载信息
     --text-muted：**当前无任何 color 声明使用**（定义了但没人用）。
       若日后要启用，先复测再上，别信这行没被验证过的数。
   ⚠️ 结论：亮底上 --gold / --green 一律不可当文字色，任何 `color: var(--gold)`
      都是 bug。要用墨色，用 --gold-ink / --green-ink。 */