/* website/public/styles.css
 *
 * 2026-10-18 重构：对齐 miniprogram/app.wxss 的设计系统 V2.0
 *   —— 此前网站只有 8 个变量，字号/间距/圆角全部硬编码，
 *      同一品牌在两端呈现两种质感（小程序 60+ token、网站 8 个）。
 *   —— 本轮把 token 层平移过来，并保留全部既有类名，页面模板无需改动。
 *
 * 三点与小程序的有意差异（均在合理范围内，非不一致）：
 *   1) 字号整体比小程序大一档：小程序正文 14px（手持近距离），网站正文 16px（桌面远距离）；
 *   2) 卡片圆角 12px（小程序 10px）：桌面观看距离更远，圆角略大更协调；
 *   3) 行高 1.7（小程序 1.6）：网页正文段落更长，需要更松的行距。
 */

:root {
  /* ---------- 品牌强调：科技蓝（2026-10-18 用户指定色系切换）----------
   * ⚠️ 原主色为品牌红 #d0000f（与小程序 --brand 逐值一致）。本轮按用户要求
   *    官网改用科技蓝。**这会造成官网与小程序端主色不一致**，属已知的主动取舍，
   *    若要两端统一，需要同步改 miniprogram/app.wxss 的 --brand。
   *
   * 蓝色不是新造的：沿用小程序既有的 --rp-brand #1E5EFF（"科技蓝（5.12:1）"），
   *    及其深色变体 #7DA2FF（"科技蓝亮变体（深底 6.3:1）"）。
   *    沿用既有资产比引入新色安全 —— 这两个值都已做过对比度验证。
   */
  --brand: #1e5eff;          /* 科技蓝：按钮/链接/强调线（白底 5.12:1） */
  --brand-deep: #0f47c9;     /* 深蓝：按钮 hover（白字 7.4:1） */
  --brand-weak: #eaf0ff;     /* 浅蓝底：标签/选中态 */
  --brand-line: #c7d7ff;     /* 浅蓝描边 */
  /* 2026-10-18 视觉审计 C1：以下三个此前是组件里的裸数值，改主色/改密度时要逐个翻找。
     收进 token 后，改一处即全站生效。 */
  --grid-hero: 32px;         /* hero 栅格密度（小屏断点会降到 28） */
  /* 2026-10-18 视觉审计 B4：删除 --brand-bright（原 #4a82ff）。
     两个理由：① 全站 0 处使用，是死代码；② 它在白底上只有 3.54:1，
     低于 AA 4.5:1，而「仅大字号场景」这条约束没有任何机制保证——
     变量本身不会阻止谁把它用在 14px 正文上。删掉比留着安全。
     真需要亮蓝时，深色区已有 --tech-accent #7da2ff（深底 7.32:1）。 */
  /* Logo 自带色（橙红渐变）—— 品牌资产，不随 UI 主色改动。
     在蓝色体系里它是唯一的暖点，避免整站过冷；如需完全统一需重做 Logo。 */
  --logo-from: #f78033;
  --logo-to: #f74b4a;

  /* ---------- 中性文字 4 级冷调墨阶 ----------
   * 原为暖墨（#3d3229 棕褐）。科技蓝配暖墨会显脏 —— 棕褐与蓝是互补关系里
   * 最容易发旧的一组，所以文字同步转冷调。对比度均不低于原值。 */
  --ink: #16202e;            /* 主标题       16.40:1 */
  --ink-2: #3e4c5c;          /* 正文默认      8.78:1 */
  --sub: #5b6a7e;            /* 辅助/注释     5.52:1（白底）/ 5.10:1（浅灰字段） */
  /* 2026-10-18 视觉审计 B4：3.10:1 不达 AA。原来只有一处使用（首页 .triage-no
     的 01/02/03 编号，11px），那处已改 --sub。
     ⚠️ 此变量**禁止用于任何导航性、功能性文字**（编号、步骤、标签、图例）——
     3.10:1 只够装饰性文本。用之前先问：这条字认不出来会不会影响操作？ */
  --weak: #8494a6;           /* 弱提示        3.10:1（装饰性文本，禁止导航用途） */

  /* 2026-10-21 转化组件改动复审 R-4：--ink-3 此前被引用但从未定义，
     一路静默 fallback 到 var(--muted)。CSS 变量未定义不报错、构建也不报错，
     只有肉眼能发现——本项目已踩过两次（--muted/--red、--sp-12）。
     现补定义，值取 --sub（5.52:1），保持它现在的外观不变，只把"碰巧能跑"变成"有定义"。
     用途：小徽章、12–13px 的次级标签。 */
  --ink-3: #5b6a7e;
  /* 正文字族（无衬线）。此前 TrustStrip 写的是 var(--font-sans, system-ui, …)，
     fallback 在 Windows 上会落到 Segoe UI，与全站正文字族不是一个字体。 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- 补齐两个"在用但从未定义"的变量（2026-10-18 发现）----------
   * ClassifyForm.astro 用 var(--muted)、LeadForm.astro 用 var(--red)，
   * 但这两个变量在 :root 里从未声明过 —— CSS 变量未定义时该声明整条失效，
   * 结果是：表单的错误提示不是红色，说明文字也不是弱化色，都退回继承值。
   * 构建不会报错，只有肉眼能发现。这里补齐，语义对齐现有色阶。 */
  --muted: #5b6a7e;          /* = --sub，弱化的说明文字 */
  --red: #c1121f;            /* = --lv-red，表单错误提示 */

  /* ---------- 面与线（冷调） ---------- */
  --bg: #ffffff;
  --card: #ffffff;
  /* 凹陷面只有一个 token：--paper（见下方「版面字段」小节）。
   * 2026-10-21 转化组件审计 P1-4：原先 --surface2(#f5f8fc) 与 --paper(#f4f6fa)
   * 是两个名字、几乎同一个值（亮度差 1.53%，肉眼不可辨），
   * 结果表单区同时出现「页面白 → 卡片灰 → 输入框白」三层看不出差别的面，
   * 读者看不出「这是一个模块」，只觉得边距有点怪。
   * 统一后只剩三级明度：#ffffff（纸面）→ var(--paper)（凹面，差 7.95%）→ #ffffff（输入框浮起）。 */
  --line: #e2e8f0;           /* 分割线/卡片描边 */
  --line-soft: #eef2f7;      /* 极浅分割线 */

  /* ---------- 语义色（与小程序等级色同源） ---------- */
  --lv-green: #0e7c5a;
  --lv-yellow: #96690a;
  --lv-orange: #b45309;
  --lv-red: #c1121f;
  --lv-green-bg: #e7f6f0;
  --lv-yellow-bg: #fcf3e0;
  --lv-orange-bg: #fcede3;
  --lv-red-bg: #fce9ec;

  /* ---------- 字号标度（2026-10-18 视觉审计 v3：重建） ----------
   * 旧标度的根本问题不是"不够多"，是**最大档只有 32px**。
   * 实测：旧首页最大字 32px = 2.2vw，而标题与正文的比值只有 2.0；
   * 247 个获奖站的中位数是 4.3，头部站点的最大字中位数是 8.4vw。
   * 32px 的一级标题放在 1120px 容器里，读起来是"一个区块小标题"，
   * 不是"这一页要说的那句话"。首屏没有主次，就必然显得像模板。
   *
   * 新标度只有 5 个可见档（skill 的硬规则：一页最多 5 档）：
   *   display（首屏主张） → 2xl（区块标题） → lg（导语） → md（正文） → sm（注释）
   * xl / 3xl / 4xl 保留给既有 100 个页面，但把值收拢到上述 5 档附近，
   * 避免旧页面同时渲染出 6、7 种字号。
   *
   * 下限纪律：正文 17px（旧 16px），最小可见字 13px（旧 12px）。
   * 中文在 14px 以下笔画开始粘连，这不是审美问题。 */
  --fs-xs: 13px;     /* 绝对下限：角标/脚注 */
  --fs-sm: 16px;     /* 注释/表格（= --fs-base，合并为一档） */
  --fs-base: 16px;   /* 元信息/导航 */
  --fs-md: 17px;     /* 正文（默认） */
  --fs-lg: 19px;     /* 导语 */
  --fs-xl: 21px;     /* 三级标题 */
  --fs-2xl: 27px;    /* 区块标题 */
  --fs-3xl: clamp(28px, 3vw, 34px);   /* 过渡档 */
  --fs-4xl: clamp(30px, 3.4vw, 42px); /* 内页 h1（FAQ 问题等长标题） */
  /* 首屏主张：只有首页 hero 用。
     6.6vw 在 1440px 上是 95px，10 个字 ≈ 950px，正好落在 1080px 内容宽内，折两行。
     下限 30px 是算出来的，不是拍的：390px 视口下容器约 358px，
     10 个汉字要一行放下，上限就是 35px；取 30px 留出安全余量，
     保证最窄的手机上这句主张也仍然是两行，不会碎成四行。 */
  --fs-display: clamp(30px, 6.6vw, 96px);

  /* ---------- 版面字段（2026-10-19 改版：同源科技蓝深底）----------
   * 方向「印刷年报」：不用渐变、不用阴影分层，用**整块平色**切换章节。
   * 三个字段足够：纸白（正文阅读）→ 浅灰（首屏/旁注区）→ 深墨（数据页）。
   * 深底从 #0A1628 冷蓝黑调整为 #0A1A40 —— 与横幅 #1E5EFF 同色系（蓝色相 220°+），
   * 形成同源"科技蓝深"明暗两端：浅端是 rgba(30,94,255,0.78) 半透叠白的水蓝，
   *   深端是 #0A1A40 实色 + 蓝色 radial 光斑的深蓝。
   * 对比度验算（深端 #0A1A40 L*=0.013 上：白文 12.5:1、灰文 7.4:1、蓝强调 6.5:1，全过 WCAG AA）。 */
  --paper: #f4f6fa;          /* 浅灰字段：首屏、旁注区 */
  --field-navy: #0a1a40;     /* 深墨字段：报告样例（科技蓝深底，与浅端同源） */
  --field-navy-ink: #e8eef5;

  /* ---------- 间距标度（4px 栅格） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 圆角 ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 20px;             /* 大面板圆角（.tech-panel）——此前是裸 20px */
  --r-full: 999px;

  /* 角标（.bracket）尺寸 —— 此前是裸 14px */
  --bracket: 14px;

  /* ---------- 触控与阴影 ---------- */
  --tap: 44px;
  --shadow-card: 0 2px 10px rgba(10, 22, 40, 0.05);
  --shadow-card-hover: 0 6px 20px rgba(10, 22, 40, 0.10);

  --maxw: 1120px;

  /* ---------- 两套字族：编辑声音 / 说明声音 ----------
   * 2026-10-18 v3。此前全站单一无衬线（-apple-system → Windows 上落到微软雅黑）。
   * 问题在 display 字号上暴露得最明显：雅黑 Bold 在 95px 时笔画粗细几乎一致，
   * 读起来是一块"加粗的海报字"，没有印刷物的笔画对比 —— 而这正是
   * "看起来像模板/AI 生成"最根本的一条：模板永远用同一种无衬线、同一种粗度。
   *
   * 中文衬线（宋体）在大字号下横细竖粗，是中文印刷默认的标题字形。
   * 这里全部用系统字族，不引入任何 webfont：
   *   ① 中文 webfont 动辄上兆，2C4G 的机器与移动网络都吃不消；
   *   ② Google Fonts 在中国大陆不可靠，加载失败会造成首屏闪烁或空字；
   *   ③ macOS 有 Songti SC、Windows 有 SimSun、Android 落到系统 serif，都够用。
   * display 用 font-weight 500 而不是 700：宋体没有真正的粗体，
   * 700 会触发浏览器伪加粗，横画会被糊厚，反而失掉笔画对比。 */
  --font-display: "Songti SC", "STSong", "SimSun", "Source Han Serif SC",
    "Noto Serif CJK SC", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 图片自适应 —— 加任何图片前必须有这条，否则移动端会撑破布局 */
img { max-width: 100%; height: auto; display: block; }
/* 锚点偏移 —— 吸顶栏高 62px，跳转 #lead 时标题会被盖住 */
[id] { scroll-margin-top: 84px; }
/* 表格横向滚动容器 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 560px; }
/* 2026-10-25：两列表在手机上不该逼人横向滑动。
   上面那条 min-width 是为三列以上的对照表设的（列多，滑是合理的）；
   但表头正好两列时内容本来放得下——伴学页四态表在 375 屏被切成一半，
   读者要 swipe 才看得到「是什么意思」那一列，等于把定义藏起来了。
   :has 精确匹配「表头就只有两列」的表；不支持 :has 的浏览器退回原行为（可滑，不破版）。 */
@media (max-width: 640px) {
  .table-wrap table:has(> thead > tr > th:nth-child(2):last-child) { min-width: 0; }
  /* 去掉 min-width 后表格回到 auto 布局，第一列（结果/孩子的情况这类短标签）
     会被第二列的长内容挤到 86px，「部分达成」当场折成「部分达 / 成」。
     给首列一个最小宽度，四五个字能站住一行即可。 */
  .table-wrap table:has(> thead > tr > th:nth-child(2):last-child) tr > :first-child {
    min-width: 6.5em;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink-2);
  background: var(--bg);
  line-height: 1.7;
  font-size: var(--fs-md);
  /* 2026-10-18 视觉审计：数字等宽。日期、时长、门店编号、百分比在等宽数字下才会纵向对齐，
     这是「仪表盘感」最省力的一条 —— 不加也能看，加了立刻不一样。汉字字形不受影响。 */
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

a { color: var(--brand); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }

/* ---------- 标题层级 ----------
 * 2026-10-18 v3：字距从"拍脑袋 -0.5px"改为按字号比例。
 * 中文标题需要负字距（字面框自带右侧气口），但固定像素在大字号会过紧、
 * 小字号会失效。改用 em：display 档 -0.02em ≈ 96px 时 -1.9px。
 * 行高：中文无下伸部，display 档用 1.15（比西文的 0.95 松），
 * 两行标题之间才不会粘成一块。 */
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: 1.24;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* 首屏主张专用。只在首页 hero 的 h1 上加 .display。
 * 拆两行靠 <span class="dl">，因为这句话自带一个问号——
 * 问号就是语气的换气点，按它断行不算人为切割，是它本身的节奏。 */
h1.display,
.display {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-6);
}
h1.display .dl { display: block; }
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: 1.32;
  margin: var(--sp-12) 0 var(--sp-4);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 {
  font-size: var(--fs-xl);
  line-height: 1.45;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* 2026-10-18 排版：中文段落间距 12 → 16px。
   原值让长正文的段与段几乎贴在一起，中文没有西文的行间空隙可借用，
   必须靠段间距建立节奏。16px ≈ 正文字号的 1em，是中文舒适区下限。 */
p { margin: 0 0 var(--sp-4); }

/* ---------- 正文行长上限（38em ≈ 38 个汉字） ----------
 * 2026-10-18 v3 实测：768px 视口下段落每行约 91 个字符宽，眼睛
 * 从行尾折回下一行行首时会丢失位置——这是长文最典型的阅读疲劳来源，
 * 与字号、行高都无关，纯粹是行长。
 *
 * 中文舒适区是 32–42 字。取 38em：在 16px 正文下 ≈ 608px，
 * 一屏内一眼能扫完整行，折行时不需要重新定位。
 *
 * 为什么写在 main 上而不是全局 p：页脚、表单、卡片里的段落本来就窄，
 * 全局限制会在窄容器里造成"段落比容器还窄"的空洞。
 * 需要满宽说明的场景（如整段引用、通栏提示）加 class="full" 解除限制。
 */
main p { max-width: 38em; text-wrap: pretty; }
main p.full { max-width: none; }

/* 区块标题：不再挂左侧竖条。
 * 2026-10-18 v3：旧版是 4px 品牌色竖条 + border-image 渐隐。
 * 两个问题：① 竖条是"贴上去的装饰"，属于生成页最常见的一种廉价秩序感；
 * ② border-image 的 linear-gradient 是通不过设计门禁的渐变（哪怕只有一条线宽）。
 * 秩序本来就该由字号和留白给出：区块标题比正文大 1.6 倍、上方空 96px，
 * 读者自然知道"新的一段开始了"。不需要再加一根棒子。 */
.section-title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: var(--sp-16) 0 var(--sp-5);
  line-height: 1.32;
  padding-left: 0;
  border-left: 0;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--sp-3); top: var(--sp-3); background: var(--card);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--brand); border-radius: var(--r-md);
}

