/* DecoyStar integrations strip (rev. 12 Oct 2026). One continuous row scrolling
   right→left, pause on hover. Brand-coloured logos. Light/dark via tokens.
   Reduced-motion: no scroll, the row becomes horizontally scrollable. */
.ig{
  --ig-card-bg:#ffffff; --ig-card-border:#dcebf3; --ig-name:#1d3a4e;
  --ig-shadow:0 4px 16px #0a3b5312; --ig-fade:#f3fafe;
  margin-top:28px;
}
:root:not([data-theme="light"]) .ig, :root[data-theme="dark"] .ig{
  --ig-card-bg:#07273a; --ig-card-border:#1d4a60; --ig-name:#dceaf2;
  --ig-shadow:0 6px 20px #00111d55; --ig-fade:#031b2d;
}

.ig-row{position:relative;overflow:hidden}
.ig-row::before,.ig-row::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.ig-row::before{left:0;background:linear-gradient(90deg,var(--ig-fade),transparent)}
.ig-row::after{right:0;background:linear-gradient(270deg,var(--ig-fade),transparent)}
.ig-track{display:flex;gap:14px;width:max-content;will-change:transform;animation:ig-scroll 60s linear infinite}
.ig-row:hover .ig-track{animation-play-state:paused}
@keyframes ig-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ig-card{display:flex;align-items:center;gap:11px;flex:none;padding:13px 20px;border:1px solid var(--ig-card-border);border-radius:12px;background:var(--ig-card-bg);box-shadow:var(--ig-shadow);transition:transform .25s,border-color .25s,box-shadow .25s}
.ig-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 24%,transparent)}
.ig-logo{display:grid;place-items:center;flex:none}
.ig-glyph{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ig-name{font-size:13px;font-weight:600;color:var(--ig-name);white-space:nowrap;line-height:1}
.ig-badge{margin-left:2px;font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#0b7a86;background:#d6f4f7;border:1px solid #9fe2e8;border-radius:20px;padding:2px 7px}

.ig-footnote{text-align:center;margin-top:26px;font-size:13px;color:#5b7c90}
:root:not([data-theme="light"]) .ig-footnote,:root[data-theme="dark"] .ig-footnote{color:#8fb1c3}

@media(max-width:800px){
  .ig-track{animation-duration:44s}
  .ig-name{font-size:12px}
  .ig-card{padding:11px 15px;gap:9px}
  .ig-row::before,.ig-row::after{width:40px}
}

/* Reduced motion: stop the scroll, let the user swipe the row instead. */
@media(prefers-reduced-motion:reduce){
  .ig-track{animation:none;width:auto}
  .ig-row{overflow-x:auto}
  .ig-card[aria-hidden="true"]{display:none}
  .ig-card{transition:none}
}