/* weidaxin.org 样式。由 tools/build.py 把 src/css/*.css 按文件名顺序拼成，不要直接改这个文件。 */
/* ---- 00-fonts.css ---- */
/* 字体（规格第 4 节「字体」）。地址写成 ../fonts/<固定文件名>，构建时换成带哈希的 /assets/fonts/ 地址（总索引第 3 节）。
   - Geist：@fontsource/geist-sans 5.3.0 的拉丁子集，400/500/600/700。这个包本身不带中文字形，但它按官方拉丁范围
     圈定了 unicode-range（下面四个 @font-face 都有），中文标点不在这个范围里，浏览器才会跳过它去用字体栈后面的字体
     （标题落到 WDX Heading SC，正文落到系统中文字体）。**不写 unicode-range 会有坑**：Geist 排在字体栈第一位，
     没有范围限制时浏览器会用它去渲染中文标点，而它的「，。；：！？（）」是窄的拉丁标点字形（实测逗号只有约 0.20em
     宽，中文全角标点应为 1em），版式会被压扁。范围抄 fontsource 官方 latin 子集的 unicode-range。
   - WDX Heading SC：Noto Sans SC 700 按页面标题用字做的子集（构建生成），在标题字体栈里排在 Geist 之后
     （task-13「模板契约」）。unicode-range 只含中日韩文字与全角标点：英文页的标题没有中文，浏览器不会下载它。
   - 全部 font-display: swap：字体到之前先用系统字体显示。 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/geist-sans-latin-400-normal.e6ef6abb.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/geist-sans-latin-500-normal.40073e90.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/geist-sans-latin-600-normal.9d99fbd7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/geist-sans-latin-700-normal.3d59addf.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "WDX Heading SC";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-sc-700-sub.d054b948.woff2) format("woff2");
  unicode-range: U+2E80-2FDF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;
}

/* ---- 01-tokens.css ---- */
/* 设计变量（规格第 4 节）。颜色只在这里写色值，其他文件一律引用变量：规格色表的 13 个，加上画布里用到、用户已确认的
   4 个（小标签底 chip、骨架条 skel、链接下划线 link-ul、深色小标签上的字 on-ink；协调人 09-29 决定照画布用，补进规格色表）。
   响应式写法：mobile-first。基础值是手机（<768px），往上按 768 / 1024 / 1440 覆盖；每个文件的响应式规则写在它自己末尾，
   不单设 99-responsive.css。「电脑档」「手机档」以 1024px 为界（规格第 4 节「字号」「间距与形状」）。 */
:root {
  color-scheme: only light;

  --ink: #0f1216;
  --ink-2: #4a515d;
  --muted: #646b78;
  --surface: #ffffff;
  --ground: #f4f5f7;
  --dot: #cbd1d9;
  --line: #e2e5ea;
  --line-2: #cfd4dc;
  --line-input: #858b96;
  --accent: #0a7a63;
  --accent-pressed: #07604e;
  --accent-soft: #e3f2ee;
  --danger: #c62828;
  --chip: #eef0f3;
  --skel: #e3e6eb;
  --link-ul: #c3c9d2;
  --on-ink: #f1f2f4;

  --font-body: "Geist", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;
  --font-heading: "Geist", "WDX Heading SC", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;

  --fs-hero: 38px;
  --fs-h2: 32px;
  --fs-h2-alt: 30px;
  --fs-tag: 19px;
  --fs-stage: 17px;
  --fs-lead: 16px;
  --fs-body: 16px;
  --fs-note: 15px;
  --fs-small: 13px;

  --pad: 20px;
  --section-y: 64px;
  --header-h: 64px;

  --r-btn: 8px;
  --r-node: 12px;
  --r-panel: 16px;
  --r-tag: 6px;

  --dur: 150ms;
  --dur-menu: 180ms;

  /* 2026-10-10 视觉改版（Arc 风格，用户确认的设计稿 claude.ai/artifact/P2AyJUeigKigonTVqVzrTs）：
     半透明色一律写成 8 位十六进制（末两位是不透明度），仍然只在这里定义；阴影只有下面四档，别处只能引用。 */
  --glass: #ffffffd1;
  --pill: #f2f2ef;
  --hero-ground: #f6f5f1;
  --hairline: #0f121614;
  --hairline-2: #0f121624;
  --dot-soft: #0f12161a;
  --glow-accent: #0a7a636b;
  --glow-sand: #f2c9848c;
  --glow-sky: #a0bef061;
  --mint: #9fe3cb;
  --mint-soft: #8fd6be2e;
  --on-dark-2: #ffffffdb;
  --on-dark-muted: #ffffffa6;
  --on-dark-line: #ffffff1f;

  --shadow-card: 0 1px 2px #0f12160a, 0 18px 40px -30px #0f121640;
  --shadow-lift: 0 1px 2px #0f12160a, 0 30px 60px -28px #0f121647;
  --shadow-featured: 0 1px 2px #0f121614, 0 40px 80px -40px #0a7a638c;
  --shadow-seg: 0 1px 2px #0f12160f, 0 4px 12px -6px #0f12162e;

  --r-card: 24px;
  --r-hero: 32px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.5, 1);
}

/* 英文首屏标题小一档（规格第 4 节：中文 76/38、英文 68/34）。body 上的变量覆盖 :root 的。 */
[data-lang="en"] { --fs-hero: 34px; }

@media (min-width: 768px) {
  :root { --pad: 32px; }
}

@media (min-width: 1024px) {
  :root {
    --pad: 48px;
    --section-y: 128px;
    --header-h: 80px;
    --fs-hero: 76px;
    --fs-h2: 56px;
    --fs-h2-alt: 48px;
    --fs-tag: 26px;
    --fs-stage: 18px;
    --fs-lead: 19px;
  }
  [data-lang="en"] { --fs-hero: 68px; }
}

@media (min-width: 1440px) {
  :root { --pad: 96px; }
}

/* ---- 10-base.css ---- */
/* 基础：盒模型、正文、标题字体、链接与按钮、焦点框、跳到主要内容、内容区、提示条、减少动态效果。 */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 属性一律不显示。写两遍 [hidden] 把优先级提到 (0,2,0)，压过 .icon-btn、.inquiry-form 这类单个类名设的 display
   （T18 的规则不许用提高优先级的感叹号写法）。 */
[hidden][hidden] { display: none; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-break: strict;
  overflow-wrap: break-word;
}

