/* ============================================================
   拼豆搭子 · 官网共享样式
   令牌逐条对应《拼豆搭子设计系统 v3.6》，命名与小程序 app.wxss 一致（--c-* / --fs-* / --r-*）。
   双主题：深色「微信绿」= 默认 / 浅色「滴滴橙」= 手动切换。
   镜像反色：结构完全相同，只换色相与明度。

   与设计系统的差异，只有两处，均为桌面端扩展，已在本文档内登记：
   1. 表面多一档 --c-footer（页脚下沉），设计系统无此语义；
   2. 字号多三档 --fs-d1/d2/d3（Hero / 页面标题 / 区块标题），
      设计系统 6 阶止于 22px，桌面端 40px Hero 无法归入任何一档。

   全部颜色走 CSS 变量：:root 为深色基准，[data-theme="light"] 覆盖
   颜色 / 渐变 / 阴影令牌，结构不变。由 tools/check-site-tokens.cjs 断言。
   ============================================================ */


:root {
  color-scheme: dark;

  /* ---- 表面层级（§2.3 · 深色基准，5 档 + 页脚扩展） ---- */
  --c-bg: #121212;                  /* 页面底 / 吸顶条底 */
  --c-card: #1c1b1b;                /* 卡片底 */
  --c-surface: #201f1f;             /* 输入区底 / 标签底 / 轨道底 / chip 未选底 */
  --c-surface-high: #2a2a2a;        /* 槽位：搜索框底 / 分段轨道 / hover 底 */
  --c-surface-highest: #353534;     /* 按压底 / 次级卡片底 */
  --c-card-high: #2a2a2a;           /* 卡内嵌套块底 */
  --c-paper: #f7f6f3;               /* 图纸纸面（两主题恒定，不随镜像反色） */
  --c-footer: #0c0c0c;              /* 页脚下沉档（官网扩展，比页底再深一档） */

  /* ---- 文字（§2.4） ---- */
  --c-text: #e5e2e1;
  --c-text-sub: #bbc9c8;
  --c-outline: #7a8a89;
  --c-on-image: #ffffff;            /* 图上文字（恒定） */
  --c-on-image-dim: rgba(255, 255, 255, 0.85);

  /* ---- 主色（§2.1 · 三角色合一：填充 / 文字 / 描边） ---- */
  --c-primary: #07C160;
  --c-on-primary: #062e15;          /* 主色实底上唯一的字色，对 #07C160 6.25:1 */

  /* ---- 描边与分隔（§2.5 / §4.3.1） ---- */
  --c-divider: #33322f;             /* 分隔线专用，不通栏行内缩 */
  --c-outline-variant: #3c4948;     /* 图标槽描边 / 棋盘格线 / 图纸容器描边 */
  --c-card-edge: #303030;           /* 卡片外框，与 --c-border-subtle 同值 */
  --c-border-subtle: #303030;       /* 极弱内嵌边：面板 / 胶囊 / 图标钮 / 弹层 */

  /* ---- 半透明衍生（§2.7） ---- */
  --c-primary-soft: rgba(7, 193, 96, 0.15);      /* 次要按钮底 / 标签底 */
  --c-primary-tint: rgba(7, 193, 96, 0.15);      /* 仅选中 / 激活语义 */
  --c-primary-tint-soft: rgba(7, 193, 96, 0.08); /* 纸面 / 图上浅提示底 */
  --c-primary-edge: rgba(7, 193, 96, 0.4);       /* 选中贴边环 / 规格卡选中边 */
  --c-primary-edge-soft: rgba(7, 193, 96, 0.3);  /* 输入框默认描边 / 次要按钮弱边 */
  --c-primary-glow: rgba(7, 193, 96, 0.28);      /* 取色器聚焦光环 */
  --c-field-focus-bg: #2a2a2a;                   /* 输入框聚焦底 */

  /* ---- 识别色 / 第二品牌色 ---- */
  --c-accent: #07c160;              /* 非操作性元信息色（档位 / 插槽标签） */
  --c-accent-tint: rgba(7, 193, 96, 0.15);
  --c-accent-edge: rgba(7, 193, 96, 0.4);
  --c-brand-alt: #ff7e00;           /* 官网扩展：双色 Logo 的另一个色。深色露橙、浅色露绿 */
  --c-brand-alt-tint: rgba(255, 126, 0, 0.15);
  --c-brand-alt-edge: rgba(255, 126, 0, 0.35);

  /* ---- 功能色（§2.6） ---- */
  --c-error: #ffb4ab;
  --c-danger: #ff5a5f;
  --c-neutral: #7a8a89;
  --c-success: #4dd4b8;
  --c-warning: #ffb080;             /* = --c-secondary，警示文字 / 加载失败提示 */

  /* ---- 遮罩 / 玻璃 / 图案（§2.8） ---- */
  --c-scrim: rgba(0, 0, 0, 0.55);
  --c-scrim-soft: rgba(31, 27, 24, 0.6);
  --c-scrim-grad: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  --c-glass: rgba(255, 255, 255, 0.06);
  --c-hairline: rgba(255, 255, 255, 0.15);   /* 色块 / 色点内缩细描边 */
  --c-edge-on-surface: rgba(255, 255, 255, 0.22); /* 图形外分离描边 */

  /* ---- 品牌渐变卡（§2.7） ---- */
  --grad-brand-card: linear-gradient(135deg, rgba(7, 193, 96, 0.08), rgba(27, 46, 46, 0.35));

  /* ---- 阴影（§2.9 · 只承担「这层离开了纸面」一处语义） ---- */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.18);          /* 贴边，仅兜住底沿 */
  --shadow-card-halo: 0 0 0 0 transparent;               /* 深色零值透明：不可写 none */
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, 0.3);          /* 真浮层：下拉 / toast / 灯箱 */
  --shadow-header: 0 2px 10px rgba(0, 0, 0, 0.28);       /* 吸顶栏滚动后 */
  --shadow-btn-float: 0 1px 4px rgba(255, 255, 255, 0.12);
  --shadow-inset-hl: inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* ---- 结构令牌 ---- */
  --header-bg: rgba(18, 18, 18, 0.86);   /* 顶栏毛玻璃底 */

  /* ---- 字体（§3） ---- */
  --font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字号：设计系统 6 阶 */
  --fs-tag: 11px;   /* T1 静态标签 / 角标 / 色号 */
  --fs-xs: 12px;    /* T2 卡片副信息 / chip / seg */
  --fs-sm: 14px;    /* T3 说明文字 / 列表值 / 小按钮 */
  --fs-md: 16px;    /* T4 正文 / 卡片标题 / 主按钮 */
  --fs-lg: 18px;    /* T5 弹窗主标题 / Banner */
  --fs-xl: 22px;    /* T6 页面主标题 / Hero 数字 */
  /* 字号：官网扩展 display 档，只给 Hero 与区块标题，不得用于正文或提示 */
  --fs-d1: 28px;
  --fs-d2: 32px;
  --fs-d3: 40px;

  --lh-tight: 1;
  --lh-display: 1.2;
  --lh-relaxed: 1.5;
  --lh-prose: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 形态（§4.2 / §4.3） ---- */
  --r-card: 16px;     /* 容器类：卡片 / 面板 / 画布 / 输入区（--r-card 的桌面 2× 适配） */
  --r-sm: 8px;        /* 卡内嵌套元素 */
  --r-xs: 4px;        /* 官网扩展：≤24px 微元素（行内 code / 色块 / 豆格） */
  --r-pill: 999px;    /* 交互类：按钮 / chip / seg / 输入框 / 标签 */
  --bw-hairline: 1px;
  --bw-base: 2px;

  /* ---- 布局 ---- */
  --container: 1200px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
}

