/* www 首页专属样式 —— 由 www.specul/index.html 的内联 <style> 原样抽出（2026-10-10）。
 *
 * 为什么抽：内联样式是 UI 的第六份来源 —— 改样式得改 HTML，
 * 而静态审计（ui-core / token-purity）只读 CSS 文件，抽出来才管得住。
 * 抽的是**外壳之外**的东西（首屏、路由卡、问答面板、页脚文案区），
 * 外壳样式（顶栏/页脚/抽屉/tab bar）一律走 brand.css，本文件不碰。
 * ⚠ 声明值一个都没改，搬走只为「可审计、可复用、别再分叉」。
 */
/* =========================================================================
 * 首页 v3 —— 内联样式，作用域限定在 body.brand-ambient（方案 A：不改共享的 brand.css）
 *
 * 为什么所有规则都带 .hp- 前缀：
 *   brand.css 是六站共用的唯一定义源。方案 A 只改首页、不动它，
 *   所以新样式必须**自带作用域**，否则会漏到其他站去
 *   （首页写裸 .route / .hero 会污染 agent 站的同名选择器）。
 *   代价是 HTML 上多一层类名；换来的是零跨站影响、随时可回滚。
 *
 * ⚠ token 基底是**暗色**，亮色在 html[data-theme="light"] 下覆盖。
 *   因为 brand.js 的 applyTheme 对暗色是 removeAttribute（brand.js:59），
 *   暗色态在 DOM 上没有 data-theme —— 写成 body[data-theme="dark"] 的话
 *   深色态永远匹配不上，页面会一直是亮色而按钮显示 ☾（看着像坏了）。
 * ========================================================================= */

/* ---------- token：暗色为基底 ---------- */
body.brand-ambient {

  --cat-violet:    #a78bfa;  --cat-violet-ink: #c4b0ff;  --cat-violet-soft: rgba(167, 139, 250, .2);
  --cat-rose:      #ff7ba1;  --cat-rose-ink:   #ff9ab8;  --cat-rose-soft:   rgba(255, 92, 138, .2);
  --cat-amber:     #ffc35c;  --cat-amber-ink:  #ffcf7a;  --cat-amber-soft:  rgba(255, 176, 58, .2);
  --cat-teal:      #3ad4cc;  --cat-teal-ink:   #5fd8d2;  --cat-teal-soft:   rgba(18, 184, 176, .2);
  --cat-blue:      #63b0ff;  --cat-blue-ink:   #8cc6ff;  --cat-blue-soft:   rgba(59, 158, 255, .2);
  --cat-lime:      #a3e34a;  --cat-lime-ink:   #b6e56a;  --cat-lime-soft:   rgba(132, 204, 22, .2);

  margin: 0;
  color: var(--ink);
  /* ⚠ 2026-10-10 删掉原来的 `font: 16px/1.68 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif`。
   *   它用 `font` **简写**整体覆盖了 brand.css 的 `body`：
   *   字体家族变成 PingFang SC 打头（其余五站是 Segoe UI）、行高 1.68（其余五站 1.75）。
   *   实测渲染值确认过这两处差异 —— 而 brand.css 六站逐字节相同、`consistency` 9/9 通过，
   *   正是因为这条覆盖写在**页内联样式**里，共享层看不到（教训：探针读源文件 ≠ 读者看到的页面）。
   *   现在改为完全继承共享层，六站字体/行高一致。
   *   字重不受影响：brand.css 的 `body` 没有设 font-weight，继承仍是 400。 */
  background: var(--bg);
  /* ⚠ 2026-10-10 用户「底色里这些渐变可以去掉」→ 删掉两圈 radial 辉光
     （左上玫红 / 右上紫），底色改为平涂 var(--bg)，与 brand.css 的
     `.brand-ambient::before` 一致 —— 两处各画一遍底色，本就是重复配方。
     页面里的彩色靠卡片、徽标、渐变标题承载，不靠背景。 */
}

