/* A quiet customer interlude between the living ontology and the product demo. */
.customer-strip{position:relative;z-index:4;padding:34px 0 21px;background:var(--bg);border-block:1px solid var(--line);overflow:hidden}
.customer-strip-heading{padding-inline:var(--gutter);text-align:center;margin-bottom:20px}
.customer-strip h2{font-size:15px;font-weight:600;line-height:1.6;letter-spacing:0}
.customer-strip h2 strong{font-weight:800;color:var(--red)}
.customer-strip-heading>p{margin:6px auto 0;max-width:65ch;font-size:11px;line-height:1.7;color:var(--muted)}
.customer-lanes{display:flex;flex-direction:column;gap:6px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.customer-lane{overflow:hidden;min-width:0}
.customer-track{display:flex;width:max-content;animation:customer-drift 112s linear infinite;animation-play-state:paused}
.customer-lane:nth-child(2) .customer-track{animation-direction:reverse;animation-duration:124s}
.customer-group{display:flex;align-items:center;justify-content:space-around;gap:54px;min-width:100vw;list-style:none;margin:0;padding:0 54px 0 0;flex-shrink:0}
.customer-logo{display:grid;place-items:center;width:158px;height:67px;flex-shrink:0;margin:0}
.customer-logo svg{display:block;width:var(--logo-width,148px);max-width:100%;height:42px;overflow:hidden;filter:grayscale(1) brightness(.69);opacity:.83}
.customer-strip[data-running=true] .customer-track{animation-play-state:running}
.customer-strip-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:14px var(--gutter) 0;font-size:10px;line-height:1.7;color:var(--muted)}
.customer-strip-foot>a{display:inline-flex;align-items:center;gap:11px;min-height:40px}
.customer-strip-foot>a:hover{color:var(--red)}
.customer-controls{display:flex;align-items:center;gap:22px}
.customer-controls button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;font-size:10px;padding:5px 0;min-height:40px;color:var(--muted)}
.customer-controls button:hover{color:var(--ink)}
.customer-controls button:disabled{cursor:default;opacity:.6}
.customer-pause-icon{display:block}.customer-play-icon{display:none}
.customer-strip[data-locally-paused=true] .customer-pause-icon{display:none}
.customer-strip[data-locally-paused=true] .customer-play-icon{display:block}
.customer-controls svg{flex-shrink:0}
@keyframes customer-drift{to{transform:translateX(-50%)}}
@media(hover:hover){.customer-lanes:hover .customer-track{animation-play-state:paused}.customer-logo:hover svg{opacity:1}}
/* Every customer stays available when movement is disabled or the list is open. */
.customer-strip:is([data-expanded=true],[data-reduced=true]) .customer-lanes,
html:not(.js) .customer-lanes{mask-image:none;gap:0;padding-inline:var(--gutter)}
.customer-strip:is([data-expanded=true],[data-reduced=true]) .customer-track,
html:not(.js) .customer-track{width:100%;animation:none;transform:none}
.customer-strip:is([data-expanded=true],[data-reduced=true]) .customer-group,
html:not(.js) .customer-group{display:flex;flex-wrap:wrap;justify-content:center;width:100%;min-width:0;padding:0;gap:12px 30px}
.customer-strip:is([data-expanded=true],[data-reduced=true]) [data-customer-clone],
html:not(.js) [data-customer-clone]{display:none}
html:not(.js) .customer-controls{display:none}
@media(max-width:760px){
  .customer-strip{padding-block:28px 16px}
  .customer-strip h2{font-size:14px}
  .customer-strip-heading>p{font-size:10px;max-width:38ch}
  .customer-lanes{gap:0;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .customer-group{gap:33px;padding-right:33px}
  .customer-logo{width:132px;height:59px}
  .customer-logo svg{width:min(var(--logo-width,148px),124px);max-width:100%;height:34px}
  .customer-strip-foot{margin-top:12px;gap:8px;flex-wrap:wrap;justify-content:center;text-align:center}
  .customer-controls{gap:22px}
  .customer-strip:is([data-expanded=true],[data-reduced=true]) .customer-group{gap:8px 20px}
  .customer-strip:is([data-expanded=true],[data-reduced=true]) .customer-logo,
  html:not(.js) .customer-logo{width:calc((100% - 20px)/2);max-width:132px}
}
@media(prefers-reduced-motion:reduce){
  .customer-lanes{mask-image:none;gap:0;padding-inline:var(--gutter)}
  .customer-track{width:100%;animation:none!important;transform:none}
  .customer-group{flex-wrap:wrap;justify-content:center;width:100%;min-width:0;gap:12px 24px;padding:0}
  [data-customer-clone]{display:none}
}