/* ==========================================================================
   内容页（产品介绍 / 关于我们 / 其它单页）· px-page.css
   --------------------------------------------------------------------------
   来源：原 app/views/site/page.php 第 141–559 行的内联 <style> 块，整段搬到本文件。
   为什么必须搬：那段样式写在 <body> 里、加载晚于 theme.css，且里面硬编码了
   深色底（#131d2c / rgba(8,11,17,.35) …）与小字号（12.5px / 13px …）。同特异性
   时后加载的赢，于是日间模式下这些区块仍是深色块，字号也不跟全站走。

   本文件的改写约定（改动全部集中在「取值」上，选择器与布局不动）：
   1) 色值一律走 theme.css / app.css 的令牌：--bg / --bg-soft / --panel /
      --panel-2 / --line / --line-soft / --text / --text-2 / --muted / --brand /
      --brand-2 / --brand-soft / --shadow。半透明品牌描边统一取 --brand（不透明，
      日间自动换成压深一档的 #1f6fe0），浅染底统一取 --brand-soft。原文件末尾
      那段「令牌对齐（v9）」覆盖已经合并进各条规则，本文件里每个选择器只出现一次。
   2) 字号一律走 --fs-xs / --fs-sm / --fs-base / --fs-md / --fs-lg / --fs-xl /
      --fs-2xl（唯一真源 type-scale.css，<=768 自动降档，不再另写 media 缩放）。
   3) 间距一律走 --sp-*：区块之间 --sp-6/--sp-7，区块标题与内容之间
      --sp-4/--sp-5，卡片网格 gap 与卡片内边距 --sp-3/--sp-4，行内小间隔
      --sp-1/--sp-2。6px 以下（字形对齐微调）、装饰连线几何量（.px-step.is-wrap
      的 -12px/12px）、图标尺寸（22px/30px/34px）、圆角、边框宽度不进令牌。
   4) 正文长文行高走 --lh-loose（原 1.9/1.95），一般段落 --lh-base，标题 --lh-tight。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头（hero）
   -------------------------------------------------------------------------- */

.px-hero {
    padding: var(--sp-7, 56px) 0 var(--sp-5, 32px);
    background: radial-gradient(120% 150% at 10% 0, var(--brand-soft), transparent 58%);
}
.px-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-6, 40px); align-items: end; }
.px-eyebrow {
    display: inline-block; font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 2px;
    text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-3, 12px);
    padding-left: var(--sp-2, 8px); border-left: 2px solid var(--brand);
}
.px-hero h1 {
    font-size: var(--fs-xl, 32px); font-weight: 700; letter-spacing: -.7px;
    line-height: var(--lh-tight, 1.3); color: var(--text);
}
.px-sub {
    margin-top: var(--sp-3, 12px); font-size: var(--fs-base, 19px); line-height: var(--lh-loose, 1.8);
    color: var(--text-2); max-width: 640px;
}
.px-note { margin-top: var(--sp-3, 12px); font-size: var(--fs-xs, 16px); color: var(--muted); letter-spacing: .2px; }

/* KPI 小卡：数字用等宽字体，单位与说明各降一档 */
.px-kpis { display: flex; gap: var(--sp-2, 8px); }
.px-kpi {
    min-width: 132px; padding: var(--sp-3, 12px) var(--sp-4, 16px); border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: var(--panel);
}
.px-kpi b {
    display: block; font-family: var(--mono); font-size: var(--fs-md, 21px); font-weight: 700;
    letter-spacing: -.5px; color: var(--text); line-height: var(--lh-tight, 1.3);
}
.px-kpi b span { font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--brand); margin-left: 3px; }
.px-kpi em {
    display: block; margin-top: 5px; font-style: normal;
    font-size: var(--fs-xs, 16px); color: var(--muted);
}

/* --------------------------------------------------------------------------
   2. 面包屑
   -------------------------------------------------------------------------- */

.px-crumbbar { border-top: 1px solid var(--line-soft); background: var(--bg-soft); }
.px-crumb {
    display: flex; align-items: center; gap: var(--sp-2, 8px); height: 40px;
    font-size: var(--fs-xs, 16px); color: var(--muted);
}
.px-crumb a { color: var(--muted); }
.px-crumb a:hover { color: var(--text); }
.px-crumb .cur { color: var(--text-2); }
.px-crumb .sep { color: var(--muted); font-family: var(--mono); }