/* ============================================================
   浅色主题（v3.6 滴滴橙 · 镜像反色）
   仅覆盖颜色 / 渐变 / 阴影令牌；键集合与 :root 的颜色类令牌完全一致，
   尺寸 / 字重 / 圆角 / 间距等与主题无关的令牌不重复声明。
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  /* 表面层级：暖白页底 + 纯白卡片 + 暖调槽位 */
  --c-bg: #fffbf7;
  --c-card: #ffffff;
  --c-surface: #fff3e8;             /* 浅色下这一档必须存在：白卡上的输入区 / chip 未选底靠它分层 */
  --c-surface-high: #ffe9d6;
  --c-surface-highest: #fff8f2;
  --c-card-high: #fff8f2;
  --c-paper: #f7f6f3;               /* 与深色逐字相同：纸面两主题恒定 */
  --c-footer: #fff3e8;

  /* 文字 */
  --c-text: #26211e;
  --c-text-sub: #58423a;
  --c-outline: #7a6157;
  --c-on-image: #ffffff;
  --c-on-image-dim: rgba(255, 255, 255, 0.85);

  /* 主色：滴滴橙 #FF7E00，与设计系统 §2.1 逐字一致 */
  --c-primary: #ff7e00;
  --c-on-primary: #ffffff;          /* 对 #FF7E00 2.55:1，设计系统 §7 登记的品牌色例外 */

  /* 描边与分隔 */
  --c-divider: #f0e2d8;
  --c-outline-variant: #e8d5cc;
  --c-card-edge: #ffe9d6;
  --c-border-subtle: #ffe9d6;

  /* 半透明衍生 */
  --c-primary-soft: rgba(255, 126, 0, 0.15);
  --c-primary-tint: rgba(255, 126, 0, 0.12);
  --c-primary-tint-soft: rgba(255, 126, 0, 0.07);
  --c-primary-edge: rgba(255, 126, 0, 0.3);
  --c-primary-edge-soft: rgba(255, 126, 0, 0.18);
  --c-primary-glow: rgba(255, 126, 0, 0.3);
  --c-field-focus-bg: #ffffff;

  /* 识别色 / 第二品牌色（浅色不引入橙色第二品牌色，改露绿珠） */
  --c-accent: #06833c;
  --c-accent-tint: #d6f5e2;
  --c-accent-edge: rgba(6, 131, 60, 0.3);
  --c-brand-alt: #06833c;
  --c-brand-alt-tint: rgba(6, 131, 60, 0.12);
  --c-brand-alt-edge: rgba(6, 131, 60, 0.28);

  /* 功能色 */
  --c-error: #ba1a1a;
  --c-danger: #ff4d4f;
  --c-neutral: #a89b90;
  --c-success: #0f8c7a;
  --c-warning: #e87a10;

  /* 遮罩 / 玻璃 / 图案 */
  --c-scrim: rgba(31, 27, 24, 0.45);
  --c-scrim-soft: rgba(31, 27, 24, 0.6);
  --c-scrim-grad: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  --c-glass: rgba(38, 33, 30, 0.05);
  --c-hairline: rgba(38, 33, 30, 0.18);
  --c-edge-on-surface: rgba(38, 33, 30, 0.3);

  /* 品牌渐变卡 */
  --grad-brand-card: linear-gradient(135deg, rgba(255, 126, 0, 0.08), rgba(255, 236, 226, 0.6));

  /* 阴影：投影弱化到贴边档，边界交给 --shadow-card-halo 暖晕 */
  --shadow-card: 0 1px 4px rgba(32, 22, 14, 0.1);
  --shadow-card-halo: 0 0 8px 0 var(--c-surface);
  --shadow-lift: 0 4px 12px rgba(32, 22, 14, 0.14);
  --shadow-header: 0 2px 10px rgba(32, 22, 14, 0.1);
  --shadow-btn-float: 0 1px 4px rgba(0, 0, 0, 0.12);
  --shadow-inset-hl: inset 0 1px 0 rgba(0, 0, 0, 0.08);

  /* 结构 */
  --header-bg: rgba(255, 251, 247, 0.88);
}

