/* Keep the lead browser fully inside the tablet hero. */
@media(min-width:760px) and (max-width:999px){
 .page-home .hero .hero-main-screen{right:0}
}
/* Real Scaffold Talent account and operator screens, layered below the lead site. */
.page-home .hero-visual--platform{isolation:isolate}
.page-home .hero .hero-visual--platform .hero-main-screen{transform:none}
@media(min-width:1200px) and (max-width:1599px){
 .page-home .hero .hero-visual--platform .hero-main-screen{right:clamp(-60px,calc((var(--max) - 100vw)/2 + 20px),-20px)}
}
.hero-platform-flow,.hero-platform-crm{position:absolute;z-index:4;display:block;overflow:hidden;border:1px solid #536069;border-radius:13px;background:#171c21;box-shadow:0 2px 5px #0003,0 14px 30px -12px #0009;color:#e4e9ed}
.hero-platform-flow{width:205px;left:12px;bottom:18px;transform:none}
.hero-platform-crm{width:230px;right:0;bottom:4px;transform:none}
.hero-platform-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:32px;padding:8px 10px;font-size:10px;font-weight:500;line-height:1.3;color:#e4e9ed}
.hero-platform-bar>a{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;color:inherit}
.hero-platform-bar svg{width:13px;height:13px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none}
.hero-platform-frames{background:#050606}
.hero-platform-frame{display:block;height:123px;overflow:hidden}
.hero-platform-frame[hidden]{display:none}
.hero-platform-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 28%;outline:1px solid #ffffff1a;outline-offset:-1px}
.hero-platform-signup img{object-position:right 38%}
.hero-platform-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;border-top:1px solid #36424a}
.hero-platform-tabs button{min-height:32px;padding:5px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#b7c1c8;font:500 10px/1.3 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.hero-platform-tabs button[aria-pressed="true"]{color:#18262e;background:#f3f4f5;border-color:#f3f4f5}
.hero-platform-crm-image{height:136px;overflow:hidden;background:#0a1016}
.hero-platform-crm-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;outline:1px solid #ffffff1a;outline-offset:-1px}
.hero-platform-caption{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;font-size:8px;line-height:1.4;color:#d2d9df}
.hero-platform-caption>span:last-child{color:#aebac3;white-space:nowrap}
.hero-platform-flow :focus-visible{outline:2px solid #b7e3d2;outline-offset:-3px}
.hero-platform-crm:focus-visible{outline:2px solid #b7e3d2;outline-offset:4px}
@media(hover:hover){
 .hero-platform-tabs button:not([aria-pressed="true"]):hover{color:#f3f4f5;background:#293139}
 .hero-platform-crm:hover,.hero-platform-flow:focus-within{border-color:#b7c6ce}
}
@media(prefers-reduced-motion:no-preference){
 .hero-platform-tabs button{transition:background-color 150ms ease-out,color 150ms ease-out,scale 150ms ease-out}
 .hero-platform-tabs button:not(:disabled):active{scale:.96}
 .hero-platform-crm{transition:border-color 150ms ease-out}
}
@media(max-width:1199px) and (min-width:760px){
 .hero-platform-flow{left:8px;width:39%;max-width:205px}
 .hero-platform-crm{right:0;width:42%;max-width:230px}
 .hero-platform-bar{font-size:9px}
 .hero-platform-caption{font-size:7px}
}
/* Group the two supporting screens beneath the lead browser on desktop. */
@media(min-width:1000px){
 .hero-platform-flow{left:max(8px,calc(50% - 235px))}
 .hero-platform-crm{right:max(0px,calc(50% - 235px))}
}
@media(max-width:759px){
 .page-home .hero .hero-visual--platform{height:auto;max-width:500px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px 0 8px;margin-top:12px}
 .page-home .hero .hero-visual--platform .hero-main-screen{position:relative;inset:auto;grid-column:1/-1;width:100%;margin:12px 0 0;transform:none}
 .hero-platform-flow,.hero-platform-crm{position:relative;inset:auto;width:100%;max-width:none;min-width:0;transform:none;margin-top:-4px;border-radius:9px;align-self:start}
 .hero-platform-bar{min-height:36px;padding:8px;font-size:9px;gap:5px}
 .hero-platform-bar>a{gap:5px}
 .hero-platform-bar svg{width:12px;height:12px}
 .hero-platform-frame{height:96px}
 .hero-platform-tabs{padding:4px;gap:3px}
 .hero-platform-tabs button{min-height:44px;padding-inline:3px;font-size:10px}
 .hero-platform-crm-image{height:117px}
 .hero-platform-caption{display:block;padding:7px 8px;font-size:8px;min-height:40px}
 .hero-platform-caption>span{display:block}
 .hero-platform-caption>span:last-child{margin-top:3px}
}
@media(pointer:coarse){.hero-platform-tabs button{min-height:44px}}
@media(forced-colors:active){
 .hero-platform-flow,.hero-platform-crm,.hero-platform-tabs button{border-color:ButtonText}
 .hero-platform-tabs button[aria-pressed="true"]{background:Highlight;color:HighlightText}
}

/* Entrance transforms are applied by WAAPI once, while the resting layout stays CSS-owned. */
.hero-visual--platform .hero-main-screen{transform-origin:50% 80%}
.hero-platform-flow{transform-origin:70% 80%}
.hero-platform-crm{transform-origin:30% 80%}
.hero-visual--platform [data-hero-motion="pending"]{opacity:0}
.hero-visual--platform [data-hero-motion="complete"]{opacity:1}

.hero-platform-flow[data-showcase-input="keyboard"] .hero-platform-tabs button{transition:none}

/* A quiet marketing float, after the entrance has handed transforms back to CSS. */
.hero-visual--platform{--ease-in-out:cubic-bezier(.77,0,.175,1)}
.hero-float-toggle{position:absolute;z-index:5;top:8px;right:0;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #536069;border-radius:50%;background:#171c21;color:#d2d9df}
.hero-float-toggle[hidden]{display:none}
.hero-float-toggle svg{width:16px;height:16px;stroke-width:1.8}
.hero-float-toggle .hero-float-play{display:none}
.hero-float-toggle[data-paused="true"] .hero-float-pause{display:none}
.hero-float-toggle[data-paused="true"] .hero-float-play{display:block;fill:currentColor;stroke:none}
.hero-float-toggle:focus-visible{outline:2px solid #b7e3d2;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.hero-float-toggle:hover{background:#293139;color:#f3f4f5}}
@media(min-width:760px) and (prefers-reduced-motion:no-preference){
 .hero-visual--platform[data-hero-float] .hero-platform-flow[data-hero-motion="complete"],
 .hero-visual--platform[data-hero-float] .hero-platform-crm[data-hero-motion="complete"]{animation:hero-panel-float 7.5s var(--ease-in-out) infinite}
 .hero-visual--platform[data-hero-float] .hero-platform-crm[data-hero-motion="complete"]{animation-name:hero-panel-float-crm;animation-duration:9s}
 .hero-visual--platform[data-hero-float="paused"] .hero-platform-flow[data-hero-motion="complete"],
 .hero-visual--platform[data-hero-float="paused"] .hero-platform-crm[data-hero-motion="complete"]{animation-play-state:paused}
 .hero-float-toggle{transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
 .hero-float-toggle:active{transform:scale(.97)}
}
@keyframes hero-panel-float{
 0%,100%{transform:translate3d(0,0,0)}
 50%{transform:translate3d(0,-6px,0)}
}
@keyframes hero-panel-float-crm{
 0%,100%{transform:translate3d(0,0,0)}
 50%{transform:translate3d(0,-8px,0)}
}
@media(max-width:759px){.hero-float-toggle{display:none}}
@media(forced-colors:active){.hero-float-toggle{border-color:ButtonText}}