/* MuchCast / Platform carousel. Original local implementation of the
   continuous 8-brand strip shown in the user-supplied reference. */
.mc-platforms-section#devices {
  --mc-brand-gap: clamp(28px, 3.2vw, 70px);
  --mc-brand-width: clamp(120px, 11.5vw, 175px);
  position: relative;
  background: linear-gradient(118deg, #17212b 0%, #292336 48%, #1b2831 100%);
  color: #f8f8f8;
  padding: clamp(46px, 5vw, 68px) 0 34px;
  overflow: hidden;
  isolation: isolate;
}
.mc-platforms-section#devices::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background: radial-gradient(ellipse 42% 120% at 52% 50%, rgba(220, 80, 70, .16), transparent 77%),
              linear-gradient(90deg, transparent 0, rgba(255,255,255,.025) 50%, transparent 100%);
  z-index: -1;
}
.mc-platforms-section .mc-platform-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}
.mc-platforms-section .mc-platform-heading h2 {
  color: #f7f7f3;
  margin: 9px 0 0;
  font-weight: 720;
  font-size: clamp(1.75rem, 2.7vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -.028em;
}
.mc-platforms-section .mc-platform-heading h2 span {color: #ff9282;}
.mc-platforms-section .mc-platform-eyebrow {
  color: #f28b7c;
  font-weight: 850;
  font-size: .69rem;
  letter-spacing: .15em;
}
.mc-platforms-section .mc-platform-toggle {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 10px 17px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.22);
  color: #f7f7f3;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 780;
  white-space: nowrap;
}
.mc-platforms-section .mc-platform-toggle:hover,
.mc-platforms-section .mc-platform-toggle:focus-visible {
  border-color: #ffa495;
  background: rgba(255,255,255,.1);
}
.mc-platforms-section .mc-platform-toggle:focus-visible,
.mc-platforms-section .mc-platform-viewport:focus-visible {
  outline: 3px solid #ffa495;
  outline-offset: 5px;
}
.mc-platform-toggle-icon {
  display: inline-block;
  width: 12px;
  height: 15px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.mc-platform-toggle[aria-pressed="true"] .mc-platform-toggle-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
  border-right: 0;
}
.mc-platforms-section .mc-platform-viewport {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(110px, 10.6vw, 150px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.mc-platforms-section .mc-platform-viewport.is-dragging {cursor: grabbing;}
.mc-platforms-section .mc-platform-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
  transform: translate3d(0px, 0px, 0px);
}
.mc-platforms-section .mc-platform-set {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  gap: var(--mc-brand-gap);
  padding-right: var(--mc-brand-gap);
  flex: none;
}
.mc-platforms-section .mc-platform-item {
  width: var(--mc-brand-width);
  height: 100%;
  flex: none;
  display: grid;
  place-items: center;
}
.mc-platforms-section .mc-platform-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.02));
}
.mc-platforms-section .mc-platform-bottom {
  display: grid;
  gap: 9px;
  margin-top: 7px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.mc-platforms-section .mc-platform-bottom p {
  margin: 0;
  font-size: .83rem;
  line-height: 1.6;
  color: #cdd6dc;
}
.mc-platforms-section .mc-platform-bottom a {
  color: #ffc2b7;
  font-weight: 780;
  text-decoration: underline;
  text-decoration-color: rgba(255,194,183,.5);
  text-underline-offset: 4px;
}
.mc-platforms-section .mc-platform-bottom a:hover {color: #fff;}
.mc-platforms-section .mc-platform-bottom .mc-platform-disclaimer {
  font-size: .70rem;
  color: #9eaeb8;
  max-width: 1100px;
}
/* Consistent in both light and dark MuchCast themes: white logos on dark band. */
html[data-theme="dark"] .mc-platforms-section#devices {
  background: linear-gradient(118deg, #101923 0%, #231e2d 49%, #11212a 100%);
}
@media (max-width: 740px) {
  .mc-platforms-section#devices {padding: 42px 0 29px; --mc-brand-gap: 27px; --mc-brand-width: 124px;}
  .mc-platforms-section .mc-platform-heading {align-items: start;flex-direction: column;gap:15px;margin-bottom: 10px;}
  .mc-platforms-section .mc-platform-heading h2 {font-size: clamp(1.62rem, 5vw, 2.05rem);}
  .mc-platforms-section .mc-platform-viewport {height: 112px;}
  .mc-platforms-section .mc-platform-item img {max-height: 59px;}
  .mc-platforms-section .mc-platform-bottom p {font-size: .8rem;}
}
@media (prefers-reduced-motion: reduce) {
  .mc-platforms-section .mc-platform-track {will-change:auto;}
}