/* --------------------------------------------------------------------------
   3. 区块骨架（外层间距 --sp-7，标题与内容 --sp-5，卡片内 --sp-4）
   -------------------------------------------------------------------------- */

.px-section { padding: var(--sp-7, 56px) 0 0; }
.px-blocks { max-width: 1080px; margin: 0 auto; }
.px-block { margin-bottom: var(--sp-7, 56px); }
.px-block:last-child { margin-bottom: 0; }
.px-block-head { margin-bottom: var(--sp-5, 32px); }
.px-block-head .px-eyebrow { margin-bottom: var(--sp-3, 12px); }
.px-block-head h2 { font-size: var(--fs-lg, 25px); font-weight: 700; letter-spacing: -.3px; color: var(--text); }
.px-block-head p {
    margin-top: var(--sp-2, 8px); font-size: var(--fs-sm, 18px);
    color: var(--muted); line-height: var(--lh-base, 1.65);
}

/* --------------------------------------------------------------------------
   4. 能力矩阵
   -------------------------------------------------------------------------- */

.px-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4, 16px); }
.px-cap {
    display: flex; flex-direction: column; padding: var(--sp-4, 16px); border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: var(--panel); transition: border-color .18s ease;
}
.px-cap:hover { border-color: var(--line); }
.px-cap-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3, 12px); }
.px-cap-no { font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 1px; color: var(--muted); }
.px-kids {
    font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--muted);
    border: 1px solid var(--line); border-radius: 20px; padding: 1px 7px; background: var(--bg-soft);
}
.px-cap h3 { font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text); }
.px-cap-rule { height: 1px; background: var(--line-soft); margin: var(--sp-3, 12px) 0 var(--sp-2, 8px); }
.px-cap-dim { font-size: var(--fs-sm, 18px); line-height: var(--lh-base, 1.65); color: var(--text-2); }
.px-cap-meta {
    margin-top: auto; padding-top: var(--sp-3, 12px); font-family: var(--mono);
    font-size: var(--fs-xs, 16px); color: var(--muted);
}

/* --------------------------------------------------------------------------
   5. 六步方法论：横排 3×2 网格
   为什么不排成 1×6：内容列约 900px，六等分后每格只有 140px，中文一行放不下 8 个字，
   会变成「选城\n市」这种断行。3×2 既保持从左到右的推进感，也给每步留出可读宽度。
   -------------------------------------------------------------------------- */

.px-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3, 12px); }
.px-step {
    position: relative; padding: var(--sp-4, 16px); border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
    transition: border-color .18s ease, transform .18s ease;
}
.px-step:hover { border-color: var(--line); transform: translateY(-2px); }
.px-step-top { display: flex; align-items: center; gap: var(--sp-2, 8px); margin-bottom: var(--sp-2, 8px); }
.px-step-no {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--brand-2);
    background: var(--brand-soft); border: 1px solid var(--line);
}
/* 连接线：纯装饰，长度与偏移是几何量，不挂间距令牌 */
.px-step-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--brand-2), transparent); }
.px-step h4 { font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text); }
.px-step p { margin-top: var(--sp-2, 8px); font-size: var(--fs-sm, 18px); line-height: var(--lh-loose, 1.8); color: var(--muted); }
/* 第 4 步前面那道拐弯：3×2 的阅读顺序要靠一个视觉提示，否则第二行会被当成新的开始 */
.px-step.is-wrap::before {
    content: ''; position: absolute; left: -12px; top: 50%; width: 12px; height: 1px;
    background: var(--brand-2);
}

/* --------------------------------------------------------------------------
   6. 正文文档化：左侧目录 + 右侧分节
   产品页正文有 5 个二级标题、关于页 6 个，原来是一整条 820px 的竖排长文，读到第三段
   就不知道自己在哪。改成文档式两栏：左边常驻目录，右边每节独立成块。
   -------------------------------------------------------------------------- */