/* ---------- 卡片：描边给圆角硬起点，暖晕给「纸的厚度」 ----------
   浅色卡片底 #FFFFFF 对页底 #FFFBF7 仅 1.03，单靠描边（1.17）撑不住边界；
   两层信号叠加后峰值下降、分布拉宽，这就是「柔和」的量化定义。
   深色无暖晕（halo 为零值透明），这条 1.30 的边即全部边缘信号。 */
.feature-card,
.point-card,
.step,
.dl-card,
.faq-item,
.version-content,
.table-wrap,
.pcard,
.platform-summary,
.community-card,
.features-cta,
.browser-mock,
.hero-banner,
.img-frame {
  border: 1px solid var(--c-card-edge);
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
}

/* 浮层：真离开纸面，用 --shadow-lift，不加暖晕
   （加了暖晕等于说它「贴着纸」，与浮起的语义自相矛盾） */
.dropdown,
.toast,
.pcard-qr-pop {
  border: 1px solid var(--c-card-edge);
  box-shadow: var(--shadow-lift);
}

/* ---------- 基础 ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

::selection {
  background: var(--c-primary-edge);
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  box-sizing: border-box;
}

.container-narrow {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
  box-sizing: border-box;
}

/* ---------- 排版 ---------- */

h1, h2, h3, h4 {
  line-height: 1.3;
  font-weight: 600;
  color: var(--c-text);
  text-wrap: balance;
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  color: var(--c-text-sub);
}

.muted {
  color: var(--c-outline);
}

.text-accent {
  color: var(--c-primary);
}

/* ---------- 按钮（胶囊 · 设计系统 Buttons） ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: var(--r-pill);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

/* L1 主 CTA（§6.1 / §4.1）：主色实底 + 反色字 + 内斜面高光 + 极淡下投影。
   投影只用黑/白，不染主色 —— 设计系统 §2.9 规定品牌色相投影全站唯一例外是底栏。
   hover 不换色：旧的「深色换亮档 / 浅色换 #FFB066」在浅色下把白字压到 1.80:1。 */
.btn-accent {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-btn-float), var(--shadow-inset-hl);
}

.btn-accent:hover {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-lift), var(--shadow-inset-hl);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-accent:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-btn-float);
}

/* Ghost（§6.1）：透明底 + 2px 主色描边 + 主色字 */
.btn-ghost {
  background: transparent;
  border: var(--bw-base) solid var(--c-primary);
  color: var(--c-primary);
}

.btn-ghost:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
  color: var(--c-primary);
  text-decoration: none;
}

/* ---------- 顶栏 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-divider);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--c-text);
  text-decoration: none;
}

.brand-mark {
  flex: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: block;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

/* 带下拉项：文字右侧收紧，留给箭头；箭头到胶囊右缘的间距与左侧 20px 对齐 */
.has-drop > .nav-link {
  padding-right: 6px;
}

/* hover 用槽位档 --c-surface-high：深色 1.34 / 浅色 1.14，同一规则两主题都可见。
   原来浅色分支被迫覆盖成 --c-surface-high，正是因为基规则用的是 --c-surface（浅色=#FFFFFF，全白不可见）。 */
.nav-link:hover {
  color: var(--c-text);
  background: var(--c-surface-high);
  text-decoration: none;
}

.nav-link.active {
  color: var(--c-primary);
}

/* 下拉菜单：文字与箭头作为一个整体（flex 垂直居中，hover/open 共用一个胶囊背景） */
.has-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
}

.drop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 14px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--c-outline);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.has-drop:hover,
.has-drop.open {
  background: var(--c-surface-high);
}

.has-drop:hover .nav-link,
.has-drop.open .nav-link {
  color: var(--c-text);
}

.has-drop:hover .drop-toggle,
.has-drop.open .drop-toggle {
  color: var(--c-text);
}

.has-drop.open .drop-toggle {
  transform: rotate(180deg);
  color: var(--c-primary);
}

.dropdown {
  position: absolute;
  /* 触发胶囊与面板之间的视觉间距，用「透明边框 + background-clip」实现：
     盒子（可命中）从胶囊底边起连续，只有背景被裁到 padding-box，看上去仍是 6px 悬浮。
     不能用伪元素填缝 —— .dropdown-features 带 overflow-y:auto，会把越界的伪元素裁掉，
     裁剪后既不显示也接不到鼠标，缝隙照旧存在（这就是「功能」菜单会自己收起的原因）。 */
  --drop-gap: 6px;
  top: 100%;
  left: 0;
  min-width: 168px;
  border-top: var(--drop-gap) solid transparent;
  padding: 8px;
  background: var(--c-card);
  background-clip: padding-box;
  border-radius: var(--r-card);
  opacity: 0;
  visibility: hidden;
  /* 必须显式关掉命中测试：子菜单 .dropdown-submenu 的 `visibility: visible`
     会覆盖父级的 hidden，导致收起态下面板区域依然能接收鼠标事件，
     鼠标划过「看不见的面板」时 hover 冒泡到 .has-drop 把菜单弹开。 */
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.has-drop.open .dropdown,
.has-drop:hover .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.dropdown a:hover {
  background: var(--c-surface-high);
  color: var(--c-text);
}

.nav-cta {
  margin-left: 12px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
}

/* 汉堡按钮 */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  background: none;
  border: var(--bw-hairline) solid var(--c-border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--c-text);
  border-radius: var(--r-pill);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: visible;
  padding: var(--sp-8) 0 var(--sp-9);
}

/* 首页 Hero 两栏：左文案 + 右品牌横幅 */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  gap: var(--sp-7);
  align-items: center;
  margin-bottom: var(--sp-8);
}

.hero-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-primary);
  margin-bottom: var(--sp-4);
}

