/* Recent releases join the existing clickable GUI collage. */
.hero-visual { min-height: 790px; }
.product-float--tb-dim,
.product-float--session-board,
.product-float--distance-designer {
  z-index: 8;
  height: auto;
  padding: 7px;
  border: 1px solid #675731;
  border-radius: 14px;
  background: #0b0d0f;
  box-shadow: 0 0 0 1px #050607, 12px 14px 0 rgba(5, 6, 7, .82);
  overflow: hidden;
  animation: newPluginFloat 9s ease-in-out infinite;
}
.product-float--tb-dim img,
.product-float--session-board img,
.product-float--distance-designer img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 7px; }
.product-float--session-board { width: 65%; left: 0; top: 8px; --float-turn: -2deg; animation-delay: -3s; }
.product-float--tb-dim { width: 29%; right: 0; top: 15px; --float-turn: 2deg; animation-delay: -6s; }
.product-float--distance-designer { width: 64%; right: 0; top: 295px; --float-turn: 1deg; }
.hero-visual .product-float--dxsat { width: 35%; left: 0; right: auto; top: 285px; }
.hero-visual .product-float--mxcarve { width: 64%; left: 0; top: 565px; }
.hero-visual .product-float--dxlink { width: 33%; left: auto; right: 0; top: 610px; }
.hero-plugin-name { display: block; padding-top: 7px; color: #e9d29b; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.product-float--tb-dim:hover,
.product-float--session-board:hover,
.product-float--distance-designer:hover { animation-play-state: paused; border-color: #f3d27c; }
.product-float--tb-dim:focus-visible,
.product-float--session-board:focus-visible,
.product-float--distance-designer:focus-visible { outline: 3px solid #f3d27c; outline-offset: 5px; }
@keyframes newPluginFloat {
  0%, 100% { transform: translateY(0) rotate(var(--float-turn)); }
  50% { transform: translateY(-7px) rotate(var(--float-turn)); }
}
.product-box--tb-dim img { object-fit: contain; background: #101214; }
@media (max-width: 1000px) and (min-width: 521px) {
  .hero-visual { min-height: 850px; }
  .product-float--distance-designer { top: 330px; }
  .hero-visual .product-float--dxsat { top: 350px; }
  .hero-visual .product-float--mxcarve { top: 620px; }
  .hero-visual .product-float--dxlink { top: 650px; }
}
@media (max-width: 520px) {
  .hero-visual { min-height: 590px; }
  .product-float--session-board { width: 69%; top: 8px; padding: 5px; }
  .product-float--tb-dim { width: 27%; top: 16px; padding: 4px; }
  .product-float--distance-designer { width: 68%; top: 204px; padding: 5px; }
  .hero-visual .product-float--dxsat { width: 29%; top: 211px; padding: 4px; }
  .hero-visual .product-float--mxcarve { width: 64%; top: 414px; }
  .hero-visual .product-float--dxlink { width: 31%; top: 432px; padding: 4px; }
  .hero-plugin-name { padding-top: 5px; font-size: .55rem; }
  .product-float--tb-dim .hero-plugin-name { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .product-float--tb-dim,
  .product-float--session-board,
  .product-float--distance-designer { animation: none; transform: rotate(var(--float-turn)); }
}