/* ══════════════════════════════════════════════════════════════
   GEO Research Desk · 设计系统 v1
   一套令牌名，两套主题值。改这里，六页同时生效。
   规则：正文 ≥14px；12px 只用于等宽+字距；断点只允许 3 档。
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 排版与尺寸：两套主题共用 ── */
:root{
  --fs-display: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-meta: .75rem;

  --lh-display: 1.15;
  --lh-h2: 1.25;
  --lh-h3: 1.35;
  --lh-body: 1.75;
  --lh-small: 1.6;

  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;

  --r: 3px;
  --wrap: 1100px;
  --measure: 38em;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ── 2. 主题：同一组名字，两套值 ── */
[data-theme="dark"]{
  --bg: #0f1216;
  --bg-soft: #161b21;
  --panel: #212a35;          /* 对 bg 1.29 */
  --line: #3d4956;           /* 对 bg 2.04 */
  --line-soft: #2b333d;
  --fg: #e8ecf1;             /* 对 bg 15.83 */
  --fg-2: #a9b4c0;           /* 对 bg 8.92 */
  --fg-3: #8b96a3;           /* 对 bg 6.25 / 对 panel 4.81 —— 任何字号都可用 */
  --accent: #e2662a;         /* 对 bg 5.51 */
  --accent-ink: #0f1216;
  --data: #5ec8b0;
  --warn: #e0a33c;
  --shadow: none;
}
[data-theme="light"]{
  --bg: #fbf9f5;
  --bg-soft: #f4f1ec;
  --panel: #ffffff;          /* 对 bg 1.05 —— 浅色面板靠边框区分，明度只做辅助 */
  --line: #c9c1b2;           /* 对 bg 1.69 —— 浅色区间可辨 */
  --line-soft: #e4dfd6;
  --fg: #191713;             /* 对 bg 16.6 */
  --fg-2: #4b463e;           /* 对 bg 8.96 */
  --fg-3: #6e675d;           /* 对 bg 5.39 / 对 bg-soft 5.05 —— 全场景过 AA，不再限字号 */
  --accent: #b5431a;         /* 对 bg 5.37 */
  --accent-ink: #fcfbf9;
  --data: #0d6b60;
  --warn: #8a5a00;
  --shadow: 0 1px 2px rgba(25,23,19,.06);
}

/* ── 3. 基础 ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:650; letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
/* 段落里的内联链接必须看得出是链接：accent + 下划线。
   只圈 <p> 内的 a，nav/footer/目录各有自己的样式，不会被这条影响；
   .btn / .cta 是有底色的按钮，加下划线反而脏，排除。 */
p a:not(.btn):not(.cta){color:var(--accent); text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px}
img,svg{max-width:100%; display:block}
code,.mono{
  font-family:var(--mono);
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:.1em .35em;
}
strong{font-weight:650; color:var(--fg)}
mark{background:none; color:var(--accent); font-weight:650}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:var(--sp-1) var(--sp-2); font-size:var(--fs-small); font-weight:650;
}
.skip:focus{left:var(--sp-2); top:var(--sp-2)}

/* ── 4. 布局 ── */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-3)}
.prose{max-width:var(--measure)}
.prose p + p{margin-top:var(--sp-2)}
section{padding:var(--sp-5) 0}
section + section{border-top:1px solid var(--line-soft)}

.kicker,.sec-label{
  font-family:var(--mono); font-size:var(--fs-meta); line-height:1.4;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
  display:block; margin-bottom:var(--sp-2);
}
.sec-label{color:var(--accent)}

.sec-head{
  display:flex; align-items:baseline; gap:var(--sp-2);
  margin-bottom:var(--sp-3);
}
.sec-num{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
  color:var(--accent); padding-top:.35em;
}
.sec-head h2{font-size:var(--fs-h2); line-height:var(--lh-h2); max-width:26em; flex:1; min-width:0}

.lead{font-size:var(--fs-body); color:var(--fg-2); max-width:var(--measure)}
.lead strong{color:var(--fg)}
.sub{font-size:var(--fs-body); color:var(--fg-2); max-width:var(--measure); margin-top:var(--sp-2)}

