/* Small, contextual motion: all sequences can be stopped. */
.c-process{display:flex;align-items:center;justify-content:center;gap:10px;margin:25px auto 0;width:max-content;max-width:100%}.c-process-step{display:flex;align-items:center;gap:8px;background:#ffffff70;border:1px solid #d8e3ce;padding:9px 15px;border-radius:8px;font-size:11px;color:#789167;transition:color .6s,background .6s,border-color .6s,transform .6s,box-shadow .6s}.c-process-step .icon{width:16px;height:16px}.c-process-step.is-active{background:#edf8e4;color:#206943;border-color:#accf94;transform:translateY(-3px);box-shadow:0 7px 17px #447d3012}.c-process>i{position:relative;display:block;width:25px;height:1px;background:#c6d9b7;overflow:hidden}.c-process>i:after{content:'';position:absolute;left:0;top:0;width:10px;height:1px;background:#478a50;animation:c-process-line 2.5s ease-in-out infinite}.c-process>i:nth-of-type(2):after{animation-delay:1.2s}.c-launch-actions{display:flex;align-items:center;gap:10px}.live-demo .c-tour-start{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #b6db9270;border-radius:8px;min-height:42px;padding:10px 14px;background:#d6f3a5;color:#224d2b;font-size:11px;font-weight:600;transition:transform .2s,background .2s}.live-demo .c-tour-start:hover{background:#e5fac4;transform:translateY(-2px)}.live-demo .c-tour-start:disabled{opacity:.6;transform:none;cursor:default}.live-demo .c-tour-start .icon{width:13px;height:13px;fill:currentColor;stroke-width:1}.live-demo .c-tour-panel{position:relative;background:#ecf5e2;border-bottom:1px solid #cedebf;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:76px}.live-demo .c-tour-narration{display:flex;align-items:center;gap:12px;min-width:0}.live-demo .c-tour-number{display:grid;place-items:center;width:32px;height:32px;background:#246b43;color:#e5f6d9;border-radius:9px;font-size:12px;font-weight:550;flex-shrink:0}.live-demo .c-tour-narration b{display:block;font-size:12px;font-weight:550;color:#2b6239}.live-demo .c-tour-narration p{font-size:10px;color:#6e885d;line-height:1.6;margin-top:4px}.live-demo .c-tour-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}.live-demo .c-tour-controls button{border:1px solid #c6dab7;border-radius:6px;background:#f7fbf1;color:#547346;font-size:9px;min-height:33px;padding:7px 10px;white-space:nowrap}.live-demo .c-tour-controls .c-tour-stop{font-size:20px;min-width:32px;padding:4px;line-height:1}.live-demo .c-tour-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#dceacb}.live-demo .c-tour-progress span{display:block;height:100%;background:#438a51;transition:width .8s var(--ease-out);width:0}.live-demo .c-tour-target{outline:2px solid #8eba62!important;outline-offset:4px;box-shadow:0 0 0 7px #bbd89b33;transition:outline-offset .4s,box-shadow .4s}.live-demo .c-tour-paused .c-tour-number{background:#6f8756}.live-demo .d-product-visual>svg{transition:transform .65s var(--ease-out),filter .65s}.live-demo .d-product:hover .d-product-visual>svg{transform:translateY(-7px) rotate(-3deg);filter:drop-shadow(3px 9px 5px #23391d20)}.live-demo .d-product:active .d-product-visual>svg{transform:translateY(-2px) scale(.96)}.d-mode{font-size:9px!important;letter-spacing:.3px!important}.sample-tag{background:#eff6e7;border-color:#d8e6ca;color:#517544}.dashboard-filter,.period-switch{transition:background .2s}.c-process[hidden]{display:none}.export-section .report-download{display:inline-flex}.workspace-download{background:linear-gradient(150deg,#e5f3d9,#f1f8eb);border-color:#bed7a9;font-weight:600}.workspace-download:hover{background:#dff0cf}.hero-copy h1{position:relative}.hero-copy h1>span{background-size:200% auto;animation:c-title-shift 10s ease-in-out infinite}.d-cart-count{font-variant-numeric:tabular-nums}
@keyframes c-process-line{0%,100%{transform:translateX(-10px);opacity:0}30%{opacity:1}75%{transform:translateX(25px);opacity:0}}
@keyframes c-title-shift{0%,100%{background-position:0% center}50%{background-position:100% center}}
@media(max-width:1050px){.live-demo .p-app-caption small,.live-demo .p-caption-divider{display:none}.live-demo .p-app-caption{font-size:10px}.c-launch-actions{gap:8px}.live-demo .c-tour-start,.live-demo .p-expand{font-size:10px;padding-inline:12px}.live-demo .c-tour-panel{padding:15px 18px;gap:10px}.live-demo .c-tour-narration p{font-size:9px}.live-demo .c-tour-narration b{font-size:11px}}
@media(max-width:760px){.c-process{margin-top:22px;gap:8px}.c-process-step{padding:8px 12px;font-size:10px;gap:7px}.c-process-step .icon{width:14px;height:14px}.c-process>i{width:21px}.live-demo .p-app-launch{flex-direction:column;align-items:stretch;gap:13px}.live-demo .p-app-caption{max-width:none;font-size:11px}.c-launch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.live-demo .p-expand,.live-demo .c-tour-start{font-size:11px;padding:11px 10px}.live-demo .c-tour-panel{flex-wrap:wrap;gap:11px;padding:15px}.live-demo .c-tour-narration{gap:10px}.live-demo .c-tour-narration p{font-size:10px}.live-demo .c-tour-controls{margin-left:auto}.live-demo .c-tour-controls button{min-height:35px;font-size:10px}.live-demo .c-tour-progress span{transition-duration:.4s}}
@media(max-width:480px){.c-process{gap:7px;margin-top:20px}.c-process-step{padding:8px 10px;font-size:9px;gap:5px;border-radius:6px}.c-process-step .icon{width:13px;height:13px}.c-process>i{width:17px}.live-demo .c-tour-start,.live-demo .p-expand{font-size:10px;gap:7px}.live-demo .c-tour-panel{padding:13px 12px}.live-demo .c-tour-number{width:29px;height:29px;font-size:10px}.live-demo .c-tour-narration b{font-size:11px}.live-demo .c-tour-narration p{font-size:9px}.d-mode{font-size:8px!important}}
@media(max-width:350px){.c-process-step{padding:8px;font-size:8px}.c-process>i{width:13px}.c-process-step .icon{width:12px;height:12px}.live-demo .c-tour-start,.live-demo .p-expand{font-size:9px}.c-launch-actions{gap:7px}}
@media(prefers-reduced-motion:reduce){.c-process>i:after,.hero-copy h1>span{animation:none}.c-process-step.is-active{transform:none}.live-demo .d-product:hover .d-product-visual>svg{transform:none;filter:none}.live-demo .c-tour-start:hover{transform:none}.live-demo .c-tour-progress span{transition:none}}
html[data-motion=paused] .c-process-step.is-active,html[data-motion=paused] .live-demo .d-product:hover .d-product-visual>svg{transform:none}html.page-away .c-process>i:after,html.page-away .hero-copy h1>span{animation-play-state:paused}