/* 中文标题（首屏标题、区块标题、步骤标题、404 标题）和文字标志的主名：Geist 在前管英文和数字，中文落到标题子集字体
   （00-fonts.css；子集只有 700）。产品副标题照画布是 500 字重，用正文字体栈（60-products.css），不在这里。 */
h1, h2, h3,
.hero-title, .section-title, .stage-title, .nf-title, .wordmark-primary {
  font-family: var(--font-heading);
  text-wrap: balance;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
picture { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
a, button, label { touch-action: manipulation; }
em, i { font-style: normal; }

/* 跳到锚点或焦点移过去时，正文元素停在吸顶的顶栏下面（多留 12px 给焦点框）。只给正文，不给顶栏自己
   （照 home：用 html 的 scroll-padding-top 时，焦点移到顶栏里的按钮会把页面卷走）。区块自己有内边距，只留顶栏高度。 */
main *, footer * { scroll-margin-top: calc(var(--header-h) + 12px); scroll-margin-bottom: 12px; }
main section, #products { scroll-margin-top: var(--header-h); }

/* 键盘焦点：2px accent 外框，外扩 2px（规格第 4 节）。脚本移过去的焦点（tabindex="-1"）不画框。 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: calc(1248px + 2 * var(--pad));   /* 1248 = 1440 − 2×96：画布 1440 宽、左右各留 96px 边距时的内容宽度 */
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-note);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* 只给读屏的文字（顶栏语言切换的说明用，T14 审查后模板新增的类）：视觉上完全不占地方，但读屏能读到；
   聚焦时不需要显示，所以不写 :focus 例外（跟 .skip-link 不同，这里没有可聚焦的元素）。标准的隐藏写法：
   1px 的框、clip 与 clip-path 双写兼容新旧浏览器、超出裁掉、不换行。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/* 按钮（2026-10-10 改版）：胶囊形；主按钮 ink 底白字，次要按钮白底细描边；可带一个箭头图标（.icon-arrow），
   悬停时按钮上移 1px、箭头右移 3px（减少动态效果时不动，见文件末尾）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-compact { min-height: 44px; padding: 0 18px; font-size: var(--fs-note); }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:active { background: var(--ink-2); }
.btn-secondary { padding: 0 26px; background: var(--surface); color: var(--ink); border-color: var(--hairline-2); }
.btn-secondary:active { background: var(--ground); }
.btn .icon-arrow { flex: none; }
@media (hover: hover) {
  .btn-primary:hover { background: var(--ink); }
  .btn-secondary:hover { background: var(--ground); border-color: var(--line-input); }
}
.btn[disabled], .btn[aria-disabled="true"], .btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--line); color: var(--muted); border-color: transparent; cursor: not-allowed; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn-outline { border: 1px solid var(--line-input); }
.icon-btn-outline:active { background: var(--ground); }
@media (hover: hover) {
  .icon-btn-outline:hover { background: var(--ground); }
}

/* .text-link（本文件）与 .direct-email（80-contact.css 的邮箱大字）用同一套下划线样式：粗细、颜色、偏移、
   常态/悬停/按下时下划线变深，都在这里一起写，.direct-email 自己的文件里只留字号、字重这些它独有的属性
   （代码审查 2026-09-29，去掉两处重复声明）。 */
.text-link, .direct-email {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-ul);
  text-underline-offset: 6px;
}
.text-link { color: var(--ink); }
.text-link:active, .direct-email:active { text-decoration-color: var(--ink); }
@media (hover: hover) {
  .text-link:hover, .direct-email:hover { text-decoration-color: var(--ink); }
}

.caption { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

/* 提示条：页面底部居中，ink 底白字；平时透明、不挡点击，始终在页面里（读屏能播报）。 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--fs-note);
  font-weight: 500;
  line-height: 1.4;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; }

/* 复制的后备做法借用的临时文本框：放到屏幕外（不能用 style 属性）。 */
.copy-buffer { position: fixed; top: 0; left: -10000px; width: 1px; height: 1px; opacity: 0; }

/* 动效只有按钮与链接的颜色过渡（150ms）和菜单展开（20-header.css）。过渡一律写在 no-preference 里：
   开了「减少动态效果」就没有任何过渡（全站没有 animation，也不用平滑滚动）。 */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur) ease-out, color var(--dur) ease-out, border-color var(--dur) ease-out,
    transform 350ms var(--ease-out); }
  .btn .icon-arrow { transition: transform 350ms var(--ease-out); }
  .icon-btn { transition: background-color var(--dur) ease-out; }
  .text-link, .direct-email { transition: text-decoration-color var(--dur) ease-out; }
  .nav-link, .footer-link { transition: color var(--dur) ease-out; }
}

/* 悬停时按钮轻轻上移、箭头右移（只在能悬停、且没开「减少动态效果」时）。 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .icon-arrow { transform: translateX(3px); }
}

/* ---- 20-header.css ---- */
/* 顶栏：手机高 64px、左 20 右 12（菜单按钮往右收 8px），≥1024px 高 80px。
   2026-10-10 改版：吸顶的半透明毛玻璃（glass 底 + 背景模糊），滚动后脚本加 is-scrolled，显出底部 hairline 细线。
   ≥1024px 中间是胶囊形导航组 .nav-pill（绝对居中），右边 .nav-end：语言切换和「联系销售」。
   <1024px：横排导航隐藏，显示菜单按钮（脚本启动后才显示）；菜单面板在顶栏下方整宽展开，外面一层透明点击层。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }
.site-header-simple { position: static; }
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: calc(var(--header-h) - 1px);
}

/* 文字标志：主名 18/20px 700，副名 0.7 倍 500 ink-2，基线对齐，间距 10px；中英两版字距不同（画布 wordmark）。 */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-primary { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
.wordmark-secondary { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0.08em; color: var(--ink-2); }
[data-lang="en"] .wordmark-primary { letter-spacing: 0.06em; }
[data-lang="en"] .wordmark-secondary { letter-spacing: 0.02em; }

.header-nav { display: none; }
.menu-btn { margin-right: -8px; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-menu { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

.menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 1px);   /* 顶栏底部细线留在面板上面 */
  z-index: 45;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));   /* 支持 dvh 的浏览器用它：移动端地址栏收起/展开时更准（不支持的忽略这行） */
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.menu-inner { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 20px; }
.menu-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.menu-link:first-child { border-top: 0; }
.menu-sales { margin-top: 12px; }
.menu-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 35; background: transparent; }

