/* ============================================================
   GEO诊断通 官网 · site.css
   唯一配色源：./tokens.css（本文件禁止出现自造色值）
   禁止：Tailwind / 任何 CDN CSS / 抄 console 的 --brand/--ai
   尺度一律用 tokens.css 的 --s-* --r-* --fz-* --sh-*
   ============================================================ */

/* ---------- 0. 结构性常量（非设计尺度，tokens 未覆盖） ---------- */
:root {
  --hairline: 1px;   /* 边框宽度 */
  --focus-w: 2px;    /* 焦点环宽度 */
  --nav-z: 100;      /* 导航层级 */
  --grid-gap: var(--s-5);
}

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: var(--topbar-h);
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding-left: var(--s-5); }

h1 { font-size: var(--fz-3xl); font-weight: var(--fw-b); line-height: 1.28; letter-spacing: -.4px; }
h2 { font-size: var(--fz-2xl); font-weight: var(--fw-b); line-height: 1.32; letter-spacing: -.2px; }
h3 { font-size: var(--fz-lg);  font-weight: var(--fw-sb); line-height: 1.45; }
h4 { font-size: var(--fz-md);  font-weight: var(--fw-sb); }

a { color: var(--c-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* 焦点样式保留（无障碍硬要求，禁止 outline:none） */
:focus-visible {
  outline: var(--focus-w) solid var(--c-teal);
  outline-offset: var(--s-1);
  border-radius: var(--r-1);
}

/* ---------- 2. 布局容器 ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--s-8); }
.section-tight { padding-block: var(--s-7); }
.section-dark { padding-block: var(--s-8); }

/* 深色区块：tokens.css 的 .theme-dark 只覆盖变量，这里补上应用 */
.theme-dark {
  background: var(--c-bg);
  color: var(--c-text);
}

/* ---------- 3. 标题区 ---------- */
.sec-head { margin-bottom: var(--s-6); }
.sec-head h2 { color: var(--c-text); }
.sec-head p { color: var(--c-text-2); margin-top: var(--s-2); max-width: 62ch; }
.sec-kicker {
  display: inline-block;
  font-size: var(--fz-sm);
  font-weight: var(--fw-sb);
  color: var(--c-teal);
  letter-spacing: .6px;
  margin-bottom: var(--s-2);
}
.sec-head--center { text-align: center; }
.sec-head--center p { margin-inline: auto; }

/* ---------- 4. 栅格 ---------- */
.grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- 5. 顶部导航（固定） ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--nav-z);
  height: var(--topbar-h);
  background: var(--c-surface);
  border-bottom: var(--hairline) solid var(--c-border);
}
.nav-inner { height: 100%; display: flex; align-items: center; gap: var(--s-5); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fz-lg);
  font-weight: var(--fw-b);
  color: var(--c-ink);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand__mark { color: var(--c-teal); }
.brand__dot {
  width: var(--s-2); height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-teal);
  flex: 0 0 auto;
}

.nav-links { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.nav-links a {
  color: var(--c-text-2);
  font-size: var(--fz-base);
  padding-block: var(--s-2);
  border-bottom: var(--focus-w) solid transparent;
}
.nav-links a:hover { color: var(--c-ink); text-decoration: none; }
.nav-links a.is-active {
  color: var(--c-teal);
  font-weight: var(--fw-sb);
  border-bottom-color: var(--c-teal);
}
.nav-cta { margin-left: var(--s-4); }

/* 汉堡按钮 */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: var(--touch-sm);
  height: var(--touch-sm);
  align-items: center;
  justify-content: center;
  background: transparent;
  border: var(--hairline) solid var(--c-border-2);
  border-radius: var(--r-1);
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
}
.nav-toggle svg { width: var(--s-6); height: var(--s-6); }

/* ---------- 6. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch-sm);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-2);
  border: var(--hairline) solid transparent;
  font-family: inherit;
  font-size: var(--fz-md);
  font-weight: var(--fw-sb);
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--c-teal); color: var(--c-surface); box-shadow: var(--sh-teal); }
.btn-primary:hover { background: var(--c-teal-2); color: var(--c-surface); }

.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-border-2); }
.btn-ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* 深色底上的按钮 */
.theme-dark .btn-ghost { color: var(--c-text); border-color: var(--c-border-2); }
.theme-dark .btn-ghost:hover { background: var(--c-surface-2); }

.btn-lg { min-height: var(--touch); padding: var(--s-4) var(--s-7); font-size: var(--fz-lg); }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- 7. 卡片 ---------- */
.card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
.card--pad-lg { padding: var(--s-7); }
.card--flat { box-shadow: none; }
.card p { color: var(--c-text-2); }
.card p + p { margin-top: var(--s-3); }
.card h3 { color: var(--c-text); margin-bottom: var(--s-2); }

.card--accent { border-color: var(--c-teal); box-shadow: var(--sh-teal); }
.card--muted { background: var(--c-surface-2); box-shadow: none; }

