/* Ridgeback — 04 device
   iPhone 15 Pro shell, seed geometry unmodified, plus the zoom ladder
   and the narrow-viewport collapse. Presentation only — sets nothing
   about the product inside it. */

/* ── stage + device frame (seed geometry, unmodified) ── */
.stage { margin:auto; display:flex; flex-direction:column; align-items:center; gap:20px; }
.caption { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-c); }
.caption strong { color:var(--espresso); font-weight:600; }
.device {
  position:relative; width:390px; height:844px; border-radius:56px; padding:12px; flex:none;
  background:linear-gradient(160deg,#2a2a2c 0%,#1a1a1c 50%,#0e0e10 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 0 2px #000 inset,
             0 28px 60px -12px rgba(0,0,0,.45),0 8px 20px -8px rgba(0,0,0,.35);
  isolation:isolate;
}
.device::before,.device::after{content:'';position:absolute;width:3px;top:100px;bottom:100px;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.06) 8%,transparent 16%,transparent 84%,rgba(255,255,255,.04) 92%,transparent 100%);}
.device::before{left:-1px}.device::after{right:-1px}
.island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:124px;height:36px;background:#000;border-radius:999px;z-index:5}
.btn-rail{position:absolute;width:4px;background:#0a0a0c;border-radius:2px}
.btn-rail.l1{left:-3px;top:174px;height:32px}.btn-rail.l2{left:-3px;top:220px;height:60px}
.btn-rail.l3{left:-3px;top:290px;height:60px}.btn-rail.r1{right:-3px;top:250px;height:100px}
.screen{position:relative;width:100%;height:100%;background:var(--ground);border-radius:44px;overflow:hidden;display:flex;flex-direction:column;transition:background var(--dur) var(--ease-out)}

.statusbar{flex:0 0 47px;padding:18px 26px 0;display:flex;align-items:flex-start;justify-content:space-between;
  font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;position:relative;z-index:30;transition:color var(--dur) var(--ease-out)}
.statusbar .right{display:inline-flex;align-items:center;gap:6px}
.statusbar svg{width:17px;height:11px;fill:currentColor}
.statusbar .battery{width:25px}
.home-indicator{flex:0 0 28px;position:relative;z-index:60}
.home-indicator::after{content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:134px;height:5px;background:var(--text);border-radius:999px;opacity:.85;transition:background var(--dur) var(--ease-out)}

.app{flex:1 1 auto;position:relative;min-height:0;display:flex;flex-direction:column}
.content{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.content::-webkit-scrollbar{display:none}
.pad{padding-inline:var(--s5)}
.icon{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media (max-height:980px){.device{zoom:.94}}
@media (max-height:920px){.device{zoom:.88}}
@media (max-height:860px){.device{zoom:.82}}
@media (max-height:800px){.device{zoom:.75}}
@media (max-height:740px){.device{zoom:.68}}
@media (max-height:680px){.device{zoom:.62}}
@media (max-width:480px){
  body{padding:0;display:block}
  .stage{margin:0;gap:0}
  .caption{display:none}
  .device{width:100%;height:100dvh;padding:0;border-radius:0;background:none;box-shadow:none;zoom:1}
  .device::before,.device::after,.btn-rail,.island{display:none}
  .screen{border-radius:0}
}


/* Embedded in the marketing page. The stage's caption and page ground are
   chrome for a standalone tab; inside an iframe they read as a frame around
   a frame. The device itself keeps its bezel -- that boundary is the point. */
body.embed{padding:0;background:transparent;}
body.embed .caption{display:none;}
body.embed .stage{padding:0;background:transparent;}