/*
 * 品牌站 libokang.com 的全站样式。
 *
 * 构建时带内容 hash 输出为 /assets/brand.<hash>.css，各页 link 引用。之所以不再内联进
 * HTML：站点已经是多页（首页 15 语种 + 4 个板块介绍页 + 30 个法律页 + about + 404），
 * 内联等于每页重复一份，而外链只下载一次、后续全站命中缓存；改版期间它也终于是一个
 * 能被编辑器和 lint 认识的真 CSS 文件。
 *
 * 配色取自应用的设计令牌 src/shared/styles/tokens.css，与「康」字印章同色系。
 * 字体只用系统栈：public/fonts 下那份思源宋体子集是按应用界面用字切的，
 * 装不下本站 15 语种（尤其泰语、韩语）的字，缺字回退会造成同一行里字体混排。
 */

/*
 * 首页大标题的两份自托管字体，由 scripts/brand-site/build-hero-fonts.py 生成。
 * 都是按标题逐字切的极小子集，所以**只能**用在首页那一句大标题上，别处套用会大面积缺字回退。
 *
 * Hero CJK 是鴻雷板書體（12 字形 6KB），中文与全角标点用它。
 * Hero Latin 是 Great Vibes（18 字形 3KB），英文标题用它。
 *
 * size-adjust —— Great Vibes 的 x 高只有 335/1000，同字号下比中文书法体小一大截，
 * 放大到 140% 才与中文标题看着一般大。它只影响这一个字族，不动 font-size 就不会牵动
 * 标题的行高与外边距。
 *
 * font-display: block —— 大标题是首屏最醒目的一行，用 swap 会先闪一下系统字体再跳成书法体，
 * 配合逐字渐显尤其明显。两份加起来 9KB 且在 head 里预载，阻塞期实际几乎为零。
 */
@font-face {
  font-family: "Hero CJK";
  src: url("/fonts/hero-cjk.woff2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "Hero Latin";
  src: url("/fonts/hero-latin.woff2") format("woff2");
  font-display: block;
  size-adjust: 140%;
}

:root {
  /* 应用令牌 */
  --ink: #1f1b16;
  --muted: #8f6f4c;
  --accent: #ec631f;
  --bg: #faf9f5;
  --surface: #fff;

  /* 由令牌派生：#cab49f 满强度用作大面积描边偏重，按用途分三档 */
  --line: #e3d7c9;
  --line-strong: #cab49f;
  --tint: #fdf3ec;
  --accent-ink: #c44a0d;

  /*
   * 墨色：只服务中道板块与它压着的那段顶栏。两者必须同色，顶栏反色后才能与板块连成
   * 一片，所以提到令牌里共用；除此之外别处不该引用，否则这套暗色会漫到整站。
   */
  --ink-bg: #17120d;
  --ink-fg: #f0e6d6;
  --ink-gold: rgba(212, 180, 126, 0.82);

  /* 首屏底部那段入口引导的高度。Hero 的高度按它反算，两者必须同源。 */
  --enter-h: 132px;

  /*
   * 栅格对齐 openai.com：实测它在 1280 与 1512 两个视口下内容块宽度都等于视口宽，
   * 左右各 32px，即「满宽不封顶」而非居中定宽容器；Hero 输入框固定 700px。
   * 这里给 1920 的上限只是为了超宽屏不至于把卡片拉到失控——在 1920 以下的任何宽度上，
   * 表现与满宽完全一致，所以观感与 openai.com 相同。
   * 正文另有窄栏（--maxw-text / --maxw-prose），满宽只作用于顶栏、卡片这类结构元素，
   * 段落行长仍受控，否则宽屏下一行七八十个字会没法读。
   */
  --maxw: 1920px;
  --maxw-text: 76rem;
  --maxw-prose: 46rem;
  --gutter: 20px;

  --radius: 12px;
  --radius-lg: 18px;

  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", Georgia, serif;
  /*
   * 大字（首屏标题、老师那句同行）。书法体盖不到的文字整句退回衬线体——
   * 覆盖规则由构建按语种表的 noDisplayFont 生成，见 locales.mjs 与 writeCss。
   */
  --font-display: "Hero Latin", "Hero CJK", var(--font-serif);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Source Han Sans SC",
    "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  --header-h: 52px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --enter-h: 176px;
  }
}

