/* ==========================================================================
   BUILDING CHLOE — V3 SOLUTIONS
   移动优先：先按 390px 设计，再往上验证 430 / 768 / desktop。
   BC Line 是全页贯穿的主角，不是装饰。
   ========================================================================== */

/* ══ 进度指示 ══════════════════════════════════════════════════════════
   用户任何时候都知道自己在第几段 —— 克制，但看得见。 */
.sol-prog{position:fixed;z-index:var(--z-sticky);pointer-events:none;
  opacity:0;transition:opacity .5s var(--e-soft)}
.sol-prog[data-on]{opacity:1}
.sol-prog__n{font:400 11px/1 var(--f-mono);letter-spacing:.18em;color:var(--accent-soft)}
.sol-prog__t{font:400 13px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-1);margin-top:7px;white-space:nowrap}

/* ══ 阶段 ══════════════════════════════════════════════════════════════ */
.sol-stage{position:relative}
.sol-stage__in{position:relative;z-index:2}
.sol-eyebrow{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s-4)}
.sol-eyebrow b{font:400 12px/1 var(--f-mono);letter-spacing:.2em;color:var(--accent-soft);
  font-weight:400}
.sol-eyebrow span{font:500 10.5px/1 var(--f-ui);letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-2)}
.sol-title{margin:0 0 var(--s-5)}
.sol-promise{font:300 clamp(17px,1.6vw,22px)/1.55 var(--f-body);color:var(--t-1);
  margin:0 0 var(--s-6)}
.sol-says{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-3)}
.sol-says li{font:300 15px/1.65 var(--f-body);color:var(--t-2);
  padding-left:var(--s-4);border-left:1px solid var(--line-2)}
.sol-caps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-6);padding:0;list-style:none}
.sol-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:9px 13px}

/* ══ 世界画布 ══════════════════════════════════════════════════════════ */
.sol-canvas{position:relative;width:100%;pointer-events:none}
.sol-canvas canvas{width:100%;height:100%;display:block}
.sol-scene{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}

/* 每个世界的补充元素 —— 让四段不只是线在变 */
.sol-scene__portal{width:34%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(247,243,233,.30);
  box-shadow:0 0 50px rgba(109,184,255,.20),inset 0 0 60px rgba(63,162,255,.12);
  opacity:0;transform:scale(.82);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
.sol-scene__record{width:min(240px,62%);opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--e-out),transform .7s var(--e-out)}
.sol-scene__record dl{margin:0;display:grid;gap:7px}
.sol-scene__record div{display:grid;grid-template-columns:64px 1fr;gap:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line-3)}
.sol-scene__record dt{font:500 9px/1.4 var(--f-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t-2)}
.sol-scene__record dd{margin:0;font:300 12px/1.4 var(--f-body);color:var(--t-1)}
.sol-stage[data-active] .sol-scene__portal,
.sol-stage[data-active] .sol-scene__record{opacity:1;transform:none}

/* ══ 移动端优先（≤900px）══════════════════════════════════════════════
   竖向 BC 轨在左，内容在右。单手滑也看得懂自己在第几段。 */
.sol-rail{position:absolute;left:0;top:0;bottom:0;width:32px;pointer-events:none}
.sol-rail__track{position:absolute;left:15px;top:0;bottom:0;width:1px;
  background:var(--line-2)}
.sol-rail__lit{position:absolute;left:15px;top:0;width:1px;height:var(--lit,0%);
  background:linear-gradient(180deg,var(--accent-soft),rgba(109,184,255,.45));
  box-shadow:0 0 10px rgba(63,162,255,.5)}
.sol-rail__node{position:absolute;left:9px;width:13px;height:13px;border-radius:50%;
  background:var(--ground);border:1px solid var(--line-1);
  transition:border-color .4s var(--e-soft),box-shadow .4s var(--e-soft),
             transform .4s var(--e-out)}
.sol-rail__node::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--t-4);transition:background .4s var(--e-soft)}
.sol-rail__node[data-on]{border-color:var(--accent-soft);box-shadow:var(--glow-sm)}
.sol-rail__node[data-on]::after{background:var(--accent-soft)}
.sol-rail__node[data-cur]{transform:scale(1.45);box-shadow:var(--glow-md)}