/* ── 5. 导航 ── */
.top{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--line-soft);
}
.top-in{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:64px; flex-wrap:wrap; padding-top:var(--sp-1); padding-bottom:var(--sp-1);
}
.brand{display:flex; flex-direction:column; gap:2px; flex:0 0 auto}
.brand b{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.12em;
  color:var(--fg); font-weight:700;
}
.brand span{font-size:var(--fs-small); color:var(--fg-3); line-height:1.3}
.brand{text-decoration:none}
.brand b{transition:color .15s}
.brand:hover b{color:var(--accent)}
.brand:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:2px}

.nav-links{display:flex; gap:var(--sp-3); margin-left:auto; flex-wrap:wrap}
.nav-links a{
  font-size:var(--fs-small); color:var(--fg-2);
  padding:var(--sp-1) 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--fg)}
.nav-links a[aria-current="page"]{color:var(--fg); border-bottom-color:var(--accent); font-weight:650}

/* 导航分组：六项等距排列时会被读成六个并列栏目，实际是「概念 / 研究系列 / 转化」三段。
   竖线用 ::before 定位在 flex gap 正中，不占布局宽度。
   只在单行导航（≥901px）启用：390px 下 6 项已占满 358px 容器，任何额外宽度都会
   触发横滚，小屏的分组价值低于溢出代价。 */
@media (min-width:901px){
  .nav-links li.sep-start,
  .nav-links li.sep-end{position:relative}
  .nav-links li.sep-start::before,
  .nav-links li.sep-end::before{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:1px; height:1.05em; background:var(--line);
    background:color-mix(in srgb, var(--fg-3) 55%, var(--bg));
  }
  .nav-links li.sep-start::before{left:calc(var(--sp-3) / -2)}
  .nav-links li.sep-end::before{right:calc(var(--sp-3) / -2)}
}

.cta{
  font-size:var(--fs-small); font-weight:650;
  background:var(--accent); color:var(--accent-ink);
  padding:.6em 1.1em; border-radius:var(--r); white-space:nowrap;
  display:inline-block;
}
.cta:hover{filter:brightness(1.08)}

/* ── 6. 按钮 ── */
.btn{
  display:inline-block; font-size:var(--fs-small); font-weight:650;
  padding:.75em 1.4em; border-radius:var(--r);
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); cursor:pointer;
  font-family:inherit; text-align:center;
  white-space:nowrap; flex-shrink:0;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{
  background:transparent; color:var(--fg); border-color:var(--line);
}
.btn.ghost:hover{border-color:var(--fg-3); filter:none}
.actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3)}
/* 转化点上补一行事实，回答“多久/给什么/要不要钱/要不要权限”，
   这些信息原本散在各页的 note 里，按钮旁边反而没有。 */
.cta-note{margin-top:var(--sp-1); font-size:var(--fs-meta); color:var(--fg-3); line-height:1.5}
/* 正文中段的轻量转化块：不打断阅读，给一个不跳走的出口 */
.cta-inline{
  margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-soft);
  display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cta-inline p{margin:0; font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2); max-width:56ch}

/* ── 7. 首屏 ── */
.hero{padding:var(--sp-6) 0 var(--sp-5)}
.lead-in{
  font-size:var(--fs-h3); line-height:var(--lh-h3); color:var(--fg-2);
  max-width:var(--measure); margin-bottom:var(--sp-1);
}
.hero h1{
  font-size:var(--fs-display); line-height:var(--lh-display);
  letter-spacing:-.02em; max-width:24ch;
}

.stat-strip{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r);
  margin-top:var(--sp-4); overflow:hidden;
}
.stat{background:var(--panel); padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.stat .n{
  display:block; font-family:var(--mono); font-size:1.75rem; line-height:1.1;
  font-weight:700; color:var(--fg); letter-spacing:-.02em;
}
.stat .n.zero{color:var(--accent)}
.stat .l{
  display:block; margin-top:var(--sp-1);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2);
}

/* ── 8. 卡片与键值对 ── */
.case{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--shadow);
  margin-top:var(--sp-3); overflow:hidden;
}
.case-head{
  display:flex; justify-content:space-between; gap:var(--sp-2);
  flex-wrap:wrap; align-items:baseline;
  padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line-soft); background:var(--bg-soft);
}
.case-head .dom{font-family:var(--mono); font-size:var(--fs-small); font-weight:700; color:var(--fg)}
.case-head .meta{font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em; color:var(--fg-3)}
.case-body{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3); padding:var(--sp-3);
}
.case-col h3{
  font-size:var(--fs-small); font-weight:650; color:var(--fg-3);
  font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:var(--sp-2);
}
.kv{
  display:flex; justify-content:space-between; gap:var(--sp-2);
  padding:.45rem 0; border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-small); line-height:var(--lh-small);
}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--fg-2)}
.kv .v{font-family:var(--mono); font-size:var(--fs-small); color:var(--fg); text-align:right}
.kv .v.bad{color:var(--warn)}

