/*
 * AI Inner Circle — page-specific override layer over the inline desktop spec
 * (desktop >=1280 is the binding inline design, untouched). Ported verbatim
 * from "AI Inner Circle.dc.html": the .rsp-flip agent-row mirroring, the
 * style-hover attributes as .nf-*/.ic-* classes, and the .rsp-* responsive
 * layer (1279/1023/767). Globals come from tokens.css/site.css; the hero cast
 * crossfade is in page-inner-circle.js.
 */

/* Light-page scrollbar. */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* Button + link hovers (translated from style-hover). */
.nf-mint { transition: background .16s ease; }
.nf-mint:hover { background: #35c98a; }
.nf-demo { transition: color .16s ease, border-color .16s ease; }
.nf-demo:hover { border-color: #9385FF !important; color: #9385FF; }
.nf-link { transition: color .16s ease; }
.nf-link:hover { color: #5547d6; }
.ic-ask:hover { border-color: #6D5DF3 !important; color: #6D5DF3; }
.ic-violet { transition: background .16s ease; }
.ic-violet:hover { background: #8a7af5; }

/* Agent-row mirroring (every other row flips so the body image alternates side). */
.rsp-flip { flex-direction: row-reverse; }
.rsp-flip .ag-glow, .rsp-flip .ag-noise { transform: scaleX(-1); }
.rsp-flip .ag-img { transform: translateX(-120px) !important; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec ===== */
@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-split { grid-template-columns: 1fr !important; gap: 36px !important; }
	.rsp-visual { order: 2; }
	.rsp-tiles4 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-agentrow, .rsp-agentrow.rsp-flip { flex-direction: column !important; gap: 28px !important; }
	.ag-img, .rsp-flip .ag-img { flex: 0 0 auto !important; width: 100% !important; max-width: 440px !important; margin-left: auto !important; margin-right: auto !important; transform: none !important; }
	.ag-glow, .rsp-flip .ag-glow, .ag-noise, .rsp-flip .ag-noise { inset: 0 !important; transform: none !important; }
	.rsp-strip { flex-direction: column !important; align-items: flex-start !important; gap: 18px !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-tiles4 { grid-template-columns: 1fr !important; }
}