/* Interactive marketing illustrations. All figures and actions are local examples. */
.reading-progress{position:absolute;bottom:-1px;left:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--mint));width:100%;transform:scaleX(0);transform-origin:left;pointer-events:none}
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(3px)}
.hero::before{width:240px;height:240px;left:-120px;top:22%;background:radial-gradient(circle,#efeaff99,transparent 70%)}
.hero::after{width:230px;height:230px;right:-110px;bottom:2%;background:radial-gradient(circle,#d8f9eb99,transparent 70%)}
.tour-control{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 4px 15px;font-size:12px;color:#746a85}
.tour-control-copy{display:flex;align-items:center;gap:9px}
.tour-control-copy .icon{color:var(--purple);height:16px;width:16px}
.tour-control b{color:#40334f;font-weight:600}
.tour-control-actions{display:flex;align-items:center;gap:12px}
.tour-control button{border:1px solid #ded7f2;background:#fff;border-radius:100px;padding:9px 13px;display:flex;align-items:center;gap:6px;color:#5237b4;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.tour-control button:hover{background:#f3efff}
.tour-control button:disabled{cursor:default;color:#81728c;background:#f6f3fa;border-color:#e7dfef}
.tour-control button .icon{width:13px;height:13px}
.tour-control button[aria-pressed=true]{background:#efebff;border-color:#b9a8ff}
.tour-status{font-size:11px;color:#746a85}
.tour-picker [data-tour]{position:relative;overflow:hidden}
.tour-picker [data-tour]::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,var(--purple),var(--mint));transform:scaleX(0);transform-origin:left}
.tour-playing .tour-picker [aria-selected=true]::after{animation:tour-clock 8s linear forwards}
@keyframes tour-clock{to{transform:scaleX(1)}}
.workspace-content{min-height:390px;overflow:hidden}
.product-showcase .floating-note{display:none}
.workspace-content .deal-card{animation:card-arrive .5s both}
.workspace-content .pipeline-column:nth-child(2) .deal-card{animation-delay:.09s}
.workspace-content .pipeline-column:nth-child(3) .deal-card{animation-delay:.18s}
.workspace-content .deal-card:nth-child(3){animation-delay:.12s}
@keyframes card-arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.journey>button{transition:background .2s,color .2s,transform .2s;padding:9px;border-radius:8px}
.journey>button.current{background:#f0ebff;color:#5532c6}
.journey>button.current>.icon{color:#6547ff}
.sample-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px;font-size:11px;color:#625272}
.sample-control-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sample-segments{display:inline-flex;gap:2px;border:1px solid #e3dcef;padding:3px;border-radius:7px;background:white}
.sample-segments button{border:0;background:transparent;padding:6px 10px;border-radius:4px;cursor:pointer;color:#71607f;font-size:11px}
.sample-segments button[aria-pressed=true]{color:#5236ac;background:#ece6ff;font-weight:600}
.sample-hint{color:#715c8b;display:flex;align-items:center;gap:5px;font-size:10px}
.sample-hint .icon{width:13px;height:13px}
.sample-plan{border:1px solid #e8e1f0;border-radius:8px;overflow:hidden;background:white}
.sample-plan table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}
.sample-plan th{background:#eee8fc;padding:10px 12px;color:#624e81;font-size:10px;font-weight:600}
.sample-plan td{text-align:center;padding:12px;border-bottom:1px solid #f0ebf5;color:#5a4a70}
.sample-plan th:first-child,.sample-plan td:first-child{text-align:left;width:37%}
.sample-plan td b{display:block;color:#3f304f;font-size:12px}
.sample-plan td small{display:block;font-size:10px;margin-top:4px;color:#7c6b8c}
.spot-stepper{display:inline-flex;align-items:center;gap:9px}
.spot-stepper button{height:26px;width:26px;padding:0;border:1px solid #e0d6f1;border-radius:5px;color:#6547ff;background:#f8f5ff;cursor:pointer;font-size:15px;display:grid;place-items:center}
.spot-stepper button:disabled{opacity:.35;cursor:not-allowed}
.spot-stepper output{min-width:14px;font-weight:600;color:#4d326f;font-variant-numeric:tabular-nums}
.sample-plan td:last-child{font-weight:650;font-variant-numeric:tabular-nums}
.plan-summary{padding:12px 15px;display:flex;gap:12px;justify-content:space-between;align-items:center;background:#f4f0ff;font-size:11px;color:#5d4677}
.plan-summary strong{font-size:19px;color:#5630b9;font-variant-numeric:tabular-nums}
.sample-feedback{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:10px;color:#7c6c8b}
.sample-feedback>span{display:flex;align-items:center;gap:5px}
.sample-feedback .icon{width:12px;height:12px;color:#348e6e}
.sample-link{border:0;color:#6547ff;background:none;font-size:11px;font-weight:600;display:inline-flex;gap:5px;align-items:center;padding:6px 0;cursor:pointer}
.sample-linked-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f0faf5;border:1px solid #d6eee2;border-radius:8px;padding:12px 15px;margin-bottom:14px;font-size:11px;color:#3e735c}
.sample-linked-plan>span{display:flex;gap:8px;align-items:center}
.sample-linked-plan small{display:block;color:#668774;margin-top:3px;font-size:10px}
.sample-linked-plan strong{color:#246c4e;font-size:19px;white-space:nowrap;font-variant-numeric:tabular-nums}
.number-pop{animation:number-pop .35s ease}
@keyframes number-pop{50%{color:#187656;transform:translateY(-2px)}}
.mock-metric>b{display:inline-block}
.account-tabs{display:flex;gap:22px}
.account-tabs button{font:inherit;color:#85718e;padding:0 0 12px;border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer}
.account-tabs button[aria-selected=true]{color:#6547ff;border-color:#6547ff;font-weight:600}
.account-tabs button:hover{color:#6547ff}
.account-panel{min-height:305px}
.account-panel.updated{animation:panel-in .35s ease both}
.account-panel .timeline{padding-top:24px}
.account-records{display:grid;gap:13px;padding:22px 0}
.account-record{padding:17px;border:1px solid #e5dced;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#6b557a}
.account-record b{display:block;font-size:13px;color:#4c315f}
.account-record small{display:block;font-size:11px;margin-top:5px;line-height:1.6;color:#806b8c}
.account-record .account-record-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;background:#efe9ff;border-radius:9px;color:#7052bc}
.account-record .record-copy{flex:1}
.account-record strong{font-size:16px;color:#604194}
.account-panel-note{font-size:11px;color:#816c8e;line-height:1.8;margin:2px 0 14px}
.account-bottom .icon{width:12px;height:12px}
.timeline-entry{animation:timeline-in .6s both}
.timeline-entry:nth-child(2){animation-delay:.12s}
.timeline-entry:nth-child(3){animation-delay:.24s}
@keyframes timeline-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.assistant-response.refreshed #assistant-answer>*{animation:answer-in .45s both}
.assistant-response.refreshed #assistant-answer>ul{animation-delay:.1s}
.assistant-response.refreshed #assistant-answer>.source-chip{animation-delay:.2s}
@keyframes answer-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.media-panel.playing-in>*{animation:panel-in .4s both}
.media-panel.playing-in>:nth-child(2){animation-delay:.06s}
.channel[aria-pressed=true]{border-color:#ad97ff;box-shadow:0 10px 28px #6547ff0d}
.channel[aria-pressed=true] .channel-art i{animation:channel-pop .65s both}
.channel[aria-pressed=true] .channel-art i:nth-of-type(2){animation-delay:.1s}
.channel[aria-pressed=true] .channel-art i:nth-of-type(3){animation-delay:.2s}
@keyframes channel-pop{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:scale(1)}}
.feature-quickstart{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:19px;color:#786589;font-size:12px}
.feature-quickstart>span{margin-right:5px}
.feature-quickstart button{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2d7ef;background:#fff;color:#69507e;border-radius:30px;padding:8px 12px;font-size:11px;cursor:pointer}
.feature-quickstart button .icon{height:14px;width:14px}
.feature-quickstart button:hover,.feature-quickstart button[aria-pressed=true]{background:#eee8ff;color:#5d3aab;border-color:#bcabed}
.feature-item{position:relative;transition:background .2s,box-shadow .2s}
.feature-item:hover{z-index:1;background:#fcfaff;box-shadow:inset 0 0 0 1px #bfaaf1}
.feature-item>.feature-item-icon{transition:transform .25s,background .25s}
.feature-item:hover>.feature-item-icon{transform:rotate(-7deg) scale(1.08)}
.feature-item>svg{transition:transform .2s}
.feature-item:hover>svg{transform:translate(2px,-2px)}
.feature-list.refreshed .feature-item{animation:feature-in .3s both}
.feature-list.refreshed .feature-item:nth-child(3n+2){animation-delay:.035s}
.feature-list.refreshed .feature-item:nth-child(3n){animation-delay:.07s}
@keyframes feature-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.feature-expand{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;font-size:12px;font-weight:600;color:#67439a;border:0;border-top:1px solid #e8e0f0;background:#faf7ff;cursor:pointer}
.feature-expand:hover{background:#f0e8ff}
.feature-expand .icon{width:15px;height:15px}
.feature-browser-footer{flex-wrap:wrap;gap:8px}
.connection-line::after{content:"";position:absolute;width:46px;height:3px;background:linear-gradient(90deg,transparent,#9d77ef,#3ad9a5,transparent);top:-1px;animation:connection-travel 5s linear infinite}
@keyframes connection-travel{from{left:0}to{left:calc(100% - 46px)}}
.reading-progress,.connection-line::after{will-change:transform}
.why-grid article{transition:transform .25s}
.why-grid article:hover{transform:translateY(-4px)}
.faq-list details[open] p{animation:panel-in .3s}
.motion-shortcut{position:absolute;right:20px;top:15px;border:0;color:#77668b;background:transparent;display:flex;align-items:center;gap:5px;font-size:10px;cursor:pointer;padding:5px}
.motion-shortcut .icon{width:12px;height:12px}
.motion-shortcut:hover{color:#6547ff}
.media-panel .bar-group i,.workspace-content .bar-group i{transform-origin:bottom;animation:grow-bar .7s ease both}
.media-panel .bar-group:nth-child(2) i,.workspace-content .bar-group:nth-child(2) i{animation-delay:.09s}
.media-panel .bar-group:nth-child(3) i,.workspace-content .bar-group:nth-child(3) i{animation-delay:.18s}
@keyframes grow-bar{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}
@media(min-width:950px){.hero{padding-bottom:36px}.tour-control{padding-inline:8px}.floating-note-two{top:135px}.floating-note-one{bottom:73px}}
@media(max-width:760px){
 .tour-control{font-size:11px;gap:8px;padding:7px 2px 12px}.tour-control-copy{gap:6px}.tour-control-copy>span>span,.tour-status{display:none}.tour-control button{font-size:11px;padding:8px 10px}
 .workspace-content{min-height:380px}.sample-plan th:first-child,.sample-plan td:first-child{width:34%}.sample-plan th,.sample-plan td{padding:10px 5px}.sample-plan th{font-size:9px}.sample-plan td{font-size:10px}.sample-plan td b{font-size:10px}.sample-plan td small{font-size:9px}.sample-plan .rate-column{display:none}
 .sample-controls{font-size:10px;align-items:flex-start}.sample-segments button{font-size:10px;padding:7px 8px}.sample-hint{font-size:9px}.sample-controls .sample-hint{display:none}
 .spot-stepper{gap:6px}.spot-stepper button{width:26px;height:28px}.plan-summary{padding:12px 9px;font-size:10px}.plan-summary strong{font-size:17px}
 .sample-feedback{font-size:9px;align-items:flex-start;gap:10px}.sample-feedback>span{max-width:55%;line-height:1.5}.sample-link{font-size:10px;padding:3px 0}
 .sample-linked-plan{font-size:10px;padding:10px}.sample-linked-plan small{font-size:9px}.sample-linked-plan strong{font-size:17px}
 .account-tabs{gap:0;justify-content:space-between;font-size:11px}.account-panel{min-height:315px}.account-record{padding:13px 10px}.account-record small{font-size:11px}
 .account-illustration{transform:none;margin-inline:0}.account-illustration::before{inset:-12px 0;transform:none}.account-top b{font-size:14px}.account-summary b{font-size:11px}.account-summary small{font-size:10px}
 .timeline-entry b{font-size:12px}.timeline-entry p{font-size:11px}.timeline-time{font-size:10px}.attachment-pill{font-size:10px}.tiny-avatars small{font-size:10px}.account-bottom{font-size:10px;padding-block:13px}
 .feature-quickstart{gap:7px}.feature-quickstart>span{width:100%;font-size:12px}.feature-quickstart button{font-size:11px;padding:8px 10px}.feature-browser-footer>span:last-child{font-size:10px}
 .motion-shortcut{right:8px;top:5px;font-size:9px}.hero::before,.hero::after{display:none}
}
@media(max-width:470px){
 .connection-line::after{width:3px;height:25px;left:-1px!important;animation:connection-down 5s linear infinite}
 @keyframes connection-down{from{top:0}to{top:calc(100% - 25px)}}
}
@media(max-width:390px){.tour-control-copy .icon{display:none}.tour-control-copy{font-size:10px}.sample-plan td small{font-size:8px}.sample-controls .sample-control-group{gap:4px}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) *,html:not([data-motion=on]) *::before,html:not([data-motion=on]) *::after{animation:none!important;transition:none!important}}

/* A human, editorial illustration layer, paired with purposeful role exploration. */
.hero-person{position:absolute;width:160px;height:auto;object-fit:contain;right:max(15px,calc((100vw - 1280px)/2));top:108px;z-index:-1;transform:rotate(3deg);animation:person-breathe 8s ease-in-out infinite;pointer-events:none}
@keyframes person-breathe{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.people-story{display:grid;grid-template-columns:1.25fr 1fr;gap:55px;align-items:center;padding-top:70px;padding-bottom:65px}
.people-art{position:relative;isolation:isolate}
.people-art>img{position:relative;width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1);z-index:1}
.people-art:hover>img{transform:translateY(-6px) rotate(-.5deg)}
.people-blob{position:absolute;inset:16% 4% 9%;background:#f4efff;border-radius:55% 45% 48% 52% / 65% 46% 54% 35%;z-index:0;transform:rotate(-6deg)}
.art-orbit{position:absolute;font-weight:400;line-height:1;z-index:2;animation:art-orbit 8s ease-in-out infinite}
.art-orbit-one{left:4%;top:7%;color:#6547ff;font-size:42px;animation-delay:-2s}
.art-orbit-two{right:3%;bottom:12%;color:#3bd6a1;font-size:42px}
@keyframes art-orbit{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-10px) rotate(15deg)}}
.people-note{position:absolute;bottom:3%;left:13%;z-index:2;background:#fff;border:1px solid #e4d9ef;border-radius:100px;box-shadow:0 6px 24px #503b7012;padding:10px 15px;display:flex;align-items:center;gap:7px;font-size:11px;color:#6c477d;animation:gentle-float 7s ease-in-out infinite}
.people-note .icon{width:16px;height:16px;color:#2d946e}
.people-copy h2{font-size:35px;letter-spacing:-1.3px;line-height:1.2;margin-top:16px}
.people-copy>p{font-size:15px;color:#71617c;line-height:1.8;margin:18px 0 22px}
.role-picker{display:inline-flex;padding:4px;background:#f2edf9;border-radius:9px;gap:3px}
.role-picker button{font-size:12px;padding:9px 14px;border:0;border-radius:6px;color:#78618a;background:transparent;cursor:pointer}
.role-picker button[aria-selected=true]{background:#fff;color:#5b35a5;box-shadow:0 2px 6px #43235f12;font-weight:600}
#role-panel{min-height:157px;padding-top:21px}
#role-panel h3{font-size:16px;letter-spacing:-.25px;color:#493054;margin:0 0 8px}
#role-panel>p{font-size:13px;color:#786783;line-height:1.8;margin:0 0 16px;max-width:370px}
.role-capabilities{display:flex;gap:7px;flex-wrap:wrap}
.role-capabilities button{border:1px solid #e4d9ef;background:#fff;border-radius:6px;padding:7px 8px;font-size:10px;color:#77528f;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.role-capabilities button:hover{background:#f3edfc;border-color:#c2ace3}
.role-capabilities .icon{height:11px;width:11px}
.role-updated{animation:panel-in .35s ease both}
.crm-story{border-top:1px solid #f0eaf6}
.closing-cta{position:relative;isolation:isolate;overflow:hidden;min-height:370px}
.closing-cta>div:first-of-type{position:relative;z-index:2}
.closing-art{position:absolute;right:45px;bottom:-22px;width:365px;z-index:1}
.closing-art>img{position:relative;display:block;width:100%;height:auto}
.closing-art-circle{position:absolute;background:#a5edcc;width:280px;height:280px;top:40px;left:38px;border-radius:50%;animation:closing-halo 9s ease-in-out infinite}
@keyframes closing-halo{50%{transform:scale(1.07);border-radius:44% 56% 51% 49%}}
.closing-art-note{position:absolute;bottom:60px;right:-10px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #b1e0ca;border-radius:8px;padding:11px 13px;color:#47715e;font-size:11px;transform:rotate(-4deg);animation:gentle-float 7s ease-in-out infinite}
.closing-art-note .icon{width:15px;height:15px;color:#6547ff}
.closing-cta .cta-asterisk{right:42%;font-size:50px;top:27px}
.feature-expand[hidden]{display:none}
@media(max-width:1150px){.showcase-halo{left:0;right:0}.account-illustration{transform:none}.account-illustration::before{inset:-16px 0;transform:none}.hero-person{width:125px;right:5px;top:140px}.people-story{gap:28px}.people-copy h2{font-size:31px}.closing-art{right:12px;width:320px}.closing-cta h2{font-size:37px}}
@media(max-width:950px){.hero-person{display:none}.people-copy h2{font-size:28px}.people-story{gap:20px}.people-note{font-size:9px;padding:8px}.closing-art{width:260px;right:0}.closing-art-circle{width:220px;height:220px;left:15px}.closing-art-note{right:10px;max-width:180px;font-size:10px}.closing-cta{min-height:330px}.closing-cta h2{font-size:31px}.closing-cta p{max-width:380px}.closing-cta .cta-asterisk{right:34%}}
@media(max-width:760px){
 .people-story{grid-template-columns:1fr;padding-top:38px;padding-bottom:38px;gap:24px}
 .people-art{max-width:450px;width:100%;margin:auto}.people-copy{padding:0 6px}
 .people-copy h2{font-size:30px}.people-copy>p{font-size:14px}.role-picker button{padding:10px 16px}.role-capabilities button{font-size:11px}
 .people-note{font-size:10px;left:10%;bottom:0}.art-orbit-one{font-size:34px}.art-orbit-two{font-size:34px}
 #role-panel{min-height:155px}.closing-cta{padding-bottom:250px;min-height:0}
 .closing-art{width:280px;right:calc(50% - 150px);bottom:-35px}.closing-art-circle{width:215px;height:215px;top:40px;left:30px}
 .closing-art-note{bottom:40px;right:-4px}.closing-cta .cta-asterisk{right:20px;top:25px;font-size:35px}
 .closing-cta h2{font-size:29px}.closing-cta p{font-size:14px}
}