/*
 * Integrations page styles (page-integrations.php).
 * Converted from the approved Integrations.dc.html.
 * The inline styles in the template are the binding desktop spec; this file
 * carries the hover states (converted from style-hover) and the responsive
 * layer (rsp-* class hooks + the @media block), ported verbatim from the
 * design's <helmet>. No mockups, so no scaler here (it is global in site.js).
 */

/* Anchor offset for the floating nav (the design's section[id] rule). */
.atarim-page section[id] { scroll-margin-top: 96px; }

/* ===== Hover states (converted from style-hover) ===== */
.ig-mint { transition: background .16s ease; }
.ig-mint:hover { background: #35c98a; }
.ig-demo { transition: border-color .16s ease, color .16s ease; }
.ig-demo:hover { border-color: #9385FF; color: #9385FF; }
.ig-toolcard:hover { border-color: rgba(109,93,243,0.45); transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(22,4,46,0.45); }
.ig-reqlink { transition: color .16s ease; }
.ig-reqlink:hover { color: #5547d6; }

/* ============================================================
 * RESPONSIVE LAYER (Integrations). Ported verbatim from the design's <helmet>
 * @media block. Desktop >=1280px is the inline spec and untouched. The page
 * shell min-width is released by the global .atarim-page rule in site.css.
 * Breakpoints: 1279 / 1023 / 767.
 * ============================================================ */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; padding-top: 150px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-mcp { grid-template-columns: 1fr !important; gap: 40px !important; }
	.rsp-visual { order: 2; }
	.rsp-ai3 { grid-template-columns: repeat(3,1fr) !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-stats { gap: 28px 40px !important; }
	.rsp-grpgrid { grid-template-columns: repeat(4,1fr) !important; }
}
@media (max-width: 767px) {
	[data-mascot][style*="absolute"] { display: none !important; }
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 124px !important; padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
	.rsp-ai3 { grid-template-columns: 1fr !important; }
	.rsp-grpgrid { grid-template-columns: repeat(3,1fr) !important; }
	.rsp-logos { gap: 10px !important; }
}