/* Platforms marquee — match app .platforms / .platform-marquee */
#cm-platforms,
.cm-platforms {
  padding: 32px 0 36px !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(16,20,24,.12) !important;
  overflow: hidden !important;
  flex-direction: column !important;
}
#cm-platforms-copy,
.cm-platforms-copy {
  width: 100% !important;
  max-width: none !important;
  padding: 0 var(--cm-pad-x, max(24px, calc((100vw - 1240px) / 2))) 22px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px !important;
}
#cm-platforms-copy > .e-con,
#cm-platforms-copy > .elementor-element {
  width: auto !important;
  max-width: none !important;
}
.cm-platforms-eyebrow,
.cm-platforms-eyebrow p {
  margin: 0 !important;
  color: #6F6E69 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}
.cm-platforms-heading .elementor-heading-title,
.cm-platforms-heading {
  margin: 0 !important;
  max-width: 520px !important;
  color: #000F23 !important;
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 19px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}
#cm-platform-marquee,
.cm-platform-marquee {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  display: block !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Elementor e-con-full + flex-shrink was crushing the track to viewport width,
   so fixed 190px chips overlapped across the two marquee groups. */
#cm-platform-track,
.cm-platform-track,
.elementor-element.cm-platform-track {
  --width: max-content !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  animation: cmPlatformScroll 18s linear infinite;
  will-change: transform;
}
#cm-platform-marquee:hover #cm-platform-track,
.cm-platform-marquee:hover .cm-platform-track {
  animation-play-state: paused;
}
.cm-platform-group,
.elementor-element.cm-platform-group {
  --width: max-content !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 18px !important;
  padding-right: 18px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}
.cm-platform-chip,
.elementor-element.cm-platform-chip {
  --width: 190px !important;
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  flex: 0 0 190px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: 74px !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  background: #F7F3E8 !important;
  color: #000F23 !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 1 !important;
  overflow: hidden !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.cm-platform-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,15,35,.08);
}
.cm-platform-snapchat {
  background: #FFFC00 !important;
}
.cm-platform-card-content,
.cm-platform-card-content .elementor-widget-container,
.cm-platform-card-content p,
.cm-platform-logo-inner {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  width: 100% !important;
}
.cm-platform-logo-inner svg {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
  display: block !important;
}
.cm-platform-logo-inner strong,
.cm-platform-card-content strong {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 16px !important;
  font-weight: 760 !important;
  color: #000F23 !important;
  line-height: 1 !important;
}
.cm-platform-meta svg { color: #0081FB !important; }
.cm-platform-instagram svg { color: #E4405F !important; }
.cm-platform-tiktok svg { color: #111111 !important; }
.cm-platform-pinterest svg { color: #BD081C !important; }
.cm-platform-snapchat svg { color: #000000 !important; }
.cm-platform-linkedin svg { color: #0A66C2 !important; }

@keyframes cmPlatformScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #cm-platform-track, .cm-platform-track {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 1050px) {
  #cm-platforms-copy, .cm-platforms-copy {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-inline: 20px !important;
  }
  .cm-platforms-heading .elementor-heading-title,
  .cm-platforms-heading {
    text-align: left !important;
    max-width: 340px !important;
    font-size: 17px !important;
  }
  .cm-platform-chip,
  .elementor-element.cm-platform-chip {
    --width: 158px !important;
    width: 158px !important;
    min-width: 158px !important;
    max-width: 158px !important;
    flex: 0 0 158px !important;
    min-height: 64px !important;
    padding: 13px 16px !important;
  }
  .cm-platform-logo-inner svg { width: 26px !important; height: 26px !important; }
  .cm-platform-logo-inner strong { font-size: 14px !important; }
  #cm-platform-track, .cm-platform-track {
    animation-duration: 40s !important;
  }
}