/* ==========================================================================
   BUILDING CHLOE — HOW IT WORKS / THE BUILDING CHLOE LINE™
   --------------------------------------------------------------------------
   这一页有两条 Flow，必须一眼就知道不是同一个东西（§06）：

     客户 Journey    Canvas · 会变形 · 钉住 · 电影感 · 暗
     Building Chloe  没有画布 · 纯文字与细线 · 正常滚动 · 暖白 · 安静

   媒介不同，才不会混。
   ========================================================================== */

/* 这一页的区块标题句子比别的页长，尺寸要小一档 ——
   4.4vw 在 1440 上会把「It isn't a process diagram」排成六行的墙。 */
.bc-hiw .sec-head .t-h1{font-size:clamp(28px,3.5vw,50px);max-width:20ch}
.bc-hiw.bc-zh .sec-head .t-h1{font-size:clamp(25px,3.1vw,44px);max-width:17em}

/* ══ 00 HERO ═══════════════════════════════════════════════════════════
   页面打开时 Journey 还不存在：一颗 Node，一条几乎看不见的线。 */
.hiw-hero{position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;padding-block:clamp(96px,12vh,150px) clamp(80px,10vh,120px)}
.hiw-hero__atmos{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 76% 52%,rgba(109,184,255,.09),transparent 62%)}
.hiw-hero__line{position:absolute;right:3%;top:50%;transform:translateY(-50%);
  width:min(48%,600px);aspect-ratio:1/.78;z-index:4;pointer-events:none}
.hiw-hero__line canvas{width:100%;height:100%;display:block;transition:opacity .3s linear}
.hiw-hero[data-thread] .hiw-hero__line canvas{opacity:0}
.hiw-hero__in{position:relative;z-index:var(--z-raised);width:100%;min-width:0}
.hiw-hero__eyebrow{opacity:0;transform:translateY(10px);
  transition:opacity .9s var(--e-out) .25s,transform .9s var(--e-out) .25s}
[data-hero-in] .hiw-hero__eyebrow{opacity:1;transform:none}
.hiw-hero__h1{margin:var(--s-5) 0 0;max-width:min(17ch,100%)}
.hiw-hero__h1 .clipline--sm > span{display:block;font-size:.42em;letter-spacing:.06em;
  line-height:1.1;color:var(--t-1)}
.hiw-hero__h1 .clipline--lg > span{display:block;letter-spacing:-.005em}
.hiw-hero__lede{margin-top:var(--s-6);max-width:min(46ch,100%);opacity:0;
  transition:opacity 1s var(--e-out) 1.3s}
[data-hero-in] .hiw-hero__lede{opacity:1}
.hiw-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;
  margin-top:var(--s-7);opacity:0;transform:translateY(12px);
  transition:opacity 1s var(--e-out) 1.5s,transform 1s var(--e-out) 1.5s}
[data-hero-in] .hiw-hero__cta{opacity:1;transform:none}
/* Hero 退场：复用 Signature Motion 的 --he2（L-001） */
.hiw-hero__h1{clip-path:inset(0 0 calc(var(--he2,0) * 102%) 0)}
.hiw-hero[data-thread] .hiw-hero__h1 .clipline{
  transform:translateY(calc(var(--he2,0) * -46px)) scale(calc(1 - var(--he2,0) * .03));
  transform-origin:left top}
.hiw-hero[data-thread] .hiw-hero__in{opacity:calc(1 - var(--he2,0) * .96)}
.hiw-hero .bc-particles{opacity:calc(1 - var(--he,0))}

/* ══ 01 这条线是什么 ══════════════════════════════════════════════════ */
  grid-template-columns:repeat(5,1fr);background:var(--line-3);border:1px solid var(--line-3)}
  align-content:start}

/* ══ 02 FOLLOW ONE CUSTOMER ════════════════════════════════════════════
   整页主干。一条线、一颗 Node，五个形态，全程不重建。 */
.hiw-fol{position:relative;height:760vh;background:var(--void)}
.hiw-fol__stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;
  align-items:center}
/* 暖白靠硬边圆形擦除推进 —— 交叉淡入中间必然有一段灰死区，对比度会塌（原型验过） */
.hiw-fol__dark{position:absolute;inset:0;background:var(--void)}
.hiw-fol__ivory{position:absolute;inset:0;background:var(--ivory);
  clip-path:circle(calc(var(--lit,0) * 148%) at var(--ox,72%) var(--oy,50%))}
