/*
 * Boards — page-specific override layer over the inline desktop spec
 * (desktop >=1280 is the binding inline design, untouched). Ported from
 * "V5 Release/Boards.dc.html": style-hover attributes become .nf-* and .rev-btn
 * classes, plus the .rsp-* responsive layer (1279/1023/767). Globals (hpRise,
 * grain, data-rev, the .mk-fit scaler) come from tokens.css/site.css.
 */

/* 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). */
.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; }
.rev-btn { transition: background .16s ease, color .16s ease; }
.rev-btn:hover { background: #6D5DF3; color: #fff; }

/* ===== SEAM STRADDLE =====
 * The design lifts the mockup so ~25% of it sits over the dark hero and 75% on
 * the white section below, with the section's H2 + description underneath. The
 * source computed the offset in JS; here it is static CSS, because at >=1280
 * the embed always renders at its native 838px height (25% = 210px) and the
 * hero already carries the matching 232px bottom padding inline.
 *
 * .mk-scroll / .mk-fit-box are display:contents at >=1280, so .mk-fit is the
 * real layout box and the offset belongs on it. Below 1280 site.css sets
 * `.mk-fit { margin: 0 !important; }`, so the straddle collapses to stacked on
 * tablet and phone with no extra rule needed. */
@media (min-width: 1280px) {
	.bd-straddle .mk-fit { margin-top: -210px; }
}

/* ===== 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; }
	/* straddle is off below 1280, so the hero drops its straddle clearance */
	.bd-hero { padding-bottom: 90px !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-tiles4 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-quotes { grid-template-columns: repeat(2, 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; }
	.bd-hero { padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 60px !important; padding-bottom: 60px !important; }
	.rsp-tiles4, .rsp-quotes { grid-template-columns: 1fr !important; }
}