/* ---------- token：亮色覆盖 ---------- */
html[data-theme="light"] body.brand-ambient {

  --cat-violet:    #7c5cff;  --cat-violet-ink: #5b34e8;  --cat-violet-soft: rgba(124, 92, 255, .13);
  --cat-rose:      #ff5c8a;  --cat-rose-ink:   #c81e56;  --cat-rose-soft:   rgba(255, 92, 138, .13);
  --cat-amber:     #ffb03a;  --cat-amber-ink:  #a86a00;  --cat-amber-soft:  rgba(255, 176, 58, .16);
  --cat-teal:      #12b8b0;  --cat-teal-ink:   #07706a;  --cat-teal-soft:   rgba(18, 184, 176, .13);
  --cat-blue:      #3b9eff;  --cat-blue-ink:   #0b6fc4;  --cat-blue-soft:   rgba(59, 158, 255, .13);
  --cat-lime:      #84cc16;  --cat-lime-ink:   #4d8a00;  --cat-lime-soft:   rgba(132, 204, 22, .14);

  /* 同上：亮色主题的两圈 radial 辉光也一并去掉 ✓ */
}

/* ⚠ 2026-10-10：容器宽度收敛到共享层。
   原先 `max-width: var(--container-wide)`（=min(1560px,92vw)，1440 视口下解析成 1325）
   且自带 `padding: 0 24px` —— 而其余五站的 `.site-bar` 走 `--container`
   （min(1120px,90vw)）、左右内边距为 0。于是实测顶栏宽 **1325 vs 1120**、
   正文区 1440 vs 1120：首页比所有分站宽 320px，跨站跳转会看到内容列「突然变窄」。
   用户 2026-10-10 指出「顶部导航栏的宽度和字体全部都要一致」。
   → 统一用 `--container`，并去掉额外的 24px（与五站一致）。
   实测影响：首页三列卡片由 418px 变 349px，仍是三列，主标 46px 不变 ✓ */
.hp-c { max-width: var(--container); margin: 0 auto; padding: 0; position: relative; }

/* ---------- 顶部 ---------- */
/* ⚠ 2026-10-10 删掉了原来这两条对 .site-header / .site-bar 的整块覆盖。
 *   它把顶栏压到 `min-height: 62px` 且**去掉了 .site-bar 的 padding-block**，
 *   实测顶栏高 63px，而其余五站是 67px（共享层 66px + --sp-2 padding×2）。
 *   顶栏是全站每页都在的固定元素，高度不一致一眼能看出来，所以统一回共享层：
 *   粘顶、层级、模糊、边框全部沿用 brand.css 的 .site-header / .site-bar。
 *   ⚠ 2026-10-10：原先这里保留了 .brand / .brand-dot / .brand-name / .brand-text 四条本地规则
  *   （首页自己一套品牌外观）。结果左上角品牌标记**六站两样**（ui-parity 实测：
  *   品牌点 11px 正圆 vs 分站 9px 圆角方形、品牌名 800 vs 700）。
  *   现在这四条全部删除 —— 首页不再有「自己的品牌外观」，一律走共享层。
  *   差异只保留在**内容**上（首页有首屏与路由卡），外壳一律相同。 */
/* ⚠ 2026-10-10：删掉了 `.brand-sub` 的本地规则（原 font-size:var(--fs-xs) = 14px）。
   共享层 brand.css 写的是 10.5px —— 首页用 14px 而其余五站用 10.5px，
   于是左上角品牌块宽 181px vs 143px（实测），肉眼可见大小不一。
   现在一律继承共享层 ✓ 顺带 L290 的「窄屏藏副名」规则继续生效。 */
/* nav：间距与内距一律继承 brand.css 的 .nav-links（gap var(--sp-5)=32px）。
   原先这里写 `gap:3px` + `padding:8px 14px` 的药丸式，
   而其余五站是 32px 间距 + 无横向内距 —— 顶栏导航的疏密与形状两套。
   现在只保留配色与 hover 态，结构交给共享层 ✓ */
/* ⚠ 2026-10-10：原先这里有 4 条顶栏导航规则
   （.nav-links 的 margin-left:auto、普通链接配色、hover 配色、当前项配色/字重）。
   它们已在 2026-10-10 全部提升到共享 brand.css：
     · margin-left:auto          → brand.css 的 .nav-links（六站导航统一右对齐）
     · 当前项品牌紫 + 字重 800    → brand.css 的 .nav-links > a[aria-current]
   留在这里就是首页第二套顶栏配方 —— 实测过：首页导航左偏移 790、其余五站 557，
   当前项一个紫 800、一个近白 600。 */
