/* Phone-framed screenshots on the marketing page (pages/_phone). */
/* No `position` here: callers set relative/absolute with Tailwind classes. */
.ss-phone {
  border-radius: 2.4rem;
  padding: 9px;
  background: #1c1b1f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 30px 60px -20px rgba(30, 24, 60, .35),
    0 12px 24px -12px rgba(0, 0, 0, .25);
}

.ss-phone-screen {
  border-radius: 1.85rem;
  overflow: hidden;
  background: var(--color-canvas);
}

/* Show the screenshot that matches the page theme. */
.ss-shot-dark { display: none; }
[data-theme="dark"] .ss-shot-light { display: none; }
[data-theme="dark"] .ss-shot-dark { display: block; }
[data-theme="dark"] .ss-phone {
  background: #0d0d10;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .10),
    0 30px 60px -20px rgba(0, 0, 0, .7);
}