/* 菜单展开 180ms（CONFIG.menuMs 与此一致）；减少动态效果时直接出现、直接消失。 */
@media (prefers-reduced-motion: no-preference) {
  .menu { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-menu) ease-out, transform var(--dur-menu) ease-out; }
  .menu.is-open { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .wordmark-primary { font-size: 20px; }
  .wordmark-secondary { font-size: 14px; }
  .header-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; }
  .nav-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--pill);
    transform: translate(-50%, -50%);
  }
  .nav-end { display: flex; align-items: center; gap: 8px; }
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--fs-note);
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
  }
  .nav-pill .nav-link { min-height: 36px; padding: 0 16px; border-radius: 999px; }
  .nav-link:active { color: var(--ink); }
  .nav-lang { padding: 0 12px; }
  .menu-btn, .menu, .menu-backdrop { display: none; }
}

@media (min-width: 1024px) and (hover: hover) {
  .nav-link:hover { color: var(--ink); }
  .nav-pill .nav-link:hover { background: var(--surface); }
}

/* ---- 30-hero.css ---- */
/* 首屏（2026-10-10 改版，设计稿 claude.ai/artifact/P2AyJUeigKigonTVqVzrTs）。
   一块大圆角面板 .hero-frame：hero-ground 底 + 淡点阵（::before，间距 26px）+ 三团光晕（.glow，品牌绿在右上、暖沙在左下、
   淡蓝在中间，径向渐变加轻微模糊，16–20 秒来回漂移）。面板里内容居中：小标签（两款产品名）、两行标题、导语、两个按钮，
   进页面时依次淡入上浮 18px（.rise，间隔 80ms）。面板下面是两条工作流（40-lanes.css），白底。
   手机：面板左右各留 12px、圆角 24、上下内边距 56/48；≥1024px：左右 24、圆角 32、上下 140/128。
   404 页的正文仍用原来的整块点阵底（.nf）。 */
.nf {
  background-color: var(--ground);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 24px 24px;
}

.hero { padding: 12px 0 0; background: var(--surface); }
.hero-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--hero-ground);
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--dot-soft) 1px, transparent 1.2px);
  background-size: 26px 26px;
}
.hero-glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.glow { position: absolute; display: block; border-radius: 50%; filter: blur(12px); }
.glow-a { top: -160px; right: -200px; width: 520px; height: 520px; background: radial-gradient(circle, var(--glow-accent) 0%, transparent 68%); }
.glow-b { bottom: -220px; left: -220px; width: 560px; height: 560px; background: radial-gradient(circle, var(--glow-sand) 0%, transparent 66%); }
.glow-c { top: 34%; left: 30%; width: 360px; height: 360px; background: radial-gradient(circle, var(--glow-sky) 0%, transparent 66%); }

.hero-head { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 56px; padding-bottom: 48px; text-align: center; }
.hero-eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  max-width: 100%;
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
.hero-title { font-size: var(--fs-hero); line-height: 1.16; font-weight: 700; letter-spacing: -0.01em; }
/* 标题两行各是一个块，text-wrap: balance（10-base.css，继承下来）按块各自平衡。英文手机宽度两段都要折行，各自平衡后
   390 宽会排出特别短的一行；<768px 英文两段接成一段整体平衡。中文不接：中文逐字可断，接起来平衡会把「一条」这样的词
   拆到两行；中文手机上本来就是两行。 */
.hero-line { display: block; }
[data-lang="en"] .hero-line { display: inline; }
.hero-lead { max-width: 640px; font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
/* <360px：两个按钮英文文字都装不下，纵向排列各占一行；≥360px 等宽横排；≥768px 按文字自然宽度、居中。 */
.hero-actions { display: flex; flex-direction: column; align-self: stretch; gap: 12px; padding-top: 4px; }
.hero-actions .btn { padding: 0 16px; }

.lanes { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.lane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lane-label { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.lane-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }

@media (min-width: 360px) {
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
}

@media (min-width: 768px) {
  [data-lang="en"] .hero-line { display: block; }
  .hero-actions { align-self: center; }
  .hero-actions .btn { flex: none; padding: 0 28px; }
  .glow-a { top: -220px; right: -160px; width: 760px; height: 760px; }
  .glow-b { bottom: -300px; left: -200px; width: 820px; height: 820px; }
  .glow-c { left: 38%; width: 520px; height: 520px; filter: blur(16px); }
}

@media (min-width: 1024px) {
  .hero { padding-top: 20px; }
  .hero-frame { margin: 0 24px; border-radius: var(--r-hero); }
  .hero-head { gap: 28px; padding-top: 140px; padding-bottom: 128px; }
  .hero-copy { gap: 24px; max-width: 900px; }
  .hero-title { line-height: 1.1; }
  .hero-lead { font-size: 18px; }
  .hero-actions { gap: 12px; padding-top: 6px; }
  .lanes { gap: 40px; margin-top: 72px; }
  .lane { gap: 16px; }
}

/* 动效：进页面淡入上浮、光晕漂移。只在没开「减少动态效果」时；开了就什么都不动（.rise 直接显示）。 */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(18px); animation: wdx-rise 950ms var(--ease-out) forwards; }
  .rise-1 { animation-delay: 80ms; }
  .rise-2 { animation-delay: 160ms; }
  .rise-3 { animation-delay: 240ms; }
  .glow-a, .glow-c { animation: wdx-drift 16s ease-in-out infinite alternate; }
  .glow-b { animation: wdx-drift-2 20s ease-in-out infinite alternate; }
}
@keyframes wdx-rise { to { opacity: 1; transform: none; } }
@keyframes wdx-drift { to { transform: translate3d(-60px, 40px, 0) scale(1.12); } }
@keyframes wdx-drift-2 { to { transform: translate3d(70px, -30px, 0) scale(1.08); } }

/* ---- 40-lanes.css ---- */
/* 首屏两条工作流（design/gen_c.py 的 node、chain、video_lane、marketing_lane）。
   横向滚动区 [data-scroll-lane]（工作流与内容日历共用）：放得下时没有滚动条，放不下时只在区内横滑，吸附到节点。
   工作流滚动区在任何宽度都伸到屏幕右边缘（负的页面右边距），放不下时节点被屏幕边切开，提示还能滑（规格第 3 节
   「窄屏适配」）；以前 ≥1024px 不伸出去，1024–约 1437 之间节点在内容区右边（离窗口 48/96px）被硬切，像排版错误。
   轨道右边补回同样的边距，滑到底时最后一个节点和内容区右边对齐；scroll-padding-right 同样扣掉这一段，吸附和
   滚到某个节点时按内容区算。放得下时（中文约 ≥1276、英文约 ≥1290，含 1440）轨道比滚动区窄，外观和伸出去之前一样。
   节点：白底、1px line-2 描边、12px 圆角、内边距 14、内部间距 12；进行中的节点描边换 accent。
   节点之间 20px 的 2px 连线画在后一个节点的 ::before 上（节点在轨道里垂直居中，连线在节点高度一半处）。 */
