/* Real geometry, with a prerendered view while the 3D scene loads. */
.business-visual[data-business-model] {
  height: clamp(180px, 21vw, 290px);
  isolation: isolate;
  background: #e7ebdf;
  border: 1px solid #dbe2d1;
}
.business-visual__poster,
.business-visual__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.business-visual__poster { object-fit: cover; }
.business-visual__canvas {
  opacity: 0;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  outline-offset: -5px;
}
.business-visual.is-3d-ready .business-visual__canvas { opacity: 1; }
.business-visual.is-3d-ready .business-visual__poster { visibility: hidden; }
.business-visual__canvas:active { cursor: grabbing; }
.business-visual__canvas:focus-visible { outline: 2px solid #617742; }
.business-visual .visual-label { bottom: 12px; left: 12px; z-index: 1; font-size: 7px; pointer-events: none; }
.business-visual__hint {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  color: #67765b;
  font-size: 9px;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
}
.business-visual__motion {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #536447;
  cursor: pointer;
  font-size: 12px;
}
.business-visual__motion:hover { color: #243021; background: #d5dfc5a6; }
.business-visual__motion:focus-visible { outline-offset: -4px; }
.business-visual:not(.is-3d-ready) .business-visual__motion { display: none; }
.business-visual.is-3d-ready .business-visual__hint { opacity: 1; }
@media (max-width:800px) and (min-width:561px) {
  .business-visual .visual-label { font-size: 5px; bottom: 14px; left: 8px; letter-spacing: 0; }
  .business-visual__hint { font-size: 8px; top: 8px; left: 8px; }
}
@media (max-width:560px) {
  .business-visual[data-business-model] { height: auto; aspect-ratio: 7 / 5; }
}