/*
 * 触屏点按不要那层浏览器默认的高亮方块。
 *
 * 移动端 WebKit / Blink 在点按可交互元素时会照 border-box 盖一层半透明蓝，圆角按钮上尤其
 * 露馅——盖出来的是直角矩形，且把橙色主按钮压成一块脏褐色。全站一律取消，与应用侧同规
 * （见 src/shared/styles/global.css）。
 *
 * 写在通配选择器上而不是 a / button 上：站内可点的还有卡片、语言弹层的 li、九门盘面里的格子
 * 这些非按钮元素，逐个列必然漏。属性可继承，但子元素若被别处显式赋值仍会漏，通配最省事。
 *
 * ⚠️ 必须留在 @pages-only 标记之外（即「外壳」那一半）：内容层那四千多页只加载 brand-chrome
 * 这一份样式表，挪进 pages-only 段落它们就又有高亮了。build-legal-static.mjs 的 writeCss
 * 有一道闸门守着这条规则，删掉会直接让构建失败。
 *
 * 键盘可见焦点不受影响：:focus-visible 的轮廓另有规则，不能用取消焦点的方式消高亮。
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

/* 锚点跳转不要被 sticky 顶栏盖住标题 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap.prose {
  max-width: calc(var(--maxw-prose) + var(--gutter) * 2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── 顶栏 ─────────────────────────────────────────────── */

/*
 * 顶栏与页面同色（--bg），整宽下拉面板也用同一个色值，两者衔接处不留色差。
 *
 * 刻意不用 backdrop-filter 做毛玻璃：带 backdrop-filter 的元素会成为其
 * position:fixed 后代的包含块，整宽下拉的蒙层就会被压缩成只有顶栏那么高，蒙不住页面。
 *
 * 分隔线只在滚动后出现（.scrolled 由 CHROME_SCRIPT 切换）。停在页顶时顶栏与页面同色、
 * 无线条，视觉上是一整块；内容滚到它下面时才需要一条线交代层次。
 * 用内阴影而不是 border：border 会把顶栏撑到 --header-h + 1px，而首屏
 * 「Hero 高度 = 一屏 − 入口引导 − 顶栏」这道算式要求这个令牌就是它的真实高度。
 *
 * --nav-ink 是「顶栏有多少已经落在墨色板块上」，0 到 1，由 CHROME_SCRIPT 逐帧写。
 * 文字、字标、按钮都照它过渡，所以换装是跟着滚动一起走的：滚到板块占满屏幕时已经换完，
 * 落地之后不再补动画。也正因为逐帧在写，这些属性一律不能加 transition，
 * 加了就始终慢半拍。没有墨色板块的页面上它恒为 0，一切保持米色底那一套。
 */
header.site {
  --nav-ink: 0;

  position: sticky;
  top: 0;
  z-index: 50;
  /* 前一条是给不认 color-mix 的浏览器的：那里顶栏一直是米色，不跟着换装但不会透底。 */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) calc((1 - var(--nav-ink)) * 100%), transparent);
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.18s ease;
}

/*
 * 分隔线也吃 --nav-ink：压在墨色板块上时淡到全无（那里顶栏与板块要连成一片，
 * 多一条线就把它割出来了），退回米色段落就实实在在画出来。
 *
 * 不用 .on-ink 那个过半才翻的开关：那样线会在交界处闪一下才消失。跟着进度淡，
 * 与底色同步。
 */
header.site.scrolled {
  box-shadow: inset 0 -1px 0 var(--line);
  box-shadow: inset 0 -1px 0
    color-mix(in srgb, transparent calc(var(--nav-ink) * 100%), var(--line));
}

/*
 * 文字跟着 --nav-ink 在墨色板块的字色与正文墨色之间过渡，与底色同一个进度，
 * 所以不需要也不能加 transition——加了就和底色错开。
 */
