/* Interactive studio: a real layout transformation, built entirely with local assets. */
.studio-section{background:linear-gradient(130deg,#f8fcff,#edf8ff 65%,#f7fcff);border-block:1px solid #dceef8;overflow:hidden}
.studio-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.studio-copy h2{font-size:clamp(37px,3.9vw,57px);line-height:1.12;letter-spacing:-2px}
.studio-copy>p{font-size:13px;line-height:1.9;max-width:360px;margin:25px 0}
.studio-benefits{list-style:none;padding:0;margin:0 0 29px;display:grid;gap:12px}
.studio-benefits li{font-size:12px;color:var(--ink);display:flex;gap:10px;align-items:center}
.studio-benefits li:before{content:'✓';width:20px;height:20px;display:grid;place-items:center;background:#def2fd;border-radius:50%;color:var(--primary);font-size:11px;flex-shrink:0}
.studio-demo{min-width:0;border:1px solid #cde6f4;background:#ffffffb8;border-radius:18px;padding:24px 26px 19px;box-shadow:0 25px 65px #235e8310}
.studio-demo-top,.studio-demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.studio-label{display:flex;align-items:center;gap:8px;font-size:8px;font-weight:650;letter-spacing:1.4px;color:#376581}
.studio-label>span{width:6px;height:6px;background:#009ed2;border-radius:50%;box-shadow:0 0 0 4px #009ed20b}
.studio-edition{font-size:8px;letter-spacing:1px;color:#819bad}
.studio-device-controls{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;padding:4px;margin:25px auto 0;background:#eaf4fa;border:1px solid #d7eaf5;border-radius:9px}
.studio-device-controls button{display:flex;align-items:center;gap:7px;background:transparent;border:0;border-radius:6px;padding:9px 14px;font-size:10px;font-weight:600;color:#5f7b8e;transition:background .2s,color .2s,box-shadow .2s}
.studio-device-controls button[aria-pressed=true]{background:white;color:#007da8;box-shadow:0 2px 7px #234c7010}
.studio-device-controls button:hover{color:#007da8}
.studio-device-controls button:focus-visible{outline:2px solid #007da8;outline-offset:3px}
.studio-device-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.studio-stage{height:355px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.studio-stage-orbit{position:absolute;width:280px;height:280px;border:1px solid #cee9f8;border-radius:50%;z-index:-1}
.studio-stage-orbit:after{content:'';position:absolute;inset:22px;border:1px dashed #d5eaf6;border-radius:50%}
.studio-browser{width:100%;max-width:500px;border:1px solid #d0e4f0;border-radius:10px;background:white;box-shadow:0 17px 35px #2a66881a;overflow:hidden;transition:width .55s cubic-bezier(.22,.68,.2,1),border-radius .55s}
.studio-browser-bar{height:27px;background:#f5f9fc;border-bottom:1px solid #e3edf4;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px;color:#91a6b5}
.studio-browser-dots{display:flex;gap:4px}
.studio-browser-dots i{height:5px;width:5px;background:#c3d7e4;border-radius:50%}
.studio-browser-dots i:first-child{background:#7ebddc}
.studio-browser-address{font-size:7px;letter-spacing:.4px;color:#67869b}
.studio-site{padding:19px 23px 14px}
.studio-site-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.studio-site-nav img{width:100px;height:auto;mix-blend-mode:multiply}
.studio-site-nav>span{font-size:5px;font-weight:600;letter-spacing:1px;color:#658297}
.studio-site-nav>b{display:none;font-size:12px;font-weight:400;color:#25658a}
.studio-site-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;align-items:center;padding:28px 0 23px}
.studio-site-copy small{font-size:5px;letter-spacing:1.1px;color:#6f8da1;display:block;margin-bottom:10px}
.studio-site-copy h3{font-size:32px;line-height:1.08;letter-spacing:-1.2px;color:#163b54;font-weight:750}
.studio-site-copy h3 em{color:#009ed2;font-style:normal}
.studio-site-copy p{font-size:7px;line-height:1.7;margin-top:10px;color:#678599}
.studio-site-cta{display:inline-block;padding:8px 10px;margin-top:13px;background:#007da8;color:white;border-radius:3px;font-size:6px;font-weight:600}
.studio-site-art{position:relative;min-height:172px;display:grid;place-items:center;background:radial-gradient(ellipse,#d4f1ff,transparent 70%)}
.studio-art-halo{position:absolute;width:142px;height:142px;border:1px solid #b5e1f8;border-radius:50%;transform:rotate(-26deg) scaleY(.65)}
.studio-art-diamond{width:100px;height:116px;clip-path:polygon(22% 0,78% 0,100% 28%,50% 100%,0 28%);background:conic-gradient(from 145deg at 50% 28%,#037fad 0deg,#b9efff 60deg,#0a9cd0 112deg,#d5f5ff 160deg,#59c8ed 215deg,#008ac1 270deg,#b2eeff 320deg,#037fad 360deg);transform:rotate(-9deg);animation:studioCrystal 6s ease-in-out infinite}
.studio-art-star{position:absolute;right:4%;top:5px;color:#009ed2;font-size:27px}
.studio-art-caption{position:absolute;bottom:0;font-size:4px;letter-spacing:1px;color:#5b8aa6}
.studio-site-bottom{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e3eff6;padding-top:12px;font-size:4px;font-weight:600;letter-spacing:.7px;color:#6c8b9f}
.studio-floating-note{position:absolute;right:-9px;bottom:30px;font-size:9px;line-height:1.7;color:#5c7e93;border:1px solid #d7eaf5;border-radius:9px;background:#fffffff5;padding:11px 16px 11px 43px;box-shadow:0 7px 20px #1c6c9010;pointer-events:none}
.studio-floating-note>span{position:absolute;left:13px;top:14px;font-size:22px;color:#009ed2}
.studio-floating-note strong{font-weight:600;color:#214f6d}
.studio-demo-bottom{border-top:1px solid #e0edf5;padding-top:14px}
.studio-demo-bottom p{font-size:9px;line-height:1.6;color:#557b93}
.studio-demo-bottom>span{font-size:8px;white-space:nowrap;color:#7a94a6}
.studio-demo[data-device=tablet] .studio-browser{width:340px}
.studio-demo[data-device=tablet] .studio-site{padding:17px}
.studio-demo[data-device=tablet] .studio-site-copy h3{font-size:27px}
.studio-demo[data-device=tablet] .studio-site-nav>span{display:none}
.studio-demo[data-device=tablet] .studio-site-nav>b{display:block}
.studio-demo[data-device=tablet] .studio-art-diamond{width:78px;height:95px}
.studio-demo[data-device=tablet] .studio-art-halo{width:115px;height:115px}
.studio-demo[data-device=mobile] .studio-browser{width:192px;border-radius:18px;border:5px solid #21475f}
.studio-demo[data-device=mobile] .studio-browser-bar{height:18px;padding-inline:8px}
.studio-demo[data-device=mobile] .studio-browser-address{font-size:5px}
.studio-demo[data-device=mobile] .studio-browser-dots{gap:2px}
.studio-demo[data-device=mobile] .studio-browser-dots i{height:3px;width:3px}
.studio-demo[data-device=mobile] .studio-site{padding:12px 14px}
.studio-demo[data-device=mobile] .studio-site-nav img{width:76px}
.studio-demo[data-device=mobile] .studio-site-nav>span{display:none}
.studio-demo[data-device=mobile] .studio-site-nav>b{display:block}
.studio-demo[data-device=mobile] .studio-site-hero{grid-template-columns:1fr;gap:8px;padding:17px 0 10px}
.studio-demo[data-device=mobile] .studio-site-copy h3{font-size:25px}
.studio-demo[data-device=mobile] .studio-site-copy h3 br:nth-of-type(2){display:none}
.studio-demo[data-device=mobile] .studio-site-copy small{font-size:4px;letter-spacing:.6px;margin-bottom:8px}
.studio-demo[data-device=mobile] .studio-site-copy p{font-size:6px;margin-top:7px}
.studio-demo[data-device=mobile] .studio-site-cta{font-size:5px;margin-top:8px;padding:7px}
.studio-demo[data-device=mobile] .studio-site-art{min-height:80px}
.studio-demo[data-device=mobile] .studio-art-diamond{width:51px;height:61px}
.studio-demo[data-device=mobile] .studio-art-halo{width:100px;height:70px}
.studio-demo[data-device=mobile] .studio-art-star{font-size:18px;right:14%}
.studio-demo[data-device=mobile] .studio-art-caption{display:none}
.studio-demo[data-device=mobile] .studio-site-bottom{font-size:3px;letter-spacing:0;padding-top:8px}
.studio-process{border-top:1px solid #cfe6f4;display:grid;grid-template-columns:1fr 3.1fr;gap:45px;margin-top:65px;padding-top:35px}
.studio-process-intro .eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:12px;display:block}
.studio-process-intro h3{font-size:23px;line-height:1.3;letter-spacing:-.7px}
.studio-process ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.studio-process li{position:relative}
.studio-process li:before{content:'';display:block;width:8px;height:8px;border-radius:50%;background:#009ed2;box-shadow:0 0 0 5px #d8effc;margin:5px 0 19px}
.studio-process li:not(:last-child):after{content:'';position:absolute;height:1px;background:#c4e2f3;top:9px;left:18px;width:calc(100% - 8px)}
.studio-process li>span{font-size:7px;letter-spacing:1.1px;color:#42738f;font-weight:600}
.studio-process h4{font-size:14px;margin:9px 0 8px;letter-spacing:-.3px}
.studio-process li p{font-size:10px;line-height:1.8;max-width:175px}
@keyframes studioCrystal{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:4deg}}
@media(max-width:1150px){.studio-layout{gap:35px;grid-template-columns:.8fr 1.2fr}.studio-demo{padding-inline:20px}.studio-stage{height:340px}.studio-site{padding:17px}.studio-site-copy h3{font-size:28px}.studio-art-diamond{width:80px;height:97px}.studio-art-halo{width:120px;height:120px}.studio-site-nav>span{font-size:4px;letter-spacing:.5px}.studio-process{gap:25px;grid-template-columns:1fr 3.4fr}.studio-process ol{gap:18px}}
@media(max-width:900px){.studio-layout{grid-template-columns:1fr;gap:32px}.studio-copy h2 br:nth-of-type(1){display:none}.studio-copy>p{max-width:540px}.studio-benefits{grid-template-columns:1fr;gap:9px}.studio-demo{max-width:650px;width:100%;justify-self:center}.studio-stage{height:370px}.studio-site-copy h3{font-size:32px}.studio-art-diamond{width:100px;height:116px}.studio-process{grid-template-columns:1fr;margin-top:40px;gap:25px}.studio-process-intro h3 br{display:none}}
@media(max-width:640px){.studio-copy h2{font-size:39px}.studio-copy .eyebrow{font-size:7px;letter-spacing:1px}.studio-copy>p{font-size:13px}.studio-demo{padding:19px 14px 16px;border-radius:12px}.studio-label{font-size:6px;letter-spacing:.9px}.studio-edition{font-size:6px}.studio-device-controls{margin-top:20px}.studio-device-controls button{padding:9px 10px;font-size:9px;gap:5px}.studio-device-controls svg{width:14px;height:14px}.studio-stage{height:340px}.studio-site{padding:14px}.studio-site-copy h3{font-size:clamp(23px,5.5vw,31px)}.studio-site-nav>span{display:none}.studio-site-nav>b{display:block}.studio-site-nav img{width:88px}.studio-site-copy small{font-size:4px;letter-spacing:.6px}.studio-site-art{min-height:147px}.studio-art-diamond{width:70px;height:89px}.studio-art-halo{width:95px;height:110px}.studio-art-star{font-size:20px}.studio-art-caption{font-size:3px;letter-spacing:.5px}.studio-site-bottom{font-size:3px;letter-spacing:.3px}.studio-site-cta{font-size:5px;padding:8px}.studio-floating-note{right:-5px;bottom:15px;padding:7px 11px 7px 33px;font-size:8px}.studio-floating-note>span{left:9px;top:8px;font-size:19px}.studio-demo-bottom{align-items:start;gap:8px}.studio-demo-bottom p{font-size:8px;max-width:180px}.studio-demo-bottom>span{font-size:7px;padding-top:2px}.studio-process ol{grid-template-columns:1fr 1fr;gap:28px 20px}.studio-process li:nth-child(2):after{display:none}.studio-process h4{font-size:14px}.studio-process li p{font-size:11px}.studio-process-intro h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.studio-browser{transition:none}.studio-art-diamond{animation:none}}