.hiw-fol__in{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:var(--s-8);align-items:center;
  /* 左边多让 72px 给固定的进度指示，不然竖排的站名会压在标题上 */
  padding-left:calc(var(--gut) + 72px);padding-right:var(--gut)}
/* 竖轨只在手机上出现；桌面不给它定位，里面的 track 会跑去贴 sticky 的左缘 */
.hiw-fol__rail{display:none}

.hiw-fol__copy{opacity:var(--copy,1);transition:opacity .2s linear}
.hiw-fol__k{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s-4)}
.hiw-fol__k b{font:400 12px/1 var(--f-mono);letter-spacing:.2em;color:var(--accent-soft);
  font-weight:400;transition:color .18s linear}
.hiw-fol__k span{font:500 10px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;
  color:var(--t-2);transition:color .18s linear}
.hiw-fol__t{margin:0;font:400 clamp(34px,4.6vw,74px)/.98 var(--f-display);
  text-transform:uppercase;letter-spacing:.005em;color:var(--ivory);
  transition:color .18s linear}
.hiw-fol__sub{margin:var(--s-3) 0 var(--s-4);font:300 clamp(15px,1.5vw,20px)/1.5 var(--f-body);
  color:var(--t-1);transition:color .18s linear}
.hiw-fol__d{margin:0;max-width:40ch;font:300 15px/1.75 var(--f-body);
  color:rgba(174,179,187,.80);transition:color .18s linear}
.hiw-fol__caps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:var(--s-5) 0 0;padding:0}
.hiw-fol__caps li{font:400 10.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-2);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:8px 12px;
  transition:color .18s linear,border-color .18s linear}
/* 擦除扫过文案之后才翻色，由 JS 按真实矩形判定 */
[data-copy-lit="1"] .hiw-fol__t{color:#14171C}
[data-copy-lit="1"] .hiw-fol__sub{color:rgba(20,23,28,.88)}
[data-copy-lit="1"] .hiw-fol__d{color:rgba(20,23,28,.66)}
[data-copy-lit="1"] .hiw-fol__k b{color:#1F6FD0}
[data-copy-lit="1"] .hiw-fol__k span{color:rgba(20,23,28,.42)}
[data-copy-lit="1"] .hiw-fol__caps li{color:rgba(20,23,28,.55);border-color:rgba(20,23,28,.16)}

.hiw-fol__stage{position:relative;aspect-ratio:1/.74}
.hiw-fol__stage canvas{width:100%;height:100%;display:block}
/* LEAD 001 —— 骑在几何上的那张卡，全程同一个 DOM 元素 */
.lead{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;z-index:3}
.lead__dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:#F5F8FF;
  box-shadow:0 0 14px rgba(109,184,255,.95),0 0 34px rgba(63,162,255,.5)}
.lead__card{position:absolute;top:-12px;white-space:nowrap;
  border:1px solid color-mix(in srgb, rgba(109,184,255,.45), rgba(31,111,208,.55) calc(var(--ll,0) * 100%));
  border-radius:var(--r-xs);padding:9px 12px;
  background:color-mix(in srgb, rgba(10,12,18,.88), rgba(247,243,233,.94) calc(var(--ll,0) * 100%));
  font:400 10px/1.7 var(--f-mono);letter-spacing:.08em;
  color:color-mix(in srgb, rgba(245,248,255,.9), rgba(20,23,28,.84) calc(var(--ll,0) * 100%))}
.lead__card b{display:block;letter-spacing:.18em;margin-bottom:3px;font-weight:400;
  color:color-mix(in srgb,#6DB8FF,#1F6FD0 calc(var(--ll,0) * 100%))}
.lead[data-flip] .lead__card{right:16px;left:auto}
.lead:not([data-flip]) .lead__card{left:18px}
  text-transform:uppercase;white-space:nowrap;opacity:0;
  color:color-mix(in srgb, rgba(174,179,187,.6), rgba(20,23,28,.5) calc(var(--ll,0) * 100%));
  transition:opacity .5s var(--e-soft)}
/* 固定进度：和 Solutions / AI 页同一个组件 */
.hiw-fol .sol-prog__t{transition:color .18s linear}
[data-copy-lit="1"] .sol-prog__n{color:#1F6FD0}
[data-copy-lit="1"] .sol-prog__t{color:rgba(20,23,28,.7)}

/* ══ 03 ONE DATA SPINE ═════════════════════════════════════════════════ */
.hiw-spine__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:var(--s-8);align-items:start;margin-top:var(--s-7)}
.hiw-spine__col > .t-label{margin:0 0 var(--s-4)}
.hiw-spine__old{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line-3);border:1px solid var(--line-3)}
.hiw-spine__old li{background:var(--ground);padding:var(--s-4) var(--s-5);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.hiw-spine__old b{font:400 14px/1.4 var(--f-ui);color:var(--t-2);font-weight:400}
.hiw-spine__old i{font:400 10px/1 var(--f-mono);letter-spacing:.14em;font-style:normal;
  color:var(--t-4);opacity:0;transition:opacity .5s var(--e-soft)}
.hiw-spine__old li[data-on] i{opacity:1;color:var(--t-2)}
.hiw-spine__rec{border:1px solid rgba(109,184,255,.34);border-radius:var(--r-card);
  padding:var(--s-6);background:rgba(18,22,29,.55)}
.hiw-spine__rec > .t-label{margin:0 0 var(--s-4)}
.hiw-spine__rows{margin:0;display:grid;gap:9px}
.hiw-spine__rows > div{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px;
  padding-bottom:8px;border-bottom:1px solid var(--line-3);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.hiw-spine__rows > div[data-on]{opacity:1;transform:none}
.hiw-spine__rows dt{font:500 10px/1.5 var(--f-ui);letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-2)}
.hiw-spine__rows dd{margin:0;font:300 13.5px/1.5 var(--f-body);color:var(--t-1)}
.hiw-spine__note{margin:var(--s-6) 0 0;max-width:56ch;color:var(--t-2)}

/* ══ 04 AI / 人 / 系统 ═════════════════════════════════════════════════ */
.hiw-mom{list-style:none;margin:var(--s-7) 0 0;padding:0;display:grid;gap:var(--s-6)}
.hiw-mom > li{display:grid;grid-template-columns:minmax(0,84px) minmax(0,1fr);
  gap:var(--s-5);align-items:start}
.hiw-mom__t{font:400 13px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--accent-soft)}
.hiw-mom__q{margin:0 0 var(--s-4);font:400 clamp(18px,1.9vw,26px)/1.5 var(--f-display);
  font-style:italic;color:var(--t-hi);max-width:34ch}
.hiw-mom__who{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hiw-mom__who li{display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr);gap:var(--s-4);
  font:300 14px/1.6 var(--f-body);color:var(--t-2)}
.hiw-mom__who b{font:500 10px/1.6 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-2);font-weight:500}
/* 上面那两个时刻已经把角色分工演完了；这里只做一句收口，
   不再堆三张 Feature Card —— 那是「又一个 SaaS 页」的写法。 */
