/* article.css —— 内容页专用（/guide/ /print/ /compare/ /faq/）
 *
 * 为什么单独一层、不复用首页那套：
 *   首页是**深色电影感**的落地页（--ink 底 + 粒子 + 视频），适合"看三十秒被打动"；
 *   内容页是**长文阅读**，白底黑字才读得下去。两者要的不是同一套排版。
 *   但配色 token 全部取自首页 :root，一个字没改 —— 所以从首页点进来不会觉得换了产品。
 *
 * ⚠️ 这里不许出现首页没有的色值。要新色先回 index.html 的 token 里加。
 */

:root{
  --ink:   oklch(22.0% 0.0200 239.3);   /* #121C23 深墨蓝 */
  --paper: oklch(100% 0 0);             /* #FFFFFF 纸白 */
  --mist:  oklch(97.4% 0.0035 219.5);   /* #F4F7F8 页面底 */
  --grey:  oklch(54.7% 0.0200 234.8);   /* #66737B 次级文字 */
  --green: oklch(58.1% 0.1608 145.0);   /* #299236 品牌绿 */
  --green-ink: color-mix(in oklch, var(--green) 82%, black);  /* 白底上用，≈6.6:1 */
  --line:      color-mix(in oklch, var(--ink) 12%, transparent);
  --line-soft: color-mix(in oklch, var(--ink) 7%, transparent);

  --font-display: -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro SC','Helvetica Neue','Segoe UI Variable Display','Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-body:    -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro SC','Helvetica Neue','Segoe UI Variable Text','Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  --font-mono: ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;

  --container: 1040px;
  --gutter: 32px;
  --read: 720px;          /* 正文行宽：中文舒服的阅读列宽 */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{
  margin:0; background:var(--mist); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.79;
  letter-spacing:-.003em; -webkit-font-smoothing:antialiased;
}
a{ color:var(--green-ink); text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--green) 30%, transparent); }
a:hover{ border-bottom-color:var(--green); }
img,svg{ display:block; max-width:100%; }
p{ margin:0 0 20px; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--green-ink); outline-offset:3px; border-radius:6px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.read{ max-width:var(--read); margin-inline:auto; }

/* ── 顶栏：白底，比首页轻 ─────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:20; background:color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; gap:26px; height:60px; }
.brand{ display:flex; align-items:center; gap:10px; border:0; color:var(--ink); }
.brand img{ width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
.brand b{ font-family:var(--font-display); font-size:16px; font-weight:650; letter-spacing:.05em; }
.nav-links{ display:flex; gap:22px; margin-left:12px; }
.nav-links a{ font-size:14px; color:var(--grey); border:0; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:600; }
.nav-cta{
  margin-left:auto; display:inline-flex; align-items:center; height:36px; padding:0 18px;
  border-radius:999px; background:var(--ink); color:var(--paper); border:0;
  font-size:13.5px; font-weight:600; transition:background .18s ease;
}
.nav-cta:hover{ background:color-mix(in oklch, var(--ink) 84%, var(--green)); }
@media (max-width:760px){ .nav-links{ display:none; } }

/* ── 页头 ────────────────────────────────────────────────────────────── */
.hero{ padding:56px 0 34px; }
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--green-ink); margin:0 0 14px;
}
h1{
  font-family:var(--font-display); font-size:37px; line-height:1.28; letter-spacing:-.022em;
  font-weight:800; margin:0 0 18px; text-wrap:balance;
}
.lede{ font-size:18.5px; color:color-mix(in oklch, var(--ink) 78%, var(--grey)); margin:0; line-height:1.7; }
@media (max-width:640px){
  h1{ font-size:29px; } .lede{ font-size:17px; } .hero{ padding:36px 0 26px; }
}

/* ── 正文 ────────────────────────────────────────────────────────────── */
.article{ background:var(--paper); border:1px solid var(--line-soft); border-radius:16px; padding:48px 56px; }
@media (max-width:760px){ .article{ padding:30px 22px; border-radius:12px; } }

.article h2{
  font-family:var(--font-display); font-size:25px; line-height:1.4; letter-spacing:-.015em;
  font-weight:750; margin:52px 0 14px; padding-top:8px;
}
.article h2:first-child{ margin-top:0; }
.article h2 .h-num{
  display:inline-block; font-family:var(--font-mono); font-size:13px; font-weight:600;
  color:var(--green-ink); background:color-mix(in oklch, var(--green) 10%, var(--paper));
  border-radius:5px; padding:2px 8px; margin-right:10px; vertical-align:3px; letter-spacing:0;
}
.article h3{
  font-family:var(--font-display); font-size:18.5px; line-height:1.5; font-weight:700;
  margin:32px 0 10px;
}
.article ul,.article ol{ margin:0 0 20px; padding-left:24px; }
.article li{ margin:8px 0; }
.article strong{ font-weight:700; }
.article code{
  font-family:var(--font-mono); font-size:14px;
  background:color-mix(in oklch, var(--ink) 6%, var(--paper)); padding:1.5px 6px; border-radius:4px;
}
.article hr{ border:0; border-top:1px solid var(--line); margin:44px 0; }

