/* Cargado /platform/integrations FAQ "Questions about integrations". Ported from the redesign prototype (route integrations, the
   section.sec.alt with .faq). Scoped under .cg-itgf; tokens on the wrapper with the prototype's light values. The h2 follows the site's
   heading font (--f-head reads the Webflow heading variable), sets no font-weight and uses -.03em. */
.cg-itgf{--f-head:var(--_typography---font-styles--heading,"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif);--f-body:Inter,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;--azul:#345ED1;--ink:#0F172A;--body:#475569;--line:#E2E8F0;--alt:#F8FAFC;--link:#345ED1;--ease-out:cubic-bezier(.2,.8,.2,1);--gut:max(16px,5vw);--max:calc(1280px + 10vw);box-sizing:border-box;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;text-align:start;-webkit-font-smoothing:antialiased}
.cg-itgf *,.cg-itgf *::before,.cg-itgf *::after{box-sizing:border-box}

/* host reset: the live Webflow CSS gives h2/p margins; details/summary keep the browser marker unless removed */
.cg-itgf h2,.cg-itgf p{margin:0}
.cg-itgf details,.cg-itgf summary{display:block;margin:0;padding:0}
.cg-itgf summary::-webkit-details-marker{display:none}
.cg-itgf a{color:var(--link)}
.cg-itgf :focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}
.cg-itgf p{text-wrap:pretty}

.cg-itgf .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.cg-itgf .sec{padding-block:clamp(64px,8vw,112px)}
.cg-itgf .sec.alt{background:var(--alt)}
.cg-itgf .sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(44px,5vw,60px)}
.cg-itgf .sec-head.c{text-align:center;margin-inline:auto;justify-items:center}
.cg-itgf h2{font-family:var(--f-head);letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-size:clamp(30px,3.3vw,46px);color:var(--ink)}

.cg-itgf .faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.cg-itgf .faq details{border-bottom:1px solid var(--line);padding:18px 0}
.cg-itgf .faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.cg-itgf .faq summary::after{content:"+";color:var(--azul);font-size:22px;line-height:1;flex:none}
.cg-itgf .faq details[open] summary::after{content:"–"}
.cg-itgf .faq p{color:var(--body);margin-top:10px;max-width:66ch}
/* 44px tap target on the question row at every width, no visual change */
.cg-itgf .faq summary{position:relative;min-height:28px}
.cg-itgf .faq summary::before{content:"";position:absolute;inset:-10px 0}
/* the answer eases in when a question opens (transform and opacity only, 300 ms) */
.cg-itgf .faq details[open] p{animation:cgItgfIn .3s var(--ease-out) 1}
@keyframes cgItgfIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* primary Get started under the list: the legacy FAQ this package hides carries exactly https://cargado.com/get-started?ref=integrations,
   and that tracked URL is kept verbatim (absolute, so no locale prefix) */
.cg-itgf .k-row{display:flex;justify-content:center;margin-top:clamp(28px,4vw,40px)}
.cg-itgf .k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;background:var(--azul);color:#fff;border:1px solid transparent;transition:background .15s ease}
.cg-itgf .k-btn:hover{background:#2A4FB5;color:#fff}

/* scroll-in reveal (PACKAGE-BRIEF "Self-serve and motion"): itgf.js adds .rv only to questions below the fold at load and .in on scroll-in.
   Transform and opacity only, 350 ms, once. Without the script the list is simply visible. */
.cg-itgf .rv{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.cg-itgf .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cg-itgf *,.cg-itgf *::before,.cg-itgf *::after{animation:none!important;transition:none!important}
  .cg-itgf .rv{opacity:1;transform:none}
}

/* English-only slot hide (PACKAGE-BRIEF "English-only row hide"): on English pages (lang en, en-CA) this FAQ replaces the live
   "Questions brokers ask" (section.ti-faq-sec#faq, six questions plus a Get started button). es-MX and fr-CA keep it; the embed hides
   itself there by its locale guard. */
html[lang^="en"] section.ti-faq-sec#faq{display:none!important}