/* Actual responsive sample pages, captured separately at desktop and phone widths. */
.device-showcase{padding-block:4px 0}
.device-showcase:before{content:none}
.device-showcase .visual-label{margin-inline:0;margin-bottom:20px}
.device-stage{position:relative;width:100%;aspect-ratio:1.2;isolation:isolate}
.laptop-device{position:absolute;left:2%;top:3%;width:87%}
.laptop-lid{position:relative;padding:14px 9px 10px;border-radius:13px 13px 4px 4px;background:linear-gradient(145deg,#47504f,#1e2726);box-shadow:0 12px 28px #26362e20,inset 0 0 0 1px #86938f}
.laptop-camera{position:absolute;width:4px;height:4px;top:5px;left:50%;border-radius:50%;background:#7f9189}
.laptop-lid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#f6f3ec;border-radius:2px}
.laptop-base{position:relative;width:111%;height:12px;margin-left:-5.5%;border-radius:2px 2px 50% 50% / 2px 2px 10px 10px;background:linear-gradient(#d1d6d1 0 30%,#87928b 36%,#c2c9c4 65%,#728277);box-shadow:0 13px 15px -9px #162c365c}
.laptop-base:before{content:"";display:block;position:absolute;left:42%;right:42%;height:4px;top:0;background:#929d95;border-radius:0 0 4px 4px}
.phone-device{position:absolute;z-index:1;right:0;top:20%;width:27%;padding:5px;background:#202a26;border:1px solid #62736a;border-radius:23px;box-shadow:0 12px 26px #193b3238,inset 0 0 0 1px #a6afa7}
.phone-top{height:20px;background:#faf8f2;border-radius:17px 17px 0 0;display:flex;justify-content:space-between;align-items:center;padding-inline:9px;position:relative}
.phone-top>span:first-child{font-size:12px;line-height:1;font-weight:700;letter-spacing:0;color:#24372e}
.phone-top:after{content:"";position:absolute;top:3px;left:37%;width:27%;height:10px;border-radius:8px;background:#202a26}
.phone-status{display:flex;gap:3px;align-items:center}
.phone-status i{width:9px;height:7px;background:linear-gradient(to right,#24372e 0 20%,transparent 20% 30%,#24372e 30% 55%,transparent 55% 65%,#24372e 65%);clip-path:polygon(0 65%,33% 65%,33% 35%,65% 35%,65% 0,100% 0,100% 100%,0 100%)}
.phone-status b{width:11px;height:6px;border:1px solid #24372e;border-radius:1px;box-shadow:2px 0 0 -1px #24372e}
.phone-screen{overflow:hidden;background:#faf8f2}
.phone-screen img{display:block;width:100%;height:auto;aspect-ratio:390/844;background:#faf8f2}
.phone-bottom{height:12px;background:#faf8f2;border-radius:0 0 17px 17px;display:grid;place-items:center}
.phone-bottom:after{content:"";width:33%;height:3px;background:#293b31;border-radius:3px}
.sample-caption{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;margin:0 0 18px;line-height:1.7}
.sample-caption>span{color:var(--muted)}
.sample-caption a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.device-showcase .update-card{position:static;display:block;transform:none;margin:0;padding:17px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.device-showcase .update-card strong{display:block;font-size:18px;line-height:1.75;letter-spacing:.025em}
.device-showcase .update-card p{margin:6px 0 0;font-size:13px;line-height:1.9;color:var(--body)}
.device-showcase .sample-label{padding:0;border:0;border-radius:0;background:transparent;font-size:12px;color:var(--muted)}
.device-showcase .visual-note{position:static;margin:13px 0 0;text-align:left;font-size:12px;line-height:1.8}
.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}
@media(max-width:620px){
 .device-showcase{padding-bottom:0}
 .device-showcase:before{content:none}
 .device-stage{aspect-ratio:1.12}
 .device-showcase .visual-label{margin-bottom:16px}
 .laptop-lid{padding:10px 6px 7px;border-radius:9px 9px 3px 3px}
 .laptop-camera{top:3px;width:3px;height:3px}
 .laptop-base{height:9px}
 .phone-device{width:29%;top:20%;padding:4px;border-radius:17px}
 .phone-top{height:17px;border-radius:12px 12px 0 0;padding-inline:5px}
 .phone-top:after{height:8px;width:25%;left:38%}
 .phone-status{gap:2px}.phone-status i{width:6px}.phone-status b{width:8px}
 .phone-bottom{height:10px;border-radius:0 0 12px 12px}
 .sample-caption{flex-wrap:wrap;gap:6px;margin-bottom:14px}
 .device-showcase .update-card{padding:14px 0 0}
 .device-showcase .update-card strong{font-size:16px;line-height:1.8}
 .device-showcase .update-card p{font-size:12px;line-height:1.9}
}