/* Shared device frames for /ios and /web (MSW-348).
   The screen inside is always a REAL product screenshot; only the hardware is CSS. */

.device-stage { position: relative; }
.device-caption { margin: 18px 0 0; text-align: center; font-size: 0.88rem; color: var(--muted); }

/* ---------- Tablet (generic, landscape) ---------- */
.device-tablet {
  position: relative; margin: 0; padding: 14px; border-radius: 34px;
  background: linear-gradient(160deg, #34325c, var(--night) 55%);
  box-shadow: var(--shadow-lift), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.device-tablet::before {
  content: ''; position: absolute; inset-inline-start: 50%; top: 5px; width: 6px; height: 6px; margin-inline-start: -3px;
  border-radius: 50%; background: #0e0d22; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.device-tablet .device-screen { border-radius: 20px; overflow: hidden; background: var(--night); aspect-ratio: 933 / 700; }
.device-tablet img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Laptop / Chromebook ---------- */
.device-laptop { position: relative; margin: 0 0 26px; }
.device-laptop .device-lid {
  padding: 12px 12px 14px; border-radius: 20px 20px 6px 6px;
  background: linear-gradient(160deg, #34325c, var(--night) 55%);
  box-shadow: var(--shadow-lift), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  position: relative;
}
.device-laptop .device-lid::before {
  content: ''; position: absolute; inset-inline-start: 50%; top: 4px; width: 5px; height: 5px; margin-inline-start: -2.5px;
  border-radius: 50%; background: #0e0d22;
}
.device-laptop .device-screen { border-radius: 8px; overflow: hidden; background: var(--night); aspect-ratio: 16 / 9; }
.device-laptop img { width: 100%; height: 100%; object-fit: cover; }
.device-laptop .device-base {
  position: relative; height: 16px; width: 104%; margin-inline: -2%;
  background: linear-gradient(#dcd9ea, #b4b1cc); border-radius: 2px 2px 20px 20px;
  box-shadow: 0 18px 28px -16px rgba(38, 36, 80, 0.5);
}
.device-laptop .device-base::before {
  content: ''; position: absolute; inset-inline-start: 50%; top: 0; width: 18%; height: 6px; margin-inline-start: -9%;
  background: #a09db8; border-radius: 0 0 10px 10px;
}

@media (max-width: 560px) {
  .device-tablet { padding: 9px; border-radius: 22px; }
  .device-tablet .device-screen { border-radius: 14px; }
  .device-laptop .device-lid { padding: 8px 8px 10px; border-radius: 14px 14px 4px 4px; }
  .device-laptop .device-base { height: 12px; }
}