.px-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6, 40px); align-items: start; }
.px-toc { position: sticky; top: 86px; align-self: start; }
.px-toc-t {
    display: block; font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3, 12px);
}
.px-toc a {
    display: flex; align-items: baseline; gap: var(--sp-2, 8px); padding: 6px 0 6px var(--sp-3, 12px);
    font-size: var(--fs-sm, 18px); line-height: var(--lh-base, 1.65); color: var(--muted);
    border-left: 1px solid var(--line-soft); transition: color .15s, border-color .15s;
}
.px-toc a:hover { color: var(--text); border-left-color: var(--brand); }
.px-toc a i { font-family: var(--mono); font-size: var(--fs-xs, 16px); font-style: normal; color: var(--muted); flex: 0 0 auto; }
.px-toc a span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; }
.px-toc a:hover i { color: var(--brand); }
.px-toc-note {
    margin-top: var(--sp-4, 16px); padding-top: var(--sp-3, 12px); border-top: 1px solid var(--line-soft);
    font-size: var(--fs-xs, 16px); line-height: var(--lh-loose, 1.8); color: var(--muted);
}

.px-doc-main { min-width: 0; }
/* 节标题：编号 + 标题 + 上方细线，滚动时一眼能看出换节了 */
.px-sec {
    padding-top: var(--sp-6, 40px); margin-top: var(--sp-6, 40px);
    border-top: 1px solid var(--line-soft);
}
.px-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.px-sec-h {
    display: flex; align-items: baseline; gap: var(--sp-3, 12px);
    font-size: var(--fs-lg, 25px); font-weight: 700; letter-spacing: -.2px; color: var(--text);
    padding-left: 0; border-left: 0; margin: 0 0 var(--sp-4, 16px);
}
.px-sec-no {
    font-family: var(--mono); font-size: var(--fs-xs, 16px); font-weight: 500; letter-spacing: 1.5px;
    color: var(--muted); flex: 0 0 auto; padding: 2px 0 0;
}
/* -8px 是为了把小节说明提到标题基线上方，属于视觉补偿，不进令牌 */
.px-sec-sub {
    margin: -8px 0 var(--sp-4, 16px); font-size: var(--fs-sm, 18px);
    line-height: var(--lh-base, 1.65); color: var(--muted);
}
.px-sec > .px-eyebrow { margin-bottom: var(--sp-3, 12px); }
/* 内容列已经限宽（约 900px），正文不必再自己限 820 并自动居中，否则右侧会空出一条 */
.px-doc-main .px-prose { max-width: none; margin: 0; font-size: var(--fs-base, 19px); line-height: var(--lh-loose, 1.8); }
.px-doc-main .px-stats,
.px-doc-main .px-cats { max-width: none; margin-left: 0; margin-right: 0; }

/* 正文内部：h3 小节不再挂左边框（外层已经有节编号），改为「小标题 + 短横线」 */
.px-doc-main h3 {
    font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text);
    margin: var(--sp-4, 16px) 0 var(--sp-2, 8px); padding-left: 0; border-left: 0;
}
.px-doc-main h3::before {
    content: ''; display: inline-block; width: 12px; height: 1px;
    vertical-align: middle; margin-right: var(--sp-2, 8px); background: var(--brand-2);
}
.px-doc-main p { margin-bottom: var(--sp-4, 16px); }
.px-doc-main ul, .px-doc-main ol { margin: 0 0 var(--sp-4, 16px); }

/* 六项能力那种「一条一条列」的小节：切成卡片网格，避免六行 h3+p 一路竖着排。
   !important 是原规则自带的：正文 h3 的通用样式特异性更高，去掉会被盖回去。 */
.px-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3, 12px); }
.px-feat {
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--panel-2);
}
.px-feat-no { font-family: var(--mono); font-size: var(--fs-xs, 16px); letter-spacing: 1px; color: var(--muted); }
.px-feat h3 {
    margin: 7px 0 var(--sp-2, 8px) !important; font-size: var(--fs-md, 21px) !important;
    padding-left: 0; border-left: 0;
}
.px-feat h3::before { display: none; }
.px-feat p {
    margin-bottom: 0 !important; font-size: var(--fs-sm, 18px) !important;
    line-height: var(--lh-loose, 1.8); color: var(--muted);
}