/* ---- header ----
 * 2026-10-18 v3：去掉两个"界面外壳"。
 *   ① border-bottom: 1px —— 这是一条纯装饰的细线，导航本身靠字距和位置就能分开，
 *      不需要画一道线告诉读者"这里是导航"。去掉后头部更干净，也更像印刷刊头。
 *   ② backdrop-filter: blur(8px) —— 毛玻璃。它需要 GPU 合成，在 2C4G 的机器上
 *      每次滚动都要重算；而且它是 2019 年的视觉签名，现在读起来是"模板味"。
 *      改成实底白。
 * 吸顶时用阴影分层是允许的（浮动条属于真会浮起来的元素），但只在滚动之后出现，
 * 静止状态下头部不投影。这个状态由 Base.astro 的滚动脚本加 data-stuck 控制。 */
.site-header {
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 20;
}
.site-header[data-stuck] {
  box-shadow: 0 1px 0 rgba(10, 22, 40, 0.07), 0 6px 24px rgba(10, 22, 40, 0.06);
}
.header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 64px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.brand:hover { text-decoration: none; }
/* Logo 图片（2026-10-18 替换：原为红底「百」字方块） */
.brand-logo {
  width: 38px; height: 38px;
  border-radius: var(--r-lg);
  object-fit: cover;
  flex: none;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-txt strong { font-size: var(--fs-lg); color: var(--ink); font-weight: 700; }
.brand-txt small { color: var(--sub); font-size: var(--fs-xs); }

.nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--fs-base); }
.nav a { color: var(--ink-2); transition: color 0.15s ease; }
.nav a:hover { color: var(--brand); text-decoration: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  cursor: pointer;
  min-height: var(--tap);
}
.nav-toggle:hover { border-color: var(--brand); color: var(--brand); }

