/* Phone demo: a real FoodTechGuru screen recording in an iPhone frame, shown in the app band of every
   CK page. Markup (see calculators/js/phone-demo.js):
     <figure class="pd-stage [pd-stage--solo]">
       <div class="pd-back"><img …></div>           optional: the Google Sheet behind the phone
       <div class="pd-phone"><div class="pd-device">
         <img class="pd-still" …>                     outcome frame: crawlable, reduced-motion, no-JS
         <video class="pd-video" muted playsinline loop preload="none" data-src="/media/app/app-….mp4"></video>
       </div></div>
       <figcaption>…</figcaption>
     </figure>
   The recordings already carry the status bar and Dynamic Island, so the frame draws only the bezel. */

.pd-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(178px, 21vw, 262px); align-items: center; margin: 0; }
.pd-stage::before { content: ""; position: absolute; z-index: 0; right: -4%; top: 50%; width: min(78%, 420px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffbb0 0%, var(--yellow) 55%, rgba(245, 242, 85, 0) 72%); }
.pd-back { position: relative; z-index: 1; grid-column: 1; grid-row: 1; margin-right: -64px; transform: rotate(-2.2deg); }
.pd-back img { display: block; width: 100%; height: auto; background: #fff; border: 2px solid #000; border-radius: 14px; box-shadow: var(--shadow); }
.pd-phone { position: relative; z-index: 2; grid-column: 2; grid-row: 1; }
.pd-stage--solo { grid-template-columns: 1fr; justify-items: center; }
.pd-stage--solo::before { right: auto; left: 50%; transform: translate(-50%, -50%); width: min(92%, 440px); }
.pd-stage--solo .pd-phone { grid-column: 1; width: clamp(200px, 24vw, 280px); }
.pd-stage figcaption { position: relative; z-index: 2; grid-column: 1 / -1; margin-top: 22px; font-size: 0.86rem; color: var(--muted); text-align: center; }

.pd-device { position: relative; aspect-ratio: 368 / 800; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #2c2c38 0%, #0a0a12 45%, #1c1c26 100%); box-shadow: inset 0 0 0 1.5px #4a4a58, inset 0 0 0 4px #0a0a12, 0 34px 60px -24px rgba(1, 3, 79, 0.55), 7px 7px 0 #000; box-sizing: content-box; width: calc(100% - 18px); }
/* side buttons */
.pd-device::before, .pd-device::after { content: ""; position: absolute; width: 4px; border-radius: 2px; background: #22222c; }
.pd-device::before { left: -3px; top: 22%; height: 11%; box-shadow: 0 -52px 0 -1px #22222c; }
.pd-device::after { right: -3px; top: 28%; height: 15%; }
.pd-still, .pd-video { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: cover; border-radius: 37px; background: #fff; }
.pd-video { opacity: 0; transition: opacity 0.45s ease; }
.pd-device.is-playing .pd-video { opacity: 1; }

/* Official App Store badge (Apple artwork, unmodified) */
.pd-badge { display: inline-block; line-height: 0; border-radius: 10px; transition: transform 0.18s; }
.pd-badge img { height: 54px; width: auto; }
.pd-badge:hover { transform: translateY(-2px); }
.pd-badge-note { display: block; margin-top: 6px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }

/* compact promo block for hub pages */
.pd-promo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; background: #fff; border: 2px solid #000; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 40px; margin: 40px 0 64px; overflow: hidden; }
.pd-promo h2 { margin-bottom: 10px; }
.pd-promo .pd-stage--solo .pd-phone { width: clamp(170px, 17vw, 210px); }

@media (max-width: 860px) {
  .pd-stage { grid-template-columns: 1fr; justify-items: center; }
  .pd-stage::before { right: auto; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(96%, 380px); }
  .pd-phone { grid-column: 1; grid-row: 1; width: clamp(190px, 54vw, 250px); margin-bottom: -56px; }
  .pd-back { grid-column: 1; grid-row: 2; margin-right: 0; width: 100%; transform: rotate(-1.4deg); }
  .pd-stage--solo .pd-phone { margin-bottom: 0; width: clamp(200px, 58vw, 260px); }
  .pd-promo { grid-template-columns: 1fr; padding: 26px 22px; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) { .pd-video { display: none; } .pd-badge { transition: none; } }
/* portrait sheet images (a menu column) stay narrow so the phone keeps the lead */
.pd-back--tall { justify-self: end; width: min(100%, 330px); }
@media (max-width: 860px) { .pd-back--tall { justify-self: center; width: min(86%, 330px); } }