/* B · NAS 私有云：只有这一页用的模块。公共版式在 ../../case-kit.css。
   来源：drafts/b-layout/final 合并稿（已验收）。 */
:root{--m:clamp(190px,min(21vw,33vh),330px)}   /* 封面主机宽度 */

/* ============================================================
   00 封面：三台手机扇形 + 描边水印
   ============================================================ */
.cover{position:relative;padding-top:0;background:var(--cream)}
.cover-stage{position:relative;height:max(100vh,720px,calc(clamp(280px,38vh,400px) + var(--m)*2.3));min-height:720px}
.cover-head{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding-top:clamp(64px,9vh,104px);text-align:center}
.cover-title{font-size:var(--fs-hero);line-height:1.04;font-weight:700;letter-spacing:-.025em;margin:.3em 0 .35em}
.cover-concl{max-width:24em;margin-inline:auto;text-wrap:balance;font-size:24px;line-height:1.5;font-weight:500;color:#3b3a3a}
.cover-concl em{font-style:normal;color:var(--red);font-weight:700}

.wm{position:absolute;z-index:1;left:0;right:0;top:clamp(200px,31vh,310px);display:flex;justify-content:center;pointer-events:none;
  transform:translate3d(0,var(--py,0px),0)}
.wm svg{display:block;width:100%;height:auto;overflow:visible}
.wm text{font-family:var(--mono);font-weight:400;font-size:234px;letter-spacing:-6px;fill:none;stroke:url(#wm-g);stroke-width:1px;vector-effect:non-scaling-stroke}

.fanr{position:absolute;z-index:2;left:50%;top:clamp(280px,38vh,400px);width:0;height:0}
.fan-item{position:absolute;left:0;top:0;transform:translate3d(calc(var(--x) - 50%),calc(var(--y) + var(--py,0px)),0) rotate(var(--r))}
.fan-item .phone{animation:rise 1.5s var(--ease) var(--d,0s) both}
.fi-c{--x:0px;--y:0px;--r:0deg;z-index:3}
/* 两侧同高同角度，边角压在中心手机后面一点 */
.fi-l{--x:calc(var(--m)*-.85);--y:calc(var(--m)*.24);--r:-7deg;z-index:2}
.fi-r{--x:calc(var(--m)*.85);--y:calc(var(--m)*.24);--r:7deg;z-index:2}
.fi-c .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 calc(var(--w)*.14) calc(var(--w)*.3) rgba(60,20,26,.38),0 calc(var(--w)*.03) calc(var(--w)*.08) rgba(40,16,18,.25)}
@keyframes rise{from{opacity:0;transform:translateY(90px)}to{opacity:1;transform:none}}
/* 从首页转场进来：标题与中间手机是共享元素，首帧就要完整可见，否则一镜到底会飞向透明目标 */
.vt-in .cover-title.rv{opacity:1;transform:none;transition:none}
.vt-in .fi-c .phone{animation:none}

.cover-info{position:relative;z-index:3;width:min(var(--w),100% - var(--g)*2);margin-inline:auto;padding:clamp(40px,8vh,90px) 0 clamp(110px,18vh,200px)}
/* 本文件在 case-kit 之后加载，会盖掉它 ≥1240 时给左侧目录让出的 240px，这里补回，和下方正文对齐 */
@media (min-width:1240px){.cover-head,.cover-info{width:min(var(--w),100% - 480px)}}
.lede{max-width:30em;font-size:20px;line-height:1.8;color:#3b3a3a}
.cover-info .lede{max-width:none;text-align:center}   /* Owner 10-22：封面这句排一行、居中 */
@media (min-width:1240px){.cover-info .lede{white-space:nowrap}}

/* ============================================================
   02 卡点：便当盒 + 7 段路径
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;margin-top:56px;
  grid-template-areas:"copy copy copy copy copy copy copy red red red red red" "copy copy copy copy copy copy copy mock mock mock mock mock"}
.c-copy{grid-area:copy;display:flex;flex-direction:column;gap:18px;background:var(--cream);border:1px solid rgba(17,18,20,.06)}
.c-copy .lead{font-size:var(--fs-lead);line-height:1.38;font-weight:700;letter-spacing:-.015em;max-width:17em}
.c-copy p:not(.mn):not(.lead){font-size:var(--fs-card);line-height:1.9;color:#55585d;max-width:34em}
.glyphs{list-style:none;margin-top:auto;padding-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid rgba(17,18,20,.12)}
.glyphs li{display:flex;align-items:baseline;gap:12px;padding-top:14px}
.glyphs b{font-size:var(--fs-num);line-height:1;font-weight:700;letter-spacing:-.03em}
.glyphs span{font-size:13px;color:#8b8f95}
.c-red{grid-area:red;background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.c-red .mn{font-family:var(--sans);font-size:14px;letter-spacing:.04em;text-transform:none;line-height:1.7;color:rgba(255,255,255,.86)}
.red-big{display:flex;align-items:flex-end;gap:16px}
.red-big b{font-family:var(--mono);font-weight:700;font-size:var(--fs-display);line-height:.78;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.red-big span{font-size:22px;font-weight:700;line-height:1.3;padding-bottom:6px}
.c-mock{grid-area:mock;min-height:340px;padding-bottom:0;color:#fff;
  background:radial-gradient(120% 70% at 50% 100%,rgba(172,64,80,.42),rgba(172,64,80,0) 62%),linear-gradient(180deg,#221a16,#17110e)}
.c-mock .mn{position:relative;z-index:2;font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.6)}
.mock-phones{position:absolute;z-index:1;left:0;right:0;bottom:0;top:64px;display:flex;justify-content:center;align-items:flex-end}
.mock-phones .phone{--w:clamp(150px,13.6vw,220px);margin-bottom:-38%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mock-phones .side{--w:clamp(110px,10vw,165px);opacity:.72;margin-bottom:-28%}
.mock-phones .side.l{margin-right:-4%;transform:rotate(-5deg);z-index:1}
.mock-phones .side.r{margin-left:-4%;transform:rotate(5deg);z-index:1}
.mock-phones .mid{z-index:2}
.mock-phones .phone{transition:transform .7s var(--ease),opacity .5s var(--ease),box-shadow .7s var(--ease)}
.c-mock::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(90% 60% at 50% 100%,rgba(210,96,111,.45),rgba(210,96,111,0) 70%)}
@media (hover:hover){
  .c-mock:hover::after{opacity:1}
  .c-mock:hover .mock-phones .mid{transform:translateY(-14%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 24px 48px rgba(0,0,0,.45)}
  .c-mock:hover .mock-phones .side{opacity:1}
  .c-mock:hover .mock-phones .side.l{transform:translateY(-12%) rotate(-5deg)}
  .c-mock:hover .mock-phones .side.r{transform:translateY(-12%) rotate(5deg)}
}

/* 研究转折：左文，右边一段情景还原的对话 */
.pivot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:120px}
.pivot .sub-h{margin-top:0}
/* 对话：按 beui.dev Message Bubble「With Avatars」——自己一侧实底深色、对方浅底；入场时气泡从说话人一侧弹出 */
.chat{margin:0;display:flex;flex-direction:column;gap:20px}
.msgs{display:flex;flex-direction:column;gap:16px}
.msg{display:flex;align-items:flex-start;gap:8px;transform-origin:0 100%}
.msg.me{flex-direction:row-reverse;transform-origin:100% 100%}
.js .msg.rv{transform:translateY(6px) scale(.94);transition:opacity .45s var(--ease) var(--rd,0s),transform .6s cubic-bezier(.34,1.56,.64,1) var(--rd,0s)}
.js .msg.rv.in{transform:none}
.av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card);color:var(--c3);font-size:11px;font-weight:500;line-height:1}
.msg.me .av{background:var(--ink);color:#fff}
.av.ph{visibility:hidden}
.mc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.msg.me .mc{align-items:flex-end}
.mh{display:flex;gap:6px;margin:0;padding:0 4px;font-size:11px;line-height:1;color:var(--c3)}
.mh b{font-weight:500;color:rgba(17,18,20,.7)}
.bb{margin:0;max-width:82%;border-radius:16px;padding:10px 14px;background:var(--card);font-size:14px;line-height:24px;color:var(--c1);text-wrap:pretty}
.msg.me .bb{background:var(--ink);color:#fff}
.bb.file{display:flex;align-items:center;gap:10px;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(17,18,20,.1);color:var(--c3)}
.bb.file b{display:block;font-weight:500;color:var(--c1)}
.bb.file small{display:block;font-size:12px;line-height:18px}
.chat .sys{align-self:center;display:inline-flex;align-items:center;height:32px;margin:0;padding:0 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule);font-size:12px;font-weight:500;color:var(--c2)}
.route-h{margin-top:140px;text-align:center;font-size:var(--fs-lead);font-weight:600;line-height:1.4}
.route{position:relative;height:440px;margin-top:48px}
.route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.r-base{stroke:#dcd5cd;stroke-width:2.5}
.r-core{stroke:var(--red);stroke-width:3.5}
.r-head{fill:#fff;stroke:var(--red);stroke-width:3;opacity:0}
.stops{list-style:none;margin:0;padding:0}
.stop{position:absolute;left:calc((var(--i) + .5)/7*100%);top:calc(50% + var(--dy));width:0;height:0}
.dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #cfc7be;
  transition:background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease)}
.stop.lit .dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(172,64,80,.14),0 0 14px rgba(172,64,80,.45)}
.stop::before{content:"";position:absolute;left:-.5px;width:1px;height:34px;background:#d6cec5;transition:background-color .5s}
.stop.up::before{bottom:8px}
.stop.down::before{top:8px}
.stop.lit::before{background:var(--red)}
.kd{position:absolute;left:-110px;width:220px;text-align:center}
.stop.up .kd{bottom:50px}
.stop.down .kd{top:50px}
.kd .no{display:block;font-size:var(--fs-num);font-weight:700;letter-spacing:-.04em;line-height:1;color:rgba(172,64,80,.16);transition:color .6s var(--ease)}
.stop.lit .kd .no{color:var(--red)}
.kd h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3;margin-top:6px}
.kd p{font-size:var(--fs-cap);line-height:1.65;color:#55585d;margin-top:4px}

/* 竞品定位图 + 竞品截图：定位图整行通栏；下面一张卡，左边结论、右边两张竞品截图 */
.mkt{display:grid;gap:16px;margin-top:24px}
/* 定位图整张由图像模型生成（轴名、品牌名都在图里），卡片底色与图的底色一致 */
.quad{margin:0;border-radius:28px;overflow:hidden;background:#F7F6F3}
.quad img{display:block;width:100%;height:auto}
.mkt-side{border-radius:28px;padding:36px;background:var(--card);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 48px}
.mkt-h{margin-top:14px;font-size:20px;line-height:1.6;font-weight:500;color:var(--c2);text-wrap:pretty}
.mkt-h strong{color:var(--c1);font-weight:700}
/* 复检首屏：标题左、导语右，底边对齐，避免右侧整片空白 */
@media (min-width:821px){
  .hd-split{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(56px,7vw,112px);align-items:end}
  .hd-split .lede-p{max-width:none;margin-top:0;padding-left:clamp(24px,2.4vw,36px);border-left:1px solid var(--line,rgba(0,0,0,.12))}
}
.base-shots{grid-column:2;grid-row:1 / span 3;justify-self:end;width:min(100%,440px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.base-shots figure{margin:0;min-width:0}
.base-shots .image-zoom{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--card-line),0 10px 20px rgba(40,16,18,.1)}
.base-shots figcaption{text-align:center;margin-top:10px;font-size:13px;line-height:1.55;color:var(--c2)}
.mkt-side .note{align-self:end;margin-top:14px;text-align:left}   /* 贴着左栏结论，左对齐 */

/* 01 背景：2026 重制版商店图，四张整图（图像模型生成，文字与样机都在图里） */
.posters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:72px}
.poster{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:640/1390}
.poster img{display:block;width:100%;height:100%;object-fit:cover}

/* ============================================================
   03 首次配置（深色）：旧版 → 新版
   ============================================================ */
#s04{padding-top:160px;--ow:clamp(104px,10.6vw,152px);--nw1:clamp(120px,13vw,190px);--nw2:clamp(150px,16.5vw,238px);--nw3:clamp(190px,22.5vw,324px)}
.stage-label{display:flex;flex-direction:column;gap:8px}
.stage-label .s{font-size:var(--fs-h2-pre);letter-spacing:.04em;color:rgba(255,255,255,.55)}
.stage-label .b{font-size:48px;font-weight:700;line-height:1.05;letter-spacing:-.03em;white-space:nowrap}
.old-label .b{color:rgba(255,255,255,.16)}
.new-label .b{background:linear-gradient(90deg,#fff 0,#f1b9c1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.old{margin-top:120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);align-items:start;gap:20px}
.old-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,36px);align-items:start;padding-bottom:84px}
.o-item{position:relative;margin:0;display:flex;justify-content:center;transform:translate3d(0,calc(var(--my,0px) + var(--py,0px)),0)}
.o-item .phone{transform:rotate(var(--r,0deg))}
.phone.dim{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.phone.dim .scr{filter:grayscale(1)}
.o-item .pill{left:50%;top:calc(100% + 22px);transform:translateX(-50%)}

/* 竞品基线：首次配置 6 步，卡点用虚线框和下方小字标出 */
.flow6{margin-top:64px;border-radius:28px;padding:26px 28px 30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
.f6-body{display:flex;gap:28px;margin-top:22px}
.f6-ph{flex:2 1 0;min-width:0}
.f6-ph+.f6-ph{flex-grow:4}   /* 按步数分宽度，连接线拉伸，整张卡铺满 */
.f6-t{display:block;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--c3)}
.f6-ph ol{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:12px}
.f6-ph li{flex:1 1 0;display:grid;grid-template-columns:auto minmax(20px,1fr);align-items:start;column-gap:10px;row-gap:10px}
.f6-ph li:last-child{flex:none;grid-template-columns:auto}
/* 连接线：1px 细线 + 末端开口箭头，用 mask 画形状，颜色跟 --c3 走 */
.f6-ph li::after{content:"";grid-column:2;grid-row:1;align-self:center;height:9px;background:var(--c3);opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") right center/6px 9px no-repeat,linear-gradient(#000,#000) left center/calc(100% - 1px) 1px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M1 .5 5 4.5 1 8.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") right center/6px 9px no-repeat,linear-gradient(#000,#000) left center/calc(100% - 1px) 1px no-repeat}
.f6-ph li:last-child::after{display:none}
.f6-p,.f6-ph small{grid-column:1;justify-self:center}
.f6-p{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;background:rgba(255,255,255,.06);font-size:14px;white-space:nowrap}
.f6-p i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font-family:var(--mono);font-size:12px;font-style:normal}
.hard .f6-p{background:rgba(255,141,157,.07);outline:1px dashed rgba(255,141,157,.45);outline-offset:-1px;color:#f2c3ca}
.hard .f6-p i{box-shadow:inset 0 0 0 1px rgba(255,141,157,.5)}
.hard small{max-width:10em;text-align:center;text-wrap:balance;font-size:12.5px;line-height:1.5;color:rgba(242,195,202,.72)}

.beam{display:flex;justify-content:center;height:clamp(110px,16vh,170px);margin-top:clamp(40px,7vh,80px)}
.beam i{width:2px;height:100%;background:linear-gradient(180deg,rgba(172,64,80,0),var(--red-hi));box-shadow:0 0 22px rgba(210,96,111,.8)}

.new{position:relative;margin-top:clamp(20px,4vh,40px)}
.new .stage-label{position:relative;z-index:2;align-items:center;text-align:center}
.spot{position:absolute;z-index:0;left:50%;top:48%;width:min(1100px,100%);aspect-ratio:1.5;transform:translate(-50%,-30%);
  background:radial-gradient(closest-side,rgba(172,64,80,.5),rgba(172,64,80,.16) 55%,rgba(172,64,80,0) 100%)}
.new-row{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;margin-top:clamp(40px,7vh,80px);padding-bottom:70px}
.n-item{position:relative;margin:0 calc(var(--nw2)*-.05);transform:translate3d(0,var(--py,0px),0);display:flex;justify-content:center}
.n-item .phone{transform:rotate(var(--r,0deg))}
.n1,.n5{margin-top:calc(var(--nw3)*.34)}
.n2,.n4{margin-top:calc(var(--nw3)*.12)}
/* 扇形叠放：中间在最上，越往外越靠下 */
.n1,.n5{z-index:1}
.n2,.n4{z-index:2}
.n3{z-index:3}
.n-item .pill{left:50%;top:auto;bottom:-50px;transform:translateX(-50%);max-width:none;text-align:center;white-space:nowrap}
#s04 .fold{margin-top:56px}

/* ============================================================
   04 信任（深色）：左文右舞台的手机
   ============================================================ */
#s05{padding-top:120px}
/* 竞品基线：四款 App 首页，截图去色，圈注保留粉色；坐标按截图宽高的比例写 */
.chome{margin-top:72px}
.ch-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);margin-top:20px}
.ch{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px}
.ch .phone{--w:clamp(150px,13vw,200px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ch .scr{position:relative}
.ch .scr img{filter:grayscale(1);opacity:.85}
.ch-mark{position:absolute;left:calc(var(--l)*100%);top:calc(var(--t)*100%);width:calc(var(--mw)*100%);height:calc(var(--mh)*100%);
  border-radius:10px;box-shadow:0 0 0 2px var(--pink),0 0 0 5px rgba(255,141,157,.22);pointer-events:none}
.ch figcaption{max-width:15em;text-align:center;font-size:14px;line-height:1.6;color:var(--c2);text-wrap:balance}
.ch figcaption b{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px;font-size:15px;color:var(--c1)}
.ch-logo{width:22px;height:22px;border-radius:6px}

/* ============================================================
   05 AI 相册（深色）：三联卡 + 钉住舞台
   ============================================================ */
#s06{padding-top:120px;--cw:min(300px,min(21vw,36vh))}
.s06-intro{margin-top:24px;max-width:30em;font-size:20px;line-height:1.6;color:rgba(255,255,255,.78)}
.s06-note{margin-top:28px;max-width:44em;font-size:var(--fs-card);line-height:1.85;color:rgba(255,255,255,.6)}
.s06-lead{margin-top:56px;font-size:24px;font-weight:600;line-height:1.5}

.pin{position:relative;height:420vh;margin-top:clamp(40px,8vh,80px)}
.pin-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.arena{position:relative;width:min(1240px,100% - var(--g)*2);height:min(88vh,860px)}
.arena .glow{position:absolute;z-index:0;left:50%;top:50%;width:min(900px,100%);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(172,64,80,.5),rgba(172,64,80,.12) 60%,rgba(172,64,80,0) 100%);opacity:.18;transition:opacity 1s var(--ease)}
.arena[data-n="1"] .glow{opacity:.4}.arena[data-n="2"] .glow{opacity:.55}.arena[data-n="3"] .glow{opacity:.7}.arena[data-n="4"] .glow{opacity:.9}
.center{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%)}

.scard{position:absolute;z-index:3;width:min(360px,30vw);display:flex;gap:16px;align-items:center;padding:16px 18px 16px 16px;border-radius:24px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:.3;transform:translateY(18px) scale(.965);
  transition:opacity .8s var(--ease),transform .9s var(--ease),border-color .6s var(--ease),background-color .6s var(--ease),box-shadow .8s var(--ease)}
.scard.lit{opacity:.88;transform:none}
.scard.now{opacity:1;border-color:rgba(238,150,164,.85);background:rgba(172,64,80,.2);box-shadow:0 0 0 1px rgba(238,150,164,.25),0 20px 60px rgba(172,64,80,.32)}
.scard .mini{flex:none}
.scard .mini .phone{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.scard .state{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;line-height:1.3}
.scard .state b{width:8px;height:8px;border-radius:50%;background:#8d8582;transition:background-color .5s,box-shadow .5s}
.scard.lit .state b{background:var(--pink);box-shadow:0 0 10px var(--pink)}
.scard .when{display:block;margin-top:2px;font-size:11px;letter-spacing:.06em;text-transform:none;color:rgba(255,255,255,.55)}
.scard p{margin-top:8px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.82)}
.c0{left:0;top:8%}
.c1{right:0;top:20%}
.c2{left:4%;bottom:14%}
.c3{right:5%;bottom:5%}
.link{position:absolute;z-index:-1;height:2px;top:50%;width:var(--lw,12vw);background:linear-gradient(90deg,rgba(238,150,164,0),var(--pink));
  transform:scaleX(0);opacity:0;transition:transform .9s var(--ease),opacity .6s}
.c0 .link,.c2 .link{left:100%;transform-origin:0 50%}
.c1 .link,.c3 .link{right:100%;transform-origin:100% 50%;background:linear-gradient(270deg,rgba(238,150,164,0),var(--pink))}
.scard.now .link{transform:scaleX(1);opacity:.9}
.steps{position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:8px}
.steps i{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);transition:background-color .5s}
.arena[data-n="1"] .steps i:nth-child(-n+1),.arena[data-n="2"] .steps i:nth-child(-n+2),.arena[data-n="3"] .steps i:nth-child(-n+3),.arena[data-n="4"] .steps i{background:var(--pink)}

.s06-out{margin-top:96px}
/* 家庭共享：一行四步，每步一台手机配重制版界面 */
.flow{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;--fw:min(220px,78%)}
.flow li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 18px 26px;border-radius:28px;background:rgba(255,255,255,.05)}
.flow li:last-child{background:linear-gradient(170deg,rgba(172,64,80,.3),rgba(172,64,80,.08))}
.flow .mock{display:block;width:var(--fw);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
.flow .fn{margin-top:22px;font-size:12px;letter-spacing:.12em;color:var(--pink)}
.flow b{margin-top:4px;font-size:18px;font-weight:700;line-height:1.4;word-break:keep-all;text-wrap:balance}
.flow .fd{margin-top:6px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);word-break:keep-all;text-wrap:balance}

/* 06 多端：同一个导航在四个端的样子，PC 占左边整列，右边三条 */
.xcomp{margin-top:120px}
/* 英文眉标独占一行，标题和说明从同一条顶线起排 */
.xc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:12px}
.xc-head h3{font-size:var(--fs-lead);font-weight:700;line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
.xc-head p{font-size:var(--fs-card);line-height:1.85;color:var(--c2)}
.xc-link{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:2px 12px;border-radius:99px;background:var(--ink);color:#fff;vertical-align:1px;white-space:nowrap;   /* 嵌在说明最后一句末尾，不单独占行 */
  font-size:13px;line-height:24px;font-weight:600;text-decoration:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.xc-link svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.xc-link:hover{transform:translateY(-2px)}
.xc-link:hover svg{transform:translateX(3px)}
.xc-link:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.xc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.xc{margin:0;border-radius:28px;padding:22px;background:var(--card);display:flex;flex-direction:column;min-width:0}
.xc .image-zoom{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--card-line)}
.xc .image-zoom img{display:block;width:100%;height:auto}
/* 截图上圈出状态所在的位置，坐标按截图宽高的比例写 */
.xc-mark{position:absolute;left:calc(var(--l)*100%);top:calc(var(--t)*100%);width:calc(var(--w)*100%);height:calc(var(--h)*100%);
  border-radius:12px;box-shadow:0 0 0 2px var(--red),0 0 0 7px rgba(172,64,80,.2);pointer-events:none}
.xc figcaption{text-align:center;margin-top:14px;font-size:14px;line-height:1.6;color:var(--c2)}
.xc figcaption b{margin-right:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--red)}

