/* The three hero phones play the ad as it runs in each app. Every screen is laid out at iPhone 15 Pro size
   (393 x 846 points) and mapped onto the rendered phone's screen with a projective matrix3d (phones.js). */
.sky-phone .ph{position:relative;animation:skyBob 6s ease-in-out infinite;will-change:transform}
.sky-phone-left .ph{animation-duration:6.6s;animation-delay:-2s}
.sky-phone-right .ph{animation-duration:7.2s;animation-delay:-4s}
.sky-phone .ph>img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 40px rgba(2,24,14,.42))}
.scr{position:absolute;left:0;top:0;width:393px;height:846px;transform-origin:0 0;border-radius:62px;overflow:hidden;background:#000;color:#fff;
  font-family:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;pointer-events:none;opacity:0;transition:opacity .5s;text-align:left;line-height:1.25;letter-spacing:0}
.scr.on{opacity:1}
.scr *{box-sizing:border-box}
.scr svg{display:block}
.scr .glare{position:absolute;inset:0;z-index:30;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 22%,transparent 40%);pointer-events:none}
.scr .island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:25}
.scr .home-ind{position:absolute;left:50%;bottom:8px;width:136px;height:5px;margin-left:-68px;border-radius:3px;background:#fff;z-index:25}
/* status bar: the time in the left ear; signal, wi-fi and battery in the right ear, each in its own slot */
.scr .sb{position:absolute;left:0;right:0;top:0;height:52px;z-index:24;display:flex;align-items:center;justify-content:space-between;padding:4px 30px 0 52px}
.scr .sb .tm{font-size:17px;font-weight:600;letter-spacing:-.01em;width:54px;text-align:center}
.scr .sb .ic{display:flex;align-items:center;gap:6px}
.scr .vid{position:absolute;left:0;top:0;width:393px;height:766px;object-fit:cover;background:#000}
.scr .bnav{position:absolute;left:0;right:0;bottom:0;height:80px;background:#000;display:flex;justify-content:space-around;align-items:flex-start;padding-top:9px;z-index:20}
.scr .bnav i{display:flex;flex-direction:column;align-items:center;gap:3px;font-style:normal;font-size:10px;font-weight:500;color:rgba(255,255,255,.62);width:62px}
.scr .bnav i.on{color:#fff}

/* ---- TikTok */
.tt .shade{position:absolute;inset:0;height:766px;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,transparent 16%,transparent 62%,rgba(0,0,0,.62) 100%);z-index:2}
.tt .top{position:absolute;left:0;right:0;top:56px;height:32px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:5;font-size:16px;font-weight:600;color:rgba(255,255,255,.66)}
.tt .top b{color:#fff;font-weight:700;position:relative}
.tt .top b::after{content:"";position:absolute;left:50%;bottom:-7px;width:26px;height:3px;margin-left:-13px;border-radius:2px;background:#fff}
.tt .top .l{position:absolute;left:16px}.tt .top .r{position:absolute;right:16px}
.tt .rail{position:absolute;right:8px;top:388px;width:52px;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:5}
.tt .av{position:relative;width:48px;height:48px;border-radius:50%;border:2px solid #fff;background:#0b1510 url(/assets/icons3d/coin.webp) center/112% no-repeat}
.tt .av::after{content:"+";position:absolute;left:50%;bottom:-9px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fe2c55;color:#fff;font-size:15px;font-weight:700;line-height:19px;text-align:center}
.tt .rail svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.tt .disc{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,#2a2a2a 30%,#111 31%,#111 60%,#333 61%);display:grid;place-items:center}
.tt .disc span{width:22px;height:22px;border-radius:50%;background:#0b1510 url(/assets/icons3d/coin.webp) center/115% no-repeat}
.tt .meta{position:absolute;left:14px;right:76px;bottom:146px;z-index:5;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tt .meta .nm{font-size:16px;font-weight:700}
.tt .meta .cap{font-size:14px;line-height:1.35;margin-top:6px}
.tt .meta .cap b{font-weight:700}
.tt .meta .sp{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px;background:rgba(255,255,255,.22)}
.tt .meta .mu{font-size:13px;margin-top:8px;display:flex;align-items:center;gap:6px}
.tt .plus{width:46px;height:30px;border-radius:9px;position:relative;margin-top:3px;background:#fff;box-shadow:-3px 0 0 #25f4ee,3px 0 0 #fe2c55;display:grid;place-items:center;color:#000;font-size:22px;font-weight:700;line-height:1}

/* ---- X */
.xx{background:#000}
.xx .head{position:absolute;left:0;right:0;top:52px;height:48px;display:flex;align-items:center;justify-content:center;z-index:5}
.xx .head .me{position:absolute;left:16px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3a3f45,#1c1f22)}
.xx .head .up{position:absolute;right:14px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid #536471}
.xx .tabs{position:absolute;left:0;right:0;top:100px;height:44px;display:flex;border-bottom:1px solid #2f3336;z-index:5}
.xx .tabs span{flex:1;display:grid;place-items:center;font-size:15px;font-weight:500;color:#71767b;position:relative}
.xx .tabs span.on{color:#e7e9ea;font-weight:700}
.xx .tabs span.on::after{content:"";position:absolute;bottom:0;left:50%;width:56px;height:4px;margin-left:-28px;border-radius:2px;background:#1d9bf0}
.xx .post{position:absolute;left:0;right:0;top:144px;padding:12px 16px 0 66px;border-bottom:1px solid #2f3336;height:612px}
.xx .post .av{position:absolute;left:16px;top:12px;width:40px;height:40px;border-radius:50%;background:#0b1510 url(/assets/icons3d/coin.webp) center/112% no-repeat}
.xx .post .hd{display:flex;align-items:center;gap:4px;font-size:15px;white-space:nowrap}
.xx .post .hd b{font-weight:700;color:#e7e9ea}
.xx .post .hd span{color:#71767b}
.xx .post .hd .ad{margin-left:auto;display:flex;align-items:center;gap:10px}
.xx .post .tx{font-size:15px;line-height:1.32;color:#e7e9ea;margin-top:2px}
.xx .post .md{position:relative;margin-top:10px;width:311px;height:405px;border-radius:16px;overflow:hidden;border:1px solid #2f3336;background:#000}
.xx .post .md .vid{width:100%;height:100%;object-position:50% 42%}
.xx .post .from{font-size:13px;color:#71767b;margin-top:6px}
.xx .post .act{display:flex;justify-content:space-between;margin-top:10px;padding-right:12px;color:#71767b}
.xx .next{position:absolute;left:0;right:0;top:756px;padding:12px 16px 0 66px}
.xx .next .av{position:absolute;left:16px;top:12px;width:40px;height:40px;border-radius:50%;background:#16181c}
.xx .next i{display:block;height:10px;border-radius:5px;background:#16181c;margin-top:8px}
.xx .bnav{height:84px;border-top:1px solid #2f3336;padding-top:12px}
.xx .fab{position:absolute;right:16px;bottom:100px;width:56px;height:56px;border-radius:50%;background:#1d9bf0;display:grid;place-items:center;z-index:21;box-shadow:0 4px 12px rgba(0,0,0,.5)}

/* ---- Instagram Reels */
.ig .shade{position:absolute;inset:0;height:766px;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 14%,transparent 60%,rgba(0,0,0,.65) 100%);z-index:2}
.ig .top{position:absolute;left:16px;right:16px;top:56px;height:34px;display:flex;align-items:center;justify-content:space-between;z-index:5;font-size:22px;font-weight:700}
.ig .top span{display:flex;align-items:center;gap:6px}
.ig .rail{position:absolute;right:10px;top:438px;width:44px;display:flex;flex-direction:column;align-items:center;gap:26px;z-index:5}
.ig .rail svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ig .rail .au{width:28px;height:28px;border-radius:7px;border:2px solid #fff;background:#0b1510 url(/assets/icons3d/coin.webp) center/115% no-repeat}
.ig .meta{position:absolute;left:14px;right:70px;bottom:146px;z-index:5;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.ig .meta .who{display:flex;align-items:center;gap:9px}
.ig .meta .who i{width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;background:#0b1510 url(/assets/icons3d/coin.webp) center/115% no-repeat;flex:none}
.ig .meta .who b{font-size:14px;font-weight:700;display:block}
.ig .meta .who small{font-size:12px;color:rgba(255,255,255,.85);display:block;margin-top:1px}
.ig .meta .who .fl{margin-left:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.75)}
.ig .meta .cap{font-size:14px;line-height:1.35;margin-top:10px}
.ig .meta .cap span{color:rgba(255,255,255,.7)}
.ig .cta{position:absolute;left:14px;right:14px;bottom:96px;height:38px;border-radius:8px;background:#0095f6;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:14px;font-weight:600;z-index:6}
.ig .bnav{justify-content:space-around;padding-top:14px}
.ig .bnav .me{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5a5f66,#2a2d31)}