[data-scroll-lane] {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  -webkit-overflow-scrolling: touch;
}
/* ::-webkit-scrollbar 是旧 WebKit/Blink 的写法，给还不支持 scrollbar-width 的浏览器（Safari）兜底；
   Chrome 121 起一旦设了 scrollbar-width 就不再理会 ::-webkit-scrollbar，这几条规则对新版 Chrome 是死代码，
   留着不影响任何浏览器的实际显示（代码审查 2026-09-29）。 */
[data-scroll-lane]::-webkit-scrollbar { height: 6px; }
[data-scroll-lane]::-webkit-scrollbar-track { background: transparent; }
[data-scroll-lane]::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-2); }

.lane-scroll { margin-right: calc(0px - var(--pad)); scroll-padding-right: var(--pad); }
.lane-track { display: flex; align-items: center; width: max-content; padding-right: var(--pad); }

/* min-width: min-content：节点至少宽到标题里最长的词加状态标签放得下（见下面 .node-head）。只有英文「Schedule」
   这一个节点用得上：一个词换不了行，160 宽放不下它加「Scheduled」，节点按内容加宽约 14px；其余节点照画布宽度。 */
.node {
  position: relative;
  flex: none;
  min-width: min-content;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-node);
  background: var(--surface);
  scroll-snap-align: start;
}
.node + .node { margin-left: 20px; }
.node + .node::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -21px;   /* -(20px 间距 + 1px 左邻节点的描边)，连线从上一个节点的边框外沿画起 */
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: var(--line-2);
}
.node.is-active { border-color: var(--accent); }
.node-topic { width: 150px; }
.node-script { width: 180px; }
.node-board { width: 200px; }
.node-motion { width: 160px; }
.node-voice { width: 180px; }
.node-final { width: 180px; }
.node-trends { width: 190px; }
.node-batch { width: 200px; }
.node-brand { width: 170px; }
.node-check { width: 170px; }
.node-review { width: 190px; }
.node-post { width: 160px; }

/* 标题栏：状态标签不收缩（.chip 的 flex: none），离节点右边框的距离始终是节点内边距；标题放不下时自己换行
   （英文「Voice & captions」排成两行）。以前标题不换行，长标题把标签挤到内边距里，离边框只剩 1.5–6px。
   不在词中间断开：标题的最小宽度是最长的词（flex 项目默认的 min-width: auto），再放不下就由 .node 加宽。 */
.node-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.node-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: normal; }
.node-text { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.node-note { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 小标签：高 22、圆角 6、12px 500；「进行中」用 accent-soft 底、accent-pressed 字。 */
.chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-tag);
  background: var(--chip);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.chip-active { background: var(--accent-soft); color: var(--accent-pressed); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* 骨架条：高 6、圆角 3、间距 6，宽度按画布。 */
.skel { display: flex; flex-direction: column; gap: 6px; }
.skel > span { display: block; height: 6px; border-radius: 3px; background: var(--skel); }
.skel .w100 { width: 100%; }
.skel .w96 { width: 96%; }
.skel .w92 { width: 92%; }
.skel .w90 { width: 90%; }
.skel .w88 { width: 88%; }
.skel .w80 { width: 80%; }
.skel .w76 { width: 76%; }
.skel .w70 { width: 70%; }
.skel .w60 { width: 60%; }
.skel .w56 { width: 56%; }
.skel .px70 { width: 70px; }
.skel .px46 { width: 46px; }

/* 界面示意里的图片：picture() 已按显示比例和焦点裁好（task-13），这里只定尺寸和圆角，不需要 object-fit。 */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; justify-items: center; }
.frame { width: 36px; height: 64px; border-radius: 4px; }

.clips { display: flex; justify-content: center; gap: 8px; }
.clip { position: relative; }
.clip-img { width: 52px; height: 92px; border-radius: 4px; }
.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
}

.wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.wave-bar { display: block; flex: none; width: 3px; border-radius: 2px; background: var(--ink-2); }
.wave-bar.h6 { height: 6px; }
.wave-bar.h8 { height: 8px; }
.wave-bar.h10 { height: 10px; }
.wave-bar.h12 { height: 12px; }
.wave-bar.h14 { height: 14px; }
.wave-bar.h16 { height: 16px; }
.wave-bar.h18 { height: 18px; }
.wave-bar.h20 { height: 20px; }
.wave-bar.h22 { height: 22px; }
.wave-bar.h24 { height: 24px; }
.wave-bar.h26 { height: 26px; }

/* 手机成片：9:16，圆角 16，line-2 描边，左上「AI 生成」，底部 10% 高处一行字幕（画布 phone）。
   content-box：宽高指的是画面本身，1px 描边加在外面（130×231 的画面外框 132×233，和画布一样）；
   全局的 border-box 下画面会被描边挤成 128 宽、底部裁掉 2px。 */
.phone-wrap { display: flex; justify-content: center; }
.phone {
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: 130px;
  height: 231px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: var(--ink);
}
.phone-img { width: 130px; height: 231px; }
.phone-lg, .phone-lg .phone-img { width: 180px; height: 320px; }
.phone-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 10px;
  line-height: 18px;
  white-space: nowrap;
}
.phone-sub {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 23px;
  padding: 5px 6px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.phone-lg .phone-sub { bottom: 32px; }

.trends { display: flex; flex-direction: column; gap: 8px; }
.trend { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; line-height: 22px; color: var(--ink-2); }

.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.post-img { width: 76px; height: 76px; border-radius: 4px; }

.brand-art { position: relative; align-self: flex-start; }
.brand-img { width: 140px; height: 104px; border-radius: 6px; }
/* 品牌套版图左下角套上去的假 logo：白条里写「LOGO」，9px 700、字距 0.08em、高 16、左右内边距 6（画布 marketing_lane）。
   它是示意图里的假标志，不是 DESIGN.md「Don'ts」说的标题上方装饰小标签（eyebrow）。 */
.brand-logo {
  position: absolute;
  left: 8px;
  bottom: 8px;
  height: 16px;
  padding: 0 6px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 16px;
  white-space: nowrap;
}

/* 对勾圆点：18px ink 实心圆里一个 11px 白色对勾（画布 check_dot）。 */
.checks { display: flex; flex-direction: column; gap: 10px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.check-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
}

.review-row { display: flex; align-items: center; gap: 10px; }
.review-thumb { width: 52px; height: 52px; border-radius: 4px; }
.mini-btns { display: flex; gap: 8px; }
.mini-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 28px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-tag);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.mini-btn-primary { border-color: var(--accent); background: var(--accent); color: var(--surface); }

