/* CSS-built device preview: lightweight visual inspired by the approved WelMemo mockups. */
.wm-device-stage{position:relative;z-index:2;min-height:455px;display:flex;align-items:center;justify-content:center;padding:26px 22px 34px}
.wm-laptop{position:relative;width:88%;max-width:650px}
.wm-laptop-screen{overflow:hidden;background:#fff;border:8px solid #1c2429;border-bottom-width:10px;border-radius:15px 15px 7px 7px;box-shadow:0 20px 35px rgba(16,35,63,.16)}
.wm-laptop-base{height:15px;margin:-1px -8% 0;background:linear-gradient(#d8dcde,#aeb5b8);border-radius:0 0 50% 50%;box-shadow:0 8px 12px rgba(16,35,63,.12)}
.wm-demo-topbar{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--wm-teal);font-size:.7rem;border-bottom:1px solid #edf0ef}
.wm-demo-topbar span{font-size:.55rem;color:#526172}
.wm-demo-cover{height:155px;display:flex;align-items:center;padding:22px;background:linear-gradient(120deg,rgba(255,255,255,.98) 0 42%,rgba(230,245,242,.55) 43%),linear-gradient(145deg,#e6f5f2,#b8ddd7 54%,#ffded5);position:relative;overflow:hidden}
.wm-demo-cover::after{content:"";position:absolute;right:-4%;bottom:-30%;width:48%;height:110%;background:linear-gradient(155deg,transparent 18%,rgba(17,122,116,.14) 19% 42%,rgba(255,107,104,.12) 43%);transform:rotate(-5deg)}
.wm-demo-cover h2{position:relative;z-index:1;margin:0 0 4px;color:var(--wm-teal-dark);font-size:1.18rem}
.wm-demo-cover h2 span{color:var(--wm-coral)}
.wm-demo-cover p{position:relative;z-index:1;margin:0;color:#526172;font-size:.58rem;max-width:210px}
.wm-demo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:13px 15px 17px;background:#fff}
.wm-demo-grid>span{min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #e9eeee;border-radius:6px;color:var(--wm-teal);font-size:1rem;box-shadow:0 3px 7px rgba(16,35,63,.035)}
.wm-demo-grid small{font-size:.46rem;line-height:1.1;text-align:center;color:var(--wm-teal-dark);font-weight:700}
.wm-phone{position:absolute;right:2%;bottom:8%;width:29%;max-width:190px;min-width:145px;overflow:hidden;background:#fff;border:7px solid #1c2429;border-radius:24px;box-shadow:0 18px 30px rgba(16,35,63,.2)}
.wm-phone::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:32%;height:5px;background:#1c2429;border-radius:0 0 6px 6px;z-index:4}
.wm-phone-bar{height:44px;padding:8px 9px 0;display:flex;align-items:center;justify-content:space-between;color:var(--wm-teal);font-size:.52rem}
.wm-phone-bar strong{font-size:.72rem}
.wm-phone-cover{min-height:105px;padding:45px 10px 10px;background:linear-gradient(155deg,#d4efeb 0%,#ffe3da 68%,#fff 69%);display:flex;flex-direction:column;justify-content:flex-end}
.wm-phone-cover strong{font-size:.68rem;color:var(--wm-teal-dark)}
.wm-phone-cover small{font-size:.45rem;color:#526172;margin-top:2px}
.wm-phone-links{display:grid;gap:5px;padding:8px;background:#fff}
.wm-phone-links span{display:block;padding:7px 6px;border:1px solid #e8eeee;border-radius:5px;color:#17324e;font-size:.45rem;font-weight:650}
.wm-device-stage-demo{max-width:900px;margin-inline:auto;min-height:520px}

@media(max-width:620px){
  .wm-device-stage{min-height:300px;padding:14px 2px 26px}.wm-laptop{width:95%}.wm-demo-topbar{height:32px;padding-inline:8px}.wm-demo-cover{height:100px;padding:12px}.wm-demo-cover h2{font-size:.83rem}.wm-demo-cover p{font-size:.43rem;max-width:145px}.wm-demo-grid{grid-template-columns:repeat(4,1fr);gap:4px;padding:8px}.wm-demo-grid>span{min-height:38px;font-size:.72rem}.wm-demo-grid small{font-size:.36rem}.wm-phone{right:0;bottom:3%;width:30%;min-width:105px;border-width:5px;border-radius:17px}.wm-phone-bar{height:31px;padding:7px 6px 0;font-size:.38rem}.wm-phone-bar strong{font-size:.48rem}.wm-phone-cover{min-height:65px;padding:24px 6px 6px}.wm-phone-cover strong{font-size:.45rem}.wm-phone-cover small{font-size:.32rem}.wm-phone-links{gap:3px;padding:5px}.wm-phone-links span{padding:4px;font-size:.31rem}.wm-device-stage-demo{min-height:330px}
}