/* xChup hero mockup: a Mac desktop mid-capture (selection + size badge) and the quick-access card. */
.mac-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: inherit;
  background: radial-gradient(120% 90% at 20% 0%, #a5b4fc 0%, #6366f1 32%, #312e81 70%, #1e1b4b 100%);
  color: #fff; font-size: 13px;
}
.menubar { display: flex; align-items: center; gap: 18px; height: 28px; padding: 0 16px; background: rgba(0, 0, 0, 0.18); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.menubar-apple { width: 13px; height: 15px; background: #fff; border-radius: 50% 50% 45% 45%; }
.menubar-app { font-weight: 700; }
.menubar-spacer { flex: 1; }
.menubar-app-icon img { display: block; border-radius: 4px; }
.shot-window { position: absolute; left: 8%; top: 18%; width: 46%; height: 58%; border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.shot-window::before { content: ""; position: absolute; left: 14px; top: 13px; width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 26px 6px, #febc2e 5px, transparent 6px), radial-gradient(circle at 46px 6px, #28c840 5px, transparent 6px); }
.shot-lines { position: absolute; inset: 44px 18px 18px; display: grid; gap: 10px; align-content: start; }
.shot-lines span { height: 10px; border-radius: 5px; background: #e4e4ea; }
.shot-lines span:nth-child(2) { width: 70%; } .shot-lines span:nth-child(4) { width: 55%; }
.shot-sel { position: absolute; left: 18%; top: 32%; width: 40%; height: 40%; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); }
.shot-badge { position: absolute; right: -2px; bottom: -30px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); font: 600 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; }
.shot-card { position: absolute; right: 3%; bottom: 6%; width: min(240px, 30%); padding: 10px; border-radius: 16px; background: rgba(30, 30, 36, 0.86); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); display: grid; gap: 8px; }
.shot-thumb { aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(135deg, #eef2ff, #c7d2fe); position: relative; }
.shot-thumb::after { content: "1"; position: absolute; left: 18%; top: 24%; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.shot-copied { font-size: 12px; font-weight: 600; color: #86efac; }
.shot-actions { display: flex; gap: 6px; }
.shot-actions span { flex: 1; padding: 5px 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); text-align: center; font-size: 12px; font-weight: 600; }
@media (max-width: 600px) {
  .mac-screen { aspect-ratio: 4 / 5; }
  .shot-window { left: 6%; width: 88%; height: 46%; }
  .shot-card { width: 50%; }
  .shot-sel { left: 12%; top: 24%; width: 62%; height: 28%; }
  .menubar span:nth-child(n+4):not(.menubar-spacer):not(.menubar-app-icon):not(.menubar-clock) { display: none; }
}