/* 原则条：关于页「为什么做 / 怎么做 / 边界」改成横向三条轨 */
.px-rail { display: grid; gap: var(--sp-3, 12px); }
.px-rail-item {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--panel-2);
}
.px-rail-item .ic {
    width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
    background: var(--brand-soft); color: var(--brand);
    border: 1px solid var(--line);
}
.px-rail-item h3 {
    margin: 0 0 6px !important; font-size: var(--fs-md, 21px) !important;
    padding-left: 0; border-left: 0;
}
.px-rail-item h3::before { display: none; }
.px-rail-item p {
    margin-bottom: 0 !important; font-size: var(--fs-sm, 18px) !important;
    line-height: var(--lh-loose, 1.8); color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. 免费 vs 完整 对照表
   -------------------------------------------------------------------------- */

.px-table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.px-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 18px); }
.px-table th, .px-table td {
    padding: var(--sp-3, 12px) var(--sp-4, 16px); text-align: left;
    border-bottom: 1px solid var(--line-soft);
}
.px-table thead th {
    background: var(--bg-soft); color: var(--muted); font-size: var(--fs-xs, 16px);
    font-weight: 500; letter-spacing: .3px;
}
.px-table tbody th { color: var(--text); font-weight: 500; white-space: nowrap; }
.px-table td { color: var(--text-2); }
.px-table tfoot th, .px-table tfoot td { border-bottom: none; border-top: 1px solid var(--line); color: var(--text-2); }
.px-table tfoot b { font-family: var(--mono); font-size: var(--fs-base, 19px); color: var(--text); }
.px-table .is-paid {
    background: var(--brand-soft);
    border-left: 2px solid var(--brand);
    color: var(--text);
}
.px-table thead .is-paid { background: var(--brand-soft); color: var(--brand); }
.px-free { color: var(--brand-2); font-weight: 600; }
.px-inline-note {
    margin-top: var(--sp-2, 8px); font-size: var(--fs-xs, 16px);
    color: var(--muted); line-height: var(--lh-base, 1.65);
}

/* --------------------------------------------------------------------------
   8. 数据口径
   -------------------------------------------------------------------------- */

.px-caliber { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4, 16px); }
.px-cal-item {
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft);
    border-radius: var(--radius); background: var(--panel-2);
}
.px-cal-item h4 { font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text); }
.px-cal-item p {
    margin-top: var(--sp-2, 8px); font-size: var(--fs-sm, 18px);
    line-height: var(--lh-loose, 1.8); color: var(--muted);
}

/* --------------------------------------------------------------------------
   9. 正文（后台「页面内容」渲染出来的富文本）
   -------------------------------------------------------------------------- */

.px-prose { max-width: 820px; margin: 0 auto; font-size: var(--fs-base, 19px); line-height: var(--lh-loose, 1.8); color: var(--text-2); }
.px-prose > :first-child { margin-top: 0; }
.px-prose > :last-child { margin-bottom: 0; }
.px-prose p { margin-bottom: var(--sp-4, 16px); }
.px-prose h2, .px-prose h3, .px-prose h4 { color: var(--text); padding-left: var(--sp-3, 12px); border-left: 3px solid var(--brand); }
.px-prose h2 {
    font-size: var(--fs-lg, 25px); font-weight: 700; letter-spacing: -.2px;
    margin: var(--sp-6, 40px) 0 var(--sp-4, 16px); line-height: var(--lh-tight, 1.3);
}
.px-prose h3 {
    font-size: var(--fs-md, 21px); font-weight: 600;
    margin: var(--sp-5, 32px) 0 var(--sp-3, 12px); border-left-color: var(--brand);
}
.px-prose h4 {
    font-size: var(--fs-base, 19px); font-weight: 600;
    margin: var(--sp-4, 16px) 0 var(--sp-2, 8px); border-left-width: 2px; border-left-color: var(--brand);
}
.px-prose strong { color: var(--text); font-weight: 600; }
.px-prose em { font-style: italic; }
.px-prose a { color: var(--brand); text-decoration: none; border-bottom: 1px solid var(--line); }
.px-prose a:hover { border-bottom-color: var(--brand); }
.px-prose ul, .px-prose ol { margin: 0 0 var(--sp-4, 16px); padding-left: var(--sp-5, 32px); }
.px-prose ul li { list-style: disc; margin-bottom: var(--sp-2, 8px); }
.px-prose ol li { list-style: decimal; margin-bottom: var(--sp-2, 8px); }
.px-prose li::marker { color: var(--brand); }
.px-prose blockquote {
    margin: var(--sp-4, 16px) 0; padding: var(--sp-4, 16px); border-left: 3px solid var(--brand-2);
    background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-2);
}
.px-prose blockquote p:last-child { margin-bottom: 0; }
.px-prose img {
    display: block; max-width: 100%; height: auto; margin: var(--sp-5, 32px) auto;
    border-radius: 8px; border: 1px solid var(--line-soft);
}
.px-prose figure { margin: var(--sp-5, 32px) 0; }
.px-prose figcaption {
    margin-top: var(--sp-2, 8px); text-align: center;
    font-size: var(--fs-xs, 16px); color: var(--muted);
}
.px-prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5, 32px) 0; font-size: var(--fs-sm, 18px); }
.px-prose th, .px-prose td {
    border: 1px solid var(--line); padding: var(--sp-2, 8px) var(--sp-3, 12px); text-align: left;
}
.px-prose th { background: var(--bg-soft); color: var(--muted); font-weight: 500; }
.px-prose hr { border: none; border-top: 1px solid var(--line); margin: var(--sp-6, 40px) 0; }
.px-prose code {
    font-family: var(--mono); font-size: var(--fs-xs, 16px); background: var(--bg-soft);
    border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 5px; color: var(--brand);
}

