/* =========================================================================
   rp-integrations — component styles ("Sync & Do more with Integrations")
   Scope: .rp-kintegrations. Section bg via Kadence attribute. The logo cards
   keep their global migration.css styling (.int-item / .swiper-integration-slider).
   ========================================================================= */
.rp-kintegrations .rp-int-h2 {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #0F1035; margin: 0 0 12px;
}
.rp-kintegrations .rp-int-h2 .highlight-it-blue { color: #114EF7; }
.rp-kintegrations .rp-int-sub {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px; line-height: 28px; font-weight: 400; color: #2A2A2A; margin: 0 0 16px; max-width: 511px;
}
.rp-kintegrations .rp-int-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px; line-height: 30px; font-weight: 600; letter-spacing: -0.6px;
  color: #114EF7; text-decoration: none;
}
.rp-kintegrations .rp-int-link::after { content: "›"; font-size: 24px; line-height: 1; }

/* QA: integrations vs Builder export "Frame 34327" */
/* "See all integrations" link was 13/400 #08080D -> Mulish 20/30/600 #114EF7 ls-0.6 + chevron */
.rp-kintegrations .rp-int-link,
.rp-kintegrations .rp-int-link span {
  font-family: Mulish, -apple-system, sans-serif !important;
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.6px !important;
  color: #114EF7 !important;
}
/* card bg was #F5F7FA -> brand periwinkle #F0F4FE (--Primary-20) */
.rp-kintegrations .int-item.light-gra-bg { background-color: #F0F4FE !important; }

/* FIX (2026-06-03): single-row continuous carousel.
   The Webflow class `.integ-ration-grid.mt4.swiper-wrapper` (migration.css:2697)
   forces `display:grid` with 8–10 columns onto the swiper wrapper. That overrode
   Swiper's flex layout — slides wrapped into TWO rows (grid-template-rows:265px 265px)
   and Swiper failed to build loop clones (realSlides stayed 12), so the loop "ran out"
   and showed ~3 at the end. Forcing flex lets Swiper own a single row + clone for a
   seamless loop. `!important` beats the (non-important) Webflow grid rule at any load order. */
.swiper-integration-slider .swiper-wrapper { display: flex !important; }

/* =========================================================================
   Spend Cards instantiation (2026-06-28) — RTL mirror of the raw/centered variant.
   The centered heading block is symmetric, so it needs no flip; only the
   "See all integrations" chevron is reversed to point left in RTL.
   ========================================================================= */
.rp-kintegrations--raw { background-color: #ffffff; }
.rp-kintegrations--raw .rp-kint-inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.rp-kintegrations--center .rp-kint-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto 40px; }
.rp-kintegrations--center .rp-int-h2  { text-align: center; margin: 0 0 16px; }
.rp-kintegrations--center .rp-int-sub { text-align: center; margin: 0 0 20px; }
.rp-kintegrations--center .rp-int-link { margin: 0; }
/* RTL: chevron points left, after the (right-to-left) link text. */
.rp-kintegrations .rp-int-link::after { content: "\2039"; }

/* .rp-spend-integrations uses a 24px ArrowRight SVG (not the chevron char) — re-clear the
   char the generic RTL rule above re-asserts, and mirror the glyph to point left in RTL. */
.rp-spend-integrations .rp-int-link::after { content: ""; transform: scaleX(-1); }
/* Heading navy #021143 (Figma frame scope): re-assert it here, because the base
   `.rp-kintegrations .rp-int-h2{color:#0F1035}` rule (copied into this RTL sheet, loaded
   last) otherwise beats the frame-scope at equal specificity on /ar/spend. */
.rp-spend-integrations .rp-int-h2 { color: #021143; }
/* See-all link gap 8 (Figma): same re-assert — the copied base `.rp-kintegrations
   .rp-int-link{gap:6px}` (loaded last in this RTL sheet) otherwise beats the frame-scope
   gap:8 at equal specificity on /ar/spend (measured 6px before this fix). */
.rp-spend-integrations .rp-int-link { gap: 8px; }