/* Two iPhones acting out real use: Guac and Daily Dose (Evan picked it in home-app-lab, 2026-10-11). Shared by the homepage
   Apps chapter (.ch-pic.ad, css/home-story.css) and the Apps page hero (Evan, 2026-10-13; .ahc-ad, css/apps-hero.css).
   js/home-apps-demo.js moves the screens. iPhone 15 Pro shapes (70.6 x 146.6 mm, corners about 17% of the width, thin rim, side buttons). */
.ad-two { display: flex; align-items: center; justify-content: center; gap: 6%; width: 100%; height: 100%; }
.ad-one { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ad-one.g { transform: rotate(-4deg) translateY(20px); } .ad-one.d { transform: rotate(4deg) translateY(14px); }   /* Daily Dose lower so its top never clips (Evan, 2026-10-11) */
.ad .nm { font-size: 15px; color: #1d1d1f; }
.ad .ip { --w: clamp(112px, 11vw, 160px);   /* bigger, so the phones fill the frame like the other examples (Evan, 2026-10-13) */
   position: relative; display: block; width: var(--w); aspect-ratio: 70.6 / 146.6;
  border-radius: calc(var(--w) * .17); padding: calc(var(--w) * .035); background: #1c1c1e;
  box-shadow: inset 0 0 0 1.5px #5b5b60, inset 0 0 0 3px #2c2c2e, 0 44px 60px -34px rgba(0,0,0,.55), 0 10px 20px -12px rgba(0,0,0,.3); }
.ad .btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3a3c, #6e6e73); }
.ad .b1 { left: -2px; top: 17%; height: 5%; } .ad .b2 { left: -2px; top: 25%; height: 9%; } .ad .b3 { left: -2px; top: 36%; height: 9%; } .ad .b4 { right: -2px; top: 28%; height: 14%; }
.ad .scr { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--w) * .135); background: #fff;
  clip-path: inset(0 round calc(var(--w) * .135)); -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* iPhone Safari let the sliding screenshots' square corners poke past the rounded screen (Evan, 2026-10-13): overflow + radius
   doesn't clip GPU-layered (transformed) children inside a rotated phone there. clip-path and the mask clip them for real. */
.ad .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: translateX(100%); }
.ad .scr img.on { transform: none; z-index: 2; }
/* the touch dot, like iOS screen-recording touches */
.ad .tp { position: absolute; z-index: 9; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: rgba(60,60,67,.38); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 2px 8px rgba(0,0,0,.18);
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.3), left .45s cubic-bezier(.32,.72,0,1), top .45s cubic-bezier(.32,.72,0,1); }
.ad .tp.on { opacity: 1; transform: scale(1); }
.ad .tp.down { transform: scale(.78); background: rgba(60,60,67,.55); }
@media (max-width: 860px) { .ad .ip { --w: 128px; } }