/*
 * Workflows — 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/Workflows.dc.html": style-hover attributes become
 * classes, plus the .rsp-* responsive layer (1279/1023/767).
 *
 * The chatbot-vs-workflow illustration reuses the GLOBAL .wf-step / .wf-tip /
 * errFloat styles in site.css (shared with front-page.php), so they are not
 * redeclared here. Only .hp-errbadge's animation hook is homepage-scoped, so
 * this page rebinds it.
 */

/* 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; }
.wf-link { color: #6D5DF3; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: gap .2s ease, color .2s ease; }
.wf-link:hover { gap: 11px; color: #5547d6; }
.wf-seeall { transition: background .16s ease, border-color .16s ease; }
.wf-seeall:hover { background: rgba(109,93,243,0.07); border-color: #6D5DF3; }

/* The floating error icon on the generic-chatbot card (errFloat is global). */
.hp-errbadge { animation: errFloat 4.5s ease-in-out infinite; }

/* ===== LIBRARY: cadence filter =====
 * Pills render server-side with "All" active; page-workflows.js only toggles
 * classes and hides cards, so the full catalogue is visible without JS. */
.wf-pill { color: #2a1747; background: #fff; border: 1px solid rgba(26,8,48,0.14); transition: background .16s ease, color .16s ease, border-color .16s ease; }
.wf-pill:hover { border-color: rgba(26,8,48,0.34); }
.wf-pill-on { color: #fff; background: #16042E; border-color: #16042E; }
.wf-card { transition: transform .18s ease, box-shadow .18s ease; }
.wf-card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -26px rgba(22,4,46,0.32); }
.wf-card[hidden] { display: none; }

/* ===== SEAM STRADDLE =====
 * ~25% of the Workflow Engine embed sits over the dark hero, 75% on the white
 * section, with the section's H2 + description underneath. The embed is 838px
 * tall at >=1280, so the lift is 210px and the hero carries 232px 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) {
	.wf-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; }
	.wf-hero { padding-bottom: 90px !important; }
	.rsp-lib { grid-template-columns: repeat(2, 1fr) !important; }
	.rsp-proofrow { flex-wrap: wrap !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-compare, .rsp-split, .rsp-board { grid-template-columns: 1fr !important; gap: 24px !important; }
	.rsp-compare > div:first-child { margin-top: 0 !important; }
	.rsp-tiles4 { 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) {
	[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; }
	.wf-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-lib { grid-template-columns: 1fr !important; }
	.rsp-url { width: 100% !important; }
}

/* Responsive sweep (Sep 2026): a stacked `1fr` track grows to its content's
 * min width, and the SOP card's two branches held #contrast at ~391px on a 375
 * phone. minmax(0,1fr) lets the stack shrink; the branches stack on phones. */
@media (max-width: 1023px) {
	.rsp-compare, .rsp-split, .rsp-board { grid-template-columns: minmax(0, 1fr) !important; }
	.rsp-compare > *, .rsp-split > *, .rsp-board > * { min-width: 0; }
}
@media (max-width: 767px) {
	.rsp-branch { grid-template-columns: minmax(0, 1fr) !important; }
}