/* Selected motion: gather assets into one kit. */
.extracted-assets{isolation:isolate}
.extracted-assets::after{content:'';position:absolute;inset:-44px -14px -14px;border:1px solid #203f3540;border-radius:7px;background:#f7f3e855;z-index:-1;pointer-events:none;opacity:0}
.kit-collection-label{position:absolute;top:-31px;left:0;right:0;font:600 12px Arial,sans-serif;color:#203f35;display:flex;justify-content:space-between;opacity:0}.kit-collection-label span{font-weight:400;font-size:9px}
@keyframes collection-outline{0%,48%{opacity:0}60%,90%{opacity:1}100%{opacity:0}}
/* The familiar cards arrive loose, then straighten into one finished kit. */
[data-variation=gather] .extracted-asset{animation:gather-logo 11s infinite}[data-variation=gather] .asset-palette{animation-name:gather-colors}[data-variation=gather] .asset-type{animation-name:gather-type}[data-variation=gather] .extracted-assets::after,[data-variation=gather] .kit-collection-label{animation:collection-outline 11s infinite}[data-variation=gather] .demo-cursor,[data-variation=gather] .extract-copied{animation-duration:11s}
@keyframes gather-logo{0%,8%{opacity:0;transform:translate(-60px,0) rotate(-4deg)}22%,39%{opacity:1;transform:translate(0,-12px) rotate(-3deg)}54%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes gather-colors{0%,18%{opacity:0;transform:translate(-60px,0) rotate(3deg)}32%,39%{opacity:1;transform:translate(14px,0) rotate(2deg)}54%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes gather-type{0%,28%{opacity:0;transform:translate(-60px,0) rotate(-3deg)}39%{opacity:1;transform:translate(-5px,10px) rotate(-2deg)}54%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}

.extract-hero[data-paused=true] .extracted-assets::after,.extract-hero[data-paused=true] .kit-collection-label{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.extract-hero ::after{animation:none!important}.extracted-assets::after,.kit-collection-label{opacity:1}}
@media(max-width:700px){.extract-stage{gap:65px}.extracted-assets::after{inset:-44px -8px -10px}}

.intro{text-align:center;padding-top:54px;padding-bottom:36px}.intro h1{font-size:clamp(44px,6.5vw,82px);line-height:1.04;letter-spacing:-3px;margin:14px auto 24px;max-width:1100px}.intro>p:last-child{font-size:clamp(19px,2.2vw,25px);max-width:900px;margin:0 auto;line-height:1.4}.extract-hero{padding-bottom:12px;margin-bottom:46px}@media(max-width:650px){.intro{padding-top:36px}.intro h1{letter-spacing:-1.7px}.intro>p:last-child{font-size:19px}}

.steps-heading{text-align:center;font-size:clamp(28px,3.5vw,40px);line-height:1.15;letter-spacing:-1px;margin:0 0 28px}

/* Match the builder's cream, ink, and primary-color palette. */
.extract-hero{--forest:#171717;--clay:#d63a32;--paper:#f4f1e9}
.demo-site,.extracted-asset,.extract-copy,.extracted-assets::after{border-color:#17171740;box-shadow:none}
.demo-browser{background:#ebe8e0;border-color:#17171720;color:#575861}
.demo-site-copy p,.extracted-asset small{color:#575861}
.demo-site-copy span{background:#2852b7;color:#fff}
.demo-site .demo-wordmark,.extracted-asset .demo-wordmark{color:#d63a32}
.extracted-asset::before{border-color:#d3a32388}
.extract-copy,.kit-collection-label{color:#171717}
.extract-colors i{border-color:#17171720}
.extracted-assets::after{background:#f4f1e955}
.extract-copied{background:#2852b7}