/* ============================================================================
   帝航官网样式表 —— 服务端渲染页与 React 岛屿共用这一份。
   放在 frontend/public/ 下由 Vite 原样拷进 dist，nginx 直接提供 /site.css；
   后端 SSR 的页面用 <link> 引它，因此「无 JS 也能看」和「岛屿挂载后的样子」
   永远是同一套规则，不会出现两套样式互相打架。
   单一浅色主题：这是企业官网，深色反转会让品牌橙蓝失真，故不做 dark 反转，
   但所有颜色都显式声明，不依赖浏览器默认。
   ============================================================================ */

:root{
  /* 取自 logo 实际像素采样：橙 #D85810、蓝 #284890、深蓝 #102038。
     --brand-ink 是橙的加深变体：logo 原橙在白底上对比度只有 3.95:1，
     达不到 4.5:1，小号文字一律用 --brand-ink，色块与边框用 --brand。 */
  --brand:#D85810; --brand-ink:#BC4B0D; --brand-soft:#FCF3EC; --brand-line:#E7D8C8;
  --blue:#284890; --navy:#102038; --navy-2:#0A1428;
  --green:#3E7A63; --gold:#A8730A;
  --ink:#1C1B19; --ink-2:#4A4640; --ink-3:#77726B; --ink-4:#9A948B;
  --paper:#FAF9F7; --card:#FFFFFF; --wash:#F2EEE7; --line:#E6E0D6; --line-2:#EFEAE1;
  --en:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cn:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft Yahei",sans-serif;
  --pad:44px;            /* 版心左右留白，随断点收窄 */
  --gap:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:15px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.en{font-family:var(--en)}

/* 版心 ------------------------------------------------------------------ */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.sec{padding:44px 0;border-top:1px solid var(--line)}
.sec.white{background:var(--card)}
.sec.first{border-top:0}
.sec-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-h h2{font-family:var(--en);font-weight:600;font-size:26px;margin:0;letter-spacing:-.014em}
.sec-h p{font-size:13px;color:var(--ink-4);margin:0}
.sec-h .more{margin-left:auto;font-size:13px;color:var(--brand-ink);font-weight:600}

/* 顶栏 ------------------------------------------------------------------ */
.nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav-in{max-width:1120px;margin:0 auto;padding:0 var(--pad);height:64px;
  display:flex;align-items:center;gap:22px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:20px}
.nav-links a{font-size:13px;color:var(--ink-2);white-space:nowrap}
.nav-links a.on{color:var(--brand-ink);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.track{display:flex;align-items:center;border:1px solid #D9D2C7;height:34px}
.track input{border:0;padding:0 10px;font:inherit;font-size:12px;width:170px;background:none;color:var(--ink)}
.track input::placeholder{color:var(--ink-4)}
.track button{padding:0 12px;height:100%;font-size:12px;font-weight:600;color:var(--blue)}
.lang{border:1px solid #D9D2C7;padding:7px 10px;font-size:12px;font-family:var(--cn)}
.nav-toggle{display:none;margin-left:auto;width:40px;height:40px;border:1px solid #D9D2C7;
  align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;
  width:18px;height:1.5px;background:var(--ink)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* 首屏 ------------------------------------------------------------------ */
/* 首屏：标题带通栏在上，下面左海报右对话。
   align-items:stretch 让对话框跟着海报的自然高度长——海报是竖版、自己定高，
   对话框撑齐。中间那块空白不是没填满，它就是对话将要发生的地方。 */
.hero{padding:42px 0 34px;display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.hero-head{width:100%}
.hero-head .hd{margin-bottom:6px}
.hero-head .dek{max-width:none;margin:0}
.hero-poster{flex:1;min-width:0}
.hero-poster img{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-radius:3px}
/* 高度要一层层传下去。React 挂载时会在 .hero-chat 与 .chat 之间插一层
   .hero-chat-mount——少给哪一层 display:flex，对话框就停在自己的内容高度上，
   和海报差出一大截。这个坑不会报错，只会看起来「没对齐」。 */
.hero-chat{flex:1.15;min-width:0;display:flex;position:relative}
.hero-chat-mount{flex:1;min-width:0;display:flex}
.hero-chat>.chat,.hero-chat-mount>.chat{width:100%}
/* 这一行的高度由海报决定，不由对话内容决定。
   对话框**脱离文档流**（absolute），于是它不参与这一行的高度计算——海报多高、
   它就多高，内容超出时在 .chat-body 里滚动。那本来就是聊天界面的行为。
   不这么做的话：中文文案一长，对话框撑过海报，海报图是 height:auto 不跟着长，
   底下就空出一条白边（实测加一段 ≈18px，加几段就很显眼）。
   窄屏下两栏堆叠，这条要撤掉，见下面的断点。 */
@media (min-width:861px){
  /* **必须限定在 .hero-chat 里**。原来这两条是裸选择器，结果任何页面上的
     .hero-chat-mount（顾问的全屏宿主页也用同一个岛屿挂载点）都会被钉成
     整屏绝对定位，把页面自己的头部盖在底下——不报错，只是「头没了」。 */
  .hero-chat>.chat,.hero-chat .hero-chat-mount>.chat{position:absolute;inset:0;width:auto}
  .hero-chat .hero-chat-mount{position:absolute;inset:0}
}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-ink);
  font-weight:600;margin:0 0 14px}
h1.hd{font-family:var(--en);font-weight:600;font-size:60px;line-height:1.04;
  margin:0 0 16px;letter-spacing:-.026em}
.dek{font-family:var(--en);font-weight:500;font-size:21px;line-height:1.46;
  margin:0 0 14px;max-width:470px;letter-spacing:-.008em}
.dek b{font-weight:600;color:var(--brand-ink)}
.strat{border-left:2px solid var(--brand);padding-left:12px;margin:0 0 22px;
  font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:430px}
.strat b{font-family:var(--en);font-weight:600;font-size:14px;color:var(--ink);display:block}
.btns{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:12px 20px;
  font-size:13.5px;font-weight:500}
.btn.ghost{background:none;color:var(--blue);border:1px solid #C3BCB1}
.hand{border-top:1px solid var(--line);padding-top:18px}
.hand .lb{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
  font-weight:600;margin-bottom:12px}
.hand-row{display:flex;align-items:center;gap:11px;margin-bottom:10px;width:100%;text-align:left}
.hand-row:last-child{margin-bottom:0}
.hand-row .t{font-size:13px}
.hand-row .t b{font-family:var(--en);font-weight:600;font-size:14.5px}
.hand-row .t span{color:var(--ink-4)}
.hand-row .go{margin-left:auto;font-size:12px;color:var(--brand-ink);font-weight:600}

/* 顾问头像 ------------------------------------------------------------- */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--en);font-weight:600;color:#fff;width:26px;height:26px;font-size:12px}
.av.ale{background:var(--brand)}.av.clearance{background:var(--blue)}
.av.xiaoan{background:var(--green)}.av.brandon{background:var(--gold)}
.av.lg{width:36px;height:36px;font-size:15px}
.av.sm{width:20px;height:20px;font-size:10px}

/* 对话面板（内嵌与全屏共用） ------------------------------------------- */
.chat{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--line-2)}
.chat-head b{font-family:var(--en);font-weight:600;font-size:15.5px}
.chat-head i{font-style:normal;font-size:11.5px;color:var(--ink-4)}
.chat-head .st{font-size:10.5px;color:var(--green);letter-spacing:.06em}
.chat-head .tools{margin-left:auto;display:flex;gap:6px}
.chat-head .tools button{border:1px solid #D9D2C7;padding:5px 9px;font-size:11px;color:var(--ink-2)}
.chat-body{padding:16px 18px;overflow-y:auto;flex:1;min-height:0}
/* 第三方承载的对话区：整块交给对方，所以这里不留内边距，也不自己滚动
   （滚动在 iframe 内部，外面再加一层会出现双滚动条）。 */
.chat-body>.agent-frame,.chat-body>[id^="agent-widget-"]{height:100%;min-height:320px}
.agent-frame{position:relative;display:flex}
.agent-frame iframe{flex:1;width:100%;border:0;display:block;background:var(--card)}
.agent-frame-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  margin:0;font-size:12.5px;color:var(--ink-4);pointer-events:none}
/* 借用别人通道时的说明。用 --gold 而不是报错的红：这不是故障，是一个
   如实告知的临时状态。 */
.chat-borrowed{margin:0;padding:9px 18px;font-size:12px;line-height:1.5;
  background:#FCF8EE;color:#7A5408;border-bottom:1px solid #EADFC4}
.chat-foot{padding:0 18px 16px}
.msg-u{background:var(--blue);color:#fff;padding:10px 14px;font-size:13px;line-height:1.66;
  margin:0 0 12px auto;max-width:76%;width:fit-content}
.msg-a{background:#F6F4EF;padding:11px 14px;font-size:13px;line-height:1.75;
  max-width:92%;margin-bottom:10px;color:#333}
.msg-a em{font-style:normal;color:var(--brand-ink);font-weight:600}
.msg-a p{margin:0 0 .7em}.msg-a p:last-child{margin:0}
.handoff{display:flex;align-items:center;gap:10px;border:1px dashed var(--brand);
  background:var(--brand-soft);padding:10px 12px;font-size:12.5px;margin-bottom:9px;
  width:100%;text-align:left}
.handoff .t{flex:1;min-width:0}
.handoff .t b{font-weight:600}
.handoff .go{font-size:12px;color:var(--brand-ink);font-weight:600;white-space:nowrap}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.chips button{border:1px solid #D9D2C7;padding:6px 11px;font-size:11.5px;color:var(--ink-2);
  /* 起手问题是整句话，窄屏上比容器宽——必须允许折行并限宽，否则会横向溢出
     （手机端实测：第一条 chip 被切掉右半句）。 */
  max-width:100%;white-space:normal;text-align:left;line-height:1.45}
.chips button.p{border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.ask{display:flex;align-items:stretch;border:1px solid #C3BCB1;background:var(--card)}
.ask input,.ask textarea{flex:1;border:0;background:none;padding:11px 13px;font:inherit;
  font-size:13px;color:var(--ink);resize:none;min-width:0}
.ask input::placeholder,.ask textarea::placeholder{color:var(--ink-4)}
.ask button{background:var(--blue);color:#fff;padding:0 16px;font-size:12.5px;font-weight:600}
.ask button[disabled]{opacity:.5;cursor:default}
.chat-note{font-size:11px;color:var(--ink-4);margin-top:10px}
.chat-inline .chat-body{max-height:none;min-height:230px}

/* 全屏对话浮层 --------------------------------------------------------- */
.dlg{position:fixed;inset:0;z-index:100;background:rgba(16,32,56,.55);
  display:flex;align-items:stretch;justify-content:center;padding:0}
.dlg-panel{background:var(--card);width:100%;display:flex;flex-direction:column}
/* 「全屏」就该是整块屏幕：面板铺满视口，只把里面的对话收到可读宽度，
   而不是做成一个居中的窄对话框——后者在 27 寸屏上跟内嵌面板没有区别。 */
.dlg-slot>.chat{width:100%;max-width:900px;margin:0 auto}
/* 浮层顶栏已经写了顾问名与职责，对话自己那一行就是重复的。 */
.chat-dialog .chat-head{display:none}
.dlg-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:var(--navy);color:#EDE9E2;flex:0 0 auto}
.dlg-bar b{font-family:var(--en);font-weight:600;font-size:16px}
.dlg-bar i{font-style:normal;font-size:11.5px;color:#A9B6DC}
.dlg-bar .switch{margin-left:auto;display:flex;gap:6px}
.dlg-bar .switch button{border:1px solid rgba(255,255,255,.28);padding:6px 10px;
  font-size:11.5px;color:#D7DCEA}
.dlg-bar .switch button.on{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.dlg-bar .x{border:1px solid rgba(255,255,255,.28);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#D7DCEA}
.dlg-slot{flex:1;min-height:0;display:flex}
.dlg-slot>.chat{flex:1;border:0;min-height:0}
body.dlg-open{overflow:hidden}

/* 视频带：两支并排 ---------------------------------------------------- */
.band-video{background:var(--navy);padding:38px 0}
.vid-h{margin-bottom:22px}
.band-video .kick{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#EE8A4C;font-weight:600;margin-bottom:10px}
.band-video h2{font-family:var(--en);font-weight:600;font-size:28px;color:#F2EFE9;
  margin:0 0 8px;line-height:1.22;letter-spacing:-.016em}
.band-video p{font-size:12.5px;color:#A9B6DC;margin:0;max-width:600px;line-height:1.7}
/* 海报搬到首屏去了，这一段只剩一支片子——居中放大，不再只占一半版面。
   第二支片子（lane，规格在 content/media.json 的 brief 里）到位之后，
   把这里改成 grid-template-columns:1fr 1fr 即可，代码只动这一行。 */
.vid-one{max-width:760px;margin:0 auto}
.vid-main{min-width:0}
.vid-card{margin:0;min-width:0}
/* 定比例的外框：视频与静帧共用同一个位置，二者切换时版式不跳。 */
.vid-card .frame{position:relative;aspect-ratio:16/9;background:var(--navy-2);overflow:hidden}
.vid-card video,.vid-card img{width:100%;height:100%;object-fit:cover;display:block}
.vid-card .slot-missing{height:100%;border-color:#49527A;background:transparent}
.vid-card .slot-missing .tag{color:#6E7CA8}
.vid-card .slot-missing .d{color:#9AA8D2}
/* 角标挪到左上：视频自带的控制条就压在左下，放那儿会被盖住。 */
.vid-card .ref{top:0;bottom:auto}
.vid-card figcaption{padding-top:11px}
.vid-card figcaption b{display:block;font-family:var(--en);font-weight:600;font-size:16px;
  color:#F2EFE9;line-height:1.35}
.vid-card figcaption span{display:block;font-size:11.5px;color:#9AA8D2;margin-top:4px;line-height:1.6}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.vplay .big{width:52px;height:52px;border-radius:50%;background:rgba(216,88,16,.92);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}

/* 素材位：参考角标与缺位占位 ------------------------------------------- */
.shot{position:relative;overflow:hidden;background:var(--wash)}
.shot img{width:100%;height:100%;object-fit:cover}
.ref{position:absolute;left:0;bottom:0;background:rgba(28,27,25,.72);color:#EDE8E0;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:3px 7px}
.slot-missing{border:1px dashed #C3BCB1;background:var(--wash);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;min-height:120px}
.slot-missing .tag{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600}
.slot-missing .d{font-size:11.5px;color:var(--ink-3);line-height:1.6;max-width:320px}
.band-video .slot-missing{border-color:#49527A;background:transparent}
.band-video .slot-missing .tag{color:#6E7CA8}
.band-video .slot-missing .d{color:#9AA8D2}

/* 顾问区 --------------------------------------------------------------- */
.band-adv{background:var(--blue);padding:40px 0}
.band-adv .sec-h h2{color:#F2EFE9}
.band-adv .sec-h p{color:#A9B6DC}
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.adv{background:var(--card);padding:22px 22px 20px;display:flex;flex-direction:column}
.adv-top{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.adv-top .nm{font-family:var(--en);font-weight:600;font-size:22px;line-height:1.1}
.adv-top .rl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-top:3px}
.adv.a-clearance .rl{color:var(--blue)}.adv.a-xiaoan .rl{color:var(--green)}
.adv.a-brandon .rl{color:var(--gold)}
.adv .stage{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:var(--ink-4);margin-bottom:11px}
.adv .stage em{font-style:normal;font-family:var(--en);font-size:12.5px;letter-spacing:0;text-transform:none}
.adv.a-clearance .stage em{color:var(--blue)}.adv.a-xiaoan .stage em{color:var(--green)}
.adv.a-brandon .stage em{color:var(--gold)}
.adv .q{font-family:var(--en);font-weight:600;font-size:19px;line-height:1.3;
  margin:0 0 9px;letter-spacing:-.014em}
.adv .scope{font-size:12px;color:var(--ink-3);line-height:1.66;margin:0 0 12px}
.adv .ds{font-size:13px;color:var(--ink-2);line-height:1.7;margin:0 0 14px}
.adv .get{border-top:1px solid var(--line-2);padding-top:11px;margin-bottom:14px}
.adv .get b{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:2px}
.adv .get span{font-weight:500;font-size:13px}
.adv .foot{margin-top:auto}
.adv .starter{border:1px solid var(--line);background:var(--paper);padding:8px 11px;
  font-size:11.5px;color:var(--ink-2);margin-bottom:7px;width:100%;text-align:left;line-height:1.5}
.adv .open{display:flex;align-items:stretch;border:1px solid #C3BCB1;width:100%}
.adv .open span{flex:1;padding:9px 11px;font-size:12px;color:var(--ink-4);text-align:left}
.adv .open b{padding:9px 13px;font-size:11.5px;font-weight:600;color:#fff}
.adv.a-clearance .open b{background:var(--blue)}
.adv.a-xiaoan .open b{background:var(--green)}
.adv.a-brandon .open b{background:var(--gold)}

/* 客户旅程 ------------------------------------------------------------- */
.band-jrn{background:var(--navy);padding:40px 0}
.jrn-h .k{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#EE8A4C;
  font-weight:600;margin-bottom:10px}
.jrn-h h2{font-family:var(--en);font-weight:600;font-size:30px;color:#F2EFE9;margin:0 0 8px;
  letter-spacing:-.018em;line-height:1.22}
.jrn-h p{font-size:13px;color:#A9B6DC;margin:0 0 22px;max-width:640px;line-height:1.7}
.steps{display:grid;grid-template-columns:repeat(6,1fr)}
.step{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-right:0;
  padding:15px 14px 13px;display:flex;flex-direction:column;min-width:0}
.step:last-child{border-right:1px solid rgba(255,255,255,.12)}
.step .no{font-family:var(--en);font-weight:600;font-size:12.5px;color:#6E7CA8;margin-bottom:7px}
.step .t{font-family:var(--en);font-weight:600;font-size:15px;color:#F2EFE9;line-height:1.28;margin-bottom:6px}
.step .d{font-size:11px;color:#9AA8D2;line-height:1.56;flex:1;margin-bottom:10px}
.step .own{display:flex;align-items:center;gap:6px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12)}
.step .own span{font-size:10.5px;color:#A9B6DC}
.step .own .team{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#EE8A4C}
.diff{display:flex;align-items:center;gap:20px;margin-top:20px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:18px}
.diff .w{font-family:var(--en);font-weight:600;font-size:20px;color:#F2EFE9}
.diff .w i{font-style:normal;color:#6E7CA8;padding:0 8px}
.diff p{margin:0 0 0 auto;font-size:12.5px;color:#A9B6DC;max-width:450px;line-height:1.7;text-align:right}

/* 服务 ----------------------------------------------------------------- */
.svc{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.svc>div{display:flex;flex-direction:column;min-width:0}
.svc .shot{aspect-ratio:16/10;margin-bottom:11px}
.svc .n{font-family:var(--en);font-weight:600;font-size:16px;margin-bottom:5px}
.svc .one{font-size:12px;color:var(--ink-3);line-height:1.62;margin-bottom:10px;flex:1}
.svc .lm{font-size:11.5px;color:var(--brand-ink);font-weight:600}

/* ---------- 端到端四环节（首页 #services） ---------- */
/* 竖排编号列表而不是横排卡片：要传达的是顺序。横排等宽的四格在视觉上
   一律读成并列，那正是这次定位调整要去掉的读法。
   左侧那条竖线把四段连起来，是"一条链"唯一不靠文字说明的表达。 */
.chain{list-style:none;margin:0;padding:0;counter-reset:none}
.chain li{position:relative;display:flex;gap:16px;padding:0 0 26px 0}
.chain li:last-child{padding-bottom:0}
/* 连线：从序号下缘延到下一段序号，最后一段不画 */
.chain li:not(:last-child)::before{content:"";position:absolute;left:15px;top:38px;bottom:6px;
  width:1px;background:var(--line)}
.chain .no{flex:none;width:31px;height:31px;border-radius:50%;
  border:1px solid var(--brand-line);color:var(--brand-ink);background:var(--paper);
  font-family:var(--en);font-weight:600;font-size:14px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.chain .bd{min-width:0;padding-top:3px}
.chain .n{font-family:var(--en);font-weight:600;font-size:17px;margin-bottom:3px}
.chain .n a{color:var(--ink);text-decoration:none}
.chain .n a:hover{color:var(--brand-ink)}
.chain .tl{font-size:13px;color:var(--brand-ink);margin:0 0 6px;font-weight:600}
.chain .one{font-size:13px;color:var(--ink-3);line-height:1.68;margin:0}
.chain .in{font-size:12px;color:var(--ink-3);margin:7px 0 0}
.chain .in a{color:var(--brand-ink);text-decoration:none}
.chain .in a:hover{text-decoration:underline}
@media (min-width:900px){
  /* 宽屏下两列：①② 一行，③④ 一行。
     连线在这里**全部去掉**——两列排布下，从①往下画的那根线通到的是③，
     而阅读顺序是①→②→③→④，那根线在指错方向。序号本身已经把顺序说清了，
     宁可少一个装饰，也不要一个误导的装饰。 */
  .chain{display:grid;grid-template-columns:1fr 1fr;gap:4px 40px}
  .chain li::before{display:none}
  .chain li:nth-child(n+3){padding-bottom:0}
}

/* 环节页（/stage/*）里的两处 */
.doc-in p.stage-tag{font-size:15px;color:var(--brand-ink);font-weight:600;margin:-4px 0 18px}
.doc-in p.stage-nav{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}

.svc>div.hi .n{color:var(--brand-ink)}
.svc>div.hi .shot{outline:1px solid var(--brand-line)}

/* 覆盖范围 ------------------------------------------------------------- */
.cov{display:flex;gap:20px;align-items:flex-start}
/* 地图这一栏要宽：图上的地名是真文字，栏窄了字就跟着缩到读不出来。
   stretch 会把它拉到右栏那么高，白出一大块——所以两栏各自按内容高。 */
.cov .map{flex:2;background:var(--card);border:1px solid var(--line);
  padding:12px;min-width:0}
.cov .zones{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
/* 「从口岸到终点」的三段。原来是按美西/美中/美东铺仓码的三张分区卡，
   现在是链条上的三段：进港与清关 → 内陆转运 → 末端派送。仓码降到最后一段里。 */
.leg{border:1px solid var(--line);background:var(--card);padding:13px 15px}
.leg .zh{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.leg .no{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--brand-line);color:var(--brand-ink);background:var(--paper);
  font-family:var(--en);font-weight:600;font-size:10.5px;
  display:flex;align-items:center;justify-content:center}
.leg .zn{font-family:var(--en);font-weight:600;font-size:15.5px}
.leg .zt{margin-left:auto;font-size:10.5px;color:var(--ink-4);letter-spacing:.04em}
.leg .op{font-size:11.5px;color:var(--ink-3);line-height:1.68}
/* 末端那一段里的仓码：按分区分行，已确认直接出文本，待确认置灰 */
.leg .zcodes{margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2)}
.leg .zrow{display:flex;gap:9px;align-items:baseline;margin-bottom:4px}
.leg .zrow:last-child{margin-bottom:0}
.leg .zrow .zn{flex:0 0 2.6em;font-size:11px;font-weight:600;color:var(--ink-3)}
.leg .zrow .codes{font-size:11px;color:var(--ink-2);line-height:1.66;
  font-variant-numeric:tabular-nums;min-width:0}
.leg .zrow .codes i{font-style:normal;color:var(--ink-4)}

/* 知识中心 ------------------------------------------------------------- */
.kc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kc>article{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.kc .q{padding:16px 17px 12px;font-size:13.5px;line-height:1.58;font-weight:500;flex:1;margin:0}
.kc .lbls{display:flex;flex-wrap:wrap;gap:5px;padding:0 17px 12px}
.kc .lbls span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:3px 7px;border:1px solid #DDD6CB;color:var(--ink-4)}
.kc .lbls span.ai{border-color:var(--brand);color:var(--brand-ink)}
.kc .lbls span.src{border-color:var(--blue);color:var(--blue)}
.kc .exp{border-top:1px solid var(--line-2);padding:11px 17px;display:flex;align-items:center;gap:8px;
  font-size:12px;width:100%;text-align:left}
.kc .exp b{font-weight:600}
.kc .exp .go{margin-left:auto;color:var(--brand-ink);font-weight:600;font-size:11.5px}
.kc-note{margin-top:14px;font-size:12.5px;color:var(--ink-4);line-height:1.7}
.kc-note b{color:var(--brand-ink);font-weight:600}

/* 资讯 --------------------------------------------------------------- */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news>article{background:var(--card);border:1px solid var(--line);padding:16px 18px;
  display:flex;flex-direction:column;min-width:0}
.news .meta{display:flex;gap:10px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600;margin-bottom:8px;flex-wrap:wrap}
.news .meta time{font-variant-numeric:tabular-nums}
.news h3{font-family:var(--en);font-weight:600;font-size:16px;line-height:1.38;margin:0 0 8px}
.news h3 a{color:var(--ink)}
.news h3 a:hover{color:var(--brand-ink)}
.news p{font-size:12px;color:var(--ink-3);line-height:1.66;margin:0;flex:1}

/* 知识中心底部的 FAQ 链接：这批页面早就存在，此前站内无人指向 */
.kc-links{list-style:none;margin:8px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:4px 20px}
.kc-links li{font-size:12.5px;line-height:1.7}
.kc-links a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.kc-links a:hover{color:var(--brand-ink);border-bottom-color:var(--brand)}

/* 口岸表里的联系人：locations.json 一直有姓名与岗位，首页原先只出电话 */
.ports td a{color:var(--ink)}
.ports td a:hover{color:var(--brand-ink)}
.ports .who{display:block;font-size:10.5px;color:var(--ink-4);margin-top:2px}

/* 可证明的数字 --------------------------------------------------------- */

/* 工具区 --------------------------------------------------------------- */
.tools{display:flex;gap:36px}
.tools>div{min-width:0}
.cc{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--card)}
.cc>a{padding:16px 17px;border-left:1px solid var(--line-2)}
.cc>a:first-child{border-left:0}
.cc b{font-family:var(--en);font-weight:600;font-size:14px;display:block}
.cc span{font-size:11px;color:var(--ink-4)}
.ports{width:100%;border-collapse:collapse;font-size:13px}
.ports td{padding:8px 0;border-bottom:1px solid #EAE4DA}
.ports td:last-child{text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ports td b{font-weight:600}

/* 收尾 CTA 与页脚 ------------------------------------------------------ */
.cta{background:var(--brand);color:#fff}
.cta-in{max-width:1120px;margin:0 auto;padding:30px var(--pad);display:flex;align-items:center;gap:24px}
.cta h2{font-family:var(--en);font-weight:600;font-size:30px;margin:0 0 6px;letter-spacing:-.018em}
.cta .sub{font-size:12.5px;color:#FAE2D4;line-height:1.7;max-width:440px}
.cta .b1{background:#fff;color:var(--brand-ink);padding:13px 22px;font-size:13.5px;font-weight:600}
.cta .b2{border:1px solid rgba(255,255,255,.7);padding:13px 22px;font-size:13.5px;font-weight:500;color:#fff}
.foot{background:var(--navy);color:#A9B6DC;font-size:11.5px}
.foot-in{max-width:1120px;margin:0 auto;padding:20px var(--pad);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot a{color:#C3CBE6}

/* ===========================================================================
   断点。桌面 1120 为基准，往下逐级收：
     ≤1100  版心留白收窄，首屏字号下调
     ≤980   顾问三列→一列；旅程六格→横向滑动；服务五列→横向滑动；知识两列
     ≤860   首屏改为纵向；覆盖区改为纵向；工具区纵向
     ≤640   导航收进抽屉；数字两列；CTA 纵向；对话浮层满屏无边距
   =========================================================================== */
@media (max-width:1100px){
  :root{--pad:30px}
  h1.hd{font-size:52px}
}
@media (max-width:980px){
  .adv-grid{grid-template-columns:1fr}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .step{flex:0 0 62%;scroll-snap-align:start;border-right:1px solid rgba(255,255,255,.12)}
  .svc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .svc>div{flex:0 0 48%;scroll-snap-align:start}
  .kc{grid-template-columns:repeat(2,1fr)}
  .vid-grid{grid-template-columns:1fr;gap:24px}
  .news{grid-template-columns:repeat(2,1fr)}
  .diff{flex-direction:column;align-items:flex-start;gap:10px}
  .diff p{margin:0;text-align:left;max-width:none}
}
@media (max-width:860px){
  .hero{flex-direction:column;gap:28px;padding-top:32px}
  .hero-copy,.hero-chat{flex:none;width:100%}
  .dek,.strat{max-width:none}
  .cov{flex-direction:column}
  .cov .map,.cov .zones{flex:none;width:100%}
  /* SVG 的字号是 viewBox 单位，栏一窄就跟着整张图缩下去。窄屏上按缩放比
     反向放大，否则地名在手机上是读不出来的——而那些地名正是这张图的内容。 */
  .wm-t{font-size:24px}
  .wm-t.main{font-size:27px}
  .wm-org-t{font-size:23px}
  .wm-lane{stroke-width:2}
  .wm-lane.main{stroke-width:3.6}
  .tools{flex-direction:column;gap:28px}
  /* 内嵌对话在窄屏上不该无限长：限高内滚，并把「全屏」做成主要动作 */
  .chat-inline .chat-body{max-height:58vh}
}
@media (max-width:640px){
  :root{--pad:20px;--gap:14px}
  .wm-t{font-size:32px}
  .wm-t.main{font-size:36px}
  .wm-org-t{font-size:30px}
  .wm-lane{stroke-width:2.8}
  .wm-lane.main{stroke-width:5}
  .wm-key{gap:8px 14px}
  .wm-key .k.ports{margin-left:0}
  body{font-size:14.5px}
  .nav-in{height:58px;gap:12px}
  .nav-logo img{height:28px}
  .nav-links{display:none;position:absolute;left:0;right:0;top:58px;background:var(--card);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0;box-shadow:0 10px 24px rgba(16,32,56,.1)}
  .nav-links a{padding:12px var(--pad);font-size:14.5px;border-top:1px solid var(--line-2)}
  .nav-links a:first-child{border-top:0}
  .nav.open .nav-links{display:flex}
  .nav-right{display:none}
  .nav.open .nav-right{display:flex;position:absolute;left:0;right:0;top:100%;
    background:var(--card);padding:12px var(--pad) 16px;border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px rgba(16,32,56,.1)}
  .nav-toggle{display:flex}
  .track{flex:1}.track input{width:100%}
  h1.hd{font-size:42px}
  .dek{font-size:18px}
  .sec{padding:34px 0}
  .sec-h h2{font-size:22px}
  .band-video h2,.jrn-h h2,.cta h2{font-size:24px}
  .step{flex:0 0 78%}
  .svc>div{flex:0 0 76%}
  .kc{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .kc-links{grid-template-columns:1fr}
  .cc{grid-template-columns:repeat(2,1fr)}
  .cc>a:nth-child(odd){border-left:0}
  .cc>a:nth-child(n+3){border-top:1px solid var(--line-2)}
  .cta-in{flex-direction:column;align-items:stretch;gap:16px}
  .cta .b1,.cta .b2{text-align:center}
  .msg-u{max-width:88%}.msg-a{max-width:100%}
  /* 窄屏下浮层就是整块屏幕，不留外边距，也不显示遮罩 */
  .dlg{background:var(--card)}
  .dlg-panel{max-width:none}
  .dlg-bar .switch button{padding:6px 8px;font-size:11px}
}
@media (max-width:420px){
  .btns .btn{flex:1;text-align:center}
  .dlg-bar b{font-size:14.5px}
  .dlg-bar i{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* 对话页不允许被嵌入时的替代：给一个真能用的按钮，而不是一块空白或者
   浏览器自己那张错误页。 */
.agent-open{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:10px;padding:28px 24px}
.agent-open strong{font-family:var(--en);font-size:15px}
.agent-open p{margin:0;font-size:13px;color:var(--ink-3);line-height:1.6;max-width:36em}
.agent-open-btn{display:inline-block;margin-top:4px;padding:9px 16px;border-radius:6px;
  background:var(--brand);color:#fff;text-decoration:none;font-size:13.5px}
.agent-open-btn:hover{background:var(--brand-ink)}

/* ── 生成式 UI（A2UI）：模型在回答里嵌的结构化组件 ──────────────────────
   刻意做得比工具卡片朴素：卡片承载的是我们确认过的事实（服务、口岸、资质），
   这些块只是模型这一轮回答的排版。视觉上分量不该压过前者。 */
.a2{margin:10px 0 0;font-size:13px;line-height:1.62}
.a2 h4{margin:0 0 6px;font-size:12.5px;font-family:var(--cn);color:var(--ink-2);
  letter-spacing:.01em}
.a2 p{margin:0 0 6px}
.a2 p:last-child{margin-bottom:0}
.a2-pending{margin:8px 0 0;font-size:12px;color:var(--ink-4)}

.a2-text ul{margin:6px 0 0;padding-left:19px}
.a2-text li{margin-bottom:3px}

.a2-timeline ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.a2-timeline li{position:relative;padding-left:19px;display:flex;flex-direction:column;gap:1px}
/* 圆点 + 竖线。用 ::before/::after 而不是额外的 div：内容是模型给的，
   结构越少越不容易被写坏。 */
.a2-timeline li::before{content:"";position:absolute;left:3px;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--line);border:1.5px solid var(--card);box-shadow:0 0 0 1.5px var(--line)}
.a2-timeline li:not(:last-child)::after{content:"";position:absolute;left:6px;top:15px;bottom:-9px;
  width:1px;background:var(--line)}
.a2-timeline li.s-done::before{background:var(--green);box-shadow:0 0 0 1.5px var(--green)}
.a2-timeline li.s-current::before{background:var(--brand);box-shadow:0 0 0 1.5px var(--brand)}
.a2-timeline b{font-weight:600}
.a2-timeline span{color:var(--ink-3);font-size:12.5px}

.a2-table .a2-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.a2-table table{border-collapse:collapse;width:100%;font-size:12.5px}
.a2-table th,.a2-table td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--line-2);
  vertical-align:top}
.a2-table th{background:var(--wash);color:var(--ink-3);font-weight:600;font-size:11.5px;
  white-space:nowrap}
.a2-table tr:last-child td{border-bottom:none}
.a2-more{margin:5px 0 0;font-size:11.5px;color:var(--ink-4)}

.a2-alert{padding:10px 12px;border-radius:7px;border:1px solid}
.a2-alert b{display:block;margin-bottom:3px;font-weight:600}
.a2-alert.v-info{background:#F2F5FB;border-color:#D7E0F0;color:#1F3A66}
.a2-alert.v-warn{background:#FCF8EE;border-color:#EADFC4;color:#7A5408}

.a2-grid-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.a2-grid-items>div{padding:9px 11px;background:var(--wash);border-radius:7px;
  display:flex;flex-direction:column;gap:2px}
.a2-grid-items b{font-weight:600;font-size:12.5px}
.a2-grid-items span{color:var(--ink-3);font-size:12px}

.a2-acc details{border-bottom:1px solid var(--line-2)}
.a2-acc details:last-child{border-bottom:none}
.a2-acc summary{cursor:pointer;padding:8px 0;font-weight:600;font-size:12.5px;
  list-style:none}
.a2-acc summary::-webkit-details-marker{display:none}
.a2-acc summary::before{content:"+ ";color:var(--brand-ink);font-weight:600}
.a2-acc details[open] summary::before{content:"− "}
.a2-acc details p{margin:0 0 9px;color:var(--ink-2);font-size:12.5px}

.a2-chips{display:flex;flex-wrap:wrap;gap:6px}
.a2-chips button{border:1px solid var(--brand-line);background:var(--brand-soft);
  color:var(--brand-ink);padding:5px 11px;border-radius:99px;font-size:12px;
  cursor:pointer;max-width:100%;white-space:normal;text-align:left}
.a2-chips button:hover{background:#F8E7DA}

/* ── 二级页（/about、/client、/s/、/loc/、/faq/、/news/）────────────────
   这些页面此前穿的是原型期那四行内联 CSS：没有品牌、没有导航，点进去像换了
   个网站。现在与首页共用同一套页眉页脚（backend/src/chrome.js），这里只补
   正文的排版。

   正文限宽 46rem 不是随手定的：中英混排下每行 60–75 个西文字符最好读，再宽
   眼睛回行就要找位置。 */
.doc{background:var(--paper);padding:40px var(--pad) 72px}
.doc-in{max-width:46rem;margin:0 auto}
.doc-in h1{font-family:var(--en);font-weight:600;font-size:30px;line-height:1.25;
  margin:0 0 18px;text-wrap:balance}
.doc-in h2{font-family:var(--en);font-weight:600;font-size:19px;margin:34px 0 10px;
  padding-top:16px;border-top:1px solid var(--line)}
.doc-in h3{font-size:15.5px;font-weight:600;margin:22px 0 6px}
.doc-in p{margin:0 0 13px;font-size:15px;line-height:1.72;color:var(--ink-2)}
.doc-in p strong{color:var(--ink)}
.doc-in p.doc-meta{font-size:13px;color:var(--ink-3,#6b7280);margin:-6px 0 22px}
.doc-in ul,.doc-in ol{margin:0 0 14px;padding-left:22px;font-size:15px;line-height:1.72;
  color:var(--ink-2)}
.doc-in li{margin-bottom:5px}
.doc-in a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:var(--brand-line);
  text-underline-offset:3px}
.doc-in a:hover{text-decoration-color:var(--brand)}
/* FAQ 用的定义列表：问题加重、答案缩进，比一连串段落好扫 */
.doc-in dl{margin:0 0 14px}
.doc-in dt{font-weight:600;font-size:15px;margin-top:16px;color:var(--ink)}
.doc-in dd{margin:5px 0 0;padding-left:0;font-size:15px;line-height:1.72;color:var(--ink-2)}
.doc-in time{display:block;font-size:12.5px;color:var(--ink-4);margin:-8px 0 18px}
.doc-in table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px}
.doc-in th,.doc-in td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2)}
.doc-in th{background:var(--wash);font-size:12.5px;color:var(--ink-3);font-weight:600}

@media (max-width:640px){
  .doc{padding:26px 18px 48px}
  .doc-in h1{font-size:24px}
}
/* 顾问头像用真图时：仍然是个圆，但不要文字那套居中/字色。
   object-fit:cover 保证方图裁成圆之后人脸不变形。 */
.av-img{object-fit:cover;background:var(--wash)}
/* 视频卡下面的「看完整介绍图」。做成一条克制的链接而不是按钮：它是可选的
   补充内容，不该跟「播放」争注意力。 */
.vid-card .vid-more{display:inline-block;margin-top:7px;font-size:12.5px;
  color:var(--brand-ink);text-decoration:underline;
  text-decoration-color:var(--brand-line);text-underline-offset:3px}
.vid-card .vid-more:hover{text-decoration-color:var(--brand)}

/* ---------- 隐私同意条（frontend/public/chrome.js 注入） ---------- */
/* 底部贴条而不是遮罩弹窗：访客正在读的那一页比这条横幅重要，
   拦住整页只会让人闭眼点"接受"，那样的同意没有意义。 */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:1px solid var(--line,#e5e7eb);
  box-shadow:0 -6px 24px rgba(15,23,42,.10)}
.consent-in{max-width:64rem;margin:0 auto;padding:14px 20px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.consent-text{flex:1 1 20rem;min-width:0}
.consent-text b{display:block;font-size:14px;margin-bottom:4px;color:var(--ink,#111827)}
.consent-text p{margin:0 0 4px;font-size:12.5px;line-height:1.6;color:var(--ink-2,#4b5563)}
.consent-text a{color:var(--brand-ink,#1d4ed8);text-decoration:underline}
.consent-btns{display:flex;gap:8px;align-items:center;flex:0 0 auto;padding-top:2px}
.consent-btns button{font:inherit;font-size:13px;border-radius:8px;padding:7px 18px;cursor:pointer}
/* 两个按钮视觉权重接近：把"拒绝"做成灰色小字等于用设计替访客做决定。 */
.consent-no{border:1px solid var(--line,#d1d5db);background:#fff;color:var(--ink,#111827)}
.consent-yes{border:1px solid var(--brand-ink,#1d4ed8);background:var(--brand-ink,#1d4ed8);color:#fff}
.consent-no:hover{background:#f9fafb}
.consent-yes:hover{filter:brightness(1.08)}
@media (max-width:640px){
  .consent-in{padding:12px 16px;gap:10px}
  .consent-btns{width:100%}
  .consent-btns button{flex:1}
}
.consent-redo{margin-top:28px}
.consent-redo button{font:inherit;font-size:13px;border-radius:8px;padding:7px 16px;cursor:pointer;
  border:1px solid var(--line,#d1d5db);background:#fff;color:var(--ink,#111827)}
.consent-redo button:hover{background:#f9fafb}

/* 世界航线图。颜色全部走变量，因此深浅色主题各自成立；线的粗细是信息不是装饰——
   北美那条粗，因为只有它是全程自营，别为了整齐拉平。 */
.wm{display:block;width:100%;height:auto}
.wm-grat{fill:none;stroke:var(--line-2);stroke-width:.5;opacity:.55}
.wm-land{fill:var(--line);stroke:var(--line-2);stroke-width:.5}
.wm-lane{fill:none;stroke:var(--ink-4);stroke-width:1.4;stroke-linecap:round;opacity:.82}
.wm-lane.main{stroke:var(--brand-ink);stroke-width:2.6;opacity:1}
.wm-org{fill:var(--brand-ink)}
.wm-dst{fill:var(--ink-4)}
.wm-dst.main{fill:var(--brand-ink)}
.wm-t{font-size:17px;fill:var(--ink-3)}
.wm-t.main{font-size:19px;font-weight:600;fill:var(--brand-ink)}
.wm-org-t{font-size:16px;fill:var(--ink-4)}
.wm-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.wm-key .k{font-size:11px;color:var(--ink-4);display:flex;align-items:center;gap:6px}
.wm-key .k::before{content:"";width:16px;height:2px;background:var(--ink-4);border-radius:2px}
.wm-key .k.main{color:var(--brand-ink);font-weight:600}
.wm-key .k.main::before{height:3px;background:var(--brand-ink)}
/* 口岸那一条是个点不是线：它标的是起点，不是一种航线 */
.wm-key .k.ports{margin-left:auto;color:var(--ink-3)}
.wm-key .k.ports::before{width:7px;height:7px;border-radius:50%;background:var(--brand-ink)}
.legs-h{font-size:12px;font-weight:600;color:var(--ink-3);margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
/* /about 的资质说明：执照由谁持有这件事，比列几条执照名重要 */
.cred-note{font-size:12px;color:var(--ink-4);line-height:1.75;margin:8px 0 0;max-width:62ch}

/* ── 阿乐开场的五大菜单 ──────────────────────────────────────────────────
   点菜单只在本地展开，不发消息（原因见 MenuBoard.jsx 顶部）。所以这里要让
   「可点开」这件事一眼看得出来：选中的那个换底色并压住下面的面板。 */
.mboard{margin-bottom:10px}
.mboard-hint{font-size:11px;color:var(--ink-4);margin:0 0 7px}
.mboard-tabs{display:flex;flex-wrap:wrap;gap:6px}
/* 单行标签。原来是两行（大字问句 + 小字资料口径），客户定了站上站下用同一套
   叫法，于是只剩分类名一行。 */
.mtab{padding:7px 11px;border:1px solid var(--line);background:var(--paper);
  border-radius:3px;cursor:pointer;text-align:left;line-height:1.3;
  font-size:12.5px;font-weight:600;color:var(--ink-2)}
.mtab:hover{border-color:var(--brand-line)}
.mtab.on{border-color:var(--brand-ink);background:var(--card);color:var(--brand-ink)}
/* 没有可发布资料的那一类标出来，不靠访客点进去才发现 */
.mtab.gap::after{content:"·";margin-left:5px;color:var(--ink-4);font-weight:400}
.mpanel{margin-top:8px;padding:10px 11px;border:1px solid var(--brand-line);
  background:var(--card);border-radius:3px}
.mlede{font-size:12px;color:var(--ink-3);line-height:1.7;margin:0 0 8px}
.mgap{font-size:12px;color:var(--ink-3);line-height:1.75;margin:0 0 7px}
.mgap:last-of-type{margin-bottom:9px}

/* ── 顶栏的「联系专家」 ─────────────────────────────────────────────────── */
.xpert{position:relative;display:inline-block}
.xpert-open{font-size:11px;font-weight:600;color:var(--brand-ink);
  border:1px solid var(--brand-line);background:var(--paper);
  padding:4px 9px;border-radius:3px;cursor:pointer}
.xpert-open:hover{background:var(--card)}
.xpert-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  min-width:250px;padding:11px;border:1px solid var(--line);
  background:var(--card);border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.14);
  display:flex;flex-direction:column;gap:5px;text-align:left}
.xpert-pop>b{font-size:12px;margin-bottom:2px}
.xrow{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:7px 9px;border:1px solid var(--line);background:var(--paper);
  border-radius:3px;cursor:pointer;text-align:left;width:100%}
.xrow:hover{border-color:var(--brand-line)}
.xrow .n{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.xrow .r{font-size:10px;color:var(--ink-4)}
/* 「让阿乐替我判断」是默认推荐项：多数人并不知道该找谁 */
.xrow.auto{border-color:var(--brand-line);background:var(--card)}
.xrow.auto .n{color:var(--brand-ink)}
.xnote{font-size:10.5px;color:var(--ink-4);line-height:1.6;margin:3px 0 0}
.xcancel{align-self:flex-end;font-size:10.5px;color:var(--ink-4);
  background:none;border:0;cursor:pointer;padding:3px 0}

/* 无 JS 时首屏那份静态菜单：问句本身就是最该被抓取的文字 */
.chat-static>li{margin-bottom:9px;list-style:none}
.chat-static>li>b{font-size:12.5px;display:inline-block}
.chat-static>li ul{margin:3px 0 0;padding-left:16px}
.chat-static>li li{font-size:11.5px;color:var(--ink-3);line-height:1.7}
.chat-static>li p{font-size:11.5px;color:var(--ink-4);margin:3px 0 0;line-height:1.7}
/* 关于页上的注册主体一行：营业执照上的全称，字小但要在 */
.legal-line{font-size:11.5px;color:var(--ink-4);letter-spacing:.01em;margin:6px 0 18px}

/* ══════════════════════════════════════════════════════════════════════════
   中文版的排版基础
   ══════════════════════════════════════════════════════════════════════════
   英文版一个像素不动——下面全部挂在 html[lang="zh-CN"] 下。

   为什么要有这一段：此前中英两版是同一套 CSS 换文字，而这套 CSS 的排版尺度
   是按拉丁字母定的。三件事在中文下是真的坏的：

   1) 字体。--en 是 "Newsreader", Georgia, "Times New Roman" ——**一个汉字都没有**，
      而站上有 29 处 font-family:var(--en)，包括 60px 的 h1。中文全部落空，
      回退到浏览器默认衬线（Mac 宋体 / Windows SimSun）。也就是说中文标题的
      字体从来没有被设计过，是兜底的结果。
      这里不去改那 29 处，而是**重新定义 --en 与 --ui 这两个变量**：
      用到它们的地方自动跟着换，以后新增的也一样。

   2) 字体从 Google Fonts 来，而它在大陆打不开。中文版的 head 已经不再发那两个
      preconnect 与那张 stylesheet（见 backend/src/chrome.js）——请求一套到不了的
      字体，还要先付两次超时，是纯亏。所以中文**不用网络字体**：苹方、鸿蒙、
      微软雅黑本身质量就好、人人都有，零请求、零延迟、不受墙影响。

   3) 字号与字距。拉丁字母 10px 还能读，汉字笔画密度是它的好几倍，10px 已经糊了。
      下面 47 条把中文字号的下限抬到 12px（保留两档层级：角标/注脚 12px，
      次级文字 12.5–13px）。同时关掉 text-transform:uppercase（汉字没有大小写，
      这条对中文完全无效）与 .16em–.24em 的大字距（会把中文拉得七零八落）。

   这 47 条是从基础规则里逐条对出来的，不含 @media 块内的断点规则——那些是窄屏
   专用的，给它们加全局覆盖会让该缩的地方缩不下去。
   backend/tests 有一条断言盯着：基础规则里任何 font-size < 12px 都必须在这里
   有对应的中文覆盖，新加的漏掉会直接失败。 */
html[lang="zh-CN"]{
  /* 不用网络字体。顺序按覆盖面：苹方（Apple）→ 鸿蒙（HarmonyOS）→
     思源黑体（装了的话）→ 微软雅黑（Windows）→ 系统兜底。 */
  --cn:-apple-system,"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC",
       "Noto Sans CJK SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  /* 客户选了黑体不是宋体：中文屏幕阅读里宋体在小字号下吃亏，而这个站小字很多。
     标题与正文同族不同重，靠字重和字号拉开层级，比混用两族干净。 */
  --cn-display:var(--cn);
  --en:var(--cn-display);   /* 29 处 var(--en) 自动改用中文字体 */
  --ui:var(--cn);
}
html[lang="zh-CN"] body{
  line-height:1.78;          /* 中文没有词间空格，行距要比西文松 */
  letter-spacing:.01em;
}
/* 中西文混排时自动补间距（「AI 中美供应链」里数字/英文与汉字之间）。
   CSS Text 4，新版 Chrome 支持；不支持的浏览器直接忽略，不影响其它。 */
html[lang="zh-CN"] body{text-autospace:normal}
/* 标题在中文下不需要西文那么紧的字距，负字距会让汉字挤在一起 */
html[lang="zh-CN"] h1.hd{letter-spacing:0;font-weight:700}
html[lang="zh-CN"] .sec-h h2,
html[lang="zh-CN"] .band-video h2{letter-spacing:0;font-weight:700}
html[lang="zh-CN"] .dek{font-weight:400;line-height:1.6}

/* ── 字号下限 12px，并关掉 uppercase 与大字距（47 条，逐条对出） ───────── */
html[lang="zh-CN"] .eyebrow{font-size:12.5px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .hand .lb{font-size:12px;text-transform:none}
html[lang="zh-CN"] .av.sm{font-size:12px}
html[lang="zh-CN"] .chat-head i{font-size:13px}
html[lang="zh-CN"] .chat-head .st{font-size:12px}
html[lang="zh-CN"] .chat-head .tools button{font-size:12.5px}
html[lang="zh-CN"] .chips button{font-size:13px}
html[lang="zh-CN"] .chat-note{font-size:12.5px}
html[lang="zh-CN"] .dlg-bar i{font-size:13px}
html[lang="zh-CN"] .dlg-bar .switch button{font-size:13px}
html[lang="zh-CN"] .band-video .kick{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .vid-card figcaption span{font-size:13px}
html[lang="zh-CN"] .ref{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .slot-missing .tag{font-size:12px;text-transform:none}
html[lang="zh-CN"] .slot-missing .d{font-size:13px}
html[lang="zh-CN"] .adv-top .rl{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .adv .stage{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .adv .get b{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .adv .starter{font-size:13px}
html[lang="zh-CN"] .adv .open b{font-size:13px}
html[lang="zh-CN"] .jrn-h .k{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .step .d{font-size:12.5px}
html[lang="zh-CN"] .step .own span{font-size:12px}
html[lang="zh-CN"] .step .own .team{font-size:12px;text-transform:none;letter-spacing:.02em}
html[lang="zh-CN"] .svc .lm{font-size:13px}
html[lang="zh-CN"] .leg .no{font-size:12px}
html[lang="zh-CN"] .leg .zt{font-size:12px}
html[lang="zh-CN"] .leg .op{font-size:13px}
html[lang="zh-CN"] .leg .zrow .zn{font-size:12.5px}
html[lang="zh-CN"] .leg .zrow .codes{font-size:12.5px}
html[lang="zh-CN"] .kc .lbls span{font-size:12px;text-transform:none}
html[lang="zh-CN"] .kc .exp .go{font-size:13px}
html[lang="zh-CN"] .news .meta{font-size:12px;text-transform:none}
html[lang="zh-CN"] .ports .who{font-size:12px}
html[lang="zh-CN"] .cc span{font-size:12.5px}
html[lang="zh-CN"] .foot{font-size:13px}
html[lang="zh-CN"] .a2-table th{font-size:13px}
html[lang="zh-CN"] .a2-more{font-size:13px}
html[lang="zh-CN"] .wm-key .k{font-size:12.5px}
html[lang="zh-CN"] .mboard-hint{font-size:12.5px}
html[lang="zh-CN"] .xpert-open{font-size:12.5px}
html[lang="zh-CN"] .xrow .r{font-size:12px}
html[lang="zh-CN"] .xnote{font-size:12px}
html[lang="zh-CN"] .xcancel{font-size:12px}
html[lang="zh-CN"] .chat-static>li li{font-size:13px}
html[lang="zh-CN"] .chat-static>li p{font-size:13px}
html[lang="zh-CN"] .legal-line{font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   中文版独有的三块：胖页脚 · 悬浮客服条 · 页头电话
   ══════════════════════════════════════════════════════════════════════════
   都是中文 B2B 站的习惯，英文站几乎没有——所以它们只在中文版渲染
   （见 backend/src/chrome.js），这里只负责长相。 */

/* ── 胖页脚 ──────────────────────────────────────────────────────────────
   中国访客在页脚找栏目、找电话、扫公众号。英文版保持原来那一行不动。 */
.foot-cols{max-width:1120px;margin:0 auto;padding:30px var(--pad) 6px;
  display:grid;grid-template-columns:1.1fr 1.1fr 1.4fr auto;gap:28px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.fc h3{font-size:12.5px;font-weight:600;color:#F2EFE9;margin:0 0 11px}
.fc a{display:block;color:#A9B6DC;font-size:12.5px;line-height:1.5;padding:3px 0}
.fc a:hover{color:#F2EFE9}
/* 口岸那一栏左名右号：中文访客要的就是这几个号码，多点一次就少一个电话 */
.fc a span{display:inline-block;min-width:5.2em}
.fc a em{font-style:normal;color:#8C99C2;letter-spacing:.01em}
.fc-qr img{border-radius:3px;background:#fff;padding:5px}
.qr-missing{width:120px;height:120px;border:1px dashed #49527A;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:#6E7CA8;font-size:12px;text-align:center}
.qr-missing .d{color:#8C99C2;font-size:12px}
.fc-tel{margin:9px 0 0;font-size:12.5px;color:#A9B6DC}
.fc-tel b{color:#F2EFE9;font-weight:600}

/* ── 右侧悬浮客服条 ──────────────────────────────────────────────────────
   常驻在视野里，所以只放一定能用的入口：电话与二维码拿不到就整格不渲染，
   不摆占位——挂一个拨不通的号码比没有更糟。 */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:1px}
.rail-i{position:relative;width:52px;height:52px;display:flex;align-items:center;
  justify-content:center;background:var(--blue);color:#fff;cursor:pointer;
  border:0;font-size:12px;font-weight:600}
.rail-i:first-child{border-top-left-radius:4px}
.rail-i:last-child{border-bottom-left-radius:4px}
.rail-i:hover{background:var(--navy)}
.rail-pop{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);
  background:var(--navy);color:#F2EFE9;padding:7px 11px;border-radius:3px;
  font-size:12.5px;font-weight:400;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s}
.rail-i:hover .rail-pop,.rail-i:focus-visible .rail-pop{opacity:1}
.rail-qr{padding:6px}
.rail-qr img{display:block;width:120px;height:120px;border-radius:2px}
/* 窄屏上悬浮条会压住正文，收到底部一条 */
@media (max-width:860px){
  .rail{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row;gap:0}
  .rail-i{flex:1;height:46px;border-radius:0}
  .rail-pop{display:none}
}

/* ── 页头电话 ────────────────────────────────────────────────────────────
   中文 B2B 站的第一信任信号。号码为空时整块不渲染（在 chrome.js 里判断）。 */
.nav-tel{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.nav-tel span{font-size:12px;color:var(--ink-4)}
.nav-tel b{font-size:15px;font-weight:600;color:var(--brand-ink);letter-spacing:.01em}

/* ── 货物追踪：中文版放大 ────────────────────────────────────────────────
   中文物流站这是首屏级入口，英文版保持小尺寸不动。 */
html[lang="zh-CN"] .track{height:40px;border-color:var(--brand-line);background:var(--card)}
html[lang="zh-CN"] .track input{width:210px;font-size:13.5px}
html[lang="zh-CN"] .track button{font-size:13.5px;color:#fff;background:var(--blue);padding:0 16px}

/* ── 运输产品网格（只在中文版）──────────────────────────────────────────
   四条产品原先挤在卡片里一行顿号串，中文读者扫不出来。摊成网格，
   每格一个名字加一句话。见 backend/src/home.js 里 svcGrid 那段注释。 */
.svc-grid-h{font-size:12.5px;font-weight:600;color:var(--ink-3);
  margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.svc-grid a{display:flex;flex-direction:column;gap:5px;padding:13px 14px;
  border:1px solid var(--line);background:var(--paper);border-radius:3px}
.svc-grid a:hover{border-color:var(--brand-line);background:var(--card)}
.svc-grid b{font-size:14px;font-weight:600;color:var(--ink)}
.svc-grid span{font-size:12.5px;color:var(--ink-3);line-height:1.6}
@media (max-width:860px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr} }

/* 「在动货之前」这一段在中文版改浅色。原来 8 段里有 3 段深色、占去三分之一
   版面，连续深蓝读起来像科技公司官网，而不像一家能帮我办事的货代。
   深色留给片子那一段就够了——那里本来就该暗，视频才衬得出来。 */
.band-jrn.lite{background:var(--wash);border-top:1px solid var(--line)}
.band-jrn.lite .jrn-h .k{color:var(--brand-ink)}
.band-jrn.lite .jrn-h h2{color:var(--ink)}
.band-jrn.lite .jrn-h p{color:var(--ink-3)}
.band-jrn.lite .step{border-color:var(--line);background:var(--card)}
.band-jrn.lite .step .no{color:var(--ink-4)}
.band-jrn.lite .step .t{color:var(--ink)}
.band-jrn.lite .step .d{color:var(--ink-3)}
.band-jrn.lite .step .own span{color:var(--ink-3)}
.band-jrn.lite .diff{border-top-color:var(--line)}
.band-jrn.lite .diff .w{color:var(--ink-2)}
.band-jrn.lite .diff p{color:var(--ink-3)}

/* ── 顾问的全屏宿主页 /agent/:id ────────────────────────────────────────
   整屏只有一个对话框：没有导航、没有页脚、没有悬浮条。
   用 dvh 而不是 vh：移动端浏览器的地址栏收起/展开会改变 vh，用 vh 会让输入框
   被顶到可视区之外——那正是这种整屏聊天页最常见的坏法。 */
.agent-body{margin:0;height:100dvh;display:flex;flex-direction:column;
  background:var(--wash);overflow:hidden}
.agent-bar{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:0 20px;height:56px;background:var(--card);border-bottom:1px solid var(--line)}
.agent-brand img{height:30px;width:auto;display:block}
.agent-who{display:flex;align-items:center;gap:8px;margin-left:auto}
.agent-who b{font-size:14.5px;font-weight:600}
.agent-who i{font-style:normal;font-size:12.5px;color:var(--ink-4)}
.agent-main{flex:1;min-height:0;display:flex;padding:14px 14px 16px}
.agent-main>.chat,.agent-main>.hero-chat-mount{flex:1;min-width:0;display:flex}
.agent-main .hero-chat-mount>.chat{width:100%}
/* 「全屏」在这一页上没有意义——它本来就是整屏。
   **只隐藏它这一个**：原来写的是 .tools>button，把后来加的「重新开始」也一起
   藏了——那种错不报错，只是按钮无声消失，而 DOM 里查得到，更难发现。 */
.agent-body .chat-head .tools .go-full{display:none}
/* 同意条在别处是 position:fixed 浮在底部；在这一页改成参与布局。
   这一页是 height:100dvh 的 flex 列，浮层会直接压住输入框，而它的高度随
   视口宽度变（窄屏能到 290px），拿固定的 padding 去让位必然对不准。
   让它当一个普通的 flex 项，main 自己收缩，多宽的屏都对。 */
.agent-body .consent{position:static;flex:0 0 auto}
/* 这一页的对话框撑满，而不是像首页那样跟着海报的高度 */
.agent-main .chat{width:100%;height:100%;border-radius:4px}
.agent-gate{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:40px 24px;color:var(--ink-3)}
.agent-gate a{color:var(--brand-ink);font-weight:600}
@media (max-width:560px){
  .agent-bar{height:50px;padding:0 14px}
  .agent-brand img{height:26px}
  .agent-who i{display:none}
  .agent-main{padding:10px 10px 12px}
}
/* 顾问页的语言开关。这一组只有一个地址，切换是换 ?lang= 不是换路径前缀。 */
.agent-lang{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line);border-radius:3px;padding:5px 11px}
.agent-lang:hover{border-color:var(--brand-line);color:var(--brand-ink)}
/* 「重新开始」。只在有对话时出现，所以不必给它留固定位置。 */
.chat-head .tools .restart{font-size:15px;line-height:1;padding:4px 8px;color:var(--ink-4);
  border:1px solid var(--line);border-radius:3px}
.chat-head .tools .restart:hover{color:var(--brand-ink);border-color:var(--brand-line)}