/* ============================================================================
   Arqense 官网 —— 唯一一份样式表
   ----------------------------------------------------------------------------
   ⚠️ 英文页(/)是主站,中文页(/zh/)跟随。视觉判断先在**英文页**上看对。
   ⚠️ 这一份被两个页面共用,**不许复制成两份**。中英文只有**排版参数**不同,
      写在文件最后的 `html[lang="zh-Hans"]` 覆盖块里,每条都注明为什么。
      配色 / 字体分工 / 结构 / 签名元素 / 动效语汇 —— **共用**,那是品牌。

   ⚠️ 品牌只有三个颜色(golf-swing-analysis/brand/logo/dist/README.md):
        墨 ink #101410 / 纸 paper #F1F2ED(**深底上的 logo 用纸色**)/ 绿 #16513A
   ⚠️ 琥珀 #ffc44d **不是品牌色**,只允许出现在**产品截图内部**。

   ⚠️⚠️ 基调:苹果 / 特斯拉产品页。**极简,一屏一句话,产品当主角。**
   曾经有一版做了坐标框(全高竖线)、引出线标注、eyebrow 小标签、虚线框 ——
   **全部删掉了,别加回来。** 那些是**设计师在表演专业,不是产品在说话**:
   苹果不画网格给你看,特斯拉不给你标注引线。**留白就是留白,不需要用线证明它是有意的。**
   唯一保留的"线"是归因卡那条左虚右实的连线 —— 它不是装饰,它编码了
   「一半数据还没到」这个事实,是全站唯一一处**形状即信息**的地方。

   ⚠️ 极简会让页面文字变少,SEO 天然变弱。解法**不是往页面上堆字**,而是把事实密度
      下沉到三个地方:`llms.txt`、JSON-LD、以及**页脚那个安静但完整的区块**。
      改页面文案时,先确认那三处还说得全。
   ============================================================================ */
:root{
  --ink:#101410; --paper:#F1F2ED; --green:#16513A;
  /* 以下全部是纸色在墨底上的 alpha 派生,**没有第二个色相** */
  --s1:rgba(241,242,237,.04);
  --line:rgba(241,242,237,.11);
  --line-2:rgba(241,242,237,.22);
  --t2:rgba(241,242,237,.66);
  --t3:rgba(241,242,237,.42);
  --t4:rgba(241,242,237,.26);
  --on-green:rgba(241,242,237,.88); --on-green-2:rgba(241,242,237,.64);

  /* ⚠️ 字体分工 = **谁在说话**(共用规则):
       mono 仪器在说话 —— 品牌名 / 标签 / 数值 / 系统生成的那句诊断
       sans 人在说话   —— 每屏那句大标题 / 短句 / 页脚
     ⚠️ 不引外部字体、不内联 data URI:中文页拿不到同一套 display 字体
        (CJK 内联是 MB 级),英文页有中文页没有 = 两页两个品牌。 */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC",
         "Hiragino Sans GB","Microsoft YaHei",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,
         "Cascadia Mono",Consolas,"Liberation Mono","PingFang SC","Microsoft YaHei",monospace;

  /* ⚠️ 顶栏 sticky 常驻,所以「一屏」= 视口 − 顶栏。这个数必须和 .bar-in 对上:
     mark 60 + 上下 padding 14×2 = 88。改了 --mark 或那个 padding,这里要跟着改。 */
  --barh:88px;
  --pad:clamp(20px,5vw,56px);
  --maxw:1400px;      /* 版心 —— 图片按这个宽度走,让产品够大 */
  --text:940px;       /* 文字宽度 —— 句子不跟着图一起变宽 */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);
     font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(22,81,58,.55)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
