/* Three scenes: ideas in the air, a scattered workflow, one place to build. */
.hero--products .hero-scene{min-height:680px;max-height:1050px}
.hero--products .hero-copy{padding-bottom:15px}
.hero--products h1{font-size:clamp(84px,10.1vw,170px);line-height:.97;letter-spacing:-.075em}
.hero--products .hero-kicker{margin-bottom:26px}
.hero--products .hero-description{font-size:16px;margin-top:26px}
.hero--products .hero-actions{margin-top:22px}
.hero--products .canvas-grid{opacity:.55;background-size:90px 90px}
.project-universe{position:absolute;inset:0;pointer-events:none;z-index:1}
.project-shape{position:absolute;width:var(--size,130px);height:var(--size,130px);color:var(--shape-color);transform:rotate(var(--angle,0deg))}
.shape-drift{width:100%;height:100%;position:relative;animation:project-fly var(--duration,18s) ease-in-out infinite alternate;animation-delay:var(--delay,-4s);animation-play-state:paused}
.hero--products.is-in-view .shape-drift{animation-play-state:running}
.shape-drift svg{width:100%;height:100%}
.shape-drift>span{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap;color:#585a54;font-weight:500;letter-spacing:-.1px}
.project-star{--shape-color:var(--red);--size:120px;left:8%;top:9%;--angle:-11deg;--duration:19s;--fly-x:24px;--fly-y:33px;--spin:30deg}
.project-square{--shape-color:var(--yellow);--size:64px;left:36%;top:3%;--angle:13deg;--duration:16s;--delay:-8s;--fly-x:-32px;--fly-y:16px;--spin:-32deg}
.project-semi{--shape-color:var(--green);--size:150px;right:7%;top:3%;--angle:-17deg;--duration:21s;--fly-x:-27px;--fly-y:25px;--spin:26deg}
.project-zigzag{--shape-color:var(--green);--size:86px;left:-2%;top:45%;--angle:12deg;--duration:17s;--delay:-10s;--fly-x:23px;--fly-y:-29px;--spin:20deg}
.project-pentagon{--shape-color:var(--blue);--size:78px;right:1%;top:43%;--angle:20deg;--duration:15s;--delay:-6s;--fly-x:-17px;--fly-y:-23px;--spin:-30deg}
.project-arch{--shape-color:var(--blue);--size:147px;left:10%;bottom:13%;--angle:-12deg;--duration:22s;--fly-x:28px;--fly-y:-20px;--spin:24deg}
.project-flower{--shape-color:var(--pink);--size:118px;right:12%;bottom:10%;--angle:10deg;--duration:18s;--delay:-7s;--fly-x:-23px;--fly-y:25px;--spin:50deg}
.project-triangle{--shape-color:var(--yellow);--size:57px;left:45%;bottom:5%;--angle:21deg;--duration:23s;--delay:-11s;--fly-x:24px;--fly-y:-21px;--spin:-40deg}
@keyframes project-fly{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(calc(var(--fly-x)*-.5),calc(var(--fly-y)*.6)) rotate(calc(var(--spin)*-.3))}100%{transform:translate(var(--fly-x),var(--fly-y)) rotate(var(--spin))}}
.story-hidden .shape-drift{animation-play-state:paused!important}
.story-topline,.story-bottomline{display:flex;justify-content:space-between;align-items:center;gap:25px}
.story-topline{position:relative;z-index:4;margin:0 4.5%;padding-top:31px}
.story-topline img{width:48px;height:auto}
.story-bottomline{position:absolute;bottom:25px;left:4.5%;right:4.5%;font-size:8px;letter-spacing:.8px;color:#7b766f}
#main>.problem-section{min-height:max(100svh,780px);background:#f0ede7;display:grid;place-items:center;isolation:isolate}
.problem-section .story-topline{position:absolute;top:0;left:0;right:0}
.problem-copy{text-align:center;position:relative;z-index:3;pointer-events:none;margin-top:-5px}
.problem-copy h2{font-size:clamp(74px,8.3vw,130px);line-height:.97;letter-spacing:-.075em}
.problem-copy h2 span{display:inline-block;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:6px;text-underline-offset:9px}
.problem-copy p{font-size:16px;line-height:1.6;margin-top:30px;color:#6c6861}
.problem-copy a{pointer-events:auto;font-size:12px;margin-top:22px}
.tool-chaos{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.chaos-window{position:absolute;background:white;border:1px solid #cdcbc6;border-radius:9px;box-shadow:0 10px 24px #4036270b;overflow:visible}
.mini-titlebar{display:flex;align-items:center;gap:5px;height:29px;padding:0 10px;background:#f8f8f6;border-bottom:1px solid #e5e5df;border-radius:9px 9px 0 0}
.mini-titlebar i{width:5px;height:5px;border:1px solid #d0d0cb;border-radius:50%}
.mini-titlebar span{font-size:8px;color:#86867e;margin-left:auto;font-family:DM Sans,Arial,sans-serif;white-space:nowrap}
.chaos-terminal{width:310px;left:-25px;top:19%;transform:rotate(-9deg);background:#222520;color:#e8e9e4}
.chaos-terminal .mini-titlebar{background:#2e322b;border-color:#42473c}
.chaos-terminal .mini-titlebar span{color:#a0a795}
.terminal-content{font-family:ui-monospace,monospace;padding:18px 18px 25px;font-size:10px;line-height:1.7}
.terminal-content>span{font-size:8px;color:#9cac90}
.terminal-content p{margin-top:15px}
.terminal-muted{color:#a2ad98}
.terminal-content b{font-size:8px;font-weight:400;display:block;margin-top:22px;color:#ffce00}
.chaos-ide{width:315px;left:7%;bottom:9%;transform:rotate(7deg)}
.ide-tabs{display:flex;gap:15px;font-size:8px;background:#f2f2f0;border-bottom:1px solid #deded8;padding:11px 13px;color:#7c7d78}
.ide-tabs span:first-child{color:#246fc6}
.code-columns{display:flex;font-size:9px;line-height:1.9;min-height:137px;text-align:left}
.code-columns>div{width:95px;flex-shrink:0;padding:13px 10px;background:#f5f5f2;border-right:1px solid #e1e2da;color:#83857c;white-space:pre}
.code-columns code{padding:14px;color:#71797e;font-size:9px}
.code-columns em{color:#ab77b5;font-style:normal}
.chaos-file{width:132px;height:158px;position:absolute;padding:20px 14px;background:#fffdfa;border:1px solid #d7d2c9;box-shadow:0 5px 13px #47361a08;clip-path:polygon(0 0,80% 0,100% 17%,100% 100%,0 100%);display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.chaos-file small{font-family:ui-monospace,monospace;font-size:25px;color:#9e9b93;margin-bottom:auto;font-weight:700}
.chaos-file strong{font-size:10px;font-weight:500;white-space:nowrap}
.chaos-file>span{font-size:7px;line-height:1.4;color:#aaa59c}
.file-one{top:6%;left:27%;transform:rotate(12deg)}
.file-two{top:9%;right:26%;transform:rotate(-15deg)}
.file-three{bottom:6%;right:33%;transform:rotate(-13deg);width:140px;height:142px}
.file-four{top:48%;left:-50px;transform:rotate(9deg);width:115px;height:135px}
.chaos-web{width:275px;right:0%;top:14%;transform:rotate(9deg)}
.mini-product{background:#d9e6dc;padding:22px 20px 27px;min-height:206px;position:relative;border-radius:0 0 8px 8px}
.mini-product svg{position:absolute;right:21px;top:22px;color:#ff3138;width:49px;height:49px}
.mini-product strong{display:block;font-size:25px;line-height:1.05;letter-spacing:-1.2px;color:#274d36;padding-top:12px}
.mini-product>span{display:block;font-size:8px;color:#577b65;margin-top:13px}
.mini-product b{display:inline-block;background:#274d36;color:white;font-size:7px;font-weight:400;padding:8px 12px;border-radius:20px;margin-top:13px}
.tool-tag{position:absolute;bottom:-13px;right:13px;padding:7px 10px;color:#5d5e59;background:#fff;border:1px solid #deded6;border-radius:4px;font-size:7px;letter-spacing:.5px}
.chaos-xcode{width:280px;right:2%;bottom:9%;transform:rotate(-7deg)}
.xcode-body{display:flex;align-items:center;padding:14px 12px;gap:8px;min-height:173px}
.xcode-body>code{font-size:7px;line-height:1.8;color:#959a9e}
.mini-phone{width:84px;min-height:144px;flex-shrink:0;border:4px solid #2d3032;border-radius:17px;margin-left:auto;padding:14px 7px 10px;background:#f6f0e8;position:relative}
.mini-phone:before{content:'';position:absolute;width:25px;height:5px;border-radius:8px;top:4px;left:26px;background:#2d3032}
.mini-phone svg{width:34px;height:24px;color:var(--green);margin-top:5px}
.mini-phone strong{font-size:11px;line-height:1.1;display:block;letter-spacing:-.4px;margin-top:7px}
.mini-phone span{font-size:5px;color:#8c8579;display:block;margin-top:5px;line-height:1.5}
.chaos-sticker{position:absolute;font-size:9px;padding:11px 14px;box-shadow:0 4px 8px #52452d08;white-space:nowrap}
.sticker-context{left:8%;top:54%;transform:rotate(-5deg);background:#ffeda3}
.sticker-cpu{right:24%;bottom:5%;transform:rotate(5deg);background:#ffbbbf}
#main>.solution-section{background:#e4eddf;min-height:100svh;padding-bottom:29px}
.solution-heading{display:flex;justify-content:space-between;align-items:flex-end;max-width:1120px;margin:28px auto 0;width:86%;gap:30px}
.solution-heading h2{font-size:clamp(48px,5.6vw,83px);line-height:1;letter-spacing:-.065em}
.solution-together{color:#427147}
.solution-heading p{font-size:14px;line-height:1.7;color:#5a6e53;margin-bottom:5px}
.assembly-wrap{max-width:980px;width:78%;margin:34px auto 0}
.assembly-labels{display:grid;grid-template-columns:15% 30% 55%;font-size:8px;letter-spacing:.9px;color:#6b7c62;margin-bottom:13px}
.assembly-labels>span{display:flex;gap:9px;align-items:center}
.assembly-labels>span:last-child{padding-left:4%}
.assembly-labels>span>span{font-size:15px;line-height:1}
.solution-assembly{position:relative;height:clamp(280px,43svh,480px);isolation:isolate}
.assembly-native{position:absolute;inset:0;overflow:hidden;border-radius:8px;box-shadow:0 20px 45px -17px #3d503b40;border:1px solid #cbd3c5;transition:opacity .6s var(--ease)}
.assembly-native>img{display:block;width:100%;height:auto}
.assembly-piece{position:absolute;top:0;bottom:0;background-image:url('assets/hop-studio-build.png');background-repeat:no-repeat;background-color:white;border:1px solid #ddd;border-radius:7px;box-shadow:0 15px 35px -15px #384d3e35;opacity:0;pointer-events:none;transform:translate(0,0) rotate(0);transition:transform 1.45s cubic-bezier(.22,.8,.22,1),opacity .35s ease,box-shadow 1.4s ease}
.assembly-terminal{left:14.85%;width:29.45%;background-size:339.56% auto;background-position:21.05% top;--from-x:-30%;--from-y:9%;--from-rotate:-8deg}
.assembly-preview{left:44.7%;width:52.2%;background-size:191.57% auto;background-position:93.51% top;--from-x:18%;--from-y:-5%;--from-rotate:7deg}
.assembly-rail{position:absolute;top:0;bottom:0;left:0;width:3.2%;border-radius:8px 0 0 8px;background:#f4f4f4;display:flex;align-items:center;flex-direction:column;padding-top:2.6%;gap:2.3%;z-index:3;transition:opacity .4s ease}
.assembly-project{width:75%;aspect-ratio:1;flex:none;min-height:0;color:var(--project-color);position:relative}
.assembly-project svg{position:absolute;inset:7.5%;width:85%;height:85%}
.assembly-project:first-child:after{content:'';position:absolute;inset:-8%;border:1.5px solid #282b26;border-radius:7px}
.assembly-add{font-size:clamp(10px,1.5vw,20px);color:#b4b8b0;font-weight:400;margin-top:2px}
.assembly-caption{position:absolute;right:4%;bottom:7%;background:#fff;border:1px solid #e1e5da;border-radius:24px;padding:11px 16px;display:flex;align-items:center;gap:8px;font-size:10px;box-shadow:0 4px 10px #364f2f06;transition:opacity .4s ease,transform .4s ease}
.assembly-caption .status-dot{width:5px;height:5px}
.story-ready .solution-assembly:not(.is-assembled) .assembly-native,.story-ready .solution-assembly:not(.is-assembled) .assembly-rail,.story-ready .solution-assembly:not(.is-assembled) .assembly-caption{opacity:0}
.story-ready .solution-assembly:not(.is-assembled) .assembly-piece{opacity:1}
.story-ready .solution-assembly:not(.is-assembling):not(.is-assembled) .assembly-piece{transform:translate(var(--from-x),var(--from-y)) rotate(var(--from-rotate));transition:none}
.story-ready .solution-assembly.is-assembling .assembly-piece{transform:translate(0,0) rotate(0);box-shadow:none;transition-delay:.45s}
.story-ready .solution-assembly.is-assembled .assembly-project{animation:project-home .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--project-order)*.11s)}
@keyframes project-home{from{opacity:0;transform:translateY(-25px) scale(.2) rotate(-35deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
.assembly-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px;font-size:10px;color:#72806b;min-height:28px}
#replay-assembly{background:transparent;display:flex;align-items:center;gap:8px;font-size:10px;padding:6px 0;color:#42583b;border-bottom:1px solid #9fae94}
#replay-assembly>span{font-size:19px;line-height:1}
#replay-assembly:hover{color:#1f2e1b;border-color:#1f2e1b}
.solution-bottom{max-width:1120px;width:86%;margin:26px auto 0;display:flex;align-items:center;justify-content:space-between;gap:25px}
.solution-bottom p{font-size:12px;line-height:1.6;color:#435b3d}
.solution-bottom p>span{font-size:10px;color:#819078}
.solution-bottom .inline-link{font-size:11px;margin:0;white-space:nowrap;border-color:#839477}
.assembly-note{text-align:center;font-size:8px;color:#89957f;margin:22px 6% 0;line-height:1.5}
.motion-paused .shape-drift{animation:none!important}
.motion-paused .assembly-piece,.motion-paused .assembly-native,.motion-paused .assembly-rail,.motion-paused .assembly-caption{transition:none!important}
.motion-paused .assembly-project{animation:none!important}
@media(min-width:1600px){.hero--products .hero-description{font-size:18px}.project-star{--size:165px}.project-semi{--size:190px}.project-arch{--size:180px}.project-flower{--size:145px}.project-square{--size:85px}.project-pentagon{--size:100px}.shape-drift>span{font-size:12px}.chaos-terminal{width:380px;left:3%}.chaos-ide{width:390px;left:8%}.chaos-web{width:330px;right:3%}.chaos-xcode{width:350px;right:6%}.chaos-file{width:160px;height:185px}.terminal-content{font-size:12px}.mini-product{min-height:245px}.solution-heading{margin-top:50px}.assembly-wrap{max-width:1140px;margin-top:42px}.solution-bottom{margin-top:30px}.solution-heading p{font-size:17px}}
@media(max-width:1000px){.project-star{--size:93px;left:7%}.project-semi{--size:115px;right:7%}.project-arch{--size:115px;left:8%}.project-flower{--size:95px;right:8%}.hero--products h1{font-size:10.3vw}.chaos-terminal{left:-75px;width:270px}.chaos-ide{left:-35px;width:280px}.chaos-web{right:-50px;width:245px}.chaos-xcode{right:-45px;width:250px}.file-one{left:25%;top:8%;width:110px;height:135px}.file-two{right:25%;top:8%;width:110px;height:135px}.file-three{right:34%;bottom:5%;width:120px;height:125px}.sticker-context{left:0%;top:52%}.sticker-cpu{right:10%;bottom:5%}.problem-copy h2{font-size:9vw}.problem-copy p{font-size:14px}.solution-heading{width:88%}.solution-heading p{font-size:12px}.assembly-wrap{width:87%;margin-top:40px}.solution-section .story-topline{padding-top:30px}.solution-bottom{width:88%}.assembly-caption{font-size:8px;padding:9px 12px}}
@media(max-width:700px){.hero--products .hero-scene{min-height:700px}.hero--products h1{font-size:11.9vw}.hero--products .hero-description{font-size:13px}.hero--products .hero-kicker{font-size:9px}.project-star{--size:80px;left:10%;top:8%}.project-square{--size:42px;left:42%;top:5%}.project-semi{--size:90px;right:6%;top:9%}.project-zigzag{--size:45px;left:-5%;top:42%}.project-pentagon{--size:45px;right:-4%;top:40%}.project-arch{--size:100px;left:9%;bottom:12%}.project-flower{--size:75px;right:12%;bottom:14%}.project-triangle{--size:40px;left:48%;bottom:7%}.shape-drift>span{font-size:8px;top:calc(100% + 5px)}.hero--products .hero-footer{font-size:6px}.hero--products .hero-footer>a{font-size:8px}.story-topline{padding-top:24px;margin:0 6%}.story-topline .eyebrow{font-size:8px}.story-bottomline{left:6%;right:6%;font-size:6px;bottom:22px}.story-bottomline>span:last-child{display:none}#main>.problem-section{min-height:max(100svh,810px)}.problem-copy{margin-top:-20px}.problem-copy h2{font-size:70px}.problem-copy p{font-size:12px;margin-top:24px}.problem-copy .inline-link{font-size:11px}.chaos-terminal{width:200px;left:-40px;top:9%;transform:rotate(-9deg)}.terminal-content{padding:12px;font-size:8px}.terminal-content p{margin-top:9px}.terminal-content b{font-size:6px;margin-top:12px}.terminal-content>span{font-size:6px}.mini-titlebar{height:23px;padding:0 7px;gap:4px}.mini-titlebar span{font-size:6px}.mini-titlebar i{width:4px;height:4px}.chaos-web{width:170px;right:-27px;top:11%}.mini-product{padding:14px;min-height:145px}.mini-product strong{font-size:19px}.mini-product svg{width:30px;height:30px;top:14px;right:12px}.mini-product>span{font-size:6px;margin-top:9px}.mini-product b{font-size:6px;padding:6px 9px;margin-top:9px}.tool-tag{font-size:5px;padding:6px;right:7px;bottom:-10px}.file-one{width:78px;height:101px;left:42%;top:5%;padding:12px 8px;transform:rotate(12deg)}.chaos-file strong{font-size:7px}.chaos-file small{font-size:18px}.chaos-file>span{font-size:5px}.file-two{width:82px;height:98px;right:-28px;top:44%;padding:12px 8px}.file-three{width:100px;height:115px;right:38%;bottom:3%;padding:12px 8px;z-index:3}.file-four{left:-56px;top:42%;width:84px;height:104px;padding:12px 8px}.chaos-ide{width:209px;left:-39px;bottom:12%;transform:rotate(7deg)}.ide-tabs{font-size:6px;gap:9px;padding:8px}.code-columns{font-size:6px;min-height:105px}.code-columns>div{width:66px;padding:10px 6px}.code-columns code{font-size:6px;padding:10px 7px}.chaos-xcode{width:204px;right:-37px;bottom:10%}.xcode-body{min-height:137px;padding:10px 7px;gap:5px}.xcode-body>code{font-size:5px}.mini-phone{width:65px;min-height:115px;border-width:3px;border-radius:14px;padding:12px 5px 8px}.mini-phone:before{left:17px;width:23px;height:4px}.mini-phone strong{font-size:9px}.mini-phone svg{width:26px;height:20px}.mini-phone span{font-size:4px}.sticker-context{font-size:7px;padding:8px 10px;left:-14px;top:29%;transform:rotate(-5deg)}.sticker-cpu{font-size:7px;padding:8px 10px;right:-15px;bottom:30%}.solution-heading{display:block;width:88%;margin-top:34px;text-align:center}.solution-heading h2{font-size:clamp(43px,9.5vw,65px)}.solution-heading p{font-size:12px;margin-top:19px}.assembly-wrap{width:90%;margin-top:39px}.solution-assembly{aspect-ratio:1.28}.assembly-native>img{width:130%;max-width:none}.assembly-native{border-radius:6px}.assembly-terminal{left:19.3%;width:38.28%;background-size:339.56% auto;--from-x:-32%;--from-y:5%}.assembly-preview{left:58.1%;width:67.86%;background-size:191.57% auto;--from-x:12%;--from-y:-5%}.solution-assembly{clip-path:inset(-35% -5% -20% -5%)}.assembly-rail{width:4.16%;padding-top:3.38%;gap:2%}.assembly-project{width:80%}.assembly-project:first-child:after{border-width:1px;border-radius:4px}.assembly-add{font-size:12px}.assembly-labels{grid-template-columns:21% 38% 41%;font-size:6px;letter-spacing:.3px}.assembly-labels>span{gap:4px}.assembly-labels>span>span{font-size:11px}.assembly-labels>span:last-child{padding-left:1%}.assembly-caption{font-size:7px;right:5%;bottom:6%;padding:8px 10px}.assembly-controls{font-size:8px;margin-top:17px;gap:10px}#replay-assembly{font-size:8px;white-space:nowrap;gap:5px}#replay-assembly>span{font-size:16px}.solution-bottom{margin-top:28px;flex-direction:column;text-align:center;gap:16px}.solution-bottom p{font-size:11px}.solution-bottom p>span{font-size:9px}.solution-bottom .inline-link{font-size:10px}.assembly-note{font-size:7px;max-width:300px;margin:20px auto 0;padding:0 10px}#main>.solution-section{padding-bottom:30px}.story-topline img{width:40px}}
@media(prefers-reduced-motion:reduce){.shape-drift,.story-ready .solution-assembly.is-assembled .assembly-project{animation:none!important}.assembly-piece{display:none!important}.assembly-native,.assembly-rail,.assembly-caption{opacity:1!important;transition:none!important}}
@media(max-width:700px){.solution-assembly{height:auto;aspect-ratio:1.28}}

/* One final product scene: the assembly becomes the capabilities walkthrough. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#main>.solution-final{background:#ebece5;padding-bottom:34px}
.solution-final .solution-heading{max-width:1260px;width:90%;margin-top:28px}
.solution-final .solution-heading h2{font-size:clamp(48px,5.3vw,80px)}
.solution-final .solution-heading p{font-size:14px;color:#6a7064}
.solution-product{width:90%;max-width:1260px;margin:30px auto 0}
.solution-final .demo-toolbar{margin-bottom:18px;gap:20px}
.solution-final .demo-tabs{gap:7px}
.solution-final .demo-tabs button{font-size:12px;min-height:45px;padding:0 17px}
.solution-final .demo-tabs button:not([aria-selected=true]):hover{background:#dfe1d7}
.solution-final #replay-assembly{border:0;min-height:44px;padding:0 0 0 14px;color:#646b5c;gap:7px;flex-shrink:0}
.solution-final #replay-assembly>span:last-child{font-size:11px}
.solution-final .solution-assembly{height:clamp(300px,46svh,590px);clip-path:none;overflow:visible}
.solution-final .assembly-native{border-radius:10px;box-shadow:0 15px 35px -22px #252b2033;overflow:hidden;background:#f4f4f4}
.solution-final .assembly-native>img{width:100%;height:auto;max-width:none}
.solution-final .assembly-rail{border-radius:10px 0 0 10px;gap:2.3%;width:3.2%;padding-top:2.6%}
.solution-final .assembly-terminal{left:14.85%;width:29.45%;--from-x:-19%;--from-y:5%;--from-rotate:-6deg}
.solution-final .assembly-preview{left:44.7%;width:52.2%;--from-x:7%;--from-y:-4%;--from-rotate:5deg}
.solution-final .product-expand{z-index:5;bottom:15px;right:16px;transition:opacity .3s,background .2s,transform .2s}
.story-ready .solution-final .solution-assembly:not(.is-assembled) .product-expand{opacity:0;pointer-events:none;visibility:hidden}
.solution-final .demo-bottom{padding-top:23px;align-items:flex-start;gap:30px}
.solution-final .demo-bottom h3{font-size:21px;margin:8px 0 7px}
.solution-final .demo-bottom p{font-size:12px;max-width:680px;min-height:0}
.solution-final .demo-step-label{font-size:8px;letter-spacing:.9px}
.solution-final .illustration-note{font-size:9px;padding-top:2px}
.site-footer{border-top:1px solid #d9dcd1;background:#ebece5;padding-top:24px;padding-bottom:24px}
.site-footer .wordmark img{width:52px}
.site-footer .footer-build{font-size:9px}
@media(min-width:1600px){.solution-final .solution-heading{margin-top:40px}.solution-product{margin-top:36px}.solution-final .demo-tabs button{font-size:14px;min-height:50px;padding:0 20px}}
@media(max-width:800px){.solution-final .solution-heading p{font-size:12px}.solution-final .demo-tabs button{font-size:10px;padding:0 11px}.solution-final .demo-toolbar{gap:10px}.solution-final .demo-bottom h3{font-size:19px}.solution-final .demo-bottom p{font-size:11px}.solution-final .illustration-note{font-size:8px}}
@media(max-width:700px){.solution-final .solution-heading{width:88%;margin-top:32px}.solution-final .solution-heading h2{font-size:clamp(43px,10.8vw,64px)}.solution-final .solution-heading p{font-size:12px;margin-top:18px}.solution-product{width:90%;margin-top:28px}.solution-final .demo-toolbar{gap:7px;margin-bottom:15px;align-items:center}.solution-final .demo-tabs{gap:4px;flex:1}.solution-final .demo-tabs button{flex:1;max-width:none;min-height:44px;padding:0 8px;font-size:9px;line-height:1.35;text-align:left}.solution-final .demo-tabs button>span{display:none}.solution-final #replay-assembly{padding:0 4px;min-width:28px;justify-content:center}.solution-final #replay-assembly>span:last-child{display:none}.solution-final #replay-assembly>span:first-child{font-size:22px}.solution-final .solution-assembly{height:clamp(260px,36svh,380px);aspect-ratio:auto}.solution-final .assembly-native>img{width:130%}.solution-final .assembly-terminal{left:19.3%;width:38.28%}.solution-final .assembly-preview{left:58.1%;width:67.86%}.solution-final .assembly-rail{width:4.16%;padding-top:3.38%;gap:2%}.solution-final .product-expand{font-size:9px;min-height:36px;bottom:12px;right:12px;padding:0 11px}.solution-final .demo-bottom{padding-top:21px;gap:13px;flex-direction:column}.solution-final .demo-bottom h3{font-size:19px;max-width:320px;line-height:1.2}.solution-final .demo-bottom p{font-size:11px;line-height:1.6}.solution-final .illustration-note{text-align:left;font-size:8px}.solution-final .illustration-note br{display:none}.solution-final .illustration-note br:after{content:' '}.site-footer .footer-build{font-size:8px}.site-footer>div{gap:10px}}

/* Ideas on a dot canvas, a crowded laptop, then a clear white workspace. */
.hero--products .canvas-grid{background-image:radial-gradient(circle,#c4c8cd 1px,transparent 1.15px);background-size:24px 24px;mask-image:none;opacity:.62}
#main>.problem-section{background:#e9e9e6;min-height:max(100svh,810px);display:flex;align-items:center;justify-content:center;padding:78px 0 66px}
.laptop-scene{position:relative;width:91%;max-width:1520px}
.laptop-frame{position:relative;padding:13px 13px 19px;background:#161719;border:1px solid #424345;border-radius:22px 22px 10px 10px;box-shadow:inset 0 0 0 2px #222326,0 22px 40px -25px #12131066}
.laptop-screen{position:relative;height:clamp(610px,calc(100svh - 186px),850px);overflow:hidden;border-radius:10px 10px 3px 3px;background:radial-gradient(ellipse at 8% 110%,#b6c7d7 0,transparent 58%),radial-gradient(ellipse at 100% 0,#e8d5c5 0,transparent 55%),#e5e2e7;isolation:isolate}
.laptop-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);height:19px;width:132px;background:#161719;border-radius:0 0 9px 9px;z-index:7}
.laptop-notch>span{display:block;width:5px;height:5px;margin:6px auto 0;background:#26312e;border:1px solid #34403b;border-radius:50%}
.desktop-menubar{height:29px;position:absolute;top:0;left:0;right:0;z-index:6;background:#ffffff50;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-family:Arial,sans-serif;font-size:9px;color:#44454b;box-shadow:0 1px 0 #41424c0a}
.desktop-menubar>div{display:flex;align-items:center;gap:16px}
.desktop-menubar strong{font-size:9px;font-weight:600}
.desktop-apple{font-size:13px;color:#3d4046}
.desktop-battery{width:16px;height:8px;border:1px solid #65686f;border-radius:2px;position:relative}
.desktop-battery:before{content:'';position:absolute;left:1px;top:1px;bottom:1px;width:9px;background:#65686f;border-radius:1px}
.desktop-battery:after{content:'';position:absolute;right:-3px;top:2px;width:2px;height:3px;background:#65686f}
.laptop-base{height:16px;position:relative;width:106%;margin-left:-3%;background:linear-gradient(#8b8c8e 0,#55575a 25%,#3a3b3d 65%,#1c1d1f 100%);border-radius:1px 1px 48% 48% / 1px 1px 90% 90%;box-shadow:0 14px 20px -10px #2225}
.laptop-base>span{position:absolute;top:0;left:43%;width:14%;height:5px;border-radius:0 0 8px 8px;background:#3b3d40;box-shadow:inset 0 -1px 1px #afb0b1}
.desktop-dock{position:absolute;z-index:5;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:7px 9px;background:#ffffff70;border:1px solid #ffffffb8;border-radius:13px;box-shadow:0 7px 15px #42465115}
.desktop-dock>span{width:31px;height:31px;border-radius:7px;display:grid;place-items:center;font-size:19px;box-shadow:0 2px 3px #0002;border:1px solid #0000000b;font-family:Arial,sans-serif}
.desktop-dock>i{height:28px;width:1px;background:#858b963d;margin:0 2px}
.dock-finder{background:linear-gradient(90deg,#55b2f2 50%,#cee9fb 50%);color:#144973}
.dock-terminal{background:#25272b;color:white;font-family:monospace!important;font-size:15px!important}
.dock-code{background:#f7f8fa;color:#1677bd;font-weight:700}
.dock-browser{background:#f8f9fd;color:#2f86df;font-size:27px!important}
.dock-xcode{background:linear-gradient(135deg,#31b9ed,#175bce);color:#fff;font-size:28px!important}
.dock-folder{background:#5bb8f0;color:#caeeff;font-size:24px!important}
.dock-trash{background:#eceef1;color:#8a8f97}
.laptop-screen .tool-chaos{inset:29px 0 54px}
.laptop-screen .problem-copy{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:50%;margin:0}
.laptop-screen .problem-copy h2{font-size:clamp(66px,6.6vw,105px)}
.laptop-screen .problem-copy p{font-size:13px;line-height:1.6;margin-top:23px;color:#62636b}
.laptop-screen .problem-copy .inline-link{font-size:11px;margin-top:18px}
.laptop-screen .chaos-terminal{left:1%;top:13%;width:27%;max-width:330px;transform:rotate(-5deg)}
.laptop-screen .chaos-ide{left:5%;bottom:2%;width:28%;max-width:330px;transform:rotate(4deg)}
.laptop-screen .chaos-web{right:1%;top:8%;width:24%;max-width:280px;transform:rotate(5deg)}
.laptop-screen .chaos-xcode{right:3%;bottom:0;width:26%;max-width:300px;transform:rotate(-4deg)}
.laptop-screen .chaos-file{width:107px;height:127px;padding:15px 10px}
.laptop-screen .chaos-file strong{font-size:8px}
.laptop-screen .chaos-file small{font-size:22px}
.laptop-screen .file-one{left:29%;top:3%;transform:rotate(8deg)}
.laptop-screen .file-two{right:26%;top:5%;transform:rotate(-8deg)}
.laptop-screen .file-three{right:31%;bottom:0;width:120px;height:120px;transform:rotate(-10deg)}
.laptop-screen .file-four{left:-2%;top:56%;width:85px;height:105px;transform:rotate(6deg)}
.laptop-screen .sticker-context{left:6%;top:53%;font-size:8px;transform:rotate(-3deg)}
.laptop-screen .sticker-cpu{right:4%;bottom:34%;font-size:8px;transform:rotate(3deg)}
#main>.solution-final{background:#fff}
.solution-final .solution-together{color:var(--ink)}
.solution-final .solution-assembly{height:auto;aspect-ratio:2560 / 1664}
.solution-final .assembly-native>img{width:100%}
.solution-final .assembly-native{box-shadow:0 12px 25px -20px #252b2020}
.site-footer{background:#fff;border-top-color:#ecece7}
@media(min-width:1600px){.laptop-screen .chaos-terminal{max-width:370px}.laptop-screen .chaos-ide{max-width:390px}.laptop-screen .chaos-web{max-width:330px}.laptop-screen .chaos-xcode{max-width:350px}.laptop-screen .chaos-file{width:145px;height:163px}.laptop-screen .chaos-file strong{font-size:10px}.laptop-screen .file-three{width:150px;height:150px}.laptop-screen .problem-copy p{font-size:16px}}
@media(max-width:1000px){.laptop-screen .chaos-terminal{left:-5%;width:30%}.laptop-screen .chaos-web{right:-4%;width:28%}.laptop-screen .chaos-ide{left:-2%;width:31%}.laptop-screen .chaos-xcode{right:-3%;width:30%}.laptop-screen .problem-copy h2{font-size:8vw}.laptop-screen .chaos-file{width:90px;height:110px}.laptop-screen .file-one{left:26%}.laptop-screen .file-two{right:23%}.laptop-screen .file-three{width:100px;height:110px;right:32%}.laptop-screen .terminal-content{padding:12px;font-size:8px}.laptop-screen .terminal-content b{font-size:6px}.laptop-screen .sticker-context{left:1%}.laptop-screen .sticker-cpu{right:0%}.desktop-menubar>div{gap:10px}.laptop-notch{width:108px}}
@media(max-width:700px){#main>.problem-section{min-height:100svh;padding:70px 0 68px}.laptop-scene{width:94%}.laptop-frame{padding:7px 7px 12px;border-radius:15px 15px 7px 7px}.laptop-screen{height:clamp(650px,calc(100svh - 178px),820px);border-radius:7px 7px 2px 2px}.laptop-base{height:10px;width:104%;margin-left:-2%}.laptop-notch{width:73px;height:13px;border-radius:0 0 6px 6px}.laptop-notch>span{width:3px;height:3px;margin-top:4px}.desktop-menubar{height:23px;font-size:6px;padding:0 8px}.desktop-menubar>div{gap:8px}.desktop-menubar strong{font-size:7px}.desktop-menubar>div:first-child>span:nth-last-child(-n+3){display:none}.desktop-menubar>div:last-child>span:first-child{display:none}.desktop-apple{font-size:10px}.desktop-battery{width:12px;height:6px}.desktop-battery:before{width:7px}.desktop-battery:after{top:1px}.laptop-screen .tool-chaos{inset:23px 0 48px}.laptop-screen .problem-copy{top:47%;width:84%}.laptop-screen .problem-copy h2{font-size:clamp(48px,12vw,66px);line-height:.98}.laptop-screen .problem-copy h2 span{text-decoration-thickness:4px;text-underline-offset:6px}.laptop-screen .problem-copy p{font-size:10px;margin-top:20px}.laptop-screen .problem-copy .inline-link{font-size:10px;margin-top:16px}.laptop-screen .chaos-terminal{left:-9%;top:3%;width:53%;transform:rotate(-6deg)}.laptop-screen .terminal-content{font-size:6px;padding:10px}.laptop-screen .terminal-content>span{font-size:5px}.laptop-screen .terminal-content b{font-size:5px;margin-top:10px}.laptop-screen .terminal-content p{margin-top:8px}.laptop-screen .chaos-web{right:-10%;top:6%;width:48%;transform:rotate(6deg)}.laptop-screen .mini-product{min-height:115px;padding:10px}.laptop-screen .mini-product strong{font-size:16px}.laptop-screen .mini-product>span{font-size:5px}.laptop-screen .mini-product b{font-size:5px}.laptop-screen .mini-product svg{width:23px;height:23px;right:8px}.laptop-screen .chaos-ide{left:-10%;bottom:4%;width:57%;transform:rotate(5deg)}.laptop-screen .chaos-xcode{right:-12%;bottom:2%;width:58%;transform:rotate(-6deg)}.laptop-screen .chaos-file{width:66px;height:85px;padding:10px 7px}.laptop-screen .chaos-file strong{font-size:5px}.laptop-screen .chaos-file small{font-size:16px}.laptop-screen .chaos-file>span{font-size:4px}.laptop-screen .file-one{left:43%;top:0%;transform:rotate(8deg)}.laptop-screen .file-two{right:-8%;top:42%;width:60px;height:80px}.laptop-screen .file-three{right:32%;bottom:-1%;width:79px;height:92px;z-index:3}.laptop-screen .file-four{left:-10%;top:42%;width:65px;height:85px}.laptop-screen .sticker-context{left:-4%;top:28%;font-size:5px;padding:6px 8px}.laptop-screen .sticker-cpu{right:-4%;bottom:28%;font-size:5px;padding:6px 8px}.desktop-dock{gap:6px;padding:6px;bottom:7px;border-radius:10px}.desktop-dock>span{width:24px;height:24px;border-radius:5px;font-size:15px}.desktop-dock>i{height:22px;margin:0 1px}.dock-terminal{font-size:11px!important}.dock-browser,.dock-xcode,.dock-folder{font-size:20px!important}.solution-final .solution-assembly{height:auto;aspect-ratio:2560 / 1664}.solution-final .assembly-native>img{width:100%}.solution-final .assembly-terminal{left:14.85%;width:29.45%}.solution-final .assembly-preview{left:44.7%;width:52.2%}.solution-final .assembly-rail{width:3.2%;padding-top:2.6%;gap:2.3%}.solution-final .assembly-project{width:75%}}