.exact-reference {
  margin: 0;
  width: 100%;
}

.exact-reference img {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.exact-reference__desktop {
  display: block;
}

.exact-reference__mobile {
  display: none;
}

/* The approved source art is now the visible rendering layer. */
.auth-render-v4 > .auth-reference-field,
.scale-render-v4 > .scale-reference-field {
  display: none !important;
}

.exact-reference--authorization .exact-reference__desktop img {
  width: 100%;
  height: auto;
}

.exact-reference__crop {
  position: relative;
  overflow: hidden;
  background: #020302;
}

/* Locked desktop homepage field, cropped only to remove the reference header. */
.exact-reference__crop--scales-desktop {
  aspect-ratio: 1672 / 871;
}

.exact-reference__crop--scales-desktop img {
  position: absolute;
  width: 100%;
  height: auto;
  transform: translateY(-7.4388948%);
}

.exact-reference__mobile-pan {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-color: rgba(215, 255, 22, 0.42) rgba(255, 255, 255, 0.05);
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.exact-reference__mobile-pan img {
  width: 1080px;
  height: auto;
}

/* Full approved artboards replace the former DOM-built diagrams verbatim. */
.exact-reference--artboard {
  margin-top: clamp(48px, 6vw, 92px);
  scroll-margin-top: 88px;
}

.exact-reference__responsive-pan {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: #050706;
}

.exact-reference--artboard .exact-reference__responsive-pan img {
  width: 100%;
  height: auto;
}

.exact-reference__responsive-pan:focus-visible {
  outline: 1px solid rgba(215, 255, 22, 0.72);
  outline-offset: 4px;
}

/* Locked mobile homepage field, cropped only to remove the reference header. */
.exact-reference__crop--scales-mobile {
  aspect-ratio: 942 / 1578;
}

.exact-reference__crop--scales-mobile img {
  position: absolute;
  width: 100%;
  height: auto;
  transform: translateY(-5.9594756%);
}

@media (max-width: 1100px) {
  .exact-reference__desktop {
    display: none;
  }

  .exact-reference__mobile {
    display: block;
  }

  .exact-reference--authorization,
  .exact-reference--scales {
    width: 100%;
  }

  .exact-reference--authorization .exact-reference__mobile {
    background: #020302;
  }

  .exact-reference__responsive-pan {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: rgba(215, 255, 22, 0.42) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  .exact-reference--artboard .exact-reference__responsive-pan img {
    width: 1320px;
    height: auto;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .exact-reference--scales .exact-reference__desktop {
    display: block;
  }

  .exact-reference--scales .exact-reference__mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exact-reference {
    scroll-behavior: auto;
  }
}