header.site nav.primary > a,
header.site .menu-trigger {
  color: var(--ink);
  color: color-mix(in srgb, var(--ink-fg) calc(var(--nav-ink) * 100%), var(--ink));
}

header.site.on-ink nav.primary > a:hover,
header.site.on-ink .menu-trigger:hover {
  background: rgba(240, 230, 214, 0.1);
}

/*
 * 墨色上的主按钮脱掉橙色实底，改成描边式。
 * 橙色是米色底上的强调色，压到墨色渐变上就成了一块与整节无关的亮斑，比顶栏其余部分
 * 都抢眼；描边之后分量还在，但让位给「中道」二字。
 *
 * 同样吃 --nav-ink 而不是 .on-ink：它是顶栏上最亮的一块，若在半途某一刻整个跳变，
 * 旁边的字都在平滑过渡，就它一个人在闪。
 */
header.site .actions .btn-primary {
  background: color-mix(in srgb, transparent calc(var(--nav-ink) * 100%), var(--accent));
  border-color: color-mix(
    in srgb,
    rgba(240, 230, 214, 0.38) calc(var(--nav-ink) * 100%),
    var(--accent)
  );
  color: color-mix(in srgb, var(--ink-fg) calc(var(--nav-ink) * 100%), #fff);
}

header.site.on-ink .actions .btn-primary:hover {
  background: rgba(240, 230, 214, 0.12);
  border-color: rgba(240, 230, 214, 0.6);
}


header.site .bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
}

header.site .brand {
  /* 字标高度。印章的落点从它推算（见 .mark-seal），改尺寸只动这一处。 */
  --mark-h: 22px;

  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

header.site .brand:hover {
  text-decoration: none;
}

/* Libo 字标：按高度定尺寸，宽度随原始 84×33 比例走。 */
header.site .brand .mark {
  display: block;
  height: var(--mark-h);
  width: auto;
}

/*
 * 「康」印章：悬在字标右上角，位置如商标的 ®。字标从不单独出现，这枚印是品牌标识的另一半
 * （HTML 见 chrome.mjs 的 brandMark，它把两张图一起吐出来，没有只出字标的分支）。
 *
 * 几何照应用顶栏那套按字标高度 H 等比换算（见 src/shared/brand/BrandWordmark.module.css：
 * H=30 时印宽 11px、左缘在字标右缘外 2px、上沿探出 1px，即 0.367H / 0.067H / 0.033H）。
 * 这里 H=22，严格按比例是 8×9.4px，那么小的篆字已经认不出是「康」，放到 9px 宽
 * （高随源图 89×104 的比例约 10.5px）；间距与上探取 1.5px / 1px，® 的味道不变。
 * HTML 上的 width/height 只给浏览器占位比例，显示尺寸由这里定。
 *
 * 纵向锚在字标而不是 .brand 盒的上沿：字标在 .brand 里居中（align-items:center），
 * 「字标上沿」= 中线 − 半个 --mark-h，再往上探 1px。今天 .brand 与字标同高，两种写法结果
 * 一样；将来若有东西把 .brand 撑高，印章仍咬着字标不动。横向以 .brand 的右缘起算——它是
 * flex:none 的弹性盒，宽度就是字标的宽度（浅色那份脱离文档流盖在上面，不占宽）。
 *
 * 不吃 --nav-ink，也不能沾 .mark 这个类：橙色压在米色与墨色顶栏上都成立，深浅两份字标
 * 交叉淡入时它原地不动，只出这一份，所以这里刻意不写 opacity。
 *
 * 向右探出 10.5px，落在 .bar 那 1.5rem 的 gap 里，够不着主导航；窄屏下主导航整条收起，
 * 右边只剩推到最右的试用按钮，更宽裕。.brand / .bar / .wrap / header 都没有 overflow 裁切，
 * 探出去的部分不会被切掉。纯装饰，不响应鼠标也不让选中。
 */
header.site .brand .mark-seal {
  position: absolute;
  left: calc(100% + 1.5px);
  top: calc(50% - var(--mark-h) / 2 - 1px);
  width: 9px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/*
 * 深浅两份字标都在 DOM 里叠着，按 --nav-ink 交叉淡入——img 的 src 换不了，
 * 换了也会闪一下白；用 display 切又是硬跳，和旁边平滑过渡的字色对不上。
 * 浅色那份脱离文档流盖在深色那份上，两者同尺寸，所以严丝合缝。
 */
header.site .brand .mark {
  opacity: calc(1 - var(--nav-ink));
}

header.site .brand .mark-light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: var(--nav-ink);
}

header.site nav.primary {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
}

header.site nav.primary > a,
header.site .menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  /* 字色由上面那条 --nav-ink 的 color-mix 规则给，这里不再写死，否则会把它盖掉。 */
  font-family: inherit;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
}