/* 主题/语言按钮沿用 brand.css 的 .icon-btn（固定 32×32 + grid 居中）。
   ⚠ 之前给它们写了 .hp-btn 的 padding 尺寸，结果 brand.js 切换语言时
   文案从「EN」变「中」，padding 撑出来的宽度跟着变（实测 45px → 40px），
   顶栏会横向抖一下；.icon-btn 的固定宽度正是为这个存在的
   （brand.css:421 的注释解释了为什么语言按钮只能用单字）。
   ⚠ 2026-10-10 删掉了这条里的 `border-radius: 999px` ——
   胶囊圆角已**提进共享层** brand.css 的 .icon-btn（六站统一 999px），
   留在这里只会变成一处会漂移的重复配方。
   这里只覆盖配色，不碰 width/height/display/border-radius。 */
body.brand-ambient .icon-btn { border-color: var(--line-mid);
  color: var(--ink-mid); background: var(--bg-panel); font-size:var(--fs-xs); font-weight: 700; }
body.brand-ambient .icon-btn:hover { border-color: var(--cat-violet); color: var(--cat-violet-ink); }

/* 汉堡：桌面隐藏 */
/* ---------- Hero ---------- */
.hp-hero { padding: 44px 0 26px; }
/* ⚠ 字号必须是整数，且**必须走共享层档位**（2026-10-10 修正）。
   这里原本有两套问题叠在一起：
   ① 用 clamp(24px, 1.05vw + 20px, 40px) 做平滑插值，但 1.05vw 是连续值：
      1440px 下解析成 35.12px，而 _audit/_design-audit.mjs 第 4 项判定
      「出现非整数字号（半像素会让节奏失准）」会直接判失败。
   ② 后来改成分档整数 26/30/34/38px —— 但**那是我自己定的第四档**，
      与其余五站的首屏主标（--display-sub，46px）对不上，实测差 12px。
   现在改为直接用 `var(--display-sub)`：整数由 clamp 的档位保证，
   六站首屏主标同一个来源，改一处六站一起变。
   （--display-sub 在 ≤760px 时被共享层窄屏覆写为 clamp(24px,6.4vw,32px)，
     所以窄屏也不必再另写断点 —— 原来那两条 min-width 覆写已删除。） */
.hp-hero h1 {
  /* 字重 / 行高 / 字号一律继承 brand.css 的 h1（800 / --lh-tight / --display-sub）。
     原先这里是 850 —— 与其余五站的 800 不一致，现已收回共享层 ✓ */
  letter-spacing: -.028em; margin: 0 0 10px; max-width: min(88%, 24em); }
/* ⚠ 2026-10-10：窄屏取消 88% 的主标宽度上限。
   `max-width: min(88%, 24em)` 是**桌面**的排版宽度控制（控制标题行长）。
   但容器在窄屏本来就是 90vw（390px 下 351px），再砍 12% → 主标只剩 309px、
   左右各多缩进 20px，于是**首页在手机上明显比分站窄一圈**
   （实测：www 主标 宽309/左40，其余五站 宽351/左20）。
   窄屏下容器已经足够窄，不需要再限行长。 */
@media (max-width: 760px) {
  .hp-hero h1 { max-width: none; }
}
/* 渐变标题：改用共享层 token（2026-10-10）
   原来是这里自己写死三个色标 `var(--cat-rose) → --cat-violet → --cat-teal`，
   颜色值恰好相同但**公式没有共用** —— 以后调渐变要改两处。
   现在指向共享 token `--grad-title-*`，与各分站的 `.grad-title` 同一份 ✓ */
