/* 指南层（/guide/ 目录页与各篇文章）的衣服。2026-08-26 按设计定稿落码。
   令牌全部来自 app.css（夜航 / 白天两套），这里只做指南自己的版式：
   眉题、答案段、面板式对比、双卡、导读页脚、目录的分组列表。
   privacy / terms / connect 穿的还是各自页内的 .legal 内联样式，互不引用。 */

.legal { padding-bottom: 72px; }
.legal > :not(.shell) { max-width: 46rem; }
.legal p, .legal li { line-height: 1.75; opacity: 0.86; }
.legal ul { padding-left: 1.2em; }
.legal .shell .g-sec { margin-left: auto; }
.legal .shell .g-sec a, .legal .shell .g-sec span {
  color: var(--text); letter-spacing: 0.05em;
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1px; text-underline-offset: 7px;
}

/* ---- 文章页头：眉题 + 衬线标题 + 等宽小字的元信息行 ---- */
.page-head { padding: 44px 0 8px; }
.page-head h1 {
  font-family: var(--heading-font); font-size: clamp(28px, 1.03vw + 24.2px, 34px);
  font-weight: 500; line-height: 1.28; letter-spacing: 0; margin-top: 14px;
  text-wrap: balance;
}
.g-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em; color: var(--accent);
  text-transform: uppercase;
}
.g-eyebrow::after {
  content: ""; flex: 1; max-width: 56px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent); opacity: 0.5;
}
.g-meta {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  color: var(--meta); text-transform: uppercase; margin-top: 12px;
}

/* 答案段：GEO 的「首段即答案」要有视觉分量——全墨色、升半档 */
.legal p.lede { font-size: 17.5px; line-height: 1.8; opacity: 1; margin-top: 30px; }

.legal h2 {
  font-family: var(--heading-font); font-size: 21px; font-weight: 500;
  margin: 2.2em 0 0.7em;
}

/* ---- 面板式对比（两篇对比页）。桌面三列网格，窄屏折成堆叠行 ---- */
.cmp {
  background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 12px; overflow: hidden; margin: 1em 0;
}
.cmp-head, .cmp-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); }
.cmp-row { border-top: 1px solid var(--hairline); }
.cmp-head > div { padding: 14px 12px; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
.cmp-head > div:first-child { padding-left: 18px; }
.cmp-head .cmp-vifo-h { color: var(--accent); }
.cmp-l {
  padding: 13px 12px 13px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--meta); text-transform: uppercase;
}
.cmp-a, .cmp-v { padding: 13px 12px; font-size: 13.5px; line-height: 1.6; }
.cmp-a { color: var(--meta); }
.cmp-v, .cmp-head > div:last-child { background: color-mix(in srgb, var(--accent) 5%, transparent); padding-right: 18px; }
.cmp-b { display: none; }

/* ---- 「选谁」双卡。Vifo 卡琥珀描边——推荐位只此一处 ---- */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 2.2em 0 0; }
.pick-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; }
.pick-card h2 { margin: 0 0 14px; font-size: 18px; }
.pick-card.pick-vifo { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pick-card.pick-vifo h2 { color: var(--accent); }
.pick-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pick-card li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.65; color: var(--meta); opacity: 1; }
.pick-card li::before { content: "—"; color: var(--accent); flex-shrink: 0; }

/* 收束的旁白：窄一点、居中、衬线斜体 */
.legal p.g-aside {
  font-family: var(--heading-font); font-style: italic;
  font-size: 15.5px; line-height: 1.8; color: var(--meta); opacity: 1;
  text-align: center; margin: 2.4em 0 0;
}

/* ---- 常见问题：问句独占一行，问答行之间发丝线 ---- */
.legal p.qa { padding: 16px 0; margin: 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--meta); opacity: 1; }
.legal p.qa:last-of-type { border-bottom: 0; }
.legal p.qa strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

/* ---- 页脚导读 ---- */
.g-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 6px;
}
.read-next { margin-top: 44px; }
.read-next .rn {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--heading-font); font-size: 16.5px;
}
.read-next .rn svg { margin-left: auto; flex-shrink: 0; color: var(--meta); }
.read-next .rn:hover { color: var(--accent); }
.rn-links { display: flex; gap: 26px; margin-top: 22px; font-size: 13.5px; color: var(--meta); }
.rn-links a:hover { color: var(--accent); }

/* ---- 目录页：分组编辑列表 + 示例笔记本条 ---- */
.g-group {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.25em;
  color: var(--meta-dim); text-transform: uppercase; margin: 30px 0 4px;
}
.g-list { list-style: none; padding: 0; margin: 0; }
.g-list li { margin: 0; }
.g-list a { display: flex; align-items: baseline; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.g-list .no { font-family: var(--mono); font-size: 12px; color: var(--meta-dim); width: 22px; flex-shrink: 0; }
.g-list .t { display: block; font-family: var(--heading-font); font-size: 19px; line-height: 1.4; transition: color 0.2s; }
.g-list a:hover .t { color: var(--accent); }
.g-list .d { display: block; font-size: 13.5px; line-height: 1.6; color: var(--meta); margin-top: 3px; }
.g-list .mins { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--meta-dim); letter-spacing: 0.06em; text-transform: uppercase; }
.g-list .body { min-width: 0; }
.sample-strip {
  margin-top: 44px; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 22px 26px; display: flex; align-items: center; gap: 20px;
}
.sample-strip .g-kicker { margin-bottom: 0; }
.sample-strip .sp { font-size: 14px; color: var(--meta); margin-top: 6px; line-height: 1.6; }
.sample-strip .links { margin-left: auto; display: flex; gap: 18px; flex-shrink: 0; }
.sample-strip .links a {
  font-family: var(--heading-font); font-size: 15px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
}
.sample-strip .links a:hover { color: var(--accent); border-color: currentColor; }

/* ---- 窄屏 ---- */
@media (max-width: 640px) {
  .page-head { padding-top: 32px; }
  .page-head h1 { font-size: 26px; }
  .legal p.lede { font-size: 16.5px; }
  /* 宽表格折成堆叠行：行标签一行，两家各一行、带自己的名字，不横滚 */
  .cmp-head { display: none; }
  .cmp-row { display: block; padding: 14px 18px; }
  .cmp-l { padding: 0; }
  .cmp-a, .cmp-v { display: flex; gap: 10px; padding: 8px 0 0; background: none; }
  .cmp-b {
    display: inline; flex-shrink: 0; width: 58px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
    text-transform: uppercase; padding-top: 3px;
  }
  .cmp-v .cmp-b { color: var(--accent); }
  .pick-grid { grid-template-columns: 1fr; }
  .sample-strip { flex-direction: column; align-items: flex-start; }
  .sample-strip .links { margin-left: 0; }
  .g-list .mins { display: none; }
}