header.site nav.primary > a:hover,
header.site .menu-trigger:hover,
.mega-menu:hover .menu-trigger,
.mega-menu:focus-within .menu-trigger {
  background: var(--tint);
  text-decoration: none;
}

/*
 * 顶栏的「试用」按钮比正文 CTA 更轻：不加粗、上下内边距更小，
 * 免得一个胶囊在 53px 高的顶栏里显得过于笨重。
 */
header.site .actions .btn {
  padding: 0.3rem 0.95rem;
  font-weight: 500;
}

header.site .actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex: none;
}

@media (min-width: 900px) {
  header.site nav.primary {
    display: flex;
  }
}

/* ── 产品整宽下拉：悬停展开，其余页面蒙一层模糊 ── */

.mega-menu {
  display: inline-flex;
}

/*
 * 面板与蒙层默认不可见但保留在流外。用 visibility + opacity 而不是 display:none，
 * 是为了能做淡入过渡；visibility 一并切换保证收起时不会截获鼠标事件。
 */
.mega,
.mega-menu .scrim {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s;
}

.mega-menu:hover .mega,
.mega-menu:focus-within .mega,
.mega-menu:hover .scrim,
.mega-menu:focus-within .scrim {
  opacity: 1;
  visibility: visible;
}

/*
 * 蒙层盖住顶栏以下的整个视口。它在 header 内部，因此自动位于页面内容之上。
 * pointer-events:none 不能省：蒙层是 .mega-menu 的后代，若能接收鼠标事件，
 * 指针移到页面任意位置都仍算「悬停在菜单内」，菜单就再也收不起来。
 */
.mega-menu .scrim {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(31, 27, 22, 0.28);
  backdrop-filter: blur(3px);
}

/*
 * 面板定位到 header 底边。header 是 sticky（本身即定位包含块），而 .mega-menu 不定位，
 * 所以这里的 left/right:0 相对整个 header 展开，铺满视口宽度，不受顶栏容器 max-width 约束。
 */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /*
   * 与顶栏同色，两者之间不出现色带。面板边界靠下方蒙层的明暗差交代，不需要描边。
   *
   * 也不给投影，与窄屏那个抽屉同一个理由：投影的模糊尾巴会往上洇进顶栏，在两者交界处压出
   * 一道由暗回亮的台阶，看着就是一条分割线（详见 .mnav-panel 那一段）。
   */
  background: var(--bg);
}

/*
 * 菜单一展开，顶栏就退回米色那一套。两层菜单共用这一条：宽屏是产品整宽下拉，
 * 窄屏是三横抽屉（.mnav，规则在下面那一节，判据不同但要办的是同一件事）。
 *
 * 「与顶栏同色」这句话，只在顶栏确实是米色时才成立。顶栏会跟着背后的墨色板块一起变透明
 * （--nav-ink，见 header.site），为的是与那一节连成一片；可菜单一展开，它底下压着的已经不是
 * 页面而是一整块米色的面板——顶栏还透着，透出来的是板块的墨色，于是上半截黑、下半截米，
 * 交界处那道色差看着正像一条分割线。滚动态那条发丝线也一并撤掉，两截才真的是一块面。
 *
 * --nav-ink 是脚本逐帧写在 header 行内的，常规声明压不过行内样式，只能 !important；
 * 没有脚本时它恒为 0，这两条也就无事发生。
 *
 * background 那句不是多余的。把 --nav-ink 归零之后，顶栏算出来是
 * `color(srgb 0.980392 0.976471 0.960784)`，面板是 `rgb(250, 249, 245)`——数值一模一样，
 * 写法却是两种：前者是 color-mix() 产出的、走色彩管理的值，后者是老式 sRGB。到了广色域屏上
 * （P3 的 Mac、带厂商色彩配置的 Windows）这两条路各转各的，同一个数就落成肉眼看得出的两种米色，
 * 交界处于是又「长」出一条线来。这里把顶栏钉回与面板同一种写法，两块才真的是一块。
 */
