/* SnapPage 官网样式 —— 单文件，四个页面共用（由 Worker 以 /site.css 提供）
 *
 * 尺度依据老大定调「简单大气」：一屏讲清，不做营销话术堆砌。
 * 刻意保持极简：无外部字体、无图片依赖、无 JS —— 页面本身就是静态字符串，
 * 唯一目的是承载「是什么 / 有什么不一样 / 免费与 Pro 差在哪 / 常见问题」+ 三份法律文档。
 */

:root {
  --ink: #1a1d21;
  --ink-soft: #5a636e;
  --ink-faint: #8b949e;
  --line: #e6e9ee;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --accent: #2f6feb;
  --accent-soft: #eef4ff;
  --ok: #1a7f4b;
}

* { box-sizing: border-box; }

/* [2026-11-06] scroll-padding-top：顶栏是 sticky 且高 60px，锚点跳转（#features 等）
 * 若不预留，目标标题会被顶栏盖住 —— 表现为「点了导航，跳过去看不到标题」。
 * 76px = 60 顶栏 + 16 呼吸。改顶栏高度时这里要同步（check-site-seo §10.12 有断言）。 */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC",
        "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
}

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

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶栏 ---------- */
/* [2026-11-06] z-index 必填。
 * 原实现只有 position:sticky 无 z-index（全站零 z-index）⇒ 层叠层级为 auto，
 * 一旦下面任何内容创建了自己的层叠上下文（backdrop-filter / transform / filter /
 * will-change / position+z-index），滚动时就会盖住顶栏 —— 表现为「顶栏被图表压住」。
 * 100 是本站唯一的分层，留足余量给将来（弹层/提示条应 ≥ 200）。
 * ⚠️ 同目录下不要再出现第二套魔数，新增浮层在此集中登记。 */
header.top {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(180%) blur(8px);
}
header.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.brand { font-weight: 650; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); }
.brand:hover { text-decoration: none; }
nav.top-links a { color: var(--ink-soft); font-size: 14px; margin-left: 20px; }

/* ---------- 语言切换（由 i18n/index.js 生成；单语言时不渲染，样式预留给后续语言） ----------
 * 当前语言不可点（span.is-current），可切换的语言是链接。
 * ⚠️ 切换靠 `?lang=` URL 参数、**不用 cookie** —— privacy 页声明了本站无 cookie。
 */
nav.lang { display: inline-block; margin-left: 20px; font-size: 13px; color: var(--ink-faint); }
nav.lang a { color: var(--ink-soft); text-decoration: none; }
nav.lang a:hover { text-decoration: underline; }
nav.lang .is-current { color: var(--ink); font-weight: 600; }
nav.lang .sep { margin: 0 6px; color: var(--ink-faint); }

/* ---------- 首屏 ---------- */
.hero { padding: 72px 0 40px; }
h1 {
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-weight: 700;
}
.lede { font-size: 16px; color: var(--ink-soft); margin: 0 0 22px; max-width: 620px; }
/* [2026-11-04] 首屏副标题（H1 下方）：描述句，明显小于主标题、承接主标题。
 * 主标题原为参考图的小标签，老大要求改为 H1；此句相应降为副标题。 */
.subtitle {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0 18px;
  max-width: 620px;
}
/* [2026-11-04] 首屏三特性胶囊：轻量 pill，纯展示，不抢 CTA 焦点。 */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 22px; }
.chips li {
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}
/* [2026-11-04] 隐私承诺行：胶囊下方，弱化为 reassurance，不与正文争视觉。 */
.privacy { font-size: 16px; color: var(--ink-faint); margin: 0 0 24px; }

/* ---------- 安装入口（2026-11-03 B0-2）----------
 * 三个按钮：主（Chrome）、可选次（Edge）、永远有的「看看怎么用」。
 * ⚠️ 主按钮用实色、其余用描边 —— 一屏里只允许**一个**视觉焦点，
 *    否则「点哪个」这个决策会替用户把 CTA 抵消掉。
 */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 10px; }
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--accent);
}
.btn:hover { text-decoration: none; opacity: 0.9; }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); font-weight: 500; }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); opacity: 1; }
.cta-note { font-size: 13px; color: var(--ink-faint); margin: 0 0 28px; }
footer.bottom nav.stores { margin-bottom: 14px; }

h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
  font-weight: 640;
}
h3 { font-size: 16px; margin: 28px 0 8px; font-weight: 640; }
p { margin: 0 0 14px; }

