/*
 * product-site.css — product.quickfindapp.com 专属视觉层（大厂化）
 *
 * 定位：site.css / tokens.css 提供基础设计系统（品牌色、容器、按钮、卡片），
 * 本文件在其之上叠一层「产品站」质感——极光渐变 hero、bento 能力网格、
 * 玻璃拟态卡片、定价卡高亮、滚动渐入。所有类名一律 pf- 前缀，
 * 避免与主站样式冲突，也不进任何 sync 清单（本体就在 quickfind-product/）。
 *
 * 色板沿用主站令牌：--brand(#2B5CFF) / --accent(#00C2FF) / --card / --line / --muted，
 * 深浅色靠 [data-theme] 切换，本文件只提供两套覆盖值。
 */

/* ============================ 0. 本站令牌 ============================ */
.pf-page {
  --pf-r-lg: 24px;
  --pf-r-md: 18px;
  --pf-r-sm: 12px;
  --pf-ink-soft: var(--ink-2);
  --pf-tint: rgba(43, 92, 255, .06);
  --pf-tint-strong: rgba(43, 92, 255, .12);
  --pf-hair: var(--line);
  --pf-glow: 0 24px 60px -28px rgba(43, 92, 255, .45);
}
[data-theme="dark"] .pf-page {
  --pf-tint: rgba(43, 92, 255, .14);
  --pf-tint-strong: rgba(43, 92, 255, .22);
  --pf-hair: rgba(255, 255, 255, .09);
}

/* ============================ 1. Hero ============================ */
.pf-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 76px;
  isolation: isolate;
}
.pf-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 620px;
  z-index: -2;
  background:
    radial-gradient(46% 52% at 22% 18%, rgba(43, 92, 255, .30), transparent 70%),
    radial-gradient(40% 46% at 78% 8%, rgba(0, 194, 255, .26), transparent 72%),
    radial-gradient(52% 40% at 50% 0%, rgba(139, 92, 246, .16), transparent 70%);
  filter: blur(6px);
}
[data-theme="dark"] .pf-hero::before { opacity: .55; }
.pf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--pf-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pf-hair) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 8%, #000, transparent 78%);
  mask-image: radial-gradient(72% 62% at 50% 8%, #000, transparent 78%);
  opacity: .5;
}
.pf-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 56px;
  align-items: center;
}
.pf-hero-copy { min-width: 0; }

.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--pf-hair);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-ink-soft);
  margin-bottom: 22px;
}
.pf-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(0, 194, 255, .18);
}
.pf-badge b { color: var(--brand); font-weight: 700; }

.pf-hero h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 18px;
}
.pf-hero .pf-lead {
  font-size: clamp(15.5px, 1.5vw, 17.5px);
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 30px;
}
.pf-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.pf-cta .btn { border-radius: 14px; }
.pf-cta .btn-primary { box-shadow: 0 14px 34px -12px rgba(43, 92, 255, .65); }
.pf-cta .btn-lg { padding: 15px 34px; font-size: 15.5px; }

.pf-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 13.5px;
  color: var(--pf-ink-soft);
}
.pf-trust span { display: inline-flex; align-items: center; gap: 7px; }
.pf-trust svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

.pf-hero-art { position: relative; }
.pf-hero-art svg { width: 100%; height: auto; display: block; }
.pf-hero-art .pf-float {
  animation: pf-float 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes pf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .pf-hero-art .pf-float { animation: none; }
}

/* ============================ 2. 指标带 ============================ */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--pf-hair);
  border: 1px solid var(--pf-hair);
  border-radius: var(--pf-r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pf-stats > div {
  background: var(--card);
  padding: 26px 22px;
  text-align: center;
}
.pf-stats b {
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.pf-stats span { font-size: 13px; color: var(--muted); }

/* ============================ 3. Bento 能力网格 ============================ */
.pf-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.pf-bento > * { grid-column: span 2; }
.pf-bento > .pf-bento-wide { grid-column: span 3; }
.pf-bento > .pf-bento-full { grid-column: span 6; }

.pf-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 26px 28px;
  border-radius: var(--pf-r-lg);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
.pf-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% -10%, var(--pf-tint), transparent 70%);
  opacity: 0;
  transition: opacity .28s ease;
}
.pf-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--pf-glow);
  border-color: transparent;
}
.pf-cell:hover::after { opacity: 1; }
.pf-cell h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-cell p { font-size: 14px; color: var(--muted); margin: 0; }

.pf-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--brand-grad-soft);
  border: 1px solid var(--pf-hair);
  color: var(--brand);
  flex: none;
}
.pf-icon svg { width: 21px; height: 21px; }
.pf-icon-lg { width: 52px; height: 52px; border-radius: 17px; }
.pf-icon-lg svg { width: 25px; height: 25px; }

.pf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--pf-tint);
  color: var(--brand);
}
.pf-tag.is-pro { background: rgba(217, 119, 6, .12); color: #b45309; }
[data-theme="dark"] .pf-tag.is-pro { background: rgba(245, 158, 11, .18); color: #fbbf24; }

/* ============================ 3-b. 输入方式卡（产品首页） ============================ */
.pf-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pf-mode {
  padding: 20px 20px 22px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.pf-mode:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(43, 92, 255, .32); }
.pf-mode.is-pro { background: linear-gradient(180deg, rgba(217, 119, 6, .06), transparent 55%), var(--card); }
.pf-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pf-mode-head b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pf-mode-head .pf-tag { margin-top: 0; }
.pf-mode p { font-size: 13.2px; color: var(--muted); margin: 0 0 10px; }
.pf-mode code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 7px;
  background: var(--pf-tint);
  color: var(--brand);
  font-size: 12px;
}

/* ============================ 3-c. 能力覆盖评分条（功能页对比） ============================ */
.pf-scores {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.pf-score {
  padding: 16px 16px 14px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
}
.pf-score.is-qf { border-color: rgba(43, 92, 255, .4); box-shadow: var(--pf-glow); }
.pf-score .cs-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pf-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}
.pf-score .cs-num { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pf-score .cs-num span { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.pf-score .cs-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-2);
  overflow: hidden;
}
.pf-score .cs-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); }
.pf-score:not(.is-qf) .cs-bar i { background: var(--qf-border, #d7dce6); }

/* ============================ 3-d. 功能卡标题内图标 ============================ */
.pf-fcard h3 .pf-icon { width: 30px; height: 30px; border-radius: 10px; }
.pf-fcard h3 .pf-icon svg { width: 16px; height: 16px; }

/* ============================ 4. 能力分组（features） ============================ */
.pf-group + .pf-group { margin-top: 46px; }
.pf-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.pf-group-title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 3px;
  background: var(--brand-grad);
}

.pf-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pf-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.pf-fcard {
  padding: 24px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.pf-fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(43, 92, 255, .35); }
.pf-fcard h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.pf-fcard p { font-size: 13.8px; color: var(--muted); margin: 0; }

/* ============================ 5. 定价 ============================ */
.pf-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--pf-hair);
  margin-bottom: 14px;
  /* 它是 .pf-billing 的 flex item，默认 flex-shrink:1 会被压到内容宽度以下，
     按钮随之溢出、按钮内文字被逐字拆行（实测塌到 40px 而按钮要 54px）。
     分段控件宽度由内容决定，所以这里直接不让它收缩。 */
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
}
.pf-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;      /* 分段控件的字不允许断行 */
  flex: 0 0 auto;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pf-switch button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.pf-switch .pf-save {
  margin-left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
}

