.build-page { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px 20px; background:#fff; }
.build-stage { width:min(960px,100%); aspect-ratio:1.36; position:relative; isolation:isolate; }
.build-laptop { position:absolute; width:94%; left:0; top:3%; }
.build-laptop > img { display:block; width:100%; height:auto; }
.build-screen { position:absolute; left:10.05%; top:12.8%; width:79.9%; height:68.2%; overflow:hidden; }
.build-phone { position:absolute; width:23%; right:0; bottom:4%; padding:3.2% 1% 2.8%; border:2px solid #888b8f; border-radius:clamp(16px,2.4vw,28px); background:#111214; box-shadow:inset 0 0 0 2px #292b2e,0 10px 15px #0003; }
.build-phoneScreen { position:relative; overflow:hidden; border-radius:4px; }
.build-phoneScreen img { width:100%; height:auto; display:block; }
.build-speaker { position:absolute; width:26%; height:3px; left:37%; top:2%; border-radius:4px; background:#34373c; }
.build-home { position:absolute; width:35%; height:3px; left:32.5%; bottom:1.6%; border-radius:3px; background:#dadbdd; }
.build-layers { position:absolute; inset:0; background:white; overflow:hidden; container-type:inline-size; }
.build-webPage { position:absolute; inset:0; background:white; }
.build-heroSection { position:relative; height:76%; background:#eef0ef; overflow:hidden; }
.build-heroPhoto { object-fit:cover; filter:brightness(.8); }
.build-brand { position:absolute; top:3%; left:3%; width:11%; height:auto; }
.build-webHeading { position:absolute; top:25%; left:28%; width:44%; }
.build-webHeading img { width:100%; height:auto; }
.build-webCopy { position:absolute; top:60%; left:12%; width:76%; margin:0; text-align:center; color:#fff; font-family:serif; font-size:2cqw; font-weight:600; line-height:1.75; }
.build-webButton { position:absolute; top:4%; right:7%; padding:1.4% 2%; background:#ffffffdd; color:#343b3a; font-family:serif; font-size:1.7cqw; letter-spacing:.1em; }
.build-menu { position:absolute; right:1.5%; top:3%; font-size:3cqw; color:white; }
.build-nextSection { height:45%; background:white; text-align:center; padding-top:3%; font-family:serif; font-size:2cqw; line-height:1.8; font-weight:600; }
.build-nextSection p { margin:0; }
.build-nextSection img { display:block; width:30%; height:auto; margin:3% auto 0; }
.build-finishedPage { position:absolute; inset:0; opacity:0; background:white; }
.build-finishedViewport > img { position:absolute; max-width:none; width:125.156%; height:146.628%; left:-12.578%; top:-18.768%; }
.build-ready .build-heroSection, .build-ready .build-nextSection { animation:placeSection .35s ease-out both; }
.build-ready .build-heroSection { animation-delay:.1s; }
.build-ready .build-nextSection { animation-delay:.35s; }
.build-ready .build-heroPhoto { animation:addPhoto .4s ease-out .6s both; }
.build-ready .build-brand { animation:addElement .25s ease-out .9s both; }
.build-ready .build-webHeading { animation:addElement .3s ease-out 1.1s both; }
.build-ready .build-webCopy { animation:addElement .3s ease-out 1.35s both; }
.build-ready .build-nextSection p, .build-ready .build-nextSection img { animation:addElement .3s ease-out 1.5s both; }
.build-ready .build-webButton, .build-ready .build-menu { animation:addElement .3s ease-out 1.7s both; }
.build-ready .build-phone { animation:phone 3s both; }
.build-ready .build-finishedPage { animation:completed 3s both; }
.build-ready .build-webPage { animation:pageScroll 3s both; }
.build-ready .build-finishedViewport { animation:pageScroll 3s both; }
.build-mobileLayers .build-finishedViewport > img { width:100%; height:100%; left:0; top:0; }
.build-mobileLayers .build-heroSection { height:76%; }
.build-mobileLayers .build-webHeading { top:26%; left:12%; width:76%; }
.build-mobileLayers .build-webCopy { top:51%; font-size:4cqw; left:5%; width:90%; }
.build-mobileLayers .build-brand { width:22%; }
.build-mobileLayers .build-webButton { font-size:4cqw; top:87%; right:18%; }
.build-mobileLayers .build-menu { font-size:7cqw; }
.build-mobileLayers .build-nextSection {font-size:4cqw;}
.build-mobileLayers .build-nextSection img {width:60%;}
@keyframes placeSection { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:none} }
@keyframes addPhoto { from {opacity:0} to {opacity:1} }
@keyframes addElement { from {opacity:0;transform:translateY(9px)} to {opacity:1;transform:none} }
@keyframes completed { 0%,73% {opacity:0} 79%,100% {opacity:1} }
@keyframes pageScroll { 0%,82% {transform:translateY(0)} 100% {transform:translateY(-5%)} }
@keyframes phone { 0%,8% {opacity:0;transform:translateY(16px)} 22%,100% {opacity:1;transform:none} }
.build-replay { border:1px solid #d6dadd; border-radius:999px; background:#fff; color:#333; padding:12px 24px; font-size:14px; cursor:pointer; }
.build-replay:hover { background:#f5f6f7; }
.build-replay:focus-visible { outline:2px solid #555; outline-offset:4px; }
@media(prefers-reduced-motion:reduce) { .build-ready .build-layers {display:none} .build-ready .build-phone {animation:none} }

.build-finishedViewport { position:absolute; inset:0; overflow:hidden; }

.build-embedded { min-height:0; padding:0; gap:0; width:100%; }