/* 【分步演示】sticky-steps
   整段滚动时画面「钉住」：左上是固定的标题，左下是大编号＋步骤名＋说明，右边是这一步的产品界面；
   滚动进度推进到第几步，左右就同时切到第几步。底部一排短线标出当前进度。
   窄屏（≤900px）不钉住，改成每步「编号＋说明＋界面」从上到下依次排开。
   可调变量写在 .ss 上：--ss-top 顶栏高度（钉住时让出来）、--ss-per 每一步占多少滚动距离。 */
.ss{--ss-top:var(--top,64px);--ss-per:85vh;--ss-accent:var(--blue,#2660EF);--ss-text:var(--blue-deep,#1A3B9E);
  position:relative;height:calc(var(--ss-n,5) * var(--ss-per) + 100vh)}
.ss-pin{position:sticky;top:var(--ss-top);height:calc(100vh - var(--ss-top));display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:48px;align-items:stretch;padding-block:34px 40px}
.ss-l{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.ss-l h2{font-size:clamp(32px,3.4vw,50px);line-height:1.15;letter-spacing:-.03em}
.ss-l .sub{margin-top:14px;font-size:17px;line-height:1.6;color:var(--ss-text)}
.ss-steps{position:relative;min-height:290px}
.ss-step{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.ss-step.on{opacity:1;transform:none;pointer-events:auto}
.ss-n{font:400 clamp(96px,10vw,148px)/.9 "Inter",sans-serif;color:var(--ss-accent);letter-spacing:-.05em}
.ss-step h3{font-size:clamp(26px,2.4vw,36px);line-height:1.2;letter-spacing:-.02em;margin-top:18px}
.ss-step p{margin-top:12px;font-size:18px;line-height:1.6;max-width:26em;color:var(--ss-text)}
.ss-dots{display:flex;gap:6px;margin-top:22px}
.ss-dots i{width:22px;height:3px;background:color-mix(in srgb,var(--ss-accent) 18%,transparent);transition:background-color .3s}
.ss-dots i.on{background:var(--ss-accent)}
.ss-r{position:relative;min-height:0}
.ss-scr{position:absolute;inset:0;opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.ss-scr.on{opacity:1;transform:none;pointer-events:auto}
.ss-note{position:absolute;right:0;bottom:-26px;font-size:12px;color:var(--ss-accent);opacity:.75}
.ss-cap{display:none;margin-bottom:14px}
.ss-cap .ss-n{font-size:56px;line-height:1;letter-spacing:-.04em}
.ss-cap h3{font-size:24px;margin-top:8px}
.ss-cap p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--ss-text)}

/* 截图模式：在 .ss 上加 .ss-stack，右边每一步放一张产品截图（.ss-shot）。
   截图按真软件窗口的比例（1512×900）：宽度跟着窗口走，铺到屏幕右缘再多出约 6%（只切掉一条边，界面基本完整）；
   大屏上高度先到顶，就按右栏高度算。换步骤时新的一张从下面滑上来盖住上一张，上一张往后缩一点、露出一条边。
   --ss-bleed 填页面右边距（右栏到屏幕右缘的距离）；截图伸出页面右缘，页面外层要加 overflow-x:clip（不能用 hidden，会让钉住失效）。
   （10-13 第一版按右栏高度铺、宽出很多，用户窗口 1160 宽时只看得到半张界面。） */
.ss-stack .ss-pin{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
.ss-stack .ss-r{container-type:size;clip-path:inset(-80px -100vw -1px -100vw)}
.ss-stack .ss-scr{right:auto;bottom:auto;height:auto;width:min(calc((100cqw + var(--ss-bleed,0px)) * 1.06),calc(100cqh * 1512 / 900));aspect-ratio:1512/900;
  opacity:1;transform:translateY(calc(100cqh + 40px));
  transition:transform .75s cubic-bezier(.2,.75,.2,1),filter .75s ease}
.ss-stack .ss-scr.on{transform:none}
.ss-stack .ss-scr.past{transform:translateY(-14px) scale(.975);transform-origin:50% 0;filter:brightness(.97)}
.ss-stack .ss-note{top:-42px;bottom:auto;left:0;right:auto}
.ss-shot{height:100%;display:flex;flex-direction:column;border:1px solid #DCDAD4;border-radius:12px;overflow:hidden;background:#EFEFEE;
  box-shadow:0 1px 2px rgba(20,20,30,.04),0 18px 40px -22px rgba(20,20,30,.2)}
.ss-shot img{display:block;width:100%;flex:1;min-height:0;object-fit:cover;object-position:left top}
/* 受访者看到的页面：套一个浏览器外框，和研究者后台分开 */
.ss-bar{height:38px;flex:none;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F6F6F5;border-bottom:1px solid #E3E3E1;font-size:12.5px;color:#52525B}
.ss-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.ss-bar i+i{background:#FEBC2E}.ss-bar i+i+i{background:#28C840}
.ss-bar span{margin:0 auto;padding:0 16px;height:24px;line-height:24px;border-radius:7px;background:#ECECEA;min-width:40%;text-align:center}

@media (max-width:900px){
  .ss{height:auto}
  .ss-pin{position:static;height:auto;display:block;padding:0}
  .ss-l .ss-steps,.ss-l .ss-dots,.ss-note{display:none}
  .ss-r{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;margin-top:36px}
  .ss-scr{position:static;opacity:1;transform:none;pointer-events:auto;min-width:0}
  .ss-cap{display:block}
  .ss-stack .ss-r{clip-path:none;container-type:normal}
  .ss-stack .ss-scr,.ss-stack .ss-scr.past{height:auto;width:auto;aspect-ratio:auto;transform:none;filter:none}
  .ss-shot{height:auto}
  .ss-shot img{flex:none;height:auto;aspect-ratio:1512/900}
}
@media (prefers-reduced-motion:reduce){.ss-step,.ss-scr,.ss-stack .ss-scr,.ss-dots i{transition:none}}