img{max-width:100%}
h1,h2{margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ── 顶栏 ─────────────────────────────────────────────────────────────────
   ⚠️ 字标锁定只调 --mark 一个值。gap = .22×mark、字标字号 = .42×mark,
      两个比例来自 brand/logo/dist/lockup.css,是从符号几何推出来的,
      **不要单独调其中一个** —— 标记放大而字标不动会像字被压扁了。
   ⚠️⚠️ 用哪一版曲线是**尺寸**决定的:
      · hinted(#arq)     收笔尖加粗到 3.4,为 16~22px 做的
      · 定稿  (#arq-full) 收笔尖 1.4,笔锋完整
      brand README 的门槛是 64px。这里 60px → 2× 屏上定稿尖 1.68 物理像素,画得出来;
      hinted 在这尺寸有 4.08px,**明显发钝**。所以顶栏用**定稿版**。
      页脚 18px 仍用 hinted(定稿的尖只有 0.25px,必然消失)。两处不同版本是对的。
   ⚠️ 深底 → 纸色。标记尺寸属于**共用**部分,中英两页一样大。 */
.bar{position:sticky;top:0;z-index:20;background:rgba(16,20,16,.78);
     backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.bar-in{--mark:60px;display:flex;align-items:center;gap:calc(var(--mark) * .22);
        padding-top:14px;padding-bottom:14px}
.bar .mark{width:var(--mark);height:var(--mark);flex:none;color:var(--paper)}
.bar .wordmark{font-family:var(--mono);font-size:calc(var(--mark) * .42);font-weight:700;
               letter-spacing:-.02em;line-height:1}
/* ⚠️ 语言是**两个常驻标签**,不是一个「切到另一边」的链接。
   单链接的毛病:它只显示你**不在**的那一边,读者得先推断自己在哪。
   两个都摆出来、当前那个标出来,是「现在是 EN,那边还有中文」,不用推断。
   ⚠️ 当前那个用 <span> 不用 <a> —— 指向自己的链接对读屏是噪音,
      而且它是状态不是去处。aria-current 说明它是哪一个。 */
.bar .lang{margin-left:auto;display:flex;align-items:center;gap:2px;
           font-family:var(--mono);font-size:13px;line-height:1}
.lang-t{padding:7px 11px;color:var(--t3);border:1px solid transparent;border-radius:2px}
a.lang-t:hover{color:var(--paper);border-color:var(--line-2);text-decoration:none}
.lang-t.on{color:var(--paper);border-color:var(--line-2);background:var(--s1)}

/* ── 首屏 ───────────────────────────────────────────────────────────────── */
/* ⚠️ 首屏高度是被算过的:标记 + h1 + 品牌句 + **状态行**要在一屏内看完。
   状态行说的是「视频动作分析还没有」,滑到屏外等于没说。改字号前先量一遍。 */
.hero{padding:clamp(20px,2.6vw,40px) 0 clamp(28px,3.4vw,52px);text-align:center;
      min-height:calc(100vh - var(--barh));
      min-height:calc(100svh - var(--barh));
      display:flex;flex-direction:column;justify-content:center}
.hero-mark{width:clamp(96px,11.5vw,138px);aspect-ratio:1;color:var(--paper);
           margin:0 auto clamp(20px,2.4vw,30px)}
.hero-mark svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.hero-mark .swing.play *{animation:none !important}}
/* ⚠️ h1 **整句一个处理**,不分两级。曾经把 "that reads…" 降一级另起一块 ——
   `that` 是从句连接词、不承载信息,拿它开头是整句里最不该断的地方。
   ⚠️ h1 用**无衬线**,和每屏那句大标题同一套语言。这不是改主意,是按本文件顶上
      那条规则推的:h1 现在是**一句说给读者听的话**(人在说话),不再只是产品名。
      等宽留给真正"仪器在说话"的地方:字标、卡片标签、数值、那句生成的诊断。
      (早先 h1 是等宽,因为那时它只是「Arqense — golf swing analysis」这个名字。) */
h1{font-family:var(--sans);font-weight:660;margin:0 auto;text-wrap:balance}
.strap{font-family:var(--mono);color:var(--t3);text-transform:uppercase;
       margin:clamp(22px,2.6vw,32px) auto 0}
/* ⚠️ 状态:视频动作分析**确实还没有**。这一行必须留着,而且不许含糊 ——
   h1 里写了「reads your swing video」,没有这一行就是在暗示现在就能用。 */
.state{color:var(--t3);margin:12px auto 0}

/* ── 节:一屏一句话 + 产品 ──────────────────────────────────────────────── */
/* ⚠️ **一节 = 一屏**(Leon 2026-08-15:「每一个段落固定一屏显示完整」)。
   min-height 而不是 height:内容比一屏高时**让它长出去**,不裁掉 ——
   矮窗口 / 大字号 / 中文换行多一行都会撞上,裁掉就是信息静默消失。
   scroll-margin-top 让锚点跳转停在顶栏下面,而不是被顶栏盖住第一行。
   ⚠️ 用 svh 不用 vh:移动端地址栏收放会让 vh 抖,svh 是稳的那一个。 */
section{padding:clamp(28px,3.4vw,52px) 0;
        min-height:calc(100vh - var(--barh));
        min-height:calc(100svh - var(--barh));
        scroll-margin-top:var(--barh);
        display:flex;flex-direction:column;justify-content:center}
/* ⚠️ 图和卡片共用的宽度,由**可用高度**反推:高度先受限 → 宽度按纵横比跟着定。
   这样「卡片和图等宽」在任何视口下都成立,而不是各写一个 max-width 去凑。
   --ar 是每张图自己的纵横比(下面按节给),--fig-h 是这一节愿意给图多少高度。 */
/* ⚠️ 图和归因卡**共用同一个宽度**(Leon 2026-08-15:「下面表格和图片同宽」)。
   写成一个变量而不是两处各写一个数 —— 两处各写必然有一天只改了一处。
   ⚠️ 试过「按可用高度反推宽度」(--fig-h × 纵横比),**不成立**:高度一压,
      卡片宽度跟着掉到 341px,两列证据挤成窄条,卡片反而更高。宽度得自己定。 */
section{--fig-w:min(100%,1120px)}
.say{max-width:var(--text);margin:0 auto;text-align:center}
h2{font-family:var(--sans);font-weight:660}
/* 每屏最多再给**一行**短句,肯定句,不解释。解释性的段落一律下沉到页脚 / llms.txt */
.sub{color:var(--t2);margin:clamp(16px,1.8vw,22px) auto 0;max-width:56ch}
.sub b{color:var(--paper);font-weight:600}

/* ── 断行 ────────────────────────────────────────────────────────────────
   ⚠️⚠️ **中文没有空格,浏览器默认任意两字之间都能断** —— 于是「直说」被拆成
   「直 / 说」、末行只剩「说。」这种孤字。展示型文字(大标题、短句、收尾句、
   结论板)上这是最难看的一类瑕疵,而且**只在某些视口宽度下出现**,不量就看不见。

   ⚠️ 解法**不是全局 `word-break:keep-all`**:那会把一整段连续 CJK 变成一个
   不可断的原子。踩过 —— 中文 h1 用了它之后「是高尔夫挥杆智能分析。」成了 11 字
   = 286px 的不可断段,而 320 视口的正文宽只有 280px,`.hero` 是 flex 列、
   flex 项的自动最小尺寸 = min-content,于是 `.wrap` 被撑到 326px **横向溢出**。
   收尾那句比它更长,全局 keep-all 在窄屏必然溢出。

   所以用**局部** `.nb`:只把**一个语义单元**(一个词组 / 「Arqense 会直说。」这种)
   包起来,单元内部不许断,单元之间照常断 —— 桌面一行,窄屏还能在**标点处**换行。
   ⚠️ 用它之前**必须量**:单元宽度要 ≤ 320 视口下的正文宽(= 320 − 2×20 = **280px**),
      否则它就是下一个 keep-all。现有单元最宽 243px(中文 h2),留了余量。
   ⚠️ `.nb` 里不许放整句,只放尾部那个不该被拆开的词组。

   `text-wrap:pretty` 负责**剩下那些不值得手工包的正文**(页脚小字):它专治
   末行孤字/孤词。不支持的浏览器上就是今天的效果,不缺任何东西,也不影响 min-content。

   ⚠️ 中文页的做法是**把一句里的每个分句都包起来**,不是只包尾巴:只包尾巴时
      `text-wrap:balance`(h1/h2 有)会去均衡前半段,反而在词中间断
      (实测:只包「不只是球飞去哪。」→ 前半被断成「看见哪里不 / 对,」)。
      每个分句都是原子之后,**唯一合法的断点就是标点处**,balance 想歪也歪不了。
   ⚠️ `text-wrap:pretty` 只给**页脚小字**:它会为了消孤字而挪断点,
      在没有 `.nb` 保护的中文展示型文字上会把断点挪进词里(实测把「球数够,」
      断成「球数 / 够,」)。所以正文短句一律靠 `.nb`,不靠 pretty。 */
.nb{white-space:nowrap}
.foot-grid p,.foot-grid li{text-wrap:pretty}

/* ── 产品图 —— 主角 ──────────────────────────────────────────────────────
   ⚠️ 三张同一套处理,一律通栏。别改回并排:三张都是约 2.1~2.33:1 的宽幅,
      并排必然一高一矮,而且中英文字块高度本来就不一样,并排永远配不平。
   ⚠️ 深色截图贴在深色底上会**托不出来**。处理是三层,都很淡,不是"发光特效":
      1) 背后一层极淡的径向底光,把图从背景里抬起来
      2) 1px 纸色细边(比正文的发丝线亮)
      3) 顶边一道更亮的内高光 —— 屏幕边框的物理感
   ⚠️ img 上的 width/height 必须留着,那是防加载跳版的。
   ⚠️ 圆角 10px:这是一块屏幕。页面上其余东西一律 radius 0。 */
.shot{margin:clamp(28px,3.4vw,44px) auto 0;max-width:var(--fig-w)}
/* ⚠️ 抬起来那层光**必须用 box-shadow,不许用绝对定位的 ::before 光晕**。
   踩过:`::before{left:-6%;right:-6%}` 在 768~1280 宽度下伸出版心 → **横向溢出**,
   而且它是伪元素,用 querySelectorAll 查不出来,排查时看不见凶手。
   box-shadow 不参与布局、永远不会撑出滚动条,效果一样。 */
/* ⚠️ 宽度由 .shot 容器给,img 自己保持 width:100% —— 那是**加载前占位**的关键:
   width:auto 的 lazy 图在加载前宽度会塌成 0,加载完再跳回来,实测跳版。 */
.shot img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line-2);
  box-shadow:0 0 90px rgba(241,242,237,.07),          /* 极淡外光:把图从深底里抬起来 */
             0 40px 90px -30px rgba(0,0,0,.95),        /* 落影:压出层次 */
             inset 0 1px 0 rgba(241,242,237,.14)}      /* 顶边内高光:屏幕边框的物理感 */

/* ── 归因卡 —— 签名元素,唯一保留的"线" ─────────────────────────────────
   两列证据在中间交汇于一个绿点,再垂线落进深绿结论板。
   ⚠️ 交汇线**左半虚线**(视频还没到)/**右半实线**(现在就在测)。
      一根线把「一半还没进来、但机制长这样」说完,不花一个字、不加一个颜色。
      **这条线不是装饰,是全站唯一形状即信息的地方,别删。**
   ⚠️ 交汇点那颗绿球 = logo 正中那颗球。它和深绿结论板是**全页仅有的两处饱和色**。 */
/* ⚠️ 卡片和图**等宽**(Leon 2026-08-15)。两者宽度都是 --fig-w —— 由**可用高度**
   反推出来的,不是各写一个数。所以无论视口多高多宽,卡片的边和图的边永远对齐。
   ⚠️ 旧注释说「卡片要比图窄,否则两列离中间交汇点太远、连线读不出接上了」——
      那个担心不成立:中间那列是 clamp(96px,11vw,160px) 的**固定档**,
      卡片变宽只让两侧的证据列变宽,连线长度不变。 */
.attr{max-width:var(--fig-w);margin:clamp(28px,3.4vw,44px) auto 0;text-align:left;
      border:1px solid var(--line);background:var(--s1);overflow:hidden;
      view-timeline-name:--card;view-timeline-axis:block}
.attr-grid{display:grid;grid-template-columns:1fr clamp(96px,11vw,160px) 1fr}
@media (max-width:760px){.attr-grid{grid-template-columns:1fr}}
.attr-col{padding:clamp(18px,2.2vw,26px)}
.attr-col h3{font-family:var(--mono);font-weight:600;text-transform:uppercase;
             color:var(--t3);margin:0 0 20px}
.attr-link{position:relative}
.attr-link::before,.attr-link::after{content:"";position:absolute;top:50%;height:1px}
.attr-link::before{left:0;width:50%;                       /* 左半:虚线 */
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 3px,transparent 3px 6px)}
.attr-link::after{left:50%;width:50%;background:var(--line-2)}   /* 右半:实线 */
@media (min-width:761px){
  .attr-link::before{left:-26px;width:calc(50% + 26px)}
  .attr-link::after{width:calc(50% + 26px)}
}
.attr-link i{position:absolute;left:50%;top:50%;bottom:0;width:1px;background:var(--line-2);
             transform-origin:top center}
