/* resage — compare 页共享样式(hub /compare/ + 各 vs 子页 + 首页对比表)。
 * .compare 表格原是 index.html 内联(B393),对比页系统化后已不再是"首页独有版块",
 * 按 site.css 头部纪律挪进共享文件;index.html 与各 compare 页一起引用本文件。
 * 设计语汇同 site.css:透明 + 1px 细边,不做卡片填充。 */

/* ---------- comparison table ---------- */

.compare-wrap { overflow-x: auto; }

.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.9375rem;
}

.compare th, .compare td {
  padding: 1.125rem 1.25rem 1.125rem 0;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.compare thead th {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.compare thead th.us { color: var(--text-hi); }

.compare tbody td:first-child {
  color: var(--text-hi);
  font-weight: 500;
  max-width: 32ch;
}

.compare td.us { font-weight: 600; }

.compare .yes { color: var(--text-hi); font-weight: 600; }
.compare .no { color: var(--text-faint); }
.compare .mid { color: var(--text-mid); }

.compare tbody tr:last-child td { border-bottom: 0; }

/* 两栏窄表(子页「short version」/ pricing 段):行头窄一点,列多留白 */
.compare.duel { min-width: 520px; }
.compare.duel tbody td:first-child { max-width: 36ch; }

/* ---------- hub cards ---------- */

.cmp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: var(--gap-l);
}

.cmp-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 28px 26px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.cmp-card:hover { border-color: var(--green-edge); background: rgba(51, 226, 122, 0.04); }

.cmp-card .cmp-kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 0.9rem;
}

.cmp-card h2, .cmp-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
  color: var(--text-hi);
}

.cmp-card p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-mid);
  margin: 0 0 1.1rem;
}

.cmp-card .cmp-more { font-size: 0.875rem; font-weight: 600; color: var(--accent); }

@media (max-width: 680px) { .cmp-cards { grid-template-columns: 1fr; } }

/* ---------- vs sub-page prose ---------- */

/* 长文段落沿用 .doc 语汇(site.css);这里只补对比页独有件 */

.vs-note {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-faint);
  margin: 0.75rem 0 0;
}

/* verdict:Pick A if / Pick B if 双卡(语汇同 about 页 .ends) */
.verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: var(--gap-s) 0 0;
}
.verdict > div {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 24px 22px;
}
.verdict > div.us { border-color: var(--green-edge); }
.verdict h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--text-hi);
}
.verdict ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.verdict li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-mid);
}
.verdict li::before { content: "—"; position: absolute; left: 0; color: var(--text-faint); }
.verdict .us li::before { content: "✦"; color: var(--accent); font-size: 0.8em; top: 0.2em; }
@media (max-width: 640px) { .verdict { grid-template-columns: 1fr; } }

/* 尾部 CTA:复用首页 dayone/final 语汇(那套定义在 index.html 内联,子页拿不到,这里补一份对比页用) */
.dayone {
  background: var(--green-bg);
  border-top: 1px solid var(--green-edge);
  border-bottom: 1px solid var(--green-edge);
  padding-top: var(--sec-pad);
  padding-bottom: var(--sec-pad);
  margin-top: var(--sec-pad);
}
.dayone h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--gap-s);
}
.dayone.final { text-align: center; }
.dayone.final h2, .dayone.final .lede { margin-left: auto; margin-right: auto; }
.dayone.final .lede { margin-bottom: var(--gap-m); }

/* 交叉链接行(read next) */
.vs-next {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: var(--gap-s);
  font-size: 0.9375rem;
}
.vs-next a { color: var(--text-mid); border-bottom: 1px solid var(--line); }
.vs-next a:hover { color: var(--text-hi); border-bottom-color: var(--accent); }