/* CORE: product screenshots on /features/ pages (all 8 languages).
   Each <figure class="shot"> holds two <picture>s — light (.sl) and dark (.sd) app theme; each picture
   swaps to the phone shot below 700px via <source media>. Hidden pictures are display:none + loading=lazy,
   so the browser downloads only the one variant it shows. Dark by default (the landing is dark); the ☀ toggle
   switches to light and is remembered (shots.js sets html[data-shot]). Screenshots are regenerated by scripts/landing-shots/. */
.shot { margin: 0 0 32px; position: relative; }
.shot-frame { display: block; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
  background: #111; box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(104,83,219,0.06); cursor: zoom-in; }
/* Element crops (a settings card, not a whole screen) — keep them close to their real size. */
.shot.narrow { max-width: 600px; margin-left: auto; margin-right: auto; }
.shot img { display: block; width: 100%; height: auto; }
.shot .sl { display: none; }
html[data-shot="light"] .shot .sl { display: block; }
html[data-shot="light"] .shot .sd { display: none; }

.shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
  padding: 0 4px; font-size: 10px; line-height: 1.6; color: rgba(255,255,255,0.4); }
.shot-toggle { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.shot-toggle button { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,0.35); cursor: pointer; }
.shot-toggle button[aria-pressed="true"] { background: rgba(104,83,219,0.25); color: #c4b5fd; }

.shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-bottom: 12px; }
.shot-grid .shot { margin-bottom: 0; }

.shot-zoom { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 24px; background: rgba(0,0,0,0.88); cursor: zoom-out; }
.shot-zoom img { display: block; max-width: min(1600px, 100%); height: auto; border-radius: 10px; margin: auto; }

@media (max-width: 700px) {
  .shot.has-m .shot-frame { max-width: 280px; margin: 0 auto; border-radius: 22px; }
  .shot figcaption { font-size: 13px; }
  .shot-grid { grid-template-columns: 1fr; gap: 28px; }
  .shot-zoom { padding: 12px; }
}