/* ---------- 特性 ---------- */
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li {
  padding: 10px 0 10px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
ul.plain li:last-child { border-bottom: 0; }
ul.plain li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
ul.plain li strong { color: var(--ink); font-weight: 620; }

/* ---------- 价格表 ---------- */
table.plans {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 15px;
}
table.plans th,
table.plans td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.plans thead th { font-size: 13px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
/* 表头里的价格行：金额不跟着表头的大写/小字号走 —— 它是**报价**，要一眼看得清。
   金额由 `renderPayPage`/官网首页在**运行时**从 Paddle 取（`{{t:home.pricing.price.pro}}` 的 {price}），
   不在模板或字典里写死，改价不必改代码。 */
table.plans thead th .th-price {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
table.plans td.yes { color: var(--ok); font-weight: 600; }
table.plans td.no { color: var(--ink-faint); }

.note {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 20px 0;
}

/* ---------- 对比卡：SnapPage vs 普通整页截图 ---------- */
table.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 15px;
}
table.compare th,
table.compare td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.compare thead th {
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* 表头禁换行：否则浏览器把宽度分给长文本列，"A plain full-page capture" 被挤成多行。 */
  white-space: nowrap;
}
/* 勾叉列表头与 td.mark 对齐（同宽 + 居中）；plain 列头靠 nowrap 自然撑开。 */
table.compare thead th.col-sp { text-align: center; width: 88px; }
table.compare thead th:last-child { text-align: center; }
table.compare thead th.col-sp { color: var(--accent); }
table.compare td.mark { text-align: center; width: 88px; }
table.compare td.yes { color: var(--ok); }
table.compare td.yes::before { content: "\2713"; font-weight: 700; }
table.compare td.no { color: var(--ink-faint); }
table.compare td.no::before { content: "\2717"; }
table.compare td.varies { color: var(--ink-faint); }
table.compare td.varies::before { content: "\2248"; }

/* ---------- FAQ ---------- */
details.faq {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
details.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
details.faq[open] summary::before { content: "– "; }
details.faq p { margin: 10px 0 0; color: var(--ink-soft); }

/* ---------- 法律文档 ---------- */
.legal { padding: 48px 0 24px; }
.legal h1 { font-size: 30px; }
.legal h2 { font-size: 18px; margin: 32px 0 10px; }
.legal .meta { color: var(--ink-faint); font-size: 14px; margin-bottom: 28px; }

/* 译文声明：中文页顶部声明「以英文版为准」（legal.translationNote）。
 * ⚠️ 它不是装饰 —— 法律文本出现两个可解释版本时，这句是唯一的解释依据。 */
.legal .transnote {
  font-size: 13px;
  color: var(--ink-faint);
  border-left: 3px solid var(--line);
  padding-left: 12px;
  margin: -16px 0 20px;
}
.legal ul { color: var(--ink-soft); padding-left: 22px; }
.legal li { margin: 6px 0; }

/* ---------- 页脚 ---------- */
footer.bottom {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 28px 0 48px;
  color: var(--ink-faint);
  font-size: 14px;
}
footer.bottom a { color: var(--ink-soft); margin-right: 18px; }
footer.bottom .fineprint { margin-top: 14px; line-height: 1.6; }

/* ---------- Before / After 对比区（B1）---------- */
.demo-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 16px;
}
.demo-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
}
.demo-card img {
  display: block;
  width: 100%;
  height: auto;
}
.demo-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(26, 29, 33, 0.72);
  padding: 4px 10px;
  border-radius: 999px;
}
.demo-caption {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .hero { padding: 48px 0 28px; }
  /* [2026-11-05] 导航从 3 个锚点扩到 5 个（补 uses / compare）后一行放不下：
   *   brand(~80) + 5 锚点 + Sign in + 语言 ≈ 515px > 560-48=512px 可用宽度。
   *   窄屏只隐藏**页内锚点**，保留「登录」和语言切换 —— 锚点只是页内跳转，
   *   手机用户本来就靠滚动，功能不受影响。 */
  nav.top-links a[href^="#"] { display: none; }
  nav.top-links a { margin-left: 14px; }
  table.plans th, table.plans td { padding: 10px; }
  /* 窄屏恢复表头换行，避免 nowrap 把表格撑出横向滚动。 */
  table.compare thead th { white-space: normal; }
  table.compare th, table.compare td { padding: 10px 8px; }
}