:root{color-scheme:dark;--bg:#0b0d10;--text:#f5f5f3;--muted:#a7abb4;--line:#292c32;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:6px}::selection{background:#7867a8;color:white}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}button{cursor:pointer}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.skip{position:absolute;left:20px;top:-80px;padding:14px;background:white;color:#111;z-index:10}.skip:focus{top:20px}
.header{height:100px;display:flex;align-items:center;gap:36px;position:relative;z-index:1}.wordmark{font-size:29px;font-weight:650;letter-spacing:-1.7px}.header nav{display:flex;gap:30px;margin-left:auto;font-size:13px;color:#b4b7bf}.header nav a:hover{color:white}.mac-label{font-size:12px;color:#7e848f;margin-left:16px}

/* A quiet workbench: movement follows the automation itself. */
.hero{position:relative;isolation:isolate;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center;padding-block:36px 86px}
.hero-copy{padding-bottom:20px}
h1{text-wrap:balance;font-size:clamp(42px,5.2vw,74px);font-weight:500;line-height:1.06;letter-spacing:-2.8px;margin-bottom:30px;color:white}
.hero-copy>p{font-size:21px;line-height:1.5;color:#b8bbc3;max-width:500px;margin-bottom:0}
.hero-demo{position:relative;isolation:isolate;width:100%;min-width:0;padding-block:10px}
.hero-demo::before{content:"";position:absolute;z-index:-1;inset:-45px -42px -35px;pointer-events:none;background:linear-gradient(#9ba4b00a 1px,transparent 1px),linear-gradient(90deg,#9ba4b00a 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at 50% 42%,#000 25%,transparent 72%)}
.demo-card{position:relative;border:1px solid #ffffff24;border-top-color:#ffffff38;border-radius:14px;background:#1b1e25;padding:23px 28px}
.manual-demo{margin:0}
.automated-demo{margin:18px 0 0}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.demo-header h2{font-size:19px;font-weight:500;line-height:1;letter-spacing:-.45px;margin:0}
.mini-flow{display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;align-items:start;gap:8px}
.mini-node{display:flex;align-items:center;flex-direction:column;gap:10px;min-width:0}
.brand-tile{width:68px;height:68px;display:grid;place-items:center;border:1px solid #ffffffb5;border-radius:14px;background:linear-gradient(140deg,#fff,#e4e6ea)}
.brand-tile img{width:44px;height:44px;object-fit:contain}
.brand-stripe{--app-colour:#635bff}.brand-sheets{--app-colour:#34a853}.brand-make{--app-colour:#6d00cc}
.brand-tile:is(.brand-stripe,.brand-sheets,.brand-make),.map-brand{background:var(--app-colour);border-color:#ffffff30}
.brand-tile:is(.brand-stripe,.brand-sheets,.brand-make) img,.module-circle img,.map-brand img{filter:brightness(0) invert(1)}
.person-tile{color:#fff;background:#2f78d2;border-color:#ffffff30}
.person-tile svg{width:44px;height:44px;fill:currentColor;stroke:none}
.mini-node>span{font-size:11px;color:#d0d5df;white-space:nowrap}
.flow-connector{padding-top:19px;text-align:center;font-size:20px;color:#8791a0}
.active-connector{padding-top:18px}
.active-connector svg{display:block;width:100%;height:24px;overflow:hidden}
.route-line{fill:none;stroke:#6e7989;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.route-progress{fill:none;stroke:#b5a4f1;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:route-fill 6s ease-in-out infinite}
.route-packet{fill:#ede9ff;opacity:0;animation:route-transfer 6s ease-in-out infinite}
.active-connector~.active-connector .route-progress{stroke:#92c9a6;animation-delay:1.55s}
.active-connector~.active-connector .route-packet{fill:#d7f0e2;animation-delay:1.55s}
@keyframes route-fill{0%,3%{stroke-dashoffset:1;opacity:.7}26%,75%{stroke-dashoffset:0;opacity:1}92%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes route-transfer{0%,3%{opacity:0;transform:translateX(0)}5%{opacity:1}26%{opacity:1;transform:translateX(72px)}30%,100%{opacity:0;transform:translateX(74px)}}
.automated-demo .stripe-tile{animation:stripe-ready 6s ease-in-out infinite}
.automated-demo .make-tile{animation:make-ready 6s ease-in-out infinite}
.automated-demo .sheets-tile{animation:sheet-ready 6s ease-in-out infinite}
@keyframes stripe-ready{0%,3%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}7%,15%{outline:2px solid #a498e8;outline-offset:4px;transform:scale(1.04)}23%,100%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}}
@keyframes make-ready{0%,20%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}26%,34%{outline:2px solid #b9a0ed;outline-offset:4px;transform:scale(1.06)}43%,100%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}}
@keyframes sheet-ready{0%,44%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}50%,60%{outline:2px solid #9dccad;outline-offset:4px;transform:scale(1.06)}70%,100%{outline:2px solid transparent;outline-offset:2px;transform:scale(1)}}
.demo-time{margin-top:20px;padding-top:15px;border-top:1px solid #ffffff15;display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-time>strong{font-size:18px;font-weight:500;letter-spacing:-.4px}
.demo-time strong span{font-size:12px;color:#a9b2c0;font-weight:400;letter-spacing:0}
.demo-time>span{font-size:10px;color:#a9b2c0}
.time-back{text-align:center;margin-top:22px}
.time-back>strong{font-size:20px;line-height:1.5;font-weight:500;letter-spacing:-.35px;color:#dce0e7}

/* The page follows the product: observed work, an alternative, then the build. */
h2{font-size:clamp(36px,4.4vw,57px);font-weight:500;line-height:1.08;letter-spacing:-2.3px;margin-bottom:23px}
.centred-heading{text-align:center;margin-inline:auto}
.beta-cta{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:48px;padding:13px 19px;border:1px solid #646b75;border-radius:7px;background:#ffffff06;color:#f5f5f3;font-size:14px;font-weight:500;transition:background .18s,border-color .18s}
.hero-copy .beta-cta{margin-top:29px}
.beta-cta>span{font-size:18px;color:#b3bbc7}
.beta-cta:hover:enabled,a.beta-cta:hover{background:#ffffff0d;border-color:#b0b7c2}
.beta-cta:disabled{cursor:default;opacity:.55}
.comparison-section{padding-block:75px 82px;border-top:1px solid var(--line)}
.comparison-section h2{font-size:clamp(44px,5.4vw,76px);letter-spacing:-2.8px;margin-bottom:21px}
.comparison-caption{text-align:center;font-size:18px;line-height:1.6;color:#a7afb9;max-width:750px;margin:0 auto 43px}
.product{width:min(1100px,100%);margin-inline:auto;scroll-margin-top:30px}
.comparison-pair{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid #393e47;border-radius:10px;background:#1c1d22}
.comparison-panel{position:relative}
.comparison-panel+.comparison-panel{border-left:1px solid #34363e}
.panel-crop{position:relative;overflow:hidden;aspect-ratio:750/1085;width:min(410px,100%);margin-inline:auto;clip-path:inset(0 1px)}
.panel-crop img{position:absolute;display:block;width:314.667%;max-width:none;height:auto;top:-6.359%;pointer-events:none}
.manual-crop img{left:-113.6%}.automated-crop img{left:-213.6%}
.example-time{padding:19px 24px 22px;display:flex;flex-direction:column;gap:7px;border-top:1px solid #34363e}
.example-time strong{font-size:21px;font-weight:500;letter-spacing:-.4px}
.example-time span{font-size:11px;color:#9ca3b0}
@media(min-width:1051px){.comparison-panel::before{content:"";position:absolute;top:82px;left:0;right:0;height:1px;background:#34363e}}
.how-section{padding-block:75px 80px;border-top:1px solid var(--line)}
.work-steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:65px}
.step-number{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid #3b414b;border-radius:50%;font-size:13px;color:#b4bdc9;margin-bottom:24px}
.work-steps h3{font-size:20px;font-weight:500;letter-spacing:-.4px;margin-bottom:13px;line-height:1.3}
.work-steps p{font-size:15px;line-height:1.7;color:#a7afb9;max-width:330px;margin:0}

/* A light automation canvas, with one selected module's detail. */
.build-section{background:#e4e5e1;color:#1e242d;color-scheme:light;padding-block:80px 86px}
.build-heading{text-align:center;max-width:830px;margin:0 auto 43px}
.build-heading h2{margin-bottom:22px}
.build-heading>p{font-size:16px;line-height:1.75;color:#5b6573;max-width:680px;margin:0 auto}
.build-demo{border:1px solid #d5dae2;border-radius:12px;background:#fff;padding:28px 38px 0}
.map-header{display:flex;align-items:center;gap:10px}
.map-brand{width:34px;height:34px;border-radius:8px;display:grid;place-items:center}.map-header img{width:23px;height:23px;object-fit:contain}
.map-header h3{font-size:15px;font-weight:500;letter-spacing:-.2px;margin:0}
.scenario-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b6becb transparent;background:linear-gradient(#64748b05 1px,transparent 1px),linear-gradient(90deg,#64748b05 1px,transparent 1px);background-size:24px 24px;margin-top:18px}
.scenario{min-width:650px;display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:start;gap:20px;padding:26px 26px 32px}
.scenario-module{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;color:#252d38;border-radius:8px;padding:0 5px 10px;min-width:0}
.module-circle{width:144px;height:144px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--app-colour);outline:2px solid transparent;outline-offset:5px;margin-bottom:10px;transition:outline-color .18s}
.module-circle img{width:86px;height:86px;object-fit:contain}
.scenario-module:hover .module-circle{outline-color:#a4aebe}
.scenario-module[aria-pressed="true"] .module-circle{outline-color:#293444}
.scenario-module:focus-visible{outline:none}.scenario-module:focus-visible .module-circle{outline:3px solid #293444;outline-offset:6px}
.scenario-module strong{font-size:14px;font-weight:550}
.scenario-module>span:last-child{color:#657183;font-size:12px}
.scenario-link{height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.scenario-link>span:first-child{font-size:10px;color:#677386;border:1px solid #cdd4df;background:#fff;padding:5px 13px;border-radius:20px}
.map-arrow{color:#7d899a;font-size:25px}
.guide-detail{border-top:1px solid #d9dee6;margin-top:3px;min-height:206px}
.module-detail{padding-block:28px 30px;display:grid;grid-template-columns:65px 1fr;gap:23px}
.guide-count{font-size:12px;color:#758196;padding-top:4px}
.module-detail h3{font-size:21px;font-weight:500;letter-spacing:-.6px;margin-bottom:12px}
.module-detail p{font-size:14px;line-height:1.7;color:#5e6a7d;margin-bottom:18px;max-width:720px}
.mapping{display:grid;grid-template-columns:65px minmax(100px,170px) 65px minmax(100px,170px);align-items:center;gap:9px 14px;font-size:11px}
.mapping>span{color:#677486}
.mapping strong{font-weight:500;color:#39475b;border:1px solid #d1d8e4;border-radius:5px;background:#e9edf3;padding:8px 11px}
.guide-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:25px}
.guide-actions button{font-size:13px;min-height:44px;border-radius:6px;transition:background .18s,border-color .18s,color .18s}
.guide-back{border:0;background:transparent;color:#677486;padding:10px 0 10px 10px;margin-left:-10px}
.guide-back:hover:enabled{color:#1e293b}
.guide-back:disabled{opacity:.4;cursor:default}
.guide-next{display:flex;align-items:center;gap:28px;border:1px solid #aab4c3;background:#fff;color:#283448;padding:10px 16px}
.guide-next:hover{background:#eef1f6;border-color:#77859a}
.guide-next>span{font-size:17px;color:#77859a}

.faq-section{padding-block:75px 80px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:.9fr 1.1fr;gap:85px}
.faq-section h2{font-size:37px;letter-spacing:-1.4px;max-width:340px}
.answers details{border-bottom:1px solid var(--line);padding:20px 0}
.answers details:first-child{padding-top:2px}
.answers details:last-child{border-bottom:0}
.answers summary{font-size:15px;font-weight:400;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:32px}
.answers summary::-webkit-details-marker{display:none}
.answers summary::after{content:"+";font-weight:400;font-size:24px;color:#87919f}
.answers details[open] summary::after{content:"−"}
.answers summary:hover{color:#b7c0c9}
.answers p{font-size:14px;line-height:1.8;color:var(--muted);margin:14px 24px 0 0}
.beta-section{padding-block:85px 80px;text-align:center}
.beta-section h2{max-width:780px;margin:0 auto 24px}
.beta-section>p{font-size:16px;line-height:1.75;color:#a7afb9;margin-bottom:29px}
.beta-section .beta-note{font-size:12px;color:#8f99a7;margin:16px 0 0}
.footer{padding-block:35px 28px}
.footer-top{padding-bottom:35px}
.footer-mark{font-size:clamp(55px,7.2vw,98px);font-weight:550;letter-spacing:-6px;line-height:1}
.footer-bottom{display:flex;align-items:center;gap:35px;border-top:1px solid var(--line);padding-top:25px;color:#7f8998;font-size:11px}
.footer-bottom>span{margin-right:auto}
.footer-bottom a:hover{color:white}

@media(min-width:1600px){.wrap{width:min(1380px,calc(100% - 180px))}.hero-grid{grid-template-columns:1.12fr 1fr;gap:100px}.hero-copy>p{max-width:440px}h1{font-size:74px}.demo-card{padding:25px 34px}.mini-flow{gap:15px}.brand-tile{width:74px;height:74px}.flow-connector{padding-top:22px}.active-connector{padding-top:21px}}
@media(max-width:1050px){
.wrap{width:calc(100% - 64px)}.header{height:88px}.hero-grid{grid-template-columns:1fr;gap:45px;padding-block:35px 65px}.hero-copy{padding:0}h1{font-size:64px;max-width:780px}.hero-copy>p{max-width:510px}.hero-demo{max-width:650px;margin-inline:auto}
.comparison-section{padding-block:65px}.product{max-width:950px}
.build-section{padding-block:65px}.build-demo{padding-inline:27px}.faq-section{gap:45px;padding-block:65px}.faq-section h2{font-size:32px}.beta-section{padding-block:65px}
}
@media(max-width:640px){
.wrap{width:calc(100% - 40px)}.header{height:78px;gap:12px}.wordmark{font-size:25px}.header nav{gap:18px;font-size:11px}.mac-label{display:none}.hero-grid{padding-block:28px 43px;gap:28px}h1{font-size:clamp(34px,9.6vw,43px);letter-spacing:-1.3px;line-height:1.08;margin-bottom:23px}.hero-copy>p{font-size:18px;line-height:1.5;margin:0}.hero-copy .beta-cta{margin-top:24px}.beta-cta{min-height:46px;font-size:13px;gap:27px}.hero-demo::before{inset:-20px -15px -25px}
.demo-card{border-radius:11px;padding:20px 18px}.automated-demo{margin:16px 0 0}.demo-header{margin-bottom:23px;gap:8px}.demo-header h2{font-size:17px}.mini-flow{gap:5px;grid-template-columns:1fr 30px 1fr 30px 1fr}.brand-tile{width:56px;height:56px;border-radius:11px}.brand-tile img{width:36px;height:36px}.person-tile svg{width:36px;height:36px}.mini-node>span{font-size:10px}.flow-connector{padding-top:15px}.active-connector{padding-top:14px}.demo-time{gap:7px;padding-top:14px;margin-top:20px}.demo-time>strong{font-size:16px}.demo-time strong span{font-size:10px}.demo-time>span{font-size:9px}.time-back{margin-top:19px}.time-back>strong{font-size:18px}
h2{font-size:38px;letter-spacing:-1.6px}.comparison-section{padding-block:50px}.comparison-section h2{font-size:43px;line-height:1.1;letter-spacing:-1.9px;margin-bottom:18px}.comparison-caption{font-size:15px;line-height:1.65;margin-bottom:31px}.comparison-pair{border-radius:8px}.example-time{padding:15px 12px 17px}.example-time strong{font-size:15px}.example-time span{font-size:9px;line-height:1.5}

.build-section{padding-block:50px}.build-heading{margin-bottom:30px}.build-heading h2{margin-bottom:20px}.build-heading>p{font-size:14px}.build-demo{padding:23px 18px 0;border-radius:9px}.scenario{min-width:570px;gap:9px;grid-template-columns:1fr 45px 1fr 45px 1fr;padding:22px 0 25px}.scenario-module{padding:0 5px 10px}.module-circle{width:110px;height:110px}.scenario-link{height:110px}.module-circle img{width:66px;height:66px}.scenario-module strong{font-size:12px}.scenario-module>span:last-child{font-size:11px}.guide-detail{min-height:270px}.module-detail{grid-template-columns:1fr;gap:16px;padding-block:22px 25px}.guide-count{font-size:11px;padding:0}.module-detail h3{font-size:20px}.module-detail p{font-size:13px}.mapping{grid-template-columns:50px 1fr;font-size:11px}
.faq-section{grid-template-columns:1fr;gap:24px;padding-block:50px}.faq-section h2{font-size:32px;margin:0}.answers summary{font-size:14px}.answers p{font-size:13px}.beta-section{padding-block:55px}.beta-section>p{font-size:15px}.footer{padding-top:25px}.footer-mark{font-size:68px;letter-spacing:-4px}.footer-bottom{gap:25px;font-size:10px}
}
@media(max-width:1050px){.how-section{padding-block:65px}.work-steps{gap:30px}.work-steps h3{font-size:19px}.work-steps p{font-size:14px}}
@media(max-width:640px){.how-section{padding-block:50px}.work-steps{grid-template-columns:1fr;gap:29px;margin-top:34px}.work-steps li{display:grid;grid-template-columns:32px 1fr;gap:0 19px;align-items:start}.step-number{grid-row:1/3;margin:0;width:30px;height:30px;font-size:12px}.work-steps h3{font-size:19px;margin-bottom:9px}.work-steps p{font-size:14px;max-width:330px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}