/* Sylo, Benefits (client r19 "the window wall jump one, done more elegantly"): the gate figure from explore/final, fine light lines on the
   dark ground, one vermilion request. Lines drawn by sy-jump.js; labels are HTML. Tokens and type roles only. */
.sy-jump{position:relative;width:100%;height:clamp(360px,34vw,500px);margin:0 0 clamp(40px,4vw,64px)}
.sy-jump svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.sj-l{position:absolute;left:0;top:0;margin-top:-44px;font:var(--w-h3) var(--s-lede)/1.2 var(--f);letter-spacing:-.012em;color:var(--fg);white-space:nowrap;will-change:transform}
.sj-l i{display:block;width:22px;height:2px;margin-top:8px;background:var(--line2);transition:width var(--t2) var(--ease),background-color var(--t2) var(--ease)}
.sy-jump.done .sj-l i{width:36px;background:var(--verm)}
.sj-pl{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.55);stroke-width:1}
.sj-sbx{stroke-dasharray:5 4}
.sj-gd{fill:rgba(255,255,255,.28)}
.sj-wall{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.62);stroke-width:1}
.sj-ht{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.sj-win{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.2;transition:stroke var(--t2) var(--ease),stroke-width var(--t2) var(--ease)}
.sy-jump.pass .sj-win{stroke:var(--verm);stroke-width:1.6}
.sj-fl{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}
.sj-ld{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.sj-sh{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:1.5 5;stroke-linecap:round}
.sj-req{fill:none;stroke:var(--verm);stroke-width:2;stroke-linecap:round}
.sj-a{fill:var(--bg);stroke:#fff;stroke-width:1.6}
.sj-b{fill:var(--verm)}
.js .sy-jump .sj-base{opacity:0;transition:opacity var(--t2) var(--ease)}
.js .sy-jump.in .sj-base{opacity:1}
.js .sy-jump .sj-req{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease-io) .35s}
.js .sy-jump.in .sj-req{stroke-dashoffset:0}
.js .sy-jump .sj-b{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity var(--t1) var(--ease),transform var(--t2) var(--spring)}
.js .sy-jump.done .sj-b{opacity:1;transform:none}
.js .sy-jump .sj-l{opacity:0;transition:opacity var(--t2) var(--ease) .2s}
.js .sy-jump.in .sj-l{opacity:1}
@media (prefers-reduced-motion:reduce){ .sy-jump *{transition:none!important} }
@media (max-width:760px){
  .sy-jump{height:min(300px,64vw);margin-bottom:36px}
  .sj-l{font-size:var(--s-small);margin-top:-28px}
  .sj-l i{margin-top:5px;width:16px}
  .sy-jump.done .sj-l i{width:24px}
}