.salessync-flow *,.salessync-flow :after,.salessync-flow :before{box-sizing:border-box;margin:0;padding:0}.salessync-flow{--msp-green:#3bba7e;--msp-green-dim:rgba(59,186,126,.12);--msp-green-glow:rgba(59,186,126,.25);--msp-dark:#0b1623;--msp-navy:#0f1e30;--hs-orange:#ff7a59;--hs-orange-dim:rgba(255,122,89,.1);--cw-blue:#2e8ce6;--cw-blue-dim:rgba(46,140,230,.1);--bg:#f6f8fb;--surface:#fff;--surface2:#f0f4f8;--surface3:#e9eef5;--text:#0f1e30;--text-dim:#5e7188;--border:#dce4ee;--border-light:#c9d5e4;--duplex:#7c5cfa;--duplex-dim:rgba(124,92,250,.12);background:var(--bg);color:var(--text);font-family:Plus Jakarta Sans,system-ui,sans-serif;font-size:16px;min-height:100vh;overflow-x:hidden;scroll-behavior:smooth}.salessync-flow *{color:inherit}.salessync-flow .topbar{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:1rem 2rem}.salessync-flow .topbar .brand{align-items:center;display:flex;gap:.6rem}.salessync-flow .topbar .brand .logo-text{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}.salessync-flow .topbar .brand .logo-text .plus{color:var(--msp-green)}.salessync-flow .topbar .powered{align-items:center;color:var(--text-dim);display:flex;font-size:.75rem;gap:.4rem}.salessync-flow .topbar .powered a{color:var(--msp-green);font-weight:600;text-decoration:none}.salessync-flow .hero{overflow:hidden;padding:3rem 2rem 1.5rem;position:relative;text-align:center}.salessync-flow .hero .badge{align-items:center;background:var(--msp-green-dim);border:1px solid rgba(59,186,126,.25);border-radius:50px;color:var(--msp-green);display:inline-flex;font-size:.75rem;font-weight:600;gap:.5rem;letter-spacing:.06em;margin-bottom:1rem;padding:.4rem 1rem;text-transform:uppercase}.salessync-flow .hero .badge .dot{animation:pulse 2s infinite;background:var(--msp-green);border-radius:50%;height:6px;width:6px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.salessync-flow .hero h1{font-size:clamp(1.8rem,4.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:.7rem}.salessync-flow .hero h1 .hs{color:var(--hs-orange)}.salessync-flow .hero h1 .cw{color:var(--cw-blue)}.salessync-flow .hero h1 .green{color:var(--msp-green)}.salessync-flow .hero p{color:var(--text-dim);font-size:1rem;line-height:1.6;margin:0 auto;max-width:600px}.salessync-flow .legend{background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin:1.8rem auto 1.5rem;max-width:740px;padding:.9rem 1.4rem}.salessync-flow .legend-item{align-items:center;color:var(--text-dim);display:flex;font-size:.76rem;font-weight:500;gap:.4rem}.salessync-flow .legend-dot{border-radius:50%;flex-shrink:0;height:9px;width:9px}.salessync-flow .legend-dot.hs{background:var(--hs-orange)}.salessync-flow .legend-dot.cw{background:var(--cw-blue)}.salessync-flow .legend-dot.sync{background:var(--msp-green)}.salessync-flow .legend-dot.duplex{background:var(--duplex)}.salessync-flow .flow-toggle{background:var(--surface);border:1px solid var(--border);border-radius:10px;display:flex;gap:4px;justify-content:center;margin:0 auto 2rem;padding:4px;width:fit-content}.salessync-flow .flow-toggle button{align-items:center;background:transparent;border:none;border-radius:8px;color:var(--text-dim);cursor:pointer;display:flex;font-family:inherit;font-size:.87rem;font-weight:600;gap:.5rem;padding:.65rem 1.5rem;transition:all .25s}.salessync-flow .flow-toggle button .arrow{font-size:.7rem;opacity:.6}.salessync-flow .flow-toggle button.active-hs{background:linear-gradient(135deg,rgba(255,122,89,.18),rgba(255,122,89,.06));border:1px solid rgba(255,122,89,.3);color:var(--hs-orange)}.salessync-flow .flow-toggle button.active-cw{background:linear-gradient(135deg,rgba(46,140,230,.18),rgba(46,140,230,.06));border:1px solid rgba(46,140,230,.3);color:var(--cw-blue)}.salessync-flow .flow-toggle button:not([class*=active]){border:1px solid transparent}.salessync-flow .flow-toggle button:hover:not([class*=active]){background:var(--surface2);color:var(--text)}.salessync-flow .flow-note{color:var(--text-dim);font-size:.85rem;margin:.2rem auto 1.5rem;max-width:720px;padding:0 2rem;text-align:center}.salessync-flow .canvas{margin:0 auto;max-width:1000px;padding:0 2rem 4rem;position:relative}.salessync-flow .flow{animation:fadeUp .45s ease;display:none}.salessync-flow .flow.visible{display:block}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.salessync-flow .spine{padding-left:52px;position:relative}.salessync-flow .spine:before{background:linear-gradient(to bottom,transparent,var(--border) 36px,var(--border) calc(100% - 36px),transparent);bottom:0;content:"";left:19px;position:absolute;top:0;width:2px}.salessync-flow .step-num{align-items:center;border-radius:6px;display:flex;font-size:.65rem;font-weight:700;height:24px;justify-content:center;left:-52px;letter-spacing:.03em;position:absolute;top:16px;width:40px;z-index:2}.salessync-flow .node.hs .step-num{background:rgba(255,122,89,.15);color:var(--hs-orange)}.salessync-flow .node.cw .step-num{background:rgba(46,140,230,.15);color:var(--cw-blue)}.salessync-flow .node.sync .step-num{background:var(--msp-green-dim);color:var(--msp-green)}.salessync-flow .node.duplex .step-num{background:var(--duplex-dim);color:var(--duplex)}.salessync-flow .node{margin-bottom:1.6rem;position:relative}.salessync-flow .node .dot{background:var(--bg);border:2px solid var(--border);border-radius:50%;height:10px;left:-52px;position:absolute;top:18px;transition:all .3s;width:10px;z-index:2}.salessync-flow .node:hover .dot{transform:scale(1.5)}.salessync-flow .node.hs .dot{border-color:var(--hs-orange);box-shadow:0 0 8px rgba(255,122,89,.25)}.salessync-flow .node.cw .dot{border-color:var(--cw-blue);box-shadow:0 0 8px rgba(46,140,230,.25)}.salessync-flow .node.sync .dot{border-color:var(--msp-green);box-shadow:0 0 8px var(--msp-green-glow)}.salessync-flow .node.duplex .dot{border-color:var(--duplex);box-shadow:0 0 8px rgba(124,92,250,.25)}.salessync-flow .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;padding:1.25rem 1.4rem;position:relative;transition:all .3s}.salessync-flow .card:before{border-radius:3px 0 0 3px;content:"";height:100%;left:0;position:absolute;top:0;width:3px}.salessync-flow .node.hs .card:before{background:var(--hs-orange)}.salessync-flow .node.cw .card:before{background:var(--cw-blue)}.salessync-flow .node.sync .card:before{background:var(--msp-green)}.salessync-flow .node.duplex .card:before{background:var(--duplex)}.salessync-flow .card:hover{border-color:var(--border-light);box-shadow:0 10px 24px rgba(20,40,70,.12);transform:translateX(3px)}.salessync-flow .card .label{align-items:center;display:flex;font-size:.67rem;font-weight:700;gap:.4rem;letter-spacing:.1em;margin-bottom:.4rem;text-transform:uppercase}.salessync-flow .node.hs .label{color:var(--hs-orange)}.salessync-flow .node.cw .label{color:var(--cw-blue)}.salessync-flow .node.sync .label{color:var(--msp-green)}.salessync-flow .node.duplex .label{color:var(--duplex)}.salessync-flow .card .label .icon{font-size:.8rem}.salessync-flow .card h3{font-size:.98rem;font-weight:700;line-height:1.3;margin-bottom:.3rem}.salessync-flow .card p{color:var(--text-dim);font-size:.84rem;line-height:1.55}.salessync-flow .card p strong{color:var(--text);font-weight:600}.salessync-flow .card p em{color:var(--msp-green);font-style:normal;font-weight:600}.salessync-flow .branch{display:flex;flex-wrap:wrap;gap:.6rem;margin:.7rem 0 0}.salessync-flow .branch-option{background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-dim);flex:1;font-size:.8rem;line-height:1.5;min-width:190px;padding:.85rem 1rem}.salessync-flow .branch-option .tag{display:block;font-size:.63rem;font-weight:700;letter-spacing:.08em;margin-bottom:.25rem;text-transform:uppercase}.salessync-flow .tag.match{color:var(--msp-green)}.salessync-flow .tag.no-match{color:var(--hs-orange)}.salessync-flow .pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}.salessync-flow .pill{border-radius:50px;font-size:.7rem;font-weight:600;padding:.25rem .65rem}.salessync-flow .pill.green{background:var(--msp-green-dim);border:1px solid rgba(59,186,126,.25);color:var(--msp-green)}.salessync-flow .pill.orange{background:var(--hs-orange-dim);border:1px solid rgba(255,122,89,.25);color:var(--hs-orange)}.salessync-flow .pill.blue{background:var(--cw-blue-dim);border:1px solid rgba(46,140,230,.25);color:var(--cw-blue)}.salessync-flow .pill.purple{background:var(--duplex-dim);border:1px solid rgba(124,92,250,.25);color:var(--duplex)}.salessync-flow .divider{align-items:center;display:flex;gap:.8rem;left:-52px;margin:2rem 0 1.5rem;position:relative;width:calc(100% + 52px)}.salessync-flow .divider span{background:var(--msp-green-dim);border:1px solid rgba(59,186,126,.2);border-radius:6px;color:var(--msp-green);font-size:.68rem;font-weight:700;letter-spacing:.14em;padding:.3rem .8rem;text-transform:uppercase;white-space:nowrap}.salessync-flow .divider:after{background:var(--border);content:"";flex:1;height:1px}.salessync-flow .stats-banner{margin:2.5rem auto 0;max-width:1000px;padding:0 2rem}.salessync-flow .stats-inner{background:var(--border);border:1px solid var(--border);border-radius:12px;display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));overflow:hidden}.salessync-flow .stat{background:var(--surface);padding:1.3rem 1.2rem;text-align:center}.salessync-flow .stat .num{color:var(--msp-green);font-size:1.8rem;font-weight:800;letter-spacing:-.03em}.salessync-flow .stat .num.purple{color:var(--duplex)}.salessync-flow .stat .num.blue{color:var(--cw-blue)}.salessync-flow .stat .desc{color:var(--text-dim);font-size:.74rem;font-weight:500;line-height:1.4;margin-top:.2rem}.salessync-flow .deal-highlight{margin:2rem auto 0;max-width:1000px;padding:0 2rem}.salessync-flow .deal-highlight-inner{align-items:flex-start;background:linear-gradient(135deg,rgba(59,186,126,.12),rgba(46,140,230,.08));border:1px solid rgba(59,186,126,.25);border-radius:12px;display:flex;gap:1rem;padding:1.5rem 1.8rem}.salessync-flow .deal-highlight-inner .icon-wrap{flex-shrink:0;font-size:1.6rem;margin-top:.1rem}.salessync-flow .deal-highlight-inner h3{font-size:1rem;font-weight:700;margin-bottom:.3rem}.salessync-flow .deal-highlight-inner p{color:var(--text-dim);font-size:.85rem;line-height:1.6}.salessync-flow .deal-highlight-inner p strong{color:var(--msp-green);font-weight:700}.salessync-flow .mappings-section{margin:2.5rem auto 0;max-width:1000px;padding:0 2rem}.salessync-flow .mappings-header{margin-bottom:1.5rem;text-align:center}.salessync-flow .mappings-header h2{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.4rem}.salessync-flow .mappings-header p{color:var(--text-dim);font-size:.88rem;line-height:1.5;margin:0 auto;max-width:600px}.salessync-flow .tab-bar{background:var(--surface);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;display:flex;gap:3px;margin-bottom:0;overflow-x:auto;padding:4px 4px 0}.salessync-flow .tab-bar button{background:transparent;border:none;border-radius:8px 8px 0 0;color:var(--text-dim);cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:600;padding:.6rem 1.1rem;transition:all .2s;white-space:nowrap}.salessync-flow .tab-bar button.active{background:var(--surface2);color:var(--msp-green)}.salessync-flow .tab-bar button:hover:not(.active){color:var(--text)}.salessync-flow .tab-bar button .count{background:var(--msp-green-dim);border-radius:50px;color:var(--msp-green);font-size:.65rem;font-weight:700;margin-left:.35rem;padding:.1rem .4rem}.salessync-flow .tab-panel{background:var(--surface);border-top:1px solid var(--border);border:1px solid var(--border);border-radius:0 0 10px 10px;border-top-color:var(--surface2);display:none;overflow:hidden}.salessync-flow .tab-panel.active{display:block}.salessync-flow .mapping-table{border-collapse:collapse;width:100%}.salessync-flow .mapping-table thead th{background:var(--surface2);border-bottom:1px solid var(--border);color:var(--text-dim);font-size:.67rem;font-weight:700;letter-spacing:.1em;padding:.7rem 1rem;text-align:left;text-transform:uppercase}.salessync-flow .mapping-table tbody tr{border-bottom:1px solid var(--border);transition:background .15s}.salessync-flow .mapping-table tbody tr:last-child{border-bottom:none}.salessync-flow .mapping-table tbody tr:hover{background:var(--surface2)}.salessync-flow .mapping-table td{color:var(--text-dim);font-size:.8rem;padding:.55rem 1rem}.salessync-flow .mapping-table td:first-child{color:var(--hs-orange);font-weight:600}.salessync-flow .mapping-table td:nth-child(3){color:var(--cw-blue);font-weight:600}.salessync-flow .mapping-table td .sot{border-radius:50px;display:inline-block;font-size:.63rem;font-weight:700;padding:.15rem .5rem}.salessync-flow .mapping-table td .sot.cw{background:var(--cw-blue-dim);color:var(--cw-blue)}.salessync-flow .mapping-table td .sot.duplex{background:var(--duplex-dim);color:var(--duplex)}@media(max-width:640px){.salessync-flow .stats-inner{grid-template-columns:repeat(2,1fr)}.salessync-flow .deal-highlight-inner{flex-direction:column}.salessync-flow .mapping-table td,.salessync-flow .mapping-table th{font-size:.74rem;padding:.45rem .6rem}.salessync-flow .tab-bar button{font-size:.7rem;padding:.5rem .7rem}}.salessync-flow .footer{border-top:1px solid var(--border);margin:0 auto;max-width:1000px;padding:1.5rem 2rem 2.5rem;text-align:center}.salessync-flow .footer p{color:var(--text-dim);font-size:.74rem}.salessync-flow .footer .msp-mark{color:var(--text);font-weight:700}.salessync-flow .footer .msp-mark .plus{color:var(--msp-green)}@media(max-width:640px){.salessync-flow .spine{padding-left:36px}.salessync-flow .spine:before{left:13px}.salessync-flow .node .dot{left:-36px}.salessync-flow .node .step-num{display:none}.salessync-flow .divider{left:-36px;width:calc(100% + 36px)}.salessync-flow .branch{flex-direction:column}.salessync-flow .card{padding:1rem 1.1rem}.salessync-flow .topbar{flex-direction:column;gap:.5rem;text-align:center}}