header.site:has(.mega-menu:hover),
header.site:has(.mega-menu:focus-within) {
  --nav-ink: 0 !important;
  background: var(--bg);
  box-shadow: none;
}

.mega-inner {
  display: grid;
  gap: 2rem 3rem;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .mega-inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
}

.mega-head {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mega-grid {
  display: grid;
  gap: 0.25rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.mega-grid a {
  display: block;
  padding: 0.5rem 0.7rem;
  margin-left: -0.7rem;
  border-radius: 8px;
  color: var(--ink);
}

.mega-grid a:hover {
  background: var(--tint);
  text-decoration: none;
}

.mega-grid .t {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.mega-grid .d {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.mega-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-side li {
  margin: 0 0 0.35rem;
}

.mega-side a {
  color: var(--ink);
  font-size: 0.92rem;
}

/* 外链到应用的板块，标一个角标，避免用户以为还在官网内 */
.mega-grid a.ext .t::after,
.mnav-list a.ext::after,
.footer-col a.ext::after {
  content: "↗";
  margin-left: 0.3rem;
  font-size: 0.85em;
  opacity: 0.55;
}

/* ── 窄屏：三横目录 ───────────────────────────────────── */

/*
 * 900px 以下主导航整条收起（见上面 nav.primary 那条媒体查询），顶栏就只剩字标与试用按钮，
 * 产品、关于、下载三处都够不着。这个抽屉把它们原样放回来，与主导航互为表里：
 * 一个出现，另一个就退场。
 *
 * 结构是 <details> + <summary>（见 chrome.mjs 的 renderMobileNav），所以下面只画外观，
 * 开合交给浏览器。
 */
.mnav {
  display: none;
}

@media (max-width: 899px) {
  .mnav {
    display: block;
    /* 紧挨着试用按钮。.actions 带 margin-left:auto，两者一起被推到最右。 */
    flex: none;
    margin-left: 0.15rem;
  }
}

.mnav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: calc(var(--gutter) * -0.4);
  border-radius: 8px;
  cursor: pointer;
  /* 去掉 <summary> 默认那个小三角：这里的记号是三条横线。两条都要写，各家前缀不同。 */
  list-style: none;
}

.mnav-btn::-webkit-details-marker {
  display: none;
}

/*
 * 三条横线：中间一条是元素自身，上下两条是伪元素。
 *
 * 用 currentColor 而不是写死墨色——顶栏压在中道那节的墨底上时整条要反色，
 * 字色由 --nav-ink 逐帧算出（见 header.site 那几条），这三根线跟着走就行。
 */
.mnav-ico,
.mnav-ico::before,
.mnav-ico::after {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.mnav-ico {
  position: relative;
  color: var(--ink);
  color: color-mix(in srgb, var(--ink-fg) calc(var(--nav-ink, 0) * 100%), var(--ink));
}

.mnav-ico::before,
.mnav-ico::after {
  content: "";
  position: absolute;
  left: 0;
  transition:
    transform 0.18s ease,
    top 0.18s ease;
}

.mnav-ico::before {
  top: -5.5px;
}

.mnav-ico::after {
  top: 5.5px;
}

/* 展开后收成一个叉：抽屉盖着大半屏，那三条线此刻的意思已经是「关掉」。 */
.mnav[open] .mnav-ico {
  background: transparent;
}

.mnav[open] .mnav-ico::before {
  top: 0;
  transform: rotate(45deg);
}

.mnav[open] .mnav-ico::after {
  top: 0;
  transform: rotate(-45deg);
}

/* 抽屉之下的页面蒙一层，抽屉才读得出是浮在上面的一层，而不是插进正文的一段。 */
.mnav-scrim {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(31, 27, 22, 0.28);
  pointer-events: none;
}

.mnav:not([open]) .mnav-scrim {
  display: none;
}

/*
 * 抽屉本体。定位到 header 底边、铺满整宽，与产品整宽下拉同一套做法——header 是 sticky，
 * 本身即定位包含块，所以 left/right:0 铺的是整个视口，不受顶栏版心的 max-width 约束。
 *
 * 高度封在一屏之内并允许内滚：产品那一组有九门，加上「开始使用」三条，矮屏上装不下。
 */
.mnav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  /*
   * 与顶栏同色，中间不画线：抽屉是从顶栏里拉下来的一格，不是接在它下面的另一块。
   *
   * 不给投影。投影会往上洇到顶栏身上——`0 16px 32px` 看着是朝下的，可高斯模糊的尾巴照样
   * 越过面板上沿铺进顶栏那一格：实测顶栏下缘由 250 一路压到 247，再到面板的 250 猛地跳回来。
   * 底色明明是同一个，人眼却在交界处看见一条线，正是这道台阶。上下要合为一体，这圈投影
   * 就不能要；面板与页面的分界交给下面那层蒙层，本来也是它在管（见 .mnav-scrim）。
   */
  background: var(--bg);
}

/*
 * 抽屉展开时顶栏退回米色那一套，与产品整宽下拉是同一条规矩，理由写在 .mega 那一节。
 *
 * 这一条要圈在断点里，那一条不用：<details> 的 open 不会因为窗口变宽而消失——在手机宽度下
 * 拉开抽屉、再把窗口拖到桌面宽，抽屉本身被 display:none 收走了，open 却还留着，不限宽的话
 * 顶栏从此就在首页那节墨色上换不了装了。整宽下拉那边的判据是 :hover，松手即止，没这问题。
 */
@media (max-width: 899px) {
  header.site:has(.mnav[open]) {
    --nav-ink: 0 !important;
    background: var(--bg);
    box-shadow: none;
  }
}

/*
 * 收起时明确 display:none，为的是让展开动画每一次都从头演。
 *
 * <details> 收起时浏览器并不把内容从渲染树里摘掉（新版 Chrome 用的是 ::details-content 上的
 * content-visibility:hidden），元素一直「显示着」，只是不画。CSS 动画只在元素**开始显示**
 * 那一刻起跑，所以第一次展开演得好好的，之后每一次都是直接就位——动画早在第一次跑完了。
 * 自己把它切到 display:none，再展开就是一次真正的「从无到有」，动画自然重来。
 */
.mnav:not([open]) .mnav-panel {
  display: none;
}

/*
 * 展开是拉下来的，不是凭空出现的。
 *
 * 用 clip-path 做卷帘：面板本身不动，只把可见范围从零高度放到整高，所以里面的字不会跟着
 * 缩放或位移，读起来是「一格一格露出来」。收尾那一帧给负的外扩，免得把面板下沿那圈投影
 * 一并裁掉。
 *
 * 只演展开不演收起：<details> 的关闭是同步的，要演收起就得先拦下 summary 的默认行为、
 * 等动画跑完再真的关——为了两百毫秒把这个开关从浏览器手里接过来不划算。
 */
@media (prefers-reduced-motion: no-preference) {
  .mnav[open] .mnav-panel {
    animation: mnavUnfold 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .mnav[open] .mnav-scrim {
    animation: mnavScrimIn 0.24s ease-out;
  }
}

@keyframes mnavUnfold {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0 -50px -50px -50px);
  }
}

@keyframes mnavScrimIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.mnav-inner {
  padding-top: 1.1rem;
  padding-bottom: 1.6rem;
}

.mnav-head {
  margin: 1.1rem 0 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mnav-head:first-child {
  margin-top: 0;
}

.mnav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mnav-list a {
  display: block;
  /* 抽屉里全是手指要点的行，一行一个落点，按 44px 的触控下限给高度。 */
  padding: 0.62rem 0.7rem;
  margin-left: -0.7rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.98rem;
}

.mnav-list a:hover {
  background: var(--tint);
  text-decoration: none;
}

/* ── 按钮 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--tint);
}

.btn-lg {
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
}


/* ── 段落节奏 ─────────────────────────────────────────── */

main {
  display: block;
}

.section {
  padding: 56px 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .section {
    padding: 88px 0;
  }
}

.section-head {
  max-width: 44rem;
  margin: 0 0 2rem;
}

.section-head h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
}



/* ── 触屏：点击目标放大到 44px ─────────────────────────── */

/*
 * 按 pointer: coarse 而不是按宽度：判据是「用手指点」，不是「屏幕窄」——平板横屏也该放大，
 * 而窄窗口里的鼠标并不需要。44px 是各家可访问性指南共同的触控下限，低于它拇指容易点偏。
 *
 * 只加 min-height 与竖向内距，不动字号：字号一动，整页的节奏都得跟着重调。
 */
@media (pointer: coarse) {
  .btn,
  .suggests a,
  .askband-field button,
  .tao-cta {
    min-height: 44px;
    padding-block: 0.7rem;
  }

  /* 圆形发送键：宽高一起放，否则会变成竖椭圆。 */
  .composer .send {
    width: 2.75rem;
    height: 2.75rem;
  }

  /* 输入框本身也要够高，手指才点得中，而不是只点得中里面的按钮。 */
  .askband-field input {
    min-height: 44px;
  }

  /*
   * 顶栏那个试用按钮不跟这一档走，单独收细。
   *
   * 上面那条 44px 是给正文里的按钮定的：它们四周有留白，长高一点不影响别的东西。顶栏不是
   * ——它只有 52px 高，一个 44px 的实心胶囊压进去几乎顶满上下沿，在 390 宽的手机上又占掉
   * 三分之一的横向，整条顶栏看着就是「一个按钮外加一个角标」。
   *
   * 这里破的是 44px 那条触控下限，理由是它另一个维度够宽：这枚胶囊横向有一百三十来像素，
   * 34px 高配上左右的内距，落点面积远在下限之上，指头点不偏。
   */
  header.site .actions .btn {
    min-height: 34px;
    padding-block: 0.24rem;
  }
}



/* ── 左右分栏（板块介绍页的正文段） ─────────────────────── */

/* 正文分栏限宽：容器满宽后不限的话，宽屏下单行会长到读不动。 */
.split {
  display: grid;
  gap: 2rem;
  align-items: start;
  max-width: var(--maxw-text);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
  }
}

.split h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.3;
}