.hiw-roles{list-style:none;margin:var(--s-8) 0 0;padding:var(--s-6) 0 0;
  border-top:1px solid var(--line-2);display:grid;gap:var(--s-4)}
.hiw-roles li{display:grid;grid-template-columns:minmax(0,84px) minmax(0,1fr);
  gap:var(--s-5);align-items:baseline}
.hiw-roles b{font:400 clamp(17px,1.7vw,22px)/1 var(--f-display);text-transform:uppercase;
  letter-spacing:.04em;color:var(--t-hi);font-weight:400}
.hiw-roles span{font:300 14.5px/1.6 var(--f-body);color:var(--t-2)}
.hiw-close{margin:var(--s-7) 0 0;font:400 clamp(20px,2.4vw,34px)/1.35 var(--f-display);
  text-transform:uppercase;letter-spacing:.02em;color:var(--t-hi);max-width:22ch}

/* ══ 05 成交之后 + 公司内部 ════════════════════════════════════════════ */
.hiw-dual{margin-top:var(--s-7);display:grid;gap:0}
.hiw-dual__h{display:grid;grid-template-columns:1fr 92px 1fr;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line-2)}
.hiw-dual__h span:nth-child(2){text-align:center}
.hiw-dual__r{display:grid;grid-template-columns:1fr 92px 1fr;gap:var(--s-4);
  align-items:center;padding-block:var(--s-4);border-bottom:1px solid var(--line-3)}
.hiw-dual__r b{font:400 16px/1.4 var(--f-ui);color:var(--t-1);font-weight:400}
.hiw-dual__r > b:last-child{text-align:right}
.hiw-dual__link{position:relative;height:1px;background:var(--line-2);overflow:hidden}
.hiw-dual__link::after{content:"";position:absolute;inset:0;background:var(--accent-soft);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--e-out)}
.hiw-dual__r[data-on] .hiw-dual__link::after{transform:scaleX(1)}
.hiw-dual__r[data-on] b{color:var(--t-hi)}