/* --------------------------------------------------------------------------
   10. 关于我们：原则卡 + 数据条
   -------------------------------------------------------------------------- */

.px-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4, 16px); }
.px-principle {
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--panel);
}
.px-principle .ic {
    width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: var(--sp-3, 12px);
    border-radius: 8px; background: var(--brand-soft); color: var(--brand);
    border: 1px solid var(--line);
}
.px-principle h3 { font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text); }
.px-principle p {
    margin-top: var(--sp-2, 8px); font-size: var(--fs-sm, 18px);
    line-height: var(--lh-loose, 1.8); color: var(--muted);
}

/* 数据条：三格横排，原来放在视图里用 style="margin-top:40px" 硬顶，改由类承担 */
.px-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 820px; margin: var(--sp-6, 40px) auto 0;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    background: var(--panel);
}
.px-stat { padding: var(--sp-4, 16px); border-left: 1px solid var(--line-soft); }
.px-stat:first-child { border-left: none; }
.px-stat b { font-family: var(--mono); font-size: var(--fs-lg, 25px); font-weight: 700; letter-spacing: -.6px; color: var(--text); }
.px-stat u { text-decoration: none; font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--brand); margin-left: 3px; }
.px-stat span { display: block; margin-top: 6px; font-size: var(--fs-xs, 16px); color: var(--muted); }

.px-cats {
    max-width: 820px; margin: var(--sp-4, 16px) auto 0; padding: var(--sp-4, 16px);
    border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel);
}
.px-cats h3 { font-size: var(--fs-md, 21px); font-weight: 600; color: var(--text); }
.px-cats .sub { font-size: var(--fs-sm, 18px); color: var(--muted); }
.px-cats-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3, 12px); margin-bottom: var(--sp-3, 12px); }
.px-cats-foot { margin-top: var(--sp-3, 12px); font-size: var(--fs-sm, 18px); color: var(--muted); line-height: var(--lh-base, 1.65); }

/* --------------------------------------------------------------------------
   11. 联系卡（产品页 / 关于页尾部那份，与 contact.css 的同名类互不影响：
   两页各自加载自己的样式表）
   -------------------------------------------------------------------------- */

.px-contacts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4, 16px);
    max-width: 1080px; margin: 0 auto;
}
.px-contact {
    padding: var(--sp-4, 16px); border: 1px solid var(--line-soft); border-radius: var(--radius);
    background: var(--panel);
}
.px-contact .lb {
    display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: var(--fs-xs, 16px);
    color: var(--muted); letter-spacing: .4px; margin-bottom: var(--sp-2, 8px);
}
.px-contact .lb svg { color: var(--brand-2); }
.px-contact b {
    display: block; font-family: var(--mono); font-size: var(--fs-base, 19px); font-weight: 600;
    color: var(--text); word-break: break-all; line-height: var(--lh-base, 1.65);
}
.px-contact span { display: block; margin-top: var(--sp-2, 8px); font-size: var(--fs-xs, 16px); color: var(--muted); }

