/* Transparent logo ribbons. Pause on hover/focus and respect reduced motion. */
.integrations-showcase { padding: 0; max-width: 1120px; margin: 76px auto 0; scroll-margin-top: 100px; text-align: center; }
.integrations-intro { margin-bottom: 38px; }
.integrations-intro h2 { color: #fff; font-size: clamp(27px, 3vw, 38px); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
.integrations-intro h2 .grad { background: linear-gradient(110deg,#7faaff,#bc9aff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-ribbon { position: relative; overflow: hidden; padding: 8px 0; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; width: max-content; animation: logos-right 35s linear infinite; }
.logo-group { display: flex; flex-shrink: 0; align-items: center; gap: 66px; padding-right: 66px; }
.integration-logo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 9px; height: 50px; color: #e7e7ed; opacity: .75; text-decoration: none; transition: opacity .2s; }
.integration-logo:hover { opacity: 1; }
.integration-logo:focus-visible { outline: 2px solid #b9b6ff; outline-offset: 5px; }
.integration-logo img { display: block; object-fit: contain; filter: brightness(0) invert(1); }
.platform-logo-brand { display: flex; align-items: center; gap: 8px; }
.platform-logo-brand img { width: 30px; height: 32px; }
.platform-logo-brand strong { font-size: 23px; font-weight: 600; letter-spacing: -.055em; }
.platform-logo-brand img.full-platform-logo { width: 145px; height: 36px; }
.platform-logo-brand img.woo-logo { width: 121px; height: 36px; }
.platform-logo-brand img.wix-logo { width: 76px; height: 52px; }
.integration-production { margin-top: 30px; }
.integration-label { margin: 0 0 15px; color: #777782; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.partner-ribbon .logo-track { animation-duration: 65s; }
.partner-ribbon .logo-group { gap: 55px; padding-right: 55px; }
.partner-logo img { width: 124px; height: 31px; }
.partner-logo.with-name img { width: 27px; height: 29px; }
.partner-logo.with-name strong { font-size: 22px; font-weight: 600; letter-spacing: -.045em; }
.partner-logo img.square-logo { width: 80px; height: 66px; filter: url(#logo-light-ink); }
.partner-logo img[src$="teelaunch.png"] { filter: url(#logo-light-ink); }
.partner-logo img[src$="printify.png"] { filter: url(#logo-dark-ink); }
.logo-ribbon:hover .logo-track, .logo-ribbon:focus-within .logo-track { animation-play-state: paused; }
.logo-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes logos-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 700px) { .integrations-showcase { margin-top: 46px; } .integrations-intro { margin-bottom: 25px; } .integrations-intro h2 { font-size: 28px; } .logo-group { gap: 42px; padding-right: 42px; } .platform-logo-brand strong { font-size: 20px; } .platform-logo-brand img.full-platform-logo { width: 125px; } .integration-production { margin-top: 23px; } .partner-ribbon .logo-group { gap: 40px; padding-right: 40px; } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; transform: none; width: 100%; } .logo-group { width: 100%; flex-wrap: wrap; justify-content: center; gap: 20px 35px; padding: 0; } .logo-group[aria-hidden="true"] { display: none; } .logo-ribbon { mask-image: none; -webkit-mask-image: none; } }

.platform-ribbon .logo-group { min-width: 1120px; justify-content: space-around; }

.platform-availability { margin: 0 auto; max-width: 620px; color: #92929e; font-size: 12px; font-weight: 400; line-height: 1.7; letter-spacing: 0; }
.integrations-intro { margin-bottom: 24px; }