@media (max-width:900px){
  .sol-hub{position:relative;padding-left:52px}
  .sol-stage{padding-block:var(--s-8)}
  .sol-canvas{height:46svh;margin-bottom:var(--s-6)}
  .sol-prog{left:0;top:auto;bottom:18px;width:100%;text-align:center;
    display:flex;align-items:baseline;justify-content:center;gap:10px}
  .sol-prog__t{margin-top:0}
  /* 手机标题手工控制断行，不让浏览器随便切（.brk 已在 v3.css 全局 block）*/
  .sol-title{font-size:clamp(34px,10.5vw,52px);line-height:.92}
}

/* ══ 桌面（≥901px）══════════════════════════════════════════════════════
   画布固定在右侧持续变形，内容在左侧滚过 —— 变形因此看得非常清楚。 */
@media (min-width:901px){
  .sol-hub{position:relative}
  .sol-rail{display:none}
  .sol-sticky{position:sticky;top:0;height:100svh;
    width:52%;margin-left:48%;pointer-events:none;z-index:1}
  .sol-canvas{position:absolute;inset:0;height:100%;margin:0}
  .sol-stages{position:relative;z-index:2;margin-top:-100svh}
  .sol-stage{min-height:88svh;display:flex;align-items:center;
    padding-block:var(--s-8)}
  .sol-stage--long{min-height:118svh}     /* AUTOMATE 最长最沉浸 */
  .sol-stage--short{min-height:82svh}
  .sol-stage__in{width:44%;margin-left:72px}   /* 给左侧进度轨让位 */
  .sol-prog{left:calc(var(--gut) - 4px);top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;gap:0}
  .sol-prog__t{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.28em;
    margin-top:14px}
  .sol-title{font-size:clamp(44px,5.4vw,84px);line-height:.92}
}

/* ══ 支柱页 ════════════════════════════════════════════════════════════ */
.pil-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;
  overflow:hidden;padding-block:var(--s-9) var(--s-8)}
.pil-hero__canvas{position:absolute;inset:0;z-index:0;opacity:.9}
.pil-hero__in{position:relative;z-index:2;width:100%}
.pil-hero__says{font:400 clamp(24px,3.4vw,52px)/1.24 var(--f-display);
  font-style:italic;color:var(--t-hi);max-width:20ch;margin:var(--s-5) 0 0;
  letter-spacing:-.004em}

/* 现在 → 应该：同一批元素真的位移，不是两张图 */
.morph{position:relative;min-height:clamp(320px,52svh,520px)}
.morph__items{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.morph__items li{position:absolute;left:var(--x);top:var(--y);
  transform:translate(var(--dx,0),var(--dy,0)) scale(var(--sc,1));
  transition:transform 1.1s var(--e-out),opacity .6s var(--e-soft),
             border-color .8s var(--e-soft),color .8s var(--e-soft)}
.morph__items span{display:inline-block;padding:9px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-1);background:var(--surface);
  font:500 11px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t-2);white-space:nowrap}
.morph[data-morphed] .morph__items span{border-color:rgba(109,184,255,.5);color:var(--ice)}
.morph__spine{position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--accent-soft),transparent);
  opacity:0;transition:opacity .8s var(--e-out);box-shadow:var(--glow-sm)}
.morph[data-morphed] .morph__spine{opacity:1}
.morph__out{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  opacity:0;transition:opacity .7s var(--e-out) .3s;
  font:400 clamp(17px,2vw,26px)/1.2 var(--f-display);text-transform:uppercase;
  letter-spacing:.02em;color:var(--t-hi);white-space:nowrap}
.morph[data-morphed] .morph__out{opacity:1}
.morph__label{position:absolute;left:0;top:0;font:400 11px/1 var(--f-mono);
  letter-spacing:.16em;color:var(--t-2)}

.pil-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  list-style:none;margin:0;padding:0}
.pil-flow li{display:flex;align-items:center;gap:10px;
  font:400 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--t-2)}
