.jw-upgrade-map{--jw-sky:#03B3EF; --jw-ink:#1F1F20; --jw-cu:#C98552; --jw-cu2:#8F6A50; --jw-warm:#E8894A;
  --jw-wl:rgba(42,43,45,.86); --jw-wl2:rgba(42,43,45,.30); --jw-hair:rgba(42,43,45,.14);
  position:relative; color:#3F4041;
  background:#F1F2F6 radial-gradient(90% 120% at 22% 38%, #EFF1F4 0%, #F0F2F5 46%, #F1F3F6 100%)}
.jw-upgrade-map.sec{padding:clamp(34px,3.6vw,88px) 0}
.jw-upgrade-map .jw-um-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  grid-template-areas:"stage head" "stage bar" "stage panel"; grid-template-rows:auto auto 1fr;
  column-gap:clamp(32px,4.4vw,72px); align-items:start}
.jw-upgrade-map .jw-um-head{grid-area:head}
.jw-upgrade-map .jw-um-stage{grid-area:stage}
.jw-upgrade-map .jw-um-bar{grid-area:bar}
.jw-upgrade-map .jw-um-panel{grid-area:panel}
.jw-upgrade-map .eyebrow{margin:0 0 14px; color:#05668E}
.jw-upgrade-map h2{color:#262727; font-size:clamp(34px,3.5vw,54px); line-height:1.04; margin:0}

.jw-upgrade-map .jw-um-fig{position:relative; margin:0; border:1px solid var(--jw-hair); border-radius:4px;
  background-color:rgba(255,255,255,0.17);
  background-image:linear-gradient(rgba(255,255,255,0.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.32) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px}
.jw-upgrade-map .jw-um-svg{display:block; width:100%; height:auto; aspect-ratio:var(--jw-ar)}

.jw-upgrade-map .ln{fill:none; stroke:var(--jw-wl); stroke-width:1.3px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.jw-upgrade-map .ln2{fill:none; stroke:var(--jw-wl2); stroke-width:1px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.jw-upgrade-map .fx{fill:#272828; stroke:var(--jw-wl); stroke-width:1.3px; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.jw-upgrade-map .cu{fill:none; stroke:var(--jw-cu); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.jw-upgrade-map .cu2{fill:none; stroke:var(--jw-cu2); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.jw-upgrade-map .flow{fill:none; stroke:#FFE9D2; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:5 15; opacity:0}
.js .jw-upgrade-map .flow{opacity:.9; animation:jwumFlow 1.9s linear infinite; animation-play-state:paused}
.js .jw-upgrade-map.is-live .flow{animation-play-state:running}
@keyframes jwumFlow{to{stroke-dashoffset:-40}}
.jw-upgrade-map .fl{stroke:rgb(42,43,45); stroke-opacity:.22; stroke-width:1px; vector-effect:non-scaling-stroke}
.jw-upgrade-map .water{fill:#03B3EF; fill-opacity:.16}
.jw-upgrade-map .wl{fill:none; stroke:#03B3EF; stroke-width:1.2px; vector-effect:non-scaling-stroke}
.jw-upgrade-map .sky{fill:#03B3EF}
.jw-upgrade-map .cond{fill:none; stroke:#949597; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.jw-upgrade-map .wire{fill:none; stroke:rgb(42,43,45); stroke-opacity:.5; stroke-width:1px; vector-effect:non-scaling-stroke; stroke-dasharray:2 4}
.jw-upgrade-map .arc{fill:none; stroke:#03B3EF; stroke-width:2.4; stroke-linecap:round}
.jw-upgrade-map .sludge{fill:url(#jwUmHatch)}
.jw-upgrade-map .tint{fill:#F09A5C; fill-opacity:.66; transition:fill-opacity 1.4s var(--ease)}
.jw-upgrade-map[data-state=after] .t1{transition-delay:.7s}
.jw-upgrade-map[data-state=after] .t2{transition-delay:.9s}
.jw-upgrade-map[data-state=before] .t0{fill-opacity:.62}
.jw-upgrade-map[data-state=before] .t1{fill-opacity:.26}
.jw-upgrade-map[data-state=before] .t2{fill-opacity:.03}

.jw-upgrade-map .old,.jw-upgrade-map .new{transition:opacity .7s var(--ease), transform .9s var(--ease)}
.jw-upgrade-map .pop{transform-box:fill-box; transform-origin:50% 100%}
.jw-upgrade-map .jdraw{stroke-dasharray:1; stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease)}
.jw-upgrade-map[data-state=after] .old{opacity:0}
.jw-upgrade-map[data-state=after] .old.ghost{opacity:.14}
.jw-upgrade-map[data-state=after] .new{transition-delay:var(--d,0s)}
.jw-upgrade-map[data-state=after] .new .jdraw{transition-delay:var(--d,0s)}
.jw-upgrade-map[data-state=before] .new{opacity:0}
.jw-upgrade-map[data-state=before] .new.pop{transform:translateY(8px) scale(.96)}
.jw-upgrade-map[data-state=before] .new .jdraw{stroke-dashoffset:1}
.jw-upgrade-map .flow{transition:opacity .8s var(--ease)}
.js .jw-upgrade-map[data-state=before] .flow.b1{opacity:.4}
.js .jw-upgrade-map[data-state=before] .flow.b2{opacity:0}
.jw-upgrade-map.jw-um-now *{transition:none !important}

.jw-upgrade-map .jw-um-hs{position:absolute; z-index:1; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0; border:0; background:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent; display:grid; place-items:center}
.jw-upgrade-map .jw-um-hs span{position:relative; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(42,43,45,.9); background:#EDEEEF; color:#262727; font:600 13px/1 Inter,system-ui,sans-serif;
  transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .5s var(--ease)}
.jw-upgrade-map .jw-um-hs span::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid #03B3EF; opacity:0; pointer-events:none}
.jw-upgrade-map .jw-um-hs:hover span{border-color:#03B3EF}
.jw-upgrade-map .jw-um-hs.on span{background:var(--jw-sky); border-color:#03B3EF; color:var(--jw-ink); transform:scale(1.1)}
.jw-upgrade-map .jw-um-hs.on span::after{animation:jwumHalo 1.1s var(--ease) 1 both}
@keyframes jwumHalo{0%{opacity:.9; transform:scale(1)}100%{opacity:0; transform:scale(1.9)}}

.jw-upgrade-map .jw-um-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(14px,1.6vw,24px); margin:14px 0 0; padding:0; list-style:none}
.jw-upgrade-map .jw-um-b{position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:8px 0; border:0;
  border-bottom:1px solid var(--jw-hair); background:none; color:#474748; font:inherit; font-size:16px; line-height:1.3; text-align:left;
  cursor:pointer; transition:color .3s var(--ease)}
.jw-upgrade-map .jw-um-b::before{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--jw-sky);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.jw-upgrade-map .jw-um-b i{flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50%;
  font:600 11.5px/1 Inter,system-ui,sans-serif; font-style:normal; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease)}
.jw-upgrade-map .jw-um-b:hover{color:#262727}
.jw-upgrade-map .jw-um-b.on{color:#262727}
.jw-upgrade-map .jw-um-b.on::before{transform:scaleX(1)}
.jw-upgrade-map .jw-um-b.on i{background:var(--jw-sky); border-color:#03B3EF; color:var(--jw-ink)}
.jw-upgrade-map .jw-um-b:focus-visible,.jw-upgrade-map .jw-um-t:focus-visible{outline:2px solid var(--jw-sky); outline-offset:2px}

.jw-upgrade-map .jw-um-bar{display:none}
.js .jw-upgrade-map .jw-um-bar{display:flex; gap:28px; margin:22px 0 0; border-bottom:1px solid var(--jw-hair)}
.jw-upgrade-map .jw-um-t{position:relative; min-height:44px; padding:0; border:0; background:none; cursor:pointer;
  font:600 12.5px/1 Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#525253;
  transition:color .35s var(--ease)}
.jw-upgrade-map .jw-um-t::after{content:""; position:absolute; left:0; right:.18em; bottom:-1px; height:2px; background:var(--jw-sky);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease)}
.jw-upgrade-map .jw-um-t:hover{color:#262727}
.jw-upgrade-map .jw-um-t[aria-pressed=true]{color:#262727}
.jw-upgrade-map .jw-um-t[aria-pressed=true]::after{transform:scaleX(1)}

.jw-upgrade-map .jw-um-panel{padding-top:22px}
.jw-upgrade-map .jw-um-o + .jw-um-o{margin-top:30px}
.jw-upgrade-map .jw-um-o h3{color:#262727; font-size:clamp(25px,2.25vw,32px); line-height:1.1; margin:0 0 14px}
.jw-upgrade-map .jw-um-o p{margin:0 0 .7em; color:#3F4041; font-size:16px; line-height:1.6}
.jw-upgrade-map .jw-um-o p:last-child{margin-bottom:0}
.jw-upgrade-map .jw-um-k{display:block; margin:0 0 6px; font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#05668E}
.jw-upgrade-map .jw-um-row + .jw-um-row{margin-top:16px}

.js .jw-upgrade-map .jw-um-panel{display:grid}
.js .jw-upgrade-map .jw-um-o{grid-area:1 / 1; visibility:hidden; opacity:0}
.js .jw-upgrade-map .jw-um-o + .jw-um-o{margin-top:0}
.js .jw-upgrade-map .jw-um-o.on{visibility:visible; opacity:1; animation:jwumIn .55s var(--ease) both}
.js .jw-upgrade-map .jw-um-rows{display:grid}
.js .jw-upgrade-map .jw-um-row{grid-area:1 / 1; margin:0; visibility:hidden; opacity:0; transition:opacity .45s var(--ease), visibility 0s .45s}
.js .jw-upgrade-map[data-state=before] .jw-um-row[data-s=before],
.js .jw-upgrade-map[data-state=after] .jw-um-row[data-s=after]{visibility:visible; opacity:1; transition:opacity .55s var(--ease) .1s, visibility 0s}
@keyframes jwumIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

@media (max-width:899px){
  .jw-upgrade-map .jw-um-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "bar" "stage" "panel"; grid-template-rows:none}
  .js .jw-upgrade-map .jw-um-bar{margin:18px 0 18px}
  .jw-upgrade-map .jw-um-panel{padding-top:26px}
}
@media (max-width:599px){
  .jw-upgrade-map .jw-um-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jw-upgrade-map .jw-um-hs span{width:26px; height:26px; font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .jw-upgrade-map *,.jw-upgrade-map *::before,.jw-upgrade-map *::after{transition:none !important; animation:none !important}
  .js .jw-upgrade-map .flow{opacity:0}
}