.pf-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  /* 三卡等高：以前是 align-items:start，各卡按内容自适应，
     于是 Team 卡（描述更长）比另两张高 21px、按钮底部错开一横线。
     等高 + 按钮 margin-top:auto 沉底是定价页的通行做法（对齐比参差重要）。 */
  align-items: stretch;
}
.pf-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--pf-r-lg);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  box-shadow: var(--shadow-sm);
  transition: transform .28s ease, box-shadow .28s ease;
}
.pf-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pf-plan.is-popular {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--brand-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--pf-glow);
}
.pf-plan.is-popular::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--brand-grad);
  filter: blur(18px);
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}
.pf-plan-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px -8px rgba(43, 92, 255, .8);
}
.pf-plan h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.pf-plan .pf-plan-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
.pf-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.pf-amount b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pf-amount span { font-size: 13.5px; color: var(--muted); }
.pf-plan .pf-note { font-size: 12.5px; margin-bottom: 18px; }
/* 警示色：只有「在线购买已关闭」才会出现，正常态不该有一条空浅蓝条 */
.pf-plan .pf-note.is-warn {
  color: var(--warn, #b45309);
  background: rgba(180, 83, 9, .1);
  border-color: rgba(180, 83, 9, .28);
}
/* 三卡高度由 grid 拉伸统一，按钮一律沉底，避免 note 缺席时按钮高低不齐 */
.pf-plan > .btn,
.pf-plan > button.btn { margin-top: auto; }
.pf-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
  flex: 1;
}
.pf-plan li {
  display: flex;
  gap: 9px;
  font-size: 13.8px;
  color: var(--pf-ink-soft);
  line-height: 1.5;
}
.pf-plan li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand); }
.pf-plan.is-popular li svg { color: var(--brand-2); }
.pf-plan .btn { width: 100%; border-radius: 12px; }

/* ============================ 6. 对照矩阵 ============================ */
.pf-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--pf-hair);
  border-radius: var(--pf-r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.pf-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.6px; min-width: 760px; }
.pf-matrix th, .pf-matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--pf-hair); }
.pf-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pf-ink-soft);
  text-align: center;
  white-space: nowrap;
}
.pf-matrix thead th:first-child { text-align: left; left: 0; z-index: 3; }
.pf-matrix tbody th { font-weight: 600; color: var(--ink); }
.pf-matrix tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.pf-matrix tbody td { text-align: center; }
.pf-matrix tbody tr:last-child th,
.pf-matrix tbody tr:last-child td { border-bottom: 0; }
.pf-matrix tbody tr:hover th,
.pf-matrix tbody tr:hover td { background: var(--pf-tint); }
.pf-matrix .col-free, .pf-matrix .col-pro, .pf-matrix .col-team { width: 116px; }
.pf-matrix thead .col-pro { color: var(--brand); }
.pf-matrix tr.group td {
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pf-ink-soft);
  text-align: left;
}
/* ✓ / — / 部分 三态单元格。
   原先 min-width:26px + border-radius:8px，在 640px 窄表里被压成两三个字宽的小色块，
   扫一眼分不清是「包含」还是「部分」。改成 40px 胶囊 + title/aria 由生成器补，
   让悬停能读到具体语义（不靠颜色单独承载信息）。

   第二轮修正（看截图后）：三态的视觉权重原本严重不对等——
   ✓ 是饱和绿底 + 绿字，很醒目；— 是极浅灰底 + 灰字，在白底上几乎看不见；
   「联系我们」是文字，挤在橙色胶囊里显得别扭。
   现在三条统一为「圆角方块 + 同尺寸符号 + 深浅两级的底」，
   差异只由符号本身承载，颜色只做辅助。 */
.pf-yes, .pf-no, .pf-part {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  user-select: none;
}
/* ✓：绿底白字，符号反白——最重的一档 */
.pf-yes { background: rgba(5, 150, 105, .92); color: #fff; }
/* —：淡灰底 + 深灰字。不能更淡，否则等于「没有」 */
.pf-no { background: var(--bg-2); color: var(--pf-ink-soft); box-shadow: inset 0 0 0 1px var(--pf-hair); }
/* 部分 / 差异化档：格子里放的是「标准」「优先」这类词，不是符号。
   与 ✓/— 的方块分开处理——方块是「符号格」，词是「文字格」，
   混用同一套 padding 会让两行的视觉重量不一致。 */
.pf-part {
  background: rgba(217, 119, 6, .92);
  color: #fff;
  font-size: 12px;
  padding: 0 8px;
  min-width: 46px;
  letter-spacing: .01em;
}
[data-theme="dark"] .pf-part { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.pf-matrix .featured { background: rgba(43, 92, 255, .05); }

/* ============================ 7. FAQ ============================ */
.pf-faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.pf-faq details {
  border: 1px solid var(--pf-hair);
  border-radius: var(--pf-r-md);
  background: var(--card);
  padding: 4px 20px;
  transition: border-color .24s ease, box-shadow .24s ease;
}
.pf-faq details[open] { border-color: rgba(43, 92, 255, .4); box-shadow: var(--shadow-sm); }
.pf-faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 15px;
  padding: 16px 32px 16px 0;
  position: relative;
}
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .24s ease;
}
.pf-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pf-faq summary:hover { color: var(--brand); }
.pf-faq details p { margin: 0; padding: 0 0 18px; font-size: 14px; color: var(--muted); }

/* ============================ 8. CTA band ============================ */
.pf-cta-band {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 52px 44px;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #2B5CFF 0%, #1E50E8 46%, #00C2FF 130%);
  box-shadow: 0 30px 70px -34px rgba(43, 92, 255, .8);
}
.pf-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 18% 12%, rgba(255, 255, 255, .22), transparent 70%),
    radial-gradient(36% 50% at 88% 90%, rgba(0, 194, 255, .38), transparent 72%);
}
.pf-cta-band > * { position: relative; }
.pf-cta-band h2 { font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.pf-cta-band p { font-size: 15.5px; opacity: .92; max-width: 46em; margin: 0 auto 26px; }
.pf-cta-band .btn { border-radius: 13px; }
.pf-cta-band .btn-onband {
  background: #fff;
  color: var(--brand);
  border-color: transparent;
  box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .7);
}
.pf-cta-band .btn-onband:hover { color: var(--brand-2); }
.pf-cta-band .btn-outline {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.pf-cta-band .btn-outline:hover { color: #fff; border-color: #fff; }

/* ============================ 9. 页内导航 chips ============================ */
.pf-subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 0; }
/* 小节 chips 所在的 section 自己收口：原来 section-tight 的 56px 下内边距
   叠加 chips 的 34px 外边距 = 约 120px 空白，chips 看着像浮在页面中间。 */
.pf-subnav-sec { padding: 6px 0 30px; }
.pf-subnav a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--pf-hair);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pf-ink-soft);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pf-subnav a:hover { border-color: var(--brand); color: var(--brand); background: var(--pf-tint); }

