/*
 * Integration pages (single-atarim_integration.php). Converted from
 * design-source/Marketing Mockups/Pages/Integration Page Template.html
 * (<helmet>).
 *
 * The design's responsive layer (the `.rsp-*` hooks + four @media tiers) is
 * kept as it came. Base resets, grain, scroll-reveal (`[data-rev]`/`.hp-on`),
 * the `hpRise` keyframes and the scrollbar base are global in tokens.css /
 * site.css and are not repeated. The design's `.rsp-url` rules are dropped:
 * the closer form is the shared Gravity Forms capture (.hp-gform in site.css).
 */

/* Light-page scrollbar, as on the other light pages. */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

section[id] { scroll-margin-top: 96px; }

/* Hero logo marquee (same keyframes as /black-friday/). */
@keyframes bfMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { [style*="bfMarq"] { animation: none !important; } }
.rsp-marq > div:nth-child(n+2) { display: none; }

/* style-hover from the design, as classes. */
.int-copy:hover { background: rgba(255,255,255,0.16) !important; }
.int-connector:hover { background: #f4f0fb !important; color: #16042E !important; }
.int-note-link:hover { color: #fff !important; }
.int-link:hover { color: #16042E !important; }
.int-help:hover { background: #23104A !important; }
.int-rel:hover { border-color: rgba(109,93,243,0.45) !important; }

/* Example request switcher: the selected and resting states from the design. */
.int-ask { background: transparent; border: 1px solid rgba(26,8,48,0.10); box-shadow: none; }
.int-ask:hover { border-color: rgba(109,93,243,0.45); }
.int-ask .int-ask-dot { border-color: rgba(26,8,48,0.22); }
.int-ask .int-ask-dot > span { background: transparent; }
.int-ask .int-ask-t { color: #574a6e; }
.int-ask.is-on { background: #fff; border-color: rgba(109,93,243,0.45); box-shadow: 0 20px 44px -28px rgba(22,4,46,0.30); }
.int-ask.is-on .int-ask-dot { border-color: #6D5DF3; }
.int-ask.is-on .int-ask-dot > span { background: #6D5DF3; }
.int-ask.is-on .int-ask-t { color: #16042E; }

@media (max-width:1279px){
	.rsp-page{ min-width:0 !important; }
	.rsp-hero{ padding-left:32px !important; padding-right:32px !important; }
	.rsp-sec{ padding-left:32px !important; padding-right:32px !important; }
	.rsp-hero .rsp-split{ gap:48px !important; }
	.rsp-sec .rsp-split{ gap:56px !important; }
}
@media (max-width:1023px){
	.rsp-hero{ padding-left:24px !important; padding-right:24px !important; padding-top:140px !important; padding-bottom:80px !important; }
	.rsp-sec{ padding-left:24px !important; padding-right:24px !important; padding-top:88px !important; padding-bottom:88px !important; }
	.rsp-split{ grid-template-columns:1fr !important; gap:40px !important; }
	.rsp-hero .rsp-split{ gap:56px !important; }
	.rsp-split > .rsp-visual{ max-width:560px !important; width:100% !important; }
	.rsp-hero-copy{ max-width:600px !important; }
	.rsp-faq{ grid-template-columns:1fr !important; }
	.rsp-steps3{ grid-template-columns:1fr !important; }
	.rsp-steps3 > div{ padding-bottom:22px !important; border-bottom:1px solid rgba(26,8,48,0.08) !important; }
	.rsp-related{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:767px){
	.rsp-hero{ padding-left:16px !important; padding-right:16px !important; padding-top:116px !important; padding-bottom:56px !important; }
	.rsp-sec{ padding-left:16px !important; padding-right:16px !important; padding-top:64px !important; padding-bottom:64px !important; }
	.rsp-hero .rsp-split{ gap:44px !important; }
	.rsp-h1{ font-size:38px !important; line-height:1.05 !important; }
	.rsp-lead{ font-size:17px !important; }
	.rsp-h2{ font-size:34px !important; }
	.rsp-h2c{ font-size:40px !important; }
	.rsp-marq{ display:none !important; }
	.rsp-install [style*="Roboto Mono"]{ font-size:14px !important; }
	.bf-agents a{ padding:12px 10px !important; font-size:14px !important; gap:8px !important; }
	.int-copy{ min-height:44px; }
	.rsp-does-t{ font-size:16px !important; }
	.rsp-chat-body{ padding:20px 16px 22px !important; }
	.rsp-tools{ padding-left:0 !important; }
	.rsp-task-foot{ flex-direction:column !important; align-items:stretch !important; }
	.rsp-layer-row{ flex-wrap:wrap !important; row-gap:10px !important; }
	/* Build delta: the card text takes the full row, so the tag drops below it
	   instead of squeezing the text to a few words a line. */
	.rsp-layer-row > div{ flex:1 1 calc(100% - 56px) !important; }
	.rsp-layer-row > span{ margin-left:56px !important; }
	.rsp-layer-note{ display:none !important; }
	.rsp-related{ grid-template-columns:1fr !important; }
	.rsp-faq > div{ padding:22px 20px !important; }
	.rsp-faq h3{ font-size:20px !important; }
}
@media (max-width:400px){
	.bf-agents{ grid-template-columns:1fr !important; }
}