.hero-title {
  font-size: clamp(var(--fs-d2), 5vw, var(--fs-d3));   /* display 档：40px 不在 6 阶内，登记为官网扩展 */
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}

.hero-sub {
  font-size: var(--fs-lg);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
  max-width: 30em;
  margin-bottom: var(--sp-6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* 平台标签（设计系统 Chips：低透明品牌色底 + 实色字，胶囊） */
.platform-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-chips li {
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  font-size: var(--fs-xs);
  color: var(--c-primary);
}

.platform-chips li b {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

/* 首页 Hero 品牌横幅：描边 + 贴边投影 + 暖晕由「卡片」统一组负责 */
.hero-banner {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-card);
}

.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------- 区块通用（仅以留白分隔，不画边框） ---------- */

.section {
  padding: var(--sp-9) 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-7);
}

.section-title {
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-d2));
  margin-bottom: var(--sp-3);
}

.section-sub {
  color: var(--c-outline);
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
}

/* ---------- 功能卡片（无边框 · 色阶分层） ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-card);
  border-radius: var(--r-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* hover 只抬投影、不换底色：卡片底换 --c-surface-high 在浅色下等于整张白卡变成橙块 */
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift), var(--shadow-card-halo);
}

.feature-card .card-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}

.feature-card h3 {
  font-size: var(--fs-lg);
}

.feature-card p {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: 1.8;
  flex: 1;
}

.card-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  text-decoration: none;
  display: inline-block;
  padding: 8px 2px;
  margin: -8px -2px;
}

.card-link:hover {
  text-decoration: underline;
}

/* ---------- 亮点 ---------- */

.points-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.point-card {
  padding: var(--sp-6);
  background: var(--c-card);
  border-radius: var(--r-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.point-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift), var(--shadow-card-halo);
}

.point-card .card-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
}

.point-card h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}

.point-card p {
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
}

/* ---------- 流程步骤（卡片化 · 编号水印 + 产出标签） ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-card);
  border-radius: var(--r-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--shadow-card-halo);
}

/* 右上角编号水印 */
.step-num {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-size: var(--fs-d3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--c-primary);
  opacity: 0.18;
  user-select: none;
}

.step-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.step h3 {
  font-size: var(--fs-lg);
  margin-bottom: 0;
}

.step p {
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
  flex: 1;
}

/* 产出标签：贴卡片底部 */
.step-out {
  align-self: flex-start;
  margin-top: var(--sp-1);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
}

/* 步骤之间的流向箭头（仅四列横排时显示） */
.steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 100%;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--c-primary-edge);
  border-right: 2px solid var(--c-primary-edge);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

/* ---------- 页面头（子页共用） ---------- */

.page-head {
  padding: var(--sp-8) 0 var(--sp-7);
}

.page-head .breadcrumb {
  font-size: var(--fs-sm);
  color: var(--c-outline);
  margin-bottom: var(--sp-4);
}

.page-head .breadcrumb a {
  color: var(--c-outline);
}

.page-head .breadcrumb a:hover {
  color: var(--c-primary);
}

.page-title {
  font-size: clamp(var(--fs-d1), 4vw, 36px);
  margin-bottom: var(--sp-4);
}

.page-lead {
  font-size: var(--fs-lg);
  color: var(--c-text-sub);
  max-width: 34em;
  line-height: var(--lh-prose);
}

/* ---------- 正文 / 图文 ---------- */

.prose {
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--c-text-sub);
}

.prose h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-7) 0 var(--sp-4);
}

.prose h3 {
  font-size: var(--fs-lg);
  margin: var(--sp-6) 0 var(--sp-3);
}

.prose p {
  margin-bottom: var(--sp-4);
  max-width: 42em;
}

.prose ul {
  margin: 0 0 var(--sp-4);
  padding-left: 0;
  display: grid;
  gap: 8px;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
  max-width: 42em;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary-edge);
  border: 1px solid var(--c-primary);
}

.img-frame {
  margin: var(--sp-5) 0 var(--sp-6);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-card);
}

.img-frame img {
  width: 100%;
  height: auto;
}

.img-caption {
  padding: 10px 16px;
  font-size: var(--fs-xs);
  color: var(--c-outline);
  border-top: var(--bw-hairline) solid var(--c-divider);
  background: var(--c-card-high);
}

.img-caption code {
  font-family: var(--font-mono);
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-tag);
}

/* ---------- 参数表（hairline 分隔，无外框） ---------- */

.table-wrap {
  overflow-x: auto;
  margin: var(--sp-5) 0 var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-card);
}

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: var(--bw-hairline) solid var(--c-divider);
  vertical-align: top;
}

.data-table thead th {
  color: var(--c-outline);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table td code {
  font-family: var(--font-mono);
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
}

/* ---------- FAQ ---------- */

.faq-group-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: var(--sp-6) 0 var(--sp-3);
  scroll-margin-top: 96px;
}
.faq-group-title:first-child { margin-top: 0; }

.faq-list {
  display: grid;
  gap: var(--sp-3);
}

.faq-item {
  background: var(--c-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px 22px;
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-outline);
  transition: transform 0.15s ease, color 0.15s ease;
  flex: none;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--c-primary);
}

.faq-item .faq-body {
  padding: 0 22px 18px;
  /* 答案文本限制阅读行长：卡片本身随内容栅格铺满，行长不跟着被拉到 70+ 字 */
  max-width: 46em;
  color: var(--c-text-sub);
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
}

/* ---------- 下载卡片 ---------- */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.dl-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--c-card);
  border-radius: var(--r-card);
  transition: box-shadow 0.15s ease;
}

.dl-card:hover {
  box-shadow: var(--shadow-lift), var(--shadow-card-halo);
}

/* 规划中平台：换字色令牌表达降权，整卡底色与常规卡一致（§5） */
.dl-card.state-soon {
  color: var(--c-text-sub);
}

