/* An open ecosystem, with native horizontal browsing as the default. */
.wf-ecosystem{padding:105px 0 130px;overflow:hidden}
.wf-ecosystem-heading{text-align:center;padding:0 24px}
.wf-ecosystem-heading h2{font-size:clamp(62px,6.4vw,94px);font-weight:550;line-height:1.01;letter-spacing:-.055em;margin:0}
.wf-ecosystem-heading h2 em{font-style:normal;color:var(--primary)}
.wf-ecosystem-heading p{font-size:24px;line-height:1.4;color:var(--muted);margin:26px 0 0;letter-spacing:-.015em}
.wf-logo-wall{position:relative;display:grid;gap:20px;margin:75px auto 0;max-width:2200px}
.wf-logo-row{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior-x:contain;padding:7px 0 20px;outline-offset:-3px}
.wf-logo-row:focus-visible{outline:2px solid var(--primary);border-radius:5px}
.wf-logo-track{display:flex;width:max-content;transform:translateX(0)}
.wf-logo-group{display:flex;gap:20px;list-style:none;padding:0 20px 0 0;margin:0;flex:none}
.wf-logo-tile{display:flex;align-items:center;gap:18px;flex:none;width:224px;height:110px;padding:22px;background:var(--paper);border:1px solid color-mix(in srgb,var(--primary) 16%,var(--paper));border-radius:22px;box-shadow:0 8px 17px -12px color-mix(in srgb,var(--primary) 38%,transparent);color:var(--ink)}
.wf-logo-tile>span:last-child{font-size:21px;font-weight:550;line-height:1.18;letter-spacing:-.035em}
.wf-logo-mark{display:grid;place-items:center;flex:none;width:51px;height:51px}
.wf-logo-mark img{display:block;width:46px;height:46px;object-fit:contain;border-radius:8px}
.wf-logo-tile[data-tool=hubspot],.wf-logo-tile[data-tool=calendly],.wf-logo-tile[data-tool=notion],.wf-logo-tile[data-tool=clickup],.wf-logo-tile[data-tool=dropbox],.wf-logo-tile[data-tool=googleforms]{background:color-mix(in srgb,var(--primary) 6%,var(--paper))}
.wf-logo-tile[data-tool=slack],.wf-logo-tile[data-tool=typeform],.wf-logo-tile[data-tool=pandadoc],.wf-logo-tile[data-tool=teams]{background:color-mix(in srgb,var(--rose) 7%,var(--paper));border-color:color-mix(in srgb,var(--rose) 18%,var(--paper))}
.wf-logo-tile[data-tool=monday],.wf-logo-tile[data-tool=airtable],.wf-logo-tile[data-tool=tally],.wf-logo-tile[data-tool=zoho]{background:color-mix(in srgb,var(--citrus) 11%,var(--paper));border-color:color-mix(in srgb,var(--citrus) 30%,var(--paper))}
.wf-logo-tile[data-tool=googledrive],.wf-logo-tile[data-tool=quickbooks],.wf-logo-tile[data-tool=asana],.wf-logo-tile[data-tool=googlesheets]{background:color-mix(in srgb,var(--green) 9%,var(--paper));border-color:color-mix(in srgb,var(--green) 23%,var(--paper))}
.wf-logo-duplicate{display:none}
.wf-ecosystem.is-animated .wf-logo-row{overflow:hidden;mask-image:linear-gradient(to right,transparent,var(--ink) 6%,var(--ink) 94%,transparent)}
.wf-ecosystem.is-animated .wf-logo-duplicate{display:flex}
.wf-ecosystem.is-animated .wf-logo-track{animation:wf-logo-drift 105s linear infinite;animation-delay:-14s;will-change:transform}
.wf-ecosystem.is-animated .wf-logo-row:nth-of-type(2) .wf-logo-track{animation-duration:118s;animation-direction:reverse;animation-delay:-39s}
.wf-ecosystem.is-animated .wf-logo-row:nth-of-type(3) .wf-logo-track{animation-duration:110s;animation-delay:-26s}
@keyframes wf-logo-drift{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--wf-loop-width,1952px)))}}
.wf-ecosystem.is-offscreen .wf-logo-track,.wf-ecosystem.is-paused .wf-logo-track,.wf-ecosystem:focus-within .wf-logo-track{animation-play-state:paused}
/* Keyboard inspection exposes each unique list, never an inaccessible moving clone. */
.wf-ecosystem.is-inspecting .wf-logo-row{overflow-x:auto;mask-image:none}
.wf-ecosystem.is-inspecting .wf-logo-track{animation:none;transform:none;will-change:auto}
.wf-ecosystem.is-inspecting .wf-logo-duplicate{display:none}
.wf-logo-motion{position:absolute;right:max(24px,calc((100% - 1344px)/2));top:-55px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);transition:color .2s,background .2s}
.wf-logo-motion[hidden]{display:none}.wf-logo-motion:hover{background:color-mix(in srgb,var(--primary) 7%,var(--paper));color:var(--action)}
.wf-logo-motion svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-logo-motion .wf-logo-play{display:none}.wf-logo-motion[aria-pressed=true] .wf-logo-pause{display:none}.wf-logo-motion[aria-pressed=true] .wf-logo-play{display:block}
@media(max-width:1100px){.wf-ecosystem{padding:85px 0 105px}.wf-ecosystem-heading h2{font-size:clamp(60px,7.5vw,80px)}.wf-logo-wall{margin-top:65px;gap:17px}.wf-logo-tile{width:207px;height:103px;padding:20px;gap:15px}.wf-logo-tile>span:last-child{font-size:19px}}
@media(max-width:760px),(pointer:coarse){.wf-logo-row{padding-left:22px;padding-right:22px;scroll-snap-type:x proximity;scrollbar-width:none}.wf-logo-tile{scroll-snap-align:center}.wf-logo-row:nth-of-type(2){padding-left:58px}.wf-logo-row:nth-of-type(3){padding-left:36px}}
@media(max-width:760px){.wf-ecosystem{padding:70px 0 85px}.wf-ecosystem-heading h2{font-size:clamp(49px,10.5vw,72px)}.wf-ecosystem-heading p{font-size:20px;margin-top:22px}.wf-logo-wall{margin-top:46px;gap:9px}.wf-logo-group{gap:12px;padding-right:12px}.wf-logo-tile{width:172px;height:96px;gap:12px;padding:17px;border-radius:18px}.wf-logo-tile>span:last-child{font-size:17px}.wf-logo-mark{width:40px;height:40px}.wf-logo-mark img{width:37px;height:37px}}
@media(prefers-reduced-motion:reduce){.wf-logo-track{animation:none!important;transform:none!important;will-change:auto!important}.wf-logo-row{mask-image:none!important;overflow-x:auto!important}.wf-logo-duplicate,.wf-logo-motion{display:none!important}}

