/* iPhone 17 Pro mockup around real app captures, plus the small app pieces reused in page sections. */
/* iPhone 17 Pro mockups: real app captures composited into the Shots Deep Blue frame (transparent WebP).
   --w is the image width; the phone body fills about 86% of it. */
.iphone { --w: 380px; position: relative; width: var(--w); aspect-ratio: 754 / 1639; filter: drop-shadow(0 50px 60px rgba(0, 0, 0, .6)); }
.iphone > img, .iphone .state { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Category badge: the app's softened accent icon on a 12% tint of it. */
.cat { --soft: color-mix(in srgb, var(--cat) 75%, #fff); display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--soft) 13%, var(--surface)); color: var(--soft); }
.cat svg { width: 16px; height: 16px; fill: currentColor; }
.cat--sm { width: 30px; height: 30px; }
.cat--sm svg { width: 15px; height: 15px; }
.cat--xs { width: 22px; height: 22px; }
.cat--xs svg { width: 12px; height: 12px; }

/* Merchant monogram */
.mono { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--m); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.mono--sm { width: 28px; height: 28px; font-size: 10.5px; }
.tx__t, .tx__a { display: grid; gap: 2px; min-width: 0; }
.tx__t { flex: 1; }

.trend-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(152, 239, 90, .14); color: var(--lime); font-size: 12px; }


/* Per-step overlays that sit outside the screen, like annotations on the real UI. */
.overlay { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 22px; background: rgba(28, 28, 32, .9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7); font-size: 14px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.overlay svg { width: 18px; height: 18px; }
.overlay--voice { right: -4%; top: 63%; max-width: 270px; }
.overlay__mic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #9d6bff, #6a2cf0); color: #fff; }
.overlay--files { right: 0; top: 22%; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(28, 28, 32, .92); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); }
.file svg { width: 34px; height: 34px; padding: 8px; border-radius: 12px; background: #303030; fill: var(--ink); }
.file:nth-child(2) { margin-left: 28px; }
.overlay--sms { left: -4%; top: 24%; max-width: 270px; align-items: flex-start; }
.overlay--sms b { display: block; font-size: 12px; color: var(--muted); }
.overlay__app { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: #1c7a3c; color: #fff; }
.overlay--hub { left: 2%; bottom: 14%; }
.overlay__pulse { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }

@media (max-width: 560px) {
  .iphone { --w: min(340px, 84vw); }
  .overlay--hub { left: -4%; }
  .overlay--voice { right: -4%; }
  .overlay--files { right: -6%; }
}

/* Merchant logo — the app clips each logo into a circle; wordmarks sit on white with breathing room. */
.logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; overflow: hidden; }
.logo img { width: 72%; height: 72%; object-fit: contain; }
.logo--full img { width: 100%; height: 100%; object-fit: cover; }
.logo--sm { width: 30px; height: 30px; }
.sort-row .logo, .due-row .logo { width: 44px; height: 44px; }
.podium .logo { position: absolute; top: -22px; width: 44px; height: 44px; box-shadow: 0 0 0 4px var(--surface); }
/* Dark-theme brand tiles: white or brand-colored marks on each brand's own dark ground, as in dark-mode apps. */
.logo--uber { background: #000; }
.logo--amazon { background: #232f3e; }
.logo--amazon img { width: 70%; }
.logo--walmart { background: #0b2a5b; }
.logo--mcd { background: #c8102e; }
.logo--mcd img { width: 66%; }