/* The iPhone Duo held open like a book, landscape, around one capture of the
   app's split view (features.Duo in internal/pages/features): a thin metal
   body, the black ring, the display and the fold down its middle, as the iOS
   app's App Store frames draw it (mssgs-ios Scripts/store-frame.swift
   drawDuo). Every size is a share of the device's width (cqw), so it scales
   as one piece. --duo-tilt turns it in 3D (a page sets it), --duo-shadow is
   the drop shadow under it. */
.duo{container-type:inline-size}
.duo-body{transform:var(--duo-tilt,none);transform-origin:50% 50%;position:relative;padding:1.33cqw;border-radius:3.75cqw;background:linear-gradient(180deg,#50555d,#2a2d33 52%,#3a3e45);box-shadow:inset 0 0 0 1px rgba(106,112,121,.55),var(--duo-shadow,0 2.4cqw 5cqw rgba(14,26,16,.3))}
.duo-body::before{content:"";position:absolute;inset:.48cqw;border-radius:3.27cqw;background:#050505}
/* Where the fold reaches the rim, top and bottom. */
.duo-body::after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:linear-gradient(#1a1c20 0 .48cqw,transparent .48cqw calc(100% - .48cqw),#1a1c20 calc(100% - .48cqw))}
.duo-screen{position:relative;z-index:1;overflow:hidden;border-radius:2.66cqw;background:#16181c}
.duo-screen img{display:block;width:100%;height:auto}
/* The fold: a soft dark-light-dark band, as it reads once the display is flat. */
.duo-screen::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2.2cqw;margin-left:-1.1cqw;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.16),rgba(255,255,255,.05),rgba(0,0,0,.16),rgba(0,0,0,0));pointer-events:none}

/* The folding Duo (features.DuoFold): the same Duo in two halves. The right
   half is a flap hinged on the fold, its back the outer display. When
   web-static/js/duo-fold.js adds .is-folded the flap closes over the left half
   like a book, and the closed phone moves to the middle of where the open one
   stood. The tilt sits on the stage, so both halves turn as one. */
.duo-stage{position:relative;display:flex;transform-style:preserve-3d;transform:var(--duo-tilt,none);transition:transform .8s cubic-bezier(.4,0,.2,1) .85s}
.duo-half{position:relative;box-sizing:border-box;width:50%}
.duo-half--l,.duo-face{background:linear-gradient(180deg,#50555d,#2a2d33 52%,#3a3e45);border:1px solid rgba(106,112,121,.55);box-shadow:var(--duo-shadow,0 2.4cqw 5cqw rgba(14,26,16,.3))}
.duo-half--l{padding:1.33cqw 0 1.33cqw 1.33cqw;border-right:0;border-radius:3.75cqw 0 0 3.75cqw;transform:translateZ(-1px)}
.duo-half--l::before,.duo-face::before{content:"";position:absolute;background:#050505}
.duo-half--l::before{inset:.48cqw 0 .48cqw .48cqw;border-radius:3.27cqw 0 0 3.27cqw}
.duo-half--r{transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.3s cubic-bezier(.6,0,.25,1)}
.duo-face{box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.duo-face--front{position:relative;padding:1.33cqw 1.33cqw 1.33cqw 0;border-left:0;border-radius:0 3.75cqw 3.75cqw 0}
.duo-face--front::before{inset:.48cqw .48cqw .48cqw 0;border-radius:0 3.27cqw 3.27cqw 0}
/* The outer side: a phone of its own, rounded at its free edge and tighter
   at the spine. Its own drawing's left is the outer edge once it is closed. */
.duo-face--back{position:absolute;inset:0;padding:1.33cqw;transform:rotateY(180deg);border-radius:3.75cqw 1.6cqw 1.6cqw 3.75cqw}
.duo-face--back::before{inset:.48cqw;border-radius:3.27cqw 1.2cqw 1.2cqw 3.27cqw}
.duo--fold .duo-screen{aspect-ratio:600/845}
.duo-half--l .duo-screen{border-radius:2.66cqw 0 0 2.66cqw}
.duo-face--front .duo-screen{border-radius:0 2.66cqw 2.66cqw 0}
.duo-face--back .duo-screen{height:100%;aspect-ratio:auto}
.duo--fold .duo-screen img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Each half shows its half of the one open capture. */
.duo--fold .duo-screen img.duo-open{width:200%;max-width:none;object-fit:fill}
.duo--fold .duo-screen img.duo-open--r{left:-100%}
/* The fold's shading, now at each half's inner edge. */
.duo--fold .duo-screen::after{display:none}
.duo-half--l .duo-screen::after,.duo-face--front .duo-screen::after{display:block;width:1.1cqw;margin:0}
.duo-half--l .duo-screen::after{left:auto;right:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.16),rgba(255,255,255,.04))}
.duo-face--front .duo-screen::after{left:0;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(0,0,0,.16),rgba(0,0,0,0))}
.duo--fold.is-folded .duo-half--r{transform:rotateY(-180deg)}
/* Closed, it is half as wide: a little larger, and centred on where the open
   phone stood (scaled about the fold, so it moves 25% x 1.15). */
.duo--fold.is-folded .duo-stage{transform:var(--duo-tilt,none) translateX(28.75%) scale(1.15)}
@media (prefers-reduced-motion:reduce){.duo-stage,.duo-half--r{transition:none}}