/* GlobalFactHub Design Tokens v2.0（改版方案 §2/§3/§4 的共享基础层）
 *
 * 加载顺序：tokens.css 必须在 marketing.css **之后**加载 —— 它的定位是「统一覆盖层」，
 * 把旧页面的深色/米色硬编码统一压到白色体系上；页面自己的内联 <style> 仍可做局部调整。
 *
 * 原则：只做「样式与观感」，不改任何 id/name/data-* 与表单字段、不动业务逻辑。
 */
:root {
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --bg-card: #ffffff;
  --ink: #0b0f19;
  --body: #3f4756;
  --muted: #8a93a6;
  --line: #e8ebf0;
  --brand: #16a34a;
  --brand-dark: #14532d;
  --cta: #16a34a;
  --cta-hover: #15803d;
  --gold: #b98a2f;
  --badge-green-bg: #e8f7ee; --badge-green-ink: #14532d;
  --badge-blue-bg: #e8f1fd; --badge-blue-ink: #1d4ed8;
  --badge-purple-bg: #f2edfd; --badge-purple-ink: #6d28d9;
  --badge-amber-bg: #fdf3e3; --badge-amber-ink: #92400e;
  --radius-card: 18px;
  --radius-input: 12px;
  --radius-btn: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.12);
  --shadow-hover: 0 2px 4px rgba(16,24,40,.06), 0 16px 40px -16px rgba(16,24,40,.22);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 全局底色与字体（把深色/米色压回白色体系）---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--body);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.05; font-weight: 800; }
h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; font-weight: 750; }
h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; font-weight: 700; }
p, li { line-height: 1.65; }
a { color: var(--cta); }
a:hover { color: var(--cta-hover); }

/* 浅色区块：旧深色 hero/区块统一转白（保留 1 个深色 CTA 由 .cta-band 管） */
section, header, .hero, .page-hero, .band, .section {
  background-color: transparent;
}
[class*="hero"] { color: var(--body); }
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3, [class*="hero"] p { color: inherit; }
[class*="hero"] h1, [class*="hero"] h2 { color: var(--ink); }

/* ---------- 导航：全站统一（白色毛玻璃 + 同一套 logo/链接/语言切换）----------
   各页历史规则不一致：research/privacy/terms/templates 用 --muted（浅灰）当链接色、
   logo 的 “Fact” 还是绿色渐变；index/geo/pricing 用 --body + 纯墨色 logo。
   这里统一给 body 前缀 + !important，保持“最后加载 + 更强特异性”一律让位。 */
body nav, body .nav, body .navbar, body header.nav, body .site-nav {
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--line) !important;
}
body nav a, body .nav a, body .navbar a { color: var(--body); }
/* 导航必须参与层叠：static 元素上的 z-index 无效，backdrop-filter 又让导航自成层叠上下文，
   于是首屏 hero（position:relative、DOM 在后）会压住语言下拉面板 —— 面板能打开但点不到
   （实测 elementFromPoint 命中 header.hero）。统一 sticky 后 9 页层级与行为一致。 */
body nav.site-nav, body .site-nav { position: sticky; top: 0; z-index: 200 !important; }
/* 导航骨架（布局层）：templates 等页不加载 marketing.css，骨架必须由 tokens.css 提供，
   否则 .nav-links 没有 flex/gap，链接会挤在一起。 */
body .site-nav .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; min-height: 78px; height: auto; padding-top: 14px; padding-bottom: 14px; }
body .site-nav .nav-links { display: flex; align-items: center; gap: 25px; order: 1; margin: auto; font-size: 14px; }
body .site-nav .nav-right { order: 2; display: flex; gap: 14px; margin-left: auto; align-items: center; }

/* ---------- 导航：英文标签更长的宽度适配（结构性免疫，不依赖量宽度）----------
   中文标签短，长英文（Overseas company / Website templates）会把 .nav-right
   （语言切换 + CTA）挤到第二行右侧 —— 看起来就是「错位」。之前的修法是按宽度分档，
   但只要客户端字体比测量环境更宽（Windows Segoe UI / 系统缩放），分档边界就会被击穿。
   现在的规则是结构性的：
   (1) <=1400px 收紧间距与字号，让链接更可能单行；
   (2) >=721px 一律 nowrap：logo 左、语言+CTA 右，中间留给链接且**允许链接内部换行**
       —— 任何宽度/字体下都不会再出现「右侧孤零零掉到第二行」；
   (3) <=720px 仍走折叠 + 菜单按钮（CTA 收进菜单做整行按钮）。 */
