/*
 * Careers — 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/Careers.dc.html": style-hover attributes become .cr-* classes
 * and the .rsp-* responsive layer (1279/1023/767).
 */

/* 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). */
.cr-mint { transition: background .16s ease; }
.cr-mint:hover { background: #35c98a; }
.cr-ghost { transition: color .16s ease, border-color .16s ease; }
.cr-ghost:hover { border-color: #9385FF; color: #9385FF; }
.cr-link { transition: gap .2s ease, color .2s ease; }
.cr-link:hover { gap: 12px; color: #6D5DF3; }

/* ===== 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; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-split { grid-template-columns: 1fr !important; gap: 28px !important; }
	.rsp-visual { order: 2; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tiles4 { 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: 128px !important; padding-bottom: 54px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
	.rsp-tiles3 { grid-template-columns: 1fr !important; }
	.rsp-tiles4 { grid-template-columns: 1fr !important; }
}

/* Responsive sweep, pass 2: at the Hero H1 floor (60px) "professionals" is
 * wider than a 360 phone's column, so the smallest phones step down to 52px. */
@media (max-width: 400px) {
	.rsp-hero h1 { font-size: 52px !important; }
}