/* 结论块 */
.key{
  background:color-mix(in oklch, var(--green) 6%, var(--paper));
  border-left:3px solid var(--green); border-radius:0 10px 10px 0;
  padding:20px 24px; margin:26px 0;
}
.key p:last-child{ margin-bottom:0; }
.key .k-label{
  display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-ink); margin-bottom:7px;
}
.note{
  font-size:14.5px; color:var(--grey); background:var(--mist);
  border-radius:10px; padding:16px 20px; margin:24px 0;
}
.note p:last-child{ margin-bottom:0; }

/* 表格 */
.tablewrap{ overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:10px; }
table{ border-collapse:collapse; width:100%; font-size:15px; }
th,td{ padding:12px 15px; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th{
  background:var(--mist); font-weight:650; font-size:13.5px; color:color-mix(in oklch, var(--ink) 80%, var(--grey));
  white-space:nowrap;
}
tr:last-child td{ border-bottom:none; }
td:first-child{ font-weight:600; white-space:nowrap; }
.tick{ color:var(--green-ink); font-weight:700; }
.cross{ color:var(--grey); }

/* 手机端：表格不再横向拖，改成一行一张卡。
 * 3 列表格最右那列在 390px 屏上根本看不见（对比表实测要拖 179px），
 * 而"对比表"恰恰是这类页面最该被读完的东西 —— 所以宁可换成卡片式。
 * 每个 td 的 data-label 由表头自动注入（见构建脚本注释），这里只负责长得像样。 */
@media (max-width:680px){
  .tablewrap{ border:0; overflow:visible; border-radius:0; }
  thead{ display:none; }
  table,tbody,tr,td{ display:block; width:100%; }
  tbody tr{
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    margin-bottom:12px; padding:6px 0; overflow:hidden;
  }
  tbody td{ border-bottom:1px solid var(--line-soft); padding:9px 16px; font-size:14.5px; }
  tbody td:last-child{ border-bottom:none; }
  /* 第一列是这张卡的标题，不重复念表头 */
  td:first-child{
    white-space:normal; font-size:15px; font-weight:700; color:var(--ink);
    background:var(--mist); padding-top:11px; padding-bottom:11px;
  }
  td[data-label]::before{
    content:attr(data-label);
    display:block; font-size:11px; font-weight:600; letter-spacing:.08em;
    color:var(--grey); margin-bottom:3px;
  }
}

/* 步骤 */
.steps{ list-style:none; padding:0; margin:26px 0; counter-reset:s; }
.steps li{
  counter-increment:s; position:relative; padding:0 0 22px 54px; margin:0;
  border-left:1px solid var(--line); margin-left:14px;
}
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:-15px; top:-2px;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps b{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:4px; }
.steps span{ color:color-mix(in oklch, var(--ink) 74%, var(--grey)); }

/* 页尾 CTA */
.cta{
  margin:34px 0 0; padding:36px 40px; border-radius:16px;
  background:var(--ink); color:var(--paper);
}
.cta h2{ margin:0 0 10px; font-family:var(--font-display); font-size:23px; font-weight:750; letter-spacing:-.015em; }
.cta p{ margin:0 0 22px; color:color-mix(in oklch, var(--paper) 72%, var(--ink)); font-size:16px; }
.cta .btn{
  display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 26px;
  border-radius:999px; background:var(--green); color:var(--paper);
  font-size:15px; font-weight:650; border:0; transition:background .18s ease;
}
.cta .btn:hover{ background:color-mix(in oklch, var(--green) 86%, white); }
.cta .btn-sub{ margin-left:18px; font-size:14px; color:color-mix(in oklch, var(--paper) 60%, var(--ink)); }
@media (max-width:640px){
  .cta{ padding:26px 22px; } .cta .btn-sub{ display:block; margin:14px 0 0; }
}

/* 相关阅读 */
.more{ margin:40px 0 0; }
.more h2{ font-family:var(--font-display); font-size:16px; font-weight:650; margin:0 0 14px; color:var(--grey); letter-spacing:.02em; }
.more ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.more a{
  display:block; background:var(--paper); border:1px solid var(--line-soft); border-radius:10px;
  padding:16px 20px; color:var(--ink); border-bottom:1px solid var(--line-soft);
}
.more a:hover{ border-color:color-mix(in oklch, var(--green) 40%, transparent); }
.more b{ display:block; font-size:15.5px; font-weight:650; margin-bottom:3px; }
.more span{ font-size:13.5px; color:var(--grey); }

/* ── 页脚 ────────────────────────────────────────────────────────────── */
.foot{ padding:44px 0 60px; font-size:13px; color:var(--grey); }
.foot-inner{ display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; }
.foot a{ color:var(--grey); border:0; }
.foot a:hover{ color:var(--ink); }
.foot .sep{ color:var(--line); }