@media (max-width: 1400px) {
  body .site-nav .wrap { gap: 18px; }
  body .site-nav .nav-links { gap: 14px !important; }
  body .site-nav .nav-links a { font-size: 12.5px !important; }
  body .site-nav .nav-right { gap: 10px; }
  body .site-nav .nav-order { padding: 9px 15px !important; font-size: 13px !important; }
  body .site-nav .lang-switch .lang-trigger { font-size: 12px !important; padding: 4px 10px !important; }
}
@media (min-width: 721px) {
  /* 关键：外层不换行，右栏永远留在第一行 */
  body .site-nav .wrap { flex-wrap: nowrap !important; }
  body .site-nav .logo { flex: 0 0 auto; }
  body .site-nav .nav-right { flex: 0 0 auto; margin-left: auto; }
  /* 链接居中并吃掉剩余宽度；空间不够时在**自己内部**换行，而不是把右栏挤下去 */
  body .site-nav .nav-links {
    flex: 1 1 auto; min-width: 0; margin: 0 auto;
    flex-wrap: wrap; justify-content: center; row-gap: 2px; column-gap: 16px !important;
  }
  body .site-nav .nav-links a { white-space: nowrap; }
}
/* 导航吸顶后锚点跳转不被遮挡 */
html { scroll-padding-top: 84px; }
/* ---------- 导航：窄屏折叠（所有页都靠 tokens.css，不再依赖 marketing.css）----------
   templates 等页面不加载 marketing.css，此前 .menu-toggle 没有 display:none 会常驻显示，
   且 <=720px 时 .nav-links 被 marketing.css 隐藏、页面又没有开合按钮 -> 移动端导航是死路。
   这里把同一套规则放进 tokens.css，9 页行为一致。 */
.site-nav .menu-toggle { display: none; }
.site-nav .nav-order-mobile { display: none !important; }
@media (max-width: 720px) {
  body .site-nav .nav-right { order: 1; }
  body .site-nav .menu-toggle { display: block; }
  body .site-nav .nav-links {
    order: 3; width: 100%; display: none; margin: 14px 0 0;
    grid-template-columns: 1fr 1fr; gap: 6px;
    border-top: 1px solid var(--line); padding-top: 12px;
  }
  body .site-nav.menu-open .nav-links { display: grid; }
  body .site-nav .nav-links a { padding: 12px; font-size: 14px; }
  /* 移动端：CTA 从第一行收进折叠菜单，做成整行按钮（桌面仍用 .nav-order 在右侧） */
  body .site-nav .nav-order { display: none !important; }
  body .site-nav .nav-order-mobile {
    display: flex !important; grid-column: 1 / -1; width: 100%; margin-top: 6px; justify-content: center;
  }
}
/* logo：纯墨色字 + 品牌绿圆点（其它页的绿渐变字统一去掉） */
body nav .logo, body nav .logo > span:not(.brand-dot),
body .site-nav .logo, body .site-nav .logo > span:not(.brand-dot) {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  background: none !important;
}
body nav .brand-dot, body .site-nav .brand-dot, body .brand-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand) !important; margin-left: 6px; vertical-align: middle;
}
/* 菜单文字：统一用正文色（原来的浅灰 --muted 太淡），选中/悬停为墨色 + 绿色下划线 */
body nav .nav-links a, body nav.site-nav .nav-links a, body nav .nav-links a:visited,
body .site-nav .nav-links a {
  color: var(--body) !important;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
body nav .nav-links a:hover, body nav .nav-links a.active,
body nav.site-nav .nav-links a:hover, body nav.site-nav .nav-links a.active,
body .site-nav .nav-links a:hover, body .site-nav .nav-links a.active {
  color: var(--ink) !important;
  border-bottom-color: var(--brand) !important;
}

/* ---------- 按钮：全站唯一来源（方案 §2/§6）----------
   各页历史 CSS 对 .btn / .btn-brand / .btn-dark / .nav-order 的定义互不相同
   （实测：绿底白字 / 绿底黑字 / 黑底 / 奶油底 / 透明底白字）。
   注意 marketing.css 里还留着旧体系的高特异性规则：
     .site-nav .nav-order{color:#191814!important}   ← 把导航按钮文字压成黑色
     .page-research .btn / .page-pricing .btn / .page-research .hero .btn  ← 深色与奶油色
   它们比单个 .btn 强，所以这里统一加 body 前缀再抬一层，并保持最后加载 → 一律让位。
   主按钮=品牌绿胶囊白字；次级=白底描边。 */
body .btn, body a.btn, body button.btn, body .btn-brand, body .btn-primary, body .btn.primary, body .btn-dark,
body .site-nav .nav-order, body nav .nav-order, body .nav-links .btn, body .site-nav .btn,
body .page-research .btn, body .page-pricing .btn,
body .page-research .hero .btn, body .page-pricing .hero .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cta) !important; color: #fff !important;
  border: 1px solid var(--cta) !important; border-radius: var(--radius-btn) !important;
  padding: 12px 22px !important; font-family: inherit !important;
  font-size: 15px !important; font-weight: 650 !important; line-height: 1.25 !important;
  text-decoration: none !important; text-align: center; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