/* Each app keeps its own highlight while the wall continues moving. */
.wf-logo-tile{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
.wf-logo-tile[data-tool=hubspot]{--wf-tile-accent:#FF7A59}
.wf-logo-tile[data-tool=pipedrive]{--wf-tile-accent:#4D8CFA}
.wf-logo-tile[data-tool=slack]{--wf-tile-accent:#D94D91}
.wf-logo-tile[data-tool=monday]{--wf-tile-accent:#FFBE26}
.wf-logo-tile[data-tool=googledrive]{--wf-tile-accent:#76C961}
.wf-logo-tile[data-tool=stripe]{--wf-tile-accent:#6863F6}
.wf-logo-tile[data-tool=typeform]{--wf-tile-accent:#F04C78}
.wf-logo-tile[data-tool=calendly]{--wf-tile-accent:#4285F4}
.wf-logo-tile[data-tool=notion]{--wf-tile-accent:#A5A0F5}
.wf-logo-tile[data-tool=salesforce]{--wf-tile-accent:#24B4EF}
.wf-logo-tile[data-tool=gmail]{--wf-tile-accent:#EF6257}
.wf-logo-tile[data-tool=airtable]{--wf-tile-accent:#FFBE26}
.wf-logo-tile[data-tool=pandadoc]{--wf-tile-accent:#76C961}
.wf-logo-tile[data-tool=clickup]{--wf-tile-accent:#B475F3}
.wf-logo-tile[data-tool=quickbooks]{--wf-tile-accent:#64BD64}
.wf-logo-tile[data-tool=tally]{--wf-tile-accent:#FFBE26}
.wf-logo-tile[data-tool=asana]{--wf-tile-accent:#F46B83}
.wf-logo-tile[data-tool=teams]{--wf-tile-accent:#8C83ED}
.wf-logo-tile[data-tool=zoho]{--wf-tile-accent:#EF6257}
.wf-logo-tile[data-tool=googlesheets]{--wf-tile-accent:#62BC88}
.wf-logo-tile[data-tool=dropbox]{--wf-tile-accent:#4D8CFA}
.wf-logo-tile[data-tool=outlook]{--wf-tile-accent:#48A8ED}
.wf-logo-tile[data-tool=xero]{--wf-tile-accent:#39B5D9}
.wf-logo-tile[data-tool=googleforms]{--wf-tile-accent:#A57ADB}
@media(hover:hover) and (pointer:fine){.wf-logo-tile:hover{background:color-mix(in srgb,var(--wf-tile-accent,var(--primary)) 36%,var(--paper));border-color:var(--wf-tile-accent,var(--primary));box-shadow:0 8px 18px -10px color-mix(in srgb,var(--wf-tile-accent,var(--primary)) 65%,transparent)}}