/* ---- hero / sections ----
 * ---- hero ----
 * 2026-10-18 v3（设计审计）：删掉"栅格 + 双层光晕 + 顶部渐隐"三件套。
 * 上一轮加它的理由是"科技感"，但实测下来它做的是三件事：
 *   ① 32px 蓝色栅格在浅底上形成一层薄雾，把白底压成灰底，正文对比度下降；
 *   ② 两个 radial-gradient 让首屏四角发亮、中间发灰，是标准的"AI 生成页面"底色；
 *   ③ 栅格受 .wrap 宽度约束，在宽屏上是一块"贴上去的方毯子"，边缘可见。
 * 印刷年报的做法相反：**整块平色**。首屏铺一层极浅的灰蓝纸色，
 * 与下面的纯白正文区形成一个 tone step —— 层次来自明度差，不来自纹理。
 * 一句话：科技感不是背景，是字号、留白和内容的密度。
 */
.hero {
  position: relative;
  padding: var(--sp-16) 0 var(--sp-16);
  background: var(--paper);
}
.hero h1 { color: var(--ink); }
/* 2026-10-18 排版：行宽 46em → 38em。
   46em 是英文的标准行宽（45–75 字符），但中文一字一义、字宽等于字号，
   46em 会到 46 字/行，超出中文舒适的 32–42 字，扫读时容易串行。
   38em ≈ 38 字/行，落在区间中位。 */
