/* LAWYL app screens in a Galaxy S26-style frame: flat metal rail, thin even bezels, centred punch-hole.
   Screens are real app screenshots, 20:9 */
.phone{--w:280px;--b:calc(var(--w)*.024);--rail:calc(var(--w)*.012);width:var(--w);height:calc((var(--w) - var(--b)*2)*20/9 + var(--b)*2);border-radius:calc(var(--w)*.125);background:#050506;padding:var(--b);position:relative;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 0 var(--rail) #3a3d43,0 0 0 calc(var(--rail) + 1px) #9aa0a8,0 0 0 calc(var(--rail) + 2px) #2a2c31,0 30px 60px -20px rgba(10,20,30,.45)}
/* side keys on the right rail: volume rocker, then power */
.phone::before,.phone::after{content:"";position:absolute;right:calc(var(--rail)*-1 - var(--w)*.011);width:calc(var(--w)*.011);border-radius:0 3px 3px 0;background:linear-gradient(90deg,#4a4e55,#8d939b 60%,#50545b)}
.phone::before{top:17%;height:12.5%}
.phone::after{top:33%;height:6.5%}
.phone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.1);overflow:hidden;background:#fff}
.phone .scr>img{display:block;width:100%;height:100%;object-fit:cover}
/* front camera sits inside the app's status bar */
.phone .cam{position:absolute;z-index:4;left:50%;top:calc(var(--b) + (var(--w) - var(--b)*2)*20/9*.0167);width:calc(var(--w)*.03);height:calc(var(--w)*.03);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#34404e 0 16%,#030304 46%);box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.ph-av{width:3.2em;height:3.2em;border-radius:50%;background:linear-gradient(135deg,#c9a86a,#8a6a33);flex:none;color:#fff;font-weight:700;display:grid;place-items:center;font-size:1em}