.hp-hero h1 em { font-style: normal;
  background: linear-gradient(100deg,
    var(--grad-title-from),
    var(--grad-title-mid) 48%,
    var(--grad-title-to));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-hero .hp-meta { margin: 0; color: var(--ink-dim); font-size:var(--fs-xs);
  font-weight: 650; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  max-width: min(100%, 46em); }
.hp-hero .hp-meta b { color: var(--ink-mid); font-weight: 750; }

.hp-sec { padding: 30px 0; }
.hp-sec.first { padding-top: 4px; }
.hp-sec.tight { padding: 22px 0; }
.hp-h2 { font-size: 19px; font-weight: 850; letter-spacing: -.012em; margin: 0 0 14px; }
.hp-h2 .hint { font-weight: 650; color: var(--ink-dim); font-size:var(--fs-xs); margin-left: 10px; }

/* ---------- 需求路由卡（整页主角）----------
   5 张卡在宽屏排 3+2，用「隐式 6 轨」实现：前 3 张各占 2 轨、
   后 2 张各占 3 轨 → 两张拼满第二行，右侧不留洞。
   ⚠ 不用 auto-fit：它会算出 4 列，末行空 3 格（实测填充率仅 58%）。
   ⚠ 不用 nth-child 硬指定起始列：grid 不回填空位，会把卡挤成 4 行。 */
.hp-routes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hp-route { grid-column: span 2; position: relative; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: 20px 22px; text-decoration: none; color: inherit; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s; }
.hp-route::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; }
.hp-route.r1::before { background: linear-gradient(90deg, var(--cat-violet), var(--cat-rose)); }
.hp-route.r2::before { background: linear-gradient(90deg, var(--cat-rose), var(--cat-amber)); }
.hp-route.r3::before { background: linear-gradient(90deg, var(--cat-teal), var(--cat-blue)); }
.hp-route.r4::before { background: linear-gradient(90deg, var(--cat-amber), var(--cat-lime)); }
.hp-route.r5::before { background: linear-gradient(90deg, var(--cat-blue), var(--cat-violet)); }
/* 末两张各占 3 轨，与前 3 张的 2 轨拼满第二行（6 轨 = 整行）。
   ⚠ 这条曾经只存在于注释里 —— 重写构建器时把规则丢了，5 张卡全成 2 轨，
   第二行右侧空 2 列、填充率掉到 78%。注释写了不等于规则在，写完要回读。 */
.hp-route:nth-last-child(2), .hp-route:nth-last-child(1) { grid-column: span 3; }
.hp-route:hover { transform: translateY(-4px); box-shadow: var(--shadow-hi); border-color: var(--line-mid); }
.hp-route .ask { font-size: 17px; font-weight: 850; letter-spacing: -.012em;
  margin: 0 0 7px; line-height: 1.4; }
.hp-route.r1 .ask { color: var(--cat-violet-ink); }
.hp-route.r2 .ask { color: var(--cat-rose-ink); }
.hp-route.r3 .ask { color: var(--cat-teal-ink); }
.hp-route.r4 .ask { color: var(--cat-amber-ink); }
.hp-route.r5 .ask { color: var(--cat-blue-ink); }
.hp-route .get { color: var(--ink-mid); font-size:var(--fs-xs); margin: 0 0 13px; flex: 1; }
.hp-route .rfoot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hp-route .to { font-size:var(--fs-xs); font-weight: 800; }
.hp-route.r1 .to { color: var(--cat-violet-ink); } .hp-route.r2 .to { color: var(--cat-rose-ink); }
.hp-route.r3 .to { color: var(--cat-teal-ink); }   .hp-route.r4 .to { color: var(--cat-amber-ink); }
.hp-route.r5 .to { color: var(--cat-blue-ink); }
.hp-route .num { font-size:var(--fs-xs); font-weight: 750; padding: 3px 10px; border-radius: 999px; }
.hp-route.r1 .num { background: var(--cat-violet-soft); color: var(--cat-violet-ink); }
.hp-route.r2 .num { background: var(--cat-rose-soft); color: var(--cat-rose-ink); }
.hp-route.r3 .num { background: var(--cat-teal-soft); color: var(--cat-teal-ink); }
.hp-route.r4 .num { background: var(--cat-amber-soft); color: var(--cat-amber-ink); }
.hp-route.r5 .num { background: var(--cat-blue-soft); color: var(--cat-blue-ink); }

/* ---------- 三问自测 ---------- */
.hp-picker { margin-top: 14px; background: var(--bg-inset);
  border-radius: 20px; padding: 6px 20px; }