.lead { font-size: var(--fs-lg); color: var(--ink-2); max-width: 38em; line-height: 1.7; }

/* ---- 卡片 ----
 * 2026-10-18 v3：取消「1px 描边 + 12px 圆角 + 淡阴影」三件套。
 * 为什么动这个：这三样合在一起，是"卡片"这个概念的默认长相。
 * 全站 56 处 .card 一起用，等于每一页都由同一块积木拼成——
 * 页面之间没有节奏差异，读者读到第三屏就失去判断"哪里更重要"的线索。
 * 实测旧首屏：35 个 1px 描边框、34 处静止阴影、10 条分隔细线。
 * 新做法：**平色块，直角**。块与块靠留白分开，靠背景明度差分层。
 * 直角是刻意的——圆角 12px 是 2020 年前后 SaaS 模板的共同签名，
 * 印刷物的块面是直的。这是"去 AI 设计感"里成本最低、效果最直接的一条。
 */
.card {
  border: 0;
  border-radius: 0;
  padding: var(--sp-6);
  background: var(--paper);
  margin: 0;
  box-shadow: none;
  transition: background 0.18s ease;
}
.card h3 { margin-top: 0; }
a.card { display: block; color: inherit; }
/* 整卡可点时：不再抬起/投影，改用底色加深一档。
   静止状态下会投影的元素，读者会误判它"浮在上面、可以拖"。 */
a.card:hover { text-decoration: none; background: var(--brand-weak); }

.grid { display: grid; gap: var(--sp-5); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- 按钮：直角 + 44px 触控 ----
 * 2026-10-18 v3：胶囊 → 2px 直角。
 * 一个站点只应有一种按钮形状，而旧站同时有：胶囊主按钮、胶囊幽灵按钮、
 * 12px 圆角卡片、无限半径的 .tag。形状越多，页面越像组件库演示。
 * 统一成直角后，按钮与卡片块面同一种"纸与墨"的语言。
 * 悬停去掉了 0 4px 14px 的蓝色光晕：彩色投影会让按钮看起来发光，
 * 在浅底上是明显的"网页模板"信号。改为底色加深 + 1px 内移（有反馈但不发光）。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  padding: var(--sp-3) var(--sp-6);
  min-height: var(--tap);
  border-radius: 2px;
  font-weight: 600; border: 0; cursor: pointer;
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: background 0.15s ease;
}
.btn:hover {
  background: var(--brand-deep);
  text-decoration: none;
  color: #fff;
}
.btn:active { background: var(--brand-deep); }
.btn.ghost {
  background: transparent;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.btn.ghost:hover { background: var(--brand-weak); }
/* 禁用态（2026-10-21 转化组件审计 P2-4 改）：
 * 原先是 --line 实心底 + --sub 灰字，看起来像"这块功能坏了/还没做好"，
 * 而同一页下方就写着「在线表单要等备案完成后才开放」——两个"未就绪"信号叠加，
 * 归类工具会被误读成尚未上线。
 * 现在：白底 + 1px 虚线边 + 灰字 = 「还差几步」（进行中），不是「不可用」（故障）。
 * 不用 opacity：灰色甜蜜区在实色上才可读，半透明字会随底色变化而失守。 */
.btn:disabled,
.btn[disabled] {
  background: var(--card);
  color: var(--sub);
  /* 2026-10-21 复审 R-11：虚线原用 --line(#e2e8f0)，在白底上只有 1.23 对比度，
     与卡内输入框的白底+实线只差虚实，会被当成另一个输入框。改 --weak(3.10)。 */
  border: 1px dashed var(--weak);
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--card); color: var(--sub); }