.dl-card .dl-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* 状态标签永远靠右 */
.dl-card .dl-top .dl-status {
  margin-left: auto;
}

.dl-card .dl-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}

/* 多平台合并卡：并排展示多个平台图标 */
.dl-card .dl-icon.is-multi {
  width: auto;
  min-width: 44px;
  gap: 7px;
}

.dl-card .dl-icon.is-multi svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.dl-card.is-wide {
  grid-column: 1 / -1;
}

.dl-card.is-combined .dl-top {
  flex-wrap: wrap;
}

.dl-card h3 {
  font-size: var(--fs-lg);
}

.dl-status {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

.dl-status.status-ok {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

.dl-status.status-soon {
  color: var(--c-outline);
  background: var(--c-surface-high);
}

.dl-card p {
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
  flex: 1;
}

/* 合并卡内的平台与预期入口 */
.dl-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: var(--bw-hairline) solid var(--c-divider);
}

.dl-platforms li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-outline);
}

.dl-platforms b {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-text-sub);
}

.qr-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}

.qr-box {
  width: 148px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: var(--bw-hairline) solid var(--c-hairline);
  background: var(--c-on-image);   /* 恒白：小程序码是白底彩图，暖色底会露出接缝 */
}

.qr-box img {
  width: 100%;
  height: auto;
}

.qr-note {
  font-size: var(--fs-sm);
  color: var(--c-outline);
  line-height: var(--lh-prose);
}

/* ---------- 提示条 ---------- */

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 18px;
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-sm);
  background: var(--c-primary-tint-soft);
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
  margin: var(--sp-5) 0;
}

/* ---------- 页脚 ---------- */

.site-footer {
  border-top: 1px solid var(--c-divider);
  background: var(--c-footer);
  padding: var(--sp-8) 0 var(--sp-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(340px, 1.9fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr);
  gap: var(--sp-6);
  align-items: start;
  margin-bottom: var(--sp-7);
}

.footer-brand p {
  font-size: var(--fs-sm);
  color: var(--c-outline);
  margin: var(--sp-3) 0 var(--sp-4);
  max-width: 26em;
}

.footer-col h4 {
  font-size: var(--fs-sm);
  color: var(--c-outline);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
}

.footer-col ul {
  display: grid;
  gap: 8px;
}

/* 功能链接较多：桌面双列，缩短页脚整体高度 */
@media (min-width: 1025px) {
  .footer-col:nth-child(2) ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: var(--sp-4);
  }
}

.footer-col a {
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  text-decoration: none;
}

/* hover 只换下划线：主色在浅色下对页底 2.47:1，不承担 hover 的额外信号 */
.footer-col a:hover {
  color: var(--c-text);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  /* 给固定定位的“回到顶部”按钮留出空间，避免遮住备案号 */
  padding: var(--sp-5) 48px 0 0;
  border-top: var(--bw-hairline) solid var(--c-divider);
  font-size: var(--fs-xs);
  color: var(--c-outline);
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--c-surface-highest);
  color: var(--c-text);
  font-size: var(--fs-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ---------- 响应式 ---------- */

@media (max-width: 1024px) {
  .points-grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* 两列布局下横向箭头指向错位，直接隐藏 */
  .steps .step::after {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer-col:nth-child(2) ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: var(--sp-4);
  }
}

/* 861–1000：收紧主导航间距，避免导航项在平板宽度下换行 */
@media (min-width: 861px) and (max-width: 1000px) {
  .nav-list {
    gap: 4px;
  }

  .nav-link {
    padding-left: 12px;
    padding-right: 12px;
  }

  .has-drop .drop-toggle {
    margin-right: 6px;
  }

  .nav-cta {
    margin-left: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 860px) {
  /* 移动端导航：汉堡展开全屏面板 */
  .nav-burger {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--c-bg);
    border-bottom: var(--bw-hairline) solid var(--c-divider);
    padding: var(--sp-5);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transform-origin: top center;
    transition: opacity 0.24s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    will-change: transform, opacity;
  }

  .site-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 逐项级联入场：菜单展开时各区块依次淡入下滑 */
  .site-nav .nav-list > li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .site-nav.open .nav-list > li {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav.open .nav-list > li:nth-child(1) { transition-delay: 0.04s; }
  .site-nav.open .nav-list > li:nth-child(2) { transition-delay: 0.08s; }
  .site-nav.open .nav-list > li:nth-child(3) { transition-delay: 0.12s; }
  .site-nav.open .nav-list > li:nth-child(4) { transition-delay: 0.16s; }
  .site-nav.open .nav-list > li:nth-child(5) { transition-delay: 0.2s; }
  .site-nav.open .nav-list > li:nth-child(6) { transition-delay: 0.24s; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
  }

  .nav-link,
  .has-drop > .nav-link {
    padding: 12px 16px;
    font-size: var(--fs-md);
    border-radius: var(--r-sm);
  }

  .has-drop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  /* 移动端展开态不沿用桌面悬停的胶囊底色 */
  .has-drop:hover,
  .has-drop.open {
    background: none;
  }

  .has-drop .drop-toggle {
    position: static;
    width: 40px;
    height: 40px;
    margin-right: 4px;
  }

  .dropdown {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    position: static;
    opacity: 0;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 16px;
    border-radius: 0;
    background: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.24s ease, visibility 0.34s;
  }

  .has-drop.open .dropdown {
    max-height: 420px;
    opacity: 1;
    visibility: visible;
  }

  .dropdown a {
    padding: 10px 12px;
  }

  .nav-cta-item {
    margin-top: var(--sp-3);
  }

  .nav-cta {
    margin-left: 0;
    width: 100%;
  }

  .feature-grid,
  .dl-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .points-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: var(--sp-7) 0;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
  }

  .footer-brand,
  .footer-col:nth-child(2) {
    grid-column: 1 / -1;
  }

  .footer-col:nth-child(2) ul {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    column-gap: var(--sp-4);
  }

  .footer-col a {
    font-size: var(--fs-xs);
  }

  .qr-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   更新日志 · 时间轴 · 2026-10-18
   2026-11-01：正文列宽与全站统一到 .container（1200px）栅格。
   宽屏下版本信息进左栏、变更内容进右栏，用满列宽的同时把正文行长
   控制在 ~45 字，避免整行铺满 1150px 后难以阅读。
   ============================================================ */

.timeline {
  position: relative;
  padding-left: 40px;
}

/* 宽屏双栏：左侧版本元信息，右侧变更卡片 */
@media (min-width: 1024px) {
  .timeline-version {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "meta content"
      "head content"
      "date content";
    column-gap: clamp(24px, 3vw, 44px);
    align-items: start;
  }

  /* 左栏只有 280px，标语容易在行尾甩出一两个字，balance 让它均分两行 */
  .version-tagline {
    text-wrap: balance;
  }

  .version-meta {
    grid-area: meta;
  }

  .version-head {
    grid-area: head;
  }

  .version-date {
    grid-area: date;
    margin-bottom: 0;
  }

  .version-content {
    grid-area: content;
    padding: var(--sp-6);
  }
}

.timeline::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: var(--bw-base);
  background: var(--c-divider);
  border-radius: var(--bw-hairline);
}

.timeline-version {
  position: relative;
  margin-bottom: var(--sp-7);
}

.timeline-version:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -33px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-bg);
  border: var(--bw-base) solid var(--c-primary);
  z-index: 1;
}