.attr-link span{position:absolute;left:50%;bottom:calc(50% + 13px);transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3);white-space:nowrap;line-height:1.5}
.attr-link span::after{content:"";position:absolute;left:50%;top:calc(100% + 13px);
  transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 5px var(--ink)}
@media (max-width:760px){
  .attr-link{height:66px}
  .attr-link i{display:none}
  .attr-link span{bottom:auto;top:calc(50% - 28px)}
}
.row{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.row:last-of-type{border-bottom:0}
.row .k{color:var(--t2);flex:1;min-width:0}
/* 大号等宽 tabular-nums:小数点自然对齐成一列 —— 仪器的读数 */
.row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;
        letter-spacing:-.025em;color:var(--paper)}
.row .u{font-family:var(--mono);font-size:10.5px;color:var(--t3);font-weight:600}
.row.soon .v{color:var(--t4)}
.col-note{margin:12px 0 0;color:var(--t3)}
/* 结论板 —— 全页唯一的饱和色块。那句话是系统写出来的,所以用仪器的字。 */
.attr-out{background:var(--green);color:var(--on-green);padding:clamp(20px,2.4vw,28px)}
.attr-out q{display:block;quotes:none;font-family:var(--mono);font-weight:500;
            margin:0 0 12px;letter-spacing:-.015em}
