/* All illustration layers sample the same approved artwork. Only the graphic
   strip (source y=410…748) is exposed; the original raster text stays masked. */
.license-story{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));isolation:isolate}
.license-art-defs{position:absolute;width:0;height:0;overflow:hidden}
.license-step{min-width:0;text-align:center;position:relative}
.license-art{position:relative;aspect-ratio:1637 / 1014;pointer-events:none}
.license-art>svg{display:block;position:absolute;top:0;left:calc(var(--step) * -100%);width:300%;height:100%;max-width:none;overflow:visible}
.license-connections,.license-final-art{position:absolute;top:0;left:0;display:block;width:100%;height:auto;aspect-ratio:1637 / 338;overflow:hidden;pointer-events:none}
.license-connections{z-index:-1}
.license-final-art{z-index:1}
.license-step h3{margin:14px 16px 0;transform-origin:center}
.license-step p{max-width:34ch;margin:14px auto 0;padding-inline:20px;font-size:1rem;color:#68717d}
.license-mobile-connection{display:none}
.license-visual,.license-micro,.license-link{transform-box:view-box}
.license-step-unlock .license-visual{transform-origin:311px 603px}
.license-step-sync .license-visual{transform-origin:818.5px 589px}
.license-step-continue .license-visual{transform-origin:1326px 606px}
.license-check{transform-origin:433px 622px}
.license-sync-symbol{transform-origin:880px 579px}
.license-card{transform-origin:1423px 695px}

.license-ready .license-final-art,.license-playing .license-final-art{visibility:hidden}
.license-ready .license-visual,.license-ready .license-link,.license-ready .license-step h3,.license-ready .license-step p{opacity:0}
/* 5.3s entrance + 1.8s print + 1.5s final hold + 0.5s soft reset. */
.license-playing{animation:license-story-clock 9100ms linear both}
.license-paused,.license-paused *{animation-play-state:paused!important}
.license-playing .license-visual,.license-playing .license-step h3{animation-timing-function:cubic-bezier(.2,.75,.25,1);animation-fill-mode:both}
.license-playing .license-step-unlock .license-visual{animation-name:license-enter-left;animation-duration:800ms;animation-delay:100ms}
.license-playing .license-step-sync .license-visual{animation-name:license-enter-center;animation-duration:800ms;animation-delay:1900ms}
.license-playing .license-step-continue .license-visual{animation-name:license-enter-right;animation-duration:850ms;animation-delay:3850ms}
.license-playing .license-step h3{animation-name:license-title;animation-duration:500ms;animation-delay:calc(850ms + var(--step) * 1850ms)}
.license-playing .license-step p{animation:license-description 350ms cubic-bezier(.2,.75,.25,1) calc(1200ms + var(--step) * 1850ms) both}
.license-playing .license-link{animation-duration:650ms;animation-timing-function:cubic-bezier(.4,0,.25,1);animation-fill-mode:both}
.license-playing .license-link-one{animation-name:license-connect-one;animation-delay:1400ms}
.license-playing .license-link-two{animation-name:license-connect-two;animation-delay:3300ms}
.license-playing .license-check{animation:license-validate 350ms ease-in-out 1100ms both}
.license-playing .license-sync-symbol{animation:license-synchronize 600ms cubic-bezier(.4,0,.2,1) 2750ms both}
.license-playing .license-card{animation:license-print 1800ms cubic-bezier(.3,0,.7,1) 5300ms both}
.license-playing .license-card-finish{animation:license-print-finish 1800ms steps(1,end) 5300ms both}

@keyframes license-story-clock{0%{opacity:0}2.2%,94.5055%{opacity:1}100%{opacity:0}}
@keyframes license-enter-left{0%{opacity:0;transform:translateX(-100px) scale(.94)}76%{opacity:1;transform:translateX(0) scale(1.02)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes license-enter-center{0%{opacity:0;transform:scale(.72)}76%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes license-enter-right{0%{opacity:0;transform:translateX(100px) scale(.94)}76%{opacity:1;transform:translateX(0) scale(1.02)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes license-title{0%{opacity:0;transform:scale(.78)}72%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes license-description{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes license-connect-one{from{opacity:1;clip-path:inset(0 71.9% 0 0)}to{opacity:1;clip-path:inset(0 59.55% 0 0)}}
@keyframes license-connect-two{from{opacity:1;clip-path:inset(0 41.91% 0 0)}to{opacity:1;clip-path:inset(0 28.95% 0 0)}}
@keyframes license-validate{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes license-synchronize{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Translation only; the final transform maps exactly onto the source pixels. */
@keyframes license-print{from{transform:translate(30px,-58px)}to{transform:translate(0,0)}}
@keyframes license-print-finish{from{opacity:0}to{opacity:1}}

@media(max-width:800px){
 .license-story{grid-template-columns:1fr}
 .license-connections,.license-final-art{display:none}
 .license-step{width:min(100%,520px);margin-inline:auto}
 .license-art{overflow:hidden}
 /* Keep the complete cloud and workstation in each stacked crop, including
    their soft shadows. The desktop masks separate the horizontal paths. */
 .license-step-sync .license-visual{clip-path:url(#license-sync-mobile-clip)}
 .license-step-continue .license-visual{clip-path:url(#license-continue-mobile-clip)}
 .license-step h3{margin-top:12px}
 .license-step p{margin-top:12px;padding-inline:8px}
 .license-mobile-connection{display:grid;place-items:center;height:90px;margin-block:12px;overflow:hidden}
 .license-mobile-connection svg{display:block;width:92px;height:auto;transform:rotate(90deg);overflow:hidden}
 /* The same blue path is turned vertically, never redrawn. */
 .license-playing .license-mobile-connection .license-link{animation-name:license-connect-mobile}
 @keyframes license-connect-mobile{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
}
@media(prefers-reduced-motion:reduce){
 .license-story,.license-story *{animation:none!important;transform:none!important}
 .license-ready .license-visual,.license-ready .license-link,.license-ready .license-step h3,.license-ready .license-step p{opacity:1}
 .license-ready .license-final-art,.license-playing .license-final-art{visibility:visible}
 .license-mobile-connection svg{transform:rotate(90deg)!important}
}