/* WL Web Design 3.3 — layouts requested after live testing */
/* Clear separation between the continuous technology strip and the interactive showcase. */
.wlx-site .wl2-ticker-outer{position:relative;z-index:2;margin-bottom:clamp(62px,6vw,116px)!important}
.wlx-site .wl31-section-container{margin-top:0!important;padding-top:0!important}
.wlx-site .wl31-section-container .wl31-experience{margin-top:0!important}
/* Product mockups should read as intentional dark UI previews, not tiny pasted white rectangles. */
.wlx-site .wl21-service-detail{height:clamp(205px,16vw,275px)!important;padding:clamp(16px,1.8vw,30px)!important;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 55% 0%,rgba(60,131,240,.19),transparent 74%),#101d32}
.wlx-site .wl21-mini-browser{display:block;width:min(96%,650px)!important;max-width:100%!important;min-height:175px;height:auto!important;border-radius:17px!important;background:#152137!important;color:#f3f8ff!important;padding:20px 24px!important;box-shadow:0 20px 45px rgba(0,0,0,.21)!important;border:1px solid rgba(150,187,250,.3)!important;overflow:hidden}
.wlx-site .wl21-mini-browser i{background:#6199e8}
.wlx-site .wl21-mini-browser strong{font-size:clamp(20px,2.1vw,35px)!important;line-height:1.12!important;margin:15px 0 12px!important;color:#f3f8ff!important}
.wlx-site .wl21-mini-browser>span:not(.wl21-mini-browser-button){width:62%;height:7px;background:linear-gradient(90deg,#5f81b4,#2c4061);margin:0 0 9px}
.wlx-site .wl21-mini-browser-button{display:inline-block;margin-top:10px!important;background:#287dff!important;border-radius:7px;font-size:10px!important;padding:8px 12px!important;color:white!important}
.wlx-site .wl21-shop-demo{display:block;width:min(95%,630px)!important;max-width:100%!important;min-height:171px;border-radius:17px!important;background:#142237!important;color:#f6faff!important;padding:20px 24px!important;border:1px solid rgba(150,187,250,.32)!important;box-shadow:0 20px 45px rgba(0,0,0,.22)!important;overflow:hidden}
.wlx-site .wl21-shop-demo>span{font-size:11px!important;letter-spacing:.13em;color:#a4c6ff!important}
.wlx-site .wl21-shop-demo>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px!important;margin:12px 0!important}
.wlx-site .wl21-shop-demo b{height:65px!important;border-radius:10px!important;background:linear-gradient(140deg,#29588c,#10274e)!important;border:1px solid #386eab;color:#9ec9ff;font-size:25px}
.wlx-site .wl21-shop-demo small{display:flex;align-items:center;gap:14px;justify-content:space-between;color:#a8c5ea;font-size:11px!important}
.wlx-site .wl21-shop-demo small strong{color:#e9f2ff;white-space:nowrap}
.wlx-site .wl21-service-detail .wl21-workflow-demo{width:min(96%,650px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(6px,1vw,16px)}
.wlx-site .wl21-service-detail .wl21-workflow-demo span{flex:1 1 100px;max-width:180px;overflow-wrap:anywhere}
.wlx-site .wl21-service-detail .wl21-speed-demo{width:min(95%,630px);padding:10px}
/* The lab tools are readable on wide monitors and no longer stretch edge to edge. */
.wlx-site .wl3-tools,body .wl3-tools{width:min(100% - 32px,1380px)!important;max-width:1380px!important;margin:clamp(48px,7vw,100px) auto!important;padding:clamp(20px,3vw,46px)!important}
.wlx-site .wl3-tools__grid,body .wl3-tools__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px!important}
.wl3-tools__grid section{min-width:0;overflow:hidden;padding:clamp(17px,1.9vw,26px)!important}
.wl3-tools__grid h3{font-size:clamp(17px,1.6vw,24px)!important;overflow-wrap:anywhere}
.wl3-tools label{flex-wrap:wrap;align-items:center;min-width:0;gap:8px}
.wl3-tools label>span,.wl3-tools label>small{min-width:0}
.wl3-tools input,.wl3-tools select{flex:0 1 auto;max-width:min(100%,180px)!important}
.wl3-swatches span{min-width:0;overflow:hidden;word-break:break-word}
/* Prevent notification button from crushing the title on phones. */
#wl3-chat-root .wl3-chat__head{flex-wrap:wrap}
#wl3-chat-root .wl3-chat__head>span:nth-child(2){flex:1;min-width:110px}
#wl3-chat-root .wl3-chat__sound{border:1px solid rgba(134,183,255,.35);background:#1a365b;color:#deebff;cursor:pointer;border-radius:100px;font-size:10px;line-height:1.2;padding:7px 10px;white-space:nowrap}
#wl3-chat-root .wl3-chat__sound:focus-visible{outline:2px solid #b2d7ff;outline-offset:2px}
#wl3-chat-root.wl3-chat--unread .wl3-chat__toggle{box-shadow:0 0 0 4px rgba(57,130,246,.24),0 8px 32px rgba(44,126,255,.42)}
#wl3-chat-root .wl3-chat__pending{opacity:.72}
@media(max-width:1050px){.wlx-site .wl3-tools__grid,body .wl3-tools__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
 .wlx-site .wl2-ticker-outer{margin-bottom:clamp(42px,9vw,75px)!important}
 .wlx-site .wl21-service-detail{height:clamp(165px,45vw,230px)!important;padding:10px!important}
 .wlx-site .wl21-mini-browser,.wlx-site .wl21-shop-demo{width:min(97%,500px)!important;padding:15px!important;min-height:135px!important}
 .wlx-site .wl21-mini-browser strong{font-size:clamp(20px,5vw,29px)!important;margin:9px 0!important}
 .wlx-site .wl21-shop-demo b{height:44px!important}
 .wlx-site .wl3-tools,body .wl3-tools{width:calc(100% - 24px)!important;margin:42px auto!important;padding:16px!important}
 .wlx-site .wl3-tools__grid,body .wl3-tools__grid{grid-template-columns:1fr}
 .wl3-tools__grid section{padding:20px!important}
 #wl3-chat-root .wl3-chat__head{gap:7px;padding:12px}
 #wl3-chat-root .wl3-chat__sound{font-size:9px}
}
@media(prefers-reduced-motion:reduce){#wl3-chat-root .wl3-chat__toggle{animation:none!important}}
#wl3-chat-root .wl3-chat__sound{margin-left:0!important;max-width:146px!important;font-weight:650!important;white-space:normal}
#wl3-chat-root .wl3-chat__head>[data-wl3-close]{margin-left:auto!important}
.wlx-site .wl3-tools,body .wl3-tools{box-sizing:border-box!important}