/* Approved full-width three-device feedback showcase. All UI inside devices is illustrative. */
.ws-showcase{width:100%;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:radial-gradient(ellipse at 48% 45%,var(--wayeel-purple-light) 0%,var(--wayeel-white) 64%);color:var(--wayeel-navy);font-family:var(--wayeel-font)}
.ws-stage{position:relative;width:100%;aspect-ratio:1908/824;isolation:isolate}.ws-device{position:absolute;box-shadow:0 12px 18px rgb(var(--wayeel-navy-rgb, 15 23 42) / 0.1333);border:solid var(--wayeel-navy);background:var(--wayeel-navy);box-sizing:border-box}.ws-logo{display:block;width:100%;height:auto;object-fit:contain}
.ws-tablet{left:14.2%;top:4.2%;width:35.4%;height:83%;border-width:1.4vw 1.55vw 2.1vw;border-radius:1.7vw;z-index:2}.ws-tablet-screen{position:relative;width:100%;height:100%;background:linear-gradient(130deg,var(--wayeel-white),var(--wayeel-purple-light));overflow:hidden;container-type:inline-size}.ws-tablet-screen:before{content:'';position:absolute;width:82%;aspect-ratio:1;border:3.7vw solid var(--wayeel-border);border-radius:50%;left:30%;top:0;opacity:.8}.ws-tablet-screen>.ws-logo{position:absolute;width:32%;left:7.7%;top:6%;z-index:3}.ws-person{position:absolute;left:33%;bottom:0;width:71%;height:94%;object-fit:contain;object-position:center bottom;z-index:1}.ws-tablet-copy{position:relative;z-index:2;width:58%;padding:22% 0 0 8%;font-size:2.85cqw;line-height:1.4}.ws-tablet-copy h2{font-size:6.4cqw;line-height:1.12;letter-spacing:-.035em;font-weight:650;margin:0 0 6%}.ws-tablet-copy h2 span{color:var(--wayeel-purple);white-space:nowrap}.ws-tablet-copy>p{font-size:2.9cqw;line-height:1.35;margin:0 0 9%;white-space:nowrap}.ws-benefit{display:flex;align-items:center;gap:7%;margin:0 0 8%;font-size:2.5cqw;line-height:1.35;white-space:nowrap}.ws-benefit>svg{flex:0 0 16%;width:16%;height:auto;aspect-ratio:1;padding:3%;border-radius:20%;background:var(--wayeel-border);fill:none;stroke:var(--wayeel-purple);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ws-benefit:last-child>svg{background:var(--wayeel-border);stroke:#ffb800}.ws-benefit strong,.ws-benefit span{display:block}.ws-benefit strong{font-weight:650}.ws-benefit span{color:var(--wayeel-purple);margin-top:2%}.ws-tablet-home{position:absolute;bottom:-1.5vw;left:48%;width:.9vw;height:.9vw;border:1px solid var(--wayeel-navy);border-radius:50%}
.ws-phone{left:2.8%;top:32%;width:14.5%;height:61.5%;border-width:.65vw;border-radius:2.8vw;z-index:5}.ws-phone-screen{position:relative;height:100%;background:var(--wayeel-white);border-radius:2.1vw;padding:10% 6% 0;overflow:hidden;container-type:inline-size}.ws-notch{position:absolute;top:0;left:22%;width:56%;height:3.5%;border-radius:0 0 10px 10px;background:var(--wayeel-navy)}.ws-phone-top{display:flex;justify-content:space-between;align-items:center;gap:8%;padding-bottom:12%;border-bottom:1px solid var(--wayeel-gray)}.ws-phone-top .ws-logo{width:66%}.ws-phone-top>span{font-size:7cqw;color:var(--wayeel-navy)}.ws-phone h3{font-size:8cqw;line-height:1.18;letter-spacing:-.035em;font-weight:650;margin:14% 0 12%}.ws-rating{display:flex;justify-content:space-between;gap:3%}.ws-rating .ws-face{width:18%;flex-basis:18%;aspect-ratio:1}.ws-rating-labels{display:flex;justify-content:space-between;font-size:4.7cqw;margin:6% 0 10%;color:var(--wayeel-navy)}.ws-phone-comment{border:1px solid var(--wayeel-purple-light);padding:7% 4%;border-radius:1vw;font-size:4.6cqw;color:var(--wayeel-muted);white-space:nowrap}.ws-submit{display:block;background:var(--wayeel-purple);color:var(--wayeel-white);border-radius:4vw;text-align:center;padding:7% 0;margin-top:11%;font-size:5.1cqw;font-weight:600}
.ws-face{display:block;position:relative;flex:none;width:17%;aspect-ratio:1;border-radius:50%;background:var(--wayeel-border)}.ws-face:before,.ws-face:after{content:'';position:absolute;top:31%;width:11%;height:13%;border-radius:50%;background:var(--wayeel-navy)}.ws-face:before{left:28%}.ws-face:after{right:28%}.ws-face b{position:absolute;top:56%;left:27%;width:46%;height:25%;border-radius:0 0 50% 50%;background:var(--wayeel-purple)}.ws-face.neutral{background:#ffe095}.ws-face.neutral:before,.ws-face.neutral:after{background:var(--wayeel-navy)}.ws-face.neutral b{background:var(--wayeel-navy);height:8%;top:62%;border-radius:3px}.ws-face.sad{background:#ffafb1}.ws-face.sad:before,.ws-face.sad:after{background:#bc2535}.ws-face.sad b{background:transparent;border:3px solid #c53442;border-bottom:0;border-radius:50% 50% 0 0;top:58%;height:22%}.ws-rating .happy:first-child{background:var(--wayeel-purple)}.ws-rating .happy:first-child:before,.ws-rating .happy:first-child:after,.ws-rating .happy:first-child b{background:var(--wayeel-white)}
.ws-laptop{left:44%;top:14%;width:51.5%;height:79.5%;border-width:1.05vw 1.1vw 1.55vw;border-radius:1.45vw 1.45vw .5vw .5vw;z-index:4}.ws-laptop:before{content:'';position:absolute;left:49.5%;top:-.7vw;width:.3vw;height:.3vw;border-radius:50%;background:var(--wayeel-navy)}.ws-laptop-screen{display:flex;background:var(--wayeel-gray);width:100%;height:100%;overflow:hidden;container-type:inline-size}.ws-sidebar{width:20%;flex:none;background:var(--wayeel-white);padding:2.8% 1.6%;border-right:1px solid var(--wayeel-gray)}.ws-sidebar>.ws-logo{width:100%;margin-bottom:23%}.ws-sidebar-links{display:grid;gap:4%}.ws-sidebar-links>span{display:flex;align-items:center;gap:10%;padding:8% 5%;font-size:1.45cqw;color:var(--wayeel-purple);border-radius:8px;white-space:nowrap}.ws-sidebar-links>span svg{width:15%;height:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ws-sidebar-links>.ws-nav-active{background:var(--wayeel-purple-light);color:var(--wayeel-purple)}.ws-dashboard{width:80%;min-width:0;display:flex;flex-direction:column}.ws-dashboard-top{display:flex;align-items:center;gap:5%;background:var(--wayeel-white);padding:2.1% 3%;border-bottom:1px solid var(--wayeel-gray);min-height:12%}.ws-search{background:var(--wayeel-purple-light);border-radius:9px;padding:1.9% 3%;width:68%;font-size:1.3cqw;color:var(--wayeel-purple)}.ws-notification{margin-left:auto;color:var(--wayeel-navy);font-size:2cqw}.ws-avatar{font-size:1.25cqw;color:var(--wayeel-purple);background:var(--wayeel-border);border-radius:50%;width:5%;aspect-ratio:1;display:grid;place-items:center}.ws-dashboard-body{padding:3% 3% 2%;flex:1;min-height:0}.ws-overview{display:flex;justify-content:space-between;align-items:flex-start;gap:2%;margin-bottom:3%}.ws-overview h3{font-size:2.45cqw;letter-spacing:-.04em;line-height:1.15;margin:0 0 2%;font-weight:650}.ws-overview p{font-size:1.35cqw;line-height:1.4;color:var(--wayeel-purple);margin:0}.ws-demo{font-size:1.1cqw;white-space:nowrap;background:white;border:1px solid var(--wayeel-purple-light);padding:2%;border-radius:9px;color:var(--wayeel-purple)}.ws-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2%;margin-bottom:3%}.ws-stat{display:flex;gap:9%;align-items:center;padding:8% 8%;background:var(--wayeel-white);border:1px solid var(--wayeel-purple-light);border-radius:1vw;box-shadow:0 4px 10px rgb(var(--wayeel-navy-rgb, 15 23 42) / 0.0196)}.ws-stat>.ws-face{width:33%}.ws-stat>div{min-width:0}.ws-stat b{display:block;font-size:2.9cqw;font-weight:650;line-height:1.1}.ws-stat>div>span{display:block;font-size:1.35cqw;color:var(--wayeel-purple);margin-top:7%}.ws-stat small{display:block;font-size:1.2cqw;line-height:1.4;color:var(--wayeel-purple);margin-top:10%}.ws-stat .ws-down{color:#ed354c}.ws-panels{display:grid;grid-template-columns:1.25fr 1fr;gap:2.5%;height:58%}.ws-recent,.ws-trend,.ws-breakdown{background:var(--wayeel-white);border:1px solid var(--wayeel-purple-light);border-radius:1vw;padding:4%;min-width:0}.ws-panels h4{display:flex;justify-content:space-between;align-items:center;font-size:1.65cqw;font-weight:650;line-height:1.3;letter-spacing:-.02em;margin:0 0 7%;white-space:nowrap}.ws-panels h4>span{font-size:1.1cqw;font-weight:400;color:var(--wayeel-purple);letter-spacing:0}.ws-feedback-row{display:flex;align-items:flex-start;gap:5%;padding:5% 0;border-bottom:1px solid var(--wayeel-gray)}.ws-feedback-row:last-child{border:0}.ws-feedback-row>.ws-face{width:11%}.ws-feedback-row>div{flex:1;min-width:0}.ws-feedback-row strong{display:block;font-size:1.4cqw;font-weight:600;line-height:1.3}.ws-feedback-row p{font-size:1.12cqw;line-height:1.4;margin:4% 0 0;color:var(--wayeel-purple)}.ws-feedback-row time{font-size:1.1cqw;white-space:nowrap;color:var(--wayeel-muted);line-height:1.4}.ws-charts{display:flex;flex-direction:column;gap:5%;min-width:0}.ws-trend{padding:5%;flex:1}.ws-trend h4{margin-bottom:0}.ws-trend h4>span{color:var(--wayeel-purple)}.ws-chart{display:block;width:100%;height:auto}.ws-days{display:flex;justify-content:space-between;font-size:.95cqw;color:var(--wayeel-muted)}.ws-breakdown{padding:4% 5%;flex:1}.ws-breakdown h4{font-size:1.4cqw;margin-bottom:4%}.ws-breakdown-inner{display:flex;align-items:center;gap:10%}.ws-donut{position:relative;flex:0 0 38%;aspect-ratio:1;background:conic-gradient(var(--wayeel-green) 0 80%,#ffd878 80% 95%,#ff6576 95%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:1.2cqw;line-height:1.2}.ws-donut:before{content:'';position:absolute;inset:15%;border-radius:50%;background:var(--wayeel-white)}.ws-donut strong,.ws-donut span{position:relative}.ws-donut strong{font-size:2.3cqw;font-weight:650}.ws-legend{flex:1;display:grid;gap:.5vw;min-width:0}.ws-legend>span{display:flex;align-items:center;gap:7%;font-size:1.1cqw;color:var(--wayeel-purple);white-space:nowrap}.ws-legend i{width:.65vw;height:.65vw;background:var(--wayeel-purple);border-radius:50%;flex:none}.ws-legend span:nth-child(2) i{background:#ffd878}.ws-legend span:nth-child(3) i{background:#ff6576}.ws-legend b{margin-left:auto;color:var(--wayeel-navy);font-weight:600}.ws-laptop-base{position:absolute;bottom:-3.25vw;left:-11%;width:121%;height:1.7vw;background:linear-gradient(var(--wayeel-border) 0%,var(--wayeel-muted) 55%,var(--wayeel-navy) 75%,var(--wayeel-border));border-radius:0 0 45% 45%/0 0 60% 60%;box-shadow:0 8px 10px rgb(var(--wayeel-navy-rgb, 15 23 42) / 0.1333)}.ws-laptop-base:before{content:'';position:absolute;left:43%;top:0;width:14%;height:40%;border-radius:0 0 9px 9px;background:var(--wayeel-muted)}
.ws-leaves{position:absolute;object-fit:contain;z-index:0;pointer-events:none}.ws-leaves-left{left:4%;top:10%;width:20%;height:60%;transform:rotate(-18deg)}.ws-leaves-top{left:44%;top:0;width:13%;height:48%;transform:rotate(18deg)}.ws-leaves-right{right:-1%;top:33%;width:14%;height:54%;transform:rotate(-8deg)}
@media(max-width:700px){.ws-stage{aspect-ratio:auto;padding:22px 12px 30px;display:grid;grid-template-columns:1fr;gap:26px}.ws-tablet{position:relative;left:auto;top:auto;width:84%;height:auto;aspect-ratio:1/1.04;margin-left:auto;border-width:9px 10px 15px;border-radius:15px}.ws-tablet-screen{height:100%}.ws-tablet-screen:before{border-width:23px}.ws-tablet-home{width:7px;height:7px;bottom:-11px}.ws-phone{top:26vw;left:3%;width:31%;height:auto;aspect-ratio:.54;border-width:5px;border-radius:22px}.ws-phone-screen{border-radius:17px}.ws-phone h3{font-size:max(10px,8cqw)}.ws-phone-comment{border-radius:6px}.ws-submit{border-radius:20px}.ws-laptop{position:relative;top:auto;left:auto;width:100%;height:340px;border-width:9px 9px 15px;border-radius:14px 14px 4px 4px}.ws-laptop-base{height:11px;bottom:-23px;left:-2%;width:104%;border-radius:0 0 35% 35%/0 0 70% 70%}.ws-laptop:before{top:-6px;width:3px;height:3px}.ws-sidebar{display:none}.ws-dashboard{width:100%}.ws-dashboard-top{padding:8px 10px;min-height:33px}.ws-search{font-size:9px;padding:5px 9px}.ws-notification{font-size:15px}.ws-avatar{font-size:9px;width:20px}.ws-dashboard-body{padding:12px 10px}.ws-overview{margin-bottom:12px}.ws-overview h3{font-size:15px;margin-bottom:5px}.ws-overview p{font-size:8px}.ws-demo{font-size:8px;border-radius:6px;padding:6px}.ws-stats{gap:7px;margin-bottom:12px}.ws-stat{padding:10px 7px;gap:7px;border-radius:7px}.ws-stat>.ws-face{width:26px}.ws-stat b{font-size:17px}.ws-stat>div>span{font-size:8px}.ws-stat small{font-size:8px}.ws-panels{height:auto;grid-template-columns:1.2fr 1fr;gap:8px}.ws-recent,.ws-trend,.ws-breakdown{padding:9px;border-radius:7px}.ws-panels h4{font-size:10px;white-space:normal;gap:5px;margin-bottom:9px}.ws-panels h4>span{font-size:7px;white-space:nowrap}.ws-feedback-row{gap:6px;padding:8px 0}.ws-feedback-row>.ws-face{width:19px}.ws-feedback-row strong{font-size:8px}.ws-feedback-row p{font-size:7px;line-height:1.45}.ws-feedback-row time{display:none}.ws-charts{gap:8px}.ws-days{font-size:6px}.ws-breakdown h4{font-size:9px}.ws-breakdown-inner{gap:7px}.ws-donut{font-size:7px;flex-basis:40%}.ws-donut strong{font-size:13px}.ws-legend{gap:5px}.ws-legend>span{font-size:6px;gap:4px}.ws-legend i{width:4px;height:4px}.ws-leaves-left{left:-2%;top:12px;width:28%;height:270px}.ws-leaves-top{left:70%;top:0;width:25%;height:170px}.ws-leaves-right{display:none}.ws-face.sad b{border-width:2px}}
@media(max-width:360px){.ws-laptop{height:350px}.ws-overview h3{font-size:13px}.ws-stat>.ws-face{width:21px}.ws-stat b{font-size:15px}.ws-stat>div>span{font-size:7px}.ws-legend>span{font-size:5px}.ws-stage{gap:24px}.ws-tablet{width:85%}}

/* Keep every sample panel inside its device at all breakpoints. */
.ws-feedback-row{padding:3.5% 0}.ws-panels h4{margin-bottom:4%}.ws-charts{display:grid;grid-template-rows:1fr 1fr;gap:7px;min-height:0}.ws-trend{display:flex;flex-direction:column;min-height:0}.ws-trend h4{flex:none;margin-bottom:3%}.ws-chart{flex:1;min-height:0;height:0;max-height:none}.ws-days{flex:none}.ws-breakdown{display:flex;flex-direction:column;min-height:0;overflow:hidden}.ws-breakdown h4{flex:none;margin-bottom:3%}.ws-breakdown-inner{flex:1;min-height:0}.ws-donut{height:100%;max-height:5.7vw;flex:none;width:auto;aspect-ratio:1}
@media(max-width:700px){.ws-tablet-copy{padding-left:24%;width:80%}.ws-tablet-copy>p{font-size:2.5cqw}.ws-benefit{font-size:2.25cqw;gap:5%}.ws-benefit>svg{flex-basis:13%;width:13%;padding:2%}.ws-person{left:52%;width:64%}.ws-tablet-copy h2{font-size:5.8cqw}.ws-laptop{height:410px}.ws-panels{height:180px}.ws-feedback-row{padding:8px 0}.ws-panels h4{margin-bottom:9px}.ws-trend h4{margin-bottom:3px}.ws-chart{height:0}.ws-breakdown h4{margin-bottom:5px}.ws-donut{height:46px;max-height:none}.ws-dashboard-top:before{content:'';display:block;width:98px;height:21px;background:url('/assets/wayeel-showcase-20261015-v1/logo.webp') left center/contain no-repeat}.ws-search{display:none}}
@media(max-width:360px){.ws-laptop{height:410px}.ws-tablet-copy{padding-left:25%;width:82%}.ws-tablet-copy h2{font-size:5.6cqw}.ws-benefit{font-size:2.2cqw}.ws-donut{height:39px}}