/* Tools and stack: copy and a stack list on the left; on the right twelve tools sit on a ring around the Appro mark,
   each wired to it with a beam of light running along the wire (adapted from 21st.dev Animated Beam by Dillion Verma).
   Deep purple on apps, lilac and white with black type on software. */
.sh-section{--sh-bg:radial-gradient(70% 80% at 78% 50%,#2a1454 0%,#160c2c 55%,#0d0719 100%);--sh-ink:#f3eefb;--sh-mute:#b4a8cb;--sh-line:#33255a;--sh-wire:rgba(196,181,253,.18);--sh-ring:rgba(196,181,253,.12);--sh-tile:#fff;--sh-tile-line:rgba(255,255,255,.14);--sh-hub:linear-gradient(135deg,#4c1d95,#8b5cf6);--sh-accent:#c4b5fd;--sh-chip:rgba(255,255,255,.06);
  position:relative;overflow:hidden;padding:120px 0;background:var(--sh-bg);color:var(--sh-ink)}
.sh-section--lilac{--sh-bg:linear-gradient(180deg,#f6f1fd 0%,#fbf9ff 60%,#fff 100%);--sh-ink:#0e0a17;--sh-mute:#4f4860;--sh-line:#e4dcf2;--sh-wire:rgba(109,40,217,.16);--sh-ring:rgba(109,40,217,.10);--sh-tile:#fff;--sh-tile-line:#e7e0f3;--sh-hub:linear-gradient(135deg,#2a1454,#6d28d9);--sh-accent:#6d28d9;--sh-chip:#fff}
.sh-shell{width:min(1200px,calc(100% - 48px));margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.sh-badge{display:inline-block;padding:7px 14px;border:1px solid var(--sh-line);border-radius:999px;font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--sh-mute)}
.ap-inner-page main .sh-title{margin:18px 0 14px;font:400 clamp(36px,4.4vw,56px)/1.02 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;color:var(--sh-ink)}
.ap-inner-page main .sh-title em{font-style:italic;color:var(--sh-accent)}
.sh-intro{margin:0 0 26px;max-width:31em;font:400 17px/1.6 Inter,sans-serif;color:var(--sh-mute)}
.sh-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--sh-line)}
.sh-steps li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--sh-line)}
.sh-stage{display:block;font:500 10.5px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-mute)}
.sh-steps b{display:block;font:600 14.5px/1.35 Inter,sans-serif;color:var(--sh-ink)}
.sh-steps p{margin:2px 0 0;font:400 13.5px/1.5 Inter,sans-serif;color:var(--sh-mute)}
.sh-diagram{position:relative;aspect-ratio:1/1;width:100%;max-width:600px;margin-left:auto}
.sh-rings{position:absolute;inset:0;pointer-events:none}
.sh-rings i{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed var(--sh-ring);transform:translate(-50%,-50%)}
.sh-rings i:nth-child(1){width:80%;height:80%}
.sh-rings i:nth-child(2){width:52%;height:52%;border-style:solid}
.sh-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sh-wires path{fill:none;stroke-linecap:round}
.sh-wire{stroke:var(--sh-wire);stroke-width:1.4}
.sh-beam{stroke:url(#sh-grad);stroke-width:2.4;stroke-dasharray:180 1000;stroke-dashoffset:180;animation:sh-beam 4.2s cubic-bezier(.45,0,.25,1) infinite}
.sh-section--lilac .sh-beam{stroke:url(#sh-grad-lilac)}
@keyframes sh-beam{from{stroke-dashoffset:180}to{stroke-dashoffset:-1000}}
.sh-node{position:absolute;z-index:1;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:17px;background:var(--sh-tile);border:1px solid var(--sh-tile-line);box-shadow:0 14px 30px -18px rgba(27,18,53,.45);transition:transform .3s ease}
.sh-node img{width:30px;height:30px;object-fit:contain}
.sh-node:hover{transform:translateY(-3px) scale(1.04)}
.sh-node::after{content:attr(data-name);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 11px/1 Inter,sans-serif;color:var(--sh-mute)}
.sh-hub{position:absolute;left:50%;top:50%;z-index:2;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:32px;display:grid;place-items:center;background:var(--sh-hub);box-shadow:0 0 0 12px color-mix(in srgb,#7c3aed 9%,transparent),0 30px 60px -24px rgba(76,29,149,.6)}
.sh-hub img{width:60px;height:60px}
.sh-hub::after{content:attr(data-name);position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 12.5px/1 Inter,sans-serif;color:var(--sh-ink)}
@media (max-width:980px){.sh-shell{grid-template-columns:1fr;gap:44px}.sh-diagram{margin:0 auto;max-width:540px}}
@media (max-width:640px){.sh-section{padding:72px 0}.sh-shell{width:calc(100% - 40px)}.sh-node{width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:12px}.sh-node img{width:23px;height:23px}.sh-node::after{display:none}.sh-hub{width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:22px}.sh-hub img{width:42px;height:42px}.sh-hub::after{top:calc(100% + 14px)}.sh-steps li{grid-template-columns:94px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.sh-beam{animation:none;stroke-dasharray:none;opacity:.45}}