/* ══ 06 HOW BUILDING CHLOE WORKS —— 暖白，编辑体，没有画布 ═════════════ */
.hiw-met{position:relative}
.hiw-met__list{list-style:none;margin:var(--s-8) 0 0;padding:0;position:relative}
.hiw-met__list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--line-2)}
.hiw-met__list li{position:relative;padding:0 0 var(--s-7) clamp(56px,7vw,110px)}
.hiw-met__list li::before{content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;
  border-radius:50%;background:var(--ground);border:1px solid var(--accent-soft)}
.hiw-met__n{position:absolute;left:clamp(20px,3vw,44px);top:0;
  font:400 12px/1.6 var(--f-mono);letter-spacing:.18em;color:var(--accent-soft)}
.hiw-met__list h3{margin:0 0 10px;font:400 clamp(24px,2.8vw,42px)/1.06 var(--f-display);
  text-transform:uppercase;letter-spacing:.01em;color:var(--t-hi)}
.hiw-met__list p{margin:0;max-width:52ch;font:300 15px/1.8 var(--f-body);color:var(--t-2)}

/* ══ 07 为什么先做 Blueprint ═══════════════════════════════════════════ */
.hiw-bp{border-left:2px solid var(--accent-soft);padding-left:var(--s-6);
  margin-top:var(--s-8);max-width:60ch}
.hiw-bp p{margin:0 0 var(--s-4);font:300 clamp(16px,1.6vw,20px)/1.8 var(--f-body);color:var(--t-1)}
.hiw-bp p:last-child{margin-bottom:0}
.hiw-bp strong{font-weight:400;color:var(--t-hi)}
.hiw-bp__price{font:400 13px/1 var(--f-mono);letter-spacing:.16em;color:var(--accent-soft);
  display:inline-block;margin-top:var(--s-3)}

/* ══ 08 我们接什么 ═════════════════════════════════════════════════════ */
.hiw-own__k{margin:var(--s-6) 0 0;font:400 clamp(19px,2.1vw,30px)/1.4 var(--f-display);
  text-transform:uppercase;letter-spacing:.02em;color:var(--t-hi);max-width:26ch}
.hiw-own__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);margin-top:var(--s-7)}
.hiw-own__cols ul{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:9px}
.hiw-own__cols li{font:300 14.5px/1.5 var(--f-body);color:var(--t-2);
  padding-left:16px;position:relative}
.hiw-own__cols li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;
  background:var(--line-1)}
.hiw-own__cols > div:last-child li::before{background:var(--accent-soft)}
.hiw-own__cols > div:last-child li{color:var(--t-1)}

/* ══ 09 FINAL CTA ══════════════════════════════════════════════════════ */
.hiw-fin{position:relative;min-height:92svh;display:grid;place-items:center;
  overflow:hidden;padding-block:var(--s-sec);background:#06070B}
.hiw-fin__horizon{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);
  width:130%;aspect-ratio:2/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(109,184,255,.16),transparent 72%);filter:blur(8px)}
.hiw-fin__in{position:relative;text-align:center}
.hiw-fin__h{margin:var(--s-5) auto var(--s-6);max-width:17ch;font-size:clamp(34px,5vw,74px)}
.hiw-fin__in .t-lede{margin-inline:auto;max-width:46ch}
.hiw-fin__cta{margin-top:var(--s-7);display:flex;flex-wrap:wrap;gap:var(--s-4);
  align-items:center;justify-content:center}
.hiw-fin__soft{font:400 12px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-2);padding:14px 4px;min-height:44px;display:inline-flex;align-items:center;
  transition:color var(--d-base) var(--e-soft)}
.hiw-fin__soft:hover{color:var(--ice)}

