/* A holographic guide assembles beside the form and points at it (tugan-signup-hologram.js). */
.form__home.form__home--guided {
  /* The hologram clip reaches far to the right so its particles fly in from off-screen. */
  overflow-x: clip;
}
.form__home.form__home--guided .form__home__inner {
  position: relative; display: grid; grid-template-columns: minmax(0,500px) minmax(0,1fr);
  align-items: center; gap: 28px; width: 100%; max-width: 1200px; margin-inline: auto;
}
.form__home.form__home--guided .form-wrap { position: relative; z-index: 2; }
.form__home.form__home--guided .form__home-img {
  position: relative; align-self: center; width: 100%; min-width: 0;
  margin: 12px 0 0; transform: none; pointer-events: none; z-index: 1;
}
.form__home.form__home--guided .signup-guide-motion {
  position: relative; width: calc(100% + 24px); max-width: 680px; margin-left: -44px;
}
.form__home.form__home--guided .signup-guide-motion > img {
  display: block; width: 100%; max-width: none; height: auto;
}
/* The clips are 1920x1080 with the man at x70 y40, 1023x1000: this box lays the man exactly over the still. */
.form__home.form__home--guided .signup-guide-canvas {
  position: absolute; left: -6.843%; top: -4%; width: 187.683%; height: auto; max-width: none;
  visibility: hidden; pointer-events: none;
}
.form__home.form__home--guided .signup-guide-source {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.form__home.form__home--guided .signup-guide-motion.is-motion > img { visibility: hidden; }
.form__home.form__home--guided .signup-guide-motion.is-motion .signup-guide-canvas { visibility: visible; }
@media (min-width: 901px) and (max-width: 1199px) {
  .form__home.form__home--guided .form__home__inner { grid-template-columns: minmax(0,470px) minmax(0,1fr); gap: 24px; }
  .form__home.form__home--guided .signup-guide-motion { width: calc(100% + 42px); margin-left: -44px; }
}
@media (max-width: 900px) {
  .form__home.form__home--guided .form__home__inner { grid-template-columns: minmax(0,500px); justify-content: center; gap: 0; }
  .form__home.form__home--guided .form__home-img { width: min(320px,90%); justify-self: end; margin: 20px 0 0; }
  .form__home.form__home--guided .signup-guide-motion { width: 100%; margin-left: 0; }
}

/* Beside the form the guide sits a little higher and further right; the still and both clips move together. */
@media (min-width: 901px) {
  .form__home.form__home--guided .signup-guide-motion { transform: translate(5%, -6%); }
}

/* Separate the signup section from the tall, curved shuttle mesh. */
@media (min-width: 1200px) {
  .form__home.form__home--guided { margin-top: clamp(96px, 8vw, 160px); }
}