/* 带角标卡片（案例页「示例数据」徽章固定右上角） */
.card--badged { position: relative; }
.card__badge { position: absolute; top: var(--s-4); right: var(--s-4); }

/* 指标升降色（中国习惯：涨=红 跌=绿） */
.delta-up { color: var(--c-up); font-weight: var(--fw-sb); }
.delta-down { color: var(--c-down); font-weight: var(--fw-sb); }

/* 案例卡：前后对比列 */
.vs { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-4); }
.vs__box {
  background: var(--c-surface-2);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}
.vs__t { color: var(--c-text-3); font-size: var(--fz-sm); }
.vs__v { font-size: var(--fz-lg); font-weight: var(--fw-b); color: var(--c-ink); }

/* 编号步骤卡 */
/* padding-left 必须 > 编号右边缘（left 20 + width 32 = 52px），否则绝对定位的编号会盖住标题文字。
   原值 calc(--s-8 + --s-2)=48px 小于 52px → 横向重叠 4px（2026-09-10 修复）。现为 64px，留 12px 间距。 */
.step { position: relative; padding-left: calc(var(--s-8) + var(--s-6)); }
.step__no {
  position: absolute;
  left: var(--s-5);
  top: var(--s-5);
  width: var(--s-7); height: var(--s-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--c-teal-soft);
  color: var(--c-teal);
  font-weight: var(--fw-b);
  font-size: var(--fz-md);
}

/* ---------- 8. 徽章 / 芯片 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fz-sm);
  font-weight: var(--fw-sb);
  background: var(--c-teal-soft);
  color: var(--c-teal);
  white-space: nowrap;
}
.badge--muted { background: var(--c-surface-2); color: var(--c-text-2); }
.badge--warn { background: var(--c-warn-soft); color: var(--c-warn); }
.badge--sample { background: var(--c-warn-soft); color: var(--c-warn); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border);
  font-size: var(--fz-md);
  font-weight: var(--fw-sb);
  color: var(--c-ink);
  box-shadow: var(--sh-1);
}
.theme-dark .chip { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
.chip__dot {
  width: var(--s-2); height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-teal);
  flex: 0 0 auto;
}

/* ---------- 9. 数字卡 ---------- */
.stats { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--r-3);
  padding: var(--s-5);
  text-align: center;
  box-shadow: var(--sh-1);
}
.stat__v {
  display: block;
  font-size: var(--fz-2xl);
  font-weight: var(--fw-b);
  color: var(--c-teal);
  line-height: 1.2;
}
.stat__n { display: block; margin-top: var(--s-2); color: var(--c-text-2); font-size: var(--fz-sm); }

/* ---------- 10. 表格 ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-3); }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  font-size: var(--fz-base);
}
.table caption { text-align: left; color: var(--c-text-3); font-size: var(--fz-sm); padding-bottom: var(--s-2); }
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: var(--hairline) solid var(--c-border);
  vertical-align: top;
}
.table thead th {
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-weight: var(--fw-sb);
  font-size: var(--fz-sm);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table--mono td:first-child { font-weight: var(--fw-sb); color: var(--c-ink); white-space: nowrap; }

/* ---------- 11. FAQ 折叠（原生 details，无 JS 依赖，键盘可达） ---------- */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
}
.faq summary {
  cursor: pointer;
  font-weight: var(--fw-sb);
  color: var(--c-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--c-teal);
  font-size: var(--fz-lg);
  font-weight: var(--fw-b);
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: var(--s-3); color: var(--c-text-2); }

/* ---------- 12. 价格卡 ---------- */
.price-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--r-3);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
.plan--featured { border-color: var(--c-teal); box-shadow: var(--sh-teal); }
.plan__name { font-size: var(--fz-lg); font-weight: var(--fw-b); color: var(--c-ink); }
.plan__desc { margin-top: var(--s-2); color: var(--c-text-3); font-size: var(--fz-sm); min-height: var(--s-8); }
.plan__price { margin-top: var(--s-4); display: flex; align-items: baseline; gap: var(--s-1); }
.plan__cur { font-size: var(--fz-md); color: var(--c-text-2); }
.plan__amt { font-size: var(--fz-3xl); font-weight: var(--fw-b); color: var(--c-ink); line-height: 1.1; }
.plan__per { font-size: var(--fz-sm); color: var(--c-text-3); }
.plan__feat { margin-top: var(--s-5); display: grid; gap: var(--s-2); list-style: none; padding: 0; }
.plan__feat li { display: flex; gap: var(--s-2); color: var(--c-text-2); font-size: var(--fz-base); }
.plan__feat li::before { content: "✓"; color: var(--c-teal); font-weight: var(--fw-b); flex: 0 0 auto; }
.plan .btn { margin-top: var(--s-6); }

