.process-demo{position:relative;background:#0d0c11;isolation:isolate}
.process-demo svg{display:block;width:100%;height:100%;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.process-demo .demo-kicker{fill:#aaa3b5;font-size:9px;letter-spacing:1.1px}
.process-demo .demo-panel{stroke:#ffffff20;stroke-width:1}
.process-demo .demo-title{fill:#ede9f2;font-size:13px;letter-spacing:-.15px}
.process-demo .demo-small{fill:#97909f;font-size:9px;letter-spacing:.2px}
.process-demo .demo-caption{fill:#c1b2d2;font-size:11px;letter-spacing:.2px}
.process-demo .demo-node{fill:#a580d025;stroke:#b395d95c;stroke-width:1}
.process-demo .demo-tick{fill:none;stroke:#dac5f1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.process-demo .demo-chip{fill:#aa86d212;stroke:#b89bd433}
.process-demo .demo-chip-text{fill:#bfb0d0;font-size:9px}
.process-demo .demo-rail{stroke:#ad8fd42a;stroke-width:1;fill:none}
.process-demo .demo-note{stroke:#9e8bae;stroke-width:1.4;stroke-linecap:round;fill:none}
.process-demo .demo-signal{stroke:#c0a0e1;stroke-width:1.2;fill:none}
.process-demo .demo-avatar{fill:#bda3dd17;stroke:#d1bce42e;stroke-width:1}
.process-demo .demo-reply{fill:#9d71c91b;stroke:#b899d953;stroke-width:1}
.process-demo .demo-message-path{stroke:#b59cc526;stroke-width:1;fill:none}
.process-demo .demo-travel{stroke:#bea0dd;stroke-width:1.6;fill:none;stroke-dasharray:30 1200;stroke-linecap:round;animation:demo-delivery 12s linear infinite}
.process-demo .demo-grid{stroke:#ffffff0e;stroke-width:1;fill:none}
.process-demo .demo-calendar-slot{fill:#9060c531;stroke:#b38cda70;stroke-width:1}
.process-demo .demo-slot-title{fill:#ece3f8;font-size:11px}
.process-demo .demo-enter{transform-box:fill-box;transform-origin:center;animation:demo-arrive 12s ease-in-out infinite}
.process-demo .demo-second{animation-name:demo-arrive-second}
.process-demo .demo-third{animation-name:demo-arrive-third}
.process-demo .demo-result{animation:demo-ready 12s ease-in-out infinite}
.process-demo:not(.demo-visible) *,.page-hidden .process-demo *{animation-play-state:paused!important}
@keyframes demo-arrive{0%,4%{opacity:.2;transform:translateY(5px)}12%,88%{opacity:1;transform:translateY(0)}98%,100%{opacity:.2;transform:translateY(5px)}}
@keyframes demo-arrive-second{0%,23%{opacity:.14;transform:translateY(6px)}34%,88%{opacity:1;transform:translateY(0)}98%,100%{opacity:.14;transform:translateY(6px)}}
@keyframes demo-arrive-third{0%,46%{opacity:.14;transform:translateY(6px)}58%,88%{opacity:1;transform:translateY(0)}98%,100%{opacity:.14;transform:translateY(6px)}}
@keyframes demo-ready{0%,57%{opacity:0}67%,88%{opacity:1}98%,100%{opacity:0}}
@keyframes demo-delivery{0%{stroke-dashoffset:30;opacity:0}10%{opacity:1}66%{stroke-dashoffset:-210;opacity:1}74%,100%{stroke-dashoffset:-280;opacity:0}}
@media(prefers-reduced-motion:reduce){.process-demo *{animation:none!important;transform:none!important}.process-demo .demo-travel{display:none}.process-demo .demo-enter,.process-demo .demo-result{opacity:1}}
/* Larger booking calendar: each call arrives, then its reminder is sent. */
.calendar-shell{fill:#ffffff04;stroke:#ffffff24;stroke-width:1}
.calendar-demo .calendar-shell{fill:#ffffff04}
.calendar-day{fill:#8e8799;font-size:9px;letter-spacing:.5px}
.calendar-booking{fill:#9665c42c;stroke:#b78fd861;stroke-width:1}
.calendar-call{fill:#f0eaf5;font-size:12px;letter-spacing:-.1px}
.calendar-fit{fill:#c0a4dc15;stroke:#c0a4dc32;stroke-width:.7}
.calendar-fit-text{fill:#cbb9de;font-size:7.5px}
.calendar-status{fill:#b7a7c8;font-size:9px}
.calendar-event{transform-box:fill-box;transform-origin:center;animation:calendar-arrival 15s ease-in-out infinite;opacity:0}
.calendar-booked{animation:calendar-booked-state 15s linear infinite}
.calendar-reminder{animation:calendar-reminder-state 15s linear infinite;opacity:0}
.calendar-demo .event-2,.calendar-demo .event-2 .calendar-booked,.calendar-demo .event-2 .calendar-reminder{animation-delay:2.4s}
.calendar-demo .event-3,.calendar-demo .event-3 .calendar-booked,.calendar-demo .event-3 .calendar-reminder{animation-delay:4.8s}
@keyframes calendar-arrival{0%,2%{opacity:0;transform:translateY(6px) scale(.97)}8%,89%{opacity:1;transform:translateY(0) scale(1)}97%,100%{opacity:0;transform:translateY(0) scale(1)}}
@keyframes calendar-booked-state{0%,21%{opacity:1}26%,100%{opacity:0}}
@keyframes calendar-reminder-state{0%,23%{opacity:0}28%,91%{opacity:1}97%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.calendar-demo .calendar-event,.calendar-demo .calendar-reminder{opacity:1}.calendar-demo .calendar-booked{display:none}}
/* Every day is wider than its unchanged 147 × 51 booking card. */
.calendar-week-track{animation:calendar-week-pan 30s ease-in-out infinite}
.calendar-demo .event-4,.calendar-demo .event-4 .calendar-booked,.calendar-demo .event-4 .calendar-reminder{animation-delay:1.2s}
.calendar-demo .event-5,.calendar-demo .event-5 .calendar-booked,.calendar-demo .event-5 .calendar-reminder{animation-delay:3.6s}
.calendar-agenda-time{fill:#d0c6da;font-size:13px}
@keyframes calendar-week-pan{0%,15%{transform:translateX(0);opacity:1}22%,40%{transform:translateX(-205px);opacity:1}47%,65%{transform:translateX(-410px);opacity:1}72%,91%{transform:translateX(-615px);opacity:1}95%{transform:translateX(-615px);opacity:0}96%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.calendar-week-track{animation:none;transform:none;opacity:1}}
/* Setup: fixed labels, checks complete in order, with a quiet active-row highlight. */
.setup-demo .demo-enter{animation:none;opacity:1;transform:none}
.setup-active-row{fill:#b494db0c;stroke:#b494db20;opacity:0}
.setup-demo .demo-tick{stroke-dasharray:13;stroke-dashoffset:13;animation:setup-check-one 14s ease-in-out infinite}
.setup-demo .demo-second .demo-tick{animation-name:setup-check-two}
.setup-demo .demo-third .demo-tick{animation-name:setup-check-three}
.setup-demo .demo-first .setup-active-row{animation:setup-row-one 14s ease-in-out infinite}
.setup-demo .demo-second .setup-active-row{animation:setup-row-two 14s ease-in-out infinite}
.setup-demo .demo-third .setup-active-row{animation:setup-row-three 14s ease-in-out infinite}
.setup-demo .demo-result{animation:setup-ready 14s ease-in-out infinite}
@keyframes setup-check-one{0%,7%{stroke-dashoffset:13}14%,91%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:13}}
@keyframes setup-check-two{0%,27%{stroke-dashoffset:13}34%,91%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:13}}
@keyframes setup-check-three{0%,48%{stroke-dashoffset:13}55%,91%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:13}}
@keyframes setup-row-one{0%,23%,100%{opacity:0}5%,16%{opacity:1}}
@keyframes setup-row-two{0%,23%,43%,100%{opacity:0}27%,36%{opacity:1}}
@keyframes setup-row-three{0%,43%,66%,100%{opacity:0}48%,58%{opacity:1}}
@keyframes setup-ready{0%,55%{opacity:0}62%,91%{opacity:1}98%,100%{opacity:0}}
/* Inbox: a new reply arrives, a response is composed, then a next step appears. */
.inbox-demo .demo-first{animation:inbox-arrival 17s ease-in-out infinite}
.inbox-demo .demo-second{animation:inbox-compose 17s ease-in-out infinite;transform:none}
.inbox-demo .demo-third{animation:inbox-next-step 17s ease-in-out infinite}
.inbox-demo .demo-result{animation:inbox-result 17s ease-in-out infinite}
.inbox-typing{fill:#c2a4df;animation:inbox-typing-window 17s linear infinite;opacity:0}
.inbox-typing circle{animation:inbox-dot 1.1s ease-in-out infinite}
.inbox-typing circle:nth-child(2){animation-delay:.16s}.inbox-typing circle:nth-child(3){animation-delay:.32s}
.inbox-replied{animation:inbox-replied 17s ease-in-out infinite;opacity:0}
@keyframes inbox-arrival{0%,5%{opacity:0;transform:translateX(18px)}12%,92%{opacity:1;transform:translateX(0)}98%,100%{opacity:0;transform:translateX(0)}}
@keyframes inbox-compose{0%,20%{opacity:0}29%,100%{opacity:1}}
@keyframes inbox-next-step{0%,57%{opacity:0;transform:translateX(18px)}65%,92%{opacity:1;transform:translateX(0)}98%,100%{opacity:0;transform:translateX(0)}}
@keyframes inbox-typing-window{0%,23%{opacity:0}26%,42%{opacity:1}45%,100%{opacity:0}}
@keyframes inbox-dot{0%,100%{opacity:.3}45%{opacity:1}}
@keyframes inbox-replied{0%,44%{opacity:0}49%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes inbox-result{0%,65%{opacity:0}72%,92%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.setup-demo .demo-tick{stroke-dashoffset:0}.setup-demo .setup-active-row,.inbox-demo .inbox-typing{display:none}.inbox-demo .inbox-replied{opacity:1}}
/* Connect only the gaps between check circles; never run a line through a node. */
.setup-connector{fill:none;stroke:#b99bd170;stroke-width:1;stroke-linecap:round;stroke-dasharray:50;stroke-dashoffset:50}
.setup-connector-one{animation:setup-connect-one 14s ease-in-out infinite}
.setup-connector-two{animation:setup-connect-two 14s ease-in-out infinite}
@keyframes setup-connect-one{0%,15%{stroke-dashoffset:50}27%,100%{stroke-dashoffset:0}}
@keyframes setup-connect-two{0%,35%{stroke-dashoffset:50}48%,100%{stroke-dashoffset:0}}
/* Give every selected process visual the same outcome footer. */
.process-cover:has(>.process-outcome){aspect-ratio:auto;display:flex;flex-direction:column}
.process-cover:has(>.process-outcome)>svg{width:100%;height:auto;aspect-ratio:45/32;flex:none}
.process-outcome{display:block;min-height:30px;padding:1px 8px 12px;text-align:center;font:11px/1.5 Arial,Helvetica,sans-serif;color:#c1b2d2;opacity:1;transition:none}
.process-demo[data-play-state=complete]>.process-outcome{opacity:1}
.process-playback{display:flex;align-items:center;gap:24px;margin:25px 0 -12px}
.process-progress{display:flex;gap:8px;flex:1;height:3px;overflow:hidden}
.process-progress>span{display:block;flex:1;background:#ffffff14;border-radius:2px;overflow:hidden}
.process-progress i{display:block;height:100%;background:#a68abf;transform:scaleX(0);transform-origin:left}
.process-replay{appearance:none;flex:none;padding:7px 0 7px 8px;border:0;background:transparent;color:#aaa3b3;font:11px/1.3 Arial,sans-serif;cursor:pointer}
.process-replay:hover{color:#eee7f6}.process-replay:focus-visible{outline:2px solid #b59acb;outline-offset:4px;border-radius:3px}
.process-replay:disabled{cursor:default;color:#7f7888}
.process-motion-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Before JS initializes, show a useful still rather than starting a loop. */
.process-demo:not([data-motion-managed]) *{animation:none!important}
.process-demo:not([data-motion-managed]) .demo-enter,.process-demo:not([data-motion-managed]) .demo-result,.process-demo:not([data-motion-managed]) .calendar-event,.process-demo:not([data-motion-managed]) .calendar-reminder,.process-demo:not([data-motion-managed]) .zoom-call,.process-demo:not([data-motion-managed]) .zoom-close-status,.process-demo:not([data-motion-managed]) .inbox-replied,.process-demo:not([data-motion-managed])>.process-outcome{opacity:1}
.process-demo:not([data-motion-managed]) .zoom-booked,.process-demo:not([data-motion-managed]) .calendar-booked,.process-demo:not([data-motion-managed]) .zoom-single-ping,.process-demo:not([data-motion-managed]) .inbox-typing{display:none}
.process-demo:not([data-motion-managed]) .demo-tick,.process-demo:not([data-motion-managed]) .setup-connector{stroke-dashoffset:0}
@media(max-width:760px){.process-playback{gap:14px}.process-outcome{font-size:12px}}
@media(prefers-reduced-motion:reduce){.process-outcome{opacity:1;transition:none}.setup-connector{stroke-dashoffset:0}.process-replay{display:none}}

/* Shared glass primitives needed on the landing page, independent of preview styles. */
.process-demo .option-panel{fill:#ffffff04;stroke:#ffffff22;stroke-width:1}
.process-demo .option-status{fill:#bda1d9;font-size:10px}

/* One gradient segment per card, with replay outside the track width. */
.process-playback{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 -18px}
.process-replay{justify-self:end;grid-row:1;padding:7px 0}
.process-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;height:3px;width:100%}
.process-progress>span{min-width:0;border-radius:3px}
.process-progress i{background:linear-gradient(90deg,#cca2ff,#7b43b8)}
@media(max-width:900px) and (min-width:761px){.process-progress{gap:15px}}
@media(max-width:760px){.process-playback{max-width:520px;margin:20px auto -8px}.process-progress{gap:10px}}

/* A slower drawn connection hands off to a small confirmation bounce. */
.setup-demo .setup-badge{transform-box:fill-box;transform-origin:center;animation:setup-pop-one 14s ease-out both}
.setup-demo .demo-node{fill:transparent;animation:setup-fill-one 14s linear both}
.setup-demo .setup-ping{fill:none;stroke:#c5a4eb;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:setup-ping-one 14s ease-out both}
@keyframes setup-connect-one{0%,18%{stroke-dashoffset:50}36%,100%{stroke-dashoffset:0}}
@keyframes setup-connect-two{0%,46%{stroke-dashoffset:50}68%,100%{stroke-dashoffset:0}}

.setup-demo .demo-first .setup-badge{animation-name:setup-pop-one}
.setup-demo .demo-first .demo-node{animation-name:setup-fill-one}
.setup-demo .demo-first .setup-ping{animation-name:setup-ping-one}
@keyframes setup-check-one{0%,8%{stroke-dashoffset:13}14%,100%{stroke-dashoffset:0}}
@keyframes setup-fill-one{0%,8%{fill:transparent}14%,100%{fill:#a580d025}}
@keyframes setup-pop-one{0%,13%{transform:translateY(0) scale(1)}16%{transform:translateY(-2px) scale(1.12)}19%{transform:translateY(.5px) scale(.98)}22%,100%{transform:translateY(0) scale(1)}}
@keyframes setup-ping-one{0%,13%{opacity:0;transform:scale(1)}14%{opacity:.48;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.55)}}

.setup-demo .demo-second .setup-badge{animation-name:setup-pop-two}
.setup-demo .demo-second .demo-node{animation-name:setup-fill-two}
.setup-demo .demo-second .setup-ping{animation-name:setup-ping-two}
@keyframes setup-check-two{0%,36%{stroke-dashoffset:13}42%,100%{stroke-dashoffset:0}}
@keyframes setup-fill-two{0%,36%{fill:transparent}42%,100%{fill:#a580d025}}
@keyframes setup-pop-two{0%,41%{transform:translateY(0) scale(1)}44%{transform:translateY(-2px) scale(1.12)}47%{transform:translateY(.5px) scale(.98)}50%,100%{transform:translateY(0) scale(1)}}
@keyframes setup-ping-two{0%,41%{opacity:0;transform:scale(1)}42%{opacity:.48;transform:scale(1)}50%,100%{opacity:0;transform:scale(1.55)}}

.setup-demo .demo-third .setup-badge{animation-name:setup-pop-three}
.setup-demo .demo-third .demo-node{animation-name:setup-fill-three}
.setup-demo .demo-third .setup-ping{animation-name:setup-ping-three}
@keyframes setup-check-three{0%,68%{stroke-dashoffset:13}74%,100%{stroke-dashoffset:0}}
@keyframes setup-fill-three{0%,68%{fill:transparent}74%,100%{fill:#a580d025}}
@keyframes setup-pop-three{0%,73%{transform:translateY(0) scale(1)}76%{transform:translateY(-2px) scale(1.12)}79%{transform:translateY(.5px) scale(.98)}82%,100%{transform:translateY(0) scale(1)}}
@keyframes setup-ping-three{0%,73%{opacity:0;transform:scale(1)}74%{opacity:.48;transform:scale(1)}82%,100%{opacity:0;transform:scale(1.55)}}

@media(prefers-reduced-motion:reduce){.setup-demo .setup-ping{display:none}.setup-demo .demo-node{fill:#a580d025}}
.process-demo:not([data-motion-managed]) .setup-ping{display:none}
.process-demo:not([data-motion-managed]) .demo-node{fill:#a580d025}


/* Existing email threads make way for a new reply and a handled conversation. */
.inbox-workflow .mail-envelope{fill:none;stroke:#c5b7d4;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.inbox-workflow .mail-label{fill:#a99ab9;font:8px Arial,sans-serif;letter-spacing:.6px}
.inbox-workflow .mail-status{fill:#c7afdf;font:9px Arial,sans-serif}
.inbox-workflow .mail-body{fill:#ece6f2;font:12px Arial,sans-serif}
.mail-received{fill:#ffffff04;stroke:#ffffff18}
.mail-response-fill{fill:#a478ce17;stroke:#b68dd03c}
.mail-new-fill{fill:#a478ce1e;stroke:#b68dd040}
.inbox-workflow .mail-queue{animation:mail-open-queue 13s ease-in-out both}
.inbox-workflow .mail-new-row{animation:mail-new-row 13s ease-out both}
.inbox-workflow .mail-existing{animation:mail-existing 13s ease-in-out both}
.inbox-workflow .mail-thread{animation:mail-open-thread 13s ease-out both}
.inbox-workflow .mail-prospect{animation:mail-prospect 13s ease-out both;transform-box:fill-box;transform-origin:left center}
.inbox-workflow .mail-response{animation:mail-response 13s ease-out both;transform-box:fill-box;transform-origin:right bottom}
.inbox-workflow .mail-typing-bubble{animation:mail-typing-bubble 13s ease-out both;transform-box:fill-box;transform-origin:right bottom;fill:#c7afdf}
.inbox-workflow .mail-typing-bubble circle{animation:mail-typing-dot .9s ease-in-out infinite}
.inbox-workflow .mail-typing-bubble circle:nth-of-type(2){animation-delay:.15s}
.inbox-workflow .mail-typing-bubble circle:nth-of-type(3){animation-delay:.3s}
.inbox-workflow .mail-sent{animation:mail-sent 13s ease-out both}
.inbox-workflow .mail-interest{animation:mail-interest 13s ease-out both;transform-box:fill-box;transform-origin:left bottom}
.inbox-workflow .mail-handoff{animation:mail-handoff 13s ease-out both}
@keyframes mail-new-row{0%,3%{opacity:0;transform:translateY(-54px)}10%,100%{opacity:1;transform:translateY(0)}}
@keyframes mail-existing{0%,3%{transform:translateY(-64px)}10%,100%{transform:translateY(0)}}
@keyframes mail-open-queue{0%,15%{opacity:1;transform:translateX(0)}20%,100%{opacity:0;transform:translateX(-12px)}}
@keyframes mail-open-thread{0%,18%{opacity:0}19%,100%{opacity:1}}
@keyframes mail-prospect{0%,18%{opacity:0;transform:translateX(14px) scale(.94)}22%{opacity:1;transform:translateX(-1px) scale(1.015)}25%,100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes mail-typing-bubble{0%,26%{opacity:0;transform:scale(.9)}29%,45%{opacity:1;transform:scale(1)}47%,100%{opacity:0;transform:scale(.96)}}
@keyframes mail-typing-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-1px)}}
@keyframes mail-response{0%,48%{opacity:0;transform:translateY(6px) scale(.93)}51%{opacity:1;transform:translateY(-1px) scale(1.015)}54%,100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mail-sent{0%,54%{opacity:0;transform:translateY(2px)}57%,100%{opacity:1;transform:translateY(0)}}
@keyframes mail-interest{0%,70%{opacity:0;transform:translateX(18px) scale(.94)}73%{opacity:1;transform:translateX(-2px) scale(1.02)}76%,100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes mail-handoff{0%,81%{opacity:0;transform:translateY(2px)}85%,100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.inbox-workflow .mail-queue,.inbox-workflow .mail-typing-bubble{display:none}.inbox-workflow .mail-thread,.inbox-workflow .mail-prospect,.inbox-workflow .mail-response,.inbox-workflow .mail-sent,.inbox-workflow .mail-interest,.inbox-workflow .mail-handoff{opacity:1;transform:none}}
.inbox-workflow:not([data-motion-managed]) .mail-queue,.inbox-workflow:not([data-motion-managed]) .mail-typing-bubble{display:none}