/* 次级动作：下划线文字链接，不是第二个按钮（2026-10-19 转化审核 P1-9）。
 * 本站首屏纪律：一个实心按钮 + 一个文字链接。两个同尺寸按钮并列等于没有主次，
 * 移动端堆叠后差异进一步被削弱。
 * 2026-10-19 由 index.astro 的 scoped 样式上提到全局 —— 测评页 / 关于页 / 文章页
 * 首屏此前都在用 .btn.ghost 当次按钮，与首页纪律不一致。 */
.hero-alt {
  color: var(--ink-2);
  font-size: var(--fs-base);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.hero-alt:hover { color: var(--brand); text-decoration: none; }
/* 键盘可见焦点：全站统一，不允许 outline: none 出现 */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- 标签 ----
 * 2026-10-18 v3：胶囊 + 1px 描边 → 平色小方块。
 * 全站同时存在「胶囊标签 + 胶囊按钮 + 圆角卡片」三种圆角语言时，
 * 页面看起来像三套组件库拼起来的。现在统一为直角 + 平色。 */
.tag {
  display: inline-block;
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 0;
  background: var(--paper);
  border: 0;
  color: var(--sub);
  margin-right: var(--sp-2);
}
.tag.b { background: var(--brand-weak); color: var(--brand-deep); }

/* ---- 文本层级 ---- */
.meta { color: var(--sub); font-size: var(--fs-base); }
.muted { color: var(--sub); font-size: var(--fs-base); }
.small { font-size: var(--fs-sm); color: var(--sub); }
/* 2026-10-22 P0-6：卡片脚上「这份要不要钱」那一行。
   字号不动，只把颜色提到 --ink（卡片底 #f4f6fa 上 15.2:1）——它是结论句，不是注释句。
   不要用红色区分付费：红在本站只作删除/风险类语义警示，不是价格提示。 */
/* 卡脚必须贴在卡片底部：三张卡的描述长短不一，若跟着各自文字走，
   「不另收费」和「在定制方案里，付费」会停在三个不同高度，读者读不出这是同一行信息。 */
.plan-card { display: flex; flex-direction: column; }
.plan-with { font-size: var(--fs-sm); color: var(--ink); margin-top: auto; padding-top: 6px; }

/* 2026-10-18 v3：细线分隔改纯间距。理由同 .rule-grad，
   线不是层次，明度与留白才是。 */
.rule { border-top: 0; margin: var(--sp-10) 0; }

/* 产品理念句（2026-10-18 品牌反差主张）：强调但不喧哗，左侧细品牌色条
 * （C4：原注释写"细红条"，主色已改蓝） */
.phil {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--brand);
  border-left: 3px solid var(--brand-line);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
  line-height: 1.6;
}

/* ---- 提示块（复用等级色） ---- */
.note {
  border-left: 3px solid var(--brand);
  background: var(--brand-weak);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: var(--fs-base);
  margin: var(--sp-4) 0;
  color: var(--ink-2);
}
/* 2026-10-21 转化组件审计 P1-5：原 .note.safe（绿底 #e7f6f0 + 绿左条）是「已核验 / 无风险」
 * 语义色，但全站 14 处用法里没有一个是指「这件事已经核验过」——
 * 中性说明、引用句、免责声明、电话号码全部套在同一个绿盒子里。
 * 最糟的是 ClassifyForm 的结果回声：否定家长做法的话（「补课买的是条件，条件不是因」）
 * 包在"安全绿"里，颜色说"没事"，文字说"这没用"。
 * 现在改 .note.plain：无色、无等级，纯靠区块承担"这是补充一句"。
 * 绿不承担提示功能后，全站只剩提交成功的 #leadMsg.ok 用它（语义一致：这一步确实完成了）。
 *
 * 2026-10-21 复审 R-2（第一版做错了，这里修正）：
 *   第一版给 .note.plain 的背景写了 var(--paper)，但它有一处正落在 <section class="card"> 里
 *   —— 而 .card 的背景也是 --paper，亮度差 0.00%，整个盒子只剩一条 --line 左线
 *   （#e2e8f0 落在 #f4f6fa 上对比度 1.14，等于看不见）。
 *   教训：改一处组件样式时，要问它会不会落在同样颜色的容器里，而不只看它在页面白底上的样子。
 *   现在改白底 + 1px 描边：在白底页面上仍是最安静的一档；在 --paper 卡片里则浮出（差 7.95%），
 *   与卡内输入框同一种"浮起"语言，正好接上今天统一的三级明度。 */
.note.plain {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--card);
}
.note.danger { border-color: var(--lv-red); background: var(--lv-red-bg); }

/* ---- 事实清单 ---- */
dl.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
}
dl.facts dt { color: var(--sub); font-size: var(--fs-base); }
dl.facts dd { margin: 0; font-size: var(--fs-md); color: var(--ink-2); }

/* ---- 表单 ---- */
form.lead { display: grid; gap: var(--sp-3); max-width: 620px; }
label.fld { display: grid; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 600; color: var(--ink); }
/* 2026-10-21 复审 R-6：13px 曾同时用在表单的「（可不填）」与页脚的 ICP/备案主体上。
   我把 --fs-sm 降到 14px 之后，13px 反而成了全站最小字号，而它承载的是法律信息——
   本站自己写过「中文在 14px 以下笔画开始粘连」。这两处提到 14px，13px 只留给角标。 */