.slots { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); }
.slot.is-done { color: var(--ink-2); }
.slot.is-done .slot-dot { background: var(--ink); }

/* ---- 50-mocks.css ---- */
/* 产品区的界面示意（design/gen_c.py 的 picker_mock、calendar_mock）：ground 底面板、line 描边、16px 圆角，
   面板内边距手机 16、768 起 24、1024 起 32；面板下 12px 是「界面示意」说明。
   选片工作台：≥1200px 3 列镜头 + 右侧 260px 预览；768–1199px 3 列、预览在下方；<768px 2 列、预览在下方（规格第 3 节）。
   候选图在窄卡片里等比缩小（最宽 64px）。内容日历：≥1200px 七列 + 右侧 280px 审核卡；更窄时审核卡在日历下方：
   - <768px：七列放进横向滚动区，列宽按滚动区宽度算，任何手机宽度都正好露出 2.5 天（--cal-days；390 宽约 117px 一列，
     和画布的 116 差不到 1px）。
   - 768–1023：同样的算法露出 5.5 天（每列约 108–154px），最右边那列露出一半，一看就是「还能滑」。以前各列固定 116px，
     宽度一变露出多少全凭运气，768 宽第六天只露出一成、像被切了一刀。
   - 1024–1199：七列等分放得下，不滚动（1024 宽每列约 113px）。以前固定 116px，1024 宽只超出 22px，周日被切成一窄条。
   - 1200–1439：列间距 12 收到 8。1200 宽每列只有约 93px，英文「Scheduled」标签（76.5px）比卡片内容宽（75.4px），
     伸进内边距；收到 8 后约 97px 一列。≥1440 改回 12，和画布一样。
   列宽用百分比：100% 是日历网格（= 滚动区）的宽度，列轨道超出网格的部分由滚动区滚动。 */
.mock { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mock-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--ground);
}

.mock-btns { display: flex; gap: 8px; width: 100%; }
.mock-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-btn);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.mock-btn-primary { border-color: var(--accent); background: var(--accent); color: var(--surface); }

/* 选片工作台 */
.picker { display: flex; flex-direction: column; gap: 24px; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.shot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-node);
  background: var(--surface);
}
.shot-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.cands { display: flex; gap: 12px; }
.cand { position: relative; flex: 0 1 64px; min-width: 0; border-radius: 6px; }
.cand-img { width: 100%; height: auto; aspect-ratio: 64 / 114; border-radius: 6px; }
.cand.is-chosen { outline: 2px solid var(--accent); outline-offset: 2px; }
.cand-badge {
  position: absolute;
  right: -6px;
  top: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
}
.preview { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 260px; margin: 0 auto; }

/* 内容日历与审核卡 */
.calendar { display: flex; flex-direction: column; gap: 24px; --cal-days: 2.5; --cal-gap: 12px; }
.cal-scroll { min-width: 0; }
/* 露出 n.5 天：前 n 天各占一列加一个间距，第 n+1 天露出半列，所以列宽 =（滚动区宽 − n × 间距）÷ n.5。
   列宽至少 96px：英文最长的「Scheduled」标签 76.5px，加卡片内边距和描边 18px 正好放得下。只在约 338px 以下的
   窗口起作用（320 宽算出来只有 89px，标签会伸进内边距），这时第三天露出三到五成。 */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, max(96px, calc((100% - (var(--cal-days) - 0.5) * var(--cal-gap)) / var(--cal-days))));
  gap: var(--cal-gap);
}
.cal-day { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-snap-align: start; }
.cal-day-name { padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.cal-cards { display: flex; flex-direction: column; gap: 10px; }
.cal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: var(--surface);
}
.cal-card.is-active { border-color: var(--accent); }
.cal-img { width: 100%; height: auto; aspect-ratio: 112 / 72; border-radius: 4px; }
.cal-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; }
/* 英文的「Posted」一行、「Scheduled」两行，并排会把卡片撑得高低不齐；不分断点，任何宽度都竖排（中文不受影响，
   跟着上面按宽度切换的规则走）。选择器比 .cal-meta 和上面按宽度切换的两条规则都更具体，天然覆盖它们，
   不需要再进各个 @media 里各写一遍（代码审查 2026-09-29）。 */
[data-lang="en"] .cal-meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.cal-time { font-size: 11px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }

.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-node);
  background: var(--surface);
}
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review-title { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.review-time { font-size: 12px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.review-img { width: 100%; height: auto; aspect-ratio: 240 / 150; border-radius: var(--r-btn); }
.review-checks { padding-top: 4px; }
.review-checks .check-row { font-size: 13px; }

@media (min-width: 768px) {
  .mock-panel { padding: 24px; }
  .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .calendar { --cal-days: 5.5; }
}

@media (min-width: 1024px) {
  .mock-panel { padding: 32px; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .picker, .calendar { flex-direction: row; align-items: flex-start; gap: 32px; }
  .calendar { --cal-gap: 8px; }
  .shots { flex: 1 1 auto; }
  .preview { flex: none; width: 260px; margin: 0; }
  .cal-scroll { flex: 1 1 auto; }
  .review-card { flex: none; width: 280px; max-width: none; }
  /* 1200–1439 时列宽只有约 97–117px（列间距收到 8 以后），时间和状态标签并排会挤得换行、卡片高低不齐；
     竖排避免这个问题。≥1440 内容区到满宽（≈114px 一列），照画布改回并排（代码审查 2026-09-29）。 */
  .cal-meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
}

@media (min-width: 1440px) {
  .calendar { --cal-gap: 12px; }
  .cal-meta { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
}

/* ---- 60-products.css ---- */
/* 产品区块（design/gen_c.py 的 product_section）：上下内边距 128（手机 64）；视频区白底、营销区 ground 底。
   ≥1024px：标题块与「价格 + 联系销售」左右排、底对齐；示意；12 列栅格里导语与要点占 5 列（右留 32）、步骤占 7 列两列排。
   <1024px：全部纵向堆叠，步骤单列（规格第 3 节）。 */
.product { padding: var(--section-y) 0; }
.product-video { background: var(--surface); }
.product-marketing { background: var(--ground); }
.product-inner { display: flex; flex-direction: column; gap: 40px; }

.product-head { display: flex; flex-direction: column; gap: 24px; }
.product-titles { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section-title { font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
/* 产品副标题：500 字重（画布），标题子集字体只有 700，所以用正文字体栈；中英两页一样。 */
.product-tag { font-family: var(--font-body); font-size: var(--fs-tag); line-height: 1.4; font-weight: 500; color: var(--ink-2); text-wrap: balance; }
.product-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.price-note { font-size: var(--fs-note); line-height: 1.6; color: var(--muted); }
/* 有上架套餐时 62-plans.js 把价格说明换成这个链接（跳到价格区 #pricing）。 */
.price-link { font-size: var(--fs-note); font-weight: 500; line-height: 1.6; }

.product-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.product-intro { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.product-lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
.facts { display: flex; flex-direction: column; gap: 14px; }
.fact { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.fact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
}

.stages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; min-width: 0; }
.stage { display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.stage-no { font-size: var(--fs-note); font-weight: 600; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.stage-title { font-size: var(--fs-stage); font-weight: 600; line-height: 1.5; color: var(--ink); }
.stage-desc { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }

@media (min-width: 1024px) {
  .product-inner { gap: 56px; }
  .product-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
  .product-titles { gap: 14px; }
  .section-title { line-height: 1.15; }
  .product-cta { flex: none; flex-wrap: nowrap; }
  .product-body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; }
  .product-intro { grid-column: span 5; gap: 32px; padding-right: 32px; }
  .stages { grid-column: span 7; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ---- 65-plans.css ---- */
/* 价格区（#pricing，_pricing.html.j2 + 62-plans.js，2026-10-10 改版）和下单页的套餐摘要（.plan-*，64-checkout.js）。
   价格区：标题块在左、币种切换在右（窄屏上下排）；组合方案三张卡片（手机单列、≥768px 三列），推荐的那张是 ink 深色卡片；
   下面一条细线隔开「也可以单独购买」，两款产品各一张列表卡（≥768px 两列），每档一行，整行可点。
   卡片：r-card 圆角、hairline 描边、shadow-card；悬停时上移 6px、换 shadow-lift（减少动态效果时不动）。
   价格数字：每位一条 0–9 的竖排滚轮（.reel），切换币种时 900ms 弹性滚到新值。 */
.pricing { padding: var(--section-y) 0; background: var(--surface); }
.pricing-inner { display: flex; flex-direction: column; gap: 40px; }
.pricing-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pricing-titles { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.eyebrow { font-size: var(--fs-note); font-weight: 600; line-height: 1.4; color: var(--accent-pressed); }
.pricing-lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
.pricing-note { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); text-align: center; }

/* 币种切换：胶囊形分段按钮，选中的那段白底加 shadow-seg。 */
.seg { display: inline-flex; flex: none; padding: 4px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--pill); }
.seg-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-note);
  font-weight: 500;
  cursor: pointer;
}
.seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-seg); }

/* 价格数字 */
.amount-symbol { font-weight: 500; }
.amount { display: inline-flex; }
.amount-digits { display: inline-flex; font-variant-numeric: tabular-nums; }
.digit { display: inline-block; height: 1.12em; overflow: hidden; }
.reel { display: block; }
.reel-n { display: block; height: 1.12em; line-height: 1.12em; }
.amount-sep { display: inline-block; height: 1.12em; line-height: 1.12em; }
.amount-per { color: var(--muted); }

/* 组合方案卡片 */
.bundle-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bundle {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.bundle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.bundle-name { font-family: var(--font-body); font-size: var(--fs-stage); font-weight: 600; line-height: 1.4; color: var(--ink); }
.bundle-badge { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--mint-soft); color: var(--mint); font-size: var(--fs-small); font-weight: 600; line-height: 1.5; }
.bundle-desc { font-size: var(--fs-note); line-height: 1.7; color: var(--muted); }
.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--ink); }
.bundle-price .amount-symbol { font-size: 22px; }
.bundle-price .amount { font-size: 48px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.bundle-price .amount-per { font-size: var(--fs-note); }
.bundle-alt { margin-top: -8px; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.bundle-quota { padding-top: 18px; border-top: 1px solid var(--hairline); font-size: var(--fs-note); font-weight: 600; line-height: 1.6; color: var(--ink); }
.bundle-facts { gap: 12px; }
.bundle-facts .fact { font-size: var(--fs-note); }
.bundle-buy { width: 100%; margin-top: auto; }

.bundle-featured { border-color: var(--ink); background: var(--ink); box-shadow: var(--shadow-featured); }
.bundle-featured .bundle-name,
.bundle-featured .bundle-price,
.bundle-featured .bundle-quota { color: var(--surface); }
.bundle-featured .bundle-desc,
.bundle-featured .bundle-alt,
.bundle-featured .amount-per { color: var(--on-dark-muted); }
.bundle-featured .bundle-quota { border-top-color: var(--on-dark-line); }
.bundle-featured .fact { color: var(--on-dark-2); }
.bundle-featured .fact-icon { background: var(--mint-soft); color: var(--mint); }
.bundle-buy-light { background: var(--surface); color: var(--ink); }
.bundle-buy-light:active { background: var(--ground); }

/* 单品 */
.singles { display: flex; flex-direction: column; gap: 32px; padding-top: 48px; border-top: 1px solid var(--hairline); }
.singles-head { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.singles-title { font-size: var(--fs-h2-alt); }
.single-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.single-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 24px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.single-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; }
.single-name { font-family: var(--font-body); font-size: 20px; font-weight: 600; line-height: 1.4; }
.single-tag { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.single-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 -12px;
  padding: 16px 12px;
  border-top: 1px solid var(--hairline);
  border-radius: var(--r-node);
  color: var(--ink);
  text-decoration: none;
}
.single-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.single-plan { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; }
.single-summary { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.single-price { display: inline-flex; flex: none; align-items: baseline; gap: 4px; }
.single-price .amount-symbol { font-size: var(--fs-small); }
.single-price .amount { font-size: 22px; line-height: 1; font-weight: 600; }
.single-price .amount-per { font-size: var(--fs-small); }
.single-row .icon-arrow { flex: none; color: var(--muted); }

/* 下单页的套餐摘要（64-checkout.js 用 .plan-*） */
.plan-name { font-size: var(--fs-stage); font-weight: 600; line-height: 1.5; color: var(--ink); }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.plan-amount { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-per { font-size: var(--fs-note); line-height: 1.4; color: var(--muted); }
.plan-alt { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-desc { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }
.plan-facts { gap: 10px; padding-top: 4px; }
.plan-facts .fact { font-size: var(--fs-note); }

@media (min-width: 768px) {
  .pricing-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .bundle-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .single-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bundle { padding: 32px 28px; }
  .single-card { padding: 28px 28px 12px; }
}

@media (min-width: 1024px) {
  .pricing-inner { gap: 48px; }
  .pricing-titles { gap: 14px; }
  .pricing-title { font-size: 52px; }
  .bundle-list { gap: 20px; }
  .bundle { padding: 32px; }
  .bundle-price .amount { font-size: 56px; }
  .singles { gap: 40px; padding-top: 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  .reel { transition: transform 900ms var(--ease-spring); }
  .bundle, .single-card { transition: transform 550ms var(--ease-out), box-shadow 550ms var(--ease-out); }
  .seg-btn { transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), box-shadow 300ms var(--ease-out); }
  .single-row { transition: background-color 250ms ease-out; }
  .single-row .icon-arrow { transition: transform 350ms var(--ease-out); }
}
@media (hover: hover) {
  .single-row:hover { background: var(--hero-ground); }
  .bundle-buy-light:hover { background: var(--ground); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bundle:hover, .single-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
  .bundle-featured:hover { box-shadow: var(--shadow-featured); }
  .single-row:hover .icon-arrow { transform: translateX(3px); }
}

/* ---- 70-about.css ---- */
/* 关于維達信（design/gen_c.py 的 about）与「聊聊合作」共用的左右分栏 .split：≥1024px 12 列栅格，左 5 列（右留 32）、
   右 7 列；更窄时上下排列。区块标题 48/30（规格第 4 节「关于、联系」）。
   公司信息：每行上边一条 line-2 细线，最后一行下边也有；≥768px 标签列 180px、间距 24、上下 20；更窄时标签在值上方。 */
.about { padding: var(--section-y) 0; background: var(--surface); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.split-intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.section-title-alt { font-size: var(--fs-h2-alt); line-height: 1.2; letter-spacing: 0; }
.intro-text { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }

.facts-table { min-width: 0; border-bottom: 1px solid var(--line-2); }
.facts-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.facts-row dt { font-size: var(--fs-note); line-height: 1.6; color: var(--muted); }
.facts-row dd { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.facts-line { display: block; }

@media (min-width: 768px) {
  .facts-row { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 20px 0; }
}

@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; align-items: start; }
  .split-intro { grid-column: span 5; gap: 24px; padding-right: 32px; }
  /* .split 的右栏在「关于」是 .facts-table、在「聊聊合作」是 .contact-side，两个页面用的是同一个 .split 布局但
     右栏元素不同，写明确类名而不是 :last-child（代码审查 2026-09-29，和模板的类名对齐，模板没改）。 */
  .facts-table, .contact-side { grid-column: span 7; }
}

/* ---- 80-contact.css ---- */
/* 聊聊合作（design/gen_c.py 的 contact、field、choice_group）：ground 底。左栏说明与「也可以直接写信」（上边 line-2 细线，
   邮箱 24px 带下划线 + 44px 描边复制按钮）；右栏白底表单卡（16px 圆角，内边距手机 20、768 起 32、1024 起 40）。
   表单：<768px 所有字段单列（规格第 3 节）；≥768px 称呼与公司、邮箱与其他联系方式两两并排，间距 20。
   输入框高 48、1px line-input 边框、8px 圆角、16px 字（手机上也是 16px，iOS 聚焦不放大）；出错时边框和文字用 danger。
   选项是 44px 高的描边块，原生单选/复选框 18px、accent-color。 */
.contact { padding: var(--section-y) 0; background: var(--ground); }

.direct { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.direct-label { font-size: var(--fs-note); line-height: 1.6; color: var(--muted); }
.direct-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 下划线样式（粗细、颜色、偏移、悬停/按下变深）与 .text-link 共用，写在 10-base.css，这里只留字号这些自己独有的。 */
.direct-email {
  min-width: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.contact-side { min-width: 0; }
/* 白底卡片（询盘表单、下单页、订单页共用；2026-10-10 改版：r-card 圆角、hairline 描边、shadow-card） */
.form-card { padding: 20px; border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-card); }
.nojs-notice { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); }

.inquiry-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { display: flex; align-items: baseline; gap: 8px; padding: 0; font-size: var(--fs-note); font-weight: 500; line-height: 1.4; color: var(--ink); }
legend.field-label { margin-bottom: 8px; }
.field-need { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  appearance: none;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.textarea { min-height: 132px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.has-error .input, .has-error .choice { border-color: var(--danger); }
.field-error { font-size: var(--fs-small); line-height: 1.6; color: var(--danger); }

.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-btn);
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}
.choice input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }

/* 陷阱字段：移到屏幕外（不用 display: none：有的机器人会跳过不显示的字段）。 */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.form-privacy { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

.form-failure { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.result-message { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; color: var(--ink); }
.fallback { display: flex; flex-direction: column; gap: 12px; }
.fallback-text { min-height: 220px; font-variant-numeric: tabular-nums; }
.fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fallback-actions .btn { min-height: 44px; padding: 0 14px; font-size: var(--fs-note); }
.form-success .result-message { font-size: 17px; }

@media (min-width: 768px) {
  .form-card { padding: 32px; }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .form-foot { flex-direction: row; align-items: center; gap: 20px; }
  .direct-email { font-size: 24px; }
}

@media (min-width: 1024px) {
  .form-card { padding: 40px; }
}

/* ---- 85-shop.css ---- */
/* 下单页、订单页（shop.html.j2）：ground 底，内容是一张张白底卡片（.form-card，80-contact.css）。
   顶栏是简版（只有文字标志），右边加一个语言切换链接（.shop-lang，手机上也显示）。
   下单页 ≥1024px 左右两栏：左边套餐、付款方式、联系方式，右边合计卡吸顶；更窄时合计卡排在最后。
   订单页单栏，最宽 880px。资料表（.info-list）手机上标签在上、值在下，768 起左右排。
   二维码放在白底细线框里（扫码需要四周留白，SVG 本身已经留了 4 个模块）。 */
.shop { padding: 32px 0 64px; background: var(--ground); }
.shop-inner { display: flex; flex-direction: column; gap: 24px; }
.shop-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.shop-title { font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.shop-lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
.shop-status { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.shop-status-text { font-size: var(--fs-body); line-height: 1.75; color: var(--ink); }

.shop-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
}
.shop-lang:active { color: var(--ink); }

.card-title { padding: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.card-lead { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }
.checkout-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.checkout-methods { display: block; margin: 0; }
/* fieldset 的 legend 默认压在描边上：浮动后它就成了普通的块，留在卡片里面 */
.checkout-methods .card-title { float: left; width: 100%; margin-bottom: 16px; }
.checkout-methods .method-list { clear: both; }
.checkout-methods .field-hint, .checkout-methods .field-error { margin-top: 12px; }

.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.checkout-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.checkout-side { min-width: 0; }
.plan-summary { display: flex; flex-direction: column; gap: 10px; }
.input-qty { max-width: 220px; font-variant-numeric: tabular-nums; }
.field-hint { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }

.method-list { display: flex; flex-direction: column; gap: 10px; }
.method-choice { display: flex; width: 100%; min-height: 56px; padding: 8px 16px; }
.method-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.method-text { display: flex; flex: 1; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; min-width: 0; }
.method-name { font-weight: 500; color: var(--ink); }
.method-price { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sum { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--fs-note); line-height: 1.5; color: var(--ink-2); }
.sum-row dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.sum-total { padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.sum-total dd { font-size: 22px; font-weight: 700; }
.checkout-total .btn { width: 100%; }
.form-error { font-size: var(--fs-note); line-height: 1.6; color: var(--danger); }

.order { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.order-state { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-tag);
  background: var(--chip);
  color: var(--ink);
  font-size: var(--fs-note);
  font-weight: 700;
  line-height: 1.2;
}
.badge-awaiting_payment, .badge-submitted { background: var(--accent-soft); color: var(--accent-pressed); }
.badge-paid { background: var(--accent); color: var(--surface); }
.badge-rejected { color: var(--danger); }
.order-state-text { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); }
.order-reason { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-left: 3px solid var(--danger); background: var(--ground); }
.order-reason-label { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.order-reason-text { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); white-space: pre-line; }

.info-list { display: flex; flex-direction: column; margin: 0; }
.info-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.info-row:first-child { padding-top: 0; border-top: 0; }
.info-row dt { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.info-row dd { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.copy-value { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-text { min-width: 0; font-weight: 500; }

.order-keep { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.order-keep-text { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }

.pay-body { min-width: 0; }
.pay-fps, .pay-code, .pay-bank { display: flex; flex-direction: column; gap: 24px; }
.pay-qr {
  align-self: center;
  width: 100%;
  max-width: 260px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-node);
  background: var(--surface);
}
.qr { width: 100%; height: auto; color: var(--ink); }
.pay-code-img { width: 100%; height: auto; }
.pay-info { display: flex; flex: 1; flex-direction: column; gap: 16px; min-width: 0; }
.pay-lead { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; color: var(--ink); }
.pay-hint, .pay-notice { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }
.pay-notice { padding-top: 16px; border-top: 1px solid var(--line); white-space: pre-line; }

.receipt-count { font-size: var(--fs-note); font-weight: 500; line-height: 1.6; color: var(--ink); }
.receipt-form { display: flex; flex-direction: column; gap: 20px; }
.input-file {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px dashed var(--line-input);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-note);
}
.form-success-text { font-size: var(--fs-body); font-weight: 600; line-height: 1.6; color: var(--accent-pressed); }
.order-help { font-size: var(--fs-note); line-height: 1.75; color: var(--ink-2); }

@media (min-width: 768px) {
  .shop { padding: 48px 0 80px; }
  .info-row { grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 16px; }
  .pay-fps, .pay-code { flex-direction: row; align-items: flex-start; }
  .pay-qr { flex: none; align-self: flex-start; width: 240px; }
}

@media (min-width: 1024px) {
  .shop { padding: 64px 0 96px; }
  .checkout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .checkout-side { position: sticky; top: 24px; }
}

@media (hover: hover) {
  .shop-lang:hover { color: var(--ink); }
}

/* ---- 90-footer.css ---- */
/* 页脚（design/gen_c.py 的 footer）：白底、上边 line 细线、上下 40。左边文字标志（18px）与版权小字，右边邮箱和语言，
   13px；当前语言 ink 加粗，其余 ink-2。手机上两块上下排，链接可点区域 44px 高。 */
.site-footer { padding: 40px 0; border-top: 1px solid var(--line); background: var(--surface); }
.footer-inner { display: flex; flex-direction: column; gap: 16px; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wordmark-sm { padding: 0; }
.wordmark-sm .wordmark-primary { font-size: 18px; }
.wordmark-sm .wordmark-secondary { font-size: 12px; }
.footer-copy { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
/* 「香港公司编号」「Hong Kong Company No.」整体不断行；它和编号之间可以换行（_footer.html.j2）。 */
.footer-no { white-space: nowrap; }
.footer-links { display: flex; flex-wrap: wrap; column-gap: 24px; }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: none;
}
.footer-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.footer-link:active { color: var(--ink); text-decoration: underline; }
@media (hover: hover) {
  .footer-link:hover { color: var(--ink); text-decoration: underline; }
}

@media (min-width: 768px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 32px; }
  .footer-links { flex: none; }
  .footer-link { min-height: 0; }
}

/* ---- 95-404.css ---- */
/* 404 页：点阵底（30-hero.css 的 .nf）上下两块，上中文、下英文，中间一条 line-2 细线。标题用区块标题的字号。 */
.nf { padding: var(--section-y) 0; }
.nf-inner { display: flex; flex-direction: column; gap: 48px; }
.nf-block { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 640px; }
.nf-block + .nf-block { padding-top: 48px; border-top: 1px solid var(--line-2); }
.nf-title { font-size: var(--fs-h2-alt); line-height: 1.2; font-weight: 700; color: var(--ink); }
.nf-text { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
.nf-block .btn { margin-top: 8px; }