.hp-picker .ph { font-size:var(--fs-xs); font-weight: 800; color: var(--cat-violet-ink);
  padding: 13px 0 9px; display: flex; align-items: center; gap: 8px; }
.hp-picker .ph::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--cat-violet); flex: 0 0 5px; }
.hp-pq { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.hp-pq .qq { flex: 1; font-size:var(--fs-xs); color: var(--ink-mid); }
.hp-pq .qq b { color: var(--ink); font-weight: 750; }
.hp-pq .to { font-size:var(--fs-xs); font-weight: 800; color: var(--cat-violet-ink); white-space: nowrap; }

/* ---------- 品类 chip ---------- */
.hp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.hp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--line);
  color: var(--ink); font-size:var(--fs-xs); font-weight: 700; text-decoration: none;
  transition: transform .2s, box-shadow .2s; box-shadow: var(--shadow); }
.hp-chip b { font-size:var(--fs-xs); padding: 2px 8px; border-radius: 999px; font-weight: 850; }
.hp-chip.k1 b { background: var(--cat-rose-soft);  color: var(--cat-rose-ink); }
.hp-chip.k2 b { background: var(--cat-violet-soft); color: var(--cat-violet-ink); }
.hp-chip.k3 b { background: var(--cat-blue-soft);  color: var(--cat-blue-ink); }
.hp-chip.k4 b { background: var(--cat-teal-soft);  color: var(--cat-teal-ink); }
.hp-chip.k5 b { background: var(--cat-amber-soft); color: var(--cat-amber-ink); }
.hp-chip.k6 b { background: var(--cat-lime-soft);  color: var(--cat-lime-ink); }
.hp-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }

/* ---------- 尾段三列 ---------- */
.hp-tail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hp-panel { background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow); }
.hp-panel h3 { font-size:var(--fs-sm); font-weight: 850; margin: 0 0 5px; }
.hp-panel.r1 h3 { color: var(--cat-rose-ink); }
.hp-panel.r2 h3 { color: var(--cat-teal-ink); }
.hp-panel.r3 h3 { color: var(--cat-amber-ink); }
.hp-panel p { margin: 0; color: var(--ink-mid); font-size:var(--fs-xs); line-height: 1.6; }

/* ---------- 页脚：单行授权摘要 + 药丸链接 ----------
   ⚠ 这里原本用 details 元素折叠细则（手机上展开「明细」），已移除。
   两个原因：
     1. 项目在 _audit/fix-footer-single-line.mjs 里定过案 —— 页脚法律区
        直接给链接、**不再用 details 折叠**；consistency.mjs 的品牌外壳
        检查也硬性要求 hasDetails === false（双重内容对读屏与 SEO 都是负担）。
        注：注释里刻意不写带尖括号的标签名 —— 这段 CSS 会被原样输出进
        HTML，任何按字符串找标签的探针都会把注释当成真元素。
     2. 真正的问题不是「需要折叠」，而是**信息量太大**：把三段授权细则
        整段塞进页脚，390px 下折成十几行、独占 459px，是手机留白率 73%
        的最大单一来源。
   所以改成：页脚只留一句摘要（细则本来就在 legal.html，链接过去即可），
   链接压成药丸。留白靠**减少信息**解决，不靠交互折叠。 */
/* ⚠ 2026-10-10：原先这里有一整套页脚本地规则（.site-footer 上下留白、
   .foot-links / .foot-legal-links 的**药丸**样式：底色 + 1px 边框 + 字重 750 + 999px 圆角）。
   结果同一个页脚六站两样（ui-parity 实测：字重 750 vs 400、下内边距 26px vs 60px）。
   现在全部删除 —— 页脚样式提升到共享 brand.css，首页不再有第二套配方。
   下面 .hp-line / .hp-lic 是首页**正文**里的授权文字，属内容不是外壳，保留。 */
