/* BN718 - Public pages with depth and real materials: realistic phones in the features, a real notepad for "Sound familiar?", the
   Malls register on a tablet and the floor map in a browser window, both in perspective. Flat on small screens. */
/* features phones */
.bn656-shot{perspective:1400px}
.bn656-shot .frame{border-radius:40px!important;padding:8px!important;border:0!important;background:linear-gradient(145deg,#3b4048 0%,#1b1f24 35%,#2a2f36 60%,#0f1216 100%)!important;position:relative;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 3px #0b0d10,0 18px 30px -12px rgba(16,24,40,.35),0 46px 70px -34px rgba(16,24,40,.45)!important;transform:rotateY(-8deg) rotateX(4deg);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s ease}
.frow.flip .bn656-shot .frame{transform:rotateY(8deg) rotateX(4deg)}
.bn656-shot .frame::after{content:"";position:absolute;inset:8px;border-radius:33px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 30%,rgba(255,255,255,0) 46%)}
.bn656-shot .frame img{border-radius:33px!important;display:block}
.bn718-pre .bn656-shot .frame{opacity:0;transform:translateY(26px) rotateY(-8deg) rotateX(10deg)}
/* notepad */
.notebook{position:relative;background-color:#fffdf6!important;border:1px solid #eadfc6!important;border-radius:4px!important;transform:rotate(-1.2deg);
  background-image:linear-gradient(90deg,transparent 46px,#f3b4b4 46px,#f3b4b4 48px,transparent 48px),repeating-linear-gradient(#fffdf6 0 39px,#cfe0ef 39px 40px)!important;
  box-shadow:0 1px 1px rgba(60,40,20,.08),0 12px 24px -10px rgba(60,40,20,.25),0 30px 50px -30px rgba(60,40,20,.3)!important;padding-left:62px!important}
.notebook::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(245,236,200,.75);border:1px solid rgba(214,199,150,.6);box-shadow:0 2px 4px rgba(60,40,20,.12)}
.notebook ul li{border-bottom-color:transparent!important;min-height:40px;display:flex;align-items:center}
/* malls: register on a tablet, floor map in a browser window */
.bn658-shots{perspective:1800px}
.bn658-shots figure:first-child .frame{border-radius:26px!important;padding:14px!important;border:0!important;background:linear-gradient(145deg,#2d3238,#14171b 55%,#24282e)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 20px 34px -14px rgba(16,24,40,.4),0 60px 90px -40px rgba(16,24,40,.5)!important;transform:rotateY(10deg) rotateX(6deg);transform-origin:right center}
.bn658-shots figure:first-child .frame img{border-radius:12px!important}
.bn658-shots figure:first-child .frame::before{content:"";position:absolute;left:50%;bottom:-34px;width:34%;height:30px;transform:translateX(-50%);border-radius:0 0 12px 12px;background:linear-gradient(#cfd5dc,#9aa3ad);box-shadow:0 14px 20px -10px rgba(16,24,40,.45);z-index:-1}
.bn658-shots figure:first-child .frame{position:relative}
.bn658-shots figure:nth-child(2) .frame{transform:rotateY(-10deg) rotateX(6deg);transform-origin:left center;box-shadow:0 18px 30px -14px rgba(16,24,40,.35),0 50px 80px -40px rgba(16,24,40,.45)!important}
.bn658-shots figure figcaption{margin-top:40px}
@media (max-width:900px){.bn656-shot .frame,.frow.flip .bn656-shot .frame,.bn658-shots figure .frame{transform:none!important}.notebook{transform:none}.bn658-shots figure:first-child .frame::before{display:none}.bn658-shots figure figcaption{margin-top:12px}}
@media (prefers-reduced-motion:reduce){.bn656-shot .frame{transition:none}.bn718-pre .bn656-shot .frame{opacity:1;transform:rotateY(-8deg) rotateX(4deg)}}