/* Marketing hero: a readable, full conversation preview instead of an empty inbox state. */
.preview {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  perspective: 1400px;
}

.workspace-hero-shot {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border: 1px solid #34415a;
  border-radius: 18px;
  background: #101722;
  box-shadow: 0 26px 72px rgba(0, 0, 0, .34);
  transform-origin: center center;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease, border-color .42s ease;
}

.workspace-hero-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(109,133,255,0) 35%, rgba(130,229,255,.09) 50%, rgba(109,133,255,0) 64%);
  opacity: 0;
  transform: translateX(-68%);
  transition: opacity .36s ease, transform .72s ease;
}

.workspace-hero-shot:hover {
  border-color: #6085dc;
  box-shadow: 0 34px 86px rgba(16, 41, 104, .28), 0 16px 36px rgba(0,0,0,.36);
  transform: rotateX(1.25deg) rotateY(-1.55deg) translateY(-6px);
}

.workspace-hero-shot:hover::after { opacity: 1; transform: translateX(68%); }

.workspace-hero-shot > img {
  display: block;
  width: 100%;
  aspect-ratio: 2.22 / 1;
  object-fit: cover;
}

.workspace-hero-shot figcaption {
  position: absolute;
  right: 14px;
  bottom: 13px;
  left: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #dce8ff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

.workspace-hero-shot figcaption button {
  border: 1px solid #769aff;
  border-radius: 9px;
  background: rgba(15, 26, 49, .9);
  color: white;
  padding: 9px 12px;
  font: inherit;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.workspace-hero-shot figcaption button:hover { background:#486ae1; transform:scale(1.04); }

.workspace-lightbox {
  width: min(1400px, 94vw);
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 1px solid #415373;
  border-radius: 17px;
  background: #101722;
  box-shadow: 0 32px 100px rgba(0,0,0,.7);
}
.workspace-lightbox::backdrop { background: rgba(4, 7, 13, .82); backdrop-filter: blur(6px); }
.workspace-lightbox img { display:block; width:100%; border-radius:16px; }
.workspace-lightbox .close { position:absolute; top:-15px; right:-15px; width:36px; height:36px; border:1px solid #5e76a6; border-radius:50%; background:#17223a; color:white; font-size:24px; cursor:pointer; }

@media (min-width: 901px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 38px !important; }
  .hero-grid > div:first-child { max-width: 700px; }
  .hero-grid > .preview { grid-column: 1; max-width: none !important; }
  .hero { padding-bottom: 86px; }
}

@media (max-width: 700px) {
  .workspace-hero-shot { border-radius: 12px; }
  .workspace-hero-shot figcaption span { display:none; }
  .workspace-hero-shot figcaption { justify-content:flex-end; right:8px; bottom:8px; left:8px; }
  .workspace-hero-shot figcaption button { padding:7px 9px; font-size:10px; }
}