body .btn:hover, body a.btn:hover, body .btn-brand:hover, body .btn-dark:hover,
body .btn-primary:hover, body button.btn:hover,
body .site-nav .nav-order:hover, body nav .nav-order:hover,
body .page-research .btn:hover, body .page-pricing .btn:hover,
body .page-research .hero .btn:hover, body .page-pricing .hero .btn:hover {
  background: var(--cta-hover) !important; color: #fff !important; box-shadow: var(--shadow-hover);
}
body .btn:active, body a.btn:active { transform: scale(.985); }
/* 次级按钮：白底描边（深色横幅上的白按钮也走这套） */
body .btn.ghost, body .btn-outline, body .btn.secondary, body .btn-secondary, body .btn-on-dark,
body .page-research .btn.ghost, body .page-pricing .btn.ghost,
body .page-research .hero .btn.ghost, body .page-pricing .hero .btn.ghost {
  background: #fff !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; box-shadow: none;
}
body .btn.ghost:hover, body .btn-outline:hover, body .btn.secondary:hover, body .btn-secondary:hover,
body .btn-on-dark:hover, body .page-research .btn.ghost:hover, body .page-research .hero .btn.ghost:hover {
  background: var(--bg-alt) !important; color: var(--ink) !important; border-color: var(--ink) !important;
}
/* 导航里的主按钮：小一档 */
body nav .btn, body .site-nav .btn, body .nav-links .btn, body nav .nav-order {
  padding: 10px 18px !important; font-size: 13.5px !important;
}
/* 语言切换：全站三段一致（灰底常态 / 深色选中） */
body nav .lang-switch, body .site-nav .lang-switch, body .lang-switch {
  display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: var(--bg-alt) !important; border: 1px solid var(--line) !important;
}
body nav .lang-switch button, body .site-nav .lang-switch button, body .lang-switch button {
  background: transparent !important; color: var(--body) !important; border: 0 !important;
  border-radius: 999px !important; padding: 5px 12px !important; font-family: inherit !important;
  font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer; line-height: 1.4;
}
body nav .lang-switch button:hover, body .lang-switch button:hover { color: var(--ink) !important; }
body nav .lang-switch button.active, body .site-nav .lang-switch button.active, body .lang-switch button.active {
  background: var(--ink) !important; color: #fff !important;
}
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* ---------- 导航：窄屏适配（5 个菜单项 + CTA + 语言切换）----------
   templates 的导航结构略不同（链接与 CTA 同层），768px 下会溢 13px，这里统一允许换行。 */
@media (max-width: 980px) {
  body nav .wrap, body .site-nav .wrap { flex-wrap: wrap; row-gap: 6px; }
  body nav .nav-links, body .site-nav .nav-links { flex-wrap: wrap; gap: 14px !important; row-gap: 6px; }
  body nav .nav-links a, body .site-nav .nav-links a { font-size: 13px !important; }
  body nav .lang-switch button, body .site-nav .lang-switch button { padding: 5px 10px !important; }
}