.timeline-version.is-latest .timeline-dot {
  background: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-soft);
}

.version-badge {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.version-badge.is-latest {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

/* 平台分类：版本号前展示所属客户端 */
.version-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
}

.version-meta .version-badge {
  margin-bottom: 0;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-prose);
}

.platform-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
}

.platform-badge.is-web {
  color: var(--c-brand-alt);
  background: var(--c-brand-alt-tint);
}

.platform-badge.is-mini {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

.platform-badge.is-ios,
.platform-badge.is-android,
.platform-badge.is-harmony {
  color: var(--c-text-sub);
  background: var(--c-surface-high);
}

.version-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--sp-2);
}

.version-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0;
}

.version-tagline {
  font-size: var(--fs-sm);
  color: var(--c-primary);
  font-style: italic;
}

.version-date {
  font-size: var(--fs-xs);
  color: var(--c-outline);
  margin-bottom: var(--sp-4);
}

.version-content {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: var(--sp-5);
}

.version-content h4 {
  font-size: var(--fs-sm);
  color: var(--c-outline);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-3);
}

.version-content ul {
  display: grid;
  gap: 8px;
  margin-bottom: var(--sp-5);
}

.version-content ul:last-child {
  margin-bottom: 0;
}

.version-content ul li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-md);
  line-height: var(--lh-prose);
  color: var(--c-text-sub);
}

.version-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary-edge);
  border: 1px solid var(--c-primary);
}

.version-content ul li b {
  color: var(--c-text);
}

.version-subtitle {
  font-size: var(--fs-md);
  color: var(--c-text-sub);
  font-style: italic;
  margin-bottom: var(--sp-3);
}

.timeline-footer {
  text-align: center;
  margin-top: var(--sp-8);
  font-size: var(--fs-md);
  color: var(--c-text-sub);
  line-height: var(--lh-prose);
}

.timeline-footer .heart {
  color: var(--c-primary);
}

@media (max-width: 860px) {
  .timeline {
    padding-left: 32px;
  }

  .timeline-dot {
    left: -26px;
    width: 14px;
    height: 14px;
  }

  .version-content {
    padding: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .version-head {
    flex-direction: column;
    gap: 4px;
  }
}

/* 尊重系统减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   功能页 step1 / step2 并排对比
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4vw, 28px);
  margin: 24px 0 8px;
}

.compare-item {
  margin: 0;
  padding: 0;
}

.compare-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
  border: var(--bw-hairline) solid var(--c-card-edge);
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
  background: var(--c-card);
}

.compare-item figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
  line-height: var(--lh-relaxed);
}

.step-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   体验增强 · 2026-09-20
   ============================================================ */

/* 锚点跳转避开吸顶导航 */
[id] { scroll-margin-top: 80px; }

/* 顶栏滚动后加强分隔 */
.site-header.scrolled {
  box-shadow: var(--shadow-header);
  border-bottom-color: var(--c-surface-highest);
}

/* 滚动进场动画（reduced-motion 由全局规则兜底禁用） */
/* 用独立的 translate 属性做位移，避免覆盖卡片自身的 hover transform */
.js-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.55s ease, translate 0.55s ease, transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.js-reveal.in {
  opacity: 1;
  translate: none;
}

/* 菜单/灯箱打开时锁定页面滚动 */
body.nav-locked { overflow: hidden; }

/* 可放大图片 */
.compare-item img,
.hero-banner img,
.qr-box img {
  cursor: zoom-in;
}

/* 图片灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--c-scrim);
  backdrop-filter: blur(6px);
}
.lightbox figure {
  margin: 0;
  max-width: min(560px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lightbox img {
  max-width: 100%;
  max-height: calc(86vh - 44px);
  object-fit: contain;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
}
.lightbox figcaption {
  color: var(--c-on-image);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  width: 42px;
  height: 42px;
  border: var(--bw-hairline) solid var(--c-border-subtle);
  border-radius: var(--r-pill);
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  cursor: pointer;
}
.lightbox-close:hover { background: var(--c-surface-high); }

/* 回到顶部 */
.back-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--bw-hairline) solid var(--c-border-subtle);
  border-radius: var(--r-pill);
  background: var(--c-card);
  color: var(--c-text);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.back-top.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.back-top:hover { background: var(--c-surface-high); }

