.study-intro{max-width:1100px;padding:150px 6vw 64px}.study-intro h1{letter-spacing:-.055em;margin:16px 0 24px;font-size:clamp(36px,5vw,68px);line-height:1.06}.study-intro p,.study-outro p{color:#50677c;max-width:570px}.j3-journey{background:#d1e0ec;height:1000vh;position:relative}.j3-pin{height:100svh;position:sticky;top:0;overflow:hidden}.j3-stage{width:100%;max-width:none;height:100%;position:absolute;inset:0;transform:none}.j3-stage canvas{width:100%;height:100%;display:block}.j3-fallback{max-width:none;padding:0;display:block;position:absolute;inset:15% 0 0 29%}.j3-fallback svg{width:100%;height:100%}.j3-fallback>div{height:100%}.j3-stage[data-ready] .j3-fallback{display:none}.j3-copy{pointer-events:none;width:310px;position:absolute;top:12%;left:5.5%}.j3-eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#526b81;font-size:11px}.j3-copy ol{margin:24px 0;padding:0;list-style:none}.j3-copy li{padding-bottom:15px;position:relative}.j3-copy button{font:inherit;color:#547086;text-align:left;cursor:pointer;pointer-events:auto;background:0 0;border:0;align-items:center;gap:14px;padding:0;font-size:15px;font-weight:560;line-height:1.3;display:flex}.j3-number{border-radius:10px;flex-shrink:0;place-items:center;width:38px;height:38px;font-size:12px;display:grid}.j3-copy li[data-active] button{color:#1e354b}.j3-copy li[data-active] .j3-number{background:#fff;box-shadow:0 3px 12px #8fa9be18}.j3-detail{border-left:1px solid #9cb5c9;margin:12px 0 8px 19px;padding-left:32px;display:none}.j3-copy li[data-active] .j3-detail{display:block}.j3-copy li .j3-detail p{opacity:1;color:#425e73;margin:0;font-size:14px;line-height:1.6;display:block;position:static;transform:none}.j3-tags{flex-wrap:wrap;gap:5px;margin-top:12px;display:flex}.j3-tags span{color:#526b81;border:1px solid #b4c8d7;border-radius:5px;padding:2px 6px;font-size:10px;line-height:1.5}.j3-cursor{z-index:2;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;background:#397eb0;border-radius:6px;padding:5px 10px;font-size:12px;line-height:18px;position:absolute;top:0;left:0;box-shadow:0 3px 9px #224b6b16}.j3-cursor:before{content:"";bottom:-7px;left:var(--j3-cursor-tip,12px);border:4px solid #0000;border-top-color:#397eb0;position:absolute}.j3-cursor.violet{background:#665695}.j3-cursor.violet:before{border-top-color:#665695}.j3-approval{opacity:0;visibility:hidden;pointer-events:none;z-index:4;width:min(300px,100% - 48px);transition:opacity .45s,visibility .45s;position:absolute;inset:auto 24px 24px auto;transform:none}.j3-approval[data-visible]{opacity:1;visibility:visible;transform:translate(0)}.j3-approval .approval-card{background:#fffffff5;border-radius:14px;padding:16px;box-shadow:0 12px 45px #53789718}.j3-approval .caption{font-size:11px}.j3-approval h3{font-size:18px}.j3-approval .field-diff{font-size:11px}.study-outro{padding:100px 6vw 120px}.study-outro h2{letter-spacing:-.04em;font-size:40px}.study-outro a{color:#397eb0;margin-top:24px;display:inline-block}@media (width<=700px){.study-intro{padding:115px 24px 45px}.j3-copy{width:auto;top:78px;left:20px;right:20px}.j3-eyebrow{margin:0}.j3-copy ol{margin:10px 0}.j3-copy li{display:none}.j3-copy li[data-active]{display:block}.j3-copy li .j3-detail p{font-size:13px;line-height:1.5}.j3-detail{margin-top:8px;padding-left:18px}.j3-copy button{gap:10px;font-size:16px}.j3-tags{margin-top:8px}.j3-approval{width:auto;inset:auto 24px 24px}.j3-approval .approval-card{padding:12px}.j3-approval .field-diff{gap:5px;margin-block:10px}.j3-approval .review-label{margin-bottom:8px}.j3-approval .mock-actions{margin-top:8px}.j3-approval .held-note{margin-top:8px;margin-bottom:0}.j3-fallback{inset:31% 0 12%}.j3-journey[data-step="4"] .j3-fallback,.j3-journey[data-step="5"] .j3-fallback{inset:28% 0 37%}.study-outro{padding:70px 24px}}@media (height<=720px) and (width<=700px){.j3-copy{top:65px}.j3-copy li .j3-detail p{font-size:12px;line-height:1.4}.j3-tags span{font-size:9px}.j3-approval .approval-card{padding:10px}.j3-approval h3{font-size:16px}.j3-approval .field-diff{margin-block:8px}.j3-approval .mock-actions>span{padding:4px 8px}.j3-approval .caption{font-size:10px}}@media (prefers-reduced-motion:reduce){.j3-approval{transition:none}}@media (width>=701px){.j3-stage{mask-image:linear-gradient(90deg,#0000 0% calc(5.5vw + 280px),#000 calc(5.5vw + 340px))}.j3-copy{z-index:3}}.j3-copy{z-index:3}.j3-copy button{border-radius:8px;min-height:44px}.j3-copy button:focus-visible{outline-offset:4px;outline:2px solid #397eb0}.j3-ticket{color:#25455e;background:#fffffff2;border-radius:12px;margin-bottom:20px;padding:14px}.j3-ticket-title{margin:0;font-size:13px;font-weight:560;line-height:1.45}.j3-ticket-rows{gap:6px;margin-top:12px;display:grid}.j3-ticket-row{flex-wrap:wrap;align-items:center;gap:7px;min-height:25px;font-size:11px;line-height:1.4;display:flex;position:relative}.j3-ticket-icon{color:#547086;border-radius:50%;flex-shrink:0;place-items:center;width:24px;height:24px;display:grid;position:relative}.j3-ticket-icon svg{width:18px;height:18px}.j3-ticket-icon .j3-ticket-check{opacity:0;color:#397eb0;background:#eff6fb;border-radius:50%;position:absolute;inset:3px}.j3-lock-open{display:none}.j3-ticket-avatar{color:#fff;border-radius:50%;place-items:center;width:17px;height:17px;font-size:9px;display:none}.j3-avatar-a{background:#397eb0}.j3-avatar-b{background:#665695}.j3-ticket-source,.j3-ticket-wait{color:#665695;font-size:9px;line-height:1.4;display:none}.j3-ticket-source{background:#f1eef7;border-radius:4px;margin-left:31px;padding:3px 5px}.j3-ticket-wait{color:#397eb0;margin-left:auto}.j3-journey[data-phase=ask] .j3-ticket-rows{display:none}.j3-journey[data-phase=plan] .j3-ticket-row{opacity:clamp(0,(var(--j3-p,.08) - .08 - var(--row-delay))*40,1);transform:translateY(calc((1 - clamp(0,(var(--j3-p,.08) - .08 - var(--row-delay))*40,1))*5px))}.j3-ticket-row:first-child{--row-delay:0}.j3-ticket-row:nth-child(2){--row-delay:.025}.j3-ticket-row:nth-child(3){--row-delay:.05}.j3-ticket-row:nth-child(4){--row-delay:.075}.j3-journey[data-phase=gather] [data-node="1"]{color:#397eb0}.j3-journey[data-phase=gather] [data-node="1"] .j3-ticket-check{opacity:clamp(0,(var(--j3-p) - .31)*1000,1)}.j3-journey:is([data-phase=edit],[data-phase=review],[data-phase=permission],[data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) [data-node="1"] .j3-ticket-check{opacity:1}.j3-journey:is([data-phase=edit],[data-phase=review],[data-phase=permission],[data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-avatar-a{display:grid}.j3-journey[data-phase=edit] [data-node="3"]{color:#397eb0}.j3-journey:is([data-phase=review],[data-phase=permission],[data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-avatar-b{display:grid}.j3-journey:is([data-phase=review],[data-phase=permission],[data-phase=fact]) [data-node="2"]{color:#665695}.j3-journey:is([data-phase=permission],[data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-lock-closed{display:none}.j3-journey:is([data-phase=permission],[data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-lock-open,.j3-journey:is([data-phase=fact],[data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-ticket-source{display:block}.j3-journey:is([data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) :is([data-node="2"],[data-node="3"]) .j3-ticket-check{opacity:1}.j3-journey:is([data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-ticket-wait{display:block}.j3-journey[data-phase=propose] .j3-approval .approval-card{box-shadow:0 8px 35px #397eb036}.j3-approval .approval-card{transition:box-shadow .6s}.j3-approval .review-label{color:#397eb0}.j3-approval .field-diff>div>*{overflow-wrap:anywhere;min-width:0}@media (width<=700px){.j3-journey{--j3-copy-top:76px;--j3-region-gap:16px;--j3-approval-bottom:24px;height:900vh}.j3-copy{top:var(--j3-copy-top);background:#d1e0ec;border-radius:8px;padding:6px;left:16px;right:16px}.j3-copy .j3-eyebrow,.j3-copy .j3-tags{display:none}.j3-copy ol{margin:0}.j3-copy li{padding-bottom:0}.j3-detail{margin:2px 0 0 19px;padding-left:18px}.j3-copy li .j3-detail p{font-size:12px;line-height:1.4}.j3-copy li[data-active] .j3-detail{display:none}.j3-copy button{gap:8px;font-size:14px}.j3-copy .j3-number{width:28px;height:28px;font-size:11px}.j3-ticket{border-radius:8px;margin-bottom:0;padding:6px}.j3-ticket-title{font-size:12px;line-height:1.3}.j3-ticket-dots{gap:5px;margin-top:6px;display:flex}.j3-ticket-dots span{background:#b4c8d7;border-radius:50%;width:5px;height:5px}.j3-ticket-rows{gap:0;margin-top:4px}.j3-ticket-row{gap:2px 5px;min-height:24px;font-size:11px;display:none;opacity:1!important;transform:none!important}.j3-ticket-icon{width:20px;height:22px}.j3-ticket-icon svg{width:17px;height:17px}.j3-ticket-icon .j3-ticket-check{inset:2px}.j3-ticket-label{flex:1}.j3-ticket-avatar{width:18px;height:18px;font-size:11px}.j3-ticket-state{flex-basis:100%;margin-left:25px}.j3-ticket-source{flex-basis:100%;margin-left:25px;padding:3px 5px;font-size:11px}.j3-ticket-wait{font-size:11px}.j3-journey:is([data-phase=ask],[data-phase=plan],[data-phase=gather]) [data-node="1"],.j3-journey[data-phase=edit] [data-node="3"],.j3-journey:is([data-phase=review],[data-phase=permission],[data-phase=fact],[data-phase=signoff]) [data-node="2"],.j3-journey:is([data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) [data-node="4"]{display:flex}.j3-journey:is([data-phase=ask],[data-phase=plan],[data-phase=gather]) [data-dot="1"],.j3-journey[data-phase=edit] [data-dot="3"],.j3-journey:is([data-phase=review],[data-phase=permission],[data-phase=fact],[data-phase=signoff]) [data-dot="2"],.j3-journey:is([data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) [data-dot="4"]{background:#397eb0}.j3-approval{left:24px;right:24px;bottom:var(--j3-approval-bottom);--j3-expand:clamp(0,(var(--j3-p,0) - .76)/.06,1);width:auto;transform:none}.j3-approval .approval-card{height:calc(42px + 220px * var(--j3-expand));box-sizing:border-box;padding:12px;overflow:hidden}.j3-approval .approval-card>*{translate:0 calc(-220px * (1 - var(--j3-expand)))}.j3-approval :is(h3,.caption,.field-diff,.mock-actions){opacity:var(--j3-expand)}.j3-approval h3{margin:0;font-size:17px;line-height:1.3}.j3-approval .caption{margin-top:3px;margin-bottom:0;font-size:11px;line-height:1.4}.j3-approval .review-label{gap:6px;margin-bottom:6px;font-size:11px}.j3-approval .record-id{font-size:11px}.j3-approval .field-diff{gap:6px;margin:10px 0}.j3-approval .field-diff>div{grid-template-columns:.8fr 1fr 1.3fr;gap:6px;font-size:11px;line-height:1.35}.j3-approval .mock-actions{gap:8px;margin-top:8px;font-size:11px}.j3-approval .mock-actions>span{padding:6px 9px}.j3-approval .held-note{margin-top:7px}.j3-fallback{inset:38% 0 12%}.j3-journey[data-phase=waiting] .j3-fallback{inset:38% 0 42%}}@media (height<=720px) and (width<=700px){.j3-journey{--j3-copy-top:62px}.j3-copy li .j3-detail p{font-size:11px}.j3-copy button{font-size:14px}}@media (prefers-reduced-motion:reduce){.j3-approval,.j3-approval .approval-card{transition:none;transform:none}.j3-journey[data-phase=plan] .j3-ticket-row{opacity:1;transform:none}}.j3-ticket-dots,.j3-ticket-state{display:none}.j3-ticket-state{color:#526b81;font-size:11px;line-height:1.4}.j3-ticket-source{font-size:11px}.j3-ticket-source>span{display:block}.j3-ticket-fact{margin-bottom:2px;font-weight:560}.j3-journey:is([data-phase=ask],[data-phase=plan]) .j3-state-ready,.j3-journey[data-phase=gather] .j3-state-reading,.j3-journey[data-phase=edit] .j3-state-edit,.j3-journey[data-phase=review] .j3-state-review,.j3-journey[data-phase=permission] .j3-state-permission,.j3-journey[data-phase=fact] .j3-state-fact,.j3-journey:is([data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) .j3-state-signoff{display:block}.j3-ticket-wait{font-size:11px;display:block}@media (width<=700px){.j3-ticket-dots{display:flex}.j3-journey[data-phase=ask] .j3-ticket-rows{display:grid}}.j3-ticket-owner{color:#25455e;background:#e1edf6;border-radius:50%;place-items:center;min-width:18px;height:18px;font-size:11px;display:grid}.j3-owner-you,.j3-ticket-name{border-radius:5px;padding:0 3px}@media (width<=700px){.j3-ticket-label{order:1}.j3-ticket-icon{order:0}.j3-ticket-avatar,.j3-ticket-owner{order:2}.j3-ticket-state,.j3-ticket-wait{order:3}.j3-ticket-source{order:4}.j3-journey[data-phase=fact] .j3-state-fact,.j3-journey[data-phase=signoff] .j3-ticket-source{display:none}}.j3-ticket-done,.j3-ticket-next,.j3-ticket-approved,.j3-approved-label,.j3-done-bar{display:none}.j3-journey:is([data-phase=approve],[data-phase=complete]) [data-node="4"] .j3-ticket-check{opacity:1}.j3-journey:is([data-phase=approve],[data-phase=complete]) .j3-ticket-wait{display:none}.j3-journey:is([data-phase=approve],[data-phase=complete]) .j3-ticket-approved{color:#397eb0;font-size:11px;display:block}.j3-journey[data-phase=complete] .j3-ticket-done{color:#397eb0;background:#e1edf6;border-radius:5px;margin-left:5px;padding:2px 6px;font-size:11px;display:inline-block}.j3-journey[data-phase=complete] .j3-ticket-next{color:#526b81;margin:8px 0 0;font-size:11px;line-height:1.4;display:block}.j3-journey:is([data-phase=approve],[data-phase=complete]) .j3-approval{opacity:1;visibility:visible;transform:none}.j3-approved-label{color:#397eb0;align-items:center;gap:6px;font-size:11px;line-height:18px;position:absolute;inset:16px 16px auto}.j3-approved-label svg,.j3-done-bar svg{flex-shrink:0;width:16px;height:16px}.j3-journey[data-phase=approve] .j3-approved-label{display:flex}.j3-journey[data-phase=approve] .j3-approval .review-label{visibility:hidden}.j3-journey[data-phase=approve] .j3-approval .held-note{font-size:0}.j3-journey[data-phase=approve] .j3-approval .held-note>*{display:none}.j3-journey[data-phase=approve] .j3-approval .held-note:after{content:"Applied to Salesforce";color:#397eb0;font-size:11px}.j3-journey[data-phase=approve] .j3-approval .mock-actions>span:not(.mock-approve){visibility:hidden}.j3-journey[data-phase=approve] .j3-approval .mock-approve{color:#fff;background:#397eb0;position:relative;transform:scale(.96);box-shadow:inset 0 2px 4px #25455e40}.j3-journey[data-phase=approve] .j3-approval .mock-approve:after{content:"";clip-path:polygon(0 0,100% 65%,55% 68%,38% 100%);filter:drop-shadow(0 0 1px #fff);background:#397eb0;width:14px;height:19px;position:absolute;bottom:-10px;right:0}.j3-journey[data-phase=complete] .j3-approval .approval-card{display:none}.j3-journey[data-phase=complete] .j3-done-bar{color:#397eb0;background:#fffffff2;border-radius:10px;align-items:center;gap:8px;padding:12px 14px;font-size:11px;line-height:18px;display:flex}.j3-done-bar>span:last-child{color:#526b81;margin-left:auto}@media (width>=701px){.j3-copy{top:clamp(72px,10svh,108px)}.j3-copy ol{margin:12px 0 0}.j3-copy li{padding-bottom:6px}.j3-detail{margin:6px 0 8px 19px;padding-left:24px}.j3-copy li .j3-detail p{font-size:13px;line-height:1.45}.j3-tags{margin-top:6px}.j3-ticket{margin-bottom:12px;padding:10px}.j3-ticket-rows{gap:3px;margin-top:8px}.j3-journey:is([data-phase=signoff],[data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve],[data-phase=complete]) :is(.j3-ticket-source,.j3-state-signoff){display:none}.j3-ticket-state{flex-basis:100%;margin-left:31px}.j3-eyebrow{margin:10px 0}}@media (width>=701px) and (height<=800px){.j3-copy{top:72px}.j3-copy li{padding-bottom:2px}.j3-copy li .j3-detail p{font-size:12px;line-height:1.4}.j3-detail{margin-block:4px}.j3-copy .j3-number{width:30px;height:30px}.j3-copy button{font-size:14px}.j3-ticket{padding:8px}.j3-ticket-row{gap:3px 6px;min-height:24px}.j3-ticket-rows{gap:2px}}@media (width<=700px){.j3-journey:is([data-phase=waiting],[data-phase=approve]) .j3-approval{--j3-expand:1}.j3-approved-label{inset:12px 12px auto}.j3-ticket-approved{flex-basis:100%;order:3;margin-left:25px}.j3-journey[data-phase=complete] .j3-fallback{inset:38% 0 12%}.j3-journey[data-phase=complete] .j3-approval{height:42px}.j3-journey[data-phase=complete] .j3-done-bar{box-sizing:border-box;height:42px}}@media (prefers-reduced-motion:reduce){.j3-journey[data-phase=approve] .j3-approval .mock-approve{transform:none}}.j3-approval{width:320px;transition:none}.j3-approval .approval-card{height:auto;overflow:visible}.j3-approval .approval-card>*{translate:none}.j3-approval .j3-slack-payload{border-top:1px solid #d6e2ec;margin-top:10px;padding-top:10px}.j3-approval .j3-message{color:#25455e;margin:6px 0;font-size:12px;line-height:1.45}.j3-approval .j3-slack-payload h3{font-size:14px}.j3-journey[data-approved]:not([data-phase=complete]) .j3-approved-label{display:flex}.j3-journey[data-approved] .j3-approval .review-label{visibility:hidden}.j3-journey[data-approved] .j3-approval .mock-approve{color:#fff;background:#397eb0;transform:scale(.96);box-shadow:inset 0 2px 4px #25455e40}.j3-journey[data-phase=approve] .j3-approval .held-note:after{content:"Applying both approved changes"}.j3-ticket-row{flex-wrap:wrap}.j3-ticket-state,.j3-ticket-source{flex-shrink:1}@media (width<=700px){.j3-approval{width:auto;bottom:16px;left:16px;right:16px}.j3-approval .approval-card{height:auto;padding:10px}.j3-approval :is(h3,.caption,.field-diff,.mock-actions){opacity:1}.j3-approval h3{font-size:14px}.j3-approval .field-diff{gap:4px;margin:6px 0}.j3-approval .j3-slack-payload{margin-top:6px;padding-top:6px}.j3-approval .mock-actions{margin-top:6px}.j3-ticket-row{flex-wrap:wrap}.j3-journey:is([data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve]) .j3-copy .j3-ticket-rows,.j3-journey:is([data-phase=propose],[data-phase=arrive],[data-phase=waiting],[data-phase=approve]) .j3-copy .j3-ticket-dots{display:none}.j3-approval .caption{font-size:10px;line-height:1.25}.j3-approval .j3-message{font-size:11px;line-height:1.3}.j3-approval .held-note{margin-top:5px}}.j3-still-done{display:none}.j3-still-review,.j3-still-done{height:100%}.j3-journey[data-phase=complete] .j3-still-review{display:none}.j3-journey[data-phase=complete] .j3-still-done{display:block}.j3-fallback{top:var(--j3-fallback-top,20%);bottom:var(--j3-fallback-bottom,10%)}.j3-cursor{z-index:5}