/* ---------- 卡片 ---------- */
.card, .price-card, .plan, .service-card, .tile, .panel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform .24s ease-out, box-shadow .24s ease-out;
}
.card:hover, .price-card:hover, .plan:hover, .service-card:hover, .tile:hover, .panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* ---------- 徽章 ---------- */
.badge, .tag, .chip {
  border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600;
  background: var(--badge-green-bg); color: var(--badge-green-ink);
}
.badge.blue, .tag.blue, .badge-subscription { background: var(--badge-blue-bg); color: var(--badge-blue-ink); }
.badge.purple, .tag.purple { background: var(--badge-purple-bg); color: var(--badge-purple-ink); }
.badge.amber, .tag.amber { background: var(--badge-amber-bg); color: var(--badge-amber-ink); }
.score-badge, .grade-badge { background: var(--badge-amber-bg); color: var(--gold); border: 1px solid #f0dcb4; }

/* ---------- 表单 ---------- */
input, select, textarea {
  border-radius: var(--radius-input); border: 1px solid var(--line); background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cta); box-shadow: 0 0 0 2px rgba(22,163,74,.18);
}
label { font-size: 14px; color: var(--body); }

/* ---------- 页脚（深色保留其一）---------- */
footer, .footer, .site-footer {
  background: var(--brand-dark) !important; color: #d7e6dc;
}
footer a, .footer a, .site-footer a { color: #eaf4ee; }
footer h4, .footer h4 { color: #fff; }
/* 页脚里的“当前页”标记：法律页（隐私/条款）不在导航四个板块里，
   用页脚这条链的高亮表示归属，避免“点了没反应、也不知道在哪一页”。 */
footer a.active, .footer a.active, .site-footer a.active,
footer a[aria-current="page"], .site-footer a[aria-current="page"] {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 深色 CTA 横幅（全站只保留 1 个节奏点缀）---------- */
.cta-band, .dark-cta { background: var(--ink); color: #f4f6f8; }
.cta-band h2, .cta-band h3, .dark-cta h2, .dark-cta h3 { color: #fff; }

/* ---------- 动效（方案 §3）---------- */
/* ⚠️ 只在 JS 可用时才隐藏（html.js 由页面 head 里的内联脚本加上）：
   否则 motion.js 加载失败 → 元素永远 opacity:0 → 内容凭空消失。
   法律页/无 JS 环境必须始终能看到内容。 */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
/* ⚠️ 显现规则的特异性必须比隐藏规则强：隐藏是 html.js [data-reveal]（0,2,1）。
   若只写 [data-reveal].is-visible（0,2,0），类名加上了也永远算不赢 →
   元素永久 opacity:0。2026-09-30 全站正文“消失”事故就是这个原因，
   当时探针只查了 class 没查 computed opacity，所以漏了。这里再加 !important 兜底。 */
html.js [data-reveal].is-visible,
body [data-reveal].is-visible {
  opacity: 1 !important; transform: none !important;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.js [data-reveal-delay="1"].is-visible, body [data-reveal-delay="1"].is-visible { transition-delay: 80ms; }
html.js [data-reveal-delay="2"].is-visible, body [data-reveal-delay="2"].is-visible { transition-delay: 160ms; }
html.js [data-reveal-delay="3"].is-visible, body [data-reveal-delay="3"].is-visible { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 响应式细节 ---------- */
@media (max-width: 768px) {
  h1 { font-size: clamp(32px, 9vw, 44px); }
  h2 { font-size: clamp(24px, 6vw, 32px); }
}

/* ---------- 语言切换：单按钮 + 下拉面板 ---------- */
.lang-switch { position: relative; }
.lang-switch .lang-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px !important; border: 0 !important; background: transparent !important; color: var(--body) !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; border-radius: 999px !important; cursor: pointer; }
.lang-switch .lang-trigger:hover { color: var(--ink) !important; }
.lang-switch .lang-globe { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lang-switch .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 138px; display: grid; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-hover); z-index: 80; }
.lang-switch .lang-menu[hidden] { display: none; }
.lang-switch .lang-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 8px 12px !important; border: 0 !important; background: transparent !important; color: var(--body) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 9px !important; text-align: left; cursor: pointer; }
.lang-switch .lang-menu button:hover { background: var(--bg-alt) !important; color: var(--ink) !important; }
.lang-switch .lang-menu button.active { background: var(--brand) !important; color: #fff !important; }
.lang-switch .lang-menu button.active::after { content: "\2713"; font-weight: 800; }

/* ---------- 合规提示（白体系，替代已移除的黄色提示模块）---------- */
.legal-note { display:flex; gap:12px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--radius-card); padding:14px 16px; margin:0 0 18px; box-shadow:var(--shadow-card); }
.legal-note .ln-ico { width:18px; height:18px; flex:none; margin-top:2px; fill:none; stroke:var(--brand); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.legal-note .ln-t { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.legal-note .ln-d { font-size:13px; line-height:1.7; color:var(--body); }