/* ============================ 10. 页内锚点表格（场景 / 规格） ============================ */
.pf-tbl-wrap {
  border: 1px solid var(--pf-hair);
  border-radius: var(--pf-r-lg);
  background: var(--card);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
/* 版本矩阵：列宽是固定通道（46% + 3×18%），桌面端本来就是满宽的，
   不需要横滑；sticky 列头/组标题要贴着**视口**吸顶才有用。
   ⚠ 但 .pf-tbl-wrap 上的 overflow-x:auto 会让它成为 sticky 的包含块——
     sticky 改为相对这个容器定位，于是无论页面怎么滚，列头都原地不动
     （2026-10-16 实测：滚到矩阵中段，列头 top=-165px，整张表失去对照）。
     正确做法：桌面端放开这个包含块（overflow:visible，圆角/描边仍在表格自身），
     只在窄屏恢复横滑。colgroup 的固定列宽保证放开后也不会崩版。 */
@media (min-width: 1101px) {
  .pf-tbl-wrap:has(.pf-tbl-tiers) { overflow: visible; }
  /* overflow 放开后圆角与描边要落到表格自身，否则 sticky 单元格会溢出到
     容器圆角外、白底压住描边。
     ⚠ 这里**不能**再给表格加 overflow:clip/hidden —— 那会重新制造 sticky 的
     包含块，等于把刚拆掉的坑又挖回来（clip 同样会）。改用「容器不裁剪 +
     描边在容器上、底色在表格上」的组合，圆角由容器负责，sticky 保持自由。 */
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers {
    position: relative;
    z-index: 0;
    border-radius: calc(var(--pf-r-lg) - 1px);
    background: var(--card);
  }
  /* 列头 sticky 需要不透明底，否则下滚时表体文字会从下面透上来 */
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers thead th { background: var(--card); }
  /* 首尾单元格补圆角，让表格自身的圆角与容器描边对齐 */
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers thead th:first-child { border-top-left-radius: calc(var(--pf-r-lg) - 1px); }
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers thead th:last-child { border-top-right-radius: calc(var(--pf-r-lg) - 1px); }
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers tbody tr:last-child th:first-child { border-bottom-left-radius: calc(var(--pf-r-lg) - 1px); }
  .pf-tbl-wrap:has(.pf-tbl-tiers) .pf-tbl-tiers tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--pf-r-lg) - 1px); }
}
.pf-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.8px; min-width: 640px; }
.pf-tbl th, .pf-tbl td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--pf-hair); vertical-align: top; }
.pf-tbl thead th {
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pf-ink-soft);
  white-space: nowrap;
}
.pf-tbl tbody tr:last-child th, .pf-tbl tbody tr:last-child td { border-bottom: 0; }
.pf-tbl tbody tr:hover th, .pf-tbl tbody tr:hover td { background: var(--pf-tint); }
.pf-tbl code {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--pf-tint);
  color: var(--brand);
  font-size: 12.5px;
  margin: 2px 3px 2px 0;
}
.pf-tbl td.pf-ext { font-size: 12.5px; color: var(--muted); }

/* ============================ 11. 提示条 / 承诺 ============================ */
.pf-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--pf-r-md);
  background: var(--pf-tint);
  border: 1px solid rgba(43, 92, 255, .22);
  font-size: 13.8px;
  color: var(--pf-ink-soft);
}
.pf-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand); }
.pf-note.is-ok { background: rgba(5, 150, 105, .1); border-color: rgba(5, 150, 105, .3); }
.pf-note.is-ok svg { color: var(--ok); }

/* ============================ 12. 滚动渐入 ============================ */
.pf-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.pf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================ 13. 响应式 ============================ */
@media (max-width: 1080px) {
  .pf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pf-hero-art { max-width: 520px; margin: 0 auto; }
  .pf-bento > *, .pf-bento > .pf-bento-wide { grid-column: span 3; }
  .pf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pf-hero { padding: 64px 0 56px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-plans { grid-template-columns: minmax(0, 1fr); }
  .pf-grid-3, .pf-grid-2, .pf-modes { grid-template-columns: minmax(0, 1fr); }
  .pf-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-bento > *, .pf-bento > .pf-bento-wide, .pf-bento > .pf-bento-full { grid-column: span 6; }
  .pf-cta-band { padding: 40px 24px; border-radius: 20px; }
}
@media (max-width: 520px) {
  .pf-cta { gap: 10px; }
  .pf-cta .btn { flex: 1 1 100%; text-align: center; }
  .pf-amount b { font-size: 34px; }
}

/* ============================ 14. 页面构件补全 ============================ */
/* features / pricing 两页的 hero 变体：沿用主站 .page-hero 基线（kicker/h1/lead
   的排版与间距），只把垂直留白压矮一档——首页 pf-hero 是全屏门面，
   子页矮一截，整站的节奏才像大厂产品站而不是三张一样的横幅。 */
.pf-page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 62px 0 46px;
}
/* 内页页头与首页 hero 同一套视觉语言，但更淡：只在顶部压一层极光 + 一道底线，
   否则纯白 + 居中大标题会显得比首页单薄一截（截屏对比后加的）。 */
.pf-page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -8% auto -8%;
  height: 460px;
  z-index: -2;
  background:
    radial-gradient(44% 54% at 26% 10%, rgba(43, 92, 255, .16), transparent 70%),
    radial-gradient(38% 48% at 76% 4%, rgba(0, 194, 255, .13), transparent 72%),
    radial-gradient(50% 38% at 50% 0%, rgba(139, 92, 246, .09), transparent 70%);
  filter: blur(8px);
}
.pf-page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pf-hair) 18%, var(--pf-hair) 82%, transparent);
}
[data-theme="dark"] .pf-page-hero::before { opacity: .6; }
.pf-page-hero .pf-trust { justify-content: center; margin-top: 16px; }

/* 定价页：计费周期切换行 + 卡下小注 */
.pf-billing {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 30px;
}
.pf-save {
  font-size: 12px; font-weight: 700; color: var(--brand);
  background: var(--pf-tint-strong); border: 1px solid rgba(43, 92, 255, .28);
  padding: 4px 11px; border-radius: 999px;
}
.pf-paynote { text-align: center; color: var(--muted); font-size: 13px; margin: 14px auto 0; max-width: 62em; }

/* 首页版本预览条：三张小卡只放名字+一句话，价格一律去定价页看
   （价格是动态的：本地默认价 + /api/site-config 后台价，静态写死会漂移） */