/* ============================================================
   09 复盘（深色）
   ============================================================ */
#s10 .s06-out{margin-top:120px}

/* 钉住舞台给底部胶囊让出 72px，状态进度条不被挡住 */
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  .pin-stage{padding-bottom:72px;box-sizing:border-box}
  .arena{height:min(82vh,800px)}
}
@media (min-width:1240px){
  .arena{width:min(var(--w),100% - 480px)}
  #s04{--nw1:clamp(120px,11.5vw,190px);--nw2:clamp(150px,14.5vw,238px);--nw3:clamp(190px,20vw,324px)}
  #s06{--cw:min(270px,min(19vw,34vh))}
  /* 舞台变窄时（1440 宽只剩约 950px），卡片先收掉错位缩进、再收窄，和中心手机之间至少留 36px */
  .scard{width:min(300px,24vw,(100% - var(--cw)) / 2 - 36px)}
  .c2{left:max(0px,min(4%,(100% - var(--cw)) / 2 - 336px))}
  .c3{right:max(0px,min(5%,(100% - var(--cw)) / 2 - 336px))}
}

/* ---------- 窄屏：沿用合并稿已有规则（关倾斜、关视差、关钉住，改竖排） ---------- */
@media (max-width:820px){
  :root{--m:46vw}
  .cover-stage{height:auto;min-height:0;padding-bottom:calc(var(--m)*2.2 + 20px)}
  .cover-head{padding-top:84px}
  .wm{top:calc(84px + 170px)}
  .fanr{top:calc(84px + 205px)}
  .fan-item{transform:translate3d(calc(var(--x) - 50%),var(--y),0) rotate(0deg)}
  .fi-l{--x:calc(var(--m)*-.7);--y:calc(var(--m)*.24)}
  .fi-r{--x:calc(var(--m)*.7);--y:calc(var(--m)*.24)}
  .fi-l .phone,.fi-r .phone{--w:calc(var(--m)*.66) !important}

  .bento{grid-template-columns:1fr;grid-template-areas:"red" "copy" "mock";gap:14px}
  .mkt{grid-template-columns:1fr}
  .glyphs li{flex-direction:column;gap:6px}
  .glyphs span{white-space:nowrap}
  .route{height:auto;padding:10px 0 10px 40px;margin-top:40px}
  .stops{display:flex;flex-direction:column;gap:34px}
  .stop{position:relative;left:auto;top:auto;width:auto;height:auto}
  .stop::before{display:none}
  .dot{left:-40px;top:6px}
  .stop .kd,.stop.up .kd,.stop.down .kd{position:static;width:auto;text-align:left;padding-left:2px}
  .kd .no{font-size:40px}
  .kd h3{font-size:20px;margin-top:2px}

  #s04{--ow:34vw;--nw1:36vw;--nw2:36vw;--nw3:58vw;padding-top:170px}
  .old{grid-template-columns:1fr;margin-top:70px}
  .old-row{grid-template-columns:1fr 1fr;gap:56px 14px;padding-bottom:20px}
  .o-item .phone,.n-item .phone{transform:none}
  .o-item{transform:none !important;flex-direction:column;align-items:center;gap:12px}
  .o-item .pill{position:static;--pt:auto;width:auto;max-width:100%;transform:none}
  .stage-label .b{font-size:72px}
  .new-row{flex-wrap:wrap;gap:60px 14px;padding-bottom:20px}
  .n-item{margin:0 !important;transform:none !important;flex-direction:column;align-items:center;gap:12px;width:calc(50% - 7px)}
  .n3{width:100%}
  .n-item .pill{position:static;transform:none;width:auto;max-width:100%}

  .pin{height:auto;margin-top:50px}
  .pin-stage{position:static;height:auto;display:block}
  .arena{width:min(var(--w),100% - var(--g)*2);height:auto;margin-inline:auto;display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .arena .glow{top:130px;opacity:.5 !important}
  .center{position:relative;left:auto;top:auto;transform:none;align-self:center;margin:6px 0 24px;order:-1}
  #s06{--cw:min(62vw,300px)}
  .scard{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto;opacity:1;transform:none;border-color:rgba(238,150,164,.5);background:rgba(172,64,80,.14)}
  .scard .link,.steps{display:none}

  .mkt-side{grid-template-columns:1fr;grid-template-rows:none;gap:24px;padding:26px 22px}
  .base-shots{grid-column:auto;grid-row:auto;justify-self:stretch;width:100%}
  .flow6{padding:22px 18px 24px}
  .f6-body{flex-direction:column;gap:24px}
  .f6-ph ol{flex-direction:column;gap:12px}
  .f6-ph li,.f6-ph li:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .f6-ph li::after{display:none}
  .hard small{max-width:none;text-align:left}
  .ch-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 14px}
  .ch .phone{--w:min(150px,40vw)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .flow li{padding:20px 12px 22px;border-radius:22px}
  .flow b{font-size:15px}
  .flow .fd{font-size:12.5px}
  .qd .qd-stage{margin-inline:calc(var(--g) * -1);-webkit-mask-image:none;mask-image:none}
  .qd .qd-track{width:min(400px,100vw - var(--g) * 2 - 32px)}
}

/* ---------- 减少动效：不钉住、不视差，直接终态 ---------- */
@media (prefers-reduced-motion:reduce){
  .fan-item .phone{animation:none}
  .pin{height:auto;margin-top:50px}
  .pin-stage{position:static;height:auto;display:block}
  .arena{height:auto;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
  .arena .glow{opacity:.6}
  .center{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;justify-self:center;margin-bottom:20px}
  .scard{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto;opacity:1;transform:none;border-color:rgba(238,150,164,.5);background:rgba(172,64,80,.14)}
  .scard .link,.steps{display:none}
  .stop .dot{background:var(--red);border-color:var(--red)}
  .stop .kd .no{color:var(--red)}
  .stop::before{background:var(--red)}
}
@media (prefers-reduced-motion:reduce) and (max-width:820px){
  .arena{display:flex}
}

/* ---------- 03 评价墙：affectui Testimonial Wall 的卡片规格，两行横向、反向无缝滚动（脚本在 nas.js） ---------- */
.tw{--tw-gap:16px;--tw-fade:96px;--tw-line:rgba(17,18,20,.08);
  --tw-shadow:0 0 0 1px var(--tw-line),0 1px 2px rgba(0,0,0,.04);
  --tw-lift:0 0 0 1px var(--tw-line),0 2px 4px rgba(0,0,0,.03),0 12px 28px -10px rgba(0,0,0,.14);
  display:flex;flex-direction:column;gap:var(--tw-gap);margin-top:40px;padding:12px 0 28px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tw-fade),#000 calc(100% - var(--tw-fade)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 var(--tw-fade),#000 calc(100% - var(--tw-fade)),transparent)}
.tw-row{position:relative;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tw-row[data-dragging]{cursor:grabbing}
.tw-track{display:flex;width:max-content;will-change:transform}
.tw-set{display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
.tw-item{flex:none;width:360px;margin-right:var(--tw-gap)}   /* 每张卡自带右侧间距，一组的宽度就是循环距离 */
.tw-card{display:flex;flex-direction:column;gap:14px;height:100%;margin:0;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:var(--tw-shadow);color:#404040;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),opacity .32s cubic-bezier(.22,1,.36,1)}
.tw-tag{font-size:12px;font-weight:600;line-height:16px;color:var(--red)}
.tw-q{flex:1;margin:0}
.tw-q p{margin:0;font-size:15px;line-height:1.7;text-wrap:pretty;overflow-wrap:anywhere}
.tw-who{display:flex;align-items:center;gap:10px;min-width:0}
.tw-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f0f0f1;box-shadow:0 0 0 1px rgba(0,0,0,.05);font-size:12.5px;font-weight:600;color:#8f8f8f}
.tw-id{display:grid;gap:1px;min-width:0}
.tw-id b{font-size:13.5px;font-weight:500;line-height:18px;color:#171717}
.tw-id span{font-size:12.5px;line-height:17px;color:#8f8f8f}
@media (hover:hover){
  .tw-row:not([data-dragging]) .tw-card:hover{transform:translateY(-3px);box-shadow:var(--tw-lift)}
  .tw:has(.tw-row:not([data-dragging]) .tw-card:hover) .tw-card:not(:hover){opacity:.62}
}
/* 减弱动效：静态换行排列，全部原话可见 */
.tw[data-static]{-webkit-mask-image:none;mask-image:none}
.tw[data-static] .tw-track,.tw[data-static] .tw-set{width:auto;flex-wrap:wrap;row-gap:var(--tw-gap)}
.tw[data-static] .tw-row{cursor:auto}

/* ---------- 08 测试原话卡组：scrolltide Quote Deck 的扇形卡组（脚本在 nas.js） ---------- */
.qd{margin-top:48px}
.qd-hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* 两侧的卡伸出栏宽，边缘渐隐；上下留够投影和下沉的余量 */
/* 底部 156px 留给侧卡悬停投影；负外边距让这段透明区叠进下一块的上外边距，视觉留白不翻倍 */
.qd-stage{position:relative;display:flex;justify-content:center;margin:0 -24px -110px;padding:36px 0 156px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 120px,#000 calc(100% - 120px),transparent)}
.qd-stage:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:24px}
.qd-stage.is-drag{cursor:grabbing}
.qd-track{position:relative;width:400px;height:320px}
.qd-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:28px 32px 24px;border-radius:24px;background:var(--qd-bg,#f2e3e0);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 45px -10px rgba(0,0,0,.08),0 4px 12px -2px rgba(0,0,0,.03);
  transform-origin:50% 85%;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .5s ease,box-shadow .4s ease,filter .3s ease;will-change:transform,opacity}
.qd-stage.is-drag .qd-card{transition:none}
.qd-card.is-side{cursor:pointer}
.qd-card.is-side:not(.is-far):hover{box-shadow:0 24px 44px -12px rgba(0,0,0,.12),0 8px 18px -2px rgba(0,0,0,.05)}
.qd-card.is-side:hover{filter:brightness(1.02)}
.qd-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:#374151}
.qd-top .mono{font-size:12px;font-weight:500;color:#6b7280}
.qd-q{margin:16px 0}
.qd-q p{margin:0;font-size:22px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:#111827;text-wrap:pretty}
.qd-obs .qd-q p{font-size:20px}
.qd .at[data-at=highlight] .at-mark{color:rgba(255,255,255,.88)}
.qd-by{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(0,0,0,.08)}
.qd-av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 1px 3px rgba(0,0,0,.1);font-size:13px;font-weight:600;color:#6b7280}
.qd-id{display:flex;flex-direction:column;gap:2px}
.qd-id b{font-size:13px;font-weight:600;color:#111827}
.qd-id small{font-size:12px;color:#6b7280}
.qd-card.is-far{box-shadow:none}
.qd-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:#fff;opacity:var(--fade,0);pointer-events:none;transition:opacity .5s ease}