.about-stage{position:relative;color:var(--ink);padding-block:40px}
.about-stage .pin{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:clamp(20px,4vw,64px);padding:32px var(--gut);max-width:1300px;margin:0 auto}
.about-stage .lg{width:100%;height:auto;overflow:visible;display:block;max-height:calc(100svh - 170px)}
.about-stage .lg-ghost{fill:#E7E0D1;opacity:0;transition:opacity .8s}
.about-stage .lg-stations,.about-stage .mk{display:none}
.about-stage .stn{fill:#fff;stroke:var(--ink);stroke-width:1.6;transition:fill .3s,stroke .3s,opacity .6s}
.about-stage .stn.on[data-s="0"]{fill:var(--green-d);stroke:var(--green-d)}
.about-stage .stn.on[data-s="1"]{fill:var(--lilac);stroke:var(--lilac)}
.about-stage .stn.on[data-s="2"]{fill:var(--coral);stroke:var(--coral)}
.about-stage .lbl{font:700 9px var(--font);fill:var(--ink-2);letter-spacing:.02em;transition:opacity .6s,fill .3s}
.about-stage .lbl.on[data-s="0"]{fill:#146443}
.about-stage .lbl.on[data-s="1"]{fill:#6A55B8}
.about-stage .lbl.on[data-s="2"]{fill:#AF452D}
.about-stage .mk{fill:#fff;stroke:var(--green-d);stroke-width:2.2;transition:opacity .5s}
.about-stage.done .stn,.about-stage.done .lbl,.about-stage.done .mk,.about-stage.done .lg-ghost{opacity:0}
.about-stage .panels{display:grid;gap:48px;min-width:0}
.about-stage .st{min-width:0}
.about-stage .n{font:700 13px var(--font);color:var(--ink-2);letter-spacing:.12em;text-transform:uppercase}
.about-stage .st h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;margin-top:10px;line-height:1.05}
.about-stage .st p{margin-top:12px;color:var(--ink-2);font-size:17.5px;max-width:44ch}
.about-stage .st a{display:inline-block;margin-top:14px;font-weight:700;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px}
.about-stage .vis{position:relative;margin:0 0 34px;height:clamp(150px,30vh,290px)}
.about-stage .ph{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:0 24px 50px -26px rgba(20,33,58,.55)}
.about-stage .ph img{width:100%;height:100%;object-fit:cover}
.about-stage .ui{position:absolute;color:var(--ink);font-size:13.5px;line-height:1.25}
.about-stage .card-ui{background:#fff;border-radius:12px;box-shadow:0 14px 30px -12px rgba(20,33,58,.5),0 0 0 1px rgba(20,33,58,.06)}
.about-stage .ui b{display:block;font-size:14.5px;line-height:1.2}
.about-stage .ui small{display:block;color:var(--ink-2);font-size:12.5px;margin-top:2px}
.about-stage .pills{left:12px;top:12px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 24px)}
.about-stage .pills span{background:rgba(255,255,255,.95);border-radius:99px;padding:5px 10px;font-weight:700;font-size:12.5px;box-shadow:0 4px 12px -4px rgba(0,0,0,.3)}
.about-stage .tk{left:16px;bottom:-22px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;overflow:hidden;max-width:calc(100% - 32px)}
.about-stage .tk .t{align-self:stretch;display:grid;place-items:center;background:var(--sun);font-weight:700;font-size:15px;padding:0 11px;font-variant-numeric:tabular-nums}
.about-stage .tk .b{padding:9px 12px;min-width:0}
.about-stage .tk .b b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.about-stage .grp{left:16px;bottom:-22px;width:min(270px,calc(100% - 32px));padding:11px 13px}
.about-stage .gh{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.about-stage .gh span{font-weight:700;font-size:12.5px;color:#5B45A8;white-space:nowrap}
.about-stage .bar{height:7px;border-radius:9px;background:#ECE7F8;overflow:hidden;margin-top:8px}
.about-stage .bar i{display:block;height:100%;width:84%;background:var(--lilac)}
.about-stage .lock{right:12px;top:12px;display:flex;align-items:center;gap:7px;padding:7px 11px;font-weight:700;font-size:12.5px;max-width:60%}
.about-stage .lock svg{width:15px;height:15px;flex:none;color:#5B45A8}
.about-stage .biz{left:16px;bottom:-22px;width:min(290px,calc(100% - 32px));padding:11px 13px}
.about-stage .bh,.about-stage .bf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.about-stage .ok{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:11.5px;color:#146443;background:var(--green-t);border-radius:99px;padding:3px 8px 3px 6px;white-space:nowrap}
.about-stage .ok svg{width:12px;height:12px}
.about-stage .bf{margin-top:9px}
.about-stage .bf span{font-size:12.5px;font-weight:700;color:#A23F26}
.about-stage .go{background:var(--ink);color:#fff!important;border-radius:7px;padding:6px 10px}
.about-stage .stack{right:12px;top:12px;bottom:12px;width:min(310px,calc(100% - 24px));display:flex;flex-direction:column;justify-content:center;gap:7px}
.about-stage .nt{display:flex;gap:9px;align-items:flex-start;padding:8px 11px;background:rgba(255,255,255,.96);border-radius:12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.55)}
.about-stage .nt i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:4px}
.about-stage .nt i.c{background:var(--coral)}
.about-stage .nt i.l{background:var(--lilac)}
.about-stage .nt i.g{background:var(--green)}
.about-stage .nt b,.about-stage .nt span{font-size:12.5px;line-height:1.3}
.about-stage .stage-example{font-size:12.5px!important;margin:0 0 10px!important;color:var(--ink-2)}
.about-stage .stage-static{display:none;position:absolute;z-index:5;top:calc(var(--banner) + 80px);left:var(--gut);border:0;background:var(--paper);color:var(--ink);text-decoration:underline;font:600 14px var(--font);padding:8px;cursor:pointer}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .about-stage.is-animated{height:460vh;padding:0}
  .about-stage.is-animated .pin{position:sticky;top:0;height:100svh;align-items:center;padding:calc(var(--banner) + 84px) var(--gut) 32px}
  .about-stage.is-animated .lg-ghost{opacity:1}
  .about-stage.is-animated .lg-stations,.about-stage.is-animated .mk{display:block}
  .about-stage.is-animated .panels{gap:0}
  .about-stage.is-animated .st{grid-area:1/1;align-self:center;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;pointer-events:none}
  .about-stage.is-animated .st.on{opacity:1;transform:none;pointer-events:auto}
  .about-stage.is-animated .ui{opacity:0;transform:translateY(10px);transition:opacity .45s .2s,transform .45s .2s}
  .about-stage.is-animated .st.on .ui{opacity:1;transform:none}
  .about-stage.is-animated .nt{opacity:0;transform:translateX(12px);transition:opacity .4s,transform .4s}
  .about-stage.is-animated .st.on .nt{opacity:1;transform:none}
  .about-stage.is-animated .st.on .nt:nth-child(1){transition-delay:.25s}
  .about-stage.is-animated .st.on .nt:nth-child(2){transition-delay:.45s}
  .about-stage.is-animated .st.on .nt:nth-child(3){transition-delay:.65s}
  .about-stage.is-animated .ph img{transform:scale(1.06);transition:transform 1.6s ease}
  .about-stage.is-animated .st.on .ph img{transform:scale(1)}
  .about-stage.is-animated .stage-static{display:block}
  .about-stage.is-animated.done .lg-ghost{opacity:0}
}
@media(max-width:899px){
  .about-stage .pin{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:20px}
  .about-stage .lg{max-height:24svh}
  .about-stage .vis{height:clamp(150px,26svh,240px);margin-bottom:30px}
  .about-stage .st h2{font-size:clamp(24px,6.6vw,30px);margin-top:6px}
  .about-stage .st p{font-size:15.5px;margin-top:8px}
  .about-stage .n{font-size:12px}
  .about-stage .stack{gap:5px}
  .about-stage .nt{padding:6px 9px}
  .about-stage .nt b,.about-stage .nt span{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){
  .about-stage *{transition:none!important;transform:none!important}
}