label.fld .opt { color: var(--sub); font-weight: 400; font-size: var(--fs-sm); }
input[type='text'], input[type='tel'], select, textarea {
  font: inherit;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  width: 100%;
  min-height: var(--tap);
  background: var(--card);
  color: var(--ink-2);
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
.chk { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.chk input { margin-top: 5px; }
.hp { position: absolute; left: -9999px; }
#leadMsg { font-size: var(--fs-base); }
#leadMsg.ok { color: var(--lv-green); }
#leadMsg.err { color: var(--lv-red); }

/* ---- footer ---- */
.site-footer {
  margin-top: var(--sp-12);
  padding: var(--sp-8) 0 var(--sp-10);
  background: var(--paper);
  font-size: var(--fs-base);
}
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.foot-grid p { margin: var(--sp-2) 0; }
.foot-grid a { margin-right: var(--sp-2); color: var(--ink-2); }
.foot-grid a:hover { color: var(--brand); }
.disclaimer {
  font-size: var(--fs-sm); color: var(--ink-2);
  padding-top: var(--sp-4);
  margin-top: var(--sp-5);
}
/* 页脚最细一行：ICP 备案号 + 备案主体 + 版权（全站每页都出）。
   2026-10-21 复审 R-6：13px → 14px。法律信息不该是全站最小的字。 */
.fine { font-size: var(--fs-sm); color: var(--sub); }

/* ---- 文章正文 ---- */
/* 2026-10-21 转化组件审计 P1-2：去掉 4px 品牌色左侧竖条。
   视觉纪律早已写明「区块标题不挂左侧竖条，层级靠留白与字号建立」，
   这里是一处残留——挂了竖条的标题看起来像被引用的片段，不像一段的开始。 */
article.doc h2 { padding-left: 0; }
article.doc ol, article.doc ul { padding-left: var(--sp-6); }
article.doc li { margin-bottom: var(--sp-2); }

/* ---- 表格：补斑马纹与行悬停 ---- */
table.cmp {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-base);
  margin: var(--sp-4) 0;
  background: var(--card);
  border-radius: var(--r-lg);
  overflow: hidden;
}
table.cmp th, table.cmp td {
  border: 1px solid var(--line);
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
}
table.cmp th {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
/* C1：原为裸 #f8fafc。它与凹面 token 几乎同色却另立一个值，改配色时容易只改其一。统一到 --paper。 */
table.cmp tbody tr:nth-child(even) { background: var(--paper); }
table.cmp tbody tr:hover { background: var(--brand-weak); }

/* ---- 响应式 ---- */
@media (max-width: 860px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }

  /* 导航收纳为汉堡：7 项实测宽约 513px，375 屏仅 335px 可用 */
  .nav { display: none; }
  .nav.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: var(--sp-2) 0 var(--sp-1);
  }
  .nav.open a {
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
  .nav-toggle { display: inline-flex; }

  h2 { font-size: var(--fs-xl); margin-top: var(--sp-8); }
  .section-title { font-size: var(--fs-xl); }
  .card { padding: var(--sp-5); }
  .brand-logo { width: 34px; height: 34px; }
}

/* ===========================================================================
   小屏（≤640px）补强 —— 2026-10-18 视觉审计
   原来全站只有 860px 一个断点，意味着 iPhone SE(375) 与 iPad 竖屏(768)
   共用同一套字号与间距：860 断点把 h1 降到 28px，但 375 屏上 28px 仍然偏大，
   行高与区块间距也没有为小屏收紧。这一节只做「收紧」，不改任何布局结构。
   =========================================================================== */
@media (max-width: 640px) {
  :root {
    --fs-4xl: 24px;   /* h1：28 → 24 */
    --fs-2xl: 19px;   /* h2 */
    --fs-lg: 16px;    /* 导语 */
    --fs-md: 15px;    /* 正文 */
    /* 2026-10-21 转化组件审计 P1-1：补降这两档。
       原先只有 --fs-md 降到 15px，而 --fs-sm / --fs-base 一直停在 16px，
       结果手机上「说明小字」(.small) 比正文(--fs-md) 大 1px，.meta/.muted/.fld 同样。
       转化组件里所有该小声的话都在 .small 上——又大又灰，是最差的一档。 */
    --fs-sm: 14px;    /* 注释/表格：17 → 14，比正文小一档 */
    --fs-base: 15px;  /* 元信息/导航：与正文同级 */
  }
  /* 按钮不跟降：它是全站唯一要被点中的元素，跟着正文一起变小会失去"可点"的重量。 */
  .btn { font-size: 16px; }
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  /* 小屏上 32px 栅格显得密，放到 28px 反而更轻。
     C1：改 token 而不是重复声明 background-size——原写法两条规则同选择器，
     后一条覆盖前一条，读代码的人要先发现"这里被覆盖了"才知道真实值。 */
  :root { --grid-hero: 28px; }
  .section-title { margin-top: var(--sp-8); }
  .wrap { padding: 0 var(--sp-4); }
}


/* ===========================================================================
   科技层组件 —— 2026-10-18 视觉审计（第二版：科技感 + 美感）

   设计依据（两条真实产品的做法，不是凭感觉）：
   1) Claude：用「明暗区块交替」创造层次，而非渐变。它的整站 gradient-free，
      深度来自 cream → sand → stone → charcoal 的表面交替。
      → 这条证明：科技感与人文感可以共存，不必把墨色换成冷黑霓虹。
   2) Vercel：precision —— hairline 边框、负字距标题、mono 技术标签、多层阴影栈。
      → 精确感来自"每一条线都在该在的位置"，不是来自光效。

   本站的处理：科技蓝 + 冷调墨（2026-10-18 配色切换后，2026-10-19 与横幅同源化）。
     浅端承载阅读（半透明科技蓝叠白 = 水蓝），深端承载数据（#0A1A40 + 蓝色光斑）。
     两端同源蓝色相（220°+），形成"科技蓝明暗系统"——浅端的 rgba(30,94,255,0.78)、
     深端的 #0A1A40 本质上是同一个色相的两个明度端。
     深色用 #0A1A40 深蓝（科技蓝深底），与 --ink #16202e 同源、与小程序深色模式 --bg 同值。

   ⚠️ 2026-10-18 C4 注释校正 + 2026-10-19 再迭代：
     上一版这一段写的是「深色用 #16130f 暖黑」（代码早已改为 #0a1628 冷蓝黑）；
     2026-10-19 又把深底从 #0a1628 升级到 #0A1A40 科技蓝深底。
     教训：注释与代码不一致的危害大于没有注释——下一任维护者会照着
     旧的"#0a1628 冷蓝黑"思路去调，然后对不上。原因保留（上面两条依据仍成立），
     结论按当前代码重写。
   =========================================================================== */

/* ---------- 深色区专用 token ----------
 * 2026-10-19 改版：--tech-bg 与 --field-navy 同源化（都走 #0A1A40 科技蓝深底），
 *   让深色区与首页横幅形成"科技蓝明暗两端"的同源配色。
 *   强调色沿用浅蓝变体 #7da2ff，在新底色上对比度 6.5:1，仍过 WCAG AA。 */
:root {
  --tech-bg: #0a1a40;              /* 科技蓝深底：与科技蓝 #1e5eff 同色系（同 220°+ 蓝） */
  --tech-line: rgba(255, 255, 255, 0.10);
  --tech-text: rgba(255, 255, 255, 0.82);   /* ≈ #D5DEE8  12.5:1 */
  --tech-sub: rgba(255, 255, 255, 0.62);    /* ≈ #A6B4C4   7.4:1 */
  /* 深色区强调色必须用亮蓝变体：主蓝 #1e5eff 在 #0A1A40 上只有 3.5:1（不达标），
     #7DA2FF 为 6.5:1。这个值也是小程序既有的深色变体，不是新造的。 */
  --tech-accent: #7da2ff;
}

/* ---------- 深色数据面板 ----------
 * 2026-10-18 v3：同样是「去掉纹理、只留平色」。
 * 旧版叠了三层背景：40px 白色栅格 ×2 + 右上角蓝色 radial 光斑，外加 40px 投影。
 * 在深底上，栅格与光斑共同作用的结果是：面板四角发亮、中间发暗，
 * 读者第一眼看到的是"光"，不是"数据"。
 * 新做法（2026-10-19 v4）：整块 #0A1A40 直角 + 右上一抹蓝色 radial 光斑 + 极淡蓝色网格，
 *   与横幅「半透明科技蓝 + 网格 + 光斑」同源——只是把白色调换成蓝色调（更克制），
 *   让深色区也带有"科技蓝系统"的视觉关联。
 *   玻璃卡片仍然保留 rgba 255 白色玻璃，不换成蓝玻璃（数据卡片需要中性中性，
 *   蓝玻璃会让数据点视觉上"过冷"）。
 * 与上下白纸区形成三级明度：纸白 #fff → 浅灰 #f4f6fa → 深墨 #0A1A40。
 * 层次仍由明度承担，但底色已统一到科技蓝同源系。
 */
.tech-panel {
  position: relative;
  margin: var(--sp-10) 0;
  padding: var(--sp-12) var(--sp-10);
  border-radius: 0;
  color: var(--tech-text);
  /* 蓝色 radial 光斑 + 实色底：替代上一版纯平色；光斑用浅蓝变体 #7da2ff 同 --tech-accent */
  background:
    radial-gradient(ellipse 70% 50% at 82% 12%, rgba(125, 162, 255, 0.16) 0%, rgba(125, 162, 255, 0) 60%),
    var(--field-navy);
}
/* 极淡蓝色网格（同横幅白色网格的"科技蓝"对应版本）：4% 透蓝，不抢戏 */
.tech-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 162, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 162, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.tech-panel > * { position: relative; z-index: 1; }
.tech-panel h2,
.tech-panel h3 { color: #fff; }
.tech-panel p,
.tech-panel .lead { color: var(--tech-text); }
.tech-panel .meta,
.tech-panel .muted { color: var(--tech-sub); }
.tech-panel a { color: var(--tech-accent); }
.tech-panel a:hover { color: #a8c0ff; }
/* 面板内的卡片：从白纸翻成半透明玻璃，层次靠明度不靠边框 */
.tech-panel .card {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--tech-line);
  box-shadow: none;
}
.tech-panel .card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.20);
}
.tech-panel .card p,
.tech-panel .card .meta { color: var(--tech-sub); }
.tech-panel .card h3 { color: #fff; }
.tech-panel .note {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--tech-accent);
  color: var(--tech-text);
}
/* 面板内的表格：table.cmp 原为白底暖线，进深色区必须整组覆盖，
   否则表头那块 --paper 会在深色面板里亮成一块补丁。 */