.pil-flow li::after{content:"→";color:var(--accent-soft);margin-left:4px}
.pil-flow li:last-child::after{content:""}

.pil-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line-3);border:1px solid var(--line-3)}
.pil-caps > *{background:var(--ground);padding:var(--s-5);display:grid;gap:10px;
  transition:background .3s var(--e-soft)}
.pil-caps a:hover{background:#0D1017}
.pil-caps h3{font:400 16px/1.3 var(--f-ui);color:var(--t-hi);margin:0}
.pil-caps p{font:300 13.5px/1.6 var(--f-body);color:var(--t-2);margin:0}
.pil-caps .cap-note{font:400 10px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--t-2)}

/* 触控目标 ≥44px */
@media (max-width:900px){
  .sol-caps li,.pil-flow li{min-height:44px;display:inline-flex;align-items:center}
  .pil-caps > *{min-height:88px}
  .morph{min-height:64svh}
  /* 散落元素是 left:var(--x) 绝对定位 + nowrap 的长句子，
     390px 上「The same six questions, all day」一条就把页面撑出 100px。
     宽度按到右边缘还剩多少来限，并允许折行。 */
  .morph__items li{max-width:calc(100% - var(--x))}
  .morph__items span{white-space:normal;max-width:100%;font-size:10px;padding:8px 11px}
}

@media (prefers-reduced-motion:reduce){
  .sol-scene__portal,.sol-scene__record{opacity:1!important;transform:none!important}
  .morph__spine,.morph__out{opacity:1!important}
  /* reduced-motion 下没有滚动驱动的旅程可跟，这个 fixed 指示器只会一直
     压在正文上。原来写的是 opacity:1!important，正好是反的。 */
  .sol-prog{display:none}
}

/* 桌面用右侧固定画布，各段的小画布隐藏 */
@media (min-width:901px){ .sol-canvas--m{display:none} }
@media (max-width:900px){ .sol-sticky{display:none} }

/* 支柱页 Hero 画布铺满 hero 区 */
.pil-hero__canvas{position:absolute;inset:0;height:100%}
.pil-hero__canvas canvas{width:100%;height:100%}
.faq__i{padding:var(--s-5) 0;border-bottom:1px solid var(--line-3)}
.faq__i dt{font:400 16px/1.4 var(--f-ui);color:var(--t-hi);margin-bottom:10px}
.faq__i dd{margin:0;font:300 15px/1.7 var(--f-body);color:var(--t-2)}

/* ══ 支柱页桌面构图（BATCH 10）════════════════════════════════════════
   原状：六个段落全是「左对齐 + max-width」，在 1440 上右半边整片是空的，
   读起来像没做完。这里不加任何内容，只把「眉标 + 标题」和「正文」拆成两栏 ——
   标题因此可以更大，正文有自己的量感，右边不再是空地。
   ≤1080 保持单栏，手机完全不受影响。 */
@media (min-width:1081px){
  .pil-split > .bc-wrap{
    display:grid;
    grid-template-columns:minmax(0,.40fr) minmax(0,.60fr);
    column-gap:clamp(56px,6.5vw,120px);
    align-items:start}
  .pil-split__head{grid-column:1;position:sticky;top:calc(var(--nav-h,74px) + var(--s-7))}
  .pil-split__head .t-label{margin:0}
  .pil-split__head h2{margin:var(--s-5) 0 0 !important;max-width:none !important;
    font-size:clamp(34px,3.5vw,54px);line-height:1.06}
  .pil-split > .bc-wrap > *:not(.pil-split__head){grid-column:2;max-width:none}
  .pil-split > .bc-wrap > *:not(.pil-split__head):first-of-type{margin-top:0}

  /* 能力网格在右栏里改成两列，卡片因此更宽、更有分量，也不会留空格子 */
  .pil-split .pil-caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 一行式流程在右栏里换行更自然 */
  .pil-split .pil-flow{flex-wrap:wrap;row-gap:var(--s-4)}
  /* FAQ 那一段没有 h2，眉标独占左栏，问答整块在右 */
  .pil-split > .bc-wrap > .faq{margin-top:0 !important}
}