/*
 * Atarim MCP — page-specific override layer over the inline desktop spec
 * (desktop >=1280 is the binding inline design, untouched). Rebuilt for design
 * round 7 from "V5 Release/MCP.dc.html".
 *
 * Until round 7 this page had no stylesheet at all: it lived inside page.php
 * and its CSS was inlined in a <style> block, because the deploy channel could
 * not create new named files. It can now, so the page has a normal
 * page-<slug>.php + page-<slug>.css pair like every other page.
 */

/* Light-page scrollbar (overrides the global dark one while this CSS is loaded). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* Button + link hovers (translated from style-hover). */
.mcp-btn-mint { transition: background .18s ease; }
.mcp-btn-mint:hover { background: #35c98a; }
.mcp-btn-violet { transition: background .18s ease; }
.mcp-btn-violet:hover { background: #8a7af5; }
.mcp-btn-ghost { transition: border-color .18s ease, color .18s ease; }
.mcp-btn-ghost:hover { border-color: #9385FF; color: #9385FF; }
.mcp-guide { transition: color .16s ease; }
.mcp-guide:hover { color: #5547d6; }

/* ===== SEAM STRADDLE =====
 * ~25% of the MCP Illustration sits over the dark hero, 75% on the white
 * section, with the section's H2 + description underneath. This embed's visible
 * box is 800px tall at >=1280 (742 in the design, grown 58px in Sep 2026 so the
 * bottom card's shadow is no longer cropped; the extra is all below the cards,
 * so the lift is unchanged). The lift is 186px and the hero carries 208px of matching
 * bottom padding inline. Below 1280 site.css sets `.mk-fit { margin: 0
 * !important; }`, so the straddle collapses to stacked with no extra rule. */
@media (min-width: 1280px) {
	.mcp-straddle .mk-fit { margin-top: -186px; }
}

/* ===== 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; }
	.mcp-hero { padding-bottom: 90px !important; }
	.rsp-reach { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-dims { grid-template-columns: repeat(3, 1fr) !important; }
	.rsp-beyond { grid-template-columns: repeat(3, 1fr) !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, .rsp-bound, .rsp-cats { grid-template-columns: 1fr !important; gap: 24px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-beyond { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-dims { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-install { grid-template-columns: 1fr !important; gap: 24px !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; }
	.mcp-hero { padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
	.rsp-reach, .rsp-beyond, .rsp-dims { grid-template-columns: 1fr !important; }
	.rsp-safety { flex-direction: column !important; }
}

/* Responsive sweep, pass 2: the stacked #comments tiles sized their `1fr`
 * track to content (~343px), past the gutter on a 360 phone. */
@media (max-width: 1023px) {
	.rsp-tiles3 { grid-template-columns: minmax(0, 1fr) !important; }
	.rsp-tiles3 > * { min-width: 0; }
}