.split p {
  margin: 0 0 1rem;
}

.split p:last-child {
  margin-bottom: 0;
}

/* 三层架构这类有序清单 */

@media (min-width: 900px) {
}


@media (min-width: 800px) {
}

/* ── 结尾 CTA ─────────────────────────────────────────── */

.cta-band {
  padding: 56px 0;
  text-align: center;
  background: var(--tint);
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .cta-band {
    padding: 88px 0;
  }
}

.cta-band h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

.cta-band p {
  margin: 0 auto 1.75rem;
  max-width: 36rem;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── 页脚 ─────────────────────────────────────────────── */

footer.site {
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

/*
 * 四列链接整组居中，列内文字仍左对齐。
 * 限宽再居中，而不是让四列摊满整行：内容本来就不多，摊开后右侧空一大片，
 * 而各列自身又还是左对齐，看着像没排完。
 */
footer.site .cols {
  display: grid;
  gap: 1.75rem 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
  padding: 48px 0 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
  footer.site .cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 有内容层入口的三个语种多一列，整组随之放宽，列宽保持一致。 */
  footer.site .cols-5 {
    max-width: 68rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.footer-col h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  margin: 0 0 0.45rem;
}

.footer-col a {
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--ink);
}

/*
 * 底栏：左边主体署名与免责声明，右边语言切换，中间留空。
 * 两端对齐用 space-between，中间不塞东西——挤第三样进来，三者都会显得局促。
 */
footer.site .bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

footer.site .bottom-l {
  flex: 1 1 24rem;
  min-width: 0;
}

footer.site .legalname {
  margin: 0;
  color: var(--ink);
}

footer.site .note {
  margin: 0.5rem 0 0;
}

/* ── 语言切换 ─────────────────────────────────────────── */

footer.site .langbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

footer.site .langbtn:hover {
  border-color: var(--accent);
}

footer.site .langbtn svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.langdlg {
  width: min(92vw, 26rem);
  max-height: min(80vh, 34rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.langdlg::backdrop {
  background: rgba(28, 20, 12, 0.42);
}

.langdlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.9rem;
  border-bottom: 1px solid var(--line);
}

.langdlg-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.langdlg-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}

.langdlg-x:hover {
  background: var(--line);
}

/* 列表自己滚，弹层整体不动——标题与关闭键要一直看得见。 */
.langlist {
  margin: 0;
  padding: 0.5rem;
  max-height: calc(min(80vh, 34rem) - 4.4rem);
  overflow-y: auto;
  list-style: none;
}

.langopt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}

a.langopt:hover {
  background: var(--tint);
  text-decoration: none;
}

.langopt .n {
  flex: 1 1 auto;
  min-width: 0;
}

.langopt .e {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
}

.langopt.cur {
  background: var(--tint);
  font-weight: 700;
}

.langopt .tick {
  flex: none;
  color: var(--accent);
}

/* 无 JS 兜底：弹层打不开，平铺一行链接顶上。 */
.langs-plain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.langs-plain .cur {
  font-weight: 700;
}

/* ── 面包屑 ───────────────────────────────────────────── */

/*
 * 只出现在有上级的页面：板块介绍页、法律页、about。首页是根，404 不索引，都不给。
 *
 * 层级与 BreadcrumbList 结构化数据由同一份数据一次产出（见 brand-site/seo.mjs 的
 * breadcrumb），所以页面上看到的和喂给 Google 的不可能各说各话。
 *
 * 用 <ol> 而不是 <nav aria-label="面包屑">：那个标签得铺开 15 个语种的译文，
 * 为一个无障碍标签不值当；有序列表本身就会被读屏播报为「列表，N 项」。
 */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.crumbs li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

/* 分隔符由 CSS 生成：它是装饰，不该被读屏念出来，也不该跟着正文被复制走。 */
.crumbs li + li::before {
  content: "/";
  opacity: 0.5;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--ink);
}

