/* The features hero and the home page's features card hold the app in the
   visitor's kind of phone (features.Phone, internal/pages/features/phone.go):
   an iPhone, or a Pixel-style Android phone for Android, Windows and ChromeOS
   visitors, picked by html[data-os] (features.OSHead, which preloads the same
   one's picture on the features page). Every size is a share of the
   phone's width (cqw), so it scales as one piece. --phone-tilt turns it in
   3D (a page sets it), --phone-shadow is the drop shadow under it. */
.phone{container-type:inline-size}
.phone--android,
html[data-os=android] .phone--iphone,html[data-os=windows] .phone--iphone,html[data-os=chromeos] .phone--iphone{display:none}
html[data-os=android] .phone--android,html[data-os=windows] .phone--android,html[data-os=chromeos] .phone--android{display:block}
.phone-body{position:relative;transform:var(--phone-tilt,none);transform-origin:50% 50%}
.phone-screen{position:relative;z-index:1;overflow:hidden;background:#202226}
.phone-screen>img{display:block;width:100%;height:auto}
.phone-key{position:absolute;display:block}

/* The iPhone, as the iOS app's App Store frames draw it (mssgs-ios
   Scripts/store-frame.swift drawDevice): a metal body, the black ring, the
   display's corners, the Dynamic Island the capture lacks, the Action button
   and volume on the left and the side button on the right. */
.phone--iphone .phone-body{padding:2.49cqw;border-radius:14.2cqw;background:linear-gradient(180deg,#50555d,#2a2d33 52%,#3a3e45);box-shadow:inset 0 0 0 1px rgba(106,112,121,.55),var(--phone-shadow,0 2.4cqw 5cqw rgba(14,26,16,.3))}
.phone--iphone .phone-body::before{content:"";position:absolute;inset:.83cqw;border-radius:13.37cqw;background:#050505}
.phone--iphone .phone-screen{border-radius:12.16cqw}
.phone-island{position:absolute;left:50%;top:2.47cqw;width:27.17cqw;height:7.98cqw;margin-left:-13.585cqw;border-radius:3.99cqw;background:#000}
.phone--iphone .phone-key{width:.7cqw;background:#2b2e34}
.phone-key--action,.phone-key--up,.phone-key--down{left:-.65cqw;border-radius:.3cqw 0 0 .3cqw}
.phone-key--action{top:16.5%;height:3.5%}
.phone-key--up{top:22.5%;height:5.8%}
.phone-key--down{top:29.8%;height:5.8%}
.phone-key--side{right:-.65cqw;top:25%;height:9%;border-radius:0 .3cqw .3cqw 0}

/* The Android phone, as the Android app's Play Store frames draw it
   (mssgs-android Scripts/store-screenshots/frame_android.py): flatter
   corners, an even graphite body, power and volume on the right only, and
   Android's status bar, its clock and icons on the band the capture keeps
   for them, around the punch-hole camera. */
.phone--android .phone-body{padding:2.57cqw;border-radius:9.5cqw;background:linear-gradient(155deg,#4b4f55 0%,#202226 14%,#34373c 40%,#18191c 62%,#3e4147 82%,#1a1b1e 100%);box-shadow:inset 0 .2cqw 0 rgba(255,255,255,.14),inset 0 -.2cqw 0 rgba(0,0,0,.5),var(--phone-shadow,0 2.4cqw 5cqw rgba(14,26,16,.3))}
.phone--android .phone-screen{border-radius:7.13cqw;box-shadow:0 0 0 .3cqw rgba(0,0,0,.85)}
.phone--android .phone-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 46%)}
.phone--android .phone-key{right:-.55cqw;width:.85cqw;border-radius:.6cqw;background:linear-gradient(90deg,#1b1d21,#4d5158 45%,#2a2c31)}
.phone-key--power{top:23%;height:11.9cqw}
.phone-key--volume{top:33%;height:22.8cqw}
/* The status bar is 132 of the capture's 1320 pixels: a tenth of the
   display's width, which is the phone's less the body (94.86cqw). */
.phone-bar{position:absolute;left:0;right:0;top:0;height:9.49cqw;display:flex;align-items:center;justify-content:space-between;padding:0 4.6cqw;box-sizing:border-box;color:#f2f2f4;font-family:Roboto,"Google Sans",Inter,system-ui,sans-serif;font-size:3.3cqw;font-weight:500;letter-spacing:.01em;line-height:1}
.phone-icons{height:2.87cqw;width:auto}
.phone-camera{position:absolute;left:50%;top:4.74cqw;width:2.87cqw;height:2.87cqw;margin:-1.435cqw 0 0 -1.435cqw;border-radius:50%;background:radial-gradient(circle at 38% 36%,#2b3340 0,#05070a 55%);box-shadow:0 0 0 .36cqw rgba(0,0,0,.92)}