/* 周期切换 Tab */
.tabs {
  display: inline-flex;
  padding: var(--s-1);
  gap: var(--s-1);
  background: var(--c-surface-2);
  border: var(--hairline) solid var(--c-border);
  border-radius: var(--r-2);
}
.tabs button {
  min-height: var(--touch-sm);
  padding: var(--s-2) var(--s-5);
  border: 0;
  border-radius: var(--r-1);
  background: transparent;
  color: var(--c-text-2);
  font-family: inherit;
  font-size: var(--fz-base);
  font-weight: var(--fw-sb);
  cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--c-surface); color: var(--c-teal); box-shadow: var(--sh-1); }

/* ---------- 13. 提示条 / 口径小字 ---------- */
.note {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  background: var(--c-teal-soft);
  color: var(--c-text-2);
  font-size: var(--fz-sm);
  line-height: 1.7;
}
.note--warn { background: var(--c-warn-soft); }
.note--muted { background: var(--c-surface-2); }
.note__ico { flex: 0 0 auto; color: var(--c-teal); }
.note--warn .note__ico { color: var(--c-warn); }

.caliber {
  color: var(--c-text-3);
  font-size: var(--fz-sm);
  line-height: 1.7;
}

/* ---------- 14. 页脚 ---------- */
.footer { padding-block: var(--s-8); }
.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer h4 { color: var(--c-text); font-size: var(--fz-md); margin-bottom: var(--s-3); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--c-text-2); font-size: var(--fz-base); }
.footer a:hover { color: var(--c-teal); }
.footer-brand__name { font-size: var(--fz-lg); font-weight: var(--fw-b); color: var(--c-text); }
.footer-brand__name span { color: var(--c-teal); }
.footer-brand p { color: var(--c-text-2); font-size: var(--fz-sm); margin-top: var(--s-3); }

.footer-qr {
  width: var(--s-8); height: var(--s-8);
  border-radius: var(--r-1);
  border: var(--hairline) solid var(--c-border);
  background: var(--c-surface);
}
.footer-qr-box { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.footer-qr-box small { color: var(--c-text-2); font-size: var(--fz-sm); line-height: 1.6; }

.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--hairline) solid var(--c-border);
  color: var(--c-text-3);
  font-size: var(--fz-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
}
.footer-bottom a { color: var(--c-text-3); }
.footer-disclaimer { margin-top: var(--s-5); color: var(--c-text-3); font-size: var(--fz-sm); line-height: 1.7; }
.footer-status { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer-status__dot {
  width: var(--s-2); height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-ok);
  flex: 0 0 auto;
}

/* ---------- 15. 通用工具 ---------- */
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

.center { text-align: center; }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
.small { font-size: var(--fz-sm); }
.lead { font-size: var(--fz-lg); color: var(--c-text-2); line-height: 1.75; }
.mx-auto { margin-inline: auto; }
.maxw-prose { max-width: 72ch; }
.divider { height: var(--hairline); background: var(--c-border); border: 0; margin-block: var(--s-6); }

.visually-hidden {
  position: absolute; width: var(--hairline); height: var(--hairline);
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: calc(-1 * var(--s-8));
  background: var(--c-teal); color: var(--c-surface);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-1);
  transition: top var(--dur) var(--ease); z-index: var(--nav-z);
}
.skip-link:focus { top: var(--s-2); }

/* ---------- 16. 响应式（3 档：≥1080 / 768-1079 / ≤767） ---------- */

/* 中档：2 列，导航折叠 */
@media (max-width: 1079px) {
  .grid, .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 小档：单列 + 汉堡菜单 */
@media (max-width: 767px) {
  h1 { font-size: var(--fz-2xl); }
  h2 { font-size: var(--fz-xl); }

  .grid, .grid-2, .grid-4, .grid-5,
  .price-grid, .stats, .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: var(--topbar-h);
    left: 0; right: 0;
    margin-left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
    background: var(--c-surface);
    border-bottom: var(--hairline) solid var(--c-border);
    box-shadow: var(--sh-2);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding-block: var(--s-3); border-bottom: 0; }
  .nav-links a.is-active { border-bottom: 0; }
  .nav-cta { margin-left: 0; margin-top: var(--s-3); }
  .nav-cta .btn { width: 100%; }

  .wrap { padding-inline: var(--s-4); }
  .section, .section-dark, .footer { padding-block: var(--s-7); }
  .plan__desc { min-height: 0; }
  .btn-row .btn { width: 100%; }
}

/* 超小档：375px 无横向溢出（硬性验收项） */
@media (max-width: 400px) {
  .chips { gap: var(--s-2); }
  .chip { padding: var(--s-2) var(--s-4); font-size: var(--fz-base); }
  .stat { padding: var(--s-4); }
  /* 🔴 必须排除编号步骤卡：.card 的 padding 简写会把 .step 的 padding-left 覆盖成 20px，
     而编号圆占 20~52px → 整个圆压在标题文字上（375px 实测横向重叠 32px，2026-09-10 修复）。
     步骤卡继续沿用 .step 自己的 padding-left（64px）。 */
  .card:not(.step) { padding: var(--s-5); }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover { transform: none; }
}

/* 打印：去掉固定导航 */
@media print {
  .nav { position: static; }
  body { padding-top: 0; }
}