/*
 * Hosting companies page (page-hosting-companies.php). Converted from
 * design_handoff_v5_round4/Marketing Mockups/Pages/For Hosts v4.dc.html (<helmet>).
 *
 * The design ships its OWN responsive layer (the `.rsp-*` classes + @media below)
 * — kept verbatim, with a per-page `ho-*` prefix on the page-unique button/link
 * hover classes and the workflow-tab state classes (converted from the dc's
 * `style-hover` and `tabActive`/`tabIdle` inline strings) to avoid collisions
 * with other pages. Shared machinery is global and reused, not duplicated here:
 * the page shell (`.atarim-page` min-width — the dc's `.rsp-page{min-width:0}` is
 * dropped), the nav hamburger, footer recolumn, scroll-reveal (`[data-rev]`/`.hp-on`),
 * grain, smooth-scroll, scroll-margin and the fonts all live in tokens.css/site.css.
 * The leaky-bucket bar animation (`barGrow`/`.pbar-fill`) is page-local.
 */

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

/* ===== Buttons + links, converted from style-hover ===== */
.ho-mint { transition: background .16s ease; }
.ho-mint:hover { background: #35c98a; }
.ho-violet { transition: background .16s ease; }
.ho-violet:hover { background: #5a4be0; }
.ho-outline { transition: border-color .16s ease, color .16s ease; }
.ho-outline:hover { border-color: #9385FF; color: #9385FF; }
.ho-fork-a { transition: box-shadow .16s ease; }
.ho-fork-a:hover { box-shadow: 0 36px 72px -30px rgba(109,93,243,0.34); }
.ho-fork-b { transition: box-shadow .16s ease; }
.ho-fork-b:hover { box-shadow: 0 36px 72px -30px rgba(22,4,46,0.22); }

/* ===== Workflow explorer tabs (converted from tabActive/tabIdle + state) ===== */
.ho-tab {
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	padding: 11px 17px;
	border-radius: 999px;
	background: #fff;
	color: #574a6e;
	border: 1px solid rgba(26,8,48,0.12);
	font-family: 'Roboto', sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease;
}
.ho-tab:hover { border-color: rgba(109,93,243,0.45); color: #16042E; }
.ho-tab.is-active {
	background: #16042E;
	color: #fff;
	border: 1px solid #16042E;
}

/* ===== Leaky-bucket bars (load animation) ===== */
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pbar-fill { transform-origin: left; animation: barGrow 1.2s .25s cubic-bezier(.22,.61,.21,1) both; }
@media (prefers-reduced-motion: reduce) { .pbar-fill { animation: none !important; } }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec, untouched ===== */
@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-tiles2 { grid-template-columns: 1fr !important; }
	.rsp-tiles3 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-tiles4 { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-pipe { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-strip { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }
}
@media (max-width: 767px) {
	.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, .rsp-tiles4, .rsp-pipe { grid-template-columns: 1fr !important; }
	.rsp-btns { flex-direction: column !important; align-items: stretch !important; }
	.rsp-btns a { text-align: center; }
	.rsp-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
}