.attr-out q b{color:var(--paper);font-weight:700;text-decoration:underline;
              text-decoration-thickness:1px;text-underline-offset:.24em;
              text-decoration-color:rgba(241,242,237,.45)}
.attr-out .why{margin:0;color:var(--on-green-2)}
.attr-out .why b{color:var(--paper);font-weight:600}

/* ── 收尾一句 ───────────────────────────────────────────────────────────── */
.trust{padding:clamp(40px,5vw,80px) 0;text-align:center;
       min-height:calc(100vh - var(--barh));
       min-height:calc(100svh - var(--barh));
       display:flex;flex-direction:column;justify-content:center}
.trust p{max-width:24ch;margin:0 auto;color:var(--paper)}

/* ── 页脚 —— 事实都在这儿 ────────────────────────────────────────────────
   ⚠️ 这是页面上**承载事实**的地方,不是脚注式的一行。极简把解释性文字从正文拿掉了,
      那些事实(设备兼容、功能清单、现在有什么/还没有什么、给谁用)全部下沉到这里。
      视觉上安静:小字、低对比、不抢;但**内容必须完整**,而且是能被直接引用的整句。
   ⚠️ 改正文时先回来确认这里还说得全。同一批事实还要和 llms.txt、JSON-LD 对得上。 */
footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 44px;color:var(--t3)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
           gap:clamp(26px,3.4vw,48px)}
.foot-grid h4{margin:0 0 12px;font-family:var(--mono);font-weight:600;
              text-transform:uppercase;color:var(--t2)}
.foot-grid p{margin:0 0 10px}
.foot-grid ul{margin:0;padding:0;list-style:none}
.foot-grid li{margin:0 0 7px}
.foot-grid a{color:var(--t2);text-decoration:underline;
             text-decoration-color:var(--line-2);text-underline-offset:3px}
.foot-grid a:hover{color:var(--paper)}
.foot-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
          margin-top:clamp(36px,4.4vw,60px);padding-top:24px;border-top:1px solid var(--line)}
.foot-end .mark{width:18px;height:18px;color:var(--t4);flex:none}
.foot-end .ver{margin-left:auto;font-family:var(--mono);color:var(--t4)}

/* ══ 动效 ══════════════════════════════════════════════════════════════════
   ⚠️ 零 JavaScript,全部 CSS。
   ⚠️⚠️ **带文字的元素一律只做位移,不做透明度。** 这是踩过的坑:
        `fill-mode: both` + `from{opacity:0}` 时,如果动画**从来没被启动**
        (离屏 iframe、被节流的渲染器、抓取器的无头渲染),元素会**永远停在 opacity:0**。
        离屏 iframe 里复现过:首屏五个元素全是 0,滚一遍也不恢复 —— 那就是抓取器
        可能拿到的空首屏。位移没有这个风险:动画没跑 = 位置偏一点,字始终看得见。
        透明度只允许用在纯装饰上(那条连线、绿球)。
   ⚠️ 滚动触发用 animation-timeline: view(),只驱动**装饰**和**位移**;
      不支持的浏览器上就是静态成品,不缺任何东西。
   ⚠️ 不做数字滚动计数:纯 CSS 计数要把数值塞进 counter/::after,
      **真实文本就不在 DOM 里了**,抽取直接拿不到 91.4。
   ⚠️ 明令不做:粒子、辉光特效、紫蓝渐变、无限脉冲、视差、打字机。 */
