
/* AFTER LAUNCH · original delivery-to-operation narrative */
.process-art.section{display:block!important;height:460svh!important;min-height:0!important;padding:0!important;position:relative;overflow:visible!important;background:#080808}
.process-art .al-stage{height:100svh;position:sticky;top:0;overflow:hidden;display:flex;align-items:center;background:radial-gradient(ellipse at 51% 55%,#ff7e360b,transparent 48%);isolation:isolate}
.process-art .al-shell{width:min(1580px,calc(100% - 88px));margin:auto;position:relative;padding:60px 0 50px}
.process-art .al-topline{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff24;padding-top:18px;margin-bottom:55px;color:#777;font-size:11px;letter-spacing:.12em}
.process-art .al-topline strong{font-weight:400;color:#aaa;letter-spacing:.02em}
.process-art .al-layout{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:35px;align-items:center;min-height:430px}
.process-art .al-heading .eyebrow{font-size:14px;color:var(--lime)}
.process-art .al-heading h2{font-size:clamp(28px,3.1vw,46px);font-weight:500;line-height:1.38;letter-spacing:-.065em;margin:22px 0}
.process-art .al-heading p{font-size:14px;line-height:1.9;color:#858580;max-width:290px;word-break:keep-all}
.process-art .al-count{display:flex;align-items:baseline;gap:10px;margin-top:45px;font-size:13px;color:#555;letter-spacing:.02em}
.process-art .al-count b{font-size:44px;line-height:1;color:#f4f4f0;font-weight:400;letter-spacing:-.04em}
.process-art .al-object{height:420px;position:relative;perspective:1200px;min-width:0}
.process-art .al-object:before{content:'';position:absolute;left:50%;bottom:18px;width:86%;height:100px;transform:translateX(-50%) rotateX(60deg);border:1px solid #ffffff18;border-radius:50%;background:radial-gradient(ellipse,#ff7e3614,transparent 65%);box-shadow:0 0 0 34px #ffffff03}
.process-art .al-axis{position:absolute;inset:18px 0;pointer-events:none}

.process-art .al-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(34px) rotateY(-12deg) scale(.94);transition:opacity .5s,transform .85s var(--ease),visibility .5s;pointer-events:none}
.process-art .al-visual.is-active{opacity:1;visibility:visible;transform:translateY(0) rotateY(0) scale(1)}
.process-art .al-object-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;color:#5f5f5b;white-space:nowrap}
/* The delivery package: folded lid, front panel and three file cards. */
.process-art .al-package{width:235px;height:175px;position:relative;margin-top:92px;transform:rotate(-5deg);filter:drop-shadow(0 28px 24px #0008)}
.process-art .al-package-back{position:absolute;inset:-32px 0 0;background:#5c3220;border:1px solid #bd6f42;transform:skewY(5deg);border-radius:5px}
.process-art .al-lid{position:absolute;left:0;right:0;top:-92px;height:90px;border:1px solid #e79c6a;background:linear-gradient(145deg,#eaaa7c,#ba673c);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);transform:rotate(-10deg) translate(-12px,-10px);transform-origin:bottom;transition:transform 1s var(--ease)}
.process-art .al-file{position:absolute;top:-84px;width:104px;height:138px;border-radius:6px;padding:15px 12px;background:#f7f0e6;color:#222;font-size:10px;font-weight:700;box-shadow:0 12px 20px #0004;transition:transform 1s var(--ease);border:1px solid #ffffff88}
.process-art .al-file:before{content:'';display:block;width:28px;height:32px;border:1px solid #d7bca6;margin:0 0 13px;background:linear-gradient(145deg,#ff7e3622,#ff7e3600)}
.process-art .al-file:after{content:'';display:block;margin-top:9px;height:15px;background:repeating-linear-gradient(#b4a99b 0 1px,transparent 1px 6px)}
.process-art .al-file.f1{left:6px;transform:rotate(-17deg) translate(-13px,-18px)}.process-art .al-file.f2{left:65px;transform:translateY(-43px);background:#ff7e36;color:#261309}.process-art .al-file.f3{right:-3px;transform:rotate(15deg) translate(13px,-9px)}
.process-art .al-package-front{position:absolute;inset:20px -12px -8px;background:linear-gradient(145deg,#d89463,#af6540);border:1px solid #efb991;border-radius:5px 5px 12px 12px;box-shadow:inset 0 1px #ffe4c9;display:flex;flex-direction:column;justify-content:space-between;padding:24px;color:#321b11}
.process-art .al-package-front b{font-size:24px;letter-spacing:-.06em}.process-art .al-package-front span{font-size:9px;letter-spacing:.12em}
.process-art .al-seal{width:54px;height:54px;border:1px solid #64361d;border-radius:50%;position:absolute;right:22px;top:28px;display:grid;place-items:center;font-size:25px}
/* Ownership: layered credentials with an original document-and-key drawing. */
.process-art .al-license{position:relative;width:256px;height:300px;background:linear-gradient(145deg,#f5efe7,#c7baaa);border:1px solid #fff9;border-radius:10px;transform:rotate(-7deg);color:#29241f;padding:30px;box-shadow:12px 14px 0 #514538,13px 15px 0 #8b7863,0 32px 45px #0007}
.process-art .al-license small{font-size:9px;letter-spacing:.14em;color:#7c6c5e}.process-art .al-license h4{font-size:26px;line-height:1.3;margin:14px 0 27px;letter-spacing:-.04em}.process-art .al-rule{height:1px;background:#9a887433;margin:12px 0}.process-art .al-license p{font-size:10px;color:#6d6054;line-height:1.8}
.process-art .al-license-stamp{position:absolute;bottom:24px;right:25px;width:62px;height:62px;border:1px solid #bf5e2a;border-radius:50%;color:#b35929;display:grid;place-items:center;font-size:28px;transform:rotate(-15deg)}
.process-art .al-key{position:absolute;width:120px;height:72px;right:-47px;top:123px;background:linear-gradient(140deg,#ffac75,#e26e2c);border:1px solid #ffcba8;border-radius:12px;transform:rotate(17deg);display:grid;place-items:center;box-shadow:0 14px 28px #0005}
.process-art .al-key svg{width:70px;height:40px;stroke:#4c2815;fill:none;stroke-width:3}
/* Maintenance: a small operating dashboard, without copying a reference image. */
.process-art .al-monitor{width:310px;height:224px;position:relative;transform:rotateY(-14deg) rotateX(5deg);border:1px solid #817566;background:linear-gradient(145deg,#38352e,#171714);border-radius:14px;padding:12px;box-shadow:10px 10px 0 #111,12px 12px 0 #575044,0 28px 40px #0008}
.process-art .al-screen{height:100%;background:#f0ece3;border-radius:5px;color:#30291e;padding:18px}.al-screenbar{display:flex;gap:4px;padding-bottom:14px;border-bottom:1px solid #c7beaf}.al-screenbar i{width:4px;height:4px;background:#a79b89;border-radius:50%}.al-screenbar span{font-size:8px;margin-left:auto;letter-spacing:.1em}
.process-art .al-screen-title{font-size:12px;margin:16px 0 12px;display:flex;justify-content:space-between}.process-art .al-online{font-size:8px;color:#437254;background:#dce6d9;padding:2px 5px;border-radius:4px}
.process-art .al-chart{height:68px;display:flex;gap:8px;align-items:end;border-bottom:1px solid #cdbfae;padding:0 4px 6px}.al-chart i{flex:1;background:#d4c5b4;border-radius:3px 3px 0 0}.al-chart i:nth-child(3n){background:#ff7e36}
.process-art .al-screen-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:8px;color:#82715c}.process-art .al-monitor:after{content:'';position:absolute;width:90px;height:45px;left:50%;top:100%;transform:translateX(-50%);background:linear-gradient(90deg,#554d41,#c4b39b,#615849);clip-path:polygon(28% 0,72% 0,76% 78%,100% 90%,100% 100%,0 100%,0 90%,24% 78%)}
.process-art .al-tool{position:absolute;right:-28px;bottom:-13px;width:70px;height:70px;border-radius:17px;background:#ff7e36;color:#4e260e;display:grid;place-items:center;transform:rotate(12deg);font-size:39px;box-shadow:0 12px 26px #0005}
/* Manual: a bound book, opening into a quick-start spread. */
.process-art .al-book{position:relative;width:225px;height:290px;perspective:1000px;transform:rotate(-8deg);filter:drop-shadow(0 24px 22px #0008)}
.process-art .al-book-pages{position:absolute;inset:5px -10px -5px 8px;background:repeating-linear-gradient(0deg,#bbb0a0 0 1px,#eee5d7 1px 4px);border-radius:5px 12px 12px 5px;border:1px solid #c2b4a0}
.process-art .al-book-inner{position:absolute;inset:0;background:#f2eadf;color:#433325;padding:26px 24px;border-radius:4px 10px 10px 4px;box-shadow:inset 10px 0 15px #0001}
.process-art .al-book-inner small{font-size:9px;color:#9d6c4b}.al-book-inner h4{font-size:18px;margin:14px 0 22px}.al-book-inner p{padding:9px 0;border-bottom:1px solid #b89b7a55;font-size:10px}
.process-art .al-book-cover{position:absolute;inset:0;transform-origin:left;transform:rotateY(0);transition:transform 1.3s .2s var(--ease);background:linear-gradient(130deg,#ff9a60,#ec6c28);border:1px solid #ffbe93;border-radius:4px 10px 10px 4px;color:#4a240f;padding:27px 20px;backface-visibility:visible;box-shadow:inset 8px 0 #a8481d33;display:flex;flex-direction:column;justify-content:space-between}
.process-art .al-book-cover b{font-size:30px;line-height:1.15;letter-spacing:-.04em}.process-art .al-book-cover span{font-size:9px;letter-spacing:.12em}.process-art .is-active .al-book-cover{transform:rotateY(-65deg)}
.process-art .al-copy-area{position:relative;min-height:260px;align-self:center}
.process-art .al-copy{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .4s,transform .55s var(--ease),visibility .4s;word-break:keep-all}
.process-art .al-copy.is-active{opacity:1;visibility:visible;transform:translateY(0)}
.process-art .al-copy-label{font-size:10px;color:var(--lime);letter-spacing:.1em;margin-bottom:22px}
.process-art .al-copy h3{font-size:clamp(25px,2.2vw,34px);font-weight:500;line-height:1.35;margin-bottom:22px}
.process-art .al-copy p{color:#999991;font-size:15px;line-height:1.95}
.process-art .al-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:24px}.process-art .al-tags span{border:1px solid #39342d;border-radius:20px;padding:4px 12px;font-size:10px;color:#c0af9e;line-height:1.6}
.process-art .al-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.process-art .al-step{position:relative;border:0;border-top:1px solid #333;background:none;padding:17px 0 0;display:flex;align-items:center;gap:13px;text-align:left;color:#666;transition:color .3s}
.process-art .al-step:before{content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.process-art .al-step.is-active{color:#eee}.process-art .al-step.is-active:before{transform:scaleX(1)}.process-art .al-step small{font-size:10px;letter-spacing:.04em;color:#676057}.process-art .al-step.is-active small{color:var(--lime)}.process-art .al-step span{font-size:13px}
.process-art .al-hint{display:flex;justify-content:space-between;margin-top:27px;color:#555;font-size:9px;letter-spacing:.09em}
@media(max-width:1100px) and (min-width:761px){.process-art .al-layout{gap:20px;grid-template-columns:1fr 1.25fr 1fr}.process-art .al-object{transform:scale(.82)}.process-art .al-heading h2{font-size:30px}.process-art .al-copy p{font-size:14px}.process-art .al-topline{margin-bottom:20px}}
@media(max-width:760px){.process-art.section{height:420svh!important}.process-art .al-shell{width:calc(100% - 36px);padding:26px 0 22px}.process-art .al-topline{margin-bottom:20px;font-size:9px;padding-top:12px}.process-art .al-topline strong{font-size:9px}.process-art .al-layout{display:grid;grid-template-columns:1fr;gap:0;min-height:0}.process-art .al-heading h2{font-size:27px;margin:9px 0 0;line-height:1.3}.process-art .al-heading h2 br{display:none}.process-art .al-heading .eyebrow{font-size:11px}.process-art .al-heading p{display:none}.process-art .al-count{position:absolute;right:0;top:83px;margin:0;gap:6px;font-size:10px}.process-art .al-count b{font-size:24px}.process-art .al-object{height:280px;transform:scale(.75);margin:-14px -20px -21px}.process-art .al-object-caption{display:none}.process-art .al-copy-area{min-height:157px;text-align:center}.process-art .al-copy-label{font-size:9px;margin-bottom:6px}.process-art .al-copy h3{font-size:23px;margin-bottom:10px}.process-art .al-copy p{font-size:13px;line-height:1.8;max-width:440px;margin:auto}.process-art .al-tags{margin-top:12px;justify-content:center}.process-art .al-tags span{font-size:9px;padding:3px 9px}.process-art .al-steps{gap:10px;margin-top:24px}.process-art .al-step{display:block;padding-top:10px}.process-art .al-step span{display:block;font-size:10px;margin-top:4px}.process-art .al-step small{font-size:9px}.process-art .al-hint{margin-top:18px;font-size:8px}}
@media(max-height:760px) and (min-width:761px){.process-art .al-shell{padding-block:26px}.process-art .al-topline{margin-bottom:12px}.process-art .al-layout{min-height:340px}.process-art .al-object{height:340px;transform:scale(.85)}.process-art .al-steps{margin-top:20px}.process-art .al-hint{margin-top:18px}}
@media(max-height:730px) and (max-width:760px){.process-art .al-topline{margin-bottom:10px}.process-art .al-shell{padding-block:16px}.process-art .al-heading h2{font-size:23px}.process-art .al-object{height:230px;transform:scale(.59);margin-block:-18px -15px}.process-art .al-copy-area{min-height:146px}.process-art .al-steps{margin-top:15px}.process-art .al-hint{margin-top:10px}.process-art .al-count{top:66px}}
@media(prefers-reduced-motion:reduce){.process-art .al-visual,.process-art .al-copy,.process-art .al-book-cover{transition:none}.process-art .is-active .al-book-cover{transform:rotateY(-45deg)}}


/* Layered PPT slides: website and administrator usage guide. */
.process-art .al-ppt{width:340px;max-width:100%;height:auto;overflow:visible;filter:drop-shadow(0 23px 20px #0006);transform:rotate(-4deg)}
.process-art .al-ppt-front{transform:translateY(10px);transition:transform 1s var(--ease)}
.process-art .is-active .al-ppt-front{transform:translateY(0)}
.process-art .al-ppt-cursor{transform:translate(5px,5px);transition:transform 1s .25s var(--ease)}
.process-art .is-active .al-ppt-cursor{transform:translate(0,0)}
@media(prefers-reduced-motion:reduce){.process-art .al-ppt-front,.process-art .al-ppt-cursor{transition:none}}


/* Replay each object's sequence as scroll activates its step. */
.process-item.al-motion-live .is-active .al-lid{animation:al-lid-open 1.15s both}
.process-item.al-motion-live .is-active .al-file.f1{animation:al-file-left 1.15s .12s both}
.process-item.al-motion-live .is-active .al-file.f2{animation:al-file-center 1.15s .24s both}
.process-item.al-motion-live .is-active .al-file.f3{animation:al-file-right 1.15s .36s both}
.process-item.al-motion-live .is-active .al-license{animation:al-document-in 1.1s both}
.process-item.al-motion-live .is-active .al-license-stamp{animation:al-stamp-in .65s .48s both}
.process-item.al-motion-live .is-active .al-key{animation:al-key-in 1.2s .2s both}
.process-art .al-chart i{transform-origin:bottom}
.process-item.al-motion-live .is-active .al-chart i{animation:al-chart-rise .85s both;animation-delay:calc(.18s + var(--bar-order)*.06s)}
.process-item.al-motion-live .is-active .al-tool{animation:al-tool-turn 1.65s .15s both}
.process-item.al-motion-live .is-active .al-online{animation:al-status-in .7s .7s both}
.process-item.al-motion-live .is-active .al-ppt-back{animation:al-slide-back 1.1s both}
.process-item.al-motion-live .is-active .al-ppt-middle{animation:al-slide-middle 1.1s .1s both}
.process-item.al-motion-live .is-active .al-ppt-front{animation:al-slide-front 1.1s .18s both}
.process-item.al-motion-live .is-active .al-ppt-cursor{animation:al-cursor-click 1.8s .45s both}
.process-item.al-motion-live .is-active .al-ppt-cursor circle{transform-box:fill-box;transform-origin:center;animation:al-click-ring 1.1s 1.3s both}
@keyframes al-lid-open{0%{transform:translateY(54px) rotate(0deg)}100%{transform:rotate(-10deg) translate(-12px,-10px)}}
@keyframes al-file-left{0%{transform:translateY(95px) rotate(0);opacity:0}100%{transform:rotate(-17deg) translate(-13px,-18px);opacity:1}}
@keyframes al-file-center{0%{transform:translateY(95px);opacity:0}100%{transform:translateY(-43px);opacity:1}}
@keyframes al-file-right{0%{transform:translateY(95px) rotate(0);opacity:0}100%{transform:rotate(15deg) translate(13px,-9px);opacity:1}}
@keyframes al-document-in{0%{transform:translateY(26px) rotate(-14deg);opacity:.2}100%{transform:translateY(0) rotate(-7deg);opacity:1}}
@keyframes al-stamp-in{0%{opacity:0;transform:scale(1.7) rotate(-30deg)}65%{opacity:1;transform:scale(.92) rotate(-15deg)}100%{transform:scale(1) rotate(-15deg)}}
@keyframes al-key-in{0%{transform:translate(38px,16px) rotate(40deg);opacity:0}70%{transform:translate(-4px,0) rotate(12deg);opacity:1}100%{transform:translate(0,0) rotate(17deg);opacity:1}}
@keyframes al-chart-rise{0%{transform:scaleY(.05);opacity:.25}100%{transform:scaleY(1);opacity:1}}
@keyframes al-tool-turn{0%{opacity:0;transform:scale(.6) rotate(-130deg)}65%{opacity:1;transform:scale(1.05) rotate(20deg)}100%{opacity:1;transform:scale(1) rotate(12deg)}}
@keyframes al-status-in{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes al-slide-back{0%{opacity:0;transform:translate(0,30px) rotate(0deg)}100%{opacity:1;transform:translate(0,0) rotate(7deg)}}
@keyframes al-slide-middle{0%{opacity:0;transform:translate(0,30px) rotate(0deg)}100%{opacity:1;transform:translate(0,0) rotate(-7deg)}}
.process-art .al-ppt-back,.process-art .al-ppt-middle{transform-origin:190px 165px}
@keyframes al-slide-front{0%{opacity:0;transform:translateY(38px)}100%{opacity:1;transform:translateY(0)}}
@keyframes al-cursor-click{0%{opacity:0;transform:translate(32px,25px)}45%{opacity:1;transform:translate(0,0)}65%{transform:translate(0,0)}76%{transform:translate(2px,3px)}100%{opacity:1;transform:translate(0,0)}}
@keyframes al-click-ring{0%{opacity:0;transform:scale(.3)}30%{opacity:.8}100%{opacity:0;transform:scale(1.6)}}
@media(prefers-reduced-motion:reduce){.process-item.al-motion-live .al-visual *{animation:none!important}}
