/* Zero BS shared iPhone frame v2 (from ZBS HUB/Content Ideas/_shared/iphone-frame.css, 27 Oct 2026).
   Website version: screens are shown sharp (no teaser blur). Floating island, thin even bezel, side buttons.
   Markup:  <div class="iph"><div class="scr"><img src="..." alt="..."></div><i class="di"></i><i class="b a"></i><i class="b v1"></i><i class="b v2"></i><i class="b p"></i><i class="b cc"></i></div>
   Two-phone stack (dark in front, light behind): <div class="iph-stack"> <div class="iph front">..</div> <div class="iph back">..</div> </div>
   The stack fills its positioned parent; give the parent a height. */
.iph{position:absolute;box-sizing:border-box;aspect-ratio:0.486;container-type:size;border-radius:17%/8.26%;background:var(--c-0a0a0c);
  box-shadow:inset 0 0 0 1.5px var(--c-808088),inset 0 0 0 3.5px var(--c-1b1b1f),0 0 0 1px var(--black),0 46px 90px -12px var(--c-rgba-0-0-0-0p9),0 16px 36px var(--c-rgba-0-0-0-0p55)}
.iph .scr{--b:2.4cqw;position:absolute;inset:var(--b);border-radius:calc(17cqw - var(--b));overflow:hidden;clip-path:inset(0 round calc(17cqw - var(--b)));background:var(--c-101010)}
.iph .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;border-radius:0;box-shadow:none;filter:none;max-width:none}
.iph .di{position:absolute;top:5.6cqw;left:50%;transform:translateX(-50%);width:25cqw;height:7.2cqw;border-radius:99px;background:var(--black);box-shadow:0 0 0 1px var(--c-rgba-255-255-255-0p06)}
.iph .b{position:absolute;width:0.9cqw;background:var(--c-2b2b30);box-shadow:inset 1px 0 0 var(--c-5c5c63)}
.iph .b.a,.iph .b.v1,.iph .b.v2{left:-0.9cqw;border-radius:2px 0 0 2px}
.iph .b.p,.iph .b.cc{right:-0.9cqw;border-radius:0 2px 2px 0;box-shadow:inset -1px 0 0 var(--c-5c5c63)}
.iph .b.a{top:17%;height:4%}
.iph .b.v1{top:24.5%;height:7.2%}
.iph .b.v2{top:33.2%;height:7.2%}
.iph .b.p{top:27%;height:10.5%}
.iph .b.cc{top:56%;height:6.5%;background:var(--c-222226)}
.iph-stack{position:absolute;inset:0}
.iph-stack .iph{left:50%}
.iph-stack .iph.front{top:10px;height:calc(100% - 50px);transform:translateX(-92%) rotate(-5deg);z-index:1}
.iph-stack .iph.back{top:40px;height:calc(100% - 60px);transform:translateX(-8%) rotate(5deg);z-index:0}