/* CleanPlex UMI only: native editorial text, original decorative SVG, no animation library. */
body.pg-tech-page #content .pg-cleanplex-umi-motion { --umi-ink:#32105e; --umi-muted:#6c6078; position:relative; isolation:isolate; margin:36px 0 28px !important; padding:32px 32px 24px; background:#faf8fd; color:var(--umi-ink); border:1px solid #e5dcee; border-radius:24px; box-shadow:0 14px 40px rgb(58 21 97 / 4%); overflow:hidden; scroll-margin-top:104px; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-kicker { margin:0 0 12px !important; color:#72429c; font-size:12px !important; font-weight:700; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; }
body.pg-tech-page #content .pg-cleanplex-umi-motion h2 { max-width:750px; margin:0 0 14px !important; color:var(--umi-ink) !important; font-size:clamp(27px,2.8vw,38px) !important; line-height:1.2 !important; letter-spacing:-.035em; font-weight:700; text-align:left !important; }
body.pg-tech-page #content .pg-cleanplex-umi-motion h2::after { content:none !important; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-intro { max-width:770px; margin:0 !important; color:var(--umi-muted); font-size:16px !important; line-height:1.65 !important; }
.pg-cleanplex-umi-motion .umi-stage { position:relative; margin:12px -10px 0; background:radial-gradient(ellipse at 48% 54%,#eee8f7,transparent 68%); }
.pg-cleanplex-umi-motion .umi-art { display:block; width:100%; height:auto; }
.pg-cleanplex-umi-motion .umi-art--mobile { display:none; }
.pg-cleanplex-umi-motion .umi-scene { opacity:0; visibility:hidden; transition:opacity .35s ease,visibility .35s ease; }
.pg-cleanplex-umi-motion:not([data-umi-step]) .umi-scene--0,
.pg-cleanplex-umi-motion[data-umi-step="0"] .umi-scene--0,
.pg-cleanplex-umi-motion[data-umi-step="1"] .umi-scene--1,
.pg-cleanplex-umi-motion[data-umi-step="2"] .umi-scene--2,
.pg-cleanplex-umi-motion[data-umi-step="3"] .umi-scene--3,
.pg-cleanplex-umi-motion[data-umi-step="4"] .umi-scene--4 { opacity:1; visibility:visible; }
.pg-cleanplex-umi-motion .umi-controls { position:absolute; top:30px; right:32px; display:flex; align-items:center; gap:14px; }
.pg-cleanplex-umi-motion .umi-controls[hidden],.pg-cleanplex-umi-motion .umi-toggle[hidden] { display:none !important; }
.pg-cleanplex-umi-motion .umi-toggle { display:inline-flex; gap:8px; justify-content:center; align-items:center; min-height:40px; padding:8px 12px; background:transparent; border:1px solid #d5c8e3; border-radius:8px; color:var(--umi-ink); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.pg-cleanplex-umi-motion .umi-toggle::before { content:''; width:7px; height:10px; border-left:2px solid; border-right:2px solid; box-sizing:border-box; }
.pg-cleanplex-umi-motion:not(.umi-running) .umi-toggle::before { width:0; height:0; border:5px solid transparent; border-left:7px solid currentColor; border-right:0; }
.pg-cleanplex-umi-motion .umi-toggle:hover { background:#eee5f5; }
.pg-cleanplex-umi-motion .umi-count { color:#796989; font-size:11px; letter-spacing:.12em; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:0 0 24px !important; padding:0; color:#665972; font-size:12px !important; line-height:1.5 !important; }
.pg-cleanplex-umi-motion .umi-legend span { display:inline-flex; align-items:center; gap:8px; }
.pg-cleanplex-umi-motion .umi-legend span::before { content:''; display:block; width:20px; height:6px; border-radius:2px; background:repeating-linear-gradient(90deg,#8052ba 0 4px,#d8c8eb 4px 6px); }
.pg-cleanplex-umi-motion .umi-legend .umi-key-index::before { background:#cc8a20; }
.pg-cleanplex-umi-motion .umi-legend .umi-key-error::before { width:8px; height:8px; border-radius:2px; background:#c95570; }
.pg-cleanplex-umi-motion .umi-legend .umi-key-variant::before { width:9px; height:9px; background:#d45618; border-radius:1px; transform:rotate(45deg); }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; list-style:none; counter-reset:umi; margin:0 !important; padding:0 !important; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps > li { position:relative; min-width:0; counter-increment:umi; list-style:none; margin:0 !important; padding:0 !important; background:#fff; border:1px solid #e5dcee; border-radius:12px; overflow:hidden; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps > li::before { content:none !important; }
.pg-cleanplex-umi-motion .umi-step { display:block; width:100%; height:100%; padding:17px 14px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pg-cleanplex-umi-motion .umi-step::before { content:'0' counter(umi); display:block; margin-bottom:10px; color:#907ca2; font-size:11px; line-height:1.4; font-weight:600; letter-spacing:.12em; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps strong { display:block; margin:0 0 8px; color:#32105e; font-size:16px !important; line-height:1.4 !important; font-weight:700; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps span { display:block; color:#6c6078; font-size:13px !important; line-height:1.6 !important; }
.pg-cleanplex-umi-motion .umi-step:hover { background:#fcfaff; }
.pg-cleanplex-umi-motion .umi-step[aria-pressed="true"],.pg-cleanplex-umi-motion .umi-step[aria-pressed="true"]:hover { background:#efe8f8; box-shadow:inset 0 3px #8052ba; }
.pg-cleanplex-umi-motion .umi-step[aria-pressed="true"]::before { color:#694093; }
.pg-cleanplex-umi-motion :is(.umi-step,.umi-toggle):focus-visible { outline:3px solid #b74c18; outline-offset:-4px; }
.pg-cleanplex-umi-motion.umi-animate .umi-step[aria-pressed="true"]::after { content:''; position:absolute; top:0; left:0; height:3px; width:100%; background:#8052ba; transform-origin:left; animation:umi-progress 7s linear both; }
body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-footnote { margin:18px 0 0 !important; color:#786c84; font-size:12px !important; line-height:1.6 !important; }
.pg-cleanplex-umi-motion .umi-scene--1 .umi-redundant { opacity:.22; }
.pg-cleanplex-umi-motion .umi-scene--1 .umi-tail { opacity:.2; }
.pg-cleanplex-umi-motion .umi-error { opacity:1; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="0"] .umi-primer { animation:umi-primer 2.3s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="0"] .umi-copy { animation:umi-copy 3.4s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="1"] .umi-tail { animation:umi-tail 4s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="1"] .umi-redundant { animation:umi-resolve 4.5s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="1"] .umi-cleave { animation:umi-cleave 3s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="2"] .umi-index { animation:umi-index 3s both; transform-box:fill-box; transform-origin:center; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="2"] .umi-copy { animation:umi-copy 3s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="3"] .umi-flow-in { animation:umi-sequence 2.5s 2 both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="3"] .umi-read { animation:umi-read 3.2s both; }
.pg-cleanplex-umi-motion.umi-animate[data-umi-step="4"] .umi-consensus { animation:umi-consensus 4s both; }
.pg-cleanplex-umi-motion.umi-animate :is(.umi-delay-1,.umi-delay-1 .umi-copy,.umi-delay-1 .umi-read,.umi-delay-1 .umi-index) { animation-delay:.35s; }
.pg-cleanplex-umi-motion.umi-animate :is(.umi-delay-2,.umi-delay-2 .umi-copy,.umi-delay-2 .umi-read,.umi-delay-2 .umi-index) { animation-delay:.7s; }
.pg-cleanplex-umi-motion.umi-animate:not(.umi-running) .umi-art *, .pg-cleanplex-umi-motion:not(.umi-running) .umi-step::after { animation-play-state:paused !important; }
body.pg-tech-page #content .pg-cleanplex-umi-motion:not([data-umi-ready]) .umi-steps > li { padding:17px 14px !important; }
@keyframes umi-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes umi-primer { from { opacity:0; translate:-16px 0; } to { opacity:1; translate:0 0; } }
@keyframes umi-copy { 0%,20% { opacity:0; translate:0 -12px; } 85%,100% { opacity:1; translate:0 0; } }
@keyframes umi-tail { 0%,25% { opacity:1; translate:0 0; } 85%,100% { opacity:.15; translate:10px -8px; } }
@keyframes umi-resolve { 0%,25% { opacity:1; } 85%,100% { opacity:.15; } }
@keyframes umi-cleave { 0%,10% { opacity:0; } 35%,65% { opacity:1; } 100% { opacity:.3; } }
@keyframes umi-index { 0%,15% { opacity:0; scale:.4 1; } 85%,100% { opacity:1; scale:1 1; } }
@keyframes umi-sequence { 0% { opacity:0; translate:-16px 0; } 35%,65% { opacity:1; } 100% { opacity:0; translate:38px 0; } }
@keyframes umi-read { 0%,25% { opacity:0; translate:-18px 0; } 80%,100% { opacity:1; translate:0 0; } }
@keyframes umi-consensus { 0%,35% { opacity:0; translate:-10px 0; } 90%,100% { opacity:1; translate:0 0; } }
@media(max-width:1200px) { .pg-cleanplex-umi-motion .umi-controls { position:static; justify-content:flex-end; margin:0 0 18px; } body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps { grid-template-columns:repeat(6,minmax(0,1fr)); } .pg-cleanplex-umi-motion .umi-steps > li { grid-column:span 2; } .pg-cleanplex-umi-motion .umi-steps > li:nth-child(n+4) { grid-column:span 3; } }
@media(max-width:767px) { body.pg-tech-page #content .pg-cleanplex-umi-motion { padding:24px 18px 20px; border-radius:18px; margin-top:28px !important; } body.pg-tech-page #content .pg-cleanplex-umi-motion h2 { font-size:28px !important; } .pg-cleanplex-umi-motion .umi-art--desktop { display:none; } .pg-cleanplex-umi-motion .umi-art--mobile { display:block; } .pg-cleanplex-umi-motion .umi-stage { margin:10px -12px 0; } body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-legend { justify-content:flex-start; gap:10px 16px; font-size:11px !important; margin-bottom:20px !important; } body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps { grid-template-columns:minmax(0,1fr); gap:8px; } .pg-cleanplex-umi-motion .umi-steps > li,.pg-cleanplex-umi-motion .umi-steps > li:nth-child(n+4) { grid-column:auto; } .pg-cleanplex-umi-motion .umi-step { position:relative; padding:13px 13px 13px 48px; } .pg-cleanplex-umi-motion .umi-step::before { position:absolute; top:16px; left:15px; } body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps strong { margin-bottom:4px; font-size:15px !important; } body.pg-tech-page #content .pg-cleanplex-umi-motion .umi-steps span { font-size:13px !important; } }
@media(prefers-reduced-motion:reduce) { .pg-cleanplex-umi-motion *, .pg-cleanplex-umi-motion *::before { animation:none !important; transition:none !important; } }