/* integrations.css — 100% scoped to <srs-integrations> .srs-integrations */

srs-integrations{ display:block; }

.srs-integrations{
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --title: #0b1220;
  --muted: #3b4a66;
  --line: #e8ecf4;
  --card: #fff;

  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-1: 0 10px 26px rgba(15,37,96,.08);
  --shadow-2: 0 22px 44px rgba(15,37,96,.10);

  --pad-y: clamp(22px, 5.8vh, 40px);
  --pad-x: clamp(14px, 2.6vw, 22px);

  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --grid-gap: 12px;
  --card-pad: 12px;

  width: 100%;
  margin: 0;
  padding-block: 28px;

  color: var(--title);
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

.srs-integrations :where(*, *::before, *::after){ box-sizing: border-box; }

.srs-integrations .srs-integrations__wrap{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(140deg, rgba(124,58,237,.06), rgba(236,72,153,.06) 35%, rgba(245,158,11,.07) 70%, rgba(16,185,129,.07)),
    radial-gradient(700px 280px at 12% 0%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(600px 260px at 100% 18%, rgba(16,185,129,.08), transparent 60%),
    #fff;

  box-shadow: var(--shadow-1);
}

.srs-integrations .srs-integrations__container{
  width: 100%;
  max-width: 1100px;
  min-width: 0;
  margin-inline: auto;

  padding: var(--pad-y) calc(var(--pad-x) + var(--safe-l))
           var(--pad-y) calc(var(--pad-x) + var(--safe-r));
}

.srs-integrations .srs-integrations__header{ margin: 0 0 14px; }

.srs-integrations .srs-integrations__title{
  margin: 0;
  font-size: clamp(22px, 4.2vw, 30px);
  font-weight: 900;
  letter-spacing: .01em;

  background: linear-gradient(100deg, #7c3aed, #60a5fa 35%, #22d3ee 70%, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.srs-integrations .srs-integrations__subtitle{
  margin: 4px 0 0;
  font-size: clamp(13px, 2vw, 15px);
  color: var(--muted);
}

.srs-integrations .srs-integrations__grid{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.srs-integrations .srs-integrations__card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  box-shadow: 0 10px 24px rgba(15,37,96,.06);

  min-width: 0;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .srs-integrations .srs-integrations__card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: rgba(124,58,237,.22);
  }
}

.srs-integrations .srs-integrations__row{
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: baseline;
  margin: 0 0 8px;
}

.srs-integrations .srs-integrations__ic{
  width: 36px;
  height: 36px;
  border-radius: 10px;

  display: grid;
  place-items: center;

  font-size: 18px;
  font-weight: 900;
  color: var(--title);
  background: #fff;
  border: 1px solid var(--line);

  align-self: start;
  margin-top: 2px;
  position: relative;
}

.srs-integrations .srs-integrations__ic::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--tint), transparent 65%);
}

.srs-integrations .srs-integrations__name{
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.25;
  min-width: 0;
}

.srs-integrations .srs-integrations__note{
  justify-self: end;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 800;
  color: #4b5563;
  padding-top: 2px;

  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srs-integrations .srs-integrations__meta{
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}

.srs-integrations .srs-integrations__chips{
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.srs-integrations .srs-integrations__chip{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f2247;
}

/* Accent tints (drives the icon overlay) */
.srs-integrations .srs-integrations__card--primary{ --tint: rgba(124,58,237,.18); }
.srs-integrations .srs-integrations__card--violet{ --tint: rgba(139,92,246,.18); }
.srs-integrations .srs-integrations__card--blue{ --tint: rgba(96,165,250,.18); }
.srs-integrations .srs-integrations__card--teal{ --tint: rgba(34,211,238,.18); }

@media (max-width: 420px){
  .srs-integrations{ padding-block: 20px; }
  .srs-integrations .srs-integrations__grid{ grid-template-columns: 1fr; }
  .srs-integrations .srs-integrations__container{ padding-inline: calc(18px + var(--safe-l)) calc(18px + var(--safe-r)); }
}

@media (prefers-reduced-motion: reduce){
  .srs-integrations .srs-integrations__card{ transition: none !important; }
}