/* =========================================================================
   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; }
/* B-S9: on mobile this heading shipped at the desktop 40/48 while every sibling
   Spend section heading is the shared 28/36 — match that scale so it stops
   wrapping to 4 oversized lines. */
@media (max-width: 767px) {
  .rp-kintegrations .rp-int-h2 { font-size: 28px; line-height: 36px; }
}

/* ── #Made-for-every-workflow — surgical pass 2026-06-30 (Figma 11999:264003). White 2-col band
   (heading/sub LEFT, tool-logo connection graph RIGHT), replacing the navy full-width centred band
   the build shipped (the wrong-bg / +height "sections-vs-Figma" divergence). */
.rp-integrations .rp-int-workflow { background: #fff; }
.rp-integrations .rp-int-workflow__row { display: flex; align-items: center; justify-content: space-between; gap: 56px; max-width: 1200px; margin: 0 auto; }
.rp-integrations .rp-int-workflow__text { flex: 1 1 480px; min-width: 0; }
.rp-integrations .rp-int-workflow__text .rp-h2 { font-family: Mulish, -apple-system, sans-serif; font-size: 40px; line-height: 48px; font-weight: 700; color: #021143; margin: 0; }
.rp-integrations .rp-int-workflow__text .rp-h2 .highlight-it-blue { color: #114EF7; }
.rp-integrations .rp-int-workflow__text .rp-p { font-size: 18px; line-height: 28px; color: #5A6378; max-width: 460px; }
.rp-integrations .rp-int-workflow__media { flex: 0 0 auto; }
.rp-integrations .rp-int-workflow__media img { width: 440px; max-width: 100%; height: auto; display: block; }
@media (max-width: 991px) {
  .rp-integrations .rp-int-workflow__row { flex-direction: column; text-align: center; gap: 32px; }
  .rp-integrations .rp-int-workflow__text .rp-p { margin-left: auto; margin-right: auto; }
  .rp-integrations .rp-int-workflow__media img { width: 360px; }
}
[dir="rtl"] .rp-integrations .rp-int-workflow__row { flex-direction: row-reverse; }
@media (max-width: 991px) { [dir="rtl"] .rp-integrations .rp-int-workflow__row { flex-direction: column; } }
.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) — RAW / self-contained variant.
   /spend/ drops this kit slider as RAW markup (no Kadence rowlayout), so the
   component carries its own container (--raw) + a centered heading-block variant
   (--center) to match the Figma /spend frame 15916:14695. These modifiers DO NOT
   touch the Kadence homepage instance (.rp-kintegrations without --raw/--center).
   ========================================================================= */
/* Self-contained container — replaces the homepage Kadence rowlayout (1200 / 72·24 / #fff). */
.rp-kintegrations--raw { background-color: #ffffff; }
.rp-kintegrations--raw .rp-kint-inner { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }

/* Centered heading block (Figma /spend centers heading+sub+link as one column; the
   homepage instance is left-aligned). Figma gaps: 16 heading→sub, 20 sub→link, 40 block→slider. */
.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; }

/* Decorative Figma wave (top + mirrored bottom): intentionally NOT enabled. The only
   in-code wave asset is Combined-Shape_1.svg (navy fill #0F1035) — a white-to-dark
   transition divider, wrong for Spend's white-to-white context. Flagged for the
   orchestrator to supply the exact Figma wave asset; would enable via a --decoration
   modifier + two positioned wave imgs (see build report). */

/* =========================================================================
   .rp-spend-integrations — Spend frame scope (Figma 15916:14695 exact tokens).
   Additive over --raw/--center; section scope (NOT a page fork — same play as
   .rp-spend-avoid / .rp-spend-howitworks). DISPATCH-BRIEF: "Figma is
   authoritative over any token in this brief or the live build" → these correct
   the kit defaults the un-QA'd build left on the table. Scope exists only on
   /spend/ → homepage Kadence .rp-kintegrations instance is untouched.
   NOTE: card WIDTH (Figma fixed 229) is intentionally left to the kit's 5-per-view
   (~221 @1440) — flag-don't-force on the one STRUCTURAL delta (see build report).
   ========================================================================= */
/* Heading two-tone base: navy #021143 (Figma) vs kit #0F1035; blue .hl stays #114EF7. */
.rp-spend-integrations .rp-int-h2 { color: #021143; }

/* Cards: Figma fill #F5F7FA (kit forces periwinkle #F0F4FE !important AND migration.css
   paints a linear-gradient bg-image over it — override BOTH), radius 20, 260 tall. */
.rp-spend-integrations.rp-spend-integrations .int-item.light-gra-bg {
  background-color: #F5F7FA !important; background-image: none !important;
}
.rp-spend-integrations .int-item.light-gra-bg.swiper-slide { min-height: 260px; border-radius: 20px; }

/* Tool name 20 / SemiBold / #08080D · category 16·20 / rgba(15,16,53,.7) (Figma exact).
   Double-class (0,3,0) to beat qa-fixes-pages.css `.rp-spend .intname{700/18px}` +
   `.rp-spend .int-type{500/lh1.5}` (0,2,0, loaded later → wins at equal specificity).
   Same play as the .int-item.light-gra-bg double-class above. No !important (those rules aren't). */
.rp-spend-integrations.rp-spend-integrations .intname  { font-size: 20px; line-height: 30px; font-weight: 600; color: #08080D; }
.rp-spend-integrations.rp-spend-integrations .int-type { font-size: 16px; line-height: 20px; font-weight: 400; color: rgba(15,16,53,.7); }
/* Logo size — LEFT at the qa-fixes-pages.css `.rp-spend .int-item-img{40×40 contain}` default
   (renders uniform ~40×50 logos — clean + consistent). NOT released to `width:auto` to match the
   homepage's per-attr 58-ish sizing: the homepage relies on each img's HTML width attr, and
   `width:auto` overrides that → large-intrinsic assets (Excel/NetSuite SVG/PNG) balloon to their
   intrinsic size (150px+), looking broken. FLAGGED for the orchestrator: if exact homepage/Figma
   58–100 logo sizing is wanted, cap per-asset (e.g. height:50;width:auto;max-width:70;object-fit:contain). */

/* "See all integrations" → 24px ArrowRight (Figma) replacing the kit chevron `›`; gap 8. */
.rp-spend-integrations .rp-int-link { gap: 8px; }
.rp-spend-integrations .rp-int-link::after {
  content: ""; width: 24px; height: 24px; font-size: 0; line-height: 0; flex: 0 0 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23114EF7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}