/* ── 9. 表格 ── */
.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); margin-top:var(--sp-3); box-shadow:var(--shadow);
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
/* macOS 默认隐藏滚动条，宽表在窄屏会看起来像被裁掉——强制显示一条细滚动条，告诉读者能滑 */
.table-scroll::-webkit-scrollbar{height:9px}
.table-scroll::-webkit-scrollbar-track{background:var(--bg-soft); border-radius:0 0 var(--r) var(--r)}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--fg-3)}
table{width:100%; border-collapse:collapse; font-size:var(--fs-small); line-height:var(--lh-small)}
caption{
  caption-side:top; text-align:left;
  padding:var(--sp-2) var(--sp-2);
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em;
  color:var(--fg-3); border-bottom:1px solid var(--line-soft);
}
th,td{padding:.65rem var(--sp-2); text-align:left; vertical-align:top; border-bottom:1px solid var(--line-soft)}
thead th{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-3); font-weight:600;
  background:var(--bg-soft); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-family:var(--mono); white-space:nowrap}
td strong{color:var(--fg)}

/* ── 10. 步骤 ── */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r);
  margin-top:var(--sp-3); overflow:hidden;
}
.step{background:var(--panel); padding:var(--sp-3)}
.step .no{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
  color:var(--accent); display:block; margin-bottom:var(--sp-2);
}
.step h3{font-size:var(--fs-h3); line-height:var(--lh-h3); margin-bottom:var(--sp-1)}
.step p{font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2)}

/* ── 11. 报价档 ── */
.offers{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-2); margin-top:var(--sp-3); align-items:stretch;
}
.offer{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--shadow);
  padding:var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2);
}
.offer.primary{border-color:var(--accent); border-width:2px}
.offer .name{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3);
}
.offer.primary .name{color:var(--accent)}
.offer .price{font-size:var(--fs-h3); font-weight:650; line-height:var(--lh-h3); color:var(--fg)}
.offer .price small{display:block; font-size:var(--fs-small); font-weight:400; color:var(--fg-3); margin-top:.3em; line-height:var(--lh-small)}
.offer ul{display:flex; flex-direction:column; gap:.55rem; margin-top:var(--sp-1)}
.offer li{
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2);
  padding-left:1.1em; position:relative;
}
.offer li::before{content:"—"; position:absolute; left:0; color:var(--fg-3)}
.offer .foot{
  margin-top:auto; padding-top:var(--sp-2); border-top:1px solid var(--line-soft);
  font-size:var(--fs-small); color:var(--fg-3);
}
.offer .foot a{color:var(--accent); font-weight:650}

/* ── 12. 提示块 ── */
.note{
  border-left:3px solid var(--accent); background:var(--bg-soft);
  padding:var(--sp-2) var(--sp-3); margin-top:var(--sp-3);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2);
  border-radius:0 var(--r) var(--r) 0;
}
.note b{color:var(--fg); display:block; margin-bottom:.4em}
.note.ok{border-left-color:var(--data)}
.note.alert{border-left-color:var(--warn); background:color-mix(in srgb, var(--warn) 8%, var(--bg-soft))}

.boundary{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--bg-soft); padding:var(--sp-2) var(--sp-3);
  margin-top:var(--sp-3);
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-2);
}
.boundary p + p{margin-top:var(--sp-1)}
.boundary strong{color:var(--fg)}

.caveat{
  font-size:var(--fs-small); line-height:var(--lh-small); color:var(--fg-3);
  margin-top:var(--sp-2); max-width:var(--measure);
}

/* ── 13. 目录 ── */
.toc{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--bg-soft); padding:var(--sp-3);
  margin-top:var(--sp-3);
}
.toc h2{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--sp-2);
}
.toc ol{display:flex; flex-direction:column; gap:.4rem; counter-reset:toc}
.toc li{counter-increment:toc; font-size:var(--fs-small); line-height:var(--lh-small)}
.toc a{color:var(--fg-2); display:flex; gap:var(--sp-1)}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:var(--fs-meta); color:var(--accent); flex:0 0 auto;
}
.toc a:hover{color:var(--fg)}