/* --------------------------------------------------------------------------
   12. 尾部 CTA
   -------------------------------------------------------------------------- */

.px-cta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 16px);
    max-width: 820px; margin: var(--sp-6, 40px) auto 0; padding: var(--sp-5, 32px);
    border: 1px solid var(--line); border-radius: 12px;
    background: linear-gradient(100deg, var(--brand-soft), transparent 70%);
}
.px-cta h2 { font-size: var(--fs-md, 21px); font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.px-cta p { margin-top: var(--sp-2, 8px); font-size: var(--fs-sm, 18px); color: var(--muted); line-height: var(--lh-base, 1.65); }
.px-cta-btns { display: flex; gap: var(--sp-2, 8px); flex-shrink: 0; }
.px-actions {
    display: flex; gap: var(--sp-2, 8px); justify-content: center;
    max-width: 820px; margin: var(--sp-5, 32px) auto 0;
}
.px-end { height: var(--sp-7, 56px); }

/* 视图里原本写死 cursor 的「当前项」chip，改由类承担 */
.px-chip-static { cursor: default; }

/* --------------------------------------------------------------------------
   13. 断点：只做布局（列数 / 溢出 / 目录形态），字号交给令牌自己降档
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .px-hero { padding: var(--sp-6, 40px) 0 var(--sp-4, 16px); }
    .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 16px); align-items: start; }
    .px-kpis { flex-wrap: wrap; }
    .px-caps, .px-principles, .px-caliber, .px-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .px-stats { grid-template-columns: 1fr; }
    .px-stat { border-left: none; border-top: 1px solid var(--line-soft); }
    .px-stat:first-child { border-top: none; }
    .px-cta { flex-direction: column; align-items: flex-start; }
    .px-table-wrap { overflow-x: auto; }
    .px-table { min-width: 560px; }
    .px-section { padding-top: var(--sp-6, 40px); }
    .px-sec { padding-top: var(--sp-5, 32px); margin-top: var(--sp-5, 32px); }
    /* 目录从「左侧竖排」变成「顶部胶囊行」：手机上 240px 的侧栏会直接吃掉一半屏宽 */
    .px-doc { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4, 16px); }
    .px-toc { position: static; display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
    .px-toc-t { flex: 0 0 100%; margin-bottom: 2px; }
    .px-toc a { border: 1px solid var(--line-soft); border-radius: 20px; padding: var(--sp-1, 4px) var(--sp-3, 12px); }
    .px-toc a i { display: none; }
    .px-toc-note { display: none; }
    .px-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .px-step.is-wrap::before { display: none; }
    .px-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .px-caps, .px-principles, .px-caliber, .px-contacts { grid-template-columns: minmax(0, 1fr); }
    /* 这张表只有三列：560px 的 min-width 在 390 下会横滚，而横滚区在触屏上没有滚动条提示，
       右侧「完整报告」列等于看不见。允许单元格折行后三列能压进 356px，就不用横滚了。 */
    .px-table { min-width: 0; }
    .px-table th, .px-table td { padding: var(--sp-2, 8px); font-size: var(--fs-xs, 16px); }
    .px-table tbody th { white-space: normal; }
    /* 行标签都是 4 字词（圈层能级 / 投资测算），列宽不够会从中间断成「圈层能 / 级」，
       给它 26% 的宽度提示就能保持一行一词。 */
    .px-table thead th:first-child, .px-table tbody th { width: 26%; }
    .px-steps, .px-feat-grid { grid-template-columns: minmax(0, 1fr); }
    .px-sec { padding-top: var(--sp-4, 16px); margin-top: var(--sp-4, 16px); }
    .px-sec-h { font-size: var(--fs-md, 21px); gap: var(--sp-2, 8px); }
    .px-rail-item { grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-2, 8px); padding: var(--sp-3, 12px) var(--sp-4, 16px); }
}