/* 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.3bde431e.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;
}

/* 英文首屏标题小一档（规格第 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%);
}

/* 按钮：主按钮 accent 底白字，次要按钮白底描边；圆角 8px，不做胶囊形；只变颜色，不位移不放大。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  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(--accent); color: var(--surface); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { padding: 0 28px; background: var(--surface); color: var(--ink); border-color: var(--line-input); }
.btn-secondary:active { background: var(--ground); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-pressed); }
  .btn-secondary:hover { background: var(--ground); }
}
.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; }
  .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; }
}

/* ---- 20-header.css ---- */
/* 顶栏（design/gen_c.py 的 nav 与 mobile）：手机高 64px、左 20 右 12（菜单按钮往右收 8px），≥1024px 高 80px。
   吸顶；在首屏顶上时和首屏共用点阵底（30-hero.css），滚动后脚本加 is-scrolled，换成白底。底部细线一直在（画布如此）。
   <1024px：横排导航隐藏，显示菜单按钮（脚本启动后才显示）；菜单面板在顶栏下方整宽展开，外面一层透明点击层。 */
/* background-color 由 30-hero.css 的 .site-header, .hero, .nf 共用规则给（含点阵底），这里不重复写一遍
   （代码审查 2026-09-29：两处同值，后加载的 30-hero.css 本来就会覆盖，删掉这条死代码）。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
}
.site-header-simple { position: static; }
.header-inner {
  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; align-items: center; gap: 32px; }
  .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-link:active { color: var(--ink); }
  .nav-lang { padding-left: 24px; border-left: 1px solid var(--line); }
  .menu-btn, .menu, .menu-backdrop { display: none; }
}

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

/* ---- 30-hero.css ---- */
/* 首屏（design/gen_c.py 的 hero 与 mobile）。
   点阵：ground 底上 1px 的 dot 色圆点，间距 24px，是全站唯一的底纹，也是全站唯一的 radial-gradient（规格第 4 节）。
   顶栏在首屏顶上时用同一张点阵；首屏的点阵往上错开一个顶栏高度，和顶栏里的点连成一片。404 页的正文也用它。
   滚动后顶栏换成白底（is-scrolled，由 20-nav.js 加上）。 */
.site-header,
.hero,
.nf {
  background-color: var(--ground);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.hero, .nf { background-position: 0 calc(0px - var(--header-h)); }
.site-header.is-scrolled { background-color: var(--surface); background-image: none; }

/* 手机：上 36、下 48；标题、导语、按钮间距 18px（按钮再下移 4px）；工作流在按钮下 32px（画布 mobile）。
   ≥1024px：上 72、下 96；标题块与按钮左右排、底对齐，间距 48；工作流在下面 64px；两条工作流间距 40。 */
.hero { padding: 36px 0 48px; }
.hero-head { display: flex; flex-direction: column; gap: 22px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero-title { font-size: var(--fs-hero); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
/* 标题两行各是一个块，text-wrap: balance（10-base.css，继承下来）按块各自平衡。英文手机宽度两段都要折行，各自平衡后
   390 宽排成 4 行「From idea / to published, / one AI / production line」，「one AI」一行特别短。<768px 英文两段接成
   一段整体平衡：390 宽排成 3 行「From idea to / published, one AI / production line」。≥768px 两段各自放得下一行，
   照画布每段一行。中文不接：中文逐字可断，接起来平衡会把「一条」这样的词拆到两行；中文手机上本来就是两行。 */
.hero-line { display: block; }
[data-lang="en"] .hero-line { display: inline; }
.hero-lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink-2); }
/* <360px：两个按钮英文文字都装不下（哪怕等分 + 12px 内边距），纵向排列各占一行，不横向挤压
   （T17 实测 2026-09-29；390 宽两个按钮要等宽横排，见下面 360 断点）。 */
.hero-actions { display: flex; flex-direction: column; gap: 12px; }
.hero-actions .btn { padding: 0 16px; }

.lanes { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.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) {
  /* ≥360px 起横排；flex: 1 1 0 + min-width: 0 强制两个按钮等宽（不管各自文字多长），12px 内边距让英文
     「Explore products」在等分宽度里也放得下（T17 实测：之前 min-width: 0 一起删掉后英文两个按钮不等宽，
     166 对 172）。<1024px 都用这个等分写法，≥768px 起再按下面的规则放大到内容自然宽度。 */
  .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 .btn { flex: none; padding: 0 32px; }
  .hero-actions .btn-secondary { padding: 0 28px; }
}

@media (min-width: 1024px) {
  .hero { padding: 72px 0 96px; }
  .hero-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
  .hero-copy { gap: 24px; max-width: 720px; }
  [data-lang="en"] .hero-copy { max-width: 820px; }
  .hero-title { line-height: 1.14; }
  .hero-actions { flex: none; gap: 16px; padding-bottom: 6px; }
  .lanes { gap: 40px; margin-top: 64px; }
  .lane { gap: 16px; }
  /* 英文首屏标题字号更大（76/68）、词更长，1024–1439 两栏并排会把左边标题栏挤得太窄，标题被迫换成 3–5 行；
     英文保持上下排到 1440（画布本就是 1440 宽验证的），中文不受影响，和其余手机档属性一致（代码审查 2026-09-29）。 */
  [data-lang="en"] .hero-head { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 22px; }
}

@media (min-width: 1440px) {
  [data-lang="en"] .hero-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
}

/* ---- 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); }

.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; }
}

/* ---- 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; }
.form-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.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; }
}

/* ---- 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; }