/* 相关功能内链 */
.related-box {
  margin-top: 44px;
  padding: 22px clamp(16px, 3vw, 26px);
  border: var(--bw-hairline) solid var(--c-card-edge);
  border-radius: var(--r-card);
  background: var(--c-card);
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
}
.related-box h2 {
  margin: 0 0 14px;
  font-size: var(--fs-md);
  color: var(--c-text-sub);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.related-grid a {
  display: block;
  padding: 12px 14px;
  border: var(--bw-hairline) solid var(--c-border-subtle);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.related-grid a:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-tint-soft);
  text-decoration: none;
}
.related-grid a b { display: block; margin-bottom: 2px; font-weight: var(--fw-semibold); }
.related-grid a span { color: var(--c-text-sub); font-size: var(--fs-xs); }

/* 关于页事实块 */
.fact-block {
  margin: 26px 0;
  padding: 20px clamp(16px, 3vw, 26px);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--c-card);
}
.fact-block dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
  font-size: var(--fs-sm);
}
.fact-block dt { color: var(--c-text-sub); }
.fact-block dd { margin: 0; color: var(--c-text); }

/* 首页交流群卡片 */
.community-card {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin-top: var(--sp-6);
  padding: clamp(20px, 3vw, 28px);
  background: var(--c-card);
  border-radius: var(--r-card);
  scroll-margin-top: 96px;
}
.community-copy { flex: 1 1 auto; min-width: 0; }
.community-title {
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-xl));
  margin-bottom: var(--sp-2);
}
.community-desc {
  margin-bottom: var(--sp-3);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}
.community-desc b {
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.community-qr { width: 136px; flex: none; }

@media (max-width: 640px) {
  .community-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }
  .community-qr { width: 120px; }
}

/* 首屏 H1 关键词副行 */
.h1-sub {
  display: block;
  margin-top: 12px;
  font-size: clamp(var(--fs-sm), 1.6vw, var(--fs-lg));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-sub);
}

/* ============================================================
   首页 Hero 平台并行卡片
   网页版 / 小程序 / 鸿蒙 / iOS / Android · 2026-10-22
   ============================================================ */
.platform-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-card);
  border-radius: var(--r-card);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pcard:not(.is-soon):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), var(--shadow-card-halo);
}

.pcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pcard-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--c-surface-high);
  color: var(--c-text-sub);
}

/* 多平台合并卡：并排展示多个平台图标 */
.pcard-icon.is-multi {
  width: auto;
  min-width: 42px;
  padding: 0 10px;
  gap: 7px;
}

.pcard-icon.is-multi svg {
  width: 16px;
  height: 16px;
}

.pcard-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
}

.pcard-badge.is-soon {
  background: var(--c-surface-high);
  color: var(--c-outline);
}

.pcard-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-top: var(--sp-2);
}

/* 入口卡描述走 T3（§6.6「入口卡描述比标题低一档」） */
.pcard-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-text-sub);
  min-height: 2.8em;
  margin-bottom: var(--sp-2);
}

.pcard-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.pcard-cta.is-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--shadow-btn-float), var(--shadow-inset-hl);
}

/* hover 不再 filter:brightness —— 那会把主色实底连同反色字一起提亮，浅色下白字直接糊掉 */
.pcard-cta.is-primary:hover {
  box-shadow: var(--shadow-lift), var(--shadow-inset-hl);
}

.pcard-cta.is-ghost {
  background: transparent;
  color: var(--c-primary);
  /* 白卡上 0.18 的边几乎看不见，提到 0.3 才读得出这是个按钮 */
  border: var(--bw-hairline) solid var(--c-primary-edge);
}

.pcard-cta.is-disabled {
  color: var(--c-outline);
  background: var(--c-surface-high);
  cursor: default;
}

/* 网页版：主色贴边环，视觉最重（§4.1 L4 描边环） */
.pcard.is-feature {
  border-color: var(--c-primary-edge);
  box-shadow: var(--shadow-card), var(--shadow-card-halo), 0 0 0 2px var(--c-primary-tint);
}

/* 规划中平台：换色令牌弱化，不用 opacity 降对比（§5） */
.pcard.is-soon {
  /* 与另外两张卡同底色：状态由「规划中」徽章 + 禁用 CTA 表达，
     整卡铺浅暖会让三卡并排时突然多出一个色块 */
  background: var(--c-card);
}

.pcard.is-soon:hover {
  transform: none;
}

/* 小程序：悬停 / 键盘聚焦时浮出二维码 */
.pcard-qr-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(8px);
  width: 156px;
  padding: 10px;
  z-index: 30;
  background: var(--c-card);
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  text-align: center;
}

.pcard-qr-pop img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-xs);
}

.pcard-qr-pop span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.pcard-qr-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--c-card);
}

.pcard-qr:hover .pcard-qr-pop,
.pcard-qr:focus-within .pcard-qr-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* 触屏无悬停：同屏扫码无意义，改为文字指引 */
.pcard-hint {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-text-sub);
}

@media (hover: none) {
  .pcard-qr-pop {
    display: none;
  }

  .pcard-hint {
    display: block;
  }
}

@media (max-width: 760px) {
  .platform-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 三卡布局下，合并的多平台卡独占一行 */
  .platform-cards > .pcard:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 460px) {
  .platform-cards {
    grid-template-columns: 1fr;
  }

  .platform-cards > .pcard:last-child {
    grid-column: auto;
  }
}

/* 导航 Logo 加大 */
.site-header .brand {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.site-header .brand-mark {
  width: 34px;
  height: 34px;
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* ============================================================
   主题切换按钮（深浅双主题 · v3.0）
   注入到顶栏 .header-inner，位于汉堡按钮之前
   ============================================================ */
.theme-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 8px;
  border: var(--bw-hairline) solid var(--c-border-subtle);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--c-primary-edge);
  background: var(--c-primary-tint-soft);
  color: var(--c-primary);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ============================================================
   功能总览页 · 两板块（小程序端 / 网页版）· 2026-10-24
   ============================================================ */

.section.is-tight {
  padding-top: 0;
  padding-bottom: 0;
}

#miniprogram,
#web {
  scroll-margin-top: 88px;
}

