/* Booked Labs - device frames.
   iPhone 17 Pro: 402 x 874 pt screen (19.5:9), Dynamic Island 125 x 37 pt, 11 pt from the top.
   Everything is drawn at true size and scaled to fit, so the website inside lays out exactly
   as it would on the phone (402 px wide) or on a laptop (1440 px wide). */

.stage{position:relative}
.stage.combo{padding:0 0 9% 0}
.stage.combo .phone-slot{position:absolute;right:-2%;bottom:0;width:27%;z-index:2;filter:drop-shadow(0 30px 40px rgba(22,21,15,.28))}
.stage.solo-phone{display:flex;justify-content:center}
.stage.solo-phone .phone-slot{width:min(330px,78%)}
@media(max-width:640px){.stage.combo{padding-bottom:20%}.stage.combo .phone-slot{width:40%;right:-1%}}

/* ---------- browser window ---------- */
.bw{background:#fff;border-radius:14px;box-shadow:0 0 0 1px rgba(22,21,15,.1),0 2px 4px rgba(22,21,15,.05),0 40px 80px -24px rgba(22,21,15,.35);overflow:hidden}
.dark .bw{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -20px rgba(0,0,0,.6)}
.bw-bar{height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#F3F2EF;border-bottom:1px solid #E3E1DB}
.bw-dots{display:flex;gap:7px;flex:0 0 auto}
.bw-dots i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.bw-dots i:nth-child(2){background:#FEBC2E}
.bw-dots i:nth-child(3){background:#28C840}
.bw-nav{display:flex;gap:10px;color:#A6A39B;flex:0 0 auto}
.bw-nav svg{width:13px;height:13px}
.bw-url{flex:1;max-width:420px;margin:0 auto;height:28px;border-radius:8px;background:#E7E5E0;display:flex;align-items:center;justify-content:center;gap:6px;
  font:500 12.5px/1 -apple-system,BlinkMacSystemFont,'Archivo',sans-serif;color:#55524B;white-space:nowrap;overflow:hidden;padding:0 10px}
.bw-url svg{width:10px;height:10px;flex:0 0 auto;color:#8D8A82}
.bw-sp{width:66px;flex:0 0 auto}
.bw-view{position:relative;overflow:hidden;aspect-ratio:1440/900;background:#F6F4EF}
@media(max-width:640px){.bw{border-radius:9px}.bw-bar{height:28px;gap:8px;padding:0 9px}.bw-dots i{width:7px;height:7px}.bw-dots{gap:4px}.bw-nav,.bw-sp{display:none}.bw-url{height:17px;font-size:9px;border-radius:5px}.bw-url svg{width:7px;height:7px}}

/* anything drawn at a fixed design size and scaled to its box */
.fit{position:absolute;left:0;top:0;transform-origin:0 0}
.fit>iframe{display:block;border:0;width:100%;height:100%;background:#fff}

/* ---------- iPhone 17 Pro ---------- */
.phone-slot{aspect-ratio:426/898;position:relative}
.ip{position:absolute;left:0;top:0;width:426px;height:898px;transform-origin:0 0;border-radius:68px;
  background:linear-gradient(145deg,#E6E7EA 0%,#B9BBC1 30%,#F1F1F3 52%,#A7A9AF 78%,#D7D8DC 100%);padding:4px}
.ip::before{content:"";position:absolute;inset:1px;border-radius:67px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 2px 1px rgba(0,0,0,.25);pointer-events:none}
.ip-bezel{position:absolute;inset:4px;border-radius:64px;background:#050506;padding:8px}
.ip-screen{position:relative;width:402px;height:874px;border-radius:56px;overflow:hidden;background:#000;isolation:isolate}
/* side buttons: action + volume on the left, side button + camera control on the right */
.ip-btn{position:absolute;width:4px;background:linear-gradient(90deg,#9C9EA4,#D9DADE 60%,#A5A7AD);border-radius:2px}
.ip-btn.act{left:-3px;top:178px;height:34px}
.ip-btn.vu{left:-3px;top:244px;height:62px}
.ip-btn.vd{left:-3px;top:322px;height:62px}
.ip-btn.side{right:-3px;top:268px;height:100px}
.ip-btn.cam{right:-3px;top:520px;height:60px;width:3px;background:linear-gradient(90deg,#8F9197,#C9CACF)}
.ip-island{position:absolute;left:50%;top:11px;width:125px;height:37px;margin-left:-62.5px;border-radius:20px;background:#000;z-index:5}
.ip-island::after{content:"";position:absolute;right:23px;top:12px;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#2B3346 0 25%,#0A0C12 60%)}
.ip-status{position:absolute;left:0;right:0;top:0;height:62px;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 50px;
  font:600 17px/1 -apple-system,'SF Pro Text','Archivo',system-ui,sans-serif;letter-spacing:-.01em;background:var(--sb,#fff);color:var(--st,#000)}
.ip-status .ic{display:flex;align-items:center;gap:6px}
.ip-status svg{height:12px;width:auto;fill:currentColor}
.ip-status .bat{width:26px;height:12px;border:1.5px solid currentColor;border-radius:4px;position:relative;opacity:.95;padding:1.5px}
.ip-status .bat::before{content:"";display:block;width:78%;height:100%;background:currentColor;border-radius:1.5px}
.ip-status .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:0 1px 1px 0;background:currentColor;opacity:.5}
.ip-view{position:absolute;left:0;top:62px;width:402px;height:812px;overflow:hidden;background:#fff}
.ip-view iframe{display:block;border:0;width:402px;height:812px}
/* Safari's floating address pill and the home indicator */
.ip-safari{position:absolute;left:14px;right:14px;bottom:30px;height:48px;border-radius:24px;z-index:4;display:flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(250,250,250,.78);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 6px 20px rgba(0,0,0,.14);font:500 15px/1 -apple-system,'Archivo',sans-serif;color:#1d1d1f;pointer-events:none}
.ip-safari svg{width:11px;height:11px;color:#6e6e73}
.ip-home{position:absolute;left:50%;bottom:8px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:#111;z-index:6;opacity:.85}
.ip.noui .ip-safari{display:none}
.ip.noui .ip-view{height:812px}

/* placeholders until an iframe is loaded */
.ip-view .wait,.bw-view .wait{position:absolute;inset:0;display:grid;place-items:center;font:500 14px var(--sans);color:#8B857A;background:#F6F4EF}

/* touch screens: a finger on a device frame scrolls the page, not the site inside it */
.hint .h-touch{display:none}
@media (hover:none),(pointer:coarse){
  .stage iframe{pointer-events:none!important}
  .hint .h-fine{display:none}
  .hint .h-touch{display:inline}
}