/* Process illustrations: one deliberate 12s sequence per selected panel. */
.process-art.process-schematic{--pg-ink:#d9c7ff;--pg-muted:#a397b7;--pg-line:#b393ed33;--pg-accent:#b18bf5;display:block;height:auto;padding:0;border:1px solid #b49ae02f;border-radius:16px;background:radial-gradient(ellipse at 50% 40%,#38254a35,transparent 68%),#0d0b11;isolation:isolate;container-type:inline-size}
.process-schematic::before{content:"";position:absolute;inset:46px 0 37px;background-image:radial-gradient(#bc9ee21a .65px,transparent .65px);background-size:18px 18px;z-index:-1;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.pg-head{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #b393ed19;font:10px/1.2 var(--sans,Arial,sans-serif);letter-spacing:1.6px;text-transform:uppercase;color:#b6a3cb}
.pg-head>span{display:flex;align-items:center;gap:9px}.pg-head>span::before{content:"";width:5px;height:5px;border:1px solid #c5a9ff;border-radius:50%;box-shadow:0 0 12px #b186ed45}.pg-head>small{font-size:10px;color:#7d708e;letter-spacing:1px}
.pg-canvas{position:relative;height:306px;margin:0 18px;font-family:var(--sans,Arial,sans-serif)}
.pg-canvas svg{display:block;overflow:visible}.pg-routes{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none}.pg-routes path{vector-effect:non-scaling-stroke;stroke-width:1;stroke:#a88bc040}.pg-routes .pg-route-lit{stroke:#c5a3ff;stroke-width:1.3;stroke-dasharray:12 88;stroke-dashoffset:12;opacity:0;animation:pg-route 12s linear infinite;filter:drop-shadow(0 0 4px #ae83ef)}.pg-routes .pg-route-secondary{animation-delay:1s}.pg-routes .pg-route-late{animation-delay:4s}
.pg-card{border:1px solid #b69acf35;background:linear-gradient(130deg,#241a2de8,#141119f5);border-radius:8px;box-shadow:0 8px 25px #0002;color:var(--pg-ink)}
.pg-icon{width:21px;height:21px;stroke:#c7a9f0;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.pg-label{font-size:10px;line-height:1.35;font-weight:400;letter-spacing:0}.pg-detail{font-size:10px;line-height:1.5;color:var(--pg-muted);letter-spacing:.1px}.pg-kicker{font-size:10px;letter-spacing:1.25px;text-transform:uppercase;color:#b397d2}
.pg-foot{position:relative;height:39px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 22px;border-top:1px solid #b393ed19;background:#0c0a10;font:10px/1 var(--sans,Arial,sans-serif);color:#897d99;letter-spacing:.15px}.pg-foot>span{display:flex;align-items:center;gap:7px}.pg-foot b{display:block;height:3px;width:3px;border-radius:50%;background:currentColor}.pg-foot>span:nth-child(1){animation:pg-phase-one 12s ease infinite}.pg-foot>span:nth-child(2){animation:pg-phase-two 12s ease infinite}.pg-foot>span:nth-child(3){animation:pg-phase-three 12s ease infinite}.pg-foot::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:linear-gradient(90deg,#8c65c2,#d1b9ff);transform-origin:left;animation:pg-progress 12s linear infinite}
/* 01. Read the inputs, resolve a focus, lay out the first version. */
.pg-inputs{position:absolute;top:20px;left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.pg-input{display:flex;align-items:center;gap:9px;padding:11px 10px;min-height:53px;animation:pg-input 12s ease infinite}.pg-input:nth-child(2){animation-delay:.45s}.pg-input:nth-child(3){animation-delay:.9s}.pg-input>div{min-width:0}.pg-input .pg-label,.pg-input .pg-detail{display:block}.pg-input .pg-detail{margin-top:3px}
.pg-focus{position:absolute;left:50%;top:107px;transform:translateX(-50%);width:180px;height:59px;display:flex;align-items:center;justify-content:center;gap:13px;border-color:#bc95f95c;background:linear-gradient(100deg,#382543,#1c1427);animation:pg-focus 12s ease infinite}.pg-focus>svg{width:27px;height:27px;flex:none;fill:none;stroke:#d1b4ff;stroke-width:1;stroke-linecap:round}.pg-focus .pg-detail{display:block;margin-top:4px}
.pg-scope{position:absolute;top:198px;left:9px;right:9px;height:90px;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:14px 17px;animation:pg-output 12s ease infinite}.pg-scope-title{display:block;font-size:10px;color:#e2d4f6;line-height:1.4;margin-top:5px}.pg-priorities{display:flex;align-items:center;gap:5px;margin-top:8px}.pg-priorities>i{font:10px/1.1 var(--sans,Arial,sans-serif);color:#bba8d2;border:1px solid #ba9ade26;border-radius:3px;padding:3px 5px;white-space:nowrap}.pg-roadmap{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:9px;padding-top:14px}.pg-roadmap::before,.pg-roadmap::after{content:"";position:absolute;top:27px;left:9%;right:9%;height:1px;background:#b993e740}.pg-roadmap::after{background:#b995ed;transform-origin:left;animation:pg-roadmap 12s ease infinite}.pg-roadmap>span{z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;color:#bca9d0}.pg-roadmap b{height:10px;width:10px;border-radius:50%;background:#1c1427;border:1px solid #c1a0e7;box-shadow:0 0 0 4px #21182b}.pg-roadmap>span:last-child b{background:#b899df;box-shadow:0 0 0 4px #21182b,0 0 12px #a075d74a}
/* 02. A small product with a real scenario moving through its workflow. */
.pg-integrations{position:absolute;top:17px;left:10%;right:10%;display:flex;justify-content:space-between}.pg-integration{display:flex;align-items:center;gap:7px;font-size:10px;color:#bca7d3;padding:6px 9px;background:#15101c;border:1px solid #a587ca33;border-radius:5px}.pg-integration .pg-icon{width:14px;height:14px}
.pg-prototype{position:absolute;top:71px;left:5px;right:5px;height:171px;border-color:#b393ed5c;border-radius:9px;box-shadow:0 16px 35px #0004,0 0 35px #7f4aae0b;overflow:hidden;animation:pg-focus 12s ease infinite}.pg-window-head{height:31px;padding:0 12px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #b393ed27;background:#211728}.pg-window-head>i{width:3px;height:3px;background:#9a7cb7;border-radius:50%}.pg-window-head>span{font-size:10px;letter-spacing:.3px;color:#b6a1ce;margin-left:7px}.pg-window-head>small{font:10px/1 var(--sans,Arial,sans-serif);letter-spacing:.6px;color:#d6baf6;border:1px solid #b796db30;border-radius:3px;padding:3px 5px;margin-left:auto}.pg-prototype-body{display:grid;grid-template-columns:69px 1fr;min-height:140px}.pg-app-nav{padding:15px 9px;border-right:1px solid #b393ed1a;display:flex;flex-direction:column;gap:15px;color:#8b7b9d;font-size:10px}.pg-app-nav>span:first-child{color:#d3bbef}.pg-app-nav i{display:block;width:15px;height:3px;background:#8b6da54a;border-radius:1px}.pg-app-work{padding:14px 15px;display:grid;grid-template-columns:1.3fr 1fr;gap:17px}.pg-app-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;grid-column:1/-1;font-size:10px;color:#dac8ed}.pg-app-heading small{font-size:10px;color:#a98ec1;letter-spacing:.5px}.pg-test-list{margin-top:-7px}.pg-test-row{display:flex;gap:7px;align-items:center;height:23px;color:#a996bc;font-size:10px}.pg-test-row>svg{width:12px;height:12px;fill:none;stroke:#b993e4;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}.pg-test-row>svg path{stroke-dasharray:1;stroke-dashoffset:0;animation:pg-check 12s ease infinite}.pg-test-row:nth-child(2)>svg path{animation-delay:1.3s}.pg-test-row:nth-child(3)>svg path{animation-delay:2.6s}.pg-test-row:nth-child(3){color:#dec4fc}
.pg-preview{border:1px solid #b69ade35;border-radius:5px;position:relative;padding:10px;margin-top:-7px;background:#32213e60;animation:pg-output 12s ease infinite}.pg-preview-top{display:flex;gap:7px;align-items:center;color:#e1cdf6;font-size:10px}.pg-preview-top .pg-icon{width:17px;height:17px}.pg-preview-lines{margin-top:9px;display:grid;gap:4px}.pg-preview-lines>i{height:2px;width:92%;background:#af91ca4a;border-radius:2px}.pg-preview-lines>i:nth-child(2){width:76%}.pg-preview-lines>i:nth-child(3){width:52%;background:#c6a8e6}.pg-review-dot{position:absolute;right:8px;bottom:8px;height:4px;width:4px;border-radius:50%;background:#c3a0f3;box-shadow:0 0 9px #b48ae75e;animation:pg-signal 12s ease infinite}
.pg-validation{position:absolute;top:266px;left:5px;right:5px;display:flex;justify-content:center;gap:18px;font-size:10px;color:#b5a3c8}.pg-validation>span{display:flex;align-items:center;gap:5px}.pg-validation svg{width:11px;height:11px;fill:none;stroke:#c9a8f4;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
/* 03. Deployment connects the product to the people who operate it. */
.pg-release{position:absolute;top:15px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;color:#b9a6ce;font-size:10px;letter-spacing:.2px}.pg-release::before{content:"";width:4px;height:4px;border:1px solid #be9cde;border-radius:1px;transform:rotate(45deg)}
.pg-live{position:absolute;left:50%;top:88px;transform:translateX(-50%);width:113px;height:113px;border:1px solid #b991ed61;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#4f31614d,#1b1226 70%);box-shadow:0 0 40px #9d69d211;animation:pg-live 12s ease infinite}.pg-live::before,.pg-live::after{position:absolute;content:"";inset:-8px;border:1px solid #aa83d528;border-radius:50%}.pg-live::after{inset:-18px;border-style:dashed;border-color:#aa83d51b}.pg-live>small{font-size:10px;letter-spacing:1.5px;color:#ab8dcc;text-transform:uppercase}.pg-live>strong{font:400 31px/1.5 var(--serif,Georgia,serif);color:#ebddff}.pg-live-signal{display:flex;align-items:center;gap:3px;height:9px}.pg-live-signal>i{height:3px;width:3px;border-radius:1px;background:#b89bd5;animation:pg-signal 12s ease infinite}.pg-live-signal>i:nth-child(2){height:7px;animation-delay:.2s}.pg-live-signal>i:nth-child(3){height:5px;animation-delay:.4s}.pg-live-signal>i:nth-child(4){height:9px;animation-delay:.6s}.pg-live-signal>i:nth-child(5){height:4px;animation-delay:.8s}
.pg-node{position:absolute;width:29%;height:62px;padding:11px 10px;display:flex;align-items:center;gap:9px}.pg-node .pg-label,.pg-node .pg-detail{display:block}.pg-node .pg-detail{margin-top:4px}.pg-node-team{top:59px;left:0;animation:pg-input 12s ease infinite}.pg-node-tools{top:59px;right:0;animation:pg-input 12s ease infinite;animation-delay:1s}.pg-node-handoff{top:200px;left:0;animation:pg-output 12s ease infinite}.pg-node-feedback{top:200px;right:0;animation:pg-output 12s ease infinite;animation-delay:1s}.pg-operating-note{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:10px;color:#8d7b9f;letter-spacing:.3px}.pg-operating-note>span{color:#ba9ddb}
/* The control is shared with the site's motion state; hidden until JS is ready. */
.process-motion-controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:14px;color:#8f809f;font-size:10px}.process-motion-controls .motion-toggle{border:1px solid #b393ed35;border-radius:6px;background:#141018;color:#c9b4e0;font:10px/1.3 var(--sans,Arial,sans-serif);padding:8px 11px;min-height:34px}.process-motion-controls .motion-toggle:hover{background:#21162c;border-color:#b393ed70}.process-motion-controls .motion-toggle:focus-visible{outline:2px solid #c6a8ef;outline-offset:4px}
@keyframes pg-route{0%,6%{stroke-dashoffset:12;opacity:0}10%{opacity:1}36%{stroke-dashoffset:-100;opacity:1}40%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes pg-input{0%,7%,38%,100%{border-color:#b69acf35;box-shadow:0 8px 25px #0002}15%,29%{border-color:#c59cfb85;box-shadow:0 0 20px #a16dce13}}
@keyframes pg-focus{0%,24%,64%,100%{box-shadow:0 0 25px #a16dce08}35%,52%{box-shadow:0 0 28px #b283ef26;border-color:#cea8ff90}}
@keyframes pg-output{0%,43%,100%{border-color:#b69acf35;box-shadow:0 8px 25px #0002}58%,88%{border-color:#c39aed80;box-shadow:0 0 23px #a777d41a}}
@keyframes pg-roadmap{0%,46%{transform:scaleX(0);opacity:.3}72%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes pg-check{0%,15%{stroke-dashoffset:1;opacity:.2}27%,91%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.2}}
@keyframes pg-signal{0%,30%,100%{opacity:.45}47%,88%{opacity:1}}
@keyframes pg-live{0%,14%,100%{box-shadow:0 0 38px #9d69d210;border-color:#b991ed61}30%,88%{box-shadow:0 0 42px #ba8df52b;border-color:#c5a0fa9c}}
@keyframes pg-progress{0%{transform:scaleX(0);opacity:.65}92%{transform:scaleX(1);opacity:.85}100%{transform:scaleX(1);opacity:0}}
@keyframes pg-phase-one{0%,30%{color:#e2caff}38%,100%{color:#897d99}}
@keyframes pg-phase-two{0%,28%,68%,100%{color:#897d99}38%,60%{color:#e2caff}}
@keyframes pg-phase-three{0%,58%,100%{color:#897d99}68%,93%{color:#e2caff}}
.motion-paused .process-schematic *,.motion-paused .process-schematic *::before,.motion-paused .process-schematic *::after,.process-player.offscreen .process-schematic *,.process-player.offscreen .process-schematic *::before,.process-player.offscreen .process-schematic *::after,.motion-document-hidden .process-schematic *,.motion-document-hidden .process-schematic *::before,.motion-document-hidden .process-schematic *::after{animation-play-state:paused!important}
@container(max-width:460px){.pg-head{padding-inline:15px;font-size:10px;letter-spacing:1.1px}.pg-head>small{font-size:10px}.pg-canvas{margin-inline:12px}.pg-inputs{gap:7px}.pg-input{padding:10px 7px;gap:6px}.pg-input .pg-icon{width:16px;height:16px}.pg-input .pg-label{font-size:10px}.pg-input .pg-detail{display:none}.pg-scope{left:0;right:0;padding:14px 12px;gap:10px;grid-template-columns:1.15fr 1fr}.pg-scope-title{font-size:10px}.pg-priorities{gap:3px}.pg-priorities>i{font-size:10px;padding-inline:3px}.pg-roadmap{gap:4px}.pg-roadmap>span{font-size:10px}.pg-node{width:29%;height:68px;padding:9px 7px;gap:7px;flex-direction:column;align-items:flex-start;justify-content:center}.pg-node .pg-icon{width:17px;height:17px}.pg-node .pg-label{font-size:10px;white-space:nowrap}.pg-node .pg-detail{display:none}.pg-live{width:91px;height:91px;top:100px}.pg-live>strong{font-size:10px}.pg-live::after{inset:-14px}.pg-live::before{inset:-6px}.pg-foot{padding-inline:15px;font-size:10px}.pg-integration{font-size:10px}.pg-prototype-body{grid-template-columns:52px 1fr}.pg-app-nav{font-size:10px;padding-inline:7px}.pg-app-work{padding:14px 10px;gap:10px}.pg-app-heading{font-size:10px}.pg-test-row{font-size:10px;gap:5px}.pg-preview{padding:8px}.pg-preview-top{font-size:10px;gap:5px}.pg-preview-top .pg-icon{width:14px;height:14px}.pg-validation{gap:12px;font-size:10px}}
@container(max-width:330px){.pg-head{padding-inline:12px}.pg-head>small{letter-spacing:.3px}.pg-canvas{margin-inline:10px}.pg-input{gap:5px;padding-inline:6px}.pg-input .pg-label{font-size:10px}.pg-input .pg-icon{width:14px;height:14px}.pg-scope{grid-template-columns:1fr 1fr;padding-inline:10px}.pg-scope-title{max-width:110px;font-size:10px}.pg-priorities>i:last-child{display:none}.pg-roadmap>span{font-size:10px}.pg-app-nav{display:none}.pg-prototype-body{grid-template-columns:1fr}.pg-app-work{padding-inline:10px}.pg-node .pg-label{font-size:10px}.pg-live{width:81px;height:81px;top:105px}.pg-live>strong{font-size:10px}.pg-live>small{font-size:10px}.pg-live::after{inset:-11px}.pg-foot{font-size:10px;padding-inline:12px}.pg-validation{gap:8px;font-size:10px}.pg-validation svg{width:9px;height:9px}.pg-release,.pg-operating-note{font-size:10px}}
/* Larger type and generous cards keep the diagrams readable beside the copy. */
.pg-label{font-size:13px}.pg-detail{font-size:10px}.pg-head,.pg-head>small{font-size:10px}.pg-scope-title{font-size:14px}.pg-roadmap>span{font-size:11px}.pg-kicker{font-size:10px}.pg-foot{font-size:11px}.pg-window-head>span{font-size:11px}.pg-app-heading{font-size:13px}.pg-test-row{font-size:11px}.pg-preview-top{font-size:11px}.pg-validation{font-size:11px}.pg-integration{font-size:11px}.pg-release,.pg-operating-note{font-size:10px}
.process-panels{container-type:inline-size}.process-description{min-height:clamp(210px,calc(480px - 50cqw),360px)}
.process-tab{position:relative;overflow:hidden;background:linear-gradient(110deg,#100c16,#0c0a0f);border-color:#af91d526;transition:background .25s,border-color .25s,box-shadow .25s}.process-tab[aria-selected=true]{border-color:#b891ef77;background:linear-gradient(110deg,#30203f,#1a1322);box-shadow:inset 3px 0 #bc95f3,0 7px 24px #0002}.process-tab[aria-selected=true] .step-number{color:#d7bafa}.process-tab:hover{border-color:#ba94ed6e}.process-tab:focus-visible{outline:2px solid #c6a8ef;outline-offset:4px}.process-tab small{font-size:11px;line-height:1.5}.step-number{font-size:12px}
@container(max-width:460px){.pg-head,.pg-head>small{font-size:10px}.pg-head{letter-spacing:.6px}.pg-input{flex-direction:column;justify-content:center;gap:5px;padding:7px 4px}.pg-input .pg-label{font-size:11px}.pg-input .pg-detail{display:none}.pg-label{font-size:12px}.pg-scope-title{font-size:12px}.pg-kicker{font-size:10px;letter-spacing:.7px}.pg-priorities>i{font-size:10px}.pg-roadmap>span{font-size:10px}.pg-foot{font-size:10px;letter-spacing:0}.pg-foot>span{gap:4px}.pg-app-nav{display:none}.pg-prototype-body{grid-template-columns:1fr}.pg-app-work{grid-template-columns:1.35fr 1fr;gap:9px}.pg-app-heading{font-size:12px}.pg-test-row{font-size:11px;height:25px}.pg-preview-top{font-size:11px}.pg-preview-top .pg-icon{display:none}.pg-validation{font-size:10px;gap:10px}.pg-integration{font-size:10px}.pg-node .pg-label{font-size:11px}.pg-node .pg-detail{display:none}.pg-node{align-items:center;text-align:center}.pg-live>strong{font-size:28px}.pg-live>small{font-size:10px;letter-spacing:.5px}.pg-release,.pg-operating-note{font-size:10px}.pg-window-head>span{font-size:10px}}
@container(max-width:330px){.pg-head{font-size:10px;padding-inline:10px}.pg-head>small{font-size:10px}.pg-head>span{gap:6px}.pg-scope{grid-template-columns:1fr 1fr;gap:7px}.pg-scope-title{font-size:12px;max-width:110px}.pg-priorities{display:none}.pg-kicker{font-size:10px;letter-spacing:0}.pg-roadmap>span{font-size:10px}.pg-node .pg-label{font-size:11px}.pg-live>strong{font-size:25px}.pg-live>small{font-size:9px}.pg-foot{font-size:10px;padding-inline:10px}.pg-test-row{font-size:10px;gap:4px}.pg-app-work{grid-template-columns:1.5fr 1fr;gap:6px}.pg-app-heading{font-size:11px}.pg-app-heading small{display:none}.pg-preview-top{font-size:10px}.pg-preview{padding:7px}.pg-validation{font-size:10px;gap:8px}.pg-release,.pg-operating-note{font-size:10px}}
@media(max-width:700px){.process-tab strong{font-size:19px;line-height:1.25}.process-tab{min-height:102px;padding:16px 12px}.process-tab[aria-selected=true]{box-shadow:inset 0 2px #bc95f3}.step-number{font-size:11px}}
@media(max-width:370px){.process-tab strong{font-size:16px}.process-tab{padding-inline:10px}}
@container(max-width:330px){.pg-head>small{display:none}.pg-head>span{min-width:0}}
.process-motion-controls .motion-toggle{min-height:44px;font-size:12px}
@media(prefers-reduced-motion:reduce){.process-schematic *,.process-schematic *::before,.process-schematic *::after{animation:none!important}.process-schematic .pg-route-lit{opacity:0}.process-schematic .pg-roadmap::after{transform:none;opacity:1}.process-schematic .pg-foot::after{transform:none;opacity:.4}.process-schematic .pg-test-row>svg path{stroke-dashoffset:0;opacity:1}.process-schematic .pg-foot>span{color:#c1aad9}.process-motion-controls{display:none}}