
.journey-section{padding:100px 0}.story-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:48px}.story-intro h2{margin-bottom:0}.story-intro>p{max-width:280px}.journey-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}.journey-steps{display:grid}.journey-steps>button{position:relative;display:flex;gap:18px;padding:25px 0;border:0;border-bottom:1px solid #deded8;background:transparent;text-align:left;color:#30312d}.journey-number{font-size:12px;padding-top:7px;color:#62675b}.journey-steps strong{font-size:21px;font-weight:500;display:block;line-height:1.3}.journey-steps button>span:nth-child(2)>span{display:block;font-size:14px;line-height:1.65;margin-top:10px}.journey-steps i{position:absolute;bottom:-1px;left:0;height:2px;background:#303d2e;width:0}.journey-steps [aria-selected=true] i{width:100%}.product-story{display:grid;grid-template-columns:1fr 1.08fr;gap:80px;align-items:center;padding:85px 0;border-top:1px solid #e1e2dc}.product-story.story-reverse .story-copy{order:2}.story-copy h2{font-size:42px;letter-spacing:-1.6px}.story-copy p{font-size:16px;line-height:1.75}.story-copy .check-list{font-size:13px;margin-top:24px}.story-scene,.journey-display{position:relative;background:#f1f1ed;border-radius:24px;overflow:hidden;isolation:isolate;border:1px solid #e6e6df}.journey-display{background:#edf0e9;min-height:440px}.motion-toggle{position:absolute;right:20px;top:17px;z-index:4;border:0;background:transparent;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:#60675b;padding:4px}.pop-stage{height:440px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px;gap:20px}.floating-label{font-size:12px;color:#575d51;letter-spacing:.2px}.pop-tile{background:#fff;border:1px solid #e0e2d9;border-radius:17px;box-shadow:0 14px 24px #1b271510;padding:24px;transform-origin:center}.pop-tile>span:first-child{font-size:10px;letter-spacing:1.2px;color:#757b6c;display:block;margin-bottom:12px}.pop-tile>strong{font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.7px}.pop-pill{font-size:13px;display:flex;gap:9px;align-items:center;justify-content:center;padding:11px 18px;border-radius:30px;background:#ffffffcf;color:#394333;box-shadow:0 4px 15px #22321a05;animation:soft-pop 7s .6s infinite both}.pop-check{display:grid;place-items:center;width:21px;height:21px;background:#dce8d0;border-radius:50%;font-size:12px;color:#4b6639}.large-brief{width:90%;padding:26px;position:relative;animation:soft-pop 7s infinite both}.large-brief p{font-size:24px;line-height:1.4;letter-spacing:-.5px;margin-top:18px;margin-bottom:26px;color:#282e23}.large-send{display:grid;place-items:center;margin-left:auto;background:#e8ecdf;width:36px;height:36px;border-radius:50%;font-size:23px}.ready-circle{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:#d4e3c3;box-shadow:0 0 0 16px #d4e3c340;animation:check-pop 7s infinite}.ready-circle>span{font-size:76px;color:#496137;line-height:1;animation:check-mark 7s infinite}.ready-pop>strong{font-size:29px;font-weight:500;letter-spacing:-1px;margin-top:14px}.big-time{padding:30px;min-width:285px;animation:soft-pop 7s infinite}.big-time>small{font-size:9px;letter-spacing:1.4px;color:#59634e}.big-time>strong{font-size:68px;display:block;font-weight:400;letter-spacing:-4px;line-height:1.4}.big-time>strong>span{font-size:15px;letter-spacing:0;margin-left:7px}.big-time>div{display:flex;gap:13px}.big-time>div>span{font-size:11px;background:#e6eddc;border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.logic-scene{background:#f1ece6}.logic-brief{width:85%;animation:soft-pop 8s infinite}.pop-pair{display:flex;width:85%;gap:16px}.pop-pair>div{flex:1;padding:20px;animation:logic-pop 8s .15s infinite both}.pop-pair>div:last-child{animation-delay:.35s;background:#e7ece0}.pop-pair .pop-tile>strong{font-size:20px}.browser-scene{background:#e9eff1}.large-browser{width:95%;border:1px solid #d8e1e3;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 35px #20363b13;animation:browser-pop 8s infinite}.large-browser-top{padding:14px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#7a8589;border-bottom:1px solid #eef1f2}.large-dots{display:flex;gap:5px}.large-dots i{height:6px;width:6px;background:#c4ced1;border-radius:50%}.large-browser-body{padding:25px;position:relative;overflow:hidden}.large-browser-body>strong{font-size:35px;font-weight:500;letter-spacing:-1.5px;line-height:1.12;display:block;position:relative;z-index:1}.browser-orb{position:absolute;width:170px;height:170px;border-radius:50%;background:#c8dce1;right:-20px;top:15px;box-shadow:inset -22px -13px 0 #b4ced5;animation:orb-pop 8s infinite}.browser-click{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;border:1px solid #d6e1e4;background:#f1f6f7;width:140px;border-radius:7px;padding:10px 13px;font-size:12px;margin-top:30px}.browser-click b{font-size:20px;font-weight:400}.browser-done{position:absolute;bottom:40px;right:35px;box-shadow:0 8px 18px #122e3710}.extraction-scene{background:#edeef2}.extract-pop{gap:0}.web-sheet{position:absolute;width:62%;left:9%;top:48px;transform:rotate(-8deg);animation:sheet-back 8s infinite}.web-sheet i{display:block;height:7px;background:#e8e8ed;border-radius:3px;margin-top:13px;width:80%}.web-sheet i:last-child{width:55%}.data-sheet{width:73%;position:absolute;right:7%;top:148px;animation:sheet-front 8s infinite;box-shadow:0 20px 30px #29223d18}.data-sheet>strong{display:block;margin-bottom:15px}.data-sheet>div{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #ededf0;font-size:11px}.data-sheet b{font-size:10px;font-weight:500}.extract-pop>.pop-pill{position:absolute;bottom:25px}.connections-scene{background:#efedf2}.tool-orbit{position:relative;width:100%;height:220px}.big-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #e3dee9;padding:22px;border-radius:26px;box-shadow:0 17px 30px #2b163615;animation:hub-pop 8s infinite}.big-hub img{display:block}.big-tool{position:absolute;z-index:1;display:grid;place-items:center;background:#fff;border:1px solid #e5dfeb;border-radius:14px;width:85px;height:67px;box-shadow:0 8px 18px #30203d0c;font-size:16px;font-weight:500;animation:tool-snap 8s infinite}.tool-web{top:10px;left:10%;--travel-x:45px;--travel-y:40px;background:#e2e8da}.tool-mail{right:6%;top:65px;--travel-x:-45px;--travel-y:5px;animation-delay:.15s;background:#dde7ef}.tool-files{left:15%;bottom:0;--travel-x:30px;--travel-y:-40px;animation-delay:.3s;background:#eee3d5}
@keyframes soft-pop{0%,3%{opacity:.4;transform:translateY(12px) scale(.94)}12%{opacity:1;transform:translateY(-3px) scale(1.025)}20%,88%{opacity:1;transform:none}100%{opacity:.4;transform:translateY(12px) scale(.94)}}@keyframes logic-pop{0%,8%{opacity:.25;transform:translateY(-15px) scale(.9)}20%{opacity:1;transform:translateY(3px) scale(1.03)}28%,90%{opacity:1;transform:none}100%{opacity:.25;transform:translateY(-15px) scale(.9)}}@keyframes check-pop{0%,4%{transform:scale(.85)}14%{transform:scale(1.08)}24%,90%{transform:scale(1)}100%{transform:scale(.85)}}@keyframes check-mark{0%,7%{transform:scale(.3);opacity:0}19%{transform:scale(1.15);opacity:1}28%,93%{transform:scale(1);opacity:1}100%{transform:scale(.3);opacity:0}}@keyframes browser-pop{0%,5%{transform:translateY(12px) rotate(-3deg) scale(.96)}17%{transform:translateY(-3px) rotate(1deg) scale(1.01)}25%,90%{transform:none}100%{transform:translateY(12px) rotate(-3deg) scale(.96)}}@keyframes orb-pop{0%,5%{transform:scale(.7)}22%{transform:scale(1.08)}32%,90%{transform:scale(1)}100%{transform:scale(.7)}}@keyframes sheet-back{0%,100%{transform:rotate(-3deg) translate(15px,15px)}20%,85%{transform:rotate(-8deg)}}@keyframes sheet-front{0%,8%{transform:translateY(30px) scale(.9);opacity:.25}23%{transform:translateY(-4px) scale(1.03);opacity:1}32%,88%{transform:none;opacity:1}100%{transform:translateY(30px) scale(.9);opacity:.25}}@keyframes tool-snap{0%,12%{transform:translate(var(--travel-x),var(--travel-y)) scale(.8);opacity:.4}30%{transform:translate(0,-3px) scale(1.07);opacity:1}40%,85%{transform:none;opacity:1}100%{transform:translate(var(--travel-x),var(--travel-y)) scale(.8);opacity:.4}}@keyframes hub-pop{0%,10%{scale:.9}28%{scale:1.06}38%,90%{scale:1}100%{scale:.9}}
.motion-scene:not(.in-view) *{animation-play-state:paused!important}html.motion-paused .motion-scene *{animation:none!important}.motion-scene *{animation-timing-function:cubic-bezier(.22,.8,.3,1)}
@media(max-width:1000px){.journey-layout{gap:30px}.product-story{gap:38px}.story-copy h2{font-size:35px}.pop-stage{padding:24px}.pop-pair>div{padding:16px}.pop-tile>strong{font-size:20px}.pop-pair .pop-tile>strong{font-size:17px}.big-tool{width:72px}.large-brief p{font-size:21px}}
@media(max-width:750px){.journey-section{padding:65px 0}.story-intro{display:block}.story-intro>p{margin-top:20px}.journey-layout{grid-template-columns:1fr}.journey-steps>button{padding:20px 0}.journey-steps strong{font-size:20px}.product-story{grid-template-columns:1fr;padding:60px 0;gap:30px}.product-story.story-reverse .story-copy{order:0}.story-copy h2{font-size:36px}.story-scene{width:100%}.pop-stage{height:400px}.journey-display{min-height:400px}.data-sheet{top:130px}.web-sheet{top:35px}.big-time{min-width:265px}.large-browser-body>strong{font-size:33px}.ready-pop>strong{font-size:26px}.large-brief{width:95%}.tool-web{left:3%}.tool-mail{right:0}.tool-files{left:9%}}
@media(prefers-reduced-motion:reduce){.motion-scene *{animation:none!important;transition:none!important}}

.story-copy h2{font-size:46px}.story-copy p{font-size:18px}.story-copy .check-list{font-size:15px}.journey-steps strong{font-size:23px}.journey-steps button>span:nth-child(2)>span{font-size:16px}
@media(max-width:1000px){.story-copy h2{font-size:40px}}
@media(max-width:750px){.story-copy h2{font-size:36px}.story-copy p{font-size:17px}.journey-steps strong{font-size:21px}.journey-steps button>span:nth-child(2)>span{font-size:16px}}

/* Text remains black inside the illustrated product scenes as well. */
.journey-section,.product-stories{color:#000}
.journey-section :is(button,span,strong,p,small),.product-stories :is(span,strong,p,small,b){color:#000}
.journey-steps button[aria-selected=true],.journey-steps button[aria-selected=true] .journey-number{color:#000}
