/* ==========================================================================
BUILDING CHLOE — 中文版排版
--------------------------------------------------------------------------
中文不做 Serif。英文大标题保持 Cormorant，中文标题走 Noto Sans SC 200/300。
字体栈里拉丁在前、中文在后（CLAUDE.md 第 5 条）——
所以中文标题里混的英文单词是 Inter，中文字是 Noto Sans SC，两边都对。
中文排版和英文完全不同的三件事：
1. 不能用负字距。中文方块字挤在一起就糊了。
2. 行高要放，1.2 的行高对英文大写正合适，对中文是灾难。
3. 断行要管。浏览器会在英文单词中间断、会把标点甩到行首。
========================================================================== */
.bc-zh{
/* 中文页的标题字体栈：拉丁 Inter 在前，中文 Noto Sans SC 在后 */
--f-zh-display:Inter,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
/* ── 标题 ────────────────────────────────────────────────────────────
200 是给大字号用的，小字号会太虚，所以按字号分档给字重。 */
.bc-zh .t-display,
.bc-zh .t-h1,
.bc-zh .t-h2,
.bc-zh .t-h3{
font-family:var(--f-zh-display);
font-weight:200;
letter-spacing:.01em; /* 中文绝不用负字距 */
line-height:1.28;
text-transform:none; /* 中文没有大小写，ALL CAPS 对它没有意义 */
font-style:normal;
}
.bc-zh .t-h2{font-weight:250;line-height:1.32}
.bc-zh .t-h3{font-weight:300;line-height:1.4}
/* 小一点的标题字重要补回来，不然 200 在 24px 以下就虚掉了 */
@media (max-width:900px){
.bc-zh .t-h2,.bc-zh .t-h3{font-weight:300}
}
/* ── 断行控制 ────────────────────────────────────────────────────────
keep-all 防止在英文单词中间断（"Instagram" 被切成两截很难看）；
strict 防止标点跑到行首。手工的
用 .brk 控制在哪些尺寸生效。 */
.bc-zh .t-display,
.bc-zh .t-h1,
.bc-zh .t-h2,
.bc-zh .t-lede,
.bc-zh .zh-copy{
word-break:keep-all;
line-break:strict;
overflow-wrap:break-word; /* 兜底：真的放不下才断 */
}
.bc-zh .t-h1,.bc-zh .t-h2{text-wrap:balance}
/* keep-all 会让一整句中文变成一个不可断的 min-content —— 如果这个元素正好是
grid / flex 的子项，轨道就被它撑破，容器再怎么限宽都没用（中文首页 finale
标题在 390 上顶出右边缘 50px 就是这么来的）。
min-width:0 让轨道能缩，上面的 overflow-wrap 才有机会兜底。 */
.bc-zh .t-display,.bc-zh .t-h1,.bc-zh .t-h2,.bc-zh .t-h3,.bc-zh .t-lede{min-width:0}
/* ── 正文 ──────────────────────────────────────────────────────────── */
.bc-zh{font-family:var(--f-body)}
.bc-zh .t-lede{line-height:1.85;letter-spacing:.01em;font-weight:300}
.bc-zh p,.bc-zh li,.bc-zh dd{letter-spacing:.008em}
.bc-zh .t-lede,.bc-zh .aie-hero__lede{max-width:36em}
/* ── 中英混排的细节 ───────────────────────────────────────────────────
中文里夹的英文单词左右要有一点气口，不然「用 WhatsApp 问」会挤在一起。 */
.bc-zh .lat{margin-inline:.12em}
/* 只在窄屏生效的手工断点（基础规则必须排在 media query 之前）*/
.bc-zh .brk-m{display:none}
/* 中英词组不能被拆开断行（「进 CRM」被切成两行会很怪）*/
.bc-zh .nb{white-space:nowrap}
/* ── Hero ──────────────────────────────────────────────────────────── */
/* 中文标题比英文大写宽得多，要给右边那块 CONVERT 画布让位 */
.bc-zh .aie-hero__h1{max-width:min(60%,860px)}
.bc-zh .pg-hero__h1{max-width:none}
.bc-zh .aie-hero__h1 .clipline--lg > span{font-size:.86em}
.bc-zh .aie-hero__h1 .clipline > span{letter-spacing:.01em}
.bc-zh .aie-hero__h1 .clipline--sm > span,
.bc-zh .pg-hero__h1 .clipline--sm > span{font-size:.5em;line-height:1.5;color:var(--t-1)}
.bc-zh .aie-hero__h1 .clipline--lg > span,
.bc-zh .pg-hero__h1 .clipline--lg > span{line-height:1.26}
/* 中文行高比英文大写高，裁切揭示的遮罩要跟着放，不然字会被切掉一截 */
.bc-zh .clipline{padding-bottom:.06em;margin-bottom:-.06em}
/* ── 各区块的中文微调 ─────────────────────────────────────────────── */
.bc-zh .sec-head .t-h1{max-width:16em;font-size:clamp(27px,3.5vw,50px)}
.bc-zh .sec-head .t-h2{max-width:18em}
.bc-zh .sec-head .t-lede{max-width:34em}
.bc-zh .aie-jn__t{max-width:none;font-size:clamp(28px,3.2vw,50px);line-height:1.2;
letter-spacing:.02em}
.bc-zh .aie-jn__head .t-h2{font-size:clamp(18px,1.85vw,27px);line-height:1.5;max-width:20em}
.bc-zh .aie-jn__d{max-width:24em}
.bc-zh .asm__head .t-h2{font-size:clamp(19px,1.95vw,29px);line-height:1.45;max-width:20em}
.bc-zh .asm__msg-body{line-height:1.85}
.bc-zh .asm__fields dt{letter-spacing:.06em}
.bc-zh .asm__fields dd{line-height:1.6}
.bc-zh .mling__q{font-family:var(--f-zh-display);font-style:normal;font-weight:300;
line-height:1.6;letter-spacing:.01em}
.bc-zh .qloop__close{font-family:var(--f-zh-display);font-weight:250;line-height:1.6;
max-width:22em;letter-spacing:.01em}
.bc-zh .pr__nums b{font-family:var(--f-display);letter-spacing:.01em} /* 价格数字保持 Cormorant */
.bc-zh .fin__h{max-width:14em;font-size:clamp(29px,4vw,60px);line-height:1.3}
.bc-zh .pr__name{max-width:none}
/* ── 手机断行：中文标题在 390 上最容易出事 ────────────────────────── */
@media (max-width:900px){
.bc-zh .aie-hero__h1{max-width:none}
.bc-zh .aie-hero__h1 .clipline--lg > span{font-size:.9em;line-height:1.3}
.bc-zh .aie-hero__h1 .clipline--sm > span{font-size:.5em;line-height:1.6}
.bc-zh .sec-head .t-h1{font-size:clamp(24px,6.6vw,34px);line-height:1.34}
.bc-zh .aie-jn__t{font-size:clamp(26px,7.4vw,36px);line-height:1.26}
.bc-zh .fin__h{font-size:clamp(26px,7.2vw,36px)}
/* 手机上 br 会造成很短的孤行，按尺寸关掉一部分手工断行 */
.bc-zh .brk-d{display:none}
/* 反过来：有些句子只有在窄屏才需要多断一次，否则最后一行会只剩一个字 */
.bc-zh .brk-m{display:block}
}
/* 「derived」在中文页要写中文 */
.bc-zh .asm__fields > div[data-derived] dt::after{content:" · 推导"}
/* 这个标题有手工断行，交给
控制，不要再让浏览器 balance 一次 */
.bc-zh .aie-jn__head .t-h2{text-wrap:initial}
/* ══ 支柱页中文断行（BATCH 10）══════════════════════════════════════
英文标题用 max-width:18ch —— ch 是「0」的宽度，中文一个字是 1em，
所以中文标题会被切在奇怪的位置（「一条线，不/是一堆工具」「ATTRACT 里/面有什么」）。
中文一律用 em 限宽，并且不许在词中间断。 */
.bc-zh .pil-split__head h2{max-width:9.5em;text-wrap:pretty;
word-break:keep-all;line-break:strict}
.bc-zh .pil-hero__says{max-width:11em;text-wrap:pretty;
word-break:keep-all;line-break:strict}
/* 卡片说明是短句：balance 让几行长度接近，比 pretty 更能避免最后一行只剩一两个字 */
.bc-zh .pil-caps h3{word-break:keep-all;line-break:strict}
.bc-zh .pil-caps p{word-break:keep-all;line-break:strict;text-wrap:balance}
.bc-zh .morph__items li span,.bc-zh .sol-stage__in p{text-wrap:balance}
.bc-zh .pil-flow li,.bc-zh .morph__items li span{word-break:keep-all;line-break:strict}
@media (max-width:900px){
.bc-zh .pil-split__head h2{max-width:none}
.bc-zh .pil-hero__says{max-width:13em}
}
/* 中文首页：finale 标题在 390 上顶出右边缘。
原因有两个：max-width 用 ch（按拉丁字宽算，中文一个字是 1em），
而且 em 限宽本身不会被容器兜住 —— 所以要 min(…, 100%)。 */
.bc-zh .finale__h{max-width:min(11em,100%);margin-inline:auto}
.bc-zh .finale__in > .t-lede{max-width:min(22em,100%);margin-inline:auto}
@media (max-width:430px){
/* 390 上 11 个字要么 6+5 要么 10+1。收到 6em 逼成 5+5+5，最后一行不再剩一两个字 */
.bc-zh .finale__h{max-width:min(6em,100%);text-wrap:balance}
}
/* 支柱页 Hero 的 h1 在英文版是 max-width:9ch（"Attract" 刚好），
中文版换成全大写的 AUTOMATE 就超出 9ch，被 overflow-wrap 从单词中间切成三行。
这个 h1 本来就只有一个词，不需要限宽。 */
/* 那个 9ch 是写在 style= 里的行内样式，只能用 !important 盖 */
.bc-zh .pil-hero__in > h1{max-width:none !important}