@keyframes aq-rise{from{transform:translateY(14px)}}
@keyframes aq-lift{from{transform:translateY(24px)}}
@keyframes aq-drawy{from{transform:scaleY(0)}}
@keyframes aq-grow-r{from{clip-path:inset(0 100% 0 0)}}   /* 左端 → 交汇点 */
@keyframes aq-grow-l{from{clip-path:inset(0 0 0 100%)}}   /* 右端 → 交汇点 */
@keyframes aq-pop{from{transform:translate(-50%,-50%) scale(0)}}

@media (prefers-reduced-motion:no-preference){
  /* 开场:标题 → 品牌句 → 状态。⚠️ 顶栏不做入场(它装着品牌名),
     首屏大标记也不另做(它自己那 2.10s 的挥杆生成就是开场)。 */
  h1{animation:aq-rise .65s cubic-bezier(.2,.75,.25,1) both}       /* 延迟 0 */
  .strap{animation:aq-rise .65s .1s cubic-bezier(.2,.75,.25,1) both}
  .state{animation:aq-rise .65s .18s cubic-bezier(.2,.75,.25,1) both}

  @supports (animation-timeline:view()){
    /* 产品图升起来 —— 只位移 */
    .shot{animation:aq-lift .9s cubic-bezier(.2,.8,.3,1) both;
          animation-timeline:view();animation-range:entry 6% entry 46%}
    /* 归因卡:两端向交汇点画拢 → 绿球落位 → 垂线落进结论板 */
    .attr-link::before{animation:aq-grow-r 1s linear both;
      animation-timeline:--card;animation-range:entry 14% entry 62%}
    .attr-link::after{animation:aq-grow-l 1s linear both;
      animation-timeline:--card;animation-range:entry 14% entry 62%}
    .attr-link span::after{animation:aq-pop .6s cubic-bezier(.3,1.5,.5,1) both;
      animation-timeline:--card;animation-range:entry 58% entry 78%}
    .attr-link i{animation:aq-drawy .8s cubic-bezier(.3,.85,.3,1) both;
      animation-timeline:--card;animation-range:entry 66% entry 96%}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   排版:英文(主站)
   ⚠️ 英文的最坏情况是**宽度**:单词长、可断处少、等宽显著变宽 → 字号上限被宽度卡着,
      行高可以紧。
   ══════════════════════════════════════════════════════════════════════════ */
h1{font-size:clamp(28px,4.3vw,55px);line-height:1.07;letter-spacing:-.034em;max-width:17ch}
.strap{font-size:12.5px;letter-spacing:.16em}
.state{font-size:13.5px;line-height:1.6;max-width:44ch}
h2{font-size:clamp(29px,4.4vw,58px);line-height:1.06;letter-spacing:-.032em}
.sub{font-size:clamp(16px,1.75vw,20px);line-height:1.5}
.attr-col h3{font-size:11px;letter-spacing:.13em}
.row .k{font-size:14px;line-height:1.45}
.row .v{font-size:clamp(21px,2.4vw,27px)}
.col-note{font-size:12.5px;line-height:1.55}
.attr-out q{font-size:clamp(15px,1.85vw,21px);line-height:1.55;max-width:58ch}
.attr-out .why{font-size:14px;line-height:1.6;max-width:64ch}
/* ⚠️ 24ch → 28ch:24ch 时这句在 768~1440 全部断成「…Arqense / says so.」,
   末行只剩两个词。28ch 让它在桌面**排成一行**(实测 1440 需要 805px,版心给得起 829px),
   窄屏仍然换行 —— 而尾部那个 `.nb` 保证换行只会落在逗号处。 */
.trust p{font-size:clamp(24px,3.6vw,46px);line-height:1.16;letter-spacing:-.028em;
         font-weight:660;max-width:28ch}
footer{font-size:13px;line-height:1.65}
.foot-grid h4{font-size:10.5px;letter-spacing:.14em}
.foot-end{font-size:12.5px}

/* ══════════════════════════════════════════════════════════════════════════
   排版覆盖:中文(/zh/)—— 只覆盖**排版参数**,配色和结构一律沿用上面
   ⚠️ 中文的最坏情况是**高度**:方块字、行盒子高、几乎任意处可断 → 一律要更大的行高;
      而因为不用担心断行,字号反而可以更大。每条都写清楚为什么,不要只留数字。
   ══════════════════════════════════════════════════════════════════════════ */
/* CJK 每字一个全角宽,同字号比英文短 → 可以更大;但行盒子高,1.12 会挤。
   ⚠️ keep-all:CJK 默认按字断行,会把「高尔夫」拆成「高尔 / 夫」;break-word 兜底。
   ⚠️ ch 单位量的是拉丁「0」宽,对 CJK 无意义 → 行宽一律改用 em。 */
html[lang="zh-Hans"] h1{font-size:clamp(26px,4vw,50px);line-height:1.28;
  letter-spacing:0;word-break:keep-all;overflow-wrap:break-word;max-width:14em}
/* ⚠️ 负字距对 CJK 有害(方块字之间本来就没有多余空隙),一律归零 */
html[lang="zh-Hans"] h2{font-size:clamp(27px,4vw,52px);line-height:1.26;letter-spacing:0}
/* ⚠️ 15em → 17em:15em 时这句在 768~1440 全部断成「…Arqense 会直 / 说。」——
   「直说」被拆开、末行只剩「说。」,是中文排版里最难看的一种(Leon 2026-08-15 指出)。
   一行需要 643px(1440),17em = 714px 给得下,而版心有 742px,不溢出。
   ⚠️ 窄屏(320)仍然要换行,靠尾部的 `.nb` 把断点逼到逗号处。 */
html[lang="zh-Hans"] .trust p{font-size:clamp(23px,3.3vw,42px);line-height:1.42;
  letter-spacing:0;max-width:17em}
/* 中文信息密度高,同字号读起来更重 → 正文降一档;CJK 需要 1.8 上下的行距 */
html[lang="zh-Hans"] .sub{font-size:clamp(15px,1.65vw,18.5px);line-height:1.8;max-width:32em}
html[lang="zh-Hans"] .state{line-height:1.8;max-width:30em}
html[lang="zh-Hans"] .attr-out q{line-height:1.8;max-width:32em}
html[lang="zh-Hans"] .attr-out .why{line-height:1.85;max-width:36em}
html[lang="zh-Hans"] .col-note{line-height:1.8}
html[lang="zh-Hans"] footer{line-height:1.9}
/* uppercase 对中文无效,标签只能靠字距拉开;中文标签短,不怕撑破行 */
html[lang="zh-Hans"] .strap{letter-spacing:.16em}
html[lang="zh-Hans"] .attr-col h3{letter-spacing:.1em;font-size:11.5px}
html[lang="zh-Hans"] .foot-grid h4{letter-spacing:.16em;font-size:11.5px}
/* 归因卡行标签:英文「Hip–shoulder separation」要折行,中文「髋肩分离」不折,
   给 nowrap 才和右边的数值对得齐 */
html[lang="zh-Hans"] .row .k{font-size:14.5px;white-space:nowrap}