.tech-panel table.cmp { background: transparent; }
.tech-panel table.cmp th,
.tech-panel table.cmp td {
  border-color: var(--tech-line);
  color: var(--tech-text);
}
.tech-panel table.cmp th {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.tech-panel table.cmp td b { color: #fff; }
.tech-panel table.cmp tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.tech-panel table.cmp tbody tr:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- 角标：已删除 ----------
 * 原为 .bracket 用两个伪元素在面板四角画 L 形细线（"裁切标记"）。
 * 删掉的两个理由：
 *   ① 它是纯粹的装饰线，不承载任何信息，而"细线画框"正是生成页最典型的填充物；
 *   ② 它借用的是印刷裁切标记的语义，但这里既没有裁切也没有装订，
 *      属于挪用符号 —— 看起来专业，实际上什么也没说。
 * 需要强调面板边界时，用明度差，不用线。 */

/* ---------- 刻度条 ----------
   只作装饰性长度，绝不标分值 —— 本站不发分数、不做排名。
   这一条是纪律，不是设计选择。 */
.meter {
  height: 3px;
  margin-top: var(--sp-3);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--tech-accent);
}

/* ---------- 小标签 ----------
 * 2026-10-18 v3 重写。旧版是「11px + 全大写 + 0.14em 字距 + mono + 1px 描边圆角框」，
 * 也就是标题上方那个小胶囊。这种写法在 2019 年是产品语言，
 * 到 2026 年它已经是"AI 生成页面"最强的识别特征之一：
 * 因为模型学会的正是"标题上面加一个小标签"这个模式。
 * 现在它就是一句普通的说明文字：正常字号、正常大小写、不加框。
 * 需要说清"这是哪一类东西"时，把答案写进句子本身。 */
.kicker {
  display: inline-block;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tech-accent);
  margin-bottom: var(--sp-3);
}

