/* Homepage capability demos. Layout, illustration and motion live here. */
body.capability-demo-open{overflow:hidden}
.cap-demo{
  --demo-accent:#2563eb;--demo-soft:#e0ecfc;--demo-tint:#f6f9ff;
  --demo-stroke:#a2bfe7;--demo-screen:#f1f6fe;--demo-mark:#7e9fd4;--demo-track:#d3e0f3;--demo-haze:#c5d9f8;--demo-figure-ink:#506f99;
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:24px;background:rgba(16,30,51,.4);backdrop-filter:blur(8px);
  animation:cap-backdrop-in .2s ease both;
}
.cap-demo[hidden]{display:none}
.cap-demo[data-product="group"]{--demo-accent:#14805e;--demo-soft:#e0f1e9;--demo-tint:#f5faf7;--demo-stroke:#9fc5b4;--demo-screen:#f1f8f4;--demo-mark:#7ca892;--demo-track:#d0e5d9;--demo-haze:#cbe5d7;--demo-figure-ink:#537a67}
.cap-demo__dialog{
  position:relative;width:min(1040px,100%);max-height:calc(100svh * var(--page-zoom-inverse,1) * var(--demo-scale-inverse,1) - 48px);display:flex;flex-direction:column;
  overflow:hidden;border:1px solid #dce4ee;border-radius:24px;background:#fff;
  box-shadow:0 32px 100px rgba(16,30,51,.24);color:#142033;
  animation:cap-dialog-in .32s cubic-bezier(.2,.8,.2,1) both;
}
.cap-demo__close{position:absolute;top:20px;right:20px;z-index:1}
.cap-demo__header{margin:0 0 18px}
.cap-demo__eyebrow{margin:0 0 6px;color:var(--demo-accent);font-size:12px;font-weight:600;letter-spacing:.08em}
.cap-demo__title{margin:0;font-size:30px;font-weight:650;line-height:1.3;letter-spacing:-.025em}
.cap-demo__body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);height:560px;min-height:0;overflow:auto}
.cap-demo__visual{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:24px 10px;border-right:1px solid #e7edf4;background:radial-gradient(ellipse at 50% 45%,#fff 15%,var(--demo-tint) 80%)}
.cap-demo__canvas{width:100%;aspect-ratio:560 / 410;display:grid;align-items:center}
.cap-demo__canvas svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.cap-demo__caption{margin:12px 0 0;color:#7b889b;text-align:center;font-size:11px;letter-spacing:.04em}
.cap-demo__copy{padding:48px 22px 24px;display:flex;flex-direction:column;justify-content:center;min-width:0;text-align:center}
.cap-demo__lead{margin:14px 0 0;color:#65748a;font-size:15px;line-height:1.8}
.cap-demo__steps{display:grid;gap:6px}
.cap-demo__step{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  width:100%;min-height:90px;padding:12px 10px;border:1px solid transparent;border-radius:12px;
  background:transparent;text-align:center;cursor:pointer;color:#142033;font:inherit;
  transition:background .2s,color .2s;
}
.cap-demo__step:not([aria-current]):not([aria-disabled="true"]):hover{background:#f5f7fa}
.cap-demo__step[aria-current="step"]{background:var(--demo-soft)}
.cap-demo__step[aria-disabled="true"]{cursor:default}
.cap-demo__step-heading{display:flex;justify-content:center;align-items:center;gap:8px}
.cap-demo__step-mark{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#edf1f6;color:#8492a4;font-size:11px;font-weight:600}
.cap-demo__step[aria-current="step"] .cap-demo__step-mark{background:var(--demo-accent);color:#fff}
.cap-demo__step-title{display:block;font-size:16px;line-height:25px;font-weight:600}
.cap-demo__step-desc{display:grid;grid-template-rows:0fr;opacity:0;font-size:14px;line-height:1.75;color:#52637c;transition:grid-template-rows .28s ease,opacity .28s ease,margin-top .28s ease}
.cap-demo__step-desc>span{overflow:hidden;min-height:0}
.cap-demo__step.is-revealed .cap-demo__step-desc{grid-template-rows:1fr;opacity:1;margin-top:5px}
.cap-demo__playback{display:flex;justify-content:center;align-items:center;gap:14px;min-width:0;margin-top:10px}
.cap-demo__progress{display:flex;gap:5px;width:78px}
.cap-demo__progress span{display:block;position:relative;flex:1;height:3px;overflow:hidden;background:#e2e8f0;border-radius:3px}
.cap-demo__progress span::after{content:"";display:block;width:100%;height:100%;background:var(--demo-accent);transform:scaleX(0);transform-origin:left}
.cap-demo__progress .is-done::after{transform:scaleX(1)}
.cap-demo__progress .is-running::after{animation:cap-progress var(--demo-duration) linear forwards}
.cap-demo.is-paused .cap-demo__progress .is-running::after{animation-play-state:paused}
.cap-demo__control{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 3px;border:0;background:none;color:#687891;font-size:12px;white-space:nowrap;cursor:pointer}
.cap-demo__control[hidden]{display:none}
.cap-demo__control:hover{color:var(--demo-accent)}
.cap-demo__control svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.cap-demo__guide,.cap-demo__guide:visited{display:inline-flex;align-self:center;align-items:center;justify-content:center;gap:12px;min-height:44px;margin-top:18px;padding:0 18px;border-radius:12px;background:var(--demo-accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:filter .2s}
.cap-demo__guide:hover{filter:brightness(.93)}
.cap-demo__guide svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Flat diagram palette and geometry follow the login page device illustration. */
.cap-demo__svg .demo-card{fill:#fff;stroke:var(--demo-stroke);stroke-width:1.4;stroke-linejoin:round}
.cap-demo__svg .demo-screen{fill:var(--demo-screen)}
.cap-demo__svg .demo-soft{fill:var(--demo-soft)}
.cap-demo__svg .demo-mark{fill:var(--demo-mark)}
.cap-demo__svg .demo-accent{fill:var(--demo-figure-ink)}
.cap-demo__svg .demo-ink{fill:var(--demo-figure-ink)}
.cap-demo__svg .demo-muted{fill:#7b8ba0}
.cap-demo__svg .demo-rule{fill:none;stroke:var(--demo-track);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cap-demo__svg .demo-track{fill:none;stroke:var(--demo-track);stroke-width:4;stroke-linecap:round}
.cap-demo__svg .demo-highlight{fill:none;stroke:var(--demo-mark);stroke-width:4;stroke-linecap:round}
.cap-demo__svg .demo-selection{fill:var(--demo-soft);fill-opacity:.35;stroke:none}
.cap-demo__svg .demo-device-stand{fill:var(--demo-soft);stroke:var(--demo-stroke);stroke-width:1.2}
.cap-demo__svg .demo-device-edge{fill:none;stroke:var(--demo-stroke);stroke-width:2;stroke-linecap:round}
.cap-demo__svg .demo-stand-line{fill:none;stroke:var(--demo-stroke);stroke-width:3;stroke-linecap:round}
.cap-demo__svg .demo-glyph{fill:none;stroke:var(--demo-mark);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cap-demo__svg .demo-path{fill:none;stroke:var(--demo-figure-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cap-demo__svg.is-opening{--demo-item-duration:520ms;--demo-item-interval:520ms;--demo-write-duration:640ms;--demo-line-interval:120ms;--demo-unfold-duration:1650ms;--demo-packet-duration:1650ms}
.cap-demo__svg .demo-phase.is-pending{opacity:0}
.cap-demo__svg .demo-phase.is-entering{animation:cap-svg-in .28s ease both}
.cap-demo__svg .demo-phase.is-entering .demo-stagger{animation:cap-svg-in var(--demo-item-duration,380ms) ease both;animation-delay:calc(var(--item-index,0) * var(--demo-item-interval,65ms))}
.cap-demo__svg .demo-phase.is-entering .demo-transfer{animation:cap-transfer .55s cubic-bezier(.22,.7,.3,1) both}
.cap-demo__svg .demo-cursor,.cap-demo__svg .demo-packet{opacity:0}
.cap-demo__svg .demo-phase.is-entering .demo-cursor{animation:cap-cursor .85s ease both}
.cap-demo__svg .demo-phase.is-entering .demo-packet{animation:cap-packet var(--demo-packet-duration,750ms) cubic-bezier(.4,0,.35,1) both}
.cap-demo__svg .demo-phase.is-entering .demo-write{clip-path:inset(-5px);animation:cap-write var(--demo-write-duration,420ms) ease both;animation-delay:calc(var(--line-index,0) * var(--demo-line-interval,45ms) + var(--item-index,0) * var(--demo-item-interval,65ms))}
.cap-demo__svg .demo-phase.is-entering .demo-compose{animation:cap-write 1.65s cubic-bezier(.35,0,.35,1) both}
.cap-demo__svg .demo-phase.is-entering .demo-draw{stroke-dasharray:100;stroke-dashoffset:0;animation:cap-draw .55s ease both}
.cap-demo__svg .demo-phase.is-entering .demo-adjust{animation:cap-adjust .65s cubic-bezier(.22,.7,.3,1) both;animation-delay:calc(var(--item-index,0) * var(--demo-item-interval,65ms))}
.cap-demo__svg .demo-phase.is-entering .demo-settle{animation:cap-settle .65s cubic-bezier(.22,.7,.3,1) both}
.cap-demo__svg .demo-phase.is-entering .demo-unfold{animation:cap-unfold var(--demo-unfold-duration,650ms) cubic-bezier(.35,0,.35,1) both}
.cap-demo__svg .demo-phase.is-entering .demo-file-out{animation:cap-file-out .65s cubic-bezier(.22,.7,.3,1) both}
.cap-demo__svg .demo-scroll{transform:translateY(-52px);animation:cap-scroll .85s cubic-bezier(.3,0,.2,1) both}
.cap-demo__svg .demo-wave{transform-box:fill-box;transform-origin:center;animation:cap-wave .38s ease-in-out infinite alternate;animation-delay:var(--wave-delay,0s)}
.cap-demo__svg .demo-record-progress{transform-box:fill-box;transform-origin:left;animation:cap-record-progress var(--demo-duration) linear both}
.cap-demo.is-paused .cap-demo__svg .demo-wave,.cap-demo.is-paused .cap-demo__svg .demo-record-progress{animation-play-state:paused}
.cap-demo.is-motion-paused .cap-demo__svg *{animation-play-state:paused!important}
.cap-demo.is-closing{animation:cap-backdrop-out .18s ease both;pointer-events:none}
.cap-demo.is-closing .cap-demo__dialog{animation:none}
@keyframes cap-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes cap-backdrop-out{to{opacity:0}}
@keyframes cap-dialog-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cap-svg-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cap-progress{to{transform:scaleX(1)}}
@keyframes cap-record-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cap-write{from{clip-path:inset(-5px 100% -5px -5px)}to{clip-path:inset(-5px)}}
@keyframes cap-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes cap-wave{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes cap-transfer{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes cap-cursor{0%{opacity:0;transform:translate(18px,20px)}35%{opacity:1;transform:none}50%{opacity:1;transform:translate(1px,2px)}65%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes cap-packet{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(var(--travel-x))}}
@keyframes cap-adjust{from{transform:translateX(var(--knob-shift))}to{transform:none}}
@keyframes cap-settle{from{opacity:0;transform:translate(18px,-5px)}to{opacity:1;transform:none}}
@keyframes cap-unfold{from{clip-path:inset(0 100% 0 0 round 8px)}to{clip-path:inset(0 round 8px)}}
@keyframes cap-file-out{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes cap-scroll{0%,10%{transform:translateY(0)}100%{transform:translateY(-52px)}}
@media(min-width:1081px){.cap-demo{zoom:1.25;--demo-scale-inverse:.8}}
@media(prefers-reduced-motion:reduce){
  .cap-demo,.cap-demo *,.cap-demo *::after{animation:none!important;transition:none!important}
  .cap-demo__progress .is-running::after{transform:scaleX(1)}
}