/* Sylo, Why Atlas (builder B2, kept by B8): the heading set inside / outside, heading and paragraph centred together. */

/* ---------- Why Atlas: inside / outside, heading and paragraph centred together ---------- */
.sy-why{padding-top:clamp(88px,9vw,136px);text-align:center}
.sy-why .eyebrow{margin-bottom:22px}
.sy-io{display:block}
.sy-out{display:block;color:#fff}
.sy-in{display:inline-block;position:relative;margin-top:.14em;padding:.1em .34em .16em;color:var(--fg2)}
.sy-box2{position:absolute;inset:0;border-radius:22px;border:1.5px dashed rgba(255,255,255,.38);background:rgba(255,255,255,.025)}
.sy-box2::before{content:'';position:absolute;left:-2px;top:22%;bottom:22%;width:3px;border-radius:2px;background:var(--verm)}
.sy-agent{position:relative}
.sy-why-l{margin:34px auto 0;max-width:34em}
.sy-other{padding:0 .3em .06em;border:1px dashed rgba(255,255,255,.38);border-radius:8px;color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .sy-out{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform 1.1s var(--spring)}
.js .sy-box2{opacity:0;transform:scale(.94);transition:opacity .7s var(--ease) .35s,transform 1s var(--spring) .35s}
.js .sy-agent{opacity:0;transition:opacity .7s var(--ease) .15s}
.js .sy-io.in .sy-out,.js .sy-io.in .sy-box2,.js .sy-io.in .sy-agent{opacity:1;transform:none}
@media (max-width:760px){ .sy-box2{border-radius:14px}.sy-why-l{margin-top:26px} }
@media (prefers-reduced-motion:reduce){
  .js .sy-out,.js .sy-box2,.js .sy-agent{opacity:1;transform:none;transition:none}
}