.pf-plan-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pf-mini {
  display: flex; flex-direction: column; gap: 10px; padding: 24px;
  border-radius: var(--pf-r-md); background: var(--card); border: 1px solid var(--pf-hair);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.pf-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pf-mini h3 { font-size: 16px; font-weight: 800; }
.pf-mini p { font-size: 13.5px; color: var(--muted); flex: 1; margin: 0; }
.pf-mini.is-popular { border-color: rgba(43, 92, 255, .5); box-shadow: var(--pf-glow); }
.pf-mini .btn { align-self: flex-start; }

/* 功能卡内的清单（免费包含 / 何时付费两节） */
.pf-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.pf-list li {
  position: relative; padding-left: 25px;
  font-size: 13.8px; color: var(--pf-ink-soft); line-height: 1.55;
}
/* li 内联的图标必须显式给尺寸：SVG 无内在尺寸，直接放进 <li> 会撑满整行宽
   （实测把 145px 的三条列表拉到 1455px）。站内绝大多数 .pf-list 用纯文本 li，
   这个坑要等真往里塞图标时才暴露，所以约束放在基线而不是单个区块。 */
.pf-list li > svg {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -2px;
  margin-right: 7px;
  color: var(--ok);
}
/* 勾号用 data-URI 背景图：CSP img-src 含 data:；brand 色深浅主题同值（#2B5CFF），
   写死在 URI 里不会漂。stroke 用 %23 转义 #。 */
.pf-list li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 15px; height: 15px;
  border-radius: 50%; background-color: var(--pf-tint-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B5CFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}

/* 章节末尾的「再看一层」链接行（bento / modes / plans 三节共用） */
.pf-more { text-align: center; margin-top: 26px; font-size: 14px; }
.pf-more a { color: var(--brand); font-weight: 600; text-decoration: none; }
.pf-more a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .pf-plan-strip { grid-template-columns: minmax(0, 1fr); }
  .pf-page-hero { padding: 48px 0 36px; }
}

/* ============================ 15. 三步上手 ============================ */
.pf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: pfstep;
}
.pf-step {
  position: relative;
  padding: 28px 24px 26px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.pf-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(43, 92, 255, .35); }
.pf-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 11px;
  margin-bottom: 14px;
  font-size: 15px; font-weight: 800;
  color: #fff;
  background: var(--brand-grad);
  box-shadow: 0 10px 22px -12px rgba(43, 92, 255, .9);
}
.pf-step h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.pf-step p { font-size: 13.8px; color: var(--muted); margin: 0; line-height: 1.65; }

/* ============================ 16. 本机优先承诺带 ============================ */
.pf-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--pf-hair);
  border: 1px solid var(--pf-hair);
  border-radius: var(--pf-r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pf-band-cell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 22px;
  background: var(--card);
  font-size: 13.8px;
  color: var(--pf-ink-soft);
  line-height: 1.6;
}
.pf-band-ic { flex: none; }
.pf-band-ic svg { width: 20px; height: 20px; color: var(--brand); }