.crumbs [aria-current] {
  color: var(--ink);
}

/* 板块介绍页：面包屑自成一条压在 Hero 之上，不进 Hero 那个居中版心。 */
.crumbs-bar {
  padding-top: 1.25rem;
}

/* ── 长文页（法律 / about / 404） ──────────────────────── */

.doc {
  padding: 40px 0 72px;
}

/* 长文页的面包屑与 h1 是一组，间距收得比段落紧。 */
.doc .crumbs {
  margin-bottom: 0.9rem;
}

.doc h1 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.35;
  margin: 0 0 1rem;
}

.doc h2 {
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.28rem;
}

.doc h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.06rem;
}

.doc p {
  margin: 0 0 1rem;
}

.doc ul,
.doc ol {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.doc li {
  margin: 0.3rem 0;
}

.doc table {
  width: 100%;
  margin: 0 0 1.25rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.doc th,
.doc td {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--surface);
}

.doc code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  background: var(--tint);
  font-size: 0.92em;
}

.doc .meta {
  margin: 0 0 1.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.doc .cta {
  display: inline-block;
  margin: 0.25rem 0 1.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

.doc .cta:hover {
  background: var(--accent-ink);
  text-decoration: none;
}

/* ── 无障碍与降级 ─────────────────────────────────────── */

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
}

/* 由 build-legal-static.mjs 依据 locales.mjs 的 noDisplayFont 生成：书法体没有这些文字，整句退回衬线体，避免逐字回退成混排。 */
html[lang="ja"],
html[lang="ko"],
html[lang="vi"],
html[lang="th"] {
  --font-display: var(--font-serif);
}