html{scroll-behavior:smooth}
body{margin:0;font-family:"Schibsted Grotesk",Georgia,serif;background:#F6F6F1;color:#002B22;-webkit-font-smoothing:antialiased}
a{color:#002B22}a:hover{color:#00513F}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:72px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.faq{display:grid;grid-template-columns:320px minmax(0,1fr);gap:64px}
.h1{margin:0;font-size:clamp(46px,6vw,80px);line-height:1;letter-spacing:-0.045em;font-weight:600}
.h2{margin:0;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-0.04em;font-weight:600}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4A5E57}
.lead{margin:0;font-size:19px;line-height:1.6;color:#3A5750}
.btn{height:52px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:#DFFF38;color:#002B22;box-shadow:0 1px 0 rgba(0,43,34,.12),0 8px 24px -10px rgba(143,176,0,.7)}
.btn-ghost{border:1px solid #D5D8CC;color:#002B22;background:transparent}
.btn-ghost:hover{background:#FFFFFF}
.card{background:#FFFFFF;border:1px solid #E7E8E0;border-radius:24px;transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(0,43,34,.25)}
.seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:#FFFFFF;border:1px solid #E2E4DA}
.seg-ind{position:absolute;top:4px;height:44px;width:148px;border-radius:999px;background:#002B22;transition:left .45s cubic-bezier(.3,.9,.3,1)}
.seg button{position:relative;z-index:1;width:148px;height:44px;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;border-radius:999px;transition:color .3s ease}
.up{animation:up .8s cubic-bezier(.2,.8,.2,1) both}
.u1{animation-delay:.05s}.u2{animation-delay:.15s}.u3{animation-delay:.25s}.u4{animation-delay:.35s}.u5{animation-delay:.45s}.u6{animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.b{transform-origin:bottom;animation:pop .5s cubic-bezier(.2,.9,.25,1.1) both}
.b1{animation-delay:.5s}.b2{animation-delay:2.3s}.b3{animation-delay:4.1s}.b4{animation-delay:5.9s}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.typing{position:absolute;left:14px;bottom:14px;opacity:0;padding:12px 14px;border-radius:18px 18px 18px 5px;display:flex;gap:4px}
.t1{animation:blink 1.2s linear 1.1s both}.t2{animation:blink 1.2s linear 4.7s both}
@keyframes blink{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
.typing i{width:6px;height:6px;border-radius:9px;background:#8A968F;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.float{animation:bob 6s ease-in-out infinite}.float2{animation:bob 7s ease-in-out -2s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:12px;flex-shrink:0;padding-right:12px;animation:marq 38s linear infinite}
.rev .track{animation-direction:reverse;animation-duration:44s}
@keyframes marq{to{transform:translateX(-100%)}}
.chip{height:56px;padding:0 24px;border-radius:999px;background:#FFFFFF;border:1px solid #E7E8E0;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;white-space:nowrap}
.chip span{width:8px;height:8px;border-radius:9px}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,157,85,.45)}50%{box-shadow:0 0 0 6px rgba(31,157,85,0)}}
@media (max-width:960px){
.hero,.g2,.faq{grid-template-columns:minmax(0,1fr);gap:48px}
.g3{grid-template-columns:minmax(0,1fr)}
.nav-links{display:none!important}
.seg button{width:104px;font-size:14px}.seg-ind{width:104px}
}
@media (max-width:600px){
.wrap{padding:0 20px}
section[style*="padding: 0 0 140px"]{padding-bottom:80px!important}
section[style*="padding: 40px 0 140px"]{padding-bottom:80px!important}
section[style*="padding: 88px 0 120px"]{padding:40px 0 72px!important}
.login{display:none!important}
.btn{white-space:nowrap}
.revrow{flex-direction:column}
[style*="left: -96px"]{left:-8px!important;top:-26px!important}
[style*="right: -44px"]{right:-8px!important}
table th[scope=col]{width:auto!important;padding:14px 2px!important;font-size:9px!important;letter-spacing:.04em!important}
table th[scope=row]{padding:14px 8px 14px 14px!important}
table th[scope=row] span span:first-child{font-size:14px!important}
table th[scope=row] span span:last-child{display:none}
table td{padding:12px 2px!important}
table td span[role=img]{width:24px!important;height:24px!important}
.ftop{flex-direction:column}
}
.brief .float{order:2}
@media (max-width:600px){
.brief{padding:36px 22px 22px!important;border-radius:24px!important;gap:28px!important}
.brief .lead{font-size:17px}
.brief>svg{width:220px!important;height:220px!important;right:-60px!important;top:-50px!important}
.brief .float{padding:18px!important;margin:0 -4px}
}
@media (max-width:600px){.ctarow{flex-direction:column;padding-top:32px}.ctarow .btn{height:46px;padding:0 24px;font-size:15px}}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.up,.b{opacity:1;transform:none}
}/* v2: avatars */
.avs{display:flex}
.av{width:30px;height:30px;border-radius:99px;border:2px solid #F6F6F1;background-size:cover;background-position:center;margin-left:-9px}
.av:first-child{margin-left:0}

/* v2: reveal on scroll (JS adds .in) */
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv{transform:translateY(36px) scale(.97)}
.js .card.rv.in{transform:none}
.js .card.rv.in:hover{transform:translateY(-3px)}
.js tr.rv{transform:translateX(-18px)}
.js tr.rv.in{transform:none}
.js .brief.rv{transform:translateY(48px) scale(.96)}
.js .brief.rv.in{transform:none}

/* v2: how it works steps */
.hstep{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0 26px;border-top:1px solid #E2E4DA;position:relative;width:100%}
.hstep:last-child{border-bottom:1px solid #E2E4DA}
.hstep:focus-visible{outline:2px solid #002B22;outline-offset:4px;border-radius:8px}
.hn{font-family:"IBM Plex Mono",monospace;font-size:13px;color:#4A5E57;padding-top:4px;transition:color .3s}
.ht{display:flex;flex-direction:column;gap:6px}
.htt{font-size:20px;font-weight:600;transition:color .3s}
.htd{font-size:16px;line-height:1.6;color:#3A5750}
.hstep:not(.on) .htt{color:#7E948C}
.hstep:not(.on) .htd{color:#8A968F}
.hstep:hover .htt{color:#002B22}
.hstep.on .hn{color:#002B22;font-weight:500}
.hbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.hbar i{display:block;height:100%;width:100%;background:#002B22;transform:scaleX(0);transform-origin:left}
.hstep.on .hbar i{animation:hbar 6.5s linear forwards}
@keyframes hbar{to{transform:scaleX(1)}}

/* v2: scenes */
.stage{position:relative;background:#FBFBF8;border-radius:20px;min-height:476px;overflow:hidden}
.scene{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:10px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.scene.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
.scene > *{opacity:0}
.scene.on > *{animation:scIn .55s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes scIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sc-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #ECEDE6;border-radius:14px;background:#FFFFFF}
.sc-row.sel{border-color:#002B22;box-shadow:0 0 0 3px #EEF9C4}
.sc-row.dim{opacity:.5}
.scene.on > .sc-row.dim{animation-name:scInDim}
@keyframes scInDim{from{opacity:0;transform:translateY(12px)}to{opacity:.5;transform:none}}
.sc-txt{flex-grow:1;display:flex;flex-direction:column}
.sc-txt b{font-size:15px;font-weight:600}
.sc-txt small{font-size:13px;color:#5B6B66}
.sc-radio{width:20px;height:20px;border-radius:99px;border:1.5px solid #CDD1C4}
.chk{width:22px;height:22px;flex-shrink:0;border-radius:99px;background:#DFFF38;display:flex;align-items:center;justify-content:center}
.scene.on .chk{animation:chkPop .5s cubic-bezier(.2,.9,.25,1.3) calc(var(--d,0s) + .35s) both}
@keyframes chkPop{from{transform:scale(0)}to{transform:scale(1)}}
.sc-logo{width:36px;height:36px;border-radius:10px;background:#FFFFFF;border:1px solid #ECEDE6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-logo img{width:22px;height:22px;object-fit:contain}
.sc-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;padding:0 2px 4px}
.sc-count{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:#4A5E57;background:#EEF9C4;padding:4px 8px;border-radius:99px}
.sc-spin{width:18px;height:18px;border-radius:99px;border:2px solid #E2E4DA;border-top-color:#002B22;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sc-btn{font-size:13px;font-weight:600;padding:6px 12px;border-radius:99px;background:#002B22;color:#DFFF38}
.sc-note{margin:4px 2px 0;font-size:13px;color:#5B6B66}
.sc-b{max-width:82%;padding:10px 14px;font-size:15px;line-height:1.45}
.sc-b.out{align-self:flex-end;background:#EEF9C4;border-radius:16px 16px 5px 16px;margin-top:6px}
.sc-b.in{align-self:flex-start;background:#FFFFFF;border:1px solid #ECEDE6;border-radius:16px 16px 16px 5px}
.sc-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#FFFFFF;border:1px solid #ECEDE6;border-radius:16px 16px 16px 5px}
.scene.on > .sc-typing{animation:typeShow 1s ease var(--d,0s) both}
@keyframes typeShow{0%{opacity:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;height:0;padding:0;margin:-5px 0;border-width:0}}
.sc-typing i{width:6px;height:6px;border-radius:9px;background:#8A968F;animation:dot 1s infinite}
.sc-typing i:nth-child(2){animation-delay:.15s}.sc-typing i:nth-child(3){animation-delay:.3s}

/* v2: FAQ accordion */
.qa{border-top:1px solid #E2E4DA}
.qa:last-child{border-bottom:1px solid #E2E4DA}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-size:18px;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#00513F}
.qa summary:focus-visible{outline:2px solid #002B22;outline-offset:4px;border-radius:6px}
.qi{width:32px;height:32px;flex-shrink:0;border-radius:99px;border:1px solid #D5D8CC;display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .3s ease,border-color .3s}
.qa[open] .qi{transform:rotate(45deg);background:#DFFF38;border-color:#DFFF38}
.ans{overflow:hidden}
.ans p{margin:0;padding:0 48px 22px 0;font-size:16px;line-height:1.6;color:#3A5750}
@media (max-width:600px){.stage{min-height:530px}.ans p{padding-right:0}}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.scene > *{opacity:1}}

/* real brand logos in the integration chips */
.chip img{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.chip img.lg-zoho-mail{width:46px}
.chip img.lg-cal-com{border-radius:5px}
/* hero: phone a touch smaller */
@media (min-width:961px){.hero{grid-template-columns:minmax(0,1fr) 360px}}
.marq a.chip{text-decoration:none;color:#002B22;transition:border-color .2s,box-shadow .2s}
.marq a.chip:hover{border-color:#002B22;box-shadow:0 6px 16px -10px rgba(0,43,34,.35)}
.marq:hover .track{animation-play-state:paused}
.ans a{color:#002B22;text-underline-offset:3px}
@media (min-width:961px){.faq > h2{position:sticky;top:110px;align-self:start}}

.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:#002B22;color:#DFFF38;padding:10px 16px;border-radius:999px}
.skip:focus{left:16px}
.soon{font-size:12px;font-weight:600;background:#EEEFE8;color:#4A5E57;padding:4px 10px;border-radius:99px}
.alllink{font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px}