/* Concrete service examples for PREVIEW and OPERATE, matching steps 03/04. */
.cap-example{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .35s,transform .5s,visibility .35s}
.cap-example text{font-family:Studio,Arial,sans-serif;fill:#20382d;letter-spacing:-.035em}
.cap-example .ce-kicker{font-size:19px;font-weight:550;fill:#d5fa86}
.cap-example .ce-title{font-size:24px;font-weight:700}
.cap-example .ce-label{font-size:17px;font-weight:600}
.cap-example .ce-small{font-size:13px;fill:#63716a}
.cap-example .ce-micro{font:11px Consolas,monospace;letter-spacing:0;fill:#63716a}
.cap-example .ce-white{fill:#fff}.cap-example .ce-blue{fill:#214df3}.cap-example .ce-muted{fill:#8a9690}
.cap-example .ce-line{fill:none;stroke:#cbd2c7;stroke-width:1}
.cap-example .ce-route{fill:none;stroke:#d5fa86;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cap-example .ce-check{fill:none;stroke:#214df3;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cap-example .ce-preview-image{overflow:hidden!important}
.cap-stage[data-state="0"] .cap-preview-example,.cap-stage[data-state="1"] .cap-operate-example{opacity:1;visibility:visible;transform:none}
.cap-stage[data-state="0"] .cap-core,.cap-stage[data-state="1"] .cap-core{z-index:4;width:46vw;right:5%;height:31vw;top:34%}
.cap-stage[data-state="0"] .ce-preview-window,.cap-stage[data-state="1"] .ce-admin{animation:ce-enter .6s both}
.cap-stage[data-state="0"] .ce-preview-image{animation:ce-reveal .8s .3s both}
.cap-stage[data-state="0"] .ce-decision,.cap-stage[data-state="1"] .ce-published{animation:ce-enter .6s .65s both}
.cap-stage[data-state="0"] .ce-route,.cap-stage[data-state="1"] .ce-route{stroke-dasharray:120;animation:ce-route .7s .5s both}
.cap-stage[data-state="0"] .ce-summary,.cap-stage[data-state="1"] .ce-summary{animation:ce-enter .5s .95s both}
.cap-stage[data-state="1"] .ce-field{animation:ce-reveal .7s .25s both}
.cap-stage[data-state="1"] .ce-save{animation:ce-save .6s .65s both;transform-box:fill-box;transform-origin:center}
.cap-stage[data-state="1"] .ce-update{animation:ce-enter .6s 1s both}
.cap-stage[data-state="1"] .ce-check{stroke-dasharray:36;animation:ce-route .5s 1.4s both}
@keyframes ce-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ce-reveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes ce-route{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
@keyframes ce-save{0%{opacity:0;transform:scale(.94)}60%{opacity:1;transform:scale(1.025)}100%{transform:scale(1)}}
@media(min-width:701px){.cap-stage[data-state="0"] .cap-title,.cap-stage[data-state="1"] .cap-title{font-size:10.5vw}}
@media(max-width:700px){.cap-stage[data-state="0"] .cap-core,.cap-stage[data-state="1"] .cap-core{width:92vw;right:4%;height:62vw;top:34%;max-height:none}.cap-example .ce-kicker{font-size:21px}}
@media(prefers-reduced-motion:reduce){.cap-example,.cap-example *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}}
body.reduced .cap-example,body.reduced .cap-example *{animation:none!important;transition:none!important;stroke-dashoffset:0!important}