/* ══════════════════════════════════════════════════════════════════════
   手机 390 —— 这一页手机是核心体验，应该比桌面更好懂（§13 / §18）
   一条竖线从上贯到下，一颗 LEAD Node 一路往下走。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .hiw-spine__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .hiw-own__cols{grid-template-columns:1fr;gap:var(--s-6)}
}

@media (max-width:900px){
  /* ── HERO：线在上、字在下 ── */
  .hiw-hero{min-height:100svh;align-items:flex-end;
    padding-top:clamp(196px,27svh,300px);padding-bottom:clamp(44px,6vh,78px)}
  .hiw-hero__line{position:absolute;right:-6%;top:2%;transform:none;
    width:min(100vw,540px);aspect-ratio:1/.72;opacity:.92}
  .hiw-hero__h1{max-width:none}


  /* ── FOLLOW ONE CUSTOMER：竖线 + 竖轨，一屏一件事 ── */
  .hiw-fol{height:620svh}
  .hiw-fol__stick{align-items:center}
  .hiw-fol__in{grid-template-columns:1fr;gap:var(--s-5);padding-left:calc(var(--gut) + 30px)}
  /* 竖轨贴左缘，Node 沿着它往下落 */
  .hiw-fol__rail{display:block;position:absolute;left:var(--gut);top:0;bottom:0;width:26px;z-index:1}
  .hiw-fol__stage{aspect-ratio:auto;height:38svh;order:-1}
  .hiw-fol__t{font-size:clamp(34px,10vw,52px);line-height:1.0}
  .hiw-fol__d{max-width:none;font-size:14.5px}
  .hiw-fol__caps li{min-height:44px;display:inline-flex;align-items:center}
  /* 手机上世界标签太挤，只留两个 */
  /* .bc-tag 默认 nowrap，这句免责声明比 390px 屏幕还宽，会把整页撑出横向滚动 */
  .sec-head .bc-tag{white-space:normal;text-align:left;max-width:100%}
  .lead__card{font-size:10px;padding:7px 10px}

  /* ── 其余 ── */
  .hiw-mom > li,.hiw-roles li{grid-template-columns:1fr;gap:var(--s-2, 8px)}
  .hiw-dual__h,.hiw-dual__r{grid-template-columns:1fr 44px 1fr;gap:var(--s-3)}
  .hiw-dual__r b{font-size:14px}
  .hiw-met__list li{padding-left:0;padding-top:var(--s-6)}
  .hiw-met__list::before{display:none}
  .hiw-met__list li::before{display:none}
  .hiw-met__n{position:static;display:block;margin-bottom:8px}
  .hiw-met__list h3{font-size:clamp(24px,7.4vw,34px)}
  .hiw-bp{padding-left:var(--s-5)}
  .hiw-fin{min-height:88svh}
}

@media (max-width:430px){
  .hiw-hero__cta{gap:var(--s-3)}
  .hiw-fol__in{padding-left:calc(var(--gut) + 26px)}
  .hiw-dual__h,.hiw-dual__r{grid-template-columns:1fr 28px 1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   reduced-motion —— 两条 Flow 的内容都要完整可读，一个字都不能少
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .clipline > span{transform:none!important}
  .hiw-hero__eyebrow,.hiw-hero__lede,.hiw-hero__cta{opacity:1!important;transform:none!important}
  .hiw-hero__h1{clip-path:none!important}
  .hiw-hero__line{opacity:1!important}

  /* 旅程不钉住：五段全部静态排出来，语义列表显形给人看 */
  .hiw-fol{height:auto}
  .hiw-fol__stick{position:static;height:auto;padding-block:var(--s-sec)}
  .hiw-fol__ivory{display:none}
  .hiw-fol__copy{opacity:1!important}
  .hiw-fol__in{grid-template-columns:1fr}
  .hiw-fol__stage{height:clamp(220px,32vh,320px);aspect-ratio:auto}
  .lead{display:none}
  .sol-prog{display:none}
  [data-journey-semantic]{position:static;width:auto;height:auto;margin:var(--s-7) 0 0;
    padding:0;clip:auto;clip-path:none;white-space:normal;overflow:visible;
    list-style:none;display:grid;gap:1px;background:var(--line-3);border:1px solid var(--line-3)}
  [data-journey-semantic] li{background:var(--ground);padding:var(--s-5);display:grid;gap:7px}
  [data-journey-semantic] li > span:first-child{font:400 11px/1 var(--f-mono);
    letter-spacing:.18em;color:var(--accent-soft)}
  [data-journey-semantic] strong{font:400 18px/1.3 var(--f-ui);color:var(--t-hi);font-weight:400}
  [data-journey-semantic] li > span{font:300 13.5px/1.65 var(--f-body);color:var(--t-2)}
  [data-journey-semantic] li > span:last-child{color:var(--t-2);font-size:12px}

  .hiw-spine__old li i,.hiw-spine__rows > div{opacity:1!important;transform:none!important}
  .hiw-dual__link::after{transform:scaleX(1)!important}
  .hiw-dual__r b{color:var(--t-hi)}
}