.hp-line { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.hp-lic { margin: 0; flex: 1 1 320px; min-width: 0; color: var(--ink-dim);
  font-size:var(--fs-xs); line-height: 1.7; }
.hp-lic b { color: var(--ink-mid); font-weight: 750; }
.hp-lic .attr { color: var(--cat-violet-ink); font-weight: 800; }
/* ⚠ 2026-10-10：原先这里是 .foot-links / .foot-legal-links 的药丸样式（约 12 行），
   现已提升到共享 brand.css —— 见上方说明。删除以免出现第二份配方。 */

/* ---------- 底部 tab bar：只有窄屏 ---------- */

/* ---------- 响应式 ---------- */
/* ⚠ 2026-10-10 删除了原来这三条 `.hp-hero h1` 的 min-width 分档（30/34/38px）——
   它们把首页首屏主标锁在 34px，与其余五站的 46px（--display-sub）对不上。
   现在首页主标走共享层档位，响应式由 brand.css 的 clamp 负责，此处不再重复一份。 */

@media (max-width: 1100px) {
  /* 中屏两列：5 = 2+2+1，最后一张占满整行 */
  .hp-routes { grid-template-columns: repeat(4, 1fr); }
  .hp-route, .hp-route:nth-last-child(2) { grid-column: span 2; }
  .hp-route:nth-last-child(1) { grid-column: span 4; }
}
@media (max-width: 900px) {
  /* 六项横排在 390px 塞不下 → 改汉堡。
     ⚠ 2026-10-10：原先这里有 4 条窄屏导航规则（藏链接 / .nav-links 宽度 /
     .nav-tools 边距 / 藏副名）。现在**全部删掉** —— 它们已提升到共享 brand.css，
     六站共用一份。留着就等于首页有第二套窄屏顶栏配方，正是「分站和主站不一致」的来源。
     首页与分站的差异只剩**内容**（首页有首屏与路由卡），外壳一律相同。 */
  .brand-sub { display: none; }          /* 共享层已同等处理，这里不重复 */
  .hp-tail { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
/* ⚠ 2026-10-10：原先这里是 `.foot-links { display: none }`（窄屏隐藏页脚站群链接）。
   已提升到共享 brand.css 的 ≤768px 块 —— 六站统一，
   不再是「只有首页藏页脚链接、其余五站照常显示」。 */
  /* ⚠ .hp-lic 的 flex: 1 1 320px 是给**行**布局写的宽度基准。
     窄屏 .hp-line 变成 column，主轴翻转，同一个 320px 就变成了**高度** ——
     实测页脚被撑到 492px（其中 320px 全是这行授权文字的空盒）。
     这里必须把基准显式归零，否则「减少留白」在窄屏完全失效。 */
  .hp-lic { flex: 0 0 auto; }
  .hp-line { flex-direction: column; align-items: stretch; gap: 10px; }
  .foot-legal-links { justify-content: flex-start; }   /* margin-left:0 共享层已有，不重复 */
}
@media (max-width: 640px) {
  /* ⚠ 2026-10-10：删掉了 `.hp-c { padding: 0 var(--sp-4) }`。
     .hp-c 本身就是 `max-width: var(--container)`（窄屏 90vw，390px 下 351px），
     与其余站的 .container 同宽；但窄屏又额外加了左右各 20px 内距，
     于是首页正文列只剩 311px、左右留白 40px，
     而其余五站是 351px / 留白 20px —— **首页在手机上明显比分站窄一圈**
     （probe-insets 实测：www 左40右40宽311，其余站 左20右20宽351）。
     留白已由容器宽度提供，这里再加内距就是重复扣两次。 */
  .hp-hero { padding: 26px 0 18px; }
  .hp-sec { padding: 20px 0; }
  .hp-routes { grid-template-columns: 1fr; }
  .hp-route, .hp-route:nth-last-child(2), .hp-route:nth-last-child(1) { grid-column: 1; }
  .hp-route { padding: 16px 17px; border-radius: 20px; }
  .hp-route .ask { font-size: 16px; margin-bottom: 5px; }
  .hp-route .get { font-size:var(--fs-xs); margin-bottom: 11px; line-height: 1.58; }
  .hp-panel { padding: 15px 16px; }
  .hp-picker { padding: 4px 16px; }
  .hp-pq { padding: 11px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-route, .hp-chip { transition: none !important; }   /* 抽屉/汉堡的 reduced-motion 已在共享 brand.css 里 */
}