/* ── 14. 表单 ── */
.form{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); box-shadow:var(--shadow);
  padding:var(--sp-3); margin-top:var(--sp-3); max-width:38rem;
}
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:var(--sp-2)}
.field label{font-size:var(--fs-small); font-weight:650; color:var(--fg)}
.field .hint{font-size:var(--fs-small); color:var(--fg-3); line-height:var(--lh-small)}
.field input,.field textarea,.field select{
  font-family:inherit; font-size:var(--fs-body); line-height:1.5;
  color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r);
  padding:.65em .8em; width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--warn); border-width:2px}
.err{font-size:var(--fs-small); color:var(--warn); font-weight:650}
.req{color:var(--accent)}

/* ── 15. 页脚 ── */
footer{
  border-top:1px solid var(--line-soft); background:var(--bg-soft);
  padding:var(--sp-4) 0 var(--sp-3); margin-top:var(--sp-5);
}
.foot-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3); padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line-soft);
}
.foot-grid h2{
  font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--sp-1);
}
.foot-grid ul{display:flex; flex-direction:column; gap:.4rem}
.foot-grid a{font-size:var(--fs-small); color:var(--fg-2)}
.foot-grid a:hover{color:var(--fg)}
.foot-note{
  padding-top:var(--sp-2); font-size:var(--fs-small);
  line-height:var(--lh-small); color:var(--fg-3);
}
.foot-note p + p{margin-top:.5rem}
.foot-note .mono{background:none; border:0; padding:0; font-size:inherit}

/* ── 16. 响应式：只有 3 档 ── */
@media (max-width:1100px){
  /* 5 格数据条不降列：3 列装 5 项会在第二行露出一个空单元的分隔线底色，
     而 5 列在 641px 下每格仍有 118px，数字与两行标签都放得下。 */
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .case-body{grid-template-columns:1fr; gap:var(--sp-3)}
  .offers{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr; gap:var(--sp-2)}
  /* 窄屏重排：品牌与 CTA 同行（第一行），导航独占第二行。
     nav 的 width:100% 会强制换行，若不显式给 CTA 更小的 order，
     它会被挤到第三行，白白多占 40px 高度。 */
  .brand{order:1}
  .cta{order:2; margin-left:auto}
  .nav-links{order:3; gap:.55rem; margin-left:0; width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.2rem}
  .nav-links a{white-space:nowrap; font-size:.8125rem}
  .hero{padding:var(--sp-5) 0 var(--sp-4)}
}

/* 360–380px：6 项导航在这个宽度会溢出约 22px，导致「价格」被截半个字。
   收紧字号与间距，让它在 328px 容器里刚好放得下，避免横向滚动。 */
@media (max-width:380px){
  .nav-links{gap:.4rem}
  .nav-links a{font-size:.75rem}
}
@media (max-width:640px){
  :root{--sp-5:3rem; --sp-6:3.5rem}
  .wrap{padding:0 var(--sp-2)}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat-strip .stat:last-child{grid-column:1 / -1}
  .steps{grid-template-columns:1fr}
  .top-in{gap:var(--sp-2)}
  .brand span{display:none}
  .actions .btn{width:100%}
}

/* ── 17. 打印：变量必须一起覆盖，否则浅字落白纸 ── */
@media print{
  [data-theme]{--bg:#fff; --bg-soft:#fff; --panel:#fff; --line:#999; --line-soft:#ccc;
    --fg:#000; --fg-2:#333; --fg-3:#555; --accent:#000; --accent-ink:#fff; --data:#000; --warn:#000;
    --shadow:none}
  body{font-size:11pt}
  .top,.skip,.actions,.cta{display:none}
  section{padding:1.2rem 0; break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.8em; color:#555; word-break:break-all}
  .table-scroll,.case,.offer,.note{break-inside:avoid}
  /* 打印时表格不再撑最小宽度：A4 只有约 794px，min-width 会把右侧几列裁掉 */
  .table-scroll{overflow:visible}
  .table-scroll table{min-width:0!important; width:100%}
  .stat-strip{grid-template-columns:repeat(5,1fr)}   /* 防止 5 格在 3 列布局下露出空单元的分隔线底色 */
}

/* ── 18. 动效偏好 ── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}