/* ======================================================================
   content.css —— 公开内容页样式表（2026-10-26）
   ----------------------------------------------------------------------
   谁在用：落地页 templates/landing.html、知识库 templates/learn/*。
   为什么单独一份：这两类页是**匿名访客**的第一触点，只加载 tokens.css +
   本文件（合计 ~30KB）。若复用 style.css（364KB）+ base.html 的 14 个脚本
   （242KB），首屏体积会到 ~700KB —— 对一个纯静态文案页是纯浪费，直接拖 LCP。

   硬约束（改前必读）：
     1. 只消费 tokens.css 的变量，不新造颜色字面量（明暗主题自动跟随）；
     2. 断点只用 1024 / 768 两档；
     3. 类名统一 .lp- 前缀（landing page 家族），不要与 style.css 的 .qt-/.market- 混用。
   ====================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.7;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* ---- 顶栏 ---- */
/* ⚠️ .lp-nav 不能设 display:flex：那样 .wrap 会退化成按内容宽度收缩的
   flex item，虽然 margin:auto 能居中，但左缘与 hero 正文对不齐（实测偏右 ~290px）。
   改为让 .wrap 自己做 flex 容器。 */
.lp-nav {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.lp-nav .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; height: 64px;
}
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 16px; }
.lp-brand:hover { text-decoration: none; }
.lp-brand svg { display: block; color: var(--up); }
.lp-nav-act { display: flex; align-items: center; gap: 10px; }
.lp-btn {
    display: inline-block; padding: 8px 18px; border-radius: 8px;
    font-size: 14px; line-height: 1.4; border: 1px solid var(--border);
    color: var(--text); background: var(--surface); cursor: pointer;
}
.lp-btn:hover { text-decoration: none; border-color: var(--border-strong, var(--border)); }
.lp-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.lp-btn-primary:hover { background: var(--primary-hover, var(--primary)); color: #fff; }
.lp-btn-lg { padding: 12px 26px; font-size: 15px; }

/* ---- Hero ---- */
/* ⚠️ 只用 padding-top/bottom：shorthand `padding: 72px 0 56px` 会把 .wrap 的
   左右 24px 内边距一起重置为 0，正文左缘就比顶栏少 24px（实测错位）。 */
.lp-hero { padding-top: 72px; padding-bottom: 56px; }
.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 4px 12px; background: var(--surface);
}
.lp-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.lp-hero h1 {
    margin: 20px 0 14px;
    font-size: 40px; line-height: 1.28; font-weight: 600; letter-spacing: -.5px;
}
.lp-hero h1 span { display: block; font-size: 22px; font-weight: 400; color: var(--text-secondary); margin-top: 10px; letter-spacing: 0; }
.lp-hero p.lead { margin: 0 0 28px; font-size: 16px; color: var(--text-secondary); max-width: 640px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-note { font-size: 13px; color: var(--text-muted); margin-top: 16px; }

/* ---- 分段 ---- */
section { padding: 48px 0; border-top: 1px solid var(--border); }
h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.4; font-weight: 600; }
.sec-sub { margin: 0 0 28px; color: var(--text-muted); font-size: 14px; }

.lp-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 20px 22px;
}
.card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.card .stage { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.card p { margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); }
.card ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-secondary); }
.card li { margin-bottom: 4px; }

.lp-why { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-why .card p { margin: 0; }
.lp-why h3 { margin-bottom: 8px; }

.lp-band {
    text-align: center; padding: 56px 0;
    border-top: 1px solid var(--border);
}
.lp-band h2 { margin-bottom: 10px; }
.lp-band p { margin: 0 auto 24px; color: var(--text-secondary); max-width: 560px; }

/* ---- 页脚 ---- */
/* 公开页壳贴底（2026-10-30，与 .qt-main-spacer 同源问题）：
   landing.html / learn/base.html 是**独立壳**（不走 base.html 的 .qt-main），
   结构都是 <header.lp-nav> + <main> + <footer.lp-foot>。main 内容不足一屏时
   （空知识库、文章数很少的分类页），页脚会紧贴内容浮在半屏——2160 高的屏上实测
   备案行距窗口底部 1471px，同一行字看着像「页面断了」。
   修法与全站页脚一致：body 变纵向 flex，main 吃掉剩余高度（页脚自然贴底）；
   内容超一屏时 main 无需伸展，页脚照旧跟在正文后面。
   ⚠️ 用类名而不是 body:has(> .lp-foot)：本仓仍要兼容不支持 :has 的旧内核。 */
body.lp-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* dvh 兜底（追加式，旧内核退回上一行 vh） */
}
/* flex-shrink:0：内容比一屏高时不许把 main 压扁（压扁会裁掉内容底部的 CTA） */
body.lp-shell > main { flex: 1 0 auto; }