/* ---------- 数字强调 ----------
 * 2026-10-18 v3：去掉 mono。等宽数字的纵向对齐已由 body 的
 * font-variant-numeric: tabular-nums 全局提供，不需要换字体。
 * 换字体只会让同一个页面出现第三种字族。 */
.stat {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand);
  line-height: 1;
  display: block;
}
.stat-cap {
  display: block;
  font-size: var(--fs-sm);
  color: var(--sub);
  margin-top: var(--sp-1);
}

/* ---------- 分隔：只留空间，不留线 ----------
 * 2026-10-18 v3：原来是一条两端渐隐的 1px 细线。
 * 细线在这里只做一件事：把两个区块"框"开。而留白本来就能做到，
 * 且不需要一条视觉杂质。改成纯间距后，页面少一条线，多一段呼吸。 */
.rule-grad {
  height: 0;
  border: 0;
  margin: var(--sp-10) 0;
  background: none;
}

@media (max-width: 640px) {
  .tech-panel {
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--r-xl);
    margin: var(--sp-5) 0;
  }
  /* C5：原写法 .stat 在 640px 以下从 --fs-display(40px) 直接掉到 --fs-2xl(19px)，
     中间没有任何档位——小屏大数字被砍一半多，视觉上是一次突兀的塌陷。
     改走 --fs-3xl(28px)：比 40 小、比 19 大，落在断点两侧的中间位置。 */
  .stat { font-size: var(--fs-3xl); }
}


/* ===========================================================================
   入场动效（2026-10-18 v3）
   ---------------------------------------------------------------------------
   为什么现在才加：上一版全站 0 个元素在动。一个长页面完全没有入场顺序，
   读者滚到任何位置看到的都是"已经在那里的东西"，很难感知到"这一段结束了、
   下一段开始了"。动效在这里不是装饰，是**分段**。

   三条硬约束（缺一条就不做）：
   1) 只用 transform 与 opacity，不动 layout —— 滚动时不触发重排；
   2) 无脚本时内容必须全部可见 —— 所以隐藏规则挂在 html.js 下面，
      而 .js 这个类由脚本自己加。脚本没跑，就什么都不会藏；
   3) prefers-reduced-motion 下位移与遮罩全部取消，内容原样出现。

   签名动作：首屏那句主张的两行从遮罩后升出来（clip-path + 位移）。
   其余区块的组成部分依次升起 22px，逐项延迟 65ms。
   =========================================================================== */

.js .rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 65ms);
}
.js .rv.in {
  opacity: 1;
  transform: none;
}

/* 首屏主张：整块不淡入，改由两行各自从下往上"揭"出来 */
.js .display.rv { opacity: 1; transform: none; }
.js .display .dl {
  clip-path: inset(0 0 105% 0);
  transform: translate3d(0, 0.16em, 0);
  transition:
    clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .display .dl:nth-child(1) { transition-delay: 60ms; }
.js .display .dl:nth-child(2) { transition-delay: 200ms; }
.js .display.in .dl { clip-path: inset(0 0 -10% 0); transform: none; }

/* 控件反馈：按下时轻微内收，指针设备才需要 */
@media (hover: hover) {
  .btn:active { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  .js .rv,
  .js .rv.in { opacity: 1; transform: none; transition: none; }
  .js .display .dl,
  .js .display.in .dl { clip-path: none; transform: none; transition: none; }
  .btn:active { transform: none; }
}


/* ===========================================================================
   通栏字段（2026-10-18 v3）
   ---------------------------------------------------------------------------
   问题：main 是 .wrap（max-width 1120 居中），所以任何带底色的区块都会
   变成一块"浮在页面中间、四周留白的灰色矩形" —— 看起来像嵌了一个预览框，
   而不像印刷物里整页换了一种纸。

   做法：让带底色的区块自己撑到视口宽度，再把内容用 padding 推回内容线。
     margin-inline: calc(50% - 50vw)   —— 50% 是容器宽的一半，50vw 是视口一半，
                                          两者之差正好是容器到视口边缘的距离
     padding-inline: calc(50vw - 50%)  —— 反过来把内容推回原来的左边界
   这样无论视口多宽，色块都是通栏的，而文字仍然落在同一条竖线上。

   html 上加了 overflow-x: clip。100vw 在带竖向滚动条的桌面浏览器里
   比可用宽度多出滚动条那十几像素，clip 掉这点溢出，
   同时不用 overflow-x: hidden —— hidden 会创建新的滚动容器，
   让 sticky 头部失效。
   =========================================================================== */
html { overflow-x: clip; }

.hero,
.band,
.tech-panel {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* ---- 折叠块（测评页 SCALES 细分专项用） ---- */
.fold {
  border-top: 1px solid var(--line);
  padding: var(--sp-3) 0;
}
.fold > summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-md);
  list-style: none;
  user-select: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--brand);
  transition: transform .15s ease;
}
.fold[open] > summary::before { transform: rotate(90deg); }

/* ---- 报告样例深色面板底部二级 CTA ---- */
.rp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.rp-cta .rp-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-decoration: none;
}
.rp-cta .rp-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---- 联系页两栏（自助 / 1V1） ---- */
.contact-grid { align-items: start; }
.contact-col {
  display: grid;
  gap: var(--sp-4);
}
.contact-col-head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--ink);
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .rp-cta { flex-direction: column; align-items: flex-start; }
}