/* ============================================================
   Integrations Bar — bold logo panel (v2c only)
   NewLayoutC. Loaded in head.html for that variant.
   Replaces the v2-integrations card grid in v2c with one confident
   hairline-divided panel of large brand logos (Direction B3).
   Cells are transparent so the page's background gradient shows
   through; hairlines are drawn per-cell.
   NOTE: border rules are tuned for a row-filling count (10 → 5×2 /
   2×5). If the integration count changes to a non-multiple of the
   column count, revisit the nth-child / nth-last-child rules.
   ============================================================ */
.v2-integrations-bar{
  --ib-cyan:#74FFE2;
  --ib-ink:#f4f7ff; --ib-muted:rgba(210,223,250,.85); --ib-faint:#7e91ad;
  --ib-line:rgba(108,148,220,.2); --ib-line-soft:rgba(108,148,220,.12);
  --ib-ease:cubic-bezier(.22,.61,.36,1);
  padding:84px 0;
}

.v2-integrations-bar .ib-head{text-align:center;max-width:640px;margin:0 auto 38px}
.v2-integrations-bar .ib-head h2{
  display:block;                                  /* beat theme h2{display:inline-block} */
  font-size:clamp(1.75rem,3vw,2.4rem);font-weight:700;color:var(--ib-ink);
  margin:0 0 14px;letter-spacing:-.01em;
}
.v2-integrations-bar .ib-sub{color:var(--ib-muted);font-size:1.05rem;line-height:1.6;margin:0}

/* hairline-divided panel, transparent cells */
.v2-integrations-bar .ib-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--ib-line);border-radius:18px;overflow:hidden;
}
.v2-integrations-bar .ib-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:30px 12px;
  border-right:1px solid var(--ib-line-soft);border-bottom:1px solid var(--ib-line-soft);
  /* progress-bar wipe: same cyan tint, filled left→right on hover (brighter leading edge) */
  background-image:linear-gradient(90deg,rgba(116,255,226,.06),rgba(116,255,226,.11));
  background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .42s var(--ib-ease);
}
.v2-integrations-bar .ib-cell:hover{background-size:100% 100%}
.v2-integrations-bar .ib-cell:nth-child(5n){border-right:0}
.v2-integrations-bar .ib-cell:nth-last-child(-n+5){border-bottom:0}
.v2-integrations-bar .ib-cell__logo{display:flex;align-items:center;justify-content:center;height:42px}
.v2-integrations-bar .ib-cell__logo svg{width:42px!important;height:42px!important}
.v2-integrations-bar .ib-cell__name{font-size:.86rem;font-weight:600;color:#dfe9fb}

.v2-integrations-bar .ib-note{text-align:center;color:var(--ib-faint);font-size:.88rem;margin:22px 0 0}
.v2-integrations-bar .ib-note b{color:var(--ib-cyan);font-weight:600}
.v2-integrations-bar .ib-foot{text-align:center;margin-top:28px}

/* ── responsive: 2-col (10 → 2×5, still row-filling) ── */
@media(max-width:760px){
  .v2-integrations-bar .ib-grid{grid-template-columns:repeat(2,1fr)}
  .v2-integrations-bar .ib-cell{border-right:1px solid var(--ib-line-soft);border-bottom:1px solid var(--ib-line-soft)}
  .v2-integrations-bar .ib-cell:nth-child(5n){border-right:1px solid var(--ib-line-soft)}
  .v2-integrations-bar .ib-cell:nth-child(2n){border-right:0}
  .v2-integrations-bar .ib-cell:nth-last-child(-n+5){border-bottom:1px solid var(--ib-line-soft)}
  .v2-integrations-bar .ib-cell:nth-last-child(-n+2){border-bottom:0}
}