/* ---------- 页头锚点 ---------- */

.feature-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-5);
}

.feature-jump a {
  padding: 8px 16px;
  border: var(--bw-hairline) solid var(--c-card-edge);
  border-radius: var(--r-pill);
  background: var(--c-card);
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.feature-jump a:hover {
  background: var(--c-primary-tint);
  color: var(--c-primary);
  border-color: var(--c-primary-edge);
  text-decoration: none;
}

/* ---------- 平台摘要 ---------- */

.platform-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.platform-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-card);
}

.ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-1);
}

.ps-platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.ps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.ps-icon.is-mini {
  background: var(--c-brand-alt-tint);
  color: var(--c-brand-alt);
}

.ps-status {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.ps-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
}

.ps-desc {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}

.ps-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--sp-3);
  color: var(--c-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.ps-link:hover {
  text-decoration: underline;
}

/* ---------- 板块标题 ---------- */

.board-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.board-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.board-tier {
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
}

.board-status {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--c-primary-tint);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.board-count {
  flex: none;
  padding-bottom: 8px;
  color: var(--c-outline);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* ---------- 三列功能卡 ---------- */

.feature-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.feature-card.is-dual h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-brand-alt-tint);
  color: var(--c-brand-alt);
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-prose);
  white-space: nowrap;
}

/* ---------- 网页版展示卡 ---------- */

.web-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-7);
  border: var(--bw-hairline) solid var(--c-card-edge);
  border-radius: var(--r-card);
  /* 品牌渐变卡：底色与渐变两件套，缺任一条都会把半透明渐变直接叠在页底上 */
  background-color: var(--c-card);
  background-image: var(--grad-brand-card);
  box-shadow: var(--shadow-card), var(--shadow-card-halo);
}

.web-feature-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  color: var(--c-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.web-feature h3 {
  margin-bottom: var(--sp-3);
  font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-d1));
  line-height: var(--lh-display);
}

.web-feature-copy > p {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}

.web-points {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-6);
}

.web-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.point-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.web-points b {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
}

.web-points div span {
  display: block;
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}

.web-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.browser-mock {
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-card);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: var(--bw-hairline) solid var(--c-divider);
  background: var(--c-surface-high);
}

.browser-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-outline);
  opacity: 0.55;
}

.browser-bar em {
  margin-left: 6px;
  color: var(--c-outline);
  font-size: var(--fs-tag);
  font-style: normal;
}

.browser-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.bead-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 232px;
}

.bead-grid span {
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  background: var(--c-surface-high);
}

.bead-grid .is-bead {
  background: var(--c-primary);
}

.bead-grid .is-empty {
  opacity: 0.55;
}

.browser-caption {
  color: var(--c-outline);
  font-size: var(--fs-tag);
}

.board-note {
  margin-top: var(--sp-4);
  color: var(--c-outline);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}

/* ---------- 底部 CTA ---------- */

.features-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-card);
}

.features-cta h2 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xl);
}

.features-cta p {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-prose);
}

.features-cta-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ---------- 导航下拉 · 概览 / 网页版 / 小程序 ---------- */

.dropdown-features {
  min-width: 232px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}

.dropdown-features .dropdown-all {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

/* 分组之间用细分隔线断开：「概览」是目的地，下面两项是容器 */
.dropdown-sub {
  margin-top: 3px;
  padding-top: 3px;
  border-top: var(--bw-hairline) solid var(--c-divider);
}

/* 分组标题是容器标签，不是链接：字重高于子项，但不抢「功能概览」的权重 */
.dropdown-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* 展开态只靠 chevron 与字色表达，不铺底色 ——
   分组标题一旦有底色，会被读成「选中项」，且下拉里常驻一条横带 */
.dropdown-sub-toggle:hover {
  background: var(--c-surface);
  color: var(--c-text);
}

.sub-chevron {
  flex: none;
  color: var(--c-outline);
  transition: transform 0.15s ease, color 0.15s ease;
}

.dropdown-sub.open .sub-chevron {
  transform: rotate(90deg);
  color: var(--c-primary);
}

.dropdown-submenu {
  max-height: 0;
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 1px solid transparent;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.18s ease, visibility 0.28s;
}

.dropdown-sub.open > .dropdown-submenu {
  max-height: 420px;
  margin: 2px 0 4px 18px;
  padding-left: 8px;
  border-left-color: var(--c-divider);
  opacity: 1;
  visibility: visible;
}

.dropdown-submenu a {
  padding-left: 10px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .feature-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .web-feature {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .web-visual {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .platform-overview {
    grid-template-columns: 1fr;
  }

  .feature-grid-3 {
    grid-template-columns: 1fr;
  }

  .features-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 基础 .dropdown-features 的 max-height 会覆盖 .dropdown 的 0，收起时需显式归零 */
  .has-drop .dropdown-features {
    max-height: 0;
    overflow: hidden;
  }

  .has-drop.open .dropdown-features {
    /* 移动端只保留导航面板这一层滚动，避免功能列表被内层容器截断 */
    max-height: 800px;
    overflow: hidden;
  }

  .dropdown-sub-toggle {
    padding: 10px 12px;
    font-size: var(--fs-md);
  }

  .dropdown-sub.open > .dropdown-submenu {
    margin-left: 12px;
  }
}

@media (max-width: 640px) {
  .board-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .board-count {
    padding-bottom: 0;
  }

  .web-feature {
    padding: var(--sp-5);
  }

  .features-cta {
    padding: var(--sp-5);
  }
}