/* 2026-10-14: Visitor-facing product previews and an orbit-inspired closing CTA.
   The astronaut and hero orbit styling are deliberately untouched. */

/* Editorial crop: the lower provisional music row is excluded from the
   public TBT presentation at every viewport, including phone landscape.
   The 1.82:1 crop ends above the provisional Music Videos rail, instead
   of merely trimming the very bottom of the tall screenshot.
   Keep the image at its natural scale, trim the frame instead of stretching. */
.product-interface-dialog.real-public-home[data-app="blacktable"] .product-interface-visual {
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:1.82!important;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  border-radius:12px!important;
  background-color:#06040a!important;
  background-position:top center!important;
  background-size:100% auto!important;
}
.product-interface-dialog.real-public-home[data-app="blacktable"] .product-interface-visual img{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:top center!important;
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
}

/* No customer-facing screenshot enlargement or behind-the-scenes notes. */
.product-interface-dialog .interface-zoom,
.product-interface-dialog .interface-notice{display:none!important}
.product-interface-dialog .interface-highlight{
  margin:17px 0 20px!important;
  padding:1px 0 1px 16px!important;
  border-left:2px solid rgba(186,125,245,.75)!important;
  background:none!important;
  color:#e3d5ed!important;
  font:500 clamp(13px,1.2vw,15px)/1.6 "DM Sans",sans-serif!important;
}
@media(max-width:760px){
 .product-interface-dialog .interface-highlight{margin:12px 0 18px!important}
}


/* The approved real astronaut/galaxy photography anchors the ending CTA.
   No emoji planets, CSS Saturns, concentric mock-planet rings or fake illustrations. */
#contact.cta{
 position:relative!important; isolation:isolate!important; overflow:hidden!important;
 border:1px solid rgba(176,114,248,.6)!important;
 border-radius:26px!important;
 background:#0a0720!important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 22px 62px rgba(0,0,0,.35)!important;
 padding:clamp(22px,4vw,38px)!important;
 gap:clamp(15px,3vw,28px)!important;
}
#contact.cta::before{
 content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
 background-image:linear-gradient(90deg,rgba(6,3,22,.48),rgba(9,4,28,.8) 45%,rgba(7,4,23,.63)),url('/api/hero?asset=background&v=4');
 background-position:center,center 53%;background-size:cover,cover;
 opacity:1; animation:none!important;transform:none!important;
}
#contact.cta::after{
 content:"";position:absolute;z-index:0;inset:auto -8% -48% auto;
 width:65%;height:100%;pointer-events:none;border:0!important;border-radius:0!important;
 background:radial-gradient(ellipse,rgba(130,72,228,.23),transparent 64%);
 box-shadow:none!important;transform:none!important;
}
#contact.cta > .cta-icon{
 position:relative!important;z-index:1!important;
 width:clamp(94px,13vw,145px)!important;height:clamp(120px,18vw,170px)!important;
 border:0!important;border-radius:0!important;
 background:url('/api/hero?asset=astronautnew&v=2') center center/contain no-repeat!important;
 box-shadow:none!important;filter:drop-shadow(0 10px 17px rgba(129,68,224,.38));
 animation:dcvAstronautDrift 7s ease-in-out infinite;
}
#contact.cta > .cta-icon::before,#contact.cta > .cta-icon::after{display:none!important;content:none!important}
#contact.cta > div:not(.cta-icon),#contact.cta > .btn{position:relative!important;z-index:2!important;min-width:0}
#contact.cta h2{text-shadow:0 2px 18px rgba(0,0,0,.4)}
#contact.cta .btn.primary{
 box-shadow:0 8px 26px rgba(100,37,162,.35)!important;
 transition:transform .2s ease,filter .2s ease!important;
}
#contact.cta .btn.primary:hover,#contact.cta .btn.primary:focus-visible{
 transform:translateY(-2px)!important;filter:brightness(1.1)!important;
}
@keyframes dcvAstronautDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* The dialog itself scrolls; keep Close visible throughout all product content. */
.product-interface-dialog{position:relative!important}
.product-interface-dialog .product-interface-intro{
 position:sticky!important;top:0!important;z-index:20!important;
 flex-shrink:0!important;background:rgba(23,17,38,.98)!important;
 backdrop-filter:blur(16px);
}
.product-interface-dialog .interface-close{
 position:relative!important;z-index:21!important;flex-shrink:0!important;
 min-width:42px!important;min-height:42px!important;
}
@media(max-width:760px){
 #contact.cta{grid-template-columns:82px minmax(0,1fr)!important;align-items:center!important;gap:14px 12px!important;padding:24px 18px!important}
 #contact.cta > .cta-icon{width:80px!important;height:128px!important;align-self:center}
 #contact.cta h2{font-size:clamp(25px,6.5vw,34px)!important;line-height:1.12!important}
 #contact.cta p{font-size:clamp(12px,3.5vw,15px)!important;line-height:1.5!important}
 #contact.cta > .btn{grid-column:1/-1!important;width:100%!important;min-height:52px!important}
 #contact.cta::before{background-image:linear-gradient(90deg,rgba(5,3,17,.62),rgba(8,4,25,.8)),url('/api/hero?asset=background&v=4')}
}
@media(prefers-reduced-motion:reduce){#contact.cta > .cta-icon{animation:none!important}#contact.cta .btn.primary{transition:none!important}}