.lp-foot { border-top: 1px solid var(--border); background: var(--surface); font-size: 13px; color: var(--text-muted); }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 20px 0; }
.lp-foot nav { display: flex; flex-wrap: wrap; gap: 16px; }
.lp-foot a { color: var(--text-secondary); }
.lp-disclaimer { font-size: 12px; color: var(--text-muted); padding-bottom: 24px; margin: 0; }

@media (max-width: 1024px) {
    .lp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .lp-hero { padding-top: 44px; padding-bottom: 36px; }
    .lp-hero h1 { font-size: 28px; }
    .lp-hero h1 span { font-size: 17px; }
    .lp-grid, .lp-why { grid-template-columns: minmax(0, 1fr); }
    section { padding: 36px 0; }
    .lp-nav { height: 56px; }
    .lp-brand span { font-size: 15px; }
}

/* ======================================================================
   知识库（/learn）—— 文章排版与索引卡
   ----------------------------------------------------------------------
   文章正文由 markdown 过滤器产出（h2-h4 / p / ul / ol / table / blockquote / code），
   这里只做「读起来舒服」的排版，不引入任何第三方排版库。
   正文行宽 68ch ≈ 中文 34 字，是长文阅读的舒适上限。
   ====================================================================== */
.lp-article { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; }
.lp-crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.lp-crumb a { color: var(--text-secondary); }
.lp-crumb span { margin: 0 6px; }
.lp-article h1 { margin: 0 0 12px; font-size: 32px; line-height: 1.35; font-weight: 600; letter-spacing: -.3px; }
.lp-meta { margin: 0 0 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.lp-prose { font-size: 16px; line-height: 1.9; color: var(--text-secondary); }
.lp-prose > :first-child { margin-top: 0; }
.lp-prose h2 { margin: 40px 0 12px; font-size: 21px; line-height: 1.5; font-weight: 600; color: var(--text); }
.lp-prose h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.lp-prose p { margin: 0 0 16px; }
.lp-prose ul, .lp-prose ol { margin: 0 0 16px; padding-left: 22px; }
.lp-prose li { margin-bottom: 6px; }
.lp-prose strong { color: var(--text); font-weight: 600; }
.lp-prose a { color: var(--primary); }
.lp-prose blockquote {
    margin: 0 0 16px; padding: 12px 18px;
    border-left: 3px solid var(--primary); background: var(--surface);
    border-radius: 0 8px 8px 0; color: var(--text-secondary);
}
.lp-prose blockquote p:last-child { margin-bottom: 0; }
.lp-prose code {
    padding: 2px 6px; border-radius: 4px; font-size: 14px;
    background: var(--surface-2, var(--bg)); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lp-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.lp-prose th, .lp-prose td { padding: 9px 12px; border: 1px solid var(--border); text-align: left; }
.lp-prose th { background: var(--surface); font-weight: 600; color: var(--text); }
.lp-prose hr { margin: 32px 0; border: 0; border-top: 1px solid var(--border); }

/* 文章尾部：回到索引 + 产品引导（内链枢纽） */
.lp-article-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.lp-article-foot h2 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.lp-rel { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.lp-rel a {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    font-size: 13px; color: var(--text-secondary);
}
.lp-rel a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

/* 索引页 */
.lp-list { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.lp-item {
    display: block; padding: 20px 22px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface); color: inherit;
}
.lp-item:hover { border-color: var(--border-strong, var(--border)); text-decoration: none; }
.lp-item h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--text); }
.lp-item p { margin: 0; font-size: 14px; color: var(--text-secondary); }
.lp-item .lp-item-meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

@media (max-width: 768px) {
    .lp-article { padding: 32px 20px 48px; }
    .lp-article h1 { font-size: 24px; }
    .lp-prose { font-size: 15px; }
}