/* ============================ 17. 规格表内的子块与语义单元 ============================ */
.pf-subblock + .pf-subblock { margin-top: 32px; }
.pf-block-title {
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-block-title::before {
  content: "";
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--brand-grad);
}
/* 版本徽章（免费 / Pro）：放在表格「版本」列里 */
.pf-tier { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.pf-tier-free { color: var(--pf-ink-soft); }
.pf-tier-pro { color: var(--brand); }

/* 版本对照矩阵的语义单元：与 .pf-yes/.pf-no/.pf-part（同类对比表）同色，
   两套表共用一套「✓ / — / 部分」语义，不另起一套颜色语言。 */
.pf-tbl-tiers th small {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
}
.pf-tbl-tiers td.pf-yes,
.pf-tbl-tiers td.pf-no,
.pf-tbl-tiers td.pf-part { text-align: center; font-weight: 700; }
.pf-tbl-tiers .pf-part a { color: var(--brand); }

/* ---- 矩阵版式（用户 2026-10-16 截图反馈）----
   1) table-layout:fixed + 显式列宽：原来没有固定布局，能力列（最长的文本列）
      吞掉约六成宽度，三档列被压到只剩 60~80px，✓ 挤成小方块。
      改成 46% + 三档各 18%，并在 <th> 上用 <colgroup> 之外的显式 width 兜底。
   2) tr.group 组标题行独立成条：原来与数据行同貌同高，读者分不清
      「搜索能力」是分组标题还是一条能力。改成整行浅底 + 加粗 + 上边框。
   3) 单元格 vertical-align:middle：能力名带 <small> 说明时是 2 行，
      三档单元格跟着一高一低，整张表行高参差。 */
.pf-tbl-tiers { table-layout: fixed; }
/* 两级吸顶基准：
   --pf-thead-h  列头自身高度（组标题行要精确让开它，否则二者叠在同一位置，
                 组标题行会把列头顶走——踩过一次，两处 top 都写 0）
   --pf-sticky-top  列头离视口顶的距离。站点导航栏 .header 是 sticky + z-index:100，
                 列头若用 top:0 会整条钻到导航栏底下、被完全遮住（踩过一次：
                 滚动到矩阵中段，列头与组标题行全部看不见，只剩一堆绿块）。
                 导航栏高度用主站的 --header-h（单站真源在 site.css:32）。
   --pf-thead-h 必须定义在 **表格自身（.pf-tbl-tiers）** 上，不能挂在 thead th 上：
     th 与 tbody td 是兄弟节点，td 取不到 th 上的自定义属性，会静默走 fallback。 */
.pf-tbl-tiers {
  --pf-thead-h: 49px;
  --pf-sticky-top: var(--header-h, 66px);
}
.pf-tbl-tiers col.col-feat { width: 46%; }
.pf-tbl-tiers col.col-free { width: 18%; }
.pf-tbl-tiers col.col-pro  { width: 18%; }
.pf-tbl-tiers col.col-team { width: 18%; }
.pf-tbl-tiers th, .pf-tbl-tiers td { vertical-align: middle; }
.pf-tbl-tiers tbody th {
  font-weight: 500;
  font-size: 13.8px;
  line-height: 1.5;
}
.pf-tbl-tiers tbody th small {
  margin-top: 4px;
  line-height: 1.5;
  color: var(--muted);
}
.pf-tbl-tiers tbody tr.group td {
  position: sticky;
  /* 组标题行排在列头正下方，故 top = 导航栏高 + 列头高（两级基准见上方注释） */
  top: calc(var(--pf-sticky-top) + var(--pf-thead-h, 49px));
  z-index: 1;
  background: var(--bg-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pf-ink-soft);
  text-align: left;
  padding-top: 11px;
  padding-bottom: 11px;
  box-shadow: inset 0 1px 0 var(--pf-hair);
}
.pf-tbl-tiers tbody tr.group:first-child td { box-shadow: none; }
/* 紧跟组标题的第一行加一条分隔，避免组标题像上一行的注脚 */
.pf-tbl-tiers tbody tr.group + tr th,
.pf-tbl-tiers tbody tr.group + tr td { border-top: 0; }
.pf-tbl-tiers tbody tr:not(.group):hover th,
.pf-tbl-tiers tbody tr:not(.group):hover td { background: var(--pf-tint); }
/* 列头压在组标题行之上，z-index 必须更高 */
.pf-tbl-tiers thead th {
  position: sticky;
  top: var(--pf-sticky-top);
  z-index: 2;
}
/* Pro 是推荐档，表头给品牌色，与定价卡的「推荐」徽章呼应 */
.pf-tbl-tiers thead th.col-pro { color: var(--brand); }
/* 强调列：给 Pro 那一列一层极淡的品牌底，三档里一眼定位推荐档。
   只能作用在「没有语义符号」的单元格上——直接写 td:nth-child(3) 会把
   「优先」那个橙色语义方块也刷成淡蓝，橙色一消失，读者就看不出这行是差异化档。 */
.pf-tbl-tiers tbody tr:not(.group) td:nth-child(3):not([class*="pf-"]) {
  background: rgba(43, 92, 255, .035);
}
.pf-tbl-tiers tbody tr:not(.group) td:nth-child(3):not([class*="pf-"]) {
  box-shadow: inset 2px 0 0 rgba(43, 92, 255, .28);
}
.pf-tbl-tiers tbody tr:not(.group):hover td:nth-child(3):not([class*="pf-"]) {
  background: rgba(43, 92, 255, .075);
}
.pf-tbl-tiers tbody tr.group td { background: var(--bg-2); }
/* 「邮件支持」这类行的三格都是文字（标准 / 优先 / 优先），连排时三块橙底
   挤在一起像一条横条，读不出「三档分别是什么」。
   三档列内 padding 从 16px 收到 12px，给相邻语义格之间留出 8px 呼吸。 */
.pf-tbl-tiers tbody td:nth-child(2),
.pf-tbl-tiers tbody td:nth-child(3),
.pf-tbl-tiers tbody td:nth-child(4) { padding-left: 12px; padding-right: 12px; }
   /* 「联系我们」是文字（占满 18% 列宽），不该套「部分」那枚橙色符号方块——
   圆角方块里放四个字会撑成一个异形块。改为纯文字链，沿用品牌色。 */
.pf-tbl-tiers .pf-part:has(a) {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  vertical-align: middle;
}
.pf-tbl-tiers .pf-part a {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pf-tbl-tiers .pf-part a:hover { color: var(--brand-2); }

@media (max-width: 860px) {
  .pf-steps { grid-template-columns: minmax(0, 1fr); }
  .pf-band { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ 18. 跨站互链区（docs / search / api / 下载） ============================
   设计意图：卡片是整块可点的链接（<a> 承载，避免「标题可点、卡片不可点」的落差），
   箭头在 hover 时右移，给出「这是出站」的暗示；图标沿用与 404 页同一套描边路径。 */
.pf-cross {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.pf-cross-card {
  display: block;
  padding: 22px 20px 20px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.pf-cross-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(43, 92, 255, .35);
}
.pf-cross-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-bottom: 14px;
  color: var(--brand);
  background: var(--pf-tint);
  border: 1px solid var(--pf-tint-strong);
}
.pf-cross-ic svg { width: 20px; height: 20px; }
.pf-cross-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 7px;
}
.pf-cross-t svg {
  width: 16px; height: 16px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .22s ease, transform .22s ease;
}
.pf-cross-card:hover .pf-cross-t svg { opacity: 1; transform: translateX(0); }
.pf-cross-d { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* ============================ 19. 索引与性能条目（features） ============================ */
.pf-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pf-index-item {
  display: flex;
  gap: 14px;
  padding: 22px 20px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  transition: border-color .26s ease, box-shadow .26s ease;
}
.pf-index-item:hover { border-color: rgba(43, 92, 255, .3); box-shadow: var(--shadow); }
.pf-index-ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  color: var(--brand);
  background: var(--pf-tint);
  border: 1px solid var(--pf-tint-strong);
}
.pf-index-ic svg { width: 19px; height: 19px; }
.pf-index-item h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 7px; }
.pf-index-item p { font-size: 13.6px; color: var(--muted); line-height: 1.68; margin: 0; }

@media (max-width: 980px) {
  .pf-cross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pf-cross, .pf-index { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ 20. 能力边界（明确不做）============================
   设计意图：这一节的语气必须比功能清单低一档——不是「我们弱」，是「这些不在范围内」。
   视觉上因此不用品牌蓝的图标方块（那是能力清单的符号），改用中性灰的横杠，
   并且不给卡片阴影：阴影=可点击的暗示，这里是纯陈述。 */
.pf-nope {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.pf-nope-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 17px 19px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
  font-size: 13.8px;
  line-height: 1.7;
  color: var(--pf-ink-soft);
}
.pf-nope-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--muted);
}
.pf-nope-mark svg { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .pf-nope { grid-template-columns: minmax(0, 1fr); }
}
/* 附注（not9）：整宽、浅底，与上面九宫格拉开层级 */
.pf-nope-foot { margin: 16px auto 0; max-width: 980px; }

/* ============================ 21. 采购与开票（pricing 页）============================
   三张卡各自独立，不做「主卡 + 侧栏」的层级——三个主题（席位计费 / 支付 / 发票）
   对采购方是平级的问句，谁都不比谁重要。 */
.pf-buy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pf-buy .pf-fcard { padding: 22px 22px 20px; }
.pf-buy-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  margin-bottom: 14px;
  color: var(--brand);
  background: var(--pf-tint);
  border: 1px solid var(--pf-tint-strong);
}
.pf-buy-ic svg { width: 19px; height: 19px; }
.pf-buy .pf-fcard h3 { font-size: 15.5px; font-weight: 800; margin-bottom: 9px; }
.pf-buy .pf-fcard p { font-size: 13.6px; line-height: 1.72; color: var(--muted); margin: 0; }

/* 「什么时候该找我们谈」：整宽深色带，与上面三张白卡拉开层级 */
.pf-buy-when {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "t btn" "list btn";
  gap: 6px 28px;
  align-items: center;
  margin-top: 16px;
  padding: 22px 24px;
  border-radius: var(--pf-r-lg);
  background: var(--pf-tint);
  border: 1px solid var(--pf-tint-strong);
}
.pf-buy-when h3 { grid-area: t; font-size: 15.5px; font-weight: 800; margin: 0; }
.pf-buy-when .pf-list { grid-area: list; margin: 0; }
.pf-buy-when .btn { grid-area: btn; }
.pf-buy-when .pf-list li { margin-bottom: 4px; }
.pf-buy-when .pf-list li:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
  .pf-buy { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pf-buy-when {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "t" "list" "btn";
  }
  .pf-buy-when .btn { justify-self: stretch; text-align: center; }
}

/* ============================ 22. 最近更新（首页）============================
   时间线式卡片：版本号 + 徽章 + 日期一行排开，条目用与承诺带同款的对勾列表。
   列数用 .is-N 类由生成器按实际版本数给，不写 auto-fit——
   auto-fit 在只有一张卡时仍会铺出 "1152px 0px 0px" 的隐式轨道，
   单卡被拉到 3000+ px 高（实测过），align-items 也救不回来。 */
.pf-rel {
  display: grid;
  gap: 16px;
  align-items: start;
}
.pf-rel.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-rel.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 单版本时收窄：一张卡横跨整行只会变成一条横幅 */
.pf-rel.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
@media (max-width: 860px) {
  .pf-rel.is-2, .pf-rel.is-3 { grid-template-columns: minmax(0, 1fr); }
}
.pf-rel-card {
  padding: 22px 22px 20px;
  border-radius: var(--pf-r-md);
  background: var(--card);
  border: 1px solid var(--pf-hair);
}
.pf-rel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pf-rel-head h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pf-rel-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
}
.pf-rel-ver {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-2);
}
.pf-rel-head time {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pf-rel-t {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--pf-ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}
.pf-rel-card .pf-list li { font-size: 13.5px; margin-bottom: 6px; }
.pf-rel-card .pf-list li:last-child { margin-bottom: 0; }
/* li 里的对勾图标必须显式给尺寸。SVG 没有内在尺寸，
   直接内联进 <li> 会撑到 li 的整行宽——实测把 145px 的三条目列表拉到 1455px，
   整节因此变成 1935px。站内其它 .pf-list 用法都是纯文本 li，所以一直没暴露。 */
.pf-rel-card .pf-list li svg {
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: -2px;
  margin-right: 7px;
  color: var(--ok);
}

/* =============================================================================
 * 14. 大厂化质感层（2026-10-16）
 *
 * 【为什么单独一层而不是改前面各节】
 *   前面 0~13 节是「结构与正确性」，14 节只加「质感」，两者职责不同：
 *   结构改错了会崩版、能被门禁逮到；质感改坏了顶多丑一点、肉眼可判。
 *   分层的另一个好处：整层可以整体删掉回滚，不影响任何布局与行为。
 *
 * 【这一层做了什么（四件事，按收益排序）】
 *   ① 首屏 hero：加「聚光 + 天顶辉光 + 网格收敛」三层背景，并给 hero art
 *      套一圈玻璃高光边。改前首屏是一块平铺的浅蓝，标题与右侧示意图之间
 *      没有主次，大厂首屏普遍是「中心聚光把视线压到 H1 + CTA 上」。
 *   ② 卡片：统一抬升曲线与描边层级。全站此前 hover 位移有 -2/-3/-4px 三种、
 *      阴影有两套，鼠标扫过去时卡片像在「不齐整地弹一下」。
 *   ③ 区块节奏：section 上下留白由 68px 收到 64px，section-head 下边距
 *      由 42px 收到 36px，并把 .sub 的行高放宽到 1.75。
 *      改前每屏只能装下 1.4 个区块，滚动条被拉得很长、信息密度低。
 *   ④ 细节：表格行高与斑马纹、FAQ 展开动效、指标带数字的等宽对齐。
 *
 * 【纪律】
 *   · 只用 pf- 前缀类名与 :where() 低特异性覆盖，不与 site.css 抢优先级；
 *   · 深浅两套都要给值，任何一条只写浅色都会在深色下变成「看不见的精致」；
 *   · 不新增任何外部资源（CSP 无 'unsafe-inline'，也不要引字体/图片外链）。
 * ========================================================================== */

/* ---------------------------------------------------------------------
 * 14.1 站点级节奏
 * ------------------------------------------------------------------- */
.pf-page {
  --pf-ease: cubic-bezier(.22, .61, .36, 1);
  --pf-lift: -4px;
  /* 阴影分三档：静置（几乎不可见）/ 悬浮 / 强调（推荐档）。
     改前全站静置与悬浮用的是同一套 --shadow，看不出「这张卡能点」。 */
  --pf-sh-rest: 0 1px 2px rgba(15, 23, 41, .04), 0 1px 3px rgba(15, 23, 41, .03);
  --pf-sh-hover: 0 18px 40px -20px rgba(15, 23, 41, .28), 0 4px 12px -6px rgba(15, 23, 41, .12);
  --pf-sh-brand: 0 26px 60px -28px rgba(43, 92, 255, .48), 0 8px 20px -12px rgba(43, 92, 255, .30);
}
[data-theme="dark"] .pf-page {
  /* 深色下静置阴影几乎不可见，改用「描边 + 微亮」表达层级：
     阴影在 #0B1120 上没有对比度，靠边框才分得开前后。 */
  --pf-sh-rest: 0 1px 2px rgba(0, 0, 0, .40);
  --pf-sh-hover: 0 20px 44px -22px rgba(0, 0, 0, .70), 0 0 0 1px rgba(255, 255, 255, .06);
  --pf-sh-brand: 0 26px 60px -28px rgba(43, 92, 255, .42), 0 0 0 1px rgba(43, 92, 255, .32);
}

.pf-page .section { padding: 64px 0; }
.pf-page .section-tight { padding: 40px 0; }
.pf-page .section-head { margin-bottom: 36px; }
.pf-page .section-head .sub { line-height: 1.75; }
.pf-page .section-head h2 { letter-spacing: -.02em; text-wrap: balance; }
/* 主站 kicker 是全大写 + .14em 字距，在中文标题上方会显得又窄又挤；
   中文语境下保留字距、去掉 uppercase 的视觉效果（en 下原样，text-transform
   对拉丁字母仍生效，en 站不受影响）。 */
.pf-page .section-head .kicker { letter-spacing: .10em; }

/* ---------------------------------------------------------------------
 * 14.2 首屏 hero：聚光 + 辉光 + 网格
 * ------------------------------------------------------------------- */
.pf-hero {
  padding: 96px 0 84px;
}
/* 第三层：天顶辉光。原先只有 ::before 里的两组 radial，
   视觉上「蓝紫一片」，缺少大厂首屏常见的顶部亮带。 */
.pf-hero .pf-hero-inner,
.pf-hero > .container { position: relative; }

/* 聚光：把视线压到标题区。改前整屏均匀铺色，H1 与右侧 art 权重相同。 */
.pf-hero::before {
  inset: -46% -14% auto -14%;
  height: 760px;
  background:
    radial-gradient(38% 46% at 50% 0%, rgba(255, 255, 255, .92), transparent 66%),
    radial-gradient(44% 50% at 24% 20%, rgba(43, 92, 255, .34), transparent 70%),
    radial-gradient(40% 46% at 80% 10%, rgba(0, 194, 255, .28), transparent 72%),
    radial-gradient(54% 40% at 52% 2%, rgba(139, 92, 246, .18), transparent 70%);
  filter: blur(8px);
}
[data-theme="dark"] .pf-hero::before {
  opacity: .62;
  /* 深色下不能用白色聚光（会发灰），改用一层顶部品牌色提亮 */
  background:
    radial-gradient(40% 48% at 50% 0%, rgba(43, 92, 255, .22), transparent 68%),
    radial-gradient(44% 50% at 24% 20%, rgba(43, 92, 255, .30), transparent 70%),
    radial-gradient(40% 46% at 80% 10%, rgba(0, 194, 255, .20), transparent 72%),
    radial-gradient(54% 40% at 52% 2%, rgba(139, 92, 246, .16), transparent 70%);
}
/* 网格：原来 64px 正方形铺满整个 hero，底部没有收敛，视觉上「铺到头」。
   改成上密下疏的双层网格（细网格 + 粗网格），并让 mask 在 68% 处收干净。 */
.pf-hero::after {
  background-image:
    linear-gradient(to right, var(--pf-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pf-hair) 1px, transparent 1px),
    linear-gradient(to right, var(--pf-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pf-hair) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image: radial-gradient(64% 52% at 50% 0%, #000 12%, transparent 76%);
  mask-image: radial-gradient(64% 52% at 50% 0%, #000 12%, transparent 76%);
  opacity: .42;
}

/* 标题：给一点点上浮的字距与大字号，把首屏的视觉重量压到文案上 */
.pf-hero h1 {
  font-size: clamp(34px, 4.9vw, 60px);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-wrap: balance;
  /* 中文大标题在纯色背景上边缘发虚，加一道极淡的品牌投影把笔画「托」起来 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
[data-theme="dark"] .pf-hero h1 { text-shadow: 0 2px 24px rgba(43, 92, 255, .22); }

.pf-hero .pf-lead {
  font-size: clamp(16px, 1.55vw, 18.5px);
  line-height: 1.78;
  color: var(--ink-2);
  max-width: 33em;
}
[data-theme="dark"] .pf-hero .pf-lead { color: var(--muted); }

/* 主 CTA：唯一允许发光的按钮。加内高光 + 外发光，形成首屏唯一焦点 */
.pf-cta .btn-primary {
  position: relative;
  border-radius: 14px;
  box-shadow: var(--pf-sh-brand);
  transition: transform .24s var(--pf-ease), box-shadow .24s var(--pf-ease);
  overflow: hidden;
}
/* 顶部内高光：按钮看着是「发光的实体」而不是「一块蓝色」 */
.pf-cta .btn-primary::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 46%;
  border-radius: 13px 13px 40% 40% / 13px 13px 12px 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .26), transparent);
  pointer-events: none;
}
.pf-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 68px -26px rgba(43, 92, 255, .60), 0 10px 24px -12px rgba(43, 92, 255, .38);
}
.pf-cta .btn-outline {
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .24s var(--pf-ease), border-color .24s var(--pf-ease), background .24s var(--pf-ease);
}
.pf-cta .btn-outline:hover {
  transform: translateY(-2px);
  border-color: rgba(43, 92, 255, .45);
  background: var(--card);
}

/* hero art：玻璃高光边 + 更明确的悬浮 */
.pf-hero-art {
  border-radius: var(--pf-r-lg);
  filter: drop-shadow(0 34px 70px -34px rgba(43, 92, 255, .55));
}
.pf-hero-art .pf-float { animation: pf-float 7s ease-in-out infinite; }
@keyframes pf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
[data-theme="dark"] .pf-hero-art { filter: drop-shadow(0 34px 70px -30px rgba(0, 0, 0, .80)); }
/* 尊重系统的「减少动态效果」设置——否则前庭敏感用户会被这段动画持续干扰 */
@media (prefers-reduced-motion: reduce) {
  .pf-hero-art .pf-float { animation: none; }
  .pf-cta .btn-primary:hover,
  .pf-cta .btn-outline:hover { transform: none; }
}

/* 信任行：原本是三段裸文字+勾，靠 gap 分开。
   改成三枚玻璃小胶囊，密度更高也更「有产品」。 */
.pf-trust { gap: 10px; }
.pf-trust > span {
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
  border: 1px solid var(--pf-hair);
  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .pf-trust > span { background: rgba(255, 255, 255, .04); }

/* ---------------------------------------------------------------------
 * 14.3 卡片：统一悬浮曲线与描边层级
 * ------------------------------------------------------------------- */
.pf-page :where(.pf-cell, .pf-mini, .pf-step, .pf-band-cell, .pf-cross-card, .pf-fcard, .pf-nope-item, .pf-index-item) {
  box-shadow: var(--pf-sh-rest);
  border-color: var(--pf-hair);
  transition: transform .26s var(--pf-ease), box-shadow .26s var(--pf-ease), border-color .26s var(--pf-ease);
}
.pf-page :where(.pf-cell, .pf-mini, .pf-step, .pf-fcard):hover {
  transform: translateY(var(--pf-lift));
  box-shadow: var(--pf-sh-hover);
  border-color: rgba(43, 92, 255, .34);
}
[data-theme="dark"] .pf-page :where(.pf-cell, .pf-mini, .pf-step, .pf-fcard):hover {
  border-color: rgba(43, 92, 255, .46);
}
@media (prefers-reduced-motion: reduce) {
  .pf-page :where(.pf-cell, .pf-mini, .pf-step, .pf-fcard):hover { transform: none; }
}
/* 整卡链接（跨站入口）：整块可点，给一层更明确的可点提示 */
.pf-page .pf-cross-card:hover {
  transform: translateY(var(--pf-lift));
  box-shadow: var(--pf-sh-hover);
  border-color: rgba(43, 92, 255, .40);
}
@media (prefers-reduced-motion: reduce) {
  .pf-page .pf-cross-card:hover { transform: none; }
}
/* 推荐档：静置时就该被看见，而不是等 hover */
.pf-page .pf-mini.is-popular {
  box-shadow: var(--pf-sh-brand);
  border-color: rgba(43, 92, 255, .52);
}

/* bento 主卡：改前所有卡视觉重量完全一致，主次不分。
   给「宽卡」加一层极淡的品牌底，形成 1 宽 + 2 窄 的主次节奏。 */
.pf-page .pf-bento > .pf-bento-wide {
  background:
    linear-gradient(135deg, rgba(43, 92, 255, .07), rgba(0, 194, 255, .04) 58%, transparent),
    var(--card);
  border-color: rgba(43, 92, 255, .26);
}
[data-theme="dark"] .pf-page .pf-bento > .pf-bento-wide {
  background:
    linear-gradient(135deg, rgba(43, 92, 255, .16), rgba(0, 194, 255, .08) 58%, transparent),
    var(--card);
}

/* 卡片图标：把纯色底升级成「品牌色渐变方块 + 内描边 + 顶部高光」，
   这是大厂 feature 网格最省力也最有效的质感来源。
   （真实类名是 .pf-icon / .pf-icon-lg / .pf-buy-ic，别写成 pf-cell-ic 之类） */
.pf-page :where(.pf-icon, .pf-band-ic, .pf-cross-ic, .pf-buy-ic) {
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(43, 92, 255, .15), rgba(0, 194, 255, .09));
  box-shadow: inset 0 0 0 1px rgba(43, 92, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .55);
  position: relative;
  overflow: hidden;
}
/* 顶部一道高光，制造「玻璃块」的体积感 */
.pf-page :where(.pf-icon, .pf-band-ic, .pf-cross-ic, .pf-buy-ic)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 48%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .32), transparent);
  pointer-events: none;
}
[data-theme="dark"] .pf-page :where(.pf-icon, .pf-band-ic, .pf-cross-ic, .pf-buy-ic) {
  background: linear-gradient(140deg, rgba(43, 92, 255, .28), rgba(0, 194, 255, .15));
  box-shadow: inset 0 0 0 1px rgba(43, 92, 255, .34);
}
[data-theme="dark"] .pf-page :where(.pf-icon, .pf-band-ic, .pf-cross-ic, .pf-buy-ic)::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .10), transparent);
}
/* 图标本身要压在高光之上 */
.pf-page :where(.pf-icon, .pf-band-ic, .pf-cross-ic, .pf-buy-ic) > svg { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
 * 14.4 指标带：数字是主角
 * ------------------------------------------------------------------- */
/* 原实现用 gap:1px + 父级背景色画分隔线（很省事）。
   这里不能再加 border-right —— 会与那 1px 缝叠成 2px 双线。
   只调间距与数字表现。 */
.pf-stats {
  box-shadow: var(--pf-sh-rest);
}
.pf-stats > div { padding: 28px 20px; }
.pf-stats b {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(140deg, var(--brand) 20%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf-stats span {
  font-size: 13px;
  letter-spacing: .02em;
  margin-top: 6px;
}
@media (max-width: 720px) {
  /* 窄屏 4 列会挤成两条极窄的缝，斑马块改单列堆叠 */
  .pf-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
 * 14.5 三步上手：连接线 + 序号升级
 * ------------------------------------------------------------------- */
.pf-steps { position: relative; }
/* 三张卡之间用虚线连起来（原版三卡完全独立，读不出「这是连续的 1→2→3」）。
   线的纵向位置必须精确落在 .pf-step-n 的圆心上，否则线会从序号上方或下方穿过。
   实测：卡片 padding-top 28 + 序号高 46 的一半 23 = 圆心距卡片顶 51px。
   两端锚在第一/第三张卡的中心（实测 317 / 1097，占容器 1414 的 22.4% / 77.6%）。 */
.pf-steps { position: relative; }
.pf-steps::before {
  content: "";
  position: absolute;
  top: 51px;
  left: 22.4%;
  right: 22.4%;
  height: 2px;
  background: repeating-linear-gradient(to right, rgba(43, 92, 255, .38) 0 7px, transparent 7px 15px);
  z-index: 0;
}
[data-theme="dark"] .pf-steps::before {
  background: repeating-linear-gradient(to right, rgba(43, 92, 255, .58) 0 7px, transparent 7px 15px);
}
@media (max-width: 1080px) { .pf-steps::before { display: none; } }
.pf-step {
  position: relative;
  z-index: 1;
  border-radius: var(--pf-r-md);
}
/* 序号：34px 圆角方块 → 46px 圆形，外面套一圈与所在 section 同色的光环，
   把虚线在节点处「断开」，视觉上才是「三个节点连成一条线」，
   而不是「三张卡上面飘着一条线」。 */
.pf-step-n {
  width: 46px; height: 46px;
  border-radius: 50%;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--brand-grad);
  box-shadow:
    0 10px 22px -12px rgba(43, 92, 255, .9),
    0 0 0 6px var(--pf-step-halo, var(--bg));
  position: relative;
}
/* 交替底色的 section 里光环要跟着换色，否则圆圈四周出现一圈异色边 */
.pf-page .section-alt .pf-step-n { --pf-step-halo: var(--bg-2); }
[data-theme="dark"] .pf-page .section-alt .pf-step-n { --pf-step-halo: var(--bg-2); }

/* ---------------------------------------------------------------------
 * 14.6 表格质感：斑马纹 + 行高 + 表头
 * ------------------------------------------------------------------- */
.pf-tbl-wrap {
  border-radius: var(--pf-r-lg);
  box-shadow: var(--pf-sh-rest);
}
/* 斑马纹：33 行的矩阵原本是纯白长条，横向扫读时找不到行。
   隔行给一层极淡的品牌灰，扫读成本立刻降下来。
   ⚠ 必须 :not() 排除语义格：矩阵里「✓ / — / 部分」本身就是 td
     （td.pf-yes / td.pf-no / td.pf-part），它自己的绿/灰/橙底是**语义**。
     不排除就会把 ✓ 的绿底刷成淡蓝 —— 实测隔行格里三档符号全部变白块、
     符号不可见，整张对照表读不出「哪档有什么」。 */
.pf-page .pf-tbl tbody tr:nth-child(even) th,
.pf-page .pf-tbl tbody tr:nth-child(even) td:not([class*="pf-yes"]):not([class*="pf-no"]):not([class*="pf-part"]) {
  background: rgba(43, 92, 255, .022);
}
[data-theme="dark"] .pf-page .pf-tbl tbody tr:nth-child(even) th,
[data-theme="dark"] .pf-page .pf-tbl tbody tr:nth-child(even) td:not([class*="pf-yes"]):not([class*="pf-no"]):not([class*="pf-part"]) {
  background: rgba(255, 255, 255, .028);
}
/* hover 要盖过斑马纹，否则鼠标所在行反而比斑马纹更淡 */
.pf-page .pf-tbl tbody tr:hover th,
.pf-page .pf-tbl tbody tr:hover td:not([class*="pf-yes"]):not([class*="pf-no"]):not([class*="pf-part"]) {
  background: var(--pf-tint);
}
/* 表头：加一层底部描边，与数据区明确分层。
   ⚠ 这里**绝不能**写 top:0 —— 本站导航栏 .header 是 sticky + z-index:100，
     top:0 会让所有表格的列头整条钻到导航栏底下被完全遮住
     （.pf-tbl-tiers 的正确值见 14 节两级基准 --pf-sticky-top = 导航栏高）。
     只补背景与描边，sticky 的偏移交给各自的规则。 */
.pf-page .pf-tbl thead th {
  background: var(--bg-2);
  box-shadow: inset 0 -1px 0 var(--pf-hair);
}
/* 语义方块在斑马纹行上要保持自己的底色，不能被行底色盖掉 */
.pf-page .pf-tbl td :where(.pf-yes, .pf-no, .pf-part) { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
 * 14.7 FAQ：展开动效 + 更清楚的「已展开」态
 * ------------------------------------------------------------------- */
.pf-faq { gap: 10px; }
.pf-faq details {
  box-shadow: var(--pf-sh-rest);
  transition: box-shadow .24s var(--pf-ease), border-color .24s var(--pf-ease);
}
.pf-faq details[open] {
  box-shadow: var(--pf-sh-hover);
  border-color: rgba(43, 92, 255, .38);
}
.pf-faq summary {
  transition: color .2s var(--pf-ease);
  font-weight: 650;
}
.pf-faq summary:hover { color: var(--brand); }
/* 展开标记：默认三角太小，加粗并给品牌色 */
.pf-faq summary::-webkit-details-marker { opacity: .55; }

/* ---------------------------------------------------------------------
 * 14.8 CTA 带：首屏与页尾呼应
 * ------------------------------------------------------------------- */
.pf-cta-band {
  border-radius: 28px;
  box-shadow: var(--pf-sh-brand);
  position: relative;
  overflow: hidden;
}
/* 斜向光泽，给平面渐变一点材质 */
.pf-cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 240px;
  background: radial-gradient(48% 60% at 50% 100%, rgba(255, 255, 255, .30), transparent 72%);
  pointer-events: none;
}
.pf-cta-band h2 { letter-spacing: -.025em; text-wrap: balance; }

/* ---------------------------------------------------------------------
 * 14.9 页内锚点导航（features / pricing 的胶囊条）
 * ------------------------------------------------------------------- */
.pf-subnav a {
  border-radius: 999px;
  font-weight: 600;
  transition: border-color .2s var(--pf-ease), background .2s var(--pf-ease), transform .2s var(--pf-ease);
}
.pf-subnav a:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------------
 * 14.10 其余卡片的统一圆角与阴影
 * ------------------------------------------------------------------- */
.pf-page :where(.pf-nope-item, .pf-index-item, .pf-fcard) {
  border-radius: var(--pf-r-md);
  box-shadow: var(--pf-sh-rest);
}

/* 站内链接统一带一个方向感：hover 时下划线由左向右展开 */
.pf-page .pf-more a {
  font-weight: 650;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .28s var(--pf-ease), color .2s var(--pf-ease);
}
.pf-page .pf-more a:hover {
  background-size: 100% 1px;
}